第1章 JavaScript概述

第1章　JavaScript概述

JavaScript是面向Web的编程语言。绝大多数现代网站都使用了JavaScript，并且所有的现代网页浏览器均包含了JavaScript解释器。这使得JavaScript成为史上使用最广泛的编程语言之一，JavaScript也是前端开发工程师必须掌握的基本技能之一。本章将从JavaScript起源开始讲解，简单介绍JavaScript发展历史、概况以及相关基本概念，为后续章节的进一步讲解打下基础。

【学习重点】

▲　了解JavaScript发展历史

▲　了解ECMAScript

▲　了解JavaScript实现构成

▲　熟悉使用JavaScript开发工具

1.1　JavaScript发展历史

为了发挥JavaScript的全部潜力，了解它的本质、历史及局限性是十分重要的。本节将简单介绍JavaScript和客户端脚本的起源。

1.1.1　第一个网页脚本语言

1992年，一家名为Nombas的公司开发了一个叫做C减减（C-minus-minus，简称Cmm）的嵌入式脚本语言。Cmm的设计理念很简单：开发一个足够强大、可以替代宏操作（macro）的脚本语言，同时保持与C（和C ++）足够的相似性，以便开发人员能很快学会。

这个脚本语言被捆绑在一个叫做CEnvi的共享软件中，它首次向开发人员展示了强大威力。后来，Nombas把Cmm更名为ScriptEase。

当Netscape Navigator网页浏览器开始流行时，Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的试验被称为Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而Nombas没有料到它的理念将会成为万维网的一块重要基石。

1.1.2　Netscape发明了JavaScript

当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，大部分互联网用户还仅仅通过28.8Kbit/s的调制解调器连接到网络，频繁的服务器端验证请求和极慢的网速让用户苦不堪言。

那时正处于技术革新最前沿的Netscape公司，开始认真考虑开发一种客户端脚本语言来解决这些简单的问题。1995年，就职于Netscape公司的布兰登·艾奇（Brendan Eich），开始着手为计划于1995年2月发布的Netscape Navigator 2开发一种名为LiveScript的脚本语言，该语言将同时在浏览器和服务器中使用（它在服务器上的名字叫LiveWire）。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司建立了一个开发联盟。

在Netscape Navigator 2正式发布前夕，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，这也是最初的JavaScript 1.0版本。

1.1.3　三足鼎立

由于JavaScript 1.0获得了巨大成功，Netscape随即在Netscape Navigator 3中又发布了JavaScript 1.1版本。

互联网的发展速度超出了人们的想象，在这样的时代背景下，微软决定与Navigator展开竞争。在Netscape Navigator 3发布后不久，微软就在其Internet Explorer 3中加入名为JScript的JavaScript实现（命名为JScript是为了避开与Netscape的JavaScript纠纷）。

在微软推出JavaScript实现之后，市场上存在着3个不同的JavaScript版本：

☑　Netscape Navigator中的JavaScript。

☑　Internet Explorer中的JScript。

☑　ScriptEasc中的CEnvi。

与C及其他编程语言不同，当时还没有标准统一规定JavaScript的语法和特性，3个不同版本并存的局面也带来了很多兼容性问题。随着业界担心的日益加剧，JavaScript的标准化问题被提上了议事日程。

1.1.4　ECMAScript诞生

1997年，以JavaScript 1.1为蓝本的建议被提交给欧洲计算机制造商协会（ECMA）。该协会指定一个技术委员会负责标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义。这个技术委员会当时由来自Netscape、Sun、微软、Borland及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了ECMA-262的新脚本语言的标准，并命名为ECMAScript。

第二年，国标标准化组织和国际电工委员会（ISO/IEC）也采用了ECMAScript作为标准（即ISO/IEC-16262）。自此以后，浏览器开发商就开始致力于将ECMAScript作为各自JavaScript实现的基础。

1.2　JavaScript版本

虽然ECMAScript作为JavaScript语言的标准，但是人们依然习惯地称之为JavaScript。另外，早期各公司在发布JavaScript版本时，都是沿用各自的版本号，同时各个版本所支持的特性也不完全统一。下面简单比较早期Netscape、Microsoft和ECMA所发布的JavaScript版本号，以及它们之间的关联特性，如表1-1所示。

表1-1　JavaScript、JScript和ECMAScript版本比较

1.3　ECMAScript概述

ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。本节将简单介绍ECMAScript相关知识和概念。

1.3.1　ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是ECMAScript 1.0版。之所以不叫JavaScript，有两个原因：

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

二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript和JavaScript的关系是：前者是后者的规范，后者是前者的一种实现。但在日常场合，这两个词是可以互换的。

1.3.2　ECMAScript发展历史

1998年6月，ECMAScript 2.0版发布。

1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。

2007年10月，ECMAScript 4.0版草案发布，对3.0版做了大幅升级，计划次年8月发布正式版本。草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。

2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，根据会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1就改名为ECMAScript 5。

2009年12月，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。

2011年6月，ECMAScript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。

2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。

2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。

2015年6月，ECMAScript 6发布正式版本，并更名为ECMAScript 2015。Mozilla将在这个标准的基础上，推出JavaScript 2.0。

以年份命名的意图：以便更频繁地发布包含小规模增量更新的新版本，下一版本将于2016年发布，命名为ECMAScript 2016。从现在开始，新版本将按照ECMAScript+年份的形式发布。

提示：ECMA的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订ECMAScript标准，成员包括Microsoft、Mozilla、Google等大公司。TC39的总体考虑是，ECMAScript 5与ECMAScript 3基本保持兼容，较大的语法修正和新功能加入，将由JavaScript.next完成。当前，JavaScript.next指的是ECMAScript 6，当第6版发布以后，将指ECMAScript 7。TC39认为，ECMAScript 5会在2013年的年中成为JavaScript开发的主流标准，并在今后5年中一直保持这个位置。

ECMAScript 2016的制定工作已经启动，许多草案已被提交到委员会，新版本可能包括的功能如下。

☑　Object.observe：对象与网页元素的双向绑定，只要其中之一发生变化，就会自动反映在另一者上。

☑　Multi-Threading：多线程支持。目前，Intel和Mozilla有一个共同的研究项目RiverTrail，致力于让JavaScript多线程运行。预计这个项目的研究成果会被纳入ECMAScript标准。

☑　Traits：它将是“类”功能（class）的一个替代。通过它，不同的对象可以分享同样的特性。

其他可能包括的功能有更精确的数值计算、改善的内存回收、增强的跨站点安全、类型化的更贴近硬件的低级别操作、国际化支持（Internationalization Support）、更多的数据结构等。

虽然委员会正在积极评估这些特性，但我们无法预知它们的未来，其中一些会加入到下一版规范，另一些会加入未来的其他规范，剩下的将最终被遗弃。

1.4　JavaScript实现

尽管ECMAScript是JavaScript的标准，但它并不是JavaScript唯一部分，也不是唯一被标准化的部分。实际上，一个完整的JavaScript实现是由以下3个部分组成的，如图1-1所示。

图1-1　JavaScript实现构成

☑　核心（ECMAScript）

☑　文档对象模型（DOM）

☑　浏览器对象模型（BOM）

1.4.1　JavaScript核心

由ECMA-262定义的ECMAScript与Web浏览器没有依赖关系，这门语言本身也不包含输入和输出定义。ECMA-262定义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。

Web浏览器只是ECMAScript实现可能的宿主环境之一。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。而这些扩展（如DOM），则利用ECMAScript的核心类型和语法提供更多更具体的功能，以便实现针对环境的操作。其他宿主环境包括Node（一种服务端JavaScript平台）和Adobe Flash。

既然ECMA-262标准没有参照Web浏览器，那它都规定了些什么内容呢？大致说来，它规定了这门语言的下列组成部分：

☑　语法

☑　类型

☑　语句

☑　关键字

☑　保留字

☑　操作符

☑　对象

