Q第10章 JavaScript和DHTM技术 通过本章学习,应该掌握以下内容 1. Javascript语言基础 2.在网页中插入 Javascript脚本语言的方法 3.CSS属性 4.在网页中应用 DHTML技术
通过本章学习，应该掌握以下内容： 1. JavaScript语言基础 2. 在网页中插入JavaScript脚本语言的方法 3. CSS属性 4. 在网页中应用DHTML技术 第10章 JavaScript和DHTML技术
101在网页中使用 JavaScript 1011 Javascript概述 1. JavaScrip语言基础 (1) JavaScript变量 与其他编程语言一样, JavaScript也是采用变量 存储数据。与Java和其他一些高级语言不同 JavaScript并不要求指定变量中包含的数据类型 在 Javascript中,可以简单地用var来定义所有的 变量,而变量的类型由赋值语句隐含确定。 例如:如果赋予变量 money数字值1000,则 money 可参与整型操作;如果赋予该变量字符串值" This is my money",则它可以参与字符串操作;同样,如果 赋予它逻辑值alse,则它可以支持逻辑操作 变量还可以先赋予一种类型的数值,然后再根据 需要赋予其他类型的数值 JavaScript支持的数据类型有: 数字、布尔、字符串、未定义、对象等类型
10.1 在网页中使用JavaScript 10.1.1 JavaScript概述 1．JavaScript语言基础 （1）JavaScript变量 与其他编程语言一样，JavaScript也是采用变量 存 储 数 据 。 与 Java 和 其 他 一 些 高 级 语 言 不 同 ， JavaScript并不要求指定变量中包含的数据类型。 在JavaScript中，可以简单地用var来定义所有的 变量，而变量的类型由赋值语句隐含确定。 例如: 如果赋予变量money数字值1000，则money 可参与整型操作；如果赋予该变量字符串值 "This is my money"，则它可以参与字符串操作；同样，如果 赋予它逻辑值false，则它可以支持逻辑操作。 变量还可以先赋予一种类型的数值，然后再根据 需要赋予其他类型的数值。 JavaScript支持的数据类型 有： 数字、布尔、字符串、未定义、对象等类型
(2) JavaScript运算符 ①算术运算符包括:+、-、*、/、%、艹+、-等。 ②逻辑运算符包括:&&、 ③比较运算符包括:、>>等。 ⑥赋值运算符包括: 等。 ⑦条件运算符包括:?。 ⑧其他运算符 大多数 Javascript运算符都是双目运算符,即具有 两个操作数的运算符,通常用以下方式进行操作: 操作数1运算符操作数2
（2）JavaScript运算符 ① 算术运算符 包括：+、-、 * 、/、%、++、--等。 ② 逻辑运算符 包括：&&、||、！等。 ③ 比较运算符 包括：、>=、= =、！=等。 ④ 字符串运算符 包括：+，用于连接两个字符串。 ⑤ 位操作运算符 &、|、 ^ 、-、~、>、>>>等。 ⑥ 赋值运算符 包括：=、+=、-=、 *=、 ／=、 ％=、 &=、|=、^=、>=、>>>=等。 ⑦ 条件运算符 包括：?。 ⑧ 其他运算符 大多数JavaScript运算符都是双目运算符，即具有 两个操作数的运算符，通常用以下方式进行操作： 操作数1 运算符 操作数2
(3) JavaScript表达式 表达式是运算符和操作数的组合。表达式通过求值确定表达 式的值,这个值是对操作数实施运算符所确定的运算后产生的结 果。有些运算符将数值赋予一个变量,而另一些运算符则可以用 在其他表达式中。 (4) JavaScript语句 ①条件语句 在 Javascript中提供了i语句、 if else语句以及 switch语句等三 种条件语句。 if语句是最基本的条件语句,它的格式为 if(条件) 语句段; ifelse语句的格式为: if(条件) 语句段1; else 语句段2;
（3）JavaScript表达式 表达式是运算符和操作数的组合。表达式通过求值确定表达 式的值，这个值是对操作数实施运算符所确定的运算后产生的结 果。有些运算符将数值赋予一个变量，而另一些运算符则可以用 在其他表达式中。 （4）JavaScript语句 ① 条件语句 在JavaScript中提供了if语句、if else语句以及switch语句等三 种条件语句。 if 语句是最基本的条件语句，它的格式为： if（条件） 语句段； if else语句的格式为： if（条件） 语句段1； else 语句段2；
switch语句 格式如下 switch(条件) { case value1:语句段1; case value2:语句段2 case value3:语句段3; default:语句段4;} ②循环语句 循环语句用于在一定条件下重复执行某段代码。在 Javascript中提供了多种循环语句: for语句格式如下 for(初始化;条件;增量) 语句段;
switch语句 格式如下： switch（条件） {case value1:语句段1; case value2：语句段2; case value3：语句段3; … default：语句段4；} ② 循环语句 循环语句用于在一定条件下重复执行某段代码。在 JavaScript中提供了多种循环语句： for语句 格式如下： for（初始化；条件；增量） { 语句段； }
while语句是另一种基本的循环语句,格式如下: while(条件) 语句段; do while语句是whil语句的变体,格式如下 do 语句段; while(条件) break语句提供无条件跳出循环结构或 switch语句的功能。 continue语句作用是终止当次循环,跳转到循环的开始处继 续下一轮循环 break语句和 continue语句既可以单独使用,也可以与语句标 号一起使用
while语句 是另一种基本的循环语句，格式如下： while（条件） { 语句段； } do while语句 是while语句的变体，格式如下： do { 语句段； } while（条件） break语句 提供无条件跳出循环结构或switch语句的功能。 continue语句 作用是终止当次循环，跳转到循环的开始处继 续下一轮循环。 break语句和continue语句既可以单独使用，也可以与语句标 号一起使用
(5) JavaScript函数 函数是已命名的代码块,代码块中的语句被作为一个整体引 用和执行。在使用函数之前,必须先定义函数。函数定义通常放 在HTML文档头中,但也可以放在其他位置。但通常最好放在文 档头,这样就可以确保先定义后使用。定义函数的格式如下: function函数名(参数1,参数2, 语句段 return表达式; 函数名是调用函数时引用的名称,参数是调用函 数时接收传入数值的变量名。大括号中的语句是函数 的执行语句,当函数被调用时执行。如果需要函数返 回值,可以使用 return语句,需要返回的值应放在 return之后
（5）JavaScript函数 函数是已命名的代码块，代码块中的语句被作为一个整体引 用和执行。在使用函数之前，必须先定义函数。函数定义通常放 在HTML文档头中，但也可以放在其他位置。但通常最好放在文 档头，这样就可以确保先定义后使用。 定义函数的格式如下： function 函数名（参数1，参数2，．．．） { 语句段； … return 表达式； } 函数名是调用函数时引用的名称，参数是调用函 数时接收传入数值的变量名。大括号中的语句是函数 的执行语句，当函数被调用时执行。如果需要函数返 回值，可以使用return语句，需要返回的值应放在 return之后
2.使用 JavaScript内部对象 对象就是客观世界中存在的特定实体。在计算机世界中,也 包含各种各样的对象。例如,一个Web页可以被看作一个对象, 它包含背景颜色、前景颜色等特性,同时包含打开、关闭、读写 等动作。因此可以说,对象包含两个要素: 属性用来描述对象特性的一组数据,也就是若干变量; 方法用来操作对象特性的若干动作,也就是若干函数。 通过访问或设置对象的属性,并且调用对象的方法,可以对 对象进行各种操作,从而获得需要的功能。 在 Javascript中可以操作的对象通常包括两种类型:浏览 器对象和 JavaScript内部对象。浏览器对象是指文档对象模型规 定的对象,例如HTM元素对象、 documen对象、 window对象 等; Javascript内部对象包括一些常用的通用对象,例如数组对 象Aray、日期对象Date、数学对象Math等
2．使用JavaScript内部对象 对象就是客观世界中存在的特定实体。在计算机世界中，也 包含各种各样的对象。例如，一个Web页可以被看作一个对象， 它包含背景颜色、前景颜色等特性，同时包含打开、关闭、读写 等动作。因此可以说，对象包含两个要素： 属性 用来描述对象特性的一组数据，也就是若干变量； 方法 用来操作对象特性的若干动作，也就是若干函数。 通过访问或设置对象的属性，并且调用对象的方法，可以对 对象进行各种操作，从而获得需要的功能。 在JavaScript中可以操作的对象通常包括两种类型：浏览 器对象和JavaScript内部对象。浏览器对象是指文档对象模型规 定的对象，例如HTML元素对象、document对象、window对象 等；JavaScript内部对象包括一些常用的通用对象，例如数组对 象Array、日期对象Date、数学对象Math等
10.1.2 JavaScript,应用实例 1.在网页中使用 Javascript的方法 在网页中使用脚本的方法有三种: (1)使用 SCRIPT标记符插入脚本 方法是:把脚本标记符置于网 页上的HEAD部分或BODY部分,然后在其中加入脚本程序。 语法如下 <SCRIPT language="JavaScript", type="text/javascript 在此编写 Javascript代码。 /SCRIPT (2)直接添加脚本 (3)链接脚本文件
10.1.2 JavaScript应用实例 1．在网页中使用JavaScript的方法 在网页中使用脚本的方法有三种： （1）使用SCRIPT标记符插入脚本 方法是：把脚本标记符置于网 页上的HEAD部分或BODY部分，然后在其中加入脚本程序。 语法如下： （2）直接添加脚本 （3）链接脚本文件
圆102在网页中使用 DHTML 10.2.1CSS简介 1022 DHTML应用实例 1.利用 DHTML制作滚动字幕 滚动字幕是一种常用的网页效果,使用 MARQUEE标记符可以设计滚动字幕,利用 MARQUEE标记符中各种属性来控制滚动字幕的滚动 方式。 2.利用 DHTML制作动态折叠菜单
10.2 在网页中使用DHTML 10.2.1 CSS简介 10.2.2 DHTML应用实例 1．利用DHTML制作滚动字幕 滚 动 字 幕 是 一 种 常 用 的 网 页 效 果 ， 使 用 MARQUEE 标 记 符 可 以 设 计 滚 动 字 幕 ， 利 用 MARQUEE标记符中各种属性来控制滚动字幕的滚动 方式。 2．利用DHTML制作动态折叠菜单