【JS 專案 - 01】 今晚來點 TodoList...

從美術設計轉職成前端工程師之前，我大概花了半年左右的時間攻克了Html和Css這兩座小山，接著在職幾年內努力精通它們。期間也因為畫面需要用到許多特效或是執行效果，間接的也會看一點點的 jQuery 和 javaScript (以下簡稱 JQ 和 JS)，但是僅限會看會改(ID或Class Name)，但不會自寫code的程度(哭。

所學知識早已跟不上日新月異的網頁技術，便研究了一下 JQ 和 JS，原來 JQ 是以 JS 去編寫的函式庫，所以概念運用其實很相近，且 JQ 的語法親民很多，還有很多網路大神貢獻的諸多效果範本可運用，對沒什麼程式基礎的網頁美術設計師而言，真心就是個救世主來著。只是網頁需要用到的，不僅僅動態效果要處理，還有很多介面或表單上的互動和資料傳遞，單靠 JQ 的處理是不夠的，最好的學習方式，就是從它的原生語言 javaScript 著手。

在研讀了Adam Lin老師「JavaScript基礎入門」，還有Danny Huang老師「JavaScript新手秘笈｜三大專案帶你輕鬆入門」，及六角學院「JavaScript 入門篇 - 學徒的試煉」 的課程之後，真心覺得沒有實作和學習筆記輔助，就會導致今天學習明天忘記的窘狀。於是拋掉無聊的自尊心，提筆了我荒廢XX年的寫作技術，由號稱程式基本款的 To do list 的介面互動開始！

註：本文是導讀在 Hiskio平台， Danny Huang老師「JavaScript新手秘笈｜三大專案帶你輕鬆入門」發布的教學影片內容，且以自己的理解方式重新描述以達學習目標。

在開始做 TodoList 這個小專案之前，首先我們可能需要稍微學習一下關於 javaScript 的一些程式語法架構，這時候就推薦使用 JS 的官方文件或是最著名的 w3schools 來做程式碼的輔助查詢，或是研讀上方提供的 JS 學習課程亦可(不過不是免費的喔～)。

TodoList 的功能需求如下：

1. 儲存 代辦事項
2. 顯示 代辦事項
3. 新增 代辦事項
4. 更新 代辦事項
5. 刪除 代辦事項

由於本人是 JS 初心者，所以照著老師教學的要求，一開始教的程式碼都不會很艱深，後面慢慢會有好多版來強化這5個功能的使用，目前預計會有約11版的使用者故事。

TodoList v1.0 實作開始：

功能一：「儲存」

JS 儲存資料的方式，就不能不提 變數(Variable) 了！所有不同項目的代辦事項都是資料對吧，必須有地方儲存它，才能在日後讀取出來，或是對它做其他功能使用，如編輯、刪除等，而這個存放的盒子就稱之為變數。

變數可使用 var 來宣告才能對它做後續指令的下達，但因儲存的代辦事項不可能只有一項(總不會永遠都只有一件事要做吧?!!)，所以還需要運用到 陣列(Array) 來儲存各個代辦事項。

寫法：var 變數名稱 = [XXX, OOO, ZZZ];
(中括號內 XXX, OOO, ZZZ 就是你要新增的內容)

//儲存代辦清單內的陣列資料
var myTodos = ['item1','item2','item3'];

js 白話文：

• 命名一個變數為 myTodos，並用 var 去宣告，作用是儲存代辦事項內的陣列資料，陣列內容為各項目名稱，分別為item1、item2、item3 (甚至更多...)。
• 因每個代辦事項都是文字顯示，所以將其定義為字串，需使用單引號「' '」或雙引號「" "」包覆起來，再用逗號「,」去串接下一組。

功能二：「顯示」

使用 console.log 這個指令來印出陣列中的內容。

寫法：console.log(變數名稱);
(中括號內填上你之前宣告的變數名稱)

//顯示代辦清單
console.log(myTodos);

js 白話文：

• console 印出 item1, item2, item3

功能三：「新增」

因為這個專案是用 陣列(Array) 在存取資料，所以包含新增、更新、刪除等功能，都要從 Array 去尋找這些功能指令。這裡可使用 push 指令，增加新建的代辦項目，而增加的內容會出現在陣列內的最後面，接著再用 console.log 印出結果看看。

寫法：變數名稱 .push(aaa);
(小括號內就是你要新增的資料，aaa是我亂填的，可填任意數字或字串。)

//新增新的項目
myTodos.push('new item');
console.log(myTodos);

js 白話文：

• console 印出 item1, item2, item3, new item
• 可以看到最後面多出一組新的字串叫「new item」。

功能四：「更新」

在講更新這個功能之前，必須先知道陣列內容的序列號碼排序方式。我們幼稚園學過數數字都是從 1開始疊加計算，而 JavaScript 卻是從 0 開始起算，不是從 1 開始！因此我們要取出陣列的值的話，第一個值的序列號碼就是 0，第二個是 1，第三個是 2...依此類推。看不懂的話，直接來看範例比較清楚：

var youtuber = ['老高與小茉', '蔡阿嘎', '反正我很閒', 'Joeman', '這群人'];
console.log(youtuber[0]);

js 白話文：

• 宣告 Youtuber 這個陣列，陣列內容有 5 筆字串，分別是「老高與小茉、蔡阿嘎、反正我很閒、Joeman、這群人」
• console 印出陣列內的序列號碼 0 為「老高與小茉」

知道陣列序列號碼的排序之後，回到 TodoList 專案，用以下方法來取值：

todos[0];
//可以取到第 1個值 item1

todos[1];
//可以取到第 2個值 item2

todos[3];
//可以取到第 3個值 item3

更改陣列值的方式很簡單，就是在取值後方加上等號「=」和新的內容(字串一樣要加上單或雙引號)。

//更改陣列內的值
todos[0] = 'updatedName';
console.log(todos);

js 白話文：

• console 印出 updatedName, item2, item3, newItem
• 原本第 1 個值是 item1，現在已被取代成 updated 了。

功能五：「刪除」

再來要運用到 Array 的 Splice 的功能了，它可以刪除原有的資料，或新增修改陣列中的內容。來個範例比較好解釋：

寫法：arrayObject.splice(index, howmany, item1, ....., itemX)
小括號內包含了三個參數。

1. 第一個參數 index(必填)：指定移除或新增的序列號碼，上面寫法範例為 0 (指的就是陣列中的第 1 筆資料)；
2. 第二個參數 howmany(選填)：從指定移除或新增的位置起算，共移除幾筆資料，上面為 1 則是刪除指定的這一筆，若為 2 則是刪除指定的這筆和它的下一筆。若不填，則指定移除或新增的序列號碼後方的所有資料都會被移除；若設定為 0，則不會有資料被移除。
3. 第三個參數 item1,.....,itemX(選填)：XXX 為新增或修改後的內容(字串要加上單或雙引號)；若是要移除或不新增修改者，此項則不填。

   //刪除項目
   todos.splice(2, 1);
   console.log(todos);
   

   js 白話文：

• 刪除陣列內的第 3 筆資料起算 1 個，也就是 item3 本人
• console 印出 updated, item2, newItem
• 可以發現 item3 被砍掉了。

好啦就這麼簡單！幫各位統整一下剛剛專案需要的程式碼，才不會混了其他範例而感到混亂。

//1.儲存代辦清單內的陣列資料
var todos = ['item1','item2','item3'];

//2.顯示代辦清單
console.log(todos);

//3.新增新的項目
todos.push('newItem');

//4.更改陣列內的值
todos[0] = 'updated';

//5.刪除項目
todos.splice(2, 1);

在這篇我們學習到 Var(宣告)、變數、array(陣列)、console.log(顯示或印出)、push(陣列新增)、陣列修改、splice(陣列刪除或異動)等指令寫法，是不是沒有想像中那麼複雜。當然事實上不是這樣就解決了，這只是最基礎的寫法，再來會有後續文章詳解，就像洋蔥一樣，一層一層的把細部功能和邏輯運算加上去，最終就是我們要的結果了！

之前學習到的方式，大多都是指令的名詞解釋，對新手而言，有點像學了abc，然後才開始教片語和文法跟文章。雖然方法沒有錯，但是老實說很沒效率。對新手而言，吸收度實在超級不佳，不論看了幾個教學影片，都很容易深深的進入冬眠階段(應該不是只有我吧...)。當然學習力不佳不外乎是自己專注力的問題，或是老師的教學方式、說話節奏、語調，還有很多老師可怕的大頭照總喜歡貼在角落吸走學習的目光 XD。

我的學習體驗感受是，從實作開始學習，再拆解每個步驟指令和邏輯用法會比較容易理解。就是因為容易解構錯誤，所以能從錯誤和不解中找到問題所在，加深編寫程式和查找資料的能力。還可以讓人打起精神去找問題，而非像以前學生時代上課，一聽老師講課就想睡覺的地獄輪迴，重點不是你在做阿，你只是聽而已。跟先把完全不會講英文的你丟到國外，幾個月或幾年後，你也會講的比外語系大學生還流利和道地的學習方法是一樣的。

感謝你耐心看完本文，請到後台跟我領取乖寶寶貼紙一枚 =3= 啾

本文學習參考資料：

• JavaScript 官方技術文件
• w3schools JavaScript教程
• 重新認識JavaScript
• JavaScript Array 陣列操作方法大全 (含 ES6)
• JavaScript基礎入門
• JavaScript 入門篇 - 學徒的試煉
• JavaScript新手秘笈｜三大專案帶你輕鬆入門