JavaScript 入門教學：5 步驟讓你的網頁動起來

前面幾篇，我們用 HTML 搭出網頁的內容，用 CSS 替網頁換上外觀，也做了表格與表單。但目前的網頁都是「靜態」的：訪客點了按鈕沒有反應，表單填錯了也不會提醒。想讓網頁能回應使用者的操作，就需要 JavaScript。

本文延續前幾篇的 myweb 資料夾，用「記事本」與瀏覽器，以 5 個步驟帶你寫出第一段 JavaScript：顯示訊息、記錄點擊次數、檢查表單、自動產生九九乘法表。文中的圖片為示意圖，不是實際畫面。

先搞懂：JavaScript 是什麼？

JavaScript 是網頁的「行為」語言，也是所有瀏覽器都內建的程式語言，不需要另外安裝任何東西。和前兩項合起來，網頁的三個基本角色是：

圖 1　HTML、CSS、JavaScript 的分工（示意圖）

步驟一：把 JavaScript 加進網頁

1. 開啟記事本，按「檔案」→「另存新檔」，在 myweb 資料夾存成 script.js（存檔類型選「所有檔案」，編碼選 UTF-8）。
2. 打開 index.html，在 </body> 的前一行加入：

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

為什麼要放在最後面？因為瀏覽器是由上往下讀網頁，如果 JavaScript 先執行，網頁上的元素還沒出現，程式就找不到它們。放在 </body> 之前，可以確保內容都載入完了才執行。

接著在 script.js 輸入第一段程式並存檔：

console.log("Hello, JavaScript!");
alert("歡迎來到我的網頁！");

重新整理瀏覽器，畫面會跳出一個對話方塊。接著按 F12 開啟「開發人員工具」，切到「Console（主控台）」，就能看到 Hello, JavaScript!。

• alert()：跳出訊息對話方塊給使用者看。
• console.log()：把訊息輸出到主控台，給「開發者」看。寫程式時用來檢查結果，非常好用。

小提醒：確認完成後，請把 alert("歡迎來到我的網頁！"); 那一行刪掉，不然每次開網頁都會跳出來，很煩人。

步驟二：變數、資料型態與修改網頁內容

「變數」就像貼了標籤的盒子，用來存放資料。先在 index.html 的 <script> 前面加入一段文字與一個按鈕（id 取名為 demo-text 與 demo-btn，避免和前一篇表單裡的 id 重複）：

<h2>JavaScript 小實驗</h2>
<p id="demo-text">這裡的文字會被 JavaScript 改掉。</p>
<button id="demo-btn">點我</button>

然後在 script.js 裡，把原本的內容換成：

const userName = "小明";
const year = new Date().getFullYear();
let count = 0;

const demoText = document.getElementById("demo-text");
demoText.textContent = "哈囉，" + userName + "！今年是 " + year + " 年。";

• const：宣告「不會再改變」的變數。
• let：宣告「之後可能會改變」的變數，例如計數器。
• new Date().getFullYear()：取得今年的年份。
• document.getElementById("demo-text")：用 id 找到網頁上的某個元素。
• .textContent：該元素裡的文字，指定新值就能改變畫面。
• +：用來把字串與變數接在一起。

重新整理後，原本的提示文字已經被換成「哈囉，小明！今年是 … 年。」，這就是用 JavaScript 動態修改網頁的第一步。

三種最基本的資料型態

型態	說明	範例
字串（String）	文字，要用引號包起來	"小明"
數字（Number）	整數或小數，不加引號	18、3.14
布林值（Boolean）	只有「是」或「否」兩種值	true、false

步驟三：用「事件」回應使用者的操作

網頁真正的互動，來自「事件」：使用者點擊、輸入、送出表單……，瀏覽器都會產生事件，我們只要告訴它「事件發生時，要做什麼事」。

圖 2　從使用者操作到畫面更新（示意圖）

在 script.js 後面接著加入：

const demoBtn = document.getElementById("demo-btn");

demoBtn.addEventListener("click", function () {
  count = count + 1;
  demoText.textContent = "你已經點了 " + count + " 次！";
});

• addEventListener("click", 函式)：替元素登記「點擊」事件，事件發生時就會執行後面的函式。
• function () { ... }：一段等著被執行的程式，大括號裡就是要做的事。
• count = count + 1：把 count 目前的值加 1 後，再存回 count。

重新整理後，每按一次「點我」，上方的文字就會更新次數。你的網頁終於會「回應」了。

步驟四：用 if 判斷，檢查表單有沒有填寫

程式常常要「看情況」做事，這就是條件判斷：如果……就……，否則……。我們用它來替上一篇做的意見回饋單加上檢查功能：姓名沒填，就不讓表單送出。

首先，把 index.html 裡的 <form action="#" method="post"> 加上 id，改成：

