WebIntroductionV2-Ch05B

《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5普通高等教育“十一五”国家级规划教材Web程序设计《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5第1章Web基础第2章Web服务器的架设和管理第3章HTML和XML基础第4章网页设计与制作第5章客户端开发第6章服务端开发目录《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5第5章客户端开发浏览器与客户端脚本程序JavaScript程序设计基础事件驱动及事件处理对象及其操作常用内部对象及函数JavaScript浏览器对象模型BOMHTML文档对象模型DOMWeb交互使用AJAX技术综合举例《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5JavaScript浏览器对象模型BOM脚本程序设计语言ECMAScript规范浏览器对象模型（BrowserObjectModel，BOM）文档对象模型（DocumentObjectModel，DOM）浏览器对象模型BOM就是指当用户打开浏览器时，浏览器中的JavaScriptruntimeengine将在内存中自动创建一组对象，用于对浏览器及HTML文档对象模型中数据的访问和操作。window对象frames对象document对象location对象history对象navigator对象screen对象event对象《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5window对象window对象即客户的浏览器窗口，window对象用于描述窗口的特征，它是document、location、history等对象的父对象函数isNaN()用于判断一个字符串是否为数字（NotaNumber）window对象的常用属性window，self，parent和topopener属性screenLeft和screenTop属性defaultStatus和status属性成员对象navigator对象、document对象、frames对象、history对象、location对象、screen对象等《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5window对象（Cont1.）window对象常用方法open()方法open(URL,WindowName,WindowFeatures);例如：if（userrole==）window.open(other.htm,_self);close()方法newWin.close()；例如：ahref=#onClick=window.opener=null;window.close();关闭窗口/amoveBy（x,y）方法resizeBy(x,y)方法scroll(x,y)方法focus()和blur()方法系统提示相关方法alert(字符串)方法confirm(字符串)方法prompt(message,initialinput);setTimeout()和clearTimeout()方法《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5window对象应用举例定义四个按钮“打开新窗口”、“关闭新窗口”、“查看源码”和“测试window对象属性及方法”。点击“打开新窗口”按钮，则打开一个新窗口，点击“查看源码”窗口则显示当前Web页的html源代码。假设窗口的特征是没有工具栏、菜单、状态栏、定位栏，高200个像素，宽200个像素。按钮“测试window对象属性及方法”对应一个test函数，通过修改该函数内容，可以分别测试window对象的其他属性和方法。《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5HTML代码testwin.htmhtmlheadscriptlanguage=javascriptfunctionnewone(url){newWin=open(url,subWindow,width=200,height=200,toolbar=0,status=0,location=0,menubar=0);returnnewWin;}functioncloseone(xWin){//若窗口存在，并且没有被关闭if(xWin!=&&!xWin.closed)xWin.close();}//可以修改该函数代码，测试window对象的其他方法functiontest(){window.moveTo(0,0);}/script/headbodyinputtype=buttonvalue=打开新窗口name=B1onclick=javascript:temp=newone('bookIndex.htm') inputtype=buttonvalue=关闭新窗口name=B2onclick=javascript:closeone(temp);brinputtype=buttonvalue=显示源文件name=B3onclick=window.location='view-source:'+window.location.hrefbrinputtype=buttonvalue=测试window对象属性及方法name=B4onclick=test()/body/html《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5新窗口对应的html文件bookIndex.htmhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312titlebookIndex/title/headbodypalign=centerIndexforThebook/phrinputtype=buttonvalue=关闭窗口name=B1onclick=window.close()/body/html《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5网页中时钟的实现示例htmlheadscriptlanguage=javascriptvartimeID;varRunning=false;functionStartTime(){running=true;ChangeTime();}functionChangeTime(){varcurrentTime=newDate();document.myClock.show.value=currentTime.toLocaleString();//递归调用timeID=setTimeout(ChangeTime(),1000);}functionStopTime(){if(Running)clearTimeout(timeID);Running=false;}/script/headbodyonLoad=StartTime()onUnload=StopTime()formname=myClockinputtype=textname=showvalue=size=20/form/body/html《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5frames对象在window属性中，frames是一个array型成员对象如果窗口分祯的话，每个frame相当于一个单独的window对象。对帧的访问可以通过数组下标0,1,…，或者通过帧名。例如，window.frames[0]代表第一个帧窗口。《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5frames对象举例建立一个包含左右两个帧的页面，在左面帧页中，设置一个button按钮，单击该按钮，改变右侧帧窗口的背景色。《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5frames对象举例HTML代码htmlheadmetaHTTP-EQUIV=Content-TypeCONTENT=text/html;charset=gb2312/headframesetcols=30%,*framename=leftsrc=myleft.htmframename=rightsrc=myright.htm/frameset左侧帧窗口（left）代码清单（myleft.htm）如下：/htmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312titleleft/titlescript//将帧窗口fname的背景色设置为color//fname的取值可以是数字0,1,…，也可以为帧的名称functiontest(fname,color){window.parent.frames[fname].document.bgColor=color;}/script/headbodypalign=centerinputtype=buttonvalue=改变右边帧背景色name=B4onclick=test(right,red)/p/body/html《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5location对象location对象用来存储当前窗口的url值。它储存了一个完整的url，并且可能通过对location对象的赋值来改变当前窗口的url，从而改变当前网页的内容属性《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5history对象一般把history对象称做历史清单对象，它保存窗口或框架在某时间段内的url。出于安全方面的原因，history对象并不向脚本提供列表的真正内容，例如一个完整的url名称。属性inputtype='button'value=快速返回onClick=history.go(-5)《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5screen对象window对象的screen成员对象包含有关客户机显示屏幕的信息。属性常用的属性是：availHeight（显示屏幕的高度）availWidth（显示屏幕的宽度），height（显示屏幕的高度）width（显示器屏幕的宽度）《Web技术导论》（第二版），北京：清华大学出版社，2009.04，ISBN:978-7-302-19371-5screen对象举例利用screen对象，在一个窗口中打开一个窗口，让窗口在屏幕上平滑的移动，遇到屏幕边界，将自动弹回，改变移动方向《Web技术导论》（第二