图书

电子书

课程

VIP会员

书课包

JavaScript入门经典（第6版）

978-7-115-42187-6

作者: 【美】 Phil Ballard

译者: 李军

编辑: 陈冀康

分类: JavaScript

图书目录:

详情

本书包含8个部分共计26章和两个附录的形式，由浅入深地介绍了JavaScript的各项特。书中介绍了初识JavaScript、编程方法、对象、HTML5和CSS3、JavaScript库、高级特性、代码调试等内容。本书全面地概括了JavaScript的各项特性，非常利于初学者学习参考。

图书摘要

版权信息

书名：JavaScript入门经典（第6版）

ISBN：978-7-115-42187-6

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

•　著　　　　[美] Phil Ballard

　译　　　　李　军

　责任编辑　陈冀康

•　人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

　邮编　100164 　电子邮件　315@ptpress.com.cn

　网址　http://www.ptpress.com.cn

•　读者服务热线：(010)81055410

　反盗版热线：(010)81055315

版权声明

Phil Ballard：Sams Teach Yourself JavaScript in 24 Hours, Six Edition

ISBN: 978-0-672-33738-3

Authorized translation from the English language edition published by Sams.

本书中文简体字版由美国Sams出版公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。

内容提要

本书是学习JavaScript编程的经典教程。全新的第6版涵盖了ECMAScript 6。

全书分为8个部分，共26章。第一部分“JavaScript基础”，包括第1章到第4章，介绍了如何使用常用函数编写简单的脚本。第二部分“JavaScript编程”，包括第4章到第7章，介绍了JavaScript的数据类型，例如数值、字符串和数组；以及较为复杂的编程范例，比如循环控制和定时器等。第三部分“对象”，包括第8章到第10章，介绍了如何创建和操作对象。第四部分“HTML和CSS”，包含第11章到第13章，介绍了JavaScript如何与HTML（包括HTML5）和CSS交互。第五部分“使用JavaScript库”，包括第14章到第17章，介绍如何使用第三方库，比如Prototype和jQuery，简化跨浏览器的开发工作。第六部分“高级话题”，包括第18章到第21章，介绍读取和写入cookie，通过ECMAScript 6规范看看JavaScript中有什么新功能，介绍了诸如AngularJS这样的框架的用法，并且介绍了在Web页面及其外使用JavaScript的示例。第七部分“专业技能”，包括第22章到第24章，介绍了专业JavaScript开发的知识，例如，良好的编程习惯、JavaScript调试和单元测试等。第八部分“JavaScript游戏编程”是一个全新部分，包括第25章和第26章，介绍了用JavaScript编写Minecraft模组以及用EaselJS进行游戏编程。全书最后的附录，介绍了JavaScript编程常用工具，并给出了JavaScript快速参考。

本书内容循序渐进，逐步深入，概念和知识点讲解清楚，而且每章最后配有练习，供读者检查和巩固所学知识。本书适合对Web应用开发感兴趣的初、中级用户阅读和自学，也可作为大中专院校相关专业的教材。

作者简介

Phil Ballard是多本Sams Teach Yourself系列图书的作者。他于1980年毕业于英国的利兹大学，以优异成绩获得了电子专业的荣誉学位。毕业后，他先是一家跨国公司的研究人员，接着担任了高科技部门的管理职务，然后成为了专职的软件工程顾问。

近些年来，通过“The Mouse Whisperer”项目（www.mousewhisperer.co.uk），Ballard为全球的客户提供了关于网站、互联网设计与开发的服务，还编写了各种技术图书和文章。

本书特色

JavaScript经典图书再升级，新版涵盖ECMAScript 6，以及最新的Minecraft游戏开发内容

本书着力介绍JavaScript当今主要特性的基本技巧，从基本概念开始，逐步地介绍按照当今Web标准编写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标准的，但考虑到目前并不是所有Web浏览器都支持HTML5，这些范例一般会避免使用HTML5特有的语法。无论读者使用什么样的计算机或操作系统，这些代码都能够在常见浏览器上正常运行。

除了每个课程里的正文之外，书中还有一些标记为“说明”、“提示”或“注意”的方框。

NOTE

　

说明：这里的内容提供了额外的解释，帮助读者理解正文和示例。

TIP

　

提示：这些方框里的内容提供额外的技巧、提示，帮助读者更轻松地进行编程。

CAUTION

　

注意：了解这些内容以避免常见的错误。

实践练习

　

每章都包括至少一个部分的内容指导读者尝试自己完成脚本，帮助读者建立编写JavaScript脚本的信心。

问答、测验和练习

每章的最后都有这三部分内容：

“问答”主要是解答课程中最常遇到的问题；

“测验”用于测试读者对课程内容的掌握情况；

“练习”根据课程的内容提供一些让读者进一步深入学习的建议。

