js最基础知识回顾3(字符串拼接,数据类型,变量类型,变量作用域和闭包,运算符,流程控制,)

一、javaScript组成

    1、ECMAScript:解释器、翻译 ---------------------------------------------------------几乎没有兼容性问题
    2、DOM:Document Object Model --------操作HTML的能力----document--------有一些兼容性问题
    3、BOM:Browser Object Model -------------浏览器---------------window----------完全不兼容
    (各组成部分的兼容性,兼容性问题的由来)
二、下拉+text
     window.onload=function(){
            var oBtn=document.getElementById("btn");
            var oSel=document.getElementById("sel");
            var aInput=document.getElementsByTagName('input');
            oBtn.onclick=function(){
                var n0=Number(aInput[0].value);    //input里的数字类型是字符串;
                var n1=Number(aInput[1].value);
                var oVal=oSel.value;
                var c=n0+oVal+n1;            //c为字符串
                aInput[2].value=eval(c);                    //此时c为数字;
                                           //eval是对字符串进行操作;
//            switch(oVal){
//                case '+':
//                alert(n0+n1);
//                break;
//                case '-':
//                alert(n0-n1);
//                break;
//                case '*':
//                alert(n0*n1);
//                break;
//                case '/':
//                alert(n0/n1);
//                break;
//            }
            }
            }
三、字符串拼接
alert('abc'+12+5+'def');  ------abcd125def
(1)字符串和数字相加,会把数字转变成字符串
alert(12+5+'abcd'+'def');  ------ 17abcdefg
(2)程序从左向右执行
alert('abcd'+12+5+‘def'); ----abcd125def
四、分号问题
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字符串与另一数字或字符串-*/%都会进行隐式转换  
    (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)||value1==' '|| value2==' '){
   alert('输入数字');
  }else{
   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);  //b is not defined
        };
    2、什么是闭包---子函数可以使用父函数中的局部变量
      function fn(){
            var a=444;
            function fn3(){  //没有用上
                  alert(a);
            };
            return function(){
                  alert(a);
            };
       };
       var fn2=fn(); //function(){alert(a);}
       fn2();  //444
八、命名规范
    1、命名规范及必要性
    (1)可读性——能看懂
    (2)规范性——符合规则
    2、匈牙利命名法
    (1)类型前缀
    (2)首字母大写
   3、类型                             前缀                  类型                   实例
        数组                               a                     Array                  aInput
        布尔值                            b                     Boolean             bfls
        浮点数                            f                      Float                   fPrice
       函数                                fn                    Function            fn
       整数                                i                      Integer               icount
       对象                                o                     Object                oDiv
       正则表达式                     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 oSe=document.getElementsByTagName('select')[0];
var oBtn=aInput[2];
var n1=Number(aInput[0].value);
var n2=Number(aInput[1].value);
oBtn.onclick=function(){
    if(n1==''||n2==''){
        alert('请输入两个数字');
    }else if(isNaN(n1)||isNaN(n2)){
        alert('至少一个输入的不是数字,请检查!');
    }else{
        switch(oSe.value){
            case "+":
                alert(n1+n2);
                break;
            case "-":
                alert(n1-n2);
                break;
            case "*":
                alert(n1*n2);
                break;
            case "/":
                alert(n1/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();  //0,1,2
 
function show(){
    for(var i=0;i<5;i++){
        if(i==3){
            continue;
        }
        alert(i);
    }
}
show(); //0,1,2,4
 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
原文地址:https://www.cnblogs.com/yang0902/p/5700268.html