Stefan Koch. JavaScript. Einführung, Programmierung und Referenz inklusive Ajax. 5., aktualisierte und erweiterte Auflage. dpunkt.

Transkript

1 Stefan Koch JavaScript Einführung, Programmierung und Referenz inklusive Ajax 5., aktualisierte und erweiterte Auflage dpunkt.verlag

2 1 Einleitung Ziel dieses Buches Aufbau dieses Buches ECMAScript JavaScript im Browser Webapplikationen Referenz Beispieldateien Danksagungen 4 2 Überblick Das Internet Das World Wide Web Webbrowser ',.' 8 ' HTML Serverseitige Verarbeitung Clientseitige Verarbeitung Weiterentwicklungen der Markup-Sprachen JavaScript Entstehungsgeschichte Client-side JavaScript Server-side JavaScript Ajax Andere Einsatzgebiete von JavaScript bzw. ECMAScript 17 * Weiterentwicklung und zusätzliche Informationen 17

3 I viii Inhaltsverzeichnis 3 Erste Schritte in JavaScript 3.1 Erstellung eines HTML-Dokuments mit JavaScript-Code Die grundlegende HTML-Datei Grundaufbau eines HTML-Dokuments JavaScript-Code einfügen Mehrere JavaScript-Befehle Einfache Berechnungen 3.2 Auf Benutzereingaben reagieren 3.3 Kommentare 3.4 Darstellung mit einem nicht JavaScript-fähigen Browser 3.5 js-bibliotheksdatei 3.6 Quellcode anzeigen 3.7 Vorbereitungen vor der Veröffentlichung 4 Variablen 4.1 Variablen einsetzen 4.2 Variablen definieren 4.3 Ausgangswert einer Variablen 4.4 Variablennamen 4.5 Berechnungen 4.6 Operatoren Rechenoperatoren J Inkrement- und Dekrement-Operatoren Zuweisungsoperatoren Der typeof-operator Bitweise Operatoren 5 Verzweigungen 5.1 if-abfragen Vergleichsoperatoren Die else-anweisung Boolesche Variablen überprüfen Geschachtelte if-abfragen Der Negationsoperator Boolesche Operatoren 5.2 Der Konditional-Operator?: 5.3 switch-anweisungen

4 6 Schleifen Die for-schleife Grundaufbau der for-schleife Die Schleifenvariable selbst einsetzen Die Schrittweite festlegen Endlo.sschleifen ' Sofortiger Abbruch Die while-schleife ' break continue Die do-while-schleife 67 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 19 1A.\ Globale Variablen Lokale Variablen / let Globale oder lokale Variablen? : Vordefinierte Funktionen parselnt() parsefloat() eval() Fortgeschrittene Themen im Zusammenhang mit Funktionen Die Function-Klasse Anonyme Funktionen 86 r* Innere Funktionen Rekursive Funktionen Generatoren Destructuring 88

5 8 Objekte 8.1 Was sind Objekte? 8.2 Mit Objekten arbeiten Eine Klasse definieren Ein Objekt erzeugen Auf Eigenschaften und Methoden zugreifen Das Objekt zerstören 8.3 Vordefinierte Klassen 8.4 Die Date-Klasse Ein Date-Objekt erzeugen Das Datum und die Uhrzeit festlegen Ein Datum ausgeben Zeitdifferenzen berechnen Das Jahr-2000-Problem Die Math-Klasse ] Vordefinierte Konstanten Zahlen runden Zufallszahlen Die String-Klasse ] charat() indexof() lastindexof() substringo split() Länge eines Strings ] 8.7 ' Die Array-Klasse, 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 Verkürzte Schreibweise Erweiterungen seit JavaScript Befehle zum Arbeiten mit Objekten Der instanceof-operator with for..in-schleife 1

6 8.9 Fortgeschrittene Themen im Zusammenhang mit Objekten JavaScript als prototypenbasierte Programmiersprache Objekte erweitern Eigene Klassen definieren JavaScript Object Notation Kapselung... ( Vererbung..,' Fehlerbehandlung Fehlermeldungen Fehlerarten Syntaxfehler Laufzeitfehler." Logische Fehler Debugger Exception Handling Das Error-Objekt Exceptions auslösen JavaScript im Browser Objekte einer Webseite Das Browserfenster Popup-Fenster Navigation.' y( Das location-objekt Das history-objekt : Browser-Cache JavaScript-Code im Browserfenster ausführen Verschiedene Skripte gleichzeitig ausführen Timer Browserversionen überprüfen i Das navigator-objekt abfragen Die JavaScript-Version im <script>-tag angeben Objekte überprüfen, Sicherheit Herkunft eines Skripts Sicherheitszonen Zertifikate 155

7 xii Inhaltsverzeichnis 11 Stylesheets und das Document Object Model 11.1 Cascading Style Sheets ] Was sind Stylesheets? ' Stylesheets einbinden ] Klassen ] Stylesheets für ein bestimmtes Element, festlegen Elemente positionieren Mauszeiger anpassen Stylesheet-Konflikte Stylesheets mit JavaScript verändern Das Document Object Model DOM Level DOM Level 2. ] Der DOM Inspector Der DOM-Baum Elemente direkt ansprechen Kinder und Eltern ] Elemente verändern ] Elemente hinzufügen Elemente umhängen und kopieren ' ] Elemente entfernen innerhtml ] document.all und document.layers 1 12 Ereignisse 12.1 Das grundlegende Ereignisrrfodell ] Funktionsweise Event-Handler festlegen ] Verfügbare Event-Handler onclick ] onmouseover und onmouseout onload und onunload Standardaktionen unterbinden Ereignisse mittels Methodenaufruf auslösen ] 12.2 Ereignisse im W3C-Standard Event-Listener.. ] Event-Capturing und Event-Bubblirig Das Event-Objekt Ereignisse selbst erzeugen ]

