放在 head 中的 JS 代码会在页面加载完成之前就读取,而放在 body 中的 JS 代码,会在整个页面加载完成之后读取
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
那么有什么不同呢?先看一个例子:
一个二级级联动态下拉列表框,一级分类(即大类别)id="vSort0".
- <head>
- function changelocation(id) {…………}
- </head>
- <body>
- <select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);"
- style="width:100px;">
- ……省略……
- </select>
- ………………
- </body>
现在有个 js 脚本:
- <script LANGUAGE= "JavaScript" >
- changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类,去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表
- </script>
那么把这个 js 脚本放 head 里面还是 body 里面呢? 答案是不仅要放到 body 里面,而且还得放到定义 id='vSort0'的列表框后面,因为这个 js 脚本中有 document.form4.vSort0.selectedIndex,如果放到 head 里或者 body 的 id='vSort0'前,页面加载后顺序执行代码,执行到这个 js 发现 vSort0 未定义(即 undefind),这个 js 也就失去了作用。 而为什么我们经常看到有很多的人把 js 脚本放到 head 里面没事呢?对! 就是因为你看到的在 head 里的 js 代码有 onclick 等事件传递了变量给函数。 这就告诉我们,如果我们想定义一个全局对象,而这个对象与页面中的某个按钮(等等)有关时, 我们必须将其放入 body 中,道理很明显:如果放入 head,那当页面加载 head 部分的时候,那个按钮(等等)都还没有被定义(也可以说是还没有被加 载,因为加载的过程就是执行代码的过程,包括了定义),你能得到的只可能是一个 undefind。
来源: