iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
2
Modern Web

JavaScript 初心者筆記系列 第 26

JavaScript 初心者筆記: 簡易 to-do list 練習

學會了 localStorage 跟 data-* 屬性後,今天就可以結合這兩者試著寫一個 to-do list 囉!


先貼個成品的程式碼連結

HTML 部分

首先,to-do list 是讓使用者輸入待辦事項用的,因此輸入欄是很關鍵的區塊。

  • input text - 輸入待辦事項的文字欄
  • input button - 送出按鈕
  • 沒寫 liul - 沒寫 li 的原因是要讓 JS 動態新增項目進去

JS 部分

能讓 to-do list 運作起來當然是靠 JavaScript,基本架構跟邏輯如下:

  1. 選取 DOM
  • input button
  • ul
  • 宣告一個變數 dataBase:目的是取出存在 localStorage 裡的資料並轉為陣列型別,如果瀏覽器裡沒存資料則跑空值
    ★ 補充說明:|| [ ] 代表 || 前面的程式碼如果沒執行,就跑空值。
  1. 監聽及更新
    在綁定事件監聽的區塊,處理的有加入、刪除、將存在瀏覽器裡的資料渲染置網頁等功能。
  2. 將待辦事項寫入資料庫,並同步更新網頁與 localstorage
    這個區塊是「加入待辦事項」的函式。
  3. 把存在 localStorage 裡的資料渲染至網頁
    這個區塊也是函式,具有把存在瀏覽器的資料加入至網頁上的功能,在整個程式碼裡反覆出現(第 2、第 3、第 5 步)。
  4. 刪除待辦事項,更新網頁跟 localstorage
    這個區塊是「刪除已寫入的項目」的函式。

上一篇
JavaScript 初心者筆記: HTML 的自訂資料屬性 - data-*
下一篇
JavaScript 初心者筆記: 瀏覽器物件模型 (BOM)
系列文
JavaScript 初心者筆記30

尚未有邦友留言

立即登入留言