首页 > 代码库 > javascript学习笔记(二):定义函数、调用函数、参数、返回值、局部和全局变量

javascript学习笔记(二):定义函数、调用函数、参数、返回值、局部和全局变量

定义函数、调用函数、参数、返回值

关键字function定义函数,格式如下:

function 函数名()
{

函数体

}

调用函数、参数、返回值的规则和c语言规则类似。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <script>
 9         function sum(a,b)      //定义一个加法函数,有两个参数a和b
10         {
11             var x=a+b;
12             return x;      //return返回值
13         }
14     var s=sum(1,2);       //使用这个函数
15     alert(s);           //将结果弹窗显示
16     </script>
17 </body>
18 </html>

 

用一个按钮调用函数

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <script>
 9         function sum(a,b)        //定义一个加法函数
10         {
11             var x=a+b;
12             alert(x);            //将结果弹窗显示
13         }
14     </script>
15     <form>
16         <input type="button" value="按钮" onclick="sum(10,20)">  //用按钮调用函数
17     </form>
18 </body>
19 </html>

或者

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <script>
 9         function sum(a,b)    //定义一个加法函数
10         {
11             var x=a+b;
12             alert(x);            //将结果弹窗显示
13         }
14     </script>
15     <button onclick="sum(10,20)">按钮</button>    
16 </body>
17 </html>

调用效果如下:

技术分享

 

将函数的返回值替换标签内容

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <p id="pid">hello</p>
 9     <script>
10         function demo(name,age)    
11         {
12             return "hello:"+name+",我的年龄是:"+age;            
13         }
14         document.getElementById("pid").innerHTML=demo("tom",18);//将demo函数的返回值替换id="pid"的标签内容
15     </script>
16 </body>
17 </html>

 

局部变量和全局变量

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <script>
 9         var x=10;           //全局变量
10         function demo(name,age)    
11         {
12             var y=10;        //局部变量,只能在函数内使用
13             z=10;          //全局变量         
14         }15     </script>
16 </body>
17 </html>

 

javascript学习笔记(二):定义函数、调用函数、参数、返回值、局部和全局变量