1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
---
title: JavaScript 技术概览
slug: Web/JavaScript/JavaScript_technologies_overview
tags:
- DOM
- JavaScript
- 入门
- 新手
translation_of: Web/JavaScript/JavaScript_technologies_overview
---
<div>{{JsSidebar("Introductory")}}</div>
<h2 id="介绍">介绍</h2>
<p><a href="/zh-CN/docs/Web/HTML">HTML</a> 定义网页的结构与内容，<a href="/zh-CN/docs/Web/CSS">CSS</a> 定义其格式与样式，而 <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a> 则为网页增加可交互性，创作功能丰富的 Web 应用。</p>
<p>但是，如果从浏览器的范畴去理解“JavaScript”这个术语，它包含了截然不同的两个方面。一方面是 JavaScript 的核心语言（ECMAScript），另一方面是大量的 <a href="/zh-CN/docs/Web/Reference/API">Web API</a> 们，包括 DOM（文档对象模型）。</p>
<h2 id="JavaScript_核心语言（ECMAScript）">JavaScript 核心语言（ECMAScript）</h2>
<p>JavaScript 的核心语言是 <a href="/zh-CN/docs/JavaScript/Language_Resources">ECMAScript</a>。ECMAScript 是一门由 ECMA TC39 委员会标准化的编程语言。</p>
<p>该核心语言同样可以被用在非浏览器环境之中，例如 <a href="https://nodejs.org/">node.js</a>。</p>
<h3 id="哪些内容被纳入_ECMAScript_范畴之中？">哪些内容被纳入 ECMAScript 范畴之中？</h3>
<p>除却一些其他元素，ECMAScript 定义了：</p>
<ul>
<li>语法（解析规则，关键词，流程控制，对象初始化，等等）</li>
<li>错误处理机制（{{jsxref("Statements/throw", "throw")}}、 {{jsxref("Statements/try...catch", "try...catch")}}，以及创建用户定义{{jsxref("Error", "错误")}}类型的能力）</li>
<li>类型（布尔值，数字，字符串，函数，对象，等等）</li>
<li>全局对象。在浏览器环境中，这个全局对象就是 {{domxref("Window", "window")}} 对象，但是 ECMAScript 只定义那些不特定于浏览器的 API（例如，{{jsxref("parseInt")}}、{{jsxref("parseFloat")}}、{{jsxref("decodeURI")}}、{{jsxref("encodeURI")}}，等等）</li>
<li>基于原型的继承机制</li>
<li>内置对象和函数（{{jsxref("JSON")}}、{{jsxref("Math")}}、{{jsxref("Array.prototype", "Array.prototype", "Methods")}} 方法、{{jsxref("Object", "对象")}}内省（自检、自我检查，introspection）方法，等等）</li>
<li><a href="/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
</ul>
<h3 id="浏览器支持">浏览器支持</h3>
<p>As of October 2016, the current versions of the major Web browsers implement <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> and <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla">ECMAScript 2015</a>, but older versions (still in use) implement ECMAScript 5 only.</p>
<p>截止 2014 年 8 月份，主流浏览器的最新版本都已经支持 ECMAScript 5.1，但是旧版本的浏览器大多仅支持 ECMAScript 3 和 ECMAScript 5 的部分标准。<a href="http://kangax.github.com/es5-compat-table/">这里</a>是一些关于 ECMAScript 5 的浏览器支持情况的资料。如今，主流浏览器的最新版本已经支持 ECMAScript 6 的大部分标准。</p>
<h3 id="未来">未来</h3>
<p>The major 6th Edition of ECMAScript was officially approved and published as a standard on June 17, 2015 by the ECMA General Assembly. Since then ECMAScript Editions are published on a yearly basis.</p>
<p>ECMA-262（<strong>ECMAScript 4</strong> 或者 <strong>ES4</strong>）第4版的提议本应成为自1999年第3版发布以来的一次重要更新，但是在2008年8月份，ECMAScript第4版被回退到一个代号为<a class="external" href="http://en.wikipedia.org/wiki/ECMAScript#ECMAScript_Harmony">ECMAScript Harmony</a>的项目，像<code>const</code>关键字以及对象代理等内容都被涵盖其中。你可以在<a href="http://wiki.ecmascript.org/doku.php">这里</a>跟踪这个项目的进展。ECMA 委员会已经在 2015年6月17号，正式发布了第6版标准。</p>
<h2 id="国际化_API">国际化 API</h2>
<p>由 ECMA TC39 进行标准化的<a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript 国际化 API 规范</a>是在 ECMAScript 语言规范之上额外增加的。国际化 API 为 JavaScript 提供了国际化的规则排序（字符串比较）、数字格式化、日期时间格式化等功能，能够让应用选择语言，并根据实际需要选用功能。本标准在 2012 年 12 月审批通过，可以在 MDN 的 {{jsxref("Intl")}} 页面查看各个浏览器对其的实现情况。The Internationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.</p>
<h2 id="DOM_API">DOM API</h2>
<h3 id="WebIDL">WebIDL</h3>
<p><a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL 规范</a>定义了 ECMAScript 和 DOM 技术之间的交互规范。</p>
<h3 id="DOM_的核心">DOM 的核心</h3>
<p>文档对象模型（DOM）是用来表达 HTML、XHTML 及 XML 文档中的对象或与其进行交互的<strong>约定</strong>，它是跨平台的，并且与<strong>编程语言无关</strong>。通过调用<strong>DOM树</strong>上对象的方法可以操纵这些对象。文档对象模型核心是由 {{glossary("W3C")}} 进行标准化的，它将 HTML 和 XML 文档抽象成对象，并在其上定义接口以及操纵这些对象的机制，DOM 定义的元素有：</p>
<ul>
<li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM核心</a>中定义了文档结构，树模型，以及DOM事件架构，包括： {{domxref("Node")}}、{{domxref("Element")}}、{{domxref("DocumentFragment")}}、{{domxref("Document")}}、{{domxref("DOMImplementation")}}、{{domxref("Event")}}、{{domxref("EventTarget")}} 等等…</li>
<li><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM事件</a>中包括对于 DOM 事件架构的一个不太严格的定义，以及一些特殊事件。</li>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM 元素遍历</a>以及 <a class="external" href="http://html5.org/specs/dom-range.html" title="http://html5.org/specs/dom-range.html">DOM 范围</a>对象等其它内容。</li>
</ul>
<p>从 ECMAScript 的角度来看，DOM 规范中定义的对象被称作“宿主对象”。</p>
<h3 id="HTML_DOM">HTML DOM</h3>
<p><a href="http://www.whatwg.org/html">HTML</a>，Web 的标记语言，是根据 DOM 定义的。位于 DOM 核心抽象概念之上，HTML 还定义了元素的意义。比如元素的 <code>className</code> 属性以及例如 {{domxref("document.body")}} 这样的 API。</p>
<p>HTML规范同时还约束了元素之间的关系，例如无序列表 {{htmlelement("ul")}} 元素中，只能以 {{htmlelement("li")}} 元素作为子元素来表达列表项。还有就是禁止使用标准中未定义的元素和属性。</p>
<p>想了解更多关于 {{domxref("Document")}} 对象、{{domxref("Window")}} 对象以及其他DOM元素的信息？请访问 MDN 的 <a href="/zh-CN/docs/Web/API/Document_Object_Model">DOM 文档</a>。</p>
<h2 id="其他值得关注的_API">其他值得关注的 API</h2>
<ul>
<li>{{domxref("WindowTimers.setTimeout", "setTimeout")}} 和 {{domxref("WindowTimers.setInterval", "setInterval")}} 函数最早被定义在 HTML 标准的 {{domxref("Window")}} 接口下。</li>
<li><a class="external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest</a> 使得发起异步 HTTP 请求成为可能。</li>
<li><a class="external" href="http://dev.w3.org/csswg/cssom/">CSS 对象模型</a> 将 CSS 规则抽象成对象。</li>
<li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers</a> 允许进行并行计算。</li>
<li><a class="external" href="http://www.whatwg.org/C/#network">WebSockets</a> 允许进行底层双向通信。</li>
<li><a class="external" href="http://www.whatwg.org/html/#2dcontext" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> {{htmlelement("canvas")}} 元素的绘图 API。</li>
</ul>
<h2 id="DOM_浏览器支持">DOM 浏览器支持</h2>
<div>相信每个 Web 开发人员都曾经有过“<a href="http://ejohn.org/blog/the-dom-is-a-mess/">DOM就是一团糟</a>”的体验，因为浏览器对 DOM 的支持千差万别。造成这种局面的主要原因是DOM 规范并未清晰定义很多重要的 DOM 特性。另外，一些浏览器也增加了不兼容的特性（例如 Intenet Explorer 的事件模型）。自 2011 年 6 月以来，W3C，特别是 WHATWG 都在对旧特性进行细节定义，以提高互通性。浏览器也在基于这些更加详细的规范改善它们的实现方式。</div>
<p>要实现跨浏览器的兼容性，一个常见的但可能不是最可靠的方式就是使用 JavaScript 库。这些库对于 DOM 特性进行抽象，以确保它们所提供的 API 在不同的浏览器上行为一致。被广泛采用的框架有 <a class="external" href="http://jquery.com/" style="line-height: inherit;">jQuery</a>，<a class="external" href="http://www.prototypejs.org/">prototype</a> 和 <a class="external" href="http://developer.yahoo.com/yui/">YUI</a>。</p>
|
