JS代码放在head和body中的区别分析


Posted in Javascript onDecember 01, 2011

那么有什么不同呢?先看一个例子:
一个二级级联动态下拉列表框,一级分类(即大类别)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。
Javascript 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
五段实用的js高级技巧
Dec 20 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 #Javascript
js取滚动条的尺寸的函数代码
Nov 30 #Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 #Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 #Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 #Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 #Javascript
You might like
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
jquery中radio checked问题
2015/03/16 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
应聘美工求职信
2013/11/07 职场文书
银行领导证婚词
2014/01/11 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
预备党员转正材料
2014/12/19 职场文书
十佳少年事迹材料
2014/12/25 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
辩论赛新闻稿
2015/07/17 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers