Ackermann JavaScript

Das umfassende Handbuch
3. Auflage 2021
ISBN: 978-3-8362-8631-2
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 1273 Seiten

Reihe: Rheinwerk Computing

Ein umfassender Einstieg in JavaScript, viele praktische Beispiele und eine Darstellung auch von professionellen Techniken - das zeichnet dieses unverzichtbare Handbuch aus. Lernen Sie JavaScript von Grund auf und nutzen Sie dieses Buch als Nachschlagewerk für die tägliche Entwicklungsarbeit. Die schnellen und praxisnahen Beispielanwendungen können Sie sofort in eigenen Projekten einsetzen. Außerdem erfahren Sie mehr über aktuelle Trends und Entwicklungen, z. B. den Einsatz bei Mikrocontrollern und den serverseitigen Einsatz von JavaScript (Node.js).

Aus dem Inhalt:

• Grundlagen und Sprachkern
• Mit Referenztypen arbeiten
• Webseiten dynamisch verändern
• Ereignisse verarbeiten und auslösen
• Formulare verarbeiten
• Browserinformationen verarbeiten
• Inhalte einer Webseite dynamisch verarbeiten
• Aufgaben vereinfachen mit jQuery
• Bilder dynamisch erstellen
• Moderne Web-APIs verwenden
• Objektorientierte Programmierung
• Funktionale Programmierung

Philip Ackermann ist CTO der Cedalo GmbH und Autor mehrerer Fachbücher und Fachartikel über Java und JavaScript. Seine Schwerpunkte liegen in der Konzeption und Entwicklung von Node.js- und JEE-Projekten in den Bereichen Industrie 4.0 und Internet of Things.

Autoren/Hrsg.

Ackermann, Philip

Inhaltsverzeichnis

Materialien zum Buch ... 23  Vorwort ... 25  1.  Grundlagen und Einführung ... 29  1.1 ... Grundlagen der Programmierung ... 29  1.2 ... Einführung in JavaScript ... 44  1.3 ... Zusammenfassung ... 53  2.  Erste Schritte ... 55  2.1 ... Einführung in JavaScript und die Webentwicklung ... 55  2.2 ... JavaScript in eine Webseite einbinden ... 63  2.3 ... Eine Ausgabe erzeugen ... 76  2.4 ... Zusammenfassung ... 83  3.  Sprachkern ... 85  3.1 ... Werte in Variablen speichern ... 85  3.2 ... Die verschiedenen Datentypen verwenden ... 96  3.3 ... Die verschiedenen Operatoren einsetzen ... 116  3.4 ... Den Ablauf eines Programms steuern ... 137  3.5 ... Wiederverwendbare Codebausteine erstellen ... 175  3.6 ... Auf Fehler reagieren und sie richtig behandeln ... 206  3.7 ... Den Quelltext kommentieren ... 225  3.8 ... Den Code debuggen ... 225  3.9 ... Zusammenfassung ... 236  4.  Mit Referenztypen arbeiten ... 239  4.1 ... Unterschied zwischen primitiven Datentypen und Referenztypen ... 239  4.2 ... Zustand und Verhalten in Objekten kapseln ... 247  4.3 ... Mit Arrays arbeiten ... 282  4.4 ... Werte aus Arrays und Objekten extrahieren ... 308  4.5 ... Mit Zeichenketten arbeiten ... 321  4.6 ... Maps verwenden ... 329  4.7 ... Sets verwenden ... 336  4.8 ... Sonstige globale Objekte ... 341  4.9 ... Mit regulären Ausdrücken arbeiten ... 345  4.10 ... Funktionen als Referenztypen ... 367  4.11 ... Zusammenfassung ... 375  5.  Webseiten dynamisch verändern ... 377  5.1 ... Aufbau einer Webseite ... 377  5.2 ... Elemente selektieren ... 383  5.3 ... Mit Textknoten arbeiten ... 413  5.4 ... Mit Elementen arbeiten ... 417  5.5 ... Mit Attributen arbeiten ... 427  5.6 ... Zusammenfassung ... 432  6.  Ereignisse verarbeiten und auslösen ... 435  6.1 ... Das Konzept der ereignisgesteuerten Programmierung ... 435  6.2 ... Auf Ereignisse reagieren ... 436  6.3 ... Die verschiedenen Typen von Ereignissen ... 453  6.4 ... Den Ereignisfluss verstehen und beeinflussen ... 467  6.5 ... Ereignisse programmatisch auslösen ... 483  6.6 ... Zusammenfassung ... 485  7.  Mit Formularen arbeiten ... 487  7.1 ... Auf Formulare und Formularfelder zugreifen ... 488  7.2 ... Formulare programmatisch abschicken und zurücksetzen ... 501  7.3 ... Formulareingaben validieren ... 504  7.4 ... Zusammenfassung ... 515  8.  Browser steuern und Browserinformationen auslesen ... 517  8.1 ... Das Browser Object Model ... 517  8.2 ... Auf Fensterinformationen zugreifen ... 519  8.3 ... Auf Navigationsinformationen der aktuellen Webseite zugreifen ... 530  8.4 ... Den Browserverlauf einsehen und verändern ... 533  8.5 ... Browser erkennen und Browserfeatures bestimmen ... 540  8.6 ... Auf Informationen des Bildschirms zugreifen ... 542  8.7 ... Zusammenfassung ... 543  9.  Inhalte einer Webseite dynamisch nachladen ... 545  9.1 ... Das Prinzip von Ajax ... 545  9.2 ... Das XML-Format ... 551  9.3 ... Das JSON-Format ... 557  9.4 ... Anfragen per Ajax stellen ... 562  9.5 ... Zusammenfassung ... 588

10.  Aufgaben vereinfachen mit jQuery ... 589  10.1 ... Einführung ... 589  10.2 ... Mit dem DOM arbeiten ... 595  10.3 ... Auf Ereignisse reagieren ... 612  10.4 ... Ajax-Anfragen erstellen ... 620  10.5 ... Zusammenfassung ... 628

11.  Bilder und Grafiken dynamisch erstellen ... 635  11.1 ... Bilder zeichnen ... 635  11.2 ... Vektorgrafiken einbinden ... 657  11.3 ... Zusammenfassung ... 665

12.  Moderne Web-APIs verwenden ... 667  12.1 ... Über JavaScript kommunizieren ... 669  12.2 ... Nutzer wiedererkennen ... 678  12.3 ... Den Browserspeicher nutzen ... 686  12.4 ... Die Browserdatenbank nutzen ... 693  12.5 ... Auf das Dateisystem zugreifen ... 705  12.6 ... Komponenten einer Webseite verschieben ... 713  12.7 ... Aufgaben parallelisieren ... 719  12.8 ... Den Standort von Nutzern ermitteln ... 723  12.9 ... Den Batteriestand eines Endgeräts auslesen ... 729  12.10 ... Sprache ausgeben und Sprache erkennen ... 733  12.11 ... Animationen erstellen ... 737  12.12 ... Mit der Kommandozeile arbeiten ... 741  12.13 ... Mehrsprachige Anwendungen entwickeln ... 751  12.14 ... Übersicht über verschiedene Web-APIs ... 764  12.15 ... Zusammenfassung ... 768

13.  Objektorientierte Programmierung ... 771  13.1 ... Die Prinzipien der objektorientierten Programmierung ... 771  13.2 ... Prototypische Objektorientierung ... 778  13.3 ... Pseudoklassische Objektorientierung ... 786  13.4 ... Objektorientierung mit Klassensyntax ... 792  13.5 ... Zusammenfassung ... 811

14.  Funktionale Programmierung ... 813  14.1 ... Prinzipien der funktionalen Programmierung ... 813  14.2 ... Imperative Programmierung und funktionale Programmierung ... 815  14.3 ... Zusammenfassung ... 825

15.  Den Quelltext richtig strukturieren ... 827  15.1 ... Namenskonflikte vermeiden ... 827  15.2 ... Module definieren und verwenden ... 831  15.3 ... Zusammenfassung ... 846

