1 jquery kennenlernen Den Arbeitsplatz einrichten jquery der Einstieg jquery die Übersicht... 67

Transkript

1

2 Auf einen Blick Auf einen Blick 1 jquery kennenlernen Den Arbeitsplatz einrichten jquery der Einstieg jquery die Übersicht jquery der Praxiseinsatz jquery UI Plugin-Entwicklung für jquery Responsive Webdesign Going mobile mit jquery Der eigene jquery-build QUnit Testen mit jquery A HTML und CSS B JavaScript und DOM

3 Inhalt Vorwort jquery kennenlernen Was jquery alles kann Ein Framework? Eine Community! Nicht ohne mein JavaScript Gründe für das Entstehen von Frameworks Nochmals was ist ein Framework? Aufgaben eines Frameworks Aktuelle Frameworks für JavaScript Frameworks ein Rückblick jquery viel mit wenig erreichen Den Arbeitsplatz einrichten Rechner und Betriebssystem Windows Mac OS X Linux Browser Internet Explorer Google Chrome Firefox Safari Opera Webserver IDEs und Editoren

4 3 jquery der Einstieg Vergleich: JavaScript mit und ohne jquery jquery einbinden jquery 1.x oder 2.x was denn nun? jquery online und offline nutzen jquery lokal einbinden jquery aus dem Google Online Repository einbinden Das Beste aus beiden Welten Das erste richtige Beispiel mit jquery Wir haben fertig Das Mausereignis Bindung eines Click-Events Zunächst die»aufdringliche«variante Etwas weniger aufdringlich, bitte! Ein unaufdringlicher Dreizeiler, dank jquery Give me more! Verkettung von jquery-methoden Den Elternknoten eines Elements manipulieren Zusammenfassung jquery die Übersicht Im Zentrum das jquery-objekt Drei Arten von jquery-methoden Die Funktion $() und ihre Signatur Leerer Aufruf ohne Argument DOM-Elemente, jquery-objekt oder Plain Object als Argument HTML-String als Argument Callback-Funktion als Argument CSS-Selektor als Argument CSS-Selektoren für die primäre Collection Die Basisselektoren Mehrfachklassenselektor Gruppen- und Kontextselektoren Attributselektoren Basis-Filterausdrücke für Selektoren Inhaltsfilter Filter für Formularelemente

5 4.3.8 Sichtbarkeitsfilter Child-Filter nach Position Child-Filter nach Typ und Position Accessoren Eigenschaften der Collection Methode.each(callback) Methode.get() und.get(index) Methode.index(subject) Methode.size() Eigenschaft.length Eigenschaften.selector und.context Methode.toArray() Methode.is() Traversieren ausgehend von Collections Was ist und wann benötigt man eine»traverse«? jquery-methoden zur Achsen-Traverse jquery-methoden zur erweiterten Achsen-Traverse Filtern von Collections Aufheben einer Filterung Kopieren einer Collection Events und Event-Handling Das Event-Objekt in JavaScript Das jquery-event-objekt Die jquery-methoden zu Event-Bindung Direktes Binden und Lösen von Event-Listenern Convenience-Methoden für direkte Event-Bindung Shortcut-Methoden für direkte Event-Bindungen Delegierendes Binden und Lösen von Event-Listenern Triggern und Erzeugen von Events Inhalte, Attribute, Datenspeicher Lesen, Ändern und Entfernen von Attributen und DOM-Eigenschaften Manipulation von Text- und Elementinhalt Beliebige Daten an DOM-Elementen speichern Formulare verarbeiten mit jquery Filterausdrücke für Formularelemente Filter für Zustände von Formularinputs Binden von Events an Formularelemente Serialisierung von Formulardaten Extraktion von Formularfeldwerten

6 4.9 DOM-Manipulation Methoden zum Einfügen von Knoten Entfernen von Knoten Ersetzen von Knoten Wrapping-Methoden CSS und Style-Eigenschaften Methoden für das class-attribut CSS-Eigenschaften manipulieren Abmessungen von Containern Position von Containern Scrollen und Scrollposition Animationen Animationen ohne jquery CSS3-Transitions und CSS3-Animations jquery und CSS-Animationen jquery-animationen Zeigen und Verstecken Slides Zeigen und Verstecken mit Animation Fades Zeigen und Verstecken über Opacity Utility-Methoden für Animationen Animation mehrerer CSS-Parameter Die Queue Warteschlange für Effekte Vollständiges Beispiel zu.queue() Utilities für Queue und Animationen Deferreds und Promises Erzeugen eines Deferred-Objekts Erzeugen eines Promise-Objekts Test des Zustands des Deferred-Objekts Das Deferred auflösen oder zurückweisen: Resolve, Reject, Notify Bindung von Callbacks an Deferreds und Promises Methode deferred.always() Methode deferred.done() Methode deferred.fail() Methode deferred.progress() Callback-Bindung mit neuem Promise als Rückgabewert Methode deferred.then() Methode deferred.pipe() Deferreds im Einsatz mit Animationen $.when() Zusammenfassen mehrerer Promises

7 4.13 Managen von Callback-Ketten mit $.Callbacks() Callback-Liste erstellen mit $.Callbacks() Callback-Liste erweitern callbacks.add() Callback-Liste reduzieren callbacks.remove() Callback-Liste überprüfen callbacks.has() Callbacks feuern callbacks.fire() und callbacks.firewith() Callback-Liste leeren callbacks.empty() Callback-Liste stilllegen callbacks.disable() Die Flags der Callback-Liste Callback-Liste verriegeln callbacks.lock() Ein Click-Counter mit Callback-Liste Ajax & JSON Grundlagen zu Ajax Daten und Datentypen für Ajax jquery und Ajax Low-level Ajax-Ultilities Das jqxhr-objekt als Promise Ajax-Utilities und Convenience-Requests Globale Handler-Methoden Utilities des $-Objekts praktisches Dies und Das Konfliktvermeidung mit anderen Frameworks Browser- und Feature-Detection Utilities zur Array-Verarbeitung Utility zur Stringbearbeitung Utilities für DOM-Knotenverarbeitung Utilities für Funktionsaufrufe Objektverarbeitung und Erweiterung von jquery Test-Utilities Zusammenfassung und Ausblick jquery der Praxiseinsatz Wie organisiere ich meine Scripte Die klassische Notation Verwendung von Objekt-Literalen Das Modul-Muster Sinn und Unsinn dieses Beispiels Zusammenfassung

8 5.2 Schönere Navigationen Die FlyOut-Navigation Flyout mit CSS-Transitions Flyout-Menü mit dem Plugin-Transit Die Tabs: Karteireiter Das Akkordeon Das Tree-Menu Zusammenfassung Von Tooltips und Links Tooltips Links sammeln, im Footer ausgeben Spiel mit Bildern Galerie I: Einfache Slideshow Galerie II: Imagebox Die Original Lightbox Ajax mit jquery einsetzen Laden von HTML-Elementen Laden von JSON Laden von JSONP Zusammenfassung Formulare beherrschen mit jquery Formulare validieren Formulare senden mit Ajax Datepicker Nächste Ausbaustufe: Autocomplete Flexible Tabellen mit jquery Die Zebra-Tabelle Die Tabelle sortieren Paginierung von Tabellen Grid-Plugins Zusammenfassung Von Browsern und Fenstern Cookies Die History des Browsers Scrolling Für faule Browser: Lazy-Load Zusammenfassung

9 6 jquery UI Download und Konfiguration von jquery UI Der Download Builder von jquery UI Theming von jquery UI Scoped Themes Einsatz von jquery UI Dateistruktur von jquery UI Einbinden von jquery UI CSS-Klassen eines UI-Widgets Layout-Widgets aus jquery UI Dialog-Widget Progressbar Akkordeon-Widget Tab-Widget Formular-Widgets aus jquery UI Datepicker Slider Button Autocomplete Effekte und Interaktionen aus jquery UI Die Effekte aus jquery UI Interaktionen aus jquery UI Drag & Drop mit Draggables und Droppables Sortierbare Elemente Sortables Größenveränderbare Elemente Resizables Auswählbare Elemente Selectables Zusammenfassung und Ausblick Plugin-Entwicklung für jquery Das Plugin-Repository von jquery Suche im Repository Ein Plugin downloaden Ein Plugin anwenden

