JavaScript – Das Handbuch für die Praxis. David Flanagan

eines Browsers anzuzeigen – zum Beispiel indem Sie eine Datei hello.js erstellen, die folgende Codezeile enthält:

      console.log("Hello World!");

      Wenn Sie diese Datei mit nodehello.js ausführen, wird die Meldung »Hello World!« ausgegeben.

      Möchten Sie die gleiche Nachricht in der JavaScript-Konsole eines Webbrowsers ausgeben, erstellen Sie eine neue Datei mit dem Namen hello.html und fügen diesen Text darin ein:

      <script src="hello.js"></script>

      Dann laden Sie hello.html in Ihren Webbrowser mit einer file://-URL wie dieser:

      file:///Users/username/javascript/hello.html

      Öffnen Sie nun das Fenster der Entwicklertools, um die Begrüßung in der Konsole zu sehen.

       1.3Ein Rundgang durch JavaScript

      Dieser Abschnitt enthält eine kurze Einführung in die JavaScript-Sprache anhand von Codebeispielen. Nach diesem einführenden Kapitel steigen wir richtig tief in JavaScript ein und beginnen damit ganz weit unten – Kapitel 2 erklärt Dinge wie JavaScript-Kommentare, Semikola und den Unicode-Zeichensatz. In Kapitel 3 wird es schon ein bisschen spannender: Es werden JavaScript-Variablen erklärt sowie die Werte, die man ihnen zuweisen kann.

      Hier ist etwas Beispielcode, der die Höhepunkte dieser beiden Kapitel veranschaulicht:

      // Alles nach einem doppelten Schrägstrich ist ein Kommentar in normaler Sprache.

      // Lesen Sie Kommentare sorgfältig: Sie erläutern den JavaScript-Code.

      // Eine Variable ist ein symbolischer Name für einen Wert.

      // Variablen werden mit dem Schlüsselwort let deklariert:

      let x; // Eine Variable namens x deklarieren.

      // Mit dem =-Zeichen können Variablen Werte zugewiesen werden.

      x = 0; // Jetzt hat die Variable x den Wert 0.

      x // => 0: Eine Variable wird zu ihrem Wert ausgewertet.

      // JavaScript unterstützt eine ganze Reihe von Wertetypen.

      x = 1; // Zahlen.

      x = 0.01; // Zahlen können ganze oder reelle Zahlen sein.

      x = "hello world"; // Textsequenzen in Anführungszeichen.

      x = 'JavaScript'; // Auch einfache Anführungszeichen sind möglich.

      x = true; // Ein boolescher Wert.

      x = false; // Der andere boolesche Wert.

      x = null; // null ist ein spezieller Wert, der für "kein Wert"

      // steht.

      x = undefined; // undefined ist ein weiterer spezieller Wert wie null.

      Zwei weitere sehr wichtige Datentypen, mit denen man in JavaScript-Programmen arbeiten kann, sind Objekte und Arrays. Diese Typen behandeln wir in den Kapiteln 6 und 7, aber sie sind so wichtig, dass sie Ihnen in diesem Buch bereits viele Male zuvor begegnen werden:

      // Der wichtigste Datentyp in JavaScript ist das Objekt.

      // Ein Objekt ist eine Sammlung von Name/Wert-Paaren

      // (bzw. eine Map, in der Zeichenketten auf Werte abgebildet werden).

      let book = { // Objekte sind von geschweiften Klammern umschlossen.

      topic: "JavaScript", // Die Eigenschaft "topic" hat den Wert "JavaScript".

      edition: 7 // Die Eigenschaft "edition" hat den Wert 7.

      }; // Die geschweifte Klammer markiert das Ende

      // des Objekts.

      // Zugriff auf die Eigenschaften eines Objekts mit . oder []:

      book.topic // => "JavaScript"

      book["edition"] // => 7: Eine weitere Möglichkeit, auf

      // Eigenschaftswerte zuzugreifen.

      book.author = "Flanagan"; // Neue Eigenschaften durch Zuweisung erstellen.

      book.contents = {}; // {} ist ein leeres Objekt ohne Eigenschaften.

      // Bedingter Zugriff auf Eigenschaften mit ?. (ES2020):

      book.contents?.ch01?.sect1 // => undefined: book.contents hat keine

      // Eigenschaft ch01.

      // JavaScript unterstützt auch Arrays (numerisch indexierte Listen) mit Werten:

      let primes = [2, 3, 5, 7]; // Ein Array mit 4 Werten, begrenzt durch [ und ].

      primes[0] // => 2: Das erste Element (Index 0) des Arrays.

      primes.length // => 4: Anzahl der Elemente im Array.

      primes[primes.length-1] // => 7: Das letzte Element des Arrays.

      primes[4] = 9; // Ein neues Element durch Zuweisen hinzufügen.

      primes[4] = 11; // Oder ein vorhandenes Element durch Zuweisen

      // verändern.

      let empty = []; // [] ist ein leeres Array ohne Elemente.

      empty.length // => 0

      // Arrays und Objekte können andere Arrays und Objekte enthalten:

      let points = [ // Ein Array mit 2 Elementen.

      {x: 0, y: 0}, // Jedes Element ist ein Objekt.

      {x: 1, y: 1}

      ];

      let data = { // Ein Objekt mit 2 Eigenschaften.

      trial1: [[1,2], [3,4]], // Der Wert jeder Eigenschaft ist ein Array.

      trial2: [[2,3], [4,5]] // Die Elemente der Arrays sind Arrays.

      };

       Kommentarsyntax in Codebeispielen

      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