JS引入方式和基本屬性是什么?

在Web開發中,JavaScript是一種常用的腳本語言,可以實現動態交互效果和復雜的前端邏輯。為了讓JavaScript代碼能夠被瀏覽器正確執行,我們需要將其引入到HTML頁面中。本文將詳細介紹JavaScript的引入方式和一些基本屬性。

一、JavaScript的引入方式

JavaScript的引入方式有兩種常用方法:直接在頁面中寫入和引入外部JS文件。

1、在頁面中直接寫入

可以使用<script>標簽將JavaScript代碼直接寫入HTML頁面中,例如:

<script>
alert("Hello, World!");
</script>

2、引入外部JS文件

通過 src 引入,此時 script 標簽內添加任何js代碼都不起效果。

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

其中,src屬性指定了外部JS文件的路徑。

動態引入JS的四種方式:

1、使用document.write方法

document.write("<script src='test.js'><\/script>");

但這種方式會將當前頁面全覆寫掉,不推薦使用。

2、動態改變已有<script>的src屬性

var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);

通過創建一個新的<script>元素,并修改其src屬性,然后將其添加到<head>標簽中,實現動態引入。

3、動態創建<script>元素

var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);

通過使用document.createElement方法創建一個新的<script>元素,然后設置其src屬性,并將其添加到<head>標簽中。

4、基于Ajax請求的(推薦)

function includeJS(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var script = document.createElement("script");
script.text = xhr.responseText;
document.head.appendChild(script);
}
};
xhr.send();
}
includeJS("test.js");

通過使用XMLHttpRequest對象發送GET請求獲取JS文件的內容,然后創建一個新的<script>元素,設置其text屬性為獲取到的JS代碼,并將其添加到<head>標簽中。

二、引入JavaScript的基本屬性

1、type屬性

在<script>標簽中,可以使用type屬性指定引入的是JavaScript文件,但這是默認屬性,可以省略不寫。

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

2、async屬性

使用async屬性可以異步加載JS文件,即在加載JS文件過程中,頁面會繼續渲染和執行其他代碼。默認情況下是同步加載(即阻塞加載,直到JS文件加載完成后再繼續渲染和執行)。

<script src="index.js" async></script>

3、defer屬性

使用defer屬性可以延遲執行JS文件,即在頁面加載完成后再執行JS代碼。與async屬性不同的是,defer保證了JS文件的執行順序與其在頁面中的順序一致。

<script src="index.js" defer></script>

async和defer的區別:

  • async:異步加載,JS文件加載完成后立即執行,不影響頁面渲染。多個async屬性的JS文件的執行順序不確定。
  • defer:延遲執行,JS文件在頁面加載完成后按照其在頁面中的順序依次執行,不影響頁面渲染。

例如:

<script src="index.js" async></script>
<script>
alert("First");
</script>
<script>
alert("Second");
</script>
<h1>Hello, World!</h1>
<script>
alert("Third");
</script>
<script>
alert("Fourth");
</script>
  • 使用async屬性加載index.js,將會有5次彈窗,首先是"First",然后是"Second",接著是頁面中的內容,最后是index.js中的代碼。
  • 如果改為使用defer屬性加載index.js,則會先彈出"First"、"Second"、頁面內容,最后是index.js中的代碼。
廣告合作
QQ群號:707632017
標簽:

溫馨提示:

1、本網站發布的內容(圖片、視頻和文字)以原創、轉載和分享網絡內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。郵箱:2942802716#qq.com(#改為@)。

2、本站原創內容未經允許不得轉裁,轉載請注明出處“站長百科”和原文地址。

熱門教程

  • Z-Blog教程
    Z-Blog教程
    ZBlog教程分享ZBlog安裝教程、ZBlog建站教程和ZBlog使用教程等相關教程,包括如何創建...
  • CSS教程
    CSS教程
    CSS教程提供了關于如何使用CSS來設計和美化網頁的基礎知識和技巧,包括選擇器、樣式規則、盒模型、布...
  • WordPress教程
    WordPress教程
    WordPress教程提供了關于WordPress的基礎知識和技巧,包括安裝、設置、發布內容、選擇主...
  • 寶塔面板教程
    寶塔面板教程
    寶塔面板教程是一個致力于向用戶傳授寶塔面板的使用技巧和知識的學習資源,旨在幫助用戶快速上手和充分利用...
  • Xmind教程
    Xmind教程
    Xmind是一款功能強大的思維導圖軟件,它可以幫助用戶組織思維、整理信息、規劃項目等。Xmind教程...

3個月免費VPS

亞馬遜云科技