欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年07月23日 17:38:56   作者:緝熙Soyaine  
JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西,不借助框架和庫,也不使用編譯器和引用

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 喲~♪(^∇^*),鼓勵我寫出更好的文章。

目錄

  1. JavaScript Drum Kit 指南 | 純 JS 模擬敲鼓效果
  2. JS + CSS Clock 指南 | 純 JavaScript+CSS 時鐘效果
  3. CSS Variables 指南 | 用 CSS 變量實現(xiàn)拖動控制參數(shù)效果
  4. Array Cardio, Day 1 指南 | 數(shù)組基本操作方法示例一
  5. Flex Panel Gallery 指南 | 可伸縮的圖片墻在線效果
  6. Type Ahead 指南 | 根據(jù)關(guān)鍵詞快速匹配詩句在線效果
  7. Array Cardio, Day 2 指南 | 數(shù)組基本操作方法示例二
  8. Fun with HTML5 Canvas 指南 | 彩虹畫筆繪畫板在線效果
  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 指南 | 圖片隨屏幕滾動而滑入滑出的在線效果
  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)并不需要你繳納費用或是加入什么組織,也不會有人催著你去做什么,你只需要打開電腦,然后開始思考、敲擊鍵盤。相信內(nèi)在動機的力量,我在這里給出了一些建議和心得,最適合你的方法還需要你自己去摸索。

本中文指南貢獻者名單

相關(guān)文章

  • 利用JavaScript阻止表單提交的兩種方法

    利用JavaScript阻止表單提交的兩種方法

    本文介紹怎樣利用JavaScript來阻止表單提交的兩種方法,分別是return false和使用preventDefault(),有需要的可以參考借鑒,下面一起來看看。
    2016-08-08
  • TypeScript泛型約束條件示例詳解

    TypeScript泛型約束條件示例詳解

    有了泛型之后一個函數(shù)或容器類能處理的類型一下子擴到了無限大,似乎有點失控的感覺,所以這里又產(chǎn)生了一個約束的概念,下面這篇文章主要給大家介紹了關(guān)于TypeScript泛型約束條件的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Bootstrap創(chuàng)建可折疊的組件

    Bootstrap創(chuàng)建可折疊的組件

    這篇文章主要為大家詳細介紹了Bootstrap創(chuàng)建可折疊組件的對應(yīng)方法,以實例為大家分享了Bootstrap折疊組件,感興趣的小伙伴們可以參考一下
    2016-02-02
  • javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法

    javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法

    這篇文章主要介紹了javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法,實例分析了javascript操作table表格元素與相關(guān)樣式的技巧,需要的朋友可以參考下
    2015-05-05
  • 深入淺析javascript函數(shù)中with

    深入淺析javascript函數(shù)中with

    這篇文章主要介紹了javascript函數(shù)中with,with函數(shù)方便用來引用某個對象中已有的屬性,但是不能用來給對象添加屬性,要給對象創(chuàng)建新的屬性,下面通過代碼給大家講解,需要的朋友可以參考下
    2018-10-10
  • js中forEach,for in,for of循環(huán)的用法示例小結(jié)

    js中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
  • 高亮顯示web頁表格行的javascript代碼

    高亮顯示web頁表格行的javascript代碼

    本文從簡單的css高亮顯示表格的某一行說開去,探討了在不同瀏覽器下對于高亮功能的兼容性。闡述針對表格本身綁定javascript事件實現(xiàn)這一功能的方法。
    2010-11-11
  • 微信小程序?qū)W習(xí)總結(jié)(一)項目創(chuàng)建與目錄結(jié)構(gòu)分析

    微信小程序?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-06
  • JS事件循環(huán)機制event loop宏任務(wù)微任務(wù)原理解析

    JS事件循環(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)缺點

    這篇文章主要介紹了深入理解JavaScript繼承的多種方式和優(yōu)缺點,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05

最新評論