第 11 章 JavaScript 基础

第11章 JavaScript基础

第11章 JavaScript基础 11.1 概述 11.2 JavaScript基础 11.3 变量、数据类型和表达式 11.4 控制语句 11.5 函数 11.6 对象 11.7 错误捕获和处理 11.8 内部JavaScript和外部JavaScript 11.9 注释

11.1 JavaScript概述 在第一章里面我们已经知道，Ajax的关键组件之一就是JavaScript语言。在Ajax出现之前，JavaScript一直被程序员看作是“玩具语言”，它能做的事情就是，让你的鼠标周围围绕了很多的小星星，标题栏里面出现跑马灯效果，点击某个对象的时候出现爆炸效果，……等等。因为当时JavaScript仅仅使用在浏览器端，而浏览器端不能仅仅通过JavaScript就与服务器端通信，于是JavaScript一直默默无闻的做丑小鸭。但是，当Google使用JavaScript使客户端与服务器端异步通信获得了成功后，这个丑小鸭才越来越多的获得了人们的目光和赞誉。这一切还是必须归功于IE5带来的XMLHttpRequest。

11.1 JavaScript概述 首先，JavaScript不是Java！虽然它们的名字听起来有些像，但它们之间完全没什么联系，它们的共同点也微乎其微。JavaScript是由网景公司开发人员Brendan Eich发明的，最初名称是Mocha，后来更名为LiveScript，最后确定名称为JavaScript。1995年网景公司第一次在浏览器（Netscape 2.0）中引入这个语言以来，这个名称一直与Java混淆在一起。后来，微软也推出了自己的JavaScript，叫做Jscript，最初Jscript只能运行在IE上，到目前为止，这两者之间几乎没有区别了。当然，我们在书写的时候，尽量避免使用“Jscript”名称，因为很多浏览器并不知道这个名字。

11.2.1 构建JavaScript编程环境 JavaScript程序是一个文本文件，可以用任意文本编辑器（如记事本）直接编辑，到本书出版时，市面上仍没有一个可以像在Visual Studio中编辑C#那样方便的编辑器来编辑JavaScript。但是仍然有不少的好工具可供我们使用，工欲善其事必先利其器，优秀的IDE可以使程序员减少大量的工作量，编者在这里推荐使用免费的Aptana（http://www.Aptana.com）。另外诸如Intellij、NetBeans、Eclipse、EditPlus等均可使用。在确定了编辑工具后，我们还要创建调试环境，IE和

11.2.1 构建JavaScript编程环境 FireFox下都有JavaScript调试器，我们这里推荐使用IE8和FireFox+FireBug。IE8下自带了开发人员工具，我们可以在菜单工具 -开发人员工具（F12）找到。FireBug是FireFox下的一个插件工具，可以到Mozilla网站上免费下载，安装完成后，可在菜单查看 -FireBug（F12）找到。两个工具均可设置断点后逐行调试，并且可查看变量值的变化、DOM信息、JavaScript错误等信息。建议将IE8菜单工具 -Internet选项 -高级将“禁用脚本调试”取消。由于IE系列和FireFox类浏览器在JavaScript使用中，有很多地方是不一样的，所以建议开发者两者都进行安装。

11.2.1 构建JavaScript编程环境 编者的经验是安装IE8（具有兼容IE7的功能）和FireFox，另外安装一个绿色版的IE6进行调试。建议编写的所有程序尽量在多种版本浏览器下进行测试。现在有很多软件企业生产了一些多版本兼容浏览器，由于编者没有进行过详细测试，在这里不多做介绍，有兴趣的读者可以自己进行测试、评估。

11.2.2 入门示例 我们先来看一个简单的示例，在这个示例中，我们构建了一个HTML页，其中有一个按钮，文字是“弹出提示信息”，当用户点击按钮时，弹出一个消息框。例11.1 alertMsg.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例11.1 弹出提示信息</title> <script type="text/javascript"> //在这里创建了一个alertMsg函数 function alertMsg(){ //调用alert方法弹出提示信息 alert("按钮被点击了"); //注意“;”不能省略 } </script> </head>

11.2.2 入门示例 <body> <input type="button" value="弹出提示信息" onclick="alertMsg()"/> </body> </html> 将上述代码保存后，用浏览器直接打开时，默认安全设置会组织JavaScript在本地执行，浏览器工具栏下方会出现提示栏（图11.1），提示“为了有利于保护安全性，Internet Explorer已限制此网页运行……”信息，可以使用鼠标左键点击后，允许阻止内容（图11.2）。在IE或FireFox中点击按钮后，均会弹出提示信息“按钮被点击了”，如图11.3和图11.4所示。在后面的叙述中，若浏览器返回结果都一致，我们不再二者都列出。

11.2.2 入门示例 图11.1 IE阻止JavaScript执行图11.2 允许阻止的内容

11.2.2 入门示例 图11.3 在IE中显示图11.4 在FireFox中显示

11.2.2 入门示例 从上面的例子我们可以看出，JavaScript是以代码块的方式内嵌在HTML代码中的，在浏览器中被执行并得到最终结果。<script>标记可以省略language=:”javascript”属性，浏览器默认识别为JavaScript。 function alertMsg(){ //调用alert方法弹出提示信息 alert(“按钮被单击了"); //注意“;”不能省略 } 上面的代码块定义了一个名称为“alertMsg”，参数为空的函数，这个函数只有一个功能，就是弹出一个消息框，内容为“按钮被点击了”。函数使用大括号“{”和“}”将所有该函数代码包围。

11.2.2 入门示例 在<script></script>块中，可定义多个function来实现复杂应用，同时也可以将实现特定的功能模块的JavaScript封装为.js文件，更加方面的进行调用，后面我们会详细讲到。 <input type="button" value="弹出提示信息" onclick="alertMsg()"/> 这里的<input>标记创建了一个按钮，第三个属性为“onclick=”alertMsg()””，表示该按钮被点击后，调用一个名称为“alertMsg”的函数，这个函数已经在<head>和</head>标记间载入了。我们可以看到，处在标记<head>和</head>间的函数必须通过一个触发才能执行，不在标记<head>和</head> 间的JavaScript是按照载入顺序执行的。

11.2.2 入门示例 例11.2 scriptLoad.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例11.2 脚本加载</title> </head> <body> <h1>正在加载页面</h1> <script type="text/javascript"> alert("脚本在页面加载过程中被执行"); </script> <h1>当消息框被关闭后才能继续加载其他脚本后的内容</h1> </body> </html> 在IE中运行，将产生下面的结果：

11.2.2 入门示例 如图11.5所示，页面在加载过程中，遇到了<script> </script>块，并执行，同时也由此中断了页面流，页面一直停顿在消息框显示状态，而第二个<h1>标签一直处于等待图11.5 页面加载中执行脚本

11.2.2 入门示例 载入状态，并未显示出来。通过这样的方式，我们可以将JavaScript代码块放到其他标签或页面代码中，确保在页面处理的时候正确的执行它。当用户点击了确定按钮后，<h2>标签内容出现在页面中了。图11.6 页面完成载入

11.2.3 JavaScript的交互方法 在JavaScript中，人机交互有四种方法：警告对话框、确认对话框、提示对话框、window.write()。警告对话框给用户一个提示内容和一个确认按钮，用alert()方法实现，如图11.3所示。确认对话框与警告对话框相比，增加了一个取消按钮。确认对话框使得用户可以对目前的操作进行确认，是继续操作，还是取消操作。用confirm()方法实现。提示对话框在确认对话框的基础上，再增加一个用于信息输入的文本框，参考图11.8，用prompt()方法实现。另外在网页上显示信息的方法还有document.write()方法。

11.2.3 JavaScript的交互方法 1. alert方法 JavaScript使用alert()方法编写警告对话框。其标准格式为： window.alert(“content”); 在编程中，习惯用简写格式： alert(“content”); alert()的参数是一个作为警告用的字符串。例11.1和例11.2中给出了alert()的简单用法，仅仅使用该方法来编写警告对话框。在其他情况下，可以在alert()中使用转义字符来控制警告对话框的信息显示格式。例如： alert("x1=" + x1 +"\tx2="+x2 +"\n\nx1 / x2="+x1 / x2 + "\nx1 % x2="+x1 % x2 );

11.2.3 JavaScript的交互方法 2. confirm()方法在JavaScript中，用confirm()方法编写确认对话框。该方法的简化格式为： confirm(“content”); 例11.3 confirm()方法示例。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>confirm()方法示例</title> </head> <body> <h3>confirm()方法示例</h3>

11.2.3 JavaScript的交互方法 <p><a href="http://www.w3.org" onClick="javascript:confirm('确定进入W3C网站吗？')">W3C</a></p> <p><a href="http://www.google.com" onClick="javascript:confirm('确定进入Google网站吗？')">Google</a></p> <p><a href="http://www.baidu.org" onClick="javascript:confirm('确定进入百度网站吗？')">百度</a></p> </body> </html> 程序使用超级链接元素<a>，在该元素中设置属性onClick来调用confirm()方法。程序运行结果如图11.7。如果选择“确定”，则链接到相应的网站，否则取消链接。

11.2.3 JavaScript的交互方法 3. prompt()方法在JavaScript中，用prompt()方法编写提示对话框。格式如下： var input=prompt(“prompt content”, “default content”); 其中，第一个参数是提示文本，第二个参数是文本框中的默认值。一般情况下，默认值用空字符串””代替，如果省略默认值，则会在文本框中出现“undefined”字样的默认值。通过该方法输入的数据被赋给变量input。

11.2.3 JavaScript的交互方法 图11.7 confirm()方法示例

11.2.3 JavaScript的交互方法 例11.4 prompt使用示例。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>prompt()方法示例</title> <script type="text/javascript" language="javascript"> var studentName=prompt("输入学生姓名:",""); </script> </head> <body> <h3>prompt()方法示例</h3> </body> </html> 在脚本<script>中使用了prompt()，运行结果如图11.8 。

11.2.3 JavaScript的交互方法 图11.8 prompt()方法示例

11.2.3 JavaScript的交互方法 4.document.write()方法在JavaScript中，除了使用上述方法外，还可以使用 document.write()方法来显示信息。与它们不同的是，该方法显示的信息将作为网页的内容出现在网页中。在例11.4程序的var studentName=prompt("输入学生姓名:","");后面增加一行： document.write("你好：" + studentName + "同学！"); 程序的显示结果如图11.9 图11.9 document.write()方法示例

11.3 变量、数据类型和表达式11.3.1数据类型 在JavaScript中，包含数值型、字符串型和布尔型三种基本数据类型。 1. 数值型整型数是不含小数点的数，可以用十进制、八进制、或十六进制表示，但习惯上使用十进制数据表示。使用八进制数时，需要在数据值前冠以“0”，如八进制数235应该写成0235。使用十六进制数是，需要在数据值前冠以“0x”，如12ff表示成0x12ff。浮点数是带小数点的数，取值范围为：1.7976×10318~-1.7976×10318，最小的取值为5×10-324。

11.3.1 数据类型 2. 字符串型在JavaScript中，字符串是用单、双引号作为定界符括起来的一个字符序列。如"123"、"We are students"、"我在学习、思考、工作"等等，都是JavaScript中有效字符串。注意：单双引号均采用英文符号。如果字符串中需要包含单引号或双引号时，需要用双引号嵌套单引号来定界，或用单引号嵌套双引号来定界。如："他说：'我要去昆明'"表示了字符串：'我要去昆明'，两边的单引号是串的内容。又如：'他说："我要去昆明"'则表示了字符串："我要去昆明"，两边的双引号是串的内容。

11.3.1 数据类型 3. 布尔型在JavaScript中，布尔型数据只有两种取值，一个是true（真），一个是false（假），用于判断一个逻辑表达式的“真”或者“假”。

11.3.2 变量 1. 布尔型变量定义在JavaScript中，定义变量非常简单，各种类型的变量都可以用var关键词进行定义。在定义变量时，变量的类型是根据初始化时数据值的类型来确定的。 var Name,Sex,Age 在给变量赋初值之前，Name,Sex,Age三个变量的类型是不确定的，是undefined类型。只有对变量赋给初值后，变量的类型才确定下来。如： Name = "张三"; Sex="男"; Age=20; 此时，Name和Sex是字符串型，而Age是整型。

11.3.2 变量 有时需要在定义变量时就给变量进行初始化，如： //定义变量并赋值 var student1 = "张三"; var student2 = "李四"; 2. 变量作用域被定义在函数内的变量只能够被当前函数范围内被访问，在函数外声明的变量被认为是全局变量，能够被当前网页内部的任意JavaScript函数访问。

11.3.3 表达式 表达式是用运算符把常量、变量连接起来，形成具有某种含义的计算语句。在JavaScript中，有算术表达式、逻辑表达式和条件表达式。 1. 表达式和运算符使用算术运算符连接的变量和常量的计算语句叫算术表达式。在JavaScript中，常用的算术运算符为：+（加）、-（减）、*（乘）、/（除）、%（取余数）、++（自加）、--（自减）。例11.6 算术运算示例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>算术运算</title>

11.3.3 表达式 <script type="text/javascript" language="javascript"> function arithmeticOperation(){ var x1=15; var x2=10; alert("x1=" + x1 +"\tx2="+x2 +"\n\nx1 / x2="+x1 / x2 + "\nx1 % x2="+x1 % x2 ); } </script> </head> <body> <h3>算术运算示例</h3> <input type="button" value="单击此处" onclick="arithmeticOperation()"/> </body> </html> 在alert()函数中使用了转义字符“\n”（换行）、“\t”（制表符）来控制输出格式。

图11.10 算术运算示例 11.3.3 表达式

11.3.3 表达式 当使用“+”连接的是字符串时，表达式的结果是把两个字符串首尾相连，如： var students = student1 + student2; 此时，students的内容为“张三李四”。自加（++）和自减（--）运算符的语法与C语言的一致。例如： var x=0; var sum=0; x++; sum=sum+x; 结果为b=1,sum=1。

11.3.3 表达式 2. 逻辑表达式在JavaScript中，逻辑表达式有两类，一类是比较表达式，一类是逻辑表达式。比较表达式使用比较运算符连接，因为其运算结果是逻辑值“真”或“假”，所以把它归为逻辑表达式。常用的比较运算符为：==（等于）、!=（不等于）、>=（大于等于）、<=（小于等于）、>（大于）、<（小于）。如： var x=5,y=6,z=-1 x<y*z的结果为假，而x>=y+z的结果为真。逻辑表达式使用逻辑运算符连接。常用的逻辑运算符为：!（非）、&&（与）、||（或）。

11.3.3 表达式 function compareOperation(){ var x1=15; var x2=10; alert(x1>x2); } 把例11.5的函数arithmeticOperation()改为上述函数compareOperation()，则例11.5的显示结果如图11.11。图11.11 逻辑运算示例

11.3.3 表达式 3. 位运算表达式在JavaScript中，位运算是把变量值按照该值的二进制数进行操作的运算，主要用于根据位运算的结果进行程序流程控制。JavaScript先把数值转换为32位的二进制数，然后进行运算。常见的位运算符有：<<（左移）、>>（右移）、&（按位与）、|（按位或）。例如： 15<<2=60， 15>>2=3， 15 & 2=2， 15 | 2=15，

11.3.3 表达式 4. 其他表达式在JavaScript中，除了上述运算外，常用的还有条件表达式、逗号表达式。条件表达式使用符号“？”表示，设a、b、c为表达式，条件表达式的形式为： a?b:c 含义为如果表达式a成立，则取表达式b的值，否则取c的值。例如： state=(age>60)?”retired”:”working”，表示如果年龄大于60，状态为“退休”，否则为“工作”。

11.3.3 表达式 逗号表达式使用多个逗号把多个语句捆绑在一起，表达式的值是最后一个语句的值。例如： var x,y,z var xyz=(x=1,y=2,z=3); alert(xyz) 运行结果为xyz=3。

11.4.1 条件控制 在JavaScript中常用的条件控制语句有if、if…else…、switch。 1. if语句没有else的if语句用来执行较为简单的操作，没有分支。格式为： if (expression) statement; 当expression的值为真时，执行statement语句。否则程序将跳过此if语句。如果statement为单条语句时，statement前后不需要块操作符“{}”。否则，多条语句必须用{}把多个表达式括起来。例如，根据两个变量a,b的当前值判断是否交换a,b两个变量值：

11.4.1 条件控制 var a=1,b=2; if (a>b){ var temp=a; a=b; b=temp; } 2. if … else … 语句含有else的if语句形成双分支结构，当紧跟在if后的条件表达式为真时，执行else前的语句，否则执行else后的语句。该语句的格式为： if (expression) statement1; else statement2;

11.4.1 条件控制 例如： var a = 1, b = 2; if (a<b) a++; else b++; 上面的语句可以用条件表达式来简写成： var a = 1,var b = 2; (a<b) ? a++:b++; 用上述语句修改例11.6的程序，代码如下，结果显示在图11.12中。图11.12 if条件语句示例。图11.12 if条件语句示例

11.4.1 条件控制 3. switch语句当需要对多个变量进行判断时，会采用if语句的多重嵌套，这时会形成非常复杂的逻辑结构，对于初学者来讲，这是困难的。在JavaScript中，使用switch语句可以方便地代替多个if语句的并排使用。使代码更易阅读，执行效率更高。 switch语句的格式为： switch (expression) { case condition 1:statement 1; break; case condition 2:statement 2; break; …… case condition n-1:statement n-1; break;

11.4.1 条件控制 default:statement n; } JavaScript将根据expression的值选择n-1个操作的一个来执行，如果没有条件符合，则执行default后的语句。例如，下面的语句将根据用户的权限来选择该充当哪个角色。 var privilege = 1; switch (userPriv = privilege){ case 1: alert("超级管理员"); break; case 2: alert("一般用户"); break; default: alert("无此权限"); }

11.4.1 条件控制 在上面程序中，每一个分支中（除default分支外），都有break语句做跳出分支作用，在所有分支都不符合条件时，则执行default分支。上面程序，若privilege=6，则提示信息为“无此权限”。

11.4.2 循环 JavaScript中可以使用while、do…while、for三种方法完成循环或迭代的处理。 1. while循环 //while循环 var a = prompt("请输入一个整数",""); var b = prompt("请输入另一个整数",""); while(a==b){ a++; } 结果a=1 2. do…while循环 //do…while循环 var a = prompt("请输入一个整数",'','',''); var b = prompt("请输入另一个整数",'','','');

11.4.2 循环 do{ a++; }while(a==b); 结果a=2 与while循环不同的是，while循环先判断，后执行，do…while循环是先执行，后判断。 3. for循环 //for循环 var a = 1, b = 50; for (var i=0;i<b;i++){ a = a + 3; } 结果a=151

11.5 函数11.5.1 函数定义 在JavaScript中，函数的本质是一个对象。用户可以根据自己的需要来设计函数，然后调用。函数的定义格式为： function functionName(parameter1,parameter2,…,parameterN) { statements; } 其中，function是定义函数的关键词，functionName为函数名，为其他程序调用该函数提供依据，parameter1,…, parameterN为形式参数。如果函数没有参数，则称函数为无参函数，调用该函数时，不需要使用参数。如果函数含有参数，则在调用该函数时必须给定参数值，这时的参数叫实参。

11.5.1 函数定义 函数的功能可以是一个结构非常复杂的算法，也可以是一个简单的输入或输出语句。下面是只有简单输入输出语句的函数： function output() { var name=prompt(“请输入姓名：”); alert(“欢迎你！ ” + name); } 函数直接把结果输出出来，没有必要定义参数。

11.5.2 函数调用和参数传递 对于含有参数的函数，调用时需要为参数定义实际值，这时，在函数中需要返回计算结果。JavaScript中函数计算结果的返回用return语句来实现。我们用一个逻辑结构稍微复杂的函数定义和带参数的函数调用的例子来说明函数的参数传递。例11.6 根据学生的成绩来划分学生成绩的等级，分数>=90为“优秀”，89>分数>=80为“良好”，79>分数>=70为“中等”，69>分数>=60为“及格”，分数<60为“不及格”。使用if 嵌套来定义分类函数classify()。

第 11 章 JavaScript 基础