第十三期:你所了解的javascript？

在介绍JavaScript之前，首先让我们来简单了解一下脚本语言。大家知道，HTML通常用于格式化和链接文本，各种编程语言通常用于向机器发出一系列复杂的指令，而脚本语言是介于HTML和C++、Java等编程语言之间的语言。脚本语言是一种简单的语言，其语法和规则没有编程语言严格和复杂。用C++、Java等编写的程序必须先经过编译，将源代码转换为二进制代码之后才可执行，而脚本语言是一种解释性的语言，其程序不需要事先编译，可以直接运行，只要使用合适的解释器来解释便可以执行；脚本语言由一些ASCII码组成，以文本形式存在。常用的脚本语言有JavaScript、VBScript等。

因为脚本语言是在客户端被解释执行的，所以我们通常用脚本语言来实现客户端动态网页。网站发展的初期，所有的程序都是在服务器端执行，然后再将执行结果发送到客户端。随着客户端计算机的功能越来越强大，CPU速度越来越快，如果将部分简单的操作交给客户端的计算机处理，就可以大大提高服务器的工作效率。这样网页脚本语言就应运而生了，因为这种脚本语言能够与一般的HTML语言交互使用。在读取网页的同时，脚本语言编写的小程序也被传输到客户机上，并在客户机上执行。

一、JavaScript简介

通过HTML标签的描述可以实现文字、表格、声音、图像、动画等信息的浏览，然而这只是一种静态信息资源的提供，缺少动态交互。JavaScript的出现，使得信息和用户之间不仅只是一种显示和浏览的关系，而且实现了一种实时的、动态的、可交互式的表达。从而使得基于CGI的静态HTML页面被可提供动态实时信息、并对客户操作进行反应的Web页面所取代。

JavaScript早期是由Netscape（网景）公司研发出来的一种在Netscape浏览器上执行的程序语言。它不仅包含了数组对象、数学对象，还包括一般语言所包含的操作数、控制流程等结构组件。用户可以利用它设计出交互式的网页内容，但这些网页不能单独执行，必须由浏览器或服务器执行。

开发JavaScript的最初动机是想要减轻服务器数据处理的负荷，能够完成如在网页上显示时间、动态广告、处理表单传送数据等工作。随着JavaScript所支持的功能日益增多，不少网页编制人员转而利用它来进行动态网页的设计。Microsoft公司所研发的IE网络浏览器早期版本是不支持JavaScript语言的，但在IE 4.0之后也开始全面支持JavaScript，这使得JavaScript成为两大浏览器的通用语言。

1. 什么是JavaScript

JavaScript是一种基于对象（Object）和事件驱动（Event Driven），并具有安全性能的脚本语言。使用它的目的是与HTML、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。它是通过嵌入在标准的HTML语言中实现的，它的出现弥补了HTML语言的缺陷。

2. JavaScript与Java的区别

很多人看到 Java 和 JavaScript 都有“Java”，就以为它们是同一样东西，实际上Java之与Javascript就好比Car（汽车）之于Carpet（地毯）。虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。下面对两种语言间的异同作如下比较：

1）基于对象和面向对象

　　Java是完全面向对象的语言，即使是开发简单的程序，也必须设计类和对象。　　JavaScript是基于对象的脚本语言，它虽然基于对象和事件驱动，但由于脚本语言的特性，在功能上与Java相比要差得多。

　　2）解释和编译

　　两种语言在其浏览器中执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。

　　3）强变量和弱变量

　　两种语言所采用的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中的变量是弱类型的，即变量在使用前不需作声明。

　　4）代码格式不一样

　　Java的格式与HTML无关，其代码以字节形式保存在独立的文档中。而JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。

　　5）嵌入方式不一样

　　在HTML文档中，通过不同的标签标识两种编程语言，JavaScript使用<script>...</script>标签，而Java使用<applet>...</applet>标签。

　　6）静态联编和动态联编

Java采用静态联编，即Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查。JavaScript采用动态联编，即JavaScript先编译，再在运行时对对象引用进行检查。

二、 JavaScript语言基础知识

