JavaScript教程--從入門到精通(8)

javascript|教程

用JavaScript指令碼實現Web頁面資訊互動

　　要實現動態互動，必須掌握有關表單對象(Form)和架構對象(Frames)更為複雜的知識。

一、表單基礎知識
　　表單對象可以使設計人員能用表單中不同的元素與客戶機使用者相互動，而用不著在之前首先進行資料輸入，就可以實現動態改變Web文檔的行為。

１、什麼是表單對象
表單（Form）:它構成了Web頁面的基本元素。通常一個Web頁面有一個表單或幾個表單，使用Forms[]數組來實現不同表單的訪問。
<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]中共有三個基本元素，而Forms[1]中只有兩個元素。
　　表單對象最主要的功能就是能夠直接存取HTML文檔中的表單，它封裝了相關的HTML代碼：
<Form
Name ="表的名稱"
Target ="指定資訊的提交視窗"
action ="接收表單程式對應的URL"
Method =資訊資料傳送方式(get/post)
enctype ="表單編碼方式"
[onsubmit ="JavaScript代碼"]>
</Form>
　

２、表單對象的方法
　　表單對象的方法只有一個--submit()方法，該方法主要功用就是實現表單資訊的提交。如提交Mytest表單,則使用下列格式：
document.mytest.submit()
　
３、表單對象的屬性
　　表單對象中的屬性主要包括以下：elements name action target encoding method.
　　除Elements外，其它幾個均反映了表單中標識中相應屬性的狀態，這通常是單個表單標識；而elements常常是多個表單元素值的數組，例：
elements[0].Mytable.elements[1]
　
４、訪問表單對象
在JavaScript中訪問表單對象可由兩種方法實現：
（１）通過訪問表單
　　在表單對象的屬性中首先必須指定其表單名，而後就可以通過下列標識訪問表單如：document.Mytable()。
（２）通過數組來訪問表單
　　除了使用表單名來訪問表單外，還可以使用表單對象數組來訪問表單對象。但需要注意一點，因表單對象是由瀏覽器環境的提供的，而瀏覽器環境所提供的數組下標是由0到n。所以可通過下列格式實現表單對象的訪問：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用表單的先決條件
　　在JavaScript中要對表單引用的條件是：必須先在頁面中用標識建立表單，並將定義表單部分放在引用之前。

二、表單中的基本元素
表單中的基本元素由按鈕、選項按鈕、複選按鈕、提交按鈕、重設按鈕、文字框等組成。
在JavaScript中要訪問這些基本元素，必須通過對應特定的表單元素的數組下標或表單元素名來實現。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName (表單名.元素名或數組.方法)
formName.elemaent[].propertyName(表單名.元素名或數組.屬性)
　
下面分別介紹：
　
１、Text單行單列輸入元素
　功能：對Text標識中的元素實施有效控制。
　基本屬性：
Name：設定提交資訊時的資訊名稱。對應於HTML文檔中的Name。
Value：用以設定出現在視窗中對應HTML文檔中Value的資訊。
defaultvalue：包括Text元素的預設值
　基本方法：
blur()：將當前焦點移到後台。
select()：加亮文字。
　主要事件：
onFocus：當Text獲得焦點時，產生該事件。
OnBlur：從元素失去焦點時，產生該事件。
Onselect：當文字被加亮顯示後，產生該檔案。
onchange：當Text元素值改變時，產生該檔案。
例：...
<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多行多列輸入元素
　功能：實施對Textarea中的元素進行控制。
　基本屬性
name：設定提交資訊時的資訊名稱，對應HTML文檔Textarea的Name。
Value：用以設定出現在視窗中對應HTML文檔中Value的資訊。
Default value：元素的預設值。
　方法：
blur()：將輸入焦點失去
select()：將文字加亮後
　事件：
onBlur:當失去輸入焦點後產生該事件
onFocus:當輸入獲得焦點後，產生該檔案
Onchange:當文字值改變時，產生該事件
Onselect:當文字加亮後，產生該檔案
　
３、Select選擇元素
　功能：實施對滾動選擇元素的控制。
　屬性：
name:設定提交資訊時的資訊名稱，對應文檔select中的name。
Length:對應文檔select中的length
options:組成多個選項的數組
selectIndex;該下標指明一個選項
select在中每一選項都含有以下屬性：
Text:選項對應的文字
selected:指明當前選項是否被選中
Index:指明當前選項的位置
defaultselected:預設選項
　
　事件：
OnBlur：當select選項失去焦點時，產生該檔案。
onFocas:當select獲得焦點時，產生該檔案。
Onchange:選項狀態改變後，產生該事件。
　
４、Button按鈕
　功能：實施對Button按鈕的控制。
　屬性：
Name:設定提交資訊時的資訊名稱，對應文檔中button的Name。
Value:用以設定出現在視窗中對應HTML文檔中Value的資訊。
　方法：
click()該方法類似於一個按下的按鈕。
　事件：
onclick當單擊button按鈕時，產生該事件。
例 ：
<Form name="test">
<input type="button" name="testcall" onclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通過元素訪問
或
document.testcallvalue="mytest"; // 通過名字訪問
</script>
.....

　
５、checkbox檢查框
　功能：實施對一個具有複選框中元素的控制。
　屬性：
name:設定提交資訊時的資訊名稱。
Value:用以設定出現在視窗中對應HTML文檔中Value的資訊。
Checked:該屬性指明框的狀態true/false.
defauitchecked:預設狀態
　方法：
click()該方法使得框的某一個項被選中。
　事件：
onclick:當框的選被選中時，產生該事件。 　

６、radio無線按鈕
　功能：實施對一個具單選功能的無線按鈕控制。
　屬性：
name:設定提交資訊時的資訊名稱，對應HTML文檔中的radio的name相同
value:用以設定出現在視窗中對應HTML文檔中Value的資訊，對應HTML文檔中的radio的name。
length:選項按鈕中的按鈕數目。
defalechecked:預設按鈕。
checked:指明選中還是沒有選中。
index:選中的按鈕的位置。
　方法：
chick():選定一個按鈕。
　事件：
onclick:單擊按鈕時，產生該事件。
　
７、hidden:隱藏
　功能：實施對一個具有不顯示文字並能輸入字元的地區元素的控制。
　屬性：
name:設定提交資訊時的資訊名稱，對應HTML文檔的hidden中的Name。
Value:用以設定出現在視窗中對應HTML文檔中Value的資訊，對應HTML文檔hidden中的value。
defaleitvalue:預設值
　
８、Password口令
　功能：實施對具有口令輸入的元素的控制。
　屬性：
Name:設定提交資訊時的資訊名稱，對應HTML文檔中password中的name。
Value:用以設定出現在視窗中對應HTML文檔中Value的資訊，對應HTML文檔中password中的Value。
defaultvalu:預設值
　方法
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點。
focus():獲得password輸入焦點。
　
９、submit提交元素
　功能：實施對一個具有提交功能按鈕的控制。
　屬性：
name:設定提交資訊時的資訊名稱，對應HTML文檔中submit。
Value:用以設定出現在視窗中對應HTML文檔中Value的資訊，對應HTML文檔中value。
　方法
click()相當於按下submit按鈕。
　事件：
onclick()當按下該按鈕時，產生該事件。

三、範例
下面我們示範通過點擊一個按鈕（red）來改變視窗顏色，點擊“調用動態按鈕文檔”調用一個動態按鈕文檔。
test8_1.htm
<html>
<head>
<Script Language="JavaScript">
//原來的顏色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//動態改變顏色
function changecolor(){
document.bgColor="red";
document.vlinkColor="blue";
document.linkColor="green";
document.alinkcolor="blue";
}
</script>
</HEAD>
<body bgColor="White" >
<A href="test8_2.htm"> 調用動態按鈕文檔</a>
<form >
<Input type="button" Value="red" >
</form>
</BODY>
</HTML>

輸出結果見圖1所示。

圖1

動態按鈕程式。
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" >
<p><input type="submit" name="banner" VALUE="Submit"
> <br>
<script language="JavaScript">
var id,pause=0,position=0;
function banner() {
// variables declaration
var i,k,msg=" 這裡輸入你要的內容";// 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>

輸出結果見圖2所示。

圖2

　　本講介紹了使用JavaScript指令碼實現Web頁面資訊互動的方法。其中主要介紹了表單中的基本元素的主要功能和使用。