<form id="feedback" action="#" method="post">

再到 script.js 加入：

const form = document.getElementById("feedback");

form.addEventListener("submit", function (e) {
  const nameValue = document.getElementById("name").value.trim();

  if (nameValue === "") {
    e.preventDefault();
    alert("請輸入姓名！");
  } else {
    alert("謝謝你，" + nameValue + "！");
  }
});

• "submit"：表單被送出時觸發的事件。
• .value：取得輸入欄位目前的內容。.trim() 會去掉前後的空白，避免有人只輸入空格。
• if (條件) { ... } else { ... }：條件成立就執行前面，否則執行 else 後面。
• ===：比較「是否完全相等」。注意單一個 = 是「指定值」，不是比較。
• e.preventDefault()：取消事件原本的預設行為，這裡就是阻止表單送出。

常用的比較運算子

運算子	意思	範例
===	等於	score === 100
!==	不等於	name !== ""
>、<	大於、小於	age > 18
>=、<=	大於等於、小於等於	score >= 60

步驟五：用函式與迴圈，一次產生九九乘法表

如果要重複做很多次類似的事情，不用複製貼上，用「迴圈」就好；如果一段程式想重複使用，就把它包成「函式」。我們來用 JavaScript 自動產生九九乘法表。先在 index.html 的 <script> 前面加入一個空的容器：

<h2>九九乘法表</h2>
<div id="table99"></div>

再到 script.js 加入：

function makeTable() {
  let html = "<table>";

  for (let i = 1; i <= 9; i++) {
    html += "<tr>";
    for (let j = 1; j <= 9; j++) {
      html += "<td>" + i + "×" + j + "=" + (i * j) + "</td>";
    }
    html += "</tr>";
  }

  html += "</table>";
  document.getElementById("table99").innerHTML = html;
}

makeTable();

圖 3　雙層迴圈產生乘法表（示意圖）

• function makeTable() { ... }：定義一個名叫 makeTable 的函式。定義完不會自動執行，要在後面「呼叫」它（最後一行 makeTable();）。
• for (let i = 1; i <= 9; i++)：迴圈。意思是「從 i = 1 開始，只要 i 小於等於 9 就重複，每次結束 i 加 1」。
• 迴圈裡面再放一個迴圈，就是「雙層迴圈」：外層跑 9 次，每次內層又跑 9 次，總共產生 81 格。
• html +=：把新內容接在原本的字串後面，等於 html = html + ...。
• .innerHTML：和 .textContent 不同，它會把字串當成 HTML 解析，所以能產生表格。

安全小提醒：innerHTML 只適合放「自己寫的內容」。如果要顯示的是訪客輸入的文字，請改用 textContent，否則可能有安全風險。

存檔重新整理後，你的網頁就會出現一張完整的九九乘法表，而這張表格，你一行 <td> 都沒有手寫。

新手常見問題

• 程式沒反應：按 F12 開啟「Console」，紅色的錯誤訊息會告訴你是哪個檔案、第幾行出了問題，這是最重要的除錯工具。
• 出現「Cannot read properties of null」：表示用 getElementById 沒找到元素。檢查 id 有沒有拼錯（大小寫有差別），以及 <script> 是否放在 </body> 之前。
• 出現「xxx is not defined」：變數名稱拼錯了，或是用了還沒宣告的變數。JavaScript 區分英文大小寫，userName 與 username 是不同的變數。
• 少了括號或引號：括號 ()、大括號 {}、引號 "" 都必須成對，漏掉一個，整份程式都可能失效。
• 改了程式沒變化：確認 script.js 已存檔，並在瀏覽器按 Ctrl＋F5 強制重新整理。

小練習：讓網頁更有趣

1. 替計數器再加一顆「歸零」按鈕，按下後把 count 設回 0。
2. 加一顆「換背景色」按鈕，點擊時用 document.body.style.backgroundColor = "#ffe4e6"; 改變網頁背景。
3. 替意見回饋單再加上「信箱不可空白」的檢查。
4. 把九九乘法表改成只產生 1 到 5 的乘法表（提示：改迴圈的上限）。
5. 挑戰：做一個猜數字小遊戲，用 Math.floor(Math.random() * 10) + 1 產生 1 到 10 的隨機數字，讓使用者輸入猜測並顯示結果。

結語

JavaScript 的核心觀念是：用變數存資料，用事件接收使用者的操作，用判斷與迴圈處理邏輯，再改變網頁的內容。今天你已經用到了變數、事件、if 判斷、函式與迴圈，這些是所有程式語言共通的基礎。學會這些，你已經從「做網頁」邁向「寫程式」了。

下一步，可以進一步學習陣列與物件、用 JavaScript 操作 CSS 樣式，或是搭配 PHP 等後端程式，讓表單資料真正送到伺服器處理。