Web design II

JavaScript

Transcript

1. web design II WEI, HUANG e-Mail: ga895479@gmail.com 1
2. Contents • Introduction to JavaScript – history – basic data type – Operator、operand – DOM、BOM – Function – Object、JSON – Standard Library – Ajax • Action in slider (polling) 2
3. 學習 JavaScript 有何好處? • 95%以上的 web 使用。 • 可以開發桌面應用。 • 可以開發 Mobile 應用。 • 可以玩硬體。 • 可以寫 Server (後端)。 • 可以開發 Unity。 說不定未來可以開發飛彈? 3
4. History • JavaScript is a high-level, dynamic, untyped, and interpreted programming language. • It has been standardized in the ECMAScript language specification. • JavaScript was originally developed in 10 days in May 1995 by Brendan Eich, while he was working for Netscape Communications Corporation. 4
5. Untyped • JS 是一項沒有明確定義資料型態的語言，同一般常 見的直譯語言。 • JS 在宣告變數時，實際上是透過頂層物件，向下逐 層呼叫其屬性 (property) 或稱資料成員 (member)。 5
6. Java & JavaScript • Java 是一項靜態、物件導向、直譯&編譯語言，創始 者為昇陽 (sun) 公司的員工 – James Gosling。 • JavaScript 是一項腳本、動態、直譯語言，創始者為 - 景網 (netscape) 公司員工 - Brendan Eich。 *上述主要運作於 Android、Windows…等 O.S.上。 *下述主要運作於 Browser Client、Server。 6
7. Java & JavaScript • A. 為什麼要提兩者的不同? – Q. 非常多初學者將兩者搞混，常常喜歡指鹿為馬，然而請務 必搞清楚兩者的差異，此物非彼物。 • A. 為什麼 Eich 當初發明 JS 時要如此命名? – Q. 當時 (1995) 最火紅的語言即 Java 藉此 Eich 想藉由 Java 的名氣推廣此語言，因此即命名 JavaScript，然而十 年過後他亦表示很後悔，並寫道:「如果你要開發一項語言， 千萬別取一個會令使用者混淆的名稱」。 7
8. DOM • DOM (Document Object Model) 的全名是文件物件 模型，是網頁中的標準物件。 8
9. DOM Level • DOM 的規範是由 W3C 所制訂，因此在早期 DOM 剛發布時，並無版本之分，而是因爾後發展出不同的 HTML 版本才發佈對應的 DOM Level。 • DOM 0 – 標準版發佈前各家廠商所制訂的規範。 • DOM 1 – W3C 於 1998 年發布的第一個標準版。 • DOM 2 – 2000 年發布的版本。 • DOM 3 – 2004 年發布的版本。 *DOM 在發佈新版時，皆繼承舊的版本，並向下支援 9
10. BOM • BOM (Browser Object model) 瀏覽器物件模型，與 DOM 的概念相同，差異為 BOM 提供一個 window 物 件供使用者進行瀏覽器相關的操作。 • 而 DOM 則提供 document 物件供使用者進行 HTML 元素的操作。 # 有些人則習慣稱 DOM 樹、BOM 樹 來描述 document、browser 物件。 10
11. BOM 與 DOM 的關係 • BOM 如前頁所提，其包含所有有關 Browser 相關的 操作，因此 DOM 亦算為 BOM 的屬性。 11
12. Top level object • 在諸多可執行 JS 的環境下都預設有一個 root object，即頂層物件，該物件將會在執行 JS 開始前 自動載入，該機制除了本身會記錄相關的環境資訊外， 亦與 JS 的特性有關，而這部分將在稍後講解。 • 舉例而言，JS 在 client 端 (此泛指 browser) 時，即 會預設載入 window 物件，並且將 window 下的 document 一併載入。 server 端的 node.js 預設載入 global 物件 12
13. JavaScript 長得像誰? • 許多初學者不僅喜歡搞混 Java 與 JS 的名稱，連他 們的關係亦喜歡混淆，因時常認為在 JS 中是類別為 主的語言。 • 然而兩者名稱雖相似，但 JS 的撰寫風格衍生自 C (like-C)，並且使用一級函式的特性來自於 Scheme (一種語言)，同時基於原型的繼承方式 (prototype- based)來自於 Self。 13
14. 撰寫時應注意事項 • JS 具有大小寫 (case-sensitive) 之分。 • JS 具有一些關鍵字 (keyword) 與保留字 (reserved)。 • JS 將自動忽略程式碼中的換行與空格。 • JS 中單行註解使用 // ，多行註解則使用 /* */。 • JS 中將會自動為每一行結尾加上一個分號，因此分 號在有些時候可以省略。 14
15. case-sensitive • while !== While !== WHILE，此三者在 JS 皆不同。 • 首者為識別字，二者與三者為自行宣告的變數名稱。 • onClick !== onclick，前者是 HTML 事件屬性、後者 為在 JS 對 onclick 的事件處理。 15
16. identifiers • JS 中，識別字可視為一個名稱，識別字可用於為變 數與函式命名，其中必須符合以下命名規則； • 需使用字母、底線、$開頭，而字首不得以數字開頭。 • Keyword & Reserved 16
17. JS 下常用的命名規則 • 在撰寫程式碼時，通常並無硬性要求命名名稱，但在 一個團隊中，通常需要制定一套規範，否則將會導致 每個成員所撰寫的程式碼風格不一致，增加除錯與測 試的困難度。 • 因此，JS 中常使用駝峰式命名法或巴斯卡命名法作 為變數與函式的命名有時候會搭配資料型別使用匈牙 利命名法。 17
18. 駝峰 vs. 匈牙利 vs. 巴斯卡 • 駝峰法使用字首為小寫字母開頭，接續以小寫完成一 個單字，再以大寫做為下一單字的開頭，再接以小寫 完成，若函式為建構子時，應使用大寫開頭。 – toUpperCase()、toString()、MyConstructor() • 匈牙利命名規則使用型態簡寫搭配變數名稱命名。 – heightWindow、 strName、pX • Snake_case – 命名規則為單字連接時使用底線。 • 巴斯卡規則其實就是大駝峰命名法，所有字首皆大寫。 18
19. 非必須的分號 • a = 4; b = 4; • a = 3; b = 4; • var y = x + f (a+b).toString() • var y = x + f(a+b).toString(); 19
20. ST Plugins • Javascript Beautify • JSHint Gutter 20
21. 型別、值、變數 • 值 (value) • 變數 (variable) • 型別 (types) – 基本型別 (primitive) – 物件型別 (object) JS 變數不具型別 (避免與上面的型別混淆，可以想像成 JS 的變數包含了所有的型別) 21
22. 宣告變數 • JavaScript 使用語彙範疇 (lexical scoping)。 • 例如 function 即為一個語彙，在 function 內使用 var 關鍵字進行宣告的變數為區域變數。 *於 function 外則稱為全域或稱頂層物件的屬性。 *若在 function 不使用 var 宣告變數，同宣告全域。 22
23. 宣告變數 cont. • var i = 0; function something() { • var i = 5, j = 0; • ++i; // 6 • } • --i; // -1 • --j; // -1 23
24. untyped • JS 的無型別特性，因此可使我們將任意值傳入變數 中儲存，亦可指定給不同型別值的數值。 • var a = 5, b = ‘hello’, t; t = a; a = b; b = t; 24
25. Number • JS 使用 IEEE 754 雙精準度表示數字。 • 事實上等同於 C++ / Java 的 double 型別。 • 數字直接出現稱數字字面值 (numeric literal)。 • ex: -3.14159; // numeric literal 25
26. Number cont. • integer – 0 – 3 – 10000000 • 16 hex – 0xff // 15*16 + 15 = 255 – 0xCAFE911 • float – 3.14 – 1.478223E-32 // 1.478223 * 10 ^ -32 26
27. Number cont. • JS 提供了 Math 物件支援更複雜的數學運算； – Math.pow(2,53) // 2^53 – Math.round(0.6) // 1.0 最接近的整數 – Math.ceil(.6) // 1.0 取不小於本身最大的數 – Math.floor(.6) // 0 取不大於本身最大的數 – Math.abs(-5) // 5 絕對值 – Math.max(x,y,z) // 回傳最大引數 – Math.min(x,y,z) // 回傳最小引數 – Math.random() // 擬似亂數 x，0 <= x < 1.0 – Math.PI 27
28. Number cont. • JS 提供了 Math 物件支援更複雜的數學運算； – Math.E // 自然對數 – Math.sqrt(3) // 3的平方根 – Math.sin(0) // 三角函數，還有 cos、atan… – Math.log(10) // 以 10 為底的對數 – Math.exp(3) // Math.E 的 3 次方 28
29. Number cont. • JS 進行算數運算時，可以透過 +, -, *, /, %… 運算子進行運算 • 而不正確的運算可能會引發以下問題； • Overflow (益位) • Underflow (下益) – 當發生以上問題時，JS 會以 Infinity 表示。 • Division by zero (除 0) – 除 0 時，JS 會顯示 NaN，此為一種非數字的值，ex: 1 / 0; // NaN 29
30. Date • JS 中提供一個 Date() 建構式，用於創建日期。 • var then = new Date(2010, 0, 1, 17, 10, 30); • var now = new Date(); // 預設回傳目前日期 • then.getFullYear() then.getMonth() then.getDate() then.getDay() then.getHours() 30
31. String • JS 中的字串使用 UTF-16 進行編碼，因此每一個字 元佔據 16 bit • var e = “e”; “\ud835\udc52” 使用兩個 16 bit • JS 中雙單引號大致上無差別，唯一差別是雙引號可 包含單引號，單引號可包含雙引號。 • \n 換行字元、\t 水平 tab 31
32. String cont. • 串接 (concatenate strings) – 透過 + 可以將兩個字串串接成一個字串 • 字串額外提供一些方法，進行處理 – charAt(0) – length – substring(x, y) // 取出從 x 到 y 之間的字串 – slice(x,y) // 同上 – indexOf(‘x’) // 符合 ‘x’ 字元的位置 – split() // 切割為子字串，並用陣列儲存 32
33. String cont. • 字串額外提供一些方法，進行處理 – replace(‘x’, ‘y’) 用 ‘x’ 取代所有的 ‘y’ – toUpperCase() 將字串轉為大寫 33
34. null & undefined • null 是一個關鍵字，表示變數並非一個物件。 • 我們可以使用 typeof 檢驗 null 則會回傳 “object” • undefined 則是當我們使用 null 對它求值，將會得到 一個未定義的值，表示該值並不存在。 • 這種情況常出現在變數尚未初始化、函式並未定義回 傳值。 34
35. Type Casting • 10 + ‘ object’ // => ‘10 object’ ‘7’ * ‘4’ // => 28 • var n = 1 – ‘x’; // NaN • n + ‘ object’; // ‘NaN object • null == undefined • ‘0’ == 0 • 0 == false 35
36. Type Casting cont. • 前頁所描述為 JS 在執行運算式時的自動轉型。 • 本頁則說明如何明確轉型。 • Number(‘3’) // => 3 • String(false) // => false • Boolean([]) // true • Object(3) // new Number(3) 36
37. Type Casting cont. • Number 提供了一些方法，讓使用者更方便操作數字 轉換； • toFixed(n) // 取用小數後 n 位 • toExponential(n) // 使用 e 表示，同取用後 n 位數 • toPrecision(n) // 取用 n 位有效位數，其餘使用 e 表示 • 以上三種方法皆會將輸出結果轉為字串。 • toString(n) // 將數值轉為 n 進位表示的字串，2 <= n <= 36 37
38. Type Casting cont. • Number(n)，n 為字串時，將會自動解析為整數或浮 點數，但此僅可用於十進制，並且不可有非數值字元。 • 因此 JS 提供兩個全域函式供使用者操作； – parseInt(“str”, n) – parseFloat(“str, n) – Str 表示輸入的字串，n 代表欲顯示的進位，2 <= n <= 36。 38
39. Flow control • JS 上的流程控制與 C++ / Java 相同。 • if (x >= 10) { console.log(‘more than’); } else if (x === 10) { console.log(‘equals’); } else { console.log(‘less’); } 39
40. Loop • for (var i =0, j = 0; i < 10, j < 5; ++i, j += 2) { } • while (1) { } • var x = 0; do { ++x; } while (x === 10); 40
41. Loop cont. • JS 提供 for/in 述句； – for (variable in object) { statement } 41
42. Object • 物件是個合成值，聚集多個屬性或其他物件，並透過 名稱儲存使其可取回儲存的值。 • 物件是特性 (properties) 的無序群集，每個特性都有 一個名稱與值。 • 在資料結構中，我們通常稱為映射 (mapping)、雜湊 (hash)、字典(dictionary)、關聯式陣列 (associative array)。 42
43. Object cont. • JS 中的物件是動態的，通常可以加入或刪除特性。 • 變數儲存物件時，並非值而是參考，當 x 為物件時； – var y = x; • 此時 y 變數參考到與 x 物件相同，因此若進行變動； – x.name = ‘family’; – console.log(y.name); 注意特性的名稱可以是任何字串，包含空字串， 但同個物件下不可擁有兩個相同名稱的特性。 43
44. Object cont. • var O = {}; • O = { x: 10, now: new Date(), name: ‘Abc’, book: { author: ‘frank’, ISBN: ‘…’ } }; 44
45. Global Object • 前述介紹過，在 JS 環境下會自動載入一些特性、方 法及物件至頂層 (top-level) 物件或可稱根 (root) 物 件，因此你可以在最外層區域使一個變數參考至 this， 此時的 this 等同於指向頂層物件。 • undefined、Infinity、NaN // 全域特性 • isNaN()、parseInt()、eval() // 全域函式 • String()、Object()、Array() // 全域建構函式 • Math & JSON // 全域物件 45
46. Global Object cont. • 基於 JS 可以動態新增物件的屬性及方法，因此若在 全域下新增一個變數，實同在頂層物件增加一個屬性， 因此基於原則下，你不應該隨意擴充 JS 內建的物件， 換言之這就是為什麼應該減少全域變數的汙染。 46
47. Wrapper Object • JS 中物件為合成 (composite) 值: 其為一組特性或具 名值的群集，我們可以透過 . 來參考一個特性的值， 當該值為一個函式時，我們稱為方法。 • 此時想想為什麼前述提到一些非物件型態亦有特性及 方法? – ‘hello’.substring(h, ‘hello’.length); 47
48. Wrapper Object cont. • 當要參考字串的特性時，JS 會自動將此字串轉為一個物件，如 同 new String(‘hello’)。並且將該物件繼承字串的方法，它被用 於處理特性相關的動作，該動作處理完成後，該物件便被丟棄， (然而實際操作上並不需創建或丟棄；但它們的行為像是經過這 樣的處理)。 • 觀察以下程式碼發生的變化； • var s = ‘test’; • s.len = 4; • var t = s.len; 48
49. Wrapper Object cont. • 最後 t 的結果會是 undefined，因為在第二行時，參考了一項臨 時物件，並將該物件的特性增加了 len 並設定為 4，然而這個行 為在第二行結束時，該物件自動被丟棄，在第三行時，t 使用原 字串值創建一個臨時物件，並嘗試讀取 len 的特性，發現 len 特 性並不存在。 • JS 附帶這種自動轉換的特性，因此你應該盡量使用實字，而非 建構式。 – var s = ‘test’; – sar s = new String(‘test’); – 上者較佳，因撰寫較短。 49
50. Array • 陣列是一個有序的群集，其中值稱為元素 (element)， 元素所在位置稱為索引 (index)。 • JS 中同個陣列中可以概括不同型別的元素，其實是 因語言本身即不具型別，因此每個元素都被當作相同 型別，而每個元素卻同時可表示任何型別。 • JS 陣列索引的長度限制由 0 算起使用最大可用至 32 byte。 50
51. Array cont. • 創建陣列時毋須設定固定大小，重新配置時亦毋須。 • 陣列中提供 length 特性，可讀取陣列元素數量。 – var empty = []; – var primes = [2, 3, 5, 7, 11]; – var misc = [1.1, true, ‘a’,]; – var expression = [1+1, 1+2, 1+3]; – var count[1, , 2]; – var undefs[, , ]; 51
52. Sparse Array • a = new Array(5); • a = []; • a[1000] = 0; 52
53. Array cont. • JS 提供 Array 一些特性，進行動態的新增與刪除。 – a = [] – a[0] = ‘zero’; – a[1] = ‘one’; – delete a[1]; // 不會影響陣列長度 • 上述是基礎的新增，亦可透過 push()、pop() – a[]; – a.push(‘zero’); – a.push(‘one’, ‘two’); – a.pop(); // 將最後一個元素取出，長度減 1 53
54. Array cont. • JS 中不支援實際的多維陣列，但可透過陣列組成陣 列來模擬； – var table = new Array(10); for (var i = 0; i < table.length; ++i) { table[i] = new Array(10); } for (var row = 0; row < table.length; ++row) { for (var col = 0; col < table[row].length; ++col) { table[row][col] = row * col; } } 54
55. Array cont. • 陣列提供一些特性，使操作陣列更方便； • join(n)，將所有分隔加上 n，串接轉成字串，不帶引 數則預設傳, ex: ‘1,2,3’。 • reverse()，將元素以倒序輸出。 • sort()，將陣列排序。 *注意以上特性，將會直接改變陣列內部儲存位置，而非僅用於回傳。 55
56. JSON 56
57. Scope • Scope 於多數的書中翻作作用域，部份書則翻作範疇， 實則它指的就是變數在程式碼中存活的範圍。 • var scope = ‘global’; function checkscope() { var scope = ‘local scope’; function nested() { var scope = ‘nested scope’; return scope; } return nested(); }(); 57
58. Scope cont. • 常見的 Scope 陷阱 function scope() { for (var i = 0; i < 10; ++i) {} for (var i = 0; i < 10; ++i) {} // 此時 i 被重複宣告 } • var x = 10; function scope() { console.log(x);// undefined var x = 5; } *JS 中使用函式範疇 (function scope)，而非 C++ 常見的 {} 範疇 58
59. Hoisting • JS 中有一個特性，當你使用函式區域內的任何位置 宣告變數，JS 都將會自動提升自最前端，但請注意 這不代表 JS 將會一併將變數所指定的值提升至最前 端。 • 舉前例而言，x 被宣告的位置雖然寫在函數最後一行， 但實際上 JS 在執行函式時，會將所有宣告提升至最 前端，但此時 x 所指定的數值 5，卻不會一併被提升， 因此在函數第一行執行時，並非呼叫全域 x ，而是區 域的 x，但此時 x 尚未指定值，因此回傳 undefined 59
60. Hoisting cont. • Hoisting 的問題時常會被新手忽略，因此在撰寫程式 時，發生預期外的問題。 • 然而要解決這個問題，最好的辦法即時盡量將有關變 數的宣告寫至開頭。 60
61. Scope Chain • 指的是 JS 語彙範疇下變數查找的特性； var x = 10; x = function() { var x = 5; return function() { return x; }; }()(); 61
62. Function • function funname([arg1 [, arg2 […, argn]]]) {} • function hypotenuse(x,y) { return Math.squrt(x*x, y*y) } • function factorial(n) { if (n <= 1) return 1; return n * factorial(n – 1); } 62
63. Function cont. • 表示式 – callMe(function() { }); – callMe(function me() {}); – var myobj = { say: function() {} }; • 宣告式 – function foo() {} – function local() { function bar() {} return bar; } *注意宣告式僅可出現於函式本體 or 全域 63
64. Function cont. • 巢狀函式 – – JS 允許一個函式被嵌套 (nested) 至另一個函式內。 function hypotenuse(a, b) { function square(x) { return x*x; } return Math.sqrt(square(a) + square(b)); } 64
65. Constructor • 當我們需要將函式做為建構式，進而產生物件可以透 過 new 關鍵字進行； • 首先定義一個函式，通常以大駝峰命名； • function Obj() { this.name = ‘Peter’; } • var obj = new Obj(); console.log(obj.name); 65
66. Anonymous function • 匿名函式即不具名的函式，通常藉由引數或立即函式 做為執行時呼叫，最常見即事件處理下 callback 的機 制； • addEventListener(‘click’, function() { statement… }, boolean); • 通常情況下函式當作建構式指定給變數時，都不會具 名； – var obj = function() {}; – var obj = function myFun() {}; – 第二種用法，obj 會增加一個 name 的特性其值為 ‘myFun’ 66
67. Immediate function • JS 中函式可以於宣告後，直接執行，其語法如下； – function myFun() { statement… }(); – function Obj() { return function() { statement…. return false; } } var obj = new Obj()(); // obj = false; 67
68. Callback • 回呼函式的意思指的是函式接收一個同為函式的引數， 並以非同步的方式於適當的時機執行這個傳入的函式。 • setInterval(callback, repeat); • setTimeout(callback, timeout); • 許多事件監聽機制與 Ajax 的接收機制皆以此模式實 作，有些人稱為事件驅動 (event driven) 機制。 68
69. Immutable & mutable • JS 中分基本與物件兩大資料型態； – 基本 -> undefined、null、booleans、數字 & 字串 – 物件 -> window、document、自訂物件 • 此處需要注意的是基本型態儲存的是值，當這個值被 傳入某個函式時，此時傳入的是變數本身的值，因此 當該值被更改時，實際並不會因此影響外部的變數。 • 字串看似向字元組，但實際上字串所有的方法皆是回 傳一個新的值。 69
70. Immutable & mutable cont. • var s = ‘hello’; s.toUpperCase();// HELLO • console.log(s); // hello • 物件內部的屬性是可以被變更的，因變數儲存物件時， 並非儲存一個參考。 • var o = { x: 1 }; o.x = 2; 70
71. 值與物件的比對 • 基本型態的值，除字串外兩者必須具有相同的值才會 相等。 • 而字串則必須比較長度相等、雙方每個註標上的值皆 相同時，才會相等。 • 物件則不用值進行比對，比對需透過參考，若需要比 對物件下每個屬性的值是否相等，則必須使用拷貝的 方法進行比對。 71
72. Event • DOM 可以透過 addEventListener() 綁定各種不同的 事件，進行偵聽； 例如幫 button 綁定一個滑鼠點擊事件； • addEventListener(‘click’, eventHandler, true); • DOM.onclick = function() { statement… } • DOM.onload = function() { main code… } 72
73. BOM 操作 • 透過 Browser 提供的頂層物件，定義一些與 browser 操作相關的特性； • window.location = ‘http://google.com.tw’; • window.alert() • setTimeout(), setInterval() • clearTimeout(), clearInterval() 73
74. BOM 操作 cont. • window.location === document.location // true – protocol、host、hostname、port、pathname… • window.screen – width、height • open()、close() • confirm()、alert()、prompt() 74
75. DOM 操作 • 瀏覽器將 html 文件載入後，會解析成 DOM tree， 此時 DOM 會被載入至瀏覽器內部，而透過 JS 可動 態操作這些 DOM 進行取用、修改、新增、刪除…。 – var timestamp = document.getElementById(); – if (timestamp == null) { timestamp.appendChild(document.createTextNode(new Date().toString())); } • 每個元素都提供 className 以及 style。 75
76. DOM 操作 cont. • DOM.getElementById() • DOM.getElementsByName() • DOM.getElementsByTagName() • DOM.getElementsByClassName() • DOM.appendChild(new DOM); • DOM.removeChild(new DOM); 76
77. CSS 操作 • DOM.style.backgroundColor = ‘yellow’; • DOM.className = ‘highlight’; • Cascade，這個字源自於 CSS 第一個字，意即層層相 疊套用的意思，因此當許多地方都有設定時，取用順 序為； – Web 預設的樣式表 – 自訂文件樣式表 – Style 屬性 77
78. Action in slider (hw01) • 請製作一塊可以播放輪播特效的區塊。 • 可參考實際講解 & Apple、Microsoft 官網效果。 • 亦可接受製作成投影片撥放器。 • 務必達成需求 - – *需有至少一種特效。 – *可以切換手動或自動撥放模式。 • 選項需求 – – *可以使用依畫面大小適度調整播放區塊大小。 – *可以每張圖片使用不同特效播放。 78
79. Action in Ajax (hw02) • 請製作利用 JS 製作單頁 APP，該 APP 為簡易型編輯 器，並搭配 Ajax 接收 open data 提供編輯器使用。 • 務必達成要求 – – 可以更改字型、顏色、大小、切換背景。 – 接收 open data 提供產生亂文填充使用。 • 選項達成要求 – – 可以使用拖曳方式將圖片放入編輯器中或新增表格。 – 提供簡易的計算機功能需包含完整的四則運算。 79