怎么添加js代码

直接在HTML文件中添加JS代码的几种常见方法包括：在HTML文件的或标签中直接嵌入JavaScript代码、使用外部JavaScript文件、通过事件属性添加JavaScript代码。 其中，最推荐的方法是使用外部JavaScript文件，因为这种方法可以提高代码的可维护性和复用性。下面，我们将详细介绍这些方法，并探讨其优缺点和使用场景。

一、在HTML文件中直接嵌入JavaScript代码

1、在标签中添加

在HTML文件的标签中添加JavaScript代码是一种常见的方法。这种方式适用于在页面加载时需要执行的脚本，例如设置全局变量或加载外部资源。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            console.log('DOM fully loaded and parsed');
        });
    </script>
</head>
<body>
</body>
</html>

优点：

适合需要在页面加载时执行的脚本。
易于访问和调试。

缺点：

增加了HTML文件的体积，不利于代码的重用和维护。

2、在标签中添加

在标签中添加JavaScript代码也是一种常见的方法，尤其适用于需要在页面加载完成后执行的脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        console.log('This script runs after the HTML content is fully loaded');
    </script>
</body>
</html>

优点：

脚本执行时，HTML内容已经加载完成，减少了DOM未加载完成时可能出现的错误。

缺点：

和标签中添加脚本一样，不利于代码的重用和维护。

二、使用外部JavaScript文件

将JavaScript代码放在外部文件中，然后通过