jquery! JavaScript Frameworks Dr. Cora Burger

Größe: px

Ab Seite anzeigen:

Download "jquery! JavaScript Frameworks Dr. Cora Burger"

Jutta Albrecht
vor 10 Jahren
Abrufe

1 jquery! JavaScript Frameworks Dr. Cora Burger

2 Überblick 1. Anwendungsbeispiele 2. Einstieg 3. jquery 4. Erweiterung jqueryui 5. Plugin-Beispiele 6. Erweiterung jquery Easing 7. Zusammenfassung, Ausblick 8. Literatur, Links jquery! JavaScript Frameworks Dr. Cora Burger 2von 30

Erweiterung jquery Easing 7. Zusammenfassung, Ausblick 8.

3 1. Anwendungsbeispiele: Bildergalerie jquery! JavaScript Frameworks Dr. Cora Burger 3von 30

4 Anwendungsbeispiele: Parallaxe jquery! JavaScript Frameworks Dr. Cora Burger 4von 30

5 Anwendungsbeispiele: Menüs jquery! JavaScript Frameworks Dr. Cora Burger 5von 30

6 2. Einstieg: Begriffsklärung Client (Webbrowser) html(hypertext markup language) css(cascading style sheet) JavaScript, Framework jquery Server Server- Software Datenbank jquery! JavaScript Frameworks Dr. Cora Burger 6von 30

Framework jquery Server Server- Software Datenbank www.

7 Bedeutung Framework jquery! JavaScript Frameworks Dr. Cora Burger 7von 30

8 Document Object Model (DOM) Firefox: Plugin Firebug; Internet Explorer: F jquery! JavaScript Frameworks Dr. Cora Burger 8 von 30