本书结构

本书正文分为8个部分，内容的难度逐步提高。

第一部分：JavaScript基础

第一部分是JavaScript语言的基本知识，介绍了如何使用常用函数编写简单的脚本。这部分的内容主要针对缺少或没有编程知识及JavaScript知识的读者。

第二部分：JavaScript编程

这部分介绍了JavaScript的数据类型，例如数值、字符串和数组；此外，还介绍了更复杂的编程范例，比如循环控制和定时器。

第三部分：对象

这部分内容着重介绍了如何创建和操作对象，包括遍历和编辑属于DOM（文档对象模型）的对象。

第四部分：HTML和CSS

这部分较为深入地介绍了JavaScript如何与HTML（包括HTML5）和CSS交互，包括最新的CSS3规范。

第五部分：使用JavaScript库

这部分介绍了如何使用第三方库，比如Prototype和jQuery，简化跨浏览器的开发工作。

第六部分：高级话题

这部分的范例介绍了读取和写入cookie，通过ECMAScript 6规范看看JavaScript中有什么新功能，介绍了诸如AngularJS这样的框架的用法，并且介绍了在Web页面及Web外使用JavaScript的示例。

第七部分：专业技能

在这一部分中，我们将介绍专业JavaScript开发的知识，例如，良好的编程习惯、JavaScript调试和单元测试等。

第八部分：JavaScript游戏编程

这一部分是新增内容，介绍了用JavaScript编写Minecraft模组，以及使用EaselJS进行游戏编程的知识。

必要工具

编写JavaScript并不需要昂贵和复杂的工具，比如集成开发环境（IDE）、编译器或调试器。

本书的范例代码都可以利用像Windows记事本这样的文本编辑软件生成。每个操作系统都会提供至少一款这样的软件，而且互联网上还有大量免费或廉价的类似软件。

说明：

附录A列出的JavaScript开发工具和资源都可以方便地获得。

为了查看代码的运行情况，我们需要一个Web浏览器，比如IE、Firefox、Opera、Safari或Chrome。建议使用浏览器的最新稳定版本。

本书绝大多数范例代码在运行时并不需要互联网连接，只要把源代码保存到计算机上，然后用浏览器打开它们就可以了。例外的情况是关于cookie和Ajax的章节，这些代码需要一个Web连接（或者是局域网上的一个Web服务连接）和一些Web空间来上传代码。对于尝试过HTML编码的读者来说，都应该具备上述配置了；即使没有这些配置，使用业余级别的Web主机账户就可以满足要求，而这些都是很便宜的。（如果想测试Ajax代码，请确认Web主机允许运行PHP语言脚本，而基本上所有主机都是允许的。）

第一部分　JavaScript基础

第1章 JavaScript简介

第2章创建简单的脚本

第3章使用函数

第1章　JavaScript简介

本章主要内容包括：

服务器端和客户端编程

JavaScript如何改善Web页面

JavaScript的历史

文档对象模型（DOM）基础知识

window和document对象

如何使用JavaScript给Web页面添加内容

如何利用对话框提示用户

与只有文本内容的祖先相比，现代的Web几乎是完全不同的，它包含了声音、视频、动画、交互导航等很多元素，而JavaScript对于实现这些功能扮演了非常重要的角色。

在第1章中，我们将简要介绍JavaScript，回顾它的发展历史，展示它如何能够改善Web页面，读者还会直接开始编写一些实用的JavaScript代码。

1.1　Web脚本编程基础

阅读本书的读者很可能已经熟练使用万维网，而且对于使用某种HTML编写Web页面有一些基本的理解。

HTML（Hypertext Markup Language）不是编程语言（如其名所示），而是一款标签语言，用于标记页面的各个部分在浏览器里以何种方式展现，比如加粗或斜体字，或是作为标题，或是项目列表，或是数据表格，或是其他的标记方式。

一旦编写完成，这些页面的本质就决定了它们是静态的。它们不能对用户操作做出响应，不能进行判断，不能调整页面元素显示。无论用户何时访问这些页面，其中的标签都会以相同的方式进行解析和显示。

根据使用万维网的经验，我们知道网站可以做的事情要多得多。我们时常访问的页面基本上都不是静态的，它们能够包含“活”的数据，比如能够分享商品价格或航班到达时间，字体和颜色带有动画显示，或是具有单击浏览相册或排序数据列表这样的功能。

这些灵活的功能是通过程序（通常称为“脚本”）来实现的，它们在后台运行，操纵着浏览器显示的内容。

NOTE

说明：“脚本”这个术语显然来自于话剧和电视领域，其中所用的脚本决定了演员或主持人要做的事情。对于Web页面来说，主角是页面上的元素，而脚本是由某种脚本语言（比如JavaScript）生成的。对于本书描述的内容来说，“程序”与“脚本”两个术语基本上是可以通用的。在本书中，两个术语都会用到。

1.2　服务器端与客户端编程

给静态页面添加脚本有两种最基本的方式。

让Web服务器在把页面发送给用户之前执行脚本。这样的脚本可以确定把哪些内容发送给浏览器以显示给用户，比如从在线商店的数据库获取产品价格，在用户登录到站点的私有区域之前核对用户身份，或是从邮箱获取邮件内容。这些脚本通常运行在Web服务器上，而且是在生成请求的页面并提供给用户之前运行的。因此，我们称之为服务器端脚本（server-side scripting）。
另外一种方式并不是在服务器运行脚本，而是把脚本与页面内容一起发送给用户的浏览器。然后浏览器运行这些脚本，操作已经发送给浏览器的页面内容。这些脚本的主要功能包括动画页面的部分内容，重新安排页面布局，允许用户在页面内拖放元素，验证用户在表单里输入的内容，把用户重定向到其他页面，等等。自然而然，这些脚本称为客户端脚本（client-side scripting）。

本书主要介绍JavaScript，它是互联网上最广泛应用的客户端脚本语言。

NOTE

说明：有一种很酷的方法可以把来自于服务器端脚本的输出组合到客户端脚本，在本书第五部分介绍Ajax技术时将会学习这种技术。

1.3　JavaScript简介

用JavaScript编写的程序能够访问Web页面的元素以及运行该程序的浏览器，对这些元素执行操作，还可以创建新的元素。JavaScript常见的功能包括：

以指定尺寸、位置和样式（比如是否具有边框、菜单、工具栏等）打开新窗口；
提供用户友好的导航帮助，比如下拉菜单；
检验Web表单输入的数据，在向Web服务器提交表单之前确保数据格式正确；
在特定事件发生时，改变页面元素的外观与行为，比如当鼠标光标经过页面元素之上时；
检测和发现特定浏览器支持的功能，比如第三方插件，或是对新技术的原生支持。

NOTE

说明：虽然JavaScript与Java（Sun公司开发的语言）的名称有些相同部分，但两者几乎没有什么联系。虽然它们有一些相同的语法，但这些共同之处并不比与其他语言的共同之处多。

由于JavaScript代码只在用户浏览器内部运行，页面会对JavaScript指令做出快速响应，从而增强用户的体验，使得Web应用更像在用户本地计算机运行的程序而不只是一个页面。另外，JavaScript能够检测和响应特定的用户操作（而HTML无法做到这一点），比如鼠标单击和键盘操作。

几乎每种Web浏览器都支持JavaScript。

1.4　JavaScript起源

JavaScript的祖先可以追溯到20世纪90年代中期，首先是Netscape Navigator 2引入了1.0版本。

随后，“欧洲计算机制造商协会”（ECMA）开始介入，制定了ECMAScript规范，奠定了JavaScript迅猛发展的基础。与此同时，微软开发了自己版本的JavaScript：jScript，在IE浏览器上使用。

CAUTION

注意：ECMA继续发布ECMAScript语言标准的更新版本。在编写本书的时候，ECMAScript 6已经快要形成最终版本了。在本书第四部分中，读者将学习一些已经可用的新的语言特性。

NOTE

说明：JavaScript不是仅有的客户端脚本语言，微软的浏览器还支持自己的Visual Basic面向脚本的版本：VBScript。

但是，JavaScript得到了更好的浏览器支持，现代浏览器几乎都支持它。

浏览器战争

在20世纪90年代后期，Netscape Navigator 4和IE 4都宣布对JavaScript提供更好的支持，比以前版本的浏览器大有改善。

但遗憾的是，这两组开发人员走上了不同的道路，他们分别给JavaScript语言本身及如何与Web页面交互定义了自己的规范。

这种荒唐的情况导致开发人员总是要编写两个版本的脚本，利用一些复杂的、经常可能导致错误的程序来判断用户在使用什么浏览器，然后再切换到适当版本的脚本。

NOTE

说明：“网际网络联盟”（World Wide Web Consortium，W3C）是一个国际组织，致力于制定开放标准来支撑互联网的长期发展。其站点http://www.w3.org/包含了大量与Web标准相关的信息与工具。

好在“网际网络联盟”（W3C）非常努力地通过DOM来规范各个浏览器制作商生成和操作页面的方式。1级DOM于1998年完成，2级版本完成于2000年年末。

关于DOM是什么或它能做什么，本书的相应章节会有所介绍。

1.5　<script>标签

当用户访问一个页面时，页面中包含的JavaScript代码会与其他页面内容一起传递给浏览器。

NOTE

说明：JavaScript是一种解释型语言，不是C++或Java那样的编译语言。JavaScript指令以纯文本形式传递给浏览器，然后依次解释执行。它们不必先“编译”成只有计算机处理器能够理解的机器码，这让JavaScript程序很便于阅读，能够迅速地进行编辑，然后在浏览器里重新加载页面就可以进行测试。

在HTML里使用<script>和</script>标签，可以在HTML代码里直接包含JavaScript语句。

<script>
　　 …JavaScript语句…
</script>

本书的代码都是符合HTML5规范的，也就是说，<script>元素没有任何必须设置的属性（在HTML5里，type属性是可选的，本书的范例里都没有使用这个属性）。但如果是在HTML4.x或XHTML页面里添加JavaScript，就需要使用type属性了：

<script type="text/javascript">
　　 …JavaScript语句…
</script>

偶尔还会看到<script>元素使用属性language="JavaScript"，这种方式已经废弃很久了。除非是需要支持很古老的浏览器，比如Navigator或Mosaic，否则完全不必使用这种方式。

NOTE

说明：“废弃”（deprecated）这个词对于软件功能或编码方式来说意味着最好避免使用，因为它们已经被新功能或新方式取代了。

虽然为了实现向下兼容而仍然使用这类的功能，但“废弃”这个状态通常意味着这样的功能会在不久之后被清除。

本书的范例把JavaScript代码放置到文档的body部分，但实际上JavaScript代码也能出现在其他位置。我们还可以利用<script>元素加载保存在外部文件中的JavaScript代码，关于这方面的详细介绍请见第2章。

1.6　DOM简介

“文档对象模型”（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

说明：本书使用1级和2级的W3C DOM定义。如果想了解各种级别DOM的详细内容，可以访问https://developer.mozilla.org/en/DOM_Levels。

1.6.1　W3C和标准兼容

浏览器厂商在最近的版本中对DOM的支持都有了很大的改善。在编写本书时，IE最新版本是11，Netscape Navigator以Mozilla Firefox重生（当前版本是35.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。我们建议读者把自己使用的浏览器升级到最新的较为稳定的版本。

1.6.2　window和document对象

浏览器每次加载和显示页面时，都在内存里创建页面及其全部元素的一个内部表示体系，也就是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.6.3　对象表示法

提示：这种表示法可以扩展任意多次，以表示树结构中的任何对象。例如

表示object3，其父对象是object2，而object2又是object1的子对象。

我们用句点方式表示树形结构里的对象：

object1.object2.object3

parent.child

如图1.1所示，location对象是window对象的子对象，所以在DOM里就像这样表示它：

window.location

TIP

HTML页面的<body>部分在DOM里是document对象的一个子对象，所以表示为：

window.document.body

这种表示法的最后一个部分除了可以是对象外，还可以是属性或方法：

object1.object2.property
object1.object2.method

举例来说，如果想访问当前文档的title属性，也就是HTML标签<title>和</title>，我们可以这样表示：

window.document.title

CAUTION

注意：如果对象层次和句点表示法似乎现在对你来说还不是很清晰的话，不必为此担心。在本书中，你将会看到很多的示例。

TIP

提示：window对象永远包含当前浏览器窗口，所以使用window.document就可以访问当前文档。作为一种简化表示，使用document也能访问当前文档。

如果是打开了多个窗口，或是使用框架集，那么每个窗口或框架都有单独的window和document对象，为了访问其中的某一个文档，需要使用相应的窗口名称和文档名称。

1.7　与用户交互

现在来介绍window和document对象的一些方法。首先介绍的这两个方法都能提供与用户交互的手段。

1.7.1　window.alert()

提示：在实际编码过程中，可以不明确书写window.这部分。因为它是DOM层级结构的最顶层（有时也被称为“全局对象”），任何没有明确指明对象的方法调用都会被指向window，所以

也能实现同样功能。

即使不知道window.alert()，我们实际上在很多场合已经看到过它了。window对象位于DOM层级的最顶端，代表了显示页面的浏览器窗口。当我们调用alert()方法时，浏览器会弹出一个对话框显示设置的信息，还有一个“确定”按钮。范例如下：

<script>alert("Here is my message");</script>

<script>window.alert("Here is my message");</script>

这是第一个使用句点表示法的范例，其中调用了window对象的alert()方法，所以按照object.method表示方法就写为window.alert。

TIP

请注意要显示的文本位于引号之中。引号可以是双引号，也可以是单引号，但必须有引号，否则会产生错误。

这行代码在浏览器执行时，产生的弹出对话框如图1.2所示。

图1.2　一个window.alert()对话框

TIP

提示：图1.2显示的弹出对话框由运行在Ubuntu Linux下的Chrome浏览器产生。不同操作系统、不同浏览器、不同显示设置都会影响这个对话框的最终显示情况，但它总是会包含要显示的信息和一个“OK”按钮。

TIP

提示：在用户单击“OK”按钮之前，页面上是不能进行其他任何操作的。具有这种行为模式的对话框称为“模态”对话框。

