1、1,回顾,请简述一下脚本执行的原理。在JavaScript中有哪些控制语句及其含义？如何创建一个有参函数以及如何调用它？,2,预习检查,解释名词“根节点”、“子节点”和“相邻节点“。window对象常用的属性有哪些？请解释setTimeout( )方法的功能。,3,本章任务,演示示例1：广告窗口特效,演示示例2：时钟显示特效,制作广告窗口特效,制作时钟显示特效,4,本章目标,会运用DOM模型查找某个HTML元素会使用window对象的open( )方法制作各种样式的广告窗口会使用window对象的setTimeout( )方法和Date对象制作日期显示效果,5,HTML文档的树状结构,根节点,
2、根节点 的子节点,有什么办法对HTML中的内容进行动态改变呢？,演示示例3：动态改变HTML中的内容,使用Document Object Model,相邻节点,6,什么是DOM,DOMDocument Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件 。,function changeLink() document.getElementById(myAnchor).innerHTML=“搜狐“ ; document.getElementById(myAnchor).href=“http:/“ ; 淘宝,修改内容,修改属性,HTM
3、L文档的每个节点都是对象，类似 WinForm中的控件，都具备属性、方法和事件,定位链接元素（对象）,7,DOM对象模型-1,http:/,window 窗口对象,location 地址对象,FORM 表单对象,浏览器对象的分层结构,window.document.myform.text1,document 文档对象,8,DOM对象模型-2,浏览器对象的分层结构,9,Window对象常用的属性,常用的属性,10,常用的方法onLoad事件：在窗口或框架完成文档加载时触发,window对象常用的方法和事件,11,如何使用window对象-1, function openwindow( ) win
4、dow.status=“系统当前状态：您正在注册用户“;if (window.screen.width = 1024 ,示例完整代码,在窗口状态栏中设置文本,设置窗口的高度,使用open方法打开新窗口,弹出警告对话框,弹出确认对话框,关闭当前窗口,添加单击事件,因为window是最顶层的根，所以可以省略 window.open(“google.htm“); 可简写为： open(“google.htm“); close( )方法也是如此。,12,如何使用window对象-2-1,open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合： height： 窗口高度；
5、 width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes或1为允许 location： 是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许；,我们需要预先制作好注册页面，假设为register.html，打开注册窗口的语句如下 open(“register.html“, “注册窗口“, “toolbars=0, location=0, statusba
6、rs=0,menubars=0,width=700,height=550,scrollbars=1“);,通过open方法打开注册页面之后的效果,13,如何使用window对象-2-2, function openwindow( ) window.status=“系统当前状态：您正在注册用户“;if (window.screen.width = 1024 ,示例完整代码,使用 Open 方法 打开注册新窗口,添加单击事件,14,如何使用window对象-3, function openwindow( ) window.status=“系统当前状态：您正在注册用户“;if (window.scr
7、een.width = 1024 用户注册 退 出,示例完整代码,使用超链接调用方法来打开注册新窗口,15,如何使用window对象-4,function openwindow( ) open(“adv.htm“, “广告窗口“, “toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=700, height=250“); ,示例完整代码,窗口完成文档加载时触发打开广告窗口,16,如何使用window对象-5, function openwindow( ) window.status
8、=“系统当前状态：您正在注册用户“;if (window.screen.width = 1024 H3用户注册 退 出,示例完整代码,打开模式窗口，被打开窗口保持输入焦点。,使用超链接调用方法来打开模式窗口,17,小结1,编写如左图所示，具有自动打开广告窗口和在浏 览器状态栏中显示“欢迎你”信息的页面。,广告窗口,状态栏信息,练习答案,练习代码,18,Date对象做时钟显示-1,如何实现如演示示例3中所示的时钟效果？,演示示例3：时钟效果演示,由于涉及到时间的显示问题，所以要用到日期对象Date。还有时间在不停地走，因此需要不断地调用一个函数，所以要用到Windows的定时器setTimeou
9、t( )方法。,19,Date对象做时钟显示-2,Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数,var 日期对象 = new Date (年、月、日等参数),例如： var mydate=new Date(“July 29, 2007,10:30:00“ ) 如果没有参数，表示当前日期和时间 例如：var today = new Date( ),20,Date对象做时钟显示-3,Date 方法的分组,21,Date对象做时钟显示-4,用作 Date 方法的参数的整数范围：,22,Date对象做时钟显示-5-1, function disptime(
10、 ) var now= new Date( ) ;var hour = now.getHours() ;if (hour=0 ,查看完整代码,获得当前日期和时间,获得小时，即当前是几点,月份数字011，注意1,23,Date对象做时钟显示-5-2,上一页PPT示例中时钟不能动态改变，怎么办？,由于时间在不停地走，所以应该每隔1秒调用显示时间的方法。如何解决？,使用setTimeout( )方法每隔1秒调用显示时间的方法,setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”） 例：var myTimesetTimeout( “disptime( )”, 1000 )
11、;,每隔1000毫秒执行函数disptime( )一次,24,Date对象做时钟显示-6, 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()
12、“,1000); H2当前时间：,查看完整代码,设置文本框的内容为当前时间,设置定时器每隔1秒(1000毫秒),调用函数disptime()执行,25,小结2,编写如左图所示，具有在网页中指定位 置显示动态时钟效果的页面。,练习答案,练习代码,自动动态变化的时钟,26,history 和location对象-1,history 对象 方法,back ( )方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进1页，等价于forward( )方法； go(-1) 代表后退1页，等价于back( )方法；,27,history 和location对象-2,Locati
13、on 对象 属性 方法,28,history 和location对象-3, 返回 前进 刷新 首页 跳转到其他版块新闻贴图网上谈兵IT茶馆教育大家谈,查看完整代码,添加选项改变事件,获取被选中的下拉菜单项value的值,29,常见错误,如何设置下拉菜单中的默认选中的第一项？,如何使页面内容居中？,插入一行一列的表格，然后居中，高度、宽度都为100,下拉菜单是否选中的办法：在菜单项中添加selected属性即可,网上谈兵IT茶馆新闻贴图教育大家谈 ,30,总结,请简述HTML文档的树状结构？ window对象有哪些常用的方法及其含义？ 请列举Date对象有哪些方法？ 请解释setTimeout方法适用场合？ 请列举location和history对象的常用方法？,
