第7章 JavaScript 与 DHTML 技术

第7章JavaScript与DHTML技术7.1使用客户端脚本7.2JavaScript简介7.3DHTML技术7.1使用客户端脚本7.1.1使用SCRIPT标记符7.1.1.1什么是客户端脚本7.1.1.2使用SCRIPT标记符插入脚本以下HTML代码创建了一个按钮，当用户单击该按钮时显示出一个提示对话框，效果如图7-1所示。HTMLHEADTITLEJavaScript示例/TITLESCRIPTlanguage=JavaScripttype=text/javascript!--functionshowmsg(){alert(欢迎来到JavaScript世界)}//--/SCRIPT/HEADBODYFORMINPUTtype=ButtononClick=showmsg();value=点点我试试/FORM/BODY/HTML图7-1JavaScript示例7.1.2直接添加脚本对于上一小节的示例，以下是直接添加JavaScript脚本的HTML代码。HTMLHEADTITLEJavaScript示例/TITLE/HEADBODYFORMINPUTtype=ButtononClick=Javascript:alert('欢迎来到JavaScript世界');value=点点我试试/FORM/BODY/HTML7.1.3链接脚本文件以下HTML显示了如何使用链接脚本文件。------------------------网页源文件--------------------------------HTMLHEADTITLEJavaScript示例/TITLESCRIPTtype=text/javascriptsrc=test.js/SCRIPT/HEADBODYFORMINPUTtype=ButtononClick=showmsg();value=点点我试试/FORM/BODY/HTML-------------------与网页源文件同目录下的test.js文件-------------------------------functionshowmsg(){alert(欢迎来到JavaScript世界)}7.2JavaScript简介7.2.1JavaScript语言基础7.2.1.1JavaScript变量7.2.1.2JavaScript运算符与表达式7.2.1.3JavaScript语句7.2.1.4JavaScript函数7.2.2使用JavaScript对象7.2.2.1什么是对象7.2.2.2Array对象数组元素不但可以是其他数据类型，而且可以是其他数组或对象。例如，以下示例构造出了一个二维数组并将其元素在表格中显示，效果如图7-2所示。HTMLHEADTITLE创建数组/TITLEHEADBODYSCRIPTlanguage=JavaScripttype=text/javascript!--varorder=newArray();order[0]=newArray(背心,30,￥80);order[1]=newArray(鞋,50,￥200);order[2]=newArray(袜子,100,￥10);document.write(tableborderalign=center)document.write(th产品/thth数目/thth单价/th)for(i=0;iorder.length;i++)//length属性表示数组的长度，也就是数组元素的个数{document.write(tr)for(j=0;jorder[0].length;j++){document.write(td+order[i][j]+/td)}document.write(/tr)}document.write(/table)//--/SCRIPT/BODY/HTML图7-2创建二维数组7.2.2.3Date对象以下实例显示了如何使用Date对象，效果如图7-3所示。图7-3Date对象的用法HTMLHEADTITLE显示欢迎信息/TITLE/HEADBODYSCRIPTlanguage=JavaScripttype=text/javascript!--myDate=newDate();//创建一个日期对象。myHour=myDate.getHours();//获得当前的小时数。if(myHour6)//根据小时数显示不同的欢迎信息。welcomeString=凌晨好;elseif(myHour9)welcomeString=早上好;elseif(myHour12)welcomeString=上午好;elseif(myHour14)welcomeString=中午好;elseif(myHour17)welcomeString=下午好;elseif(myHour19)welcomeString=傍晚好;elseif(myHour22)welcomeString=晚上好;elsewelcomeString=夜里好;arrayDay=[日,一,二,三,四,五,六];//定义一个字符数组以显示星期数document.write((myDate.getMonth()+1)+月+myDate.getDate()+日 );document.write(星期+arrayDay[myDate.getDay()]+ );document.write(welcomeString);--/SCRIPT/BODY/HTML7.2.2.4Math对象7.2.3使用浏览器对象7.2.3.1文档对象模型JavaScript对象模型和IE对象模型非常相象，它们包含相似的对象和事件，反映了如图7-4所示的对象层次结构。图7-4文档对象模型7.2.3.2document对象1．document对象的常用属性以下示例显示了all属性和bgcolor属性的用法，效果如图7-5所示。图7-5动态更改背景颜色HTMLHEADTITLE动态更改背景颜色/TITLESCRIPTlanguage=JavaScripttype=text/javascript!--functionchangeBGColor(){document.bgColor=document.all.myForm.myBGColor.value;}//--/SCRIPT/HEADBODYH2请在文本框中输入十六进制颜色值（例如：#00ffff），然后单击“变！”按钮：/H2FORMname=myFormINPUTname=myBGColorvalue=#ffffffPINPUTtype=buttonvalue=变！onclick=changeBGColor()P2．document对象的常用事件以下示例显示了这两个事件的作用，效果如图7-6所示（当进入页面时，显示“欢迎光临”对话框；退出网页时，显示“谢谢惠顾”对话框）。HTMLHEADTITLE处理加载卸载事件/TITLE/HEADBODYonload=alert('欢迎光临!')onunload=alert('谢谢惠顾!')H2onload和onunload事件示例/H2/BODY/HTML图7-6处理加载卸载事件3．document对象的常用方法document对象最常用的方法为write()，表示在文档中写内容。实际上，我们在前面的示例中已经多次用到它，下面再看一个最基本的“HelloWorld”程序（这是几乎学习任何一门编程语言都要首先做的一个程序），效果如图7-7所示。图7-7write()方法示例HTMLHEADTITLEHelloWorld/TITLE/HEADBODYSCRIPTlanguage=JavaScripttype=text/javascript!--document.write(HelloWorld!)//--/SCRIPT/BODY/HTML7.2.3.3window对象以下示例显示了如何在状态栏中显示文字，效果如图7-8所示。HTMLHEADTITLE在状态栏显示文字/TITLE/HEADBODYonload=window.status='欢迎光临我的小屋(-_-)'H2在状态栏显示文字示例/H2/BODY/HTML图7-8在状态栏显示文字以下示例显示了window对象的打开关闭窗口方法的应用，效果如图7-9所示（打开网页tu7-9.htm时，同时显示一个新窗口，其中有一个“关闭”按钮，单击“关闭”按钮则弹出一个提示对话框，单击“确定”按钮可以关闭窗口）。2．window对象的常用方法图7-9打开与关闭窗口示例-------------------文件tu7-9.htm-------------------------HTMLHEADTITLE打开与关闭窗口示例/TITLE/HEADBODYonload=window.open('newWin.htm','myWin','height=200,width=400')H3打开与关闭窗口示例/H3/BODY/HTML-------------------与文件tu7-9.htm同一目录下的newWin.htm文件-------------------------HTMLHEADTITLE新建窗口/TITLE/HEADBODYFORMname=form1INPUTtype=buttonvalue=关闭onclick=if(confirm('您正在关闭当前窗口，确实要如此吗？'))window.close()/FORM/BODY/HTML7.2.3.4Form对象Form（表单）对象是浏览者与网页进行交互的重要工具，通过使用表单中的各种控件对象（按钮、单选框、列表框等），可以实现多种实用功能。由于不同的表单控件具有不完全相同的属性、方法和事件，因此以下不再一一说明，仅举一个最常见的应用——导航列表的实现，效果如图7-10所示（单击下拉列表中的选项，则可以在同一个窗口中跳转到相应页面）。HTMLHEADTITLE导航列表示例/TITLE/HEADBODYDIValign=centerH3请在以下列表中选择任意选项，以便导航到需要的页面……/H3FORMname=form1SELECTname=navbaronchange=location=document.form1.navbar.options[document.form1.navbar.selectedIndex].value//location相当于window.location，selectedIndex属性表示当前选中的选项OPTIONvalue=#selected--导航栏--/OPTIONOPTIONvalue=file1.htm选项一/OPTIONOPTIONvalue=file2.htm选项二/OPTIONOPTIONvalue=file3.htm选项三/OPTION/SELECT/FORM/DIV/BODY/HTML图7-10打开与关闭窗口示例7.3DHTML技术7.3.1什么是DHTML首先我们看一看微软中国站点中的一个重要界面特性，如图7-11所示——当浏览者将鼠标指针移动到页面导航条上时，会动态地弹出一个菜单，在该菜单中移