JavaScript嵌入HTML中的3種方式

avaScript代碼與HTML+CSS一起實現動態網頁的效果，那如何將JavaScript代碼嵌入到HTML代碼中呢，下面我們用HBuilder編輯器來講解3種引入方式：

1. 使用<script>..…</script>標簽對

將js代碼直接寫在script標簽對里。Script標簽既可以寫在head標簽里面也可以寫在body標簽里面。

注意：

如果JavaScript代碼放置于<head>標簽中：主要用于完成所需的后臺任務

如果JavaScript代碼置于<body>標簽中，用于顯示內容。

2. 引入外部的JavaScript文件

這種方式一般在企業工作中會用的多，因為保證了js代碼和html代碼的分別獨立，相互干擾性?。ǖ婉詈希?。

mylife.js文件如下：直接寫入js代碼，js文件中一定不能再出現<script>..…</script>b標簽對！

3. 偽URL引入

這種方式一般以“JavaScript: XXXXX”的格式出現，后面直接跟js代碼。

如果你想了解更多“JavaScript”方面的知識，請持續關注我：吉爾JIL程序員，歡迎想學習的朋友咨詢我！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

我們總是先揚起塵土

然后抱怨自己看不見

- 2024.04.17 -

JavaScript是一種輕量級的編程語言，通常用于網頁開發，以增強用戶界面的交互性和動態性。然而在HTML中，有多種方法可以嵌入和使用JavaScript代碼。

本文就帶大家深入了解如何在HTML中使用JavaScript。

一、使用 script 標簽

要在HTML中使用JavaScript，我們需要使用<script>標簽。這個標簽可以放在<head>或<body>部分，但通常我們會將其放在<body>部分的底部，以確保在執行JavaScript代碼時，HTML文檔已經完全加載。

使用 <script> 標簽有兩種方式：直接在頁面中嵌入 JavaScript 代碼和包含外部 JavaScript 文件。

包含在 <script> 標簽內的 JavaScript 代碼在瀏覽器總按照從上至下的順序依次解釋。

所有 <script> 標簽都會按照他們在 HTML 中出現的先后順序依次被解析。

HTML 為 <script> 定義了幾個屬性：

1）async：可選。表示應該立即下載腳本，但不妨礙頁面中其他操作。該功能只對外部 JavaScript 文件有效。

如果給一個外部引入的js文件設置了這個屬性，那頁面在解析代碼的時候遇到這個<script>的時候，一邊下載該腳本文件，一邊異步加載頁面其他內容。

2）defer：可選。表示腳本可以延遲到整個頁面完全被解析和顯示之后再執行。該屬性只對外部 JavaScript 文件有效。

3）src：可選。表示包含要執行代碼的外部文件。

4）type：可選。表示編寫代碼使用的腳本語言的內容類型，目前在客戶端，type 屬性值一般使用 text/javascript。不過這個屬性并不是必需的，如果沒有指定這個屬性，則其默認值仍為text/javascript。

1.1 直接在頁面中嵌入JavaScript代碼

內部JavaScript是將JavaScript代碼放在HTML文檔的<script>標簽中。這樣可以將JavaScript代碼與HTML代碼分離，使結構更清晰，易于維護。

在使用<script>元素嵌入JavaScript代碼時，只須為<script>指定type屬性。然后，像下面這樣把JavaScript代碼直接放在元素內部即可：

<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>

如果沒有指定script屬性，則其默認值為text/javascript。

包含在<script>元素內部的JavaScript代碼將被從上至下依次解釋。在解釋器對<script>元素內部的所有代碼求值完畢以前，頁面中的其余內容都不會被瀏覽器加載或顯示。

在使用<script>嵌入JavaScript代碼的過程中，當代碼中出現"</script>"字符串時，由于解析嵌入式代碼的規則，瀏覽器會認為這是結束的</script>標簽?？梢酝ㄟ^轉義字符“\”寫成<\/script>來解決這個問題。

1.2 包含外部 JavaScript 文件

外部JavaScript是將JavaScript代碼放在單獨的.js文件中，然后在HTML文檔中通過<script>標簽的src屬性引用這個文件。這種方法可以使代碼更加模塊化，便于重用和共享。

如果要通過<script>元素來包含外部JavaScript文件，那么src屬性就是必需的。這個屬性的值是一個指向外部JavaScript文件的鏈接。

<script type="text/javascript" src="example.js"></script>

外部文件example.js將被加載到當前頁面中。
外部文件只須包含通常要放在開始的<script>和結束的</script>之間的那些JavaScript代碼即可。

與解析嵌入式JavaScript代碼一樣，在解析外部JavaScript文件（包括下載該文件）時，頁面的處理也會暫時停止。

注意：帶有src屬性的<script>元素不應該在其<script>和</script>標簽之間再包含額外的JavaScript代碼。如果包含了嵌入的代碼，則只會下載并執行外部腳本文件，嵌入的代碼會被忽略。

通過<script>元素的src屬性還可以包含來自外部域的JavaScript文件。它的src屬性可以是指向當前HTML頁面所在域之外的某個域中的完整URL。

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

于是，位于外部域中的代碼也會被加載和解析。

1.3 標簽的位置

在HTML中，所有的<script>標簽會按照它們出現的先后順序被解析。在不使用defer和async屬性的情況下，只有當前面的<script>標簽中的代碼解析完成后，才會開始解析后面的<script>標簽中的代碼。

通常，所有的<script>標簽應該放在頁面的<head>標簽中，這樣可以將外部文件（包括CSS和JavaScript文件）的引用集中放置。

然而，如果將所有的JavaScript文件都放在<head>標簽中，會導致瀏覽器在呈現頁面內容之前必須下載、解析并執行所有JavaScript代碼，這可能會造成明顯的延遲，導致瀏覽器窗口在加載過程中出現空白。

為了避免這種延遲問題，現代Web應用程序通常會將所有的JavaScript引用放置在<body>標簽中的頁面內容的后面。這樣做可以確保在解析JavaScript代碼之前，頁面的內容已經完全呈現在瀏覽器中，從而加快了打開網頁的速度。

二、執行JavaScript 程序

JavaScript 解析過程包括兩個階段：預處理（也稱預編譯）和執行。

在編譯期，JavaScript 解析器將完成對 JavaScript 代碼的預處理操作，把 JavaScript 代碼轉換成字節碼；
在執行期，JavaScript 解析器把字節碼生成二進制機械碼，并按順序執行，完成程序設計的任務。

1、執行過程

HTML 文檔在瀏覽器中的解析過程是：按照文檔流從上到下逐步解析頁面結構和信息。

JavaScript 代碼作為嵌入的腳本應該也算做 HTML 文檔的組成部分，所以 JavaScript 代碼在裝載時的執行順序也是根據 <script> 標簽出現的順序來確定。

你是不是厭倦了一成不變的編程模式？想要突破自我，挑戰新技術想要突破自我，挑戰新技術？卻遲遲找不到可以練手的項目實戰？是不是夢想打造一個屬于自己的支付系統？那么，恭喜你，云端源想免費實戰直播——《微實戰-使用支付寶/微信支付服務，網站在線支付功能大揭秘》正在進行，點擊前往獲取源碼！云端源想

2、預編譯

當 JavaScript 引擎解析腳本時候，他會在與編譯期對所有聲明的變量和函數預先進行處理。當 JavaScript 解析器執行下面腳本時不會報錯。

alert(a); //返回值 undefined
var a = 1;
alert(a); //返回值 1

由于變量聲明是在預編譯期被處理的，在執行期間對于所有的代碼來說，都是可見的，但是執行上面代碼，提示的值是 undefined 而不是 1。

因為變量初始化過程發生在執行期，而不是預編譯期。在執行期，JavaScript 解析器是按照代碼先后順序進行解析的，如果在前面代碼行中沒有為變量賦值，則 JavaScript 解析器會使用默認值 undefined 。

由于第二行中為變量 a 賦值了，所以在第三行代碼中會提示變量 a 的值為 1，而不是 undefined。

fun(); //調用函數，返回值1
function fun(){
alert(1);
}

函數聲明前調用函數也是合法的，并能夠正確解析，所以返回值是 1。但如果是下面這種方式則 JavaScript 解釋器會報錯。

fun(); //調用函數，返回語法錯誤
var fun = function(){
alert(1);
}

上面的這個例子中定義的函數僅作為值賦值給變量 fun 。在預編譯期，JavaScript 解釋器只能夠為聲明變量 fun 進行處理，而對于變量 fun 的值，只能等到執行期時按照順序進行賦值，自然就會出現語法錯誤，提示找不到對象 fun。

總結：聲明變量和函數可以在文檔的任意位置，但是良好的習慣應該是在所有 JavaScript 代碼之前聲明全局變量和函數，并對變量進行初始化賦值。在函數內部也是先聲明變量，后引用。

通過今天的分享，相信大家已經對JavaScript在HTML中的應用有了一定的了解。這只是冰山一角，JavaScript的潛力遠不止于此。希望這篇文章能激發大家對編程的熱情，讓我們一起在編程的世界里探索更多的可能性！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

覽器加載一個js腳本，會在devtools中留下各種痕跡，elements中的script元素，console中的日志，source中的代碼，network中的網絡請求等

elements

這個比較簡單，插入js的時候設置好id，在js中刪掉自身就好了

<script id="xxx">
    // todo
    document.getElementById("xxx").remove();
</script>

對于引用js

<script id="xxx" src="a.js"></script>

// a.js
document.getElementById("xxx").remove()

對于動態加載的js也是一樣的

<script>
    let e=document.createElement("script");
    e.id="xxx";
    e.src="a.js";
    document.head.appendChild(e);
</script>

// a.js
document.getElementById("xxx").remove()

或者也可以這樣

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
    e.remove();
</script>

雖然看起來很奇怪，但a.js確實能執行，似乎是加載a.js時阻塞了腳本執行，執行完a.js之后再remove

console

clear就好了

console.clear()

source

直接引用和動態加載都會在source中出現

<script src="a.js"></script>

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
</script>

這樣都是不行的，經過測試發現動態插入js代碼時不會被記錄在source中

<script>
    fetch("a.js").then(resp => {
        return resp.text()
    }).then(text => {
        let e = document.createElement("script");
        e.innerHTML = text;
        document.head.appendChild(e);
    })
</script>

這樣a.js就不會出現在source里了

network

常規HTTP/WebSocket都會被記錄，無法繞過，但是WebRTC不會，WebRTC可以基于UDP/TCP傳輸，WebRTC提供createDataChannel API，可以用于傳輸文本，那么就可以實現network隱藏加載

考慮WebRTC需要傳遞offer和icecandidate，還是得通過HTTP/WebSocket傳輸，而且復雜網絡環境下還需要使用或部署STUN/TURN服務器，穩定性有待考慮

WebRTC技術可以參考學習我最近看的幾篇文章透明日報20200801期

其他的方法我還沒有找到，技術不行就社會工程

一個思路是可以偽裝成其他流量混過去，比如png

<script>
    fetch("a.png").then(resp => {
        return resp.text()
    }).then(text => {
        let e = document.createElement("script");
        e.innerHTML = text;
        document.head.appendChild(e);
    })
</script>

然后在delvtools里也看不出來

另外一個思路是devtools目前只在打開的時候記錄network數據，那么只要在devtools關閉的時候加載資源，打開就不加載，這樣就不會出現在network里了

新的問題又出現了，如何檢測devtools的狀態，網上已經有不少公開技巧了

https://github.com/sindresorhus/devtools-detect

https://github.com/AEPKILL/devtools-detector

最后

還可以在哪里找到加載和執行痕跡呢

還有什么方法可以隱藏這些痕跡呢

如果你現在也想學習前端開發技術，在學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我的Q群:前114中6649后671還有大牛整理的一套高效率學習路線和教程與您免費分享，還有許多大廠面試真題。希望能夠對你們有所幫助。

在線咨詢

上一篇：前端入門-html 表單控件使用
下一篇：前端要完！人工智能已經能實現自動編寫 HTML 和 CSS

您的項目需求

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

整合營銷服務商