Introduzione a jQuery

2,105 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,105
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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]

×