Seite 1

jQuery: New Wave Javascript

jQuery: New Wave Javascript

Jörn ZaeffererTIMETOACT Software & Consulting GmbH T: +49 221 97343 22Im Mediapark 2 F: +49 221 97343 2050670 Köln M: jza@TIMETOACT.DE

Präsentation jQuery, 26.08.2006

Seite 2

jQuery: New Wave Javascript

Agenda• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 3

jQuery: New Wave Javascript

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Einleitung

Seite 4

jQuery: New Wave Javascript

Übersicht• jQuery ist

• Klein• Elegant• Schnell• Kompatibel• Objektorientiert

• jQuery ist keine Büchse der Pandora• Funktionalität durch Plugins• Dank Modularität in jeder Hinsicht leicht

erweiterbar

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 5

jQuery: New Wave Javascript

Praxis Übersicht• Was hat jQuery zu bieten?

• Selektion und Manipulation des DOM• AJAX und Effekte• Schon jetzt große Auswahl an Plugins

• Interface (Drag&Drop, Sortables)• Tablesorter• Colorchooser• uvm.

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 6

jQuery: New Wave Javascript

Selektoren I• Kein onclick, onchange etc. mehr• Elemente selektieren, Handler zu Events

zuweisen• Beispiel: Felder bei onchange validieren$("input.required, select.required,

textarea.required").change(function() { var feld = $(this); if( !feld.val() ) { alert(feld.name() + " required."); feld.addClass('error'); } else { feld.removeClass('error'); }});

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 7

jQuery: New Wave Javascript

Selektoren II• Beispiel: Im Portal sollte jede ID mit dem

Portlet Namespace versehen werden• In JSP:<div id="supplier_<portlet:namespace />" >

• Compiled: <div id="supplier_PC_0_7_5" >

• Mit jQuery selektieren:$("div[@id*='supplier_']").each(function(i) {

alert((i+1) + ". Portlet: " + this);});

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 8

jQuery: New Wave Javascript

AJAX• Rate Me Demo• Auschnitt:$.post("rate.php", {rating: $(this).html()},

function(xml) { // format result var result = [ "Thanks for rating, current average: ", $("average", xml).text(), ", number of votes: ", $("count", xml).text() ]; // output result $

("#rating").html(result.join('')); } );

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 9

jQuery: New Wave Javascript

FX• Collapsed FAQ mit slideDown/Up

$(document).ready(function() { $('#faq').find('dd').hide(); $('#faq').find('dt').click(function() { var answer = $(this).find('+dd'); if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); }

});

});

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX • FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 10

jQuery: New Wave Javascript

Plugins• Tablesorter Demo

$(document).ready(function() { $("#large").tableSorter({ stripingRowClass: ['odd','even'], stripRowsOnStartUp: true });});

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 11

jQuery: New Wave Javascript

Praxis Fazit• jQuery macht die Arbeit mit Javascript

wesentlich angenehmer, Entwickler kann sich mehr auf das eigentlich Ziel konzentrieren

• jQuery bringt sehr ausgereiftes Fundament an Funktionen (AJAX, FX, etc.) mit

• jQuery lässt sich durch Plugins beliebig erweitern, wenig oder keine Abhängigkeiten zwischen Plugins

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 12

jQuery: New Wave Javascript

Fazit• Kein komplexes Anwendungsframework,

sondern Wrapper für DOM Selektion und Manipulation

• Kapselt viele bekannte und weniger bekannte Browserbugs

• Entwickler konzentriert sich auf seinen Code, weniger Probleme mit Browsern

• Klare Struktur des eigenen Codes durch Pluginarchitektur

• Große aktive Community werkelt an genialen Plugins

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht

Seite 13

jQuery: New Wave Javascript

Aussicht• 1.0 Release in wenigen Tagen

• Alle kritischen Bugs gefixt• Release der neuen Webseite

• Vollständige API Docs• WIKI basiert• Aktuelle Pluginliste

• Post-1.0 Planungen• Plugin-Repository• Build-System per make/ant zum

Einbinden in vorhandene Builds

• Einleitung• Übersicht• Praxis Übersicht• Selektoren• AJAX• FX• Plugins• Praxis Fazit• Fazit• Aussicht