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 通过单击链接调用函数