JavaScript30 一個月純 JS 挑戰中文指南(英文全集)

JavaScript30 – 一個月純 JS 挑戰中文指南

JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用

https://github.com/soyaine/JavaScript30

中文指南作者：緝熙Soyaine
JavaScript30 教程作者：Wes Bos
完整指南在 GitHub，喜歡請 Star 哦♪(^∇^*)

JavaScript30 是什么？

JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。

官網的 slogan 如下：

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 的原始世界。

寫這份中文指南的另一個原因是看了 Nitish Dayal 寫的 Guides，我決定效仿他，在記錄筆記的同時梳理思路，整理形成指南。我相信 Learn by Use 的同時也深信教是最好的學。希望這份指南能夠幫助到想要進行練習的人們，特別是那些想要入門的前端小白們。

目前這份指南還在更新之中，歡迎監督我，如果你想要及時獲取新的文章，可以在 GitHub Star/Fork 我的 Repo。

如何參加挑戰

下面是完成 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 喲~♪(^∇^*)，鼓勵我寫出更好的文章。

目錄

1. JavaScript Drum Kit 指南 | 純 JS 模擬敲鼓效果
2. JS + CSS Clock 指南 | 純 JavaScript+CSS 時鐘效果
3. CSS Variables 指南 | 用 CSS 變量實現拖動控制參數效果
4. Array Cardio, Day 1 指南 | 數組基本操作方法示例一
5. Flex Panel Gallery 指南 | 可伸縮的圖片墻在線效果
6. Type Ahead 指南 | 根據關鍵詞快速匹配詩句在線效果
7. Array Cardio, Day 2 指南 | 數組基本操作方法示例二
8. Fun with HTML5 Canvas 指南 | 彩虹畫筆繪畫板在線效果
9. Dev Tools Domination 指南 | Console 調試技巧在線示例
10. Hold Shift and Check Checkboxes 指南 | Shift 批量選中在線效果
11. Custom Video Player 指南
12. Key Sequence Detection 指南 | 在線效果
13. Slide in on Scroll 指南 | 圖片隨屏幕滾動而滑入滑出的在線效果
14. JavaScript References vs. Copying
15. LocalStorage
16. Mouse Move Shadow
17. Sort Without Articles
18. Adding Up Times with Reduce
19. Webcam Fun
20. Speech Detection
21. Geolocation
22. Follow Along Link Highlighter
23. Speech Synthesis
24. Sticky Nav
25. Event Capture, Propagation, Bubbling, and Once
26. Stripe Follow Along Nav
27. Click and Drag
28. Video Speed Controller
29. Countdown Timer
30. Whack A Mole

參加挑戰并不需要你繳納費用或是加入什么組織，也不會有人催著你去做什么，你只需要打開電腦，然后開始思考、敲擊鍵盤。相信內在動機的力量，我在這里給出了一些建議和心得，最適合你的方法還需要你自己去摸索。

本中文指南貢獻者名單

• @DrakeXiang 　
• @zzh566
• @Xing Liu
• @緝熙Soyaine