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. 用Eclipse生成JPA元模型
			
    在JPA criteria 动态查询中,有个"元模型"的东西,它是根据"实体"类动态生成的一个类,它的主要作用是实现JPA criteria查询的"类 ...
    
			
    2. 
						
  2. 用SSH解决大局域网反向端口转发问题
			
    本文作者Tony Lee,转载自FreeBuf.COM ​​自从家里换了联通光纤后,联通就在我家宽带出口前搭了一个路由器,我家也彻底沦为192.168.1.0/24段的局域网了,带来的问题就是在外网无 ...
    
			
    3. 
						
  3. CentOS服务器运维监控Nagios（一）
			
    CentOS下搭建Nagios 王尚 2014.11.09 操作系统:CentOS-6.5-i386-bin-DVD1.iso 安装在VM中进行测试的. 本章需要的软件链接: php-5.3.2.ta ...
    
			
    4. 
						
  4. unable to create …
			
    问题描述: 在新建Android Application时会出现unable to create the selected property page 解决方法: 将用户PATH路径中的jdk路径放到 ...
    
			
    5. 
						
  5. Base：一种 Acid 的替代方案
			
    原文链接: BASE: An Acid Alternative 数据库 ACID,都不陌生:原子性.一致性.隔离性和持久性,这在单台服务器就能搞定的时代,很容易实现,但是到了现在,面对如此庞大的访问量 ...
    
			
    6. 
						
  6. VS2010 常见错误类型汇总
			
    开发路漫漫,尤其对于刚从事开发不久的新手来说,常常遇到一些稀奇古怪的错误,很是头疼,鉴于自己在开发过程中常遇到的几个错误做个分享,希望对大家有所帮助: 错误1: 在创建完win32的DLL后,编译时出 ...
    
			
    7. 
						
  7. 学习java线程学习笔记
			
    线程:代码执行的一个分支          主要作用是提高了效率,cpu能同时执行多个部分的代码.      线程的创建:两种方式      a.继承于thread类,重写run方法.      b. ...
    
			
    8. 
						
  8. Sublime Text3快捷键
			
    Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行(按住-继续选择下 ...
    
			
    9. 
						
  9. Java入门——（6）集合
			
       关键词:Collection接口.Map接口.Iterator接口.泛型.Collections工具类.Arrays工具类   一.集合概述      当数据多了需要存储,需要容器,而数据的个数 ...
    
			
    10. 
						
  10. alter system [switch logfile]与[archive log current]的区别
			
    --alter system [switch logfile]与[archive log current]的区别 ------------------------------------------- ...
    
			
    11.