JavaScript前端开发程序设计项目式教程课件 项目7 故宫轮播图-BOM对象

项目7

故宫轮播图——BOM对象学校组织观看纪录片《我在故宫修文物》，讲的是中国的顶级“工匠”在故宫修文物的故事。从纪录片中张华得知，潍坊就有两位传承人被选入故宫修文物。想去故宫修文物并不容易，不仅要有过硬的技艺，还要“过五关斩六将”。张华没有去过故宫，深深地被纪录片中的各种修补工作吸引了，于是开始搜索有关故宫的一些知识，浏览到故宫博物院的网站时，发现首页最上面的图片很特别，如图所示。情境导入■

理解BOM的基本概念和组成。■

掌握Window对象的定时器（setInterval）、延时器（setTimeout）的语法与作用。■

掌握Screen对象的作用及常用属性，了解如何获取屏幕信息。■

熟悉Navigator对象的常用属性，能够获取浏览器及系统的相关信息。■

认识Location对象的功能及URL语法格式，了解其在页面导航和URL操作中的应用。■

了解History对象的用途，掌握使用History对象进行浏览器历史列表操作的方法。项目目标■

能够使用定时器实现轮播图自动切换，通过延时器实现轮播图无缝衔接。■

能够使用Screen对象获取并操作屏幕信息，如分辨率、可用宽度和高度等。■

能够利用Navigator对象检测用户的版本，以及运行浏览器的操作系统等信息。■

能够通过Location对象实现页面的跳转、刷新以及获取和设置URL参数。■

能够使用History对象进行页面的前进、后退操作。■

能够综合运用BOM中的核心对象，实现基础的浏览器控制和交互功能。■

培养全局思维，能够从浏览器环境整体角度理解BOM各对象的关联关系。■

增强创新意识和探索精神，鼓励其尝试使用BOM实现新颖的交互效果和功能。■

培养团队协作能力，使其能够在团队项目中合理利用BOM知识实现网页基础交互功能，提升用户体验。■

培养耐心和细致的品质，确保在复杂环境中准确使用BOM对象，避免出现错误或冲突。任务7.2使用Screen对象任务7.3使用Navigator对象任务7.4使用Location对象任务7.5使用History对象任务7.1认识BOM对象认识BOM对象任务7.1BOM是JavaScript中用于访问和操作浏览器窗口的一个核心模型。BOM包括Window、History、Location、Navigator、Screen等，它们各自承担着不同的角色和功能，能够控制和访问浏览器窗口的各种行为和特征。任务7.1认识BOM对象BOM对象的说明和典型应用场景如表所示。7.1.1

BOM对象概述对象说明典型应用场景WindowBOM

的顶层对象，代表浏览器窗口，是其他BOM对象的根控制窗口行为（打开/关闭、弹窗等）History管理浏览器历史列表，支持前进、后退、跳转等操作页面前进/后退导航Location提供当前URL的详细信息，支持跳转、刷新等操作页面重定向、获取URL参数Navigator包含有关浏览器的信息，如浏览器名称、版本等浏览器兼容性检测Screen提供有关客户端屏幕的信息响应式布局适配在BOM对象体系中，Window位于顶层，可以使用标识符window直接访问下层对象。Window是可以省略的，如上述代码可以直接写成如下语句。7.1.2

Window对象详解window.document.write("hello!");//window.document是BOM中访问文档对象的入口（document作为Window对象的属性存在，属于BOM的对象体系）document.write(“hello!”);Window

对象既是

BOM

的顶层对象，也代表浏览器一个窗口。Window

对象的属性包括基本属性、坐标属性和尺寸属性，分别用于获取窗口的层级关系、位置信息和尺寸信息。7.1.2

Window对象详解分类属性说明基本属性parent返回父窗口self返回对当前窗口的引用（与

