JS第02章 BOM浏览器对象

《JavaScript及网页特效制作》第二章DOM浏览器对象回顾请简述一下脚本执行的原理。在JavaScript中有哪些控制语句及其含义？如何创建一个有参函数以及如何调用它？2预习检查解释浏览器对象的含义.浏览器对象有哪几个?window对象常用的属性和方法有哪些？请解释setTimeout()方法的功能。3本章任务4演示示例1：广告窗口特效演示示例2：时钟显示特效制作广告窗口特效制作时钟显示特效本章目标会运用警告,输入,确认三种模式对话框与用户交互.会使用window对象的open()方法制作各种样式的广告窗口会使用window对象的setTimeout()方法和Date对象制作日期显示效果5BOM浏览器对象模型6有关客户端的屏幕和显示性能的信息。location有关客户访问过的URL的信息。history有关当前URL的信息。document表示浏览器窗口中的HTML文档8•常用的属性window对象常用的方法名称说明alert(提示信息)显示一个带有提示信息和确定按钮的对话框prompt(“提示信息”)显示一个带有文本框和确定,取消按钮的对话框confirm(提示信息“)显示一个带有提示信息、确定和取消按钮的对话框open(url,name,”窗口状态”)打开具有指定名称的新窗口，并加载给定URL所指定的文档；如果没有提供URL，则打开一个空白文档close()关闭当前窗口showModalDialog()在一个模式窗口中显示指定的HTML文档setTimeout(“函数”,毫秒)设置定时器：经过指定毫秒值后执行某个函数9•常用的方法window对象常用的事件onLoad事件：在窗口或框架完成文档加载时触发scriptwindow.onload=事件处理函数;/script或bodyonload=“事件处理函数();”……10如何使用window对象-111SCRIPTlanguage=javascriptfunctionopenwindow(){window.status=系统当前状态：您正在注册用户......;if(window.screen.width==1024&&window.screen.height==768)window.open(register.html);elsewindow.alert(请设置分辨率为1024x768，然后再打开);}functionclosewindow(){if(window.confirm(您确认要退出系统吗？))window.close();}/SCRIPTINPUTtype=buttonname=regButtonvalue=用户注册onclick=openwindow()INPUTtype=buttonname=exitButtonvalue=退出onclick=closewindow()示例完整代码在窗口状态栏中设置文本获得屏幕的垂直分辨率使用open方法打开新窗口弹出警告对话框弹出确认对话框关闭当前窗口添加单击事件因为window是最顶层的根，所以可以省略window.open(google.htm);可简写为：open(google.htm);close()方法及属性也是如此。如何使用window对象-2-112open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；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,statusbars=0,menubars=0,width=700,height=550,scrollbars=1);通过open方法打开注册页面之后的效果如何使用window对象-2-213SCRIPTlanguage=javascriptfunctionopenwindow(){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,scrollbars=1);elsewindow.alert(请设置分辨率为1024x768，然后再打开);}functionclosewindow(){if(window.confirm(您确认要退出系统吗？))window.close();}/SCRIPTINPUTtype=buttonname=regButtonvalue=用户注册onclick=openwindow()INPUTtype=buttonname=exitButtonvalue=退出onclick=closewindow()示例完整代码使用Open方法打开注册新窗口添加单击事件如何使用window对象-314SCRIPTlanguage=javascriptfunctionopenwindow(){window.status=系统当前状态：您正在注册用户......;if(window.screen.width==1024&&window.screen.height==768)open(register.html,注册窗口,toolbar=0,location=0,status=0,menubar=0,width=700,height=550,scrollbars=1);elsewindow.alert(请设置分辨率为1024x768，然后再打开);}functionclosewindow(){if(window.confirm(您确认要退出系统吗？))window.close();}/SCRIPTH3Ahref=javascript:openwindow()用户注册/A/H3H3Ahref=javascript:closewindow()退出/A/H3示例完整代码使用超链接调用方法来打开注册新窗口如何使用window对象-415HTMLHEADMETAhttp-equiv=Content-Typecontent=text/html;charset=gb2312SCRIPTlanguage=JavaScriptfunctionopenwindow(){open(adv.htm,广告窗口,menubar=no,toolbar=0,location=yes,status=1scrollbars=0,resizable=0,width=700,height=250,left=0,top=0);}/SCRIPT/HEADBODYonLoad=openwindow()H2 /H2/BODY/HTML示例完整代码窗口完成文档加载时触发打开广告窗口如何使用window对象-516SCRIPTlanguage=javascriptfunctionopenwindow(){window.status=系统当前状态：您正在注册用户......;if(window.screen.width==1024&&window.screen.height==768)window.showModalDialog(register.html,注册窗口,“dialogWidth:450px;dialogHeight:360px);elsewindow.alert(请设置分辨率为1024x768，然后再打开);}functionclosewindow(){if(window.confirm(您确认要退出系统吗？))window.close();}/SCRIPTH3Ahref=javascript:openwindow()用户注册/A/H3H3Ahref=javascript:closewindow()退出/A/H3示例完整代码打开模式窗口，被打开窗口保持输入焦点。使用超链接调用方法来打开模式窗口小结117编写如左图所示，具有自动打开广告窗口和在浏览器状态栏中显示“欢迎你......”信息的页面。广告窗口状态栏信息练习答案练习代码Date对象做时钟显示-118如何实现如演示示例3中所示的时钟效果？演示示例3：时钟效果演示由于涉及到时间的显示问题，所以要用到日期对象Date。还有时间在不停地走，因此需要不断地调用一个函数，所以要用到Windows的定时器setTimeout()方法。Date对象做时钟显示-2Date对象存储的日期为自1970年1月1日00:00:00以来的毫秒数19var日期对象=newDate(年、月、日等参数)例如：varmydate=newDate(July29,2007,10:30:00)如果没有参数，表示当前日期和时间例如：vartoday=newDate()Date对象做时钟显示-3Date方法的分组方法分组说明setXxx这些方法用于设置时间和日期值getXxx这些方法用于获取时间和日期值20Date对象做时钟显示-4值整数getYear四位数字的年份getMonth0至11（一月至十二月）getDate1至31（月份中的天数）getDay0至6（星期几,0表示星期日）getHours0至23getMinutes0至59getSeconds0至5921•Date对象get方法组Date对象做时钟显示-5-122SCRIPTlanguage=javaScriptfunctiondisptime(){varnow=newDate();varhour=now.getHours();if(hour=0&&hour=12)document.write(H2上午好!/H2)if(hour12&&hour=18)document.write(H2下午好!/H2);if(hour18&&hour24)document.write(H2晚上好!/H2);document.write(H2今天日期:+now.getYear()+年+(now.getMonth()+1)+月+now.getDate()+日/H2);document.write(H2现在时间:+now.getHours()+点+now.getMinutes()+分/H2);}/SCRIPTBODYonload=disptime()查看完整代码获得当前日期和时间获得小时，即当前是几点月份数字0－11，注意＋1判断上午、下午还是晚上Date对象做时钟显示-5-2setTimeout的用法：setTimeout（“调用的函数”,”定时的时间”）例：varmyTime＝setTimeout(“disptime()”,1000);23上一页PPT示例中时