趣学JavaScript——教孩子学编程

978-7-115-40613-2
作者: 【美】Nick Morgan(摩根)
译者: 李强
编辑: 陈冀康

图书目录:

详情

本书用一种轻松活泼的方式带领读者进入JavaScript语言的世界。作者将带领读者以独特的、新奇而充满乐趣的示例,来学习JavaScript编程。其中,术语会特别提示,代码用不同颜色提示、分析和说明。图示也轻松活泼。本书每一章都有精心设计的编程谜题,让读者开动大脑,充分理解所学的知识和内容。本书最后,介绍了如何编写两个完整的游戏。这种通过编写游戏的教学方式,能够极大地调动读者的学习积极性。。

图书摘要

版权信息

书名:趣学JavaScript——教孩子学编程

ISBN:978-7-115-40613-2

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

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

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

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


Nick Morgan是Twitter的一名前端工程师。他热爱编程,并且特别关注JavaScript。Nick和她的未婚妻,以及他们的绒毛犬Pancake,居住在旧金山。他的博客是skilldrick.co.uk。

绘图者简介

Miran Lipovaca是Learn You a Haskell for Great Good!一书的作者。他喜欢拳击、演奏低音吉他,当然,还有绘画。

技术评阅者简介

Angus Croll是If Hemingway Wrote JavaScript的作者,他同等程度地痴迷于JavaScript和文学。他在Twitter的UI框架团队工作,在那里,他是Flight框架的共同作者。他写着很有影响力的JavaScript博客,并且是世界各地的大会演讲者。他的Twitter账号是@angustweets。

本书特色

国内第一本原创的Robotium图书

紧跟移动平台开发、测试的热点技术

全面讲解了用Robotium建立测试工程、测试项目搭建、自动化测试脚本编写、测试框架完善、Robotium自动化测试用例、测试代码批量运行、持续集成、Crash处理、跨应用解决方案、代码覆盖率、代码覆盖率展现、常见错误及解决方法等实战技术和技巧,帮助读者尽快学懂用Robotium进行移动测试。


Simplified Chinese-language edition copyright © 2016 by Posts and Telecom Press.

Copyright © 2015 by Nick Morgan. Title of English-language original: JavaScript for Kids, ISBN-13: 978-1-59327-408-5, published by No Starch Press.

All rights reserved.

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

版权所有,侵权必究。


JavaScript是Internet的语言,是创建令人惊讶的Web、你喜欢的站点交互性和在线游戏的秘密武器。

本书用轻松愉快的方式,通过耐心的、按部就班的示例,以及充满乐趣的图示,帮助读者轻松地学习编程基础知识。全书共16章,从基础知识开始,详细介绍了操作字符串、数组以及循环,然后继续学习一些高级话题,如使用jQuery构建交互性,以及使用画布绘图等。本书通过教授编写一些简单有趣的游戏,帮助读者掌握JavaScript编程。每一章都构建于上一章的基础之上,并且每章末尾的编程挑战能够激发读者更多的思考和学习兴趣。

本书针对任何想要学习JavaScript或初次接触编程的人。本书针对青少年学习JavaScript量身定做,但也适合作为不同年龄的初学者的第一本编程图书。


欢迎阅读本书!在本书中,你将学习用一种Web语言(JavaScript)来编写程序。但是更重要的是,你将成为一名程序员,即不仅会使用计算机而且会控制计算机的人。一旦学会了编程,你可以让计算机遵从你的意愿去做你想做的任何事情。

JavaScript是一门不错的语言,值得学习,因为它随处可用。诸如Chrome、Firefox和Internet Explorer这样的Web浏览器,都使用JavaScript。借助JavaScript的强大功能,Web程序员可以将Web页面从简单的文档变换为功能完备的交互式应用程序和游戏。

但是,并不仅限于构建Web页面。JavaScript可以在Web服务器上运行,以创建整个Web站点,甚至用于控制机器人和其他的硬件。

本书针对任何想要学习JavaScript或初次接触编程的人。本书针对儿童量身定做,但是,它也适合作为不同年龄的初学者的第一本编程图书。

通过本书,你可以逐渐构建和积累自己的JavaScript知识,从JavaScript的简单数据类型开始,然后继续了解复杂的类型、控制结构和函数。然后,你将学习如何编写代码对用户移动鼠标或者按下键盘上的按键做出响应。最后,学习有关canvas元素的知识,canvas允许使用JavaScript来绘制所能想象到的任何东西并对其实现动画。

一路下来,你将创建几个游戏来扩展自己的编程技能,并且将所学的知识付诸应用。

首先,按照顺序阅读。这听起来似乎很简单,但是,确实有很多人想要直接跳到有趣的内容,例如,开发游戏。但是,每一章都是构建于前面各章所介绍的知识之上的,因此,如果你从头开始阅读,那么在遇到游戏的时候也不会有什么困难。

编程语言就像是口头语言一样:你必须学习语法和词汇,这要花一些时间。唯一提高的方法就是编写(并阅读)大量的代码。随着你编写越来越多的JavaScript程序,你将会发现该语言的某些部分已经变成第二天性,最终你会变成一名熟练的JavaScript程序员。

在阅读本书的时候,我鼓励你录入并测试本书中的示例代码。如果你没有完全理解其含义,可以尝试做一些小的修改,看看有什么效果。如果这些修改没有达到你预期的效果,看看能否找出其中的原因。

最重要的,要练习“试试看”和“编程挑战”部分。输入本书中出现的代码只是第一步,但是,当你开始编写自己的代码的时候,你将会从更深的层次理解编程。如果你发现某个挑战很有趣,那么,去尝试它!甚至可以提出自己的挑战,在已经编写的程序上构建更多功能。

通过http://nostarch.com/javascriptforkids/可以找到编程挑战的示例解决方案。当你解决了一个挑战之后,尝试看一下解决方案,以便将自己的方法和我的方法进行比较。或者,如果你遇到困难,可以查看解决方案以得到提示。但是记住,这只是一个示例解决方案。用JavaScript完成相同的任务可以有很多不同的方法,因此,如果你最终使用了一个和我完全不同的解决方案,也不必为此担心。

如果你遇到一个术语而又不理解其含义,那么可以查阅本书末尾的术语表。这个术语表包含了你将会在本书中遇到的很多编程术语的定义。

第1章快速介绍JavaScript,并且带领你开始在Google Chrome中编写JavaScript。

第2章介绍了JavaScript所使用的变量和基本数据类型:数字、字符串和Boolean。

第3章介绍数组。数组用来保存其他数据片段的列表。

第4章介绍对象。对象包含了键-值对。

第5章介绍HTML。HTML是用于创建Web页面的语言。

第6章介绍如何使用if语句、for循环以及其他的控制结构获得对代码更多的控制。

第7章将目前所学的知识综合起来,创建了一个简单的Hangman猜词
游戏。

第8章介绍了如何编写自己的函数,以便能够组织和复用代码块。

第9章介绍了jQuery,这种工具使得用JavaScript控制Web页面更容易。

第10章介绍了如何使用超时、间隔和事件处理程序让代码更具有交
互性。

第11章使用函数、jQuery和事件处理程序来创建一个名为“Find the Buried Treasure!”的游戏。

第12章介绍一种叫作面向对象编程的编程风格。

第13章介绍了canvas元素,它允许你使用JavaScript在Web页面上绘制图形。

第14章基于第10章所学习的动画技术,继续探讨,以便能够使用canvas创建动画;第15章介绍了如何使用键盘来控制这些canvas动画。

在第16章和第17章中,我们将编写一款完整的贪吃蛇游戏,这将用到前面15章所学习过的所有内容。

术语表包含了你将会遇到的很多新的术语的定义。

后记针对如何学习更多的编程知识给出了一些建议。

还有最后一件事情需要记住:享受乐趣!编程是好玩而又具有创造性的活动,就像是绘画或玩游戏一样(实际上,在本书中,你也会使用JavaScript来绘画和玩游戏)。一旦你掌握了如何编写代码,唯一的局限就是你的想象力。欢迎你进入令人惊讶的计算机编程世界,我希望你感受狂欢!



计算机是功能强大到令人难以置信的工具,它能够执行很多惊人的操作,例如,下国际象棋比赛、提供数以千计的Web页面,或者在数秒钟之内执行数百万次复杂的计算。但是,深入去看,计算机实际上是很傻的。计算机只能够执行人类告诉它的事情。我们使用计算机程序告诉计算机采取什么动作,而程序只是令计算机遵从的指令集合。没有程序的话,计算机什么也干不了。

更糟糕的是,计算机不能理解英语或任何人类语言。计算机程序是使用像JavaScript这样的编程语言来编写的。你此前可能没有听说过JavaScript,但是,你肯定已经用过它了。JavaScript语言用来编写在Web页面中运行的程序。JavaScript可以控制一个Web页面的外观,并且当浏览者点击按钮或移动鼠标的时候,它让页面做出响应。

诸如Gmail、Facebook和Twitter等Web站点,都使用JavaScript使得发送邮件、发布评论或浏览Web站点更加容易。例如,当你在Twitter上阅读@nostarch发布的tweets的时候,随着页面滚动,你会在页面的底部看到更多的tweets,这就是JavaScript所为。

要搞清楚JavaScript为何如此令人兴奋,你只需要访问几个Web站点。

图1-1 在HelloEnjoy的“Lights”音乐视频中,你可以控制闪光的鼠标

图1-2 当你访问Patatap的时候,尝试按下众多的按键以产生不同的声音

图1-3 CubeSlam游戏完全是用JavaScript编写的

JavaScript并非唯一的编程语言,实际上,还有数以百计的编程语言。但是,学习JavaScript的理由有很多。首先,它比很多其他的语言更容易学习(而且更有乐趣)。但可能还有一个最好的理由,就是要编写和运行JavaScript程序,你只需要像Internet Explorer、Mozilla Firefox或Google Chrome这样的一个Web浏览器就够了。每一个Web浏览器都带有一个JavaScript解释器,它可以理解如何阅读JavaScript程序。

一旦你编写了JavaScript程序,就可以将到该程序的一个链接发送给人们,并且,他们可以在自己的计算机上的Web浏览器中运行程序(参见本书后记中的“使用JSFiddle分享你的代码”部分)。

