如何在 HTML 檔案中使用外部“.js”檔案?


什麼是 JavaScript?

JavaScript 是一種客戶端指令碼語言,用於建立動態網頁。它與 HTML 程式碼整合在一起。JavaScript 程式碼插入到 <script> 和 </script> 標籤之間,如下所示。

<script>
   document.getElementById("demoId").innerHTML = "JavaScript Example";
</script>

JavaScript 是一種程式語言,可以為您的網站新增豐富的互動性(例如:遊戲、按下按鈕或在表單中輸入資料時的響應、動態樣式、動畫等)。

在最常見的形式中,JavaScript 駐留在 HTML 文件內,並且可以為網頁提供簡單的 HTML 無法實現的互動級別。

  • Java 和 JavaScript 的主要區別:Java 是一種面向物件程式語言,而 JavaScript 是一種面向物件指令碼語言。

  • JS 是 JavaScript 的縮寫。它由 Brendan Eich 發明。它非常通用。

  • JavaScript 也用於 PDF 文件、特定網站的瀏覽器和桌面小部件。它包括應用程式程式設計介面 (API)、內建函式、第三方框架和庫。

JavaScript 的優點

  • 它執行速度非常快。

  • 它易於學習和實現。

  • JavaScript 無處不在。

  • 許多框架(Angular、Reactjs、JQuery)。

JavaScript 的缺點

  • JavaScript 在使用者的計算機上執行,並且使用者可以輕鬆地修改或更改它。

  • 某些瀏覽器不支援 JavaScript 的某些功能。

內部 JavaScript

內部 JavaScript 意味著我們可以將 JavaScript 程式碼寫入 <script>標籤內,它可以放置在 head 部分或 body 部分。

示例

通常,這種方法很少使用,因為它使程式碼更復雜,因此外部方法最受青睞,其中 JavaScript 儲存在單獨的檔案中。

<!DOCTYPE html>
<html>
<body>
   <h1>Displaying Script Element</h1>
   <p id="sample"></p>
   <script>
      document.getElementById("sample").innerHTML = "Welcome To TutorialsPoint!";
   </script> 
</body>
</html>

外部 JavaScript

外部 JavaScript 意味著將程式碼寫入另一個具有 .js 副檔名的檔案,然後嘗試在 <head> 或 <body> 部分連結該檔案。

示例

讓我們看一個示例,以顯示外部 JavaScript 的用法。

<script src=" https://releases.jquery.com/git/jquery-git.slim.js" crossorigin="anonymous">
</script>

出於以下原因,我們使用外部 JavaScript 檔案:

  • 它方便跨多個 HTML 檔案重用程式碼。

  • 它使程式碼更容易閱讀。

  • 它節省時間,因為 Web 瀏覽器快取外部 js 檔案,從而進一步減少頁面載入時間。

  • 它允許網站設計師和開發人員並行且獨立地使用 HTML 和 js 檔案,避免程式碼衝突。

  • 程式碼變得更短,因為我們只需要指示 js 檔案的位置。

示例

以下示例演示了外部 JavaScript 檔案的用法:

<!DOCTYPE html>
<html>
<head>
   <title>Wage Calculator</title>
   <script>
      function salCal() {
         //declare variables 
         var rate,hour,salary;
         //get the rate of wage from textbox1
         rate = document.getElementById("t1").value;
         //get the hour from textbox2
         hour = document.getElementById("t2").value;
         //formula to calculate salary
         salary = rate*hour;
         //display salary
         document.getElementById("sal").innerHTML = "The salary is::"+salary;
      }  
   </script>
</head>
<body>
   <h3> Fill the information below to see how much of a salary a hourly wage equals</h3> Enter the hourly rate: <input type="text" id="t1">
   <br>
   <br> Enter hours per week: <input type="text" id="t2">
   <br><br>
   <button type="button" onclick="salCal()">Check</button>
   <h4 id="sal"></h4>
</body>
</html>

在文字中輸入值後,將顯示以下輸出:

外部 JavaScript 的優點

如果網站的多個頁面使用相同的程式碼,則外部 JavaScript 檔案很有用。我們只需要在 HTML 頁面中包含對外部程式碼的引用。假設 JavaScript 程式碼發生更改,則只需要編輯一個檔案;將 JavaScript 儲存在外部檔案中可以輕鬆維護網站。

更新於: 2023年10月4日

6K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.