終於來到javascript, 我認為學寫語言最重要的不是學語法或邏輯而是電腦思維(computational thinking)。 如果你心裡想說 ，花的發(what the f*ck?)， 我懂。

「Don't learn to code. Learn to think.」

我相信我們一開始學javascript 就是照w3c, mozilla, 或相關課程所提供的步驟做然後做完啦要自己上的時候， 就腦袋一片空白， 然後就卡住了。 對不對， 我一開始也是這樣。

總有的課程都有一點像這張圖一樣。好像覺得不會的人照做就會了。

我當時是在做freecodecamp 的挑戰連結， 然後最後的project 要做計算機， 井字遊戲，我就卡住了。

為什麼會這樣？ 我不是有做完那些課程？ 為什麼我還是不會？

其實這些課程教了我們語法跟方法， 但是從來沒有教我們怎麼用電腦思維。

電腦思維

電腦思維基本上來說就是把一個project 拆成很多小步驟。 然後把這些小步驟變成程式碼。 最後在優化。

舉例，我們來做個代辦事項app. 那代辦事項app需要什麼功能？

1. 我們需要一個清單來存放我們的代辦事項
2. 使用者可以顯示代辦清單
3. 使用者可以增加代辦事項
4. 使用者可以更改代辦事項
5. 使用者可以刪除代辦事項

那接下來把以上的故事變成code。

// 1. 我們需要一個清單來存放我們的代辦事項
var todoList = []; // 清單在程式語言就是陣列

// 2. 使用者可以顯示代辦清單
console.log(todoList) 

// 3. 使用者可以增加代辦事項
todoList.push("new Item") // JS 陣列增加新的東西要用 push 這個方法

//4. 使用者可以更改代辦事項
todoList[0] = "Edit Item" // JS 陣列改東西要用要先指定陣列位子然後給新的質

//5. 使用者可以刪除代辦事項
todoList.splice(0,1) // JS 陣列要刪東西要用splice(位子， 多少個)

把需要的變數跟方法都想好了，其他的就簡單了。 其他的就是整理跟優化這些方法，然後串介面。

var todoList = {
  todos: ['item1', 'item2', 'item3'],
  displayTodos: function() {
    console.log('My todos', this.todos);
  },
  addTodo: function(todo){
    this.todos.push(todo);
    this.displayTodos()
  },
  changeTodo: function(position, todoText){
    this.todos[position] = todoText;
    this.displayTodos();
  },
  deleteTodo: function (position){
    this.todos.splice(position, 1);
    this.displayTodos();
  }

};

這是我freecodecamp, 最後四個專案的github. 你也可以看我怎麼串介面。

• 計算機挑戰內容 github
• 番茄計時器挑戰內容 github
• simon記憶遊戲挑戰內容 github
• 井字遊戲挑戰內容 github

最後是有人教我這套思考模式， 我才完成這他媽的難的四個專案， 我也拿到freecodecamp 的前端證書。 WOOHOO!

參考連結

• inside 電腦思維