jquery! JavaScript Frameworks

Transkript

1 1. Einstieg jquery! JavaScript Frameworks jquery basiert auf der Programmiersprache JavaScript und erleichtert bei Webauftritten eine Reihe von Aufgaben wie z. B. Animationseffekte oder das Validieren von Formulardaten. Dies erfolgt durch geeignete Manipulationen von Webseiten. 2. Aufbau einer Webseite (html, css) Bei einer Webseite handelt es sich um ein in html (hypertext markup language) verfasstes Dokument. Ein Webbrowser wie z. B. Firefox, Internet Explorer oder Google Chrome fordert derartige Dokumente über http (hypertext transfer protocol) von einem Webserver an und stellt sie auf dem Bildschirm dar, wobei er entweder auf eine Standardgestaltung zurück greift oder die mittels css (cascading style sheet) definierten Gestaltungsregeln berücksichtigt. Eine solche Webseite ist zunächst rein statisch, ohne jegliches dynamisches Element. Aufgrund von Inkompatibilitäten kommt es leicht zu unterschiedlicher Anzeige ein und derselben Webseite in unterschiedlichen Webbrowsern. Der html-quellcode besteht aus html-tags in Form des öffnenden < > und schließenden </ > Tags. Für eine Webseite ergibt dies z. B. folgenden Code (linke Spalte): <!DOCTYPE html> <html lang="de"> <head> <title>webseitentitel</title> </head> <body> <div id= navigation > <ul class= menue > <li>home</li> <li> <a href= information.html >Information</a> </li> Jede dieser Zeilen beinhaltet einen html-tag, der einen Knoten mit Elementen im so genannten DOM (Document Object Model) darstellt. Ein übergeordnetes Element bezeichnet man als Eltern-Element, ein untergeordnetes als Kind-Element. Beispielsweise ist navigation Eltern-Element von menue, das sein Kind-Element ist. Bei den Elementen class, href und id handelt es sich um Beispiele für Attribute von Tags. Wie für die Gestaltung über css spielen auch für die Dynamisierung mit Hilfe von JavaScript bzw. dem darauf aufbauenden Framework jquery die folgenden beiden Elementgruppen eine wesentliche Rolle: html-tags < > </ > und Attribute von html-tags wie id, class. css-gestaltungsregeln definieren Eigenschaften wie z. B. Farbe, Schrifttyp, Rahmen und Positionierung von html-elementen. Beispielsweise sorgt die Regel ul.menue {color: white; background: black;} dafür, dass die Listenelemente in weißer Farbe auf schwarzem Hintergrund dargestellt werden. volkshochschule stuttgart 1

2 3. JavaScript Mit Hilfe der frei verfügbaren Skriptsprache JavaScript lassen sich dynamische Elemente in Form von Programmierbausteinen auf Webseiten einbauen. JavaScript läuft in der Regel im Webbrowser (Client) und ist folglich davon abhängig, ob der Benutzer Skripte zugelassen hat oder nicht. Es ist also immer darauf zu achten, dass die wesentliche Funktionalität einer Webseite wie z. B. die Navigation zu allen anderen Seiten eines Webauftritts auch ohne JavaScript möglich ist. Dies stellt einen Aspekt des barrierefreien Webdesigns dar. Einfache Beispiele für den Einsatz von JavaScript sind Popup-Fenster zur Anzeige der aktuellen Uhrzeit oder einer Fehlermeldung bei einer inkorrekten oder fehlenden Eingabe in einem Formular. Komplexere Anwendungen greifen auf das oben beschriebene DOM zu und verändern den Inhalt oder das Aussehen der Webseite durch Hinzufügen, Ändern oder Löschen von DOM-Elementen. Beispiele dafür sind Nachrichtenticker, das Ein-/Ausblenden von Untermenüs, wechselnde Bilder oder die Anzeige von Fehlermeldungen direkt beim betreffenden Formularfeld. Das html-tag zum Einbinden von JavaScript lautet <script> </script>. Ergänzen lässt sich dies um <noscript> </noscript>. Dadurch kann man im Hinblick auf barrierefreies Webdesign eine Alternative für diejenigen Besucher zu schaffen, die JavaScript nicht in ihrem Browser aktiviert haben. Ein Nachteil von JavaScript besteht darin, dass jeweils nur auf ein ganz bestimmtes html- Tag zugegriffen werden kann. Eine gleichzeitige Manipulation mehrerer gleichartiger Elemente ist damit zunächst ausgeschlossen bzw. bei der Realisierung mit großem Aufwand verbunden. 3.1 JavaScript Framework jquery Allgemein Das JavaScript Framework jquery besteht aus vorgefertigten, frei verfügbaren JavaScript- Klassen, die die DOM-Bearbeitung browserübergreifend wesentlich vereinfachen. Einsatzgebiete sind unter anderem: Gestaltung von gut bedienbaren Navigationsmenüs und Bildergalerien mit ansprechenden Effekten, Verknüpfung und Validierung von Formularelementen. Aktuell sind die Versionen und Da die 2-er Versionen die älteren Versionen 6, 7 und 8 des Internet Explorers nicht mehr unterstützen, basiert der Kurs auf Version Das Prinzip von jquery besteht zum einen darin beliebig viele DOM-Elemente auszuwählen, was als Selektion bezeichnet wird. Dabei können auch Filter zur Einschränkung der ausgewählten Menge zum Einsatz kommen. Auf die ausgewählten Elemente können dann im zweiten Schritt eine oder mehrere Funktionen wie das Hinzufügen, Ändern oder Löschen von DOM-Elementen und Effekte angewendet werden. Im Zusammenhang mit JavaScript und JQuery spricht man allerdings nicht von Funktionen sondern von Methoden. Als einführendes Beispiel dient das Hinzufügen einer selbst definierten css-klasse lightbox bei allen a-tags. Dazu sind die folgenden Zeilen erforderlich, wobei die erste dazu dient, die Klassenbibliothek von jquery in der aktuellen Version einzubinden. <script src=" <script>$('a').addclass('lightbox');</script> Ohne jquery min.js bzw. eine andere Version ist ein Arbeiten mit jquery nicht möglich. Sofern man keine Änderungen an jquery selbst vornehmen möchte, empfiehlt sich volkshochschule stuttgart 2

