JavaScript 函數



函數是由事件驅動的或是當它被呼叫時執行的可重複使用的程式碼區塊。

實例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例


JavaScript 函數語法

函數就是包裹在花括號中的程式碼區塊,前面使用了關鍵字function:

function functionname ()
{
執行程式碼
}

當呼叫函數時,會執行函數內的程式碼。

可以在某事件發生時直接呼叫函數(例如當使用者點擊按鈕時),並且可由 JavaScript 在任何位置進行呼叫。

lampJavaScript 對大小寫敏感。關鍵字 function 必須是小寫的,並且必須以與函數名稱相同的大小寫來呼叫函數。


呼叫帶參數的函數

在呼叫函數時,您可以向其傳遞值,這些值稱為參數。

這些參數可以在函數中使用。

您可以發出任意多的參數,由逗號 (,) 分隔:

            myFunction(argument1,argument2)

當您宣告函數時,請將參數當作變數來宣告:

function myFunction( var1,var2)
{
程式碼##}
變數和參數必須以一致的順序出現。第一個變數是第一個被傳遞的參數的給定的值,以此類推。

實例

<!DOCTYPE html>
<html>	
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击这个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

上面的函數在按鈕被點擊時會提示"Welcome Harry Potter, the Wizard"。

函數很靈活,您可以使用不同的參數來呼叫函數,這樣就會給出不同的訊息:

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>请点击其中的一个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看線上實例

#根據您點擊的不同的按鈕,上面的例子會提示"Welcome Harry Potter , the Wizard" 或"Welcome Bob, the Builder"。


帶有傳回值的函數

有時,我們會希望函數將值傳回呼叫它的地方。

透過使用 return 語句就可以實現。

在使用 return 語句時,函數會停止執行,並傳回指定的值。

語法

function myFunction()
{
#    var x=5;
    return x;
}

    return x;

}

上面的函數會回傳值5。

注意:
整個 JavaScript 並不會停止執行,只是函數。 JavaScript 將繼續執行程式碼,從呼叫函數的地方。
函數呼叫將會被傳回值取代:

            var myVar=myFunction();

myVar 變數的值是 5,也就是函數 "myFunction()" 所傳回的值。
即使沒有保存它為變量,您也可以使用回傳值:

##            document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 將變成 5,也就是函數 "myFunction()" 所傳回的值。

您可以讓傳回值基於傳遞到函數中的參數:

實例######
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算,然后返回结果:</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>
###
執行實例 »

點擊 "執行實例" 按鈕查看線上實例

在您僅僅希望退出函數時 ,也可使用 return 語句。傳回值是可選的:

function myFunction(a,b)
{
	if (a>b)
	{
		return;
	}
	x=a+b
}

如果 a 大於 b,則上面的程式碼將退出函數,不會計算 a 和 b 的總和。


局部 JavaScript 變數

在 JavaScript 函數內部宣告的變數(使用 var)是局部變數,所以只能在函數內部存取它。 (此變數的作用域是局部的)。

您可以在不同的函數中使用名稱相同的局部變量,因為只有宣告過該變數的函數才能辨識出該變數。

只要函數運行完畢,本地變數就會被刪除。


全域 JavaScript 變數

在函數外宣告的變數是全域變量,網頁上的所有腳本和函數都能存取它。


JavaScript 變數的生存期

JavaScript 變數的生命期從它們被宣告的時間開始。

局部變數會在函數運行以後被刪除。

全域變數會在頁面關閉後被刪除。


向未宣告的 JavaScript 變數指派值

如果您把值賦給尚未宣告的變量,變數將會自動以全域變數宣告。

這條語句:

carname="Volvo";

將宣告一個全域變數 carname,即使它在函數內執行。