javascript基础知识总结

Bertha 。 2022-06-06 05:07 509阅读 0赞

## 1.1  什么是脚本语言 ##

在学习JavaScript之前，首先来了解一下脚本语言（Scripting Language）。脚本语言就是一种简单的程序，它由一些ASCII码组成，并可以用“记事本”等文本编辑器直接对其进行开发。

有些程序，如C、C++、Java等则必须先经过编译，将源代码转换为二进制代码之后才可执行。而像Perl、JavaScript、VBScript等则不需要事先编译，只要利用合适的解释器便可以执行代码。

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

## 1.2  JavaScript简介 ##

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

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

从结构来说，JavaScript是一种基于对象和事件驱动的安全脚本语言。使用它的目的是与HTML超文本标记语言和Java脚本语言一起实现在一个Web页面中链接多个对象，起到与Web客户的交互作用，从而可以开发客户端的应用程序等。

在上面已经提到JavaScript只能在HTML脚本中才能得以执行。那么，如何在HTML语言中植入一个JavaScript脚本呢？以下是一个JavaScript脚本结构示例：

……

</script>

Language指定了一个JavaScript语言。但现在也可以不用写该属性，因为目前大部分浏览器都将其设为默认值。一段JavaScript代码可以放置于HTML中的任意部位，但多数情况下将其放于<HEAD>…</HEAD>区段中。因为一些代码可能需要在页面装载起始就开始运行。但如果愿意，放置在任何位置都是可以的，甚至可以在HTML外部装入一个JavaScript程序。如下例所示：

……

</script>

这里的url就是一个外部的JavaScript程序，在Netscape中只承认以后缀名为.js的程序，而IE对这个要求就比较宽松，只要它符合MIME格式即可。如果有很多的页面需要该段程序，只需编写一个外部程序就可以在多个页面中进行调用。当一句代码结束后应在末尾添加一个分号，表示一个完整的句子，也可以将其省略，这样并不影响程序的运行。在程序中的//和<！\--……\-->标记则是一段注释的开始。Example.htm是JavaScript的一个简单实例。代码如下：

<html>

<head>

<title>这是一个JavaScrip程序的例子！</title>

</head>

<body>

document.write("<h1>欢迎学习JavaScript！</h1>");

</script>

</body>

</html>

Example.htm的运行结果如图1-1所示。

图1-1  JavaScript实例

## 1.3  JavaScript与Java的关系 ##

常常会有人问到JavaScript与Java有什么区别，甚至有人误认为JavaScript就是Java。虽然JavaScript与Java确实有一定的联系，但它们并不像我们所想象的那样联系紧密。甚至可以肯定地说它们有很大的区别。JavaScript与Java的区别主要表现在以下几个方面：

q JavaScript与Java是由不同的公司开发的不同产品。JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能。Java是由Sun Microsystem公司开发的一种面向对象的程序设计语言，类似于C++，它需要多种编译器和支持文件才能运行。

q JavaScript是基于对象的，它是一种脚本语言。它基于对象和事件驱动，因而它本身提供了非常丰富的内部对象供设计人员使用。而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。

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

## 1.4  JavaScript的基本构成 ##

JavaScript脚本语言同其他语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。JavaScript提供了5种基本的数据类型用来处理数字和文字，而变量则提供存放信息的地方，表达式则可以完成较复杂的信息处理。

### 1.4.1  基本数据类型 ###

在JavaScript中的基本数据类型可分为5种。

q 数值型：整数和浮点数统称为数值。所谓数值就是由数字及正负号所组成的数据类型，例如85或3.1415926等。

q 字符串型：是由多个单一的字符所组成的数据类型。在JavaScript中，用“"”或“'”括起来字符或数值，如"您好"、"学习'JavaScript' "等。

q 逻辑（布尔）型：用true或false来表示。

q 空（null）值：它是JavaScript的保留值。因为JavaScript的大小写敏感性，因此它不同于如Null或NULL等其他变量。需要特别注意的是，null既不等于“0”，也不等于“空字符串”。

q 未定义（undefined）值：该值的顶级属性是未定义的，它也是一个保留值。在两种情况下可能得到一个未定义的值，一种是根本不存在的对象，另一种就是虽然已经声明，但却没有赋值。

JavaScript基本类型中的数据可以是常量，也可以是变量。由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必作声明，而是在使用或赋值时确定其数据的类型。用户可以先声明该数据的类型，然后进行赋值。

### 1.4.2  变量 ###

变量（Variable）又称为标识符，是对应到某个值的符号。因为它所对应的值可能随程序的进行而变化，所以称为变量。变量的名称必须以大、小写的英文字母或下划线开头，但不能以数字开头，后面可以接数字或字母。由于JavaScript区分大小写，所以A和a将被视为两个不同的变量。

**1．变量定义**

在JavaScript声明一个变量时，可以使用以下方式实现：

var Up,Down,Left,Right;

也可以直接给它赋值，如下：

x=3;

**2．变量的作用范围**

当在一个函数之外定义一个变量，那这个变量就叫做全局变量。全局变量可用于当前所有的文档。在函数内部定义的变量则叫做局部变量，它只作用于函数内部。用户可以通过指定窗口或框架的名字调用全局变量。例如，当一个框架文档中定义了名为phoneNumber的全局变量时，用户在子框架中就可以使用parent.phoneNumber引用该变量。

### 1.4.3  常量 ###

在JavaScript中用常量（Literals）来描述数值。常量是一些固定不变的值，不像变量那样随着程序的进行而变化，所谓常量就是保持不变的量。常量大致可分为以下几种：

**1．整型常量**

JavaScript的常量通常又称字面常量，它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。

**2．数组常量**

