第一篇 JavaScript程序开发

第1章 JavaScript简介

所有Web开发人员及希望成为Web开发人员的人，对HTML一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够方便网络用户使用，友好而大方，甚至像桌面应用程序一样，那么仅依靠HTML是不够的，JavaScript在其中也扮演着重要的角色。本章从JavaScript的起源及一些背景知识出发，介绍其基础知识，为读者进一步学习后续内容打下基础。本章的思维导图如下。

1.1 其他程序设计语言与JavaScript

在正式开始学习JavaScript语言之前，我们先来了解一些关于其他程序设计语言和JavaScript的背景知识和特点。虽然初学者未必能够完全、迅速、深刻地理解这些概念，但是如果先对它们有一个感性的认识，等到学完以后再经过一些时间的实践和练习，就会逐步真正理解它们了。

自从20世纪中期电子计算机被发明以来，程序设计语言就在不断地发展、演进。从数量上来说，真正实际被使用的程序设计语言可能有数十种，甚至上百种，各种程序设计语言也在不断发展、变化，读者如果有兴趣，可以查看专门对各种程序设计语言流行度进行研究和追踪的网站——TIOBE。根据TIOBE给出的数据，2021年2月流行度最广的10种程序设计语言如图1.1所示。

如果仔细观察这10种程序设计语言，可以看出它们大致分为以下几种不同的情况。

●排名第1的C语言是传统的结构化程序设计语言，它可以被看作很多程序设计语言的“老祖宗”，但目前C语言主要用于对性能要求比较高的系统开发或底层开发，例如操作系统或设备驱动程序的开发，而应用层的程序开发则使用得并不多。排名第10的Assembly Language被用于底层的设备驱动程序的开发等场景，通常不会被用来开发通用的面向业务层面的程序和系统。

●排名第9的SQL虽然是使用极为广泛的语言，几乎所有网站或者App的背后都有SQL的存在，但它不是通用程序设计语言，而是用于对数据库进行操作和查询的专用语言。

●剩下的7种语言中，除JavaScript语言之外，其余的6种语言也都属于面向对象的程序设计语言，它们都是主流的用于开发业务系统的语言。实际上，它们都有着非常类似的语法结构和特性，被称为基于“类”的面向对象语言。也可以看出，面向对象是一种极其主流的程序开发范式，否则不会几乎所有的主流程序开发语言都使用这种范式。

●本书的主角——JavaScript经过20多年的发展，已经从一个内嵌于浏览器的非常简单的脚本语言，发展成一种广泛应用于各个领域的通用程序开发语言。需要了解的是，JavaScript也是一种面向对象的程序设计语言，但是它使用了与其他主流面向对象语言都不一样的另一种范式，该范式被称为基于“原型”的面向对象范式。对于大多数开发者来说，学习这种开发范式时多多少少会遇到一些困难。

JavaScript语言有如下一些特点。

1.JavaScript是解释型语言，而非编译型语言

传统的C、C++、C#、Java等语言都是“编译型语言”，程序员写好的程序首先被编译为机器码或者字节码，然后才能在机器上运行，因此这些语言都有“编译期”和“运行时”的概念。当程序存在一些问题的时候，有的问题可以在编译的时候就被发现，有的问题则要到运行的时候才会被发现。

而JavaScript是“解释型语言”，不需要编译即可直接在具体环境（如浏览器）中运行，因此程序如果存在问题，在运行时才会暴露。

2.JavaScript是动态类型语言，而非静态类型语言

所有高级程序设计语言都有“数据类型”的概念。只有机器语言和汇编语言是面向寄存器和内存地址进行编程，基本上没有数据类型概念的。而对高级程序设计语言来说，类型系统是一门语言里最重要的特征和组成部分，不同的语言会有各自不同的类型系统。如果深入探究，会发现类型系统是非常复杂的，需要更深入的相关背景知识才能学懂，因此这里仅做一些浅显的讲解。

