這個單元裡我們會繼續用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它可能也會一起生成,但我們先忽略,自己寫。
<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欄位後可以看見如下的畫面。
現在我們幫這份文檔加一點裝潢,我請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的指令編輯包括顏色、排版等等。最後大概會像這樣:
請記得,現在先不要太糾結於樣式調整之類的事,我們今天的目的是學會如何操作JavaScript。
我們先用內建的method來取得按鈕的HTML。
用內建的document
內建的querySelector()
method可以找到特定的HTML元素,用’#add-btn’
作為參數可以找到id
是’add-btn’
那項。
接著我們可以為這個HTML加上event listener,就像之前在document上加上一樣。
第一個參數一樣用’click'
,表示我們要監聽按鈕被點擊這件事,在按鈕被點擊後,執行add()
這個function。
add()
接著定義add()
function。
如此一來,id
是’add-btn’
的按鈕被點擊時,就會有訊息出現在console。
接下來我們希望點擊按鈕的時候,取得<input>
裡的資料,然後創建新的格子來放這筆資料。接著改寫add()
。
把text
印出來。
接下來的步驟會比較陌生,我們需要先用JS創立HTML tag,再把text
放入HTML裡。
這裡用到的HTML是用template literal語法,可以從這裡複製:
`
<span>${text}</span>
<button class="delete-btn" >x</button>
`
雖然我們創建好了新的tag而且也指定好值了,但我們還沒把它放進我們之前的HTML中。我想把它放進<ul>
內部,現在就來做這件事:
這樣新增to-do的任務就完成啦!
deleteTodo()
因為delete
在JS裡面是一個預設的關鍵字,我們就用deteleTodo這個名字。
我們先簡單的console.log()
一些訊息。
把這個function加在刪除按鈕上面。
好的這裡是很容易造成混淆的地方,我們現在在變更的是HTML的屬性,它讓我們可以在HTML上綁定元素被’click’
時要執行什麼動作。後面要接的是function以及()
,不只是function名字,跟JS不一樣。除了這種方式之外,我們還有很多方法可以綁定deleteTodo()
和HTML,雖然HTML上面寫的語法有點不一樣,但這是最簡單的其中之一,我們先以簡單的為主。
完成後按下紅色按鈕就會出現”delete”
。
然後為了刪除特定的項目,我們會用到this
關鍵字。
現在是由刪除按鈕HTML來呼叫deleteTodo()
,所以this
指的就是那個HTML元素。
我們把它當作參數寫進deleteTodo()
。
我們就能成功取得我們點擊的那顆按鈕的HTML,用它找到parentNode
(包在它外面的<li>
),然後用預設的methodremove()
來刪除。
這樣就大功告成啦!
最後我們再稍微做一些優化,讓打完字送出之後input回歸空白。
我們稍微改寫input那塊,把HTML的<input>
存成一個變數inputElement
。在新增完to-do之後,清空<input>
裡面的值,並且自動focus回去。
這樣一來,每次新增完<input>
格子內就會回復原狀,並且會自動再次選擇它,讓我們繼續打字了。
還有很多種優化這個小app的方式,例如:可以用HTML<form>
來製作這個表單,如此一來就可以用預設的’submit’
事件,讓使用者更直覺地按下enter鍵時自動提交表單。
總而言之,目前我們的重點還是在掌握JavaScript本身基礎語法以及運作規則。雖然經過10天的學習,我們目前還沒辦法做出非常精緻和實用的web app,但我們能夠理解基本的JS程式碼甚至是撰寫。當前的學習重點還是在於那些組成這個語言的骨架,包含.
、[]
、{}
符號,還有let
、var
、funciton
這些關鍵字的意義之類。至於一些預設的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的基礎學習之旅能為你開啟更多探索之門,繼續保持熱情,並享受每一個小小的進步。
完。
我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。