Javascript: Function

約瑟 發表



在寫JavaScript的時後, 我們大部份都會用到function這個語法。 因此, 我們這次就來討論一下這個玩意兒! 基本上, function 只是一個把各種指令合起來的一個語法。 讓我們來寫一個指令三次 , 比較一下function的優點:

STEP1:【基本語法】
  1. 要是以我們第一章節學的來講, 要想三句話, 就要用三個 document.write。如下:

    <html>
    <script language="JavaScript">

    document.write("歡迎光臨!<br>");
    document.write("This is JavaScript!<br>");

    document.write("歡迎光臨!<");
    document.write("This is JavaScript!<br>");

    document.write("歡迎光臨!<br>");
    document.write("This is JavaScript!<br>");

    </script>
    </html>

  2. 這個程式的執行結果會變成 3 個以下的樣子:

  3. 看下一步驟, 我們用 Function 來達到同樣效果, 看看哪裡不一樣。

STEP2:【Function語法】
  1. 看看以下程式碼: <html>
    <script language="JavaScript">

    function myFunction() {
    document.write("歡迎光臨!<br>");
    document.write("This is JavaScript!<br>");
    }

    myFunction();
    myFunction();
    myFunction();

    </script>
    </html>
    2. 執行結果:


    是不是一樣呢?

  2. 在這個程式裡, 我們用下面這段程式定義function:

    function myFunction() { document.write("歡迎光臨!"); document.write("This is JavaScript!"); }

  3. 程式中, 在 {}裡面的指令是屬於 myFunction() 的。 意思就是說兩個 document.write() 指令被定義為 function, 然後我們用 function 把它呼叫出來兩次。 你可能會覺得奇怪, 為什麼 function那麼重要呢? 當你的程式非常多同樣的指令要出現多次, 你就知道為什麼function 這時後派的上用場了。

STEP3:【自己研習】
  1. 在這給大家一個例子做研習用吧!

    <html>
    <head>

    <script language="JavaScript">
    <!-- hide

    function calculation() {
    var x= 12;
    var y= 5;

    var result= x + y;

    alert(result);
    }

    // -->
    </script>

    </head>
    <body>

    <form>
    <input type="button" value="Calculate" onClick="calculation()">
    </form>

    </body>
    </html>

  2. 這的 Button 呼叫 calculation() 的function出來。 你可以看到這個function只做特定的計算. 在這程式裡面, 我們用 x & y Varibles。 我們把 Varible 縮短為 var。 Variable 可以用來存入非常 多東西像是: 數據, String 等等.. 在 var result= x + y 這行, 告訴瀏覽器去造出一個Variable 的結果 (i.e. 5+12)。 當瀏覽器跑完時, 就會跑出計算結果, 17。 aler(result)這個指令意思是跟 alert(17) 一樣的。 結果就是會有一個小視窗跑出來說答案是17。

    最後更新日期: 6/19/2001 5:55:03 PM