1. jQuery e i suoi plugin
Pasquale Puzio
26 Maggio 2011, Bologna

2. Agenda
Fondamenti di jQuery
jQuery
DOM & CSS
Ajax & Gestionedeglieventi
Animazioni
Plugin
RICH Internet (Web) Application
DEMO All in one
3. Fondamenti di jQuery
jQuery unalibreria/framework open-source per Javascriptconcepita per semplificarenotevolmente e cambiareradicalmenteilmodo di programmare in Javascript
4. Perch scegliere jQuery
GRATIS
Semplicit
Piena compatibilit Cross-Browser:IE 6+, FireFox 2+, Safari 3+, Opera 9+, Chrome
Documentazione
Community di supporto
Quantit enorme di plugin
Integrazione con i principali IDE tra cui Visual Studio
5. Perch scegliere jQuery
Perch meglio di questo:
function assegnaXMLHttpRequest() {
var XHR = null;
browserUtente= navigator.userAgent.toUpperCase();
If (typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object")
XHR = new XMLHttpRequest();
else if( window.ActiveXObject&& browserUtente.indexOf("MSIE 4") < 0 ) {
If (browserUtente.indexOf("MSIE 5") < 0)
XHR = new ActiveXObject("Msxml2.XMLHTTP");
else XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
return XHR;
}
6. PerchsceglierejQuery
7. PerchsceglierejQuery
8. PerchsceglierejQuery
9. Filosofia di jQuery
Per accedere agli elementi del DOM si utilizzano i selettori CSS
I selettori restituiscono unistanza di jQuery sulla quale possibile eseguire alcune azioni (manipolazione del DOM, CSS, gestione degli eventi, chiamate Ajax, ecc.)
10. Filosofia di jQuery
Funzione principale: jQuery()
Alias: $()
Selezione
Azione
11. DOM & CSS (Selettori)
$("#ID") // id
$("div") // div tag name
$('[name*="value"]') // name contains
$('[name^="value"]') // name start
$(".myCssClass") // css class name
$("form input") // descendant(s)
$("#main > div") // child(s)
$("#main ~ div") // sibling(s)
$("input[name='radio']:checked") // radio checked
$("td:first-child a") // in first td
$("input:disabled") // disabled input
a[href^="http://"]// external links
12. DOM & CSS (Manipolazione DOM)
$(div#content).html(

Contenuto

);
$(div#content).append(Link);
$(div#content).addClass(red);
$(div#content).toggleClass(yellow);
$(div#contenta).attr(href,http://www.jquery.org);
$(div#contenta).css(font-weight,bold);
$(div#content p).parent();
$(div#content p).after();
$(div#contenta).before();
13. DOM & CSS
DEMO
14. Ajax e Gestione degli eventi
$(document).ready(function() {
alert(DOM is ready!);
});
$(a#button).click(function() {
$(this).css(color,green);
});
15. Ajax e Gestione degli eventi
$(div#sidebar).load(sidebar.php);
// metodi Ajax
$.get(url, [data], callback);
$.post(url, [data], callback);
$.getJSON(url, params, callback);
$.getScript(url, callback);
16. Ajax e Gestione degli eventi
DEMO
17. Animazioni
$(p#myParagraph).show();
$(p#myParagraph).hide();
$(p#myParagraph).toggle();
$(p#myParagraph).fadeIn();
$(p#myParagraph).fadeOut();
// animazioni custom
$(p#myParagraph).animate(params);
18. Animazioni
DEMO
19. Plugin
Innumerevoli plugin per qualsiasi esigenza
Animazioni (slideshow, carousel, ecc.)
User Interface
Rich Internet (Web) Application
E facile sviluppare un plugin
E facile utilizzare un plugin


20. Plugin (Template)
Sviluppato da Microsoft
Permette a partire da strutture dati Javascript di generare codice HTML mediante luso di Template
21. Plugin (Template)
22. jQuery (Data Link)
Anchesso sviluppato da Microsoft
Permette di creare un bind tra gli elementi di un form e un oggetto Javascript
23. Plugin (Data Link)
24. DEMO ALL IN ONE
DEMO
$(#demo).show()
25. Conclusioni
Semplicit
Completezza
Flessibilit
Supporto
Potenzialit
26. Per iniziarea sviluppare
Visual Studio Express 2010 o Visual Studio 2010 Professional (MSDN Academic Alliance): http://www.microsoft.com/express/Web/
Eclipse + plugin Aptana: http://www.aptana.com/
27. DOMANDE?
Grazie per lattenzione
28. Riferimenti
jQuery (UI):
http://www.jquery.com http://www.jqueryui.com
MSDN Academic Alliance Unibo:
http://msdn60.e-academy.com/elms/Storefront/Home.aspx?campus=dsdi_si
Slide e materiale del seminario:
http://www.pasqualepuzio.it/seminari/jquery-bologna
29. Contatti
puzio@cs.unibo.it
http://www.pasqualepuzio.it
30. RISORSE