JavaScript Schnelleinstieg E-Book

Ulrike Häßler

• Herausgeber: MITP
• Kategorie: Wissenschaft und neue Technologien
• Serie: mitp Schnelleinstieg
• Sprache: Deutsch

Seitenzahl: 196

Veröffentlichungsjahr: 2024

Beschreibung

• Alle Grundlagen von JavaScript für die Webprogrammierung
• Kompakt erklärt und optimal zum Nachschlagen
• Zahlreiche Praxisbeispiele und Übungsaufgaben mit Lösungen

Mit diesem Buch gelingt Ihnen der einfache Einstieg ohne Vorkenntnisse in JavaScript.

Alle Grundlagen der Programmierung mit JavaScript werden in 14 Kapiteln kompakt und leicht verständlich erläutert: von den grundlegenden Programmiertechniken wie Variablen und Funktionen über objektorientierte Programmierung bis hin zur Entwicklung dynamischer Webseiten mit modernem JavaScript.

Hierbei werden auch fortgeschrittene Themen wie das Document Object Model (DOM), Event Handling, synchrone und asynchrone Verarbeitung, die REST-API sowie das Speichern von Daten in Cookies und Web Storage behandelt.

Zahlreiche Codebeispiele und Übungsaufgaben mit Lösungen zum Download helfen Ihnen, das neu gewonnene Wissen anzuwenden und zu vertiefen. So sind Sie perfekt auf den Einsatz von JavaScript und die Programmierung interaktiver Webseiten in der Praxis vorbereitet.

Solide Grundkenntnisse in HTML und CSS werden vorausgesetzt.

Aus dem Inhalt:

• Alle Grundlagen kompakt und verständlich erklärt
• Kontrollstrukturen, Arrays und objektorientierte Programmierung (OOP)
• JSON als Austauschformat für strukturierte Daten
• Dynamische Webseiten: DOM als Schnittstelle zwischen HTML und JavaScript
• Behandlung von Ereignissen (Events)
• Formulare prüfen und versenden
• Animationen mit asynchronem JavaScript und Web Animations API
• Kommunikation mit dem Webserver
• Daten speichern mit Cookies / Web Storage
• Programmcode und Lösungen zum Download

Leseprobe

Ulrike Häßler

JavaScript

Schnelleinstieg

Dynamische Webseitenprogrammieren in 14 Tagen

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über https://portal.dnb.de/opac.htm abrufbar.

ISBN 978-3-7475-0780-3

1. Auflage 2024

www.mitp.de

E-Mail: [email protected]

Telefon: +49 7953 / 7189 - 079

Telefax: +49 7953 / 7189 - 082

© 2024 mitp Verlags GmbH & Co. KG, Frechen

Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften.

Dieses E-Book verwendet das EPUB-Format und ist optimiert für die Nutzung mit Apple Books auf dem iPad von Apple. Bei der Verwendung von anderen Readern kann es zu Darstellungsproblemen kommen.

Der Verlag räumt Ihnen mit dem Kauf des E-Books das Recht ein, die Inhalte im Rahmen des geltenden Urheberrechts zu nutzen. Dieses Werk, einschließlich aller seiner Teile, ist urheberrechtlich geschützt. Jede Verwertung außerhalb der engen Grenzen des Urheberrechtsgesetzes ist ohne Zustimmung des Verlags unzulässig und strafbar. Dies gilt insbesondere für Vervielfältigungen, Übersetzungen, Mikroverfilmungen und die Einspeicherung und Verarbeitung in elektronischen Systemen.

Der Verlag schützt seine E-Books vor Missbrauch des Urheberrechts durch ein digitales Rechtemanagement. Bei Kauf im Webshop des Verlages werden die E-Books mit einem nicht sichtbaren digitalen Wasserzeichen individuell pro Nutzer signiert. Bei Kauf in anderen E-Book-Webshops erfolgt die Signatur durch die Shopbetreiber. Angaben zu diesem DRM finden Sie auf den Seiten der jeweiligen Anbieter.

Lektorat: Janina Vervost

Sprachkorrektorat: Jürgen Benvenuti

Covergestaltung: Janina Vervost, Christian Kalkert

Covergrafik & Icons: Tanja Wehr, sketchnotelovers

Satz: Petra Kleinwegen

electronic publication: CPI books GmbH, Leck

Inhalt

Einleitung

Programmieren lernen in 14 Tagen

Der Sandkasten – Programmbeispiele zum Download

Fragen und Feedback

Vorwort

