aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare.

Transcript

1 Capitolo 6 jquery Negli ultimi anni è stata rilasciata una mole incalcolabile di framework JavaScript, più o meno completi, realizzati per supportare nel miglior modo possibile lo sviluppatore web aiutandolo non solo per un più rapido sviluppo delle applicazioni, ma anche per avere un architettura che gli avrebbe garantito la massima 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 (capitolo 5 nella pagina 29) 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 (nel sito ufficiale si legge jquery is designed to change the way that you write JavaScript [12]) jquery è stato progettato per modificare il modo in cui si programma in Java- Script, ed è senza dubbio vero. Le Figura 6.1: Il logo di jquery 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 uno sviluppatore. 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 è la 1.3.x che presenta molte caratteristiche che la rendono uno dei framework più stabili e più utilizzati in produzione su molti server web. Vari siti web presentano comodi tutorial che facilitano la comprensione del framework sia per utenti dummies con JavaScript e con architetture di questo genere, sia per programmatori esperti che possono in poco tempo apprendere ed utilizzare jquery. Molto utili, ad esempio, la serie di filmati in [14]. La principale innovazione portata da questo framework è la cosiddetta chainability (concatenabilità): dato che 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. La riga di codice, ad esempio, ( d i v#c o n t e n i t o r e ). a d d C l a s s ( a l e r t ). append ( da c o n t r o l l a r e ) ; prende la parte di codice delimitata dal tag div con id = contenitore ed effettua due azioni concatenate: aggiunge la classe chiamata alert, che ad esempio colora il testo di rosso; aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare. Il framework presenta diversi componenti tra di loro integrati, ognuno delegato ad un compito preciso e con un gruppo di funzioni descritte in [15]. 6.1 Core Il primo componente riguarda il comportamento generale del framework e interessa in qualche modo tutti gli altri componenti: il core. 39

2 40 CAPITOLO 6 JQUERY La principale funzione fornita da questo componente è (). Essa presenta questo nome particolare soprattutto per comodità (è una delle funzioni più invocate), e anche per analogia allo standard creato da un altro framework molto noto, Prototype, che utilizza questo costrutto al posto del più prolisso document.getelementbyid(). Questa funzione, oltre a facilitare la selezione di elementi HTML già esistenti, permette di creare elementi on-the-fly tramite una semplice riga: ( p>h e l l o 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. 6.2 Selettori Una delle principali innovazioni portate dal framework riguarda la modalità di selezione degli elementi HTML della pagina. Essa viene effettuata tramite i cosiddetti 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 possono essere considerati 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. Ne 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 parent 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. 6.3 Attributi Tramite JQuery è possibile modificare gli attributi degli elementi HTML durante l esecuzione dell applicazione con funzioni che facilitano l aggiunta, la modifica e l eliminazione degli attributi. Alcune funzioni modificano gli attributi passando come parametro il nome o l id dell elemento, altre passando come parametro un tag (e quindi agirà su tutti i tag di quel tipo), altre ancora una combinazione di questi. Ecco alcuni esempi: ( a. google ). a t t r ( h r e f, h t t p : / /www. g o o g l e. com ) ; ( a#home ). a d d C l a s s ( s e l e c t e d ) ; a l e r t ( ( i n p u t#name ). v a l ( ) ) ; ( div ). t e x t ( Nuovo contenuto ) ; 1. la prima riga definisce dove devono puntare i links di classe google;

3 6 4 ATTRAVERSAMENTO la seconda aggiunge la classe selected al link chiamato home; 3. la terza fa partire un window.alert con la stringa del valore scritto nell input chiamato name; 4. la quarta sostituisce il contenuto di tutti i tag div con la stringa Nuovo contenuto. 6.4 Attraversamento Questo componente espone un set di funzioni utili per muoversi attraverso il DOM, per accedere ad elementi specifici o ad un array, diviso in 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 corrispondono ad 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 canonici 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. 6.5 Manipolazione Con alcune funzioni si è 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 e di sostituirne di esistenti con nuovi e addirittura di clonarli. 6.6 CSS Questo set di funzioni permette di modificare le caratteristiche grafiche di ciascun elemento HTML della pagina. Anche queste 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 come ad esempio width() e height(). 6.7 Eventi Gli eventi permettono di associare i comportamenti dell utente con una risposta da parte dell applicazione che verrà eseguita in automatico nel momento in cui l evento si verifica. jquery gestisce questo componente in maniera abbastanza semplice, fornendo funzioni 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. Per l assegnazione di funzioni di callback basta invocare l helper sull elemento interessato passandogli come parametro la funzione creata: c l k C a l l b a c k = f u n c t i o n ( ) { a l e r t ( you c l i c k e d me ) ; } ; d b l c l k C a l l b a c k = f u n c t i o n ( ) { a l e r t ( you double c l i c k e d me ) ; } ; ( d i v#l i n k ). c l i c k ( c l k C a l l b a c k ) ; ( d i v#l i n k ). c l i c k ( d b l c l k C a l l b a c k ) ; 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 ). c l i c k ( f u n c t i o n ( e v e n t ) { ( e v e n t. t a r g e t ). a d d C l a s s ( s e l e c t e d ) ; }) ;

4 42 CAPITOLO 6 JQUERY 6.8 Effetti 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, ecc.) e dal valore di partenza e quello di arrivo (un semplice esempio si trova in [16]). 6.9 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. Un sottoinsieme di queste funzioni riguarda le Figura 6.2: Il calendario usato nel QuASE è un esempio di widget che si possono trovare in [17] richieste AJAX ed espone svariate funzioni per effettuare richieste al server (utilizzando i metodi 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. Un 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 od 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 Utilities Questo componente presenta alcune funzioni che secondo gli sviluppatori sarebbero dovute essere integrate nell insieme delle funzioni standard del linguaggio, ma che tuttavia non esistono. Esempi sono la funzione di trim() sulle stringhe (per rimuovere gli spazi 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 User Interface Questo componente 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 [17]. In poche parole 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 all utente (shadow, magnifier).

5 6 11 USER INTERFACE 43 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).