day05 本地存储、window对象

最新推荐文章于 2024-07-04 10:47:36 发布

TreeShaking

最新推荐文章于 2024-07-04 10:47:36 发布

阅读量186

点赞数

分类专栏： JavaScript-webAPI 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62643012/article/details/129974033

版权

文章目录

- Web APIs - 第5天笔记

Web APIs - 第5天笔记

目标：能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力

BOM操作
综合案例

1js组成

JavaScript的组成

ECMAScript:
- 规定了js基础语法核心知识。
- 比如：变量、分支语句、循环语句、对象等等
Web APIs :
- DOM 文档对象模型，定义了一套操作HTML文档的API
- BOM 浏览器对象模型，定义了一套操作浏览器窗口的API （BOM区域大于DOM区域）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5PvWN8kN-1680687479434)(assets/1676047389456.png)]

2.window对象

BOM (Browser Object Model ) 是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7lIAIiSy-1680687479436)(assets/1676047436362.png)]

2.1定时器-延迟函数

语法：

setTimeout(回调函数, 延迟时间)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window
清除延时函数：

clearTimeout(timerId)

注意点

延时函数需要等待,所以后面的代码先执行

返回值是一个正整数，表示定时器的编号

  <script>
    // 定时器之延迟函数
    // 1. 开启延迟函数
    let timerId = setTimeout(function () {
     
      console.log('我只执行一次')
    }, 3000)
    // 1.1 延迟函数返回的还是一个正整数数字，表示延迟函数的编号
    console.log(timerId)
    // 1.2 延迟函数需要等待时间，所以下面的代码优先执行
    // 2. 关闭延迟函数
    clearTimeout(timerId)
  </script>

2.2js执行机制

事件循环evenloop
先执行执行栈同步任务，异步任务放在任务队列里边，浏览器观察，等同步任务执行完，再执行异步任务（异步任务被读取后，在执行栈内执行）

js单线程（同一时间只处理一个事）
对于需要等待的，暂时跳过
解决标准：
- 同步：前一个任务结束开始下一个任务，程序执行的顺序与任务排列的顺序一致
- 异步：当前任务和别的任务何以一起执行
- 同步任务：主线程执行，形成一个执行栈
- 异步任务：异步相关的任务添加到任务队列中
常见的异步任务
- 普通事件：click resize
- 资源加载：load error
- 定时器：setInterval setTimeout
解决办法：

console.log(1)
    console.log(2)
    setTimeout(function () {
   
      console.log(3)
    }, 0)
    console.log(4);  //输出结果 1243

2.3location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分，它是一个对象，属于window，window可以省略

属性/方法	说明
href	属性，获取完整的 URL 地址，赋值时用于地址的跳转
search	属性，获取表单跳转地址中携带的参数，符号？后面部分
hash	属性，获取地址中的啥希值，符号 # 后面部分
reload()	方法，用来刷新当前页面，传入参数 true 时表示强制刷新