2014年4月28日 星期一

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

===================================
CGI (Common Gateway Interface,共同閘道管制介面)不是一種語言,
而是一種象徵性的名稱。 
CGI程式可以用Perl、C++或是Visual Basic寫作而成。
CGI處處可見,留言板、聊天室與搜尋 引擎都是CGI程式可以寫成的。
CGI程式主要提供的是一種使用者與伺服器互動的一種管道。



Lab 20



程式碼:
<html>
<title>Lab 20</title>
<body>
<form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()">
<input name="q" type="text"  />
<input name="send" type="submit" value="search" />
</form>
</body>
<script>
function check()
{     var floatReg =/^([+-]?)[1-9]\d*(\.\d*)?,([+-]?)[1-9]\d*(\.\d*)?$/;
         if(!floatReg.test(f.q.value)){
           
                alert("Incorrect format!!!");
            f.q.value="";
            document.f.q.focus();
            return false;        
         }
}
</script>                      
</html>

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.

==============================

Search by Google:

程式碼:
<html>
<body>
<form name="f" action="http://google.com/search" method="get">
Search by Google: <input type="text" name="q" value="">
<input type="submit" value="Search">
</form>
</body>
</html>

Lab 18 change pictures

Do Lab 16 without using function calls.

==========================


<html>
<body>
<img onmouseover="this.src='http://i19.photobucket.com/albums/b158/shongle/CUTE%20PET/pipi08a.jpg'" onmouseout="this.src='http://www.modern-senior.com/wp-content/uploads/2013/12/number-1-sign.jpg'"
src="http://www.modern-senior.com/wp-content/uploads/2013/12/number-1-sign.jpg" width="304" height="228">
<script>
</script>
</body>
</html>

2014年4月14日 星期一

Lab 17 JavaScript

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

 =================================

Pet 001 Pet 002 Pet 003

<html>
 <body>
  <div id="Layer" style="display: none; position: absolute; z-index: 1;">
  </div>
  <span onmousemove="showPic('http://www.fotobeginner.com/wp-content/uploads/0017.jpg')" onmouseout="hidePic()">Pet 001</span>
  <p>
  <span onmousemove="showPic('http://ext.pimg.tw/littlething/1203403642.jpg')" onmouseout="hidePic()">Pet 002</span>
  <p>
  <span onmousemove="showPic('http://images2.gamme.com.tw/news/2013/02/1/o5qYn52ckKOVp6c.jpg')" onmouseout="hidePic()">Pet 003</span>
  <p>
  </body>
 <script>
  function hidePic(){
   document.getElementById("Layer").innerHTML = "";
   document.getElementById("Layer").style.display = "none";
  }
  function showPic(s){
   var x,y;
   x = event.clientX;
   y = event.clientY;
   document.getElementById("Layer").style.left = x;
   document.getElementById("Layer").style.top = y;
   document.getElementById("Layer").innerHTML = "<img src=\""+s+"\">";
   document.getElementById("Layer").style.display = "block";
  }
 </script>
</html>