JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內部方式
內部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎 - 引入方式</title>
 </head>
 <body>
   <!-- 內聯(lián)形式：通過 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 文件，那么標簽的代碼會被忽略！！！如下代碼所示：

了執(zhí)行Javascript，需要在HTML文件內以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執(zhí)行的流程也各不相同：

1 <script>標簽嵌入

此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構造，因此在<script>標簽內就無法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行，async可以異步執(zhí)行。

3 onload嵌入

此種嵌入方法在頁面讀取完后再對其執(zhí)行，所以可以對所有的DOM元素操作。

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

當window.onload事件觸發(fā)時，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。

//window.onload不能同時編寫多個。
//以下代碼無法正確執(zhí)行，結果只輸出第二個。
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也有些許區(qū)別：

<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 誰在下面就是誰覆蓋誰，只會執(zhí)行后面的那個。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時間，而本方法可以在完成HTML解析后發(fā)生的事件，減少等待時間。

在chrome、IE10和FireFox中，執(zhí)行結果是：DOMContentLoaded然后才是onload的輸出。所以說一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當DOM樹構建完成的時候就會執(zhí)行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使用者，你可能會經(jīng)常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動態(tài)載入JavaScript文件

5.1 使用原生js方法

動態(tài)創(chuàng)建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');
});

還可以使用同樣的原理動態(tài)加載css文件，只不過插入的的父節(jié)點是head標簽。

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

該種方式可以實現(xiàn)js文件的動態(tài)加載，原理就是在重寫文檔流，這種方式會導致整個頁面重繪。

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

需要注意的是特殊字符的轉義。

5.3 使用jQuery

使用getScript(url,callback)方法實現(xiàn)動態(tài)加載js文件

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

－End－

能在 JavaScript 中創(chuàng)建一個 HTML 元素嗎？答案是肯定的，你可以在 JavaScript 中創(chuàng)建一個元素讓我們看看如何？

如果你想在 JavaScript 中創(chuàng)建一個 div 元素——

要在 JavaScript 中創(chuàng)建新元素，我們使用 document.createElement('div')，而不是 div，您可以分配任何 html 標簽，例如 p、h1、h2、h3 等，如果您分配 p 標簽，它將創(chuàng)建一個 p 標簽。

現(xiàn)在，如果你想給它上一堂課，你可以做到——

為了給我們的新 div 一個類，我們使用 variablename.className = ‘class_name’ ，如上所示。

現(xiàn)在你也可以給它 id —

為了給 newdiv 一個 id，我們的代碼是 variablename.id = ‘id_name’;

現(xiàn)在讓我們看看我們的輸出

現(xiàn)在，從上面的代碼中，我創(chuàng)建了一個帶有類容器和 id newElement 的 div 元素。

還有另一種方法可以在標簽上設置 class 、 id 、 title 、 name ，讓我們來看看。

在這里，我定義了 setAttribute() 并在括號內首先定義了標題，然后定義了標題的名稱。除了標題，您可以指定類、id 或任何名稱

現(xiàn)在我們來看看我們的輸出

您可以清楚地看到，在 div 標簽內，我們的代碼添加了標題，即“新 div”。

現(xiàn)在如果你想在 div 標簽內添加內容怎么辦？例如，在我的 div 元素中，我想添加 Hello medium reader！我怎樣才能做到這一點？下面來看看吧。

在上面的代碼中，我使用 document.createTextNode() 將我的文本分配給變量內容，因此 TextNode 用于為我們的元素提供文本。

所以，我們已經(jīng)成功地向我們的 div 元素添加了一個文本。

現(xiàn)在，最重要的是，如果您想將內容插入現(xiàn)有的 html 代碼以便在瀏覽器中看到它，您可以通過 insertBefore(newNode, referenceNode) 來完成它的作用是在參考節(jié)點之前插入您的節(jié)點。

所以在這里我從上面的 html 代碼中創(chuàng)建了一個帶有類容器和 h1 標簽的 div 元素。

現(xiàn)在，我定義了一個名為 maindiv 的變量，并將其分配給具有類容器的 div 元素，并定義了一個變量 h1 并為其分配了 h1 標記。

現(xiàn)在，為了插入我們的節(jié)點，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必須插入的節(jié)點，即我們的 newdiv ，參考節(jié)點是要在其之前插入 newNode 的節(jié)點，即我們的 h1 標記。

所以從上面的輸出你可以看到我們已經(jīng)成功地在瀏覽器中顯示了我們的 div 內容。

JavaScript 是一種非常有效的語言，你可以在 JavaScritp 中做很多事情，這些只是它的基礎。

謝謝你

在線咨詢

上一篇：web前端HTML教程-開發(fā)環(huán)境搭建下載和安裝編輯器
下一篇：HTML標簽大全（常用）

您的項目需求

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