10 7.2 Selbst ist der Mann eigene Plugins schreiben Plugin-Gattungen: Functions und Methods jquery-function-plugin Function-Plugin der Aufbau Beispiel für ein Function-Plugin ein einfacher Logger Beispiel für ein Function-Plugin Ein CSS-Tool jquery-method-plugin Method-Plugin der Aufbau Method-Plugin Setzen von CSS-Styles Method-Plugin mit Argument Method-Plugin mit mehreren Argumenten Method-Plugin mit Konfigurationsobjekt toggleclick Ein Ersatz für die Event-Methode.toggle() multitoggle Noch ein Ersatz für die Event-Methode.toggle() Method-Plugin mit Subroutinen Das jquery-method-plugin rekapituliert Zusammenfassung und Ausblick Responsive Webdesign Wann macht ein Responsive Layout Sinn? Methodik: Mobile first vs. Desktop first Media-Queries Media-Angabe für verlinkte Stylesheets Media-Angabe für Stylesheet-Import Media-Angabe innerhalb eines Stylesheets Syntax der CSS-Media-Angabe Typangabe des User Agents Query-Aspekt der Media-Query Keywords für Media-Queries Media-Features des User Agents Media-Features: width, height Media-Features: device-width, device-height Media-Feature: orientation Media-Features: aspect-ratio, device-aspect-ratio Media-Feature: color

11 8.5.6 Media-Feature: color-index Media-Feature: monochrome Media-Feature: resolution Einsatz der Media-Query im Responsive Layout Anpassung des Layouts anhand der Viewport-Breite Responsive Design und jquery Reihenfolge von Containern ändern Bilder in verschiedenen Auflösungen Slider mit Touch Maurerhandwerk mit JavaScript und jquery Zusammenfassung und Ausblick Going mobile mit jquery Ein Seitenblick auf die mobile Welt Emulatoren und IDEs für Mobilgeräte Emulatoren und IDEs für iphone Dreamweaver CC für jquery Mobile Ins mobile Web mit jquery Mobile Download oder Einbinden von der Website Der jquery Mobile Download Builder Ein erstes Dokument mit jquery Mobile jquery Mobile-Dateien im Header einbinden Grundstrukturen im Body Mehrere Seiten in einem Dokument Eine einfache Navigation Navigationen in der Toolbar Seitenübergänge Listenbuttons Listviews mit Count-Bubbles Listenbuttons in Splitviews Listview mit Splitansicht verbesserte Version Seiten per Ajax ansprechen Navbar-Button-Leisten Navbar im Header Navbar im Content-Bereich

12 9.7.3 Navbar im Footer-Bereich Button-Leisten und Data-Grid Button-Leisten mit Icons Layoutraster Inhalte anordnen Collapsibles Platzsparende Inhalte Collapsibles Collapsible-Sets Formulare mit jquery Mobile Progressiv erweiterte Formularelemente Native Formularelemente Formularelemente im Einzelnen Formulare versenden Plugin-Methoden Zurücksetzen (Degradieren) von Formularelementen Themes und Swatches Farben und Hintergründe Eigene Themes»Roll your own«mit dem ThemeRoller Das mobileinit-event Enhancement des jquery Mobile-Dokuments Die Optionen des $.mobile-konfigurationsobjekts HTML5-data-Attribute in jquery Mobile Events in jquery Mobile Methoden von jquery Mobile Zusammenfassung Der eigene jquery-build Voraussetzungen zum Erstellen eines Builds Installation von Git Installation von NodeJS Installation von Grunt und Bower Das Git-Repository klonen Einen Build des vollständigen jquerys erzeugen Einen individuellen jquery-build aufbauen

13 11 QUnit Testen mit jquery Ideen zum Testen von JavaScript Das alert-statement Die Konsole als Ausgabemedium Eine Funktion durchleuchten Testen mit Unit-Tests Enter QUnit Ein Blick auf QUnit Download und Einbinden von QUnit Ein Test mit QUnit die Methode test() Assertions ok() equal() und notequal() deepequal() und notdeepequal() strictequal() und notstrictequal() Module mehrere Tests unter einer Haube Testen asynchroner Anwendungen Das Kontextproblem bei asynchronen Tests Explizites Stoppen und Starten des Tests Testlauf in Wartestellung asynctest() Zusammenfassung und Ausblick Anhang 847 A HTML und CSS A.1 Trennungen Struktur, Präsentation, Verhalten A.2 HTML Beschreibung der Struktur A.3 Aufbau von HTML-Dokumenten A.4 CSS Beschreibung der Präsentation B JavaScript und DOM B.1 JavaScript Beschreibung des Verhaltens B.2 Die Synthese das Document Object Model Index

