2024-09-10 JavaScript 系列六：第6課 ── 認識 data model 的優點

發表於 分類於 閱讀次數：
2024-09-10 JavaScript 系列六：第6課 ── 認識 data model 的優點

JavaScript 系列六：第6課 ── 認識 data model 的優點
課程目標
繼續熟悉 data model 的觀念

課程內容
有了 data model 與 render function 之後

除了在更新資料時，腦中一律只要想著 data model 就好

就連在撈資料時，也一樣只要思考 data model 就好，非常方便

反觀，原本的原始寫法，需要從 UI 結構中，分析出當前的資料狀態，麻煩得多

課後作業
接續上一課作業，這次來實作「匯出」按鈕

請加入類似這樣的按鈕

1
<button onclick="export()">匯出</button>

接著請將 export 函式完成，過程中不能去讀取 DOM，只能去讀取 data model

1
2
3
4
function export()
{
  // 請寫出此函式內容
}

匯出時用 alert 跳出訊息「今日待辦：1. 洗衣服 2. 買文具 3. 去健身房」

根據事項，如果是重要事項，請用星號包起來 重要任務，如果是緊急事項，請用雙星號包起來 緊急任務

舉例來說，按下匯出按鈕之後，就用 alert 跳出訊息「今日待辦：1. 洗衣服 2. 買文具 3. 去健身房」

做出以上功能，你就完成這次的課程目標了！