第1章 JavaScript基础概念

本章主要内容

全端意味着利用相关的技术、编程手段、编程思想将视觉和交互效果无缝、完美地重构到多种终端。本章将从基本语法开始，详细阐述能够实现交互效果的JavaScript。

JavaScript 是一门跨平台、面向对象的弱类型的轻量级的解释型语言，也是目前最流行的网页前端脚本语言之一，通常被称为JS。那些炫酷的页面效果、良好的交互体验、表单验证等，都是通过JavaScript实现的。

随着AJAX的出现，前端可以在不刷新页面的情况下和后台进行数据交换，从而实现页面数据的更新。jQuery 库的出现，使得JS 编写变得非常简洁。类似于ECharts、D3 插件的出现，使得前端实现丰富的数据可视化图表变得更加容易，AngularJS、React等优秀框架的出现，大大提高了开发效率。最终Node的发布，使得JS不仅可以运行在前端，还可以运行在服务器上。现在，前端工程师通过JS实现网站开发已经成为现实了。

以上只是陈列了本书中涉及的一些插件和框架，当然还远不止这些，那么面对这么多框架和插件，该如何快速上手呢？既然它们都是建立在JavaScript 的基础上，那么只要把JavaScript中的基本知识以及原理都理解透彻，学习将会变得容易很多。

关于JavaScript，大家必须深刻理解并熟练运用的有3 部分，即变量、对象、函数。具体内容会在接下来的章节中讲到。

本章将重点阐述JavaScript的基础概念。

1.1 JavaScript的用途

JavaScript 作为前端开发中的核心语言，其重要性不言而喻，那么用它能做些什么呢？本节将介绍JavaScript的一些应用场合。

1.1.1 数据的验证

JavaScript最初设计的目的就是用来完成表单数据的验证。到今天，利用JavaScript完成数据验证依然是一种重要的验证方式，当然，除了使用JavaScript，表单中也有自带的验证功能，但是一些需要结合数据库的验证依然需要通过后台语言来完成。

例如，优逸客官网（www.sxuek.com），首页中有在线咨询的功能，其中有输入手机号的一个输入框，当用户输入信息时就需要进行数据验证。还有人们经常操作的用户登录、注册等也都需要进行数据验证。

1.1.2 制作页面动态效果

随着网络链接速度的提升和硬件设备的发展，人们越来越不满足于简单、死板的内容呈现方式，通过浏览器，用户更想看到一些不一样的效果，而JavaScript 就是在网页中制作动态效果的比较好用的工具。

例如，优逸客官网的轮播图和楼层跳转等动态效果都是通过JS实现的。

1.1.3 对事件做出响应

JavaScript 是基于事件驱动的，用户可以通过单击、鼠标指针的移入移出、滚轮滚动、键盘按下等一系列的事件来控制页面中代码的执行，进而提升网页的交互性。

例如，在优逸客官网中通过单击banner 图的轮播点、导航栏等，可以进行内容的切换等，包括鼠标指针移入后效果的变化，其实都是JavaScript在对事件做响应。

1.1.4 单页面应用

随着AngularJS等前端框架的兴起，JavaScript 能够在前端网页中处理的逻辑也更加复杂，WebStorage更是给开发人员提供了直接在浏览器中保存数据的便利。以前一些C/S结构的应用现在也可以基于浏览器来实现了。

例如，谷歌在线的Word、Excel等编辑器；各大平台的云，如小米云、谷歌云等都是单页面应用。

1.1.5 网页游戏

H5中的Canvas给开发人员提供了在页面中处理复杂2D、3D效果的接口，当然，操作这些接口的还是JavaScript。虽然如今在浏览器端的网页游戏更多的是通过其他语言实现的，但是基于JavaScript的游戏，现在也可以在游戏市场分一杯羹。

1.1.6 服务器端的应用

Node.js（有关Node.js详见本书的第3部分）就是运行在服务器端的JavaScript。Node.js是一个事件驱动I/O服务端的JavaScript环境，基于Google的V8引擎，执行JavaScript的速度非常快，性能非常好。

