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

来源：互联网发布：涉密软件开发资质编辑：程序博客网时间：2024/05/17 07:51

放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。

js文件放在<body></body>之间

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ include file="/common/taglibs.jsp"%><!-- add by hongk end --><html><head><title>更改密码</title><LINK href="${ctx }/static/css/default/common.css" type="text/css" rel="stylesheet"><script src="${ctx }/static/js/common/common-ie.js" type="text/javascript"></script><script src="${ctx }/static/js/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script></head><body><table class="deftoptable" border="0" width="90%" id="PAGETABLE" cellspacing="0" cellpadding="0" ><tr><td class="leftsidetd" width="15"> </td><td class="headercol" width="750"> <img border="0" src="${ctx }/static/images/head-sot2.gif" width="43" height="42" >更改密码</td><td class="rightsidetd" width="15"> </td></tr><tr ><td class="leftsidetd" width="15"> </td><td width="95%" class="bodycol" align=center ><br><table class="sestab" id="appChangePassword" cellspacing="0" cellpadding="0" style="width: 80%">   <thead><tr><th class="sheadleft"> </th><th class="sheadmain">更改密码</th><th class="sheadright"> </th></tr>       </thead>                              <tbody class="sbodymain"><tr><td colspan="3" class="sbodytd"><br /><table width="700" border=0 class="guitable"><tr><td align="center"><form action="" id="updatePassForm" class="updatePass_form">         <p>输入旧密码：<input type="password" name="oldPass"></p>         <p>输入新密码：<input type="password" name="newPass"></p>         <p>确认新密码：<input type="password" name="affirmPass"></p>         <input type="hidden" name="submitType" value="update">         <input type="button" id="updatePass" value="提交">              <input type="reset" name="resetPass" value="重置">              <input type="button" id="returns" value="返回">    </form></td></tr></table></td></tr></tbody></table><br></td><td class="rightsidetd"> </td></tr></table><script type="text/javascript" src="${ctx }/static/js/usrAndPower/resetAndUpdPass.js"></script></body></html>

js文件放在<head></head>之间

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ include file="/common/taglibs.jsp"%><!-- add by hongk end --><html><head><title>更改密码</title><LINK href="${ctx }/static/css/default/common.css" type="text/css" rel="stylesheet"><script src="${ctx }/static/js/common/common-ie.js" type="text/javascript"></script><script src="${ctx }/static/js/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script><script type="text/javascript" src="${ctx }/static/js/usrAndPower/resetAndUpdPass.js"></script></head><body><table class="deftoptable" border="0" width="90%" id="PAGETABLE" cellspacing="0" cellpadding="0" ><tr><td class="leftsidetd" width="15"> </td><td class="headercol" width="750"> <img border="0" src="${ctx }/static/images/head-sot2.gif" width="43" height="42" >更改密码</td><td class="rightsidetd" width="15"> </td></tr><tr ><td class="leftsidetd" width="15"> </td><td width="95%" class="bodycol" align=center ><br><table class="sestab" id="appChangePassword" cellspacing="0" cellpadding="0" style="width: 80%">   <thead><tr><th class="sheadleft"> </th><th class="sheadmain">更改密码</th><th class="sheadright"> </th></tr>       </thead>                              <tbody class="sbodymain"><tr><td colspan="3" class="sbodytd"><br /><table width="700" border=0 class="guitable"><tr><td align="center"><form action="" id="updatePassForm" class="updatePass_form">         <p>输入旧密码：<input type="password" name="oldPass"></p>         <p>输入新密码：<input type="password" name="newPass"></p>         <p>确认新密码：<input type="password" name="affirmPass"></p>         <input type="hidden" name="submitType" value="update">         <input type="button" id="updatePass" value="提交">              <input type="reset" name="resetPass" value="重置">              <input type="button" id="returns" value="返回">    </form></td></tr></table></td></tr></tbody></table><br></td><td class="rightsidetd"> </td></tr></table></body></html><!-- add by hongk end -->

js 文件资源

 //重置密码 $("#resetPass").click(function(){       var userName=$("#resetPassForm input[name='userName']").val();       var newPass=$("#resetPassForm input[name='newPass']").val();       var affirmPass=$("#resetPassForm input[name='affirmPass']").val();       if($.trim(userName)==""||$.trim(newPass)==""||$.trim(affirmPass)==""){           alert("请选填完整信息！");           return false;       }   $.ajax({type:"post",cache:false,dataType:"json",async:false,url:"usrDefine/resetPassOrUpdatePass.do",data:$("#resetPassForm").serialize(),success:function(json){if(json.success){alert(json.data);}else{alert(json.error);}} });   }); //修改密码 $("#updatePass").click(function(){     var oldPass=$("#updatePassForm input[name='oldPass']").val();     var newPass=$("#updatePassForm input[name='newPass']").val();     var affirmPass=$("#updatePassForm input[name='affirmPass']").val();     if($.trim(oldPass)==""||$.trim(newPass)==""||$.trim(affirmPass)==""){         alert("请选填完整信息！");         return false;     }    $.ajax({type:"post",cache:false,async:false,dataType:"json",url:"usrDefine/resetPassOrUpdatePass.do",data:$("#updatePassForm").serialize(),success:function(json){if(json.success){alert(json.data);}else{alert(json.error);}} }); });//重置页面和修改页面的返回 $("#returns").click(function(){    window.history.back(-1);                //update by hongk });

那么把这个js脚本放head里面还是body里面呢？
答案是不仅要放到body里面，而且还得放到定义 id='returns' 的列表框后面，因为这个js脚本中有 $("#returns").click(function()，如果放到head里或者body的 id='returns' 前，页面加载后顺序执行代码，执行到这个js发现 returns 未定义（即undefind），这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢？对！
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们，如果我们想定义一个全局对象，而这个对象与页面中的某个按钮（等等）有关时，我们必须将其放入body中，道理很明显：如果放入head，那当页面加载head部分的时候，那个按钮（等等）都还没有被定义（也可以说是还没有被加载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。

阅读全文

0 0