F2E Training

講者介紹

Lesson 1 - 基本架構 (HTML)

• 投影片：語意與HTML
• 推薦參考資料：The Elements of Meaningful XHTML

Lesson 2 - 樣式之美 (CSS)

• 投影片：模組基礎與常用 CSS
• 上課大綱：JavaScript Basic
• 免費 Compass 桌面軟體（通用 MAC 與 Windows）- Scout
• Compass 試做 Auto Sprite 與 DataURI - 下載範例
• 用 setInterval 製作倒數計時

Lesson 3 - 賦予生命 (JavaScript)

• 上課大綱：JavaScript Basic
• 範例列表：
  • 用 on 綁定事件
  • 命名空間
  • 型別 - 物件 (JSON)
  • 型別 - 函式 (Function)
  • 型別 - 函式的 Closure
  • 邏輯判斷 - if… else if… else
  • 借錢給同事、單複利的計算

Lesson 4 - 合而為一 (Javacript 操控 HTML/CSS)

• 目標：深入了解 JavaScript，並利用前面所學、製作簡易動畫
• 上課大綱：JavaScript DOM / Event
• 本日實作：
  • Animation 實作
  • 刪除節點實作
• 範例列表：
  • 了解物件導向
  • 字串物件的操作
  • 陣列物件的操作
• Q & A
  • DOM 2 與 DOM 3 的差別
  • String 及 DOM 物件的 concat 方法該如何使用

Lesson 5 - YUI Fun

• 目標：開始使用 YUI。
• 投影片：Modularization & Loader
  • 了解 YUI 架構
  • 如何使用 YUI 官網
  • 活用 DOM 跟 Event 處理 Lesson 4 的議題
  • 使用 Y.Anim 製作動畫
• 課堂實作：
  • YUI Module
  • NodeList
  • Event - 綁定事件
  • Event - preventDefault 與 stopPropagation
  • 使用 Y.Get 取得 Flicrk 的照片
  • 使用 Y.jsonp 取得 Flickr 的照片

Lesson 6 - Injection

• 目標：使用 Fiddler、了解載入 <script/> 的數種方式及其優缺點