最近一直在忙工作，没有时间来写博客了，不过今天做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同。起初我没在意这个问题，后来一直解决不了，通过上网与查资料问同事，终于我明白了，原来我碰到了这么个问题。

用简单的一句话介绍就是加载顺序的问题。如果放入head，那当页面加载head部分的时候，那个控件都还没有被定义（也可以说是还没有被加 载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。 如果放入控件后面，则达到了所想的结果（控件加载完了，JS脚本也进行加载得到了想得到的值）

其实如果是JS中的方法就无所谓放在那里，如果是全局对象js脚本就必须放在body里面。如果是一个方法W3C就建议房子Head里面。

下面我就用例子慢慢介绍一下吧。（大神勿喷）

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript">

    alert("加载页面之前进行弹出");

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="btnAlter" type="button" value="button" />

    </div>

        <script type="text/javascript">

    alert("加载页面之后进行弹出");

    </script>

    </form>

</body>

</html>

JS代码放在head和body中的区别分析的更多相关文章

  1. vue.js引用出错-script代码块放在head和body中的区别

    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...

  2. JavaScript问题01 js代码放在header和body的区别

    1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...

  3. JS代码放在哪里比较好！

    在页面上加上<script></script>只有2个地方:head中,body体中 如果外部的JS文件,在head中加,写页面特效js放在body后面. <html&g ...

  4. JavaScript之将JS代码放在什么位置最合适

    1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  5. JS代码，从一个数组中得到连号的数并显示

    JavaScript code function m() { var k = [1, 2, 7, 8, 9, 11, 22, 35, 36]; ) return; ; ; ; ; i < k.l ...

  6. js script放在head和body里面的区别

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp66       java script放在head和body的区别   ...

  7. iOS中UIWebView执行JS代码(UIWebView)

    iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...

  8. jquery的js代码兼容全部浏览器的解决方法

    //以下均可console.log()实验   var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网 ...

  9. 关于js代码位置的第一次总结

    最近在学习dom树节点操作时,发现查找结点总是返回null,原因在于将js代码放在了head里,因为页面是从上往下逐行加载,在还未加载相关节点时当然查找不到,返回值为null. 而对于另一句老生常谈的 ...

随机推荐

  1. Codeforces 443 B. Kolya and Tandem Repeat

    纯粹练JAVA.... B. Kolya and Tandem Repeat time limit per test 2 seconds memory limit per test 256 megab ...

  2. web富客户端应用下，前端架构、系列（二）。

    序 我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思 上一篇我们把前端架构分为3个模 ...

  3. hdu Rescue (bfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1242 简单优先队列搜索,自己好久不敲,,,,,手残啊,,,,orz 代码: #include < ...

  4. AspNetPager常用属性及一些样式

    AlwaysShow 总是显示分页控件,即使要分页的数据只有一页 AlwaysShowFirsLastPageNumbr 是否总是显示第一页和最后一页数字页索引按钮 BackImageUrl 面板的背 ...

  5. JAVA8,SPRING,ANGULARJS对项目

    java8+spring+angularjs 项目应用 最近有写一个电子订单商务网站,使用JAVA8,SPRING,ANGULARJS对项目使用的技术和大家分享. 第一次写博客,哪有不对需要改正的请联 ...

  6. 经典算法题每日演练——第十一题 Bitmap算法

    原文:经典算法题每日演练--第十一题 Bitmap算法 在所有具有性能优化的数据结构中,我想大家使用最多的就是hash表,是的,在具有定位查找上具有O(1)的常量时间,多么的简洁优美, 但是在特定的场 ...

  7. 6天通吃树结构—— 第三天 Treap树

    原文:6天通吃树结构-- 第三天 Treap树 我们知道,二叉查找树相对来说比较容易形成最坏的链表情况,所以前辈们想尽了各种优化策略,包括AVL,红黑,以及今天 要讲的Treap树. Treap树算是 ...

  8. JavaScript语言基础知识1

    我们想知道什么JavaScript.首先,我们必须知道JavaScript有什么特点? JavaScript究竟是什么?它是一种基于对象而且具有安全性的脚本语言,对.它是脚本语言.所以它有下面特点: ...

  9. ZOJ3640之简单慨率DP

    Help Me Escape Time Limit: 2 Seconds      Memory Limit: 32768 KB Background     If thou doest well, ...

  10. SSH深度历险记（两） Jboss+EJB一审

    学习感悟:每次学习新知识.通过初审会从小事做起,获得成就感.经典Hello Workd我们成功的例子奠定了门哈,呢.非常好的理解了.Ejb的核心. 今天主要以这个小实例,来学习EJB的分布式,我们能够 ...