1. JavaScript代码的加入

上节已经提到JavaScript嵌入在HTML文档中使用，那么，在HTML文档的什么地方插入JavaScript脚本呢？实际上，使用标签对<script></script>，你可以在 HTML 文档的任意地方插入 JavaScript，甚至在<html>之前插入也不成问题，多数情况下将其放于<head></head>中，因为一些代码可能需要在页面装载起始就开始运行。不过如果要在声明框架的网页中插入，就一定要在<frameset>之前插入，否则不会运行。脚本代码插入基本格式如下：

JavaScript代码；

……

</script>

标签对<script></script>指明其间放入的是脚本源代码；属性language 说明标签中使用的是何种脚本语言，这里是JavaScript语言，也可以不写，因为目前大部分浏览器都将其设为默认值。

另外，还可以把 JavaScript 代码写到一个单独的文件中（此文件通常应该用“.js”作扩展名），然后用下面所示的格式在HTML文档中调用。

……

</script>

其中，url属性指明JavaScrip文档的地址。这种方式非常适合多个网页调用同一个JavaScript程序的情况。

【例6-20】JavaScript简单实例（js.html）

<html>

<head>

<title>JavaScript实例</title>

</head>

<body>

document.write("<h2>JavaScript的第一个网页！</h2>");

document. close();

</script>

</body>

</html>

运行结果如图6-31所示。

图6-31 使用JavaScript的第一个网页

说明：

（1）document. write()：是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口。

（2）document. close()：是将输出关闭。

（3）分号“;”是 JavaScript语句结束符。

（4）JavaScript区分大小写。

2. 基本数据类型

JavaScript中有四种基本数据类型：数值型（整数和实数）、字符串型（用“”号括起来的字符或数值）、布尔型（用true或false表示）、空值。JavaScript的基本类型数据可以是常量，也可以是变量。JavaScript采用弱类型的形式，因而一个变量或常量不必在使用前声明，而是在使用或赋值时确定其数据类型。当然，用户也可以先声明该数据的类型，然后再进行赋值，也可以在声明变量的同时为其赋值。

3. 常量

和其它语言一样，常量的值在程序执行过程中不会发生改变。

1）整型常量

（1）十进制：例如，666。

（2）八进制：由“0”开始，例如，0222。

（3）十六进制：由“0x”开始，例如，0x33。

2）实型常量

例如，0.002。也可以使用科学计数法表示实型常量，即写成指数形式。例如，0.002可以写成2e-3或2E-3。

3）布尔常量

布尔常量只有两个值：true、false。不能用0表示假、用非0表示真。

4）字符型常量

使用单引号（'）括起来的一个字符或使用双引号（"）括起来的一个或若干个字符。例如，"3a6e"。转义字符用反斜杠（\）开头，如：\n表示换行，\r表示回车。

5）未定义（undefined）

变量定义后没有赋初值，变量的值便是undefined。

6）空值（null）

null表示什么也没有，如果试图引用没有定义的变量，则返回一个null值。

4. 变量

变量的值在程序执行过程中可以发生改变，其命名必须满足合法标识符要求，即以字母或下划线开头，只包含字母、数字和下划线，不能使用JavaScript中的关键字作为变量名。在JavaScript中，变量的定义方式有三种。

（1）用关键字var定义变量，但不赋初值，使用时再赋值。

例如：var sample；

此时变量sample的值是undefined

（2）用关键字var定义变量的同时给变量赋初值，这样就定义了变量的数据类型，使用时也可再赋其它类型的值。

例如：var sample=99;

（3）变量不事先定义，而是在使用时通过给变量赋值来定义变量同时确定变量类型。

例如：temp=true;

该语句定义变量temp，变量数据类型是布尔型。

和其它语言一样，JavaScript中有全局变量和局部变量。全局变量定义在所有函数体之外，其作用范围是整个文档；局部变量定义在函数体之内，作用范围是定义它的函数内部。

5. 运算符

JavaScript运算符按操作数个数可分为一元、二元、三元运算符，按类型可分为算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符。在运算时按优先级顺序进行，表6-1中按优先级从高到低对各种运算符进行了简单介绍。

