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: 下載網頁（將網頁下載至電腦中，留作備份或是進一步編輯）
如果有疑問歡迎大家在下方留言！
還想知道學習其他網頁或是程式相關的技術，也都歡迎提出！
感謝大家的閱讀！
留言0
查看全部