JavaScript: JavaScript 入门
让你的网页用上 JavaScript，比你想象的更简单——有三种方式，从简单到规范，逐一掌握。
1. 三种引入 JavaScript 的方式
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。
(1) 1. 内联方式（onclick 属性）
直接在 HTML 元素的事件属性中写 JS 代码，比如 onclick="..."。
这是最简单粗暴的方式，但不推荐在实际项目中使用——HTML 和 JS 混在一起，后期维护是噩梦。
(2) 2. 内部方式（<script> 标签）
在 HTML 文件中插入 <script> 标签，JS 代码写在标签内部。适合代码量较少的页面，是学习和测试阶段最常用的方式。
<script> 标签可以放在 <head> 或 <body> 中，但推荐放在 </body> 之前，这样不会阻塞页面的渲染。
(3) 3. 外部方式（.js 文件）
把 JS 代码写进独立的 .js 文件，再用 <script src="xxx.js"></script> 引入。这是实际项目的标准做法——代码分离、可复用、浏览器还能缓存文件加速加载。
▶ 示例：内联方式引入 JS
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 入门 - 内联方式</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; text-align: center; margin-top: 80px; }
#msg { font-size: 22px; color: #333; }
button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; background: #FF9800; color: #fff; cursor: pointer; }
button:hover { background: #F57C00; }
</style>
</head>
<body>
<p id="msg">点击下面的按钮试试</p>
<button onclick="document.getElementById('msg').textContent='内联 JS 执行成功！'; document.getElementById('msg').style.color='#FF9800';">点我</button>
<p style="margin-top:30px; color:#999; font-size:14px;">👆 这段 JS 直接写在了 onclick 属性里</p>
</body>
</html>
▶ 示例：内部方式引入 JS
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 入门 - 内部方式</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; text-align: center; margin-top: 60px; }
.box { display: inline-block; width: 150px; height: 150px; background: #9C27B0; border-radius: 12px; transition: all 0.4s; line-height: 150px; color: #fff; font-size: 20px; }
.box.round { border-radius: 50%; }
button { display: inline-block; margin: 20px 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
#toggleBtn { background: #9C27B0; }
#resetBtn { background: #999; }
</style>
</head>
<body>
<div class="box" id="shapeBox">方形</div>
<br>
<button id="toggleBtn">切换形状</button>
<button id="resetBtn">重置</button>
<script>
var box = document.getElementById("shapeBox");
var isRound = false;
document.getElementById("toggleBtn").onclick = function() {
isRound = !isRound;
if (isRound) {
box.classList.add("round");
box.textContent = "圆形";
} else {
box.classList.remove("round");
box.textContent = "方形";
}
};
document.getElementById("resetBtn").onclick = function() {
isRound = false;
box.classList.remove("round");
box.textContent = "方形";
};
</script>
</body>
</html>
▶ 示例：外部方式引入 JS
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 入门 - 外部方式</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; text-align: center; margin-top: 60px; }
#counter { font-size: 48px; font-weight: bold; color: #2196F3; }
button { padding: 10px 24px; font-size: 18px; border: none; border-radius: 6px; cursor: pointer; color: #fff; margin: 4px; }
#addBtn { background: #4CAF50; }
#subBtn { background: #f44336; }
#resetCount { background: #999; }
</style>
</head>
<body>
<h2>计数器</h2>
<p id="counter">0</p>
<button id="addBtn">+1</button>
<button id="subBtn">-1</button>
<button id="resetCount">归零</button>
<!-- 实际项目中，下面这段 JS 应该保存在独立的 counter.js 文件中 -->
<!-- <script src="counter.js"></script> -->
<!-- 这里为了方便演示，仍用内部方式模拟 -->
<script>
var count = 0;
var counterEl = document.getElementById("counter");
document.getElementById("addBtn").onclick = function() {
count++;
counterEl.textContent = count;
};
document.getElementById("subBtn").onclick = function() {
count--;
counterEl.textContent = count;
};
document.getElementById("resetCount").onclick = function() {
count = 0;
counterEl.textContent = count;
};
</script>
</body>
</html>
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"，并用不同颜色区分。
