java script放在head和body的区别

最新推荐文章于 2023-12-30 15:46:30 发布
最新推荐文章于 2023-12-30 15:46:30 发布
阅读量1w 收藏 5
点赞数 3
分类专栏： HTML&JavaScript Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsjszg/article/details/8171145
版权 
  1，在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。
  2，在body中时，直接加载并执行
 

典型的区别：
 

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

 

例如：
 

<html>
	<head>
	<title>第一个Html5视频测试</title>
		<script type="text/javascript">
			var myVideo=document.getElementById("video1");
			
			function playPause()
			{ 
				if (myVideo.paused) 
				  myVideo.play(); 
				else 
				  myVideo.pause(); 
			} 
		</script> 
	</head>
	<body>
		<div style="text-align:center;">
			<button οnclick="playPause()">播放/暂停</button> 
		  	<br/> 
			<video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">
				Your browser does not support the video tag.
			</video>
		</div>
	</body>
</html>
点击“播放/暂停”时，playPause会被执行，但执行时myVideo对象没有定义的，因为定义和初始化语句被有执行过。
 

如果要执行，需要放在body
 

<html>
	<head>
	<title>第一个Html5视频测试</title>
	</head>
	<body>
		<div style="text-align:center;">
			<button οnclick="playPause()">播放/暂停</button> 
		  	<br/> 
			<video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">
				Your browser does not support the video tag.
			</video>
		</div>
		<script type="text/javascript">
			var myVideo=document.getElementById("video1");
			
			function playPause()
			{ 
				alert("AA");
				if (myVideo.paused) 
				  myVideo.play(); 
				else 
				  myVideo.pause(); 
			} 
		</script> 
	</body>
</html>

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


                

        

        

    




    

      

        

            

              
                
                  jsjszg
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    5
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  4
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
script标签放在head内和body内有什么区别

				
			

			

				

					Jack Lee's blogs
				

				

					03-15
					
					2998
					
				

			

		

		

			
				
加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。
例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效
区别简述：
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。
——————————————————————...

			
		

	



                

              
                



	

		

			

				
					
探讨Java、JavaApplet与Java Script间方法与变量的互访.pdf

					
最新发布

				
			

			

				

					01-02
				

			

		

		

			
				
"探讨Java、JavaApplet与JavaScript...本文讨论了Java、Java Applet和JavaScript之间的方法和变量的互访问题，并提供了相关的技术和示例代码，旨在帮助开发者更好地理解和应用这些技术，以开发出更完美的Web应用程序。

			
		

	



                


  
              

                


	

		

			

				
					
JS中script代码放在header和body的区别

				
			

			

				

					qq_29735775的博客
				

				

					07-28
					
					6490
					
				

			

		

		

			
				
1 body和header中JavaScript执行的时机



1.1 header中

　　　　放在header中的javascript代码会进行预加载（即：在页面加载之前就会进行），所以需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。

　　　　坑01：header中的JavaScript只是比页面先加载，...

			
		

	





	

		

			

				
					
script 写在body和head中的区别

				
			

			

				

					菜鸟的飞翔
				

				

					05-13
					
					1375
					
				

			

		

		

			
				
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。

			
		

	



		

			
		



	

		

			

				
					
描述一下脚本＜script＞放在＜head＞和放到＜body＞底部的区别

				
			

			

				

					欣欣酱博客
				

				

					02-20
					
					2939
					
				

			

		

		

			
				
-------

放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。
放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。

-------

html渲染执行的顺序为从上到下的一个执行顺序，首先第一步执行head中的内容，如果有外联样式，则下载外联样式，如果有script标签，那么浏览器的渲染引擎则停止，交给JavaScript引

			
		

	





	

		

			

				
					
Java script基础学习.doc

				
			

			

				

					09-30
				

			

		

		

			
				
JavaScript代码可以放在HTML文档的任意位置，但通常推荐将其放在`<head>`或`<body>`标签内，以确保在页面加载时正确执行。基本的JavaScript语句结构如下：  ```html <script language="javascript">  // JavaScript ...

			
		

	





	

		

			

				
					
java script 学习笔记

				
			

			

				

					11-24
				

			

		

		

			
				
* JavaScript 代码可以放在 HTML 文件的 `<head>` 或 `<body>` 部分，但如果放在 `<frameset>` 中，必须在 `<frameset>` 之前。 * JavaScript 变量可以使用 `var` 关键字声明，变量类型有数值、字符串、布尔值、对象...

			
		

	





	

		

			

				
					
Java script基础.docx

				
			

			

				

					10-18
				

			

		

		

			
				
外部引用JS文件时，`<script>`标签通过`src`属性指定JS文件路径，同样建议置于`<body>`底部。例如：  ```html <script src="script.js"></script> ```  展示JavaScript内容到网页上，常见的方法有`document.write()`...

			
		

	





	

		

			

				
					
java script与applet通信

				
			

			

				

					05-31
				

			

		

		

			
				
JavaScript作为脚本语言，在Web开发中起到交互和动态效果的作用，而Java Applet则提供了更强大的计算和处理能力。因此，探讨JavaScript与Java Applet之间的通信机制对于构建复杂的Web应用程序非常重要。  ### ...

			
		

	





	

		

			

				
					
script标签放在head标签与body标签中的区别

				
			

			

				

					qq_43635212的博客
				

				

					03-28
					
					1634
					
				

			

		

		

			
				
html代码是从上往下依次执行,<script>放在<head>中时，会在页面加载之前加载到浏览器里，放在<body>中时，会在页面加载完成之后读取。
所以：在head中checkInput1 为undefined，而在body的script标签中checkInput2为Object
<html>
  <head>
    <tit...

			
		

	





	

		

			

				
					
javascript(js)放在head和body的区别

				
			

			

				

					nyykxboy的专栏
				

				

					11-27
					
					829
					
				

			

		

		

			
				
转载自：http://www.itbkc.com/?post=93

1：将JavaScript标识放置...在头部之间，使之在主页和其余部分代码之前预先装载；比如对*.js文件的提前调用。也就是说把代码放在区在页面载入的时候，就同时载入了代码，你在区调用时就不需要再载入代码了，速度就提高了，这种区别在小程序上是看不出的，当运行很大很复杂的程序时，就可以看出了。
2：当然也可以将JavaSc

			
		

	





	

		

			

				
					
js代码放在head和body的区别

				
			

			

				

					王欢的博客
				

				

					04-05
					
					1591
					
				

			

		

		

			
				
由于在页面中总是难免javascript脚本语言， 
 在代码中看到body里可以放 
 <html> 
<body> 
<script type="text/javascript"> 
alert("in body"); 
</script> 
</body> 
<head> 
<script type="text/javascript"> 
alert("in head"); 
</script

			
		

	





	

		

			

				
					
script在head和在body中的区别

				
			

			

				

					qq_43654065的博客
				

				

					01-19
					
					3596
					
				

			

		

		

			
				
转载：原博文
加载的顺序不一样，html是从上往下加载的。如果在网速慢的情况下把js代码放在body底部用户会先看到网页结构，等js加载完成后才出现特效。
区别：
在HTML  body部分中的JavaScript会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。
1. JavaScript应放在哪里
head 部分中的脚本:
需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部

			
		

	





	

		

			

				
					
＜script＞放在head内和body内的区别

				
			

			

				

					Q1368089323的博客
				

				

					12-13
					
					2373
					
				

			

		

		

			
				
1.区别简述：
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。
加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。
例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效
2.JavaScript的位置
head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分

			
		

	





	

		

			

				
					
＜script＞元素放在＜head＞元素中与放在＜body＞元素中页面内容的后面的区别

				
			

			

				

					GCSDZQ的博客
				

				

					09-19
					
					221
					
				

			

		

		

			
				
放在开头： 意味着必须要等到全部JavaScript代码都被下载，解析和执行完成以后，才能开始呈现页面的内容。对于需要很多JavaScript代码的页面来说，就会导致浏览器在呈现页面时出现明显的延迟，延迟期间浏览器窗口是一片空白。

放在后面：在解析包含JavaScript代码之前，页面的内容将完全呈现在浏览器中，用户也会因为浏览器显示空白窗口的时间缩短感到打开页面的速度加快了。
...

			
		

	





	

		

			

				
					
script 标签放在 head 里和放在 body 底部里的区别

				
			

			

				

					前端小白的博客
				

				

					12-30
					
					559
					
				

			

		

		

			
				
这可能会阻塞页面的渲染，因为浏览器必须等待脚本加载和执行完成后才能继续构建 DOM 树。相反，将脚本放在  底部会使浏览器先渲染页面内容，然后再加载和执行脚本，避免了阻塞渲染的情况。中可以确保在加载和执行脚本之前已经加载了所需的资源。但对于某些特定情况，如需要在页面加载前执行特定操作或有明确的依赖关系时，将脚本放在。中时，浏览器必须在加载脚本前先下载并执行它们，这可能导致页面加载时间延长。：如果脚本依赖于页面的其他资源（如 CSS、图片等），将脚本放在。底部并仍然控制脚本的加载顺序和依赖关系。

			
		

	





	

		

			

				
					
java script 案例

				
			

			

				

					05-10
				

			

		

		

			
				
以下是一个简单的 JavaScript 案例，用于计算两个数字的和并将结果显示在网页上：

```html
<!DOCTYPE html>
<html>
<head>
	<title>JavaScript 案例</title>
</head>
<body>

	<h1>计算器</h1>

	<input type="number" id="num1" placeholder="输入数字">
	<input type="number" id="num2" placeholder="输入数字">
	<button onclick="calculate()">计算</button>

	<p id="result"></p>

	<script>
		function calculate() {
			var num1 = parseInt(document.getElementById("num1").value);
			var num2 = parseInt(document.getElementById("num2").value);
			var result = num1 + num2;
			document.getElementById("result").innerHTML = "结果是：" + result;
		}
	</script>

</body>
</html>
```

在 HTML 中，我们创建了两个文本框和一个按钮，用于输入两个数字并触发计算函数。在 JavaScript 中，我们定义了一个 `calculate` 函数，该函数获取输入的两个数字并计算它们的总和。最后，我们将结果显示在一个段落元素中。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值