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. 使用CHCA搭建静态博客
			
    [toc] chca是一个使用golang开发的静态博客生成器,简单.方便.快捷,抛弃每次都需要使用命令编译文件,采用文件监听方式编译,作者只需把markdown文件放到配置中的markdown文件夹 ...
    
			
    2. 
						
  2. 51. leetcode 530. Minimum Absolute Difference in BST
			
    530. Minimum Absolute Difference in BST Given a binary search tree with non-negative values, find th ...
    
			
    3. 
						
  3. js prototype 继承
			
    //继承 function inherits(ctor,superCtor){ ctor.super_ = superCtor; ctor.prototype = Object.create(supe ...
    
			
    4. 
						
  4. web 前端路线
			
    
			
    5. 
						
  5. akoj-1319-四方定理
			
    四方定理 Time Limit:1000MS  Memory Limit:65536K Total Submit:28 Accepted:11 Description 数论中著名的"四方定理 ...
    
			
    6. 
						
  6. Android利用canvas画画板
			
    首先新建一个项目工程,建立文件,如下图所示
    
			
    7. 
						
  7. AOP通过反射获取自定义注解
			
    自定义注解: @Target({ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) @Documented @Component publ ...
    
			
    8. 
						
  8. html2canvas页面截图图片不显示
			
    前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...
    
			
    9. 
						
  9. Ubuntu无法访问windows分区
			
    正常情况: 重启, 先进入windows, 再重启进入Ubuntu(一定是重启, 先关机再进Ubuntu没用). 异常情况: sudo ntfsfix /dev/sda5(或6或7,得看哪个盘无法访问 ...
    
			
    10. 
						
  10. 多人开发的git项目如何保持提交日志为一条直线？
			
    多人开发的git项目如何保持提交日志为一条直线? 一.Git的项目的git常用操作 a)Git clone 项目地址 从远程仓库克隆项目到本地 b)Git pull 从当前分支拉取更新代码 c)Git ...
    
			
    11.