详情
本书主要介绍JavaScript现有的主要特性，涵盖了JavaScript基础知识、编程方法、对象、HTML5和CSS3、JavaScript库、高级特性、代码调试等内容。全书分为六个部分（包括24章和一个附录），从基本概念入手，逐步引申到按照当今Web标准编写JavaScript代码的最佳方式，非常利于初学者学习参考。
书名：JavaScript入门经典（第7版）
ISBN：978-7-115-50938-3
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 [美] 菲尔•巴拉德（Phil Ballard）
译 李 强
责任编辑 吴晋瑜
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
Authorized translation from the English language edition, entitled JAVASCRIPT IN 24 HOURS, SAMS TEACH YOURSELF, 7th Edition by BALLARD, PHIL, published by Pearson Education, Inc., Copyright © 2019.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.
CHINESE SIMPLIFIED language edition published by POSTS AND TELECOM PRESS CO., LTD., Copyright © 2019.
本书中文简体版由Pearson Education,Inc. 授权人民邮电出版社有限公司出版。未经出版者书面许可，不得以任何方式或任何手段复制和抄袭本书内容。
本书封面贴有Pearson Education（培生教育出版集团）激光防伪标签，无标签者不得销售。
版权所有，侵权必究。
本书主要介绍JavaScript现有的主要特性，涵盖了JavaScript基础知识、编程方法、对象、HTML5和CSS3、JavaScript库、高级特性、代码调试等内容。全书分为六个部分（包括24章和一个附录），从基本概念入手，逐步引申到按照当今Web标准编写JavaScript代码的最佳方式，非常利于初学者学习参考。
本书适合零编程经验的初学者学习，适合作为高等院校计算机专业的教学用书，也适合Web开发初学者、JavaScript初级程序员以及培训机构的学员参考。
在开始阅读本书之前，我们先来看一下本书的目标读者是谁，为什么要写这本书，它所采用的是什么样的体例，其内容是如何组织的，以及需要哪些工具来编写JavaScript。
对于想学习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编写的，并且符合ECMAScript JavaScript 6。
除了每个课程里的正文之外，书中还有一些标记为“说明”“提示”和“注意”的方框。
NOTE
说明：这里的内容给出了额外的解释，帮助读者理解正文和示例。
TIP
提示：这里的内容给出了额外的技巧、提示，帮助读者更轻松地进行编程。
CAUTION
注意：这里的内容帮助读者用相关的信息来避免常见的陷阱。
实践
每一章至少有一部分内容用以指导读者尝试自己完成脚本，帮助读者建立编写JavaScript脚本的信心。
每一章的最后都有这三部分内容：
本书正文分为6个部分，内容的难度逐步提高。
这部分是JavaScript语言的基础知识，介绍了用常用函数编写简单脚本的方法。这部分内容主要针对之前缺少或没有编程知识以及没有JavaScript知识的读者编写。
这部分介绍了JavaScript的数据类型，例如数值、字符串和数组；此外，还介绍了更复杂的编程范型，比如事件处理、循环控制和定时器等。
这部分着重介绍了如何创建和操作对象，包括遍历和编辑属于DOM（文档对象模型）的对象。
这部分较为深入地介绍了JavaScript如何与HTML（包括HTML5）和CSS（包括最新的CSS3规范）交互。
这部分介绍了一些专门的编程技术，包括cookie、正则表达式、闭包和模块的使用。
这一部分介绍了专业JavaScript开发的知识，例如良好的编程习惯、JavaScript的调试等。
编写JavaScript并不需要昂贵和复杂的工具，如集成开发环境（IDE）、编译器或调试器。
本书的范例代码都可以利用像Windows记事本这样的文本编辑软件生成。每个操作系统都会提供至少一款这样的软件，而且互联网上还有大量免费或廉价的类似软件。
说明：附录列出的JavaScript开发工具和资源都可以方便地获得。
为了查看代码的运行情况，我们需要一个Web浏览器，比如Microsoft Edge、Mozilla Firefox、Opera、Safari或Google Chrome。建议使用浏览器的最新稳定版本。特别是，最好不要使用逐渐被废弃的Microsoft的Internet Explorer，而是使用更加符合标准的Edge浏览器，或者使用Chrome或Firefox来替代它。
本书绝大多数范例代码在运行时并不需要连接互联网，只要把源代码保存到计算机上，然后用浏览器打开它们就可以了。例外的情况是关于cookie和Ajax的章节，这些代码需要一个Web连接（或者是局域网上的一个Web服务连接）和一些Web空间来上传代码。对于尝试过HTML编码的读者来说，都应该具备上述配置；即使没有这些配置，使用业余级别的Web主机账户就可以满足要求，而这些都是很便宜的。
本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关资源和后续服务。
作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎读者将发现的问题反馈给我们，帮助我们提升图书的质量。
读者在发现错误时，请登录异步社区，按书名搜索，进入本书页面，单击“提交勘误”，输入勘误信息，单击“提交”按钮即可。本书的作者和编辑会对读者提交的勘误进行审核，确认并接受后，我们将赠予读者异步社区的100积分（积分可用于在异步社区兑换优惠券、样书或奖品）。
我们的联系邮箱是contact@epubit.com.cn。
如果读者对本书有任何疑问或建议，请发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。
如果读者有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到异步社区在线提交投稿（直接访问www.epubit.com/selfpublish/submission即可）。
如果学校、培训机构或企业想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。
如果读者在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请将怀疑有侵权行为的链接发邮件给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT技术图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT技术图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。
“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社近30年的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、AI、测试、前端、网络技术等。
异步社区
微信服务号
第1章 JavaScript简介
第2章 创建简单的脚本
第3章 使用函数
第4章 函数的更多知识
第5章 DOM对象和内置对象
本章主要内容
服务器端和客户端编程
JavaScript如何改善Web页面
JavaScript的历史
文档对象模型（DOM）基础知识
window和document对象
如何使用JavaScript给Web页面添加内容
如何利用对话框提示用户
与只有文本内容的早期Web相比，现代的Web几乎是完全不同的，它包含了声音、视频、动画、交互导航等很多元素，而JavaScript对于这些功能的实现扮演了非常重要的角色。
在第1章中，我们将简要介绍JavaScript，回顾它的发展历史，展示它如何能够改善Web页面。通过本章的学习，读者可以直接开始编写一些实用的JavaScript代码。
阅读本书的读者很可能已经熟练使用万维网，而且对于使用某种HTML编写Web页面有一些基本的理解。
HTML（Hypertext Markup Language）不是编程语言（如其名所示），而是一款标签语言，用于标记页面的各个部分在浏览器里以何种方式展现，比如加粗或斜体字，或是作为标题，或是项目列表，或是数据表格，或是其他的标记方式。
一旦编写完成，这些页面的本质就决定了它们是静态的。它们不能对用户操作做出响应，不能进行判断，不能调整页面元素显示。无论用户何时访问这些页面，其中的标签都会以相同的方式进行解析和显示。
根据使用万维网的经验，我们知道网站可以做的事情很多。我们时常访问的页面基本上都不是静态的，它们能够包含“活”的数据，比如能够分享商品价格或航班到达时间，字体和颜色带有动画显示，或是具有单击浏览相册或排序数据列表这样的功能。
这些灵活的功能是通过程序（通常称为“脚本”）来实现的。脚本在后台运行，操控着浏览器显示的内容。
NOTE 说明：脚本和程序
“脚本”这个术语显然来自话剧和电视领域，其中所用的脚本决定了演员或主持人要做的事情。对于Web页面来说，主角是页面上的元素，而脚本是由某种脚本语言（比如JavaScript）生成的。对于本书描述的内容来说，“程序”与“脚本”两个术语基本上是可以通用的。在本书中，两个术语都会用到。
给静态页面添加脚本有如下两种最基本的方式。
本书主要介绍JavaScript，它是互联网上应用最广泛的客户端脚本语言。
NOTE 说明：JavaScript和Java
尽管JavaScript和Java的名字很相似，但是JavaScript和Java语言并没有多大关系，后者是由Sun Microsystems发明的。这两种语言的语法有相似之处，但是仅此而已，很多其他的编程语言也有和它们相似的语法。
用JavaScript编写的程序能够访问Web页面的元素以及运行该程序的浏览器，对这些元素执行操作，还可以创建新的元素。JavaScript常见的功能包括：
由于JavaScript代码只在用户浏览器内部运行，页面会对JavaScript指令做出快速响应，从而增强了用户的体验，使得Web应用更像在用户的本地计算机运行的程序而不只是一个页面。另外，JavaScript能够检测和响应特定的用户操作（而HTML无法做到这一点），比如鼠标单击和键盘操作。
几乎所有Web浏览器都支持JavaScript。
JavaScript的历史可以追溯到20世纪90年代中期，首先是Netscape Navigator 2引入了1.0版本。
随后，欧洲计算机制造商协会（ECMA）开始介入，制定了ECMAScript规范，奠定了JavaScript迅猛发展的基础。与此同时，微软开发了自己版本的JavaScript——jScript，并将其用在IE浏览器上。
NOTE 说明：JavaScript和VBScript
JavaScript不是仅有的客户端脚本语言，微软的浏览器还支持自己的Visual Basic面向脚本的版本——VBScript。但是，JavaScript得到了更好的浏览器支持——现代浏览器几乎都支持它。
20世纪90年代后期，Netscape Navigator 4和IE 4都宣布对JavaScript提供更好的支持，比以前版本的浏览器大有改善。
但遗憾的是，这两组开发人员走上了不同的道路。他们分别给JavaScript语言本身及如何与Web页面交互定义了自己的规范。
这种荒唐的情况导致开发人员总是要编写两个版本的脚本，利用一些复杂的、经常可能导致错误的程序来判断用户在使用什么浏览器，然后再切换到适当版本的脚本。
好在网际网络联盟（W3C）非常努力地通过DOM来规范各个浏览器制作商生成和操作页面的方式。1级DOM于1998年完成，2级版本于2000年年末完成。
关于DOM是什么或它能做什么，本书的相应章节会有所介绍。
NOTE 说明：关于W3C
网际网络联盟（World Wide Web Consortium，W3C）是一个国际组织，致力于制定开放标准来支撑互联网的长期发展。其官方网站包含了大量与Web标准相关的信息与工具。
当用户访问一个页面时，页面中包含的JavaScript代码会与其他页面内容一起传递给浏览器。
在HTML里使用<script>和</script>标签，可以在HTML代码里直接包含JavaScript语句。
<script>
...JavaScript statements...
</script>NOTE 说明：解释型语言和编译型语言
JavaScript是一种解释型语言，不是C++或Java那样的编译语言。JavaScript指令以纯文本形式传递给浏览器，然后依次解释执行。它们不必先“编译”成只有计算机处理器能够理解的机器码，这让JavaScript程序很便于阅读，能够迅速地进行编辑，然后在浏览器里重新加载页面就可以进行测试。
本书的代码都是符合HTML5规范的，也就是说，<script>元素没有任何必须设置的属性（在HTML5里，type属性是可选的，本书的范例里都没有使用这个属性）。但如果是在HTML4.x或XHTML页面里添加JavaScript，就需要使用type属性了：
<script type="text/javascript">
... JavaScript statements ...
</script>偶尔还会看到<script>元素使用属性language="JavaScript"，这种方式已经废弃很久了。除非是需要支持很古老的浏览器，比如Navigator或Mosaic，否则完全不必使用这种方式。
NOTE 说明：关于废弃的代码
“废弃的”（deprecated）这个词对于软件功能或编码方式来说意味着尽量避免使用，因为它们被新功能或新方式取代了。
虽然为了实现向下兼容而仍然使用这类的功能，但“废弃的”这个状态通常意味着这样的功能会在不久之后被清除。
本书的范例把JavaScript代码放置到文档的body部分，但实际上JavaScript代码也能出现在其他位置。我们还可以利用<script>元素加载保存在外部文件中的JavaScript代码，关于这方面的详细介绍请见第2章。
“文档对象模型”（Document Object Model，DOM）是对文档及其内容的抽象表示。
每次浏览器要加载和显示页面时，都需要解释（更专业的术语是“解析”）构成页面的HTML源代码。在解析过程中，浏览器建立一个内部模型来表示文档里的内容，这个模型就是DOM。在浏览器渲染页面的可见内容时，就会引用这个模型。可以使用JavaScript来访问和编辑这个DOM的各个部分，从而改变页面的显示内容和用户交互的方式。
在早期，JavaScript只能对Web页面的某些部分进行最基本的访问，比如访问页面里的图像和表单。一个JavaScript程序所包含的语句，可以选择“页面上第二个表单”，或是“名称为registration的表单”。
Web开发人员有时把这种情形称为0级DOM，以便与W3C的1级DOM向下兼容。0级DOM有时也称为BOM（浏览器对象模型）。从0级DOM开始，W3C逐渐扩展和改善了DOM规范。W3C更大的野心是不仅让DOM能够用于Web页面与JavaScript，也能用于任何编程语言和XML。
NOTE 说明：关于DOM级别
本书使用1级和2级的W3C DOM定义。
浏览器厂商在最近的版本中对DOM的支持都有了很大的改善。在编写本书时，IE最新版本是11，Netscape Navigator以Mozilla Firefox重生（当前版本是58.0），其他竞争对手还包括Opera、Konqueror、苹果公司的Safari、谷歌的Chrome和Chromium，它们都对DOM提供了出色的支持。
Web开发人员的处境有了很大改善。除了极特殊的一些情况，只要我们遵循DOM标准，基本上在编程时可以不考虑为某个浏览器编写特殊代码了。
NOTE 说明：留意早期的浏览器
早期的浏览器，比如Netscape Navigator（任何版本）和IE 5.5以前的版本，现在基本上已经没有人使用了。本书只关注与1级或更高级别DOM兼容的现代浏览器，比如IE 9+、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对象。
TIP 提示：扩展点表示法
这种表示法可以扩展任意多次，以表示树结构中的任何对象。例如
表示object3，其父对象是object2，而object2又是object1的子对象。
我们用句点方式表示树形结构里的对象：
parent.childobject1.object2.object3如图1.1所示，location对象是window对象的子对象，所以在DOM里就像这样表示它：
window.locationHTML页面的<body>部分在DOM里是document对象的一个子对象，所以表示为：
window.document.body这种表示法的最后一个部分除了可以是对象外，还可以是属性或方法：
object1.object2.property
object1.object2.method举例来说，如果想访问当前文档的title属性，也就是HTML标签<title>和</title>，我们可以这样表示：
window.document.titleNOTE 注意：最好的还没来
如果对象层次和句点表示法似乎现在对你来说还不是很清晰，不必为此担心。在本书中，你将会看到很多的示例。
TIP 提示：一种方便的简写方式
window对象永远包含当前浏览器窗口，所以使用window.document就可以访问当前文档。作为一种简化表示，使用document也能访问当前文档。
如果是打开了多个窗口，或是使用框架集，那么每个窗口或框架都有单独的window和document对象，为了访问其中的某一个文档，需要使用相应的窗口名称和文档名称。
TIP 提示：另一种方便的简写方式
在实际编码过程中，可以不明确书写window.这部分。因为它是DOM层级结构的最顶层（有时也被称为“全局对象”），任何没有明确指明对象的方法调用都会被指向window，所以
也能实现同样功能。
现在来介绍window和document对象的一些方法。首先介绍的这两个方法都能提供与用户交互的手段。
window.alert()<script>alert("Here is my message");</script>即使不知道window.alert()，我们实际上在很多场合已经看到过它了。window对象位于DOM层级的最顶端，代表了显示页面的浏览器窗口。当我们调用alert()方法时，浏览器会弹出一个对话框显示设置的信息，还有一个“确定”按钮。示例如下：
<script>window.alert("Here is my message");</script>这是第一个使用句点表示法的范例，其中调用了window对象的alert()方法，所以按照object.method表示方法就写为window.alert。
请注意要显示的文本位于引号之中。引号可以是双引号，也可以是单引号，但必须有引号，否则会产生错误。
这行代码在浏览器执行时，产生的弹出对话框如图1.2所示。
图1.2 一个window.alert()对话框
TIP 提示：不同的浏览器显示也不同
图1.2所示的弹出对话框由运行在Ubuntu Linux下的Chrome浏览器产生。不同操作系统、不同浏览器、不同显示设置都会影响这个对话框的最终显示情况，但它总是会包含要显示的信息和一个“OK”按钮。
TIP 提示：理解模态对话框
在用户单击“OK”按钮之前，页面上是不能进行其他任何操作的。具有这种行为模式的对话框称为“模态”对话框。
从这个方法名称就可以猜到它的功能。显然它不是弹出对话框，而是直接向HTML文档写入字符，如图1.3所示。
<script>document.write("Here is another message");</script>图1.3 使用document.write()
NOTE 说明：
实际上，无论从功能来说，还是从编码风格与可维护性来说，document.write都是一种向页面输出内容的笨拙方式，它有很多的局限性。大多数正规的JavaScript程序员都不会使用这种方式，更好的方式是使用JavaScript和DOM。但在本书第一部分介绍JavaScript语言的基本知识时，我们还会使用这个方法。
JavaScript编写的“Hello World!”
在介绍一种编程语言时，如果不使用传统的“Hello World!”范例似乎说不过去。这个简单的HTML文档如程序清单1.1所示。
程序清单1.1 一个alert()对话框中的“Hello World!”
<!DOCTYPE html>
<html>
<head>
<title>Hello from JavaScript!</title>
</head>
<body>
<script>
alert("Hello World!");
</script>
</body>
</html>在文本编辑器里创建一个文档，将其命名为hello.html，输入上述代码，保存到计算机，然后在浏览器中打开它。
CAUTION 注意：留意文件名后缀
有些文本编辑器会尝试给我们指定的文件名添加.txt扩展名，因此在保存文件时要确保使用了.html扩展名，否则浏览器可能不会正常打开它。
几乎全部操作系统都允许我们用鼠标右键单击HTML文件图标，从弹出菜单里选择“打开方式”（或类似的字眼）。另一种打开方式是先运行喜欢的浏览器，然后从菜单栏里选择“文件”>“打开”，找到相应的文件，加载到浏览器。
这时会看到如图1.2所示的对话框，但其中的内容是“Hello World!”。如果计算机里安装了多个浏览器，可以尝试用它们都来打开这个文件，比较得到的结果。对话框外观可能有细微差别，但信息和“OK”按钮都是一样的。
CAUTION 注意：小心警告
有些浏览器的默认安全设置会在打开本地内容（比如本地计算机上的文件）时显示警告内容，如果看到这样的提示，只要选择允许继续操作即可。
正如前文所述，DOM树包含着方法和属性。前面的范例展示了如何使用document对象的write方法向页面输出文本，现在我们来读取document对象的属性。以document.title属性为例，它包含了HTML页面的<title>标签中所定义的标题。
在文本编辑器里修改hello.html，修改对window.alert()方法的调用：
alert(document.title);注意到document.title并没有包含在引号里，这时如果使用引号，JavaScript会认为我们要输出文本“document.title”。在不使用引号的情况下，JavaScript会把document.title属性的值传递给alert()方法，得到的结果如图1.4所示。
图1.4 显示document对象的属性
本章简要介绍了服务器端脚本和客户端脚本的概念，还简述了JavaScript和DOM的历史演变，大概展示了JavaScript能够实现什么功能来增强页面和改善用户体验。
本章还简单介绍了DOM的基本结构，展示了如何使用JavaScript访问特定对象及其属性，并且使用这些对象。
后面的章节将基于这些基本概念逐渐展开更高级的脚本编程项目。
答：当然可以。事实上，这种组合方式能够形成一个有力的平台，实现功能强大的应用。Google Mail就是个很好的范例。
答：方便的情况下越多越好。编写与标准兼容的、避免使用浏览器专用功能的代码，从而让程序在各个浏览器上都能顺畅运行，这不是一件简单的事情。浏览器在特定功能的实现上有一两处细微差别，但这总是难免的。
答：会的，但通常这种影响很小，可以忽略不计。如果JavaScript代码的内容比较多，就应该在用户可能使用的最慢的连接上进行测试。除了一些极其特殊的情况，这一般不会成为什么问题。
测验和练习用来测试你对本章知识的理解，提升自己的技能。
1．JavaScript是解释型语言，还是编译型语言？
a．编译型语言
b．解释型语言
c．都不是
d．都是
2．若要添加JavaScript语句，必须在HTML页面里使用什么标签？
a．<script>和</script>
b．<type="text/javascript">
c．<!--and-->
3．DOM层级结构的最顶层是：
a．document属性
b．document方法
c．document对象
d．window对象
4．window.alert()方法的用途是什么？
a．在一个模态对话框中，向用户发送一条消息
b．在浏览器的任务栏中，向用户发送一条消息
c．把字符写入Web页面的文本中
5．下面的哪一种说法是对的？
a．window对象是document对象的子对象
b．document对象是window对象的子对象
c．上述说法都不对
1．选b。JavaScript是一种解释型语言，它以纯文本方式编写代码，一次读取并执行一条语句
2．选a。JavaScript语句添加在<script>和</script>之间
3．选d。window对象位于DOM树的顶端，document对象是它的一个子对象
4．选a。在一个模态对话框中，向用户发送一条消息
5．选b。document对象是window对象的子对象
在本章的“实践”环节中，我们使用了这样一行代码：
alert(document.title);它可以输出document对象的title属性。请尝试修改这段脚本，输出document.lastModified属性，它包含的是Web页面最近一次修改的日期和时间。（提示：属性名称是区分大小写的，注意这个属性里大写的M。）还可以尝试用document.write()代替alert()方法向页面直接输出信息，如图1.3所示。
在不同的浏览器里运行本章的范例代码，观察页面显示情况有什么区别。
本章主要内容
在Web页面里添加JavaScript的各种方式
JavaScript语句的基本语法
声明和使用变量
使用算术操作符
代码的注释
捕获鼠标事件
第1章介绍了JavaScript是一种能够让Web页面更具有交互性的脚本语言。
本章将介绍如何向Web页面添加JavaScript，以及编写JavaScript程序的一些基本语法，比如语句、变量、操作符和注释。同时，本章将涉及更加实用的脚本范例。
NOTE 说明：HTML注释
有时在<script>标签里可以看到HTML风格的注释标签<!--和-->，它们包含着JavaScript语句，比如：
这是为了兼容不能识别<script>标签的老版本浏览器。这种“注释”方式可以防止老版本浏览器把JavaScript源代码当作页面内容显示出来。除非我们有特别明确的需求要支持老版本的浏览器，否则是不需要使用这种技术的。
正如第1章所介绍的，JavaScript代码是和页面内容一起发送给浏览器的，这是如何做到的呢？有两种方法可以把JavaScript代码关联到HTML页面，它们都要用到第1章介绍的<script>和</script>标签。
第一种方法是把JavaScript语句直接包含在HTML文件里，就像第1章所介绍的一样:
<script>
<!--
... Javascript statements are written here ...
-->
</script><script>
... Javascript statements are written here ...
</script>第二种方法，也是更好的方法，是把JavaScript代码保存到单独的文件，然后利用<script>元素的src（源）属性来指定文件名，从而把这个文件包含到页面里：
<script src='mycode.js'></script>前例包含了一个名为mycode.js的文件，其中有我们编写的JavaScript语句。如果JavaScript文件与调用脚本不在同一个文件夹，就需要添加一个相对或绝对路径：
<script src='/path/to/mycode.js'></script>或
<script src='http://www.example.com/path/to/mycode.js'></script>把JavaScript代码保存到单独的文件中有如下好处。
NOTE 说明：文件名后缀
按照惯例，JavaScript代码文件的名称扩展名是.js。但从实际情况来看，代码文件的名称可以使用任何扩展名，浏览器都会把其中的内容当作JavaScript来解释。
CAUTION 注意：留意标记
外部文件中的JavaScript语句不能放到<script>和</script>标签中，也不能使用任何HTML标签，只能是纯粹的JavaScript代码。
程序清单2.1是第1章里Web页面的代码，但是现在，已被修改为在<body>区域里包含了一个JavaScript代码文件。JavaScript可以放置到HTML页面的<head>或<body>区域里，但一般情况下，我们把JavaScript代码放到页面的<head>区域，从而让文档的其他部分能够调用其中的函数。第3章将介绍函数的有关内容。就目前而言，我们把范例代码暂时放到文档的<body>区域。
程序清单2.1 包含了一个JavaScript文件的一个HTML文档
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page</title>
</head>
<body>
<p>Some content ...</p>
<script src='mycode.js'></script>
</body>
</html>当JavaScript代码位于文档的body区域时，在页面被呈现时，遇到这些代码就会解释和执行。为此，JavaScript代码不要试图访问没有定义的DOM元素，这一点很重要。相反，JavaScript语句必须包含在定义这些元素的HTML的后面。在代码读取和执行完毕之后，页面呈现才会继续，直到页面完成。
TIP 提示：多个脚本
你并不是只能够使用一个script元素，需要的话，可以在页面中使用任意多个script元素。
JavaScript程序是由一些单独的指令组成的，这些指令称为“语句”。为了能够正确地解释语句，浏览器对语句的书写方式有所要求。第一种方式是把每条语句写成一行：
this is statement 1
this is statement 2另一种方式是在同一行里书写多条语句，每条语句以分号表示结束：
this is statement 1; this is statement 2;为了提高代码的可读性，也为了防止造成难以查找的语法错误，最好是结合上述两种方式的优点，也就是一行书写一条语句，并且用分号表示语句结束：
this is statement 1;
this is statement 2;NOTE 说明：注释的语法
JavaScript还可以使用HTML注释语法来实现单行注释：
但我们一般不在JavaScript中使用这种方式。
有些语句的作用并不是为了让浏览器执行，而且为了方便需要阅读代码的人。我们把这些语句称为“注释”，它有一些特定的规则。
长度在一行之内的注释可以在行首以双斜线表示：
<!-- this is a comment -->//注释内容如果需要用这种方式添加多行注释，需要在每一行的行首都使用这个前缀：
//注释内容
//注释内容实现多行注释的一种更方便的方法是使用/标记注释的开始，使用/标记注释的结束。其中的注释内容可以跨越多行：
/* 这里的注释
内容可以跨越
多行 */在代码里添加注释是一种非常好的习惯，特别是在编写较大、较复杂的JavaScript程序时。注释不仅可以作为我们自己的提示，还可以为以后阅读代码的其他人提供指示和说明。
NOTE说明：文件大小
注释的确会略微增加JavaScript源文件的大小，从而对页面加载时间和代码性能产生不好的影响。一般来说，这种影响小到可以忽略不计，但如果的确需要消除这种影响，我们可以清除JavaScript文件里的全部注释，形成所谓的“产品”版本，用于实际的站点。出于这个目的，很多开发者提供他们的程序的所谓的“精简版”，其程序文件的大小是经过压缩的，并且所有的注释和空白都去掉了。你经常会遇到这样的精简版的文件，因为它们的文件名通常都有一个.min.js的后缀。
NOTE 说明：赋值和测试相等性
=字符只是用于赋值，这一点很重要。当你需要测试两个值或表达式是否相等时，只是使用“=”符号是不正确的，而是需要使用“==”来测试相等性：
在第10章中，我们将学习如何像这样使用条件语句。
变量可以看作一种被命名的分类容器，用于保存特定的数据。数据可以具有多种形式：整数或小数、字符串或其他数据类型（本章稍后将会介绍）。变量可以用任何方式进行命名，但我们一般只使用字母、数字、美元符号（$）和下画线。
NOTE 注意：区分大小写
JavaScript是区分大小写的，变量mypetcat和Mypetcat或MYPETCAT是不一样的。
JavaScript程序员和其他很多程序员习惯使用一种名为“骆驼大小写”（或被称为“混合大小写”等）的方法，也就是把各个单词或短语连写在一起，没有空格，每个单词的首字母大写，但整个名称的第一个字母可以是大写或小写。按照这种方式，前面提到的变量就应该命名为MyPetCat或myPetCat。
if(a == b) { … do something … } // 正确，测试a和b是否相等
if(a = b) { … do something … } // 不正确，将b的值赋值给a假设有一个变量的名称是netPrice。通过一条简单的语句就可以设置保存在netPrice里的数值：
netPrice = 8.99;这个操作称为给变量“赋值”。
有些编程语言在赋值之前必须进行变量声明，JavaScript不必如此。但变量声明是一个很好的编程习惯。在JavaScript里，你可以这样做：
var netPrice;
netPrice = 8.99;还可以把上述两个语句组合成一条语句，使其更加简洁和易读：
var netPrice = 8.99;如果要把“字符串”赋值给一个变量，需要把字符串放到一对单引号或双引号之中：
var productName = "Leather wallet";然后就可以传递这个变量所保存的值，比如传递给window.alert方法：
alert(productName);生成的对话框会计算变量的值，然后显示出来，如图2.1所示。
图2.1 显示变量productName的值
TIP 提示：变量命名
尽量使用含义明确的名称，比如productName和netPrice。虽然像var123或myothervar49这样的名称也是合法的，但前者显然具有更好的易读性和可维护性。
如果不能通过计算操作变量中保存的值，那么这些值的用处就不是很大。
TIP 提示：组合操作符
如果变量值的自增或自减不是1，而是其他数值，JavaScript还允许把算术操作符与等号结合使用，比如+=和−=。
如下面两行代码的效果是相同的：
下面两行也是一样：
乘法和除法算术操作符也可以这样使用：
首先，JavaScript可以使用标准的算术操作符进行加、减、乘和除运算：
var theSum = 4 + 3;显然，前面这条语句执行之后，变量theSum的值是7。在运算中，我们还可以使用变量名称：
total = total + 5;
total += 5;var productCount = 2;
var subtotal = 14.98;
var shipping = 2.75;
var total = subtotal + shipping;JavaScript的减法（−）、乘法（*）和除法（/）也是类似的：
counter = counter - step;
counter -= step;subtotal = total – shipping;
var salesTax = total * 0.15;
var productPrice = subtotal / productCount;如果想计算除法的余数，可以使用JavaScript的模除运算符，也就是“%”：
price = price * uplift;
price *= uplift;var itemsPerBox = 12;
var itemsToBeBoxed = 40;
var itemsInLastBox = itemsToBeBoxed % itemsPerBox;上述语句运行之后，变量itemsInLastBox的值是4。
JavaScript对变量值的自增和自减有快捷操作符，分别是（++）和（− −）：
productCount++;上述语句相当于：
productCount = productCount + 1;类似地，
items--;与下面的语句作用相同：
items = items – 1;在一个计算中使用多个操作符时，JavaScript根据“优先级规则”来确定计算的顺序，比如下面这条语句：
var average = a + b + c / 3;根据变量的名称，这应该是在计算平均数，但这个语句不会得到我们想要的结果。在与a和b相加之前，c会先进行除法运算。为了正确地计算平均数，需要添加一对括号，像下面这样：
var average = (a + b + c) / 3;如果对于运算优先级不是十分确定，我建议使用括号。这样做并不需要什么额外的代价，不仅能够让代码更易读（无论是对编写者本人还是对需要查看代码的其他人），还能避免优先级影响到运算过程。
NOTE 说明：优先级规则
对于有PHP或Java编程经验的读者来说，将会发现JavaScript的操作符优先级规则与这两种语言基本是一样的。
当变量保存的是字符串而不是数值时，算术操作符基本上就没有什么意义了，唯一可用的是操作符“+”。JavaScript把它用于两个或多个字符串的连接（按照顺序组合）：
var firstname = "John";
var surname = "Doe";
var fullname = firstname + " " + surname;
//变量fullname里的值是"John Doe"如果把操作符“+”用于一个字符串变量和一个数值变量，JavaScript会把数值转换为字符串，再把两个字符串连接起来：
var name = "David";
var age = 45;
alert(name + age);图2.2所示的是对一个字符串变量和一个数值变量使用操作符“+”的结果。
图2.2 连接一个字符串和一个数值
本书的第7章将会更详细地讨论JavaScript的数据类型和字符串操作。
把摄氏度转换为华氏度
把摄氏度转换为华氏度的方法是把数值乘9，除以5，然后加32。用JavaScript可以这样做：
var cTemp = 100; //摄氏度
// 在表达式里充分使用括号
var hTemp = ((cTemp * 9)/5) + 32;实际上，我们可以省略代码里的括号，结果也是正确的：
var hTemp = cTemp * 9/5 + 32;不过，使用括号可以让代码更易懂，而且有助于避免操作符优先级可能导致的错误。
让我们在Web页面里测试上述代码，如程序清单2.2所示。
程序清单2.2 通过华氏温度计算摄氏温度
<!DOCTYPE html>
<html>
<head>
<title>Fahrenheit From Celsius</title>
</head>
<body>
<script>
var cTemp = 100; //摄氏温度
//使用括号
var hTemp = ((cTemp * 9) /5 ) + 32;
document.write("Temperature in Celsius: " + cTemp + " degrees<br/>");
document.write("Temperature in Fahrenheit: " + hTemp + " degrees");
</script>
</body>
</html>把这段代码保存到文件temperature.html中，加载到浏览器，应该能够看到如图2.3所示的结果。
图2.3 程序清单2.2的输出
编辑代码文件，给cTemp设置不同的值，每次都应该能够得到正确的结果。
为页面增加与用户的交互是JavaScript的基本功能之一。为此，我们需要一些机制来检测用户和程序在特定时间在做什么，比如鼠标在浏览器的什么位置，用户是否单击了鼠标或按了键盘按键，页面是否完整加载到浏览器，等等。
我们将这些发生的事情称为事件（event）。JavaScript提供了多种工具来处理事件。第9章将详细介绍事件和处理事件的高级技术，现在先来看看利用JavaScript检测用户鼠标动作的一些方法。
JavaScript用事件处理器（event handler）来处理事件，本章介绍其中的3个：onClick、onMouseOver和onMouseOut。
onClick事件处理器几乎可以用于页面上任何可见的HTML元素。实现它的方式之一是给HTML元素添加一个属性：
onclick=" ...some JavaScript code... "NOTE 说明：给HTML元素添加事件处理器
虽然给HTML元素直接添加事件处理器是完全可行的，但现在人们已经不认为这是一种好的编程方式了。本书的第一部分仍然会使用这种方式，但后面的章节里会介绍更强大、更灵活的方式来使用事件处理器。
先来看一个范例，如程序清单2.3所示。
程序清单2.3 使用onClick事件处理器
<!DOCTYPE html>
<html>
<head>
<title>onClick Demo</title>
</head>
<body>
<input type="button" onclick="alert('You clicked the button!')" value="Click Me" />
</body>
</html>上述HTML代码在页面的body区域添加一个按钮，并且设置了它的onclick属性。给定onclick属性的值，是一些JavaScript代码，当单击该HTML元素时（在这个例子中，就是按钮），我们想要运行这些JavaScript代码。当用户单击这个按钮时，onClick事件被激活（通常称为“被触发”），然后属性中所包含的JavaScript语句将会执行。
本例中只有一条语句：
alert('You clicked the button!')图2.4所示的是单击这个按钮得到的结果。
图2.4 使用onClick事件处理器
NOTE 说明：区分大小写
也许有人注意到了，我们称这个事件处理器为onClick，而在HTML元素里添加它时却使用小写的onclick。这是因为HTML是不区分大小写的，而XHTML是区分大小写的，并且要求全部的HTML元素及属性名称都使用小写字母。
如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器。
当鼠标进入页面上被某个元素所占据的区域时，会触发onMouseOver事件。而onMouserOut事件，很显然是在鼠标离开这一区域时触发的。
程序清单2.4展示了一个简单的onMouseOver事件处理过程。
程序清单2.4 使用onMouseOver事件处理器
<!DOCTYPE html>
<html>
<head>
<title>onMouseOver Demo</title>
</head>
<body>
<img src="image1.png" alt="image 1" onmouseover="alert('You entered the image!')" />
</body>
</html>图2.5所示的是上述代码的执行结果。如果把程序清单2.4中的onmouseover替换为onmouseout，就会在鼠标离开图像区域（而不是在进入）时触发事件处理器，从而弹出警告对话框。
图2.5 使用onMouseOver事件处理器
利用onMouseOver和onMouseOut事件处理器可以在鼠标位于图像上方时改变图像的显示方式。为此，当鼠标进入图像区域时，可以利用onMouseOver改变<img>元素的src属性；而当鼠标离开时，利用onMouseOut再把这个属性修改回来。代码如程序清单2.5所示。
程序清单2.5 利用onMouseOver和onMouseOut实现图像翻滚
<!DOCTYPE html>
<html>
<head>
<title>OnMouseOver Demo</title>
</head>
<body>
<img src="tick.gif" alt="tick" onmouseover="this.src='tick2.gif';"
onmouseout="this.src='tick.gif';" />
</body>
</html>上述代码中出现了一些新语法，在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实现的图像翻滚
NOTE 说明：图像翻滚
这曾经是图像翻滚的经典方式，而现在被更高效的“层叠样式表”（CSS）取代了，但它仍不失为展示onMouseOver和onMouseOut事件处理器的用法的一种方便的方式。我们将在后面的学习中结合JavaScript使用CSS。
本章的内容相当丰富：首先介绍了如何在HTML页面里添加JavaScript代码的不同方式；接着介绍了如何在JavaScript里声明变量、给变量赋值以及利用算术操作符操作变量；最后介绍了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．变量的名称可以包含空格
4．如下哪一条在JavaScript程序中是合法的注释语句？
a．// this is a comment
b．/ this is a comment /
c．二者都是
d．二者都不是
5．当在一个数值和一个非数字的量之间使用一个“+”操作符时，JavaScript将会
a．将数值转换为一个字符串，并且将二者连接起来
b．将字符串转换为一个数值，并且将二者相加
c．报错
1．选b。用户单击鼠标时，onClick事件被触发
2．选c。可以根据需要使用多个<script>元素
3．选c。JavaScript的变量名称不能包含空格
4．选c。二者都是
5．选a。将数值转换为一个字符串，并且将二者连接起来
从程序清单2.4入手，删除<img>元素里的onMouseOver和onMouseOut事件处理器，添加onClick事件处理器，把图像的title属性设置为My New Title。（提示：利用this.title可以访问图像的title属性。）
有什么办法可以方便地测试脚本是否正确地设置了新的图像标题？
