DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript初級教程(第五課)第1/4頁
JavaScript初級教程(第五課)第1/4頁
編輯:JavaScript基礎知識     

    現在你已經了解了計算機編程的基本知識。我們接下來繼續研究一下文檔對象模型(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還可以讓你檢測在表單中進行的事件。下一講將進行介紹。

當前1/4頁 1234下一頁閱讀全文
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved