JS代码的位置
我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。
JavaScript代码在网页读取到该语句的时候就会执行。
☢ 注意
Javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。
比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。
事件响应代码块的封装
★ 事件响应代码的不同封装其页面响应效果也有所不同
△ 测试 1 放在标签<head>中，或紧接着标签<body>的下方
<script>/* document.onclick = function () {alert("You have clicked in the document!");};var img = document.getElementById("mainImage");img.onclick = function () {alert("You have clicked on the picture!");};*//* 若将document.onclick放在img onclick事件之前，那么只会提示document的onclick *//* 若将img onclick放在document.onclick事件之前，那么无任何提示*/</script>
△ 测试 2 放在内容标签之后
<body><img src="images/image.jpg" id="mainImage">document.onclick =function(){alert("You have clicked in the document!");};var img = document.getElementById("mainImage");img.onclick =function(){alert("You have clicked on the picture!");};//此时document.onclick与img.onclick的顺序不影响执行结果</body>
推荐做法（正确的姿势...）
将事件响应代码封装为函数，然后在window.onload中完成挂接工作。
<script>functionDemo(){document.onclick =function(){alert("You have clicked in the document!");};var img = document.getElementById("mainImage");img.onclick =function(){alert("You have clicked on the picture!");};}window.onload =function(){Demo();}</script>
这样子，script的代码块无论在head中还是body中，或者是body的不同位置，最终的执行结果都是一样的。