JS放在head和放在body中的区别

news/2024/7/19 15:24:16 标签: JS, script

 JS放在head和放在body中的区别

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

一、区别
浏览器解析html是从上到下的。
如果把javascript放在head里的话,则先被解析,但这时候body还没有解析,所以会返回空值。
一般都会绑定一个监听,当全部的html文档解析完之后,再执行代码:
   windows.οnlοad=function(){
       //这里放入执行代码
   }
说明:

放在head中的JS代码会在页面加载完成之前就读取,而放在body中的JS代码,会在整个页面加载完成之后读取。

这就说明了,如果我们想定义一个全局对象,而这个对象是页面中的某个按钮时,我们必须将其放入body中,道理很明显:如果放入head,那当你定义的时候,那个按钮都没有被加载,可能获得的是一个undefind。

——————————————————————————

二、JavaScript应放在哪
页面中的JavaScript会在浏览器加载页面的时候被立即执行,有时候我们想让一段脚本在页面加载的时候执行,而有时候我们想在用户触发一个事件的时候执行脚本。

1)head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。

<html>
<head>
  <script type=”text/javascript”>
  …
  </script>
</head>

2)body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

<html>
<head>
</head>
<body>
  <script type=”text/javascript”>
  …
  </script>
</body>

3)body 和 head 部分可同时有脚本:文件中可以在body和head部分同时存在脚本。

<html>
<head>
  <script type=”text/javascript”>
  …
  </script>
</head>
<body>
  <script type=”text/javascript”>
  …
  </script>
</body>

4)外部脚本的使用

有时候你可能想在几个页面中运行同样的脚本程序, 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文件中,保存在扩展名为 .js的文件中。

注意:外部脚本文件中不要包含标记符<script>

使用外部脚本时将标记符<script> 的“src”属性值指向相应的.js文件就可以了:

<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>


http://www.niftyadmin.cn/n/915091.html

相关文章

1. jack-server报错

一、服务器上的jack编译报错&#xff0c;修改ok&#xff0c;已验证 Communication error with Jack server (60), try jack-diagnose or see Jack server log Failed to authenticate Jack server certificate. Try jack-diagnose Failed to authenticate Jack server certifi…

蓝桥杯-猜年龄-java

/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称&#xff1a; 蓝桥杯赛题 * 作 者&#xff1a; 彭俊豪 * 完成日期&#xf…

a标签的target链接跳转指向iframe的方法

<iframe name"myFrameName" ></iframe> <a href"#" target"myFrameName" >11111</a>

【bzoj4551】[Tjoi2016Heoi2016]树 并查集

题目描述 在2016年&#xff0c;佳媛姐姐刚刚学习了树&#xff0c;非常开心。现在他想解决这样一个问题&#xff1a;给定一颗有根树&#xff08;根为1&#xff09;&#xff0c;有以下两种操作&#xff1a;1. 标记操作&#xff1a;对某个结点打上标记&#xff08;在最开始&#x…

input表单

input 输入值 内容居中&#xff1a;text-align:center;input输入框光标高度问题IE&#xff1a;不管该行有没有文字&#xff0c;光标高度与font-size大小一致FF&#xff1a;该行没有文字时&#xff0c;光标大小与input的 height 大小一致&#xff1b;该行有文字时&#xff0c;光…

C++ 常用设计模式

转自 https://www.cnblogs.com/chengjundu/p/8473564.html 1、工厂模式 在工厂模式中&#xff0c;我们在创建对象时不会对客户端暴露创建逻辑&#xff0c;并且是通过使用一个共同的接口来指向新创建的对象。工厂模式作为一种创建模式&#xff0c;一般在创建复杂对象时&#x…

json转换为go类文件,js脚本,nodejs执行

js写的代码生成脚本&#xff0c;json生成对应的go type对象 作json转换用 js脚本无甚何依赖&#xff0c;可以直接运行 执行前&#xff0c;按需更改文件 示例 var topname"Data"; var defaulttype"string"; var bsontrue; //对应 mongodb var jsontrue; //…

Android Studio3.0之让人懵逼的错误:Error:java.util.concurrent.ExecutionException: com.android.tools.aapt2...

最近将Android Studio从2.3.3升级到3.0.1后&#xff0c;出现了一个莫名其妙的错误&#xff0c;又让人一顿懵。。。 错误信息如下&#xff1a;解决方式一&#xff1a;只需在工程的gradle.properties文件中添加以下命令&#xff1a;[java] view plaincopyandroid.enableAapt2fals…