DAS UNIVERSELLE JAVASCRIPT-

Transkript

1 ralph STEYER jquery DAS UNIVERSELLE JAVASCRIPT- FRAMEWORK FÜR DAS INTERAKTIVE WEB UND MOBILE ANWENDUNGEN EXTRA: Mit kostenlosem E-Book Alle Beispielcodes zum Download

2 Steyer jquery Bleiben Sie auf dem Laufenden! Der Hanser Computerbuch-Newsletter informiert Sie regelmäßig über neue Bücher und Termine aus den verschiedenen Bereichen der IT. Profitieren Sie auch von Gewinnspielen und exklusiven Leseproben. Gleich anmelden unter

3

4 Ralph Steyer jquery Das universelle JavaScript-Framework für das interaktive Web und mobile Anwendungen

5 Der Autor: Ralph Steyer, Bodenheim Kontakt: Alle in diesem Buch enthaltenen Informationen, Verfahren und Darstellungen wurden nach bestem Wissen zusammengestellt und mit Sorgfalt getestet. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grund sind die im vorliegenden Buch enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autor und Verlag übernehmen infolgedessen keine juristische Verantwortung und werden keine daraus folgende oder sonstige Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieser Informationen oder Teilen davon entsteht. Ebenso übernehmen Autor und Verlag keine Gewähr dafür, dass beschriebene Verfahren usw. frei von Schutzrechten Dritter sind. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Waren be zeich nungen usw. in diesem Buch berechtigt deshalb auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und MarkenschutzGesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften. Bibliografische Information der Deutschen Nationalbibliothek: Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbiblio grafie; detaillierte bibliografische Daten sind im Internet über abrufbar. Dieses Werk ist urheberrechtlich geschützt. Alle Rechte, auch die der Übersetzung, des Nachdruckes und der Vervielfältigung des Buches, oder Teilen daraus, vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlages in irgendeiner Form (Fotokopie, Mikrofilm oder ein anderes Verfahren) auch nicht für Zwecke der Unterrichtsgestaltung reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden Carl Hanser Verlag München, Lektorat: Brigitte Bauer-Schiewek Copy editing: Petra Kienle, Fürstenfeldbruck Herstellung: Irene Weilhart Umschlagdesign: Marc Müller-Bremer, München Umschlagrealisation: Stephan Rönigk Gesamtherstellung: Kösel, Krugzell Ausstattung patentrechtlich geschützt. Kösel FD 351, Patent-Nr Printed in Germany Print-ISBN: E-Book-ISBN:

6 Inhalt 1 Einleitung Das Umfeld Frameworks und Toolkits Was behandeln wir in diesem Buch? Das Kern-Framework jquery Plugins, UI und Mobile Wen sehe ich als Zielgruppe für das Buch? Schreibkonventionen Listings Was benötigen Sie beziehungsweise was nutzt Ihnen? Hardware und Betriebssystem jquery, jquery Mobile, jquery UI & mehr Die Browser Verschiedene Betriebssysteme und virtuelle Maschinen zum Testen Die Entwicklungsumgebungen und nützliche Helferlein Editoren oft bereits mit gewisser Hilfestellung Integrierte Entwicklungsumgebungen Kleine Helferlein Node.js und Git Integrierte Entwicklungstools in Browser und Browser-Add-ons Der Webserver zum realistischen Testen Zusammenfassung Sprung ins kalte Wasser Zugriff auf Elemente und Schutz des DOM Veränderung der Webseite mit DHTML Animiertes Verkleinern und Vergrößern eines Elements Attribute dynamisch verändern Zusammenfassung

7 VI Inhalt 3 Grundlagenwissen Das WWW, das Web 2.0 und das Client-Server-Prinzip im Internet Programmierung im Das Web 2.0 und AJAX JavaScript und das Verhältnis zu jquery Die allgemeine Einbindung von JavaScript in Webseiten JSON DOM und Objekte DOM und der Zugriff auf Elemente einer Webseite Style Sheets und DHTML CSS die Standardsprache des Webs Die konkrete Syntax von CSS-Deklarationen Selektoren Zusammenfassung Wie jquery grundsätzlich arbeitet Grundsätzliches zum Zugriff auf Elemente der Webseite Ein Beispiel für unterschiedliche Knoten Der jquery-namensraum und das jquery-objekt Spezielle Datentypen und Strukturen in Query Methoden Optionen jqxhr Die Funktion jquery() und der Alias $() Der Kontext Verketten von Methoden und die jquery-warteschlange Funktionsaufrufe nacheinander ausführen die jquery-warteschlange jquery.sub(), jquery.then() und jquery.when() Funktionen nach Aufbau des DOM ausführen Callback oder anonyme Funktion als Parameter für jquery() Das ready-event document.ready() in eine externe JavaScript-Datei auslagern Mit jquery.holdready() das ready-event beeinflussen Ein Element mit jquery() erstellen und in die Webseite einfügen Ein trickreiches kleines Problem können Sie es lösen? Optionen zum Initialisieren von Attributen Direkter Zugriff auf DOM-Elemente mit get( ) Gemeinsame Verwendung von jquery und anderen Frameworks Die Funktion jquery.noconflict() Einen alternativen Alias verwenden Mehr zum Kontext context, selector und nodename

