# ☁️ 第2课：云上金句 — 调用公网 API

**目标：** 学会用 JavaScript 调用公开 API，获取实时数据
**时长：** 2 小时
**前置：** 第1课（会 JS 操作 DOM）
**文件：** `index.html`（单文件）

---

## 📋 教学流程

| 时间 | 环节 | 内容 |
|------|------|------|
| 0-15min | 📺 导入 | 回顾上节课 / 展示效果：点击按钮从互联网拿金句 |
| 15-35min | 🧠 概念 | 什么是 API？请求→响应 / 餐厅类比 / JSON 格式 |
| 35-55min | 🔍 探索 | 用浏览器直接访问 API 看裸数据 |
| 55-85min | 💻 动手 | 写 fetch() 调用金句 API |
| 85-100min | 🛡️ 进阶 | 错误处理 + 加载状态 |
| 100-120min | 🎤 展示 | 分享 + 自由发挥 |

## 🧠 知识点

### 1. 什么是 API（生活中的类比）

```
你（前端）          服务员（API）          厨房（服务器）
   │                    │                      │
   │── "我想吃炒饭" ───→│                      │
   │                    │── "做一份炒饭" ─────→│
   │                    │←── "炒饭做好了" ─────│
   │←── "你的炒饭" ────│                      │
```

**API 就是那个服务员** — 你告诉它你要什么，它帮你搞定，把结果端给你。

### 2. JSON 是什么

```json
{
  "quote": "不积跬步，无以至千里",
  "author": "荀子"
}
```
就像 Python 的字典 / Arduino 的结构体 — 键值对！

### 3. fetch() 调用 API

```javascript
// 最简单的调用
async function getQuote() {
    const response = await fetch('https://api.xxxx.com/random');
    const data = await response.json();
    console.log(data);    // 看看拿回来什么
}
```

### 4. 这节课用的免费 API

我们用 **https://api.quotable.io/random**（无需注册、无需 Key）

访问它试试 → https://api.quotable.io/random

## 🚀 学生可以做

- [ ] 换不同的 API（天气、笑话、名言）
- [ ] 加加载动画（转圈圈）
- [ ] 加「API 挂了」的错误提示
- [ ] 加手动刷新按钮

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

点一下按钮，从互联网上拿到一句金句并显示在卡片上。