学完语法不会用：JavaScript30 三十个原生练习
语法课看完，真让你写点东西还是没头绪，因为缺的是用最小代价做出一个能跑的功能的经验。这套练习给了三十个独立的小题目：用原生脚本做一个时钟、一个搜索过滤、一段页面动效，全程不引入框架和构建工具，做完对浏览器提供的接口会熟很多。
它解决什么问题
跟着框架教程走，离开脚手架就不知道从哪写起。
想练手却想不出做什么，题目太抽象提不起劲。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 题量固定 | 三十个主题各自独立，可以按兴趣跳着做 |
| 纯原生写法 | 不引入框架与构建工具，直接操作浏览器接口 |
| 每题都不长 | 单个练习篇幅可控，一天做一两个不费力 |
| 结果看得见 | 做的都是页面上的小功能，跑起来就知道成不成功 |
| 配套讲解 | 带演示视频，卡住能看作者怎么排查问题 |
| 免费学习 | 课程内容不收费 |
先自己写，再看讲解
最有效的用法是先看图自己动手：把当天要实现的效果看一遍，关掉讲解，自己从空白文件开始写，写不下去再回来看某一段。这样差距会很明显的，很多时候卡住的不是语法，而是不知道有哪个浏览器接口可用，这恰好是这套练习最想让人熟悉的东西，也是框架用久了最容易忘的部分。
讲解以英文为主，但代码量不大，跟着做基本能懂。练的时候注意别把作者的文件结构照搬，写完自己重新组织一遍，顺手加点自己的想法，比如换个样式、多一个筛选条件。做完三十个也只是熟悉了常见接口，真要写项目还得学模块化、调试和框架，别把这里当终点，把它当成练手的第一站就好。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Scrimba | 免费闭源 | 课程形式更接近手把手，视频里就能改代码 |
| 现代 JavaScript 教程 | 免费闭源 | 中文教材，偏语言与浏览器基础，讲得更系统 |
| CodePen | 免费闭源 | 在线的试代码环境，适合把练过的片段随手重建 |
谁适合用
- 学过语法、想找题练手的 JavaScript 初学者
- 长期用框架、对原生接口不熟的开发者
- 想带学生做小练习的教学者
怎么开始
- 打开站点，浏览三十个练习的主题列表。
- 挑一个感兴趣的主题，先只看最终效果。
- 关掉讲解，自己从空白文件实现一遍。
- 卡住时回看对应片段，弄清用了哪个接口。
- 写完再自己加一点功能，把结果保存下来。
常见问题
要付费吗？
不需要，课程内容免费开放。
需要准备什么？
浏览器加编辑器就够，练习不依赖构建工具，素材获取方式以站点实际说明为准。
有中文吗？
讲解以英文为主，代码本身不涉及语言障碍。
零基础能直接做吗？
不建议，至少要会变量、函数和数组操作，否则看不出题目在练什么。
授权与合规
全部课程内容免费开放，作者另有付费课程与资料，这套练习不需要付费。 官网：javascript30.com。
继续找同类资源
这条属于「学习资料」栏目，同栏目还有更多可直接使用的免费资源，可以在 学习资料全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
资源信息
界面语言
英文
授权方式
免费闭源
适用平台
Web
获取方式
直链下载
资源更新
2026-09-20
页面更新
2026-09-20
↓ 获取资源
点击按钮直接前往资源页面。
