如何在 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 儲存在外部檔案中可以輕鬆維護網站。
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP