详情
全书共分为2大部分，第一部分是JavaScript基础知识，主要学习JavaScript基础概念如变量、运算符、表达式等。第二部分是JavaScript进阶知识，主要学习DOM、事件操作以及各种开发技术。除了知识讲解，教程还融入了大量的开发技巧，并且更加注重编程思维的培养，使得学习者能有顺畅的学习思路，这一点是极其重要的。
书名：Web前端开发精品课 JavaScript基础教程
ISBN：978-7-115-46469-9
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 莫振杰
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
本书内容结合作者在前后端大量开发中的实战经验，系统化知识，浓缩精华，用通俗易懂的语言直击学习者的痛点。
全书分为两大部分：第一部分是JavaScript“基本语法”，主要介绍流程控制、函数、字符串、数组等基本语法；第二部分是JavaScript“核心技术”，主要介绍DOM操作、事件操作、window对象、document对象等核心技术。
此外，本书将每一个知识点融入实际开发案例，更加注重编程思维的培养，并且为学习者提供一个流畅的学习思路。
近年来，Web前端技术飞速发展且日趋重要。在Web前端技术中，JavaScript是最基础也是最难的一门技术。
JavaScript是一门比较难的语言，没有几年时间很难精通。如果说有一本书让你能够从入门到精通，那么可以肯定，这个作者没从事过真正的前端开发。对于初学的小伙伴来说，JavaScript最难的地方不在于其他，而是在于完全不知道怎么入门！曾经作为初学者的我，也跟大家一样，简单来说就是为了学习JavaScript，跑了很多弯路，有时候都不知道该学什么。例如学到一定程度了，都不知道自己的瓶颈在哪里，怎么提升自己的水平。有时候一个知识点不懂，就去上网找，去图书馆找，学到的知识都是东拼西凑，一点都不系统，这些知识还要自己整理。有鉴于此，我决定根据自己的体会和经验，我读者编写一本关于JavaScript技术及基础教程。
本书是我的心血积累，在编写的时候字斟句酌。从一开始学习HTML的时候，我就在记录自己当初作为初学者时所遇到的一些问题，所以我很了解作为初学者的你的心态，也很清楚应该怎样才能快速而无阻碍地学习。我是站在初学者的角度，而不是站在已经学会的角度来编写这本书的。有一句话说得好，如果你已经站在山顶上了，当初在爬山的时候你若缺少细心体会，这时你早就忘记作为攀岩者艰苦攀登过程中的心情了。
对于本书的每一句话，我都精心编写，并审阅了无数遍，尽量把精华呈现给大家。所以小伙伴们在阅读的时候，不要图快，而要尽量把每一个概念都理解。
有一种学习模式是值得推荐的：学技术，泛读10本书不如精读一本书10遍。这句话适用于学习任何课程。挑一本最精华的书，把这本书当做主体，然后辅以其他书籍来弥补这本书的缺陷。我相信，本书肯定会给初学者有益的帮助。
Web前端开发初学者
大中专院校相关专业学生
可以到人民邮电出版社异步社区（http://www.epubit.com.cn/）找到本书的源代码配套并下载。
作者在编写的过程中，得到了很多人的帮助。首先感谢陈志东和韦雪芳两个小伙伴花费大量时间对本书进行细致的审阅，给出诸多非常棒的建议，并且为本书绘制了大量精美的插图。
感谢充满创意和活力的五叶草（陈志东、邵婵、程紫梦、韦雪芳）一直以来陪伴和支持。我的人生因为有你们而更为精彩。
感谢赵轩老师（本书责任编辑）在这段时间中给予我细心的指导和不懈的支持，有您的帮助本书才得以顺利出版。
由于作者水平有限，书中难免有错漏之处，小伙伴们如果遇到问题或有意见和建议，可以与到绿叶学习网（www.lvyestudy.com）或者发邮件（lvyestudy@foxmail.com）与我联系。
编者
JavaScript就是我们通常所说的“JS”。这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。
我们都知道，前端最核心的三种技术是HTML、CSS和JavaScript，如图1-1所示。有些初学的小伙伴就会问了，这三者之间有什么区别呢？
图1-1
“HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。”
我晕，这不是等于没说吗？好吧，给大家打个比方。我们可以把“前端开发”看成“建房子”，做一个网页就像盖一栋房子。建房子的时候，都是先把结构建好（HTML）。建好之后，再给房子装修（CSS），例如往窗户装上窗帘、往地面铺上瓷砖等。最后装修好了呢，当夜幕降临的时候，我们要开灯（JavaScript）才能把屋子照亮。现在小伙伴们懂了吧？
我们再回到实际例子中去，看一下绿叶学习网（www.lvyestudy.com）的导航条。其中“前端入门”这一栏目具有以下基本特点。
字体类型是“微软雅黑”。
字体大小是“14px”。
背景颜色是“淡蓝色”。
鼠标移到上面，背景色变成蓝色。
我们可能会疑惑，这些效果是怎么做出来的呢？其实思路跟上面的“建房子”是一样的。我们先用HTML来搭建网页的结构。默认情况下，字体类型、字体大小、背景颜色，如图1-2所示。
然后，我们使用CSS来修饰一下，改变字体类型、字体大小、背景颜色，如图1-3所示。
最后，我们再使用JavaScript为鼠标定义一个行为。当鼠标移到上面时，背景颜色会变成蓝色，如图1-4所示。
图1-2
图1-3
图1-4
到这里，大家应该知道一个缤纷绚丽的网页是怎么做出来的了吧？了解这个过程，对于你准确理解HTML、CSS和JavaScript这3者之间的关系是相当重要的。
只使用了HTML和CSS的页面一般只供用户浏览，而JavaScript的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），实现更多的功能。拿我们绿叶学习网来说，二级导航、图片轮播、返回顶部等功能都用到了JavaScript，如图1-5所示。因为HTML和CSS只是描述性的语言，仅仅使用这两个工具是没办法做出那些特效的，而必须使用编程的方式来实现，也就是JavaScript。
图1-5
在学习JavaScript之前，你必须要有一定的HTML和CSS基础知识。本书是“Web前端开发精品课”系列中的一本，要学习HTML和CSS，你可以关注本书的姊妹篇：《Web前端开发精品课—HTML与CSS基础教程》和《Web前端开发精品课—HTML与CSS进阶教程》。
很多小伙伴抱怨JavaScript比较难，不像学HTML和CSS那么顺畅。实际上，对于没有任何编程基础的小伙伴，都是一样的。曾经我也做过“小白”，所以还是非常清楚小伙伴们的感受。为了更好地帮助大家打好基础，对于很多知识点，我都尽量通俗易懂地详细讲解。不过还是那句话：“没用的知识绝对不会啰嗦，但是重要的知识会一再提醒。”本书不会上来就一大堆废话，这里的每一句话都值得你去精读。步子迈得太大，总是容易扯着。所以，小伙伴们还是踏踏实实地学习吧。
疑问：
1．JavaScript与Java有什么关系吗？
很多人看到JavaScript和Java，自然而然就会问这两个究竟有什么关系。其实，它们也是有一些关系的，不能说完全没有关系。
JavaScript的设计最初的确是受Java的启发，而且设计的目的之一就是“看上去像Java”，因此语法上有不少类似之处。JavaScript中的很多名称和命名规则也效仿Java。但是实际上，JavaScript主要设计原则源自Self和Scheme。
JavaScript和Java虽然名字相似，但是本质上是不同的。
JavaScript往往都是在网页中使用，而Java却可以在软件、网页、手机APP等各个领域中使用。
从本质上讲，Java是一门面向对象的语言，而JavaScript更像是一门函数式编程语言。
2．我的页面加入了JavaScript特效，那这个页面是静态页面，还是动态页面呢？
不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于：是否与服务器进行数据交互。或者简单来说，是否用到了后端技术（如PHP、JSP、ASP.NET）。下面列出的四种情况都不一定是动态页面。
带有音频和视频
带有Flash动画
带有CSS动画
带有JavaScript动画
特别提醒大家一下，即使你的页面用了JavaScript，也不一定是动态页面，除非你还用到了后端技术。
3．对于学习JavaScript，有什么好的建议呢？
JavaScript是当下最流行也是最复杂的一门编程语言，对于JavaScript的学习，给初学者两个建议。
学完JavaScript基础知识（也就是本书内容），不要急于去学习JavaScript高级知识，而是应该去学jQuery。通过学习jQuery，我们会对JavaScript的入门知识有更深一层的理解。等学完了jQuery再去学习JavaScript的高级内容。
很多人学习JavaScript的时候，喜欢在第一遍学习中就对每一个细节都搞清楚，事实上这是效率最低的学习方法。在第一遍学习中，如果有些东西我们实在没办法理解，那就直接跳过，等到学到后面或者看第二遍的时候，自然而然就懂了。
常用的JavaScript开发工具很多，比较好用的有Hbuilder、Dreamweaver、Sublime Text、Vscode、Atom等。如果你已经有一定的开发经验，推荐使用Vscode，这一款编辑器非常棒。但是对于初学者来说，Hbuilder更简洁，也更加容易上手。这里，我们给大家介绍一下怎么在Hbuilder中编写JavaScript。
① 新建Web项目：在Hbuilder的左上方，依次点击“文件”→“新建”→“Web项目”，如图1-6所示。
图1-6
② 选择文件路径以及命名文件夹：在对话框中，给文件夹起一个名字，并且选择文件夹路径（也就是存放文件的位置），然后点击“完成”按钮，如图1-7所示。
③ 新建JavaScript文件：在Hbuilder左侧项目管理器中，选中test文件夹，然后点击鼠标右键，依次选择“新建”→“JavaScript文件”，如图1-8所示。
④ 选择JavaScript文件路径以及命名JavaScript文件：在对话框中选择JavaScript文件夹路径（也就是存放JavaScript文件的位置），并且给JavaScript文件起一个名字，然后点击“完成”按钮，如图1-9所示。
这样，我们就建好了一个JavaScript文件，至于怎么在HTML中使用JavaScript，我们在下一节再给小伙伴们详细介绍。
图1-7
图1-8
图1-9
在学习JavaScript语法之前，我们首先要知道在哪里写JavaScript才行。这一节不涉及太多编程方面的知识，而是先给大家介绍一下JavaScript的引入方式。这样大家至少都知道在哪里编程。在后面章节里，我们再给大家详细介绍编程方面的语法。
想要在HTML中引入JavaScript，一般有三种方式。
外部JavaScript
内部JavaScript
元素事件JavaScript
实际上，JavaScript的三种引入方式，跟CSS的三种引入方式（外部样式表、内部样式表、行内样式表）是非常相似的。对比理解一下，这样更能加深记忆。
外部JavaScript，指的是把HTML代码和JavaScript代码分别放在不同文件中，然后在HTML文档中使用script标签来引入JavaScript代码。
外部JavaScript是最理想的JavaScript引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都是使用外部JavaScript。
语法：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--1、在head中引入-->
<script src="index.js"></script>
</head>
<body>
<!--2、在body中引入-->
<script src="index.js"></script>
</body>
</html>说明：
在HTML中，我们可以使用script标签引入外部JavaScript文件。在script标签中，我们只需用到src这一个属性。src是source（源）的意思，指向的是文件路径。
对于CSS来说，外部CSS文件只能在head中引入。不过对于JavaScript来说，外部JavaScript文件不仅可以在head中引入，还可以在body中引入。
此外还需要注意一点，引入外部CSS文件使用的是link标签，而引入外部JavaScript文件使用的是script标签。对于这一点，小伙伴们别搞混了。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--引入外部CSS-->
<link href="index.css" rel="stylesheet" />
<!--引入外部JavaScript-->
<script src="js/index.js"></script>
</head>
<body>
</body>
</html>分析：
<script src="js/index.js"></script>表示引入文件名为index.js的JavaScript文件，其中文件的路径是js/index.js。
内部JavaScript，指的是把HTML代码和JavaScript代码放在同一个文件中。其中JavaScript代码写在<script></script>标签对内。
语法：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--1、在head中引入-->
<script>
……
</script>
</head>
<body>
<!--2、在body中引入-->
<script>
……
</script>
</body>
</html>说明：
同样的，内部JavaScript文件不仅可以在head中引入，也可以在body中引入。一般情况下，我们都是在head中引入。
实际上，<script></script>是一种简写形式，它其实等价于：
<script type="text/javascript">
……
</script>一般情况下，我们使用简写形式比较多。对于上面这种写法，我们也需要了解一下，因为不少地方采用上面这种旧写法。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
document.write("绿叶学习网，给你初恋般的感觉~");
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图1-10所示。
图1-10
分析：
document.write()表示在页面输出一个内容，大家先记住这个方法，后面我们会经常用到。
元素属性JavaScript，指的是在元素的事件属性中直接编写JavaScript或调用函数。
举例：在元素事件中编写JavaScript。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="按钮" onclick="alert('绿叶学习，给你初恋般的感觉')"/>
</body>
</html>当我们点击按钮后，预览效果如图1-11所示。
图1-11
举例：在元素事件中调用函数。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
function alertMes()
{
alert("绿叶学习网，给你初恋般的感觉");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="alertMes()"/>
</body>
</html>当我们点击按钮后，预览效果如图1-12所示。
图1-12
分析：
alert()表示弹出一个对话框，大家也先记住这个语句，后面我们也会经常用到。对于在元素属性中引入JavaScript，只需要简单了解就行，也不需要记住语法。
此外，这一节学习了两个十分有用的方法，这两个方法在后面章节会大量用到，这里我们先记一下。
document.write()：在页面输出一个内容。
alert()：弹出一个对话框。
在学习JavaScript语法之前，先来个例子让小伙伴们感受一下神奇的JavaScript是怎样一回事。
下面这个例子实现的功能是：当页面打开时，会弹出对话框，内容为“欢迎来到绿叶学习网”；当页面关闭时，也会弹出对话框，内容为“记得下次再来喔。”
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.onload = function () {
alert("欢迎来到绿叶学习网！");
}
window.onbeforeunload = function (event) {
var e = event || window.event;
e.returnValue = "记得下次再来喔！";
}
</script>
</head>
<body>
</body>
</html>打开页面的时候，浏览器预览效果如图1-13所示。关闭页面的时候，浏览器预览效果如图1-14所示。
图1-13
图1-14
分析：
上面的代码我们不懂没关系，这个例子只是让大家感性地认识一下JavaScript是怎样的，都可以做点什么，后面我们会慢慢学习。大家可以在本地编辑器中测试一下效果。当然，还是建议大家直接下载本书的源代码来测试。本书源代码可以在绿叶学习网（www.lvyestudy.com）以及异步社区（http://www.epubit.com.cn/）找到。
是不是感觉很有趣呢？那就快快到JavaScript的碗里来吧！
曾几何时，我们经常在《速度与激情8》《碟中谍5》等电影中，看到黑客飞快地敲着键盘，仅仅几秒钟就控制了整栋大楼的系统，或者化解了一次危机。在惊讶之余，小伙伴们有没有想过以后也能学会“编程”这一种神奇的技能呢？
从这一章开始，我们就步入“编程”的神圣殿堂，将学习怎么使用“编程”的方式来改变这个世界（程序员们都自称是这个星球上最富有使命的物种，他们的梦想就是改变世界）。
图2-1
图2-2
人类有非常多的语言，例如中文、英语、法语等。实际上，计算机也有很多语言，例如C、C++、Java等。简单来说，JavaScript就是众多计算机语言（也叫编程语言）中的一种。跟人类语言类似，计算机语言也有一些共性，例如我们可以将用C语言写的代码转化为JavaScript代码，这就像将英语翻译成中文一样，虽然语言不一样了，但是表达出来的意思是一样的。
当我们把JavaScript学完，再去学另外一门语言（如C、Java等），就会变得非常容易。因为两门计算机语言之间，是有非常多共性的。因此，认真把JavaScript学了，以后再想去学其他编程语言就会变得非常轻松，何乐而不为呢？
我们都知道，学习任何一门人类语言，都得学这门语言的词汇、语法、结构等。同样的，想要学习一门编程语言，也需要学习类似的东西。只不过呢，这些在编程语言中不是叫词汇、语法、结构，而是叫变量、表达式、运算符等。
在这一章中，我们主要学习JavaScript以下七个方面的语法。
常量与变量
数据类型
运算符
表达式与语句
类型转换
转义字符
注释
学习JavaScript，说白了，就是学一门“计算机”能够懂得的语言。在学习过程中，我们尽量将每一个知识点都跟人类语言对比，这样就会变得非常简单。当然，计算机语言与人类语言相比有很多不一样的特点，因此我们需要认真遵循它的规则（也就是语法）。
此外，如果小伙伴们有其他编程语言的基础，也建议认真学一遍本书，因为这本书独树一帜的介绍，也会让你对编程语言有更深一层的理解。
先问小伙伴们一个问题：学习一门语言，最先要了解的是什么？当然是词汇啊！就像学英语一样，再简单的一句话，我们也得先弄清楚每一个单词是什么意思，然后才知道一句话说的是什么，对吧？
同样，学习JavaScript也是如此。先来看一句代码：
var a = 10;英语都是一句话一句话地表述的，上面这行代码就相当于JavaScript中的“一句话”，我们称之为“语句”。在JavaScript中，每一条语句都是以英文分号（;）作为结束符。每一条语句都有它特定的功能，这个跟英语每一句话都有它表达的意思是一样的道理。
在JavaScript中，变量与常量就像是英语中的词汇。上面代码中的a就是JavaScript中的变量。
在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。
1．变量的命名
想要使用变量，我们就得先给它起一个名字（命名），就像每个人都有自己的名字一样。当别人喊你的名字时，你就知道别人喊的是你，而不是路人甲。
当JavaScript程序需要使用一个变量时，我们只需要使用这个变量的名字就行了，总不能说：“喂，我要用这个变量”。变量那么多，要是这样的话，怎么才知道你要用哪个变量呢！
变量的名字一般是不会变的，但是它的值却可以变。这就像人一样，名字一般都是固定下来的，但是每个人都会改变，都会从小孩成长为青年，然后从青年慢慢变成老人。
在JavaScript中，给一个变量命名，我们需要遵循以下两个方面。
变量由字母、下划线、$或数字组成，并且第一个字母必须是“字母、下划线或$”。
变量不能是系统关键字和保留字。
上面两句话很简单，但却非常重要，一定要字斟句酌地理解。从第一点可以知道，变量只可以包含字母（大写小写都行）、下划线、$或数字，不能包含除了这四种之外的字符（如空格、%、-、*、/等）。因为其他很多字符都已经被系统当做运算符。
对于第二点，系统关键字，指的是JavaScript本身已经在使用的名字。因此我们在给变量命名的时候，是不能使用这些名字的（因为系统要用）。保留字，指的是JavaScript本身还没使用的名字，虽然没有使用，但是它们有可能在将来会被使用，所以先保留自己用，不给你用。JavaScript关键字和保留字如表2-1、2-2、2-3所示。
表2-1 JavaScript关键字
| break |
else |
new |
typeof |
|---|---|---|---|
| case |
false |
null |
var |
| catch |
for |
switch |
void |
| continue |
function |
this |
while |
| default |
if |
throw |
with |
| delete |
in |
true |
|
| do |
instanceof |
try |
表2-2 ECMA-262标准的保留字
| abstract |
enum |
int |
short |
|---|---|---|---|
| boolean |
export |
interface |
static |
| byte |
extends |
long |
super |
| char |
final |
native |
synchronized |
| class |
float |
package |
throws |
| const |
goto |
private |
transient |
| debugger |
implements |
protected |
volatile |
| double |
import |
public |
表2-3 浏览器定义的保留字
| alert |
eval |
location |
open |
|---|---|---|---|
| array |
focus |
math |
outerHeight |
| blur |
funtion |
name |
parent |
| boolean |
history |
navigator |
parseFloat |
| date |
image |
number |
regExp |
| document |
isNaN |
object |
status |
| escape |
length |
onLoad |
string |
这里列举了JavaScript常见关键字和保留字，只是方便小伙伴们查询，并不是叫大家记忆。所以大家不必一个个去记忆。实际上，对于这些关键字，等学到了后面，自然而然就会认得。就算不认得，等需要的时候再回这里查一下就行了。
举例：正确的命名。
i
lvye_study
_lvye
$str
n123举例：错误的命名。
123n //不能以数字开头
-study //不能以中划线开头
my-title //不能包含中划线
continue //不能跟系统关键字相同此外，变量的命名一定要区分大小写，例如变量age与变量Age在JavaScript中就是两个不同的变量。
2．变量的使用
在JavaScript中，如果想要使用一个变量，我们一般需要进行两步。
变量的声明
变量的赋值
对于变量的声明，小伙伴们记住一句话：所有JavaScript变量都是由var声明。在这一点上，JavaScript跟C、Java这些是不同的。
语法：
var 变量名 = 值；说明：
图2-3
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
document.write(a);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-4所示。
图2-4
分析：
在这个例子中，我们使用var来定义一个变量，变量名为a，变量的值为10。然后使用document.write()方法输出这个变量的值。
对于变量的命名，我们尽量取一些有意义的英文名或英文缩写。当然，为了讲解方便，本书中有些变量的命名可能比较简单。在实际开发中，我们尽量不要太随便。
此外，一个var也可以同时声明多个变量名，其中变量名之间必须用英文逗号（,）隔开，例如：
var a=10,b=20,c=30;实际上，上面代码等价于：
var a=10;
var b=20;
var c=30;举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
a = 12;
document.write(a);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-5所示。
图2-5
分析：
咦？a的值不是10吗？怎么输出12呢？大家别忘了，a是一个变量。变量，简单来说就是一个值会变的量。因此“a=12”会覆盖“a=10”。我们再来看一个例子就会有更深的理解了。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
a = a + 1;
document.write(a);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-6所示。
图2-6
分析：
a = a +1;表示a的最终值是在原来a的基础上加1，因此a最终值为11（10+1）。下面代码中，a的最终值是5，小伙伴们可以思考一下为什么。
var a = 10;
a = a + 1;
a = a - 6;在JavaScript中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。
常量，形象地说，就像千百年来约定俗成的名称，这个名称是定下来的，不能随便改变。在JavaScript中，我们可以把常量看成是一种特殊的变量，之所以特殊，是因为它的值是不会变的。一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：
var DEBUG = 1;我们都知道，程序是会变化的，因此变量比常量有用得多。常量在JavaScript中用得比较少。我们简单了解常量是这么一回事就行了，不需要做过多的深入了解。
所谓的数据类型，说白了，就是图2-7中“值”的类型。在JavaScript中，数据类型可以分为两种，一种是“基本数据类型”，另外一种是“引用数据类型”。其中，基本数据类型只有一个值，而引用数据类型可以含有多个值。
在JavaScript中，基本数据类型有五种：数字、字符串、布尔值、未定义值和空值。而常见的引用数据类型有两种：数组、对象。这一节，我们先来介绍基本数据类型。后面章节会逐渐介绍“数组”和“对象”这两种引用数据类型。
图2-7
在JavaScript中，数字是最基本的数据类型。所谓的数字，就是数学中的数字，如10、-10、3.14等。
小伙伴们要特别注意啦，JavaScript中的数字是不区分“整型（int）”和“浮点型（float）”的。记住这一句话就可以了：在JavaScript中，所有变量都是用var声明。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var n = 1001;
document.write(n);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-8所示。
图2-8
字符串，从名字上来就很好理解，就是一串字符嘛。在JavaScript中，字符串都是用英文单引号或英文双引号（注意都是英文）括起来的。
1．单引号括起来的一个或多个字符
'我'
'绿叶学习网'2．双引号括起来的一个或多个字符
"我"
"绿叶学习网"3．单引号括起来的字符串中可以包含双引号
'我来自"绿叶学习网" '4．双引号括起来的字符串中可以包含单引号
"我来自'绿叶学习网' "<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var str = "绿叶，初恋般的感觉~";
document.write(str);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-9所示。
图2-9
分析：
如果我们把字符串两边的引号去掉，会发现页面不输出内容了，小伙伴们可以自己试一试。因此在实际开发中，对于一个字符串来说，一定要加上引号，单引号或双引号都可以。
var str = "绿叶，初恋般的感觉~";
document.write(str);对于上面这两句代码，也可以直接用下面一句代码来实现，因为document.write()这个方法本身就是用来输出一个字符串的。
document.write("绿叶，初恋般的感觉~");举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var str = '绿叶，"初恋"般的感觉';
document.write(str);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-10所示。
图2-10
分析：
单引号括起来的字符串中，不能含有单引号，只能含有双引号。同理，双引号括起来的字符串中，不能含有双引号，只能含有单引号。
为什么要这么规定呢？我们看看下面这个字符串，含有四个双引号，此时JavaScript是判断不出来哪两个双引号是一对的。
"绿叶，"初恋"般的感觉"举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var n = "1001";
document.write(n);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-11所示。
图2-11
分析：
如果数字加上双引号，这个时候JavaScript会把这个数字当做字符串来处理，而不是当做数字来处理。我们都知道，数字是可以进行加减乘除的，但是加上双引号的数字一般是不可以进行加减乘除的，因为这个时候它不再是数字，而是被当作字符串了。对于两者的区别，我们在下一节会详细介绍。
1001 //这是一个数字
"1001" //这是一个字符串在JavaScript中，数字和字符串这两个类型的值可以有无数多个，但是布尔类型的值只有两个：true和false。true表示“真”，false表示“假”。
有些小伙伴可能觉得很奇怪，为什么这种数据类型叫“布尔值”呢？这名字咋来的呢？实际上，布尔是bool的音译，是以英国数学家、布尔代数的奠基人乔治·布尔（George Boole）来命名的。
布尔值最大的用途就是：选择结构的条件判断。对于选择结构，我们在下一章会详细给大家介绍，这里只需要简单了解一下就行。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
var b = 20;
if (a < b)
{
document.write("a小于b");
}
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-12所示：
图2-12
分析：
在这个例子中，我们首先定义了两个数字类型的变量：a、b。然后在if语句中对a和b进行大小判断，如果a小于b，则使用document.write()方法输出一个字符串："a小于b"。其中，if语句是用来进行条件判断的，我们在下一章会详细介绍，这里不需要深入。
在JavaScript中，未定义值，指的是如果一个变量虽然已经用var来声明了，但是并没有对这个变量进行赋值，此时该变量的值就是“未定义值”。其中，未定义值用undefined表示。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var n;
document.write(n);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-13所示：
图2-13
分析：
凡是已经用var来声明但没有赋值的变量，值都是undefined。undefined在JavaScript还是挺重要的，在后面我们会慢慢接触。
数字、字符串等数据在定义的时候，系统都会分配一定的内存空间。在JavaScript中，空值用null表示。如果一个变量的值等于null，如var n = null;，则表示系统没有给这个变量n分配内存空间。
对于内存分配这个概念，非计算机专业的小伙伴可能理解起来比较困难，不过没关系，简单了解一下即可。
null跟undefined非常相似，但是也有一定的区别，这里我们不需要深入。对于这些高级部分的知识，可以关注绿叶学习网的JavaScript进阶教程。
总结：经过这一节的学习，我们也清楚地知道“数据类型”是怎样一个东西了。数据类型，就是值的类型。就像我们数学，也得分整数、小数、分数这样的类型。
在JavaScript中，要完成各种各样的运算，是离不开运算符的。运算符用于将一个或几个值进行运算从而得出所需要的结果值。就像我们数学上，也需要加减乘除这些运算符才可以运算。不过对于JavaScript来说，我们需要遵循计算机语言运算的一套方法。
图2-14
在JavaScript中，运算符指的是“变量”或“值”进行运算操作的符号。在JavaScript中，常见的运算符有五种。
算术运算符
赋值运算符
比较运算符
逻辑运算符
条件运算符
在JavaScript中，算术运算符一般用于实现“数学”运算，包括加、减、乘、除等，如表2-4所示。
表2-4 算术运算符
| 运算符 |
说明 |
举例 |
|---|---|---|
| + |
加 |
10+5 //返回15 |
| － |
减 |
10-5 //返回5 |
| * |
乘 |
10*5 //返回50 |
| / |
除 |
10/5 //返回2 |
| % |
求余 |
10%4 //返回2 |
| ++ |
自增 |
var i=10;i++ //返回11 |
| -- |
自减 |
var i=10;i-- //返回9 |
在JavaScript中，乘号是“*”而不是“×”，除号是“/”而不是“÷”，所以小伙伴们不要搞混了。为什么要这样定义呢？这是因为JavaScript这门语言的开发者，是希望尽量使用键盘已有的符号来表示这些运算符。
对于算术运算符，我们需要重点掌握这三种：加法运算符、自增运算符、自减运算符。
1．加法运算符
在JavaScript中，加法运算符并非想象中那么简单，我们需要注意三点。
数字+数字=数字
字符串+字符串=字符串
字符串+数字=字符串
也就是说，当一个数字加上另外一个数字时，运算规则跟数学上的相加一样，例如：
var num = 10 + 4; //num的值为14当一个字符串加上另外一个字符串时，运算规则是将两个字符串连接起来，例如：
var str = "绿叶学习网" + "JavaScript"; //str的值为"绿叶学习网JavaScript"当一个字符串加上一个数字时，JavaScript会将数字变成字符串，然后再连接起来，例如：
var str = "今年是"+2017 //str的值为"今年是2017"（这是一个字符串）举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10 + 4;
var b = "绿叶学习网" + "JavaScript";
var c = "今年是" + 2017;
document.write(a + "<br/>" + b + "<br/>" + c);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-15所示。
图2-15
分析：
在这个例子中，可能有些小伙伴不太懂document.write(a + "<br/>" + b + "<br/>" + c);这一句代码是什么意思。实际上，这一句代码等价于：
document.write("14<br/>绿叶学习网JavaScript<br/>今年是2017");小伙伴们好好根据上面加法运算符的三个规则，就会觉得很简单了。以后呢，如果你想往字符串里面塞点东西，就应该用加号连接，然后用英文引号断开来处理，这是经常使用的一个技巧。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var str = "2017" + 1000;
document.write(str);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-16所示。
图2-16
分析：
"2017"是一个字符串，而不是数字，大家不要被表象蒙蔽了！
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
var b = 4;
var n1 = a + b;
var n2 = a - b;
var n3 = a * b;
var n4 = a / b;
var n5 = a % b;
document.write("a+b=" + n1 + "<br/>");
document.write("a-b=" + n2 + "<br/>");
document.write("a*b=" + n3 + "<br/>");
document.write("a/b=" + n4 + "<br/>");
document.write("a%b=" + n5 );
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-17所示。
图2-17
分析：
注意，"a+b="、"a-b="、"a*b="等这些由于加上了英文双引号，所以都是字符串来的。
2．自增运算符
“++”是自增运算符，表示在“原来的值”的基础上再加上1。i++等价于i=i+1;自增运算符有以下两种情况。
i++指的是在使用i之后，再让i的值加上1。例如：
i=1;
j=i++;上面这段代码等价于：
i=1;
j=i;
i=i+1;因此，上面执行的结果是：i=2，j=1。
++i指的是在使用i之前，先让i的值加上1。例如：
i=1;
j=++i;上面这段代码等价于：
i=1;
i=i+1; //i=1+1，也就是i=2了
j=i; //由于此时i的值变为2了，所以j为2因此，上面执行的结果是：i=2，j=2。
对于“j=++i”和“j=i++”，小伙伴们一定要分清楚。可以简单这样记忆：++在i的左边（前面），就是先使用“i=i+1”而后使用“j=i”。++在i的右边（后面），就是后使用“i=i+1”而先使用“j=i”。“i=i+1”的使用位置是根据++的位置来决定的。
3．自减运算符
“--”是自减运算符，表示在“原来的值”的基础上再减去1。i--等价于i=i-1;自减运算符同样也有以下两种情况。
i--指的是在使用i之后，再让i的值减去1。例如：
i=1;
j=i--;上面这段代码等价于：
i=1;
j=i;
i=i-1;因此，上面执行的结果是：i=0，j=1。
--i指的是在使用i之前，先让i的值减去1。例如：
i=1;
j=--i;上面这段代码等价于：
i=1;
i=i-1; //i=1-1，也就是i=0了
j=i; //由于此时i的值变为0了，所以j为0因此，上面执行的结果是：i=0，j=0。
“--”与“++”使用方法是一样的，大家可以对比理解一下。
在JavaScript中，赋值运算符用于将右边表达式的值保存到左边的变量中去。如表2-5所示。
表2-5 赋值运算符
| 运算符 |
举例 |
|---|---|
| = |
var str="绿叶学习网" |
| += |
var a+=b等价于var a=a+b |
| -= |
var a-=b等价于var a=a-b |
| *= |
var a=b等价于var a=ab |
| /= |
var a/=b等价于var a=a/b |
上表中，我们只是列举了常用的赋值运算符，对于不常用的就不列出来了，以免增加小伙伴们的记忆负担。
“var a+=b”其实就是“var a=a+b”的简化形式，+=、-=、*=、/=这几个运算符其实就是为了简化代码而出现的，大多数有经验的开发人员都喜欢用这种简写形式。对于初学者来说，我们还是要熟悉一下这种写法，以免看不懂别人的代码。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
var b = 5;
a += b;
b += a;
document.write("a的值是" + a + "<br/>b的值是" + b);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-18所示。
图2-18
分析：
首先我们初始化了变量a的值为10，变量b的值为5。当执行“a+=b;”后，此时a的值为15（10+5），b的值没有变化，依旧是5。
由于程序是从上而下地执行的，当执行b+=a;时，由于之前a的值已经变为15了，因此执行后，a的值为15，b的值为20（15+5）。
这里小伙伴们要知道一点：a和b都是变量，它们的值是会随着程序的执行而变化的。
在JavaScript中，比较运算符用于将运算符两边的值或表达式进行比较，如果比较结果是对的，则返回true；如果比较结果是错的，则返回false。true和false是布尔值，前面我们已经介绍了。比较运算符如表2-6所示。
表2-6 比较运算符
| 运算符 |
说明 |
举例 |
|---|---|---|
| > |
大于 |
2>1 //返回true |
| < |
小于 |
2<1 //返回false |
| >= |
大于或等于 |
2<=2 //返回true |
| <= |
小于或等于 |
2>=2 //返回true |
| == |
等于 |
1==2 //返回false |
| != |
不等于 |
1!=2 //返回true |
“=”是赋值运算符，用于将右边的值赋值给左边的变量。“==”是比较运算符，用于比较左右两边的值是否相等。如果想要比较两个值是否相等，写成a=b是
错误的，正确写法应该是a==b。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
var b = 5;
var n1 = (a > b);
var n2 = (a == b);
var n3 = (a != b);
document.write("10>5：" + n1 + "<br/>");
document.write("10==5：" + n2 + "<br/>");
document.write("10!=5：" + n3);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-19所示。
图2-19
分析：
对于一条语句，都是先运算右边，然后再将右边结果赋值给左边变量。
在JavaScript中，逻辑运算符用于执行“布尔值的运算”。其中，逻辑运算符经常和比较运算符结合在一起使用，如表2-7所示。
表2-7 逻辑运算符
| 运算符 |
说明 |
|---|---|
| && |
“与”运算 |
| || |
“或”运算 |
| ! |
“非”运算 |
1．“与”运算
在JavaScript中，与运算用“&&”表示。如果“&&”两边的值都为true，则结果返回true；如果有1个为false或者2个都为false，则结果返回false。
真&&真→真
真&&假→假
假&&真→假
假&&假→假
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
var b = 5;
var c = 5;
var n = (a < b) && (b == c);
document.write(n);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-20所示。
图2-20
分析：
var n = (a < b) && (b == c);等价于var n = (10 < 5) && (5 == 5);，由于(10 < 5)返回结果为false而(5==5)返回结果为true，所以var n = (a < b) && (b == c);最终等价于var n = false&&true。根据与运算的规则，n最终的值为false。
2．“或”运算
在JavaScript中，或运算用“||”表示。如果“||”两边的值都为false，则结果返回false；如果有1个为true或者2个都为true，则结果返回true。
真||真→真
真||假→真
假||真→真
假||假→假
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
var b = 5;
var c = 5;
var n = (a < b) || (b == c);
document.write(n);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-21所示。
图2-21
分析：
var n = (a < b) ||(b == c);等价于var n = (10 < 5) || (5 == 5);，由于(10 < 5)返回结果为false而(5==5)返回结果为true，所以var n = (a < b) || (b == c);最终等价于var n = false||true;。根据与运算的规则，n最终的值为true。
3．“非”运算
在JavaScript中，非运算用英文叹号“!”表示。非运算跟与运算、或运算不太一样，非运算操作的对象只有一个。当“!”右边的值为true时，最终结果为false；当“!”右边的值为false时，最终结果为true。
!真→假
!假→真
这个其实很简单，直接取反就行。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 10;
var b = 5;
var c = 5;
var n = !(a < b) && !(b == c);
document.write(n);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-22所示。
图2-22
分析：
var n = !(a < b) && !(b == c);等价于var n =!(10 < 5) && !(5 == 5);，也就是var n = !false&&!true。由于!false的值为true，!true的值为false。因此最终等价于var n = true&&false，也就是false。
当我们把var n = !(a < b) && !(b == c);这句代码中的“&&”换成“||”后，返回结果为true，小伙伴们可以自行测试一下。此外，我们也不要被这些看起来复杂的运算吓到了。实际上，再复杂的运算，一步步来，也是非常简单的。
对于与、或、非这三种逻辑运算，我们总结一下。
true的!为false，false的!为true。
a&&b：a、b全为true时，结果为true，否则结果为false。
a||b：a、b全为false时，结果为false，否则结果为true。
a&&b：系统会先判断a，再判断b。如果a为false，则系统不会再去判断b。
a||b：系统会先判断a，再判断b。不管a是true，还是false，系统还会继续去判断b。
第四、五条是非常有用的技巧，在后续学习中我们会经常碰到，这里简单认识一下即可。
除了上面这些常用的运算符，JavaScript还为我们提供了一种特殊的运算符：条件运算符。条件运算符，也叫三目运算符。在JavaScript中，条件运算符用英文问号“?”表示。
语法：
var a = 条件 ? 表达式1 : 表达式2;说明：
当条件为true时，我们选择的是“表达式1”，也就是“var a = 表达式1”；当条件为false时，我们选择的是“表达式2”，也就是“var a = 表达式2”。注意，a只是一个变量名，这个变量名可以自定义。
条件运算符其实是很简单的，也就是“二选一”。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var result = (2 > 1) ? "小芳" : "小美";
document.write(result);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-23所示。
图2-23
分析：
由于条件（2>1）返回true，所以最终选择的是“小芳”。
一个表达式包含“操作数”和“操作符”。操作数可以是变量，也可以是常量。操作符指的就是我们之前学的运算符。每一个表达式都会产生一个值。
语句，简单来说就是用（;）（英文分号）分开的一句代码。一般情况下，一个分号对应一个语句。在图2-24中，1+2是一个表达式，而var a=1+2;就是一个语句。
图2-24
对于初学者来说，不用纠结什么是表达式，什么是语句。对于表达式和语句，我们可以简单认为“语句就是JavaScript的一句话”，而“表达式就是一句话的一部分”。一个表达式加上一个分号就可以组成一个语句。
类型转换，指的是将“一种数据类型”转换为“另外一种数据类型”。数据类型，我们在2.3节给大家介绍过了。而在2.4节，我们讲到如果一个数字与一个字符串相加，则JavaScript会自动将数字转换成字符串，然后再与另外一个字符串相加，例如"2017"+1000的结果是"20171000"，而不是3017。其中，“JavaScript会自动将数字转换成字符串”就是类型转换。
在JavaScript中，共有两种类型转换。
隐式类型转换
显式类型转换
隐式类型转换，指的是JavaScript自动进行的类型转换。显式类型转换，指的是需要用代码强制进行的类型转换。这两种方式，我们从名字上就能区分开来。
对于隐式类型转换，我们就不作介绍了，我们只需要把2.4节中的加号运算符所涉及的认真学一遍，就可以走很远了。这一节我们重点介绍一下显式类型转换的两种情况。
在JavaScript中，想要将字符串转换为数字，可以有两种方式。
Number()
parseInt()和parseFloat()
Number()方法可以将任何“数字型字符串”转换为数字。那什么叫数字型字符串呢？像"123"、"3.1415"等这些只有数字的字符串就是“数字型字符串”，而"hao123"、"100px"等就不是。
准确来说，parseInt()和parseFloat是提取“首字符为数字的任意字符串”中的数字，其中，parseInt()提取的是整数部分，parseFloat()不仅会提取整数部分，还会提取小数部分。
举例：Number()
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = Number("2017") + 1000;
document.write(a);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-25所示。
图2-25
分析：
从之前的学习可以知道，"2017"+1000结果是"20171000"。我们在这里使用了Number()方法将"2017"转换为一个数字，因此Number("2017")+1000的结果是3017。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
document.write("Number(\"123\")：" + Number("123") + "<br/>");
document.write("Number(\"3.1415\")：" + Number("3.1415") + "<br/>");
document.write("Number(\"hao123\")：" + Number("hao123") + "<br/>");
document.write("Number(\"100px\")：" + Number("100px"));
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-26所示。
图2-26
分析：
NaN表示这是一个“Not a Number（非数字）”，从中可以看出，Number()方法只能将纯“数字型字符串”转换为数字，不能将其他字符串（即使字符串内含有数字字符）转换为数字。在实际开发中，很多时候，我们需要提取类似"100px"中的数字，应该怎么做呢？这个时候就应该使用parseInt()和parseFloat()，而不是Number()了。
举例：parseInt()
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
document.write("parseInt(\"123\")：" + parseInt("123") + "<br/>");
document.write("parseInt(\"3.1415\")：" + parseInt("3.1415") + "<br/>");
document.write("parseInt(\"hao123\")：" + parseInt("hao123") + "<br/>");
document.write("parseInt(\"100px\")：" + parseInt("100px"));
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-27所示。
图2-27
分析：
从这个例子可以看出来，parseInt()会从左到右进行判断，如果第一个字符是数字，则继续判断，直到出现非数字为止（小数点也是非数字）；如果第一个字符是非数字，则直接返回NaN。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
document.write("parseInt(\"+123\")：" + parseInt("+123") + "<br/>");
document.write("parseInt(\"-123\")：" + parseInt("-123"));
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-28所示。
图2-28
分析：
前面我们说过，对于parseInt()来说，如果第一个字符不是数字，则返回NaN。但是这里第一个字符是“+”或“-”（非数字），parseInt()同样也是可以转换的。因为加号和减号在数学上其实就是表示一个数的正和负，所以parseInt()可以接受第一个字符是“+”或“-”。同样的，parseFloat()也有这个特点。
举例：parseFloat()
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
document.write("parseFloat(\"123\")：" + parseFloat("123") + "<br/>");
document.write("parseFloat(\"3.1415\")：" + parseFloat("3.1415") + "<br/>");
document.write("parseFloat(\"hao123\")：" + parseFloat("hao123") + "<br/>");
document.write("parseFloat(\"100px\")：" + parseFloat("100px"));
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-29所示。
图2-29
分析：
parseFloat()跟parseInt()非常类似，都是从第一个字符从左到右开始判断。如果第一个字符是数字，则继续判断，直到出现除了数字和小数点之外的字符为止；如果第一个字符是非数字，则直接返回NaN。
在“首字母是+、-或数字的字符串”中，不管是整数部分，还是小数部分，parse Float()同样可以转换。这一点上跟parseInt()是不一样的。
在JavaScript中，想要将数字转换为字符串，也有两种方式。
与空字符串相加
toString()
下面分别对这两种方式进行举例。
举例：与空字符串相加
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 2017 + "";
var b = a.toString() + 1000;
document.write(b);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-30所示。
图2-30
分析：
从之前的学习我们知道，数字加上字符串，系统会将数字转换成字符串。如果想要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。
举例：toString()
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var a = 2017;
var b = a.toString()+1000;
document.write(b);
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-31所示。
图2-31
分析：
a.toString()表示将a转换为字符串，也就是2017转换为"2017"，因此最终b的值为"20171000"。
在实际开发中，如果想要将数字转换为字符串，我们很少使用toString()方法，而更多地使用隐式类型转换的方式（也就是直接跟一个字符串相加）就行了。
在学习转义字符之前，我们先来看一个例子。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
document.write("绿叶，初恋般的感觉");
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-32所示。如果想要实现下面图2-33这种效果，这个时候我们该怎么做呢？
图2-32
图2-33
不少小伙伴首先想到的，可能就是使用下面这句代码来实现：
document.write("绿叶，"初恋"般的感觉");试过的小伙伴肯定会疑惑：怎么在页面中没有输出内容呢？其实大家仔细观察一下就知道，双引号都是成对出现的，这句代码有四个双引号，JavaScript是无法判断前后哪两个双引号是一对的。为了避免这种情况发生，JavaScript引入了转义字符。
所谓的转义字符，指的是在默认情况下某些字符在浏览器是无法显示的，不过为了能够让这些字符能够显示出来，我们可以使用这些字符对应的转义字符来代替。在JavaScript中，常见的转义字符如表2-8所示。
表2-8 常见的转义字符
| 转义字符 |
说明 |
|---|---|
| \' |
英文单引号 |
| \" |
英文双引号 |
| \n |
换行符 |
实际上，JavaScript中的转义字符很多，但是我们只需要记住上面三种就可以了。此外还需要特别说明一下，对于字符串的换行，有两种情况。
如果是在document.write()中换行，则应该用<br/>
如果是在alert()中换行，则应该用\n
下面分别对这两种情况进行举例。
举例：在document.write()中换行
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
document.write("绿叶，<br/>初恋般的感觉");
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-34所示。
图2-34
举例：在alert()中换行
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
alert("绿叶，\n初恋般的感觉");
</script>
</head>
<body>
</body>
</html>浏览器预览效果如图2-35所示。
图2-35
分析：
“\n”是转义字符，一般用于对话框文本的换行。这里如果用“<br/>”就无法实现了。
在JavaScript中，为一些关键代码注释是非常有必要的。注释的好处很多，比如方便理解、查找或方便项目组里的其他开发人员了解你的代码，而且也方便以后你对自己的代码进行修改。
当注释的内容比较少，只有一行时，我们可以使用单行注释的方式。
语法：
//单行注释说明：
小伙伴们要特别注意一下，HTML、CSS和JavaScript这三个的注释是不一样的。此外，并不是什么地方我们都要注释，一般只会对一些关键功能的代码进行注释。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
/*这是CSS注释*/
body{color:Red;}
</style>
<script>
//这是JavaScript注释（单行）
document.write("绿叶，初恋般的感觉");
</script>
</head>
<body>
<!--这是HTML注释-->
<div></div>
</body>
</html>浏览器预览效果如图2-36所示。
图2-36
分析：
我们从上面可以知道，被注释的内容是不会在浏览器中显示出来的。
当注释的内容比较多，用一行表达不出来时，我们可以使用多行注释的方式。
语法：
/*多行注释*/说明：
有小伙伴可能会说，HTML、CSS、JavaScript这三个的注释不一样，而JavaScript还分单行注释和多行注释，很难记住！其实我们不需要去死记，稍微留个印象就可以了，因为开发工具都会有代码高亮的提示功能。平常要是忘了的话，在编辑器中测试一下就知道了。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
/*
这是JavaScript注释（多行）
这是JavaScript注释（多行）
这是JavaScript注释（多行）
*/
document.write("绿叶，初恋般的感觉");
</script>
</head>
<body>
<div></div>
</body>
</html>浏览器预览效果如图2-37所示。
图2-37
分析：
当然，如果注释的内容只有一行，我们也可以用多行注释的这种方式。