Sofort ins kalte Wasser – ein fremdes Skript lesen und verstehen

Das aufgeschobene Vorwort

JavaScript-Versionen und Browser-Versionen

Vorbereitungen und Werkzeuge

1.1     HTML und CSS

1.2     JavaScript einbinden

1.3     JavaScript laden

1.4     Mein Freund, der Editor

1.5     Die Browser-Konsole – die Sprechstundenhilfe

1.6     Praktische Konsolen-Befehle

Variablen und Syntax

2.1     Variablen

2.2     Syntax – die »Grammatik« von JavaScript

Grundlegende Datentypen

3.1     Primitive (einfache) Datentypen

3.2     Zahlen – Number

3.3     Boolean – Wahrheitswerte

3.4     Strings – Zeichenketten

3.5     undefined, null und empty

3.6     Datentyp-Konvertierungen

Zusammengesetzte Datentypen

4.1     Objekte

4.2     Das Objekt Math

4.3     Übungen: Math

4.4     Mathematische Operatoren

4.5     Übung: Modulo

4.6     String-Eigenschaften und -Methoden

4.7     Übung: Strings ersetzen

4.8     Weitere String-Methoden

4.9     Übung: Zeichenkette extrahieren

4.10   Reguläre Ausdrücke

Programme steuern – Ablaufkontrolle

5.1     Abfragen und Schleifen

5.2     if-then-else

5.3     switch

5.4     Übung: Stundenplan mit switch/case

5.5     for-Schleifen

5.6     while-Schleifen

5.7     Übung: Zahlen von 1 bis 100 ausgeben

5.8     Logische Operatoren

5.9     Ternary-Operator

5.10   Übung: if-Anweisungen kürzen

5.11   Implizite Typ-Konvertierung in Abfragen

Funktionen

6.1     Funktionen erzeugen und aufrufen

6.2     Globaler Gültigkeitsbereich (Scope)

6.3     Übung: Globaler Scope, Block-Scope und Funktions-Scope

6.4     Funktionsausdrücke (Function Expressions)

6.5     Arrow-Funktionen

6.6     Debugging

6.7     Übungen: Funktionen

Objekte

7.1     Grundlagen

7.2     for-in-Schleife für Objekte

7.3     Das Objekt »document«

7.4     Konstruktor-Funktionen

7.5     Klassen

7.6     Datum und Zeit

7.7     Übung: Date und Time

Arrays

8.1     Arrays – Sammlungen unter einem Variablennamen

8.2     Array-Methoden

8.3     Arrays sortieren

8.4     Arrays verschachteln und zusammenfügen

8.5     Arrays durchlaufen

8.6     Array-Methoden höherer Ordnung: Callbacks

8.7     Übungen: array.filter()

8.8     Sparse Arrays – Arrays mit Lücken

JSON – JavaScript Object Notation

9.1     JSON-Objekte und JSON-Arrays

9.2     JSON-Objekte in Strings umwandeln und umgekehrt

9.3     Übung: Objekte/JSON

Document Object Model

10.1     DOM – das Document Object Model

10.2     Zugriff auf die DOM-Elemente

10.3     DOM-Methoden und -Eigenschaften

10.4     Zugriff mit CSS-Selektoren – querySelector() und querySelectorAll()

10.5     DOM-Navigation

10.6     Zugriff auf Inhalte mit innerHTML, innerText und TextContent

10.7     Elemente ins DOM einfügen

10.8     Übung: Elemente im DOM einbinden

10.9     Praxisbeispiel – komplexe Strukturen einfügen

10.10   Übung: Bild in das Fragment setzen

10.11   DOM-Elemente erzeugen und platzieren

10.12   Elemente ersetzen und entfernen

10.13   Übung: Elemente entfernen

10.14   CSS-Stile und -Klassen ändern

Ereignisse – Events

11.1    Event Handling – Ereignisse erkennen

11.2    Eigenschaften und Methoden der Maus-Events

11.3    Übung: Mauszeiger verfolgen

11.4    Tastatur-Events

11.5    Übung: Tastatur-Ereignisse

11.6    Vorbestimmte Verhalten verhindern – event.preventDefault()

11.7    Übung: Formulare prüfen

11.8    Event Delegation – ein Event Handler für viele Elemente

11.9    Ereignisse des Window-Objekts

Formulare prüfen und Daten versenden

12.1    input – Eingaben in Formularfelder

12.2    Formulardaten versenden

12.3    Datum und Dauer – Formulareingaben

Asynchrones JavaScript

13.1    Zeitgesteuerte Anwendungen

13.2    AJAX – XMLHTTPRequest – Kommunikation mit dem Server

13.3    Das Fetch-API – GET – Daten abholen

13.4    Übung: showProduct(option)

13.5    Fetch Async/Await – warten auf die Antwort

Window, Cookies und die Web-APIs

14.1    Grundsätzliches zum Window-Objekt

14.2    Das Window-Objekt und das Navigator-Objekt

14.3    IntersectionObserver – Überwachung des sichtbaren Bereichs der Webseite

14.4    Web Animations API

14.5    Cookies – Gedächtnis für Webseiten

14.6    Übung: Cookies für Leaflet-Kartenposition

14.7    Web Storage – Speicher im Browser

14.8    Übung: Local Storage

Anhang

Glossar

Error – Fehlermeldungen

Keywords (Schlüsselwörter)

Quellen

Bildnachweis

Einleitung

Programmieren lernen in 14 Tagen

Mit diesem Buch haben Sie sich für einen einfachen, praktischen und fundierten Einstieg in JavaScript entschieden. Sie lernen ohne unnötigen Ballast alles, was SIE wissen müssen, um JavaScript effektiv für Projekte in Ihrem Berufs- und Interessensgebiet einzusetzen. Alles, was Sie dafür benötigen, sind grundlegende Kenntnisse in HTML und CSS.

Wenn Sie Zeit genug haben, können Sie jeden Tag ein neues Kapitel durcharbeiten und so innerhalb von zwei Wochen Programmieren lernen. Am besten lesen Sie das Buch neben der Computer-Tastatur und probieren die Programmbeispiele und Übungen gleich aus. Sie werden schnell erste Erfolge erzielen und Freude an der Programmierung mit JavaScript finden.

Der Sandkasten – Programmbeispiele zum Download

Sie müssen die Beispiele in diesem Buch nicht abtippen. Der Code der Beispiele und zu den Übungen steht Ihnen auf der Webseite des Verlags unter www.mitp.de/0778 zur Verfügung.

Fast immer liegen die Beispiel-Lösungen in einer externen JavaScript-Datei, sodass Sie die Wahl haben, sich eine eigene Lösung zu erarbeiten oder den Lösungsweg zu studieren.

Fragen und Feedback

Unsere Verlagsprodukte werden mit großer Sorgfalt erstellt. Sollten Sie trotzdem einen Fehler bemerken oder eine andere Anmerkung zum Buch haben, freuen wir uns über eine direkte Rückmeldung an [email protected].

Falls es zu diesem Buch bereits eine Errata-Liste gibt, finden Sie diese unter www.mitp.de/0778 im Reiter DOWNLOADS.

Wir wünschen Ihnen viel Erfolg und Spaß bei der Programmierung mit JavaScript!

Vorwort

Sofort ins kalte Wasser – ein fremdes Skript lesen und verstehen

Die ersten Gehversuche mit JavaScript starten die meisten Webdesigner mit einem fertigen Skript, das sie z.B. auf GitHub finden und vielleicht in einzelnen Anweisungen nach ihrer Vorstellung ändern.

Für den ersten Schritt in die Programmierung mit JavaScript reicht eine normale Webseite. Das script-Element am Ende des Dokuments (vor dem schließenden body-Tag) braucht keinerlei Attribute. Innerhalb der öffnenden und schließenden script-Tags wirken JavaScript-Anweisungen nur auf dieser Seite.

HTML:

Der Aufruf document.querySelector ist das JavaScript-Äquivalent zum CSS-Selektor. In den runden Klammern des Aufrufs kann ein beliebiger CSS-Selektor stehen. In diesem Beispiel ist es ein HTML-Tag-Selektor. Nach den schließenden runden Klammer erzeugt .style ein style-Attribut im öffnenden body-Tag und "color: green" ist eine ganz normale CSS-Regel.

document.querySelector ist sozusagen das JavaScript-Äquivalent eines CSS-Selektors und erreicht die Elemente über einen CSS-Selektor. Nach demselben Muster würde ein CSS-class-Selektor in den runden Klammern wirken. Schreiben Sie ".hallo" in die runden Klammern und wählen Sie eine andere CSS-Regel, z.B. die Schriftgröße und die Hintergrundfarbe, um gezielt den Text im p-Element mit der Klasse hallo zu stylen.

Der CSS-Selektor wird mit demselben Punkt vor dem Klassennamen angesprochen wie in der CSS-Datei, das Semikolon trennt die beiden Regeln voneinander.

