1.1 JavaScript概述

JavaScript是为满足制作动态网页的需要而诞生的一种编程语言，是由Netscape（网景通信公司）开发的嵌入到HTML文件中的基于对象（Object）和事件驱动（Event Driven）的脚本语言。在HTML基础上，使用JavaScript可以开发交互式（网页）Web。JavaScript的出现使得网页和用户之间实现了实时、动态和交互的关系。

1.1.1 JavaScript发展历史

JavaScript最初由Netscape的Brendan Eich开发，开发的目的是为了扩展即将于1995年发行的NetscapeNavigator2.0（NN2.0）功能，提高网页的响应速度。最初JavaScript叫作LiveScript，后来因为Netscape和Sun公司合作，且Java正处于强劲的发展势头中，出于市场营销的目的，Netscape和Sun公司协商后，将LiveScript改为JavaScript。当时的Microsoft（微软）为了取得技术上的优势，在IE3.0上发布了VBScript，并将其命名为JScript，以此来应对JavaScript。之后，为了争夺市场份额，Netscape和Microsoft这两大浏览器厂商不断在各自的浏览器中添加新的特性和各种版本的JavaScript实现。由于他们在实现各自的JavaScript时并没有遵守共同的标准，这就使得他们的浏览器对JavaScript的兼容性问题越来越大，从而给JavaScript开发人员带来巨大的痛苦。为了达到使用上的一致性，减轻JavaScript开发人员的痛苦，1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组对JavaScript和JScript等当时存在的主要的脚本语言确定了统一标准：ECMA-262。该标准定义了一个名为ECMAScript的脚本语言，规定了JavaScript的基础内容，其中主要包括：语法、类型、语句、关键字、保留字、操作符和对象这几方面的内容。

从内容上看，ECMAScript规定了脚本语言的规范，而JavaScript、JScript等脚本语言则是依照这个规范来实现的，和ECMAScript相容，但包含了超出ECMAScript的功能。因为ECMA-262标准的出台，所以现在JavaScript、JScript和ECMAScript都通称为JavaScript（在后面的内容中，我们将会更多使用其简写“JS”来表示JavaScript）。浏览器的兼容性也越来越高：在2008年，五大主流Web浏览器（IE、Firefox、Safari、Chrome和Opera）就全部做到了与ECMA-262兼容；随着各大浏览器厂商的不断努力，特别是HTML5规范的发布，各大浏览器对JavaScript的兼容性也得到了不断的提高。依照这样的发展趋势，我们完全可以相信，不久的将来，各大浏览器必将实现对JavaScript的完全兼容。

1.1.2 JavaScript组成部分及特点

1．JavaScript组成部分

标准化后的JavaScript包含了3个组成部分，如图1-1所示。

图1-1 JavaScript组成部分

ECMAScript：脚本语言的核心内容，定义了脚本语言的基本语法和基本对象。现在每种浏览器都有对ECMAScript标准的实现。

DOM（Document Object Model）：文档对象模型，它是HTML和XML文档的应用程序编程接口。浏览器中的DOM把整个网页规划成由节点层级构成的树状结构的文档。用DOM API可以轻松地删除、添加和替换文档树结构中的节点。

BOM（Browser Object Model）：浏览器对象模型，描述了对浏览器窗口进行访问和操作的方法和接口。

2．JavaScript特点

JavaScript是一种运行在浏览器中的主要用于增强网页的动态效果、提高与用户的交互性的编程语言。相比于其他编程语言，它具有许多特点，主要包括以下几方面。

（1）解释性

JavaScript不同于一些编译性的程序语言，它是一种解释性的程序语言，它的源代码不需要经过编译，直接在浏览器中运行时进行解释。

（2）动态性

JavaScript是一种基于事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入直接做出响应。

（3）跨平台性

JavaScript依赖于浏览器本身，与操作环境无关。任何浏览器，只要具有JavaScript脚本引擎，就可以执行JavaScript。目前，几乎所有用户使用的浏览器都内置了JavaScript脚本引擎。

（4）安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，同时不能将数据存到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据丢失。

（5）基于对象

