jquery! JavaScript Frameworks Dr. Cora Burger
Überblick 1. Anwendungsbeispiele 2. Einstieg 3. jquery 4. Erweiterung jqueryui 5. Plugin-Beispiele 6. Erweiterung jquery Easing 7. Zusammenfassung, Ausblick 8. Literatur, Links 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 2von 30
1. Anwendungsbeispiele: Bildergalerie 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 3von 30
Anwendungsbeispiele: Parallaxe 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 4von 30
Anwendungsbeispiele: Menüs 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 5von 30
2. Einstieg: Begriffsklärung Client (Webbrowser) html(hypertext markup language) css(cascading style sheet) JavaScript, Framework jquery Server Server- Software Datenbank www.vhs-stuttgart.de 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 6von 30
Bedeutung Framework 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 7von 30
Document Object Model (DOM) Firefox: Plugin Firebug; Internet Explorer: F12 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 8 von 30
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> 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 9von 30
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="http://code.jquery.com/jq uery-1.10.2.js"></script> 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 10von 30
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 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 11 von 30
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 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 12von 30
Testen 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 13 von
Ü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. 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 14 von 30
Übungsaufgabe 2 Modifizieren Sie die Vorlage gruenaddieren.html derart, dass der erste Absatz langsam eingeblendet wird. Verwenden Sie dazu die Beschreibung unter http://api.jquery.com/fadein/ 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 15 von 30
Übungsaufgabe 3 Realisieren Sie einen Fortschrittsbalken. Verwenden Sie dazu die Beschreibung unterhttp://api.jquery.com/animate/ 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 16 von 30
Reaktion auf Ereignisse: Beispiel $(document).ready(function() { }); $( '#target' ).click(function() { alert( "Bereich mit id target wurde angeklickt." ); }); 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 17 von 30
Ü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. 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 18 von 30
Bestimmung von Größen $(document).height $(document).width $(window).height $(window).width Siehe Beispiel 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 19 von 30
Abschließendes Beispiel Dropdown-Menü: Nur mit css Ausblenden von css, animiert mit jquery 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 20von 30
4. jqueryui Beispiel: Akkordeon-Effekt Gestaltbar über Themeroller (anpassbares css + Bilder) 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 21von 30
Übungsaufgabe 5 Experimentieren Sie mit den Möglichkeiten von www.jqueryui.com, 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. 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 22 von 30
5. Beispiele für Plugins Bilder und Galerien Parallaxe Validierung von Formularen 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 23 von 30
Bilder und Diashow malsup.com/jquery/cycle plugins.jquery.com/colorbox 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 24 von 30
Übungsaufgabe 6 Bestücken Sie die vorgestellten Diashows mit Bildern, z. B. aus dem Standardverzeichnis von Microsoft Windows und testen verschiedene Einstellungen. 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 25 von 30
Formularvalidation jquery.bassistance.de/validate/demo/ 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 26 von 30
Ü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. 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 27 von 30
6. jqueryeasing Menü mit Easing-Effekt Übungsaufgabe 8 Experimentieren Sie mit den Möglichkeiten von gsgd.co.uk/sandbox/jquery/easing 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 28von 30
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 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 29von 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 2011 www.jquery.com, jqueryui.com, jqueryui.com/themeroller, gsgd.co.uk/sandbox/jquery/easing, plugins.jquery.com Linksammlung auf www.cora-burger.de 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 30von 30
Last but not least Vielen Dank für Ihre Aufmerksamkeit! Viel Spaß beim Einsatz von jquery und dem Entdecken weiterer Möglichkeiten dieses Frameworks 27.06.2015 jquery! JavaScript Frameworks Dr. Cora Burger 31 von 30