Anfängerleitfaden: Der beste Weg, JavaScript zu lernen

JavaScript ist wahrscheinlich die am meisten missverstandene Programmiersprache der Welt. Der Name selbst ist irreführend. Es hat keine Beziehung zu Java, aber der Name.

Wenn Sie mit dem Erlernen von JavaScript beginnen, ist es ratsam, sich zunächst mit der Sprache vertraut zu machen. Sie sollten Ihre Lernliste planen, um JavaScript richtig zu lernen und das Beste aus der Sprache zu verstehen.

Die lexikalische Grammatik von JavaScript

Es gibt viele Macken in JavaScript. Einige Teile der Syntax sind ziemlich seltsam. Oft kommt es vor, dass Sie beim Betrachten eines Tutorials eine Syntax sehen, die für Sie keinen Sinn ergibt. Es könnte ein Operator sein, und Sie wissen nicht, wie er heißt, und Sie wissen nicht, wo Sie mehr über die spezifische Syntax lesen können.

Das kann sehr frustrierend sein, daher wird empfohlen, dass Sie die gesamte lexikalische Grammatik von JavaScript lesen und verstehen. Dies sollte 85 % der Verwirrung beseitigen, die Sie möglicherweise beim Lesen von JavaScript-Tutorials haben. Ein guter Artikel über die lexikalische Grammatik von JavaScript ist dieser wird auf MDN gehostet.
Lesen Sie es gründlich, spielen Sie mit den Beispielen in der Konsole und versuchen Sie, es so gut wie möglich zu verstehen.

Die Browser-Entwicklertools

Haben Sie jemals beim Anzeigen einer Webseite F12 gedrückt? Angenommen, Sie verwenden einen modernen Browser auf einem Desktop, wird etwas angezeigt. Das sind die Browser-Entwicklertools. Sie sind hauptsächlich für die Verwendung durch Front-End-Designer und Programmierer konzipiert, um ihnen beim Debuggen ihres Codes zu helfen. Aber das ist noch nicht alles.

Sie können viel lernen, wenn Sie über die Browser-Entwicklertools über Dinge spekulieren. Wenn Sie bereits begonnen haben, ein wenig JavaScript zu lernen, sind Sie wahrscheinlich bereits mit der Konsole vertraut. Vielleicht auch mit dem DOM-Inspektor für einige CSS. Aber es gibt einige andere sehr mächtige Dinge, die ein Anfänger in den Entwicklungstools tun kann, um JavaScript zu lernen, insbesondere über die Registerkarte „Quellen“.

Lesen Sie die Dokumentation für die Chrome-Entwicklertools. Ähnliche Tools gibt es auch für Firefox, Safari, IE und Opera.

Das Schreiben von Code sollte für einen Anfänger wichtiger sein, als beim ersten Versuch funktionierenden Code zu schreiben. Wenn Ihr Code nicht funktioniert, können Sie diese Tools verwenden und dafür sorgen, dass er funktioniert. Sobald es funktioniert, würden Sie höchstwahrscheinlich bereits verstehen, was Sie falsch gemacht haben, und diesen Fehler in Zukunft vermeiden.

Die “guten” Teile

JavaScript ist nicht die beste Sprache der Welt, aber sie ist sehr, sehr beliebt, mit einer sehr großen Community (verdammt, es ist die einzige Sprache, die Browser verstehen, also …). Aber wenn Sie die guten Seiten von JavaScript bedenken, ist es sehr mächtig. Sie sollten die verschiedenen Teile der Sprache kennen und wissen, was sie tun.

Die Kernsprache selbst heißt ECMAScript und wird vom ECMA TC39-Team gepflegt. Und der Kern ist nicht an den Browser gebunden. Es ist nur eine einfache Programmiersprache, die an so ziemlich jedem Ort eingesetzt werden kann. Und ein solcher Ort ist der Browser.

Der Kernteil bezieht sich auf die syntaktische Struktur der Sprache. Zum Beispiel, wenn Sie verwenden for Schleifen bzw if/else Anweisungen verwenden Sie den Kernteil. Der Unterschied Typen von Variablen ("strings"Zahlen, objects, functions, ["arrays"] usw.) werden ebenfalls unter dem zentralen ECMAScript-Teil definiert. Wichtige eingebaute Funktionen und Objekte wie JSON.parse, Math.random, usw. fallen ebenfalls unter ECMAScript. Diese Dinge können mit jeder ECMAScript-Engine verwendet werden. Sie sind nicht exklusiv für den Browser!

Anfängern wird empfohlen, sich nur auf den ECMAScript-Kernteil zu konzentrieren und sich keine Gedanken über den Browser oder eine andere Umgebung zu machen.

Wie verwendet der Browser eigentlich JavaScript?

Der Browser hat etwa drei Sprachen zu bewältigen. HTML, CSS und JavaScript. HTML stellt dar, was auf der Webseite angezeigt werden soll. CSS wird verwendet, um das Erscheinungsbild zu ändern, Hintergrund hinzuzufügen, Textfarbe zu ändern usw. Dies hat jedoch wenig bis gar keine Interaktivität.

Hier kommt JavaScript ins Spiel! Aber damit JavaScript mit HTML und CSS interagieren kann, muss es eine Möglichkeit geben, die Lücke zwischen den beiden Teilen zu überbrücken, oder?

Dazu stellen Browser eine API bereit. API steht für Application Programming Interface. Eine solche Schnittstelle stellt Methoden und Funktionen bereit, die von einer Seite des Codes (in diesem Fall JavaScript) aufgerufen werden können, um auf die andere Seite (in unserem Fall HTML/CSS) zuzugreifen oder diese zu ändern.

