基本語法結構

if (條件1) {
  // 條件1 為真執行
} else if (條件2) {
  // 條件1 假、條件2 真執行
} else if (條件3) {
  // 多重判斷...
} else {
  // 以上條件皆假執行
}

實戰範例：依時間顯示問候語

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>時間問候</title>
</head>
<body>
  <script>
  var now = new Date();
  var hour = now.getHours(); // 0-23

  if (hour < 6) {
    document.write("<b>凌晨好，別熬夜啦！</b>");
  } else if (hour < 10) {
    document.write("<b>早上好！充滿活力的一天開始了。</b>");
  } else if (hour < 12) {
    document.write("<b>上午好！工作順利。</b>");
  } else if (hour < 14) {
    document.write("<b>中午好！記得吃午餐休息。</b>");
  } else if (hour < 18) {
    document.write("<b>下午好！午後茶時間到。</b>");
  } else if (hour < 22) {
    document.write("<b>晚上好！放鬆一下吧。</b>");
  } else {
    document.write("<b>夜深了，早點休息。</b>");
  }
  </script>
</body>
</html>

關鍵觀念補充

1. 條件表達式：最終會被轉型為布林值。0, "", null, undefined, NaN, false 為 false，其餘為 true。
2. 嚴格相等：建議習慣用 === / !== 避免隱含型別轉換陷阱。
3. 邏輯運算子：&& (且)、|| (或)、! (非) 可組合複雜條件。
4. 大括號習慣：即使只有一行語句，也建議加 { }，避免後續維護錯誤。
5. else if vs 多個 if：else if 是互斥分支，只要一個成立就不再判斷後續；多個獨立 if 則會逐一評估。

進階模式：三元運算子與短路求值

// 三元運算子 (簡單雙分支)
var greeting = (hour < 12) ? "上午好" : "下午好";

// 邏輯短路賦值預設值
var name = userInput || "訪客"; // userInput 為假值時用 "訪客"

// 短路執行函數
isLoggedIn && renderUserPanel(); // 左側為真才執行右側
isGuest || showLoginModal();     // 左側為假才執行右側

除錯技巧

• 使用 console.log() 替代 document.write()，不會覆蓋頁面。
• 瀏覽器開發者工具 (F12) Console 面板觀察變數值。
• 設置中斷點逐步執行，觀察條件判斷流向。

條件判斷是程式邏輯的基石，掌握 if/else if/else、三元運算子、邏輯運算子與短路特性，能寫出清晰、健壯的流程控制代碼。