简介
JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScript 解释器。 这使得 JavaScript 能够称得上史上使用最广泛的编程语言。 JavaScript 也是前端开发工程师必须掌握的三种技能之一:描述网页内容的 HTML、描述网页样式的 CSS、以及描述网页行为的 JavaScript。
JavaScript 是一门 动态的、弱类型的、面向对象的、解释型的 编程语言,非常适合面向对象和函数式的编程风格。JavaScript 的语法来自于 Java,它的一等函数(first-class function)来自于 Scheme,它的基于原型(prototype-based)的继承来自于 Self。但学习本课程不必去了解那些(Java/Scheme/Slef)语言或熟悉那些术语。
JavaScript 从一个简单的输入验证器发展成为一门强大的編程语言,完全出乎人们的意料。应该说,它既是一门非常简单的语言,又是一门非常复杂的语言。说它简单,是因为学会使用它只需片刻功夫;而说它复杂,是因为要真正掌握它则需要数年时间。
JS的组成
JavaScript 和 ECMAScript 通常被人们用来表达相同的含义,但 JavaScript 的含义却比 ECMAScript 中规定的要多得多。一个完整的 JavaScript 实现应该由下面三个不同的部分组成。
- 核心(ECMAScript)
- 文档对象模型(DOM)
- 浏览器对象模型(BOM)
核心(ECMAScript)
ECMAScript 标准由 语法、数据类型、语句、关键字、保留字、运算符、对象 组成。它与 Web 浏览器没有任何依赖关系,并且这门语言本身并不包含输入和输出定义。ECMAScript 定义的只是这门语言的基础,而在此基础之上可以构建更完善的脚本语言。
Web 浏览器只是 ECMAScript 实现的宿主环境之一,其他宿主环境包括 Node 和 Adobe Flash。宿主环境不仅提供基本的 ECMAScript 实现,同时也会提供该语言的扩展(例如:DOM、BOM),这些扩展则利用 ECMAScript 的核心类型和语法提供更多更具体的功能。
JavaScript 是 Web 浏览器对 ECMAScript 标准的实现,ActionScript 是 Adobe Flash 对 ECMAScript 标准的实现。
文档对象模型(DOM)
文档对象模型(DOM,Document Object Model)是用于 HTML 的应用程序编程接口(API),它把整个页面映射为一个多层节点结构。HTML 页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。看下面这个 HTML 页面:
<code class="language-html hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>Sample Page<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>Hello World!<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>
通过 DOM 创建的这个表示文档的树形图,开发人员获得了控制页面内容和结构的主动权。借助 DOM 提供的 API,开发人员可以轻松自如地删除、添加、替换或修改任何节点。
由于 Netscape 和 微软实现的 DOM 互不兼容,负责制定 Web 通信标准的 W3C(World Wide Web Consortium,万维网联盟)开始着手规划 DOM。
DOM 1级:
- DOM 核心:映射文档结构,简化对文档中任意部分的操作和访问。
- DOM HTML:在 DOM 核心的基础上,添加了针对 HTML 的对象和方法。
DOM 2级:
- DOM 视图:定义了跟踪不同文档视图的接口。
- DOM 事件:定义了事件和事件处理的接口。
- DOM 样式:定义了基于 CSS 为元素应用样式的接口。
- DOM 遍历和范围:定义了遍历和操作文档树的接口。
DOM 3级:
- DOM 加载和保存:引入了以统一方式加载和保存文档的方法。
- DOM 验证:新增了验证文档的方法。
- DOM 核心扩展。
注意:
1. DOM 并不是只针对 JavaScript 的,很多别的语言也都实现了 DOM。
2. DOM 0级标准是不存在的,它只是 DOM 历史坐标中的一个参照点而已。
浏览器对象模型(BOM)
浏览器对象模型(BOM,Browser Object Model)是用于浏览器的应用程序编程接口(API),它把整个浏览器窗口映射为一个对象。从根本上讲,BOM 只处理浏览器窗口和框架,但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分,例如:
- 弹出新浏览器窗口的功能。
- 移动、缩放和关闭浏览器窗口的功能。
- 提供浏览器详细信息的 navigator 对象。
- 提供浏览器所加载页面的详细信息的 localtion 对象。
- 提供用户显示器分辨率详细信息的 screen 对象。
- 对 cookies 的支持。
- XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。
BOM 最让人头疼的是没有相关的规范和标准,每个浏览器都有独有的实现,这个问题在 HTML5 中得到了解决,HTML5 致力于把很多 BOM 功能写入正式规范。
小结
JavaScript 是一种专为网页交互而设计的脚本语言,由下列3个不同的部分组成:
- 核心(ECMAScript),由 ECMA-262 定义,提供核心语言功能。
- 文档对象模型(DOM),提供访问和操作网页内容的方法和接口。
- 浏览器对象模型(BOM),提供与浏览器交互的方法和接口。
JavaScript 的这3个组成部分,在当前5个主要浏览器(IE、FireFox、Chrome、Safari 和 Opera)中都得到了不同程度的支持。其中,所有浏览器对 ECMAScript 3 版本的支持大体上都还不错,而对 ECMAScript 5 的支持程度越来越高,但对 DOM 的支持则彼此相差比较多。对于已经正式纳入 HTML5 标准的 BOM 来说,尽管各浏览器都实现了某些众所周知的共同特性,但其他特性还是会因浏览器而异。