---
tags: 六角學院_JavaScript 必修篇 - 前端修練全攻略
---
範例_todolist
===

<iframe height="300" style="width: 100%;" scrolling="no" title="todolist" src="https://codepen.io/hexschool/embed/OJWRqrN?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hexschool/pen/OJWRqrN">
todolist</a> by hexschool (<a href="https://codepen.io/hexschool">@hexschool</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

0.如何內嵌codepen
---
1. 點擊在 Fork 旁邊的 Embed
2. 點選 Inframe ， 把code 貼到 HackMD 裡

1.將資料顯示出來
---
### HTML
1. 新增 `input:text.txt[placeholder="待辦事項"]`
2. 新增 `input:b.save[value="儲存"]`
3. 新增 `ul.list>li>input:b.delete[value = "刪除" data-num =""]`

==補充：[Emmet語法](https://pjchender.blogspot.com/2016/07/emmet.html)==

<input type="text" class="txt" placeholder="待辦事項" />
<input type="button" value="儲存" class="save" />
<ul class="list">
  <li><input type="button" value="刪除" class="delete" data-num="" /></li>
</ul>

### JS
1. 創建 `data` 變數，並輸入資料(格式：陣列內包含多個物件)
2. 操作 DOM 時，通常會用 `const` ，比較不容易不小心改變值
3. 將初始化變成一個 `function`
1. **==使用 `document.querySelector` ，選擇器要用對，常忘記 `.`==**
2. 創建空字串 `str` ，記得賦值，不然會有 `undefined` 在列表第一處
3. `.forEach` 用 item 我感覺比較好，因為很常要 `.value`，如果照VS Code裡的寫會變成`value.value`
4. 將 `<li><input type="button" value="刪除" class="delete" data-num="" /></li>` 剪下，貼到 JS 裡
5. 使用 `.innerHTML` 改變裡面的標籤語言
4. 呼叫初始化函數

// 資料
let data = [{ content: "又舔又舔嘴唇" }, { content: "主辦單位要不要管一下" }];

// 預設載入函式
const list = document.querySelector(".list");
function init() {
  let str = "";
  data.forEach(function (item, index) {
    str += `<li>${item.content}<input type="button" value="刪除" class="delete" data-num="${index}" /></li>`;
  });
  list.innerHTML = str;
}
init();

### 小試身手(可編輯，重新整理頁面可以還原)

<iframe height="300" style="width: 100%;" scrolling="no" title="HackMD_todolist_1" src="https://codepen.io/jason60810/embed/LYyodbY?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jason60810/pen/LYyodbY">
HackMD_todolist_1</a> by jason (<a href="https://codepen.io/jason60810">@jason60810</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

2.新增資料
---
### JS
1. 創建 `save` `txt` 存入 DOM
2. 監聽 `save`
1. 如果輸入欄空白跳出警告，記得 return ，不然還是會執行下面的程式
2. 創建 `obj` 給空物件
3. 使用 `.屬性 = 內容`，新增物件屬性和內容
4. 使用 `push` ，將新物件加進 `data` 中
5. 使用 `init` 重讀 `data`
6. 把剛才輸入的東西清空，`.value = ""`

// 新增邏輯
const save = document.querySelector(".save");
const txt = document.querySelector(".txt");
save.addEventListener("click", function (e) {
  if (txt.value === "") {
    alert("還敢不寫待辦事項啊冰鳥");
    return;
  }
  let obj = {};
  obj.content = txt.value;
  data.push(obj);
  init();
  txt.value = "";
});

### 小試身手(可編輯，重新整理頁面可以還原)

<iframe height="300" style="width: 100%;" scrolling="no" title="HackMD_todolist_2" src="https://codepen.io/jason60810/embed/WNjBzyy?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jason60810/pen/WNjBzyy">
HackMD_todolist_2</a> by jason (<a href="https://codepen.io/jason60810">@jason60810</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

3.刪除資料
---
### JS
1. 監聽 `list`
1. 利用`.getAttribute`抓取現在點選的是不是刪除按鈕，如果不是點刪除按鈕跳出警告，記得 return ，不然還是會執行下面的程式
2. 創建 `num` 賦予 `data-num` 的值
3. 使用 `.getAttribute`，抓取 `data-num` 的值
4. 用 `.splice(刪除起始位置,刪除數量)` ，將數值為`data-num === index` 的物件刪除
5. 使用 `init` 重讀 `data`

// 刪除邏輯
list.addEventListener("click", function (e) {
  if (e.target.getAttribute("class") !== "delete") {
    alert("為什麼不幫我點按鈕極靈");
    return;
  }
  let num = e.target.getAttribute("data-num");
  data.splice(num, 1);
  init();
});

### 小試身手(可編輯，重新整理頁面可以還原)

<iframe height="300" style="width: 100%;" scrolling="no" title="HackMD_todolist_3" src="https://codepen.io/jason60810/embed/mdmYxZB?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jason60810/pen/mdmYxZB">
HackMD_todolist_3</a> by jason (<a href="https://codepen.io/jason60810">@jason60810</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>