JavaScript Beginner Tutorial | WeiYuan

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

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

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

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

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

A HTML with CSS and JavaScript 8

A HTML with CSS and JavaScript link 9

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);

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

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

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

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

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(',')

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

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());

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

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

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]。

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

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

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

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

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

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

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

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]

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

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

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

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

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

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 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 ); });

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

JavaScript Beginner Tutorial | WeiYuan

More Related Content

Similar to JavaScript Beginner Tutorial | WeiYuan

More from Wei-Yuan Chang

Recently uploaded

JavaScript Beginner Tutorial | WeiYuan