Salve a tutti.
Con questo post, inizio una serie di mini-tutorial sull’utilizzo di jQuery. Non sto a tediarvi sulla storia, le potenzialità, i pregi e i difetti eccetera: potere trovare tutto a partire dalla relativa pagina su Wikipedia.
Mi limito ad elencare alcune caratteristiche che trovo interessanti:
- è un framework completo e compatto (24k per la versione compressa)
- permette, di base, molteplici azioni e interazioninelle pagine web :
- animazioni
- interazione Ajax
- interrogazione e manipolazione di ogni aspetto della pagina web
- estendibile tramite numerosi plugin
- cross-brower (Firefox 2+, IE6+, Safari 3+, Opera 9+, Chrome)
- CSS3 compliant
In questa mini-serie di post non ho la pretesa di essere esauriente né di illuminarvi su tutti gli aspetti di jQuery: servirebbe un intero libro per farlo. Il mio intento è di illustrare come utilizzarlo in esempi classici, in situazioni reali, e far vedere che con poche righe di codice, si possono fare cose un sacco web 2.0 ! 
e anche risparmiare molto codice…. d’altronde il motto che si legge nel logo è “write less, do more.”
Nota: essendo i tutorial incentrati sul framework jQuery, prendo per assodato che il lettore conosca gli altri linguaggi “di contorno” al di fuori di questa libreria: infatti gli esempi includeranno HTML, CSS, Javascript e, a volte, anche PHP e SQL.
Tutorial 1: manipolazione del DOM
In questo primo tutorial ci concentriamo sulla creazione dell’ambiente di lavoro e sul come impostare correttamente una pagina che possa ospitare il nostro codice.
Come esempio, abbiamo un elenco, una lista di film che ci permetterà di applicare dinamismo, effetti e quant’altro.
Materiale di lavoro
Prima di iniziare, allestiamo lo spazio di lavoro e procuriamoci il materiale che ci serve.
Per questo esempio, possiamo addirittura fare a meno di un web server (anche se è meglio prepararsi ad utilizzarne uno): è sufficiente crearsi una cartella nella quale inserire il materiale. Per gli utenti GNU/Linuxsi può creare in /home/mioutente/ la cartella jQuery_test. Al suo interno, creiamo 2 sottocartelle separate: img e js; nella prima inseriremo le nostre immagini, nella seconda file in Javascript.
Ora scarichiamo la libreria compressa di jQuery (salva con nome sul link precedente) salvandola in js. Infine inseriamo questa immagine in img.
Iniziamo con l’HTML
Come esempio ho pensato alla lista di film. I dati non sono inseriti in una tabella, ma in una lista. Come potete leggere di seguito, il file contiene una banalissima lista non ordinata di elementi; ogni elemento contiene diversi blocchi DIV a rappresentare i diversi elementi in esso contenuti, che altro non sono che i dati del film stesso.
<html> <head> <title>Proviamo jQuery</title> </head> <body> <h1>Una lista interattiva</h1> <ul> <li><div>Matrix</div> <div>Andy e Larry Wachowski</div> <div>1999</div></li> <li><div>Quarto potere</div> <div>Orson Welles</div> <div>1941</div></li> <li><div>Fantasia</div> <div>vari</div> <div>1940</div></li> <li><div>L'estate di Kikujiro</div> <div>Takeshi Kitano</div> <div>1999</div></li> </ul> </body>Potete vedere l’esempio qui.
Aggiungiamo ora un po’ di stile alla nostra altrimenti triste pagina: giusto poche righe di CSS nel tag STYLE all’interno dell’header della pagina. Perciò, sotto il tag TITLE inseriamo:
<style> body * { font-family: Verdana; } ul { list-style: none; width: 400px } ul li { margin-bottom: 15px; background-color: #EFEFEF; padding: 5px; -moz-border-radius: 5px; border: 1px solid #AAAAAA; } .titolo { font-weight: bold; font-size: 1.5em; } .anno { text-align: right; background-color: #DDDDDD;} </style> ottenendo, così, il file HTML sul quale poter lavorare.
Salvando il file nella cartella di lavoro ed aprendolo con un browser (vi suggerisco Firefox), dovreste ottenere qualcosa che assomiglia all’immagine accanto.
Fino ad ora, nulla di speciale: abbiamo creato solo una paginetta HTML con un piccolo foglio di stile.
Ora viene il bello: entriamo nel vivo di jQuery !!
Manipolazione del codice HTML
Innanzitutto inseriamo nella pagina un link alla libreria: fondamentale per ogni pagina in cui necessitiamo di utilizzare le funzionalità del framewrok.
Aggiungiamo così, tra il tag TITLE e il tag STYLE questa riga:
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>Ora siamo davvero pronti per inserire codice. Ricaricate la pagina modificata e verificate che non non siano avvenuti errori di caricamento della libreia. Potete farlo aprendo la console degli errori in Firefox: la trovate nel menù Strumenti oppure potete aprirla premendo la combinazione CTRL + SHIFT + J: questa console diventerà presto un’amica inseparabile .
Come forse alcuni di voi si saranno accorti, ho definito, nella sezione STYLE, lo stile per le classi titolo e anno, eppure non sono state utilizzate nel codice. Andiamo ad utilizzare jQuery per far sì che al primo dei tag DIV di ogni elemento di lista venga assegnato la classe titolo e, visto che ci siamo, facciamo lo stesso per l’anno di uscita del film.
Subito prima del tag BODY (che apre il corpo della pagina), andiamo ad inserire queste poche righe:
<script type="text/javascript"> $(document).ready(function(){ $("ul>li>div:first-child").addClass("titolo"); $("ul>li>div:last-child").addClass("anno"); }); </script> Per vedere il risultato, fate click qui.
Cosa è successo con queste 3 righe di codice ? Possiamo notare che il titolo di ogni film ora è più evidente e l’anno è allineato a destra ed ha un colore di sfondo… in pratica sono state applicate le suddette classi al codice HTML senza averlo realmente modificato. Come funziona la sintassi ?
Innanzitutto notiamo che, per coloro che non hanno mai usato questo strumento, si può tentare di leggere ad alto livello il codice: document.ready -> ul > li > div:first-child.addClass(titolo). Cosa significa ? Che, quando la pagina HTML è stata caricata, venga aggiunta la classe “titolo” (vale a dire inserire nel tag l’attributo class=”titolo”) agli elementi con queste condizioni:un tag UL con all’interno un tag LI e, al suo interno, il primo tag DIV. Nonostante la sintassi sia un po’ particolare, quantomeno è sufficientemente leggibile.
Entriamo un po’ più nei dettagli.
$(document).ready()
L’oggetto principale, di nome jQuery, è genericamente utilizzato tramite il suo alias, il carattere $, per mantenere uniformità con la libreria Prototype. (tratto da Wikipedia).
In pratica, ogni istruzioni che inizia con il simbolo $ sta invocando la classe jQuery. Questa funziona genericamente così: dopo il $ si inserisce, tra parentesi, un selettore, vale a dire un modo (passatemi il termine) per rintracciare uno o più elementi nella pagina web. Una volta chiusa la parentesi, con il . (punto) si invoca il metodo, cioè la funzione da applicare all’oggetto selezionato.
Se sono stato decentemente chiaro, si dovrebbe capire quasi completamente la prima riga: si chiede alla classe jQuery di invocare il metodo ready() all’oggetto document; come argomento, ready, accetta una funzione il cui codice si trova descritto tra parentesi graffe.
Chiaro ? No ? Bhè, i tutorial su jQuery iniziano tutti così… c’è scritto anche nella documentazione ufficiale !
This is the first thing to learn about jQuery: if you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
Come avete capito, questo costrutto (che riutilizzerete quasi sempre), serve ad assicurarci che il codice contenuto sia eseguito solo quando la pagina è stata completamente caricata e creata nel browser. Devono esserci tutti gli elementi nel momento in cui si esegue codice con jQuery e, in generale, Javascript… e questo qualcosa è il codice contenuto tra le parentesi graffe:
$(selettore).addClass()
I selettori servono per indicare a jQuery su quali elementi applicare i seguenti metodi. Ce ne sono di molti tipi, e possono essere consultati nell’apposita sezione della documentazione. Nelle 2 righe all’interno del blocco document.ready, i due selettori che ho utilizzato sono piuttosto simili e possono essere letti (da destra verso sinistra) così: si richiede di aggiungere la classe titolo agli elementi il primo tag DIV contenuto all’interno di un tag LI che si trovi all’interno di un tag UL. Per questo motivo, se aggiungiamo altri elementi all’interno della nostra lista con almeno un tag DIV all’interno del tag LI, a questo sarà aggiunta la classe titolo.
Così, con un’istruzione soltanto, abbiamo settato la classe per tutti i titoli all’interno della lista, senza doverlo inserire nel codice HTML; in questo caso sono solamente 4 gli elementi coinvolti, ma immaginate di applicare questo sistema ad una lista di centinaia di elementi quanto codice avete risparmiato. ….e meno codice = caricamento pagina web più veloce.
Volendo, potremmo sostituire l’ultimo comando con questo:
$("ul>li>div+div+div").addClass("anno");Cosa cambia con il precedente ? Premesso che il simbolo + utilizzat nei selettori indica un tag adiacente (e quindi, ovviamente, allo stesso livello di quello che lo precede) in questo caso stiamo istruendo jQuery ad impostare la classe anno al 3° dei tre elementi DIV adiacenti. Alcuni particolari: con il selettore + indico che gli elementi siano adiacenti, quindi se tra 2 elementi div vi fosse un tag SPAN questo selettore non si applicherebbe. Volendo potremmo utilizzare il simbolo ~ per indicare tag fratelli senza vincoli di vicinanza.
A parte questo, quest’ultima soluzione è meno buona della precedente. Infatti, se volessimo aggiungere altri elementi all’interno della “scheda del film” questo selettore andrebbe modificato, mentre utilizzando il selettore “ul>li>div:last-child” ho l’unico vincolo di dover lasciare la data come ultimo blocco DIV e, questo, continuerà a comportarsi così come ora.
Conclusione
Spero non vi siate troppo annoiati ma, quando si inizia dalle basi l’avvio è sempre un po’ lento. Ma credo che, anche se in minima parte, abbiate potuto subodorare le potenzialità di questo modo di programmare: con poche istruzioni potete modificare e rendere vive le vostre pagine web.
Lo vedremo meglio nel prossimo tutorial in cui aggiungeremo dei semplici quanto efficaci effetti speciali: una breve animazione per aprire e chiudere alcuni dettagli della lista che abbiamo visto in questo esempio.
Gli altri tutorial
- primi passi con jQuery (questo tutorial)
- animazioni e dinamicità con jQuery
- creare una lista dati dinamica con jQuery (in preparazione)
#1 di cesare il 12 gennaio 2012 - 14:34
Dopo aver consumato la tastiera per cercare due parole chiare su jquery ho trivato il tuo sito: Complimenti sei molto preparato e sai spiegare in modo sublime.
Grazie.
cesare
#2 di bubbakk il 13 gennaio 2012 - 13:34
Grazie. Sono contento che ti sia stato d’aiuto.
Ciao