客戶端 Web API

在為網站或應用程式編寫客戶端 JavaScript 時，您會很快遇到應用程式程式設計介面 (API)。API 是用於操縱網站執行的瀏覽器和作業系統的不同方面的程式設計功能，或操縱來自其他網站或服務的資料。在本模組中，我們將探討什麼是 API，以及如何使用您在開發工作中經常遇到的最常見 API。

先決條件

為了充分利用本模組，您應該已經完成了本系列中之前的 JavaScript 模組（入門、構建模組和 JavaScript 物件）。這些模組通常涉及簡單的 API 使用，因為在沒有它們的情況下很難編寫客戶端 JavaScript 示例。在本教程中，我們將假設您熟悉核心 JavaScript 語言，並更詳細地探討常見的 Web API。

對 HTML 和 CSS 的基本瞭解也很有用。

注意：如果您正在使用無法建立自己檔案的裝置，可以在線上編碼程式中嘗試（大多數）程式碼示例，例如 JSBin 或 Glitch。

指南

Web API 簡介: 首先，我們將從高層級開始檢視 API——它們是什麼，它們如何工作，您如何在程式碼中使用它們，以及它們的結構如何？我們還將看一下不同主要 API 類別的種類以及它們的用途。
操作文件: 在編寫網頁和應用程式時，您最常需要做的事情之一是以某種方式操縱網頁文件。這通常是透過使用文件物件模型 (DOM) 來完成的，DOM 是用於控制 HTML 和樣式資訊的 API 集合，它大量使用 Document 物件。在本文中，我們將詳細介紹如何使用 DOM，以及一些其他有趣的 API，這些 API 可以以有趣的方式改變您的環境。
從伺服器獲取資料: 在現代網站和應用程式中，另一個非常常見的任務是檢索來自伺服器的單個數據項以更新網頁的部分，而無需載入全新的頁面。這個看似很小的細節對網站的效能和行為產生了巨大的影響。在本文中，我們將解釋這個概念，並探討使它成為可能的技術，例如 XMLHttpRequest 和 Fetch API。
第三方 API: 到目前為止，我們介紹的 API 是內建在瀏覽器中的，但並非所有 API 都是如此。許多大型網站和服務，例如 Google 地圖、Facebook、PayPal 等，都提供 API，允許開發人員利用它們的資料或服務（例如，在您的網站上顯示自定義 Google 地圖，或使用 Facebook 登入來登入您的使用者）。本文探討了瀏覽器 API 和第三方 API 之間的區別，並展示了後者的典型用途。
繪製圖形: 瀏覽器包含一些非常強大的圖形程式設計工具，從可縮放向量圖形 (SVG) 語言到用於在 HTML <canvas> 元素上繪製的 API（參見 Canvas API 和 WebGL）。本文介紹了 Canvas API，並提供了其他資源，讓您瞭解更多資訊。
影片和音訊 API: HTML 帶有用於在文件中嵌入富媒體的元素——<video> 和 <audio>——它們反過來又帶有自己的 API，用於控制播放、搜尋等。本文向您展示如何執行常見任務，例如建立自定義播放控制元件。
客戶端儲存: 現代網路瀏覽器具有許多不同的技術，允許您儲存與網站相關的資料並在需要時檢索它，從而允許您長期保留資料，離線儲存網站等等。本文解釋了這些工作原理的基礎知識。