JavaScript 发展到目前为止，它不仅仅作为一种客户端语言，而且还能构建服务器，但是无论如何，学习它都需要学习以下3部分：

1）ECMAScript，核心语法部分。

2）浏览器对象模型（BOM），提供访问和操作网页内容的方法和接口。

3）文档对象模型（DOM），提供与浏览器交互的方法和接口。

注：在本书Node 部分还有关于JavaScript 的其他操作，如操作文件、操作数据库等，相关内容请查阅本书的第3部分。

有关BOM和DOM的详细介绍请参考第6章。

1.2 JavaScript的发展历史

如上节介绍所说，JavaScript 拥有诸多用途，那么我们不禁好奇，如此强大的一门语言，它是怎么由来的呢？

1.2.1 悄然诞生

1995年，Netscape（网景）公司的Brendan Eich（布兰登·艾奇）（见图1-1）在公司提出的“看上去与Java 足够相似，但是比Java 简单，使得非专业的网页开发者也能很快上手”的要求下，利用10 天时间就把JavaScript 设计出来了。当然，起初并不是JavaScript 这个名字，最开始叫作liveScript，因为Sun 公司（Java 开发者所在公司）与网景合作的原因，故改名为JavaScript。

同年，不甘落后的微软在自己的IE 浏览器中嵌入了JavaScript的复刻版并且将其命名为JScript，独立发展自己的客户端脚本语言。

1997年，通过网景、Sun、微软等公司以及众多开发者的努力，统一标准的ECMAScript 被作为标准规范推出，标准编号为ECMA-262，从此ECMAScript 就成为JavaScript等脚本语言实现的标准基础。因为命名版权的原因，JavaScript 的正式名称为“ECMAScript”。ECMA（欧洲计算机制造联合会）是制定计算机标准规范的机构，不过在一般场合下，还是把它称为JavaScript。

1.2.2 稳步发展

1998年、1999年，ECMAScript 2.0和ECMAScript 3.0相继推出，并且稳定下来，在之后的很长一段时间内，JavaScript 都在有条不紊地发展。随着JavaScript 的不断发展，越来越多的人加入到JavaScript 开发者的行列中。当然，因为语言本身设计缺陷的问题，JavaScript越来越多的不足之处渐渐暴露了出来。所以新版本的推出已经迫在眉睫。

2008年，关于JavaScript新版本协商的会议在并不和谐的氛围中落下帷幕，因为有太多激进的改动被提出，众多开发商不能达成一致，所以最终只是采用了一个折中的办法，将一些较小的改动加入到新版本中，并且命名为ECMAScript 3.1。而一些激进的改动则作为JavaScript.next 继续改进。ECMAScript 3.1也在不久后正式更名为ECMAScript 5。

1.2.3 黄金时代

2015年6月，ECMAScript 6.0正式推出，其中包含了大量关于JavaScript的语法补充以及新的语法，因为还有许多改动不断被提出，所以标准委员会决定，在每年6 月份发布一次版本更新，而第一版的正式名称也被改为ECMAScript 2015。

如今，越来越多基于JavaScript的框架出现，JavaScript可以完成的功能也越来越多，使用也越来越方便。AngularJS、ReactJS、VueJS等框架让前端开发进入了全新的模式，而Node.js 的出现和发展也让JavaScript 进入了后台和数据库。在未来一段时间内，JavaScript作为Web全栈开发的核心，将会迎来更加鼎盛的发展。

1.2.4 JavaScript和ECMAScript

如上文所述，ECMAScript 1.0版从一开始就是针对JavaScript 语言制定的，但是之所以不叫JavaScript，有两个原因：

1）Java是Sun 公司的商标，根据授权协议，只有Netscape 公司可以合法地使用JavaScript 这个名字，且JavaScript本身也已经被Netscape 公司注册为商标。

2）想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。日常场合中，这两个词是可以互换的。