Das aufgeschobene Vorwort

Einsatz von JavaScript

In den frühen Zeiten des Internets gab es nur statische Seiten auf der Basis von HTML. Erst CSS, JavaScript und PHP haben das Internet populär gemacht. In den Anfängen brachte JavaScript Effekte und kleine Animationen für die Webseite und übernahm dann mehr die Rolle des Vermittlers zwischen der Anwendung auf dem Server und dem Benutzer. Heute gestaltet JavaScript nicht nur Webseiten, sondern sitzt auch hinter PDF-Dateien und in Photoshop, in den Anwendungen für mobile Geräte und ist der Kern von Node.js, einem weiteren Webserver neben Apache.

Dieses Buch konzentriert sich auf die Grundlagen von JavaScript für Webseiten, auf praktische Anwendungen von einfachen Effekten bis hin zur Prüfung und Übermittlung von Formulardaten.

Der erste Teil widmet sich den einfachen Vokabeln und der Grammatik von JavaScript: Datentypen wie Zahlen und Zeichenketten, Objekten und Arrays, Kontrollstrukturen und Funktionen.

Der zweite Teil dreht sich um die Anwendung dieser Grundlagen in Webseiten: Wie ändert man Inhalte, erkennt Ereignisse wie einen Mausklick, erzeugt HTML-Elemente on the fly und weist ihnen CSS zu?

Die Reaktion auf Aktionen des Benutzers eröffnet schließlich den Weg in die Kommunikation mit dem Server: Wie funktioniert die Übergabe der Benutzereingaben aus dem Formular an die Anwendung auf dem Server?

Programmiersprachen vs. natürliche Sprachen

Programmiersprachen haben viel mit natürlichen Sprachen gemeinsam: Sie haben Vokabeln und eine Grammatik – ihre Syntax. So wie man eine natürliche Sprache nicht allein aus dem Lehrbuch lernt, brauchen die Vokabeln der Programmiersprache und ihre Anwendung praktische Übung. Es dauert, bis Sie eine Diskussion in italienischer Sprache führen können, aber für den Anfang ist es super, wenn wir den Fremdenführer gut verstehen. Das Verständnis für ein fremdes Skript ist ein großer Schritt, um eigene Programme zu entwickeln.

Bis Sie als Einsteiger den ersten Algorithmus für eine Aufgabe formulieren können, passiert dasselbe wie bei den ersten Sätzen einer frisch erlernten Sprache: Da stottert man schon mal, aber mit jedem Gespräch wird es flüssiger.

Zwei Schritte vor, ein Schritt zurück

Bei den Grundlagen von JavaScript stellen sich Einsteiger die Frage: »Was mache ich mit dieser ganzen Theorie überhaupt?«. Dabei geht es weder um Vollständigkeit noch um technische Akkuratesse, sondern um das Verständnis für die Konzepte. Erst wenn es nach der Vorstellung von einfachen Datentypen, Arrays, Objekten und Funktionen an das Ändern des HTML-Dokuments (das Document Object Model) geht, offenbaren sich viele Konzepte von JavaScript. Das vorliegende Buch greift darum an vielen Stellen zwei Schritte vor und verweist andererseits aus den Kapiteln zur Anwendung von JavaScript in Webseiten zurück auf die Grundlagen. Keine Sorge: Der praktische Umgang wirft ein neues Licht auf die Konzepte und bringt das tiefe Verständnis.

JavaScript-Versionen und Browser-Versionen

ECMAScript und JavaScript

JavaScript wurde 1995 von Netscape entwickelt und von Microsoft als JScript adaptiert. Ein Standard wurde aber erst durch die ECMA (European Computer Manufacturers Association) erreicht.

Die Grundlagen von JavaScript werden von der ECMA standardisiert, das W3C steuert alles rund um das Document Object Model zu, also den Teil von JavaScript, der sich speziell auf Webseiten bezieht. Auf jeden Fall aber werden JavaScript-Versionen als ECMAScript veröffentlicht. ECMAScript 6 war ein großer Sprung im Jahr 2015 und ist eine stabile Version für alle modernen Browser. Heute nutzt die ECMA Jahreszahlen anstelle von Versionsnummern und beschert uns jedes Jahr mit einer neuen Versionsnummer.

Das läuft nicht anders als bei neuen Elementen in HTML oder neuen Eigenschaften für CSS: Bis neue Versionen für die Programmierung von Webseiten genutzt werden können, muss sicher sein, dass die Browser die Neuheiten auf einer breiten Basis unterstützen. Darum gilt die Version 6 von JavaScript bis heute als Eckpfeiler für Online-Anwendungen.

Browser-Unterstützung

Das Erscheinen einer neuen Version bedeutet natürlich nicht, dass alle Browser direkt auf den Zug aufspringen. Als Entwickler fiebert man dem einen oder anderen lang ersehnten Feature entgegen, aber wir können es in der Regel erst nutzen, wenn die Mainstream-Browser die neuen Funktionen in ihre Versionen eingebaut haben und der größte Teil der potenziellen Benutzer wiederum auf die aktuellen Versionen der Browser umgestiegen ist.

Vorbereitungen und Werkzeuge

1.1    HTML und CSS

1.1.1   Korrektes HTML

Es ist nicht wichtig, ob Sie bereits PHP, TypeScript oder Java programmiert haben: Ohne solide Kenntnis und Erfahrung mit HTML und CSS ist der Einstieg in JavaScript steil und steinig. Schließlich ist ein Hauptgrund für den Einsatz von JavaScript der Eingriff in die Darstellung der Webseite. Valides – also korrektes – HTML ist die Basis für JavaScript. Obwohl die Browser viele HTML-Fehler ignorieren, schlagen falsch verschachteltes HTML und fehlende Hochkommas im HTML-Tag zurück. Darum gehört der Validator zum Alltag des JavaScript-Programmierers.

Abb. 1.1:https://validator.w3.org – Prüfen, ob die HTML-Struktur stimmt

1.1.2   Wie viel CSS-Kenntnis ist wichtig?

Wie gut Sie sich mit CSS auskennen sollten, hängt davon ab, auf welche Einsatzgebiete von JavaScript Sie sich in erster Linie vorbereiten:

Animationen und Effekte

Design und Layout von Webseiten

Kommunikation mit dem Server

Wenn Sie JavaScript einsetzen wollen, um die Grenzen von CSS-Animationen zu überschreiten – etwa Animationen starten, wenn sie im Browserfenster sichtbar werden –, sind gute Kenntnisse in CSS-Animationen gefragt.

Bei Änderungen am Design von Content-Management-Systemen wie WordPress, Joomla oder Drupal kann das CSS anspruchsvoll sein. Dort sitzen auf einem einzelnen Element gut ein Dutzend CSS-Eigenschaften aus unterschiedlichen Quellen.

Konzepte wie Cascading (das Einfließen von Stilen aus vorangegangenen CSS-Regeln) und CSS-Selektoren brauchen ein tiefes Verständnis. Ein section-Element einer Seite beherbergt oft ein gutes Dutzend Stile aus verschiedenen Quellen:

Abb. 1.2: Der Erste-Hilfe-Koffer für den Einblick ins CSS ist die Browser-Konsole.

Die Kommunikation mit Anwendungen auf dem Server ist ein weiteres Einsatzgebiet von JavaScript. Das Einlesen und Weiterreichen von Benutzereingaben kommt mit einfachen Eingriffen in die Darstellung im Browser aus. Hier reichen solide Grundlagen von CSS.

1.1.3   HTML- und CSS-Kenntnisse – alles halb so wild

Zur Programmierung mit Sprachen wie Java oder C gehört die Formatierung der Ausgabe. Die Benutzerschnittstelle einer Desktop-Anwendung ist ein Monster von Menüs und Programmfenstern sowie die Reaktion auf Benutzereingaben und auf Nachrichten vom Betriebssystem. In JavaScript übernehmen HTML und CSS die Formatierung der Benutzerschnittstelle vollständig. Selbst wenn die Kenntnis von HTML und CSS nur oberflächlich ist, haben Sie damit schon einen großen Teil des Weges zur Programmierung von Webseiten »im Kasten«.

1.2    JavaScript einbinden

1.2.1   Ein Sandkasten für JavaScript – Sandbox

JavaScript braucht keinen Webserver für die Ausführung, sondern läuft in einem beliebigen Ordner auf dem eigenen Rechner. Ein Texteditor und ein Browser, das ist schon alles, was für die ersten Schritte mit JavaScript erforderlich ist.

Dem Editor (besser »Programmeditor«) ist ein eigener Abschnitt gewidmet, aber für die ersten Schritte reichen etwa TextEdit auf dem Mac, Notepad unter Windows oder nano unter Unix. Wichtig ist, dass der Editor keine Formatierung einbringt – keine Buttons für fette oder kursive Schrift, keine Schriftgrößen oder -farben.

