recursal/MDN huggingface dataset:
WebSockets
==========

*WebSocket* 是允許伺服器與用戶端之間發起持續性的 TCP (en-US) 連接，以便隨時交換資料的協定。

任何用戶端與伺服器端程式都能使用 WebSocket，不過一般來說，大都是在網路瀏覽器與伺服器之間發起的。伺服器藉由 WebSocket 可以在用戶端沒有事先請求的情況下，將數據傳遞給用戶端，以便動態更新資料。

深入理解
----

### 一般常識

* 維基百科的 Websocket
### 技術參考

* MDN 的 WebSocket 參考
### 學習之

* 製作 WebSocket 客戶端應用程式
* 製作 WebSocket 伺服器 (en-US)
Arpanet
=======

**ARPAnet** (高級研究代理網路)是一個早期的計算機網路，構建於 1969 年作為一個強大的媒介用於傳輸敏感軍事數據和連接米國各地主要的研究團體。ARPAnet 首先運行 NCP (網路控制協定) 隨後運行網際網路的第一版協定或TCP (en-US)/IP (en-US) 套件，使 ARPAnet 成為新生代網際網路Internet (en-US)的重要組成部分。ARPAnet 被關閉在 1990 年代的早期。

了解更多
----

### 基礎知識

* 維基百科上的 Arpanet
Jank
====

**Jank** 是在講用戶介面的執行緩慢，主因是主執行緒的執行過久、或是遭到封鎖的渲染、抑或在後台進程上，花費太多的處理器能力。
布林
==

在電腦科學中，**布林值**是一種其值僅能為*真*或*假*的邏輯資料型別，它是編程語言裡在邏輯上表達真或假的方式。如果沒有這種能力，很多功能會無法實現。舉個例子，JavaScript 中的 *if 語句*的判斷條件會利用布林值來決定接下來的代碼是否要被執行。又如 JavaScript 中的 *for 循環*，如果沒有一個能夠解釋成不林值的判斷條件，循環將不知道是否要繼續循環或停止。


```js
/\*JavaScript if Statement\*/
if(boolean conditional) {
  //coding
}

if(true) {
  console.log("boolean conditional resolved to true");
} else {
  console.log("boolean conditional resolved to false");
}

/\*JavaScript for Loop\*/
for(control variable; boolean conditional; counter) {
  //coding
}

for(var i=0; i<4; i++) {
  console.log("I print only when the boolean conditional is true");
}
```

了解更多
----

### 常規知識

* 維基百科Boolean
### 技術參考

* The JavaScript global object: `Boolean`
* JavaScript data types and data structures
響應式網頁設計
=======

*響應式網頁設計*（**RWD**）是一種強調製作能在所有上網設備上，提供最佳外觀和體驗的 Web 開發觀念。

深入理解
----

### 基本知識

* Summary and resources (en-US)
* Pros and cons of going responsive (en-US)
* Responsive Web Design
IP 位址
=====

IP 位址是一組分配給所有使用網際網路通訊協定的裝置的編號。

在 IPv6 被更廣泛採用前，「IP 位址」一般來說指的仍然是 32 位元長度的 IPv4 位址。

了解更多
----

### 一般知識

* 維基百科上的 IP address
密碼套件
====

密碼套件是包括了密鑰交換算法，身份認證方法，批量加密密碼(cipher (en-US))和消息認證碼的組合.

在密碼系統(cryptosystem)裏像 TLS (en-US), 客戶端和伺服器在它們開始安全的通訊之前必須同意密碼套件。典型的密碼套件如 ECDHE\_RSA\_WITH\_AES\_128\_GCM\_SHA256 或 ECDHE-RSA-AES128-GCM-SHA256, 具有如下特徵:

* ECDHE (橢圓曲綫數字簽名算法) 進行密鑰交換
* RSA 進行認證
* AES-128 作爲密碼和伽羅瓦/計數器模式 (GCM) 作爲分組密碼模式的操作
* SHA-256 作爲基於散列的消息認證碼(HMAC)
了解更多
----

* Mozilla 推薦 TLS 的密碼套件選擇
ARPA
====

**.arpa** (地址和路由參數區域)是一個top-level domain (en-US) 用於網際網路基建意圖，特別是反向 DNS 查找 (如：根據給出的 IP address 查找 domain name)。

了解更多
----

### 基礎知識

* 官方站點
* 維基百科上的.arpa
ATAG
====

ATAG (編輯工具可訪問性Accessibility指南)是一個W3C 為創建可訪問内容構建可訪問性編輯工具的建議。

了解更多
----

### 基礎知識

* 維基百科上的 ATAG 作爲無障礙網頁協議的一部分
### 技術參考

* 編輯工具可訪問性指南 (ATAG) 概覽
* ATAG 2.0 建議
API
===

一個 API (Application Programming Interface)是指存在于軟體程式中為軟體與其他項目，如其他軟體或硬體，實現互動的一系列功能和規則。

在網頁開發，一個 API 通常指的是一系列的代碼功能(如：methods (en-US), properties, events, and URLs)爲了方便程式開發者使用他們的 apps 通過用戶的網頁瀏覽器組件，或與用戶計算機上的其他軟體或硬件，或與第三方網站和服務實現互動。

例如：

* getUserMedia (en-US) API 可用於從用戶的攝像頭抓取音頻和視頻，甚至給提供開發者其他的用途，如：錄製視頻和音頻，與其他用戶一起開視訊會議，或是從視頻中捕捉靜態圖像。
* Geolocation API 可從用戶的設備中通過任意服務獲取定位信息 (如：GPS), 然後可以使用 Google Maps APIs 關連。如：在用戶地圖上繪製用戶的定位並向他們展示附近的旅游景點。
* Twitter APIs 可從用戶的賬戶上拿取數據，如：在網頁上展示他們最新的 tweets。
* Web Animations API (en-US) 可用於製作網頁的動畫部分，如：讓圖片動起來或旋轉。
了解更多
----

### 基本知識

* 維基百科上的 API
### 技術參考

* Web API reference
Null
====

