JavaScript – Das umfassende Handbuch · PDF file53 2 Kapitel 2 Erste Schritte Nach wie...

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.

https://www.rheinwerk-verlag.de/javascript_3900/?GPP=lpn

mailto:?body=Leseproben-Empfehlung:%20%C2%BBJavaScript%20%E2%80%93%20Das%20umfassende%20Handbuch%C2%AB%20von%20Rheinwerk,%20http://gxmedia.galileo-press.de/leseproben/3900/leseprobe_rheinwerk_javascript_handbuch.pdf&subject=Leseprobe:%20%C2%BBJavaScript%20%E2%80%93%20Das%20umfassende%20Handbuch%C2%AB

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 ...



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


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



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),


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



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.)


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


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


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).


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

... ...



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.



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"



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.



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


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.


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


per Klasse selektieren«

getElementsBy-TagName()

Wählt alle Elemente mit

dem angegebenen Ele-

mentnamen aus.

Liste von

Elementen


nach Elementnamen

selektieren«

getElementsBy-Name()

Wählt Elemente anhand

ihres Namens aus.

Liste von

Elementen


nach Namen selektieren«

querySelec-tor()

Gibt das erste Element

zurück, das auf einen

gegebenen CSS-Selektor

passt.

einzelnes

Element


per Selektor selektieren«

querySelector-All()

Gibt alle Elemente zurück,

die auf einen gegebenen

CSS-Selektor passen.

Liste von

Elementen


per Selektor selektieren«

Tabelle 5.2 Die verschiedenen Methoden und Eigenschaften für das Auswählen von

Elementen



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


Elternelement eines


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


Geschwisterelemente

eines Elements

selektieren«

nextElement-Sibling

Gibt für einen Knoten das

nachfolgende Geschwis-

terelement zurück.

einzelnes

Element


Geschwisterelemente

eines Elements

selektieren«

nextSibling Gibt für einen Knoten den

nachfolgenden Geschwis-

terknoten zurück.

einzelner

Knoten


Geschwisterelemente

eines Elements

selektieren«

firstElement-Child

Gibt für einen Knoten

das erste Kindelement

zurück.

einzelnes

Element


Kindelemente eines


firstChild Gibt für einen Knoten

den ersten Kindknoten

zurück.

einzelner

Knoten


Kindelemente eines


lastElement-Child

Gibt für einen Knoten

das letzte Kindelement

zurück.

einzelnes

Element


Kindelemente eines


Eigenschaft/Methode



Elementen (Forts.)



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


Kindelemente eines


childNodes Gibt für einen Knoten alle

Kindknoten zurück.

Liste von

Knoten


Kindelemente eines


children Gibt für einen Knoten alle

Kindelemente zurück.

Liste von

Elementen


Kindelemente eines


Eigenschaft/Methode



Elementen (Forts.)



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"



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



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"



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.



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



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



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.



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



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"



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



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



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.



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



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


Tabelle 5.3 Die verschiedenen Selektoren in CSS3 (Forts.)



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


Tabelle 5.3 Die verschiedenen Selektoren in CSS3 (Forts.)



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



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


nextElementSibling

lastElementChild

previousElementSibling


previousSibling

nextSibling

previousSibling

nextSibling

previousSibling

firstChild

nextSibling


nextSibling

lastChild

previousSibling



parentNode

parentElement html

body



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

...



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

...



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.



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



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

...



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

...



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

...



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');



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"



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



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.


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.


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.


erstellen und hinzufügen«

removeChild() Mit dieser Methode können Sie Kno-

ten aus dem DOM-Baum entfernen.


und Knoten entfernen«

Eigenschaft/Methode Beschreibung Abschnitt

Tabelle 5.5 Die verschiedenen Methoden und Eigenschaften für das Verändern von

Elementen (Forts.)



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.



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.



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.



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.



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)



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

[email protected]

8

10

11 12 13

14



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()«



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



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.)



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




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




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




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«).



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.



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.



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';



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.


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.



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().


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


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



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


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


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


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


Inhalt

9

4.7.2 Funktionen als Rückgabewert verwenden .................................................................. 324

4.7.3 Standardmethoden jeder Funktion ............................................................................... 326


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



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


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


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


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



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


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


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


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



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


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.10 Übersicht über verschiedene Web-APIs .................................................................................... 683


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


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


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


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


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


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


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


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


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


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


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.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.17 Eine Anwendung bauen ..................................................................................................... 913


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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 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


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


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


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


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


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


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


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


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


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.

http://twitter.com/rheinwerkverlag

https://plus.google.com/118435207805510651040

https://www.facebook.com/rheinwerkverlag

https://www.rheinwerk-verlag.de/javascript_3900/?GPP=lpn

Date post:	06-Mar-2018
Category:	Documents
Upload:	doantruc
View:	228 times
Download:	10 times

JavaScript – Das umfassende Handbuch · PDF file53 2 Kapitel 2 Erste Schritte Nach wie...

Documents