Il progetto jQuery

jQuery, Un framework sviluppato da John Resig a partire dal 2006 con il preciso intento di rendere il codice più sintetico e in grado di offrire un insieme 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.

Tutto ruota attorno all'oggetto/funzione jQuery a sua volta abbreviato(o alias) in $

jQuery("#mioId")
//Un oggetto jQuery
$("#mioId");
//Lo stesso oggetto richiamato
con la sua più comoda abbreviazione

Una caratteristica importante, è che molti metodi di jQuery sono concatenabili, e rendono la scrittura e la lettura del codice molto più proficua e lineare:

$("#mioLink").text("Nuovo testo").css("color","red");
//cambio il testo del link e il colore

I selettori

Una delle principali innovazioni portate dal framework jQuery
riguarda la modalità di selezione degli elementi HTML della pagina.
Essa viene effettuata tramite i selettori:
strutture che permettono di selezionare uno o più elementi della pagina,
in base al nome del tag, alla gerarchia, agli attributi e in base al contenuto.

Selettori, come quelli che i fogli di stile CSS usano per impostare le caratteristiche grafiche di formattazione della pagina web.

La funzione JQuery che permette di selezionare gli elementi della pagina HtmL è $(),
in funzione di una stringa rappresentante i selettori scelti.

In JQuery esistono ben 9 tipologie differenti di selettori e di filtri,
ognuna specifica nel proprio ambito:

1. selettori base: Selezionano gli elementi in base l'id, il tag name o la classe di appartenenza;


2. selettori gerarchici: Selezionano gli elementi in base all' organizzazione gerarchica della pagina;


3. filtri base: Filtrano gli elementi in base alla posizione e all'ordine che essi hanno nella pagina;


4. filtri sul contenuto: Filtrano gli elementi in base al loro contenuto (sia testo che altro);


5. filtri sulla visibilità: Filtrano gli elementi in base alla loro visibilità nella pagina;


6. filtri sugli attributi: Filtrano gli elementi in base a caratteristiche dei loro attributi;


7. filtri sugli elementi child: Filtrano gli elementi in base agli elementi child(figli)
   del padre che li contiene;


8. selettori per form: Selezionano gli elementi in base al loro impiego all'interno del form;


9. filtri per form: Filtrano gli elementi appartenenti al form in base al loro stato attuale.

La gestione degli attributi

Con 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 attributi.

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

- e funzioni più specifiche per attività ricorrenti
(classi CSS, testo di un elemento o al suo valore se riguarda un form)

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 marcano un determinato selettore e
is()
che controlla se almeno un elemento della lista presenta caratteristiche particolari.

Le funzioni di ricerca
permettono 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.

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,
del tipo: css()
- e quelli che si rifanno a delle proprietà particolari
del tipo: 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 di callback 'chiamata di ritorno' 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:
ovvero per ciascun evento è infatti definita una funzione di helper da utilizzare.
Per l'assegnazione di funzioni di callback basta invocare l'helper
sull'elemento interessato passandogli come parametro la funzione creata.

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.

Gli effetti grafici

Oltre alle funzioni incaricate di nascondere o rendere visibile un elemento,
il componente presenta due effetti principali (il fade e lo sliding) e altre funzioni di utilità.
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 a quello di arrivo.

L'interattività con AjaX

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 risposta.

Quest'ultima può essere spedita dal server sotto forma di frammento HtmL
da caricare in un container presente sul sito,
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'altro 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 utili funzioni:

- La funzione 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 altro ancora.

JQuery User Interface

Questo componente, permette di realizzare interfacce grafiche ricche di strumenti e widget.

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).