本篇文章目錄

1. 前言：邁向強健 (Robust) 的醫療前端程式碼
2. 實戰防呆：表單輸入驗證與 Guard Clause 衛語句
3. [Tool 1 生理指標計算器] 完整 JS 程式碼大總匯
4. [Tool 1] 技術架構圖與開發里程碑總覽
5. 結語

一、 前言：邁向強健 (Robust) 的醫療前端程式碼

一個優秀的健康資訊工具，除了介面美觀、計算精準之外，最重要的核心品質就是「穩健性（Robustness）」——也就是絕對不能因為使用者的誤操作、漏填欄位或輸入異常數據而導致系統崩潰。

在完成了 BMI、BMR、TDEE 的核心演算法與馬卡龍 Badge 標籤動態渲染後，今天 [Day 13] 我們將剖析 Tool 1 的表單防呆機制，並對我們第一個開發完成的核心工具做一次全面的技術回顧與總結！

二、 實戰防呆：表單輸入驗證與 Guard Clause 衛語句

在我們的 [Tool 1] 中，我們在計算開始前設定了一道嚴密的防線：

/tool1-calculator.js

// === 表單基礎防呆與數值驗證 ===
if (!h || !w || !age || h <= 0 || w <= 0) {
  alert("請完整輸入有效的身高、體重與年齡！");
  return; // 強制中斷，不執行後續計算
}

關鍵防範邏輯解析：

1. !h || !w || !age（空值檢查）：

   當使用者未填寫欄位時，parseFloat() 解析結果會變成 NaN（Not a Number），在 JavaScript 中屬於假值 (Falsy)。透過 ! 運算子可以第一時間攔截任何漏填的狀況。

2. h <= 0 || w <= 0（非物理邏輯數值檢查）：

   防範使用者誤輸入 0 或負數（如 -165 cm）。如果不進行這層攔截，後續的 BMI 與 BMR 算式將會產出不合理的負數熱量或 Infinity（除以零）的嚴重邏輯錯誤。

3. return 衛語句 (Guard Clause)：

   一旦觸發條件，先跳出 alert 提示使用者，並立刻執行 return 結束函式，保護後續的數學算式與 DOM 渲染程式碼完全不被觸發。

三、 [Tool 1 生理指標計算器] 完整 JS 程式碼大總匯

經歷了 6 天的堆疊，以下是我們的 [Tool 1] 目前運行的完整 JavaScript 程式碼：

/tool1-calculator.js

四、 [Tool 1] 技術架構圖與開發里程碑總覽

從 Day 08 到 Day 13，我們成功完成了第一個完整的 SPA 核心模組，並建立了後續模組的開發樣板 (Design Pattern)：

[Tool 1 核心技術地圖]
├── UI / Layout：CSS Grid 雙欄表單、無邊框馬卡龍卡片、RWD 行動端適應
├── 安全與防呆：DOMContentLoaded 安全載入、Guard Clause 衛語句、數值轉型 validation
├── 醫療演算法：Mifflin-St Jeor 國際標準 BMR 公式、TDEE 活動量換算、toFixed(1) 格式化
└── 視覺互動：textContent 安全文字渲染、className 動態切換三色馬卡龍 Badge

成果回顧：

現在使用者只要輸入基本數據並點擊「✨ 開始計算」，系統能在瞬間算出 BMI、BMR、TDEE，且 Badge 標籤會立刻根據體位狀況換上綠色、黃色或紅色。

五、 結語

恭喜大家跟著完成了第一個核心工具！這奠定了我們對於原生 JS 操作 DOM、邏輯演算與樣式切換的堅實基礎。

從明天的 [Day 14] 開始，我們將正式進入 [Tool 2] 兒童藥物劑量換算器！我們將挑戰兒科常見的「依體重計算藥物毫升數 (mg/kg/dose)」臨床算式，並設計專屬於兒童用藥的溫和介面。