函數

函數其實是一組程序, 你可以自行定義它來做指定的工作。 在定義了函數之後, 當你要執行該函數的程序, 只須呼叫它便可。

使用函數的好處是可以將一個大的程式分成多個小部份, 方便管理及偵錯, 還可以讓程式的每個部份都可以享用函數, 以減少重覆的程序。

語法: 定義函數

function function_name() {
   // 在大括號的範圍內寫入程序
}

  • function 是一個關鍵字, 用來定義一個函數, 而函數的名稱就寫在 function 之後。
  • function_name 是該函數的名稱, 用來表示該函數。
  • () 是左括號和右括號, 括號內是用來輸入參數的, 如果沒有參數, 括號內就不用寫任何東西。 本篇稍後會講述參數。
  • {  和  }   是左大括號和右大括號, 函數的程序就寫在大括號範圍內。

語法:呼叫函數

function_name();

例子: 函數

<html>
<head><title>Define a function</title>
<script language="JavaScript">
<!--
function welcome() {
  document.write("<b>Welcome to JavaScript Channel.");
  document.write("Please feel free to ask any question in the message board.</b>");
}
//-->
</script>
</head>
<body>
Hello.
<script>
<!--
welcome();
//-->
</script>
I will try my best to help you.
</body>
</html>

例子說明:

這個例子有兩個 <script> , 一個在 <head> 範圍, 另一個在 <body> 範圍。
<head> 範圍內的 <script> 定義了一個 welcome 函數, 而在 <body> 範圍內的 <script> 就呼叫 welcome 函數。

輸入參數

有時我們希望函數在不同的情況下有不同的結果, 因此會用參數。 將參數傳入函數, 成為函數內的變數, 就可以根據這些變數的內容來做不同的工作。

定義一般函數的寫法:

function function_name(arg1, arg2, ..., argN) {
   // arg1, arg2 至到 argN 都成為本函數的變數了
}

  • 你可以傳入任何數目的參數, 參數與參數之間須用逗號分隔 (,)。

以是例子使用了參數:

<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 可以是任何型態的資料。

以下例子內的函數會傳回資料:

<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> 以內的範圍。例子:

<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 混淆的。

創作者介紹
創作者 羅 朝淇 的頭像
羅 朝淇

羅 朝淇的部落格

羅 朝淇 發表在 痞客邦 留言(0) 人氣()