jQuery! JavaScript Frameworks
Dr. Cora Burger
Überblick
1.
2.
3.
4.
5.
6.
7.
8.
Anwendungsbeispiele
Einstieg
jQuery
Erweiterung jQueryUI
Plugin-Beispiele
Erweiterung jQuery Easing
Zusammenfassung, Ausblick
Literatur, Links
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
2 von 30
1. Anwendungsbeispiele: Bildergalerie
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
3 von 30
Anwendungsbeispiele: Parallaxe
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
4 von 30
Anwendungsbeispiele: Menüs
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
5 von 30
2. Einstieg: Begriffsklärung
Client (Webbrowser)
Server
html (hypertext markup language)
css (cascading style sheet)
JavaScript, Framework jQuery
ServerSoftware
Datenbank
www.vhs-stuttgart.de
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
6 von 30
Bedeutung „Framework“
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
7 von 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/jQuery 1
<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
9 von 30
Beispiel: Vergleich JavaScript/jQuery 2
JavaScript
jQuery
<script>
<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";
}
}
}
$(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>
</script>
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
10 von 30
Möglichkeiten für das Editieren
• Einfacher Texteditor: Keine Unterstützung
• Entwicklungsumgebung, z. B. Eclipse mit
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
27.06.2015
Beispiele für Methoden
addClass
createElement
appendTo
insertAfter
insertBefore
slideUp/Down
fadeIn/Out
animate
jQuery! JavaScript Frameworks Dr. Cora Burger
12 von 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
unter http://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.com eine 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
20 von 30
4. jQueryUI
Beispiel: Akkordeon-Effekt
Gestaltbar über Themeroller (anpassbares css + Bilder)
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
21 von 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
Theme herunter 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 Validators für eine
geeignete Überprüfung auf Gültigkeit.
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
27 von 30
6. jQuery Easing
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
28 von 30
7. Zusammenfassung, Ausblick
Effekte für
Weitere Möglichkeiten
• Menüs
• Bilder und Galerien
Validierung für
• Formulare
• AJAX
• jQueryMobile, jQT
Empfehlung: Nicht mit Animationen überfrachten
27.06.2015
jQuery! JavaScript Frameworks Dr. Cora Burger
29 von 30
8. 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
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
30 von 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
© Copyright 2024 ExpyDoc
