教案：第二学期JavaScript第2章DOM编程－window对象

本文链接：https://blog.csdn.net/mouyong/article/details/2298829

授课教师：牟勇

课时：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>是最顶一层，我们称它为根节点，根节点是没有上级(也称为父节点)的节点，在它的下面有两个子节点：<head>和<body>，而<html>是它们的父节点。由于<head>和<body>它们有共同的父节点，所以我们把这两个节点的关系称为兄弟节点。我们还会看到在这棵树的最底层有一些节点，它们没有子节点。这些节点我们把它们称为叶节点。

问题：发现这个规律对我们有什么用？

答案：由于HTML的内容是静态的，如果我们要操作这些元素，就必须首先准确找到这些元素。由于它们是一个树状结构，各自的位置是相对固定的，这一点就保证了我们可以准确的找到我们想要修改的元素。这个树状结构我们给它取了一个名称，叫DOM(Document Object Model)。

(出示示例：修改超链接)

什么是DOM

DOM－Document Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件。

<html>

<head>

function changeLink()

{ document.getElementById('myAnchor').innerHTML="搜狐" ;

document.getElementById('myAnchor').href="http://www.sohu.com" ; }

</script>

</head>

<body>

</body>

</html>

教员应重点解释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( );

}

</SCRIPT>

<INPUT type="button" name="regButton" value=" 用户注册 "

οnclick="openwindow( )">

<INPUT type="button" name="exitButton" value=" 退出 "

οnclick="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:函数名。

在窗口被加载时就调用函数弹出窗口

教员重点讲解以上代码。并说明由于弹出窗口并不受大多数人的欢迎，现在的浏览器都直接提供了拦截弹出窗口的功能，所以，这个功能应少用，否则可能会导致客户看不到他们应看到的内容。

弹出模式注册窗口

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( ); }

</SCRIPT>

H3><A href="javascript: openwindow( ) ">用户注册 </A></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)

示例：

function disptime( )

{ var now= new Date( ) ;

var hour = now.getHours() ;

if (hour>=0 && hour <=12)

document.write("<H2>上午好!</H2>")

if (hour>12 && hour<= 18)

document.write("<H2>下午好!</H2>") ;

if (hour>18 && hour <24)

document.write("<H2>晚上好!</H2>") ;

document.write("<H2>今天日期:"+now.getYear()+"年"+(now.getMonth( )+1)+"月"+now.getDate()+"日</H2>") ;

document.write("<H2>现在时间:"+now.getHours()+"点"+now.getMinutes( )+"分</H2>") ; }

</SCRIPT>

教员应演示示例，并讲解重点代码(红色部分)

问题：示例不能动态刷新，时间不会走，怎么办？

分析：由于时间在不停地走，所以应该每隔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);

}

</SCRIPT>

H2>当前时间：

</H2></FORM >

</BODY>

教员应说明重点代码(红色部分)。

小结2：编写如图所示，具有在网页中指定位置显示动态时钟效果的页面。

教员应出示练习代码，让学员进行代码填空。

location和history对象[5分钟]

history对象的方法

名称	说明
back()	加载history列表中的上一个url
forward()	加载history列表中的下一个url
go(url)或go(数字)	加载history列表中指定的一个url

back ( )方法相当于后退按钮

forward ( ) 方法相当于前进按钮

go (1)代表前进1页，等价于forward( )方法；

go(-1) 代表后退1页，等价于back( )方法；

location对象的属性和方法

名称	说明
host	设置或检索位置或 URL 的主机名和端口号
hostname	设置或检索位置或 URL 的主机名部分
href	设置或检索完整的 URL 字符串
assign("url")	加载 URL 指定的新的 HTML 文档。
reload()	重新加载当前页
replace("url")	通过加载 URL 指定的文档来替换当前文档