JavaScript 基礎：讓靜態畫面變成互動應用

按鈕沒反應、資料沒更新、Console 一堆紅字，前端最多的 bug 都出在 JavaScript，不懂就完全無法排查。

React 的 useState、useEffect、事件處理，全部建立在 JavaScript 的基礎上，這篇先把操作 DOM、事件監聽、呼叫 API 這三件事練熟，之後看 React 才不會覺得是魔法。

JS 在前端做什麼

操作 DOM

// 取得元素
const btn = document.querySelector('.submit-btn')
const title = document.getElementById('main-title')

// 讀取和修改內容
const text = title.textContent // 讀取文字
title.textContent = '新的標題' // 修改文字
title.innerHTML = '<strong>粗體</strong>' // 修改 HTML

// 修改樣式
title.style.color = '#c04040'
title.style.fontSize = '24px'

// 加減 class
title.classList.add('highlight')
title.classList.remove('hidden')
title.classList.toggle('active') // 有就移除，沒有就加

事件監聽

const btn = document.querySelector('#submit-btn')

// 點擊事件
btn.addEventListener('click', function(event) {
  console.log('按鈕被點擊了')
  event.preventDefault() // 阻止表單預設送出行為
})

// 輸入框變化
const input = document.querySelector('#search')
input.addEventListener('input', (e) => {
  console.log('目前輸入：', e.target.value)
})

非同步 JS 與 API 呼叫

前端呼叫後端 API 需要等待，JavaScript 用 async / await 處理這種「等待」。

// async function 可以在裡面 await
async function getWeather(city) {
  try {
    // fetch 發送請求，await 等待回應
    const response = await fetch(`/api/weather?city=${city}`)
    // 確認 HTTP 狀態碼正常
    if (!response.ok) {
      throw new Error(`HTTP 錯誤：${response.status}`)
    }
    // 解析 JSON 回應
    const data = await response.json()
    console.log(data) // { city: "Taipei", temp: 28 }
    return data
  } catch (error) {
    console.error('API 呼叫失敗：', error)
  }
}

// 呼叫這個 function
getWeather('Taipei')

讀懂 AI 生的 JS：常見模式

練習：讀懂一段收合按鈕的邏輯

const btn = document.querySelector('#toggle-btn')
const content = document.querySelector('.content')

btn.addEventListener('click', () => {
  content.classList.toggle('hidden')
  btn.textContent = content.classList.contains('hidden')
    ? '顯示' : '隱藏'
})

下一步的練習：做一個有輸入框和查詢按鈕的頁面，點擊後用 fetch 呼叫你的天氣 API，把城市名稱和溫度顯示在頁面上，不只是印在 Console。輸入台北並點查詢，頁面上要出現台北的溫度和天氣描述，開發者工具的 Network 面板能看到成功的請求，狀態碼是兩百。