【學習筆記】利用 JavaScript 實作簡易 Todo List

Photo by Glenn Carstens-Peters on Unsplash

本篇為 [FE102] 前端必備:JavaScript 這門課程的學習筆記。如有錯誤歡迎指正。

久久未更新,自從加入第四期程師導師計畫後,不知不覺持續寫程式也快滿三個月了。這禮拜進入第二次複習週,雖然仍有許多進度要補上,回頭複習也同樣重要!

於是乎,趁這週把之前實作過的 Todo List 觀念再重整一次,除了練習如何透過 JavaScript 操控 DOM 元素、也熟悉事件傳遞機制、如何進行事件監聽等等,寫下這篇筆記做記錄。

  • 新增 todo
  • 刪除 todo
  • 標記 todo 為已完成/未完成
  • 延伸:搭配 localStorage 本地儲存
在開始切版前,可利用 whimsical 等工具先畫出設計稿
  • wrapper:包含整個 Todo List 的容器
  • .todo__input:輸入欄位 input 和新增按鈕
  • .todo__list:放置所有 todo 的容器
  • .todo:切換狀態 checkbox、todo 標題、刪除按紐

按照設計稿,寫出程式碼如下:

將上述程式碼再加入 css 屬性,排版後版面如下:

Todo List 實作

在處理事件時,通常會需要指派監聽者(Event listeners)來監聽事件觸發。

透過監測 DOM 中的某一元素(element),當使用者觸發某事件(event)時,就會執行後續動作(functuion),語法如下:

element.addEventListener(‘event’, function, useCapture)
  • event 事件:監聽事件類型,如:click keypress
  • function 功能:當指定事件觸發時執行函式
  • useCapture:指定事件在捕獲或冒泡階段執行,預設值為 flase(冒泡)

參考筆記:[week 7] DOM 事件傳遞機制:捕獲與冒泡、事件代理

  • 在輸入框 點選 Add / 按下 Enter 鍵,可新增 todo
  • 新增後清空輸入框內容

步驟如下:

  1. 選取需要的 DOM 元素,監聽該元素的 click / keypress 事件

2. 若接收到事件,以函式 addTodos 處理新增 todo

3. 利用跳脫函式 escapeHtml 處理特殊字元,防止程式碼無法正常顯示

  • 點擊右側叉叉圖示,可刪除 todo

遇到問題:動態新增

由於 todo 是「動態新增」,若直接選取 .btn-delete,將無法對後來新增的按鈕進行監聽。

解決辦法:事件代理

我們可透過事件傳遞機制,改成對父元素(事件代理)進行事件監聽,如此即可對底下的所有 .btn-delete 進行監聽。

  • 點擊左側框框,能夠切換狀態為 check / uncheck

步驟如下:

  1. 同樣監聽 checkbox 的父元素 .todo__list
  2. 若點擊目標包含 checkbox,即可切換狀態
  • 是由 HTML5 提供的一種 Web Storage
  • 儲存大小約 5MB
  • 可將資料儲存在用戶端,資料就不會因重整頁面或關閉瀏覽器而消失
  • 以 key-value pair 的形式保存,且會轉成 JSON 字串格式
  • 儲存資料:localStorage.setItem(‘key’, ‘value’)
  • 讀取資料:let storageValue = localStorage.getItem(key, — value)
  • 清除資料:localStorage.removeItem(key)
  • 清除全部資料:localStorage.clear()

搭配 localStorage 實作 Todo List,我們可將資料存放在瀏覽器。但似乎還需要時間來研究如何使用,等之後熟悉用法會再來更新!

參考內容:
1. [JS初心者]帶你用localStorage做出一個陽春版「To-Do List」(待辦清單)-1
2. Day 20–30 天 Progressive Web App 學習筆記 — To-Do List 實作 PWA — (新增/修改/刪除待辦事項清單)
3. JS30-Day15-LocalStorage
4. HTML5 Web Storage
5. [JavaScript] Cookie、LocalStorage、SessionStorage 三種差異

不自負、不慌亂、腳踏實地。Heidi’s Blog: https://heidiliu2020.github.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store