📅 最后修改于: 2023-12-03 15:24:11.807000 🧑 作者: Mango
在 HTML 中，我们可以通过 <script> 标签来引入 JS 代码，让页面实现动态交互、操作 DOM 等功能。本文将介绍如何在 HTML 中输入 JS 代码。
在 HTML 页面的 <body> 或 <head> 中可以使用 <script> 标签嵌入 JS 代码。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直接写 JS 代码</title>
</head>
<body>
<script>
alert("Hello World!");
</script>
</body>
</html>
这样，当我们打开该 HTML 页面时，页面会自动弹出一个对话框，显示消息 "Hello World!"。
除了在 HTML 页面中直接写 JS 代码，还可以使用外部 JS 文件。这样，代码会更加简洁、易于维护。引入外部 JS 文件的方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入外部 JS 文件</title>
<script src="myScript.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
上述代码中，<script> 标签的 src 属性指定了引入的 JS 文件路径，如 myScript.js。
JS 事件是指在页面中发生的事件，比如单击按钮、鼠标移动等。我们可以通过在 HTML 标签中使用 on 开头的属性来嵌入 JS 事件。比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 事件</title>
</head>
<body>
<button onclick="alert('Hello World!')">点击我</button>
</body>
</html>
上述代码中，<button> 标签的 onclick 属性嵌入了一个 JS 事件，当单击该按钮时，会弹出消息 "Hello World!"。
除了自己写 JS 代码之外，我们还可以使用一些出色的 JS 库，如 jQuery、React、Vue 等，来简化代码编写过程。使用外部 JS 库的方式类似于引入外部 JS 文件，只需要在 HTML 页面中引入 JS 库文件即可。
以引入 jQuery 库为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入 jQuery 库</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("button").click(function() {
alert("Hello World!");
});
});
</script>
<button>点击我</button>
</body>
</html>
上述代码中，使用了 jQuery 库，通过 $ 符号简化了 DOM 操作过程，并嵌入了一个 JS 事件，在单击按钮时弹出消息 "Hello World!"。