非常基礎的靜態網頁完成了，接下來打算進入到入門的JavaScript，今天先來了解最基礎的JavaScript！

JavaScript先備知識

主要分成三個大觀念：

1. DOM（文件物件模型，Document Object Model）
   • HTML 在瀏覽器裡會變成「物件樹」(物件樹是DOM的一種說法，HTML 寫好後，瀏覽器不會直接看文字，而是會把它「翻譯」成一個像家譜一樣的 樹狀結構。)
   • 你可以用 JavaScript 去「找到」某個元素（像是 getElementById）
   • 然後去「改變」它的屬性（像是 style.display = "none"）

1. 事件（Events）

   • 我們在網頁上的動作：點擊、輸入、切換選項、提交表單…

   • JS 可以監聽這些事件，然後「執行程式碼」。

   • 常見語法：

     element.addEventListener("click", function() {
         // 要做的事
     });
     

1. 條件判斷（if / else）

   • 用來判斷「現在的狀況」，決定要做哪件事。

   • 例子：

     if (exerciseSelect.value === "yes") {
         // 顯示輸入框
     } else {
         // 隱藏輸入框
     }
     

所以就記得：DOM → 事件 → 條件判斷

明天會進到實作，來將表單(form)加上一個功能：

• 使用者如果選「有運動」，才顯示「運動內容輸入框」；如果選「沒有」，就自動隱藏。
• 這樣表單更簡潔明瞭，不會顯示一堆不必要的欄位。