JavaScript. Die universelle Sprache zur Web-Programmierung. von Ralph Steyer. 1. Auflage. Hanser München 2014

Transkript

1 JavaScript Die universelle Sprache zur Web-Programmierung von Ralph Steyer 1. Auflage Hanser München 2014 Verlag C.H. Beck im Internet: ISBN Zu Leseprobe schnell und portofrei erhältlich bei beck-shop.de DIE FACHBUCHHANDLUNG

2 sverzeichnis zu JavaScript von Ralph Steyer ISBN (Buch): ISBN (E-Book): Weitere Informationen und Bestellungen unter sowie im Buchhandel Carl Hanser Verlag München

3 1 Einleitung Über das Buch An wen sich das Buch wendet Wie dieses Buch organisiert ist Was Sie unbedingt haben sollten Die Hardware Die Software Node.js und Git Browser als Zentrale der Webentwicklung Grundlagen und erste Beispiele Erste JavaScript-Beispiele Ein einfaches Mitteilungsfenster Schreiben eines angepassten Aktualisierungsdatums Entgegennahme einer Benutzereingabe Einige Details zum Internet und zum Die Besonderheit bei der Webprogrammierung Kompilierung versus Interpretation Unterschiedliche Plattformen und Interpretation Vorbereitende Basics Der Aufbau von (X)HTML-Dateien Das Prinzip der Fehlertoleranz Ein erster Blick auf Objekte und das DOM-Konzept HTML5 und DOM Das neue Vokabular Das neue DOM5-Konzept und die MIME-Typen von HTML Das Namensraumkonzept von HTML Die erwartete Darstellung Der Browserkontext und die Kommunikation zwischen verschiedenen Kontexten... 38

4 VI 4 Die Versionen von JavaScript und die Einbindung in Webseiten Die Versionszyklen von JavaScript und ECMAScript JavaScript in Webseiten einbinden Die Inline-Referenz Notation eines Skript-Containers in der Webseite Die Verwendung von externen JavaScript-Dateien Der gemeinsame Namensraum Der <noscript>-container Kann man testen, ob bei einem Browser JavaScript aktiviert ist? Eine Browserweiche Elementare JavaScript-Grundstrukturen Token und Parser Token Parser Kommentare in JavaScript Einzeilige Kommentare in JavaScript Mehrzeilige Kommentare in JavaScript Schlüsselwörter in JavaScript Datentypen, Variablen und Literale Datentypen und die JavaScript Global Properties Literale und Steuerzeichen bei Zeichenketten Variablen anlegen Anweisungen Ausdrücke Blöcke Operatoren und Operanden Die Operatoren typeof und delete Kontrollstrukturen in JavaScript Entscheidungsanweisungen Iterationsanweisungen Sprunganweisungen Arrays Ein Array erzeugen Zugriff auf Array-Elemente und der Index Beispiele Mit Schleifen auf Array-Elemente zugreifen Funktionen, Prozeduren und Methoden Funktion, Prozedur, Methode Verwendung von Standardfunktionen Die Definition eigener Funktionen Der Aufruf einer Funktion Beispiele zum Nutzen von selbstdefinierten Funktionen

5 VII Lokale Variablen in Funktionen Flexible Anzahl an Funktionsargumenten und der Token arguments Rekursive Funktionsaufrufe Funktionsreferenzen Benannte versus anonyme Funktionen Innere Funktionen Closures Callbacks Aufruf einer JavaScript-Funktion per Eventhandler Was ist ein Ereignis? Ein Mechanismus zur Reaktion auf Ereignisse Fehlerbehandlung, Dokumentation und Qualitätskontrolle Ein leidiges Thema Fehler Welche Fehler gibt es? Vorbeugen statt heilen Planung und Vorbereitung IDEs und Tools nutzen Kopieren statt tippen Einhalten von Konventionen Saubere Formatierungen Das KISS-Prinzip Kommentare und Dokumentation Kodierungstechniken Fehler suchen Fehler ohne Debugger finden Fehlersuche mit einem Debugger Fehler beheben Fehler zur Laufzeit abfangen Erweiterte Techniken Automatische Dokumentation des Quelltextes und Dokumentationskommentare Automatische Kontrolle und Qualitätssicherung mit JSLint Objekte und JavaScript Was sind Objekte? Wie werden Methoden und Eigenschaften in JavaScript verwendet? Klassen, Instanzen, Prototypen und Vererbung In JavaScript Objekte erzeugen Konstruktoren Test auf die Existenz eines Objekts Klassenmethoden und Klassen eigenschaften verwenden Native Objekte und Klassen in JavaScript Das globale Objekt Nutzen von Klassenelementen aus Math

6 VIII Instanzen und Klassenelemente von Number Arrays als Objekte Objekte vom Typ Boolean Datumsoperationen mit Date String-Operationen Objekte vom Typ Function Native Bildobjekte Reguläre Ausdrücke Das DOM das Mysterium der JavaScript-Welt Was ist das DOM-Konzept? Grundsätzliches zum Weg durch das DOM Knoten und Verwandtschaftsbeziehungen Wichtige Knotentypen bei Webseiten Objekthierarchien im DOM Eine Übersicht der verfügbaren DOM-Objekte Das Konzept der Objektfelder Generelle Zugriffsmöglichkeiten auf DOM-Objekte Der Zugriff über einen Namen getelementsbyname() Zugriff über eine ID getelementbyid() Zugriff über den Elementnamen getelementsbytagname() Zugriff über die Klasse Der kurze Dienstweg this Die with()-anweisung Zugriff auf Inhalte von Elementen in der Webseite Zugriff auf Textinhalte Zugriff auf Formularinhalte Zugriff auf klassische HTML-Attribute Das Objekt document Die Eigenschaften von document Die Methoden von document Das node-objekt Knotenarten Die Eigenschaften eines node-objekts Die Methoden eines node-objekts Fenstertechniken Die Eigenschaften des window-objekts Die Methoden von window Anwendungen mit Fenstern Frames, IFrames und das Objektfeld frames Daten aus IFrames laden ein unsichtbarer Datenspeicher Daten in einem IFrame speichern Browserauswertung und das Objekt navigator

