4-函数-上

1：函数的概念和作用

定义：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

作用：可以使一段代码块重复的使用。

2：函数的编写

function funcName(){}

3：函数调用

调用：什么时候用到这个函数的功能，什么时候就去调用这个函数

调用方式：

1：手动调用。即：函数名称()。

2：事件驱动。

4：事件的概念种类及作用

1：什么是事件？

通过鼠标或者键盘在浏览器窗口或者网页元素(按钮、文本框)上执行的操作，我们称之为事件(Event)。

2：什么是事件驱动？

由事件引发的一连串程序的动作，称为事件驱动(Event-Driver)。

举个例子：人被挨打后或者听到葡萄后做出的反应。

事件类型：鼠标事件，键盘事件，网络事件等。

常用事件：onclick，ondblclick，onmouseover，onmouseout，onkeydown，onkeyup。

5：事件和循环结合打印九九乘法表。

6：函数的好处

7：参数的声明

定义：在调用函数的时候，我们可以向其传递值，这些值被称为参数。多个参数用逗号(,)分割。

8：参数的传递

应用：

1：编写一个函数，计算两个数字的和、差、积、商。

要求：使用传参的形式。

function sum (a,b) {
     console.log(a + b);
     console.log(a - b);
     console.log(a * b);
     console.log(a / b);
}
sum(2,1);

2：编写一个函数，计算三个数字的大小，按从小到大顺序输出。

function sort(a, b, c) {
    if( a > b) {
        if(a > c) {
               if(b > c) {
                      console.log('顺序：' + a + '、' + b + '、' + c);
               } else {
                      console.log('顺序：' + a + '、' + c + '、' + b);
               }
        } else {
               console.log('顺序：' + c + '、' + a + '、' + b);
        }
    } else {
        if( b > c) {
               if(a > c) {
                      console.log('顺序：' + b + '、' + a + '、' + c);
               } else {
                      console.log('顺序：' + b + '、' + c + '、' + a);
               }
        } else {
               console.log('顺序：' + c + '、' + b + '、' + a);
        }
    }
}

1：函数创建方式

1：函数声明式。

function ( num1,num2 ) {
    return num1 + num2;
}

2：函数表达式（函数字面量）。

var fun2 = function (a,b) {
    return a + b;
}

3：函数构造法。

var fun3 = new Function (‘n1’,’n2’,‘return n1 + n2’);

注：函数表达式也可以指定函数名称，而函数声明是不可以省略函数名称。直接用函数表达式指定的函数 名称调用函数会报错。

2：声明式和表达式的区别

1：JS解析器如何区分是函数声明还是函数表达式？

如果一条语句是以function关键字开始，那么这段会被判定为函数声明。而函数声明是不能被立即执行的，这无疑会导致语法的错误(SyntaxError)，因此就必须有一个办法，使解析器可以将之识别为函数表达式。

既然解析器识别函数定义的条件是以function关键字开始，那么只需要在function关键字前面有任何其他的运算符，就会从函数的定义转变为函数表达式。

2：如何将函数声明式转换成函数表达式？

~function(){}();

+function(){}();

-function(){}();

void function(){}();

(function(){})();

前几个转换方式开起来比较丑，通常都用最后一种来转换。

括号的作用：1确立运算优先级，2分组运算符。

3：形参和实参

形参：函数定义时声明的参数，我们称为形参(形式参数)。

function (a,b) {};
// a,b就为形参

实参：函数调用时传入的参数，我们称为实参(实际参数)。

function sum(a,b) {
    return a + b;
}
sum(2,2);
// 2,2就为实参

4：arguments

定义：用来存放函数调用时传入的实参的对象(数组)。（实参列表）

// Eg:(1)
function sum (a) {
     console.log(arguments);          //[11,2,3]
     console.log(arguments.length);   //3
}
sum (11,2,3); 