在計算機科學裏，一個 **`null`** 值代表了一個參考，通常是指一個不存在的或無效的物件(object)或地址。在語言實現中空值引用的含義各不相同。

在 JavaScript 中， null 是一種原始值(primitive values (en-US))。

了解更多
----

### 基礎知識

* 維基百科上的 Null pointer
### 技術參考

* JavaScript 的數據類型和結構
* JavaScript 全域物件: `null` (en-US)
元素
==

 元素（element）是網頁結構的一部分。在 XML 與 HTML 中，元素可能包含資料清單、文字、圖片，或是也可能不包含東西。典型的元素會包含一個有些許屬性（attributes）的開始標籤（opening tag）、被包覆住的文字內容，以及一個結束標籤（closing tag）。

 ![Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.](/zh-TW/docs/Glossary/Element/anatomy-of-an-html-element.png)

元素與標籤是不同的概念。在原始碼中，標籤用來標注元素開始與結束，而元素其實是 DOM 的一部分。DOM，指文件物件模型（document object model），會由 browser 將 DOM 呈現為網頁。

瞭解更多
----

* The `Element` (en-US) interface, representing an element in the DOM.
* More details about elements. (en-US)
* Web\_Components/Custom\_Elements (en-US)
物件導向程式設計
========

**物件導向程式設計**（Object-Oriented Programming、OOP）是一種程式設計方法。其將資料封裝（encapsulate）於物件（**objects**）中，我們需透過物件間接操作這些被封裝的內部資料，而非直接操作資料本身。

JavaScript為重度物件導向語言，其遵循 **prototype-based model**（與 class-based 相對 (en-US)）

相關文章
----

* 維基百科上的 物件導向程式設計
* Introduction to object-oriented JavaScript
Node.js
=======

Node.js 為 JavaScript 跨平台執行環境，可讓開發者建立伺服器端 JavaScript 網路程式。

了解詳情
----

### 基本知識

* 維基百科的 Node.js
* Node.js 官網
### 技術參考

* API 參考文件
* 教程
JSON
====

*JavaScript Object Notation*（**JSON**）是一種資料交換格式。JSON 的語法非常接近 JavaScript，但嚴格上來說 JSON 並不是 JavaScript 的一個子集。許多程式語言都支援 JSON，不過 JSON 在基於 JavaScript 的應用程式（包含網站和瀏覽器擴充功能）中特別有用。

JSON 可以表示數字、布林值、字串、`null`、陣列（一些有順序的數值），以及由這些數值所組成的物件（字串和數值的對應表）。原生的 JSON 不能用來表示較複雜的資料，像是函式、正規表達式、日期等。（日期物件可以被序列化成為 ISO 格式的日期字串，不會完全遺失資料。）如果你需要 JSON 來表示這些額外的資料類型，請在他們序列或反序列化時轉換數值。

JSON 和 XML 很像，能夠儲存傳統 CSV 格式不能儲存的多層級資料。有許多工具可以互相轉換這些格式，例如 JSON to CSV Converter。

了解更多
----

### 基礎知識

* 維基百科上的 JSON 條目
### 技術資料

* MDN 上的 JSON 條目
事件
==

事件是 DOM 元素產生的事情，它可以通過 Javascript 代碼來操作.

了解更多
----

### 技術參考

* MDN 上的事件文檔
### 基礎知識

* 官方站點
* 維基百科上的 DOM 事件
伺服器
===

硬體而言的伺服器（server）是個能在網路上，提供用戶端服務的共享性電腦（shared computer）。軟體而言的伺服器程式，則是指能給用戶端提供服務的程式。

服務（Services）通常會提供於內部網路、或是公開網路。用戶端程式與伺服器端程式通常利用 protocol 來傳送編碼的數據、並依此連接之。

內部網路最常見的伺服器有檔案、域名、電郵、印表機、還有傳真伺服器。另一個常見的伺服器是連結到網際網路的 Web 伺服器。在資料中心（data center）的微電腦、大型電腦、還有超級電腦... 等，也都是伺服器。

了解更多
----

### 一般知識

* 伺服器介紹 (en-US)
* 維基百科的伺服器
Asynchronous 非同步
================

*非同步*（Asynchronous，又稱異步）指的是各方在方便或可能時，才接收並處理訊息，而不是立刻這麼做的通訊環境。

你可以用人類的溝通環境來比喻：例如電子郵件，寄件者傳送電郵、收件者會在方便時才回覆。他們不用馬上就那麼做。

它也可以用來描述一個程式性的通信環境，例如 `Ajax` 就是個請求 HTTP 少量數據的非同步機制。結果會在響應完成時發回，而不是立刻發送。

了解更多
----

### 技術資訊

* Fetching data from the server（學習專區）
* 同步
SGML
====

標準通用標記式語言（Standard Generalized Markup Language 或簡稱 **SGML**）是一套 ISO (en-US) 所定義，用來規範宣告式標記語言的標準。

在 Web 環境當中，HTML 4、XHTML 以及 XML (en-US) 都是知名的以 SGML 為基礎的語言。然而值得一提的是，HTML 自第五版起擁有了自己的剖析規則，不再是以 SGML 為基礎的語言。

了解更多
----

* 維基百科上的 SGML 條目
* SGML 簡介
CRUD
====

**CRUD** (新增:Create , 讀取:Read, 更新: Update, 刪除:Delete) 是指操作儲存資料方式的首字母縮寫。是指操作儲存資料方式的首字母縮寫。CRUD 通常指在資料庫或數據儲存的執行操作，但它也適用於應用程式的高層次功能，像是不直接刪除資料，僅透過狀態標記為刪除的軟刪除。

Learn more
----------

### General knowledge

* CRUD on Wikipedia
Viewport
========

一個 viewport（視圖、視區）在電腦圖像中表示一個正在被觀看的多邊型區域（通常是方形）。在瀏覽器的術語中，它指涉的是在視窗中（如果在全螢幕模式底下，那也可以是在螢幕中），正在瀏覽的文件中可被看見的一部分。在 viewport 外的內容在螢幕上是看不到的，直到內容被滾動到畫面中。

