Lab 19 Lab Form and Action

Purpose of lab: Learn how to use Form to invoke a remote service through CGI.
 1. Take a look at the search box of this search page, inlcuding radio buttons, text input, and submit button.
2. Open your Notepad++.
3. Open a new empty HTML file.
4. Write a form that acts like this search page.
 5. In the form you write, set Action="http://google.com/search" and name of Form as "f" and method as "get" (See Hint if it does not work.)
6. Save your file on your computer.
7. Run your HTML by Chrome/Firefox. What do you get?
8. Set method as "post"
9. Run your HTML by Chrome/Firefox. What do you get? You can watch the Forms and Input in the Web Development Course at Udacity.

Lab 18 change pictures

Do Lab 16 without using function calls.

Lab 20 Hand code a form

Before you do this lab, you must understand what is CGI(Common Gateway Interface) and Form.
 1. So please search the answer and post your opinion in your blog.
2. Hand code a HTML 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. 3. If the input is not in the format of coordinates, display an error and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22

(講題預告) 網際網路應用系統設計: Request a server to do an action

網際網路應用系統設計: Request a server to do an action: Dynamic pages, content generated by server-side programs. CGI, Common Gateway Interface, for sending requests to server-side programs. ...

Lab 17 JavaScript

產生三個文字方塊，上面各寫1, 2, 3
這三個方塊上方可以顯現照片
當滑鼠置於文字1的時候，顯示照片A
當滑鼠置於文字2的時候，顯示照片B
當滑鼠置於文字3的時候，顯示照片C

Lab 16 Change an image by moving the mouse

1. Design a webpage to display picture A initially. 
2. Try to move the mouse. When the mouse is not within the area of the picture, picture A remains the same. When the mouse is within the area of the picture, display picture B in place.

You can use the photo in
 http://minstral.blogspot.tw/2013/06/blog-post.html 
for picture A and the photo in
 http://minstral.blogspot.tw/2013/05/blog-post_30.html 
for picture B.

Hint: You may find the example useful.
Hint: If you have a problem displaying a picture on the browser, you can check out the example.

Lab 15 九九乘法表

1. Open notepad++
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.

歡迎參加 4/17/2014座談: 服貿電信條款面面觀

無論你在哪個行業，開放電信都跟你有關係，基於學術專業與社會責任，數位包容與實踐講座系列訂於4/17(四) 7:00 ~ 8:30 pm舉辦服貿電信條款座談，歡迎各位一起前來關心討論。
中原大學電子系數位包容與實踐 座談
題目: 服貿電信條款面面觀
協辦單位: 中原大學 灼言社
與談人:
1. 涂世雄:中原電機系副教授 通訊所副教授 資訊安全專家 曾任中原大學電算中心主任
2. 劉宏煥:中原電子系助理教授 通訊所助理教授 消基會通訊傳播委員會 消基會服貿電信公聽會代表
3. 賴裕昆：中原電機系助理教授 美國北卡羅納大學電機系博士 網路交換系統專家
4. 張耀仁:中原電子系教授 通訊所教授 曾任中原大學電算中心主任 消基會通訊傳播委員會 蕃薯藤政府與事業電子化部門主管 IBM亞太區電子商務顧問 勞動部，研考會，經建會外部審查委員
其他教授專家學者陸續邀請中，請拭目以待
主持人:詹琪芬 小姐 主婦聯盟生活消費合作社講師
地點:中原大學 教學大樓 608 大教室
聽眾: 數位包容與實踐修課學生，有興趣的老師同學同仁，社區媽媽父親國高中生
費用: 免費，現場備有開飲機，請自備飲水杯
有興趣擔任與談的同仁，無論你支持開放或反對開放，都歡迎加入。

(講題預告) 網際網路應用系統設計: Handling HTML DOM events

網際網路應用系統設計: Handling HTML DOM events: Button example JavaScript events examples DOM, Document Object Model Document Object Model (DOM) examples

Lab 14 Create Image using DOM

1. Open notepad++
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.