1.7.2　document.write()

{JavaScript编写的“Hello World!” !} 在介绍一种编程语言时，如果不使用传统的“Hello World!”范例似乎说不过去。这个简单的HTML文档如程序清单1.1所示。

程序清单1.1　一个alert()对话框中的“Hello World!”

在文本编辑器里创建一个文档，命名为hello.html，输入上述代码，保存到计算机，然后在浏览器中打开它。

从这个方法名称就可以猜到它的功能。显然它不是弹出对话框，而是直接向HTML文档写入字符，如图1.3所示。

<script>document.write("Here is another message");</script>

<!DOCTYPE html>
<html>
<head>
　　 <title>Hello from JavaScript!</title>
</head>
<body>
　　 <script>
　　　　alert("Hello World!");
　　 </script>
</body>
</html>

图1.3　使用document.write()

NOTE

说明：实际上，无论从功能来说，还是从编码风格与可维护性来说，document.write都是一种向页面输出内容的笨拙方式，它有很多的局限性。大多数正规的JavaScript程序员都不会使用这种方式，更好的方式是使用JavaScript和DOM。但在本书第一部分介绍JavaScript语言的基本知识时，我们还会使用这个方法。

实践

CAUTION

注意：有些文本编辑器会尝试给我们指定的文件名添加.txt后缀，因此在保存文件时要确保使用了.html后缀，否则浏览器可能不会正常打开它。

几乎全部操作系统都允许我们用鼠标右键单击HTML文件图标，从弹出菜单里选择“打开方式…”（或类似的字眼）。另外一种打开方式是先运行喜欢的浏览器，然后从菜单栏里选择“文件”>“打开”，找到相应的文件，加载到浏览器。

CAUTION

注意：有些浏览器的默认安全设置会在打开本地内容（比如本地计算机上的文件）时显示警告内容，如果看到这样的提示，只要选择允许继续操作即可。

这时会看到如图1.2所示的对话框，但其中的内容是“Hello World!”。如果计算机里安装了多个浏览器，可以尝试用它们都来打开这个文件，比较得到的结果。对话框外观可能有细微差别，但信息和“OK”按钮都是一样的。

1.7.3　读取document对象的属性

正如前文所述，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对象的属性

1.8　小结

本章简要介绍了服务器端脚本和客户端脚本的概念，还简述了JavaScript和DOM的历史演变，大概展示了JavaScript能够实现什么功能来增强页面和改善用户体验。

本章还简单介绍了DOM的基本结构，展示了如何使用JavaScript访问特定对象及其属性，并且使用这些对象。

后面的章节将基于这些基本概念逐渐展开更高级的脚本编程项目。

1.9　问答

问：如果使用服务器端脚本（比如PHP或ASP），还能在客户端使用JavaScript进行编程吗？

答：当然可以。事实上，这种组合方式能够形成一个有力的平台，实现功能强大的应用。Google Mail就是个很好的范例。

问：应该对多少种不同的浏览器进行测试呢？

答：方便的情况下越多越好。编写与标准兼容的、避免使用浏览器专用功能的代码，从而让程序在各个浏览器上都能顺畅运行，这不是一件简单的事情。浏览器在特定功能的实现上有一两处细微差别，但这总是难免的。

问：包含JavaScript代码会不会增加页面加载的时间？

答：是的，但通常这种影响很小，可以忽略不计。如果JavaScript代码的内容比较多，就应该在用户可能使用的最慢的连接上进行测试。除了一些极其特殊的情况，这一般不会成为什么问题。

1.10　作业

请先回答问题，再参考后面的答案。

1.10.1　测验

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.10.2　答案

1．选b。JavaScript是一种解释型语言，它以纯文本方式编写代码，一次读取并执行一条语句。

2．选a。JavaScript语句添加在<script>和</script>之间。

3．选d。window对象位于DOM树的顶端，document对象是它的一个子对象。

1.11　练习

在本章的“实践”环节中，我们使用了这样一行代码：

alert(document.title);

它可以输出document对象的title属性。请尝试修改这段脚本，输出document.lastModified属性，它包含的是Web页面最近一次修改的日期和时间。（提示：属性名称是区分大小写的，注意这个属性里大写的M。）还可以尝试用document.write()代替alert()方法向页面直接输出信息，如图1.3所示。

在不同的浏览器里运行本章的范例代码，观察页面显示情况有什么区别。

第2章　创建简单的脚本

本章主要内容包括：

在Web页面里添加JavaScript的各种方式

JavaScript语句的基本语法

声明和使用变量

使用算术操作符

代码的注释

捕获鼠标事件

第1章介绍了JavaScript是一种能够让Web页面更具有交互性的脚本语言。

