將 JavaScript 檔案連結到 HTML 檔案

Sushant Poudel 2023年10月12日
  1. 使用 <script> 標籤和 src 屬性將外部 JavaScript 連結到 HTML
  2. 使用 <script> 標籤將內部 JavaScript 連結到 HTML
將 JavaScript 檔案連結到 HTML 檔案

本文將討論兩種將 JavaScript 檔案連結到 HTML 檔案的方法。在第一個過程中,我們將建立一個 JavaScript 檔案並在外部連結這些檔案。在第二個過程中,我們將 JavaScript 程式碼插入到 HTML 文件中。

使用 <script> 標籤和 src 屬性將外部 JavaScript 連結到 HTML

在此方法中,我們使用 <script> 標記中的 src 屬性將 JavaScript 檔案連結到 HTML 檔案。src 屬性用於指定外部檔案的 URL 或檔案位置。如果我們希望在一個網站的多個頁面上使用相同的 JavaScript,我們必須建立一個外部 JavaScript 檔案,而不是一次又一次地編寫相同的檔案。我們將 <script> 寫在 HTML 的 <head> 標籤內。使用 .js 副檔名儲存指令碼檔案後,我們使用 <script> 標籤中的 src 屬性引用它。

例如,建立兩個檔案,一個 HTML 和一個 JavaScript 檔案。在 JS 檔案中編寫一些 JavaScript,在 HTML 檔案中編寫一些 HTML。在分別命名這兩個檔案後,不要忘記使用 .html.js 副檔名,同時儲存它們。將這兩個檔案放在同一個資料夾中。在 HTML 檔案中 <script> 標籤的 src 屬性中寫入 JavaScript 檔名。例如,如果你的檔名是 hello.js,請編寫 <script src="hello.js"> </script>

下面的示例說明了一種將 JavaScript 檔案連結到 HTML 檔案的方法。我們在 HTML 檔案中寫了 This is HTML,在 JavaScript 檔案中寫了 This is write from JavaScript。正如我們在下面輸出部分的兩個文字中看到的那樣,它證明 JavaScript 與 HTML 相關聯。

示例程式碼:

<html>
 <head>
 <script src="hello.js"> </script>
 </head>
 
 <body>
 <p> This is HTML</p>
 </body>

</html>
document.write('This is written from JavaScript');

輸出:

使用 <script> 標籤將內部 JavaScript 連結到 HTML

與第一種方法不同,我們使用 <script> 標籤在 HTML 檔案中新增 JavaScript 程式碼。<script> 標籤用於新增客戶端指令碼。我們可以在 HTML 檔案中的 <script> 標籤內部編寫 JavaScript。當我們執行 HTML 檔案時,我們將看到載入的 JavaScript。

例如,在 HTML 的 <p> 標籤中寫入文字 This is HTML。然後,開啟 <script> 標記並使用 document.write 鍵入訊息 This is written from JavaScript。然後,關閉指令碼標記。

我們可以看到用 HTML 和 JavaScript 編寫的文字都顯示在下面的輸出中。它證明 HTML 和 JavaScript 已經連結。

例子:

<html>
    <head>
    </head>
    <body>
        <p> This is HTML </p>
    </body>
    <script>
        document.write("This is written from JavaScript");
    </script>
</html>

輸出:

Hi, I am a programmer.
This is written from JavaScript
作者: Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn