2007年12月31日 星期一

Lab Google Presentation

Result

Lab Drag-and-Drop by AJAX

改寫他所提供的範例,在DRAG的範例中有 寫STOP的功能˙修改這部分即可達成此效果。

期末報告:Drag And Drop


我所選的是 Drag And Drop 因為眾所週知的google 在她推出的igoogle中
就提供了類似的的拖曳功能,這樣的功能提供了高度的互動性及自由度`,所以我很感興趣。

以下為整段程式碼


分析如下
在一開始第3行的
simplelayout
所提供的一個類別 放在 之中可用來控制view中物件放置的格式,在這個例子中
axis="x" => 物件延著X軸放置
spacing="5" => 每個物件建個5個像素

接下來的4~14行是構成我們畫面上的wish與shopping兩個cart也就是下圖兩個黃色所標示的範圍



fgcolor="#FFFFFF"=>設定這個物件的前景色
bgcolor="#666699" =>設定這個物件的背景色
我們也可以發現這兩個cart中間有間隔就是前面simplelayout的效果。

接下來的16~32行就是整個Drag And Drop 最重要的部份。在這部分我們建立了我們要進行拖曳動作的物件以及一些相關處理他的作法
我們要進行拖曳的物件為norahjones.jpg這張圖,以resouce將他引入進來。
在第18,19行就是控制拖曳的方法

onmousedown="dragging.apply()" =>當滑鼠按下時,可以拖曳物件
onmouseup="dragging.remove(); stop() =>當滑鼠放開,拖曳的效果解除並stop

關於stop的動作在後面會有更詳細的設定。
dragstate 是她預設好用來控制drag相關動作的東西,再這邊還可加入一些相關的參數 去設定你要拖曳的範圍限制比如說控制它只能做水平或垂直的表現。或者更近一步限制他只能在某個範圍最小多少,最大到多少。

第23行到第31行中
描述的是當我們鬆開滑鼠物件要停止下來的一些相關設定,為了讓物件只能在我們指定的範圍停下來而做此設計
宣告一個 method取名為stop

this所指向的物件就是我們所拖曳的物件,this.x就是我們拖曳物件的x座標,當他超過某個wish的範圍直接將物件定位在25 ,26行所標示的位置(也就是wish所在的範圍)。反之定位在28,29行所描述的位置(
也就是cart所在的範圍)。

總結
在這個範例中我們可以學到基本畫面的佈局的設計方法(simplelayout),以及拖曳控制的方法(dragstate)。另外還有滑鼠事件的描述(onmouseup,onmousedown)













2007年12月17日 星期一

"Lab Movie Player by AJAX"

Homework 12-10-2007

1. List three ways of creating interactive webpages.
a.PHP
一種嵌入在Html中的語言 最早是 由Rasmus Lerdorf ,他用Perl寫了一些後端的程式,記錄有哪些人看過他的線上履歷表。慢慢地,一些網友對他所寫的程式碼產生興趣。於是,Rasmus Lerdorf就整理這些程式碼,包裝成一個叫作 Personal Home Page Tools基於個人的興趣,Rasmus Lerdorf又寫了一個腳本語言的核心引擎。然後,又加上了能處理HTML表單輸入的工具,稱作 “Form Interpreter”簡稱FI。在1995年完成的這個版本,當時稱作 “PHP FI”,也有人稱之為 ”PHP2”。
開發之後使用PHP的網站漸漸的增加


b.ASP
Active Server Pages
通過ASP我們可以結合HTML網頁、ASP指令和ActiveX元件建立動態、交互且高效的WEB伺服器應用程式。同時,ASP也支持VBScript和JScript等腳本語言,默認為VBScript。其中JScript是微軟公司的ECMAScript標準的實現,並且配合自己的需要做延伸

c.JavaScript
JavaScript是一種腳本語言,與ASP ,PHP不同之處在於他是在用戶端的瀏覽器執行 而非在SEVER端在發往伺服器執行之前不需經過編譯,而是將文本格式的字元代碼發送給伺服器由瀏覽器解釋執行。而且由於每次重新載入都會重新解譯,載入後,有些代碼會延遲至運行時才解譯,甚至會多次解譯,所以速度較慢

參考資料:
http://dyna.hcc.edu.tw/php/class1_1.htm
http://zh.wikipedia.org/w/index.php?title=Active_Server_Pages&variant=zh-tw
http://zh.wikipedia.org/w/index.php?title=JavaScript&variant=zh-tw

2.
九九乘法表

2007年12月10日 星期一

Lab DOM and JavaScript

Lab Create Img using DOM

按下SHOW之後 執行SCRIPT




執行之後會顯示出圖片

2007年12月9日 星期日

Homework 11-26-2007

1. Problem 1 & Problem 3 of Textbook on Page 55.

(1).解釋 Web 技術演進是要解決什麼樣的問題?

第一時期 web 以靜態的html為主無資料庫的存取
第二時期有了CGI的技術使用程序的觀念作資料的存取
伺服器開始可以將資料先作處理在呈現給user
第三時期服務以執行緒的方式來進行 提高了網頁的效率

從以上的來看 web的技術的演進為的是能夠 與user之間作互動 以及能夠以更高的效率提供服務

(2).程序(Process) 和執行緒(Thread) 對網站性能有什麼不同的影響?
Process 每當服務一位新的user 就要多一個process當user 很多的時候 會降低網站的速度
而Thread 則是以 (serivice/Deamon)的形式常駐 而以執行緒 來提供服務

2. What does a CGI output contain in the HTTP header? Hint: Such as Content-type

使用google 搜尋line coding
網只會變成如下
http://www.google.com.tw/search?hl=zh-TW&q=line+coding&btnG=Google+%E6%90%9C%E5%B0%8B&meta=

?之後 就是要傳遞給伺服器作處理的訊息

zh-TW 表示的是繁體中文
q 表示送出查詢的資料


3. If you want to upload an mp3 file, should you use the GET or POST method? Why?
應該使用POST,因為GET是直接將資訊附加在url上 最多只能到255個字元 有大小的限制
而POST則允許傳送大量的資料

Homework 12-3-2007

將listing 1 與 listing 2 合併


同樣的將listing 1 與 listing 3 結合 但是listing 3 必須修改過

原本的
select="count($matches[team[.=$this]/@score < team[.!=$this]/@score])"/>
修正為
select="count($matches[team[.=$this]/@score > team[.!=$this]/@score])"/>



2007年12月3日 星期一

lab 20: XSLT Part III

將改寫好的xslt程式 套用在 yam rss 的xml上

lab 18: Lab XML & XSLT

利用xray 將xml與xslt兩者轉換為html