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 之 ...
随机推荐
- python编程基础：《http://www.cnblogs.com/wiki-royzhang/category/466416.html》
windows自动化 http://www.cnblogs.com/wiki-royzhang/category/466416.html
- 【BZOJ4264】小C找朋友 随机化
[BZOJ4264]小C找朋友 Description 幼儿园里有N个小C,两个小C之间可能是朋友也可能不是.所有小C之间的朋友关系构成了一个无向图,这个无向图中有M条边. 园长ATM发现对于两个(不 ...
- 关于System.Data.ParameterDirection四个枚举类型所起的作用(转)
相信大家都知道.net中有四个关于参数传入传出的类型 分别是: System.Data.ParameterDirection.Input System.Data.ParameterDirection. ...
- 九度OJ 1179：阶乘 （循环）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5149 解决:1523 题目描述: 输入n, 求y1=1!+3!+...m!(m是小于等于n的最大奇数) y2=2!+4!+...p!(p是 ...
- cmake默认变量
1 CMAKE_GENERATOR 用来生成工程构建文件的工具的名字,比如visual studio 12,2013,比如xcode,不同的平台使用不同的生成工具. 2 MATCHES if (var ...
- The connection between feature spaces and smoothness is not obvious, and is one of the things we’ll discuss in the course.
http://www.gatsby.ucl.ac.uk/~gretton/coursefiles/lecture4_introToRKHS.pdf
- MySQL——sql语句的执行顺序
#核心知识点: 书写顺序:where——>group by——>having——>order by——>limit 许多时候在书写一些复杂的sql语句的时候,尤其是在渐进式推导 ...
- CMake最好的学习资料
本文为转载,阅读不友好,请先查看原文:https://blog.gmem.cc/cmake-study-note 收下为原文内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝> 基础知识 CMake简介 CM ...
- spawning cl.exe
可能很多人在安装VC 6.0后有过点击“Compile”或者“Build”后被出现的“Compiling... ,Error spawning cl.exe”错误提示给郁闷过.很多人的选择是重装,实际 ...
- 作业：xml练习1
作业:使用xml描述下表中的学生成绩信息,XML文件存为scores.xml. 1.打开eclipse软件. 2.file-new-java project,输入project name:201811 ...