files/zh-tw/web/javascript/javascript_technologies_overview/index.html


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

---
title: JavaScript 技術概觀
slug: Web/JavaScript/JavaScript_technologies_overview
tags:
  - DOM
  - JavaScript
translation_of: Web/JavaScript/JavaScript_technologies_overview
---
<p>{{JsSidebar("Introductory")}}</p>

<h2 id="簡介">簡介</h2>

<p>在網頁中，HTML 存放網頁的內容與格式，CSS 註記內容的呈現樣式；而 JavaScript 則用來產生豐富的效果或網頁應用程式。然而，在網頁瀏覽器中通稱的「JavaScript」是由眾多截然不同的要素所構成。其中之一是核心語言（ECMAScript），另一個則是 DOM（文件物件模型，Document Object Model）。</p>

<h2 id="JavaScript_的核心語言（ECMAScript）">JavaScript 的核心語言（ECMAScript）</h2>

<p>JavaScript 的核心語言是由 ECMA TC-39 委員會統一標準，並且命名為 <a href="/zh-TW/JavaScript/Language_Resources" title="en/JavaScript/Language_Resources">ECMAScript</a> 。隨著最新版本的規格 <a class="external" href="http://wiki.ecmascript.org/lib/exe/fetch.php?id=start&amp;cache=cache&amp;media=resources:tc39-2010-062-rev5p.pdf">ECMAScript 5</a> 在 2011 年 3 月推出，大部分最新的網頁瀏覽器實作了 ECMAScript 3 與部分的 ECMAScript 5。</p>

<h3 id="ECMAScript_包含了什麼？">ECMAScript 包含了什麼？</h3>

<p><a href="/zh-TW/JavaScript/Language_Resources" title="en/JavaScript/Language_Resources">ECMAScript</a> 主要定義了以下的內容：</p>

<ul>
 <li>語言的語法（解析規則，關鍵字，流程控制，物件的初始化… ）</li>
 <li>錯誤處理機制 （throw、 try/catch、 允許自訂錯誤型別）</li>
 <li>型態（布林代數、數字、字串、函數、物件…）</li>
 <li>全域物件。在瀏覽器環境中，此物件即為 window 物件。許多函數皆包含在此物件下（parseInt, parseFloat, decodeURI, encodeURI…）</li>
 <li>一種基於原型（Prototyping）的繼承機制</li>
 <li>內建的物件與函數 （JSON、Math、Array.prototype 方法、物件自識方法…）</li>
 <li>嚴格模式（Strict mode）</li>
</ul>

<h3 id="瀏覽器支援">瀏覽器支援</h3>

<p>根據以前的經驗，ECMAScript 的功能都有良好且互通的支援。截至 2011 年 6 月，ECMAScript 5 的支援在不同瀏覽器實作之間存在差異。<a class="external" href="http://kangax.github.com/es5-compat-table/" title="http://kangax.github.com/es5-compat-table/">有些文件</a>整理了各瀏覽器對 ECMAScript 5 的支援情形。</p>

<h3 id="未來發展">未來發展</h3>

<p>自 1999 年 ECMA-262 第三版發行後，原先計畫將在 ECMAScript 的第四版（<strong>ECMAScript 4</strong> 或 <strong>ES4</strong>）進行首次的重大改動。然而，2008 年 8 月後，ECMAScript 第四版的提案已被縮減並編列至一個代號為 <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript#ECMAScript_Harmony">ECMAScript Harmony</a> 的計畫，此計畫中定義了代理（Proxy）與關鍵字 <code>const<code> </code>等新要素。</code>ECMAScript <code>的發展可以參考</code><a class="external" href="http://wiki.ecmascript.org/doku.php" title="http://wiki.ecmascript.org/doku.php">這裡</a><code>。</code></p>

<h2 id="DOM（文件物件模型）">DOM（文件物件模型）</h2>

<h3 id="WebID">WebID</h3>

<p><a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL 規格書</a> 是 DOM 技術與 ECMAScript 之間相互黏合的基礎。</p>

<h3 id="DOM_核心">DOM 核心</h3>

<p>W3C 統一規範了文件物件模型的核心部分。它定義了無關語言而將 HTML 與 XML 文件抽象化為物件的介面，以及對抽象化物件進行處理的機制。在 DOM 的定義中包含：</p>

<ul>
 <li><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core </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" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a> 中對 DOM 事件結構（DOM Event Architecture）和特定事件的廣義定義。</li>
 <li>其他如 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> 和 <a class="external" href="http://html5.org/specs/dom-range.html" title="http://html5.org/specs/dom-range.html">DOM Range</a>。</li>
</ul>

<p>以 ECMAScript 的觀點來看，DOM 規範所定義的物件被稱為宿主物件（Host objects）  。</p>

<h3 id="HTML_DOM">HTML DOM</h3>

<p>網頁標記語言 <a class="external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a> 是依據 DOM 來規格化。在 DOM 核心中，定義了虛擬概念的分層，而 HTML 也定義了元素的意義。 HTML DOM 包含了 HTML 元素的 <code>className 屬性<code>與</code>諸如 </code>{{ domxref("document.body") }} 的 API。</p>

<p>HTML 的規格書也定義了在文件上的一些限制；例如，他要求所有 <code>ul</code> 元素（代表無順序編號的清單）的子元素必須是 <code>li 元素（代表清單</code>中的項目）。而未在標準中定義的元素和屬性通常在規格中被禁用。</p>

<h2 id="其他重要的_API">其他重要的 API</h2>

<ul>
 <li>setTimeout 和 setInterval 函數首次納入 HTML 標準中的 <a class="external" href="http://www.whatwg.org/html/#window" title="http://www.whatwg.org/html/#window">Window</a> 介面</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 請求的 API。</li>
 <li><a class="external" href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a>：CSSOM 用來將 CSS 的規則轉換為物件。</li>
 <li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers</a>：允許平行計算的 API。</li>
 <li><a class="external" href="http://www.whatwg.org/C/#network">WebSockets</a>：允許低階雙向溝通的 API。</li>
 <li><a class="external" href="http://www.whatwg.org/html/#2dcontext" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a>：canvas 元素的繪圖 API。</li>
</ul>

<h2 id="瀏覽器支援_2">瀏覽器支援</h2>

<p>每個網頁開發者都曾經體會過 <a class="external" href="http://ejohn.org/blog/the-dom-is-a-mess/">一團混亂的 DOM 支援狀況</a>。某些功能上不同瀏覽器的支援可能差異很大，因為過去重要的 DOM 功能都沒有明確的規範，進而使不同網頁瀏覽器對相同的使用情境實踐了互不相容的功能（像是 Internet Explorer 的事件模型）。最近（截至 2011年6月），由 W3C 與（特別是）WHATWG 對舊功能重新進行詳盡的定義以提升互通性成為了趨勢 。為了跟進這個趨勢，許多網頁瀏覽器也根據這些新規格改進它們的實作。</p>

<p>雖然並未完全可靠，使用 JavaScript 函式庫是解決跨瀏覽器相容問題的最普遍方式。 這些函式庫將 DOM 的功能抽象化，確保其 API 在不同的瀏覽器中能以相似的方式運作。廣為被使用的框架包括<a class="external" href="http://jquery.com/"> jQuery</a>、<a class="external" href="http://www.prototypejs.org/">prototype</a> 和 <a class="external" href="http://developer.yahoo.com/yui/">YUI</a>。</p>