Lab Google Presentation

1. Upload a sample Powerpoint to Google docs.
2. Publish this slide presentation so that it is viewable by the general public.
3. Start your presentation.
4. Invite the person sitting next to you to join your presentation.
5. You are supposed to take the control of the presentation. When you change the slides, your audience should be able to see the slide changed at the same time.
----------------------------------------------------------------------------------
我的位置:http://docs.google.com/Presentation?id=dhqxc3h6_1fbm9593k

Lab Drag-and-Drop by AJAX

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "drag-and-drop" example.
3. Use this method to control movie playing as in the previous lab.
4. If you drag and drop the photo to the "play" area, the movie plays.
5. If you drap and drop the photo to the "pause" area, the movie pauses.
--------------------------------------------------------------------------
1.先至Constraints--->drag-and-drop
2.將drag-and-drop程式碼複製貼至Video
3.至Basics--->Images,將程式碼複製貼至於Video
4.並與已貼上的drag-and-drop程式碼於Video,一並改寫之.


5.影片成功顯示出來,將圖片拉至Play即播放

影片成功顯示出來,將圖片拉至Stop即停止.

期末報告題目

從 Laszlo (Laszlo in 10 minutes)，挑選一個範例進行個人研究，說明你為什麼挑選這個範例，這個範例讓你學到什麼概念，請你製作一個講義說明這個範例。

[canvas]
[!-- An url that reads submitted form data --]
[!-- and echoes it back in a response --]
[dataset name="echoer" src="http:echoxml.jsp"/] ------>為表單的來源
[window x="10" y="10" ] ------>視窗的位置
[form id="ex1" bgcolor="0xAAB5C8" ] ------>表單的名字和顏色
[submit name="submitter" data="${echoer}"/] ------>按鈕的名稱

[statictext fontstyle="bold" ]
天氣概況
[/statictext]
[combobox width="175" editable="false" ------->選單的寬度
defaulttext="請選擇地區" ] ------->選單內容
[textlistitem text="台北地區" /]
[textlistitem text="新竹地區"/]
[textlistitem text="苗栗地區" /]
[textlistitem text="台中地區" /]
[textlistitem text="彰化地區" /]
[textlistitem text="雲林地區" /]
[textlistitem text="嘉義地區" /]
[textlistitem text="台南地區" /]
[textlistitem text="高雄地區" /]
[textlistitem text="屏東地區" /]
[textlistitem text="宜蘭地區" /]
[textlistitem text="花蓮地區" /]
[textlistitem text="台東地區" /]
[textlistitem text="金門" /]
[textlistitem text="馬祖" /]
[textlistitem text="澎湖" /]
[/combobox]

[statictext fontstyle="bold" >
您想查詢的日期是？
[/statictext]
[radiogroup x="25" name="definition"] --------->點選的位置和名稱
[radiobutton value="1"] --------->第一個選項
2007/12/30
[/radiobutton]
[radiobutton value="2"] --------->第二個選項
2007/12/31
[/radiobutton]
[radiobutton value="3"] --------->第三個選項
2007/1/1
[/radiobutton]
[/radiogroup]


[button text="Submit" isdefault="true"
onclick="parent.submitter.submit()" /]
[/form]

[view name="congrats" datapath="echoer:/response" ------->物件的名稱和資料
bgcolor="0xAAB5C8" ------->底色
width="100%" height="100%" ]
[text text="寒冷" fontstyle="bold"
y="80" align="center" /]
[text text="請多穿保暖衣物"
y="103" align="center" /]
[/view]
[/window]
[/canvas]

圖示：
程式碼1.


程式碼2.


成功顯示出來


點選進入後


PS.程式碼的"["皆為"<"，同理"]"皆為">"

這個程式碼很常在網路被使用，例如問卷調查＼月薪選項等，剛開始會所以一直覺得很難，摸索了很久，也出現了許多次"error"的畫面，從以前救很佩服那些會撰寫程式的人，真沒想到我也有學會的一天，很有成就感。

Lab Drag-and-Drop by AJAX

1. . Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "drag-and-drop" example.
3. Use this method to control music playing of the song "Where to begin".
4. Add the song to the program.
5. Change the photo to the CD title.
6. If you drag and drop the photo to the "play" area, the music plays.
7. If you drap and drop the photo to the "pause" area, the music pauses.
------------------------------------------------------------------------------
1.下載Laszlo
2.至Laszlo in 10 minutes觀看教學
3.至Laszlo in 10 minutes--->Basics--->Video更改程式
canvas係畫布,button係按鈕
故[canvas]
[button x="120" y="200" onclick="movie.setAttribute('play',false)"]pause[/button]
[button y="200" onclick="movie.setAttribute('play',true)"]resume[/button]
[view id="movie" resource="http:jfk.swf"]
[/view]

如圖所示:


<解釋>:1.x="120" y="200"係指按鈕之距離, onclick係只按下去的動作, movie是自己設定的名稱. setAttribute係設定屬性,設定屬性後要括號,裡面寫指令;如'play',false(即表示點它影片及停止)
2.button係只按鈕,可將其命名;如本題設定命名為pause(暫停)以及resume(重新播放)
3.view id係指自己所命名之名稱;如本題命名為movie,resource係只影片來源
<進階>若想要把該影片用框框圍住,可在一開始時輸入[window x="座標" y="座標" width="寬度"
height="長度">,並在最後打上[/window],即可.
如圖所示:

PS.因此網頁顯示會錯亂,故本題程式之[]皆表示為().

Homework 12-10-2007

1. List three ways of creating interactive webpages.
（1.）Nvu

NVU 是一套同樣以 Mozilla 為核心的網頁編輯器 (就像市面上常見的 FrontPage 或Dreamweaver 等等網頁編輯程式)，承襲了 Mozilla 的特色， NVU 是一套開放源碼(Open Source)、 跨平台(Cross Platform)、免費的程式。NVU
（2.）CGI
在觀賞網頁時,瀏覽器會和 Web 主機上的 Http server 建立一個連線,但是Http server 不是去抓檔案,而是去啟動一個 CGI 程式, 然後將 CGI 程式所產生的內容當成 HTML 傳回給使用者瀏覽器.CGI介紹
（3.）Greasemonkey
GreaseMonkey是網頁瀏覽器Mozilla Firefox的一個附加元件。它讓使用者安裝一些腳本使大部分HTML為主的網頁於使用者端直接改變得更方便易用。維基百科
2. Lab DOM and Javascript.
3. Reading Assignments:AJAX by Jeremy Keith

Lab DOM and JavaScript

1. Open NVu
2. Based on the code as in http://www.scottandrew.com/weblog/articles/dom_4 ,
write a code to generate the table of 9*9 products. (九九乘法表)

Hint: The javascript code should be enclosed by script tags.
----------------------------------------------------------------
1.打開Nvu
2.打開上述網址,將最下面的程式碼複製並貼於Nvu
如圖所示


3.將裡面部份程式改為
分別將for (i = 0; i < 3; i++){ 裡的3消去
改為for (i = 0; i <10 ;i++){
分別將for (j = 0; j < 3; j++){ 裡的3消去
改為for (j = 0; j <10 ; j++){
分別將textVal = "Cell" + i + "_" + j 裡的"Cell"+ 消去
改為textVal = i + "*" + j + " = " + i*j
如圖所示


4.儲存於桌面,並將該網頁用firefox開啟即可.

Lab Create Img using DOM

1. Open Nvu
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Use window.onload to load the image.
4. Use a button to load the image. Try how onclick works.

Hint: The javascript code should be enclosed by script tags.
Reference: DOM (Document Object Model)
-------------------------------------------------
1.打開Nvu
2.插入--->表單--->定義按鈕--->自行定義名稱

3.將DOM (Document Object Model)裡的程式碼輸入
圖片如下


4.儲存於桌面
5.將上步驟儲存的網頁於Firefox開啟,即可.


點按鈕即可出現圖片

多按幾下會多出現圖片

lab 19: XSLT Part II

1. Register and Download Xray, an XML, XSLT editor and processor.
下載Xray
2. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results
打開上述網頁,將三部份的XSLT分別複製至Xray,並儲存之.








use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.

3. View the formatted HTML file.
打開file--->New XSLT Transform--->XML Document選擇第一個檔案
XSLT Program選擇第三個檔案,即可轉換成HTML.

4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings
打開file--->New HTML View,即可出現頁面.

compute the team standings in a table.
5. View the formatted HTML file.

lab 20: XSLT Part III

1. Given the RSS of Yam News, write an XSLT file
and use Xray to generate an HTML that contains the titles of items in the RSS.
用IE開啟Yam News
(1)檢視--->原始檔--->編輯--->全選--->複製--->貼至XRay,並存檔.

(2)將lab19的XSLT開啟,貼至XRay,並存檔.

(3)於上步驟所開的XSLT,將裡面的內容改變,對照new檔,選擇自己所要的內容.

2. View the formatted HTML file.
(1)開啟XRay的file--->New XSLT Transform--->XML Document選擇剛儲存的new檔
XSLT Program選擇剛儲存的weather檔


(2)再開啟file--->New HTML View--->於Window選擇Transform19,即會出現頁面.

lab 18: Lab XML & XSLT

1. Register and Download Xray, an XML, XSLT editor and processor.
先下載Xray
2. Given the the XML file and XSLT file ,
use Xray to do the transformation of the XML into HTML.
You have to replace [ with <.
開啟XRay,將XML複製貼至XRay,並將[改成<
再將XSLT複製貼至XRay,並將[改成<
將該檔案儲存至桌面,並在XRay打開New XSLT Transform,在XML Document選擇剛儲存的檔案,在XSLT
Program選擇Document8,即可出現HTML網址.





3. View the formatted HTML file.
選擇File--->New HTML View,在Window處選擇Transform13,即可出現該畫面.