JavaScript应放在页面的什么地方

原文地址: http://blog.csdn.net/liuwenblue/article/details/4500449

在页面脚步编写中,初学者经常会碰到JavaScript放在页面什么地方的疑惑,网上答疑者给出的答案基本一致,这里简单作了一下整理,并分析一下为什么要这样和为什么可以不这样:
一、JavaScript代码块摆放规则:
    head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>

body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>

body 和 head 部分可同时有脚本:你可在文件中放无数的脚本,因此你的文件中可以在body和head部分同时存在脚本。
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>

有时候你可能想在几个页面中运行同样的脚本程序, 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文件中,保存在扩展名为 .js的文件中。使用外部脚本时将标记符<script> 的“src”属性值指向相应的.js文件就可以了:
<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>

 

二、分析:
一定要这样放吗?只能说为了代码的规范,最好这样放,其实JavaScript可以任意放在页面的任何地方,只要你遵循调用顺序即可,具体说明如下:
比如有如下一段代码:
<script language="javascript">
document.write("this is a test");
</script>
简单的测试一下发现,类似这样的代码放在页面的任何地方都不报错,测试代码如下:
<script language="javascript">
document.write("Brfore html<br>")
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">;
document.write("In Head<br>")
</script>
</head>

<body>
BODY部分开始<br>
<script language="javascript">
document.write("In Body<br>")
</script>
BODY部分开始结束<br>
</body>
</html>
<script language="javascript">
document.write("After html<br>")
</script>


IE中执行结果如下:
Brfore html
In Head
BODY部分开始
In Body
BODY部分开始结束 
After html

 

结论:
1. Javascript可以放在页面的任何地方,它的加载顺序与页面的加载顺序一致,页面加载时,先加载head部分,后加载body部分,所以当把javascript代码块放在HTML前面时,它将先于head被加载,当放在head里面时,它将先于body被加载,当放在页面最后的的html之外时,它将最后被加载。
2. Javascript声明的变量,定义的函数都是全局的,所以要特别注意访问顺序。比如在head部分访问定义在body部分的变量或者函数,是不对的,因为head部分的javascript代码执行时,body部分还未被加载进来。
3. 写在body部分的javascript代码如果要访问页面控件,注意要放在被访问控件的HTML代码下面,理由同2,因为要保证控件先被加载,才能后被访问。
4. 如果javascript是通过label或者literal之类的控件绑出来的,调用时有可能会出错,因为页面body部分加载,并不是严格按照控件摆放顺序来加载的,所以先通过label绑定出来,在label后面的代码中调用时,label可能并没有加载完成。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值