JavaScript与DHTML技术.ppt

第7章 JavaScript 与 DHTML 技术,7.1 使用客户端脚本 7.2 JavaScript 简介 7.3 DHTML 技术,7.1 使用客户端脚本 7.1.1 使用 SCRIPT 标记符 7.1.1.1 什么是客户端脚本,7.1.1.2 使用 SCRIPT 标记符插入脚本 以下 HTML 代码创建了一个按钮，当用户单击该按钮时显示出一个提示对话框，效果如图 7-1 所示。, JavaScript 示例 ,图 7-1 JavaScript 示例,7.1.2 直接添加脚本 对于上一小节的示例，以下是直接添加 JavaScript 脚本的 HTML 代码。 JavaScript 示例 ,7.1.3 链接脚本文件 以下 HTML 显示了如何使用链接脚本文件。 -网页源文件- JavaScript 示例 -与网页源文件同目录下的 test.js 文件- function showmsg() alert(“欢迎来到JavaScript世界“) ,7.2 JavaScript 简介 7.2.1 JavaScript 语言基础 7.2.1.1 JavaScript 变量 7.2.1.2 JavaScript 运算符与表达式 7.2.1.3 JavaScript 语句 7.2.1.4 JavaScript 函数 7.2.2 使用 JavaScript 对象 7.2.2.1 什么是对象 7.2.2.2 Array 对象,数组元素不但可以是其他数据类型，而且可以是其他数组或对象。例如，以下示例构造出了一个二维数组并将其元素在表格中显示，效果如图 7-2 所示。 创建数组 “) document.write(“产品数目单价“),for(i=0;i“) for(j=0;j“+orderij+“) document.write(“) document.write(“) / ,图 7-2 创建二维数组,7.2.2.3 Date 对象 以下实例显示了如何使用 Date 对象，效果如图 7-3 所示。,图 7-3 Date 对象的用法, 显示欢迎信息 ,else if(myHour19) welcomeString=“傍晚好“; else if(myHour22) welcomeString=“晚上好“; else welcomeString=“夜里好“; arrayDay=“日“ , “一“ , “二“ , “三“ , “四“ , “五“ , “六“ ; /定义一个字符数组以显示星期数,document.write(myDate.getMonth()+1) + “月“ + myDate.getDate() + “日 ,7.2.2.4 Math 对象 7.2.3 使用浏览器对象 7.2.3.1 文档对象模型 JavaScript 对象模型和 IE 对象模型非常相象，它们包含相似的对象和事件，反映了如图 7-4 所示的对象层次结构。,图 7-4 文档对象模型,7.2.3.2 document 对象 1document 对象的常用属性 以下示例显示了 all 属性和 bgcolor 属性的用法，效果如图 7-5 所示。,图 7-5 动态更改背景颜色, 动态更改背景颜色 请在文本框中输入十六进制颜色值（例如：#00ffff），然后单击“变！”按钮： ,2document 对象的常用事件 以下示例显示了这两个事件的作用，效果如图 7-6 所示（当进入页面时，显示“欢迎光临”对话框；退出网页时，显示“谢谢惠顾”对话框）。 处理加载卸载事件 onload 和 onunload 事件示例 ,图 7-6 处理加载卸载事件,3document 对象的常用方法 document 对象最常用的方法为 write( )，表示在文档中写内容。实际上，我们在前面的示例中已经多次用到它，下面再看一个最基本的“Hello World”程序（这是几乎学习任何一门编程语言都要首先做的一个程序），效果如图 7-7 所示。,图 7-7 write( ) 方法示例, Hello World ,7.2.3.3 window 对象 以下示例显示了如何在状态栏中显示文字，效果如图 7-8 所示。 在状态栏显示文字 在状态栏显示文字示例 ,图 7-8 在状态栏显示文字,以下示例显示了 window 对象的打开关闭窗口方法的应用，效果如图 7-9 所示（打开网页 tu7-9.htm 时，同时显示一个新窗口，其中有一个“关闭”按钮，单击“关闭”按钮则弹出一个提示对话框，单击“确定”按钮可以关闭窗口）。,2window 对象的常用方法,图 7-9 打开与关闭窗口示例,-文件 tu7-9.htm- 打开与关闭窗口示例 打开与关闭窗口示例 -与文件 tu7-9.htm 同一目录下的 newWin.htm 文件- 新建窗口 ,7.2.3.4 Form 对象 Form（表单）对象是浏览者与网页进行交互的重要工具，通过使用表单中的各种控件对象（按钮、单选框、列表框等），可以实现多种实用功能。 由于不同的表单控件具有不完全相同的属性、方法和事件，因此以下不再一一说明，仅举一个最常见的应用导航列表的实现，效果如图 7-10 所示（单击下拉列表中的选项，则可以在同一个窗口中跳转到相应页面）。, 导航列表示例 请在以下列表中选择任意选项，以便导航到需要的页面 / location 相当于 window.location，selectedIndex 属性表示当前选中的选项 -导航栏- 选项一 选项二 选项三 ,图 7-10 打开与关闭窗口示例,7.3 DHTML 技术 7.3.1 什么是 DHTML 首先我们看一看微软中国站点中的一个重要界面特性，如图 7-11 所示当浏览者将鼠标指针移动到页面导航条上时，会动态地弹出一个菜单，在该菜单中移动鼠标，所指向的菜单项变为红色显示；如果将鼠标指针移出菜单所在范围，则菜单自动隐藏；如果将鼠标指针移动到导航条上另外一个区域，则会弹出另外一个菜单。,图 7-11 动态 HTML 示例,7.3.2 DHTML 应用示例 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 /恢复颜色 / ,7.3.2.3 示例 3动态折叠菜单 本示例实现了一个动态折叠菜单当浏览者单击菜单条目时，其子菜单会动态显示或隐藏，并且当鼠标指针移动到菜单条目上时，鼠标指针会变成手形，并且每个子菜单条目在鼠标指针位于其上时变为红色。以下是本示例的源代码，效果如图 7-14 所示。,图 7-14 动态折叠菜单, 动态折叠菜单 ,if (src.className = “menu“) /判断是否单击了某菜单项。 subId = “sub“ + src.id; if (document.all(subId).style.display=“none“) /如果没有显示子菜单，则显示。 document.all(subId).style.display =