LeseprobeLernen Sie JavaScript von Grund auf, und entwickeln Sie moderne Webanwendungen. Philip Ackermann ermöglicht Ihnen den leichten Einstieg in die JavaScript-Welt. Lesen Sie hier, in welchem Zusammen-hang JavaScript mit HTML und CSS innerhalb einer Webseite steht, und wie Sie mit JavaScript eine dynamische Webanwendung erstellen.
Philip Ackermann
JavaScript – Das umfassende Handbuch1.229 Seiten, gebunden, Juli 2016 49,90 Euro, ISBN 978-3-8362-3838-0
www.rheinwerk-verlag.de/3900
»Einführung JavaScript und Webentwicklung« »Webseiten dynamisch verändern«
Inhaltsverzeichnis
Index
Der Autor
Leseprobe weiterempfehlen
Wissen, wie’s geht.Wissen, wie’s geht.
53
2
Kapitel 2
Erste Schritte
Nach wie vor wird JavaScript hauptsächlich für die Erstellung dynamischer
Webseiten, sprich innerhalb eines Browsers eingesetzt. Bevor wir uns in späte-
ren Kapiteln im Detail mit anderen Anwendungsgebieten befassen, werde ich
Ihnen in diesem Kapitel zeigen, auf welche Weisen Sie JavaScript in eine Web-
seite einbinden und einfache Ausgaben erzeugen können. Dieses Kapitel bildet
somit gewissermaßen die Grundlage für die folgenden Kapitel.
Bevor wir uns ausführlicher mit der Sprache JavaScript an sich beschäftigen, sollten Sie
zunächst wissen, in welchem Zusammenhang JavaScript mit HTML (Hypertext Markup Lan-
guage) und CSS (Cascading Stylesheets) innerhalb einer Webseite steht, wie man JavaScript in
eine Webseite einbindet und wie man Ausgaben erzeugen kann.
2.1 Einführung JavaScript und Webentwicklung
Die wichtigsten drei Sprachen für die Erstellung von Web-Frontends sind sicherlich HTML,
CSS und JavaScript. Jede dieser Sprachen hat dabei ihre eigene Bestimmung.
2.1.1 Der Zusammenhang zwischen HTML, CSS und JavaScript
Mithilfe von HTML legen Sie über HTML-Elemente die Struktur einer Webseite und die Bedeu-
tung (die Semantik) einzelner Komponenten auf einer Webseite fest. Sie beschreiben bei-
spielsweise, welcher Bereich auf der Webseite den Hauptinhalt darstellt, welcher die Naviga-
tion, und definieren Komponenten wie Formulare, Listen, Schaltflächen, Eingabefelder oder,
wie in Abbildung 2.1 zu sehen, Tabellen.
Abbildung 2.1 HTML verwenden Sie, um die Struktur einer Webseite zu definieren.
3838.book Seite 53 Freitag, 8. Juli 2016 3:33 15
2 Erste Schritte
54
Über CSS dagegen gestalten Sie mithilfe von speziellen CSS-Regeln, wie die einzelnen Kom-
ponenten, die Sie zuvor in HTML definiert haben, dargestellt werden sollen, sprich Sie legen
das Design und Layout einer Webseite fest. Sie definieren hierbei beispielsweise Textfarbe,
Textgröße, Umrandungen, Hintergrundfarben, Farbverläufe etc. In Abbildung 2.2 ist zu se-
hen, wie CSS dazu genutzt wurde, die Schriftart und Schriftgröße der Tabellenüberschriften
sowie der Tabellenzellen anzupassen, Rahmen zwischen Tabellenspalten und Tabellenzeilen
hinzuzufügen und die Hintergrundfarbe der Tabellenzeilen im Wechsel mit einer jeweils an-
deren Hintergrundfarbe einzufärben. Das Ganze sieht dann schon um einiges ansprechen-
der aus als die Variante ohne CSS.
Abbildung 2.2 Mit CSS definieren Sie das Layout und das Aussehen einzelner Elemente
der Webseite.
JavaScript zu guter Letzt dient dazu, der Webseite (bzw. den Komponenten auf einer Web-
seite) dynamisches Verhalten hinzuzufügen bzw. die Interaktivität auf der Webseite zu er-
höhen. Beispiele hierfür sind die bereits in Kapitel 1, »Grundlagen und Einführung«, ange-
sprochene Sortierung und Filterung von Tabellendaten (siehe Abbildung 2.3 und Abbildung
2.4). Während CSS also für das Design einer Webseite zuständig ist, kann mithilfe von Java-
Script die Nutzerfreundlichkeit und die Interaktivität einer Webseite erhöht werden.
Abbildung 2.3 JavaScript ermöglicht es Ihnen, eine Webseite nutzerfreundlicher und interaktiver
zu gestalten, z. B. um wie hier die Daten in einer Tabelle sortierbar zu machen ...
3838.book Seite 54 Freitag, 8. Juli 2016 3:33 15
2.1 Einführung JavaScript und Webentwicklung
55
2
Abbildung 2.4 ... oder, wie hier zu sehen, die Daten filterbar zu machen.
Eine Webseite besteht also (in den allermeisten Fällen) aus einer Kombination von HTML-,
CSS- und JavaScript-Code (siehe Abbildung 2.5). Wobei gilt: Auch wenn ich eben gesagt habe,
dass JavaScript für das Verhalten einer Webseite zuständig ist, kann man funktionsfähige
Webseiten auch gänzlich ohne JavaScript erstellen. Ja, prinzipiell kann man Webseiten auch
ohne CSS erstellen. Prinzipiell schon. Dann wird eben nur das HTML vom Browser ausgewer-
tet. Wobei in so einem Fall die Webseite nur weniger schick (ohne CSS) und weniger inter-
aktiv und nutzerfreundlich (ohne JavaScript) ist (siehe wiederum Abbildung 2.1).
Abbildung 2.5 In der Regel wird innerhalb einer Webseite eine Kombination
aus HTML, CSS und JavaScript verwendet.
Merke
HTML dient der Struktur einer Webseite, CSS dem Layout und dem Design, JavaScript dem
Verhalten und der Interaktivität.
Definition
Web- und Software-Entwickler sprechen in diesem Zusammenhang auch gerne von drei
Schichten: HTML bildet die Inhaltsschicht, CSS die Darstellungsschicht und JavaScript die Ver-
haltensschicht.
HTML(Struktur)
CSS(Layout)
JavaScript(Interaktion)
Webseite
3838.book Seite 55 Freitag, 8. Juli 2016 3:33 15
2 Erste Schritte
56
Trennen des Codes für die einzelnen Schichten
Guter Entwicklungsstil sieht vor, die einzelnen Schichten nicht zu vermischen, sprich HTML-,
CSS- und JavaScript-Code unabhängig voneinander und in separaten Dateien vorzuhalten.
Dies erleichtert den Überblick über ein Webprojekt und sorgt letztendlich dafür, dass Sie
effektiver entwickeln können. Darüber hinaus können Sie auf diese Weise ein und dieselben
CSS- und JavaScript-Dateien auch in verschiedenen HTML-Dateien einbinden (siehe Abbil-
dung 2.6) und damit dieselben CSS-Regeln bzw. denselben JavaScript-Quelltext in verschie-
denen HTML-Dateien wiederverwenden.
Abbildung 2.6 Wenn Sie CSS- und JavaScript-Code nicht direkt in den HTML-Code schreiben,
sondern in separate Dateien, erleichtert das die Wiederverwendbarkeit.
Eine gute Vorgehensweise bei der Entwicklung einer Webseite ist es, sich erst über deren
Struktur Gedanken zu machen: Welche Bereiche gibt es auf der Webseite? Welche Über-
schriften gibt es? Gibt es Daten, die in tabellarischer Form dargestellt werden? Aus welchen
Einträgen besteht die Navigation? Welche Informationen sind im Fußbereich der Seite ent-
halten, welche im Kopfbereich? Hierbei verwendet man ausschließlich HTML. Die Webseite
sieht dann zwar noch nicht schön aus und ist nur wenig interaktiv, aber darum soll es in die-
sem ersten Schritt bewusst nicht gehen, um nicht vom Wesentlichen, dem Inhalt der Web-
seite abzulenken.
Aufbauend auf dieser strukturellen Grundlage, setzt man anschließend das Design mit CSS
und das Verhalten der Webseite mit JavaScript um. Dabei können diese beiden Schritte prin-
zipiell parallel auch von verschiedenen Personen vorgenommen werden. Beispielsweise
kann ein Webdesigner sich um das Design mit CSS kümmern, während ein Webentwickler
die Funktionalität in JavaScript programmiert (in der Praxis sind zwar Webdesigner und
Webentwickler häufig ein und dieselbe Person, aber insbesondere in großen Projekten mit
vielen, vielen Webseiten ist eine Verteilung der Zuständigkeiten nicht selten).
HTML
HTML
HTML
JS
CSS
HTML
JS
3838.book Seite 56 Freitag, 8. Juli 2016 3:33 15
2.1 Einführung JavaScript und Webentwicklung
57
2Phasen der Website-Entwicklung
Bei der Entwicklung professioneller Websites gehen der reinen Entwicklung natürlich meh-
rere Phasen voraus. Bevor überhaupt mit der Entwicklung begonnen wird, werden in Kon-
zept- und Designphasen Prototypen (entweder digital oder ganz klassisch mit Stift und
Papier) entworfen. Das eben beschriebene schrittweise Vorgehen (erst HTML, dann CSS,
dann JavaScript) bezieht sich somit nur auf die Entwicklung.
Auszeichnungssprache HTML und Stilsprache CSS
HTML und CSS sind übrigens keine Programmiersprachen! HTML ist eine Auszeichnungsspra-
che und CSS eine Stilsprache, nur JavaScript ist von den drei genannten eine Programmier-
sprache. Daher sind auch Aussagen wie »Das lässt sich doch mit HTML programmieren«
genau genommen nicht korrekt. Vielmehr müsste man sagen: »Das lässt sich doch mit HTML
umsetzen.«
Definition
Der Prozess des Darstellens einer Webseite durch den Browser wird auch Rendern genannt.
Man sagt unter Entwicklern auch: »Der Browser rendert eine Webseite.« Dabei wird HTML-,
CSS- und JavaScript-Code ausgewertet, ein entsprechendes Modell der Webseite erstellt (auf
das wir in Kapitel 5, »Webseiten dynamisch verändern«, noch zu sprechen kommen) und die
Webseite in das Browserfenster »gezeichnet«. Im Detail ist dieser Prozess recht komplex,
und wenn Sie sich mehr für dieses Thema interessieren, kann ich Ihnen den Blogbeitrag
unter www.html5rocks.com/de/tutorials/internals/howbrowserswork/ empfehlen.
2.1.2 Das richtige Werkzeug für die Entwicklung
Für das Erstellen von JavaScript-Dateien würde prinzipiell zwar auch ein einfacher Textedi-
tor ausreichen (und für einfache Codebeispiele ist dies auch durchaus in Ordnung). Was Sie
sich allerdings früher oder später zulegen sollten, ist ein guter Editor, der Sie beim Schreiben
von JavaScript unterstützt (sofern Sie nicht ohnehin schon einen auf Ihrem Rechner instal-
liert haben) und der speziell für die Entwicklung von JavaScript-Programmen ausgelegt ist.
Ein solcher Editor unterstützt Sie beispielsweise dahingehend, dass er den Quelltext farblich
hervorhebt, Ihnen Schreibarbeit bei wiederkehrenden Quelltextbausteinen abnimmt, Fehler
im Quelltext erkennt und vieles mehr.
Editoren
Es gibt mittlerweile eine Reihe wirklich guter Editoren, mit denen sich effektiv arbeiten lässt.
In der Entwickler-Community sind beispielsweise Sublime Text (www.sublimetext.com),
3838.book Seite 57 Freitag, 8. Juli 2016 3:33 15
2 Erste Schritte
58
Coda 2 (https://panic.com/coda/) oder auch die noch jüngeren Editoren Atom (https://
atom.io) oder Microsoft Visual Studio Code (https://code.visualstudio.com) beliebt.
Sublime Text (siehe Abbildung 2.7) kostet 70 US$ und steht für Windows, OS X und Linux zur
Verfügung. Coda 2 (siehe Abbildung 2.8) kostet 99 US$, ist allerdings nur für OS X verfügbar.
Der kostenlose, relativ junge Editor Atom (siehe Abbildung 2.9) dagegen ist wie Sublime Text
für alle drei Betriebssysteme verfügbar, ebenso der Editor Visual Studio Code von Microsoft
(siehe Abbildung 2.10).
Abbildung 2.7 Der Editor Sublime Text
Abbildung 2.8 Der Editor Coda 2
3838.book Seite 58 Freitag, 8. Juli 2016 3:33 15
2.1 Einführung JavaScript und Webentwicklung
59
2
Abbildung 2.9 Der Editor Atom
Abbildung 2.10 Der Editor Microsoft Visual Studio Code
Im Detail haben alle der genannten Editoren ihre eigenen Features und Stärken, sind prinzi-
piell aber doch recht ähnlich. Probieren Sie einfach aus, welcher Ihnen am meisten zusagt
(für Sublime Text und Coda 2 stehen übrigens auf den jeweiligen Homepages kostenlose
Testversionen zum Download bereit).
Entwicklungsumgebungen
Software-Entwickler, die von Sprachen wie Java oder C++ zu JavaScript wechseln, sind von
»ihren Programmiersprachen« in den meisten Fällen sogenannte Entwicklungsumgebungen
gewohnt (im Englischen kurz: IDE für Integrated Development Environment). Eine Entwick-
lungsumgebung können Sie sich gewissermaßen wie einen sehr, sehr mächtigen Editor vor-
stellen, der gegenüber einem »normalen« Editor noch diverse andere Features bereitstellt,
wie beispielsweise die Synchronisation mit einem Sourceverwaltungssystem, das Ausführen
von automatischen Builds oder die Integration von Test-Frameworks. (Wenn Sie jetzt nur ver-
ständnislos den Kopf schütteln und sich fragen, was sich hinter all diesen Begriffen verbirgt,
warten Sie bis Kapitel 20, »Einen professionellen Entwicklungsprozess aufsetzen«, da gehe
ich auf diese fortgeschrittenen Themen der Software-Entwicklung mit JavaScript ein.)
3838.book Seite 59 Freitag, 8. Juli 2016 3:33 15
2 Erste Schritte
60
WebStorm von IntelliJ (www.jetbrains.com/webstorm/, siehe Abbildung 2.11) ist ein Beispiel
für eine sehr beliebte und, wie ich finde, auch wirklich sehr gute Entwicklungsumgebung, die
ich persönlich auch im beruflichen Alltag nutze. Eine Einzellizenz für WebStorm kostet 99 €.
Wer das Programm zunächst testen möchte, kann eine 30-Tage-Testversion von der Home-
page herunterladen. WebStorm steht dabei sowohl für Windows als auch für OS X und Linux
zur Verfügung.
Abbildung 2.11 Die WebStorm-IDE
Als kostenlose Alternative dazu kann ich Ihnen die NetBeans IDE (https://netbeans.org, siehe
Abbildung 2.12) empfehlen, die ursprünglich hauptsächlich für die Java-Entwicklung verwen-
det wird, aber auch mit JavaScript gut umgehen kann. NetBeans steht ebenfalls für alle drei
genannten Betriebssysteme zur Verfügung und kann entsprechend von der Homepage he-
runtergeladen werden.
Abbildung 2.12 Die NetBeans IDE
3838.book Seite 60 Freitag, 8. Juli 2016 3:33 15
2.2 JavaScript in eine Webseite einbinden
61
2
Eine kurze Übersicht über die oben genannten Editoren und Entwicklungsumgebungen fin-
den Sie in Tabelle 2.1.
Tipp
Für den Anfang empfehle ich Ihnen, einen der genannten Editoren zu verwenden und (noch)
keine Entwicklungsumgebung. Letztere haben nämlich den Nachteil, dass sie teils mit
Menüs und Funktionalitäten überfrachtet sind, sodass Sie sich – zusätzlich zum Lernen von
JavaScript – auch noch mit dem Erlernen der Entwicklungsumgebung beschäftigen müssen.
Das möchte ich Ihnen für den Moment zumindest möglichst ersparen.
Zudem machen Entwicklungsumgebungen eigentlich auch erst ab einer gewissen Projekt-
größe Sinn, für kleinere Projekte und die Beispiele in diesem Buch reicht ein Editor allemal
(nicht dass wir nicht auch komplexe Themen behandeln werden!). Hinzu kommt, dass die
Editoren in der Regel im Hinblick auf die Ausführungsgeschwindigkeit schneller als die Ent-
wicklungsumgebungen sind.
2.2 JavaScript in eine Webseite einbinden
Da ich davon ausgehe, dass Sie bereits wissen, wie man eine HTML-Datei erstellt und wie
man eine CSS-Datei einbindet und Sie »nur« hier sind, um JavaScript zu lernen, will ich auch
keine weitere Zeit mit Details über HTML und CSS verwenden und gleich mit JavaScript los-
legen. Keine Sorge: Das Einbinden und Ausführen einer JavaScript-Datei gestaltet sich alles
andere als schwierig.
Traditionsgemäß starte ich (wie nahezu jedes Buch über Programmiersprachen) mit einem
sehr einfachen sogenannten Hello World-Beispiel, welches lediglich die Ausgabe Hello World
Name Preis OS X Linux Windows Editor/Entwicklungsumgebung
Sublime Text 70 US$ ja ja ja Editor
Coda 2 99 US$ ja nein nein Editor
Atom kostenlos ja ja ja Editor
Microsoft Visual
Studio Code
kostenlos ja ja ja Editor
WebStorm 99 € ja ja ja Entwicklungsumgebung
NetBeans kostenlos ja ja ja Entwicklungsumgebung
Tabelle 2.1 Empfehlenswerte Editoren und Entwicklungsumgebungen für die Entwicklung
mit JavaScript
3838.book Seite 61 Freitag, 8. Juli 2016 3:33 15
331
5
Kapitel 5
Webseiten dynamisch verändern
Bisher haben wir den Browser mehr als Mittel zum Zweck eingesetzt, nämlich
für die Ausführung relativ einfacher Beispiele. Seine volle Geltung erreicht die
Sprache innerhalb des Browsers allerdings erst, wenn man mit ihr eine dyna-
mische Webanwendung erstellt. Eine wichtige Grundlage hierbei ist das soge-
nannte Document Object Model, welches den Aufbau einer Webseite in Form
einer Baumstruktur verwaltet und mithilfe von JavaScript dynamisch verän-
dert werden kann.
Auch wenn einige der bisherigen Beispiele bereits dynamisch Inhalte innerhalb einer HTML-
Seite erzeugt haben, müssen wir uns dieses Thema noch etwas genauer anschauen.
5.1 Aufbau einer Webseite
Sie wissen ja schon, dass man bei der objektorientierten Programmierung versucht, Objekte
aus der realen Welt bei der Modellierung von Programmen ebenfalls als Objekte zu beschrei-
ben. Auch eine Webseite (bei der man sich streiten kann, ob sie zur realen Welt gehört) wird
intern im Browser als Objekt repräsentiert.
5.1.1 Document Object Model
Jedes Mal, wenn Sie eine Webseite aufrufen, erstellt der Browser im Arbeitsspeicher ein ent-
sprechendes Modell der Webseite, welches als sogenanntes Document Object Model oder
kurz DOM bezeichnet wird. Das DOM dient in erster Linie dazu, per JavaScript auf Inhalte der
Webseite zugreifen zu können, beispielsweise um bestehende Inhalte zu verändern oder
neue Inhalte hinzuzufügen. Es stellt die Komponenten einer Webseite hierarchisch in einer
Baumdarstellung dar, welche auch als DOM-Baum bezeichnet wird. Ein DOM-Baum wiede-
rum setzt sich aus sogenannten Knoten (engl.: Nodes) zusammen, welche durch ihre hierar-
chische Anordnung den Aufbau einer Webseite widerspiegeln (siehe Abbildung 5.1).
3838.book Seite 331 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
332
Hintergrundinfo
Die Baumdarstellung ist eine in der Informatik und Programmierung häufig verwendete
Datenstruktur, die insbesondere dann zum Einsatz kommt, wenn Teile-Ganzes-Beziehungen
repräsentiert werden sollen. Im Falle vom DOM steht das Ausgangselement (die Wurzel)
ganz oben, und der Baum »wächst« von dort nach unten.
Abbildung 5.1 Aufbau eines DOM-Baumes
5.1.2 Die verschiedenen Knotentypen
Insgesamt gibt es vier wesentliche Typen von Knoten (es gibt noch einige mehr, insgesamt
zwölf, um genau zu sein, wobei acht davon aber für den Anfang weniger relevant sind), die
sich am besten anhand eines Beispiels erläutern lassen. Listing 5.1 zeigt dazu eine Beispiel-
HTML-Datei, in welcher Sie den HTML-Code für eine einfache Tabelle zur Darstellung einer
Kontaktliste sehen. Das entsprechende Document Object Model ist in Abbildung 5.2 darge-
stellt (wobei ich aus Platzgründen und der Übersicht wegen auf eine vollständige Abbildung
verzichtet habe).
<!DOCTYPE html><html><head lang="de"><title>Kontaktlistenbeispiel</title>
</head><body><main id="main">
<h1>Kontaktliste</h1><table id="contact-list-table" summary="Kontaktliste">
body
html
Dokumentknoten
head
link style div table... div
thead tbody
... ...
3838.book Seite 332 Freitag, 8. Juli 2016 3:33 15
5.1 Aufbau einer Webseite
333
5
<thead><tr><th id="table-header-first-name">Vorname</th><th id="table-header-last-name">Nachname</th><th id="table-header-email ">E-Mail-Adresse</th>
</tr></thead><tbody><tr class="row odd"><td>Max</td><td>Mustermann</td><td>[email protected]</td>
</tr><tr class="row even"><td>Moritz</td><td>Mustermann</td><td>[email protected]</td>
</tr><tr class="row odd"><td>Peter</td><td>Mustermann</td><td>[email protected]</td>
</tr><tr class="row even"><td>Paul</td><td>Mustermann</td><td>[email protected]</td>
</tr></tbody>
</table></main>
</body></html>
Listing 5.1 Beispiel HTML-Seite
Folgende vier Knotentypen werden Sie bei der Arbeit mit dem DOM am häufigsten ver-
wenden:
� Der Dokumentknoten (in Abbildung 5.2 fett umrandet) steht für die gesamte Webseite und
bildet die Wurzel des DOM-Baumes. Er wird durch das globale Objekt document repräsen-
tiert, welches Sie ja schon in einigen Listings sehen konnten. Dieses Objekt ist gleichzeitig
das Einstiegsobjekt für jegliche Arbeiten mit dem DOM. Der Dokumentknoten wird auch
als Wurzelknoten bezeichnet.
3838.book Seite 333 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
334
Abbildung 5.2 Aufbau des DOM-Baumes für das Beispiel
� Elementknoten (in Abbildung 5.2 mit weißem Hintergrund) repräsentieren einzelne
HTML-Elemente einer Webseite. Im Beispiel sind dies beispielsweise die Elemente <main>,
<h1>, <table>, <thead> und <tbody>.
� Attributknoten (in Abbildung 5.2 gestrichelt umrandet und mit weißem Hintergrund) ste-
hen für Attribute von HTML-Elementen, im Beispiel die Attributknoten für die Attribute
lang, id und summary.
� Der Text innerhalb von HTML-Elementen wird durch einen eigenen Knotentyp repräsen-
tiert, die sogenannten Textknoten (in Abbildung 5.2 gestrichelt umrandet und grau einge-
färbt). Im Beispiel sind das beispielsweise die Knoten für die Texte Kontaktlistenbeispiel,
Kontaktliste, Vorname, Nachname und E-Mail-Adresse. Textknoten können selbst keine
Kindknoten haben und sind damit zwangsweise Blätter in dem DOM-Baum (im Beispiel
sind aus genannten Platzgründen nicht alle Textknoten abgebildet).
body
html
Dokumentknoten
head
title main
h1 table
thead tbody
tr
th th th
tr
td td td
tr
td td td
tr
td td td
tr
td td td
Kontaktlistenbeispiel
Vorname
Nachname
E-Mail-Adresse
id="contact-list-table"
summary="Kontaktliste"
lang="de"
3838.book Seite 334 Freitag, 8. Juli 2016 3:33 15
5.1 Aufbau einer Webseite
335
5
Hinweis
Das Beispiel aus Listing 5.1 und Abbildung 5.2 bildet die Grundlage für die nächsten Ab-
schnitte. Anhand dieses Beispiels werde ich Ihnen im Folgenden zeigen, wie Sie auf Knoten
einer Webseite zugreifen und diese verändern können.
Das DOM im Browser untersuchen
Das DOM einer Webseite können Sie mit den jeweiligen JavaScript-Debugging-Tools der ver-
schiedenen Browser in einer speziellen Ansicht einsehen. In den Chrome Developer Tools
befindet sich diese Ansicht hinter der Registerkarte Elements (siehe Abbildung 5.3).
Sie können über diese Ansicht in der Regel das DOM sogar händisch ändern. Sie können das
testen, indem Sie innerhalb des DOM-Baumes auf einen der Knoten, beispielsweise auf
einen Textknoten, doppelt klicken. Anschließend können Sie den entsprechenden Text des
Knotens ändern.
In der Praxis kann das recht hilfreich sein, um eben mal schnell eine gewisse Konstellation
von HTML zu testen. Die Änderungen, die Sie in dieser Ansicht vornehmen, haben allerdings
keine Auswirkung auf die unterliegende HTML-Datei. Wenn Sie die Datei im Browser neu
laden, sind die Änderungen verloren.
Abbildung 5.3 Darstellung des DOM in den Chrome Developer Tools
5.1.3 Der Dokumentknoten
Der Dokumentknoten stellt, wie bereits erwähnt, den Einstiegspunkt für das DOM dar und
wird über das globale Objekt document repräsentiert, welches über verschiedene Eigenschaf-
ten und Methoden verfügt. Ausgewählte Eigenschaften sind in Tabelle 5.1 aufgelistet, auf die
verschiedenen Methoden werden wir dagegen im Laufe des Kapitels im Detail eingehen.
3838.book Seite 335 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
336
DOM unter Node.js
Das Document Object Model in Form der globalen document-Variablen steht nur in browser-
basierten Laufzeitumgebungen zur Verfügung. In Node.js beispielsweise (Kapitel 17, »Server-
seitige Anwendungen mit Node.js erstellen«) gibt es eine solche globale Variable nicht, da
Node.js in der Regel nicht dazu verwendet wird, Webseiten zu rendern. Erst über spezielle
Module wie z. B. domino (https://github.com/fgnass/domino), mit denen man Webseiten
parsen kann, lässt sich unter Node.js ein Document Object Model einer Webseite erstellen.
Der Aufbau des Document Object Models, sprich welche Eigenschaften und Methoden zur
Verfügung stehen, welche Knotentypen es gibt etc., ist in der sogenannten DOM API, einer
Spezifikation des W3C (World Wide Web Consortium) festgehalten. Diese API (Application Pro-
gramming Interface) ist programmiersprachenunabhängig gehalten, d. h., es gibt nicht nur
Implementierungen für JavaScript, sondern auch für andere Programmiersprachen wie Java
oder C++.
Interface, Implementierung und API
In der objektorientierten Programmierung dienen Interfaces (auch Schnittstellen genannt)
dazu, die Methoden zu definieren, die in Implementierungen (also konkreten Umsetzungen
des jeweiligen Interfaces) vorhanden sein müssen. Ein Application Programming Interface
(kurz: API) definiert eine Menge von Interfaces, die von einem Software-System zur Verfü-
gung gestellt werden.
Die DOM API ist demnach eine Menge von Interfaces, die Browser für die Arbeit mit Websei-
ten zur Verfügung stellen.
Eigenschaft Beschreibung
document.title Enthält den Titel des aktuellen Dokuments.
document.lastModified Enthält das Datum, an dem das Dokument zuletzt geändert
wurde.
document.URL Enthält einen URL des aktuellen Dokuments.
document.domain Enthält die Domäne des aktuellen Dokuments.
document.cookie Enthält eine Liste aller Cookies für das Dokument.
document.forms Enthält eine Liste aller Formulare des Dokuments.
document.images Enthält eine Liste aller Bilder des Dokuments.
document.links Enthält eine Liste aller Links des Dokuments.
Tabelle 5.1 Ausgewählte Eigenschaften des »document«-Objekts
3838.book Seite 336 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
337
5
Die API vs. das API
Die grammatisch korrekte Bezeichnung lautet das API (weil man ja auch das Application Pro-
gramming Interface sagen würde). Es ist aber auch durchaus üblich, den Artikel nach der
deutschen Übersetzung Programmierschnittstelle zu wählen, wonach es dann die API heißt.
5.2 Elemente selektieren
Egal, ob Sie bestehende Informationen einer Webseite ändern wollen oder neue Informa-
tionen hinzufügen möchten: In beiden Fällen müssen Sie zunächst ein Element auf der Web-
seite selektieren, sprich auswählen, welches Sie ändern bzw. an welches Sie die neuen Infor-
mationen anfügen möchten. Dazu bietet die DOM API verschiedene Eigenschaften und
Methoden an, von denen Tabelle 5.2 Ihnen eine Übersicht zeigt.
Wie Sie sehen, gibt es einige Methoden, die mehrere Elemente zurückgeben, und einige Me-
thoden, die einzelne Elemente zurückgeben. Die Details schauen wir uns in den folgenden
Abschnitten an.
Eigenschaft/Methode
Beschreibung Rückgabewert Abschnitt
getElement-ById()
Wählt ein Element
anhand einer ID aus.
einzelnes
Element
Abschnitt 5.2.1, »Elemente
per ID selektieren«
getElementsBy-ClassName()
Wählt Elemente anhand
eines Klassennamens aus.
Liste von
Elementen
Abschnitt 5.2.2, »Elemente
per Klasse selektieren«
getElementsBy-TagName()
Wählt alle Elemente mit
dem angegebenen Ele-
mentnamen aus.
Liste von
Elementen
Abschnitt 5.2.3, »Elemente
nach Elementnamen
selektieren«
getElementsBy-Name()
Wählt Elemente anhand
ihres Namens aus.
Liste von
Elementen
Abschnitt 5.2.4, »Elemente
nach Namen selektieren«
querySelec-tor()
Gibt das erste Element
zurück, das auf einen
gegebenen CSS-Selektor
passt.
einzelnes
Element
Abschnitt 5.2.5, »Elemente
per Selektor selektieren«
querySelector-All()
Gibt alle Elemente zurück,
die auf einen gegebenen
CSS-Selektor passen.
Liste von
Elementen
Abschnitt 5.2.5, »Elemente
per Selektor selektieren«
Tabelle 5.2 Die verschiedenen Methoden und Eigenschaften für das Auswählen von
Elementen
3838.book Seite 337 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
338
parentElement Gibt für einen Knoten das
Elternelement zurück.
einzelnes
Element
Abschnitt 5.2.6, »Das
Elternelement eines
Elements selektieren«
parentNode Gibt für einen Knoten den
Elternknoten zurück.
einzelner
Knoten
Abschnitt 5.2.6, »Das
Elternelement eines
Elements selektieren«
previous-ElementSibling
Gibt für einen Knoten das
vorhergehende Geschwis-
terelement zurück.
einzelnes
Element
Abschnitt 5.2.8, »Die
Geschwisterelemente
eines Elements
selektieren«
previous-Sibling
Gibt für einen Knoten den
vorhergehenden
Geschwisterknoten
zurück.
einzelner
Knoten
Abschnitt 5.2.8, »Die
Geschwisterelemente
eines Elements
selektieren«
nextElement-Sibling
Gibt für einen Knoten das
nachfolgende Geschwis-
terelement zurück.
einzelnes
Element
Abschnitt 5.2.8, »Die
Geschwisterelemente
eines Elements
selektieren«
nextSibling Gibt für einen Knoten den
nachfolgenden Geschwis-
terknoten zurück.
einzelner
Knoten
Abschnitt 5.2.8, »Die
Geschwisterelemente
eines Elements
selektieren«
firstElement-Child
Gibt für einen Knoten
das erste Kindelement
zurück.
einzelnes
Element
Abschnitt 5.2.7, »Die
Kindelemente eines
Elements selektieren«
firstChild Gibt für einen Knoten
den ersten Kindknoten
zurück.
einzelner
Knoten
Abschnitt 5.2.7, »Die
Kindelemente eines
Elements selektieren«
lastElement-Child
Gibt für einen Knoten
das letzte Kindelement
zurück.
einzelnes
Element
Abschnitt 5.2.7, »Die
Kindelemente eines
Elements selektieren«
Eigenschaft/Methode
Beschreibung Rückgabewert Abschnitt
Tabelle 5.2 Die verschiedenen Methoden und Eigenschaften für das Auswählen von
Elementen (Forts.)
3838.book Seite 338 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
339
5
Selektionsmethoden
Selektionsmethoden und die Eigenschaften stehen nicht nur für den Dokumentknoten zur
Verfügung, sondern auch für andere Knoten (siehe Abschnitt 5.2.9, »Selektionsmethoden auf
Elementen aufrufen«).
5.2.1 Elemente per ID selektieren
Elementen auf einer Webseite kann über das id-Attribut eine (auf der jeweiligen Webseite
eindeutige) ID zugewiesen werden. Diese ID kann zum einen in CSS-Regeln verwendet wer-
den, zum anderen können Sie per JavaScript über die Methode getElementById() des Objekts
document das entsprechende Element auswählen. Sie übergeben der Methode lediglich die ID
des Elements, welches selektiert werden soll, in Form einer Zeichenkette.
In Listing 5.2 wird das Element mit der ID main ausgewählt (siehe auch Abbildung 5.4) und in
der Variablen mainElement gespeichert. Anschließend wird das class-Attribut des Elements
über die Eigenschaft className auf den Wert border geändert, was im Beispiel zur Folge hat,
dass das Element einen roten Rahmen mit abgerundeten Ecken erhält (siehe Abbildung 5.5,
das vollständige Beispiel inklusive HTML- und CSS-Code finden Sie wie immer im Download-
bereich zum Buch).
let mainElement = document.getElementById('main');mainElement.className = 'border';
Listing 5.2 Zugriff auf ein Element über die ID
lastChild Gibt für einen Knoten
den letzten Kindknoten
zurück.
einzelner
Knoten
Abschnitt 5.2.7, »Die
Kindelemente eines
Elements selektieren«
childNodes Gibt für einen Knoten alle
Kindknoten zurück.
Liste von
Knoten
Abschnitt 5.2.7, »Die
Kindelemente eines
Elements selektieren«
children Gibt für einen Knoten alle
Kindelemente zurück.
Liste von
Elementen
Abschnitt 5.2.7, »Die
Kindelemente eines
Elements selektieren«
Eigenschaft/Methode
Beschreibung Rückgabewert Abschnitt
Tabelle 5.2 Die verschiedenen Methoden und Eigenschaften für das Auswählen von
Elementen (Forts.)
3838.book Seite 339 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
340
Abbildung 5.4 Mit »getElementById()« wird maximal ein Element selektiert.
Abbildung 5.5 Dem zurückgegebenen Element wird eine neue CSS-Klasse zugewiesen,
wodurch das Element einen hevorgehobenen Rahmen bekommt.
body
html
Dokumentknoten
head
title main
h1 table
... ...
id="main"
3838.book Seite 340 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
341
5
Tipp
In der Praxis ist es nicht schlecht, etwas defensiver zu programmieren und zu testen, ob eine
Variable, auf welche zugegriffen werden soll, nicht null oder undefined ist. Das gilt auch für
das Arbeiten mit dem Document Object Model. Die Methode getElementById() gibt näm-
lich den Wert null zurück, falls kein Element mit der übergebenen ID gefunden wurde.
Wenn Sie dann versuchen, auf eine Eigenschaft oder Methode auf dem vermeintlichen Ele-
ment zuzugreifen, kommt es zu einem Laufzeitfehler. Um dem vorzubeugen, sollten Sie,
wie in Listing 5.3 gezeigt, vorgehen.
let mainElement = document.getElementById('main'); // Wähle Element mit ID aus.if(mainElement !== null) { // Falls Element nicht
// leer ist,mainElement.className = 'border'; // weise neue CSS-Klasse zu.
}
Listing 5.3 Sicher ist sicher: Für den Fall, dass es kein Element mit der ID »main-content«
gibt (im Beispiel-HTML oben nicht der Fall), wird nicht auf die Variable zugegriffen.
Performance von Selektionsmethoden
Die Auswahl eines Elements per ID ist hinsichtlich der Performance im Vergleich zu anderen
Selektionsmethoden recht schnell, da es auf einer Webseite nicht erlaubt ist, mehrere Ele-
mente mit einer ID zu haben, und somit die Suche sehr schnell das entsprechende Element
für eine ID finden kann. Andere Selektionsmethoden wie beispielsweise die im nächsten Ab-
schnitt vorgestellte Methode getElementsByClassName() sind im Vergleich deutlich langsa-
mer, weil hierbei jedes Element auf der Webseite überprüft werden muss. Auch wenn Sie
den Geschwindigkeitsunterschied in der Regel nicht merken werden, sollten Sie diesen Un-
terschied doch im Hinterkopf haben.
Tipp
Bei der Verwendung von DOM-Methoden sollten Sie nicht zu verschwenderisch umgehen.
Wenn Sie innerhalb eines Programms das Ergebnis einer DOM-Methode an mehreren Stellen
verwenden müssen, speichern Sie das Ergebnis in einer Variablen, anstatt immer wieder die
DOM-Methode aufzurufen. Bedenken Sie: Jeder Aufruf einer DOM-Methode, bei der nach
Elementen im DOM-Baum gesucht wird, kostet Rechenzeit. Über Variablen, in denen Sie
Ergebnisse zwischenspeichern, lässt sich diese Rechenzeit minimieren.
5.2.2 Elemente per Klasse selektieren
Ähnlich wie für IDs können auf einer Webseite einzelnen Elementen CSS-Klassen zugeordnet
werden. Verwaltet werden diese Klassen über das class-Attribut. Ein Element kann dabei
3838.book Seite 341 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
342
mehrere Klassen haben, und im Unterschied zu IDs können auch mehrere Elemente die glei-
che Klasse haben.
Dies wiederum hat zur Folge, dass die entsprechende DOM-Methode getElementsByClass-
Name() – mit der eine Selektion nach CSS-Klassen möglich ist – nicht nur ein einzelnes Ele-
ment zurückgibt, sondern gegebenenfalls auch mehrere Elemente.
Als Argument übergibt man der Methode den Klassennamen als Zeichenkette, wie in Lis-
ting 5.4 zu sehen. In diesem Beispiel werden alle Elemente selektiert, die die CSS-Klasse even
enthalten, sprich die beiden »geraden« Tabellenzeilen (siehe Abbildung 5.6).
let tableRowsEven = document.getElementsByClassName('even'); // Selektiere alle geraden Tabellenzeilen.
Listing 5.4 Zugriff auf ein Element über Klassennamen
Abbildung 5.6 Die Methode »getElementsByClassName()« kann mehrere Elemente zurückgeben.
body
html
Dokumentknoten
head
title main
h1 table
thead tbody
tr
th th th
tr
td td td
tr
td td td
tr
td td td
tr
td td td
class="odd"
class="even"
class="odd"
class="even"
3838.book Seite 342 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
343
5
Der Rückgabewert von getElementsByClassName() ist eine Knotenliste (genauer gesagt, ein
Objekt vom Typ NodeList), welche ähnlich wie ein Array zu verwenden ist (bei der es sich aber
um kein Array handelt, dazu gleich mehr). Diese Knotenliste enthält die Elemente in genau
der Reihenfolge, wie sie auf der Webseite auftreten.
Auch wenn Knotenlisten auf den ersten Blick wie Arrays aussehen, sind es keine Arrays. Eine
Tatsache, die man sich als JavaScript-Einsteiger immer wieder bewusst machen muss und
deren Nichtbeachtung nicht selten zu Fehlern im Programm führt.
Mit Arrays gemeinsam haben Knotenlisten, dass man an die einzelnen Elemente in einer
Knotenliste über einen Index zugreifen kann, d. h., über tableRowsEven[0] greift man bei-
spielsweise auf das erste Element zu, über tableRowsEven[1] auf das zweite Element und so
weiter. Ebenfalls gemeinsam ist die Eigenschaft length, über die sich die Anzahl an Elemen-
ten in der Knotenliste herausfinden lässt.
Um also beispielsweise über alle Elemente einer Knotenliste zu iterieren, geht man wie in
Listing 5.5 vor. Hier wird mithilfe einer for-Schleife über alle Elemente der Liste iteriert. Wie
bei der Iteration über echte Arrays können Sie dabei die Eigenschaft length und den Zugriff
per Index verwenden. Im Beispiel wird auf diese Weise jedem Element in der Liste eine neue
Hintergrundfarbe zugewiesen (siehe Abbildung 5.7).
let tableRowsEven = document.getElementsByClassName('even'); // Selektiere alle geraden
// Tabellenzeilen.if(tableRowsEven.length > 0) { // Wenn mindestens ein Element
// gefunden wurdefor(let i=0; i<tableRowsEven.length; i++) { // Gehe alle Elemente durch.
let tableRow = tableRowsEven[i]; // Weise Element einer Variablen zu.tableRow.style.backgroundColor = '#CCCCCC'; // Setze neue Hintergrundfarbe.
}}
Listing 5.5 Iteration über eine Knotenliste unter Verwendung der Array-Syntax
Abbildung 5.7 Den ungeraden Tabellenzellen wird per JavaScript eine
andere Hintergrundfarbe zugewiesen.
3838.book Seite 343 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
344
Das CSS eines Elements verändern
Über die Eigenschaft style eines Elements können Sie an die CSS-Eigenschaften eines Ele-
ments gelangen bzw. diese auch verändern. Das dieser Eigenschaft hinterlegte Objekt
enthält alle CSS-Eigenschaften als Objekteigenschaften (also beispielsweise style.color,
style.border usw.). Für CSS-Eigenschaften wie beispielsweise background-color, die einen
Bindestrich enthalten, sind die entsprechenden Objekteigenschaften in CamelCase-Schreib-
weise definiert (beispielsweise style.backgroundColor oder style.fontFamily).
Alternativ zu der »Array-Syntax« mit eckigen Klammern lässt sich auch über die Methode
item() auf einzelne Knoten einer Knotenliste zugreifen. Auch hier übergeben Sie als Argu-
ment den Index des Elements, welches zurückgegeben werden soll. Die Schleife von eben
ließe sich also auch wie folgt umformulieren:
let tableRowsEven = document.getElementsByClassName('even'); // Selektiere alle geraden
// Tabellenzeilen.if(tableRowsEven.length > 0) { // Wenn mindestens ein Element
// gefunden wurde.for(let i=0; i<tableRowsEven.length; i++) { // Gehe alle Elemente durch.let tableRow = tableRowsEven.item(i); // Weise Element einer Variablen zu.tableRow.style.backgroundColor = '#CCCCCC'; // Setze neue Hintergrundfarbe.
}}
Listing 5.6 Iteration über eine Knotenliste unter Verwendung der Methode »item()«
Method Borrowing
Da es sich bei Knotenlisten um keine echten Arrays (sondern um Objekte vom Typ NodeList),
wohl aber um array-ähnliche Objekte handelt (wie das arguments-Objekt, Sie erinnern sich?),
verwendet man in der Praxis häufig auch die Technik des Method Borrowings (siehe Kapitel 4,
»Mit Objekten und Referenztypen arbeiten«), um dennoch Methoden von Array verwenden
zu können (siehe Listing 5.7).
Array.prototype.forEach.call(tableRowsEven, (tableRow) => {tableRow.style.backgroundColor = '#CCCCCC';
});
Listing 5.7 Iteration über eine Knotenliste über Method Borrowing
Aktive Knotenlisten vs. statische Knotenlisten
Man unterscheidet bei Knotenlisten zwischen sogenannten aktiven und statischen Knoten-
listen. Erstere bezeichnen Knotenlisten, bei denen Änderungen, die an einzelnen Knoten in
3838.book Seite 344 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
345
5
der Liste vorgenommen werden, direkt Auswirkungen auf die Webseite haben, d. h., dass
die Änderungen direkt in der Webseite widergespiegelt werden. Bei Letzteren dagegen
haben Änderungen an Knoten innerhalb der Knotenliste keine direkten Auswirkungen auf
die Webseite, werden also nicht direkt in der Webseite widergespiegelt. Die Methoden get-ElementsByClassName(), getElementsByTagName() und getElementsByName() geben aktive
Knotenlisten zurück, die Methoden querySelector() und querySelectorAll() dagegen sta-
tische Knotenlisten.
5.2.3 Elemente nach Elementnamen selektieren
Über die Methode getElementsByTagName() lassen sich Elemente anhand ihres Element-
namens selektieren. Die Methode erwartet dabei den Namen des Elements. Um beispielswei-
se alle Tabellenzellen zu selektieren (siehe Abbildung 5.8), gehen Sie wie in Listing 5.8 vor.
Abbildung 5.8 Die Methode »getElementsByTagName()« selektiert Elemente
nach ihrem Elementnamen.
body
Dokumentknoten
head
title main
h1 table
thead tbody
tr
th th th
tr
td td td
tr
td td td
tr
td td td
tr
td td td
html
3838.book Seite 345 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
346
Hier werden zunächst über die Methode getElementsByTagName() alle Tabellenzellen ausge-
wählt und anschließend jedem Element eine neue Schriftart sowie eine neue Schriftgröße
zugewiesen. Das Ergebnis sehen Sie in Abbildung 5.9.
let tableCells = document.getElementsByTagName('td');if(tableCells.length > 0) { // Wenn mindestens ein Element gefunden
// wurde.for(let i=0; i<tableCells.length; i++) { // Gehe alle Elemente durch.let tableCell = tableCells[i]; // Weise Element einer Variablen zu.tableCell.style.fontFamily = 'Verdana'; // Setze neue Schriftart.tableCell.style.fontSize = '9pt'; // Setze neue Schriftgröße.
}}
Listing 5.8 Zugriff auf ein Element über Elementnamen
Abbildung 5.9 Die Tabellenzellen erhalten eine neue Schriftart und Schriftgröße.
Hinweis
Beachten Sie, dass Sie der Methode getElementsByTagName() wirklich nur den Element-
namen übergeben und nicht etwa zusätzliche spitze Klammern. Der Aufruf getElementsBy-TagName('<td>') beispielsweise würde nicht funktionieren.
5.2.4 Elemente nach Namen selektieren
Einigen Elementen kann in HTML ein name-Attribut zugewiesen werden, beispielsweise <in-
put>-Elementen vom Typ radio, um deren Zusammengehörigkeit zu einer Auswahlgruppe
zu kennzeichnen.
In Listing 5.9 beispielsweise werden darüber die drei Radiobuttons der Gruppe genre zuge-
wiesen.
3838.book Seite 346 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
347
5
<form action=""><label for="artist">Künstler</label><input id="artist" type="text" name="artist"><br><label for="album">Album</label><input id="album" type="text" name="album"><br><p>Genre:</p><fieldset><input type="radio" id="st" name="genre" value="Stonerrock"><label for="st">Stonerrock</label><br><input type="radio" id="sp" name="genre" value="Spacerock"><label for="sp">Spacerock</label><br><input type="radio" id="ha" name="genre" value="Hardrock"><label for="ha">Hardrock</label>
</fieldset></form>
Listing 5.9 Ein einfaches HTML-Formular
Mithilfe der Methode getElementsByName() können Elemente ausgehend von diesem name-
Attribut selektiert werden. In Listing 5.10 werden auf diese Weise alle Elemente selektiert,
deren name-Attribut den Wert genre hat (die anderen beiden Formularelemente mit den Wer-
ten artist und album dagegen werden nicht selektiert, siehe Abbildung 5.10). In der an-
schließenden Schleife werden die Werte dieser Elemente (inputElement.value) ausgegeben:
Stonerrock, Spacerock und Hardrock (hach, was für ein tolles Beispiel).
let inputElementsForGenre = document.getElementsByName('genre'); // Selektiere alle Elemente
// mit Namen.if(inputElementsForGenre.length > 0) { // Wenn mindestens ein
// Element gefunden wurde.for(let i=0; i<inputElementsForGenre.length; i++) { // Gehe alle Elemente durch.let inputElement = inputElementsForGenre[i]; // Weise Element einer
// Variablen zu.console.log(inputElement.value); // Ausgabe: Stonerrock,
// Spacerock, Hardrock}
}
Listing 5.10 Zugriff auf Elemente über Elementnamen
3838.book Seite 347 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
348
Abbildung 5.10 Die Methode »getElementsByName()« selektiert Elemente nach ihrem
»name«-Attribut.
Browsersupport von »getElementsByName()«
Die Methode getElementsByName() funktioniert nicht in allen Browsern konsistent. In eini-
gen Versionen des Internet Explorers und des Opera-Browsers beispielsweise liefert die
Methode nicht nur solche Elemente zurück, deren name-Attribut mit dem übergebenen
Wert übereinstimmt, sondern auch solche Elemente, deren id-Attribut mit dem übergebe-
nen Wert übereinstimmt. Meine Meinung ist, dass Sie mit den anderen (bisher vorgestell-
ten und gleich noch vorzustellenden) Selektionsmethoden ausreichende Möglichkeiten zur
Selektion von Elementen haben und somit eigentlich auf diese Methode in der Praxis ver-
zichten können.
5.2.5 Elemente per Selektor selektieren
Mit den bisher vorgestellten DOM-Methoden zur Selektion von Elementen lässt sich schon
einiges erreichen, allerdings ist man in der Ausdrucksform doch etwas begrenzt. Nicht
immer ist es so, dass das Element, welches man selektieren möchte, überhaupt eine ID oder
Klasse hat, sodass die Methoden getElementById() oder getElementsByClassName() in solchen
Fällen nicht weiterhelfen. Die Methode getElementsByTagName() dagegen ist sehr unspezi-
fisch, weil tendenziell eher viele Elemente selektiert werden. Und getElementsByName() ist
aus genannten Gründen ohnehin mit Vorsicht zu genießen.
Deutlich vielseitiger und ausdrucksstärker sind da schon die Methoden querySelector() und
querySelectorAll(), Elemente für einen gegebenen CSS-Selektor zurückzugeben. Erstere Me-
thode liefert dabei als Rückgabewert das erste Element, welches auf den entsprechenden CSS-
Selektor zutrifft. Letztere Methode liefert alle Elemente, die auf den übergebenen CSS-Selek-
tor zutreffen.
body
html
...
form
input
name="genre"
input
name="album"
input
name="artist"
input
name="genre"
input
name="genre"
3838.book Seite 348 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
349
5
Listing 5.11 zeigt ein Beispiel für die Verwendung von querySelector(). Übergeben wird hier
der CSS-Selektor #main table td, welcher in CSS zunächst die zweiten Tabellenzellen jeder
Zeile (td:nth-child(2)) innerhalb einer Tabelle (table) innerhalb eines Elements mit ID main
(#main) beschreibt. Da die Methode querySelector() aber nur das erste auf einen Selektor zu-
treffende Element selektiert, wird nur das erste <td>-Element zurückgegeben.
let tableCell = document.querySelector('#main table td:nth-child(2)');tableCell.style.border = 'thick solid red';
Listing 5.11 Zugriff auf ein Element über CSS-Selektor
Abbildung 5.11 Die Methode »querySelector()« liefert maximal ein Element zurück.
body
html
Dokumentknoten
head
title main
h1 table
thead tbody
tr
th th th
tr
td td td
tr
td td td
tr
td td td
tr
td td td
3838.book Seite 349 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
350
Abbildung 5.12 Die Methode »querySelector()« liefert das erste Element
zurück, welches auf den CSS-Selektor zutrifft.
Listing 5.12 zeigt dagegen die Anwendung der Methode querySelectorAll(). Auch hier wird
der gleiche CSS-Selektor wie eben verwendet. Diesmal erhält man jedoch alle Elemente, die
auf diesen Selektor zutreffen, sprich alle zweiten <td>-Elemente (siehe Abbildung 5.13).
Abbildung 5.13 Die Methode »querySelectorAll()« kann mehrere Elemente zurückgeben.
body
html
Dokumentknoten
head
title main
h1 table
thead tbody
tr
th th th
tr
td td td
tr
td td td
tr
td td td
tr
td td td
3838.book Seite 350 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
351
5
Innerhalb der Schleife werden diese Elemente dann auf die gleiche Weise wie eben mit
einem roten Rahmen versehen (siehe Abbildung 5.14).
let tableCells = document.querySelectorAll('#main table td:nth-child(2)');if(tableCells.length > 0) {for(let i=0; i<tableCells.length; i++) {let tableCell = tableCells[i];tableCell.style.border = 'thick solid red';
}}
Listing 5.12 Zugriff auf mehrere Elemente über CSS-Selektor
Abbildung 5.14 Die Methode »querySelectorAll()« liefert alle Elemente zurück,
die auf den übergebenen CSS-Selektor zutreffen.
Auf die Möglichkeiten, die querySelector() und querySelectorAll() bieten, haben Webent-
wickler lange gewartet. Vor Einführung der sogenannten Selector API (aktuelle Version siehe
www.w3.org/TR/selectors4), welche u. a. diese beiden wichtigen Methoden definiert, musste
man mit den anderen, vorhin vorgestellten DOM-Methoden zur Selektion von Elementen
vorliebnehmen.
Die Bibliothek jQuery hat diese Einschränkung schon frühzeitig erkannt und entsprechende
Helferfunktionen bereits recht früh zur Verfügung gestellt. In Kapitel 10, »Aufgaben verein-
fachen mit jQuery«, werden wir u. a. auch auf diesen Aspekt dieser bekannten JavaScript-
Bibliothek eingehen.
Insgesamt erleichtern die Methoden zur Selektion über CSS-Selektoren die Arbeit eines Java-
Script-Entwicklers erheblich. Eine Übersicht über die verschiedenen CSS-Selektoren zeigt
Tabelle 5.3.
3838.book Seite 351 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
352
Selektor Beschreibung Seit CSS-Version
* Selektiert jedes Element. 2
E Selektiert Elemente vom Typ E. 1
[a] Selektiert Elemente mit Attribut a. 2
[a="b"] Selektiert Elemente mit Attribut a, welches den
Wert b hat.
2
[a~="b"] Selektiert Elemente mit Attribut a, welches als
Wert eine Liste von Werten hat, von denen
eines den Wert b hat.
2
[a^="b"] Selektiert Elemente mit Attribut a, dessen Wert
mit b beginnt.
3
[a$="b"] Selektiert Elemente mit Attribut a, dessen Wert
mit b endet.
3
[a*="b"] Selektiert Elemente mit Attribut a, dessen Wert
b als Substring enthält.
3
[a|="b"] Selektiert Elemente, deren Werte des Attributs
a eine Reihe von mit Minuszeichen getrennten
Werten ist, wobei der erste Wert b ist.
2
:root Selektiert das Wurzelelement eines Dokuments. 3
:nth-child(n) Selektiert das n-te Kindelement eines Elements. 3
:nth-last-child(n) Selektiert das n-te Kindelement eines Elements
von hinten.
3
:nth-of-type(n) Selektiert das n-te Geschwisterelement
bestimmten Typs eines Elements.
3
:nth-last-of-type(n) Selektiert das n-te Geschwisterelement
bestimmten Typs eines Elements von hinten.
3
:first-child Selektiert das erste Kindelement eines
Elements.
2
:last-child Selektiert das letzte Kindelement eines
Elements.
3
Tabelle 5.3 Die verschiedenen Selektoren in CSS3
3838.book Seite 352 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
353
5
:first-of-type Selektiert das erste Geschwisterelement eines
Elements.
3
:last-of-type Selektiert das letzte Geschwisterelement eines
Elements.
3
:only-child Selektiert Elemente, die das einzige Kind-
element ihres Elternelements sind.
3
:only-of-type Selektiert Elemente, die das einzige Element
ihres Typs unter ihren Geschwisterelementen
sind.
3
:empty Selektiert Elemente, die keine Kindelemente
haben.
3
:link Selektiert Links, die noch nicht angeklickt
wurden.
2
:visited Selektiert Links, die bereits angeklickt wurden. 2
:active Selektiert Links, die gerade in dem Moment
angeklickt werden.
2
:hover Selektiert Links, über denen sich gerade die
Maus befindet.
2
:focus Selektiert Links, die gerade den Fokus haben. 2
:target Selektiert Sprungmarken, die über Links inner-
halb einer Webseite erreicht werden können.
3
:lang(de) Selektiert Elemente, deren lang-Attribut den
Wert de hat.
2
:enabled Selektiert Formularelemente, in die Werte ein-
gegeben bzw. die bedient werden können (und
nicht deaktiviert sind).
3
:disabled Selektiert Formularelemente, die nicht bedient
werden können bzw. für die über das disabled-
Attribut die Eingabe gesperrt wurde.
3
:checked Selektiert Checkboxen und Radiobuttons, die
aktiviert sind.
3
Selektor Beschreibung Seit CSS-Version
Tabelle 5.3 Die verschiedenen Selektoren in CSS3 (Forts.)
3838.book Seite 353 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
354
5.2.6 Das Elternelement eines Elements selektieren
Elementknoten verfügen über verschiedene Eigenschaften, mit denen Sie auf verwandte Ele-
mente zugreifen können. Verwandte Elemente sind Elternknoten bzw. -elemente, Kindkno-
ten bzw. -elemente und Geschwisterknoten bzw. -elemente.
Für die Selektion von Elternknoten/-elementen stehen die Eigenschaften parentNode und
parentElement zur Verfügung, für die Selektion von Kindknoten/-elementen die Eigenschaf-
ten firstChild, firstElementChild, lastChild, lastElementChild, childNodes und children
und für die Selektion von Geschwisterelementen die Eigenschaften previousSibling,
previousElementSibling, nextSibling und nextElementSibling.
Lassen Sie mich auf diese Eigenschaften im Folgenden etwas genauer eingehen. Beginnen
wir dabei mit der Selektion von Elternknoten bzw. -elementen.
Um den Elternknoten eines Elements (bzw. Knotens) zu selektieren, steht die Eigenschaft
parentNode zur Verfügung, um dagegen das Elternelement zu selektieren, die Eigenschaft
parentElement. In den meisten Fällen ist der Elternknoten auch immer ein Element, sprich
die beiden Eigenschaften parentNode und parentElement enthalten den gleichen Wert (siehe
Listing 5.13 und Abbildung 5.15).
.className Selektiert Elemente, deren class-Attribut den
Wert className hat.
1
#main Selektiert Elemente, deren id-Attribut den Wert
main hat.
1
:not(s) Selektiert Elemente, die nicht auf den in Klam-
mern angegebenen Selektor s zutreffen.
3
E F Selektiert Elemente vom Typ F, die irgend-
wo innerhalb eines Elements vom Typ E
vorkommen.
1
E > F Selektiert Elemente vom Typ F, die Kind-
elemente eines Elements vom Typ E sind.
2
E + F Selektiert Elemente vom Typ F, die direkte
Geschwisterelemente eines Elements vom Typ
E sind.
2
E ~ F Selektiert Elemente vom Typ F, die Geschwis-
terelemente eines Elements vom Typ E sind.
3
Selektor Beschreibung Seit CSS-Version
Tabelle 5.3 Die verschiedenen Selektoren in CSS3 (Forts.)
3838.book Seite 354 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
355
5
let table = document.querySelector('table');console.log(table.parentNode); // <main>console.log(table.parentElement); // <main>
Listing 5.13 Zugriff auf Elternknoten bzw. Elternelement
Knoten und Elemente
Zur Erinnerung: Nicht alle Knoten im DOM-Baum sind Elemente, aber alle Elemente sind
immer Knoten.
Abbildung 5.15 Selektion des Elternelements
Wichtig zu verstehen ist, dass einige der oben genannten Eigenschaften Knoten zurückgeben,
andere Eigenschaften dagegen Elemente zurückgeben. Die Eigenschaften parentNode, child-
Nodes, firstChild, lastChild, previousSibling und nextSibling geben Knoten zurück, die
Eigenschaften parentElement, children, firstElementChild, lastElementChild, previousEle-
mentSibling und nextElementSibling dagegen geben Elemente zurück.
Was das konkret bedeutet, verdeutlicht folgendes Beispiel. Schauen Sie sich dazu den HTML-
Code in Listing 5.14 und dessen DOM in Abbildung 5.16 an. Gezeigt ist hier eine relativ einfach
aufgebaute Webseite, bei der innerhalb des <body>-Elements lediglich zwei <span>-Elemente
sowie jeweils davor und dahinter Text enthalten sind.
body
html
Dokumentknoten
head
title main
h1 table
... ...
parentNode/ parentElement
3838.book Seite 355 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
356
Das entsprechende DOM enthält unterhalb des <body>-Elements demnach (in dieser Reihen-
folge) einen Textknoten, einen Elementknoten, einen Textknoten, einen Elementknoten
und wieder einen Textknoten. Für alle diese Knoten stellt das <body>-Element zugleich den
Elternknoten als auch das Elternelement dar. Somit liefern für alle diese Knoten die Eigen-
schaften parentNode und parentElement den gleichen Wert: eben das <body>-Element.
Auch können Sie anhand des DOM in Abbildung 5.16 sehen, dass die Eigenschaften parent-
Node und parentElement generell für alle Knoten immer das gleiche Element referenzieren.
Einzige Ausnahme: das <html>-Element. Dieses Element hat nämlich kein Elternelement,
sondern »nur« einen Elternknoten, sprich den Dokumentknoten. Die Eigenschaft parent-
Element liefert in diesem Fall also den Wert null.
Auf die anderen Beziehungen zwischen Elementen und Knoten im DOM werde ich nun in
den folgenden Abschnitten eingehen.
<!DOCTYPE html><html><body>Text<span></span>Text<span></span>Text
</body></html>
Listing 5.14 Ein einfaches HTML-Beispiel
Abbildung 5.16 Übersicht über die verschiedenen Zugriffsformen
span spanTextText Text
Dokumentknoten
null
parentNode/parentElement
firstElementChild
parentNode/parentElement
nextElementSibling
lastElementChild
previousElementSibling
parentNode/parentElement
previousSibling
nextSibling
previousSibling
nextSibling
previousSibling
firstChild
nextSibling
parentNode/parentElement
nextSibling
lastChild
previousSibling
parentNode/parentElement
parentNode/parentElement
parentNode
parentElement html
body
3838.book Seite 356 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
357
5
5.2.7 Die Kindelemente eines Elements selektieren
Die Kindelemente eines Elements lassen sich über die Eigenschaft children ermitteln, die
Kindknoten über die Eigenschaft childNodes. Ob ein Element Kindknoten hat, lässt sich über
die Methode hasChildNodes() bestimmen, welche einen booleschen Wert zurückgibt. Ob ein
Element Kindelemente hat, können Sie über die Eigenschaft childElementCount bestimmen:
Diese enthält die Anzahl an Kindelementen.
Listing 5.15 zeigt hierzu einige Beispiele (bezogen wieder auf das HTML aus Listing 5.1). Sie se-
hen: Das Element <tbody> hat vier Kindelemente (nämlich die vier <tr>-Elemente, siehe Ab-
bildung 5.17) und insgesamt neun Kindknoten (siehe Abbildung 5.18).
Abbildung 5.17 Selektion aller Kindelemente
body
html
Dokumentknoten
...
main
h1 table
tbody
tr
td td td
tr
td td td
tr
td td td
tr
td td td
...
3838.book Seite 357 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
358
Abbildung 5.18 Selektion aller Kindknoten
Der Grund dafür ist, dass – obwohl zwischen und vor und hinter den vier <tr>-Elementen
kein Text im HTML vorkommt – sogenannte Weißraumknoten erzeugt werden (siehe Kas-
ten). Diese Weißraumknoten entstehen immer dann, wenn zwischen zwei Elementen bei-
spielsweise Zeilenumbrüche im HTML verwendet werden.
body
html
Dokumentknoten
...
main
h1 table
tbody
tr
td td td
tr
td td td
tr
td td td
tr
td td td
...
3838.book Seite 358 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
359
5
let tbody = document.querySelector('tbody');console.log(tbody.children.length); // 4console.log(tbody.childElementCount); // 4console.log(tbody.childNodes.length); // 9console.log(tbody.hasChildNodes()); // true
Listing 5.15 Zugriff auf Kindknoten bzw. Kindelemente
Weißraumknoten
Leerraum innerhalb des HTML-Codes, der beispielsweise durch Leerzeichen, Tabulatoren
oder auch durch Zeilenumbrüche erzeugt wird, führt dazu, dass im DOM dafür jedes Mal
Textknoten ohne Text erzeugt werden. In solchen Fällen spricht man von Weißraumknoten.
Darüber hinaus stehen verschiedene weitere Eigenschaften zur Verfügung, mit denen sich
gezielt einzelne Kindelemente bzw. Kindknoten selektieren lassen:
� Die Eigenschaft firstChild enthält den ersten Kindknoten.
� Die Eigenschaft lastChild enthält den letzten Kindknoten.
� Die Eigenschaft firstElementChild enthält das erste Kindelement.
� Die Eigenschaft lastElementChild enthält das letzte Kindelement.
Listing 5.16 zeigt einige Beispiele dazu, Abbildung 5.19 das Ergebnis der Selektion des ersten
und letzten Kindknotens, Abbildung 5.20 das Ergebnis der Selektion des ersten und letzten
Kindelements.
let tbody = document.querySelector('tbody');console.log(tbody.firstChild); // Textknotenconsole.log(tbody.lastChild); // Textknotenconsole.log(tbody.firstElementChild); // <tr>console.log(tbody.lastElementChild); // <tr>
Listing 5.16 Zugriff auf spezielle Kindknoten und Kindelemente
Hinweis
In den meisten Fällen werden Sie wahrscheinlich mit Elementknoten arbeiten. In diesen Fäl-
len verwenden Sie am besten Eigenschaften, die auch Elementknoten zurückgeben (wie bei-
spielsweise firstElementChild und lastElementChild). Es gab dagegen eine Zeit, da standen
Webentwicklern nur Eigenschaften zur Verfügung, die alle Arten von Knoten zurückgeben
(beispielsweise firstChild und lastChild), und man anhand des Knotentyps selbst die Ele-
mentknoten herausfiltern musste. Dies ist zum Glück nicht mehr so.
3838.book Seite 359 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
360
Abbildung 5.19 Selektion des ersten und des letzten Kindelements
body
html
Dokumentknoten
...
main
h1 table
tbody
tr
td td td
td td td
tr
td td td
td td td
...
tr
tr
3838.book Seite 360 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
361
5
Abbildung 5.20 Selektion des ersten und des letzten Kindknotens
5.2.8 Die Geschwisterelemente eines Elements selektieren
Sie wissen jetzt also, wie Sie im DOM-Baum ausgehend von einem Knoten/Element über des-
sen Eigenschaften Knoten/Elemente oberhalb selektieren (Elternknoten/Elternelemente)
und wie Sie Knoten/Elemente unterhalb selektieren können (Kindknoten/Kindelemente).
Zusätzlich gibt es aber auch die Möglichkeit, innerhalb einer Ebene des DOM die Geschwister-
knoten bzw. Geschwisterelemente zu selektieren:
body
html
Dokumentknoten
...
main
h1 table
tbody
tr
td td td
tr
td td td
tr
td td td
tr
td td td
...
3838.book Seite 361 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
362
� Die Eigenschaft previousSibling enthält den vorigen Geschwisterknoten.
� Die Eigenschaft nextSibling enthält den nachfolgenden Geschwisterknoten.
� Die Eigenschaft previousElementSibling enthält das vorige Geschwisterelement.
� Die Eigenschaft nextElementSibling enthält das nachfolgende Geschwisterelement.
Listing 5.17 zeigt dazu ein Codebeispiel. Ausgehend von der zweiten Tabellenzeile werden
zunächst der vorhergehende Geschwisterknoten (über previousSibling) und der nachfol-
gende Geschwisterknoten (über nextSibling) selektiert, wobei es sich in beiden Fällen um
Textknoten (genauer gesagt, Weißraumknoten) handelt (siehe Abbildung 5.21).
Abbildung 5.21 Selektion des vorigen und nachfolgenden Geschwisterknotens
Anschließend wird über previousElementSibling das vorhergehende Geschwisterelement
und über nextElementSibling das nachfolgende Geschwisterelement selektiert (siehe Abbil-
dung 5.22).
...
table
tbody
tr
tr
td td td
tr
td td td
tr
td td td
td td td
nextSibling
previousSibling
...
3838.book Seite 362 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
363
5
let tableCell = document.querySelector('tbody tr:nth-child(2)');console.log(tableCell.previousSibling); // Textknotenconsole.log(tableCell.nextSibling); // Textknotenconsole.log(tableCell.previousElementSibling); // <tr>console.log(tableCell.nextElementSibling); // <tr>
Listing 5.17 Zugriff auf das erste und das letzte Kindelement
Abbildung 5.22 Selektion des vorigen und nachfolgenden Geschwisterelements
5.2.9 Selektionsmethoden auf Elementen aufrufen
Die meisten der vorgestellten DOM-Methoden zur Selektion von Elementen (getElementsBy-
ClassName(), getElementsByTagName(),querySelector() und querySelectorAll()) lassen sich
nicht nur auf dem Dokumentknoten (also auf document), sondern auch auf allen anderen Ele-
...
table
tbody
tr
td td td
tr
td td td
tr
td td td
tr
td td td
previousElementSibling
nextElementSibling
...
3838.book Seite 363 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
364
mentknoten einer Webseite aufrufen (nur getElementById() und getElementsByName() lassen
sich nur auf dem Dokumentknoten aufrufen). In diesem Fall bezieht die Suche nach den Ele-
menten nur den Teilbaum unterhalb des Elements mit ein, auf dem die jeweilige Methode
aufgerufen wurde.
Betrachten Sie dazu folgenden HTML-Code in Listing 5.18, der geschachtelte Listen enthält.
Im JavaScript-Code Listing 5.19 wird die Methode getElementsByTagName() mit Argument li
zunächst auf dem Dokumentknoten document aufgerufen (wodurch alle Listeneinträge der
gesamten Webseite selektiert werden, siehe Abbildung 5.23) und anschließend auf der ge-
schachtelten Liste mit ID list-2 (wodurch wiederum nur die Listeneinträge selektiert wer-
den, die in diesem Teilbaum des DOM, also unterhalb der geschachtelten Liste vorkommen,
siehe Abbildung 5.24).
<!DOCTYPE html><html><head lang="de"><title>Beispiel zur Selektion von Elementen</title>
</head><body><main id="main-content">
<ul id="list-1"><li>Listeneintrag 1</li><li>Listeneintrag 2<ul id="list-2"><li>Listeneintrag 2.1<li><li>Listeneintrag 2.2<li><li>Listeneintrag 2.3<li><li>Listeneintrag 2.4<li>
</ul></li><li>Listeneintrag 3</li><li>Listeneintrag 4</li>
</ul></main>
</body></html>
Listing 5.18 Beispiel HTML-Seite
let allListItemElements = document.getElementsByTagName('li');console.log(allListItemElements.length); // Ausgabe: 8let subList = document.getElementById('list-2');
3838.book Seite 364 Freitag, 8. Juli 2016 3:33 15
5.2 Elemente selektieren
365
5
let subListListItems = subList.getElementsByTagName('li');console.log(subListListItems.length); // Ausgabe: 4
Listing 5.19 Selektion von Elementen ausgehend von einem Elternelement
Abbildung 5.23 Aufruf der Methode »getElementsByTagName()« auf dem Dokumentknoten
Abbildung 5.24 Aufruf der Methode »getElementsByTagName()« auf dem <ul>-Element
mit ID »list-2«
...
main
ul
li li li li
id="list-1"
ul
li li li li
id="list-2"
...
main
ul
li li li li
id="list-1"
ul
li li li li
id="list-2"
3838.book Seite 365 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
366
5.2.10 Elemente nach Typ selektieren
Neben den vorgestellten Selektionsmethoden bietet das document-Objekt verschiedene Ei-
genschaften, um auf bestimmte Elemente einer Webseite direkt zugreifen zu können. Über
die Eigenschaft anchors können beispielsweise alle Anker (sprich Sprungelemente) auf einer
Webseite selektiert werden, über forms alle Formulare, über images alle Bilder und über links
alle Links. Zudem kann über die Eigenschaft head direkt auf das <head>-Element und über die
Eigenschaft body direkt auf das <body>-Element zugegriffen werden.
5.3 Mit Textknoten arbeiten
Wenn Sie ein oder mehrere Elemente selektiert haben, können Sie diese verändern: Sie kön-
nen Text hinzufügen oder entfernen, Attribute hinzufügen oder entfernen oder Elemente
hinzufügen oder entfernen. Folgende Tabelle zeigt einen Überblick über den wichtigsten Teil
der entsprechenden Eigenschaften und Methoden, die dafür zur Verfügung stehen und die
wir in den folgenden Abschnitten im Detail besprechen werden.
Eigenschaft Beschreibung
document.anchors Enthält eine Liste aller Anker der Webseite.
document.forms Enthält eine Liste aller Formulare der Webseite.
document.images Enthält eine Liste aller Bilder der Webseite.
document.links Enthält eine Liste aller Links der Webseite.
document.head Zugriff auf das <head>-Element der Webseite
document.body Zugriff auf das <body>-Element der Webseite
Tabelle 5.4 Verschiedene Eigenschaften zur Selektion von Elementen nach Typ
Eigenschaft/Methode Beschreibung Abschnitt
textContent Über diese Eigenschaft können Sie
auf den Textinhalt eines Knotens
zugreifen.
Abschnitt 5.3.1, »Auf den
Textinhalt eines Elements
zugreifen«
nodeValue Über diese Eigenschaft können Sie
auf den Inhalt eines Knotens zu-
greifen.
Abschnitt 5.3.1, »Auf den
Textinhalt eines Elements
zugreifen«
Tabelle 5.5 Die verschiedenen Methoden und Eigenschaften für das Verändern von
Elementen
3838.book Seite 366 Freitag, 8. Juli 2016 3:33 15
5.3 Mit Textknoten arbeiten
367
5
Jeglicher Text auf einer Webseite wird innerhalb des DOM-Baumes als Textknoten repräsen-
tiert. Das sagte ich ja bereits. Schauen wir uns nun an, wie Sie auf die Textinhalte zugreifen
und diese auch verändern können.
5.3.1 Auf den Textinhalt eines Elements zugreifen
Um auf den reinen Textinhalt eines Elements zugreifen zu können, verwenden Sie am bes-
ten die Eigenschaft textContent. Das Praktische an dieser Eigenschaft ist, dass eventuelle
HTML-Auszeichnungen (Markup) innerhalb des jeweiligen Elements ignoriert werden und
im Wert, den man zurückerhält, nicht enthalten sind. Die folgenden beiden Listings machen
dies deutlich: In Listing 5.20 sehen Sie eine einfache HTML-Liste mit einem Eintrag, wobei
der dort enthaltene Text durch <strong>- und <em>-Elemente ausgezeichnet ist.
<ul id="news"><li><strong>Platten-News: </strong>Neues Album von <em>Ben Harper</em> erschienen.
</li></ul>
Listing 5.20 HTML mit geschachtelten Elementen
innerHTML Über diese Eigenschaft können Sie
auf den HTML-Inhalt eines Knotens
zugreifen.
Abschnitt 5.3.3, »Das
HTML unterhalb eines
Elements verändern«
createTextNode() Mit dieser Methode können Sie Text-
knoten erstellen.
Abschnitt 5.3.4, »Text-
knoten erstellen und
hinzufügen«
createElement() Mit dieser Methode können Sie Ele-
mente erstellen.
Abschnitt 5.4.1, »Elemente
erstellen und hinzufügen«
createAttribute() Mit dieser Methode können Sie Attri-
butknoten erstellen.
Abschnitt 5.5.3, »Attribut-
knoten erstellen und hin-
zufügen«
appendChild() Mit dieser Methode können Sie dem
DOM-Baum Knoten hinzufügen.
Abschnitt 5.4.1, »Elemente
erstellen und hinzufügen«
removeChild() Mit dieser Methode können Sie Kno-
ten aus dem DOM-Baum entfernen.
Abschnitt 5.4.2, »Elemente
und Knoten entfernen«
Eigenschaft/Methode Beschreibung Abschnitt
Tabelle 5.5 Die verschiedenen Methoden und Eigenschaften für das Verändern von
Elementen (Forts.)
3838.book Seite 367 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
368
Greifen Sie jetzt wie in Listing 5.21 auf die Eigenschaft textContent zu, sehen Sie, dass diese
nur den reinen Text des <li>-Elements enthält, nicht aber die Auszeichnungen <strong> und
<em>.
let textContent = document.querySelector('#news li:nth-child(1)').textContent;console.log(textContent);// Ausgabe: Platten-News: Neues Album von Ben Harper erschienen.
Listing 5.21 Die Eigenschaft »textContent« ignoriert Markup innerhalb des entsprechenden
Elements.
Merke
Die Eigenschaft textContent ist sehr praktisch, da man in der Praxis bei Zugriff auf den Text-
inhalt eines Elements häufig eben nicht daran interessiert ist, ob und welche zusätzlichen
Auszeichnungen verwendet wurden.
5.3.2 Den Textinhalt eines Elements verändern
Möchten Sie den Textinhalt eines Elements neu setzen, verwenden Sie ebenfalls die Eigen-
schaft textContent. Als Wert übergeben Sie einfach den neuen Text, wie in Listing 5.22 zu se-
hen. Hier wird dem Listenelement von eben ein neuer Text zugewiesen.
let element = document.querySelector('#news li:nth-child(1)');element.textContent = 'Platten-News: Neues Album von Tool immer ¿
noch nicht erschienen.';
Listing 5.22 Über die Eigenschaft »textContent« lässt sich der Textinhalt eines
Elements neu setzen.
Zu beachten ist dabei aber, dass es über textContent nicht möglich ist, Markup, sprich HTML-
Auszeichnungen, hinzuzufügen: Obwohl die übergebene Zeichenkette in folgendem Listing
Auszeichnungen enthält, werden diese nicht interpretiert, sondern als Text dargestellt (sie-
he Abbildung 5.25).
let element = document.querySelector('#news li:nth-child(1)');element.textContent = '<strong>Platten-News:</strong> Neues Album von ¿
<em>Tool</em> immer noch nicht erschienen.';
Listing 5.23 Das Markup innerhalb der angegebenen Zeichenkette wird nicht ausgewertet.
Abbildung 5.25 Über »textContent« angegebenes Markup wird nicht ausgewertet.
3838.book Seite 368 Freitag, 8. Juli 2016 3:33 15
5.3 Mit Textknoten arbeiten
369
5
»textContent« vs. »innerText«
In einigen Browsern steht Ihnen noch die Eigenschaft innerText zur Verfügung, die so ähn-
lich arbeitet wie textContent, sich im Detail allerdings etwas unterscheidet und zudem nicht
in der DOM API enthalten ist und daher beispielsweise auch nicht von Firefox unterstützt
wird. Ich rate Ihnen daher, auf innerText zu verzichten und stattdessen wie gezeigt textCon-tent zu verwenden.
5.3.3 Das HTML unterhalb eines Elements verändern
Möchten Sie nicht nur Text, sondern HTML in ein Element einfügen, können Sie die Eigen-
schaft innerHTML verwenden. Wir werden zwar später mit der sogenannten DOM-Bearbeitung
noch eine weitere Möglichkeit kennenlernen, die in der Praxis häufiger zum Einsatz kommt,
um HTML in das DOM einzubauen, aber für den Anfang bzw. für einfache HTML-Bausteine,
die hinzugefügt werden sollen, reicht zunächst innerHTML. Listing 5.24 zeigt dazu ein Beispiel:
Hier wird der gleiche HTML-Baustein wie schon in Listing 5.23 hinzugefügt, diesmal aller-
dings auch als HTML interpretiert (siehe Abbildung 5.26).
let element = document.querySelector('#news li:nth-child(1)');element.innerHTML = '<strong>Platten-News:</strong> Neues Album von <em>Tool¿</em> immer noch nicht erschienen.';
Listing 5.24 Bei der Eigenschaft »innerHTML« wird in der übergebenen Zeichenkette enthaltenes
Markup ausgewertet.
Abbildung 5.26 Wie erwartet: Das per »innerHTML« eingefügte HTML wird ausgewertet.
Umgekehrt können Sie über innerHTML auch den HTML-Inhalt eines Elements auslesen. Als
Ergebnis erhalten Sie wie schon bei textContent eine Zeichenkette, in der nun allerdings
nicht nur der Textinhalt, sondern auch die HTML-Auszeichnungen enthalten ist (siehe Lis-
ting 5.25).
let innerHTML = document.querySelector('#news li:nth-child(1)').innerHTML;console.log(innerHTML);// Ausgabe: <strong>Platten-News: </strong>Neues Album von// <em>Ben Harper</em> erschienen.
Listing 5.25 Die Eigenschaft »innerHTML« enthält auch die HTML-Auszeichnungen.
3838.book Seite 369 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
370
5.3.4 Textknoten erstellen und hinzufügen
Alternativ zu den gezeigten Möglichkeiten, über die Eigenschaften textContent und inner-
HTML auf den Text innerhalb einer Webseite zuzugreifen oder diesen zu verändern, gibt es
noch die Möglichkeit, Textknoten zu erstellen und diese manuell dem DOM-Baum hinzuzu-
fügen. Dazu bietet die DOM API die Methode createTextNode() an. In Listing 5.26 wird über
diese Methode ein Textknoten (mit dem Text Beispiel) erstellt und anschließend über die
Methode appendChild() (dazu später noch mehr) einem bestehenden Element als Kindkno-
ten hinzugefügt (dieser zweite Schritt ist notwendig, da über die Methode createTextNode()
der Textknoten noch nicht dem DOM-Baum hinzugefügt wird).
let element = document.getElementById('container');let textNode = document.createTextNode('Beispiel');element.appendChild(textNode);
Listing 5.26 Erstellen und Hinzufügen eines Textknotens
Weitere Methoden für das Erstellen von Knoten
Neben der Methode createTextNode() gibt es weitere Methoden für das Erstellen von Kno-
ten, u. a. die Methoden createElement() für das Erstellen von Elementknoten (siehe Ab-
schnitt 5.4.1) und createAttribute() für das Erstellen von Attributknoten (siehe dazu den
Abschnitt 5.5.3).
Methoden von Dokumentknoten
Die Methode createTextNode() und auch die im Folgenden noch beschriebenen Methoden
createElement() und createAttribute() stehen nur auf dem Dokumentknoten (sprich dem
Objekt document) zur Verfügung. Diese Methoden können nicht auf anderen Knoten (und
damit auch nicht auf Elementen) aufgerufen werden.
5.4 Mit Elementen arbeiten
Auch im Falle von Elementen ist es möglich, diese manuell über Methoden zu erzeugen und
sie dann dem DOM-Baum hinzuzufügen (im Unterschied zur Verwendung der Eigenschaft
innerHTML, wo Sie die HTML-Elemente ja indirekt in Form des Textes übergeben, den Sie der
Eigenschaft zuweisen). Wie Sie Elemente über diese Methoden erstellen und hinzufügen und
generell mit Elementen arbeiten können, zeige ich Ihnen nun im Folgenden.
3838.book Seite 370 Freitag, 8. Juli 2016 3:33 15
5.4 Mit Elementen arbeiten
371
5
5.4.1 Elemente erstellen und hinzufügen
Um Elemente zu erstellen, verwenden Sie die Methode createElement(). Diese erwartet als
Parameter den Namen des zu erstellenden Elements und gibt das neue Element zurück.
Durch den Aufruf der Methode wird das neue Element allerdings (wie schon zuvor Textkno-
ten bei Verwendung der Methode createTextNode()) noch nicht dem DOM hinzugefügt.
Für das Hinzufügen von erzeugten Elementen zum DOM stehen dagegen verschiedene
andere Methoden zur Verfügung:
� Über insertBefore() lässt sich das Element vor ein anderes Element/einen anderen Kno-
ten hinzufügen, sprich als voriges Geschwisterelement definieren.
� Über appendChild() lässt sich das Element als letztes Kindelement eines Elternelements
hinzufügen.
� Über replaceChild() lässt sich ein bestehendes Kindelement (bzw. ein bestehender Kind-
knoten) durch ein neues Kindelement ersetzen. Die Methode wird dabei auf dem Eltern-
element aufgerufen und erwartet als ersten Parameter den neuen Kindknoten sowie als
zweiten Parameter den zu ersetzenden Kindknoten.
Textknoten hinzufügen
Die oben genannten Methoden stehen übrigens auch für das Hinzufügen von Textknoten
(siehe Abschnitt 5.3.4) zur Verfügung.
Ein etwas komplexeres – dafür aber praxisrelevantes – Beispiel zeigt Listing 5.27. Hier wird
auf Basis einer Kontaktliste (die in Form eines Arrays repräsentiert wird) eine HTML-Tabelle
erzeugt. Die einzelnen Einträge in der Kontaktliste enthalten dabei Angaben zu Vorname,
Nachname und E-Mail-Adresse des jeweiligen Kontakts.
Alles rund um das Erstellen der entsprechenden Elemente geschieht innerhalb der Funktion
createTable(). Hier wird zunächst über die Methode querySelector() das <tbody>-Element
der (im HTML bereits existierenden Tabelle, siehe Listing 5.28) ausgewählt und anschließend
über das Array mit den Kontaktinformationen iteriert. Für jeden Eintrag wird dabei mithilfe
der Methode createElement() eine Tabellenzeile erzeugt (<tr>) und für jede der zuvor ge-
nannten Eigenschaften (firstName, lastName und email) eine Tabellenzelle (<td>). Über die
Methode createTextNode() werden für die Werte der Eigenschaften entsprechende Text-
knoten erzeugt und über appendChild() dem jeweiligen <td>-Element hinzugefügt (alterna-
tiv könnten man hier auch die Eigenschaft textContent verwenden).
Die erzeugten Tabellenzellen werden dann – am Ende jeder Iteration – der entsprechenden
Tabellenzeile als Kindelemente hinzugefügt und – in der letzten Zeile der Iteration – die Ta-
bellenzeile als Kindelement des Tabellenkörpers, sprich des <tbody>-Elements. Die einzelnen
Schritte sind durch Kommentare im Listing gekennzeichnet und anhand Abbildung 5.27
nachzuvollziehen.
3838.book Seite 371 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
372
let contacts = [{firstName: 'Max ',lastName: ' Mustermann',email: '[email protected]'
},{firstName: 'Moritz',lastName: ' Mustermann',email: '[email protected]'
},{firstName: 'Peter ',lastName: ' Mustermann',email: '[email protected]'
}];
function createTable() {let tableBody = document.querySelector('#contact-table tbody');for(let i=0; i<contacts.length; i++) {// Für den aktuellen Kontakt ...let contact = contacts[i];// ... wird eine neue Zeile erzeugt.// (1)let tableRow = document.createElement('tr');// Innerhalb der Zeile werden verschiedene Zellen erstellt ...// (2)let tableCellFirstName = document.createElement('td');// ... und jeweils mit Werten befüllt.// (3)let firstName = document.createTextNode(contact.firstName);// (4)tableCellFirstName.appendChild(firstName);// (5)let tableCellLastName = document.createElement('td');// (6)let lastName = document.createTextNode(contact.lastName);// (7)tableCellLastName.appendChild(lastName);// (8)let tableCellEmail = document.createElement('td');// (9)
3838.book Seite 372 Freitag, 8. Juli 2016 3:33 15
5.4 Mit Elementen arbeiten
373
5
let email = document.createTextNode(contact.email);// (10)tableCellEmail.appendChild(email);// (11)tableRow.appendChild(tableCellFirstName);// (12)tableRow.appendChild(tableCellLastName);// (13)tableRow.appendChild(tableCellEmail);// (14)tableBody.appendChild(tableRow);
}}
Listing 5.27 Erzeugen einer Tabelle auf Basis der Kontaktliste
Abbildung 5.27 Reihenfolge der Schritte
<!DOCTYPE html><html><head lang="de"><title>Kontaktlistenbeispiel</title>
</head><body onload="createTable()">
...
main
table
... tbody
tr
...
td
1
2
Max Mustermann3
4
td5
6
7
9
td
8
10
11 12 13
14
3838.book Seite 373 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
374
<main id="main-content"><h1>Kontaktliste</h1><table id="contact-table" summary="Kontaktliste"><thead><tr><th>Vorname</th><th>Nachname</th><th>E-Mail-Adresse</th>
</tr></thead><tbody></tbody>
</table></main><script src="scripts/main.js"></script></body></html>
Listing 5.28 Die HTML-Vorlage
5.4.2 Elemente und Knoten entfernen
Um Elemente (bzw. allgemeiner: Knoten) von einem Elternelement (bzw. allgemeiner:
einem Elternknoten) zu entfernen, steht Ihnen die Methode removeChild() zur Verfügung.
Diese Methode erwartet das zu entfernende Element (bzw. den zu entfernenden Knoten)
und gibt dieses auch als Rückgabewert zurück. In Listing 5.29 sehen Sie (auf Basis der Listings
aus vorigem Abschnitt) eine Methode zur Filterung von Tabellendaten (sortByFirstName()),
bei der sich die Methode removeChild() zunutze gemacht wird, um alle Kindknoten und
Kindelemente aus dem Tabellenkörper (also alle Tabellenzeilen) zu entfernen.
function sortByFirstName() {let tableBody = document.querySelector('#contact-table tbody');while (tableBody.firstChild !== null) {tableBody.removeChild(tableBody.firstChild);
}contacts.sort(function(contact1, contact2) {return contact1.firstName.localeCompare(contact2);
})createTable();
}
Listing 5.29 Beispiel für die Verwendung der Methode »removeChild()«
3838.book Seite 374 Freitag, 8. Juli 2016 3:33 15
5.4 Mit Elementen arbeiten
375
5
5.4.3 Die verschiedenen Typen von HTML-Elementen
Jedes HTML-Element wird innerhalb eines DOM-Baumes durch einen bestimmten Objekt-
typ repräsentiert. Welche dies sind, ist in einer Erweiterung der DOM API, der sogenannten
DOM-HTML-Spezifikation, festgehalten. Beispielsweise werden Verlinkungen (<a>-Elemen-
te) durch den Typ HTMLAnchorElement repräsentiert, Tabellen (<table>-Elemente) durch den
Typ HTMLTableElement usw. Eine Übersicht über die verschiedenen HTML-Elemente und ihre
entsprechenden Objekttypen gibt Tabelle 5.6. Detaillierte Informationen zu Eigenschaften
und Methoden finden Sie dagegen in Anhang D, »HTML5-Web-APIs-Referenz«. Veraltete Ty-
pen sind innerhalb der Tabelle kursiv gesetzt.
Der Obertyp »HTMLElement«
Alle Objekttypen haben dabei den gleichen »Obertyp«, den Typ HTMLElement, Elemente, die
keinen speziellen Typ haben, sind »direkt« vom Typ HTMLElement.
Veraltete Elemente
Die Elemente und Objekttypen, die mittlerweile veraltet sind, sind in der Tabelle der Voll-
ständigkeit halber noch in kursiver Schrift mit aufgeführt.
HTML-Element Typ
<a> HTMLAnchorElement
<abbr> HTMLElement
<acronym> HTMLElement
<address> HTMLElement
<applet> HTMLAppletElement
<area> HTMLAreaElement
<audio> HTMLAudioElement
<b> HTMLElement
<base> HTMLBaseElement
<basefont> HTMLBaseFontElement
<bdo> HTMLElement
<big> HTMLElement
Tabelle 5.6 Die verschiedenen HTML-Elemente und ihre jeweiligen Typen in JavaScript
3838.book Seite 375 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
376
<blockquote> HTMLQuoteElement
<body> HTMLBodyElement
<br> HTMLBRElement
<button> HTMLButtonElement
<caption> HTMLTableCaptionElement
<canvas> HTMLCanvasElement
<center> HTMLElement
<cite> HTMLElement
<code> HTMLElement
<col>, <colgroup> HTMLTableColElement
<data> HTMLDataElement
<datalist> HTMLDataListElement
<dd> HTMLElement
<del> HTMLModElement
<dfn> HTMLElement
<dir> HTMLDirectoryElement
<div> HTMLDivElement
<dl> HTMLDListElement
<dt> HTMLElement
<em> HTMLElement
<embed> HTMLEmbedElement
<fieldset> HTMLFieldSetElement
<font> HTMLFontElement
<form> HTMLFormElement
<frame> HTMLFrameElement
<frameset> HTMLFrameSetElement
HTML-Element Typ
Tabelle 5.6 Die verschiedenen HTML-Elemente und ihre jeweiligen Typen in JavaScript (Forts.)
3838.book Seite 376 Freitag, 8. Juli 2016 3:33 15
5.4 Mit Elementen arbeiten
377
5
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> HTMLHeadingElement
<head> HTMLHeadElement
<hr> HTMLHRElement
<html> HTMLHtmlElement
<i> HTMLElement
<iframe> HTMLIFrameElement
<img> HTMLImageElement
<input> HTMLInputElement
<ins> HTMLModElement
<isindex> HTMLIsIndexElement
<kbd> HTMLElement
<keygen> HTMLKeygenElement
<label> HTMLLabelElement
<legend> HTMLLegendElement
<li> HTMLLIElement
<link> HTMLLinkElement
<map> HTMLMapElement
<media> HTMLMediaElement
<menu> HTMLMenuElement
<meta> HTMLMetaElement
<meter> HTMLMeterElement
<noframes> HTMLElement
<noscript> HTMLElement
<object> HTMLObjectElement
<ol> HTMLOListElement
HTML-Element Typ
Tabelle 5.6 Die verschiedenen HTML-Elemente und ihre jeweiligen Typen in JavaScript (Forts.)
3838.book Seite 377 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
378
<optgroup> HTMLOptGroupElement
<option> HTMLOptionElement
<output> HTMLOutputElement
<p> HTMLParagraphElement
<param> HTMLParamElement
<pre> HTMLPreElement
<progress> HTMLProgressElement
<q> HTMLQuoteElement
<s> HTMLElement
<samp> HTMLElement
<script> HTMLScriptElement
<select> HTMLSelectElement
<small> HTMLElement
<source> HTMLSourceElement
<span> HTMLSpanElement
<strike> HTMLElement
<strong> HTMLElement
<style> HTMLStyleElement
<sub> HTMLElement
<sup> HTMLElement
<table> HTMLTableElement
<tbody> HTMLTableSectionElement
<td> HTMLTableCellElement
<textarea> HTMLTextAreaElement
<tfoot> HTMLTableSectionElement
HTML-Element Typ
Tabelle 5.6 Die verschiedenen HTML-Elemente und ihre jeweiligen Typen in JavaScript (Forts.)
3838.book Seite 378 Freitag, 8. Juli 2016 3:33 15
5.4 Mit Elementen arbeiten
379
5
Listing 5.30 zeigt das Prinzip dieser Objekttypen am Beispiel von Tabellen, die durch den Typ
HTMLTableElement repräsentiert werden. Dieser Typ verfügt – wie alle anderen der in Tabelle
5.6 gezeigten Typen – über individuelle, dem Typ entsprechende Eigenschaften: u. a. die Ei-
genschaft caption, die den Untertitel einer Tabelle enthält (und im Beispiel null ist, weil die
Tabelle in Listing 5.1 kein caption-Attribut hat), die Eigenschaft tHead, die den Kopfbereich,
sprich das <thead>-Element einer Tabelle enthält, die Eigenschaft tBodies, welche die ver-
schiedenen Tabellenkörper, sprich <tbody>-Elemente einer Tabelle enthält, die Eigenschaft
rows, welche die Tabellenzeilen (inklusive derer im Kopfbereich) enthält, sowie die Eigen-
schaft tFoot, welche den Fußbereich, sprich das <tfoot>-Element enthält.
let table = document.querySelector('table');console.log(Object.getPrototypeOf(table)); // HTMLTableElementconsole.log(table.caption); // nullconsole.log(table.tHead); // theadconsole.log(table.tBodies); // [tbody]console.log(table.rows); // [tr, tr, tr, tr, tr]console.log(table.tFoot); // null
Listing 5.30 Jedes HTML-Element wird durch einen eigenen Objekttyp repräsentiert,
wie hier beispielsweise Tabellen durch den Typ »HTMLTableElement«.
<th> HTMLTableHeaderCellElement
<thead> HTMLTableSectionElement
<time> HTMLTimeElement
<title> HTMLTitleElement
<tr> HTMLTableRowElement
<tt> HTMLElement
<u> HTMLElement
<track> HTMLTrackElement
<ul> HTMLUListElement
<var> HTMLElement
HTMLUnknownElement
<video> HTMLVideoElement
HTML-Element Typ
Tabelle 5.6 Die verschiedenen HTML-Elemente und ihre jeweiligen Typen in JavaScript (Forts.)
3838.book Seite 379 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
380
Neben individuellen Eigenschaften haben die verschiedenen Objekttypen je nachdem auch
verschiedene Methoden: Beispielsweise hat der Typ HTMLTableElement, wie in Listing 5.31 zu
sehen, u. a. die Methode insertRow(), über die sich (ohne über document.createElement() ma-
nuell entsprechende HTML-Elemente zu erzeugen) direkt eine neue Tabellenzeile erstellen
lässt. Diese gibt wiederum ein Objekt vom Typ HTMLTableRowElement zurück, welcher wiede-
rum u. a. über die Methode insertCell() verfügt, über die sich – Sie werden es ahnen – der
entsprechenden Zeile direkt eine neue Tabellenzelle hinzufügen lässt. Im Beispiel wird auf
diese Weise eine neue Tabellenzeile mit drei Zellen erstellt. Deutlich übersichtlicher als in
Listing 5.27, finden Sie nicht?
let newRow = table.insertRow(1);let newCellFirstName = newRow.insertCell(0);newCellFirstName.textContent = 'Bob';let newCellLastName = newRow.insertCell(1);newCellLastName.textContent = 'Mustermann';let newCellEmail = newRow.insertCell(2);newCellEmail.textContent = '[email protected]';
Listing 5.31 Die verschiedenen Objekttypen haben u. a. auch individuelle Methoden.
Eigenschaftsnamen vs. Elementnamen
Beachten Sie, dass die Objekteigenschaften wie tHead, tBodies und tFoot in CamelCase-
Schreibweise geschrieben sind, die entsprechenden HTML-Elemente dagegen in Kleinbuch-
staben (<thead>, <tbody>, <tfoot>).
5.5 Mit Attributen arbeiten
Um mit Attributen zu arbeiten, stehen Ihnen in der DOM API verschiedene Methoden zur
Verfügung.
� Über die Methode getAttribute() können Sie auf Attribute eines Elements zugreifen
(siehe Abschnitt 5.5.1, »Den Wert eines Attributs auslesen«).
� Über die Methode setAttribute() können Sie einem Element Attribute hinzufügen (siehe
Abschnitt 5.5.2, »Den Wert eines Attributs ändern«).
� Über die Methode createAttribute() können Sie Attributknoten erstellen und diese über
setAttributeNode() hinzufügen (siehe Abschnitt 5.5.3, »Attributknoten erstellen und hin-
zufügen«).
� Über die Methode removeAttribute() können Sie Attribute entfernen (siehe Abschnitt 5.5.4,
»Attribute entfernen«).
3838.book Seite 380 Freitag, 8. Juli 2016 3:33 15
5.5 Mit Attributen arbeiten
381
5
5.5.1 Den Wert eines Attributs auslesen
Um auf den Wert eines Attributs zuzugreifen, verwenden Sie auf dem jeweiligen Element die
Methode getAttribute(). Als Parameter erwartet die Methode den Namen des jeweiligen
HTML-Attributs. Als Rückgabewert erhält man den Wert des entsprechenden Attributs. Neh-
men Sie als Ausgangspunkt den HTML-Code aus Listing 5.32: Dort ist ein Link gezeigt (ein
<a>-Element) mit den Attributen id, class und href.
<a id="home" class="link" href="index.html">Home</a>
Listing 5.32 Ein HTML-Link
Um auf diese Attribute zuzugreifen, verwenden Sie die Methode getAttribute(), wie in Lis-
ting 5.33 gezeigt.
let element = document.getElementById('home');console.log(element.getAttribute('id')); // homeconsole.log(element.getAttribute('class')); // linkconsole.log(element.getAttribute('href')); // index.html
Listing 5.33 Über die Methode »getAttribute()« können Sie auf Attribute
eines HTML-Elements zugreifen.
Die Attribute eines Elements stehen in der Regel auch als gleichnamige Eigenschaften zur
Verfügung. Wobei das Attribut class eine Ausnahme darstellt: Auf dieses Attribut kann über
die Eigenschaft className zugegriffen werden. Listing 5.34 zeigt dazu ein entsprechendes Bei-
spiel: Die Attribute id und href können über die gleichnamigen Eigenschaften ausgelesen
werden, das Attribut class über die Eigenschaft className.
console.log(element.id); // homeconsole.log(element.className); // linkconsole.log(element.href); // index.html
Listing 5.34 Die Attribute eines Elements stehen auch als Eigenschaften zur Verfügung.
Beachten Sie aber: Bei zwei Attributen liefert der Zugriff über die Methode getAttribute()
einen anderen Rückgabewert als der direkte Zugriff über die Eigenschaft. Für das Attribut
style liefert die Methode getAttribute() ein Objekt vom Typ CSSStyleDeclaration, über das
sich detailliert auf die entsprechenden CSS-Informationen zugreifen lässt. Der Zugriff über
die Eigenschaft style dagegen liefert lediglich den Text, den das Attribut als Wert enthält. Da-
rüber hinaus liefern alle Attribute, über die sich Event-Handler definieren lassen (siehe auch
Kapitel 6, »Ereignisse verarbeiten und auslösen«), über die entsprechende Eigenschaft (bei-
spielsweise onclick) den auszuführenden JavaScript-Code als Zeichenkette zurück. Greift
man auf das jeweilige Attribut dagegen über die Methode getAttribute() zu, erhält man als
Rückgabewert die Funktion, die ausgeführt werden soll, als Funktionsobjekt zurück.
3838.book Seite 381 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
382
Schauen Sie sich dazu Listing 5.35 und Listing 5.40 an. Ersteres zeigt einen HTML-Button mit
verschiedenen Attributen, u. a. einem style-Attribut und einem onclick-Attribut. In Letzte-
rem sehen Sie dann den Zugriff auf beides jeweils über die gleichnamige Eigenschaft und
über die Methode getAttribute().
<button id="create" class="link" style="background-color: green" onclick="createContact()">Kontakt anlegen</button>
Listing 5.35 Ein HTML-Button
let button = document.getElementById('create');console.log(button.onclick); // Ausgabe der Funktionconsole.log(typeof button.onclick); // Ausgabe: functionconsole.log(button.getAttribute('onclick')); // createContact()console.log(typeof button.getAttribute('onclick')); // Ausgabe: stringconsole.log(button.style); // Ausgabe der
// CSSStyleDeclarationconsole.log(typeof button.style); // Ausgabe: objectconsole.log(button.getAttribute('style')); // background-color: greenconsole.log(typeof button.getAttribute('style')); // Ausgabe: string
Listing 5.36 Der Zugriff auf Event-Handler und das »style«-Attribut liefert je nach Zugriffsart
unterschiedliche Rückgabewerte.
Der Grund, warum der direkte Zugriff auf Event-Handler-Attribute wie onclick keine Zei-
chenkette, sondern eine Funktion zurückgibt, ist, dass man über diese Eigenschaft Event-
Handler für das jeweilige Element definieren kann. Sprich, man kann dieser Eigenschaft
Funktionsobjekte zuweisen.
Der Grund, warum der direkte Zugriff auf das style-Attribut keine Zeichenkette zurückgibt,
ist der, dass über dieses Attribut programmatisch auf die CSS-Informationen des jeweiligen
Elements zugegriffen werden kann, auch schreibend (wie Sie in diesem Kapitel schon sehen
konnten).
5.5.2 Den Wert eines Attributs ändern
Um den Wert eines Attributs zu ändern oder ein neues Attribut hinzuzufügen, verwenden
Sie die Methode setAttribute() auf dem Element, für das das Attribut geändert werden soll.
Diese erwartet zwei Parameter: den Namen des Attributs und den neuen Wert. Falls das ent-
sprechende Element bereits über ein gleichnamiges Attribut verfügt, wird der Wert dieses
Attributs mit dem neuen Wert überschrieben. Gibt es das Attribut noch nicht, wird dem Ele-
ment ein entsprechendes Attribut neu hinzugefügt. Listing 5.37 zeigt dazu ein Beispiel: Hier
werden die Eigenschaften class, href und target für das zuvor selektierte Linkelement
geändert.
3838.book Seite 382 Freitag, 8. Juli 2016 3:33 15
5.5 Mit Attributen arbeiten
383
5
let element = document.getElementById('home');element.setAttribute('class', 'link active');element.setAttribute('href', 'newlink.html');element.setAttribute('target', '_blank');console.log(element.getAttribute('class')); // link activeconsole.log(element.getAttribute('href')); // newlink.htmlconsole.log(element.getAttribute('target')); // _blank
Listing 5.37 Über die Methode »setAttribute()« können Sie bestehende Attribute
eines HTML-Elements ändern bzw. neue Attribute hinzufügen.
Alternativ dazu können Sie über die (in der Regel) gleichnamigen Objekteigenschaften eben-
falls die Werte von Attributen ändern bzw. neue Attribute hinzufügen (siehe Listing 5.38).
element.className = 'link active highlighted';element.href = 'anotherLink.html';element.target = '_self';console.log(element.getAttribute('class')); // link active highlightedconsole.log(element.getAttribute('href')); // anotherLink.htmlconsole.log(element.getAttribute('target')); // _self
Listing 5.38 Attribute können ebenfalls direkt über entsprechende Eigenschaften geändert werden.
Hinweis
Im Hintergrund wird bei Verwendung der Methode setAttribute() ein Attributknoten
erzeugt und dem DOM-Baum an dem entsprechenden Elementknoten als Kindknoten hinzu-
gefügt.
5.5.3 Attributknoten erstellen und hinzufügen
Wie auch schon bei normalen Texten und bei der Arbeit mit Elementen haben Sie auch im
Falle von Attributen die Möglichkeit, diese als Attributknoten über eine spezielle Methode
zu erstellen, nämlich über die Methode createAttribute(). Als Argument erwartet diese
Methode – wenig verwunderlich – den Namen des zu erstellenden Attributs, als Rückgabe-
wert liefert sie den neuen Attributknoten. Auch dieser ist – wie zuvor Textknoten und Ele-
mentknoten – zunächst noch nicht direkt im DOM-Baum eingebaut. Dies müssen Sie ma-
nuell über die Methode setAttributeNode() am entsprechenden Element nachholen (siehe
Listing 5.39).
let element = document.getElementById('home');var attribute = document.createAttribute('target');attribute.value = '_blank';
3838.book Seite 383 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
384
element.setAttributeNode(attribute);console.log(element.getAttribute('target')); // _blank
Listing 5.39 Erstellen und Hinzufügen eines Attributknotens
5.5.4 Attribute entfernen
Über die Methode removeAttribute() können Sie Attribute wieder von einem Element ent-
fernen. In Listing 5.40 werden auf diese Weise die beiden Attribute class und href aus dem
Linkelement entfernt. Anschließend liefern die beiden Attribute den Wert null.
let element = document.getElementById('home');element.removeAttribute('class');element.removeAttribute('href');console.log(element.getAttribute('class')); // nullconsole.log(element.getAttribute('href')); // null
Listing 5.40 Über die Methode »removeAttribute()« können Sie Attribute
eines HTML-Elements entfernen.
5.5.5 Auf CSS-Klassen zugreifen
Auch wenn Sie es im Laufe des Kapitels schon an einigen Beispielen (zumindest teilweise) ge-
sehen haben, gehe ich an dieser Stelle noch einmal kurz darauf ein, wie Sie die CSS-Klassen
eines Elements auslesen können.
Zunächst einmal gibt es die Ihnen schon bekannte Eigenschaft className, über die jedes Ele-
ment auf einer Webseite (sprich jeder Elementknoten) verfügt. Diese Eigenschaft enthält
einfach den Wert des class-Attributs des entsprechenden Elements als Zeichenkette. Hat das
Element mehrere CSS-Klassen, sind diese Klassennamen innerhalb der Zeichenkette durch
Leerzeichen getrennt.
In der Vergangenheit hat dies teils zu etwas umständlichem Code geführt, wenn man bei-
spielsweise einem Element neue CSS-Klassen hinzufügen oder – schlimmer noch – beste-
hende CSS-Klassen entfernen wollte. Warum umständlich? Weil man in jedem Fall den Wert
des Attributs parsen musste.
Diesem Umstand wurde mit der Version 4 der DOM API Rechnung getragen. Seitdem verfü-
gen Elemente (in der DOM API, nicht in HTML) nämlich zusätzlich über die Eigenschaft
classList, welche die CSS-Klassen als Liste enthält. Das Hinzufügen und Entfernen einzelner
CSS-Klassen zu bzw. von einem Element gestaltet sich seitdem um einiges einfacher:
� Über die Methode add() können der Liste neue CSS-Klassen hinzugefügt werden.
� Über die Methode remove() können CSS-Klassen aus der Liste entfernt werden.
3838.book Seite 384 Freitag, 8. Juli 2016 3:33 15
5.6 Zusammenfassung
385
5
� Über die Methode toggle() lassen sich CSS-Klassen »umschalten«, d. h., gibt es die CSS-
Klasse in der Liste, wird sie gelöscht, gibt es sie dagegen nicht, wird sie hinzugefügt. Dies
lässt sich sogar an boolesche Bedingungen knüpfen.
� Über die Methode contains() lässt sich zudem überprüfen, ob eine CSS-Klasse in der Liste
enthalten ist.
Listing 5.41 zeigt zu diesen Methoden einige Beispiele.
let element = document.getElementById('home');console.log(element.classList); // ["link"]element.classList.add('active'); // Klasse hinzufügenconsole.log(element.classList); // ["link", "active"]element.classList.remove('active'); // Klasse entfernenconsole.log(element.classList); // ["link"]element.classList.toggle('active'); // Klasse umschaltenconsole.log(element.classList); // ["link", "active"]element.classList.toggle('active'); // Klasse umschaltenconsole.log(element.classList); // ["link"]console.log(element.classList.contains('link')); // trueconsole.log(element.classList.contains('active')); // falselet i = 5;let condition = i > 0;element.classList.toggle('active', condition); // Klasse umschaltenconsole.log(element.classList); // ["link", "active"]
Listing 5.41 Mithilfe der Eigenschaft »classList« von Elementen lässt sich sehr einfach
mit CSS-Klassen arbeiten.
5.6 Zusammenfassung
In diesem Kapitel haben Sie gelernt, wie Sie auf Inhalte von Webseiten per JavaScript zugrei-
fen und diese dynamisch verändern können. Fassen wir die wichtigsten Punkte zusammen:
� Das Document Object Model (kurz DOM) stellt das Modell für eine Webseite dar, eine hie-
rarchisch aufgebaute Baumstruktur.
� Die einzelnen Komponenten in dieser Baumstruktur werden Knoten genannt, wobei es
verschiedene Arten von Knoten gibt. Die wichtigsten sind Dokumentknoten, Elementkno-
ten, Textknoten und Attributknoten. Die Elementknoten werden zudem über verschiede-
ne Typen repräsentiert, ausgehend von dem Typ HTMLElement.
� Die DOM API definiert Eigenschaften und Methoden, über die Sie an die Daten auf einer
Webseite gelangen oder diese verändern können.
3838.book Seite 385 Freitag, 8. Juli 2016 3:33 15
5 Webseiten dynamisch verändern
386
� Sie können mithilfe der DOM API beispielsweise Elemente hinzufügen, Elemente löschen,
Texte verändern, Attribute hinzufügen und löschen.
� Elemente auf einer Webseite können auf verschiedene Weisen selektiert werden: nach ID,
nach CSS-Klasse, nach Elementnamen, nach name-Attribut sowie nach CSS-Selektor.
� Ausgehend von einem Element bzw. Knoten können über verschiedene Eigenschaften
das Elternelement/der Elternknoten, die Kindelemente/Kindknoten sowie Geschwister-
elemente selektiert werden.
� Über die Eigenschaft textContent kann auf den Textinhalt eines Knotens zugegriffen bzw.
der Textinhalt gesetzt werden, über die Eigenschaft innerHTML dagegen auf den HTML-
Inhalt eines Elements.
� Über createTextNode() können Sie Textknoten erstellen, über createElement() Element-
knoten und über createAttribute() Attributknoten.
� Nachdem Sie einen Knoten erstellt haben, müssen Sie ihn erst dem DOM-Baum hinzufü-
gen, wobei verschiedene Methoden zur Verfügung stehen: insertBefore(), appendChild()
und replaceChild().
3838.book Seite 386 Freitag, 8. Juli 2016 3:33 15
Auf einen Blick
Auf einen Blick
1 Grundlagen und Einführung ........................................................................................... 27
2 Erste Schritte ......................................................................................................................... 53
3 Sprachkern ............................................................................................................................. 85
4 Mit Objekten und Referenztypen arbeiten ................................................................ 225
5 Webseiten dynamisch verändern .................................................................................. 331
6 Ereignisse verarbeiten und auslösen ............................................................................ 387
7 Mit Formularen arbeiten .................................................................................................. 439
8 Browser steuern und Browserinformationen auslesen ......................................... 467
9 Inhalte einer Webseite dynamisch nachladen .......................................................... 495
10 Aufgaben vereinfachen mit jQuery .............................................................................. 539
11 Bilder und Grafiken dynamisch erstellen ................................................................... 587
12 Moderne Web-APIs verwenden ..................................................................................... 619
13 Objektorientierte Programmierung ............................................................................. 689
14 Funktionale Programmierung ........................................................................................ 723
15 Den Quelltext richtig strukturieren .............................................................................. 737
16 Die neuen ES6-Features richtig nutzen ....................................................................... 757
17 Serverseitige Anwendungen mit Node.js erstellen ................................................. 817
18 Mobile Anwendungen mit JavaScript erstellen ....................................................... 857
19 Mikrocontroller mit JavaScript steuern ....................................................................... 915
20 Einen professionellen Entwicklungsprozess aufsetzen ......................................... 937
A JavaScript-Referenz ............................................................................................................ 977
B DOM-Referenz und HTML-Erweiterungen ................................................................. 1035
C BOM und Ajax ...................................................................................................................... 1129
D HTML5-Web-APIs-Referenz ............................................................................................. 1161
3838.book Seite 3 Freitag, 8. Juli 2016 3:33 15
Inhalt
5
Inhalt
Vorwort .................................................................................................................................................................. 23
1 Grundlagen und Einführung 27
1.1 Grundlagen der Programmierung ............................................................................................... 27
1.1.1 Mit dem Computer kommunizieren ............................................................................. 28
1.1.2 Programmiersprachen ....................................................................................................... 29
1.1.3 Hilfsmittel für den Programmentwurf ......................................................................... 37
1.2 Einführung JavaScript ....................................................................................................................... 42
1.2.1 Historie .................................................................................................................................... 43
1.2.2 Anwendungsgebiete .......................................................................................................... 43
1.3 Zusammenfassung ............................................................................................................................. 51
2 Erste Schritte 53
2.1 Einführung JavaScript und Webentwicklung ......................................................................... 53
2.1.1 Der Zusammenhang zwischen HTML, CSS und JavaScript .................................... 53
2.1.2 Das richtige Werkzeug für die Entwicklung ............................................................... 57
2.2 JavaScript in eine Webseite einbinden ..................................................................................... 61
2.2.1 Eine geeignete Ordnerstruktur vorbereiten ............................................................... 62
2.2.2 Eine JavaScript-Datei erstellen ........................................................................................ 63
2.2.3 Eine JavaScript-Datei in eine HTML-Datei einbinden .............................................. 63
2.2.4 JavaScript direkt innerhalb des HTML definieren ..................................................... 66
2.2.5 Platzierung und Ausführung der <script>-Elemente .............................................. 68
2.2.6 Den Quelltext anzeigen ..................................................................................................... 72
2.3 Eine Ausgabe erzeugen .................................................................................................................... 74
2.3.1 Standarddialogfenster anzeigen .................................................................................... 74
2.3.2 Auf die Konsole schreiben ................................................................................................ 75
2.3.3 Bestehende UI-Komponenten verwenden .................................................................. 81
2.4 Zusammenfassung ............................................................................................................................. 82
3838.book Seite 5 Freitag, 8. Juli 2016 3:33 15
Inhalt
6
3 Sprachkern 85
3.1 Werte in Variablen speichern ........................................................................................................ 85
3.1.1 Variablen definieren ........................................................................................................... 85
3.1.2 Gültige Variablennamen verwenden ............................................................................ 88
3.1.3 Konstanten definieren ....................................................................................................... 95
3.2 Die verschiedenen Datentypen verwenden ............................................................................ 96
3.2.1 Zahlen ...................................................................................................................................... 96
3.2.2 Zeichenketten ....................................................................................................................... 99
3.2.3 Boolesche Wahrheitswerte ............................................................................................... 102
3.2.4 Arrays ....................................................................................................................................... 102
3.2.5 Objekte .................................................................................................................................... 107
3.2.6 Besondere Datentypen ....................................................................................................... 109
3.3 Die verschiedenen Operatoren einsetzen ................................................................................ 110
3.3.1 Operatoren für das Arbeiten mit Zahlen ...................................................................... 112
3.3.2 Operatoren für das einfachere Zuweisen .................................................................... 113
3.3.3 Operatoren für das Arbeiten mit Zeichenketten ....................................................... 114
3.3.4 Operatoren für das Arbeiten mit booleschen Werten ............................................. 115
3.3.5 Operatoren für das Arbeiten mit Bits ............................................................................ 121
3.3.6 Operatoren für das Vergleichen von Werten ............................................................. 122
3.3.7 Operatoren für spezielle Operationen .......................................................................... 124
3.4 Den Ablauf eines Programms steuern ....................................................................................... 125
3.4.1 Bedingte Anweisungen definieren ................................................................................. 126
3.4.2 Verzweigungen definieren ............................................................................................... 128
3.4.3 Den Auswahloperator verwenden ................................................................................. 134
3.4.4 Mehrfachverzweigungen definieren ............................................................................. 135
3.4.5 Zählschleifen definieren .................................................................................................... 142
3.4.6 Kopfgesteuerte Schleifen definieren ............................................................................. 150
3.4.7 Fußgesteuerte Schleifen definieren .............................................................................. 153
3.4.8 Schleifen und Schleifeniterationen vorzeitig abbrechen ....................................... 154
3.5 Wiederverwendbare Codebausteine erstellen ...................................................................... 163
3.5.1 Funktionen definieren ........................................................................................................ 163
3.5.2 Funktionen aufrufen ........................................................................................................... 166
3.5.3 Funktionsparameter übergeben und auswerten ...................................................... 166
3.5.4 Rückgabewerte definieren ................................................................................................ 175
3.5.5 Standardwerte für Parameter definieren .................................................................... 177
3.5.6 Elemente aus einem Array als Parameter verwenden ............................................ 179
3.5.7 Funktionen über Kurzschreibweise definieren .......................................................... 181
3.5.8 Funktionen im Detail .......................................................................................................... 183
3.5.9 Funktionen aufrufen durch Nutzerinteraktion .......................................................... 191
3838.book Seite 6 Freitag, 8. Juli 2016 3:33 15
Inhalt
7
3.6 Auf Fehler reagieren und sie richtig behandeln .................................................................... 193
3.6.1 Syntaxfehler .......................................................................................................................... 193
3.6.2 Laufzeitfehler ........................................................................................................................ 194
3.6.3 Logische Fehler ..................................................................................................................... 195
3.6.4 Das Prinzip der Fehlerbehandlung ................................................................................. 196
3.6.5 Fehler fangen und behandeln ......................................................................................... 197
3.6.6 Fehler auslösen ..................................................................................................................... 200
3.6.7 Fehler und der Funktionsaufruf-Stack .......................................................................... 203
3.6.8 Bestimmte Anweisungen unabhängig von aufgetretenen Fehlern
aufrufen .................................................................................................................................. 205
3.7 Den Quelltext kommentieren ....................................................................................................... 211
3.8 Den Code debuggen .......................................................................................................................... 212
3.8.1 Einführung ............................................................................................................................. 212
3.8.2 Ein einfaches Codebeispiel ............................................................................................... 213
3.8.3 Haltepunkte definieren ..................................................................................................... 214
3.8.4 Variablenbelegungen einsehen ...................................................................................... 216
3.8.5 Ein Programm schrittweise ausführen ......................................................................... 217
3.8.6 Mehrere Haltepunkte definieren ................................................................................... 219
3.8.7 Bedingte Haltepunkte definieren .................................................................................. 219
3.8.8 Den Funktionsaufruf-Stack einsehen ........................................................................... 220
3.9 Zusammenfassung ............................................................................................................................. 221
4 Mit Objekten und Referenztypen arbeiten 225
4.1 Unterschied zwischen primitiven Datentypen und Referenztypen ............................. 225
4.1.1 Das Prinzip von primitiven Datentypen ....................................................................... 225
4.1.2 Das Prinzip von Referenztypen ....................................................................................... 226
4.1.3 Primitive Datentypen und Referenztypen als Funktionsargumente ................. 228
4.1.4 Den Typ einer Variablen ermitteln ................................................................................ 229
4.1.5 Ausblick ................................................................................................................................... 232
4.2 Zustand und Verhalten in Objekten kapseln ......................................................................... 232
4.2.1 Einführung objektorientierte Programmierung ........................................................ 233
4.2.2 Objekte erstellen über die Literal-Schreibweise ........................................................ 234
4.2.3 Objekte erstellen über Konstruktorfunktionen ......................................................... 235
4.2.4 Objekte erstellen unter Verwendung von Klassen ................................................... 238
4.2.5 Objekte erstellen über die Funktion »Object.create()« ........................................... 242
4.2.6 Auf Eigenschaften zugreifen und Methoden aufrufen .......................................... 245
4.2.7 Objekteigenschaften und Objektmethoden hinzufügen oder überschreiben 252
3838.book Seite 7 Freitag, 8. Juli 2016 3:33 15
Inhalt
8
4.2.8 Objekteigenschaften und Objektmethoden löschen .............................................. 256
4.2.9 Objekteigenschaften und Objektmethoden ausgeben .......................................... 258
4.2.10 Änderungen an Objekten verhindern ........................................................................... 261
4.3 Mit Arrays arbeiten ............................................................................................................................ 265
4.3.1 Arrays erzeugen und initialisieren ................................................................................. 265
4.3.2 Auf Elemente eines Arrays zugreifen ............................................................................ 268
4.3.3 Elemente einem Array hinzufügen ................................................................................ 269
4.3.4 Elemente aus einem Array entfernen ........................................................................... 274
4.3.5 Einen Teil der Elemente aus einem Array kopieren .................................................. 277
4.3.6 Arrays sortieren ..................................................................................................................... 280
4.3.7 Arrays als Stack verwenden .............................................................................................. 283
4.3.8 Arrays als Queue verwenden ........................................................................................... 284
4.3.9 Elemente in Arrays finden ................................................................................................. 286
4.3.10 Elemente innerhalb eines Arrays kopieren .................................................................. 288
4.3.11 Arrays in Zeichenketten umwandeln ............................................................................ 289
4.4 Mit Zeichenketten arbeiten ........................................................................................................... 290
4.4.1 Der Aufbau einer Zeichenkette ....................................................................................... 290
4.4.2 Die Länge einer Zeichenkette ermitteln ....................................................................... 290
4.4.3 Innerhalb einer Zeichenkette suchen ............................................................................ 291
4.4.4 Teile einer Zeichenkette extrahieren ............................................................................. 294
4.5 Sonstige globale Objekte ................................................................................................................. 297
4.5.1 Mit Datum und Zeit arbeiten ........................................................................................... 297
4.5.2 Komplexe Berechnungen durchführen ........................................................................ 300
4.5.3 Wrapperobjekte für primitive Datentypen ................................................................. 301
4.6 Mit regulären Ausdrücken arbeiten ............................................................................................ 301
4.6.1 Reguläre Ausdrücke definieren ....................................................................................... 302
4.6.2 Zeichen gegen einen regulären Ausdruck testen ...................................................... 302
4.6.3 Zeichenklassen verwenden .............................................................................................. 305
4.6.4 Anfang und Ende begrenzen ............................................................................................ 308
4.6.5 Quantifizierer verwenden ................................................................................................. 311
4.6.6 Nach Vorkommen suchen ................................................................................................. 316
4.6.7 Alle Vorkommen innerhalb einer Zeichenkette suchen ......................................... 317
4.6.8 Auf einzelne Teile eines Vorkommens zugreifen ...................................................... 318
4.6.9 Nach bestimmten Zeichenketten suchen ................................................................... 319
4.6.10 Vorkommen innerhalb einer Zeichenkette suchen .................................................. 319
4.6.11 Nach Vorkommen suchen ................................................................................................. 320
4.6.12 Zeichenketten zerteilen ..................................................................................................... 321
4.7 Funktionen als Referenztypen ...................................................................................................... 322
4.7.1 Funktionen als Argumente verwenden ........................................................................ 322
3838.book Seite 8 Freitag, 8. Juli 2016 3:33 15
Inhalt
9
4.7.2 Funktionen als Rückgabewert verwenden .................................................................. 324
4.7.3 Standardmethoden jeder Funktion ............................................................................... 326
4.8 Zusammenfassung ............................................................................................................................. 329
5 Webseiten dynamisch verändern 331
5.1 Aufbau einer Webseite .................................................................................................................... 331
5.1.1 Document Object Model ................................................................................................... 331
5.1.2 Die verschiedenen Knotentypen .................................................................................... 332
5.1.3 Der Dokumentknoten ........................................................................................................ 335
5.2 Elemente selektieren ........................................................................................................................ 337
5.2.1 Elemente per ID selektieren ............................................................................................. 339
5.2.2 Elemente per Klasse selektieren ..................................................................................... 341
5.2.3 Elemente nach Elementnamen selektieren ................................................................ 345
5.2.4 Elemente nach Namen selektieren ................................................................................ 346
5.2.5 Elemente per Selektor selektieren ................................................................................. 348
5.2.6 Das Elternelement eines Elements selektieren ......................................................... 354
5.2.7 Die Kindelemente eines Elements selektieren .......................................................... 357
5.2.8 Die Geschwisterelemente eines Elements selektieren ........................................... 361
5.2.9 Selektionsmethoden auf Elementen aufrufen .......................................................... 363
5.2.10 Elemente nach Typ selektieren ....................................................................................... 366
5.3 Mit Textknoten arbeiten ................................................................................................................. 366
5.3.1 Auf den Textinhalt eines Elements zugreifen ............................................................ 367
5.3.2 Den Textinhalt eines Elements verändern .................................................................. 368
5.3.3 Das HTML unterhalb eines Elements verändern ...................................................... 369
5.3.4 Textknoten erstellen und hinzufügen .......................................................................... 370
5.4 Mit Elementen arbeiten ................................................................................................................... 370
5.4.1 Elemente erstellen und hinzufügen .............................................................................. 371
5.4.2 Elemente und Knoten entfernen .................................................................................... 374
5.4.3 Die verschiedenen Typen von HTML-Elementen ...................................................... 375
5.5 Mit Attributen arbeiten ................................................................................................................... 380
5.5.1 Den Wert eines Attributs auslesen ................................................................................ 381
5.5.2 Den Wert eines Attributs ändern ................................................................................... 382
5.5.3 Attributknoten erstellen und hinzufügen ................................................................... 383
5.5.4 Attribute entfernen ............................................................................................................ 384
5.5.5 Auf CSS-Klassen zugreifen ................................................................................................ 384
5.6 Zusammenfassung ............................................................................................................................. 385
3838.book Seite 9 Freitag, 8. Juli 2016 3:33 15
Inhalt
10
6 Ereignisse verarbeiten und auslösen 387
6.1 Das Konzept der ereignisgesteuerten Programmierung ................................................... 387
6.2 Auf Ereignisse reagieren .................................................................................................................. 388
6.2.1 Einen Event-Handler per HTML definieren .................................................................. 391
6.2.2 Einen Event-Handler per JavaScript definieren ......................................................... 393
6.2.3 Event-Listener definieren .................................................................................................. 395
6.2.4 Mehrere Event-Listener definieren ................................................................................ 397
6.2.5 Argumente an Event-Listener übergeben .................................................................... 399
6.2.6 Event-Listener entfernen ................................................................................................... 401
6.2.7 Event-Handler und Event-Listener per Helferfunktion definieren ...................... 402
6.2.8 Auf Informationen eines Ereignisses zugreifen ......................................................... 403
6.3 Die verschiedenen Typen von Ereignissen ............................................................................... 406
6.3.1 Ereignisse bei Interaktion mit der Maus ...................................................................... 406
6.3.2 Ereignisse bei Interaktion mit Tastatur und Textfeldern ....................................... 411
6.3.3 Ereignisse beim Arbeiten mit Formularen ................................................................... 414
6.3.4 Ereignisse bei Fokussieren von Elementen .................................................................. 414
6.3.5 Allgemeine Ereignisse der Nutzerschnittstelle .......................................................... 415
6.3.6 Ereignisse bei mobilen Endgeräten ............................................................................... 418
6.4 Den Ereignisfluss verstehen und beeinflussen ...................................................................... 419
6.4.1 Die Event-Phasen ................................................................................................................. 419
6.4.2 Den Ereignisfluss unterbrechen ...................................................................................... 427
6.4.3 Standardaktionen von Events verhindern ................................................................... 432
6.5 Ereignisse programmatisch auslösen ........................................................................................ 435
6.5.1 Einfache Ereignisse auslösen ........................................................................................... 435
6.5.2 Ereignisse mit übergebenen Argumenten auslösen ................................................ 436
6.5.3 Standardereignisse auslösen ........................................................................................... 436
6.6 Zusammenfassung ............................................................................................................................. 437
7 Mit Formularen arbeiten 439
7.1 Auf Formulare und Formularfelder zugreifen ........................................................................ 440
7.1.1 Auf Formulare zugreifen .................................................................................................... 440
7.1.2 Auf Formularelemente zugreifen ................................................................................... 443
7.1.3 Den Wert von Textfeldern und Passwortfeldern auslesen .................................... 445
7.1.4 Den Wert von Checkboxen auslesen ............................................................................. 446
3838.book Seite 10 Freitag, 8. Juli 2016 3:33 15
Inhalt
11
7.1.5 Den Wert von Radiobuttons auslesen .......................................................................... 447
7.1.6 Den Wert von Auswahllisten auslesen ........................................................................ 449
7.1.7 Die Werte von Mehrfachauswahllisten auslesen ..................................................... 450
7.1.8 Auswahllisten per JavaScript mit Werten befüllen .................................................. 451
7.2 Formulare programmatisch abschicken und zurücksetzen ............................................. 453
7.3 Formulareingaben validieren ........................................................................................................ 455
7.4 Zusammenfassung ............................................................................................................................. 465
8 Browser steuern und Browserinformationen auslesen 467
8.1 Das Browser Object Model ............................................................................................................. 467
8.2 Auf Fensterinformationen zugreifen ......................................................................................... 469
8.2.1 Die Größe und Position eines Browserfensters ermitteln ..................................... 469
8.2.2 Die Größe und Position eines Browserfensters ändern .......................................... 471
8.2.3 Auf Anzeigeinformationen der Browserleisten zugreifen ..................................... 472
8.2.4 Allgemeine Eigenschaften ermitteln ............................................................................ 474
8.2.5 Neue Browserfenster öffnen ........................................................................................... 474
8.2.6 Browserfenster schließen ................................................................................................. 476
8.2.7 Dialoge öffnen ...................................................................................................................... 477
8.2.8 Funktionen zeitgesteuert ausführen ............................................................................ 478
8.3 Auf Navigationsinformationen der aktuellen Webseite zugreifen ............................. 480
8.3.1 Auf die einzelnen Bestandteile der URL zugreifen ................................................... 480
8.3.2 Auf Querystring-Parameter zugreifen .......................................................................... 481
8.3.3 Eine neue Webseite laden ................................................................................................ 481
8.4 Den Browserverlauf einsehen und verändern ....................................................................... 483
8.4.1 Im Browserverlauf navigieren ......................................................................................... 483
8.4.2 Browserverlauf bei Single Page Applications ............................................................. 484
8.4.3 Einträge in den Browserverlauf hinzufügen .............................................................. 485
8.4.4 Auf Änderungen im Browserverlauf reagieren ......................................................... 488
8.4.5 Den aktuellen Eintrag im Browserverlauf ersetzen ................................................. 488
8.5 Browser erkennen und Browserfeatures bestimmen ........................................................ 490
8.6 Auf Informationen des Bildschirms zugreifen ....................................................................... 492
8.7 Zusammenfassung ............................................................................................................................. 494
3838.book Seite 11 Freitag, 8. Juli 2016 3:33 15
Inhalt
12
9 Inhalte einer Webseite dynamisch nachladen 495
9.1 Das Prinzip von Ajax .......................................................................................................................... 495
9.1.1 Synchrone Kommunikation .............................................................................................. 495
9.1.2 Asynchrone Kommunikation ........................................................................................... 496
9.1.3 Typische Anwendungsfälle für die Verwendung von Ajax .................................... 498
9.1.4 Verwendete Datenformate .............................................................................................. 500
9.2 Das XML-Format .................................................................................................................................. 501
9.2.1 Der Aufbau von XML ........................................................................................................... 501
9.2.2 XML und die DOM API ........................................................................................................ 503
9.2.3 Zeichenketten in XML-Objekte umwandeln ............................................................... 504
9.2.4 XML-Objekte in Zeichenketten umwandeln ............................................................... 505
9.3 Das JSON-Format ................................................................................................................................. 506
9.3.1 Der Aufbau von JSON .......................................................................................................... 507
9.3.2 Unterschied zwischen JSON und JavaScript-Objekten ............................................ 509
9.3.3 Objekte in das JSON-Format umwandeln ................................................................... 509
9.3.4 Objekte aus dem JSON-Format umwandeln .............................................................. 511
9.4 Anfragen per Ajax stellen ................................................................................................................ 512
9.4.1 Das »XMLHttpRequest«-Objekt ...................................................................................... 512
9.4.2 HTML-Daten per Ajax laden ............................................................................................. 519
9.4.3 XML-Daten per Ajax laden ................................................................................................ 524
9.4.4 JSON-Daten per Ajax laden ............................................................................................... 527
9.4.5 Daten per Ajax an den Server schicken ......................................................................... 530
9.4.6 Formulare per Ajax abschicken ....................................................................................... 531
9.4.7 Daten von anderen Domains laden ............................................................................... 532
9.4.8 Die neuere Alternative zu »XMLHttpRequest«: die Fetch API ............................... 535
9.5 Zusammenfassung ............................................................................................................................. 537
10 Aufgaben vereinfachen mit jQuery 539
10.1 Einführung .............................................................................................................................................. 539
10.1.1 jQuery einbinden .................................................................................................................. 540
10.1.2 jQuery über ein CDN einbinden ...................................................................................... 541
10.1.3 jQuery verwenden ............................................................................................................... 542
10.1.4 Aufgaben mit jQuery vereinfachen ................................................................................ 543
10.2 Mit dem DOM arbeiten ..................................................................................................................... 545
10.2.1 Elemente selektieren .......................................................................................................... 545
10.2.2 Auf Inhalte zugreifen und diese verändern ................................................................ 550
3838.book Seite 12 Freitag, 8. Juli 2016 3:33 15
Inhalt
13
10.2.3 Ausgewählte Elemente filtern ........................................................................................ 554
10.2.4 Auf Attribute zugreifen ..................................................................................................... 556
10.2.5 Auf CSS-Eigenschaften zugreifen ................................................................................... 558
10.2.6 Zwischen Elementen navigieren .................................................................................... 558
10.2.7 Effekte und Animationen verwenden .......................................................................... 560
10.3 Auf Ereignisse reagieren .................................................................................................................. 562
10.3.1 Event-Listener registrieren ............................................................................................... 562
10.3.2 Auf allgemeine Ereignisse reagieren ............................................................................. 564
10.3.3 Auf Mausereignisse reagieren ......................................................................................... 565
10.3.4 Auf Tastaturereignisse reagieren ................................................................................... 567
10.3.5 Auf Formularereignisse reagieren ................................................................................. 568
10.3.6 Auf Informationen von Ereignissen zugreifen ........................................................... 569
10.4 Ajax-Anfragen erstellen ................................................................................................................... 571
10.4.1 Ajax-Anfragen erstellen .................................................................................................... 571
10.4.2 Auf Ereignisse reagieren .................................................................................................... 574
10.4.3 HTML-Daten per Ajax laden ............................................................................................. 575
10.4.4 XML-Daten per Ajax laden ................................................................................................ 576
10.4.5 JSON-Daten per Ajax laden .............................................................................................. 577
10.5 Zusammenfassung ............................................................................................................................. 579
11 Bilder und Grafiken dynamisch erstellen 587
11.1 Bilder zeichnen ..................................................................................................................................... 587
11.1.1 Die Zeichenfläche ................................................................................................................ 587
11.1.2 Der Rendering-Kontext ...................................................................................................... 588
11.1.3 Rechtecke zeichnen ............................................................................................................. 590
11.1.4 Pfade verwenden ................................................................................................................. 593
11.1.5 Texte zeichnen ...................................................................................................................... 599
11.1.6 Farbverläufe zeichnen ........................................................................................................ 600
11.1.7 Speichern und Wiederherstellen des Canvas-Zustands ......................................... 602
11.1.8 Transformationen anwenden ......................................................................................... 604
11.1.9 Animationen erstellen ....................................................................................................... 607
11.2 Vektorgrafiken einbinden .............................................................................................................. 609
11.2.1 Das SVG-Format ................................................................................................................... 609
11.2.2 SVG in HTML einbinden ..................................................................................................... 611
11.2.3 Das Aussehen von SVG-Elementen mit CSS beeinflussen ..................................... 614
11.2.4 Das Verhalten von SVG-Elementen mit JavaScript beeinflussen ........................ 615
11.3 Zusammenfassung ............................................................................................................................. 617
3838.book Seite 13 Freitag, 8. Juli 2016 3:33 15
Inhalt
14
12 Moderne Web-APIs verwenden 619
12.1 Über JavaScript kommunizieren .................................................................................................. 621
12.1.1 Unidirektionale Kommunikation mit dem Server ..................................................... 621
12.1.2 Bidirektionale Kommunikation mit einem Server .................................................... 623
12.1.3 Vom Server ausgehende Kommunikation ................................................................... 625
12.2 Nutzer wiedererkennen ................................................................................................................... 630
12.2.1 Cookies verwenden ............................................................................................................. 630
12.2.2 Cookies anlegen .................................................................................................................... 632
12.2.3 Cookies auslesen .................................................................................................................. 633
12.2.4 Ein Beispiel: Einkaufswagen auf Basis von Cookies ................................................. 635
12.2.5 Nachteile von Cookies ........................................................................................................ 638
12.3 Den Browserspeicher nutzen ......................................................................................................... 638
12.3.1 Werte im Browserspeicher speichern ........................................................................... 639
12.3.2 Werte aus dem Browserspeicher lesen ........................................................................ 640
12.3.3 Werte im Browserspeicher aktualisieren ..................................................................... 640
12.3.4 Werte aus dem Browserspeicher löschen .................................................................... 641
12.3.5 Auf Änderungen im Browserspeicher reagieren ....................................................... 641
12.3.6 Die verschiedenen Typen von Browserspeichern ...................................................... 642
12.3.7 Ein Beispiel: Einkaufswagen auf Basis des Browserspeichers .............................. 644
12.4 Die Browserdatenbank nutzen ..................................................................................................... 645
12.4.1 Öffnen einer Datenbank .................................................................................................... 646
12.4.2 Erstellen einer Datenbank ................................................................................................. 647
12.4.3 Erstellen eines Objektspeichers ...................................................................................... 648
12.4.4 Hinzufügen von Objekten zu einem Objektspeicher ............................................... 649
12.4.5 Lesen von Objekten aus einem Objektspeicher ......................................................... 652
12.4.6 Löschen von Objekten aus einem Objektspeicher .................................................... 653
12.4.7 Aktualisieren von Objekten in einem Objektspeicher ............................................. 655
12.4.8 Verwendung eines Cursors ............................................................................................... 656
12.5 Auf das Dateisystem zugreifen ..................................................................................................... 657
12.5.1 Auswählen von Dateien per Dateidialog ..................................................................... 658
12.5.2 Auswählen von Dateien per Drag & Drop ................................................................... 659
12.5.3 Lesen von Dateien ................................................................................................................ 660
12.5.4 Den Lesefortschritt überwachen .................................................................................... 663
12.6 Komponenten einer Webseite verschieben ............................................................................ 665
12.6.1 Ereignisse einer Drag-and-Drop-Operation ................................................................ 665
12.6.2 Verschiebbare Elemente definieren .............................................................................. 667
12.6.3 Verschieben von Elementen ............................................................................................. 669
3838.book Seite 14 Freitag, 8. Juli 2016 3:33 15
Inhalt
15
12.7 Aufgaben parallelisieren ................................................................................................................. 670
12.7.1 Das Prinzip von Web Workern ......................................................................................... 672
12.7.2 Web Worker verwenden ................................................................................................... 673
12.8 Den Standort von Nutzern ermitteln ......................................................................................... 674
12.8.1 Auf Standortinformationen zugreifen ......................................................................... 674
12.8.2 Kontinuierlich auf Standortinformationen zugreifen ............................................. 677
12.8.3 Position auf Karte anzeigen ............................................................................................. 677
12.8.4 Anfahrtsbeschreibung anzeigen .................................................................................... 679
12.9 Den Batteriestand eines Endgeräts auslesen ......................................................................... 680
12.9.1 Auf Batterieinformationen zugreifen ........................................................................... 680
12.9.2 Auf Ereignisse reagieren .................................................................................................... 682
12.10 Übersicht über verschiedene Web-APIs .................................................................................... 683
12.11 Zusammenfassung ............................................................................................................................. 687
13 Objektorientierte Programmierung 689
13.1 Die Prinzipien der objektorientierten Programmierung ................................................... 689
13.1.1 Klassen, Objektinstanzen und Prototypen .................................................................. 690
13.1.2 Prinzip 1: Abstraktes Verhalten definieren .................................................................. 692
13.1.3 Prinzip 2: Zustand und Verhalten kapseln .................................................................. 693
13.1.4 Prinzip 3: Zustand und Verhalten vererben ................................................................ 694
13.1.5 Prinzip 4: Verschiedene Typen annehmen .................................................................. 695
13.1.6 JavaScript und die Objektorientierung ......................................................................... 696
13.2 Prototypische Objektorientierung .............................................................................................. 696
13.2.1 Das Konzept von Prototypen ........................................................................................... 696
13.2.2 Von Objekten ableiten ....................................................................................................... 697
13.2.3 Methoden und Eigenschaften vererben ...................................................................... 698
13.2.4 Methoden und Eigenschaften im erbenden Objekt definieren ........................... 698
13.2.5 Methoden überschreiben ................................................................................................. 699
13.2.6 Die Prototypenkette ............................................................................................................ 700
13.2.7 Methoden des Prototyps aufrufen ................................................................................ 702
13.2.8 Prototypische Objektorientierung und die Prinzipien der Objektorientierung 703
13.3 Pseudoklassische Objektorientierung ....................................................................................... 703
13.3.1 Konstruktorfunktionen definieren ................................................................................ 704
13.3.2 Objektinstanzen erzeugen ............................................................................................... 704
13.3.3 Methoden und Eigenschaften definieren ................................................................... 704
13.3.4 Von Objekten ableiten ....................................................................................................... 705
13.3.5 Konstruktor der »Oberklasse« aufrufen ...................................................................... 709
3838.book Seite 15 Freitag, 8. Juli 2016 3:33 15
Inhalt
16
13.3.6 Methoden überschreiben .................................................................................................. 709
13.3.7 Methoden der »Oberklasse« aufrufen .......................................................................... 709
13.3.8 Pseudoklassische Objektorientierung und die Prinzipien der
Objektorientierung .............................................................................................................. 710
13.4 Objektorientierung mit Klassensyntax ..................................................................................... 710
13.4.1 Klassen definieren ............................................................................................................... 711
13.4.2 Objektinstanzen erzeugen ................................................................................................ 712
13.4.3 Getter und Setter definieren ............................................................................................ 712
13.4.4 Von »Klassen« ableiten ...................................................................................................... 713
13.4.5 Methoden überschreiben .................................................................................................. 716
13.4.6 Methoden der »Oberklasse« aufrufen .......................................................................... 718
13.4.7 Statische Methoden definieren ....................................................................................... 719
13.4.8 Statische Eigenschaften definieren ............................................................................... 720
13.4.9 Klassensyntax und die Prinzipien der Objektorientierung .................................... 721
13.5 Zusammenfassung ............................................................................................................................. 722
14 Funktionale Programmierung 723
14.1 Prinzipien der funktionalen Programmierung ....................................................................... 723
14.1.1 Prinzip 1: Funktionen sind Objekte erster Klasse ....................................................... 723
14.1.2 Prinzip 2: Funktionen arbeiten mit unveränderlichen Datenstrukturen .......... 724
14.1.3 Prinzip 3: Funktionen haben keine Nebeneffekte ..................................................... 724
14.1.4 Prinzip 4: Funktionale Programme sind deklarativ .................................................. 724
14.2 Imperative Programmierung und funktionale Programmierung ................................. 725
14.2.1 Iterieren mit der Methode »forEach()« ......................................................................... 725
14.2.2 Werte abbilden mit der Methode »map()« ................................................................. 728
14.2.3 Werte filtern mit der Methode »filter()« ...................................................................... 729
14.2.4 Mehrere Werte zu einem Wert reduzieren mit der Methode »reduce()« ......... 731
14.2.5 Kombination der verschiedenen Methoden ............................................................... 734
14.3 Zusammenfassung ............................................................................................................................. 735
15 Den Quelltext richtig strukturieren 737
15.1 Namenskonflikte vermeiden ......................................................................................................... 737
15.2 Module definieren und verwenden ............................................................................................ 741
15.2.1 Das Module-Entwurfsmuster .......................................................................................... 741
3838.book Seite 16 Freitag, 8. Juli 2016 3:33 15
Inhalt
17
15.2.2 Das Revealing-Module-Entwurfsmuster ..................................................................... 745
15.2.3 AMD ......................................................................................................................................... 749
15.2.4 CommonJS ............................................................................................................................. 751
15.2.5 Native Module ...................................................................................................................... 752
15.3 Zusammenfassung ............................................................................................................................. 754
16 Die neuen ES6-Features richtig nutzen 757
16.1 Maps verwenden ................................................................................................................................ 759
16.1.1 Maps erstellen ...................................................................................................................... 759
16.1.2 Grundlegende Operationen ............................................................................................. 760
16.1.3 Über Maps iterieren ............................................................................................................ 762
16.1.4 Weak Maps verwenden ..................................................................................................... 764
16.2 Sets verwenden ................................................................................................................................... 766
16.2.1 Sets erstellen ......................................................................................................................... 766
16.2.2 Grundlegende Operationen von Sets ........................................................................... 767
16.2.3 Über Sets iterieren ............................................................................................................... 769
16.2.4 WeakSets verwenden ......................................................................................................... 770
16.3 Das Iterieren über Datenstrukturen kapseln ......................................................................... 771
16.3.1 Das Prinzip von Iteratoren ................................................................................................ 771
16.3.2 Iteratoren verwenden ........................................................................................................ 772
16.3.3 Einen eigenen Iterator erstellen ..................................................................................... 773
16.3.4 Ein iterierbares Objekt erstellen ..................................................................................... 774
16.3.5 Über iterierbare Objekte iterieren .................................................................................. 775
16.4 Funktionen anhalten und fortsetzen ......................................................................................... 776
16.4.1 Eine Generatorfunktion erstellen .................................................................................. 776
16.4.2 Einen Generator erstellen ................................................................................................. 777
16.4.3 Über Generatoren iterieren .............................................................................................. 778
16.4.4 Unendliche Generatoren erstellen ................................................................................ 778
16.4.5 Generatoren mit Parametern steuern .......................................................................... 779
16.5 Den Zugriff auf Objekte abfangen .............................................................................................. 779
16.5.1 Das Prinzip von Proxies ...................................................................................................... 780
16.5.2 Proxies erstellen ................................................................................................................... 780
16.5.3 Handler für Proxies definieren ........................................................................................ 780
16.6 Asynchrone Programmierung vereinfachen .......................................................................... 783
16.6.1 Das Prinzip der asynchronen Programmierung ........................................................ 783
16.6.2 Promises erstellen ............................................................................................................... 788
16.6.3 Verarbeiten eines Promises .............................................................................................. 789
3838.book Seite 17 Freitag, 8. Juli 2016 3:33 15
Inhalt
18
16.6.4 Promise-Aufrufe verketten ............................................................................................... 790
16.6.5 Die Zustände von Promises .............................................................................................. 791
16.7 Vorlagen für Zeichenketten definieren ..................................................................................... 792
16.7.1 Template-Strings erstellen ............................................................................................... 792
16.7.2 Platzhalter innerhalb von Zeichenketten definieren ............................................... 793
16.7.3 Ausdrücke innerhalb von Zeichenketten auswerten ............................................... 793
16.7.4 Mehrzeilige Zeichenketten definieren .......................................................................... 794
16.7.5 Zeichenketten über Funktionen verändern ................................................................ 795
16.8 Symbole verwenden .......................................................................................................................... 796
16.8.1 Symbole erstellen ................................................................................................................. 796
16.8.2 Die Symbol-Registry verwenden ..................................................................................... 797
16.8.3 Symbole zur Definition eindeutiger Objekteigenschaften verwenden ............. 798
16.8.4 Symbole zur Definition von Konstanten verwenden ............................................... 799
16.9 Werte aus Arrays und Objekten extrahieren .......................................................................... 800
16.9.1 Werte aus Arrays extrahieren .......................................................................................... 800
16.9.2 Werte aus Objekten extrahieren .................................................................................... 804
16.9.3 Werte innerhalb einer Schleife extrahieren ................................................................ 807
16.9.4 Argumente einer Funktion extrahieren ....................................................................... 809
16.10 Neue Methoden der Standardobjekte ....................................................................................... 810
16.10.1 Neue Methoden in »Object« ............................................................................................ 811
16.10.2 Neue Methoden in »String« ............................................................................................. 811
16.10.3 Neue Methoden in »Array« ............................................................................................... 812
16.10.4 Neue Methoden in »RegExp« ........................................................................................... 813
16.10.5 Neue Methoden in »Number« ......................................................................................... 814
16.10.6 Neue Methoden in »Math« .............................................................................................. 814
16.11 Zusammenfassung ............................................................................................................................. 815
17 Serverseitige Anwendungen mit Node.js erstellen 817
17.1 Einführung Node.js ............................................................................................................................. 817
17.1.1 Die Architektur von Node.js .............................................................................................. 817
17.1.2 Installation von Node.js ..................................................................................................... 819
17.1.3 Eine einfache Anwendung ................................................................................................ 820
17.2 Node.js Packages verwalten .......................................................................................................... 820
17.2.1 Den Node.js Package Manager installieren ................................................................. 821
17.2.2 Packages installieren .......................................................................................................... 821
17.2.3 Eigene Packages erstellen ................................................................................................. 824
3838.book Seite 18 Freitag, 8. Juli 2016 3:33 15
Inhalt
19
17.3 Ereignisse verarbeiten und auslösen ......................................................................................... 828
17.3.1 Ein Event auslösen und abfangen .................................................................................. 829
17.3.2 Ein Event mehrfach auslösen .......................................................................................... 831
17.3.3 Ein Event genau einmal abfangen ................................................................................. 832
17.3.4 Ein Event mehrfach abfangen ......................................................................................... 832
17.4 Auf das Dateisystem zugreifen .................................................................................................... 833
17.4.1 Dateien lesen ........................................................................................................................ 833
17.4.2 Dateien schreiben ................................................................................................................ 834
17.4.3 Dateiinformationen auslesen ......................................................................................... 835
17.4.4 Dateien löschen .................................................................................................................... 836
17.4.5 Mit Verzeichnissen arbeiten ............................................................................................ 837
17.5 Einen Webserver erstellen .............................................................................................................. 838
17.5.1 Einen Webserver starten ................................................................................................... 838
17.5.2 Dateien per Webserver zur Verfügung stellen .......................................................... 839
17.5.3 Einen Client für einen Webserver erstellen ................................................................ 840
17.5.4 Routen definieren ................................................................................................................ 841
17.5.5 Das Webframework Express verwenden ..................................................................... 842
17.6 Auf Datenbanken zugreifen .......................................................................................................... 847
17.6.1 Installation von MongoDB ................................................................................................ 847
17.6.2 MongoDB-Treiber für Node.js installieren .................................................................. 848
17.6.3 Verbindung zur Datenbank herstellen ......................................................................... 848
17.6.4 Eine Collection erstellen .................................................................................................... 849
17.6.5 Objekte speichern ................................................................................................................ 850
17.6.6 Objekte lesen ......................................................................................................................... 851
17.6.7 Objekte aktualisieren ......................................................................................................... 853
17.6.8 Objekte löschen .................................................................................................................... 854
17.7 Zusammenfassung ............................................................................................................................. 855
18 Mobile Anwendungen mit JavaScript erstellen 857
18.1 Die unterschiedlichen Arten mobiler Anwendungen ......................................................... 857
18.1.1 Native Anwendungen ........................................................................................................ 857
18.1.2 Mobile Webanwendungen ............................................................................................... 858
18.1.3 Hybridanwendungen ......................................................................................................... 860
18.1.4 Vergleich der verschiedenen Ansätze ........................................................................... 861
18.2 Mobile Anwendungen mit jQuery Mobile erstellen ........................................................... 863
18.2.1 Das Grundgerüst einer mobilen Anwendung definieren ...................................... 863
18.2.2 Einzelne Seiten innerhalb einer Anwendung definieren ....................................... 865
3838.book Seite 19 Freitag, 8. Juli 2016 3:33 15
Inhalt
20
18.2.3 Übergänge zwischen den Seiten definieren ............................................................... 869
18.2.4 Themes verwenden ............................................................................................................. 870
18.2.5 UI-Komponenten verwenden .......................................................................................... 871
18.2.6 Layout-Raster definieren ................................................................................................... 881
18.2.7 Auf Ereignisse reagieren .................................................................................................... 885
18.3 Hybride Anwendungen mit Cordova erstellen ...................................................................... 887
18.3.1 Das Prinzip von Cordova .................................................................................................... 887
18.3.2 Eine Anwendung erstellen ................................................................................................ 888
18.3.3 Eine Anwendung starten ................................................................................................... 891
18.3.4 Plugins verwenden .............................................................................................................. 893
18.3.5 Auf Geräteinformationen zugreifen .............................................................................. 896
18.3.6 Dialoge anzeigen .................................................................................................................. 898
18.3.7 Auf die Kamera zugreifen .................................................................................................. 899
18.3.8 Auf Bewegungsinformationen zugreifen .................................................................... 900
18.3.9 Auf Orientierungsinformationen zugreifen ................................................................ 901
18.3.10 Auf Geolokalisierungsinformationen zugreifen ........................................................ 902
18.3.11 Bild-, Audio- und Videoaufnahmen durchführen ..................................................... 904
18.3.12 Auf Verbindungsinformationen zugreifen .................................................................. 906
18.3.13 Auf Kontakte zugreifen ...................................................................................................... 906
18.3.14 Dateien herunterladen und hochladen ........................................................................ 909
18.3.15 UI-Komponenten verwenden .......................................................................................... 911
18.3.16 Auf Ereignisse reagieren .................................................................................................... 911
18.3.17 Eine Anwendung bauen ..................................................................................................... 913
18.4 Zusammenfassung ............................................................................................................................. 914
19 Mikrocontroller mit JavaScript steuern 915
19.1 Espruino ................................................................................................................................................... 916
19.1.1 Technische Informationen ................................................................................................ 916
19.1.2 Anschluss und Installation ................................................................................................ 917
19.1.3 Erstes Beispiel ........................................................................................................................ 917
19.1.4 LEDs ansteuern ..................................................................................................................... 918
19.1.5 Weitere Module .................................................................................................................... 920
19.1.6 Sensoren auslesen ............................................................................................................... 921
19.2 Tessel ........................................................................................................................................................ 922
19.2.1 Technische Informationen ................................................................................................ 922
19.2.2 Anschluss und Installation ................................................................................................ 923
19.2.3 LEDs ansteuern ..................................................................................................................... 924
3838.book Seite 20 Freitag, 8. Juli 2016 3:33 15
Inhalt
21
19.2.4 Die Drucktaster programmieren .................................................................................... 925
19.2.5 Den Tessel durch Module erweitern ............................................................................. 926
19.3 BeagleBone Black ............................................................................................................................... 927
19.3.1 Technische Informationen ............................................................................................... 927
19.3.2 Anschluss und Installation ............................................................................................... 928
19.3.3 LEDs ansteuern ..................................................................................................................... 929
19.4 Arduino .................................................................................................................................................... 930
19.4.1 Das Firmata-Protokoll ........................................................................................................ 931
19.4.2 Anschluss und Installation ............................................................................................... 931
19.4.3 Das Node.js-Modul Johnny Five ...................................................................................... 932
19.5 Cylon.js .................................................................................................................................................... 933
19.5.1 Steuern eines BeagleBone Black mit Cylon.js ............................................................. 934
19.5.2 Steuern eines Tessel-Boards mit Cylon.js .................................................................... 934
19.5.3 Steuern eines Arduinos mit Cylon.js ............................................................................. 935
19.6 Zusammenfassung ............................................................................................................................. 935
20 Einen professionellen Entwicklungsprozess aufsetzen 937
20.1 Aufgaben automatisieren ............................................................................................................... 937
20.1.1 Aufgaben automatisieren mit Grunt ............................................................................ 938
20.1.2 Aufgaben automatisieren mit Gulp .............................................................................. 941
20.2 Quelltext automatisiert testen .................................................................................................... 942
20.2.1 Das Prinzip von automatisierten Tests ........................................................................ 943
20.2.2 Das Prinzip der testgetriebenen Entwicklung ........................................................... 944
20.2.3 Den Quelltext automatisiert testen mit QUnit ......................................................... 945
20.2.4 Den Quelltext automatisiert testen mit mocha ....................................................... 952
20.3 Versionsverwaltung des Quelltextes ......................................................................................... 956
20.3.1 Einführung in die Versionsverwaltung ........................................................................ 956
20.3.2 Das Versionsverwaltungssystem Git installieren und konfigurieren ................ 960
20.3.3 Ein neues lokales Repository anlegen ........................................................................... 962
20.3.4 Ein bestehendes Repository klonen ............................................................................... 962
20.3.5 Änderungen in den Staging-Bereich übertragen ...................................................... 963
20.3.6 Änderungen in das lokale Repository übertragen .................................................... 963
20.3.7 Die verschiedenen Zustände in Git ................................................................................ 965
20.3.8 Änderungen in das Remote Repository übertragen ................................................ 966
20.3.9 Änderungen aus dem Remote Repository übertragen ........................................... 967
3838.book Seite 21 Freitag, 8. Juli 2016 3:33 15
Inhalt
22
20.3.10 In einem neuen Branch arbeiten .................................................................................... 968
20.3.11 Änderungen aus einem Branch übernehmen ............................................................ 969
20.3.12 Übersicht über die wichtigsten Befehle und Begriffe .............................................. 970
20.4 Zusammenfassung ............................................................................................................................. 974
Anhang 975
A JavaScript-Referenz ............................................................................................................................ 977
B DOM-Referenz und HTML-Erweiterungen ............................................................................... 1035
C BOM und Ajax ....................................................................................................................................... 1129
D HTML5-Web-APIs-Referenz ............................................................................................................. 1161
Index ........................................................................................................................................................................ 1213
3838.book Seite 22 Freitag, 8. Juli 2016 3:33 15
Index
1213
Index
__proto__ ............................................................... 237, 697
:invalid ............................................................................... 457
:required ........................................................................... 457
:valid ................................................................................... 457
<canvas> ........................................................................... 587
<noscript> .......................................................................... 67
<script> ................................................................................ 67
$() ......................................................................................... 542
A
Ableitende Klasse .......................................................... 695
AbstractWorker ........................................................... 1204
Abstraktion ............................................................ 689, 692
Accessor ............................................................................ 693
Accessor Method ........................................................... 693
Accordion ......................................................................... 878
addEventListener() ....................................................... 395
Addition ............................................................................ 112
Aggregierung .................................................................. 690
Ajax .................................................................... 45, 495, 571
Aktor ................................................................................... 915
alert() ............................................................................. 63, 74
Algorithmus ...................................................................... 28
Allgemeines Ereignis ................................................... 564
AMD .......................................................................... 741, 749
Android ............................................................ 48, 857, 892
Android SDK .................................................................... 892
Android-Anwendung .................................................. 892
Anfrage .............................................................................. 495
Anfrage-Queue ............................................................... 818
AngularJS .......................................................................... 911
Antwort ............................................................................. 495
Anweisung .................................................................. 38, 71
bedingte ........................................................................ 126
benannte ...................................................................... 161
destrukturierende ..................................................... 800
Anwendung ....................................................................... 28
hybride ............................................................................ 48
native ........................................................................ 32, 48
Anwendungscache .................................................... 1161
Apache Cordova .......................................... 857, 860, 887
API ....................................................................................... 336
App ...................................................................................... 857
appendChild() ................................................................. 371
Apple .................................................................................. 857
Application Programming Interface ..................... 336
application/ecmascript ................................................. 66
application/javascript .................................................... 66
ApplicationCache ........................................................ 1161
apply() ................................................................................ 329
Arbeitsschritt ..................................................................... 28
Arduino ............................................................................. 930
Argument ......................................................................... 167
Array .................................................... 102, 265, 978, 1008
als Queue verwenden ............................................. 284
als Stack verwenden ................................................ 283
auf Elemente zugreifen .......................................... 268
Einträge ........................................................................ 103
Elemente ...................................................................... 103
Elemente entfernen ................................................. 274
Elemente finden ........................................................ 286
Elemente herauskopieren ..................................... 277
Elemente hinzufügen .............................................. 269
Elemente kopieren ................................................... 288
erzeugen ...................................................................... 265
in Zeichenketten umwandeln ............................. 289
indexbasierter Aufbau ........................................... 104
initialisieren ............................................................... 265
mehrdimensionale .................................................. 105
sortieren ....................................................................... 280
typisiertes .................................................................... 758
Werte ............................................................................. 103
Werte extrahieren .................................................... 800
Array sortieren
Arrays mit Objekten ................................................ 281
Vergleichsfunktion .................................................. 280
ArrayBuffer .............................................. 978, 1020, 1021
Array-Destructuring .................................................... 800
Array-Literal-Schreibweise ..................... 103, 265, 266
Arrow Function ..................................................... 181, 758
Assemblersprache ........................................................... 29
Assertion .......................................................................... 943
Assoziation ...................................................................... 690
async ..................................................................................... 69
Asynchrone Programmierung ................................ 783
Asynchronous JavaScript and XML ................ 45, 495
Asynchronous Module Definition ................ 741, 749
Atom ..................................................................................... 58
attachEvent() ................................................................... 397
Attr .................................................................................... 1036
Attribut ............................................................................. 107
Attributknoten ............................................................... 334
Audioaufnahme ............................................................ 904
3838.book Seite 1213 Freitag, 8. Juli 2016 3:33 15
Index
1214
Auf Attribute zugreifen .............................................. 556
Auf CSS-Eigenschaften zugreifen ........................... 558
Ausführbare Maschinencodedatei ........................... 31
Ausführungskontext ................................................... 185
globaler ........................................................................ 185
Ausgabe ................................................................................ 38
Ausnahme ........................................................................ 197
Ausnahmebehandlung ............................................... 197
Auswahlliste
auslesen ....................................................................... 449
mit Werten befüllen ................................................ 451
Auswahloperator .......................................................... 134
Auszeichnungssprache ................................................. 57
Automatische Builds ...................................................... 59
B
Backend ................................................................................ 44
Bad Practices ...................................................................... 44
Battery Status API ................................................ 680, 893
Baumdarstellung .......................................................... 331
BeagleBone Black .......................................................... 927
LEDs ansteuern ......................................................... 929
Benutzeroberfläche ............................................... 46, 387
Benutzerschnittstelle .............................................. 46, 47
Best Practices ..................................................................... 44
Bestätigungsdialog .......................................................... 74
Bewegungsinformationen auslesen ..................... 900
Bézierkurve zeichnen .................................................. 596
Bibliothek ............................................................................ 47
Bidirektionale Kommunikation ............................. 621
Bildaufnahme ................................................................. 904
Binärcode ............................................................................ 29
Binärschreibweise ........................................................... 97
Binary Large Object ...................................................... 624
Binärzahl ............................................................................. 97
bind() .................................................................................. 326
Blob ................................................... 624, 657, 1163, 1164
Blocking I/O .................................................................... 818
Bogen und Kreis
zeichnen ....................................................................... 597
Boilerplate-Code ............................................................ 726
BOM API ................................................................ 467, 1129
BoneScript ....................................................................... 929
Boolean .......................................................... 102, 978, 984
Boolescher Wahrheitswert ........................................ 102
Bootstrap .......................................................................... 441
Branch ............................................................................... 968
break .......................................................................... 154, 155
Breakpoint ....................................................................... 214
Browser
»persönliche\« Leiste ............................................... 473
Adressleiste .................................................................. 473
erkennen ....................................................................... 490
Menüleiste ................................................................... 473
Scrollleisten ................................................................. 473
Statusleiste .................................................................. 473
Werkzeugleiste ........................................................... 473
Browser Detection ........................................................ 491
Browser Object Model ................................................. 467
Browser Sniffing ............................................................ 491
Browserdatenbank ........................................................ 645
Browserfeature bestimmen ...................................... 490
Browserfenster
allgemeine Eigenschaften ermitteln ................. 474
Größe ändern ............................................................. 471
Größe ermitteln ......................................................... 469
neue öffnen ................................................................. 474
Position ändern ......................................................... 471
Position ermitteln ..................................................... 469
schließen ....................................................................... 476
Browserhistorie .............................................................. 483
Browserspeicher ............................................................ 638
Browserverlauf ............................................................... 483
auf Änderungen reagieren .................................... 488
den aktuellen Eintrag ersetzen ............................ 488
Zustandsobjekt .......................................................... 485
Bubbling-Phase .............................................................. 419
Bug ....................................................................................... 195
Build-Tool ......................................................................... 938
Bytecode .............................................................................. 35
C
call() ..................................................................................... 328
Callback .............................................................................. 784
Callback-Entwurfsmuster .......................................... 784
Callback-Funktion ............................................... 727, 784
Callback-Handler ........................................................... 784
CamelCase-Schreibweise .............................................. 93
Canvas API .................................................. 409, 587, 1172
2D-Rendering-Kontext ............................................ 588
3D-Rendering-Kontext ............................................ 588
Bézierkurven zeichnen ............................................ 596
Bogen und Kreise zeichnen ................................... 597
Pfade verwenden ....................................................... 593
quadratische Kurven zeichnen ............................ 595
Rechtecke zeichnen .................................................. 590
Rendering-Kontext ................................................... 588
Rotation ........................................................................ 606
Skalierung .................................................................... 605
3838.book Seite 1214 Freitag, 8. Juli 2016 3:33 15
Index
1215
Canvas API (Forts.)
Texte zeichnen ........................................................... 599
Translation .................................................................. 606
Zeichenfläche ............................................................. 587
CanvasGradient .............................................. 1172, 1173
CanvasPattern ................................................. 1173, 1174
CanvasRenderingContext2D ............ 589, 1173, 1174
Capturing-Phase ............................................................ 419
Cascading Stylesheets ............................................ 48, 53
catch ................................................................................... 197
CDN ..................................................................................... 542
CharacterData .............................................................. 1037
Checkbox
auslesen ........................................................................ 446
checkValidity() ................................................................ 461
ChildNode ..................................................................... 1038
Chrome Developer Tools ........................................... 213
Chrome Web IDE ........................................................... 917
class ..................................................................................... 711
Class Under Test ............................................................ 943
classList ............................................................................. 384
className ........................................................................ 384
Client .................................................................................. 495
Clientseite .......................................................................... 44
Closure ............................................................................... 741
Cloud9-IDE ....................................................................... 927
CLR ......................................................................................... 34
Coda 2 .................................................................................. 58
Code
globaler ......................................................................... 185
Codequalität .................................................................... 937
Collection ......................................................................... 849
Column-Families ........................................................... 645
comfirm() ........................................................................... 74
Common Language Runtime ..................................... 34
CommonJS ............................................................. 741, 751
Compiler ............................................................................. 30
configurable .................................................................... 243
console ......................................................... 78, 1129, 1154
const ............................................................................ 95, 757
Constraint Validation API .......................................... 458
constructor ...................................................................... 237
constructor() ......................................................... 239, 711
Content Delivery Network ........................................ 542
Content Distribution Network, ............................... 542
Content Type ..................................................................... 66
continue .................................................................. 155, 157
Cookie ................................................................................ 630
cookie ................................................................................. 632
Coordinates ...................................................... 1168, 1169
Cordova ............................................................................. 860
Anwendung bauen .................................................. 913
Anwendung erstellen .............................................. 888
Anwendung starten ................................................ 891
Audioaufnahmen ..................................................... 904
Bewegungsinformationen auslesen ................. 900
Bildaufnahmen ......................................................... 904
Dateien herunterladen ........................................... 909
Dateien hochladen .................................................. 909
Dialoge anzeigen ...................................................... 898
Ereignisse ..................................................................... 911
Geolokalisierungsinformationen auslesen ... 902
Kamerazugriff ........................................................... 899
Kontakte auslesen ................................................... 906
Orientierungsinformationen auslesen ............ 901
Plugins verwenden .................................................. 893
Prinzip von .................................................................. 887
Verbindungsinformationen ................................. 906
Videoaufnahmen ..................................................... 904
CORS ................................................................................... 533
CouchDB ........................................................................... 645
createAttribute() ................................................... 380, 383
createCookie() ................................................................ 634
createElement() ............................................................. 371
createTextNode() .......................................................... 370
Cross-Origin-Request .................................................. 532
Proxy ............................................................................. 533
Cross-Origin-Resource-Sharing .............................. 533
CRUD ......................................................................... 645, 850
CSS .......................................................................................... 53
CSS eines Elements verändern ................................ 344
CSS Object Model ........................................................ 1116
CSS3 ....................................................................................... 48
CSS3 Media Queries ..................................................... 859
CSS-Klasse ........................................................................ 341
CSSOM View Module ................................................. 1035
Cursor ................................................................................ 656
Custom Data Attributes ............................................. 864
CustomEvent ...................................................... 436, 1039
CVS ...................................................................................... 957
Cylon.js .............................................................................. 933
D
Darstellungsschicht ........................................................ 55
DataTransfer ....................................................... 669, 1208
DataTransferItem ....................................................... 1210
DataTransferItemList ................................................ 1209
data-transition ............................................................... 869
Data-URL ........................................................................... 662
DataView .................................................. 978, 1020, 1022
3838.book Seite 1215 Freitag, 8. Juli 2016 3:33 15
Index
1216
Date ................................................................. 297, 978, 994
Datei
lesen ............................................................................... 833
löschen .......................................................................... 836
schreiben ...................................................................... 834
Dateiinformationen auslesen ................................. 835
Daten
numerische .................................................................... 96
Datenbank ....................................................................... 645
dokumentenorientiert ........................................... 847
erstellen ........................................................................ 647
Transaktion ................................................................ 650
Datenbankschema .............................................. 646, 648
Dateneigenschaft ................................................. 250, 703
Datenkapselung ............................... 248, 689, 693, 741
Datenstruktur ................................................................ 332
Datentyp .............................................................................. 96
besondere .................................................................... 109
primitiver ........................................................................ 96
Datum ermitteln ........................................................... 298
Debuggen ......................................................... 80, 212, 213
Debugger ................................................................. 212, 215
DedicatedWorkerGlobalScope .............................. 1205
Default Parameter ........................................................ 177
Defensive Programmierung .................................... 341
defer ...................................................................................... 69
deklarativ ......................................................................... 724
Dekrement-Operator .................................................. 112
delete ................................................................................. 256
deleteCookie() ................................................................ 634
Design Pattern ............................................................... 741
Destructuring ........................................................ 758, 800
Destrukturierende Anweisung ............................... 800
DHTML ................................................................................. 44
dispatchEvent() .............................................................. 435
Division ............................................................................. 112
Document ...................................................................... 1040
document ......................................................................... 333
Document Object Model ........................................... 331
Document Type Definition ...................................... 501
document.anchors ....................................................... 366
document.body ............................................................. 366
document.forms ........................................................... 366
document.head .............................................................. 366
document.images ......................................................... 366
document.links .............................................................. 366
DocumentAndElementEventHandlers ............. 1078
DocumentOrShadowRoot ....................................... 1043
DocumentType ............................................................ 1043
Dokumentendatenbank ............................................ 645
Dokumentknoten ................................................ 333, 335
DOM .................................................................................... 331
Attribute auslesen .................................................... 381
Attribute entfernen .................................................. 384
Attributknoten erstellen und hinzufügen ....... 383
auf CSS-Klassen zugreifen ..................................... 384
den Wert eines Attributs ändern ........................ 382
im Browser untersuchen ........................................ 335
DOM API ............................................................................ 336
DOM Parsing and Serialization ............................. 1035
DOM Scripting .................................................................. 44
DOM-Baum ...................................................................... 331
DOM-Bearbeitung ......................................................... 369
DOMContentLoaded .................................................... 396
DOM-Event-Handler .................................................... 389
DOM-Event-Listener .................................................... 389
DOMImplementation ............................................... 1044
DOMParser ....................................................................... 504
DOM-Test .......................................................................... 937
DOMTokenList ............................................................. 1045
Drag and Drop API .................................. 659, 665, 1208
Drag Source ...................................................................... 666
Drag-and-Drop-Operation ......................................... 665
Ereignisse ..................................................................... 665
DragEvent ...................................................................... 1211
Drop Target ...................................................................... 666
DTD ...................................................................................... 501
Dynamisches HTML ....................................................... 44
E
Easing-Funktion ............................................................. 561
ECMA .................................................................................... 43
ECMAScript ........................................................................ 43
Editor .................................................................................... 57
Effekt verwenden .......................................................... 560
Eich, Brendan .................................................................... 43
Eigenschaft ....................................................................... 107
statische ........................................................................ 720
Eigenschaftsattribut ........................................... 242, 703
Ein- und Ausgabe
blockierend .................................................................. 818
nicht blockierende .................................................... 818
Eingabe ................................................................................ 38
Eingabedialog .................................................................... 75
Einkaufswagen ..................................................... 635, 644
Element .......................................................................... 1046
filtern ............................................................................. 554
getAttribute() .............................................................. 380
nach Elementnamen selektieren ........................ 345
nach Namen selektieren ........................................ 346
per ID selektieren ...................................................... 339
3838.book Seite 1216 Freitag, 8. Juli 2016 3:33 15
Index
1217
Element (Forts.)
per Klasse selektieren .............................................. 341
per Selektor selektieren .......................................... 348
removeAttribute() .................................................... 380
selektieren ......................................................... 337, 545
setAttribute() .............................................................. 380
verschieben ................................................................. 669
zwischen ihnen navigieren ................................... 558
ElementContentEditable ......................................... 1078
Elementknoten .............................................................. 334
Elternklasse ...................................................................... 696
Elternkonstruktor ......................................................... 714
Encapsulation ................................................................. 693
Endlosschleife ................................................................. 159
Entscheidungspunkt ...................................................... 39
Entwicklung
testgetrieben ............................................................... 944
Entwicklungsumgebung .............................................. 59
Entwurfsmuster ............................................................. 741
enumerable ..................................................................... 243
Erbende Klasse ............................................................... 695
Ereignis .............................................................................. 387
auf Ereignisse reagieren ........................................ 388
auf Informationen des Ereignisses zugreifen 403
auslösen ....................................................................... 435
Fokusereignisse ......................................................... 414
Formularereignisse .................................................. 414
Mausereignisse .......................................................... 406
mobile ........................................................................... 911
mobile Endgeräte ..................................................... 418
Nutzerschnittstellenereignisse ............................ 415
programmatisch auslösen .................................... 435
Tastaturereignisse ................................................... 411
Ereignisfluss .................................................................... 419
unterbrechen .............................................................. 427
Ereignis-Handler ............................................................. 70
Ereignis-Listener .............................................................. 70
Error ................................................................. 198, 978, 986
Escape Character ............................................................ 100
Escaping ............................................................................ 100
Espruino ..................................................................... 50, 916
Dateien lesen .............................................................. 920
Dateien schreiben ..................................................... 920
HTTP-Client ................................................................. 920
HTTP-Server ................................................................ 920
LEDs ansteuern .......................................................... 918
Sensoren auslesen .................................................... 921
European Computer Manufacturers
Asssociation ................................................................. 43
eval() ................................................................................... 186
EvalError ........................................................ 198, 978, 986
Event ...................................................................... 387, 1050
abfangen ...................................................................... 829
auslösen ....................................................................... 829
Auslöser ........................................................................ 387
binden ........................................................................... 388
Standardaktionen verhindern ............................ 432
Event-Bubbling .............................................................. 421
Event-Capturing ................................................... 420, 425
Event-Emitter ........................................................ 387, 828
EventEmitter ................................................................... 828
Event-Handler ......................................................... 70, 387
Helferfunktion ........................................................... 402
per HTML definieren ............................................... 391
per JavaScript definieren ....................................... 393
Event-Listener ................................................................... 70
Argumente übergeben ........................................... 399
definieren .................................................................... 395
entfernen ..................................................................... 401
Helferfunktion ........................................................... 402
mehrere definieren .................................................. 397
registrieren .................................................................. 562
EventListener ................................................................ 1052
Event-Loop ............................................................. 387, 818
Event-Methode .............................................................. 563
Event-Phase ..................................................................... 419
Event-Queue ................................................................... 387
EventSource .................................................................. 1207
EventTarget ................................................................... 1052
every() ................................................................................ 734
Exportobjekt ................................................................... 743
Extensible Markup Language .................................. 501
F
false ..................................................................................... 102
Farbverlauf
linearer ......................................................................... 600
radialer ......................................................................... 600
Fat Arrow Function ...................................................... 181
Feature Detection ................................................ 492, 590
Fehler
auslösen ....................................................................... 200
fangen und behandeln ........................................... 197
logischer ....................................................................... 195
Fehlerbehandlung ........................................................ 196
Fetch API ........................................................................... 535
FIFO-Prinzip .................................................................... 284
File ............................................................... 657, 1163, 1164
File API ................................................................... 894, 1163
FileList ....................................................... 657, 1163, 1165
FileReader ....................................... 657, 660, 1163, 1165
3838.book Seite 1217 Freitag, 8. Juli 2016 3:33 15
Index
1218
FileReaderSync ................................................. 1163, 1167
filter() ................................................................................. 729
finally ................................................................................. 205
find() ................................................................................... 287
findIndex() ....................................................................... 287
Firebug ................................................................................. 78
Firmata-Protokoll ......................................................... 931
First Class Citizen .......................................................... 723
First Class Object ........................................................... 723
First in First out ............................................................. 284
firstChild ........................................................................... 359
firstElementChild ......................................................... 359
Flag ...................................................................................... 317
Float32Array ....................................................... 978, 1020
Float64Array ....................................................... 978, 1020
Fluent API ......................................................................... 567
Flussdiagramm ................................................................. 38
Flussdiagramm-Notation ............................................. 37
FocusEvent ...................................................................... 414
Fokusereignis ................................................................. 414
forEach() ................................................................... 324, 725
for-in-Schleife .............................................. 243, 259, 763
FormData ......................................................................... 531
Formular
abschicken .................................................................. 453
validieren ..................................................................... 455
Zugriff auf ................................................................... 440
zurücksetzen .............................................................. 453
Formulareingabe validieren ..................................... 455
Formularelement zugreifen ..................................... 443
Formularereignis ................................................. 414, 568
for-of-Schleife .............................................. 758, 762, 763
for-Schleife ...................................................................... 143
Fragment Identifier .......................................... 481, 1203
Frontend .............................................................................. 44
Function ........................................................ 165, 978, 983
Function Borrowing ..................................................... 328
Function Declaration .................................................. 163
Function Expression ................................................... 164
Funktion .............................................................................. 63
anonyme ...................................................................... 164
aufrufen ....................................................................... 166
definieren .................................................................... 163
Methoden .................................................................... 326
mit einem Parameter aufrufen .......................... 167
mit einem Parameter definieren ........................ 166
mit mehreren Parametern aufrufen ................ 168
mit mehreren Parametern definieren .............. 168
Signatur ....................................................................... 167
variadische ................................................................. 173
Funktionale Programmiersprache ........................ 724
Funktionale Programmierung ................................. 723
iterieren ........................................................................ 725
mehrere Werte zu einem Wert reduzieren ...... 731
Unterschied zur imperativen
Programmierung ................................................. 725
Werte abbilden ........................................................... 728
Werte filtern ................................................................ 729
Funktionsabschluss ...................................................... 742
Funktionsaufruf-Stack ................................................ 184
Funktionsausdruck ....................................................... 164
Funktionscode ................................................................ 185
Funktionsdeklaration .................................................. 163
Funktionsparameter .................................................... 166
Funktionssignatur ........................................................ 167
Funktionstest .................................................................. 937
G
Garbage Collection .............................................. 765, 770
Generator .......................................... 758, 776, 979, 1031
Parameter .................................................................... 779
unendlicher ................................................................. 778
Geolocation ............................................. 674, 1168, 1170
Geolocation API ....................................... 674, 902, 1168
Geolokalisierungsinformationen auslesen ........ 902
Geräteinformationen auslesen ............................... 896
get ........................................................................................ 247
getElementById() ........................................................... 339
getElementsByClassName() ...................................... 342
getElementsByName() ................................................. 347
getElementsByTagName() ......................................... 345
Getter .................................................................................. 247
Getter-Methode ............................................................. 743
Git ........................................................................................ 958
Arbeitsbereich ............................................................ 973
Branch ........................................................................... 973
Checkout ....................................................................... 973
Clone .............................................................................. 973
Commit ......................................................................... 973
Fork ................................................................................. 974
HEAD .............................................................................. 974
Index .................................................................... 960, 973
lokale Arbeitskopie .................................................. 959
Merge ............................................................................. 974
Pull .................................................................................. 973
Push ................................................................................ 973
Remote Repository ................................................... 973
Repository .................................................................... 973
Snapshot ....................................................................... 959
Staging Area ..................................................... 960, 973
Staging-Bereich ......................................................... 960
3838.book Seite 1218 Freitag, 8. Juli 2016 3:33 15
Index
1219
Git (Forts.)
Working Directory .......................................... 959, 973
Globale jQuery-Methode ........................................... 571
GlobalEventHandlers ............................................... 1078
Google Maps API ........................................................... 677
Grammatik ......................................................................... 85
Graphen-Datenbank .................................................... 645
Grid ..................................................................................... 881
Grid-Block ......................................................................... 881
Grid-Layout ...................................................................... 881
Grid-Zelle .......................................................................... 881
Grunt .................................................................................. 938
Plugins installieren .................................................. 940
Plugins verwenden ................................................... 939
Gruntfile.js ....................................................................... 938
Gulp JS ................................................................................ 941
gulpfile.js .......................................................................... 942
Gültigkeitsbereich ........................................................ 186
dynamisch ................................................................... 187
Kette von ............................................................ 186, 188
lexikalisch .................................................................... 187
statisch ......................................................................... 187
H
Haltepunkt ....................................................................... 214
bedingter ...................................................................... 219
DOM ............................................................................... 220
Event-Listener ............................................................ 220
XHR ................................................................................ 220
Hash-Bang-URL .............................................................. 484
Hauptthread .................................................................... 671
Hello-World-Beispiel ...................................................... 61
Hexadezimalschreibweise ........................................... 97
Hexadezimalzahl ............................................................. 97
Hinweisdialog ................................................................... 74
Historie ................................................................................ 43
History ................................................................ 1129, 1147
pushState() .................................................................. 485
replaceState() ................................................... 485, 488
history ................................................................................ 483
History API ....................................................................... 485
Höhere Programmiersprache .................................... 29
HTML .................................................................................... 53
HTML5 Canvas 2D Context .................................... 1172
HTML5-Anwendung ...................................................... 48
HTML5-App ..................................................................... 858
HTMLAnchorElement .............................................. 1079
HTMLAreaElement .................................................... 1080
HTMLAudioElement ................................................. 1081
HTMLBodyElement ................................................... 1081
HTMLBRElement ......................................................... 1081
HTMLCollection .......................................................... 1053
HTMLDataElement ..................................................... 1084
HTMLDataListElement ............................................. 1085
HTMLDetailsElement ................................................ 1085
HTMLDialogElement ................................................. 1085
HTMLDivElement ....................................................... 1086
HTMLDListElement ................................................... 1086
HTML-Element .................................................................. 63
HTMLElement .................................................... 375, 1078
HTMLEmbedElement ................................................ 1086
HTML-Event-Handler .................................................. 389
HTMLFieldsetElement .............................................. 1087
HTMLFormElement ................................................... 1089
HTMLHeadElement ................................................... 1090
HTMLHeadingElement ............................................. 1090
HTMLHRElement ........................................................ 1091
HTMLHtmlElement ................................................... 1090
HTMLHyperlinkElementUtils ................................ 1079
HTMLIFrameElement ................................................ 1091
HTMLImageElement ................................................. 1092
HTMLInputElement ................................................... 1093
HTMLKeygenElement ............................................... 1097
HTMLLabelElement ................................................... 1099
HTMLLegendElement ............................................... 1099
HTMLLIElement .......................................................... 1100
HTMLLinkElement ..................................................... 1100
HTMLMapElement ..................................................... 1101
HTMLMediaElement ................................................. 1101
HTMLMetaElement .................................................... 1104
HTMLMeterElement .................................................. 1105
HTMLModElement ..................................................... 1105
HTMLObjectElement ................................................. 1105
HTMLOListElement ................................................... 1107
HTMLOptGroupElement ......................................... 1108
HTMLOptionElement ................................................ 1108
HTMLOutputElement ............................................... 1109
HTMLParagraphElement ......................................... 1111
HTMLParamElement ................................................. 1111
HTMLPictureElement ............................................... 1111
HTMLPreElement ....................................................... 1111
HTMLProgressElement ............................................ 1111
HTMLQuoteElement ................................................. 1112
HTMLScriptElement .................................................. 1112
HTMLSelectElement .................................................. 1113
HTMLSourceElement ................................................ 1116
HTMLSpanElement .................................................... 1116
HTMLStyleELement ................................................... 1116
HTMLTableAreaElement .......................................... 1121
HTMLTableCaptionElement ................................... 1118
HTMLTableCellElement ........................................... 1118
3838.book Seite 1219 Freitag, 8. Juli 2016 3:33 15
Index
1220
HTMLTableColElement ............................................ 1119
HTMLTableElement ................................................... 1117
HTMLTableRowElement .......................................... 1119
HTMLTableSectionElement .................................... 1120
HTMLTimeElement .................................................... 1124
HTMLTitleElement ..................................................... 1124
HTMLTrackElement ................................................... 1124
HTMLUListElement ................................................... 1125
HTMLUnknownElement .......................................... 1125
HTMLVideoElement .................................................. 1125
HTTP ................................................................................... 495
HTTP-Anfrage ................................................................. 495
HTTP-Antwort ................................................................ 495
HTTP-Protokoll .............................................................. 630
HTTP-Request ................................................................. 495
HTTP-Response .............................................................. 495
Hybrid-App ...................................................................... 860
Hybride Anwendung ................................................... 860
Hypertext Markup Language ...................................... 53
Hypertext Transfer Protocol .................................... 495
I
IDBCursor ........................................................... 1186, 1187
IDBCursorWithValue ..................................... 1186, 1188
IDBDatabase ...................................................... 1186, 1188
IDBFactory ......................................................... 1186, 1190
IDBIndex ............................................................. 1186, 1190
IDBKeyRange .................................................... 1186, 1192
IDBObjectStore ................................................ 1186, 1193
IDBOpenDBRequest ....................................... 1187, 1195
IDBRequest ........................................................ 1187, 1195
IDBTransaction ................................................ 1187, 1196
IDBVersionChangeEvent ............................. 1187, 1197
IDE .......................................................................................... 59
if-Anweisung ................................................................... 126
if-else-if-else-Verzweigung ....................................... 129
IIFEs .................................................................................... 741
ImageData .......................................................... 1173, 1184
Immediately-Invoked Function Expression ..... 742
Imperative Programmierung .................................. 724
Implementierung .................................................. 37, 336
Indexed Database API ................................................. 645
IndexedDB API ............................................................... 645
indexOf() ................................................................. 286, 291
Infinity ................................................................................. 98
Information Hiding ............................................ 693, 741
Inhaltsschicht .................................................................... 55
Inheritance ...................................................................... 694
Inkrement-Operator .................................................... 112
innerHTML ...................................................................... 369
innerText .......................................................................... 369
insertBefore() .................................................................. 371
Instanz ............................................................................... 690
Int16Array ........................................................... 979, 1020
Int32Array ........................................................... 979, 1020
Int8Array .............................................................. 979, 1020
Integrated Development Environment ................. 59
Interface ............................................................................ 336
Internet der Dinge ........................................................... 49
Internet Media Type ....................................................... 66
Internet of Things ................................................. 49, 915
Interpreter .......................................................................... 30
Interpretieren ................................................................... 34
Ionic Framework ............................................................ 911
iOS ................................................................................ 48, 892
iOS-Anwendung ............................................................. 892
IoT ................................................................................ 49, 915
iPad ...................................................................................... 857
iPhone ................................................................................ 857
Iterable ............................................................................... 775
Iteration ............................................................................. 146
Iterator ............................................... 758, 762, 771, 1031
Iterierbar ........................................................................... 775
J
Java .............................................................................. 43, 857
Java Development Kit .................................................. 892
Java Runtime Environment ........................................ 34
JavaScript Object Notation .............................. 501, 506
JavaScript-Bibliothek ..................................................... 75
JDK ....................................................................................... 892
JIT ........................................................................................... 35
Johnny Five .............................................................. 50, 932
jQuery
Ajax ................................................................................ 571
Ajax-Anfragen erstellen ......................................... 571
Ajax-Ereignisse .......................................................... 574
allgemeine Ereignisse .............................................. 564
Attributfilterselektoren ................................ 545, 548
auf Attribute zugreifen ........................................... 556
auf CSS-Eigenschaften zugreifen ........................ 558
auf Ereignisse reagieren ......................................... 562
auf Inhalte zugreifen ............................................... 550
ausgewählte Elemente ........................................... 543
ausgewählte Knoten ............................................... 543
Basisfilterselektoren ...................................... 545, 547
Basisselektoren ................................................ 545, 546
Effekte verwenden .................................................... 560
einbinden ..................................................................... 540
Elemente filtern ......................................................... 554
3838.book Seite 1220 Freitag, 8. Juli 2016 3:33 15
Index
1221
jQuery (Forts.)
Elemente selektieren ............................................... 545
Event-Listener registrieren ................................... 562
Event-Methoden ....................................................... 563
Event-Objekt ............................................................... 569
Formularereignisse .................................................. 568
Formularfilterselektoren ............................. 546, 549
globale jQuery-Methoden ..................................... 571
Hierarchieselektoren ..................................... 545, 547
HTML-Daten per Ajax laden ................................ 575
Inhalte verändern ..................................................... 550
Inhaltsfilterselektoren .................................. 545, 548
JSON-Daten per Ajax laden .................................. 577
Kindfilterselektoren ....................................... 546, 550
Mausereignisse .......................................................... 565
Sichtbarkeitsfilterselektoren ...................... 545, 548
Tastaturereignisse ................................................... 567
über ein CDN einbinden ......................................... 541
XML-Daten per Ajax laden ................................... 576
zwischen Elementen navigieren ......................... 558
jQuery Mobile ....................................................... 857, 863
aufklappbare Bereiche ........................................... 877
Auswahllisten ............................................................ 880
Checkboxen ................................................................. 875
Eingabefelder ............................................................. 880
Fußleisten .................................................................... 874
Kopfleisten .................................................................. 874
Listen ............................................................................. 879
Radiobuttons ............................................................. 875
Schaltflächen .............................................................. 875
Schieberegler .............................................................. 879
Themes verwenden .................................................. 870
Umschalter .................................................................. 878
jQuery() .............................................................................. 542
jQuery-Methode ............................................................ 542
jQuery-Objekt ................................................................. 542
JRE .......................................................................................... 34
JSON ................................................................. 501, 506, 509
JSON with Padding ........................................................ 534
JSON-Format ................................................................... 507
JSONP ................................................................................. 534
Just-in-Time-Compiler .................................................. 35
K
Kamerazugriff ................................................................. 899
Kapselung ......................................................................... 248
Key/Value-Pair ............................................................... 759
KeyboardEvent ............................................................... 411
Key-Value-Stores ........................................................... 645
Klasse ........................................................................ 238, 690
ableitend ...................................................................... 695
erbend ........................................................................... 695
Klassenbasierte Objektorientierung ..................... 692
Klassenbasierte Programmiersprache ................. 691
Klassendiagramm ................................................ 233, 690
Klassenkörper ........................................................ 239, 711
Klassenlose Programmierung ................................. 691
Klassensyntax ................................................................ 757
Knoten ............................................................................... 331
Knotenliste ...................................................................... 343
statische ....................................................................... 344
Knotentyp ........................................................................ 332
Kommentar ..................................................................... 211
mehrzeiliger ............................................................... 211
Kommunikation
asynchrone ................................................................. 496
birektional ................................................................... 621
synchrone .................................................................... 496
unidirektional ............................................................ 621
Komponententest ........................................................ 945
Komposition ................................................................... 690
Konkatenation ............................................................... 114
Konsole ................................................................................ 76
anzeigen in Chrome ................................................... 76
anzeigen in Firefox ..................................................... 76
anzeigen in Opera ....................................................... 77
anzeigen in Safari ....................................................... 77
Konstante ............................................................................ 95
definieren ....................................................................... 95
Konstruktor ..................................................................... 711
Konstruktorfunktion ............................... 235, 265, 704
Kontakt auslesen ........................................................... 906
Kontextobjekt ................................................................ 186
Kontrollstruktur ............................................................ 126
Kopplung .......................................................................... 690
L
Label ................................................................................... 160
Last in First out .............................................................. 283
lastChild ............................................................................ 359
lastElementChild ........................................................... 359
lastIndexOf() ................................................................... 291
Laufzeitfehler ................................................................. 194
Laufzeitumgebung .......................................................... 33
let .................................................................................. 85, 757
LIFO-Prinzip .................................................................... 283
Literal ................................................................................. 111
Literal-Schreibweise ..................................................... 234
LiveScript ............................................................................. 43
3838.book Seite 1221 Freitag, 8. Juli 2016 3:33 15
Index
1222
localStorage ..................................................................... 638
Location .............................................................. 1129, 1150
assign() ......................................................................... 482
href ................................................................................. 482
reload() ......................................................................... 482
replace() ....................................................................... 482
location ............................................................................. 480
Lokaler Browserspeicher ............................................ 638
Long-Polling .................................................................... 622
Look-and-Feel ................................................................. 863
Loose Augmentation ................................................... 749
Loose Typing ...................................................................... 96
Lower-CamelCase-Schreibweise ................................ 93
M
Map ............................................ 267, 758, 759, 979, 1015
alle Schlüssel-Wert-Paare löschen ..................... 761
einzelne Schlüssel-Wert-Paare löschen ........... 761
Elemente hinzufügen .............................................. 760
Elemente zu Schlüssel ermitteln ........................ 760
map() .................................................................................. 728
Maschinencode ................................................................ 29
Maschinensprache .......................................................... 29
Maskierung ..................................................................... 100
Maskierungszeichen .................................................... 100
Math .......................................................................... 300, 990
Math.acosh() .............................................................. 814
Math.asinh() ............................................................... 814
Math.atanh() .............................................................. 815
Math.cbrt() .................................................................. 815
Math.clz32() ................................................................ 815
Math.cosh() ................................................................. 814
Math.expm1() ............................................................. 814
Math.fround() ............................................................ 815
Math.hypot() .............................................................. 815
Math.imul() ................................................................. 814
Math.log10() ............................................................... 814
Math.log1p() ............................................................... 814
Math.log2() ................................................................. 814
Math.sign() .................................................................. 814
Math.sinh() ................................................................. 814
Math.tanh() ................................................................ 814
Math.trunc() ............................................................... 815
Mausereignis ......................................................... 406, 565
Maximalwert
von Zahlen ..................................................................... 98
MEAN ................................................................................. 855
MEAN-Stack ..................................................................... 855
Media Capture API ........................................................ 895
Mehrdimensionales Array ......................................... 105
Mehrfachauswahlliste ................................................. 450
auslesen ........................................................................ 450
Mehrfachverzweigung ...................................... 135, 136
Member ............................................................................. 246
Memberoperator ........................................................... 246
Mercurial ........................................................................... 958
Method Borrowing ............................................. 328, 344
Methode ............................................................................ 107
Signatur ........................................................................ 167
statische ........................................................................ 719
Methodenaufruf-Stack ........................................ 80, 184
Methodensignatur ........................................................ 167
Microsoft Visual Studio Code ..................................... 58
Middleware ...................................................................... 842
Middleware-Funktion .................................................. 842
Mikrocontroller .............................................................. 915
MIME-Type ......................................................................... 66
Minimalwert
von Zahlen ..................................................................... 98
Minute ermitteln ........................................................... 298
Mobile Anwendung
hybride .......................................................................... 860
native ............................................................................. 857
Mobile Webanwendung ............................................. 858
Mobile Web-App ............................................................ 858
mocha ......................................................................... 43, 952
Mock-Objekt .................................................................... 937
Modifikator ...................................................................... 317
Modul ................................................................................. 758
benannter Export ...................................................... 753
Default-Komponente .............................................. 753
Module Augmentation ............................................... 748
Module-Entwurfsmuster ............................................ 741
Modulo .............................................................................. 112
Modultest ......................................................................... 945
Modus
strikter ............................................................................. 86
Monat ermitteln ............................................................ 298
Monatstag ermitteln .................................................... 298
MongoDB ................................................................ 645, 847
MouseEvent ..................................................................... 408
Multiplikation ................................................................. 112
Multipurpose Internet Mail Extension .................. 66
multi-threaded ............................................................... 671
Multi-Threaded Server ................................................ 817
MutationObserver ..................................................... 1054
MutationRecord .......................................................... 1054
3838.book Seite 1222 Freitag, 8. Juli 2016 3:33 15
Index
1223
N
NamedNodeMap ........................................................ 1056
Namensraum .................................................................. 738
Namespace ....................................................................... 738
Namespace-Entwurfsmuster .................................... 738
NaN ....................................................................................... 98
Native Anwendung ....................................................... 857
Native App ....................................................................... 857
Navigator .................................................. 490, 1129, 1148
navigator .......................................................................... 490
Nebeneffekt ..................................................................... 724
Negationsoperator ....................................................... 115
Nested Namespacing ................................................... 740
NetBeans IDE ..................................................................... 60
Netscape .............................................................................. 43
Netscape Navigator ........................................................ 43
Network Information API .......................................... 895
nextElementSibling ..................................................... 362
nextSibling ....................................................................... 362
Nicht relationale Datenbank .................................... 645
Node ....................................................................... 331, 1057
Node.js
Module .......................................................................... 817
Node.js Package Manager .................................... 820
NPM ............................................................................... 820
Package-Konfigurationsdatei ............................. 825
Packages ...................................................................... 817
Packages erstellen .................................................... 824
Packages global installieren ................................ 822
Packages installieren .............................................. 821
Packages lokal installieren ................................... 821
Packages verwenden ............................................... 823
Node.js Package Manager .......................................... 820
NodeFilter ...................................................................... 1060
NodeIterator ................................................................. 1062
NodeList ......................................................................... 1062
Non-Blocking I/O .......................................................... 818
NonDocumentTypeChildNode ............................ 1063
NonElementParentNode ......................................... 1063
NPM .................................................................................... 820
npm i .................................................................................. 821
npm init ............................................................................ 824
npm install ....................................................................... 821
NPM-Registry .................................................................. 822
null ...................................................................................... 109
Number ................................................................... 979, 987
Nutzerschnittstellenereignis ................................... 415
O
Oberflächenelement ....................................................... 47
Oberklasse ........................................................................ 695
Oberobjekt ....................................................................... 695
Obertyp ............................................................................. 695
Object ........................................................................ 979, 980
Object.create() ........................................................... 697
Object.defineProperties() ...................................... 254
Object.defineProperty() .......................................... 254
Object.freeze() ............................................................ 263
Object.getOwnPropertyDescriptor() ................. 245
Object.getPrototypeOf() ........................................ 237
Object.isExtensible() ................................................ 262
Object.isFrozen() ....................................................... 263
Object.preventExtensions() .................................. 261
Object.seal() ................................................................ 262
Objective-C ...................................................................... 857
Objekt ....................................................................... 107, 690
array-ähnliches ......................................................... 171
Definition .................................................................... 107
einfrieren ..................................................................... 263
Erweiterungen verhindern ................................... 261
globales ........................................................................ 469
iterierbares .................................................................. 774
Verhalten ..................................................................... 233
versiegeln .................................................................... 262
Werte extrahieren .................................................... 804
Zugriff abfangen ...................................................... 779
Zustand ........................................................................ 233
Objekt binden ................................................................. 326
Objekt erstellen
Klassen ......................................................................... 238
Konstruktorfunktionen ......................................... 235
Literal-Schreibweise ................................................ 234
Object.create() ........................................................... 242
Objekt erster Klasse ..................................................... 723
Objektbasierte Programmiersprache ................... 691
Objekt-Destructuring .................................................. 804
Objektdiagramm ........................................................... 690
Objekteigenschaft ......................................................... 107
ausgeben ..................................................................... 258
erstellen über Helfermethoden ........................... 254
erstellen über Klammerschreibweise ............... 254
erstellen über Punktschreibweise ...................... 252
hinzufügen .................................................................. 252
löschen .......................................................................... 256
überschreiben ............................................................ 252
Objektinstanz ................................................................. 690
erzeugen ...................................................................... 712
Objekt-Literal-Schreibweise ..................................... 234
3838.book Seite 1223 Freitag, 8. Juli 2016 3:33 15
Index
1224
Objektmethode .............................................................. 107
ausgeben ..................................................................... 258
erstellen über Helfermethoden ........................... 254
erstellen über Klammerschreibweise ............... 254
erstellen über Punktschreibweise ...................... 252
hinzufügen .................................................................. 252
löschen .......................................................................... 256
überschreiben ............................................................ 252
Objektorientierte Programmierung ... 238, 689, 724
Objektorientierung ...................................................... 689
Grundprinzipien ....................................................... 689
klassenbasierte .......................................................... 692
Klassensyntax ........................................................... 696
prototypisch ...................................................... 692, 696
pseudoklassisch ........................................................ 696
Objektspeicher
Cursor verwenden .................................................... 656
erstellen ........................................................................ 648
Objekte aktualisieren ............................................. 655
Objekte auslesen ....................................................... 652
Objekte hinzufügen ................................................. 649
Objekte löschen ......................................................... 653
ODER-Operator .............................................................. 115
Oktalschreibweise ........................................................... 97
Oktalzahl ............................................................................. 97
onload ................................................................................ 394
onreadystatechange .................................................... 518
OOP ..................................................................................... 689
Operation ............................................................................ 38
Operator ........................................................................... 111
arithmetischer ........................................................... 112
binärer ................................................................. 112, 115
bitweiser ....................................................................... 121
logischer ....................................................................... 115
ternärer ........................................................................ 112
unärer .................................................................. 112, 115
Orientierungsinformationen auslesen ............... 901
P
Package ............................................................................. 738
package.json .................................................................... 825
Eigenschaften ............................................................ 826
Package-Konfigurationsdatei .................................. 825
Parameter ........................................................................ 167
parentElement ............................................................... 354
ParentNode ................................................................... 1064
parentNode ..................................................................... 354
Parsen ................................................................................... 68
Passwortfeld auslesen ................................................. 445
Pattern ............................................................................... 741
Pfad ...................................................................................... 593
PhoneGap ......................................................................... 887
Pointer Lock API .......................................................... 1035
Polling ................................................................................ 622
Polymorph ....................................................................... 695
Polymorphie .......................................................... 690, 695
Polymorphism ................................................................ 695
pop() .................................................................................... 274
PopStateEvent ................................................................. 488
Position .............................................................. 1168, 1170
PositionError .................................................... 1168, 1171
PositionOptions .............................................. 1169, 1171
Preflight-Request ........................................................... 533
Preflight-Response ........................................................ 534
preventDefault() .................................................. 427, 432
previousElementSibling ............................................. 362
previousSibling .............................................................. 362
Private Eigenschaft ....................................................... 248
ProcessingInstruction .............................................. 1065
Programm .......................................................................... 28
natives ............................................................................. 32
Programmablaufplan .................................................... 38
Programmiersprache .............................................. 29, 57
funktionale .................................................................. 724
klassenbasiert ............................................................ 691
kompilierte .................................................................... 30
objektbasiert ............................................................... 691
Programmiersprache, interpretierte ....................... 30
Programmierung
asynchrone .................................................................. 783
ereignisgesteuerte .................................................... 387
funktionale .................................................................. 723
imperative ................................................................... 724
klassenlose ................................................................... 691
objektorientiert ............................................... 689, 724
prototypenbasiert .................................................... 691
prototypische ............................................................. 691
ProgressEvent ................................................................. 663
Promise ........................................................ 788, 979, 1032
prompt() .............................................................................. 75
Prototyp ........................................................ 237, 691, 696
prototype .......................................................................... 237
Prototypenbasierte Programmierung .................. 691
Prototypenkette ................................................... 238, 700
Prototypische Objektorientierung ............... 692, 696
Methoden des Prototyps aufrufen ..................... 702
Methoden überschreiben ....................................... 699
Methoden und Eigenschaften vererben ........... 698
Prototypische Programmierung ............................. 691
Proxy ..................................................... 758, 779, 780, 979
Pseudocode ........................................................................ 41
3838.book Seite 1224 Freitag, 8. Juli 2016 3:33 15
Index
1225
Pseudocode-Technik ...................................................... 37
Pseudoklassische Objektorientierung ........ 696, 703
Methoden und Eigenschaften definieren ....... 704
Objektinstanzen erzeugen .................................... 704
von Objekten ableiten ............................................ 705
Punktschreibweise ....................................................... 245
push() ................................................................................. 269
Pyramid of Doom .......................................................... 787
Q
Quadratische Kurve ..................................................... 595
zeichnen ....................................................................... 595
Quellcode ............................................................................ 30
Quelldatei ........................................................................... 30
Quelltext ............................................................................. 30
anzeigen ......................................................................... 72
anzeigen in Chrome .................................................. 72
anzeigen in Firefox .................................................... 72
anzeigen in Opera ...................................................... 73
anzeigen in Safari ....................................................... 73
automatisiert testen ............................................... 942
querySelector() ............................................................... 348
querySelectorAll() ......................................................... 348
Querystring ......................................................... 480, 1204
Queue ....................................................................... 267, 284
QUnit .................................................................................. 945
R
Radiobutton auslesen ................................................. 447
Range ............................................................................... 1065
RangeError .................................................... 198, 979, 987
Raspberry Pi ..................................................................... 927
readCookie() .................................................................... 634
Read-Eval-Print-Loop ................................................... 820
Realm ................................................................................. 797
Redis ................................................................................... 645
reduce() .............................................................................. 731
reduceRight() .................................................................. 734
Refactoring ...................................................................... 945
ReferenceError ............................................ 199, 979, 987
RegExp ................................................................... 979, 1005
exec() .................................................................... 301, 316
test() ..................................................................... 301, 302
Regulärer Ausdruck
beliebig häufige Vorkommen definieren ........ 312
exakte Anzahl an Vorkommen definieren ..... 313
Gruppen ........................................................................ 318
Mindestanzahl an Vorkommen definieren .... 313
Regulärer Ausdruck (Forts.)
Mindestanzahl und Höchstanzahl an
Vorkommen definieren ..................................... 313
mindestens ein Vorkommen definieren ......... 312
nach bestimmten Zeichenketten suchen ........ 319
optionale Vorkommen definieren ..................... 312
Vorkommen ersetzen ............................................. 319
Relationale Datenbank ............................................... 645
Remote Branch .............................................................. 967
Remote Repository ...................................................... 959
removeAttribute() ........................................................ 384
removeChild() ................................................................ 374
removeEventListener() ............................................... 401
Rendering-Kontext ...................................................... 588
Rendern ............................................................................... 57
REPL .................................................................................... 820
replaceChild() ................................................................. 371
reportValidity() .............................................................. 461
Repository ........................................................................ 957
lokal ............................................................................... 958
remote .......................................................................... 959
requestAnimationFrame() ........................................ 608
reset() ................................................................................. 453
Responsive App ............................................................. 858
Responsive Design .............................................. 858, 859
Responsive Webdesign ............................................... 859
Rest-Operator ................................................................. 112
Rest-Parameter ..................................................... 172, 757
Revealing Module ......................................................... 746
Revealing Module Pattern ......................................... 746
Revealing-Module-Entwurfsmuster ..................... 745
reverse() ............................................................................ 280
RFC3986 ............................................................................ 662
Rich Internet Application ............................................. 44
Routing ............................................................................. 841
RTE ......................................................................................... 33
Rückgabewert ................................................................. 175
mehrere ........................................................................ 177
Runtime Environment .................................................. 33
S
Scaffolding ....................................................................... 937
Scalable Vector Graphics .................................. 587, 609
Schema .............................................................................. 648
Schleife ..................................................................... 126, 142
äußere ........................................................................... 148
fußgesteuerte .................................................... 142, 153
geschachtelte ............................................................. 147
innere ............................................................................ 148
kopfgesteuerte .................................................. 142, 150
3838.book Seite 1225 Freitag, 8. Juli 2016 3:33 15
Index
1226
Schleife (Forts.)
verschachtelte ........................................................... 147
vorzeitig abbrechen ................................................ 155
Schleifeniteration vorzeitig abbrechen ............... 157
Schleifenkörper .................................................... 143, 150
Schlüssel-Wert-Paar ..................................................... 759
Schlüsselwort .................................................................... 88
Schnittstelle .................................................................... 336
Scope-Chain .................................................................... 188
Screen ........................................................ 492, 1129, 1152
Screen Orientation API ............................................... 493
Secure Sockets Layer ................................................... 632
Sekunden ermitteln ..................................................... 298
Sensor ................................................................................ 915
Serialisieren von XML-Daten ................................... 505
Server ................................................................................. 495
Serverseite .......................................................................... 44
Server-Sent Events ................................. 621, 625, 1206
Sessionspeicher ............................................................. 638
sessionStorage ............................................................... 638
Set ............................................... 267, 758, 766, 979, 1018
alle Elemente löschen ............................................. 767
einzelne Elemente löschen ................................... 767
Elemente hinzufügen .............................................. 767
erstellen ........................................................................ 766
set ........................................................................................ 247
setAttributeNode() .............................................. 380, 383
setInterval() ..................................................................... 479
Setter .................................................................................. 247
setTimeout() .................................................................... 479
ShadowRoot .................................................................. 1068
SharedWorker .............................................................. 1204
SharedWorkerGlobalScope ..................................... 1205
shift() .................................................................................. 275
Single Page Application .............................................. 484
Single-Threaded ............................................................ 671
Single-Threaded Server .............................................. 818
slice() .................................................................................. 277
Smartphone .................................................................... 857
Smartwatch ........................................................................ 49
Socket-Verbindung ...................................................... 623
Software ............................................................................... 28
Software-Bibliothek ........................................................ 47
some() ................................................................................ 734
sort() ................................................................................... 280
Source Code ........................................................................ 30
Source File ........................................................................... 30
Sourceverwaltungssystem ........................................... 59
Spies ................................................................................... 937
splice() ...................................................................... 272, 276
Spread-Operator ................................................... 179, 757
Sprungmarke ................................................................... 160
SSL ........................................................................................ 632
Stack .......................................................................... 267, 283
Stack-Trace ......................................................................... 80
Standardvariablen
globale ............................................................................. 91
Standardwert ................................................................... 177
Standardwerte für Parameter ................................... 757
Start-/Stop-Kontrollpunkte ......................................... 38
static .................................................................................... 719
Statische Eigenschaft ................................................... 720
Statische Methode ........................................................ 719
Steuerzeichen ................................................................. 100
Stilsprache .......................................................................... 57
stopPropagation() ......................................................... 427
Storage .................................................................. 638, 1185
StorageEvent ...................................................... 641, 1185
Strict Mode ......................................................................... 86
Strict Typing ...................................................................... 96
String .............................................................. 99, 979, 1000
Aufbau ........................................................................... 290
Länge ermitteln ......................................................... 290
match() .......................................................................... 301
replace() .............................................................. 301, 319
search() .......................................................................... 301
split() .............................................................................. 302
substr() .......................................................................... 296
substring() .................................................................... 296
suchen ........................................................................... 291
Teile extrahieren ....................................................... 294
stringify() ................................................................ 509, 511
String-Konkatenation .................................................. 792
Stringoperator ................................................................ 114
Strong Typing ................................................................... 96
Stub ..................................................................................... 937
Stunde ermitteln ........................................................... 298
Sublime Text ..................................................................... 57
submit() ............................................................................. 453
Subtraktion ...................................................................... 112
Subversion ....................................................................... 957
Suchstring ........................................................... 480, 1204
Sun ......................................................................................... 43
Superklasse ...................................................................... 696
SVG ............................................................................ 587, 609
SVG-Format ........................................................... 587, 609
SVN ...................................................................................... 957
Swift .................................................................................... 857
switch-Verzweigung ..................................................... 136
Symbol .................................................. 758, 796, 979, 985
Symbol.iterator .............................................................. 799
Symbol-Registry ............................................................. 797
3838.book Seite 1226 Freitag, 8. Juli 2016 3:33 15
Index
1227
Syntax .................................................................................. 85
SyntaxError .................................................. 199, 979, 987
Syntaxfehler .................................................................... 193
System Under Test ........................................................ 943
T
Tabellensektionselemente ..................................... 1120
Tablet .................................................................................. 857
Tag-Funktion ................................................................... 795
Tagged Template ........................................................... 795
Target-Phase .................................................................... 419
Task ..................................................................................... 938
Tastaturereignis ................................................... 411, 567
TDD ..................................................................................... 944
Template-String ................................................... 758, 792
Ausdrücke .................................................................... 793
erstellen ........................................................................ 792
mehrzeilig .................................................................... 794
Platzhalter ................................................................... 793
Tessel ........................................................................... 50, 922
LEDs ansteuern .......................................................... 924
Test Anything Protocol ............................................... 955
Test Fixture ...................................................................... 946
Testabdeckung ............................................................... 937
Test-Case ........................................................................... 943
Test-Driven Development ......................................... 944
Testfall ............................................................................... 943
Test-Framework ............................................................... 59
Testgetriebene Entwicklung ..................................... 944
Testprogramm ............................................................... 943
Text .................................................................................. 1068
Text zeichnen ................................................................. 599
text/ecmascript ............................................................... 66
text/javascript .................................................................. 66
textContent ..................................................................... 367
Textfeld auslesen .......................................................... 445
Textknoten ...................................................................... 334
TextMetrics ....................................................... 1173, 1184
Theme ................................................................................ 870
ThemeRoller .................................................................... 870
Theme-Switch ................................................................. 870
this ............................................................................. 186, 189
globale Funktion ....................................................... 191
Konstruktorfunktion ............................................... 191
Objektmethode .......................................................... 191
Thread ................................................................................ 671
throw .................................................................................. 200
Tight Augmentation .................................................... 749
Transaktion ...................................................................... 650
Transformationsmatrix ............................................. 604
Transition ......................................................................... 869
Trap ..................................................................................... 781
TreeWalker ..................................................................... 1069
true ..................................................................................... 102
try ........................................................................................ 197
TypedArray .............................................. 979, 1020, 1025
TypeError ...................................................... 199, 979, 987
typeof ................................................................................. 229
U
UI .................................................................................. 46, 387
UI Component .................................................................. 47
UIEvent ............................................................................. 415
UI-Komponente ........................................................ 47, 75
Uint16Array ........................................................ 980, 1021
Uint32Array ........................................................ 980, 1021
Uint8Array ........................................................... 980, 1021
Uint8ClampedArray ........................................ 980, 1021
UML .................................................................................... 690
undefined ......................................................................... 109
UND-Operator ................................................................ 115
Unidirektionale Kommunikation .......................... 621
Unified Modelling Language .................................... 690
Uniform Resource Identifier .................................... 662
Uniform Resource Locator ............................ 662, 1150
Uniform Resource Name ........................................... 662
Unit-Test ........................................................................... 943
Universal Resource Identifier ................................ 1041
Universal Resource Locator .................................... 1041
Universally Unique Identifier .................................. 897
unshift() ............................................................................ 270
Unterklasse ...................................................................... 695
Unterobjekt ..................................................................... 695
Untertyp ........................................................................... 695
Upper-Camel-Case-Schreibweise ........... 94, 235, 239
URI ........................................................................... 662, 1041
URIError ......................................................... 199, 980, 987
URL .................................................. 662, 1070, 1164, 1167
URLSearchParams ...................................................... 1072
URN ..................................................................................... 662
User Interface ................................................... 46, 47, 387
User Interface Component .......................................... 47
UUID ................................................................................... 897
V
Validierung ......................................................................... 46
nativ .............................................................................. 455
ValidityState ................................................................. 1126
var .......................................................................................... 85
3838.book Seite 1227 Freitag, 8. Juli 2016 3:33 15
Index
1228
Variable ................................................................................ 85
definieren ....................................................................... 85
Variablendeklaration ..................................................... 85
Variableninitialisierung ................................................ 87
Variablenname
aussagekräftige Namen ........................................... 94
bereits vergebener ...................................................... 91
erlaubte Zeichen .......................................................... 92
Groß- und Kleinschreibung ..................................... 93
gültiger ............................................................................ 88
VCS ...................................................................................... 956
dezentral ...................................................................... 957
zentral ........................................................................... 957
Verbindungsinformationen ..................................... 906
Vererbung ..................................................... 260, 690, 694
Vergleichsoperator ....................................................... 122
Verhalten .......................................................................... 690
Verhaltensschicht ............................................................ 55
Verschiebbares Element definieren ...................... 667
Version Control System ............................................. 956
Versionskontrollsystem ............................................ 957
Versionsverwaltung .................................................... 956
Versionsverwaltungssystem .................................... 956
Verzeichnis
Dateien auflisten ...................................................... 837
erstellen ........................................................................ 837
löschen .......................................................................... 837
Verzweigung .......................................................... 126, 128
Videoaufnahme ............................................................. 904
Vielgestaltigkeit ............................................................. 695
W
W3C ............................................................................ 336, 620
Weak Map ......................................................................... 764
Weak Set ........................................................................... 770
WeakMap ........................................... 758, 764, 980, 1017
WeakSet ............................................. 758, 770, 980, 1019
Wearables ............................................................................ 49
Web der Dinge ................................................................... 49
Web Hypertext Application Technology
Working Group ......................................................... 620
Web of Things .......................................................... 49, 915
Web Socket API ........................................ 621, 623, 1199
Web Storage API ................................................ 638, 1184
Web Worker API ............................................................ 672
Webanwendung ............................................................... 44
WebGL ............................................................................... 588
WebGLRenderingContext ......................................... 589
Webseite .............................................................................. 44
drucken ......................................................................... 477
Webseite (Forts.)
nach Text suchen ...................................................... 477
Website ................................................................................ 44
WebSocket ..................................................................... 1199
WebStorm ........................................................................... 60
Web-View ................................................................ 860, 887
Wert in Variablen speichern ....................................... 85
Wertebereich von Zahlen ............................................. 98
Wertzuweisung ................................................................ 87
WHATWG .......................................................................... 620
while-Schleife .................................................................. 150
Widget ...................................................................... 500, 863
Wiederholung ................................................................. 126
Window .......................................................................... 1129
window .............................................................................. 467
WindowEventHandlers ............................................ 1081
Windows Mobile .............................................................. 48
Wochentag ermitteln ................................................... 298
Worker ............................................................................ 1201
WorkerGlobalScope ................................................... 1202
WorkerLocation .......................................................... 1203
WorkerNavigator ........................................................ 1204
World Wide Web Consortium ........................ 336, 620
Wrapperobjekt ................................................................ 301
writable .............................................................................. 243
Wurzelknoten ................................................................. 333
X
Xcode .................................................................................. 892
XML ..................................................................................... 501
parsen ............................................................................ 504
serialisieren ................................................................. 505
XMLDocument ............................................................ 1073
XMLHttpRequest .............................................. 512, 1158
XML-Objekt in Zeichenketten umwandeln ........ 505
XML-Schema ................................................................... 501
XMLSerializer .................................................................. 505
Y
yield ..................................................................................... 776
Z
Zahl ........................................................................................ 96
Definition von .............................................................. 97
Wertebereich ................................................................. 98
Zählervariable ................................................................. 142
Zählschleife ...................................................................... 142
Zeichenfläche ..................................................... 587, 1172
3838.book Seite 1228 Freitag, 8. Juli 2016 3:33 15
Index
1229
Zeichenkette ............................................................. 99, 114
Aufbau .......................................................................... 290
Ausdrücke .................................................................... 793
Definition ....................................................................... 99
in XML-Objekte umwandeln ................................ 504
Länge ermitteln ......................................................... 290
Maskierung ................................................................... 99
mehrzeilig .................................................................... 794
nach Vorkommen suchen ..................................... 320
Platzhalter ................................................................... 793
suchen ........................................................................... 291
Teile extrahieren ....................................................... 294
zerteilen ........................................................................ 321
Zeichenklasse ................................................................. 305
Bereich .......................................................................... 306
einfache Klasse .......................................................... 306
Negation ...................................................................... 306
vordefinierte ............................................................... 307
Zeit ermitteln ................................................................. 298
Zugriffseigenschaft ................................... 243, 250, 703
Zugriffsmethode ........................................................... 693
Zustand ............................................................................. 690
Zustandsloses Protokoll ............................................. 630
Zuweisungsoperator ............................................. 87, 113
Zweidimensionales Array ......................................... 105
Zwischenspeicher ............................................................ 85
Zwischensprache .............................................................. 30
3838.book Seite 1229 Freitag, 8. Juli 2016 3:33 15
Wissen, wie’s geht.
Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel-lung von der E-Book-Fassung des vorgestellten Buches abweichen können. Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nut-zungs- und Verwertungsrechte liegen beim Autor und beim Verlag.
Teilen Sie Ihre Leseerfahrung mit uns!
Philip Ackermann
JavaScript – Das umfassende Handbuch1.229 Seiten, gebunden, Juli 2016 49,90 Euro, ISBN 978-3-8362-3838-0
www.rheinwerk-verlag.de/3900
Philip Ackermann ist Master of Science in Computer Science. Am Fraunhofer-Institut für Angewandte Informa-tionstechnologie FIT arbeitet er als Software-Entwickler an Tools zum teilautomatisierten Testen von Web Com-pliance, z. B. der Barrierefreiheit von Webseiten. Wissen-schaftlich befasst er sich außerdem mit der modellbasier-ten Simulation und Evaluierung von mobilen und Web 2.0-Anwendungen.
Wissen, wie’s geht.Wissen, wie’s geht.
Top Related