# 第 7 章：讓網頁動起來 ## 本章目標 這一章會把前面學到的 HTML、CSS、JavaScript 串起來，做出真正有互動的網頁。你會練習按鈕、輸入框、表單送出、畫面更新與錯誤提示。 ## 你會做出什麼 你會做出一個「Prompt 筆記小工具」。使用者可以輸入 prompt，按下按鈕後把內容加入清單；如果沒有輸入內容，畫面會顯示提醒。 ## 核心觀念 互動網頁的基本流程是： 1. HTML 提供輸入框、按鈕與顯示區 2. CSS 讓畫面清楚易讀 3. JavaScript 監聽使用者操作 4. JavaScript 檢查資料 5. JavaScript 更新 DOM 只要掌握這個流程，就能做出很多小型工具。 ## 互動流程對比：表單驗證 想像一個沒有檢查機制的表單：使用者就算輸入空白，資料也會被送出，導致後端收到一堆無效資料。 加入 JavaScript 後的互動流程： - **Before**：點擊送出 -> 直接更新。 - **After**：點擊送出 -> **JavaScript 攔截並檢查「輸入框是否為空？」** -> 若為空，中斷流程並顯示紅字警告 -> 若有值，才允許更新並清空輸入框。 這層「防護網」是 JS 在前端非常重要的任務。 ### 實際的事件監聽器範例 讓我們把前面的概念具象化。在 JS 中，監聽一個按鈕點擊的程式碼通常長這樣： ```javascript // 1. 選取畫面上的元素 (假設按鈕的 id 是 submitBtn) const btn = document.querySelector('#submitBtn'); // 2. 監聽點擊事件 (addEventListener) btn.addEventListener('click', function() { // 3. 當點擊發生時，執行大括號裡面的邏輯 alert("按鈕被點擊了！"); }); ``` 這段程式碼就是前端互動的靈魂。未來你請 AI 幫忙寫的互動邏輯，有八成都是建立在這個架構之上。 ## 實作步驟 1. 建立輸入框與送出按鈕。 2. 建立一個清單顯示 prompt。 3. 用 JavaScript 選取輸入框、按鈕、清單與提示文字。 4. 點擊按鈕時讀取輸入值。 5. 如果輸入是空的，顯示錯誤提示。 6. 如果輸入有內容，新增到清單並清空輸入框。 ## Codex Prompt 範例 ```text 請幫我用 HTML、CSS、JavaScript 做一個 Prompt 筆記小工具。使用者可以輸入 prompt，按下按鈕後加入清單；如果輸入空白，要顯示錯誤訊息。請使用初學者能理解的寫法，不要使用任何框架。 ``` ## 常見錯誤 * **[錯誤] 沒有阻止空白內容加入清單** **[解法]**：在 JS 中加上 `if (input.value.trim() === "") return;` 就能提前擋下空白輸入。 * **[錯誤] 每次新增都覆蓋掉舊內容** **[解法]**：不要使用 `innerHTML =`，應該使用 `innerHTML +=` 或 `insertAdjacentHTML` 來附加內容。 * **[錯誤] 按鈕沒有設定事件監聽** **[解法]**：檢查是否有正確綁定 `addEventListener("click", function)`。 ## 本章練習 請替範例加上「清空全部」按鈕，點擊後移除所有 prompt。 > **[小提示]** 你可以用 JavaScript 選取裝載 prompt 的容器（例如 `