本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

JavaScript 快速導覽 - 函數

函數 (function) 是 JavaScript 中的功能模組,一些重複性的工作皆可放在函數之中,需要進行這些工作時,再進行呼叫相關函數即可。



基本的函數定義如下
function 函數名稱(參數列) {
    相關陳述
}


定義函數使用關鍵字 (keyword) function ,其後空一格接函數的識別字 (identifier) 名稱與小括弧,小括弧內為可有可無的參數列 (parameter list) ,其後為成對的大括弧,大括弧裡頭放置相關的功能陳述。所謂的參數 (parameter) 係指傳遞給函數的資料,函數可依此資料進行相關工作。


以下程式除了 run() 函數之外,另外定義了 printM() 函數, printM() 需要一個參數 a 。 run() 可從網頁取得使用者輸入的數字,然後傳遞給 printM() ,用來印出乘法表
function run() {
    var a = parseInt(document.getElementById("a").value);
    printM(a);    
}

function printM(a) {
    var c = document.getElementById("content");
    var n = document.createElement("p");
    var i = 1;
    var j = 1;
    
    while (i <= a) {
        j = 1;
        while (j <= a) {
            n.appendChild(document.createTextNode(i * j + " "));
            c.appendChild(n);
            j++;
        }
        
        n.appendChild(document.createElement("br"));
        c.appendChild(n);
        i++;
    }
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run34.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run34.js" type="text/javascript"></script>
</head>

<body>
<input id="a" type="text" value="">
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample37.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器 (broswer) 開啟後執行,如下



函數也可以回傳數值,就在大括弧內加入關鍵字 returnreturn 本身就是一個陳述,可以再接運算式 (expression) ,運算式的結果就是回傳值 (return value) 。形式如下
function 函數名稱(參數列) {
    相關陳述
    
    return 回傳值;
}


以下程式的 double() 函數回傳參數的兩倍
function run() {
    var a = parseInt(document.getElementById("a").value);
    var c = document.getElementById("content");
    var n = document.createElement("p");    
    n.appendChild(document.createTextNode(double(a)));
    c.appendChild(n);
}

function double(a) {
    return a + a;
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:run35.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 */


利用以下的 HTML 文件載入
<html>

<head>
<title>JavaScript Demo</title>
<script src="run35.js" type="text/javascript"></script>
</head>

<body>
<input id="a" type="text" value="">
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:jsexample38.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2010 年 11 月 -->


瀏覽器開啟後執行,如下



中英文術語對照
函數function
關鍵字keyword
識別字identifier
參數列parameter list
參數parameter
瀏覽器broswer
運算式expression
回傳值return value






3 則留言:

提到...
作者已經移除這則留言。
提到...

用firefox跟chrome執行出來的結果有些不一樣
這樣是正常的嗎@@?

Kaiching 提到...

已修改,感謝指正 ^^

瀏覽器顯示可能會有樣式上的差異,但是執行結果會是一樣的喔!