3. Web API

指令碼

擴充套件模組

本模組涵蓋了我們之前沒有詳細介紹的三類最常見的 Web API 的共同方面，為那些希望深入瞭解瀏覽器 API 用法的使用者提供了有用的基礎。

通用說明:

本模組不試圖詳盡地涵蓋 Web 瀏覽器中提供的 API 的全部範圍。

相反，它為您提供了足夠的資訊來理解 Web API 的總體情況，並能夠透過自己的研究來學習新的 API。

通用資源

3.1 影片和音訊 API

學習成果

通用概念
- 理解不同型別的影片和音訊格式。
- 理解編解碼器。
- 理解與音訊和影片相關的關鍵功能 — 播放、暫停、停止、前後搜尋、時長和當前時間。
注意:
- 這一套一致性標準並不期望成功的學員能夠詳細瞭解 Web 平臺所有與影片和音訊相關的 API。這一類功能非常多，一次性全部學完既不實際也不特別有用。其中一些功能是為小眾用例設計的，鼓勵學員在持續學習的過程中，或在有需要時進行更深入的學習。
- 目前，您需要理解 Web 上影片和音訊背後的概念、基本的核心 API 功能以及一些更高階 API 的用途。
使用 HTMLMediaElement API 構建基本的自定義媒體播放器
- 理解這樣做的原因 — 您的目標受眾可能有一些瀏覽器預設設定未解決的特定需求。
- 一個很好的例子是，某些瀏覽器預設控制元件的鍵盤可訪問性不高。
- 另一個例子是，您可能希望在不同瀏覽器之間實現一致的 UI 設計。
使用媒體流/getUserMedia() 從本地裝置捕獲影片和音訊。
處理與媒體分發相關的常見錯誤
- 使用 <source> 元素處理多種格式。
- 使用正確的 MIME 型別。
- 在媒體不受支援時顯示回退內容。
理解其他影片和音訊 API 的用途，包括 Web Audio API、Media Stream Recording API 和 Media Source Extensions API。

資源

學習成果

使用計時器和 requestAnimationFrame() 設定動畫迴圈
- 基本語法和用法。
- 理解為什麼 requestAnimationFrame() 比它之前的技術有所改進。
- 動畫迴圈的常見用例，例如裝飾性動畫和遊戲。
Web Animations API
- 基本語法和用法。
- 理解 Web Animations API 與 CSS 動畫屬性的關係，以及何時應使用它們。
- 常見用例。
Canvas
- 在概念上理解 <canvas> 元素及其相關 API 的功能。
- 2D Canvas API 的基本語法和用法。
- 迴圈更新 <canvas> 以建立簡單的動畫或遊戲。

資源

注意:

在此套一致性標準中，最重要的要點是理解通用概念、使用 Web Storage 進行簡單的客戶端儲存任務，以及瞭解 Cookie 如何被積極和消極地使用。

學習成果

理解客戶端儲存的概念
- 瞭解常見的客戶端資料儲存機制 — Web Storage API、cookies、Cache API 和 IndexedDB API。
- 關鍵用例 — 維護重新載入時的狀態、持久化登入和使用者個性化資料，以及本地/離線工作。
- 理解與客戶端儲存相關的負面模式 — 例如，使用 Cookie 進行跟蹤/指紋識別。
使用 Cookie 儲存任意資料，通常由 HTTP 標頭控制。
使用 Web Storage 進行簡單的鍵值對儲存，由 JavaScript 控制。
使用 IndexedDB
- 完整的客戶端事務資料庫系統。
- 複雜且很少直接使用。您更可能使用像 dexie.js 這樣的庫。
使用 Cache/Service Workers
- 理解它們在漸進式 Web 應用 (PWA) 中的基本用法，以及使網站能夠離線工作的基本用例。

注意:

IndexedDB 和 Cache API（通常與 Service Workers 一起使用）非常複雜，並且是龐大的主題。現階段不必詳盡理解它們，儘管我們建議您對它們的工作原理有一個基本的瞭解。

資源