JavaScript30 是由 Wes Bos 推出的 30 天纯 JavaScript 挑战项目，旨在帮助开发者在不使用框架、库或编译器的情况下，通过 30 个实战项目掌握原生 JS 核心技能。本文提供完整的中文指南、官方资源链接、初始文档说明及目录索引，适合希望夯实前端基础、深入理解 DOM 操作与事件机制的开发者参考。
JavaScript30 中文指南概述
JavaScript30 中文指南
JavaScript30 是由 Wes Bos 发起的一项为期 30 天的编程挑战。该项目免费提供 30 个视频教程、每个挑战的初始代码文档以及完整的解决方案源码。其核心目标是帮助开发者仅使用原生 JavaScript 进行开发，不依赖任何第三方框架、库、编译器或构建工具。
https://github.com/soyaine/JavaScript30
中文指南作者：缉熙Soyaine JavaScript30 教程原作者：Wes Bos 完整指南托管于 GitHub，欢迎 Star 支持 ♪(^∇^*)
JavaScript30 项目简介
JavaScript30 是由 Wes Bos 发起的一项为期 30 天的编程挑战。该项目免费提供 30 个视频教程、每个挑战的初始代码文档以及完整的解决方案源码。其核心目标是帮助开发者仅使用原生 JavaScript 进行开发，不依赖任何第三方框架、库、编译器或构建工具。
官网宣传语如下：
Build 30 things in 30 days with 30 tutorial No Frameworks × No Compilers × No Libraries × No Boilerplate 关于《JavaScript30 中文指南》
英文中描述“纯 JavaScript”使用的单词是 vanilla JavaScript。vanilla 一词既有“平凡普通”之意，也有“香草”的释义，这个词本身颇具美感，但中文里难以找到完全对应的翻译。我自入门前端以来便一直使用原生 JavaScript 进行开发与博客写作，看到这一挑战时倍感欣喜。在前端社区框架林立、生态繁荣的背景下，有人回归最本质的 JavaScript 开发方式，实属难得。
当然，不可否认新工具确实能提升开发效率，但最基础的 JavaScript 知识往往是许多开发者知识结构中的缺失环节。如果你也想深入探索这一领域，欢迎跟随本指南，一同回顾 JavaScript 的原始面貌与核心机制。
编写本中文指南的另一个灵感来源于 Nitish Dayal 所撰写的 Guides。我决定效仿其做法，在记录学习笔记的同时梳理思路，最终整理成系统指南。我坚信“学以致用”，同时也深信“教是最好的学”。希望本指南能为希望进行实战练习的开发者提供帮助，尤其是那些刚入门前端的新手。
目前本指南仍在持续更新中，欢迎监督与反馈。如需及时获取最新文章，可在 GitHub 上 Star 或 Fork 我的仓库。
如何参与 JavaScript30 挑战
如何参与挑战
以下是完成 Wes Bos 的 JavaScript30 挑战所推荐的参考资料，每个文档的具体使用建议如下：
- JavaScript30 官网：注册官网账号后，可观看并下载所有教程视频。Wes Bos 还将视频上传至百度云，访问官网页面底部即可找到下载链接。
- Nitish Dayal 撰写的英文指南：这是一份非官方的文字版教程，也是激励我撰写本系列文章的主要因素。
- 挑战初始文档：这是 Wes Bos 这份教程涉及的代码，你可以直接 Clone 或者下载到本地，然后开始你 30 天的挑战之旅。文档共有 30 个文件夹，每个文件夹中至少有两个文件。
- index-START.html：这是官方提供的初始文档，旨在帮助开发者专注于 JavaScript 逻辑的实现。该文件已预先写好基础的 HTML 结构与 CSS 样式，你只需在此基础上编写 JavaScript 代码，实现特定功能即可。
- index-FINISHED.html：这是已实现最终效果的完整文档，可供查看运行效果与实现思路。
- 我编写的中文指南源码：文档结构与 Wes Bos 提供的保持一致。进入每个文件夹即可查看当前挑战的指南（README.md）。我在完成挑战时创建的文件名为 index-SOYAINE.html，其中包含核心代码的中文注释。若在阅读过程中发现问题，请在此提交 issue。如果喜欢记得 Star 支持 ♪(^∇^*)，鼓励我产出更优质的文章。
30 个挑战项目目录索引
目录
- JavaScript Drum Kit 指南 | 纯 JS 模拟敲鼓效果
- JS + CSS Clock 指南 | 纯 JavaScript+CSS 时钟效果
- CSS Variables 指南 | 用 CSS 变量实现拖动控制参数效果
- Array Cardio, Day 1 指南 | 数组基本操作方法示例一
- Flex Panel Gallery 指南 | 可伸缩的图片墙在线效果
- Type Ahead 指南 | 根据关键词快速匹配诗句在线效果
- Array Cardio, Day 2 指南 | 数组基本操作方法示例二
- Fun with HTML5 Canvas 指南 | 彩虹画笔绘画板在线效果
- Dev Tools Domination 指南 | Console 调试技巧在线示例
- Hold Shift and Check Checkboxes 指南 | Shift 批量选中在线效果
- Custom Video Player 指南
- Key Sequence Detection 指南 | 在线效果
- Slide in on Scroll 指南 | 图片随屏幕滚动而滑入滑出的在线效果
- JavaScript References vs. Copying
- LocalStorage
- Mouse Move Shadow
- Sort Without Articles
- Adding Up Times with Reduce
- Webcam Fun
- Speech Detection
- Geolocation
- Follow Along Link Highlighter
- Speech Synthesis
- Sticky Nav
- Event Capture, Propagation, Bubbling, and Once
- Stripe Follow Along Nav
- Click and Drag
- Video Speed Controller
- Countdown Timer
- Whack A Mole
参与挑战无需缴纳费用或加入任何组织，也不会有人催促你完成。你只需打开电脑，开始思考与编码。相信内在驱动的力量，我在文中提供了一些建议与心得，最适合你的学习方法仍需你自己探索。
贡献者名单与初始文档说明
本中文指南贡献者名单
- @DrakeXiang
- @zzh466
- @Xing Liu
- @缉熙Soyaine