诸如C、C++、C#、Java这些语言都属于静态类型语言，也就是说一个变量一旦被声明为某种类型，就不能再改变。JavaScript语言则不然，一个变量可以随时改变其类型，即它是动态类型语言。

3.JavaScript是弱类型语言，而非强类型语言

高级程序设计语言的类型系统除了可以分为动态类型和静态类型之外，还可以分为强类型和弱类型。但是类型强弱的区分比动态、静态的区分更为复杂，如果要对此进行严格的定义，需要一些复杂的程序设计语言方面的知识，这里不做严格的定义。粗浅地说，强类型语言对类型的要求更为严格，偏向于更严格地限制变量自动的类型转换（或称隐式转换），弱类型语言则偏向于对自动的类型转换更为宽容。

我们会在后面详细地介绍相关知识，而这部分内容的学习也是让人颇为头疼的。

总体来说，根据上面的第2、第3个特点，可以把各种程序设计语言分类到4个象限，如图1.2所示。

●静态强类型语言，典型的是Java、C#语言。

●静态弱类型语言，典型的是C语言。

●动态强类型语言，典型的是Python语言。

●动态弱类型语言，典型的是JavaScript语言。

从图1.2中可以看出，一门语言是动态的还是静态的，是强类型的还是弱类型的，并不是绝对的，而是一种“尺度”，代表偏向某一边多一些而已。

此外，JavaScript是一种特别灵活的语言，能很大程度上给予程序员自由掌控程序的权利。这是一把“双刃剑”，自由的同时意味着责任：一方面这与最初设计它的理想主义理念有关；另一方面也与当初的不够完善有关。JavaScript的创始人布兰登·艾奇（Brendan Eich）最初设计并实现JavaScript语言只用了两周的时间，因此不可避免地在各个方面使用“做减法”的策略。因为当时的目的仅仅是在网页上能够实现一些简单的交互而已。在当时，谁也无法预料JavaScript会成为今天这样重要的程序设计语言和事实上的互联网标准。

4.JavaScript是基于原型的面向对象语言，而非基于类的面向对象语言

这一点是JavaScript让初学者最为头疼的一点。从程序设计的宏观范式角度来看，程序设计语言的演进大致经过了3个阶段。

在电子计算机出现后不久的初始阶段，使用机器语言进行程序设计与开发是一件极其低效而烦琐的工作，因此产生了高级语言，尽可能使用接近人类语言的方式编写程序。当然在最早期阶段，其功能相当不完善，主要通过“翻译”机器指令的方式实现，因此主要通过条件判断以及跳转（Goto语句）实现程序逻辑的表达。

在知名的荷兰计算机科学家迪杰斯特拉（Dijkstra）发表了论文指出“Goto语句是有害的”之后，程序设计语言领域逐步发展出“结构化程序设计”这种范式。最早实现这种范式的是Pascal语言，其核心思想是消除Goto语句，自顶向下、逐步求精，通过顺序、分支、循环这3种基本结构以及子程序（函数）表达程序逻辑，对指令进行封装，实现代码的复用。

此后，人们逐渐发现，在结构化程序设计过程中虽然消除了Goto语句，但是往往需要依赖大量的分支结构，例如嵌套的if-else结构或者switch-case结构，而这往往是程序复杂性的来源。因此，“面向对象”（object oriented）思想逐步产生并发展成熟，在结构化程序设计的基础上增加了“类”等基本结构，对程序的抽象能力进一步加强，通过封装、继承和多态等特性，实现低耦合、高内聚的目标，降低程序的复杂性，提高程序的可读性、可维护性。

目前面向对象的基本结构是主流程序设计语言的基本配置，上面的所有被广泛使用的通用程序设计语言都是面向对象的。

但非常有趣，同时也令人头疼的是，JavaScript使用了一种与大多数主流语言很不一样的面向对象的实现方式，主要涉及以下4点。

●例如Java、C#这类常见语言都使用“类-实例”方式来对程序要表达的逻辑进行抽象。而JavaScript使用一套非常不同的称为“原型”的方式来对逻辑进行抽象。理解“原型”的工作原理对初学者是一件颇具挑战的事情。

●JavaScript的类型系统为“结构性类型”，而不是Java、C#这类语言使用的“名义性类型”，这一点会带来很多开发中不同的思维方式。要逐步熟悉这些思维方式，且需要学习者静下心来认真思考并通过实践逐步掌握。

●JavaScript吸纳了函数式语言的一些特征，“函数”在JavaScript中的地位特别重要，远远超出了函数在普通语言中的含义。

●由于历史原因，JavaScript的发展经过了很漫长的争论，不同的版本有各自不同的要求，还要兼顾对历史版本的兼容。要实现同一个功能，可能有很多不同的方法，不同的方法有不同的优缺点，所以要想真正掌握，不得不条分缕析地研究。例如要实现对象的创建和继承，这在其他语言里是件很简单和确定的事情，而在JavaScript中有将近10种实现方法，这样对于初学者是比较有挑战性的。

总体来说，根据上面的讲解，读者可以了解到JavaScript是一门“颇具个性”的语言，无论是对一名编程新手还是对已经熟练掌握了其他语言的资深开发人员，都需要认真付出一些努力才能真正掌握JavaScript。从Java到JavaScript的“距离”，远远大于从Java到C#，或者Java到Python的“距离”。

当然，读者对此也无须害怕。一方面，随着ES6的推出，新的JavaScript用起来已经非常“正常”了；另一方面，JavaScript的使用者大体上可以分为两类，即“框架开发者”和“应用开发者”，他们对这门语言的理解和掌握程度的要求有很大的不同。

●如果你是一名框架开发者，需要对这门语言有着非常深刻的理解和能熟练掌握操作方法。常见的JavaScript框架，例如非常流行的jQuery、Vue.js和React等，都是很多技术水准非常高的开发者开发出来的，而开发这些框架的目的就是降低开发实际应用程序（例如某个网站）的技术门槛。

●如果你是一名应用开发者，大致上每天面对的工作是使用一些常用的框架开发一些网站的页面。这对技术的要求会简单很多，通常只要能掌握JavaScript的基本特性就可以了，基本不需要编写涉及对象继承等复杂的代码。当然本书还是会对一些比较深入的特性进行讲解，使读者在需要时能够读懂一些比较复杂的代码，比如某些框架的源代码。这对程序员技术实力的提升意义巨大。

1.2 JavaScript的起源、发展与标准化

任何技术都不是单纯地在实验室里被凭空构想出来的。JavaScript语言起于实践，逐步成为如今互联网时代的“核心支柱”之一。

1.2.1 起源

早在1992年，一家名为Nombas的公司开发出一种叫作“C减减”（C-minus-minus）的嵌入式脚本语言，并将其捆绑在一个被称作CEnvi的共享软件中。当时意识到互联网会成为技术焦点的Netscape（网景）公司，开发出自己的浏览器软件Navigator并使其率先进入市场。与此同时，Nombas公司开发出了第一个可以嵌入网页中的CEnvi，这便是最早万维网上的客户端脚本。

当“网上冲浪”逐步走入千家万户的时候，开发客户端脚本显得越来越重要。此时大多数网民还是通过28.8kbit/s的调制解调器来连接网络，网页却越来越丰富多彩。用户认证等现在看起来极其简单的操作，当时实现起来都非常麻烦。这时网景公司为了扩展其浏览器的功能开发了一种名为LiveScript的脚本语言，并于1995年11月末与Sun（太阳计算机系统）公司联合宣布把其改名为JavaScript。改成这个名字并非因为它与Java有什么关系，而仅仅想蹭一下Java的热度。二者之间的差异不小于“雷锋”和“雷峰塔”。

