北大青鸟ACCP5.0-JavaScript客户端验证和页面特效制作2.ppt

《北大青鸟ACCP5.0-JavaScript客户端验证和页面特效制作2.ppt》由会员分享，可在线阅读，更多相关《北大青鸟ACCP5.0-JavaScript客户端验证和页面特效制作2.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第二章第二章第二章第二章DOMDOM编程编程编程编程windowwindow对象对象对象对象回顾回顾请简述一下脚本执行的原理。请简述一下脚本执行的原理。在在JavaScript中有哪些控制语句及其含义？中有哪些控制语句及其含义？如何创建一个有参函数以及如何调用它？如何创建一个有参函数以及如何调用它？预习检查预习检查解释名词解释名词“根节点根节点”、“子节点子节点”和和“相邻节点相邻节点“。window对象常用的属性有哪些？对象常用的属性有哪些？请解释请解释setTimeout()方法的功能。方法的功能。本章任务本章任务演示示例演示示例1 1：广告窗口特效广告窗口特效 演示示例演示示例2 2：时

2、钟显示特效时钟显示特效 制作广告窗口特效制作广告窗口特效 制作时钟显示特效制作时钟显示特效本章目标本章目标会运用会运用DOM模型查找某个模型查找某个HTML元素元素会使用会使用window对象的对象的open()方法制作各种样式方法制作各种样式的广告窗口的广告窗口会使用会使用window对象的对象的setTimeout()方法和方法和Date对象制作日期显示效果对象制作日期显示效果HTML文档的树状结构文档的树状结构根节点根节点根节点根节点的子节点的子节点有什么办法对有什么办法对HTML中的内容进行动态改变呢？中的内容进行动态改变呢？演示示例演示示例3 3：动态改变动态改变HTMLHTML中的

3、内容中的内容使用使用Document Object Model相邻节点相邻节点什么是什么是DOM DOMDocument Object Model,它是它是W3C国际组织的国际组织的一套一套Web标准，它定义了访问标准，它定义了访问HTML文档对象的一套属性、文档对象的一套属性、方法和事件方法和事件。function changeLink()document.getElementById(myAnchor).innerHTML=搜狐搜狐;document.getElementById(myAnchor).href=http:/;淘宝淘宝修改内容修改内容修改属性修改属性HTML文档的每个节点都是

4、对象，类似文档的每个节点都是对象，类似WinForm中的控件，都具备属性、方法和事件中的控件，都具备属性、方法和事件定位链接元定位链接元素（对象）素（对象）DOM对象模型对象模型-1http:/window 窗口对象窗口对象location地址对象地址对象FORM表单对象表单对象浏览器对象的分层结构浏览器对象的分层结构window.document.myform.text1 document文档对象文档对象DOM对象模型对象模型-2浏览器对象的分层结构浏览器对象的分层结构Window对象常用的属性对象常用的属性名称名称 说明说明 status 指定浏览器状态栏中显示的临时消息指定浏览器状态栏中

5、显示的临时消息 screen有关客户有关客户端的屏幕和显示性能的信息。端的屏幕和显示性能的信息。history 有关客户访问过的有关客户访问过的URL的信息。的信息。location有关当前有关当前 URL 的信息。的信息。document表示浏览器窗口中的表示浏览器窗口中的HTML文档文档常用的属性常用的属性常用的方法常用的方法onLoad事件：在窗口或框架完成文档加载时触发事件：在窗口或框架完成文档加载时触发window对象常用的方法和事件对象常用的方法和事件名称名称 说明说明 alert(提示信息提示信息)显示一个带有提示信息和确定按钮的对话框显示一个带有提示信息和确定按钮的对话框 co

6、nfirm(提示信息提示信息“)显示一个显示一个带有提示信息、确定和取消按钮的对带有提示信息、确定和取消按钮的对话框话框 open(url,name)打开具有指定名称的新窗口，并加载给定打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供所指定的文档；如果没有提供 URL，则打开一，则打开一个空白文档个空白文档close()关闭当前窗口关闭当前窗口showModalDialog()在一个模式窗口中显示指定的在一个模式窗口中显示指定的HTML文档文档setTimeout(函数函数,毫秒数毫秒数)设置定时器：经过指定毫秒值后执行某个函数设置定时器：经过指定毫秒值后执行某个函数

7、如何使用如何使用window对象对象-1function 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();示例完整代

8、码示例完整代码在窗口状态栏在窗口状态栏中设置文本中设置文本设置窗口设置窗口的高度的高度使用使用open方法方法打开新窗口打开新窗口弹出警告对话框弹出警告对话框弹出确认对话框弹出确认对话框关闭当关闭当前窗口前窗口添加单添加单击事件击事件因为因为window是最顶层的根，所以可以省略是最顶层的根，所以可以省略window.open(google.htm);可简写为：可简写为：open(google.htm);close()方法也是如此。方法也是如此。如何使用如何使用window对象对象-2-1open（”打开窗口的打开窗口的url”，”窗口名窗口名”，”窗口特征窗口特征”）窗口的特征如下，可以任意

9、组合：窗口的特征如下，可以任意组合：height：窗口高度；窗口高度；width：窗口宽度；窗口宽度；top：窗口距离屏幕上方的象素值；窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，是否显示工具栏，yes为显示；为显示；menubar，scrollbars 表示菜单栏和滚动栏。表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，是否允许改变窗口大小，yes或或1为允许为允许 location：是否显示地址栏，是否显示地址栏，yes或或1为允许为允许 status：是否显示状态栏内的信息，：是否显示状态栏内的信

10、息，yes或或1为允许；为允许；我们需要预先制作好注册页面，假设为我们需要预先制作好注册页面，假设为register.html，打开注册窗口的语句如下，打开注册窗口的语句如下 open(register.html,注册窗口注册窗口,toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1);通过通过open方法方法打开注册页面打开注册页面之后的效果之后的效果如何使用如何使用window对象对象-2-2function openwindow()window.status=系统当前状态：您正在注册

11、用户系统当前状态：您正在注册用户.;if(window.screen.width=1024&window.screen.height=768)open(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(您确认要退出系统吗？您确认要退出系统吗？)windo

12、w.close();示例完整代码示例完整代码使用使用 Open 方法方法打开注册新窗口打开注册新窗口添加单添加单击事件击事件如何使用如何使用window对象对象-3function openwindow()window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.;if(window.screen.width=1024&window.screen.height=768)open(register.html,注册窗口注册窗口,toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrol

13、lbars=1);else window.alert(请设置分辨率为请设置分辨率为1024x768，然后再打开，然后再打开);function closewindow()if(window.confirm(您确认要退出系统吗？您确认要退出系统吗？)window.close();用户注册用户注册 退退 出出示例完整代码示例完整代码使用超链接调使用超链接调用方法来打开用方法来打开注册新窗口注册新窗口如何使用如何使用window对象对象-4function openwindow()open(adv.htm,广告窗口广告窗口,toolbars=0,scrollbars=0,location=0,sta

14、tusbars=0,menubars=0,resizable=0,width=700,height=250); 示例完整代码示例完整代码窗口完成文档窗口完成文档加载时触发打加载时触发打开广告窗口开广告窗口如何使用如何使用window对象对象-5function openwindow()window.status=系统当前状态：您正在注册用户系统当前状态：您正在注册用户.;if(window.screen.width=1024&window.screen.height=768)window.showModalDialog(register.html,注册窗口注册窗口,toolbars=

15、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用户注册用户注册 退退 出出示例完整代码示例完整代码打开模式窗口，打开模式窗口，被打开窗口保持被打开窗口保持输入焦点。输入焦点。使用超链接调使用超链接调用方法来打开用方法来打开模式窗口模式窗口

16、小结小结1编写如左图所示，具有自动打开广告窗口和在浏编写如左图所示，具有自动打开广告窗口和在浏览器状态栏中显示览器状态栏中显示“欢迎你欢迎你.”.”信息的页面。信息的页面。广告广告窗口窗口状态栏状态栏信息信息练习答案练习答案练习代码练习代码Date对象做时钟显示对象做时钟显示-1如何实现如演示示例如何实现如演示示例3中所示的时钟效果？中所示的时钟效果？演示示例演示示例3 3：时钟效果演示时钟效果演示由于涉及到时间的显示问题，所以要用到日期对象由于涉及到时间的显示问题，所以要用到日期对象Date。还有时间在不停地走，因此需要不断地调用一个函数，所还有时间在不停地走，因此需要不断地调用一个函数，所

17、以要用到以要用到Windows的定时器的定时器setTimeout()方法。方法。Date对象做时钟显示对象做时钟显示-2Date 对象存储的日期为自对象存储的日期为自 1970 年年 1 月月 1 日日 00:00:00 以以来的毫秒数来的毫秒数var 日期对象日期对象=new Date(年、月、日等参数年、月、日等参数)例如：例如：var mydate=new Date(July 29,2007,10:30:00)如果没有参数，表示当前日期和时间如果没有参数，表示当前日期和时间例如：例如：var today=new Date()Date对象做时钟显示对象做时钟显示-3Date 方法的分组方

18、法的分组方法分方法分组组说说 明明 setXxx这这些方法用于些方法用于设设置置时间时间和日期和日期值值getXxx 这这些方法用于些方法用于获获取取时间时间和日期和日期值值Date对象做时钟显示对象做时钟显示-4用作用作 Date 方法的参数的整数范围：方法的参数的整数范围：值值整整 数数 Seconds 和和 minutes0 至至 59 Hours0 至至 23 Day0 至至 6（星期（星期几）几）Date1 至至 31（月份中的天数）（月份中的天数）Months0 至至 11（一月（一月至十二月）至十二月）Date对象做时钟显示对象做时钟显示-5-1function disptime

19、()var now=new Date();var hour=now.getHours();if(hour=0&hour=12)document.write(上午好上午好!)if(hour12&hour=18)document.write(下午好下午好!);if(hour18&hour 24)document.write(晚上好晚上好!);document.write(今天日期今天日期:+now.getYear()+年年+(now.getMonth()+1)+月月+now.getDate()+日日);document.write(现在时间现在时间:+now.getHours()+点点+now.g

20、etMinutes()+分分);查看完整代码查看完整代码获得当前日期和时间获得当前日期和时间获得小时，即当前是几点获得小时，即当前是几点月份数字月份数字011，注意注意1判断上午、下午还是晚上判断上午、下午还是晚上Date对象做时钟显示对象做时钟显示-5-2上一页上一页PPT示例中时钟不能动态改变，怎么办？示例中时钟不能动态改变，怎么办？由于时间在不停地走，所以应该每隔由于时间在不停地走，所以应该每隔1秒调用显示时间秒调用显示时间的方法。如何解决？的方法。如何解决？使用使用setTimeout()方法方法每隔每隔1秒调用显示时间的方法秒调用显示时间的方法setTimeout的用法：的用法：se

21、tTimeout（“调用的函数调用的函数”,”定时的时间定时的时间”）例：例：var myTimesetTimeout(“disptime()”,1000);每隔每隔1000毫秒执行函毫秒执行函数数disptime()一次一次Date对象做时钟显示对象做时钟显示-6function disptime()var time=new Date();/获得当前时间获得当前时间 var hour=time.getHours();/获得小时、分钟、秒获得小时、分钟、秒 var minute=time.getMinutes();var second=time.getSeconds();document.my

22、form.myclock.value=hour+:+minute+:+second+;var myTime=setTimeout(disptime(),1000);H2当前时间：当前时间：查看完整代码查看完整代码设置文本框的内容设置文本框的内容为当前时间为当前时间设置定时器每隔设置定时器每隔1秒秒(1000毫秒毫秒),调用函数调用函数disptime()执行执行小结小结2编写如左图所示，具有在网页中指定位编写如左图所示，具有在网页中指定位置显示动态时钟效果的页面。置显示动态时钟效果的页面。练习答案练习答案练习代码练习代码自动动态变自动动态变化的时钟化的时钟history 和和location对

23、象对象-1history 对象对象方法方法 名称名称 说明说明 back()加加载载 History 列表中的上一个列表中的上一个 URL。forward()加加载载 History 列表中的下一个列表中的下一个 URL。go(url or number)加加载载 History 列列表表中中的的一一个个 URL，或或要要求求浏浏览览器器移移动动指定的指定的页页面数。面数。back()方法相当于后退按钮方法相当于后退按钮forward()方法相当于前进按钮方法相当于前进按钮go(1)代表前进代表前进1页，等价于页，等价于forward()方法；方法；go(-1)代表后退代表后退1页，等价于页，

24、等价于back()方法；方法；history 和和location对象对象-2Location 对象对象 属性属性 方法方法名称名称 说明说明 host设设置或置或检检索位置或索位置或 URL 的主机名和端口号的主机名和端口号hostname设设置或置或检检索位置或索位置或 URL 的主机名部分的主机名部分href设设置或置或检检索完整的索完整的 URL 字符串字符串名称名称说明说明assign(url)加加载载 URL 指定的新的指定的新的 HTML 文档。文档。reload()重新加重新加载载当前当前页页replace(url)通通过过加加载载 URL 指定的文档来替指定的文档来替换换当前

25、文档当前文档history 和和location对象对象-3返回返回 前进前进刷新刷新首页首页跳转到其他版块跳转到其他版块 新闻贴图新闻贴图 网上谈兵网上谈兵 IT茶馆茶馆 教育大家谈教育大家谈 查看完整代码查看完整代码添加选项改添加选项改变事件变事件获取被选中的获取被选中的下拉菜单项下拉菜单项value的值的值常见错误常见错误如何设置下拉菜单中的默认选中的第一项？如何设置下拉菜单中的默认选中的第一项？如何使页面内容居中？如何使页面内容居中？插入一行一列的表格，然后居中，高度、宽度都为插入一行一列的表格，然后居中，高度、宽度都为100下拉菜单是否选中的办法：在菜单项中添加下拉菜单是否选中的办法：在菜单项中添加selected属性即可属性即可 网上谈兵网上谈兵 IT茶馆茶馆 新闻贴图新闻贴图 教育大家谈教育大家谈总结总结请简述请简述HTML文档的树状结构？文档的树状结构？window对象对象有哪些常用的方法及其含义？有哪些常用的方法及其含义？请列举请列举Date对象有哪些方法？对象有哪些方法？请解释请解释setTimeout方法适用场合？方法适用场合？请列举请列举location和和history对象的常用方法？对象的常用方法？