創建日期：2016-12-20
最後更新：2017-01-07
中文指南作者：緝熙Soyaine
JavaScript30 教程作者：Wes Bos
完整指南在 GitHub，喜歡請 Star 哦♪(^∇^*)
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
英文中描述純 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 喲~♪(^∇^*)，鼓勵我寫出更好的文章。
- JavaScript Drum Kit 指南 | [純 JS 模擬敲鼓效果](https://github.com/cn27529/JavaScript30/01 - JavaScript Drum Kit/index-SOYAINE.html)
- JS + CSS Clock 指南 | [純 JavaScript+CSS 時鐘效果](https://github.com/cn27529/JavaScript30/02 - JS %2B CSS Clock/index-SOYAINE.html)
- 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
參加挑戰並不需要你繳納費用或是加入什麼組織，也不會有人催著你去做什麼，你只需要打開電腦，然後開始思考、敲擊鍵盤。相信內在動機的力量，我在這裡給出了一些建議和心得，最適合你的方法還需要你自己去摸索。