JS一起学03：js组成、下拉+text、字符串拼接、分号问题、数据类型、变量类型、作用域和闭包、命名、运算符、流程判断、调试、iNow、onchang

一、javaScript组成

    1、ECMAScript：解释器、翻译 ---------------------------------------------------------几乎没有兼容性问题

    2、DOM：Document Object Model --------操作HTML的能力----document--------有一些兼容性问题

    3、BOM：Browser Object Model -------------浏览器---------------window----------完全不兼容

    （各组成部分的兼容性，兼容性问题的由来）

二、下拉+text

var oSel=document.getElementById('sel');

var oBtn=document.getElementById('btn');

var oTxt=document.getElementById('txt');

var oDiv=document.getElementById('div1');

oBtn.onclick=function(){

    function setStyle(name,value){

oDiv.style[name]=value;

    }

    setStyle(oSel.value,oTxt.value);

}

三、字符串拼接

alert('abc'+12+5+'def');  ------abcd125def

（1）字符串和数字相加，会把数字转变成字符串

alert(12+5+'abcd'+'def');  ------ 15abcdefg

（2）程序从左向右执行

alert('abcd'+(12+5）+‘def'); ----abcd17def

乘法表：

1*1=1

1*2=2  2*2=4

1*3=3  2*3=6  3*3=9

1*4=4  2*4=8  3*4=12  4*4=16

 

var oUl=document.getElementById('ul1');

for(var i=0; i<9; i++){    //i代表第几行

    var s='<li>';

    for(var j=0; j<i+1; j++){

        s+='<span>'+(j+1)+'*'+(i+1)+'='+(j+1)(i+1)+</span>';

    }

    s+='</li>';

    oUl.innerHTML+=s;

}

四、分号问题

1. window.onload=function(){};  //此处是因为赋值，所以加分号，和function无关

即：元素.事件=function (){};

2. if/while循环/for循环/function(){}  不要加分号

站长工具--压缩

五、数据类型

1. 基本数据类型———不可拆分

（1）字符串string

（2）数字number

（3）布尔值boolean

（4）undefined

2. 混合数据类型——object

（1）数组array

（2）元素element

（3）方法function

六、变量类型

    1、类型：typeof运算符

        （1）用法：返回值

        （2）常见类型：number（包括NaN）、string、boolean、undefined、object（包括数组、空对象null）、function

    2、一个变量应该只存放一种类型的数据

    3、value获取到的是字符串   .alert(oTxt1.value+oTxt2.value);

    4、数据类型转换

    （1）显式（强制）

        A、parseInt：可以过滤掉数字后的非数字，和小数

        B、parseFloat：保留小数，可以带字母

        C、Number：保留小数，但不允许任何非数字成分，只能转纯数字。

例子：var s='12ebfm45'— parseFloat— '12'

           var s='12ebfm45'— Number— NaN

           var s='12451.11'— Number — 12451.11

           var s='12px';   s=Number(s);   alert(typeof s);  会弹出NaN。

        B、NaN的意义和检测

              NaN和NaN不相等

             NaN属于数字类型    alert(typeof NaN);---->number

文本框相加特别注意处：

一定要把两个都不是数字的情况放在第一个不是数字的情况前面：if(isNaN(num1)&&isNaN(num2)){

    alert('两个都不是数字');

}else if(isNaN(num1){

    alert('第一个不是数字');

}else{……}

    （2）隐式

        A、==先转换类型，再比较_————alert( 4=='4' );  返回true;

              ===不转类型直接比（既比类型又比值）alert(4==='4');返回false;

        B、< 、<=、>、>=、*、/、也会执行隐式转换————alert(4<'5');返回true;     var s='5';  s=s*'4';   alert(s); 隐形转换

        C、字符串与另一数字或字符串相减、乘除都会进行隐式转换     var a="12"; alert(a/2);----6（加号的作用有字符串连接、数字相加   var a="12.5"; alert(a-0+5);-----17.5）

        D、取余%

    （3）数字--->字符串：加引号：alert("a"+12+5);   alert(""+12+5);

相关练习：

1、比较两个数的大小

 var aInput=document.getElementsByTagName('input');

 

 aInput[2].onclick=function(){

  var value1=Number(aInput[0].value);

  var value2=Number(aInput[1].value);

  if( isNaN(value1)||isNaN(value2)||aInput[0].value==''|| aInput[1].value==''||value1==' '|| value2==' '){

   alert('输入数字');

  }else{

   // > < 隐性转换 －〉 JS帮你Number(str)

   if(value1<value2){

    alert(value2+'大');

   }else if(value1>value2){

    alert(value1+'大');

   }else{

    alert('相等');

   };

  };

          };

2、判断一个数字是不是整数

 var value=aInput[0].value;

 if(value==parseInt(value)){

     alert('整数');

}

3、简易网页计算器

 var aInput=document.getElementsByTagName('input');

 var oSe=document.getElementById('se');

     aInput[2].onclick=function(){

          var value1=Number(aInput[0].value);

          var value2=Number(aInput[1].value);

          switch(oSe.value){

               case '+':

                    alert(value1+value2);

                    break;

               case '-':

                    alert(value1-value2);

                    break;

               case '*':

                    alert(value1*value2);

                    break;

               case '/':

                    alert(value1/value2);

break;

          };

 };

七、变量作用域和闭包

    1、变量作用域（作用范围）

      （1）局部变量

                局部变量只能在定义它的函数里使用

      （2）全局变量

 var a=44;

 function fn(){

      alert(a);

      var b=33;

      fn2();

 };

 fn();

 function fn2(){ //看函数的作用域。是看它定义在哪

       alert(b);

 };

    2、什么是闭包---子函数可以使用父函数中的局部变量

function fn(){

      var a=444;

      function fn3(){

           alert(a);

      };

      return function(){

           alert(a);

      };

 };

 var fn2=fn(); //闭包

 fn2();

八、命名规范

    1、命名规范及必要性

    （1）可读性——能看懂

    （2）规范性——符合规则

    2、匈牙利命名法

    （1）类型前缀

    （2）首字母大写

   3、类型                             前缀                  类型                   实例

        数组                               a                     Array                  altems

        布尔值                            b                     Boolean             blsComplete

        浮点数                            f                      Float                   fPrice

       函数                                fn                    Function            fnHandler

       整数                                i                      Integer               itemCount

       对象                                o                     Object                oDiv1

       正则表达式                     re                    RegExp               ReEmailCheck

       字符串                             s                     String                 sUserName

       变体变量                         v                     Variant               vAnything

九、运算符

 1、算术：+加 -减 *乘 /除 %取模

    实例：隔行变色、秒转时间、可以用-0来将value转成数字类型

i=i+1    i+=1    i++      i=i+3   i+=3

 2、赋值：=、 +=、 -=、 *=、 /=、 %=（小%大=小，隔行变色）

 3、关系（比较）：<、 >、 <=、 >=、 ==、 ===、 !=、 !==（不全等）

 4、逻辑：&&与、 ||或、 !非

 5、运算符优先级：括号。另外，！优先级比>高

if(!2>3){

    alert(">");      //!优先级高于>，所以先计算!2是false，再计算false>3.这里把false转成0，所以false>3是错的false，所以走else中的语句

}else{

    alert("<");   

}

简易计算器：

var aInput=document.getElementsByTagName('input');

var num1=aInput[0];

var num2=aInput[1];

var oSe=document.getElementsByTagName('select')[0];

var oBtn=aInput[2];

oBtn.onclick=function(){

    var O=oSe.value;

    var n1=num1.value;

    var n2=num2.value;

    if(n1==''||n2==''){

        alert('请输入两个数字');

    }else if(isNaN(n1)||isNaN(n2)){

        alert('至少一个输入的不是数字，请检查!');

    }else{

        switch(O){

            case "+":

                alert(Number(n1)+Number(n2));

                break;

            case "-":

                alert(Number(n1)-Number(n2));

                break;

            case "*":

                alert(Number(n1)*Number(n2));

                break;

            case "/":

                alert(Number(n1)/Number(n2));

                break;

        }

    }

}

计算任意个文本框的和：

var aT=document.getElementsByTagName('input');

var oBtn=document.getElementById('btn1');

oBtn.onclick=function(){

    var result=0;

    var ok=true;

    for(var i=0; i<aT.length; i++){

        var n=parseInt(aT[i].value);

        if(isNaN(n)){

            alert('第'+(i+1)+'个是错的');

            ok=false;

        }

        result+=n;

    }

    if(ok){

        alert('总共是'+result);

    }

}

十、流程控制（判断）

 1、判断：if、switch、？:

    (1) switch(变量){

              case 值1:

                        语句1

                        break;--------跳出，后面的就不执行了

             case 值2:

                        语句2

                        break;

              ……

             default:

                        语句n

         }

例子：switch(true) { 

               case 4>6:

                   alert('星期一');

                   break;

               case 7>5:

                  alert('星期二');

                  break;

         };

    (2)?:三目运算符---只能执行一句话

        条件?语句1:语句2;

        A.   10>9?alert(10):alert(9);//正常

        B.   10>9?var a=10:var a=9; //报错  因为var 必须放在行首，正确为：

              var a=10>9?10:9;

    (3)条件 &&

if(10>6){

    alert(10);

}

简化      条件 && 条件成立执行

即  10>6 &&alert(10);

 2、循环：while、for

 3、跳出：break、continue（只用在循环和switch里用）

      break：跳出

      continue：跳过本次循环，后面的继续执行

function show(){

    for(var i=0;i<5;i++){

          if(i!=3){

               alert(i);

          }else{

               break;

          }

     }

}

show();

 

function show(){

    for(var i=0;i<5;i++){

        if(i==3){

            continue;

        }

        alert(i);

    }

}

show();

 4、什么是真、什么是假

  （1）真：true、非零数字、非空字符串、非空对象、空格

  （2）假：false、数字零、空字符串、空对象、undefined、null、NaN

5、参数

function fn(){

    alert(arguments.length);

}

fn(1,2,3);

十一、调试

 1. alert();

 2. document.title

 3. ie-----禁用脚本调试

 4. google:console.log(a) 内部输出，调试，计算器

 5. FF：Ctrl+shift+J

 

十二、iNow

1. 简单的历史图库

window.onload=function(){

    var oUl=document.getElementsByTagName('ul');

    var aLi=oUl.children;

    var aBtns=document.getElementsByTagName('input');

    var iNow=0;

    aBtns[0].onclick=function(){

        iNow++;

        if(iNow==aLi.length)iNow=0;

        oUl.style.left=-iNow*400+'px';

    }

    aBtn[1].onclick=function(){

        iNow--;

        if(iNow==-1)iNow=aLi.length-1;

        oUl.style.left=-iNow.400+'px';

    }

}

<div id="box1">

     <ul>

         <li>1111</li>

         <li>222</li>

         <li>333</li>

         <li>444</li>

    </ul>

</div>

<div id="box2">

    <input type="button" value="左">

    <input type="button" value="右">

</div>