一个数组常量是零或更多表达式的列表，它包含在一对方括号内。当使用数组常量来创建一个数组时，它的元素和长度即由所指定的值进行初始化。下面来看一个具体的例子，该例题有3个元素，其长度为3。

apple=\["fruit","China","vitamin"\]

不必在数组常量中指定所有的元素。如果在一行中输入两个逗号，它会自动为没有指定的元素留出空间，如下例所示：

God=\["Belial",,"Angel"\]

该数组包含两个元素值和一个空元素，但要注意的是，如果把逗号放到数组的最后，那它将会被忽略不计。

**3．布尔常量**

布尔类型只有两种值：true和false。它主要用来说明一种状态或标志，以说明操作流程。JavaScript与C++是不一样的，C++可以用1或0表示其状态，而JavaScript只能用true或false表示其状态。

**4．浮点数常量**

一些浮点数组的例子就像后面给出的例子一样，如3.1415926、\-3.1E12、1e12和2E\-12等。指数部分是在一个整数后跟一个“e”或“E”，它可以是一个有符号的数。一个浮点数组必须包含一个数字、一个小数点或“e（E）”。

**5．整数**

一个整数可以是十进制、十六进制和八进制数。一个十进制常量由一串数字序列组成，它的第一个数字不能为0；如果第一个数字为0，则表示它是一个八进制数；若为0x，则表示它为一个十六进    制数。

**6．字符串常量**

字符串常量是零或若干封装在 “"”或“'”内的字符。如"ball"、'ball'、"6682"、"a line"等。可以在字符串常量中调用任何“字符对象”，而JavaScript会自动将字符串常量转换为一个临时字符常量。

**7．特殊字符**

同C语言一样，JavaScript中同样有些是以反斜杠“/”开头的不可显示的特殊字符，通常称为控制字符。

### 1.4.4  表达式 ###

表达式由常量、变量或运算符所组成，并生成一个单一值。如果一个语句返回一个值，那么它就是一个表达式。该值可能是一个数值、字符串或一个逻辑值。表达式有两种类型：一种是给变量赋一个值，另一种仅是一个简单值。例如，表达式3+4简单赋值为7，3.14也是一个表达式；复杂一点的表达式如x=7，即给变量x赋值为7。JavaScript的表达式有如下几种类型：

q 数学表达式：计算值为数字，如8.45。

q 字符串表达式：计算值为一个字符串，如"computer"。

q 逻辑表达式：计算值为true或false。

### 1.4.5  运算符 ###

JavaScript具有一元和二元两种运算符。二元运算符有两个操作对象，如3\*4；一元运算符只有一个操作对象，如i++或\++i。另外，JavaScript还有三元运算符，而它则具有3个操作对象。

**1．赋值运算符**

赋值运算符是将右边的操作数赋予左边的操作对象，如x=y是将y的值赋给x。赋值运算符还具有简写形式，见表1-1。

表1-1  赋值运算符

<table> 
 <tbody> 
 <tr> 
 <td> 运算符缩写形式 </td> 
 <td> 含 &nbsp;&nbsp;&nbsp;义 </td> 
 </tr> 
 <tr> 
 <td> x+=y </td> 
 <td> x=x+y </td> 
 </tr> 
 </tbody> 
</table>

续表

<table> 
 <tbody> 
 <tr> 
 <td> 运算符缩写形式 </td> 
 <td> 含 &nbsp;&nbsp;&nbsp;义 </td> 
 </tr> 
 <tr> 
 <td> x-=y </td> 
 <td> x=x-y </td> 
 </tr> 
 <tr> 
 <td> x*=y </td> 
 <td> x=x*y </td> 
 </tr> 
 <tr> 
 <td> x/=y </td> 
 <td> x=x/y </td> 
 </tr> 
 <tr> 
 <td> x%=y </td> 
 <td> x=x%y </td> 
 </tr> 
 <tr> 
 <td> x&lt;&lt;=y </td> 
 <td> x=x&lt;&lt;y </td> 
 </tr> 
 <tr> 
 <td> x&gt;&gt;=y </td> 
 <td> x=x&gt;&gt;y </td> 
 </tr> 
 <tr> 
 <td> x&gt;&gt;&gt;=y </td> 
 <td> x=x&gt;&gt;&gt;y </td> 
 </tr> 
 <tr> 
 <td> x&amp;=y </td> 
 <td> x=x&amp;y </td> 
 </tr> 
 <tr> 
 <td> x^=y </td> 
 <td> x=x^y </td> 
 </tr> 
 <tr> 
 <td> x|=y </td> 
 <td> x=x|y </td> 
 </tr> 
 </tbody> 
</table>

**2．比较运算符**

比较运算符比较它的操作对象并返回一个逻辑值。操作对象既可以是数字也可以是字符串值。字符串的比较使用Unicode值按照字母顺序进行，见表1-2。

表1-2  比较运算符