16.  Asynchrone Programmierung und weitere fortgeschrittene Features verwenden ... 849  16.1 ... Asynchrone Programmierung verstehen und anwenden ... 849  16.2 ... Das Iterieren über Datenstrukturen kapseln ... 867  16.3 ... Funktionen anhalten und fortsetzen ... 871  16.4 ... Den Zugriff auf Objekte abfangen ... 875  16.5 ... Zusammenfassung ... 881

17.  Serverseitige Anwendungen mit Node.js erstellen ... 883  17.1 ... Einführung Node.js ... 883  17.2 ... Node.js-Packages verwalten ... 887  17.3 ... Ereignisse verarbeiten und auslösen ... 895  17.4 ... Auf das Dateisystem zugreifen ... 899  17.5 ... Einen Webserver erstellen ... 904  17.6 ... Auf Datenbanken zugreifen ... 913  17.7 ... Mit Streams arbeiten ... 921  17.8 ... Zusammenfassung ... 929

18.  Mobile Anwendungen mit JavaScript erstellen ... 931  18.1 ... Die unterschiedlichen Arten mobiler Anwendungen ... 931  18.2 ... Mobile Anwendungen mit React Native erstellen ... 937  18.3 ... Zusammenfassung ... 950

19.  Desktopanwendungen mit JavaScript ... 951  19.1 ... NW.js ... 952  19.2 ... Electron ... 957  19.3 ... Zusammenfassung ... 963

20.  Mikrocontroller mit JavaScript steuern ... 965  20.1 ... Espruino ... 966  20.2 ... Tessel ... 972  20.3 ... BeagleBone Black ... 977  20.4 ... Arduino ... 980  20.5 ... Cylon.js ... 983  20.6 ... Zusammenfassung ... 985

21.  Einen professionellen Entwicklungsprozess aufsetzen ... 987  21.1 ... Aufgaben automatisieren ... 987  21.2 ... Quelltext automatisiert testen ... 992  21.3 ... Versionsverwaltung des Quelltexts ... 1006  21.4 ... Zusammenfassung ... 1024  Anhang ... 1025  A ... JavaScript-Referenz ... 1027  B ... DOM-Referenz und HTML-Erweiterungen ... 1087  C ... BOM und Ajax ... 1175  D ... HTML5-Web-APIs-Referenz ... 1209  Index ... 1257

Leseproben

1    Grundlagen und Einführung

Bevor wir uns mit der Erstellung von JavaScript-Programmen beschäftigen, gebe ich Ihnen in diesem Kapitel zunächst einen Überblick darüber, was man überhaupt unter »Programmierung« versteht, welche Arten von Programmiersprachen es gibt und welchen historischen Hintergrund die Sprache JavaScript hat: Wie hat sich die Sprache im Laufe der Jahre entwickelt? Worin besteht der Zusammenhang zwischen JavaScript und ECMAScript? Zudem führe ich Sie in die verschiedenen Anwendungsgebiete von JavaScript ein und erläutere, wie sich auch diese in den letzten Jahren gewandelt haben.

Mit diesem Buch sollen Sie nicht nur die Sprache JavaScript lernen, sondern nebenbei auch – für den Fall, dass Sie bisher noch keine Erfahrung mit einer Programmiersprache haben – grundlegende Konzepte der Programmierung. In diesem Einstiegskapitel erläutere ich Ihnen daher zunächst ein paar grundlegende Begriffe und Zusammenhänge, die für den weiteren Verlauf und das Verständnis des Buchs hilfreich sind. Sollten Sie bereits Erfahrung in der Programmierung haben, können Sie zumindest den ersten Teil dieses Kapitels überspringen. Andererseits habe ich diesen Teil bewusst kurz gehalten: Ich möchte Sie nämlich nicht mit theoretischen Abhandlungen über die Programmierung langweilen, sondern schnell mit JavaScript loslegen. Insofern können Sie diesen Teil auch als kurze Wiederholung betrachten.

