WebAPIs——BOM

文章目录

  • 一. BOM 概述
    • 1. 什么是 BOM
    • 2. BOM 的构成
  • 二. window 对象的常见事件
    • 1. 窗口加载事件
    • 2. 调整窗口大小事件
  • 三. 定时器
    • 1. 两种定时器
    • 2. setTimeout() 定时器
    • 3. 停止 setTimeout() 定时器
    • 4. setInterval() 定时器
    • 5. 停止 setInterval() 定时器
    • 6. this
  • 四. JS 执行机制
    • 1. JS 是单线程
    • 2. 同步和异步
      • 2.1 同步
      • 2.2 异步
      • 2.3 同步任务
      • 2.4 异步任务
    • 3. JS 执行机制
  • 五. location 对象
    • 1. 什么是 location 对象
    • 2. URL
    • 3. location 对象的属性
    • 4. location 对象的方法
  • 六. navigator 对象
  • 七. history 对象

一. BOM 概述

1. 什么是 BOM

在这里插入图片描述
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。

BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分

WebAPIs——BOM_第1张图片

2. BOM 的构成

BOM 比 DOM 更大,它包含 DOM。

WebAPIs——BOM_第2张图片
WebAPIs——BOM_第3张图片
注意:window下的一个特殊属性 window.name

二. window 对象的常见事件

1. 窗口加载事件

WebAPIs——BOM_第4张图片
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等), 就调用的处理函数

注意:

  1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
  2. window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
  3. 如果使用 addEventListener 则没有限制

在这里插入图片描述
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等

2. 调整窗口大小事件

在这里插入图片描述
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意:

  1. 只要窗口大小发生像素变化,就会触发这个事件。
  2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

三. 定时器

1. 两种定时器

WebAPIs——BOM_第5张图片

2. setTimeout() 定时器

在这里插入图片描述
setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
  3. 延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

WebAPIs——BOM_第6张图片

3. 停止 setTimeout() 定时器

在这里插入图片描述
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符

4. setInterval() 定时器

在这里插入图片描述
setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
  3. 间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
  4. 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。
  5. 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。

5. 停止 setInterval() 定时器

在这里插入图片描述
clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符

6. this

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象

现阶段,我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例

四. JS 执行机制

1. JS 是单线程

JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除

  • 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

2. 同步和异步

为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步

2.1 同步

前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。

  • 比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

2.2 异步

你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。

  • 比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

2.3 同步任务

同步任务都在主线程上执行,形成一个执行栈。

WebAPIs——BOM_第7张图片

2.4 异步任务

WebAPIs——BOM_第8张图片
WebAPIs——BOM_第9张图片

3. JS 执行机制

WebAPIs——BOM_第10张图片
WebAPIs——BOM_第11张图片

五. location 对象

1. 什么是 location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象

2. URL

WebAPIs——BOM_第12张图片

WebAPIs——BOM_第13张图片

3. location 对象的属性

WebAPIs——BOM_第14张图片

4. location 对象的方法

WebAPIs——BOM_第15张图片

六. navigator 对象

navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面,实现跳转
WebAPIs——BOM_第16张图片

七. history 对象

window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。

WebAPIs——BOM_第17张图片
history 对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到
WebAPIs——BOM_第18张图片

你可能感兴趣的:(JavaScript,javascript)