-
目標：對於 HTML 有正確的觀念
-
投影片：語意與HTML
-
常用到的 HTML 樣板：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.1/build/cssreset/reset-min.css"> <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.1/build/cssfonts/fonts-min.css"> <script type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script> <style type="text/css"> </style> </head> <body class="yui-skin-sam"> <div id="foo"> </div> <script> YUI().use("node", function (Y) { }); </script> </body> </html>
- 目標：使用 CSS
- 投影片：模組基礎與常用 CSS
- 上課大綱：JavaScript Basic
- 免費 Compass 桌面軟體（通用 MAC 與 Windows）- Scout
- Compass 試做 Auto Sprite 與 DataURI - 下載範例
- 用 setInterval 製作倒數計時
- 目標：了解最常用的 JavaScript 基本
- 上課大綱：JavaScript Basic
- 範例列表：
- 目標：深入了解 JavaScript，並利用前面所學、製作簡易動畫
- 上課大綱：JavaScript DOM / Event
- 本日實作：
- 範例列表：
- Q & A
- 目標：開始使用 YUI。
- 投影片：Modularization & Loader
- 課堂實作：
- 目標：繼續使用 YUI 各式各樣的 Utilities 與 Widget，並結合外部資料、玩玩動畫！
- 資料來源：
- Q & A
- 課堂實作：
- 了解 Script Tag Hack
- 使用 Y.Get 取得 Flicrk 的照片 (範例結果)
- 更簡單的用法 JSONP - 使用 Y.jsonp 取得 Flickr 的照片 (範例結果)
- 使用 Y.Anim (範例結果)
- 使用 Y.Panel (範例結果)
- 回家功課：
- 利用今天教的 Y.Get.script() 取得外部網站得資料 (可使用 Flickr, 可透過 Pipe 或 YQL...)
- Ex - 知識+ 的 API
- 以 Y.YQL 取得 Flickr 的資料
- 以 Y.jsonp 取得 Yahoo! Pipes 所組合出來的 Flickr 資料
- 帥哥與正妹的 Y! Pipes
- JSON Feed 可以多加一個 "_callback" 的 GET 參數
- 帥哥 Feed
- 正妹 Feed
- 帥哥與正妹的 Y! Pipes
-
目標：使用 Fiddler、了解載入 <script/> 的數種方式及其優缺點
-
Fiddler - 除錯超好用的工具
請各位點選 http://josephj.com/training/f2e-training/sample/CustomRules.js 會看到一堆 JavaScript 打開 Fiddler 工具列的 Rules > Custom Rules... 把原本的內容另存新檔做備份 再以上面的連結的內容全部取代、儲存 順利的話就會聽到「搭搭」的音效（當然喇叭要打開） 然後你再去工具列的 Rules 就會看到 "Inject JavaScript." 的選項 點選後去 Reload 任意網頁，都會出現我們昨天那個得等很久的 JavaScript alert
-
-
<script/> 的擺放位置
- 在 </head> 前
- 所有 DOM 物件皆未產生，需要配合 load 或 domready 事件（或其他偵測的方式）。
- 因 JavaScript 有 Blocking 的行為，使用者得等到 JavaScript 下載完畢才能看到網頁內容。
- 在 </body> 前
- 所有 DOM 物件皆已經產生，不需要特別的處理即可存取。
- 所有的內容皆會在第一時間被看到。
- 在 </head> 前
-
在 </body> 到處都有的廣告 <script/> 為何討人厭？
-
參考文件：