详情
本书详细介绍了JavaScript编程。全书共分为24章，分别介绍了Web脚本编写和JavaScript语言的概念、JavaScript的基础知识、文档对象模型、JavaScript的高级功能等知识。
书名：JavaScript入门经典（第5版）
ISBN：978-7-115-31779-7
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美]Phil Ballard Michael Moncur
译 王 军
责任编辑 陈冀康
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
读者是我们最重要的批评家和评论家。我们非常重视读者的意见，想知道我们哪些方面做的不错，哪些方面还需要改善；想知道读者期望什么领域的图书，以及其他任何有益的建议。
我们欢迎读者反馈信息，读者可以通过电子邮件或书信来表达自己对于本书的看法和建议。
需要提醒的是，我们不能帮助读者解决实际的技术问题。
在向我们反馈信息时，请读者写明图书的名称、作者，以及自己的姓名和电子邮件地址。我们将仔细地查看这些建议，并且将它们转达给作者和编辑。
电子邮件地址：feedback@samspublishing.com
通信地址：Sams Publishing
ATTN:Reader Feedback
800 East 96th Street
Indianapolis, IN 46240 USA
本书是学习JavaScript编程的经典教程。全新的第5版涵盖了JavaScript 1.8及其以上版本、Ajax和jQuery等内容。本书着力介绍JavaScript当今主要特性的基本技巧，从基本概念开始，逐步地介绍按照当今Web标准编写JavaScript代码的最佳方式。
全书分为七个部分，共24章。第一部分“JavaScript基础”，包括第1章到第5章，介绍了如何使用常用函数编写简单的脚本，第二部分“JavaScript进阶”，包括第6章到第10章，介绍了更复杂的编程范例，比如循环控制、事件处理、面向对象编程、JSON标记、cookie。第三部分“文档对象模型（DOM）”，包括第11章到第15章，介绍了如何使用CSS遍历和编辑DOM（文档对象模型）树，对页面元素进行样式代和动画。第四部分“Ajax”，包括第16到第18章，介绍如何利用XMLHTTPRequest对象向服务器进行后台调用，并且处理服务器的响应；建立简单的Ajax库，调试Ajax应用。第五部分“使用JavaScript库”，包括第19章到第21章，介绍如何使用第三方库，比如Prototype和jQuery，简化跨浏览器的开发工作。第六部分“JavaScript与其他Web技术的配合”，包括第22章到第24章，通过范例介绍如何使用JavaScript控制多媒体、展示HTML5的功能、编写浏览器插件。第七部分“附录”介绍了JavaScript编程常用工具，并给出了JavaScript快速参考。
本书内容循序渐进，逐步深入，概念和知识点讲解清楚，而且每章最后配有练习，供读者检查和巩固所学知识。本书适合对Web应用开发感兴趣的初中级中户阅读和自学，也可作为大中专院校相关专业的教材。
Phil Ballard的另一本著作是《Sams Teach Yourself Ajax in 10 Minutes》。他于1980年毕业于英国的利兹大学，以优异成绩获得了电子专业的荣誉学位。毕业后，他先是一家跨国公司的研究人员，接着担任了高科技部门的管理职务，然后成为了专职的软件工程顾问。
近些年来，通过“The Mouse Whisperer”项目（www.mousewhisperer.co.uk），Ballard为全球的客户提供了关于网站、互联网设计与开发的服务。
Michael Moncur是自由职业者。他作为Web站点管理员和作家，管理着多个网站，其中包括最古老的著名报价网站（该网站在1994年上线运行）。他曾编写了《Sams Teach Yourself DHTML in 24 Hours》，还著有数本网络、认证和数据库等方面的畅销书。他和妻子现居住在犹他州盐湖城。
对于想学习JavaScript的读者来说，很可能已经掌握了HTML和Web页面设计的基本知识，希望为网页添加一些更好的互动性；或者，目前是在使用其他语言进行编程，想了解一下JavaScript能够提供哪些更多的功能。
如果对HTML没有任何了解，或是没有任何计算机编程经验，我们建议读者先了解一些HTML基本知识。HTML是非常易于理解的，读者不必成为HTML专家就足以了解本书的JavaScript范例了。
JavaScript很适合作为学习编程技术的出发点，在调试过程所掌握的基本概念大多可以用于其他的编程语言，比如C、Java或PHP。
JavaScript最初的用途是相当有限的，它只具备基本的功能，对于浏览器的支持也很不稳定，所以只被看作花哨的小技巧。现在，随着浏览器对W3C标准的支持越来越好，对JavaScript的实现不断改善，JavaScript已经成为一种很正规的编程语言。
其他高级编程语言里的编程规则能够方便地应用于JavaScript，比如面向对象编程方法有助于编写稳定、易读、易维护和易重用的代码。
“低调”的编程技术和DOM脚本都致力于为Web页面增加更好的互动，同时保持HTML简单易读，并且能够轻松地与代码分离。
本书着力介绍JavaScript当今主要特性的基本技巧，从基本概念开始，逐步地介绍按照当今Web标准编写JavaScript代码的最佳方式。
本书全部代码范例都是符合HTML5标准的，但考虑到目前并不是所有Web浏览器都支持HTML5，这些范例一般会避免使用HTML5特有的语法。无论读者使用什么样的计算机或操作系统，这些代码都能够在常见浏览器上正常运行。
除了每个课程里的正文之外，书中还有一些标记为“说明”、“提示”或“注意”的方框。
说明
这里的内容提供了额外的解释，帮助读者理解正文和范例。
提示:
这些方框里的内容提供额外的技巧、提示，帮助读者更轻松地进行编程。
注意:
了解这些内容以避免常见的错误。
实践练习
每章都包括至少一个部分的内容指导读者尝试自己完成脚本，帮助读者建立编写JavaScript脚本的信心。
每章的最后都有这三部分内容：
“问答”主要是解答课程中最常遇到的问题；
“测验”用于测试读者对课程内容的掌握情况；
“练习”根据课程的内容提供一些让读者进一步深入学习的建议。
本书正文分为六个部分，内容的难度逐步提高。
第一部分是JavaScript语言的基本知识，介绍了如何使用常用函数编写简单的脚本。这部分的内容主要针对缺少或没有编程知识及JavaScript知识的读者。
这部分介绍更复杂的编程范例，比如循环控制、事件处理、面向对象编程、JSON标记、cookie。
这部分内容着重介绍如何使用CSS遍历和编辑DOM（文档对象模型）树，对页面元素进行样式化和动画。其中强调了使用好的编码方式，比如低调JavaScript。
这部分介绍如何利用XMLHttpRequest对象向服务器进行后台调用，并且处理服务器的响应；建立简单的Ajax库，调试Ajax应用。
这部分介绍如何使用第三方库，比如Prototype和jQuery，简化跨浏览器的开发工作。
最后这部分的范例介绍如何使用JavaScript控制多媒体、展示HTML 5的功能、编写浏览器插件等。
编写JavaScript并不需要昂贵和复杂的工具，比如集成开发环境（IDE）、编译器或调试器。
本书的范例代码都可以利用像Windows记事本这样的文本编辑软件生成。每个操作系统都会提供至少一款这样的软件，而且互联网上还有大量免费或廉价的类似软件。
说明：
附录A“JavaScript开发工具”列出的JavaScript开发工具和资源都可以方便地获得。
为了查看代码的运行情况，我们需要一个Web浏览器，比如IE、Firefox、Opera、Safari或Chrome。建议使用浏览器的最新稳定版本。
本书绝大多数范例代码在运行时并不需要互联网连接，只要把源代码保存到计算机上，然后用浏览器打开它们就可以了。例外的情况是关于cookie和Ajax的，这些代码需要一个Web连接（或者是局域网上的一个Web服务连接）和一些Web空间来上传代码。对于尝试过HTML编码的读者来说，都应该具备上述配置了；即使没有这些配置，使用业余级别的Web主机账户就可以满足要求，而这些都是很便宜的。（如果想测试Ajax代码，请确认Web主机允许运行PHP语言脚本，而基本上所有主机都是允许的。）
Phil Ballard, Michael Moncur: Sams Teach Yourself JavaScript in 24 Hours, Fourth Edition
ISBN: 978-0-672-33608-9
Copyright © 2013 by Sams Publishing.
Authorized translation from the English language edition published by Sams.
All rights reserved.
本书中文简体字版由美国Sams出版公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
读者可以访问www.informit.com/register，以本书信息进行注册，就可以方便地获得与本书相关的更新、下载和勘误。
第1章 了解JavaScript
第2章 创建简单的脚本
第3章 使用函数
第4章 DOM对象和内置对象
第5章 数据类型
本章主要内容包括：
与其只有文本内容的祖先相比，现代的Web几乎是完全不同的，它包含了声音、视频、动画、交互导航等很多元素，而JavaScript对于实现这些功能扮演了非常重要的角色。
在第1章中，我们将简要介绍JavaScript，回顾它的发展历史，展示它如何能够改善Web页面，读者还会直接开始编写一些实用的JavaScript代码。
阅读本书的读者很可能已经熟练使用万维网，而且对于使用某种HTML编写Web页面有一些基本的理解。
HTML不是编程语言（如其名所示），而是一款标签语言，用于标签页面的各个部分在浏览器里以何种方式展现，比如加粗或斜体字，或是作为标题，或是一系列选项，或是数据表格，或是其他修饰方式。
一旦编写完成，这些页面的本质就决定了它们是静态的。它们不能对用户操作做出响应，不能进行判断，不能调整页面元素显示。无论用户何时访问这些页面，其中的标签都会被以相同的方式进行解析和显示。
根据使用万维网的经验，我们知道网站可以做的事情要多的多。我们时常访问的页面基本上都不是静态的，它们能够包含“活”的数据，比如分享商品价格或航班到达时间，字体和颜色的动画显示，或是点击相册或数据列表这样的交互操作。
这些灵活的功能是通过程序（通常称为“脚本”）来实现的，它们在后台运行，操纵着浏览器显示的内容。
说明：
“脚本”这个术语显然来自于话剧和电视领域，那里所用的脚本决定了演员或主持人要做的事情。对于Web页面来说，主角是页面上的元素，而脚本是由某种脚本语言（比如JavaScript）生成的。对于本书描述的内容来说，“程序”与“脚本”两个术语基本上是可以通用的。
给静态页面添加脚本有两种最基本的方式。
说明：
有一种很酷的方法可以把来自于服务器端脚本的输出组合到客户端脚本，在本书第四部分介绍Ajax技术时将有所涉及。
本书介绍的JavaScript是互联网上最广泛应用的客户端脚本。
用JavaScript编写的程序能够访问Web页面的元素和运行它的浏览器，对这些元素执行操作，还可以创建新元素。JavaScript常见的功能包括：
由于JavaScript代码只在用户浏览器内部运行，页面会对JavaScript指令做出快速响应，从而改善用户的体验，让Web应用更像在用户本地计算机运行的程序而不是一个页面。另外，JavaScript能够检测和响应特定的用户操作，比如鼠标点击和键盘操作。
几乎每种Web浏览器都支持JavaScript。
说明：
虽然JavaScript与Java的名称有些相同部分，但两者几乎没有什么联系。虽然它们有一些相同的语法，但这些共同之处并不比与其他语言的共同之处多。
JavaScript的祖先可以追溯到20世纪90年代中期，首先是Netscape Navigator 2引入了1.0版本。
随后，“欧洲计算机制造商协会”（ECMA）开始介入，制定了ECMAScript规范，奠定了JavaScript迅猛发展的基础。与此同时，微软开发了自己版本的JavaScript：jScript，在IE浏览器上使用。
说明：
JavaScript不是仅有的客户端脚本语言，微软的浏览器还支持自己的Visual Basic面向脚本的版本：VBScript。
但是，JavaScript得到了更好的浏览器支持，现代浏览器几乎都支持它。
在20世纪90年代后期，Netscape Navigator 4和IE 4都宣布对JavaScript提供更好的支持，比以前版本的浏览器大有改善。
但不幸的是，这两组开发人员走上了不同的道路，分别给JavaScript语言本身及如何与Web页面交互定义了自己的规范。
这种荒唐的情况导致开发人员总是要编写两个版本的脚本，利用一些复杂的、经常可能导致错误的程序来判断用户在使用什么浏览器，然后再切换到适当版本的脚本。
好在“网际网络联盟”（W3C）非常努力地通过DOM规范各个浏览器制作商生成和操作页面的方式。1级DOM于1998年完成，2级版本完成于2000年年末。
关于DOM是什么或它能做什么，本书的相应章节会有所介绍。
说明：
“网际网络联盟”（W3C）是一个国际组织，致力于制定开放标准来支撑互联网的长期发展。其站点http://www.w3.org/包含了大量与Web标准相关的信息与工具。
当用户访问一个页面时，页面中包含的JavaScript代码会与其他页面内容一起传递给浏览器。
在HTML里使用<script>和</script>标签，可以在HTML代码里直接包含JavaScript语句。
<script>
…JavaScript语句…
</script>本书的代码都是符合HTML5规范的，也就是说，<script>元素没有任何必须设置的属性（在HTML5里，type属性是可选的，本书的范例里都没有使用这个属性）。但如果是在HTML4.x或XHTML页面里添加JavaScript，就需要使用type属性了：
<script type="text/javascript">
…JavaScript语句…
</script>说明：
JavaScript是一种解释型语言，不是C++或Java那样的编译语言。JavaScript指令以普通文本形式传递给浏览器，然后依次解释执行。它们不必首先“编译”成只有计算机处理器能够理解的机器码，这让JavaScript程序很便于阅读，能够迅速地进行编辑，然后在浏览器里重新加载页面就可以进行测试。
偶尔还会看到<script>元素使用属性language="JavaScript"，这种方式已经被抛弃很久了。除非是需要支持很古老的浏览器，比如Navigator或Mosaic，否则完全不必使用这种方式。
说明：
“抛弃”这个词对于软件功能或编码方式来说意味着最好避免使用，因为它们已经被新功能或新方式取代了。
虽然为了实现向下兼容而仍然使用这类的功能，但“被抛弃”这个状态通常暗示这样的功能会在不久之后被清除。
本书的范例把JavaScript代码放置到文档的body部分，但实际上JavaScript代码也能出现在其他位置。我们还可以利用<script>元素加载保存在外部文件里的JavaScript代码，关于这方面的详细介绍请见第2章。
“文档对象模型”（DOM）是对文档及其内容的抽象表示。
每次浏览器要加载和显示页面时，都需要解释（更专业的术语是“解析”）构成页面的HTML源代码。在解析过程中，浏览器建立一个内部模型来代表文档里的内容，这个模型就是DOM。在浏览器渲染页面的可见内容时，就会引用这个模型。我们利用JavaScript可以访问和编辑这个DOM模型的各个部分，从而改变页面的显示内容和用户交互的方式。
在早期，JavaScript只能对Web页面的某些部分进行最基本的访问，比如访问页面里的图像和表单，可以选择“页面上第二个表单”，或是“名称为registration的表单”。
Web开发人员有时把这种情形称为0级DOM，以便与W3C的1级DOM向下兼容。0级DOM有时也被称为BOM（浏览器对象模型）。从0级DOM开始，W3C逐渐扩展和改善了DOM规范。它更大的野心是不仅让DOM能够用于Web页面与JavaScript，也能用于任何编程语言和XML。
说明：
本书使用1级和2级DOM定义。如果想了解各种级别DOM的详细内容，可以访问https://developer.mozilla.org/en/DOM_Levels。
浏览器制作商在最近的版本中对DOM的支持都有了很大的改善。在编写本书时，IE最新版本是9，Netscape Navigator以Mozilla Firefox重新出世（当前版本是9），其他竞争对手还包括Opera、Konqueror、苹果公司的Safari、谷歌的Chrome和Chromium，都对DOM提供了出色的支持。
Web开发人员的处境有了很大改善。除了极特殊的一些情况，只要我们遵循DOM标准，在编程时基本上可以不考虑为某个浏览器编写特殊代码了。
说明：
早期浏览器，比如Netscape Navigator（任何版本）和IE 5.5以前版本，现在基本上已经没有人使用了。本书只关注与1级或更高级别DOM兼容的现代浏览器，比如IE 7+、Firefox、Google Chrome、Apple Safari、Opera和Konqueror。 我们建议读者把自己使用的浏览器升级到最新版本。
浏览器每次加载和显示页面时，都在内存里创建页面及其全部元素的一个内部表示体系，也就是DOM。在DOM里，页面的元素具有一个逻辑化、层级化的结构，就像一个由父对象和子对象组成的树形结构。这些对象及其相互关系构成了Web页面及显示页面的浏览器的抽象模型。每个对象都有“属性”列表来描述它，而利用JavaScript可以使用一些方法来操作这些属性。
这个层级树的最顶端是浏览器window对象，它是DOM树里一切对象的根。
window对象具有一些子对象，如图1.1所示。图1.1中第一个子对象是document，这也是本书最经常使用的对象。浏览器加载的任何HTML页面都会创建一个document对象，包含全部HTML内容及其他构成页面显示的资源。利用JavaScript以父子对象的形式就可以访问这些信息。这些对象都具有自己的属性和方法。
图1.1 window对象及其一些子对象
图1.1中window对象的其他子对象是location（包含着当前页面URL的全部信息）、history（包含浏览器以前访问的页面地址）和navigator（包含浏览器类型、版本和兼容的信息）。第4章将会更详细地介绍这些对象，其他章节也会使用它们，但目前我们着重于document对象。
我们用句点方式表示树形结构里的对象：
如图1.1所示，document对象是window对象的子对象，所以在DOM里就像这样表示它：
HTML页面的body部分在DOM里是document对象的一个子对象，所以表示为：
这种表示法的最后一个部分除了可以是对象外，还可以是属性或方法：
举例来说，如果想访问当前文档的title属性，也就是HTML标签<title>和</title>，我们可以这样表示：
提示：
window对象永远包含当前浏览器窗口，所以使用window.document就可以访问当前文档。作为一种简化表示，使用document也能访问当前文档。
如果是打开了多个窗口，或是使用框架集，那么每个窗口或框架都有单独的window和document对象，为了访问其中的某一个文档，需要使用相应的窗口名称和文档名称。
现在来介绍window和document对象的一些方法。首先介绍的这两个方法都能提供与用户交互的手段。
即使不知道window.alert()，我们实际上在很多场合已经看到过它了。window对象位于DOM层级的最顶端，代表了显示页面的浏览器窗口。当我们调用alert()方法时，浏览器会弹出一个对话框显示设置的信息，还有一个“确定”按钮。范例如下：
<script>window.alert("Here is my message");</script>这是第一个使用句点表示法的范例，其中调用了window对象的alert()方法，所以按照object.method表示方法就写为window.alert。
提示：
在实际编码过程中，可以不明确书写window对象名称。因为它是DOM层级结构的最顶层（有时也被称为“全局对象”），任何没有明确指明对象的方法调用都会被指向window，所以<script>alert("Here is my message");</script>也能实现同样功能。
请注意要显示的文本位于引号之中。引号可以是双引号，也可以是单引号，但必须有引号，否则会产生错误。
这行代码在浏览器执行时，产生的弹出对话框如图1.2所示。
图1.2 window.alert()对话框
提示：
图1.2显示的弹出对话框由运行在Windows 7旗舰版环境下的Chrome浏览器产生。不同操作系统、不同浏览器、不同显示设置都会影响这个对话框的最终显示情况，但它总是会包含要显示的信息和一个“确定”按钮。
提示：
在用户点击“确定”按钮之前，页面上是不能进行其他任何操作的。具有这种行为模式的对话框被称为“模态”对话框。
实践
在介绍一种编程语言时，如果不使用传统的“Hello World!”范例似乎说不过去。这个简单的HTML文档如程序清单1.1所示。
程序清单1.1 使用alert()对话框实现“Hello World！”
在文本编辑器里创建一个文档，命名为hello.html，输入上述代码，保存到计算机，然后在浏览器里打开它。
注意：
有些文本编辑器会尝试给我们指定的文件名添加.txt后缀，因此在保存文件时要确保使用了.html后缀，否则浏览器可能不会正常打开它。
几乎全部操作系统都允许我们用鼠标右键单击HTML文件图标，从弹出菜单里选择“打开方式…”（或类似的字眼）。另外一种打开方式是先运行喜欢的浏览器，然后从菜单栏里选择“文件”>“打开”，找到相应的文件，加载到浏览器。
注意：
有些浏览器的默认安全设置会在打开本地内容（比如本地计算机上的文件）时显示警告内容，如果看到这样的提示，只要选择允许继续操作即可。
这时会看到如图1.2所示的对话框，但其中的内容是“Hello World!”。如果计算机里安装了多个浏览器，可以尝试用它们打开这个文件，比较得到的结果。对话框外观可能有细微差别，但信息和“确定”按钮都是一样的。
从这个方法名称就可以猜到它的功能。显然它不是弹出对话框，而是直接向HTML文档写入字符，如图1.3所示。
图1.3 使用document.write()
说明：
实际上，无论从功能来说，还是从编码风格与可维护性来说，document.write都是一种向页面输出内容的笨拙方式。大多数“严肃”的JavaScript程序员都不会使用这种方式，更好的方式是使用JavaScript和DOM。但在本书第一部分介绍JavaScript语言的基本知识时，我们还会使用这个方法。
正如前文所述，DOM树包含着方法和属性。前面的范例展示了如何使用document对象的write方法向页面输出文本，现在我们来读取document对象的属性。以document.title属性为例，它包含了HTML文档里<title>标签的内容。
在文本编辑器里修改hello.html，修改对window.alert()方法的调用：
注意到document.title并没有包含在引号里，这时如果使用引号，JavaScript会认为我们要输出文本“document.title”。在不使用引号的情况下，JavaScript会把document.title属性的值传递给alert()方法，得到的结果如图1.4所示。
图1.4 显示document对象的属性
本章简要介绍了服务器端脚本和客户端脚本的概念，还简述了JavaScript和DOM的历史演变，大概展示了JavaScript能够实现什么功能来改善页面和优化用户体验。
本章还简单介绍了DOM的基本结构，展示了如何使用JavaScript访问特定对象及其属性，并且使用这些对象。
后面的章节将基于这些基本概念逐渐展开更高级的脚本编程项目。
问：如果使用服务器端脚本（比如PHP或ASP），还能在客户端使用JavaScript进行编程吗？
答：当然可以。事实上，这种组合方式能够形成一个有力的平台，实现功能强大的应用。Google Mail就是个很好的范例。
问：应该对多少种不同的浏览器进行测试呢？
答：方便的情况下越多越好。编写与标准兼容的避免使用浏览器专用功能的代码，从而让程序在各个浏览器上都能顺畅运行，这不是简单的事情。浏览器在特定功能的实现上有一两处细微差别，总是难免的。
问：包含JavaScript代码会不会增加页面加载的时间？
答：是的，但通常这种影响很小，可以忽略不计。如果JavaScript代码的内容比较多，就应该在用户可能使用的最慢连接上进行测试。除了一些极其特殊的情况，这一般不会成为什么问题。
请先回答问题，再参考后面的答案。
1．JavaScript是解释型语言还是编译型语言？
a．编译型语言
b．解释型语言
c．都不是
d．都是
2．若要添加JavaScript语句，必须在HTML页面里使用什么标签？
a．<script>和</script>
b．<type="text/javascript">
c．<!--和-->
3．DOM层级结构的最顶层是：
a．document属性
b．document方法
c．document对象
d．window对象
1．选b。JavaScript是一种解释型语言，它以纯文本方式编写代码，一次读取并执行一条语句。
2．选a。JavaScript语句添加在<script>和</script>之间。
3．选d。window对象位于DOM树的顶端，document对象是它的一个子对象。
在本章的“实践”环节中，我们使用了这样一行代码：
它可以输出document对象的title属性。请尝试修改这段脚本，输出document.lastModified属性，它包含的是Web页面最后一次修改的日期和时间。（提示：属性名称是区分大小写的，注意这个属性里大写的M。）还可以尝试用document.write()代替alert()方法向页面直接输出信息。
在不同的浏览器里运行本章的范例代码，观察页面显示情况有什么区别。
本章主要内容包括：
第1章介绍了JavaScript是一种能够让Web页面更具有交互性的脚本语言。
本章将介绍如何向Web页面添加JavaScript，以及它的一些基本语法，比如语句、变量、操作符和注释。同时，本章将涉及更加实用的脚本范例。
有时在<script>标签里可以看到HTML风格的注释标签<!--和-->，比如：
这是为了兼容不能识别<script>标签的老版本浏览器。这种“注释”方式可以防止老版本浏览器把JavaScript源代码当作页面内容显示出来。除非我们有特别明确的需求要支持老版本的浏览器，否则是不需要使用这种技术的。
正如上一章所介绍的，JavaScript代码是和页面内容一起发送给浏览器的，这是如何做到的呢？有两种方法可以把JavaScript代码集成到HTML页面，它们都要使用第1章介绍的<script>和</script>标签。
第一种方法是把JavaScript语句直接包含在HTML文件里，就像上一章所介绍的一样。
<script>
<!--
…JavaScript语句…
-->
</script><script>
…JavaScript语句…
</script>第二种方法，也是更好的方法，是把JavaScript代码保存到单独的文件，然后利用<script>标签的src（源）属性把这个文件包含到页面里。
前例包含了一个名为mycode.js的文件，其中有我们编写的JavaScript语句。如果JavaScript文件与调用脚本不在同一个文件夹，就需要使用相对或绝对路径：
或
说明：
按照惯例，JavaScript代码文件的名称后缀是.js。但从实际情况来看，代码文件的名称可以使用任何后缀，浏览器都会把其中的内容当作JavaScript来解释。
把JavaScript代码保存到单独的文件有不少好处：
注意：
外部文件里不能使用<script>和</script>标签，也不能使用任何HTML标签，只能是纯粹的JavaScript代码。
程序清单2.1是第1章里Web页面的代码，修改为在<body>区域里包含了一个JavaScript代码文件。JavaScript可以放置到HTML页面的<head>或<body>区域里，但一般情况下，我们把JavaScript代码放到页面的<head>区域，从而让文档的其他部分能够调用其中的函数。第3章将介绍函数的有关内容。就目前而言，我们把范例代码暂时放到文档的<body>区域。
程序清单2.1 包含了JavaScript文件的HTML文档
当JavaScript代码位于文档的body区域时，在页面被呈现时，遇到这些代码就会解释和执行，然后继续完成页面的其他内容。
说明：
JavaScript程序是由一些单独的指令组成的，这些指令被称为“语句”。为了能够正确地解释语句，浏览器对语句的书写方式有所要求。第一种方式是把每个语句一行：
语句1
语句2另一种方式是在同一行里书写多个语句，每个语句以分号表示结束。
语句1; 语句2;为了提高代码的可读性，也为了减少无意中造成的语法错误，最好是结合上述两种方式的优点，也就是一行书写一个语句，并且用分号表示语句结束：
语句1;
语句2;
JavaScript还可以使用HTML注释语法来实现单行注释：
但我们一般不在JavaScript中使用这种方式。
有些语句的作用并不是为了让浏览器执行，而且为了方便需要阅读代码的人。我们把这些语句称为“注释”，它有一些特定的规则。
长度在一行之内的注释可以在行首以双斜线表示：
<-- 注释内容 -->//注释内容如果需要用这种方式添加多行注释，需要在每一行的行首都使用这个前缀：
//注释内容
//注释内容实现多行注释的更简单方法是使用/*标签注释的开始，使用*/标签注释的结束。其中的注释内容可以跨越多行。
/* 这里的注释
内容可以跨越
多行 */说明：
在代码里添加注释是一种非常好的习惯，特别是在编写较大、较复杂的JavaScript程序时。注释不仅可以作为我们自己的提示，还可以为以后阅读代码的其他人提供指示和说明。
说明：
注释的确会略微增加JavaScript源文件的大小，从而对页面加载时间产生不好的影响。一般来说，这种影响小到可以忽略不计，但如果的确需要消除这种影响，我们可以清除JavaScript文件里的全部注释，形成所谓的“运行”版本，用于实际的站点。
变量可以看作一种被命名的分类容器，用于保存特定的数据。数据可以具有多种形式：整数或小数、字符串或其他数据类型（本章稍后有所介绍）。变量可以用任何方式进行命名，但我们一般只使用字母、数字、美元符号（$）和下划线。
注意：
JavaScript是区分大小写的，变量mypetcat和Mypetcat或MYPETCAT是不一样的。
JavaScript程序员和其他很多程序员习惯使用一种名为“驼峰大小写”（或被称为“混合大小写”等）的方法，也就是把各个单词或短语连写在一起，没有空格，每个单词的首字母大写，但名称的第一个字母可以是大写或小写。按照这种方式，前面提到的变量就应该命名为MyPetCat或myPetCat。
假设有个变量的名称是netPrice。通过一个简单的语句就可以设置保存在netPrice里的数值：
这个操作被称为给变量“赋值”。有些编程语言在赋值之前必须进行变量声明，JavaScript不必如此。但变量声明是个很好的编程习惯，在JavaScript里可以这样做：
还可以把上述两个语句结合成一个语句，更加简洁和易读。
如果要把“字符串”赋值给一个变量，需要把字符串放到一对单引号或双引号之中：
然后就可以传递这个变量所保存的值，比如传递给window.alert方法：
生成的对话框会计算变量的值，然后显示出来，如图2.1所示。
图2.1 显示变量productName的值
提示：
尽量使用含义明确的名称，比如productName和netPrice。虽然像var123或myothervar49这样的名称也是合法的，但前者显然具有更好的易读性和可维护性。
如果不能通过计算操作变量里保存的值，那么这些值的作用就是十分有限的。
首先，JavaScript可以使用标准的算术操作符进行加、减、乘、除。
显然，前面这个语句执行之后，变量theSum的值是7。在运算中，我们还可以使用变量名称：
JavaScript的减法（−）、乘法（*）和除法（/）也是类似的：
如果想计算除法的余数，可以使用JavaScript的“模”运算符，也就是“%”：
上述语句运行之后，变量itemsInLastBox的值是4。
JavaScript对变量值的增加和减少有快捷操作符，分别是（++）和（−−）：
上述语句相当于：
类似地，
与下面的语句作用相同：
关于JavaScript算术操作符的更详细介绍请见附录B。
提示：
如果变量值的增加或减少不是1，而是其他数值，JavaScript还允许把算术操作符与等号结合使用，比如+=和−=。
如下面两行代码的效果是相同的：
下面两行也是一样：
乘法和除法算术操作符也可以这样使用：
在一个计算中使用多个操作符时，JavaScript根据“优先级规则”来确定计算的顺序。比如下面这条语句：
根据变量的名称，这应该是在计算平均数，但这个语句不会得到我们想要的结果。在与a和b相加之前，c会先进行除法运算。为了正确地计算平均数，需要添加一对括号，像下面这样：
如果对于运算优先级不是十分确定，我们建议使用括号。这样做并不需要什么额外的代价，不仅能够让代码更易读（无论是编写者本人还是需要查看代码的其他人），还能避免优先级影响运算过程。
说明：
对于有PHP或Java编程经验的读者来说，可以发现JavaScript的操作符优先级规则与它们基本是一样的。关于JavaScript操作符优先级的详细说明请见：http://msdn.microsoft.com/en-us/library/z3ks45k7(v=vs.94).aspx。
实践
把摄氏度转换为华氏度的方法是把数值乘9，除以5，然后加32。用JavaScript可以这样做：
实际上，我们可以省略代码里的括号，结果也是正确的：
然而使用括号可以让代码更易懂，而且有助于避免操作符优先级可能导致的问题。
让我们在页面里测试上述代码。
程序清单2.2 摄氏度转换为华氏度
把这段代码保存到文件temperature.html，加载到浏览器，应该能够看到如图2.3所示的结果。
图2.3 程序清单2.2的输出结果
编辑代码文件，给cTemp设置不同的值，每次都应该能够得到正确的结果。
当变量保存的是字符串而不是数值时，算术操作符基本上就没有什么意义了，唯一可用的是操作符“+”。JavaScript把它用于两个或多个字符串的连接（按照顺序组合）：
var firstname="John";
var surname="Doe";
var fullname=firstname+" "+surname;
//变量fullname里的值是"John Doe"如果把操作符“+”用于一个字符串变量和一个数值变量，JavaScript会把数值转换为字符串，再把两个字符串连接起来。
var cTemp=100; //摄氏度
// 在表达式里充分使用括号
var hTemp=((cTemp*9)/5)+32;图2.2所示是一个字符串变量和一个数值变量使用操作符“+”的结果。
图2.2 连接一个字符串和一个数值
本书的第5章将会更详细地讨论JavaScript的数据类型和字符串操作。
为页面增加与用户的交互是JavaScript的基本功能之一。为此，我们需要一些机制来检测用户和程序在特定时间在做什么，比如鼠标在浏览器的什么位置，用户是否点击了鼠标或按了按键，页面是否完整加载到浏览器，等等。
这些发生的事情，我们称之为“事件”，JavaScript提供了多种工具来操作它们。第9章将详细介绍事件和处理事件的高级技术，现在先来看看利用JavaScript检测用户鼠标动作的一些方法。
JavaScript使用“事件处理器”来处理事件，本章介绍其中的3个：onClick、onMouseOver和onMouseOut。
onClick事件处理器几乎可以用于页面上任何可见的HTML元素。使用它的方式之一是给HTML元素添加一个属性：
onclick="…一些JavaScript语句…"说明：
虽然给HTML元素直接添加事件处理器是完全可行的，但目前已经不认为这是个好的编程方式了。本书的第一部分仍然会使用这种方式，但后面的章节里会介绍更强大、更灵活的方式来使用事件处理器。
先来看一个范例，如程序清单2.3所示。
程序清单2.3 使用onClick事件处理器
上述HTML代码在页面的body区域添加一个按钮，并且设置了它的onClick属性，从而在它被点击时运行相应的JavaScript代码。当用户点击这个按钮时，onClick事件被激活（通常称为“被触发”），然后属性中所包含的JavaScript语句被执行。
本例中只有一个语句：
图2.4是单击这个按钮得到的结果。
图2.4 使用onClick事件处理器
说明：
也许有人注意到了，我们称这个事件处理器为onClick，而在HTML元素里添加它时却使用小写的onclick。这是因为HTML是不区分大小写的，而XHTML是区分大小写的，并且要求全部的HTML元素及属性名称都使用小写字母。
实践
利用onMouseOver和onMouseOut事件处理器可以在鼠标位于图像上方时，改变图像的显示方式。为此，当鼠标进入图像区域时，可以利用onMouseOver改变<img>元素的src属性；而当鼠标离开时，利用onMouseOut再把这个属性修改回来。代码如程序清单2.5所示。
程序清单2.5 利用onMouseOver和onMouseOut实现图像变化
上述代码中出现了一些新语法，在onMouseOver和onMouseOut的JavaScript语句中，使用了关键字this。
当事件处理器是通过HTML元素的属性添加到页面时，其中的this是指HTML元素本身。本例中就是“当前图像”，this.src就是指这个图像对象的src属性。
本例中使用了两个图像：tick.gif和tick2.gif。当然可以使用任何可用的图像，但为了达到最佳效果，两个图像最好具有相同尺寸，而且文件不要太大。
使用编辑软件创建一个HTML文件，包含程序清单2.5所示的代码。可以根据实际情况修改图像文件的名称，但要确保所使用的图像与HTML文件位于同一个目录里。保存HTML文件并且在浏览器里打开它。
我们应该可以看到鼠标指针进入时，图像改变；当指针离开时，图像恢复原样，如图2.6所示。
图2.6 利用onMouseOver和onMouseOut实现的图像变化
说明：
这曾经是图像变化的经典方式，现在已经被更高效的“层叠样式表”（CSS）取代了，但它仍不失为展示onMouseOver和onMouseOut事件处理器的简洁方式。
如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器。
当鼠标进入页面上某个元素占据的区域时，会触发onMouseOver事件。而onMouserOut事件，很显然是在鼠标离开这一区域时触发的。
程序清单2.4示范了一个简单的onMouseOver事件处理过程。
程序清单2.4 使用onMouseOver事件处理器
图2.5展示了上述代码的执行结果。如果把程序清单2.4里的onmouseover替换为onmouseout，就会在鼠标离开图像区域（而不是进入）时触发事件处理器，从而弹出警告对话框。
图2.5 使用onMouseOver事件处理器
本章的内容相当丰富。
首先是在HTML页面里添加JavaScript代码的不同方式。
接着是在JavaScript里声明变量，给变量赋值以及利用算术操作符操作变量。
最后是JavaScript的一些事件处理器，展示如何检测用户鼠标的特定行为。
问：在程序清单和片段里，有时把<script>开始和结束标签写在一行里，有时写在不同的行，这有什么区别吗？
答：空格、制表符和空行这类空白内容在JavaScript里是完全被忽略的。我们可以利用这些空白调整代码的布局，使它们更容易理解。
问：是否能使用同一个<script>元素来引用外部JavaScript文件，同时包含JavaScript语句？
答：不行。如果利用<script>元素的src属性包含了外部JavaScript文件，就不能在<script>和</script>之间包含JavaScript语句了，而是必须为空。
请先回答问题，再参考后面的答案。
1．什么是onClick事件处理器？
a．检测鼠标在浏览器里位置的一个对象
b．响应用户点击鼠标动作时执行的脚本
c．用户能够点击的一个HTML元素
2．页面里允许有几个<script>元素？
a．0
b．仅1个
c．任意数量
3．关于变量，下列哪个说法是不正确的？
a．名称是区分大小写的
b．可以保存数值或非数值信息
c．名称里可以包含空格
1．选b。用户点击鼠标时，onClick事件被触发。
2．选c。可以根据需要使用多个<script>元素。
3．选c。JavaScript的变量名称不能包含空格。
从程序清单2.4入手，删除<img>元素里的onMouseOver和onMouseOut事件处理器，添加onClick事件处理器，把图像的title属性设置为My New Title。（提示：利用this.title可以访问图像的title属性。）
有什么办法可以方便地确定脚本正确地设置了新的图像标题？