在視窗/螢幕上能被看見的 viewport 區域被稱為 **visual viewport**（可視視圖）。它有時會比 layout viewport 還來得小，例如在使用者縮放網頁的時候，**layout viewport**（布局視圖）會保持同樣的大小，而 visual viewport 則會變得較小。

瞭解更多
----

### General Knowledge

* Viewport on Wikipedia
* What is viewport in HTML on Stackoverflow
* Get viewport/window size (width and height) with javascript
* A tale of two viewports (Quirksmode)
* VisualViewport API (en-US)
Blink
=====

Blink 是一套開放原始碼的瀏覽器排版引擎，由 Google 作為 Chromium 專案的一部份（所以也是 Chrome 的一部份）所打造。更仔細地講，Blink 是 WebKit (en-US) 當中處理排版、描繪、DOM 的 WebCore 程式庫的衍生版本。

了解更多
----

### 一般知識

* Blink 專案首頁
* 維基百科上的 Blink 條目
* Blink 的常見問題
陣列
==

陣列是個有序資料的集合（按程式語言不同，資料型態可以是原始型別 (en-US)或物件）。陣列是用來把複數的值存進一個變數裡。與只能存一個值的變數，呈現強烈的對比。

每一個陣列中的元素，都附有一個能讀相對應元素的數字，稱做數字索引（numeric index）。在 JavaScript 中，陣列的索引開始於數字 0 且能透過不同的方法 (en-US)來操作。

JavaScript 中的陣列：


```js
var myArray = [1, 2, 3, 4];
var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
//Arrays in JavaScript can hold different types of data, as shown above.
```

了解更多
----

### 常規知識

* 維基百科的陣列
### 技術參考

* MDN 的 JavaScript `Array`
Class（類）
========

在物件導向編程（object-oriented programming）中，一個類（Class）定義了一個 object 的性質。類是一個定義了對象的屬性 (properties) 和方法 (methods (en-US)) 的模板，繪製其他更多具體實例對象的「藍圖」。

了解更多
----

### 基礎知識

* 基於類 vs. 基於原型的編程語言 (en-US) (像 JavaScript)
* 在 JavaScript 中使用 functions 當作類
* 維基百科上的基於類的編程
* 維基百科上的面向對象編程
CSS 像素
======

**CSS 像素**—在 CSS 以 `px` 前輟表示—是大致對應單個點長高、肉眼也能輕易見到、否則就盡可能小的長度單位。按照定義，CSS 像素是在肉眼一臂之遙的距離下，像素密度（pixel density）為單個 96 DPI 像素的物理尺寸。

這定義當然因為如「輕易見到」或「一臂之遙」之類的不精確、因人而異的用詞，而有很多解釋的空間：像是用戶坐在桌上型電腦前，用戶與那台電腦的距離，其實比手機還遠。

因此，不管屏幕的實際像素密度多少，通常在談到 `px` 的時候，是為了想辦法讓 `96px` 與的長度等於 1 英寸（約 2.54 公分）。換句話說，如果某台手機的像素密度為 266 DPI，而某個元素的長度為 `96px`，該元素的實際長度為 266 設備像素。

深入理解
----

### 技術參考

* CSS Values and Units Module, section 5.2: Absolute Lengths
### 學習它

* CSS Length Explained on the MDN Hacks Blog
遞迴
==

函式呼叫函式自己的行為，稱為遞迴、或是遞歸。它主要用於解決含有子問題的問題。遞迴函式會收到兩個輸入：結束遞迴的基本情況（base case）或是延續遞迴的遞迴情況（recursive case）。

深入了解
----

### 基本知識

* 維基百科的遞迴
* 關於 JavaScript 遞迴的詳情
域
=

域是實體控制數據處理資源的電腦網路的一部分，比如說網站。

了解更多
----

* 維基百科上的域在 IT 領域
預先取回連結
======

### 何謂預先取回連結 ?

預先取回連結（Prefetch）是一項瀏覽器機制；這項機制利用瀏覽器閒置時間，預先下載取回使用者稍後可能造訪的網頁資源。只要網頁告訴瀏覽器哪些資源可以預先取回，當瀏覽完成當下網頁載入工作後，瀏覽器便會在背景預先取回這些資源，並且存入快取之中，然後當使用者造訪預先取回的網頁時，網頁便可以快速地從快取中取出載入。

### 能在 HTTPS 執行預先取回嗎 ?

從 Gecko 1.9.1 (Firefox 3.5), HTTPS 內容也能被預先取回。

### 如何告訴瀏覽器預先取回資源 ?

透過 HTML `<link>` (en-US) 或 HTTP `Link:` 標頭 (header) 便可以告訴瀏覽器哪些資源可以預先取回，範例如下：

利用 Link 元素
```

<link rel="prefetch" href="/images/big.jpeg">
```


利用 HTTP `Link:` header:
```

Link: </images/big.jpeg>; rel=prefetch
```


利用 meta 元素代表 Link: header :
```

<meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">
```


`Link:` header 的格式請參閱 RFC 5988 section 5。

可以指定多個預先取回資源，當瀏覽器閒置時，就會開始預先取回這些資源，例如:
```

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
<link rel="next" href="2.html">
```

### <a> 元素能被預先取回嗎 ?

不行。目前只有 rel 屬性為 prefetch 的 link 元素 (或標頭) 所標示的資源能被預先取回。

### 預先取回 (Prefetch) 符合標準嗎 ?

預先取回並沒有違反標準規範；事實上 HTML 4.01 允許新定義的 rel 型態 (see Section 6.12: Link types)，只是 Mozilla 現在的機制還在 HTML5 標準化草稿作業中，請見 HTML5 標準: Link type "prefetch" .

### 如何判定瀏覽器是否閒置 ?

