如何在 HTML 文件中使用外部".js"文件?

htmlweb developmentfront end technology更新于 2025/12/8 8:12:17

什么是 JavaScript?

JavaScript 是一种用于创建动态网页的客户端脚本语言。它与 HTML 代码集成在一起。JavaScript 代码插入到 <script> 和 </script> 标签之间，如下所示。


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

JavaScript 是一种编程语言，它可以为您的网站增添丰富的交互性(例如:游戏、按钮按下或表单数据输入时的响应、动态样式、动画等)。

JavaScript 最常见的形式是驻留在 HTML 文档中，可以为网页提供简单 HTML 无法实现的交互级别。

Java 和 JavaScript 之间的主要区别:Java 是一种面向对象编程语言，而 Java Script 是一种面向对象脚本语言。
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 文件的位置，因此代码变得更短。

示例

以下示例演示了外部 java script 文件的用法 −

<!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>

在文本中输入值后，将显示以下输出 −