本站電子書

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

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 ,參數數量則是依需求自己定義,這裡為兩個 ab


此例用了兩個 return ,有回傳值的函數至少要有一個 returnreturn 就是函數結束執行,將控制權交還原本呼叫函數的地方。我們將 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 教材
回首頁


參考資料
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

沒有留言: