JavaScript: JavaScript 入门
最后更新：2026-10-13
让你的网页用上 JavaScript，比你想象的更简单——有三种方式，从简单到规范，逐一掌握。
1. 三种引入 JavaScript 的方式
(1) 内联方式（onclick 属性）
直接在 HTML 元素的事件属性中写 JS 代码，比如 onclick="..."。
这是最简单粗暴的方式，但不推荐在实际项目中使用——HTML 和 JS 混在一起，后期维护是噩梦。
(2) 内部方式（<script> 标签）
在 HTML 文件中插入 <script> 标签，JS 代码写在标签内部。适合代码量较少的页面，是学习和测试阶段最常用的方式。
<script> 标签可以放在 <head> 或 <body> 中，但推荐放在 </body> 之前，这样不会阻塞页面的渲染。
(3) 外部方式（.js 文件）
把 JS 代码写进独立的 .js 文件，再用 <script src="xxx.js"></script> 引入。这是实际项目的标准做法——代码分离、可复用、浏览器还能缓存文件加速加载。
▶ 示例：内联方式引入 JS
▶ 试一试▶ 示例：内部方式引入 JS
▶ 试一试▶ 示例：外部方式引入 JS
▶ 试一试2. VS Code 编写 JS 的推荐插件
如果你用 VS Code（强烈推荐），装这几个插件就够了：
- Live Server——右键 HTML 文件选"Open with Live Server"，保存即刷新，不用手动按 F5
- ESLint——实时检查代码语法问题，像拼写检查器一样帮你排错
3. Chrome 开发者工具运行 JS
按 F12 打开开发者工具，切换到 Console 面板，你就可以直接输入 JS 代码并回车执行。这是最快速的实验方式，不用写 HTML 文件就能测试任何代码片段。
小技巧：在 Console 里按 ↑ 键可以调出上一条命令，避免重复输入。
4. script 标签的 defer 和 async 属性
当 <script> 放在 <head> 中时，浏览器会先下载执行 JS，再继续解析 HTML——这可能导致页面卡顿。defer 和 async 就是解决这个问题的：
| 属性 | 行为 |
|---|---|
| 无 | 立即下载并执行，阻塞 HTML 解析 |
defer |
后台下载，等 HTML 解析完再执行（按顺序） |
async |
后台下载，下载完立即执行（不保证顺序） |
实战建议：外部 JS 文件加 defer 是最稳妥的选择——<script src="app.js" defer></script>。
❓ 常见问题
Q
<script> 标签放在 head 和 body 底部有什么区别？A 放在 head 中，浏览器遇到脚本就会停下来下载执行，页面此时还是白屏。放在 body 底部，页面先渲染出来，用户不会觉得"卡"。这就像先上菜再讲笑话——别让客人饿着肚子等。
Q defer 和 async 该用哪个？
A 大多数情况用
defer。它保证脚本按顺序执行，而且等 HTML 解析完才跑，不会找不到 DOM 元素。async 适合独立的统计脚本（如百度统计），不依赖其他脚本也不操作 DOM。Q 一个页面可以有多少个
<script> 标签？A 想放几个放几个，没有限制。但实际项目中应尽量合并成少数几个外部文件，减少 HTTP 请求。
📖 小节
- 三种引入方式：内联
onclick（不推荐）、内部<script>（适合学习）、外部.js文件（项目标准） <script>标签放在</body>之前，避免阻塞页面渲染- 外部 JS 文件用
defer属性，既不阻塞又保证执行顺序 - Chrome F12 的 Console 面板是最快的 JS 实验场
- VS Code + Live Server + ESLint 是前端开发的标准装备
- 内联方式虽然方便，但 HTML 和 JS 耦合严重，养成分离的好习惯
📝 作业
- 基础题：创建一个 HTML 页面，用内部
<script>方式实现：页面加载后弹出一个提示框显示"欢迎来到 JavaScript 世界！"（提示：用alert()）。 - 进阶题：创建一个 HTML 页面和一个独立的
main.js文件，在 HTML 中用<script src="main.js" defer></script>引入，JS 文件中实现点击按钮改变页面背景色的功能。 - 挑战题：创建一个页面，包含三个按钮分别对应三种引入方式（内联、内部、外部），点击任意按钮后在页面上显示"这是 XXX 方式引入的 JS"，并用不同颜色区分。
