js文件如何引入html中

在Web开发中，JavaScript文件是一种重要的资源，它可以使网页具有动态和交互性的功能，将JavaScript文件引入HTML中，可以让开发者编写的脚本来控制和操作网页元素，本文将详细介绍如何在HTML中引入JavaScript文件，以及一些常见的方法和注意事项。

我们需要了解HTML文件和JavaScript文件的关系，HTML文件是网页的骨架，它定义了网页的结构和内容，而JavaScript文件则是一种脚本文件，它包含了可以操作HTML元素的代码，为了使JavaScript文件能够在HTML页面中正常工作，我们需要将其引入到HTML文件中。

以下是几种常见的将JavaScript文件引入HTML页面的方法：

1、直接在HTML文件中使用<script>标签

将JavaScript代码直接写入<script>标签内，是一种简单且易于理解的方法，将<script>标签放置在HTML文件的<head>部分或<body>部分的最后，可以确保在页面加载时执行相应的脚本。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
  <script>
    function sayHello() {
      alert("Hello, World!");
    }
  </script>
</head>
<body>
  <h1>这是一个示例页面</h1>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

2、通过<script>标签引入外部JavaScript文件

另一种方法是使用<script>标签的src属性，将外部的JavaScript文件引入到HTML页面中，这种方法可以让代码更加模块化，便于维护和更新。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
</head>
<body>
  <h1>这是一个示例页面</h1>
  <button id="helloButton">点击我</button>
  <script src="hello.js"></script>
</body>
</html>

在hello.js文件中，我们需要编写如下代码：

document.addEventListener("DOMContentLoaded", function() {
  var helloButton = document.getElementById("helloButton");
  helloButton.addEventListener("click", sayHello);
  function sayHello() {
    alert("Hello, World!");
  }
});

3、使用模块化方法引入JavaScript文件

随着ES6（ECMAScript 2015）的普及，越来越多的开发者开始使用模块化的方式来编写JavaScript代码，在HTML中引入模块化的JavaScript文件，可以使用<script type="module">标签。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
</head>
<body>
  <h1>这是一个示例页面</h1>
  <button id="helloButton">点击我</button>
  <script type="module" src="hello.mjs"></script>
</body>
</html>

在hello.mjs文件中，我们需要编写如下代码：

export function sayHello() {
  alert("Hello, World!");
}
window.addEventListener("DOMContentLoaded", () => {
  const helloButton = document.getElementById("helloButton");
  helloButton.addEventListener("click", sayHello);
});

需要注意的是，在使用模块化方法时，需要确保浏览器支持ES6模块，模块化的JavaScript文件通常以.mjs为扩展名，以便与普通的.js文件区分。

在HTML中引入JavaScript文件的方法有很多，开发者可以根据自己的需求和喜好选择合适的方法，无论是将JavaScript代码直接写入HTML文件，还是通过外部文件引入，都需要注意代码的组织和模块化，以便于后期维护和更新，为了确保网页的加载性能和用户体验，建议将脚本放在<body>标签的最后，或者使用async和defer属性来控制脚本的加载和执行顺序。

谷歌浏览器

谷歌浏览器

谷歌浏览器