module 04 · javascript 基础 · 第 25–32 课

模块04
JavaScript 基础

目标一句话:掌握编程基础,能独立写函数处理数据 —— 这是学生第一次真正「写程序」。

1 课入门:JS 能做什么 · 引入方式与 defer · 读报错
3 课语法基础:变量与类型 · 运算符与流程 · 循环与数组
1 课最重要的一课:函数 —— 参数、作用域、闭包初识、回调
2 课数据组织:对象与 JSON · 内置对象与常用 API
1 课阶段实战:控制台版「班级成绩管理器」

// module 04

模块四 · JavaScript 基础 · 第 25–32 课

25JavaScript 入门引入方式 / console
26变量与数据类型let / const / typeof
27运算符与流程控制if / switch / 真值
28循环与数组for / 数组方法
29函数参数 / 作用域 / 闭包
30对象与 JSON对象数组 / JSON
31内置对象与常用 APIString / Math / Date
32阶段实战四:班级成绩管理器控制台小工具

// 模块四 · 第 25 课

JavaScript 入门

讲授 · 25 min

  • 三件套分工:HTML 结构 · CSS 表现 · JS 行为
  • JS 在浏览器里能做什么(改 DOM / 发请求 / 存数据)
  • 三种引入方式与 defer · 注释写法
  • console.log 调试法 · 如何读报错信息

练习 · 15 min

新建 main.js,用 console 输出 10 行信息(其中至少 4 行是变量计算的结果),并在 DevTools 中查看、清空。

验收:脚本被正确引入;Console 无报错;能说出报错信息里的行号指的是哪一行。

// 模块四 · 第 26 课

变量与数据类型

讲授 · 25 min

  • let / const / var 的区别(块级作用域、重复声明)
  • 基本类型:number / string / boolean / null / undefined / object(+ symbol)
  • typeof 与显式、隐式类型转换
  • 模板字符串 `${}` · 命名规范(小驼峰)

练习 · 15 min

写 10 行代码声明各类变量并打印类型;故意做一次字符串加数字的运算,写下并解释结果。

验收:能解释 '1' + 1 = '11';知道什么时候该用 const;变量名可读。

默认用 const,需要重新赋值时再用 let,不要用 var。

// 模块四 · 第 27 课

运算符与流程控制

讲授 · 25 min

  • 算术 / 赋值 / 自增自减运算符
  • 比较运算符:== 与 === 的区别(强推 ===)
  • 逻辑运算符与短路求值(&& || 的取值技巧)· 三元运算符
  • if / else if / else · switch 与穿透 · 真假值

练习 · 15 min

完成两个小程序:① 成绩等级判断(90+ 优 / 80+ 良 / 60+ 及格 / 否则不及格)② 登录权限判断(用三元运算符和 if 各写一次)。

验收:使用 === 而不是 ==;能说出哪些值会被判为假。

// 模块四 · 第 28 课

循环与数组

讲授 · 25 min

  • for 三段式与执行顺序 · while / do-while · for...of
  • break / continue
  • 数组:定义、下标(从 0 开始)、length 与越界
  • 常用方法:push / pop / shift / unshift / slice / splice / indexOf / includes / join

练习 · 15 min

① 用嵌套循环打印九九乘法表;② 实现数组的增、删、改、查四个操作,每做一步都打印当前数组。

验收:能说出 slice 与 splice 的区别(是否改原数组);不会写出越界循环。

// 模块四 · 第 29 课

函数

讲授 · 25 min

  • 函数声明 / 函数表达式 / 箭头函数
  • 参数与返回值(没有 return 就返回 undefined)
  • 默认参数 · 剩余参数 ...rest
  • 作用域与局部 / 全局变量 · 闭包初识 · 回调函数

练习 · 15 min

把第 28 课的数组操作封装成 4 个函数;再写一个带回调的 forEachLike(arr, fn) 函数并验证效果。

验收:每个函数职责单一、命名清晰;理解"封装是为了不用复制粘贴"。

这节课的核心价值:让学生学会「把重复的代码打包成一个名字」。

// 模块四 · 第 30 课

对象与 JSON

讲授 · 25 min

  • 对象字面量与键值对 · 点访问与方括号访问
  • 对象里的方法 · this 指向初识
  • 遍历:for...in / Object.keys / entries · 对象数组
  • JSON 语法 · JSON.stringify / JSON.parse · 浅拷贝与深拷贝

练习 · 15 min

用对象描述 3 个学生(姓名、成绩数组),输出平均分、最高分,并按总分从高到低排序打印。

验收:能说清点访问和方括号访问各自的适用场景;知道 JSON 的键必须用双引号。

// 模块四 · 第 31 课

内置对象与常用 API

讲授 · 25 min

  • String:trim / slice / split / replace / includes / padStart
  • Math:round / floor / ceil / random 与随机整数区间公式
  • Date 与时间戳 · toLocaleString 格式化
  • Number(toFixed / parseInt)· 数组高阶方法初识(map / filter / reduce / sort)· try/catch

练习 · 15 min

写三个小工具:① 把日期格式化成 YYYY-MM-DD;② 随机点名(从数组里随机取一个);③ 按条件过滤数组(如分数大于 80 的)。

验收:随机点名能取到区间两端;能用比较函数把 [10, 2, 1] 正确排序。

// 模块四 · 第 32 课 · 阶段实战

阶段实战四 · 班级成绩管理器

课堂流程 · 45 min

  • 5′ 需求与数据结构设计(学生对象数组)
  • 30′ 编码:录入 / 统计平均最高最低 / 按分数排序 / 按姓名查询
  • 8′ 边界测试:空数组、非数字输入、重名
  • 2′ 讲评与代码走查

验收标准

  • 四个功能全部实现,控制台输出清晰
  • 函数职责单一、命名可读(如 getAverage)
  • 非数字输入有处理,不出现 NaN
  • 至少使用一次 map / filter / reduce

注意:这节课故意不做界面。下一模块我们会把这份「数据层」搬到页面上。

// module 04 · summary

本模块交付物 · 控制台成绩管理器

交付物

  • main.js —— 控制台程序,不依赖界面
  • 学生对象数组数据结构({ name, score })
  • 函数拆分:录入 / 统计 / 排序 / 查询

验收标准

  • 四个功能全部实现,控制台输出清晰
  • 函数职责单一、命名可读(如 getAverage)
  • 非数字输入有处理,不出现 NaN
  • 至少使用一次 map / filter / reduce

这个模块只解决「数据怎么处理」,界面留给下一模块。等学生看到 DOM 只是「把算好的结果显示出来」,畏难情绪会小很多。

S 演讲者视图 · T 切换主题 · ← → 翻页 · F 全屏 · O 总览 · R 重置计时