本章将介绍如何向Web页面添加JavaScript，以及编写JavaScript程序的一些基本语法，比如语句、变量、操作符和注释。同时，本章将涉及更加实用的脚本范例。

2.1　在Web页面里添加JavaScript

说明：有时在<script>标签里可以看到HTML风格的注释标签，它们包含着JavaScript语句，比如：

这是为了兼容不能识别<script>标签的老版本浏览器。这种“注释”方式可以防止老版本浏览器把JavaScript源代码当作页面内容显示出来。除非我们有特别明确的需求要支持老版本的浏览器，否则是不需要使用这种技术的。

正如上一章所介绍的，JavaScript代码是和页面内容一起发送给浏览器的，这是如何做到的呢？有两种方法可以把JavaScript代码关联到HTML页面，它们都要使用第1章介绍的<script>和</script>标签。

<script>
　　 <!--
　　 …JavaScript语句…
　　 -->
</script>

第一种方法是把JavaScript语句直接包含在HTML文件里，就像上一章所介绍的一样。

<script>
　　 …JavaScript语句…
</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代码保存到单独的文件中有不少好处：

当JavaScript代码有更新时，这些更新可以立即作用于使用这个JavaScript文件的页面。这对于JavaScript库是尤为重要的（本书稍后会有介绍）。
HTML页面的代码可以保持简洁，从而提高易读性和可维护性。
可以稍微提高一点性能。浏览器会把包含文件进行缓存，当前页面或其他页面再次需要使用这个文件时，就可以使用一个本地副本了。

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区域时，在页面被呈现时，遇到这些代码就会解释和执行，然后继续呈现，直到完成页面的内容。

TIP

提示：你并不是只能够使用一个script元素，需要的话，可以在页面中使用任意多个script元素。

NOTE

2.2　JavaScript语句

JavaScript程序是由一些单独的指令组成的，这些指令称为“语句”。为了能够正确地解释语句，浏览器对语句的书写方式有所要求。第一种方式是把每条语句写成一行：

语句1
语句2

另一种方式是在同一行里书写多条语句，每条语句以分号表示结束。

语句1; 语句2;

为了提高代码的可读性，也为了防止造成难以查找的语法错误，最好是结合上述两种方式的优点，也就是一行书写一条语句，并且用分号表示语句结束：

语句1;
语句2;

代码注释

说明：JavaScript还可以使用HTML注释语法来实现单行注释：

但我们一般不在JavaScript中使用这种方式。

有些语句的作用并不是为了让浏览器执行，而且为了方便需要阅读代码的人。我们把这些语句称为“注释”，它有一些特定的规则。

<!-- 注释内容 -->

长度在一行之内的注释可以在行首以双斜线表示：

//注释内容

NOTE

如果需要用这种方式添加多行注释，需要在每一行的行首都使用这个前缀：

//注释内容
//注释内容

实现多行注释的一种更方便的方法是使用/标记注释的开始，使用/标记注释的结束。其中的注释内容可以跨越多行。

/* 这里的注释
　 内容可以跨越
　 多行　*/

在代码里添加注释是一种非常好的习惯，特别是在编写较大、较复杂的JavaScript程序时。注释不仅可以作为我们自己的提示，还可以为以后阅读代码的其他人提供指示和说明。

NOTE

说明：注释的确会略微增加JavaScript源文件的大小，从而对页面加载时间产生不好的影响。一般来说，这种影响小到可以忽略不计，但如果的确需要消除这种影响，我们可以清除JavaScript文件里的全部注释，形成所谓的“产品”版本，用于实际的站点。

2.3　变量

变量可以看作一种被命名的分类容器，用于保存特定的数据。数据可以具有多种形式：整数或小数、字符串或其他数据类型（本章稍后将会介绍）。变量可以用任何方式进行命名，但我们一般只使用字母、数字、美元符号（$）和下划线。

CAUTION

注意：JavaScript是区分大小写的，变量mypetcat和Mypetcat或MYPETCAT是不一样的。

JavaScript程序员和其他很多程序员习惯使用一种名为“骆驼大小写”（或被称为“混合大小写”等）的方法，也就是把各个单词或短语连写在一起，没有空格，每个单词的首字母大写，但整个名称的第一个字母可以是大写或小写。按照这种方式，前面提到的变量就应该命名为MyPetCat或myPetCat。

假设有一个变量的名称是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这样的名称也是合法的，但前者显然具有更好的易读性和可维护性。

2.4　操作符

如果不能通过计算操作变量中保存的值，那么这些值的用处就不是很大。

2.4.1　算术操作符

提示：如果变量值的自增或自减不是1，而是其他数值，JavaScript还允许把算术操作符与等号结合使用，比如+=和−=。

如下面两行代码的效果是相同的：

下面两行也是一样：

乘法和除法算术操作符也可以这样使用：

