《JavaScript基础》PPT课件.ppt

《《JavaScript基础》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《JavaScript基础》PPT课件.ppt（71页珍藏版）》请在金锄头文库上搜索。

1、第第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 JavaScript11.1 JavaScript概述概述在第一章里面我们已经知道，在第一章里面我们已经知道，AjaxAjax的关键组件之一就是的关键组件之一就是JavaScriptJavaScript语言

2、。在语言。在AjaxAjax出现之前，出现之前，JavaScriptJavaScript一直被程序一直被程序员看作是员看作是“玩具语言玩具语言”，它能做的事情就是，让你的鼠标周，它能做的事情就是，让你的鼠标周围围绕了很多的小星星，标题栏里面出现跑马灯效果，点击围围绕了很多的小星星，标题栏里面出现跑马灯效果，点击某个对象的时候出现爆炸效果，某个对象的时候出现爆炸效果，等等。因为当时等等。因为当时JavaScriptJavaScript仅仅使用在浏览器端，而浏览器端不能仅仅通过仅仅使用在浏览器端，而浏览器端不能仅仅通过JavaScriptJavaScript就与服务器端通信，于是就与服务器端通信，

3、于是JavaScriptJavaScript一直默默无一直默默无闻的做丑小鸭。但是，当闻的做丑小鸭。但是，当GoogleGoogle使用使用JavaScriptJavaScript使客户端与使客户端与服务器端异步通信获得了成功后，这个丑小鸭才越来越多的服务器端异步通信获得了成功后，这个丑小鸭才越来越多的获得了人们的目光和赞誉。这一切还是必须归功于获得了人们的目光和赞誉。这一切还是必须归功于IE5IE5带来的带来的XMLHttpRequestXMLHttpRequest。11.1 JavaScript11.1 JavaScript概述概述 首先，首先，JavaScriptJavaScript不是

4、不是JavaJava！虽然它们的名字听起来有！虽然它们的名字听起来有些像，但它们之间完全没什么联系，它们的共同点也微乎其些像，但它们之间完全没什么联系，它们的共同点也微乎其微。微。JavaScriptJavaScript是由网景公司开发人员是由网景公司开发人员Brendan Brendan EichEich发明的，发明的，最初名称是最初名称是MochaMocha，后来更名为，后来更名为LiveScriptLiveScript，最后确定名称为，最后确定名称为JavaScriptJavaScript。19951995年网景公司第一次在浏览器（年网景公司第一次在浏览器（Netscape Netsca

5、pe 2.02.0）中引入这个语言以来，这个名称一直与）中引入这个语言以来，这个名称一直与JavaJava混淆在一起。混淆在一起。后来，微软也推出了自己的后来，微软也推出了自己的JavaScriptJavaScript，叫做，叫做JscriptJscript，最初，最初JscriptJscript只能运行在只能运行在IEIE上，到目前为止，这两者之间几乎没有上，到目前为止，这两者之间几乎没有区别了。当然，我们在书写的时候，尽量避免使用区别了。当然，我们在书写的时候，尽量避免使用“JscriptJscript”名称，因为很多浏览器并不知道这个名字。名称，因为很多浏览器并不知道这个名字。11.2.

6、1 11.2.1 构建构建JavaScriptJavaScript编程环境编程环境 JavaScriptJavaScript程序是一个文本文件，可以用任意文本编辑程序是一个文本文件，可以用任意文本编辑器（如记事本）直接编辑，到本书出版时，市面上仍没有一器（如记事本）直接编辑，到本书出版时，市面上仍没有一个可以像在个可以像在Visual StudioVisual Studio中编辑中编辑C#C#那样方便的编辑器来编辑那样方便的编辑器来编辑JavaScriptJavaScript。但是仍然有不少的好工具可供我们使用，工欲。但是仍然有不少的好工具可供我们使用，工欲善其事必先利其器，优秀的善其事必先利

7、其器，优秀的IDEIDE可以使程序员减少大量的工作可以使程序员减少大量的工作量，编者在这里推荐使用免费的量，编者在这里推荐使用免费的AptanaAptana（http:/http:/www.Awww.A）。）。另外诸如另外诸如IntellijIntellij、NetBeansNetBeans、EclipseEclipse、EditPlusEditPlus等等均可使用。均可使用。在确定了编辑工具后，我们还要创建调试环境，在确定了编辑工具后，我们还要创建调试环境，IEIE和和11.2.1 11.2.1 构建构建JavaScriptJavaScript编程环境编程环境 FireFoxFireFox下

8、都有下都有JavaScriptJavaScript调试器，我们这里推荐使用调试器，我们这里推荐使用IE8IE8和和FireFox+FireBugFireFox+FireBug。IE8IE8下自带了开发人员工具，我们可以在下自带了开发人员工具，我们可以在菜单工具菜单工具 - -开发人员工具（开发人员工具（F12F12） 找到。找到。FireBugFireBug是是FireFoxFireFox下的一个插件工具，可以到下的一个插件工具，可以到MozillaMozilla网站上免费下载，网站上免费下载，安装完成后，可在菜单查看安装完成后，可在菜单查看 - -FireBugFireBug（F12F12）

9、 找到。两个找到。两个工具均可设置断点后逐行调试，并且可查看变量值的变化、工具均可设置断点后逐行调试，并且可查看变量值的变化、DOMDOM信息、信息、JavaScriptJavaScript错误等信息。建议将错误等信息。建议将IE8IE8菜单工具菜单工具 - -InternetInternet选项选项 - -高级高级 将将“禁用脚本调试禁用脚本调试”取消。取消。 由于由于IEIE系列和系列和FireFoxFireFox类浏览器在类浏览器在JavaScriptJavaScript使用中，有使用中，有很多地方是不一样的，所以建议开发者两者都进行安装。很多地方是不一样的，所以建议开发者两者都进行安装

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

