Homework 12-29-2006: Lab AJAX: Draggables

利用 silly easy shopping 的程式碼,寫出程式可以使圖片draggable,要確定javascript有寫進去.

原本圖片在左上角

用滑鼠拖曳,就可移動

Lab Drag-and-Drop by AJAX

修改圖檔變成CD封面的圖,並把mp3檔載入
設定圖在左邊時播放音樂,圖在右邊時停止

Lab Movie Player by AJAX

把scripting的圖檔和mp3檔,改成swf檔

Lab Wikepedia

1.mashup:(this definitions is for web application hybrid)

a website or web application that combines content from more than one source

2.Document Object Model:

s a description of how an html or XML document is represented in a tree structure.

3.orz:

失意體前屈，網路上流行的表情符號.

Lab DOM and JavaScript

用DOM model寫一個九九乘法表(從1*1到9*9)呈現結果

Lab Create Img using DOM

利用Nvu寫出DOM model

Part1:寫出一個網頁可以直接載入圖片
在head裡寫一個script 裡面再寫一個function並利用window.onload上載圖片

顯示結果

Part2:必須要onclick button才能看到圖片
在body中input一個button

只要按一下button就會出現一張圖片,按幾下就會出現幾張,因為每按一次就是append一次

Lab WYSWYG

在地圖上找到想要貼的地點,再Upload photo,並打上一些圖片的描述.
我是用梵蒂岡的聖彼得大教堂

之後任何使用著,只要點一下那個地方的小圓點,就會顯示那張圖片,及其描述.

Lab Personalization II

不但可以首頁的版面配置,還可以增加新的標籤,我增加了game和pictures.

Lab Personalization

google原本的版面配置利用網頁右上角的編輯此個人化的網頁,我把喜歡的體育和娛樂上移,並且把兩岸和焦點刪除

接著用新增自定區段,把日據加進來

Homework 12/08/2006

1 XSLT
NO.1:
把Listing 1存成XML file再把Listing 2 存成XSLT file and then use Xray transformation of the XML into HTML

左邊是HTML file,右邊是呈現的結果

NO.2:
利用NO.1的XML file再把Listing 3 存成XSLT file and then use Xray transformation of the XML into HTML

左邊是HTML file,右邊是呈現的結果

2DOM
DOM確實是網際網路一個很大的進步,通常是經由javascript控制元件,它可以讓使用者決定自己的版面,就是網頁個人化,不論是要把元件移位,或著是清除增加元件.

Lab Form and Action, Part II

編寫HTML並利用CGI建立一個表單 在表單中打入要搜尋的經緯度,我打的是42.9586, -76.5411

按下search會連接到Google Maps,這個經緯度大概是在美國紐約

Lab Form and Action

把程式碼寫入form action="http://google.com/search" method="post" name="f

發現可以搜尋

把 method="get"改成method="post"

不能搜尋了

Homework 11/24/2006

1.List another 5 ideas that you think would be useful. Why?
part1
(1)只要點到地圖上的任一城市,就有一個小人偶出來說明,那個城市的特點或著人文風情.
(2)點到哪一地區,就會出現說明,介紹當地的動植物.
(3)點即到哪,就會顯示那裡的四季的氣候型態.
以上都很適合用在教學,或者想更深入了解某個地方的人.
part2
(4)地圖上出現各個地區的氣象
(5)地圖上顯示出各地區的時間
有時候家裡有人出差,這就很方便.

2What are the XML files used in the request and response?
只要資料結構上能統一,XML files就具有自我定義的特性,不需預先設定特殊的格式和結構,使用上較容易,如此一來就方便資料上的交換.

3CGI
WWW伺服器與外部應用程式溝通的一個通訊協定,利用CGI,網站伺服器可以接受使用者的請求,再回應使用者.