Die Vorbereitungen für die ersten Schritte mit JavaScript beschränken sich also auf das Anlegen eines Ordners – der Sandbox. Der Name des Ordners ist nicht relevant – meine-webseite, sandbox oder klara. JavaScript wird im Browser ausgeführt, für die Formatierung der Ausgabe sorgen HTML und CSS. Das macht den Einstieg in JavaScript einfacher als das Erlernen anderer Programmiersprachen.

Im ersten Teil dieses Buchs ist die HTML-Datei nur ein Grundgerüst aus head und body.

HTML:

Die Datei index.html öffnet sich durch einen Doppelklick im Browser, aber Änderungen nach dem Öffnen der Seite zeigt der Browser erst an, wenn die Seite neu geladen wird. Darum empfiehlt Abschnitt 1.4 Programmeditoren mit einem Live-Server. Doch zunächst erst einmal zum Einbinden von JavaScript in Webseiten.

1.2.2   Das HTML-script-Element

JavaScript-Anweisungen können mit dem HTML-script-Tag direkt in das HTML-Dokument gesetzt oder als Datei mit der Namenserweiterung .js in eine gesonderte Datei geschrieben werden. Das script-Tag bindet die externe JavaScript-Datei mit einem src-Attribut ein.

Das script-Element kann an beliebiger Stelle eines HTML-Dokuments stehen: im Seitenkopf oder innerhalb der öffnenden und schließenden body-Tags. Die empfohlene Arbeitsweise ist eine Skript-Datei mit der Dateierweiterung .js und dem defer-Attribut nach dem Laden der CSS-Dateien im Kopf der HTML-Datei.

HTML:

Viele Content-Management-Systeme binden das JavaScript noch vor dem schließenden body-Tag ein. Ein defer-Attribut wird dann nicht gebraucht.

Am Ende können Sie kleine Skripte auch direkt vor dem schließenden body-Tag einsetzen.

Im Allgemeinen ist es nicht empfehlenswert, die Skript-Anweisungen direkt ins HTML zu setzen. Aber wenn das Programm nur wenige Zeilen enthält und nur auf einer Seite gebraucht wird, spricht nichts dagegen.

1.2.3   JavaScript-Module: Import und Export

Mit ECMAScript 6 ist eine weitere Methode zum Einbinden von Skript-Dateien angekommen, die heute von allen modernen Browsern unterstützt wird: JavaScript-Module. Wenn Sie Skripte von Dritten einbinden, wird ihnen diese Option früher oder später begegnen.

Module organisieren Skript-Dateien, indem sie Anwendungen in überschaubarere Teile herunterbrechen und sie in separaten Dateien speichern. Das »Hauptprogramm« holt diese Fragmente in das Skript zurück: Sie werden als Module importiert.

Das type-Attribut des script-Elements kennzeichnet JavaScript-Dateien als module. Sowohl Skript-Dateien, die Module importieren, als auch Skripte, die Elemente exportieren, müssen als type="module" notiert werden.

Code, der in der Anwendung nur stören würde, wird in ein Modul exportiert – z.B. tools.js. Die zentrale Skript-Datei importiert die Module, die tatsächlich gebraucht werden.

Im Rahmen dieses Buchs bleiben wir beim klassischen Einbinden von JavaScript-Dateien mit dem script-Tag.

1.3    JavaScript laden

1.3.1   Ausführungsreihenfolge beim Laden von Webseiten

Der Browser liest das HTML-Dokument Zeile für Zeile von oben nach unten und beginnt bereits mit der Darstellung der Seite, bevor er das Dokument vollständig geladen hat. Bei einer externen Skript-Datei stoppt der Browser, bis die Datei heruntergeladen ist. Das kann zu einer spürbaren Latenz der Anzeige führen. Große Skript-Dateien im Seitenkopf führen zu einer Verzögerung im Aufbau des Dokuments, dem »Rendern«.

Abb. 1.3: Der »Wasserfall« stellt das Laden der Elemente der Webseite als Grafik dar.

1.3.2   Ausführungsreihenfolge festlegen mit async und defer

Skripte wurden bis vor wenigen Jahren häufig am Ende des Dokuments vor dem schließenden body-Tag geladen, um ohne großen Aufwand sicherzustellen, dass alle Ressourcen (Bilder, CSS-Dateien …) bereits geladen sind. Heute hat das script-Tag zwei Attribute: defer oder async. Sie verhindern den Zwischenhalt, aber laden die Skript-Datei »just in time«.

