提高 JavaScript 技能的 25 個免費 JavaScript 教程

已發表: 2020-02-29

前端編程在 2015 年持續上升,我們只能預見 2016 年前端語言的另一個巨大增長階段。數以百萬計的新網絡用戶正在連接,他們最終都會學習計算機科學、網絡開發,尤其是編程。 JavaScript 已經確立了自己在編程語言庫中的領導地位,超越了 Java 等舊時經典; 有人說 JavaScript 正在達到頂峰,而我們認為它仍有上升空間,並主導著編程語言的選擇。

ECMAScript 6 已經如火如荼,沒有一天有人不寫 ES6 以及它為新老 JavaScript 開發人員帶來的好處。 JavaScript 的未來看起來很棒,對兩者來說都是如此; 網絡和軟件開發商。 硬件和軟件工程是 JavaScript 佔據主導地位的兩個新領域,尤其是通過使用 Node.js 等流行框架——JavaScript 每時每刻都在進入新市場,許多語言將發現難以跟上,社區力量JavaScript 背後的許多邏輯和合理的論點可能意味著其他語言會更好。 分析某樣東西以確定它是否適合你的下一份工作,歸結為問自己一些誠實的問題。

JavaScript 作為一種編程語言已經向全世界證明了它是可持續的、強大的和可靠的。 學習 JavaScript 從未如此有趣,大量的全職和自由職業者的工作,在 GitHub 上進行的許多有趣的項目,來自 JavaScript 社區的源源不斷的新文章和教程,語言生態系統非常健康,歸根結底時非常有幫助。 我們希望通過徵集過去 2-3 個月內發表的幾十篇 JavaScript 教程文章來為社區方面做出貢獻,確保文章的質量符合最新的 JavaScript 技巧、技巧,當然還有標準,例如 ES6。

在 ECMAScript 6 中編寫下一代可重用 JavaScript 模塊

在 ECMAScript 6 中編寫下一代可重用 JavaScript 模塊 – Smashing Magazine

Jim Cowart 花了很多時間試圖理解 ES6,並試圖找出其最秘密的怪癖和特徵,以幫助開發人員更好、更快、更有彈性地構建。 這篇文章的主要目的是幫助新老 Web 開發人員構建可以在 ES5 上下文中使用的 ES6 庫,這意味著 Jim 還將解釋和展示如何使用 Babel 將 ES6 庫轉換為功能齊全的 ES5 庫,這樣做的原因是因為網絡瀏覽器仍在努力追趕新標準。 為了使庫可重用並易於其他開發人員使用,Jim 非常關注模塊,為幾乎所有東西提供了一個模塊,以一種真正感覺正確的方式。

預覽

了解如何使用 D3.js 進行數據可視化

了解如何使用 D3.js 進行數據可視化

在當前 Web 增長、通過技術實現業務增長和一般數據科學目的的時代,數據可視化非常重要。 它可能非常具體,以至於有時只有少數非常有天賦的人在創建能夠吸引地球上一些最知名媒體網站注意的可視化效果,儘管並不總是合法的。 數據可視化有助於可視化簡單的數據集、分析您的網站的性能、深入研究分析數據等等。

多年來,JavaScript 已成為希望在瀏覽器中有效、準確地處理數據的數據科學家的最愛。 自 2011 年 D3.js 發布以來,該庫已經超越了任何可能的競爭,對於需要復雜工具來完成複雜數據科學任務的 JavaScript 開發人員來說,它是一個家喻戶曉的名字。

預覽

前端應用程序庫和組件架構

前端應用程序庫和組件架構 Telerik Developer Network

Cody Lindley 寫了一篇固執己見的 JavaScript 文章,它更像是幫助開發人員了解最流行的 JavaScript 框架和庫中的原生 JavaScript 組件如何變得相同的教程。 理解這個概念可以更容易地在要使用的框架或庫之間做出選擇,因為突然你意識到學習新東西不會有太多的工作,因為它將使用與上一次相同的組件結構框架。

預覽

2016 年 React.js 最佳實踐

2016 年 RisingStack 的 React.js 最佳實踐

