单元八 · JavaScript 基础

让页面「活」起来。本单元对应教材单元八（10 学时）：语言基础、函数、事件驱动、对象、BOM 与 DOM；最后用这些做一个「商品精选模块 + 焦点图广告」——这是把前七章串起来的第一个完整交互组件，也为 Python Web 课的 Vue 打底。

一、知识准备：JS 是页面的「神经系统」

生活类比：餐厅服务员

HTML 是餐厅的「硬装」（桌椅），CSS 是「装修」（配色），JS 是「服务员」——顾客（用户）一点按钮（事件），服务员就跑后厨（DOM）改菜、换音乐、切页面。事件驱动就是「等用户做了什么，才做什么」。

变量/函数：let x=1; function add(a,b){return a+b;}——和 Python 不同，JS 用 let/const，函数是一等公民。

DOM：把页面当成「节点树」，getElementById / querySelector 找节点，innerHTML / style / classList 改它。

事件：onclick 或 addEventListener('click', fn) 监听用户动作。

BOM：window 对象，管地址栏(location)、定时器(setInterval)、弹窗等。

二、实战演练：焦点图轮播

文件： u8/slider.html（含 3 张图自动切换）

slider.html（脚本部分）

let idx = 0;
const slides = document.querySelectorAll('.slide');
function show(i){
  slides.forEach(s => s.style.display='none');
  slides[i].style.display='block';
}
setInterval(() => {            // 每 3 秒切下一张
  idx = (idx + 1) % slides.length;
  show(idx);
}, 3000);
show(0);

效果预览运行结果

效果：3 张图每 3 秒自动轮播。setInterval（BOM 定时器）是焦点图/广告的核心。

故意写错：把脚本写在 <head> 且没等 DOM 加载——document.querySelectorAll 拿到空列表。教训：JS 操作 DOM 必须等元素存在（放 <body> 末尾，或用 DOMContentLoaded）。

三、强化训练

1为什么 JS 放在 <head> 里却找不到元素？两种解决办法是什么？

2addEventListener 和 onclick 哪个能绑多个处理函数？为什么推荐前者？

3轮播图里 idx = (idx+1) % len 这行为什么用了取余？

四、课后实训

作业：做 shop.html：一个焦点图（3 图轮播 + 左右箭头手动切）+ 一个「商品精选」横向卡片列表（数据用 JS 数组渲染，点击卡片弹 alert 显示价格）。

单元八 · JavaScript 基础

一、知识准备：JS 是页面的「神经系统」

生活类比：餐厅服务员

二、实战演练：焦点图轮播

三、强化训练

四、课后实训

本单元小结

📝 本节自测