A guardare bene, sotto lo strato della socialità, dell'interattività e dello User Generated Content, il web 2.0 con il quale tutti noi abbiamo a che fare giornalmente è basato massicciamente sull'uso di JavaScript. In passato spesso associato all'idea di popup invasivi e fraudolenti, questo linguaggio è stato particolarmente rivalutato negli ultimi anni anche grazie alla diffusione di tecniche come AJAX e alla possibilità sempre più estesa di riprodurre effetti grafici dinamici senza la necessità di plugin come Flash.
Dal punto di vista degli sviluppatori, tuttavia, la natura lato client del linguaggio è da sempre la fonte principale di problemi e mal di testa. Infatti, poiché ogni browser implementa uno specifico motore JavaScript, ognuno (ma soprattutto IE) con specifiche ed eccezioni proprie, è spesso impossibile essere certi del funzionamento cross-browser di uno script. Inoltre, il linguaggio presenta ancora notevoli lacune che lo rendono incoerente rispetto ai linguaggi server-side come PHP o Ruby.
In risposta a questi problemi sono nati progetti di librerie (o meglio framework) in grado di garantire il funzionamento cross-browser degli script e di estendere o comunque facilitare le funzioni native di JavaScript.
Uno dei primi framework a vedere la luce è stato Prototype, che ha approcciato il problema estendendo il DOM e gli oggetti globali di JavaScript, cioè aggiungendo funzionalità agli elementi che compongono la pagina e ad oggetti come array e strighe. Con questo metodo vengono colmate le numerose lacune di JavaScript allo stesso modo in cui vengono aggiunti plugin in vari programmi. Nelle sue prime versioni anche Mootools aveva intrapreso questa strada, mentre nell'ultima versione la libreria è quasi completamente strutturata ad oggetti, mantenendo l'estensione di alcuni oggetti fondamentali come array e stringhe. Il problema dell'approccio di Prototype è infatti che estendendo gli oggetti globali di JavaScript si potrebbero creare incompatibilità con nuove versioni dei motori o addirittura conflitti con le funzioni dello sviluppatore o con altre librerie.
Il progetto jQuery
Un approccio molto diverso è da sempre quello di jQuery, un framework sviluppato da John Resig a partire dal 2006 con il preciso intento di rendere il codice più sintetico e di limitare al minimo l'estensione degli oggetti globali per ottenere la massima compatibilità con altre librerie.
Da questo principio è nata una libreria in grado di offrire un'ampia gamma di funzionalità, che vanno dalla manipolazione degli stili CSS e degli elementi HTML, agli effetti grafici per passare a comodi metodi per chiamate AJAX cross-browser. Il tutto, appunto, senza toccare nessuno degli oggetti nativi JavaScript.
Per chi si avvicina a jQuery per la prima volta è quindi fondamentale sapere che tutto ruota attorno all'oggetto/funzione $, a sua volta un abbreviazione (o alias) di jQuery.
$("#mioBlocco"); //Un oggetto jQuery
jQuery("#mioBlocco") //Lo stesso oggetto richiamato in modo diverso
Ma andiamo con ordine, ecco un primo esempio per avere un colpo d'occhio su vantaggi di jQuery:
// trovare il valore dell'attributo href del tag a con id mioLink
// <a id="mioLink" href="http://www.html.it">link</a>
document.getElementById("mioLink").href; // JavaScript nativo
$('mioLink').readAttribute('href'); // Prototype
document.getElementById("mioLink").readAttribute('href') // Prototype, come detto, estende il DOM
$("#mioLink").attr("href"); // jQuery
Già da queste righe di codice si intuiscono due caratteristiche fondamentali di jQuery: anzitutto la brevità del codice utilizzato, ma soprattutto il fatto che l'elemento da ricercare sia stato passato alla funzione $() sotto forma di selettore CSS (come avviene in Mootools per la funzione $$ ).
Per chi non ha dimestichezza con framework del genere, o proviene da altre librerie, inizialmente questa caratteristica potrebbe sembrare uno svantaggio e magari produrrà qualche errore: per esempio in jQuery la funzione $('mioLink') cercherà un immaginario tag mioLink senza trovarlo.
In realtà uno dei punti di forza del framework è proprio il potente e performante motore di selezione (di cui parleremo più avanti).
Un'altra caratteristica che va sottolineata è che molti metodi di jQuery sono concatenabili, per rendere la scrittura e la lettura del codice molto più lineare:
$("#mioLink").text("Nuovo testo").css("color","red");
//cambio il testo del link e il colore
I buoni motivi per usare jQuery
Oltre ai vantaggi già citati, vi sono alcuni buoni motivi per cui è una buona idea usare jQuery: anzitutto perché è possibile usarla in tutti progetti senza paura di incappare in incompatibilità nel codice. Infatti, utilizzando la funzione jQuery.noConflict() verrà semplicemente rimosso l'alias $, e potremo usare, per esempio, Mootools richiamando questo framewok con $('mioId') e jQuery con jQuery("#mioId") (esempio).
In secondo luogo, jQuery ha un semplice sistema di estensione che permette di aggiungere nuove funzionalità (plugin) oltre a quelle predefinite.
Inoltre la sua diffusione ha fatto in modo che attorno al team di sviluppo ufficiale crescesse una numerosa community che mette a disposizione plugin e supporto di ottimo livello.
Infine, e potrebbe sembrare una cosa da poco, perché il motto di jQuery è "Write less, do more", ed effettivamente la sua sintassi sintetica ed efficiente è particolarmente apprezzabile quando si tratta di scrivere svariate linee di codice.
Ottenere jQuery
Dal sito jquery.com è possibile scaricare il framework in due formati:
- development: non compresso, utile in fase di sviluppo e debug (120Kb)
- production: compresso, da utilizzare quando il progetto è online per ottimizzare i tempi di caricamento (59Kb, 19Kb se compresso ulteriormente lato server con GZip)
Una volta scaricato il file, sarà sufficiente collegarlo alla pagina HTML inserendo nel tag head il seguente codice:
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
Un'altra soluzione che si è fatta strada nell'ultimo periodo, è quella di utilizzare una copia del framework presente sul network di Google:
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Questa soluzione lega il funzionamento dei nostri script alla raggiungibilità del servizio (mai garantita al 100%) ma ha il vantaggio che l'utente potrebbe già aver scaricato il file in questione nella cache del browser e per questo gli verrebbe evitato di dover riscaricare un file uguale con conseguente diminuzione del tempo di caricamento della pagina.