JavaScript: Form和Function

約瑟 發表



在這篇教學裡面, 我們會學到如何應用FORM來呼叫Function。你們可以藉著這個例子來知道FORM和JavaScript 的關係。我們要用的例子是一個可以讓你選擇背景顏色的FORM。
FORM是一個HTML語法, 永遠是用<FORM>這個標籤來起始的, 然後由</FORM>來結束。

STEP1:【程式範例】
  1. 以下是這個範例的程式碼:

    <html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    function newcolor(color)
    {
    alert("You Chose " + color)
    document.bgColor=color
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <h1>Select a Background Color
    <FORM>
    <INPUT TYPE="button" VALUE="綠色"
    onClick="newcolor('green')">
    <INPUT TYPE="button" VALUE="黃色"
    onClick="newcolor('yellow')">
    </FORM>
    </BODY>
    </HTML>

  2. 以下是執行結果:

    按這裡


STEP2:【程式說明】
  1. 又是一個新的名詞。literal是一個唯一沒有變的VALUE。它可以是一個數字, 名稱, 或是任何你可以打出來的東西。 只要記住literal是無法被轉換的。
  2. 又是另一個新的名詞。string是任何在雙引號或是單引號裡面的文字或數字。所以程式的這部分:

    onClick="newcolor('green')"

    是可以被稱為string "green"。
  3. 注意到我們要把這個 'green' 或 'yellow' 傳到 newcolor() 這個 function。
    當我們按下按鈕時, 'green' 或 'yellow' 這兩個string就會被FORM傳到 newcolor) 這個function。
  4. 在這個程式裡, color (顏色)的指令會被傳回到 <SCRIPT> 裡的兩個部份: 一個是 alert, 一個是 document.bgColor 這裡。 在 function 取得它所需要得資料後, alert (警告)視窗會自動跳出因為它們接收 到由FORM傳過來的資續, 而背景顏色也會隨之改變。
  5. 另外, 我要特別指出, INPUT 指令的 TYPE 這裡, 即使你將 INPUT TYPE="button" 改成 INPUT TYPE="text", 他都不會影響 JavaScript 程式的運作。

最後更新日期: 7/9/2001 10:31:58 AM