zoukankan      html  css  js  c++  java
  • 必须掌握的JavaScript基本知识

    作为一个前端工作者,应该了解一些javascript的发展历史,javascript实现及版本等。基本概念包括语法、关键字、变量、数据类型、操作符、语句控制及函数等,它们和我们学习的其它语言C/C++、java、C#等基本上类似,只是存在细微的差别。具体区别及基本学习内容参考JavaScript高级编程相关章节。 
    一、基本内容中应该注意的几个地方
    1)关于script标签
    我们最常用的写法如下:
    <script type="text/javascript">
        function(){
            console.log("hello world!");
        }
    </script>
     
    那么下边这些用法呢?
     
    <script type="text/javascript" >
       //<![CDATA[ function(){
            console.log("hello world!");
        }
    //]]>
    </script>
            在xhtml中,像一些特殊的符号,<> 等等会默认判定为标签,标签后边是不能跟空格的。因此xhtml下要想实现同样的效果,应该转义&lt;,但是这样的代码谁都不想看到。那么可以用CDATA包起来。但是有个特殊的浏览器不支持CDATA怎么办,那就加上//
     
    <script type="text/javascript" >
       <!--function(){
            console.log("hello world!");
        }
    //-->
    </script>
            以上代码是防止一些浏览器不支持javascript(这个顾虑现在基本可以打消了,另外还有个特殊的标签<noscript><p>支持并开启js的浏览器可以看到我</p></noscript>),用html注释的方式包起来,支持js的浏览器会执行。最后一个//防止js执行到-->认为是语法错误
     
    <script type="text/javascript" defer="defer">
        function(){
            console.log("hello world!");
        }
    </script>
    一般用于外部浏览器,defer表示该脚本的执行延迟到整个页面解析完成后再运行,用8个概括就是 立即下载 延迟执行
     
    <script type="text/javascript" async>
        function(){
            console.log("hello world!");
        }
    </script>
    一般用于外部浏览器,顾名思义,不让页面等待脚本的下载,页面的其它部分就可以加载了。
     
            还有建议css代码放到head中,而js代码放到body中的底部。因为html加载是从上往下,如果在body加载之前有很多的脚本需要加载,那么我们用户看到页面空白的时间就会很长。相反,页面展示在用户面前时,用户也不关心还有什么东西没有加载完。这样给用户一个错觉,我们的页面比别人的"快"。那有人就说为了快,怎么不把css文件放到下边?那如果这样做的话,如果页面比较大,样式比较多一开始显示给用户的将会很丑。
     
            在js代码中最好少写 </script>,非要写可以这样 </script>,因为当字符中出现</script>,那么html会判断为<script>的结束,后边的代码就不能执行了。
     
    在加载js过程中(尤其是js在head中,这样会阻塞UI的加载),不建议动态修改Dom元素,这一点大家可想而知。
     
    2)松散型变量和typeof
    松散变量的含义就是,变量比较“随意”,可以保存任意的类型。不过我们平时使用时不建议这么用
    如:var number=10;
           namber="十";
    这样不会报错,但是最好别这样用。
    由于变量的这样随意性,因此我们最好通过方法判断该变量当前的类型,typeof很好的解决了这个问题
    console.log(typeof "hi jack");//String
    console.log(typeof 10);//number
    console.log(typeof null);//Object
    console.log(typeof message);//undefined
    var message="hello jack li";
    console.log(typeof message);//hello jack li
    3)数据类型中的特殊情况
     
    undefied为Undefied类型的值,它只有这一个值。当申明一个值但没有初始化就使用就会报undefined如下:
    var message;//其实这里相当于var message=undefined;
    console.log(message);//undefined
    如果这样呢?
    //var error;
    console.log(error);//这里会报错,不能执行
    更离谱的是如果这样呢?
    console.log(typeof error);//undefined 是不是晕了?
    总之typeof 可以避免很多无谓的错误。本来上边两种用法都不太推荐。使用变量前 通过typeof判断是个好的习惯,个人理解。
     
    Null类型也是只有一个值 null,它是空的对象的指针,因此 typeof null 为Object,同样使用过程中也推荐先判断非空
    undefined是派生自null的。因此
    console.log(null==undefined);//true
     
    Boolean类型也是比较特殊的一个类型
            它只有两个字面量值 true和false,区分大小写,这个在其它语言中也是如此,判断一个变量尤其是前端用户勾选的一些radio或者下拉框中的某个值 和 后台查询出来的值比较,必须 toLowerCase(),统一转化为小写或者大写再比较。
            任何类型的变量都可以转化为Boolean值。利用方法 Boolean(),转换表如下。
    类型                             
    转换为true的值
    转换为false的值
    Boolean             
    true   
    false
    String                 
     任何非空字符串
     ""空字符串''也是false 注意没有空格
    Number
     任何非0的数字
     0 NaN
    Object
    任何对象
    null
    Undefined
    n/a
    undefined
    数值类型和NaN
            整数 浮点数需要注意浮点数的判断 比如if(0.1+0.2==0.3)//永远是false 特定的浮点数计算,最好不要去比较结果,浮点是精度为17
    NaN全称是Not a Number。它和任何数的操作结果都是NaN。number/0的结果为NaN。还有一个判断是否为NaN的函数isNaN()
    isNaN(100)//false
    isNaN(NaN)//true
    isNaN("100")//false
    isNaN(true)//false
    isNaN("message")//true
     
    数值转换的一些特殊结果,您掌握多少呢?

    Number("Hello jack li");//NaN

     

    Number(true);//1

     
    Number("000123");//123
    一般更常用的是parseInt() parseFloat()
    parseInt("123ignore")//123
    parseInt("");//NaN
    parseInt("0xA");//10
    为了消除parseInt("070")//这种转换,我们最好指定第二个参数,明确指出是针对多少进制的转换 parseInt("070",8);//  
    parseFloat("123.123.123");//123.123
     
    String类型 单引号双引号的含义差不多,但不能交叉嵌套使用
     
    var message=null;
    var error;
    console.log(String(message));//null
    console.log(String(error));//undefined
     
    Object类型,这个类型比较复杂需要以后单独讲
     
    3)操作符
    算数操作符,位操作符,关系操作符,相等操作符
     
    ~按位非
    &按位与
    |按位或
    >>右移 前面保留符号位
    <<左移
    >>>无符号右移   前面补0
     
    相等的特殊情况
    null==undefined//true
    NaN=="NaN"//false
    123==NaN //false
    NaN==NaN//false
    false==0//true
    undefined==0//false
    123=="123"//true
     
    全等 ===    !==
    对比上边的就可以看出===要求更高一些,转换后值相等也不全等。
    123==="123"//false
    null===undefined//false
     
    4)语句控制
    需要注意里边的for in 语法就可以了,基本的程序流程控制语句都类似。
     
  • 相关阅读:
    Android Lock Screen Orientation
    android studio修改新项目package名称
    DevExpress控件GridView挂下拉控件无法对上值
    Datawindow.net+access数据窗口制作方法
    LR11中web_save_timestamp_param
    LR自带网站飞机订票系统 启动
    MySQL ODBC驱动安装和配置数据源
    【笔记】LR配置ODBC连接数据库进行参数化(mysql )未完待续
    【笔记】LR录制方式和常用函数
    【笔记】http1.1支持的7种请求方法
  • 原文地址:https://www.cnblogs.com/Jack-hui/p/3946206.html
Copyright © 2011-2022 走看看