8 Inhalt 4.10 jquery.support und jquery.browser Browser-Identifizierung Zusammenfassung Umgang mit Selektoren und Filtern Klassische DOM-Zugriffsmethoden Objektfelder Zugriff über einen Namen Verwandtschaftsbeziehungen Elementnamen, IDs und Klassennamen DOM-Zugriffsmöglichkeiten versus jquery Was versteht man unter Selektoren? Was ist ein Selektor? Was sind Filter? CSS3, SQL und XPath als Grundlagen und Hintergrund Basisselektoren und hierarchische Selektoren Beispiele zur Verdeutlichung Potenzielle Fallen Filterausdrücke Basisfilter Inhaltsfilter Sichtbarkeitsfilter Kindfilter Attributfilter Filter für Formularelemente und Formularfilter Formularfilter zur Auswahl aufgrund des Zustands Filtermethoden Praktische Beispiele von Filtermethoden Zusammenfassung Zugriff auf die Elemente einer Webseite Inhalte von Knoten abfragen und verändern html() und text() Ein Beispiel zu html() und text() Inhalt von Formularfeldern val() Ein Beispiel für den Zugriff auf Formularfelder Zugriff auf Attribute mit attr() Einfügen von Knoten in eine Webseite append() und prepend() appendto() und prependto() Knoten nachher oder vorher einfügen after() und before() insertafter() und insertbefore() Ummanteln Einzeln mit wrap() ummanteln VII

9 VIII Inhalt Alles ummanteln mit wrapall() Innere Bereiche ummanteln mit wrapinner() Den Mantel abnehmen unwrap() Ersetzen mit replacewith() und replaceall() Ersetzen mit replacewith() Alles ersetzen mit replaceall() Überflüssige Knoten entfernen Die Methoden empty() und remove() Die Alternative zu remove() detach() Löschen von Attributen Vervielfachen mit clone() Suchen & Finden Von Kindern und Eltern Von Geschwistern Nachfolger mit has() suchen Finden mit find() und contents() Mit each() über Arrays und Objekte iterieren jquery.each() Die Methode each() Die Methode add() Die Methoden end() und andself() Zusammenfassung Layout und Formatieren mit Style Sheets unter jquery Hintergrundinformationen CSS in jquery Vermischung von Layout und Funktionalität? Die Methode css() Abfragen von Stileigenschaften Setzen von Eigenschaften Klassen von Elementen verändern Klassen hinzufügen addclass() Klassen wegnehmen removeclass() Klassen umschalten mit toggleclass() Test auf eine Klasse hasclass() Methoden zur Positionierung Bestimmen der Position mit position() Position relativ zum Dokument offset() Methoden zum Scrollen Höhe und Breite height() und width() Innere und äußere Maße jquery.csshooks Zusammenfassung

10 Inhalt 8 Ein Praxisbeispiel eine Datumskomponente Das Ziel Die Basiswebseite Die CSS-Datei Templates Die JavaScript-Datei Zusammenfassung Ereignisbehandlung unter jquery Grundlagen zu Ereignissen, Event handlern, Triggern und Datenbindung Ereignisse Allgemeines zu Eventhandlern HTML-Eventhandler JavaScript/DOM-Eventhandler Das Ereignisobjekt Blubbern und die Bubble-Phase Datenbindung Trigger Das Ereignisobjekt in jquery Der Konstruktor von jquery.event Die Eigenschaften des Ereignisobjekts jquery.event Die Methoden eines Objekts vom Typ jquery.event Ich habe fertig $(document).ready() Event-Helper Erweiterte Methoden für das Eventhandling Datenbindung Triggern Live Events Die Methode live() Die Methode delegate() Die Methoden die() und undelegate() jquery.proxy() Weiterentwicklung der Datumskomponente Veraltete Hilfsfunktionen für die Interaktion Die Funktion hover() toggle() Zusammenfassung Effekte und Animationen Grundsätzliche Anwendung Speed is all you need Die Angabe eines Callback Verkettung Warteschlangen IX

