Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery e i suoi plugin<br />Pasquale Puzio<br />26 Maggio 2011, Bologna<br />
Agenda<br />Fondamenti di jQuery<br />jQuery<br />DOM & CSS<br />Ajax & Gestionedeglieventi<br />Animazioni<br />Plugin<br...
Fondamenti di jQuery<br />jQuery è unalibreria/framework open-source per Javascriptconcepita per semplificarenotevolmente ...
Perché scegliere jQuery<br />GRATIS<br />Semplicità<br />Piena compatibilità Cross-Browser:IE 6+, FireFox 2+, Safari 3+, O...
Perché scegliere jQuery<br />Perché è meglio di questo:<br />function assegnaXMLHttpRequest() {<br />var XHR = null;<br />...
PerchèsceglierejQuery<br />
PerchèsceglierejQuery<br />
PerchèsceglierejQuery<br />
Filosofia di jQuery<br />Per accedere agli elementi del DOM si utilizzano i selettori CSS<br />I selettori restituiscono u...
Filosofia di jQuery<br />Funzione principale: jQuery()<br />Alias: $()<br />Selezione<br />Azione<br />
DOM & CSS (Selettori)<br />$("#ID") 					// id <br />$("div") 					// div tag name <br />$('[name*="value"]') 			// name c...
DOM & CSS (Manipolazione DOM)<br />$(‘div#content’).html(‘<p>Contenuto</p>’);<br />$(‘div#content’).append(‘<a>Link</a>’);...
DOM & CSS<br />DEMO<br />
Ajax e Gestione degli eventi<br />$(document).ready(function() {<br />alert(‘DOM is ready!’);<br />});<br />$(‘a#button’)....
Ajax e Gestione degli eventi<br />$(‘div#sidebar’).load(‘sidebar.php’);<br />// metodi Ajax<br />$.get(url, [data], callba...
Ajax e Gestione degli eventi<br />DEMO<br />
Animazioni<br />$(‘p#myParagraph’).show();<br />$(‘p#myParagraph’).hide();<br />$(‘p#myParagraph’).toggle();<br />$(‘p#myP...
Animazioni<br />DEMO<br />
Plugin<br />Innumerevoli plugin per qualsiasi esigenza<br />Animazioni (slideshow, carousel, ecc.)<br />User Interface<br ...
Plugin (Template)<br />Sviluppato da Microsoft<br />Permette a partire da strutture dati Javascript di generare codice HTM...
Plugin (Template)<br />
jQuery (Data Link)<br />Anch’esso sviluppato da Microsoft<br />Permette di creare un bind tra gli elementi di un form e un...
Plugin (Data Link)<br />
DEMO ‘ALL IN ONE’<br />DEMO<br />$(‘#demo’).show()<br />
Conclusioni<br />Semplicità<br />Completezza<br />Flessibilità<br />Supporto<br />Potenzialità<br />
Per iniziarea sviluppare<br />Visual Studio Express 2010 o Visual Studio 2010 Professional (MSDN Academic Alliance): http:...
DOMANDE?<br />Grazie per l’attenzione<br />
Riferimenti<br />jQuery (UI):<br />http://www.jquery.com http://www.jqueryui.com<br />MSDN Academic Alliance Unibo:<br />h...
Contatti<br />puzio@cs.unibo.it<br />http://www.pasqualepuzio.it<br />
RISORSE<br />
Upcoming SlideShare
Loading in …5
×

jQuery e i suoi plugin

1,593 views

Published on

Una rassegna sul framework per lo sviluppo in Javascript jQuery ed alcuni suoi plugin sviluppati da Microsoft: Template e Datalink

http://www.pasqualepuzio.it

Published in: Education
  • Be the first to comment

  • Be the first to like this

jQuery e i suoi plugin

  1. 1. jQuery e i suoi plugin<br />Pasquale Puzio<br />26 Maggio 2011, Bologna<br />
  2. 2. Agenda<br />Fondamenti di jQuery<br />jQuery<br />DOM & CSS<br />Ajax & Gestionedeglieventi<br />Animazioni<br />Plugin<br />RICH Internet (Web) Application<br />DEMO ‘All in one’<br />
  3. 3. Fondamenti di jQuery<br />jQuery è unalibreria/framework open-source per Javascriptconcepita per semplificarenotevolmente e cambiareradicalmenteilmodo di programmare in Javascript<br />
  4. 4. Perché scegliere jQuery<br />GRATIS<br />Semplicità<br />Piena compatibilità Cross-Browser:IE 6+, FireFox 2+, Safari 3+, Opera 9+, Chrome<br />Documentazione<br />Community di supporto<br />Quantità enorme di plugin<br />Integrazione con i principali IDE tra cui Visual Studio<br />
  5. 5. Perché scegliere jQuery<br />Perché è meglio di questo:<br />function assegnaXMLHttpRequest() {<br />var XHR = null;<br />browserUtente= navigator.userAgent.toUpperCase();<br />If (typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object")<br /> XHR = new XMLHttpRequest();<br />else if( window.ActiveXObject&& browserUtente.indexOf("MSIE 4") < 0 ) {<br />If (browserUtente.indexOf("MSIE 5") < 0)<br /> XHR = new ActiveXObject("Msxml2.XMLHTTP");<br />else XHR = new ActiveXObject("Microsoft.XMLHTTP");<br />}<br />return XHR;<br />} <br />
  6. 6. PerchèsceglierejQuery<br />
  7. 7. PerchèsceglierejQuery<br />
  8. 8. PerchèsceglierejQuery<br />
  9. 9. Filosofia di jQuery<br />Per accedere agli elementi del DOM si utilizzano i selettori CSS<br />I selettori restituiscono un’istanza di jQuery sulla quale è possibile eseguire alcune azioni (manipolazione del DOM, CSS, gestione degli eventi, chiamate Ajax, ecc.)<br />
  10. 10. Filosofia di jQuery<br />Funzione principale: jQuery()<br />Alias: $()<br />Selezione<br />Azione<br />
  11. 11. DOM & CSS (Selettori)<br />$("#ID") // id <br />$("div") // div tag name <br />$('[name*="value"]') // name contains <br />$('[name^="value"]') // name start <br />$(".myCssClass") // css class name <br />$("form input") // descendant(s) <br />$("#main > div") // child(s) <br />$("#main ~ div") // sibling(s) <br />$("input[name='radio']:checked") // radio checked <br />$("td:first-child a") //<a> in first td <br />$("input:disabled") // disabled input<br />a[href^="http://"] // external links<br />
  12. 12. DOM & CSS (Manipolazione DOM)<br />$(‘div#content’).html(‘<p>Contenuto</p>’);<br />$(‘div#content’).append(‘<a>Link</a>’);<br />$(‘div#content’).addClass(‘red’);<br />$(‘div#content’).toggleClass(‘yellow’);<br />$(‘div#contenta’).attr(‘href’,’http://www.jquery.org’);<br />$(‘div#contenta’).css(‘font-weight’,’bold’);<br />$(‘div#content p’).parent();<br />$(‘div#content p’).after();<br />$(‘div#contenta’).before();<br />
  13. 13. DOM & CSS<br />DEMO<br />
  14. 14. Ajax e Gestione degli eventi<br />$(document).ready(function() {<br />alert(‘DOM is ready!’);<br />});<br />$(‘a#button’).click(function() {<br /> $(this).css(‘color’,’green’);<br />});<br />
  15. 15. Ajax e Gestione degli eventi<br />$(‘div#sidebar’).load(‘sidebar.php’);<br />// metodi Ajax<br />$.get(url, [data], callback);<br />$.post(url, [data], callback);<br />$.getJSON(url, params, callback);<br />$.getScript(url, callback);<br />
  16. 16. Ajax e Gestione degli eventi<br />DEMO<br />
  17. 17. Animazioni<br />$(‘p#myParagraph’).show();<br />$(‘p#myParagraph’).hide();<br />$(‘p#myParagraph’).toggle();<br />$(‘p#myParagraph’).fadeIn();<br />$(‘p#myParagraph’).fadeOut();<br />// animazioni custom<br />$(‘p#myParagraph’).animate(params);<br />
  18. 18. Animazioni<br />DEMO<br />
  19. 19. Plugin<br />Innumerevoli plugin per qualsiasi esigenza<br />Animazioni (slideshow, carousel, ecc.)<br />User Interface<br />Rich Internet (Web) Application<br />E’ facile sviluppare un plugin<br />E’ facile utilizzare un plugin<br /><script src=‘jquery.js’ type=‘text/javascript’></script><br /><script src=‘myplugin.js’ type=‘text/javascript’></script><br />
  20. 20. Plugin (Template)<br />Sviluppato da Microsoft<br />Permette a partire da strutture dati Javascript di generare codice HTML mediante l’uso di Template<br />
  21. 21. Plugin (Template)<br />
  22. 22. jQuery (Data Link)<br />Anch’esso sviluppato da Microsoft<br />Permette di creare un bind tra gli elementi di un form e un oggetto Javascript<br />
  23. 23. Plugin (Data Link)<br />
  24. 24. DEMO ‘ALL IN ONE’<br />DEMO<br />$(‘#demo’).show()<br />
  25. 25. Conclusioni<br />Semplicità<br />Completezza<br />Flessibilità<br />Supporto<br />Potenzialità<br />
  26. 26. Per iniziarea sviluppare<br />Visual Studio Express 2010 o Visual Studio 2010 Professional (MSDN Academic Alliance): http://www.microsoft.com/express/Web/<br />Eclipse + plugin Aptana: http://www.aptana.com/<br />
  27. 27. DOMANDE?<br />Grazie per l’attenzione<br />
  28. 28. Riferimenti<br />jQuery (UI):<br />http://www.jquery.com http://www.jqueryui.com<br />MSDN Academic Alliance Unibo:<br />http://msdn60.e-academy.com/elms/Storefront/Home.aspx?campus=dsdi_si<br />Slide e materiale del seminario:<br />http://www.pasqualepuzio.it/seminari/jquery-bologna<br />
  29. 29. Contatti<br />puzio@cs.unibo.it<br />http://www.pasqualepuzio.it<br />
  30. 30. RISORSE<br />

×