怎么将js代码写入HTML

将JavaScript代码嵌入HTML页面是前端开发中的一个基本技能，这样做可以增强网页的交互性，让用户体验更加丰富和动态，下面，我将详细介绍几种将JavaScript代码写入HTML的方法，让你的网页更加生动。

内联脚本

内联脚本是将JavaScript代码直接写在HTML标签的事件属性中，如果你想在用户点击一个按钮时执行一段代码，可以这样做：

<button onclick="alert('Hello World!')">点击我</button>

这种方法简单直接，但不适合复杂的逻辑或大量代码，因为它会使HTML代码变得混乱，难以维护。

内部脚本

内部脚本是指在HTML文档内部的<script>标签中编写JavaScript代码，这种方式适合于不依赖外部文件的小型脚本。

<!DOCTYPE html>
<html>
<head>
    <title>内部脚本示例</title>
</head>
<body>
    <button id="myButton">点击我</button>
    <script>
        document.getElementById('myButton').onclick = function() {
            alert('Hello World!');
        };
    </script>
</body>
</html>

这种方式让JavaScript代码与HTML结构保持在同一文件中，便于开发和调试。

外部脚本

外部脚本是将JavaScript代码保存在一个单独的.js文件中，然后在HTML中通过<script>标签引入，这是推荐的做法，因为它有助于保持代码的整洁和模块化。

创建一个JavaScript文件，例如script.js：

function sayHello() {
    alert('Hello World!');
}

在HTML文件中引入这个脚本：

<!DOCTYPE html>
<html>
<head>
    <title>外部脚本示例</title>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
    <script src="script.js"></script>
</body>
</html>

这样做的好处是，你可以在多个页面中重用同一个.js文件，减少了代码的重复。

使用<script>标签的defer和async属性

当你需要在页面加载时执行脚本，但又不想阻塞页面渲染时，可以使用defer或async属性。

defer：脚本将在文档解析完毕后，DOMContentLoaded事件触发前执行，如果有多个脚本，它们将按照它们在文档中出现的顺序执行。

async：脚本将在下载完毕后尽快执行，可能会在DOMContentLoaded事件之前或之后。