小编教你html中如何引入js。

夏天 • 2024年6月26日 07:34 • 网站搭建 • 阅读 2

在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.cwhello.com/444010.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除