Site-Builder Workshop课件.pptVIP

Site-Builder Workshop March 30, 2008 Site-Builder Workshop March 30, 2008 更新公告 2.5.0 增加了哪些元件？ Cookie 工具 Resize 工具 ImageCropper 控制項 Layout Manger 控制項 Uploader 控制項 新使用者？ 練功安全守則 特別聲明 很抱歉！本練功房無以下關卡 想練習「打怪」者，請另尋高明 守則一 請穿著正確服裝 守則一：請穿著正確服裝 不使用 Quirks Mode、擁抱 Standard Mode 只要有 DOCTYPE 皆為 Standard Mode 但 DOCTYPE 前的空白、換行及文字皆應避免 守則二 溫差過大易感冒請採用洋蔥式穿法 守則二：為避免天氣變化，請採用洋蔥式穿法 NoScript、上網頻寬少、安全性政策 結構、樣式、行為各自獨立 HTML 負責結構 CSS 負責樣式 JavaScript 負責行為 YUI 所有元件的設計理念皆為如此 守則三 預先瞭解關卡命名 守則三：預先瞭解關卡命名 守則三：預先瞭解關卡命名 預防與既存 JS 衝突，所以用了「命名空間」 以 YAHOO.util 為開頭的，表示是沒有介面的「工具或函式類」 以 YAHOO.widget 為開頭的，表示是有介面的「控制項」 自己簡化： var YUE = YAHOO.util.Event; 自己做命名空間： var Awoo = { widget : {} } Awoo.widget.Car = function () { //…建構式的內容 } 再看一次 守則四 安裝順風耳 守則四：安裝順風耳 守則四：安裝順風耳 JavaScript 的原理是事件驅動 使用者做了某件事、才執行某個函式。 監聽頁面上的所有 click 事件 YAHOO.util.Event.addListener(document, ‘click’, onDocumentClick); addListener = on 不要再用標籤中的 onclick, onmouseover… 守則四：安裝順風耳 守則五 使用龍爪手 守則五：使用龍爪手 守則五：使用龍爪手 JavaScript 取得物件的方法： document.getElementByName() document.getElementById() document.getElementsByTagName() YUI 提供了更多方法： YAHOO.util.Dom .getElementsByClassName() YAHOO.util.Dom.get() 守則五：使用龍爪手 守則六 守則六：使用隱形斗蓬 守則六：使用隱形斗蓬 過去我們習慣這樣寫 function：function abc() {} 但改為這樣寫會比較清楚：var abc = function () {} 僅使用一次時，連名字都不給：(function(){ //do something here…}()) 守則六：使用隱形斗蓬 守則七 守則七：隨時查閱闖關配備表 守則七：隨時查閱闖關配備表 幾乎每個元件都有互相關連性，新手很難上手。 還好 2.5.1 出了對應表：/yui/articles/hosting/#configure 主題 認識關主 第一關：YAHOO.widget.Uploader 第二關：YAHOO.widget.DataTable 第三關：YAHOO.widget.ImageCropper 還有問題嗎？要開始闖關囉！ - - 酷搜天王：Rex - - 熊的爆發力：Bear - - 長跑鐵人：Awoo 歹勢，前面兩位同事… 投影片是我做的， 所以只有我換帥氣的照片。 josephj@ /entry.php?id=64 /entry.php?id=64 /entry.php?id=61 YUI 練功房 - - 本練功房最新設備 What’s New In 2.5.1 - - Yahoo! 所使用的特效、未來 YUI 都會有！！ - - Getting Start - - 在主流的 OS 與 Browser，YUI 皆可正常運作 - - DOCTYPE - - !DOCTYPE HTML PUBLIC -// W3C//DTD HTML 4.01//EN  /TR/html4/ strict.dtd - - Layered Semantic Markup Accessibility - - 正常情況下 無 JavaScript 無 CSS YUI 幫開發者想、讓各位容易客製化如