网页设计与制作第四章

1、第第4章章 javascript与与dhtml技术技术 4.1 使用客户端脚本使用客户端脚本 4.2 javascript 4.3 dhtml技术技术 4.1 使用客户端脚本使用客户端脚本 客户端程序是利用客户端脚本语言来完成的。脚本语言客户端程序是利用客户端脚本语言来完成的。脚本语言 是介于是介于html和和java， visual basic以及以及c+等编程语等编程语 言之间的一种特殊语言。言之间的一种特殊语言。html通常用于设置文本格式和创通常用于设置文本格式和创 建链接，而编程语言通常用于向计算机发出一系列复杂的指建链接，而编程语言通常用于向计算机发出一系列复杂的指 令。脚本语言也

2、可以向计算机发送指令，但它们的语法和规令。脚本语言也可以向计算机发送指令，但它们的语法和规 则没有编译的编程语言那么严格和复杂。脚本语言卞要用于则没有编译的编程语言那么严格和复杂。脚本语言卞要用于 格式化文本和使用编程语言编写的组件。格式化文本和使用编程语言编写的组件。 返回 4.2 javascript 4.2.1 javascript语言简介语言简介 javascript为为netscape communication corporation(网景公司网景公司)所开发的所开发的s cript语言。它提供给语言。它提供给 该公司的浏览程序产品该公司的浏览程序产品netscape naviga

3、tor开发开发h.动网动网 页的功能。页的功能。javascript原名原名livescript，1995年正式发年正式发 布的布的netscape 2.0版本，是目前浏览器最普遍支持的版本，是目前浏览器最普遍支持的s cript语言。语言。 下一页 返回 4.2 javascript 4.2.2javascript的数据类型的数据类型 1.字符串数据类型字符串数据类型 2.数值数据类型数值数据类型 3.整型值整型值 4.浮点值浮点值 5. boolean数据类型数据类型 6. null数据类型数据类型 7. undefined数据类型数据类型 上一页 下一页 返回 4.2 javascrip

4、t 4.2.3javascript的变量的变量 1.变量声明变量声明 2.变量命名变量命名 3.强制转换强制转换 上一页 下一页 返回 4.2 javascript 4.2.4javascript的运算符的运算符 1.运算符的优先级运算符的优先级 javascript提供的运算符有很多种，而且在同一个表达提供的运算符有很多种，而且在同一个表达 式中允许使用多种运算符。为了正确的得到计算结果，表达式中允许使用多种运算符。为了正确的得到计算结果，表达 式以默认的优先顺序进行计算，即所谓的运算符的优先级。式以默认的优先顺序进行计算，即所谓的运算符的优先级。 上一页 下一页 返回 4.2 javasc

5、ript 2.算术运算符算术运算符 javascript的算术运算符拥有常用的数学运算符。大的算术运算符拥有常用的数学运算符。大 部分的运算元都是数字，不过加法运算还可以链接两个字符部分的运算元都是数字，不过加法运算还可以链接两个字符 串。串。表表4为各种运算符的例子。为各种运算符的例子。 3.逻辑运算符逻辑运算符 逻辑运算符卞要是使用在循环和条件语句的判断条件中，逻辑运算符卞要是使用在循环和条件语句的判断条件中， true为真，为真，false为假，比较运算符如为假，比较运算符如表表5所示。所示。 上一页 下一页 返回 4.2 javascript 4.位运算符位运算符 javascript

6、拥有位运算符，能够进行一进制的位运算，拥有位运算符，能够进行一进制的位运算， 可以向左或右移动儿位，也可以通过可以向左或右移动儿位，也可以通过not， and， xor 不不ii or进行位运算，如进行位运算，如表表6所示。所示。 上一页 下一页 返回 4.2 javascript 4.2.5javascript的控制语句的控制语句 1.使用条件语句使用条件语句 javascript支持支持if和和if.else条件语句。在条件语句。在if语句中将语句中将 测试一个条件，如果该条件满足测试，执行相关的测试一个条件，如果该条件满足测试，执行相关的 javascript编码。在编码。在if.els

7、e语句中，如果条件不满足测语句中，如果条件不满足测 试，则将执行不同的代码。最简单的试，则将执行不同的代码。最简单的if语句格式可以在一行语句格式可以在一行 中写完，不过更常见的是多行的中写完，不过更常见的是多行的if和和iif.else语句。语句。 上一页 下一页 返回 4.2 javascript 2.条件运算符条件运算符 javascript也支持隐式的条件格式。该格式在要测试的也支持隐式的条件格式。该格式在要测试的 条件后使用一个问号条件后使用一个问号(而不是在条件前的而不是在条件前的if)。它也指定两个。它也指定两个 可选项，一个在满足条件时使用，另一个在不满足条件时使可选项，一个在

8、满足条件时使用，另一个在不满足条件时使 用。这两个选择项之间必须用一个冒号隔开用。这两个选择项之间必须用一个冒号隔开。 上一页 下一页 返回 4.2 javascript 3.使用循环使用循环 有多种方式来重复执行一条语句或语句块。通常重复执有多种方式来重复执行一条语句或语句块。通常重复执 行被称为循环或重复。重复只是循环的一个运行。典型情况行被称为循环或重复。重复只是循环的一个运行。典型情况 是用一个变量测试来进行控制，每执行一次循环变量的取值是用一个变量测试来进行控制，每执行一次循环变量的取值 都会更改。都会更改。javascript支持支持4种循环：种循环：for循环、循环、for. i

9、n 循环、循环、whil e循环、循环、do.while循环。循环。 上一页 下一页 返回 4.2 javascript 4.使用使用for循环循环 for语句指定了一个计数器变量，一个测试条件，以及语句指定了一个计数器变量，一个测试条件，以及 更新该计数器的操作。在每次循环的重复之前，都将测试该更新该计数器的操作。在每次循环的重复之前，都将测试该 条件。如果测试成功，将运行循环中的代码。如果测试不成条件。如果测试成功，将运行循环中的代码。如果测试不成 功，不运行循环中的代码，程序继续运行紧跟在循环后的第功，不运行循环中的代码，程序继续运行紧跟在循环后的第 一行代码。在执行该循环后，计算机变量

10、将在下一次循环之一行代码。在执行该循环后，计算机变量将在下一次循环之 前被更新。前被更新。 上一页 下一页 返回 4.2 javascript 5.使用使用forin循环循环 javascript提供了一种特别的循环方式来编译一个对提供了一种特别的循环方式来编译一个对 象的所有用户定义的属性或者一个数组的所有元素。象的所有用户定义的属性或者一个数组的所有元素。 for.in循环中的循环计数器是一个字符串，而不是数字。循环中的循环计数器是一个字符串，而不是数字。 它包含当前属性的名称或者当前数组元素的下标。它包含当前属性的名称或者当前数组元素的下标。 上一页 下一页 返回 4.2 javascr

11、ipt 6.使用使用while循环循环 while循环相似于循环相似于for循环。其不同之处是循环。其不同之处是while循环没循环没 有内置的计数器或更新表达式。如果希望控制语句或语句块有内置的计数器或更新表达式。如果希望控制语句或语句块 的循环执行，需要不只是的循环执行，需要不只是“运行该代码运行该代码n次次”，而是更复杂，而是更复杂 的规则，用的规则，用while循环。下面的示例使用循环。下面的示例使用internet浏览器浏览器 对象模型和对象模型和while循环来询问用户一个简单的问题。循环来询问用户一个简单的问题。 上一页 下一页 返回 4.2 javascript 7.使用使用b

12、reak和和continue语句语句 在在javascript中当某些条件得到满足时，用中当某些条件得到满足时，用break语语 句来中断一个循环的运行句来中断一个循环的运行(请注意，也用请注意，也用break语句退出一语句退出一 个个switch)。如果是一个。如果是一个for或者或者for. in循环，在更新计循环，在更新计 数器变量时使用数器变量时使用continue语句越过余下的代码块而直接跳语句越过余下的代码块而直接跳 到下一个循环中。到下一个循环中。 上一页 下一页 返回 4.2 javascript 4.2.6javascript的函数的函数 1.内部函数内部函数 javascr

13、ipt语言包含很多内部函数。某些函数可以操语言包含很多内部函数。某些函数可以操 作表达式和特殊字符，而其他函数将字符串转换为数值。例作表达式和特殊字符，而其他函数将字符串转换为数值。例 如如evalu，该函数可以对以字符串形式表示的任意有效的，该函数可以对以字符串形式表示的任意有效的 javascript代码求值。代码求值。eval()函数有一个参数，该参数就函数有一个参数，该参数就 是想要求值的代码。下面给出一个使用本函数的示例。是想要求值的代码。下面给出一个使用本函数的示例。 2.创建自己的函数创建自己的函数 在必要的时候，可以创建并使用自己的函数。一个函数在必要的时候，可以创建并使用自己

14、的函数。一个函数 的定义中包含了一个函数语句和一个的定义中包含了一个函数语句和一个javascript语句块。语句块。 下面示例中的下面示例中的integercheck函数以三角形的边长函数以三角形的边长(整数整数)为为 参数，通过查看二条边的长度来测试是否可以组成一个直角参数，通过查看二条边的长度来测试是否可以组成一个直角 三角形。三角形。 上一页 下一页 返回 4.2 javascript 4.2.7 javascript的对象的对象 javascript对象是属性和方法的集合。一个方法就是对象是属性和方法的集合。一个方法就是 一个函数，是对象的成员。属性是一个值或一组值一个函数，是对象的

15、成员。属性是一个值或一组值(以数组或以数组或 对象的形式对象的形式)，是对象的成员。，是对象的成员。javas cript支持支持4种类型的种类型的 对象：内部对象、自定义对象、宿卞给出的对象对象：内部对象、自定义对象、宿卞给出的对象(如浏览器中如浏览器中 的的windows和和document)以及以及activex对象对象(外部组外部组 件件)。 上一页 下一页 返回 4.2 javascript 4.2.8javascript的事件的事件 1. html属性：在属性：在html标记的属性中设置标记的属性中设置javascript的事的事 件处理函数件处理函数 2. javascript属

16、性：在对象的属性中设置属性：在对象的属性中设置javascript的事的事 件处理件处理 上一页 返回 4.3 dhtml技术技术 4.3.1什么是什么是dhtml技术技术 dhtml ，即动态，即动态html，是，是dynamic html的缩写，的缩写， dhtml通过传统的通过传统的html语言，利用层叠样式表语言，利用层叠样式表 (cascading style sheets css)，并依靠，并依靠javascript 使一向静止不变的页面得以使一向静止不变的页面得以“动动”起来。起来。netscape 4.0和和 ie 4.0/5.0版本支持版本支持dhtml， dhtml是一种完全是一种完全“客客 户端户端”技术，直接通过技术，直接通过web页面实现页面与用户之间的交互页面实现页面与用户之间的交互 性。性。 下一页 返回 4.3 dhtml技术技术 4.3.2 dhtml的应用的应用 自从自从html 4.0出现以后，引入了出现以后，引入了“层叠样式表层叠样式表”，于，于 是网页制作者能够随心所欲地对自己的网页进行外观和动态是网页制作者能够随心所欲地对自己的网页进行外观和动态 的设计，并目使网页具有交互