如何在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.