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.
Sandro Marcon Project Leader e Software Engineer presso il CTI di ELECTROLUX www.1nn0va.net [email_address] Sede Legale: V...
Agenda <ul><li>WWW </li></ul><ul><ul><li>W hat? </li></ul></ul><ul><ul><li>W hy? </li></ul></ul><ul><ul><li>W here? </li><...
Cos’è? (1) <ul><li>jQuery  è una libreria (framework, API, ecc.) scritta in Javascript (per Javascript) che estende e migl...
Cos’è? (2 -  http://jquery.com/ ) <ul><li>jQuery  is a new kind of JavaScript Library </li></ul><ul><li>jQuery  is a fast ...
Perché? (1 - Considerazioni) <ul><li>Javascript ci è stato imposto! Ma non è poi così male… </li></ul><ul><ul><li>Il nome ...
Perché? (2 - Considerazioni) <ul><li>Javascript (dialetto di ECMAScript) non è uno standard “de facto” ( DEMO ) </li></ul>...
Perché? (Conclusioni) <ul><li>Cross-browser (layer). </li></ul><ul><ul><ul><li>Manipolazione del DOM </li></ul></ul></ul><...
jQuery e ASP.Net (1) <ul><li>AJAX Library (solo Javascript) </li></ul><ul><ul><li>Non ci sono conflitti </li></ul></ul><ul...
jQuery e ASP.Net (2) <ul><li>WebForms </li></ul><ul><ul><li>Meglio dalla versione 4.0 </li></ul></ul><ul><ul><ul><li>Clien...
CDN  (Content Delivery Network)  (1) <ul><li>Riconosciuti ormai come una “best practise” </li></ul><ul><ul><li>jQuery </li...
CDN  (Content Delivery Network)  (2) <ul><li>Per recuperare ulteriormente banda, Google, attraverso le  Google AJAX Librar...
I selettori: il cuore di jQuery <ul><li>Sono lo strumento per selezionare le parti del DOM su cui si vuole andare ad opera...
I selettori: esempi <ul><li>$('div.fancy p span') </li></ul><ul><ul><li>Seleziona tutti i tag  span  contenuti in un tag  ...
I selettori: filtri <ul><li>È possibile andare ad applicare un’ulteriore operazione di “raffinazione” (riga per riga) sugl...
Filtri: esempi <ul><li>$('#myTable tbody tr:even') </li></ul><ul><li>$('ul li:nth-child(2)') </li></ul><ul><li>$('td:empty...
Insiemi/collezioni <ul><li>Ogni operazioni con i selettori mi ritorna un/una insieme/collezione di oggetti su cui posso op...
Insiemi/collezioni: esempi <ul><ul><li>Seleziono un elemento e vi inserisco un nodo </li></ul></ul><ul><ul><ul><li>$(&quot...
Tutorial & Demo <ul><li>Il migliore “punto di partenza” che possiate trovare in rete  http://ejohn.org/apps/workshop/intro...
Da dove si parte (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>L’evento  .ready() </li></ul>< s...
Da dove si parte (2) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>Differenze con l’evento  onload ...
Events binding (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>Gli eventi vengono completamente r...
Events binding (2) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>Best practices: tutti gli eventi p...
AJAX www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><ul><li>Per default tutte le chiamate sono asincrone...
AJAX – Esempi (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] < script   type =&quot;text/javascript&quot...
AJAX – Esempi (2) www.1nn0va.net [email_address] Sandro Marcon [email_address] < script   type =&quot;text/javascript&quot...
Web-services www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><ul><li>Non sono direttamente supportati (né...
Di cosa non si è parlato www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><ul><li>Selettori </li></ul></ul...
CONTATTI: http://sandromark78.it [email_address] http://delicious.com/sandromark78 Sede Legale: Via Monte Coglians, 8 – PO...
Upcoming SlideShare
Loading in …5
×

Introduzione a jQuery

2,190 views

Published on

Published in: Technology
  • Be the first to comment

Introduzione a jQuery

  1. 1. Sandro Marcon Project Leader e Software Engineer presso il CTI di ELECTROLUX www.1nn0va.net [email_address] Sede Legale: Via Monte Coglians, 8 – PORCIA – (PN) Codice fiscale: 91068510931
  2. 2. Agenda <ul><li>WWW </li></ul><ul><ul><li>W hat? </li></ul></ul><ul><ul><li>W hy? </li></ul></ul><ul><ul><li>W here? </li></ul></ul><ul><li>Il tutto sarà “farcito” da esempi e casi/modi d’uso </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  3. 3. Cos’è? (1) <ul><li>jQuery è una libreria (framework, API, ecc.) scritta in Javascript (per Javascript) che estende e migliora il set di funzioni (messe a disposizione dai vari motori Javascript degli internet browser) per la manipolazione ( lato client ) del DOM e dei CSS relativi ad una pagina (X)HTML </li></ul><ul><li>jQuery fornisce inoltre una serie di funzioni che semplificano l’utilizzo di AJAX </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  4. 4. Cos’è? (2 - http://jquery.com/ ) <ul><li>jQuery is a new kind of JavaScript Library </li></ul><ul><li>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development </li></ul><ul><li>jQuery is designed to change the way that you write JavaScript </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  5. 5. Perché? (1 - Considerazioni) <ul><li>Javascript ci è stato imposto! Ma non è poi così male… </li></ul><ul><ul><li>Il nome trae in inganno </li></ul></ul><ul><ul><li>Linguaggio debolmente tipizzato </li></ul></ul><ul><ul><li>Linguaggio di scripting (nuova fonte di paragone) </li></ul></ul><ul><ul><li>Presenta caratteristiche dei linguaggi funzionali (first-class functions) </li></ul></ul><ul><ul><li>È “vicino” ai linguaggi dinamici </li></ul></ul><ul><ul><li>Linguaggio object based </li></ul></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  6. 6. Perché? (2 - Considerazioni) <ul><li>Javascript (dialetto di ECMAScript) non è uno standard “de facto” ( DEMO ) </li></ul><ul><ul><li>Differenti browser </li></ul></ul><ul><ul><li>Mobile browser </li></ul></ul><ul><li>I produttori di browser “vanno avanti in ordine sparso” </li></ul><ul><li>HTML 5 (Adobe vs Apple) </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  7. 7. Perché? (Conclusioni) <ul><li>Cross-browser (layer). </li></ul><ul><ul><ul><li>Manipolazione del DOM </li></ul></ul></ul><ul><ul><ul><li>Eventi </li></ul></ul></ul><ul><ul><ul><li>Gestione e manipolazione degli stili </li></ul></ul></ul><ul><ul><ul><li>Animazioni ed effetti grafici (2D e 3D) </li></ul></ul></ul><ul><li>Estende in maniera intelligente l’API (per il DOM) permettendo la scrittura di codice in modo pulito, elegante e conciso </li></ul><ul><li>La versione mini pesa solo tra i 23.0 e 24.0 KB </li></ul><ul><li>Espandibile tramite un proprio sistema di plugin </li></ul><ul><li>Supportata da una grande community e dai maggiori “big” del settore (Google, Mozilla, IBM, Microsoft, ecc.) </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  8. 8. jQuery e ASP.Net (1) <ul><li>AJAX Library (solo Javascript) </li></ul><ul><ul><li>Non ci sono conflitti </li></ul></ul><ul><ul><li>In generale può essere usata con altre librerie, basta invocare la seguente funzione </li></ul></ul><ul><ul><ul><li>jQuery.noConflict() </li></ul></ul></ul><ul><ul><ul><li>Caricare jQuery prima di qualsiasi altra libreria </li></ul></ul></ul><ul><ul><ul><li>http://docs.jquery.com/Using_jQuery_with_Other_Libraries </li></ul></ul></ul><ul><li>Ajax Control Toolkit </li></ul><ul><ul><li>Non c’è integrazione con i “server control” </li></ul></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  9. 9. jQuery e ASP.Net (2) <ul><li>WebForms </li></ul><ul><ul><li>Meglio dalla versione 4.0 </li></ul></ul><ul><ul><ul><li>ClientID </li></ul></ul></ul><ul><ul><ul><li>Rendering basato sui CSS </li></ul></ul></ul><ul><ul><li>Fino alla 3.5 </li></ul></ul><ul><ul><ul><li>Buona conoscenza dei CSS Friendly Control Adapters </li></ul></ul></ul><ul><ul><ul><li><%= txtDescription.ClientID %> </li></ul></ul></ul><ul><li>MVC </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address] Markup: < asp : TextBox ID =&quot;txtEcho2&quot; runat =&quot;server&quot; Width =&quot;65%&quot; ClientIDMode =&quot;Static&quot; /> Rendering: < input id =&quot;txtEcho2&quot; style =&quot; width : 65%&quot; name =&quot;ctl00$MasterPageBody$ctl00$txtEcho2&quot; />
  10. 10. CDN (Content Delivery Network) (1) <ul><li>Riconosciuti ormai come una “best practise” </li></ul><ul><ul><li>jQuery </li></ul></ul><ul><ul><ul><li>http://code.jquery.com/jquery-1.4.2.min.js </li></ul></ul></ul><ul><ul><li>Microsoft </li></ul></ul><ul><ul><ul><li>http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js </li></ul></ul></ul><ul><ul><li>Google </li></ul></ul><ul><ul><ul><li>http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js </li></ul></ul></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address] < script type =&quot;text/javascript&quot; src =&quot;***&quot; />
  11. 11. CDN (Content Delivery Network) (2) <ul><li>Per recuperare ulteriormente banda, Google, attraverso le Google AJAX Libraries , permette il download della libreria anche in forma compressa (GZip) </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address] < script type =&quot;text/javascript&quot;> google.load( &quot;jquery&quot; , &quot;1.4.2&quot; ); google.load( &quot;jqueryui&quot; , &quot;1.8.0&quot; ); google.load( &quot;prototype&quot; , &quot;1.6.1.0&quot; ); google.load( &quot;scriptaculous&quot; , &quot;1.8.3&quot; ); google.load( &quot;mootools&quot; , &quot;1.2.4&quot; ); google.load( &quot;dojo&quot; , &quot;1.4.1&quot; ); google.load( &quot;yui&quot; , &quot;2.8.0r4&quot; ); google.load( &quot;ext-core&quot; , &quot;3.1.0&quot; ); </ script >
  12. 12. I selettori: il cuore di jQuery <ul><li>Sono lo strumento per selezionare le parti del DOM su cui si vuole andare ad operare </li></ul><ul><li>Si basano anche sui selettori dei CSS (sono supportati anche quelli nuovi definiti nello standard CSS3) </li></ul><ul><li>Possibilità </li></ul><ul><ul><li>$(CSS selector) </li></ul></ul><ul><ul><li>$(HTML) </li></ul></ul><ul><ul><li>$(DOM element) </li></ul></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address] < script type =&quot;text/javascript&quot;> $( &quot;#myId01&quot; ); $( &quot;.myCssClass01&quot; ); </ script >
  13. 13. I selettori: esempi <ul><li>$('div.fancy p span') </li></ul><ul><ul><li>Seleziona tutti i tag span contenuti in un tag p a sua volta contenuto in un tag div di classe fancy </li></ul></ul><ul><li>$('p,div,h1,input') </li></ul><ul><ul><li>Seleziona tutti i tag p , div , h1 e input presenti nel DOM </li></ul></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  14. 14. I selettori: filtri <ul><li>È possibile andare ad applicare un’ulteriore operazione di “raffinazione” (riga per riga) sugli elementi selezionati </li></ul><ul><li>Nella documentazione sono suddivisi in </li></ul><ul><ul><li>Filtri di base (pari, dispari, primo, ultimo, ecc.) </li></ul></ul><ul><ul><li>Filtri sui figli (primo, ultimo, n-esimo, unico) </li></ul></ul><ul><ul><li>Filtri di contenuto (presenza di una certa stringa di testo o di un certo elemento) </li></ul></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  15. 15. Filtri: esempi <ul><li>$('#myTable tbody tr:even') </li></ul><ul><li>$('ul li:nth-child(2)') </li></ul><ul><li>$('td:empty') </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  16. 16. Insiemi/collezioni <ul><li>Ogni operazioni con i selettori mi ritorna un/una insieme/collezione di oggetti su cui posso operare: </li></ul><ul><ul><li>Con delle funzioni di manipolazione </li></ul></ul><ul><ul><li>Con delle funzioni di ricerca </li></ul></ul><ul><ul><li>Applicando ancora dei selettori </li></ul></ul><ul><li>Ognuna delle suddette operazioni ritorna a sua volta un insieme dando così la possibilità di “concatenare” sequenze di operazioni </li></ul><ul><li>L’insieme generato da un certo selettore può essere utilizzato come valore da passare a determinate funzioni </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  17. 17. Insiemi/collezioni: esempi <ul><ul><li>Seleziono un elemento e vi inserisco un nodo </li></ul></ul><ul><ul><ul><li>$(&quot;#menu&quot;).append(&quot;<li>lista</li>&quot;) </li></ul></ul></ul><ul><ul><li>Inserisco un nuovo nodo nell'elemento selezionato </li></ul></ul><ul><ul><ul><li>$(&quot;<li>lista</li>&quot;).appendTo(&quot;#menu“) </li></ul></ul></ul><ul><ul><li>Sposta i nodi da una lista all'altra </li></ul></ul><ul><ul><ul><li>$(&quot;#menu2 li&quot;).appendTo(&quot;#menu&quot;) </li></ul></ul></ul><ul><ul><li>Inserimento di markup </li></ul></ul><ul><ul><ul><li>$(&quot;p&quot;).html(&quot;Testo del <strong>paragrafo</strong>“) </li></ul></ul></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  18. 18. Tutorial & Demo <ul><li>Il migliore “punto di partenza” che possiate trovare in rete http://ejohn.org/apps/workshop/intro/ </li></ul>www.1nn0va.net [email_address] Sandro Marcon [email_address]
  19. 19. Da dove si parte (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>L’evento .ready() </li></ul>< script type =&quot;text/javascript&quot;> $(document).ready( function () { alert( 'We are ready!!!' ); }); $( function () { alert( 'We are ready!!!' ); }); $(document).bind( &quot;ready&quot; , function () { // Fare attenzione! alert( 'We are ready!!!' ); }); </ script >
  20. 20. Da dove si parte (2) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>Differenze con l’evento onload </li></ul><ul><ul><li>In generale .ready() (e .load() ) non è compatibile con <body onload=&quot;&quot;> </li></ul></ul><ul><ul><li>Con .ready() si ha la certezza che il DOM della pagina è completamente stato caricato </li></ul></ul><ul><ul><li>Non è detto che siano state caricate le immagini </li></ul></ul><ul><ul><ul><li>Se si necessità di “operare” su eventuali immagini è preferibile lavorare sull’evento .load() </li></ul></ul></ul>
  21. 21. Events binding (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>Gli eventi vengono completamente ridefiniti </li></ul>< script type =&quot;text/javascript&quot;> $( 'ul' ).click( function (e) { if ($(e.target).is( 'a' )) { alert( 'clicked' ); } }); </ script > < script type =&quot;text/javascript&quot;> $(selettore).bind(evento, function () { }) </ script >
  22. 22. Events binding (2) www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><li>Best practices: tutti gli eventi possono essere “bindati” in un unico punto (ASP.Net 4.0) </li></ul><ul><ul><li>Tutto può essere fatto in una callback dell’evento .ready() all’interno di un file Javascript senza andare a “sporcare” il markup o l’evento Page_Load (lato server) </li></ul></ul>
  23. 23. AJAX www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><ul><li>Per default tutte le chiamate sono asincrone </li></ul></ul><ul><ul><li>Non è possibile eseguire chiamate cross-domain </li></ul></ul><ul><ul><ul><li>Necessario realizzare un proxy nel proprio/a sito/web-application </li></ul></ul></ul>< script type =&quot;text/javascript&quot;> $.ajax({ url: 'ajax/test.html' , success: function (data, textStatus, XMLHttpRequest) { $( '.result' ).html(data); alert( 'Load was performed.' ); } error: function (XMLHttpRequest, textStatus, errorThrown) { alert( 'Error!' ); } }); </ script >
  24. 24. AJAX – Esempi (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] < script type =&quot;text/javascript&quot;> $.ajax({ url: 'ajax/test.html' , success: function (data) { $( '.result' ).html(data); alert( 'Load was performed.' ); } }); </ script > < script type =&quot;text/javascript&quot;> $.ajax({ url: &quot;test.html&quot; , cache: false , success: function (html) { $( &quot;#results&quot; ).append(html); } }); </ script >
  25. 25. AJAX – Esempi (2) www.1nn0va.net [email_address] Sandro Marcon [email_address] < script type =&quot;text/javascript&quot;> $.post( &quot;xml.cgi&quot; , { name: &quot;John&quot; }, function (xml) { var text = $( &quot;title&quot; , xml).text(); $( &quot;div#dxml&quot; ).html( &quot;<h2>&quot; + text + &quot;</h2>&quot; ); }); </ script > <ul><ul><li>Da notare come la funzione $ viene applicata anche a contenuti XML </li></ul></ul><ul><ul><li>Ci sono gli shorthand per la get e la post </li></ul></ul>< script type =&quot;text/javascript&quot;> $. get ( &quot;ajax-test.txt&quot; , function (txt) { $( &quot;div#txt&quot; ).html( &quot;<h1>&quot; + txt + &quot;</h1>&quot; ); }); </ script >
  26. 26. Web-services www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><ul><li>Non sono direttamente supportati (né SOAP né RESTful) </li></ul></ul><ul><ul><ul><li>Si utilizza la funzione .ajax() vista in precedenza con una fase (non proprio così banale) di pre-processing </li></ul></ul></ul><ul><ul><ul><li>Si trovano vari plugin che aggirano il problema </li></ul></ul></ul><ul><ul><ul><li>In ASP.Net risulta molto più semplice se si imposta la serializzazione in JSON </li></ul></ul></ul>
  27. 27. Di cosa non si è parlato www.1nn0va.net [email_address] Sandro Marcon [email_address] <ul><ul><li>Selettori </li></ul></ul><ul><ul><ul><li>Si sono viste solo le basi </li></ul></ul></ul><ul><ul><li>Eventi </li></ul></ul><ul><ul><ul><li>Ce ne sono di particolari ( One , ecc.) </li></ul></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><ul><li>Funzioni di “gestione” </li></ul></ul></ul><ul><ul><li>Animazioni </li></ul></ul><ul><ul><ul><li>code </li></ul></ul></ul><ul><ul><li>Plugin (estensioni) </li></ul></ul><ul><ul><ul><li>jQuery UI </li></ul></ul></ul>
  28. 28. CONTATTI: http://sandromark78.it [email_address] http://delicious.com/sandromark78 Sede Legale: Via Monte Coglians, 8 – PORCIA – (PN) Codice fiscale: 91068510931 www.1nn0va.net [email_address]

×