3/10 交大講 YUI(一)

此篇文章最近更新時間為2009-03-11 07:03:53 目前共有8篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

其實跟前幾場學校講 YUI 的內容大同小異,只把內容放上來,讓學生們好找。

下載 PDF:http://josephj.com/presentation/josephj-yui-nctu.pdf
下載 Keynote:http://josephj.com/presentation/josephj-yui-nctu.zip

如果想要學 CSS 可以參考 W3Schools CSS Tutorials,或買 最新詳解 JavaScript & HTML & CSS 語法辭典

這次的上課有個意外的發現,YUI Grid Builder 支援了 Accessiblity 的選項,更多內容可以看:More Accessible YUI Grids Layouts with ARIA Landmark Roles

回家作業:以課堂上 YUI Get 抓 Flickr 的範例為基礎,完全以 JavaScript 取得知識+上的資料(不侷限於知識+,只要是有支援 JSON 的 API 皆可、非 Yahoo! 的也歡迎)

助教的問題:
像知識+或斷章取義這種API,和我們自己寫的網頁是在不同domain下面
所以是不是不能用AJAX的技術來access呀?那要怎麼存取這些服務呢?
回答:
你知道的, AJAX  的全名是 Asynchronous JAvaScript XMLHttpRequest. 
是透過 XMLHttpRequest 去達成資料傳遞的. 所以會有安全性的限制, 
你不能單純用這樣的方式去跟不同網域取得資料. 通常得透過 PHP 做 cURL 把遠端的資料先拉回來再用 AJAX, 
這不是我要的

而 YUI Get 是透過一個叫 Script Tag Hack 的方式取得資料. 
譬如你引用一個不同網域的 JavaScript, YUI 函式庫: 
<script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
想想看, 如果我把這個 JavaScript 的內容換成是資料?
var data = new Array();
data[0] = 'xxx';
請問我是不是就可以取得遠端的資料了呢?
當天我們 flickr 的例子背後就是這樣的原理, 
YUI Get 動態產生了  的 tag, 
實際的內容則是 jsonFlickrApi(資料物件). 
所以我們可以預先定義 function jsonFlickrApi() {} 這個 function, 
只要 response 回來就會執行組頁面的動作了

Yahoo! Search 的範例
N 年前的 Tech Talk:請參考 Remote Scripting


Comments

  1. bobwei 2009-04-28 23:25:40
    你好:
    我是清大的學生,今天在找資料的時候偶然發現了這個blog,看到上面交大講YUI的簡報,還蠻有興趣的,裡面有一頁Yahoo Course課程表,上面有蠻多課程的,也都很想去上,請問那個是在哪邊開課?我可以去聽嗎?謝謝!!
  2. josephj 2009-03-13 19:28:47
    地圖的問題一直沒辦法解決
    因為它的 YUI 版本太舊、會跟現有的衝突

    Debugging 的方式
    我建議你在開發的時候可以用 YUI Debug 的完整版、配合 YUI Logger
    另外 JavaScript 目前最好用的除錯工具應該非 FireBug 莫屬,我下堂課會提一下
    你可以先看:http://getfirebug.com/docs.html
  3. 路人 2009-03-13 02:17:27
    這次作業我有用到 map 和 contextmenu,
    遇到一個很奇怪的問題,
    用到onContentReady,
    會出現錯誤"YAHOO.util.Event.onContentReady is not a function",
    因為其實code也還沒寫什麼,
    所以我就一行行去測引入的js檔,
    我發現把引入map API那行去掉,
    就沒這個問題了@@,
    但是這樣就產生不了map啦XD...

    請問在用YUI時有推薦的開發or debug工具嗎?
    目前的經驗出現錯誤的都是引入的js檔,
    但是對於YUI的新手來說不知道錯在哪裡耶,哭哭...
  4. 宜斌 2009-03-12 19:03:55
    謝謝! 我會加油!
  5. josephj 2009-03-12 14:33:13
    知識+ 的 API 在此:
    http://tw.developer.yahoo.com/knowledge/api.php
    範例在此:
    http://josephj.com/prototype/kplus-api/demo.html

    請適當地發揮巧思囉!
  6. 宜斌 2009-03-12 12:21:41
    關於作業 請教 知識+的資料如何 抓下來? 有範例可以學嗎?
  7. josephj 2009-03-12 10:21:37
    Keynote 是 Mac 上的簡報程式,基本上是用目錄的形態
    所以用到的照片與影片等多媒體內容都會在目錄中

    如果你不是用 Mac 的話,請下載 PDF
  8. 宜斌 2009-03-12 09:03:17
    能否說明 Keynote 裡面的資料 的用途? 謝謝!
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment