JavaScript網頁互動功能增強實踐

在現代網頁開發中，使用者互動和動態內容至關重要。本文以電子商務網站的購物車頁面為例，示範如何使用 JavaScript 新增互動功能。首先，我們直接操作 DOM 元素，從 cart.json 讀取購物車資料，並將其渲染到網頁上。接著，我們引入 Bootstrap 框架，利用其提供的卡片和按鈕等元件，提升頁面視覺效果和使用者經驗。最後，為了更有效地管理程式碼和實作資料與檢視的分離，我們將程式碼遷移到 Vue.js 框架，利用其回應式特性簡化開發流程。

使用 JavaScript 新增行為

在開發電子商務網站時，使用者互動是不可或缺的一部分。為了實作互動功能，需要組態使用者會接觸到的網站部分，並確保其正常運作。許多使用者互動都涉及資料的讀取或寫入，因此需要將使用者互動與資料流結合。

將問題分解為功能

首先，瞭解業務領域和可能遇到的問題型別。然後，將問題分解為具體的功能。例如，購物車頁面可以分解為以下功能：

從資料來源讀取購物車資訊
呈現購物車資訊
將商品新增至購物車
調整購物車中特定商品的數量
從購物車中移除商品
支援結帳功能，將使用者導向訂單頁面

新增 JavaScript

要在網頁中新增 JavaScript，有兩種主要方法：

方法一：在 head 元素中使用 script 標籤

<!-- Alt1 -->
<script>
// JavaScript 程式碼
</script>

方法二：指向獨立檔案

<!-- Alt2 -->
<script src="my-javascript-file.js"></script>

JavaScript 的角色

JavaScript 最初用於為瀏覽器新增互動性。如今，它經常作為 Vue.js、React 和 Angular 等應用框架的一部分。在這些框架中，開發人員可以宣告式地定義範本，並藉助 JavaScript 將其轉換為靜態 HTML，同時新增事件處理以回應使用者互動。

在頁面中新增 JavaScript

讓我們示範如何使用提示來新增 JavaScript 到頁面：

<!-- 建立具有 script 標籤的網頁 -->
<html>
<head>
  <title>我的第一個網頁</title>
</head>
<body>
  <script>
    alert("Hello World!");
  </script>
</body>

新增 JavaScript 函式庫/框架

例如，新增 Vue.js 框架：

<head>
  <!-- 新增 Vue 3 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

新增 Vue 3 的進入點：

<!-- 新增 Vue 3 進入點 -->
<div id="app">
  <h1>{{ message }}</h1>
</div>

將遊標置於匯入 Vue.js 的 script 標籤下方，會導致 AI 助手生成進一步設定 Vue.js 的指令：

<script src="https://unpkg.com/vue@next"></script>
<!-- 下方是由於將遊標置於此處而呈現的內容 -->
<script>
  // 建立 Vue 3 例項
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World!'
      }
    }
  })
  // 將 Vue 3 例項掛載到 DOM 元素
  app.mount('#app')
</script>

程式碼解析：

使用 <script src="https://unpkg.com/vue@next"></script> 從 unpkg 載入 Vue.js 最新版本。
在 <div id="app"> 中使用 Vue 的範本語法 {{ message }}。
使用 Vue.createApp 建立 Vue 應使用案例項，並定義 data 方法傳回包含 message 的物件。
使用 app.mount('#app') 將 Vue 應用掛載到 <div id="app">。
這樣，當 Vue 應用執行時，message 的值會被渲染到 <h1> 中。

值得注意的是，GitHub Copilot 能夠根據上下文生成更多的建議，而無需提供額外的提示。

使用 JavaScript 為 Vue.js 應用程式新增行為

在前面的章節中，我們已經瞭解瞭如何使用 Vue.js 建立一個簡單的應用程式。現在，我們將進一步探討如何為這個應用程式新增行為，使其變得更加動態和互動。

挑戰：新增一個按鈕來遞增計數器

首先，讓我們來挑戰一下，使用 Copilot 新增一個按鈕，該按鈕可以遞增一個計數器。我們可以在 HTML 標記中的 DIV 元素（id="app"）處放置遊標，然後使用以下提示：

新增一個按鈕來遞增計數器。

這將幫助我們瞭解如何使用 Copilot 新增互動元素。

使用案例：呈現購物車頁面

在我們的電子商務使用案例中，我們將專注於呈現購物車頁面上的專案。為此，我們將模擬呼叫後端資料，並將資料存放在名為 cart.json 的檔案中，其結構如下：

{
  "cart": []
}

這個 JSON 內容描述了一個 JSON 物件（由 {} 定義），其中包含一個名為 cart 的屬性，該屬性是一個陣列（由 [] 表示）。

使用 AI 助手生成資料

讓我們使用 AI 助手來生成所需的資料。我們將建立 cart.json 檔案，並使用以下結構和提示：

{
  "cart": [
    // 具有 id、名稱、數量和價格的專案，總計 = 數量 * 價格
  ]
}

這將生成以下 JSON 資料：

