js标签引用js的方法

在网页开发中，JavaScript（简称js）发挥着至关重要的作用，它能为网页增添丰富的交互效果和动态功能。而正确地使用js标签引用js文件是实现这些功能的基础。下面将详细介绍几种常见的js标签引用js的方法。

内部引用

在HTML文件中，可以直接在<script>标签内编写JavaScript代码。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部引用示例</title>
</head>

<body>
  <h1>点击按钮查看效果</h1>
  <button onclick="showMessage()">点击我</button>
  <script>
    function showMessage() {
      alert('你点击了按钮！');
    }
  </script>
</body>

</html>

这种方法适用于代码量较少且特定于该HTML页面的情况。

外部引用

当JavaScript代码较多或者需要在多个页面中复用代码时，将js代码放在独立的.js文件中并通过<script>标签引用更为合适。示例如下：

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

function showMessage() {
  alert('你点击了按钮！');
}

然后在HTML文件中引用这个js文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部引用示例</title>
</head>

<body>
  <h1>点击按钮查看效果</h1>
  <button onclick="showMessage()">点击我</button>
  <script src="main.js"></script>
</body>

</html>

引用位置

一般来说，<script>标签可以放在<head>标签内或者<body>标签的底部。放在<head>标签内时，页面加载时会先加载js代码，但可能会阻塞页面的渲染；放在<body>标签底部时，会在页面内容加载完成后再加载js代码，不会阻塞页面渲染，通常更推荐这种方式。

掌握好js标签引用js的方法，能够让我们的网页开发更加高效、规范，为用户带来更好的浏览体验。