Projekte können manchmal der schlechteste Weg sein, JavaScript zu lernen

Einer der überraschend gefährlichsten Ratschläge für JavaScript-Lernende ist, „nur Projekte zu machen.“

Um es 100% klar zu sagen:Projekte sind oft eine großartige Möglichkeit, jede Programmiersprache zu lernen. Es treten jedoch Probleme auf, wenn Menschen bestimmte Projekte ausprobieren, bevor sie genug über die Grundlagen wissen, um zu beurteilen, was angemessen ist.

Dieses Thema ist wichtig, da der Versuch eines Projekts zu früh einer der häufigsten Gründe ist, warum Menschen JavaScript vollständig aufgeben.

Ich werde nicht zulassen, dass Ihnen das passiert, also behandeln wir Folgendes:

  • die häufigsten Fallen, in die JavaScript-Lernende tappen, wenn sie an Projekten arbeiten, und warum
  • konkrete Beispiele für Projekte, die Menschen häufig davon abhalten, JavaScript zu lernen
  • wie man die üblichen Fallen vermeidet und effektiver lernt
  • wann und wie man mit Projekten beginnt
  • Wie Sie wissen, welche Konzepte Sie verwenden sollten, wenn Sie mit der Durchführung von Projekten beginnen

Das Ziel dieses Artikels ist es, Ihnen Vertrauen in die Zukunft zu geben, egal ob Sie JavaScript oder eine andere Sprache lernen.

Dieser Artikel wurde von Tim Severien und Chris Perry begutachtet. Vielen Dank an alle Peer-Reviewer von SitePoint, die SitePoint-Inhalte so gut wie möglich gemacht haben!

Der allgemeine Satz, der oft zum Scheitern führt

Eines der häufigsten Dinge, die ich von Leuten höre, die JavaScript lernen möchten, ist:„Ich mache einfach schnell eine Diashow.“

Sie versuchen, die Diashow zu erstellen, und normalerweise passiert eines von zwei Dingen:

  1. Es wird zu schwer und sie sagen sich, dass sie „später darauf zurückkommen“ – was oft bedeutet, für immer aufzugeben.

  2. Sie werden es schaffen, die Diashow zu erstellen, aber da sie so viel Material auf einmal abdecken mussten, können sie es später nicht anwenden. Das führt zu Entmutigung, was wiederum bedeuten kann, für immer aufzugeben.

Warum passiert das?

Die Falle von zu viel, zu früh

JavaScript-Lernende wählen oft eine Diashow als ihr erstes Projekt, weil es einfach klingt.

Sobald sie es versuchen, stellen sie fest, dass es schwieriger ist, als sie dachten. Das Erstellen einer Diashow kann Arrays, Funktionen, Schleifen, Animationen, Timing, Ereignis-Listener, DOM-Manipulation und mehr umfassen. Dies kann eine überwältigende Anzahl neuer Konzepte für jemanden sein, der gerade erst anfängt.

Plötzlich ist dieses Projekt, das einfach sein sollte, zu schwierig. Dieser Unterschied zur ursprünglichen Erwartung erzeugt einen unangenehmen psychologischen Effekt. „Wenn ich diese einfache Sache nicht kann“, sagen sich die Lernenden, „dann bin ich vielleicht einfach nicht für JavaScript geschaffen.“

Alternativ wird es einigen Leuten gelingen, eine Diashow zu erstellen, aber sie wird mit einer Menge Hilfe von Tutorials und relativ wenig Verständnis dafür, was passiert, zusammengeschustert. In solchen Fällen hören Sie häufig Sätze wie „Ich konnte dem Tutorial folgen, aber dann konnte ich nichts davon alleine anwenden.“

In jedem Fall ist das Endergebnis oft ein Gefühl der Entmutigung, das die Leute davon abhalten kann, JavaScript zu lernen.

