JavaScript: JavaScript 输出
学编程的第一步通常是让程序"说话"——JS 有四种输出方式，各有各的用处。
1. console.log() — 开发者最常用
console.log() 把内容输出到浏览器的控制台（F12 → Console），用户看不到，但开发者调试时离不开它。
这是你日后用得最多的输出方式，没有之一。不管是在排查 bug 还是验证逻辑，console.log() 都是你的好搭档。
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。## 2. alert() — 弹窗，慎用
alert() 会弹出一个模态对话框，用户必须点击"确定"才能关闭。这会打断用户操作，实际项目中基本不用，只在学习阶段偶尔亮相。
踩坑提醒：调试时别用 alert() 放在循环里，不然你得点几十次确定才能关掉弹窗——别问我怎么知道的。
3. document.write() — 仅测试用
document.write() 直接向 HTML 文档流写入内容。如果页面已经加载完成后再调用它，会覆盖整个页面，这几乎永远不是你想要的。仅在快速测试时偶尔使用。
4. innerHTML — 修改页面内容
innerHTML 是最正规的"输出到页面"的方式——选中一个元素，修改它的 HTML 内容。这是 DOM 操作的基础，后面的课程会深入讲解。
▶ 示例：console.log() 输出到控制台
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 输出 - console.log</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; text-align: center; margin-top: 80px; }
.tip { background: #e3f2fd; padding: 16px; border-radius: 8px; display: inline-block; color: #1565C0; }
#output { margin-top: 20px; font-size: 18px; color: #333; white-space: pre-line; }
button { margin-top: 16px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; background: #2196F3; color: #fff; cursor: pointer; }
button:hover { background: #1976D2; }
</style>
</head>
<body>
<p class="tip">📌 按 F12 打开控制台查看 console.log 输出</p>
<button id="logBtn">点击输出到控制台</button>
<p id="output"></p>
<script>
document.getElementById("logBtn").onclick = function() {
console.log("你好，控制台！");
console.log("当前时间：" + new Date().toLocaleString());
console.log("1 + 2 =", 1 + 2);
var outputEl = document.getElementById("output");
outputEl.textContent = "已输出3条信息到控制台，按F12查看！";
outputEl.style.color = "#4CAF50";
};
</script>
</body>
</html>
▶ 示例：alert() 弹窗输出
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 输出 - alert</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; text-align: center; margin-top: 80px; }
.warn { background: #fff3e0; padding: 14px; border-radius: 8px; display: inline-block; color: #E65100; margin-bottom: 20px; }
button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; margin: 6px; }
#alertBtn { background: #FF9800; }
#safeAlertBtn { background: #4CAF50; }
</style>
</head>
<body>
<p class="warn">⚠️ alert() 会弹窗阻断操作，实际项目中避免使用</p>
<br>
<button id="alertBtn">弹出 alert</button>
<button id="safeAlertBtn">页面内提示（推荐）</button>
<p id="msg" style="margin-top:20px; font-size:20px; color:#4CAF50;"></p>
<script>
document.getElementById("alertBtn").onclick = function() {
alert("这是 alert 弹窗！你得点确定才能继续操作。");
};
document.getElementById("safeAlertBtn").onclick = function() {
document.getElementById("msg").textContent = "这是页面内提示，不打断操作，体验好多了！";
};
</script>
</body>
</html>
▶ 示例：innerHTML 修改页面内容
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 输出 - innerHTML</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
#content { min-height: 80px; padding: 20px; border: 2px dashed #ccc; border-radius: 8px; font-size: 18px; color: #666; }
button { margin: 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
#textBtn { background: #9C27B0; }
#htmlBtn { background: #e91e63; }
#clearBtn { background: #999; }
</style>
</head>
<body>
<h2>innerHTML 输出</h2>
<div id="content">这里将显示 JS 输出的内容</div>
<button id="textBtn">输出文字</button>
<button id="htmlBtn">输出 HTML</button>
<button id="clearBtn">清空</button>
<script>
var contentEl = document.getElementById("content");
document.getElementById("textBtn").onclick = function() {
contentEl.innerHTML = "这是一段纯文字输出";
contentEl.style.color = "#9C27B0";
};
document.getElementById("htmlBtn").onclick = function() {
contentEl.innerHTML = "<strong style='color:#e91e63;'>加粗文字</strong> 和 <em>斜体文字</em>，innerHTML 可以识别 HTML 标签";
contentEl.style.color = "#333";
};
document.getElementById("clearBtn").onclick = function() {
contentEl.innerHTML = "";
contentEl.style.color = "#666";
};
</script>
</body>
</html>
▶ 示例：document.write() 及其危险
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 输出 - document.write</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
.danger { background: #ffebee; padding: 14px; border-radius: 8px; color: #c62828; margin-bottom: 20px; }
button { margin: 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
#safeBtn { background: #4CAF50; }
#dangerBtn { background: #f44336; }
</style>
</head>
<body>
<p class="danger">⚠️ 页面加载后调用 document.write() 会覆盖整个页面！点击红色按钮体验（刷新页面可恢复）</p>
<button id="safeBtn">安全输出（innerHTML）</button>
<button id="dangerBtn">危险输出（document.write）</button>
<p id="safeOutput" style="margin-top:20px; font-size:18px; color:#4CAF50;"></p>
<script>
document.getElementById("safeBtn").onclick = function() {
document.getElementById("safeOutput").textContent = "这是用 innerHTML 输出的，页面完好无损！";
};
document.getElementById("dangerBtn").onclick = function() {
document.write("<h1 style='text-align:center; color:red; margin-top:100px;'>整个页面被覆盖了！</h1><p style='text-align:center;'>这就是 document.write() 的危险之处，刷新页面可恢复</p>");
};
</script>
</body>
</html>
❓ 常见问题
Q console.log() 用户能看到吗？
A 看不到，它输出到开发者工具的控制台里。就像后台的仪表盘——司机看不到，但技师修车时全靠它。所以千万不要把重要信息只输出到 console，用户是看不到的。
Q innerHTML 和 textContent 有什么区别？
A
innerHTML 会解析 HTML 标签，textContent 只当纯文本。比如设置 <strong>加粗</strong>，innerHTML 显示加粗效果，textContent 显示原始标签文字。如果只是改文字，用 textContent 更安全——不会意外执行注入的脚本。Q 为什么 alert() 不推荐用？
A 因为它会冻结页面，用户必须先关掉弹窗才能继续操作。想象你正在填表，每填一项就弹一次窗——体验有多糟糕可想而知。
📖 小节
console.log()是开发调试的主力，输出到控制台，用户看不到alert()弹窗阻断操作，仅学习阶段使用，项目里别碰document.write()页面加载后调用会覆盖整个页面，只适合早期测试innerHTML是最标准的页面输出方式，能识别 HTML 标签- 实际开发中 99% 的情况用
console.log()调试 +innerHTML更新页面 - 四种方式各有场景，选对了事半功倍，选错了事倍功半
📝 作业
- 基础题：创建一个页面，包含一个按钮，点击后用
console.log()输出你的名字和年龄。 - 进阶题：创建一个页面，用
innerHTML输出一个无序列表（至少3项），每项是一种你学过的编程语言。 - 挑战题：创建一个"输出方式对比"页面，四个按钮分别对应四种输出方式，点击后在页面同一个区域显示该方式的说明文字（不用 alert 和 document.write，用 innerHTML 模拟效果即可）。
