recursal/MDN huggingface dataset:
Node.innerText
==============

概述
--

**`Node.innerText`** 是一個代表節點及其後代之「已渲染」（rendered）文字內容的屬性。如同一個存取器，`Node.innerText` 近似於使用者利用游標選取成高亮後複製至剪貼簿之元素的內容。此功能最初由 Internet Explorer 提供，並在被所有主要瀏覽器採納之後，於 2016 年正式成為 HTML 標準。

`Node.textContent` (en-US) 屬性是一個相似的選擇，但兩者之間仍有非常不同的差異。

規範
--

| Specification |
| --- |
| HTML Standard # the-innertext-idl-attribute |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `HTMLElement.outerText` (en-US)
* `Element.innerHTML` (en-US)
Event.defaultPrevented
======================

概述
--

回傳一個布林值，表示事件的預設行為是否被取消，也就是事件物件是否曾執行 `preventDefault()` 方法。

**備註：** You should use this instead of the non-standard, deprecated `getPreventDefault()` method (see Firefox bug 691151).

語法
--


```js
bool = event.defaultPrevented;
```

範例
--


```js
if (e.defaultPrevented) {
  /\* the default was prevented \*/
}
```

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-defaultprevented① |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.bubbles
=============

### 概述

表示事件是否會向上冒泡傳遞。

### 語法
```

var bool = event.bubbles;
```


回傳一個布林值，若事件會向上冒泡傳遞則回傳 `true`。

### 備註

Only certain events can bubble. Events that do bubble have this property set to `true`. You can use this property to check if an event is allowed to bubble or not.

### 範例


```js
function goInput(e) {
  // checks bubbles and
  if (!e.bubbles) {
    // passes event along if it's not
    passItOn(e);
  }
  // already bubbling
  doOutput(e);
}
```

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-bubbles③ |
Event.currentTarget
===================

`Event` 介面的唯讀屬性 **`currentTarget`** 會標明事件指向（current target）、還有該事件所遍歷的 DOM。屬性總會指向當時處理該事件的事件監聽器所註冊的 DOM 物件，而 `event.target` 屬性則是永遠指向觸發事件的 DOM 物件。

範例
--

`event.currentTarget` 在把相同的事件監聽器，附加到多個元素時，會出現很有趣的事情：


```js
function hide(e) {
  e.currentTarget.style.visibility = "hidden";
  // 在這個函式用於事件監聽器時： this === e.currentTarget
}

var ps = document.getElementsByTagName("p");

for (var i = 0; i < ps.length; i++) {
  ps[i].addEventListener("click", hide, false);
}

// 單擊四周的話 p 元素就會消失
```

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-currenttarget② |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* 事件指向的比較 (en-US)
Event.preventDefault()
======================

概要
--

如果事件可以被取消，就取消事件（即取消事件的預設行為）。但不會影響事件的傳遞，事件仍會繼續傳遞。

語法
--


```js
event.preventDefault();
```

範例
--

Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:


```html
<!doctype html>
<html>
  <head>
    <title>preventDefault example</title>
  </head>

  <body>
    <p>Please click on the checkbox control.</p>
    <form>
      <label for="id-checkbox">Checkbox</label>
      <input type="checkbox" id="id-checkbox" />
    </form>
    <script>
 document.querySelector("#id-checkbox").addEventListener(
 "click",
 function (event) {
 alert("preventDefault will stop you from checking this checkbox!");
 event.preventDefault();
 },
 false,
 );
 </script>
  </body>
</html>
```


You can see `preventDefault` in action here.

The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault().
```

<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>

<script>
```


```
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 < 97 || charCode > 122) {
      evt.preventDefault();
      alert(
        "Please use lowercase letters only." +
          "\n" +
          "charCode: " +
          charCode +
          "\n",
      );
    }
  }
}
```


```
</script>
</head>
<body onload="Init ()">
    <p>Please enter your name using lowercase letters only.</p>
    <form>
        <input type="text" id="my-textbox" />
    </form>
</body>
</html>
```


Here is the result of the preceding code:

備註
--

Calling `preventDefault` 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.

**備註：** As of Gecko 6.0, calling `preventDefault()` causes the `event.defaultPrevented` property's value to become `true`.

你可以查看 `Event.cancelable` (en-US) 屬性來檢查事件是否能夠被取消。對一個不能被取消的事件呼叫 `preventDefault()` 方法是沒有任何效果的。

`preventDefault()` 方法不會停止事件傳遞。若要停止事件繼續傳遞，可以使用 `Event.stopPropagation()` 方法。

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-preventdefault③ |
Event.target
============

指向最初觸發事件的 DOM 物件。與 `event.currentTarget` 屬性不同的是，`event.currentTarget` 屬性總會指向目前於冒泡或捕捉階段正在處理該事件之事件處理器所註冊的 DOM 物件，而 `event.target` 屬性則是永遠指向觸發事件的 DOM 物件。

語法
--
```

theTarget = event.target
```

範例
--

The `event.target` property can be used in order to implement **event delegation**.


```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 <li> element
  // This is different than e.currentTarget which would refer to the parent <ul> in this context
  e.target.style.visibility = "hidden";
}

// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener("click", hide, false);
```

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Compatibility notes
-------------------

On IE 6-8 the event model is different. Event listeners are attached with the non-standard `EventTarget.attachEvent` (en-US) method. In this model, the event object has a `Event.srcElement` (en-US) property, instead of the `target` property, and it has the same semantics as `event.target`.


```js
function hide(e) {
  // Support IE6-8
  var target = e.target || e.srcElement;
  target.style.visibility = "hidden";
}
```

參見
--

* Comparison of Event Targets (en-US)
Event.isTrusted
===============

`Event` 介面的 `isTrusted` 唯讀屬性為一個布林值，若事件物件是由使用者操作而產生，則 `isTrusted` 值為 `true`。若事件物件是由程式碼所建立、修改，或是透過 `EventTarget.dispatchEvent()` 來觸發，則 `isTrusted` 值為 `false`。

語法
--
```

var bool = event.isTrusted;
```

範例
--
```

 if (e.isTrusted) {
     /* The event is trusted. */
 } else {
     /* The event is not trusted. */
 }
```

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-istrusted① |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event()
=======

**`Event()`** constructor 能用來建立一個 `事件` 。

語法
--
```

event = new Event(typeArg, eventInit);
```

### 參數

*typeArg*

為一 `DOMString` ，用來表示事件名稱。

*eventInit*選擇性

一個 `EventInit` object，包含以下欄位

| 參數 | 可選 | 默認值 | 類型 | 說明 |
| --- | --- | --- | --- | --- |
| `"bubbles"` | ● | `false` | `Boolean` | 表示該事件是否懸浮（bubble up）。 |
| `"cancelable"` | ● | `false` | `Boolean` | 表示該事件是否已取消（canale）。 |

範例
--


```js
// 建立一個 bubbles up 、並未被取消的事件 「look」 。
var ev = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(ev);
```

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* `Event`
Event.type
==========

**`Event.type`** 唯讀屬性會回傳一個代表此事件物件類型的字串。`Event.type` 屬性是於事件物件建立時被設定，而其屬性值－事件類型名稱也常被當作是特定的事件。

傳至 `EventTarget.addEventListener()` 和 `EventTarget.removeEventListener()` (en-US) 方法中，代表事件類型的參數 *`event`* 是不區分大小寫的。

可用的事件類型，可參考 event reference。

語法
--
```

event.type
```

範例
--


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Event.type Example</title>

    <script>
 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
 </script>
  </head>

  <body>
    <p>Press any key or click the mouse to get the event type.</p>
    <p>Event type: <span id="Etype" style="color:red">-</span></p>
  </body>
</html>
```

### Result

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |
Event.timeStamp
===============

說明
--

回傳事件建立的時間（單位是毫秒；從 epoch 開始計算）。

Syntax
------
```

event.timeStamp
```

範例
--
```

var number = event.timeStamp;
```


下面是一個較為完整的範例：


```html
<html>
  <head>
    <title>timeStamp example</title>

    <script type="text/javascript">
 function getTime(event) {
 document.getElementById("time").firstChild.nodeValue = event.timeStamp;
 }
 </script>
  </head>

  <body onkeypress="getTime(event)">
    <p>Press any key to get the current timestamp for the onkeypress event.</p>
    <p>timeStamp: <span id="time">-</span></p>
  </body>
</html>
```

注意
--

這個 property 僅在瀏覽器支持該事件才會有用。

詳細資料
----

* timestamp
Event.stopImmediatePropagation()
================================

除了停止事件繼續捕捉或冒泡傳遞外，也阻止事件被傳入同元素中註冊的其它相同事件類型之監聽器。

語法
--
```

event.stopImmediatePropagation();
```

備註
--

如果一個元素中註冊了多個相同事件類型的監聽器，監聽器將會按照註冊的先後順序被呼叫。在其中任何一個監聽器執行的期間，若是呼叫了事件物件的 `stopImmediatePropagation()` 方法，則接下來尚未執行的監聽器皆不會被呼叫。

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stopimmediatepropagation① |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.stopPropagation()
=======================

`Event` 介面的 **`stopPropagation()`** 方法可阻止當前事件繼續進行捕捉（capturing）及冒泡（bubbling）階段的傳遞。

語法
--
```

event.stopPropagation();
```

範例
--

請參考範例五：事件傳遞 (en-US)章節中關於此方法與 DOM 事件傳遞的更詳細範例。

規範
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stoppropagation① |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* See the DOM specification for the explanation of event flow. (The DOM Level 3 Events draft has an illustration.)
* `Event.preventDefault()` is a related method that prevents the default action of the event from happening.
WebGL tutorial
==============

WebGL 讓網頁內容可以使用一個基於 OpenGL ES 2.0 的 API 以在 HTML `<canvas>`中執行 3D 渲染，且瀏覽器無需使用任何 plug-in。WebGL programs 由 JavaScript 撰寫的指令碼以及透過電腦的 Graphics Processing Unit (GPU)上運行的特殊效果程式碼(shader code)組成。WebGL 元件可與其他 HTML 元件混合，並與該頁的其他部分或該頁背景組合使用。

本教學描述如何使用 `<canvas>` 元件描繪 WebGL 圖像/圖形, 從基礎開始。提供的範例將讓你對於可以用 WebGL 做到什麼有清楚的概念，並提供程式碼片段讓你可以著手建立自己的內容。

開始之前
----

使用`<canvas>` 元件不會非常困難，但你需要有對HTML 與 JavaScript 的基礎認識。`<canvas>` 元件跟 WebGL 在某些舊瀏覽器中不支援，但近來的每個主流瀏覽器都有支援。我們用 JavaScript context object 在 canvas 繪製圖形，這樣圖形就能動態(on the fly)產生。

教學文件
----

WebGL 新手上路

如何建置 WebGL 環境

加入 2D 內容至 WebGL 環境

如何用 WebGL 渲染簡單平面的形狀

使用 shaders 在 WebGL 上色 (en-US)

示範如何使用 shaders 在圖形上上色

WebGL 產生動畫 (en-US)

示範如何旋轉與移動物件以製作簡單的動畫

建立三維物件 (en-US)

示範如何創造並讓 3D 物件(立方體)有動畫

在物件表面貼上材質 (en-US)

示範如何在物件的表面上貼上材質圖

模擬打光 (en-US)

如何在 WebGL 環境模擬打光效果

讓材質產生動畫 (en-US)

如何移動材質圖，在範例中是將 Ogg 影片 貼到一個旋轉中的立方體
WebGL 入門
========

* 次頁 »

WebGL 讓網頁內容能藉由一種基於 OpenGL ES 2.0 的 API 的幫助，於支援此 API 的瀏覽器環境中，不需使用外掛程式就能在 HTML 的 `canvas` 元素中實現二維及三維渲染。 WebGL 程式包含了由 JavaSrcipt 及著色器(GLSL)撰寫的控制碼以及在電腦的圖形處理器( GPU )上執行的特效程式碼(著色器程式碼)。WebGL 元素可以加入其他 HTML 元素之中並與網頁或網頁背景的其他部分混合。

這篇文章將會向你介紹 WebGL 的基礎。這篇文章假設你已經對於三維圖學涉及的數學有所了解，並且它將不會被佯裝為三維圖學的教材。在我們的學習區域內有初學者指南讓你完成編程任務：Learn WebGL for 2D and 3D graphics.

在此教學文件中的程式碼範例都能在 webgl-examples GitHub repository 之中找到。

準備三維渲染
------

首先你需要一個 canvas 元素讓 WebGL 進行渲染。下面的 HTML 定義的 canvas 元素供後續的範例繪製。


```html
<body>
  <canvas id="glCanvas" width="640" height="480"></canvas>
</body>
```

### 準備 WebGL 背景資料

**備註：** 背景資料為 Context 翻譯而來

在下面的 JavaScript 程式碼，當指令完成讀取後會執行 `main()` 函式。目的是為了設定 WebGL 背景資料並且開始渲染內容。


```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);
}
```


在此我們做的第一件事是取得 canvas 元素的參考，並存入 canvas 變數中。

一旦我們取得了 canvas ，我們透過呼叫 getContext (en-US) 並傳入 `"webgl"` 字串來取得 WebGLRenderingContext (en-US)。若瀏覽器不支援 webgl `getContext` 會回傳 `null` 同時會顯示訊息給使用者並且離開。

如果成功初始化， `gl` 就會成為一個 WebGL 背景資料的參考。在這裡我們設置清除色為黑色，並透過該色清除 context (用背景色重新繪製 canvas )。

至此，你已經有足夠初始化 WebGL 背景資料的程式碼，並且準備好了等待接收內容的容器。

檢視完整程式碼 | 開啟新頁面來檢視結果

亦可參考
----

* An introduction to WebGL: 由 Luz Caballero 撰寫，並出版在 dev.opera.com。 這篇文章點出了 WebGL 的意義，解釋了其運作(包含渲染管路的觀念)，並介紹了一些 WebGL libraries。
* WebGL Fundamentals
* An intro to modern OpenGL: 由 Joe Groff 撰寫的一系列關於 OpenGL 的好文章，提供了 OpenGL 清楚的簡介，從其歷史到重要的圖像管路概念，以及一些展示其原理的範例。如果你完全不懂 OpenGL，這將是一個好的入門介紹。
* 次頁 »
XMLHttpRequest.setRequestHeader()
=================================

`XMLHttpRequest` 物件中的 **`setRequestHeader()`** 方法用來設定 HTTP 的表頭請求。當使用 `setRequestHeader()` 的時候，必須在 `open()` (en-US) 之後呼叫，同時也必須在 `send()` (en-US) 之前呼叫。如果這個方法被呼叫了許多次，且設定的表頭是一樣的，那所有設定的值會被合併成一個單一的表頭請求。

在第一次呼叫 `setRequestHeader()` 之後的每一次的呼叫，都會把給定的文字附加在已存在的表頭內容之後。

If no `Accept` header has been set using this, an `Accept` header with the type `"*/*"` is sent with the request when `send()` (en-US) is called.

基於安全的理由，有些表頭只有使用者代理器可以使用。這些表頭包含了： forbidden header names (en-US) 和 forbidden response header names (en-US).

**備註：** For your custom fields, you may encounter a "**not allowed by Access-Control-Allow-Headers in preflight response**" exception when you send requests across domains. In this situation, you need to set up the `Access-Control-Allow-Headers` (en-US) in your response header at server side.

語法
--
```

XMLHttpRequest.setRequestHeader(header, value)
```

### 參數

`header`

想要設定所屬值的表頭名稱。

`value`

用來設定表頭本身的值。

### 回傳值

未定義。

規範
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-setrequestheader()-method |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參見
--

* 使用 XMLHttpRequest
* HTML in XMLHttpRequest (en-US)
XMLHttpRequest.status
=====================

**XMLHttpRequest.status** 屬性根據 XMLHttpRequest 的回應傳回數值化的狀況編碼。狀況編碼為一正短整數（`unsigned short）。`Before the request is complete, the value of `status` will be `0`. It is worth noting that browsers report a status of 0 in case of XMLHttpRequest errors too.

The status codes returned are the standard HTTP status codes. For example, `status` `200` denotes a successful request. If the server response doesn't explicitly specify a status code, `XMLHttpRequest.status` will assume the default value of `200`.

Example
-------


```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
 \*/
