JavaScript进阶 - 第5章 小程序，大作用（函数）
5-1什么是函数
函数的作用，可以写一次代码，然后反复地重用这个代码。
如:我们要完成多组数和的功能。
var sum;
sum = 3+2;
alert(sum);
sum=7+8 ;
alert(sum);
.... //不停重复两行代码
如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。
使用函数完成:
function add2(a,b){
sum = a + b;
alert(sum);
} // 只需写一次就可以
add2(3,2);
add2(7,8);
.... //只需调用函数就可
5-2定义函数
如何定义一个函数呢？看看下面的格式：
function 函数名( )
{
函数体;
}
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字：“add2”，代码如下：
<script type="text/javascript">
function add2(){
sum = 3 + 2;
alert(sum);
}
add2();
</script>
结果:
任务
补充右边编辑器第7行，编写一个函数，实现二个数的差，函数名为sub2。
1.定义函数使用function
2.function 后面是函数名
代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>定义函数</title> 6 <script type="text/javascript"> 7 function sub2() //定义函数 8 { 9 sub=5-2; 10 alert("5和2的差:"+sub); 11 } 12 </script> 13 </head> 14 <body> 15 <form> 16 <input type="button" value="点击我" onclick="sub2()" /> 17 </form> 18 </body> 19 </html>
5-3函数调用
函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
第一种情况:在<script>标签内调用。
<script type="text/javascript">
function add2()
{
sum = 1 + 1;
alert(sum);
}
add2();//调用函数，直接写函数名。
</SCRIPT>
第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。
<html>
<head>
<script type="text/javascript">
function add2()
{
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>
注意:鼠标事件会在后面讲解。
任务
补充右边编辑器第15行，实现如下功能:
网页中有一按钮(名字"点点我")，当点击按钮后调用函数tcon(),弹出对话框"恭喜你学会函数调用了!"。
函数调用，在需要的位置直接写函数名。
代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>函数调用</title> 6 <script type="text/javascript"> 7 function tcon() 8 { 9 alert("恭喜你学会函数调用了!"); 10 } 11 </script> 12 </head> 13 <body> 14 <form> 15 <input type="button" value="点点我" onclick="tcon()"> 16 </form> 17 </body> 18 </html>
5-4有参数的函数
上节中add2()函数不能实现任意指定两数相加。其实，定义函数还可以如下格式：
function 函数名(参数1,参数2)
{
函数代码
}
注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。
按照这个格式，函数实现任意两个数的和应该写成：
function add2(x,y)
{
sum = x + y;
document.write(sum);
}
x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
例如，add2(3，4)会求3+4的和，add2(60,20)则会求出60和20的和。
任务
补充右边编辑器代码，实现如下功能:
1. 补充右边编辑器第7行代码，定义函数实现三个数的和，函数名为add3。
2. 补充右边编辑器第12、13行代码，计算5、8、3/7、1、4两组三个数的和。
?不会了怎么办
1.定义函数要有参数，这样就可以重复使用并传不同的值。
add3(x,y,z)
2.求不同数的和，在调用函数要记的传数值。
add3(5,8,3);
add3(7,1,4);
代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>函数传参</title> 6 <script type="text/JavaScript"> 7 function add3(x,y,z) 8 { 9 sum = x + y +z; 10 document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>"); 11 } 12 add3(5,8,3); 13 add3(7,1,4); 14 </script> 15 </head> 16 <body> 17 </body> 18 </html>
5-5返回值的函数
思考:上一节函数中，通过"document.write"把结果输出来，如果想对函数的结果进行处理怎么办呢？
我们只要把"document.write(sum)"这行改成如下代码：
function add2(x,y)
{
sum = x + y;
return sum; //返回函数值,return后面的值叫做返回值。
}
还可以通过变量存储调用函数的返回值，代码如下:
result = add2(3,4);//语句执行后,result变量中的值为7。
注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。
任务
补充右边编辑器代码，实现如下功能:
1. 定义函数实现两个数的积，函数名为app2,补充右边编辑器第10行代码，返回函数值。
2. 补充右边编辑器第12、13行代码，计算5、6/2、3两组两个数的积。分别保存在req1和req2变量中。
3. 补充右边编辑器第14行代码，计算req1和req2和的值，保存在变量sumq中。
1.函数返回值，使用return。
return sum;
2. 返回值可以存储在变量中。
var req1=app2(5,6);
var req2=app2(2,3);
var sumq=req1+req2;
代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>返回值函数</title> 6 <script type="text/javascript"> 7 function app2(x,y) 8 { var sum,x,y; 9 sum = x * y; 10 return sum; 11 } 12 req1=app2(5,6); 13 req2=app2(2,3); 14 sumq=req1+req2; 15 document.write("req1的值:"+req1+"<br/>"); 16 document.write("req2的值:"+req2+"<br/>"); 17 document.write("req1的值:"+req1+"与"+"req2的值:"+req2+"的和:"+sumq); 18 </script> 19 </head> 20 <body> 21 </body> 22 </html>
编程练习
使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。
任务
第一步： 编写代码完成一个函数的定义吧。
第二步： 我们来补充函数体中的控制语句，完成函数功能吧。
提示:再想一想，两个整数比较有三种情况，大于，等于或小于，所以我们需要控制语句判断(if...else if)。
第三步： 写好的函数，我们就可以任意调用函数了。通过函数调用实现两组数值中，返回较大值吧。
代码：
1 <!DOCTYPE HTML> 2 <html > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>函数</title> 6 7 <script type="text/javascript"> 8 9 //定义函数 10 function size(x,y){ 11 if(x>y){ 12 return x; 13 } 14 else if(x<y){ 15 return y; 16 } 17 else{ 18 document.write("一样大") 19 } 20 } 21 22 //函数体，判断两个整数比较的三种情况 23 a=size(5,4); 24 b=size(6,3); 25 26 //调用函数，实现下面两组数中，返回就大值。 27 document.write(" 5 和 4 的较大值是:"+a+"<br>"); 28 document.write(" 6 和 3 的较大值是:"+b ); 29 </script> 30 </head> 31 <body> 32 </body> 33 </html>