window等价）windowwindow属性与self属性等价，均返回当前窗口引用坐标属性scrollX页面水平滚动距离（别名pageXOffset）scrollY页面垂直滚动距离（别名pageYOffset）尺寸属性innerHeight视口高度（不含浏览器边框、菜单栏、地址栏、状态栏等）innerWidth视口宽度（不含浏览器边框、菜单栏、地址栏、状态栏等）outerHeight返回整个浏览器窗口的外部高度（包括标题栏、工具栏、边框等，只读）outerWidth返回整个浏览器窗口的外部宽度（包括标题栏、工具栏、边框等，只读）Window对象的方法涵盖对话框操作、定时器和延时器设置、窗口的打开和关闭、窗口位置和大小的调整等功能。7.1.2

Window对象详解分类方法说明对话框操作alert()打开警示对话框confirm()打开确认对话框prompt()打开提示对话框定时器和延时器设置setInterval(exp,time)设置定时器，每隔time毫秒（ms）重复执行exp（函数或代码字符串），返回唯一定时器ID（用于取消）setTimeout(exp,time)设置延时器，延迟time毫秒后执行一次exp（函数或代码字符串），返回唯一延时器ID（用于取消）clearInterval()取消由setInterval()方法设置的定时操作clearTimeout()取消由setTimeout()方法设置的延时操作窗口的打开和

关闭close()关闭浏览器窗口open(url,name,features)打开新浏览器窗口或标签页；参数包括

url（可选，新窗口加载的页面）、name（可选，窗口名称）、features（可选，窗口特征字符串，如"width=500,height=300"）；返回新窗口的

Window对象窗口位置和大小的调整

moveBy()根据给定的坐标移动窗口moveTo()将窗口移动到指定位置resizeBy(x,y)按照给定的数据调整窗口的大小resizeTo(x,y)将窗口设置为指定的大小focus()获得焦点blur()失去焦点

1.设置定时器setInterval()方法用于按照指定的周期（以ms计）来循环调用函数或计算表达式，即设置定时器。设置定时器的语法格式如下。code/function表示要执行的一段JavaScript代码或一个函数；milliseconds表示周期性执行或调用code/function的时间间隔，以ms计。设置定时执行一段JavaScript代码的代码如下。7.1.2

Window对象详解setInterval(code/function,milliseconds);setInterval("alert('hello')",2000);//不推荐使用字符串代码（存在安全风险）也可以通过自定义函数的方式来实现。通过执行自定义函数的方式来设置定时器时，自定义函数可以带参数，然后将参数输出。7.1.2

Window对象详解function

ShowMessage(){

alert("hello");}setInterval(ShowMessage,2000);function

alertFunc(str)

{alert(str);}setInterval("alertFunc('hello')",

2000);2.设置延时器setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，即设置延时器。设置延时器的语法格式如下。code/function表示要执行的一段JavaScript代码或一个函数；milliseconds表示延迟的时间，以ms计。7.1.2

Window对象详解setTimeout(code/function,milliseconds);2.设置延时器设置延时执行一段JavaScript代码的代码如下。上述代码表示2s后弹出“hello”，这里通过代码字符串的方式来实现，也可以通过自定义函数的方式来实现。7.1.2

Window对象详解setTimeout("alert('hello')",2000);function

ShowMessage(){alert("hello");}setTimeout(ShowMessage,2000);2.设置延时器通过执行自定义函数的方式来设置延时器时，自定义函数可以带参数，然后将参数输出。若想在延时器启动后取消它，则可以将setTimeout()方法的返回值传递给clearTimeout()方法。7.1.2

Window对象详解function

alertFunc(str)

{alert(str);}setTimeout("alertFunc('hello')",

2000);lettimerId=setTimeout(showMessage,2000);clearTimeout(timerId);【任务实践7-1】实时更新的时钟——定时器显示一个实时更新的时钟，用户可以随时启动或停止时钟的显示。任务目标任务分析使用setInterval()方法每隔一定的时间更新时钟的显示。通过Date对象获取当前时间，并使用toLocaleTimeString()方法格式化时间。提供启动和停止时钟显示的函数，通过调用setInterval()方法来启动定时更新，以及通过clearInterval()方法来停止定时更新。【任务实践7-1】实时更新的时钟——定时器【任务实践7-1】实时更新的时钟——定时器3.打开和关闭窗口open()方法用于打开一个新的浏览器窗口或标签页。URL表示要打开的指定窗口的URL，如果没有指定URL，则打开一个新的空白窗口；name表示target属性值或窗口的名称；specs表示窗口的特征列表，使用逗号进行分隔，其可选参数如表所示。7.1.2

Window对象详解window.open(URL,name,specs)参数说明width窗口的宽度，最小值为100pxheight窗口的高度，最小值为100pxleft窗口的左边距top窗口的上边距【任务实践7-2】打开/关闭新窗口——open()/close()方法通过Window对象的open()方法打开人邮教育社区窗口，通过close()方法关闭人邮教育社区窗口和主窗口。任务目标任务分析通过open()方法打开新窗口，可以使用自定义函数的方法来实现，定义一个打开窗口的函数openWin()，通过超链接调用函数的方法来调用函数，即javascript:openWin()。通过close()方法关闭新窗口，使用自定义函数的方法来实现，定义一个关闭窗口的函数closeWin()，通过超链接调用函数的方法来调用函数，即javascript:closeWin()。通过close()方法直接关闭主窗口。【任务实践7-2】打开/关闭新窗口——open()/close()方法<scripttype="text/javascript">

letnewWin=null;//引用打开的新窗口

functionopenWin(){//打开新窗口

newWin=open("","learningWindow",

"width=400,height=100,left=120,top=110");

}

functioncloseWin(){

if(newWin!==null&&!newWin.closed){

newWin.close();

newWin=null;

}else{

alert("窗口已关闭或未成功打开");

}

}

</script>4.改变窗口的大小

resizeTo(x,y)方法用于改变窗口的大小，x和y分别表示改变后的宽度和高度，单位是px而resizeBy(x,y)方法也用于改变窗口的大小，但是x和y表示在原来的基础上扩大或缩小的数值，它们为正数表示扩大，为负数表示缩小。7.1.2

Window对象详解window.resizeTo(400,400); //窗口大小调整为400px×400pxwindow.resizeBy(-500,-500); //窗口大小在原来的基础上各缩小500px【任务实践7-3】动态调整窗口大小——resizeTo()和resizeBy()方法使用resizeTo()和resizeBy()方法动态调整窗口的大小，并展示窗口的当前大小。任务目标任务分析使用open()方法打开新窗口。定义函数来使用resizeTo()和resizeBy()方法动态调整窗口的大小。使用document.write()方法或其他方法显示窗口的当前大小。【任务实践7-3】动态调整窗口大小——resizeTo()和resizeBy()方法【任务实践7-3】动态调整窗口大小——resizeTo()和resizeBy()方法【任务实践7-3】动态调整窗口大小——resizeTo()和resizeBy()方法

5.改变窗口的位置moveTo(x,y)方法用于移动窗口，x和y分别代表窗口距离屏幕左上角的水平和垂直距离，单位是px；moveBy(x,y)方法用于移动窗口，x代表在原来的基础上向左移动（x

<

0）或向右移动的距离，y代表在原来的基础上向上移动（y

<

0）或向下移动的距离。我们可以通过

screenLeft

和

screenTop

属性（或screenX和

screenY

属性，它们提供相同的信息）来分别获取窗口相对于屏幕左边和上边的位置。7.1.2

Window对象详解window.moveTo(100,100); //窗口移动到(100,100)window.moveBy(10,-50); //窗口在水平方向上向右移动10px，向上移动50px【任务实践7-4】灵活改变窗口位置——moveTo()和moveBy()方法

使用moveTo()和moveBy()方法改变窗口的位置，并展示当前位置的信息。任务目标任务分析使用open()方法打开新窗口。定义函数来使用

moveTo()

和

moveBy()

方法动态改变窗口的位置。使用screenLeft、screenTop（或screenX、screenY）属性来获取并显示窗口的当前位置。【任务实践7-4】灵活改变窗口位置——moveTo()和moveBy()方法

【任务实践7-4】灵活改变窗口位置——moveTo()和moveBy()方法

使用Screen对象任务7.2窗口的screen属性会引用Screen对象，它包含有关客户端屏幕的信息。任务7.2使用Screen对象属性说明width返回屏幕的总宽度（与任务栏无关）height返回屏幕的总高度（与任务栏无关）availHeight返回屏幕的可用高度（扣除系统任务栏、菜单栏等固定占用区域）availWidth返回屏幕的可用宽度（扣除系统任务栏、菜单栏等固定占用区域）colorDepth返回像素的颜色总位深度pixelDepth返回显示屏幕的颜色分辨率（bit/px），现代浏览器中与colorDepth返回值一致【任务实践7-5】显示当前屏幕的信息——Screen对象使用Screen对象显示屏幕信息，包括分辨率和可用区域等。任务目标任务分析使用Screen对象的属性获取屏幕的信息。在页面输出结果，以提高用户的交互体验。【任务实践7-5】显示当前屏幕的信息——Screen对象

<buttonid="screenInfoBtn"onclick="displayScreenInfo()">显示屏幕信息</button>

<divid="screenInfo"></div>

<script>

//显示屏幕信息

functiondisplayScreenInfo(){

constinfoDiv=document.getElementById("screenInfo");

infoDiv.innerHTML=`

<h3>屏幕信息</h3>

<p>分辨率：${screen.width}px×${screen.height}px</p>

<p>可用区域：${screen.availWidth}px×${screen.availHeight}px</p>

<p>颜色深度：${screen.colorDepth}bit</p>

<p>像素分辨率：${screen.pixelDepth}bit</p>

`;

}

</script>【能力提升】Screen对象的应用Screen对象常用于响应式布局，即根据用户屏幕尺寸动态调整页面布局。//响应式布局应用示例：根据屏幕宽度调整页面布局

if(screen.availWidth<768){document.body.classList.add("mobile-layout");}else{document.body.classList.remove("mobile-layout");}实践中需重点掌握Screen对象的核心用途（获取屏幕尺寸、适配布局），理解其在响应式开发中的应用价值，养成根据屏幕尺寸动态调整页面的编码习惯。使用Navigator对象任务7.3窗口的navigator属性就会引用Navigator对象，它是指浏览器对象，包含浏览器的信息。任务7.3使用Navigator对象属性说明appCodeName返回浏览器的引擎名称，如返回“Mozilla”appName返回浏览器名称，现代浏览器为兼容旧网站，多返回“Netscape”，建议通过userAgent属性判断浏览器类型appVersion返回浏览器的平台和版本信息cookieEnabled返回指明浏览器中是否启用cookie的布尔值platform返回运行浏览器的操作系统userAgent返回客户端发送给服务器的User-Agent字符串，包含浏览器名称、版本、操作系统、渲染引擎等信息（现代浏览器可能为兼容旧网站刻意修改部分内容）

【任务实践7-6】显示当前浏览器和操作系统信息——Navigator对象

通过Navigator对象显示当前浏览器的信息。任务目标任务分析直接使用Navigator对象的属性获取浏览器和操作系统的信息。使用document.write()方法输出结果。【任务实践7-6】显示当前浏览器和操作系统信息——Navigator对象

<scripttype="text/javascript">

document.write("操作系统信息："+navigator.platform+"<br/>");

document.write("浏览器名称："+navigator.appName+"<br/>");

document.write("是否启用cookie："+navigator.cookieEnabled+"<br/>");

document.write("浏览器版平台和版本信息："+navigator.appVersion+"<br/>");

document.write("用户代理："+navigator.userAgent+"<br/>");

</script>【任务实践7-6】显示当前浏览器和操作系统信息——Navigator对象

使用Location对象任务7.4窗口的location属性会引用Location对象，它包含有关当前URL的详细信息。在网络世界中，URL是信息资源的一种字符串表示方法，也就是我们常说的网址。一个典型的URL语法格式如下。任务7.4使用Location对象

protocol://hostname[:port]/path/[;parameters][?querystring]#fragment各部分的具体说明如下。①protocol：表示通信协议，如HTTP、HTTPS等。②hostname：表示主机名，是指服务器的域名系统主机名或IP地址。③port：表示端口号，是一个整数，可以省略，省略时表示使用对应协议的默认端口，如HTTP的默认端口是80，HTTPS的默认端口是443。④path：表示访问资源的具体路径，通常表示服务器上的目录或文件地址。⑤;parameters：早期

URL

设计中用于指定资源的“参数”，格式为;name=value，多个参数用“;”分隔。在现代Web开发中已很少使用，逐渐被querystring替代，但部分老系统仍可能兼容。⑥querystring：表示查询字符串，用于向动态网页传递参数，格式为“名=值”，多个参数之间用“&”连接。⑦fragment：表示指定资源中的信息片段，如在进行锚点连接时的连接参数。任务7.4使用Location对象

Location对象提供了多个常用的属性和方法，分别如表所示。任务7.4使用Location对象

属性说明hash返回URL的锚点部分host返回URL的主机名和端口hostname返回URL的主机名href返回完整的URLpathname返回URL的路径port返回URL服务器使用的端口号protocol返回URL协议search返回URL的查询部分方法说明assign()载入新的文档reload()重新载入当前文档replace()用新的文档替换当前文档【任务实践7-7】登录成功，自动跳转——Location对象使用Location对象实现用户登录成功后的页面自动跳转功能。任务目标任务分析页面需要显示一个倒计时，告知用户将在多少秒后自动跳转。倒计时结束时，使用Location对象实现页面自动跳转功能。【任务实践7-7】登录成功，自动跳转——Location对象

<h4>登录成功</h4>

<p>

<spanid="second">5</span>s后回到主页

<ahref="/">返回</a>

</p>

<scripttype="text/javascript">

leti=5;

setInterval(count,1000);

functioncount(){

i--;

document.getElementById("second").innerHTML=i;

if(i<=0){

location.href="/";

//location.assign("/")

}

}

</script>【任务实践7-7】登录成功，自动跳转——Location对象使用History对象任务7.5窗口的history属性会引用History对象，它记录了用户（在浏览器窗口中）访问过的URL。任务7.5使用History对象

属性/方法说明length返回浏览器历史列表中的URL数量back()加载浏览器历史列表中的前一个URLforward()加载浏览器历史列表中的后一个URLgo(num)加载历史列表中的指定页面，num为整数（0表示刷新当前页，正数表示前进

num步，负数表示后退num步）【任务实践7-8】页面“前进”和“后退”——History对象通过History对象实现页面间的“前进”和“后退”导航，理解浏览器历史记录的基本操作。任务目标任务分析设计两个关联页面：第一个页面包含“前往第二个页面”按钮和“前进”按钮；第二个页面包含“后退”按钮。核心技术点：●

使用location.assign()方法实现页面跳转（同时在浏览器历史记录中添加新条目）。●

使用history.back()方法实现“后退”（加载历史记录中的前一个页面）。●

使用history.forward()方法实现“前进”（加载历史记录中的下一个页面）。注意：“前进”按钮只有在有“历史前进记录”时才生效（如从第二个页面后退到第一个页面后，“前进”按钮才可用）。【任务实