js调用html怎么写

在HTML中调用JavaScript的多种方法包括：内联事件处理、内部脚本和外部脚本。最常用的方式是通过在HTML文件中包含一个<script>标签，然后在该标签内书写JavaScript代码，或链接到一个外部JavaScript文件。

一、内联事件处理

内联事件处理是将JavaScript代码直接嵌入HTML元素的事件属性中。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Event Handling</title>
</head>
<body>
    <button onclick="alert('Button clicked!')">Click Me</button>
</body>
</html>

在这个例子中，当用户点击按钮时，会弹出一个警告框，显示“Button clicked!”。

二、内部脚本

内部脚本是将JavaScript代码放在HTML文件的<script>标签中，通常位于<head>或<body>标签内。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal Script</title>
    <script>
        function showAlert() {
            alert('Button clicked!');
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

在这个例子中，JavaScript代码被定义在<script>标签中，并通过按钮的onclick事件调用。

三、外部脚本

外部脚本是将JavaScript代码放在一个独立的文件中，然后在HTML文件中通过<script>标签的src属性链接到该文件。例如：

创建一个名为script.js的文件，内容如下：

function showAlert() {
    alert('Button clicked!');
}

然后在HTML文件中引用这个外部脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External Script</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

在这个例子中，JavaScript代码被存储在一个单独的文件中，通过<script>标签引用并在按钮点击时调用。

四、DOM事件监听器

使用JavaScript来动态添加事件监听器也是一种常见的方法。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Listener</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('myButton').addEventListener('click', function() {
                alert('Button clicked!');
            });
        });
    </script>
</head>
<body>
    <button id="myButton">Click Me</button>
</body>
</html>

在这个例子中，当页面加载完成后，通过JavaScript添加事件监听器，监听按钮的点击事件。

五、模块化JavaScript

现代JavaScript开发中，模块化是一种优秀的实践，可以使代码更加清晰和可维护。例如：

创建一个名为module.js的文件，内容如下：

export function showAlert() {
    alert('Button clicked!');
}

然后在HTML文件中引用这个模块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Modules</title>
    <script type="module">
        import { showAlert } from './module.js';
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('myButton').addEventListener('click', showAlert);
        });
    </script>
</head>
<body>
    <button id="myButton">Click Me</button>
</body>
</html>

在这个例子中，JavaScript代码被模块化并通过ES6模块进行导入和使用。

通过上述几种方法，你可以在HTML中有效地调用JavaScript代码，根据具体需求选择最合适的方式能够提高代码的可读性和维护性。