昨天寫到了一串code，如果對於JS沒有基礎的人可能會頭很大XD

.then(function(data) {
    this.blogs = data.body.slice(0, 10);
});

所以今天我覺得應該要來點JavaScript，讓大家熟悉一下這個強大又美麗的語言，還有一些常用語法!

甚麼是JS

我們會說JavaScript是一個動態程式語言，之前有稍微提到*(在地圖那裏)*說JavaScript是負責讓我們的HTML動起來! 舉一個簡單的例子，今天如果你想要在網頁上呈現一個警告

那麼你要做的就是在script裡面寫到

alert(this.blogs);

this.blogs是昨天的東西~

當然不只這些~ JavaScript厲害的地方在於它可以做出一些2D的圖像、立體圖像、動畫、遊戲等等，雖然是都可以做但是實在太複雜XD，我們最常用的應該就是: 當我們今天按下了一個button -> 我們訂定了一個function 叫做 onClick()，而這個onclick要做甚麼? 就會在JavaScript裡面寫到~

JS基本功

變數Variables

變數就是我們指定給一個值得名子，方便之後我們運算的時候使用~
通常要設定一個變數的時候我們要先使用let, const在前面告訴JavaScript我們要儲存變數了~

let index = 1;

這就代表我們讓index這個變數設為 = 1，除此之外我們還有另外一個宣告的方法叫做 const

const variable = 'hello';

這兩個最主要的差異就是這兩個最主要的差異就是const 不能改變他的值，例如我設定 const pi = 3.14 那接下來我們就不能再去改變這個 pi因為她一值以來都會變成 3.14這個值。

而變數可以儲存甚麼值呢?

• String
• Boolean
• Number
• Array
• Object

Conditions

我這邊部會多加贅述，因為她就是很基本的 if, else if語法

let greeting = 'hello';
if (greeting === 'hello') {
  alert('Hello Guys');    
} else {
  alert('No Hello la');    
}

Functions

其實這個東西運用的很廣泛，有些瀏覽器內建好的函式例如

alert('Helllo i'm function');

那今天我們要怎麼客製化一個函式Funciton呢?

function add(num1,num2) {
  let result = num1 + num2;
  return result;
}

呼叫一個=> function + 函式的名子 + (parameter)
這樣就可以囉~ 注意一點就是有一個 return...; 這就是代表今天這個函示他最後要回傳甚麼東西。

所以我們設定完函示之後，如果要使用他就可以直接

add(1, 3);

這樣他就會 return 4給你囉~

Events

Events事件之前有稍微提到~ 概念上就是，當我們今天按下了一個button那接下來會觸發甚麼事情? 觸發機制 = 事件，舉一個簡單的例子:

myButton.onclick = function() {
    alert('Trigger me XD');
}

myButton只是一個變數部用理他，那這個 onclick就是一個匿名的函示，代表著當今天滑鼠按到十會觸發的事件，後面的 (){}就是定義要發生甚麼事情啦!

ES6

ES6 = ECMAScript 6, 這是一個標準化的Javascript，而功喜各位有幸參與到ES6的世界，這次來介紹一下他對於ES5有甚麼新功能 (著重在我們會比較常用到的)

1. 在parameters裡面設參數

之前如果我們要在一個funciton 裡面使用傳遞進來的參數，就要重新給他一個變數*(for this funciton)*

var greeting = function (text, url) {
    var text = text || 'Hello'
    var url = url || 'https://ithelp.ithome.com.tw/articles/10236817'
    ...
}

現在不用啦~我們直接在parameter裡面就可以設定參數了!

var greeting = function(text='Hello', url = 'https://ithelp.ithome.com.tw/articles/10236817') {
  ...
}

2. Destructuring

這個可能就比較複雜一點，我們我們先給各位看例子

var user = req.user,
  username = user.username,
  password = user.password 

在ES5的時候，如果有一個物件叫做 User，然後他有兩個attribute屬性: 1. username 2. password。那在ES5就要這樣去設定~ 但是ES6更上一層樓，直接用一個{}就解決了!!

var {username, password} = req.user

3. variables in string

在之前如果我們要輸出一行字，那這行字裡面假設需要函有變數，那在ES5就會是一個麻煩的存在:

var greeting = 'Hello, ' + firstName + ' ' + lastName + '.'

但在ES6可以用backticks (在鍵盤左上角，數字一的旁邊):

var greeting = `Hello, ${firstName} ${lastName}.`

4. Arrow Function

這是我認為最重要且最好用的改動~ 想要詳細了解的人可以去搜尋 Javascript ES6 Arrow Function! 他有很多不同的玩法XD，先給各位看看我們在ES5裡面要用 _this來指向this

var _this = this
$('.btn').click(function(event){
  _this.sendData()
})

在ES6就可以直接

$('.btn').click((event) =>{
  this.sendData()
})

另外一個例子，如果我們要用map這個方法提取array裡面的資料

var index = ['122345','678910']
var text = index.map(function (value) {
  return "index is = " + value
})

map 是一個可以拿來跑遍所有array裡面值的方法，並回傳並組合出一個新的陣列
但現在ES6用一行就可以了

var index = ['122345','678910']
var text = index.map(value => return `index is = ${value}`)

相當的便利，相當的感動XD

後記

當然ES6不只這些功能~ Javascript也將會是一條漫漫長路需要你去學習，之後我一定會用到JS，但是我會在遇到比較特別的東西時停下腳步帶你看後面的邏輯，在這之前，如果各位有時間，也千萬要記得!!

如果你要踏上前端這座島嶼，一定要學好JavaScript!!