• 沒有找到結果。

网页脚本语言——JavaScript

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 语句循环的例子显示结果

相關文件