# 💻 第1b课：让卡片动起来 — JavaScript 交互入门

**目标：** 给上节课的卡片加上 JavaScript，实现点击按钮切换金句
**时长：** 2 小时
**前置：** 第1a课（已经有一张静态卡片）
**成果：** 点击按钮可以随机切换金句的交互页面

---

## 📋 教学流程

| 时间 | 环节 | 内容 |
|------|------|------|
| 0-10min | 📺 导入 | 展示效果 / 上节课的卡片现在能动起来了 |
| 10-30min | 💡 JS 入门 | 变量、数组、函数是什么 |
| 30-50min | 📦 金句数据 | 用 JS 数组存金句 |
| 50-65min | 🔀 随机选取 | Math.random() 用法 |
| 65-85min | 🖱️ 事件绑定 | 按钮点击→换金句 |
| 85-100min | ✨ 小优化 | 简单过渡效果 / 防空白 |
| 100-120min | 🎤 展示 | 分享作品 |

## 🧠 新知识点

### 1. 什么是 JavaScript？

JavaScript（简称 JS）让网页有交互能力：
- 点击按钮 → 执行代码
- 修改页面内容
- 和服务器通信（后面几节课学）

### 2. 变量与数组

```javascript
// 变量 — 存东西的盒子
let name = "小明";

// 数组 — 一列东西
let quotes = [
    "不积跬步，无以至千里",
    "学而不思则罔",
    "想象力比知识更重要"
];

// 取第几个：quotes[0] → "不积跬步..."
//           quotes[1] → "学而不思则罔"
```

### 3. Math.random() 随机数

```javascript
// 随机 0~1 之间的小数
Math.random()   // 0.3, 0.8, 0.12...

// 随机 0~最大长度-1 的整数
let index = Math.floor(Math.random() * quotes.length);
```

### 4. 事件监听

```javascript
// 获取按钮
let btn = document.getElementById('nextBtn');

// 监听点击
btn.addEventListener('click', function() {
    // 点按钮后要执行的代码
});
```

### 5. 修改页面内容

```javascript
// 找到元素，改里面的文字
document.getElementById('quoteText').textContent = "新的金句";
```

## 🚀 学生可以做

- [ ] 加更多金句
- [ ] 加一个「回到上一句」的按钮
- [ ] 加计数器（显示第几句了）
- [ ] 升级 CSS：加渐变色、加动画

## ✅ 这节课结束时的成果

第1a课的卡片现在可以点击按钮换金句了！