body里写js怎么写

在HTML中编写JavaScript的方法

在HTML文档中插入JavaScript代码是一种常见的做法，用于使网页具有动态功能和交互性。在HTML文件中编写JavaScript代码的方法有三种：在标签内、在标签内、外部JavaScript文件。 在这篇文章中，我们将详细探讨如何在HTML的body标签内编写JavaScript代码，并介绍每种方法的优缺点及最佳实践。

一、在标签内插入JavaScript代码

在HTML的标签内插入JavaScript代码是最常见的方法之一。这种方法通常用于在页面加载完成后立即执行的脚本，例如事件处理程序、动画效果等。

1. 内联脚本（Inline Script）

内联脚本是将JavaScript代码直接嵌入到HTML的标签内。以下是一个简单的例子：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Script Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        document.querySelector('h1').textContent = 'Hello, JavaScript!';
    </script>
</body>
</html>

在这个例子中，JavaScript代码被直接嵌入到标签内，并在页面加载后立即执行。这种方法简单直观，但不适合大型项目，因为代码和HTML结构混杂在一起，不利于维护。

2. 事件处理程序（Event Handlers）

在HTML元素的事件属性中直接编写JavaScript代码也是一种常见的方法。以下是一个示例：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handler Example</title>
</head>
<body>
    <button onclick="alert('Button clicked!')">Click Me!</button>
</body>
</html>

在这个例子中，JavaScript代码被嵌入到button元素的onclick事件属性中。这种方法适用于简单的交互，但对于复杂的交互逻辑，不建议使用，因为难以调试和维护。

二、在标签内插入外部JavaScript文件

将JavaScript代码放在外部文件中是最佳实践之一，因为这样可以将HTML结构和脚本逻辑分离，提高代码的可读性和可维护性。以下是一个示例：

1. 引入外部JavaScript文件

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="script.js"></script>
</body>
</html>

在这个例子中，JavaScript代码被放在一个名为script.js的外部文件中，并通过