JavaScript-Handbuch, Teil 1: Erstes Programm, Sprachfunktionen, Standards

Wir haben kürzlich eine Umfrage zur Machbarkeit der Übersetzung dieses JavaScript-Handbuchs durchgeführt. Wie sich herausstellte, reagierten etwa 90% der Wähler positiv auf diese Idee. Deshalb veröffentlichen wir heute den ersten Teil der Übersetzung.



Dieser Leitfaden, wie er vom Autor konzipiert wurde, richtet sich an Personen, die bereits ein wenig mit JavaScript vertraut sind und ihr Wissen in Ordnung bringen und auch etwas Neues über die Sprache lernen möchten. Wir haben uns entschlossen, das Publikum dieses Materials ein wenig zu erweitern, um diejenigen einzubeziehen, die absolut nichts über JS wissen, und damit zu beginnen, mehrere Versionen von „Hallo Welt!“ Zu schreiben.

→ Teil 1: Erstes Programm, Sprachfunktionen, Standards
→ Teil 2: Codestil und Programmstruktur
→ Teil 3: Variablen, Datentypen, Ausdrücke, Objekte
→ Teil 4: Funktionen
→ Teil 5: Arrays und Loops
→ Teil 6: Ausnahmen, Semikolons, Platzhalterliterale
→ Teil 7: Strict Mode, dieses Schlüsselwort, Ereignisse, Module, mathematische Berechnungen
→ Teil 8: Übersicht über die ES6-Funktionen
→ Teil 9: Übersicht über die ES7-, ES8- und ES9-Standards

Hallo Welt!

Das Programm, das traditionell " Hallo Welt! "Ist sehr einfach. Es zeigt irgendwo den Ausdruck "Hallo Welt!" Oder einen anderen ähnlichen Ausdruck mittels einer bestimmten Sprache an.

JavaScript ist eine Sprache, in der Programme in verschiedenen Umgebungen ausgeführt werden können. In unserem Fall handelt es sich um Browser und die Serverplattform Node.js. Wenn Sie bisher keine einzige Codezeile in JS geschrieben haben und diesen Text in einem Browser auf einem Desktop-Computer lesen, bedeutet dies, dass Sie buchstäblich in Sekunden von Ihrem ersten JavaScript-Programm entfernt sind.

Wenn Sie Google Chrome verwenden, öffnen Sie zum Schreiben das Browsermenü und wählen Sie darin den Befehl > . Das Browserfenster wird in zwei Teile unterteilt. In einer davon wird eine Seite angezeigt, in einer anderen wird ein Bereich mit Entwicklertools geöffnet, der mehrere Lesezeichen enthält. Wir interessieren uns für die Registerkarte Console . Klicken Sie darauf. Achten Sie nicht darauf, was möglicherweise bereits in der Konsole vorhanden ist (Sie können die Tastenkombination Ctrl + L , um es zu löschen). Wir sind jetzt daran interessiert, die Konsole einzuladen. Hier können Sie den ausgeführten JavaScript-Code eingeben, indem Sie die Enter drücken. Geben Sie Folgendes in die Konsole ein:

 console.log("Hello, world!") 

Dieser Text kann über die Tastatur eingegeben werden. Sie können ihn kopieren und in die Konsole einfügen. Das Ergebnis ist das gleiche, aber wenn Sie das Programmieren lernen, wird empfohlen, die Texte der Programme selbst einzugeben und nicht zu kopieren.

Nachdem sich der Programmtext in der Konsole befindet, drücken Sie die Enter .

Wenn alles richtig gemacht ist, erscheint unter dieser Zeile der Text Hello, world! . Achten Sie nicht auf alles andere.


Das erste Programm in der Browserkonsole besteht darin, eine Meldung in der Konsole anzuzeigen

Eine weitere Browseroption "Hallo Welt!" besteht darin, ein Meldungsfeld anzuzeigen. Es wird so gemacht:

 alert("Hello, world!") 

Hier ist das Ergebnis der Ausführung dieses Programms.


Zeigen Sie eine Nachricht in einem Fenster an