首先，JavaScript可以使用标准的算术操作符进行加、减、乘和除运算。

var theSum = 4 + 3;

total = total + 5;
total += 5;

显然，前面这条语句执行之后，变量theSum的值是7。在运算中，我们还可以使用变量名称：

var productCount = 2;
var subtotal = 14.98;
var shipping = 2.75;
var total = subtotal + shipping;

counter = counter - step;
counter -= step;

JavaScript的减法（−）、乘法（*）和除法（/）也是类似的：

subtotal = total – shipping;
var salesTax = total * 0.15;
var productPrice = subtotal / productCount;

price = price * uplift;
price *= uplift;

如果想计算除法的余数，可以使用JavaScript的模除运算符，也就是“%”：

var itemsPerBox = 12;
var itemsToBeBoxed = 40;
var itemsInLastBox = itemsToBeBoxed % itemsPerBox;

上述语句运行之后，变量itemsInLastBox的值是4。

JavaScript对变量值的自增和自减有快捷操作符，分别是（++）和（−−）：

productCount++;

上述语句相当于：

productCount = productCount + 1;

类似地，

items--;

与下面的语句作用相同：

items = items – 1;

TIP

关于JavaScript算术操作符的更详细介绍请见本书附录B。

2.4.2　操作符优先级

在一个计算中使用多个操作符时，JavaScript根据“优先级规则”来确定计算的顺序。比如下面这条语句：

var average = a + b + c / 3;

根据变量的名称，这应该是在计算平均数，但这个语句不会得到我们想要的结果。在与a和b相加之前，c会先进行除法运算。为了正确地计算平均数，需要添加一对括号，像下面这样：

var average = (a + b + c) / 3;

如果对于运算优先级不是十分确定，我建议使用括号。这样做并不需要什么额外的代价，不仅能够让代码更易读（无论是对编写者本人还是对需要查看代码的其他人），还能避免优先级影响到运算过程。

NOTE

说明：对于有PHP或Java编程经验的读者来说，将会发现JavaScript的操作符优先级规则与这两种语言基本是一样的。关于JavaScript操作符优先级的详细说明请见：http://msdn.microsoft.com/en-us/library/z3ks45k7(v=vs.94).aspx。

2.4.3　对字符串使用操作符“+”

把摄氏度转换为华氏度　

把摄氏度转换为华氏度的方法是把数值乘9，除以5，然后加32。用JavaScript可以这样做：

实际上，我们可以省略代码里的括号，结果也是正确的：

然而使用括号可以让代码更易懂，而且有助于避免操作符优先级可能导致的错误。

让我们在Web页面里测试上述代码，如程序清单2.2所示。

程序清单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;

var name = "David";
var age = 45;
alert(name + age);

图2.2所示是对一个字符串变量和一个数值变量使用操作符“+”的结果。

var hTemp = cTemp*9/5 + 32;

图2.2　连接一个字符串和一个数值

本书的第5章将会更详细地讨论JavaScript的数据类型和字符串操作。

实践

<!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>

2.5　捕获鼠标事件

为页面增加与用户的交互是JavaScript的基本功能之一。为此，我们需要一些机制来检测用户和程序在特定时间在做什么，比如鼠标在浏览器的什么位置，用户是否单击了鼠标或按了键盘按键，页面是否完整加载到浏览器，等等。

这些发生的事情，我们称之为事件（event），JavaScript提供了多种工具来处理事件。第9章将详细介绍事件和处理事件的高级技术，现在先来看看利用JavaScript检测用户鼠标动作的一些方法。

JavaScript使用事件处理器（event handler）来处理事件，本章介绍其中的3个：onClick、onMouseOver和onMouseOut。

2.5.1　onClick事件处理器

onClick事件处理器几乎可以用于页面上任何可见的HTML元素。实现它的方式之一是给HTML元素添加一个属性：

onclick="…一些JavaScript语句…"

NOTE

说明：虽然给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元素及属性名称都使用小写字母。

2.5.2　onMouseOver和onMouseOut事件处理器

实现图像变化　

利用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所示。

如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器。

当鼠标进入页面上被某个元素所占据的区域时，会触发onMouseOver事件。而onMouseOut事件，很显然是在鼠标离开这一区域时触发的。

程序清单2.4展示了一个简单的onMouseOver事件处理过程。

程序清单2.4　使用onMouseOver事件处理器

<!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>

<!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事件处理器

实践

图2.6　利用onMouseOver和onMouseOut实现的图像翻滚

NOTE

说明：这曾经是图像翻滚的经典方式，而现在已经被更高效的“层叠样式表”（CSS）取代了，但它仍不失为展示onMouseOver和onMouseOut事件处理器的后一种方便的方式。

2.6　小结

本章的内容相当丰富。

首先学习了在HTML页面里添加JavaScript代码的不同方式。

