Web design III

jQuery

Transcript

1. web design III WEI, HUANG e-Mail: ga895479@gmail.com
2. Contents • JavaScript more… • Introduction to jQuery – Selector – Event driven – Properties, attributes, data – Chaining – Animations and effects – Ajax – Plugin
3. ECMAScript • JavaScript 中由 ECMA 組織制定共同標準其標準名 稱為 ECMAScript，由以往至今已衍化多個版本，主 要版本； – ES3 199x 年所發布幾乎所有 Browser 都有實作這個版本。 – ES5 2009 增加 strict 模式，現代瀏覽器多數支援。 – ES6 2015 目前多數瀏覽器尚未支援，增加 class 等語法。 – ES7 201x 目前屬於開發中狀態。
4. ES 5 • 為了避免諸如變數宣告範疇、不合法的型別轉換…諸 類問題，因此 ES 5 新增了一項標準； – 於 JS 文件開頭宣告 ‘use strict’; 字串，整份 JS 文件將採 用嚴謹模式，JS 將會自動偵錯不符合 ES 5 規範的內容。 – 若將 ‘use strict’; 寫於 function 之內，則該函式採用嚴謹模 式，而函式範疇外依然採用正常模式。
5. Object • 物件是一群特性的群集，特性指的是具有名稱與值的對應。 • 每個特性下皆有三種屬性； – Writable – 值是否具寫入性。 – Enumerable – 該特性是否具列舉性，是否可被 for / in 給列舉。 – Configurable – 特性可否刪除、屬性可否更動。 • 每個物件除特性外，具有三個關聯的物件屬性； – Prototype - 這是一個參考，其參考至另一個物件，或是由物件繼承而來。 – Class – 是個字串，用於區分該物件的種類 (ES 5)。 – Extensible – 擴充性，指明是否可在該物件加入新特性 (ES 5)。
6. Object cont. • 物件的種類可分為以下幾種； – Native : 指的是由 ES 所定義的物件，Array、function、Date、Math… – Host : 指內嵌 JS 直譯器的環境如 Browser 所定義的物件，HTMLElement – User-defined : 由使用者定義，並於 JS 執行時期創建的任何物件。 • 而特性分為下列兩種； – Own : 於物件上直接定義的特性，如 toString()、length – Inherited : 由原型物件所定義的特性。
7. Object cont. • 物件新增特性後，若要讀取特性內的值可使用以下兩種運算子； – 透過 . 運算子可以取用物件下特性名稱內的值； • var author = book.main_author; – 透過 [] 運算子亦可取用，兩者實際差異為 [] 內允許特性包含空白； • var author = book[‘main author’];
8. Object cont. • 建立物件有三種方式； – 物件字面值 • var book = { ‘main title’: ‘Java’, id: ‘#00454’ }; – 使用 new 創建物件 • var o = new Object(); – Object.create() ES5 • 使用後將創建一個新的物件，並將引數中的物件作為原型賦予至新創的物件中 • var o = Object.create({x: 1, y: 2}); // o 繼承了特性 x, y • var o2 = Object.create(null); • o2 的方式與指定一個空物件不同，空物件實際上只是物件為空，但 JS 中多數物 件將自動繼承原型 Object.prototype，因此依然可以調用繼承下來的 toString()， 然而 o2 的方式將直接透過原型繼承創立物件，因此繼承指向一個空的物件，表示 o2 不會指向任何方法或特性。
9. Object cont. • 物件有一組自有特性 (own)，以及由原型物件下繼承的一組特性。 • JS 中所有的物件都是基於原型繼承，並且透過一種稱為原型鏈 的方式防止繼承的物件複寫 (override) 被繼承的原型特性。 – var unit = { r: 1 }; // 要被繼承的物件 – var c = Object.create(unit); // 創立一個新的物件，並繼承原型 unit – c.x = 1; c.y = 1; // 將 c 增加兩個自有特性 – c.r = 2; // 將原型中 r 特性的值修改為 2 – console.log(unit.r); // 依然為 1，物件只會在原本的物件上新建或設定特性， 永遠不會修改原型鏈中的特性。
10. Object cont. • 查詢特性是否在物件內可以透過以下方法； – 使用 in 運算子，左方為特性名稱(字串)，右方為物件 • var o = { x: 1 }; • ‘x’ in o; // true ‘y’ in o; // false ‘toString’ in o; // true – 使用物件的 hasOwnProperty() 方法，測試是否有指定名稱的自有 特性，如果是繼承特性則回傳 false: • o.hasOwnProperty(‘x’); // true • o.hasOwnProperty(‘toString’); // false，繼承特性 – propertyIsEnumerable()，與上述大同，但特性須為可列舉性，才 會回傳 true 。 – 除 ES 5 新增可設為不可列舉，否則多數自建的特性都屬可列舉。 • 因此平時在查用時，可以簡略寫為 o.x !== undefined; // true
11. Object cont. • 特性的 Getters & Setters – 物件是由一個名稱、值和一組屬性所構成，而在 ES 5 中值可以用 一對方法取代，稱為 Getter & Setters，有時亦稱 accessor (存取 器) 特性。 https://jsfiddle.net/35Lb64ro/
12. Closure • 閉包中文意思是封閉包圍的範疇 • JS 中的變數 scope 分兩種區域與全域 • 區域屬於不看 {} ，而是取決於隸屬哪個 function • 因此若想在建構式中建立一個私有特性，可以藉由閉 包達成 • function Constructor() { var imPravite; this.getImPravite = function() { return imPravite; } }
13. jQuery • jQuery 是一套用於操作 DOM 的第三方套件，開發 者希望藉由 jQuery 降低使用者對 JavaScript 的學 習曲線，並藉由許多內建的工具，提供使用者快速創 建一個高互動性的網頁。 • jQuery 格言即 Write less, do more.
14. 使用 jQuery • 使用 CDN • 使用套件管理工具下載 • 直接去官網打包下載
15. Version • jQuery 目前主要有四個版本，其中兩個尚為開發中 的版本，因此我們主要使用以下兩種版本； – jQuery 1.x support IE 6+ – jQuery 2.x support IE 9+ • 版本除支援的瀏覽器版本不同外，其主要差異為功能 及語法上的擴充性。
16. jQuery 解決了哪些問題? • 跨瀏覽器的問題 • 冗長的 JavaScript 程式碼 • 提供特效供使用者套用 • 完全支援 CSS 3 的選擇器
17. Selector • jQuery 中可以用 $ 或是 jQuery 呼叫 選擇器。 – $(‘*’) or jQuery(‘*’) – $(‘#special-id’) – $(‘.special-class’) – $(‘a .special-class’)
18. Compare with Js • var $myClass = $(‘.myClass’); – 回傳 jQuery Obj or jQuery collection • var myClass = getElementsByClassName(‘myClass’) – 回傳 DOM 下的 elements
19. Filter • jQuery 提供一些過濾元素的選擇器如下； – :first 符合頁面第一個元素 – :last 符合頁面最後一個元素 – :even 偶數 – :odd 奇數 – :eq(n) 第 n 個元素 – :gt(n) 第 n 個元素後，不含 n 本身 – :lt(n) 第 n 個元素前，不含 n 本身 • li a:first – 所有清單下的第一個超連結
20. Filter • 過濾器還有很多例如； • 子過濾器 • 表單 • 內容 • 以上過濾器部分依照 css 規範實作，部分為 jQuery 自定 • 請自行上 jQuery 官網進行學習。
21. 透過 jQuery 動態建立元素 • $(‘<img>’, { • src: ‘path’, • alt: ‘一張圖’, • click: function() { alert($(this).attr(‘alt’)); }).appendTo(‘body’);
22. jQuery 物件提供的方法 • get([]index]) – 設定索引後回傳 DOM 或 DOM 陣列 • first() – 取第一個元素，回傳 jQuery 物件 • last() - 方法同上，差異僅取最後一個元素。 • toArray() – 將 jQuery 轉為 DOM array
23. 練習一 • 帳號密碼檢查 • 帳號不可為空，安全性須符合: – 至少包含一個大寫字 – 至少包含一個特殊字元 – 必須為數字、字母、特殊字元的 8 位數組 合 – 長度不可超過 20 – 帳號不可同密碼
24. 練習二 • 星座生肖轉換 • 輸入一個生日顯示星座及生肖 – 每月以 30 日為設計，不必考慮潤年 • 輸入可由選紐或輸入框。 • 輸出需顯示星座圖、生肖名稱。
25. 作業一 • 地址選擇器 • 要有縣市、鄉鎮、街道
26. 作業 二 • 相簿瀏覽器，至少有 5 張照片 • 主區塊用於顯示照片全景預覽 • 副區塊用於顯示所有的預覽縮圖 • 游標到縮圖時，主區塊變更為該照片 • 點擊後主區塊變更為該圖 • 游標移出縮圖時，主區塊變更為原圖