Einstieg in JavaScript - Amazon S3€¦ · Die weitverbreiteten Bibliothek en jQuery (siehe Kapitel...
Transcript of Einstieg in JavaScript - Amazon S3€¦ · Die weitverbreiteten Bibliothek en jQuery (siehe Kapitel...
LeseprobeMit JavaScript entwickeln Sie dynamische Websites. Erfahren Sie in dieser Leseprobe, wofür Sie JavaScript einsetzen können und wie Sie eigene Objekte mit Hilfe von Prototypen und Konstruktorfunktionen erstellen. Anschließend erhalten Sie einen Überblick über das DOM und eine Einführung in jQuery. Außerdem können Sie einen Blick ins komplette Inhalts- und Stichwortverzeichnis werfen.
Thomas Theis
Einstieg in JavaScript478 Seiten, broschiert, 2. Auflage 2016 24,90 Euro, ISBN 978-3-8362-4074-1
www.rheinwerk-verlag.de/4087
»Einführung« »Eigene Objekte« »Das Document Object Model (DOM)« »jQuery«
Inhaltsverzeichnis
Index
Der Autor
Leseprobe weiterempfehlen
Know-how für Kreative.Wissen, wie’s geht.
15
1Kapitel 1
Einführung
Was ist JavaScript? Was kann ich damit machen und was nicht?
Wie baue ich es in meine Internetseite ein? In diesem Kapitel
werden erste Fragen geklärt.
JavaScript ist eine objektorientierte Programmiersprache. Sie wurde 1995 erstmals
entworfen und wird seitdem ständig aktuell gehalten, zuletzt mithilfe des Standards
ECMAScript 2015. Die Sprache wurde für den Einsatz in Internet-Browsern entworfen.
Das ist auch das Thema dieses Einsteigerbuchs. JavaScript wird aber mittlerweile auch
außerhalb von Internetseiten eingesetzt. Trotz Ähnlichkeit in einzelnen Aspekten:
JavaScript und die ebenfalls weit verbreitete Programmiersprache Java müssen klar
voneinander unterschieden werden.
JavaScript gehört zu den Interpretersprachen. Das bedeutet: JavaScript-Programme
werden Zeile für Zeile übersetzt und ausgeführt. Die Sprache bietet viele Elemente, die
aus anderen Programmiersprachen bekannt sind, wie zum Beispiel Schleifen zur
schnellen Wiederholung von Programmteilen, Verzweigungen zur unterschiedlichen
Behandlung verschiedener Situationen und Funktionen zur Zerlegung eines Pro-
gramms in übersichtliche Bestandteile. Außerdem haben Sie mit Hilfe von Objekten
und dem Document Object Model (DOM) Zugriff auf alle Elemente Ihrer Internetseiten,
so dass Sie sie dynamisch verändern können.
1.1 Was mache ich mit JavaScript?
Die Programme werden den Benutzern gemeinsam mit HTML-Code innerhalb von In-
ternetseiten zur Verfügung gestellt. Sie werden auf dem Browser des Benutzers ausge-
führt und können die Inhalte einer Internetseite dynamisch verändern. Dies ge-
schieht entweder sofort nach dem Laden der Internetseite oder nach dem Eintreten
eines Ereignisses, zum Beispiel der Betätigung einer Schaltfläche (englisch: button)
durch den Benutzer. JavaScript ermöglicht den Entwurf komplexer Anwendungen
mit einer Benutzeroberfläche.
4074.book Seite 15 Mittwoch, 3. Februar 2016 4:12 16
1 Einführung
16
JavaScript wurde entworfen, um dem Benutzer zusätzliche Möglichkeiten und Hilfen zu
bieten, die er allein mit HTML nicht hat.
Sie sollten diese Möglichkeiten nicht dazu nutzen, den Benutzer in irgendeiner Form
einzuschränken. Er wird sich zum Beispiel ärgern, wenn er beim Surfen auf eine Inter-
netseite geleitet wird, die ihm den Schritt zurück auf die Vorgängerseite verwehrt, weil
der Entwickler der Seite mit Hilfe von JavaScript die Liste der bisher besuchten Seiten
gelöscht hat. Nach dieser Erfahrung wird er sich hüten, diese Website jemals wieder auf-
zusuchen.
Formulare spielen im Zusammenhang mit JavaScript eine wichtige Rolle. Zum einen
dienen sie der Übermittlung von Daten an einen Webserver. Vor dem Absenden kön-
nen ihre Inhalte durch JavaScript auf Gültigkeit hin überprüft werden. Auf diese Weise
wird unnötiger Netzverkehr vermieden. Zum anderen ermöglichen Formulare eine In-
teraktion mit dem Benutzer, ähnlich wie er dies von anderen Anwendungen auf seinem
Rechner gewohnt ist. Er kann Eingaben vornehmen und eine Verarbeitung auslösen.
Das Programm liefert ihm anschließend ein Ergebnis.
1.2 Was kann JavaScript nicht?
JavaScript kann sich selbst nicht einschalten. Es wird leider immer einzelne Benutzer
geben, die aus Gründen der Vorsicht JavaScript in ihrem Browser ausgeschaltet haben.
Allerdings ist der Anteil an Internetseiten, die diese Benutzer dann nicht mehr richtig
betrachten können, recht hoch. Wir können aber zumindest erkennen, ob JavaScript
eingeschaltet ist oder nicht, und entsprechend reagieren, siehe Abschnitt 1.12, »Kein
JavaScript möglich«.
JavaScript kann (ohne Zusätze) nichts auf dem Webserver speichern. JavaScript-Pro-
gramme werden im Browser des Benutzers ausgeführt und nicht auf dem Webserver,
von dem sie geladen werden. Daher ist es zum Beispiel nicht möglich, Daten auf dem
Webserver speichern.
JavaScript kann nur wenige Daten auf dem Endgerät des Benutzers speichern. Es kann
dort keine Schäden verursachen. Ein Zugriff auf Daten des Benutzers auf seiner Festplat-
te ist nur in geringem Umfang, in einem eingeschränkten Bereich und mit Zustimmung
des Benutzers möglich. Beispiele dazu sehen Sie in Kapitel 15.
4074.book Seite 16 Mittwoch, 3. Februar 2016 4:12 16
1.5 Aufbau des Buchs
17
11.3 Browser und mobile Browser
Internetseiten mit JavaScript werden von unterschiedlichen Browsern unter verschie-
denen Betriebssystemen auf unterschiedlichen Endgeräten empfangen und für den Be-
nutzer umgesetzt.
Manche JavaScript-Anweisung kann für bestimmte Browser eventuell kompakter for-
muliert werden. Ich empfehle allerdings, immer die Standardformulierung zu benutzen,
damit die Anweisungen für möglichst viele Browser geeignet sind. Dieser Grundsatz gilt
auch für die Beispielprogramme in diesem Buch.
Der Anteil an mobilen Endgeräten mit den dafür zugeschnittenen mobilen Browsern
wird immer größer. Mobilgeräte bieten einige zusätzliche Möglichkeiten, wie zum Bei-
spiel Empfänger bzw. Sensoren für Standortdaten, Lage und Beschleunigung des Mobil-
geräts. Die dabei ermittelten Daten können von JavaScript weiterverarbeitet werden,
siehe Abschnitt 17.11 und folgende.
1.4 ECMAScript
JavaScript basiert auf ECMAScript. ECMAScript 2015, auch unter den Namen ECMAScript 6
oder Harmony bekannt, ist seit Juni 2015 von der Normungsorganisation Ecma Inter-
national standardisiert. Aktuell (im Dezember 2015) setzen die verschiedenen Brow-
ser den Vorgängerstandard ECMAScript 5.1 recht vollständig und den neuen Standard
ECMAScript 2015 in geringerem, unterschiedlichem Maße um.
In diesem Buch nutze ich bereits einige Elemente aus ECMAScript 2015, die von vielen
Browsern umgesetzt werden. Ich weise jeweils gesondert darauf hin. Erfahrungsgemäß
beinhalten Standards auch Elemente, die sich nicht durchsetzen können, daher nur in
wenigen Browsern nutzbar sind und in zukünftigen Standards nicht mehr berücksich-
tigt werden.
1.5 Aufbau des Buchs
Zunächst eine Anmerkung in eigener Sache: Für die Hilfe bei der Erstellung dieses Bu-
ches bedanke ich mich beim Team vom Rheinwerk Verlag, besonders bei Anne Scheibe,
Ernst H. Pröfener und dem Fachgutachter der ersten Auflage Kai Günster.
Die Themen in diesem Buch stelle ich jeweils mit einer kurzen Beschreibung der Theo-
rie, einem aussagefähigen Screenshot, einem vollständigen, lauffähigen Beispielpro-
4074.book Seite 17 Mittwoch, 3. Februar 2016 4:12 16
1 Einführung
18
gramm und einer ausführlichen praktischen Erläuterung vor. Übrigens: Die meisten
Screenshots sind im Browser Mozilla Firefox 42 unter Windows 10 entstanden.
Auf diese Weise haben Sie einen raschen Einstieg in jedes Thema. Sie sind nicht gezwun-
gen, vereinzelte Codezeilen zunächst in einen passenden Kontext zu setzen, um ihre
Wirkung zu betrachten. Sie finden alle Beispielprogramme im Downloadpaket zum
Buch, das Sie über www.rheinwerk-verlag.de/4087 erreichen.
Die Inhalte des Buchs bauen normalerweise in kleinen, übersichtlichen Schritten auf-
einander auf. Dies hat den Vorteil, dass die Voraussetzungen zu jedem Thema vorher ge-
klärt sind. Es hat allerdings den Nachteil, dass Sie das Buch tatsächlich von vorn nach
hinten lesen sollten. Falls Sie es einfach an einer beliebigen Stelle aufschlagen, können
Sie nicht davon ausgehen, dass hier alle Einzelheiten erklärt werden. Dies ist eventuell
in einem früheren Abschnitt geschehen.
Nach der Einleitung in diesem Kapitel 1 folgen die Grundlagen der Programmierung in
Kapitel 2. Hier zeigen sich Ähnlichkeiten mit vielen anderen Programmiersprachen. Ob-
jekte spielen in JavaScript eine große Rolle. Sie erschaffen in Kapitel 3 eigene Objekte
und lernen auf diese Weise ihren Aufbau kennen. In den Kapiteln 6, »Standardobjekte
nutzen«, und 7, »Browserobjekte nutzen«, erläutere ich Ihnen die vielen vordefinierten
Objekte von JavaScript.
Zur Interaktion mit dem Benutzer wird mit Ereignissen und ihren Folgen gearbeitet, sie-
he Kapitel 4. Die Kenntnis des Aufbaus einer Internetseite nach dem Document Object
Model (DOM, siehe Kapitel 5) ermöglicht Ihnen, auf beliebige Stellen im Dokument zu-
zugreifen und sie zu verändern.
Die Ajax-Technologie (siehe Kapitel 8) ermöglicht Ihnen unter anderem den Austausch
einzelner Teile eines Dokuments, ohne eine Seite vollständig neu laden zu müssen.
JavaScript erweitert die Möglichkeiten der Formatierung und Positionierung von CSS
durch dynamische Veränderungen bis hin zur Animation, siehe Kapitel 9.
Die weitverbreiteten Bibliotheken jQuery (siehe Kapitel 12) und jQuery UI (siehe Kapi-
tel 13) bieten einen browserunabhängigen, komfortablen Zugriff auf viele Möglichkei-
ten von JavaScript. jQuery mobile (siehe Kapitel 14) dient speziell zur Programmierung
mobiler Endgeräte.
Cookies (siehe Kapitel 15) bieten einen Zugriff auf Daten des Benutzers, allerdings nur in
geringem Umfang und in einem eingeschränkten Bereich. In Kapitel 16 verweise ich auf
eine Reihe von größeren, ausführlich kommentierten Beispielprojekten, bei denen das
Zusammenspiel vieler Elemente gezeigt wird. Einige zusätzliche Möglichkeiten von
HTML5 im Zusammenhang mit JavaScript erläutere ich in Kapitel 17.
4074.book Seite 18 Mittwoch, 3. Februar 2016 4:12 16
1.7 Eine erste HTML-Datei
19
11.6 Einrichten der Arbeitsumgebung
Zum Schreiben Ihrer Programme genügt ein Texteditor, der die Markierungen von
HTML und die Schlüsselwörter von JavaScript hervorheben kann. Dieses Verhalten er-
leichtert Ihnen die Programmierung sehr. Der Editor Notepad++ ist einer von vielen
Editoren, der das beherrscht.
Zum Testen Ihrer Programme empfiehlt sich die Nutzung möglichst vieler Browser un-
ter unterschiedlichen Betriebssystemen auf verschiedenen Geräten. Es kann nicht scha-
den, die Programme auch auf älteren Rechnern zu testen, auf denen ältere Versionen
der aktuellen Browser laufen.
1.7 Eine erste HTML-Datei
Es werden nur wenige HTML-Kenntnisse zum Erlernen von JavaScript vorausgesetzt.
Einige wichtige Markierungen habe ich im folgenden Beispiel zusammengestellt:
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>Das ist der Titel</title>
</head><body>
<p>Ein Absatz mit Zeilenumbrüchen<br>Zweite Zeile<br>Dritte Zeile</p>
<p>Ein <a href="einbetten.htm">Hyperlink</a></p><p>Ein Bild: <img src="im_paradies.jpg" alt="Paradies"></p>
<p>Eine Liste:</p><ul>
<li>Erster Eintrag</li><li>Zweiter Eintrag</li>
</ul>
<p>Eine Tabelle:</p><table border="1">
<tr><td>Zelle A</td><td>Zelle B</td>
4074.book Seite 19 Mittwoch, 3. Februar 2016 4:12 16
1 Einführung
20
</tr><tr>
<td>Zelle C</td><td>Zelle D</td>
</tr></table>
</body></html>
Listing 1.1 Datei »erste.htm«
Mithilfe von <!DOCTYPE html> wird festgelegt, dass es sich um ein HTML-Dokument han-
delt. Je mehr Sie sich an die einheitlichen Definitionen für HTML-Dokumente halten,
desto höher ist die Wahrscheinlichkeit, dass die Seite in allen Browsern fehlerfrei darge-
stellt wird. Sie können Ihre Seiten über http://validator.w3.org validieren lassen, also auf
Übereinstimmung mit der Definition prüfen lassen.
Ein HTML-Dokument besteht aus Markierungen (auch Tags genannt) und Text. Die
meisten Markierungen bilden einen Container (= Behälter). Das gesamte Dokument
steht im html-Container, von der Start-Markierung <html> bis zur End-Markierung </html>.
Darin liegen nacheinander ein head-Container mit Informationen über das Dokument
und ein body-Container mit dem eigentlichen Dokumentinhalt.
Im head-Container finden Sie einen title-Container, der den Inhalt für die Titelleiste des
Browsers bereitstellt. Außerdem stehen hier Metadaten über das Dokument. Im vorlie-
genden Beispiel sehen Sie, dass es sich um ein HTML-Dokument handelt, das den weit
verbreiteten Zeichensatz UTF-8 nutzt, siehe Abschnitt 1.7.1. Er enthält viele Sonderzei-
chen, zum Beispiel auch die deutschen Umlaute.
Absätze stehen in p-Containern. Ein einzelner Zeilenumbruch innerhalb eines Absatzes
wird mit Hilfe der Markierung <br> gebildet.
Ein anklickbarer Hyperlink zu einem anderen Dokument steht in einem a-Container
mit dem Attribut href. Der Wert eines Attributs steht in Anführungsstrichen. Ein Bild
kann mit Hilfe der img-Markierung und dem Attribut src eingebunden werden. Das
Attribut alt ist für die Validierung erforderlich. Es enthält einen erläuternden Text für
den Fall, dass die Bilddatei nicht geladen werden kann.
Eine nicht nummerierte Liste steht in einem ul-Container, die einzelnen Listeneinträge
stehen in li-Containern.
Eine Tabelle wird mit Hilfe eines table-Containers erstellt. Falls das (hier ausnahms-
weise genutzte) Attribut border den Wert 1 hat, dann ist ein Rahmen sichtbar. Norma-
4074.book Seite 20 Mittwoch, 3. Februar 2016 4:12 16
1.7 Eine erste HTML-Datei
21
1lerweise werden Rahmeneigenschaften mithilfe von CSS (= Cascading Style Sheets)
eingestellt. Mehr zu CSS in Kapitel 9. Innerhalb der Tabelle gibt es einzelne Zeilen; die-
se werden jeweils mit Hilfe eines tr-Containers erstellt. Innerhalb einer Zeile wiede-
rum gibt es einzelne Zellen, die jeweils durch einen td-Container gebildet werden.
In Abbildung 1.1 sehen Sie das Dokument im Browser.
Abbildung 1.1 Erstes HTML-Dokument im Browser
Die Datei erste.htm wird mit Hilfe des Editors Notepad++ erstellt und auf meinem Win-
dows-PC im Verzeichnis C:/js gespeichert. Sie können die Dateien auf Ihrem Rechner
aber in jedem beliebigen Verzeichnis ablegen. Zur Darstellung der htm-Datei (oder html-
Datei) in Ihrem Standardbrowser öffnen Sie den Windows-Explorer und führen Sie
einen Doppelklick auf die htm-Datei aus.
Weitere HTML-Markierungen werde ich an der passenden Stelle erläutern. Auf einige
zusätzliche Möglichkeiten von HTML5 gehe ich in Kapitel 17 ein.
1.7.1 Die Codierung UTF-8
In allen Dokumenten dieses Buchs wird die Codierung UTF-8 verwendet. UTF-8 steht ab-
kürzend für das 8-Bit UCS Transformation Format. UCS steht abkürzend für Universal
Character Set. UTF-8 ist die am weitesten verbreitete Codierung für Unicode-Zeichen.
4074.book Seite 21 Mittwoch, 3. Februar 2016 4:12 16
1 Einführung
22
Es ist wichtig, dass die Codierung, die im head-Container angegeben ist, mit der Codie-
rung der Datei übereinstimmt. Sie können, falls noch nicht geschehen, die Codierung
einer Datei im Editor Notepad++ wie folgt auf UTF-8 umstellen: Menü Kodierung •
Konvertiere zu UTF-8. Anschließend ist in diesem Menü auch die Codierung UTF-8
markiert.
Sie können die Codierung im Editor Notepad++ wie folgt auch automatisch für alle Da-
teien wählen, die Sie neu erstellen: Menü Einstellungen • Optionen • Neue Dateien •
Kodierung • UTF-8, Schaltfläche Schließen.
1.8 Einige Sonderzeichen
Das folgende Programm dient zur Ausgabe einiger Sonderzeichen. Einige davon kön-
nen Sie auch direkt über die Tastatur eingeben. Alle Sonderzeichen können mithilfe von
sogenannten Entities ausgegeben werden. Es folgt das Programm:
...<body>
<p>Einige Sonderzeichen der Tastatur: > & € @<br>dazu auch die Entity: > & € @<br>Einige weitere Sonderzeichen: © ® ‰
¼ ½ ¾ ² ³ µ π<br>Das Zeichen < wird nur als Entity validiert</p>
</body></html>
Listing 1.2 Datei »sonderzeichen.htm«
Ein Hinweis: In diesem Beispiel und in vielen folgenden Beispielen wird aus Platzgrün-
den der Beginn des Dokuments weggelassen. Er wird nur dann vollständig abgedruckt,
wenn er neben den Standardangaben DOCTYPE, charset und title weitere Angaben ent-
hält. Zudem wird das Ende des Dokuments kompakter dargestellt.
Die Sonderzeichen in der ersten Zeile können Sie direkt über die Tastatur in Ihr Doku-
ment einfügen: > (größer), & (Kaufmanns-Und), € (Euro) und @ (at).
Zu vielen Sonderzeichen gibt es sogenannte Entities. Entities ermöglichen Ihnen, auch
diejenigen Zeichen im Browser auszugeben, die sich nicht auf ihrer Tastatur befinden.
Zunächst folgen in der zweiten Zeile die Entities für >, &, € und @: >, &, €
und @. Eine Entity beginnt mit dem Zeichen & und endet mit einem Semikolon.
In der dritten Zeile folgen die Entities für © (copyright), ® (registered trademark = ein-
getragenes Warenzeichen), ‰ (Promille), ¼ (ein Viertel), ½ (ein Halb), ¾ (drei Viertel),
4074.book Seite 22 Mittwoch, 3. Februar 2016 4:12 16
1.9 JavaScript innerhalb einer HTML-Datei
23
1² (hoch 2), ³ (hoch 3), µ (mikro) und π (Pi): ©, ®, ‰, ¼, ½,
¾, ², ³, µ und π.
Das Zeichen < (kleiner) in der vierten Zeile sollten Sie mithilfe der Entity < ausgeben,
ansonsten wird das zugehörige Dokument nicht als gültiges HTML-Dokument validiert.
In Abbildung 1.2 sehen Sie das Dokument im Browser.
Abbildung 1.2 Einige Sonderzeichen
1.9 JavaScript innerhalb einer HTML-Datei
Nun geht es aber endlich los mit dem ersten JavaScript-Programm. Betrachten Sie zu-
nächst den folgenden Code:
<!DOCTYPE html><html><head>
<meta charset="utf-8"><title>JavaScript einbetten</title>
</head><body>
<p>Es folgt der erste Teil des body:</p><script>
document.write("<p>Das steht im ersten Teil</p>");</script><p>Es folgt der nächste Teil des body:</p><script>
document.write("<p>Das steht im zweiten Teil<br>");document.write("Das ist die nächste Zeile aus dem body</p>");
</script></body></html>
Listing 1.3 Datei »einbetten.htm«
4074.book Seite 23 Mittwoch, 3. Februar 2016 4:12 16
1 Einführung
24
Sie können JavaScript an beliebig vielen Stellen im head oder im body eines HTML-
Dokuments einbetten. Es wird jeweils ein script-Container benötigt. Dieser beginnt
mit <script> und endet mit </script>. Innerhalb des Containers stehen JavaScript-
Anweisungen, die der Reihe nach ausgeführt werden. Jede Anweisung sollte mit einem
Semikolon abgeschlossen werden. In HTML vor Version 5 war es notwendig, den
script-Container wie folgt zu beginnen:
<script type="text/javascript">
Bei document.write() handelt es sich um eine Methode des document-Objekts. Objekte
erläutere ich in Kapitel 3 in aller Ausführlichkeit. An dieser Stelle soll genügen, dass Sie
sowohl Text als auch HTML-Markierungen mit Hilfe der Methode document.write() in
einem Dokument ausgeben können, und zwar innerhalb von Anführungszeichen.
Einige Hinweise:
� Halten Sie sich beim Programmieren an die richtige Schreibweise der Anweisungen.
Die Browser verzeihen in JavaScript wenige Fehler, anders als in HTML.
� JavaScript unterscheidet zwischen Groß- und Kleinschreibung. Mit der Anweisung
document.Write(...) werden Sie keinen Erfolg haben, da es die Methode Write() mit
großem Anfangsbuchstaben W nicht gibt.
� Sie können auch mehrere Anweisungen in eine Zeile schreiben. Hauptsache, es steht
ein Semikolon am Ende jeder Anweisung.
In Abbildung 1.3 sehen Sie einige Zeilen, die teilweise aus dem HTML-Bereich, teilweise
aus den beiden JavaScript-Bereichen stammen.
Abbildung 1.3 JavaScript innerhalb einer Datei
4074.book Seite 24 Mittwoch, 3. Februar 2016 4:12 16
1.10 JavaScript aus externer Datei
25
11.10 JavaScript aus externer Datei
Sie können Programmteile, die Sie in mehreren JavaScript-Programmen nutzen möch-
ten, in einer externen Datei speichern. Auf den Code einer solchen externen Datei kön-
nen Sie leicht zugreifen, indem Sie die Datei in Ihr Programm einbinden. Es folgt ein
Beispiel:
...<body>
<script src="externe_datei.js"></script><script>
document.write("<p>Das kommt aus extern.htm</p>");</script>
</body></html>
Listing 1.4 Datei »extern.htm«
Der erste script-Container ist leer. Allerdings wird das Attribut src mit dem Wert
externe_datei.js notiert. Der Code aus der betreffenden Datei wird in die Datei
extern.htm eingebunden. In der Datei externe_datei.js steht der folgende Code:
document.write("<p>Das kommt aus externe_datei.js</p>");
Listing 1.5 Datei »externe_datei.js«
In Abbildung 1.4 sehen Sie die beiden Absätze, die jeweils mit Hilfe der Methode
document.write() aus dem zusammengefügten Programm erzeugt werden.
Abbildung 1.4 Zusätzliches JavaScript aus externer Datei
Beachten Sie, dass in der externen Datei kein script-Container steht. Der Name dieser
Datei kann eine beliebige Endung haben. Als Konvention hat sich die Endung js einge-
bürgert.
4074.book Seite 25 Mittwoch, 3. Februar 2016 4:12 16
1 Einführung
26
Auf die genannte Weise werden die Bibliothek jQuery (siehe Kapitel 12) und andere
große JavaScript-Bibliotheken mit ihren vielen nützlichen Funktionen in Anwendun-
gen eingebunden.
1.11 Kommentare
Kommentare dienen zur Beschreibung der einzelnen Teile Ihrer Programme. Sie er-
leichtern Ihnen und anderen den Einstieg in ein vorhandenes Programm. Betrachten
wir ein Beispiel:
...<body>
<!-- Das ist ein Kommentarim HTML-Bereich -->
<p>Ein Absatz aus dem HTML-Bereich</p><script>
/* Das ist ein Kommentar über mehrere Zeilenim JavaScript-Bereich */
document.write("<p>Ein Absatz aus dem JS-Bereich</p>");// Ein kurzer Kommentar, nur bis zum Zeilenende
</script></body></html>
Listing 1.6 Datei »kommentar.htm«
Im Beispiel sehen Sie drei verschiedene Arten von Kommentaren:
� Ein Kommentar im HTML-Bereich kann sich über eine oder mehrere Zeilen erstre-
cken. Er steht zwischen den Zeichenfolgen <!-- und -->.
� Im JavaScript-Bereich wird ein Kommentar, der über eine oder mehrere Zeilen geht,
zwischen den Zeichenfolgen /* und */ notiert.
� Falls Sie nur einen kurzen Kommentar im JavaScript-Bereich notieren möchten, zum
Beispiel hinter einer Anweisung, so eignet sich die Zeichenfolge //. Dieser einzeilige
Kommentar geht nur bis zum Ende der jeweiligen Zeile.
Der Inhalt der Kommentare wird nicht im Browser dargestellt, siehe Abbildung 1.5.
Natürlich kann jeder Benutzer bei Bedarf den Quelltext der Seite ansehen und damit
auch die Kommentare.
Häufig möchten Sie ein Programm, das von Ihnen oder von jemand anderem stammt,
nach längerer Zeit noch einmal ansehen oder erweitern. Dann werden Sie für jede Zeile
4074.book Seite 26 Mittwoch, 3. Februar 2016 4:12 16
1.12 Kein JavaScript möglich
27
1Kommentar dankbar sein, die Sie darin vorfinden. Aus den gleichen Gründen ist es auch
sehr zu empfehlen, übersichtliche, leicht lesbare Programme zu schreiben.
Abbildung 1.5 Kommentare sind nicht sichtbar.
1.12 Kein JavaScript möglich
Wie bereits in Abschnitt 1.2, »Was kann JavaScript nicht?«, erwähnt: Es wird immer ein-
zelne Benutzer geben, die aus Gründen der Vorsicht JavaScript in ihrem Browser ausge-
schaltet haben. Was können wir dann machen? Es ist nicht möglich, mit Hilfe eines
Programms JavaScript beim Benutzer einzuschalten. Wir können aber erkennen, ob es
eingeschaltet ist oder nicht.
Falls es nicht eingeschaltet ist, dann können wir entweder eine einfache Version der Sei-
te in reinem HTML anbieten oder einen Hinweis geben, dass die Nutzung der betreffen-
den Internetseiten das Einschalten von JavaScript voraussetzt. Ein Beispiel:
...<body>
<script>document.write("<p>Hier läuft JavaScript</p>");
</script><noscript>
<p>Hier läuft JavaScript nicht<br>Bitte schalten Sie es ein</p>
</noscript></body></html>
Listing 1.7 Datei »kein_script.htm«
Innerhalb des noscript-Containers können Sie Text und HTML-Markierungen für die-
jenigen Benutzer notieren, bei denen JavaScript ausgeschaltet ist.
Bei eingeschaltetem JavaScript werden nur die Anweisungen aus dem script-Container
ausgeführt. Die Seite sieht dann aus wie in Abbildung 1.6.
4074.book Seite 27 Mittwoch, 3. Februar 2016 4:12 16
1 Einführung
28
Abbildung 1.6 JavaScript ist eingeschaltet.
Im Mozilla Firefox 42 lässt sich JavaScript wie folgt ausschalten: Geben Sie in der Adress-
leiste about:config ein. Anschließend müssen Sie bestätigen, dass Sie sich der Gefahren
bewusst sind, die Änderungen der erweiterten Einstellungen mit sich bringen könnten.
Innerhalb der Liste der Einstellungen ändern Sie mithilfe des Kontextmenüs den Wert
von javascript.enabled auf false.
Im Browser Chrome 46 lässt sich JavaScript wie folgt ausschalten: Menü Einstellun-
gen • Erweiterte Einstellungen anzeigen • Datenschutz • Inhaltseinstellun-
gen • JavaScript • Ausführung von JavaScript für keine Webseite zulassen •
Fertig. In der englischsprachigen Version entspricht das: Menü Settings • Advanced
Settings • Privacy • Content Settings • JavaScript • Do not allow any site to
run JavaScript • Done.
Dann sieht die Seite aus wie in Abbildung 1.7.
Abbildung 1.7 JavaScript ist ausgeschaltet.
4074.book Seite 28 Mittwoch, 3. Februar 2016 4:12 16
85
3
Kapitel 3
Eigene Objekte
Sie erschaffen eigene Objekte und verstehen ganz nebenbei
besser den Aufbau der vorhandenen Objekte.
Es gibt in JavaScript eine ganze Reihe vordefinierter Objekte. Sie haben bereits die Ob-
jekte document und Math kennengelernt. In Kapitel 6 und Kapitel 7 werde ich die vordefi-
nierten Objekte ausführlich erläutern.
In diesem Kapitel sehen Sie, wie Sie eigene Objekte mit Hilfe von Prototypen und Kon-
struktorfunktionen erschaffen. Damit haben Sie die Möglichkeit, auf thematisch zusam-
mengehörige Daten über einen gemeinsamen Namen zuzugreifen.
Das Wissen über die Erzeugung und Bearbeitung eigener Objekte erleichtert Ihnen das
Verständnis und den Umgang mit den zahlreichen vordefinierten Objekten. Vordefi-
nierte Objekte können Sie außerdem mit Hilfe der Vererbung erweitern, falls Sie spe-
zielle Möglichkeiten in Ihren Anwendungen benötigen.
Die kompakte JavaScript Object Notation (JSON) vereinfacht den Transport von Daten
zwischen verschiedenen Anwendungen.
Mit der Einführung von ECMAScript 2015 wird Ihnen eine zusätzliche Möglichkeit gebo-
ten, in JavaScript objektorientiert zu programmieren. Mehr dazu in Abschnitt 3.6.
3.1 Objekte und Eigenschaften
In diesem Abschnitt sehen Sie, wie Sie einen Objekt-Prototyp mit mehreren Eigenschaf-
ten definieren und Objekte zu diesem Prototyp erzeugen. Verschiedene Objekte, die
denselben Prototyp haben, sind miteinander verwandt. Sie haben dieselben Eigenschaf-
ten, allerdings mit unterschiedlichen Werten.
Im folgenden Beispiel wird ein Prototyp mit dem Namen Fahrzeug erschaffen. Ein Ob-
jekt zu diesem Prototyp soll über die Eigenschaften farbe und geschwindigkeit ge-
kennzeichnet sein. Anschließend werden zwei Objekte zu diesem Prototyp erzeugt
und ausgegeben.
4074.book Seite 85 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
86
Es folgt das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Eigenschaften</title><script>
function Fahrzeug(f, g){
this.farbe = f;}
</script></head><body>
<p><script>var dacia = new Fahrzeug("Rot", 50);document.write("Farbe: " + dacia.farbe+ ", Geschwindigkeit: " + dacia.geschwindigkeit + "<br>");
dacia.geschwindigkeit = 75;document.write("Farbe: " + dacia.farbe
+ ", Geschwindigkeit: " + dacia.geschwindigkeit + "<br>");
var renault = new Fahrzeug("Gelb", 65);document.write("Farbe: " + renault.farbe
+ ", Geschwindigkeit: " + renault.geschwindigkeit);</script></p>
</body></html>
Listing 3.1 Datei »obj_eigenschaft.htm«
Es wird eine Funktion mit dem Namen Fahrzeug() definiert. Innerhalb der Funktion
werden zwei Eigenschaften festgelegt, jeweils mit dem Schlüsselwort this, dem Opera-
tor . (Punkt) und einem Namen. Den beiden Eigenschaften werden die Werte zugewie-
sen, die der Funktion Fahrzeug() als Parameter übergeben werden.
Als Nächstes wird die Variable dacia deklariert. Mit Hilfe des Schlüsselworts new wird auf
die Funktion Fahrzeug() zugegriffen und damit ein Objekt zum Prototyp Fahrzeug er-
schaffen. Es werden zwei Werte an die Funktion übergeben. Diese stellen die Anfangs-
werte der beiden Eigenschaften dar. Auf diese Weise wird die Variable dacia zu einem
Verweis auf das neu erschaffene Objekt Fahrzeug.
Die Funktion Fahrzeug() dient somit nicht nur als Definition des Prototyps, sondern
auch als Konstruktorfunktion zur Erschaffung von Objekten, deren Eigenschaften fest-
4074.book Seite 86 Mittwoch, 3. Februar 2016 4:12 16
3.2 Methoden
87
3
gelegte Anfangswerte haben. Konstruktorfunktionen werden gemäß Konvention mit
großem Anfangsbuchstaben notiert.
Sie können anschließend mit Hilfe der Punktschreibweise auf die Eigenschaften des
Objekts zugreifen. Die Werte können ausgegeben oder verändert werden.
Als Letztes wird ein zweites Objekt zum Prototyp Fahrzeug erschaffen. Es verfügt
ebenfalls über die Eigenschaften farbe und geschwindigkeit. Die Eigenschaftswerte
der beiden Objekte unterscheiden sich allerdings.
In Abbildung 3.1 sehen Sie die Ausgabe des Programms.
Abbildung 3.1 Objekte und Eigenschaften
Das Schlüsselwort this bezeichnet dieses Objekt, also das aktuelle Objekt, für das die
Eigenschaft abgerufen oder die Methode ausgeführt wird.
3.2 Methoden
Eine Konstruktorfunktion (und damit ein Prototyp) kann auch Eigenschaften haben,
die auf Methoden verweisen. Methoden sind Funktionen, die nur für Objekte aufgeru-
fen werden können, die denselben Prototyp haben. Ähnlich verhält es sich mit der Me-
thode write(), die nur für das document-Objekt aufgerufen werden kann.
Häufig dienen Methoden zum Verändern der Eigenschaften eines Objekts. Zur Erzeu-
gung einer Methode können Sie sowohl eine Funktion mit Namen als auch eine ano-
nyme Funktion nutzen. Die Eigenschaften und die Methoden eines Objekts werden
zusammen auch als Member eines Objekts bezeichnet.
Im folgenden Beispiel wird die Konstruktorfunktion zum Prototyp Fahrzeug aus dem
vorherigen Abschnitt erweitert. Es werden die beiden Eigenschaften lackieren und
beschleunigen definiert, die auf Methoden verweisen. Diese Methoden dienen zur Än-
derung der Eigenschaften farbe und geschwindigkeit.
Außerdem wird eine besondere Eigenschaft mit dem festgelegten Namen toString defi-
niert. Sie verweist auf eine Methode, die eine einfache Ausgabe eines Objekts ermög-
licht, ähnlich der Ausgabe einer Variablen.
4074.book Seite 87 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
88
Das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Methode</title><script>
function Fahrzeug(f, g){
this.farbe = f;this.geschwindigkeit = g;this.beschleunigen = fahrzeugBeschleunigen;this.lackieren = function(f) { this.farbe = f; };this.toString = fahrzeugAusgeben;
}
function fahrzeugBeschleunigen(wert){
this.geschwindigkeit += wert;}
function fahrzeugAusgeben(){
return "Farbe: " + this.farbe+ ", Geschwindigkeit: " + this.geschwindigkeit;
}</script>
</head><body><p>
<script>var dacia = new Fahrzeug("Rot", 50);document.write("Farbe: " + dacia.farbe
+ ", Geschwindigkeit: " + dacia.geschwindigkeit + "<br>");
dacia.beschleunigen(35);dacia.lackieren("Blau");document.write(dacia);
</script></p></body></html>
Listing 3.2 Datei »obj_methode.htm«
4074.book Seite 88 Mittwoch, 3. Februar 2016 4:12 16
3.3 Objekt in Objekt
89
3
Der Eigenschaft beschleunigen verweist auf die Methode fahrzeugBeschleunigen(). Die-
se Methode erwartet einen Zahlenwert. Dieser dient zum Ändern des Wertes der Eigen-
schaft geschwindigkeit.
Der Eigenschaft lackieren wird eine anonyme Funktion zugewiesen. Auf diese Weise
wird die Eigenschaft zur Methode lackieren(). Sie erwartet eine Zeichenkette. Diese
dient als neuer Wert der Eigenschaft farbe.
Die Eigenschaft toString verweist auf die Methode fahrzeugAusgeben(). Diese Methode
liefert eine Zeichenkette, die die Werte aller Eigenschaften des Objekts enthält, und
dient zur Ausgabe eines Objekts, wie Sie in Abbildung 3.2 sehen.
Abbildung 3.2 Nutzung von Methoden
Ein Hinweis: Die Eigenschaften beschleunigen und toString verweisen auf Methoden,
die es insgesamt nur einmal gibt. Die anonyme Methode für die Eigenschaft lackieren
wird für jedes erzeugte Objekt definiert. Dies ist speichertechnisch ungünstiger.
3.3 Objekt in Objekt
Die Eigenschaft eines Objekts kann wiederum ein Objekt mit Eigenschaften sein, die
wiederum teilweise auf Methoden verweisen. Dieser Zusammenhang wird Ihnen bei
den vordefinierten Objekten in JavaScript noch häufig begegnen. Zum besseren Ver-
ständnis wird die Konstruktorfunktion zum Prototyp Fahrzeug um die Eigenschaft
antrieb erweitert. Dabei handelt es sich um ein Objekt zum Prototyp motor.
Das Beispielprogramm:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Objekt in Objekt</title><script>
function Motor(l, z, k){
this.leistung = l;this.zylinder = z;
4074.book Seite 89 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
90
this.kraftstoff = k;this.tunen = motorTunen;this.toString = motorAusgeben;
}
function motorTunen(x){
this.leistung += x;}
function motorAusgeben(){
return "Leistung: " + this.leistung + ", Zylinder: "+ this.zylinder + ", Kraftstoff: " + this.kraftstoff;
}
function Fahrzeug(f, g, a){
this.farbe = f;this.geschwindigkeit = g;this.antrieb = a;this.toString = fahrzeugAusgeben;
}
function fahrzeugAusgeben(){
return "Farbe: " + this.farbe + ", Geschwindigkeit: "+ this.geschwindigkeit + ", Antrieb: " + this.antrieb;
}</script>
</head><body><p>
<script>var dacia = new Fahrzeug("Rot", 50, new Motor(60, 4, "Diesel"));dacia.antrieb.tunen(10);document.write(dacia + "<br>");
dacia.antrieb.leistung = 80;dacia.antrieb.zylinder = 6;dacia.antrieb.kraftstoff = "Benzin";
4074.book Seite 90 Mittwoch, 3. Februar 2016 4:12 16
3.4 Vererbung
91
3
document.write(dacia);</script></p>
</body></html>
Listing 3.3 Datei »obj_in_objekt.htm«
Ein Objekt zum Prototyp Motor hat die Eigenschaften leistung, zylinder und kraftstoff.
Außerdem gibt es die Eigenschaft tunen, die auf eine Methode zur Veränderung der Leis-
tung verweist, und die Eigenschaft toString, die auf eine Methode zur Ausgabe der drei
Eigenschaftswerte verweist.
In der Konstruktorfunktion zum Prototyp Fahrzeug ist die Eigenschaft antrieb hinzuge-
kommen. Mit Hilfe der Eigenschaft toString wird auch der Wert dieser Eigenschaft aus-
gegeben. Es ist noch nicht zu erkennen, welchen Typ diese Eigenschaft hat.
Im Programm wird ein Objekt zum Prototyp Fahrzeug mit Hilfe von new erzeugt. Der
dritte Parameter ist ein Objekt zum Prototyp Motor, das ebenfalls mit new erzeugt wird.
Mit dem ersten Punkt nach dem Namen des Objekts dacia wird die Eigenschaft antrieb
des Fahrzeug-Objekts angesprochen, der zweite Punkt führt zur Untereigenschaft des
Motor-Objekts.
Zur Ausgabe eines Fahrzeug-Objekts wird die Eigenschaft toString aus der Konstruk-
torfunktion zum Prototyp Fahrzeug aufgerufen. Diese ruft intern, mit Hilfe von
this.antrieb, die gleichnamige Eigenschaft aus der Konstruktorfunktion zum Pro-
totyp Motor auf. Auf diese Weise wird die Zeichenkette zusammengesetzt, siehe Ab-
bildung 3.3.
Abbildung 3.3 »Motor«-Objekt in »Fahrzeug«-Objekt
3.4 Vererbung
Falls Sie einen Prototyp benötigen, der einige Eigenschaften hat, die bereits in einem an-
deren Prototyp definiert werden, so können Sie das Prinzip der Vererbung benutzen. Sie
erschaffen einen neuen Prototyp auf der Grundlage eines vorhandenen Prototyps und
fügen weitere Eigenschaften hinzu.
4074.book Seite 91 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
92
Im folgenden Beispiel wird ein Prototyp Lastwagen erschaffen, auf der Grundlage des
Prototyps Fahrzeug. Ein Objekt zum Prototyp Lastwagen soll die zusätzliche Eigenschaf-
ten nutzlast und beladen haben. Letztere soll auf eine Methode verweisen. Außerdem
verfügen beide Prototypen über eine eigene Definition der Eigenschaft toString.
Es folgt das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vererbung</title><script>
function Fahrzeug(f, g){
this.farbe = f;this.geschwindigkeit = g;this.beschleunigen = fahrzeugBeschleunigen;this.toString = fahrzeugAusgeben;
}
function fahrzeugBeschleunigen(wert){
this.geschwindigkeit += wert;}
function fahrzeugAusgeben(){
return "Farbe: " + this.farbe+ ", Geschwindigkeit: " + this.geschwindigkeit;
}
function Lastwagen(f, g, n){
this.constructor(f, g);this.nutzlast = n;this.beladen = lastwagenBeladen;this.toString = lastwagenAusgeben;
}
function lastwagenBeladen(wert){
this.nutzlast += wert;}
4074.book Seite 92 Mittwoch, 3. Februar 2016 4:12 16
3.4 Vererbung
93
3
function lastwagenAusgeben(){
return "Farbe: " + this.farbe + ", Geschwindigkeit: "+ this.geschwindigkeit + ", Nutzlast: " + this.nutzlast;
}
Lastwagen.prototype = new Fahrzeug();</script>
</head><body><p>
<script>var iveco = new Lastwagen("Orange", 30, 15);document.write(iveco + "<br>");
iveco.beschleunigen(50);iveco.beladen(25);document.write(iveco);
</script></p></body></html>
Listing 3.4 Datei »obj_vererbung.htm«
Die Konstruktorfunktion zum Prototyp Fahrzeug enthält die Eigenschaften be-
schleunigen und toString. Sie erwartet zwei Parameter, für die Eigenschaften farbe
und geschwindigkeit.
Die Konstruktorfunktion zum Prototyp Lastwagen erwartet insgesamt drei Parameter.
Dabei handelt es sich um die Anfangswerte für die Eigenschaften farbe und geschwindig-
keit zum Prototyp Fahrzeug und für die Eigenschaft nutzlast zum Prototyp Lastwagen.
Die ersten beiden Parameter werden mit Hilfe der vordefinierten Methode construc-
tor() an den Prototyp weitergereicht, auf dessen Grundlage dieser Prototyp erzeugt
wurde. Der dritte Parameter wird der Eigenschaft nutzlast zugewiesen. Auf diese Weise
erhalten alle Eigenschaften des Objekts zum Prototyp Lastwagen einen Anfangswert.
Die Konstruktorfunktion zum Prototyp Lastwagen enthält außerdem eine zusätzliche
Eigenschaft beladen, die auf eine Methode zur Änderung der Nutzlast verweist.
Mit der Anweisung Lastwagen.prototype = new Fahrzeug(); legen Sie fest, dass der Proto-
typ Fahrzeug als Grundlage für den Prototyp Lastwagen dient. Die Eigenschaft prototype
ist vordefiniert. Sie stammt, wie auch die Methode constructor(), vom Prototyp Object.
Dieser dient in JavaScript als Grundlage für alle Objekte, ob eigene oder vordefinierte.
4074.book Seite 93 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
94
Im Programm wird ein Objekt zum Prototyp Lastwagen mit drei Anfangswerten erzeugt
und ausgegeben. Anschließend wird es verändert und erneut ausgegeben, siehe Abbil-
dung 3.4.
Abbildung 3.4 Vererbung
3.5 Operationen mit Objekten
In diesem Abschnitt sehen Sie ein Beispielprogramm, in dem eine Reihe von nützlichen
Operationen und Prüfungen bezüglich eines Objekts und seiner Eigenschaften durch-
geführt wird. Der Prototyp des Objekts wird im head des Dokuments definiert, und zwar
wie folgt:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Operationen</title><script>
function Fahrzeug(f, g){
this.farbe = f;this.geschwindigkeit = g;this.lackieren = fahrzeugLackieren;this.beschleunigen = fahrzeugBeschleunigen;this.toString = fahrzeugAusgeben;
function fahrzeugLackieren(f){
this.farbe = f;}
function fahrzeugBeschleunigen(wert){
this.geschwindigkeit += wert;}
4074.book Seite 94 Mittwoch, 3. Februar 2016 4:12 16
3.5 Operationen mit Objekten
95
3
function fahrzeugAusgeben(){
return "Farbe: " + this.farbe+ ", Geschwindigkeit: " + this.geschwindigkeit;
}}
</script></head>...
Listing 3.5 Datei »obj_operation.htm«, Teil 1 von 8
3.5.1 Zugriffsoperatoren
Sie haben zwei Möglichkeiten, auf die Eigenschaften eines Objekts zuzugreifen: zum
einen mit dem Operator . (Punkt), zum anderen mithilfe der eckigen Klammern []. Dies
sehen Sie in folgendem Programmteil:
...<body><p>
<script>var dacia = new Fahrzeug("Rot", 50);document.write("mit Punkt: " + dacia.farbe + " "
+ dacia.geschwindigkeit + "<br>");document.write("mit [ und ]: " + dacia["farbe"] + " "
+ dacia["geschwindigkeit"] + "<br>");document.write("mit toString(): " + dacia + "<br>");
...
Listing 3.6 Datei »obj_operation.htm«, Teil 2 von 8
Nach Erzeugung eines Objekts werden seine Eigenschaften zweimal ausgegeben. In-
nerhalb der eckigen Klammern wird der Name der Eigenschaft wie eine Zeichenkette
innerhalb von Anführungsstrichen notiert. Sie können diese Zeichenkette aus einzel-
nen Teilen zusammensetzen, auch mit Hilfe von Variablen. Diese Schreibweise macht
die Erstellung von Programmen noch ein Stück flexibler.
Die Ausgabe sehen Sie, neben anderen, in Abbildung 3.5.
4074.book Seite 95 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
96
3.5.2 Verweise auf Objekte erzeugen und vergleichen
Die Variable, über die Sie auf ein Objekt zugreifen, stellt nur einen Verweis auf das
Objekt dar, das Sie mit Hilfe von new erschaffen. Falls Sie diese Variable einer anderen
Variablen zuweisen, so erschaffen Sie kein neues Objekt und auch keine Kopie des ur-
sprünglichen Objekts, sondern nur einen zweiten Verweis auf dasselbe Objekt. Sie
können anschließend über beide Variablen auf dasselbe Objekt zugreifen.
Sie können das Objekt an eine Funktion übergeben. Eine solche Übergabe wird Über-
gabe per Referenz genannt. Auch in diesem Fall wird keine Kopie angelegt. Eine Verän-
derung des Objekts innerhalb der Funktion wirkt direkt auf das Originalobjekt. Dies ist
anders als bei der Übergabe von einfachen Variablen, in denen Zeichenketten oder
Zahlen gespeichert werden, siehe auch Abbildung 3.5.
Die beiden Vergleichsoperatoren == und != können auch auf Objekte angewandt wer-
den. Der Operator == liefert true, falls zwei Verweise auf dasselbe Objekt verweisen. Falls
es sich um zwei Verweise auf unterschiedliche Objekte handelt, liefert er false. Umge-
kehrt verhält es sich bei dem Operator !=.
Im folgenden Programmteil wird ein zweiter Verweis auf ein vorhandenes Objekt
erzeugt. Anschließend werden die Eigenschaften des Originalobjekts mit Hilfe von
toString ausgegeben. Die beiden Verweise werden anschließend verglichen. Zudem
wird ein weiteres Objekt erzeugt, dessen Eigenschaften und Werte mit dem zuvor er-
zeugten Objekt übereinstimmen. Die Verweise auf die beiden Objekte werden eben-
so miteinander verglichen.
...var renault = dacia;document.write("Zweiter Verweis: " + renault + "<br>");if(Object.is(renault, dacia))
document.write("Dasselbe Objekt<br>");var simca = new Fahrzeug("Rot", 50);if(!(Object.is(simca, dacia)))
document.write("Nicht dasselbe Objekt<br><br>");...
Listing 3.7 Datei »obj_operation.htm«, Teil 3 von 8
Diese Ausgabe sehen Sie ebenfalls in Abbildung 3.5.
4074.book Seite 96 Mittwoch, 3. Februar 2016 4:12 16
3.5 Operationen mit Objekten
97
3
Abbildung 3.5 Zugriff mit »[« und »]«, zweiter Verweis
3.5.3 Instanzen prüfen
Objekte werden auch als Instanzen zu einem Prototyp bezeichnet. Der Vorgang des Er-
schaffens eines Objekts wird auch Instantiieren genannt. Der Operator instanceof prüft,
ob ein bestimmtes Objekt die Instanz zu einem bestimmten Prototyp (oder wiederum
dessen Prototyp) darstellt und liefert einen Wahrheitswert. Nachfolgend eine Prüfung:
...if(dacia instanceof Fahrzeug)
document.write("'instanceof': Objekt dacia hat den "+ " Prototyp Fahrzeug<br><br>");
...
Listing 3.8 Datei »obj_operation.htm«, Teil 4 von 8
Die Ausgabe sehen Sie in Abbildung 3.6.
3.5.4 Typ ermitteln
Den Operator typeof haben Sie bereits in Abschnitt 2.3.5 kennengelernt. Er liefert den
Typ einer Variablen, also string, number oder boolean. Im Zusammenhang mit Objekten
können sich noch die Typen function für die Konstruktorfunktion zu einem Prototyp
oder für eine Methode und object für ein Objekt zu einem Prototypen ergeben:
...document.write("'typeof':<br>"
+ "Fahrzeug: " + typeof Fahrzeug + "<br>"+ "dacia: " + typeof dacia + "<br>"+ "farbe: " + typeof dacia.farbe + "<br>"+ "geschwindigkeit: " + typeof dacia.geschwindigkeit + "<br>"
4074.book Seite 97 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
98
+ "beschleunigen: " + typeof dacia.beschleunigen + "<br>"+ "lackieren: " + typeof dacia.lackieren + "<br><br>");
...
Listing 3.9 Datei »obj_operation.htm«, Teil 5 von 8
In Abbildung 3.6 sehen Sie, dass die Konstruktorfunktion zum Prototyp Fahrzeug und
die beiden Eigenschaften beschleunigen und lackieren, die auf Methoden verweisen,
vom Typ function sind. Das Objekt dacia ist vom Typ object. Die beiden Eigenschaften
sind einfache Variablen vom Typ string bzw. number.
Abbildung 3.6 »instanceof« und »typeof«
3.5.5 Eigenschaften prüfen
Der Operator in ermöglicht Ihnen, zu prüfen, ob eine bestimmter Zeichenkette die
Eigenschaft eines Objekts darstellt:
...if("farbe" in dacia)
document.write("'in': farbe ist "+ " Eigenschaft des Objekts 'dacia'<br>");
if("beschleunigen" in dacia)document.write("'in': beschleunigen ist "
+ " Eigenschaft des Objekts 'dacia'<br>");if(!("leistung" in dacia))
document.write("'in': leistung ist keine"+ " Eigenschaft des Objekts 'dacia'<br><br>");
...
Listing 3.10 Datei »obj_operation.htm«, Teil 6 von 8
Die Prüfung ergibt, dass die Zeichenkette farbe und beschleunigen Eigenschaften des
Objekts dacia darstellen, leistung jedoch nicht, siehe Abbildung 3.7.
4074.book Seite 98 Mittwoch, 3. Februar 2016 4:12 16
3.5 Operationen mit Objekten
99
3
3.5.6 Kompakter Zugriff auf Eigenschaften
Das Schlüsselwort with ermöglicht eine kompaktere Schreibweise, falls Sie auf mehrere
Eigenschaften desselben Objekts zugreifen möchten:
...with(dacia){
farbe = "Gelb";beschleunigen(10);document.write("'with': " + farbe + " "
+ geschwindigkeit + "<br>");}
...
Listing 3.11 Datei »obj_operation.htm«, Teil 7 von 8
Mit with(dacia) sorgen Sie dafür, dass in dem folgenden Block auf die Eigenschaften des
Objekts dacia zugegriffen wird. Die Ausgabe sehen Sie in Abbildung 3.7.
Abbildung 3.7 »in« und »with«
3.5.7 Eigenschaften löschen
Sie können einzelne Eigenschaften mit dem Operator delete löschen. Es folgt der letzte
Teil des Programms, mit einem Beispiel dazu:
...delete dacia.geschwindigkeit;delete dacia.lackieren;if(dacia.lackieren)
dacia.lackieren("Blau");document.write("Eigenschaftswerte: " + dacia.farbe + " "
+ dacia.geschwindigkeit + " " + dacia.leistung + "<br>");</script></p>
</body></html>
Listing 3.12 Datei »obj_operation.htm«, Teil 8 von 8
4074.book Seite 99 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
100
Die Eigenschaften geschwindigkeit und lackieren werden gelöscht. Anschließend wird
geprüft, ob die Eigenschaft lackieren existiert. Falls ja, würde die zugehörige Methode
aufgerufen. Als Letztes werden die Werte der Eigenschaften farbe, geschwindigkeit,
lackieren und leistung ausgegeben. Die Eigenschaften geschwindigkeit und lackieren
existieren nicht mehr, die Eigenschaft leistung hat es nie gegeben. Die resultierende
Ausgabe sehen Sie in Abbildung 3.8.
Abbildung 3.8 Eigenschaftswerte nach Löschvorgang
Hinweis: Die for … in-Schleife, die es ermöglicht, in einem Zug auf alle Eigenschaften
eines Objekts zuzugreifen, wird nicht erläutert. Sie ist als deprecated (deutsch: veraltet)
gekennzeichnet und steht daher in JavaScript zukünftig nicht mehr zur Verfügung.
3.6 Klassen in ECMAScript 2015
Mit der Einführung von ECMAScript 2015 wird Ihnen eine zusätzliche Möglichkeit gebo-
ten, in JavaScript objektorientiert zu programmieren.
Dies geschieht weiterhin auf Basis der Prototypen, allerdings werden nunmehr Klassen
mithilfe des Schlüsselworts class, Konstruktoren, Eigenschaften und Methoden defi-
niert, wie in anderen objektorientierten Sprachen. Aktuell (im Dezember 2015) wird die-
ser Teil des Standards nur von einzelnen Browsern umgesetzt, unter anderem vom
Microsoft Edge.
Zu jedem der bisher erläuterten Programme dieses Kapitels finden Sie die Alternative
im Downloadpaket zum Buch, das Sie über www.rheinwerk-verlag.de/4087 erreichen. Es
handelt sich um die folgenden Dateien:
� obj_eigenschaft_es6.htm
� obj_methode_es6.htm
� obj_in_objekt_es6.htm
� obj_vererbung_es6.htm
� obj_operation_es6.htm
Die Programme unterscheiden sich nur in der Definition des Prototyps bzw. der Klasse,
nicht in der Nutzung. Die Unterschiede werden mithilfe von Kommentaren hervorge-
4074.book Seite 100 Mittwoch, 3. Februar 2016 4:12 16
3.7 Objekte in JSON
101
3
hoben. Die Ausgaben der Programme sind bis auf eine kleine Ausnahme im letzten Pro-
gramm identisch.
3.7 Objekte in JSON
JSON steht für JavaScript Object Notation. Dies ist der Name für eine kompakte Schreib-
weise, die auf Objekte und auf Felder angewendet werden kann. Die JSON-Schreibweise
ermöglicht Ihnen die Speicherung der Eigenschaften eines Objekts mitsamt deren Wer-
ten innerhalb einer einzigen Zeichenkette. Auf diese Weise wird der Transport von Da-
ten zwischen verschiedenen Anwendungen vereinfacht.
Die meisten Browser kennen außerdem ein JSON-Objekt. Es besitzt Methoden, mit des-
sen Hilfe Sie ein Objekt in eine transportable Zeichenkette umwandeln können. Dies gilt
unabhängig davon, ob das Objekt mit Hilfe von JSON oder mit Hilfe einer Konstruktor-
funktion erzeugt wird. Umgekehrt können Objekte aus einer solchen Zeichenkette er-
schaffen werden.
Für den Fall, dass ein Browser das JSON-Objekt nicht kennt, können Sie ersatzweise mit
der Funktion eval() arbeiten.
Im folgenden Beispiel wird ein Objekt im JSON-Format angelegt. Anschließend wird es
mit Hilfe des JSON-Objekts umgewandelt.
...<body><p>
<script>var dacia = { "farbe":"Rot", "geschwindigkeit":50.2 };document.write("1: " + dacia.farbe + " "
+ dacia.geschwindigkeit + "<br>");
var zkette;if(window.JSON)
zkette = JSON.stringify(dacia);else
zkette = '{ "farbe":"Rot", "geschwindigkeit":50.2 }';document.write("2: " + zkette + "<br>");
var renault;if(window.JSON)
renault = JSON.parse(zkette);else
4074.book Seite 101 Mittwoch, 3. Februar 2016 4:12 16
3 Eigene Objekte
102
renault = eval("(" + zkette + ")");document.write("3: " + renault.farbe + " "
+ renault.geschwindigkeit);</script></p>
</body></html>
Listing 3.13 Datei »obj_json.htm«
Bei Erzeugung eines Objekts in der kompakten Schreibweise steht das gesamte Objekt
in geschweiften Klammern. Die einzelnen Eigenschaft-Wert-Paare sind durch ein Kom-
ma voneinander getrennt. Eigenschaft und Wert eines Paars werden voneinander durch
einen Doppelpunkt getrennt. Der Name der Eigenschaft wird in doppelte Anführungs-
striche gesetzt. Falls es sich bei dem Wert um eine Zeichenkette handelt, geschieht dies
ebenfalls. Ein Zahlenwert wird ohne Anführungsstriche notiert. Nachkommastellen
werden mithilfe des Dezimalpunkts abgetrennt. Einfache Anführungsstriche würden
zwar für JavaScript genügen, aber nicht für die Weiterverarbeitung in JSON.
Falls der Browser das JSON-Objekt kennt, dann wird ein Objekt mit Hilfe der Methode
stringify() in eine Zeichenkette umgewandelt. Falls nicht, dann wird die Zeichenkette
mit Hilfe des Codes von Hand erzeugt. Die Zeichenkette sieht dabei genauso aus wie bei
der Erzeugung des Objekts in der kompakten Schreibweise. Zusätzlich wird der gesamte
Ausdruck im Code in einfache Anführungsstriche gesetzt.
Es folgt der umgekehrte Vorgang. Falls der Browser das JSON-Objekt kennt, dann
wird die Zeichenkette mit Hilfe der Methode parse() in ein Objekt umgewandelt.
Falls nicht, dann wird das Objekt im Code mit Hilfe der Funktion eval() erzeugt,
siehe Abschnitt 2.7.1. Die Zeichenkette muss dabei im Code von zusätzlichen run-
den Klammern umrahmt werden.
Die Ausgabe des Programms sehen Sie in Abbildung 3.9.
Abbildung 3.9 JSON-Format und JSON-Objekt
In Abschnitt 6.1.8 zeige ich Ihnen die Anwendung von JSON auf Felder und Objekte. In
Abschnitt 8.4 werden JSON-Dateien gelesen.
4074.book Seite 102 Mittwoch, 3. Februar 2016 4:12 16
127
5
Kapitel 5
Das Document Object Model (DOM)
Das DOM ermöglicht den lesenden und schreibenden Zugriff
auf alle Elemente eines HTML-Dokuments.
Das Document Object Model (DOM) stellt ein Modell für den Zugriff auf verschiedene
Arten von Dokumenten dar, unter anderem auf XML- und HTML-Dokumente.
Das Modell ist aufgebaut wie ein Baum, ähnlich einem Verzeichnisbaum. Es besteht aus
einzelnen Knoten (englisch: nodes). Es gibt einen Wurzelknoten, der Kindknoten be-
sitzt. Die Kindknoten können wiederum Kindknoten haben und so weiter. Jeder Knoten
kann außerdem Attributknoten besitzen.
In JavaScript wird jeder Knoten durch ein node-Objekt repräsentiert. Es kann sich dabei
um einen HTML-Elementknoten, einen HTML-Attributknoten oder einen Textknoten
handeln. Sie können gelesen, verändert, hinzugefügt und gelöscht werden. Diese zu-
nächst etwas theoretischen Begriffe erläutere ich Ihnen in diesem Kapitel an vielen Bei-
spielen.
Der Inhalt des Browserfensters ist in JavaScript über das document-Objekt erreichbar. Es
stellt Methoden zur Verfügung, mit denen Sie Objekte des Dokuments neu erzeugen
und auf sie zugreifen.
In diesem Kapitel sehen Sie, wie Sie auf die Elemente eines HTML-Dokuments mit Hilfe
des document-Objekts und des node-Objekts zugreifen und diese verändern. Das ist Vor-
aussetzung für viele Techniken, die in den folgenden Kapiteln behandelt werden.
5.1 Baum und Knoten
In diesem Abschnitt soll der DOM-Baum eines einfachen HTML-Dokuments gezeigt
werden. Zunächst der HTML-Code:
<!DOCTYPE html><html><head>
<meta charset="utf-8">
4074.book Seite 127 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
128
<title>DOM, erstes Beispiel</title></head><body>
<p>Erster Absatz</p><p>Zweiter <b>Absatz</b></p><p>Dritter Absatz mit <a href="einbetten.htm">einem Link</a></p>
</body></html>
Listing 5.1 Datei »dom_beispiel.htm«
Das Dokument besteht aus drei p-Containern, die teilweise weitere Container enthalten.
Im Browser sieht es aus wie in Abbildung 5.1.
Abbildung 5.1 Einfaches Beispiel für DOM-Baum
Moderne Browser bieten Ihnen die Möglichkeit, sich den Aufbau des Dokuments ge-
mäß DOM zu verdeutlichen. Im Mozilla Firefox geht dies über das Menü Entwickler-
Werkzeuge • Inspektor. Wie bei einem Verzeichnisbaum im Windows-Explorer kön-
nen Sie hier die einzelnen Ebenen ein- oder ausblenden, siehe Abbildung 5.2.
Abbildung 5.2 Entwickler-Werkzeuge, Inspektor
4074.book Seite 128 Mittwoch, 3. Februar 2016 4:12 16
5.2 Knoten abrufen
129
5
In den folgenden Beispielen betrachten oder verändern wir einzelne Knoten auf ver-
schiedenen Ebenen. Zum besseren Verständnis sollten Sie sich stets den Dokumentauf-
bau gemäß DOM vor Augen halten.
5.2 Knoten abrufen
Das document-Objekt stellt zwei verschiedene Methoden zum Zugriff auf ein HTML-
Element bereit, die jeweils einen Verweis auf ein Objekt liefern. Über diesen Verweis
kann auf das Objekt und seine Member zugegriffen werden. Es handelt sich um fol-
gende Methoden:
� getElementById(): Diese Methode kann genutzt werden, falls das HTML-Element
einen Wert für das Attribut id besitzt. Parameter der Methode ist eine Zeichenkette,
die den Wert der id enthält.
� getElementsByTagName(): Diese Methode liefert zunächst ein Feld mit Verweisen auf
alle HTML-Elemente mit der gewünschten Markierung (englisch: tag). Parameter
der Methode ist eine Zeichenkette, die den Namen der Markierung enthält. Die Ele-
mente des Feldes sind nummeriert, beginnend bei 0. Ein einzelnes Feldelement
erreichen Sie über seine Nummer, die Sie in eckigen Klammern notieren. Mehr zu
Feldern sehen Sie in Abschnitt 6.1.
Die Attributknoten eines HTML-Elements erhalten Sie über die Methode getAttri-
bute() des betreffenden node-Objekts. Parameter der Funktion ist eine Zeichenkette,
die den Namen des gesuchten Attributs enthält.
Es folgt ein Beispielprogramm:
...<body>
<p id="a1">Erster Absatz</p><p id="a2">Zweiter Absatz</p><p id="a3" style="text-align:left">Dritter Absatz</p><script>
var absatz3 = document.getElementById("a3");document.write("Über ID: Inhalt: " + absatz3.firstChild.nodeValue
+ ", Style: " + absatz3.getAttribute("style") + "<br>");
var absatz1 = document.getElementsByTagName("p")[0];document.write("Über Tag: Inhalt: " + absatz1.firstChild.nodeValue
+ ", Style: " + absatz1.getAttribute("style"));
4074.book Seite 129 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
130
</script></body></html>
Listing 5.2 Datei »dom_abrufen.htm«
Das Dokument enthält im HTML-Teil drei p-Container. Falls Sie auf einen bestimmten
Knoten mehrfach zugreifen möchten, dann speichern Sie einen Verweis auf diesen
Knoten in einer Variablen, wie ich dies für den dritten Absatz mit Hilfe von absatz3 ge-
macht habe. Dies führt zu einer schnelleren Ausführung des Programms. Der Verweis
wird (einmalig) von der Methode getElementById() geliefert.
Auf den ersten Kindknoten eines Knotens können Sie über die Eigenschaft firstChild
eines node-Objekts zugreifen. Der dritte Absatz besitzt nur einen Kindknoten. Dabei
handelt es sich um den Textknoten.
Die Eigenschaft nodeValue eines node-Objekts liefert zu einem Textknoten den zuge-
hörigen Text als Wert. Hier ist dies der Text Dritter Absatz. Der Aufruf der Methode
getAttribute("style") gibt den Wert des Attributs style des HTML-Elementknotens
zurück. Hier ist dies text-align:left.
Der Aufruf der Methode getElementsByTagName("p") liefert ein Feld mit drei Verweisen.
Das Element 0 dieses Felds verweist auf den ersten Absatz. Da das Attribut style dieses
HTML-Elementknotens nicht gesetzt ist, wird der Wert null zurückgeliefert.
Die Ausgabe des Programms sehen Sie in Abbildung 5.3.
Abbildung 5.3 Abrufen von Knoten und Knotenwerten
Ältere Versionen des Internet Explorer betrachten CSS-Styles nicht als Attribute. Dies
führt zu anderen Ausgaben nach dem Text Style:. Mehr über den Zugriff auf CSS-Styles
mithilfe von JavaScript finden Sie in Abschnitt 9.3.
4074.book Seite 130 Mittwoch, 3. Februar 2016 4:12 16
5.3 Kindknoten
131
5
5.3 Kindknoten
Sowohl ein Absatz als auch seine Kindknoten werden mit Hilfe eines node-Objekts reprä-
sentiert. In diesem Zusammenhang erläutere ich in diesem Abschnitt weitere Member
für ein node-Objekt:
� Die Methode hasChildNodes() liefert die Information, ob ein Knoten Kindknoten hat
oder nicht.
� Die Eigenschaft childNodes eines Knotens enthält ein Feld mit den Kindknoten eines
Knotens. Die Elemente des Feldes sind nummeriert, beginnend bei 0.
� Die Eigenschaft length eines Feldes stellt die Anzahl der Elemente eines Felds bereit.
Dies gilt auch für das Feld childNodes.
� Die Eigenschaft nodeType enthält den Typ des Knotens. Der Wert 1 steht für Element-
knoten, hier also für HTML-Elementknoten. Der Wert 3 bedeutet: Textknoten.
� Die Eigenschaft nodeValue liefert bei einem Textknoten den Textinhalt.
� Die Eigenschaft nodeName stellt bei einem HTML-Elementknoten den Namen der
HTML-Markierung bereit.
� Auf die einzelnen Kindknoten kann mit den Eigenschaften firstChild, lastChild und
childNodes[Nummer] zugegriffen werden.
Ein Beispielprogramm:
...<body>
<p id="a1">Das <i>ist</i> ein Absatz <b>mit</b> Markierungen.</p><script>
var absatz = document.getElementById("a1");document.write("Hat Kinder: " + absatz.hasChildNodes() + "<br>");document.write("Anzahl Kinder: "
+ absatz.childNodes.length + "<br><br>");
for(var i=0; i<absatz.childNodes.length; i++){
if(absatz.childNodes[i].nodeType == 3)document.write("Kind " + i + ": Typ=Text, Wert: "
+ absatz.childNodes[i].nodeValue + "<br>");else if(absatz.childNodes[i].nodeType == 1)
document.write("Kind " + i + ": Typ=Element, Name: "+ absatz.childNodes[i].nodeName + "<br>");
}
4074.book Seite 131 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
132
document.write("<br>Erstes Kind: "+ absatz.firstChild.nodeValue + "<br>");
document.write("Letztes Kind: "+ absatz.lastChild.nodeValue + "<br>");
document.write("Kind 1, Erstes Kind: "+ absatz.childNodes[1].firstChild.nodeValue);
</script></body></html>
Listing 5.3 Datei »dom_kinder.htm«
Es werden die insgesamt fünf Kindknoten eines Absatzes betrachtet. Es handelt sich bei
ihnen um drei Textknoten und zwei HTML-Elementknoten. Die beiden letzteren haben
jeweils einen Textknoten als Kindknoten.
Mit Hilfe der Feld-Eigenschaft length wird eine for-Schleife durchlaufen. Die Nummern,
Typen und Werte der Kindknoten werden ausgegeben. Bei den Werten handelt es sich
um den Namen der HTML-Markierung oder den Textinhalt, je nach Typ des Knotens,
siehe Abbildung 5.4.
Abbildung 5.4 Kindknoten des ersten Absatzes
Als Nächstes werden die Textinhalte des ersten und des letzten Kindknotens ausgege-
ben. Die letzte Ausgabe liefert den Wert des Textknotens, der den ersten Kindknoten ei-
nes HTML-Elementknotens bildet. Sie sehen, wie Sie sich durch die Hierarchie bewegen
können.
4074.book Seite 132 Mittwoch, 3. Februar 2016 4:12 16
5.4 Knoten hinzufügen
133
5
Beachten Sie folgende Besonderheit: Falls Sie sich am Ende des Programms dom_
beispiel.htm (siehe Listing 5.1) mit Hilfe der Anweisung alert(document.body.child-
Nodes.length); die Anzahl der Kindknoten des body-Elements ausgeben lassen, so
liefern ältere Versionen des Internet Explorers einen anderen Wert als die meisten
anderen Browser. Woran liegt das?
Bei diesen älteren Versionen des Internet Explorers zählen die Zeilenumbrüche, die im
Editor zur Erstellung der einzelnen HTML-Codezeilen erfolgen, nicht als Kindknoten.
Es zählen nur die drei Absätze und der script-Container mit dem Aufruf der alert()-
Methode als Kindknoten. Bei den meisten anderen Browsern gelten die Zeilenumbrü-
che als Textknoten und werden mitgezählt.
Dies hat natürlich auch zur Folge, dass die Nummern der Kindknoten anders zugeord-
net sind. Falls Sie einmal alle Zeilenumbrüche entfernen, dann ist das HTML-Dokument
anschließend schwerer lesbar, es wird aber in allen Browsern dieselbe Anzahl von Kind-
knoten festgestellt.
5.4 Knoten hinzufügen
In diesem Abschnitt werden Textknoten, HTML-Elementknoten und Attributknoten er-
zeugt und einem Dokument hinzugefügt. Folgende Methoden des document-Objekts
werden genutzt:
� Die Methode createTextNode()erzeugt einen Textknoten. Parameter der Methode ist
eine Zeichenkette, die den Text enthält.
� Die Methode createElement()erzeugt einen HTML-Elementknoten. Parameter der
Methode ist eine Zeichenkette mit der Markierung.
Außerdem werden drei Methoden für ein node-Objekt eingesetzt:
� appendChild() fügt einen Kindknoten zu einem Knoten hinzu, am Ende des Felds der
Kindknoten. Parameter der Methode ist ein Verweis auf den Knoten, der hinzugefügt
wird.
� setAttribute() setzt den Wert eines Attributknotens. Falls der Attributknoten noch
nicht existiert, wird er zuvor erzeugt. Parameter der Methode sind zwei Zeichenket-
ten, die den Namen und den neuen Wert des Attributs enthalten.
� insertBefore() fügt einen Kindknoten zu einem Knoten hinzu, vor einem anderen
Kindknoten. Parameter der Methode sind zwei Verweise: ein Verweis auf den Kno-
ten, der hinzugefügt wird, und ein Verweis auf den Knoten, vor dem eingefügt wird.
4074.book Seite 133 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
134
Es folgt das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM, hinzufügen</title><script>
function anhaengen(){
var text = document.createTextNode("angehängter Absatz");var absatz = document.createElement("p");absatz.appendChild(text);absatz.setAttribute("style", "text-align:left");document.body.appendChild(absatz);
}
function einschieben(){
var text = document.createTextNode("eingeschobener Absatz");var absatz = document.createElement("p");absatz.appendChild(text);absatz.setAttribute("style", "text-align:left");document.body.insertBefore(absatz,
document.getElementById("a3"));}
</script></head><body>
<p id="a1" style="text-align:left">Erster Absatz</p><p id="a2" style="text-align:left">Zweiter Absatz</p><p id="a3" style="text-align:left">Dritter Absatz</p><p><input id="anh" type="button" value="Anhängen">
<input id="ein" type="button" value="Einschieben"></p>
<script src="eh.js"></script><script>
meinHandler("anh", "click", anhaengen);meinHandler("ein", "click", einschieben);
</script></body></html>
Listing 5.4 Datei »dom_hinzufuegen.htm«
In Abbildung 5.5 sehen Sie das ursprüngliche Dokument.
4074.book Seite 134 Mittwoch, 3. Februar 2016 4:12 16
5.4 Knoten hinzufügen
135
5
Abbildung 5.5 Vor dem Hinzufügen
Die beiden Schaltflächen Anhängen und Einschieben dienen zum Anhängen bzw.
zum Einschieben eines neuen HTML-Elementknotens.
In der JavaScript-Funktion anhaengen() wird ein neuer Textknoten mit dem Text ange-
hängter Absatz erzeugt. Anschließend wird ein HTML-Elementknoten für einen Absatz
erzeugt. Dem HTML-Elementknoten werden ein Textknoten und ein Attributknoten
hinzugefügt, anschließend wird er dem body-Knoten des Dokuments am Ende ange-
hängt.
In der Funktion einschieben() passiert fast dasselbe. Der Text ist etwas anders. Der neu
erzeugte HTML-Elementknoten wird diesmal vor dem angegebenen Kindknoten des
body-Knotens eingeschoben.
In Abbildung 5.6 sehen Sie das Dokument, nachdem beide Schaltflächen jeweils zwei-
mal betätigt wurden.
Abbildung 5.6 Nach dem Hinzufügen
4074.book Seite 135 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
136
5.5 Knoten ändern
In diesem Abschnitt zeige ich Ihnen, wie Sie Textknoten und HTML-Elementknoten än-
dern können. Es werden zwei weitere Methoden für ein node-Objekt eingeführt:
� cloneNode() erzeugt die Kopie eines Knotens, wahlweise mit oder ohne alle Kindkno-
ten, deren Kindknoten und so weiter. Parameter der Methode ist ein Wahrheitswert.
Falls dieser den Wert true hat, wird der Knoten mitsamt seiner gesamten Kindkno-
tenstruktur kopiert.
� replaceChild() ersetzt den Kindknoten eines Knotens durch einen anderen Kind-
knoten. Parameter der Methode sind zwei Verweise: auf den Knoten, der hinzugefügt
wird, und auf den Knoten, der ersetzt wird.
Recht nützlich erweist sich auch die Eigenschaft innerHTML des all-Objekts. Das Ob-
jekt gehört nicht zum JavaScript-Standard. Die genannte Eigenschaft wird aber von
den meisten Browsern umgesetzt. Sie dient zum Zuweisen von Text inklusive HTML-
Markierungen.
Es folgt das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM, ändern</title><script>
function textAendern(id){
var absatz = document.getElementById(id);if(absatz.hasChildNodes())
absatz.firstChild.nodeValue = "Geänderter Inhalt in " + id;else{
var text = document.createTextNode("Erzeugter Inhalt in " + id);
absatz.appendChild(text);}
}
function htmlAendern(){
var absatz = document.getElementById("a4");absatz.innerHTML = "Geänderter <i>Inhalt</i> in a4";
}
4074.book Seite 136 Mittwoch, 3. Februar 2016 4:12 16
5.5 Knoten ändern
137
5
function umgeben(){
var absatz = document.getElementById("a3");var kursiv = document.createElement("i");var ersetzt = absatz.replaceChild(kursiv, absatz.firstChild);kursiv.appendChild(ersetzt);
}
function klonen(){
var absatz = document.getElementById("a3");var kopie = absatz.cloneNode(true);document.body.appendChild(kopie);
}</script>
</head><body>
<p id="a1">Erster Absatz</p><p id="a2"></p><p id="a3"><b>Dritter</b> Absatz</p><p id="a4">Vierter Absatz</p><p><input id="idText1" type="button" value="Text ändern">
<input id="idText2" type="button" value="Text erzeugen"><input id="idHtml" type="button" value="Text und HTML ändern"></p>
<p><input id="idUmgeben" type="button"value="Knoten mit HTML umgeben">
<input id="idKlonen" type="button"value="Knoten klonen"></p>
<script src="eh.js"></script><script>
meinHandler("idText1", "click", function() {textAendern("a1");});meinHandler("idText2", "click", function() {textAendern("a2");});meinHandler("idHtml", "click", htmlAendern);meinHandler("idUmgeben", "click", umgeben);meinHandler("idKlonen", "click", klonen);
</script></body></html>
Listing 5.5 Datei »dom_aendern.htm«
4074.book Seite 137 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
138
In Abbildung 5.7 sehen Sie das ursprüngliche Dokument.
Abbildung 5.7 Vor dem Ändern
Der zweite Absatz ist nicht zu sehen. Er wird zwar mit einem p-Container erzeugt, besitzt
aber keinen Inhalt, also keinen Kindknoten. Die beiden Schaltflächen Text ändern
und Text erzeugen dienen zum Ändern eines Textknotens. Falls er noch nicht exis-
tiert, wird er zunächst erzeugt.
Die Schaltfläche Text und HTML ändern ändert den Inhalt eines Absatzes. Die Schalt-
fläche Knoten mit HTML umgeben dient zum Umgeben eines Knotens, der gegebe-
nenfalls Kindknoten hat, mit einem HTML-Knoten. Als Letztes folgt die Schaltfläche
Knoten klonen. Er dient zum Kopieren des dritten Absatzes inklusive aller Kindkno-
ten an das Ende des Dokuments.
Die JavaScript-Funktion textAendern() wird zweimal aufgerufen, jeweils mit der id eines
Absatzes als Parameter:
� Beim ersten Aufruf geht es um den ersten Absatz. Dieser hat einen Textknoten als In-
halt. Die Methode hasChildNodes() liefert daher true. Der Inhalt des vorhandenen
Textknotens wird einfach durch anderen Inhalt ersetzt. Dies passiert auch beim zwei-
ten Betätigen der Schaltfläche Text erzeugen, da der betreffende Knoten mittler-
weile einen Kindknoten besitzt.
� Beim zweiten Aufruf geht es um den zweiten Absatz. Dieser hat keinen Inhalt. Die
Methode hasChildNodes() liefert daher false. Es wird ein neuer Textknoten erzeugt
und dem Absatz als neuer Kindknoten hinzugefügt.
In der Funktion htmlAendern() wird mit Hilfe der Eigenschaft innerHTML der Inhalt des
vierten Absatzes neu gesetzt, inklusive HTML-Markierung.
In der Funktion umgeben() wird ein neuer HTML-Elementknoten erzeugt. Er ersetzt den
ersten Kindknoten des dritten Absatzes. Anschließend wird dieser (frühere) erste Kind-
4074.book Seite 138 Mittwoch, 3. Februar 2016 4:12 16
5.6 Knoten löschen
139
5
knoten unter den neuen Knoten gesetzt. Damit wird dieser Kindknoten mit HTML-Code
umgeben.
In der Funktion klonen() wird ein neuer Knoten erzeugt, als Kopie des dritten Absatzes,
inklusive aller Kindknoten. Diese Kopie wird an das Ende des Dokuments angehängt.
In Abbildung 5.8 sehen Sie das Dokument, nachdem jede Schaltfläche einmal geklickt
wurde.
Abbildung 5.8 Nach dem Ändern
5.6 Knoten löschen
Sie können auch Knoten aus dem DOM-Baum löschen. Dazu dienen die folgenden
Methoden für ein node-Objekt:
� removeChild() löscht den Kindknoten eines Knotens. Parameter der Methode ist ein
Verweis auf den Knoten, der gelöscht wird.
� removeAttribute() löscht den Attributknoten eines Knotens. Parameter der Methode
ist eine Zeichenkette mit dem Namen des Attributs, das gelöscht wird.
Es folgt das Programm:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM, löschen</title><script>
function knotenLoeschen(){
var absatz = document.getElementById("a2");
4074.book Seite 139 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
140
document.body.removeChild(absatz);}
function attributLoeschen(){
var absatz = document.getElementById("a3");absatz.removeAttribute("style");
}</script>
</head><body>
<p id="a1">Erster Absatz</p><p id="a2">Zweiter Absatz</p><p id="a3" style="text-align:center;">Dritter Absatz</p><p><input id="idKnoten" type="button" value="Knoten löschen">
<input id="idAttribut" type="button" value="Attribut löschen"></p>
<script src="eh.js"></script><script>
meinHandler("idKnoten", "click", knotenLoeschen);meinHandler("idAttribut", "click", attributLoeschen);
</script></body></html>
Listing 5.6 Datei »dom_loeschen.htm«
In Abbildung 5.9 sehen Sie das ursprüngliche Dokument.
Abbildung 5.9 Vor dem Löschen
Die Schaltfläche Knoten löschen dient zum Löschen des zweiten Absatzes. Die Schalt-
fläche Attribut löschen löscht das Attribut style des dritten Absatzes.
4074.book Seite 140 Mittwoch, 3. Februar 2016 4:12 16
5.7 Eine Tabelle erzeugen
141
5
In Abbildung 5.10 sehen Sie das Dokument nach dem Löschen.
Abbildung 5.10 Nach dem Löschen
5.7 Eine Tabelle erzeugen
In einem letzten, größeren Beispiel wird eine Tabelle vollständig neu erzeugt und
im Dokument eingebettet. Dabei kommen die Methoden createTextNode() und
createElement() des document-Objekts sowie die Methode appendChild() für ein node-
Objekt zum Einsatz.
Die Tabelle wird von innen nach außen erzeugt:
� Zuerst werden Textknoten für den Zelleninhalt angelegt.
� Dann werden HTML-Elementknoten für die Zellen erzeugt, in die die Textknoten ein-
gebettet werden.
� Es folgt die Einbettung der Zellen in die HTML-Elementknoten für die Zeilen.
� Als Nächstes werden die Zeilen in den HTML-Elementknoten für den Tabellenrumpf
(Markierung tbody) eingebettet. Ohne diese Zwischenstufe klappt es nicht in älteren
Versionen des Internet Explorers.
� Dann wird der HTML-Elementknoten für die Tabelle erstellt, in die der Tabellen-
rumpf eingebettet wird.
� Als Letztes wird der HTML-Elementknoten für die Tabelle in das Dokument eingebettet.
Der Programmcode:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM, Tabelle</title><script>
function tabelleErzeugen(){
var tabellenrumpf = document.createElement("tbody");
4074.book Seite 141 Mittwoch, 3. Februar 2016 4:12 16
5 Das Document Object Model (DOM)
142
for(var z=1; z<=3; z++){
var zeile = document.createElement("tr");for(var s=1; s<=5; s++){
var text = document.createTextNode("Zelle "+z+"/"+s);var zelle = document.createElement("td");zelle.appendChild(text);zeile.appendChild(zelle);
}tabellenrumpf.appendChild(zeile);
}
var tabelle = document.createElement("table");tabelle.appendChild(tabellenrumpf);document.body.appendChild(tabelle);
}</script>
</head><body>
<p><input id="idTabelle" type="button" value="Tabelle"></p><script src="eh.js"></script><script>
meinHandler("idTabelle", "click", tabelleErzeugen);</script>
</body></html>
Listing 5.7 Datei »dom_tabelle.htm«
Nach der einmaligen Betätigung der Schaltfläche Tabelle sieht das Dokument aus wie
in Abbildung 5.11.
Abbildung 5.11 Nach Erzeugung der Tabelle
4074.book Seite 142 Mittwoch, 3. Februar 2016 4:12 16
337
12
Kapitel 12
jQuery
Die browserunabhängigen, einheitlichen Methoden der Bibliothek
jQuery sind von vielen Websites nicht mehr wegzudenken.
Bei jQuery handelt es sich um eine JavaScript-Bibliothek mit einer großen Verbreitung.
Sie bietet komfortable, browserunabhängige Methoden, unter anderem mithilfe von
CSS, Ajax und Animationen.
Zurzeit (im Dezember 2015) gibt es jQuery in zwei Versionen:
� Version 1.11.3, mit Unterstützung aller Browser.
� Version 2.1.4, mit Unterstützung der meisten Browser, allerdings nicht von älteren
Versionen des Internet Explorers.
Für die Beispiele dieses Kapitels habe ich die Version 1.11.3 verwendet. Alle Beispiele dieses
Kapitels laufen unter den oben genannten Einschränkungen sowohl mit Version 1.11.3 als
auch mit Version 2.1.4.
Die Datei jquery-1.11.3.min.js mit der gesamten Bibliothek ist nur knapp 100 KB groß. Sie
finden sie zusammen mit den Beispieldateien im Downloadpaket zum Buch, das Sie
über www.rheinwerk-verlag.de/4087 erreichen. Etwaige aktuellere Versionen können
Sie über http://www.jquery.com herunterladen. In den folgenden Beispielen wird die ge-
nannte jQuery-Datei genutzt, die sich im selben Verzeichnis wie die Beispieldateien be-
findet.
Zwei Erweiterungen von jQuery werden auch in diesem Buch behandelt:
� jQuery UI: Es bietet spezielle Elemente zur Gestaltung von Benutzeroberflächen (eng-
lisch: user interfaces), siehe Kapitel 13.
� jQuery mobile: Es ermöglicht unter anderem eine Touch-Bedienung von Internet-
seiten, wie sie besonders auf Mobilgeräten genutzt wird, siehe Kapitel 14.
4074.book Seite 337 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
338
12.1 Aufbau
Anhand eines ersten Beispiels erläutere ich verschiedene Möglichkeiten, jQuery zu nut-
zen. Abbildung 12.1 stellt eine Datei mit einem div-Element und drei Hyperlinks dar.
Nach Betätigen der Hyperlinks ändert sich jeweils der Inhalt des div-Elements durch
den Einsatz von jQuery, wie Sie in Abbildung 12.2, Abbildung 12.3 und Abbildung 12.4
sehen.
Abbildung 12.1 Erste jQuery-Datei
Abbildung 12.2 Erste Änderung
Abbildung 12.3 Zweite Änderung
4074.book Seite 338 Mittwoch, 3. Februar 2016 4:12 16
12.1 Aufbau
339
12
Abbildung 12.4 Dritte Änderung
Es folgt der Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery, Aufbau</title><script src="jquery-1.11.3.min.js"></script><script>
$(document).ready(function(){
$("#idAbsatz").html("<i>Nach dem Laden</i>");$("#idLink1").click(function()
{ $("#idAbsatz").html("<b>Nach Klick 1</b>"); });});
</script></head><body>
<p id="idAbsatz" style="background-color:#e0e0e0;width:300px">Hallo</p>
<p><a id="idLink1" href="#">Klick 1</a></p><p><a id="idLink2" href="#">Klick 2</a></p><p><a id="idLink3" href="#">Klick 3</a></p>
<script>$("#idLink2").click(function(){
$("#idAbsatz").html("Nach Klick 2"); });jQuery("#idLink3").click(function(){
jQuery("#idAbsatz").html("<b><i>Nach Klick 3</i></b>"); });</script>
</body></html>
Listing 12.1 Datei »jq_geladen.htm«
4074.book Seite 339 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
340
Im body des Dokuments steht ein div-Element mit dem Beispieltext Hallo. Darunter se-
hen Sie die drei Hyperlinks.
Im JavaScript-Bereich wird die Methode ready() aufgerufen. Der jQuery-Code soll erst
dann starten können, wenn die Datei mit allen Elementen im Browser des Benutzers ge-
laden wurde und das Objekt document vollständig zur Verfügung steht. Dafür sorgt die
Methode ready(). Ansonsten könnte es vorkommen, dass mit dem jQuery-Code auf ein
Element zugegriffen wird, dass noch nicht existiert.
Innerhalb der Methode ready() finden Sie zwei verschiedene Abläufe. Im ersten Teil
wird die Methode html() für das Element mit der ID idAbsatz aufgerufen. Diese Metho-
de ändert den HTML-Inhalt des betroffenen Elements. Daher erscheint sofort nach dem
Laden des Dokuments der kursive Text Änderung nach Laden im div-Element.
Im zweiten Teil wird die Methode click() für das Element mit der ID Link1 aufgerufen.
Dies sorgt dafür, dass ein Klick auf den Hyperlink zur Ausführung der angegebenen Ak-
tion führt. Nach dem Klick erscheint der fett gedruckte Text Änderung nach Klick 1 im
div-Element.
Am Ende des Dokuments stehen zwei weitere Aktionen, die nach Betätigung des zwei-
ten bzw. dritten Hyperlinks ausgeführt werden. Hier ist die Methode ready() nicht mehr
notwendig, da alle bedienbaren oder veränderbaren Elemente des Dokuments bereits
geladen sind. Eine jQuery-Anweisung wird entweder mit Hilfe der $Funktion oder der
jQuery-Funktion aufgerufen. Beide Schreibweisen führen zum selben Ergebnis.
Die Methoden werden für die im Selektor genannten Elemente durchgeführt. Häufig
handelt es sich dabei um CSS-Selektoren. Aufgrund der vielen Klammerebenen in
jQuery-Anweisungen empfehle ich die hier verwendete kompakte Schreibweise. Be-
achten Sie bei Ihren eigenen Programmen auch die häufig notwendigen Anführungs-
zeichen.
12.2 Selektoren und Methoden
Selektoren dienen der Auswahl des Elements, auf das sich der jQuery-Code bezieht. In
diesem Abschnitt stelle ich Ihnen einige Möglichkeiten für jQuery-Selektoren vor.
Außerdem lernen Sie verschiedene Methoden kennen:
� css() zur Änderung der CSS-Eigenschaften
� html() zur Änderung des Textes mit HTML-Code
� text() zur Änderung des Textes ohne HTML-Code
4074.book Seite 340 Mittwoch, 3. Februar 2016 4:12 16
12.2 Selektoren und Methoden
341
12
In Abbildung 12.5 sehen Sie vier verschiedene div-Elemente. Die Betätigung eines
der angegebenen Hyperlinks führt zu Änderungen bei einem oder mehreren div-
Elementen.
Abbildung 12.5 Selektoren und Methoden
Es folgt der Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery, Selektoren und Methoden</title><script src="jquery-1.11.3.min.js"></script><script>
$(document).ready(function(){
$("#idLink1").click(function(){$("div").css({"width":"300px"}); });
[… weitere jQuery-Funktionen, siehe Erläuterung …]
});</script><style>
div {width:250px; height:50px; background-color:#b0b0b0;}#idHell {width:250px; height:50px; background-color:#d0d0d0;}
4074.book Seite 341 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
342
.dunkel {width:250px; height:50px; background-color:#909090;}</style>
</head><body>
<div>div-Element, ohne id, ohne class</div><div id="idHell">Element mit id 'hell'</div><div class="dunkel">1. div-Element mit class 'dunkel'</div><div class="dunkel">2. div-Element mit class 'dunkel'</div>
<p><a id="idLink1" href="#"> 1: CSS für div-Elemente</a><br>
[… weitere Hyperlinks, siehe Abbildung …]
</body></html>
Listing 12.2 Datei »jq_selektieren.htm«
Es gibt vier div-Elemente:
� Das erste Element hat keine ID. Ihm wird keine CSS-Klasse zugeordnet.
� Das zweite Element hat die ID idHell.
� Dem dritten und dem vierten Element wird jeweils die CSS-Klasse dunkel zugeordnet.
Darüber sehen Sie die CSS-Vorgabe für die Darstellung der Elemente:
� div-Elemente allgemein haben eine Größe von 250 × 50 Pixeln und sind mittelgrau.
� Das Element mit der ID idHell ist hellgrau.
� Alle Elemente der CSS-Klasse dunkel sind dunkelgrau.
Es folgt die Auswirkung der Betätigung der Hyperlinks. Ein Klick auf den ersten Hyper-
link führt zu diesem Code:
$("#idLink1").click(function(){$("div").css({"width":"300px"}); });
Es wird die Methode css() für alle div-Elemente ausgeführt. Diese Methode ändert CSS-
Eigenschaften. Hier wird der Eigenschaft width der Wert 300 Pixel zugewiesen.
Es gibt verschiedene Schreibweisen für die Angabe der CSS-Eigenschaft und des zugehö-
rigen Werts. Hier wird einheitlich die folgende verwendet: Eigenschaft und Wert in ge-
schweiften Klammern, durch Doppelpunkt getrennt, jeweils in Anführungszeichen.
Keine Regel ohne Ausnahme: Ein boolescher Wert, ein Variablenname oder ein reiner
Zahlenwert (ohne px) wird nicht in Anführungsstriche gesetzt.
4074.book Seite 342 Mittwoch, 3. Februar 2016 4:12 16
12.2 Selektoren und Methoden
343
12
Im vorliegenden Programm sind die Hyperlinks und die zugehörigen Klick-Methoden
alle gleichartig aufgebaut. Nachfolgend werde ich nur noch die Auswirkung des jeweili-
gen Klicks beschreiben:
Hyperlink 2 ändert das Element mit der ID idHell:
$("#idHell").css({"width":"350px"}); });
Hyperlink 3 ändert alle Elemente mit der CSS-Klasse dunkel:
$(".dunkel").css({"width":"400px"}); });
Sie können mehrere Selektoren in einer Collection zusammenfassen: Hyperlink 4 än-
dert das Element mit der ID idHell und alle Elemente mit der CSS-Klasse dunkel:
$("#idHell, .dunkel").css({"width":"450px"}); });
Falls Sie mehrere Eigenschaften ändern möchten, so trennen Sie die Eigenschaft-Wert-
Paare durch Kommata: Hyperlink 5 ändert die Hintergrundfarbe und die Breite für das
Element mit der ID idHell:
$("#idHell").css({"background-color":"#f0f0f0","width":"500px"}); });
Die Methode html() dient dem Ändern des Textes inklusive des HTML-Codes; Hyper-
link 6 sorgt für einen neuen Text in Fettdruck für das Element mit der ID idHell:
$("#idHell").html("<b>HTML neu</b>"); });
Die Methode text() dient dem Ändern des Textes ohne Berücksichtigung des HTML-
Codes: Hyperlink 7 dient dazu, einen neuen Text in das Element mit der ID idHell zu
schreiben. Versehentlich enthaltene HTML-Elemente werden ebenfalls als Text ausge-
geben:
$("#idHell").text("<b>Text neu</b>"); });
Durch Verkettung können Sie mehrere Methoden für einen Selektor direkt nachein-
ander ausführen. Außerdem können Sie einen CSS-Wert mit Hilfe der beiden Operato-
ren += und -= relativ verändern: Hyperlink 8 führt die Methoden css() und html() für
das Element mit der ID idHell aus. In der Methode css() wird die Breite pro Klick um
20 Pixel erhöht:
$("#idHell").css({"width":"+=20px"}).html("CSS und HTML neu");});
4074.book Seite 343 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
344
12.3 Ereignisse
Bisher haben wir lediglich das Klick-Ereignis zum Starten von jQuery-Code genutzt. In
diesem Abschnitt werden wir weitere Ereignisse einsetzen.
In Abbildung 12.6 sehen Sie ein div-Element, darunter eine Reihe von Hyperlinks. Das
Auslösen eines der Ereignisse auf dem jeweiligen Link führt jedes Mal zu einer animier-
ten Verbreiterung des Elements. Dabei kommt die Methode animate() zum Einsatz. Sie
erzeugt wie in einem Film durch eine Abfolge von Einzelbildern den Eindruck eines
gleichmäßigen Ablaufs. Mehr zu animate() erfahren Sie im nächsten Abschnitt.
Abbildung 12.6 Verschiedene Ereignisse
Es folgt der Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery, Ereignisse</title><script src="jquery-1.11.3.min.js"></script><script>
$(document).ready(function(){
$("#idLink1").click(function(){$("#idRect").animate({"width":"+=20px"}); });
[… weitere jQuery-Funktionen, siehe Erläuterung …]
4074.book Seite 344 Mittwoch, 3. Februar 2016 4:12 16
12.3 Ereignisse
345
12
});</script><style>
a {background-color:#f0f0f0; line-height:150%}</style>
</head><body>
<div id="idRect" style="width:200px; height:100px;background-color:#aaaaaa">Rechteck</div>
<p><a id="idLink1" href="#"> 1: click</a><br>[… weitere Hyperlinks, siehe Abbildung …]</body></html>
Listing 12.3 Datei »jq_ereignis.htm«
Das div-Element hat die ID idRect, eine Größe von 200 × 100 Pixeln und eine graue
Farbe. Die Ereignisse haben die folgenden Auswirkungen:
Die Ihnen bereits bekannte Methode click() wird einmalig durch einen einfachen Klick
auf den Link ausgelöst. Das Element wird 20 Pixel breiter.
$("#idLink1").click(function(){$("#idRect").animate({"width":"+=20px"}); });
Die folgenden Methoden führen alle zur gleichen Animation, daher wird nur noch der
Methodenkopf dargestellt.
Die Methode dblclick() wird einmalig durch einen doppelten Klick auf den Link aus-
gelöst:
$("#idLink2").dblclick(function(){$("#idRect").animate({"width":"+=20px"}); });
Die Methoden mouseenter() beziehungsweise mouseover() werden einmalig durch das
Betreten des Links mit der Maus ausgelöst:
$("#idLink3").mouseenter(function(){$("#idRect").animate({"width":"+=20px"}); });
Die Methoden mouseleave() beziehungsweise mouseout() werden einmalig durch das
Verlassen des Links mit der Maus ausgelöst:
4074.book Seite 345 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
346
$("#idLink4").mouseleave(function(){$("#idRect").animate({"width":"+=20px"}); });
Die Methode mousemove() wird permanent durch das Bewegen der Maus innerhalb des
Links ausgelöst. Das Ereignis tritt häufig auf, wird gespeichert und später abgearbeitet.
Daher kann es schon bei einer kleinen Bewegung zu einer ganzen Reihe von Animatio-
nen kommen:
$("#idLink5").mousemove(function(){$("#idRect").animate({"width":"+=20px"}); });
Die Methode mousedown() wird einmalig durch das Herunterdrücken einer Maustaste in-
nerhalb des Links ausgelöst. Falls Sie einmal rechtsklicken: Die rechte Maustaste ist in
den Browsern häufig belegt, so dass häufig gleichzeitig ein Kontextmenü aufklappt:
$("#idLink6").mousedown(function(){$("#idRect").animate({"width":"+=20px"}); });
Die Methode mouseup() wird einmalig durch das Loslassen einer heruntergedrückten
Maustaste innerhalb des Links ausgelöst:
$("#idLink7").mouseup(function(){$("#idRect").animate({"width":"+=20px"}); });
Die Methode hover() vereinigt die beiden Ereignisse mouseenter und mouseleave. Sie
wird also sowohl durch das Betreten als auch durch das Verlassen des Links mit der Maus
ausgelöst:
$("#idLink8").hover(function(){$("#idRect").animate({"width":"+=20px"}); });
Die jQuery-Methode bind() dient dazu, Ereignisse an Methoden zu binden. Die anderen
Methoden in diesem Abschnitt sind eigentlich Spezialisierungen der Methode bind() in
abgekürzter Form. Beachten Sie, dass es sich nicht um die JavaScript-Methode bind()
handelt.
Hier erfolgt die Bindung für die Ereignisse mousedown und mouseup. Die Animation wird
also sowohl durch das Herunterdrücken als auch durch das Loslassen einer Maustaste
innerhalb des Links ausgelöst:
$("#idLink9").bind("mousedown mouseup", function(){$("#idRect").animate({"width":"+=20px"}); });
4074.book Seite 346 Mittwoch, 3. Februar 2016 4:12 16
12.4 Animationen
347
12
Bei jedem der genannten Ereignisse stellt JavaScript Informationen zum Ereignis in ei-
nem Ereignisobjekt bereit. Durch jQuery wird dieses Ereignisobjekt über alle Browser
vereinheitlicht. Sie greifen über einen Verweis darauf zu, den Sie der Methode als Para-
meter übergeben.
Beim Klick auf Link 10 wird ein Teil der Informationen ausgegeben, hier Art, Ort und
Zeitpunkt des Ereignisses, mit Hilfe der Eigenschaften type, pageX, pageY und timeStamp:
$("#idLink10").click(function(e){$("#idRect").html("Ereignis: " + e.type
+ "<br>Ort X: " + e.pageX + " , Y: " + e.pageY+ "<br>Zeit: " + Date(e.timeStamp)); });
Der timeStamp wird in Millisekunden angegeben. Sie können ihn mit Hilfe von Date()
umwandeln.
12.4 Animationen
In diesem Abschnitt erläutere ich verschiedene Möglichkeiten der Animation von Ele-
menten. Dabei kommt die Methode animate() zum Einsatz. Sie erzeugt wie in einem
Film durch eine Abfolge von Einzelbildern den Eindruck eines gleichmäßigen Ablaufs.
In Abbildung 12.7 sehen Sie ein div-Element, das auf der Seite positioniert wird. Über die
Hyperlinks können unterschiedliche Animationen gestartet werden. Der an letzter Stel-
le aufgeführte Hyperlink stellt den Ausgangszustand nach dem Laden der Seite wieder
her.
Abbildung 12.7 Animationen
4074.book Seite 347 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
348
Es folgt der Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery, Animationen</title><script src="jquery-1.11.3.min.js"></script><script>
$(document).ready(function(){
$("#idLink1").click(function(){$("#idRect").animate({"width":"200px"}); });
[… weitere jQuery-Funktionen, siehe Erläuterung …]
});</script>
</head><body>
<div id="idRect" style="position:absolute; width:100px; height:100px;left:300px; top:100px; background-color:#a0a0a0">Rechteck</div>
<p><a id="idLink1" href="#"> 1: Eine Eigenschaft (width)</a><br>
[… weitere Hyperlinks, siehe Abbildung …]
</body></html>
Listing 12.4 Datei »jq_animieren.htm«
Das div-Element hat die ID idRect, eine Startgröße von 100 × 100 Pixeln, die Startposi-
tion 300 Pixel/100 Pixel und eine graue Farbe. Die Positionierung ist nur notwendig
bei einer Animation des Orts.
Hyperlink 1 animiert die Breite bis zum Zielwert 200 Pixel:
$("#idRect").animate({"width":"200px"}); });
Sie können mehrere Eigenschaften gleichzeitig ändern. Die Eigenschaft-Wert-Paare
geben Sie im JSON-Format an, jeweils durch Kommas voneinander getrennt. Hyper-
link 2 animiert hier die Breite bis zum Zielwert 200 Pixel und die Höhe bis zum Ziel-
wert 50 Pixel:
$("#idRect").animate({"width":"200px", "height":"50px"}); });
4074.book Seite 348 Mittwoch, 3. Februar 2016 4:12 16
12.4 Animationen
349
12
Eine animierte Bewegung erreichen Sie über die Änderung der Eigenschaftswerte für
left und top. Hyperlink 3 bewegt das Rechteck zum Zielpunkt 400 Pixel/200 Pixel:
$("#idRect").animate({"left":"400px", "top":"200px"}); });
Die Transparenz ändern Sie über die Eigenschaft opacity, wie bereits in Abschnitt 9.2.4,
»Transparenz«, geschehen. Hyperlink 4 ändert die Transparenz in 0.5:
$("#idRect").animate({"opacity":0.5}); });
Eine Animation dauert ohne weitere Angabe 0.4 Sekunden, also 400 Millisekunden.
Die Dauer der Animation können Sie innerhalb des zweiten Parameters der Methode
animate() einstellen. Dies geht über die Eigenschaft duration, mit einem Wert in Milli-
sekunden. Den Wert dürfen Sie dabei nicht in Anführungszeichen setzen. Hyperlink 5
ändert die Breite auf den Zielwert 200 Pixel innerhalb von 2 Sekunden:
$("#idRect").animate({"width":"200px"},{"duration":2000});});
Die Eigenschaft easing kennzeichnet den zeitlichen Verlauf einer Animation. Der Stan-
dardwert swing bedeutet, dass die Animation zu Beginn beschleunigt, dann mit gleich-
mäßiger Geschwindigkeit weiterläuft und am Ende abbremst. Dadurch entsteht der
Eindruck eines natürlichen Ablaufs.
Den zeitlichen Verlauf der Animation können Sie ebenfalls innerhalb des zweiten Pa-
rameters der Methode animate() einstellen. Als Alternative steht der Wert linear zur
Verfügung. Das bedeutet, dass die Animation die ganze Zeit mit gleichmäßiger Ge-
schwindigkeit abläuft. Dadurch wirkt der Ablauf eher ruckartig. Easing-Plugins, die Sie
im Internet finden, bieten weitere Möglichkeiten für Easing-Funktionen. Hyperlink 6
verschiebt das Element innerhalb von zwei Sekunden linear bis zum Zielwert:
$("#idRect").animate({"left":"400px"},{"duration":2000, "easing":"linear"}); });
Als weiteren Parameter können Sie eine Callback-Funktion angeben. Sie wird ausge-
führt, nachdem die Animation beendet ist. Hyperlink 7 führt zu einer Verschiebung
des Elements zum Zielwert 400 Pixel. Anschließend wird das Element zum Zielwert
300 Pixel verschoben:
$("#idRect").animate({"left":"400px"},function(){$("#idRect").animate({"left":"300px"}) }); });
4074.book Seite 349 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
350
Bisher haben wir für die animierte Eigenschaft einen absoluten Zielwert angegeben. Sie
können aber auch relative Veränderungen durchführen mit Hilfe der Operatoren +=
und -=. Hyperlink 8 verschiebt das Element bei jeder Betätigung um 100 Pixel nach
rechts und ändert die Transparenz um 0.3, ausgehend von den jeweils aktuellen Wer-
ten:
$("#idRect").animate({"left":"+=100px","opacity":"-=0.3"});});
Ein Wert über 1.0 oder unter 0.0 ist für die Eigenschaft opacity natürlich nicht sinnvoll,
führt aber nicht zu einem Fehler.
Wie bereits an anderer Stelle erläutert, können Sie Methoden verketten. Hyperlink 9
verschiebt das Element um 100 Pixel nach rechts, anschließend wieder um 100 Pixel
nach links:
$("#idRect").animate({"left":"+=100px"}).animate({"left":"-=100px"}); });
Innerhalb einer Animation können Sie mit der Methode delay() eine Verzögerung ein-
bauen. Hyperlink 10 führt zur gleichen Bewegung wie Hyperlink 9. Zwischen den beiden
Teilanimationen wird allerdings eine Sekunde gewartet:
$("#idRect").animate({"left":"+=100px"}).delay(1000).animate({"left":"-=100px"}); });
Bei einer Verkettung laufen die einzelnen Teile einer Animation normalerweise nach-
einander ab. Sie können mit Hilfe des Parameters queue dafür sorgen, dass sie gleichzei-
tig stattfinden.
Hyperlink 11 animiert die Breite zum Zielwert 200 Pixel innerhalb von einer Sekunde.
Gleichzeitig wird die Höhe zum Zielwert 50 Pixel animiert, allerdings innerhalb von
zwei Sekunden. Der zweite Teil läuft also eine Sekunde länger. Dies wird mit dem boole-
schen Wert false für die Eigenschaft queue erreicht, der Standardwert ist true. Der Wert
darf nicht in Anführungszeichen stehen:
$("#idRect").animate({"width":"200px"}, {"duration":1000}).animate({"height":"50px"},{"duration":2000, "queue":false});});
Hyperlink 12 dient dazu, den Ausgangszustand wiederherzustellen. Es werden gleichzei-
tig fünf Eigenschaften verändert:
4074.book Seite 350 Mittwoch, 3. Februar 2016 4:12 16
12.5 Beispiel: sinusförmige Bewegung
351
12
$("#idRect").animate({"width":"100px", "height":"100px","left":"300px", "top":"100px", "opacity":1.0}); });
Die Ereignisse werden gepuffert. Falls Sie also einen Hyperlink betätigen, bevor eine lau-
fende Animation beendet ist, wird die zugehörige Aktion im Anschluss ausgeführt.
Die folgenden Methoden bieten keine zusätzlichen Möglichkeiten, können aber als
Schreibabkürzung dienen:
� die Methoden slideDown(), slideUp() und slideToggle() für die Veränderung der
Eigenschaft height
� die Methoden fadeIn(), fadeOut(), fadeToggle() und fadeTo() für die Veränderung
der Eigenschaft opacity
� die Methoden show(), hide() und toggle() für die gleichzeitige Veränderung der Eigen-
schaften width, height und opacity
12.5 Beispiel: sinusförmige Bewegung
In den einzelnen Funktionen werden bisher nur jQuery-Methoden aufgerufen. Wir soll-
ten aber nicht vergessen, dass uns natürlich auch der Rest von JavaScript zur Verfügung
steht. Im folgenden Beispiel sehen Sie eine Kombination. Ein Bild der Größe 16 × 16 Pixel
bewegt sich entlang einer Sinuskurve, sobald der Benutzer darauf klickt. Zusätzlich sind
einige Hilfslinien eingezeichnet, siehe Abbildung 12.8.
Abbildung 12.8 Animation einer Sinuskurve, Startpunkt
Die Kurve besteht aus einzelnen Linienstücken. Jedes Linienstück wird durch eine
jQuery-Animation erzeugt. Eine for-Schleife sorgt für die Aneinanderreihung der Ani-
4074.book Seite 351 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
352
mationen. Je feiner die Kurve zerlegt wird, desto gleichmäßiger ist der Kurvenverlauf.
Sie sehen aber bereits bei einer Zerlegung in Stücke à 10 Grad einen recht homogenen
Verlauf.
Der Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery, Sinuskurve</title><script src="jquery-1.11.3.min.js"></script><script>$(document).ready(function(){
$("#idLink").click(function(){for(var winkel = 10; winkel <= 360; winkel += 10){
var pLeft = (10 + winkel) + "px";var pTop = (110 - Math.sin(winkel/180*Math.PI)*100) + "px";$("#idBlock").animate({"left":pLeft, "top":pTop},
{"duration":"100", "easing":"linear"});}
});});
</script></head><body>
<div id="idBlock" style="position:absolute; left:10px; top:110px"><a id="idLink" href="#"><img src="block.gif" alt="Block"></a></div><script>
for(var pTop = 10; pTop < 211; pTop += 50)document.write("<div style='position:absolute; left:20px; top:"
+ pTop + "px'><img src='linie.jpg' alt='Linie'></div>");</script>
</body></html>
Listing 12.5 Datei »jq_sinus.htm«
Die Hilfslinien werden mit Hilfe einer for-Schleife erzeugt. Darin nimmt die Eigenschaft
pTop Werte von 10 Pixel bis 210 Pixel an.
Innerhalb der Methode click() nimmt die Variable winkel nacheinander die Werte von
10 bis 360 in 10er-Schritten an. Das Bild bewegt sich in x-Richtung gleichmäßig nach
rechts. Für die Bewegung in y-Richtung wird die Methode sin() des Math-Objekts aus
4074.book Seite 352 Mittwoch, 3. Februar 2016 4:12 16
12.6 jQuery und Ajax
353
12
JavaScript genutzt. Sie erwartet den Winkel im Bogenmaß, daher muss dieser vorher
umgerechnet werden. Die auf diese Weise errechneten Werte für den Zielpunkt werden
in den Variablen pLeft und pTop gespeichert. Diese Variablen können als Zielwerte für
die Eigenschaften left und top als Parameter der Methode animate() eingesetzt werden.
12.6 jQuery und Ajax
Ajax steht für Asynchronous JavaScript and XML. Diese Technik ermöglicht Ihnen das
Nachladen von Dokumentteilen. Eine ausführliche Beschreibung gab es bereits in Kapi-
tel 8. In jQuery gibt es eine Reihe von Methoden, die intern die Ajax-Technik nutzen. Sie
arbeiten browser- und versionsunabhängig, wie Sie es bei jQuery gewohnt sind.
Im vorliegenden Beispiel werden die Methoden load() und post() genutzt, um auf ein-
fache Weise Inhalte aus Textdateien, HTML-Dateien, PHP-Programmen und XML-Datei-
en in das aktuelle Dokument zu importieren, ohne den Rest der Seite neu aufbauen zu
müssen.
Im folgenden Beispiel werde ich einige Einsatzmöglichkeiten erläutern. In Abbil-
dung 12.9 ist der Startzustand der Seite zu sehen. Zumindest für den Einsatz der
Methode post() ist es erforderlich, die Seite über einen Webserver zu laden, wie Sie
dies schon in Abschnitt 4.2.3 gemacht haben.
Abbildung 12.9 jQuery, Ajax-Nutzung
Der Code:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery und Ajax</title>
4074.book Seite 353 Mittwoch, 3. Februar 2016 4:12 16
12 jQuery
354
<style>table,td {border:1px solid black}
</style><script src="jquery-1.11.3.min.js"></script><script>
$(document).ready(function(){
$("#idLink1").click(function() {$("#idAusgabe").load("jq_ajax_test.txt"); });
[… weitere jQuery-Funktionen, siehe Erläuterung …]
});</script></head><body>
<p><b>Methode load() für Text und HTML:</b></p><p><a id="idLink1" href="#"> 1: Gesamte Text-Datei</a><br>
[… weitere Hyperlinks, siehe Abbildung …]
<table><tr><td id="idAusgabe">Start-Text</td></tr></table></body></html>
Listing 12.6 Datei »jq_ajax.htm«
Die Tabellenzelle hat die ID idAusgabe. Hyperlink 1 lädt mit Hilfe der Methode load() den
gesamten Text aus einer Textdatei in die Zelle:
$("#idAusgabe").load("jq_ajax_test.txt"); });
Hyperlink 2 lädt den gesamten Inhalt aus einer HTML-Datei in die Zelle inklusive der
Markierungen:
$("#idAusgabe").load("jq_ajax_test.htm"); });
Hyperlink 3 lädt den Inhalt des Elements mit der ID t1 aus der HTML-Datei inklusive der
Markierungen. Achten Sie auf das trennende Leerzeichen zwischen dem Dateinamen
und der Hash-Zeichen der ID:
$("#idAusgabe").load("jq_ajax_test.htm #t1"); });
4074.book Seite 354 Mittwoch, 3. Februar 2016 4:12 16
12.6 jQuery und Ajax
355
12
Hyperlink 4 ruft mit Hilfe der Methode post() ein PHP-Programm auf. Im Parameter
(hier ergebnis) der Callback-Funktion steht anschließend die Rückgabe des Webservers.
Diese Rückgabe wird mit Hilfe der Methode html() zum Inhalt der Tabellenzelle:
$.post("jq_ajax_test.php", function(ergebnis) {$("#idAusgabe").html(ergebnis); }); });
Hyperlink 5 ruft ein PHP-Programm auf, dabei werden Daten an das PHP-Programm ge-
sendet. Es handelt sich um Eigenschaft-Wert-Paare, durch Doppelpunkte getrennt. Die
Rückgabe des Webservers wird zum Inhalt der Tabellenzelle:
$.post("jq_ajax_test_daten.php", {zahl1:12.2, zahl2:25.5},function(ergebnis) {$("#idAusgabe").html(ergebnis);}); });
Hyperlink 6 ruft eine XML-Datei auf. Es werden der Wert des Knotens knotenA und der
Wert des Attributs attributA des Knotens knotenB ermittelt und zum Inhalt der Tabel-
lenzelle:
$.post("jq_ajax_test.xml", function(ergebnis) {$("#idAusgabe").html(ergebnis.getElementsByTagName("knotenA")[0].firstChild.nodeValue + " / " + ergebnis.getElementsByTagName("knotenB")[0].getAttribute("attributA")); }); });
Die zugehörige XML-Datei:
<?xml version="1.0" encoding="utf-8"?><wurzel><knotenA>Wert des ersten Knotens</knotenA><knotenB attributA = "Erstes Attribut des zweiten Knotens"
attributB = "Zweites Attribut des zweiten Knotens">Wert des zweiten Knotens</knotenB>
</wurzel>
Listing 12.7 Datei »jq_ajax_test.xml«
4074.book Seite 355 Mittwoch, 3. Februar 2016 4:12 16
Auf einen Blick
Auf einen Blick
1 Einführung ................................................................................................................... 15
2 Grundlagen der Programmierung ....................................................................... 29
3 Eigene Objekte ............................................................................................................ 85
4 Ereignisse ...................................................................................................................... 103
5 Das Document Object Model (DOM) .................................................................. 127
6 Standardobjekte nutzen ......................................................................................... 143
7 Browserobjekte nutzen ........................................................................................... 193
8 Ajax ................................................................................................................................. 237
9 Cascading Style Sheets (CSS) ................................................................................. 257
10 Zweidimensionale Grafiken und Animationen mit SVG .............................. 297
11 Dreidimensionale Grafiken und Animationen mit Three.js ........................ 321
12 jQuery ............................................................................................................................ 337
13 jQuery UI ....................................................................................................................... 357
14 jQuery mobile ............................................................................................................. 367
15 Cookies .......................................................................................................................... 387
16 Beispielprojekte ......................................................................................................... 395
17 HTML5 ........................................................................................................................... 403
4074.book Seite 3 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
5
Inhalt
1 Einführung 15
1.1 Was mache ich mit JavaScript? ............................................................................................ 15
1.2 Was kann JavaScript nicht? ................................................................................................... 16
1.3 Browser und mobile Browser ................................................................................................ 17
1.4 ECMAScript .................................................................................................................................... 17
1.5 Aufbau des Buchs ....................................................................................................................... 17
1.6 Einrichten der Arbeitsumgebung ........................................................................................ 19
1.7 Eine erste HTML-Datei .............................................................................................................. 19
1.7.1 Die Codierung UTF-8 .................................................................................................... 21
1.8 Einige Sonderzeichen ................................................................................................................ 22
1.9 JavaScript innerhalb einer HTML-Datei ............................................................................ 23
1.10 JavaScript aus externer Datei ............................................................................................... 25
1.11 Kommentare ................................................................................................................................. 26
1.12 Kein JavaScript möglich ........................................................................................................... 27
2 Grundlagen der Programmierung 29
2.1 Speicherung von Werten ........................................................................................................ 29
2.1.1 Speicherung von Zeichenketten .............................................................................. 29
2.1.2 Namensregeln ............................................................................................................... 31
2.1.3 Ein- und Ausgabe von Zeichenketten .................................................................... 32
2.1.4 Speichern von Zahlen .................................................................................................. 33
2.1.5 Speichern von Wahrheitswerten ............................................................................. 35
2.1.6 Konstanten ..................................................................................................................... 36
2.2 Berechnungen durchführen ................................................................................................... 37
2.2.1 Rechenoperatoren ........................................................................................................ 37
2.2.2 Zuweisungsoperatoren .............................................................................................. 39
2.2.3 Eingabe von Zahlen ...................................................................................................... 40
4074.book Seite 5 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
6
2.3 Verschiedene Zweige eines Programms .......................................................................... 42
2.3.1 Verzweigungen mit »if … else« ................................................................................ 42
2.3.2 Bestätigung anfordern ............................................................................................... 45
2.3.3 Mehrere Bedingungen verknüpfen ........................................................................ 46
2.3.4 Eingabe von Zahlen prüfen ....................................................................................... 47
2.3.5 Wert und Typ von Variablen prüfen ...................................................................... 49
2.3.6 Priorität der Operatoren ............................................................................................. 50
2.3.7 Verzweigungen mit »switch … case« ..................................................................... 51
2.4 Programmteile wiederholen ................................................................................................. 53
2.4.1 Schleifen mit »for« ....................................................................................................... 53
2.4.2 Schleifen und Tabellen ............................................................................................... 56
2.4.3 Schleifen mit »while« .................................................................................................. 57
2.4.4 Schleifen mit »do … while« ........................................................................................ 58
2.4.5 Ein Spiel als Gedächtnistraining .............................................................................. 61
2.5 Fehler finden, Fehler vermeiden ......................................................................................... 63
2.5.1 Entwicklung eines Programms ................................................................................ 63
2.5.2 Fehler finden mit »onerror« ...................................................................................... 64
2.5.3 Ausnahmebehandlung mit »try … catch« ............................................................ 66
2.5.4 Ausnahmen werfen mit »throw« ........................................................................... 67
2.5.5 Firebug, Programm debuggen ................................................................................. 68
2.6 Programme zerlegen mit eigenen Funktionen ............................................................. 71
2.6.1 Einfache Funktionen ................................................................................................... 71
2.6.2 Funktionen auslagern ................................................................................................. 72
2.6.3 Funktionen mit Parametern ..................................................................................... 73
2.6.4 Funktionen mit Rückgabewert ................................................................................ 75
2.6.5 Beliebige Anzahl von Parametern ........................................................................... 76
2.6.6 Vorgabewerte für Parameter ................................................................................... 78
2.6.7 Restliche Parameter ..................................................................................................... 79
2.6.8 Gültigkeitsbereich von Variablen ........................................................................... 80
2.6.9 Anonyme Funktionen ................................................................................................. 81
2.7 Objektunabhängige Funktionen nutzen ......................................................................... 83
2.7.1 Die Funktion »eval()« .................................................................................................. 83
4074.book Seite 6 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
7
3 Eigene Objekte 85
3.1 Objekte und Eigenschaften .................................................................................................... 85
3.2 Methoden ...................................................................................................................................... 87
3.3 Objekt in Objekt .......................................................................................................................... 89
3.4 Vererbung ...................................................................................................................................... 91
3.5 Operationen mit Objekten ..................................................................................................... 94
3.5.1 Zugriffsoperatoren ....................................................................................................... 95
3.5.2 Verweise auf Objekte erzeugen und vergleichen .............................................. 96
3.5.3 Instanzen prüfen ........................................................................................................... 97
3.5.4 Typ ermitteln .................................................................................................................. 97
3.5.5 Eigenschaften prüfen .................................................................................................. 98
3.5.6 Kompakter Zugriff auf Eigenschaften ................................................................... 99
3.5.7 Eigenschaften löschen ................................................................................................ 99
3.6 Klassen in ECMAScript 2015 ................................................................................................... 100
3.7 Objekte in JSON ........................................................................................................................... 101
4 Ereignisse 103
4.1 Techniken der Ereignisbehandlung .................................................................................... 103
4.2 Klassische Ereignisbehandlung ............................................................................................ 104
4.2.1 Erste Eventhandler ....................................................................................................... 104
4.2.2 Formulare und Ajax ..................................................................................................... 107
4.2.3 Ereignisse im Formular ............................................................................................... 108
4.2.4 Maus-Ereignisse ............................................................................................................ 113
4.3 Ereignisse als Eigenschaften .................................................................................................. 115
4.4 Das Ereignisobjekt ..................................................................................................................... 118
4.5 Event Listener ............................................................................................................................... 121
4.5.1 Bubbling und Capturing ............................................................................................. 122
4.5.2 Externer Event Listener ............................................................................................... 124
4074.book Seite 7 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
8
5 Das Document Object Model (DOM) 127
5.1 Baum und Knoten ...................................................................................................................... 127
5.2 Knoten abrufen ........................................................................................................................... 129
5.3 Kindknoten ................................................................................................................................... 131
5.4 Knoten hinzufügen ................................................................................................................... 133
5.5 Knoten ändern ............................................................................................................................. 136
5.6 Knoten löschen ........................................................................................................................... 139
5.7 Eine Tabelle erzeugen .............................................................................................................. 141
6 Standardobjekte nutzen 143
6.1 Felder für große Datenmengen ........................................................................................... 143
6.1.1 Felder erzeugen ............................................................................................................. 144
6.1.2 Elemente hinzufügen und entfernen .................................................................... 148
6.1.3 Weitere Methoden ....................................................................................................... 150
6.1.4 Felder und Funktionen ................................................................................................ 152
6.1.5 Sortieren von Zahlenfeldern ..................................................................................... 153
6.1.6 Elemente in einem Feld finden ................................................................................ 155
6.1.7 Felder von Objekten ..................................................................................................... 157
6.1.8 Felder und Objekte in JSON ....................................................................................... 159
6.2 Zeichenketten verarbeiten .................................................................................................... 160
6.2.1 Operationen mit Zeichenketten .............................................................................. 161
6.2.2 Hyperlinks und Anker .................................................................................................. 167
6.2.3 Reguläre Ausdrücke ..................................................................................................... 168
6.3 Zahlen und Mathematik ......................................................................................................... 168
6.3.1 Objekt »Number« ......................................................................................................... 168
6.3.2 Erweiterung des »Number«-Objekts ..................................................................... 171
6.3.3 Objekt »Math« ............................................................................................................... 173
6.3.4 Winkelfunktionen ........................................................................................................ 175
6.4 Datum und Uhrzeit nutzen .................................................................................................... 177
6.4.1 Zeitangaben erzeugen ................................................................................................ 177
6.4.2 Zeitangaben ausgeben ............................................................................................... 179
4074.book Seite 8 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
9
6.4.3 Erweiterung des »Date«-Objekts ............................................................................ 181
6.4.4 Mit Zeitangaben rechnen .......................................................................................... 183
6.4.5 Zweite Erweiterung des »Date«-Objekts .............................................................. 186
6.4.6 Abläufe zeitlich steuern .............................................................................................. 187
6.4.7 Können Sie Zeiten schätzen? .................................................................................... 189
6.4.8 Feiertage in NRW .......................................................................................................... 192
7 Browserobjekte nutzen 193
7.1 Das Browserfenster, Objekt »window« ........................................................................... 193
7.1.1 Größe und Position ...................................................................................................... 193
7.1.2 Fenster öffnen und schließen ................................................................................... 194
7.1.3 Zeitliche Abläufe starten und stoppen .................................................................. 198
7.2 Die Historie, Objekt »history« .............................................................................................. 201
7.3 Die Adresse, Objekt »location« ............................................................................................ 202
7.3.1 Eigenschaften und Methoden .................................................................................. 202
7.3.2 Senden von Datei zu Datei ........................................................................................ 205
7.4 Das Dokument, Objekt »document« ................................................................................. 208
7.5 Alle Anker, Eigenschaft »anchors« ..................................................................................... 209
7.6 Alle Hyperlinks, Eigenschaft »links« .................................................................................. 211
7.7 Alle Bilder, Eigenschaft »images« ....................................................................................... 213
7.7.1 Eigenschaften ................................................................................................................ 214
7.7.2 Diashow und Einzelbild .............................................................................................. 216
7.8 Alle Formulare, Eigenschaft »forms« ................................................................................ 219
7.8.1 Zugriff auf Formulare .................................................................................................. 220
7.8.2 Formulare kontrollieren, Textfelder ....................................................................... 222
7.8.3 RadioButtons und CheckBoxen ................................................................................ 226
7.8.4 Auswahlmenüs .............................................................................................................. 230
7.8.5 Versteckte Formularelemente .................................................................................. 233
7.8.6 Lernspiel: Hauptstädte der Europäischen Union ............................................... 234
7.8.7 Dynamische Änderung von Auswahlmenüs ....................................................... 235
7.9 Der Bildschirm, Objekt »screen« ......................................................................................... 236
4074.book Seite 9 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
10
8 Ajax 237
8.1 Hallo Ajax ...................................................................................................................................... 238
8.1.1 Ein wenig Theorie ......................................................................................................... 240
8.2 Parameter senden ...................................................................................................................... 241
8.3 XML-Datei lesen .......................................................................................................................... 244
8.3.1 Einzelnes Objekt ........................................................................................................... 244
8.3.2 Sammlung von Objekten ........................................................................................... 246
8.3.3 Vorschläge beim Suchen ............................................................................................ 248
8.4 JSON-Datei lesen ........................................................................................................................ 252
8.4.1 Einzelnes Objekt ........................................................................................................... 252
8.4.2 Sammlung von Objekten ........................................................................................... 254
9 Cascading Style Sheets (CSS) 257
9.1 Aufbau und Regeln .................................................................................................................... 258
9.1.1 Orte und Selektoren .................................................................................................... 258
9.1.2 Kombinationen ............................................................................................................. 262
9.1.3 Kaskadierung und Überlagerung ............................................................................ 264
9.2 Position und verwandte Eigenschaften ........................................................................... 266
9.2.1 Position und Größe ...................................................................................................... 266
9.2.2 Lage in z-Richtung ........................................................................................................ 268
9.2.3 Bildausschnitt ................................................................................................................ 269
9.2.4 Transparenz .................................................................................................................... 271
9.3 CSS und JavaScript ..................................................................................................................... 272
9.3.1 CSS-Eigenschaften ändern ........................................................................................ 273
9.3.2 Regeln vorhandener Styles ändern ......................................................................... 275
9.3.3 Name der Eigenschaften für CSS und JavaScript ............................................... 279
9.3.4 Position und verwandte Eigenschaften ändern ................................................. 281
9.3.5 Sichtbarkeit ändern ..................................................................................................... 284
9.4 Animation ...................................................................................................................................... 287
9.4.1 Fünf Animationen, Aufbau ........................................................................................ 288
9.4.2 Animierte Änderung der Position ........................................................................... 290
9.4.3 Animierte Änderung des Ausschnitts .................................................................... 291
9.4.4 Animierte Änderung der Transparenz ................................................................... 292
4074.book Seite 10 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
11
9.4.5 Animierte Änderung der Farbe ................................................................................. 292
9.4.6 Animierter Bildwechsel ............................................................................................... 293
9.4.7 Animierter Wurf ............................................................................................................ 294
9.4.8 Animierter Sternenhimmel ....................................................................................... 295
10 Zweidimensionale Grafiken und Animationen mit SVG 297
10.1 Eine SVG-Datei erstellen ......................................................................................................... 297
10.2 Grundformen ................................................................................................................................ 300
10.2.1 Rechteck ........................................................................................................................... 300
10.2.2 Kreis und Ellipse ............................................................................................................ 301
10.2.3 Linie, Polylinie und Polygon ....................................................................................... 302
10.3 Pfade ................................................................................................................................................ 304
10.3.1 Gefüllte Pfade ................................................................................................................ 304
10.3.2 Gruppen, nicht gefüllte und geschlossene Pfade .............................................. 306
10.3.3 Pfade mit Kurven .......................................................................................................... 307
10.4 Animationen ................................................................................................................................. 308
10.4.1 Ablauf der Beispielanimationen .............................................................................. 308
10.4.2 Zeitgesteuerte Animationen .................................................................................... 310
10.4.3 Ereignisgesteuerte Animationen ............................................................................ 311
10.5 Rotationen ..................................................................................................................................... 312
10.6 Zugriff auf SVG-Elemente mit JavaScript ........................................................................ 314
10.7 Erzeugen von SVG-Elementen mit JavaScript ............................................................... 316
11 Dreidimensionale Grafiken und Animationen mit Three.js 321
11.1 Eine erste 3D-Grafik ................................................................................................................... 322
11.1.1 Das 3D-Koordinatensystem ...................................................................................... 322
11.1.2 Der Aufbau des Programms ...................................................................................... 323
11.1.3 Die Zeichnungsfläche und die Grafikszene ......................................................... 324
4074.book Seite 11 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
12
11.1.4 Das 3D-Objekt mit Geometrie und Material ....................................................... 325
11.1.5 Die Kamera ..................................................................................................................... 325
11.1.6 Die Lichtquelle und die Darstellung ....................................................................... 326
11.2 Eine Animation ............................................................................................................................ 327
11.3 Position, Perspektive und Licht ............................................................................................ 328
11.4 Verschiedene Formen ............................................................................................................... 330
11.4.1 Rechteck .......................................................................................................................... 331
11.4.2 Quader ............................................................................................................................. 332
11.4.3 Kegel ................................................................................................................................. 332
11.4.4 Kugel ................................................................................................................................. 334
11.4.5 Torus ................................................................................................................................. 334
12 jQuery 337
12.1 Aufbau ............................................................................................................................................ 338
12.2 Selektoren und Methoden ..................................................................................................... 340
12.3 Ereignisse ....................................................................................................................................... 344
12.4 Animationen ................................................................................................................................ 347
12.5 Beispiel: sinusförmige Bewegung ...................................................................................... 351
12.6 jQuery und Ajax .......................................................................................................................... 353
13 jQuery UI 357
13.1 Aufbau ............................................................................................................................................ 357
13.2 Elemente verschieben .............................................................................................................. 358
13.3 Elemente zu einem Ziel verschieben ................................................................................. 359
13.4 Elemente im Raster verschieben ......................................................................................... 361
13.5 Menü mit Untermenü .............................................................................................................. 362
13.6 Bereiche auf- und zuklappen ................................................................................................ 364
4074.book Seite 12 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
13
14 jQuery mobile 367
14.1 Aufbau ............................................................................................................................................. 367
14.2 Bereiche auf- und zuklappen ................................................................................................ 370
14.3 Ereignisse auf mobilen Geräten ........................................................................................... 372
14.4 Reaktionstraining ....................................................................................................................... 375
14.5 Formulare senden ...................................................................................................................... 376
14.6 Elemente eines E-Mail-Formulars ....................................................................................... 379
14.7 Weitere Formularelemente ................................................................................................... 381
15 Cookies 387
15.1 Cookies schreiben ....................................................................................................................... 387
15.2 Cookies lesen ................................................................................................................................ 388
15.3 Cookies löschen ........................................................................................................................... 390
15.4 Werden Cookies akzeptiert? ................................................................................................. 390
15.5 Beispiel für die Nutzung .......................................................................................................... 391
16 Beispielprojekte 395
16.1 Geldanlage .................................................................................................................................... 396
16.2 Fitnesswerte ................................................................................................................................. 396
16.3 Volkslauf ........................................................................................................................................ 397
16.4 Nummer der Kreditkarte prüfen ......................................................................................... 398
16.5 Patience .......................................................................................................................................... 398
16.6 Memory ........................................................................................................................................... 399
16.7 Snake ................................................................................................................................................ 400
16.8 Kopfrechnen ................................................................................................................................. 401
4074.book Seite 13 Mittwoch, 3. Februar 2016 4:12 16
Inhalt
14
17 HTML5 403
17.1 HTML5-Fähigkeit testen .......................................................................................................... 403
17.2 Allgemeine Formularelemente ............................................................................................ 404
17.3 Elemente für Zahlen ................................................................................................................. 410
17.4 Elemente für Zeitangaben ..................................................................................................... 414
17.5 Validierung von Formularen ................................................................................................. 418
17.6 Audiodateien abspielen .......................................................................................................... 421
17.7 Videodateien abspielen .......................................................................................................... 425
17.8 Zeichnungen im Canvas .......................................................................................................... 426
17.9 Bild im Canvas ............................................................................................................................. 431
17.10 Text im Canvas ............................................................................................................................ 433
17.11 Standortdaten nutzen ............................................................................................................. 435
17.12 Waytracking ................................................................................................................................. 439
17.13 Lagesensoren nutzen ............................................................................................................... 442
17.14 Beschleunigungssensoren nutzen ...................................................................................... 446
Anhang 451
A.1 Installation des Pakets »WAMP Stack« ........................................................................... 451
A.2 Liste der Schlüsselwörter ........................................................................................................ 452
Index ............................................................................................................................................................... 453
4074.book Seite 14 Mittwoch, 3. Februar 2016 4:12 16
Index
453
Index
- (Operator) .................................................................... 37
-- (Operator) .................................................................. 39
π (Pi) ................................................................................. 23
µ (mikro)......................................................................... 23
! (Operator) .................................................................... 46
!= (Operator) .......................................................... 42, 96
!== (Operator) ............................................................... 49
? : (Operator) ................................................................. 42
? (URL)............................................................................ 205
. (Operator) ............................................................. 86, 95
... (Parameter) ............................................................... 79
[ ] (Feld) ......................................................................... 145
[ ] (Objekt) ...................................................................... 95
{ } Blockklammern ...................................................... 42
© (copyright) ................................................................ 22
® (reg. trademark) ....................................................... 22
@ (at) ............................................................................... 22
* (Operator).................................................................... 37
*= (Operator) ................................................................. 39
/ (Operator) ................................................................... 37
/* */ (Kommentar) ...................................................... 26
// (Kommentar) ........................................................... 26
/= (Operator) ................................................................. 39
\n ....................................................................................... 32
& (Kaufmanns-Und) .................................................. 22
& (URL) .......................................................................... 205
&& (Operator) .............................................................. 46
< .................................................................................... 23
# (URL) .......................................................................... 203
% (Operator).................................................................. 37
%= (Operator) ............................................................... 39
‰ (Promille) ................................................................. 22
+ (Operator)
Addition ...................................................................... 34
Verkettung ................................................................. 31
zweideutig ................................................................. 40
++ (Operator) ................................................................ 39
+= (Operator) ................................................................ 39
< (Operator) ................................................................... 42
< (Zeichen kleiner) ...................................................... 23
<!-- -->
HTML ........................................................................... 26
SVG ............................................................................ 298
<= (Operator) ................................................................ 42
-= (Operator) .................................................................. 39
== (Operator) .......................................................... 42, 96
=== (Operator)............................................................... 49
> (Operator).................................................................... 42
> (Zeichen größer) ....................................................... 22
>= (Operator) ................................................................. 42
|| (Operator).................................................................... 46
$() (jQuery)................................................................... 340
€ (Euro) ............................................................................ 22
½ (ein Halb).................................................................... 22
¼ (ein Viertel) ................................................................ 22
² (hoch 2).......................................................................... 23
³ (hoch 3).......................................................................... 23
¾ (drei Viertel) .............................................................. 22
3D-Grafik ...................................................................... 321
3D-Koordinatensystem.......................................... 322
3D-Objekt ..................................................................... 323
erzeugen .................................................................. 325
Feld ............................................................................ 330
Position .................................................................... 326
A
a (HTML) .......................................................................... 20
a:active (CSS)..................................................... 276, 280
a:hover (CSS)..................................................... 276, 280
a:link (CSS) ......................................................... 276, 280
a:visited (CSS) ................................................... 276, 280
about:config .................................................................. 28
abs() ................................................................................ 173
Absatz ............................................................................... 20
Abstand (CSS) ............................................................. 280
Acceleration................................................................ 446
acceleration
DeviceMotionEvent ............................................ 450
accelerationIncludingGravity
DeviceMotionEvent ............................................ 450
accordion() (jQuery UI)........................................... 364
action (HTML) ............................................................ 111
add() (Three.js) ........................................................... 325
addColorStop()........................................................... 430
addEventListener()
window .................................................................... 121
4074.book Seite 453 Mittwoch, 3. Februar 2016 4:12 16
Index
454
Addition .......................................................................... 34
Adresse ......................................................................... 202
aufrufende ............................................................... 208
Ajax ....................................................................... 108, 237
jQuery........................................................................ 353
jQuery mobile ........................................................ 376
JSON-Feld ................................................................. 254
JSON-Objekt ............................................................ 252
Parameter................................................................ 241
Suchzeichenkette .................................................. 248
XML-Daten .............................................................. 244
alert()
window ....................................................................... 32
alinkColor
document................................................................. 208
all
innerHTML .............................................................. 136
alpha (Winkel)
DeviceOrientationEvent .................................... 442
rotationRate ........................................................... 450
alt
img (HTML) ............................................................... 20
Alter berechnen ........................................................ 185
altitude
coords........................................................................ 439
altKey
Ereignisobjekt ........................................................ 121
anchor() ........................................................................ 167
anchors ......................................................................... 209
length ........................................................................ 209
name.......................................................................... 209
text ............................................................................. 209
Android ............................................................... 367, 436
Anführungsstriche ..................................................... 30
animate (SVG) ............................................................ 310
animate() (jQuery)........................................... 344, 347
animateTransform (SVG) ...................................... 314
Animation (CSS)........................................................ 287
Animation (jQuery)
nach Ende ................................................................ 349
paralleler Ablauf ................................................... 350
Sinuskurve ............................................................... 351
Zeitdauer.................................................................. 349
Zeitverlauf ............................................................... 349
Zeitverzögerung .................................................... 350
Animation (SVG)....................................................... 308
Drehbuch ................................................................. 311
ereignisgesteuert .................................................. 311
Animation (SVG) (Forts.)
zeitgesteuert ........................................................... 310
Animation (Three.js) ............................................... 327
Anker.................................................................... 203, 209
mit Zeichenkette ................................................... 167
Name ......................................................................... 209
Text ............................................................................ 209
Anonyme Funktion................................... 81, 89, 117
Anweisungsblock ........................................................ 42
Apache .......................................................................... 451
appendChild() ............................................................ 133
SVG ............................................................................. 319
Äquator ........................................................................ 437
Arbeitstag .................................................................... 192
arc() ................................................................................ 429
arguments...................................................................... 77
Array � Feld
aspect (Three.js) ........................................................ 326
Asynchronous JavaScript and XML .................. 237
attachEvent()
window ..................................................................... 121
attributeName (SVG) .............................................. 310
Attributknoten................................................. 127, 298
audio
currentTime ............................................................ 423
HTML ......................................................................... 421
load() ......................................................................... 424
loop ............................................................................ 423
pause() ...................................................................... 423
play().......................................................................... 423
Audiodatei ......................................................... 421, 425
Audioplayer................................................................ 421
Ausgabe
alert() ........................................................................... 32
document.write() .................................................... 24
Objekt .......................................................................... 87
Ausnahme
werfen ......................................................................... 67
Ausnahmebehandlung ............................................. 66
Ausrichtung (CSS) .................................................... 280
Ausschnitt (CSS)........................................................ 269
ändern....................................................................... 281
animieren ................................................................ 287
Auswahlmenü ........................................................... 230
Änderungsereignis ............................................... 111
Inhalt ändern ......................................................... 235
Option hinzufügen............................................... 232
autofocus (HTML) .................................................... 406
4074.book Seite 454 Mittwoch, 3. Februar 2016 4:12 16
Index
455
Automatischer Funktionsaufruf .............. 187, 287
autoplay (HTML) ....................................................... 423
availHeight
screen ........................................................................ 236
availWidth
screen ........................................................................ 236
AVI-Datei ...................................................................... 425
B
back()
history ...................................................................... 201
backgroundAttachment
style ........................................................................... 281
background-attachment (CSS) ............................ 281
backgroundColor
style ........................................................ 280, 284, 293
background-color (CSS) .......................................... 280
background-image (CSS)........................................ 280
Bahnbeschleunigung .............................................. 447
Bahngeschwindigkeit.............................................. 447
Basislinie
für Text ..................................................................... 433
Baum (DOM) ............................................................... 127
Bedienbarkeit ............................................................. 419
Bedingung ..................................................................... 42
für Schleife ................................................................. 57
verknüpfen................................................................. 46
begin (SVG).................................................................. 311
beginPath() .................................................................. 429
Benutzeroberfläche ................................................. 357
Benutzerverhalten ................................................... 387
Berechnung................................................................... 37
Wert ermitteln .......................................................... 84
Beschleunigung......................................................... 446
Beschleunigungssensor
Mobilgerät .............................................................. 446
beta (Winkel)
DeviceOrientationEvent.................................... 442
rotationRate .......................................................... 450
Betrag .............................................................................. 47
Betriebsdatenerfassung ......................................... 192
Bézierkurve ................................................................. 307
bgColor
document ................................................................ 208
Bibliothek ....................................... 321, 337, 357, 367
Bild........................................................................... 20, 213
Datei.......................................................................... 214
Größe ........................................................................ 214
in Zeichnung .......................................................... 431
Bildschirm ................................................................... 236
bind()
jQuery ....................................................................... 346
jQuery mobile ........................................................ 372
Bitnami ......................................................................... 451
Blickrichtung.............................................................. 326
Block
von Anweisungen ................................................... 42
body
document ................................................................ 117
body (HTML).................................................................. 20
Body-Mass-Index...................................................... 396
Bogen
zeichnen................................................................... 429
Bogenkurve................................................................. 307
Bogenmaß ......................................................... 176, 331
Bogenminute ............................................................. 439
Bogensekunde ........................................................... 439
Bonuskapitel
reguläre Ausdrücke ............................................. 168
Bonusprogramme
animierter Sternenhimmel .............................. 295
animierter Wurf.................................................... 294
CSS-Beispiele ................................................. 257, 280
dynamisches Menü ............................................. 235
Feiertage in NRW ................................................. 192
Fitnesswerte ........................................................... 396
Geldanlage ............................................................. 396
Hauptstädte der EU ............................................ 234
Kartennummer prüfen ...................................... 398
Memory ................................................................... 399
Patience ................................................................... 398
Reaktionstraining................................................ 375
Snake ............................................................... 400, 401
Three.js-Formen.................................................... 330
Volkslaufanmeldung.......................................... 397
Waytracking .......................................................... 439
boolean
Typ ................................................................................ 50
Boolescher Wert ........................................................... 35
border
style ........................................................................... 281
border (CSS) ................................................................ 281
border (HTML) .............................................................. 20
4074.book Seite 455 Mittwoch, 3. Februar 2016 4:12 16
Index
456
borderCollapse
style ............................................................................ 281
border-collapse (CSS) .............................................. 281
borderRadius
style ............................................................................ 281
border-radius (CSS) .................................................. 281
BoxGeometry (Three.js)................................ 325, 332
boxShadow
style ............................................................................ 281
box-shadow (CSS) ..................................................... 281
br (HTML)........................................................................ 20
break
Schleife ........................................................................ 55
switch .......................................................................... 52
Breite
CSS .............................................................................. 266
Breite ändern (jQuery) ........................................... 348
Breitengrad ................................................................. 436
Umrechnung .......................................................... 437
Browser
Cache ......................................................................... 203
Chronik ..................................................................... 201
Erweiterung .............................................................. 68
Historie ..................................................................... 201
-objekt ....................................................................... 193
Browserweiche ....................................... 121, 124, 272
Bubbling....................................................................... 121
Button
Klick-Ereignis.......................................................... 105
by (SVG) ........................................................................ 311
C
Cache ............................................................................. 203
callback (jQuery) ....................................................... 349
camelCase....................................................................... 31
Canvas........................................................................... 324
addColorStop() ...................................................... 430
arc() ............................................................................ 429
beginPath().............................................................. 429
createLinearGradient() ....................................... 430
createRadialGradient()....................................... 431
drawImage() ........................................................... 431
fill() ............................................................................. 429
fillRect() .................................................................... 429
fillStyle ............................................................ 428, 431
fillText() .................................................................... 433
Canvas (Forts.)
font............................................................................. 434
getContext()............................................................ 427
lineTo()...................................................................... 429
lineWidth ................................................................. 428
moveTo() .................................................................. 429
stroke() ...................................................................... 429
strokeRect() ............................................................. 429
strokeStyle............................................................... 428
strokeText() ............................................................. 433
textBaseline ............................................................ 433
canvas
HTML ......................................................................... 426
Capturing .................................................................... 121
Cascading Style Sheets ........................................... 257
case ................................................................................... 51
catch ................................................................................. 66
ceil() ............................................................................... 173
charAt()......................................................................... 161
charCodeAt() .............................................................. 161
CheckBox
Eigenschaften ........................................................ 226
Klick-Ereignis ......................................................... 111
checked
elements ......................................................... 113, 226
HTML ............................................................... 111, 226
childNodes .................................................................. 131
Chrome......................................................................... 367
Chronik ........................................................................ 201
circle (SVG) .................................................................. 302
class (HTML) ............................................................... 261
class (Klasse) ............................................................... 100
className (CSS) ........................................................ 273
click (SVG) ................................................................... 312
click() (jQuery) ........................................................... 340
clip rect
CSS .............................................................................. 269
style.................................................................. 284, 291
cloneNode() ................................................................ 136
close()
document ...................................................... 107, 197
window ..................................................................... 194
closed
window ..................................................................... 197
Codec............................................................................. 426
Codierung....................................................................... 21
collapsible() (jQmobile).......................................... 372
collapsible-set (jQmobile) ..................................... 372
4074.book Seite 456 Mittwoch, 3. Februar 2016 4:12 16
Index
457
color
CSS.............................................................................. 280
HTML ........................................................................ 407
style ........................................................................... 280
color (Three.js) ........................................................... 325
colorDepth
screen ........................................................................ 236
complete
images ...................................................................... 214
concat()
Feld ............................................................................ 150
confirm()
window ....................................................................... 45
const ................................................................................ 36
constructor() ................................................................. 93
Container (HTML)....................................................... 20
content (jQmobile)................................................... 370
continue ......................................................................... 55
controlgroup (jQmobile) ....................................... 372
controls (HTML) ........................................................ 423
Cookie.................................................................. 208, 387
Adresse speichern ................................................ 391
Gültigkeit ................................................................ 388
löschen ..................................................................... 390
speichern ................................................................. 387
testen ........................................................................ 390
Vorrang.................................................................... 388
cookie
document ....................................................... 208, 388
coords
altitude..................................................................... 439
geolocation ............................................................ 439
latitude..................................................................... 439
longitude ................................................................. 439
cos() ................................................................................ 176
Countdown ................................................................. 187
createElement()
document ................................................................ 133
createElementNS() (SVG) ....................................... 318
createLinearGradient() ........................................... 430
createRadialGradient() ........................................... 431
createTextNode()
document ................................................................ 133
CSS .................................................................................. 257
a:active............................................................ 276, 280
a:hover ............................................................ 276, 280
a:link ................................................................ 276, 280
a:visited .......................................................... 276, 280
CSS (Forts.)
Abstand.................................................................... 280
ändern mit jQuery ............................................... 340
Animation .............................................................. 287
attachment ............................................................ 281
Aufbau...................................................................... 258
Ausrichtung ........................................................... 280
Ausschnitt ............................................................... 269
Ausschnitt ändern ............................................... 281
Ausschnitt animieren......................................... 287
background-color ................................................ 280
background-image.............................................. 280
border ....................................................................... 281
border-collapse ..................................................... 281
border-radius......................................................... 281
box-shadow ........................................................... 281
Breite......................................................................... 266
class ........................................................................... 261
clip rect..................................................................... 269
color .......................................................................... 280
cursor........................................................................ 280
dritte Dimension .................................................. 266
Eigenschaft ändern ............................................. 273
ein- und ausblenden ........................................... 288
eingebettetes ......................................................... 258
Einzug ....................................................................... 280
erste Zeile ................................................................ 280
erstes Zeichen ........................................................ 280
externe Datei ......................................................... 258
Farbe ......................................................................... 280
Farbe animieren ................................................... 288
filter ........................................................................... 271
first-letter ................................................................ 280
first-line ................................................................... 280
float ........................................................................... 281
font-family ............................................................. 281
font-size ................................................................... 281
font-style ................................................................. 281
font-weight............................................................. 281
height........................................................................ 266
Hintergrundbild ................................................... 280
Hintergrundfarbe ................................................ 280
Hintergrundfarbe ändern................................. 281
Höhe.......................................................................... 266
HTML-Selektor ...................................................... 258
Hyperlink ................................................................ 280
Hyperlinkfarbe ...................................................... 275
ID-Selektor .............................................................. 258
4074.book Seite 457 Mittwoch, 3. Februar 2016 4:12 16
Index
458
CSS (Forts.)
inline .......................................................................... 258
Innenabstand ......................................................... 280
jQuery mobile ........................................................ 367
Kaskadierung ......................................................... 264
Klasse ändern......................................................... 273
Klasse zuordnen .................................................... 261
Klassenselektor...................................................... 258
Kombination .......................................................... 262
Kommentar ............................................................ 259
left............................................................................... 266
line-height ............................................................... 281
Listenstil ................................................................... 280
list-style .................................................................... 280
margin ...................................................................... 280
Mauszeiger.............................................................. 280
opacity ...................................................................... 271
Ort der Definition ................................................. 258
padding .................................................................... 280
Position..................................................................... 266
Position ändern ..................................................... 281
Position animieren .............................................. 287
Pseudoklasse .......................................................... 275
Rahmen .................................................................... 281
Regel ändern........................................................... 275
Regeln........................................................................ 258
runde Ecke ............................................................... 281
Schatten ................................................................... 281
Schriftart .................................................................. 281
Schriftgewicht ........................................................ 281
Schriftgröße ............................................................ 281
Schriftstil .................................................................. 281
Selektor ..................................................................... 258
Selektor, verschachtelter ................................... 262
Sichtbarkeit ändern ............................................. 284
Tabellenrahmen .................................................... 281
text-align ................................................................. 280
text-decoration ..................................................... 281
text-indent .............................................................. 280
Textumfluss ............................................................ 281
top .............................................................................. 266
Transparenz............................................................ 271
Transparenz ändern ............................................ 281
Transparenz animieren...................................... 288
Überlagerung ......................................................... 264
Unterstreichung .................................................... 281
Validation................................................................ 262
vertical-align .......................................................... 280
CSS (Forts.)
visibility .................................................................... 284
Wasserzeichen ....................................................... 281
width ......................................................................... 266
Zeilenhöhe ............................................................... 281
z-index ...................................................................... 268
z-index ändern ...................................................... 281
css() (jQuery) .............................................................. 340
cssFloat
style............................................................................ 281
cssRules
selectorText ............................................................ 279
styleSheets............................................................... 279
ctrlKey
Ereignisobjekt ........................................................ 121
currentTime
audio ......................................................................... 423
cursor (CSS)................................................................. 280
CylinderGeometry (Three.js) ............................... 332
D
Darstellung ................................................................. 327
data
object ......................................................................... 299
data-ajax (jQmobile) ............................................... 379
datalist (HTML).......................................................... 406
data-role (jQmobile)................................................ 370
data-theme (jQmobile) .......................................... 379
data-type (jQmobile)............................................... 372
Date................................................................................ 177
dateAdd() ....................................................... 183, 186
dateFormat() ................................................ 179, 181
getDate() .................................................................. 182
getDay().................................................................... 182
getFullYear() ........................................................... 182
getHours() ............................................................... 182
getMilliseconds() .................................................. 182
getMinutes() ........................................................... 182
getMonth() .............................................................. 182
getSeconds() ........................................................... 182
getTimezoneOffset() ............................................ 179
-Objekt erweitern ........................................ 181, 186
toGMTString() ........................................................ 179
toLocaleString()..................................................... 179
toUTCString() ......................................................... 179
date (HTML) ....................................................... 384, 416
4074.book Seite 458 Mittwoch, 3. Februar 2016 4:12 16
Index
459
date.js............................................................................. 180
dateAdd()
Date .................................................................. 183, 186
dateFormat()
Date .................................................................. 179, 181
Dateityp
AVI ............................................................................. 425
HTML ........................................................................... 21
JS .................................................................................... 25
MP4............................................................................ 425
OGV ........................................................................... 425
WAV........................................................................... 422
WEBM ....................................................................... 425
Daten speichern ................................................. 16, 387
datetime (HTML)....................................................... 416
datetime-local (HTML)............................................ 416
Datum ........................................................................... 177
eingeben ......................................................... 384, 414
dblclick() (jQuery) ..................................................... 345
Debuggen....................................................................... 68
default ............................................................................. 52
Definition
Prototyp...................................................................... 86
Deklaration ................................................................... 30
delay() (jQuery) .......................................................... 350
delete ...................................................................... 99, 148
deprecated ................................................................... 100
detachEvent()
window .................................................................... 121
DeviceMotionEvent................................................. 446
acceleration............................................................ 450
accelerationIncludingGravity......................... 450
rotationRate .......................................................... 450
DeviceOrientationEvent ........................................ 442
alpha ......................................................................... 442
beta............................................................................ 442
gamma ..................................................................... 442
Dezimalpunkt ..................................................... 41, 244
Dezimalzahl .................................................................. 41
Diashow ........................................................................ 216
Dieses Objekt .............................................................. 106
disabled
elements .................................................................. 421
HTML ........................................................................ 419
Division .......................................................................... 37
do while .......................................................................... 58
document .................................................................... 208
alinkColor ............................................................... 208
document (Forts.)
bgColor .................................................................... 208
body .......................................................................... 117
close()............................................................... 107, 197
cookie .............................................................. 208, 388
createElement() .................................................... 133
createTextNode() ................................................. 133
DOM-Zugriff........................................................... 127
fgColor...................................................................... 208
getElementById() ........................................ 117, 129
getElementsByTagName()....................... 129, 246
getSelection() ......................................................... 208
lastModified ........................................................... 209
linkColor .................................................................. 208
open()............................................................... 107, 197
referrer ..................................................................... 208
styleSheets .............................................................. 279
title ............................................................................ 208
vlinkColor................................................................ 208
write() ....................................................... 24, 107, 197
Document Object Model ....................................... 127
Dokument ................................................................... 208
Änderung ................................................................ 208
Farben ...................................................................... 208
neu schreiben ............................................... 107, 197
öffnen .............................................................. 107, 197
schließen......................................................... 107, 197
Titel............................................................................ 208
wurde geladen.............................................. 105, 340
DOM............................................................................... 127
Inspektor ................................................................. 128
domElement (Three.js) ........................................... 325
Downloadpaket ............................................................ 18
Drag&Drop (jQuery UI) ....................... 358, 359, 361
draggable() (jQuery UI) ........................................... 359
drawImage()................................................................ 431
Dreidimensionale Grafik....................................... 321
Dreiecksfläche............................................................ 325
Dritte Dimension (CSS) .......................................... 266
drop (jQuery UI) ........................................................ 360
droppable() (jQuery UI) .......................................... 360
Dualzahl .......................................................................... 41
dur (SVG) ...................................................................... 311
duration (jQuery)...................................................... 349
4074.book Seite 459 Mittwoch, 3. Februar 2016 4:12 16
Index
460
E
E ....................................................................................... 173
e (Eulersche Zahl) ..................................................... 173
easing (jQuery) .......................................................... 349
ECMAScript .................................................................... 17
ECMAScript 2015 .......................................................... 15
endsWith() ............................................................... 164
find() .......................................................................... 155
findIndex() ............................................................... 155
for-of-Schleife ......................................................... 145
includes().................................................................. 164
Klassen ...................................................................... 100
log10() ....................................................................... 174
Number.isInteger() ............................................... 169
repeat() ..................................................................... 166
sign() .......................................................................... 174
startsWith() ............................................................. 164
Editor................................................................................ 19
e-Format ......................................................................... 34
eh.js ................................................................................ 124
Eigenschaft
ist Ereignis ............................................................... 115
ist Objekt .................................................................... 89
Name erzeugen ....................................................... 95
Prototyp ..................................................................... 86
prüfen .......................................................................... 98
Vererbung .................................................................. 91
Ein- und ausblenden (CSS).................................... 288
Eingabe
Ja oder Nein............................................................... 45
prompt() .............................................................. 32, 40
Eingebettetes CSS ..................................................... 258
Einleseschleife .............................................................. 59
Einrückung .................................................................... 44
Einschränkung ............................................................. 16
Einzug (CSS) ................................................................ 280
Element
in Feld ........................................................................ 143
in Formular ............................................................. 219
elements ...................................................................... 219
checked ........................................................... 113, 226
disabled .................................................................... 421
name.......................................................................... 113
selected ..................................................................... 230
stepDown() .............................................................. 413
stepUp() .................................................................... 413
type ............................................................................ 229
elements (Forts.)
validity...................................................................... 421
value ................................................................ 113, 222
valueAsDate ........................................................... 418
valueAsNumber .................................................... 414
willValidate............................................................. 421
Ellipse............................................................................ 302
ellipse (SVG)................................................................ 302
else .................................................................................... 42
email (HTML) .................................................... 379, 408
E-Mail-Adresse........................................................... 408
endsWith()................................................................... 161
Entity................................................................................ 22
Erdbeschleunigung ................................................. 447
Ereignis......................................................................... 103
binden an Methode ............................................. 346
devicemotion ......................................................... 446
deviceorientation ................................................. 442
Dokument geladen .............................................. 105
Doppelklick ............................................................. 345
Formular gesendet ............................................... 111
Formular zurückgesetzt..................................... 111
ist Eigenschaft ....................................................... 115
jQuery........................................................................ 344
Klick ........................................................................... 105
markiert ................................................................... 113
Maus bewegt ................................................ 113, 346
Maus heraus ................................................. 113, 345
Maus hinein .................................................. 113, 345
Maustaste gedrückt .................................. 113, 346
Maustaste losgelassen ............................. 113, 346
Quelle ........................................................................ 121
registrieren.............................................................. 121
Taste gedrückt ....................................................... 120
Ereignisobjekt......................................... 118, 224, 347
Position .................................................................... 121
preventDefault() ................................................... 225
Quelle ........................................................................ 115
Sondertaste ............................................................. 121
target......................................................................... 121
Tastencode .............................................................. 121
Typ.............................................................................. 121
Erste Zeile (CSS) ......................................................... 280
Erstes Zeichen (CSS) ................................................ 280
Eulersche Zahl e ........................................................ 173
Euro .................................................................................. 22
eval() .................................................... 83, 102, 159, 254
Evaluieren ...................................................................... 84
4074.book Seite 460 Mittwoch, 3. Februar 2016 4:12 16
Index
461
Event .............................................................................. 103
event
returnValue ............................................................ 226
srcElement .............................................................. 121
window .................................................................... 120
Event Listener ............................................................ 121
externer.................................................................... 124
Eventhandler .............................................................. 103
zurücksetzen .......................................................... 118
zuweisen .................................................................. 117
Exception Handling................................................... 66
exp() ............................................................................... 173
Exponentialformat .................................................... 34
Exponentialfunktion .............................................. 173
eXtensible Markup Language .............................. 244
Externes CSS ............................................................... 258
Externes JavaScript ............................................. 25, 72
Extrema ........................................................................ 152
F
fadeIn() (jQuery) ........................................................ 351
fadeOut() (jQuery) .................................................... 351
fadeTo() (jQuery) ....................................................... 351
fadeToggle() (jQuery)............................................... 351
false .................................................................................. 35
far (Three.js) ................................................................ 326
Farbe .............................................................................. 208
animieren (CSS)..................................................... 288
CSS.............................................................................. 280
zuweisen .................................................................. 284
Farbtafel........................................................................ 407
Farbtiefe ....................................................................... 236
Farbverlauf .................................................................. 430
Fehler ............................................................................... 63
erzeugen ..................................................................... 67
finden........................................................................... 64
logischer ..................................................................... 63
vermeiden .................................................................. 64
Fehlerobjekt .................................................................. 67
Fehlersuche
alert() ........................................................................... 33
Feiertag ......................................................................... 192
Feld ................................................................................. 143
an Funktion ............................................................ 152
aus Feld erzeugen ................................................ 150
ausgeben ................................................................. 145
Feld (Forts.)
Element .................................................................... 143
Element entfernen ............................................... 148
Element finden ...................................................... 155
Element hinzufügen............................................ 148
Elementinhalt löschen ....................................... 148
erzeugen .................................................................. 144
Extrema ................................................................... 152
füllen ......................................................................... 146
in Zeichenkette umwandeln ............................ 150
Index ......................................................................... 143
kompakte Schreibweise..................................... 159
mehrdimensional ................................................ 147
mit Zeichenkette .................................................. 161
sortieren nach Zahlen ........................................ 153
sortieren nach Zeichen ...................................... 150
toString() ................................................................. 145
umdrehen................................................................ 150
verbinden ................................................................ 150
von 3D-Objekten .................................................. 330
von Objekten ......................................................... 157
Fenster
füllen ......................................................................... 194
Größe ........................................................................ 193
Name ........................................................................ 196
öffnen ....................................................................... 194
Position .................................................................... 193
schließen.................................................................. 195
Status ........................................................................ 194
fgColor
document ................................................................ 208
file:// .............................................................................. 202
fill (SVG).............................................................. 301, 311
fill() ................................................................................. 429
Feld ............................................................................ 146
fillRect() ........................................................................ 429
fillStyle ................................................................ 428, 431
fillText() ........................................................................ 433
Film ............................................................. 287, 344, 347
filter
CSS ............................................................................. 271
style .................................................................. 284, 292
finally ............................................................................... 66
find()
Feld ............................................................................ 155
findIndex()
Feld ............................................................................ 155
finit................................................................................. 169
4074.book Seite 461 Mittwoch, 3. Februar 2016 4:12 16
Index
462
Firebug............................................................................. 68
Firefox.............................................................................. 18
firstChild ............................................................. 130, 246
first-letter (CSS) ......................................................... 280
first-line (CSS) ............................................................ 280
Flip-Switch .................................................................. 381
float (CSS)..................................................................... 281
floor()...................................................................... 60, 173
font................................................................................. 434
fontFamily
style ............................................................................ 281
font-family (CSS)....................................................... 281
fontSize
style ............................................................................ 281
font-size (CSS) ............................................................ 281
fontStyle
style ............................................................................ 281
font-style (CSS) .......................................................... 281
fontWeight
style ............................................................................ 281
font-weight (CSS) ...................................................... 281
footer (jQmobile)...................................................... 370
for ............................................................................ 53, 145
for-in.............................................................................. 100
format()
Number..................................................................... 171
Formatierungsvorlage ........................................... 257
forms ............................................................................. 219
noValidate............................................................... 420
Formular ...................................................................... 219
Element........................................................... 108, 219
Element hinzufügen ............................................ 229
gesendetes ............................................................... 111
Gültigkeit ....................................................... 222, 418
jQuery mobile ........................................................ 376
Name ......................................................................... 221
prüfen ........................................................................ 107
Sendemethode ....................................................... 111
senden ....................................................................... 224
Senden verhindern ..................................... 225, 406
Validierung ................................................... 222, 418
Ziel .............................................................................. 111
Zugriff........................................................................ 220
zurückgesetztes ..................................................... 111
Formularelement
jQuery mobile ........................................................ 381
Name ..................................................... 111, 113, 221
verstecktes ............................................................... 233
Formularelement (Forts.)
Wert ................................................................. 111, 113
for-of ............................................................................. 145
Fortschrittsanzeige.................................................. 412
forward()
history ....................................................................... 201
fov (Three.js)............................................................... 326
Freemake Video Converter .................................. 425
from (SVG) .................................................................. 311
fromCharCode() ........................................................ 161
Füllfarbe ....................................................................... 301
function
Typ................................................................................ 97
Funktion ......................................................................... 71
als Prototyp .............................................................. 86
anonyme .................................................... 81, 89, 117
Aufruf .......................................................................... 72
auslagern ................................................................... 72
automatisch aufrufen .............................. 187, 287
ist Methode ............................................................... 87
ist Variable ................................................................ 81
mit Feld..................................................................... 152
objektunabhängige ............................................... 83
Parameter.................................................................. 73
Rückgabewert .......................................................... 75
Verweis auf ............................................................. 154
vordefinierte ............................................................. 83
zuweisen ........................................................... 83, 117
Funktionsbibliothek .................................................. 72
G
g (SVG) .......................................................................... 306
gamma (Winkel)
DeviceOrientationEvent .................................... 442
rotationRate ........................................................... 450
Gedächtnistraining .................................................... 61
geolocation
coords........................................................................ 439
getCurrentPosition() ........................................... 437
navigator ................................................................. 435
timestamp ............................................................... 439
Geometrie ................................................................... 325
vorgefertigt ............................................................. 325
Geschwindigkeit ....................................................... 446
aufzeichnen ............................................................ 440
4074.book Seite 462 Mittwoch, 3. Februar 2016 4:12 16
Index
463
getAttribute().................................................... 129, 246
SVG ............................................................................ 316
getContext() ................................................................ 427
getCurrentPosition()
geolocation ............................................................ 437
getDate()
Date ........................................................................... 182
getDay()
Date ........................................................................... 182
getElementById()
document ....................................................... 117, 129
SVG ............................................................................ 315
getElementsByClassName() ................................. 261
getElementsByTagName()
document ....................................................... 129, 246
getFullYear()
Date ........................................................................... 182
getHours()
Date ........................................................................... 182
GET-Methode ............................................................. 240
getMilliseconds()
Date ........................................................................... 182
getMinutes()
Date ........................................................................... 182
getMonth()
Date ........................................................................... 182
getSeconds()
Date ........................................................................... 182
getSelection()
document ................................................................ 208
getTimezoneOffset()
Date ........................................................................... 179
Gitternetz-Darstellung ........................................... 331
Gleichheitszeichen..................................................... 42
Globale Variable .......................................................... 80
GMT................................................................................ 177
go()
history ...................................................................... 201
Google Maps ..................................................... 205, 436
Google Nexus 7 Tablet ............................................ 436
google.maps
LatLng....................................................................... 439
Map ........................................................................... 439
Marker ...................................................................... 439
GPS.................................................................................. 435
Gradient
linearer ..................................................................... 430
radialer..................................................................... 431
Grafik
dreidimensional ................................................... 321
zweidimensional .................................................. 297
Grafikszene ................................................................. 324
Greenwich ................................................................... 437
Greenwich Mean Time ........................................... 177
grid (jQuery UI).......................................................... 362
Groß- und Kleinschreibung .................................... 24
Größer als ....................................................................... 42
Gültigkeitsbereich....................................................... 80
H
Haltepunkt ..................................................................... 69
Harmony......................................................................... 17
hasChildNodes() ........................................................ 131
hash
links ........................................................................... 211
location.................................................................... 203
head (HTML) .................................................................. 20
header (jQmobile) .................................................... 370
height
CSS ............................................................................. 266
images ...................................................................... 214
jQuery ....................................................................... 348
screen........................................................................ 236
Hervorhebung
von Text ................................................................... 406
Herzfrequenz ............................................................. 396
hidden (HTML)........................................................... 234
hide() (jQuery) ............................................................ 351
Hintergrundbild (CSS) ............................................ 280
Hintergrundfarbe
ändern (CSS) ........................................................... 281
Hintergrundfarbe (CSS).......................................... 280
Historie ......................................................................... 201
history........................................................................... 201
back() ........................................................................ 201
forward() ................................................................. 201
go()............................................................................. 201
length........................................................................ 201
hoch (x hoch y) .......................................................... 173
Hochformat ................................................................ 442
Höhe .............................................................................. 440
ändern (jQuery) .................................................... 348
CSS ............................................................................. 266
4074.book Seite 463 Mittwoch, 3. Februar 2016 4:12 16
Index
464
Höhendifferenz
aufzeichnen ............................................................ 440
host
links ............................................................................ 211
location .................................................................... 202
hostname
links ............................................................................ 211
location .................................................................... 202
hover() (jQuery)......................................................... 346
href
HTML ........................................................................... 20
links ............................................................................ 211
location .................................................................... 202
HTML................................................................................ 19
audio.......................................................................... 421
autofocus ................................................................. 406
autoplay ................................................................... 423
canvas ....................................................................... 426
color ........................................................................... 407
controls..................................................................... 423
datalist...................................................................... 406
date ............................................................................ 416
datetime ................................................................... 416
datetime-local........................................................ 416
disabled .................................................................... 419
email ................................................................ 379, 408
Kommentar .............................................................. 26
list ............................................................................... 407
loop ............................................................................ 423
mark........................................................................... 406
max ............................................................................ 411
meter ......................................................................... 412
min ............................................................................. 411
month........................................................................ 417
novalidate ............................................................... 419
number ..................................................................... 411
placeholder ............................................................. 406
progress .................................................................... 412
range.......................................................................... 411
required .......................................................... 406, 412
search ........................................................................ 407
source ........................................................................ 425
src................................................................................ 423
step ............................................................................. 411
tel ................................................................................ 408
time ............................................................................ 416
url...................................................................... 379, 408
Validation.................................................................. 20
HTML (Forts.)
video .......................................................................... 425
week ........................................................................... 417
html (HTML).................................................................. 20
HTML5 .......................................................................... 403
testen ......................................................................... 403
html() (jQuery) .......................................................... 340
HTML-Datei ................................................................... 21
mit jQuery laden ................................................... 353
HTML-Element
ändern....................................................................... 340
auf- und zuklappen ................................... 364, 370
beschriften............................................................... 380
identifizieren .......................................................... 116
verschieben ............................................................. 358
verschieben in Raster .......................................... 361
verschieben zu Ziel ............................................... 359
HTML-Elementknoten ........................................... 127
HTML-Selektor
CSS .............................................................................. 258
HTTP .............................................................................. 240
http:// ........................................................................... 202
HTTPS............................................................................ 240
HTTP-Server ............................................................... 202
Hyperlink ............................................................. 20, 211
aus Zeichenkette erzeugen ............................... 167
CSS .............................................................................. 280
Klick-Ereignis ......................................................... 105
Ziel .............................................................................. 211
Hyperlinkfarbe
CSS .............................................................................. 275
Hypertext Transfer Protocol ............................... 240
I
id
HTML ............................................................... 116, 222
srcElement............................................................... 121
target......................................................................... 121
ID-Selektor
CSS .............................................................................. 258
ID-Selektor (jQuery) ................................................ 342
if ......................................................................................... 42
Image ................................................................... 214, 432
images .......................................................................... 213
complete .................................................................. 214
height ........................................................................ 214
4074.book Seite 464 Mittwoch, 3. Februar 2016 4:12 16
Index
465
images (Forts.)
length........................................................................ 213
src ............................................................................... 214
width ......................................................................... 214
img (HTML) ................................................................... 20
in........................................................................................ 98
includes()...................................................................... 161
Index
in Feld ....................................................................... 143
in Zeichenkette...................................................... 161
indexOf() ...................................................................... 161
Infinity .......................................................................... 169
Inline CSS ..................................................................... 258
Innenabstand (CSS) .................................................. 280
innerHeight
window .................................................................... 193
innerHTML
all................................................................................ 136
innerWidth
window .................................................................... 193
insertBefore().............................................................. 133
Installation .................................................................. 451
instanceof ...................................................................... 97
Instanz
Prototyp...................................................................... 97
Internetseite
anzeigen ..................................................................... 21
neu laden................................................................. 203
senden ...................................................................... 205
Interpreter ..................................................................... 15
isFinite()........................................................................ 169
isInteger()
Number .................................................................... 169
isNaN()............................................................................. 47
J
JavaScript
Anweisung ................................................................. 24
ausschalten ............................................................... 28
Bibliothek ................................................................ 436
einbetten .................................................................... 24
einschalten ................................................................ 16
externe Datei ..................................................... 25, 72
Kommentar ............................................................... 26
nicht möglich............................................................ 27
JavaScript Object Notation ................ 101, 159, 252
javascript: .................................................................... 105
javascript.enabled ....................................................... 28
join()
Feld ............................................................................ 150
jQuery............................................................................ 337
$()................................................................................ 340
Ajax ........................................................................... 353
animate()........................................................ 344, 347
Aufbau...................................................................... 338
bind()......................................................................... 346
Breite ändern ......................................................... 348
Callback ................................................................... 349
click()......................................................................... 340
css() ............................................................................ 340
dblclick() .................................................................. 345
delay() ....................................................................... 350
duration................................................................... 349
easing ....................................................................... 349
Ereignis .................................................................... 344
fadeIn()..................................................................... 351
fadeOut() ................................................................. 351
fadeTo().................................................................... 351
fadeToggle() ........................................................... 351
height........................................................................ 348
hide() ......................................................................... 351
Höhe ändern .......................................................... 348
hover() ...................................................................... 346
html() ........................................................................ 340
ID-Selektor .............................................................. 342
Klassenselektor ..................................................... 342
left .............................................................................. 349
load() ......................................................................... 353
mousedown()......................................................... 346
mouseenter().......................................................... 345
mouseleave() ......................................................... 345
mousemove() ......................................................... 346
mouseout() ............................................................. 345
mouseover() ........................................................... 345
mouseup() ............................................................... 346
opacity ..................................................................... 349
pageX........................................................................ 347
pageY ........................................................................ 347
Position ändern .................................................... 349
post() ......................................................................... 353
queue ........................................................................ 350
ready() ...................................................................... 340
Selektor .................................................................... 340
show() ....................................................................... 351
4074.book Seite 465 Mittwoch, 3. Februar 2016 4:12 16
Index
466
jQuery (Forts.)
slideDown() ............................................................. 351
slideToggle() ........................................................... 351
slideUp() ................................................................... 351
text() .......................................................................... 340
timeStamp............................................................... 347
toggle()...................................................................... 351
top .............................................................................. 349
Transparenz............................................................ 349
type ............................................................................ 347
Version ...................................................................... 337
width.......................................................................... 348
jQuery mobile............................................................ 367
Ajax ............................................................................ 376
Aufbau ...................................................................... 367
bind() ......................................................................... 372
collapsible() ............................................................. 372
collapsible-set ........................................................ 372
content...................................................................... 370
controlgroup .......................................................... 372
data-ajax ................................................................. 379
data-role................................................................... 370
data-theme ............................................................. 379
data-type ................................................................. 372
footer ......................................................................... 370
Formular .................................................................. 376
Formularelemente ............................................... 381
header ....................................................................... 370
navbar....................................................................... 370
orientationchange ............................................... 373
page ........................................................................... 370
pageinit .................................................................... 372
rangeslider .............................................................. 384
swipe .......................................................................... 373
swipeleft ................................................................... 373
swiperight ................................................................ 373
tap .................................................................... 372, 373
taphold ..................................................................... 373
viewport ................................................................... 369
jQuery UI...................................................................... 357
accordion() .............................................................. 364
Drag & Drop ....................................... 358, 359, 361
draggable() .............................................................. 359
drop ............................................................................ 360
droppable().............................................................. 360
grid ............................................................................. 362
menu() ....................................................................... 362
Version ...................................................................... 358
JS-Datei ............................................................................ 25
JSON............................................................ 101, 159, 252
Objekt .............................................................. 101, 159
parse() .................................................... 102, 160, 254
stringify() ....................................................... 102, 160
K
Kalenderwoche ......................................................... 417
Kamera ......................................................................... 325
Blickrichtung .......................................................... 326
perspektivisch ........................................................ 323
Kaskadierung
CSS .............................................................................. 264
Kegel .............................................................................. 332
keyCode
Ereignisobjekt ........................................................ 121
Kindknoten........................................................ 127, 298
Klassenselektor
CSS .............................................................................. 258
Klassenselektor (jQuery) ....................................... 342
Kleiner als....................................................................... 42
Knoten ................................................................. 127, 244
alle Kindknoten ..................................................... 131
ändern....................................................................... 136
anhängen ................................................................ 133
Anzahl verschieden.............................................. 133
Attribut ermitteln................................................. 129
Attribut löschen .................................................... 139
Attribut setzen ....................................................... 133
einfügen ................................................................... 133
ersetzen .................................................................... 136
erster.......................................................................... 130
erzeugen................................................................... 133
hat Kindknoten ..................................................... 131
klonen ....................................................................... 136
letzter ........................................................................ 131
löschen...................................................................... 139
Name ......................................................................... 131
Typ.............................................................................. 131
Wert ........................................................................... 130
Zugriff ....................................................................... 129
Kodierung ...................................................................... 21
Kommentar
CSS .............................................................................. 259
HTML ........................................................................... 26
JavaScript .................................................................. 26
4074.book Seite 466 Mittwoch, 3. Februar 2016 4:12 16
Index
467
Konstante ...................................................................... 36
Konstruktorfunktion ................................................ 86
Kosinus ......................................................................... 175
Kreditkartennummer ............................................. 398
Kreis ............................................................................... 302
zeichnen................................................................... 429
Kreiszahl pi.................................................................. 173
Kugel .............................................................................. 334
Kurzschluß .................................................................. 226
L
label (HTML)................................................................ 380
Lagesensor
Mobilgerät .............................................................. 442
Längengrad ................................................................. 436
Umrechnung .......................................................... 437
Längsachse
Mobilgerät .............................................................. 442
lastChild........................................................................ 131
lastIndexOf()............................................................... 161
lastModified
document ................................................................ 209
latitude.......................................................................... 436
coords ....................................................................... 439
LatLng
google.maps........................................................... 439
left
CSS.............................................................................. 266
jQuery ....................................................................... 349
Leinwand...................................................................... 426
length
anchors .................................................................... 209
arguments ................................................................. 77
childNodes .............................................................. 131
Feld ............................................................................ 145
history ...................................................................... 201
images ...................................................................... 213
links ........................................................................... 211
String ........................................................................ 161
li (HTML)......................................................................... 20
Lichtquelle ......................................................... 326, 329
line (SVG)...................................................................... 303
lineHeight
style ........................................................................... 281
line-height (CSS) ........................................................ 281
lineTo() .......................................................................... 429
lineWidth ..................................................................... 428
Linie ............................................................................... 303
zeichnen................................................................... 429
Linienzug
mit Geraden ........................................................... 303
mit Kurven.............................................................. 304
link rel (HTML) ........................................................... 259
link() ............................................................................... 167
linkColor
document ................................................................ 208
links................................................................................ 211
hash ........................................................................... 211
host ............................................................................ 211
hostname ................................................................ 211
href............................................................................. 211
length........................................................................ 211
pathname ............................................................... 211
port ............................................................................ 211
protocol ................................................................... 211
search ....................................................................... 211
target ........................................................................ 211
text............................................................................. 211
list (HTML) ................................................................... 407
Liste ................................................................................... 20
Listenstil (CSS)............................................................ 280
listStyle
style ........................................................................... 280
list-style (CSS)............................................................. 280
load()
audio ......................................................................... 424
load() (jQuery) ............................................................ 353
location............................................................... 202, 211
hash ........................................................................... 203
host ............................................................................ 202
hostname ................................................................ 202
href............................................................................. 202
pathname ............................................................... 203
protocol ................................................................... 202
reload()..................................................................... 203
replace() ................................................................... 203
search ....................................................................... 205
log() ................................................................................ 173
log10............................................................................... 173
Logarithmus
natürlicher .............................................................. 173
zur Basis 10............................................................. 173
Logische Verknüpfung ........................................... 226
Logischer Fehler ........................................................... 63
4074.book Seite 467 Mittwoch, 3. Februar 2016 4:12 16
Index
468
Logischer Operator ..................................................... 46
Lokale Variable ............................................................. 80
Lokaler Webserver .......................................... 108, 109
longitude ..................................................................... 436
coords........................................................................ 439
lookAt() (Three.js) ..................................................... 326
loop
audio.......................................................................... 423
loop (HTML)................................................................ 423
Luhn-Algorithmus ................................................... 398
M
Map
google.maps ........................................................... 439
margin
CSS .............................................................................. 280
style ............................................................................ 280
mark (HTML) .............................................................. 406
Marker
google.maps ........................................................... 439
Markierter Text ......................................................... 208
Markierung (HTML).................................................... 20
Material ........................................................................ 325
Math .............................................................................. 173
abs().................................................................... 47, 173
ceil()............................................................................ 173
cos() ............................................................................ 176
E ................................................................................... 173
exp() ........................................................................... 173
floor() ................................................................. 60, 173
log() ............................................................................ 173
log10 .......................................................................... 173
max() ......................................................................... 173
min() .......................................................................... 173
PI ................................................................................. 173
pow() .......................................................................... 173
random() .......................................................... 47, 173
round() ...................................................................... 173
sign() .......................................................................... 173
sin()............................................................................. 176
sqrt()........................................................................... 173
tan()............................................................................ 176
Mauszeiger (CSS) ...................................................... 280
max (HTML)................................................................ 411
MAX_VALUE
Number..................................................................... 169
max() ............................................................................. 173
Maximum ................................................................... 152
Meereshöhe................................................................ 440
Member........................................................................... 87
löschen........................................................................ 99
Memory ....................................................................... 399
Menü .................................................................... 284, 362
menu() (jQuery UI)................................................... 362
Mesh (Three.js) .......................................................... 325
MeshBasicMaterial (Three.js) .............................. 331
MeshLambertMaterial (Three.js) ....................... 325
Metadaten ...................................................................... 20
meter (HTML) ............................................................ 412
method (HTML) ........................................................ 111
Methode.......................................................................... 71
Prototyp ..................................................................... 87
Microsoft Edge .......................................................... 100
MIME-Type ................................................................. 426
min (HTML) ................................................................ 411
MIN_VALUE
Number..................................................................... 169
min() .............................................................................. 173
Minimum .................................................................... 152
Mobiles Endgerät ........................................................ 17
Mobilgerät.......................................................... 367, 435
Beschleunigungssensor...................................... 446
Drehen ...................................................................... 373
Lagesensor .............................................................. 442
Längsachse.............................................................. 442
Tippen ....................................................................... 373
Wischen .................................................................... 373
Modularisierung.......................................................... 71
Modulo ............................................................................ 37
month (HTML)........................................................... 417
mousedown() (jQuery) ........................................... 346
mouseenter() (jQuery)............................................ 345
mouseleave() (jQuery) ............................................ 345
mousemove() (jQuery)........................................... 346
mouseout
Ereignis ..................................................................... 216
SVG ............................................................................. 312
mouseout() (jQuery) ............................................... 345
mouseover
Ereignis ..................................................................... 216
SVG ............................................................................. 312
mouseover() (jQuery) ............................................. 345
mouseup() (jQuery) ................................................. 346
moveTo() ..................................................................... 429
4074.book Seite 468 Mittwoch, 3. Februar 2016 4:12 16
Index
469
Mozilla Firefox............................................................. 18
MP4-Datei .................................................................... 425
Multimediaobjekt..................................................... 299
Muster ........................................................................... 408
N
Name
Konvention ................................................................ 31
Regel ............................................................................. 31
name
anchors .................................................................... 209
elements .................................................................. 113
HTML ............................................................... 111, 222
namespace................................................................... 298
NaN............................................................................ 41, 48
Natürlicher Logarithmus....................................... 173
navbar (jQmobile) .................................................... 370
navigator ............................................................ 390, 435
near (Three.js)............................................................. 326
Netzverkehr .................................................................. 16
new .......................................................................... 86, 177
Feld ............................................................................ 146
Nicht
logisches ..................................................................... 46
node ............................................................................... 127
appendChild() ........................................................ 133
childNodes .............................................................. 131
cloneNode() ............................................................ 136
firstChild ......................................................... 130, 246
getAttribute() ................................................ 129, 246
getElementsByClassName() ............................. 261
hasChildNodes() ................................................... 131
insertBefore() ......................................................... 133
lastChild................................................................... 131
nodeName .............................................................. 131
nodeType ................................................................. 131
nodeValue ............................................................... 130
removeAttribute() ................................................ 139
removeChild() ........................................................ 139
replaceChild()......................................................... 136
setAttribute() ......................................................... 133
nodeName ................................................................... 131
nodeType ..................................................................... 131
nodeValue.................................................................... 130
none (SVG)................................................................... 303
noscript........................................................................... 27
Not a Number ................................................ 41, 47, 48
Notepad++ ...................................................................... 19
noValidate
forms......................................................................... 420
novalidate (HTML) ................................................... 419
null .......................................................................... 33, 118
Nullmeridian .............................................................. 437
Number ........................................................................ 168
format() ................................................................... 171
isInteger() ................................................................ 169
MAX_VALUE .......................................................... 169
MIN_VALUE ........................................................... 169
-Objekt erweitern ................................................. 171
toExponential()..................................................... 169
toFixed()............................................................ 55, 169
number
HTML ........................................................................ 411
Typ ................................................................................ 50
number.js..................................................................... 171
O
Oberflächenmaterial ............................................... 325
Object ............................................................................... 93
!=.................................................................................... 96
==................................................................................... 96
constructor() ............................................................. 93
object
Typ ................................................................................ 97
object (HTML)............................................................. 299
Objekt
aktuelles ........................................................... 87, 106
alle Member ........................................................... 100
als Feldelement ..................................................... 157
ausgeben .................................................................... 87
dieses ........................................................................ 106
eigenes ........................................................................ 85
erschaffen .................................................................. 86
erweitern .............................................. 171, 181, 186
Existenz prüfen ..................................................... 193
Hierarchie ............................................................... 193
in Objekt ..................................................................... 89
in Zeichenkette umwandeln ............................ 160
JSON-Schreibweise ............................................... 101
Member....................................................................... 87
mit with ...................................................................... 99
Operation ................................................................... 94
4074.book Seite 469 Mittwoch, 3. Februar 2016 4:12 16
Index
470
Objekt (Forts.)
Prototyp prüfen....................................................... 97
Referenz ...................................................................... 96
Typ ermitteln............................................................ 97
umwandeln ............................................................. 102
Verweis ............................................................. 96, 145
Objektunabhängige Funktion................................ 83
Oder
logisches ..................................................................... 46
OGV-Datei ................................................................... 425
onchange ............................................................ 111, 112
onclick.................................................................. 105, 111
SVG ............................................................................. 315
onerror ............................................................................ 64
onkeydown ................................................................. 120
onload ........................................................................... 105
onmousedown .......................................................... 113
onmousemove .......................................................... 113
onmouseout............................................................... 113
SVG ............................................................................. 315
onmouseover............................................................. 113
SVG ............................................................................. 315
onmouseup ................................................................ 113
onreadystatechange ............................................... 239
onreset.......................................................................... 111
onsubmit ..................................................................... 111
opacity
CSS .............................................................................. 271
jQuery........................................................................ 349
style .................................................................. 284, 292
opacity (SVG).............................................................. 310
open() ............................................................................ 239
document....................................................... 107, 197
window ..................................................................... 194
Operator
delete ................................................................. 99, 148
in ................................................................................... 98
logischer ..................................................................... 46
Priorität ............................................................... 38, 50
Rechen- ....................................................................... 37
ternärer....................................................................... 42
typeof .......................................................................... 49
Vergleichs- ................................................................. 42
Zuweisungs- .............................................................. 39
Option........................................................................... 220
options ......................................................................... 220
Orientation ................................................................. 442
orientationchange (jQmobile) ............................ 373
Orthodrome ............................................................... 441
Ostersonntag ............................................................. 192
outerHeight
window ..................................................................... 193
outerWidth
window ..................................................................... 193
P
p (HTML) ......................................................................... 20
padding
CSS .............................................................................. 280
style............................................................................ 280
page (jQmobile)......................................................... 370
pageinit (jQmobile) ................................................. 372
pageX (jQuery)........................................................... 347
pageY (jQuery) ........................................................... 347
Paralleler Ablauf .............................................. 187, 350
Parameter....................................................................... 73
beliebige Anzahl...................................................... 76
restliche ...................................................................... 79
Vorgabewert............................................................. 78
parse()
JSON ................................................................. 102, 160
parseFloat() .................................................................... 40
parseInt() ........................................................................ 41
path (SVG) ................................................................... 305
pathname
links............................................................................ 211
location .................................................................... 203
Patience........................................................................ 399
pattern (HTML) ......................................................... 408
pause()
audio ......................................................................... 423
PerspectiveCamera (Three.js) .............................. 325
Perspektive ........................................................ 323, 328
Pfad ................................................................................ 304
mit Kurve ................................................................. 307
nicht gefüllt ............................................................ 306
zeichnen ................................................................... 429
Pflichtfeld ........................................................... 406, 413
PHP ................................................................................ 451
mit jQuery laden ................................................... 353
Programm ..................................................... 107, 239
PI ..................................................................................... 173
pixelDepth
screen ........................................................................ 236
4074.book Seite 470 Mittwoch, 3. Februar 2016 4:12 16
Index
471
placeholder (HTML) ................................................. 406
PlaneGeometry (Three.js)...................................... 331
Platzhalter ................................................................... 406
play()
audio ......................................................................... 423
PointLight (Three.js) ................................................ 326
Polygon......................................................................... 303
polygon......................................................................... 303
polyline ......................................................................... 303
Polylinie ....................................................................... 303
pop()
Feld ............................................................................ 148
port
links ........................................................................... 211
Portnummer............................................................... 202
Position
ändern (jQuery)..................................................... 349
Position (CSS) ............................................................. 266
ändern ...................................................................... 281
animieren ................................................................ 287
Position (Three.js)........................................... 326, 328
position (Three.js)..................................................... 326
post() (jQuery) ............................................................ 353
POST-Methode........................................................... 240
pow() .............................................................................. 173
preventDefault()
Ereignisobjekt ........................................................ 225
Priorität ................................................................... 38, 50
Programm
Abbruch vermeiden................................................ 66
debuggen.................................................................... 68
entwickeln.................................................................. 63
lesbares ................................................................ 44, 52
zerlegen....................................................................... 71
progress (HTML)........................................................ 412
prompt()
window ................................................................ 32, 40
protocol
links ........................................................................... 211
location .................................................................... 202
Protokoll....................................................................... 202
Prototyp
Definition ................................................................... 86
Eigenschaft ................................................................ 86
Instanz......................................................................... 97
Methode...................................................................... 87
Objekt prüfen............................................................ 97
Vererbung .................................................................. 91
prototype ........................................... 93, 172, 182, 186
Pseudoklasse
CSS ............................................................................. 275
Punktschreibweise...................................................... 87
push()
Feld ............................................................................ 148
Q
Quader ................................................................ 325, 332
Quadrat......................................................................... 331
Querformat ................................................................. 442
queue (jQuery) ........................................................... 350
R
RadioButton
Eigenschaften ........................................................ 226
Klick-Ereignis ......................................................... 111
Rahmen (CSS) ............................................................. 281
Rahmenfarbe.............................................................. 301
Rahmenstärke............................................................ 301
random() ............................................................... 47, 173
range (HTML) ................................................... 384, 411
rangeOverflow
validity ..................................................................... 421
Range-Slider................................................................ 382
rangeslider (jQmobile) ........................................... 384
rangeUnderflow
validity ..................................................................... 421
Rangstufe ................................................................. 38, 50
ready() (jQuery) ......................................................... 340
readystate .................................................................... 240
Rechteck
SVG ............................................................................ 298
Three.js ..................................................................... 331
zeichnen................................................................... 429
rect (SVG) ..................................................................... 298
Referenz
auf Objekt .................................................................. 96
referrer
document ................................................................ 208
regular expression ................................................... 168
Reguläre Ausdrücke....................................... 168, 408
reload()
location.................................................................... 203
4074.book Seite 471 Mittwoch, 3. Februar 2016 4:12 16
Index
472
removeAttribute().................................................... 139
removeChild()............................................................ 139
removeEventListener()
window ..................................................................... 121
render() (Three.js) ..................................................... 327
repeat() ......................................................................... 161
repeatCount (SVG) ................................................... 312
replace()........................................................................ 161
location .................................................................... 203
replaceChild() ............................................................. 136
Request ......................................................................... 240
requestAnimationFrame() (Three.js)................ 327
required (HTML) .............................................. 406, 412
Response...................................................................... 240
responseText ............................................................. 240
responseXML ............................................................. 246
Rest
Division....................................................................... 37
return ............................................................................... 76
returnValue
event .......................................................................... 226
reverse()
Feld ............................................................................. 150
rgb()................................................................................ 284
rotate (SVG) ................................................................ 314
Rotation ....................................................................... 312
rotation (Three.js)..................................................... 327
rotationRate
DeviceMotionEvent ............................................. 450
round().......................................................................... 173
Rückgabewert ............................................................... 75
rules
styleSheets ............................................................... 279
Runde Ecke (CSS) ...................................................... 281
S
Scalable Vector Graphics ....................................... 297
scale (SVG) ................................................................... 312
Scene (Three.js).......................................................... 325
Schatten (CSS) ............................................................ 281
Schleife
abbrechen .................................................................. 55
do while ...................................................................... 58
endlose ........................................................................ 55
for........................................................................ 53, 145
for in .......................................................................... 100
Schleife (Forts.)
for-of.......................................................................... 145
fortfahren .................................................................. 55
geschachtelte ........................................................... 56
while ............................................................................ 57
Schlüsselwörter.................................................. 31, 452
Schriftart (CSS) .......................................................... 281
Schriftgewicht (CSS) ................................................ 281
Schriftgröße (CSS) .................................................... 281
Schriftstil (CSS) .......................................................... 281
Schwerkraft................................................................. 294
screen ............................................................................ 236
availHeight ............................................................. 236
availWidth............................................................... 236
colorDepth .............................................................. 236
height ........................................................................ 236
pixelDepth ............................................................... 236
width ......................................................................... 236
screenX
Ereignisobjekt ........................................................ 121
window ..................................................................... 193
screenY
Ereignisobjekt ........................................................ 121
window ..................................................................... 193
script
src ................................................................................. 25
script (HTML) ................................................................ 24
search
HTML ......................................................................... 407
links............................................................................ 211
location .................................................................... 205
Segment ....................................................................... 331
Seitenverhältnis ....................................................... 326
selected
elements ................................................................... 230
HTML ............................................................... 111, 230
selectorText
cssRules .................................................................... 279
Selektor
CSS .............................................................................. 258
CSS, verschachtelter............................................. 262
Selektor (jQuery)....................................................... 340
Semikolon ...................................................................... 24
send()............................................................................. 239
Sensor .............................................................................. 17
set() (Three.js)............................................................. 326
setAttribute() ............................................................. 133
SVG ............................................................................. 316
4074.book Seite 472 Mittwoch, 3. Februar 2016 4:12 16
Index
473
setClearColor() (Three.js) ....................................... 325
setInterval()
window ........................................................... 187, 198
setRequestHeader().................................................. 243
setSize() (Three.js) ..................................................... 324
setTimeout()
window ........................................................... 187, 198
shift()
Feld ............................................................................ 148
shiftKey
Ereignisobjekt ........................................................ 121
Short-Circuit ............................................................... 226
show() (jQuery) .......................................................... 351
Sichtbarkeit ändern
CSS.............................................................................. 284
Sichtwinkel.................................................................. 326
sign() .............................................................................. 173
Simulation ................................................................... 187
sin()................................................................................. 176
Sinus .............................................................................. 175
Sinuskurve
Animation............................................................... 351
Skalierung .................................................................... 312
skew (SVG) ................................................................... 312
slice()
Feld ............................................................................ 150
slideDown() (jQuery) ............................................... 351
Slider .................................................................... 382, 411
slideToggle() (jQuery) .............................................. 351
slideUp() (jQuery)...................................................... 351
Smartphone ................................................................ 367
Snake.............................................................................. 400
Sommerzeit ................................................................ 179
Sonderzeichen ...................................................... 22, 31
sort()
Feld ......................................................... 150, 153, 158
source (HTML)............................................................ 425
SphereGeometry (Three.js) ................................... 334
Spiel............................................ 61, 187, 189, 234, 395
splice()
Feld ............................................................................ 148
split() .............................................................................. 161
sqrt() ............................................................................... 173
src
Ereignisobjekt ........................................................ 115
HTML ........................................................................ 423
images ...................................................................... 214
img (HTML) ............................................................... 20
src (Forts.)
script ............................................................................ 25
srcElement
event ......................................................................... 121
Standardobjekte........................................................ 143
Standortdaten............................................................ 435
startsWith() ................................................................. 161
status ............................................................................. 240
step (HTML)................................................................. 411
stepDown()
elements .................................................................. 413
stepUp()
elements .................................................................. 413
Sternenhimmel ......................................................... 295
String ...................................................................... 29, 160
anchor() ................................................................... 167
charAt() .................................................................... 161
charCodeAt() .......................................................... 161
endsWith()............................................................... 161
fromCharCode() .................................................... 161
includes() ................................................................. 161
indexOf().................................................................. 161
lastIndexOf() .......................................................... 161
length........................................................................ 161
link() .......................................................................... 167
Objekt ....................................................................... 161
repeat()..................................................................... 161
replace() ................................................................... 161
split() ......................................................................... 161
startsWith() ............................................................ 161
substr() ..................................................................... 161
substring()............................................................... 161
toLowerCase()........................................................ 161
toUpperCase() ....................................................... 161
string
Typ ................................................................................ 50
stringify()
JSON ................................................................. 102, 160
stroke (SVG) ................................................................ 301
stroke() .......................................................................... 429
strokeRect() ................................................................. 429
strokeStyle................................................................... 428
strokeText()................................................................. 433
stroke-width (SVG) ................................................... 301
style
backgroundAttachment ................................... 281
backgroundColor .............................. 280, 284, 293
border ....................................................................... 281
4074.book Seite 473 Mittwoch, 3. Februar 2016 4:12 16
Index
474
style (Forts.)
borderCollapse ...................................................... 281
borderRadius .......................................................... 281
boxShadow ............................................................. 281
clip rect ........................................................... 284, 291
color ........................................................................... 280
CSS .............................................................................. 273
cssFloat ..................................................................... 281
filter.................................................................. 284, 292
fontFamily ............................................................... 281
fontSize ..................................................................... 281
fontStyle ................................................................... 281
fontWeight .............................................................. 281
HTML ......................................................................... 261
lineHeight ................................................................ 281
listStyle ..................................................................... 280
margin ...................................................................... 280
opacity ............................................................ 284, 292
padding .................................................................... 280
styleFloat ................................................................. 281
textAlign .................................................................. 280
textDecoration ...................................................... 281
textIndent ................................................................ 280
top .................................................................... 284, 290
verticalAlign ........................................................... 280
visibility .................................................................... 287
zIndex........................................................................ 284
style (HTML) ............................................................... 259
Style Sheet................................................................... 257
styleFloat
style ............................................................................ 281
styleSheets
cssRules..................................................................... 279
document................................................................. 279
rules............................................................................ 279
substr().......................................................................... 161
substring() ................................................................... 161
Subtraktion .................................................................... 37
Suchmuster ................................................................ 168
Suchzeichenkette ......................... 205, 211, 243, 248
SVG................................................................................. 297
Datei erstellen ........................................................ 297
einbetten in HTML ............................................... 300
einfügen aus Datei ............................................... 299
Element animieren............................................... 308
Element erzeugen ................................................. 316
Element identifizieren ........................................ 312
Element rotieren ................................................... 312
SVG (Forts.)
Element verdecken ............................................... 301
Elemente gruppieren........................................... 306
mit JavaScript ........................................................ 314
svg (HTML) .................................................................. 298
swipe (jQmobile) ...................................................... 373
swipeleft (jQmobile)................................................ 373
swiperight (jQmobile) ............................................ 373
switch ............................................................................... 51
Syntaxfehler.................................................................. 63
T
Tabelle ............................................................................. 20
mit Schleife ............................................................... 56
per DOM erzeugen ............................................... 141
Rahmen (CSS) ......................................................... 281
table (HTML).................................................................. 20
Tablet ............................................................................ 367
Tag ........................................................................... 20, 129
tan()................................................................................ 176
Tangens ........................................................................ 175
tap (jQmobile)................................................... 372, 373
taphold (jQmobile) .................................................. 373
target
Ereignisobjekt ........................................................ 121
links............................................................................ 211
td (HTML) ....................................................................... 21
tel (HTML).................................................................... 408
Telefonnummer ....................................................... 408
Ternärer Operator....................................................... 42
Text
Basislinie .................................................................. 433
hervorheben ........................................................... 406
in Zeichnung........................................................... 433
markierter ............................................................... 208
text
anchors ..................................................................... 209
links............................................................................ 211
text() (jQuery) ............................................................ 340
textAlign
style............................................................................ 280
text-align (CSS) .......................................................... 280
Textarea ....................................................................... 222
textBaseline................................................................ 433
Textdatei
mit Ajax laden ....................................................... 240
4074.book Seite 474 Mittwoch, 3. Februar 2016 4:12 16
Index
475
Textdatei (Forts.)
mit jQuery laden .................................................. 353
textDecoration
style ........................................................................... 281
text-decoration (CSS) .............................................. 281
Texteditor ...................................................................... 19
Textelement
ändern ...................................................................... 340
Textfeld......................................................................... 222
Änderungsereignis ..................................... 111, 112
textIndent
style ........................................................................... 280
text-indent (CSS) ....................................................... 280
Textknoten.................................................................. 127
Textmarker ................................................................. 406
Textumfluss (CSS)..................................................... 281
theisweb.de ....................................................... 108, 109
Theme ........................................................................... 367
this ........................................................................... 86, 106
Three.js.......................................................................... 321
ThreeJS
Objekt ....................................................................... 323
throw ............................................................................... 67
time (HTML)...................................................... 384, 416
Timer
starten ...................................................................... 187
timestamp
geolocation ............................................................ 439
timeStamp (jQuery) ................................................. 347
Titel................................................................................. 208
title
document ................................................................ 208
HTML ........................................................................... 20
to (SVG) ......................................................................... 311
toExponential()
Number .................................................................... 169
toFixed()
Number ............................................................. 55, 169
toggle() (jQuery) ........................................................ 351
toGMTString()
Date ........................................................................... 179
toLocaleString()
Date ........................................................................... 179
toLowerCase()............................................................. 161
top
CSS.............................................................................. 266
jQuery ....................................................................... 349
style .................................................................. 284, 290
Torus.............................................................................. 334
TorusGeometry (Three.js) ..................................... 334
toString() ......................................................................... 87
Feld ............................................................................ 145
toUpperCase() ............................................................ 161
toUTCString()
Date ........................................................................... 179
tr (HTML)......................................................................... 21
transform (SVG) ........................................................ 314
translate (SVG) ........................................................... 312
Translation .................................................................. 312
Transparenz ................................................................ 310
jQuery ....................................................................... 349
Transparenz (CSS)..................................................... 271
ändern ...................................................................... 281
animieren................................................................ 288
true .................................................................................... 35
try....................................................................................... 66
type
elements .................................................................. 229
Ereignisobjekt........................................................ 121
object ........................................................................ 299
type (jQuery)............................................................... 347
typeof ........................................................................ 49, 97
Typumwandlung
automatische ........................................................... 35
U
Überlagerung
CSS ............................................................................. 264
UCS .................................................................................... 21
Uhrzeit .......................................................................... 177
eingeben ......................................................... 384, 414
ul (HTML) ........................................................................ 20
Umlaut ............................................................................. 31
Und
logisches ..................................................................... 46
undefined ............................................................. 33, 193
Unendlich .................................................................... 169
Ungleichheitszeichen ................................................ 42
Unicode ........................................................................... 21
Uniform Resource Identifier................................ 202
Universal Time Coordinated................................ 177
unshift()
Feld ............................................................................ 148
Unterstreichung (CSS) ............................................ 281
4074.book Seite 475 Mittwoch, 3. Februar 2016 4:12 16
Index
476
Up-Down-Button...................................................... 411
URI.................................................................................. 202
URL ................................................................................. 408
url (HTML) .......................................................... 379, 408
use (SVG) ...................................................................... 315
user interface ............................................................. 357
UTC................................................................................. 177
UTF-8 ................................................................................ 21
V
valid
validity ...................................................................... 421
Validation
CSS .............................................................................. 262
HTML ........................................................................... 20
Validierung
Formular .............................................. 107, 222, 418
validity
elements ................................................................... 421
rangeOverflow ....................................................... 421
rangeUnderflow .................................................... 421
valid ........................................................................... 421
value
elements ......................................................... 113, 222
HTML ............................................................... 111, 222
valueAsDate
elements ................................................................... 418
valueAsNumber
elements ................................................................... 414
values (SVG)................................................................ 312
var...................................................................................... 30
Variable ........................................................................... 29
Existenz prüfen ...................................................... 193
globale ........................................................................ 80
Gültigkeit ................................................................... 55
Gültigkeitsbereich .................................................. 80
in Anweisungsblock............................................... 55
ist Funktion ............................................................... 81
lokale ........................................................................... 80
ohne Deklaration.................................................... 30
Typ ermitteln............................................................ 49
Typ prüfen ................................................................. 49
Vektorgrafik................................................................ 297
Veraltet ......................................................................... 100
Vererbung ...................................................................... 91
Vergleichsoperator ..................................................... 42
Verschiebung............................................................. 312
Verstecktes Element ............................................... 233
verticalAlign
style............................................................................ 280
vertical-align (CSS) ................................................... 280
Verweis
auf Funktion ........................................................... 154
auf Methode ............................................................. 87
auf Objekt ......................................................... 96, 145
Verzeichnispfad ........................................................ 203
Verzerrung .................................................................. 312
Verzweigung .......................................................... 42, 51
mehrfache ................................................................. 44
Sonderform ............................................................... 42
video
HTML ......................................................................... 425
Videoplayer ................................................................ 425
viewport (jQmobile) ................................................ 369
visibility
CSS .............................................................................. 284
style............................................................................ 287
vlinkColor
document ................................................................ 208
Volkslauf ...................................................................... 397
Vordefinierte Funktion............................................. 83
Vorgabewert.................................................................. 78
W
Wahrheitswert.............................................................. 35
Bedingung ................................................................. 43
WAMP Stack ............................................ 108, 109, 451
Wasserzeichen (CSS) ............................................... 281
WAV-Datei .................................................................. 422
Waytracking ............................................................... 439
Web Graphics Library ............................................. 321
WebGL .......................................................................... 321
WebGLRenderer (Three.js) .................................... 324
WEBM-Datei ............................................................... 425
Webserver ................................................................... 451
Antwort .................................................................... 107
lokaler ............................................................. 108, 109
week (HTML) .............................................................. 417
Weg
aufzeichnen ............................................................ 439
berechnen ................................................................ 441
while ................................................................................. 57
4074.book Seite 476 Mittwoch, 3. Februar 2016 4:12 16
Index
477
width
CSS.............................................................................. 266
images ...................................................................... 214
jQuery ....................................................................... 348
screen ........................................................................ 236
willValidate
elements .................................................................. 421
window ......................................................................... 193
addEventListener() .............................................. 121
alert() ........................................................................... 32
attachEvent() ......................................................... 121
close() ........................................................................ 194
closed ........................................................................ 197
confirm() ..................................................................... 45
detachEvent()......................................................... 121
event.......................................................................... 120
innerHeight ............................................................ 193
innerWidth.............................................................. 193
open() ........................................................................ 194
outerHeight ............................................................ 193
outerWidth ............................................................. 193
prompt()............................................................... 32, 40
removeEventListener() ....................................... 121
screenX ..................................................................... 193
screenY ..................................................................... 193
setInterval() ................................................... 187, 198
setTimeout() .................................................. 187, 198
Winkel
im Bogenmaß ........................................................ 331
Winkelbeschleunigung .......................................... 447
Winkelfunktion ......................................................... 175
Winkelgeschwindigkeit.......................................... 447
with .................................................................................. 99
Wochentag ........................................................ 179, 182
write()
document ....................................................... 107, 197
Wurf
animierter ............................................................... 294
Würfel.................................................................. 175, 322
Wurzel ziehen ............................................................ 173
Wurzelknoten ............................................................ 127
X
x-Achse (Three.js)...................................................... 322
xlink:href (SVG) ......................................................... 315
XML ................................................................................ 244
XML-Datei
mit jQuery laden .................................................. 353
XMLHttpRequest ...................................................... 237
onreadystatechange........................................... 239
open()........................................................................ 239
readystate ............................................................... 240
responseText.......................................................... 240
send() ........................................................................ 239
setRequestHeader() ............................................. 243
status ........................................................................ 240
XML-Namensraum .................................................. 298
xmlns (SVG) ................................................................ 298
xmlns:xlink (SVG) .................................................... 315
Y
y-Achse (Three.js)...................................................... 322
Z
z-Achse (Three.js) ...................................................... 323
Zahl.................................................................................... 33
abschneiden .............................................................. 60
aus Zeichenkette ..................................................... 40
Betrag ................................................................ 47, 173
eingeben .................................................................. 410
exponentiell ausgeben....................................... 169
formatieren ............................................................ 171
ganze Zahl prüfen................................................ 169
größte ....................................................................... 169
kleinste ..................................................................... 169
Maximum finden ................................................. 173
Minimum finden .................................................. 173
prüfen .......................................................................... 47
runden ...................................................... 55, 169, 173
Vorzeichen ermitteln.......................................... 173
Zahlenbereich ............................................................ 168
Zeichenkette ........................................................ 29, 160
als Anweisung ausführen .................................... 84
aus Feld erzeugen ................................................ 150
beginnt mit............................................................. 161
ein Zeichen.............................................................. 161
ein Zeichen, Code ................................................. 161
endet mit ................................................................. 161
enthält ...................................................................... 161
in Anker umwandeln .......................................... 167
4074.book Seite 477 Mittwoch, 3. Februar 2016 4:12 16
Index
478
Zeichenkette (Forts.)
in Feld umwandeln .............................................. 161
in Großbuchstaben .............................................. 161
in Hyperlink umwandeln .................................. 167
in Kleinbuchstaben .............................................. 161
in Objekt umwandeln ............................... 102, 160
in Zahl umwandeln................................................ 40
Länge ......................................................................... 161
Position suchen ..................................................... 161
Position suchen, alle............................................ 163
Teilzeichenkette .................................................... 161
verbinden ................................................................... 31
Zeichen aus Code .................................................. 161
Zeichen ersetzen.................................................... 161
Zeichen wiederholen ........................................... 161
Zeichensatz .................................................................... 21
Zeichenstift
bewegen ................................................................... 429
Zeichnung ................................................................... 426
Zeichnungsfläche ..................................................... 324
Zeilenhöhe(CSS) ........................................................ 281
Zeilenumbruch
in Dialogfeld ............................................................. 32
in Internetseite ........................................................ 20
nicht erlaubt ............................................................. 57
Zeit
schätzen ................................................................... 189
Zeitangabe................................................................... 177
addieren ......................................................... 183, 186
ausgeben.................................................................. 179
erzeugen................................................................... 177
formatieren................................................... 179, 181
umrechnen .............................................................. 179
verrechnen .............................................................. 183
Zeitdauer
Animation ............................................................... 349
Zeitstempel................................................................. 436
Zeitverlauf
Animation ............................................................... 349
Zeitverschiebung ..................................................... 179
Zeitverzögerung
Animation ............................................................... 350
Zelle .................................................................................. 21
zIndex
style............................................................................ 284
z-index (CSS) .............................................................. 268
ändern....................................................................... 281
Zufallszahl ............................................................ 47, 173
Zuweisung............................................................... 30, 39
Zweidimensionale Grafik...................................... 297
Zylinder ........................................................................ 333
4074.book Seite 478 Mittwoch, 3. Februar 2016 4:12 16
Thomas Theis
Einstieg in JavaScript478 Seiten, broschiert, 2. Auflage 2016 24,90 Euro, ISBN 978-3-8362-4074-1
www.rheinwerk-verlag.de/4087
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!
Thomas Theis ist Dipl.-Ing. für Technische Informatik, verfügt über langjährige Erfahrung als EDV-Dozent, unter anderem an der Fachhochschule Aachen. Er leitet Schulungen zu C/C++, Visual Basic und Webprogram-mierung.
Know-how für Kreative.Wissen, wie’s geht.