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. Spring源码解析——如何阅读源码
			
    最近没什么实质性的工作,正好有点时间,就想学学别人的代码.也看过一点源码,算是有了点阅读的经验,于是下定决心看下spring这种大型的项目的源码,学学它的设计思想. 手码不易,转载请注明:xingoo ...
    
			
    2. 
						
  2. 在html中使用javascript
			
    使用script元素,script6个元素 1.async:应该立即下载 2.charset:通过src属性指定代码的字符集 3.defer:表示脚本可以延迟到文档完全解析和显示后运行 4.langu ...
    
			
    3. 
						
  3. (4)UIView和父子控件
			
    IButton控件中除了有自身的属性之外还有继承的view的属性 内存地址一样,是同一个view来的,也就是最外层的view.
    
			
    4. 
						
  4. Maven干货
			
    好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m ...
    
			
    5. 
						
  5. 如何统计iOS产品不同渠道的下载量？
			
    一.前言 在开发过程中,Android可能会打出来很多的包,用于标识不同的商店下载量.原来觉得苹果只有一个商店:AppStore,如何做出不同来源的统计呢?本篇文章就是告诉大家如何做不同渠道来源统计. ...
    
			
    6. 
						
  6. 利用CSS hover伪类改变其他元素的总结
			
    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
    
			
    7. 
						
  7. Git使用教程及常用命令大全
			
     一.git命令名词解释1.添加/跟踪/暂存:添加到本地索引       git add 文件名2.提交:提交到本地仓库       git commit -m '注释'3.推送:将提交到本地仓库的所 ...
    
			
    8. 
						
  8. 8.21.2 深入finally语句快
			
    关于finally语句块 1.finally语句块可以直接和try语句块联用. try....finally... 2.try...catch....finally 也可以. 3.在finally语句 ...
    
			
    9. 
						
  9. 使用SAS和JavaScript前端上传Azure Bolb大文件
			
    问题描述: Azure Storage Rest API提供了对于大文件分块上传方法,分别使用Put Block和Put Block List实现相关功能 参考链接: Uploading Large  ...
    
			
    10. 
						
  10. weblogic 启动问题
			
    通过startWebLogic.cmd 手动启动weblogic可以成功启动 myeclipse配置后,runserver 就会报 Error occurred during initializati ...
    
			
    11.