Mit defer und async können Sie Skript-Dateien im head-Element des Dokuments einbinden und sicherstellen, dass der Browser sie in der richtigen Reihenfolge lädt, ohne den Seitenaufbau zu unterbrechen.

script1.js lädt ein Bild, script2.js wendet einen Filter auf das Bild an. Sitzen die Skript-Tags im Kopf der Seite, erzeugen sie beide Fehler: script1.js kennt das HTML-Element für die Platzierung des Bilds nicht, script2.js kann den Filter nicht auf das Bild anwenden.

Mit defer wird das Bild zwar geladen und eingesetzt, aber dieser Prozess dauert an, während der Browser script2.js schon ausführt. Zum Zeitpunkt der Ausführung von script2.js ist das Bild noch nicht geladen. Dieselbe Situation tritt ein, wenn script1.js als async markiert wäre.

Der Browser lädt Skripte mit einem defer-Attribut in der Reihenfolge, in der sie im Code erscheinen. Dabei wird der Browser nicht blockiert, er führt diese Skripte aber erst aus, wenn das Dokument vollständig geladen ist.

Skripte mit einem async-Attribut werden ebenfalls ohne eine Blockade ausgeführt, aber ohne Beachtung der Reihenfolge. Das kann dazu führen, dass script2.js vor script1.js geladen und ausgeführt wird. Wenn es nicht auf die Reihenfolge beim Laden der Skripte ankommt, wäre async die praktikable Lösung.

1.4    Mein Freund, der Editor

1.4.1   Die Werkzeuge der Programmeditoren

Sie können jeden Texteditor benutzen, aber gute Programmeditoren sind schon für HTML und CSS unersetzlich, für JavaScript gilt dies umso mehr. Die Anforderungen sind:

Syntax-Highlighting – der Editor macht die Grammatik der Programmiersprache durch unterschiedliche Farben sichtbar.

Einrücken – bringt die hierarchische Struktur von Code-Blöcken sauber zum Vorschein und erleichtert die Fehlersuche.

Code Folding (Blöcke zusammenfalten) – verbirgt Code-Segmente, die aktuell nicht gebraucht werden.

Code Completing – zeigt nach wenigen Buchstaben Hinweise auf Befehle, Anweisungen und Methoden.

Automatisches Klammern – setzt direkt doppelte Hochkommas, runde, eckige und geschweifte Klammern und positioniert den Cursor in die Klammer.

SplitView oder SplitScreen – zeigt ein Dokument in einem geteilten Fenster, um einen gleichzeitigen Einblick in lange Codeseiten zu bieten.

1.4.2   Visual Studio Code

Der beste Editor ist der, den man durch und durch kennt. Tatsächlich finden Sie heute viele hervorragende kostenlose Code-Editoren im Netz.

Abb. 1.4: Screenshot: Visual Studio Code – empfohlene Erweiterung: Live Server

Visual Studio Code (VSC) von Microsoft ist der Industriestandard und läuft »auf ’nem Bierdeckel« (charmante Umschreibung für »unter jedem Betriebssystem«). Anforderungen wie

Syntax-Highlighting,

das Zusammenklappen von Anweisungsblöcken,

Auto-Vervollständigen

erfüllen die meisten Programmeditoren aus dem Effeff, aber Visual Studio Code kann mehr. Für die JavaScript-Entwicklung ist eine Live-Server-Umgebung unbezahlbar. Ein Live-Server ist eine Anwendung im Code-Editor, die sich zum Webserver aufspannt. Sie sehen den Effekt von Änderungen nach dem Speichern, ohne die Seite im Browser durch ein Refresh neu zu laden. Für Visual Studio Code (VSC) gibt es diese Funktion als Erweiterung.

1.4.3   Bare Bones BBEdit

BBEdit läuft nur unter macOS und kostet etwa 50 €, aber hat den Live-Server schon an Bord, ebenso Syntax-Highlighting, Code Folding, Code Completing, automatische Klammern und SplitView. Ohne eine Erweiterung oder ein Plug-in lädt BBEdit Dateien ohne FTP/SFTP-Programm direkt vom Webserver und beim Speichern wieder zurück auf den Webspace.

1.4.4   IDE – Integrierte Entwicklungsumgebung

Eine IDE (Integrated Development Environment) ist eine ganze Suite mit Entwicklerwerkzeugen, die mehrere Programmiersprachen unterstützt und häufig von großen Teams genutzt wird. Meist macht die Konfiguration viel Arbeit und überfordert Einsteiger schnell ohne jeglichen Mehrwert. Beispiele für IDEs sind PhpStorm und Xcode für macOS.

