第三周第四天笔记

弹出变量的类型：alert(typeof num);
其他数据类型转化为number数据类型
- 一个严格转换：Number();转换的字符串中只能存在数字，不能存在其他字符；即"123"；可以保留小数；
- 两个非严格转换：parseInt()-只能转化为整数；parseFloat()-可以保留小数；
  - 如：var num="123.6666美好345";其中parseInt(num)转换结果为123；parseFloat(num)转换结果为123.6666；Number(num)转换结果为NaN;
- 如果转换失败的话，返回的结果是NaN:not a number;不是数字；但NaN是number数据类型；
关于NaN:
- NaN是number数据类型；
  - 函数中在没有传实参时，两个变量相加，则值为NaN;
```
function sum(m,n){
        alert(m+n);
        //当没有传实参的时候，拿到的n=undefined;m=undefined;
        //undefined+undefined=NaN;
    }
    sum();
```
- isNaN()判断是否为非有效数字（即判断是否为NaN）；非有效数字（为NaN时）：true；有效数字：false；
循环由4部分组成：1）定义 2）条件 3）语句 4）自增；
常见的循环方式：
- for(){}:数组，字符串，实参函数的类数组arguments，元素节点集合htmlCollection；
- for in():普通对象{}；
- while(){}和for循环的区别和联系
  - 用while()循环也可以实现for()循环的四步；
  - for循环一般用在循环次数固定；while()循环次数不固定；
- do..while() 不管条件是否成立，都会先执行一次语句；
函数定义时，用的是形参；函数调用时，传的是实参；
函数自带的参数机制叫做arguments;适用的情况：在形参个数不确定的情况下，通过arguments来拿到传进来的实参；
- arguments: 能拿到实参，并且以类数组的形式展现；类数组也是对象，是对象都有属性和方法；
- arguments.callee 拿到的是当前函数本身；
- arguments.length 拿到实参的长度/个数；

<script>
    //当形参个数不确定的情况下，通过arguments来拿到传进来的实参；
    function sum(){
        var total=0;
        //遍历arguments中的每一个，进行过滤后，再进行累加；
        for(var i=0;i<arguments.length;i++){
            //过滤
            arguments[i]=Number(arguments[i]);
            if(!isNaN(arguments[i])){
                total+=arguments[i];
            }
        }
        //把求和的结果，返回给sum();
        return total;
    }
    var mass=sum(1,2,3,4,5,6,7,"2","3px");
    console.log(mass);
    document.write(mass);
</script>

数字常用保留小数的方法：toFixed(要保留的小数位数)四舍五入的保存小数位数；如console.log(parseFloat("123.5555px").toFixed(2));输出的结果为"123.56"，需注意的是通过parseFloat转化的结果为number类型，但再通过toFixed转化后，就变为string类型；
属性和方法的区别：
- 属性没括号，方法有括号；方法本质就是对函数的调用；
- 对象的属性不会报错，如果没有，出现undefined；方法不存在的话，会报错；
- 属性操作："."和[ ];
  - 如果遇到变量，属性名[变量名] ；切记：千万不要给变量加引号；变量属性不能用"."；
  - 如果遇到属性名为数字，属性名[1],不能用".1"；
参数：分为两种；
- 形参：
  - 形参是私有变量；
  - 如果定义了形参，但没有赋值，拿到是undefined;
- 函数自带的参数机制arguments
  - arguments可以打印出实参，以类数组的形式打印出来；
  - 属性名0,1,2可以找到相对应的属性值；
  - arguments.callee;代表当前函数本身；
  - arguments.length;打印出实参的个数；
返回值的设置
- 函数返回值通过return来返回；
- 获取值的时候，需要设置返回值；不需要的时候，不需要设置返回值；
- 函数定义中未设置返回值，此时函数为一个操作，而不是一个数值，所以调用函数的结果输出的值为undefined;

