8.3.1 JavaScript 的基础知识 1.什么是脚本语言
脚本语言是一种简单的描述性语言,并针对 HTML 语言不能很好地解决动态交互这个缺
点而引入的,是对 HTML 语言最重要的一个补充,且能对 Web 页面中的元素进行控制。脚本
JavaScript 是基于 Netscape 浏览器的,类似于 Java 编程语言的脚本语言,并且是一种基于 对象的,面向 Internet 或 Intranet 的编程语言,使用它可以开发关于 Internet 或 Intranet 客户端 和服务器的应用程序,也可以方便地嵌入到计算机文件中。由于 JavaScript 是第一个在 WWW 上使用的脚本语言,因而一度是最流行的 Web 站点脚本语言,用它可以方便地编排 HTML 网 页,同时还可以控制动态 HTML。
VBScript 是 Microsoft 公司在 Visual Basic 编程语言的基础上设计的,由于其在企业界广 为流行,且与 Microsoft 公司的其他产品有着密切的联系,VBScript 的使用范围越来越广,逐 渐成为一种主要的脚本语言。
下面将着重介绍 JavaScript 脚本语言的语法基础,掌握了这些语法基础,再加上对动态网 页对象模型的了解,就可制作出更加精彩的网页。
2.JavaScript 的产生与发展
JavaScript 语言起初并不叫此名称,它的早期是 Netscape 的开发者们称之为“Mocha”的 语言,开始在网上进行 测试(由软件的多个用户在其实际的使用环境下进行的测试叫 测试)
时,名字改为 LiveScript,Sun 公司推出 Java 之后,Netscape 引进了 Sun 的有关概念,在其发 行 Netscape 2.0 测试版时才称其为 JavaScript。它不仅支持 Java 的 Applet 小程序,同时向 Web 页的制作者提供一种嵌入 HTML 文档进行编程的,基于对象的 Script(脚本)程序设计语言,
采用的许多结构与 Java 相似。
支持 JavaScript 的 Navigator 2.0 的网络浏览器能够解释并执行嵌在 HTML 中的用 JavaScript 语言书写的“程序”。JavaScript 具有采用 CGI/PERL 编写的 Script 的能力,其优点 是可以引用主机资源,响应位于服务器 Web 页中相应语法元素要完成的功能,而又不与主机 服务器进行交互会话。
嵌入 HTML 文档中的 JavaScript 源代码,实际上是作为 HTML 文档 Web 页的一部分存在 的。在用户使用 Netscape 2.x 浏览器浏览有 JavaScript 源代码的 HTML 文档页时,由浏览器本 身对该 HTML 文档进行分析、识别、解释并执行用 JavaScript 编写的源代码(用户可以使用查 看 HTML 源代码的功能看到 JavaScript 源代码的存在)。
3.JavaScript 编程特点
JavaScript 的编程工作复杂与否,和 HTML 文档所提供的功能大小密切相关,用下面的简 单的程序代码来介绍它的编程特点。
<script language=javascript >
document.write("hello, JavaScript!")
</script>
</body>
</html>
显示结果如图 8-18 所示。
图 8-18 一个 JavaScript 的例子
从上面的程序代码中可以发现,JavaScript 源代码被嵌在一个 HTML 文档中,而且可以出 现在文档头部(HEAD 块)和文档体部(BODY 块)。SCRIPT 标记的一般格式为:
<script language=javascript >
<!--
JavaScript 语句串……
-->
</script>
为了使老版本的浏览器(即 Navigator 2.0 版以前的浏览器)避开不识别的 JavaScript 语句 串,用 JavaScript 编写的源代码可以用注释括起来,即使用 HTML 的注释标记<!--…-->,而 Navigator 2.x 可以识别放在注释行中的 JavaScript 源代码。
说明:SCRIPT 标记可声明一个脚本程序,language 属性声明该脚本是一个用 JavaScript 语言编写的脚本。在<script>和</script>之间的任何内容都视为脚本语句,会被浏览器解释执行。
在 JavaScript 脚本中,用“//”作为行的注释标注。
8.3.2 JavaScript 语言 1.JavaScript 数据类型
在 JavaScript 中,数据类型的使用是十分宽松的,程序员在声明变量时可以不指定该变量 的数据类型,JavaScript 会自动按照用户给该变量赋的初值来确定适当的数据类型。这一点和 Java 或 C++是截然不同的。JavaScript 有以下几种基本的数据类型。
(1)数字类型。如 34,3.14 表示为十进制数;
034 表示为八进制数,用十进制表示其值为 28;
0x34 表示为十六进制数,用十进制表示其值为 52。
(2)字符串类型。如:"Hello!"。
(3)逻辑值类型。取值仅可能是“真”或“假”,用 True 或 False 来表示。
(4)空值。当定义一个变量并且没有赋初值时,则该变量为空值。如 var ch1,此时 ch1
就为空值,并且不属于任何一种数据类型。 变量的数据类型;JavaScript 对字母的大小写是敏感的。如 var my;和 var My;JavaScript 认 为这是两个不同的变量。
SUM+=i; //求累加和 P*=i;
}
document.write(SUM,P);
//-->
5.JavaScript 运算符和表达式
JavaScript 拥有一般编程语言(如C语言)的运算符,包括算术运算符、比较运算符等,
下面将逐一介绍。
(1)算术运算符。用于连接运算表达式的各种算术运算符如表 8-7 所示。
表 8-7 算术运算符
运算符 运算符定义 举例 说明
+ 加法符号 X=A+B
- 减法符号 X=A-B
* 乘法符号 X=A*B
/ 除法符号 X=A+B
% 取模符号 X=A%B X 等于 A 除以 B 所得的余数
++ 加 1 A++ A 的内容加 1
-- 减 1 A-- A 的内容减 1
(2)位操作运算符。位操作运算符对两个表达式相同位置上的位进行位对位运算。
JavaScript 支持的位操作运算符如表 8-8 所示。
表 8-8 位运算符
运算符 运算符定义 举例 说明
~ 按位求反 X=~A
<< 左移 X=B<<A A 为移动次数,左边移入 0
>> 右移 X=B>>A A 为移动次数,右边移入 0
>>> 无符号右移 X=B>>>A A 为移动次数,右边移入符号位
& 位“与” X=B & A
∧ 位“异或” X=B∧A
| 位“或” X=B | A
(3)复合赋值运算符。复合赋值运算符执行的是一个表达式的运算。在 JavaScript 中,
合法的复合赋值运算符如表 8-9 所示。
表 8-9 复合赋值运算符
运算符 运算符定义 举例 说明
+= 加 X+=A X=X+A
-= 减 X-=A X=X-A
*= 乘 X*=A X=X*A
/= 除 X/=A X=X/A
续表
运算符 运算符定义 举例 说明
%= 模运算 X%=A X=X%A
<<= 左移 X<<=A X=X<<A
>>= 右移 X>>=A X=X>>A
>>>= 无符号右移 X>>>=A X=X>>>A
&= 位“与” X&=A X=X&A
∧= 位“异或” X∧= A X=X∧A
|= 位“或” X|=A X=X|A
(4)比较运算符。比较运算符用于比较两个对象之间的相互关系,返回值为 True 和 False。
各种比较运算符如表 8-10 所示。
表 8-10 比较运算符
运算符 运算符定义 举例 说明
== 等于 A==B A 等于 B 时为 True
> 大于 A>B A 大于 B 时为 True
< 小于 A<B A 小于 B 时为 True
!= 不等于 A!=B A 不等于 B 时为 True
>= 大于等于 A>=B A 大于等于 B 时为 True
<= 小于等于 A<=B A 小于等于 B 时为 True
?: 条件选择 E?A:B E 为 True 时选 A,否则选 B
(5)逻辑运算符。逻辑运算符返回 True 和 False,其主要作用是连接条件表达式,表示 各条件间的逻辑关系。各种逻辑运算符如表 8-11 所示。
表 8-11 逻辑运算符
运算符 运算符定义 举例 说明
&& 逻辑“与” A && B A 与 B 同时为 True 时,结果为 True
! 逻辑“非” !A 如 A 原值为 True,结果则为 False
|| 逻辑“或” A || B A 与 B 有一个取值为 True 时,结果为 True
(6)运算符的优先级(如表 8-12 所示)。
表 8-12 运算符的优先级(由高到低)
运算符 说明
.、[]、() 字段访问、数组下标及函数调用
++、--、~、!、typeof、new、void、delete 一元运算符、返回数据类型、对象创建、未定义值
*、/、% 乘法、除法、取模
+、-、+ 加法、减法、字符串连接
<<、>>、>>> 移位
续表
运算符 说明
<<=、>>= 小于、小于等于、大于、大于等于
==、!== 等于、不等于
& 按位与
^ 按位异或
| 按位或
&& 逻辑“与”
|| 逻辑“或”
?: 条件
= 赋值
(7)表达式。JavaScript 表达式可以用来计算数值,也可以用来连接字符串和进行逻辑比 较。JavaScript 表达式可以分为以下三类。
(1)算术表达式。算术表达式用来计算一个数值,如 2*4.5/3。
(2)字符串表达式。字符串表达式可以连接两个字符串,例如:"hello" + "world! ",该 表达式的计算结果为"helloworld! "。
(3)逻辑表达式。逻辑表达式计算结果为一个布尔型常量(True 或 False)。例如:12>24,
其返回值为 False。
6.脚本语言的注释
JavaScript 允许加一些注释。有两种注释方法:单行注释和多行注释。其中单行注释:以
“//”开始,以同一行的最后一个字符作为结束符;多行注释:以“/*”开始,以“*/”结束,
符号“*/”可放在同一行或不同的行中。
下面的程序代码中使用这两种注释方法:
<Script language = "JavaScript">
/*这是多行注释的第一行 这是多行注释的第二行*/
k=24*7; //这是一个单行注释的例子
</Script>
从上面的程序代码可以清楚地看出两种注释的使用方法,并且也可以看出 JavaScript 的语 法大部分是与 C++语言相通的。
7.JavaScript 程序流程控制
JavaScript 的脚本语言同 C++语言是类似的,提供了相同的程序流程控制语句。这些语句 分别是 if、switch、for、do 和 while 语句。
(1)条件语句。
(1)if 语句。If 语句是一个条件判断语句,它根据一定的条件执行相应的语句块,定义 的语法格式如下:
if (expr) {
code_block1
code_block1 和 code_block2 是由多个语句组成的语句块。当 expr 值为 Ture 时,执行 code_block1,
当 expr 值为 False 时,执行 code_block2。另外有一点要说明的是,if 语句是可以嵌套的,即 在 if 语句的模块中,还可以包含其他的 if 语句。例如:
(2)switch 语句。switch 语句测试一个表达式并有条件地执行一段语句,其语法格式如下:
switch (表达式) {
case 值 1:code_block1 break;
case 值 2:code_block2 break;
case 值 3:code_block3 break;
…
default: code_blockn }
<title>例 2-3 显示</title>
<script language=javascript>
<!--
document.write("switch 语句测试---");
switch (14%3) { case 0: sth="您好";
break;
case 1: sth="大家好";
break;
default: sth="世界好";
break;
}
document.write(sth);
//-->
</script>
</head>
<body>
</body>
</html>
图 8-19 switch 语句测试
从图 8-19 可以看出,执行的是 default 后的语句,因为表达式(14%3)的运行结果是 2。
如果表达式改为 15%3,则浏览器中显示结果为“switch 语句测试---您好”。另外需要强调说 明,在每一个 case 语句的值后都要加冒号。
(2)循环语句。有许多时候,需要把一个语句块重复执行多次,每次执行仅改变部分参 数的值,这时可以使用循环语句,直到某一个条件不成立为止。
1)for 语句。for 语句用来产生一段程序循环,其语法格式如下:
for ( init; test; incre) {
code_block }
这里 init 和 incre 是两个语句,test 是一个条件表达式。init 语句只执行一次,用来初始化 循环变量。test 表达式在每次循环后都要被计算一次,如果其运算值为 False,则循环中止并立 即继续执行 for 语句之后的语句,否则执行 code_block 语句块,循环完成后执行一次 incre 语 句块。使用 break 语句可用来从循环中退出。for 语句一般用在已知循环次数的场合,而且 init、
test、incre 三个语句之间要用分号隔开。
在代码清单 w8-19.htm 使用 for 语句,计算从数字 1 到 10 的累加和,其在浏览器中的运 行结果如图 8-20 所示。
代码清单 w8-19.htm
<script language=javascript>
var sum=0;
for(n=1;n<11;n++) {
sum=sum+n
document.write (n," SUM=",sum,"<br>");
}
</script>
图 8-20 for 语句循环的例子显示结果
图 8-20 for 语句循环的例子显示结果