// Eg:(2)因为arguments类似数组 所以可以遍历
function sum (a,b,c) {
     for(var i = 0;i < arguments.length;i++) {
            console.log(arguments[i])  // 1 ,2,4
     }
}
sum (1,2,4);

1. 求形参长度

function sum (a,b,c,d) {
     console.log(sum.length);   //4
}
sum(1,2,4);

function sum (a,b,c,d) {
     if (sum.length > arguments.length){
            console.log('形参多了');
     }else if (sum.length < arguments.length){
            console.log('实参多了');
     }else{
            console.log('相等')
     }
}
sum(1,2,3);

结论：函数调用时传入的参数数量和函数定义时声明的参数数量没有关系，唯一有关系的就是参数顺序。

不定参，实参可以比形参多，形参也可以比实参多

// Eg:(1)
function sum (a) {
      document.write(a); //11
}
sum(11,2,4)
// Eg:(2)
function sum (a,b,c,d) {
     document.write(a);   //11
     document.write(d);   //undefined
}
sum(11,2,4);

举个例子：输出H5 2017888班所有学生的名字。

5：return关键字

定义：用来规定从函数返回的值。

注意事项：

1：使用return语句以后，函数会停止执行，并返回给定的值。但是整个JS代码并不会停止执行。

2：如果函数没有显式的定义return语句，那么当函数代码段执行完毕后，默认会返回undefined。

6：JS解析顺序

1：读入第一个代码块。

2：做语法分析，有错则报语法错误(比如括号不匹配等)，并跳转到第五步。

3：对var变量和function定义做预编译处理。

4：执行代码段、有错则报错。

5：如果还有下一个代码段，则读入下一个代码段，重复第二步。

6：解析结束。

应用：

1：编写任意个数字的求和、差、积、商的函数。

function every() {
    var sum = 0;
    var che = 1;
    for(var i = 0;i < arguments.length;i++){
        sum += arguments[i];
        che *= arguments[i];
    }
    return sum +'、'+che;             
}
console.log(every(1,2));

2：封装$函数。

function $(id) {
    Return document.getElementById(id);
}

综合应用：

1：编写一个函数，计算任意两个数字之间所能组成的奇数个数，数字必须是个位数。比如： 计算0-3之间能组成的奇数个是01、21、31、03、13、23。

2：某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文。

函数部分小练习：

1. 求任意两个数的和

function sum (num1,num2) {
     var sum = num1 + num2;
     alert(sum);
}
sum(1,2);

2， 利用递归求100的阶乘。

function product (n) {
     if(n===1) {
            return 1;
     }
     return n*product(n-1);
}

3 .

<div id="box" style="width: 100px;height: 100px;background: red;"></div>
<input type="text" value="双11大促销" id="btn" />
<script type="text/javascript">
      function $(id) {
             return document.getElementById(id);
      }
      var box = $('box');
      var btn = $('btn');
      box.ondblclick = function () {
             console.log('您刚刚双击了box');
      }
      btn.onfocus = function(){
             btn.value=''
      }
      btn.onblur = function() {
             btn.value='双11大促销'
      }
</script>

4.求两个数中的最大值

function getMax (num1,num2) {
    return num1 > num2 ? num1 : num2;
}
console.log(getMax(1999,299) );

5 // 判断两个数是否相等

function isEqual (a,b) {
    alert (a == b);
}
isEqual(1,4);

6 打印一个五行无列的矩形

function rectangle () {
    for(var i = 1;i <= 5;i++){
        for (var j = 1;j <= 5;j++){
             document.write('*');
        }
        document.write('<br />');
    }
}
rectangle();

7.

使用函数完成任意数字阶乘的计算。

要求：页面上输入任意数字，点击按钮后计算阶乘。

function $(id) {
    return document.getElementById(id);
}
var date = $('date');
var btn = $('btn');
function jiecheng(n) {
    var sum = 1;
    for(var i=1;i<=n;i++){
        sum *= i;
    }
    return sum;
}
btn.onclick = function () {
    var val = date.value;
    console.log(jiecheng(val));
}