html中如何引入js

在HTML中引入JavaScript的方法主要有以下几种：

（图片来源网络，侵删）

1、内联引入：将JavaScript代码直接写在HTML文件的<script>标签中，这种方法适用于较小的JavaScript代码片段，可以直接嵌入到HTML文件中。

<!DOCTYPE html>
<html>
<head>
  <title>内联引入示例</title>
</head>
<body>
  <h1>内联引入示例</h1>
  <button onclick="alert('Hello, World!')">点击我</button>
  <script>
    // 在这里编写JavaScript代码
  </script>
</body>
</html>

2、外部引入：将JavaScript代码写在一个单独的.js文件中，然后在HTML文件中使用<script>标签的src属性引用该文件，这种方法适用于较大的JavaScript代码文件，可以方便地进行复用和维护。

创建一个名为main.js的JavaScript文件，内容如下：

function showMessage() {
  alert('Hello, World!');
}

在HTML文件中使用<script>标签引用该文件：

<!DOCTYPE html>
<html>
<head>
  <title>外部引入示例</title>
</head>
<body>
  <h1>外部引入示例</h1>
  <button onclick="showMessage()">点击我</button>
  <script src="main.js"></script>
</body>
</html>

3、事件监听器：在HTML元素上使用on属性添加事件监听器，当触发特定事件时，执行对应的JavaScript函数，这种方法不需要在HTML文件中编写JavaScript代码，而是通过外部JavaScript文件实现。

在main.js文件中编写事件处理函数：

function showMessage() {
  alert('Hello, World!');
}

在HTML文件中为按钮元素添加事件监听器：

<!DOCTYPE html>
<html>
<head>
  <title>事件监听器示例</title>
</head>
<body>
  <h1>事件监听器示例</h1>
  <button onclick="showMessage()">点击我</button>
</body>
</html>

4、async和defer属性：这两个属性可以控制<script>标签中的JavaScript代码何时执行。async属性表示脚本会在页面加载完成后异步执行；defer属性表示脚本会在页面解析完成后按照顺序执行，这两个属性通常用于优化页面性能，减少首屏加载时间，注意，这两个属性不能同时使用。

<!async属性示例 >
<script async src="main.js"></script>
<!或 >
<script src="main.js" async></script>
<!defer属性示例 >
<script defer src="main.js"></script>
<!或 >
<script src="main.js" defer></script>

在HTML中引入JavaScript的方法有内联引入、外部引入、事件监听器和设置async和defer属性等，根据实际需求和项目规模，可以选择合适的方法进行JavaScript代码的引入。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/449327.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。