第 6 章

JavaScript 基本互動

HTML 是骨架，CSS 是外觀，而 JavaScript 是讓網頁有「靈魂」的技術。這章你會學到如何讓網頁對使用者的點擊、輸入做出反應，做出真正有互動感的功能。

📌 本章重點

如何在 HTML 中引入 JavaScript
變數（var / let / const）
資料型別：字串、數字、布林值
函式（function）的定義與呼叫
DOM 操作：選取元素、修改內容
事件監聽（click、input 等）

📖 教學說明

如何引入 JavaScript

HTML

<!-- 推薦：把 script 放在 </body> 前面 -->
<body>
  <!-- 頁面內容 -->

  <!-- 外部 JS 檔案 -->
  <script src="script.js"></script>
</body>

<!-- 或是直接在 HTML 裡寫 -->
<script>
  console.log('Hello from JavaScript!');
</script>

變數

變數就像是一個「命名的盒子」，用來儲存資料。

JavaScript

// let：可以重新賦值的變數（推薦）
let name = '小明';
let age = 20;

// const：不能重新賦值的常數
const PI = 3.14159;
const siteName = 'Vibe Coding';

// 基本資料型別
let greeting = '你好';        // 字串 (string)
let count = 42;              // 數字 (number)
let isLearning = true;       // 布林值 (boolean)

// 在 console 輸出（按 F12 打開瀏覽器開發工具查看）
console.log(name);
console.log('我叫' + name + '，今年' + age + '歲');

函式（function）

函式是「可以重複使用的一段程式碼」。定義一次，想用的時候隨時呼叫。

JavaScript

// 定義函式
function sayHello(name) {
  alert('你好，' + name + '！');
}

// 呼叫函式
sayHello('小明');

// 有回傳值的函式
function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result); // 輸出 8

DOM 操作：選取與修改元素

DOM（Document Object Model）是瀏覽器把 HTML 轉成的「物件樹」。用 JavaScript 操作 DOM，就能動態改變網頁的內容和樣式。

JavaScript

// 選取元素
const title = document.getElementById('main-title');
const btn = document.querySelector('.my-button');
const items = document.querySelectorAll('li');

// 修改文字內容
title.textContent = '新的標題';

// 修改 HTML 內容
title.innerHTML = '<span style="color:red">紅色標題</span>';

// 修改樣式
title.style.color = 'blue';
title.style.fontSize = '2rem';

// 新增 / 移除 CSS class
btn.classList.add('active');
btn.classList.remove('active');
btn.classList.toggle('active'); // 有就移除，沒有就加上

事件監聽

「事件」就是使用者做的動作，例如點擊、移動滑鼠、輸入文字。

JavaScript

const btn = document.getElementById('myBtn');

// 點擊事件
btn.addEventListener('click', function() {
  alert('你點擊了按鈕！');
});

// 輸入事件（用在 input 欄位）
const input = document.getElementById('nameInput');
input.addEventListener('input', function() {
  const display = document.getElementById('display');
  display.textContent = '你輸入了：' + input.value;
});

💻 完整範例：計數器

把以下程式碼存成 HTML 檔案，在瀏覽器打開就能看到可以點擊的計數器：

HTML + JavaScript

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>計數器</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 40px; }
    #count { font-size: 4rem; font-weight: bold; color: #4f46e5; }
    button { font-size: 1.2rem; padding: 10px 24px; margin: 8px;
             border: none; border-radius: 6px; cursor: pointer; }
    #inc { background: #4f46e5; color: white; }
    #dec { background: #e2e8f0; }
    #reset { background: #fee2e2; color: #dc2626; }
  </style>
</head>
<body>
  <h1>計數器</h1>
  <div id="count">0</div>
  <br>
  <button id="dec">－</button>
  <button id="inc">＋</button>
  <button id="reset">重置</button>

  <script>
    let count = 0;
    const display = document.getElementById('count');

    document.getElementById('inc').addEventListener('click', function() {
      count++;
      display.textContent = count;
    });

    document.getElementById('dec').addEventListener('click', function() {
      count--;
      display.textContent = count;
    });

    document.getElementById('reset').addEventListener('click', function() {
      count = 0;
      display.textContent = count;
    });
  </script>
</body>
</html>

⚠️ 常見錯誤

✗

getElementById 找不到元素

確認 HTML 裡的 id 和 JavaScript 裡的 id 拼字完全相同，包含大小寫。id 是大小寫敏感的！

✗

script 標籤放在 head 裡導致抓不到元素

如果 script 在 head 裡，HTML 還沒載入完，document.getElementById 就會回傳 null。把 script 放在 body 結尾前可以解決這個問題。

✗

= 和 == 搞混

= 是「賦值」（把值放進變數），== 是「比較」（兩個值相不相等）。在 if 判斷式裡要用 ===（嚴格相等）。

✏️ 小練習

🎯 動手試試看

練習 1

複製上方的計數器範例，修改讓計數器不能低於 0（加入 if 判斷，當 count 已經是 0 時不執行減少）。

練習 2

在你的自我介紹頁面加一個「切換深色模式」的按鈕，點擊後讓背景變成深色、文字變成白色。

練習 3

建立一個簡單的輸入框，使用者輸入名字後，底下即時顯示「你好，[名字]！」的問候語。

🎉

本章完成！

你的網頁現在會動了！下一章我們要學最進階的技巧：如何精準地讓 AI 幫你修改和優化網頁。