html页面交互及JS(JavaScript)使用方法

Hi~晴天大圣2025-11-20 14:55

在 HTML 中，JavaScript（JS）主要用于页面交互，常规的使用方法如下：

一、内联脚本

直接在 HTML 元素的事件属性（如 onclick、onload 等）中编写 JavaScript 代码。示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="alert('This is an inline script alert.')">点击弹出警告</button>
</body>
</html>

二、内部脚本

在 HTML 文件中使用 <script> 标签直接编写 JavaScript 代码。示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="showMessage()">点击显示消息</button>

    <script>
        function showMessage() {
            alert('Hello, world!');
        }
    </script>
</body>
</html>

三、外部脚本文件--调用 JS(JavaScript) 文件

1.创建一个独立的 JavaScript 文件，例如pycharm工具平台选择"New"（新建）>"File"（文件），输入文件名及文件名后缀如 script.js。在这个文件中编写你的 JavaScript 代码，例如：

html 复制代码

function greet() {
    alert('Hello, world!');
}

2.在 HTML 文件的标签的结尾（或其他合适位置）使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="greet()">点击问候</button>
    <script src="../static/script.js"></script>
</body>
</html>

说明：在 <script> 标签中，src 属性指定了 JavaScript 文件的路径。和 CSS 文件类似，如果在同一目录下直接写文件名，在其它目录中提供相对路径。将 <script> 标签放在 <body> 标签结尾可以确保页面的 HTML 元素都已加载，避免 JavaScript 操作未加载元素导致的错误。