第 11 章 JavaScript 基础
71
第 11 第 JavaScript 第第
-
Upload
shana-logan -
Category
Documents
-
view
43 -
download
4
description
第 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 概述. - PowerPoint PPT Presentation
Transcript of 第 11 章 JavaScript 基础
第 11 章 JavaScript 基础
第 11 章 JavaScript 基础11.1 概述11.2 JavaScript 基础11.3 变量、数据类型和表达式11.4 控制语句11.5 函数11.6 对象11.7 错误捕获和处理11.8 内部 JavaScript 和外部 JavaScript11.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=gb231
2"> <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=gb231
2"> <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() 。警告对话框给用户一个提示内容和一个确认按钮，用 al
ert() 方法实现，如图 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.3.3 表达式
图 11.10 算术运算示例
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=12. 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.5.2 函数调用和参数传递 function classify(score) { var grade; if (score>=90) grade=" 优秀 "; else if (score>=80) grade="良好 "; else if (score>=70) grade=" 中等 "; else if (score>=60) grade="及格 "; else grade=" 不及格 "; return grade; }
classify(score) 函数中的 score 是形式参数，在函数 classify(score) 中定义了变量 grade 来存放分类结果，函数
11.5.2 函数调用和参数传递 的最后一行用 return grade; 语句返回该变量的值，这个值也是函数的返回值。 调用函数 classify(score) 的函数 inOut() 定义如下： function inOut() { var studentScore=prompt(" 输入学生成绩： ",""); alert(" 该生的成绩为： " + classify(studentScore)); }
classify(score) 函数的形式参数 score 在函数调用时用实参 studentScore 来传递参数值，该值通过 prompt() 来输入。这样就可以实现带参数的函数调用。把这两个函数放到例 11.6 的 <script></script> 中代替原函数 arithmeticOperation()
11.5.2 函数调用和参数传递 修改后的程序如下：<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 函数调用 </title> <script type="text/javascript" language="javascript"> function classify(score) { var grade; if (score>=90) grade=" 优秀 "; else if (score>=80) grade="良好 "; else if (score>=70) grade=" 中等 "; else if (score>=60) grade="及格 "; else grade=" 不及格 ";
11.5.2 函数调用和参数传递 return grade; } function inOut() { var studentScore=prompt(" 输入学生成绩 :",""); alert(" 该生的成绩为： " + classify(studentScore)); } </script></head><body> <h3> 函数调用示例 </h3> <input type="button" value=" 单击此处 " onclick="inOut()"/></body></html>
该程序的运行结果如图 11.13 和图 11.14 。
11.5.2 函数调用和参数传递
图 11.13 函数调用示例之数据输入 图 11.14 函数调用示例之分类结果
11.5.2 函数调用和参数传递 例 11.7 函数调用示例 2<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 函数调用 </title> <script type="text/javascript" language="javascript">
function alertMsg(userName){ var welcomeMsg = welcome(userName); alert("欢迎您， " + welcomeMsg);}function welcome(reqName){ return "欢迎您， " + reqName;}
</script> </head> <body> <input type="button" value="cilck me" onclick="alertMsg('张三 ')"/> </body></html>
11.5.2 函数调用和参数传递 函数中的参数可以自己定义，在本例中，传递的参数本质都是一样的，是从button 中获得的“张三”，在函数 alertMsg 中，参数名称被定义成了 userName ，而在 welcome函数中，参数名称为 reqName 。对于参数名称定义，一般按照个人的习惯，并无强制规定，需要注意的是，参数必须区分大小写。 我们将该程序运行并点击按钮，得到下面的结果。 在函数中，可以使用 return 语句返回函数结果，如本例中的语句。这个语句将返回由字符串“欢迎您，”和 alertMsg函数中传递过来的 userName 值组合而成最终结果。 return "欢迎您， " + reqName;
11.5.2 函数调用和参数传递
图 11.14 函数调用示例 2
11.6 对象 对象的概念来自面向对象（ Object-oriented ）编程。面向对象编程需要学习和掌握类、对象、属性、方法、继承、封装等概念。关于这些概念的讨论需要较大的篇幅，鉴于本书不是专门讨论面向对象方法的，所以我们省略关于这些概念的讨论，感兴趣的读者可以参考面向对象方法学和面向对象编程方面的专业书籍。 为了更好理解 JavaScript 中对象的定义和实例化概念，我们先分析一个实例。 例 11.8 用构造器来构造对象，然后对对象进行实例化操作。
11.6 对象 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>构建对象 </title> <script type="text/javascript">
// 使用构造器 function 来构造对象function shirt(name,price){ // 在构造器中声明属性 this.name = name; this.price = price;}// 实例化对象var lacoste = new shirt("鳄鱼 ","320.00");var pualFrank = new shirt(" 大嘴猴 ","430.00");// 弹出提示信息
11.6 对象 // 弹出提示信息alert(lacoste.name + ":" + lacoste.price);alert(pualFrank.name + ":" + pualFrank.price);//动态添加属性
lacoste.size = "XXL"; alert(lacoste.size); </script> </head> <body> </body></html>
运行该程序，得到如下效果。
11.6 对象
图 11. 15 创建对象
11.6 对象 使用 function 这样定义函数的方式构造一个对象，这个函数就称之为构造函数。构造函数名称即为对象名，构造函数的参数，是对象的属性值（或其他变量），构造器函数内，使用 this.[属性名称 ]的方式创建对象属性。在本例中，对象名称为 shirt ，对象属性在构造器函数内使用 this.name和 this.price 来创建，两个属性名称分别为 name 和 price ，在创建属性完成后，紧接着将传入构造器的参数对应属性进行赋值， this.name=name （第一个 name 是属性名称，第二个 name 是属性值）和 this.price=price 。
11.6 对象 function shirt(name,price){ // 在构造器中声明属性 this.name = name; this.price = price; }
紧接着，程序实例化了对象，实例化对象的时候，仍然选择使用了 var 定义的方式，在赋值符号（ = ）后，使用“ new” 关键字定义新实例来自某个对象，本例中为 shirt 。实例化对象的属性值在对象名后用逗号（ ,）分割。 var lacoste = new shirt("鳄鱼 ","320.00");
而对实例属性，可以写为 [实例名称 ].[属性 ]的方式。下面的代码使用消息框显示了实例 lacoste 的 name 属性值和price
11.6 对象 属性值。 alert(lacoste.name + ":" + lacoste.price); JavaScript 还允许对实例动态的添加属性。在本例中，我们动态的为实例 lacoste添加了 size 属性，并且赋值为 XXL； lacoste.size = "XXL"; 除了以上介绍的对象知识外， JavaScript 还可以在构造器中声明函数。可以将上面代码修改为： function shirt(name,price){ // 在构造器中声明属性 this.name = name; this.price = price; this.alertMsg = function(){alert("品牌： " + this.name + "价格： " + this.price);}; }
11.6 对象 // 实例化对象 var lacoste = new shirt("鳄鱼 ","320.00"); var pualFrank = new shirt(" 大嘴猴 ","430.00"); // 调用函数 lacoste.alertMsg(); pualFrank.alertMsg();
程序保存并运行后，得到如下结果。
图 11.16 构造器内声明函数
11.7 错误捕获和处理 JavaScript 使用的错误捕获与很多高级语言类似，通过
try/catch/finally 程序块构建错误捕获和处理机制。程序仍然是尝试执行 try 块内代码，如果出现错误，捕获它并执行 catch 块内代码，最终无论怎样都执行 finally 块内代码。我们把例 11.8 的错误进行一下捕获。
例 11.9 catchErr.htm<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>例 11.10 错误捕获 </title> <script type="text/javascript"> function shirt(name,price){ // 在构造器中声明属性
11.7 错误捕获和处理 // 在构造器中声明属性 this.name = name; this.price = price; this.alertMsg = function(){alert("品牌： " + this.name + " 价格： " + this.p
rice);}; } // 实例化对象 var lacoste = new shirt("鳄鱼 ","320.00"); var pualFrank = new shirt(" 大嘴猴 ","430.00"); // 调用函数 try{ lacoste.alertmsg(); } catch(e){ alert(e); }
11.7 错误捕获和处理 finally{ alert("finally 块内的内容最终都会执行 "); } </script> </head> <body> </body></html>
将代码保存后运行，我们能看到首先弹出错误信息，其次执行 finally 块中的内容。
11.8 内部 JavaScript 和外部 JavaScript
通常情况下，程序员会把通用的过程或函数封转为一个独立的 .js 文件，这个文件和我们上面叙述的代码没有任何区别，仅仅在于存在于服务器的形式不一样，类似我们前面讲过的内部 CSS 和外部 CSS形式。对于在页面中引用这个文件，我们可以在页面的 <head> 和 </head> 之间写入引用代码来完成。
<script type="text/javascript" src="JS/loadXML"></script>
在本书中，为了保持程序的一致性和易读性，除了标准通用函数外，其他 JavaScript 均采用内部 JavaScript 方式来完成。在实际软件项目中，程序员应该根据实际情况来确定使用哪种方式。
11.9 注释①使用“ //” 前导对一行代码进行注释，如：//循环取出根节点中内容
②使用 /*和 */ 注释代码块，如：/** * @author woods * 封装 XPath * @param xmldoc 执行查找的节点 * @param sXpath XPath 表达式 */
注释可根据个人习惯来进行，编者通常使用第 1 种方法对具体代码做注释，使用第 2 种方法对函数或过程作总说明。
