將 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 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