React 是 2015 年的新聞。它是社區在過去幾年中增長最快的 JavaScript 庫,每天仍有數十萬開發人員積極使用它。 React 使得構建原生 UI 界面變得非常簡單,這些界面不會干擾您正在工作的項目的其他方面,因此從某種意義上說,您可以使用 React 來構建您的 UI,或者您可以使用 React 來幫助自己構建一個更好的 UI,而且 React 絕不會承擔主庫的角色,而是僅在您要求時才起作用。 雖然這一切聽起來很簡單,但學習曲線仍然存在,RisingStack 的 CTO Peter Marton 從他自己的角度講述了 React 的最佳實踐。

預覽

Ember 新手? 從這裡開始! (2016教程)

Ember 新手 - 從這裡開始! (2016教程)

我們已經確立了我們對 Ember 的看法,它是一個現代 Web 開發框架,非常適合我們最近的一篇文章; 最好的 JavaScript 框架。 Ember 使 JavaScript 開發人員能夠快速創建適用於桌面和移動設備的現代 Web 應用程序,而無需在其他拼接在一起的庫可能提供的功能上做出太多妥協。 如果您是 Ember 的新手並且最近剛聽說過它,我們強烈建議您閱讀 Frank Treacy 的本教程。 他的寫作風格和指導非常適合更深入地理解 Ember Framework。

預覽

如何學習 ES6

如何學習 ES6 — JavaScript 場景 — Medium

實際上,許多 JavaScript 開發人員早在標準發布之前就知道 ES6 是什麼。 這是編程語言的方式,標準作為草案可供社區試驗,然後再進行任何定稿。 ECMAScript 7 或 ES7 也是如此,功能已經可用,但每個人都在等待瀏覽器迎頭趕上,這並不總是一個順利的過程。 Eric Elliott 在他的 Medium 帖子中彙編了一組方便的文章和技巧,介紹如何更好地進行 ES6 學習過程。

預覽

JavaScript 中的函數定義

JavaScript 中的函數定義 – Marius Schulz

Marius Schulz 為 JavaScript 開發人員提供了一些關於函數定義如何在 JavaScript 中工作的見解,以及如何以三種不同的方式來處理它們,尤其是自 ES6 和箭頭函數的發布以來。

預覽

使用 webpack 和 ES6 啟動你自己的 JavaScript 庫

使用 webpack 和 ES6 啟動你自己的 JavaScript 庫

JavaScript 庫是很小的 JavaScript 腳本(並不總是很小),可幫助開發人員使用特定功能擴展他們的項目,否則您將需要單獨創建這些功能。 有人說 Rea​​ct.js 是一個庫,有人說它更像是一個框架。 無論如何,Krasimir Tsonev 正在縮小使用 ES6 和 WebPack 幫助創建 JavaScript 庫的過程。

預覽

7 個基本的 JavaScript 函數

7 個基本的 JavaScript 函數

David Walsh 是許多前端開發人員的最愛,他是一位始終如一的開發人員,也是一位不怕與前端世界分享他的想法、觀點和經驗的作家。 他自己的網站是一個很好的例子,說明了本地開發可以走多遠,以及它可以以內容網站的形式執行得多麼漂亮。 然而,他的帖子不是關於設計,而是關於 JavaScript 函數; 語言最重要的部分是函數,David 給出了我們在學習語言及其更重要方面的過程中可能已經放棄的另外七個函數。

預覽

使用 GMaps.js 簡化 Google 地圖

使用 GMaps.js 簡化 Google 地圖

網絡上的每一件事都歸結為一個元素,一個執行選擇功能的特定元素。 在地圖的情況下,我們可以使用來自官方 Google 頁面的原生 Google 地圖小部件,或者我們可以依賴第三方庫,這些庫提供的功能比我們從獨立小部件中獲得的要多一些。 在這裡,我們有一個關於如何最好地使用 GMaps.js 庫並充分利用構建地圖的教程。

預覽

JavaScript 開發者調查結果

JavaScript 開發者調查結果

調查可能聽起來根本不像教程,但在某種意義上它們確實如此。 它們是針對社區的教程,社區的思考方式,以及社區認為最適合處理 JavaScript 語言(考慮到它的現代演變)的教程。 所以是的,我們建議使用此調查作為一種方式來更多地了解 JavaScript 開發人員,了解他們的意見和建議,並可能將其中一些見解納入您自己的高效工作流程中。

預覽

通用反應

Universal React ◆ 24 種方式

