HTML / JavaScript 入門：Browser 如何把文件變成互動頁面

Learning outcomes

• 能區分 HTML source、DOM、JavaScript state。
• 能用 selector 找 DOM element。
• 能追蹤 click → callback → DOM update。
• 能用 Console/Elements 判斷 selector 或 runtime 問題。

1. HTML 建立初始文件

<button id="load">
  Load courses
</button>

<p id="status">
  Idle
</p>

Browser parse 後建立 DOM nodes。

2. JavaScript 取得 DOM Reference

const button =
  document.querySelector(
    "#load"
  );

const status =
  document.querySelector(
    "#status"
  );

若 selector 沒找到，結果可能是 null；之後呼叫 method 就可能 TypeError。

3. Event Listener

button.addEventListener(
  "click",
  () => {
    status.textContent =
      "Loading...";
  }
);

4. HTML / JS Script Loading 順序

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

defer 讓 external script 在 HTML parsing 後依規則執行，常能避免 code 太早查詢尚未建立的 DOM。

5. CSS 是另一層

#status {
  font-weight: 700;
}

CSS 決定 presentation；JavaScript 不需要為每個外觀直接手動 style。HTML/CSS/JS 各有主要責任，但會在 Browser runtime 匯合。

Project checkpoint：Request Journey Map v5

HTML downloaded
  ↓ parse
DOM created
  ↓
app.js executes
  ↓
event listener registered
  ↓
user clicks
  ↓
JS updates DOM

Debug evidence：按了沒反應

1. Elements 有 button 嗎？
2. Console 有 error 嗎？
3. selector 回 null 嗎？
4. handler 有 log 嗎？
5. DOM property 最後有改嗎？