授课教师：牟勇 课时： 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 本章重点
n window 对象的 open() 方法
l 本章难点
n 自定义函数的参数传递
l 本章工作任务
n 制作广告窗口特效
n 制作时钟显示特效
l 整章授课思路
n 先演示本章要实现的效果页面，然后逐一告诉学员如何做，穿插讲解理论。
n DOM 模型介绍：举例说明为什么需要 DOM 以及什么是 DOM 。
n window 对象常用的属性，方法事件介绍：重点举例讲解 open() 方法的不同风格的窗口， showdialog() 方法的模式窗口，这是本章的重点，网页应用较多。
n date 对象和 setTimeout() 方法做时钟显示：时钟特效的基本代码要掌握，以便看懂更高级的时钟特效源码。
n location 对象和 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 文档对象的一套属性、方法和事件 。
function changeLink()
{ document.getElementById('myAnchor').innerHTML=" 搜狐 " ;
document.getElementById('myAnchor').href="http://www.sohu.com" ; }
淘宝
使用 DOM 改变链接 ">
教员应重点解释 JavaScript 函数中的 getElementById() 方法的意义，以及 innerHTML 属性和 href 属性的意义。
HTML 的 DOM 对象模型
首先出示幻灯片上的浏览器图形，依次说明 window 对象， history 对象， document 对象， form 对象的具体含义，给学员以形象的记忆点，之后告诉学员，由于存在这样一个层次结构，所以在我们引用某个 HTML 元素时，我们要按顺序一层一层的进行引用，例如我们要找到表单[ myform ]我们可以写做 window.document.myform ，强调书写格式：每个对象之间用[ . ]分隔。
之后出示幻灯片上的 HTML DOM 对象模型图，说明对象的名称，它们之间的层次关系。
告诉学员：我们后续章节将依次从上而下介绍 window 对象， document 对象， history 对象， location 对象，常用的 form 表单对象及它们的具体用法。
window 对象： [40 分钟 ]
window 对象的常用属性和方法
首先介绍 window 的常用属性和方法：
名称
说明
status
指定浏览器状态栏中显示的临时消息
screen
有关客户端的屏幕和显示性能的信息
history
有关客户端访问过的 URL 的信息
location
有关当前 URL 的信息
document
表示浏览器窗口中的整个 HTML 文档
alert([ 提示信息 ])
显示一个带有提示信息和确定按钮的对话框
confirm([ 提示信息 ])
显示一个带有提示信息，确定和取消按钮的对话框
open([url],]name])
打开具有指定名称的新窗口，并加载给定 URL 所指定的文档，如果没有 URL ，则打开一个新的空白窗口。
close()
关闭当前窗口
whoeModalDialog()
在模式窗口中显示指定的 HTML 文档
setTimeout([ 函数 ], 毫秒数 )
定时器，经过指定毫秒数后执行某个程序
如何使用 window 对象
function openwindow( )
{ window.status =" 系统当前状态：您正在注册用户 ......";
if ( window.screen.width == 1024 && window.screen.height == 768)
window .open("register.html");
else
window.alert(" 请设置分辨率为 1024x768 ，然后再打开 "); }
function closewindow( )
{ if(window .confirm( " 您确认要退出系统吗？ "))
window .close( ) ;
}
用户注册 "
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: 函数名。
在窗口被加载时就调用函数弹出窗口
教员重点讲解以上代码。并说明由于弹出窗口并不受大多数人的欢迎，现在的浏览器都直接提供了拦截弹出窗口的功能，所以，这个功能应少用，否则可能会导致客户看不到他们应看到的内容。
弹出模式注册窗口
function openwindow( )
{ window.status=" 系统当前状态：您正在注册用户 ......";
if (window.screen.width == 1024 && window.screen.height == 768)
window.showModalDialog( "register.html", " 注册窗口 ", "toolbars=0,
location=0, statusbars=0, menubars=0,width=700,
height=550,scrollbars=1");
else
window.alert(" 请设置分辨率为 1024x768 ，然后再打开 "); }
function closewindow( )
{ if(window.confirm(" 您确认要退出系统吗？ "))
window.close( ); }
H3> 用户注册
退 出
教员讲解重点代码 ( 红色部分 ) 。
模式窗口：被打开窗口将保持焦点，无法将焦点切换至原来的窗体。
小结 1 ：
编写如左图所示，具有自动打开广告窗口和在浏览器状态栏中显示 [ 欢迎你 ......] 信息的页面。
教员出示练习代码，让二至三位学员上机完成代码填空。
date 对象和 setTimeout() 方法做时钟显示 [20 分钟 ]
问题： 如何实现如演示示例 3 中所示的时钟效果？
分析：由于涉及到时间的显示问题，所以要用到日期对象 Date 。还有时间在不停地走，因此需要不断地调用一个函数，所以要用到 Windows 的定时器 setTimeout( ) 方法。
Date 对象介绍：
Date 对象存储的日期为自 1970 年 1 月 1 日 0 以来的毫秒数
声明：
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)
示例：
function disptime( )
{ var now= new Date( ) ;
var hour = now.getHours() ;
if (hour>=0 && hour
document.write("
上午好 ! ")
if (hour>12 && hour
document.write("
下午好 ! ") ;
if (hour>18 && hour
document.write("
晚上好 ! ") ;
document.write("
今天日期 :"+ now.getYear() +" 年 "+( now.getMonth( )+1 )+" 月 "+ now.getDate() +" 日 ") ;
document.write("
现在时间 :"+ now.getHours() +" 点 "+ now.getMinutes( ) +" 分 ") ; }
教员应演示示例，并讲解重点代码 ( 红色部分 )
问题：示例不能动态刷新，时间不会走，怎么办？
分析：由于时间在不停地走，所以应该每隔 1 秒调用显示时间的方法。如何解决？
解决方案： setTimeout 的用法：
setTimeout （[调用的函数] , ]定时的时间]）
例： var myTime ＝ setTimeout( [ disptime( ) ] , 1000 ) ;
function disptime( ){
var time = new Date( ); // 获得当前时间
var hour = time.getHours( ); // 获得小时、分钟、秒
var minute = time.getMinutes( );
var second = time.getSeconds( );
document.myform.myclock.value =hour+":"+minute+":"+second+" " ;
var myTime = setTimeout("disptime()",1000);
}
教员应先演示效果，然后讲解重点代码 ( 红色部分 )
本章总结 [10 分钟 ]
请简述 HTML 文档的树状结构？
window 对象有哪些常用的方法及其含义？
请列举 Date 对象有哪些方法？
请解释 setTimeout 方法适用场合？
请列举 location 和 history 对象的常用方法？
考核点
window 对象的 open() 方法
setTimeout 方法的使用
location 和 查看更多关于教案：第二学期JavaScript第2章DOM编程的详细内容...