Читать книгу JavaScript – Das Handbuch für die Praxis - David Flanagan - Страница 14

Sie haben vielleicht im vorhergehenden Code bemerkt, dass einige der Kommentare mit einem Pfeil (=>) beginnen. Diese zeigen den Wert, den der Code vor dem Kommentar erzeugt, und sind mein Versuch, eine interaktive JavaScript-Umgebung wie etwa eine Webbrowserkonsole in einem gedruckten Buch nachzubilden.

Diese // =>-Kommentare dienen ebenfalls als Zusicherungen in Softwaretests (auch als Behauptungen bzw. Assertionen bezeichnet), und ich habe ein Tool geschrieben, um den Code zu testen und dabei zu verifizieren, dass er den im Kommentar angegebenen Wert erzeugt – was, so hoffe ich, dazu beiträgt, die Fehlerzahl in diesem Buch zu verringern.

Es gibt zwei verwandte Arten von Kommentaren/Zusicherungen. Ein Kommentar der Form // a == 42 bedeutet, dass die Variable a den Wert 42 haben wird, nachdem der Code, der vor dem Kommentar steht, ausgeführt wurde. Ein Kommentar der Form // ! zeigt an, dass der Code in der Zeile vor dem Kommentar eine Ausnahme auslöst (und der Rest des Kommentars nach dem Ausrufezeichen erklärt normalerweise, welche Art von Ausnahme auftritt).

Solche Kommentare werden Ihnen im gesamten Buch begegnen.

Die hier dargestellte Syntax zur Auflistung von Array-Elementen innerhalb eckiger Klammern oder zur Abbildung von Bezeichnungen von Objekteigenschaften auf Eigenschaftswerte innerhalb geschweifter Klammern wird als Initialisierungsausdruck bezeichnet – und ist nur eines der Themen von Kapitel 4. Ein Ausdruck ist eine Phrase in JavaScript, die zu einem Wert ausgewertet werden kann. Beispielsweise ist die Verwendung von . und [], um auf den Wert einer Objekteigenschaft oder eines Array-Elements zu verweisen, ein Ausdruck.

Am häufigsten bildet man Ausdrücke in JavaScript, indem man Operatoren verwendet:

// Operatoren agieren auf Werten (den Operanden), um einen neuen Wert zu erzeugen.

// Arithmetische Operatoren gehören zu den einfachsten Operatoren:

3 + 2 // => 5: Addition

3 - 2 // => 1: Subtraktion

3 * 2 // => 6: Multiplikation

3 / 2 // => 1.5: Division

points[1].x - points[0].x // => 1: Auch komplexere Operanden sind möglich.

"3" + "2" // => "32": + addiert Zahlen, verkettet Strings.

// JavaScript bietet einige arithmetische Kurzoperatoren:

let count = 0; // Variable definieren.

count++; // Variable inkrementieren.

count--; // Variable dekrementieren.

count += 2; // 2 addieren, entspricht count = count + 2;.

count *= 3; // Mit 3 multiplizieren, entspricht count = count * 3;.

count // => 6: Variablennamen sind ebenfalls Ausdrücke.

// Gleichheits- und Relationsoperatoren prüfen, ob zwei Werte gleich, ungleich,

// kleiner als, größer als usw. sind. Sie werden zu true oder false ausgewertet.

let x = 2, y = 3; // Diese =-Zeichen sind Zuweisungen, keine

// Gleichheitstests.

x === y // => false: Gleichheit.

x !== y // => true: Ungleichheit.

x < y // => true: kleiner als.

x <= y // => true: kleiner als oder gleich.

x > y // => false: größer als.

x >= y // => false: größer als oder gleich.

"two" === "three" // => false: Die beiden Strings sind verschieden.

"two" > "three" // => true: "tw" ist alphabetisch größer als "th".

false === (x > y) // => true: false ist gleich false.

// Logische Operatoren kombinieren oder invertieren boolesche Werte:

(x === 2) && (y === 3) // => true: Beide Vergleiche sind wahr. && ist AND (UND).

(x > 3) || (y < 3) // => false: Keiner der Vergleiche ist wahr.

// || ist OR (ODER).

!(x === y) // => true: ! invertiert einen booleschen Wert.

Betrachtet man JavaScript-Ausdrücke als Phrasen, wären JavaScript-Anweisungen ganze Sätze. Anweisungen sind das Thema von Kapitel 5. Ein Ausdruck ist, vereinfacht gesagt, etwas, das einen Wert liefert, aber nichts tut. Anweisungen hingegen liefern keinen Wert (zumindest keinen, der uns interessiert), ändern aber den Zustand. Oben haben Sie Variablendeklarationen und Zuweisungsanweisungen gesehen. Die andere große Kategorie von Anweisungen sind Kontrollstrukturen wie z.B. Bedingungen und Schleifen. Beispiele finden Sie weiter unten, nachdem wir die Funktionen behandelt haben.

