JavaScript Frameworks - se.uni- · PDF fileJavaScript Frameworks - - Karsten Möckel...
-
Upload
truongdiep -
Category
Documents
-
view
222 -
download
0
Transcript of JavaScript Frameworks - se.uni- · PDF fileJavaScript Frameworks - - Karsten Möckel...
21.04.2010
JavaScript Frameworks
WWW-Seminar
Karsten Möckel
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 221.04.2010
Agenda
• Einführung / Problemstellung
• Aufgabenfelder
• JavaScript Frameworks
– jQuery und
– jQuery UI
• Vergleich Standard-Vorgehen vs. jQuery
• Weitere jQuery-Funktionen
• Zusammenfassung
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 321.04.2010
Probleme bei der Web-Entwicklung
• Unterschiedliche Unternehmen
Unterschiedliche Browser
Unterschiedliche Implementierungen
• Web-Entwickler müssen (je nach Zielgruppe) möglichst viele
Browser unterstützen
• Differenzen müssen in vielen Code-Bereichen berücksichtigt
werden
• Keine einheitliche Schnittstelle / API
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 421.04.2010
Frameworks – wofür?
• kapseln Browserunterschiede
– verbergen Differenzen
– bieten einheitliche Schnittstelle für den Entwickler
• bieten Standard-Funktionen an
– wiederkehrende Aufgaben werden zusammengefasst und in einer
Bibliothek gesammelt
– das Rad nicht neu erfinden
– Funktionen sind z.T. sehr effizient implementiert
• bringen Standard-Widgets mit
– bieten „modernes“ Aussehen
– erhöhen Bedienkomfort durch Zusatzfunktionen
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 521.04.2010
DOM-Navigation und -Manipulation
Elemente
• selektieren
• verändern
• verschieben
• neu einfügen
• löschen
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 621.04.2010
Ereignisbehandlung
Event wandert von der
Wurzel zum Zielknoten und
je nach Ereignis auch wieder
nach oben (Event-Propagation
kann auch gestoppt werden)
• Event Capturing:
Vorfahren des Zielknoten
werden zuerst erreicht
• Event Bubbling:
Event wird zuerst an
Zielknoten gemeldet
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 721.04.2010
Ereignisse und Browser
• Internet Explorer unterstützt nur Event Bubbling
• Zugriff auf das ausgelöste Ereignis nicht einheitlich
– Übergabe des Ereignis-Objekts als Funktionsparameter
– Abfrage eines globalen Objekts
• Eigenschaften eines Ereignisses unterscheiden sich je nach
Browser
– Es gibt übereinstimmende Eigenschaften
– Gleiche Eigenschaft aber unterschiedliche Namenwhich / keyCodeoffsetX, offsetY / pageX, pageY
– Eigenschaften z.T. nur in bestimmten Browsern vorhanden
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 821.04.2010
Formularvalidierung
• Benutzer sollten schnell Rückmeldungen bekommen
• Klassisch: Validierung auf Serverseite
• Validierung bereits auf Clientseite
Benutzer
füllt Formular
aus
Formulardaten
an Server
senden (HTTP)Server
validiert
Eingaben
Benutzer
füllt Formularfeld
aus
JavaScript
validiert
Eingaben
Rückmeldung über Korrektheit der Eingabedaten
Submit
Formularfeld verliert Focus
Rückmeldung über Korrektheit der Eingabe
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 921.04.2010
AJAX-Funktionen
• Standard:
– Seite wird neu
geladen
– Anwendung ist für
den Benutzer in der
Zeit nicht verfügbar
• AJAX:
– Anwendung reagiert
weiter auf Benutzer-
eingaben
– Prozesse werden im
Hintergrund
durchgeführt
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1021.04.2010
Synchrone Serveranfragen
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1121.04.2010
Asynchrone Serveranfragen
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1221.04.2010
Bereitstellung von Standardfunktionen
• Sammeln wiederkehrender Aufgaben
– Verarbeiten von Arrays
– Durchführen von verschiedensten Aufgaben für eine Auswahl an
Objekten
– Serialisierung von Objekten
– Prüfen von Objekt-Typen (Objekte, Funktionen, Arrays, …)
– Auslesen von Browser-Eigenschaften
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1321.04.2010
Verwalten der Browser-Historie
„Zurück“-Button in AJAX-Anwendungen ohne Funktion
• Elemente werden dynamisch geladen
Browser-Historie verändert sich nicht
keine Bookmarks für Anwendungsteile
Bedienkomfort der Anwendung wird reduziert
Historie muss mittels JavaScript gepflegt werden, wenn
die gewohnten „Zurück“-Funktionen erhalten bleiben
sollen
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1421.04.2010
Visuelle Effekte
Seitenelemente:
• verstecken / anzeigen
• CSS-Klassen zuweisen / entfernen
• Animation
– verschieben/gleiten (Fader)
– überblenden (Slider)
– Transparenz (Opacity)
werden z.T. auch bei den Widgets verwendet
• Erweiterung bestehender Elemente
• Neue Widgets
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1521.04.2010
Standard-Widgets
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1621.04.2010
JavaScript Frameworks
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1721.04.2010
jQuery
http://jquery.com/
• Leichtgewichtiges JavaScript Framework
– 24KB (minimiert und Gzip-komprimiert)
• Gut für Einsteiger geeignet (einfache Syntax - Chaining)
• CSS3-kompatibel (Selektoren)
• Unterstützt die relevanten Browser-Implementierungen
– Internet Explorer 6.0+
– Firefox 2+
– Safari 3.0+
– Opera 9.0+
– Google Chrome
• Erweiterbar durch Plug-in-Mechanismus
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1821.04.2010
Referenzprojekte
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 1921.04.2010
DOM-Navigation – zu Fuß
Standard-Methoden:
• Zugriff über id-Attribut
• Zugriff über name-Attribut
• Zugriff über Elementliste
document.getElementById('orderedlist')
document.getElementsByName('listName')
document.getElementsByTagName('p')
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2021.04.2010
DOM-Navigation mit jQuery
CSS3-Selektoren und Erweiterungen:
• Zugriff über id-Attribut
• Kindknoten
• Letzte Kindknoten
• Knoten mit bestimmten Elementen filtern
• Knotenattribute berücksichtigen
$('a[name]')$('a[href*=/content/gallery]')
$('#orderedlist‘)
$('#orderedlist > li')
$('#orderedlist li:last')
$('li').not(':has(ul)')
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2121.04.2010
Ereignis an Objekt binden – zu Fuß
• Event an Element binden
if (document.addEventListener) {document.addEventListener(
'mousemove', handleMove, true);} else if (document.attachEvent) {
document.attachEvent('onmousemove', handleMove);
} else {if (NS4) {
document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handleMove;
} else {document.body.onmousemove = handleMove;
}}
Standard-DOM
Internet Explorer
andere
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2221.04.2010
Ereignis auswerten – zu Fuß
• Event nach Auslösen behandeln
• Neuere Browser über geben das Event-Objekt als
Funktionsparameter
• Internet Explorer speichert das Event-Objekt in
window.event
function handleMove (ev) {if (!ev) {
ev = window.event;}
...}
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2321.04.2010
Ereignisse mit jQuery behandeln
• Ereignis an Objekt binden und Funktion für
Ereignisbehandlung angeben
• Event-Objekt wird auch beim Internet Explorer als
Funktionsparameter übergeben
$(function() {$(document).mousemove(function(ev) {
...});
});
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2421.04.2010
AJAX-Objekt anlegen – zu Fuß
var xmlHttp = null;
if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {try {
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (ex) {try {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch (ex) {...
}}
}
Internet Explorer 6
und älter
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2521.04.2010
AJAX-Anfrage senden – zu Fuß
• Anfrageergebnis verarbeiten
• Anfrage absenden
function showData() {if (xmlHttp.readyState == 4) {
var d = document.getElementById('Data');d.innerHTML += xmlHTTP.responseText;
}}
window.onload = function() {xmlHttp.open('GET', 'data.php', true);xmlHttp.onreadystatechange = showData;xmlHttp.send(null);
}
0 Nicht initialisiert
1 Lädt gerade
2 Fertig geladen
3 Wartet auf Rückgabe
4 Vollständig
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2621.04.2010
AJAX-Anfrage mit jQuery
• Anfrage absenden und Ergebnis einfügen
• Zusätzliche Anfrageoptionen angeben
$('#Data').load('data.php');
$.ajax({url: 'data.php',cache: false,success: function(html) {
$('#Data').append(html);}
});
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2721.04.2010
Standardfunktionen in jQuery
• Knotentypen testen
• Arrays/Objekte verarbeiten
$.isArray(object);$.isFunction(object);$.isEmptyObject(object);
$.each([52, 97], function(index, value) { alert(index + ': ' + value);
});
// 0: 52// 1: 97
var arr = [4, 'Pete', 8, 'John’]jQuery.inArray('John', arr)
// 3
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2821.04.2010
Visuelle Effekte mit jQuery
• Animationen:
$(document).ready(function() {$('#ani1').toggle(
function(){$('.animations').hide('slow');
},function(){$('.animations').show('slow');
});
$('#ani2').toggle(function(){
$('.custom').animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){$('.custom').animate({ height: 'show',
opacity: 'show' }, 'slow');});
});
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 2921.04.2010
Visuelle Effekte mit jQuery
DEMO
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3021.04.2010
jQuery UI - Buttons
$(function() {$('button, input:submit, a', '.demo').button();
$('a', '.demo').click(function() { return false; });});
<div class="demo"><button>A button element</button>
<input value="A submit button" type="submit">
<a href="#">An anchor</a></div>
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3121.04.2010
jQuery UI - Kalender
$(function() {$('#datepicker').datepicker();
});
<div class="demo"><p>Date: <input id="datepicker" type="text"></p>
</div>
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3221.04.2010
jQuery UI - Autocomplete
$(function() {var availableTags = ['c++', 'java', 'php', 'javascript',
'asp', 'ruby', 'python'];$('#tags').autocomplete({
source: availableTags});
});
<div class="ui-widget"><label for="tags">Tags: </label><input id="tags">
</div>
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3321.04.2010
jQuery UI - Tabs
$(function() {$('#tabs').tabs();
});
<div id="tabs"><ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li><li><a href="#tabs-2">Proin dolor</a></li><li><a href="#tabs-3">Aenean lacinia</a></li>
</ul><div id="tabs-1"> ... </div><div id="tabs-2"> ... </div><div id="tabs-3"> ... </div>
</div>
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3421.04.2010
Formularvalidierung mit jQuery
var name = $("#name"); var nameInfo = $("#nameInfo");
name.blur(validateName); name.keyup(validateName);
function validateName(){ if(name.val().length < 4) {
name.addClass("error"); nameInfo.text(
"We want names with more than 3 letters!"); nameInfo.addClass("error"); return false;
} else {
name.removeClass("error"); nameInfo.text("What's your name?"); nameInfo.removeClass("error"); return true;
} }
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3521.04.2010
Drag&Drop mit jQuery
$(function() {$("#draggable").draggable();$("#droppable").droppable({
drop: function(event, ui) {$(this).addClass('ui-state-highlight')
.find('p').html('Dropped!');}
});});
<div id="draggable" class="ui-widget-content"><p>Drag me to my target</p>
</div><div id="droppable" class="ui-widget-header">
<p>Drop here</p></div>
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3621.04.2010
Plug-ins für jQuery
• Eigene Funktionen in das Framework integrieren
• Bereits viele Plug-ins verfügbar: http://jquery.com/plugins/
jQuery.log = function(message) {if(window.console) {
console.debug(message);} else {
alert(message);}
};
try {...
} catch(ex) {$.log(ex);
}
JavaScript Frameworks - WWW-Seminar - Karsten Möckel 3721.04.2010
Zusammenfassung
• JavaScript Frameworks können Entwicklung vereinfachen
– Browser-Unterschiede müssen nicht berücksichtigt werden
– eine Schnittstelle für Cross-Browser-Entwicklung
• Benutzer sollten aber verstehen, was im Hintergrund vorgeht
• Komplexe Anwendungen sind auch mit Hilfe von Framworks
relativ aufwändig zu entwickeln
• Grundlegende Funktionen einer Anwendung sollten auch
ohne JavaScript funktionieren