尤川豪   ·  4月前
Exp. 1,630  ·  212 貼文  ·  145 留言

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

第4課 課程目標

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

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

第4課 課程內容

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

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

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

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

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

第4課 作業

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

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

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

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

完成這些,你就完成這次的課程目標了!

  分享   共 313 次點閱
共有 0 則留言
您的留言