如何在 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+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告