Eine weitere kurze Anmerkung zum Buch, bevor es gleich losgeht: Gelegentlich greife ich bei der Erklärung bestimmter Themen auf gewisse Inhalte vor, die erst zu einem späteren Zeitpunkt erläutert werden. Das lässt sich meiner Erfahrung nach bei einem Buch über Programmiersprachen nicht immer vermeiden. Gewissermaßen steht man als Autor nämlich vor dem Henne-Ei-Problem: Das eine lässt sich nicht ohne das andere erklären, das andere nicht ohne das eine. In solchen Fällen habe ich der Übersichtlichkeit halber jeweils entsprechende Verweise auf die Kapitel oder Abschnitte eingefügt, in denen die jeweiligen Inhalte besprochen werden.

1.1    Grundlagen der Programmierung

Bevor Sie mit der konkreten Programmierung beginnen können, benötigen Sie ein gewisses Grundverständnis dafür, was Programmierung überhaupt ist. Warum programmieren wir eigentlich? Wie funktionieren Programme? Welche Rolle spielt JavaScript dabei? Und wie unterscheidet sich diese Sprache von anderen Programmiersprachen?

1.1.1    Mit dem Computer kommunizieren

Gehen wir zunächst der Frage nach, warum wir überhaupt programmieren wollen bzw. welchen Zweck wir damit verfolgen. In erster Linie geht es bei der Programmierung darum, bestimmte Aufgaben von einem Computer übernehmen zu lassen. Dies können z. B. komplexe Aufgaben sein, die wir Menschen nur mühsam selbst ausrechnen könnten, oder Dinge, die uns im Alltag helfen, effektiver zu arbeiten. Denken Sie beispielsweise an Textverarbeitungsprogramme, E-Mail-Programme oder Ihren Browser. All diese Dinge hat irgendjemand programmiert.

Die Aufgabe eines Entwicklers bei der Programmierung ist es – vereinfacht gesagt –, dem Computer Anweisungen zu geben, damit dieser seinerseits die ihm gestellten Aufgaben durchführen kann. Oder anders ausgedrückt: Als Entwickler formuliert man einzelne Arbeitsschritte, um ein bestimmtes Problem zu lösen, wie beispielsweise das Sortieren von Daten in einer Tabelle oder die Überprüfung von Formulardaten, die auf einer Webseite eingegeben wurden. Die Arbeitsschritte werden dann von dem Computer Schritt für Schritt ausgewertet. Das ist in etwa vergleichbar mit einem Kochrezept. Auch dort sind einzelne Arbeitsschritte definiert, nach denen Sie vorgehen müssen, um zum Ziel zu kommen. In der Programmierung sind Sie als Entwickler quasi derjenige, der dem Computer das Rezept vorgibt, nach dem dieser vorgehen soll.

Zusammenfassend bezeichnet man die Arbeitsschritte zur Lösung einer Problemstellung (also das Rezept) in der Informatik und der Softwareentwicklung allgemein als Algorithmus. Bei einem Programm (auch Software oder Anwendung genannt) handelt es sich demnach um eine Folge von Algorithmen und daher letztendlich um eine Folge von Anweisungen, die vom Computer ausgeführt werden können.

Definition

Die zur Lösung einer Problemstellung definierten Arbeitsschritte nennt man in der Softwareentwicklung zusammenfassend Algorithmus. Vergleichen lässt sich das in etwa mit Kochrezepten, Betriebsanleitungen oder Handbüchern. Ein Algorithmus ist, so gesehen, eine Anleitung für den Computer, wie er ein bestimmtes Problem zu lösen hat.

Definition

Ein Programm bzw. eine Software setzt sich aus vielen, vielen verschiedenen Algorithmen zusammen.

Programmieranfängern fällt es zu Beginn oft schwer, wie ein Computer zu denken, und damit auch, die Arbeitsschritte innerhalb eines Algorithmus entsprechend zu definieren. Computer folgen nämlich sehr exakt den Anweisungen, die man ihnen gibt. Während Sie als Mensch beim Durchgehen eines Kochrezepts auch Ihren Verstand einschalten und bestimmte Arbeitsschritte (entsprechend Ihrer Erfahrung) variieren können, verlässt sich ein Computer darauf, dass die Schritte, die Sie formuliert haben, exakt so ausgeführt werden sollen. Umgekehrt bedeutet dies aber auch, dass Sie als Entwickler die Anweisungen ebenso exakt formulieren und sich sehr gut in den Computer hineinversetzen müssen.

