qian
在網頁開發領域中，JavaScript 扮演著核心的角色，它不僅能夠提供豐富的用戶互動功能，還可以透過 Web API 的支援來存取瀏覽器的各種資源與能力。本篇文章將深入探討 JavaScript 中常用的 Web API，以及如何運用這些 API 來增強網站的效能與體驗。
DOM (Document Object Model)
DOM 是網頁內容的一個樹狀結構表示，透過 JavaScript 中的 Document 物件進行操作。開發者可以使用 DOM API 來選取元素、獲取其屬性或樣式資訊，並且可以修改節點的內容或者直接插入新的 HTML 片段。例如，使用 `document.querySelector()` 方法可以根據 CSS 選擇器從文檔中找到一個特定的元素。
const element = document.querySelector('h1'); // 找出標題元素
element.style.color = 'red'; // 設定文字顏色為紅色
BOM (Browser Object Model)
BOM 定義了對瀏覽器窗口相關功能的訪問和控制，主要包括 window、navigator、screen 等對象。例如，`window.open()` 可以用於開啟新視窗；`window.setTimeout()` 和 `window.setInterval()` 可用於執行函數並指定間隔時間。此外，BOM 還提供了對 Cookies、LocalStorage、SessionStorage 等資料儲存的支援。
// 在指定的延遲後執行某段程式碼
window.setTimeout(() => {
console.log("Hello!"); // 輸出 "Hello!" 到控制檯
}, 3000); // 等待 3 秒再執行
AJAX (Asynchronous Javascript And XML)
AJAX 是一種異步式的網頁應用程式設計模式，允許 JavaScript 以非同步的方式向伺服器請求資料而不需要重新載入整個網頁。這使得網頁更加靈活且反應迅速。通常，我們會使用 `XMLHttpRequest` 物件或者 Fetch API 來實現 AJAX。
// 使用 XMLHttpRequest 物件發送 HTTP GET 請求
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (this.status === 200) {
var data = JSON.parse(this.responseText); // 解析回應為 JSON 格式
console.log(data); // 印出資料到控制檯
} else {
console.error(`Error ${this.status}: ${this.statusText}`); // 錯誤處理
}
};
xhr.open('GET', '/api/example'); // 建立 GET 請求
xhr.send(); // 送出請求
Fetch API
Fetch API 是一個現代化的替代方案，它提供了一個更簡潔的方法來發起網路請求。Fetch 方法返回一個 Promise，Promise resolve 時傳回 Response 物件，成功解譯後得到 Request Body。
fetch('/api/example')
.then((response) => response.json()) // 如果響應體是有效的 JSON，則解析為對象
.then((data) => console.log(data)) // 印出資料到控制檯
.catch((error) => console.error(error)); // 錯誤處理
Timers and Timeouts
JavaScript 提供了一些方法來管理程式中的事件和延遲執行任務，如 setTimeout 和 setInterval。這些方法讓你可以按照指定的間隔來執行代碼塊。
// 在 5 秒後執行某段程式碼
setTimeout(() => {
console.log('Five seconds have passed.');
}, 5000);
History API
History API 允許你在不刷新頁面的情況下改變 URL，並監聽 URL 的變化。這樣就可以在不重載頁面的情況下來回導航。
// pushState: 新增歷史記錄狀態
history.pushState({ page: 2 }, '', '#page=2');
// onpopstate: 監聽歷史紀錄改變
window.addEventListener('popstate', function(event) {
console.log('Previous state:', event.state);
});
Geolocation API
Geolocation API 可以通過用戶的設備獲取地理位置資訊。這對於地圖應用程序來說尤其重要。
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log('Latitude: ' + position.coords.latitude);
console.log('Longitude: ' + position.coords.longitude);
}, function() {
console.warn('Unable to retrieve your location');
});
} else {
console.error('Geolocation is not supported by this browser.');
}
總之，JavaScript Web API 是網頁開發的重要組成部分，它們賦予了網站更多的交互性和實用性。隨著技術的不斷發展，這些 API 也在不斷擴展和完善，為開發人員創造更好的使用者體驗提供了更多可能性。
