JavaScript: JavaScript 输出
最后更新：2026-10-13
学编程的第一步通常是让程序"说话"——JS 有四种输出方式，各有各的用处。
1. console.log() — 开发者最常用
console.log() 把内容输出到浏览器的控制台（F12 → Console），用户看不到，但开发者调试时离不开它。
这是你日后用得最多的输出方式，没有之一。不管是在排查 bug 还是验证逻辑，console.log() 都是你的好搭档。
alert() 会弹出一个模态对话框，用户必须点击"确定"才能关闭。这会打断用户操作，实际项目中基本不用，只在学习阶段偶尔亮相。
踩坑提醒：调试时别用 alert() 放在循环里，不然你得点几十次确定才能关掉弹窗——别问我怎么知道的。
3. document.write() — 仅测试用
document.write() 直接向 HTML 文档流写入内容。如果页面已经加载完成后再调用它，会覆盖整个页面，这几乎永远不是你想要的。仅在快速测试时偶尔使用。
4. innerHTML — 修改页面内容
innerHTML 是最正规的"输出到页面"的方式——选中一个元素，修改它的 HTML 内容。这是 DOM 操作的基础，后面的课程会深入讲解。
▶ 示例：console.log() 输出到控制台
▶ 试一试▶ 示例：alert() 弹窗输出
▶ 试一试▶ 示例：innerHTML 修改页面内容
▶ 试一试▶ 示例：document.write() 及其危险
▶ 试一试❓ 常见问题
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 模拟效果即可）。
