在前端开发中，JavaScript 是一种常用的脚本语言，用于实现网页的交互和动态效果，而 HTML 文件则是网页的基本结构，通过标签来定义网页的内容和布局，如何将 JavaScript 与 HTML 文件连接起来呢？本文将详细介绍如何使用 JavaScript 连接 HTML 文件的方法。
1. 内联 JavaScript
内联 JavaScript 是将 JavaScript 代码直接嵌入到 HTML 文件中的一种方式，这种方式简单直接，适用于较小的 JavaScript 代码片段。
<!DOCTYPE html>
<html>
<head>
<title>内联 JavaScript</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button onclick="alert('Hello, World!')">点击我</button>
</body>
</html>
在上面的例子中，我们使用 onclick 属性将 JavaScript 代码与按钮的点击事件关联起来，当用户点击按钮时，会弹出一个包含 "Hello, World!" 的警告框。
2. 外部引用 JavaScript
外部引用 JavaScript 是将 JavaScript 代码保存在一个单独的文件中，然后在 HTML 文件中通过 <script> 标签引用该文件，这种方式适用于较大的 JavaScript 代码文件，可以提高代码的可维护性和复用性。
创建一个名为 script.js 的 JavaScript 文件，并编写以下代码：
function sayHello() {
alert('Hello, World!');
}
在 HTML 文件中使用 <script> 标签引用该文件：
<!DOCTYPE html>
<html>
<head>
<title>外部引用 JavaScript</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button onclick="sayHello()">点击我</button>
<script src="script.js"></script>
</body>
</html>
在上面的例子中，我们在 <body> 标签内添加了一个 <script> 标签，并通过 src 属性指定了 JavaScript 文件的路径，当用户点击按钮时，会调用 sayHello 函数，弹出一个包含 "Hello, World!" 的警告框。
3. 事件监听器
除了直接在 HTML 标签中使用事件属性（如 onclick）关联 JavaScript 代码外，还可以使用事件监听器来实现更灵活的事件处理，事件监听器允许我们将多个事件处理函数绑定到一个特定的事件上。
在 HTML 文件中添加一个元素和一个事件监听器：
<!DOCTYPE html>
<html>
<head>
<title>事件监听器</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<button id="myButton">点击我</button>
<script src="script.js"></script>
</body>
</html>
在 JavaScript 文件中编写事件处理函数：
document.getElementById('myButton').addEventListener('click', function() {
alert('Hello, World!');
});
在上面的例子中，我们使用 getElementById 方法获取按钮元素，并使用 addEventListener 方法为按钮添加一个点击事件监听器，当用户点击按钮时，会调用匿名函数，弹出一个包含 "Hello, World!" 的警告框。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/255053.html
微信扫一扫 