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」文字方塊元件中。
下拉式選單應用
下拉式選單是表單元件的一種,我們只要利用<select name=”名稱”>HTML標籤就可以把它建立出來,但這只是一個空殼,下拉式選單還必須包含選單項目,要建立選單項目必須使用<option>HTML標籤來建立:
  1. <HTML>
  2. <HEAD><TITLE>下拉式選單</TITLE></HEAD>
  3. <BODY>
  4. <form ="myform">
  5.   <select name="myselect">
  6.   <option value="http://www.twbts.com">麻辣學園</option>
  7.   <option value="http://dgr.twbts.com">築夢學園</option>
  8.   <option value="http://office.twbts.com">office學園</option>
  9.   </select>
  10. </form>
  11. </BODY>
  12. </HTML>
基本的下拉式選單是由一個「文字方塊」與一個「下拉按鈕」所組合而成,在文字方塊中會顯示我們第一個利用<option>HTML標籤建立出來的資料項目,在我們沒有按下「下拉按鈕」之前,我們只能看到這第一個利用<option>HTML標籤建立出來的資料項目。當我們拉下清單列表,點選其中的資料項目,以上例來說:假設點選「office學園」,結果被點選資料項目就會出現在上面的欄位中。

下拉式選單中的項目是採陣列集合方式,所以,每個資料項目就是一個陣列元素,而這個陣列名稱就叫做「options」。

在上例中,我們建立了一個表單:「myform」,「myform」表單中含有一個下拉式選單元件「myselect」,假設,我們現在要取回下拉式選單元件「myselect」中資料項目的值,那我們的程式敘述該如何寫?我們知道一個下拉式選單元件「myselect」是隸屬於表單「myform」的成員,而表單又只是document物件的一部份,因此要存取下拉式選單元件「myselect」中的資料,我們就必須這樣:「我要存取document中myform表單的myselect下拉式選單元件內編號為x的項目資料」,若利用JavaScript程式是敘述來表示,則如下式:
  1. document.myform.myselect.options[x].value
  1. 網頁.表單名.下拉式選單名.項目[編號].資料(值)
當我們拉下清單列表,點選其中的資料項目時,下拉式選單將會用「selectedIndex」屬性來記錄被選取資料項目的「編號」,以上例來說:假設點選第三個資料項目「office學園」,結果被點選資料項目就會出現在上面的欄位中,此時,「selectedIndex」屬性所記錄的編號就是「2」!

實作學習:
用下拉式選單設計一個網站快選功能程式。
  1. <HTML>
  2. <HEAD><TITLE>網站快選</TITLE></HEAD>
  3. <BODY>
  4. <SCRIPT Language="JavaScript">
  5. //切換網址
  6. function changeurl() 
  7. {
  8. window.location=
  9. document.myform.myselect.options
  10. [document.myform.myselect.selectedIndex].value
  11. </SCRIPT>
  12. <form name="myform">
  13.   <select name="myselect" OnChange="changeurl()">
  14.   <option value="http://www.twbts.com">麻辣學園</option>
  15.   <option value="http://dgr.twbts.com">築夢學園</option>
  16.   <option value="http://office.twbts.com">office學園</option>
  17.   </select>
  18. </form>
  19. </BODY>
  20. </HTML> 
當我們拉下清單列表,點選其中的資料項目時,將會引發一個「OnChange」事件,也就是說:當下拉選單上方的文字方塊內容改變時就是「OnChange」事件被觸發之時。在上例中,我們就是利用「OnChange」事件被觸發時呼叫changeurl()函式來改變瀏覽器目前的連結位址(原始碼第12行)。


「this」關鍵字
當我們使用到網頁中的表單元件時,像上一實作學習中:「document.myform.myselect.selectedIndex」,為了取得被選取項的索引編號,洋洋灑灑的寫了一長段,不但打的手酸,程式碼也拖的相當長,如果我們將實作學習上一中的函式捨去,直接將程式敘述寫在「OnChange」事件中可能會短一些:
  1. <HTML>
  2. <HEAD><TITLE>網站快選</TITLE></HEAD>
  3. <BODY>
  4. <form name="myform">
  5.   <select name="myselect" OnChange=
  6. "window.location=document.myform.myselect.options
  7. [document.myform.myselect.selectedIndex].value">
  8.   <option value="http://www.twbts.com">麻辣學園</option>
  9.   <option value="http://dgr.twbts.com">築夢學園</option>
  10.   <option value="http://office.twbts.com">office學園</option>
  11.   </select>
  12. </form>
  13. </BODY>
  14. </HTML>
問題是:敘述還是拖的很長ㄚ!所以,要使程式碼短一些、少打點字,我們就可以使用『this』關鍵字。

『this』關鍵字可以替代元件本身的名字,像在上一實作學習中「document.myform.myselect.selectedIndex」這段,就可以寫成「this.myform.myselect.selectedIndex」,好像沒什麼用嘛!但是,若直接將程式敘述寫在「OnChange」事件中,那『this』關鍵字可就好用了!因為我們程式敘述是在表單中的<select>內執行的,因此,我們原先撰寫的「document.myform.myselect」就可以用『this』關鍵字來取代:
  1. <HTML>
  2. <HEAD><TITLE>網站快選</TITLE></HEAD>
  3. <BODY>
  4. <form name="myform">
  5.   <select name="myselect" OnChange="window.location=this.options
  6. [this.selectedIndex].value">
  7.   <option value="http://www.twbts.com">麻辣學園</option>
  8.   <option value="http://dgr.twbts.com">築夢學園</option>
  9.   <option value="http://office.twbts.com">office學園</option>
  10.   </select>
  11. </form>
  12. </BODY>
  13. </HTML>
複製代碼
實作學習:
利用下拉式選單配合『this』關鍵字設計一個更換網頁背景色程式。
  1. <HTML>
  2. <HEAD><TITLE>更換背景色</TITLE></HEAD>
  3. <BODY>
  4. <form>
  5. <select OnChange=
  6. "document.bgColor=this.options[this.selectedIndex].value">
  7.   <option value="feefcc">粉黃</option>
  8.   <option value="ffd2cc">粉橘</option>
  9.   <option value="c7fedd">粉綠</option>
  10.   </select>
  11. </form>
  12. </BODY>
  13. </HTML>

沒有留言:

張貼留言