11、者可以自己进行测试、评估。读者可以自己进行测试、评估。11.2.2 11.2.2 入门示例入门示例 我们先来看一个简单的示例，在这个示例中，我们构建我们先来看一个简单的示例，在这个示例中，我们构建了一个了一个HTMLHTML页，其中有一个按钮，文字是页，其中有一个按钮，文字是“弹出提示信息弹出提示信息”，当用户点击按钮时，弹出一个消息框。，当用户点击按钮时，弹出一个消息框。例例11.1 11.1 alertMsg.htmalertMsg.htm meta http-equiv=Content-Type content=text/html; =gb2312 例例11.1 11.1 弹出提示信息弹

12、出提示信息 script type=text/ / /在这里创建了一个在这里创建了一个alertMsgalertMsg函数函数 function function alertMsgalertMsg()() / /调用调用alertalert方法弹出提示信息方法弹出提示信息 alert(alert(按钮被点击了按钮被点击了); /); /注意注意“; ;”不能省略不能省略 11.2.2 11.2.2 入门示例入门示例 input type=button value= ()/ 将上述代码保存后，用浏览器直接打开时，默认安全设将上述代码保存后，用浏览器直接打开时，默认安全设置会组织置会组织JavaS

13、criptJavaScript在本地执行，浏览器工具栏下方会出现在本地执行，浏览器工具栏下方会出现提示栏（图提示栏（图11.111.1），提示），提示“为了有利于保护安全性，为了有利于保护安全性，Internet ExplorerInternet Explorer已限制此网页运行已限制此网页运行”信息，可以使用信息，可以使用鼠标左键点击后，允许阻止内容（图鼠标左键点击后，允许阻止内容（图11.211.2）。）。在在IEIE或或FireFoxFireFox中点击按钮后，均会弹出提示信息中点击按钮后，均会弹出提示信息“按钮按钮被点击了被点击了”，如图，如图11.311.3和图和图11.411.4所

14、示。在后面的叙述中，若所示。在后面的叙述中，若浏览器返回结果都一致，我们不再二者都列出。浏览器返回结果都一致，我们不再二者都列出。 11.2.2 11.2.2 入门示例入门示例 图图11.1 IE11.1 IE阻止阻止JavaScriptJavaScript执行执行图图11.2 11.2 允许阻止的内容允许阻止的内容11.2.2 11.2.2 入门示例入门示例 图图11.3 11.3 在在IEIE中显示中显示图图11.4 11.4 在在FireFoxFireFox中显示中显示11.2.2 11.2.2 入门示例入门示例 从上面的例子我们可以看出，从上面的例子我们可以看出，JavaScriptJ

15、avaScript是以代码块的是以代码块的方式内嵌在方式内嵌在HTMLHTML代码中的，在浏览器中被执行并得到最终结代码中的，在浏览器中被执行并得到最终结果。果。标记可以省略标记可以省略language=:language=:”javascriptjavascript”属性，属性，浏览器默认识别为浏览器默认识别为JavaScriptJavaScript。function alertMsg() /调用调用alert方法弹出提示信息方法弹出提示信息alert(“按钮被单击了按钮被单击了); /注意注意“;”不能省略不能省略上面的代码块定义了一个名称为上面的代码块定义了一个名称为“alertMsga

16、lertMsg”，参数为，参数为空的函数，这个函数只有一个功能，就是弹出一个消息框，空的函数，这个函数只有一个功能，就是弹出一个消息框，内容为内容为“按钮被点击了按钮被点击了”。函数使用大括号函数使用大括号“ ”和和“ ”将所有该函数代码包围。将所有该函数代码包围。11.2.2 11.2.2 入门示例入门示例 在在块中，可定义多个块中，可定义多个functionfunction来实现复杂来实现复杂应用，同时也可以将实现特定的功能模块的应用，同时也可以将实现特定的功能模块的JavaScriptJavaScript封装封装为为. .jsjs文件，更加方面的进行调用，后面我们会详细讲到。文件，更加方

17、面的进行调用，后面我们会详细讲到。 input type=button value=()/ 这里的这里的标记创建了一个按钮，第三个属性为标记创建了一个按钮，第三个属性为“onclickonclick= =”alertMsgalertMsg()()”，表示该按钮被点击后，调用，表示该按钮被点击后，调用一个名称为一个名称为“alertMsgalertMsg”的函数，这个函数已经在的函数，这个函数已经在和和标记间载入了。标记间载入了。 我我们们可可以以看看到到，处处在在标标记记和和间间的的函函数数必必须须通通过过一一个个触触发发才才能能执执行行，不不在在标标记记和和 间间的的JavaScriptJa

18、vaScript是按照载入顺序执行的。是按照载入顺序执行的。11.2.2 11.2.2 入门示例入门示例 例例11.2 11.2 scriptLoad.htmscriptLoad.htm meta http-equiv=Content-Type content=text/html; =gb2312 例例11.2 11.2 脚本加载脚本加载 正在加载页面正在加载页面 script type=text/ alert( alert(脚本在页面加载过程中被执行脚本在页面加载过程中被执行);); 当消息框被关闭后才能继续加载其他脚本后的内容当消息框被关闭后才能继续加载其他脚本后的内容 在在IEIE中运行

19、，将产生下面的结果：中运行，将产生下面的结果：11.2.2 11.2.2 入门示例入门示例 如图如图11.511.5所示，页面在加载过程中，遇到了所示，页面在加载过程中，遇到了 块，并执行，同时也由此中断了页面流，页面一直块，并执行，同时也由此中断了页面流，页面一直停顿在消息框显示状态，而第二个停顿在消息框显示状态，而第二个标签一直处于等待标签一直处于等待图图11.5 11.5 页面加载中执行脚本页面加载中执行脚本11.2.2 11.2.2 入门示例入门示例 载入状态，并未显示出来。通过这样的方式，我们可以将载入状态，并未显示出来。通过这样的方式，我们可以将JavaScriptJavaScri

20、pt代码块放到其他标签或页面代码中，确保在页面代码块放到其他标签或页面代码中，确保在页面处理的时候正确的执行它。当用户点击了确定按钮后，处理的时候正确的执行它。当用户点击了确定按钮后，标签内容出现在页面中了。标签内容出现在页面中了。图图11.6 11.6 页面完成载入页面完成载入11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 在在JavaScriptJavaScript中，人机交互有四种方法：警告对话框、中，人机交互有四种方法：警告对话框、确认对话框、提示对话框、确认对话框、提示对话框、window.writewindow.write()()。警告对话

21、框给用户一个提示内容和一个确认按钮，用警告对话框给用户一个提示内容和一个确认按钮，用alertalert()()方法实现，如图方法实现，如图11.311.3所示。所示。确认对话框与警告对话框相比，增加了一个取消按钮。确认对话框与警告对话框相比，增加了一个取消按钮。确认对话框使得用户可以对目前的操作进行确认，是继续操确认对话框使得用户可以对目前的操作进行确认，是继续操作，还是取消操作。用作，还是取消操作。用confirm()confirm()方法实现。方法实现。提示对话框在确认对话框的基础上，再增加一个用于信提示对话框在确认对话框的基础上，再增加一个用于信息输入的文本框，参考图息输入的文本框，参

22、考图11.811.8，用，用prompt()prompt()方法实现。方法实现。另外在网页上显示信息的方法还有另外在网页上显示信息的方法还有document.writedocument.write()()方方法。法。 11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 1. alert1. alert方法方法 JavaScript JavaScript使用使用alert()alert()方法编写警告对话框。其标准格方法编写警告对话框。其标准格式为：式为： window.alert(window.alert(“contentcontent”);); 在编程中

23、，习惯用简写格式：在编程中，习惯用简写格式： alert(alert(“contentcontent”);); alert() alert()的参数是一个作为警告用的字符串。例的参数是一个作为警告用的字符串。例11.111.1和例和例11.211.2中给出了中给出了alert()alert()的简单用法，仅仅使用该方法来编写警的简单用法，仅仅使用该方法来编写警告对话框。在其他情况下，可以在告对话框。在其他情况下，可以在alert()alert()中使用转义字符来中使用转义字符来控制警告对话框的信息显示格式。例如：控制警告对话框的信息显示格式。例如：alert(x1= + x1 +tx2=+x2

24、 +nnx1 / x2=+x1 / x2 + nx1 % x2=+x1 % x2 );alert(x1= + x1 +tx2=+x2 +nnx1 / x2=+x1 / x2 + nx1 % x2=+x1 % x2 );11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 2. confirm()2. confirm()方法方法 在在JavaScriptJavaScript中，用中，用confirm()confirm()方法编写确认对话框。该方法编写确认对话框。该方法的简化格式为：方法的简化格式为： confirm(confirm(“contentconten

25、t”);); 例例11.3 confirm()11.3 confirm()方法示例。方法示例。 meta http-equiv=Content-Type content=text/html; =gb2312 confirm() confirm()方法示例方法示例 confirm() confirm()方法示例方法示例 11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 a W3C)W3C a Google)Google a )百度百度 程序使用超级链接元素程序使用超级链接元素，在该元素中设置属性，在该元素中设置属性onClickonClick来调用来调用c

26、onfirm()confirm()方法。程序运行结果如图方法。程序运行结果如图11.711.7。 如果选择如果选择“确定确定”，则链接到相应的网站，否则取消链，则链接到相应的网站，否则取消链接。接。 11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 3. prompt()3. prompt()方法方法 在在JavaScriptJavaScript中，用中，用prompt()prompt()方法编写提示对话框。格方法编写提示对话框。格式如下：式如下： varvar input= input=prompt(prompt(“promptprompt conte

27、nt content”, , “default contentdefault content”););其中，第一个参数是提示文本，第二个参数是文本框中的默其中，第一个参数是提示文本，第二个参数是文本框中的默认值。一般情况下，默认值用空字符串认值。一般情况下，默认值用空字符串”代替，如果省略代替，如果省略默认值，则会在文本框中出现默认值，则会在文本框中出现“undefinedundefined”字样的默认值。字样的默认值。通过该方法输入的数据被赋给变量通过该方法输入的数据被赋给变量inputinput。11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 图图

28、11.7 confirm()11.7 confirm()方法示例方法示例11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 例例11.4 prompt11.4 prompt使用示例。使用示例。 meta http-equiv=Content-Type content=text/html; =gb2312 prompt() prompt()方法示例方法示例 script type=text/ varvar studentNamestudentName=prompt(=prompt(输入学生姓名输入学生姓名:,);:,); prompt() prompt()方

29、法示例方法示例 在脚本在脚本中使用了中使用了prompt()prompt()，运行结果如图，运行结果如图11.8 11.8 。 11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 图图11.8 prompt()11.8 prompt()方法示例方法示例11.2.3 JavaScript11.2.3 JavaScript的交互方法的交互方法 4.document.write()4.document.write()方法方法 在在JavaScriptJavaScript中，除了使用上述方法外，还可以使用中，除了使用上述方法外，还可以使用 document.wri

30、tedocument.write()()方法来显示信息。与它们不同的是，该方法显示的信息将方法来显示信息。与它们不同的是，该方法显示的信息将作为网页的内容出现在网页中。作为网页的内容出现在网页中。 在例在例11.411.4程序的程序的varvar studentNamestudentName=prompt(=prompt(输入学生姓输入学生姓名名:,);:,);后面增加一行：后面增加一行： document.writedocument.write(你好：你好： + + studentNamestudentName + + 同学！同学！););程序的显示结果如图程序的显示结果如图11.911.9

31、图图11.9 11.9 document.write()()方法示例方法示例11.3 11.3 变量、数据类型和表达式变量、数据类型和表达式11.3.111.3.1数据类型数据类型 在在JavaScriptJavaScript中，包含数值型、字符串型和布尔型三种中，包含数值型、字符串型和布尔型三种基本数据类型。基本数据类型。 1. 1. 数值型数值型 整型数是不含小数点的数，可以用十进制、八进制、或整型数是不含小数点的数，可以用十进制、八进制、或十六进制表示，但习惯上使用十进制数据表示。使用八进制十六进制表示，但习惯上使用十进制数据表示。使用八进制数时，需要在数据值前冠以数时，需要在数据值前冠

32、以“0 0”，如八进制数，如八进制数235235应该写成应该写成02350235。使用十六进制数是，需要在数据值前冠以。使用十六进制数是，需要在数据值前冠以“0x0x”，如，如12ff12ff表示成表示成0x12ff0x12ff。 浮点数是带小数点的数，取值范围为：浮点数是带小数点的数，取值范围为：1.79761.797610318-10318-1.79761.79761031810318，最小的取值为，最小的取值为5 51010-324-324。11.3.1 11.3.1 数据类型数据类型2. 2. 字符串型字符串型 在在JavaScriptJavaScript中，字符串是用单、双引号作为定

33、界符括中，字符串是用单、双引号作为定界符括起来的一个字符序列。如起来的一个字符序列。如123123、We are studentsWe are students、 我在我在学习、思考、工作学习、思考、工作 等等，都是等等，都是JavaScriptJavaScript中有效字符串。中有效字符串。 注意：单双引号均采用英文符号。注意：单双引号均采用英文符号。 如果字符串中需要包含单引号或双引号时，需要用双引如果字符串中需要包含单引号或双引号时，需要用双引号嵌套单引号来定界，或用单引号嵌套双引号来定界。如：号嵌套单引号来定界，或用单引号嵌套双引号来定界。如： 他说：他说： 我要去昆明我要去昆明表示了

34、字符串：表示了字符串： 我要去昆明我要去昆明 ，两边的，两边的单引号是串的内容。又如：单引号是串的内容。又如： 他说：他说： 我要去昆明我要去昆明则表示了则表示了字符串：字符串： 我要去昆明我要去昆明 ，两边的双引号是串的内容。，两边的双引号是串的内容。11.3.1 11.3.1 数据类型数据类型3. 3. 布尔型布尔型 在在JavaScriptJavaScript中，布尔型数据只有两种取值，一个是中，布尔型数据只有两种取值，一个是truetrue（真），一个是（真），一个是falsefalse（假），用于判断一个逻辑表达式（假），用于判断一个逻辑表达式的的“真真”或者或者“假假”。 11.3

35、.2 11.3.2 变量变量1. 1. 布尔型变量定义布尔型变量定义 在在JavaScriptJavaScript中，定义变量非常简单，各种类型的变量中，定义变量非常简单，各种类型的变量都可以用都可以用varvar关键词进行定义。在定义变量时，变量的类型是关键词进行定义。在定义变量时，变量的类型是根据初始化时数据值的类型来确定的。根据初始化时数据值的类型来确定的。 varvar Name,Sex,AgeName,Sex,Age 在给变量赋初值之前，在给变量赋初值之前，Name,Sex,AgeName,Sex,Age三个变量的类型是三个变量的类型是不确定的，是不确定的，是undefinedund

36、efined类型。只有对变量赋给初值后，变量类型。只有对变量赋给初值后，变量的类型才确定下来。如：的类型才确定下来。如： Name = Name = 张三张三; Sex= Sex=男男; Age=20; Age=20; 此时，此时，NameName和和SexSex是字符串型，而是字符串型，而AgeAge是整型。是整型。11.3.2 11.3.2 变量变量 有时需要在定义变量时就给变量进行初始化，如：有时需要在定义变量时就给变量进行初始化，如： /定义变量并赋值定义变量并赋值 varvar student1 = student1 = 张三张三; varvar student2 = student

37、2 = 李四李四;2. 2. 变量作用域变量作用域 被定义在函数内的变量只能够被当前函数范围内被访问，被定义在函数内的变量只能够被当前函数范围内被访问，在函数外声明的变量被认为是全局变量，能够被当前网页内在函数外声明的变量被认为是全局变量，能够被当前网页内部的任意部的任意JavaScriptJavaScript函数访问。函数访问。11.3.3 11.3.3 表达式表达式 表达式是用运算符把常量、变量连接起来，形成具有某表达式是用运算符把常量、变量连接起来，形成具有某种含义的计算语句。在种含义的计算语句。在JavaScriptJavaScript中，有算术表达式、逻辑中，有算术表达式、逻辑表达式

38、和条件表达式。表达式和条件表达式。1. 1. 表达式和运算符表达式和运算符 使用算术运算符连接的变量和常量的计算语句叫算术表使用算术运算符连接的变量和常量的计算语句叫算术表达式。在达式。在JavaScriptJavaScript中，常用的算术运算符为：中，常用的算术运算符为：+ +（加）、（加）、- -（减）、（减）、* *（乘）、（乘）、/ /（除）、（除）、% %（取余数）、（取余数）、+（自加）、（自加）、-（自减）。（自减）。 例例11.6 11.6 算术运算示例算术运算示例 meta http-equiv=Content-Type content=text/html; =gb2312

39、 算术运算算术运算 11.3.3 11.3.3 表达式表达式 function arithmeticOperation() var x1=15; var x2=10; alert(x1= + x1 +tx2=+x2 +nnx1 / x2=+x1 / x2 + nx1 % x2=+x1 % x2 ); 算术运算示例算术运算示例 在在alert()alert()函数中使用了转义字符函数中使用了转义字符“nn”（换行）、（换行）、“tt”（制表符）来控制输出格式。（制表符）来控制输出格式。 11.3.3 11.3.3 表达式表达式图图11.10 11.10 算术运算示例算术运算示例11.3.3 11

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

41、= sum=sum+xsum+x; ;结果为结果为b=1,sum=1b=1,sum=1。 11.3.3 11.3.3 表达式表达式2. 逻辑表达式逻辑表达式 在在JavaScriptJavaScript中，逻辑表达式有两类，一类是比较表达中，逻辑表达式有两类，一类是比较表达式，一类是逻辑表达式。式，一类是逻辑表达式。 比较表达式使用比较运算符连接，因为其运算结果是逻比较表达式使用比较运算符连接，因为其运算结果是逻辑值辑值“真真”或或“假假”，所以把它归为逻辑表达式。常用的比，所以把它归为逻辑表达式。常用的比较运算符为：较运算符为：=（等于）、（等于）、!=!=（不等于）、（不等于）、=（大于等

42、于）、（大于等于）、= （大于）、（大于）、 （小于）。如：（小于）。如： varvar x=5,y=6,z=-1 x=5,y=6,z=-1 xy*z x=x=y+zy+z的结果为真。的结果为真。 逻辑表达式使用逻辑运算符连接。常用的逻辑运算符为：逻辑表达式使用逻辑运算符连接。常用的逻辑运算符为：! !（非）、（非）、&（与）、（与）、|（或）。（或）。 11.3.3 11.3.3 表达式表达式 function function compareOperationcompareOperation()() varvar x1=15; x1=15; varvar x2=10; x2=10; ale

43、rt(x1x2); alert(x1x2); 把例把例11.511.5的函数的函数arithmeticOperationarithmeticOperation()()改为上述函数改为上述函数compareOperationcompareOperation()()，则例，则例11.511.5的显示结果如图的显示结果如图11.1111.11。图图11.11 11.11 逻辑运算示例逻辑运算示例11.3.3 11.3.3 表达式表达式3. 位运算表达式位运算表达式 在在JavaScriptJavaScript中，位运算是把变量值按照该值的二进制中，位运算是把变量值按照该值的二进制数进行操作的运算，主

44、要用于根据位运算的结果进行程序流数进行操作的运算，主要用于根据位运算的结果进行程序流程控制。程控制。JavaScriptJavaScript先把数值转换为先把数值转换为3232位的二进制数，然后位的二进制数，然后进行运算。常见的位运算符有：进行运算。常见的位运算符有：（右移）、（右移）、& &（按位与）、（按位与）、| |（按位或）。（按位或）。 例如：例如： 152=60 152=3 152=3， 15 & 2=2 15 & 2=2， 15 | 2=15 15 | 2=15，11.3.3 11.3.3 表达式表达式4. 其他表达式其他表达式 在在JavaScriptJavaScript中，除

45、了上述运算外，常用的还有条件表中，除了上述运算外，常用的还有条件表达式、逗号表达式。达式、逗号表达式。 条件表达式使用符号条件表达式使用符号“？”表示，设表示，设a a、b b、c c为表达式，为表达式，条件表达式的形式为：条件表达式的形式为： a?b:ca?b:c 含义为如果表达式含义为如果表达式a a成立，则取表达式成立，则取表达式b b的值，否则取的值，否则取c c的的值。例如：值。例如： state=(age60)?state=(age60)?”retiredretired”: :”workingworking”，表示如果年龄大于表示如果年龄大于6060，状态为，状态为“退休退休”，否

46、则为，否则为“工作工作”。 11.3.3 11.3.3 表达式表达式 逗号表达式使用多个逗号把多个语句捆绑在一起，表达逗号表达式使用多个逗号把多个语句捆绑在一起，表达式的值是最后一个语句的值。例如：式的值是最后一个语句的值。例如： varvar x,y,zx,y,z varvar xyz=(x=1,y=2,z=3); xyz=(x=1,y=2,z=3); alert(xyzalert(xyz) ) 运行结果为运行结果为xyz=3xyz=3。11.4.1 11.4.1 条件控制条件控制 在在JavaScriptJavaScript中常用的条件控制语句有中常用的条件控制语句有ifif、ififel

47、seelse、switchswitch。1. if1. if语句语句 没有没有elseelse的的ifif语句用来执行较为简单的操作，没有分支。语句用来执行较为简单的操作，没有分支。格式为：格式为： if (expression) statement;if (expression) statement; 当当expressionexpression的值为真时，执行的值为真时，执行statementstatement语句。否则程语句。否则程序将跳过此序将跳过此ifif语句。如果语句。如果statementstatement为单条语句时，为单条语句时，statementstatement前后不需要

48、块操作符前后不需要块操作符“”。否则，多条语句必须。否则，多条语句必须用用把多个表达式括起来。例如，根据两个变量把多个表达式括起来。例如，根据两个变量a,ba,b的当前值的当前值判断是否交换判断是否交换a,ba,b两个变量值：两个变量值： 11.4.1 11.4.1 条件控制条件控制 varvar a=1,b=2; a=1,b=2; if (ab) if (ab) varvar temp=a; temp=a; a=b; a=b; b=temp; b=temp; 2. if 2. if else else 语句语句 含有含有elseelse的的ifif语句形成双分支结构，当紧跟在语句形成双分支结

49、构，当紧跟在ifif后的条件后的条件表达式为真时，执行表达式为真时，执行elseelse前的语句，否则执行前的语句，否则执行elseelse后的语句。后的语句。该语句的格式为：该语句的格式为： if (expression) if (expression) statement1; statement1; else else statement2; statement2;11.4.1 11.4.1 条件控制条件控制 例如：例如： varvar a = 1, b = 2; a = 1, b = 2; if (ab) if (ab) a+; a+; else else b+; b+; 上面的语句可以

50、用条件表达式来简写成：上面的语句可以用条件表达式来简写成： varvar a = 1,var b = 2; a = 1,var b = 2; (ab) ? (ab) ? a+:ba+:b+;+; 用上述语句修改例用上述语句修改例11.611.6的程序，代码如下，结果显示在的程序，代码如下，结果显示在图图11.1211.12中。图中。图11.12 if11.12 if条件语句示例。条件语句示例。图图11.12 if11.12 if条件语句示例条件语句示例11.4.1 11.4.1 条件控制条件控制 3. switch3. switch语句语句 当需要对多个变量进行判断时，会采用当需要对多个变量进

51、行判断时，会采用ifif语句的多重嵌套，语句的多重嵌套，这时会形成非常复杂的逻辑结构，对于初学者来讲，这是困难这时会形成非常复杂的逻辑结构，对于初学者来讲，这是困难的。在的。在JavaScriptJavaScript中，使用中，使用switchswitch语句可以方便地代替多个语句可以方便地代替多个ifif语句的并排使用。使代码更易阅读，执行效率更高。语句的并排使用。使代码更易阅读，执行效率更高。 switchswitch语句的格式为：语句的格式为：switch (expression)switch (expression) case condition 1:statement 1; case

