Inhaltsübersicht. Einleitung Überblick. Erste Schritte in JavaScript. Variablen. Verzweigungen. Schleifen. Funktionen. Objekte. Vordefinierte Objekte

Transkript

1 Inhaltsübersicht Einleitung Überblick Erste Schritte in JavaScript Variablen Verzweigungen Schleifen Funktionen Objekte Vordefinierte Objekte Fehlerbehandlung JavaScript im Browser Das Document Object Model Ereignisse Formulare Reguläre Ausdrücke Bilder und Animationen Datenspeicherung und Dateizugriff Ajax Web Worker Webapplikationen mit Offlinemodus Mobile Anwendungen Bibliografische Informationen digitalisiert durch

2 vi Inhaltsübersicht Anhang 365 A Referenz 367 B Online-Ressourcen 441 Stichwortverzeichnis 443

3 1 Einleitung Ziel dieses Buches Aufbau dieses Buches ECMAScript JavaScript im Browser Webapplikationen Referenz Beispieldateien Danksagungen 4 2 Überblick Ablauf einer Abfrage im Web Geräte und Internetzugang Webbrowser Aubrufen einer Webseite Die Antwort des Servers Verarbeitung auf dem Server Verarbeitung auf dem Client JavaScript Entstehungsgeschichte ECMAScript JavaScript-Versionen Verwandte Standards Frameworks und Funktionsbibliotheken Andere Einsatzgebiete von JavaScript bzw. ECMAScript Weiterentwicklung und zusätzliche Informationen 14

4 viii 3 Erste Schritte in JavaScript Erstellung eines HTML-Dokuments mit JavaScript-Code Die grundlegende HTML-Datei Grundaufbau eines HTML-Dokuments JavaScript-Code einfügen Mehrere JavaScript-Befehle Einfache Berechnungen Auf Benutzereingaben reagieren Kommentare Darstellung mit einem nicht JavaScript-fähigen Browser js-bibliotheksdatei Quellcode anzeigen 29 4 Variablen Variablen einsetzen Variablen definieren Ausgangswert einer Variablen Variablennamen Berechnungen Operatoren Rechenoperatoren Inkrement- und Dekrement-Operatoren Zuweisungsoperatoren Der typeof-operator Bitweise Operatoren 41 5 Verzweigungen if-abfragen Vergleichsoperatoren Die else-anweisung Boolesche Variablen überprüfen Geschachtelte if-abfragen Der Negationsoperator Boolesche Operatoren Der Konditional-Operator?: switch-anweisungen 50

5 ix 6 Schleifen Die for-schleife Grundaufbau der for-schleife Die Schleifenvariable selbst einsetzen Die Schrittweite festlegen Endlosschleifen Sofortiger Abbruch Die while-schleife break continue Die do-while-schleife 63 7 Funktionen Funktionen definieren und aufrufen Aufbau einer Funktion Eine Funktion aufrufen Eine Funktion als Reaktion auf Benutzereingaben aufrufen Übergabewerte Feste Anzahl von Argumenten Funktionsaufrufe mit Variablenübergabe Variable Anzahl von Argumenten Rückgabewerte Globale und lokale Variablen Globale Variablen Lokale Variablen Globale oder lokale Variablen? Vordefinierte Funktionen parselnto parsefloat() eval() Fortgeschrittene Themen im Zusammenhang mit Funktionen Das Function-Objekt Anonyme Funktionen Innere Funktionen Rekursive Funktionen 82

6 8 Objekte Was sind Objekte? Mit Objekten arbeiten Den Konstruktor aufrufen Auf Eigenschaften zugreifen Methoden verwenden for..in-schleife Der instanceof-operator with Call by Reference Objekte definieren Das Object-Objekt Einen Konstruktor definieren Konstruktor mit Übergabewert Die Kurzschreibweise JSON Objekte ineinander schachteln Kapselung Objekte erweitern Eigenschaften hinzufügen Methoden hinzufügen Vererbung Die Prototypkette Überschreiben von Eigenschaften Überschreiben von Methoden Erweiterungen in ECMAScript Eigenschaften festlegen Veränderungen des Objekts einschränken Zugriffsmethoden definieren Eigenschaften entfernen Die Eigenschaften eines Objekts durchlaufen Der Strict Mode Vordefinierte Objekte Das Date-Objekt Ein Date-Objekt erzeugen Das Datum und die Uhrzeit festlegen Ein Datum ausgeben Zeitdifferenzen berechnen Das Math-Objekt ; Vordefinierte Konstanten Zahlen runden Zufallszahlen 108

7 xi 9.3 Das String-Objekt charat() indexof() lastlndexofo substring!) Ill splito Ill Länge eines Strings Das Array-Objekt Ein Array erzeugen Auf die Elemente eines Arrays zugreifen Ein Array initialisieren Dynamische Arrays Unterschiedliche Datentypen in Arrays Elemente zu einem String zusammenfügen Die Reihenfolge in einem Array umkehren Array-Inhalte sortieren Kurzschreibweise für Arrays Erweiterungen in ECMAScript Fehlerbehandlung Fehlermeldungen Fehlerarten Syntaxfehler Laufzeitfehler Logische Fehler Debugger Exception Handling Das Error-Objekt Exceptions auslösen JavaScript im Browser Das Browserfenster Der allgemeine Aufbau Fenster erzeugen Ein Fenster schließen Ein Fenster in den Vordergrund bringen Zwischen Fenstern kommunizieren IFrames Dialogfenster Navigation Das location-objekt Das history-objekt Browser-Cache 145

8 11.3 JavaScript-Code im Browserfenster ausführen Direkte Ausführung beim Laden des HTML-Dokuments Ereignisgesteuerte Ausführung Verzögerte Ausführung mit Timern Regelmäßige Ausführung mit Intervallen Probleme bei der Ausführung von JavaScript-Code Browserversionen überprüfen Das navigator-objekt abfragen 149 WA.2 Die JavaScript-Version im <script>-tag angeben Die hasfeature((-methode des DOM-Standards verwenden Objekte überprüfen Sicherheit Herkunft eines Skripts Sicherheitszonen Zertifikate Das Document Object Model DOM-Versionen Aufbau eines Dokuments Der DOM-Baum Elemente ansprechen Auf Elemente über das id-attribut zugreifen Mit den vordefinierten Arrays arbeiten Kinder und Eltern ansprechen Elemente verändern Den Inhalt eines Textknotens ändern Andere Eigenschaften ändern Die Darstellung ändern innerhtml Elemente hinzufügen Einen Textknoten hinzufügen Andere Elemente hinzufügen Neuen HTML-Code einfügen Elemente umhängen und kopieren Elemente umhängen Elemente kopieren Elemente entfernen 173

9 xiii 13 Ereignisse Das grundlegende Ereignismodell Funktionsweise Event-Handler festlegen Verfügbare Event-Handler onclick onmouseover und onmouseout onload und onunload Standardaktionen unterbinden Ereignisse mittels Methodenaufruf auslösen Ereignisse im W3C-Standard Event-Listener Event-Capturing und Event-Bubbling Das Event-Objekt Ereignisse selbst erzeugen Ereignisse im Microsoft Internet Explorer bis Event-Listener Das event-objekt Event-Capturing und Event-Bubbling Browserunabhängiges Drag&Drop Funktionsweise des Drag&Drop-Skripts Verschiedene Ereignismodelle kombinieren Formulare Formulare im Objektmodell Das Form-Objekt Formularelemente Relative Adressierung Textfelder Das Text-Objekt - einzeilige Textfelder Das Textarea-Objekt - mehrzeilige Textfelder Das Password-Objekt Das Hidden-Objekt Schaltflächen Das Button-Objekt Das Submit-Objekt Das Reset-Objekt Auswahlfelder Das Checkbox-Objekt Das Radio-Objekt 213

10 xiv 14.5 Auswahllisten Das Select-Objekt - Einfachauswahl Das Select-Objekt - Mehrfachauswahl 2l Ein Select-Objekt verändern Die Einträge in einem Select-Objekt gruppieren Dateiauswahl Das FileUpload-Objekt Ergänzungen in HTML Neue Formularelemente Zahlen eingeben Kalender Farbauswahl Fortschrittsanzeige Das datalist-element Formulare gestalten Formularelemente beschriften Formularelemente gruppieren Aktivierungsreihenfolge Das erste Eingabefeld aktivieren Formularelemente deaktivieren Die Eingabetaste im Zusammenhang mit Formularen Eingegebene Daten verarbeiten Formularelemente voneinander abhängig machen Formularinhalte an den Server schicken Formulareingaben überprüfen Daten für die spätere Verwendung speichern Sicherheitsaspekte beim Versenden von Formularen Daten per versenden Reguläre Ausdrücke Reguläre Ausdrücke verwenden Kurzschreibweise Modifikatoren Besondere Zeichen Multiplikatoren Mehrere Zeichen zusammenfassen Das Oder-Zeichen Anker Zeichenklassen Klammern 253

11 xv 15.2 Das RegExp-Objekt Der RegExp()-Konstruktor Methoden des RegExp-Objekts Das String-Objekt im Zusammenhang mit regulären Ausdrücken Alternativen Nach einem bestimmten Teilstring suchen Einen String auf bestimmte Zeichen beschränken Bilder und Animationen Bilddateien einbinden und verändern Bildformate Das Image-Objekt Bilder ersetzen Bilder vorher laden Bilder positionieren Die Reihenfolge von Bildern festlegen Animationen Mit JavaScript zeichnen Die Zeichenfläche Rechtecke Pfade Kreise Animationen mit dem Canvas-Objekt Vektorgrafiken SVG-Dateien erstellen Vektorgrafiken einbinden Auf die Elemente einer Vektorgrafik zugreifen Vektorgrafiken und Ereignisse Datenspeicherung und Dateizugriff Suchstrings Den Suchstring auslesen Leer- und Sonderzeichen verwenden Cookies Ein einfaches Cookie Haltbarkeit Ein Cookie löschen Geltungsbereich von Cookies Pfadangaben Sichere Übertragung Beschränkungen Sicherheit 292

12 xvi 17.3 Web Storage Daten schreiben und lesen Datentypen Der Event-Handler onstorage Tools WebDB Verfügbarkeit und Zukunft von WebDB Structured Query Language (SQL) A3 Eine Datenbank öffnen und eine Tabelle erstellen AA Datensätze einfügen Abfragen ausführen Zukünftige Datenspeicherung mit IndexedDB Dateizugriff Auf Dateien zugreifen Dateien auslesen Eine Datei mit Drag&Drop einbinden Sicherheitsaspekte Weitere Möglichkeiten der Datenspeicherung Speichern von Daten auf dem Server Flash Gears Ajax Funktionsweise von Ajax Desktop-Applikationen und Webapplikationen Asynchrone Kommunikation Aufbau einer Ajax-Applikation Zusammenspiel zwischen Client und Server Dienste im Internet nutzen Sicherheitsaspekte im Zusammenhang mit Ajax Eine Ajax-Applikation erstellen und testen Technische Voraussetzungen Lokales Erstellen und Testen Hilfsprogramme Eine Ajax-Applikation gestalten Visuelles Feedback Navigation und Lesezeichen Suchmaschinen 321

13 xvii 18.4 Das XMLHttpRequest-Objekt Ein XMLHttpRequest-Objekt erzeugen XMLHttpRequest im Internet Explorer 5 und Genereller Ansatz zum Erzeugen eines XMLHttpRequest-Objekts Eine Anfrage an den Server schicken Auf die Antwort des Servers reagieren HTTP-Statuscodes Formulare mit Ajax Alternativen zum XMLHttpRequest-Objekt XML JSON Web Worker Arten und Verfügbarkeit von Web Workers Single Threaded Environment ohne Web Worker Der Grundaufbau von Web Workers Das Worker-Objekt Nachrichten Zugriffsmöglichkeiten durch den Web Worker Gleichzeitiges Ausführen von Aufgaben Das Intervall-Beispiel mit Web Workers A.I Ein komplexeres Beispiel Shared Web Worker Das SharedWorker-Objekt Nachrichten im Zusammenhang mit Shared Web Workers Webapplikationen mit Offlinemodus Die Manifest-Datei Prüfen, ob ein Offlinemodus unterstützt wird Aufbau und Einbindung Den richtigen MIME-Type verwenden Das applicationcache-objekt Dateien aktualisieren Architektur Zwischen Online- und Offlinemodus hin- und herschalten Synchronisierung Manuelle oder automatische Synchronisierung. 355

14 xviii 21 Mobile Anwendungen Grundsätze des W3C für das mobile Web Webseiten für das eine Web gestalten Webstandards einhalten Bekannte Probleme vermeiden Gerätelimits beachten Die Navigation optimieren Grafiken & Farben prüfen Die Größe minimieren Am Datentransfer sparen Bei Nutzereingaben helfen An den mobilen Anwender denken Herausforderungen Geräte und Systeme Native Applikationen Mobile Webapplikationen Webtechnologien auf mobilen Geräten nutzen Webapplikationen als native Applikationen verpacken Auf besondere Eigenschaften eines Geräts zugreifen 363 Anhang 365 A Referenz 367 A.I Anchor 368 A.2 applicationcache 368 A.3 Area 370 A.4 Argument 370 A.5 Array 371 A.6 Boolean 374 A.7 Button 374 A.8 Canvas 375 A.9 CanvasGradient 375 A.10 CanvasPattern 375 A.ll CanvasPixelArray 376 A.12 Checkbox 376 A.13 Context 377 A.14 Database 382

15 xix A.15 Date 383 A.16 document 386 A.17 Element 388 A.18 Error 393 A.19 Event 394 A.20 event 397 A.21 File 398 A.22 FileReader 399 A.23 FileUpload 400 A.24 Form 401 A.25 Function 403 A.26 Global 403 A.27 Hidden 405 A.28 history 405 A.29 IFrame 406 A.30 Image 406 A.31 ImageData 408 A.32 Input 408 A.33 JSON 410 A.34 Link 410 A.35 localstorage 411 A.36 location 412 A.37 Math 413 A.38 MessagePort 415 A.39 MimeType 416 A.40 navigator 416 A.41 Number 417 A.42 Object 418 A.43 Option 420 A.44 Password 420 A.45 Plugin 421 A.46 Radio 421 A.47 RegExp 422 A.48 Reset 423

16 A.49 screen 423 A.50 Select 424 A.51 sessionstorage 424 A.52 SharedWorker 425 A.53 SQLTransaction 426 A.54 String 426 A.55 style 429 A.56 Submit 430 A.57 SVG 430 A.58 Text 430 A.59 Textarea 431 A.60 TextMetrics 431 A.61 window 432 A.62 Worker 437 A.63 XMLHttpRequest 438 B Online-Ressourcen 441 Stichwortverzeichnis 443