JS极简笔记

H大
Code

发布于：2020年10月22日

json基础

  • json的变量声明
  • JSON.stringify()，将json的object物件转换为json-string，但是方法会丢失
  • JSON.parse()，将json-string转换为json-object
    json demo与源码

    json基础运行

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>json 基础教学</title>

        <script type="text/javascript">

            var point={ //json定义一个point物件
                "x":3,
                "y":4,
                "get":function(){
                    alert(this.x+","+this.y)
                }
            };
            // point.get();

            /*网络传输需要将物件Object转化为json字符串，stringify()函数
            当然也是有丢失的，如get()方法丢失。
            */
            var jsonStr=JSON.stringify(point)

            //json字符串可以重新转化为json物件，parse()函数 ，其中，parse .v 分开

            console.log(jsonStr)//传入var

            plainObject=JSON.parse(jsonStr)
            console.log(plainObject)


        </script>
    </head>
    <body>
        
    </body>
    </html>
运行一下

JS-hoisting宣告提升

变量的宣告提升

js-hoisting被称为宣告提升，宣告提升仅限于类似var x的单条语句。

JS-hoisting造成运行结果一致 
1
2
3
4
5
6
7
<script type="text/javascript">

    var x;
    x = 10;
    alert(x);

</script>
与
1
2
3
4
5
6
7
<script type="text/javascript">

    x = 10;
    alert(x);
    var x;

</script>
以上两块代码的运行结果是一致的，均弹出**10**；

原因在于，JavaScript的渲染引擎具备宣告提升的特质。

宣告提升仅限于类似"var x"的单条语句 
1
2
3
4
5
6
7
<script type="text/javascript">

    // x = 10;
    alert(x);
    var x = 10;

</script>
运行结果为弹出**undefined**

原因在于，var x = 10;对于js引擎来说是两个语句，即var x; x = 10; 。js引擎只对var x;该语句提升。

函数的宣告提升

js引擎只对"var sayhello();"语句宣告提升 
1
2
3
4
5
6
7
8
9
<script type="text/javascript">

    sayhello();

    function sayhello() {
        alert("hello");
    }

</script>
与
1
2
3
4
5
6
7
8
9
<script type="text/javascript">

    sayhello();

    var sayhello = function () {
        alert("hello");
    }

</script>
以上两块代码的运行结果是不一致的，前者弹出**hello**,后者无弹出。

原因在于，var sayhello = function ()对js引擎类似于两个语句，var sayhello();function sayhello(){···};。js引擎只对var sayhello();语句宣告提升。

addEventListener

连接交互动作（js内置的动作）与函数

addEventListener变化的图形 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.onload = function () {
    var box = document.getElementById("box");
    //监听事件
    box.addEventListener("mouseover", function () {
        this.style.opacity = 1;
        this.style.height = '300px';
        this.style.width = '50px';
        this.style.backgroundColor = 'blue';//color改变需要加引号
        this.style.borderRadius = '5px';
        this.style.boxShadow = '2px 2px 6px blue';
    })
    box.addEventListener("mouseout", function () {
        this.style.opacity = 0.5;
        this.style.height = '150px';//px去掉
        this.style.width = '150px';
        //js对应的属性中由'-'的，去掉'-',变为'-'的首字母大写
        this.style.backgroundColor = "blue";
        this.style.borderRadius = "50%";
        this.style.boxShadow = '0px 0px 0px ';

    })


    var circle = document.getElementById("circle")
    circle.addEventListener("mouseover", function () {
        this.style.borderRadius = "0";
        this.style.backgroundColor = "yellow"
    })
    circle.addEventListener("mouseout", function () {
        this.style.borderRadius = "50%";
        this.style.backgroundColor = "purple"
    })
}
运行一下

更新于：2020年10月28日

js

notes

评论