作者：（美）菲尔·巴拉德（Phil Ballard）
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
JavaScript入门经典(第7版)试读：
前言
在开始阅读本书之前，我们先来看一下本书的目标读者是谁，为什么要写这本书，它所采用的是什么样的体例，其内容是如何组织的，以及需要哪些工具来编写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知识的读者编写。● 第二部分：JavaScript编程这部分介绍了JavaScript的数据类型，例如数值、字符串和数组；此外，还介绍了更复杂的编程范型，比如事件处理、循环控制和定时器等。● 第三部分：理解JavaScript对象这部分着重介绍了如何创建和操作对象，包括遍历和编辑属于DOM（文档对象模型）的对象。● 第四部分：用JavaScript操作Web页面这部分较为深入地介绍了JavaScript如何与HTML（包括HTML5）和CSS（包括最新的CSS3规范）交互。● 第五部分：与JavaScript工具相关的高级技术这部分介绍了一些专门的编程技术，包括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、测试、前端、网络技术等。异步社区微信服务号第一部分 JavaScript基础
第1章 JavaScript简介
第2章 创建简单的脚本
第3章 使用函数
第4章 函数的更多知识
第5章 DOM对象和内置对象第1章 JavaScript简介本章主要内容● 服务器端和客户端编程● JavaScript如何改善Web页面● JavaScript的历史● 文档对象模型（DOM）基础知识● window和document对象● 如何使用JavaScript给Web页面添加内容● 如何利用对话框提示用户与只有文本内容的早期Web相比，现代的Web几乎是完全不同的，它包含了声音、视频、动画、交互导航等很多元素，而JavaScript对于这些功能的实现扮演了非常重要的角色。在第1章中，我们将简要介绍JavaScript，回顾它的发展历史，展示它如何能够改善Web页面。通过本章的学习，读者可以直接开始编写一些实用的JavaScript代码。1.1 Web脚本编程基础阅读本书的读者很可能已经熟练使用万维网，而且对于使用某种HTML编写Web页面有一些基本的理解。HTML（Hypertext Markup Language）不是编程语言（如其名所示），而是一款标签语言，用于标记页面的各个部分在浏览器里以何种方式展现，比如加粗或斜体字，或是作为标题，或是项目列表，或是数据表格，或是其他的标记方式。一旦编写完成，这些页面的本质就决定了它们是静态的。它们不能对用户操作做出响应，不能进行判断，不能调整页面元素显示。无论用户何时访问这些页面，其中的标签都会以相同的方式进行解析和显示。根据使用万维网的经验，我们知道网站可以做的事情很多。我们时常访问的页面基本上都不是静态的，它们能够包含“活”的数据，比如能够分享商品价格或航班到达时间，字体和颜色带有动画显示，或是具有单击浏览相册或排序数据列表这样的功能。这些灵活的功能是通过程序（通常称为“脚本”）来实现的。脚本在后台运行，操控着浏览器显示的内容。
NOTE 说明：脚本和程序“脚本”这个术语显然来自话剧和电视领域，其中所用的脚
本决定了演员或主持人要做的事情。对于Web页面来说，主
角是页面上的元素，而脚本是由某种脚本语言（比如
JavaScript）生成的。对于本书描述的内容来说，“程序”与“脚本”两个术语基本上是可以通用的。在本书中，两个术
语都会用到。1.1.1 服务器端与客户端编程给静态页面添加脚本有如下两种最基本的方式。● 让Web服务器在把页面发送给用户之前执行脚本。这样的脚本可
以确定把哪些内容发送给浏览器以显示给用户，比如从在线商店
的数据库获取产品价格，在用户登录到站点的私有区域之前核对
用户身份，或是从邮箱获取邮件内容。这些脚本通常运行在Web
服务器上，而且是在生成请求的页面并提供给用户之前运行的。
因此，我们称之为服务器端脚本（server-side scripting）。● 另一种方式并不是在服务器运行脚本，而是把脚本与页面内容一
起发送给用户的浏览器。然后浏览器运行这些脚本，操作已经发
送给浏览器的页面内容。这些脚本的主要功能包括动画页面的部
分内容，重新安排页面布局，允许用户在页面内拖放元素，验证
用户在表单里输入的内容，把用户重定向到其他页面，等等。我
们自然而然地将这些脚本称为客户端脚本（client-side
scripting）。本书主要介绍JavaScript，它是互联网上应用最广泛的客户端脚本语言。
NOTE 说明：JavaScript和Java
尽管JavaScript和Java的名字很相似，但是JavaScript和Java
语言并没有多大关系，后者是由Sun Microsystems发明的。
这两种语言的语法有相似之处，但是仅此而已，很多其他的
编程语言也有和它们相似的语法。1.1.2 JavaScript简介用JavaScript编写的程序能够访问Web页面的元素以及运行该程序的浏览器，对这些元素执行操作，还可以创建新的元素。JavaScript常见的功能包括：● 以指定尺寸、位置和样式（比如是否有边框、菜单、工具栏等）
打开新窗口；● 提供用户友好的导航帮助，比如下拉菜单；● 检验Web表单输入的数据，在向Web服务器提交表单之前确保数
据格式正确；● 在特定事件（比如鼠标光标经过页面元素之上）发生时，改变页
面元素的外观与行为；● 检测和发现特定浏览器支持的高级功能，比如第三方插件，或是
对新技术的原生支持。由于JavaScript代码只在用户浏览器内部运行，页面会对JavaScript指令做出快速响应，从而增强了用户的体验，使得Web应用更像在用户的本地计算机运行的程序而不只是一个页面。另外，JavaScript能够检测和响应特定的用户操作（而HTML无法做到这一点），比如鼠标单击和键盘操作。几乎所有Web浏览器都支持JavaScript。1.1.3 JavaScript起源JavaScript的历史可以追溯到20世纪90年代中期，首先是Netscape Navigator 2引入了1.0版本。随后，欧洲计算机制造商协会（ECMA）开始介入，制定了ECMAScript规范，奠定了JavaScript迅猛发展的基础。与此同时，微软开发了自己版本的JavaScript——jScript，并将其用在IE浏览器上。
NOTE 说明：JavaScript和VBScript
JavaScript不是仅有的客户端脚本语言，微软的浏览器还支
持自己的Visual Basic面向脚本的版本——VBScript。但是，
JavaScript得到了更好的浏览器支持——现代浏览器几乎都
支持它。1.1.4 浏览器的竞争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标准相关的信息与工具。1.1.5 标签，可以在HTML代码里直接包含JavaScript语句。
NOTE 说明：解释型语言和编译型语言
JavaScript是一种解释型语言，不是C++或Java那样的编译
语言。JavaScript指令以纯文本形式传递给浏览器，然后依
次解释执行。它们不必先“编译”成只有计算机处理器能够
理解的机器码，这让JavaScript程序很便于阅读，能够迅速
地进行编辑，然后在浏览器里重新加载页面就可以进行测
试。本书的代码都是符合HTML5规范的，也就是说，偶尔还会看到这是第一个使用句点表示法的范例，其中调用了window对象的alert()方法，所以按照object.method表示方法就写为window.alert。
TIP 提示：另一种方便的简写方式
在实际编码过程中，可以不明确书写window.这部分。因为
它是DOM层级结构的最顶层（有时也被称为“全局对
象”），任何没有明确指明对象的方法调用都会被指向
window，所以
也能实现同样功能。请注意要显示的文本位于引号之中。引号可以是双引号，也可以是单引号，但必须有引号，否则会产生错误。这行代码在浏览器执行时，产生的弹出对话框如图1.2所示。图1.2 一个window.alert()对话框
TIP 提示：不同的浏览器显示也不同
图1.2所示的弹出对话框由运行在Ubuntu Linux下的Chrome
浏览器产生。不同操作系统、不同浏览器、不同显示设置都
会影响这个对话框的最终显示情况，但它总是会包含要显示
的信息和一个“OK”按钮。
TIP 提示：理解模态对话框
在用户单击“OK”按钮之前，页面上是不能进行其他任何
操作的。具有这种行为模式的对话框称为“模态”对话框。1.1.11 document.write()从这个方法名称就可以猜到它的功能。显然它不是弹出对话框，而是直接向HTML文档写入字符，如图1.3所示。图1.3 使用document.write()
NOTE 说明：
实际上，无论从功能来说，还是从编码风格与可维护性来说，
document.write都是一种向页面输出内容的笨拙方式，它有
很多的局限性。大多数正规的JavaScript程序员都不会使用
这种方式，更好的方式是使用JavaScript和DOM。但在本书
第一部分介绍JavaScript语言的基本知识时，我们还会使用
这个方法。实践JavaScript编写的“Hello World!”在介绍一种编程语言时，如果不使用传统的“Hello World!”范例似乎说不过去。这个简单的HTML文档如程序清单1.1所示。程序清单1.1 一个alert()对话框中的“Hello World!”
CAUTION 注意：留意文件名后缀
有些文本编辑器会尝试给我们指定的文件名添加.txt扩展
名，因此在保存文件时要确保使用了.html扩展名，否则浏
览器可能不会正常打开它。
几乎全部操作系统都允许我们用鼠标右键单击HTML文件图
标，从弹出菜单里选择“打开方式”（或类似的字眼）。另
一种打开方式是先运行喜欢的浏览器，然后从菜单栏里选择“文件”>“打开”，找到相应的文件，加载到浏览器。
这时会看到如图1.2所示的对话框，但其中的内容是“Hello
World!”。如果计算机里安装了多个浏览器，可以尝试用它
们都来打开这个文件，比较得到的结果。对话框外观可能有
细微差别，但信息和“OK”按钮都是一样的。
CAUTION 注意：小心警告
有些浏览器的默认安全设置会在打开本地内容（比如本地计
算机上的文件）时显示警告内容，如果看到这样的提示，只
要选择允许继续操作即可。1.1.12 读取document对象的属性正如前文所述，DOM树包含着方法和属性。前面的范例展示了如何使用document对象的write方法向页面输出文本，现在我们来读取document对象的属性。以document.title属性为例，它包含了HTML页面的
JavaScript文件的页面。这对于JavaScript库是尤为重要的（本书
稍后会有介绍）。● HTML页面的代码可以保持简洁，从而提高易读性和可维护性。● 可以稍微提高一点性能。浏览器会把包含文件进行缓存，当前页
面或其他页面再次需要使用这个文件时，就可以使用一个本地副
本了。
NOTE 说明：文件名后缀
按照惯例，JavaScript代码文件的名称扩展名是.js。但从实
际情况来看，代码文件的名称可以使用任何扩展名，浏览器
都会把其中的内容当作JavaScript来解释。
CAUTION 注意：留意标记
外部文件中的JavaScript语句不能放到标
签中，也不能使用任何HTML标签，只能是纯粹的JavaScript
代码。程序清单2.1是第1章里Web页面的代码，但是现在，已被修改为在
区域里包含了一个JavaScript代码文件。JavaScript可以放置到HTML页面的或区域里，但一般情况下，我们把JavaScript代码放到页面的区域，从而让文档的其他部分能够调用其中的函数。第3章将介绍函数的有关内容。就目前而言，我们把范例代码暂时放到文档的区域。程序清单2.1 包含了一个JavaScript文件的一个HTML文档Some content ...
当JavaScript代码位于文档的body区域时，在页面被呈现时，遇到这些代码就会解释和执行。为此，JavaScript代码不要试图访问没有定义的DOM元素，这一点很重要。相反，JavaScript语句必须包含在定义这些元素的HTML的后面。在代码读取和执行完毕之后，页面呈现才会继续，直到页面完成。TIP 提示：多个脚本
你并不是只能够使用一个script元素，需要的话，可以在页
面中使用任意多个script元素。
NOTE 说明：HTML注释
有时在
这是为了兼容不能识别
把这段代码保存到文件temperature.html中，加载到浏览器，应该能够看到如图2.3所示的结果。图2.3 程序清单2.2的输出编辑代码文件，给cTemp设置不同的值，每次都应该能够得到正确的结果。2.5 捕获鼠标事件为页面增加与用户的交互是JavaScript的基本功能之一。为此，我们需要一些机制来检测用户和程序在特定时间在做什么，比如鼠标在浏览器的什么位置，用户是否单击了鼠标或按了键盘按键，页面是否完整加载到浏览器，等等。我们将这些发生的事情称为事件（event）。JavaScript提供了多种工具来处理事件。第9章将详细介绍事件和处理事件的高级技术，现在先来看看利用JavaScript检测用户鼠标动作的一些方法。JavaScript用事件处理器（event handler）来处理事件，本章介绍其中的3个：onClick、onMouseOver和onMouseOut。2.5.1 onClick事件处理器onClick事件处理器几乎可以用于页面上任何可见的HTML元素。实现它的方式之一是给HTML元素添加一个属性：onclick=" ...some JavaScript code... "NOTE 说明：给HTML元素添加事件处理器
虽然给HTML元素直接添加事件处理器是完全可行的，但现
在人们已经不认为这是一种好的编程方式了。本书的第一部
分仍然会使用这种方式，但后面的章节里会介绍更强大、更
试读结束[说明：试读内容隐藏了图片]