網頁嬰兒自學教材：第4課 ── 親手做一個：待辦事項清單

第4課 課程目標

做出一個能管理自己待辦事項的小工具，俗稱的 todo list。

在這個過程中順便學習更多 JavaScript 與 jQuery 基本知識。

第4課 課程內容

學習一下怎麼透過瀏覽器查看開發時的訊息、錯誤訊息：

https://www.w3schools.com/js/js_debugging.asp

接著學一下怎麼使用 jQuery 去操作網頁上的元素：

• https://www.w3schools.com/jquery/jquery_dom_get.asp
• https://www.w3schools.com/jquery/jquery_dom_set.asp
• https://www.w3schools.com/jquery/jquery_dom_add.asp
• https://www.w3schools.com/jquery/jquery_dom_remove.asp

以及一些進階的 jQuery 選取元素方法：

https://www.w3schools.com/jquery/traversing_parent.asp

第4課 作業

這次的作業要做待辦事項管理清單，俗稱的 todo list app。

你會從中學到現代各種雲端工具類型的網站是怎麼寫的。

需求如下，請全部滿足，才算是做完作業：

• 有一個 ul 元素與內部多個 li 元素代表待辦事項
• 每個 li 元素待辦事項內含文字，以及一個「完成」按鈕、一個「刪除」按鈕
  • 按下「完成」按鈕會將這個事項的背景顏色、文字顏色變色
  • 按下「刪除」按鈕會刪除這個事項
• 有一個 text input 欄位可以輸入「待辦事項」，以及一個「新增」按鈕，按下之後會新增到清單內

完成這些，你就完成這次的課程目標了！