像 React 這樣的庫確實改變了客戶端應用程序的生成方式。 這種編程方式有很多好處,提高性能,更容易訪問,但也有缺點,缺點之一是必須向沒有啟用 JavaScript 的瀏覽器的用戶或搜索提供 JavaScript 內容引擎機器人不能很好地使用 JavaScript。 好消息是這個問題已經被認識到,並且可以構建一個可以在服務器上呈現的全功能客戶端應用程序。 React 在使服務器端和客戶端 JavaScript 執行成為現實方面處於領先地位,Jack Franklin 發布了一篇教程,深入探討了這些問題以及如何解決這些問題。

預覽

如何在 JavaScript 中安排後台任務

如何在 JavaScript 中安排後台任務

Craig Buckler 簡要解釋了 JavaScript 中的後台任務是如何工作的,以及如何最好地處理它們。 Craig Buckler 為 SitePoint 撰寫了數以千計的文章,並且在 JavaScript、HTML5 和 CSS3 等語言方面擁有豐富的經驗——因此當他談論如此廣泛的話題時,您可以相信他的話。

預覽

在 JavaScript 中解析 RSS 提要 - 選項

在 JavaScript 選項中解析 RSS 提要 · Raymond Camden

RSS 提要使網站發布的內容更易於訪問。 今天 99% 的博客都支持 RSS 提要,這使得其他人可以輕鬆地通過使用提要定期接收內容。 提要的其他用途包括解析它們的能力,然後以不同的方式使用解析的數據,無論是用於鏈接農場網站,還是用於需要來自已解析 RSS 提要的特定數據集的應用程序,Raymond Camden 對此主題進行了更多探討並為希望使用 JavaScript 解析 RSS 提要的 JavaScript 開發人員計算可能的選項。

預覽

使用 JavaScript 在滾動時旋轉元素

新代碼 – 使用 JavaScript 在滾動時旋轉元素

Dudley Storey 分享了他如何將他的網站轉變為完全擺脫任何 JavaScript 框架的故事,而是使用 Vanilla JavaScript 為他的讀者構建交互式 Web 瀏覽體驗,他的最新作品是關於如何旋轉單個頁面元素的教程使用香草 JavaScript。 這是一個引人入勝的教程,它將為在 Web 項目中使用 JS 的許多其他交互方式打開大門。

預覽

如何使用 React、Redux 和 Immutable.js 構建 Todo 應用程序

如何使用 React Redux 和 Immutable.js 構建 Todo 應用程序

React、Redux 和 Immutable.js 正在迅速發展 JavaScript 庫名稱,它們正在改變我們對開發的看法,以及我們為所有設備構建應用程序的方式。 Emre Guneyler 在本文中向我們簡要介紹了所有三個庫,以及如何構建一個“待辦事項應用程序”,讓您更好地了解如何使用現代框架和庫構建應用程序。

預覽

將 Angular 1 代碼準備為 Angular 2 的 5 個步驟

為 Angular 2 準備 Angular 1 代碼的 5 個步驟 – Oren Farhi – 關於 Javascript 和開發的思考

我們是 Angular.js 的忠實粉絲——只需查看一些我們最好的 Angular.js 內容,例如響應式 AngularJS 網站模板、AngularJS 管理模板和 Angular 2 社區資源——我們已經準備好迎接 Angular 2,甚至加入 Oren Farhi 的本教程後更是如此。 Angular 2 的到來是不可避免的,如果您現在是一個活躍的 Angular.js 開發人員,請閱讀本教程為即將到來的更改做好準備,並準備您的代碼以輕鬆過渡到新版本。

預覽

350 個要點中的 ES6 概述

bevacqua es6 star2 ES6 概述 350 個要點

ES6 是最近幾年 JavaScript 標準的最大更新,它是對已經穩固的編程語言的巨大補充,但這一補充真正改變了 JavaScript 在網絡上的工作方式,以及它將繼續作為瀏覽器工作的方式開始集成更多棘手的功能。 這個 GitHub 存儲庫是 350 多個要點的組合,討論了 ES6 的大量不同方面,比如特性,以及如何使用這些特性。 還有函數,以及新函數是什麼樣子,提供大量外向資源鏈接,幫助您加深對 ES6 的理解。

預覽

並發 JavaScript:關於 JS 並發的 3 部分系列