Diese Szenarien treten nicht nur bei Diashows auf, sondern auch bei anderen Projekten, die die Lernenden zu früh versuchen werden. Eine To-Do-Liste beispielsweise klingt simpel, kann aber ein Full-Stack-Projekt sein, wenn die Daten außerhalb des Local Storage oder Cookies des Browsers gespeichert werden sollen.

Wenn jemand anfängt, JavaScript zu lernen, kann es schwierig sein, den Schwierigkeitsgrad eines Projekts im Voraus zu bestimmen, und das ist die Quelle der Probleme.

Welche Projekte behindern oft das Lernen?

Um diese Diskussion konkreter zu machen, hier einige spezifische, einfach klingende Projekte, an denen sich Menschen oft zu früh versuchen, und die Konzepte, die tatsächlich beteiligt sind.

Projekt Beteiligte Konzepte
Quiz Arrays, Objekte, Funktionen, Formulare, Ereignis-Listener
To-Do-Liste Arrays, Objekte, Funktionen, irgendeine Art von Speicher (Front-End oder Back-End), DOM-Manipulation, Event-Listener
Ein „kleines soziales Netzwerk“ Dies ist ein Full-Stack-Projekt, das neben Front-End-JavaScript auch Back-End-Konzepte umfasst, einschließlich Datenbanken, Authentifizierung, Sicherheit, Benutzerverwaltung usw.

Worum geht es?

Der Sinn dieses Abschnitts besteht nicht darin, Sie davon abzuhalten, neue Dinge auszuprobieren. Bei einigen dieser Projekte können Sie schneller als erwartet ankommen, solange Sie nicht von vorne anfangen.

Alles, was Sie brauchen, ist ein besserer Ansatz.

Wie man effektiver lernt

Hier sind ein paar Strategien, um die Fallen zu vermeiden, die damit verbunden sind, Projekte zu früh zu erledigen:

  • beginnen Sie mit Konzepten
  • Üben wie im echten Leben

Strategie 1:Beginnen Sie mit Konzepten

Anstatt direkt in große Projekte einzusteigen, versuchen Sie zuerst, die kleinsten Teile der Funktionalität zu lernen. Auf diese Weise beginnen Sie mit einer stärkeren Wissensbasis und haben eine einfachere Zeit, Dinge zu programmieren.

Zeigen Sie beispielsweise Text in einem div mit innerHTML an . Ändere die Farbe des Textes eines Absatzes. Addiere zwei Zahlen. Schreiben Sie Ihre erste Funktion. Machen Sie sich mit Variablen vertraut. Speichern Sie eine Sammlung von Dingen in einem Array oder einem Objekt. Lassen Sie etwas passieren, wenn auf eine Schaltfläche geklickt wird. Erfahren Sie mehr über Logik mit if und else . Probieren Sie einige Loops aus.

Spielen Sie mit diesen Konzepten und machen Sie sich damit vertraut. Sie werden bald feststellen, dass Sie in der Lage sind, viele Dinge zu erstellen. Darüber hinaus werden Sie durch Ihre neu gewonnene Erfahrung viel besser bei der Entscheidung, welche Projekte Sie durchführen möchten. Wenn Sie sehen, dass Sie mehr Erfolg haben, wächst Ihr Selbstvertrauen und der Schwung wird Sie viel schneller voranbringen, als zu versuchen, sich am Anfang in ein großes Projekt zu stürzen.

Um es klar zu sagen, Herausforderungen sind wichtig, weil sie Ihnen helfen, zu wachsen. Es ist großartig, sich über seine Komfortzone hinaus zu dehnen, aber nicht so weit, dass es Ihrem Fortschritt im Wege steht.

Strategie 2:Üben wie im wirklichen Leben

Nehmen Sie sich beim Lernen etwas Zeit, um unter realen Bedingungen zu üben. Das bedeutet, dass Sie Ihren eigenen Texteditor und Ihren eigenen Browser verwenden und etwas programmieren, ohne sich auf ein Tutorial verlassen zu müssen.

