JavaScript

这一课你将能做到

1. 用变量、函数、条件、循环写基础逻辑
2. 操作 DOM 实现页面交互
3. 用 fetch 调用后端 API

为什么要学

HTML 是骨架，CSS 是皮肤，JavaScript 是肌肉——让页面能「动」。点击按钮、提交表单、加载数据、弹窗提示，都是 JavaScript 的功劳。

人话：JavaScript 是「遥控器」，让用户和页面互动。

先建立图像

// 变量
const name = "CodeRoadMap";
let count = 0;

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

// 调用
console.log(greet(name)); // Hello, CodeRoadMap!

浏览器执行后：

控制台输出: Hello, CodeRoadMap!

跟着做

步骤 1：变量与类型

// 基本类型
const str = "文字";        // string
const num = 42;            // number
const bool = true;         // boolean
const empty = null;        // null
let notSet;                // undefined

// 引用类型
const arr = [1, 2, 3];     // array
const obj = { name: "Java", age: 30 }; // object

// 类型检查
console.log(typeof str);   // "string"
console.log(typeof arr);   // "object"（数组也是 object）
console.log(Array.isArray(arr)); // true

步骤 2：函数

// 声明
function add(a, b) {
    return a + b;
}

// 箭头函数（现代写法）
const multiply = (a, b) => a * b;

// 默认参数
const greet = (name = "同学") => `你好，${name}`;

// 调用
console.log(add(1, 2));        // 3
console.log(multiply(3, 4));   // 12
console.log(greet());          // 你好，同学
console.log(greet("小明"));    // 你好，小明

步骤 3：条件与循环

// 条件
const score = 85;
if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

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

// 遍历数组
const courses = ["HTML", "CSS", "JS"];
for (const course of courses) {
    console.log(course);
}

// forEach
courses.forEach((course, index) => {
    console.log(`${index}: ${course}`);
});

步骤 4：DOM 操作

// 选中元素
const btn = document.querySelector("#myBtn");
const list = document.querySelectorAll(".item");

// 修改内容
btn.textContent = "点击我";
btn.innerHTML = "<strong>加粗</strong>";

// 修改样式
btn.style.backgroundColor = "#2563eb";
btn.classList.add("active");
btn.classList.remove("disabled");

// 事件监听
btn.addEventListener("click", () => {
    alert("按钮被点击了！");
});

// 表单提交
const form = document.querySelector("#loginForm");
form.addEventListener("submit", (e) => {
    e.preventDefault(); // 阻止默认提交
    const username = form.username.value;
    console.log("用户名:", username);
});

步骤 5：Fetch 调用后端 API

// GET 请求
fetch("/api/courses")
    .then(res => res.json())
    .then(data => {
        console.log(data);
        renderCourses(data);
    })
    .catch(err => console.error("请求失败:", err));

// POST 请求
fetch("/api/login", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        username: "admin",
        password: "123456"
    })
})
.then(res => res.json())
.then(data => {
    if (data.code === 0) {
        localStorage.setItem("token", data.data.token);
        location.href = "/dashboard";
    } else {
        alert(data.msg);
    }
});

讲清楚要点

1. JavaScript 是弱类型语言：变量类型由值决定，运行时可变。
2. const 优先，let 次之，不用 var：const 不可重新赋值，let 可重新赋值，var 有变量提升问题。
3. DOM 是文档对象模型：JavaScript 通过 DOM API 操作页面元素。
4. 事件驱动：用户操作触发事件，JavaScript 监听并响应。
5. 异步编程：fetch 返回 Promise，用 .then() 或 async/await 处理。

你可能会懵的地方

• JavaScript 和 Java 有关系吗？ 没关系。JavaScript 原名 LiveScript，为了蹭 Java 热度改名。两者语法像，但设计目标完全不同。

• null 和 undefined 区别？ null 是「主动设为空」，undefined 是「未赋值」。typeof null 是 "object"（历史 bug）。

• == 和 === 区别？ == 会隐式转换类型（1 == "1" 为 true），=== 严格比较（1 === "1" 为 false）。永远用 ===。

• 箭头函数和普通函数区别？ 箭头函数没有自己的 this，继承外层；普通函数的 this 由调用方式决定。

• let 和 var 区别？ let 有块级作用域，var 有函数作用域和变量提升。let 不会污染全局。

错法对照

错法	问题	正解
if (x = 1)	赋值而非比较	if (x === 1)
arr.map() 不改变原数组	需要接收返回值	const newArr = arr.map(...)
setTimeout 里 this 指向 window	丢失上下文	用箭头函数或 .bind(this)
直接修改 const 声明的对象属性	可以（引用不变）	const obj = {}; obj.name = "ok" 合法
忘记 e.preventDefault()	表单提交跳转	在 submit 事件里调用

卡点急救

1. 控制台报错 xxx is not defined：检查变量名拼写、作用域、是否先声明后使用。
2. DOM 操作无效：确认脚本在 DOM 加载后执行（DOMContentLoaded 或 defer）。
3. Fetch 跨域报错：后端需配置 CORS，或前端用代理（vite.config.js 的 proxy）。

面试常问

• 闭包是什么？ 函数访问外层作用域的变量，即使外层函数已执行完毕。常用于数据私有化、防抖节流。

• Promise 和 async/await？ Promise 是异步编程的解决方案，.then() 链式调用；async/await 是语法糖，让异步代码像同步。

• 事件循环（Event Loop）？ 同步代码 → 微任务（Promise）→ 宏任务（setTimeout）。setTimeout(fn, 0) 不会立即执行。

• 深拷贝和浅拷贝？ 浅拷贝只复制引用（Object.assign、展开运算符）；深拷贝复制所有层级（JSON.parse(JSON.stringify()) 或递归）。

自测三问

1. const 和 let 的区别？
2. 如何用 fetch 发送 POST 请求？
3. == 和 === 的区别？

小结一句话

JavaScript 是网页的「遥控器」，用变量、函数、DOM 操作实现交互，用 fetch 与后端通信。

延伸

• MDN JavaScript 指南
• 下一课：检查点——为网页添加交互。