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);
});