`

js script放在head和body里面的区别

阅读更多
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp66   
 
 java script放在head和body的区别
 
  1,在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始。
  2,在body中时,直接加载并执行

典型的区别:
如果有不在函数中的执行语句,比如变量初始化,如果在head中就不会执行。

例如:
[html] view plaincopy
 
  1. <html>  
  2.     <head>  
  3.     <title>第一个Html5视频测试</title>  
  4.         <script type="text/javascript">  
  5.             var myVideo=document.getElementById("video1");  
  6.               
  7.             function playPause()  
  8.             {   
  9.                 if (myVideo.paused)   
  10.                   myVideo.play();   
  11.                 else   
  12.                   myVideo.pause();   
  13.             }   
  14.         </script>   
  15.     </head>  
  16.     <body>  
  17.         <div style="text-align:center;">  
  18.             <button onclick="playPause()">播放/暂停</button>   
  19.             <br/>   
  20.             <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
  21.                 Your browser does not support the video tag.  
  22.             </video>  
  23.         </div>  
  24.     </body>  
  25. </html>  
点击“播放/暂停”时,playPause会被执行,但执行时myVideo对象没有定义的,因为定义和初始化语句被有执行过。
如果要执行,需要放在body
[html] view plaincopy
 
  1. <html>  
  2.     <head>  
  3.     <title>第一个Html5视频测试</title>  
  4.     </head>  
  5.     <body>  
  6.         <div style="text-align:center;">  
  7.             <button onclick="playPause()">播放/暂停</button>   
  8.             <br/>   
  9.             <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
  10.                 Your browser does not support the video tag.  
  11.             </video>  
  12.         </div>  
  13.         <script type="text/javascript">  
  14.             var myVideo=document.getElementById("video1");  
  15.               
  16.             function playPause()  
  17.             {   
  18.                 alert("AA");  
  19.                 if (myVideo.paused)   
  20.                   myVideo.play();   
  21.                 else   
  22.                   myVideo.pause();   
  23.             }   
  24.         </script>   
  25.     </body>  
  26. </html>  
当然,javascript放在head中有其他的好处的,所以,如果必须放在head中,变量初始化需要另外想办法
分享到:
评论

相关推荐

    JS代码放在head和body中的区别分析

    总结一下,JavaScript代码放在`&lt;head&gt;`和`&lt;body&gt;`中的主要区别在于执行时机: 1. 放在`&lt;head&gt;`:代码会尽早执行,但可能在某些依赖的HTML元素解析之前,这可能导致错误,除非代码是与用户交互事件关联的函数。 2. ...

    javascript写在head标签中产生的报错.pdf

    在HTML文档中,JavaScript代码可以放在`&lt;script&gt;`标签内,这两个标签可以放置在`&lt;head&gt;`或`&lt;body&gt;`标签内。然而,当JavaScript位于`&lt;head&gt;`标签中时,需要注意一些潜在的问题,正如“javascript写在head标签中产生的...

    html5.js文件,在head部分引用该文件,使各种浏览器支持html5

    引用HTML5.js文件时,通常会把它放在&lt;head&gt;部分的顶部,这样可以尽早执行,避免因浏览器不支持某些特性而影响到页面的其他部分。例如: ```html &lt;!DOCTYPE html&gt; &lt;head&gt; 我的HTML5网页 &lt;script src=...

    head_head_js_源码

    在HTML中,`&lt;script&gt;`标签常被用于插入JavaScript代码,而放在&lt;head&gt;标签内的脚本通常会在文档解析时执行,这对于页面加载速度和资源管理有直接影响。 基于这些信息,我们可以深入探讨以下几个JavaScript在网页头部...

    JavaScript的100个经典实例

    * 使用外部 JavaScript:可以使用外部 JavaScript,例如 `&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;script src="/js/example_externaljs.js"&gt;&lt;/script&gt;实际的脚本位于名为 "xxx.js" 的外部脚本中。&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;` ...

    js放到head中失效的原因与解决方法

    在探讨将JavaScript代码放在HTML文档的&lt;head&gt;区域会导致失效的原因时,我们首先需要理解HTML页面的加载和渲染过程。在标准的HTML结构中,浏览器是从上到下逐行解析HTML文档的。如果在&lt;head&gt;部分就加载了JavaScript...

    javascript代码应当放在html代码哪个位置比较好_.docx

    根据项目的需求和个人偏好,可以选择将JavaScript代码放在`&lt;head&gt;`或`&lt;body&gt;`标签内,也可以使用外部文件进行管理。无论采取哪种策略,都应该考虑到代码的执行顺序、页面加载效率以及维护便捷性等因素。

    动态加载script文件的两种方法

    动态加载JavaScript文件是Web开发中常见的一种技术,它允许网页在需要时按需加载脚本,从而优化页面加载速度和用户体验。通常有两种主要方法来实现动态加载script文件: 1. **利用Ajax方式加载**: 在这种方法中,...

    js基础教程

    - 嵌入式脚本:在`&lt;script&gt;`标签内编写JavaScript代码,放置在HTML文档的`&lt;head&gt;`或`&lt;body&gt;`标签内。 ```html &lt;script type="text/javascript"&gt; // JavaScript代码 &lt;/script&gt; ``` #### 四、JavaScript输出...

    简单的js学习文件努力

    3. **外部.js 文件里**:当JavaScript代码量较大,或者需要在多个页面中复用时,最佳实践是将其放在外部.js文件中。这样可以提高代码的可维护性和复用性,只需要在HTML中引入一次,即可在所有引用该.js文件的页面中...

    JS教程javascript教程

    &lt;script src="path/to/your/file.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 页面内容 --&gt; &lt;/body&gt; ``` - **注意事项**: - 外部文件中不应包含 `&lt;script&gt;` 标签。 - 通过 `src` 属性指定...

    javaScript-javascript-初级到高级-笔记.docx

    内部使用时,JavaScript代码可以直接写在HTML文件的`&lt;script&gt;`标签中,通常建议将定义的函数放在`&lt;head&gt;`部分,而调用函数的代码放在`&lt;body&gt;`部分,以确保在元素加载完成后执行。例如: ```html &lt;head&gt; &lt;title&gt;My ...

    基于script标签引入vue.js

    Vue.js是一种流行的JavaScript框架,主要用于构建用户界面。它以其易学易用、灵活性高和组件化开发模式而受到广大开发者喜爱。在HTML页面中通过`&lt;script&gt;`标签引入Vue.js,是传统方式下本地离线使用Vue框架的方法,...

    Script中defer的作用

    在JavaScript编程中,`&lt;script&gt;`标签是我们引入外部JavaScript文件的常用方式。然而,为了优化网页加载性能,JavaScript代码的执行时机对页面渲染有着显著的影响。`defer`属性是`&lt;script&gt;`标签的一个可选属性,它...

    js基础知识点总结-入门级别

    为了减少重复代码并在多个页面间共享JavaScript功能,可以将JavaScript代码放在外部文件中,并通过`&lt;script&gt;`标签的`src`属性引用这些文件。 示例代码: ```html &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;script src="example.js...

    Javascript基础网页中调用JS代码的几种方法

    &lt;script src="script.js" language="javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; ()"&gt;显示消息 &lt;/body&gt; ``` 其中,“script.js”是外部JavaScript文件的路径。 #### 3. 使用`document.write()`输出内容 `document....

    【第七章】JavaScript【Script标签与访问HTML页面(1)】

    通常,脚本应该放在`&lt;head&gt;`标签内或`&lt;body&gt;`标签的底部。放在`&lt;head&gt;`中,脚本会随着HTML的解析而执行,可能导致页面加载延迟;而在`&lt;body&gt;`底部,脚本在页面元素加载后执行,有助于提高用户体验。 3. **类型指定*...

    菜鸟学习javascript实例教程.pdf

    此外,为了保持代码的整洁,你可以将JavaScript代码放在外部文件中,然后通过`&lt;script src="xxx.js"&gt;&lt;/script&gt;`引用。这样,你可以把JavaScript逻辑与HTML结构分开,提高代码的可维护性。 变量是JavaScript中存储...

    JavaScript的执行过程详细研究

    这里,外部文件`head.js`和`body.js`中的脚本将按照它们在HTML文档中的位置顺序执行。 #### 四、预编译与执行顺序 JavaScript在执行之前会经历一个预编译阶段。预编译的主要目的是提升程序的执行效率。在这个阶段...

Global site tag (gtag.js) - Google Analytics