JS 基礎回顧 - 迴圈
迴圈 (Loop) 在 JavaScript 中，當遇到需要重複做某件事時，是個非常好用的方法。而迴圈又分為幾種不同的方式，本篇將會介紹如何使用比較常見的作法。
迴圈
如果一件重要的事，想要說三次的話，可能會這樣表達：
123console.log('很重要'); // "很重要"console.log('很重要'); // "很重要"console.log('很重要') // "很重要"
但是在 JavaScript 中，可以使用迴圈來幫助我們更省時省力地來處理這件事：
for 迴圈
for 迴圈的用法：
123var i;for () {}
{ }中，要重複一直做的事情，例如：{console.log('很重要')}
( )中，要從哪裏開始，到那裏結束，還有每回合會做什麼事情，例如：for (i = 0; i < 3; i++)上面那段的意思是：i 從 0 開始計算；到 3 的時候結束；i + ...
JS notice： JavaScript 與 undefined
本篇文章會稍微講解 undefined 與 not defined 的差異。
undefined
先來看一個例子：
12var a = "Hello World";console.log(a) // "Hello World"
當宣告一個變數 a，並指定一個值給它時，再用 console.log 印出 a，不意外的得到賦予它的值。
但如果把值去掉，再次看 a 會得到什麼？
12var a;console.log(a) // undefined
結果得到 undefined。
not defined
那麼如果把 var 跟值去掉的話，只留下 a 會發生什麼事？
12a;console.log(a);
會發生錯誤，錯誤訊息為 a is not defined。這邊則會有一個疑問，not defined 跟 undefined 是不同的嗎？
這個部份有在 執行環境：創造與提升 提過，所有 JavaScript 的變數，在一開始都會被設定為 undefined，而 undefined 是 JavaScript 內建的一個特殊的值，表示這個值尚 ...
用 Vue.js 做一個 TodoList
很多教學都會試著做出 TodoList 來驗收自己學習的成果，這篇文章也不免俗的將會運用目前學到的 Vue 技術，做出一個簡易的 TodoList。
使用 Vue 來做 TodoList 真的蠻方便的，以前我覺得做這個好麻煩，用了 Vue 來做快上不少。話不多說，先看成果：
建立 Vue 環境
首先在 HTML 頁面上建置一個 Vue 的環境，讓資料可以透過 Vue 渲染到 HTML。
123<div id="app"> <h1>{{ title }}</h1></div>
資料部份：
123456let vm = new Vue ({ el: '#app', data: { title: 'Simple TodoList', }})
輸入欄位雙向綁定
新增一個 input 欄位，讓輸入的文字可以用 v-model 雙向綁定在 inputNewTodo 中，在 Vue 的資料 ...
挑戰 Codewar - 1
這是在胡立的程式導師實驗計畫第四期中的 Codewar 練習題，裡面的題目都是出自 Codewars，之後會試著去由淺入深解開裡面的題目，並在這個系列寫出我解題的過程與心得。
Opposite number
第一題先從難度零顆星的開始。目的是要將數值正反顛倒，正數變負數，負數變正數。一進去就給你一個 function，讓你去思考怎麼解。
123function opposite(number) { //your code here}
一開始有點想太多，想說如果是負數的話，就給它一個負號，讓它變正數；如果是正數，就給負號。
所以一開始的作法我是用 if...else：
1234567function opposite(number) { if(number < 0) { return -number } else { return -number }}
後來想想不對，應該是不用這麼複雜，不管什麼數，給負數就對了，所以就變成：
123456function opposite(nu ...
JS 基礎回顧 - 物件與陣列
在 JavaScript 中，物件與陣列這兩個還滿常搭配使用的，所以這篇就混在一起講吧。絕對不是為了要省事。
陣列 Array
陣列的概念有點像放藥的盒子，一個蘿蔔一個坑。可以是零到多數元素的集合，可以放入資料，例如數字、文字，或是陣列、物件、函式，沒有規定只能放什麼進去。
如何建立陣列可以是空陣列：
1var a = []
如果要建立資料：
1var a = [1, 2, 3, 'aaa', 'bbb']
或是：
12345var a = [];a[0] = 123;a[1] = 456;a[2] = 'abc'
要注意的是，陣列是有順序的集合，第一筆資料是從 0 開始。
取得陣列的長度length，陣列的長度，等於陣列元素的個數，例如：
123var list = [1, 2, 3, 'aa', 'bb', 123];console.log(list.length); // 會得到6
如果想取用特定某一個元素，假設取第一個：
12345678var list = [1 ...
執行環境：創造與提升
在 JavaScript 中，提升（Hoisting）可能是最奇怪的部份了，這個部份還滿容易搞混的，不過希望我整理出來的筆記能夠幫助釐清觀念，如果有錯的部分麻煩請告知我。
首先看一段程式碼，然後看會發生什麼事：
12345678var a = 'Hello World';function b() { console.log('Test');}console.log(a);b()
上面的程式碼沒有意外的出現 Hello World 及 Test。如果把第 8 跟第 9 行移到最上面的話，會發生什麼事呢？
12345678console.log(a); // undefinedb(); // "Test"var a = 'Hello World';function b() { console.log('Test');}
結果沒有出現錯誤，而是得到一個值 undefined，另一個函式則是成功執行。這在其他大部分程式語言 ...
JS 基礎回顧 - 全域變數與區域變數
在上一篇 變數與資料型別 中有介紹到變數，而變數還分為全域變數與區域變數，本篇將會介紹兩者的差異。
區域變數
首先用個函式來算一下梯形的面積：
123456function areaTr (upBase, downBase, height) { var result = (upBase + downBase) * height / 2; return result}console.log('梯形面積是' + areaTr(30, 40, 40)) // 印出 "梯形面積是1400"
上面的這一段沒什麼問題，如果在後面再加上一段 console.log(result) 的話，會發生什麼事？
1234567function areaTr (upBase, downBase, height) { var result = (upBase + downBase) * height / 2; return result}console.log('梯形面積是' + areaTr(30 ...
練習如何解題
在上一篇的 Think first, code later 中，有提到如何一步一步地解開印出 1-100 的偶數，這一篇則是來看看如何解一些題目，像是印出 1-100 的奇數、fizz buzz 跟找出最小值。
印出 1-100 的奇數
首先先想出步驟：
12345設定 i = 1如果 i > 100 就結束如果 i 是奇數就印出 i讓 i 累加再跳回第 2 步
大概設定步驟後，就可以寫出 pseudo code：
12345let i = 1i > 100 endi % 2 === 1i ++jump to line 2
寫到這邊就大概知道可以使用 for 迴圈去跑了，所以可以寫成：
12345for (let i = 1; i < 100; i++ ) { if (i % 2 ===1) { console.log(i) }}
Fizz buzz
記得這題在 leetcode 有看過，那時候還不是很懂如何思考（雖然現在也沒有很強就是了），不過現在可以來試試看如何解出這一題，首先先了解一下規則。
Fizz ...
JS 基礎回顧 - function
在看 kuro 大神寫的 0 陷阱！0 誤解！8 天重新認識 JavaScript！（不是業配，這本書很棒）中提到，JavaScript 最核心也最容易被誤用的部份非函式（function）莫屬。我一開始在學 JS 時，碰到函式就覺得非常挫折，因此目前在整理這個筆記時，希望以後可以不用再踩坑？
函式宣告
12345function sayhello() { console.log ('hi')}sayhello() // 印出'hi'
如上面的例子可以看到，函式的宣告及呼叫的運作。
一個宣告函式主要會包含三個部份：
函式的名稱（或是可能沒有名稱）。
小括號 () 中的部份是參數，可以帶入無限個。
大括號 {} 中的部份，是主要區塊，放重複執行的內容。
再看一個帶入參數的例子，如果想要得到正方形的面積的話，公式是邊長 x 邊長，所以在 function 中可以這樣寫：
123456function getSquareArea (side) { var answer = side * side con ...
JS 基礎回顧 - 變數與資料型別
會寫這個系列，是想整理我之前的筆記，假如我哪天忘記的話，還可以讓我方便查找，順便加深自己的印象。第一篇來回顧變數，看如何定義跟指定各種型別的用法。
變數
變數像是一個容器，假設一個容器貼着 coca_cola 的標籤，裏面裝的是叫可樂的東西，當接觸到瓶子，就可以拿裏面的東西，裏面的東西就是可樂。用 JavaScript 的語言來說就是：
1var coca_cola = "可樂"
var = variable 的縮寫coca_cola = 容器的標籤（變數名稱）可樂 = 容器裡裝的內容（值）
資料型別
基本型別變數值的型別主要分成基本型別跟物件型別，這個部份先來討論基本型別：
number 數字
string 字串
boolean 布林值
undefined
null
例如：數字 7、字串 “hello”、布林值 true / false
數字、字串12var name = "張無忌"; // 字串，可用單引號或雙引號把文字包起來var power = 100000; // 數字，不需引號
如果要檢驗型別的話，可以使用 typeo ...