52、 condition 1:statement 1; break; break; case condition 2:statement 2; case condition 2:statement 2; break; break; case condition n-1:statement n-1; case condition n-1:statement n-1; break; break; 11.4.1 11.4.1 条件控制条件控制 default:statementdefault:statement n; n; JavaScript JavaScript将根据将根据expressionexp

53、ression的值选择的值选择n-1n-1个操作的一个个操作的一个来执行，如果没有条件符合，则执行来执行，如果没有条件符合，则执行defaultdefault后的语句。后的语句。 例如，下面的语句将根据用户的权限来选择该充当哪个角例如，下面的语句将根据用户的权限来选择该充当哪个角色。色。 varvar privilege = 1; privilege = 1; switch ( switch (userPrivuserPriv = privilege) = privilege)case 1:case 1:alert(alert(超级管理员超级管理员););break;break;case 2:

54、case 2:alert(alert(一般用户一般用户););break;break;default:default:alert(alert(无此权限无此权限);); 11.4.1 11.4.1 条件控制条件控制 在上面程序中，每一个分支中（除在上面程序中，每一个分支中（除defaultdefault分支外），都分支外），都有有breakbreak语句做跳出分支作用，在所有分支都不符合条件时，语句做跳出分支作用，在所有分支都不符合条件时，则执行则执行defaultdefault分支。上面程序，若分支。上面程序，若privilege=6privilege=6，则提示信息，则提示信息为为“无此权限

55、无此权限”。 11.4.2 11.4.2 循环循环 JavaScript JavaScript中可以使用中可以使用whilewhile、dodowhilewhile、forfor三种方法三种方法完成循环或迭代的处理。完成循环或迭代的处理。1. while1. while循环循环 /while /while循环循环 varvar a = prompt( a = prompt(请输入一个整数请输入一个整数,);,); varvar b = prompt( b = prompt(请输入另一个整数请输入另一个整数,);,); while(awhile(a=b)=b) a+; a+; 结果结果a=1a=

56、12. do2. dowhilewhile循环循环 /do/dowhilewhile循环循环 varvar a = prompt( a = prompt(请输入一个整数请输入一个整数,);,); varvar b = prompt( b = prompt(请输入另一个整数请输入另一个整数,);,);11.4.2 11.4.2 循环循环 dodo a+; a+; while(awhile(a=b);=b);结果结果a=2a=2 与与whilewhile循环不同的是，循环不同的是，whilewhile循环先判断，后执行，循环先判断，后执行，dodowhilewhile循环是先执行，后判断。循环是先

57、执行，后判断。3. for3. for循环循环 /for/for循环循环 varvar a = 1, b = 50; a = 1, b = 50; for ( for (varvar i=0;i i=0;i=90=90为为“优秀优秀”，8989分数分数=80=80为为“良好良好”，7979分数分数=70=70为为“中等中等”，6969分数分数=60=60为为“及格及格”，分数，分数60=90) if (score=90) grade= grade=优秀优秀; else if (score=80) else if (score=80) grade= grade=良好良好; else if (sc

58、ore=70) else if (score=70) grade= grade=中等中等; else if (score=60) else if (score=60) grade= grade=及格及格; else grade= else grade=不及格不及格; return grade; return grade; classify(scoreclassify(score) )函数中的函数中的scorescore是形式参数，在函数是形式参数，在函数classify(scoreclassify(score) )中定义了变量中定义了变量gradegrade来存放分类结果，函数来存放分类结果，

59、函数11.5.2 11.5.2 函数调用和参数传递函数调用和参数传递 的最后一行用的最后一行用return grade;return grade;语句返回该变量的值，这个值也语句返回该变量的值，这个值也是函数的返回值。是函数的返回值。 调用函数调用函数classify(scoreclassify(score) )的函数的函数inOutinOut()()定义如下：定义如下： function function inOutinOut()() varvar studentScorestudentScore=prompt(=prompt(输入学生成绩：输入学生成绩：,);,); alert( aler

60、t(该生的成绩为：该生的成绩为： + + classify(studentScoreclassify(studentScore);); classify(scoreclassify(score) )函数的形式参数函数的形式参数scorescore在函数调用时用在函数调用时用实参实参studentScorestudentScore来传递参数值，该值通过来传递参数值，该值通过prompt()prompt()来输入。来输入。这样就可以实现带参数的函数调用。把这两个函数放到例这样就可以实现带参数的函数调用。把这两个函数放到例11.611.6的的中代替原函数中代替原函数arithmeticOperati

61、onarithmeticOperation()()11.5.2 11.5.2 函数调用和参数传递函数调用和参数传递 修改后的程序如下：修改后的程序如下： meta http-equiv=Content-Type content=text/html; =gb2312 函数调用函数调用 script type=text/ function function classify(scoreclassify(score) ) varvar grade; grade; if (score=90) if (score=90) grade= grade=优秀优秀; else if (score=80) els

62、e if (score=80) grade= grade=良好良好; else if (score=70) else if (score=70) grade= grade=中等中等; else if (score=60) else if (score=60) grade= grade=及格及格; else grade= else grade=不及格不及格; 11.5.2 11.5.2 函数调用和参数传递函数调用和参数传递 return grade;return grade; function function inOutinOut()() varvar studentScorestudentS

63、core=prompt(=prompt(输入学生成绩输入学生成绩:,);:,); alert( alert(该生的成绩为：该生的成绩为： + + classify(studentScoreclassify(studentScore);); 函数调用示例函数调用示例 input type=button value= ()/该程序的运行结果如图该程序的运行结果如图11.1311.13和图和图11.1411.14。 11.5.2 11.5.2 函数调用和参数传递函数调用和参数传递 图图11.13 11.13 函数调用示例之数据输入函数调用示例之数据输入图图11.14 11.14 函数调用示例之分类结

64、果函数调用示例之分类结果11.5.2 11.5.2 函数调用和参数传递函数调用和参数传递 例例11.7 11.7 函数调用示例函数调用示例2 2 meta http-equiv=Content-Type content=text/html; =gb2312 函数调用函数调用 script type=text/ function function alertMsg(userNamealertMsg(userName) varvar welcomeMsgwelcomeMsg = = welcome(userNamewelcome(userName);); alert( alert(欢迎您，欢迎您，

65、 + + welcomeMsgwelcomeMsg);); function function welcome(reqNamewelcome(reqName) return return 欢迎您，欢迎您， + + reqNamereqName; ; input type=button value= )/ 11.5.2 11.5.2 函数调用和参数传递函数调用和参数传递 函数中的参数可以自己定义，在本例中，传递的参数本函数中的参数可以自己定义，在本例中，传递的参数本质都是一样的，是从质都是一样的，是从buttonbutton中获得的中获得的“张三张三”，在函数，在函数alertMsgalertM

66、sg中，参数名称被定义成了中，参数名称被定义成了userNameuserName，而在，而在welcomewelcome函函数中，参数名称为数中，参数名称为reqNamereqName。对于参数名称定义，一般按照个。对于参数名称定义，一般按照个人的习惯，并无强制规定，需要注意的是，参数必须区分大人的习惯，并无强制规定，需要注意的是，参数必须区分大小写。小写。 我们将该程序运行并点击按钮，得到下面的结果。我们将该程序运行并点击按钮，得到下面的结果。 在函数中，可以使用在函数中，可以使用returnreturn语句返回函数结果，如本例语句返回函数结果，如本例中的语句。这个语句将返回由字符串中的语句

67、。这个语句将返回由字符串“欢迎您，欢迎您，”和和alertMsgalertMsg函数中传递过来的函数中传递过来的userNameuserName值组合而成最终结果。值组合而成最终结果。 return return 欢迎您，欢迎您， + + reqNamereqName; ;11.5.2 11.5.2 函数调用和参数传递函数调用和参数传递 图图11.14 11.14 函数调用示例函数调用示例2 211.6 11.6 对象对象 对象的概念来自面向对象（对象的概念来自面向对象（Object-orientedObject-oriented）编程。面）编程。面向对象编程需要学习和掌握类、对象、属性、方法

68、、继承、向对象编程需要学习和掌握类、对象、属性、方法、继承、封装等概念。关于这些概念的讨论需要较大的篇幅，鉴于本封装等概念。关于这些概念的讨论需要较大的篇幅，鉴于本书不是专门讨论面向对象方法的，所以我们省略关于这些概书不是专门讨论面向对象方法的，所以我们省略关于这些概念的讨论，感兴趣的读者可以参考面向对象方法学和面向对念的讨论，感兴趣的读者可以参考面向对象方法学和面向对象编程方面的专业书籍。象编程方面的专业书籍。 为了更好理解为了更好理解JavaScriptJavaScript中对象的定义和实例化概念，中对象的定义和实例化概念，我们先分析一个实例。我们先分析一个实例。 例例11.8 11.8

69、用构造器来构造对象，然后对对象进行实例化用构造器来构造对象，然后对对象进行实例化操作。操作。11.6 11.6 对象对象 meta http-equiv=Content-Type content=text/html; =gb2312 构建对象构建对象 script type=text/ /使用构造器使用构造器functionfunction来构造对象来构造对象function function shirt(name,priceshirt(name,price) / /在构造器中声明属性在构造器中声明属性 this.namethis.name = name; = name; this.price

70、this.price = price; = price; /实例化对象实例化对象varvar lacostelacoste = new shirt( = new shirt(鳄鱼鳄鱼,320.00);,320.00);varvar pualFrankpualFrank = new shirt( = new shirt(大嘴猴大嘴猴,430.00);,430.00);/弹出提示信息弹出提示信息 11.6 11.6 对象对象 /弹出提示信息弹出提示信息alert(lacoste.namealert(lacoste.name + : + + : + lacoste.pricelacoste.pric

71、e););alert(pualFrank.namealert(pualFrank.name + : + + : + pualFrank.pricepualFrank.price););/动态添加属性动态添加属性 lacoste.sizelacoste.size = XXL; = XXL; alert(lacoste.sizealert(lacoste.size);); 运行该程序，得到如下效果。运行该程序，得到如下效果。11.6 11.6 对象对象 图图11. 15 创建对象创建对象 11.6 11.6 对象对象 使用使用functionfunction这样定义函数的方式构造一个对象，这个这样

72、定义函数的方式构造一个对象，这个函数就称之为构造函数。构造函数名称即为对象名，构造函函数就称之为构造函数。构造函数名称即为对象名，构造函数的参数，是对象的属性值（或其他变量），构造器函数内，数的参数，是对象的属性值（或其他变量），构造器函数内，使用使用this.this.属性名称属性名称 的方式创建对象属性。在本例中，对象的方式创建对象属性。在本例中，对象名称为名称为shirtshirt，对象属性在构造器函数内使用，对象属性在构造器函数内使用this.namethis.name和和this.pricethis.price来创建，两个属性名称分别为来创建，两个属性名称分别为namename和和p

73、riceprice，在创，在创建属性完成后，紧接着将传入构造器的参数对应属性进行赋建属性完成后，紧接着将传入构造器的参数对应属性进行赋值，值，this.namethis.name=name=name（第一个（第一个namename是属性名称，第二个是属性名称，第二个namename是属性值）和是属性值）和this.pricethis.price=price=price。11.6 11.6 对象对象 function function shirt(name,priceshirt(name,price) / /在构造器中声明属性在构造器中声明属性 this.namethis.name = name

74、; = name; this.pricethis.price = price; = price; 紧接着，程序实例化了对象，实例化对象的时候，仍然紧接着，程序实例化了对象，实例化对象的时候，仍然选择使用了选择使用了varvar定义的方式，在赋值符号（定义的方式，在赋值符号（= =）后，使用）后，使用“newnew”关键字定义新实例来自某个对象，本例中为关键字定义新实例来自某个对象，本例中为shirtshirt。实例化对象的属性值在对象名后用逗号（实例化对象的属性值在对象名后用逗号（, ,）分割。）分割。 varvar lacostelacoste = new shirt( = new shir

75、t(鳄鱼鳄鱼,320.00);,320.00); 而对实例属性，可以写为而对实例属性，可以写为 实例名称实例名称.属性属性 的方式。下的方式。下面的代码使用消息框显示了实例面的代码使用消息框显示了实例lacostelacoste的的namename属性值和属性值和priceprice11.6 11.6 对象对象 属性值。属性值。 alert(lacoste.namealert(lacoste.name + : + + : + lacoste.pricelacoste.price);); JavaScript JavaScript还允许对实例动态的添加属性。在本例中，还允许对实例动态的添加属性。

76、在本例中，我们动态的为实例我们动态的为实例lacostelacoste添加了添加了sizesize属性，并且赋值为属性，并且赋值为XXLXXL； lacoste.sizelacoste.size = XXL; = XXL; 除了以上介绍的对象知识外，除了以上介绍的对象知识外，JavaScriptJavaScript还可以在构造还可以在构造器中声明函数。可以将上面代码修改为：器中声明函数。可以将上面代码修改为： function function shirt(name,priceshirt(name,price) / /在构造器中声明属性在构造器中声明属性 this.namethis.name

77、= name; = name; this.pricethis.price = price; = price; this.alertMsgthis.alertMsg = = function()alertfunction()alert(品牌：品牌： + + this.namethis.name + + 价格：价格： + + this.pricethis.price);); 11.6 11.6 对象对象 /实例化对象实例化对象 varvar lacostelacoste = new shirt( = new shirt(鳄鱼鳄鱼,320.00);,320.00); varvar pualFrank

78、pualFrank = new shirt( = new shirt(大嘴猴大嘴猴,430.00);,430.00); / /调用函数调用函数 lacoste.alertMsglacoste.alertMsg();(); pualFrank.alertMsgpualFrank.alertMsg();(); 程序保存并运行后，得到如下结果。程序保存并运行后，得到如下结果。图图11.16 构造器内声明函数构造器内声明函数11.7 11.7 错误捕获和处理错误捕获和处理 JavaScriptJavaScript使用的错误捕获与很多高级语言类似，通过使用的错误捕获与很多高级语言类似，通过try/cat

79、ch/finallytry/catch/finally程序块构建错误捕获和处理机制。程序仍程序块构建错误捕获和处理机制。程序仍然是尝试执行然是尝试执行trytry块内代码，如果出现错误，捕获它并执行块内代码，如果出现错误，捕获它并执行catchcatch块内代码，最终无论怎样都执行块内代码，最终无论怎样都执行finallyfinally块内代码。我块内代码。我们把例们把例11.811.8的错误进行一下捕获。的错误进行一下捕获。例例11.9 11.9 catchErr.htmcatchErr.htm meta http-equiv=Content-Type content=text/html;

80、=utf-8 例例11.10 11.10 错误捕获错误捕获 script type=text/ function function shirt(name,priceshirt(name,price) / /在构造器中声明属性在构造器中声明属性11.7 11.7 错误捕获和处理错误捕获和处理 / /在构造器中声明属性在构造器中声明属性 this.namethis.name = name; = name; this.pricethis.price = price; = price; this.alertMsgthis.alertMsg = = function()alertfunction()al

81、ert(品牌：品牌： + + this.namethis.name + + 价格：价格： + + this.pricethis.price);); / /实例化对象实例化对象 varvar lacostelacoste = new shirt( = new shirt(鳄鱼鳄鱼,320.00);,320.00); varvar pualFrankpualFrank = new shirt( = new shirt(大嘴猴大嘴猴,430.00);,430.00); / /调用函数调用函数 try try lacoste.alertmsglacoste.alertmsg();(); catch(e

82、catch(e) alert(ealert(e);); 11.7 11.7 错误捕获和处理错误捕获和处理 finally finally alert(finallyalert(finally块内的内容最终都会执行块内的内容最终都会执行);); 将代码保存后运行，我们能看到首先弹出错误信息，其将代码保存后运行，我们能看到首先弹出错误信息，其次执行次执行finallyfinally块中的内容。块中的内容。11.811.8内部内部JavaScriptJavaScript和外部和外部JavaScriptJavaScript 通常情况下，程序员会把通用的过程或函数封转为一个通常情况下，程序员会把通用的过

83、程或函数封转为一个独立的独立的. .jsjs文件，这个文件和我们上面叙述的代码没有任何区文件，这个文件和我们上面叙述的代码没有任何区别，仅仅在于存在于服务器的形式不一样，类似我们前面讲别，仅仅在于存在于服务器的形式不一样，类似我们前面讲过的内部过的内部CSSCSS和外部和外部CSSCSS形式。对于在页面中引用这个文件，形式。对于在页面中引用这个文件，我们可以在页面的我们可以在页面的和和之间写入引用代码来完成。之间写入引用代码来完成。script type=text/在本书中，为了保持程序的一致性和易读性，除了标准在本书中，为了保持程序的一致性和易读性，除了标准通用函数外，其他通用函数外，其他J

84、avaScriptJavaScript均采用内部均采用内部JavaScriptJavaScript方式来方式来完成。在实际软件项目中，程序员应该根据实际情况来确定完成。在实际软件项目中，程序员应该根据实际情况来确定使用哪种方式。使用哪种方式。11.9 11.9 注释注释使用使用“/”前导对一行代码进行注释，如：前导对一行代码进行注释，如：/循环取出根节点中内容循环取出根节点中内容使用使用/*/*和和* */ /注释代码块，如：注释代码块，如：/*/* * author woods * author woods * * 封装封装XPathXPath * * paramparam xmldocxmldoc 执行查找的节点执行查找的节点 * * paramparam sXpathsXpath XPathXPath表达式表达式 * */ /注释可根据个人习惯来进行，编者通常使用第注释可根据个人习惯来进行，编者通常使用第1 1种方法对种方法对具体代码做注释，使用第具体代码做注释，使用第2 2种方法对函数或过程作总说明。种方法对函数或过程作总说明。