現(xiàn)在你已經(jīng)了解了計(jì)算機(jī)編程的基本知識。我們接下來繼續(xù)研究一下文檔對象模型（Document Object Model－DOM）。DOM的點(diǎn)擊關(guān)系起始于窗口對象在每個(gè)窗口對象中是一個(gè)文檔對象（Document object）。我們將重點(diǎn)談?wù)勎臋n對象，看看如何利用它從你的用戶獲得各項(xiàng)信息，并且動態(tài)顯示新的信息。

    我們已經(jīng)看過文件對象的一個(gè)屬性－圖象數(shù)組（Images array）。在第3課中，文件中第1個(gè)圖象可以通過改變其src屬性被修改。

    例：

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

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

    Image對象還有其它很多有趣的屬性，例如，你可以讓JavaScript在作其它事之前檢查一幅圖象是否已經(jīng)完全載入。但是，我們只能在以后的課程中談到這些屬性。今天，我們將談?wù)劮答伇韱渭叭绾卧贘avaScript中應(yīng)用反饋表單。

    反饋表單是HTML 1.0規(guī)范的一部分。許多人對其并不很了解。很多人只以為它只能由于用戶端CGI編程。其實(shí)，即使你不是CGI程序員，反饋表單也會為你提供許多功能。而JavaScript可被用來為反饋表單添加各種功能。而且無須用戶端CGI的輔助。

    如果你不了解反饋表單如何工作，請學(xué)習(xí)HTML入門中的有關(guān)課程。然后在開始學(xué)習(xí)本課。

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

    的編程如下：

    <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;

    更多的時(shí)候，你需要引用到表單內(nèi)的元素，例如上例中的文字域。

    將鼠標(biāo)滑過該鏈接看看會發(fā)式什么事情。

    Yes, and I know it.  No! 

    通過改變文字域的值就可實(shí)現(xiàn)這種奇妙的變換。

    <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>

    意思是說，表單調(diào)用第1個(gè)表單，并將其值設(shè)為 '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>

    注意該表單有一個(gè)名字：third_form,并且文字區(qū)也有一個(gè)名字：the_textarea。

    其鏈接和文字域的設(shè)定方法基本相同：

    <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>

    唯一的不同之處在于將一個(gè)變量賦值給textareas，而不是將字符串賦值給它。該變量在HTML首部已經(jīng)做了定義。

    以下是變量的字符串賦值：

    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"是換行符。如果你在一個(gè)<pre> 并且或在一個(gè)textarea中寫字，"\n" 換行符非常方便。

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

最新評論