原生js知识点回顾(1)

变量的命名规范:

    1,变量名的第一个字符必须是英文字符或下划线

    2,变量名中只能是英文、数字、下划线  ($符号除外)

    3,变量名不能是关键字


变量命名法:

    1.小驼峰命名法      userName

    2.大驼峰命名法      UserAge

    3.匈牙利命名法      strUserTeam


&& 和 || 以及短路运算   

    1.逻辑与 &&(所有条件都为true,返回true;只要有一个是false,返回false;不一定返回boolean类型值)

        1.1 如果前面操作数隐式类型转换后为true,则返回最后一个操作数

               console.log(true&&9&&"您好");//返回“您好”

        1.2 如果前面有一个隐式转换后不是true,则返回第一个隐式转换为false的值(即短路的值) 

               console.log(“”&&true);//返回空格

    console.log(44&&0&&"hello");//返回0

    console.log(55&&false&&0);//返回false

    console.log(0&&null&&55);//返回0

    console.log(NaN && 16 && "");//返回NaN

    console.log("" && NaN && 12);//返回“”空字符串

        1.3 当逻辑与的左边为 null/NaN/undefined ,结果就会得到null/NaN/undefined

                console.log(55*“abc”&&true);//返回NaN

      console.log(null&&true);//返回null

      console.log(undefined&&true);//返回undefined

      console.log(undefined&&null&&9&&NaN);//返回undefined

    2.逻辑或 ||(只要一个条件为true,则返回true;都为false,则返回false)

        1.1 可以操作任意类型的数据,不只是布尔型

        1.2 返回值不一定是boolean类型(有一个为true,则返回true,后面就被短路了;都为false,一直走到最后一个,打印最后一个)

               console.log(33<22||33>11);//返回true

    console.log(undefined || null || 0);//返回0

    console.log(undefined || 88 || 99 );//返回88

    console.lof(undefined || 33>10 || false);//返回true 

    console.log(null || undefined || NaN);//返回NaN

    console.log(NaN || undefined) ;//返回undefined

    console.log("hellow" || NaN);//返回hellow

        3.逻辑非 !(可以操作任意类型的数据,返回值一定是boolean值;!!使用两个逻辑非操作符时——两次求反,为本来代表的boolean值)                


进制转化

    1.十进制转为其他进制

        console.log( (16).toString(8) ); // 十进制的16转换为八进制

    2. 其他进制转化为十进制

        var r = parseInt('10', 2); // 二进制的"10",转为为十进制时,结果为

        console.log( r, typeof(r) );  // 2  number

        console.log( parseInt('9', 8) ); // NaN     八进制的9是不存在的

    3.定义各进制

          3.1 定义八进制

            console.log( 010 );  //8

            // 如果一个数值,开头为0的话,看后面的数据,是否能表示八进制的数,如果能表示,则为八进制,否则为十进制

           //console.log( 09 ); // 十进制

         3.2   定义十六进制 (0x开头)   

            //console.log( 0x9 );

            //console.log( 0xa );

            //console.log( 0x10 );


事件驱动:

    1.    onunload

            // 谷歌和火狐浏览器不支持

            // IE刷新时能执行

            window.onunload = function(){

                    alert("浏览器关闭时触发");

            }

    2.    onselect

        <span id="span1">span</span>

        span1.onselect = function(){

            alert("span");

        }

    3.   onresize

          <div id="div1"></div>

          // 当浏览器窗口的大小发生变化时 

          // 浏览器的宽度高度发生变化时

        window.onresize = function(){

                 var h = document.documentElement.clientHeight;

                 var w = document.documentElement.clientWidth;

                 div1.innerHTML = w+" , "+h;

        }

    4.   onreset  onsubmit

          <formid="form1"action="http://www.1000phone.com">

                 <inputtype="text"value="默认值abcd1234"/><br>

                 <inputtype="submit"value="提交按钮"/>

                <inputtype="reset"value="重置按钮"/>

                <inputtype="button"value="普通按钮"/>

        </form>

        // 当表单被重置时,触发函数

        form1.onreset = function(){

            alert("重置");

        }

        // 当表单被提交时,触发函数

        form1.onsubmit = function(){

            alert("提交了");

        }

    5.    鼠标事件

            <div id="div1"></div>

            // 鼠标进入div时            

            div1.onmouseover = function(){

                this.style.background = "orange";

            }

            // 鼠标离开div时

            div1.onmouseout = function(){

                this.style.background = "skyblue";

            }

            // 鼠标按下时

            div1.onmousedown = function(){

                this.style.background = "greenyellow";

            }

            // 鼠标松开时

            div1.onmouseup = function(){

                this.style.background = "yellowgreen";

            }

            // 鼠标移动时

            var i=0;

            div1.onmousemove = function(){

                this.innerHTML = i++;

            }

    6.键盘事件

            <inputtype="text"id="input1"/>

            <divid="div1"></div>

            // 键盘按下

            input1.onkeydown = function(){

                //div1.style.background = "black";

                console.log("down:", this.value);

            }

            input1.onkeypress = function(){

                //div1.style.background = "red";

                console.log("press:", this.value);

            }

            // 键盘按下后的松开

            input1.onkeyup = function(){

                //div1.style.background = "white";

                console.log("up:", this.value);

            }

      7.img

            <imgsrc="01.jpg"id="img1"/>

            <spanid="span1"></span>

            img1.onerror = function(){

                    span1.innerHTML = "图片载入失败";

            }

            img1.onload = function(){

                span1.innerHTML = "图片载入成功";

            }

        8.click

            <inputtype="button"id="btn1"/>

            <inputtype="button"id="btn2"/>

            btn1.onclick = function(){

                alert();

            }

             btn2.ondblclick = function(){

                alert("双击时");

            }

       9.change

            <selectid="select1">

                <option>red</option>

                <option>green</option>

                <option>yellow</option>

                <option>orange</option>

                <option>black</option>

            </select>


            select1.onchange = function(){

                //body1.style.background = this.value;

                document.body.style.background = select1.value;

            }

        10.blur

            <inputtype="text"id="input1"/>

            <spanid="span1">span</span>

            // 当输入框失去焦点时,触发的函数

            input1.onblur = function(){

                span1.innerHTML = "失去了焦点";

            }

            // 当输入框获得焦点时,触发的函数

            input1.onfocus = function(){

                span1.innerHTML = "获得了焦点";

            }


