菜鸟教程
教程 html tutorial

引入 JavaScript

JavaScript 是网页开发中不可或缺的编程语言，主要用于实现网页的交互逻辑和动态效果。在 HTML 中，我们可以通过多种方式引入 JavaScript 代码。

三种引入方式

1. 内联脚本（Inline Script）

直接在 HTML 标签的事件属性中编写 JavaScript 代码，适用于简单交互。

html 
<button onclick="alert('你点击了按钮！')">点击我</button>

2. 内部脚本（Internal Script）

将 JavaScript 代码写入 <script> 标签内，放在页面底部或 <head> 中。

html 
<script>
  console.log("页面加载完成");
</script>

建议将 <script> 标签放在 </body> 前，以避免阻塞页面渲染。

3. 外部脚本（External Script）

将 JavaScript 写入独立的 .js 文件中，并通过 <script src=""> 引入。推荐此方式用于实际项目。

html 
<script src="main.js"></script>

main.js 示例：

javascript 
document.addEventListener("DOMContentLoaded", function () {
  console.log("页面就绪！");
});

示例：按钮交互

html 
<button id="btn">点击</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    alert("按钮被点击了！");
  });
</script>

使用建议

  • 推荐使用 外部脚本 管理逻辑，提高复用性和可维护性。
  • 使用 defer 或将 <script> 放在页面底部，优化加载性能。
  • 避免过多使用内联脚本，保持 HTML 与逻辑分离。

通过引入 JavaScript，可以极大增强网页的交互性和动态行为，是构建现代网站的基础之一。

相关内容