通过本章学习,应该掌握以下内容:
1,JavaScript语言基础
2,在网页中插入 JavaScript脚本语言的方法
3,CSS属性
4,在网页中应用 DHTML技术
第 10章 JavaScript和 DHTML技术
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
( 3) JavaScript表达式
表达式是运算符和操作数的组合 。 表达式通过求值确定表达
式的值, 这个值是对操作数实施运算符所确定的运算后产生的结
果 。 有些运算符将数值赋予一个变量, 而另一些运算符则可以用
在其他表达式中 。
( 4) JavaScript语句
① 条件语句
在 JavaScript中提供了 if语句, if else语句以及 switch语句等三
种条件语句 。
if语句 是最基本的条件语句, 它的格式为:
if( 条件 )
语句段;
if else语句的格式为:
if( 条件 )
语句段 1;
else
语句段 2;
switch语句
格式如下:
switch( 条件 )
{casevalue1:语句段 1;
casevalue2,语句段 2;
casevalue3,语句段 3;
…
default,语句段 4; }
② 循环语句
循环语句用于在一定条件下重复执行某段代码。在
JavaScript中提供了多种循环语句:
for语句 格式如下:
for( 初始化;条件;增量 )
{
语句段;
}
while语句 是另一种基本的循环语句, 格式如下:
while( 条件 )
{
语句段 ;
}
dowhile语句 是 while语句的变体, 格式如下:
do
{
语句段 ;
}
while( 条件 )
break语句 提供无条件跳出循环结构或 switch语句的功能 。
continue语句 作用是终止当次循环, 跳转到循环的开始处继
续下一轮循环 。
break语句和 continue语句既可以单独使用, 也可以与语句标
号一起使用 。
( 5) JavaScript函数
函数是已命名的代码块, 代码块中的语句被作为一个整体引
用和执行 。 在使用函数之前, 必须先定义函数 。 函数定义通常放
在 HTML文档头中, 但也可以放在其他位置 。 但通常最好放在文
档头, 这样就可以确保先定义后使用 。 定义函数的格式如下:
function函数名 ( 参数 1,参数 2,..,)
{
语句段;
…
return 表达式;
}
函数名是调用函数时引用的名称, 参数是调用函
数时接收传入数值的变量名 。 大括号中的语句是函数
的执行语句, 当函数被调用时执行 。 如果需要函数返
回值, 可以使用 return语句, 需要返回的值应放在
return之后 。
2,使用 JavaScript内部对象
对象就是客观世界中存在的特定实体 。 在计算机世界中, 也
包含各种各样的对象 。 例如, 一个 Web页可以被看作一个对象,
它包含背景颜色, 前景颜色等特性, 同时包含打开, 关闭, 读写
等动作 。 因此可以说, 对象包含两个要素:
属性 用来描述对象特性的一组数据, 也就是若干变量;
方法 用来操作对象特性的若干动作, 也就是若干函数 。
通过访问或设置对象的属性, 并且调用对象的方法, 可以对
对象进行各种操作, 从而获得需要的功能 。
在 JavaScript中可以操作的对象通常包括两种类型:浏览
器对象和 JavaScript内部对象 。 浏览器对象是指文档对象模型规
定的对象, 例如 HTML元素对象, document对象, window对象
等; JavaScript内部对象包括一些常用的通用对象, 例如数组对
象 Array,日期对象 Date,数学对象 Math等 。
10.1.2 JavaScript应用实例
1,在网页中使用 JavaScript的方法
在网页中使用脚本的方法有三种:
( 1) 使用 SCRIPT标记符插入脚本
方法是:把脚本标记符 <SCRIPT></ SCRIPT>置于网
页上的 HEAD部分或 BODY部分, 然后在其中加入脚本程序 。
语法如下:
<SCRIPTlanguage="JavaScript",type="text/javascript">
<!--
在此编写 JavaScript代码 。
//-->
</ SCRIPT>
( 2) 直接添加脚本
( 3) 链接脚本文件
10.2 在网页中使用 DHTML
10.2.1 CSS简介
10.2.2 DHTML应用实例
1,利用 DHTML制作滚动字幕
滚 动 字 幕 是 一 种 常 用 的 网 页 效 果, 使用
MARQUEE 标 记 符 可 以 设 计 滚 动 字 幕, 利用
MARQUEE标记符中各种属性来控制滚动字幕的滚动
方式 。
2,利用 DHTML制作动态折叠菜单
1,JavaScript语言基础
2,在网页中插入 JavaScript脚本语言的方法
3,CSS属性
4,在网页中应用 DHTML技术
第 10章 JavaScript和 DHTML技术
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
( 3) JavaScript表达式
表达式是运算符和操作数的组合 。 表达式通过求值确定表达
式的值, 这个值是对操作数实施运算符所确定的运算后产生的结
果 。 有些运算符将数值赋予一个变量, 而另一些运算符则可以用
在其他表达式中 。
( 4) JavaScript语句
① 条件语句
在 JavaScript中提供了 if语句, if else语句以及 switch语句等三
种条件语句 。
if语句 是最基本的条件语句, 它的格式为:
if( 条件 )
语句段;
if else语句的格式为:
if( 条件 )
语句段 1;
else
语句段 2;
switch语句
格式如下:
switch( 条件 )
{casevalue1:语句段 1;
casevalue2,语句段 2;
casevalue3,语句段 3;
…
default,语句段 4; }
② 循环语句
循环语句用于在一定条件下重复执行某段代码。在
JavaScript中提供了多种循环语句:
for语句 格式如下:
for( 初始化;条件;增量 )
{
语句段;
}
while语句 是另一种基本的循环语句, 格式如下:
while( 条件 )
{
语句段 ;
}
dowhile语句 是 while语句的变体, 格式如下:
do
{
语句段 ;
}
while( 条件 )
break语句 提供无条件跳出循环结构或 switch语句的功能 。
continue语句 作用是终止当次循环, 跳转到循环的开始处继
续下一轮循环 。
break语句和 continue语句既可以单独使用, 也可以与语句标
号一起使用 。
( 5) JavaScript函数
函数是已命名的代码块, 代码块中的语句被作为一个整体引
用和执行 。 在使用函数之前, 必须先定义函数 。 函数定义通常放
在 HTML文档头中, 但也可以放在其他位置 。 但通常最好放在文
档头, 这样就可以确保先定义后使用 。 定义函数的格式如下:
function函数名 ( 参数 1,参数 2,..,)
{
语句段;
…
return 表达式;
}
函数名是调用函数时引用的名称, 参数是调用函
数时接收传入数值的变量名 。 大括号中的语句是函数
的执行语句, 当函数被调用时执行 。 如果需要函数返
回值, 可以使用 return语句, 需要返回的值应放在
return之后 。
2,使用 JavaScript内部对象
对象就是客观世界中存在的特定实体 。 在计算机世界中, 也
包含各种各样的对象 。 例如, 一个 Web页可以被看作一个对象,
它包含背景颜色, 前景颜色等特性, 同时包含打开, 关闭, 读写
等动作 。 因此可以说, 对象包含两个要素:
属性 用来描述对象特性的一组数据, 也就是若干变量;
方法 用来操作对象特性的若干动作, 也就是若干函数 。
通过访问或设置对象的属性, 并且调用对象的方法, 可以对
对象进行各种操作, 从而获得需要的功能 。
在 JavaScript中可以操作的对象通常包括两种类型:浏览
器对象和 JavaScript内部对象 。 浏览器对象是指文档对象模型规
定的对象, 例如 HTML元素对象, document对象, window对象
等; JavaScript内部对象包括一些常用的通用对象, 例如数组对
象 Array,日期对象 Date,数学对象 Math等 。
10.1.2 JavaScript应用实例
1,在网页中使用 JavaScript的方法
在网页中使用脚本的方法有三种:
( 1) 使用 SCRIPT标记符插入脚本
方法是:把脚本标记符 <SCRIPT></ SCRIPT>置于网
页上的 HEAD部分或 BODY部分, 然后在其中加入脚本程序 。
语法如下:
<SCRIPTlanguage="JavaScript",type="text/javascript">
<!--
在此编写 JavaScript代码 。
//-->
</ SCRIPT>
( 2) 直接添加脚本
( 3) 链接脚本文件
10.2 在网页中使用 DHTML
10.2.1 CSS简介
10.2.2 DHTML应用实例
1,利用 DHTML制作滚动字幕
滚 动 字 幕 是 一 种 常 用 的 网 页 效 果, 使用
MARQUEE 标 记 符 可 以 设 计 滚 动 字 幕, 利用
MARQUEE标记符中各种属性来控制滚动字幕的滚动
方式 。
2,利用 DHTML制作动态折叠菜单