3 für ein schnelleres Laden der Webseiten im Browser der Einsatz der durch den Zusatz min gekennzeichneten minimierten Version. Bei jquery-erweiterungen ist zusätzlich die Einbindung der Klassenbibliothek der jeweiligen Erweiterung erforderlich (siehe unten) Selektion An Stelle des im Beispiel verwendeten 'a' sind beliebige Ausdrücke möglich, wie sie auch in der Definition von Gestaltungsregeln bei css vorkommen können. Beispielsweise umfasst '#inhalt a' alle a-tags, die in einem Bereich mit id= inhalt enthalten sind, also spezielle Kind-Elemente von '#inhalt'. Innerhalb von Kind-Elementen des gleichen Elternelements lässt sich über die Angabe des Index auswählen. Damit kann man z. B. dem ersten Listenelement (Home im obigen Beispiel) eine selbst definierte css-klasse top hinzufügen: <script>$('li:eq(1) ').addclass('top');</script> Auch eine Auswahl von einem oder allen Vorgängern, Nachfolgern, Eltern oder Kindern des bzw. der jeweils ausgewählten Elemente ist möglich durch Anwenden der Methoden prev, prevall, nextall, parent, child wie im folgenden Beispiel, in dem allen li-elementen nach dem ersten die selbst definierte css-klasse nichttop hinzugefügt wird. <script>$('li:eq(1) ').nextall().addclass('nichttop');</script> Methoden und mögliche Parameter Beispiele für weitere Methoden außer der bereits beschriebenen addclass sind createelement, appendto, insertafter, insertbefore zum Erzeugen eines neuen DOM-Elements und Einfügen an einer bestimmten Stelle im Baum. Außerdem stehen auch Methoden für verschiedene Effekte zur Verfügung wie hide und show zum Ausblenden und Anzeigen, toggle zum alternierenden Aus-/Einblenden, fadein bzw. fadeout für Änderungen der Transparenz zum Einblenden/Verblassen, slidein, slideout, slideup bzw. slidedown für Verkleinern/Vergrößern in unterschiedliche Richtungen (wird auch für den so genannten Akkordeon-Effekt eingesetzt). Darüber hinaus bietet die Methode animate die Möglichkeit von einer Ausgangs- zu einer Zielgestaltung zu kommen. Dabei sind auch unterschiedliche Geschwindigkeitsverläufe ( easing ) definierbar, z. B. zu Beginn der Animation schnell, danach langsam (siehe unten). Bei allen genannten Effekten ist die Angabe einer Dauer für den entsprechenden Vorgang möglich. Einer Methode kann entweder ein einzelner Parameter mitgegeben werden wie z. B. der Name der hinzuzufügenden Klasse (addclass('top')). Sind mehrere Parameter wie beispielsweise bei animate möglich, so werden diese im Format JSON (JavaScript Object Notation) angegeben. JSON stellt eine Alternative zu XML (siehe Ausblick) dar. { } width: 600px, height: 300px, opacity: 0.25, duration: 5000, specialeasing: { width: 'linear', height: 'easeoutbounce' } Ereignisse Der Aufruf einer bestimmten jquery-funktion wird immer mit einem bestimmten Ereignis verknüpft. Beispiele für Ereignisse sind ready ( Webseite ist geladen ) oder click, mousedown und keypress, die durch Benutzeraktionen über Maus oder Tastatur hervor gerufen werden. Die Benennung des Ereignisses befindet sich zwischen der Selektion und der aufgerufenen Methode. volkshochschule stuttgart 3

4 Das folgende Beispiel führt beim Anklicken eines Bereichs mit id= target zur Ausgabe eines Popup-Fensters. $( '#target' ).click(function() { alert( "Bereich mit id target wurde angeklickt." ); }); Fenstergröße Häufig ist es hilfreich, die Breite und Höhe des Bildschirms feststellen zu können um die Gestaltung von Webseiten daran anpassen zu können. Diese Größen lassen sich auf die folgende Art und Weise ermitteln: jquery(document).ready(function(){ alert('fenster-höhe: ' + jquery(window).height) + 'Fenster-Breite: ' + jquery(window).width)); }); Konfliktvermeidung Falls jquery gleichzeitig mit anderen JavaScript-Frameworks (z. B. prototype.js) auf einer Webseite eingesetzt wird, ist zunächst jquery.noconflict(); einzufügen. In den Funktionsaufrufen selbst ist $ durch jquery zu ersetzen, wie es bereits im Beispiel zur Bestimmung der Fenstergröße realisiert ist Weitere Informationen Die in jquery verfügbaren Methoden einschließlich aller möglichen Parameter sind auf der Seite api.jquery.com ausführlich beschrieben. Im Rahmen des Kurses werden einige davon an Beispielen genauer erläutert und stehen anschließend für eigene Experimente zur Verfügung. Dies gilt auch für die in den nächsten Abschnitten aufgeführten Erweiterungen von jquery. 3.2 jqueryui Bei jqueryui (User Interface, handelt es sich um eine Erweiterung, die einerseits die Methoden von jquery einfacher nutzbar macht und andererseits zusätzliche Elemente, die so genannten Widgets, zur Verfügung stellt. Ein Beispiel für die einfachere Nutzbarkeit von jquery-methoden ist die Möglichkeit, Bildschirmelemente an eine andere Stelle zu ziehen ( drag and drop ). Zu den Widgets gehören beispielsweise das bereits erwähnte Akkordeon, ein Fortschrittsbalken und ein Kalender zur komfortablen Auswahl eines Datums. Je nachdem, wie viele dieser Möglichkeiten genutzt werden, kann man sich eine genau darauf zugeschnittene Datei herunterladen und über <script src="jquery-ui.min.js"></script> in die eigenen Seiten einbinden. Eine nicht angepasste, vollständige Version der jquery-ui- Datei würde das Laden der Webseite(n) unnötig verlangsamen. Um derartige Elemente an die Gestaltung des eigenen Webauftritts anzupassen, gibt es den so genannten Themeroller (jqueryui.com/themeroller). Er bietet online die Möglichkeit zur Auswahl zwischen verschiedenen Stilen und Farben. Auf dieser Basis stellt er ein Paket von css-gestaltungsregeln und jquery-quellcode zusammen, das man sich herunter laden und mit Hilfe von <link href="jquery-ui.css" rel="stylesheet"> in die eigenen Seiten einbinden kann. volkshochschule stuttgart 4

5 4 jquery Plugins 4.1 Plugin jquery Easing Einen einfacheren Einsatz der bereits erwähnten Easing -Effekte, bei denen der Bewegungsverlauf von Elementen unterschiedliche Geschwindigkeiten aufweist, bietet die Erweiterung jquery Easing (gsgd.co.uk/sandbox/jquery/easing). Als Verdeutlichung des Effekts sei das Beispiel eines Balls angeführt, der an einer Wand zurück prallt und dann noch ein paar Mal auf dem Boden hüpft, bevor er liegen bleibt. Die Einbindung erfolgt über <script src="jquery.easing.1.3.js"></script>. 4.2 Beispiele für weitere jquery-plugins Aus der Vielzahl von jquery-erweiterungen wird auf die folgenden näher eingegangen: 5. Test Cycle Plugin (malsup.com/jquery/cycle) für einen automatischen Bildwechsel. Benötigt die Zeile <script src="jquery.cycle.js"></script> Lightbox für die animierte Vergrößerung eines Bildes und Blättern in Fotogalerien (plugins.jquery.com/colorbox). Wird eingebunden über <script src="../jquery.colorbox.js"></script> Parallaxes Scrolling (janpaepke.github.io/scrollmagic), das viele unterschiedliche Möglichkeiten bietet. Einfaches Validieren von Formulardaten (jqueryvalidation.org). Die Einbindung erfolgt über <script src="jquery.validation.js"></script> und z. B. <script>$("form").validate();</script> Um jquery-code zu testen, stehen geeignete Browser-Plugins zur Verfügung. Im Buch von Chaffer und Swedberg sind die jeweiligen Links zu finden: Firebug für Firefox: Internet Explorer-Entwicklertools: Safari Web Inspector: Chrome Developer Tools: Der folgende Bildschirmabzug zeigt ein Beispiel mit Firebug. Neben dem HTML-Code und den CSS-Regeln lässt sich auch der Ablauf von Skripten untersuchen. Es ist möglich Haltepunkte zu setzen und den Code schrittweise ablaufen zu lassen. Bei jedem Schritt werden die Inhalte von Variablen angezeigt, was die Fehlersuche gut unterstützt. volkshochschule stuttgart 5

6 Zusammenfassung und Ausblick jquery ermöglicht es den Erstellern von Webauftritten mit wenig Aufwand sowohl gut bedienbare Webseiten zu veröffentlichen als auch interessante Effekte einzubinden. Dabei sollte man berücksichtigen, dass die Inhalte im Vordergrund stehen und Effekte lediglich ein nettes Beiwerk darstellen. Insbesondere auf Effekte, die vom eigentlichen Inhalt ablenken, ist unbedingt zu verzichten. Der Kurs bietet einen Einstieg in jquery und fokussiert sich dabei auf die Abläufe im Webbrowser eines Desktop-PCs oder Notebooks. Nicht behandelt werden die folgenden beiden weiteren Einsatzmöglichkeiten von jquery: 1. Für die Kommunikation zwischen JavaScript bzw. jquery mit der auf dem Webserver laufenden Software ist zusätzlich eine Programmierung in der Sprache php erforderlich, was den Kurs sprengen würde. Die genannte Kommunikation wird als AJAX (Asynchronous JavaScript and XML) bezeichnet. Unter XML (extended Markup Language) versteht man eine Sprache, die ähnlich wie html Tags zur Strukturierung von Daten verwendet, aber im Gegensatz zu html das freie Definieren beliebiger Tagnamen zulässt. Die Einsatzmöglichkeiten von XML sind vielfältig. Im Zusammenhang mit AJAX dient XML dazu die zwischen Client (Webbrowser) und Webserver ausgetauschten Daten zu strukturieren. Das am besten bekannte Beispiel für den Einsatz von AJAX ist das Nachladen auf Webseiten. Dabei wird eine Seite mit umfangreichen Inhalten zunächst nur teilweise geladen und angezeigt und danach sukzessiv vervollständigt. Auf diese Weise müssen Besucher nicht vor einer leeren Seite warten, bis alle Daten vom Server geliefert sind. Weitere Beispiele sind ein Besucherzähler oder eine Fortschrittsanzeige beim Hochladen von Dateien, bei denen die benötigten Daten auf dem Server verfügbar sind. 2. Mit der zunehmenden Nutzung mobiler Geräte wie iphone, ipad, Smartphones und Tablets gewinnen jquery Mobile und jqt (früher jqtouch) mit ihrer speziellen Ausrichtung auf die Gegebenheiten dieser Geräte an Bedeutung. Literatur, Links J. Chaffer, K. Swedberg. jquery lernen und einsetzen. dpunkt-verlag 2012 F. Bongers, M. Vollendorf. jquery Das Praxisbuch. Galileo Computing 2011 R. Steyer. Das JavaScript-Framework für interaktives Design. Addison Wesley 2011 jquery Community Experten. jquery Kochbuch. O Reilly api.jquery.com, jqueryui.com, jqueryui.com/themeroller, plugins.jquery.com Linksammlung auf volkshochschule stuttgart 6