深入淺出：HTML引用JS指南

HTML和JS是Web開發的兩大核心。HTML是網頁的「身體」，而JS則是網頁的「大腦」，它們的合作可以讓網頁實現更複雜的功能。本文將重點介紹HTML引用JS的相關內容，幫助大家更好地理解和使用它們。

一、內聯式引用JS

內聯式引用JS需要在HTML標籤內部添加JS代碼。這種方式常用於處理一些簡單邏輯，對於複雜的代碼則不太適用。

<html>
<head>
    <title>內聯式引用JS</title>
</head>
<body>
    <p onclick="alert('Hello world!')">點擊這裡</p>
</body>
</html>

上面這個例子，當你在網頁中點擊「點擊這裡」這個段落時，就會跳出一個包含「Hello world！」的對話框。

內聯式引用JS的優勢在於，代碼簡單易懂，使用方便快捷。不過，隨著代碼的逐漸複雜，內聯式的實用性就會降低。

二、通過<script>標籤引用JS

1、將JS代碼放在<script>標籤內部

<html>
<head>
    <title>通過<script>標籤引用JS</title>
    <script>
        function sayHello() {
            alert('Hello world!');
        }
    </script>
</head>
<body>
    <p onclick="sayHello()">點擊這裡</p>
</body>
</html>

在以上代碼中，我們定義了一個名為「sayHello」的函數，並在網頁中的段落中引用它。當你在網頁中點擊「點擊這裡」這個段落時，就會跳出一個包含「Hello world！」的對話框。

2、通過<script>標籤引用外部JS文件

為了解決上述問題，我們可以將JS代碼單獨保存為一個.js文件，然後通過<script>標籤引用它。這樣做有以下優點：

可以使HTML代碼更加簡潔，易於維護；
可以通過緩存提高網頁的載入速度；
可以通過多個HTML文件共享同一份JS代碼，提高代碼的復用性。

下面是一個具體的例子：

在與HTML文件同級的目錄下，新建一個名為「test.js」的文件。在該文件中編寫以下代碼：

function sayHello() {
    alert('Hello world!');
}

接下來，我們在HTML中引用這個JS文件：

<html>
<head>
    <title>通過<script>標籤引用JS</title>
    <script src="test.js"></script>
</head>
<body>
    <p onclick="sayHello()">點擊這裡</p>
</body>
</html>

這種方式使得我們可以更好地管理JS代碼，提高代碼的復用性，也更容易進行協作開發。

三、<script>標籤的位置和屬性

以上我們已經知道了如何通過<script>標籤引用JS。但是，<script>標籤的位置和屬性也非常重要。下面我們來詳細解釋一下：

1、<script>標籤的位置

在HTML文檔中，<script>標籤應該放在<head>或<body>標籤中。通常情況下，我們將JS代碼放在<head>標籤中，以便在網頁載入時一併載入JS代碼。但是，這種做法會影響網頁的載入速度。

為了避免這種情況，我們可以將<script>標籤放在<body>標籤中，這樣可以讓網頁更快地載入。然而，這種方法也會產生一些問題，比如可能會延遲JS代碼的執行時間。

綜合考慮，我們需要根據具體情況來選擇<script>標籤的位置。

2、<script>標籤的屬性

除了src屬性之外，<script>標籤還有很多其他可用的屬性，例如async和defer。下面我們來一一解釋一下：

（1）async屬性

async屬性用於非同步載入外部JS腳本。它的作用是告訴瀏覽器，「在下載JS腳本的同時，不必等待它的載入和執行」，這樣可以避免JS文件對網頁載入速度的影響。同時，由於JS文件的載入和執行在非同步載入過程中具有一定的隨機性，所以可能會對網頁產生一定的負面影響。

（2）defer屬性

defer屬性也用於非同步載入外部JS腳本。它的作用與async類似，但有一些不同的地方。defer屬性不會對網頁載入速度產生影響，因為它會等到頁面載入完畢之後再執行JS腳本。在較早的瀏覽器中，defer屬性只支持外部JS文件；在現代瀏覽器中，它也適用於內聯式JS腳本。

綜上所述，<script>標籤的位置和屬性十分重要。在實際開發中，我們需要根據網頁的具體情況來選擇最合適的位置和屬性。

四、結尾

本文主要介紹了HTML引用JS相關內容，包括內聯式引用JS、通過<script>標籤引用JS、<script>標籤的位置和屬性等。這些內容對於Web開發和前端工程師來說非常重要，在實踐中需要深入理解和掌握。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/154008.html