JavaScript30 一個月純 JS 挑戰(zhàn)中文指南(英文全集)
JavaScript30 – 一個月純 JS 挑戰(zhàn)中文指南
JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西,不借助框架和庫,也不使用編譯器和引用
https://github.com/soyaine/JavaScript30
中文指南作者:緝熙Soyaine
JavaScript30 教程作者:Wes Bos
完整指南在 GitHub,喜歡請 Star 哦♪(^∇^*)
JavaScript30 是什么?
JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西,不借助框架和庫,也不使用編譯器和引用。
官網(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 有平凡普通的意味,同時也有香草的釋義,這個詞很美,可惜我找不到適當(dāng)?shù)臐h語來翻譯它。我從入門前端時就在用純 JavaScript 來寫東西、寫博客,看到這個挑戰(zhàn)時很開心,覺得在前端社區(qū)各種框架熱熱鬧鬧的時候,有人回到最本真的地方,是很難得的一件事。
當(dāng)然不可否認的是,新的工具可以幫助我們提高生產(chǎn)率,但最原始的 JavaScript 想必是很多人的知識結(jié)構(gòu)里所缺失的部分,如果你也想探探究竟,歡迎跟著這份指南,一起逛逛 JavaScript 的原始世界。
寫這份中文指南的另一個原因是看了 Nitish Dayal 寫的 Guides,我決定效仿他,在記錄筆記的同時梳理思路,整理形成指南。我相信 Learn by Use 的同時也深信教是最好的學(xué)。希望這份指南能夠幫助到想要進行練習(xí)的人們,特別是那些想要入門的前端小白們。
目前這份指南還在更新之中,歡迎監(jiān)督我,如果你想要及時獲取新的文章,可以在 GitHub Star/Fork 我的 Repo。
如何參加挑戰(zhàn)
下面是完成 Wes Bos 的 JavaScript30 挑戰(zhàn)所能借鑒的文檔,每個文檔的具體使用建議如下:
- JavaScript30 官網(wǎng):進入官網(wǎng)注冊后可以觀看和下載所有教程視頻。Wes Bos 還把視頻傳到了百度云,進入官網(wǎng)直接拉到頁面底部就能找到鏈接。
- Nitish Dayal 寫的英文指南:這是一份非官方的文字版指南,也是激勵我寫這一系列文章的主要因素。
- 挑戰(zhàn)初始文檔:這是 Wes Bos 這份教程涉及的代碼,你可以直接 Clone 或者下載到本地,然后開始你 30 天的挑戰(zhàn)之旅。文檔共有 30 個文件夾,每個文件夾中至少有兩個文件。
- index-START.html:是提供給我們的初始文檔,方便我們專注于 JavaScript 的編寫,這個文檔已經(jīng)將基礎(chǔ)的 HTML 和 CSS 部分寫好,我們只需要在這個基礎(chǔ)上編寫 JavaScript 代碼,實現(xiàn)特定的功能即可。
- index-FINISHED.html:已經(jīng)實現(xiàn)了最終效果的文檔,可以查看效果和實現(xiàn)思路。
- 我寫的中文指南源碼:文檔結(jié)構(gòu)和 Wes Bos 提供的相同,進入每個文件夾都可查看當(dāng)前挑戰(zhàn)的指南(README.md),我完成挑戰(zhàn)時建立的文件是 index-SOYAINE.html,里面有核心代碼的中文注釋。如果閱讀過程中發(fā)現(xiàn)問題,請在這里提 issue。 如果喜歡記得 Star 喲~♪(^∇^*),鼓勵我寫出更好的文章。
目錄
- JavaScript Drum Kit 指南 | 純 JS 模擬敲鼓效果
- JS + CSS Clock 指南 | 純 JavaScript+CSS 時鐘效果
- CSS Variables 指南 | 用 CSS 變量實現(xiàn)拖動控制參數(shù)效果
- Array Cardio, Day 1 指南 | 數(shù)組基本操作方法示例一
- Flex Panel Gallery 指南 | 可伸縮的圖片墻在線效果
- Type Ahead 指南 | 根據(jù)關(guān)鍵詞快速匹配詩句在線效果
- Array Cardio, Day 2 指南 | 數(shù)組基本操作方法示例二
- Fun with HTML5 Canvas 指南 | 彩虹畫筆繪畫板在線效果
- Dev Tools Domination 指南 | Console 調(diào)試技巧在線示例
- 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
參加挑戰(zhàn)并不需要你繳納費用或是加入什么組織,也不會有人催著你去做什么,你只需要打開電腦,然后開始思考、敲擊鍵盤。相信內(nèi)在動機的力量,我在這里給出了一些建議和心得,最適合你的方法還需要你自己去摸索。
本中文指南貢獻者名單
相關(guān)文章
javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法
這篇文章主要介紹了javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法,實例分析了javascript操作table表格元素與相關(guān)樣式的技巧,需要的朋友可以參考下2015-05-05js中forEach,for in,for of循環(huán)的用法示例小結(jié)
這篇文章主要介紹了js中forEach,for in,for of循環(huán)的用法,結(jié)合實例形式總結(jié)分析了js中forEach,for in,for of循環(huán)相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2020-03-03微信小程序?qū)W習(xí)總結(jié)(一)項目創(chuàng)建與目錄結(jié)構(gòu)分析
這篇文章主要介紹了微信小程序?qū)W習(xí)總結(jié)(一)項目創(chuàng)建與目錄結(jié)構(gòu),總結(jié)分析了微信小程序項目創(chuàng)建、配置方法以及目錄結(jié)構(gòu)、文件功能,需要的朋友可以參考下2020-06-06JS事件循環(huán)機制event loop宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JS事件循環(huán)機制event loop宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08深入理解JavaScript繼承的多種方式和優(yōu)缺點
這篇文章主要介紹了深入理解JavaScript繼承的多種方式和優(yōu)缺點,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05