|
函數 (Function)
「函數」（Functions）是所有的程式語言必備的功能。JavaScript 的函數可以分成內建函數及使用者定義的函數：
內建函數：又分成兩類
一般內建函數，如 parseInt() 和 parseFloat() 等。
與物件結合的函數，例如 Math.sin() 或 string.big()等，這類的函數又稱為物件的方法（Method）。
使用者定義的函數：也可以分一般函數與物件的方法兩類。
函數其實是一組編寫好了的程序，你可以自行定義它來做指定的工作。在定義了函數之後，當你要執行該函數的程序，只須呼叫它便可。
使用函數的好處是可以將一個大的程式分成多個小部份，方便管理及偵錯，還可以讓程式的每個部份都可以共用函數，以減少重複的程序。
如何定義函數：
語法： 定義函數
function是一個關鍵字，用來定義一個函數，而函數的名稱就寫在function之後。
function_name是該函數的名稱，用來表示該函數。
( )是左括號和右括號， 括號內是用來輸入參數的，如果沒有參數，括號內就不用寫任何東西。本篇稍後會講述參數。
{ 和 } 是左大括號和右大括號，函數的程序碼就寫在大括號範圍內。
函數的定義包含函數名稱 (Function name) 及輸入引數 (Input arguments)，其基本格式如下：
|
function function_name(Input
arguments) {
// 在大括號{ } 的範圍間寫入程序碼
...
return(output) // 非必要
} |
|
在括號裡的輸入引數（Input Arguments），必須以逗號分開。定義函數並不代表函數的執行，只有在程式中呼叫函數的名稱後，才會執行該函數。若有需要，函數最後可用
return 來傳回輸出變數 (數值、字串，或其他型態的變數）至呼叫此函數的程式環境。一般網頁中的的事件處理器（Event handlers），通常都是以
JavaScript 或是 VBScript 的函數來描述。
函數的定義，通常寫在 <head> 及 </head> 之間，甚至也可以寫在網頁最前面（在 <html>
之前），以確保 HTML 主體在被呈現前，所有相關的 JavaScript 函數都已被載入，並隨時可被執行。但這並不是一個嚴格的規定，一般來說，我們希望函數的定義出現的位置和它被呼叫之處能越接近越好，以方便程式管理，在這種情況下，只要函數定義出現在其被呼叫之前，大致上都不會有什麼問題。
語法： 呼叫函數
程式範例（函數）： 看程式samp12.html執行結果
|
<html>
<head><title>Define a function</title>
<script language="JavaScript">
<!--
function welcome() {
document.write("<b>歡迎來到 基礎JAVASCRIPT教學");
document.write("希望您能在此學到您所想學的JAVASCRIPT資訊</b>");
}
//-->
</script>
</head>
<body>
您好啊.
<script>
<!--
welcome();
//-->
</script>
I will try my best to help you.
</body>
</html>
|
|
例子說明：
這個例子有兩個 <script> ， 一個在 <head> 範圍，另一個在 <body> 範圍。
在 <head> 範圍內的 <script> 定義了一個 welcome 函數，而在 <body> 範圍內的
<script> 就呼叫 welcome 函數。
函數的定義，通常寫在 <head> 及 </head> 之間，甚至也可以寫在網頁最前面（在 <html>
之前），以確保 HTML 主體在被呈現前，所有相關的 JavaScript 函數都已被載入，並隨時可被執行。但這並不是一個嚴格的規定，一般來說，我們希望函數的定義出現的位置和它被呼叫之處能越接近越好，以方便程式管理，在這種情況下，只要函數定義出現在其被呼叫之前，大致上都不會有什麼問題。
輸入參數：
有時我們希望函數在不同的情況下有不同的結果，因此會用參數。將參數傳入函數， 成為函數內的變數，就可以根據這些變數的內容來做不同的工作。
定義一般函數的寫法：你可以傳入任何數目的參數，唯參數與參數之間須用逗號分隔 (,)。
|
function function_name(arg1,
arg2, ..., argN)
{
// arg1, arg2 至到 argN 都成為本函數的變數了
} |
|
程式範例（輸入參數）： 看程式samp13.html執行結果
|
<html>
<head><title>function with argument</title>
<script language="JavaScript">
<!--
function student(name, age, is_graduated) {
document.write("Student Name : " + name + "
; ");
document.write("Age : " + age + " ; ");
document.write("Is graduated? " + is_graduated +
"<br>");
}
//-->
</script>
</head>
<body>
<p>Student Data:</p>
<script>
<!--
student("Tom", 18, true);
student("John", 16, false);
//-->
</script>
<p>End of student data.</p>
</body>
</html>
|
|
例子說明：
student("Tom", 18, true);
呼叫 student 函數時，同時將 "Tom", 18 和 true 分別傳入 student 函數內的 name , age
和 is_graduated 三個變數中。
傳回資料：
函數也可以傳回 (return) 資料， 通常這些資料是該函數的運算結果。
傳回資料的寫法：
|
|
function function_name()
{
// 用 return 關鍵字傳回資料
return data
//data 可以是任何型態的資料
}
|
|
程式範例（傳回資料 ）： 看程式samp14.html執行結果
|
<html>
<head><title>function with arguments</title>
<script language="JavaScript">
<!--
function my_name() {
var name = "Tom"
return name
}
function my_age() {
return 16
}
var myname = my_name()
document.write("My name is " + myname )
document.write(" and I am " + my_age() + "
years old.");
//-->
</script>
</head>
<body>
</body>
</html>
|
|
例子說明：
my_name() 和 my_age() 分別傳回 "Toy" 和 16 。
變數的範圍：
如果你在函數內定義一個變數，那就只有該函數可以存取這個變數。如果你定義一個變數的地方是在 <script> 範圍內，但不是在任何函數內，那麼該個變數就可以被整頁來儲取，包括不在
<script> 以內的範圍。
在使用函數時，我們必須有「局部變數」和「全域變數」的概念，可簡單定義如下： 局部變數 (Local variables): 只有在變數本身的函數裡才看的見的變數。欲定義局部變數，可在變數第一次使用時，加上
var。
全域變數 (Global variables): 在整個程式設計的過程中都可以看的見、 而且每一個函數都可以用的變數。若不對變數做任何處理，JavaScript
的變數預設狀態即是全域變數。
程式範例（在函數內定義一個變數 ）： 看程式samp15.html執行結果
|
|
<html>
<head><title>The Scope of a Variable</title>
<script language="JavaScript">
<!--
var myname = "Tom";
document.write("The variable 'myname' is defined in the
first script tag.");
document.write("<br>myname in first script tab
= " + myname );
function function1() {
document.write("<br>myname in function1 = "
+ myname );
}
function1();
//-->
</script>
<script language="JavaScript">
<!--
document.write("<br>myname in second script tab
= " + myname );
function function2() {
var f2 = "variable in function2";
document.write("<br>f2 in function2 = " +
f2);
document.write("<br>myname in the second tab =
" + myname );
}
function2();
//-->
</script>
</head>
<body>
<script>
document.write("<br>myname in body section = "
+ myname );
</script>
</body>
</html>
<script>
document.write("<br>myname ouside html section
= " + myname );
document.write("<br>f2 = ");
document.write(f2);
</script>
|
|
例子說明：
整頁只定義了兩個變數，就是 f2 和 myname 。 myname 是在 <script> 以內定義的，因此整頁範圍內也可以用 myname
這個變數。但 f2 是 function2 以內定義的，因此 f2 只能在 function2 以內存取。
document.write(f2);
因為 f2 不能在 function2 以外存取，所以這一句會產生錯誤："f2 未被定義" (f2 is not defined)。不過你可以在
function2 以外定義多一個 f2 變數，那麼，雖然一頁內有兩個 f2 變數，但這個新的 f2 是不會和 function2 以內的 f2
混淆的。
JAVASCRIPT常見的錯誤，就是沒有把函數內部的變數設定成局部變數，導致此變數會繼承或影響外部變數的值。因此，為了減少除錯的時間，所有函數的內部變數，在第一次使用時最好加上
var，已確認其有效範圍只在此函數內。
一個寫程式的好習慣，會省去後續無數的除錯時間，再提醒一次：函數內的變數，要盡量加上 var，以確保不會和函數外的變數相衝。
在函數外部定義的變數，無論是否有加 var，都會被視為是全域變數，因此可以不必刻意再去加 var。
|
