html实现js
HTML 中实现 JavaScript 的方法
在 HTML 中实现 JavaScript 主要有以下几种方式：
内联脚本
直接在 HTML 文件中使用 <script> 标签嵌入 JavaScript 代码：
<script>
alert('Hello, World!');
</script>这种方式适合简单的脚本或快速测试，但不推荐用于复杂的逻辑，因为它会混合 HTML 和 JavaScript 代码。
外部脚本文件
将 JavaScript 代码保存在独立的 .js 文件中，并通过 <script> 标签的 src 属性引入：
<script src="script.js"></script>script.js 文件内容示例：
function greet() {
alert('Hello from external file!');
}这种方式适合大型项目，便于代码管理和维护。
事件属性
直接在 HTML 元素的属性中调用 JavaScript 函数：
<button onclick="alert('Button clicked!')">Click Me</button>或者调用已定义的函数：
<button onclick="greet()">Click Me</button>
<script>
function greet() {
alert('Button clicked!');
}
</script>这种方式适合简单的交互，但同样不推荐过度使用，以避免 HTML 和 JavaScript 的紧耦合。
defer 和 async 属性
控制脚本的加载和执行时机：
<script src="script.js" defer></script>
<script src="script.js" async></script>defer：脚本在文档解析完成后执行，按顺序执行。async：脚本异步加载，加载完成后立即执行，不保证顺序。
模块化脚本
使用 type="module" 支持 ES6 模块：
<script type="module" src="module.js"></script>module.js 文件内容示例：
import { greet } from './greet.js';
greet();greet.js 文件内容示例：
export function greet() {
alert('Hello from module!');
}这种方式适合现代前端开发，支持模块化组织和代码复用。
注意事项
- 脚本通常放在
<head>或<body>中。放在<body>底部可以避免阻塞页面渲染。 - 避免使用过时的语法（如
language="javascript"）。 - 外部脚本的路径可以是相对路径或绝对路径。