8 12.3 Ereignisse im Microsoft Internet Explorer Event-Listener Das event-objekt Event-Capturing und Event-Bubbling Formulare Formulare im Objektmodell Das Form-Objekt' Formularelemente Relative Adressierung Textfelder Das Text-Objekt - einzeilige Textfelder Das Textarea-Objekt - mehrzellige 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 Auswahllisten Das Select-Objekt - Einfachauswahl Das Select-Objekt - Mehrfachauswahl Ein Select-Objekt verändern.y Die Einträge in einem Select-Objekt gruppieren Dateiauswahl Das FileUpload-Objekt Formulare gestalten Formularelemente beschriften Formularelemente gruppieren Aktivierungsreihenfolge Das erste Eingabefeld aktivieren Formularelemente deaktivieren Die Eingabetaste im Zusammenhang mit Formularen 230

9 13.8 Die 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 14 Reguläre Ausdrücke 14.1 Reguläre Ausdrücke verwenden Kurzschreibweise Modifikatoren Besondere Zeichen Multiplikatoren Mehrere Zeichen zusammenfassen Das Oder-Zeichen Anker Zeichenklassen Klammern 14.2 Die RegExp-Klasse Der RegExp()-Konstruktor Methoden der RegExp-Klasse Die String-Klasse im Zusammenhang mit regulären Ausdrücken Alternativen Nach einem bestimmten Teilstring suchen Einen String auf bestimmte Zeichen beschränken....' 15 Fenster und Frames 15.1 Fenster Fenster über HTML erzeugen Fenster über JavaScript erzeugen Eigenschaften eines Fensters Ein Fenster schließen Ein Fenster in den Vordergrund bringen Fenster in der Praxis Frames Frames erstellen Frames entfernen Frames in der Praxis 1

10 15.3 IFrames Kommunikation zwischen Fenstern und Frames Ein Fenster ansprechen Einen Frame ansprechen Bilder und Animationen Bilder Bildformate...' Vektorgrafiken Das <img>-tag Das Image-Objekt Bilder positionieren Clipping ' z-index Transparenz Bilder und Links Bilder ersetzen Bilder vorher laden Animationen Animationen allgemein Verschiedene Animationstechniken Lauftexte Clipping verändern Animationen mit Bildern Browserunabhängige Programmierung Unterschiede zwischen den Browsern 303 > Yl.l Browserunabhängiges Drag&Drop J Funktionsweise des Drag&Drop-Skripts, Verschiedene Ereignismodelle kombinieren Besonderheiten und Verbesserungsmöglichkeiten Suchstrings und Cookies Suchstrings Den Suchstring auslesen Leer- und Sonderzeichen verwenden 313 J8.2 Cookies Ein einfaches Cookie Haltbarkeit Ein Cookie löschen 320

11 xvi Inhaltsverzeichnis Geltungsbereich von Cookies Pfadangaben Sichere Übertragung Wo werden Cookies gespeichert?..'.' Beschränkungen Sicherheit Funktionsbibliothek ' 18.3 Virtuelle Warenkörbe 18.4 Session IDs 19 Ajax 19.1 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 19.2 Eine Ajax-Applikation erstellen und testen Technische Voraussetzungen Lokales Erstellen und Testen Hilfsprogramme 19.3 Eine Ajax-Applikation gestalten Visuelles Feedback Navigation und Lesezeichen Suchmaschinen 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 19.5 XML 19.6 JSON

12 20 Gears Webapplikationen mit Offlinemodus Bausteine für einen Offlinemodus Welche Applikationen eignen sich für eine Offlinenutzung? Prüfen, ob Gears installiert ist Zustimmung des Anwenders Eine Datenbank auf dem Client verwenden Structured Query Language (SQL) Ein Database-Objekt erzeugen Eine Datenbank erstellen und öffnen Datenstruktur definieren Daten in der Datenbank ablegen Eine Datenbankabfrage durchführen Ressourcen offline verfügbar machen ManagedResourceStore ResourceStore Verknüpfungen auf dem Desktop erstellen Architektur Zwischen Online- und Offlinemodus hinund herschalten Synchronisierung Manuelle oder automatische Synchronisierung Sicherheit Weitere Möglichkeiten mit Gears 375 > 21 JavaScript und andere Technologien MIME-Types : Von JavaScript auf Java zugreifen Java-Applets einbinden ' Einzelne Methoden aufrufen Das Java-Applet Variablenübergabe Von Java auf JavaScript zugreifen Java-Applets und mayscript Packages einbinden 383 * Das JSObject-Objekt 384

13 Anhang A Referenz A.l Anchor A.2 Area A.3 Argument A.4 Array A.5 Boolean A.6 Button A.7 Checkbox A.8 Date, A.9 document A.10 Element A.ll Error A.12 Event A.13 event A.14 FileUpload A.15 Form A.l 6 Frame A.l7 Function A.18 Global A.19 Hidden A.2Ö history.* A.21 IFrame A.22 Image. A.23 Input A.24 Link A.25 location A.26 Math A.27 MimeType A.28 navigator A.29 Number A.30 Object A.31 Option

14 xix A.32 Password 426 A.33 Plugin 426 A.34 Radio 427 A.35 RegExp 427 A.36 Reset 428 A.37 screen 429 A.38 Select 429 A.39 String 430 A.40 style 432 A.41 Submit 433 A.42 Text 434 A.43 Textarea 434 A.44 window 435 A.45 XMLHttpRequest 440 B Literatur und Online-Ressourcen 443 Stichwortverzeichnis 445