本篇文章目錄

1. 前言：首發工具登場 —— Tool 1 生理指標計算器（BMI/BMR/TDEE）
2. 觀念釐清：DOM 畫面會顯示給使用者嗎？
3. 實戰程式碼解析：DOMContentLoaded 載入、DOM 取值與事件監聽
4. 程式碼亮點與防呆機制剖析
5. 結語

一、 前言：首發工具登場 —— Tool 1 生理指標計算器（BMI/BMR/TDEE）

在完成了 HTML 結構與 RWD 響應式 CSS 切版後，今天我們正式邁入 JavaScript 邏輯實作 的第一個階段！

作為《醫藥健康數位工具箱》的首發核心模組，「生理指標計算器」 能讓使用者在幾秒鐘內輸入基本數據，一次算出三大關鍵指標：

• BMI (身體質量指數)：評估體位是過輕、正常還是肥胖的基礎門檻。
• BMR (基礎代謝率)：採用 Mifflin-St Jeor 公式，估算一整天完全躺著不動時維持生命所需的最低熱量。
• TDEE (每日總消耗熱量)：結合日常活動量係數，算出實際消耗的總熱量，作為飲食規劃的黃金基準。

今天我們將學習如何用原生 JavaScript 捕捉這些輸入數據，作為核心演算法的基石！

二、 觀念釐清：DOM 畫面會顯示給使用者嗎？

在寫 JavaScript 之前，很多新手常有一個疑問：「DOM 畫面會顯示給使用者嗎？」

答案是：會。使用者在網頁上看到的每一字每一畫，通通都是 DOM 呈現在螢幕上的視覺結果。

• HTML 檔案：就像一份死的藍圖。
• DOM (Document Object Model)：瀏覽器根據藍圖在記憶體中蓋出來的實體結構。
• 渲染畫面 (Render)：瀏覽器把這座 DOM 結構繪製成視覺圖案展現給使用者。

當我們用 JS 修改 DOM 節點時，瀏覽器會即時重繪畫面，讓使用者立刻看到計算結果的動態變化！

三、 實戰程式碼解析：DOMContentLoaded 載入、DOM 取值與事件監聽

以下是我們 [Tool 1] 用於監聽按鈕、抓取欄位數值與防呆驗證的核心開頭邏輯：

四、 程式碼亮點與防呆機制剖析

1. DOMContentLoaded 的安全防護

將程式碼包在 DOMContentLoaded 事件內，能確保瀏覽器先把 HTML 樹狀結構建構完畢後才執行 JS，徹底避免因抓不到 DOM 節點而產生的 Cannot read properties of null 錯誤。

2. Guard Clause (衛語句) 避免程式卡死

if (!btnCalcTdee) return; 是一種專業的防錯寫法。若當前頁面找不到該按鈕，程式會優雅地直接結束，不會引發後續的報錯。

3. 字串轉數字：parseFloat() 與 parseInt()

HTML <input> 讀取出來的 .value 預設都是字串 (String)。

• 使用 parseFloat() 將身高、體重與活動量轉為浮點數（如 165.5），保障小數點的精準度。
• 使用 parseInt() 將年齡轉為整數。

4. 嚴格的輸入驗證

!h || !w || !age 可以攔截未填寫的空白欄位（轉為數字會變成 NaN，屬於假值）；而 h <= 0 || w <= 0 則能防止使用者誤輸入 0 或負數，並透過 alert 彈窗提示後以 return 中斷執行，確保後續數學計算不會出錯。

五、 結語

今天我們成功建立了 [Tool 1] 生理指標計算器的安全防線，掌握了 DOM 事件監聽、欄位轉型 與 表單驗證！

在明天的 [Day 09] 中，我們將把通過驗證的數據帶入 BMI、Mifflin-St Jeor (BMR) 與 TDEE 數學公式 中，並把馬卡龍數字卡片渲染回 DOM 畫面上。