2019年5月16日 星期四

(21)網頁與表單 下篇

在網頁中設置表單的用意,不外乎是收集瀏覽者所給予的資訊,然後對這些瀏覽者所給予的資訊加以處理,而處理這些資訊的後端程式通常是CGI、ASP,當表單資料送交網頁的後端程式處理時,若有表單資料空白或內容錯誤,常常會導致後端程式執行錯誤,或許你會說:在後端程式中加入檢驗資料正確性的程式敘述來判斷不就行了!當然,這是一個方法,但你必須明白,所謂的後端程式是在伺服器(server)上執行,如果我們的網站很受歡迎,則頻寬流量將相當大,光是網頁的讀取就使伺服器(server)的負擔非常大,如果還要伺服器端負責檢驗表單資料的正確性,那伺服器的執行效率就更低了!

為了減少伺服器不必要的效能損失,我們可以利用JavaScript程式在客戶端(client),也就是瀏覽者的瀏覽器中,進行表單內容正確性的驗證,而不需要將表單內容正確性的驗證工作交由伺服端來處理,避免造成伺服器的負擔。


onSubmit事件
在我們表單資料被傳送或送交伺服器端之前(get/post),我們可以利用『onSubmit』事件處理器來呼叫我們驗證表單資料內容的JavaScript函式。請注意:『onSubmit』事件處理器是專門為表單資料被傳送或送交伺服器端之前的確認動作而設計!

下列是表單網頁中的部分敘述,裡面有一個表單,該表單含有三個單行文字方塊元件及兩個按鈕元件:
  1. <form name="myform" method="POST" action="後端CGI處理程式" onSubmit="return test(this)">
  2. <table border="0" width="500" height="220">
  3. <tr>
  4. <td width="457">姓名:<input type="text" name="name" size="24"></td>
  5. </tr>
  6. <tr>
  7. <td width="457">E-Mail:<input type="text" name="email" size="23"></td>
  8. </tr>
  9. <tr>
  10. <td width="457">住址:<input type="text" name="address" size="56"></td>
  11. </tr>
  12. <tr>
  13. <td width="457">
  14. <input type="submit" value="送出" name="B1">
  15. <input type="reset" value="重填" name="B2">
  16. </td>
  17. </tr>
  18. </table>
  19. </form>
原始碼(第4、7、10行)為單行文字方塊元件;原始碼(第14、15行)為按鈕元件,「name」屬性皆有設定呦。

2019年5月9日 星期四

(20)網頁與表單 中篇

項目導覽說明
文字鏈結是最方便的超鏈結方式,但有時候為了整體網頁的配置而無法完整地表示鏈結的目的地,這個時候我們可以設定一個表單文字欄位來作詳細的說明!
  1. <HTML>
  2. <HEAD><TITLE>項目導覽說明</TITLE></HEAD>

  3. <SCRIPT LANGUAGE="JavaScript">
  4. var mcount = -2
  5. var speed = 100  //移動時間,越大速度越慢
  6. timeID=setTimeout('',1)
  7. msg = new Array(2) 
  8. //2代表有幾個說明項目,請自行加減,配合下面的msg[x]變數陣列使用
  9. msg[1] = "                       程式設計教學" 
  10. //空格請依顯示欄位的大小自行調整
  11. msg[2] = "                       網頁設計教學"

  12. //滑鼠指標移入超鏈結時
  13. function inside(num)
  14. {
  15. n=num
  16. document.MYFORM.ANS.value = 
  17. msg[n].substring(mcount=mcount+2,msg[n].length+2)
  18. if (mcount>msg[n].length)
  19. {mcount=-2}
  20. clearTimeout(timeID);
  21. timeID = setTimeout('inside(n)',speed)
  22. }
  23. //滑鼠指標移出超鏈結時
  24. function outside()
  25. {
  26. clearTimeout(timeID)
  27. mcount = -2
  28. document.MYFORM.ANS.value = "移至鏈結文字看說明"
  29. }
  30. </SCRIPT>

  31. <BODY>

  32. <FORM NAME="MYFORM">
  33. <input type="text" name="ANS" size="20" value="移至鏈結文字看說明">
  34. </FORM> 

  35. <a href="http://www.twbts.com/" onMouseOver="inside(2)" onMouseOut="outside()">麻辣學園</a><BR>
  36. <a href="http://dgr.twbts.com/" onMouseOver="inside(1)" onMouseOut="outside()">築夢學園</a>

  37. </BODY>
  38. </HTML>
  • 程式碼第35至37行,我們在網頁主體(BODY)內,建立了一個表單「MYFORM」,而在表單內又佈置了一個單行文字方塊元件「ANS」,用來放置項目導覽說明的資料,所以,當我們要將資料放入文字方塊元件時必須使用下列敘述:document.MYFORM.ANS.value=”資料”。
  • 在文字鏈結中我們都使用了兩個滑鼠事件,onMouseOver與onMouseOut,當滑鼠指標進入超鏈結時觸發onMouseOver事件,onMouseOver事件會呼叫inside()函式,而在「ANS」文字方塊元件中做出超鏈結項目說明的跑馬燈效果;當滑鼠指標移出超鏈結時觸發onMouseOut事件,onMouseout事件會呼叫outside()函式,而在「ANS」文字方塊元件中顯示預設文字。
  • 在呼叫inside()函式時,必須給予參數,此參數的目的在於取出相對應於該參數之變數陣列「msg」中的陣列元素資料,同時將該陣列元素資料輸出於「ANS」文字方塊元件中。