JS函数的三种方式
函数,一段能够自动完成某些功能的代码块,函数的出现,既解决了重复使用重一功能的需求,又可以避免代码的臃肿性。
使用函数有两个要求:必须调用后才可以执行;函数名不要和关键字以及系统函数相同;
函数主要有三种,直接调用,参数传递,返回值。
直接调用:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圆的面积</title> 6 <script type="text/javascript"> 7 //求任意一个圆的半径,得到面积 8 function mianji(){ 9 var r=prompt("请输入圆的半径:"); 10 s=3.14*r*r; 11 alert("圆的面积是"+s); 12 } 13 mianji(); 14 </script> 15 </head> 16 <body> 17 18 </body> 19 </html>
参数传递:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圆的面积</title> 6 <script type="text/javascript"> 7 //求任意一个圆的半径,得到面积 8 function miaji(r){ 9 s=3.14*r*r; 10 alert("圆的面积为:"+s); 11 } 12 miaji(2); 13 miaji(3); 14 15 </script> 16 </head> 17 <body> 18 19 </body> 20 </html>
但是在一般的前端开发中,使用的都是第三种,也就是返回值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>函数</title> 6 <script type="text/javascript"> 7 //返回值 8 function getSum(n,m){ 9 var sum=0; 10 for(var i=n;i<=m;i++){ 11 sum+=i; 12 } 13 //返回计算的值 14 return sum; 15 } 16 console.log(getSum(1,100)); 17 </script> 18 </head> 19 <body> 20 </body> 21 </html>
It works on my machine