```

Specifications
--------------

| Specification |
| --- |
| XMLHttpRequest Standard # the-status-attribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* List of HTTP response codes
XMLHttpRequest()
================

**`XMLHttpRequest()`** 建構式會建立一個新的 `XMLHttpRequest` 物件。

關於如何使用 `XMLHttpRequest` 物件的細節，請參照：使用 XMLHttpRequest。

語法
--


```js
const request = new XMLHttpRequest();
```

### 參數

無。

### 回傳值

將回傳一個新的 `XMLHttpRequest` 物件。`XMLHttpRequest` 物件在呼叫`send()` (en-US) 送出要求到伺服器之前，至少要藉著呼叫 `open()` (en-US) 來準備好必需的設定。

非標準的 Firefox 語法
---------------

Firefox 16 added a non-standard parameter to the constructor that can enable anonymous mode (see Firefox bug 692677). Setting the `mozAnon` flag to `true` effectively resembles the `AnonXMLHttpRequest()` constructor described in older versions of the XMLHttpRequest specification.


```js
const request = new XMLHttpRequest(paramsDictionary);
```

### Parameters (non-standard)

`objParameters`

There are two flags you can set:

`mozAnon`

Boolean: Setting this flag to `true` will cause the browser not to expose the origin (en-US) and user credentials when fetching resources. Most important, this means that cookies will not be sent unless explicitly added using setRequestHeader.

`mozSystem`

Boolean: Setting this flag to `true` allows making cross-site connections without requiring the server to opt-in using CORS. *Requires setting `mozAnon: true`, i.e. this can't be combined with sending cookies or other user credentials. This only works in privileged (reviewed) apps (Firefox bug 692677); it does not work on arbitrary webpages loaded in Firefox*


參見
--

* 使用 XMLHttpRequest
* HTML in XMLHttpRequest (en-US)
XMLHttpRequest.withCredentials
==============================

**`XMLHttpRequest.withCredentials`** 屬性是一個 `Boolean` 型別，它指出無論是否使用 `Access-Control` 標頭在跨站的要求上，都應該使用像 Cookies、Authorization 標頭或 TLS 用戶端憑證來進行驗證。在相同來源的要求設定 `withCredentials` 沒有任何效果。

In addition, this flag is also used to indicate when cookies are to be ignored in the response. The default is `false`. `XMLHttpRequest` from a different domain cannot set cookie values for their own domain unless `withCredentials` is set to `true` before making the request. The third-party cookies obtained by setting `withCredentials` to true will still honor same-origin policy and hence can not be accessed by the requesting script through document.cookie (en-US) or from response headers.

**備註：** 永遠不會影響到同源請求。

**備註：** `XMLHttpRequest` responses from a different domain *cannot* set cookie values for their own domain unless `withCredentials` is set to `true` before making the request, regardless of `Access-Control-` header values.

範例
--


```js
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);
```

規格
--

| Specification |
| --- |
| XMLHttpRequest Standard # the-withcredentials-attribute |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XMLHttpRequest.readyState
=========================

**XMLHttpRequest.readyState** 屬性會回傳一個 XMLHttpRequest 客戶端物件目前的狀態。一個 XHR 客戶端可以為下列其中一種狀態：

| 值 | 狀態 | 說明 |
| --- | --- | --- |
| `0` | `UNSENT` | 客戶端已被建立，但 `open()` 方法尚未被呼叫。 |
| `1` | `OPENED` | `open()` 方法已被呼叫。 |
| `2` | `HEADERS_RECEIVED` | `send()` 方法已被呼叫，而且可取得 header 與狀態。 |
| `3` | `LOADING` | 回應資料下載中，此時 `responseText` 會擁有部分資料。 |
| `4` | `DONE` | 完成下載操作。 |

UNSENT

XMLHttpRequest 客戶端物件已被建立，但 open() 方法尚未被呼叫。

OPENED

open() 方法已被呼叫。於此狀態時，可以使用 setRequestHeader() 方法設定請求標頭（request headers），並可呼叫 send() (en-US) 方法來發送請求。

HEADERS\_RECEIVED

send() 方法已被呼叫，並且已接收到回應標頭（response header）。

LOADING

正在接收回應內容（response's body）。如 `responseType` (en-US) 屬性為 "text" 或空字串，則 `responseText` (en-US) 屬性將會在載入的過程中擁有已載入部分之回應（response）內容中的文字。

DONE

請求操作已完成。這意味著資料傳輸可能已成功完成或是已失敗。


**備註：** 這些狀態名稱在 Internet Explorer 中略有不同。其中 `UNSENT`, `OPENED`, `HEADERS_RECEIVED`, `LOADING` 和 `DONE` 變成了 `READYSTATE_UNINITIALIZED` (0), `READYSTATE_LOADING` (1), `READYSTATE_LOADED` (2), `READYSTATE_INTERACTIVE` (3) 和`READYSTATE_COMPLETE` (4)。

範例
--


```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);
```

規範
--

| Specification |
| --- |
| XMLHttpRequest Standard # states |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
怪異模式與標準模式
=========

很久以前，網頁通常有兩種版本：針對網景（Netscape）的 Navigator 的版本，以及針對微軟（Microsoft）的 Internet Explorer 的版本。在 W3C 創立網路標準後，為了不破壞當時既有的網站，瀏覽器不能直接起用這些標準。因此，瀏覽器導入了能分辨符合新規範、或屬於老舊網站的兩種模式。

目前瀏覽器的排版引擎有三種模式：怪異模式（Quirks mode）、接近標準模式（Almost standards mode）、以及標準模式（Standards mode）。在**怪異模式**，排版會模擬 Navigator 4 與 Internet Explorer 5 的非標準行為。為了支持在網路標準被廣泛採用前，就已經建置好的網站，這麼做是必要的。在**標準模式**，行為（期待）由 HTML 與 CSS 的規範描述起來。在**接近標準模式**，有少數的怪異行為被實行。

瀏覽器如何決定用哪個模式？
-------------

對 HTML 文件來說，瀏覽器使用文件開頭的 DOCTYPE 來決定用怪異模式處理或標準模式處理。為了確保頁面使用標準模式，請確認你的頁面，如同本範例一樣擁有 DOCTYPE：


```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>
```


範例中的 `<!DOCTYPE html>` 是所有可用之中最簡單、並由 HTML5 推薦的。HTML 的早期變種也屬於推薦標準，不過今日的瀏覽器都會對這個 DOCTYPE 使用標準模式，就算是已過時的 Internet Explorer 6 也一樣。目前並沒有正當理由，去使用其他更複雜的 DOCTYPE。如果使用其他 DOCTYPE，可能會冒著觸發接近標準模式、或著怪異模式的風險。

請確定把 DOCTYPE 正確地放在 HTML 文件頂端。任何放在 DOCTYPE 前面的東西，如註解或 XML 聲明，會令 Internet Explorer 9 或更早期的瀏覽器觸發怪異模式。

在 HTML5，DOCTYPE 唯一的作用是啟用標準模式。更早期的 HTML 標準會附加其他意義，但沒有任何瀏覽器會用 DOCTYPE 去做模式間互換以外的用途。

另請參閱不同的瀏覽器選擇不同模式的詳細說明。

### XHTML

如果你的網頁使用 XHTML 並在 `Content-Type` HTTP 標頭使用 `application/xhtml+xml` MIME 類型，你不需要使用 DOCTYPE 啟動標準模式，因為這種文件會永遠使用標準模式。不過請注意服務頁面使用 `application/xhtml+xml` 會令 Internet Explorer 8 出於未知格式之故出現下載對話框，支持 XHTML 的第一個 Internet Explorer 版本是 Internet Explorer 9。

如果你的類 XHTML 網頁使用 `text/html` MIME 類型，瀏覽器會視為 HTML，你就需要 DOCTYPE 啟用標準模式。

我要如何知道目前是哪個模式？
--------------

在 Firefox，請從右鍵選單選擇*觀看頁面資訊*，然後查看*繪製模式*。

在 Internet Explorer，請按下 *F12*，然後查看*文件模式*.

這些模式有何不同？
---------

請參閱怪異模式的清單還有接近標準模式的清單之間的差別。
HTML 參考
=======

這裡的 HTML 參考描述了所有 HTML 的**元素**（elements）與**屬性**（attributes），包括為所有元素接受的**全域屬性**（global attributes）。

HTML 元素指引 (en-US)

本頁列出了所有 HTML elements

HTML 屬性指引

HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。

全域屬性 (en-US)

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 <foo hidden>...<foo>, even though <foo> is not a valid HTML element.

連結類型

In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
<ruby>
======

**HTML `<ruby>` 元素**的意思是旁註標記。旁註標記用於標示東亞文字的發音。

嘗試一下
----

| 內容類型 | 流內容、段落型內容、捫及內容 |
| --- | --- |
| 允許內容 | 段落型內容 |
| 標籤省略 | None, both the starting and ending tag are mandatory. |
| 允許父元素 | Any element that accepts phrasing content (en-US) |
| DOM 介面 | `HTMLElement` (en-US) |

屬性
--

這個元素只支援全域屬性 (en-US)。

範例
--

### 範例一：字


```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```

### 範例二：詞


```html
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
```

規範
--

| Specification |
| --- |
| HTML Standard # the-ruby-element |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參閱
--

* `<rt>` (en-US)
* `<rp>` (en-US)
* `<rb>` (en-US)
* `<rtc>` (en-US)
* `<rbc>`
* `text-transform` (en-US): full-size-kana