Board logo

標題: [教學] (教學第21篇)網頁與表單 中篇 [打印本頁]

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

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

文字鏈結是最方便的超鏈結方式,但有時候為了整體網頁的配置而無法完整地表示鏈結的目的地,這個時候我們可以設定一個表單文字欄位來作詳細的說明!
  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>
複製代碼

[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/)