用JavaScript腳本實(shí)現(xiàn)Web頁面信息交互

要實(shí)現(xiàn)動(dòng)態(tài)交互，必須掌握有關(guān)窗體對象(Form)和框架對象(Frames)更為復(fù)雜的知識。

一、窗體基礎(chǔ)知識

窗體對象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動(dòng)態(tài)改變Web文檔的行為。

１、什么是窗體對象

窗體（Form）:它構(gòu)成了Web頁面的基本元素。通常一個(gè)Web頁面有一個(gè)窗體或幾個(gè)窗體，使用Forms[]數(shù)組來實(shí)現(xiàn)不同窗體的訪問。

<form Name=Form1>

<INPUT type=text...>

<Input type=text...>

<Inpup byne=text...>

</form>

<form Name=Form2>

<INPUT type=text...>

<Input type=text...>

</form>

在Forms[0]中共有三個(gè)基本元素，而Forms[1]中只有兩個(gè)元素。

窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：

<Form

Name ="表的名稱"

Target ="指定信息的提交窗口"

action ="接收窗體程序?qū)��?yīng)的URL"

Method =信息數(shù)據(jù)傳送方式(get/post)

enctype ="窗體編碼方式"

[onsubmit ="JavaScript代碼"]>

</Form>

２、窗體對象的方法

窗體對象的方法只有一個(gè)--submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式：

document.mytest.submit()

３、窗體對象的屬性

窗體對象中的屬性主要包括以下：elements name action target encoding method.

除Elements外，其它幾個(gè)均反映了窗體中標(biāo)識中相應(yīng)屬性的狀態(tài)，這通常是單個(gè)窗體標(biāo)識；而elements常常是多個(gè)窗體元素值的數(shù)組，例：

elements[0].Mytable.elements[1]

４、訪問窗體對象

在JavaScript中訪問窗體對象可由兩種方法實(shí)現(xiàn)：

（１）通過訪問窗體

在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標(biāo)識訪問窗體如：document.Mytable()。

（２）通過數(shù)組來訪問窗體

除了使用窗體名來訪問窗體外，還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點(diǎn)，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由0到n。所以可通過下列格式實(shí)現(xiàn)窗體對象的訪問：

document.forms[0]

document.forms[1]

document.forms[2]...

５、引用窗體的先決條件

在JavaScript中要對窗體引用的條件是：必須先在頁面中用標(biāo)識創(chuàng)建窗體，并將定義窗體部分放在引用之前。
二、窗體中的基本元素

窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。

在JavaScript中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個(gè)元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:

formName.elements[].methadName (窗體名.元素名或數(shù)組.方法)

formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)

下面分別介紹：

１、Text單行單列輸入元素

功能：對Text標(biāo)識中的元素實(shí)施有效的控制。

基本屬性：

Name：設(shè)定提交信息時(shí)的信息名稱。對應(yīng)于HTML文檔中的Name。

Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

defaultvalue：包括Text元素的默認(rèn)值

基本方法：

blur()：將當(dāng)前焦點(diǎn)移到后臺。

select()：加亮文字。

主要事件：

onFocus：當(dāng)Text獲得焦點(diǎn)時(shí)，產(chǎn)生該事件。]

OnBlur：從元素失去焦點(diǎn)時(shí)，產(chǎn)生該事件。

Onselect：當(dāng)文字被加亮顯示后，產(chǎn)生該文件。

onchange：當(dāng)Text元素值改變時(shí)，產(chǎn)生該文件。

例：...

<Form name="test">

<input type="text" name="test" value="this is a javascript" >

</form>

...

<script language ="Javascirpt">

document.mytest.value="that is a Javascript";

document.mytest.select();

document.mytest.blur();

</script>


２、textarea多行多列輸入元素

功能：實(shí)施對Textarea中的元素進(jìn)行控制。

基本屬性

name：設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔Textarea的Name。

Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

Default value：元素的默認(rèn)值。

方法：

blur()：將輸入焦點(diǎn)失去

select()：將文字加亮后

事件：

onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件

onFocus:當(dāng)輸入獲得焦點(diǎn)后，產(chǎn)生該文件

Onchange:當(dāng)文字值改變時(shí)，產(chǎn)生該事件

Onselect:當(dāng)文字加亮后，產(chǎn)生該文件

３、Select選擇元素

功能：實(shí)施對滾動(dòng)選擇元素的控制。

屬性：

name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)文檔select中的name。

Length:對應(yīng)文檔select中的length

options:組成多個(gè)選項(xiàng)的數(shù)組

selectIndex;該下標(biāo)指明一個(gè)選項(xiàng)

select在中每一選項(xiàng)都含有以下屬性：

Text:選項(xiàng)對應(yīng)的文字

selected:指明當(dāng)前選項(xiàng)是否被選中

Index:指明當(dāng)前選項(xiàng)的位置

defaultselected:默認(rèn)選項(xiàng)

事件：

OnBlur：當(dāng)select選項(xiàng)失去焦點(diǎn)時(shí)，產(chǎn)生該文件。

onFocas:當(dāng)select獲得焦點(diǎn)時(shí)，產(chǎn)生該文件。

Onchange:選項(xiàng)狀態(tài)改變后，產(chǎn)生該事件。

４、Button按鈕

功能：實(shí)施對Button按鈕的控制。

屬性：

Name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)文檔中button的Name。

Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

方法：

click()該方法類似于一個(gè)按下的按鈕。

事件：

onclick當(dāng)單擊button按鈕時(shí)，產(chǎn)生該事件。

例 ：

<Form name="test">

<input type="button" name="testcall" onclick=tmyest()>

</form>

...

<script language="javascirpt">

document.elements[0].value="mytest"; //通過元素訪問

或

document.testcallvalue="mytest"; // 通過名字訪問

</script>

.....

５、checkbox檢查框

功能：實(shí)施對一個(gè)具有復(fù)選框中元素的控制。

屬性：

name:設(shè)定提交信息時(shí)的信息名稱。

Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。

Checked:該屬性指明框的狀態(tài)true/false.

defauitchecked:默認(rèn)狀態(tài)

方法：

click()該方法使得框的某一個(gè)項(xiàng)被選中。

事件：

onclick:當(dāng)框的選被選中時(shí)，產(chǎn)生該事件。

６、radio無線按鈕

功能：實(shí)施對一個(gè)具單選功能的無線按鈕控制。

屬性：

name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔中的radio的name相同

value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息，對應(yīng)HTML文檔中的radio的name。

length:單選按鈕中的按鈕數(shù)目。

defalechecked:默認(rèn)按鈕。

checked:指明選中還是沒有選中。

index:選中的按鈕的位置。

方法：

chick():選定一個(gè)按鈕。

事件：

onclick:單擊按鈕時(shí)，產(chǎn)生該事件。

７、hidden:隱藏

功能：實(shí)施對一個(gè)具有不顯示文字并能輸入字符的區(qū)域元素的控制。

屬性：

name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔的hidden中的Name。

Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息，對應(yīng)HTML文檔hidden中的value。

defaleitvalue:默認(rèn)值

８、Password口令

功能：實(shí)施對具有口令輸入的元素的控制。

屬性：

Name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔中password中的name。

Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息，對應(yīng)HTML文檔中password中的Value。

defaultvalu:默認(rèn)值

方法

select():加亮輸入口令域。

blur():使這丟失passward輸入焦點(diǎn)。

focus():獲得password輸入焦點(diǎn)。

９、submit提交元素

功能：實(shí)施對一個(gè)具有提交功能按鈕的控制。

屬性：

name:設(shè)定提交信息時(shí)的信息名稱，對應(yīng)HTML文檔中submit。

Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息，對應(yīng)HTML文檔中value。

方法

click()相當(dāng)于按下submit按鈕。

事件：

onclick()當(dāng)按下該按鈕時(shí)，產(chǎn)生該事件。

三、范例

下面我們演示通過點(diǎn)擊一個(gè)按鈕（red）來改變窗口顏色，點(diǎn)擊“調(diào)用動(dòng)態(tài)按鈕文檔”調(diào)用一個(gè)動(dòng)態(tài)按鈕文檔。

test8_1.htm

<html>

<head>

<Script Language="JavaScript">

//原來的顏色

document.bgColor="blue";

document.vlinkColor="white";

document.linkColor="yellow";

document.alinkcolor="red";

//動(dòng)態(tài)改變顏色

function changecolor(){

document.bgColor="red";

document.vlinkColor="blue";

document.linkColor="green";

document.alinkcolor="blue";

}

</script>

</HEAD>

<body bgColor="White" >

<A href="test8_2.htm"> 調(diào)用動(dòng)態(tài)按鈕文檔</a>

<form >

<Input type="button" Value="red" onClick="changecolor()">

</form>

</BODY>

</HTML>

動(dòng)態(tài)按鈕程序。

test8_2.htm

<HTML>

<HEAD>

</HEAD>

<p align="center"></p>

<div align="center"><center>

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="100%"><form name="form2" onSubmit="null">

<p><input type="submit" name="banner" VALUE="Submit"

onClick="alert('You have to put an \'action=[url]\' on the form

tag!!')"> <br>

<script language="JavaScript">

var id,pause=0,position=0;

function banner() {

// variables declaration

var i,k,msg=" 這里輸入你要的內(nèi)容";// increase msg

k=(30/msg.length)+1;

for(i=0;i<=k;i++) msg+=" "+msg;

// show it to the window

document.form2.banner.value=msg.substring(position,position-30);

// set new position

if(position++==msg.length) position=0;

// repeat at entered speed

id=setTimeout("banner()",60); }

// end -->

banner();

</script></p>

</form>

</td>

</tr>

</table>

</center></div>

<p></p>

<BODY>

<A href="test8_1.htm"> 返回</a>

</BODY>

</HTML