<table> 
 <tbody> 
 <tr> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 <td> 描 &nbsp;&nbsp;&nbsp;述 </td> 
 <td> 示 &nbsp;&nbsp;&nbsp;例 </td> 
 </tr> 
 <tr> 
 <td> 等号（==） </td> 
 <td> 如果操作对象相等返回true，如果两个操作对象不为同一类型，JavaScript将尝试转换它们为一个适当的类型 </td> 
 <td> 5==var1 "5"==var1 5=='5' </td> 
 </tr> 
 <tr> 
 <td> 不等于（!=） </td> 
 <td> 两个操作对象不相等，返回true </td> 
 <td> var1!=8 var2!="5" </td> 
 </tr> 
 <tr> 
 <td> 绝对相等（===） </td> 
 <td> 如果操作对象相等并且类型相等，返回true </td> 
 <td> 5===var1 </td> 
 </tr> 
 <tr> 
 <td> 绝对不等（!==） </td> 
 <td> 如果操作对象不相等并且/或不是同一类型，返回true </td> 
 <td> var1!=="5" 5!=='5' </td> 
 </tr> 
 <tr> 
 <td> 大于（&gt;） </td> 
 <td> 如果左边的操作对象大于右边的操作对象，返回true </td> 
 <td> var2&gt;var1 </td> 
 </tr> 
 <tr> 
 <td> 大于或等于（&gt;=） </td> 
 <td> 如果左边的操作对象大于或等于右边的操作对象，返回true </td> 
 <td> var2&gt;=var1 var1&gt;=5 </td> 
 </tr> 
 <tr> 
 <td> 小于（&lt;） </td> 
 <td> 如果左边的操作对象小于右边的操作对象，返回true </td> 
 <td> var1&lt;var2 </td> 
 </tr> 
 <tr> 
 <td> 小于或等于（&lt;=） </td> 
 <td> 如果左边的操作对象小于或等于右边的操作对象，返回true </td> 
 <td> var1&lt;=var2 var2&lt;=7 </td> 
 </tr> 
 </tbody> 
</table>

**3．算术运算符**

算术运算符将数字值（常量或变量）作为操作对象并返回一个单一数字值。算术运算符见表1-3。

表1-3  算术运算符

<table> 
 <tbody> 
 <tr> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 <td> 描 &nbsp;&nbsp;&nbsp;述 </td> 
 <td> 实 &nbsp;&nbsp;&nbsp;例 </td> 
 </tr> 
 <tr> 
 <td> %（取模） </td> 
 <td> 二进制运算符，返回整数除法的余数 </td> 
 <td> 15%4返回3 </td> 
 </tr> 
 <tr> 
 <td> ++（增量） </td> 
 <td> 一元运算符，操作对象加1；如果是前置++i，返回增量后的值，如是后置i++，返回增量前的值 </td> 
 <td> 如i是7，++i返回8，而i++则返回7 </td> 
 </tr> 
 <tr> 
 <td> --（减量） </td> 
 <td> 一元运算符，操作对象减1；如果是前置--i，返回减量后的值，如是后置i--，返回减量前的值 </td> 
 <td> 如i是7，--i返回6，而i--则返 &nbsp;回7 </td> 
 </tr> 
 <tr> 
 <td> -（取反） </td> 
 <td> 一元运算符，返回操作数的反数 </td> 
 <td> 如i是7，那么-i返回-7 </td> 
 </tr> 
 </tbody> 
</table>

**4．按位运算符**

按位运算符对操作数进行二进制数的位层运算，在比较两个值之前先将它们转化为二进制数，见表1-4。

表1-4  按位运算符

<table> 
 <tbody> 
 <tr> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 <td> 用 &nbsp;&nbsp;&nbsp;法 </td> 
 <td> 描 &nbsp;&nbsp;&nbsp;述 </td> 
 </tr> 
 <tr> 
 <td> 按位与 </td> 
 <td> a&amp;b </td> 
 <td> 当两个操作数的每个对应位都为1时返回1 </td> 
 </tr> 
 <tr> 
 <td> 按位或 </td> 
 <td> a|b </td> 
 <td> 当两个操作数的对应位任意一个为1时返回1 </td> 
 </tr> 
 <tr> 
 <td> 按位异或 </td> 
 <td> a^b </td> 
 <td> 当两个操作数的对应位其中一个不为1且不全为1时返回1 </td> 
 </tr> 
 <tr> 
 <td> 按位非 </td> 
 <td> ~a </td> 
 <td> 将操作数按位反转 </td> 
 </tr> 
 <tr> 
 <td> 左移 </td> 
 <td> a&lt;&lt;b </td> 
 <td> 将二进制数a左移b位，右边补零 </td> 
 </tr> 
 <tr> 
 <td> 带符号位右移 </td> 
 <td> a&gt;&gt;b </td> 
 <td> 将二进制数a右移b位，丢弃移动位 </td> 
 </tr> 
 <tr> 
 <td> 首位0填充右移 </td> 
 <td> a&gt;&gt;&gt;b </td> 
 <td> 将二进制数a右移b位，丢弃移动位，并左边补零 </td> 
 </tr> 
 </tbody> 
</table>

下面先来看一下按位逻辑运算符是用什么方法进行工作的：先将操作数转化为二进制数并由0或1来表示，然后再将第一个操作数与第二个操作数之间按对应位进行操作，最后对运算符按对应位进行运算，结果按位配对。下面是一些按位运算的例子：

13&11结果为9（1101&1011=1001）

13|11结果为15（1101|1011=1111）

13^11结果为6（1111^1001=0110）

按位移位运算符包括两个运算对象：第一个是被移位的量，第二个指定第一个对象被移动的位的数目。移位运算符将操作数转换为二进制数，并返回同左边类型相同的结果，见表1-5。

表1-5  移位运算符

<table> 
 <tbody> 
 <tr> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 <td> 描 &nbsp;&nbsp;&nbsp;述 </td> 
 <td> 实 &nbsp;&nbsp;&nbsp;例 </td> 
 </tr> 
 <tr> 
 <td> &lt;&lt;（左移） </td> 
 <td> 运算符按指定的数目按位左移第一个操作数，左移多余的位被丢弃，右边补零 </td> 
 <td> 11&lt;&lt;2结果为44，因为1011左移2位将变为101100，十进制为44 </td> 
 </tr> 
 </tbody> 
</table>

续表

