如何在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儲存在外部檔案中使網站易於維護。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP