Day Bonus JavaScript 實作 To-Do List

閱讀時間約 13 分鐘


這個單元裡我們會繼續用Codepen來製作簡單的To-Do List app。裡面會使用到基本的HTML和CSS來製作UI,別擔心會非常簡單。示範的Codpen同樣會附在今天的內容裡面,如果想看成果的話可以直接點前往。

基礎架構

為了完成這個web app,我們必須先理解HTML、CSS之間的關係。HTML就像房子的結構,CSS則是各種裝潢。毫無疑問,房子一定會有結構,某些要求也只有改結構才能達成,但裝潢這件事可能比大家想的更強大,建築物裝潢後有機會呈現完全不同的通透感,CSS做的事情也絕對不只是改顏色那麼簡單。

HTML和CSS關係先談到這邊,由於我們的重點並不是他們,直接叫GPT生成就可以了。我prompt ChatGPT「I want a very simple to-do list web app HTML」。由於Codepen的介面把HTML、CSS分開了,我們也必須把得到的結果再分成兩者。JavaScript它可能也會一起生成,但我們先忽略,自己寫。

HTML

<div id='app'>
<h2>To-Do List</h2>
<input type="text" placeholder="Add a new todo">
<button id="add-btn">Add</button>
<ul id="todo-list"></ul>
</div>

HTML是由一層一層的tag包裹住的文件檔,<...>是開頭</…>是結尾。圖中就是一個<div>包著<h2><input><button>等等其他的tag。其中我加了一些特別的屬性方便辨識,例如最外層的<div>id=”app”可以再等一下JS裡面幫助識別、<ul>id=”todo-list”等等。將這一串複製進Codepen上的HTML欄位後可以看見如下的畫面。

raw-image

CSS

現在我們幫這份文檔加一點裝潢,我請GPT製作後只稍微修改了一些部分。

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
#app {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 300px;
text-align: center;
}
h2 {
margin: 0;
}
input[type="text"] {
padding: 8px;
width: 80%;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
border: none;
background-color: #28a745;
color: white;
border-radius: 4px;
cursor: pointer;
transition: 0.2s;
}
button#add-btn:hover {
background-color: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 8px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
li.done {
text-decoration: line-through;
color: gray;
}
.delete-btn {
background: none;
border: none;
color: #f24;
font-size: 16px;
cursor: pointer;
transition: 0.2s;
}
.delete-btn:hover {
background: #f24;
color: white;
}

這些語法都是CSS Selector(選擇器),我們可以用它來選擇對應的HTML tag,例如#app會選到id=”app”的這個tag,接著用CSS的指令編輯包括顏色、排版等等。最後大概會像這樣:

raw-image

請記得,現在先不要太糾結於樣式調整之類的事,我們今天的目的是學會如何操作JavaScript。

JavaScript

取得按鈕HTML

我們先用內建的method來取得按鈕的HTML。

raw-image

用內建的document內建的querySelector()method可以找到特定的HTML元素,用’#add-btn’作為參數可以找到id’add-btn’那項。

接著我們可以為這個HTML加上event listener,就像之前在document上加上一樣。

raw-image

第一個參數一樣用’click',表示我們要監聽按鈕被點擊這件事,在按鈕被點擊後,執行add()這個function。


實作add()

接著定義add()function。

raw-image

如此一來,id’add-btn’的按鈕被點擊時,就會有訊息出現在console。

raw-image


接下來我們希望點擊按鈕的時候,取得<input>裡的資料,然後創建新的格子來放這筆資料。接著改寫add()

一樣使用querySelector()找到<input>這個元素,並且存取裡面的value。

一樣使用querySelector()找到<input>這個元素,並且存取裡面的value。

text印出來。

raw-image


接下來的步驟會比較陌生,我們需要先用JS創立HTML tag,再把text放入HTML裡。

使用createElement()來創立HTML<li>,接著設定innerHTML為text和刪除按鈕。在刪除按鈕上加上’delete-btn’這個class讓之前寫的CSS可以運作。

使用createElement()來創立HTML<li>,接著設定innerHTML為text和刪除按鈕。在刪除按鈕上加上’delete-btn’這個class讓之前寫的CSS可以運作。


這裡用到的HTML是用template literal語法,可以從這裡複製:

`
<span>${text}</span>
<button class="delete-btn" >x</button>
`

雖然我們創建好了新的tag而且也指定好值了,但我們還沒把它放進我們之前的HTML中。我想把它放進<ul>內部,現在就來做這件事:

raw-image


這樣新增to-do的任務就完成啦!

raw-image


實作deleteTodo()

因為delete在JS裡面是一個預設的關鍵字,我們就用deteleTodo這個名字。

我們先簡單的console.log()一些訊息。

raw-image

把這個function加在刪除按鈕上面。

寫在HTML裡面的onclick可以用來連結JS程式碼。

寫在HTML裡面的onclick可以用來連結JS程式碼。

好的這裡是很容易造成混淆的地方,我們現在在變更的是HTML的屬性,它讓我們可以在HTML上綁定元素被’click’時要執行什麼動作。後面要接的是function以及(),不只是function名字,跟JS不一樣。除了這種方式之外,我們還有很多方法可以綁定deleteTodo()和HTML,雖然HTML上面寫的語法有點不一樣,但這是最簡單的其中之一,我們先以簡單的為主。


raw-image

完成後按下紅色按鈕就會出現”delete”


然後為了刪除特定的項目,我們會用到this關鍵字。

raw-image

現在是由刪除按鈕HTML來呼叫deleteTodo()所以this指的就是那個HTML元素。

我們把它當作參數寫進deleteTodo()

raw-image

我們就能成功取得我們點擊的那顆按鈕的HTML,用它找到parentNode包在它外面的<li>),然後用預設的methodremove()來刪除。

raw-image

這樣就大功告成啦!

清理和優化

最後我們再稍微做一些優化,讓打完字送出之後input回歸空白。

raw-image

我們稍微改寫input那塊,把HTML的<input>存成一個變數inputElement。在新增完to-do之後,清空<input>裡面的值,並且自動focus回去。


raw-image

這樣一來,每次新增完<input>格子內就會回復原狀,並且會自動再次選擇它,讓我們繼續打字了。

結語

還有很多種優化這個小app的方式,例如:可以用HTML<form>來製作這個表單,如此一來就可以用預設的’submit’事件,讓使用者更直覺地按下enter鍵時自動提交表單。

總而言之,目前我們的重點還是在掌握JavaScript本身基礎語法以及運作規則。雖然經過10天的學習,我們目前還沒辦法做出非常精緻和實用的web app,但我們能夠理解基本的JS程式碼甚至是撰寫。當前的學習重點還是在於那些組成這個語言的骨架,包含.[]{}符號,還有letvarfunciton這些關鍵字的意義之類。至於一些預設的object和它們的method該如何使用,未來逐步接觸慢慢了解就可以了(甚至是有需要再問GPT都不會太晚)。


你會發現,我們目前的網頁只有一頁,而且資料重新整理之後就會消失。所以接下來的學習途徑可以朝著這些方向前進,你會開始製作包含多頁的網站、串接資料庫等等。進一步的發展過程中,你也會了解到為什麼很多人會使用JS framework(框架)來提升效率,例如 React、Vue、Next.js、Nuxt 等熱門選項。但請注意,了解這些框架存在的原因可能比學習它更為重要。另外,在討論這麼多JS之後,你應該會發現這裡對變數的type(類型)並沒有那麼重視,而這是一個非常大的問題 — string‘3’和number3總是會有差別的!因此有人將type的概念融合JS,創造出了TypeScript,這也是很主流的學習目標(基本上現代化的專案都是用TS寫的)。


「10日 Javascript」的內容大多改寫自Brad Schiff的線上課程「Learn JavaScript: Full-Stack from Scratch」。這門課程涵蓋的不僅是這10天的基礎,還有資料庫和前後端分工等更深入的內容。作為一門線上課,老師將內容切分的很適當,每支影片都在合理的時間內。而且口條、內容品質都非常好,即使不是非常熟悉英語,都能夠跟得上教學,是非常推薦的學習資源。


學習程式語言是一段不斷成長的旅程,技術不斷迭代,既有必須學的新知識,也有可以探索的更多機會。正因如此,學習過程中充滿成就感和驚喜。還記得我們在第一天看到的作品嗎?正是那些作品激發了我持續學習的動力。隨著深入了解,你會發現許多開源資源社群支持,大家共同分享、學習,讓我們站在彼此的肩膀上成長。希望這段JavaScript的基礎學習之旅能為你開啟更多探索之門,繼續保持熱情,並享受每一個小小的進步。


完。


Resource

今日Codepen

連結

Credits

關於我

我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。

0會員
11內容數
留言0
查看全部
發表第一個留言支持創作者!
HCY 71的沙龍 的其他內容
在JavaScript裡面,Async和Await應該是搜尋熱度最高的關鍵字了,因為他們相對複雜。我們一步步討論這件事的歷史 — 它們為什麼出現,解決了什麼問題。 JavaScript的Synchronous(同步) 首先我們必須了解JavaScript執行的基本原則 — synchrono
今天要談的內容也是JavaScript很核心的部分,即使學完了先前的章節,馬上去看別人寫的JavaScript程式碼還是會看不懂,主要是因為JS開發者會採用各種簡化和替代的寫法,我們一一討論。 Anonymous(匿名) Function 首先我們要討論的是Anonymous(匿名) Fun
Scope(作用域) 不只是JavaScript,scope的概念在每個程式語言裡面都有,但每個語言scope運作邏輯多少有差異。 我們先來舉個例來了解scope: 隨著myFunction()執行,這段程式毫無疑問的console.log()出了myName這個變數的值’my name’
在開始討論這兩個陌生的名詞之前,我們先準備一份資料以便後續測試使用。 這筆資料是users的資料,可能是社群平台用來記錄使用者資料的格式。其中users是一個array(有[]包著),裡面包含了3個Object(有{}包著),每個Object內有許多的property-value配對(如id:
Higher-Order Function(高階方程式) 是什麼 Higher-Order Function簡稱HOF,是指一個以function作為參數的function或者回傳function的function,我知道目前聽起來非常抽象,我們舉一個我們之前就已經看過的例子。 以Funct
做選擇的時刻 程式語言中,做選擇是非常常見的一件事。例如:判斷登入者身份是否為管理員、當前設定是否為深色模式等。想像我們有一個交易系統,我們需要判斷使用者帳戶餘額是否足夠購買Apple Vison Pro。首先,我們必須認識if跟else。 if 和 else if跟else是常見的條件判
在JavaScript裡面,Async和Await應該是搜尋熱度最高的關鍵字了,因為他們相對複雜。我們一步步討論這件事的歷史 — 它們為什麼出現,解決了什麼問題。 JavaScript的Synchronous(同步) 首先我們必須了解JavaScript執行的基本原則 — synchrono
今天要談的內容也是JavaScript很核心的部分,即使學完了先前的章節,馬上去看別人寫的JavaScript程式碼還是會看不懂,主要是因為JS開發者會採用各種簡化和替代的寫法,我們一一討論。 Anonymous(匿名) Function 首先我們要討論的是Anonymous(匿名) Fun
Scope(作用域) 不只是JavaScript,scope的概念在每個程式語言裡面都有,但每個語言scope運作邏輯多少有差異。 我們先來舉個例來了解scope: 隨著myFunction()執行,這段程式毫無疑問的console.log()出了myName這個變數的值’my name’
在開始討論這兩個陌生的名詞之前,我們先準備一份資料以便後續測試使用。 這筆資料是users的資料,可能是社群平台用來記錄使用者資料的格式。其中users是一個array(有[]包著),裡面包含了3個Object(有{}包著),每個Object內有許多的property-value配對(如id:
Higher-Order Function(高階方程式) 是什麼 Higher-Order Function簡稱HOF,是指一個以function作為參數的function或者回傳function的function,我知道目前聽起來非常抽象,我們舉一個我們之前就已經看過的例子。 以Funct
做選擇的時刻 程式語言中,做選擇是非常常見的一件事。例如:判斷登入者身份是否為管理員、當前設定是否為深色模式等。想像我們有一個交易系統,我們需要判斷使用者帳戶餘額是否足夠購買Apple Vison Pro。首先,我們必須認識if跟else。 if 和 else if跟else是常見的條件判
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
先學習 HTML, CSS, JavaScript 基礎觀念, 再透過實作專案,慢慢熟悉不同的語法使用方式。
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。