第8章 BOM《JavaScript前端开发案例教程（第2版）》学习目标/Target章节概述/ Summary在实际开发中，使用JavaS
cript开发网页交互效果时，经常需要获取浏览器的一些信息，控制浏览器的刷新和页面跳转。为了能够使JavaScript控制浏览器，
浏览器提供了BOM。本章将对BOM进行详细讲解。目录/ContentsBOM简介8.1 先定一个小目标！了解什么是BOM，能够说出
BOM的概念并列举常见的BOM对象8.1 BOM简介8.1 BOM简介浏览器对象模型（Brower Object Model，BO
M）是浏览器提供的用于JavaScript与浏览器窗口进行交互的一系列对象。8.1 BOM简介由于没有统一的BOM标准，每个浏览器
都有自己的BOM实现方法，BOM的浏览器兼容性较差。常见的BOM对象有：8.1 BOM简介在BOM中，顶级对象是window，表示
浏览器窗口，其他对象都是window对象的属性。document对象表示文档，它既属于BOM又属于DOM；location对象用于
操作浏览器地址；navigator对象用于获取浏览器的基本信息；history对象用于操作历史记录；screen对象用于获取屏幕信
息。BOM对象8.2 先定一个小目标！掌握window对象，能够使用window对象获取窗口相关的信息8.2.1 window对
象window对象：在JavaScript中具有双重角色，它既是浏览器窗口对象又是一个全局对象。全局对象在书写时可以省略，举例如下
。document可以写成window.document。console可以写成window.console。alert()可以写
成window.alert()。prompt()可以写成window.prompt()。8.2.1 window对象在开发中，定
义在全局作用域中的变量、函数，其实都是window对象的属性、方法，下面通过代码演示这一现象，示例代码如下。8.2.1 wind
ow对象// 全局作用域中的变量是window对象的属性var num = 10;console.log(window.num);
// 输出结果：10// 全局作用域中的函数是window对象的方法function fn() { return 11;}co
nsole.log(window.fn()); // 输出结果：11window对象中除了document、location、n
avigator、screen和history属性外，还有哪些属性和方法？8.2.1 window对象window对象中其他常用
的属性和方法如下。8.2.1 window对象 先定一个小目标！掌握location对象，能够使用location对象获取当前U
RL地址相关的信息8.2.2 location对象location对象用于操作浏览器地址，通过location对象可以获取当前窗
口的URL地址相关的信息。location对象既是window对象的属性又是document对象的属性。8.2.2 locati
on对象location对象常用的属性和方法如下。8.2.2 location对象8.2.2 location对象locati
on对象常用属性和方法的说明如下。search属性通常用于在向服务器查询信息时传入查询条件，如页码、搜索的关键字、排序方式等；re
load()方法只有1个可选参数forceReload，它是一个布尔值，当值为true时，将强制浏览器从服务器加载页面资源，当值为
false或者未传参时，浏览器则可能从缓存中读取页面。assign()在打开指定URL时，会生成一条新的历史记录，而replace
()方法不会生成新的记录，并且在调用replace()方法后，用户不能返回到前一个页面。Tip下面以URL为例演示location
对象的常用属性。http://127.0.0.1:5500/test.html?name=a#data8.2.2 locatio
n对象当通过上述URL打开页面时，location对象常用属性的获取结果如下。console.log(location.searc
h); // 输出结果：?name=aconsole.log(location.hash); // 输出结果：#datacons
ole.log(location.host); // 输出结果：127.0.0.1:5500console.log(locati
on.hostname); // 输出结果：127.0.0.1console.log(location.href); // 输出
结果与原URL地址相同console.log(location.pathname); // 输出结果：/test.htmlcons
ole.log(location.port); // 输出结果：5500console.log(location.protoco
l); // 输出结果：http:下面通过代码演示location对象常用方法的使用。8.2.2 location对象locat
ion.assign(''index.html''); // 加载当前目录下的index.htmllocation.replace(''
index.html''); // 将当前页面替换为index.htmllocation.reload(); // 刷新当前页面
先定一个小目标！掌握navigator对象，能够使用navigator对象获取浏览器相关的信息8.2.3 navigator对象
8.2.3 navigator对象navigator对象用于获取有关浏览器的信息，不同浏览器的差异较大。?下面以userAgen
t属性为例演示该属性的使用。var msg = navigator.userAgent;console.log(msg);8.2.
3 navigator对象获取浏览器发送到服务器的User-Agent的值8.2.3 navigator对象Chrome浏览器
的输出结果如下。Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.
36 (KHTML, like Gecko) Chrome/77.0.3865.75 Safari/537.36Firefox浏览
器的输出结果如下。Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:69.0) Gecko/
20100101 Firefox/69.0IE浏览器（IE 9）的输出结果如下。Mozilla/5.0 (compatible;
MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0
.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6
.0; .NET4.0C; .NET4.0E; InfoPath.3) 先定一个小目标！掌握history对象，能够使用histo
ry对象实现浏览器前进和后退8.2.4 history对象history对象可以对用户在浏览器中访问过的历史记录进行操作。出于安
全方面的考虑，history对象不能直接获取用户浏览过的历史记录，但可以控制浏览器的“后退”和“前进”等功能。?history对象
常用的属性和方如下。8.2.4 history对象下面演示history对象的使用。history.forward(); //
控制浏览器“前进一页”history.back(); // 控制浏览器“后退一页”history.go(2); // 控制浏览
器“前进两页”history.go(-2); // 控制浏览器“后退两页”8.2.4 history对象当go()方法的参数d
elta的值是负整数时，表示“后退”指定的页数；是正整数时，表示“前进”指定的页数；是0或省略使表示刷新页面。Tip 先定一个小目
标！掌握screen对象，能够使用screen对象获取屏幕的相关信息8.2.5 screen对象screen对象用于获取屏幕相关
的信息，如屏幕的宽度和高度等。?8.2.5 screen对象下面演示screen对象的使用。console.log(screen
.width); // 示例结果：1920console.log(screen.height); // 示例结果：1080cons
ole.log(screen.availWidth); // 示例结果：1920console.log(screen.availH
eight); // 示例结果：1032上述代码中screen属性获取的结果都是数字型像素值。screen.availHeight
属性的获取结果比screen.height属性的获取结果小了48px，这是因为Windows系统的任务栏占用了48px的屏幕可用空
间。8.2.5 screen对象窗口事件8.3 先定一个小目标！掌握窗口加载与卸载事件，能够在窗口加载和卸载时执行特定操作8.3
.1 窗口加载与卸载事件8.3.1 窗口加载与卸载事件窗口事件是指window对象的事件，它与整个窗口有关。常用的窗口事件有窗
口加载与卸载事件、窗口大小事件。窗口加载、卸载事件的使用场景：如果要在窗口加载完成后执行某些代码，或在窗口卸载时执行某些代码时可以
使用。8.3.1 窗口加载与卸载事件窗口加载与卸载事件如下。针对load和unload事件的说明如下。load事件会在网页文档以
及外链的文件（包括图像文件、JS文件、CSS文件等）全部加载完成后才会触发；unload事件会在用户关闭网页时触发。窗口加载与卸载
事件有两种注册方式，示例代码如下。// 方式1window.onload = function () {};window.onun
load = function () {};// 方式2window.addEventListener(''load'', funct
ion () {});window.addEventListener(''unload'', function () {});方式1只
能注册一个事件处理函数，方式2可以注册多个事件处理函数，只需多次调用window.addEventListener()即可。8.3
.1 窗口加载与卸载事件当网页中的图片有很多时，如果图片加载速度慢，窗口加载事件的触发可能需要较长的时间，这样会影响到用户的体验
。怎么解决呢？我们可以使用document.DOMContentLoaded事件，它会在文档加载完成时触发，与图像文件、JavaS
cript文件和CSS文件等外部文件是否加载完成无关，适用于页面中外部文件有很多的情况。多学一招：document.DOMCont
entLoaded8.3.1 窗口加载与卸载事件document.DOMContentLoaded事件不兼容IE 9之前版本的浏
览器。Tip 先定一个小目标！掌握窗口大小事件，能够在窗口大小调整时执行特定操作8.3.2 窗口大小事件在开发中，如何知道用户当
前是否正在调整浏览器窗口大小？8.3.2 窗口大小事件在开发中，如果需要知道用户是否正在调整浏览器窗口大小，可以使用窗口大小事件
resize，该事件有两种注册方式，如下所示。// 方式1window.onresize = function () {};//
方式2window.addEventListener(''resize'', function () {});8.3.2 窗口大小事
件接下来通过案例演示当用户调整窗口大小时，在控制台输出当前页面的宽度，示例代码如下。8.3.2 窗口大小事件定时器8.4 先定一个小目
标！掌握定时器方法，能够完成定时器的设置与清除8.4.1 定时器方法8.4.1 定时器方法轮播图效果和倒计时效果可以使用定时器
相关方法实现。window对象提供了setTimeout()和setInterval()两种设置定时器的方法，以及clearTim
eout()、clearInterval()两种清除定时器的方法。8.4.1 定时器方法setTimeout()和setInte
rval()方法的相同点和不同点如下。相同点：这两个方法都可以在一个固定时间段内执行代码。不同点： setTimeout()方法只
执行一次代码，而setInterval()方法会在指定的时间后自动重复执行代码。8.4.1 定时器方法setTimeout()和
setInterval()方法都有2个参数，说明如下。第1个参数表示到达延迟时间后执行的代码，可以传入普通函数、匿名函数或字符串代
码。第2个参数表示延迟时间的毫秒值。8.4.1 定时器方法定时器的清除方法setTimeout()和setInterval()方
法的返回值为定时器ID（定时器的唯一标识）。将定时器ID作为参数传给clearTimeout()或clearInterval()方
法可以清除定时器。下面以setTimeout()方法为例演示定时器的设置，示例代码如下。// 传入普通函数setTimeout(f
n, 3000);function fn() { console.log(''JavaScript'');}// 传入匿名函数set
Timeout(function () {alert(''JavaScript'');}, 3000);// 传入字符串代码setTi
meout(''alert("JavaScript");'', 3000); 8.4.1 定时器方法下面以clearTimeout(
)方法为例演示定时器的清除，示例代码如下。// 设置定时器时，保存定时器idvar timer = setTimeout(func
tion () { alert(''JavaScript'');}, 3000);// 清除定时器时，传入要清楚的定时器IDcle
arTimeout(timer);8.4.1 定时器方法当通过clearTimeout()方法清除定时器后，该定时器将不再执行。
先定一个小目标！掌握60秒内只能发送一次短信案例的开发，能够利用定时器相关的方法实现短信的发送8.4.2 【案例】60秒内只能
发送一次短信本案例将会利用setInterval()和clearInterval()方法完成一个发送短信的案例，要求60秒内只能发
送一次短信。8.4.2 【案例】60秒内只能发送一次短信8.4.2 【案例】60秒内只能发送一次短信案例分析在页面中放一个文本
框和一个“发送”按钮，文本框用于输入手机号码，输入完成后，单击“发送”按钮，该按钮在60秒以内不能再次被单击，防止重复发送短信。并
且，在单击“发送”按钮之后，该按钮中的文字会变为“还剩下60秒”，并且“60”会每秒减1。当60秒过去后，按钮恢复为初始状态。左图
为页面初始效果，右图为单击发送按钮之后的效果。8.4.2 【案例】60秒内只能发送一次短信 先定一个小目标！熟悉同步和异步的概念
，能够说出同步和异步的区别8.4.3 同步和异步JavaScript的执行机制是单线程，意味着所有任务需要排队，前一个任务结束，
才会执行后一个任务，如果其中一个任务执行的时间过长，就会阻塞后面的任务。8.4.3 同步和异步例如，有3个任务正在排队，第1个任
务是在控制台输出“1”，第2个任务是5秒后在控制台输出“2”，第3个任务是在控制台输出“3”。当程序执行到任务2时，程序就被阻塞了
5秒，之后才能执行第3个任务。如何解决这个问题呢？8.4.3 同步和异步8.4.3 同步和异步我们可以通过定时器来解决，使用s
etTimeout()设置一个5秒的定时器，将第2个任务放到定时器函数中，示例代码如下。console.log(1); // 第
1个任务setTimeout(function () { console.log(2); // 第2个任务}, 5000);co
nsole.log(3); // 第3个任务当调用setTimeout()方法后，该方法会立即执行完成，然后执行后面的代码，在控
制台中输出3。而为setTimeout()传入的函数，它会在到达指定时间后执行。8.4.3 同步和异步程序中有“异步”和“同步”
两种操作方式，使用定时器解决阻塞的问题，这样的操作称为异步操作。关于“异步”和“同步” 操作方式具体解释如下。同步：前一个任务结束
后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的。异步：在处理一件任务的同时，可以去处理其他的任务。8.4.3 同步和
异步有这样一个问题：当定时器的时间设为0的时候，到底是定时器传入的回调函数优先执行，还是setTimeout()后面的代码优先执行
呢？多学一招：JavaScript执行机制console.log(1);setTimeout(function () { con
sole.log(2);}, 0);for (var i = 0, str = ''''; i < 900000; i++) { s
tr += i; }console.log(3);利用字符串拼接运算拖慢执行时间8.4.3 同步和异步setTimeout()后
面的代码优先执行，而为定时器传入的回调函数是最后执行。多学一招：JavaScript执行机制8.4.3 同步和异步在JavaSc
ript中，同步任务都是放在主线程的执行栈中优先执行的，而异步任务（回调函数中的代码）则被放在任务队列中等待执行。下面演示执行栈和
任务队列的区别。一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务就会进入执行栈开始执行
。 先定一个小目标！掌握动手实践：制作交通信号灯的实现方法，能够实现交通信号灯切换功能动手实践：制作交通信号灯案例需求：利用Jav
aScript实现交通信号灯，其中，红灯时长为30秒，绿灯时长为35秒，黄灯时长为5秒。页面中的3个圆表示3个信号灯，分别是红灯、黄灯和绿灯，绿灯右边的数字35是倒计时，每隔1秒会减1，当减到0时会换灯。动手实践：制作交通信号灯编写HTML页面，创建信号灯外层容器div，在容器中放4个div，分别表示红灯、黄灯、绿灯和倒计时。创建信号灯对象，分别创建红灯对象、黄灯对象、绿灯对象，以及倒计时对象，然后对象中定义2个方法，分别用于切换下一个灯和设置倒计时数值。实现信号灯切换效果，设置页面刚打开时显示的灯和倒计时，然后通过setInterval()设置定时器，每隔1秒触发一次，当触发时，将持续时间减1，然后判断持续时间是否小于或等于0，如果判断满足，则需要切换成下一个灯，否则，不切换灯，只更新倒计时。案例实现思路如下。动手实践：制作交通信号灯本章小结本章首先讲解了BOM的基本概念，接着讲解了常用的BOM对象，包括window对象、location对象、navigator对象、history对象以及screen对象，然后讲解了窗口事件，包括窗口加载与卸载事件、窗口大小事件，最后讲解了定时器的使用。希望读者通过本章的学习，能够通过BOM来完成一些常见的页面交互效果。本章小结 |
|
