一、js代码的加载次序
1、当js代码直接嵌入到html中时：
<html>
<head></head>
<body>
<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick()
{
alert(this.value)
};
</script>
</body>
</html>
当你在浏览器中运行以上代码时，点击 这个input元素，则正常弹出 “我的button”
你再运行以下代码，对比两个效果：
<html>
<head></head>
<body>
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick()
{
alert(this.value)
};
</script>
<input type="button" value="我是 button" id="bu">
</body>
</html>
此时就不是弹出 "我是button" 这些文字了，而是没反应，浏览器还会给你报个 Uncaught TypeError: Cannot set property 'onclick' of null 错误。
其实你了解了html的加载机制后，就会懂得报错的原因了。
因为在html中，元素的加载是从上往下加载的。
第一段代码浏览器先加载了 <input type="button" value="我是 button" id="bu">,所以后面的js能获得到 bu的对象。
第二段代码浏览器则是先加载了 bu 的对象，可是这时，input type="button" value="我是 button" id="bu">这个根本还没有加载，js获取不到，当然只能报错了。
2、从外部引入js文件
<html>
<head>
<script src="./test.js"></script>
</head>
<input type="button" value="我是 button" id="bu">
</html>
以下是相应的test.js文件
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick()
{
alert(this.value)
};
</script>
以上代码运行，则会报错，原因和前面的类似，也是因为还未加载到 html 中的input元素，js就开始先获取bu的对象，然而却获取不到，只能报错。
<html>
<input type="button" value="我是 button" id="bu">
<script src="./test.js"></script>
</html>
以上代码运行，则正常执行，点击 input ，也正常输出 “我是button”, 原因如上
二、区块加载
工作时，遇到了个很有趣的现象，
<html>
<head></head>
<body>
<script>
alert('11');
alert('1111');
</script>
<script>
ale('22');
alert('2222');
</script>
</body>
</html>
当浏览器运行这个文件时，猜猜，它会输出什么？？？？
想到了吗，这里由我来告诉你吧
它会输出 11 、1111
这里其实可以把js的加载看作是一个像区块的加载
前面一个区块，没有语法错误，不会影响到当前区块里面其他js代码的执行。
<script>
alert('11');
alert('1111');
</script>
而这个区块中的ale 语法错误，导致浏览器报错，影响了这个区块的执行
可是这里的报错，却不会影响到其他区块代码的执行。所以能够输出 11、1111
<script>
ale('22');
alert('2222');
</script>
<br />
所以我总结，每个<script>...</script>中的代码在报错机制中，是独立运行，互不干扰的。