{
  "cart": [
    {
      "id": "1",
      "name": "item1",
      "quantity": "1",
      "price": "10",
      "total": "10"
    },
    {
      "id": "2",
      "name": "item2",
      "quantity": "1",
      "price": "20",
      "total": "20"
    },
    {
      "id": "3",
      "name": "item3",
      "quantity": "1",
      "price": "30",
      "total": "30"
    }
  ]
}

程式碼解析：

此 JSON 結構定義了一個購物車陣列，其中每個專案包含 id、name、quantity、price 和 total 等屬性。

id：專案的唯一識別碼。
name：專案的名稱。
quantity：專案的數量。
price：專案的單價。
total：專案的總價，計算方式為 quantity * price。

建立 `app.js` 檔案

接下來，我們需要建立一個名為 app.js 的檔案，該檔案將呼叫 cart.json 檔案並呈現其內容。我們可以使用前一章節中的 basket.html 檔案。該檔案應如下所示：

<!-- 一個顯示購物車中專案列表的頁面，每個專案應具有標題、價格、數量、總和以及增加或減少數量的按鈕，頁面底部應有“結帳”連結 -->
<html>
<head>
  <title>購物車</title>
  <link rel="stylesheet" href="css/basket.css">
</head>
<body>
  <div class="container">
    <div id="basket" class="basket">
    </div>
  </div>
  <!-- 新增 app.js -->
  <script src="js/app.js"></script>
</body>

讓我們透過在 body 標籤末尾新增提示來新增 app.js：

新增 app.js。

Copilot 將生成以下程式碼：

<script src="js/app.js"></script>

程式碼解析：

此 HTML 程式碼片段引入了外部的 JavaScript 檔案 app.js，該檔案負責處理購物車的邏輯。

在 `app.js` 中讀取 `cart.json` 並呈現內容

在 app.js 中，我們新增以下提示：

讀取 cart.json 並將內容呈現為 div 元素到具有 ID basket 的元素中，為每個專案新增 CSS 類別 basket-item。

這應該會給出類別似以下的結果：

fetch('cart.json')
  .then(response => response.json())
  .then(data => {
    let basket = document.getElementById('basket');
    data.cart.forEach(item => {
      let div = document.createElement('div');
      div.classList.add('basket-item');
      div.innerHTML = item.name;
      basket.appendChild(div);
    });
  });

程式碼解析：

使用 fetch API 從 cart.json 檔案取得資料。
將取得的資料轉換為 JSON 格式。
取得 ID 為 basket 的 HTML 元素。
對 data.cart 陣列中的每個專案進行迭代，為每個專案建立一個新的 div 元素，並新增 basket-item CSS 類別。
將專案的 name 指定給 div 的 innerHTML。
將新建立的 div 元素新增到 basket 元素中。

改進輸出結果

為了改進輸出結果，我們可以進行以下操作：

為每個呈現的屬性新增 CSS 類別：

.basket-item > div {
  margin: 5px;
  width: 25%;
}

程式碼解析：

此 CSS 程式碼為 .basket-item 的直接子元素 div 新增樣式，設定了邊距和寬度，使其更具可讀性。

在 JavaScript 程式碼中新增提示，以使每個專案屬性呈現為單獨的 div 元素：

fetch('cart.json')
  .then(response => response.json())
  .then(data => {
    let basket = document.getElementById('basket');
    data.cart.forEach(item => {
      let div = document.createElement('div');
      div.classList.add('basket-item');

      // 將名稱呈現為單獨的子 div 元素
      let name = document.createElement('div');
      name.innerHTML = item.name;
      div.appendChild(name);

      // 將數量、價格和總計呈現為單獨的子 div 元素，並為每個元素新增標題和值
      let quantity = document.createElement('div');
      quantity.innerHTML = `數量：${item.quantity}`;
      div.appendChild(quantity);

      let price = document.createElement('div');
      price.innerHTML = `價格：${item.price}`;
      div.appendChild(price);

      let total = document.createElement('div');
      total.innerHTML = `總計：${item.price * item.quantity}`;
      div.appendChild(total);

      basket.appendChild(div);
    });
  });

程式碼解析：

此 JavaScript 程式碼片段進一步改進了購物車專案的呈現方式，將每個專案的名稱、數量、價格和總計分別呈現為單獨的 div 元素，使其更具結構化。

使用JavaScript增強網頁互動功能

在前面的章節中，我們已經探討瞭如何使用基本的CSS來美化購物車頁面。不過，為了進一步提升頁面的外觀和使用者經驗，我們決定引入一個CSS框架——Bootstrap。Bootstrap是一個被廣泛使用的框架，它提供了諸如「卡片」和「選單」等豐富的內容型別，能夠幫助我們更快速地構建應用程式。

新增Bootstrap框架

首先，我們需要在HTML檔案的<head>部分新增Bootstrap的參照。我們透過在<head>中新增一條註解形式的提示，來指示Copilot新增Bootstrap：

<!-- add bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

成功新增Bootstrap後，我們就可以使用其提供的類別來美化我們的購物車頁面。例如，我們可以建立一個「卡片」來展示購物車中的商品資訊。

建立商品卡片

為了建立一個包含商品名稱、價格、數量和總價的卡片，我們給出以下提示：

<!-- Create a card with the fields name, price, quantity and total -->
<div class="card">
  <div class="card-body">
    <h2 class="card-title">Product 1</h2>
    <p class="card-text">Price: 100</p>
    <p class="card-text">Quantity: 1</p>
    <p class="card-text">Sum: 100</p>
    <button type="submit" class="btn btn-primary btn-block btn-large">+</button>
    <button type="submit" class="btn btn-primary btn-block btn-large">-</button>
  </div>
</div>

程式碼解析：

卡片結構：使用<div class="card">來定義卡片，並在其中建立<div class="card-body">來包含卡片的主體內容。
商品資訊：使用<h2>標籤來顯示商品名稱，並使用<p>標籤來顯示價格、數量和總價。
按鈕操作：增加了兩個按鈕，用於增加或減少商品數量。

修改JavaScript程式碼以配合Bootstrap

為了將我們的JavaScript程式碼與Bootstrap卡片範本結合，我們給出以下提示：

// for each item in cart.json, render name, quantity, total, use template above
data.cart.forEach(item => {
  // target element with id basket
  let basket = document.getElementById('basket');
  let div = document.createElement('div');
  div.classList.add('card');
  
  basket.appendChild(div);
  let divBody = document.createElement('div');
  divBody.classList.add('card-body');
  div.appendChild(divBody);
  
  let name = document.createElement('h2');
  name.classList.add('card-title');
  name.innerHTML = item.name;
  divBody.appendChild(name);
  
  let price = document.createElement('p');
  price.classList.add('card-text');
  price.innerHTML = `Price: ${item.price}`;
  divBody.appendChild(price);
  
  let quantity = document.createElement('p');
  quantity.classList.add('card-text');
  quantity.innerHTML = `Quantity: ${item.quantity}`;
  divBody.appendChild(quantity);
  
  let total = document.createElement('p');
  total.classList.add('card-text');
  total.innerHTML = `Total: ${item.price * item.quantity}`;
  
  let buttonPlus = document.createElement('button');
  buttonPlus.classList.add('btn', 'btn-primary', 'btn-block', 'btn-large');
  buttonPlus.innerHTML = '+';
  divBody.appendChild(buttonPlus);
  
  let buttonMinus = document.createElement('button');
  buttonMinus.classList.add('btn', 'btn-primary', 'btn-block', 'btn-large');
  buttonMinus.innerHTML = '-';
  divBody.appendChild(buttonMinus);
});

程式碼解析：

迴圈處理：遍歷cart.json中的每個商品專案。
動態建立元素：根據Bootstrap卡片範本，動態建立並填充相應的元素。
樣式應用：為建立的元素新增必要的Bootstrap類別，以確保樣式正確應用。

切換到Vue.js框架

在上述過程中，我們意識到直接使用JavaScript來操作DOM元素可能不是最優解。因此，我們決定引入Vue.js框架，以實作更清晰的資料驅動檢視更新。

首先，在basket.html檔案的<body>結束標籤前，我們新增對Vue.js的參照：

<!-- add Vue 3 -->
<script src="https://unpkg.com/vue@next"></script>

然後，我們建立Vue應使用案例項：

let app = Vue.createApp({
  data() {
    return {
      // 資料初始化
    }
  }
})

程式碼解析：

引入Vue.js：透過新增<script>標籤來引入Vue.js函式庫。
建立Vue例項：使用Vue.createApp方法建立一個新的Vue應使用案例項，並定義其資料和方法。

透過引入Vue.js，我們能夠更優雅地管理我們的購物車頁面，並實作資料與檢視的分離，使得程式碼更加清晰和易於維護。

玄貓 BlackCat

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。

JavaScript網頁互動功能增強實踐

使用 JavaScript 新增行為

將問題分解為功能

新增 JavaScript

方法一：在 head 元素中使用 script 標籤

方法二：指向獨立檔案

JavaScript 的角色

在頁面中新增 JavaScript

新增 JavaScript 函式庫/框架

程式碼解析：

使用 JavaScript 為 Vue.js 應用程式新增行為

挑戰：新增一個按鈕來遞增計數器

使用案例：呈現購物車頁面

使用 AI 助手生成資料

程式碼解析：

建立 app.js 檔案

程式碼解析：

在 app.js 中讀取 cart.json 並呈現內容

程式碼解析：

改進輸出結果

程式碼解析：

程式碼解析：

使用JavaScript增強網頁互動功能

新增Bootstrap框架

建立商品卡片

程式碼解析：

修改JavaScript程式碼以配合Bootstrap

程式碼解析：

切換到Vue.js框架

程式碼解析：

玄貓 BlackCat

建立 `app.js` 檔案

在 `app.js` 中讀取 `cart.json` 並呈現內容