Eine Funktion ist ein benannter und parametrisierter Block mit JavaScript-Code, den Sie einmal definieren und dann immer wieder aufrufen können. Funktionen werden formal erst in Kapitel 8 behandelt, aber wie Objekte und Arrays werden sie Ihnen auch vorher schon immer wieder mal begegnen. Hier ein paar einfache Beispiele:

// Funktionen sind parametrisierte Blöcke mit JavaScript-Code, die wir aufrufen

// können.

function plus1(x) { // Funktion mit dem Namen "plus1" und dem

// Parameter "x" definieren.

return x + 1; // Wert zurückgeben, der um eins größer ist

// als der übergebene Wert.

} // Funktionen sind in geschweifte Klammern

// eingeschlossen.

plus1(y) // => 4: y ist (immer noch) 3, also gibt

// dieser Aufruf 3+1 zurück.

let square = function(x) { // Funktionen sind Werte und können Variablen

// zugewiesen werden.

return x * x; // Funktionswert berechnen.

}; // Semikola kennzeichnen das Ende der Zuweisung.

square(plus1(y)) // => 16: Zwei Funktionen in einem Ausdruck aufrufen.

In ES6 und späteren Versionen gibt es eine Kurzschriftsyntax für die Definition von Funktionen. Diese prägnante Syntax verwendet =>, um die Argumentliste vom Funktionskörper zu trennen, daher werden auf diese Weise definierte Funktionen als Pfeilfunktionen bezeichnet. Pfeilfunktionen werden am häufigsten eingesetzt, wenn eine unbenannte Funktion als Argument an eine andere Funktion übergeben werden soll. Verwendet man Pfeilfunktionen, sieht der vorhergehende Code so aus:

const plus1 = x => x + 1; // Die Eingabe x wird auf die Ausgabe x + 1 abgebildet.

const square = x => x * x; // Die Eingabe x wird auf die Ausgabe x * x abgebildet.

plus1(y) // => 4: Funktionen werden wie sonst auch aufgerufen.

square(plus1(y)) // => 16

Wenn wir Funktionen mit Objekten verwenden, erhalten wir Methoden:

// Werden Funktionen den Eigenschaften eines Objekts zugewiesen, nennen wir sie

// "Methoden". Alle JavaScript-Objekte (einschließlich Arrays) besitzen Methoden:

let a = []; // Ein leeres Array anlegen.

a.push(1,2,3); // Die Methode push() fügt einem Array Elemente hinzu.

a.reverse(); // Eine weitere Methode: die Reihenfolge der Elemente

// umkehren.

// Wir können auch eigene Methoden definieren. Das Schlüsselwort "this" bezieht

// sich auf das Objekt, für das die Methode definiert ist: hier das Array points

// aus einem vorhergehenden Beispiel.

points.dist = function() { // Methode zum Berechnen des Abstands zwischen

// Punkten definieren.

let p1 = this[0]; // Erstes Element des Arrays, auf dem die Methode

// aufgerufen wird.

let p2 = this[1]; // Zweites Element des Arrays "this".

let a = p2.x-p1.x; // Differenz der x-Koordinaten.

let b = p2.y-p1.y; // Differenz der y-Koordinaten.

return Math.sqrt(a*a + // Der Satz des Pythagoras.

b*b); // Math.sqrt() zieht die Wurzel.

};

points.dist() // => Math.sqrt(2): Abstand zwischen unseren

// zwei Punkten.

Hier erhalten Sie nun wie versprochen einige Funktionen, in denen als Anweisungen häufig genutzte JavaScript-Kontrollstrukturen vorkommen:

// Zu den JavaScript-Anweisungen gehören auch bedingte Anweisungen und Schleifen,

// die eine aus C, C++, Java und anderen Sprachen bekannte Syntax nutzen.

function abs(x) { // Eine Funktion zur Berechnung des Absolutbetrags.

if (x >= 0) { // Die if-Anweisung …

return x; // … führt diesen Code aus, wenn der Vergleich

// wahr ist.

} // Das Ende der if-Anweisung.

else { // Die optionale else-Anweisung führt den in ihr

// enthaltenen Code

return -x; // aus, wenn der Vergleich falsch ist.

} // Geschweifte Klammern sind optional, wenn es nur

// eine Anweisung gibt.

} // Beachten Sie die return-Anweisungen innerhalb

// von if/else.

abs(-10) === abs(10) // => true

function sum(array) { // Berechnet die Summe der Elemente eines Arrays.

let sum = 0; // Beginnt mit einer Anfangssumme von 0.

for(let x of array) { // Schleife über das Array, wobei jedes Element x

// zugeordnet wird.

sum += x; // Aktuellen Elementwert der Summe hinzufügen.

} // Das Ende der for-Schleife.

return sum; // Die Summe zurückgeben.

}

sum(primes) // => 28: Summe der ersten 5 Primzahlen 2+3+5+7+11.

function factorial(n) { // Eine Funktion zur Berechnung von Fakultäten.

let product = 1; // Beginne mit dem Produkt von 1.

while(n > 1) { // Wiederhole Anweisungen in {}, solange der Ausdruck

// in () wahr ist.

product *= n; // Kurzform für product = product * n.

n--; // Kurzform fürn=n -1.

} // Das Ende der while-Schleife.

return product; // Rückgabe des Produkts.

}