14 Kapitel 1 jquery kennenlernen 1 Was ist ein Framework? Was ist eine Bibliothek? Was kann jquery? Von Elementen, die manipuliert werden wollen, Events, die in allen Browsern gleich gut funktionieren und DOM-Knoten, die animiert werden sollen. Wir beginnen dieses Buch mit einem Blick auf jquery im Speziellen und JavaScript- Frameworks im Allgemeinen. Wir bieten einen kleinen Rückblick auf die Entstehung von jquery und vermitteln Ihnen einen Eindruck davon, wie einfach es zu handhaben ist. 1.1 Was jquery alles kann Der Begriff Framework ist im Vorwort bereits gefallen. Aber was ist eigentlich ein Framework? Ein Framework ist kein fertiges Programm. Es stellt lediglich Erweiterungen einer Programmiersprache bereit, die einem Anwendungsentwickler bestimmte, immer wiederkehrende Aufgaben abnehmen. Ein Beispiel aus der wirklichen Welt: Sie können als Möbelmonteur natürlich fast jeden Schrank der Welt mit nur einem einzigen Schraubenzieher montieren. Es dauert, aber es funktioniert. Haben Sie aber einen Akkuschrauber, übernimmt dieser für Sie die immer wiederkehrenden, lästigen Drehbewegungen. Und mit den Aufsätzen, die mit dem Schrauber geliefert wurden, können Sie sogar neue, noch völlig ungeahnte Aufgaben bewältigen. Genauso verhält es sich mit einem Framework. Es ist ein»toolset«, das Ihre Arbeit erleichtert. Dabei ist ein Framework aber mehr als nur ein loses Set an Werkzeugen: Es ist eine Gesamtheit von kooperierenden Methoden mit einer zusammenhängenden Struktur. Wenn Sie Frameworks verwenden, müssen Sie sich mit dem Inneren dieser Logik nicht mehr auseinandersetzen, sondern nur damit, wie Sie die einzelnen Methoden verwenden und mit welchen Werten sie gefüttert werden wollen. So funktioniert auch jquery. 21

15 1 jquery kennenlernen Abbildung 1.1 jquery ist unser Universalwerkzeug zur Webprogrammierung. Elemente finden jquery stellt Werkzeuge zur Navigation durch den (X)HTML-Dokumentenbaum zur Verfügung. Einzelne Elemente oder Gruppen von Elementen zu adressieren, wird so einfach wie das Schreiben von CSS-Selektoren genauer gesagt: jquery verwendet hierfür tatsächlich CSS-Selektoren. Elemente manipulieren Sie können mit jquery sämtliche Bestandteile einer Seite manipulieren, darüber hinaus aber auch neue Elementknoten, neue Attribute, neue CSS-Klassen und -Stile hinzufügen, Sie könnten, wenn Sie das wollten, ein Webdokument vollkommen umkrempeln. Inhalte einfügen Mit wenigen Codezeilen lassen sich Daten via Ajax in ein bestehendes Dokument einfügen, ohne es dafür neu laden zu müssen. Jede beliebige HTML-Seite lässt sich hierbei als Datenquelle verwenden es sei denn, Sie ziehen es vor, stattdessen Daten im XML-Format oder in Form von JSON-Objekten einzusetzen. Bestandteile einer Seite animieren Auch zur Erzeugung komplexer Animationen genügt in jquery ein einfacher Aufruf Sie können Seitenelemente zeigen oder verstecken, ein- oder ausblenden, aufklappen oder schließen, hervorheben oder diese sich über die Oberfläche bewegen lassen. Interaktive Dynamik? Kein Thema! Event-Handling Ein weiteres wichtiges Thema in jquery ist das Event-Handling. Beispiel Mausereignisse: Ohne im HTML-Quelltext Attribute wie onmouseover bemühen zu müs- 22

16 1.2 Ein Framework? Eine Community! sen, können Sie Events an ein dediziertes Element binden und auch wieder von ihm lösen. Unobtrusive? Aber sicher!... und noch mehr Genügt Ihnen das alles noch nicht, können Sie schließlich auch eigene Erweiterungen schreiben und an jquery»andocken«. Aber auch die Erweiterungen anderer Nutzer stehen Ihnen entsprechend zur Verfügung die sehr aktive Community von jquery bietet hier eine breite Vielfalt an. Gutes, altes JavaScript nur besser Letztlich können Sie noch immer alle Möglichkeiten nutzen, die bewährtes, herkömmliches, clientseitiges Scripting auch bietet. Die Bibliothek nimmt Ihnen aber viele mühselige Programmieraufgaben ab. Manchmal zeigt Ihnen jquery dabei ungeahnte Wege, die selbst ältere Browser Kunststücke vollbringen lassen, die eigentlich unmöglich schienen. Benutzeroberfläche Mit einem eigenen Aufsatz, dem jquery UI Framework, können Sie komplexe Benutzerschnittstellen benutzen. Von Drag & Drop-Interaktionen bis hin zu Datepickern und Navigationen reichen die Bausteine, und es werden noch viele Widgets hinzukommen Ein Framework? Eine Community! Es ist der einfache Zugriff nicht nur auf alle Elemente eines Dokuments, sondern auf viele Scriptfunktionen des Browsers, die Frameworks wie jquery so faszinierend machen. Zum gegenwärtigen Zeitpunkt ist jquery das beliebteste und am häufigsten angewendete JavaScript-Framework und hat die Konkurrenz wie Dojo, Ext JS, Prototype und script.aculo.us weit hinter sich gelassen. Seine Bedeutung kann auch daran gemessen werden, dass es im Rahmen der Websites vieler namhafter Firmen zum Einsatz kommt zu nennen wären hier beispielsweise Google, Dell, Intel, Amazon, Oracle oder die Mozilla Foundation. Wenn hier die Rede davon ist, dass sich jquery wie eine»schicht«zwischen ein Java- Script-Programm und die Script-Engine des Browsers setzt, hört sich das komplizierter an, als es ist: Es wird einfach eine Scriptdatei in eine HTML-Seite eingebunden, bevor die Scripte des Webentwicklers an die Reihe kommen. Und in diesen Scripten greift der Webentwickler auf die kurzen und knappen jquery-befehle zurück, die ein wahres Feuerwerk veranstalten. Die Beliebtheit von jquery rührt auch daher, dass seine Programmierschnittstelle so klar und zielgerichtet gehalten ist, dass sie einfach zu verstehen ist. Der Clou ist, dass jquery auf diesem Weg erweiterbar ist, also mit den Anforderungen»mitwächst«. Um jquery hat sich dadurch eine große Community entwickelt, die eine enorme 23

17 1 jquery kennenlernen Kreativität an den Tag legt. Fast täglich werden neue innovative jquery-erweiterungen veröffentlicht, jquery wird immer öfter standardmäßig in Webapplikationen integriert, und kaum jemand spricht mehr davon, dass JavaScript»Teufelszeug«sei. Verschämt wurde auch der Begriff DHTML fallen gelassen; heute spricht man von DOM-Scripting, und selbst komplexe Scripte sind aus dem Weballtag nicht mehr wegzudenken. 1.3 Nicht ohne mein JavaScript Nachdem es jetzt klar ist, was ein Framework grundsätzlich ist, mag es interessant sein, detailliertere Gründe für die Entstehung zu erfahren, also woher die JavaScript- Frameworks kommen und warum sie existieren. JavaScript stellt bekanntermaßen neben (X)HTML und CSS die»dritte Säule«für die Erstellung aktueller Websites dar und sorgt (im Rahmen der Applikationsschicht) für Dynamik und Interaktivität eines Webdokuments. Die Notwendigkeit, eben diese Dynamik und Interaktionsmöglichkeit zu bieten, ist in den vergangenen Jahren immer länger in den Vordergrund getreten. Entsprechende Features gelten nicht mehr als exotisch (oder überflüssig), sondern sind Teil der Erwartungshaltung des Nutzers geworden: Kaum eine Website kommt mehr ohne dynamisch gesteuerte Menüs, Slideshows, interaktive Oberflächen oder das Nachladen von Inhalten via Ajax aus. Ein Webprogrammierer ist also heutzutage mit vielerlei Standardanforderungen und -problemen konfrontiert. Er wird daher nicht jedes Mal das»rad neu erfinden«wollen, sondern sich eine Bibliothek aus bewährten Standardlösungen zusammenstellen, aus der er bei Bedarf entsprechende Bausteine entnimmt. In der Frühzeit von DHTML ergab sich auf diesem Weg eine Vielzahl von Insellösungen, was gut funktionierte, solange kombinierte Lösungen aus der gleichen Quelle kamen. Da meist nur ein Programmierer an einer Website arbeitete und man selten externe Programme einband, waren alle zufrieden. Allerdings hat sich die Situation auch in dieser Beziehung geändert in der heutigen Zeit bezieht eine Website ihre JavaScript-Daten aus verschiedenen Quellen: Eine Vielzahl von Programmierern ist zu verschiedenen Zeiten beteiligt und stellt Lösungen für Teilprobleme zur Verfügung. Einerseits treten hierbei Redundanzen auf, andererseits steigt das Potential für Inkompatibilitäten. Wie stellt man sicher, dass sich zwischen zwei Teilprogrammen nicht Konflikte ergeben und sei es aus so trivialen Gründen wie gleich benannten Variablen? Alle beteiligten Scripte entsprechend zu koordinieren, ist fast unmöglich, zumindest aber aufwendig und nicht sonderlich effektiv. 24

