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－

ello, world！

本教程的這一部分內容是關于 JavaScript 語言本身的。

但是，我們需要一個工作環境來運行我們的腳本，由于本教程是在線的，所以瀏覽器是一個不錯的選擇。我們會盡可能少地使用瀏覽器特定的命令（比如 alert），所以如果你打算專注于另一個環境（比如 Node.js），你就不必多花時間來關心這些特定指令了。我們將在本教程的下一部分中專注于瀏覽器中的 JavaScript。

首先，讓我們看看如何將腳本添加到網頁上。對于服務器端環境（如 Node.js），你只需要使用諸如 "node my.js" 的命令行來執行它。

“script” 標簽

JavaScript 程序可以在 <script> 標簽的幫助下插入到 HTML 文檔的任何地方。

比如：

<!DOCTYPE HTML>
<html>
<body>
 <p>script 標簽之前...</p>
 <script>
 alert('Hello, world!');
 </script>
 <p>...script 標簽之后</p>
</body>
</html>

現代的標記

type 屬性：<script type=...>

在老的 HTML4 標準中，要求 <script> 標簽有 type 屬性。通常是 type="text/javascript"。這樣的屬性聲明現在已經不再需要。而且，現代 HTML 標準 —— HTML5 已經完全改變了此屬性的實際含義?，F在，該屬性可以被用于 JavaScript 模塊。但那是一個高級一點的話題，我們將會在此教程的其他章節中探討 JavaScript 模塊。

language 屬性：<script language=...>

這個屬性是為了顯示腳本使用的語言。這個屬性現在已經沒有任何意義，因為語言默認就是 JavaScript。不再需要使用它了。

腳本前后的注釋：

在非常古老的書籍和指南中，你可能會在 <script> 標簽里面找到注釋，就像這樣：

<script type="text/javascript"><!--
 ...
//--></script>

現代 JavaScript 中已經不這樣使用了。這些注釋是用于不支持 <script> 標簽的古老的瀏覽器隱藏 JavaScript 代碼的。由于最近 15 年內發布的瀏覽器都沒有這樣的問題，因此這種注釋能幫你辨認出一些老掉牙的代碼。

外部腳本

如果你有大量的 JavaScript 代碼，我們可以將它放入一個單獨的文件。

腳本文件可以通過 src 屬性添加到 HTML 文件中。

<script src="/path/to/script.js"></script>

這里，/path/to/script.js 是腳本文件從站點根目錄開始的絕對路徑。當然也可以提供當前頁面的相對路徑。例如，src =“script.js” 表示當前文件夾中的 “script.js” 文件。

我們也可以提供一個完整的 URL 地址，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

要附加多個腳本，請使用多個標簽：

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

請注意：

一般來說，只有最簡單的腳本才嵌入到 HTML 中。更復雜的腳本存放在單獨的文件中。
使用獨立文件的好處是瀏覽器會下載它，然后將它保存到瀏覽器的緩存^[1]中。
之后，其他頁面想要相同的腳本就會從緩存中獲取，而不是下載它。所以文件實際上只會下載一次。
這可以節省流量，并使得頁面（加載）更快。

提醒：如果設置了 src 屬性，script 標簽內容將會被忽略。

一個單獨的 <script> 標簽不能同時有 src 屬性和內部包裹的代碼。

這將不會工作：

<script src="file.js">
 alert(1); // 此內容會被忽略，因為設定了 src
</script>

我們必須進行選擇，要么使用外部的 <script src="…">，要么使用正常包裹代碼的 <script>。

為了讓上面的例子工作，我們可以將它分成兩個 <script> 標簽。

<script src="file.js"></script>
<script>
 alert(1);
</script>

總結

我們可以使用一個 <script> 標簽將 JavaScript 代碼添加到頁面中。
type 和 language 屬性不是必需的。
外部的腳本可以通過 <script src="path/to/script.js"></script> 的方式插入。

有關瀏覽器腳本以及它們和網頁的關系，還有很多可學的。但是請記住，教程的這部分主要是針對 JavaScript 語言本身的，所以我們不該被瀏覽器特定的實現分散自己的注意力。我們將使用瀏覽器作為運行 JavaScript 的一種方式，這種方式非常便于我們在線閱讀，但這只是很多種方式中的一種。

作業題

1. 顯示一個提示語

重要程度：??????????

創建一個頁面，然后顯示一個消息 “I'm JavaScript!”。

在沙箱中或者在你的硬盤上做這件事都無所謂，只要確保它能運行起來。

你可以先看一下 新窗口的演示結果^[2]。

在微信公眾號「技術漫談」后臺回復 1-2-1 獲取本題答案。

2. 使用外部的腳本顯示一個提示語

重要程度：??????????

打開題目 1 的答案。將答案中腳本的內容提取到一個外部的 alert.js 文件中，放置在相同的文件夾中。

打開頁面，確保它能夠工作。

你可以先看一下 新窗口的演示結果^[3]。

在微信公眾號「技術漫談」后臺回復 1-2-1 獲取本題答案。

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程^[4]。
在線免費閱讀：https://zh.javascript.info/

參考資料

[1] 緩存: https://en.wikipedia.org/wiki/Web_cache

[2] 新窗口的演示結果: https://zh.js.cx/task/hello-alert/solution/

[3] 新窗口的演示結果: https://zh.js.cx/task/hello-alert/solution/

[4] React 官方文檔推薦，與 MDN 并列的 JavaScript 學習教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources

關注微信公眾號「技術漫談」，訂閱更多精彩內容。

在線咨詢

上一篇：前端圖片優化
下一篇：wps生成的webm視頻怎么轉換成mp4？3個步驟輕松轉換~

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript代碼怎樣引入到HTML中？