11 X Inhalt Beendigung mit stop(), finish() und jquery.fx.off Endlosanimationen Art der Animationen Easing Konkrete Effekte mit Standardmethoden Anzeigen und Wegblenden die Methoden show() und hide() Gleiteffekte slidedown(), slideup() und slidetoggle() Transparenzeffekte fadein(), fadeout() und fadeto() sowie toggle() Individuelle Animationen mit animate() Zusammenfassung AJAX und das Web AJAX und XMLHttpRequest (XHR) Grundlagen Ein XMLHttpRequest-Objekt manuell erzeugen Die Methoden eines XHR-Objekts Die Eigenschaften eines XHR-Objekts Das Datenformat bei einer AJAX-Kommunikation Exemplarischer Ablauf einer AJAX-Anfrage Spezialitäten bei der AJAX-Unter stützung in jquery JSONP und Remote Requests Das jqxhr-objekt Grundsätzliches zu Methoden in jquery für AJAX-Anfragen Vermeidung von Caching Anwendung der Standardmethoden für AJAX $.get() und $.post() JSON-Daten anfordern und verarbeiten getjson() und parsejson() 11.4 Ein Skript per AJAX nachladen jquery.getscript() Die allgemeine Variante zum Laden von Daten load() Filter angeben Serialisieren von Daten Die Methode serialize() Die Methode serializearray() Die allgemeine Version zum Serialisieren $.param() Vorgabewerte für AJAX jquery.ajaxsetup() AJAX Events und AJAX-Eventhandler Lokale Ereignisse Globale Ereignisse Die vollständige Kontrolle jquery.ajax() Erweiterte Techniken für $.ajax() Zusammenfassung jquery UI Was versteht man unter jquery UI?

12 Inhalt Komponenten zur Unterstützung der Interaktion Widgets Erweiterte Effekte Das Themen-Framework samt ThemeRoller Der Einstieg in jquery UI Wie nutzt man jquery UI grundsätzlich? Download und der ThemeRoller Die Bereitstellung und Einbindung lokaler Ressourcen Einbindung über ein CDN Verwenden der Komponenten in jquery UI Die Defaulteinstellung Einige grundsätzliche Regeln zu Komponenten und Widgets Eigenschaften/Optionen von Komponenten Methoden von Komponenten Events bei Komponenten und Widgets Ein Überblick über die Komponenten und Widgets Die Interaktionskomponenten Die Widgets Effekte Die Methode effekt() Farbanimationen mit animate() Zusammenfassung jquery Mobile Grundlagen Die Plattformen Widgets und Features Download und Bereitstellung Themes und der ThemeRoller Codiqa Das Rollensystem und data-role Der grundsätzliche Aufbau einer mobilen Seite Ein erstes vollständiges Beispiel Verknüpfen von Seiten Externe Links mit Hijax Interne Links und das spezielle Verständnis einer Seite Zurück in der Historie Die Übergänge Dialoge Schaltflächen Schaltflächen mit Icons Blockelement oder Inline-Element Gruppierung XI

13 XII Inhalt 13.8 Toolbars und Navigationsbars Listen Formularelemente Feldcontainer Die verschiedenen Formularelemente Deaktivieren von Elementen Plugin-Methoden bei Formularelementen Abschicken der Formulardaten Spezielle Ereignisse Berührungsereignisse Änderung der Orientierung Verschiebeereignisse Seitenereignisse Ein Beispiel mit Reaktionen auf Events Kollabierte und expandierte Inhalte Zusammenfassung Plugins Die Plugin-Seite von jquery Ein vorhandenes Plugin suchen und verwenden Eigene Plugins erstellen Warum eigene Plugins erstellen? Erstellen eines ersten Plugins Die wesentlichen Regeln zur Erstellung eines einfachen Plugins Regeln zur Erstellung komplexerer Plugins Ein Beispiel für ein Plugin mit Optionen Ein weiteres Beispiel für ein Plugin mit Optionen Ein Plugin veröffentlichen Zusammenfassung Anhang: Grundlagen zu JavaScript Case-Sensitivität Variablen, Literale und Datentypen Die klassischen JavaScript-Datentypen Funktionen und Methoden Funktionsaufruf versus Funktionsreferenz Benannte versus anonyme Funktion Callbacks Objekte in JavaScript Der Konstruktor Deklarative Objekterzeugung mit einem Objektliteral Zugriff auf Objektbestandteile Arrays Index