將 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