在 ES6 中，我們多了一個非常好用的模版字符串（template literal），如果你會在 JS 中「放入 HTML 的內容」、或者有「很長的字串包含換行」、又或者會有「字串連結變數」這樣的需求，模版字符串會是非常方便的作法。
另外，在 ES6 中可以將模版字符串和函式結合使用，形成一個標籤模版（tagged template），可以以此過濾 HTML 字串，避免使用者輸入惡意內容。
模版字符串（template literal）的基本應用
模版字符串的使用非常簡單，就是使用反引號" ` "（鍵盤左上角的~），舉例來說，如果我們會在 JS 的字串中放入 HTML 內容，在過去我們可能需要這樣寫：
let...
2017年1月25日
2017年1月24日
[筆記] JavaScript ES6 中的 for ... of（處理陣列的好幫手）
過去我們可以使用 for, while, do while, for...in 等內在的函式來處理資料，而在 ES6 中我們多了 for...of 這個簡易的用法來處理這些疊代型的資料（iterable objects），包含陣列、字串、map、set、等等...。
陣列中 for...of 的基本用法
for...of 的使用非常簡單，以陣列為例：
let arr = [10, 20, 30]
for(let value of arr){
console.log(value); // 10, 20, 30
}
只要用這樣的方式，就可以把陣列的值一個個取出，不用像過去寫一大串像是...
2017年1月21日
[筆記] JS30系列：監聽按鍵事件及撥放音效（Day1）
此課程內容來自 Wes Bos ，文章內容為整理課程內容學習之筆記，如果直接看筆記的話可能會覺得有點跳，不適合直接當成單篇文章閱讀，因此建議可以先看過該堂課程內容後，需要複習的時候在回來看筆記。關於此課程的上課說明可參考 JavaScript30 課程說明。
第一堂課完成的頁面會像這個網站所顯示的樣子，當按下畫面上的所對應的按鍵時會有對應的動畫效果和音效。
思考分析
1. 瀏覽器能夠辨認使用者在鍵盤上所按下的按鍵
2. 當鍵盤按下指定的按鍵後能夠觸發音效
3. 當鍵盤按下指定的按鍵後能夠觸發網頁上的元件產生相對應的變化
4. 網頁上元件的變化要能夠回覆成原本的狀態
5. 播放的音效要能夠停止
辨認使用者在鍵盤上所按下的按鍵
KeyCode：每一個按鍵其實都有對應的鍵碼（keycode），而我們可以透過使用者所按下的鍵碼來得知使用者是按了鍵盤上的哪一個按鈕。在...
2017年1月20日
[技術分享] 什麼是 HTML 5 中的資料屬性（data-* attribute）
在接觸 HTML5 一段時間，認識大部分的屬性名稱像是 src, img, type, ... 後，一定會看到像是 data-item, data-key, data-...這類的屬性名稱，但是如果你直接去 google "data-item" 或 "data-key" 你可能又查不到這個屬性，到底這是哪種屬性呢？又可以如何應用呢？
HTML5 中的 data-* attribute 屬性
之所以會有 data-* attribute 的出現，是因為在製作網頁的過程中，我們常常會添加一些自己需要用到的屬性名稱，以方便自己容易理解，但總不能每個人在自己的網頁裡面都定義自己的屬性名稱，於是為了要避免大家在...
2017年1月19日
[筆記] JS30 系列 Day0 - 課程說明
你可能已經有了一些 JavaScript 的基礎，做過了 Codecademy, FreeCodecamp 當中有關 JS 的練習，甚至在 Code School 或 Tree House 上付費學習 ，然而卻總是不知道實際上可以怎麼應用，那麼由 Wes Bos 所開設的這堂 JavaScript30 相信會非常適合你！
這堂課程是完全免費搭配英文字幕，在課程中由 Wes Bos 帶你製作 30 個精緻的東西，就讓我們一起來學習吧！
個人的課程筆記會另外放在這個目錄底下：[學習筆記目錄] JS30 系列文章
註冊方式
註冊方式很簡單，只要到 JavaScript30...
[筆記] JavaScript ES6 中的展開運算子（spread operator）和其餘運算子（rest operator）
在 ES6 中，新增了一個 "..." 的關鍵字，這個關鍵字在不同時間點有不同的效果，有些時候它會被當作展開運算子(spread operator）使用，有些時候則是被當作其餘運算子（rest operator）使用。
其餘運算子（rest operator）
假設現在我想要寫一個函式，它可以把所有陣列的值相加後取平均，在過去如果我們要在函式中放入陣列的資料，一般我們會這樣寫：
let arr = [1,2,3,4,5];
let avg = function(arr){
let sum = 0;
for(let i = 0; i < arr.length; i++){
...
2017年1月18日
[筆記] 親手打造屬於你自己的 JavaScript Framework/Library（下）
在上一篇 [筆記] 親手打造屬於你自己的 JavaScript Framework/Library（中），我們初步建立了好了自己的 framework ，並且可以成功運用它。最後，我們要來試著讓我們所做的 Framework 和 jQuery 做更多的結合，並且開始應用它。
我們的目標是希望能夠利用我們所做的這個 library 做一個簡單的登入呈現頁面，現在就讓我開始吧！
HTML部分
首先 HTML 的部分我們先寫一個很簡單的登入視窗，像是這樣：
<body>
<div id="app">
<div id="login">
...
2017年1月17日
[筆記] JavaScript ES6 中的物件的擴展（object literal extension）
在 ES6 中，對於物件的使用有了更彈性的應用，除了撰寫物件的方式變得更為精簡之外，更允許將屬性名稱指定為變數，以達到動態賦予屬性名稱的效果，讓我們來看看在 ES6 中物件的擴展吧。
物件的擴展（object literal extension）
在 ES6 中允許在物件中直接給變量，這時候物件的屬性名稱為變數的名稱，物件的屬性值為變數的值，讓我們來看一下這個例子：
let website = "pjchender";
let obj = {website};
console.log(obj); //[Object]{website: "pjchender"}
這時候變數的名稱（website）會變成物件的屬性名稱，變數的值（"pjchener"）會變成物件的屬性值。實際上，let...
2017年1月16日
[筆記] JavaScript ES6 中的物件解構賦值（object destructuring）
在上一篇文章中我們說明了 ES6 當中如何使用陣列解構賦值（[筆記] ES6 中的陣列解構賦值（array destructuring）），這篇我們一樣著重在解構賦值的部分，進一步說明如何以物件解構賦值（object destructuring）。
物件解構賦值的基本使用
物件解構賦值的基本使用方法如下：
let obj = {
website: "pjchender",
country: "Taiwan"
}
let {website, country} = obj;
console.log(website); // pjchender
console.log(country);...
2017年1月15日
[筆記] JavaScript ES6 中的陣列解構賦值（array destructuring）
在 ES6 中過去的陣列和物件可以透過解構（destructuring）的方式來賦值。這篇文章中，我們會先說明如何透過陣列的方式來賦值。
陣列解構賦值的方法（array destructuring）
過去陣列內的元素在賦值的時候，只能透過直接給值的方式，像是下面這樣：let numbers = [1, 2, 3];
let a = numbers[0];
let b = numbers[1];
let c = numbers[2];
console.log(a,b,c); // 1, 2, 3
一般用法
然而在 ES6 中可以直接透過解構的方式賦值，像是下面這樣子：let...
[筆記] JavaScript ES6 中的函數預設值（default value）
在過去如過要在函式中建立預設值常常要利用到 JS 中強制轉換型別（coercion）的這種特性，但在 ES6 中則可以用相當簡易的方式就可以設定函式的預設值（default value），寫起來更簡潔方便，讓我們來看一下可以怎麼樣使用。
函式預設值的使用
函式預設值的使用非常簡單，只需要在函式中給予參數的地方用等號賦值就可以了，方式如下：
function add(x = 3, y = 5){
console.log(x+y);
}
add(); // 8
也就是說，只要在 add 這個函式的參數位置寫 add(x =3, y=5) 就可以直接帶入預設值，因此雖然我在執行...
2017年1月14日
[筆記] JavaScript ES6 中的箭頭函數（arrow function）及對 this 的影響
在這篇文章中要來說明一下在 ES6 中相當常見的箭頭函數（arrow function），讓我們來看一下可以怎麼樣使用。
什麼是箭頭函數（arrow function）
首先，我們來看一下過去我們撰寫函數的方法：
在 ES6 中，我們可以把它改成箭頭函數的寫法，它會變成下面這樣：
沒有參數的時候要記得加上空括號
要特別留意的地方是，在箭頭函數中如果沒有帶入參數時，一樣要加上空括號。
當函數沒有參數的時候，一定要記得加上括號 ( )。當函式只有一行的時候可以簡寫當我們的函數只有一行而已的話，我們可以把這個函式寫得更為精簡，把上下兩邊的 { } 都拿掉：
如果只是要回傳某個值，可以省略...
2017年1月4日
[筆記] JavaScript ES6 中使用 const 宣告常數
在 ES6 中可以透過 const 來宣告變數，究竟 const 有什麼特別的地方呢？
首先 const 的意思是 constant ，也就是常數的意思，當我們宣告它之後，它是不能在被改變的，但實際上在使用時仍然有一些需要注意的地方，讓我們先來看一下下面的例子：
當我們使用 const 來宣告變數時，就像和使用 let 一樣，都可以得到 27 的結果：
可是當我對這個 const 重新指派值時，就會出現錯誤訊息：
也就是說 age 它在這裡其實是被設定成一個常數，而不是一個變數。 透過 const 我們可以宣告常數。
因此，為了方便區分哪些是常數那寫是變數，我們可以把常數在宣告的時候用大寫來表示，像是這樣：
使用...
2017年1月3日
[筆記] JavaScript ES6 中使用block-scoped 的 let 宣告變數
最近開始在 Udemy 上學習和另一個與 JavaScript 有關的課程ㄧ Accelerated ES6 JavaScript Training，主要的內容是針對 ES6(ECMAScript 6)加以學習，因此接下來會整理這門課程當中的內容還有其他網頁資源作為自己的學習筆記，有想要一同學習的夥伴們也可以持續 follow ，另外，因為我也是在持續學習的過程中，所以如果有任何觀念或語法上的錯誤，也非常希望比較有經驗的大大們可以協助改正。
使用 let 宣告變數
在 ES6 中有一個新的關鍵字 let ，let 的用法和過去使用的 var 非常相似，都可以用來宣告變數：
在這裡我們可以看出，不論是用...