此后很短时间，Microsoft（微软）公司也意识到了互联网的重要性，决定进军浏览器市场，在其发布的IE 3.0中搭载了一个JavaScript的克隆版本，为了避免版权纠纷，将其命名为Jscript。随后微软公司将浏览器加入操作系统中进行捆绑销售，使JavaScript得到了很快的发展，但这样也产生了3种不同的JavaScript：网景公司的JavaScript、微软公司的Jscript，以及Nombas公司的ScriptEase。

1997年，JavaScript 1.1作为一个草案被提交给ECMA（European computer manufacturers association，欧洲计算机制造商协会），由来自网景、太阳计算机系统、微软、Borland（宝蓝）等一些对脚本语言感兴趣公司的程序员组成第39技术委员会（TC39），最终锤炼出ECMA-262标准，其中定义了ECMAScript这种全新的脚本语言。这是一个伟大的标准，至今我们能够在不同的设备上用JavaScript都要得益于ECMA-262标准，并且ECMA-262标准一直在不断升级演进。

进入21世纪后，网上的各种对话框、广告、滚动提示条越来越多，JavaScript被很多网页制作者乱用，一度背上了恶劣的名声。直到2005年年初，Google（谷歌）公司的网上产品Google讨论组、Google地图、Google搜索建议、Gmail等使得AJAX一时兴起并受到广泛好评，这时作为AJAX最重要元素之一的JavaScript才重新找到了自己的定位。

1.2.2 博弈与发展

所有日后看起来天经地义的技术，其实都是经过了惊心动魄的博弈和竞争之后的产物。JavaScript就是在一系列激烈的博弈中逐步发展起来的。

20世纪90年代，互联网开始普及，而此时浏览器成为“风口”，浏览器市场几乎被网景公司的产品垄断，这时如日中天的微软公司意识到自己在这个领域已经落后的现实情况，又一次通过“捆绑”这个法宝，在Windows操作系统中免费内置了IE。1997年6月，网景公司的Navigator 4.0发布，同年的10月，微软公司发布了它的IE 4.0。这两种浏览器较其以前的版本有了明显的改进，DOM（document object model，文档对象模型）得到了很大的扩展，从而可以运用JavaScript来实现一系列加强的功能。

在各自的浏览器中，双方大体上遵循着一致的标准，但是有各自的特性，导致不完全一致。双方对CSS（cascading style sheets，串联样式表）和JavaScript的支持都不尽相同。例如网景公司的DOM使用其专有的层（layer）元素，每个层都有唯一的ID标识，JavaScript通过如下代码对其进行访问。

---

 document.layers['mydiv']

---

而在微软的IE中，JavaScript必须这样使用：

---

 document.all['mydiv']

---

这两种浏览器在细节方面的差异很大，可以说几乎所有的JavaScript细节都是或多或少有区别的，这就使得互联网网站开发受到严重的影响。在商业市场上，竞争与合作永远是共存的。当时各自为战带来很多问题以后，各大厂商开始寻找解决之道。

1.2.3 标准的制定

就在浏览器厂商为了商业利益而展开激烈的竞争时，万维网联盟（world wide web consortium，W3C）也在协调各大厂商制定需要大家共同遵守的标准，实现技术的标准化。但是这个过程也是非常艰难的，各个厂商有各自的诉求，要达成一致的目的非常不容易。

1998年6月，ECMAScript 2.0发布。不久，在1999年12月，ECMAScript 3.0发布。这个标准取得了巨大的成功，成为JavaScript的通用标准，得到了广泛支持。接着就开始了下一个版本标准的制定工作，但是这个工作非常困难，争议巨大。经过8年的时间才于2007年10月发布了ECMAScript 4.0的草案，本来预计次年8月发布正式版本，但是草案发布后，由于4.0版本的目标过于激进，各方对于是否通过这个标准产生了严重分歧。以Yahoo（雅虎）、微软、谷歌为首的大公司反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者布伦丹·艾奇为首的谋智公司，则坚持原标准草案。为此，ECMA开会决定中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分发布为ECMAScript 3.1，不久之后，改名为ECMAScript 5，这是一个妥协的产物。因此，目前JavaScript的早期版本常见的就是ES3和ES5，它们之间差别不大，并且不存在ES4。

又过了7年，2015年6月17日，ECMAScript 6正式发布，其正式的名称改为ECMAScript 2015，但是开发者早已习惯称之为ES6了，因此，大多数场合它都被称为ES6。ECMAScript 2015是一个非常重要的版本，在多方的共同努力下，它使得JavaScript从一个“先天不足”的脚本语言，成为一个正常而稳定的通用程序开发语言。而此后，ECMAScript仍然在不断演进，但是ES6奠定的大结构已经稳定下来，因此ES6可以说是JavaScript标准化过程中最重要的一个版本，也是经过了近20年的多方努力而得到的结果。

从ECMAScript 2015开始，正式的版本名称用发布年份标识，这导致了每个版本都有两个名称。2016年6月，小幅修订的ECMAScript 2016（简称ES2016或ES7）发布，它与ES6的差异非常小。

需要注意的是，上面介绍的都是ECMAScript，那么它和JavaScript是什么关系呢？二者是标准与实现的关系，即ECMAScript是大家协商确定的一套标准，JavaScript是各个浏览器或其他运行环境具体的实现。

1.3 JavaScript的实现

尽管ECMAScript是一个重要的标准，但它并不是JavaScript的唯一组成部分，也不是唯一被标准化的部分，上面提到的DOM也是重要的组成部分之一，另外BOM（browser object model，浏览器对象模型）也是，如图1.3所示。

1.3.1 ECMAScript

正如前面所说，ECMAScript是一种由欧洲计算机制造商协会标准化的脚本程序设计语言。它并不与任何浏览器绑定，也没有用到任何用户输入/输出的方法。事实上，Web浏览器仅仅是一种ECMAScript的宿主环境。除了常见的网页浏览器之外，Adobe公司的Flash脚本ActionScript等都可以容纳ECMAScript的实现，只是Flash已经走下“历史舞台”。简单来说，ECMAScript描述的仅仅是语法、类型、语句、关键字、保留字、运算符、对象等。

每个浏览器都有其自身ECMAScript接口的实现，这些接口又被不同程度地扩展，包含了后面会提到的DOM、BOM等。

1.3.2 DOM

根据W3C的DOM规范可知，DOM是一种与浏览器、平台、语言无关的接口，使用户可以访问页面其他的标准组件。简单来说，DOM最初解决了网景和微软之间的冲突，给了Web开发者一个标准的方法，让其方便地访问站点中的数据、脚本和表现层对象。

DOM把整个页面规划成由节点层级构成的文档，考虑下面这段简单的HTML代码。

---

1 <html>
2 <head> 
3      <title>DOM Page</title> 
4 </head> 
5   
6 <body> 
7      <h2><a href="#myUl">标题1</a></h2> 
8      <p>段落1</p> 
9      <ul id="myUl"> 
10          <li>JavaScript</li> 
11          <li>DOM</li> 
12          <li>CSS</li> 
13      </ul> 
14 </body> 
15 </html>

---

这段HTML代码十分简单，这里不再一一说明各个标记的含义。利用DOM结构将其绘制成节点层次图，如图1.4所示。

对于该节点层次图的各个部分，我们以后会详细讲解。这里需要明确的是，DOM将页面清晰、合理地进行了层次结构化，从而使开发者对整个文档有了空前的控制力。

1.3.3 BOM