1.5    Die Browser-Konsole – die Sprechstundenhilfe

1.5.1   Browser

Moderne Browser sind die Grundlage für das Design und Layout von Webseiten mit HTML und CSS. Selbst heute, da sich die Browser nach den Zwistigkeiten der Frühzeit einander angenähert haben, reicht der bevorzugte Browser nicht, um alle JavaScript-Programme ausreichend zu testen. Kleine Abweichungen gibt es immer noch, und am besten versorgen Sie sich mit allen Browsern, die auf dem eigenen System verfügbar sind. Auch ältere Version der Browser sollten in der Sammlung nicht fehlen.

Der Blick auf den Desktop-Monitor reicht nicht. Mobile Geräte für Android und iOS werden im Laufe der Entwicklung zu einer unverzichtbaren Ergänzung beim Testen Ihrer Anwendungen. Während es für macOS Simulatoren sowohl für iOS-Geräte als auch für Android gibt, bleibt PC- und Unix-Benutzern die Sicht auf iOS verwehrt, wenn sich keine hilfreiche Freundin mit einem iPhone findet.

Abb. 1.5: Android-Simulator

Abb. 1.6: iOS-Simulator

Die Installation der Simulatoren ist kein »Klick mich, hier bin ich«, aber der Aufwand der Installation lohnt sich. Die Darstellung der Simulatoren ist exakter, beim Testen sind sie schneller bei der Hand als eine Sammlung mobiler Geräte.

Apple hat den Simulator für mobile Geräte von der Apple Watch bis zum iPad in die Entwicklungsumgebung Xcode unter Developer > Tools/Simulator eingebettet. Apple-Nutzer können Xcode kostenlos im App Store laden.

Für Android-Geräte stellt Google Android Studio auf https://developer.android.com/studio für Windows und macOS zur Verfügung.

1.5.2   Die Browser-Konsole

Das wichtigste Werkzeug der Browser wiederum ist ihre Browser-Konsole, die sich hinter den Entwicklerwerkzeugen verbirgt. Die Konsole zeigt Fehler an, hilft bei der Suche nach Logikfehlern und ist die erste Wahl, um eine Anweisung ohne großen Aufwand zu testen.

Alle Browser – von Chrome über Edge und Firefox bis zu Safari – haben eine Konsole, aber der Zugriff auf die Konsole ist bei jedem Browser unterschiedlich.

1.5.3   Safari

Der Apple-Browser eröffnet den Weg zur Browser-Konsole erst, wenn unter den Safari-Einstellungen die Entwicklerwerkzeuge aktiviert werden.

Abb. 1.7: Safari (macOS): Einstellungen – Erweitert – Menü »Entwickler« in der Menüleiste anzeigen

Von da an sitzt der Punkt »Entwickler« dauerhaft und gut sichtbar in der Menüleiste.

1.5.4   Chrome

Safari und Chrome haben denselben Ursprung – Webkit –, aber die Konsole liegt bei Chrome hinter den drei Punkten rechts oben im Browserfenster.

Abb. 1.8: Unter »Weitere Tools« liegen die »Entwicklertools« weit unten.

1.5.5   Firefox

Firefox zeigt auf der rechten Seite des Browserfensters die drei kleinen Balken eines Hamburger-Menüs ≡, von dort aus am unteren Ende des Menüs »Weitere Werkzeuge« >> »Browser-Konsole«.

1.5.6   Ein Blick in die Browser-Konsole

Trotz kleiner Unterschiede in der Funktionalität agieren die Browser-Konsolen aller Hersteller in gleicher Weise. Sie zeigen uns den HTML-Quelltext der Seite, aber für die JavaScript-Entwicklung ist das Register Console der Dreh- und Angelpunkt.

JavaScript zeigt mit dem Befehl console.log Testausgaben, die sicherstellen, dass das Programm auf dem richtigen Weg ist, zeigt Fehlermeldungen und die Ursache des Fehlers (Abbildung 1.9).

Abb. 1.9: Die Console zeigt Testausgaben, die aktuellen Werte von Variablen und das Ergebnis einfacher Abfragen.

Viele der Beispiele in diesem Buch zeigen Konsolen-Ausgaben. Um sie von Code-Beispielen zu unterscheiden, haben sie ihr eigenes Format:

1.6    Praktische Konsolen-Befehle

1.6.1   Die Konsole unter den Entwicklertools