第一天：html+JavaScript函数

Posted 2020-07-20 fenr9

testjstry1.html

 

知识点1：求多组数据的和

function demo(a,b){
  var sum=a+b;
  return sum;
}
var v1=demo(20,10);
var v2=demo(12,10);
alert(v1);
alert(v2);


运行结果：弹出框提示和的值

知识点2：定义函数

function 函数名（）{
代码块
}
方式一：调用函数

 function demo(){
   var a=10;
   var b=10;
   var sum=a+b;
   document.write(sum);
//  alert(sum);
 }
 demo(); //调用函数

方式二：调用函数  

 <script>
 function demo(){
   var a=10;
   var b=10;
   var sum=a+b;
   alert(sum);
 }

</script>
<form>
   <input type="button" value="按钮的么" onclick="demo()">       
</form>

注意：form表单必须放在script外面

方式三：调用函数

 <script>

 function demo(){
   var a=10;
   var b=10;
   var sum=a+b;
   alert(sum);
 }

</script>

<button onclick="demo()">按钮</button>

知识点3：有参函数

 <script>

function demo(name,age){
    alert("我的名字"+name+",年龄"+age);

  }

</script>
<button onclick="demo(‘lin‘,20)">按钮</button>
<button onclick="demo(‘niu‘,20)">按钮</button>
运行结果：
界面存在两个按钮，点击不同按钮，弹出不同信息

知识点4：带返回值的函数

示例1：

function demo(){
  return "hello";
}
var aa=demo()+":Linda";
var bb=demo()+":Alice";
alert(aa);
alert(bb);
运行结果：弹出两个框，第一个框的内容是 hello：Linda；第二个框的内容是Hello：Alice

示例2：
1）

function demo(a,b){
  if(a>b){
    alert("a比较大");
  }else{
    alert("b比较大");
  }
}
 demo(100,90);
运行结果：弹出框，提示a比较大，但是不建议在函数中使用alert，建议如3）中所写
2）

function demo(a,b){
  if(a>b){
  return  alert("a比较大");
  }else{

  return alert("b比较大");

  }
}
 demo(100,90);

3）

function demo(a,b){
  if(a>b){
    return "a比较大";
  }else{
    return "b比较大";
  }
}
var aa=demo(10,90);
alert(aa);

运行结果：弹出框，提示b比较大

4)第四种方式增加P标签，所以不需要alert了

<p id="pid"></p>

<script>

 function demo(a,b){

   if(a>b){
     return "a比较大";
   }else{
     return "b比较大";
   }
 }
 var aa=demo(10,90);
 document.getElementById("pid").innerhtml=aa;
</script>
运行结果：
a比较大

5)可以不去创建aa变量

<p id="pid"></p>

<script>

 function demo(a,b){

   if(a>b){
     return "a比较大";
   }else{
     return "b比较大";
   }
 }

 document.getElementById("pid").innerHTML=demo(10,90);

</script>

运行结果：
b比较大


知识点5：局部变量和全局变量

var m=1;    //全局变量
function demo(){
  var i=10;
  X=11;
}
demo();    
alert(m);  

alert(X); 

alert(i);

说明：1.函数外面定义的m为全局变量    

     2.函数内部定义的X为全局变量（不用var标记且函数被调用一次后才成为全局变量）
     3.函数内部定义的i为局部变量

所以，如果注释了demo()函数，则alert(X)执行无弹出框；
     i为局部变量，所以alert(i)执行无弹出框；
     m为全局变量，所以alert(m)执行弹出框并显示m的值1；

ps：return语句后的语句不会再被执行