Beachten Sie, dass sich die Entwickler-Symbolleiste jetzt am unteren Bildschirmrand befindet. Sie können die Position ändern, indem Sie das Menü mit drei Punkten im Titel verwenden und das entsprechende Symbol auswählen. Dort finden Sie auch eine Schaltfläche zum Schließen dieses Panels.

Entwicklertools, einschließlich der Konsole, sind auch in anderen Browsern verfügbar. Die Konsole ist insofern gut, als sie immer zur Hand ist, wenn Sie den Browser verwenden.

Es gibt andere Möglichkeiten, JS-Code in einem Browser auszuführen. Wenn wir also über die normale Verwendung von JavaScript-Programmen sprechen, werden diese in den Browser geladen, um den Betrieb von Webseiten sicherzustellen. In der Regel wird der Code als separate Dateien mit der Erweiterung .js , die mit Webseiten verbunden sind. Der Programmcode kann aber auch direkt in den Seitencode aufgenommen werden. All dies erfolgt mit dem <script> . Wenn der Browser solchen Code erkennt, führt er ihn aus. Details zum Skript- Tag können unter w3school.com eingesehen werden. Betrachten Sie insbesondere ein Beispiel, das zeigt, wie eine Webseite mit JavaScript unter Verwendung dieser Ressource verwendet wird. Dieses Beispiel kann auch mit den Ressourcen dieser Ressource gestartet werden (suchen Sie nach der Schaltfläche " Try it Yourself ausprobieren"), aber wir werden es etwas anders machen. Wir werden nämlich in einem Texteditor (z. B. in VS Code oder Notepad ++ ) eine neue Datei erstellen, die wir hello.html nennen, und den folgenden Code hinzufügen:

 <!DOCTYPE html> <html> <body>   <p id="hello"></p>   <script>     document.getElementById("hello").innerHTML = "Hello, world!";   </script> </body> </html> 

Hier interessiert uns am meisten die Zeile document.getElementById("hello").innerHTML = "Hello, world!"; , das ist ein JS-Code. Dieser Code ist in das Öffnen und Schließen von <script> -Tags eingeschlossen. Es findet ein HTML-Element mit hello Kennung im Dokument und ändert seine innerHTML Eigenschaft ( innerHTML den in diesem Element enthaltenen HTML-Code) in Hello, world! . Wenn Sie die Datei hello.html in einem Browser öffnen, wird der angegebene Text darauf angezeigt.


JavaScript-Ausgabe in HTML-Element

Wie bereits erwähnt, können die Beispiele auf w3school.com direkt dort ausprobiert werden. Es gibt spezielle Online-Umgebungen für die Webentwicklung und insbesondere für die Ausführung von JS-Code. Darunter zum Beispiel codepen.io , jsfiddle.net , jsbin.com .

Hier sieht es zum Beispiel wie in unserem Beispiel aus, das mit CodePen neu erstellt wurde.


Das HTML-Feld enthält Code, der das HTML-Element beschreibt, das JS-Feld enthält JavaScript-Code und das Ergebnis wird unten auf der Seite angezeigt.

Wir haben oben gesagt, dass JavaScript-Programme auf verschiedenen Plattformen ausgeführt werden können, von denen eine die Node.js-Serverumgebung ist. Wenn Sie JavaScript lernen möchten und sich speziell auf die serverseitige Entwicklung konzentrieren, sollten Sie die Beispiele wahrscheinlich mit Node.js ausführen. Bitte beachten Sie, dass auf vereinfachte Weise und ohne Berücksichtigung der besonderen Unterstützung bestimmter Sprachfunktionen, die von den Versionen von Node.js und dem Browser verwendet werden, derselbe Code in Node.js und im Browser funktioniert, in dem die grundlegenden Mechanismen der Sprache verwendet werden. Das heißt, der Befehl console.log("Hello, world!") sowohl dort als auch dort. Programme, die browserspezifische Mechanismen verwenden, funktionieren in Node.js nicht (dasselbe gilt für den Versuch, Programme, die für Node.js entwickelt wurden, in einem Browser auszuführen).

Um unsere "Hallo Welt!" Installieren Sie in der Node.js-Umgebung Node.js, indem Sie das entsprechende Distributionspaket von hier herunterladen. Erstellen Sie nun die Datei hello.js und hello.js den folgenden Code ein:

 console.log('Hello, World!'); 

Über die Befehlszeile gehen wir zu dem Ordner, in dem diese Datei gespeichert ist, und führen den folgenden Befehl aus:

 node hello.js 

Hier ist das Ergebnis seiner Implementierung:


Nachricht gedruckt von Node.js.

Übrigens haben Sie vielleicht bemerkt (und höchstwahrscheinlich bemerkt, wenn Sie den Code selbst eingegeben haben), dass einige der obigen Beispiele ein Semikolon am Ende der Zeilen verwenden, andere nicht. In einigen Fällen ist der Text, den wir in der Konsole oder als Nachricht anzeigen möchten, von doppelten Anführungszeichen und in einigen von einfachen Anführungszeichen umgeben. Vielleicht fragen Sie sich jetzt, warum dies so ist und wie Sie diesen Code richtig schreiben, wenn verschiedene Versionen des Codes fehlerfrei funktionieren. Wenn Sie diese Frage beantworten, ohne auf Details einzugehen und einige kleine Details nicht zu berücksichtigen, können wir sagen, dass beide Optionen für die Verwendung von Anführungszeichen und Semikolons akzeptabel sind und auf dieselbe Weise funktionieren. Die Wahl einer bestimmten Option hängt von der Art des Schreibens des Codes ab, an den sich der Programmierer hält, und von den Anforderungen eines bestimmten Teils des Programms. Darüber hinaus können Sie mit diesen einfachen Beispielen eine der für JavaScript charakteristischen Funktionen spüren, nämlich, dass die Sprache dem Programmierer einige Freiheiten gibt.

Nachdem Sie JavaScript zum ersten Mal kennengelernt haben, bieten wir Ihnen an, mehr über diese Sprache zu sprechen.

JavaScript-Übersicht

JavaScript ist eine der beliebtesten Programmiersprachen der Welt. Es wurde vor mehr als 20 Jahren gegründet und hat in seiner Entwicklung einen langen Weg zurückgelegt. JavaScript wurde als Skriptsprache für Browser konzipiert. Am Anfang hatte er viel bescheidenere Fähigkeiten als jetzt. Es wurde hauptsächlich verwendet, um einfache Animationen wie Dropdown-Menüs zu erstellen. Sie wussten davon als Teil der Dynamic HTML- Technologie (DHTML, Dynamic HTML).

Im Laufe der Zeit wuchsen die Anforderungen der Webumgebung, insbesondere neue APIs, und JavaScript war zur Unterstützung der Webentwicklung erforderlich, um mit anderen Technologien Schritt zu halten.

Heutzutage wird JS nicht nur in herkömmlichen Browsern verwendet, sondern auch darüber hinaus. Insbesondere geht es um die Serverplattform Node.js, um die Möglichkeiten der Verwendung von JavaScript bei der Entwicklung eingebetteter und mobiler Anwendungen, um die Lösung einer Vielzahl von Aufgaben, für die JavaScript zuvor nicht verwendet wurde.

Wichtige JavaScript-Funktionen

JavaScript ist eine Sprache mit folgenden Funktionen:

• Hohes Niveau. Es gibt dem Programmierer Abstraktionen, mit denen Sie die Funktionen der Hardware, auf der JavaScript-Programme ausgeführt werden, nicht berücksichtigen können. Die Sprache verwaltet den Speicher automatisch mithilfe des Garbage Collector. Infolgedessen kann sich der Entwickler auf die Lösung der ihm anstehenden Aufgaben konzentrieren, ohne von Mechanismen auf niedriger Ebene abgelenkt zu werden (obwohl dies die Notwendigkeit einer rationellen Nutzung des Speichers nicht beseitigt). Die Sprache bietet leistungsstarke und praktische Tools für die Arbeit mit Daten verschiedener Typen.
• Dynamisch. Im Gegensatz zu statischen Programmiersprachen können dynamische Sprachen während der Programmausführung Aktionen ausführen, die statische Sprachen während der Programmkompilierung ausführen. Dieser Ansatz hat seine Vor- und Nachteile, bietet dem Entwickler jedoch leistungsstarke Funktionen wie dynamisches Schreiben, spätes Binden, Reflektion, funktionale Programmierung, Ändern von Objekten während der Programmausführung, Schließen und vieles mehr.
• Dynamisch getippt. JS-Entwicklungsvariablentypen sind optional. In derselben Variablen können Sie beispielsweise zuerst eine Zeichenfolge und dann eine Ganzzahl schreiben.
• Schwach getippt. Im Gegensatz zu Sprachen mit starker Typisierung zwingen Sprachen mit schwacher Typisierung den Programmierer beispielsweise nicht dazu, in bestimmten Situationen Objekte bestimmter Typen zu verwenden und erforderlichenfalls implizite Typkonvertierungen durchzuführen. Dies bietet mehr Flexibilität, aber JS-Programme sind nicht typsicher, was die Typprüfung komplizierter macht (TypeScript und Flow zielen darauf ab, dieses Problem zu lösen).
• Interpretiert. Es wird allgemein angenommen, dass JavaScript eine interpretierte Programmiersprache ist, was bedeutet, dass darin geschriebene Programme vor der Ausführung nicht kompiliert werden müssen. JS ist in dieser Hinsicht gegen Sprachen wie C, Java, Go. In der Praxis kompilieren Browser zur Verbesserung der Programmleistung JS-Code, bevor sie ausgeführt werden. Dieser Schritt ist jedoch für den Programmierer transparent und erfordert keine zusätzlichen Anstrengungen von ihm.
• Multiparadigma. JavaScript erlegt dem Entwickler nicht die Verwendung eines bestimmten Programmierparadigmas auf, im Gegensatz zu beispielsweise Java (objektorientierte Programmierung) oder C (imperative Programmierung). Sie können JS-Programme unter Verwendung eines objektorientierten Paradigmas schreiben, insbesondere unter Verwendung von Prototypen und Klassen, die im ES6-Standard enthalten sind. Programme in JS können auch in einem funktionalen Stil geschrieben werden, da die Funktionen hier erstklassige Objekte sind. JavaScript erlaubt den in C verwendeten imperativen Stil.

Ja, übrigens sollte beachtet werden, dass JavaScript und Java nichts gemeinsam haben. Dies sind völlig verschiedene Sprachen.

JavaScript und Standards

ECMAScript oder ES ist der Name des Standards, der Entwickler von JavaScript-Engines anleitet, dh jene Umgebungen, in denen JS-Programme ausgeführt werden. Verschiedene Standards führen neue Funktionen in die Sprache ein, über die häufig der Name der Standards in Kurzform gesprochen wird, z. B. ES6. ES6 ist dasselbe wie ES2015, nur im ersten Fall bedeutet die Nummer die Versionsnummer des Standards (6) und im zweiten - dem Jahr der Übernahme des Standards (2015).

So kam es, dass in der Welt der Webprogrammierung der 1999 verabschiedete ES3-Standard sehr lange relevant war. Die vierte Version des Standards existiert nicht (sie haben versucht, zu viele neue Funktionen hinzuzufügen und haben sie nie akzeptiert). Im Jahr 2009 wurde der ES5-Standard verabschiedet, ein riesiges Update der Sprache, das erste seit 10 Jahren. Nachdem 2011 der ES5.1-Standard verabschiedet wurde, gab es auch viele neue Dinge. Der 2015 verabschiedete ES6-Standard hat auch im Hinblick auf Innovationen an Bedeutung gewonnen. Ab 2015 werden jedes Jahr neue Versionen des Standards verabschiedet.

Die neueste Version des Standards zum Zeitpunkt der Veröffentlichung dieses Materials ist ES9 , das im Juni 2018 verabschiedet wurde.

Zusammenfassung

Heute haben wir "Hallo Welt!" Geschrieben. untersuchte in JavaScript die Hauptmerkmale der Sprache und sprach über deren Standardisierung. Das nächste Mal werden wir über den Stil von JavaScript-Texten und die lexikalische Struktur von Programmen sprechen.

Liebe Leser! Wenn Sie vor dem Lesen dieses Materials nicht mit JavaScript vertraut waren, teilen Sie uns bitte mit, ob Sie es geschafft haben, "Hallo Welt!" Auszuführen.