7 IX Auflistung aller Eigenschaften von navigator Eigenschaften und Methoden Die Browserkennung Zugriff auf Bildschirminformationen eines Besuchers Ein Beispiel für die rekursive Auflistung aller Knoten einer Webseite DHTML und Animationen DHTML und Animation mit reinem JavaScript DHTML und Animation mit reinem CSS Verbinden von JavaScript und Style Sheets Verändern des Inhalts der Webseite Eine Animation mit style Ausnahmebehandlung, Ereignisbehandlung und das Ereignisobjekt Eventhandler in JavaScript (X)HTML- versus JavaScript-Eventhandler Verschiedene Ereignisse Laden und Verlassen der Webseite Mausereignisse Tastaturereignisse Formularereignisse Weitere Ereignisse Grundlagen zu Ereignisobjekten Blubbern und die Bubble-Phase Das Ereignisobjekt verwenden Ausnahmebehandlung Was ist eine Ausnahme? Wozu ein Ausnahmekonzept? Das Auffangen einer Ausnahme Selbstdefinierte Ausnahmen erzeugen und verwenden Universelle Ereignisbehandlung mit Ausnahmebehandlung Globale Ereignisbehandlung Eine universelle Funktion zur Registrierung eines Listeners AJAX und das Web Die Beziehung zwischen Webserver und Browser Der grundsätzliche Ablauf einer Kommunikation zwischen Herr und Diener HTTP Die HTTP-Details und die HTTP-Header Die Methoden der Datenübertragung per HTTP Die URL-Kodierung Das Datenformat Klartextdatenformate

8 X Vollständige HTML- und XHTML-Dateien HTML-Fragmente Reiner Klartext Klartext mit Struktur und beliebiger Logik Was ist AJAX und was bezeichnet Web 2.0? AJAX als technische Basis des Web Der grundsätzliche Ablauf einer AJAX-Anfrage und das XMLHttpRequest-Objekt (XHR) Der grundsätzliche Ablauf Ein XMLHttpRequest-Objekt erzeugen Die Anforderung von Daten Die Methoden eines XHR-Objekts Die Eigenschaften eines XMLHttpRequest-Objekts Verschiedene Datentypen vom Server per AJAX nachfordern Eine reine Textdatei mit AJAX nachfordern Übergabe von Werten an den Webserver Nachfordern von XML-Daten JSON-Daten anfordern und verarbeiten Erweiterte Tools, Hintergründe & Techniken Optimierung von JavaScripts Interpreterprinzip = langsam JIT = schnell Rezepte Sicherheitsfragen Welche Sicherheitslücken hat JavaScript? Wie kann man seine Skripte schützen? JsUnit-Testing Download des JsUnit-Frameworks, Dokumentation und Tutorial Wie arbeitet man grundsätzlich bei testgetriebener Entwicklung mit xunit? Ergebnis und Aufbau eines xunit-tests Ein praktisches Beispiel Pro und Contra TDD Zugriff auf Formulare Das Formularobjekt Die Eigenschaften eine Formularobjekts Die Methoden Die Elemente in dem Webformular Eigenschaften von elements Die Methoden von elements Das Objektfeld options Zugriff auf ein Webformular per JavaScript Zugriff auf den Wert eines Formularelements

9 XI 12.4 Verschicken und Zurücksetzen von Formulardaten Klassisches Verschicken von Formulardaten Verschicken von Formulardaten mit AJAX Plausibilisieren: Formulare Abbruch von Aktionen Fehlerreaktion Ein Beispiel mit Plausibilisierung Erweiterte Objekttechniken Was zeichnet in JavaScript eine Methode gegenüber einer normalen Funktion aus? Ein einzelnes Objekt erweitern Ein Beispiel für die Objekterweiterung Was ist Prototyping? Prototyping von Object Die Standardklasse Image erweitern Date mit Prototyping erweitern Und doch nicht ganz ein Klassenelement Erstellen von Konstruktormethoden Was zeichnet eine Konstruktormethode aus? Vererbung mit Prototyping simulieren Datenkapselung Ausblick auf JavaScript Version Explizite Datentypen und der use strict-modus Klassendefinitionen und mehr Namensräume Konstanten JavaScript-Techniken bei HTML5 und mehr Multithreading über Web Workers Erzeugen von Web Workers Kommunikation mit einem Web Worker Einen Worker mit terminate() beenden Beispiele zu Web Worker WebSockets und serverseitiges JavaScript mit Node.js Push-Service im Web Die WebSocket-Spezifikation Same-Origin-Policy und das Sprengen der Grenzen Ein WebSocket mit JavaScript erzeugen Die Serverseite anhand von Node.js Ein praktisches Beispiel für einen einfachen WebSocket-Zugriff Daten im Browser speichern mit HTML5 und der Technik des Local Data Storage bzw. Session Data Storage

10 XII Die Objekte localstorage und sessionstorage sowie deren Methoden und Eigenschaft Ein Beispiel, um einfache Daten in einem Local Storage abzulegen Ein Beispiel zum Speichern von komplexen Informationen Geodating mit HTML5 und mehr Hintergründe der Geolokalisierung Der Geolokalisierungsdienst von Google Die Geolokalisierung mit HTML Zeichnen mit Canvas, SVG und CSS Canvas Umgang mit Scalable Vector Graphics SVG CSS3-Keyframes Index