Tipp

Als ich im Jahr 2000 mit der Programmierung anfing, fragte ich mich immer wieder, wie man nur programmieren lernen kann, und bewunderte andere, schon erfahrene Entwickler um ihr Wissen. Nach all den Jahren kann ich Ihnen sagen: Man lernt es nur, wenn man es selbst macht. Sie sollten also dieses Buch nicht nur lesen, sondern wirklich durcharbeiten und immer wieder selbst Programme erstellen. Setzen Sie sich dabei aber nicht zu stark unter Druck, und machen Sie sich nicht zu viel Stress, wenn mal etwas nicht direkt funktioniert. Als Entwickler braucht man nämlich vor allem eines: Ausdauer. Und die Bereitschaft, jeden Tag etwas Neues zu lernen.

1.1.2    Programmiersprachen

Ganz tief »unten« arbeiten Computer mit Nullen und Einsen, das dürfte allgemein bekannt sein. Eine professionellere Bezeichnung für »Nullen und Einsen« lautet Binärcode oder auch Maschinencode bzw. Maschinensprache. Hintergrund für diesen Binärcode ist die technische Ebene, die eben nur zwei Zustände versteht: null für »Strom aus« und eins für »Strom an«.

Verschiedene Kombinationen aus Nullen und Einsen sorgen, vereinfacht gesagt, letztendlich dafür, dass die Hardware des Computers verschiedene Dinge tut, beispielsweise ein Pixel auf Ihrem Monitor in dieser oder jener Farbe darstellt, auf Mausbewegungen oder Tastatureingaben reagiert oder über das Netzwerk eine E-Mail versendet.

Da es für uns als Entwickler aber ungemein kompliziert (und unverhältnismäßig aufwendig) wäre, die Anweisungen an den Computer in Nullen und Einsen zu formulieren, haben findige Menschen irgendwann mal Programmiersprachen erfunden, die diese Interaktion mit dem Computer abstrahieren und vereinfachen.

Programmiersprachen lassen sich abhängig von ihrem Abstraktionsgrad wiederum in unterschiedliche Kategorien einordnen. JavaScript ist eine der sogenannten höheren Programmiersprachen, abstrahiert also relativ weit von den Nullen und Einsen. Assemblersprachen hingegen sind deutlich weniger abstrakt: Dort arbeitet man zwar auch nicht mit Nullen und Einsen, aber die verwendeten Befehle sind dennoch relativ kryptisch, und die Programmierung ist damit vergleichsweise aufwendig (siehe Abbildung 1.1). Die Befehle, die Sie dagegen in JavaScript verwenden, sind mit einiger Gewöhnung recht eingängig, verständlich und gut zu merken, wie Sie bald sehen werden.

Abbildung 1.1     Höhere Programmiersprachen abstrahieren vom Maschinencode.

Merke

Bei JavaScript handelt es sich um eine höhere Programmiersprache.

Als Entwickler speichert man das, was man mit einer Programmiersprache programmiert, in ganz gewöhnlichen Textdateien, die als Quelldateien (engl.: Source Files) bezeichnet werden. Der Inhalt einer solchen Datei wird dann auch als Quelltext bzw. Quellcode (engl.: Source Code) bezeichnet.

Definition

Beim Quelltext handelt es sich um das, was man als Entwickler in der jeweiligen Programmiersprache formuliert. Maschinencode dagegen bezeichnet den Code, der vom Computer gelesen und ausgeführt wird.

Damit der Computer die Anweisungen, die im Quelltext formuliert sind, auch verstehen und umsetzen kann, muss der Quelltext in ein für den Computer verständliches Format, d. h. in den bereits erwähnten Maschinencode (sprich in Nullen und Einsen), übersetzt werden...

Über Autor(innen)

Ackermann, Philip
Philip Ackermann ist CTO der Cedalo GmbH und Autor mehrerer Fachbücher und Fachartikel über Java und JavaScript. Seine Schwerpunkte liegen in der Konzeption und Entwicklung von Node.js- und JEE-Projekten in den Bereichen Industrie 4.0 und Internet of Things.