Una rassegna sul framework per lo sviluppo in Javascript jQuery ed alcuni suoi plugin sviluppati da Microsoft: Template e Datalink http://www.pasqualepuzio.it

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. PerchèsceglierejQuery

7. PerchèsceglierejQuery

8. PerchèsceglierejQuery

9. Filosofia di jQuery Per accedere agli elementi del DOM si utilizzano i selettori CSS I selettori restituiscono un’istanza 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") //<a> in first td $("input:disabled") // disabled input a[href^="http://"] // external links

12. DOM & CSS (Manipolazione DOM) $(‘div#content’).html(‘<p>Contenuto</p>’); $(‘div#content’).append(‘<a>Link</a>’); $(‘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 <script src=‘jquery.js’ type=‘text/javascript’></script> <script src=‘myplugin.js’ type=‘text/javascript’></script>

20. Plugin (Template) Sviluppato da Microsoft Permette a partire da strutture dati Javascript di generare codice HTML mediante l’uso di Template

21. Plugin (Template)

22. jQuery (Data Link) Anch’esso 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 l’attenzione

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