让我们在Google Chrome(http://www.google.com/chrome/)中编写一些简单的JavaScript。在你的计算机上安装Chrome(如果还没有安装的话),然后,打开Chrome并且在地址栏输入about:blank。现在,按下Enter键,你将会看到一个空白页面,如图1-4所示。

我们通过在Chrome的JavaScript控制台中编码而开始,这是程序员测试JavaScript程序的一种秘密方式。在Microsoft Windows或Linux上,按下Ctrl键和Shift键,并且按下J键。在Mac OS上,按下Command键和Option键,并且按下J键。

如果你正确地完成了所有的事情,应该会看到一个空白页,但是在其下面有一个右尖括号(>),后面跟着一个闪烁的光标(|),如图1-4所示。这是将要编写JavaScript的位置。

图1-4 Google Chrome的JavaScript控制台

注意

 Chrome控制台将会以彩色显示你的代码文本,例如,你输入的文本是蓝色的,输出将会根据其类型而显示颜色。在本书中,我们对代码文本采用和控制台所使用的类似的颜色。

当你在光标处输入代码,并且按Enter键的时候,JavaScript应该会运行(或执行)你的代码,并且在下一行显示结果(如果有结果的话)。例如,在控制台输入如下内容:

然后按Enter键。JavaScript应该会在下一行输出这个简单的加法的结果(7):

好了,足够简单了。但是,JavaScript远不止是一个不错的计算器,对吧?让我们来尝试一些其他的事情。

让我们创建一个看上去有点傻的JavaScript程序,它输出如下所示的一系列猫脸儿:

和加法程序不同,这个JavaScript程序需要几行代码。要将该程序输入到控制台,你必须在每一行代码的末尾按Shift键和Enter键,以便添加新的代码行(如果只是按Enter键的话,Chrome将会试图执行你所编写的内容,并且程序不会像期望的那样工作。我警告过你,计算机是很傻的。)

在浏览器控制台中输入如下内容:

最后,按Enter键而不是Shift键和Enter键。当你做完这些,应该会看到如下所示的输出:

如果有任何的输入错误,输出会截然不同,或者会得到一条错误消息。这就是我说“计算机很傻”的意思,即便是简短的一段代码,也必须完全无误,计算机才能够理解你要让它做什么。

现在,我还不想介绍代码是如何工作的(我们将在第8章再回到这个程
序),但是,让我们来了解一下这个程序及一般的JavaScript程序的一些特征。

我们的程序包含了很多的符号,包括括号、分号、花括号、加号,以及一些乍看上去有些神秘的单词(如var和console.log)。还有各种JavaScript语法,即JavaScript关于如何将符号和单词组合起来以创建可工作的程序的
规则。

当你想要学习一门新的编程语言的时候,其中最难的部分是习惯如何编写针对计算机的各种不同命令的规则。当你刚开始的时候,需要包含一个圆括号的时候很容易会忘记,又或者当你需要包含某些值的时候搞乱了顺序。但是,通过练习,你会掌握这些规则。

在本书中,我们将按部就班地学习,一点一点地介绍新的语法,以便你能够创建功能逐渐强大起来的程序。

画猫脸儿程序的第一行如下:

这是所谓的注释句。程序员使用注释来使得其他的程序员更容易阅读和理解自己的代码。计算机会完全忽略掉注释。JavaScript中的注释以两个斜杠开头(//)。斜杠后面的所有内容(同一行中)都会被JavaScript解释器忽略,因此,注释对于程序如何执行没有任何影响,它们只是提供对程序的说明。

在本书的代码中,你将会看到,注释说明了在代码中发生了什么。当你编写自己的程序的时候,请添加自己的注释。这样,你在随后见到自己的代码的时候,注释会提醒你代码是如何工作的,以及在每一个步骤中发生了什么。

在我们的程序的最后一行,还有另一个代码注释。记住,//之后的任何内容,计算机都不会运行。

代码注释可以单独成行,或者放在代码的后面。如果你在前面放上//,如下所示:

那么,什么也不会发生!Chrome会将整行都当作是一个注释,即便其内容是JavaScript代码。

一旦你开始阅读各种广泛的JavaScript代码,应该会看到如下所示的注释:

这是一种不同风格的注释,它通常用于一行以上的注释。但是,它做的事情是一样的://之间的任何内容都是注释,计算机不会运行它们。

在本章中,我们了解了什么是JavaScript以及它可以用来干什么。你还学习了如何使用Google Chrome浏览器运行JavaScript,并且尝试了一个示例程序。本书中的所有代码示例,除非特别说明,都可以(并且应该)在Chrome的JavaScript控制台中使用。不要只是阅读代码,尝试输入一些内容。这是学习编程的唯一方法。

在下一章中,我们将学习JavaScript的基础知识,首先从你可以操作信息的3种基本类型开始:数字、字符串和Boolean。


编程其实就是操作数据,可什么是数据呢?数据就是我们保存在计算机程序中的信息。例如,你的名字就是一条数据,年龄也是一条数据。你头发的颜色,有几个兄弟姐妹,住在什么地方,是男生还是女生——所有这些都是数据。

JavaScript中有3种基本的数据类型:数字、字符串和Boolean(布尔类型)。number用来表示数字。例如,年龄可以用一个number表示,身高也可以用number表示。JavaScript中的数字如下所示:

字符串用来表示文本。名字在JavaScript中可以用一个字符串来表示,电子邮件地址也可以用字符串表示。字符串看上去如下所示:

Boolean是可能为true或false的值。例如,可以用一个Boolean值来表示你是否戴眼镜,也可以用Boolean值表示你是否喜欢吃西兰花。Boolean看上去如下所示:

每种数据类型的使用方式不同。例如,可以把两个数字相乘,却不能把两个字符串相乘。对于一个字符串,可以要求获取其前5个字符。对于布尔值,可以判断两个值是否都为真。下面的代码示例展示了这些可能的操作。

JavaScript中所有数据都是这些数据类型的某种组合。在本章中,我们将依次学习每种数据类型以及使用每种数据类型的不同方式。

注意

 你可能注意到了,所有这些命令都是以分号结尾。分号表示一条特定JavaScript命令或指令的结束,有点像句子末尾的句号。

JavaScript可以执行加、减、乘、除这样的基本数学运算。做这些运算,我们要用到操作符+、-、*和/。

我们可以像使用计算器一样使用JavaScript控制台。我们已经看过3和4相加的示例,再来看一个更难的示例,12345加56789等于几?

心算不是很容易,但是JavaScript计算则不需要花费什么时间。

还可以把多个数字加在一起:

JavaScript也可以做减法运算:

还可以使用星号做乘法运算:

使用斜杠做除法运算:

还可以把这些简单的运算组合成一个较为复杂的计算,如下所示:

这里变得有些棘手,因为计算结果取决于JavaScript每次运算的顺序。数学的规则是,乘法和除法总是在加法和减法之前进行,JavaScript也遵循这个规则。

图2-1展示了JavaScript执行的顺序。首先,进行乘法运算,57*3得到171(用红色字体表示)。然后,进行除法运算,31/4得到7.75(用蓝色字体表示)。接下来,进行加法运算,1234+171得到1405(用绿色字体表示)。最后计算减法,1405-7.75得到1397.25,这就是最后的结果。

如果想要在执行乘法和除法之前,执行加法和减法运算,该怎么办呢?例如,你有1个兄弟和3个姐妹,有8个糖果,你想要把糖果平均分给4个兄弟姐妹,该怎么办?(你已经拿了自己的糖果!)你必须用糖果数除以兄弟姐妹的数量。

图2-1 运算顺序:乘法、除法、加法和减法

下面是一种尝试:

这是不对的。当你只有8个糖果时,你是无法给兄弟姐妹每人11个糖果的。问题就在于,JavaScript在做加法前先做了除法,先计算8除以1(等于8),然后再加上3,得到的是11。要修正这个算式,以便让JavaScript先做加法计算,我们需要使用括号:

这个结果靠谱!兄弟姐妹每人两个糖果。括号强制JavaScript先计算1加3,然后再用8除以4。

试试看

假设你的朋友试图用JavaScript计算要买多少个气球。她要举办一个聚会,想要每个人吹爆2个气球。开始有15个人要来,后来她又邀请了9个人。她试图使用下面的代码来计算:

但这似乎不对。

问题在于乘法在加法之前计算。为确保JavaScript先做加法,你需要怎样加括号呢?你的朋友实际上需要买多少个气球呢?

JavaScript允许你使用变量给值起个名字。你可以把变量想象为一个盒子,可以把一个东西放进去。如果要在其中放其他的东西,原来的东西就没有了。

要创建一个新的变量,使用关键字var,后面跟着变量的名称。关键字就是在JavaScript中有特殊意义的单词。在这个例子中,输入var时,JavaScript知道我们即将输入一个新的变量名。例如,定义一个名为nick的变量:

我们创建了一个名为nick的新变量。控制台输出undefined作为回应。这不是一个错误!只要一条命令没有返回一个值,JavaScript就会做出这样的回应。什么是返回值?例如,当我们输入12345 + 56789;时,控制台会返回69134。在JavaScript中,创建一个新的变量不会有返回值,所以解释器输出undefined。

要给变量赋值,使用等号:

设置一个值的过程叫作赋值(assignment,我们把值12赋给变量age)。打印出来的还是undefined,因为我们创建了另一个新的变量。(在后面的示例中,当输出是undefined时,我们不再特意显示出来。)

变量age现在在我们的解释器中,将其值设置为12。这意味着如果只输入age,解释器会显示它的值:

很酷!然而,变量的值并不是一成不变的(之所以称之为变量,是因为它们可以变化),如果想要改变它,只需要再次使用=:

这次我没有使用关键字var,因为变量age已经存在了。只有创建新的变量时,才需要使用var,修改变量的值时则不需要var。还要注意的是,由于我们没有创建新的变量,这条赋值语句返回的是13,并且在下一行中打印出来。

解决前面提到的糖果问题的一个稍微复杂的示例如下所示,该示例没有使用圆括号:

首先,创建一个名为numberOfSiblings的变量,把1+3(JavaScript计算结果为4)赋值给它。然后,创建一个numberOfCandies变量,把8赋值给它。最后,写出表达式numberOfCandies/numberOfSiblings。因为numberOfCandies是8,numberOfSiblings是4,JavaScript计算8/4,结果是2。

要小心对待变量名称,因为很容易把它们拼写错。即便只是大小写错误,JavaScript的解释器也不会知道我们想表达什么意思!例如,如果不小心把numberOfCandies中的C写成小写c,就会得到一个错误:

遗憾的是,JavaScript只会严格地按照你的要求做事情。如果拼写错一个变量的名称,JavaScript就会不明白你的想法,它会显示出一条错误的信息。

JavaScript中变量名称的另一个麻烦是,它们不能包含空格,这就意味着它们的可读性很差。我也可以把变量命名成没有大写字母的numberofcandies,但这会使它更难阅读,因为不清楚单词的结尾在哪里。变量是“numb erof can dies”还是“numberofcan dies”呢?没有大写字母,就很难识别。

处理这个问题的一种常见方法是将每个单词首字母大写,就像NumberOfCandies一样。(这种惯例叫作骆驼拼写法,因为看上去有点像是骆驼的驼峰。)

标准的做法是变量以小写字母开头,通常除了第一个单词外,其他单词的首字母都大写,就像是numberOfCandies一样。(在本书中,我将遵循骆驼拼写法惯例,但是你可以自由选择想要的方式!)

你可以通过对旧的变量做一些数学运算来创建新的变量。例如,可以使用变量来计算一年有多少秒——以及你的年龄是多少秒!我们先来计算一个小时有多少秒。

1小时中的秒数

首先,创建两个新的变量,分别名为secondsInAMinute和minutesInAnHour,让它们都等于60(因为我们知道1分钟有60秒,1个小时有60分钟)。然后,创建一个叫作secondsInAnHour变量,将它的值设置为secondsInAMinute和minutesInAnHour相乘。在处,输入secondsInAnHour,就像在说“告诉我现在secondsInAnHour是多少!”。JavaScript随后给出答案:3600。

1天中的秒数

现在,创建一个叫作hoursInADay的变量,把它设置为24。接下来,创建了secondsInADay变量,将它设置为等于secondsInAnHour乘以hoursInADay。当我们在处询问secondsInADay的值时,得到86400,这是1天中的秒数。

1年中的秒数

最后,创建了变量daysInAYear和secondsInAYear。把365赋值给变量daysInAYear,把secondsInADay乘以daysInAYear的结果赋值给变量secondsInAYear。最后,询问secondsInAYear的值,结果是31536000(超过3100万)。

年龄是多少秒

现在,我们已经知道一年有多少秒了,就可以很容易地计算出你的年龄是多少秒(到最近的年)。例如,我29岁,我是这样编写代码的:

要计算你自己的年龄的秒数,输入相同的代码,但是把age的值改为自己的年龄。或者不使用age变量,使用一个数字作为你的年龄,就像下面这样:

我的年龄是9亿多秒!你的年龄是多少秒呢?

作为一名程序员,经常需要对数字变量加1或减1。例如,可能有一个变量,用来计算今天收到多少个high-five。每次有人给你high-five,就想要把这个变量加1。

加1叫作递增,减1叫作递减。使用操作符++或--来表示递增或递减。

当使用++操作符时,highFives的值加1;当使用--操作符时,highFives的值减1。也可以把这些操作符放在变量之后。这么做的话,虽然会做同样的计算,但是返回值是增加或减少之前的值。

在这个示例中,我们把highFives设置为0。当调用highFives++时,虽然变量递增,但是打印出来的仍然是增加之前的值。如果查看highFives最终的值(两次增加之后),会得到2。

变量要增加特定的值,可以使用如下代码:

把名为x的变量的初始值设置为10。然后,把x + 5赋值给x。因为x是10,所以x + 5就是15。我们所做的就是用x原来的值,计算出x的新值。因此,x = x + 5实际上表示的就是“x加上5”。

JavaScript给出了一个更为简便的方法,使用+=和-=操作符,将变量增加或减少一定数量。例如,如果我们有一个变量x,那么x += 5和x = x + 5是一样的。-=操作符的使用方式也相同,所以x -= 9和x = x - 9是一样的(“x减9”)。使用这两个操作符记录电子游戏得分的示例,如下所示:

在这个示例中,通过把10赋值给变量score,表示最初的分数是10。然后,我们打败了一个怪物,使用+=操作符增加7分(score += 7和score = score + 7是一样的)。在我们打败怪物之前,分数是10,10+7等于17,所以这次操作会将score设置为17。

在成功击败怪物后,我们又撞到一个陨石,分数要减掉3。score-=3和score=score-3是一样的。因为现在score是17,score - 3等于14,所以为score重新赋值为14。

试试看

还有一些其他与+=和-=类似的操作符。例如,*=和/=。如何使用它们呢?试一下:

balloons *= 2执行什么操作?再试一下:

balloons /= 4又执行什么操作呢?

到目前为止,我们只使用过数字。现在,再来看另一种数据类型:字符串。JavaScript中的字符串只是字符序列(这和在大多数编程语言中一样),可以包含字母、数字、标点和空格。我们把字符串放在引号中,这样JavaScript就会知道字符串从哪里开始,到哪里结束。例如,下面是一个经典的字符串:

要输入字符串,只要输入一个双引号("),后面跟着想要的字符串文本,然后用另一个双引号结束字符串。也可以使用单引号('),但是为了简单起见,在本书中,我们只使用双引号。

可以把字符串像数字一样保存在变量中:

变量之前存储过数字,但这并不会影响到为其分配一个字符串。

如果把一个数字放在引号中会怎么样呢?它是字符串还是数字呢?在JavaScript中,字符串就是字符串(即使偶尔有一些字符是数字)。例如:

numberNine是数字,stringNine是字符。为了看出它们之间的区别,我们把它们加在一起:

当我们把数字9加上9,就得到18。但是,当我们对"9"和"9"使用+操作符时,只是把字符串直接连接在一起,得到了"99"。

正如你所见到的,可以对字符串使用+操作符,但是结果与对数字使用+操作符大相径庭。使用+连接两个字符串时,会将第二个字符串附加到第一个字符串的末尾,生成一个新的字符串,如下所示:

这里创建了两个变量(greeting和myName),分别为它们赋一个字符串值("Hello"和"Nick")。当我们把这两个变量加在一起时,两个字符串就组合成一个新的字符串"HelloNick"。

然而,似乎有点不对——Hello和Nick之间应该有个空格。但是JavaScript不会放一个空格,除非在最初的字符串中增加一个空格,专门告诉它这样做。

处,引号中的额外空格也会在最终的字符串中留下来。

除了可以把字符串加在一起,还可以对其做许多操作。如下是一些示例。

要得到一个字符串的长度,只要在字符串的末尾加上.length。

可以在实际的字符串或者包含字符串的变量后面加上.length:

这里,把字符串"Java"赋值给变量java,把字符串"Script"赋值给变量script。然后在每个变量的末尾加上.length,以获取每个字符串的长度以及组合字符串的长度。

注意,我说的是可以在“实际的字符串或者包含字符串的变量”后面加上.length。这说明了关于变量的一件很重要的事情:任何可以使用数字或字符串的地方,也可以使用包含数字或字符串的变量。

有时你想要从一个字符串中获取单个字符。例如,我们可能有一个密码,是由单词列表中每个单词的第2个字母组成。我们需要只取每个单词的第2个字符,并且把它们连接在一起来创建一个新的单词。

使用方括号([ ])从一个字符串中获取指定位置的字符。在字符串或包含字符串的变量的末尾,把需要的字符的编号放到一对方括号中。例如,要获取myName的第一个字符,使用myName[0],如下所示:

注意,要获取字符串的第一个字符,使用0而不是1。这是因为JavaScript(就像很多其他编程语言一样)从0开始计数。这意味着,当我们想要得到字符串的第一个字符时,使用0;当想要得到第二个字符时,使用1;以此类推。

我们来试着找出密码,其信息隐藏在一些单词中。从一系列单词中找到神秘的信息,如下所示:

再提醒一下,注意,要获取每个字符串的第2个字符,使用的编号是1。

要“截取”一大串字符,可以使用slice。例如,读者可能想要从一个较长影评中抓取一些内容作为一个预告,显示在Web站点上。使用slice,要在字符串(或者包含字符串的变量)后边放一个点,后面跟着单词slice和一对圆括号。在括号里边,输入想要截取的字符串的开始位置和结束位置,之间用逗号隔开。图2-2展示了如何使用slice。

有两个数字,设置要截取的开始位置和结束位置。

图2-2 如何使用slice从一个字符串中截取字符

例如:

括号中的第一个数字是要截取的字符串的开始字符位置,第二个数字是要截取字符串的最后一个字符位置。图2-3展示了这次获取的字符,开始位置是3,结束位置是14,开始位置和结束位置都用蓝色字体高亮显示。

图2-3 上面示例中,灰色方框中展示的是slice截取的字符

这里,我们告诉JavaScript,“从这个长字符串的位置3开始,一直到位置14结束,提取字符串的一段”。

如果在slice后面的括号中只有一个数字,将从字符串的这个位置开始截取,到字符串末尾结束,如下所示:

如果有一些文本内容是你想要大声读出来的,就可以使用toUpperCase,把这些内容全部转换成大写字母。

当对一个字符串使用.toUpperCase()时,会将其所有字母转换为大写以生成一个新的字符串。

也可以使用另一种方式进行转换:

从名字可以看出,.toLowerCase()会把所有字母都变成小写。但是句子的首字母不是应该大写吗?我们如何让句子的首字母大写,而把剩余部分全部转换成小写呢?

注意

 看看你能否用刚才介绍过的工具,把"hELlo THERE,hOW ARE yOu doINg?"转换成"Hello there,how are you doing?"。如果你遇到困难了,回顾一下关于获取单个字符和使用slice的那一部分。然后再回来,看看我是怎么做的。

如下是一种方法:

我们逐行介绍。在处,创建了名为sillyString的新变量,把想要修改的字符串保存在这个变量中。在处,使用.toLowerCase()方法,得到sillyString的小写字符版本(“hello there, how are you doing?”),并把它保存到名为lowerString的新变量中。

处,使用[0]获取lower String的第一个字符("h"),并把它保存在firstCharacter中(使用0来获取第一个字符)。然后,在处,创建了firstCharacter的大写版本("H"),把它命名为firstCharacterUpper。

处,使用slice获取lowerString中从第2个字符开始的所有字符("ello there, how are you doing?"),把它保存到restOfString中。最后,在处,把firstCharacterUpper("H")和restOfString连接到一起,得到"Hello there,how are you doing?"。

因为值和变量之间彼此都可以替换,所以可以把行合并为一行,如下所示:

然而,按照这种方式编写代码,容易令人混淆。所以,对于复杂任务的每一步都使用变量,这是个好主意,至少在你更习惯于阅读此类复杂代码之前是这样。

现在来介绍Boolean类型。Boolean只有一个值,不是true(真)就是false(假)。例如,一个简单的布尔表达式如下所示:

这个示例中,我们创建了一个新的名为javascriptIsCool的变量,并且把Boolean值true赋给它。在下一行中,我们得到javascriptIsCool的值,当然是true。

就像可以用算术操作符(+、-、*、/等)把数字组合起来一样,我们也可以用布尔操作符把布尔值组合起来。当用布尔操作符组合布尔值时,结果总是另一个布尔值(true或false)。

JavaScript中的3个主要布尔操作符是&&、||和!。它们看上去有点奇怪,但是稍加练习,用起来并不难。我们试试看。

&&(与)

&&表示“与”。当读出声的时候,人们将其读作“and”“andand”或者“and符和and符”(and符是字符&的名字)。使用&&操作符来判断两个布尔值是否都为真。

例如,在去学校前,你想要确认是否已经洗澡并背上书包。如果两者都为真,就可以去上学,如果有一个为假或者两个都为假,就不能离开家门。

这里,把变量hadShower设置为true,把变量hasBackpack设置为false。当输入hadShower && hasBackpack时,实际上是在问JavaScript“这两个值都是true吗?”。既然它们不是都为true(没有背上书包),那么JavaScript会返回false(还没有为上学做好准备)。

再试一次,这次把两个值都设置为true:

JavaScript现在告诉我们hadShower && hasBackpack为true。你已经为上学做好了准备。

||(或)

布尔操作符||表示“或”,可以读作“or”“or-or”,但也有人称之为“管道符”,因为程序员将|字符称为管道。使用该操作符可以判断两个布尔值中是否有一个为真。

例如,假设还是准备去上学,需要带一份水果作为午餐,但是既可以带苹果,也可以带橙子,或者两者都带。可以用JavaScript判断是否至少带了一份水果,如下所示:

如果hasApple是true或者hasOrange是true,或者两个都是true,则hasApple || hasOrange为true。但是如果两个都是false,则结果为false(没有带任何水果)。

!(非)

!表示“非”。可以称之为“not”,但很多人称之为“惊叹号”。使用它把假转换成真,或者把真转换成假。这对于值的取反很有帮助。例如:

这个示例中,把变量isWeekend设置为true。然后,把变量needToShower Today设置为!isWeekend。“非”把这个值转换成它的相反值,所以如果isWeekend是true,那么!isWeekend就是false。所以,当查看needToShowerToday的值时,会得到false(今天不需要洗澡,因为今天是周末)。

因为needToShowerToday是false,所以!needToShowerToday就会为true。

换句话讲,你今天真的不需要洗澡。

组合逻辑操作符

当把逻辑操作符组合到一起时,它们变得有趣起来。例如,今天不是周末,需要去上学,你已经洗了澡并且带了一个苹果或者一个橙子。我们可以用JavaScript来检测所有这些是否为真,如下所示:

在这个示例中,今天不是周末,你已经洗了澡,你没有带苹果但是带了一个橙子,所以你可以上学去了。

hasApple || hasOrange放在圆括号中,因为我们想要JavaScript确保这部分先执行。就像JavaScript会先计算*再计算+一样,在逻辑语句中,也会先计算&&再计算||。

可以用布尔值回答一些答案为yes或no的简单的关于数字的问题。例如,假设我们经营一个主题公园,其中一项游乐设施有身高限制:乘客的身高至少要60英寸,否则他们可能会掉下来!当有人想要玩这个设施并且说出其身高时,我们需要知道该身高是否大于最低身高限制。

大于

可以使用大于符号(>)来判断一个数字是否大于另一个数字。例如,判断乘客的身高(65英寸)是否大于身高限制(60英寸),可以把变量height设置为65,把变量heightRestriction设置为60,然后使用>符号比较两个数字:

使用height > heightRestriction,要求JavaScript告诉我们,第一个值是否大于第二个值。在这个示例中,乘客的身高足够高。

如果乘客的身高恰好是60英寸,那要怎么办?

哦,不!乘客不够高。但是,如果身高限制是60,那么60英寸高的人难道不应该允许进入吗?我们需要修改这个条件。好在JavaScript有另一个操作符表示“大于或等于”。

非常棒——60大于或等于60。

小于

和大于操作符(>)相反的是小于操作符(<)。如果把游乐设施设计为只供小朋友乘坐,那么小于符号就可以派上用场。例如,假设该乘客的身高是60英寸,但是游乐设施对乘客的限制是不得超过48英寸:

如果想要知道乘客的身高是否小于限制高度,就使用<符号。因为60不小于48,所以我们得到false(乘客的身高是60英寸,对于这个游乐设施来说,他太高了)。

你可能猜到了,也可以使用<=操作符,它表示“小于或等于”:

身高为48英寸的乘客仍然允许乘坐。

等于

要搞清楚两个数字是否相等,使用三个等号(===),它的含义是“等于”。但是要注意三个等号(===)与一个等号(=)的区别,因为===表示“这两个数字相等吗?”,而=表示“把右边的值保存到左边的变量中”。换句话讲,===是问一个问题,而=是把一个值赋给变量。

当使用=时,变量名必须放在左边,想要保存到变量中的值必须放在右边。而另一方面,===只是用来比较两个值是否相等,所以值放在哪一边都无所谓。

例如,假设你正在和朋友Chico、Harpo和Groucho玩游戏,看看谁能猜到你的神秘数字5。为了使游戏变得简单,可以告诉朋友们,这个数字在1到9之间,然后再开始猜数字。首先,设置mySecretNumber等于5。你的第一位朋友Chico猜的是3(chicoGuess)。看看接下来会发生什么:

变量mySecretNumber把神秘数字保存起来。变量chicoGuess、harpoGuess和grouchoGuess表示朋友们猜测的数字,使用===来判断每次所猜测的数字是否与神秘数字相等。第3位朋友Groucho猜对了,答案是5。

当使用===判断两个数字时,只有两个数字相等才会得到true。因为grouchoGuess是5,而mySecretNumber也是5,所以mySecretNumber === grouchoGuess返回true。其他的猜测都和mySecretNumber不相等,所以返回的都是false。

也可以使用===比较两个字符串或者两个布尔类型。如果使用===比较两种不同的类型,例如,比较字符串和数字,总会返回false。

两个等号

还有一点容易让人搞混淆,就是另一个JavaScript操作符==(两个等号)。使用它来判断两个值是否相等,即使一个值是字符串,另一个值是数字,也可以比较。所有值都有类型。所以数值5和字符串"5"是不同的,即使它们看上去是一样。如果使用===来比较数值5和字符串"5",JavaScript会告诉我们,它们是不相等的。但是,如果使用==来比较这两个值,JavaScript会告诉我们,它们是相等的。

关于这一点,你可能会认为:“看上去使用两个等号要比三个等号更容易一些。”然而,一定要小心,因为两个等号可能很容易令人混淆。例如,你认为0会等于false吗?字符串"false"会等于false吗?当使用两个等号时,0等于false,但是字符串"false"不等于false。

这是因为,当JavaScript试图用==比较两个数字时,首先会尝试把这两个值当作相同的类型。这种情况下,它把布尔值转换成一个数字。如果把布尔值转换成数字,false就变成了0,true变成了1。所以,当输入0 == false时,你会得到true。

因为这个怪异的原因,目前请坚持使用===。

试试看 

电影院经理要求你用JavaScript实现他们所要建立的一套新的自动化系统。他们想要能够判断是否允许某人观看PG-13级别的电影。

规则是,如果年龄大于或等于13岁,就允许进入影院。如果年龄小于13岁,但是有成年人陪伴,也允许进入影院。否则,就不允许观看该电影。

使用变量age和accompanied来完成这个示例,以判断是否允许这个12岁的少年观看这部电影。尝试换一些值(例如,把age设置为13,把accompanied设置为false),看看你的代码是否仍然能够得到正确答案。

最后,还有不属于任何特殊情况的两个值。它们是undefined和null。用它们来表示“没有”,但是,它们之间略有不同。

JavaScript使用undefined表示没有值。例如,当创建了一个新的变量,如果没有使用=操作符为它赋值,那么它的值就是undefined:

当想要刻意表达“这是空的”时,通常使用null。

目前,我们不会经常使用undefined或null。如果创建了一个新的变量,并且没有为它赋值,就会看到undefined,因为undefined就是变量没有值时JavaScript总会返回的内容。很少会把什么东西设置为undefined;如果你想要把一个变量设置为“没有”,应该使用null。

只有当你确实想要表示这里没有什么内容时,才会使用null ,这一用法偶尔也是很有帮助的。例如,假设你使用一个变量来记录喜欢的蔬菜。如果你讨厌所有的蔬菜,没有一样蔬菜是你喜欢的,那么你可能会把这个表示喜欢的蔬菜的变量设置为null。

把这个变量设置为null,会很明确地让读取代码的人知道你没有喜欢的蔬菜。然而,如果该变量是undefined,别人可能只是认为你还没有来得及为它设置一个值。

现在,我们已经知道JavaScript中所有的数据类型了——数字类型、字符串类型和布尔类型,还有特殊值null和undefined。数字类型用于处理与数学相关的事情,字符串类型用于处理文本,布尔类型用于表示答案为yes或no的问题。null和undefined是表示某些东西不存在的一种方法。

在接下来的两章中,我们会学习数组和对象,它们是连接基本类型以创建值较为复杂的集合的两种方法。


相关图书

深入浅出Spring Boot 3.x
深入浅出Spring Boot 3.x
JavaScript核心原理:规范、逻辑与设计
JavaScript核心原理:规范、逻辑与设计
JavaScript入门经典(第7版)
JavaScript入门经典(第7版)
JavaScript函数式编程指南
JavaScript函数式编程指南
PHP、MySQL和JavaScript入门经典(第6版)
PHP、MySQL和JavaScript入门经典(第6版)
JavaScript学习指南(第3版)
JavaScript学习指南(第3版)

相关文章

相关课程