JavaScript Beginner Tutorial | WeiYuan

1. JavaScript Beginner Tutorial
2017/06/27 (Wed.)
WeiYuan

2. site: v123582.github.io
line: weiwei63
§ 全端⼯程師 + 資料科學家
略懂⼀點網站前後端開發技術，學過資料探勘與機器
學習的⽪⽑。平時熱愛參與技術社群聚會及貢獻開源
程式的樂趣。

3. Outline
§ The past and now of JavaScript
§ A HTML with CSS and JavaScript
§ Common Type
§ Flow Control
§ Function
§ Advanced JavaScript
3

4. Outline
§ The past and now of JavaScript
§ A HTML with CSS and JavaScript
§ Common Type
§ Flow Control
§ Function
§ Advanced JavaScript
4

5. The past and now of JavaScript
§ 1995 網景 Netscape 公司 Brendan Eich 設計
§ ECMAScript 標準 == ECMA - 262
§ Javascript 屬於 ECMAScript 標準的一種實作
§ ES5 → ES6 (ES2015) → ES7 (ES2016)
• 預計每年會更新一個新版本
5

6. Outline
§ The past and now of JavaScript
§ A HTML with CSS and JavaScript
§ Common Type
§ Flow Control
§ Function
§ Advanced JavaScript
6

7. A HTML with CSS and JavaScript
§ HTML => 內容，佈局
§ CSS => 樣式，外觀
§ JavaScript => ⾏為，互動
7

8. A HTML with CSS and JavaScript
8

9. A HTML with CSS and JavaScript link
9

10. JavaScript
§ Statement = Variable + Operator
§ weakly typed, dynamically typed
§ case sensitive
10
1
2
3
4
5
6
7
8
9
/* declare, then set value */
var str;
str = "hello";
// declare and set value
var length = 5;
console.log(str);
alert(length);

11. Outline
§ The past and now of JavaScript
§ A HTML with CSS and JavaScript
§ Common Type
§ Flow Control
§ Function
§ Advanced JavaScript
11

12. Common Type
§ Number
§ String
§ Boolean, Undefined, Null
§ Array [ ]
§ Object { : }
12

13. Common Type
§ Number
• Arithmetic: + - * / %
• Logical: &&, ||, !
§ String
§ Boolean, Undefined, Null
§ Array [ ]
§ Object { : }
13
1
2
3
4
5
var length = 16;
// Number 通过数字字面量赋值
typeof 3.14
// 返回 number

14. Common Type
§ Number
§ String
§ Boolean, Undefined, Null
§ Array [ ]
§ Object { : }
14
1
2
3
4
5
var lastName = "Johnson";
// Number 通过数字字面量赋值
typeof "John”
// 返回 number

15. Common Type
§ Number
§ String
§ Boolean, Undefined, Null
§ Array [ ]
§ Object { : }
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
true
false
typeof undefined
// undefined
typeof null
// object
null === undefined
// false
null == undefined
// true

16. Common Type
§ Number
§ String
§ Boolean, Undefined, Null
§ Array [ ]
§ Object { : }
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr = [1, 2, 3];
arr.length // 3
arr.push(4) // 從右 +1
arr.pop() // 從右 -1
arr.shift() // 從左 -1
arr.unshift(0) // 從左 +1
arr.concat([111, 222])
arr.splice(index, number, item)
// 刪除從 index 開始 number 個數，插入 item
arr.join(',') == "1,2,3".split(',')

17. Common Type
§ Number
§ String
§ Boolean, Undefined, Null
§ Array [ ]
§ Object { : }
17
1
2
3
4
5
6
7
8
9
var cars = ["Saab", "Volvo", "BMW"];
// Array 通过数组字面量赋值
typeof [1,2,3,4]
// 返回 object
cars[0]
// Saab

18. Common Type
§ Number
§ String
§ Boolean, Undefined, Null
§ Array [ ]
§ Object { : }
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person = {
// property
id : 5566,
firstName: "John",
lastName : "Doe",
// method
fullName : function() {
return this.firstName + " " +
this.lastName;
}};
console.log(person.firstName);
console.log(person["lastName"]);
console.log(person.fullName());

19. 19Ref: https://stackoverflow.com/questions/7615214/in-javascript-why-is-0-equal-to-false-but-when-tested-by-if-it-is-not-fals

20. 20Ref: https://stackoverflow.com/questions/7615214/in-javascript-why-is-0-equal-to-false-but-when-tested-by-if-it-is-not-fals

21. Try it!
21
§ #練習：有⼀個陣列，其中包括 10 個元素，例如這個列表是 [1,
2, 3, 4, 5, 6, 7, 8, 9, 0]。
1. 要求將列表中的每個元素⼀次向前移動⼀個位置，第⼀個元素
到列表的最後，然後輸出這個列表。最終樣式是 [2, 3, 4, 5, 6, 7,
8, 9, 0, 1]
2. 相反動作，最終樣式是 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]。

22. Outline
§ The past and now of JavaScript
§ A HTML with CSS and JavaScript
§ Common Type
§ Flow Control
§ Function
§ Advanced JavaScript
22

23. if else
§ Condition: ==, ===, !=, >, <
23
1
2
3
4
5
6
7
if (condition1){
当条件 1 为 true 时执行的代码}
else if (condition2){
当条件 2 为 true 时执行的代码
} else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}

24. Try it!
24
§ #練習：承上題，如果要把偶數放前⾯，奇數放後⾯該怎麼做？
結果像是 [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]

25. For Loop
25
1
2
3
for (var i = 1;i < 5;i++) {
console.log(i);
}

26. While Loop
26
1
2
3
while(true) {
// do sth in this infinity loop..
}

27. Try it!
27
§ #練習：在數學中，⽤ n! 來表⽰階乘，例如，4! =1×2×3×4 =24。
請計算 3!, 4!, 5!。

28. Try it!
28
§ #練習："Please count the character here."

29. Try it!
29
§ #練習："Here are UPPERCASE and lowercase chars."

30. Try it!
30
§ #練習：有一個 object { 0: ‘a’, 1: ‘b’, 2: ‘c’}，我想要 key 與 value
互換變成 { ‘a’: 0, ‘b’: 1, ‘c’: 2}。
• Hint: Object.values(obj)=[‘a’, ‘b’, ‘c’], Object.keys(obj) = [0, 1, 2]

31. Try it!
31
§ #練習：畫幾個⾧條圖看看！

32. Outline
§ The past and now of JavaScript
§ A HTML with CSS and JavaScript
§ Common Type
§ Flow Control
§ Function
§ Advanced JavaScript
32

33. declare a function
33
1
2
3
4
5
myFunction(Parameter1,Parameter2){
return Parameter1,Parameter2;
}
myFunction(argument1,argument2);

34. declare a function
34
1
2
3
4
5
function myFunction(a,b) {
return a*b;
}
console.log(myFunction(4,3));

35. declare a function as variable
35
1
2
3
4
5
6
7
var myFunction = function(Parameter1,
Parameter2){
return Parameter1,Parameter2;
}
myFunction(argument1,argument2);

36. this
36
1
2
3
4
5
6
A = function A(){console.log(this);}
A(); // Window
B = {A: function A(){console.log(this);}}
B.A(); // object B

37. callback
37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function A(){
console.log('A1');
setTimeout( function(){ console.log("A2"); }, 1000 );
}
function B(){
console.log('B1');
setTimeout( function(){ console.log('B2'); }, 1000 );
}
A();
B();

38. 38
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function A(cb){
console.log('A1');
setTimeout( function(){ console.log("A2"); cb();}, 1000 );
}
function B(){
console.log('B1');
setTimeout( function(){ console.log('B2'); }, 1000 );
}
A(B);
A(function (){
console.log('B1');
setTimeout( function(){ console.log('B2'); }, 1000 );
});

39. Thanks for listening.
2017/06/27 (Wed.) JavaScript Beginner Tutorial
Wei-Yuan Chang
v123582@gmail.com
v123582.github.io