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.

https://www.rheinwerk-verlag.de/einstieg-in-javascript_4087/?GPP=lpn

mailto:?body=Leseproben-Empfehlung: �Einstieg in JavaScript� von Rheinwerk, http://gxmedia.galileo-press.de/leseproben/4087/leseprobe_rheinwerk_einstieg_in_javascript.pdf&subject=Leseprobe: �Einstieg in JavaScript�

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.


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-


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.


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.


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>


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-



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.


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: © ® &permil;

¼ ½ ¾ ² ³ µ π<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),


1.9 JavaScript innerhalb einer HTML-Datei

23

1² (hoch 2), ³ (hoch 3), µ (mikro) und π (Pi): ©, ®, &permil;, ¼, ½,

¾, ², ³, µ 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:


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


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


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.


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>



<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


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 .

� 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


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.

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.


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.


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-


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.


3 Eigene Objekte

88

Das Programm:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Methode</title><script>


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«


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;


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;

}


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


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.


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.


<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vererbung</title><script>


this.farbe = f;this.geschwindigkeit = g;this.beschleunigen = fahrzeugBeschleunigen;this.toString = fahrzeugAusgeben;

}





}

function Lastwagen(f, g, n){

this.constructor(f, g);this.nutzlast = n;this.beladen = lastwagenBeladen;this.toString = lastwagenAusgeben;

}

function lastwagenBeladen(wert){

this.nutzlast += wert;}


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.


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>


this.farbe = f;this.geschwindigkeit = g;this.lackieren = fahrzeugLackieren;this.beschleunigen = fahrzeugBeschleunigen;this.toString = fahrzeugAusgeben;

function fahrzeugLackieren(f){

this.farbe = f;}





95

3



}}

</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>");

...


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.


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


Diese Ausgabe sehen Sie ebenfalls in Abbildung 3.5.



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

...


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


3 Eigene Objekte

98

+ "beschleunigen: " + typeof dacia.beschleunigen + "<br>"+ "lackieren: " + typeof dacia.lackieren + "<br><br>");

...


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

...


Die Prüfung ergibt, dass die Zeichenkette farbe und beschleunigen Eigenschaften des

Objekts dacia darstellen, leistung jedoch nicht, siehe Abbildung 3.7.



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>");}

...


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>



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-


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


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.


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:


<meta charset="utf-8">


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


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



130


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.


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

}



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


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.


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.


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.



134


<!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"));}


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


Listing 5.4 Datei »dom_hinzufuegen.htm«

In Abbildung 5.5 sehen Sie das ursprüngliche Dokument.



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



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.


<!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";

}


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>


meinHandler("idText1", "click", function() {textAendern("a1");});meinHandler("idText2", "click", function() {textAendern("a2");});meinHandler("idHtml", "click", htmlAendern);meinHandler("idUmgeben", "click", umgeben);meinHandler("idKlonen", "click", klonen);


Listing 5.5 Datei »dom_aendern.htm«



138


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-


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.


<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM, löschen</title><script>

function knotenLoeschen(){

var absatz = document.getElementById("a2");



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>


meinHandler("idKnoten", "click", knotenLoeschen);meinHandler("idAttribut", "click", attributLoeschen);


Listing 5.6 Datei »dom_loeschen.htm«


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.


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



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


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.


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


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>"); });});


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


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



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>


$("#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;}


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.



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");});


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>


$("#idLink1").click(function(){$("#idRect").animate({"width":"+=20px"}); });



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:


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"}); });


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


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>


$("#idLink1").click(function(){$("#idRect").animate({"width":"200px"}); });


});</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>


</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"}); });


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"}) }); });


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:


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-


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"});}

});});


<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


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.


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>


12 jQuery

354

<style>table,td {border:1px solid black}

</style><script src="jquery-1.11.3.min.js"></script><script>


$("#idLink1").click(function() {$("#idAusgabe").load("jq_ajax_test.txt"); });


});</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>


<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"); });



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«


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


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


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


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


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


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


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


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


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


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


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


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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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.

https://www.facebook.com/rheinwerkverlag

https://plus.google.com/118435207805510651040

http://twitter.com/rheinwerkverlag

https://www.rheinwerk-verlag.de/einstieg-in-javascript_4087/?GPP=lpn

einstieg in javascript - amazon s3€¦ · die weitverbreiteten bibliothek en jquery (siehe kapitel...

Documents