• Save
Introduzione a jQuery
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introduzione a jQuery

  • 2,403 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,403
On Slideshare
2,396
From Embeds
7
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 7

http://www.linkedin.com 5
http://www.slideshare.net 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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