uTools-Manuals/docs/javascript/JavaScript_technologies_overview.html

<article id="wikiArticle">
<div></div>
<h2 id="介绍">介绍</h2>
<p>HTML是用来存储网页内容的，CSS是用来定义这些内容的显示样式的，而JavaScript是用来创造丰富的页面效果或者网页应用的。</p>
<p>但是，如果从浏览器的范畴去理解“JavaScript”这个术语，它包含了截然不同的两个方面。一个是JavaScript的核心语言（ECMAScript），另一个是DOM（文档对象模型）。</p>
<h2 id="JavaScript核心语言_(ECMAScript)">JavaScript核心语言 (ECMAScript)</h2>
<p>JavaScript的核心语言是<a href="/zh-CN/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a>。ECMAScript是由ECMA TC39委员会进行标准化的一门编程语言，其最新版本是<a class="external" href="http://www.ecma-international.org/ecma-262/7.0/" rel="noopener">ECMAScript 7.0</a>。</p>
<p>核心语言同样可以被用在非浏览器环境中，例如 <a class="external" href="http://nodejs.org/" rel="noopener">node.js</a>。</p>
<h3 id="哪些内容被纳入ECMAScript范畴中了？">哪些内容被纳入ECMAScript范畴中了？</h3>
<p><a href="/zh-CN/docs/JavaScript/Language_Resources" title="en-US/docs/JavaScript/Language_Resources">ECMAScript</a> 定义了：</p>
<ul>
<li>语法（解析规则，关键字，流程控制，对象初始化等）</li>
<li>错误处理机制（throw， try/catch 以及用户自定义错误类型的能力）</li>
<li>类型（布尔值，数字，字符串，函数，对象等）</li>
<li>全局对象。在浏览器环境中，这个全局对象就是 window 对象，但是 ECMAScript 只定义与浏览器无关的 APIs（例如，parseInt， parseFloat， decodeURI， encodeURI 等）</li>
<li>基于原型的继承机制</li>
<li>内置对象和函数（JSON，Math，Array.prototype 方法，Object introspection 方法等）</li>
<li>严格模式</li>
</ul>
<h3 id="浏览器支持">浏览器支持</h3>
<p>截止2014年8月份，主流浏览器的最新版本都已经支持ECMAScript 5.1，但是旧版本的浏览器大都仅支持ECMAScript 3和ECMAScript 5的部分标准。<a class="external" href="http://kangax.github.com/es5-compat-table/" rel="noopener">这里</a>是一些关于ECMAScript 5的浏览器支持情况的资料。如今，主流浏览器的最新版本已经支持 ECMAScript 6 的大部分标准。</p>
<h3 id="未来">未来</h3>
<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" rel="noopener">ECMAScript Harmony</a>的项目，像<code>const</code>关键字以及对象代理等内容都被涵盖其中。你可以在<a class="external" href="http://wiki.ecmascript.org/doku.php" rel="noopener">这里</a>跟踪这个项目的进展。ECMA 委员会已经在 2015年6月17号，正式发布了第6版标准。</p>
<h2 id="国际化API">国际化API</h2>
<p>由Ecma TC39进行标准化的<a class="external" href="http://ecma-international.org/ecma-402/1.0/" rel="noopener">ECMAScript国际化API规范</a>是在ECMAScript语言规范之上额外增加的。国际化API为JavaScript提供了规则排序（字符串比较），数字格式化，日期时间格式化等功能，能够让应用根据实际需要选择语言或功能。本标准在2012年12月份审批通过，可以在<a class="new" href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Intl" rel="nofollow">Intl对象</a>页面查看浏览器的实现情况。</p>
<h2 id="DOM_API">DOM API</h2>
<h3 id="WebIDL">WebIDL</h3>
<p><a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" rel="noopener">WebIDL</a>定义了ECMAScript和DOM技术之间的交互规范。</p>
<h3 id="DOM核心">DOM核心</h3>
<p>文档对象模型（DOM）是用来表达HTML，XHTML及XML文档中的对象或与其进行交互的<strong>约定</strong>，它是跨平台的，并且与<strong>编程语言无关</strong>。通过调用DOM树上对象的方法可以操纵这些对象。文档对象模型核心是由W3C进行标准化的，它将HTML和XML文档抽象成对象，并在其上定义接口以及操纵这些对象的机制，这些定义都是与编程语言无关的。</p>
<ul>
<li><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" rel="noopener">DOM核心</a>中定义了文档结构，树模型，以及DOM事件架构，包括：Node， Element， DocumentFragment， Document， DOMImplementation， Event， EventTarget等。</li>
<li><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html" rel="noopener">DOM事件</a>中包括DOM事件架构不太严格的定义以及一些特殊事件。</li>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html" rel="noopener">DOM 元素遍历</a> 以及 <a class="external" href="http://html5.org/specs/dom-range.html" rel="noopener" title="http://html5.org/specs/dom-range.html">DOM Range</a> 对象等其它内容。</li>
</ul>
<p>从ECMAScript的角度来看，DOM规范中定义的对象被称作“宿主对象”。</p>
<h3 id="HTML_DOM">HTML DOM</h3>
<div><a class="external" href="http://www.whatwg.org/html" rel="noopener">HTML</a>是一种网页标记语言，它在DOM核心抽象概念之上，还定义了元素的含义，比如元素的<code>className</code>属性以及 <a href="/zh-CN/docs/Web/API/Document/body" title="返回当前文档中的&lt;body&gt;元素或者&lt;frameset&gt;元素."><code>document.body</code></a>对象等。</div>
<div> </div>
<div><span style="line-height: inherit;">HTML规范同时还约束了元素之间的关系，例如无序列表<code>ul</code>元素中，只能以<code>li</code>元素作为子元素来表达列表项。还有就是禁止使用标准中未定义的元素和属性。</span></div>
<p><span style="line-height: inherit;">想了解更多关于<a href="/zh-CN/docs/DOM/document">Document对象</a>、<a href="/zh-CN/docs/DOM/window">Window对象</a>以及其他DOM元素的信息？请访问<a href="/zh-CN/docs/Gecko_DOM_Reference">Gecko DOM文档</a>。</span></p>
<h2 id="其他值得关注的API">其他值得关注的API</h2>
<ul>
<li>HTML标准中<a class="external" href="http://www.whatwg.org/html/#window" rel="noopener">Window</a>接口首次对setTimeout和setInterval函数进行定义。</li>
<li><a class="external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/" rel="noopener" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest.</a> 用来发起异步HTTP请求的API。</li>
<li><a class="external" href="http://dev.w3.org/csswg/cssom/" rel="noopener">CSS 对象模型</a> 用于将CSS规则抽象成对象。</li>
<li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/" rel="noopener">WebWorkers.</a> 是用来并行计算的API。</li>
<li><a class="external" href="http://www.whatwg.org/C/#network" rel="noopener">WebSockets.</a> 是用来实现双向Socket通信的API。</li>
<li><a class="external" href="http://www.whatwg.org/html/#2dcontext" rel="noopener" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context.</a> canvas元素的绘图API。</li>
</ul>
<h2 id="浏览器支持_2">浏览器支持</h2>
<div>相信每个Web开发人员都曾经有过“<a class="external" href="http://ejohn.org/blog/the-dom-is-a-mess/" rel="noopener">DOM就是一团糟</a>”的体验，因为浏览器对DOM的支持千差万别。造成这种局面的主要原因是在DOM规范中对于很多重要的DOM特性并未清晰定义，另外，一些浏览器也增加了不兼容的特性（例如Intenet Explorer的事件模型）。自2011年6月以来，W3C，特别是WHATWG都在对旧特性进行细节定义，以提高互用性。浏览器也基于这些更加详细的规范提升它们的实现方式。</div>
<p><span style="line-height: inherit;">要实现跨浏览器的兼容性，一个常见的但可能不是最可靠的方式就是使用JavaScript库。这些库对于DOM特性进行抽象，以确保它们所提供的API在不同的浏览器上行为一致。被广泛采用的框架有</span><a class="external" href="http://jquery.com/" rel="noopener" style="line-height: inherit;">jQuery</a>，<a class="external" href="http://www.prototypejs.org/" rel="noopener" style="line-height: inherit;">prototype</a><span style="line-height: inherit;">和</span><a class="external" href="http://developer.yahoo.com/yui/" rel="noopener" style="line-height: inherit;">YUI</a>。</p>
</article>