HTML 中怎样调用 JS

技术文摘

2025-01-09 12:17:03 小编

HTML中怎样调用JS

在网页开发中，HTML（超文本标记语言）负责构建网页的结构和内容，而JavaScript（JS）则赋予网页交互性和动态效果。那么，在HTML中怎样调用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>内部调用JS示例</title>
</head>

<body>
  <h1>点击按钮查看效果</h1>
  <button onclick="changeText()">点击我</button>
  <p id="demo">这是一段初始文本。</p>

  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "文本已更改！";
    }
  </script>
</body>

</html>

在上述代码中，我们在<script>标签中定义了一个名为changeText的函数，当按钮被点击时，该函数会被调用，从而修改id为demo的段落文本。

外部调用

当JavaScript代码量较大或者需要在多个HTML页面中复用代码时，我们可以将JavaScript代码放在一个独立的.js文件中，然后在HTML文件中通过<script>标签的src属性来引用该文件。例如：

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

function showMessage() {
  alert("欢迎访问本页面！");
}

在HTML文件中引入：

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

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

<body>
  <button onclick="showMessage()">点击弹出消息</button>
  <script src="main.js"></script>
</body>

</html>

通过这种方式，我们可以将JavaScript代码与HTML代码分离，提高代码的可维护性和复用性。掌握HTML中调用JS的方法对于网页开发至关重要，开发者可以根据实际需求选择合适的调用方式。

TAGS: js引入方式 HTML调用JS HTML与JS交互 HTML中JS应用

万千站长工具

技术文摘

HTML 中怎样调用 JS

欢迎使用万千站长工具！