JS Web API 教學

什麼是 JS Web API

JavaScript Web API（Application Programming Interface）是一組在網頁瀏覽器中可用的功能和接口，它們擴展了 JavaScript 的能力，使開發人員能夠與瀏覽器和網頁內容進行互動。

JavaScript Web API 包括以下功能和能力：

  • 操作 DOM（Document Object Model）：用於改變網頁上的元素，例如選擇元素、修改內容和樣式，以及加入或刪除元素。

  • 事件處理：允許處理事件，如點擊、輸入、滑鼠移動等，以實現交互性。

  • 發送 HTTP 請求：用於從網絡上獲取數據，包括網頁 API、外部數據 API 等。

  • 圖像、音頻和視頻處理：允許加載、顯示和操作媒體內容。

  • 地理位置訊息：提供訪問使用者設備的地理位置數據，用於定位應用。

  • 本地存儲數據：用於在瀏覽器中保存數據，例如 Cookies、Web Storage 和 IndexedDB 等。

這些 API 的存在使得開發人員能夠建立動態、交互性和功能豐富的網頁應用程式，這些應用程式可以回應使用者的操作，從而提供更好的使用者體驗。總之，JavaScript Web API 是網頁開發的關鍵元素，它們使得建立現代網頁應用變得可能並且更容易實現。

DOM API

當我們談論 DOM（Document Object Model, 文件物件模型）API 時，實際上是在談論你如何以生動的方式與網頁上的元素互動。DOM 是你和網頁之間的橋樑，讓你可以透過程式碼來操作和改變網頁的外觀和行為。現在，讓我們深入了解 DOM 的不同方面，並附上簡單的範例以幫助你理解

選擇元素和訪問其屬性

這就像在一個巨大的零食袋中挑選你最愛的糖果一樣。你可以使用 JavaScript 來選擇網頁上的元素，然後獲取它們的屬性或內容。例如，你可以通過元素的 ID 來選擇它，並獲取其文字內容。

首先，建立一個 HTML 檔案（例如：index.html）如下：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html leng="zh-TW">
<head>
    <title> 選擇元素和獲取文字內容 </title>
</head>
<body>
    <h1> 選擇元素和獲取文字內容 </h1>
    <p id="myElementId"> 曾經在一個遙遠的網頁上，有一段文字...</p>
    <script src="script.js"></script>
</body>
</html>

接著，建立一個 JavaScript 檔案（例如：script.js）如下：

1
2
3
4
5
6
7
8
// 首先，我們需要選擇指定ID的HTML元素
var myElement = document.getElementById('myElementId');

// 接著，我們使用一段程式碼來獲取它的文字內容
var textContent = myElement.textContent;

// 最後，我們將獲取的文字內容輸出到控制台，以揭示文字的內容
console.log("這段文字告訴了我們：", textContent);

這段程式是一個簡單的 JavaScript 程式碼，它的作用是選擇 HTML 文件中具有特定 ID 的段落元素，然後獲取該段落元素的文字內容，最後在瀏覽器的控制台中顯示這些文字內容。

它演示了如何使用 JavaScript 來操作 HTML 文件中的元素和數據

  1. ** 選擇元素 **：透過 document.getElementById('myElementId')，這段程式使用 DOM 方法 getElementById 來選擇具有特定 ID 的 HTML 元素。這展示了 DOM 如何通過元素的 ID 來選擇特定的元素。

  2. ** 檢索元素的文字內容 **：使用 myElement.textContent，這段程式獲取了選定元素的文字內容。這顯示了如何使用 DOM 的屬性來獲取元素的內容。

  3. ** 操作 HTML 文件 **：最後，這段程式使用 console.log 方法將獲取到的文字內容輸出到瀏覽器的控制台中。儘管這不是直接改變 HTML 文件的演示，但它展示了如何使用 JavaScript 來處理和操作 HTML 文件中的數據。

這個簡單的範例展示了 DOM 的一部分，即如何通過 JavaScript 選擇和操作 HTML 元素，並檢索它們的內容。這是 DOM 在實際網頁開發中常見的應用之一，用於與網頁上的元素進行互動和操作。

修改元素的內容和樣式

想像一下你有一個魔法筆，可以改變糖果的顏色和味道。你可以使用 JavaScript 來更改元素的文字內容或樣式，讓網頁變得更吸引人。

1
2
3
4
5
// 修改元素的文字內容
myElement.textContent = '嗨，我是新的文字內容！';

// 修改元素的樣式
myElement.style.color = 'red';

建立、加入和刪除元素

像是在製作自己的糖果，你可以使用 JavaScript 動態地建立新的元素，然後將它們加入到網頁中，或者刪除不需要的元素。

1
2
3
4
5
6
7
8
9
// 建立一個新的 <div> 元素
var newDiv = document.createElement('div');

// 加入新元素到網頁
document.body.appendChild(newDiv);

// 刪除一個元素
var elementToRemove = document.getElementById('elementToRemove');
elementToRemove.remove();

事件處理程式和事件監聽器

想像一下，你在派對上擔任 DJ，你需要監聽歌曲請求並播放音樂。在網頁上，你可以使用事件處理程式和事件監聽器來響應使用者的操作，例如點擊按鈕或提交表單。

1
2
3
4
// 加入點擊事件監聽器
myElement.addEventListener('click', function() {
  alert('你點擊了我！');
});

瀏覽器事件模型

這就像是一場糖果瀑布，事件從頂部開始流下來，直到達到最底層的元素。瀏覽器事件模型描述了事件如何在 DOM 樹中傳播，並允許你捕獲和處理事件。

遍歷 DOM 樹

想像一下你在糖果商店中探險，尋找最美味的糖果。你可以使用 JavaScript 來遍歷整個 DOM 樹，找到你想要的元素，然後對它們進行操作。

1
2
3
4
5
// 遍歷所有段落元素並修改它們的樣式
var paragraphs = document.querySelectorAll('p');
paragraphs.forEach(function(paragraph) {
  paragraph.style.fontWeight = 'bold';
});

希望這些生動的比喻和範例幫助你更好地理解 DOM（文件物件模型）API，並開始寫程式碼來控制網頁上的元素！如果你有更多問題，請隨時問我。

評論

×