JQuery: New Wave Javascript Seite 1 jQuery: New Wave Javascript Jörn Zaefferer TIMETOACT Software &...
Transcript of JQuery: New Wave Javascript Seite 1 jQuery: New Wave Javascript Jörn Zaefferer TIMETOACT Software &...
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: [email protected]
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