# Javascript Introduction

###### tags: `f2e`

## Andy Tsai

---

## Agenda
- what is javascript
- 具備能力？
- 基礎語法
- Javascript語言特性
- Javascript小技巧
- ECMAScript 2015(ES6)
- Framework
- 推薦網站

---

## what is javascript

----


----

<img src="https://i.imgur.com/QCHc8KF.png" width="300" />

----

<img src="https://i.imgur.com/762mepR.png" width="350" />

----

<img src="https://i.imgur.com/NaRZopS.png" width="380" />

---

## 具備能力？

----

## [前端技能樹](http://www.dungeonsanddevelopers.com/#_ab_13_Your%20Name)

## [在 2016 年學 JavaScript 是一種什麼樣的體驗？](https://zhuanlan.zhihu.com/p/22782487)

----

## 一開始


----

## 過一陣子


----

## 現在


----

## 電腦：每過18個月會將晶片的效能提高一倍

----

## 前端：每過18個月難度提高一倍

----

## 前端每年都要砍掉重練


----

## 好像有點絕望？


----

## 沒關係啦 反正最底層都是ＪＳ

---

## 基礎語法

- [JavaScript 標準參考教程](http://javascript.ruanyifeng.com/)
- var
- Number
- String
- Boolean
- undefined
- 弱型態
- Array
- Function
- Object
- 建構函數

----

### var

- 變數本身無需宣告型態，型態決定於值本身

var number = 10;
var str = "Hello";
var bool = true;
var array = [];

----

### Number

var num = 100;

parseInt("500", 10);

isNaN(1);   // false

isNaN('a'); // true

----

### String

var text = 'Hello World';

text.length; // 11

text.replace('World', 'JS'); // Hello JS

text.toUpperCase(); // HELLO WORLD

----

### Boolean

Boolean(false)     // false
Boolean(0)         // false
Boolean('')        // false
Boolean(null)      // false
Boolean(undefined) // false
Boolean(NaN)       // false

----

### undefined

只要一個變數在初始的時候未給予任何值的時候，就會產生 undefined

var a;
typeof a; // undefined

----

### 弱型態

number、string與boolean，會在必要的時候
自動型態轉換為對應的包裹物件

'6' + 2   // '62'
 2 + '6'  // '26'
'6' - '2' // 4
'6' - 2   // 4
'6' * '2' // 12
'6' / '2' // 3
1 + true  // 2
1 + false // 1

----

### typeof

typeof 1;          // 'number'
typeof 'Hello';    // 'string'
typeof false;      // 'boolean'
typeof [];         // 'object'
typeof {};         // 'object'
typeof null;       // 'object'
typeof undefined;  // 'undefined'

----

### Array

var array = [
    10, 
    "Hello", 
    false, 
    {a:1}, 
    function(){alert("Hello")}
];

----

### Function

function print(s) {
    console.log(s);
}

or

var print = function(s) {
    console.log(s);
}

print('Hello');

----

### Object

{ key: value }

// bad
var person = new Object();
person.name = 'Andy';
person.age = 27;
person.speak = function() {
    alert('Hello');
}

// good 
var person = {
    name: 'Andy',
    age: 27,
    speak: function() {
        alert('Hello');
    }
}

----

### 建構函數

function Person(name, age){  
    this.name =  name;  
    this.age = age;          
}    
  
var person = new Person("Andy", 27);
console.log(person.name); // 'Andy'
console.log(person.age);  // 27

---

## Javascript小技巧

----

## 使用object儲存資料

var _class = {
    name: '一年一班',
    students: [{
        name: '學生1',
        seatNo: 1
    }, {
        name: '學生2',
        seatNo: 2
    }]
}

for(var i=0; i<_class.students.length; i++) {
    var student = _class.students[i];
    console.log(student.name);
    console.log(student.seatNo);
}

----

## call by value

- string, number, boolean

var a = 1;
var b = a;
b = 2;

// a = 1
// b = 2

1 == 1 // true

----

## call by reference

- array, object
- [lodash](https://lodash.com/)

var a = [1,2,3];
var b = a;
b.push(4);
// a = [1,2,3,4]
// b = [1,2,3,4]

var a = {t:1};
var b = a;
b.t = 2;
// a = {t:2}
// b = {t:2}

[1] == [1]     // false
{a:1} == {a:1} // false

----

## 預設值

function Person(name, age){  
    this.name =  name || 'person';  
    this.age = age || 18;          
}

var p1 = new Person('Andy', 27);
// 'Andy'     27
var p2 = new Person();
// 'person'   18

----

## replace all

- [正規表示式](https://goo.gl/IThKpE)

var s1 = "A.B.C";
s1.replace(/\./g,"_");  //  "A_B_C"

----

## 使用===判斷

10 == '10'  // true
10 === '10' // false

10 != '10'  // false
10 !== '10' // true

----

## 给函數傳遞参數(傳遞object比傳遞一堆參數好)

function person(obj) {
    console.log(obj.name);         
    console.log(obj.age);
}

var data = {name:'andy', age: 27};

person(data);

// 'andy'
// 27

----

#### Array - join

var arr = ["jack", "john", "may", "su", "Ada"];

var str = arr.join("、");

// "jack、john、may、su、Ada"

----

#### Array - concat

var alpha = ["a", "b", "c"];

var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);

// ["a", "b", "c", 1, 2, 3]

----

#### Array - map

var numbers = [1,2,3,4,5,6,7,8,9,10];

var newNumbers = numbers.map(function(element, index) { 
    return element * 2; 
});

// [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

// bad 

var count = 0;
numbers.map(function(element) { 
    count++;
    return element * 2; 
});

----

#### Array - filter(ES6)

var numbers = [1,2,3,4,5,6,7,8,9,10];

var newNumbers = numbers.filter(function(number){
    return number % 2 == 0;
});

// [2, 4, 6, 8, 10]

---

## Javascript語言特性

- document
- prototype
- scope
- closure
- callback

----

### document - dom loaded

<body onload="myFunction()">
</body>

<script>
    function myFunction() {
        document.getElementById('text').value = 'text';
    }
</script>

// jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    $().ready(function() {
        $('#text').val('tet');
    })