从IE 3.0和Netscape Navigator 3.0开始，浏览器都提供一种被称为BOM的特性，它可以对浏览器窗口进行访问和操作。利用BOM的相关技术，Web开发者可以移动窗口、改变状态栏，以及执行一些与页面中内容毫不相关的操作。尽管没有统一的标准，但BOM的出现依然给“网络世界”增添了不少色彩，主要功能包括以下几个。

●弹出新的浏览窗口。

●移动、关闭浏览窗口以及调整窗口大小。

●提供Web浏览器相关信息的导航对象。

●页面详细信息的定位对象。

●提供屏幕分辨率详细参数的屏幕对象。

●cookie的支持。

●各种浏览器自身的一些新特性，例如IE的ActiveX类等。

本书的后面也将对BOM进行详细的介绍。

1.3.4 新的开始

20世纪90年代，网景与微软之间的竞争最终以后者的全面获胜而告终，这并不是因为IE对标准的支持强于Netscape Navigator或是别的技术因素，而是IE在Windows上进行捆绑销售。迫于各方面的压力，微软公司从IE 5.0开始就内置了对W3C标准化DOM的支持，但仍然继续支持它独有的Microsoft DOM。

这里再回顾一下浏览器的发展历程，各种浏览器近年来的市场占有率的变化情况如图1.5所示，这对我们了解JavaScript语言也有所帮助。

由于早期的浏览器对标准支持不好，它们有各自独有的一些特性和接口，导致早期的前端开发者为了能够让网页在不同的浏览器中有统一的显示效果，需要付出巨大的努力和时间成本。

从2010年左右开始，Web标准化开始了新的历程。谷歌开发的Chrome浏览器逐渐成为主流，与此同时，它对标准的支持也越来越好。各大厂商逐步意识到标准化才是正确的选择。

特别是进入移动互联网时代以后，由于浏览器进入移动设备相对较晚，反而它从一开始就比较好地支持了新的标准，让前端开发者拥有了比较舒服的开发体验。

1.4 Web标准

2004年初，网页设计在经历了一系列的变革之后，一本名为Designing with Web Standards（中文译本《网站重构——应用Web标准进行设计》）的书掀起了整个Web行业的“大革命”。网页设计与制作人员纷纷开始重新审视自己的页面，并发现那些充满嵌套表格的HTML代码臃肿而难以被修改，于是一场清理HTML代码的行动开始了。

1.4.1 Web标准概述

Web标准不是某一个标准，而是一系列标准的集合。网页主要由3个部分组成：结构（structure）、表现（presentation）和行为（behavior）。对应的标准也分为3个方面：结构标准语言主要包括XML（extensible markup language，可扩展标记语言）和XHTML（extensible hypertext markup language，可扩展超文本标记语言），表现标准语言主要包括CSS，行为标准主要包括DOM、ECMAScript等。

1.结构标准语言

XML和HTML一样，来源于SGML（standard general markup language，标准通用标记语言），但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，开发者在HTML4的基础上，用XML的规则对其进行扩展，得到了XHTML。简单来说，建立XHTML的目的就是实现HTML向XML的过渡。

2.表现标准语言

W3C最初创建CSS标准的目的是取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3.行为标准

前面已经介绍过，DOM是一种与浏览器、平台、语言无关的接口，它使得用户可以访问页面其他的标准组件。简单来说，DOM解决了网景的JavaScript和微软的Jscript之间的冲突，给了Web设计师和开发者标准的方法来访问站点中的数据、脚本和表现层对象。

另外，前面介绍的ECMAScript同样也是重要的行为标准，目前推荐遵循的是ECMA-262标准。

使用Web标准，对于网站浏览者来说有以下优势。

●文件下载与页面显示速度更快。

●内容能被更多的用户（包括失明、视弱、色盲等人士）所访问。

●内容能被更广泛的设备（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）所访问。

●用户能够通过样式选择定制自己的界面风格。

●所有页面都能提供适用于打印的版本。

而对网站的设计者来说有以下优势。

●更少的代码和组件，容易维护。

●带宽要求降低（代码更简洁），成本降低。

●更容易被搜寻引擎搜索到。

●改版方便，不需要变动页面内容。

●提供打印版本而不需要复制内容。

●提高网站易用性。在美国，有严格的法律条款来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

1.4.2 结构、表现、行为的分离

对于网页开发者而言，Web标准的最好运用就是结构、表现、行为的分离，将页面看成这几个部分的有机结合体，分别对待，这样也使得不同的部分需运用不同的专用技术。下面来看网页各个部分的含义。

页面是用于展现其内容（content）的，例如动物网站的内容主要是动物的介绍等。内容形式可以包括清单、文档、图片等，是纯粹的网站数据。

页面上只有内容显然是不够的，内容合理地组织在一起便是结构，例如一级标题、二级标题、正文、列表、图像等，类似Word文档的结构。有了合理的结构才能使内容更加具有逻辑性和易用性。通常页面的结构是由HTML来搭建的，例如下面这段简单的HTML代码便构建了一个页面的结构。

---

1  <div id="container">
2      <div id="globallink"></div> 
3      <div id="parameter"></div> 
4      <div id="main"></div> 
5      <div id="footer"></div> 
6  </div>

---

对应的页面结构如图1.6所示。

HTML虽然定义了页面的结构，但整个页面的外观还是没有改变，例如标题的颜色还不够突出、页面的背景还不够漂亮等，这些用来改变页面外观的东西称为表现。通常处理页面表现的是CSS技术，后面将会进一步介绍。

网站通常不仅通过表现来展示其内容，很多时候还需要与用户交互，例如用户单击按钮、提交表单、拖曳地图等，这些统称为行为。而让用户能够具有这些行为的，通常就是以JavaScript为代表的脚本语言。

通过HTML搭建结构框架来存放内容，CSS制作美工完成页面的表现，JavaScript编写脚本实现各种行为，这样便实现了Web网页结构、表现、行为三者的分离。这是目前标准化制作页面的方法，也是本书的基础，在后面都会逐一分析。

1.4.3 前后端分离成为Web开发的主流模式

另外一个大趋势是从2012年开始，前后端分离出现，2014年到2015年是JavaScript技术“大爆发”的两年，此后全面进入前后端分离阶段。

由于移动互联网的普及，多终端设备的适配逐步成为前端开发必须面对的问题。因此后端业务逻辑逐步演变成API方式，脱离与UI（user interface，用户界面）层的耦合，前端和后端开发逐步分离。由此，前后端分离模式的Web开发模式逐渐被接受和发展起来。

互联网的应用越来越丰富，逐步从提供内容向提供服务转变，对技术上的要求有如下4点。

●客户端需求复杂化，用户体验的期望提高。

●页面的渲染从服务器端转移到客户端。

●客户端程序具备完整的生命周期、分层架构和技术栈。

●从“单一网站”到“多端应用”。

因此，传统的jQuery逐步被新的客户端框架取代，例如当下主流的3个框架Vue.js、Angular、React。使用这些新的客户端框架对JavaScript的理解和掌握提出了新的要求。

本章小结

在这一章里，我们介绍了JavaScript语言的一些历史发展情况、JavaScript的基本组成部分，以及Web标准的相关知识。JavaScript的作用，简而言之就是对页面中的各种对象通过“可编程”的方式进行控制。这正是我们正在经历的这个时代的大趋势——各种各样的事物都在逐步软件化和智能化，例如“软件定义网络”“软件定义存储”，甚至近期出现的“软件定义汽车”；而要实现软件化和智能化，本质就是让各种事物“可编程”。

习题1

一、关键词解释

JavaScript ECMAScript DOM BOM Web标准 前后端分离模式

二、描述题

1.请简单描述一下JavaScript语言有什么特点。

2.请简单描述一下JavaScript是由哪几个部分组成的。

3.请简单描述一下Web标准主要包含哪些内容。