通常情况下，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. ThreadLocal的简单使用

    package com.thread; public class ThreadLocalTest { public static void main(String[] args) { final Pe ...

  2. viewport详解

    本文主要讲解viewpor相关知识. 参考资料&内容来源 博客园:https://www.cnblogs.com/zaoa/p/8630393.html 博客园:http://www.cnbl ...

  3. 爬虫-【selenium——webElement常用方法】

    a)clear——清除元素的内容 driver.find_element_by_id("**").clesr() b)send_keys——在元素上模拟按键输入 driver.fi ...

  4. Oracle数据库基础--存储过程和函数

    一.存储过程和函数 存储过程: 对一个模块的封装 函数: 功能与存储过程几乎一样 区别: 函数必须通过return 关键字返回一个值 存储过程: 不需要return返回值 参数: 输入型参数 输出型参 ...

  5. vue 升降排序

    本实例是根据工作进度的百分比来进行排序. html <div class="ibox-content"> <li v-for="(rangeItem,i ...

  6. 搭建LoadRunner中的场景（三）场景的执行计划

    所谓场景操作,包括初始化用户组.启动用户组各用户以及停止虚拟用户的全过程.依据设置不同,执行过程中可以最多有5类操作,分别是启动用户组(start group).初始化(Initialize).启动虚 ...

  7. LeetCode-5:Longest Palindromic Substring(最长回文子字符串)

    描述:给一个字符串s,查找它的最长的回文子串.s的长度不超过1000. Input: "babad" Output: "bab" Note: "aba ...

  8. linux 多线程编程-读写者问题

    #include <cstdio> #include <pthread.h> #include <unistd.h> ]; int i,j; pthread_rwl ...

  9. Android的appium实例

    1.查看Android的应用包名和activity的方法   (网上有很多种方法,这里应用的是查看日志的方法) CMD中输入>adb logcat -c                   &g ...

  10. Seal Report结合MySQL数据库 报表展现_20161011

    昨天留了草稿 未来得及发 今日补发一篇 seal report 操作类似excel数据透视表也包含行标签和列标签及值标签,行列代表的是数据指标的维度,值标签代表的是度量. seal report连接M ...