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

启动您的职业生涯

完成课程后获得认证

开始
广告