第6章 BOM 教学设计

第3章面向对象（上）《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：年月日课题名称第6章BOM计划学时4学时内容分析JavaScript是由ECMAScript、BOM和DOM组成的。其中ECMAScript就是前面学习的JavaScript基本语法、数组、函数和对象。BOM（BrowerObjectModel）指的是浏览器对象模型，DOM（DocumentObjectModel）指的是文档对象模型。那么接下来将在本章首先针对BOM的使用进行详细讲解。教学目标及基本要求了解BOM的组成结构掌握定时器的操作熟悉location与history对象教学重点BOM组成结构、BOM常用对象和方法、定时器教学难点窗口位置和大小、框架操作、history、screen教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（什么是BOM对象、window对象、案例：限时秒杀）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。在前面的学习中，用到的alert()、prompt()函数其实是window对象的方法，关于window对象具体如何使用，它有哪些常用的属性和方法，将在本节进行具体讲解。（3）明确学习方向。理解什么是BOM。掌握BOM的基本结构。理解window对象与其他BOM对象的关系。掌握如何弹出对话框和窗口。掌握如何控制窗口位置和大小。掌握如何进行框架操作。掌握定时器的使用方法。运用定时器开发“限时秒杀”功能。二、知识讲解什么是BOMJavaScript是由ECMAScript、BOM和DOM组成的。BOM是指浏览器对象模型（BrowserObjectModel），DOM是指文档对象模型（DocumentObjectModel）。BOM的作用JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象。各内置对象之间按照某种层次组织起来的模型统称为BOM。BOM的结构window对象是BOM的顶层（核心）对象，其他的对象都是以属性的方式添加到window对象下，也可以称为window的子对象。BOM与DOM的关系DOM是W3C标准，是所有浏览器公共遵守的规则。而BOM是各浏览器根据DOM在各自浏览器上的实现，主要处理浏览器的窗口和框架。区别：DOM处理网页内容，BOM与浏览器进行交互。常用BOM对象介绍document对象：即DOM对象，用来处理网页内容。history对象：记录浏览器的访问历史记录，常用于开发前进与后退功能。location对象：用于控制URL地址栏。navigator对象：获取浏览器的相关信息，如名称、版本等。screen对象：获取与屏幕相关的信息，如屏幕分辨率，坐标等。脚下留心BOM没有相关标准，每个浏览器都有其自己对BOM的实现方式。而各浏览器间共有的对象就成为了事实上的标准。在利用BOM实现具体功能时要根据实际的开发情况考虑浏览器之间的兼容问题，否则会出现不可预料的情况。全局作用域window对象的特点：它是一个全局对象，定义在全局作用域中的变量、函数以及内置函数等，都可以被window对象调用。区别1：在JavaScript中直接使用一个未声明的变量会报语法错误，但是使用“window.变量名”的方式则不会报错，而是获得一个undefined结果。区别2：delete关键字仅能删除window对象自身的属性，对于定义在全局作用域下的变量不起作用。弹出对话框和窗口除了前面学过的alert()、prompt()，还有许多其他的属性和方法。列举常用的属性和方法。简单演示其具体使用。利用open()方法打开窗口，介绍该方法的常用可选参数。利用close()方法关闭打开的窗口。窗口位置和大小介绍window对象获取窗口位置和大小的常用属性和方法。演示如何获取这些信息。注意window.open()方法打开的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。框架操作回顾HTML中的框架的使用。利用JavaScript来对框架进行操作。注意JavaScript对框架操作的限制，无法读写跨域内容。定时器介绍常用的定时器方法，注意setInterval()和setTimeout()的区别。讲解并演示如何取消定时器。通过计数器案例，演示定时器的使用。在网页中提供两个按钮，一个用于开始计数，一个用于停止计数当开始计数时，启动定时器，利用定时器更新页面中显示的数值。当停止计数时，取消定时器。三、【案例】限时秒杀开发背景电子商务网站，如淘宝、京东，商家经常会策划促销活动，限时秒杀是一种常见的手段。案例展示展示案例完成后的效果，在网页中显示倒计时。代码编写设计限时秒杀的页面。通过JavaScript实现倒计时效果。测试程序。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第二学时（location对象、案例：定时跳转、history对象）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握如何用location对象更改URL。掌握如何获取URL参数。掌握定时跳转案例的开发。掌握如何用history对象实现历史记录跳转。掌握无刷新更改URL如何实现。二、知识讲解认识URL回顾URL的基本概念。URL的组成：网络协议、服务器主机名、端口号、URI、参数以及锚点。通过具体URL演示其组成部分。更改URL列举相关方法assign()、reload()、replace()，并比较其区别。通过具体案例来实现URL的更改。获取URL参数以一个具体的URL为例，演示如何获取URL中的参数。使用“location.href”也可以更改URL地址。history对象原本用于在浏览器中对访问过的URL历史记录进行操作。但用户的浏览历史是用户的隐私，且有可能会泄露网站的一些安全信息。出于安全考虑，history对象不能直接获取用户浏览过的URL。history对象可以控制浏览器前进、后退，或跳转到历史列表中的第几个页面。通过案例演示history对象的使用。无刷新更改URL地址该功能是HTML5新增的功能。能够实现只更改URL地址，但页面不会刷新或重新请求。更改的地址必须与当前页面处在同一个域中。通过代码演示具体使用方法。三、【案例】定时跳转开发背景用户执行一个操作后，显示执行结果，在页面中停留5秒，然后自动跳转到其他页面。开发思路通过定时器和location来实现跳转功能。代码编写四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（navigator对象、screen对象、动手实践：红绿灯倒计时）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握navigator对象的常用属性和方法。掌握screen对象的常用属性和方法。掌握红绿灯倒计时案例的开发。二、知识讲解navigator对象该对象用于获取浏览器的相关信息。通过具体代码演示该对象常用属性和方法的使用。更换不同的浏览器，观察输出结果的变化。screen对象该对象用于获取网页所在窗口与屏幕相关的信息，如宽度和高度等。通过具体代码演示该对象的常用属性。三、【动手实践】红绿灯倒计时开发背景利用JavaScript模拟生活中的交通信号灯。功能分析“绿->黄->红->绿”依次切换，并控制每一种灯的倒计时间。代码实现编写HTML页面，在网页中准备信号灯和倒计时。编写JavaScript代码，保存信号灯对象。在红、黄、绿灯的对象中，通过一个next属性保存它下一个要切换成什么灯，通过timeout属性保存它的切换时间。通过更改className实现元素对元素class属性的修改。利用setInterval()设置定时器，每隔1秒进行一次