直到2008年，五大主流Web浏览器（IE、Firefox、Safari、Chrome和Opera）全部做到了与ECMA-262兼容。IE 8是第一个实现ECMA-262第5版的浏览器，并在IE 9中提供了完整的支持。Firefox 4也紧随其后做到兼容。

1.4.2　文档对象模型

文档对象模型（Document Object Model，DOM）是针对XML但经过扩展用于HTML的应用程序编程接口（API）。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

【示例】针对下面的网页文档结构：

这段代码可以用DOM绘制成一个节点层次图，如图1-2所示。

图1-2　DOM文档节点树

通过DOM创建的文档结构树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除、添加、替换或修改任何节点。

DOM 1级（DOM Level 1）于1998年10月成为W3C的推荐标准。DOM 1级由两个模块组成：

☑　DOM核心（DOM Core）

☑　DOM HTML

DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

如果说DOM 1级的目标主要是映射文档的结构，那么DOM 2级的目标就要宽泛多了。DOM 2级在原来DOM的基础上又扩充了鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS的支持。DOM 1级中的DOM核心模块也经过扩展开始支持XML命名空间。

DOM 2级引入了下列新模块，也给出了众多新类型和新接口的定义。

☑　DOM视图（DOM Mews）：定义了跟踪不同文档（如应用CSS之前和之后的文档）视图的接口。

☑　DOM事件（DOM Events）：定义了事件和事件处理的接口。

☑　DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口。

☑　DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM 3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法，在DOM加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法，在DOM验证（DOM Validation）模块中定义。DOM 3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML Base。

提示：有时读者会听到DOM 0级标准。实际上，DOM 0级标准是不存在的。所谓DOM 0级只是对DOM标准前的一种说法，具体表示IE 4.0和Netscape Navigator 4.0最初支持的DHTML。

在DOM标准出现了一段时间之后，Web浏览器才开始实现它。微软在IE 5中首次尝试实现DOM，但直到IE 5.5才算是真正支持DOM 1级。在随后的IE 6和IE 7中，微软都没有引入新的DOM功能，而到了IE 8才对以前DOM实现中的Bug进行了修复。Firefox 3完全支持DOM 1级，几乎完全支持DOM 2级，甚至还支持DOM 3级的一部分。目前，支持DOM已经成为浏览器开发商的首要目标，主流浏览器每次发布新版本都会改进对DOM的支持。

【拓展】除了DOM核心和DOM HTML接口之外，另外几种语言还发布了只针对自己的DOM标准。下面列出的语言都是基于XML的，每种语言的DOM标准都添加了与特定语言相关的新方法和新接口。

☑　SVG（Scalable Vector Graphic，可伸缩矢量图）1.0

☑　MathML（Mathematical Markup Language，数学标记语言）1.0

☑　SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）

还有一些语言也开发了自己的DOM实现，例如，Mozilla的XUL（XML User Interface Language，XML用户界面语言）。但是，只有上面列出的几种语言是W3C的推荐标准。

1.4.3　浏览器对象模型

IE 3.0和Netscape Navigator 3.0提供了一种特性：BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。与DOM不同，BOM只是JavaScript的一个部分，没有任何相关的标准。

BOM主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript扩展都被看作BOM的一部分。这些扩展包括：

☑　弹出新的浏览器窗口。

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

☑　提供Web浏览器详细信息的定位对象。

☑　提供用户屏幕分辨率详细信息的屏幕对象。

☑　对cookie的支持。

☑　IE扩展了BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象。

由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

1.5　JavaScript开发工具

编辑JavaScript程序可以使用任何一种文本编辑器，如Windows中的记事本、写字板等应用软件。由于JavaScript程序可以嵌入HTML文件中，因此，读者可以使用任何一种编辑HTML网页文档的工具软件，如Dreamweaver等。

“工欲善其事，必先利其器。”对于开发人员来说，考虑到开发效率，以及保证代码质量，选择一款优秀的JavaScript编辑器是非常必要的。

1.5.1　JavaScript编辑器

下面推荐几款JavaScript编辑器，供读者参考选用（具体下载地址可以到网上搜索）。

