前端基础语法（总览）

面向：有 Python / Java 编程基础、已学过 Git、想用 Vibe Coding 模式开发前端项目的学生。 目标：学完本 Part，你能装好前端开发环境，掌握 JavaScript / TypeScript 基础语法、模块与 npm、DOM 与浏览器开发者工具，为后续框架工具（Part08）和项目实战（Part09）打地基。 组织方式：每章一个独立 Markdown 文件（共 8 章），按顺序学习即可。

1、本教程怎么用

1. 按章节顺序学习，每一章是一个独立的 Markdown 文档（Lecture）。
2. 每一章的代码都可以照着敲、可以运行，建议边学边敲（本章代码用 node 运行，无需浏览器工程）。
3. 各讲的操作步骤配有图解（位于 assets/ 目录），看不懂时先看图。
4. 第 1 章一次性装好 Node.js、VS Code 并建第一个 Vite 项目，后面章节都依赖它，务必先跑通。

提示：Markdown 编辑器中图片使用相对路径 ./assets/xxx.svg，请保持 Lecture 文件和 assets 文件夹在同一目录下。

2、章节目录

3、学习路线

• 第 1 章：环境。一次装好 Node.js、VS Code、Vite 项目，理解"描述 → 生成 → 验证"的 Vibe Coding 黄金三角。
• 第 2 章：JS 基础。变量、数组、对象、函数等（用 node 运行）。
• 第 3 章：异步。Promise 与 async / await。
• 第 4 章：模块。import / export 组织代码。
• 第 5 章：npm。装包与使用第三方库。
• 第 6 章：TypeScript。类型系统基础（node + tsx 运行）。
• 第 7 章：DOM 与事件。操作页面元素、绑定事件。
• 第 8 章：浏览器开发者工具。调试页面与网络请求。

4、环境要求

前置知识：Python / Java 编程基础（变量、函数、对象、条件、循环）、Git 基本使用。 本 Part 不讲原理，只讲用法；每节代码都能用 node 直接运行。

5、各章速查