JavaScript代码放在HTML代码不同位置的差别
通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。
1、放置于<head></head>之间
将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的，将 JavaScript 代码放置于<head></head> 标签之间，可以确保在需要使用脚本之前，它已经被载入了：
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
……
*
* Javascript 代码
*
* ……
* */
</script>
</head>
<body>
</body>
</html>
2、放置于<body></body>之间
也有部分情况将 JavaScript 代码放置于 <body></body> 之间的。设想如下一种情况：我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML 文档是由浏览器从上到下依次载入的，为避免 JavaScript 代码操作 HTML 元素时，HTML 元素还未载入而报错（对象不存在），因此需要将这段代码写到 HTML 元素后面，例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<div id="div1"></div>
<script type="text/javascript">
document.getElementById（"div1"）。innerHTML="测试文字";
</script>
</html>
但通常情况下，我们操作页面元素一般都是通过事件来驱动的，所以上面这种情况并不多见。另外我们不建议将 JavaScript 代码写到 <html></html> 之外。
提示
如果 HTML 文档声明为 XHTML ,<script></script> 标签必须在 CDATA 部分内声明，否则 XHTML 将把 <script></script> 标签解析为另一个 XML 标签，里面的 JavaScript 代码可能不会正常执行。因此，在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明：
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
< ![CDATA[
JavaScript 代码
]] >
</script>
</head>
以上两种将 JavaScript 代码写到 HTML 文档中的方式，都是 HTML 文档内部引用 JavaScript 代码的方式。除了内部引用，还可以使用外部引用方式。
3、外部引用 JavaScript 代码
将 JavaScript 代码（不包括标签）单独形成一个文档，并以 js 后缀命名，如 myscript.js ,并在 HTML 文档 标签中使用 src 属性来引用该文件：
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="myscript.js"></script>
</head>
在使用了外部引用 JavaScript 代码之后，其好处显而易见：
1.避免在 JavaScript 代码里使用
2.避免使用难看的 CDATA
3.公共的 JavaScript 代码可以被复用于其他 HTML 文档，也利于 JavaScript 代码的统一维护
4.HTML 文档更小，利于搜索引擎收录
5.可以压缩、加密单个 JavaScript 文件
6.浏览器可以缓存 JavaScript 文件，减少宽带使用（当多个页面同时使用一个 JavaScript 文件的时候，通常只需下载一次）
7.避免使用复杂的 HTML 实体，如可以直接使用 document.write（2>1） 而无需写作 document.write（2<1） 将 JavaScript 代码形成为外部文件，也会增加服务器的 HTTP 请求负担，在超高并发请求的环境下，这并不是一个好的策略。另外 在引用外部 js 文件时，需注意文件的正确路径。
JavaScript代码放在HTML代码不同位置的差别的更多相关文章
- JavaScript问题01 js代码放在header和body的区别
1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...
- echarts制作html和JavaScript的时钟和代码分析与注释
1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...
- 如何实现 javascript “同步”调用 app 代码
在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...
- 可以放在html代码中的自动跳转代码
可以放在html代码中的自动跳转代码 有3种方法可以实现html的页面跳转,1,refresh 2,onload事件中加入代码 3,js实现 1.<html><body> ...
- javascript 转盘抽奖代码和计数器代码
要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下 看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究... 效果预览: 一.模拟抽奖的实 ...
- 在线运行Javascript,Jquery,HTML,CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...
- JavaScript文件应该放在网页的什么位置
JavaScript文件应该放在网页的什么位置 http://www.lihuai.net/qianduan/js/352.html 在<良好的JavaScript编程习惯>系列教程的第三 ...
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...
- 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码
最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...
随机推荐
- Coursera公开课Functional Programming Principles in Scala习题解答：Week 2
引言 OK.时间非常快又过去了一周.第一周有五一假期所以感觉时间绰绰有余,这周中间没有假期仅仅能靠晚上加周末的时间来消化,事实上还是有点紧张呢! 后来发现每堂课的视频还有相应的课件(Slide).字幕 ...
- cordova 实现拨打电话-只需两步（H5）
cordova 实现拨打电话: 第一步配置conf.xml在cordova中所有的URL Schemes 都是服从于白名单的,所以a tel 在这无法正常使用.解决方法是在项目config.xml中添 ...
- docker 网络模式研究了许久，其实我们需要的是docker run -p 80:80命令
我们只是希望能够从外部访问到docker而已,并不需要去折腾该死的网络模式,桥接,host等等. -p: 端口映射,格式为:主机(宿主)端口:容器端口 sudo docker run -t -i - ...
- 剑指Offer：数组中出现次数超过一半的数字【39】
剑指Offer:数组中出现次数超过一半的数字[39] 题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如,输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于这 ...
- A Pangram
Codeforces Round #295 div2 的A题,题意是判读一个字符串是不是全字母句,也就是这个字符串是否包含了26个字母,无论大小写. Sample test(s) input 12 t ...
- 【转载】帧缓冲驱动程序分析及其在BSP上的添加
原文地址:(四)帧缓冲驱动程序分析及其在BSP上的添加 作者:gfvvz 一.BSP修改及其分析 1. BSP中直接配置的四个寄存器 S3C6410数据手册的第14.5部分是显示控制器的编程模型部 ...
- struts2 codebehind + actionPackages 实现Action零配置
1.jar包:struts2-codebehind-plugin-2.2.1.1.jar 2.struts.xml:<!-- codebehind中查找action的返回结果资源时的默认文件夹 ...
- 通道(Channel)的原理获取
通道表示打开到 IO 设备(例如:文件.套接字)的连接.若需要使用 NIO 系统,需要获取用于连接 IO 设备的通道以及用于容纳数据的缓冲区.然后操作缓冲区,对数据进行处理.Channel 负责传输, ...
- python无法安装cv2的解决办法
问题:在windows命令窗口输入pip install cv2后出现:Could not find a version that satisfies the requirement cv2... 解 ...
- tflearn 在每一个epoch完毕保存模型
关键代码:tflearn.DNN(net, checkpoint_path='model_resnet_cifar10', max_checkpoints=10, tensorboard_verbos ...