9 Beispiel: Vergleich JavaScript/jQuery1 <html> <head> <title>beispiel</title> <style type="text/css">.green {color:#009933;}</style> </head> <body> <div id="box"> <p>erster Absatz</p> <p>zweiter Absatz</p> <p>dritter Absatz</p> </div> </body> </html> jquery! JavaScript Frameworks Dr. Cora Burger 9von 30

green {color:#009933;}</style> </head> <body> <div id="box"> <p>erster

10 Beispiel: Vergleich JavaScript/jQuery2 JavaScript <script> window.onload = function() { var elements = document.getelementbyid("box").getelementsbytagname("p"); for (var i = 0; i < elements.length; i++) { if (elements[i].firstchild.data == "Zweiter Absatz") { elements[i].classname = "green"; } } } </script> jquery <script> $(document).ready(function() { $("#box p:contains('zweiter Absatz')").addClass("green"); }); </script> Voraussetzung: <script src=" uery js"></script> jquery! JavaScript Frameworks Dr. Cora Burger 10von 30

classname = "green"; } } } </script> jquery <script> $(document).ready(function() { $("#box p:contains('zweiter Absatz')").

11 Möglichkeiten für das Editieren Einfacher Texteditor: Keine Unterstützung Entwicklungsumgebung, z. B. Eclipsemit Plugin JSDT jquery: Automatisches Generieren des html-grundgerüsts Auto-Vervollständigung Vorschau jquery! JavaScript Frameworks Dr. Cora Burger 11 von 30

Eclipsemit Plugin JSDT jquery: Automatisches Generieren des

12 3. jquery-prinzip Beispiele für Selektionen $("#box p:contains('zweiter Absatz')") $('a') $('li:eq(1)') $('li:even') $('li:odd') Beispiele für Filter prev, prevall, nextall, parent, child Beispiele für Methoden addclass createelement appendto insertafter insertbefore slideup/down fadein/out animate jquery! JavaScript Frameworks Dr. Cora Burger 12von 30

child Beispiele für Methoden addclass createelement appendto insertafter insertbefore

13 Testen jquery! JavaScript Frameworks Dr. Cora Burger 13 von

14 Übungsaufgabe 1 Erweitern Sie die Vorlage tabellengestaltung.html derart, dass gerade Tabellenzeilen mit gelbem Hintergrund und blauer Schrift und ungerade dazu invers, d.h. mit blauem Hintergrund und gelber Schrift angezeigt werden jquery! JavaScript Frameworks Dr. Cora Burger 14 von 30

Schrift und ungerade dazu invers, d.h. mit blauem Hintergrund und gelber Schrift angezeigt werden.

15 Übungsaufgabe 2 Modifizieren Sie die Vorlage gruenaddieren.html derart, dass der erste Absatz langsam eingeblendet wird. Verwenden Sie dazu die Beschreibung unter jquery! JavaScript Frameworks Dr. Cora Burger 15 von 30

16 Übungsaufgabe 3 Realisieren Sie einen Fortschrittsbalken. Verwenden Sie dazu die Beschreibung unterhttp://api.jquery.com/animate/ jquery! JavaScript Frameworks Dr. Cora Burger 16 von 30

17 Reaktion auf Ereignisse: Beispiel $(document).ready(function() { }); $( '#target' ).click(function() { alert( "Bereich mit id target wurde angeklickt." ); }); jquery! JavaScript Frameworks Dr. Cora Burger 17 von 30

18 Übungsaufgabe 4 Verwenden Sie die Bilder kerze.png und kerze-licht.png um das Anzünden einer Kerze über das Anklicken eines Textes zu simulieren. Suchen Sie sich dazu auf api.jquery.comeine geeignete jquery-methode heraus, mit der Sie das Bild und den Text ersetzen können jquery! JavaScript Frameworks Dr. Cora Burger 18 von 30

19 Bestimmung von Größen $(document).height $(document).width $(window).height $(window).width Siehe Beispiel jquery! JavaScript Frameworks Dr. Cora Burger 19 von 30

height $(window).width Siehe Beispiel 27.06.

20 Abschließendes Beispiel Dropdown-Menü: Nur mit css Ausblenden von css, animiert mit jquery jquery! JavaScript Frameworks Dr. Cora Burger 20von 30

21 4. jqueryui Beispiel: Akkordeon-Effekt Gestaltbar über Themeroller (anpassbares css + Bilder) jquery! JavaScript Frameworks Dr. Cora Burger 21von 30

22 Übungsaufgabe 5 Experimentieren Sie mit den Möglichkeiten von indem Sie sich mindestens drei davon aussuchen, ausprobieren und den Quellcode anschauen. Erkunden Sie den Umfang der Gestaltungsmöglichkeiten von jqueryui.com/themeroller. Laden Sie dazu ein Themeherunter und binden es sowohl ins Akkordeon als auch in Ihre drei Dateien aus dem Aufgabenteil oben ein jquery! JavaScript Frameworks Dr. Cora Burger 22 von 30

23 5. Beispiele für Plugins Bilder und Galerien Parallaxe Validierung von Formularen jquery! JavaScript Frameworks Dr. Cora Burger 23 von 30

24 Bilder und Diashow malsup.com/jquery/cycle plugins.jquery.com/colorbox jquery! JavaScript Frameworks Dr. Cora Burger 24 von 30

25 Übungsaufgabe 6 Bestücken Sie die vorgestellten Diashows mit Bildern, z. B. aus dem Standardverzeichnis von Microsoft Windows und testen verschiedene Einstellungen jquery! JavaScript Frameworks Dr. Cora Burger 25 von 30

26 Formularvalidation jquery.bassistance.de/validate/demo/ jquery! JavaScript Frameworks Dr. Cora Burger 26 von 30

27 Übungsaufgabe 7 Erstellen Sie ein Formular mit den folgenden Feldern: Anrede Vor- und Nachname Postleitzahl und Ort Sorgen Sie mit Hilfe des Validatorsfür eine geeignete Überprüfung auf Gültigkeit jquery! JavaScript Frameworks Dr. Cora Burger 27 von 30

28 6. jqueryeasing Menü mit Easing-Effekt Übungsaufgabe 8 Experimentieren Sie mit den Möglichkeiten von gsgd.co.uk/sandbox/jquery/easing jquery! JavaScript Frameworks Dr. Cora Burger 28von 30

29 7. Zusammenfassung, Ausblick Effekte für Menüs Bilder und Galerien Validierung für Formulare Weitere Möglichkeiten AJAX jquerymobile, jqt Empfehlung: Nicht mit Animationen überfrachten jquery! JavaScript Frameworks Dr. Cora Burger 29von 30

30 8. Literatur, Links J. Chaffer, K. Swedberg. jquerylernen 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 jqueryui.com, jqueryui.com/themeroller, gsgd.co.uk/sandbox/jquery/easing, plugins.jquery.com Linksammlung auf jquery! JavaScript Frameworks Dr. Cora Burger 30von 30

31 Last but not least Vielen Dank für Ihre Aufmerksamkeit! Viel Spaß beim Einsatz von jquery und dem Entdecken weiterer Möglichkeiten dieses Frameworks jquery! JavaScript Frameworks Dr. Cora Burger 31 von 30

Ähnliche Dokumente

jquery! JavaScript Frameworks

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