1.2.5 JavaScript和Java

在开始接触JavaScript 时，很多人都会误解JavaScript 和Java。这两个编程语言除了“外貌”看起来有点相似，实则是两种完全不同的编程语言：

1）从发布公司来讲，Java是Sun公司于1995年5月推出的；而JavaScript是1995年由Netscape公司设计并实现的，由于两个公司间的合作关系，Netscape高层希望它看上去能够像Java，所以取名为JavaScript。

2）从本质上来说，Java是面向对象的编程语言；而JavaScript是基于对象的，它本身就提供了很多丰富的内置对象可以供设计人员使用。

3）从执行方式上来讲，Java 是编译性的语言，即在执行之前必须经过编译；而JavaScript 是解释性的语言，在执行之前无须编译，由浏览器解释执行，等等。总之，Java和JavaScript是两个完全不一样的语言。

1.3 JavaScript的语法特点

每个编程语言都有自己的特点，而语法的学习是入门的开始。本节将介绍JavaScript 这门编程语言的特点。

JavaScript是基于对象和事件驱动的松散型的解释性语言，下面一一解释每个特点。

1.3.1 基于对象

基于对象，是因为JavaScript 是基于面向对象的方式开发的，通过构造函数完成类的定义，通过对象冒充和prototype 实现继承。之所以说是继承，是因为它自身就有很多内置的对象可以直接使用，关于JavaScript内置的对象将在第5章中详细介绍。

示例：

1.3.2 事件驱动

在事件驱动这个特点中，事件指的就是用户的一些操作或浏览器的一些行为，如用户单击鼠标、按下键盘上的某个键等。JavaScript 的运行需要事件的驱动来完成，那么对于事件我们可以在HTML代码中添加，也可以在JavaScript代码中添加。

示例：

1.3.3 松散型

之所以说JavaScript 具有松散型特点（有时也称为是一门弱语言），是因为相比Java、C等强语言，它的语法并不是很严格。在强语言中，不同类型的变量声明方式也不相同，而在JS中，不用关注变量的类型，一个var就可以搞定；每一行代码的最后可以加分号，也可以不加分号；函数和var声明的变量都可以在声明之前访问等。

示例：

说明：在上述示例中定义的变量str，在没有声明之前就可以调用，且不报错。此处得到的undefined是个数据类型，并不是错误，后续章节中会讲到。

1.3.4 解释型

在众多编程语言中，如C、C++、Java、JavaScript、PHP等，都可以分为两类，即编译型语言和解释型语言。如果把读者比喻为计算机，那么编程语言就是一本书，读者通过阅读书上的内容，理解书里边的内涵，从而采取某些相应的动作。解释型语言就类似于阅读英文的文献，需要一边看一边翻译。

JavaScript 作为典型的解释型语言，不需要编译，可以由浏览器来解释执行，所以在学习JavaScript时，安装主流浏览器进行测试是很有必要的，如IE、火狐、谷歌。

1.4 JavaScript的引入方式

通过学习前3节，读者已经初步对JavaScript有了一定的了解，为了让静态的HTML页面实现某些动态效果，因此引入JavaScript。本节将重点介绍如何将JavaScript 与HTML 页面正确地联系起来。

总的来说，在HTML网页中引入JavaScript有4种方式，这4种方式各有各的用途，在实际工作中具体采用哪种方式，需要根据具体的需求来决定。

1.4.1 在域名或者重定向的位置引入

示例：

说明：如上述示例，当用户单击链接进行页面跳转或提交表单时就会执行对应的JavaScript语句。在实际工作中，JavaScript语句一般都会写在对应的JS文件中。

1.4.2 在事件中引入

在事件中引入JavaScript，即在元素的某个属性中直接编写JavaScript代码，这里的属性指的是元素的事件属性，如onclick表示鼠标单击事件。

示例：

说明：如上述示例，当用户单击该文本时会执行对应的JavaScript 语句。该方式一般也仅用于测试，在实际工作中，这些操作都是在JS文件中实现的。

1.4.3 在页面中嵌入

在页面中嵌入，类似于之前的CSS通过style标签对在页面中嵌入，JavaScript可以在页面中通过script标签对嵌入。

示例：

注意：JavaScript 代码必须在<script></script>标签对内编写。该引入方式一般在做练习的时候比较常用，真正做项目的时候不推荐大家使用，因为不能很好地实现前后台分离。

1.4.4 引入外部JavaScript文件

在实际工作中，不同功能的文件一般是分离的，所以外部引入的形式采用较多，引入方式也是采用script标签对。不过这里需要注意的是，在引入外部文件时，script标签对中间是不能放置任何其他内容的！

示例：

注意：引入外部JavaScript 文件的script 标签可以放在head 标签内，也可以放在body标签内。

1.4.5 注意事项

上文中介绍的4种不同的引入方式之间会在代码加载的时候按照书写顺序执行。

多个块之间（即多个script 标签对）的代码最终还是在一个环境中解析的，所以互相之间是有关联的，会相互影响。

示例：

说明：如上述示例，在第一个script 标签对中声明的变量，可以在第二个script 标签对中进行调用。特别注意，在JavaScript脚本中不能出现script标签对。

1.5 JavaScript中的输出工具

在上节中已经学习了如何将HTML页面和JavaScript关联起来，即JavaScript的引入，那么在编写代码的过程中，除了要正确引入文件，编写高质量、优美的语法代码也是必需的。但是在编写过程中难免会碰到一些bug，所以需要一些输出工具来完成一些数据的验证测试。在最终完成的程序中肯定看不到这些输出的代码，但在开发过程中，这些输出调试是必需的，常用的输出方式有console.log()、alert()、document.wirte()等，下面将详细介绍每个输出工具的使用方法。

1.5.1 console

console 是控制台的意思，在浏览器中打开开发者工具就可以找到控制台，各个浏览器都有自己的查看工具，功能各有千秋，常用的控制台命令如下：

1）console.log()可在控制台打印括号中的内容，将要输出的内容写到括号中即可，可以一次输出多个。

示例：

说明：有时在不同的浏览器中可能会输出不同的结果，如对于对象的输出，这是正常现象。

2）console.dir()可详细地输出一个对象的所有属性以及原型链。

示例：

3）console.table()，对于某些复合类型的数据，它可以将其转为表格显示。

示例：

示例输出结果见表1-1。

4）console.clear()可清空当前的控制台。

当然还有一些其他方法，不过常用的就是这些，读者若感兴趣可以详细查阅console对象。

1.5.2 alert()

方法alert()用于显示带有一条指定消息和一个确定按钮的警告框。

示例：

示例运行结果如图1-2所示。

说明：alert()会阻塞代码的运行，这在测试的时候对我们非常有帮助，如果不想程序被阻塞，可以采用其他输出方式。

1.5.3 document.write();

此方法会在文档中打印内容并显示到网页中，不过，因为这样的操作会影响文档结构，所以这种方式不推荐使用，可在页面中做一些有个性的输出测试。

1.5.4 prompt(str,[value]);

此方法用于弹出一个输入框，可以为它指定默认值，也可以接收该输入值。

示例：

示例运行结果如图1-3所示。

1.5.5 confirm()

此方法用于弹出一个确认框，单击确认返回true，单击否返回false。

示例：

示例运行结果如图1-4所示。

1.5.6 JavaScript注释

在实际开发过程中，除了通过输出工具可以帮助我们进行代码的调试，还可以借助JavaScript注释。

JavaScript注释分为两种：行注释//和块注释/ ** /。

通过添加注释可以对JavaScript 代码进行解释，或者提高代码的可读性；还可以使用注释来阻止代码的执行。

下面的示例中使用行注释来解释代码：

下面的示例中使用块注释进行多行代码的注释，故块注释又可以称为多行注释：

说明：不能嵌套使用块注释，否则会报错。