《鸿蒙应用开发》课件——第8章 BOM.pptxVIP

第8章BOM《JavaScript前端开发案例教程（第2版）》

学习目标/Target了解BOM的概念，能够说出BOM的作用掌握BOM对象的使用，能够通过BOM对象实现浏览器操作掌握窗口事件的使用，能够在窗口加载、卸载或改变大小时执行特定的代码掌握定时器方法的使用，能够通过定时器延迟一段时间执行代码或间歇执行代码熟悉同步和异步的概念，能够说出同步和异步的区别

章节概述/Summary在实际开发中，使用JavaScript开发网页交互效果时，经常需要获取浏览器的一些信息，控制浏览器的刷新和页面跳转。为了能够使JavaScript控制浏览器，浏览器提供了BOM。本章将对BOM进行详细讲解。

目录/Contents010203BOM简介BOM对象窗口事件04定时器05动手实践：制作交通信号灯

BOM简介8.1

先定一个小目标！了解什么是BOM，能够说出BOM的概念并列举常见的BOM对象8.1BOM简介

8.1BOM简介浏览器对象模型（BrowerObjectModel，BOM）是浏览器提供的用于JavaScript与浏览器窗口进行交互的一系列对象。

8.1BOM简介由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，BOM的浏览器兼容性较差。常见的BOM对象有：

8.1BOM简介在BOM中，顶级对象是window，表示浏览器窗口，其他对象都是window对象的属性。document对象表示文档，它既属于BOM又属于DOM；location对象用于操作浏览器地址；navigator对象用于获取浏览器的基本信息；history对象用于操作历史记录；screen对象用于获取屏幕信息。

BOM对象8.2

先定一个小目标！掌握window对象，能够使用window对象获取窗口相关的信息8.2.1window对象

window对象：在JavaScript中具有双重角色，它既是浏览器窗口对象又是一个全局对象。全局对象在书写时可以省略，举例如下。document可以写成window.document。console可以写成window.console。alert()可以写成window.alert()。prompt()可以写成mpt()。8.2.1window对象

在开发中，定义在全局作用域中的变量、函数，其实都是window对象的属性、方法，下面通过代码演示这一现象，示例代码如下。8.2.1window对象//全局作用域中的变量是window对象的属性varnum=10;console.log(window.num); //输出结果：10//全局作用域中的函数是window对象的方法functionfn(){return11;}console.log(window.fn()); //输出结果：11

window对象中除了document、location、navigator、screen和history属性外，还有哪些属性和方法？8.2.1window对象

window对象中其他常用的属性和方法如下。8.2.1window对象分类名称说明属性name设置或获取窗口的名称opener获取创建了此窗口的window对象parent获取当前窗口的父窗口window对象self获取当前窗口的window对象，等价于window属性window获取当前窗口的window对象top获取最顶层窗口的window对象（页面中有多个框架时）方法alert()弹出带有一段消息和一个确认按钮的警告框弹出带有一段消息以及确认按钮和取消按钮的对话框confirm()弹出提示用户输入的对话框prompt()打开一个新的浏览器窗口或查找一个已命名的窗口open()关闭浏览器窗口close()focus()把键盘焦点给予一个窗口scrollBy()按照指定的像素值来滚动内容scrollTo()把内容滚动到指定的坐标

先定一个小目标！掌握location对象，能够使用location对象获取当前URL地址相关的信息8.2.2location对象

location对象用于操作浏览器地址，通过location对象可以获取当前窗口的URL地址相关的信息。location对象既是window对象的属性又是document对象的属性。8.2.2location对象

location对象常用的属性和方法如下。分类名称说明属性search获取或设置当前URL的查询字符串（又称为URL参数），即URL中“?”之后的部分hash获取当前URL的锚点部分（从“#”开始的部分）host获取当前URL的主机名和端口hostname获取当前URL的主机名href