JQuery: New Wave Javascript Seite 1 jQuery: New Wave Javascript Jörn Zaefferer TIMETOACT Software & Consulting GmbHT: +49 221 97343 22 Im Mediapark 2F:

Präsentation zum Thema: "JQuery: New Wave Javascript Seite 1 jQuery: New Wave Javascript Jörn Zaefferer TIMETOACT Software & Consulting GmbHT: +49 221 97343 22 Im Mediapark 2F:"—  Präsentation transkript:

1 jQuery: New Wave Javascript Seite 1 jQuery: New Wave Javascript Jörn Zaefferer TIMETOACT Software & Consulting GmbHT: +49 221 97343 22 Im Mediapark 2F: +49 221 97343 20 50670 KölnM: jza@TIMETOACT.DE Präsentation jQuery, 26.08.2006

2 jQuery: New Wave Javascript Seite 2 Agenda Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht

3 jQuery: New Wave Javascript Seite 3 Einleitung Übersicht Praxis Übersicht Selektoren AJAX FX Plugins Praxis Fazit Fazit Aussicht Einleitung

4 jQuery: New Wave Javascript Seite 4 Ü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

5 jQuery: New Wave Javascript Seite 5 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

6 jQuery: New Wave Javascript Seite 6 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

7 jQuery: New Wave Javascript Seite 7 Selektoren II Beispiel: Im Portal sollte jede ID mit dem Portlet Namespace versehen werden In JSP: " > Compiled: 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

8 jQuery: New Wave Javascript Seite 8 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

9 jQuery: New Wave Javascript Seite 9 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

10 jQuery: New Wave Javascript Seite 10 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

11 jQuery: New Wave Javascript Seite 11 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

12 jQuery: New Wave Javascript Seite 12 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

13 jQuery: New Wave Javascript Seite 13 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