JavaScript Web API入门day5

2024-09-03 14:44
文章标签 java script web api day5 入门

本文主要是介绍JavaScript Web API入门day5，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

1.Window对象

1.1 BOM(浏览器对象模型)

1.2 定时器-延时函数

1.3 JS执行机制

1.3.1 问题

1.3.2 解决问题

1.4 location对象

1.5 navigator对象

1.6 histroy对象

2.本地存储

2.1 本地存储介绍

2.2 本地存储分类

2.2.1 本地存储分类 - localStorage

2.2.2 本地存储分类 - sessionStorage

3.综合案例

1.Window对象

1.1 BOM(浏览器对象模型)

BOM(Browser Object Model ) 是浏览器对象模型。
注意事项：
  • window对象是一个全局对象，也可以说是JavaScript中的顶级对象。
  • document、alert()、console这些都是window的属性，基本BOM的属性和方法都是window的。
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

1.2 定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法：
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window。
清除延时函数 ：
注意事项：
  • Ø 延时器需要等待,所以后面的代码先执行
  • Ø 每一次调用延时器都会产生一个新的延时器（数值型）
两种定时器对比： 执行的次数
  • Ø 延时函数: 执行一次
  • Ø 间歇函数:每隔一段时间就执行一次,除非手动清除
案例
需求：5秒钟之后，广告自动消失
分析：
①：设置延时函数
②：隐藏元素

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {position: fixed;bottom: 0;left: 0;}</style>
</head><body><img src="./images/ad.png" alt=""><script>const img = document.querySelector('img')setTimeout(function () {img.style.display = 'none'}, 3000)</script>
</body></html>

1.3 JS执行机制

1.3.1 问题

JavaScript 语言的一大特点就是 单线程 ，也就是说， 同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作DOM 而诞生的。
比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。
这样所导致的问题是：
如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

1.3.2 解决问题

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了 同步 和 异步。
同步：
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步：
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事
情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
同步任务：
同步任务都在主线程上执行，形成一个 执行栈。
异步任务：
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关添加到 任务队列 中（任务队列也称为消息队列）。
1.3.3 执行机制
1. 先执行 执行栈中的同步任务 。
2 . 异步任务放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取 任务队列 中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为 事件循环（ event loop）  。
高级软件人才培训专家
练习：
答案：1243 或者1234

1.4 location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分。
常用属性和方法：
  • Ø href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
  • Ø search 属性获取地址中携带的参数，符号 ？后面部分
  • Ø hash 属性获取地址中的啥希值，符号 # 后面部分
  • Ø reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

 

1.5 navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
Ø 通过 userAgent 检测浏览器的版本及平台 

// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()

1.6 histroy对象

history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

2.本地存储

2.1 本地存储介绍

以前我们页面写的数据一刷新页面就没有了，是不是？
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
  • 1、数据存储在用户浏览器中
  • 2、设置、读取方便、甚至页面刷新不丢失数据
  • 3、容量较大，sessionStorage和localStorage约 5M 左右

2.2 本地存储分类

2.2.1 本地存储分类 - localStorage

目标： 能够使用localStorage 把数据存储的浏览器中
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
特性：
  • Ø 可以多窗口（页面）共享（同一浏览器可以共享）
  • Ø 以键值对的形式存储使用

语法:

2.2.2 本地存储分类 - sessionStorage

特性：
  • Ø 生命周期为关闭浏览器窗口
  • Ø 在同一个窗口(页面)下数据可以共享
  • Ø 以键值对的形式存储使用
  • Ø 用法跟localStorage 基本相同

两者的区别：

用法跟localStorage基本差不多，区别就是生命周期的问题，localStorage需要手动删除，

sessionStorage就是当用户关闭页面数据就会丢失。

需要注意：本地存储只能存储字符串，就算存储的不是字符串，本地也会尝试去进行数据类型的自动转换。

3.综合案例

需求： 录入学生信息，页面刷新数据不丢失
效果图：
思路分析：
  • ①：因为页面刷新不丢失数据，所以可能存在已有数据，所以第一步，我们先找本地存储里面查找是否有数据，如果有数据先进行渲染页面，如果没有数据，我们放一个空数组，用来存放数据
  • ②：渲染模块，数据会渲染到页面中
  • ③：新增模块， 输入学生信息，数据会存储到本地存储中，然后渲染页面
  • ④：删除模块，点击删除按钮，会删除对应的数据，然后渲染页面

用到的技术：

1.数组中map方法   迭代数组进行字符串拼接且返回新的数组
语法：
2. 数组中join方法   用于把数组中的所有元素转换一个字符串
语法：
参数：
数组元素是通过参数里面指定的分隔符进行分隔的
代码： 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生信息管理</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname" />年龄：<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary" name="salary" />就业城市：<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><script>// 参考数据const initData = [{stuId: 1,uname: '欧阳霸天',age: 19,gender: '男',salary: '20000',city: '上海',}]// 本地存储(对象转换为JSON字符串)// localStorage.setItem('data', JSON.stringify(initData))/* 1.渲染业务1.1 先读取本地存储的数据(1).本地存储有数据则转换为对象存储到变量里面，后期用于渲染页面(2).如果没有数据，则用空数组来代替*/const arr = JSON.parse(localStorage.getItem('data')) || []console.log(arr);const tbody = document.querySelector('tbody')// 利用map和join来渲染页面function render() {// 使用map,进行字符串拼接,并且生成新的数组const newArr = arr.map(function (ele, index) {return `<tr><td>${ele.stuId}</td><td>${ele.uname}</td><td>${ele.age}</td><td>${ele.gender}</td><td>${ele.salary}</td><td>${ele.city}</td><td><a href="javascript:" data-id=${index}>删除</a></td></tr> `})console.log(newArr);//(2)把数组转换为字符串 join//(3)把生成的字符串追加给tbodytbody.innerHTML = newArr.join('')}//渲染页面函数调用render()//2.新增模块const info = document.querySelector('.info')const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')info.addEventListener('submit', function (e) {//取消自动跳转e.preventDefault()//非空判断if (!uname.value || !age.value || !salary.value) {return alert('你还有没初始化的数据')}//添加数据arr.push({//这里的id如果是这样initData.length + 1会有bug//改进就是最后一条数据的stuId + 1//但是如果数组为空,会出现异常,因此用三元表达式stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value,})//重置表单this.reset()//渲染页面render()//新的数组覆盖旧的数组localStorage.setItem('data', JSON.stringify(arr))})//3.删除模块//使用事件委托方式tbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {if (confirm('你确定要删除这条数据吗？')) {//根据自定义属性删除idarr.splice(e.target.dataset.id, 1)//渲染页面render()//删除本地存储localStorage.setItem('data', JSON.stringify(arr))}}})</script>
</body></html>

这篇关于JavaScript Web API入门day5的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1133251。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2