Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web design II

Avatar for Frank Frank
July 11, 2016

Web design II

JavaScript

Avatar for Frank

Frank

July 11, 2016
Tweet

More Decks by Frank

Other Decks in Programming

Transcript

  1. Contents • Introduction to JavaScript – history – basic data

    type – Operator、operand – DOM、BOM – Function – Object、JSON – Standard Library – Ajax • Action in slider (polling) 2
  2. 學習 JavaScript 有何好處? • 95%以上的 web 使用。 • 可以開發桌面應用。 •

    可以開發 Mobile 應用。 • 可以玩硬體。 • 可以寫 Server (後端)。 • 可以開發 Unity。 說不定未來可以開發飛彈? 3
  3. 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
  4. Java & JavaScript • Java 是一項靜態、物件導向、直譯&編譯語言,創始 者為昇陽 (sun) 公司的員工 –

    James Gosling。 • JavaScript 是一項腳本、動態、直譯語言,創始者為 - 景網 (netscape) 公司員工 - Brendan Eich。 *上述主要運作於 Android、Windows…等 O.S.上。 *下述主要運作於 Browser Client、Server。 6
  5. Java & JavaScript • A. 為什麼要提兩者的不同? – Q. 非常多初學者將兩者搞混,常常喜歡指鹿為馬,然而請務 必搞清楚兩者的差異,此物非彼物。

    • A. 為什麼 Eich 當初發明 JS 時要如此命名? – Q. 當時 (1995) 最火紅的語言即 Java 藉此 Eich 想藉由 Java 的名氣推廣此語言,因此即命名 JavaScript,然而十 年過後他亦表示很後悔,並寫道:「如果你要開發一項語言, 千萬別取一個會令使用者混淆的名稱」。 7
  6. DOM Level • DOM 的規範是由 W3C 所制訂,因此在早期 DOM 剛發布時,並無版本之分,而是因爾後發展出不同的 HTML

    版本才發佈對應的 DOM Level。 • DOM 0 – 標準版發佈前各家廠商所制訂的規範。 • DOM 1 – W3C 於 1998 年發布的第一個標準版。 • DOM 2 – 2000 年發布的版本。 • DOM 3 – 2004 年發布的版本。 *DOM 在發佈新版時,皆繼承舊的版本,並向下支援 9
  7. BOM • BOM (Browser Object model) 瀏覽器物件模型,與 DOM 的概念相同,差異為 BOM

    提供一個 window 物 件供使用者進行瀏覽器相關的操作。 • 而 DOM 則提供 document 物件供使用者進行 HTML 元素的操作。 # 有些人則習慣稱 DOM 樹、BOM 樹 來描述 document、browser 物件。 10
  8. Top level object • 在諸多可執行 JS 的環境下都預設有一個 root object,即頂層物件,該物件將會在執行 JS

    開始前 自動載入,該機制除了本身會記錄相關的環境資訊外, 亦與 JS 的特性有關,而這部分將在稍後講解。 • 舉例而言,JS 在 client 端 (此泛指 browser) 時,即 會預設載入 window 物件,並且將 window 下的 document 一併載入。 server 端的 node.js 預設載入 global 物件 12
  9. JavaScript 長得像誰? • 許多初學者不僅喜歡搞混 Java 與 JS 的名稱,連他 們的關係亦喜歡混淆,因時常認為在 JS

    中是類別為 主的語言。 • 然而兩者名稱雖相似,但 JS 的撰寫風格衍生自 C (like-C),並且使用一級函式的特性來自於 Scheme (一種語言),同時基於原型的繼承方式 (prototype- based)來自於 Self。 13
  10. 撰寫時應注意事項 • JS 具有大小寫 (case-sensitive) 之分。 • JS 具有一些關鍵字 (keyword)

    與保留字 (reserved)。 • JS 將自動忽略程式碼中的換行與空格。 • JS 中單行註解使用 // ,多行註解則使用 /* */。 • JS 中將會自動為每一行結尾加上一個分號,因此分 號在有些時候可以省略。 14
  11. case-sensitive • while !== While !== WHILE,此三者在 JS 皆不同。 •

    首者為識別字,二者與三者為自行宣告的變數名稱。 • onClick !== onclick,前者是 HTML 事件屬性、後者 為在 JS 對 onclick 的事件處理。 15
  12. 駝峰 vs. 匈牙利 vs. 巴斯卡 • 駝峰法使用字首為小寫字母開頭,接續以小寫完成一 個單字,再以大寫做為下一單字的開頭,再接以小寫 完成,若函式為建構子時,應使用大寫開頭。 –

    toUpperCase()、toString()、MyConstructor() • 匈牙利命名規則使用型態簡寫搭配變數名稱命名。 – heightWindow、 strName、pX • Snake_case – 命名規則為單字連接時使用底線。 • 巴斯卡規則其實就是大駝峰命名法,所有字首皆大寫。 18
  13. 非必須的分號 • a = 4; b = 4; • a

    = 3; b = 4; • var y = x + f (a+b).toString() • var y = x + f(a+b).toString(); 19
  14. 型別、值、變數 • 值 (value) • 變數 (variable) • 型別 (types)

    – 基本型別 (primitive) – 物件型別 (object) JS 變數不具型別 (避免與上面的型別混淆,可以想像成 JS 的變數包含了所有的型別) 21
  15. 宣告變數 • JavaScript 使用語彙範疇 (lexical scoping)。 • 例如 function 即為一個語彙,在

    function 內使用 var 關鍵字進行宣告的變數為區域變數。 *於 function 外則稱為全域或稱頂層物件的屬性。 *若在 function 不使用 var 宣告變數,同宣告全域。 22
  16. 宣告變數 cont. • var i = 0; function something() {

    • var i = 5, j = 0; • ++i; // 6 • } • --i; // -1 • --j; // -1 23
  17. Number • JS 使用 IEEE 754 雙精準度表示數字。 • 事實上等同於 C++

    / Java 的 double 型別。 • 數字直接出現稱數字字面值 (numeric literal)。 • ex: -3.14159; // numeric literal 25
  18. 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
  19. 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
  20. 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
  21. Number cont. • JS 進行算數運算時,可以透過 +, -, *, /, %…

    運算子進行運算 • 而不正確的運算可能會引發以下問題; • Overflow (益位) • Underflow (下益) – 當發生以上問題時,JS 會以 Infinity 表示。 • Division by zero (除 0) – 除 0 時,JS 會顯示 NaN,此為一種非數字的值,ex: 1 / 0; // NaN 29
  22. 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
  23. String • JS 中的字串使用 UTF-16 進行編碼,因此每一個字 元佔據 16 bit •

    var e = “e”; “\ud835\udc52” 使用兩個 16 bit • JS 中雙單引號大致上無差別,唯一差別是雙引號可 包含單引號,單引號可包含雙引號。 • \n 換行字元、\t 水平 tab 31
  24. String cont. • 串接 (concatenate strings) – 透過 + 可以將兩個字串串接成一個字串

    • 字串額外提供一些方法,進行處理 – charAt(0) – length – substring(x, y) // 取出從 x 到 y 之間的字串 – slice(x,y) // 同上 – indexOf(‘x’) // 符合 ‘x’ 字元的位置 – split() // 切割為子字串,並用陣列儲存 32
  25. null & undefined • null 是一個關鍵字,表示變數並非一個物件。 • 我們可以使用 typeof 檢驗

    null 則會回傳 “object” • undefined 則是當我們使用 null 對它求值,將會得到 一個未定義的值,表示該值並不存在。 • 這種情況常出現在變數尚未初始化、函式並未定義回 傳值。 34
  26. 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
  27. Type Casting cont. • 前頁所描述為 JS 在執行運算式時的自動轉型。 • 本頁則說明如何明確轉型。 •

    Number(‘3’) // => 3 • String(false) // => false • Boolean([]) // true • Object(3) // new Number(3) 36
  28. Type Casting cont. • Number 提供了一些方法,讓使用者更方便操作數字 轉換; • toFixed(n) //

    取用小數後 n 位 • toExponential(n) // 使用 e 表示,同取用後 n 位數 • toPrecision(n) // 取用 n 位有效位數,其餘使用 e 表示 • 以上三種方法皆會將輸出結果轉為字串。 • toString(n) // 將數值轉為 n 進位表示的字串,2 <= n <= 36 37
  29. Type Casting cont. • Number(n),n 為字串時,將會自動解析為整數或浮 點數,但此僅可用於十進制,並且不可有非數值字元。 • 因此 JS

    提供兩個全域函式供使用者操作; – parseInt(“str”, n) – parseFloat(“str, n) – Str 表示輸入的字串,n 代表欲顯示的進位,2 <= n <= 36。 38
  30. Flow control • JS 上的流程控制與 C++ / Java 相同。 •

    if (x >= 10) { console.log(‘more than’); } else if (x === 10) { console.log(‘equals’); } else { console.log(‘less’); } 39
  31. 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
  32. Object cont. • JS 中的物件是動態的,通常可以加入或刪除特性。 • 變數儲存物件時,並非值而是參考,當 x 為物件時; –

    var y = x; • 此時 y 變數參考到與 x 物件相同,因此若進行變動; – x.name = ‘family’; – console.log(y.name); 注意特性的名稱可以是任何字串,包含空字串, 但同個物件下不可擁有兩個相同名稱的特性。 43
  33. Object cont. • var O = {}; • O =

    { x: 10, now: new Date(), name: ‘Abc’, book: { author: ‘frank’, ISBN: ‘…’ } }; 44
  34. Global Object • 前述介紹過,在 JS 環境下會自動載入一些特性、方 法及物件至頂層 (top-level) 物件或可稱根 (root)

    物 件,因此你可以在最外層區域使一個變數參考至 this, 此時的 this 等同於指向頂層物件。 • undefined、Infinity、NaN // 全域特性 • isNaN()、parseInt()、eval() // 全域函式 • String()、Object()、Array() // 全域建構函式 • Math & JSON // 全域物件 45
  35. Wrapper Object • JS 中物件為合成 (composite) 值: 其為一組特性或具 名值的群集,我們可以透過 .

    來參考一個特性的值, 當該值為一個函式時,我們稱為方法。 • 此時想想為什麼前述提到一些非物件型態亦有特性及 方法? – ‘hello’.substring(h, ‘hello’.length); 47
  36. Wrapper Object cont. • 當要參考字串的特性時,JS 會自動將此字串轉為一個物件,如 同 new String(‘hello’)。並且將該物件繼承字串的方法,它被用 於處理特性相關的動作,該動作處理完成後,該物件便被丟棄,

    (然而實際操作上並不需創建或丟棄;但它們的行為像是經過這 樣的處理)。 • 觀察以下程式碼發生的變化; • var s = ‘test’; • s.len = 4; • var t = s.len; 48
  37. Wrapper Object cont. • 最後 t 的結果會是 undefined,因為在第二行時,參考了一項臨 時物件,並將該物件的特性增加了 len

    並設定為 4,然而這個行 為在第二行結束時,該物件自動被丟棄,在第三行時,t 使用原 字串值創建一個臨時物件,並嘗試讀取 len 的特性,發現 len 特 性並不存在。 • JS 附帶這種自動轉換的特性,因此你應該盡量使用實字,而非 建構式。 – var s = ‘test’; – sar s = new String(‘test’); – 上者較佳,因撰寫較短。 49
  38. 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
  39. 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
  40. 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
  41. Array cont. • 陣列提供一些特性,使操作陣列更方便; • join(n),將所有分隔加上 n,串接轉成字串,不帶引 數則預設傳, ex: ‘1,2,3’。

    • reverse(),將元素以倒序輸出。 • sort(),將陣列排序。 *注意以上特性,將會直接改變陣列內部儲存位置,而非僅用於回傳。 55
  42. Scope • Scope 於多數的書中翻作作用域,部份書則翻作範疇, 實則它指的就是變數在程式碼中存活的範圍。 • var scope = ‘global’;

    function checkscope() { var scope = ‘local scope’; function nested() { var scope = ‘nested scope’; return scope; } return nested(); }(); 57
  43. 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
  44. Hoisting • JS 中有一個特性,當你使用函式區域內的任何位置 宣告變數,JS 都將會自動提升自最前端,但請注意 這不代表 JS 將會一併將變數所指定的值提升至最前 端。

    • 舉前例而言,x 被宣告的位置雖然寫在函數最後一行, 但實際上 JS 在執行函式時,會將所有宣告提升至最 前端,但此時 x 所指定的數值 5,卻不會一併被提升, 因此在函數第一行執行時,並非呼叫全域 x ,而是區 域的 x,但此時 x 尚未指定值,因此回傳 undefined 59
  45. Scope Chain • 指的是 JS 語彙範疇下變數查找的特性; var x = 10;

    x = function() { var x = 5; return function() { return x; }; }()(); 61
  46. 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
  47. Function cont. • 表示式 – callMe(function() { }); – callMe(function

    me() {}); – var myobj = { say: function() {} }; • 宣告式 – function foo() {} – function local() { function bar() {} return bar; } *注意宣告式僅可出現於函式本體 or 全域 63
  48. Function cont. • 巢狀函式 – – JS 允許一個函式被嵌套 (nested) 至另一個函式內。

    function hypotenuse(a, b) { function square(x) { return x*x; } return Math.sqrt(square(a) + square(b)); } 64
  49. Anonymous function • 匿名函式即不具名的函式,通常藉由引數或立即函式 做為執行時呼叫,最常見即事件處理下 callback 的機 制; • addEventListener(‘click’,

    function() { statement… }, boolean); • 通常情況下函式當作建構式指定給變數時,都不會具 名; – var obj = function() {}; – var obj = function myFun() {}; – 第二種用法,obj 會增加一個 name 的特性其值為 ‘myFun’ 66
  50. Immediate function • JS 中函式可以於宣告後,直接執行,其語法如下; – function myFun() { statement…

    }(); – function Obj() { return function() { statement…. return false; } } var obj = new Obj()(); // obj = false; 67
  51. Immutable & mutable • JS 中分基本與物件兩大資料型態; – 基本 -> undefined、null、booleans、數字

    & 字串 – 物件 -> window、document、自訂物件 • 此處需要注意的是基本型態儲存的是值,當這個值被 傳入某個函式時,此時傳入的是變數本身的值,因此 當該值被更改時,實際並不會因此影響外部的變數。 • 字串看似向字元組,但實際上字串所有的方法皆是回 傳一個新的值。 69
  52. Immutable & mutable cont. • var s = ‘hello’; s.toUpperCase();//

    HELLO • console.log(s); // hello • 物件內部的屬性是可以被變更的,因變數儲存物件時, 並非儲存一個參考。 • var o = { x: 1 }; o.x = 2; 70
  53. Event • DOM 可以透過 addEventListener() 綁定各種不同的 事件,進行偵聽; 例如幫 button 綁定一個滑鼠點擊事件;

    • addEventListener(‘click’, eventHandler, true); • DOM.onclick = function() { statement… } • DOM.onload = function() { main code… } 72
  54. BOM 操作 • 透過 Browser 提供的頂層物件,定義一些與 browser 操作相關的特性; • window.location

    = ‘http://google.com.tw’; • window.alert() • setTimeout(), setInterval() • clearTimeout(), clearInterval() 73
  55. BOM 操作 cont. • window.location === document.location // true –

    protocol、host、hostname、port、pathname… • window.screen – width、height • open()、close() • confirm()、alert()、prompt() 74
  56. DOM 操作 • 瀏覽器將 html 文件載入後,會解析成 DOM tree, 此時 DOM

    會被載入至瀏覽器內部,而透過 JS 可動 態操作這些 DOM 進行取用、修改、新增、刪除…。 – var timestamp = document.getElementById(); – if (timestamp == null) { timestamp.appendChild(document.createTextNode(new Date().toString())); } • 每個元素都提供 className 以及 style。 75
  57. DOM 操作 cont. • DOM.getElementById() • DOM.getElementsByName() • DOM.getElementsByTagName() •

    DOM.getElementsByClassName() • DOM.appendChild(new DOM); • DOM.removeChild(new DOM); 76
  58. CSS 操作 • DOM.style.backgroundColor = ‘yellow’; • DOM.className = ‘highlight’;

    • Cascade,這個字源自於 CSS 第一個字,意即層層相 疊套用的意思,因此當許多地方都有設定時,取用順 序為; – Web 預設的樣式表 – 自訂文件樣式表 – Style 屬性 77
  59. Action in slider (hw01) • 請製作一塊可以播放輪播特效的區塊。 • 可參考實際講解 & Apple、Microsoft

    官網效果。 • 亦可接受製作成投影片撥放器。 • 務必達成需求 - – *需有至少一種特效。 – *可以切換手動或自動撥放模式。 • 選項需求 – – *可以使用依畫面大小適度調整播放區塊大小。 – *可以每張圖片使用不同特效播放。 78
  60. Action in Ajax (hw02) • 請製作利用 JS 製作單頁 APP,該 APP

    為簡易型編輯 器,並搭配 Ajax 接收 open data 提供編輯器使用。 • 務必達成要求 – – 可以更改字型、顏色、大小、切換背景。 – 接收 open data 提供產生亂文填充使用。 • 選項達成要求 – – 可以使用拖曳方式將圖片放入編輯器中或新增表格。 – 提供簡易的計算機功能需包含完整的四則運算。 79