本篇文章目錄

1. 前言：從靜態 HTML 走向資料驅動 (Data-Driven)
2. 自動化體驗第一步：Date 物件與今日日期格式化 (YYYY/MM/DD)
3. 多時段資料結構設計：單一藥品物件與 times 陣列
4. 實戰 JS 語法：多選 Checkbox 抓取與物件陣列動態推送 (push)
5. 明日預告與結語

一、 前言：從靜態 HTML 走向資料驅動 (Data-Driven)

在 Day 19 中，我們建構好了包含多選 Checkbox 與四欄表格（slot-morning、slot-noon、slot-night、slot-bedtime）的 每日用藥時間表 靜態 UI 畫面。

今天 ，我們要為網頁注入 JavaScript 靈魂。我們將實作：

1. 自動帶入當天日期：讓列印產出的抬頭擁有即時時間標籤。
2. 多時段資料結構：使用 Object 與 Array精準表達「同一藥品多時段服用」的情境。
3. 動態表單收集與防呆驗證：精準抓取使用者勾選的時段並建立藥品資料。

二、 自動化體驗第一步：Date 物件與今日日期格式化

為了讓使用者列印出時間表時，標題下方能清楚標示「列印日期」，我們不需要使用者手動輸入，而是利用原生 JavaScript 的 Date 物件自動計算：

/tool3-schedule.js

// 1. 自動填寫今日日期 (格式：YYYY/MM/DD)
const dateSpan = document.getElementById("current-date-str");
const today = new Date();
const dateFormatted = `${today.getFullYear()}/${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getDate().toString().padStart(2, '0')}`;

if (dateSpan) dateSpan.textContent = dateFormatted;

亮點：

• today.getMonth() + 1：因為 JS 的月份是從 0 開始計算（0 表示 1 月），所以必須 +1。
• .padStart(2, '0')：確保月份或日期為單數時（如 3 月），會自動補零成為 03，保持視覺一致性。

三、 多時段資料結構設計：單一藥品物件與 times 陣列

當使用者輸入藥品名稱（如：普拿疼）、劑量/備註（如：1錠）並勾選了「早餐」與「晚餐」時，我們在 JS 中使用以下物件（Object）結構來封裝資料：

/tool3-schedule.js

// 範例：單一藥品物件資料結構
const newMed = {
  id: Date.now(),            // 使用毫秒時間戳記作為唯一 key
  name: "普拿疼",            // 藥品名稱
  dosage: "1錠",             // 劑量與備註 (預設為 "1錠")
  times: ["morning", "night"] // 多選時段陣列
};

// 整個時間表的核心資料庫：藥品陣列 (Array of Objects)
let medList = JSON.parse(localStorage.getItem("med_schedule_list")) || [];

這種結構完美解決了「一藥多時段」的需求。當我們進行表格分發時，只需要遍歷 times 陣列即可將同一藥品卡片放置於對應欄位。

四、 實戰 JS 語法：多選 Checkbox 抓取、表單防呆與資料推送 (push)

在這一段核心邏輯中，我們完成了三件事：

1. 多選抓取：利用 Array.from() 將 querySelectorAll 取得的 NodeList 轉為標準陣列，並配合 .map(cb => cb.value) 一口氣抓出所有被勾選的時段。
2. 防呆驗證 (Guard Clauses)：若未填寫藥品名稱，或未勾選任何時段，即時跳出 alert 並在中途 return 攔截。
3. 資料推送與重置：將驗證通過的新藥品物件透過 medList.push(newMed) 推入陣列，隨後呼叫儲存函式並重置表單。

/tool3-schedule.js

結語

今天我們成功透過 Date 物件實現了日期的動態格式化，並建立了精準的 medList 物件陣列資料結構，配合多選 Checkbox 抓取完成了新增藥品與 Guard Clauses 驗證防衛。