JavaScript 是什么
这一课你将能做到
- 用自己的话说明 JS 和 HTML/CSS 的分工，并能举出一个「点击后页面变化」的例子
- 在浏览器控制台跑通至少两行代码，并解释
console.log 在调试里的用途
- 分清「语言本身（ECMAScript）」和「浏览器宿主提供的能力」（如
document、alert、fetch）
为什么要学
HTML 搭好结构、CSS 打扮好看之后，页面仍像「静态海报」。
用户一点按钮就要改文字、要提示、要请求数据——这通常靠 JavaScript（简称 JS）。
人话：JS 是让网页「动起来、能响应」的语言。
本站前端 platform、以及几乎所有现代网站交互，都会用到它（或编译成它的 TypeScript）。
不懂 JS，后面学 React、Node 时会一直觉得「别人在说黑话」。
先建立图像
HTML → 有什么（按钮、标题、表单）
CSS → 长什么样（颜色、布局、字体）
JS → 发生什么事（点击后弹窗、改文字、发请求）
还有一个重要区分——同一门语言，换「宿主」就像同一套语法换不同工具箱：
| 概念 | 人话 | 典型能力 |
|---|
| JavaScript / ECMAScript | 语言规则：变量、函数、if、数组… | 在任何宿主里都成立 |
| 浏览器（宿主） | 额外提供页面与网络相关 API | document、alert、fetch、事件 |
| Node.js（宿主） | 在服务器跑 JS | 读文件、起 HTTP 服务等 |
你写的 .js
↓
语言引擎按 ECMAScript 规则执行
↓
需要「改页面 / 读文件」时，再调用宿主提供的 API
跟着做（约 10 分钟）
步骤 1：打开控制台
- 用 Chrome / Edge 打开任意网页（或你后面保存的
js-intro.html）
- 按
F12（或右键 → 检查）→ 点 Console / 控制台
- 这是练 JS 最快的白板：输入一行，回车立即看结果
你应看到一个可输入命令的区域。若面板是空的，说明还没输出；这很正常。
步骤 2：跑第一句与表达式
在控制台输入（回车）：
// 把文字打印到控制台，方便调试（用户正常浏览时通常看不见）
console.log("你好，JS");
你应在控制台看到输出 你好，JS。
再试一行表达式（不必写 console.log）：
1 + 2
控制台会显示 3。说明这里也能当计算器，适合快速验证想法。
步骤 3：分清「语言」和「宿主」
在控制台依次执行：
// 这是语言本身：算术与字符串
const sum = 10 + 5;
console.log("求和结果：", sum);
// 这是浏览器宿主提供的：弹窗（会打断页面，正式产品里少用）
alert("这是浏览器提供的能力，不是语言关键字");
你应先在控制台看到日志，再看到弹窗。
记住：+、const、函数属于语言；、 属于浏览器工具箱。
alert
document
步骤 4：让按钮说话（连上 HTML）
把下面存成 js-intro.html，用浏览器打开（拖进窗口或右键用浏览器打开）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JS 是什么</title>
</head>
<body>
<h1>JS 入门</h1>
<button type="button" id="btn">点我</button>
<p id="out">还没点</p>
<script>
// 找到页面上 id 为 btn / out 的元素（浏览器 DOM API）
const btn = document.getElementById("btn");
const out = document.getElementById("out");
// 当按钮被点击时，执行函数里的代码
btn.addEventListener("click", function () {
out.textContent = "已经点过了（这是 JS 改的文字）";
console.log("点击事件触发了");
});
</script>
</body>
</html>
操作：点击按钮 → 段落文字会变，控制台也会有日志。
你改的是 JS；结构仍是 HTML。若点了没反应，先看控制台有没有红色报错。
步骤 5：故意制造一次报错并读它
// 对「不存在的东西」取属性，会触发 TypeError
const missing = null;
missing.oops;
你应看到红色 TypeError，并指出大致位置。
学 JS 的日常就是：写 → 看报错 → 改。报错不是丢人，是导航仪。
步骤 6：把脚本挪到外部文件（可选但推荐习惯）
// 外部脚本：逻辑与 HTML 分离，便于维护
const btn = document.getElementById("btn");
const out = document.getElementById("out");
btn.addEventListener("click", function () {
out.textContent = "外部 JS 文件也改了文字";
console.log("来自 intro.js");
});
HTML 里把内联 <script>...</script> 换成：
<script src="./intro.js"></script>
刷新后功能应仍然可用。若失败，检查路径是否与 HTML 同目录、控制台是否提示找不到文件。
讲清楚要点
- 因为页面要响应操作，所以需要 JS；HTML/CSS 负责「有什么、长什么样」，JS 负责「发生什么」。
- 因为 ECMAScript 只规定语言规则，所以
document、fetch 等要记成「宿主 API」，换到 Node 时工具箱会变。
- 因为控制台能立刻执行，所以学新语法时先在控制台试一句，再写进文件。
- 因为脚本执行有先后，所以操作按钮的代码通常放在
body 末尾，或等元素出现后再绑定（否则 getElementById 可能得到 null）。
- 因为正式页面要维护，所以习惯把 JS 放到独立
.js 文件，HTML 只负责引入。
- 因为报错会指出文件与行号，所以遇到异常先读控制台第一行，再改代码。
你可能会懵的地方
-
「Java 和 JavaScript 是同一个吗？」
不是。名字像，语言、生态、运行方式都不同。别混。
-
「为什么有的代码写在 head 里按钮找不到？」
脚本执行太早，按钮节点还没出现，getElementById 得到 null，再绑事件就会报错。
怎么办：把 script 放 body 末尾，或使用 defer，或等学完事件后再用更稳妥的「DOM 就绪」写法。
-
「TypeScript 是什么？要现在学吗？」
TS 是带类型检查的 JS 超集，最终仍变成 JS。本站后面有专课；现在先把 JS 跑通、看懂报错。
-
「为什么教程里一会儿浏览器一会儿 Node？」
语言核心相同，宿主不同。入门阶段以浏览器控制台 + 小 HTML 为主即可。
错法对照
| 错法 | 问题 | 正解 |
|---|
| 只看视频从不打开控制台 | 以为会了，一写就懵 | 每课至少敲 3 行并看输出 |
| 用 JS 生成整页标题却无 HTML | 难维护、SEO/无障碍差 | 结构优先 HTML，JS 负责交互 |
| 忽视红色报错乱改 | 越改越远 | 先读报错第一行与行号 |
把 alert 当正式交互 | 打断用户、体验差 | 调试可用；产品用页面上的提示元素 |
| 脚本放太早且不检查 null | 点击无反应或 TypeError | 保证元素已存在再绑定 |
自测三问
- HTML / CSS / JS 各用一句话说明职责？
- 控制台里
console.log 的作用是什么？用户浏览时通常看得到吗？
- 按钮点击后改文字，主要用到浏览器提供的什么能力（而不是语言关键字）？
小结一句话
JS 让页面能响应操作；先在控制台热身，再写进 HTML 的 script 或外部文件，并学会把「语言」和「宿主 API」分开看、把报错当导航仪。
延伸