Board logo

標題: [教學] (教學第21篇)網頁與表單 中篇 [打印本頁]
作者: 小誌    時間: 2010-5-18 23:44     標題: (教學第21篇)網頁與表單 中篇

項目導覽說明
[attach]688[/attach]

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

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

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

  34. <BODY>

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

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

  43. </BODY>
  44. </HTML>
複製代碼

[attach]689[/attach]
作者: 小誌    時間: 2010-5-18 23:51

下拉式選單應用
下拉式選單是表單元件的一種，我們只要利用<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>
複製代碼
[attach]690[/attach]

基本的下拉式選單是由一個「文字方塊」與一個「下拉按鈕」所組合而成，在文字方塊中會顯示我們第一個利用<option>HTML標籤建立出來的資料項目，在我們沒有按下「下拉按鈕」之前，我們只能看到這第一個利用<option>HTML標籤建立出來的資料項目。

當我們拉下清單列表，點選其中的資料項目，以上例來說：假設點選「office學園」，結果被點選資料項目就會出現在上面的欄位中，如下圖：
[attach]691[/attach]

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

在上例中，我們建立了一個表單：「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. }
  12. </SCRIPT>
  13. <form name="myform">
  14.   <select name="myselect" OnChange="changeurl()">
  15.   <option value="http://www.twbts.com">麻辣學園</option>
  16.   <option value="http://dgr.twbts.com">築夢學園</option>
  17.   <option value="http://office.twbts.com">office學園</option>
  18.   </select>
  19. </form>
  20. </BODY>
  21. </HTML>
複製代碼
[attach]693[/attach]

當我們拉下清單列表，點選其中的資料項目時，將會引發一個「OnChange」事件，也就是說：當下拉選單上方的文字方塊內容改變時就是「OnChange」事件被觸發之時。在上例中，我們就是利用「OnChange」事件被觸發時呼叫changeurl()函式來改變瀏覽器目前的連結位址（原始碼第12行）。
作者: 小誌    時間: 2010-5-18 23:54

「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>
複製代碼
[attach]694[/attach]



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)