JavaScript (eBook)

Diplom-Mathematiker Ralph Steyer arbeitet seit 1996 selbstständig als Fachautor, Fachjournalist, EDV-Dozent und Programmierer. Davor war er einige Jahre Programmierer bei einer großen Versicherung. In zahlreichen Schulungen und Vorlesungen in Firmen sowie an Akademien und Fachhochschulen gibt er sein Fachwissen weiter und nutzt die dort gewonnenen Kenntnisse für seine Veröffentlichungen.

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 < noscript>
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 Klassen­eigenschaften 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
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
14 
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