Plugin-Entwicklung mit jQuery

Inhaltsverzeichnis

Vorwort

1 JavaScript: Ein Überblick

1.1 Webanwendungen

1.2 Serverseitige Webanwendungen

1.3 Eingebettet

1.4 JavaScript als Wunderwaffe?

1.5 Zusammenfassung

2 Willkommen in der Welt von jQuery

2.1 Herunterladen und Einbinden von jQuery

2.1.1 Download von der jQuery-Webseite

2.1.2 Verwendung eines CDN

2.1.3 Welcher Weg ist der bessere?

2.2 jQuery vs. JavaScript

2.3 Dokumententraversierung

2.3.1 CSS-Selektoren

2.3.2 Element-Sets

2.3.3 Fluent Interface

2.3.4 Traversierung der Baumstruktur

2.3.5 jQuerys Gedächtnis für Sets

2.4 Dokumentenmanipulation

2.4.1 CSS-Eigenschaften

2.4.2 Umgang mit Attributen und CSS-Klassen

2.4.3 Erstellen neuer Elemente

2.4.4 Elemente im DOM platzieren

2.4.5 Inhalte von Elementen auslesen und verändern

2.4.6 Elemente ersetzen, umhüllen oder löschen

2.4.7 Elemente aus dem DOM lösen

2.4.8 Optische Position und Größe

2.4.9 Callbacks anstelle von Werten mit jQuery 1.4

2.5 Ereignisbehandlung

2.5.1 Ereignisse registrieren mit jQuery

2.5.2 Das Event-Objekt

2.5.3 Ereignisregistrierungen wieder aufheben

2.5.4 Ereignisse auslösen

2.5.5 Umgang mit benutzerdefinierten Ereignissen

2.5.6 Abkürzungen zur Ereignisregistrierung

2.5.7 Ereignisnamensräume

2.5.8 Der Weg eines Ereignisses

2.5.9 Ereignisdelegation

2.5.10 Ereignisse außerhalb von Elementen

2.5.11 Die Proxy-Funktion

2.6 Animation

2.6.1 CSS-Eigenschaften über die Zeit verändern

2.6.2 Relative Werte als Animationsziel

2.6.3 Werte mit spezieller Bedeutung

2.6.4 Mehrschrittige Animationen

2.6.5 Animationen während der Ausführung anhalten

2.6.6 Eine Easing-Funktion pro Eigenschaft

2.6.7 Animieren mit Abkürzungen

2.7 AJAX mit jQuery

2.7.1 JSON

2.7.2 Verschiedene Kommunikationswege

2.7.3 Die ajax-Funktion

2.7.4 Globale AJAX-Optionen mit ajaxSetup

2.7.5 Abkürzungen auf dem Weg zu neuen Daten

2.8 Zusammenfassung

3 jQuery-Plug-ins

3.1 Was sind jQuery-Plug-ins?

3.2 Unterschiedliche Plug-in-Typen

3.2.1 Neue Methoden

3.2.2 Neue Funktionen

3.2.3 Special Events

3.2.4 Animations Easing-Funktionen

3.2.5 CSS-Selektoren

3.2.6 Widgets

3.2.7 Effects

3.2.8 Behaviours

3.3 Grundregeln der Plug-in-Entwicklung

3.3.1 Konventionen zur Namensgebung

3.3.2 Zugriff auf die jQuery-Bibliothek

3.3.3 Anlegen neuer Set-Methoden

3.3.4 Anlegen neuer Funktionen

3.3.5 Beachtung des Fluent-Interface

3.3.6 Multiple Elemente eines Sets korrekt behandeln

3.4 Grundgerüst

3.5 Zusammenfassung

4 Hello World

4.1 Anforderungen an das Plug-in

4.2 Grundgerüst des world-Plug-ins

4.3 Behandlung von Optionen

4.3.1 Implementierung der Optionsbehandlung

4.4 Manipulation des DOM

4.5 Das vollständige Plug-in

4.6 Zusammenfassung

5 Objektorientierung

5.1 Konzept der Objektorientierung

5.1.1 Ein Beispiel bitte!

5.2 Klassen != Prototypen

5.2.1 Objekte in JavaScript

5.2.2 Prototypen

5.2.3 Konstruktorfunktionen

5.3 Zurück zum Bankszenario

5.3.1 Der Prototyp für das Kundenobjekt

5.3.2 Der Prototyp für das Kontenobjekt

5.3.3 Anlegen neuer Kunden- und Kontenobjekte

5.4 Prototype Chains

5.4.1 Ketten von Prototypen

5.4.2 Ein weiteres Hindernis: Konstruktorfunktionen

5.5 Zurück zum Bankszenario II

5.6 Zusammenfassung

6 Livesearch

6.1 Livesearch im Detail

6.2 Aufgaben des Plug-ins

6.3 Kategorisierung des Plug-ins

6.3.1 Objektorientiertes Design

6.3.2 Objektorientierung nicht zum Selbstzweck

6.4 Das übliche Grundgerüst

6.5 Das _Livesearch-Objekt

6.5.1 Der Konstruktor

6.5.2 Methode: disableNativeAutocomplete

6.5.3 Methode: createListContainer

6.5.4 Methode: createSearchFunction

6.5.5 Methode: attachToTarget

6.5.6 moveCursor-Methode

6.5.7 closeAutocompleteList-Methode

6.5.8 renewSearchDelay-Methode

6.5.9 abortRunningSearch-Methode

6.5.10 executeSearch-Methode

6.5.11 resultReceived-Methode

6.6 Glückwunsch zum ersten echten Plug-in

6.7 Zusammenfassung

7 Neue Funktionen für jQuery

7.1 Kurzeinführung in REST

7.2 Die Funktionen $.put, $.head und $.delete

7.2.1 Die Definition von Funktionen

7.3 Zusammenfassung

8 Special Events

8.1 Aufbau eines Special Events

8.1.1 Magische Methoden

8.2 Existierende Ereignisse erweitern

8.2.1 Ein angemessener Mauszeiger für alle Elemente

8.3 Drag and Drop

8.3.1 Die Ereignisse „dragstart“, „dragmove“ und „dragend“

8.3.2 Das Kernstück: _Handler

8.4 Tastaturshortcuts mit „add“ und „remove”

8.4.1 Erweiterung des keypress-Ereignisses

8.5 Zusammenfassung

9 CSS-Selektoren entwickeln

9.1 Sizzle

9.1.1 Geschichte von Sizzle

9.1.2 Sizzles Erweiterungsmöglichkeiten

9.2 Neue Pseudoklassen für jQuery

9.2.1 Die Pseudoklasse :draggable

9.2.2 Die Pseudoklasse :ev

9.3 Zusammenfassung

10 Easing-Funktionen zur Animationskontrolle

10.1 Easing-Funktionen im Allgemeinen

10.2 jQuerys Dreingaben: linear und swing

10.2.1 Easing auf einen Blick: Grafische Darstellung

10.2.2 jQuerys Interface für Easing-Funktionen

10.3 Weitere Easing-Funktionen mit dem Easing- Plug-in

10.3.1 Grafische Übersicht über die Funktionen des Plug-ins

10.4 Zusammenfassung

11 jQuery UI

11.1 Installation und Einsatz

11.2 Bereiche des Frameworks

11.3 Widgets und Behaviours im Einsatz

11.3.1 Das Widget-API

11.3.2 Behaviours

11.4 Animationen und Effekte

11.4.1 Effekte – Das neue Pferd im Stall

11.4.2 Farbanimationen und Klassenübergänge

11.4.3 Easing – Übergänge mit Niveau

11.5 ThemeRoller

11.6 Entwicklung eigener jQuery UI Widgets

11.6.1 Widget oder Plug-in?

11.6.2 Ziel: Das myprogressbar-Widget

11.6.3 Die Widget Factory

11.6.4 Verarbeitung von Optionen

11.6.5 Magische Methoden und Eigenschaften

11.6.6 Widgets erschaffen und zerstören

11.6.7 Rückgabe eines konkreten Wertes

11.7 Behaviours entwickeln

11.7.1 Behaviour: destroyable

11.8 Komplexe Effekte zum Selbermachen

11.8.1 registrierung des eigenen Effekts

11.8.2 Effektoptionen behandeln

11.8.3 Hilfsmittel zur Effektentwicklung

11.8.4 Der grid-Effekt im Detail

11.9 Widgets fit für den ThemeRoller

11.9.1 jQuery-UI-CSS-Framework

11.9.2 Namensgebung für eigene CSS-Klassen

11.10 Zusammenfassung

12 Testen von Software

12.1 Verschiedene Stufen des Testens

12.2 Unit Tests in JavaScript

12.2.1 Testframeworks

12.3 QUnit

12.3.1 Download und Dokumentation

12.3.2 Einrichten einer Testumgebung

12.3.3 Der erste Unit Test

12.3.4 Assertions

12.3.5 Das xUnit-Pattern und QUnit

12.3.6 HTML Fixtures

12.3.7 Ereignisbehandlung testen

12.3.8 Asynchrone Aufrufe testen

12.3.9 FireUnit mit QUnit verheiraten

12.4 Mocks und Stubs

12.4.1 Simulation Stubs

12.4.2 Mock-Objekte

12.4.3 Sinon.JS – Stubs, Mocks und Spys

12.4.4 Sinon.JS und der fakeXMLHttpRequest

12.4.5 Ein Stub für die Zeit

12.5 JsTestDriver

12.5.1 Client/Server-Architektur

12.5.2 Installation und Einrichtung einer Testumgebung

12.5.3 Assertions

12.5.4 Testlebenszyklen

12.5.5 HTML-Fixtures

12.5.6 Asynchrone Tests mit JsTestDriver

12.5.7 Code-Coverage-Analyse

12.5.8 Legacy-Tests: QUnit-Tests mit JsTestDriver ausführen

12.6 Zusammenfassung

Stichwortverzeichnis

Symbole

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z