Primi passi con jQuery

JavaScript è un linguaggio interpretato, cioè ha bisogno di un interprete per funzionare. L’interprete, integrato nel browser, legge il codice, lo “traduce” e lo esegue. Esistono diversi interpreti, ad esempio Mozilla utilizza Rhino, Chrome usa V8, Safari utilizza Nitro e via dicendo. Ogni interprete è un software a tutti gli effetti e le varie versioni presentano delle differenzi sostanziali, il che rende molto complicata la vita di  un programmatore client side.

Per fortuna, qualche anno fa, sono state create delle librerie che semplificano di molto la gestione del codice Javascript, andando ad appianare tutte le differenze che sussistono tra browser e browser.

In buona sostanza attraverso queste librerie possiamo creare degli script molto complessi ma riducendo le righe di codice. La libreria sicuramente più utilizzata in questi ultimi anni è jQuery e in questo breve articolo faremo una breve panoramica sulle sue funzionalità.

Il motto di jQuery è “write less do more”, dichiarazione molto azzeccata perché il volume di codice non si riduce solo per livellare le differenze tra i browser, ma per qualsiasi azione che si compie all’interno dello script. Per capirci meglio facciamo un piccolo esempio. Con il codice tradizionale JavaScript, per mostrare un messaggio di avviso al click di un elemento avremmo dovuto scrivere tutto questo codice:

window.onload = function(){
	                   var sel = document.getElementById('sel');
	                   sel.onclick = function(){
	                       	                    alert('ciao');
	                       	                    }
}

Mentre lo stesso risultato con jQuery si ottiene così

jQuery(function(){
                  jQuery('#sel').click(function(){
                  	                          alert('ciao');
                                                  })
                  })

Sicuramente questo è un codice molto banale ma proviamo ad immaginare il volume di codice che si andrà a risparmiare quando l’applicazione crescerà con l’introduzione di funzionalità più complesse.

Come installare jQuery

Ci sono diversi modi per installare jQuery. Recandoci sul sito ufficiale, nella sezione Downloads, troviamo la versione minificata e la versione non compressa. Il file non compresso è preferibile usarlo durante la fase di sviluppo o di debugging mentre il file compresso consente di risparmiare larghezza di banda e migliorare le prestazioni in fase di produzione.

Attualmente la libreria è alla versione 3.2.1 ma se abbiamo già delle funzionalità di jQuery integrate nel nostro website, con versioni precedenti, possiamo utilizzare il plugin migrate, a sua volta disponibile in due versioni: una per le versioni precedenti alla 1.9 e la seconda che copre le versioni dalla 1.9 fino alla 3.0

Il plugin migrate va incluso subito dopo la libreria principale

<script src="jquery.min.js"></script>
<script src="jquery-migrate-1.4.1.min.js"></script>

Il secondo modo per installare jQuery consiste nell’utilizzare un CDN ossia una rete di distribuzione di contenuti, distribuita su più server a livello globale. In teoria questo metodo consente di offrire un miglioramento delle prestazioni, in quanto se un utente ha già scaricato una versione di jQuery dallo stesso CDN non deve scaricarla di nuovo. Lo svantaggio consiste nel fatto che ci può essere un ritardo tra gli aggiornamenti della libreria e la sua disponibilità nel CDN. Il CDN più utilizzato è sicuramente quello di Google, consultabile a questo indirizzo,  dove sono presenti anche le istruzioni per l’installazione.

jQuery noConflict()

Molte librerie JavaScript utilizzano il simbolo del dollaro ($) come funzione o per intercettare i selettori nel DOM, proprio come fa jQuery. Ma la nostra libreria preferita ci permette di accedere agli elementi anche utilizzando l’alias jQuery, come abbiamo visto nel primo esempio di questo articolo. Nel caso si avesse bisogno di utilizzare un’altra libreria JavaScript, affiancandola a jQuery, dobbiamo restituire il controllo di $ all’altra libreria, utilizzando il metodo noConflict.

<script src="altra_libreria.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document).ready(function($) {
// codice per jQuery va qui
});
// Codice per la seconda libreria va qui
</script>

Bene, in questo breve articolo abbiamo visto quali possono essere i vantaggi nell’utilizzare jQuery rispetto a JavaScript tradizionale, abbiamo visto come installare la libreria e come evitare eventuali conflitti che si verificano quando si affianca una seconda libreria a jQuery.

[responsive_video url=”https://www.youtube.com/watch?v=g3taCD0lfDw”][/responsive_video]

Nel prossimo articolo faremo una panoramica sui selettori, i metodi di jQuery per intercettare gli elementi nel DOM e renderli disponibili per applicare poi tutte le funzionalità di cui abbiamo bisogno.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *