麻辣家族討論版版 - Powered by Discuz! Board

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

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

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

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

取用表單元件
如果，我們有一個網頁，其文件內容如下：

<HTML>
<HEAD>
<TITLE>表單</TITLE>
</HEAD>
<BODY>
<form name="oneform">
<input type="button" value="按鈕" name="mybutton">
</form>
<form name="twoform">
<input type="text" name="mymeno" size="20">
</form>
</BODY>
</HTML>

複製代碼

在這個網頁中，我們分別建立了兩個表單：「oneform」與「twoform」，「oneform」表單中含有一個按鈕元件「mybutton」，而「twoform」表單中含有一個單行文字輸入方塊元件「mymeno」。
[attach]679[/attach]

假設，我們現在要取回單行文字輸入方塊元件「mymeno」中所輸入的資料，那我們的程式敘述該如何寫？我們之前說過：document物件指的就是網頁文件本身，因此，在網頁中的任何元件就都是document物件的一部份。而表單呢？表單是一群元件的集合，所以當我們要取用document物件中的一個元件就仍得透過表單。好了，我們現在知道文字輸入方塊元件「mymeno」是隸屬於表單「twoform」集合的一員，而表單又只是document物件的一部份，因此要存取單行文字輸入方塊元件「mymeno」中的資料，我們就必須這樣：「我要存取document中twoform表單的mymeno單行文字輸入方塊元件內的資料」，若利用JavaScript程式是敘述來表示，則如下式：

document.twoform.mymeno.value

複製代碼

網頁.表單名.表單元件名.資料(值)

複製代碼

實作學習：
在網頁中佈置一表單按鈕與單行文字輸入方塊元件(同一表單集合)，在單行文字輸入方塊中輸入資料並按下表單按鈕後，即將單行文字輸入方塊中的資料顯示於訊息對話視窗中。

<HTML>
<HEAD>
<TITLE>表單</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function showwindow()
{
alert(document.oneform.mymeno.value)
}
</script>
<form name="oneform">
<input type="button" value="按鈕" name="mybutton" onClick="showwindow()">
<input type="text" name="mymeno" size="20">
</form>
</BODY>
</HTML>

複製代碼

[attach]680[/attach]

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

文字方塊應用
在表單全部的元件裡，單行文字輸入方塊是最經常也最容易使用到的元件，尤其是利用JavaScript建立動態效果時，因為它讓JavaScript能快速而輕易的收集瀏覽者所傳遞的資料，而當我們需要將資料輸出於網頁中更是方便，當然，以document.write()方法也可將資料輸出至網頁中，但是，document.write()方法只能輸出『固定資料』，一但完成輸出動作就無法再做變更，如果要動態性的將資料輸出至網頁中就必須利用單行文字輸入方塊來放置變動性的資料，例如，我們要在網頁中放置一個小時鐘，當我們以document.write()方法輸出時間資料至網頁時，你將會發現網頁中只會出現一次時間資料：
[attach]681[/attach]

<HTML>
<HEAD><TITLE>小時鐘</TITLE></HEAD>
<SCRIPT Language="JavaScript">
//取得現在時間函式
function statclock()
{
now = new Date();
hours = now.getHours()
minutes = now.getMinutes()
seconds = now.getSeconds()
timeValue = (hours >= 12) ? "下午 " : "上午 "
timeValue += ((hours > 12) ? hours - 12 : hours) + " 點"
timeValue += ((minutes < 10) ? " 0" : " ") + minutes + " 分"
timeValue += ((seconds < 10) ? " 0" : " ") + seconds + " 秒"
}
//小時鐘函式
function clocktxt()
{
statclock()
//將時間字串資料顯示於網頁中
document.write(timeValue)
//重複執行小時鐘函式
setTimeout("clocktxt()", 1000)
}
</SCRIPT>
<BODY onLoad="clocktxt()">
</BODY>
</HTML>

複製代碼

我們在網頁開始載入時（程式碼第28行），利用OnLoad事件來呼叫小時鐘函式clocktxt()函式(程式碼第18行)，進而於clocktxt()函式中再呼叫statclock()函式(程式碼第20行)取回時間資料，接著將資料輸出於網頁中（程式碼第22行），此時，時間資料第一次成功的輸出於網頁中。
時間資料第一次成功的輸出於網頁中後，接著程式執行setTimeout()方法，重複執行呼叫小時鐘函式clocktxt()函式以便顯示動態的時間，clocktxt()函式再次呼叫statclock()函式(程式碼第20行)取回時間資料，接著要將資料輸出於網頁中時出問題了：
[attach]682[/attach]

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

實作學習：
利用「單行文字輸入方塊」製作網頁中的小時鐘。

<HTML>
<HEAD><TITLE>小時鐘</TITLE></HEAD>
<SCRIPT Language="JavaScript">
//顯示時間於文字方塊中的函式
function Show()
{
Digital=new Date()
hours=Digital.getHours()
minutes=Digital.getMinutes()
seconds=Digital.getSeconds()
if (minutes<=9)
{
minutes="0"+minutes
}
if (seconds<=9)
{
seconds="0"+seconds
}
//在文字方塊內顯示時間
document.Tick.Clock.value=hours+":"+minutes+":"+seconds
setTimeout("Show()",1000)
}
</script>
<BODY onLoad="Show()">
<form name="Tick">
<input type="text" size="12" name="Clock">
</form>
</BODY>
</HTML>

複製代碼

[attach]683[/attach]

程式碼第27至29行，我們在網頁主體(BODY)內，建立了一個表單「Tick」，而在表單內又佈置了一個單行文字方塊元件「Clock」用來放置時間資料，所以，當我們要將資料放入文字方塊元件時必須使用下列格式敘述：
1. document.Tick.Clock.value=”資料”
複製代碼
程式碼第7行，利用new建構子建立時間日期物件now()。
程式碼第8行，利用時間日期物件的getHours()方法擷取時間「小時」。
程式碼第9行，利用時間日期物件的getMinutes()方法擷取時間「小時」。
程式碼第10行，利用時間日期物件的getSeconds()方法擷取時間「小時」。
程式碼第12行，為了顯示"兩位數"的「分」鐘時間,所以,若取得的「分」鐘時間數值小於等於9則在前方加上"0"。
程式碼第16行，為了顯示"兩位數"的「秒」時間,所以,如果取得的「秒」時間數值小於等於9則在前方加上"0"。
在網頁開始載入時（程式碼第25行），利用OnLoad事件來呼叫小時鐘函式Show()函式(程式碼第5行)，取回時間資料，接著將資料輸出於網頁中的單行文字方塊元件「Clock」（程式碼第21行），此時，時間資料第一次成功的輸出於網頁中。
時間資料第一次成功的輸出於單行文字方塊元件「Clock」後，接著程式執行setTimeout()方法，重複執行呼叫小時鐘函式Show()以便於單行文字方塊元件「Clock」中顯示動態的時間。

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

進階應用：
利用「單行文字輸入方塊」製作網頁中的跑馬燈。

<HTML>
<HEAD><TITLE>跑馬燈</TITLE></HEAD>
<SCRIPT Language="JavaScript">
//將出現的訊息文字字串
msg="這是一個簡易的狀態列跑馬燈"
//預設開始顯示的字串長度
txt=0
//跑馬燈函式
function pagetxt()
{
//顯示指定長度的訊息字串
document.scrollForm.scrollTxt.value = msg.substring(0, txt+1)
//將顯示的文字長度加1
txt=txt+1
//當完整的訊息文字顯示完畢後
//再重新開始逐字加入顯示
if ( txt >= msg.length )
{ txt=0 }
//重複執行函式
setTimeout("pagetxt()", 200)
}
</SCRIPT>
<BODY onLoad="pagetxt()">
<form name="scrollForm">
<input type="text" size="30" name="scrollTxt">
</form>
</BODY>
</HTML>

複製代碼

程式碼第26至28行，我們在網頁主體(BODY)內，建立了一個表單「scrollForm」，而在表單內又佈置了一個單行文字方塊元件「scrollTxt」用來放置時間資料，所以，當我們要將資料放入文字方塊元件時必須使用下列敘述：
1. document.scrollForm.scrollTxt.value=”資料”
複製代碼
程式碼第12行，.substring(begin,end)：擷取起始與結束數值間的文字。
程式碼第17行，msg.length代表取得變數msg的字元長度。
在網頁開始載入時（程式碼第24行），利用OnLoad事件來呼叫跑馬燈函式pagetxt()函式(程式碼第9行)，接著將資料輸出於網頁中的單行文字方塊元件「scrollTxt」（程式碼第12行）。

[attach]685[/attach]

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

文字式拉把遊戲
[attach]686[/attach]
利用單行文字方塊與亂數製作拉把遊戲。

<HTML>
<HEAD><TITLE>文字式拉把遊戲</TITLE></HEAD>
<BODY>
<SCRIPT language="JavaScript">
var count=0
var left,center,right
var delaytime=30
function gamestart(){
var timeA
count++
if(count<11)
{left = parseInt(9 * Math.random()+1)}
if(count<21)
{center = parseInt(9 * Math.random()+1)}
if(count==21 && left==center){
delaytime=100;
document.go.message.value = "Go,Go,Go..........！"}
if(count<delaytime)
{right = parseInt(9 * Math.random()+1)}
document.go.Ltext.value = left
document.go.Mtext.value = center
document.go.Rtext.value = right
if (count==delaytime)
{
if (left==center&&left==right)
{
alert("恭喜您中獎啦！")
}
else
{
alert("差一點，再加油！")
}
count=0
delaytime=31;
document.go.message.value ="請按開始按鈕啟動遊戲"
}
else{timeA = setTimeout("gamestart()",100)}
}
</SCRIPT>
<FORM name=go>
<center>
<TABLE border=0>
<TR>
<TD><INPUT name=Ltext size=2 value=0 > </TD>
<TD><INPUT name=Mtext size=2 value=0> </TD>
<TD><INPUT name=Rtext size=2 value=0> </TD>
</TABLE>
<INPUT name=message size=20 value=請按開始按鈕啟動遊戲><br>
<INPUT name=game onclick=gamestart() type=button value=開始> </center>
</FORM>
</BODY>
</HTML>

複製代碼

[attach]687[/attach]

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

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