目前 (Mozilla 1.2) 主要是透過 `nsIWebProgressListener` API，向上層 `nsIWebProgress` 物件 ("@mozilla.org/docloaderservice;1") 註冊一個事件處理器；藉由此得知文件開啟和停止通知，所謂的閒置時間就是介於最後一個停止通知和下一個開始通知之間，而最後一個停止通知大約發生在 onLoad 事件觸發，由此瀏覽器開始預先取回各項資源。如果 frame 有指定需要預先取回的資源，那麼當最上層 frame 和其底下所有子 frame 的完成載入後，預先取回作業才會啟動。

### 當預先取回執行中有連結被點擊時會如何 ?

一但有連結點擊或網頁載入觸發，預先取回作業會立刻中止；倘若預先取回作業執行到一半的連結資源恰巧就是被點擊的連結，如果伺服器回應標頭有表明 "Accept-Ranges: bytes" ，那麼剩下的資源就會透過 HTTP byte-range 請求取回。

### 當在背景下載檔案，預先取回作業會佔用頻寬嗎 ?

不一定。Firefox 會先暫停預先取回作業直到背景下載任務結束，但如果是使用其他軟體下載檔案，那麼 Firefox 的預先取回作業並不會停止，未來 Firefox 計畫加入偵測作業系統的網路閒置時間 。

### 預先取回有限制嗎 ?

有。只有 http:// (and, starting in Gecko 1.9.1 https://) URLs 能被預先取回，其它如 FTP 則無法。

### Mozilla 會預先取回不同網域的文件嗎 ?

會，因為預先取回並沒有 same-origin (同源政策) 的限制，同源限定並不會加強瀏覽器安全性。

### 預先取回請求帶有 Referer: header 嗎 ?

有，預先取回帶有 HTTP `Referer:` header 表明那份文件發起預先取回請求。

這或許會對追蹤 referer (參照位址) 造成影響，所以預先取回可能不適用於所有資源，不過還是可以利用 `Cache-control: must-revalidate` HTTP 回應標頭，要求 Firefox 造訪預先取回的網頁，這個標頭允許快取，但是取用快取前需要先經過 `If-Modified-Since` 或 `If-None-Match` 宴請求。

### 如何分辨來自一般和預先取回的請求 ?

Firefox 對每一個預先取回請求都會附帶如下標頭:
```

X-moz: prefetch
```


請注意這標頭並非標準之一，未來也有可能變更。

### 可以從偏好設定裡關閉預先取回嗎 ?

透過 about:config，或是在 profile 目錄底下的 prefs.js 檔內加入以下程式碼。
```

user_pref("network.prefetch-next", false);
```

### 對頻寬使用量付費的使用者的影響

基本上可以分成兩個層面來看：第一、原本就可以利用 JS/DOM 來進行預先下載；第二、預先取回算是瀏覽器功能，應該要能夠讓使用者關閉。

利用 `<link>` 而非 JS/DOM 的特殊做法來預先取回資源比較好，因為瀏覽器可以做較佳的優先取回排序。另外預設開啟預先取回功能也是希望鼓勵網頁不要採用這類自行撰寫的 JS/DOM 做法。

### 那些瀏覽器支援預先取回 ?

Firefox 和 Netscape 7.01+。 測試瀏覽器是否支援預先取回功能。

### 隱私權議題

預先取回會導致被取回網頁的 cookie 也一併被預先取回，例如搜尋 amazon，google 搜尋網頁會預先取回 www.amazon.com 網頁及其 cookie，如果想要阻擋第三方 cookie ，請參閱 Disabling third party cookies。

### 還有... ?What about...?

若是還有其他有關預先取回的問題，請不要客氣直接發問 :-)

#### 延伸閱讀

Prefetching Hints
HTML
====

超文件標示語言（**HTML**，HyperText Markup Language）是用於指定網頁結構的描述性語言。

簡歷
--

在 1990 年，作為 Tim Berners-Lee 對網路 (en-US)所知的一部分，超文本 (en-US)的概念被定義起來了。隔年，Berners-Lee 以 SGML 的標記為基礎定型起來。IETF (en-US) 於 1993 年規範了 HTML、並在 1995 年發布 2.0（第二版）。1994 年 Berners-Lee 成立了 W3C 以便發展網路。1996 年，W3C 接手 HTML 的工作，並在隔年發布了 HTML 3.2 Recommendation（HTML 3.2 建議）。在 1999 年發布了 HTML 4.0 並在 2000 年成為 ISO (en-US) 標準。

這段期間，偏好 XHTML 的 W3C 幾乎拋棄了 HTML，使得 2004 年一個稱作 WHATWG (en-US) 的獨立團體成立起來。也因為 WHATWG 的努力，HTML5 的工作持續進行：兩個組織在 2008 年發布了第一份草稿、最終標準則在 2014 年實行。

概念及語法
-----

HTML 是個以元素構成的純文字文件。元素通常被開啟與關閉的標籤 (en-US)包覆起來。每個標籤都以角括號（`<>`）作為開始與結束。不過，也有些不包覆任何文件的空標籤（empty or *void* tag），例如 `<img>` (en-US)。

你可以透過屬性擴展 HTML 標籤，它能提供附加訊息，以改變瀏覽器的解釋方法：

![HTML 元素的結構資訊](/zh-TW/docs/Glossary/HTML/anatomy-of-an-html-element.png)

HTML 文件的副檔名通常存為 `.htm` 或是 `.html`。它們會放在網頁伺服器上運作、並由瀏覽器渲染。

深入了解
----

### 基本知識

* 維基百科的 HTML
### 學習 HTML

* 我們的 HTML 教學
* codecademy.com 的網路課程
### 技術參考

* HTML 的 CSS 文件
* HTML 規範
CSS 選擇器
=======

**CSS 選擇器**是 CSS 規則的一部分。它能讓你選定要調整哪個（或哪些）元素的樣式。

範例
--


```html
<div>I am inside of a div element.</div>
<p>I am inside of a paragraph element.</p>
```



```css
div {
  color: green;
}

p {
  color: red;
}
```


在第一個 CSS 規則，我選取了 `<div>` 元素、並將該元素的文字變成了綠色。在第二個 CSS 規則，我選取了 `<p>` 元素、並將該元素的文字變成了紅色。結果應該長成這個樣子：

深入理解
----

### 基本知識

