函数 - 《JavaScript》

形参和实参
arguments
return
作用域
递归
事件驱动函数

js中函数的概念;
函数当他被调用时执行的可重复使用的代码块

函数定义：
【注】无参函数的声明
【格式】
function 函数名（参数）{
函数体；
}
【注】函数体内，外面怎么写js代码这里就怎么写
【注】形参：我们可以把函数中不确定的值当作形参（形式上的参数）进行声明
有参函数的封装过程：
function 函数名(形参…){
函数体；
}

 //函数声明
            /* function print(n){
                for(var i=0;i<n;i++){
                    document.write("hello world<br>");
                }
            }
            //函数调用  实参给形参赋值   5 实参   n形参
            print(5); */
            function add(num1,num2,num3){
                alert(num1 + num2 + num3);
            }
            add(1,2,3);

形参和实参

函数的参数和变量是一样使用。
形参就是在函数定义时，函数名后面的参数，不能用var修饰
实参就是调用时，函数名后面的参数

arguments

计算所有传入参数的和。具体传多少参数不确定。
【注】arguments
【注】在每一个函数内，都有一个内置数组，是一个变量，叫做arguments。arguments可以存储当前函数传入的所有参数，而且是通过传参的顺序，进行排列的。
【注】arguments.length输入传入参数的个数
【注】访问arguments的里面的数据，需要通过对应的房间号/下标进行访问
【注】下标可以配合循环去使用

/*  function sum(){
            //    alert(arguments.length); 
            alert(arguments[2]);
           }
           sum(3,4,5); */
           function sum(){
               var sum = 0;
               for(var i = 0; i < arguments.length ;i++){
                   sum += arguments[i];
               }
               alert(sum);
           }
           sum (3,4,5);

return

         【注】希望能够在函数外部获取到，函数调用的结果<br />            【注】如果我们要是外部获取到函数内运行的结果，可以通过return语句跟后面的要返回的值来实现返回值<br />            【注】return后面所跟表达式的值，就是当前函数调用的值<br />            【注】函数执行到return语句以后，就执行结束，跟在return后面其他的语句，执行不到。

   function add(num1,num2){
                return num1 + num2;
            }
            add(3,4);
            var result = add(3,4);
            alert(result);

作用域

作用域：就是起作用的范围，或者说是有效范围。每一个函数的声明都会形成一个作用域
全局作用域：
全局作用域声明的变量==>全局变量
局部作用域==>函数:
局部作用域声明的变量==>局部变量，局部变量生命周期和生效的范围，都是声明该变量的函数区域。当函数调用完成后，就直接销毁。

如果全局作用域和局部作用域变量重名，我们就采取就近原则，当前访问这个变量离哪个作用域近，就是哪个作用域。

 /*  var a = 10;
             function sum(){
                 a = 5;
             }
             alert(a);//10
             sum();
             alert(a);//5 */
             var a = 10;
             function sum(){
                 var a = 5;
                alert(a);//5
             }
             alert(a);//10
             sum();
             alert(a);//10

递归

递归概念：
函数可以自己调用自己，称为递归调用
【注】我们可以写出递归，但是我们并不知带它是如何得出结果。
函数的递归调用
方法：
1. 先去找临界值，即无需计算，获得的值
2. 找这一次和上一次的关系
3. 假设当前函数已经可以使用，调用自身计算上一次的运行结果，在写出这次的运行结果。
【特点】
1. 必须有参数
2. 必须有return
【注】递归会在短时间内，使内存剧增


             //1加到n的和    sum(100) = sum(99) + 100;
             //             sum(n) = sum(n - 1) + n;
            /*  function sum(n){
                 if(n == 1){
                     return 1 ;
                 }else{
                     return sum(n - 1) + n;
                 }
             }
             alert(sum(100)); */
             function print(n){
                if(n == 0){
                    return;
                }else{
                    document.write("hello world<br>");
                    return print(n - 1);
                }
             }
             print(5);

事件驱动函数

在和页面交互的过程中所调用的函数，该函数称之为时间驱动函数。
和页面交互的行为称之为事件。比如：鼠标点击某个按钮时（onclick）、鼠标浮动或离开
到到某个区域时（onmouseover、onmouseout）、文本框获取焦点和失去焦点时（onfocus、onblur等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    /*
        我们可以通过document.getElementById找到符合条件的标签节点。
        然后我们可以通过事件驱动函数，给当前的按钮绑定一系列的操作。完成用户交互
    */
        window.onload = function(){ //写在这里的代码，在页面加载完成以后执行
            var Btn = document.getElementById("btn");
            var Txt = document.getElementById("txt");
            //给按钮添加事件驱动函数
            //单击onclick  这个函数是在按钮被点击以后 触发的
            Btn.onclick = function(){
                // alert("你也配点我？");
                //Txt.value 是字符串
                Txt.value = "呱呱呱呱呱";
            }
        }
    </script>
</head>
<body>
    <input type="text" value = "咕噜咕噜" id = "txt"/>
    <input type="button" value = "我是一个按钮" id = "btn"/>
</body>
</html>