<table> 
 <tbody> 
 <tr> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 <td> 描 &nbsp;&nbsp;&nbsp;述 </td> 
 <td> 实 &nbsp;&nbsp;&nbsp;例 </td> 
 </tr> 
 <tr> 
 <td> &gt;&gt;（带符号位右移） </td> 
 <td> 运算符按指定的数目按位左移第一个操作数，多余位被丢弃，最左边的位移到左边 </td> 
 <td> 11&gt;&gt;2结果为2，因为1011右移2位变为10，十进制数为2。同样地，-11&gt;&gt;2结果为-3，因为符号位被保留了 </td> 
 </tr> 
 <tr> 
 <td> &gt;&gt;&gt;（零填充右移） </td> 
 <td> 运算符按指定的数目按位左移第一个操作数，多余位被丢弃，从左边补入0 </td> 
 <td> 13&gt;&gt;&gt;2结果为4，因为1101右移2位为11，十进制数为3 </td> 
 </tr> 
 </tbody> 
</table>

**5．逻辑运算符**

通常逻辑运算符返回一个布尔值，但是“&&”和“||”运算符还可以返回其中一个指定的操作数的值，见表1-6。

表1-6  逻辑运算符

<table> 
 <tbody> 
 <tr> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 <td> 用 &nbsp;&nbsp;&nbsp;法 </td> 
 <td> 描 &nbsp;&nbsp;&nbsp;述 </td> 
 </tr> 
 <tr> 
 <td> &amp;&amp; </td> 
 <td> 表达式1&amp;&amp;表达式2 </td> 
 <td> 逻辑与，如果它能转换为false，返回表达式1，否则返回表达式2；如果两个表达式都为真，&amp;&amp;返回true，否则返回false </td> 
 </tr> 
 <tr> 
 <td> || </td> 
 <td> 表达式1||表达式2 </td> 
 <td> 逻辑或，如果它能转换为true，返回表达式1，否则返回表达式2；如果两个表达式都为真，||返回true，否则返回false </td> 
 </tr> 
 <tr> 
 <td> ! </td> 
 <td> !表达式 </td> 
 <td> 逻辑非，如果表达式能转换为true，将返回false，否则返回true </td> 
 </tr> 
 </tbody> 
</table>

**6．字符串运算符**

除了比较运算符外，用于字符串值的还有连结运算符，其将两个字符串值连结在一起。例如"好好"+"学习"就返回"好好学习"。此外，还可以使用简写的方式（\+=）来进行表达。

**7．特殊运算符**

JavaScript特殊运算符包括以下几种类型：条件运算符、逗号运算符、delete、new、this、typeof、void。

当同一个命令行中存在多个运算符时，用户必须考虑运算符的优先级。优先级指的是复合运算进行计算时的先后顺序，对于所有的二元运算都是从左到右进行计算，当然也可以用圆括号来忽略优先级。表1-7给出了运算符及运算符类型。

表1-7  运算符及运算符类型

<table> 
 <tbody> 
 <tr> 
 <td> 运算符类型 </td> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 </tr> 
 <tr> 
 <td> 逗号 </td> 
 <td> , </td> 
 </tr> 
 <tr> 
 <td> 赋值 </td> 
 <td> =、+=、-=、*=、/=、%=、&lt;&lt;=、&gt;&gt;=、&gt;&gt;&gt;=、&amp;=、^=、|= </td> 
 </tr> 
 <tr> 
 <td> 条件 </td> 
 <td> ?: </td> 
 </tr> 
 <tr> 
 <td> 逻辑或 </td> 
 <td> || </td> 
 </tr> 
 <tr> 
 <td> 逻辑与 </td> 
 <td> &amp;&amp; </td> 
 </tr> 
 <tr> 
 <td> 按位或 </td> 
 <td> | </td> 
 </tr> 
 </tbody> 
</table>

续表

<table> 
 <tbody> 
 <tr> 
 <td> 运算符类型 </td> 
 <td> 运 &nbsp;算 &nbsp;符 </td> 
 </tr> 
 <tr> 
 <td> 按位异或 </td> 
 <td> ^ </td> 
 </tr> 
 <tr> 
 <td> 按位与 </td> 
 <td> &amp; </td> 
 </tr> 
 <tr> 
 <td> 等于/不等于 </td> 
 <td> ==、!= </td> 
 </tr> 
 <tr> 
 <td> 比较 </td> 
 <td> &lt; &lt;=、&gt; &gt;= </td> 
 </tr> 
 <tr> 
 <td> 按位移位 </td> 
 <td> &lt;&lt;、&gt;&gt;、&gt;&gt;&gt; </td> 
 </tr> 
 <tr> 
 <td> 加/减 </td> 
 <td> +、- </td> 
 </tr> 
 <tr> 
 <td> 乘/除 </td> 
 <td> *、/、% </td> 
 </tr> 
 <tr> 
 <td> 非/增减量 </td> 
 <td> !、~、-、+、++、--、typeof、void、delete </td> 
 </tr> 
 <tr> 
 <td> 调用 </td> 
 <td> ( ) </td> 
 </tr> 
 <tr> 
 <td> 创建 </td> 
 <td> new </td> 
 </tr> 
 <tr> 
 <td> 成员 </td> 
 <td> . [] </td> 
 </tr> 
 </tbody> 
</table>

## 1.5  JavaScript的基本语法 ##

JavaScript的语法同其他编程语言类似，主要包括条件选择、循环、跳出3大类。下面将介绍构成这些语法的常用语句。

### 1.5.1  if条件选择语句 ###

if…else语句，如果条件为true，则执行if段语句；若为false，则执行else段语句。用法如下：

if(条件判定)

……语句1（条件为true时）;

else

……语句2（条件为false时）;

if…else语句条件的结果值可以是true或false的JavaScript表达式。表达式可以是任何可执行的JavaScript语句，还可以在任意层被嵌套。具体实例如下面的IF.htm所示：

function checkData ()

if (document.form1.three.value.length==3)

alert("OK!有效！");

else

alert("请输入三个字符，“"+document.form1.three.value+"”无效！");

return false

</script>

请输入字符：<input type="text"name="three"onChange="checkData()">

</center>

</form>

在IF.htm文件的文本框内输入3个字符，单击鼠标左键，就会弹出一个警告框，如图1-2所示。否则就会弹出无效对话框，如图1-3所示。

图1-2  有效的输入                                    图1-3  无效的输入

### 1.5.2  switch选择语句 ###

switch语句允许程序给表达式求值，并用case标记来匹配表达式可能的值。如果匹配成立，程序将执行相应的语句。具体用法如下：

switch(表达式)

case:语句

break;

case:语句

break;

……

default:语句

下面来看一下switch语句执行的流程。如果case的值等于表达式的值，则执行它相应的语句；否则继续执行，直到遇到一个break语句，或者switch语句结束。这就是说如果没有使用break语句，那么将会出现多个case一起被执行的情况。如果没有case等于表达式的值，则跳转到default；如果在default也没有的情况下，则跳转到最后一步，继续执行switch代码末尾的语句。下面就来看一个switch语句的例题。

for(i=0;i<6;i++)

switch(i)

case 0:

document.write("i is 0. ");

break;

case 1:

document.write("i is 1. ");

break;

case 2:

document.write("i is 2. ");

break;

case 3:

document.write("I is 3. ");

break;

default:

document.write("i is greater than 3.");

</script>

在上面的实例中，switch语句共执行了5次，每执行一次case就会换行。该语句一共执行了5次，但只有4个case，所以default被执行了两次，如图1-4所示。

图1-4  switch选择语句

### 1.5.3  do…while语句 ###

do…while将对语句进行循环执行，直到条件为false为止。用法如下：

语句

while(条件判断)

首先执行一个语句，然后重复循环执行该语句，直到条件表达式为false。下面来看一个do…while语句的实例。如下：

var i=0;

i+=1;

document.write (i+" ");

while (i<10);

</script>

上面这个例子实现了从1~10的输出，do…while与while循环语句实现的结果很相似，所以一般不用do…while语句，而使用while循环语句。程序的执行结果如图1-5所示。

图1-5  do…while语句

### 1.5.4  while循环语句 ###

while语句只执行一个语句，直到指定的条件为false为止。其用法如下：

while(条件)

语句

该语句与 do…while语句不同的是，它将在语句开始执行时检查条件是否为true，如果条件为false，它将不会执行下面的语句。下面就来看一个while循环语句的例子。

var loop=0;

while (loop<5)

document.write("<h1> while循环语句</h1>");

loop++;

</script>

在上例中将字体循环5次之后，退出程序执行，如图1-6所示。

图1-6  while循环语句

### 1.5.5  for循环语句 ###

for语句执行语句循环，直到条件为false为止。用法如下：

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

语句

for语句的初始表达式由一个表达式构成，该表达式只在执行循环前被执行一次。条件是一个布尔表达式，如果值为true，则下面的语句被执行；若为false，则循环结束。增量表达式在每次循环完后执行。语句是条件的值为true时要执行的语句，它可以是复合语句。下面就来看一个for语句的例子。

for(i=0;i<10;i++)

document.write("<h2>for循环语句例题演示</h2>");

</script>

在上例中将字体循环10次之后，退出程序执行，如图1-7所示。从这个例子中可以看出，for循环语句与while循环语句很相似，都是完成语句的循环。

图1-7  for循环语句

###    1.5.6  break语句与continue语句 ###

如何在执行程序时，让程序停止在我们想要停止的地方？如果要想继续执行，又该如何解决？下面就来看一下解决这个问题的break语句和continue语句。

**1．break语句**

用break语句来中止一个循环，如switch语句。当在一个while、do…while、for或switch语句中，break就会立即终止最里层的循环或将控制权交给下面的语句执行。下面来看一个具体的实例。

function BreakTest()

var i=1;

while(i<10)

document.write (i);

if(i==5)

break;

i++;

return("<h1>"+i+"</h1>");

document.write(BreakTest());

</script>

上面的例子显示的是从1~10，而在中间使用了break之后，就中断了正常的循环。因为i等于5，所以在输出到5之后就改为执行break语句，终止当前的循环，最后输出为标题1的i值，如图1-8      所示。

图1-8  break语句

**2．continue语句**

continue语句用于重新开始一个while、do…while或for语句。其用法如下：

continue \[label\];

其中\[label\]是可选的，它是指定断点处语句的标签。

执行continue语句会停止当前的循环，并从循环的开始处继续程序流程。这样对不同的循环类型有不同的影响：while和do…while循环检查它们的条件，如果条件为true，则再次执行循环；for循环执行它们的递增表达式，如果测试表达式为true，则再次执行循环。下面是一个关于continue的例子。

function skip()

var s=" ",i=0;

while(i<10)

i++;

document.write (""+i+"");

if(i==5)

continue;

s+=i;

document.write (" ");

return(""+s+"");

document.write (skip());

</script>

从图1-9中可以看出第二行比第一行少了一个5，这就是continue与break的不同之处。break是在到达指定的条件之后就不再继续执行程序，而continue则是在到达指定的条件之后继续执行下面的程序，直到完成为止。第一行中的10个数字是逐个输出变量i的值，而第二行是在执行了continue之后跳过了5，再输出字符串s的值，所以比第一行少一个字符5。

图1-9  continue语句

## 1.6  JavaScript的函数调用 ##

函数是JavaScript中最基本的建构成员。函数是一个JavaScript过程，执行一个特定的任务。使用一个函数前，必须对它进行定义，然后在脚本中对它进行调用。

###    1.6.1  函数的定义与调用 ###

函数的定义是由一系列的JavaScript关键字所组成的，主要包括函数的名称、函数的参数、函数的JavaScript语句。参数包含在由逗号分开的圆括号内，JavaScript语句包含在大括号内，该语句还可以调用另外的一个或多个函数。

通常可以在文档的头部定义函数，以便当文档被装载时函数首先载入；否则，有可能在文档正在被载入时，用户已经触发了一个事件而调用了一个还没有定义的函数，导致一个错误的产生。而一个函数的原型应该像下面的语句一样：

function square(number)

return number \* number;

调用函数就是使用当前文档中所定义的函数，或者调用另一个窗口或框架定义的函数。调用时需要用指定的参数来执行一个特殊的行为。一个函数还可以进行递归，也就是说自已调用自己。

### 1.6.2  全局变量与局部变量 ###

JavaScript变量可以在使用之前先进行声明，并对其赋值。通过使用Var关键字对变量作声明，而对变量作声明的最大好处就是能及时地发现程序中的错误。因为JavaScript采用的是动态编译，而动态编译是不易发现代码中的错误的，特别是在变量命名这方面。

对于变量还有另一个重要的属性，那就是变量的作用域。在JavaScript中同样有全局变量和局部变量之分。全局变量是定义在函数之外的所有变量，其作用范围是整个函数。而局部变量是定义在函数体之内的，所以只对其所在的函数体有效。

### 1.6.3  可变参数的函数 ###

函数的arguments是返回一个数组，它包含了传递给当前执行函数的每个参数。如arguments\[i\]或functionName.arguments\[i\]。在这里的i是一个序列数，从零开始，因此传递给函数的第一个参数应当是arguments\[0\]，arguments的整个长度由arguments.length来指定。

通过arguments的属性，函数可以很好地处理可变数量的参数。当不知道有多少个参数将传递给函数时，arguments就会发挥它的功能，可以用arguments.length决定实际传递给函数的参数数目，然后用arguments数组尝试每个参数。

### 1.6.4  预定义函数 ###

在JavaScript中共包含以下几个预定义函数。

** **

**1．eval函数**

eval函数对作为数字表达式的一个字符串进行求值。其语法如下：

eval(expr)

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

**2．isFinite函数**

isFinite函数是计算一个参数以确定它是否是一个有限数值。其语法如下：

isFinite(number)

此处的number是一个数值。如果参数为非数字、正无穷数或负无穷数，该函数返回false，否则返回true。

**3．isNaN函数**

isNaN函数是计算一个参数以确定它是否为NaN（非数字）。其语法如下：

isNaN(testValue)

此处的testValue是想要计算的值。若结果为NaN，则返回true，否则为false。

**4．parseInt和parseFloat函数**

这两个parse函数将字符串参数转换为一个数值。其语法如下：

parseFloat(str)

parseInt(str\[,radix\])

parseFloat分析它的字符串参数str，并尝试将其转换为一个浮点数，如果它处理的字符不是符号（\+或\-）、数字、十进制小数点或指数，那么返回值到该位置停止，而忽略后面所有的字符；如果第一个字符不能转换为一个数值，那它将返回NaN。

parseInt分析它的第一个参数str，并基于指定的基数radix或底数之上返回一个整数。例如，若基数为10则将其转化为十进制，为8则转化为八进制，为16则转化为十六进制。如果基数省略或它与首字符相矛盾时，JavaScript假定基数是基于字符串的第一个字符，当第一个字符不能转换为基于基数的数字时，它将返回NaN。

**5．Number和String函数**

Number和String函数是将一个对象转换为一个数字或字符串。其语法如下：

Number(objRef)

String(objRef)

此处的objRef是一个对象的引用。下面的例子将一个Date对象转换成为一个可读的字符串。

D=new Date (430054663215)

x=String(D)

**6．escape和unescape函数**

escape和unescape函数是将字符串进行编码或解码。其语法如下：

escape(string)

unescape(string)

