JavaScript 与 DOM 操作

掌握 JavaScript 基础语法和 DOM 操作，网页就能动起来

掌握 JS 变量、函数、事件基础
理解 DOM 操作原理
掌握事件监听和处理
了解异步 JavaScript（Promise/async）

JavaScript 基础

JavaScript 是浏览器唯一原生支持的编程语言，负责网页的交互逻辑。Python 后端开发者学 JS 会很快——很多概念是相通的。

JavaScript

// 变量：let（可变）和 const（常量）
let name = "小明";
const PI = 3.14159;

// 函数
function greet(name) {
  return `你好，${name}！`;  // 模板字符串，类似 Python f-string
}

// 箭头函数（类似 Python lambda）
const add = (a, b) => a + b;

// 数组方法（类似 Python 列表推导）
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);      // [2,4,6,8,10]
const evens = numbers.filter(n => n % 2 === 0); // [2,4]
const sum = numbers.reduce((a, b) => a + b, 0); // 15

// 对象（类似 Python 字典）
const user = { name: "小明", age: 25 };
console.log(user.name);  // 小明

// 解构赋值
const { name: userName, age } = user;

💡Python vs JavaScript 对照

Python 的 def → JS 的 function；Python 的 None → JS 的 null；Python 的 True/False → JS 的 true/false；Python 的 f"{x}" → JS 的 ${x}；Python 的列表推导 → JS 的 map/filter；Python 的字典 → JS 的对象。

DOM 操作

DOM（Document Object Model）是浏览器把 HTML 解析成的树形对象。JavaScript 通过 DOM API 读取和修改网页内容。

JavaScript

// 获取元素
const btn = document.getElementById("myBtn");
const cards = document.querySelectorAll(".card");

// 修改内容和样式
btn.textContent = "已点击";
btn.style.background = "#10b981";

// 创建和插入元素
const div = document.createElement("div");
div.textContent = "新内容";
div.className = "card";
document.body.appendChild(div);

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

事件监听

用户和网页的交互动作就是事件，比如点击、输入、滚动、悬停这些。用 addEventListener 监听事件就行。

JavaScript

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

// 输入事件（实时获取输入框内容）
const input = document.getElementById("nameInput");
input.addEventListener("input", (e) => {
  console.log("当前输入：", e.target.value);
});

// 表单提交
const form = document.getElementById("myForm");
form.addEventListener("submit", (e) => {
  e.preventDefault();  // 阻止默认刷新行为
  console.log("表单提交");
});

异步 JavaScript

JavaScript 是单线程的，异步操作（网络请求、定时器）不会阻塞代码执行。这和 Python 的 asyncio 理念相同。

JavaScript

// Promise（类似 Python Future）
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: "小明", age: 25 });
    }, 1000);
  });
}

// async/await（和 Python 的 async/await 几乎一样）
async function main() {
  console.log("加载中...");
  const data = await fetchData();  // 等待 1 秒
  console.log("数据：", data);
}
main();

// fetch API（类似 Python requests）
async function getUsers() {
  const res = await fetch("/api/users");
  const users = await res.json();
  console.log(users);
}

🐍前后端数据交互

前端用 fetch 或 axios 发 HTTP 请求，后端返回 JSON。这就是前后端分离的核心：前端负责渲染和交互，后端只提供数据 API。现代前端框架（React/Vue）会自动把数据变化反映到界面上，开发者只需要关心数据和状态。

选择题

JavaScript 中哪个关键字声明常量？

预测输出

const arr = [1,2,3];
console.log(arr.map(x => x * 2));

选择题

用户用鼠标点击一个按钮时，应该监听哪个 DOM 事件？

资深工程师加餐

底层原理 · 大厂视角 · 工程经验，点卡片展开

网络侧：DNS→TCP/TLS→HTTP 请求与响应；浏览器侧：解析 HTML 建 DOM、解析 CSS 建 CSSOM、合并成渲染树，再经过布局（Layout）、绘制（Paint）、合成（Composite）上屏。前端性能优化几乎都围绕这条链路：减小资源体积、优化关键渲染路径、避免频繁触发重排重绘。

挑战任务

实现一个迷你事件分发器

简单+50 XP

addEventListener 的本质是「事件名 → 处理函数」的映射表。请实现 dispatch(handlers, event)：handlers 是事件名到提示语的字典，返回对应提示语；未绑定的事件返回 '未绑定'。

实现一个迷你事件分发器

Python 0%

1 个测试用例

课后作业

交互式计数器

中等+25 XP

写个带 + 和 - 按钮的计数器，点按钮数字增减，不能小于0，用原生JS实现。

交互式计数器

Python 0%

1 个测试用例