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


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


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


DOM-Navigation und -Manipulation

Elemente

• selektieren

• verändern

• verschieben

• neu einfügen

• löschen


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


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


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


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


Synchrone Serveranfragen


Asynchrone Serveranfragen


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


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


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


Standard-Widgets


JavaScript Frameworks


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


Referenzprojekte


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')


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)')


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


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;}

...}


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) {

...});

});


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


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


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);}

});


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


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');});

});


Visuelle Effekte mit jQuery

DEMO


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>


jQuery UI - Kalender

$(function() {$('#datepicker').datepicker();

});

<div class="demo"><p>Date: <input id="datepicker" type="text"></p>

</div>


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>


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>


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;

} }


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>


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);

}


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

javascript frameworks - se.uni- · pdf filejavascript frameworks - - karsten möckel...

Documents