• Javascript学习过程(二)


    1)在学习Javascript过程中避免不了要输出一些测试结果,一般的作法是使用alert来显示,但是alert函数是一个单参的,为了可以方便测试,可以使用控制台输出,console.log(arguments);在chrome中可以打开devtool查看控制台。

    2)使用script标签时,要注意使用</script>,而不要用直接在开始标签中用/,可能会出现某些无法解析,比如src解析不了

    3)对于自定义对象的属性的访问:

    function Person(name, age) {
        this.name = name;
        this.age= age;
        this.friends = ["Shelby", "Court"];
    }
    
    var Person1 = new Person("Kin", 21);
    console.log(Person1.age);
    console.log(Person1["age"]);

     4)对于JavaScript中的function说明,可以参考:http://www.bootcss.com/article/variable-and-function-hoisting-in-javascript/ 所以在使用function时一定要把声明和赋值都显示放在函数的开头。

    5)关于script标签应该放在哪里?参考:https://book.douban.com/reading/17295337/

      其实如果只是一般的放在head标签里面的话,有时会出现问题,因为浏览器解析文档的时候是自上而下依次解析的,所以在这种情况下会出现两种比较不好的情况,第一就是这种地,会导致必须等到全部JavaScript代码都被下载,解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容),这样会导致显示延迟;第二就是对于在JavaScript中使用到的DOM节点来说,会出现未定义的现象,特别是在定义事件的时候。例子如下:

    <!-- index.html-->
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="./index.js">
        </script>
    </head>
    
    <body>
        <form action="" method="get">
            <input type="button" value="test" id="myBtn" />
        </form>
    </body>
    
    </html>
    
    
    //index.js
    var myBtn = document.getElementById("myBtn");
    myBtn.addEventListener("click", function(event) {
        alert(event.target.id);
    }, false);

    运行上述代码后会出现

    解决方法:1)可以将script标签统一放到</body>之前,而不是head里面

              2)可以使用script标签的defer属性来延迟脚本的运行,使其在整个页面解析完毕(遇到</html>时才开始运行,相当于告知浏览器立即下载,但延迟解析和执行。   

    备注:对于JavaScript中的代码是从上至下依次解析,但会有函数声明提前的现象

      

  • 相关阅读:
    Vue.js中使用iView日期选择器并设置开始时间结束时间校验
    侠客行
    myJRebel 已不可用
    开发.NET Core NuGet包并实现CI/CD
    独立部署GeoWebCache
    GeoServer中GeoWebCache(GWC)的使用
    使用VS Code编写Markdown文件
    GitHub团队协作流程
    打包发布到NPM并通过CDN访问
    使用VS Code编写Markdown文件
  • 原文地址:https://www.cnblogs.com/kinthon/p/4830678.html
Copyright © 2020-2023  润新知