網頁動起來！JavaScript 初體驗 (Day15)

2025 iThome 鐵人賽

DAY 15

佛心分享-IT 人自學之術

30 天體驗：從程式菜鳥到前端新手工程師系列第 15 篇

17th鐵人賽

tingisgood

2025-09-29 20:35:41

28 瀏覽

分享至

前兩週我們把房子蓋好（HTML 結構）也裝潢漂亮（CSS 樣式），但它還是「靜態」的。
今天，我們要接上電力系統 —— JavaScript (JS)，讓網頁開始對使用者有反應，真正「活起來」⚡！

1. 什麼是 JavaScript？

一種在瀏覽器就能跑的程式語言。
讓網頁產生互動（按鈕點了有反應、內容會更新、會檢查輸入……）。
前端三元素：HTML（結構）、CSS（外觀）、JS（互動/邏輯）。

2. 把 JS 放進 HTML 的三種方式

(A) 內嵌（最即時）

<script>
  console.log('Hello JS');
</script>

•優點：快速、方便示範。
•缺點：程式跟結構混在一起，不利維護。

(B) 外部檔案（建議）

<!-- HTML -->
<script src="app.js"></script>

// app.js
console.log('Hello from app.js');

•優點：好維護、可重複使用。
•路徑要正確（跟 CSS 一樣）。

(C) defer（最佳實務之一）

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

•defer 讓 HTML 可以先解析完，再執行 JS（避免 DOM 還沒準備好就操作的報錯）。

3. 最基本輸出：讓我們先「說話」

(1) console.log（開發者主控台輸出）

<script>
  console.log('這行只會出現在瀏覽器的 Console！');
</script>

•打開瀏覽器 → F12 → Console 就能看到。

(2) alert（跳出小視窗）

<script>
  alert('哈囉！這是我的第一個 JS 視窗');
</script>

(3) 寫到頁面上（避免用 document.write，改用 DOM）

<h1 id="title">原本的標題</h1>
<script>
  const title = document.getElementById('title');
  title.textContent = 'JS 改了這段文字 🎉';
</script>

4. DOM 操作超入門：選元素 → 改內容 / 改樣式

常用選取

document.getElementById('id名')
document.querySelector('CSS選擇器')       // 如 '#title'、'.btn'、'p'
document.querySelectorAll('CSS選擇器')     // 取得一組節點

改內容 / 改樣式 / 切換 class

title.textContent = '新標題';
title.style.color = 'deepskyblue';
title.classList.toggle('active'); // 有則移除、無則加入

5. 事件（Event）：讓按鈕「有反應」

範例：點按鈕改文字

<h2 id="msg">點按鈕看看！</h2>
<button id="btn">點我</button>

<script>
  const msg = document.getElementById('msg');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    msg.textContent = '按到了！內容被 JS 換掉啦 🙌';
  });
</script>

範例：切換深色主題

<style>
  body.dark { background:#111; color:#fff; transition: .3s; }
</style>

<button id="theme">切換主題</button>

<script>
  const themeBtn = document.getElementById('theme');
  themeBtn.addEventListener('click', () => {
    document.body.classList.toggle('dark');
  });
</script>

6. 🎯 今日實戰

(1) Hello JS 三連發

目標：同時用三種方式輸出「Hello, JS!」

<h3 id="hello"></h3>
<script>
  // 1) Console
  console.log('Hello, JS!');

  // 2) alert
  alert('Hello, JS!');

  // 3) 寫進頁面
  document.getElementById('hello').textContent = 'Hello, JS! 👋';
</script>

(2) 按鈕互動：點我改字 + 變色

<h2 id="title">今天要好好學 JS！</h2>
<button id="change">改文字</button>
<button id="color">變顏色</button>

<script>
  const title = document.getElementById('title');
  document.getElementById('change').addEventListener('click', () => {
    title.textContent = '文字被改囉 😎';
  });
  document.getElementById('color').addEventListener('click', () => {
    title.style.color = title.style.color === 'tomato' ? '' : 'tomato';
  });
</script>

改文字:

改顏色:

(3) 輸入即時預覽（超有成就感）

<input id="name" placeholder="輸入你的名字">
<p>嗨，<span id="preview">陌生人</span>！</p>

<script>
  const input = document.getElementById('name');
  const preview = document.getElementById('preview');

  input.addEventListener('input', () => {
    preview.textContent = input.value || '陌生人';
  });
</script>