JavaScript是一种基于对象的语言，同时也可以被看作是一种面向对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

1.1.3 JavaScript与Java的区别

Java是由Sun公司开发的面向对象的程序设计语言，适合于网络应用程序开发。JavaScript最初是受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上和Java有类似之处，一些名称和命名规范也源自于Java。但事实上，JavaScript除了在语法上和Java有些类似以及前面所说的出于市场营销的目的，名字和Java有点相似以外，其他方面和Java存在很大的不同，主要体现在以下几点。

（1）JavaScript由浏览器解释执行，Java程序则是编译执行。

（2）JavaScript是一种基于对象的脚本语言，其中提供了丰富的内置对象供开发人员直接使用；Java则是一种真正的面向对象的编程语言，不管开发的程序简单与否，都必须设计对象。

（3）JavaScript是弱类型语言，声明变量时不需要声明变量的类型，甚至不声明变量而直接使用变量；Java是强类型语言，变量在使用前必须先声明且必须声明变量的类型。

（4）代码格式及嵌入HTML文档方式不一样：Java代码必须用相应的编译工具编译为字节码文件，嵌入HTML文档必须使用<applet>…</applet>标签嵌入字节码文件；JavaScript代码是一种文本字符格式，嵌入HTML文档使用<script></script>标签，其中可以直接嵌入JavaScript代码，也可以嵌入JavaScript脚本文件。

1.1.4 JavaScript语法特点及编辑工具

不管是JavaScript，还是Java、C++，它们编写的程序代码不外乎都是由一些英文单词按照一定的规则组织起来的一条条语句。这些语句遵循的各项规则，称为语法。JavaScript和Java、C++等编程语言的语法很类似，但它也具有自己的一些特点。

1．区分大小写

和Java一样，JavaScript代码中的标识符也区分大小写，所以Student和student是两个不同的标识符，如果把student写成Student，程序将会出错或得不到预期结果。通常，JavaScript中的关键字、变量、函数名等标识符一般全部小写，如果名词是由多个单词构成，通常从第二个单词开始每个单词的首字母大写。

2．语句结束的分号问题

不同于Java每条语句结尾必须加上分号，JavaScript语句结尾处的分号是可选的，即可加也可不加。如果语句结尾不加分号，JavaScript会对当前语句和下一行语句进行合并解析，如果不能将两者当成一个合法的语句来解析的话，JavaScript会在当前语句换行处填补分号，例如：

var a
a
=
3

解析的结果为var a;a=3;。

由JavaScript来添加分号在大多数情况下是正确的，但也有两个例外情况。第一个例外情况是涉及return、contiune和break这3个关键字的时候。不管什么情况下，如果这些关键字的行尾处没有分号，JavaScript都会对它们在换行处填补分号。例如，本意是return true;的语句，如果写成以下形式：

return
true;

则JavaScript解析后的结果将变成：return;true;。第二个例外情况是涉及“++”和“--”这两个运算符的时候。这些运算符既可作为表达式前缀使用，也可以作为表达式后缀使用。如果将其作为表达式后缀使用，它和表达式应该在同一行。否则，JavaScript将在行尾处填补分号。例如，本意是x++;y;的语句，如果写成以下形式：

x
++
Y

则解析的结果为：x;++y;。

由前面两个例子可见，为了使语句不出现歧义，我们最好在每条语句的结尾处都加上分号。

3．编辑工具

因为JavaScript代码是纯文本代码，所以可以使用任何文本编辑器来编辑JavaScript，甚至可以使用Microsoft Word这样的字处理软件，但此时一定要确保将文件保存为文本文件类型。建议最好使用以纯文本作为标准格式的软件。目前主流JavaScript编辑软件有：Dreamweaver、Visual Studio Code、Sublime Text、Atom和WebStorm。

1.1.5 JavaScript的实际应用场景

很多其他语言的开发者或一些初学者对JavaScript的印象似乎停留在做各种“炫彩夺目的网站”上。的确，能够完成Web端复杂的交互，使得网页元素能够“动起来”，让信息以更佳效果呈现，这是JavaScript的功能之一；但它的实际应用场景远不止于此，一名专业前端开发工程师在工作中至少要使用JavaScript进行以下任务的开发。