escape函数将字符串转换为基于ISO Latin字符集的十六进制ASCII码。这个函数不与任何其他对象关联。但它实际上是JavaScript语言的一个固有部分，对于字母、数字以及字符将返回它们本身，而对于符号则返回它们的ASCII码，其形式为%xxx。例如语句document.write(escape(Hi!"))的返回结果为Hi%21。

unescape函数是返回一个基于其ASCII码值的字符，即对其进行解码。

## 1.7  JavaScript的对象 ##

JavaScript是基于对象的简单程序。对象由JavaScript的变量或其他对象的属性、方法所组成的集合。方法是作为某个对象成员的函数，属性是作为对象成员的一个值、数组或对象的形式。下面就先来了解一下对象和它的属性。

### 1.7.1  对象的基本概述 ###

在JavaScript中，对象是对客观事物或事物之间关系的描述。JavaScript中可以使用以下几种对象：

q JavaScript内置对象，如Date、Math及String。

q 用户自定义的对象。

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

q 服务器上固有的对象。

JavaScript中的对象由属性和方法两个基本元素构成。属性成员是对象的数据，方法成员是对数据的操作。在JavaScript中还提供了几个对象处理的语句，例如this、for…in、with和new。

### 1.7.2  对象属性 ###

一个JavaScript对象具有各种各样的属性。可以用下面方法来访问一个对象的属性：

objectName.propertyName

需要注意的是，对象名和属性名都对大小写很敏感。用户可以通过给属性赋值来定义一个属性。例如，假设有一个对象名为Food，可用如下的方法来访问其属性：

Food.make="KFC";

Food.producing area="China";

Food.year=2005;

数组是用单一的变量名关联数值的一个序列。在JavaScript中，属性和数组是密切相关的。事实上，它们具有不同的界面和相同的数据结构，因此也可以像下面所给出的方法一样来访问Food对象的    属性。

Food\["make"\]="KFC";

Food\["producing area"\]="China";

Food\["year"\]=2005;

这类数组是一个关联数组，因为每个索引元素都通过一个字符串值关联。为了举例说明它是如何工作的，下面的函数显示对象的属性，并把对象和对象名作为参数传递给函数。

function show\_props(obj, obj\_name)

var result=" ";

for(var i in obj)

result+=obj\_name+"."+i+"="+obj\[i\]+"\\n";

return result;

如果函数调用show\_props(Food,"Food")，将返回下面的结果：

Food.make=KFC;

Food.producing area=China;

Food.year=2005;

### 1.7.3  创建对象 ###

从JavaScript 1.2开始，就可以用对象初始化程序创建对象。另外，用户也可以首先创建一个构造函数，并用new运算符来创建该对象的实例。

**1．对象初始化程序**

除了用构造函数来创建对象外，还可以用对象初始化程序来创建对象。对象初始化程序技术是从C++中引用来的。它的用法如下：

objectName=\{property1:value1,property2:value2,...,propertyN:valueN\}

这里objectName是新对象的名字。每个property是一个标识符，可能是一个名字、数字或字符串直接量。每一个value是赋予属性property值的表达式，objectName和赋值均为可选项。下面的例子创建了3个属性的对象myBenz。注意，属性engine本身是具有它自己的两个属性对象。

myBenz=\{color:"silvery white",wheels:4,engine:\{cylinders:4,size:3.0\}\}

**2．使用构造函数**

除了上面所说的用对象初始化程序来创建对象外，还可以用构造函数来创建对象。创建一个函数来指定对象的名字、属性和方法来定义对象类。假设需要创建的对象类为car，它具有的属性包括make、model、year和color，可以按照以下方法来实现：

function car(make,model,year)

this.make=make;

this.model=model;

this.year=year;

现在就可以创建一个对象mycar，如下：

mycar=new car("Benz","S600",2000);

用户还可以给先前定义的对象添加一个属性，如mycar.color="silvery white"，它并不会影响其他的同类对象。

**3．索引对象属性**

在JavaScript中，对象也是一个数组。用户可以按名称来引用一个对象的属性和方法，也可以按其数组下标索引来引用。如果某文档有两个表单，其中第二个表单名为myForm。下面的方法是等价的：

document.myForm;

document.forms\[1\];

document.forms\["myForm"\];

**4．为对象类定义属性**

可以用prototype属性在先前定义的对象类中加入一个属性，它可以被所有指定的对象类所共享。下面的代码为car类所有的对象添加一个color属性，并为car1的color属性赋值。

car.prototype.color=null;

car1.color="black";

**5．定义方法**

方法是对象的集合，可以像定义标准函数一样定义一个方法。方法就是赋给某个对象的一个函数，还可以在对象构造函数中包含方法定义来定义对象类的方法。例如，下面的例子：

function displayCar()

var result="A Beautiful"+this.year+" "+this.make+" "+this.model;

pretty\_print(result);

对于前面定义car的对象类，就可以如下来调用car对象类中每个对象的displayCar方法：

car1.displayCar()

car2.displayCar()

**6．使用对象引用**

JavaScript有一个特殊的关键字this，用它可以在一个方法中来引用当前的对象。当其用于form属性时，this关键字引用当前对象的父系表单。如下例，当用户按下按钮时，text对象内文本框内容将以其父系表单的名字myForm来代替原值Benz。

Form name:<input type="text" name="text1" value="Benz">

<input name="button1" type="button" value="Show Form Name"

onClick="this.form.text1.value=this.form.name">

</form>

**7．删除对象**

若想删除一个对象，可以用delete运算符来删除。如下例所示：

myobj=new Number();

delete myobj;

### 1.7.4  使用对象 ###

本节就来讲述一下JavaScript的对象并解释如何来使用它们。通过本节的学习将会对对象有更加深入的了解。

**1．关键对象**

window对象是所有对象的“父”对象，可以在JavaScript应用程序中创建多个窗口。frame对象由框架文档中的FRAME标记所定义，frame对象同window对象具有相同的属性和方法，所不同的是它们的显示方式不同。下面列举了window对象一些很有用的方法。

q open和close：打开和关闭浏览器窗口，可以指定窗口的尺寸、内容以及是否有按钮条、地址框等属性。

q alert：显示一个警告对话框。

q confirm：显示一个有OK和Cancel按钮的确认对话框。

q prompt：显示一个输入值文本域的提示对话框。

q blur和focus：在窗口中移去或得到一个焦点。

q scrollTo：卷动窗口到指定的坐标。

q setInterval：在每个指定时间段对一个表达式赋值或调用一个函数。

q setTimeout：在指定的一段时间后对一个表达式赋值或调用一个函数。

在每一页都有一个document对象。因为它有write和writeln两个方法产生HTML，因此它也是一个最有用的对象之一。document对象是文档页Anchor、Applet、Area、Form、Image、Layer、Link和Plugin对象的父对象。而在文档内的每一个表单都会产生一个Form对象，又因为一个文档可以包含多个表单，因此Form对象被存储到一个叫forms的数组中，第一个表单为forms\[0\]，第二个为forms\[1\]，依此类推。如下面给出的例子就可以来引用文档内第一个表单的第一个元素。

document.forms\[0\].elements\[0\]

location对象具有基于当前URL的属性，例如hostname属性是当前文档服务器和域名。它有两个方法：一种是reload强制窗口重载当前文档；另一种是replace 从当前历史记录装载指定的URL。

而history对象则包含了客户曾经访问过的URL列表，可以用current、next previous属性访问当前、下页、前页的历史记录，还可以用history数组访问别的历史记录值。也可以用go方法来重定向客户到任何历史记录，例如下面的代码装载客户倒数第二个历史记录。

history.go(-2)

在navigator对象中包含了浏览器的版本信息，如appName属性指定浏览器的名字，appVersion属性指定浏览器的版本。navigator有两个方法：一是javaEnabled，指定Java是否有效；二是preference，可以用一个签名的脚本获取或设置各种用户参数。

**2．JavaScript映射及HTML布局**

JavaScript对象属性值是基于HTML文档的内容，可以称为映射（reflection），因为属性值映射到了HTML中。为了更好地理解JavaScript映射，就需要了解浏览器是如何进行页面布局的。通常浏览器是从HTML文件的顶行开始往下读入并执行其语句，并顺序将其显示到屏幕上。因为有这个“向下”的过程，仅当读到它时JavaScript才对其映射。例如，只有当定义了一个表单后，JavaScript才将表单元素视为其对象，否则将会出错。

同样地，一旦页面布局已经发生，设置属性并不会影响它本来的值或外观。在document属性章节中，我们用了一个关于文档的标题的例子，但是却不能更改文档的标题，如果在JavaScript代码中写入以下内容：

document.title="Document属性"

那么就会得到一个错误信息。然而也有例外，也可以动态地改变表单元素的值。另外，用事件处理器也可以在布局完成后改变少数的其他属性，如document.bgColor。

**3．document对象**

document对象是JavaScript的基本对象之一，因此一个HTML文档中大多数都是它的属性。下面就来看一个关于document属性的实例。

document.myform.Button1.value=document.title

上面这个例子是在页面中出现一个按钮，当用鼠标单击之后，按钮上的字就会变成文档的标题。而document.title的意思就是获取文档的标题，并将值“Document属性”赋予按钮的value属性中去。

**4．write方法**

文档的write方法显示输出信息，在脚本中可以做所有在普通HTML不能完成的工作，例如可以有条件地显示正文或使用变量。因此write方法是最常用的JavaScript方法之一。还可以用字符串的连结运算符将几个字符串连结为一个。

<head>

function bar()

document.write("<hr>");

function output(headLevel,headText)

document.write("<H", headLevel, ">", headText, "</H",headLevel, ">");

</script>

</head>

<body>

bar();

output(1,"用JavaScript产生动态HTML");

document.write("<hr>");

</script>

</body>

上面这个例题演示的是使用JavaScript的write方法来实现动态的HTML，并在文本的上下方各加一条水平线，如图1-10所示。

图1-10  write方法

### 1.7.5  其他内部对象 ###

**1．Array对象**

JavaScript可以使用预定义的Array对象及其方法提供对创建任何数据类型的数组的支持。数组是一套数值的序列，它由一个名字和索引所组成。创建数组有两种方法来定义一个数组。具体如下：

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

arrayObjectName=new Array(arrayLength)

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

赋值及引用可以使用以下方法对数组进行赋值：

emp\[0\]="apple"

也可以在创建数组时给它赋值，如下：

emp=new Array(apple,orange,banana)

所有的数组元素第一个索引都是从0开始的，引用上面的第一个元素应当使用以下的格式：

emp\[0\]

**2．Boolean对象**

Boolean对象是Boolean数据类型的包装器。每当Boolean数据类型转换为Boolean对象时，JavaScript都隐含地使用Boolean对象。可以用下面的语法来创建一个Boolean对象：

booleanObjectName=new Boolean(value)

不要将Boolean的原始值和Boolean对象的true和false值相混淆。可选的value参数是新对象的初始Boolean值。如果该值省略，或者为false、undefined、null、NaN以及空字符串，则该Boolean对象的初始值为false；否则，初始值为true。例如：

var b=new Boolean(false);

if (b)

**3．Date对象**

JavaScript没有时间数据类，但可以用Date对象及其方法来取得日期和时间。Date对象有许多方法来设置、提取和操作时间，它没有任何属性。JavaScript处理时间的方法类似于Java。Date对象的范围为相对于1970年1月1日的前后100000000天。创建一个Date对象的方法如下：

dateObjectName=new Date(\[parameters\])

dateObjectName是创建的Date对象名，它可以是一个新对象或已存在对象的属性，parameters可以是空白或者用字符串描述。

**4．Function对象**

预定义的Function对象指定一个JavaScript字符串码，它可以像函数一样进行编译。其用法如下：

functionObjectName=new Function(\[arg1,arg2,...argn\],functionBody)

functionObjectName是一个变量名或一个已存在的对象属性。functionBody是包含调用该函数时被执行的JavaScript代码块的字符串。下面的代码将一个函数赋予变量setBGColor，该函数设置了当前文档的背景色。

var setbgColor=new Function("document.bgColor='antiquewhite' ")

**5．Math对象**

预定义的Math对象具有数学常量和函数的属性和方法。同样地，标准的数学函数也是Math对象的方法。与别的对象不同，不能自已创建一个Math对象，所有的Math对象都是预定义的，可以通过以下方法来使用多个的数学常量和方法。

with(Math)

a=PI\*r\*r;

y=r\*sin(theta);

x=r\*cos(theta);

**6．Number对象**

Number对象代表数值数据类型和提供数值常数的对象。Number对象最主要的用途是将其属性集中到一个对象中，以及使数字能够通过toString方法转换为字符串。

**7．String对象**

String对象可用于处理或格式化文本字符串，以及确定和定位字符串中的子字符串。不要将它同字符串常量相混淆。用户可以在一个字符串常量中调用任何String对象方法，JavaScript自动将字符串常量转换为一个临时的String对象并调用其方法，然后丢弃该临时的String对象。用户也可以在一个字符串常量中使用String.length属性。