Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Beginner Tutorial | WeiYuan

125 views

Published on

JavaScript Beginner Tutorial | WeiYuan

Published in: Technology
  • Be the first to comment

JavaScript Beginner Tutorial | WeiYuan

  1. 1. JavaScript Beginner Tutorial 2017/06/27 (Wed.) WeiYuan
  2. 2. site: v123582.github.io line: weiwei63 § 全端⼯程師 + 資料科學家 略懂⼀點網站前後端開發技術,學過資料探勘與機器 學習的⽪⽑。平時熱愛參與技術社群聚會及貢獻開源 程式的樂趣。
  3. 3. Outline § The past and now of JavaScript § A HTML with CSS and JavaScript § Common Type § Flow Control § Function § Advanced JavaScript 3
  4. 4. Outline § The past and now of JavaScript § A HTML with CSS and JavaScript § Common Type § Flow Control § Function § Advanced JavaScript 4
  5. 5. The past and now of JavaScript § 1995 網景 Netscape 公司 Brendan Eich 設計 § ECMAScript 標準 == ECMA - 262 § Javascript 屬於 ECMAScript 標準的一種實作 § ES5 → ES6 (ES2015) → ES7 (ES2016) • 預計每年會更新一個新版本 5
  6. 6. Outline § The past and now of JavaScript § A HTML with CSS and JavaScript § Common Type § Flow Control § Function § Advanced JavaScript 6
  7. 7. A HTML with CSS and JavaScript § HTML => 內容,佈局 § CSS => 樣式,外觀 § JavaScript => ⾏為,互動 7
  8. 8. A HTML with CSS and JavaScript 8
  9. 9. A HTML with CSS and JavaScript link 9
  10. 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. 11. Outline § The past and now of JavaScript § A HTML with CSS and JavaScript § Common Type § Flow Control § Function § Advanced JavaScript 11
  12. 12. Common Type § Number § String § Boolean, Undefined, Null § Array [ ] § Object { : } 12
  13. 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. 14. Common Type § Number § String § Boolean, Undefined, Null § Array [ ] § Object { : } 14 1 2 3 4 5 var lastName = "Johnson"; // Number 通过数字字面量赋值 typeof "John” // 返回 number
  15. 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. 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. 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. 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. 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. 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. 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. 22. Outline § The past and now of JavaScript § A HTML with CSS and JavaScript § Common Type § Flow Control § Function § Advanced JavaScript 22
  23. 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. 24. Try it! 24 § #練習:承上題,如果要把偶數放前⾯,奇數放後⾯該怎麼做? 結果像是 [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]
  25. 25. For Loop 25 1 2 3 for (var i = 1;i < 5;i++) { console.log(i); }
  26. 26. While Loop 26 1 2 3 while(true) { // do sth in this infinity loop.. }
  27. 27. Try it! 27 § #練習:在數學中,⽤ n! 來表⽰階乘,例如,4! =1×2×3×4 =24。 請計算 3!, 4!, 5!。
  28. 28. Try it! 28 § #練習:"Please count the character here."
  29. 29. Try it! 29 § #練習:"Here are UPPERCASE and lowercase chars."
  30. 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. 31. Try it! 31 § #練習:畫幾個⾧條圖看看!
  32. 32. Outline § The past and now of JavaScript § A HTML with CSS and JavaScript § Common Type § Flow Control § Function § Advanced JavaScript 32
  33. 33. declare a function 33 1 2 3 4 5 myFunction(Parameter1,Parameter2){ return Parameter1,Parameter2; } myFunction(argument1,argument2);
  34. 34. declare a function 34 1 2 3 4 5 function myFunction(a,b) { return a*b; } console.log(myFunction(4,3));
  35. 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. 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. 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. 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. 39. Thanks for listening. 2017/06/27 (Wed.) JavaScript Beginner Tutorial Wei-Yuan Chang v123582@gmail.com v123582.github.io

×