# JavaScript = 网页的编程语言
# HTML → 骨架（结构）
# CSS  → 皮肤（样式）
# JS   → 肌肉（交互）

# JS 能做什么？
# - 点击按钮弹出提示
# - 表单验证（不刷新页面）
# - 动态加载数据（AJAX）
# - 动画效果
# - 单页应用（React/Vue）
# - 服务端开发（Node.js）

<!-- 在 HTML 中引入 JS -->
<!-- 方式1：内部脚本 -->
<script>
    console.log('Hello, JavaScript!');
</script>

<!-- 方式2：外部脚本（推荐） -->
<script src="main.js"></script>

// 变量声明（ES6+ 推荐用 let 和 const）
let name = 'Alice';     // 可变变量
const PI = 3.14159;     // 不可变常量
var age = 25;           // 旧语法（不推荐）

// 数据类型
let str = 'Hello';         // 字符串
let num = 42;              // 数字（整数和小数不分）
let bool = true;           // 布尔
let nothing = null;        // 空值
let undef = undefined;     // 未定义
let arr = [1, 2, 3];      // 数组
let obj = {name: 'Alice', age: 25};  // 对象

// 类型检查
typeof str;    // 'string'
typeof num;    // 'number'
typeof arr;    // 'object'（数组也是对象！）
Array.isArray(arr);  // true

// 字符串模板（反引号）
let greeting = `Hello, ${name}! You are ${age} years old.`;

// 函数声明
function greet(name) {
    return `Hello, ${name}!`;
}

// 箭头函数（ES6+，推荐）
const greet = (name) => `Hello, ${name}!`;

// 默认参数
const greet = (name = 'World') => `Hello, ${name}!`;

// 多行箭头函数
const calculate = (a, b) => {
    let sum = a + b;
    let product = a * b;
    return { sum, product };
};

// 调用
greet('Alice');       // 'Hello, Alice!'
greet();              // 'Hello, World!'
calculate(3, 4);      // { sum: 7, product: 12 }

let nums = [1, 2, 3, 4, 5];

// map — 映射（Python: 列表推导式）
nums.map(x => x * 2);         // [2, 4, 6, 8, 10]

// filter — 过滤（Python: 列表推导式 + if）
nums.filter(x => x > 3);      // [4, 5]

// reduce — 归纳（Python: functools.reduce）
nums.reduce((acc, x) => acc + x, 0);  // 15

// find — 查找第一个匹配
nums.find(x => x > 3);        // 4

// forEach — 遍历（Python: for 循环）
nums.forEach(x => console.log(x));

// includes — 包含（Python: in）
nums.includes(3);              // true

// sort — 排序
[3, 1, 4, 1, 5].sort((a, b) => a - b);  // [1, 1, 3, 4, 5]

// 条件判断
if (score >= 90) {
    console.log('优秀');
} else if (score >= 60) {
    console.log('及格');
} else {
    console.log('不及格');
}

// 三元表达式
let result = score >= 60 ? '及格' : '不及格';

// 逻辑运算符（和 Python 一样用 && ||）
if (age >= 18 && hasTicket) {
    console.log('允许入场');
}

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// for...of（遍历数组）
for (let item of [1, 2, 3]) {
    console.log(item);
}

// for...in（遍历对象属性）
let person = {name: 'Alice', age: 25};
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// while
while (count > 0) {
    count--;
}

// 获取元素
let el = document.getElementById('myId');
let els = document.querySelectorAll('.myClass');  // 返回所有匹配
let first = document.querySelector('.myClass');   // 返回第一个

// 修改内容
el.textContent = '新文本';           // 纯文本
el.innerHTML = '<strong>加粗</strong>';  // HTML

// 修改样式
el.style.color = 'red';
el.style.fontSize = '20px';
el.style.display = 'none';          // 隐藏

// 修改属性
el.setAttribute('href', 'https://python.org');
el.getAttribute('class');
el.classList.add('active');          // 添加类
el.classList.remove('active');       // 移除类
el.classList.toggle('active');       // 切换类

// 创建元素
let newDiv = document.createElement('div');
newDiv.textContent = '我是新元素';
newDiv.className = 'card';
document.body.appendChild(newDiv);   // 添加到页面

// 删除元素
el.remove();

// 获取/设置表单值
let input = document.querySelector('#username');
let value = input.value;             // 获取值
input.value = 'Alice';              // 设置值

6. 事件处理

// 方式1：addEventListener（推荐）
let btn = document.querySelector('#myBtn');
btn.addEventListener('click', function() {
    alert('按钮被点击了！');
});

// 方式2：箭头函数
btn.addEventListener('click', () => {
    console.log('clicked');
});

// 常用事件
// click      — 点击
// dblclick   — 双击
// mouseenter — 鼠标进入
// mouseleave — 鼠标离开
// keydown    — 按键按下
// keyup      — 按键抬起
// input      — 输入框变化（实时）
// change     — 值改变（失焦后）
// submit     — 表单提交
// load       — 页面加载完成

// 事件对象
btn.addEventListener('click', (event) => {
    console.log(event.target);       // 被点击的元素
    console.log(event.type);         // 'click'
    event.preventDefault();           // 阻止默认行为
});

// 表单提交
let form = document.querySelector('#myForm');
form.addEventListener('submit', (e) => {
    e.preventDefault();               // 阻止表单默认提交
    let username = document.querySelector('#username').value;
    console.log('提交：', username);
});

7. AJAX 请求

// fetch API（现代方式，推荐）
// GET 请求
fetch('/api/users')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => console.error(error));

// POST 请求
fetch('/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        name: 'Alice',
        email: 'alice@example.com'
    })
})
.then(response => response.json())
.then(data => console.log(data));

// async/await（更优雅的写法）
async function getUsers() {
    try {
        let response = await fetch('/api/users');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败：', error);
    }
}
getUsers();

// 实战：动态加载文章列表
async function loadPosts() {
    let container = document.querySelector('#posts');

    try {
        let response = await fetch('/api/posts/');
        let data = await response.json();

        container.innerHTML = data.results.map(post => `
            <div class="post-card">
                <h3>${post.title}</h3>
                <p>${post.summary}</p>
                <span>👁 ${post.views}</span>
            </div>
        `).join('');
    } catch (error) {
        container.innerHTML = '<p>加载失败</p>';
    }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', loadPosts);

8. ES6+ 新特性

// 解构赋值
let {name, age} = person;           // 对象解构
let [first, second] = [1, 2];       // 数组解构

// 展开运算符
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];         // [1, 2, 3, 4, 5]
let obj1 = {a: 1};
let obj2 = {...obj1, b: 2};         // {a: 1, b: 2}

// 可选链（?.）
let city = user?.address?.city;      // 安全访问嵌套属性

// 空值合并（??）
let name = input ?? '默认值';        // input 为 null/undefined 时用默认值

// 模块导入导出
// math.js
export const add = (a, b) => a + b;
export default class Calculator { ... }

// main.js
import Calculator, { add } from './math.js';

9. 今日练习

🏋️ 练习 1：计数器

# 用 JS 实现一个计数器：
# - 显示当前数字
# - +1 按钮
# - -1 按钮
# - 重置按钮
# - 数字为负时显示红色，正数显示绿色

🏋️ 练习 2：待办列表

# 用 JS 实现一个待办列表：
# - 输入框 + 添加按钮
# - 点击添加 → 显示在列表中
# - 点击某项 → 划掉（完成状态）
# - 每项有删除按钮

🏋️ 练习 3：API 数据加载

# 用 fetch 从你的 Django API 加载数据：
# - GET /api/posts/ → 显示文章列表
# - 点击某篇文章 → 显示详情
# - 处理加载状态和错误

10. 今日小结

🚀 明日预告：Day 70 — 前后端交互

前端三件套（HTML/CSS/JS）学完了！明天把前后端连起来——用 fetch 调用 Django API，实现真正的前后端分离。这是从"学技术"到"做产品"的最后一环！