</script>

----

### document - selector

<button id="btn1" class="btn"/>

document.getElementById('btn1');
document.getElementsByClassName('btn');
document.getElementsByTagName('button');

// jQuery

$('#btn1')   // id selector
$('.btn')    // class selector
$('button')  // element selector

----

### document - get value

<input id="search" type="text" value="123" />

document.getElementById('search').value; // 123

// jQuery
$('#search').val(); // 123

----

### document - eventHandler

<button id="btn1" class="btn"/>

document.getElementById('btn1').onclick = function(){
    alert('Hello');
}

// jQuery
$('#btn1').click(function() {
    alert('Hello');
})

----

### append element

<ul id="list"></ul>

$('#list').append('<li>item1</li>')

<ul id="list">
    <li>item1</li>
</ul>

----

### prototype

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.toString = function() {
        return '[' + this.name + ', ' + this.age + ']';
    };
}

function Person(name, age) {
    this.name = name;
    this.age = age;
}
 
Person.prototype.toString = function() {
    return '[' + this.name + ', ' + this.age + ']';
};

----

### scope

- 使用var所宣告的變數，作用範圍是在當時所在環境
- JavaScript在查找變數時，會循著範圍鏈（Scope chain）一層一層往外找

----

#### 範例1

var x = 10;

function func() {
    console.log(x);
}

func();

// 10

----

#### 範例2

var x = 10;

function func() {
    console.log(x);
    var x = 20;
    console.log(x)
}

func();

// undefined
// 20

----

### closure

- 閉包是個特殊的物件，他包含了一個函式，以及函式被建立時所在的環境
- 環境是：" 環境由任意的局域變數所組成，這些變數是由在閉包建立的時間點上存在於作用域裡的所有變數"

function sum() {
    var x = 10;

    return function (y) {
        console.log(x+y);
    }
}

var func = sum();

func(200);  // 210

----

### 範例

- [範例1](https://codepen.io/bbandydd/pen/mXwjPJ)
- [範例2](https://codepen.io/bbandydd/pen/MQoBXq)

----

### callback

將函式當作另一個函式的參數，由另外的函式來呼叫

function 接電話(name, phone, doSomething) {
     console.log('來電者：' + name  + ', 號碼：' + phone);
     
     doSomething();   
}

function 打招呼() {
    alert('Hello');
}

接電話('Andy', '0987654321', 打招呼);

----

## Yeah!! 學會Javascript了!!


----

## 以上，都是舊的寫法(ES5)

---

## ECMAScript 2015(ES6)

- [ECMAScript 6入門](http://es6.ruanyifeng.com/)
- default value
- let const
- String template
- arrow function
- class
- 解決callback hell

----

### what is ECMAScript

- 將JavaScript提交给國際標準化組織ECMA
- 標準在每年的6月份正式發布一次
- 目前最新版本ECMAScript 2016(ES7)

----

### Babel

- [Babel入門](http://www.ruanyifeng.com/blog/2016/01/babel.html)
- Babel是一個轉碼器，可以將ES6轉為ES5，從而在瀏覽器執行

// 轉碼前
input.map(item => item + 1);

// 轉碼後
input.map(function (item) {
  return item + 1;
});

----

### default value

ES5:
function Person(name, age){  
    this.name =  name || 'person';  
    this.age = age || 18;          
}

ES6:
function Person(name = 'person', age = 18){  
    this.name =  name;  
    this.age = age;          
}

----

### let const

用法類似於var，但只在所在的區塊內有效

let是更完美的var
const定義時設定初值，之後不允許再改變

1. 宣告的變數有區塊作用域
2. 禁止在同一活動範圍中再次宣告相同名稱的變數
3. 禁止在宣告變數之前就使用它

ES5:
var a = 1;

ES6:
let b = 2;
const c = 3;

- [範例1](https://codepen.io/bbandydd/pen/zRzLzM)
- [範例2](https://codepen.io/bbandydd/pen/xYrJQv)

----

### String template

ES5:
var name = firstName + '_' + lastName;

ES6:
let name = `${firstName}_${lastName}`;

----

ES5:
var SQL = 'SELECT * ' +
    'FROM TABLE ' +
    'WHERE NAME="' + name + '"'
    
ES6:
const SQL = 
`
    SELECT *
    FROM TABLE
    WHERE NAME='${name}'
`

----

### arrow function

ES5:
var Person = function(name) {
    console.log(name);
}

ES6:
const Person = (name) => {
    console.log(name);
}

----

### class - ES5

ES5:
function Person(name, age){  
    this.name =  name;  
    this.age = age;          
}    
 
Person.prototype.say = function() {
     alert('Name：' + this.name +', Age:' + this.age);
}
 
var person = new Person("Andy", 27);
person.say();

----

### class - ES6

ES6:
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  say() {
    alert(`Name：${this.name}, Age:${this.age}` );
  }
}

let person = new Person('Andy', 27);
person.say();

----

## callback hell

- API A -> API B -> API C

----

### 解決callback hell

- [參考連結](http://huli.logdown.com/posts/292655-javascript-promise-generator-async-es6)
- callback hell
- promise
- generator
- async await (ES7)

---

## Framework

----

## 前端：[jQuey](http://codepen.io/bbandydd/pen/WoRMeV) [AngularJS](http://codepen.io/bbandydd/pen/dONdym) [VueJS](http://codepen.io/bbandydd/pen/GNrQKY) [ReactJS](http://codepen.io/bbandydd/pen/bBgLEX?editors=1010)
## 後端：Express Koa
## APP：Ionic [ReactNative](https://github.com/fangwei716/30-days-of-react-native)
## 桌面應用程式：[Electron](http://electron.atom.io/)

----

## Q & A