Negli ultimi anni è stata rilasciata una mole quasi infinita di framework JavaScript, più o
meno completi, realizzati per supportare nel miglior modo possibile lo sviluppatore web
garantedogli non solo un più rapido sviluppo delle applicazioni ma anche, e forse
soprattutto, la sicurezza di avere un'architettura che gli avrebbe garantito una completa
compatibilità con tutti i principali browser moderni.
Esistono framework leggeri orientati a
compiti specifici (tra i quali per esempio il DOM traversing, la creazione di interfacce per
l'utilizzo di AJAX o la realizzazione di tabelle partendo da semplici file XML) e framework
più complessi che non solo facilitano la scrittura di componenti specifici, ma modificano
strutturalmente il modo in cui deve essere sviluppata l'applicazione client-side.
JQuery si inserisce tra quest'ultimi.
Secondo gli stessi sviluppatori infatti (JQuery is designed to change the way that you
write JavaScript) JQuery è stato progettato per modificare il modo in cui si
programma in JavaScript. Questo è senza dubbio vero. Le principali funzioni JavaScript (e i problemi ad
esse associati) sono state sostituite da strutture più cross-browser che facilitano non di
poco la vita di un coder.
Sempre secondo uno dei project-manager, JQuery permetterà di
riassumere 20 righe di tedious DOM JavaScript in massimo 2 o 3 righe permettendo un
risparmio di tempo e un guadagno in leggibilità.
Attualmente, l'ultima versione, rilasciata il 16 settembre, è la 1.2.1 che, nonostante la sua "giovane età", presenta molte
caratteristiche che rendono JQuery uno dei framework più stabili e più utilizzati in produzione su molti server web.
Sul sito ufficiale del progetto sono presenti tre diversi file scaricabili:
- un versione compressa con GZip, comoda da usare in produzione dato il suo peso in kb ridotto;
- una versione "packed" per chi non può usufruire della compressione;
- una versione normale da utilizzare in fase di sviluppo, debug e test.
Il sito web presenta anche comodi tutorial che facilitano la comprensione del framework sia per utenti alle prime armi con JavaScript e con architetture
di questo genere, sia per programmatori esperti che possono in poco tempo apprendere ed utilizzare JQuery.
La principale innovazione portata da questo framework è la cosidetta chainability
(traducibile, ma anche no, concatenabilità). Questa caratteristica, in
quanto tutti i metodi di JQuery ritornano lo stesso oggetto sul quale è stato invocato il
metodo definito dal framework, permette di concatenare metodi in un modo molto affine alla teoria della
programmazione ad oggetti. Giusto per fare un esempio:
$('div#content').addClass('current').html('bla bla bla').width(100);
Con questa semplice riga in realtà effettuiamo ben tre azioni concatenate che influenzano
tutte lo stesso oggetto: il div con id uguale a content.
Il framework presenta 11 pseudo-componenti tra di loro integrati, ognuno delegato ad un compito preciso. Questo articolo (primo di una serie dedicata a JQuery)
presenterà questi componenti da un punto di vista teorico, un passo necessario prima di inizare
ad utilizzare la piattaforma, rimandando per gli aspetti pratici alla documentazione ufficiale.
JQuery core
Il primo componente analizzato riguarda il comportamento generale del framework e interessa in qualche modo tutti gli
altri componenti.
La principale funzione fornita da questo componente è $().
Essa presenta questo strano nome soprattutto per comodità (sarà una
delle funzioni più invocate nelle vostre apps) e per rispecchiare lo "standard" creato da un
altro framework molto noto, Prototype, che utilizzava questo costrutto al posto del prolisso
document.getElementById(). Questa funzione, oltre a facilitare la selezione di elementi HTML già esistenti,
permette di creare elementi on-the-fly tramite una stringa HTML:
$('<p>Hello World</p>').appendTo('body');
Il core fornisce funzioni che si riferiscono all'oggetto Element (e agli array di Element) definito dallo stesso framework che incapsula
l'oggetto standard HtmlElement fornendogli ulteriori funzioni e facilitazioni, tra le quali l'iteratore each
Questo componente presenta anche funzioni di utilità per la gestione di plugin e di eventuali conflitti con
altre librerie JavaScript.
I selettori
Una delle principali innovazioni portate dal framework riguarda la modalità di selezione
degli elementi HTML della pagina. Essa viene effettuata tramite i cosidetti
selettori: strutture che permettono di selezionare uno o più elementi della
pagina in base al nome del tag, alla gerarchia, agli attributi e perfino in base al
contenuto.
Un esempio di selettori, anche se meno completi rispetto a questi, sono quelli usati nei
fogli di stile CSS per impostare le caratteristiche grafiche di un set di elementi.
Come detto in precedenza, la funzione JQuery che permette di selezionare elementi HTML è $() che necessita di una stringa rappresentante i selettori scelti.
In JQuery esistono ben 9 tipologie differenti di selettori e di filtri, ognuna specifica per il proprio ambito:
- selettori base: permettono di selezionare gli elementi in base a caratteristiche chiave come l'id,
il tag name o la classe di appartenenza; - selettori gerarchici: permettono di selezionare gli elementi in base alla organizzazione gerarchica
della pagina; - filtri base: permettono di filtrare gli elementi in base alla posizione e all'ordine che essi hanno nella pagina;
- filtri sul contenuto: permettono di filtrare gli elementi in base al loro contenuto (sia testo che non);
- filtri sulla visibilità: permettono di filtrare gli elementi in base alla loro visibilità nella pagina;
- filtri sugli attributi: permettono di filtrare gli elementi in base ad alcune caratteristiche dei loro attributi;
- filtri sugli elementi child: permettono di filtrare gli elementi in base agli elementi child del padre che li contiene;
- selettori per form: permettono di selezionare gli elementi in base al loro impiego all'interno di form;
- filtri per form: permettono di filtrare gli elementi appartenenti ai form in base al loro stato attuale.
La gestione degli attributi
Ovviamente, come "accadeva" già in JavaScript, anche tramite JQuery è possibile modificare gli attributi degli elementi HTML
durante l'esecuzione dell'applicazione. Questo componente espone infatti funzioni che facilitano l'aggiunta, la modifica
e l'eliminazione degli attributes.
Il set di funzioni di questo componente è diviso in due: esistono funzioni generali che modificano qualsiasi attributo passando
il nome dello stesso come un parametro:
$('a.google').attr('href','http://www.google.com');
e funzioni più specifiche che fungono da helper per attività ricorrenti (riferite alle classi CSS, al testo contenuto in un elemento o
al suo valore se riguarda un form):
$('a#home').addClass('selected');
alert($('input#name').val());
$('div').text('Nuovo contenuto...')
Le funzioni di navigazione
Questo componente espone un set di funzioni utili per "navigare" attraverso il DOM, per accedere ad elementi specifici o ad
array. Queste funzioni appartengono a due categorie differenti: le funzioni di filtro e quelle di ricerca.
Le funzioni di filtro permettono appunto di effettuare delle selezioni su un set di elementi, estrapolando da essi gli
elementi ricercati. Tra le funzioni principali ricordiamo hasClass() che controlla se gli elementi appartengono
o meno ad una classe, filter() per rimuovere elementi che matchano un determinato selettore e is() che controlla
se almeno un elemento della lista presenta caratteristiche particolari.
La seconda categoria di funzioni, quelle di ricerca, permette di muoversi tra i diversi elementi rispecchiando l'architettura
e il DOM della pagina. Oltre ai "soliti" metodi per ottenere elementi parent, children e sibling, la funzione add() permette
di aggiungere ad un set altri elementi HTML identificandoli con un selettore specifico.
Le funzioni di manipolazione del DOM
Con le seguenti funzioni saremo in grado non solo di modificare il contenuto degli elementi selezionati, ma anche di inserine
di nuovi in punti specifici della pagina, prima, dopo o intorno a un elemento, di eliminarne, di sostituirne di esistenti con nuovi
e addirittura di clonarli.
Nell'esempio successivo andremo a costruire un markup simile a questo:
<div> id='container'>
<div> id='box'
Qui ci metto il testo del box
< img src='img.jpg' />
</div>
Qui ci metto il testo del div
</div>
L'esempio è volutamente fatto su più righe per scopi didattici, ma poteva essere riassunto in un numero
di righe minori:
$('body').append('<div> id='container'></div>');
$('div#id').text('Qui ci metto il testo del div').prepend('<div> id='box'></div>')
$('div#id').text('Qui ci metto il testo del box').append(' < img src='img.jpg' />')
La modifica dei CSS
Questo set di funzioni, come è facilmente intuibile, permette di modificare le caratteristiche grafiche
di ciascun elemento HTML della pagina. Le funzioni sono divise in due sezioni: quelle che permettono di modificare
in maniera generale qualsiasi attributo CSS (per esempio css()) e gli helper che si rifanno a delle proprietà
particolari (per esempio width() e height()).
Gli eventi
Gli eventi permettono di associare i comportamenti dell'utente con una risposta da parte dell'applicazione. A ciascun evento
può essere associata una azione callback che verrà eseguita in automatico nel momento in cui l'evento si verifica.
JQuery gestisce questo componente in maniera abbastanza semplice, fornendo due tipologie di funzioni: le funzione di gestione
degli eventi e le funzioni helper. Le prime permettono di associare a determinati elementi ed eventi una funzione callback, mentre
le seconde sono semplicemente delle derivazioni delle prime: per ciascun evento è infatti definita una funzione di helper da utilizzare.
L'assegnazione di funzioni di callback è quasi banale. Basta invocare l'helper sull'elemento interessato passandogli come parametro
la funzione creata:
clkCallback = function() { alert ('you clicked me'); };
dblclkCallback = function() { alert ('you double-clicked me'); };
$('div#link').click(clkCallback);
$('div#link').click(dblclkCallback);
All'interno della funzione callback è possibile fare riferimento all'oggetto stesso tramite $(this).
Se invece siamo interessati ad ottenere maggiori informazioni sull'evento (per esempio l'oggetto target)
possiamo utilizzare l'oggetto event che deve essere passato come parametro alla funzione callback:
$('body').click(function(event) {
$(event.target).addClass('selected');
});
Gli effetti grafici
Una delle componenti più interessanti del framework è appunto quella degli effetti visivi che possono rendere la nostra
applicazione sempre più simile ad un'applicazione desktop.
Oltre alle funzioni incaricate di nascondere o rendere visibile un elemento, il componente presenta due effetti principali
(il fade e lo sliding) e alcune funzioni di utilità per creare i propri eventi partendo da una struttura consolidata.
Tra queste ultime è da segnalare la funzione animate() che permette di creare la propria animazione
partendo dall'attributo che dovrà essere animato (altezza, larghezza, posizione nella pagina, colore ...) e dal valore di
partenza e quello di arrivo.
L'interattività con AJAX
JQuery presenta alcune funzioni per facilitare la creazione di applicazioni che fanno uso della tecnologia AJAX, rendendo
possibili richieste asincrone e invisibili per l'utente. Il set di funzioni, molto completo, è scomponibile in due
sottoinsiemi.
Il primo sottoinsieme riguarda le richieste AJAX ed espone svariate funzioni per effettuare richieste al server (utilizzando
entrambi i metodi HTTP POST e GET) e per gestire la response. Quest'ultima può essere spedita dal server
sotto forma di frammento HTML da caricare in un container presente sul sito, di codice JavaScript da eseguire o di
codice JSON (JavaScript Object Notation) in modo da rappresentare oggetti più complessi. Per ognuno di questi utilizzi
il framework mette a disposizione funzioni specifiche.
L'altoa micro-componente invece si occupa di gestire tutto ciò che riguarda gli eventi (e i relativi callback)
scatenati da funzioni AJAX. È infatti possibile assegnare funzioni di callback da eseguire prima o dopo ogni richiesta
AJAX o in caso di successo o di errore. Questo sottoinsieme permette di assegnare comportamenti applicativi in maniera globale
a tutte le richieste AJAX effettuate; per assegnare invece callback specifici per richieste particolari si utilizzano le
funzioni citate in precedenza.
Il componente di utility
Questo componente presenta alcune funzioni che secondo gli sviluppatori sarebbero dovute essere integrate nell'insieme
delle funzioni standard del linguaggio, ma che per ragioni a loro (e a noi) sconosciute non esistono. Per rendersi conto
dell'idea basta citare l'utile funzione di trim() sulle stringhe (rimuovere gli spazi di troppo all'inizio ed alla fine
della stringa), la funzione each che fa da iteratore su un qualsiasi oggetto od array, un metodo standardizzato
per utilizzare l'ereditarietà in JavaScript e molto altro ancora.
JQuery User Interface
Questo componente, realizzato da poco, permette di realizzare interfacce grafiche ricche di strumenti e widget. Essendo un
componente più complesso dei precedenti, gli sviluppatori ci hanno dedicato un sito completo di snippet ed esempi
funzionanti. Per analizzare il modulo in maniera completa servirebbe un intero tutorial e quindi mi limiterò ad introdurlo
sotto il punto di vista teorico.
La User Interface viene scomposta in 3 sotto componenti:
- mouse interaction: un insieme di widget gestibili e influenzabili tramite il movimento del mouse
(draggables, droppables, resizables, sortables e selectables); - user interface extensions: un insieme di widget che permettono di realizzare interfacce web complesse
e usabili allo stesso tempo che trasformano la web application in una normale applicazione desktop (dialog, calendar, accordion
slider, table e tabs); - effects: un insieme di funzioni che permettono di realizzare effetti grafici sull'interfaccia offerta
al utente (shadow, magnifier).
Come espressamente sottolineato sul sito ufficiale del framework, questo componente non è ancora del tutto completo,
mancano infatti componenti grafici aggiuntivi che verranno implementati in seguito (tra i quali un Rich Text Editor, un menu,
una toolbar, un gestore di tree e altri ancora).
Nei prossimi articoli cerceremo di realizzare una vera applicazione AJAX utilizzando questi componenti, integrandoli tra loro per capire le enormi
potenzialità offerte da un framework come JQuery.