Je mehr Sie das Programmieren unter realen Bedingungen üben, desto unwahrscheinlicher fühlen Sie sich festgefahren, wenn es an der Zeit ist, etwas Echtes zu erstellen.

Dies ist eine großartige Möglichkeit, das Problem zu vermeiden, dass Sie etwas mit einem Tutorial tun können, es aber nicht selbst anwenden können.

Also, wann finden die Projekte statt?

Sobald Sie anfangen, die Grundlagen von JavaScript zu lernen, werden Sie anfangen zu wissen, welche Art von Projekten in Reichweite sind.

Obwohl es wichtig ist, sich selbst herauszufordern, möchten Sie beispielsweise nicht versuchen, eine End-to-End-Digital-Banking-App zu erstellen, bevor Sie wissen, wie man eine Textzeile auf dem Bildschirm anzeigt.

Schauen wir uns einige spezifische Beispiele für Konzepte an, die Sie lernen können, und Miniprojekte, die Sie dann durchführen können. Die Beispiele in dieser Tabelle sind geordnet – jedes Element baut auf dem Vorwissen auf.

Neue Konzepte gelernt Mögliche Mini-Projekte
Variablen, Funktionen Erstellen Sie eine Begrüßungsfunktion, die Ihren Namen aus einer Variablen nimmt und Ihnen auf der Seite eine Begrüßung anzeigt.
Klickbehandlung, Klassenwechsel Erstellen Sie eine „Weitere Informationen“-Schaltfläche, die einen Klappentext mit Informationen ein- oder ausblendet. Versuchen Sie auch, zwei Themenauswahlschaltflächen zu erstellen. Wenn Sie auf einen von ihnen klicken, ändert eine Reihe von Inhalten auf der Seite Farben und Stile, um sie einem Thema anzupassen.
If-Anweisungen, Zufallszahlen Erstellen Sie ein Spiel, bei dem es zwei Türen gibt und Sie auf die richtige klicken müssen, um den Preis zu erhalten.
Erhalte einen Texteingabewert, JavaScript-Arithmetik Erstellen Sie einen Rechner für Restauranttipps.
Arrays, Schleifen Erstellen Sie das Frontend einer Social-Posting-Site. Verwenden Sie ein Array, um eine Liste von Textbeiträgen zu speichern. Durchlaufen Sie dieses Array, um die Beiträge anzuzeigen.

Wohin führt das?

Beachten Sie, dass wir die Dinge diesmal in einer anderen Reihenfolge gemacht haben. Anstatt mit einem Projekt zu beginnen und zu versuchen, mit den erforderlichen Konzepten Schritt zu halten, haben wir mit den Konzepten begonnen und darauf basierende Projekte erstellt.

Dies hat einen tiefgreifenden Einfluss darauf, wie Sie lernen, denn anstatt zu weit nach vorne zu springen und sich zurückzulehnen, lernen Sie die Grundlagen kennen, die Sie bei jedem Schritt selbstbewusst vorankommen lassen. Die kleinen Dinge, die du lernst, bauen aufeinander auf, und schon bald kommst du zu den größeren Projekten, die du eigentlich machen wolltest.

Wissen, welche Konzepte in einem Projekt verwendet werden sollen

Angenommen, Sie haben einige Konzepte gelernt und fangen an, Projekte auszuprobieren.

Wie denken Sie darüber, welche Konzepte Sie verwenden und welche Konzepte Sie vermeiden sollten?

Um eine Analogie ohne Codierung zu verwenden, nehmen wir an, Sie bauen einen Stuhl und möchten zwei Holzstücke mit einer Schraube aneinander befestigen. Du könntest deine Hand benutzen und es würde funktionieren, aber es wäre schmerzhaft und ermüdend. Da Sie sich mit Schraubendrehern auskennen, wissen Sie, dass sie besser wären. Ein elektrischer Schraubendreher wäre viel besser.

