作者：莫振杰
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
从0到1：JavaScript 快速上手试读：
前言
一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。
本书和“从0到1”系列中的其他图书，大多都是源于我在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高，因而累计获得超过100000读者的支持。更可喜的是，我收到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。
我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己多年的学习和前端开发经验，完全站在初学者的角度而不是已经学会的角度来编写本书。我相信，本书会非常适合零基础的读者轻松地、循序渐进地展开学习。
之前，我问过很多小伙伴，看“从0到1”这个系列图书时是什么感觉。有人回答说：“初恋般的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。
配套习题
每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案放于本书的配套资源中，具体下载方式见下文。
配套视频课程
为了更好地帮助零基础的小伙伴快速上手，全书每一节都录制了配套的高质量视频，小伙伴们可扫描书中相应位置二维码观看。
配套网站
绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术“大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加QQ群讨论交流：519225291、593173594（只能加一个QQ群）。
配套资源下载及使用说明
本书的配套资源包括习题答案、源码文件、配套PPT教学课件。扫描下方二维码，关注微信公众号“职场研究社”，并回复资源下载验证码（见本书末尾），即可获得资源下载方式。职场研究社
特别鸣谢
本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们的帮助本书才得以顺利出版。
感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量时间对本书进行细致的审阅，并给出了诸多非常棒的建议。
最后要感谢我的挚友郭玉萍，她为“从0 到1”系列图书提供了很多帮助。在人生的很多事情上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。
由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以发送电子邮件至lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www.lvyestudy.com），了解更多前端开发的相关知识。作者第一部分 语法基础第1章 JavaScript简介1.1 JavaScript是什么1.1.1 JavaScript简介
JavaScript，就是我们通常所说的JS。这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。
我们知道，前端最核心的3个技术是HTML、CSS和JavaScript，如图1-1所示。三者的区别如下。图1-1 HTML、CSS和JavaScript
HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。
单纯只有HTML和CSS的页面一般只供用户浏览，而JavaScript的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），让网页实现更多绚丽的效果。拿绿叶学习网来说，二级导航、图片轮播、回顶部等地方都用到了JavaScript，如图1-2所示。HTML和CSS只是描述性的语言，单纯使用这两个没办法做出那些特效，因此必须用编程的方式来实现，也就是使用JavaScript。图1-2 绿叶学习网的图片轮播1.1.2 教程介绍
很多小伙伴抱怨说JavaScript比较难，整个学习过程不像在学习HTML和CSS时那么顺畅。实际上，对于没有任何编程基础的小伙伴来说，都是一样的。曾经我也是“小白”，所以很清楚小伙伴们的感受。为了更好地帮助大家打好基础，对于很多知识点，我会尽量用简单且易懂的方式进行讲解。还是那句话：“没用的知识绝对不会啰唆，但是重要的知识会反复提醒。”本书不像一些大杂烩似的书一样，上来就一大堆废话，这里的每一句话都值得你去精读。
对于JavaScript部分，有一点需要和大家说明一下：由于IE浏览器外观不错，为了让本书配图更加美观，我们使用IE浏览器来截图。但在实际开发中，我们不建议使用IE浏览器，这一点大家不要误解了。【解惑】
1.JavaScript与Java有什么关系吗？
很多人看到JavaScript和Java，自然而然就会问：“这两个究竟有什么关系？”其实，它们也是“有一毛钱关系”的，并不能说完全没有关系。
JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”，因此语法上它们有不少类似之处，JavaScript的很多名称和命名规则也借自Java。但实际上，JavaScript的主要设计原则源自Self和Scheme。
JavaScript和Java虽然名字相似，但是本质上是不同的，主要体现在以下2个方面。
JavaScript往往都是在网页中使用的，而Java却可以在软件、网页、手机App等各个领域中使用。
从本质上讲，Java是一门面向对象的语言，而JavaScript更像是一门函数式编程语言。
2.我的页面加入了JavaScript特效，那这个页面是静态页面，还是动态页面呢？
不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于是否与服务器进行数据交互。简单地说，页面是否用到了后端技术（如PHP、JSP、ASP.NET）。下面列出的4种情况都不一定是动态页面。
带有音频和视频。
带有Flash动画。
带有CSS动画。
带有JavaScript动画。
特别提醒大家一下，即使你的页面用了JavaScript，它也不一定是动态页面，除非你还用到了后端技术。
3.对于学习JavaScript，有什么好的建议呢？
JavaScript是当下较流行也是较复杂的一门编程语言，对于JavaScript的学习，我给初学者2个建议。
学完JavaScript入门（也就是本书内容）后，不要急于去学习JavaScript进阶的内容而应该先去学习jQuery。经过jQuery的学习，可以让我们对JavaScript的基础知识有更深一层的理解。学完了jQuery，再去学习JavaScript进阶的内容会更好。
很多人在学习JavaScript的时候，喜欢在第一遍的学习过程中就对每一个细节都“抠”清楚，实际上，这是效率最低的学习方法。在第一遍的学习中，如果有些内容我们实在没办法理解，那就直接跳过，等学到后面或者看第2遍的时候，自然而然就懂了。1.2 JavaScript开发工具
JavaScript的开发工具有很多，对于初学者来说，我们建议使用HBuilder作为开发工具，下面给大家介绍一下怎么在HBuilder中编写JavaScript。
① 新建Web项目：在HBuilder的左上方，依次点击【文件】→【新建】→【Web项目】，如图1-3所示。图1-3
② 选择文件路径以及命名文件夹：在对话框中给文件夹填写一个名字，并且选择文件夹的路径（也就是文件存放的位置），然后单击【完成】按钮，如图1-4所示。图1-4
③ 新建JavaScript文件：在HBuilder左侧的项目管理器中，选中test文件夹，然后单击鼠标右键，依次选择【新建】→【JavaScript文件】，如图1-5所示。图1-5
④ 选择JavaScript文件路径以及命名JavaScript文件：在对话框中选择JavaScript文件夹的路径（也就是JavaScript文件存放的位置），并且给JavaScript文件填写一个名字，然后单击【完成】按钮，如图1-6所示。
这样就建好了一个JavaScript文件，至于怎么在HTML中使用JavaScript，下一节我们再给小伙伴们详细介绍。图1-61.3 JavaScript引入方式
在学习JavaScript语法之前，我们首先要知道在哪里写JavaScript。这一节不涉及太多编程方面的知识，而是先给大家介绍一下JavaScript的引入方式。这样大家可以知道在哪里编程，在后面的章节里，我们再给大家详细介绍编程方面的语法。
想要在HTML中引入JavaScript，一般有3种方式。
外部JavaScript。
内部JavaScript。
元素事件JavaScript。
实际上，JavaScript的3种引入方式，跟CSS的3种引入方式（外部样式表、内部样式表、行内样式表）非常相似。大家可以通过对比理解来加深记忆。1.3.1 外部JavaScript
外部JavaScript，指的是把HTML代码和JavaScript代码单独放在不同的文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码。
外部JavaScript是最理想的JavaScript引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都会使用外部JavaScript。
语法
说明
在HTML中，我们可以使用“script标签”引入外部JavaScript文件。在script标签中，我们只需用到src这一个属性。src，是“source（源）”的意思，指向的是文件路径。
对于CSS来说，外部CSS文件只能在head中引入。对于JavaScript来说，外部JavaScript文件不仅可以在head中引入，还可以在body中引入。
此外还需要注意一点，引入外部CSS文件使用的是“link标签”，而引入外部JavaScript文件使用的是“script标签”。对于这一点，小伙伴们别搞混了。
举例
分析
内部JavaScript，指的是把HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在标签对内。
语法
说明
同样地，内部JavaScript文件不仅可以在head中引入，而且可以在body中引入。一般情况下，都是在head中引入。
实际上，“”是一种简写形式，它其实等价于如下代码。
一般情况下，简写形式用得比较多。对于上面这种写法，我们也需要了解一下，因为不少地方会采用上面这种旧的写法。
举例
浏览器预览效果如图1-7所示。图1-7 内部JavaScript
分析
document.write（）表示在页面输出一个内容，大家先记住这个方法，后面我们会经常用到。1.3.3 元素属性JavaScript
元素属性JavaScript，指的是在元素的“事件属性”中直接编写JavaScript或调用函数。
举例：在元素事件中编写JavaScript
当我们单击按钮后，浏览器预览效果如图1-8所示。图1-8 在元素事件中编写JavaScript
举例：在元素事件中调用函数
当我们单击按钮后，浏览器预览效果如图1-9所示。图1-9 在元素事件中调用函数
分析
alert（）表示弹出一个对话框，大家先记住这个语句，后面我们会经常用到。
对于在元素属性中引入JavaScript，只需要简单了解就行，也不需要记住语法。在后面的“第11章 事件基础”中，我们再给大家详细介绍。
此外，这一节学习了两个十分有用的方法，这两个方法在后面的章节中会大量用到，这里我们先记一下。
document.write（）：在页面输出一个内容。
alert（）：弹出一个对话框。1.4 一个简单的JavaScript程序
在学习JavaScript语法之前，先举个例子让小伙伴们感受一下神奇的JavaScript是怎么一回事。
下面这个例子实现的功能：当页面打开时，会弹出对话框，内容为“欢迎光临萌萌小店”；当页面关闭时，也会弹出对话框，内容为“记得下次再来喔”。
实现代码如下。
刚打开页面的时候，预览效果如图1-10所示。单击右上角的关闭页面，此时预览效果如图1-11所示。图1-10 打开时效果图1-11 关闭页面时效果
分析
上面的代码在不同的浏览器中运行得到的效果会不太一样，但功能是一样的。对于这段代码，我们不懂也没关系，这个例子只是让大家感性地认识一下JavaScript是什么样的，可以做点什么，更多具体内容到后面我们会慢慢学到，大家可以在本地编辑器中先测试一下效果。当然，我更建议大家直接下载本书的源代码来测试，本书的源代码的具体下载方式见本书的前言部分。
是不是感觉很有趣？ 那就赶紧投入JavaScript的怀抱吧！1.5 本章练习
单选题
1.在HTML中嵌入JavaScript，应该使用的标签是（）。
A.
B.
C.
D.
2.下面关于JavaScript的语法格式，正确的语句是（）。
A.echo "I love JavaScript!";
B.document.write（I love JavaScript!）;
C.response.write（"I love JavaScript!"）
D.alert（"I love JavaScript!"）;
3.下面有关说法中，正确的是（）。
A.JavaScript其实就是Java，只是叫法不同而已
B.如果一个页面加入JavaScript，那么这个页面就是动态页面
C.在实际开发中，大多数情况下都是使用外部JavaScript
D.内部JavaScript，指的就是把HTML和JavaScript放在不同的文件中
注：本书所有练习题的答案请见本书的配套资源，配套资源的具体下载方式见本书的前言部分。第2章 法基础2.1 语法简介
我们平时经常可以在电影中看到黑客飞快地敲着键盘，仅仅几秒钟就控制了整栋大楼的系统，或者化解了一次危机。惊讶之余，小伙伴们有没有想过，自己以后也能学会“编程”这种神奇的技能？
在这一章中，我们开始步入“编程”的神圣殿堂，学习如何用“编程”的方式来改变这个世界。（“程序猿们”都自称是这个星球上最富有使命的物种，他们的梦想就是改变世界。）
人类有很多种语言，如中文、英语、法语等。实际上，计算机也有很多种语言，如C、C++、Java等。简单地说，JavaScript就是众多计算机语言（也叫编程语言）中的一种。跟人类语言类似，计算机语言也有一些共性，如我们可以将用C写的代码转化为用JavaScript写的代码，这就像将英语翻译成中文一样，虽然使用的语言不一样，但是表达出来的意思是一样的。
当我们把JavaScript学完后，再去学习另外一门语言（如C、Java等），就会变得非常容易。因为两门计算机语言之间，是有非常多的共性的。
我们都知道，学习任何一门人类语言，都得学习这门语言的词汇、语法、结构等。同样地，想要学习一门编程语言，也需要学习类似的东西。只不过在编程语言中，不叫词汇、语法、结构，而是叫变量、表达式、运算符等。
在这一章中，我们主要学习JavaScript以下7个方面的语法。
常量与变量。
数据类型。
运算符。
表达式与语句。
类型转换。
转义字符。
注释。
学习JavaScript，说白了，就是学一门计算机能够理解的语言。在学习的过程中，我们尽量将每一个知识点都跟人类语言进行对比，这样大家理解起来就会变得非常简单。当然，计算机语言跟人类语言相比，自身也有很多不一样的特点，因此我们需要认真学习它的语法。
此外，即使小伙伴们有其他编程语言的基础，也建议认真学一遍本书，因为这本书的内容介绍独树一帜，会让你对编程语言有更深一层的理解。2.2 变量与常量
先问小伙伴们一个问题：学习一门语言，最先要了解的是什么？
当然是词汇，就像学习英语一样，再简单的一句话，我们也得先弄清楚每一个单词是什么意思，然后才知道一句话说的是什么意思。
同样地，学习JavaScript也是如此。下面先来看一句代码。
var a=10;
英语都是一句话一句话地表述的，上面这行代码就相当于JavaScript中的“一句话”，我们称之为“语句”。在JavaScript中，每一条语句都以英文分号（;）作为结束符。每一条语句都有它特定的功能，这个跟英语一样，每一句话都有它表达的意思。
在JavaScript中，变量与常量就像是英语中的词汇。上面代码中的a就是JavaScript中的变量。2.2.1 变量
在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。
1.变量的命名
想要使用变量，我们就得先给它起一个名字（命名），就像每个人都有自己的名字一样。当别人喊你的名字时，你就知道别人喊的是你，而不是其他人。
当JavaScript程序需要使用一个变量时，我们只需要使用这个变量的名字就行了。变量的名字一般是不会变的，但是它的值却可以变。这就像人一样，名字一般都是固定下来的，但是每个人都会改变，都会从小孩成长为青年，然后从青年慢慢变成老人。
在JavaScript中，给一个变量命名，我们需要遵循以下2个方面的原则。
变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$。
变量不能是系统关键字和保留字。
上面两句话很简单，也非常重要，一定要字斟句酌，认真理解。从第1点可以知道，变量只可以包含字母（大写或小写都行）、下划线、$或数字，不能包含这4种以外的字符（如空格、%、-、*、/等）。因为很多其他的字符都已经被系统当作运算符。
对于第2点，系统关键字，指的是JavaScript本身“已经在使用”的名字，我们在给变量命名的时候，是不能使用这些名字的（因为系统要用）。保留字，指的是JavaScript本身“还没使用”的名字，虽然没有使用，但是它们有可能在将来会被使用，所以先保留。JavaScript的关键字和保留字如表2-1、表2-2和表2-3所示。表2-1 JavaScript关键字表2-2 ECMA-262标准的保留字表2-3 浏览器定义的保留字
这里列举了JavaScript常见的关键字和保留字，以方便小伙伴们查询，这里不要求大家记忆。实际上，对于这些关键字，等学到后面，小伙伴们自然而然也就认得了。就算不认得，等需要用的时候再回到这里查一下就行了。
举例：正确的命名
i
lvye_study
_lvye
$str
n123
举例：错误的命名
123n //不能以数字开头
-study //不能以中划线开头
my-title //不能包含中划线
continue //不能跟系统关键字相同
此外，变量的命名一定要区分大小写，如变量“age”与变量“Age”在JavaScript中是两个不同的变量。
2.变量的使用
在JavaScript中，如果想要使用一个变量，我们一般需要两步。
第1步，变量的声明。
第2步，变量的赋值。
对于变量的声明，小伙伴们记住一句话：所有JavaScript变量都由var声明。在这一点上，JavaScript跟C、Java等语言是不同的。
语法
var 变量名=值；
说明
变量的使用语法如图2-1所示。图2-1 变量的使用语法
举例
浏览器预览效果如图2-2所示。图2-2
分析
在这个例子中，我们使用var来定义一个变量，变量名为a，变量的值为10。然后使用document.write（）方法输出这个变量的值。
对于变量的命名，我们尽量采用一些有意义的英文名或英文缩写。当然，为了讲解方便，本书有些变量的命名比较简单。在实际开发中，我们尽量不要太随便。
此外，一个var也可以同时声明多个变量名，其中，变量名之间必须用英文逗号（,）隔开，举例如下。
var a=10,b=20,c=30;
实际上，上面的代码等价于下面的代码。
var a=10;
var b=20;
var c=30;
举例
浏览器预览效果如图2-3所示。图2-3
分析
咦，a的值不是10吗？怎么输出12呢？大家别忘了，a是一个变量。变量，简单地说就是一个值会发生改变的量，因此“a=12”会覆盖“a=10”。我们再来看一个例子，就能有更深的理解了。
举例
浏览器预览效果如图2-4所示。图2-4
分析“a = a +1”表示a的最终值是在原来a的基础上加1，因此a的最终值为11（10+1=11）。下面的代码中，a的最终值是5，小伙伴们可以思考一下为什么。
var a=10;
a=a+1;
a=a-6;2.2.2 常量
在JavaScript中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。
常量，形象地说，就像是千百年来约定俗成的名称，这个名称是定下来的，不能随便改变。
在JavaScript中，我们可以把常量看作一种特殊的变量，之所以特殊，是因为它的值是不会变的。一般情况下，常量名全部采用大写形式，这样一看就知道这个值很特殊，有特殊用途，如var DEBUG = 1。
程序是会变化的，因此变量比常量有用得多。常量在JavaScript的初学阶段用得比较少，我们简单了解即可，不需要过于深入。2.3 数据类型
所谓的数据类型，指的就是图2-5中“值”的类型。在JavaScript中，数据类型可以分为两种：一种是“基本数据类型”，另外一种是“引用数据类型”。其中，基本数据类型只有一个值，而引用数据类型可以含有多个值。图2-5 数据类型
在JavaScript中，基本数据类型有5种：数字、字符串、布尔值、未定义值和空值。常见的引用数据类型只有一种：对象（数组也是属于对象的一种）。这一节我们先介绍基本数据类型，在后面的章节中再来介绍对象这种引用数据类型。2.3.1 数字
在JavaScript中，数字是最基本的数据类型。所谓的数字，指的就是我们数学上的数字，如10、-10、3.14等。
JavaScript中的数字是不区分“整型（int）”和“浮点型（float）”的。小伙伴们记住这一句话就可以了：在JavaScript中，所有变量都用var来声明。
举例
浏览器预览效果如图2-6所示。图2-6 数字2.3.2 字符串
字符串，从名字上看就很好理解，就是一串字符。在JavaScript中，字符串都是用英文单引号或英文双引号（注意都是英文）括起来的。
单引号括起来的一个或多个字符，如下所示。
'我’
'绿叶学习网’
双引号括起来的一个或多个字符，如下所示。
"我"
"绿叶学习网"
单引号括起来的字符串中可以包含双引号，如下所示。
'我来自"绿叶学习网" '
双引号括起来的字符串中可以包含单引号，如下所示。
"我来自’绿叶学习网’"
举例
浏览器预览效果如图2-7所示。图2-7 字符串
分析
如果我们把字符串两边的引号去掉，就会发现页面不会输出内容了，小伙伴们可以自己试一试。因此，对于一个字符串来说，一定要加上引号，单引号或双引号都可以。
var str="绿叶，给你初恋般的感觉~";
document.write（str）;
对于上面这两句代码，也可以直接用下面一句代码来实现，因为document.write（）这个方法本身就是用来输出一个字符串的。
document.write（"绿叶，给你初恋般的感觉~"）;
举例
浏览器预览效果如图2-8所示。图2-8 字符串中含有双引号
分析
在用单引号括起来的字符串中，不能含有单引号，只能含有双引号。同样的道理，在用双引号括起来的字符串中，也不能含有双引号，只能含有单引号。
为什么要这么规定？我们看看下面这句代码就知道了。字符串中含有4个双引号，此时JavaScript无法判断哪两个双引号是一对的。
"绿叶，给你"初恋"般的感觉~"
试读结束[说明：试读内容隐藏了图片]