factorial(4) // => 24: 1*4*3*2

function factorial2(n) { // Eine alternative Version, die eine andere

// Schleife verwendet.

let i, product = 1; // Beginne mit 1.

for(i=2; i <= n; i++) // i automatisch von 2 bis n inkrementieren.

product *= i; // Wird jedes Mal ausgeführt. {} wird für einzeilige

// Schleifen nicht benötigt.

return product; // Rückgabe der Fakultät.

}

factorial2(5) // => 120: 1*2*3*4*5

JavaScript unterstützt einen objektorientierten Programmierstil, unterscheidet sich aber deutlich von »klassischen« objektorientierten Programmiersprachen. Kapitel 9 behandelt die objektorientierte Programmierung in JavaScript im Detail anhand vieler Beispiele. Es folgt ein sehr einfaches Beispiel, das zeigt, wie Sie eine JavaScript-Klasse erstellen, die einen zweidimensionalen Punkt repräsentiert. Objekte, die Instanzen dieser Klasse sind, besitzen genau eine Methode namens distance(), die den Abstand des Punkts vom Ursprung berechnet:

class Point { // Gemäß Konvention werden Klassennamen großgeschrieben.

constructor(x, y) { // Konstruktorfunktion zur Initialisierung neuer

// Instanzen.

this.x = x; // Das Schlüsselwort "this" bezeichnet das neue Objekt,

// das initialisiert wird.

this.y = y; // Funktionsargumente als Objekteigenschaften speichern.

} // In Konstruktorfunktionen ist keine Rückgabe

// erforderlich.

distance() { // Methode zur Berechnung der Entfernung zwischen

// Ursprung und Punkt.

return Math.sqrt( // Liefert die Quadratwurzel aus x² + y².

this.x * this.x + // "this" bezieht sich auf das Punktobjekt, auf dem

this.y * this.y // die Methode distance() aufgerufen wird.

);

}

}

// Verwenden Sie die Konstruktorfunktion Point() mit "new", um Punktobjekte

// zu erstellen.

let p = new Point(1, 1); // Der geometrische Punkt (1,1).

// Verwenden Sie jetzt eine Methode des Punktobjekts p.

p.distance() // => Math.SQRT2

So weit die Einführung in die grundlegende Syntax und die Fähigkeiten von JavaScript. Es folgen in sich abgeschlossene Kapitel, in denen weitere Sprachmerkmale behandelt werden:

Kapitel 10, Module

Zeigt, wie JavaScript-Code in einer Datei oder einem Skript Funktionen und Klassen verwenden kann, die in anderen Dateien oder Skripten definiert sind.

Kapitel 11, Die JavaScript-Standardbibliothek

Deckt die eingebauten Funktionen und Klassen ab, die allen JavaScript-Programmen zur Verfügung stehen. Dazu gehören wichtige Datenstrukturen wie Maps und Sets, eine Klasse für reguläre Ausdrücke für die Suche nach Textmustern, Funktionen zur Serialisierung von JavaScript-Datenstrukturen und vieles mehr.

Kapitel 12, Iteratoren und Generatoren

Erklärt, wie die for/of-Schleife funktioniert und wie Sie Ihre eigenen Klassen mit for/of iterierbar machen können. Daneben werden Generatorfunktionen und die yield-Anweisung behandelt.

Kapitel 13, Asynchrones JavaScript

Untersucht eingehend die asynchrone Programmierung in JavaScript, wobei Callbacks und Events, Promise-basierte APIs und die Schlüsselwörter async und await behandelt werden. Obwohl JavaScript im Kern nicht asynchron ist, sind asynchrone APIs Standard sowohl in Webbrowsern als auch in Node, und in diesem Kapitel werden die Techniken für die Arbeit mit diesen APIs erläutert.

Kapitel 14, Metaprogrammierung

Stellt eine Reihe fortgeschrittener Funktionen von JavaScript vor, die für Programmierer interessant sind, die Codebibliotheken schreiben, um diese anderen JavaScript-Programmierern zur Verfügung zu stellen.

Kapitel 15, JavaScript im Webbrowser

Stellt die Hostumgebung des Webbrowsers vor, erklärt, wie Webbrowser JavaScript-Code ausführen, und behandelt die wichtigsten der vielen von Webbrowsern definierten APIs. Dies ist bei Weitem das längste Kapitel des Buchs.

Kapitel 16, Serverseitiges JavaScript mit Node

Stellt die Hostumgebung von Node vor und behandelt das grundlegende Programmiermodell sowie die für das Verständnis wichtigsten Datenstrukturen und APIs.

Kapitel 17, JavaScript-Werkzeuge und -Erweiterungen

Deckt weitverbreitete Werkzeuge und Spracherweiterungen ab, die man kennen sollte und die Sie zu einem produktiveren Programmierer machen können.