並發 JavaScript 1 getiblog

Kyle Simpson 花點時間分享了他對 JavaScript 並發性和異步性的看法,以及如何在自己的開發環境中使用這些相同的概念。 引人入勝的內容,更重要的是分為三個不同部分的深入教程。

預覽

框架的成本

Aerotwist 框架的成本

嘗試學習如何在 JavaScript 中編碼,而不會遇到關於如何使用框架將解決所有問題的強烈建議,如今大部分 JavaScript 學習實際上是基於框架,如 React、Angular、Backbone 等。 是的,框架使快速構建 Web 和移動應用程序變得容易,但是使用框架而不是原生(普通)JS 的實際成本是多少? 保羅劉易斯通過將簡潔的基準分析放在一起來描述這一點,幫助新的(也許是經驗豐富的)開發人員對框架做出更好的選擇。

預覽

大型 Angular 應用程序剖析

大型 Angular 應用程序剖析 — 中

Angular 目前是用於構建快速 Web 應用程序的領先 JavaScript 框架。 然而,構建擴展的大型 Angular 應用程序可能會被證明是棘手的,有人會說它已經到了讓你發瘋的地步,所以 Kristian Poslek 正在花時間通過提供教程來回饋社區關於如何在不發瘋的情況下構建大型 Angular 應用程序。

預覽

使用 JavaScript 進行人臉接近檢測

使用 JavaScript 進行人臉接近檢測

編程語言每天都變得越來越智能。 Peter Bengtsson 在他的教程中解釋了我們如何使用 JavaScript 構建一個人臉接近檢測引擎,您可以立即在您的應用程序和項目中使用它。

預覽

JavaScript 能做什麼?

JavaScript 可以做什麼 BrightGauge 午餐和學習演示

不完全確定 JavaScript 實際上可以做什麼? David Small 簡單而有效地介紹了 JavaScript 可以做的事情,以及這種語言的主要目的是什麼。 任何對 JavaScript 感興趣的人都可以閱讀,這是一個教授該語言更廣泛方面的教程。

預覽

擺脫 JavaScript 疲勞 – React 版

擺脫 JavaScript 疲勞 React 版

疲勞是生產力的殺手,長時間處理某件事會導致深度疲勞,這種疲勞可能會持續很長時間,當然,還有一種疲勞是我們歸因於特定框架的,在這種情況下會發生成為反應。 那麼,我們如何擺脫對 React 的疲勞呢? Reto Schlapfer 對這個問題有一個答案,深入研究。

預覽

在線學習 JavaScript 的資源

我們已經探索了網絡必須提供的一些關於 JavaScript 的最新最佳教程,但是如果您沒有任何 JavaScript 方面的先驗知識,您將如何使用所有這些教程? 我想這不太可能,因為您特別尋找 JavaScript 教程,但您可能想擴展您的 JS 知識,或者在缺席很長時間後更新它。 在這種情況下,這裡有一個非常容易訪問的網站和平台列表,這些網站和平台提供免費在線學習 JavaScript。 只有最好。

  • Codecademy — 一個掌握 Web 開發基礎知識的平台,尤其是 JavaScript。 Codecademy 是新的和有抱負的前端開發人員開始職業生涯的首批網站之一。 它很有趣,它是互動的,而且它做得很好。
  • Learn-JS — 是一個與 Codecademy 類似的平台,具有不同的任務集和學習曲線,在完成 Codecademy 後非常有幫助,可以提高您新學到的技能,並且可能會注意到您可能錯過的內容。
  • freeCodeCamp——一個快速發展的基於社區的編碼平台,網站的每個成員都可以參與解決問題、挑戰,然後幫助為無法負擔專業編碼人員的非營利組織推出新的和令人興奮的應用程序。 這是一個雙贏的局面。
  • 風格指南——風格指南有助於構建代碼,使其他人更容易構建,AirBNB 發布了他們自己的風格指南,它很快成為你可以在 GitHub 或其他任何地方找到的最受歡迎的 JavaScript 風格指南。

總而言之,很明顯,學習 JavaScript 不應該是一個大問題,活躍的開發人員不斷分享他們的建議、見解和教程,關於如何變得更好,以及如何最大程度地使用該語言。 我們真誠地希望這些資源對您的學習過程大有裨益。