JavaScript初級教程(第五課)第1/4頁

現在你已經瞭解了電腦編程的基本知識。我們接下來繼續研究一下文件物件模型（Document Object Model－DOM）。DOM的點擊關係起始於視窗對象在每個視窗對象中是一個文檔對象（Document object）。我們將重點談談文檔對象，看看如何利用它從你的使用者獲得各項資訊，並且動態顯示新的資訊。

我們已經看過檔案對象的一個屬性－圖象數組（Images array）。在第3課中，檔案中第1個圖象可以通過改變其src屬性被修改。

例：

window.document.images[0].src='some_new_picture.gif';

該命令將把文檔中的第1個圖象改成一個名為some_new_picture.gif的新圖象。在DOM中，圖象數組中的每個圖象也是對象。所以images[0].src指令象對對象那樣發揮作用，它的意思就是：從Image數組中調用Image的中的對象image[0]，並設定其src屬性。將其翻譯過來即：從該視窗中調用文檔（document）屬性，從該文檔的圖象數組中調用第1幅圖象，並將其src屬性該為圖象some_new_picture.gif。

Image對象還有其它很多有趣的屬性，例如，你可以讓JavaScript在作其它事之前檢查一幅圖象是否已經完全載入。但是，我們只能在以後的課程中談到這些屬性。今天，我們將談談反饋表單及如何在JavaScript中應用反饋表單。

反饋表單是HTML 1.0規範的一部分。許多人對其並不很瞭解。很多人只以為它只能由於使用者端CGI編程。其實，即使你不是CGI程式員，反饋表單也會為你提供許多功能。而JavaScript可被用來為反饋表單添加各種功能。而且無須使用者端CGI的輔助。

如果你不瞭解反饋表單如何工作，請學習HTML入門中的有關課程。然後在開始學習本課。

首先，在javascript中，反饋表單也被儲存在一個對象數組中。你可以通過window.document.images[0]調用圖象數組中的第一幅圖象，你也可以用window.document.forms[0]調用反饋表單數組中的第1項表單。你可為圖象命名，也可以以類似的方式為反饋表單命名。例如，如果該反饋表單

的編程如下：

<form name="first_form">
<input type="text" name="first_text" size="40" value="Power to the primates!">
</form>

你可以用以下兩種方式之一引用該表單：

var the_form = window.document.forms[0];
var the_same_form = window.document.first_form;

更多的時候，你需要引用到表單內的元素，例如上例中的文字域。

將滑鼠滑過該連結看看會髮式什麼事情。

Yes, and I know it. No!

通過改變文字域的值就可實現這種奇妙的變換。

<form name="second_form">
<input type="text" name="first_text" value="Are you happy?">
</form>

改變文字域的連結為：

<a href="#" onMouseOver="window.document.second_form.first_text.value='Clap clap!';">Yes, and I know it.</a>

<a href="#" onMouseOver="window.document.second_form.first_text.value='Sour puss!';">No!</a>

意思是說，表單調用第1個表單，並將其值設為 'Clap clap!'第2行作用相似。這同改變圖象的src非常相似。只不過文字域改變的是值。

對textareas也可以採用類似的方法改變值:

Part 1 Part 2

表單編碼：

<form name="third_form">
<textarea name="the_textarea" rows=10 cols=60>
Mouse over below to see the first verse of
The Webmonkey song, adapted from
"I Wanna Be Like You" (The Monkey Song)
from Walt Disney's The Jungle Book
written by Richard M. Sherman and Robert B. Sherman
</textarea>
</form>

注意該表單有一個名字：third_form,並且文字區也有一個名字：the_textarea。

其連結和文字域的設定方法基本相同：

<a href="#" onMouseOver="window.document.third_form.the_textarea.value=first_part;">Part 1</a>
<a href="#" onMouseOver="window.document.third_form.the_textarea.value=second_part;">Part 2</a>

唯一的不同之處在於將一個變數賦值給textareas，而不是將字串賦值給它。該變數在HTML首部已經做了定義。

以下是變數的字串賦值：

var first_part = "Now I'm the king of the swingers\nOh, the jungle VIP\nI've reached the top and had to stop\nAnd that's what botherin' me";

注意"\n"是分行符號。如果你在一個<pre> 並且或在一個textarea中寫字，"\n" 分行符號非常方便。

除了改變表單元素的值，JavaScript還可以讓你檢測在表單中進行的事件。下一講將進行介紹。