授课教师：牟勇 课时： 100 分钟 l 本章技能目标 n 会运用 DOM 模型查找某个 HTML 元素 n 会使用 window 对象的 open( ) 方法制作各种样式的广告窗口 n 会使用 window 对象的 setTimeout( ) 方法和 Date 对象制作日期显示效果 l 本章重点 n window 对象的 op
授课教师：牟勇
课时：100分钟
l 本章技能目标
n会运用DOM模型查找某个HTML元素
n会使用window对象的open( )方法制作各种样式的广告窗口
n会使用window对象的setTimeout( )方法和Date对象制作日期显示效果
l 本章重点
nwindow对象的open()方法
l 本章难点
n自定义函数的参数传递
l 本章工作任务
n制作广告窗口特效
n制作时钟显示特效
l 整章授课思路
n先演示本章要实现的效果页面，然后逐一告诉学员如何做，穿插讲解理论。
nDOM模型介绍：举例说明为什么需要DOM以及什么是DOM。
nwindow对象常用的属性，方法事件介绍：重点举例讲解open()方法的不同风格的窗口，showdialog()方法的模式窗口，这是本章的重点，网页应用较多。
ndate对象和setTimeout()方法做时钟显示：时钟特效的基本代码要掌握，以便看懂更高级的时钟特效源码。
nlocation对象和history对象：模拟IE中的前进，后退按钮或网页的返回效果即可。
n常见错误：列举开发中常见的脚本或网页HTML常犯错误，直接将经验传授给学员。
n以上内容，教员应现场演示，加强与学生的互动。
回顾上一章: [10分钟]
请简述一下脚本执行的原理。
在JavaScript中有哪些控制语句及其含义？
如何创建一个有参函数以及如何调用它？
预习检查: [5分钟]
解释名词“根节点”、“子节点”和“相邻节点“。
window对象常用的属性有哪些？
请解释setTimeout( )方法的功能。
课程知识点讲解：
DOM模型介绍：[10分钟]
HTML的树状结构
如果我们分析常见的页面HTML源代码，我们会发现存在树状的文档结构。
其中，是最顶一层，我们称它为根节点，根节点是没有上级(也称为父节点)的节点，在它的下面有两个子节点：和，而是它们的父节点。由于和它们有共同的父节点，所以我们把这两个节点的关系称为兄弟节点。我们还会看到在这棵树的最底层有一些节点，它们没有子节点。这些节点我们把它们称为叶节点。
问题：发现这个规律对我们有什么用？
答案：由于HTML的内容是静态的，如果我们要操作这些元素，就必须首先准确找到这些元素。由于它们是一个树状结构，各自的位置是相对固定的，这一点就保证了我们可以准确的找到我们想要修改的元素。这个树状结构我们给它取了一个名称，叫DOM(Document Object Model)。
(出示示例：修改超链接)
什么是DOM
DOM－Document Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件 。
" onclick="openwindow( )"> 出 " onclick="closewindow( )">
教员讲解重点代码(红色部分)，并进行效果演示，以加强学员的印象(建议先演示效果，之后再讲解代码)。
window.status:在状态栏显示信息。
window.screen.width和window.screen.height：客户端显示器的分辨率。
window.open()：打开一个新窗口。
window.alert()：弹出警告框
window.confirm：弹出确认框。
window.close()：关闭当前窗口。
其中，因为window是最顶层的对象，所以，在调用open()，alert()和close()方法时可以省写。
关于open()方法
open（”打开窗口的url”，”窗口名”，”窗口特征”） 窗口的特征如下，可以任意组合： height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或1为允许 location： 是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许；
使用超链接调用打开窗口的函数
href="javascript: openwindow( ) "
>用户注册 href="javascript: closewindow( ) "
>退 出
教员重点讲解以上代码。说明使用href调用函数的写法：javascript:函数名。
在窗口被加载时就调用函数弹出窗口
onLoad="openwindow( )">
教员重点讲解以上代码。并说明由于弹出窗口并不受大多数人的欢迎，现在的浏览器都直接提供了拦截弹出窗口的功能，所以，这个功能应少用，否则可能会导致客户看不到他们应看到的内容。
弹出模式注册窗口
H3>用户注册 退 出
教员讲解重点代码(红色部分)。
模式窗口：被打开窗口将保持焦点，无法将焦点切换至原来的窗体。
小结1：
编写如左图所示，具有自动打开广告窗口和在浏览器状态栏中显示“欢迎你......”信息的页面。
教员出示练习代码，让二至三位学员上机完成代码填空。
date对象和setTimeout()方法做时钟显示[20分钟]
问题：如何实现如演示示例3中所示的时钟效果？
分析：由于涉及到时间的显示问题，所以要用到日期对象Date。还有时间在不停地走，因此需要不断地调用一个函数，所以要用到Windows的定时器setTimeout( )方法。
Date对象介绍：
Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数
声明：
var mydate=new Date("July 29, 2007,10:30:00" )带时间格式的声明。Date对象会自动转换为毫秒数。
var today = new Date()无参数声明，将获得当前系统时间。
Date对象的方法
|
名称 |
说明 |
|
setYear() |
设置年份 |
|
setMonth() |
设置月份(0－11) |
|
setDate() |
设置日期(1－31) |
|
setDay() |
设置星期(0－6) |
|
setHours() |
设置小时(0－23) |
|
setMinutes() |
设置分钟(0－59) |
|
setSeconds() |
设置秒(0－59) |
|
getYear() |
获得年份 |
|
getMonth() |
获得月份(0－11) |
|
getDate() |
获得日期(1－31) |
|
getDay() |
获得星期(0－6) |
|
getHours() |
获得小时(0－23) |
|
getMinutes() |
获得分钟(0－59) |
|
getSeconds() |
获得秒(0－59) |
示例：
教员应演示示例，并讲解重点代码(红色部分)
问题：示例不能动态刷新，时间不会走，怎么办？
分析：由于时间在不停地走，所以应该每隔1秒调用显示时间的方法。如何解决？
解决方案：setTimeout的用法：
setTimeout（“调用的函数”,”定时的时间”）
例：var myTime＝setTimeout( “disptime( )”, 1000 ) ;
教员应先演示效果，然后讲解重点代码(红色部分)
本章总结 [10分钟]
请简述HTML文档的树状结构？
window对象有哪些常用的方法及其含义？
请列举Date对象有哪些方法？
请解释setTimeout方法适用场合？
请列举location和history对象的常用方法？
考核点
window对象的open()方法
setTimeout方法的使用
location和