JavaScript 入門指南 - 函數

JavaScript 入門指南 - 函數

函數 (function) 是一種功能性的模組，可以將程式 (program) 分割成小部分，藉由呼叫函數安排執行順序




定義函數需要使用關鍵字 (keyword) function ，並且指定函數名稱與小括弧中的參數列 (parameter list) ，後面的大括弧區域為函數工作的程式碼區域，如果有回傳值 (return value) ，大括弧中至少要有一個 return 陳述 (statement) 。我們舉一例如下

function big(a, b) {
    if (a > b) {
        return a;
    }
    else {
        return b;
    }
}

big() 函數回傳兩個參數 (parameter) 中的較大值，函數名稱為 big ，參數數量則是依需求自己定義，這裡為兩個 a 與 b 。


此例用了兩個 return ，有回傳值的函數至少要有一個 return ， return 就是函數結束執行，將控制權交還原本呼叫函數的地方。我們將 big() 寫成一個完整範例

function big(a, b) {
    if (a > b) {
        return a;
    }
    else {
        return b;
    }
}

document.write(big(22, 11) + " is bigger!");

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

我們用以下的 HTML 文件載入

<script language="JavaScript" src="bigdemo.js"></script>

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

瀏覽器開啟如下



函數常見的運用為重複性質的工作，我們另舉一例如下

function printInt(a) {
    document.write(a);
}

function printNewline() {
    document.write("<br / >");
}

var i = 10;
printNewline();
while (i > 0) {
    printInt(i);
    printNewline();
    i--;
}
printNewline();

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

這是我們之前寫過的倒數計時程式，只是將印出的工作定義給函數，這裡可以看到函數名稱可以使程式有清楚的語意

printNewline();
while (i > 0) {
    printInt(i);
    printNewline();
    i--;
}
printNewline();

我們用以下的 HTML 文件載入

<script language="JavaScript" src="printdemo.js"></script>

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

瀏覽器開啟如下



雖然函數已經很好用了，可是 JavaScript 還允許程式設計師定義自己物件 (object) ，接下來，我們來看看怎麼來設計物件吧！

中英文術語對照
函數	function
程式	program
回傳值型態	return type
參數列	parameter list
回傳值	return value
陳述	statement
參數	parameter
物件	object

您可以繼續參考

基礎篇

• 認識 JavaScript 語言


• 如何執行 Javascript 程式


• 資料型態與變數


• 變數命名規則


• 運算式與陳述


• 選擇


• 迴圈


• 函數


• 物件

相關目錄

回 JavaScript 入門指南
回 JavaScript 教材
回首頁

參考資料

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions
http://www.w3schools.com/JS/js_functions.asp
http://www.tutorialspoint.com/javascript/javascript_functions.htm

訂閱：
張貼留言 (Atom)

window.___gcfg = { 'lang': 'zh-TW' };