📌  相关文章
📜  如何在 html 中输入 js (1)

📅  最后修改于: 2023-12-03 15:24:11.807000             🧑  作者: Mango

如何在 HTML 中输入 JS

在 HTML 中，我们可以通过 <script> 标签来引入 JS 代码，让页面实现动态交互、操作 DOM 等功能。本文将介绍如何在 HTML 中输入 JS 代码。

在 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 文件

除了在 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。

在 HTML 页面中嵌入 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!"。

在 HTML 页面中使用外部 JS 库

除了自己写 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!"。