JavaScript入门指南：历史、核心概念与使用方式

JavaScript概述

本文并非详尽的参考手册，主要目的是帮助读者建立对JavaScript的大致认知。如需掌握JS的详细语法与高级应用，建议前往w3school等权威平台深入学习。

JavaScript是什么？

JavaScript的诞生

JavaScript的历史背景

在1995年前后，当时的主流网络带宽仅为28.8Kbps，而如今的全球平均下载带宽已提升至21.9Mbps（数据来源：http://www.netindex.com）。在那个年代，用户每提交一次表单，往往需要等待漫长的服务器响应，甚至可能耗时数分钟却只收到缺失某项字段的错误提示。为了改善这种糟糕的用户体验，一种嵌入在浏览器客户端、能够实现简单表单验证的脚本语言应运而生，这就是JavaScript。

JavaScript最初由在Netscape（网景公司）工作的Brendan Eich开发，旨在为即将于1995年发布的Netscape Navigator 2.0（NN2.0）提供支持，当时它被称为LiveScript。由于当时Sun公司的Java语言极为流行，为了顺应潮流并借势推广，这门语言最终被命名为JavaScript。

JavaScript跟Java有什么关系？

这是非专业人士听到JavaScript名称时的第一反应，也是该语言长期以来备受争议和诟病的主要原因之一。

严格来说，JavaScript与Java之间没有任何实质性的关联。如果非要寻找联系，可能仅在于两者共享部分函数、面向对象思想、判断结构以及循环语句等概念。然而，这些特性并非Java的专利，而是现代编程语言的通用共识。

JavaScript的标准化及发展历史

JavaScript推出时，体验更佳的NN浏览器占据了市场主导地位，而微软则处于追赶状态。在发布IE3时，微软推出了VBScript，并以JScript为名发布了其脚本引擎，实际上这与Netscape的JavaScript并无太大区别（用今天的话来说，这属于“山寨”行为）。面对微软的竞争压力，Netscape与Sun公司将JavaScript草案提交给ECMA（欧洲计算机制造商协会）进行标准化处理，最终形成了ECMAScript的第一个版本（ECMA-262）。

有趣的是，在JavaScript完成标准化之后，网景公司内部出现了问题，导致JavaScript的研究陷入停滞。与此同时，微软趁机赶超，推出了IE4，并内置了首个遵循ECMA规范的JavaScript引擎，比Netscape提前了一年。加之微软操作系统逐渐占据计算机市场，其预装的IE浏览器市场份额不断扩大，NN浏览器不断被挤压。然而，当微软失去最大竞争对手后，其发展动力也随之减弱。从IE6到IE8，无论是界面渲染还是脚本执行，各版本间互不兼容，这成为了浏览器历史上的一大奇葩现象，也构成了前端开发者的噩梦。

1.v1 1997年06月 首版
2.v2 1998年06月 格式修正，以使得其形式与ISO/IEC16262国际标准一致
3.v3 1999年12月 强大的正则表达式，更好的文字链处理，新的控制指令，异常处理，错误定义更加明确，数输出的格式化及其它改变
4.v4 未完成...可能更明确的类的定义，命名空间等等...
5.v5 2009年12月 新增“严格模式（strict mode）”，一个子集用作提供更彻底的错误检查,以避免结构出错。澄清了许多第3版本的模糊规范,and accommodates behaviour of real-world implementations that differed consistently from that specification。增加了部分新功能,如getters及setters,支持JSON以及在物件属性上更完整的反射。

****2004年6月欧洲计算机制造商协会发表了ECMA-357标准，它是ECMAScript的一个扩延，它也被称为E4X（ECMAScript for XML）。

JavaScript与ECMAScript的关系

JavaScript跟ECMAScript有什么关系？

准确的问题应该是JavaScript、JScript与ECMAScript三者之间的关系。实际上，ECMAScript是总体的规范标准，JavaScript和JScript都是依据该规范开发的，并与ECMAScript兼容，但各自包含了超出ECMAScript规范的功能。不过，如今无论具体实现如何，它们通常都被统称为JavaScript，这主要归功于其最早出现且影响力最大，使得该名称沿用至今。

JavaScript的应用场景

JavaScript能干什么？

在网页层面，所有需要逻辑处理的操作都可以由JavaScript来完成。例如：

•表单验证
•动画效果
•网页游戏
•倒计时
•……

此外还有众多其他应用场景，此处不再赘述。相信大家在掌握这门语言后，会发现它在实际开发中有广泛的应用价值。

学习JavaScript的理由

为什么要学JavaScript？

1.因为你别无选择，只有JavaScript可以控制所有常用的浏览器，而且JavaScript是世界上最重要的编程语言之一，学习web技术必须学会JavaScript。

2.JavaScript是一种优美的语言，它很好，所以我们要学

JavaScript的核心定位

JavaScript的定位

1.JavaScript是一门轻量级的脚本语言，不需要编译，由JavaScript解析引擎解析运行（一般指浏览器，当然不排除node之类的解析器）
2.JavaScript拥有非函数式语言特性、函数式语言特性和动态语言特性，它的语法非常灵活
3.JavaScript是一门面向对象的编程语言，在JavaScript界有一句话：万物皆对象。其继承是基于原型的继承（我之前已经专门写了一篇阐述原型继承的文章）
4.JavaScript是一门类C语言，所以只要学过C的人都很容易上手JavaScript
5.JavaScript的编写不需要编译器，而只需要文本编辑器（记事本就免了，这里强烈推荐sublime text）

JavaScript的三大组成部分

JavaScript有什么？

当前广泛使用的JavaScript主要包含三大组成部分：DOM、BOM以及ECMAScript（或称core js）。

DOM

这里默认大家对HTML、CSS至少有所了解，如果是直接跳过HTML、CSS来看本文的话，先看此处。

DOM，文档对象模型（document object model）

我们知道，XHTML要求标签必须闭合，嵌套必须正确。而标签的嵌套，就产生了父子关系（或者说，祖先-后代关系）。而DOM，提供了大量的API，让我们可以轻松操作DOM树。后面我会开一篇文章专门讲JS DOM。

使用DOM，我们能动态修改页面内容，调整样式等等，这也是JS多样化的一个体现。

BOM

BOM，浏览器对象模型（brower object model）

和DOM类似，只不过主体变成了浏览器。浏览器同样提供了大量的API，其中部分对JS开放，为我们提供了操作浏览器窗口的方法。

常见用处：

1.弹出新浏览器窗口的能力；
2.移动、关闭和更改浏览器窗口大小的能力；
3.可提供WEB浏览器详细信息的导航对象；
4.可提供浏览器载入页面详细信息的本地对象；
5.可提供用户屏幕分辨率详细信息的屏幕对象；
6.支持Cookies；
7.Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。

ECMAScript core

也叫JS core，随便怎么叫，意思一样，都是表示JS这门语言的核心组成，包括变量定义，垃圾回收，语法，作用域等等。和上面提到的DOM和BOM不同，它们只要求我们能使用这些API，而ECMAScript core则是这门语言的精髓所在，需要不断钻研。下一章将进一步讲JS的语法。

JavaScript的三种引入方式

JavaScript的使用

行内式

行内式即写在标签中的JavaScrip，例如我们在HTML中写入：

<button onclick="alert('be clicked');">点击</button>

当我们点击按钮时，将会弹框显示"be clicked"。 但注意，强烈不建议这么做，因为这样会给维护带来巨大的麻烦，每次需要更改事件我们都需要先找到该元素，然后修改其javascript内容，而且这些javascript代码也无法复用。

另外，写在标签中的事件需要带'on'，而且标签内只能通过事件引入js，而不能写简单的js表达式

内嵌式

内嵌式即在html的script标签中写js代码，做法是在HTML中新增一个script标签，然后在标签中间插入你的任意js代码，如下：

<html>
<body>
<button id="btn">点击</button>
</body>
<script>
<span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");</span><pre name="code" class="javascript"> btn.onclick = function() {
alert("be clicked");
        }
</script></html>

用内嵌式的话，就比行内式自由很多，可以写更多的代码，也可以避免引号的转义问题，维护也变得更轻松。但问题也是存在的，这些代码只能适用于这个页面，而无法被其他页面使用。

外联式

外联式把以上两种形式的缺点全部解决了。做法如下：

先新建一个文件，把后缀改为.js。例如，我们新建一个click.js文件，然后把刚才写的内嵌式里面的js代码拷贝进去（注意不包括script标签）

var btn = document.getElementById("btn");
btn.onclick = function() {
alert("be clicked");
}

然后在HTML中通过script标签引入

<html>
<body>
<button id="btn">点击</button>
</body>
<script src="click.js"></script>
</html>

这样的好处在于同样的js代码可以被多个HTML页面共享，坏处是增加了文件数，增大了请求所需时间，所以应增强代码的复用性，并且最后要合并js文件（把不同的js文件合并成一个js文件）