除此之外，JavaScript里还有一些特殊运算符。

（1）字符串连接运算符“+”：该运算符可以将多个字符串连接在一起。

例如："Java"+"Script"的结果为"JavaScript"。

（2）delete：删除对象。

（3）typeof：返回一个可以标识类型的字符串。

（4）void：函数无返回值。

表6-1 JavaScript运算符

	运算符	运算符说明
括号	(x) [x]	中括号只用于指明数组的下标
求反自加、自减	-x	返回 x 的相反数
	!x	返回与 x (布尔值)相反的布尔值
	x++	x 值加 1，但仍返回原来的 x 值
	x--	x 值减 1，但仍返回原来的 x 值
	++x	x 值加 1，返回最新的 x 值
	--x	x 值减 1，返回最新的 x 值
乘、除	x*y	返回 x 乘以 y 的值
	x/y	返回 x 除以 y 的值
	x%y	返回 x 与 y 的模（x 除以y 的余数）
加、减	x+y	返回 x 加 y 的值
加、减	x-y	返回 x 减 y 的值
关系运算	x<y x<=y x>=y x>y	当符合条件时返回 true 值，否则返回 false 值
等于、不等于	x==y	当 x 等于 y 时返回 true 值，否则返回 false 值
等于、不等于	x!=y	当 x 不等于 y 时返回 true 值，否则返回 false 值
按位与	x&y	当两个数位同时为 1 时，返回的数据的当前数位为 1，其它情况都为 0
按位异或	x^y	两个数位中有且只有一个为 0 时，返回 1，否则返回 0
按位或	x\|y	两个数位中只要有一个为 1，则返回 1；当两个数位都为零时才返回零
逻辑与	x&&y	当 x 和 y 同时为 true 时返回 true，否则返回 false
逻辑或	x\|\|y	当 x 和 y 任意一个为 true 时返回 true，当两者同时为 false 时返回 false
条件	c?x:y	当条件 c 为 true 时返回 x 的值（执行 x 语句），否则返回 y 的值（执行 y 语句）
赋值、复合运算	x=y	把 y 的值赋给 x，返回所赋的值
赋值、复合运算	x+=y x-=y x*=y x/=y x%=y	x 与 y 相加/减/乘/除/求余，所得结果赋给 x，并返回 x 赋值后的值

6. 控制语句

和其它语言一样，JavaScript控制语句包括选择语句、循环语句、跳出语句。

1）选择语句

l if(条件判定)

…语句1（条件为true时）

else

…语句2（条件为false时）

l 嵌套的if……else结构

l switch(表达式)

{

case 常量1: 语句

break ;

case 常量2: 语句

break ;

…

default : 语句

}

2）循环语句

l do{

语句

}while(条件判断)

l while(条件判断) 语句

l for([初始表达式];[条件];[增量表达式])

语句

（3）跳出语句

l break语句：跳出并结束本层循环。

l continue语句：跳出并结束本层的本次循环，开始下一次循环。

7. 函数

函数是一个执行特定任务的过程，它是JavaScript中最基本的成员。使用函数前，必须先定义，然后再在脚本中调用。JavaScript中支持的函数分为两大类：一类是JavaScript预定义函数，另一类是用户自定义函数。

1）函数定义

函数定义语法格式：

function 函数名(参数集合)

{

函数体

return 表达式;

}

（1）函数由关键字function来定义，定义形式与其它语言类似。

（2）函数定义位置通常在文档的头部，以便当文档被载入时首先载入函数；否则，有可能文档正在被载入时，用户已经触发了一个事件而调用了一个还没有定义的函数，导致一个错误的产生。

（3）可使用arguments .Length来获得参数集合中参数的个数。

2）预定义函数

下面介绍几种常用的预定义函数。

（）1eval函数：对包含数字表达式的字符串求值。其语法格式如下所示。

eval(参数)

如果参数是数字表达式字符串，那么对该表达式求值；如果该参数代表一个或多个JavaScript语句，则执行这些语句；eval还可以把一个日期从一种格式转换为数值表达式或数字。

