2010年11月22日 星期一

Lab 32 DOM

1. Open KompoZer
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.
 

 

Lab 31 Create Image using DOM

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


開啟網頁後會自動顯示圖片

開啟網頁後點擊按鈕

出現啦!!!

其實也不是很難,很興奮的給他按了很多下

2010年11月8日 星期一

Lab 30 navigation bar

1. 進入你的部落格,登入,選擇自訂
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)


Lab 29 Hand code a form

Hand code a HTML or use KompoZer to edit an HTML so that the webpage can send a request to Google like
http://maps.google.com/maps?q=24.9586,+121.24114

Use Form CGI that includes action, input, and submit.
Try a few different coordinates.




Lab 28 Lab Form and Action

"logic will get you from A to B - imagination will take you anywhere"

How to use Form to invoke a remote service through CGI.

1. Copy the search box of this search page,
inlcuding radio buttons, text input, and submit button.


2. Open your KompoZer HTML editor.


3. Open a new empty HTML file.


4. Paste the search box into this new file.

5. Use KompoZer to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.

6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)


7. Save your file on your computer. Run your HTML by Firefox. What do you get?


  • 當method設定為get時,按下google搜尋,會跳到搜尋頁面。

8. Set method as "post"

9. Run your HTML by Firefox. What do you get?




  •  當method設定為post時,按下google搜尋,不會跳到搜尋頁面。

2010年11月1日 星期一

Lab 27 Mash-Up 4 (Calendars)

建立你的行事曆,並與學校行事曆合併
Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>
進入後按右下角+Google日曆即可訂閱

Lab 26 Mash-up 3 (Blogs)

部落格與相本的結合運用。透過部落格分享你的照片集,省去傳送大量照片的缺點,自由書寫照片中的故事。

Create a slide show of your album. Embed the album in your blog.