1．开发各种网页动态交互效果

在海量信息爆炸的时代，网站不仅要呈现必要的关键信息，还要以最佳方式与用户之间进行动态交互，加深用户对网站信息或功能印象，并提高用户体验和黏度。因此，更多网站的开发者们精心研发了某些表现力丰富的交互效果，例如以培训“前端开发”为主的妙味课堂官网，就在首页制作了一个形象的“展台”，并用动画堆叠的形式将前端必学的“HTML5\CSS3\JS”组合在一起，如图1-2所示，象征着学习前端开发最关键的基础语言是HTML5\CSS3\JS。

图1-2 妙味课堂首页的交互展示效果之一

2．使用Ajax等技术与后端进行数据交互

前端开发者每天要处理的大量编码工作中，占据很重比例的工作内容之一是根据后端提供的各种数据接口，把数据渲染到网页相应位置中，完成页面信息呈现。例如经典的登录和注册功能，当登录时会调用后端相应接口判断登录用户是否正确，而注册时会判断填写的用户名是否符合要求以及是否已被注册过。

3．处理网页各种业务逻辑

在今天，许多内容型网站有大量用户关注，在这样的网站中，许多业务逻辑需要开发者使用JavaScript来实现。比如网站的使用者当中，有游客、普通会员，也有VIP会员，这几种不同类型的用户在权限上需要加以区分：游客、普通会员、VIP会员能观看的视频是不同的。在这样的需求下，网站内容展示需要根据不同的业务需求进行逻辑判断，这样才能在页面中呈现不同内容。这些功能，都需要开发者使用JavaScript做出判断处理。

除上述几个任务以外，JavaScript还可以变成运行在服务器上的后端开发语言（Node.js）以及能以Hybrid App形式运行在移动设备上的App开发语言。此外，还能够用来构建桌面应用、开发游戏、图形处理、PDF生成、编译解释器、测试工具、视频音频播放、通信……限于本书篇幅，在此不对这些展开介绍。

接下来，我们从最容易理解的“网页动态变化”原理开始与大家探讨，逐渐深入到JavaScript语言的学习中去。

1.1.6 JavaScript实现网页动态变化原理以及执行顺序

1．JavaScript实现网页变化原理

使用JavaScript后，可以实现许多网页的动态变化效果，诸如：跑马灯、选项卡切换、广告轮播、表单数据有效验证、漂移菜单、折叠菜单、倒计时等。这些动态变化效果的实现，并不需要网页重新加载，而是通过改变局部区域的外观或内容来实现。这正是JavaScript实现网页动态效果的原理。需要网页动态变化时，只需要根据变化的需要，使用JavaScript修改元素的样式或增加/清空页面元素内容或属性值。使用JavaScript动态改变网页时一般会结合CSS，其中CSS设置元素的初始样式，JavaScript则实现元素的动态样式。所以使用JavaScript实现网页动态效果，通常包含这样两个步骤：首先是使用CSS设置初始样式（即布局元素）；然后再根据动态变化的需要，使用JavaScript修改元素样式或增加／清空页面元素内容或属性值。

JavaScript实现网页变化原理的应用示例请参见示例1-4。

2．JavaScript代码执行顺序

JavaScript代码按照执行的机制可分为两类代码：事件处理代码和非事件处理代码。非事件处理代码如果不在某个函数中，则在载入HTML文档时，将按JavaScript在文档中出现的顺序，从上往下依次执行；如果非事件处理代码出现在某个函数中，则在调用该函数时执行。事件处理代码则在HTML文件内容载入完成，并且所有非事件处理代码执行完成后，才根据触发的事件执行对应的事件处理代码。

3．JavaScript代码的调试

在编写JavaScript的过程中，很有可能会出现一些语法错误，所以在开发过程需要经常调试脚本代码（注：随写随调试不失为一种好习惯）。脚本代码的调试包括代码调试和工具调试两种方法，有关脚本代码的调试方法，我们将会在1.2节中详细介绍。