接着学习了在JavaScript里声明变量，给变量赋值以及利用算术操作符操作变量。

最后介绍了JavaScript的一些事件处理器，展示如何检测用户鼠标的特定行为。

2.7　问答

问：在程序清单和代码片段里，有时把<script>开始和结束标签写在一行里，有时写在不同的行，这有什么区别吗？

答：空格、制表符和空行这类空白内容在JavaScript里是完全被忽略的。我们可以利用这些空白调整代码的布局，使代码更容易理解。

问：是否能使用同一个<script>元素来包含外部JavaScript文件，同时包含JavaScript语句？

答：不行。如果利用<script>元素的src属性包含了外部JavaScript文件，就不能在<script>和</script>之间包含JavaScript语句了，而是这个区域必须为空。

2.8　作业

请先回答问题，再参考后面的答案。

2.8.1　测验

1．什么是onClick事件处理器？

　　a．检测鼠标在浏览器里位置的一个对象

　　b．为响应用户单击鼠标动作而执行的脚本

　　c．用户能够单击的一个HTML元素

2．页面里允许有几个<script>元素？

　　a．0

　　b．仅1个

　　c．任意数量

3．关于变量，下列哪个说法是不正确的？

　　a．变量的名称是区分大小写的

　　b．变量可以保存数值或非数值信息

　　c．变量的名称可以包含空格

2.8.2　答案

1．选b。用户单击鼠标时，onClick事件被触发。

2．选c。可以根据需要使用多个<script>元素。

3．选c。JavaScript的变量名称不能包含空格。

2.9　练习

从程序清单2.4入手，删除<img>元素里的onMouseOver事件处理器，添加onClick事件处理器，把图像的title属性设置为My New Title。（提示：利用this.title可以访问图像的title属性。）

有什么办法可以方便地测试脚本是否正确地设置了新的图像标题？

JavaScript入门经典（第6版）

图书目录:

详情

图书摘要

版权信息

版权声明

内容提要

作者简介

前 言

目标读者

本书的目标

本书约定

问答、测验和练习

本书结构

必要工具

第一部分 JavaScript基础

第1章 JavaScript简介

1.1 Web脚本编程基础

1.2 服务器端与客户端编程

1.3 JavaScript简介

1.4 JavaScript起源

浏览器战争

1.5 <script>标签

1.6 DOM简介

1.6.1 W3C和标准兼容

1.6.2 window和document对象

1.6.3 对象表示法

1.7 与用户交互

1.7.1 window.alert()

1.7.2 document.write()

1.7.3 读取document对象的属性

1.8 小结

1.9 问答

问：如果使用服务器端脚本（比如PHP或ASP），还能在客户端使用JavaScript进行编程吗？

问：应该对多少种不同的浏览器进行测试呢？

问：包含JavaScript代码会不会增加页面加载的时间？

1.10 作业

1.10.1 测验

1.10.2 答案

1.11 练习

第2章 创建简单的脚本

2.1 在Web页面里添加JavaScript

2.2 JavaScript语句

代码注释

2.3 变量

2.4 操作符

2.4.1 算术操作符

2.4.2 操作符优先级

2.4.3 对字符串使用操作符“+”

2.5 捕获鼠标事件

2.5.1 onClick事件处理器

2.5.2 onMouseOver和onMouseOut事件处理器

2.6 小结

2.7 问答

问：在程序清单和代码片段里，有时把<script>开始和结束标签写在一行里，有时写在不同的行，这有什么区别吗？

问：是否能使用同一个<script>元素来包含外部JavaScript文件，同时包含JavaScript语句？

2.8 作业

2.8.1 测验

2.8.2 答案

2.9 练习

相关图书

相关文章

相关课程

前言

第一部分　JavaScript基础

第1章　JavaScript简介

1.1　Web脚本编程基础

1.2　服务器端与客户端编程

1.3　JavaScript简介

1.4　JavaScript起源

1.5　<script>标签

1.6　DOM简介

1.6.1　W3C和标准兼容

1.6.2　window和document对象

1.6.3　对象表示法

1.7　与用户交互

1.7.1　window.alert()

1.7.2　document.write()

1.7.3　读取document对象的属性

1.8　小结

1.9　问答

1.10　作业

1.10.1　测验

1.10.2　答案

1.11　练习

第2章　创建简单的脚本

2.1　在Web页面里添加JavaScript

2.2　JavaScript语句

2.3　变量

2.4　操作符

2.4.1　算术操作符

2.4.2　操作符优先级

2.4.3　对字符串使用操作符“+”

2.5　捕获鼠标事件

2.5.1　onClick事件处理器

2.5.2　onMouseOver和onMouseOut事件处理器

2.6　小结

2.7　问答

2.8　作业

2.8.1　测验

2.8.2　答案

2.9　练习