JavaScript 是什么

这是什么：JavaScript（JS） = 运行在浏览器里的编程语言，负责网页的一切行为：点击弹窗、输入校验、轮播播放。

为什么用：上一板块我们用 HTML 教程 搭好了网页的骨架，但它只是"安静地躺着"。想让点一下就有反应，缺的就是 JS。

如何用：先用 <script> 标签把一句 console.log() 塞进页面，再按 F12 打开控制台看输出。

一句话解释

JavaScript（简称 JS）是运行在浏览器里的编程语言，负责网页的一切"行为"：点击按钮弹提示、输入框实时校验、轮播图自动播放……都是它的活儿。

前端三件套分工明确：

第一段 JS：<script> 标签

HTML 本身不认识 JS 代码，得靠 <script> 标签"引荐"。常见三种用法：

<!-- 用法一：写在标签属性里（最简交互） -->
<button onclick="alert('你好！')">点我</button>

<!-- 用法二：写在网页里（内部脚本） -->
<script>
  console.log('页面加载好了')
</script>

<!-- 用法三：引外部文件（正式项目最常用），src 里写网上公开的脚本地址；下面引用的是公共 CDN 上的 jQuery（后面教程会细讲） -->
<script src='https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js'></script>

「你会看到」：用法一点按钮会弹出"你好！"的弹窗；用法二在控制台打印一句话；用法三去下载 src 指向的那个公开脚本，把里面的代码拿到页面里执行。

怎么看输出：F12 控制台

学语法阶段，我们不搭网页，直接和浏览器对话。在任意页面按 F12（Mac 用 Option + Command + I），切到 Console（控制台） 标签，输入：

console.log('你好，控制台！')
console.log(1 + 1)

「你会看到」每行回车后，控制台立刻打印：

你好，控制台！
2

console.log() 就是 JS 的"打印嘴"——把括号里的东西显示出来。本板块前 3 章的代码都在这里跑，不用装任何软件，这就是我们的主要调试方式。

记忆口诀：HTML 管骨架，CSS 管皮肤，JS 管灵魂；想看输出，F12。

❓ 常见问题

