diff --git a/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md b/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md index 3ca14b324c2c7e..d47943404e4b35 100644 --- a/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/zh-tw/web/api/notifications_api/using_the_notifications_api/index.md @@ -39,12 +39,9 @@ window.addEventListener("load", function () { }); ``` -> [!NOTE] -> Chrome 不允許於載入事件中呼叫 [`Notification.requestPermission()`](/zh-TW/docs/Web/API/Notification.requestPermission) (參閱 [issue 274284](https://code.google.com/p/chromium/issues/detail?id=274284))。 - -### 已安裝的 Apps +### 已安裝的 App -在安裝 Apps 之後，若於 [Apps 的 manifest 檔案](/zh-TW/docs/%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F/Manifest-840092-dup)中直接添加權限，即可省去再次向使用者要求權限的動作。 +在安裝 App 之後，若於 [App 的 manifest 檔案](/zh-TW/docs/Mozilla/Add-ons/WebExtensions/manifest.json)中直接添加權限，即可省去再次向使用者要求權限的動作。 ```json permissions: { diff --git a/files/zh-tw/web/api/response/index.md b/files/zh-tw/web/api/response/index.md index 70f078e17dc200..32b173558dbcf4 100644 --- a/files/zh-tw/web/api/response/index.md +++ b/files/zh-tw/web/api/response/index.md @@ -64,7 +64,7 @@ slug: Web/API/Response ## 範例 -在[基本 fetch 範例](https://github.com/mdn/fetch-examples/tree/master/basic-fetch) ([run example live](http://mdn.github.io/fetch-examples/basic-fetch/)) 中，我們使用 `fetch()` 呼叫來得到圖片，並使用 {{htmlelement("img")}} tag 顯示。 這裡的`fetch()` 呼叫返回了一個 promise，它使用與資源 fetch 操作有關的 `Response` 進行解析。你可能有發現，由於我們要求的是一張圖片，所以需要用 {{domxref("Body.blob")}} ({{domxref("Response")}} 時做了 body) 讓 response 有正確的 MIME 類型。 +在[基本 fetch 範例](https://github.com/mdn/dom-examples/tree/main/fetch/basic-fetch) ([run example live](https://mdn.github.io/dom-examples/fetch/basic-fetch/)) 中，我們使用 `fetch()` 呼叫來得到圖片，並使用 {{htmlelement("img")}} tag 顯示。 這裡的`fetch()` 呼叫返回了一個 promise，它使用與資源 fetch 操作有關的 `Response` 進行解析。你可能有發現，由於我們要求的是一張圖片，所以需要用 {{domxref("Body.blob")}} ({{domxref("Response")}} 時做了 body) 讓 response 有正確的 MIME 類型。 ```js const image = document.querySelector(".my-image"); diff --git a/files/zh-tw/web/api/server-sent_events/index.md b/files/zh-tw/web/api/server-sent_events/index.md index 4f7613dc56e993..a87be5622b5fec 100644 --- a/files/zh-tw/web/api/server-sent_events/index.md +++ b/files/zh-tw/web/api/server-sent_events/index.md @@ -18,7 +18,7 @@ slug: Web/API/Server-sent_events - Remy Sharp's [EventSource polyfill](https://github.com/remy/polyfills/blob/master/EventSource.js) - Yaffle's [EventSource polyfill](https://github.com/Yaffle/EventSource) -- Rick Waldron's [jquery plugin](https://github.com/rwldrn/jquery.eventsource) +- Rick Waldron's [jquery plugin](https://github.com/rwaldron/jquery.eventsource) ## 相關主題 @@ -31,5 +31,4 @@ slug: Web/API/Server-sent_events ## 參見 - A [Twitter like application](http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/) powered by server-sent events and [its code on Github](https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline). -- [HTML5 and Server-sent events](http://dsheiko.com/weblog/html5-and-server-sent-events) -- [Server-sent events using Asp.Net](http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html) +- [HTML5 and Server-sent events](https://dsheiko.com/weblog/html5-and-server-sent-events/) diff --git a/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md b/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md index 3f0e3801fb70e8..afc9ebef72419d 100644 --- a/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md +++ b/files/zh-tw/web/api/server-sent_events/using_server-sent_events/index.md @@ -51,7 +51,7 @@ evtSource.addEventListener("ping", function (event) { 上述的程式碼大同小異，不同之處在於若伺服器傳送了 `event` 欄位值為「ping」的訊息時它就會把 `data` 欄位的值解析為 JSON 並輸出到畫面上。 > [!WARNING] -> 當連線不是透過 **HTTP/2** 時，SSE 會受到最大連線數限制所苦，尤其當開啟多個分頁。每個瀏覽器有自己的限制數而且被限制在很低的數量（6）。這個問題已經被 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) 和 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896) 標註為「Won't fix」（不修復）。限制是基於每個瀏覽器 + 網域，也就是說你可以針對 www\.example1.com 網域在所有的分頁中開啟六個 SSE 連線，另一個網域 www\.example2.com 也可以開啟六個（根據 [Stackoverflow](https://stackoverflow.com/a/5326159/1905229)）。當使用 HTTP/2 時最大同時 _HTTP streams_ 連線數是由伺服器和客戶端之間協調（預設 100）。 +> 當連線不是透過 **HTTP/2** 時，SSE 會受到最大連線數限制所苦，尤其當開啟多個分頁。每個瀏覽器有自己的限制數而且被限制在很低的數量（6）。這個問題已經被 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) 和 [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896) 標註為「Won't fix」（不修復）。限制是基於每個瀏覽器 + 網域，也就是說你可以針對 www\.example1.com 網域在所有的分頁中開啟六個 SSE 連線，另一個網域 www\.example2.com 也可以開啟六個（根據 [Stackoverflow](https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource/5326159)）。當使用 HTTP/2 時最大同時 _HTTP streams_ 連線數是由伺服器和客戶端之間協調（預設 100）。 ## 從伺服器發送事件 @@ -97,7 +97,7 @@ while (true) { 迴圈的執行會獨立於連線的狀態，，所以在迴圈裡必須檢查連線的狀態，若斷線了要關閉連線（譬如，客戶端關閉了網頁）。 > [!NOTE] -> 你可以從下列的 Github 文章中找到包含本文所使用程式碼的完整範例 —— 參考 [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> 你可以從下列的 Github 文章中找到包含本文所使用程式碼的完整範例——參考 [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/main/server-sent-events) ## 錯誤處理 @@ -133,7 +133,7 @@ evtSource.close(); - `event` - : 事件的類型。如果有指定則在瀏覽器端會對該事件名稱的監聽器發布事件；網頁的原始碼必須使用 `addEventListener()` 來監聽已命名的事件。 `onmessage` 處理器只有在訊息沒有指定事件名稱時才會被呼叫。 - `data` - - : 訊息的資料欄位。當 EventSource 連續接收到多列以 `data:` 開頭的內容；[它會串接這些內容](http://www.w3.org/TR/eventsource/#dispatchMessage)並為每一列插入一個換行字元。最後的換行會被移除。 + - : 訊息的資料欄位。當 EventSource 連續接收到多列以 `data:` 開頭的內容；[它會串接這些內容](https://html.spec.whatwg.org/multipage/#dispatchMessage)並為每一列插入一個換行字元。最後的換行會被移除。 - `id` - : {{domxref("EventSource")}} 物件的最新一個事件 ID 。 - `retry` diff --git a/files/zh-tw/web/api/web_audio_api/index.md b/files/zh-tw/web/api/web_audio_api/index.md index 40aa00a46af7d9..a243931aef366e 100644 --- a/files/zh-tw/web/api/web_audio_api/index.md +++ b/files/zh-tw/web/api/web_audio_api/index.md @@ -51,9 +51,9 @@ Web Audio API 亦可控制音訊的空間定位 (Spatialized) 作業：透過 so ## 線上教學 - 使用 Web Audio API -- [Getting Started with the Web Audio API](http://www.html5rocks.com/tutorials/webaudio/intro/) (僅說明 WebKit-only 的非標準建置) -- [混合定位音訊 (Positional Audio) 與 WebGL](http://www.html5rocks.com/tutorials/webaudio/positional_audio/) -- [以 Web Audio API 開發遊戲音訊](http://www.html5rocks.com/tutorials/webaudio/games/) +- [Getting Started with the Web Audio API](https://web.dev/articles/webaudio-intro) (僅說明 WebKit-only 的非標準建置) +- [混合定位音訊 (Positional Audio) 與 WebGL](https://web.dev/articles/webaudio-positional-audio) +- [以 Web Audio API 開發遊戲音訊](https://web.dev/articles/webaudio-games) - [將 webkitAudioContext 程式碼移植為標準的 AudioContext](/zh-TW/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext) ## 規格 diff --git a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md index 299fd4e9cc616b..6a87b0fc0724f3 100644 --- a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md +++ b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md @@ -24,11 +24,11 @@ worker 可以產生新 worker，只要新 worker 的來源 (origin) 和父頁面 ## Dedicated workers -dedicated worker 只能被產生它的檔案存取，下面我們先介紹簡單的 [Basic dedicated worker example](https://github.com/mdn/simple-web-worker) ([run dedicated worker](http://mdn.github.io/simple-web-worker/)) 範例。這個範例會將兩個數字送入 worker 相乘，然後再於前端頁面顯示相乘結果。 +dedicated worker 只能被產生它的檔案存取，下面我們先介紹簡單的 [Basic dedicated worker example](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-web-worker) ([run dedicated worker](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/)) 範例。這個範例會將兩個數字送入 worker 相乘，然後再於前端頁面顯示相乘結果。 ### 偵測 Worker 功能 -為了向下相容、避免錯誤，最好是確保 worker 存在後再取用之 ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js)): +為了向下相容、避免錯誤，最好是確保 worker 存在後再取用之（[main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js)）： ```js if (window.Worker) { @@ -40,7 +40,7 @@ if (window.Worker) { ### 產生 dedicated worker -只要呼叫 {{domxref("Worker.Worker", "Worker()")}} 建構子，傳入 JS 檔案的 URI，便可以生成一個 worker 執行緒 ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js)): +只要呼叫 {{domxref("Worker.Worker", "Worker()")}} 建構子，傳入 JS 檔案的 URI，便可以生成一個 worker 執行緒（[main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js)）： ```js hidden var myWorker = new Worker("worker.js"); @@ -48,7 +48,7 @@ var myWorker = new Worker("worker.js"); ### 和 dedicated worker 發送訊息 -{{domxref("Worker.postMessage", "postMessage()")}} 方法以及 {{domxref("Worker.onmessage", "onmessage")}} 事件處理器就是和 worker 發送訊息的關鍵 ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js)): +{{domxref("Worker.postMessage", "postMessage()")}} 方法以及 {{domxref("Worker.onmessage", "onmessage")}} 事件處理器就是和 worker 發送訊息的關鍵（[main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js)）： ```js first.onchange = function () { @@ -64,7 +64,7 @@ second.onchange = function () { 範例中有兩個 {{htmlelement("input")}} 元素，first 和 second，當元素值改變時，我們會利用 postMessage() 方法告訴 worker 改變的值 (這邊用陣列，也可以用其他類別)。 -然後在 worker 裡我們從 `onmessage` 接收訊息 ([worker.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js)): +然後在 worker 裡我們從 `onmessage` 接收訊息（[worker.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/worker.js)）： ```js onmessage = function (e) { @@ -88,17 +88,18 @@ myWorker.onmessage = function (e) { 拿到存在事件 data 中的計算值後，我們接著將值以 `textContent` 顯示出來。 -> **備註：** `建構 Worker` 的 URI 必須遵從[same-origin policy](/zh-TW/docs/Web/Security/Same-origin_policy)。目前各家瀏覽器在這方面存有歧異，Gecko 10.0 以後允許 data URI 而 Internet Explorer 10 不允許 Blob URI。 +> [!NOTE] +> 建構 `Worker` 的 URI 必須遵從[same-origin policy](/zh-TW/docs/Web/Security/Same-origin_policy)。目前各家瀏覽器在這方面存有歧異，Gecko 10.0 以後允許 data URI 而 Internet Explorer 10 不允許 Blob URI。 > [!NOTE] -> 在主執行緒中存取 `onmessage` `與 postMessage` 需要主動掛在 worker 物件上，在 worker 執行緒則不用，這是因為 worker 執行緒的全域物件便是 worker 物件。 +> 在主執行緒中存取 `onmessage` 與 `postMessage` 需要主動掛在 worker 物件上，在 worker 執行緒則不用，這是因為 worker 執行緒的全域物件便是 worker 物件。 > [!NOTE] > 和 worker 傳送的資料並非共享而是複製一份後傳送，詳細請參照 [和 workers 傳遞資料：更多細節](#和_workers_傳遞資料：更多細節)。 ### 結束 worker -`在主執行緒裡呼叫` {{domxref("Worker", "terminate")}} 就可結束 worker : +在主執行緒裡呼叫 {{domxref("Worker", "terminate")}} 就可結束 worker: ```js myWorker.terminate(); @@ -146,7 +147,7 @@ importScripts("foo.js", "bar.js"); /* imports two scripts */ ## Shared workers -shared worker 能夠被多個程式腳本存取，縱使跨越不同 window、iframe 或 worker。這邊的 [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](http://mdn.github.io/simple-shared-worker/)) 範例和 dedicated worker 範例類似，但多了兩個可以讓多個檔案存取的函數：_數字相乘以及數字平方_。 +shared worker 能夠被多個程式腳本存取，縱使跨越不同 window、iframe 或 worker。這邊的 [Basic shared worker example](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker) ([run shared worker](https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/)) 範例和 dedicated worker 範例類似，但多了兩個可以讓多個檔案存取的函數：_數字相乘以及數字平方_。 請注意 dedicated worker 與 shared worker 間的差異處，範例裡會有兩份 HTML 頁面，各自都利用同一個 worker 處理運算。 @@ -158,7 +159,7 @@ shared worker 能夠被多個程式腳本存取，縱使跨越不同 window、if ### 產生 shared worker -和 dedicated worker 做法差不多，只是用另一個 SharedWorker 建構子來產生 shared worker，見 [index.html](https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html) 和 [index2.html](http://mdn.github.io/simple-shared-worker/index2.html): +和 dedicated worker 做法差不多，只是用另一個 SharedWorker 建構子來產生 shared worker，見 [index.html](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/index.html) 和 [index2.html](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/index2.html): ```js var myWorker = new SharedWorker("worker.js"); @@ -166,7 +167,7 @@ var myWorker = new SharedWorker("worker.js"); 相當不 一樣的是和 shared worker 溝通必須要透過 port 物件，其實 dedicated worker 也是如此，只不過一切是在背景後自動完成。 -開啟 port 連線一是在 onmessage 事件下背景完成，二是藉由主動呼叫 start() 好開始傳送訊息。範例 [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) 以及 [worker.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js) 因為註冊了 onmessage 事件，所以其實可以省略呼叫 start()，然而若是 message 事件是經由 `addEventListener()註冊，那麼便需要呼叫 start() 了。` +開啟 port 連線一是在 onmessage 事件下背景完成，二是藉由主動呼叫 start() 好開始傳送訊息。範例 [multiply.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/multiply.js) 以及 [worker.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/worker.js) 因為註冊了 onmessage 事件，所以其實可以省略呼叫 start()，然而若是 message 事件是經由 `addEventListener()` 註冊，那麼便需要呼叫 start() 了。 當使用 start() 開啟 port 連線，那麼雙向溝通便需要主執行緒和 worker 兩端都呼叫 start()。 @@ -180,7 +181,7 @@ port.start(); // called in worker thread, assuming the port variable references ### 和 shared worker 發送訊息 -如同前面，現在可以呼叫 `postMessage()` 發送訊息，只不過這次需要透過 port 物件 (一樣請參考 [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) 和 [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js)): +如同前面，現在可以呼叫 `postMessage()` 發送訊息，只不過這次需要透過 port 物件（一樣請參考 [multiply.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/multiply.js) 和 [square.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/square.js)）： ```js squareNumber.onchange = function () { @@ -189,7 +190,7 @@ squareNumber.onchange = function () { }; ``` -worker 方面也增加了一些程式碼 ([worker.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js)): +worker 方面也增加了一些程式碼（[worker.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/worker.js)）： ```js onconnect = function (e) { @@ -208,7 +209,7 @@ onconnect = function (e) { 取得 port 之後，我們註冊 port 上的 onmessage 事件，當有訊息進來便取回資料進行運算後回傳回去；註冊 onmessage 事件的同時也自動建立連線，所以說不需要呼叫 start() 了。 -最後在主執行緒端，我們同樣由 onmessage 事件取回回傳過來的訊息 (一樣請參考 [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) 和 [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js)): +最後在主執行緒端，我們同樣由 onmessage 事件取回回傳過來的訊息（一樣請參考 [multiply.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/multiply.js) 和 [square.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-shared-worker/square.js)）： ```js myWorker.port.onmessage = function (e) { @@ -227,7 +228,7 @@ myWorker.port.onmessage = function (e) { 和 workers 傳遞的資料會先被複製一份，而非共享；經過序列化後 (serialized) 傳輸，然後在另一端反序列化 (de-serialized) 取出，大部份的瀏覽器都是以 [結構化複製 (structured cloning)](/zh-TW/docs/Web/Guide/API/DOM/The_structured_clone_algorithm) 實作這項特色. -下面的 `emulateMessage() 會模擬和 worker 傳遞訊息時，複製資料的行為。` +下面的 `emulateMessage()` 會模擬和 worker 傳遞訊息時，複製資料的行為。 ```js function emulateMessage(vVal) { @@ -299,7 +300,7 @@ onmessage = function (oEvent) { #### 範例 1: 非同步 `eval()` -下面透過 [data URL](/zh-TW/docs/Web/HTTP/data_URIs) 和 `eval()，`示範如何在 worker 非同步執行允許的程式碼： +下面透過 [data URL](/zh-TW/docs/Web/HTTP/data_URIs) 和 `eval()`，示範如何在 worker 非同步執行允許的程式碼： ```js // Syntax: asyncEval(code[, listener]) diff --git a/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index ab689785358668..fa585727481092 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -266,12 +266,12 @@ function drawScene(gl, programInfo, buffers) { ## 矩陣運算 -矩陣的運算看起來很複雜，但其實[一步一步運算其實不會那麼困難](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html)。大部分使用者不會寫自己的運算函數，多半是使用現成的矩陣函數庫，這個例子中我們用的是 [glMatrix library](http://glmatrix.net/) 。 +矩陣的運算看起來很複雜，但其實[一步一步運算其實不會那麼困難](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html)。大部分使用者不會寫自己的運算函數，多半是使用現成的矩陣函數庫，這個例子中我們用的是 [glMatrix library](https://glmatrix.net/) 。 可參考以下資料 - [Matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) on WebGLFundamentals -- [Matrices](http://mathworld.wolfram.com/Matrix.html) on Wolfram MathWorld -- [Matrix]() on Wikipedia +- [Matrices](https://mathworld.wolfram.com/Matrix.html) on Wolfram MathWorld +- [Matrix](https://zh.wikipedia.org/wiki/矩阵) on Wikipedia {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} diff --git a/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 2b5f05c1d8f29a..6da7b029680d39 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL {{DefaultAPISidebar("WebGL")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} -[WebGL](http://www.khronos.org/webgl/) 讓網頁內容能藉由一種基於 [OpenGL ES](http://www.khronos.org/opengles/) 2.0 的 API 的幫助，於支援此 API 的瀏覽器環境中，不需使用外掛程式就能在 HTML 的 [`canvas`](/zh-TW/docs/Web/API/Canvas_API) 元素中實現二維及三維渲染。 WebGL 程式包含了由 JavaSrcipt 及著色器(GLSL)撰寫的控制碼以及在電腦的圖形處理器( GPU )上執行的特效程式碼(著色器程式碼)。WebGL 元素可以加入其他 HTML 元素之中並與網頁或網頁背景的其他部分混合。 +[WebGL](https://www.khronos.org/webgl/) 讓網頁內容能藉由一種基於 [OpenGL ES](https://www.khronos.org/opengles/) 2.0 的 API 的幫助，於支援此 API 的瀏覽器環境中，不需使用外掛程式就能在 HTML 的 [`canvas`](/zh-TW/docs/Web/API/Canvas_API) 元素中實現二維及三維渲染。 WebGL 程式包含了由 JavaSrcipt 及著色器(GLSL)撰寫的控制碼以及在電腦的圖形處理器( GPU )上執行的特效程式碼(著色器程式碼)。WebGL 元素可以加入其他 HTML 元素之中並與網頁或網頁背景的其他部分混合。 這篇文章將會向你介紹 WebGL 的基礎。這篇文章假設你已經對於三維圖學涉及的數學有所了解，並且它將不會被佯裝為三維圖學的教材。在我們的學習區域內有初學者指南讓你完成編程任務：[Learn WebGL for 2D and 3D graphics](/zh-TW/docs/Learn/WebGL). @@ -64,8 +64,7 @@ function main() { ## 亦可參考 -- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/): 由 Luz Caballero 撰寫，並出版在 dev.opera.com。 這篇文章點出了 WebGL 的意義，解釋了其運作(包含渲染管路的觀念)，並介紹了一些 WebGL libraries。 -- [WebGL Fundamentals](http://webglfundamentals.org/) -- [An intro to modern OpenGL:](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) 由 Joe Groff 撰寫的一系列關於 OpenGL 的好文章，提供了 OpenGL 清楚的簡介，從其歷史到重要的圖像管路概念，以及一些展示其原理的範例。如果你完全不懂 OpenGL，這將是一個好的入門介紹。 +- [WebGL Fundamentals](https://webglfundamentals.org/) +- [An intro to modern OpenGL:](https://duriansoftware.com/joe/an-intro-to-modern-opengl.-table-of-contents) 由 Joe Groff 撰寫的一系列關於 OpenGL 的好文章，提供了 OpenGL 清楚的簡介，從其歷史到重要的圖像管路概念，以及一些展示其原理的範例。如果你完全不懂 OpenGL，這將是一個好的入門介紹。 {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} diff --git a/files/zh-tw/web/api/webgl_api/tutorial/index.md b/files/zh-tw/web/api/webgl_api/tutorial/index.md index 70f703fdbc99b8..0d2217bb9af93e 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebGL_API/Tutorial {{DefaultAPISidebar("WebGL")}} -[WebGL](http://www.khronos.org/webgl/) 讓網頁內容可以使用一個基於 [OpenGL ES](http://www.khronos.org/opengles/) 2.0 的 API 以在 HTML {{HTMLElement("canvas")}}中執行 3D 渲染，且瀏覽器無需使用任何 plug-in。WebGL programs 由 JavaScript 撰寫的指令碼以及透過電腦的 Graphics Processing Unit (GPU)上運行的特殊效果程式碼(shader code)組成。WebGL 元件可與其他 HTML 元件混合，並與該頁的其他部分或該頁背景組合使用。 +[WebGL](https://www.khronos.org/webgl/) 讓網頁內容可以使用一個基於 [OpenGL ES](https://www.khronos.org/opengles/) 2.0 的 API 以在 HTML {{HTMLElement("canvas")}}中執行 3D 渲染，且瀏覽器無需使用任何 plug-in。WebGL programs 由 JavaScript 撰寫的指令碼以及透過電腦的 Graphics Processing Unit (GPU)上運行的特殊效果程式碼(shader code)組成。WebGL 元件可與其他 HTML 元件混合，並與該頁的其他部分或該頁背景組合使用。 本教學描述如何使用 `` 元件描繪 WebGL 圖像/圖形, 從基礎開始。提供的範例將讓你對於可以用 WebGL 做到什麼有清楚的概念，並提供程式碼片段讓你可以著手建立自己的內容。 diff --git a/files/zh-tw/web/api/websocket/index.md b/files/zh-tw/web/api/websocket/index.md index e70499e5e049e8..08203cc2ba5553 100644 --- a/files/zh-tw/web/api/websocket/index.md +++ b/files/zh-tw/web/api/websocket/index.md @@ -103,11 +103,10 @@ void send( > [!NOTE] > Gecko `send()` 方法的實作與 Gecko 6.0 的規範有差別。Gecko 回傳一個 `boolean` 以表示連線是否仍處於開啟狀態（且資料成功隊列／傳輸）。另外，此時此刻，Gecko 不支援 [`ArrayBuffer`](/zh_tw/JavaScript_typed_arrays/ArrayBuffer) 或 {{ domxref("Blob") }} 作為資料形態。 -## 參見 +## 瀏覽器相容性 -- [製作 WebSocket 客戶端應用程式](/zh_tw/WebSockets/Writing_WebSocket_client_applications) -- [HTML5: WebSockets](http://dev.w3.org/html5/websockets/) +{{Compat}} -## 瀏覽器兼容 +## 參見 -{{Compat}} +- [製作 WebSocket 客戶端應用程式](/zh-TW/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) diff --git a/files/zh-tw/web/api/websockets_api/index.md b/files/zh-tw/web/api/websockets_api/index.md index 9bec44f0f5b104..d6460b9a484ac6 100644 --- a/files/zh-tw/web/api/websockets_api/index.md +++ b/files/zh-tw/web/api/websockets_api/index.md @@ -69,11 +69,11 @@ WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。 -## 參見 +## 瀏覽器相容性 -- [WebSocket API Specification](http://dev.w3.org/html5/websockets/) -- [Server-Sent Events](/zh-TW/Server-sent_events) +{{Compat}} -## 瀏覽器兼容 +## 參見 -{{Compat}} +- [WebSocket API Specification](https://websockets.spec.whatwg.org/) +- [Server-Sent Events](/zh-TW/docs/Web/API/Server-sent_events) diff --git a/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md index af19b5d5c29f5d..d606bd637f6bff 100644 --- a/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -179,4 +179,4 @@ mySocket.close(); ## 參考資料 -[IETF: The WebSocket protocol draft-abarth-thewebsocketprotocol-01](https://tools.ietf.org/html/draft-abarth-thewebsocketprotocol-01) +[IETF: The WebSocket protocol draft-abarth-thewebsocketprotocol-01](https://datatracker.ietf.org/doc/html/draft-abarth-thewebsocketprotocol-01) diff --git a/files/zh-tw/web/api/webvtt_api/index.md b/files/zh-tw/web/api/webvtt_api/index.md index bb68dc21bbd752..cf568c06348b6e 100644 --- a/files/zh-tw/web/api/webvtt_api/index.md +++ b/files/zh-tw/web/api/webvtt_api/index.md @@ -544,7 +544,7 @@ That's <00:00:21.000>amore ``` - **Ruby tag** (``) - - : Used with ruby text tags to display [ruby characters](http://en.wikipedia.org/wiki/Ruby_character) (i.e. small annotative characters above other characters). + - : Used with ruby text tags to display [ruby characters](https://en.wikipedia.org/wiki/Ruby_character) (i.e. small annotative characters above other characters). ##### Example 18 - Ruby tag @@ -553,7 +553,7 @@ That's <00:00:21.000>amore ``` - **Ruby text tag** (``) - - : Used with ruby tags to display [ruby characters](http://en.wikipedia.org/wiki/Ruby_character) (i.e. small annotative characters above other characters). + - : Used with ruby tags to display [ruby characters](https://en.wikipedia.org/wiki/Ruby_character) (i.e. small annotative characters above other characters). ##### Example 19 - Ruby text tag diff --git a/files/zh-tw/web/api/window/popstate_event/index.md b/files/zh-tw/web/api/window/popstate_event/index.md index fb476d12287e1c..6901d6b7b0eff3 100644 --- a/files/zh-tw/web/api/window/popstate_event/index.md +++ b/files/zh-tw/web/api/window/popstate_event/index.md @@ -49,7 +49,7 @@ history.go(2); // 跳出 "location: http://example.com/example.html?page=3, stat ## 標準 -- [HTML5 popstate event](http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate) +- [HTML5 popstate event](https://html.spec.whatwg.org/#handler-window-onpopstate) ## 請參照 diff --git a/files/zh-tw/web/api/window/requestanimationframe/index.md b/files/zh-tw/web/api/window/requestanimationframe/index.md index 36526627dd663c..e49102e45202af 100644 --- a/files/zh-tw/web/api/window/requestanimationframe/index.md +++ b/files/zh-tw/web/api/window/requestanimationframe/index.md @@ -65,8 +65,7 @@ Edge 低於 17 的版本和 Internet Explorer 無法保證在繪製循環前觸 - {{domxref("Window.mozAnimationStartTime")}} - {{domxref("Window.cancelAnimationFrame()")}} - [mozRequestAnimationFrame](https://robert.ocallahan.org/2010/08/mozrequestanimationframe-frame-rate_17.html) - Blog post -- [requestAnimationFrame for smart animating](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) - Blog post +- [requestAnimationFrame for smart animating](https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/) - Blog post - [Animating with javascript: from setInterval to requestAnimationFrame](http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/) - Blog post -- [Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1](http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx) - Blog post -- [TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations](http://www.testufo.com/#test=animation-time-graph) +- [TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations](https://www.testufo.com/#test=animation-time-graph) - Paul Irish: [requestAnimationFrame API: now with sub-millisecond precision](http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision) diff --git a/files/zh-tw/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/zh-tw/web/api/xmlhttprequest/xmlhttprequest/index.md index e19f37b3665f1c..12daa23770249a 100644 --- a/files/zh-tw/web/api/xmlhttprequest/xmlhttprequest/index.md +++ b/files/zh-tw/web/api/xmlhttprequest/xmlhttprequest/index.md @@ -25,7 +25,7 @@ const request = new XMLHttpRequest(); ## 非標準的 Firefox 語法 -Firefox 16 added a non-standard parameter to the constructor that can enable anonymous mode (see [Firefox bug 692677](https://bugzil.la/692677)). Setting the `mozAnon` flag to `true` effectively resembles the [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) constructor described in older versions of the XMLHttpRequest specification. +Firefox 16 added a non-standard parameter to the constructor that can enable anonymous mode (see [Firefox bug 692677](https://bugzil.la/692677)). Setting the `mozAnon` flag to `true` effectively resembles the [`AnonXMLHttpRequest()`](https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) constructor described in older versions of the XMLHttpRequest specification. ```js const request = new XMLHttpRequest(paramsDictionary); @@ -38,7 +38,7 @@ const request = new XMLHttpRequest(paramsDictionary); - : There are two flags you can set: - `mozAnon` - - : Boolean: Setting this flag to `true` will cause the browser not to expose the {{Glossary("origin")}} and [user credentials](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials) when fetching resources. Most important, this means that {{Glossary("Cookie", "cookies")}} will not be sent unless explicitly added using setRequestHeader. + - : Boolean: Setting this flag to `true` will cause the browser not to expose the {{Glossary("origin")}} and [user credentials](https://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials) when fetching resources. Most important, this means that {{Glossary("Cookie", "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 {{Glossary("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](https://bugzil.la/692677)); it does not work on arbitrary webpages loaded in Firefox_ diff --git a/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md index 771cf959d54f98..73926d88096984 100644 --- a/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md +++ b/files/zh-tw/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md @@ -41,7 +41,7 @@ oReq.send(); ### 分析及操作含有 HTML 文件的 `responseText` 屬性 > [!NOTE] -> W3C 的[XMLHttpRequest](https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) 規範允許透過 `XMLHttpRequest.responseXML` 屬性（{{Glossary("property/JavaScript", "property")}}）來解析 HTML。相關細節請參考 [HTML in XMLHttpRequest](/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest) 一文。 +> W3C 的[XMLHttpRequest](https://xhr.spec.whatwg.org/) 規範允許透過 `XMLHttpRequest.responseXML` 屬性（{{Glossary("property/JavaScript", "property")}}）來解析 HTML。相關細節請參考 [HTML in XMLHttpRequest](/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest) 一文。 若透過 `XMLHttpRequest` 來取得一個遠端的 HTML 網頁內容，則 `responseText` 屬性（{{Glossary("property/JavaScript", "property")}}）會是「一串（soup）」包含所有 HTML 標籤的字串。這可能使得在分析和操作上造成困難，以下有三種主要分析此一大串 HTML 字串的方式： diff --git a/files/zh-tw/web/css/@font-face/index.md b/files/zh-tw/web/css/@font-face/index.md index ea6619d1b4eb2a..c815f92e7c2750 100644 --- a/files/zh-tw/web/css/@font-face/index.md +++ b/files/zh-tw/web/css/@font-face/index.md @@ -106,7 +106,6 @@ You can specify a font on the user's local computer by name using the `local()` - [About WOFF](/zh-TW/docs/WOFF) - [FontSquirrel @font-face generator](https://www.fontsquirrel.com/fontface/generator) - [Beautiful fonts with @font-face](https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/) -- [Open Font Library](https://openfontlibrary.org/) -- [Microsoft Developer Network (MSDN) @font-face reference]() -- [When can I use WOFF?](http://caniuse.com/woff) -- [When can I use SVG Fonts?](http://caniuse.com/svg-fonts) +- [Open Font Library](https://fontlibrary.org/) +- [When can I use WOFF?](https://caniuse.com/woff) +- [When can I use SVG Fonts?](https://caniuse.com/svg-fonts) diff --git a/files/zh-tw/web/css/_colon_lang/index.md b/files/zh-tw/web/css/_colon_lang/index.md index b9e7e64ffa9c59..bb3b3a310603f7 100644 --- a/files/zh-tw/web/css/_colon_lang/index.md +++ b/files/zh-tw/web/css/_colon_lang/index.md @@ -73,4 +73,4 @@ slug: Web/CSS/:lang - 語言相關偽類： {{cssxref(":lang")}}, {{cssxref(":dir")}} - HTML [`lang`](/zh-TW/docs/Web/HTML/Global_attributes#lang) 屬性 -- [BCP 47 - Tags for Identifying Languages (BCP 47 - 識別語言的標籤)](https://tools.ietf.org/html/bcp47) +- [BCP 47——識別語言的標籤](https://www.rfc-editor.org/info/bcp47) diff --git a/files/zh-tw/web/css/box-shadow/index.md b/files/zh-tw/web/css/box-shadow/index.md index 1b25dcf206def4..56b572a2b20a39 100644 --- a/files/zh-tw/web/css/box-shadow/index.md +++ b/files/zh-tw/web/css/box-shadow/index.md @@ -54,8 +54,8 @@ box-shadow: ## 範例 - [CSS box-shadow examples](https://techmoon.xyz/css-box-shadow-examples-by-css-scan/) -- [box-shadow test](http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html) -- [box-shadow tutorial and examples](http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/) +- [box-shadow test](http://elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html) +- [box-shadow tutorial and examples](https://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/) ```plain box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; diff --git a/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index 18cca55d3feaab..087ea87e461422 100644 --- a/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/zh-tw/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -11,9 +11,6 @@ CSS3 **彈性盒子**，又稱**flexbox**，是為了適應不同螢幕尺寸和 一些時髦的佈局，也能因而透過更簡潔的程式碼完成。這種有意的獨立性只影響視覺渲染，基於 HTML 原始碼的語意順序及瀏覽不會受到影響。 -> [!NOTE] -> 儘管 [CSS 彈性盒子佈局規範](http://www.w3.org/TR/css3-flexbox/)還處於最終徵求意見稿（Last Call Working Draft）階段（參見[最新編輯草案](http://dev.w3.org/csswg/css-flexbox/)）、也不是所有瀏覽器都實做彈性盒子的所有功能。但這麼說好了，現在主流的瀏覽器，都對 flexbox 有著良好的支持。請參見[相容性表格](/zh-TW/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility)的具體屬性，以獲取最新的相容狀態。 - ## 彈性盒子的概念 Flex 排版的大致定義，是能更改該項目的長與（或）高，以便貼合任何顯示設備的空間。Flex container 能針對該元件擴張以便填補可用的空間、或收縮以便阻止空間溢出。 @@ -252,7 +249,7 @@ Recall that while the display order of the elements is independent of their orde 以下提供一些與彈性盒子相關的網站讓你親手操作： -- [Flexbox Playground](http://demo.agektmr.com/flexbox/) +- [Flexbox Playground](https://demo.agektmr.com/flexbox/) - [Flexy Boxes](http://the-echoplex.net/flexyboxes) - [Flexbox Properties Demonstration](https://codepen.io/justd/pen/yydezN) - [Flexbox Froggy](http://flexboxfroggy.com/) diff --git a/files/zh-tw/web/css/css_grid_layout/index.md b/files/zh-tw/web/css/css_grid_layout/index.md index 1b9d1d39430299..6da8dbc4e2dec5 100644 --- a/files/zh-tw/web/css/css_grid_layout/index.md +++ b/files/zh-tw/web/css/css_grid_layout/index.md @@ -143,8 +143,8 @@ slug: Web/CSS/CSS_grid_layout ## 外部資源 -- [Jen Simmons 的示範](http://labs.jensimmons.com/) -- [格線示例：一些影片教學與使用範例](http://gridbyexample.com/) +- [Jen Simmons 的示範](https://labs.jensimmons.com/) +- [格線示例：一些影片教學與使用範例](https://gridbyexample.com/) - [Codrops 格線參考](https://tympanus.net/codrops/css_reference/grid/) - [Firefox DevTools CSS Grid Inspector](/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) - [CSS Grid Playground](https://mozilladevelopers.github.io/playground/) diff --git a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md index 1ac9df5566c336..937589be459304 100644 --- a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md +++ b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.md @@ -40,8 +40,6 @@ CSS transitions 和 CSS animations 中可以用來修改的屬性在 [CSS animat 漸變函式可用來定義轉場發生的時間曲線。其規範方式是以四個參數的貝茲曲線代表。 -[CSS transition function manipulator](http://cssglue.com/cubic) 是一個可以讓你非常容易以視覺化方式了解轉場流程的工具。 - 除了自行定義之外，尚有幾個已經預先定義好的函式： - **ease**, 等同於 `cubic-bezier(0.25, 0.1, 0.25, 1.0)` @@ -394,8 +392,8 @@ function updateTransition() { ## 更多資訊 -- [CSS Transitions](http://dev.w3.org/csswg/css3-transitions/) -- [CSS Transitions Module Level 3](http://www.w3.org/TR/css3-transitions) +- [CSS Transitions](https://drafts.csswg.org/css-transitions-1/) +- [CSS Transitions Module Level 3](https://www.w3.org/TR/css-transitions-1/) - [CSS animatable properties](http://oli.jp/2010/css-animatable-properties/) - {{ cssxref("-moz-transition") }} - {{ cssxref("-moz-transition-property") }} diff --git a/files/zh-tw/web/css/grid-template/index.md b/files/zh-tw/web/css/grid-template/index.md index d7e0bc344c66a2..d72cf53270d132 100644 --- a/files/zh-tw/web/css/grid-template/index.md +++ b/files/zh-tw/web/css/grid-template/index.md @@ -124,4 +124,4 @@ footer { - Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}} - Grid Layout Guide: _[Line-based placement with CSS Grid](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/zh-TW/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#Grid_definition_shorthands)_ -- Video tutorial:_ [Grid Template shorthand](http://gridbyexample.com/video/grid-template-shorthand/)_ +- Video tutorial: [Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/) diff --git a/files/zh-tw/web/css/index.md b/files/zh-tw/web/css/index.md index 2ce7f06ba4d38d..10200300365ceb 100644 --- a/files/zh-tw/web/css/index.md +++ b/files/zh-tw/web/css/index.md @@ -7,7 +7,7 @@ slug: Web/CSS **層疊樣式表**（Cascading Style Sheets, CSS）是用來描述 [HTML](/zh-TW/docs/Web/HTML) 或 [XML](/zh-TW/docs/XML)（包含 [SVG](/zh-TW/docs/Web/SVG) 或 [XHTML](/zh-TW/docs/Glossary/XHTML) 等各種 XML 變形）文件外觀的[樣式表](/zh-TW/docs/DOM/stylesheet)語言。CSS 會描述文件裡的結構化元素，該如何呈現在螢幕、紙、語音報讀、或其他媒介上。 -**CSS** 是**開放網路**的核心語言之一，具有標準化的 [W3C 規範](https://w3.org/Style/CSS/#specs)。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 CSS3 目前被分作數個較小的模組，持續在標準化的路上行進。 +**CSS** 是**開放網路**的核心語言之一，具有標準化的 [W3C 規範](https://www.w3.org/Style/CSS/#specs)。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 CSS3 目前被分作數個較小的模組，持續在標準化的路上行進。 - CSS 介紹 @@ -51,11 +51,9 @@ slug: Web/CSS ## CSS 開發工具 -- The [W3C CSS 驗證服務](http://jigsaw.w3.org/css-validator/) 能檢查 CSS 的有效性。[OnlineWebCheck.com](http://www.onlinewebcheck.com/) 也在做相同的事情。它們都是很重要的除錯工具。 +- The [W3C CSS 驗證服務](https://jigsaw.w3.org/css-validator/) 能檢查 CSS 的有效性。它是很重要的除錯工具。 - [Firefox 開發者工具](https://firefox-source-docs.mozilla.org/devtools-user/index.html)能透過[頁面檢測器](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)與[樣式編輯器](https://firefox-source-docs.mozilla.org/devtools-user/style_editor/index.html)直接觀察、編輯網頁的 CSS。 -- Firefox 的[Firebug 套件](https://addons.mozilla.org/zh-TW/firefox/addon/1843)，navigator 裡面，能直接觀察、編輯網頁的 CSS 的人氣套件。要測試某些變化的時候會非常實用，而這套件還能做得更多。 -- Firefox 的[Web Developer 套件](https://addons.mozilla.org/zh-TW/firefox/addon/60) 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。 -- [其他 CSS 工具。](/zh-TW/docs/Web/CSS/Tools) +- Firefox 的[Web Developer 套件](https://addons.mozilla.org/zh-TW/firefox/addon/web-developer/) 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。 ## Meta 錯誤 diff --git a/files/zh-tw/web/events/creating_and_triggering_events/index.md b/files/zh-tw/web/events/creating_and_triggering_events/index.md index 0691eac6ff95b5..d622e2ca59cae2 100644 --- a/files/zh-tw/web/events/creating_and_triggering_events/index.md +++ b/files/zh-tw/web/events/creating_and_triggering_events/index.md @@ -65,7 +65,7 @@ elem.dispatchEvent(event); ## 觸發自定義事件 -下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 [觀看實例](http://developer.mozilla.org/samples/domref/dispatchEvent.html)。 +下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 [觀看實例](https://mdn.dev/archives/media/samples/domref/dispatchEvent.html)。 ```js function simulateClick() { diff --git a/files/zh-tw/web/html/attributes/index.md b/files/zh-tw/web/html/attributes/index.md index 1cf1c086e4c253..7e63afe7feef85 100644 --- a/files/zh-tw/web/html/attributes/index.md +++ b/files/zh-tw/web/html/attributes/index.md @@ -135,7 +135,7 @@ IDL 屬性也被稱為 JavaScript 特性。你可以使用 JavaScript 特性的 IDL 屬性並非永遠的字串 ; 舉例來說，input.maxlength 便是一個數字(型態為 signed long)。當使用 IDL 屬性，你會閱讀或是設定所需的型態，而當你設定 input.maxlength 時，它總是回傳一個數字，因為它正需要一個數字。如果你傳入別的型態，它會依照標準 JavaScript 型態轉換規則，將傳入值轉成一個數字。 -IDL 屬性可以 [反應其他型態](http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes)，例如 unsigned long、URLs、booleans，等等。不幸的是，並沒有明確的規則來規範，而且與 IDL 屬性行為相對應的內容屬性連結中，也沒有取決於該屬性的方式。在大部分的時間裡，它會遵守 [規範中所制定的規則](http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes)，但有時候它並不會。HTML 規範嘗試讓它變得容易使用，但由於各種原因 (大多是因為歷史)，有些屬性表現得很奇怪 (舉例來說，select.size)，而你應該詳細閱讀規範以了解各個屬性的行為。 +IDL 屬性可以 [反應其他型態](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)，例如 unsigned long、URLs、booleans，等等。不幸的是，並沒有明確的規則來規範，而且與 IDL 屬性行為相對應的內容屬性連結中，也沒有取決於該屬性的方式。在大部分的時間裡，它會遵守 [規範中所制定的規則](https://html.spec.whatwg.org/multipage/urls-and-fetching.html#reflecting-content-attributes-in-idl-attributes)，但有時候它並不會。HTML 規範嘗試讓它變得容易使用，但由於各種原因 (大多是因為歷史)，有些屬性表現得很奇怪 (舉例來說，select.size)，而你應該詳細閱讀規範以了解各個屬性的行為。 ## 另請參見 diff --git a/files/zh-tw/web/html/element/fencedframe/index.md b/files/zh-tw/web/html/element/fencedframe/index.md index bcf013ff57f910..e1957045fb5c72 100644 --- a/files/zh-tw/web/html/element/fencedframe/index.md +++ b/files/zh-tw/web/html/element/fencedframe/index.md @@ -37,7 +37,7 @@ l10n: 可以通過策略在圍欄頁框內啟用的唯一功能是專為在圍欄頁框內使用而設計的特定功能： -- [受保護的受眾 API](https://developer.chrome.com/docs/privacy-sandbox/fledge/) +- [受保護的受眾 API](https://developers.google.com/privacy-sandbox/relevance/protected-audience) - `attribution-reporting` - `private-aggregation` - `shared-storage` @@ -64,7 +64,7 @@ l10n: ## 範例 -要設置 `` 中顯示的內容，需要使用 API（例如[受保護的受眾](https://developer.chrome.com/docs/privacy-sandbox/fledge/)或[共享存儲](https://developer.chrome.com/docs/privacy-sandbox/shared-storage/)）生成一個 {{domxref("FencedFrameConfig")}} 對象，然後將其設置為 `` 的 `config` 屬性的值。 +要設置 `` 中顯示的內容，需要使用 API（例如[受保護的受眾](https://developers.google.com/privacy-sandbox/relevance/protected-audience)或[共享存儲](https://developers.google.com/privacy-sandbox/relevance/shared-storage)）生成一個 {{domxref("FencedFrameConfig")}} 對象，然後將其設置為 `` 的 `config` 屬性的值。 以下範例從受保護的受眾 API 的廣告拍賣中獲取了一個 `FencedFrameConfig`，然後將其用於在 `` 中顯示獲勝的廣告： @@ -169,5 +169,5 @@ frame.config = frameConfig; ## 參見 - [圍欄頁框 API](/zh-TW/docs/Web/API/Fenced_frame_API) -- [在 developer.chrome.com 上的圍欄頁框](https://developer.chrome.com/docs/privacy-sandbox/fenced-frame/) -- [隱私沙箱](https://developer.chrome.com/docs/privacy-sandbox/) 在 developer.chrome.com 上 +- [在 developers.google.com 上的圍欄頁框](https://developers.google.com/privacy-sandbox/relevance/fenced-frame) +- 在 developers.google.com 上的[隱私沙箱](https://developers.google.com/privacy-sandbox) diff --git a/files/zh-tw/web/html/element/input/submit/index.md b/files/zh-tw/web/html/element/input/submit/index.md index cd3012acf6b656..1c32896d048136 100644 --- a/files/zh-tw/web/html/element/input/submit/index.md +++ b/files/zh-tw/web/html/element/input/submit/index.md @@ -101,7 +101,7 @@ slug: Web/HTML/Element/input/submit > 請參見 [``](/zh-TW/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button) 頁面以取得關於禁用/啟用提交按鈕的詳細資訊。 > [!NOTE] -> Firefox 不若其他瀏覽器，它預設上會在 {{HTMLElement("button")}} 跨網頁加載時[保持動態禁用狀態](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。請用 [`autocomplete`](/zh-TW/docs/Web/HTML/Element/button#autocomplete) 屬性控制這個功能。 +> Firefox 不若其他瀏覽器，它預設上會在 {{HTMLElement("button")}} 跨網頁加載時[保持動態禁用狀態](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。請用 [`autocomplete`](/zh-TW/docs/Web/HTML/Element/button#autocomplete) 屬性控制這個功能。 ## 驗證 diff --git a/files/zh-tw/web/html/element/time/index.md b/files/zh-tw/web/html/element/time/index.md index 439e63f8b95130..27f5181860165c 100644 --- a/files/zh-tw/web/html/element/time/index.md +++ b/files/zh-tw/web/html/element/time/index.md @@ -22,7 +22,7 @@ slug: Web/HTML/Element/time 和其他 HTML elements 一樣，接受所有 [global attributes](/zh-TW/docs/HTML/Global_attributes)。 - `datetime` - - : 此 attribute 用以表示日期或時間，其格式必須是[有效的日期/時間格式](http://www.w3.org/TR/html-markup/datatypes.html#common.data.datetime)。若其值不正確，則 element 就不會有關連的 time stamp. + - : 此 attribute 用以表示日期或時間，其格式必須是[有效的日期/時間格式](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#common.data.datetime)。若其值不正確，則 element 就不會有關連的 time stamp. ## 示例 diff --git a/files/zh-tw/web/html/global_attributes/data-_star_/index.md b/files/zh-tw/web/html/global_attributes/data-_star_/index.md index ff48c3608f1ac3..831b0aa93fd353 100644 --- a/files/zh-tw/web/html/global_attributes/data-_star_/index.md +++ b/files/zh-tw/web/html/global_attributes/data-_star_/index.md @@ -5,7 +5,7 @@ slug: Web/HTML/Global_attributes/data-* {{HTMLSidebar("Global_attributes")}} -**data-\*** [全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)構成一組稱作**自訂 data 屬性**的屬性。它能令 [HTML](/zh-TW/docs/Web/HTML) 與其 [DOM](/zh-TW/docs/DOM) 擁有給腳本用的交換資訊。這種屬性設置的自訂資料，能透過元素的 {{domxref("HTMLElement")}} 介面而活用。{{domxref("HTMLElement.dataset")}} property 允許訪問它們。`*` 可以是任何遵循以下規則的 [xml 名稱](http://www.w3.org/TR/REC-xml/#NT-Name)： +**data-\*** [全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)構成一組稱作**自訂 data 屬性**的屬性。它能令 [HTML](/zh-TW/docs/Web/HTML) 與其 [DOM](/zh-TW/docs/DOM) 擁有給腳本用的交換資訊。這種屬性設置的自訂資料，能透過元素的 {{domxref("HTMLElement")}} 介面而活用。{{domxref("HTMLElement.dataset")}} property 允許訪問它們。`*` 可以是任何遵循以下規則的 [xml 名稱](https://www.w3.org/TR/REC-xml/#NT-Name)： - 名字絕對不能以 `xml` 起頭，無論是否用於 xml、 - 名字絕對不能包含分號（`U+003A`）、 diff --git a/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.md b/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.md index 955645276e5d16..18f0fb329ed060 100644 --- a/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.md +++ b/files/zh-tw/web/html/quirks_mode_and_standards_mode/index.md @@ -30,7 +30,7 @@ slug: Web/HTML/Quirks_Mode_and_Standards_Mode 在 HTML5，DOCTYPE 唯一的作用是啟用標準模式。更早期的 HTML 標準會附加其他意義，但沒有任何瀏覽器會用 DOCTYPE 去做模式間互換以外的用途。 -另請參閱[不同的瀏覽器選擇不同模式](https://hsivonen.iki.fi/doctype/)的詳細說明。 +另請參閱[不同的瀏覽器選擇不同模式](https://hsivonen.fi/doctype/)的詳細說明。 ### XHTML diff --git a/files/zh-tw/web/http/basics_of_http/data_urls/index.md b/files/zh-tw/web/http/basics_of_http/data_urls/index.md index ee2d6f0130fdb1..7f0e533c7aaf33 100644 --- a/files/zh-tw/web/http/basics_of_http/data_urls/index.md +++ b/files/zh-tw/web/http/basics_of_http/data_urls/index.md @@ -63,7 +63,7 @@ base64 a.txt>b.txt ### 在 Microsoft Windows 上編碼 -在 Windows 上，可以使用 PowerShell 的 [Convert.ToBase64String](https://docs.microsoft.com/dotnet/api/system.convert.tobase64string?view=net-5.0) 進行 base64 編碼： +在 Windows 上，可以使用 PowerShell 的 [Convert.ToBase64String](https://learn.microsoft.com/en-us/dotnet/api/system.convert.tobase64string?view=net-5.0) 進行 base64 編碼： ```plain [convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) diff --git a/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md index 00c4fee9d94809..77b3fdb3a7a8e9 100644 --- a/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md +++ b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.md @@ -17,7 +17,7 @@ slug: Web/HTTP/Browser_detection_using_the_user_agent 在考慮透過用戶代理字串，去偵測使用瀏覽器時，首先要盡可能避免這種用法。先從認清**為什麼**要這麼做開始。 - 你正針對某瀏覽器的特定錯誤奮戰著？ - - : 去專業論壇閱讀或提問：你不太可能是第一個碰上問題的人。另外，去找專家、或只是與你有不同觀點的人問問看，也會對你的除錯思路有所幫助。如果問題看來頗為罕見，你應該去檢查這個錯誤是不是透過缺陷跟蹤管理系統（bug tracking system：[Mozilla](https://bugzilla.mozilla.org)、[WebKit](http://bugs.webkit.org)、[Blink](https://www.chromium.org/issue-tracking)、[Opera](https://bugs.opera.com/)）報告到瀏覽器供應商。瀏覽器供應商很重視錯誤報告，相關分析也可能提示該錯誤的其他解決辦法。 + - : 去專業論壇閱讀或提問：你不太可能是第一個碰上問題的人。另外，去找專家、或只是與你有不同觀點的人問問看，也會對你的除錯思路有所幫助。如果問題看來頗為罕見，你應該去檢查這個錯誤是不是透過缺陷跟蹤管理系統（[Mozilla](https://bugzilla.mozilla.org/)、[WebKit](https://bugs.webkit.org/)、[Blink](https://www.chromium.org/issue-tracking/)、[Opera](https://bugs.opera.com/)）報告到瀏覽器供應商。瀏覽器供應商很重視錯誤報告，相關分析也可能提示該錯誤的其他解決辦法。 - 你正試圖檢查某個特定功能是否存在？ - : 你的網站需要用到某些瀏覽器不支援的功能，並給這些用戶功能更少，但你知道能正常顯示的網站。這類用戶代理嗅探的理由非常糟糕，因為大多數的瀏覽器，最終都有可能支援該功能。對所有瀏覽器都予以測試也不實際。**絕對不要**用戶代理嗅探、功能偵測是**永遠**的替代方案。 - 你希望給不同的瀏覽器不同的 HTML？ @@ -29,7 +29,7 @@ slug: Web/HTTP/Browser_detection_using_the_user_agent - 功能偵測 - - : 功能偵測使你無須弄清是哪種瀏覽器在渲染你的網頁，只須檢查需要的具體功能是否能用。如果不能用，就採取備用方案。在極少數的情況下，各瀏覽器行為有所不同。面對這種情況，不要偵測用戶代理，而是用實作測試來檢查瀏覽器 API、並搞清楚用法。最近有個好例子：[Chrome 針對正規表達式，添加了實驗性的 lookbehind 支援](https://www.chromestatus.com/feature/5668726032564224)，但其他瀏覽器並不支援。你可能以為要這麼用： + - : 功能偵測使你無須弄清是哪種瀏覽器在渲染你的網頁，只須檢查需要的具體功能是否能用。如果不能用，就採取備用方案。在極少數的情況下，各瀏覽器行為有所不同。面對這種情況，不要偵測用戶代理，而是用實作測試來檢查瀏覽器 API、並搞清楚用法。最近有個好例子：[Chrome 針對正規表達式，添加了實驗性的 lookbehind 支援](https://chromestatus.com/feature/5668726032564224)，但其他瀏覽器並不支援。你可能以為要這麼用： ```js // 這個程式以特殊表示法把字串分開來 @@ -256,13 +256,13 @@ addEventListener( 以下表格概括了主要的瀏覽器製造者，如何表明它們的瀏覽器在手機上運作： -| 瀏覽器 | 規則 | 示例 | -| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Mozilla (Gecko, Firefox) | 註解內的 [**Mobile** 或 **Tablet** token](/zh-TW/docs/Gecko_user_agent_string_reference) | Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 | -| WebKit-based (Android, Safari) | 註解外的 [**Mobile Safari** token](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3) | 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 | -| Blink-based (Chromium, Google Chrome, Opera 15+) | 註解外的 [**Mobile Safari** token](https://developers.google.com/chrome/mobile/docs/user-agent) | 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 | -| Presto-based (Opera 12-) | 註解內的 [**Opera Mobi/xyz** token](http://my.opera.com/community/openweb/idopera/) (Opera 12-) | Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50 | -| Internet Explorer | 註解內的 **IEMobile/xyz** | Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) | +| 瀏覽器 | 規則 | 示例 | +| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Mozilla (Gecko, Firefox) | 註解內的 [**Mobile** 或 **Tablet** token](/zh-TW/docs/Gecko_user_agent_string_reference) | Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 | +| WebKit-based (Android, Safari) | 註解外的 [**Mobile Safari** token](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3) | 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 | +| Blink-based (Chromium, Google Chrome, Opera 15+) | 註解外的 [**Mobile Safari** token](https://developer.chrome.com/multidevice/user-agent) | 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 | +| Presto-based (Opera 12-) | 註解內的 [**Opera Mobi/xyz** token](https://blogs.opera.com/news/) (Opera 12-) | Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50 | +| Internet Explorer | 註解內的 **IEMobile/xyz** | Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) | 總之，我們建議藉著找出用戶代理的「Mobi」字串，來偵測行動設備。 diff --git a/files/zh-tw/web/http/caching/index.md b/files/zh-tw/web/http/caching/index.md index bdc7d5f577f650..fda768d26ed0af 100644 --- a/files/zh-tw/web/http/caching/index.md +++ b/files/zh-tw/web/http/caching/index.md @@ -187,6 +187,6 @@ else { ## See also - [RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching](https://datatracker.ietf.org/doc/html/rfc7234) -- [Caching Tutorial – Mark Nottingham](https://www.mnot.net/cache_docs) -- [HTTP caching – Ilya Grigorik](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) +- [Caching Tutorial – Mark Nottingham](https://www.mnot.net/cache_docs/) +- [HTTP caching – Ilya Grigorik](https://web.dev/articles/http-cache) - [RedBot](https://redbot.org/), a tool to check your cache-related HTTP headers. diff --git a/files/zh-tw/web/http/cookies/index.md b/files/zh-tw/web/http/cookies/index.md index cea6e5b4177f95..d9b5847667d576 100644 --- a/files/zh-tw/web/http/cookies/index.md +++ b/files/zh-tw/web/http/cookies/index.md @@ -212,7 +212,7 @@ Cookie 與特定域和方案（如 `http` 或 `https`）相關，如果 {{HTTPHe 第三方 Cookie 的典型用例包括共享用戶檔案訊息或在不同相關域上收集分析數據。它們也經常用於廣告和跟蹤用戶在網路上的活動。 > [!NOTE] -> 公司應該披露其網站使用的 Cookie 類型，以確保透明度並符合[法規](#與_Cookie_相關的法規)。例如，參見 [Google 對其使用的 Cookie 類型的通知](https://policies.google.com/technologies/types)和 Mozilla 的[網站、通信和 Cookie 隱私通知](https://www.mozilla.org/zh-TW/privacy/websites/#cookies)。 +> 公司應該披露其網站使用的 Cookie 類型，以確保透明度並符合[法規](#與_Cookie_相關的法規)。例如，參見 [Google 對其使用的 Cookie 類型的通知](https://policies.google.com/technologies/cookies#types-of-cookies)和 Mozilla 的[網站、通信和 Cookie 隱私通知](https://www.mozilla.org/zh-TW/privacy/websites/#cookies)。 第三方伺服器可以根據同一瀏覽器在訪問多個站點時發送給它的 Cookie，創建用戶的瀏覽歷史和習慣檔案。默認情況下，Firefox 阻止已知包含跟蹤器的第三方 Cookie。第三方 Cookie（或僅為跟蹤而設置的 Cookie）也可能被其他瀏覽器設置或擴展阻止。Cookie 阻止可能導致一些第三方組件（例如社交媒體軟體部件）無法正常工作。 diff --git a/files/zh-tw/web/http/cross-origin_resource_policy/index.md b/files/zh-tw/web/http/cross-origin_resource_policy/index.md index 4ea1e650e6e45e..8bd548b022dbc6 100644 --- a/files/zh-tw/web/http/cross-origin_resource_policy/index.md +++ b/files/zh-tw/web/http/cross-origin_resource_policy/index.md @@ -28,7 +28,7 @@ Web 應用程式通過 {{HTTPHeader("Cross-Origin-Resource-Policy")}} HTTP 回 - : 只有來自同一[_站點_](/zh-TW/docs/Glossary/Site)的請求可以讀取資源。 > [!WARNING] - > 這比{{Glossary("origin", "來源")}}的安全性要低。檢查兩個來源是否為同一站點的[演算法](https://html.spec.whatwg.org/multipage/origin.html#same-site)在 HTML 標準中定義，涉及檢查*可註冊域*。 + > 這比{{Glossary("origin", "來源")}}的安全性要低。檢查兩個來源是否為同一站點的[演算法](https://html.spec.whatwg.org/multipage/browsers.html#same-site)在 HTML 標準中定義，涉及檢查*可註冊域*。 - `same-origin` - : 只有來自相同[_來源_](/zh-TW/docs/Glossary/Origin)（即方案 + 主機 + 通訊埠）的請求可以讀取資源。 diff --git a/files/zh-tw/web/http/headers/cache-control/index.md b/files/zh-tw/web/http/headers/cache-control/index.md index 8605a883b21e17..0b54bf7459ba2f 100644 --- a/files/zh-tw/web/http/headers/cache-control/index.md +++ b/files/zh-tw/web/http/headers/cache-control/index.md @@ -97,7 +97,7 @@ Cache-Control: stale-if-error=<秒數> - `proxy-revalidate` - : 跟 `must-revalidate` 類似，不過只對共用快取軟體生效（比如 nginx）。私有快取會無視這個指令。 - `immutable` - - : 表示回應內容**不會改變** 。這個資源*不會過期*，因此即使使用者手動重新整理頁面，客戶端也不會用驗證標頭 （比如 `If-None-Match` 或 `If-Modified-Since`）。 Clients that aren't aware of this extension must ignore them as per the HTTP specification. 在 Firefox 中， `immutable` 只有在使用 `https://` 時會生效。想知道更多資訊，可以閱讀[這篇文章](https://bitsup.blogspot.de/2016/05/cache-control-immutable.html)。 + - : 表示回應內容**不會改變** 。這個資源*不會過期*，因此即使使用者手動重新整理頁面，客戶端也不會用驗證標頭 （比如 `If-None-Match` 或 `If-Modified-Since`）。 Clients that aren't aware of this extension must ignore them as per the HTTP specification. 在 Firefox 中， `immutable` 只有在使用 `https://` 時會生效。想知道更多資訊，可以閱讀[這篇文章](https://bitsup.blogspot.com/2016/05/cache-control-immutable.html)。 ### 其他 @@ -158,7 +158,7 @@ Cache-Control: max-age=0, must-revalidate - [HTTP Caching FAQ](/zh-TW/docs/Web/HTTP/Caching) - [Caching Tutorial for Web Authors and Webmasters](https://www.mnot.net/cache_docs/) -- Guide: _[`Cache-Control` for civilians](https://csswizardry.com/2019/03/cache-control-for-civilians)_ +- Guide: _[`Cache-Control` for civilians](https://csswizardry.com/2019/03/cache-control-for-civilians/)_ - {{HTTPHeader("Age")}} - {{HTTPHeader("Expires")}} - {{HTTPHeader("Pragma")}} diff --git a/files/zh-tw/web/http/headers/dnt/index.md b/files/zh-tw/web/http/headers/dnt/index.md index bf41488ddee755..d7fa8ef4ca8a72 100644 --- a/files/zh-tw/web/http/headers/dnt/index.md +++ b/files/zh-tw/web/http/headers/dnt/index.md @@ -49,8 +49,8 @@ navigator.doNotTrack; // "0" or "1" - {{HTTPHeader("Tk")}} 標頭 - 維基百科的[Do Not Track](https://zh.wikipedia.org/zh-tw/%E8%AF%B7%E5%8B%BF%E8%BF%BD%E8%B8%AA) - [What Does the "Track" in "Do Not Track" Mean? – EFF](https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean) -- [donottrack.us](http://donottrack.us/) +- [DNT on Electronic Frontier Foundation](https://www.eff.org/issues/do-not-track) - 瀏覽器設定 DNT 的幫助： - - [Firefox](https://www.mozilla.org/zh-tw/firefox/dnt/) + - [Firefox](https://support.mozilla.org/zh-TW/kb/how-do-i-stop-websites-tracking-me) - [Chrome](https://support.google.com/chrome/answer/2790761) diff --git a/files/zh-tw/web/http/headers/x-frame-options/index.md b/files/zh-tw/web/http/headers/x-frame-options/index.md index a12456e8b6c560..492b4a2364b595 100644 --- a/files/zh-tw/web/http/headers/x-frame-options/index.md +++ b/files/zh-tw/web/http/headers/x-frame-options/index.md @@ -80,5 +80,5 @@ rspadd X-Frame-Options:\ SAMEORIGIN - {{HTTPHeader("Content-Security-Policy")}} 的 {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} 指令 - [HTTP Header Field X-Frame-Options - RFC 7034](https://datatracker.ietf.org/doc/html/rfc7034) -- [ClickJacking Defenses - IEBlog](https://docs.microsoft.com/archive/blogs/ie/ie8-security-part-vii-clickjacking-defenses) -- [Combating ClickJacking with X-Frame-Options - IEInternals](https://docs.microsoft.com/archive/blogs/ieinternals/combating-clickjacking-with-x-frame-options) +- [ClickJacking Defenses - IEBlog](https://learn.microsoft.com/zh-tw/archive/blogs/ie/ie8-security-part-vii-clickjacking-defenses) +- [Combating ClickJacking with X-Frame-Options - IEInternals](https://learn.microsoft.com/zh-tw/archive/blogs/ieinternals/combating-clickjacking-with-x-frame-options) diff --git a/files/zh-tw/web/http/index.md b/files/zh-tw/web/http/index.md index 13e2899d3383de..5600d83670d1eb 100644 --- a/files/zh-tw/web/http/index.md +++ b/files/zh-tw/web/http/index.md @@ -5,7 +5,7 @@ slug: Web/HTTP {{HTTPSidebar}} -**_超文本傳輸協定 (HTTP)_** 是一種用來傳輸超媒體文件 (像是 HTML 文件) 的[應用層](http://en.wikipedia.org/wiki/Application_Layer)協定，被設計來讓瀏覽器和伺服器進行溝通，但也可做其他用途。HTTP 遵循標準[客戶端—伺服器](https://en.wikipedia.org/wiki/Client%E2%80%93server_model)模式，由客戶端連線以發送請求，然後等待接收回應。HTTP 是一種[無狀態協定](https://en.wikipedia.org/wiki/Stateless_protocol)，意思是伺服器不會保存任兩個請求間的任何資料 (狀態)。儘管作為 TCP/IP 的應用層，HTTP 亦可應用於其他可靠的[傳輸層](http://en.wikipedia.org/wiki/Transport_Layer) (例如 [UDP](https://en.wikipedia.org/wiki/User_Datagram_Protocol))，只要不會無聲無息地遺失訊息即可。 +**_超文本傳輸協定 (HTTP)_** 是一種用來傳輸超媒體文件（像是 HTML 文件）的[應用層](https://zh.wikipedia.org/wiki/应用层)協定，被設計來讓瀏覽器和伺服器進行溝通，但也可做其他用途。HTTP 遵循標準[客戶端—伺服器](https://zh.wikipedia.org/wiki/客户端-服务器架构)模式，由客戶端連線以發送請求，然後等待接收回應。HTTP 是一種[無狀態協定](https://zh.wikipedia.org/wiki/无状态协议)，意思是伺服器不會保存任兩個請求間的任何資料 (狀態)。儘管作為 TCP/IP 的應用層，HTTP 亦可應用於其他可靠的[傳輸層](https://zh.wikipedia.org/wiki/传输层)（例如 [UDP](https://zh.wikipedia.org/wiki/用户数据报协议)），只要不會無聲無息地遺失訊息即可。 ## 教學 @@ -16,12 +16,12 @@ slug: Web/HTTP - [HTTP Cache](/zh-TW/docs/Web/HTTP/Caching) - : Cache 對網站速度很重要。 此文章描敘不同的方法使用 HTTP Header 控制它。 - [HTTP Cookies](/zh-TW/docs/Web/HTTP/Cookies) - - : [RFC 6265](https://tools.ietf.org/html/rfc6265) 定義了 cookies 的工作方式，當 HTTP 請求一個服務時，一個伺服器可以發送一個`Set-Cookie`的 HTTP header 回應。客戶端將以 header 的方式回傳 cookie 值給每個請求的同 一個伺服器，Cookie 也會在某些時間進行更新，或是限制一個實體網域或路徑。 + - : [RFC 6265](https://datatracker.ietf.org/doc/html/rfc6265) 定義了 cookies 的工作方式，當 HTTP 請求一個服務時，一個伺服器可以發送一個`Set-Cookie`的 HTTP header 回應。客戶端將以 header 的方式回傳 cookie 值給每個請求的同 一個伺服器，Cookie 也會在某些時間進行更新，或是限制一個實體網域或路徑。 - [HTTP Access Control (CORS)](/zh-TW/docs/Web/HTTP/CORS) - : **Cross-site HTTP requests** 是來自不同網域的資源請求。舉個例子，一個 HTML 網頁從網域 A (`http://domaina.example/`) 從網域 B(`http://domainb.foo/image.jpg`)請求一個圖片，經由`img`元件。現今的網頁通常會讀取跨站資源，包括 CSS 樣式表、圖片、腳本與其他資源。CORS 允許網頁開發人員的網站響應跨站讀取。 - [HTTP 的演化](/zh-TW/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP) - : HTTP 早期版本變化的簡要說明，到現在的 HTTP/2 與其他版本。 -- [網頁安全方針](https://wiki.mozilla.org/Security/Guidelines/Web_Security) +- [網頁安全方針](https://infosec.mozilla.org/guidelines/web_security) - : 一些技巧幫助運作團隊開發安全的網頁。 - [HTTP 訊息](/zh-TW/docs/Web/HTTP/Messages) - : 描述 HTTP/1 與 HTTP/2 不同類別與結構。 @@ -35,7 +35,7 @@ slug: Web/HTTP 詳細的 HTTP 參考文件。 - [HTTP Headers](/zh-TW/docs/Web/HTTP/Headers) - - : HTTP 訊息檔頭（header）用於描述資源、伺服器或用戶端的行為。可以透過 `X-` 前綴以增加自定義的專有項目。其他的項目可以在 [IANA registry](https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers) 中找到，其原始定義在 [RFC 4229](https://tools.ietf.org/html/rfc4229)。IANA 同時也維護 [新 HTTP 訊息檔頭的提案登記（registry of proposed new HTTP message headers）](https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers)。 + - : HTTP 訊息檔頭（header）用於描述資源、伺服器或用戶端的行為。可以透過 `X-` 前綴以增加自定義的專有項目。其他的項目可以在 [IANA registry](https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers) 中找到，其原始定義在 [RFC 4229](https://datatracker.ietf.org/doc/html/rfc4229)。IANA 同時也維護 [新 HTTP 訊息檔頭的提案登記（registry of proposed new HTTP message headers）](https://www.iana.org/assignments/message-headers/message-headers.xhtml#prov-headers)。 - [HTTP 請求方法](/zh-TW/docs/Web/HTTP/Methods) - : 透過 HTTP 有幾種不同操作方法：{{HTTPMethod("GET")}}、{{HTTPMethod("POST")}}，或是較少見的請求方法，如 {{HTTPMethod("OPTIONS")}}、{{HTTPMethod("DELETE")}}、或 {{HTTPMethod("TRACE")}}。 - [HTTP 狀態回應碼](/zh-TW/docs/Web/HTTP/Status) diff --git a/files/zh-tw/web/javascript/data_structures/index.md b/files/zh-tw/web/javascript/data_structures/index.md index c80b6084ba157d..5eb1b45388c777 100644 --- a/files/zh-tw/web/javascript/data_structures/index.md +++ b/files/zh-tw/web/javascript/data_structures/index.md @@ -64,7 +64,7 @@ Infinity -Infinity ``` -Although a number often represents only its value, JavaScript provides [some binary operators](/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators). These can be used to represent several Boolean values within a single number using [bit masking](http://en.wikipedia.org/wiki/Mask_%28computing%29). 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. +Although a number often represents only its value, JavaScript provides [some binary operators](/zh-TW/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators). These can be used to represent several Boolean values within a single number using [bit masking](). 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. ### 字串型別 @@ -134,7 +134,7 @@ Associates a key with one or two accessor functions (get and set) to retrieve or ### "Normal" objects, and functions -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 [hashmaps](http://en.wikipedia.org/wiki/Hash_table). +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 [hashmaps](https://en.wikipedia.org/wiki/Hash_table). Functions are regular objects with the additional capability of being callable. @@ -172,5 +172,5 @@ JavaScript has a standard library of built-in objects. Please have a look at the ## See also -- [Nicholas Zakas collection of common data structure and common algorithms in JavaScript.](https://github.com/nzakas/computer-science-in-javascript/) -- [Search Tre(i)es implemented in JavaScript](https://github.com/monmohan/DataStructures_In_Javascript) +- [Nicholas Zakas collection of common data structure and common algorithms in JavaScript.](https://github.com/humanwhocodes/computer-science-in-javascript) +- [Search Tre(i)es implemented in JavaScript](https://github.com/monmohan/dsjslib) diff --git a/files/zh-tw/web/javascript/equality_comparisons_and_sameness/index.md b/files/zh-tw/web/javascript/equality_comparisons_and_sameness/index.md index 68b7c225bbf3b4..33d1b73ca9660d 100644 --- a/files/zh-tw/web/javascript/equality_comparisons_and_sameness/index.md +++ b/files/zh-tw/web/javascript/equality_comparisons_and_sameness/index.md @@ -154,7 +154,7 @@ console.log(obj == undefined); ## 同值相等 -同值相等解決了最後一個情況：比較兩個值是否*功能相同* 。（這裡用了 [Liskov 替換原則（英）](http://en.wikipedia.org/wiki/Liskov_substitution_principle) 為例）當試圖修改一個不可變的屬性： +同值相等解決了最後一個情況：比較兩個值是否*功能相同* 。（這裡用了[里氏替換原則](https://zh.wikipedia.org/wiki/里氏替换原则)為例）當試圖修改一個不可變的屬性： ```js // 新增一個不可變 NEGATIVE_ZERO 屬性到 Number 原型。 @@ -180,7 +180,7 @@ function attemptMutation(v) { ## 一般相等、嚴格相等和同值相等的規範 -在 ES5，一般相等 [`==`](/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 在 [Section 11.9.3, The Abstract Equality Algorithm](http://ecma-international.org/ecma-262/5.1/#sec-11.9.3) 中規範。嚴格相等 [`===`](/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 在 [11.9.6, The Strict Equality Algorithm](http://ecma-international.org/ecma-262/5.1/#sec-11.9.6)。（可以看看，這很簡短且可讀。註：先讀嚴格相等。）ES5 也在 [Section 9.12, The SameValue Algorithm](http://ecma-international.org/ecma-262/5.1/#sec-9.12) 規範 JS 引擎的行為。他幾乎和嚴格相等一樣，除了 11.9.6.4 和 9.12.4 在處理 [`Number`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number) 時的不同。ES2015 簡短的提出了 `Object.is。` +在 ES5，一般相等 [`==`](/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 在 [Section 11.9.3, The Abstract Equality Algorithm](https://262.ecma-international.org/5.1/#sec-11.9.3) 中規範。嚴格相等 [`===`](/zh-TW/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 在 [11.9.6, The Strict Equality Algorithm](https://262.ecma-international.org/5.1/#sec-11.9.6)。（可以看看，這很簡短且可讀。註：先讀嚴格相等。）ES5 也在 [Section 9.12, The SameValue Algorithm](https://262.ecma-international.org/5.1/#sec-9.12) 規範 JS 引擎的行為。他幾乎和嚴格相等一樣，除了 11.9.6.4 和 9.12.4 在處理 [`Number`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number) 時的不同。ES2015 簡短的提出了 `Object.is`。 我們可以發現在 11.9.6.1 中，除了 11.9.6.1 規範型別檢查，嚴格相等規範是從屬於一般相等規範，因為 11.9.6.2–7 和 11.9.3.1.a–f 相應。 @@ -246,4 +246,4 @@ Relying on [`Object.is`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Obj ## See also -- [JS Comparison Table](http://dorey.github.io/JavaScript-Equality-Table/) +- [JS Comparison Table](https://dorey.github.io/JavaScript-Equality-Table/) diff --git a/files/zh-tw/web/javascript/index.md b/files/zh-tw/web/javascript/index.md index eb8aca42715135..d607147d94fbb4 100644 --- a/files/zh-tw/web/javascript/index.md +++ b/files/zh-tw/web/javascript/index.md @@ -5,13 +5,13 @@ slug: Web/JavaScript {{JsSidebar}} -**JavaScript** (簡稱 **JS**) 是具有一級函數 ({{Glossary("First-class Function", "First-class functions")}}) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於[許多非瀏覽器的環境](http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages)，像是 [node.js](https://nodejs.org/)、[Apache CouchDB](https://couchdb.apache.org)。JavaScript 是一個基於原型的 ({{Glossary("Prototype-based programming", "Prototype-based")}})、多範型的、動態語言，支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格。 +**JavaScript**（簡稱 **JS**）是具有一級函數 ({{Glossary("First-class Function", "First-class functions")}}) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於[許多非瀏覽器的環境](https://zh.wikipedia.org/wiki/JavaScript#运行时环境)，像是 {{Glossary("Node.js")}}、[Apache CouchDB](https://couchdb.apache.org/)。JavaScript 是一個的[基於原型](/zh-TW/docs/Glossary/Prototype-based_programming)的、多範型的、動態語言，支援物件導向、指令式以及宣告式（如函數式程式設計）風格。 本章節主要說明 JavaScript，不涉及網頁特有項目或主機環境。有關網頁特有的 {{Glossary("API","APIs")}} ，請參考 [Web API](/zh-TW/docs/Web/API) 和 [DOM](/zh-TW/docs/Glossary/DOM)。 -JavaScript 所採用的標準是 [ECMAScript Language Specification](https://tc39.es/ecma262/)（ECMA-262），自 2012 年起，所有[現代的瀏覽器](http://kangax.github.io/compat-table/es5/)均已全面支援 ECMAScript 5.1。較老舊的瀏覽器最少也會支援 ECMAScript 3。[ECMA International](https://www.ecma-international.org/) 於 2015 年 6 月 17 日發布第六版的 ECMAScript，其正式名稱是 ECMAScript 2015，原先被稱作 ECMAScript 6 或 ES6。從那時起， ECMAScript 標準的發布週期是一年，本文件參考了最新的草稿版本，也就是目前的 [ECMAScript 2017](http://tc39.github.io/ecma262/)。 +JavaScript 所採用的標準是 [ECMAScript Language Specification](https://tc39.es/ecma262/)（ECMA-262），自 2012 年起，所有[現代的瀏覽器](http://kangax.github.io/compat-table/es5/)均已全面支援 ECMAScript 5.1。較老舊的瀏覽器最少也會支援 ECMAScript 3。[ECMA International](https://ecma-international.org/) 於 2015 年 6 月 17 日發布第六版的 ECMAScript，其正式名稱是 ECMAScript 2015，原先被稱作 ECMAScript 6 或 ES6。從那時起， ECMAScript 標準的發布週期是一年，本文件參考了最新的草稿版本，也就是目前的 [ECMAScript 2017](https://tc39.es/ecma262/)。 -別搞混了 JavaScript 和 [Java 程式語言]()。雖然 "Java" 和 "JavaScript" 都是 Oracle 公司在美國和其他國家的商標或註冊商標，但兩個語言有著非常不同的語法、語意和用途。 +別搞混了 JavaScript 和 [Java 程式語言](https://zh.wikipedia.org/wiki/Java)。雖然「Java」和「JavaScript」都是 Oracle 公司在美國和其他國家的商標或註冊商標，但兩個語言有著非常不同的語法、語意和用途。 ## 教學