网页编程教学第7章.ppt

第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所示。所示。JavaScript示例示例图7-1JavaScript示例7.1.2 7.1.2 直接添加脚本直接添加脚本对对于于上上一一小小节节的的示示例例，以以下下是是直直接接添添加加 JavaScript JavaScript 脚本的脚本的 HTML HTML 代码。代码。HTMLJavaScript JavaScript 示例示例/TITLE INPUT type=Button /FORM7.1.3 7.1.3 链接脚本文件链接脚本文件以下以下 HTML HTML 显示了如何使用链接脚本文件。显示了如何使用链接脚本文件。-网网页页源源文文件件-HTMLJavaScript JavaScript 示例示例/TITLESCRIPT type=text/INPUT/FORM-与与网网页页源源文文件件同同目目录录下下的的 test.test.js js 文文件件-functionfunction showmsg showmsg()alert()alert(欢迎来到欢迎来到JavaScriptJavaScript世界世界)7.2 7.2 JavaScript JavaScript 简介简介7.2.17.2.1JavaScript JavaScript 语言基础语言基础7.2.1.1 7.2.1.1 JavaScript JavaScript 变量变量 7.2.1.2 7.2.1.2 JavaScript JavaScript 运算符与表达式运算符与表达式 7.2.1.3 7.2.1.3 JavaScript JavaScript 语句语句 7.2.1.4 7.2.1.4 JavaScript JavaScript 函数函数 7.2.27.2.2使用使用 JavaScript JavaScript 对象对象7.2.2.1 7.2.2.1 什么是对象什么是对象 7.2.2.2 7.2.2.2 Array Array 对象对象 数数组组元元素素不不但但可可以以是是其其他他数数据据类类型型，而而且且可可以以是是其其他他数数组组或或对对象象。例例如如，以以下下示示例例构构造造出出了了一一个个二二维维数数组组并并将将其其元元素素在在表表格格中中显显示示，效效果果如如图图7-2所示。所示。创建数组创建数组!-varorder=newArray();order0=newArray(背心背心,30,￥80);order1=newArray(鞋鞋,50,￥200);order2=newArray(袜子袜子,100,￥10);document.write()document.write(产品产品数目数目单价单价)for(i=0;iorder.length;i+)/length属性表示数组的长度，也就是属性表示数组的长度，也就是数组元素的个数数组元素的个数document.write()for(j=0;jorder0.length;j+)document.write(+orderij+)document.write()document.write()/-图7-2创建二维数组7.2.2.3Date对象对象以以下下实实例例显显示示了了如如何何使使用用Date对对象象，效效果果如图如图7-3所示。所示。图7-3Date对象的用法显示欢迎信息显示欢迎信息!-myDate=newDate();/创建一个日期对象。创建一个日期对象。myHour=myDate.getHours();/获得当前的小时数。获得当前的小时数。if(myHour6)/根据小时数显示不同的欢迎信息。根据小时数显示不同的欢迎信息。welcomeString=凌晨好凌晨好;elseif(myHour9)welcomeString=早上好早上好;elseif(myHour12)welcomeString=上午好上午好;elseif(myHour14)welcomeString=中午好中午好;elseif(myHour17)welcomeString=下午好下午好;elseif(myHour19)welcomeString=傍晚好傍晚好;elseif(myHour7.2.2.4Math对象对象7.2.3使用浏览器对象使用浏览器对象7.2.3.1文档对象模型文档对象模型JavaScript对对象象模模型型和和IE对对象象模模型型非非常常相相象象，它它们们包包含含相相似似的的对对象象和和事事件件，反反映映了了如如图图7-4所示的对象层次结构。所示的对象层次结构。图7-4文档对象模型7.2.3.2document对象对象1document对象的常用属性对象的常用属性以以下下示示例例显显示示了了all属属性性和和bgcolor属属性性的的用用法法，效果如图效果如图7-5所示。所示。图7-5动态更改背景颜色动态更改背景颜色动态更改背景颜色请请在在文文本本框框中中输输入入十十六六进进制制颜颜色色值值（例例如如：#00ffff），然后单击然后单击“变！变！”按钮：按钮：2document对象的常用事件对象的常用事件以以下下示示例例显显示示了了这这两两个个事事件件的的作作用用，效效果果如如图图7-6所所示示（当当进进入入页页面面时时，显显示示“欢欢迎迎光光临临”对对话话框框；退出网页时，显示退出网页时，显示“谢谢惠顾谢谢惠顾”对话框）。对话框）。处理加载卸载事件处理加载卸载事件onload和和onunload事件示例事件示例图7-6处理加载卸载事件3document对象的常用方法对象的常用方法document对对象象最最常常用用的的方方法法为为write()，表表示示在在文文档档中中写写内内容容。实实际际上上，我我们们在在前前面面的的示示例例中中已已经经多多次次用用到到它它，下下面面再再看看一一个个最最基基本本的的“HelloWorld”程程序序（这这是是几几乎乎学学习习任任何何一一门门编编程程语语言言都都要要首首先先做做的的一一个程序），效果如图个程序），效果如图7-7所示。所示。图7-7write()方法示例HelloWorld7.2.3.3window对象对象以以下下示示例例显显示示了了如如何何在在状状态态栏栏中中显显示示文文字字，效效果果如图如图7-8所示。所示。在状态栏显示文字在状态栏显示文字在状态栏显示文字示例在状态栏显示文字示例图7-8在状态栏显示文字以下示例显示了以下示例显示了window对象的打开关对象的打开关闭窗口方法的应用，效闭窗口方法的应用，效果如图果如图7-9所示（打开所示（打开网页网页tu7-9.htm时，同时，同时显示一个新窗口，其时显示一个新窗口，其中有一个中有一个“关闭关闭”按钮，按钮，单击单击“关闭关闭”按钮则弹按钮则弹出一个提示对话框，单出一个提示对话框，单击击“确定确定”按钮可以关按钮可以关闭窗口）。闭窗口）。2window对象的常用方法对象的常用方法图7-9打开与关闭窗口示例-文件文件tu7-9.htm-打开与关闭窗口示例打开与关闭窗口示例打开与关闭窗口示例打开与关闭窗口示例-与与文文件件tu7-9.htm同同一一目目录录下下的的newWin.htm文文件件-新建窗口新建窗口7.2.3.4Form对象对象Form（表表单单）对对象象是是浏浏览览者者与与网网页页进进行行交交互互的的重重要要工工具具，通通过过使使用用表表单单中中的的各各种种控控件件对对象象（按按钮钮、单单选框、列表框等），可以实现多种实用功能。选框、列表框等），可以实现多种实用功能。由由于于不不同同的的表表单单控控件件具具有有不不完完全全相相同同的的属属性性、方方法法和和事事件件，因因此此以以下下不不再再一一一一说说明明，仅仅举举一一个个最最常常见见的的应应用用导导航航列列表表的的实实现现，效效果果如如图图7-10所所示示（单单击击下下拉拉列列表表中中的的选选项项，则则可可以以在在同同一一个个窗窗口口中中跳跳转转到到相应页面）。相应页面）。导航列表示例导航列表示例请请在在以以下下列列表表中中选选择择任任意意选选项项，以以便便导导航航到到需需要要的的页页面面/location相相当当于于window.location，selectedIndex属属性性表表示示当当前前选选中中的选项的选项-导航栏导航栏-选项一选项一选项二选项二选项三选项三图7-10打开与关闭窗口示例7.3DHTML技术技术7.3.17.3.1什么是什么是 DHTML 首先我们看一看微软中国站点中的一个重首先我们看一看微软中国站点中的一个重要界面特性，如图要界面特性，如图 7-11 7-11 所示所示当浏览者将当浏览者将鼠标指针移动到页面导航条上时，会动态地弹鼠标指针移动到页面导航条上时，会动态地弹出一个菜单，在该菜单中移动鼠标，所指向的出一个菜单，在该菜单中移动鼠标，所指向的菜单项变为红色显示；如果将鼠标指针移出菜菜单项变为红色显示；如果将鼠标指针移出菜单所在范围，则菜单自动隐藏；如果将鼠标指单所在范围，则菜单自动隐藏；如果将鼠标指针移动到导航条上另外一个区域，则会弹出另针移动到导航条上另外一个区域，则会弹出另外一个菜单。外一个菜单。图7-11动态HTML示例7.3.2DHTML应用示例应用示例7.3.2.1示例示例1纵向滚动文本纵向滚动文本 本示例显示了如何实现一种常见的文本纵向滚本示例显示了如何实现一种常见的文本纵向滚动效果，代码如下，效果如图动效果，代码如下，效果如图7-12所示（文字循所示（文字循环向上滚动，当鼠标移上去时，文字停止滚动，环向上滚动，当鼠标移上去时，文字停止滚动，鼠标移开则继续滚动）。鼠标移开则继续滚动）。图7-12纵向滚动文本效果纵向滚动文本效果纵向滚动文本效果最最 新新 动动 态态/marquee对象的对象的start方法和方法和stop方法用于控制滚动字幕的方法用于控制滚动字幕的启动和停止启动和停止1、最新动态最新动态2、最新动态最新动态&!*(#$7.3.2.2示例示例2动态显示时间动态显示时间本本示示例例显显示示了了如如何何在在网网页页中中显显示示一一个个动动态态时时钟钟，代代码码如如下下，效效果果如如图图7-13所所示示（假假如如当当前前时时间处于间处于0点到点到7点之间，文字会显示为红色）。点之间，文字会显示为红色）。图7-13动态显示时间动态显示时间示例动态显示时间示例=0&getHours()7.3.2.3示例示例3动态折叠菜单动态折叠菜单本本示示例例实实现现了了一一个个动动态态折折叠叠菜菜单单当当浏浏览览者者单单击击菜菜单单条条目目时时，其其子子菜菜单单会会动动态态显显示示或或隐隐藏藏，并并且且当当鼠鼠标标指指针针移移动动到到菜菜单单条条目目上上时时，鼠鼠标标指指针针会会变变成成手手形形，并并且且每每个个子子菜菜单单条条目目在在鼠鼠标标指指针针位位于于其其上上时时变变为为红红色色。以以下下是是本本示示例例的的源源代代码码，效效果果如如图图7-14所示。所示。图7-14动态折叠菜单动态折叠菜单动态折叠菜单单击一个菜单项则可以打开或折叠菜单单击一个菜单项则可以打开或折叠菜单+菜菜单单项项1子菜单项子菜单项1子菜单项子菜单项2子菜单项子菜单项3+菜单项菜单项2子菜单项子菜单项1子菜单项子菜单项2+菜单项菜单项3子菜单项子菜单项1子菜单项子菜单项2