教案:第二学期JavaScript第2章DOM编程
授课教师:牟勇 课时: 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文档对象的一套属性、方法和事件 。
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:函数名。
在窗口被加载时就调用函数弹出窗口
onLoad="openwindow( )">
教员重点讲解以上代码。并说明由于弹出窗口并不受大多数人的欢迎,现在的浏览器都直接提供了拦截弹出窗口的功能,所以,这个功能应少用,否则可能会导致客户看不到他们应看到的内容。
弹出模式注册窗口
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( ); }
教员讲解重点代码(红色部分)。
模式窗口:被打开窗口将保持焦点,无法将焦点切换至原来的窗体。
小结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 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); }
H2>当前时间: value="" size="10" >
教员应说明重点代码(红色部分)。
小结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 指定的文档来替换当前文档 |
示例:
……
跳转到其他版块 id="selPTopic" onChange="javascript: location=this.value"> 新闻贴图 网上谈兵 茶馆 教育大家谈
"javascript: history.back( )">返回
"javascript: history.forward( )">前进
"javascript: location.reload( )">刷新
首页
教员应先演示效果,然后讲解重点代码(红色部分)
本章总结 [10分钟]
请简述HTML文档的树状结构?
window对象有哪些常用的方法及其含义?
请列举Date对象有哪些方法?
请解释setTimeout方法适用场合?
请列举location和history对象的常用方法?
考核点
window对象的open()方法
setTimeout方法的使用
location和 声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。