• 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
  • 相关阅读:
    大数据学习操作笔记
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    每日总结
    jstl标签,c:foreach无效的问题
    阅读笔记
    《高效能人士的7个习惯》
  • 原文地址:https://www.cnblogs.com/yang0902/p/5700268.html
Copyright © 2020-2023  润新知