第7章 JavaScript 与 DHTML 技术

1、第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 示例

2、,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.

3、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 对象的用法, 显示欢迎信息 !- myDate = new Date(); /创建一

4、个日期对象。 myHour = myDate.getHours(); /获得当前的小时数。 if(myHour6) /根据小时数显示不同的欢迎信息。 welcomeString=凌晨好; else if(myHour9) welcomeString=早上好; else if(myHour12) welcomeString=上午好; else if(myHour14) welcomeString=中午好; else if(myHour17) welcomeString=下午好;,else if(myHour ,7.3.2.3 示例 3动态折叠菜单 本示例实现了一个动态折叠菜单当浏览者单击菜单条目时，其子菜单会动态显示或隐藏，并且当鼠标指针移动到菜单条目上时，鼠标指针会变成手形，并且每个子菜单条目在鼠标指针位于其上时变为红色。以下是本示例的源代码，效果如图 7-14 所示。,图 7-14 动态折叠菜单, 动态折叠菜单 , 单击一个菜单项则可以打开或折叠菜单 + 菜单项