作用域

            1.全局变量

            //在函数内,可以直接使用全局变量

            var a = 1;

            function fn(){

                alert(a);  // 1

            }

            fn();

            2.局部变量        

            //在函数外,不能直接使用局部变量  

            function fn(){  // 把函数的大括号范围理解成函数作用域

                var a = 2;  // 局部变量

                alert( a ); // 2

                // fn()函数执行后,会自动销毁变量a

            }

            fn();

            alert( a ); // a is not defined

            3.全局变量和局部变量名称相同时,指两个不同的变量。

            var a = 5;

            function fn(){

                var a = 10;

                alert( a );

            }

            fn();

            alert( a ); // 5

            4.未声明的 JavaScript 变量

            function fn(){

                a = 1;  // 没有用var声明时,这个变量为全局变量

                //alert( a );

               }

                fn();

                alert( a );//1

            5.

            function fn(){

                var a=b=2;  // 2 2

                // var a,b=2;//undefined 2  只声明了a,未赋值

                console.log(a, b);

            }

            fn();

            6.

            var i = 10;

            function fn(){

                // 这一行是该fn函数的作用域的顶端

                // alert( i );    //undefined 在函数作用域内能找到变量i,但尚未定义

                var i = 5; 

                // alert( i );        //5

            } 

            fn(); 

            alert(i);//    10 访问外部的i

       7.判断a是不是全局变量?

        现在自身的作用域内查看,a是否有用var定义,如果没有用var定义的话,会向上一层作用域内查找,以此类推

        


声明提升

            在浏览器真正的执行js之前,会先对js做预处理(编译过程, 声明提升)

            声明提升:把变量或函数的定义部分,提升到作用域的顶端

                              变量和函数的赋值部分,位置不变,只有定义部分提升到作用域的顶部

            优先级:函数提升优先级高于变量提升,且不会被同名变量声明时覆盖,但是会被变量赋值后覆盖

       1.

            var a = 5;

            function a(){

                function b(){

                    alert(a);

                }

                b();

            }

            a();// a is not a function

         2.

            function fn1( a ){ // var a = 10 // 参数相当于在函数内 定义了一个变量,所以参数是局部变量

                alert(a);

                a = 5;

            }

            var a

            a = 10;

            fn1( a );

            alert(a);

         3.

            function fn1( a ){

                a = 5;

                alert( arguments[0] );    //arguments[0] 和 a 指内存中相同的一块空间,所以改变一个值的时候,另一个值也会变

                // arguments[0] = 7;

                // alert(a);

            }

            fn1(2);

            4.函数提升只会提升函数声明,而不会提升函数表达式

            console.log(foo1); // [Function: foo1]

            foo1(); // foo1

            console.log(foo2); // undefined

            foo2(); // TypeError: foo2 is not a function

            function foo1 () {

                    console.log("foo1");

            };//被提升

            var foo2 = function () {

                console.log("foo2");

            };//未被提升



三目运算(三元运算)

            ? :

            条件 ? 条件成立时,执行的代码 : 条件不成立时,执行的代码

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,745评论 2 17
  • 01javascript语法规范 <!DOCTYPE html> javascript语法...
    ouyangqinbin阅读 1,305评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,466评论 1 45
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,028评论 0 2
  • JS基础 页面由三部分组成:html:超文本标记语言,负责页面结构css:层叠样式表,负责页面样式js:轻量级的脚...
    小贤笔记阅读 598评论 0 5