上篇 JavaScript程序开发

第1章 JavaScript简介

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

本章导读

1.1 程序设计语言与JavaScript

知识点讲解

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

自从20世纪中期电子计算机被发明以来，程序设计语言就开始不断地发展、演进，从数量来说，真正被使用的编程语言可能有数十甚至上百种，各种语言也在不断发展变化，读者如果有兴趣，可以查看一个专门对各种程序设计语言流行度进行研究和追踪的网站——TIOBE。根据TIOBE给出的数据，目前流行度最广的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是弱类型语言，而非强类型语言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

目前面向对象的基本结构是主流程序设计语言的基本配置，前文介绍的许多被广泛使用的通用程序设计语言都是面向对象的。

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

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

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

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

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

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

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

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

● 如果你是一名应用开发者，通常每天面对的工作是使用一些常用的框架开发一些网站的页面，那么对技术的要求会简单很多，通常只要能掌握JavaScript的基本特性就可以了，基本不需要写涉及对象继承等复杂的代码。当然本书还是会对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。改成JavaScript并非因为它和Java有关系，而是想蹭一下Java的热度。二者之间的距离不小于“雷锋”和“雷峰塔”之间的差距。

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

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

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

背景知识

大家可以记住TC39，它是后来20年主导JavaScript标准制定的关键组织。TC39的成员都是一些公司“巨头”、相关组织以及大学，例如微软、谷歌、苹果、Mozilla、英特尔、甲骨文、jQuery基金会等。

TC39有一整套完备的JavaScript标准制定流程。TC39成员可以提交提案，所提交的提案经过TC39审议和讨论，按照一定的步骤，经过若干阶段，最终可以成为正式标准。

1.2.2 博弈与发展

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

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

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

document.layers['mydiv']

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

document.all['mydiv']

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

1.2.3 标准的制定

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

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

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

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

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

1.3 JavaScript的组成

知识点讲解

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

1.3.1 ECMAScript

正如1.2.1小节所说，ECMAScript是由ECMA标准化的脚本语言。它并不与任何浏览器绑定，也没有用到任何用户输入输出的方法。事实上，浏览器仅仅是ECMAScript的宿主环境。除了常见的浏览器之外，Adobe公司的Flash脚本ActionScript等都支持ECMAScript的实现，只是Flash已经走下了历史舞台。简单来说，ECMAScript描述的仅仅是语法、类型、语句、关键字、保留字、运算符、对象等。

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

1.3.2 DOM

根据W3C的DOM规范可知，DOM是一种与浏览器、平台、语言无关的接口，使得用户可以访问页面其他的标准组件。简单来说，DOM解决了网景的JavaScript和微软的JScript之间的冲突，给了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可将其绘制成节点层次图，具体参见第7章。

现在需要明确的是，DOM将页面分成了清晰、合理的层次结构，从而使开发者对整个页面有了很好的控制力。

1.3.3 BOM

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

● 弹出新的浏览窗口。

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

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

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

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

● 提供cookie的支持。

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

本书的后续章节也将对BOM进行详细的介绍。

1.3.4 新的开始

网景公司与微软公司之间的竞争最终以后者的全面获胜而告终，这并不是因为IE对JavaScript标准的支持强于Navigator或是别的技术上的因素，而是因为IE与Windows进行了捆绑销售。迫于各方面的压力，微软公司从IE5开始内建对W3C标准化DOM的支持，但其仍然继续支持自身所独有的Microsoft DOM。

再来回顾一下浏览器的市场占有率变化情况，如图1.4所示，这对我们理解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和XHTML，表现标准主要包括CSS，行为标准主要包括DOM和ECMAScript等。

1.结构标准语言

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

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

2.表现标准语言

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

3.行为标准语言

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

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

注意

对各个标准的技术规范和详细文档有兴趣的读者可以参考W3C的官网。

使用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.5所示。

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

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

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

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

另外一个大趋势是2012年开始的前/后端分离，2014到2015年是JavaScript技术大爆发的两年，从此全面进入前/后端分离时代。相关发展情况如图1.6所示。

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

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

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

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

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

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

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

本章小结

在本章中，我们介绍了JavaScript的一些历史发展情况和基本组成部分，以及Web标准的相关知识。仔细想一想JavaScript的作用，简而言之就是我们可以对页面中的各种对象通过编程的方式进行控制。这正是我们正在经历的这个时代的大趋势——所有事物都在逐步软件化和智能化，甚至出现了一个口号“软件定义一切”。而要实现软件化和智能化，本质就是要让各种事务“可编程”。

习题1

一、关键词解释

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

二、描述题

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

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

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