<script>
    //需求1.取值：获取div中的内容，将其弹出；
    var odiv=document.getElementsByTagName("div")[0];
    function get(ele) {
        var mass=ele.innerHTML;
        return mass;//设置返回值
    }
    var st=get(odiv);
    alert(st);
    //需求2.设置：修改div中的内容为12345；
    function set(ele){
        ele.innerHTML=12345;
    }
    var stm=set(odiv);//因函数中未设置返回值，所以此时set()为一个方法操作，不是一个数值，所以此时拿到的值为undefined;
    alert(stm);
</script>

运算符：

算术运算符：+,-,*,/,%

加号"+"：1）字符串拼接（只要不是数字间相加，其余的全部拼接）；2）加法运算:全部是数字之间的加法；
- 减号"-",乘号"*",除号"/",取余"%":全部进行数学运算，会默认进行数据转换（按照严格转换Number());
- 例：("123px"+3)=123px3；("123px"*-/%3)=NaN;
- 取余运算的运用：通过取余来设置不同的特定样式；与类选择器相配合，精简代码；

//实现索引值0,1,2下的元素背景色不同设置；
<script>
   var oli = document.getElementsByTagName("li");
   for (var i = 0; i < oli.length; i++) {
       //1.最简洁的思路
       oli[i].className = "bgc" + i % 3;
       //2.if...else的使用
       if(i%3==0){
           oli[i].className="bgc0";
       }
       if(i%3==1){
           oli[i].className="bgc1";
       }
       if(i%3==2){
           oli[i].className="bgc2";
       }
       //3.switch()方法实现
       switch(i%3){
           case 0://条件
               oli[i].className="bgc0";//语句
               break;//隔断循环
           case 1:
               oli[i].className="bgc1";
               break;
           default:
               oli[i].className="bgc2";
               break;
       }
   }
</script>

比较运算符：>,>=,<,<=,==,!=,===,!==

严格比较===:不仅在乎结果，而且在乎数据类型;非严格比较==：只在乎结果，不在乎数据类型；

   //==非严格比较，===严格比较
    console.log(123=="123");//结果打印出true;
    console.log(123==="123");//结果打印出false;因两者数据类型不同；

逻辑操作符：&&，||，！

&&：代码a && b中，若a为真，返回b；若a为假，返回a；
||：代码a || b中，若a为假，返回b；若a为真，返回a；
验证：

 <script>
     //知识点1："||"在用于判断时的应用
     var temp="tiankong";
     var mm=temp||"meihao";
     console.log(mm);//结果为："tiankong"
     var temp1=false;//可以是undefined，只要为假；
     var mm1=temp1||"meihao";
     console.log(mm1);//结果为："meihao"
     var temp2;
     var ttn=null;
     var mm2=temp2||ttn;
     console.log(mm2);//结果为："null"；
     //总结：总结：代码a || b 中，1）如果a为真，b不运行，返回的结果为a的内容，不只是true，而是a的内容;2）如果a为假，b运行，返回的结果为b的内容，b可以是真，也可以是假，返回的都是b;（可以是false,undefind，null）；
 
     //知识点2："&&"在用于判断时的应用
     var xmp="tiankong";
     var nn=xmp && "meihao";
     console.log(nn);//结果为："meihao"；
 
     var xmp1="tiankong";
     var xxn;
     var nn1=xmp1 && xxn;
     console.log(nn1);//结果为："undefined"；
 
     var xmp2;
     var nn2=xmp2 && "meihao";
     console.log(nn2);//结果为："undefined"；
 
     var xmp3;
     var xxn3=null;
     var nn3=xmp3 && xxn3;
     console.log(nn3);//结果为："undefined"；
 
     var xmp4=(4==5);
     var nn4=xmp4 && xxn4;
     console.log(nn4);//结果为："false"；
     //总结：代码a && b 中，1）如果a为假，b不运行，返回的结果为a的内容（可以是false,undefind，null）;2）如果a为真，b运行，返回的结果为b的内容，b可以是真，也可以是假，返回的都是b; 
 </script>