* 基本選擇器
    + 類型選擇器 `elementname`
    + Class 選擇器 (en-US) `.classname`
    + ID 選擇器 (en-US) `#idname`
    + 通用選擇器 (en-US) `* ns|* *|*`
    + 屬性選擇器 (en-US) `[attr=value]`
    + 狀態選擇器 `a:active, a:visited`
* 複合選擇器
    + 鄰接同層選擇器 (en-US) `A + B`
    + 通用同層選擇器 (en-US) `A ~ B`
    + 直屬選擇器 (en-US) `A > B`
    + 後代選擇器 `A B`
* 虛擬元素 (en-US)
* 虛擬類別
CSRF
====

**跨站請求偽造**（Cross-Site Request Forgery, CSRF）是一種冒充信任用戶，來傳送非預期指令的攻擊。比方說，可以在 URL 連結背後添加惡意參數來攻擊：


```html
<img src="https://www.example.com/index.php?action=delete&id=123" />
```


對擁有 `https://www.example.com` 權限的用戶來說，`<img>` 元素會在用戶沒注意到的情況下執行 `https://www.example.com` 的操作。就算這個元素的域名不在 `https://www.example.com` 亦然。

有很多能預防 CSRF 的辦法，例如實作 RESTful API、或添加 secure token 等等。

了解更多
----

### 一般知識

* 維基百科上的 跨站請求偽造
* Prevention measures
* MDN 安全手冊
同步
==

*同步*（Synchronous）是指各方在接收（必要的話還會執行與回覆）訊息時，立刻（或盡可能接近立刻）執行的即時通訊。

以人類通訊來比喻就是電話：在電話通訊時，你通常會立刻回覆對方的訊息。

很多程式指令都是同步的：例如在計算時，環境會立刻回傳結果，除非你撰寫程式時不讓它這麼做。

深入理解
----

### 技術參考

* 非同步
* 使用 XMLHttpRequest() API 完成同步與非同步請求 (en-US)
DNS
===

DNS (域名系統)將便於記憶的需要查找 Internet (en-US) 上特定的計算機服務或私人網路域名轉換為數字IP addresses。

了解更多
----

### 基礎知識

* 理解域名 (en-US)
* 維基百科上的 域名系統
Java
====

Java 是一個編譯式、物件導向、可攜性高的程式設計語言。

Java 屬於靜態型別，並具有類 C 的語法。它還有個稱作 Java 軟體開發套件（Java Software Development Kit, SDK）的函式庫，裡面有很多易於使用的功能包。

程式只提前編譯一次，編譯成專有的字節碼和包格式，接著在 Java 虛擬機（Java Virtual Machine, JVM）內部執行。JVM 支持跨平台，這使得 Java 程式幾乎可以在任何地方運行，而無需再次編譯或打包。這個特性使它成為很多大型企業的首選，但也可能會被認為過於「沉重」。

了解更多
----

### 基礎知識

* 維基百科的 Java
CSS
===

**階層式樣式表**，或稱**層疊樣式表**（Cascading Style Sheets，**CSS**）是控制網頁的外觀，要在瀏覽器裡面如何表現的陳述式語言。瀏覽器會套用 CSS 樣式宣告、以期被選中的元素能正確顯示之。樣式宣告包含了屬性（Property）與屬性值（Value）。它們會判斷網頁如何顯示。

CSS 與 HTML 及 JavaScript 並列為網路三大核心技術。CSS 通常用作 HTML 元素的樣式化，但它也能給其他像 SVG 或 XML (en-US) 之類的標示語言樣式化。

CSS 的規則，是一個屬性 (en-US)配上一個選擇器。以下的例子能把所有 HTML 的段落元素，變成黑底黃字：


```css
/\* 選擇器「p」是指所有文件內的段落，都會受這個規則所影響。 \*/
p {
  /\* "color" 屬性定義了文字的顏色，本例為黃色。 \*/
  color: yellow;

  /\* "background-color" 屬性定義了背景的顏色，本例為黑色。 \*/
  background-color: black;
}
```


階層式樣式表的「階層（Cascading）」一詞，就是在指：如何決定改變網頁外觀的選擇器，其優先次序為何的支配規則。這個功能非常重要，因為一個夠複雜的網頁，可以動用上千個 CSS 規則。

深入了解
----

### 基本知識

* Learn CSS
* 維基百科的 CSS
### 技術參考

* MDN 的 CSS 文件
* CSS 工作小組當前的工作進度
### 深入了解 CSS

* codecademy.com 的課程
ASCII
=====

**ASCII** (米國信息交換標準碼)是計算機用來轉換字母、數字、符號和控制代碼轉換為數字形式的最流行的編碼方法之一。自 2007 以來, UTF-8 (en-US) 在網頁上取代了它。

了解更多
----

### 基礎知識

維基百科上的 ASCII
REST
====

具象狀態傳輸（**REST**，Representational State Transfer）是一組實現效率、可讀性、還有可擴展分散式系統（scalable distributed system）的軟體架構設計規範。如果一個系統能維持某些規範，他就是 RESTful。

REST 的基本概念是資源（resource）：例如說，文件能透過明確且標準的操作與格式，轉換其狀態與超文本的關聯。通常在 API 或服務能直接更改文件類型，而非觸發其他行為時，就會稱做 RESTful。

由於網際網路（World Wide Web (en-US)）背後的 HTTP 協議也能傳送文件及超文本連結、又同時充當了標準，簡易的 HTTP API 雖然有時不一定遵守所有 REST 規範，他們還是會俗稱為 RESTful API、RESTful 服務、或直接叫 REST 服務。初學者可以先假設 REST API 是指能透過 web 相關的函式庫和工具來呼叫的 HTTP 服務。

深入理解
----

### 搞懂它

* restapitutorial.com
* restcookbook.com
### 基礎知識

* 維基百科的具象狀態傳輸
* REST Architecture
Presto
======

Presto 是 Opera browser 原本使用的專屬排版引擎， Opera 瀏覽器 15 版起改用以 Chromium 為基礎的 Blink 排版引擎。

了解更多
----

* 維基百科上的 Presto layout engine 條目
Computer Programming
====================

電腦程式設計是編寫和組織一系列指令的過程。它會以電腦/軟體程式能理解的語言，告訴他們要做什麼事情。這些指令來自不同形式的語言，例如如：C++、Java、JavaScript、HTML、Python、Ruby、和 Rust。

使用合適的語言，可以設計/創建所有類型的軟體。例如，幫助科學家進行複雜運算的程式、儲存大量資料的資料庫、讓用戶下載音樂的網站、或者讓用戶建立動畫電影的軟體。

了解更多
----

### 基礎知識

* 維基百科上的 程式設計
* 維基百科上的 程式語言列表
漸進增強
====

**漸進增強**（Progressive enhancement）是一個設計哲學。這個哲學強調該在受限的情境下提供所有基礎且必須的功能及內容給使用者，並同時讓非受限且有最新、最優秀設備的使用者能夠得到最佳的用戶體驗。

漸進增強中的「漸進」指的是設計一個能夠在舊版瀏覽器或功能有限的設備上，實現「更簡單但仍可用」的體驗。同時並在新版瀏覽器或功能豐富的設備上實現更引人入勝、功能完整的體驗。

技術上會使用功能偵測 (en-US)（Feature detection）來判斷瀏覽器是否支持更現代的功能。若偵測到設備不支援，則可以使用 JavaScript polyfill (en-US) 等技術來補充缺失的功能。

遵照這個設計哲學，並要特別考慮到網頁親和性，盡可能在受限狀況下，仍然提供簡單但不犧牲親和力的替代方案。

遵從漸進增強的設計哲學，可允許開發人員在開發最佳的網站的同時，確保網站能在多種未知的設備或瀏覽器上運行。這也和優雅降級 (en-US)（Graceful degradation）的概念息息相關；雖然通常被認為是與漸進增強的理念執行順序為相反，但實際上這兩種設計哲學是相輔相成的。

參見
--

* 維基百科的漸進增強
MVC
===

**模型 ─ 視圖 ─ 控制器**（Model-View-Controller, MVC）是個軟體設計模式。它強調把軟體的行事邏輯與排版顯示分離（也就是關注點分離，Separation of concerns），如此一來開發者們就可以輕鬆分派工作、以及維護專案。有些設計模式也基於 MVC，像是 MVVM(Model-View-ViewModel)、MTP(Model-View-Presenter)、and MVW(Model-View-Whatever) 等等。

MVC 在定義方面有爭議，但通常會包含：

1. 模型（Model）：包含資料、或是軟體的行事邏輯。行事邏輯可以有演算法、與資料庫的溝通等。
2. 視圖（View）：包含軟體的排版與顯示。
3. 控制器（Controller）：包含軟體的行事邏輯、或是連接模型與視圖。
深入理解
----

### 基本知識

* 維基百科的 MVC
### 學習 MVC

* MDN 的 MVC 架構
在地化
===

**在地化 (Localization)**（有時稱本地化）是將程式介面由一種語言翻譯成另一種語言，並調整各部份為適合當地文化及習慣的過程。下面的資源可協助建立 Mozilla 相關程式或套件的在地化工作。

#### 精選文件

XUL 教學:在地化

XUL 教學 中提到如何在地化 XUL 程式的小節。

XUL 教學:Property 檔案

XUL 教學 中解釋如何使用 Property 檔案的小節。

撰寫可在地化的程式碼

本文提供程式設計師們關於在地化的練習和撰寫準則。

如何翻譯套件敘述

想要翻譯套件敘述（就是擴充套件視窗中套件名稱下面的說明），你需要用特殊的 prefreence key 才能蓋掉 install.rdf 檔中原來的英文敘述。本文會教你如何修改 preference key。

#### 其他頁面

* 社群

#### 相關主題

* 擴充套件, XUL
Number
======

在 JavaScript, **Number** 是雙精度 64 位浮點格式(IEEE 754)中的數字數據類型。在其他編程語言中可以存在不同的數字類型，如：整型(Integers)、浮點型(Floats)、雙精度型(Doubles) 或 大數型(Bignums).

了解更多
----

### 基礎知識

* 維基百科上的 數字類型
### 技術參考

* JavaScript 數據結構: Number
* JavaScript 全域物件 `Number`
SVN
===

Apache Subversion (**SVN**) 是免費的資源控制管理(SCM (en-US)) 系統。 它准許開發者保留文本和程式碼修改的歷史記錄。儘管 SVN 可以處理二進制文件，但我們不建議使用。

了解更多
----

### 基礎知識

* 維基百科上的 Apache Subversion
* 官方站點
### 學習使用

* MDN 上的本地化的 SVN 指引
回呼函式
====

回呼函式（callback function）是指能藉由參數（argument）通往另一個函式的函式。它會在外部函式內調用、以完成某些事情。

以下是簡單的範例：


```js
function greeting(name) {
  alert("Hello " + name);
}

function processUserInput(callback) {
  var name = prompt("輸入你的名字：");
  callback(name);
}

processUserInput(greeting);
```


這是個同步回呼的例子，因為它是立即執行的。

但請注意，回呼常用來延續非同步行動完成後的程式執行：這就叫做非同步回呼（asynchronous callbacks）。例如說我們的 maps-example.html 範例（也請參見這個）用了 Google Maps API 與 Geolocation API 來把你設備的位置，顯示到地圖上。

因為我們透過非同步取得 GPS 的設備坐標（我們不知道數據何時會被回傳），`Geolocation.getCurrentPosition()` 方法把一個匿名回呼函式作為參數,它會回傳一個坐標數據以充當參數。該函式會在回傳坐標數據後執行。

深入理解
----

### 一般常識

* 維基百科的 回呼函式
* Understand JavaScript Callback Functions and Use Them
Routers
=======

**routers** 是指路由器。在 Web 有兩種意思：

