3/10 交大講 YUI（一）

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

相關標籤：

關於作者 - JosephJ

D-Link 友訊科技工程師。喜好戶外運動、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

前一篇：3/5 「科技、開放、雅虎」@ 中山資管後一篇：台大校園徵才說明會

Comments

bobwei 2009-04-28 23:25:40

你好:
我是清大的學生，今天在找資料的時候偶然發現了這個blog，看到上面交大講YUI的簡報，還蠻有興趣的，裡面有一頁Yahoo Course課程表，上面有蠻多課程的，也都很想去上，請問那個是在哪邊開課？我可以去聽嗎?謝謝!!
josephj 2009-03-13 19:28:47

地圖的問題一直沒辦法解決
因為它的 YUI 版本太舊、會跟現有的衝突

Debugging 的方式
我建議你在開發的時候可以用 YUI Debug 的完整版、配合 YUI Logger
另外 JavaScript 目前最好用的除錯工具應該非 FireBug 莫屬，我下堂課會提一下
你可以先看：http://getfirebug.com/docs.html
路人 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的新手來說不知道錯在哪裡耶，哭哭...
宜斌 2009-03-12 19:03:55

謝謝! 我會加油!
josephj 2009-03-12 14:33:13

知識+ 的 API 在此：
http://tw.developer.yahoo.com/knowledge/api.php
範例在此：
http://josephj.com/prototype/kplus-api/demo.html

請適當地發揮巧思囉！
宜斌 2009-03-12 12:21:41

關於作業請教知識+的資料如何抓下來? 有範例可以學嗎?
josephj 2009-03-12 10:21:37

Keynote 是 Mac 上的簡報程式，基本上是用目錄的形態
所以用到的照片與影片等多媒體內容都會在目錄中

如果你不是用 Mac 的話，請下載 PDF
宜斌 2009-03-12 09:03:17

能否說明 Keynote 裡面的資料的用途? 謝謝!

暱稱：必填。

Email：非必填。若填寫為不公開欄位，僅供站長參考聯繫。

內容：必填。限 255 個字元以內。

送出

Facebook Comment

聯絡我 RSS Feed