HTML JavaScript
<script>标签用于在HTML中嵌入JavaScript代码，使网页具有交互性。JavaScript是Web前端开发的核心技术之一。
什么是 JavaScript？
JavaScript是一种脚本语言，可以在浏览器中运行，使网页具有动态交互能力。通过JavaScript可以：
- 修改页面内容和结构
- 响应用户操作（点击、输入等）
- 发送网络请求
- 存储数据（localStorage、sessionStorage）
- 创建动画和交互效果
内联脚本
可以直接在HTML中编写JavaScript代码：
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 上述代码会将 id="demo" 的元素内容改为 "Hello JavaScript!"。
外部脚本
将JavaScript代码保存在独立的 .js 文件中：
<script src="myscript.js"></script> 外部脚本的优势
- 代码复用：多个页面可以引用同一个JS文件
- 维护方便：修改一次即可全局生效
- 分离关注点：HTML和JavaScript分离
- 浏览器缓存：提升页面加载速度
脚本放置位置
脚本可以放在 <head> 或 <body> 中：
在 <head> 中
<head>
<script src="script.js"></script>
</head> 在 <body> 末尾（推荐）
<body>
<!-- 页面内容 -->
<script src="script.js"></script>
</body> 推荐
将脚本放在 <body> 末尾可以让页面内容先加载，提升用户体验。
defer 和 async 属性
这两个属性用于控制脚本的加载方式：
defer - 延迟执行
<script src="script.js" defer></script> 脚本会并行下载，但会在HTML解析完成后按顺序执行。
async - 异步执行
<script src="script.js" async></script> 脚本会并行下载，下载完成后立即执行。
| 属性 | 下载时机 | 执行时机 | 适用场景 |
|---|---|---|---|
| 无 | 阻塞 | 阻塞HTML | 不推荐 |
| defer | 并行 | HTML后，按顺序 | 需要DOM操作的脚本 |
| async | 并行 | 下载后立即 | 独立脚本（如统计） |
<noscript> 标签
当浏览器禁用JavaScript或不支持时，显示备用内容：
<script>
document.write("JavaScript已启用！");
</script>
<noscript>
<p>您的浏览器不支持JavaScript，请启用JavaScript以获得最佳体验。</p>
</noscript> DOM 操作示例
JavaScript可以操作HTML元素：
// 获取元素
const element = document.getElementById("myId");
// 修改内容
element.innerHTML = "新内容";
// 修改样式
element.style.color = "blue";
element.style.display = "none";
// 添加事件监听
element.addEventListener("click", function() {
alert("点击了！");
}); 交互式示例
在下面的代码编辑器中，尝试编写JavaScript代码：
💻 在线代码编辑器
👁️ 预览效果
最佳实践
建议
- 优先使用外部脚本，便于维护和缓存
- 将脚本放在
<body>末尾或使用 defer 属性 - 使用现代JavaScript（ES6+）语法
- 避免使用 document.write()，它会覆盖页面
- 使用 addEventListener 而非 inline 事件处理器
- 注意代码组织和模块化