Le librerie JavaScript facilitano notevolmente il compito del programmatore.

Lo sviluppo web è radicalmente cambiato negli ultimi anni. Fino a qualche tempo fa l’implementazione di elementi dinamici nella pagine HTML veniva realizzata con spezzoni di codice Javascript creati ad hoc, che spesso, all’aumentare della complessità divenivano intricati e difficile da mantenere.

Per garantire certe qualità di un sito e mantenere il codice entro dimensioni contenute, sono state introdotte da diversi soggetti (Google, Yahoo, ma anche singoli web developer come John Resig) delle librerie di funzioni JavaScript (dette in gergo tecnico API, Application Programming Interface o anche Framework) che facilitano notevolmente il compito del programmatore.

In questa lezione iniziamo lo studio delle caratteristiche salienti della libreria jQuery che utilizzeremo per riscrivere alcuni degli esempi già visti.

La libreria jQuery.

jQuery (http://jquery.com/) è stata ideata e sviluppata da John Resig che ha pubblicato la prima versione nel 2005. Da allora ha subito diverse revisioni e aggiornamenti da parte di un gruppo sempre più folto di sviluppatori.

Si tratta di una libreria javascript cross-browser, free e open source .

Serve per velocizzare e facilitare la scrittura di script client-side:

Selezionare e modificare elementi del DOM
Manipolare CSS
Creare animazioni ed effetti
Gestire Eventi

La libreria jQuery è formata da un unico file javaScript, contenente tutto il pacchetto. Deve essere incluso nella pagina html in uso nel solito modo, dentro l'intestazione, (il tag <head>). Ad esempio, lo script

<script type="text/javascript" src="jQuery.js"></script>

suppone che il file jQuery.js (scaricabile dal sito di jQuery) sia nella stessa cartella del documento che contiene lo script.

jQuery va quindi intesa come un'estensione di JavaScript per superare le difficoltà di programmazione che nascono dal voler creare siti dinamici, accessibili ed usabili. D'ora in poi troveremo negli script codice JavaScript mescolato a codice jQuery.

La potenza di jQuery risiede nella facilità di individuare elementi di una pagina web mediante una estesa casisitica di selettori, delle espressioni (principalmente di tipo stringa, ma non solo) che permettono di identificare una lista di elementi di una pagina.

Ad esempio, per applicare un fade out (dissolvenza in uscita) ai tag <div> di un documento è sufficiente scrivere

$("div").fadeOut()

I selettori jQuery comprendono i selettori CSS più selettori specifici di jQuery, i filtri, che permettono anche l'accesso ad elementi basandosi sul loro posizionamento, o su proprietà dei tag.

I selettori vengono passati come argomenti della funzione jQuery() o del suo alias, la funzione $() (quest'ultima introdotta per mantenere un certa similitudine con altre librerie e usata quasi sempre).

La sintassi generica è $(selettore) e il valore restituito è un oggetto che comprende l'array degli elementi individuati dal selettore.

Ad esempio:

$("#header") restituisce l'elemento con id="header", come il comando getElementById()

$("h3") prende tutti gli elementi h3

$("div#content .photo") restituisce un array degli elementi con class="photo" dentro al tag <div id="content">

$(p a) restituisce un array contenente tutti gli elementi <a> contenuti all'interno di un elemento <p> (non necessariamente figli diretti),

$(p > a) restituisce un array contenente tutti gli elementi <a> che sono figli diretti di un elemento <p>,

$(a:first) restituisce un array contenente il primo elemento <a> di una pagina,

$(li a:first) restituisce un array contenente il primo elemento <a> all'interno di un elemento <li>,

$(:checkbox:checked:enabled) restituisce un array contenente le checkbox selezionate (con il segno di spunta) e abilitate.

$("ul li:nth-child(2)") prende solo il secondo elemento <li> degli <ul>

$("ul li:nth-child(even)") prende solo i figli di posizione pari degli <ul>

La funzione $() restituisce un oggetto, detto wrapped set, che contiene un array degli elementi individuati dal selettore.

Con un po' di pratica si arriva in breve tempo a padroneggiare i selettori e il più è fatto! Selettori a parte, la sintassi di jQuery è semplificata rispetto a quella di JavaScript, e in breve tempo si possono raggiungere notevoli risultati di produttività.

I comandi jQuery.

Gli elementi di una pagina restituiti dalla funzione $() possono essere elaborati mediante apposite funzioni, dette comandi o metodi (wrapper methods), che possono comporsi sequenzialmente, separando funzioni consecutive con un singolo punto. Nell'esempio precedente, riportato qui sotto,

$("div").fadeOut()

a TUTTI gli elementi <div> è applicata una dissolvenza in uscita, ovvero tutti i <div> scompaiono.

La maggior parte dei comandi operano su tutti gli elementi individuati da un selettore (nell'esempio, fadeOut() è applicato a tutti i <div>) e quindi l'uso di cicli iterativi come for e while è limitatissimo, semplificando così la programmazione.

Inoltre, la maggior parte dei metodi restituisce come valore lo stesso wrapped set e quindi si possono concatenare più metodi in una stessa riga di codice, ad esempio,

$("div").fadeOut().fadeIn()

ottenendo l'effetto di eseguire in sequenza i metodi concatenati (sugli elementi <div> è eseguita una dissolvenza in uscita e successivamente un in ingresso, pertanto gli elementi prima scompaiono per poi riapparire).

Per maggiori informazioni sui comandi jQuery e il loro elenco completo, visitate la documentazione di jQuery.

Il seguente codice HTML mostra il corpo del primo esempio, dove i due tag <div> vengono fatti scomparire con una dissolvenza:

<body>
   <h1>Prova di un bel fade out... </h1>
   <h1>Altra prova di un bel fade out... </h1>
   <script type= IsString="Yes_""text/Javascript" >
$("h1").fadeOut();
   </script>
</body>

Lo stesso esempio viene proposto in altre due varianti. La prima,

<body>
   <h1>Prova di un bel fade out... </h1>
   <script type= "text/Javascript" >
   setTimeout('$("h1").fadeOut();',1000);
   </script>
</body>

introduce un ritardo di un secondo sull'inizio della dissolvenza tramite la funzione JavaScript setTimeout() , mentre la seconda

<body>
   <h1>Prova di un bel fade out... </h1>
   <script type= "text/Javascript" >
   var inizio=setTimeout('$("h1").fadeOut();',2000);
   </script>
   <input type="button" value=" stop fadeout " onclick="stopFadeout();" >
</body>

introduce un pulsante per prevenire la dissolvenza. La pressione del pulsante prima che sia esaurito il ritardo (2 sec.) invoca la funzione stopFadeout()

definita nell'intestazione del documento che impedisce l'esecuzione di fadeOut() e cambia il testo del <div> mediante il comando jQuery text() .

In questi primi esempi, lo script che compie la dissolvenza è inserito in fondo al corpo del documento, in modo tale che questo sia eseguito al termine del caricamento del documento. La modalità canonica per invocare l'esecuzione di un script al termine del caricamento della pagina è però mostrata dal seguente esempio, dove si predispone il gestore del click del mouse su un'immagine:

<head>
...
<script language= "JavaScript" type= "text/javascript" >
$(document).ready(function(){
$('img').toggle(
function(){$(this).attr("src","gallery_jQuery/images/coffee.jpg");},
function(){$(this).attr("src","gallery_jQuery/images/rose.jpg");}
);
});
</script>
</head>

La funzione ready() ha un argomento di tipo funzione che viene eseguita quando è terminata l'analisi del codice HTML della pagina e la costruzione dell'albero del documento (ma, a differenza di load(), non deve essere terminato il caricamento delle immagini presenti nella pagina).

La funzione passata come argomento a ready() esegue sui tag <img> il metodo toggle() che gestisce il click del mouse stabilendo che la funzione che è primo argomento sia eseguita in corrispondenza dei click dispari, mentre la funzione che è secondo argomento sia eseguita ai click di posto pari.

Le due funzioni argomento di toggle() modificano con il comando attr() il valore dell'attributo src assegnadogli come valore il secondo argomento di tipo stringa. Pertanto, ai click dispari sarà visualizzato il file coffee.jpg e ai click di posto pari sarà visualizzato il file rose.jpg .

L'oggetto $(this) all'interno di toggle() indica un generico elemento dell'insieme $('img') , ovvero un'immagine. Ricordiamo che toggle(), come tutti i comandi jQuery opera su un insieme di elementi (nel ns. esempio l'insieme dei tag <img>) definendo per ciascuno di essi il comportamento al click del mouse.

Nella riformulazione con jQuery dell'esempio della tabella "zebrata", il codice è simile a quello precedente:

<head>
...
<script type="text/javascript">
$(document).ready(function(){
   $("table tr:nth-child(odd)").addClass("odd");
   $("table tr").hover(
   function() { $(this).css({fontWeight: "bold"}); },
   function() {$(this).css("font-weight",'normal');}
   );
})
</script>
</head>

La colorazione a righe alterne dello sfondo della tabella è effettuata dal codice

$("table tr:nth-child(odd)").addClass("odd");

che assegna la classe CSS "odd" alle righe di posto dispari (escludendo l'intestazione della tabella), individuate dal selettore "table tr:nth-child(odd)".

La funzione hover() dispone di due argomenti di tipo funzione

$("table tr").hover(
   function() { $(this).css({fontWeight: "bold"}); },
   function() {$(this).css("font-weight",'normal');}
   );
})

e fa sì che la prima funzione sia eseguita quando il mouse entra su una riga, mentre la seconda è eseguita quando il mouse esce da una riga. La prima funzione attribuisce il grassetto al testo interno a una riga, mentre la seconda ripristina lo stile normale. Quindi, si può affermare che hover() è simile alla funzione toggle() anche se la prima gestisce i click del mouse mentre la seconda gestisce gli spostamenti del mouse.

In questo esempio, l'oggetto $(this) all'interno di hover() indica un generico elemento dell'insieme $("table tr") , ovvero una riga di una tabella.

Anche l'esempio dei menu collassabili si può riformulare facilmente con jQuery. Lo scrip

stabilisce che ai click dispari siano visualizzati in colore rosso i div interni ai div della classe CSS "primo" per effetto del codice

$(this).find("div").show().css("color","red");

, mentre ai click pari gli stessi div siano nascosti dall'esecuzione del codice

$(this).find("div").hide();

Si noti che

$(this).find("div")

è l'insieme dei <div> all'interno di un div di classe "primo", perché il comando find() di jQuery restituisce gli elementi individuati dal selettore passato come argomento ( "div") che si trovano nel sottoalbero con radice un elemento di $(this) , ovvero un <div> di classe "primo".

Ecco una porzione del codice HTML:

<body>
<div class= "primo" > Sezione 1 UNO
<div class="secondo terzo" >
capitolo 1.1<br>
capitolo 1.2<br>
capitolo 1.3<br>
</div>
</div>
...
</body>

Consideriamo ora il seguente esempio tratto dal libro di C. Heilmann, Beginning JavaScript development with DOM scripting and Ajax (si veda la pagina del corso per il link al sito del libro, dove è possibile scaricare il codice degli esempi).

L'esempio si compone di un file exampleJQuery.html di cui vediamo più sotto le parti rilevanti di codice. L'esempio mostra come sia possibile visualizzare oppure nascondere del testo (tipicamente il codice di un programma) racchiuso tra una coppia di marcatori <pre> facendo click su un link soprastante al testo. Nel codice HTML viene omesso il testo tra i marcatori <pre>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example: Showing and hiding with jQuery</title>
<style type="text/css">
@import 'jqueryTest.css';
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryTest.js"></script>
</head>
<body>
<h1>Showing and hiding a code example with jQuery</h1>
<p>The code</p>
<pre><code>
...
</code></pre>
<p>The CSS</p>
<pre><code>
...
</code></pre>
<p><a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u;=http%3A%2F%2Fjquery.com">jQuery homepage</a></p>
</body>
</html>

Nell'intestazione del documento è possibile notare il riferimento alla libreria jQuery

<script type="text/javascript" src="jquery.js"></script>

e il riferimento allo script jqueryTest.js

<script type="text/javascript" src="jqueryTest.js"></script>

che, usando jQuery,

crea un link per ogni tag <pre>,
posiziona il link nel documento prima del testo preformattato,
definisce il gestore del click sul link

Ecco il codice completo:

$( document ).ready (
function() {
   $( 'pre' ).before( '<p><a class="trigger" href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u;=%23">Show code</a></p>' );
   $( 'pre' ).hide();
   $('a.trigger').toggle (
   function() {
   $(this).html('Hide Code');
   $(this.parentNode.nextSibling).slideDown('slow');
   },
   function() {
   $(this).html('Show Code');
   $(this.parentNode.nextSibling).slideUp('slow');
   }
   )
}
)

come si nota, il codice è molto breve e mostra diverse caratteristiche di jQuery che ora analizziamo.

Innanzi tutto, notiamo il comando ready(), che permette di eseguire la funzione passatagli come parametro al momento in cui si completa il caricamento del codice HTML (ma non quello dei file accessori come le immagini) e la costruzione dell'albero del documento.

$( document ) . ready (

function() {

// codice della funzione ...

}

)

Il codice della funzione passata come parametro a ready(), inizia con la riga

$( 'pre' ).before( '<p><a class="trigger" href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u;=%23">Show code</a></p>' );

che inserisce nel documento, prima di ogni tag <pre> il codice HTML seguente

<p><a class="trigger" href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u;=%23">Show code</a></p>

cioè un paragrafo contenente un link.

Il codice

$( 'pre' ).hide();

rende invisibili i tag <pre>, mentre il metodo toggle()

$('a.trigger').toggle ()

è applicato a tutti i link della classe trigger, che si auspica siano gli unici link presenti nella pagina. Il metodo toggle() è in realtà un gestore del click del mouse e fa sì che (a click alterni) sia eseguita ai click dispari la prima funzione

function() {
   $(this).html('Hide Code');
   $(this.parentNode.nextSibling).slideDown('slow');
   },

che rende visibile il testo preformattato seguente il link e cambia il testo del link in 'Hide Code' e ai click pari la seconda funzione

function() {
   $(this).html('Show Code');
   $(this.parentNode.nextSibling).slideUp('slow');
   }

che nasconde il testo preformattato seguente il link e cambia il testo del link in 'Show Code' .

In dettaglio:

l'espressione $(this) indica un link,
il metodo html() aggiorna il contenuto del link (il testo tra <a> e </a>), assegnadogli l'argomento di tipo stringa,
l'oggetto this.parentNode.nextSibling è l'elemento <pre> seguente il link,
i metodi slideDown() e slideUp() sono usati per creare un'animazione a scorrimento verso il basso e rispettivamente verso l'alto, a bassa velocità (determinata dal parametro 'slow') quando si visualizza o si nasconde un testo formattato.

Come ultimo esempio, mostriamo come jQuery possa semplificare la programmazione JavaScript riformulando l'esempio della galleria fotografica. Il codice HTML e CSS è invariato, analizzeremo pertanto solo il file showPic.js contente il codice JS.

All'interno di showPic.js sono sempre presenti le funzioni:

preparePlaceholder() che inserisce il codice HTML del tag <img> contenente l'immagine selezionata e il tag <p> della didascalia,
prepareGallery() che definisce il comportamento dei link al click del mouse,
showPic() che sostituisce l'immagine corrispondente al link cliccato nel placeholder.

Le funzioni preparePlaceholder() e prepareGallery() sono eseguite al termine della costruzione dell'albero del documento.

Ecco il codice delle funzioni:

function preparePlaceholder() {

$("<img></img>").attr({id:"placeholder",
   src:"images/placeholder.gif",
   alt:"my image gallery"})
   .appendTo($("body"));
// $("<p></p>").attr("id","description").text("Choose an image").appendTo($("body"));
$("<p></p>").attr("id","description")
   .text("Choose an image").insertAfter($("#placeholder"));
}

In preparePlaceholder(), la funzione $("<img></img>") è usata per costruire un elemento <img> a cui si inizializzano contemporaneamente gli attributi id, src e alt con il comando attr() ; successivamente l'elemento è inserito come ultimo tag all'interno di <body> per effetto di appendTo(). Analogamente, si crea un elemento <p>, si inizializza l'attributo id con attr() e si inizializza il testo del paragrafo con text(). Con il comando insertAfter() il paragrafo è posto dopo il tag <img> appena inserito (che ha id ="placeholder").

Si noti che il codice insertAfter($("#placeholder")) è equivalente al codice appendTo($("body")) .

function prepareGallery() {
$('#imagegallery a').bind("click",function() {
   return showPic(this);
   })
   .keypress(function() {
   return showPic(this);
   });

}

La funzione prepareGallery() determina il comportamento dei link che si trovano all'interno dell'elemento <ul id="imagegallery">, stabilendo che al click del mouse (o alla pressione di un tasto) sia eseguita la funzione showPic() che esegue la visualizzazione dell'immagine selezionata. Si noti che i due metodi bind() e keypress() sono concatenati perché bind() restituisce come valore l'insieme $('#imagegallery a') .

La riga

$('#placeholder').attr("src",$(whichpic).attr("href"));

assegna all'attributo src del tag <img id="placeholder" > il valore dell'attributo href del link cliccato, restituito da $(whichpic).attr("href") .

La riga di codice

$('#description').html(text);

assegna al paragrafo <p id="description" > il valore dell'attributo title del link cliccato, memorizzato nella variabile text.

Infine, il codice seguente provoca l'esecuzione delle funzioni preparePlaceholder() e prepareGallery() quando il documento è stato caricato dal browser.

$(document).ready(function () {
preparePlaceholder();
prepareGallery();
});