Je mehr Tools Sie in diesem Beispiel kennen, desto besser können Sie sich ein Problem ansehen und wissen, welches Tool Sie auswählen sollten.

Um dieses Beispiel auf das Programmieren zurückzubringen:Jedes Konzept ist wie ein Werkzeug. Je mehr Konzepte Sie lernen, desto größer wird Ihre Codierungs-Toolbox und desto mehr werden Sie das Gefühl haben, zu wissen, was Sie verwenden müssen.

Vor diesem Hintergrund finden Sie hier einige praktische Möglichkeiten, ein Projekt zu durchdenken:

  • Teilen Sie das Projekt zuerst in kleinere Teile auf.
  • Schreiben Sie in einfacher Sprache, was jedes Stück tun soll. Auf diese Weise können Sie Ihren Gedanken freien Lauf lassen, ohne sich in den Details des Codes zu verzetteln.
  • Erstellen Sie jeden Teil des Projekts, beginnend mit Konzepten, die Sie kennen. Wenn Sie zuerst Konzepte gelernt haben (anstatt sich gleich zu Beginn in Projekte zu stürzen), sollten Sie jetzt über ein vernünftiges Tool-Set verfügen.
  • Wenn es eine Wissenslücke gibt, reduziere sie auf die kleinstmögliche Funktionalität und schlage sie nach.
  • Seien Sie beim Lernen nicht von Perfektion besessen. Perfektion schadet dem Fortschritt.
  • Scheuen Sie sich nicht, mit verschiedenen Ansätzen und Ideen zu experimentieren. Diese ausgefeilten Tutorials, die Sie online sehen, durchlaufen oft eine Menge Experimente, bevor sie irgendwo präsentiert werden.
  • Nachdem Sie selbst ein Projekt ausprobiert haben, suchen Sie nach ähnlichen Projekten, um von den Ansätzen anderer zu lernen.

Wenn Sie diese Schritte mit immer mehr Projekten unternehmen, werden Sie sich wohler fühlen, wenn Sie die richtigen Konzepte für den Job auswählen.

Der Rest ist nur Übung.

Schlüsselmitnahmen

Projekte können zu den besten und schlechtesten Möglichkeiten gehören, JavaScript zu lernen. Der Unterschied liegt im Timing.

  • Projekte zu früh =Falle.
    Eine der häufigsten Arten, wie Menschen JavaScript nicht lernen, besteht darin, sich in ein Projekt zu stürzen, bevor sie genug von den Grundlagen wissen, um zu verstehen, was vernünftig ist. Dies führt oft zu Entmutigung und zum Aufgeben.

  • Konzepte zuerst, Projekte dann.
    Um die Projektfalle zu vermeiden, spielen Sie zuerst mit Konzepten und führen Sie dann Miniprojekte auf der Grundlage dieser Konzepte durch. Auf diese Weise erreichen Sie am Ende ein stärkeres Verständnis, eine bessere Merkfähigkeit, mehr Schwung und schnellere Fortschritte. Sie werden sich auch weniger überfordert fühlen.

  • Übe wie im richtigen Leben.
    Je mehr Sie unter realen Bedingungen üben, desto unwahrscheinlicher ist es, dass Sie stecken bleiben, wenn es an der Zeit ist, die Tutorials loszulassen.

Abschließend sei gesagt, dass jeder anders lernt. Keine der Ideen in diesem Artikel sind als feste Regeln gedacht. Stattdessen sind es freundliche Vorschläge, von denen ich hoffe, dass sie Ihnen oder jemandem, den Sie kennen, dabei helfen werden, die Fallen zu vermeiden, in die ich zu viele Menschen tappen gesehen habe.

Jetzt, wo Sie hier sind, was halten Sie von all dem? Gibt es Fragen, Geschichten oder Erfahrungen, die Sie über das Erlernen des Programmierens teilen möchten?

Lass es mich gerne in den Kommentaren wissen.