☑　Aptana：一个不错的JavaScript IDE，功能强大，是专业JavaScript开发必备工具。但是该工具占用资源大，对中文支持不是很好，适合Web前端应用专业开发。

☑　JSEclipse：Eclipse的JavaScript插件，Eclipse是一个开放源代码的、基于Java的可扩展开发平台。JSEclipse代码分析能力强大，但是需要Java支持环境，适合Java偏好的开发人员选用。

☑　1st JavaScript Editor Pro：一个轻巧、专业的JavaScript脚本编辑器，有着丰富的代码编辑功能。它具备JavaScript编辑、调试、测试等全部功能，是一个非常不错的开发工具，适合初级用户编写JavaScript脚本。

☑　Dreamweaver：Dreamweaver是当今最流行的网页编辑工具之一，它采用了多种先进技术，提供图形化程序设计窗口，能够快速高效地创建网页，并生成与之相关的程序代码，使网页创作过程简单化，生成的网页也极具表现力。Dreamweaver支持JavaScript智能提示和语法纠错功能，但对JavaScript代码的管理能力有限，适合HTML+CSS+JavaScript混搭的网页设计者。

1.5.2　JavaScript测试和调试

测试的目的是显示存在的错误，调试的目的是发现错误或导致程序失效的错误原因，并修改错误。要确保JavaScript代码完全正确执行，就是必须保证它是经过完整测试和没有Bug的。

1．浏览器的错误控制平台

为了帮助用户快速找到错误发生的具体位置，所有现代浏览器都提供了一个错误控制平台，当然各家浏览器提供的错误控制平台功能略有差异。详细说明可以参阅第2章内容讲解。

2．Firebug

Firebug是Firefox浏览器的一款开发类插件，它提供了HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的好帮手。Firebug能够从不同角度剖析Web页面的内部细节，给Web开发者带来了极大的便利。在JavaScript脚本调试方面也非常优秀，能够单步调试、设置断点、变量查看窗口，同时还可以统计每段脚本运行的时间，查看语句执行时间过长，一步步排除问题，如图1-3所示。

图1-3　Firebug插件窗口

3．HttpWatch

HttpWatch是强大的网页数据分析工具，可以在IE和Firefox下使用，当使用JavaScript和Ajax开发异步通信程序时，该工具就显得非常重要，它提供了详细的Cookies管理、缓存管理、消息头请求／响应、字符查询、POST数据和目录管理功能。能够跟踪HTTP传输的全过程，收集并显示网页深层信息，它不用代理服务器或一些复杂的网络监控工具，就能够在显示网页的同时显示网页请求和响应的详细信息，甚至可以显示浏览器缓存和IE之间的交换信息，如图1-4所示。这是一个值得推荐的HTTP底层信息查找工具。

图1-4　HttpWatch插件窗口

4．Web Developer Toolbar

Web Developer Toolbar是Firefox浏览器的一款优秀的Web开发工具条，作为附加插件而存在。IE浏览器也开发了一款类似的Web Developer Toolbar，但是功能没有Firefox浏览器的强大。该工具条适合查看HTML结构和CSS样式，不提供对JavaScript的直接支持，但是作为一款非常优秀的Web开发工具，也是不可缺少的。因为JavaScript开发必须与具体的DOM文档结构相联系。DOM查看是JavaScript开发者最重要也是最容易被忽略的问题，使用它能够弥补我们在了解页面结构和样式信息时具有重要的辅助作用，如图1-5所示。

图1-5　Web Developer Toolbar开发工具条

5．JavaScript Debuger

JavaScript Debuger也是Firefox浏览器的一个内置组件，是作为Mozilla浏览器的一部分开发的。JavaScript Debuger能够与JavaScript引擎本身紧密集成，这样就可以对代码进行更加精确的控制。因此与Firebug相比，JavaScript Debuger属于更专业的调试工具。在“开发者”菜单项中选择“调试器”命令即可启动，如图1-6所示。

图1-6　JavaScript Debuger调试工具窗口