java script放在head和body的区别
 
  1，在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。

  2，在body中时，直接加载并执行


典型的区别：


如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。




例如：







[html] view plaincopy


 






  1. <html>  
    2. 

  2.     <head>  
    3. 

  3.     <title>第一个Html5视频测试</title>  
    4. 

  4.         <script type="text/javascript">  
    5. 

  5.             var myVideo=document.getElementById("video1");  
    6. 

  6.               
    7. 

  7.             function playPause()  
    8. 

  8.             {   
    9. 

  9.                 if (myVideo.paused)   
    10. 

  10.                   myVideo.play();   
    11. 

  11.                 else   
    12. 

  12.                   myVideo.pause();   
    13. 

  13.             }   
    14. 

  14.         </script>   
    15. 

  15.     </head>  
    16. 

  16.     <body>  
    17. 

  17.         <div style="text-align:center;">  
    18. 

  18.             <button onclick="playPause()">播放/暂停</button>   
    19. 

  19.             <br/>   
    20. 

  20.             <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
    21. 

  21.                 Your browser does not support the video tag.  
    22. 

  22.             </video>  
    23. 

  23.         </div>  
    24. 

  24.     </body>  
    25. 

  25. </html>  




点击“播放/暂停”时，playPause会被执行，但执行时myVideo对象没有定义的，因为定义和初始化语句被有执行过。


如果要执行，需要放在body







[html] view plaincopy


 






  1. <html>  
    2. 

  2.     <head>  
    3. 

  3.     <title>第一个Html5视频测试</title>  
    4. 

  4.     </head>  
    5. 

  5.     <body>  
    6. 

  6.         <div style="text-align:center;">  
    7. 

  7.             <button onclick="playPause()">播放/暂停</button>   
    8. 

  8.             <br/>   
    9. 

  9.             <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
    10. 

  10.                 Your browser does not support the video tag.  
    11. 

  11.             </video>  
    12. 

  12.         </div>  
    13. 

  13.         <script type="text/javascript">  
    14. 

  14.             var myVideo=document.getElementById("video1");  
    15. 

  15.               
    16. 

  16.             function playPause()  
    17. 

  17.             {   
    18. 

  18.                 alert("AA");  
    19. 

  19.                 if (myVideo.paused)   
    20. 

  20.                   myVideo.play();   
    21. 

  21.                 else   
    22. 

  22.                   myVideo.pause();   
    23. 

  23.             }   
    24. 

  24.         </script>   
    25. 

  25.     </body>  
    26. 

  26. </html>  




当然，javascript放在head中有其他的好处的，所以，如果必须放在head中，变量初始化需要另外想办法




												


											
js script放在head和body里面的区别的更多相关文章
	

    
								
  1. JS代码放在head和body中的区别分析
		
    最近一直在忙工作,没有时间来写博客了,不过今天做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同.起初我没在意这个问题,后来一直解决不了,通过上网与查资料问同事,终于我明白了,原来我碰到了这 ...
    
		
    2. 
						
  2. vue.js引用出错-script代码块放在head和body中的区别
		
    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...
    
		
    3. 
						
  3. 【web性能】js应该放在html页面的什么位置
		
    所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.   外部JS的阻塞下载 所有浏览器在下载JS的 ...
    
		
    4. 
						
  4. JavaScript问题01 js代码放在header和body的区别
		
    1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...
    
		
    5. 
						
  5. JS代码放在哪里比较好！
		
    在页面上加上<script></script>只有2个地方:head中,body体中 如果外部的JS文件,在head中加,写页面特效js放在body后面. <html&g ...
    
		
    6. 
						
  6. js  script中引用其他script
		
    在需要引用目标js中引用其他js依赖项 可以使用这个方法直接在js顶部加入这一行即可 document.write("<script type='text/javascript' sr ...
    
		
    7. 
						
  7. js——<script>标签的加载顺序
		
    用了很久的JavaScript,今天突然就碰见了将一个js文件放在<head></head>与<body></body>标签中,一个不可以执行,一个可以 ...
    
		
    8. 
						
  8. JavaScript之将JS代码放在什么位置最合适
		
    1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
    
		
    9. 
						
  9. <script src="../build/browser.min.js"></script> 是用来里面babel工具把ES6的语法转成ES5
		
    <!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. webpack2 前篇
			
    webpack2 前篇 #webpack 前两天用了一天半时间琢磨了下webpack2,想起去年这时候,面对webpack1那样恶心的文档,前前后后搞了好几次才摸索清楚,那真是吐了. 划重点 其实we ...
    
			
    2. 
						
  2. 测试环境-memcached安装与说明
			
    一,下载memcached和libevent安装包: 1,Memcache用到了libevent这个库用于Socket的处理,所以还需要安装libevent (这两个包百度上都能找到) 二,安装lib ...
    
			
    3. 
						
  3. [硬件]_ELVE_VS2015下opencv3.3的配置问题
			
    0x00  引言 最近想搞一下摄像头,但是我的Windows版本是64位的,opencv3.3貌似也只支持64位系统了,所以就配置一下win10+vs2015+opencv3.3的环境变量,具体下载和 ...
    
			
    4. 
						
  4. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
			
    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
    
			
    5. 
						
  5. 4.npm模块安装和使用(axios异步请求，lodash工具库）
			
    建立package.json npm init 下载包 npm install axios npm install lodash 下载包,并加到package里面 npm install axios  ...
    
			
    6. 
						
  6. NYOJ116 士兵杀敌（二）
			
    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...
    
			
    7. 
						
  7. 7种方法解决移动端Retina屏幕1px边框问题
			
    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
    
			
    8. 
						
  8. Java String字符串深入详解
			
    Java中字符串对象创建有两种形式,一种为字面量形式,如String str = "hello";,另一种就是使用new这种标准的构造对象的方法,如String str = new ...
    
			
    9. 
						
  9. mysql 忘记root密码，重置密码，及重置密码后权限问题不能登录的解决方案
			
    由于一段时间没有使用MySQL,忘记了root登录密码. 决定重置下密码,搜索帮助. 参考文档: http://blog.csdn.net/odailidong/article/details/507 ...
    
			
    10. 
						
  10. 局部加权回归LOWESS
			
    1. LOWESS 用kNN做平均回归: \[ \hat{f(x)} = Ave(y_i | x_i \in N_k(x)) \] 其中,\(N_k(x)\)为距离点x最近k个点组成的邻域集合(nei ...
    
			
    11.