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中的代码是从上至下依次解析，但会有函数声明提前的现象

　　

posted @ 2015-09-22 22:17  Kinthon  阅读(207)  评论(0)  编辑  收藏  举报