[CS Foundation] Web - 4 - JavaScript Web Course

Transcript

1. JAVASCRIPT X-Village 網⾴頁開發課程 By Chi-Hsuan Huang
2. 什什麼時候會⽤用到 JavaScript？
3. 沒有 JavaScript 會怎麼樣？
4. 停⽤用 JavaScript
5. Google 勉勉強能⽤用
6. Youtube 不能載入影片
7. Twitter 不能⽤用
8. Twitter 不能⽤用 好吧，好像也沒什什麼⼈人在⽤用（？）
9. Facebook 不能⽤用
10. JavaScript 能監聽使⽤用者的不同操作 即時與伺服器傳遞資料，改變介⾯面上的元素
11. 點擊登入
12. 點擊登入 載入中… 驗證使⽤用者資料
13. 點擊登入 載入中… 驗證使⽤用者資料 刷新⾴頁⾯面 ⼤大明，你好
15. 事件發⽣生
16. 資料處理理 事件發⽣生
17. 資料處理理 改變 UI 事件發⽣生
19. 往下滑
20. 取得 新貼⽂文資料 往下滑
21. 取得 新貼⽂文資料 顯⽰示 更更多貼⽂文 往下滑
23. 輸入框 傳送訊息
24. 將訊息 存入資料庫 輸入框 傳送訊息
25. 將訊息 存入資料庫 對話框出現 顯⽰示訊息 輸入框 傳送訊息
26. 當你不只單純想呈現資訊 ⽽而想讓網⾴頁與使⽤用者產⽣生更更多「互動」時 便便需要 JavaScript
27. 今天 JavaScript 基礎介紹將分成兩兩個部分
28. JavaScript 程式語⾔言 今天 JavaScript 基礎介紹將分成兩兩個部分
29. JavaScript 程式語⾔言 執⾏行行環境（瀏覽器）API 今天 JavaScript 基礎介紹將分成兩兩個部分
30. 資料處理理 改變 UI 事件發⽣生 JS 程式語⾔言本⾝身
31. 資料處理理 改變 UI 事件發⽣生 透過瀏覽器提供的 API
32. 除此之外也會介紹知名的 jQuery 套件
33. Part1. JavaScript 語法 & 概念念
34. 如何執⾏行行 JavaScript？
35. 所有瀏覽器都內建 JavaScript 引擎 ⽤用來來執⾏行行你的 JS 程式碼
36. HTML 你可以直接寫在 HTML 裡⾯面 <script> alert("Hello, world."); </script>
37. HTML 也可以在 HTML 檔案中引入 .js 檔 <script src="script.js"></script>
38. 或是在瀏覽器開發⼈人員⼯工具測試
39. 輸出
40. JavaScript Python console.log console.log('Hello world'); print('Hello world')
41. 註解
42. JavaScript // console.log(1); 單⾏行行註解
43. JavaScript /* Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript. */ 多⾏行行註解
44. 變數 ＆ 資料型態 (Variables & Data Types)
45. JavaScript Python var x = 1; x = 1 需透過關鍵字 var 宣告變數
46. 原始型態 有 5 種資料型別是原始型別： 1. 數字（Number）：在 -(253 - 1) and 253-1 之間的數字, Infinity, - Infinity, NaN 2. 字串串（String）：代表⽂文字資料 3. 布林林（Boolean）：true 與 false。 4. 未定義（Undefined）：沒有被定義的變數 undefined 5. Null：只有⼀一個值：null （意味著值不能被改變）
47. JavaScript var num = 12; var str = 'Mark'; var bool = true; var undef; // undefined var empty = null; “undefined” ⽤用來來表⽰示並沒有被賦予值 “null” 相當於 Python 中的 'None' 原始型態 程式碼
48. 除了了原始型別之外都是「物件型態」 其中主要包含： 1. 物件 Object 2. 陣列列 Array 3. …etc
49. JavaScript 物件 (object) var obj = { key: 'value' }; Python dictionary = { 'key': 'value' } 這裡的兩兩者的對比僅是概念念上的類似，並非完全相同。
50. JavaScript 陣列列 array var arr = [1, 2, 3, 4, 5]; Python list1 = [1, 2, 3, 4, 5] 這裡的兩兩者的對比僅是概念念上的類似，並非完全相同。
51. 數學運算
52. ⼀一樣有加減乘除...等基本運算
53. JavaScript 1 + 3 // 4 var sum = 1 + 3; Python # 4 sum = 1 + 3
54. JavaScript 但是JS 運算允許不同型態運算 // '13' var numPlusStr = 1 + '3'; Python # TypeError num_plus_str = 1 + '3' 需要特別⼩小⼼心不同型態之間的運算
55. JavaScript ⽤用 “Number” 轉換成數字型態 // 1 Number('1')
56. 判斷式（Conditionals）
57. JavaScript 需有⼤大括號・else if vs elif if(grade > 87) { console.log('不能再⾼高'); } else if (grade > 60) { console.log('及格'); } else { console.log('不及格'); } Python if grade > 87: print('不能再⾼高') elif grade > 60: print('及格') else: print('不及格')
58. JavaScript 使⽤用“&&”與“||”取代 and 與 or if (age > 20 && age < 65) { console.log('work hard'); } Python if age > 20 and age < 65: print('work hard')
59. 邏輯運算元
60. JavaScript “==”vs“===” // true console.log(1 == '1'); // false console.log(1 === '1'); 推薦使⽤用三個等號，避免型態⾃自動轉換 兩兩個等號會⾃自動將兩兩邊轉換相同型態比較
61. 比較運算元
62. 迴圈 (Loop)
63. JavaScript while 需有⼤大⼩小括號 // plus from 1 to 10 var num = 1; while(num <= 10) { num += 1; } Python # plus from 1 to 10 num = 1 while num <= 10: num += 1
64. JavaScript “for” 沒有 “range” // 印出 0…9 for(var i = 0; i < 10; i++) { console.log(i); } Python // 印出 0…9 for i in range(10): print(i)
65. 解析 for 迴圈 for(var i = 0; i < 10; i++) { // i++ 等於 i+=1 console.log(i); } 初始值 終⽌止條件 每⼀一次迴圈後執⾏行行
66. ⼀一樣有 break 跟 continue for(var I = 0; I < 10; I++) { console.log(i); break; } JavaScript
67. 函式 (Function)
68. JavaScript 透過關鍵字“function”定義函式 function sum(x, y) { return x + y; } Python def sum(x, y): return x + y
69. 例例外處理理 (Exception Handling)
70. JavaScript try…catch… try { sum(); } catch(err) { console.log(err); } Python try: sum() except Exception as err: print(err)
71. 陣列列 (Array) 常⽤用⽅方法
72. JavaScript var shoppingList = ['Milk', 'Bread', 'Beans']; // 3 shoppingList.length; // ['Milk', 'Bread', 'Beans', 'A new car'] shoppingList.push('A new car'); // ['Milk', 'Bread', 'Beans'] shoppingList.pop(); length, push(), pop()
73. JavaScript var iterable = [10, 20, 30]; for (var i = 0; i < iterable.length; i++) { console.log(iterable[i]); } // 10 // 20 // 30 for 列列舉陣列列裡⾯面的元素
74. JavaScript var iterable = [10, 20, 30]; for (var value of iterable) { console.log(value); } // 10 // 20 // 30 也可以使⽤用 “for of” 列列舉
75. 物件 (Object)常⽤用⽅方法
76. JavaScript var jedi = { name: "Yoda", age: 899, talk: function () { alert("another... Sky... walk..."); } }; // Yoda console.log(jedi.name); // 899 console.log(jedi['age']); // produces an alert box console.log(jedi.talk()); // And add new ones on the fly jedi.lightsaber = "purple"; 物件可以存放任何東⻄西
77. JavaScript var obj = { a: 1, b: 2, c: 3, }; //['a', 'b', 'c'] console.log(Object.keys(obj)); Object.keys() 取得物件裡的 keys
78. JavaScript var obj = { a: 1, b: 2, c: 3, }; // true console.log(obj.hasOwnProperty('a')); // false console.log(obj.hasOwnProperty('d')); 查詢 hasOwnProperty 物件是否有該 Property
79. JavaScript var obj = { a: '1', b: '2', }; for (var key of Object.keys(obj)) { console.log(key, obj[key]); } // a 1 // b 2 “for of” 列列舉物件裡⾯面的元素
80. 作⽤用域提升 （Hoisting）
81. 作⽤用域提升 （Hoisting）是 JavaScript 的預設特性 會⾃自動把「宣告變數」移到該 Scope 的最上⽅方 亦即是在 JavaScript 中變數，可以在被宣告前先被 使⽤用
82. JavaScript Hoisting：兩兩者其實是⼀一樣的 x = 5; // Assign 5 to x var x; // Declare x JavaScript var x; // Declare x x = 5; // Assign 5 to x
83. let, const
84. JavaScript ES2015 版本新增了了 let & const 的變數宣告⽅方法 const x = 1; let y = 1; 兩兩者都不受作⽤用域提升 （Hoisting）影響 讓變數除了了 Global Scope, Function Scope 還多了了 Block Scope
85. JavaScript const 宣告後不能重新 assign 值 const x = 1; // Uncaught TypeError: Assignment to constant variable. x = 2; const point = {}; // 注意：如果只改變該變數裡⾯面的值是可以的 point.x = 1; // { x: 1 }
86. 內建函式・以 Math 為例例
87. JavaScript 內建函式不需要 import 就可以直接⽤用 // 隨機產⽣生亂數 var rand = Math.random(); // 8 Math.sqrt(64); // 4.7 Math.abs(-4.7);
88. JavaScript 良好慣例例 • 使⽤用 2 格空格當縮排 • 使⽤用駝峰式的命名⽅方式 e.g. firstName • 使⽤用 let, const 宣告變數 • 使⽤用 === and !==
89. 語法查詢 • http://www.w3school.com.cn/js/index.asp • JavaScript | MDN
90. Exercise1 https://github.com/x-village/x-village-web-js-course 連結： 打開 exercise1 資料夾，完成 exercise1.js 的兩兩個 function
91. Part2. 瀏覽器 API
92. 資料處理理 改變 UI 事件發⽣生 透過瀏覽器提供的 API
93. 找尋特定 HTML DOM
94. JavaScript ⽤用 ID 尋找 var x = document.getElementById("button1");
95. JavaScript 更更多找尋⽅方法 // Find an element by element id document.getElementById('button1'); // Find elements by tag name document.getElementsByTagName('H1'); // Find elements by class name document.getElementsByClassName('demo-class'); // Find a element that matches a specified CSS selector document.querySelector("#header") // Find all elements that matches a specified CSS selector document.querySelectorAll(".intro")
96. 事件監聽
97. JavaScript addEventListener() // Add an event listener that fires // when a user clicks a button: document.getElementById("myBtn").addEventListener( "click", myFunction ); function myFunction() { console.log("Hello World!"); }
98. JavaScript addEventListener() // Add an event listener that fires // when a user clicks a button: document.getElementById("myBtn").addEventListener( "click", myFunction ); function myFunction() { console.log("Hello World!"); } Callback
99. 改變 HTML 元素
100. JavaScript .innerHTML & setAttribute(…) // Change the inner HTML of an element document.getElementById("demo").innerHTML = "<h1>Hello World!</h1>"; // Change the attribute value of an HTML element document.getElementById("img1").setAttribute('src', 'http...');
101. 移除 HTML
102. JavaScript .remove() document.getElementById("div1").remove();
103. 更更新 HTML 元素的 CSS 樣式
104. JavaScript 更更改 id = demo 的元素顏⾊色為紅⾊色 // Change the style of an HTML element document.getElementById("demo").style.color = 'red';
105. 修改 HTML 元素的 class
106. JavaScript .classList // Add specified class values. document.getElementById("demo").classList.add('new-class'); // Remove specified class values. document.getElementById("demo").classList.remove('old-class');
107. AJAX (Asynchronous JavaScript and XML) 非同步處理理
108. JavaScript 從 server 讀取資料（先看過就好） // The function requests data from a web server // and displays it function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }
109. Exercise2 https://github.com/x-village/x-village-web-js-course 連結： 打開 exercise2 資料夾，完成 exercise2.js 的兩兩個 function
110. Part3. jQuery
111. 什什麼是 jQuery？
112. jQuery 是⼀一個 JS 第三⽅方函式庫 就像 Python 的 pandas ⼀一樣提供許多⽅方便便的函式 讓你不⽤用⾃自⼰己寫很多 code
113. HTML 可以從官⽅方下載，或是其他平台引入 <script src=“./jquery.min.js”></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/ 1.9.1/jquery.min.js"></script>
114. jQuery 選擇器 選取 HTML 元素
115. JavaScript 選擇 HTML 元素 // Select all <p> elements on a page var $p = $("p"); // Find elements with a specific class var $intro = $(".intro");
116. jQuery 事件監聽
117. JavaScript $(….).click(…) $(".btn").click(function(){ // do something });
118. JavaScript $(….).mouseenter(…) $("p").mouseenter(function(){ });
119. JavaScript $(….).on(…) $("#element").on("change", function() { });
120. jQuery 互動效果
121. JavaScript 新增 HTML // Inserts content at the end of the selected elements $("p").append("Some appended text."); // Inserts content at the beginning of the selected elements $("p").prepend("Some prepended text.");
122. JavaScript 移除/清空 HTML // Removes the selected element(s) and its child elements $("#div1").remove(); // Removes the child elements of the selected element $("#div1").empty();
123. JavaScript 設定 HTML 屬性 $("#test1").text("Hello world!"); $("#test2").html("<b>Hello world!</b>"); $("#w3s").attr("href", "https://www.w3schools.com/ jquery/");
124. JavaScript 改變樣式 $("#p1").css("color", "red");
125. JavaScript 顯⽰示/隱藏元素 $("p").hide(); $("p").show();
126. jQuery AJAX 伺服器互動
127. JavaScript $ajax(…) $.ajax({ url: '/data.json', method: 'GET', success: function (data) { console.log(data); } });
128. JavaScript 另⼀一種更更⽅方便便取得 JSON 資料的⽅方法 $.getJSON( "example.json", function() { console.log( "success" ); }) .fail(function() { console.log( "error" ); })
129. JavaScript POST 資料到 Server var postData = { key: 'value' }; $.post( “/save”, postData, function(data) { console.log('success'); });
130. 非同步概念念
131. JavaScript 注意！ JavaScript 可能不會按順序執⾏行行 console.log( "1" ); $.getJSON( "example.json", function() { console.log( "3" ); }); console.log( "2" ); // 1 // 2 // 3
132. Exercise3 https://github.com/x-village/x-village-web-js-course 連結： 打開 exercise3 資料夾，完成 exercise3.js 的兩兩個 function
133. 延伸閱讀 • Make a Website • Web Developer Roadmap • Eloquent JavaScript • You Don’t Know JS 系列列
134. Facebook 社團 • javascript.tw • Front-End Developers Taiwan