1. 程式人生 > >HTML中的函式使用基礎(函式定義,函式呼叫,函式引數,函式返回值,巢狀函式,遞迴函式,變數作用域,內建函式,其他定義函式的方法)

HTML中的函式使用基礎(函式定義,函式呼叫,函式引數,函式返回值,巢狀函式,遞迴函式,變數作用域,內建函式,其他定義函式的方法)

HTML中的函式使用基礎

函式實質上是一個類似於單獨的邏輯單元的JavaScript程式碼,使用函式可以使程式碼更為簡潔,提供重用性,在JavaScript中,大約有95以上的程式碼是包含在函式中的,由此可見,函式在JavaScript中地位相當重要。

1、函式定義

在JavaScript中函式是由關鍵字function、函式名加一組引數以及置於大括號中的需要執行的一段程式碼定義的。定義函式的基本語法如下:

function 函式名([引數1,引數2,....]){
    語句
    [return 返回值]
}

引數說明:

函式名:必選,用於執行函式名,在同一個頁面中函式名必須是唯一的,並且區分大小寫

引數:可選,用於指定引數列表。當使用多個引數時,引數間使用逗號進行分隔。一個函式最多可以有255各引數(不過我想信大部分場景用不到這麼多引數的)。

語句:必選,是函式體,用於實現函式功能的語句。

返回值:可選,用於返回函式值。返回值可以是任意的表示式、變數或常量

例如,定義一個不帶引數的函式hello(),在函式體中輸出“你好”的字串,具體程式碼如下:

function hello(){
    document.write('你好')
}

例如,定義一個計算商品金額的函式account(),該函式有兩個引數,使用者指定單價和數量,返回值為計算後的金額總數,具體程式碼如下:

function account(price, number){
    var sum = price * number;
    return sum;
}

2、函式呼叫

函式定義之後並不會自動執行,要執行一個函式,需要在特定的位置呼叫函式,呼叫函式需要建立呼叫語句,呼叫語句也包括函式名稱、引數和具體值。

2.1函式的簡單呼叫

函式呼叫的語法如下。

函式名(傳遞給函式的引數1,傳遞給函式的引數2,....)

函式的定義語句通常放在HTML檔案的<head>段中,而呼叫的呼叫語句可以放在html檔案的任何位置。(最好定義語句放在一個全新的檔案中)

例如,定義一個函式test(),這個函式的功能是在頁面彈出“我喜歡林嘉怡小仙女”然後通過函式呼叫是他執行,能夠在頁面輸出“我喜歡林嘉怡小仙女”,程式碼如下:

<!DOCTYPE html>
<html>
    <head>
	    <meta charset="UTF-8">
		<title>函式定義</title>
		<script>
			function test(){
				alert('我喜歡林嘉怡小仙女');
			}
		</script>
	</head>
	<body>
		<script>
			test();
		</script>
	</body>
</html>

2.2在事件響應中呼叫函式

當用戶單擊某個按鈕或某個複選框時都將觸發事件,通過編寫程式對事件做出反應的行為稱為響應事件,在JavaScript語言中,將函式於事件相關聯就完成了響應事件的過程。例如當用戶單擊某個按鈕時執行相應的函式。

可以使用如下程式碼實現以尚功能:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函式定義</title>
		<script>
			function test(){
				alert('我喜歡林嘉怡小仙女');
			}
		</script>
	</head>
	<body>
		<form action="" method="post" name="form1">
			<input type="button" value="提交" onclick="test()" />
		</form>
	</body>
</html>

2.3通過連結呼叫函式

在JavaScript語句中除了通過使用事件呼叫函式以外,我們也可以通過使用連結的方式進行函式呼叫,在<a>標籤中的href屬性中使用“javascript:函式名()”格式來呼叫函式,當用戶點選這個連結的時候,相關函式被執行。下面的程式碼實現了通過連結呼叫函式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函式定義</title>
		<script>
			function test(){
				alert('我喜歡林嘉怡小仙女');
			}
		</script>
	</head>
	<body>
		<!--通過連結呼叫函式-->
		<a href="javascript:test()">單擊連結呼叫函式test</a>
	</body>
</html>

3、函式引數

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函式引數的使用</title>
		<script type="text/javascript">
			function show(bookname, author, name){
				alert(bookname + author + name); //頁面中彈出對話方塊,顯示書名等資訊
			}
			
//			function 函式名(形參1, 形參2,...){
//				函式體
//			}
		</script>
	</head>
	<body>
		<p>我們把定義函式時指定的引數稱為形式引數,簡稱形參;而把呼叫函式時的引數稱為實際引數,簡稱實參</p>
		<p>在JavaScript中定義函式的格式如上方的定義方法。</p>
		<p>定義函式時,其中的引數可以為一個也可以是多個(引數之間通過逗號分割)指定引數的作用在於當呼叫函式時,可以為函式傳遞一個或多個值</p>
		<p>通常,在定義函式時用了多少個形參,在呼叫函式的時候就要傳遞多少個實參,需要注意,形參和實參均通過逗號分割</p>
		<script type="text/javascript">
			show('功夫Javascript', '作者', '明日科技');
//			函式名(實參1,實參2,...)
		</script>
	</body>
</html>

4、函式返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>函式的返回值</title>
		<script type="application/javascript">
//			function sum(x,y){
//				var z = x +y;
//				return z;
//			}
//			alert(sum(2,4));
//			或者是
//			var result = sum(2,4);
//			alert(result);
			
			function compare(x, y){
				if(x>y){
					return true;
				}else{
					return false;
				}
			}
			
		</script>
	</head>
	<body>
		<p>對於函式呼叫,一方面可以通過函式向函式傳遞資料,另一方面也可以從函式獲取資料,也就是函式可以返回值。在JavaScript函式中,可以使用return語句為函式返回一個值</p>
		<p>其語法格式如下: return 表示式;</p>
		<p>這條語句的作用是結束函式,並把其後表示式的值作為函式的返回值。例如,定義一個計算兩個數的和的函式,並將計算結果作為函式的返回值。</p>
		<p>函式的返回值可以直接賦給變數或使用者表示式中,也就是說函式呼叫可以出現在表示式中。例如,將上例中的函式返回值賦給變數result,然後進行輸出,程式碼見上方</p>
		<script type="application/javascript">
			var result = compare(10,20);
			if(result){
				alert('第一個數大於第二個數')
			}else{
				alert('第2個數大於第一個數')
			}
		</script>
	</body>
</html>