1. 針對網路層，路由器是一種決定封包去向的網路設備。路由器是由 retailer 分發，允許用戶與網際網路互動。
2. 針對應用層的 SPA，路由器是一種透過給定的 URL 來決定頁面如何呈現的函式庫。這個中間件（middleware）會藉由給定 URL 給檔案生成需要的路徑、以渲染下一頁的所需內容。
了解更多
----

### 一般知識

針對網路層：

* 維基百科的路由器

針對應用層，訪間熱門的 SPA 框架都有自己的路由器函式庫：

* Angular router
* React router
* Vue router
ECMA
====

**Ecma International**（全名 European Computer Manufacturers Association，歐洲電腦製造商協會）是一個制定電腦硬體、通訊、程式語言標準的非營利組織。

該組織維護 ECMA-262 規格（又稱 ECMAScript），也就是 JavaScript 語言的核心標準規格，而在網路上為人所知。

了解更多
----

* 維基百科上的 Ecma International 條目
* Ecma International 組織網站
字元
==

一個字元包含符號(字母、數字、標點符號)和不會顯示的"控制字元"(例如:回車符或連字號)。 UTF-8 (en-US)是最常見的字元組合，它包含了人類最常使用的字形。

了解更多
----

### 基本知識

* Character (computing) (維基百科)
* Character encoding (維基百科)
* ASCII (維基百科)
* UTF-8 (維基百科)
* Unicode (維基百科)
Bandwidth
=========

帶寬是指通過數據連接在一定時期内可以傳輸的數據信息量，通常以每秒比特數的倍數為單位，也就是 bps，如：兆位每秒(Mbps)或吉比特每秒(Gbps)。

了解更多
----

* 維基百科上的 Bandwidth
SQL
===

**SQL**（Structured Query Language，結構化查詢語言）是專為表格形式資料庫的更新、檢索、計算，所設計的描述性電腦語言。

深入了解
----

### 基本知識

* 維基百科的 SQL
### 了解 SQL

* Learn SQL on sqlzoo.net
* Tutorial Point
Key
===

密鑰是密碼(cipher (en-US))用於加密(encryption (en-US)) 和/或解密(decryption (en-US))的一條信息。關於加密系統(cryptosystem)的所有加密信息都應該保持安全，除了密鑰，這是公共的認知。

在對稱密鑰密碼學(symmetric-key cryptography (en-US))中，同時使用相同的密鑰加解密。在公共密鑰密碼學(public-key cryptography (en-US))中，存在一對作為公鑰和私鑰的相關密鑰。公鑰是免費提供的，而私鑰則是保密的。公鑰可以對只有相應私鑰解密的信息加密，反之亦然。

了解更多
----

### 技術參考

* 維基百科上的 Kerckhoffs's principle
正規表示式
=====

**正規表示式**（*Regular expressions*，或是*regex*）是主宰著字符序列搜索的規則。

許多語言都實作了正規表示式，但最出名的實作，是引出一連串不同實作方式的 Perl 版本實作，稱為 PCRE (*Perl Compatible Regular Expression*)。在 Web 平台，JavaScript 透過 `RegExp` (en-US) 物件，提供另一種正規表示式的實作。

了解詳情
----

### 基本知識

* 維基百科上的 Regular expressions
* 互動教學
* 正規表示式視覺化
### 技術參考

* 在 JavaScript 編寫正規表示式
瀏覽上下文
=====

**瀏覽上下文**是一個瀏覽器(browser)展示文檔(`Document` (en-US))的環境（正常來説是一個現在的標簽，但也有可能是一個窗體或是一個框架裏面的頁面）。

每個瀏覽上下文都有一個特定的活動文檔來源origin (en-US)並按順序列出所有文檔的歷史記錄。

瀏覽上下文之間的通訊被嚴格限制。衹有瀏覽上下文來自于同樣的來源，一個廣播信道(`BroadcastChannel` (en-US))才能被打開和使用。

了解更多
----

### 技術參考

* WHATWG 上的瀏覽上下文
* W3C 上的瀏覽上下文
型別
==

**型別**（或*資料型別*）是能決定 value (en-US) 該存為何種類型的特性：例如 JavaScript 的 `Boolean` (en-US) 只能存為 `true`/`false` 兩者其一、而字串（`String`）能存為文字字串、`Number` 則能存城任何類型的數字……等等。

型別也能決定哪些操作是有效的：例如說整數（integer）可以與整數相乘，但不能與字串相乘。

深入了解
----

### 基本知識

* 維基百科的資料型別
* JavaScript 的資料型別
URL
===

**統一資源定位器** (**URL**) 是一個在互聯網上查找指定資源(例如網頁，圖片或視頻)位置的文本字符串。

在HTTP的文本中, URLs 通常被稱作網頁地址或鏈接。瀏覽器把 URLs 顯示在地址欄，如： `https://developer.mozilla.org` Some browsers display only the part of a URL after the "//", that is, the Domain name.

URLs 同樣可以用於文件傳輸(FTP) , 郵件 (SMTP (en-US)), 以及其他應用程式.

了解更多
----

### 基礎知識

* 維基百科上的 URL
### 學習其他

* Understanding URLs and their structure (en-US)
### Specification

* Understanding URLs and their structure (en-US)
散列
==

散列函式需要一個可變長度的消息輸入并產生一個固定長度的輸出。它通常是以 128 位的指紋或信息摘要的形式出現。散列對於密碼學(cryptography)非常有用-它們確保了傳輸數據的完整性。這為提供消息認證的HMAC's提供了基礎。

了解更多
----

### 基礎知識

* 維基百科上的 散列函式
MIME type
=========

**MIME 類型** (現在被更準確的稱作「媒體類型」（media type），但有時也被稱作「内容類型」（content type）) 是一種隨附文件發送的標識字符串。它主要用於標示文件類型、描述內容的類型：例如說，一個聲音文件就可能標為`audio/ogg`、或者圖像檔案就可能是 `image/png`。

它的目的與 Microsoft Windows 的副檔名相似。裡面的名字，是源自最初用於 E-Mail 的 MIME (en-US) 標準。

了解更多
----

### 基礎知識

* 維基百科上的 Internet media type
### 技術參考