18 1.3 Nicht ohne mein JavaScript Gründe für das Entstehen von Frameworks Die Redundanzen zwischen Teilprogrammen ergeben sich aus den Grundproblemen, denen sich Programmierer im Webbereich ausgesetzt sehen. Erstens ist das Handwerkszeug, das JavaScript standardmäßig zur Bewältigung von Aufgaben im Rahmen des Document Object Model (DOM) bietet und fast alle aktuellen Aufgabenstellungen sind mit dem DOM verknüpft, zumindest unzureichend. Man möchte dieses Handwerkszeug verbessern (was möglich ist), geht hierbei aber verschiedene Wege. 1 Zweitens bestehen (auch jetzt noch) Unterschiede zwischen den Zielbrowsern. Diese werden größer, je älter die ins Visier genommenen Plattformen sind. Muss man (was niemandem zu wünschen ist) beispielsweise die Funktionstüchtigkeit einer Website auf älteren Browsern wie Internet Explorer 5 oder 6 gewährleisten, ist eine Reihe von Workarounds erforderlich. Da auch hier wieder verschiedene Wege gegangen werden und die Komplexität sich multipliziert, sobald weitere Browser berücksichtigt werden müssen, führt dies zu einem enormen Testaufwand. Schon früh kam daher der Wunsch auf, beide Bereiche vom Programmieralltag abzukoppeln und hierfür Standardlösungen in Form von Bibliotheken anzubieten. Ein Ansatz war die DynApi von Dan Steinman. Auch andere Experten wie Douglas Crockford, Sam Stephenson oder Dean Edwards machten sich Gedanken, wie man zu Java- Script zusätzliche Funktionalitäten hinzufügen könnte oder (u. a.) die unvereinbaren Event-Modelle der Browser von außen vereinheitlichen könnte. Weitere Bibliotheken wie Base Library 1 (Edwards) oder Prototype 2 (Stephenson) entstanden, die die Grundlage dafür bildeten, was heutzutage als JavaScript-Framework bezeichnet wird. Diese und andere Bibliotheken hatten den Anspruch, Zugriffe auf HTML-Elemente zu vereinfachen oder dynamisch so genannte Layer zu erzeugen, die animiert werden sollten. Der Webentwickler sollte Werkzeuge benutzen können, um mittels einfacher JavaScript-Aufrufe dynamische, effektvolle Anwendungen zu schreiben. Damit sollten sich für die damals verbreiteten Browser wie den Netscape Navigator und den Internet Explorer einfach zu implementierende Navigationen oder dynamische Bildergalerien realisieren lassen Nochmals was ist ein Framework? Übersetzen ließe sich der Begriff»Framework«mit»Rahmenwerk«oder schlicht»rahmen«. Man kann es sich als ein speziell errichtetes Gerüst vorstellen, um damit ein Programm zu erstellen, und es dient (wie bereits gesagt) als zusätzliche Vermittlungsschicht zwischen jenem Programm und der Außenwelt. Das Framework 1 Siehe: oder auch 2 Siehe: 25