Slide 1

Slide 1 text

JAVASCRIPT X-Village 網⾴頁開發課程 By Chi-Hsuan Huang

Slide 2

Slide 2 text

什什麼時候會⽤用到 JavaScript？

Slide 3

Slide 3 text

沒有 JavaScript 會怎麼樣？

Slide 4

Slide 4 text

停⽤用 JavaScript

Slide 5

Slide 5 text

Google 勉勉強能⽤用

Slide 6

Slide 6 text

Youtube 不能載入影片

Slide 7

Slide 7 text

Twitter 不能⽤用

Slide 8

Slide 8 text

Twitter 不能⽤用好吧，好像也沒什什麼⼈人在⽤用（？）

Slide 9

Slide 9 text

Facebook 不能⽤用

Slide 10

Slide 10 text

JavaScript 能監聽使⽤用者的不同操作即時與伺服器傳遞資料，改變介⾯面上的元素

Slide 11

Slide 11 text

點擊登入

Slide 12

Slide 12 text

點擊登入載入中… 驗證使⽤用者資料

Slide 13

Slide 13 text

點擊登入載入中… 驗證使⽤用者資料刷新⾴頁⾯面⼤大明，你好

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

事件發⽣生

Slide 16

Slide 16 text

資料處理理事件發⽣生

Slide 17

Slide 17 text

資料處理理改變 UI 事件發⽣生

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

往下滑

Slide 20

Slide 20 text

取得新貼⽂文資料往下滑

Slide 21

Slide 21 text

取得新貼⽂文資料顯⽰示更更多貼⽂文往下滑

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

輸入框傳送訊息

Slide 24

Slide 24 text

將訊息存入資料庫輸入框傳送訊息

Slide 25

Slide 25 text

將訊息存入資料庫對話框出現顯⽰示訊息輸入框傳送訊息

Slide 26

Slide 26 text

當你不只單純想呈現資訊⽽而想讓網⾴頁與使⽤用者產⽣生更更多「互動」時便便需要 JavaScript

Slide 27

Slide 27 text

今天 JavaScript 基礎介紹將分成兩兩個部分

Slide 28

Slide 28 text

JavaScript 程式語⾔言今天 JavaScript 基礎介紹將分成兩兩個部分

Slide 29

Slide 29 text

JavaScript 程式語⾔言執⾏行行環境（瀏覽器）API 今天 JavaScript 基礎介紹將分成兩兩個部分

Slide 30

Slide 30 text

資料處理理改變 UI 事件發⽣生 JS 程式語⾔言本⾝身

Slide 31

Slide 31 text

資料處理理改變 UI 事件發⽣生透過瀏覽器提供的 API

Slide 32

Slide 32 text

除此之外也會介紹知名的 jQuery 套件

Slide 33

Slide 33 text

Part1. JavaScript 語法 & 概念念

Slide 34

Slide 34 text

如何執⾏行行 JavaScript？

Slide 35

Slide 35 text

所有瀏覽器都內建 JavaScript 引擎⽤用來來執⾏行行你的 JS 程式碼

Slide 36

Slide 36 text

HTML 你可以直接寫在 HTML 裡⾯面 alert("Hello, world.");

Slide 37

Slide 37 text

HTML 也可以在 HTML 檔案中引入 .js 檔

Slide 38

Slide 38 text

或是在瀏覽器開發⼈人員⼯工具測試

Slide 39

Slide 39 text

輸出

Slide 40

Slide 40 text

JavaScript Python console.log console.log('Hello world'); print('Hello world')

Slide 41

Slide 41 text

註解

Slide 42

Slide 42 text

JavaScript // console.log(1); 單⾏行行註解

Slide 43

Slide 43 text

JavaScript /* Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript. */ 多⾏行行註解

Slide 44

Slide 44 text

變數＆資料型態 (Variables & Data Types)

Slide 45

Slide 45 text

JavaScript Python var x = 1; x = 1 需透過關鍵字 var 宣告變數

Slide 46

Slide 46 text

原始型態有 5 種資料型別是原始型別： 1. 數字（Number）：在 -(253 - 1) and 253-1 之間的數字, Infinity, - Infinity, NaN 2. 字串串（String）：代表⽂文字資料 3. 布林林（Boolean）：true 與 false。 4. 未定義（Undeﬁned）：沒有被定義的變數 undefined 5. Null：只有⼀一個值：null （意味著值不能被改變）

Slide 47

Slide 47 text

JavaScript var num = 12; var str = 'Mark'; var bool = true; var undef; // undefined var empty = null; “undeﬁned” ⽤用來來表⽰示並沒有被賦予值 “null” 相當於 Python 中的 'None' 原始型態程式碼

Slide 48

Slide 48 text

除了了原始型別之外都是「物件型態」其中主要包含： 1. 物件 Object 2. 陣列列 Array 3. …etc

Slide 49

Slide 49 text

JavaScript 物件 (object) var obj = { key: 'value' }; Python dictionary = { 'key': 'value' } 這裡的兩兩者的對比僅是概念念上的類似，並非完全相同。

Slide 50

Slide 50 text

JavaScript 陣列列 array var arr = [1, 2, 3, 4, 5]; Python list1 = [1, 2, 3, 4, 5] 這裡的兩兩者的對比僅是概念念上的類似，並非完全相同。

Slide 51

Slide 51 text

數學運算

Slide 52

Slide 52 text

⼀一樣有加減乘除...等基本運算

Slide 53

Slide 53 text

JavaScript 1 + 3 // 4 var sum = 1 + 3; Python # 4 sum = 1 + 3

Slide 54

Slide 54 text

JavaScript 但是JS 運算允許不同型態運算 // '13' var numPlusStr = 1 + '3'; Python # TypeError num_plus_str = 1 + '3' 需要特別⼩小⼼心不同型態之間的運算

Slide 55

Slide 55 text

JavaScript ⽤用 “Number” 轉換成數字型態 // 1 Number('1')

Slide 56

Slide 56 text

判斷式（Conditionals）

Slide 57

Slide 57 text

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('不及格')

Slide 58

Slide 58 text

JavaScript 使⽤用“&&”與“||”取代 and 與 or if (age > 20 && age < 65) { console.log('work hard'); } Python if age > 20 and age < 65: print('work hard')

Slide 59

Slide 59 text

邏輯運算元

Slide 60

Slide 60 text

JavaScript “==”vs“===” // true console.log(1 == '1'); // false console.log(1 === '1'); 推薦使⽤用三個等號，避免型態⾃自動轉換兩兩個等號會⾃自動將兩兩邊轉換相同型態比較

Slide 61

Slide 61 text

比較運算元

Slide 62

Slide 62 text

迴圈 (Loop)

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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)

Slide 65

Slide 65 text

解析 for 迴圈 for(var i = 0; i < 10; i++) { // i++ 等於 i+=1 console.log(i); } 初始值終⽌止條件每⼀一次迴圈後執⾏行行

Slide 66

Slide 66 text

⼀一樣有 break 跟 continue for(var I = 0; I < 10; I++) { console.log(i); break; } JavaScript

Slide 67

Slide 67 text

函式 (Function)

Slide 68

Slide 68 text

JavaScript 透過關鍵字“function”定義函式 function sum(x, y) { return x + y; } Python def sum(x, y): return x + y

Slide 69

Slide 69 text

例例外處理理 (Exception Handling)

Slide 70

Slide 70 text

JavaScript try…catch… try { sum(); } catch(err) { console.log(err); } Python try: sum() except Exception as err: print(err)

Slide 71

Slide 71 text

陣列列 (Array) 常⽤用⽅方法

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

JavaScript var iterable = [10, 20, 30]; for (var i = 0; i < iterable.length; i++) { console.log(iterable[i]); } // 10 // 20 // 30 for 列列舉陣列列裡⾯面的元素

Slide 74

Slide 74 text

JavaScript var iterable = [10, 20, 30]; for (var value of iterable) { console.log(value); } // 10 // 20 // 30 也可以使⽤用 “for of” 列列舉

Slide 75

Slide 75 text

物件 (Object)常⽤用⽅方法

Slide 76

Slide 76 text

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"; 物件可以存放任何東⻄西

Slide 77

Slide 77 text

JavaScript var obj = { a: 1, b: 2, c: 3, }; //['a', 'b', 'c'] console.log(Object.keys(obj)); Object.keys() 取得物件裡的 keys

Slide 78

Slide 78 text

JavaScript var obj = { a: 1, b: 2, c: 3, }; // true console.log(obj.hasOwnProperty('a')); // false console.log(obj.hasOwnProperty('d')); 查詢 hasOwnProperty 物件是否有該 Property

Slide 79

Slide 79 text

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” 列列舉物件裡⾯面的元素

Slide 80

Slide 80 text

作⽤用域提升（Hoisting）

Slide 81

Slide 81 text

作⽤用域提升（Hoisting）是 JavaScript 的預設特性會⾃自動把「宣告變數」移到該 Scope 的最上⽅方亦即是在 JavaScript 中變數，可以在被宣告前先被使⽤用

Slide 82

Slide 82 text

JavaScript Hoisting：兩兩者其實是⼀一樣的 x = 5; // Assign 5 to x var x; // Declare x JavaScript var x; // Declare x x = 5; // Assign 5 to x

Slide 83

Slide 83 text

let, const

Slide 84

Slide 84 text

JavaScript ES2015 版本新增了了 let & const 的變數宣告⽅方法 const x = 1; let y = 1; 兩兩者都不受作⽤用域提升（Hoisting）影響讓變數除了了 Global Scope, Function Scope 還多了了 Block Scope

Slide 85

Slide 85 text

JavaScript const 宣告後不能重新 assign 值 const x = 1; // Uncaught TypeError: Assignment to constant variable. x = 2; const point = {}; // 注意：如果只改變該變數裡⾯面的值是可以的 point.x = 1; // { x: 1 }

Slide 86

Slide 86 text

內建函式・以 Math 為例例

Slide 87

Slide 87 text

JavaScript 內建函式不需要 import 就可以直接⽤用 // 隨機產⽣生亂數 var rand = Math.random(); // 8 Math.sqrt(64); // 4.7 Math.abs(-4.7);

Slide 88

Slide 88 text

JavaScript 良好慣例例 • 使⽤用 2 格空格當縮排 • 使⽤用駝峰式的命名⽅方式 e.g. ﬁrstName • 使⽤用 let, const 宣告變數 • 使⽤用 === and !==

Slide 89

Slide 89 text

語法查詢 • http://www.w3school.com.cn/js/index.asp • JavaScript | MDN

Slide 90

Slide 90 text

Exercise1 https://github.com/x-village/x-village-web-js-course 連結：打開 exercise1 資料夾，完成 exercise1.js 的兩兩個 function

Slide 91

Slide 91 text

Part2. 瀏覽器 API

Slide 92

Slide 92 text

資料處理理改變 UI 事件發⽣生透過瀏覽器提供的 API

Slide 93

Slide 93 text

找尋特定 HTML DOM

Slide 94

Slide 94 text

JavaScript ⽤用 ID 尋找 var x = document.getElementById("button1");

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

事件監聽

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Slide 99

Slide 99 text

改變 HTML 元素

Slide 100

Slide 100 text

JavaScript .innerHTML & setAttribute(…) // Change the inner HTML of an element document.getElementById("demo").innerHTML = "

Hello World!

"; // Change the attribute value of an HTML element document.getElementById("img1").setAttribute('src', 'http...');

Slide 101

Slide 101 text

移除 HTML

Slide 102

Slide 102 text

JavaScript .remove() document.getElementById("div1").remove();

Slide 103

Slide 103 text

更更新 HTML 元素的 CSS 樣式

Slide 104

Slide 104 text

JavaScript 更更改 id = demo 的元素顏⾊色為紅⾊色 // Change the style of an HTML element document.getElementById("demo").style.color = 'red';

Slide 105

Slide 105 text

修改 HTML 元素的 class

Slide 106

Slide 106 text

JavaScript .classList // Add specified class values. document.getElementById("demo").classList.add('new-class'); // Remove specified class values. document.getElementById("demo").classList.remove('old-class');

Slide 107

Slide 107 text

AJAX (Asynchronous JavaScript and XML) 非同步處理理

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Exercise2 https://github.com/x-village/x-village-web-js-course 連結：打開 exercise2 資料夾，完成 exercise2.js 的兩兩個 function

Slide 110

Slide 110 text

Part3. jQuery

Slide 111

Slide 111 text

什什麼是 jQuery？

Slide 112

Slide 112 text

jQuery 是⼀一個 JS 第三⽅方函式庫就像 Python 的 pandas ⼀一樣提供許多⽅方便便的函式讓你不⽤用⾃自⼰己寫很多 code

Slide 113

Slide 113 text

HTML 可以從官⽅方下載，或是其他平台引入

Slide 114

Slide 114 text

jQuery 選擇器選取 HTML 元素

Slide 115

Slide 115 text

JavaScript 選擇 HTML 元素 // Select all

elements on a page var $p = $("p"); // Find elements with a specific class var $intro = $(".intro");

Slide 116

Slide 116 text

jQuery 事件監聽

Slide 117

Slide 117 text

JavaScript $(….).click(…) $(".btn").click(function(){ // do something });

Slide 118

Slide 118 text

JavaScript $(….).mouseenter(…) $("p").mouseenter(function(){ });

Slide 119

Slide 119 text

JavaScript $(….).on(…) $("#element").on("change", function() { });

Slide 120

Slide 120 text

jQuery 互動效果

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

JavaScript 移除/清空 HTML // Removes the selected element(s) and its child elements $("#div1").remove(); // Removes the child elements of the selected element $("#div1").empty();

Slide 123

Slide 123 text

JavaScript 設定 HTML 屬性 $("#test1").text("Hello world!"); $("#test2").html("Hello world!"); $("#w3s").attr("href", "https://www.w3schools.com/ jquery/");

Slide 124

Slide 124 text

JavaScript 改變樣式 $("#p1").css("color", "red");

Slide 125

Slide 125 text

JavaScript 顯⽰示/隱藏元素 $("p").hide(); $("p").show();

Slide 126

Slide 126 text

jQuery AJAX 伺服器互動

Slide 127

Slide 127 text

JavaScript $ajax(…) $.ajax({ url: '/data.json', method: 'GET', success: function (data) { console.log(data); } });

Slide 128

Slide 128 text

JavaScript 另⼀一種更更⽅方便便取得 JSON 資料的⽅方法 $.getJSON( "example.json", function() { console.log( "success" ); }) .fail(function() { console.log( "error" ); })

Slide 129

Slide 129 text

JavaScript POST 資料到 Server var postData = { key: 'value' }; $.post( “/save”, postData, function(data) { console.log('success'); });

Slide 130

Slide 130 text

非同步概念念

Slide 131

Slide 131 text

JavaScript 注意！ JavaScript 可能不會按順序執⾏行行 console.log( "1" ); $.getJSON( "example.json", function() { console.log( "3" ); }); console.log( "2" ); // 1 // 2 // 3

Slide 132

Slide 132 text

Exercise3 https://github.com/x-village/x-village-web-js-course 連結：打開 exercise3 資料夾，完成 exercise3.js 的兩兩個 function

Slide 133

Slide 133 text

延伸閱讀 • Make a Website • Web Developer Roadmap • Eloquent JavaScript • You Don’t Know JS 系列列

Slide 134

Slide 134 text

Facebook 社團 • javascript.tw • Front-End Developers Taiwan