程式語言教學誌 FB, YouTube: PYDOING: 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) 開啟後執行，如下

函數也可以回傳數值，就在大括弧內加入關鍵字 return ， return 本身就是一個陳述，可以再接運算式 (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 月 -->

瀏覽器開啟後執行，如下