yui library workshop (yahoo! course at ncu)

YUI Workshop

October 6, 2008

@ncu

Site-Builder Workshop

March 30, 2008

http://josephj.com/entry.php?id=61

Site-Builder Workshop

March 30, 2008

http://josephj.com/entry.php?id=61

YUI 練功房

- -

更新公告

本練功房最新設備

- -

更新公告

本練功房最新設備What’s New in 2.5.0

- -

2.5.0 增加了哪些元件？

- -


• Cookie 工具

- -


• Cookie 工具• Resize 工具

- -


• Cookie 工具• Resize 工具• ImageCropper 控制項

- -


• Cookie 工具• Resize 工具• ImageCropper 控制項• Layout Manger 控制項

- -


• Cookie 工具• Resize 工具• ImageCropper 控制項• Layout Manger 控制項• Uploader 控制項

- -


• Cookie 工具• Resize 工具• ImageCropper 控制項• Layout Manger 控制項• Uploader 控制項

Yahoo! 所使用的特效、未來 YUI 都會有！！

- -

新使用者？

練功安全守則

- -

新使用者？

練功安全守則Getting Start

- -

特別聲明

- -

特別聲明

• 很抱歉！本練功房無以下關卡

- -

特別聲明


• 想練習「打怪」者，請另尋高明

- -

特別聲明


• 想練習「打怪」者，請另尋高明

在主流的 OS 與 Browser，YUI 皆可正常運作

- -

守則一

請穿著正確服裝

- -

守則一

請穿著正確服裝DOCTYPE

- -

守則一：請穿著正確服裝

<!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">

http://www.w3.org/TR/html4/


- -


• 不使用 Quirks Mode、擁抱 Standard Mode




- -



–只要有 DOCTYPE 皆為 Standard Mode




- -



–只要有 DOCTYPE 皆為 Standard Mode

–但 DOCTYPE 前的空白、換行及文字皆應避免




- -

守則二

溫差過大易感冒

請採用洋蔥式穿法

- -

守則二


請採用洋蔥式穿法Layered Semantic Markup

- -

守則二


請採用洋蔥式穿法Layered Semantic Markup

Accessibility

- -

守則二：為避免天氣變化，請採用洋蔥式穿法

- -


• NoScript、上網頻寬少、安全性政策

- -


• NoScript、上網頻寬少、安全性政策• 結構、樣式、行為各自獨立

- -


• NoScript、上網頻寬少、安全性政策• 結構、樣式、行為各自獨立–HTML 負責結構

- -


• NoScript、上網頻寬少、安全性政策• 結構、樣式、行為各自獨立–HTML 負責結構– CSS 負責樣式

- -


• NoScript、上網頻寬少、安全性政策• 結構、樣式、行為各自獨立–HTML 負責結構– CSS 負責樣式– JavaScript 負責行為

- -



• YUI 所有元件的設計理念皆為如此

- -




正常情況下

- -




無 JavaScript

- -




無 CSS

- -




無 CSSYUI 幫開發者想、讓各位容易客製化

如果開發者也能幫使用者想、那世界就太平了

- -

守則三

預先瞭解關卡命名

- -

守則三

預先瞭解關卡命名JavaScript Object Notation（JSON）

- -

守則三：預先瞭解關卡命名

YAHOO.util.Connect

YAHOO.util.DataSource

YAHOO.util.Resize

YAHOO.widget.DataTable

YAHOO.widget.Uploader

YAHOO.widget.ImageCropper

- -


- -


• 預防與既存 JS 衝突，所以用了「命名空間」

- -



– 以 YAHOO.util 為開頭的，是無介面的「工具或函式類」

- -




– 以 YAHOO.widget 為開頭的，是有介面的「控制項」

- -





• 自己簡化： var YUE = YAHOO.util.Event;

- -





• 自己簡化： var YUE = YAHOO.util.Event;

• 自己做命名空間： var Awoo = { widget : {} } Awoo.widget.Car = function () { //…建構式的內容 }

- -

再看一次

YAHOO.util.Connect

YAHOO.util.DataSource

YAHOO.util.Resize

YAHOO.widget.Uploader

YAHOO.widget.DataTable

YAHOO.widget.ImageCropper

- -

守則四

安裝順風耳

- -

守則四

安裝順風耳Event Triggering

- -

守則四：安裝順風耳

YAHOO.util.Event.on(

formEl,

‘submit’,

onFormSubmit

);

- -


- -


• JavaScript 的原理是事件驅動

- -


• JavaScript 的原理是事件驅動–使用者做了某件事、才執行某個函式。

- -



• 監聽頁面上的所有 click 事件

- -




•YAHOO.util.Event.addListener(document, ‘click’, onDocumentClick);

- -





•addListener = on

- -





•addListener = on•不要再用標籤中的 onclick, onmouseover…


formEl,

‘submit’,

onFormSubmit

);

- -



formEl,

‘submit’,

onFormSubmit

);

- -


DOM 物件參考


formEl,

‘submit’,

onFormSubmit

);

- -


事件類型把 ‘on’ 拿掉


formEl,

‘submit’,

onFormSubmit

);

- -


自訂事件處理函式

- -

守則五

使用龍爪手

- -

守則五

使用龍爪手Access DOM Elements

- -

守則五：使用龍爪手

var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

(‘list-item’, ‘li’);

- -


- -


• JavaScript 取得物件的方法：

- -


• JavaScript 取得物件的方法：– document.getElementByName()

- -



– document.getElementById()

- -




– document.getElementsByTagName()

- -





• YUI 提供了更多方法：

- -





• YUI 提供了更多方法：– YAHOO.util.Dom .getElementsByClassName()

- -






– YAHOO.util.Dom.get()

- -






– YAHOO.util.Dom.get()

應避免使用

- -




var listItems =



- -




var listItems =



某標籤的 id

- -




var listItems =



限定 class

- -




var listItems =



限定節點名稱

- -

守則六

使用隱形斗蓬

- -

守則六

使用隱形斗蓬Using Anonymous Function

- -

守則六：使用隱形斗蓬

var YUE = YAHOO.util.Event;

YUE.on(linkEl,‘click’, function(e){

//事件函式內容

});

- -


- -


• 過去我們習慣這樣寫 function：function abc() {}

- -



function 在 JS 中也是一種物件，也有 Scope 的概念。

- -



• 但改為這樣寫會比較清楚：var abc = function () {}


- -



• 但改為這樣寫會比較清楚：var abc = function () {}

•僅使用一次時，連名字都不給：(function(){ //do something here…}())


- -


var YUE = YAHOO.util.Event;

YUE.on(linkEl,‘click’, function(e){

//事件函式內容

});

- -

守則七

隨時查閱闖關配備表

- -

守則七

隨時查閱闖關配備表JavaScript Library Dependency

- -

守則七：隨時查閱闖關配備表

到底該要引用那些函式庫哩？

- -


- -


• 幾乎每個元件都有互相關連性，新手很難上手。

- -



• 還好 2.5.1 出了對應表：

http://developer.yahoo.com/yui/articles/

hosting/#configure

http://developer.yahoo.com/yui/articles/hosting/




- -





hosting/#configure

- -





hosting/#configure

點選要用的元件

- -





hosting/#configure

點選要用的元件

你所需要的 Library 就會顯示在此

還有問題嗎？

要開始闖關囉！

yui library workshop (yahoo! course at ncu)

Technology