Q1：在控制台输入 console.log('你好) 回车，报 Uncaught SyntaxError: Invalid or unexpected token？

原因：引号没配对——只有开头那个 '，没有收尾的 '，JS 找到行尾也没等到"台词结束"的信号，直接罢工。

Uncaught SyntaxError: Invalid or unexpected token

修复三步：① 看报错信息右边的行号，跳到那一行；② 从左往右数引号，必须成双成对；③ 补上结尾的 '，变成 console.log('你好') 再回车。 举一反三：凡见 SyntaxError 都是"语法不合规矩"，九成是标点问题——引号、括号丢了，或用了中文标点。它是 JS 新手期出勤率最高的报错。

Q2：输入 console.log(你好) 报 Uncaught ReferenceError: 你好 is not defined？

原因：不带引号的"你好"，JS 不当它是文字，而当成一个名字去找——但它从没见过这个名字，只好报"未定义"。

Uncaught ReferenceError: 你好 is not defined

修复三步：① 回到报错那一行；② 想打印的是文字，就给它穿上引号：console.log('你好')；③ 想打印的真是某个变量（下一章学），就先定义再使用。 举一反三：ReferenceError 十有八九是"名字没定义"或"拼错了"，学到变量后会天天见它，现在先混个脸熟。

Q3：alert('你好！') 明明一字不差，为什么不弹窗还报错？

原因：多半是标点被输入法"汉化"了——中文括号 （）、中文引号 ''，长得像但 JS 一个都不认识。

Uncaught SyntaxError: Invalid or unexpected token

修复三步：① 把输入法切回英文；② 逐个检查 (、)、'、; 是不是英文半角符号；③ 代码里的文字内容（如"你好！"）用中文没问题，但代码符号必须全英文。 举一反三：新手期"代码看着一模一样却报错"，八成是中英文标点混入——查符号比查字母更重要。

Q4：F12 按了没反应，控制台打不开？

原因：不少笔记本 F 键默认是亮度、音量这些功能键，F12 被 Fn 键"压住"了。 修复三步：① 试 Fn + F12；② 不行就右键页面空白处 → 选"检查"（Inspect）；③ Mac 用 Option + Command + I。 举一反三：控制台是前端的主战场，本板块前几章天天要用，建议现在就把它"焊"在手上。

Q5：控制台滚了一屏旧代码，眼花缭乱想清空？

原因：Console 是流水账，每次输入都往下追加，越滚越长。 修复三步：① 输入 console.clear() 回车，一秒清爽；② 或按 Ctrl + L（Mac 用 Command + K）；③ 点控制台左上角的 🚫 图标也能一键清屏。 举一反三：写代码嫌乱就清屏，跟收拾桌面一个道理——放心，清掉的只是显示，之前跑过的结果不受影响。

⚠️ 新手翻车现场

翻车一：中文括号，Console 现场抓包

console.log（'你好，控制台'）

完整报错：

Uncaught SyntaxError: Invalid or unexpected token

逐行分析：整行只有一句代码，却全军覆没——错在第 1 行开头的 （。这是中文全角括号，比英文 ( 宽一圈，肉眼几乎看不出，但 JS 的语法检查器一眼识破，拒绝解析整行。

正确写法：

console.log('你好，控制台')

翻车二：引号只开不关，"台词"说不完

console.log('蛙鸣一声)
console.log('蛙鸣两声')

完整报错：

Uncaught SyntaxError: Invalid or unexpected token

逐行分析：错在第 1 行——'蛙鸣一声 只有开头引号没有结尾引号，JS 一路找到行尾也没等到"台词结束"，报语法错。注意：第 2 行本身没写错，但 JS 报错经常"一锅端"，修好第 1 行它才能继续往下看。

正确写法：

console.log('蛙鸣一声')
console.log('蛙鸣两声')

翻车三：把"台词"当"名字"使唤

console.log(呱)

完整报错：

Uncaught ReferenceError: 呱 is not defined

逐行分析：错在第 1 行的 呱——没穿引号，JS 就不当它是文字，而是当成一个名字去通讯录里找。找遍全页没人叫"呱"，于是报"未定义"。记住：引号里的永远是台词，引号外的才是名字（下一章的"变量"就是名字）。

正确写法：

console.log('呱')

📦 完整小示例

综合本节所学，在控制台打一张"蛙界名片"，顺便让浏览器客串计算器：

// 打印名片头部
console.log('===== 呱小吉的名片 =====')
console.log('物种：青蛙')
console.log('绝活：让网页动起来')

// 浏览器是台免费计算器，直接算给它看
console.log('一天有几分钟：', 60 * 24)
console.log('一年有多少小时：', 365 * 24)
console.log('跟我倒数，一起呱：')
console.log(3)
console.log(2)
console.log(1)
console.log('呱！呱！呱！')

你会看到：

===== 呱小吉的名片 =====
物种：青蛙
绝活：让网页动起来
一天有几分钟： 1440
一年有多少小时： 8760
跟我倒数，一起呱：
3
2
1
呱！呱！呱！

逐段中文精讲

• 第 1~4 行（名片区）：每个 console.log 负责打一行；// 开头的是注释，写给人看，浏览器直接跳过——和 Python 里的 # 一个意思。
• 第 7~8 行（计算区）：console.log('一天有几分钟：', 60 * 24) 用逗号一次送进两样东西：一段文字和一个算式。浏览器先算出 60 * 24 = 1440，再把文字和数字并排打出来——逗号就是"一次打多件"的意思。
• 第 9 行（提示语）：先打一句"跟我倒数"，让人知道下面要发生什么——好的输出会"预告剧情"。
• 第 10~12 行（倒计时）：三行 console.log 各打一个数字。看着笨，但直白——新手阶段，直白比炫技重要。
• 第 13 行（收尾）：台词随便写，带感叹号更有仪式感。

跑通后做个小实验：把 365 * 24 改成 365 * 24 * 60，让浏览器算一年有多少分钟；再在名片区加一行 console.log('住址：荷叶池塘 1 号')，看看新名片长什么样。

🎯 什么时候用它

• 检查 JS 到底跑没跑：网页"点了没反应"时，第一反应就是在关键位置塞一行 console.log('我执行到这里了')——控制台打了它，说明代码活着；没打，说明压根没执行到（比如 <script> 标签写错、引错文件）。这是前端排障的第一板斧。
• 临时算个数：购物满 300 减 50、一年工资到手多少、视频时长换算成分钟——不用开计算器 App，F12 敲个算式回车就行。
• alert 做极简提醒：自己写的小工具页，点按钮弹个"已保存！"确认一下。不过 alert 会打断操作，正式项目里更多用页面内提示，学习阶段拿它练手最方便。

📝 本章小结

• JS 是运行在浏览器里的编程语言，管网页的一切行为；HTML 管结构，CSS 管样式，三件套各司其职。
• 让浏览器执行 JS 有三条路：标签属性里（onclick）、页内 <script>、外部文件 <script src>——正式项目用第三种。
• 学语法阶段不用搭网页：按 F12 打开控制台，console.log() 就是 JS 的"打印嘴"。
• 代码符号（引号、括号）必须英文半角、引号要成对；不带引号的内容会被当成"名字"去查找，找不到就报 ReferenceError。
• 记忆锚点：网页是只青蛙——HTML 是骨头，CSS 是皮，JS 是让它跳起来的神经；控制台就是你俩之间的对讲机。

动手改

1. 在控制台输入 console.log('我的第一句 JS')，回车看结果
2. 直接输算式 365 * 24，让浏览器替你算一年有多少小时
3. 把"用法一"的代码存成 .html 文件用浏览器打开，点按钮体验 alert 弹窗

下一章：变量与数据类型，让程序学会"记住"东西 🐸