实例应用：函数调用时，"||"对实参赋值与否的应用

 <script>
     var ary=[1,2,3];
     var ary1=[4,5,6];
     function add(arg) {
         //函数中如果没有传实参，形参值就为undefined；
         arg=arg || ary;
         //含义：如果arg为真，即函数中传入实参，那么arg就为实参值；如果arg为假，即函数中没有传入实参，那么arg就为ary;
         console.log(arg);
     }
     add();//执行函数后，打印的结果为：[1,2,3]；
     add(ary1);//执行函数后，打印的结果为：[4,5,6]；
 </script>

赋值运算符：=，+=，-=，*=，/=，%=；
运算符的优先级：算术 > 比较 > 逻辑 > 赋值

真假情况：
- 假：共6个；空字符串“”，0,false,null,undefined,NaN;
  - 6个假中有两个为number类型：0，NaN；
- 真：除了假全是真；注：字符串中有空格的情况为真，即"空格";
条件判断：
- if..else均存在，两种写法；
  - if(条件1){语句1}else{语句2}
  - 条件?语句1:语句2;
- 如果只有一种条件，有三(五)种写法：
  - if(条件){语句};
  - if(条件) 语句;
  - 条件?语句:null;
  - 9%3==0 && alert("天空");注：其中alert()会运行，但是alert()的返回值为undefined;
  - 9%3!=0 || alert();

<script>
    //if条件判断
    if(9%3){
        alert("9是3的倍数");
    }else{
        alert("不能整除");
    }
    //三目：三元表达式：条件？语句1：语句2；
    9%3==0?alert("9是3的倍数"):alert("不能整除");
    //只有if无else
    if(9%3==0){
        alert("meihao");
    }
    //简写：去掉花括号；
    if(9%3==0) alert("meihao");
    //三目简写：
    9%3==0?alert("meihoa"):null;
</script>

多重选择函数switch(){};

switch(变量){ //变量与case定义的符号相对应
   case a:
       语句1；
       break;
   case b:
       语句2；
       break;
   default:  //所有情况都不满足时输出值
       语句3；
       break;        
   }

每一种case情况其实都是相当于在用“===”进行严格比较

实例：九九乘法表的制作

<script>
    //思路1：运用简单的JS操作输出运算表
    //需求1.获得九行，所以需要循环
    for(var i=1; i<=9; i++){
        //需求2.在每一行中添加运算表
        for(var j=1; j<=i; j++){
            document.write(j+"*"+i+"="+j*i+"&nbsp;&nbsp;");
        }
        document.write("<br/>");
    }
    //思路2：给body中添加li,span的元素标签；进行操作
    var oul=document.getElementsByTagName("ul")[0];
    var str="";
    for(var i=1; i<=9; i++){
        //添加各行变色；
        str+="<li>";
        for(var j=1; j<=i; j++){
            str+="<span>"+j+"*"+i+"="+j*i+"</span>";
        }
        str+="</li>";
    }
    oul.innerHTML=str;
    var oli=document.getElementsByTagName("li");
    for(var m=0; m<oli.length; m++){
        oli[m].className="bgc"+m%3;
        //1).保存住不同m值：利用自定义属性
        oli[m].oldbgc="bgc"+m%3;
        oli[m].onmouseover=function () {
            this.className="change";
        }
        oli[m].onmouseout=function () {
            this.className=this.oldbgc;
        }
        //2).保存住不同m值：利用闭包函数保存
        (function (index) {
            //m值每变化一次，就调用一次函数，就创建一个私有作用域，其中每一个私有作用域中，保存每一个m实参值，赋给形参index，进而供给函数内部使用，即每一个私有作用域都保存一个index的实参值，所以在鼠标事件异步调用时，可以获取index值；
            oli[m].onmouseover=function () {
                //oli[m]可以换做oli[index]，m在自己本身的私有作用域中查找不到，需在公共作用域中查找，而使用index值，则可以在自己的私有作用域中查找到；
                this.className="change";
            }
            oli[m].onmouseout=function () {
                this.className="bgc"+index%3;
            }
        })(m);
    }
</script>