* MIME 類型列表
* 正確的伺服器 MIME 類型配置 (en-US)
* MIME 類型 (en-US)在網頁文本中的詳細用法
* Incomplete list of MIME types (en-US)
* Mozilla 如何決定 MIME 類型
* MediaRecorder.mimeType (en-US)
Chrome
======

不要和 Google Chrome (en-US) 混淆，"chrome" 代表除了網頁本身之外任何可視的 瀏覽器 外觀（例如：工具列、功能列、分頁）。
Attribute
=========

*Attribute* （標籤屬性）用於擴充 HTML tag (en-US)，可改變標籤行為或提供額外資訊。HTML 標籤屬性的正確格式為 `name=value`（以屬性名稱對上屬性值）。

了解更多
----

### 技術參考

* HTML attribute reference
* HTML 的全域屬性 (en-US)相關資訊。
URI
===

統一資源識別碼 (Uniform Resource Identifier，一般縮寫成 **URI**) 是個會指向資訊來源的字串。其中又以定位網址 URLs 最為常見，會把該**位址**傳給網站，好讓網站辨認資訊來源。不過，統一資源名稱 URNs (en-US) 就不一樣了，是用命名空間允許的**名稱**指向資訊來源，例如國際標準書碼 (International Standard Book Number，一般以 ISBN 縮寫)

想了解更多嗎？
-------

### 一般常識篇

* URI on Wikipedia
* RFC 3986 on URI
編譯時間
====

編譯時間是指程式從第一次加載到解析(parsed (en-US))程式的時間。

了解更多
----

### 基礎知識

* 維基百科上的 編譯時間
CSS 預處理器
========

**CSS 預處理器**是個能透過該預處理器語法，產生純 CSS 的程式。CSS 預處理器有很多選擇，不過大多數的 CSS 預處理器都會添加純 CSS 所沒有的功能，例如：mixin、巢狀選擇器、繼承選擇器等。這些功能會令 CSS 結構的可讀性更高、也更容易維護。

要使用 CSS 預處理器，你需要在伺服器安裝 CSS 編譯器，或是在開發環境透過 CSS 預處理器編譯後，上傳編譯好的 CSS 到伺服器。

參見
--

* 以下列出幾個最受歡迎的 CSS 預處理器：
    + Sass
    + LESS
    + Stylus
    + PostCSS
* MDN 術語表
    + CSS
首次 CPU 閒置
=========

**首次 CPU 閒置 (First CPU Idle)** 測量當頁面進行最小幅度的互動或適當視窗平靜到足夠處理使用者的輸入。它是一個非標準的 Google 網站效能指標。一般來說，它發生在大部分但是非必要的所有可見 UI 元素進行互動時，且使用者介面能做出回應，大多數平均的使用者輸入落在 50 毫秒。它也被稱為 First interactive (en-US)。
可緩存
===

**可緩存**的響應是可被緩存的 HTTP 響應，它被存儲以供稍後檢索和使用，從而將新的請求保存在伺服器。不是所有的 HTTP 響應都可以被緩存，可以被緩存的 HTTP 響應需滿足如下列條件:

* 請求中使用的方法本身是可以被緩存的，如 `GET` 或 `HEAD` (en-US) 方法。如果下達了新的指示，響應 `POST` (en-US) 方法也可以被緩存，但這種實施方式極爲罕見。其他方法，如：`PUT` (en-US) 或 `DELETE` (en-US) 都不可以被緩存，同樣他們的處理結果也不可以。
* 應用程式是會緩存已知的響應的狀態碼，并且被認爲是可緩存的。這些可緩存的狀態碼如下：`200`、`203`、`204`、`206`、`300`、`301`、`404`、`405` (en-US)、`410` (en-US)、`414` (en-US) 和 `501` (en-US)。
* 響應中沒有指定的頭部，如 `Cache-Control`，它可以阻止緩存。

請注意一些不緩存請求/響應到指定的 URI 可能會導致相同 URI 上以前的緩存響應失效。例如，`PUT` (en-US) 到 pageX.html 將使相同 URI 下所有的 `GET` 或 `HEAD` (en-US) 請求緩存失效。

同樣的,如果請求的方法和響應的狀態都可以被緩存，那請求的響應也都將可以被緩存：
```

GET /pageX.html HTTP/1.1
(…)

200 OK
(…)
```


`PUT` (en-US) 請求不能被緩存. 此外，它還將導致所有來源為 `HEAD` (en-US) 或 `GET` 相同的 URI 緩存數據無效 :
```

PUT /pageX.html HTTP/1.1
(…)

200 OK
(…)
```


指定的 `Cache-Control` 頭部在響應中可以阻止緩存：
```

GET /pageX.html HTTP/1.1
(…)

200 OK
Cache-Control: no-cache
(…)
```

了解更多
----

### 基礎知識

* HTTP 規範中 可緩存 的定義。
### 技術資訊

* 常見緩存方法描述: `GET`、`HEAD` (en-US)
* 常見不可緩存方法描述: `PUT` (en-US)、`DELETE` (en-US), often `POST` (en-US)
ECMAScript
==========

**ECMAScript** 是一種腳本語言，且 JavaScript 奠基於此之上。Ecma International 這個組織負責將 ECMAScript 標準化。

了解更多
----

### 基本知識

* 維基百科上的 ECMAScript
### 技術參考

* ECMAScript
SPA
===

單頁應用（SPA，Single-page application）是一種 Web app 開發實作。它能在使用網站時，只載入一個頁面；並在網頁更新時，透過 JavaScript API 如 `XMLHttpRequest` 與 Fetch 同步更新部份網頁。

SPA 能讓用戶在使用網站時，不用從伺服器載入整個頁面，所以會提升性能與動態體驗。相對地，在 SEO、狀態與路由管理、還有性能監控方面，都會是需要考慮的劣勢。

參見
--

* 維基百科上的單頁應用程式
* 了解客戶端 JavaScript 框架
* 術語表
    + API
    + AJAX
    + JavaScript
* 以下為訪間最熱門的 SPA：
    + Angular
    + React
    + Vue.JS