你好javascript day7

1）作用域

var a=1;//全局变量
function addNumber(){
var a=2;//局部变量
a++;

console.log(a,"1");//3
};
console.log(a,"2");//1
addNumber();
console.log(a,"3");//1
//打印顺序 2  1  3

当在函数中定义变量时，这个变量的作用范围仅在函数中

外面调用不到的主要原因是因为a的作用范围仅在函数中，当函数执行完成后a就会自动被销毁

我们认为定义在函数外面的变量，叫做全局变量

定义在函数里面的变量，叫做局部变量

 

当在函数外打印变量，这个变量肯定就是全局变量

定义的局部变量不会改变全局变量

我们认为一旦在函数中定义了局部变量，那么这个局部变量名字如果和全局变量名相同

全局变量将无法直接在函数中使用了，局部变量的优先级高

       var a=3;
        function abc(a){
            // 参数就是局部变量，虽然没有使用var，但是一旦是确定为参数，就相当于
            // 定义了一个局部变量   var a
            console.log(a);//10
            a++;
        }

        abc(10);
        console.log(a);//3 */

        var obj={a:1};
        function abc(o){
            // 没有更改局部变量
            // o.a=10;
            // 这里才是真正更改局部变量，更改变量的引用地址
            o={a:10};

        }
        abc(obj);
        console.log(obj.a);

        var a=1;
        // 命名函数在代码中定义以后，script被执行时，会自动将函数放在堆中
        // 并且将函数存储在栈中的全局变量，定义函数全局是最为优先，最早的
        // 当代码执行到135行  var a=1时，才开始重新定义变量a，而这个变量a
        // 与栈中的全局函数a重名，因此变量a就会覆盖全局函数a
        function a(a){
            console.log(a);//(2)
            var a=3;
            console.log(a);//(3)
        }

        console.log(a);//(1)  1
        a(10);  //1不是一个函数所有报错
        console.log(a);//(4)

2）回调函数与递归函数

认识回调函数

       function abc(fn){
            // fn就是回调函数
            fn(3,5);
        }


        function getSum(a,b){
            console.log(a+b);
        }

        abc(getSum); 
       
        // 函数也是对象，当带入参数时

        // 桥接
         function countNumber(fn){
            // return fn(3,5);
            var s=fn(3,5);
            return s;
        }

        function getSum(a,b){
            return a+b;
        }

        function getMultiplication(a,b){
            return a*b;
        }


        // 需要计算3+5;
       var s=countNumber(getSum);
       console.log(s);
    //    需要计算3*5;
       var s=countNumber(getMultiplication);
       console.log(s); 

        // 回调函数可以应用在某个事件完成或者某个时间达到再去执行函数
        var i=0;
        // 这是一个方法，定时器，毫秒（单位）
        // setInterval(执行函数,间隔多长时间执行一次)
        // 时间间隔方法，每间隔1000毫秒执行一次方法，
        // 在这里animation函数就是回调函数，每间隔1000毫秒回调执行一次这个函数
      var ids=setInterval(animation,1000);
    //   返回一个值，这个值就是当前定时器的标识id

       function animation(){
            i++;
            console.log(i);
            if(i>10){
                // clearInterval清除定时器，ids就是刚才设置定时器时的返回标识id
                clearInterval(ids);
            }
       }


       var i=0;
       var ids=setInterval(animation,1000);
       function animation(){
            i++;
            console.log(i);
            if(i>10){
                clearInterval(ids);
            }
       }

认识递归函数

 递归如果没有限制的话就会造成堆栈上限溢出

 递归  自己执行自己

    var obj={
        a:{
            a:{
                a:{
                    a:{
                        a:null,
                        value:5
                    },
                    value:4
                },
                value:3
            },
            value:2
        },
        value:1
    };

    // 满足条件进入递归
    function showObj(o){
        console.log(o.value);
        if(o.a) showObj(o.a);
    }

    showObj(obj)

    // 当希望遍历具备有深度数据结构时，通常使用递归或者while更为方便
    // 当希望遍历具备广度数据结构时，一般使用for循环遍历
    // 遍历  全部每个逐个查看

3）数组

