- JavaScript從入門到精通（微視頻精編版）
- 明日科技
- 1321字
- 2020-09-01 15:02:24
4.1 函數的定義和調用
視頻講解
在程序中要使用自己定義的函數，必須首先對函數進行定義，而在定義函數時，函數本身是不會執行的，只有在調用函數時才會執行。下面介紹函數的定義和調用的方法。
4.1.1 函數的定義
在JavaScript中，可以使用function語句來定義一個函數。這種形式是由關鍵字function、函數名加一組參數以及置于大括號中需要執行的一段代碼構成的。使用function語句定義函數的基本語法如下：
function 函數名([參數1, 參數2,…]){
語句
[return 返回值]
}
參數說明。
函數名：必選，用于指定函數名。在同一個頁面中，函數名必須是唯一的，并且區分大小寫。
參數：可選，用于指定參數列表。當使用多個參數時，參數間使用逗號進行分隔。一個函數最多可以有255個參數。
語句：必選，是函數體，用于實現函數功能的語句。
返回值：可選，用于返回函數值。返回值可以是任意的表達式、變量或常量。
例如，定義一個不帶參數的函數hello()，在函數體中輸出“你好”字符串。具體代碼如下：
01 function hello(){ //定義函數名稱為hello
02 document.write("你好"); //定義函數體
03 }
例如，定義一個用于計算商品金額的函數account()，該函數有兩個參數，用于指定單價和數量，返回值為計算后的金額。具體代碼如下：
01 function account(price,number){ //定義含有兩個參數的函數
02 var sum=price*number; //計算金額
03 return sum; //返回計算后的金額
04 }
4.1.2 函數的調用
函數定義后并不會自動執行，要執行一個函數需要在特定的位置調用函數。調用函數的過程就像啟動機器一樣，機器本身是不會自動工作的，只有按下開關來調用這個機器，它才會執行相應的操作。調用函數需要創建調用語句，調用語句包含函數名稱、參數具體值。
1．函數的簡單調用
函數調用的語法格式如下：
函數名(傳遞給函數的參數1,傳遞給函數的參數2, …);
函數的定義語句通常被放在HTML文件的<head>段中，而函數的調用語句可以放在HTML文件中的任何位置。
例如，定義一個函數outputImage()，這個函數的功能是在頁面中輸出一張圖片，然后通過調用這個函數實現圖片的輸出，代碼如下：
01 <html>
02 <head>
03 <meta charset="UTF-8">
04 <title>函數的簡單調用</title>
05 <script type="text/javascript">
06 function outputImage(){ //定義函數
07 document.write("<img src='rabbit.jpg'>"); //定義函數體
08 }
09 </script>
10 </head>
11 <body>
12 <script type="text/javascript">
13 outputImage(); //調用函數
14 </script>
15 </body>
16 </html>
運行結果如圖4.1所示。
圖4.1 調用函數輸出圖片
2．在事件響應中調用函數
當用戶單擊某個按鈕或選中某個復選框時都將觸發事件，通過編寫程序對事件做出反應的行為稱為響應事件，在JavaScript語言中，將函數與事件相關聯就完成了響應事件的過程。例如，按下開關按鈕打開電燈就可以看作是一個響應事件的過程，按下開關相當于觸發了單擊事件，而電燈亮起就相當于執行了相應的函數。
例如，當用戶單擊某個按鈕時執行相應的函數，可以使用如下代碼實現該功能。
01 <script type="text/javascript">
02 function test(){ //定義函數
03 alert("我喜歡JavaScript "); //定義函數體
04 }
05 </script>
06 <form action="" method="post" name="form1">
07 <input type="button" value="提交" onClick="test();"><!--在事件觸發時調用自定義函數-->
08 </form>
在上述代碼中可以看出，首先定義一個名為test()的函數，函數體比較簡單，使用alert()語句輸出一個字符串，最后在按鈕onClick事件中調用test()函數。當用戶單擊“提交”按鈕后將彈出相應對話框。運行結果如圖4.2所示。
圖4.2 在事件響應中調用函數
3．通過鏈接調用函數
函數除了可以在響應事件中被調用之外，還可以在鏈接中被調用，在<a>標簽中的href屬性中使用“javascript:函數名()”格式來調用函數，當用戶單擊這個鏈接時，相關函數將被執行，下面的代碼實現了通過鏈接調用函數。
01 <script type="text/javascript">
02 function test(){ //定義函數
03 alert("我喜歡JavaScript"); //定義函數體
04 }
05 </script>
06 <a href="javascript:test();">單擊鏈接</a> <!--在鏈接中調用自定義函數-->
運行程序，當用戶單擊“單擊鏈接”后將彈出相應對話框。運行結果如圖4.3所示。
圖4.3 通過單擊鏈接調用函數