Diese API in Browsern ist als bekannt Dom API (Dokumentobjektmodell).

Wenn der Browser den HTML-Code empfängt, erstellt er eine document Objekt basierend auf HTML. Das document Objekt hat Funktionen wie getElementById usw., die Sie möglicherweise verwendet haben. Durch die Verwendung dieser Funktionen kann Ihr JavaScript-Code jetzt mit dem HTML- und CSS-Teil interagieren und Ihrer Webseite Leben einhauchen!

Wenn Sie über ausreichende Kenntnisse des ECMAScript (Kern-JavaScript) verfügen, ist die Verwendung der DOM-API für Sie sehr einfach! Tatsächlich nicht nur die DOM-API, sondern möglicherweise jede andere API, die von einer anderen Umgebung verfügbar gemacht wird.


Neben dem DOM stellt der Browser auch einige moderne APIs bereit, wie z localStorage, History, notificationsusw. Da Sie immer mehr Anwendungen erstellen, werden Sie sich mit diesen im Laufe der Zeit vertraut machen. Wenn Sie den JavaScript-Kern richtig gelernt haben, sollte Ihnen die Verwendung einer beliebigen neuen Anzahl von APIs außerdem leicht fallen.

Darüber hinaus beschränkt sich Ihre Benutzerfreundlichkeit nicht nur auf den Browser, sondern Sie fühlen sich auch in anderen Umgebungen wie Node.js wohl.

Heutzutage regiert ECMAScript überall. Es wird an vielen Stellen eingesetzt, um Apps für unterschiedliche Umgebungen zu entwickeln. Dinge wie PhoneGap, Cordova, Node-Webkit usw. ermöglichen es Ihnen, dieselbe Sprache für verschiedene Betriebssysteme und Geräte zu verwenden. Das einzige, was sich ändert, ist der „API“-Teil.

Präsentieren… "use strict";!

Vor einiger Zeit hat das ECMA-Team eine Art „Teilmenge“ von JavaScript angekündigt, die von den meisten neuen Browsern unterstützt wird – “strikter Modus”. Es hat eine etwas andere Semantik als der traditionelle Modus.

Es ist immer noch dieselbe Sprache, aber nur durch Hinzufügen der Aussage "use strict"; Am Anfang Ihres Codes weisen Sie die JavaScript-Engine an, das Skript in diesem strikten Modus zu analysieren. Ältere JavaScript-Engines, die diesen Modus nicht unterstützen, ignorieren die Zeile einfach.

Der Unterschied zwischen dem traditionellen Modus und dem strengen Modus besteht darin, dass der strenge Modus „Fehler“ in Fehler umwandelt. Traditionell ist bekannt, dass JavaScript irreführend ist. Wir wissen zum Beispiel, dass die length Eine an eine Funktion angefügte Eigenschaft ist schreibgeschützt. Wir können es nicht ändern. Aber wenn wir es versuchen …

Folgendes passiert… etwas verwirrend. Aber wenn wir dasselbe Skript im strikten Modus ausführen, wird ein Fehler ausgelöst.

Ja, es wird ein Fehler ausgelöst.

Ähnliches passiert, wenn man versucht, eine Variable implizit als global zu deklarieren, ohne die var Stichwort.

Weitere Details zum strikten Modus und zum Unterschied in der Semantik zum traditionellen Quirks-Modus können nachgelesen werden auf MDNs Artikel über den strengen Modus.

Das Ziel des strikten Modus ist es, einige der lästigen und seltsamen Teile der JavaScript-Sprache zu beseitigen und das Einführen von Fehlern in das Programm zu erschweren. Daher ist es als „strikter“ Modus bekannt.

es ist höchst Es wird empfohlen, immer den strengen Modus zu verwenden, da dies hilft, schlechte Praktiken zu vermeiden.

Einige Dinge, die man wissen muss

  • So ziemlich alles in JavaScript ist ein Objekt. Arrays, Funktionen, nullreguläre Ausdrücke usw. Sie sind alle Objekte.
  • Funktionen in JavaScript sind Bürger erster Klasse. Sie können in Variablen gespeichert, als Parameter weitergegeben, Eigenschaften zugewiesen usw. werden.
  • Es gibt nichts Besseres als Objektgleichheit in JavaScript. new Number(5) !== new Number(5)!
  • Verwenden Sie immer den strikten Vergleichsoperator (===) und vermeiden Sie die Verwendung von (==).
  • Erfahren Sie, wie Closures funktionieren, und üben Sie die Verwendung des „Moduls, das Muster aufdeckt“.

Zu verwendende Werkzeuge

Meine allererste Empfehlung: „Browser Developer Tools“. Alles, was Sie über die Entwicklungswerkzeuge lernen, wäre für das Leben fruchtbar.

Auch verwenden JSLint zum Linting Ihres Codes und zur Vermeidung von Fehlern. Sie können auch das JSLint-Plugin für Ihren Texteditor verwenden.

Fazit

JavaScript ist keine schwierige Programmiersprache, unterscheidet sich jedoch geringfügig von anderen. Konzepte wie prototypische Vererbung, Ereignismodell usw. könnten neu sein, selbst für Studenten, die bereits Erfahrung in der Programmierung haben. Ganz zu schweigen davon, dass Programmieren im Allgemeinen für Neulinge manchmal einschüchternd sein kann!

Es ist immer von Vorteil, sich zuerst mit den Sprachfunktionen vertraut zu machen. Viel Glück!


Über den Autor

Awal Garg ist ein Webentwickler, der fließend HTML/CSS und JavaScript für das Frontend beherrscht und auch JavaScript im Backend mit Node und Express verwendet.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *