5 分鐘寫一個待辦清單網頁小程式
前置準備
- 一台可以上網的電腦
- 電腦安裝好瀏覽器（Chrome、Firefox、Safari、Edge 等等）
- 用瀏覽器打開 JS Bin（https://jsbin.com）
JS Bin 工作區介紹
總共分成 HTML、CSS、JavaScript、Console、Output 五個工作區，我們可以點擊按鈕去打開或是關掉該工作區。
在寫這一次的網頁小程式的整個過程，我們只要打開 HTML、JavaScript、Output 三個工作區即可。
產生靜態畫面
在左邊的 HTML 工作區找到 body 和 /body
文字輸入框 在 body 和 /body 中間輸入：
input id="input"
就能在右邊的 Output 區域看到出現一個文字輸入框。
新增事項按鈕 然後在 input 的下一行輸入：
button id="button"新增/button
產生按鈕（你可以自行替換按鈕的文字）
待辦清單 接著在新的一行輸入：
ul id="ul" li運動 30 分鐘/li li閱讀 10 頁/li
/ul
產生待辦清單（如果想加入其他事項，只要多輸入一組 li/li 即可）
⚠️ Check Point 左邊的 HTML 工作區目前長這樣：
點擊按鈕新增事項
如果要讓按鈕有功能，必須透過 JavaScript 來達成。
⚠️ 記得勾選 Output 工作區的 Auto-run JS，後續在 JavaScript 工作區輸入的程式碼才會自動執行喔！
偵測按鈕點擊 在 JavaScript 工作區輸入：
button.onclick = function() { window.alert("點擊按鈕")
}
⚠️ Check Point: 點擊按鈕會挑出警告視窗，並且顯示「點擊按鈕」
點擊按鈕抓取輸入框文字 將程式碼修改成：
button.onclick = function() { window.alert(input.value)
}
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會挑出警告視窗，並且顯示輸入框中的文字
點擊按鈕新增事項 再將程式碼修改成：
button.onclick = function() { ul.innerHTML += "li" + input.value + "/li"
}
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會在待辦清單中新增事項
點擊清單完成事項
繼續在 JavaScript 工作區輸入：
ul.onclick = function(e) { e.target.style.textDecoration = "line-through"
}
⚠️ Check Point: 被點擊到的事項會被劃掉
最後 JavaScript 的工作區長這樣：
一個簡單的待辦清單網頁小程式就大功告成啦！
補上 JS Bin 範例程式碼連結：https://jsbin.com/yeveqasijo/edit?html,js,output
最後我們可以點選左上角的選單，來進行以下常見的功能：
- New: 新建網頁
- Delete: 刪除網頁
- Save snapshot: 儲存網頁（儲存完就可以透過網址將寫好的網頁分享給其他人）
- Download: 下載網頁（將網頁下載至電腦中，留作備份或是進一步編輯）
如果有疑問歡迎大家在下方留言！
還想知道學習其他網頁或是程式相關的技術，也都歡迎提出！
感謝大家的閱讀！
然後在 input 的下一行輸入：
button id="button"新增/button
產生按鈕（你可以自行替換按鈕的文字）
待辦清單 接著在新的一行輸入：
ul id="ul" li運動 30 分鐘/li li閱讀 10 頁/li
/ul
產生待辦清單（如果想加入其他事項，只要多輸入一組 li/li 即可）
⚠️ Check Point 左邊的 HTML 工作區目前長這樣：
點擊按鈕新增事項
如果要讓按鈕有功能，必須透過 JavaScript 來達成。
⚠️ 記得勾選 Output 工作區的 Auto-run JS，後續在 JavaScript 工作區輸入的程式碼才會自動執行喔！
偵測按鈕點擊 在 JavaScript 工作區輸入：
button.onclick = function() { window.alert("點擊按鈕")
}
⚠️ Check Point: 點擊按鈕會挑出警告視窗，並且顯示「點擊按鈕」
點擊按鈕抓取輸入框文字 將程式碼修改成：
button.onclick = function() { window.alert(input.value)
}
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會挑出警告視窗，並且顯示輸入框中的文字
點擊按鈕新增事項 再將程式碼修改成：
button.onclick = function() { ul.innerHTML += "li" + input.value + "/li"
}
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會在待辦清單中新增事項
點擊清單完成事項
繼續在 JavaScript 工作區輸入：
ul.onclick = function(e) { e.target.style.textDecoration = "line-through"
}
⚠️ Check Point: 被點擊到的事項會被劃掉
最後 JavaScript 的工作區長這樣：
一個簡單的待辦清單網頁小程式就大功告成啦！
補上 JS Bin 範例程式碼連結：https://jsbin.com/yeveqasijo/edit?html,js,output
最後我們可以點選左上角的選單，來進行以下常見的功能：
- New: 新建網頁
- Delete: 刪除網頁
- Save snapshot: 儲存網頁（儲存完就可以透過網址將寫好的網頁分享給其他人）
- Download: 下載網頁（將網頁下載至電腦中，留作備份或是進一步編輯）
如果有疑問歡迎大家在下方留言！
還想知道學習其他網頁或是程式相關的技術，也都歡迎提出！
感謝大家的閱讀！
左邊的 HTML 工作區目前長這樣：
點擊按鈕新增事項
如果要讓按鈕有功能，必須透過 JavaScript 來達成。
⚠️ 記得勾選 Output 工作區的 Auto-run JS，後續在 JavaScript 工作區輸入的程式碼才會自動執行喔！
偵測按鈕點擊 在 JavaScript 工作區輸入：
button.onclick = function() { window.alert("點擊按鈕")
}
⚠️ Check Point: 點擊按鈕會挑出警告視窗，並且顯示「點擊按鈕」
點擊按鈕抓取輸入框文字 將程式碼修改成：
button.onclick = function() { window.alert(input.value)
}
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會挑出警告視窗，並且顯示輸入框中的文字
點擊按鈕新增事項 再將程式碼修改成：
button.onclick = function() { ul.innerHTML += "li" + input.value + "/li"
}
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會在待辦清單中新增事項
點擊清單完成事項
繼續在 JavaScript 工作區輸入：
ul.onclick = function(e) { e.target.style.textDecoration = "line-through"
}
⚠️ Check Point: 被點擊到的事項會被劃掉
最後 JavaScript 的工作區長這樣：
一個簡單的待辦清單網頁小程式就大功告成啦！
補上 JS Bin 範例程式碼連結：https://jsbin.com/yeveqasijo/edit?html,js,output
最後我們可以點選左上角的選單，來進行以下常見的功能：
- New: 新建網頁
- Delete: 刪除網頁
- Save snapshot: 儲存網頁（儲存完就可以透過網址將寫好的網頁分享給其他人）
- Download: 下載網頁（將網頁下載至電腦中，留作備份或是進一步編輯）
如果有疑問歡迎大家在下方留言！
還想知道學習其他網頁或是程式相關的技術，也都歡迎提出！
感謝大家的閱讀！
將程式碼修改成：
button.onclick = function() { window.alert(input.value) }
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會挑出警告視窗，並且顯示輸入框中的文字
點擊按鈕新增事項 再將程式碼修改成：
button.onclick = function() { ul.innerHTML += "li" + input.value + "/li"
}
⚠️ Check Point: 先在輸入框輸入一些文字，然後點擊按鈕會在待辦清單中新增事項
點擊清單完成事項
繼續在 JavaScript 工作區輸入：
ul.onclick = function(e) { e.target.style.textDecoration = "line-through"
}
⚠️ Check Point: 被點擊到的事項會被劃掉
最後 JavaScript 的工作區長這樣：
一個簡單的待辦清單網頁小程式就大功告成啦！
補上 JS Bin 範例程式碼連結：https://jsbin.com/yeveqasijo/edit?html,js,output
最後我們可以點選左上角的選單，來進行以下常見的功能：
- New: 新建網頁
- Delete: 刪除網頁
- Save snapshot: 儲存網頁（儲存完就可以透過網址將寫好的網頁分享給其他人）
- Download: 下載網頁（將網頁下載至電腦中，留作備份或是進一步編輯）
如果有疑問歡迎大家在下方留言！
還想知道學習其他網頁或是程式相關的技術，也都歡迎提出！
感謝大家的閱讀！
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.