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. 在 overlay 中运行容器 - 每天5分钟玩转 Docker 容器技术（51）
			
    上一节我们创建了 overlay 网络 ov_net1,今天将运行一个 busybox 容器并连接到 ov_net1: 查看容器的网络配置: bbox1 有两个网络接口 eth0 和 eth1.eth ...
    
			
    2. 
						
  2. RabbitMQ --- Work Queues（工作队列）
			
    目录 RabbitMQ --- Hello Mr.Tua 前言 Work Queues 即工作队列,它表示一个 Producer 对应多个 Consumer,包括两种分发模式:轮循分发(Round-r ...
    
			
    3. 
						
  3. Activity中finish()和onDestroy()的区别
			
    finish()方法用于结束一个Activity的生命周期,而onDestory()方法则是Activity的一个生命周期方法,其作用是在一个Activity对象被销毁之前,Android系统会调用该 ...
    
			
    4. 
						
  4. 66. Plus One【leetcode】
			
    Given a non-negative integer represented as a non-empty array of digits, plus one to the integer. Yo ...
    
			
    5. 
						
  5. 《Java从入门到放弃》入门篇：springMVC数据传递
			
    springMVC中的数据传递方式与JSP和Struts2相比,更加的简单.具体有什么样的区别呢?我们通过下面这张图来对比就知道了. 随手画的,有些错别字,不用太在意..... 接下来,进入正题,sp ...
    
			
    6. 
						
  6. python中的赋值和深浅拷贝
			
    python中,A object  = B object  是一种赋值操作,赋的值不是一个对象在内存中的空间,而只是这个对象在内存中的位置 . 此时当B对象里面的内容发生更改的时候,A对象也自然而然的 ...
    
			
    7. 
						
  7. Dinic算法详解及实现
			
    预备知识: 残留网络:设有容量网络G(V,E)及其上的网络流f,G关于f的残留网络即为G(V',E'),其中G'的顶点集V'和G的顶点集V相同,即V'=V,对于G中任何一条弧<u,v>,如 ...
    
			
    8. 
						
  8. Pivot-Header的花式效果
			
    要实现如上图所示的效果分为三步: 1.重写Pivot样式,去掉Pivot的Header或者是直接使用默认的Pivot的样式然后不写Header 2.使用一个ListView或者是横向的StackPan ...
    
			
    9. 
						
  9. 10分钟学会在windows/Linux下设置ASP.Net Core开发环境并部署应用
			
    创建和开发ASP.NET Core应用可以有二种方式:最简单的方式是通过Visual Studio 2017 来创建,其优点是简单方便,但需要安装最新版本Visual Studio 2017 prev ...
    
			
    10. 
						
  10. Razor语法问题(foreach里面嵌套if)
			
    报错: @foreach (var item in ViewBag.TopList) { if (!string.IsNullOrWhiteSpace(item.LogoPic_Mobile)) &l ...
    
			
    11.