html引进js

在HTML中引入JavaScript文件的方法有多种，以下是一些常见的方法：

（图片来源网络，侵删）

1、使用<script>标签

最简单的方法是在HTML文件中使用<script>标签来引入JavaScript文件，将<script>标签放在HTML文件的<head>或<body>部分，然后设置src属性为JavaScript文件的路径。

<!DOCTYPE html>
<html>
<head>
  <title>引入JavaScript示例</title>
  <script src="example.js"></script>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <p>点击下面的按钮查看效果。</p>
  <button onclick="showMessage()">点击我</button>
  <script>
    function showMessage() {
      alert('你好，欢迎访问我的网站！');
    }
  </script>
</body>
</html>

在这个例子中，我们在<head>部分引入了名为example.js的外部JavaScript文件，然后在<body>部分编写了一个简单的JavaScript函数showMessage()，当用户点击按钮时，会弹出一个提示框。

2、使用<script>标签的异步属性

为了提高页面加载速度，可以将<script>标签设置为异步属性，这样，浏览器会在解析HTML文档时并行加载JavaScript文件，而不会阻塞页面的渲染，将async属性添加到<script>标签中即可：

<!DOCTYPE html>
<html>
<head>
  <title>引入JavaScript示例</title>
  <script async src="example.js"></script>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <p>点击下面的按钮查看效果。</p>
  <button onclick="showMessage()">点击我</button>
</body>
</html>

在这个例子中，我们将<script src="example.js"></script>修改为<script async src="example.js"></script>，使得JavaScript文件以异步方式加载，其他部分与上一个例子相同。

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

随着JavaScript项目变得越来越复杂，我们可能需要将代码分割成多个模块，为了实现模块化，可以使用ES6的模块语法（如import和export）或者CommonJS规范（如require和module.exports），以下是一个使用ES6模块语法的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset："UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>引入JavaScript模块示例</title>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <p>点击下面的按钮查看效果。</p>
  <button id="myButton">点击我</button>
  <script type="module">
    import { showMessage } from './example.js';
    const button = document.getElementById('myButton');
    button.addEventListener('click', showMessage);
  </script>
</body>
</html>

在这个例子中，我们在HTML文件中使用了ES6的模块语法（type="module"），我们使用import语句从名为example.js的文件中导入了一个名为showMessage的函数，我们将这个函数绑定到按钮的点击事件上，注意，这里的路径是相对于HTML文件的路径，如果需要引用外部库，可以使用相对路径或绝对路径，import { exampleFunction } from ‘path/to/externallibrary.js’。

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/377565.html

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