邀請你拍幾張深秋的美景或用文字描繪深秋之美，上傳到你的部落格與同學們分享。
due 11-4-2013
Hint:
2013年10月28日 星期一
Lab 18 Google Maps
Write a form to send a query to Google maps. 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
Hint:
see
form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"
in source code
Hint:
see
form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"
in source code
2013年10月24日 星期四
2013年10月21日 星期一
Homework 10-21-2013
1. 參考 Udacity 課程，撰寫一個網頁能夠自動檢查輸入的字串是否為整數(包含負整數)。
清大彭明輝教授 10/28（一）晚上 7:00~9:00 中原大學瑞麗堂 通識講座 「崩世代的困境與對策」
去聽演講者，持出席證明事後可以註銷缺席。
建議開發工具 notepad++
建議使用瀏覽器 Firefox/Chrome/IE/Safari
你可能需要的資訊 Regular expression
你可能需要的資訊 Regular expression
Due 10-28-2013 6:30 pm
公告
去聽演講者，持出席證明事後可以註銷缺席。
Lab 15 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
可參考 CGI程式入門
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
可參考 CGI程式入門
Lab 14 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. 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.
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. 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.
2013年10月17日 星期四
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.
Server
static page
Ex:
http://www.google.com/
dynamic page
Ex:
http://www.cna.com.tw/
URL that sends a request by CGI
Ex:
http://maps.google.com/maps?q=24.9586,+121.2411
Browser
HTML Form
Form examples
text field
check box
radio button
2013年10月14日 星期一
Homework 10-14-2013 (HW3)
產生三個文字方塊，上面各寫1, 2, 3
這三個方塊上方可以顯現照片
當滑鼠置於文字1的時候，顯示照片A
當滑鼠置於文字2的時候，顯示照片B
當滑鼠置於文字3的時候，顯示照片C
Due 10-21-2013 6:30 pm
這三個方塊上方可以顯現照片
當滑鼠置於文字1的時候，顯示照片A
當滑鼠置於文字2的時候，顯示照片B
當滑鼠置於文字3的時候，顯示照片C
Due 10-21-2013 6:30 pm
Lab 12 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.
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 11 九九乘法表
1. Open notepad++
2. Based on the code as in
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.
write a code to generate the table of 9*9 products. (九九乘法表)
Hint: The javascript code should be enclosed by script tags.
Lab 10 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.
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.
2013年10月13日 星期日
2013年10月7日 星期一
Lab 8 Using browsers for programming II
參考 Udacity 課程，撰寫一個網頁能夠自動檢查輸入的密碼，長度必須至少六個字元，且必須至少包含一個數字以及一個非英文字母的字元。
建議開發工具 notepad++
建議使用瀏覽器 Firefox/Chrome/IE/Safari
你可能需要的資訊 Regular expression
你可能需要的資訊 Regular expression
Lab 7 Using browsers for programming
參考 Udacity 課程，撰寫一個網頁能夠自動檢查輸入的密碼，長度必須至少六個大寫或小寫字元或數字。
建議開發工具 notepad++
建議使用瀏覽器 Firefox/Chrome/IE/Safari
你可能需要的資訊 Regular expression
你可能需要的資訊 Regular expression
2013年10月6日 星期日
訂閱：
文章 (Atom)