通常情况下，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代码不同位置的差别的更多相关文章

  1. JavaScript问题01 js代码放在header和body的区别

    1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...

  2. echarts制作html和JavaScript的时钟和代码分析与注释

    1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...

  3. 如何实现 javascript “同步”调用 app 代码

    在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...

  4. 可以放在html代码中的自动跳转代码

    可以放在html代码中的自动跳转代码 有3种方法可以实现html的页面跳转,1,refresh   2,onload事件中加入代码  3,js实现 1.<html><body> ...

  5. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  6. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  7. JavaScript文件应该放在网页的什么位置

    JavaScript文件应该放在网页的什么位置 http://www.lihuai.net/qianduan/js/352.html 在<良好的JavaScript编程习惯>系列教程的第三 ...

  8. js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...

  9. 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码

    最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...

随机推荐

  1. 五个知识体系之-SQL学习-第一天

    1. 创建数据库 CREATE DATABASE test1; 2. 删除数据库 DROP DATABASE test1; 3. 创建表 CREATE TABLE tabname (userid BI ...

  2. HTML5+ 权限设置

    API分模块封装调用了系统各种原生能力,而部分能力需要使用到Android的permissions,以下列出了各模块(或具体API)使用的的权限: -------------------------- ...

  3. 【题解】P4886快递员

    [题解]P4886 快递员 淀粉质好题!!!加深了我对点分治的理解.最近分治学了好多啊. 题目大意 给定你一颗有边权的树,再给你\(m\)和点对,请你在树上选出来一个点,使得所有点对到这个点的距离的最 ...

  4. 我的Android进阶之旅------>android视频播放只有声音无画面的解决办法

    今天调试公司用VideoView实现的播放器来播放视频的时候,只有声音输出而无画面输出.一开始以为是自己程序有问题,调试了半天无果.怀疑是真机本身的问题,于是下了几个第三方的播放器来进行视频播放,例如 ...

  5. Java for LeetCode 106 Construct Binary Tree from Inorder and Postorder Traversal

    Construct Binary Tree from Inorder and Postorder Traversal Total Accepted: 31041 Total Submissions: ...

  6. python3使用pdfminer3k解析pdf文件

    安装pdfminer模块 pip3 install pdfminer3k 代码如下 #!/usr/bin/env python # coding:utf8 # author:Z time:2018/7 ...

  7. 多线程(一) NSThread

    OS中多线程的实现方案: 技术 语言 线程生命周期 使用频率 pthread C 程序员自行管理 几乎不用 NSthread OC 程序员自行管理 偶尔使用 GCD C 自动管理 经常使用 NSOpe ...

  8. Java基础知识整理之static修饰属性

    static 关键字,我们在开发用的还是比较多的.在<Java编程思想>有下面一段话 static 方法就是没有 this 的方法.在 static 方法内部不能调用非静态方法,反过来是可 ...

  9. hibernate 一对多 级联 保存修改 删除

    一对多,一端设置: <set name="TWorkorderHistories" inverse="true" cascade="all&qu ...

  10. 算法（Algorithms）第4版 练习 1.3.21

    方法实现: //1.3.21 /** * find if some node in the list has key as its item field * * @param list the lin ...