Ein JavaScript-Programm ist nach gewissen Regeln aufgebaut. Solche Syntax-Regeln kennen Sie aus der natürlichen Sprache, zum Beispiel der deutschen Sprache. Wenn Ihr Gesprächspartner Sie verstehen soll, müssen Sie beim Formulieren eines Satzes gewisse Grundregeln der Grammatik einhalten, damit Sie verstanden werden.
Glücklicherweise verstehen unsere Mitmenschen uns auch dann, wenn wir kleinere Fehler machen und uns nur grob an die Regeln halten. Bei Mehrdeutigkeiten ist oft aus der Situation ersichtlich, was gemeint ist.
Programmiersprachen sind jedoch viel strenger: Zum einen sind ihre Regeln vergleichsweise einfach, eindeutig und lassen wenig Spielraum. Zum anderen müssen sich Programmierer an diese Regeln halten und dürfen keine Fehler machen.
Dies hat folgende Bewandnis: Damit der JavaScript-Interpreter ein Programm ausführen kann, muss er zunächst dessen Syntax verstehen. Das Zerlegen des Programms in seine Bestandteile nennt sich Parsing. Das Modul des Interpreters, das dafür zuständig ist, nennt sich Parser. Wenn der Interpreter dabei auf einen Syntaxfehler trifft, bricht er mit einer Fehlermeldung ab und das JavaScript-Programm wird gar nicht erst ausgeführt.
Die folgende Beschreibung der JavaScript-Syntax ist sehr formal. Sie soll ihnen den groben Aufbau eines JavaScript-Programmes vermitteln, damit Sie wissen, welche Bestandteile an welchen Stellen vorkommen dürfen.
Vereinfacht gesagt besteht ein JavaScript-Programm aus einer Abfolge von Anweisungen. Bei der Ausführung des JavaScripts werden die Anweisungen zunächst nacheinander abgearbeitet. Wir werden Sprachbestandteile kennenlernen, die dafür sorgen, dass der JavaScript-Interpreter zwischen Anweisungen herumspringt. Dadurch werden die Anweisungen nicht mehr streng von oben nach unten abgearbeitet. Beispielsweise werden Anweisungen mehrfach ausgeführt, bis eine Bedingung erfüllt ist.
Mit einer Variablen-Deklaration wird eine Variable erzeugt. Eine Variable kann man sich als eine Schachtel mit einem Namen vorstellen, in die ein Wert gelegt wird.
Eine Variable kann ohne Wert angelegt werden. Das sieht so aus:
var alter;
Hier wird eine Variable mit dem Namen »alter« erzeugt. Der Wert bleibt erst einmal leer.
Oder der Anfangswert kann gleich angegeben werden:
var alter = 32;
Hier wird eine Variable mit dem Namen »alter« und dem Zahlenwert 32 erzeugt.
Anstelle des Wertes 32 kann ein beliebiger Ausdruck stehen. Das Schema der Variablen-Deklaration lautet also:
var Name = Ausdruck;
Genaueres finden Sie im gesonderten Kapital über Variablen.
Kontrollstrukturen sind Anweisungen, die wiederum Blöcke mit Anweisungen enthalten. Sie steuern die Ausführung der Anweisungs-Blöcke entsprechend bestimmter Regeln.
Man unterscheidet zwei Arten von Kontrollstrukturen: Verzweigungen und Schleifen. Mittels Verzweigungen ist es möglich, die Ausführung der Anweisungs-Blöcken von Bedingungen abhängig zu machen. Schleifen ermöglichen es, einen Anweisungs-Block wiederholt auszuführen.
Zu den Verzweigungen gehört die bedingte Anweisung, auch if-Anweisung genannt. Sie besteht aus einem festen Gerüst, das mit dem Schlüsselwort if beginnt. Darauf folgt eine Bedingung in runden Klammern. Dann folgt ein Anweisungsblock in geschweiften Klammern und ein zweiter nach dem Schlüsselwort else.
Das Gerüst sieht so aus:
if (Bedingung) {
Anweisungen
} else {
Anweisungen
}
Zwischen den runden Klammern für die Bedingung steht ein beliebiger Ausdruck. Zwischen den geschweiften Klammern stehen eine oder mehrere Anweisungen.
Betrachten wir ein Beispiel:
if (alter >= 18) {
window.alert("Volljährig!");
} else {
window.alert("Noch nicht volljährig.");
}
Ist die Bedingung alter >= 18 erfüllt, so wird der erste Anweisungs-Block ausgeführt. Ist die Bedingung nicht erfüllt, so wird der zweite Block nach dem else ausgeführt.
Eine Schleife erlaubt es, gewisse Anweisungen wiederholt auszuführen, solange eine Bedingung erfüllt ist.
Bei einer festen Anzahl der Wiederholungen verwendet man häufig die for-Schleife. Die Anweisung besteht aus einem festen Gerüst und vier veränderbaren Teilen. Ein Beispiel:
for (
var i = 0;
i < 5;
i = i + 1
) {
window.alert("Sie müssen noch " + (5 - i) + " mal klicken.");
}
Die Ausführung der Schleife wird von den drei Teilen in den runden Klammern bestimmt. Zur besseren Lesbarkeit sind sie hier auf drei Zeilen verteilt.
Der erste Teil ist die Initialisierung, im Beispiel var i = 0;. Dies ist eine Variablen-Deklaration, wie wir sie oben kennengelernt haben. Hier wird eine so genannte Schleifenvariable mit einem Startwert erzeugt.
Im zweiten Teil, der Abbruchbedingung, wird die Schleifenvariable geprüft. Im Beispiel i < 5. Das bedeutet: Ist i kleiner als 5?
Der dritte Teil, die Fortsetzung, ist eine Anweisung, die jedem Durchlauf der Schleife ausgeführt wird. Üblicherweise wird der Wert der Schleifenvariable erhöht oder verringert. Im Beispiel i = i + 1. Das bedeutet: Erhöhe den Wert von i um 1.
Zum Beginn der Schleife wird zunächst die Initialisierung ausgeführt. Die Variable i wird mit dem Wert 0 initialisiert.
Anschließend wird der Anweisungs-Block einmal ausgeführt.
Danach wird die Fortsetzung ausgeführt: i wird um 1 erhöht und hat damit den Wert 1.
Am Ende des Schleifendurchlaufs wird die Abbruchbedingung geprüft: Ist i kleiner als 5? Falls ja, wird wieder der Anweisungs-Block ausgeführt und das Spiel beginnt von Neuem.
Die Schleife wird auf diese Weise so oft ausgeführt, bis die Abbruchbedingung nicht mehr erfüllt ist. Im Beispiel wenn i den Wert 5 bekommt. Da i nach jedem Schleifendurchlauf um eins erhöht wird, wird die Schleife nach fünf Durchläufen abgebrochen.
Die meisten Anweisungen in einem JavaScript-Programm sind sogenannte Ausdruck-Anweisungen (englisch expression statement). Sie bestehen lediglich aus einem Ausdruck, und ein Ausdruck kann sehr unterschiedlich aussehen. Hier einige Beispiele:
1 + 1; window.print(); alter = 18; objekt.nummer = 5; meldung = alter >= 18 ? "volljährig" : "noch nicht volljährig";
Eine Ausdruck-Anweisung sollte immer mit einem Semikolon abgeschlossen werden.
Im Abschnitt über Ausdrücke erfahren Sie, wie Ausdrücke aufgebaut sind.
TODO: Siehe Funktionen
TODO: class, let, const, break, return, continue usw.
Auf oberster Ebene besteht ein JavaScript-Programm wie gesagt aus Anweisungen. Innerhalb von Anweisungen stecken entweder weitere Anweisungen oder Ausdrücke.
Ein Ausdruck (englisch expression) ist ein wichtiger Syntax-Bestandteil von JavaScript. Einen Ausdruck kann man sich als mathematischen Term vorstellen. Dabei werden Werte mit Operatoren verknüpft.
Dies ist ein einfacher Ausdruck:
8 + 5 * 6
Der Ausdruck besteht aus drei Zahlen-Literalen (8, 5 und 6) und zwei Operatoren (+ für Addition und * für Multiplikation).
Ein Ausdruck wird bei der Ausführung des JavaScripts schrittweise, Operator für Operator ausgewertet. Dabei kommt genau ein Ergebniswert heraus.
Die Operatoren + und * haben eine gewisse Bedeutung und eine gewisse Rangfolge. Bekanntlich gilt Punkt- vor Strichrechnung. Zunächst wird der Teilausdruck 5 * 6 berechnet. Das Ergebnis der Multiplikation ist 30. Der Teilausdruck wird durch das Ergebnis ersetzt, sodass 8 + 30 herauskommt. Das Ergebnis der folgenden Addition ist 38. Das Ergebnis des Gesamt-Ausdrucks ist somit 38.
Wie in der Mathematik kann ein Ausdruck auch Variablennamen enthalten, sogenannte Bezeichner:
a + b * c
Um diesen Ausdruck auszuwerten, sind die Werte der Variablen a, b und c nötig.
Das folgende Beispiel zeigt komplexe Ausdrücke, wie sie in JavaScript-Programmen zu finden sind:
alter = 18
alter >= 18
alter === 18
element.appendChild(element2)
objekt.nummer++
window.alert("Vorname: " + vorname)
Ausdrücke kommen an vielen Stellen in der JavaScript-Syntax vor. Sie können auch alleine stehen in einer Anweisung mit Ausdruck.
Ein Operator steht für eine Operation, die auf einen Wert oder mehrere Werte angewendet werden kann. Dabei kommt ein neuer Wert heraus, das Ergebnis.
Wir haben bereits zwei Operatoren näher kennengelernt, die mathematischen Operatoren + für Addition und * für Multiplikation.
Die Werte, die ein Operator erwartet, werden Operanden genannt. Der Operator * beispielsweise erwartet zwei Operanden, zwei Zahlen, links und rechts des Operators. Beispielsweise sind bei 5 * 6 die Operanden 5 und 6.
In JavaScript gibt es Operatoren, die ein, zwei oder drei Operanden erwarten. Man spricht dann von einstelligen /unären), zweistelligen (binären) oder dreistelligen (trinären) Operatoren.
Ein Beispiel für einen einstelligen Operator ist die logische Verneinung, der Nicht-Operator !. Er wird dem einen Operanden vorangestellt. Beispielsweise ergibt der Ausdruck ! true (»nicht wahr«) den Wert false (falsch).
Ein Literal (englisch für wörtlich, buchstäblich) erzeugt direkt einen Wert, sodass er in einem Ausdruck verwendet werden kann.
Wir haben schon den Zahlen-Literal kennengelernt. Dieser kann die bekannten Formen 8 und 8.5 annehmen. Sie können Dezimal-Zahlen, aber auch Binär-, Oktal- und Hexadezimalzahlen direkt notieren.
Ein weiterer häufiger Literal ist der String-Literal zum Notieren einer Zeichenkette. Er beginnt und endet mit einfachen oder doppelten Anführungszeichen. Dazwischen werden die Zeichen notiert. Beispielsweise "Hallo Welt!" und 'Hallo Welt!'.
Die meisten Kern-Datentypen in JavaScript lassen sich als Literale schreiben. Mehr dazu finden Sie im Kapitel Datentypen.
Ein Bezeichner (englisch identifier) ist ein Name, der in einem Ausdruck verwendet werden kann. Folgender Ausdruck enthält drei Bezeichner, a, b und c:
a + b * c
Um diesen Ausdruck auszuwerten und das Ergebnis zu berechnen, müssen die Bezeichner a, b und c durch Werte ersetzt werden. Das ist die Aufgabe der Auflösung von Bezeichnern (englisch identifier resolution). Der JavaScript-Interpreter sucht in verschiedenen Geltungsbereichen nach einem Eintrag für a usw. Die genaue Funktionsweise finden Sie im Kapitel über Variablen beschrieben.