Board logo

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

作者: 小誌    時間: 2010-5-18 22:57     標題: (教學第20篇)網頁與表單 上篇

表單(Form)是一個集合名詞,表單內還有許多的元件,例如:按鈕、文字方塊…等等。

表單是網頁中的元件,在一個網頁中可以包含多個表單,而一個表單中又可以包含很多不同類型的表單元件,如果我們要取用網頁中某個表單元件,我們必須明確的出表單元件的名稱,正確的說法應該是:指出位於哪一個表單中的哪一個表單元件!元件的名稱?當我們在使用HTML標籤建立網頁元件時由Name屬性所決定的資料值就是它的名稱。


取用表單元件
如果,我們有一個網頁,其文件內容如下:
  1. <HTML>
  2. <HEAD>
  3. <TITLE>表單</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <form name="oneform">
  7. <input type="button" value="按鈕" name="mybutton">
  8. </form>

  9. <form name="twoform">
  10. <input type="text" name="mymeno" size="20">
  11. </form>
  12. </BODY>
  13. </HTML>
複製代碼
在這個網頁中,我們分別建立了兩個表單:「oneform」與「twoform」,「oneform」表單中含有一個按鈕元件「mybutton」,而「twoform」表單中含有一個單行文字輸入方塊元件「mymeno」。
[attach]679[/attach]


假設,我們現在要取回單行文字輸入方塊元件「mymeno」中所輸入的資料,那我們的程式敘述該如何寫?我們之前說過:document物件指的就是網頁文件本身,因此,在網頁中的任何元件就都是document物件的一部份。而表單呢?表單是一群元件的集合,所以當我們要取用document物件中的一個元件就仍得透過表單。好了,我們現在知道文字輸入方塊元件「mymeno」是隸屬於表單「twoform」集合的一員,而表單又只是document物件的一部份,因此要存取單行文字輸入方塊元件「mymeno」中的資料,我們就必須這樣:「我要存取document中twoform表單的mymeno單行文字輸入方塊元件內的資料」,若利用JavaScript程式是敘述來表示,則如下式:
  1. document.twoform.mymeno.value
複製代碼
  1. 網頁.表單名.表單元件名.資料(值)
複製代碼
實作學習:
在網頁中佈置一表單按鈕與單行文字輸入方塊元件(同一表單集合),在單行文字輸入方塊中輸入資料並按下表單按鈕後,即將單行文字輸入方塊中的資料顯示於訊息對話視窗中。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>表單</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT LANGUAGE="JavaScript">
  7. function showwindow()
  8. {
  9. alert(document.oneform.mymeno.value)
  10. }
  11. </script>
  12. <form name="oneform">
  13. <input type="button" value="按鈕" name="mybutton" onClick="showwindow()">
  14. <input type="text" name="mymeno" size="20">
  15. </form>
  16. </BODY>
  17. </HTML>
複製代碼
[attach]680[/attach]
作者: 小誌    時間: 2010-5-18 23:28

文字方塊應用
在表單全部的元件裡,單行文字輸入方塊是最經常也最容易使用到的元件,尤其是利用JavaScript建立動態效果時,因為它讓JavaScript能快速而輕易的收集瀏覽者所傳遞的資料,而當我們需要將資料輸出於網頁中更是方便,當然,以document.write()方法也可將資料輸出至網頁中,但是,document.write()方法只能輸出『固定資料』,一但完成輸出動作就無法再做變更,如果要動態性的將資料輸出至網頁中就必須利用單行文字輸入方塊來放置變動性的資料,例如,我們要在網頁中放置一個小時鐘,當我們以document.write()方法輸出時間資料至網頁時,你將會發現網頁中只會出現一次時間資料:
[attach]681[/attach]
  1. <HTML>
  2. <HEAD><TITLE>小時鐘</TITLE></HEAD>
  3. <SCRIPT Language="JavaScript">
  4. //取得現在時間函式
  5. function statclock()
  6. {
  7. now = new Date();
  8.     hours = now.getHours()
  9.     minutes = now.getMinutes()
  10.     seconds = now.getSeconds()
  11.     timeValue = (hours >= 12) ? "下午 " : "上午 "
  12.     timeValue += ((hours > 12) ? hours - 12 : hours) + " 點"
  13.     timeValue += ((minutes < 10) ? " 0" : " ") + minutes + " 分"
  14.     timeValue += ((seconds < 10) ? " 0" : " ") + seconds + " 秒"
  15. }

  16. //小時鐘函式
  17. function clocktxt()
  18. {
  19. statclock()
  20. //將時間字串資料顯示於網頁中
  21. document.write(timeValue)
  22. //重複執行小時鐘函式
  23. setTimeout("clocktxt()", 1000)
  24. }
  25. </SCRIPT>
  26. <!--網頁載入時即呼叫狀態列小時鐘函式-->
  27. <BODY onLoad="clocktxt()">
  28. </BODY>
  29. </HTML>
複製代碼

怎會這樣?「必須要有元件」?因為網頁的輸出一旦成型(完全載入),就不可以再利用document.write()方法輸出資料至網頁了,除非你資料輸出的目的地是一個可動態變更內容資料的元件,像是表單元件「單行文字輸入方塊」…等。

實作學習:
利用「單行文字輸入方塊」製作網頁中的小時鐘。
  1. <HTML>
  2. <HEAD><TITLE>小時鐘</TITLE></HEAD>
  3. <SCRIPT Language="JavaScript">
  4. //顯示時間於文字方塊中的函式
  5. function Show()
  6. {
  7. Digital=new Date()
  8. hours=Digital.getHours()
  9. minutes=Digital.getMinutes()
  10. seconds=Digital.getSeconds()

  11. if (minutes<=9)
  12. {
  13. minutes="0"+minutes
  14. }
  15. if (seconds<=9)
  16. {
  17. seconds="0"+seconds
  18. }
  19. //在文字方塊內顯示時間
  20. document.Tick.Clock.value=hours+":"+minutes+":"+seconds
  21. setTimeout("Show()",1000)
  22. }
  23. </script>
  24. <BODY onLoad="Show()">

  25. <form name="Tick">
  26. <input type="text" size="12" name="Clock">
  27. </form>

  28. </BODY>
  29. </HTML>
複製代碼
[attach]683[/attach]


作者: 小誌    時間: 2010-5-18 23:30

進階應用:
利用「單行文字輸入方塊」製作網頁中的跑馬燈。
  1. <HTML>
  2. <HEAD><TITLE>跑馬燈</TITLE></HEAD>
  3. <SCRIPT Language="JavaScript">
  4. //將出現的訊息文字字串
  5. msg="這是一個簡易的狀態列跑馬燈"
  6. //預設開始顯示的字串長度
  7. txt=0
  8. //跑馬燈函式
  9. function pagetxt()
  10. {
  11. //顯示指定長度的訊息字串
  12. document.scrollForm.scrollTxt.value = msg.substring(0, txt+1)
  13. //將顯示的文字長度加1
  14. txt=txt+1
  15. //當完整的訊息文字顯示完畢後
  16. //再重新開始逐字加入顯示
  17. if ( txt >= msg.length )
  18. { txt=0 }
  19. //重複執行函式
  20. setTimeout("pagetxt()", 200)
  21. }
  22. </SCRIPT>
  23. <!--網頁載入時即呼叫跑馬燈函式-->
  24. <BODY onLoad="pagetxt()">

  25. <form name="scrollForm">
  26. <input type="text" size="30" name="scrollTxt">
  27. </form>

  28. </BODY>
  29. </HTML>
複製代碼

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

文字式拉把遊戲
[attach]686[/attach]
利用單行文字方塊與亂數製作拉把遊戲。
  1. <HTML>
  2. <HEAD><TITLE>文字式拉把遊戲</TITLE></HEAD>
  3. <BODY>

  4. <SCRIPT language="JavaScript">
  5. var count=0
  6. var left,center,right
  7. var delaytime=30

  8. function gamestart(){
  9. var timeA
  10. count++
  11. if(count<11)
  12. {left = parseInt(9 * Math.random()+1)}

  13. if(count<21)
  14. {center = parseInt(9 * Math.random()+1)}

  15. if(count==21 && left==center){
  16. delaytime=100;
  17. document.go.message.value = "Go,Go,Go..........!"}

  18. if(count<delaytime)
  19. {right = parseInt(9 * Math.random()+1)}

  20. document.go.Ltext.value = left
  21. document.go.Mtext.value = center
  22. document.go.Rtext.value = right

  23. if (count==delaytime)
  24. {
  25. if (left==center&&left==right)
  26. {
  27. alert("恭喜您中獎啦!")
  28. }
  29. else
  30. {
  31. alert("差一點,再加油!")
  32. }
  33. count=0
  34. delaytime=31;
  35. document.go.message.value ="請按開始按鈕啟動遊戲"
  36. }
  37. else{timeA = setTimeout("gamestart()",100)}
  38. }

  39. </SCRIPT>

  40. <FORM name=go>
  41. <center>
  42. <TABLE border=0>
  43. <TR>
  44. <TD><INPUT name=Ltext size=2 value=0 > </TD>
  45. <TD><INPUT name=Mtext size=2 value=0> </TD>
  46. <TD><INPUT name=Rtext size=2 value=0> </TD>
  47. </TABLE>
  48. <INPUT name=message size=20 value=請按開始按鈕啟動遊戲><br>
  49. <INPUT name=game onclick=gamestart() type=button value=開始> </center>
  50. </FORM>

  51. </BODY>
  52. </HTML>
複製代碼
[attach]687[/attach]

亂數:Math.random()
Math.random()是一個JavaScript內建的亂數產生器,它是利用系統時間自由隨機產生介於0至1的亂數,也就說它可能產生的結果「無法預測」!




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