JavaScript30 一個(gè)月純 JS 挑戰(zhàn)中文指南(英文全集)

JavaScript30 – 一個(gè)月純 JS 挑戰(zhàn)中文指南

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

https://github.com/soyaine/JavaScript30

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

JavaScript30 是什么？

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

官網(wǎng)的 slogan 如下：

Build 30 things in 30 days with 30 tutorial No Frameworks × No Compilers × No Libraries × No Boilerplate
關(guān)于《 JavaScript30 中文指南》

英文中描述純 JavaScript 使用的單詞是 vanilla JavaScript，vanilla 有平凡普通的意味，同時(shí)也有香草的釋義，這個(gè)詞很美，可惜我找不到適當(dāng)?shù)臐h語(yǔ)來(lái)翻譯它。我從入門前端時(shí)就在用純 JavaScript 來(lái)寫東西、寫博客，看到這個(gè)挑戰(zhàn)時(shí)很開(kāi)心，覺(jué)得在前端社區(qū)各種框架熱熱鬧鬧的時(shí)候，有人回到最本真的地方，是很難得的一件事。

當(dāng)然不可否認(rèn)的是，新的工具可以幫助我們提高生產(chǎn)率，但最原始的 JavaScript 想必是很多人的知識(shí)結(jié)構(gòu)里所缺失的部分，如果你也想探探究竟，歡迎跟著這份指南，一起逛逛 JavaScript 的原始世界。

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

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

如何參加挑戰(zhàn)

下面是完成 Wes Bos 的 JavaScript30 挑戰(zhàn)所能借鑒的文檔，每個(gè)文檔的具體使用建議如下：

• JavaScript30 官網(wǎng)：進(jìn)入官網(wǎng)注冊(cè)后可以觀看和下載所有教程視頻。Wes Bos 還把視頻傳到了百度云，進(jìn)入官網(wǎng)直接拉到頁(yè)面底部就能找到鏈接。
• Nitish Dayal 寫的英文指南：這是一份非官方的文字版指南，也是激勵(lì)我寫這一系列文章的主要因素。
• 挑戰(zhàn)初始文檔：這是 Wes Bos 這份教程涉及的代碼，你可以直接 Clone 或者下載到本地，然后開(kāi)始你 30 天的挑戰(zhàn)之旅。文檔共有 30 個(gè)文件夾，每個(gè)文件夾中至少有兩個(gè)文件。
  • index-START.html：是提供給我們的初始文檔，方便我們專注于 JavaScript 的編寫，這個(gè)文檔已經(jīng)將基礎(chǔ)的 HTML 和 CSS 部分寫好，我們只需要在這個(gè)基礎(chǔ)上編寫 JavaScript 代碼，實(shí)現(xiàn)特定的功能即可。
  • index-FINISHED.html：已經(jīng)實(shí)現(xiàn)了最終效果的文檔，可以查看效果和實(shí)現(xiàn)思路。
• 我寫的中文指南源碼：文檔結(jié)構(gòu)和 Wes Bos 提供的相同，進(jìn)入每個(gè)文件夾都可查看當(dāng)前挑戰(zhàn)的指南（README.md），我完成挑戰(zhàn)時(shí)建立的文件是 index-SOYAINE.html，里面有核心代碼的中文注釋。如果閱讀過(guò)程中發(fā)現(xiàn)問(wèn)題，請(qǐng)?jiān)谶@里提 issue。 如果喜歡記得 Star 喲~♪(^∇^*)，鼓勵(lì)我寫出更好的文章。

目錄

1. JavaScript Drum Kit 指南 | 純 JS 模擬敲鼓效果
2. JS + CSS Clock 指南 | 純 JavaScript+CSS 時(shí)鐘效果
3. CSS Variables 指南 | 用 CSS 變量實(shí)現(xiàn)拖動(dòng)控制參數(shù)效果
4. Array Cardio, Day 1 指南 | 數(shù)組基本操作方法示例一
5. Flex Panel Gallery 指南 | 可伸縮的圖片墻在線效果
6. Type Ahead 指南 | 根據(jù)關(guān)鍵詞快速匹配詩(shī)句在線效果
7. Array Cardio, Day 2 指南 | 數(shù)組基本操作方法示例二
8. Fun with HTML5 Canvas 指南 | 彩虹畫(huà)筆繪畫(huà)板在線效果
9. Dev Tools Domination 指南 | Console 調(diào)試技巧在線示例
10. Hold Shift and Check Checkboxes 指南 | Shift 批量選中在線效果
11. Custom Video Player 指南
12. Key Sequence Detection 指南 | 在線效果
13. Slide in on Scroll 指南 | 圖片隨屏幕滾動(dòng)而滑入滑出的在線效果
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

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

本中文指南貢獻(xiàn)者名單

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