Introduzione a jQuery

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

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]

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]

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]

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]

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]

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]

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]

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 ="txtEcho2" runat ="server" Width ="65%" ClientIDMode ="Static" /> Rendering: < input id ="txtEcho2" style =" width : 65%" name ="ctl00$MasterPageBody$ctl00$txtEcho2" />

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 ="text/javascript" src ="***" />

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 ="text/javascript"> google.load( "jquery" , "1.4.2" ); google.load( "jqueryui" , "1.8.0" ); google.load( "prototype" , "1.6.1.0" ); google.load( "scriptaculous" , "1.8.3" ); google.load( "mootools" , "1.2.4" ); google.load( "dojo" , "1.4.1" ); google.load( "yui" , "2.8.0r4" ); google.load( "ext-core" , "3.1.0" ); </ script >

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 ="text/javascript"> $( "#myId01" ); $( ".myCssClass01" ); </ script >

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]

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]

Filtri: esempi $('#myTable tbody tr:even') $('ul li:nth-child(2)') $('td:empty') www.1nn0va.net [email_address] Sandro Marcon [email_address]

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]

Insiemi/collezioni: esempi Seleziono un elemento e vi inserisco un nodo $("#menu").append("<li>lista</li>") Inserisco un nuovo nodo nell'elemento selezionato $("<li>lista</li>").appendTo("#menu“) Sposta i nodi da una lista all'altra $("#menu2 li").appendTo("#menu") Inserimento di markup $("p").html("Testo del <strong>paragrafo</strong>“) www.1nn0va.net [email_address] Sandro Marcon [email_address]

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]

Da dove si parte (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] L’evento .ready() < script type ="text/javascript"> $(document).ready( function () { alert( 'We are ready!!!' ); }); $( function () { alert( 'We are ready!!!' ); }); $(document).bind( "ready" , function () { // Fare attenzione! alert( 'We are ready!!!' ); }); </ script >

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=""> 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()

Events binding (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] Gli eventi vengono completamente ridefiniti < script type ="text/javascript"> $( 'ul' ).click( function (e) { if ($(e.target).is( 'a' )) { alert( 'clicked' ); } }); </ script > < script type ="text/javascript"> $(selettore).bind(evento, function () { }) </ script >

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)

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 ="text/javascript"> $.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 >

AJAX – Esempi (1) www.1nn0va.net [email_address] Sandro Marcon [email_address] < script type ="text/javascript"> $.ajax({ url: 'ajax/test.html' , success: function (data) { $( '.result' ).html(data); alert( 'Load was performed.' ); } }); </ script > < script type ="text/javascript"> $.ajax({ url: "test.html" , cache: false , success: function (html) { $( "#results" ).append(html); } }); </ script >

AJAX – Esempi (2) www.1nn0va.net [email_address] Sandro Marcon [email_address] < script type ="text/javascript"> $.post( "xml.cgi" , { name: "John" }, function (xml) { var text = $( "title" , xml).text(); $( "div#dxml" ).html( "<h2>" + text + "</h2>" ); }); </ script > Da notare come la funzione $ viene applicata anche a contenuti XML Ci sono gli shorthand per la get e la post < script type ="text/javascript"> $. get ( "ajax-test.txt" , function (txt) { $( "div#txt" ).html( "<h1>" + txt + "</h1>" ); }); </ script >

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

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

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]

Introduzione a jQuery

More Related Content

What's hot (20)

Similar to Introduzione a jQuery (20)

Introduzione a jQuery