（2）Number和String函数：用来将一个对象转换为一个数字或字符串。其语法格式如下所示。

Number(对象)

String(对象)

（3）parseInt和parseFloat函数：用来将字符串参数转换为一个数值。其语法格式如下所示。

parseFloat(str)

parseInt(str[,radix])

parseFloat将字符串转换为一个浮点数。parseInt基于指定的基数radix或底数之上返回一个整数。例如，若基数为10则将其转化为十进制，为8则转化为八进制。

三、 JavaScript对象

JavaScript中的对象是对客观事物或事物之间关系的描述，对象可以是一段文字、一幅图片、一个表单（form），每个对象有它自己的属性、方法和事件。对象的属性是指该对象具有的特性，例如，图片的地址；对象的方法指该对象具有的行为，例如表单的“提交”(submit)；对象的事件指外界对该对象所作的动作，例如点击button产生的“单击事件”。JavaScript中可以使用以下几种对象：

（1）内置对象，例如：Date、Math、String。

（2）用户自定义的对象。

（3）由浏览器根据页面内容自动提供的对象。

（4）服务器上固有的对象。

在JavaScript中提供了几个对象处理的语句，例如，this（返回当前对象）、with（为一个或一组语句指定默认对象）、new（创建对象）等。但JavaScript没有提供继承、重载等面向对象语言所必须具有的功能，所以它只是基本面向对象的语言。

1. 创建对象

在JavaScript中创建一个新的对象，首先需定义一个类，然后再为该类创建一个实例。定义类用关键字“function”，格式如下所示。

function 类名(类中属性的值的集合)

{

属性定义、赋值

方法定义

}

创建对象使用关键字“new”，格式为：对象实例名=new 类名（参数表）；

例如：定义类person，它的属性包括name、age、sex、depart，则：

function person(name,age,sex,depart)

{

this.name=name;

this.age=age;

this.sex=sex;

this.depart=depart;

}

然后再创建该类对象sample，如下：

sample=new person("peter",22, "female"，"personnel department");

2. 引用对象属性

引用对象属性的语法格式为：对象名.属性名

3. 引用对象方法

引用对象方法的语法格式为：对象名.方法名

4. 删除对象

删除对象用delete运算符。例如，删除上面创建的对象sample，使用

delete sample;

5. 内置对象

下面介绍几种内置对象。

1）String对象

String对象即字符串对象，用于处理或格式化文本字符串，以及确定和定位子串。

（1）属性

length：保存字符串的长度。格式：字符串对象名.length；

例如：var str="helloworld";

则str.length的值为10。

（2）方法

charAt(position) ：返回该字符串第position位的字符。

indexOf(substring[，startpos])：返回字符串中第startpos位开始的第一个子串substring的位置，如果该子串存在，就返回它的位置，不存在返回-1。

例如：str.indexOf（"llo",1）; //结果为2

lastIndexOf(substring[，startpos]) ：跟 indexOf() 相似，不过是从startpos位开始从后边往前查找第一个substring出现的位置。

split(字符串分隔符集合) ：返回一个数组，该数组的值是按“字符串分隔符”从原字符串对象中分离开来的子串。

例如：str.split('o');

则返回的数组值是："hell"、"w"、"rld"。

substring(startpos[，endpos]) ：返回原字符串的子串，子串是原字符串从startpos位置到endpos位置的字符序列。如果没有指定endpos或指定的超过字符串长度，则子字符串一直取到原字符串尾；如果所指定的位置不能返回字符串，则返回空字符串。

toLowerCase() ：返回把原字符串所有大写字母都变成小写字母的字符串。

toUpperCase() ：返回把原字符串所有小写字母都变成大写字母的字符串。

2）Array对象

Array对象即数组对象，是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置。创建数组有两种方法：

arrName=new Array(element0,element1,…,elementN)

arrName=new Array(arrLength)

这里arrName既可以是存在的对象，也可以是一个新的对象。而element0,element1,…,elementN是数组元素的值，arrLength则是数组初始化的长度。

