技术文摘

HTML 中如何调用 JS

2025-01-09 20:07:12 小编

HTML 中如何调用 JS

在网页开发中，HTML 与 JS 紧密协作，共同打造出丰富多彩且交互性强的网页。HTML 负责构建页面的结构，而 JS 则为页面赋予动态效果和交互功能。那么，在 HTML 中如何调用 JS 呢？

第一种常见的方式是内联脚本。在 HTML 标签内，可以直接使用 on 开头的事件属性来嵌入 JS 代码。例如，在一个按钮标签 <button onclick="alert('你点击了我！')">点击我</button> 中，onclick 就是一个事件属性，当按钮被点击时，双引号内的 JS 代码 alert('你点击了我！') 就会执行，弹出一个提示框。这种方式简单直接，适合简短的代码片段，但不适合复杂逻辑，因为会使 HTML 代码变得混乱，不利于维护。

第二种方法是内部脚本。在 HTML 的 <head> 或 <body> 标签内，可以使用 <script> 标签来编写 JS 代码。比如：

<head>
  <script>
    function greet() {
      alert('欢迎来到我的网页！');
    }
  </script>
</head>
<body>
  <button onclick="greet()">打招呼</button>
</body>

在这个例子中，<script> 标签内部定义了一个函数 greet，在按钮的 onclick 事件中调用该函数。内部脚本适合页面特定的功能逻辑，将相关的 JS 代码集中在一起，增强了代码的可读性。

最后一种是外部脚本。将 JS 代码写在一个独立的 .js 文件中，然后在 HTML 中通过 <script> 标签的 src 属性引入。首先创建一个名为 script.js 的文件，在其中编写：

function showMessage() {
  console.log('这是来自外部脚本的消息');
}

然后在 HTML 文件中：

<script src="script.js"></script>
<button onclick="showMessage()">点击显示消息</button>

外部脚本的优势在于可以实现代码的复用，多个 HTML 页面可以引用同一个 JS 文件，而且使 HTML 代码更加简洁，便于管理和维护大型项目。

通过内联脚本、内部脚本和外部脚本这三种方式，开发者能够根据实际需求灵活地在 HTML 中调用 JS，为网页增添强大的交互功能和动态效果，满足用户日益增长的体验需求。

TAGS: script标签使用内联js代码 HTML调用JS方式外部JS文件引入

万千站长工具

技术文摘

HTML 中如何调用 JS

HTML 中如何调用 JS

欢迎使用万千站长工具！