JavaScript 的作用与运行环境

上一部分完成了学员管理后台的静态页面，但表格人数和平均分仍是手写数字。修改学员成绩后，怎样让程序重新计算平均分？新增学员后，又怎样根据数据更新人数？

HTML 描述内容，CSS 控制视觉，JavaScript 负责计算、状态与交互。本节先在 Console 中完成一次成绩计算，观察数据变化后结果怎样变化；本部分后续再用数组、循环和函数处理多名学员。把计算结果写到页面、响应用户操作，放在 p04。

学员数据的首次计算

打开浏览器开发者工具的 Console（控制台），输入下面的代码。Console 可以直接运行短片段，并显示输出和错误；下一节再把程序保存为独立 .js 文件。

const courseName = "FastAPI Web 全栈";
const studentCount = 28;

console.log(courseName);
console.log("当前学员人数：", studentCount);

这里的 const 给数据命名，console.log() 输出结果。修改 studentCount 后重新运行这一小段，观察人数输出随之改变。这仍然是手动修改一个数字；等学完数组，再从学员数据中计算人数。

再计算三名学员的平均分：

const totalScore = 86 + 72 + 93;
const averageScore = totalScore / 3;

console.log("总分：", totalScore);     // 251
console.log("平均分：", averageScore); // 83.66666666666667

这里先直接写出三个成绩，观察“输入成绩 → 计算总分 → 得到平均分”。把其中一个成绩改为 100 后重新运行这段，检查总分与平均分怎样变化。学员人数变动时，后续再用数组和循环代替手写的 3 与三个成绩。

在整个前端课程中，JavaScript 还会读取页面、响应事件、保存少量本地数据，以及调用测试 API。p03 只处理数据并在 Console 输出；p04 再接上页面与网络请求。

语言能力与浏览器 Web API

浏览器中的 JavaScript 程序同时用到语言本身和运行环境提供的接口：

计算平均分主要使用语言能力；将结果写入学员卡片时，还要使用浏览器提供的 DOM 接口。

ECMAScript 语言能力

ECMAScript 规定 JavaScript 的核心语法和语言能力，各运行环境在此基础上提供自己的 API。

相关分类可参看 MDN：JavaScript 技术概览。

补充：早期实现名称

下面的旧图展示早期实现名称 JavaScript 与 JScript。它只用于认识历史称呼；语言与 Web API 的技术边界以前面的主图为准。

变量、数据类型、运算符、流程控制、函数、数组、对象、Map、Set 和 async/await 都属于 ECMAScript 语言体系。

下面只预览语言能完成的任务：从三个成绩中保留不低于 80 分的成绩。数组、filter() 和箭头函数会在后续章节学习，现在只需要观察输入与输出。

const scores = [86, 92, 78];
const passedScores = scores.filter((score) => score >= 80);

console.log(passedScores);

输出为 [86, 92]，原始成绩仍然保留。

浏览器 Web API

document、DOM 事件、localStorage 和 fetch 是本课程在浏览器环境中使用的 Web API，不是 ECMAScript 核心语法。某些 API 在其他运行环境中也可能可用，能否使用要看实际环境。

本课程把 async/await 放在 p04 的异步页面任务中学习，再进入 fetch 请求。async/await 属于 JavaScript 语言语法，fetch 属于运行环境提供的 Web API。

DOM：文档对象模型

下面的浏览器 API 只用于认识职责边界，本节不要求执行；它们依赖当前页面或测试服务。

DOM（Document Object Model，文档对象模型）提供查询和操作页面元素的接口。

document.querySelector("h1");

其他浏览器能力

浏览器还提供窗口、地址、存储与网络请求能力。有些资料把与窗口有关的一组接口称为 BOM（浏览器对象模型）；本课在 p04 按实际任务学习，不用这个称呼给所有 Web API 分类。以下代码只用于识别用途，本节不执行：

localStorage.setItem("theme", "dark");
fetch("http://127.0.0.1:8000/api/students");

浏览器与 Node.js

JavaScript 可以运行在浏览器、Node.js 等环境中。不同环境提供的额外 API 不完全相同：

• 浏览器通常提供 window、document、存储和网络请求能力。
• Node.js 提供服务器端与文件系统等能力。
• ECMAScript 语法在这些环境中具有共同基础。

本部分的示例在浏览器中运行。本课程聚焦浏览器端 JavaScript，不讲 Node.js 后端开发。

数据类型与表达式

动态类型

JavaScript 变量保存的值具有类型，变量本身不固定为某一种类型：

let result = 86;
console.log(typeof result); // number

result = "优秀";
console.log(typeof result); // string

同一个变量可以先保存数字、后保存字符串。这种灵活性也可能隐藏计算错误；p03c03 会学习类型转换与验证，本节只观察 typeof 的输出。

值、表达式与语句

回看前面的 const averageScore = totalScore / 3;：3 是一个值，totalScore / 3 是会产生结果的表达式，整行是把结果保存到变量的声明语句。单独写 42; 也是表达式语句，不需要把它当作另一种语法背下来。现在只需分清输入、计算和输出。

Console 运行与排错

变量名大小写错误

JavaScript 区分大小写。先在 Console 运行这两行，观察第二行的报错：

const studentName = "张三";
console.log(studentname);

Console 会提示 ReferenceError，并指出 studentname 没有定义。对照上一行，发现变量名是 studentName，把第二行改为 console.log(studentName); 再运行，就会输出“张三”。修正时只需重新运行输出语句，不要再次声明同名的 const。

英文引号、括号和运算符也要正确配对。课程约定变量和函数使用小驼峰命名，字符串使用双引号，完整语句末尾保留分号；命名规则与其他写法在下一节展开。

运行与排错习惯

1. 每段代码都亲自运行，并修改一两个值；修改后重新运行本段，核对新输出。
2. 报错时先看类型和位置，再对照变量名、大小写与标点。
3. 用 console.log() 打印中间结果，例如总分，再检查最终平均分。
4. 先写清楚输入、计算和输出，优先保证代码可读。

后续课件中的短片段按小节单独练习；需要接着上一段运行时，正文会明确说明。不要把整章所有片段一次粘贴进同一个文件，因为不同例子可能重复声明同名变量。

本部分学习路线

阶段	要解决的问题
加载与变量	怎样保存并反复运行学员数据程序
类型与运算	输入的成绩怎样才能参与可靠计算
条件与循环	怎样判断成绩等级并批量处理学员
数组与对象	怎样组织多名学员及其字段
函数与回调	怎样复用同一套处理流程
现代语法与数组方法	怎样清楚地表达查询、筛选和转换
综合案例	怎样得到可供页面使用的查询与统计结果

练习与验收

1. 把第一段程序中的人数改为 29，确认 Console 显示的人数为 29。
2. 把三名学员的成绩改为 60、80、100，确认总分为 240、平均分为 80。
3. 运行大小写错误示例，指出 Console 中的错误类型和拼写差异，再输出正确姓名。
4. 说明“计算平均分”和“把平均分写入页面”分别属于本部分和下一部分的哪项任务。

能够指出输入、计算过程和输出结果，就完成了本节目标。下一节把程序保存到文件，避免每次在 Console 中重新输入。

小结

1. Console 能运行短程序，显示人数、总分和平均分，也能指出拼写错误。
2. 当前先用变量和表达式计算数据；之后再从学员数组统计，并把结果显示到页面。
3. ECMAScript 定义语言能力；浏览器 Web API 提供 DOM、存储和请求等接口。