JavaScript代码怎样引入到HTML中？

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：

1 <script>标签嵌入

此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。

2 读取外部JavaScript文件

此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。

3 onload嵌入

此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。

//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些许区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，结果为：

"DOMContentLoaded"
"bodyonload"

说明body中的onload会覆盖window.onload

在chrome下，结果为：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代码移到最下面，结果又会是什么样呢？

chrome和IE10、FireFox的结果竟然是一样的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。

4 DOM ContentLoaded嵌入

onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。

在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件

5 动态载入JavaScript文件

5.1 使用原生js方法

动态创建script标签，并指定script的src属性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。

5.2 使用document.write/writeln(）方式

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

5.3 使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

1）javascript的使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

使用<script>的方式有两种，一种是直接在页面中嵌入Javascript代码，类是上边图片所示，另一种是包含外部JavaScript文件。包含在<script>内的javascript代码将被自上而下的依次解释。也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件的路径。原理同css的引用类似。

（2）javascript标签的位置

按照传统做法，所有的<script>元素都应放在<head>标签里面，这样做的目的是把所有的外部文件（css文件和javascript文件）都放在相同的地方，便于管理。可是放在<head>中就意味着必须等所有的javascript代码下载、解析、执行完之后，页面要呈现的内容才会被加载（浏览器在遇到<body>元素的时候才会加载呈现页面内容）。对于那些要执行很多javascript代码的页面来说，这无疑会导致浏览器在呈现页面时会出现很明显的延时，而延时期间页面一片空白，（等待javascript加载，未执行到<body>元素），这对于用户体验来说是无法容忍的，为避免这个问题，现代web程序一般都把javascript用于放到<body>元素中页面内容的最后面，即结束标签</body>之前。如上个程序代码所示。

（3）延迟脚本defer和异步脚本async

延迟脚本defer：这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。具体使用如下图所示：

异步脚本async：这个属性与 defer 属性类似，async 只适用于外部脚本文件，并告诉浏览器立即下载文件。但与 defer不同的是，标记为 async 的脚本不必等待其他脚本，也不必阻塞文档呈现，并且不保证按照指定它们的先后顺序执行。具体使用如下图所示：

（4）<noscript>元素

如果浏览器不支持 JavaScript ，或者被用户手动屏蔽时，对这种问题的最终解决方案就是创造一个<noscript>元素，用以在不支持 JavaScript 的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来。具体的使用如下所示：

这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它——尽管它是页面的一部分。

每日金句：我没有停止爱你，我只是决定不再表现出来。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

在线咨询

上一篇：16个超牛逼的HTML5和JavaScript特效
下一篇：淘宝电商：超级推荐这么玩，快人一步占流量

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商