这节是根据慕课网和JavaScript DOM编程艺术一书加起来做的笔记
什么是函数
如果需要多次使用同一段代码,可以把它们封装成一个函数。函数(function)就是一组允许在你的代码里随时调用的语句。每个函数实际上是一个短小的脚本。
如:要完成多组数和的功能。
1 var sum; 2 sum = 3+2; 3 alear(sum); 4 5 sum = 7+8; 6 alear(sum); 7 ......//不停的重复两行代码
如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码的麻烦。使用函数完成:
1 function add(a,b){ 2 sum = a+b;//只需要写一次就可以 3 }; 4 add2(3,2); 5 add2(7,8); 6 ......//只需要调用函数就可以
定义函数
定义函数语法
1 function 函数名(参数argument){ 2 函数体statements; 3 } 4 //function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。
1 function shout(){ 2 var beatles = Array("John","Paul","George","Ringo"); 3 for (var count = 0; count < beatles.length; count++){ 4 alert(beatles[count]); 5 } 6 } 7 //这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。 8 shout();调用函数,执行脚本里的动作
完成对两个数求和并显示结果的功能:
1 <script type="text/javascript"> 2 function add2(){ 3 sum = 3+2; 4 alert()sum; 5 } 6 add2(); 7 </script>
函数调用
函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。
第一种情况:在<script>标签内调用。
1 <script type="text/javascript"> 2 function add(){ 3 sum = 1+1; 4 alert(sum); 5 } 6 add();//调用函数,直接写函数名。 7 </script>
第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数。
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function add2(){ 5 sum = 5 + 6; 6 alert(sum); 7 } 8 </script> 9 </head> 10 <body> 11 <form> 12 <input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件,直接写函数名 13 </form> 14 </body> 15 </html>
有参数的函数
其实,定义函数还可以如下格式:
1 function 函数名(参数1,参数2){ 2 函数代码 3 }
在定义函数时,你可以为它声明任意多个参数,只要用逗号把它们分隔开来就行。在函数内部,你可以像使用普通变量那样使用它的任何一个参数。
按照这个格式,函数实现任意两个数的和应该写成:
1 function add2(x,y){ 2 sum = x + y; 3 document.write(sum); 4 } 5 //x和y则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。
实现如下功能:
定义函数实现三个数的和,函数名为add3。
计算5、8、3/7、1、4两组三个数的和。
1 <script type="text/JavaScript"> 2 function add3(x,y,z) { 3 sum = x + y +z; 4 document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>"); 5 } 6 add3(5,8,3); 7 add3(7,1,4); 8 </script>
返回值的函数
函数不仅能够(以参数的形式)接收数据,还能够返回数据。我们完全可以创建一个函数并让它返回一个值、一个字符串、一个数组或是一个布尔值。这是需要用到return语句。
1 function multiply(num1,num2){ 2 var total = num1*num2; 3 return total; 4 }
之前通过"document.write"把结果输出来,现在使用函数输出
我们只要把"document.write(sum)"这行改成如下代码:
1 function add2(x,y){ 2 sum = x + y; 3 return sum; //返回函数值,return后面的值叫做返回值。 4 } 5 //还可以通过变量存储调用函数的返回值: 6 result = add2(3,4);//语句执行后,result变量中的值为7。
例:下面这个函数只有一个参数(一个华氏温度值),它将返回一个数值(同一温度的摄氏温度值):
1 <script type="text/javascript"> 2 function convertToCelsius (temp) { 3 var result = temp - 32; 4 result = result / 1.8; 5 return result; 6 } 7 //函数的真正价值体现在,我们还可以把它们当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋给一个变量: 8 var temp_fahrenheit = 95; 9 var temp_celsius = convertToCelsius(temp_fahrenheit); 10 alert(temp_celsius); 11 </script>
1 function square(num){ 2 total = num*num; 3 return total; 4 } 5 var total = 50; 6 var number = square(20); 7 alert(total);
这是错误的,number的值为400,但是这里alert弹出的是total的值,应该是50.
这些代码将不可避免地导致全局变量total的值发生变化。
全局变量total的值变成了400.我的本意是让square()函数只把它计算出来的平方值返回给变量number,但因为未把这个函数内部total变量明确地声明为局部变量,这个函数把名字同样是total的那个全局变量的值也改变了。
把这个函数写成如下的样子才是正确的:
1 function square(num){ 2 var total = num*num; 3 return total; 4 } 5 var total = 50; 6 var number = square(20); 7 alert(total); 8 </script>
正确结果
我是根据慕课网学习计划实际敲完代码,去找些资料,有些内容书上有更详细的解释,实际操作之后再去看书就能理解了。