数组    数据的组合

 

        数组的新建方式

        字面量创建
        var arr=[4,5,3,6,2,1];
        这种叫构造函数创建
        var  arr1=new Array(4,5,3,6,2,1);
        console.log(arr,arr1);

        如果通过数组的构造函数创建数组，参数仅有1个，且这个参数是正整数，则表示新建
        一个具备该正整数长度的空数组，里面有这个长度的若干空元素
        如果是负数或者小数时，报错
        var arr2=new Array(5);//数组长度为5  没填入值  --》 undefined
        var arr2=new Array(3.5);//错误  必须是正整数
        如果输入的不是数值，是其他类型时，这个数据就会作为该数组的第0个元素，长度为1
        var arr2=new Array("a");//填入一个字符a  长度1
        console.log(arr2[0]);

长度就是元素的个数

下标是数组内每个值对应的编号 从零开始

数组的最大下标等于数组的长度减一  ---》 arr[最大下标]===arr.length-1

        数组的最大下标是数组的长度-1(元素个数-1);
        var arr=[1,2,3,5,,2,3,,5,2];//逗号间为空--》 即填入一个undefined 占一个下标
        var arr=[1,2,3,5,2,3,5,2];
        console.log(arr[4])
        console.log(arr.length);//就是数组的长度，也是元素的个数
        arr[4]=20;
        arr[arr.length-1]=20;
        arr[arr.length]=20;//在数组的最尾部添加一个元素
        console.log(arr);

arr.length=3;//数组的长度是可以被修改  等于0数组直接清空

4）对象的引用

        var o1={a:1};
        var o2=o1;
        o2.a++;
        console.log(o1.a); //a=2
        // 我们认为除了数值，字符，布尔值以外的其他对象，是被存储在堆中，并且有一个引用地址
        // 我们是将这个引用地址赋值给变量的，如果将一个变量赋值给另一个变量，就是将这个引用
        // 地址赋值给另一个变量，因此实际这两个变量指向的引用地址完全相同，更改其中一个，就
        // 会引起另一个的改变

       var o1={a:1};
        var o2={a:1};
        console.log(o1===o2);//false
        // 针对对象来说，判断是否相等不是根据内容是否相同，而是根据两个对象的引用地址是否相同
        // 如果使用新的{}产生的对象那就是新的地址

        var prev;
        function prevObj(o){
            if(prev){
                prev.a=0;
            }
            prev=o;
            prev.a=10;
        }

        var o1={};
        var o2={};
        prevObj(o1);
        // 到现在为止prev和o1的引用地址相同
        // o1.a=10;
        prevObj(o2);
        // 到现在为止  o1.a变成0
        // prev重新设置为o2,prev和o2的引用地址相同
        // o2.a=10;

5)切换图片

案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      li {
        float: left;
        margin-left: 20px;
        text-align: center;
         20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #ff0000;
      }
      div {
         400px;
        height: 180px;
        background-size: 100% 100%;
        background-image: url("./img/a.png");
        position: absolute;
        transition: all 1s;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li id="li1">1</li>
      <li id="li2">2</li>
      <li id="li3">3</li>
      <li id="li4">4</li>
      <li id="li5">5</li>
    </ul>
    <div id="div0"></div>

    <script>
      var prevDot, div0;
      init();
      function init() {
        div0 = document.getElementById("div0");
        for (var i = 1; i < 6; i++) {
          var li = document.getElementById("li" + i);
          li.onclick = clickHandler;
        }
        changeDot(document.getElementById("li1"));
      }

      function clickHandler() {
        changeDot(this);
        var imgSrc = callBackDiv(this);
        div0.style.backgroundImage = imgSrc;
      }

      function changeDot(li) {
        if (prevDot) {
          prevDot.style.backgroundColor = "rgba(0,0,0,0)";
        }
        prevDot = li;
        prevDot.style.backgroundColor = "red";
      }

      function callBackDiv(li) {
        if (li.id === "li1") return "url(./img/a.png)";
        if (li.id === "li2") return "url(./img/b.png)";
        if (li.id === "li3") return "url(./img/c.png)";
        if (li.id === "li4") return "url(./img/d.png)";
        if (li.id === "li5") return "url(./img/e.png)";
      }





      function circleArea(r){
        return 3.1415926*r*r;
      }

      var a=circleArea(30);
      console.log(a);


      function rectArea(w,h){
        return w*h;
      }

      var s=rectArea(30,50);
      console.log(s);
    </script>
  </body>
</html>