除了在创建数组时给它赋值以外，也可以直接通过数组名加下标的方法给数组元素赋值，例如：

arr=new Array(6);

arr[0]="sample"。

（1）属性

length ：返回数组的长度。

（2）方法

join(分隔符) 用法：返回一个字符串，该字符串把数组中的各个元素串起来，用分隔符置于元素与元素之间。

reverse() 用法：返回将原数组元素顺序反转后的新数组。

sort() 用法：返回排序后的新数组。

3）Math对象

Math对象即算术对象，提供常用的数学常量和数学函数。

例如：E 返回2.718281828...，PI返回3.1415926535...，abs(x) 返回 x 的绝对值，max(a, b) 返回 a, b 中较大的数，random() 返回大于 0 小于 1 的一个随机数等等。

4）Date对象

Date对象即日期对象，可以储存任意一个日期，从 0001 年到 9999 年，并且可以精确到毫秒数（1/1000 秒）。Date对象有许多方法来设置、提取和操作时间，类似于Java。

6.文档对象

文档对象是指在网页文档里划分出来的对象，在 JavaScript中文档对象主要有：window、document、location、navigator、screen、history 等。

1）navigator对象

navigator对象即浏览器对象，包含了当前使用的浏览器的版本信息。

（1）appName属性返回浏览器的名字。

（2）appVersion属性返回浏览器的版本。

（3）platform属性返回浏览器的操作系统平台。

（4）javaEnabled属性返回一个布尔值代表当前浏览器是否允许使用Java。

【例6-21】navigator对象使用（navigator.html）

<html>

<head>

<title>navigator对象使用</title>

document.write("浏览器是：" + navigator.appName+"<br>");

document.write("浏览器的版本是：" + navigator.appVersion+"<br>");

document.write("浏览器所处操作系统是：" + navigator.platform+"<br>");

if (document.javaEnabled==true)

document.write("你的浏览器允许使用Java");

else

document.write("你的浏览器不允许使用Java");

</script>

</head>

<body>

</body>

</html>

运行结果如图6-32所示。

图6-32 navigator对象使用

2）screen对象

screen对象即屏幕对象，包含了当前用户的屏幕设置信息。

（1）width属性返回屏幕的宽度，单位为像素。

（2）height属性返回屏幕的高度，单位为像素。

（3）colorDepth属性保存当前颜色设置，取值可为：-1（黑白）、8（256色）、16（增强色）、24/32（真彩色）。

3）window对象

window对象即窗口对象，它是所有对象的“父”对象，可以在JavaScript应用程序中创建多个窗口，而一个框架页面也是一个窗口。

（1）open(参数表)：该方法用来创建一个新的窗口，其中参数表提供有窗口的尺寸、内容以及是否有按钮条、地址框等属性。　　

（2）close()：该方法用来关闭一个窗口。其中，window.close()或self.close()用来关闭当前窗口；窗口对象名.close()用来关闭指定的窗口。

（3）alert(字符串)：该方法弹出一个只包含“确定”按钮的对话框，并显示“字符串”的内容，同时整个文档的读取和Script 的运行暂停，直到用户按下“确定”。

（4）confirm(字符串)：该方法弹出一个包含“确定”和“取消”按钮的对话框，并显示“字符串”的内容，同时整个文档的读取和Script 的运行暂停，等待用户的选择。如果用户按下“确定”，则返回 true ，如果按下“取消”，则返回 false。

（5）prompt(字符串[, 初始值])：该方法弹出一个包含“确认”、“取消”按钮和一个文本框的对话框，并显示“字符串”的内容，要求用户在文本框输入数据，同时整个文档的读取和Script 的运行暂停。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回 null 值。如果指定“初始值”，则文本框里将用初始值作为默认值。

（6）blur()和focus()：使窗口失去或得到焦点。

（7）scrollTo (x, y)：该方法使窗口滚动到指定的坐标。

【例6-22】window对象使用（window.html）

<html>

<head>

<title>window对象使用</title>

alert("window对象使用");

</script>

</head>

</html>

运行结果如图6-33所示。