Top 25 kostenlose JavaScript-Tutorials zur Verbesserung Ihrer JavaScript-Fähigkeiten
Veröffentlicht: 2020-02-29Die Frontend-Programmierung hat 2015 weiter zugenommen, und wir können nur 2016 eine weitere enorme Wachstumsphase für Frontend-Sprachen voraussehen. Millionen neuer Webbenutzer werden verbunden, und alle werden irgendwann etwas über Informatik und Webentwicklung lernen und insbesondere die Programmierung. JavaScript hat sich als führend in der Programmiersprachenbibliothek etabliert und übertrifft alte Klassiker wie Java; Einige sagen, dass JavaScript seinen Höhepunkt erreicht, während wir der Meinung sind, dass es noch Raum für seinen Aufstieg hat und die Auswahl an Programmiersprachen dominiert.
ECMAScript 6 ist bereits in vollem Gange, es vergeht kein Tag, an dem nicht jemand über ES6 schreibt und was es für neue und erfahrene JavaScript-Entwickler bringt. Die Zukunft von JavaScript sieht für beide großartig aus; Web- und Softwareentwickler. Hardware- und Software-Engineering sind zwei neue Bereiche, in denen JavaScript vorherrschend ist, insbesondere durch die Verwendung beliebter Frameworks wie Node.js – JavaScript erreicht jeden Moment neue Märkte, und viele Sprachen werden es schwer haben, mit der Community-Macht Schritt zu halten hinter JavaScript ist vielen logischen und rationalen Argumenten entwachsen, die andeuten könnten, dass andere Sprachen besser sind. Wenn Sie etwas analysieren, um zu sehen, ob es für Ihren nächsten Job geeignet ist, müssen Sie sich ein paar ehrliche Fragen stellen.
JavaScript als Programmiersprache hat sich weltweit als nachhaltig, leistungsstark und zuverlässig erwiesen. JavaScript zu lernen war noch nie so faszinierend, viele Jobs sowohl in Vollzeit als auch freiberuflich, viele interessante Projekte, an denen man auf GitHub arbeiten kann, ständig neue Artikel und Tutorials aus der JavaScript-Community, das Sprachen-Ökosystem ist extrem gesund, und super hilfreich, wenn es darauf ankommt. Wir möchten zu diesem Community-Aspekt beitragen, indem wir ein paar Dutzend JavaScript-Tutorial-Artikel aufnehmen, die in den letzten 2-3 Monaten veröffentlicht wurden, um sicherzustellen, dass die Qualität der Artikel den neuesten JavaScript-Tipps, -Tricks und natürlich - den Standards entspricht , wie der ES6.
Schreiben von wiederverwendbaren JavaScript-Modulen der nächsten Generation in ECMAScript 6
Jim Cowart hat viel Zeit damit verbracht, ES6 zu verstehen und seine geheimsten Macken und Eigenschaften herauszufinden, die Entwicklern helfen können, besser, schneller und widerstandsfähiger zu bauen. Die Hauptabsicht des Artikels besteht darin, alten und neuen Webentwicklern zu helfen, ES6-Bibliotheken zu erstellen, die im ES5-Kontext verwendet werden können, was bedeutet, dass Jim auch erklären und zeigen wird, wie Babel verwendet werden kann, um ES6-Bibliotheken in voll funktionsfähige ES5-Bibliotheken umzuwandeln. und der Grund dafür ist, dass Webbrowser immer noch versuchen, mit dem neuen Standard Schritt zu halten. Um die Bibliothek wiederverwendbar und einfach für andere Entwickler zu machen, konzentriert sich Jim stark auf Module und bietet ein Modul für fast alles, auf eine Weise, die sich tatsächlich richtig anfühlt.
Erfahren Sie, wie Sie mit D3.js Datenvisualisierungen erstellen
Die Datenvisualisierung könnte im aktuellen Zeitalter des Webwachstums, des Geschäftswachstums durch Technologie und der allgemeinen Datenwissenschaft nicht wichtiger sein. Und es kann so spezifisch sein, dass manchmal nur eine Handvoll sehr begabter Menschen Visualisierungen erstellen, die die Aufmerksamkeit einiger der bekanntesten Medienseiten der Welt auf sich ziehen, wenn auch nicht immer legal. Die Datenvisualisierung kann hilfreich sein, um einfache Datensätze zu visualisieren, Ihre Website auf Leistung zu analysieren, tiefer in Analysedaten einzutauchen und vieles mehr.
Im Laufe der Jahre hat sich JavaScript zu einem Favoriten unter Datenwissenschaftlern entwickelt, die effektiv und genau mit Daten im Browser spielen möchten. Seit der Veröffentlichung von D3.js im Jahr 2011 ist die Bibliothek jeder möglichen Konkurrenz entwachsen und ein bekannter Name für JavaScript-Entwickler, die ein komplexes Tool für komplexe Data Science-Aufgaben benötigen.
Front-End-Anwendungsbibliotheken und Komponentenarchitekturen
Cody Lindley hat einen rechthaberischen JavaScript-Artikel verfasst, der eher wie ein Tutorial wirkt und Entwicklern hilft zu lernen, wie die nativen JavaScript-Komponenten in den beliebtesten JavaScript-Frameworks und -Bibliotheken alle gleich geworden sind. Wenn Sie dieses Konzept verstehen, ist es einfacher, die Wahl zwischen den Frameworks oder Bibliotheken zu treffen, mit denen Sie arbeiten möchten, denn plötzlich stellen Sie fest, dass es nicht so viel Arbeit kostet, etwas Neues zu lernen, da es so ziemlich dieselbe Komponentenstruktur wie Ihre letzte verwendet. Rahmen.
React.js-Best Practices für 2016
React war 2015 überall in den Nachrichten. Es ist die am schnellsten wachsende JavaScript-Bibliothek, die die Community in den letzten Jahren gesehen hat, und wird immer noch täglich von Hunderttausenden von Entwicklern aktiv genutzt. React macht es lächerlich einfach, native UI-Schnittstellen zu erstellen, die andere Aspekte Ihres Projekts, an dem Sie arbeiten, nicht beeinträchtigen bessere Benutzeroberfläche, und React wird zu keinem Zeitpunkt die Rolle einer Hauptbibliothek übernehmen und stattdessen nur funktionieren, wenn Sie es wünschen. Auch wenn das alles einfach klingt, gibt es immer noch eine Lernkurve, und der CTO von RisingStack, Peter Marton, erzählt aus seiner eigenen Perspektive alles über die Best Practices für React.
Neu bei Ember? Fang hier an! (2016-Tutorial)
Wir haben bereits unsere Meinung zu Ember festgelegt, es ist ein modernes Webentwicklungs-Framework, das perfekt zu einem unserer letzten Artikel passt; besten JavaScript-Frameworks. Ember ermöglicht es JavaScript-Entwicklern, schnell moderne Webanwendungen für Desktop- und Mobilgeräte zu erstellen, ohne große Kompromisse bei den Angeboten anderer zusammengefügter Bibliotheken eingehen zu müssen. Wenn Sie neu bei Ember sind und in letzter Zeit zufällig davon gehört haben, empfehlen wir dringend, sich dieses Tutorial von Frank Treacy anzusehen. Sein Schreibstil und seine Anleitung sind perfekt, um Ember Framework tiefer zu verstehen.
So lernen Sie ES6
Tatsächlich wussten viele JavaScript-Entwickler, was ES6 ist, lange bevor der Standard veröffentlicht wurde. Es ist die Art und Weise der Programmiersprachen, Standards werden als Entwürfe zur Verfügung gestellt, damit die Community experimentieren kann, bevor irgendwelche Finalisierungen vorgenommen werden. Gleiches gilt für ECMAScript 7 oder ES7 , die Features sind bereits vorhanden, aber alle warten darauf, dass die Browser aufholen, was nicht immer reibungslos abläuft. Eric Elliott hat in seinem Medium-Post eine praktische Reihe von Artikeln und Tipps zusammengestellt, wie man den ES6-Lernprozess besser angehen kann.
Funktionsdefinitionen in JavaScript
Marius Schulz gibt JavaScript-Entwicklern einen kleinen Einblick, wie Funktionsdefinitionen in JavaScript funktionieren und wie sie auf drei verschiedene Arten angegangen werden können, insbesondere seit der Veröffentlichung von ES6 und Arrow Functions.
Starten Sie Ihre eigene JavaScript-Bibliothek mit Webpack und ES6
JavaScript-Bibliotheken sind winzig kleine JavaScript-Skripte (nicht immer winzig), die Entwicklern helfen, ihre Projekte um eine bestimmte Funktion zu erweitern, die Sie sonst separat erstellen müssten. Einige sagen, dass React.js als Bibliothek fungiert, während andere sagen, dass es eher ein Framework ist. Wie dem auch sei, Krasimir Tsonev schränkt den Prozess der Erstellung einer JavaScript-Bibliothek mit ES6 und der Hilfe von WebPack ein.
7 wesentliche JavaScript-Funktionen
David Walsh ist ein Liebling vieler Front-End-Entwickler, ein konsequenter Entwickler und auch ein Autor, der keine Angst hat, seine Gedanken, Meinungen und Erfahrungen mit der Front-End-Welt zu teilen. Seine eigene Website ist ein großartiges Beispiel dafür, wie weit native Entwicklung gehen kann und wie schön sie in Form einer Content-Website ausgeführt werden kann. In seinem Beitrag geht es jedoch nicht um Design, sondern um JavaScript-Funktionen; der wichtigste Teil der Sprache sind Funktionen, und David nennt als zusätzliche sieben Funktionen, die wir während unseres Prozesses des Erlernens der Sprache und ihrer wichtigeren Aspekte möglicherweise aufgegeben haben.
Google Maps leicht gemacht mit GMaps.js
Jedes einzelne Ding im Web läuft auf ein Element hinaus, ein bestimmtes Element, das eine ausgewählte Funktion ausführt. Im Fall von Karten können wir das native Google Maps-Widget von der offiziellen Google-Seite verwenden oder uns auf Bibliotheken von Drittanbietern verlassen, die ein bisschen mehr Funktionalität bieten, als wir von einem eigenständigen Widget erhalten würden. Hier haben wir ein Tutorial, wie Sie am besten an die GMaps.js-Bibliothek herangehen und das Beste aus der Erstellung Ihrer Karten machen.
Ergebnisse der JavaScript-Entwicklerumfrage
Umfragen mögen überhaupt nicht wie Tutorials klingen, aber in gewisser Weise sind sie es. Sie sind Tutorials für die Community, die Denkweise der Community und auch das, was die Community für die beste Herangehensweise an die Sprache JavaScript hält, angesichts ihrer modernen Entwicklung. Also ja, wir empfehlen, diese Umfrage zu nutzen, um mehr über JavaScript-Entwickler, ihre Meinungen und Empfehlungen zu erfahren und vielleicht einige dieser Erkenntnisse in Ihren eigenen produktiven Workflow zu integrieren.
Universelle Reaktion

Bibliotheken wie React haben die Art und Weise, wie clientseitige Apps erstellt werden, wirklich verändert. Diese Art der Programmierung bietet viele Vorteile, verbesserte Leistung und einfachere Zugänglichkeit, aber es gibt auch Nachteile, und einer der Nachteile ist die Bereitstellung von JavaScript-Inhalten für Benutzer ohne JavaScript-fähige Browser oder für die Suche Engine-Roboter, die mit JavaScript nicht wirklich gut funktionieren. Die gute Nachricht ist, dass dieses Problem erkannt wurde und es möglich ist, eine voll funktionsfähige clientseitige Anwendung zu erstellen, die auf dem Server gerendert werden kann. React ist wegweisend, um serverseitige und clientseitige JavaScript-Ausführung Realität werden zu lassen, und Jack Franklin hat ein Tutorial veröffentlicht, das tiefer in die Probleme eingeht und wie sie gelöst werden können.
So planen Sie Hintergrundaufgaben in JavaScript
Craig Buckler erklärt prägnant, wie Hintergrundaufgaben in JavaScript funktionieren und wie man sie am besten angeht. Craig Buckler hat Tausende von Artikeln für SitePoint geschrieben und verfügt über umfangreiche Erfahrung mit Sprachen wie JavaScript, HTML5 und CSS3 – Sie können sich also auf sein Wort verlassen, wenn er über so breite Themen spricht.
Parsen von RSS-Feeds in JavaScript – Optionen
RSS-Feeds machen die im Internet veröffentlichten Inhalte viel zugänglicher. 99% der Blogs unterstützen heute RSS-Feeds, was es anderen leicht macht, regelmäßig Inhalte durch die Verwendung von Feeds zu erhalten. Andere Verwendungsmöglichkeiten für Feeds umfassen die Möglichkeit, sie zu parsen und die geparsten Daten dann auf unterschiedliche Weise zu verwenden, sei es für eine Linkfarm-Website oder für eine Anwendung, die bestimmte Datensätze aus einem geparsten RSS-Feed benötigt. Raymond Camden untersucht dieses Thema mehr und zählt die möglichen Optionen für JavaScript-Entwickler herunter, die JavaScript zum Parsen von RSS-Feeds verwenden möchten.
Elemente beim Scrollen mit JavaScript drehen
Dudley Storey teilt seine Geschichte darüber, wie er seine Website komplett frei von JavaScript-Frameworks gemacht hat und stattdessen Vanilla JavaScript verwendet, um ein interaktives Webbrowser-Erlebnis für seine Leser zu erstellen. Seine neueste Kreation war ein Tutorial zum Rotieren einzelner Seitenelemente mit Vanille-JavaScript. Es ist ein faszinierendes Tutorial, das die Türen zu vielen anderen interaktiven Möglichkeiten öffnet, JS in Ihren Webprojekten zu verwenden.
So erstellen Sie eine Todo-App mit React, Redux und Immutable.js
React, Redux und Immutable.js sind sich schnell entwickelnde JavaScript-Bibliotheksnamen, die unsere Wahrnehmung von Entwicklung und auch die Art und Weise, wie wir Apps für alle Geräte erstellen, verändern. Emre Guneyler gibt uns in diesem Artikel eine kurze Einführung in alle drei Bibliotheken und wie man eine einzelne "Todo-App" erstellt, die Ihnen einen besseren Überblick darüber gibt, wie Apps mit modernen Frameworks und Bibliotheken erstellt werden.
5 Schritte zum Vorbereiten Ihres Angular 1-Codes für Angular 2
Wir sind große Fans von Angular.js – sehen Sie sich einfach einige unserer besten Angular.js-Inhalte an, z mehr noch mit der Hinzufügung dieses Tutorials von Oren Farhi. Das Kommen von Angular 2 ist unvermeidlich, und wenn Sie derzeit ein aktiver Angular.js-Entwickler sind, lesen Sie dieses Tutorial, um sich auf die kommenden Änderungen vorzubereiten und Ihren Code für einen einfachen Übergang in eine neue Version vorzubereiten.
ES6-Übersicht in 350 Aufzählungspunkten
ES6 war das größte Update eines JavaScript-Standards in den letzten Jahren, es ist eine große Ergänzung zu einer bereits soliden Programmiersprache, aber diese Ergänzung ändert wirklich die Art und Weise, wie JavaScript im Web funktioniert und wie es weiterhin als Browser funktionieren wird beginnen, mehr der kniffligen Funktionen zu integrieren. Dieses GitHub-Repository ist eine Kombination aus mehr als 350+ Aufzählungspunkten, die eine Menge verschiedener Aspekte von ES6 diskutieren, z. B. Funktionen und deren Verwendung. Außerdem Funktionen und wie neue Funktionen aussehen, mit vielen ausgehenden Ressourcenlinks, die Ihnen helfen, Ihr Verständnis von ES6 zu vertiefen.
Gleichzeitig JavaScript: eine dreiteilige Serie über Parallelität in JS
Kyle Simpson nimmt sich einen Moment Zeit, um seine Gedanken zu JavaScript-Parallelität und Asynchronität zu teilen und wie Sie dieselben Konzepte in Ihrer eigenen Entwicklungsumgebung verwenden können. Faszinierende Inhalte und noch viel mehr ein ausführliches Tutorial, das in drei verschiedene Teile unterteilt ist.
Die Kosten von Frameworks
Versuchen Sie zu lernen, wie man in JavaScript programmiert, ohne auf intensive Ratschläge zu stoßen, wie die Verwendung eines Frameworks alle Ihre Probleme löst. Ein Großteil des JavaScript-Lernens basiert heutzutage tatsächlich auf Frameworks wie React, Angular, Backbone und anderen. Ja, Frameworks machen es einfach, Web- und mobile Apps schnell zu erstellen, aber was sind die tatsächlichen Kosten für die Verwendung von Frameworks und nicht von nativem (Vanilla) JS? Paul Lewis stellt dies dar, indem er eine prägnante Benchmark-Analyse zusammenstellt, die neuen (und vielleicht erfahrenen) Entwicklern hilft, bessere Entscheidungen über Frameworks zu treffen.
Anatomie einer großen Angular-Anwendung
Angular ist derzeit das führende JavaScript-Framework zum Erstellen schneller Web-Apps. Allerdings kann sich das Erstellen von erweiterten und großen Angular-Apps als knifflig erweisen. Einige würden sagen, dass man kurz davor ist, verrückt zu werden, also nimmt sich Kristian Poslek Zeit, um der Community etwas zurückzugeben, indem er ein Tutorial anbietet wie Sie große Angular-Anwendungen erstellen, ohne verrückt zu werden.
Gesichtserkennung mit JavaScript
Programmiersprachen werden von Tag zu Tag intelligenter. Peter Bengtsson erklärt in seinem Tutorial, wie wir mit JavaScript eine Engine zur Erkennung von Gesichtsnähe erstellen können, die Sie sofort in Ihren Apps und Projekten verwenden können.
Was kann JavaScript tun?
Sie sind sich nicht ganz sicher, was JavaScript tatsächlich kann? David Small präsentiert eine einfache, aber effektive Präsentation über die Dinge, die JavaScript tatsächlich kann, und was der Hauptzweck dieser Sprache ist. Interessante Lektüre für jeden, der sich für JavaScript interessiert, ein Tutorial, das die breiteren Aspekte der Sprache lehrt.
Raus aus der JavaScript-Müdigkeit – React Edition
Müdigkeit ist ein Produktivitätskiller. Wenn man zu lange mit etwas arbeitet, kann man tiefe Müdigkeit erleben, die lange anhalten kann, aber natürlich gibt es auch die Art von Müdigkeit, die wir bestimmten Rahmenbedingungen zuschreiben, was in diesem Fall der Fall ist zu reagieren. Wie kommen wir also aus unserer Müdigkeit gegenüber React heraus? Reto Schlapfer hat eine Antwort auf diese Frage, tauchen Sie ein.
Ressourcen zum Online-Lernen von JavaScript
Wir haben uns einige der besten aktuellen Tutorials zu JavaScript angesehen, die das Web zu bieten hat, aber was machen Sie mit all diesen Tutorials, wenn Sie keine Vorkenntnisse in JavaScript haben? Ich denke, es ist sehr unwahrscheinlich, da Sie speziell nach JavaScript-Tutorials gesucht haben, aber wahrscheinlich möchten Sie Ihre JS-Kenntnisse erweitern oder vielleicht nach längerer Abwesenheit auffrischen. In diesem Fall finden Sie hier eine sehr leicht zugängliche Liste von Websites und Plattformen, die das kostenlose Online-Lernen von JavaScript anbieten. Nur das Beste.
- Codecademy — eine Plattform zum Erlernen der Grundlagen der Webentwicklung, insbesondere JavaScript. Codecademy ist eine der ersten Websites, mit denen neue und aufstrebende Frontend-Entwickler ihre Karriere beginnen. Es macht Spaß, ist interaktiv und macht seine Arbeit gut.
- Learn-JS — ist eine ähnliche Plattform wie Codecademy, mit anderen Aufgaben und Lernkurven und sehr hilfreich nach Abschluss von Codecademy, um Ihre neu erlernten Fähigkeiten zu verfeinern und vielleicht zu bemerken, was Sie vielleicht verpasst haben.
- freeCodeCamp – eine sich schnell entwickelnde Community-basierte Codierungsplattform, auf der jedes Mitglied der Website an der Lösung von Problemen und Herausforderungen teilnehmen und dann helfen kann, neue und aufregende Apps für gemeinnützige Organisationen zu entwickeln, die sich keine professionellen Programmierer leisten können. Es ist eine Win-Win-Situation.
- Style Guide - Styleguides Hilfe Build - Code, der es einfach für andere zu bauen macht auf, AIRBNB ihren eigenen Style Guide veröffentlicht und es sich schnell zum beliebtesten JavaScript Style Guide Sie auf GitHub finden oder anderswo für diese Angelegenheit.
Zusammenfassend lässt sich sagen, dass das Erlernen von JavaScript kein allzu großes Problem sein sollte. Aktive Entwickler teilen ständig ihre Ratschläge, Erkenntnisse und Tutorials, wie man besser wird und wie man die Sprache optimal nutzt. Wir hoffen wirklich, dass diese Ressourcen für Ihren Lernprozess von größtem Nutzen sind.