Ralph Steyer
JavaScript
Die universelle Sprache zur Web-Programmierung
Inhalt
6
Vorwort
14
1 Einleitung
16
1.1 Über das Buch
16
1.1.1 An wen sich das Buch wendet
17
1.1.2 Wie dieses Buch organisiert ist
17
1.2 Was Sie unbedingt haben sollten
18
1.2.1 Die Hardware
18
1.2.2 Die Software
19
1.2.3 Node.js und Git
22
1.2.4 Browser als Zentrale der Webentwicklung
23
2 Grundlagen und erste Beispiele
26
2.1 Erste JavaScript-Beispiele
26
2.1.1 Ein einfaches Mitteilungsfenster
26
2.1.2 Schreiben eines angepassten Aktualisierungsdatums
30
2.1.3 Entgegennahme einer Benutzereingabe
31
2.2 Einige Details zum Internet und zum WWW
32
2.3 Die Besonderheit bei der Webprogrammierung
32
2.3.1 Kompilierung versus Interpretation
33
2.3.2 Unterschiedliche Plattformen und Interpretation
33
3 Vorbereitende Basics
36
3.1 Der Aufbau von (X)HTML-Dateien
36
3.1.1 Das Prinzip der Fehlertoleranz
37
3.2 Ein erster Blick auf Objekte und das DOM-Konzept
41
3.3 HTML5 und DOM5
42
3.3.1 Das neue Vokabular
43
3.3.2 Das neue DOM5-Konzept und die MIME-Typen von HTML5
51
3.3.3 Das Namensraumkonzept von HTML5
52
3.3.4 Die erwartete Darstellung
52
3.3.5 Der Browserkontext und die Kommunikation zwischen verschiedenen Kontexten
53
4 Die Versionen von JavaScript und die Einbindung in Webseiten
54
4.1 Die Versionszyklen von JavaScript und ECMAScript
54
4.2 JavaScript in Webseiten einbinden
55
4.2.1 Die Inline-Referenz
55
4.2.2 Notation eines Skript-Containers in der Webseite
56
4.2.3 Die Verwendung von externen JavaScript-Dateien
58
4.3 Der gemeinsame Namensraum
60
4.4 Der
60
4.5 Kann man testen, ob bei einem Browser JavaScript aktiviert ist?
60
4.5.1 Eine Browserweiche
61
5 Elementare JavaScript-Grundstrukturen
64
5.1 Token und Parser
65
5.1.1 Token
65
5.1.2 Parser
65
5.2 Kommentare in JavaScript
65
5.2.1 Einzeilige Kommentare in JavaScript
66
5.2.2 Mehrzeilige Kommentare in JavaScript
66
5.3 Schlüsselwörter in JavaScript
67
5.4 Datentypen, Variablen und Literale
69
5.4.1 Datentypen und die JavaScript Global Properties
69
5.4.2 Literale und Steuerzeichen bei Zeichenketten
72
5.4.3 Variablen anlegen
74
5.5 Anweisungen
77
5.5.1 Ausdrücke
77
5.5.2 Blöcke
78
5.5.3 Operatoren und Operanden
78
5.5.4 Die Operatoren typeof und delete
86
5.6 Kontrollstrukturen in JavaScript
92
5.6.1 Entscheidungsanweisungen
92
5.6.2 Iterationsanweisungen
97
5.6.3 Sprunganweisungen
101
5.7 Arrays
103
5.7.1 Ein Array erzeugen
103
5.7.2 Zugriff auf Array-Elemente und der Index
105
5.7.3 Beispiele
106
5.7.4 Mit Schleifen auf Array-Elemente zugreifen
107
5.8 Funktionen, Prozeduren und Methoden
111
5.8.1 Funktion, Prozedur, Methode
112
5.8.2 Verwendung von Standardfunktionen
112
5.8.3 Die Definition eigener Funktionen
116
5.8.4 Der Aufruf einer Funktion
118
5.8.5 Beispiele zum Nutzen von selbstdefinierten Funktionen
118
5.8.6 Lokale Variablen in Funktionen
122
5.8.7 Flexible Anzahl an Funktionsargumenten und der Token arguments
123
5.8.8 Rekursive Funktionsaufrufe
127
5.8.9 Funktionsreferenzen
131
5.8.10 Benannte versus anonyme Funktionen
132
5.8.11 Innere Funktionen – Closures
133
5.8.12 Callbacks
134
5.9 Aufruf einer JavaScript-Funktion per Eventhandler
136
5.9.1 Was ist ein Ereignis?
136
5.9.2 Ein Mechanismus zur Reaktion auf Ereignisse
137
6 Fehlerbehandlung, Dokumentation und Qualitätskontrolle
140
6.1 Ein leidiges Thema – Fehler
140
6.1.1 Welche Fehler gibt es?
141
6.2 Vorbeugen statt heilen
143
6.2.1 Planung und Vorbereitung
143
6.2.2 IDEs und Tools nutzen
144
6.2.3 Kopieren statt tippen
144
6.2.4 Einhalten von Konventionen
144
6.2.5 Saubere Formatierungen
145
6.2.6 Das KISS-Prinzip
145
6.2.7 Kommentare und Dokumentation
146
6.2.8 Kodierungstechniken
147
6.3 Fehler suchen
147
6.3.1 Fehler ohne Debugger finden
147
6.3.2 Fehlersuche mit einem Debugger
149
6.3.3 Fehler beheben
153
6.3.4 Fehler zur Laufzeit abfangen
154
6.4 Erweiterte Techniken
154
6.4.1 Automatische Dokumentation des Quelltextes und Dokumentationskommentare
155
6.4.2 Automatische Kontrolle und Qualitätssicherung mit JSLint
159
7 Objekte und JavaScript
162
7.1 Was sind Objekte?
162
7.1.1 Wie werden Methoden und Eigenschaften in JavaScript verwendet?
163
7.1.2 Klassen, Instanzen, Prototypen und Vererbung
163
7.2 In JavaScript Objekte erzeugen
165
7.2.1 Konstruktoren
165
7.2.2 Test auf die Existenz eines Objekts
168
7.3 Klassenmethoden und Klasseneigenschaften verwenden
168
7.4 Native Objekte und Klassen in JavaScript
169
7.4.1 Das globale Objekt
170
7.4.2 Nutzen von Klassenelementen aus Math
170
7.4.3 Instanzen und Klassenelemente von Number
172
7.4.4 Arrays als Objekte
174
7.4.5 Objekte vom Typ Boolean
176
7.4.6 Datumsoperationen mit Date
176
7.4.7 String-Operationen
185
7.4.8 Objekte vom Typ Function
187
7.4.9 Native Bildobjekte
188
7.4.10 Reguläre Ausdrücke
188
8 Der DOM – das Mysterium der JavaScript-Welt
204
8.1 Was ist das DOM-Konzept?
204
8.2 Grundsätzliches zum Weg durch den DOM
205
8.2.1 Knoten und Verwandtschaftsbeziehungen
205
8.2.2 Wichtige Knotentypen bei Webseiten
206
8.2.3 Objekthierarchien im DOM
206
8.3 Eine Übersicht der verfügbaren DOM-Objekte
207
8.4 Das Konzept der Objektfelder
208
8.5 Generelle Zugriffsmöglichkeiten auf DOM-Objekte
209
8.5.1 Der Zugriff über einen Namen – getElementsByName()
210
8.5.2 Zugriff über eine ID – getElementById()
211
8.5.3 Zugriff über den Elementnamen – getElementsByTagName()
213
8.5.4 Zugriff über die Klasse
213
8.5.5 Der kurze Dienstweg – this
214
8.5.6 Die with()-Anweisung
214
8.6 Zugriff auf Inhalte von Elementen in der Webseite
215
8.6.1 Zugriff auf Textinhalte
216
8.6.2 Zugriff auf Formularinhalte
216
8.6.3 Zugriff auf klassische HTML-Attribute
217
8.7 Das Objekt document
219
8.7.1 Die Eigenschaften von document
219
8.7.2 Die Methoden von document
224
8.8 Das node-Objekt
229
8.8.1 Knotenarten
230
8.8.2 Die Eigenschaften eines node-Objekts
231
8.8.3 Die Methoden eines node-Objekts
235
8.9 Fenstertechniken
238
8.9.1 Die Eigenschaften des window-Objekts
239
8.9.2 Die Methoden von window
241
8.9.3 Anwendungen mit Fenstern
243
8.10 Frames, IFrames und das Objektfeld frames
258
8.10.1 Daten aus IFrames laden – ein unsichtbarer Datenspeicher
259
8.10.2 Daten in einem IFrame speichern
263
8.11 Browserauswertung und das Objekt navigator
264
8.11.1 Auflistung aller Eigenschaften von navigator
265
8.11.2 Eigenschaften und Methoden
266
8.11.3 Die Browserkennung
266
8.12 Zugriff auf Bildschirminformationen eines Besuchers
269
8.13 Ein Beispiel für die rekursive Auflistung aller Knoten einer Webseite
270
8.14 DHTML und Animationen
272
8.14.1 DHTML und Animation mit reinem JavaScript
273
8.14.2 DHTML und Animation mit reinem CSS
273
8.14.3 Verbinden von JavaScript und Style Sheets
274
8.14.4 Verändern des Inhalts der Webseite
276
8.14.5 Eine Animation mit style
276
9 Ausnahmebehandlung, Ereignisbehandlung und das Ereignisobjekt
280
9.1 Eventhandler in JavaScript
280
9.1.1 (X)HTML- versus JavaScript-Eventhandler
281
9.2 Verschiedene Ereignisse
282
9.2.1 Laden und Verlassen der Webseite
282
9.2.2 Mausereignisse
283
9.2.3 Tastaturereignisse
283
9.2.4 Formularereignisse
283
9.2.5 Weitere Ereignisse
283
9.3 Grundlagen zu Ereignisobjekten
284
9.3.1 Blubbern und die Bubble-Phase
284
9.3.2 Das Ereignisobjekt verwenden
285
9.4 Ausnahmebehandlung
291
9.4.1 Was ist eine Ausnahme?
292
9.4.2 Wozu ein Ausnahmekonzept?
293
9.4.3 Das Auffangen einer Ausnahme
295
9.4.4 Selbstdefinierte Ausnahmen erzeugen und verwenden
298
9.5 Universelle Ereignisbehandlung mit Ausnahmebehandlung
300
9.6 Globale Ereignisbehandlung
302
9.6.1 Eine universelle Funktion zur Registrierung eines Listeners
303
10 AJAX und das Web 2.0
306
10.1 Die Beziehung zwischen Webserver und Browser
307
10.1.1 Der grundsätzliche Ablauf einer Kommunikation zwischen Herr und Diener – HTTP
307
10.1.2 Die HTTP-Details und die HTTP-Header
308
10.1.3 Die Methoden der Datenübertragung per HTTP
310
10.1.4 Die URL-Kodierung
311
10.2 Das Datenformat
312
10.2.1 Klartextdatenformate
312
10.2.2 Vollständige HTML- und XHTML-Dateien
313
10.2.3 HTML-Fragmente
313
10.2.4 Reiner Klartext
313
10.2.5 Klartext mit Struktur und beliebiger Logik
314
10.3 Was ist AJAX und was bezeichnet Web 2.0?
314
10.3.1 AJAX als technische Basis des Web 2.0
314
10.4 Der grundsätzliche Ablauf einer AJAX-Anfrage und das XMLHttpRequest-Objekt (XHR)
316
10.4.1 Der grundsätzliche Ablauf
316
10.4.2 Ein XMLHttpRequest-Objekt erzeugen
317
10.5 Die Anforderung von Daten
319
10.5.1 Die Methoden eines XHR-Objekts
319
10.5.2 Die Eigenschaften eines XMLHttpRequest-Objekts
321
10.6 Verschiedene Datentypen vom Server per AJAX nachfordern
322
10.6.1 Eine reine Textdatei mit AJAX nachfordern
323
10.6.2 Übergabe von Werten an den Webserver
328
10.6.3 Nachfordern von XML-Daten
329
10.6.4 JSON-Daten anfordern und verarbeiten
333
11 Erweiterte Tools, Hintergründe & Techniken
336
11.1 Optimierung von JavaScripts
336
11.1.1 Interpreterprinzip = langsam – JIT = schnell
338
11.1.2 Rezepte
338
11.2 Sicherheitsfragen
341
11.2.1 Welche Sicherheitslücken hat JavaScript?
341
11.2.2 Wie kann man seine Skripte schützen?
344
11.3 JsUnit-Testing
346
11.3.1 Download des JsUnit-Frameworks, Dokumentation und Tutorial
346
11.3.2 Wie arbeitet man grundsätzlich bei testgetriebener Entwicklung mit xUnit?
346
11.3.3 Ergebnis und Aufbau eines xUnit-Tests
348
11.3.4 Ein praktisches Beispiel
349
11.3.5 Pro und Contra TDD
352
12 Zugriff auf Formulare
354
12.1 Das Formularobjekt
354
12.1.1 Die Eigenschaften eine Formularobjekts
355
12.1.2 Die Methoden
355
12.2 Die Elemente in dem Webformular
356
12.2.1 Eigenschaften von elements
356
12.2.2 Die Methoden von elements
357
12.2.3 Das Objektfeld options
357
12.3 Zugriff auf ein Webformular per JavaScript
358
12.3.1 Zugriff auf den Wert eines Formularelements
358
12.4 Verschicken und Zurücksetzen von Formulardaten
365
12.4.1 Klassisches Verschicken von Formulardaten
365
12.4.2 Verschicken von Formulardaten mit AJAX
367
12.5 Plausibilisieren: Formulare
368
12.5.1 Abbruch von Aktionen
369
12.5.2 Fehlerreaktion
370
12.5.3 Ein Beispiel mit Plausibilisierung
370
13 Erweiterte Objekttechniken
374
13.1 Was zeichnet in JavaScript eine Methode gegenüber einer normalen Funktion aus?
374
13.2 Ein einzelnes Objekt erweitern
375
13.2.1 Ein Beispiel für die Objekterweiterung
375
13.3 Was ist Prototyping?
377
13.3.1 Prototyping von Object
378
13.3.2 Die Standardklasse Image erweitern
380
13.3.3 Date mit Prototyping erweitern
380
13.3.4 Und doch nicht ganz ein Klassenelement
382
13.4 Erstellen von Konstruktormethoden
383
13.4.1 Was zeichnet eine Konstruktormethode aus?
384
13.4.2 Vererbung mit Prototyping simulieren
388
13.5 Datenkapselung
389
13.6 Ausblick auf JavaScript Version 2.0
392
13.6.1 Explizite Datentypen und der use strict-Modus
393
13.6.2 Klassendefinitionen und mehr
395
13.6.3 Namensräume
397
13.6.4 Konstanten
397
398
398
14.1 Multithreading über Web Workers
398
14.1.1 Erzeugen von Web Workers
399
14.1.2 Kommunikation mit einem Web Worker
400
14.1.3 Einen Worker mit terminate() beenden
400
14.1.4 Beispiele zu Web Worker
400
14.2 WebSockets und serverseitiges JavaScript mit Node.js
407
14.2.1 Push-Service im Web
408
14.2.2 Die WebSocket-Spezifikation
409
14.2.3 Same-Origin-Policy und das Sprengen der Grenzen
409
14.2.4 Ein WebSocket mit JavaScript erzeugen
410
14.2.5 Die Serverseite anhand von Node.js
411
14.2.6 Ein praktisches Beispiel für einen einfachen WebSocket-Zugriff
413
14.3 Daten im Browser speichern mit HTML5 und der Technik des Local Data Storage bzw. Session Data Storage
416
14.3.1 Die Objekte localStorage und sessionStorage sowie deren Methoden und Eigenschaft
417
14.3.2 Ein Beispiel, um einfache Daten in einem Local Storage abzulegen
418
14.3.3 Ein Beispiel zum Speichern von komplexen Informationen
419
14.4 Geodating mit HTML5 und mehr
423
14.4.1 Hintergründe der Geolokalisierung
423
14.4.2 Der Geolokalisierungsdienst von Google
426
14.4.3 Die Geolokalisierung mit HTML5
431
14.5 Zeichnen mit Canvas, SVG und CSS3
434
14.5.1 Canvas
434
14.5.2 Umgang mit Scalable Vector Graphics – SVG
459
14.5.3 CSS3-Keyframes
465
Index
468
© 2009-2024 ciando GmbH