Una rubrica con... MySQL e PHP

Ricordate il database realizzato con MySQL per una rubrica di contatti telefonici? Ho realizzato una semplice interfaccia con PHP e funzioni JavaScript per contrallare l'input. La cartella con tutti i file utili all'applicazione è scaricabile a questo indirizzo. Per rispettare l'input atteso dal database MySQL, nella pagina aggiungi.html, ho pensato a delle funzioni JavaScript che, attraverso l'uso di espressioni regolari, stabiliscono la presenza o meno di un possibile input. La struttura seguita è più o meno la seguente (per i numeri cambia il pattern in [0-9]{6,30}):

cognome=document.getElementById("NOME_CAMPO").value;
pattern=new RegExp("[a-zA-Z]{2,30}");
if (pattern.test(cognome)) return true;
else return false;

Il bottone per l'invio dei dati viene allora abilitato solo se le funzioni che controllano i campi dati del form (nome, cognome e numero di telefono) danno esito positivo! Tale controllo è poi necessario anche in fase di ricerca, nella pagina cerca.html. Particolare attenzione va infine fatta in fase di inserimento dati all'interno del database. Un contatto può avere uno o più numeri di telefoni! Pertanto, durante l'aggiunta di un numero occorre stabilire prima la presenza nel contatto all'interno della tabella contatti e successivamente procedere con l'aggiunta del nominativo, se quest'ultimo non è stato già inserito! Verificando che il numero sia effettivamente un nuovo numero per il contatto indicato. Tutto questo avviene all'interno del file aggiungi.php. Per eseguire l'applicazione su Apache2 occorre collocare l'intera cartella nella home del server (riga DocumenRoot del file /etc/apache2/sites-available/default) oppure effetuarne un collegamento simbolico in /etc/apache2/sites-enabled. Vi lascio qualche immagine dell'applicazione:

JavaScript: script.aculo.us, effetti derivati

Dopo aver visto gli effetti principali implementati dalla libreria aculous ci occuperemo adesso degli effetti derivati. Per ciascun effetto fornirò il nome della funzione, una breve descrizione, alcune possibili opzioni e un link che punta a un documento web con un esempio.

Effect.Appear

Fa comparire un elemento, la cui visibilità, attraverso un foglio di stile in linea o comunque presente nel documento stesso (quindi non esterno), è stata impostata su display: none. La sintassi è la seguente:

Effect.Appear('id_of_element');

Alcune possibili opzioni:

• duration: durata (in secondi) dell'effetto;
• from: imposta, in un intervallo che va da 0.0 ad 1.0 la proprietà di opacità iniziale;
• to: imposta, in un intervallo che va da 0.0 ad 1.0 la proprietà di opacità finale;

Qui trovate un esempio;

Effect.BlindDown

Questo effetto simula la discesa di una finestra, o meglio box dell'elemento, tenuta nascosta con la proprietà display: none. Anche in questo caso il foglio di stile che descrive l'elemento non deve essere esterno. La sintassi è la seguente:

Effect.BlindDown('id_of_element');

Alcune possibili opzioni:

• scaleX: valore logico che indica se scalare l'elemento orizzontalmente. Il valore passato di default alla funzione è false;
• scaleY: valore logico che indica se scalare l'elemento verticalmente. Il valore passato di default alla funzione è true;
• scaleContent: valore logico che indica se scalare o meno il contenuto. Il valore passato di default alla funzione è true;
• scaleMode: indica se scalare il box contenitore (valore box) oppure il contenuto (valore contents);
• scaleFrom: indica, in un intervallo che va da 0.0 a 100.0, con che percentuale iniziale deve essere scalato l'elemento coinvolto nella transizione;
• scaleTo: indica, in un intervallo che va da 0.0 a 100.0, con che percentuale finale deve essere scalato l'elemento coinvolto nella transizione;
• duration: come per altri effetti, indica la durata (in secondi) della transizione;

Qui trovate un esempio.

Effect.BlindUp

Questo effetto viene solitamente usato con quello precedente poiché realizza la salita di un box. E' ideale per realizzare menu a comparsa. La sintassi è la seguente:

Effect.BlindUp('id_of_element');

Le opzioni viste in precedenza, quindi, valgono anche per questa funzione. Qui trovate un esempio.

Effect.DropOut

Questo effetto realizza la transazione del box e una scomparsa graduale dello stesso. La sintassi è la seguente:

Effect.DropOut('id_of_element');

Qui trovate una pagina di esempio.

Effect.Fade

Applica all'elemento l'effetto fade, una dissolvenza lenta e graduale dello stesso. La sintassi è la seguente:

Effect.Fade('id_of_element');

Alcune possibili opzioni:

• from: valore (variabile da 0.0 a 1.0) per indicare il grado di opacità iniziale;
• to: valore (variabile da 0.0 a 1.0) per indicare il grado di opacità finale;

Qui trovate una pagina di esempio.

Effect.Fold

Riduce l'elemento diminuendone prima l'altezza poi la larghezza, fino a farlo scomparire. La sintassi è la seguente:

Effect.Fold('id_of_element');

Qui trovate una pagina di esempio.

Effect.Grow

Ottimo per l'ingresso di nuovi elementi, questo effetto aumenta le dimensioni di un elemento fino alla dimensione specificata. La sintassi è la seguente:

Effect.Grow('id_of_element');

Qui trovate una pagina di esempio.

Effect.Puff

Dissolve man mano un elemento, ingrandendolo fino a farlo scomparire (come in una nuvola di fumo). La sintassi è la seguente:

Effect.Puff('id_of_element');

Alcune possibili opzioni:

• duration: la durata (in secondi) della transizione;
• from: valore (compreso fra 0.0 ed 1.0) per la trasparenza iniziale;
• to: valore (compreso fra 0.0 ed 1.0) per trasparenza finale;

Qui trovate una pagina di esempio.

Effect.Pulsate

Fa pulsare l'elemento per un numero definito di volte (di default, 5 volte). La sintassi è la seguente:

Effect.Pulsate('id_of_element');

Alcune possibili opzioni:

• duration: la durata (in secondi) dell'effetto;
• from: valore compreso fra 0.0 ed 1.0 per specificare la proprietà di trasparenza da usare durante l'esecuzione dell'effetto;
• pulses: numero di pulsazioni da eseguire per tutta la durata dell'effetto;

Qui trovate una pagina di esempio.

Effect.Shake

Scuote rapidamente l'elemento, prima a sinistra poi a destra. La sintassi è la seguente:

Effect.Shake('id_of_element');

Qui trovate una pagina di esempio.

Effect.Shrink

Riduce l'elemento a partire dall'angolo in ato a sinistra, fino a farlo scomparire. La sintassi è la seguente:

Effect.Shrink('id_of_element');

Qui trovate una pagina di esempio.

Effect.SlideDown

Simula la discesa dell'elemento, come una finestra che scorre. La sintassi è la seguente:

Effect.SlideDown('id_of_element);

Alcune possibili opzioni:

• scaleX: scala orizzontalmente, durante l'effetto, l'elemento. Il valore passato di default alla funzione è false;
• scaleY: scala verticalmente, durante l'effetto, l'elemento;
• scaleContent: scala il contenuto del box, il valore passato di default alla funzione è true;
• scaleFromCenter: inizia a scalare l'elemento a partire dal centro, il valore passato di default alla funzione è false;
• scaleMode: può essere box (valore usato di default) o contents;
• scaleFrom: indica (con un valore che va da 0.0 a 100.0) la percentuale di ingrandimento iniziale dell'elemento;
• scaleTo: indica (con un valore che va da 0.0 a 100.0) la percentuale di ingrandimento finale dell'elemento;
• duration: indica la durata (in secondi) dell'elemento;

Qui trovate una pagina di esempio.

Effect.SlideUp

E' l'effetto complementare a SlideDown e simula, pertanto, la salita dell'elemento. E' ideale per realizzare menu a comparsa. La sintassi è la seguente:

Effect.SlideUp('id_of_element');

Le opzioni viste per SlideDown sono valide anche per questa funzione. Qui trovate una pagina di esempio.

Effect.Squish

Realizza la scomparsa dell'elemento comprimendolo nell'angolo in alto a sinistra, fino a farlo scomparire. La sintassi è la seguente:

Effect.Squish('id_of_elemenet');

Qui trovate una pagina di esempio.

Effect.SwitchOff

Realizza la scomparsa dell'elemento simulando lo spegnimento di un televisore (vecchio). La sintassi è la seguente:

Effect.SwitchOff('id_of_element');

Qui trovate una pagina di esempio.

Effect.toggle

Consente di alternare con facilità gli elementi con animazione. La sintassi da usare è la seguente:

Effect.toggle('id_of_element',['appear'|'slide'|'blind'],[options])

JavaScript: script.aculo.us, effetti principali

Gli effetti Effect.Morph, Effect.Move, Effect.Opacity, Effect.Parallel, Effect.Scale e Effect.Highlight costituiscono il cuore della libreria aculous, per il modulo effects.js. Di seguito propongo la sintassi prevista da ciascuno degli effetti indicati.

Effect.Morph

Questo effetto permette di modificare le proprietà CSS di un elemento, generando quindi una transizione che porta l'elemento dallo stato iniziale (con precise proprietà CSS) a quello finale (con nuove proprietà CSS). La funzione può essere invocata seguendo la tipica sintassi di Prototype:

$('id_elemento').morph('background: white; color: gray');

oppure con:

new Effect.Morph('id_elemento',{style});

dove style è la stringa con le nuove proprietà CSS. Qui trovate un esempio. L'effetto funziona a patto di non avere le proprietà di stile in un foglio esterno!

Effect.Move

Questo effetto muove un elemento spostandone le coordinate dell'angolo superiore sinistro. Le coordinate possono essere assolute (mode: 'absolute') oppure relative (mode: 'relative') all'oggetto contenitore. La sintassi della funzione prevede come parametri le coordinate verso cui muovere l'elemento e l'opzione che specifica come esse vanno interpretate. L'opzione relative è usata di default.

new Effect.Move('warning',{x: 100, y:0, mode:'relative'})

Qui trovate un esempio.

Effect.Opacity

Questo effetto modifica la trasparenza dell'elemento (va indicato l'id dell'elemento alla funzione, come primo parametro). La proprietà viene specificata attraverso un parametro variabile nell'intervallo [0.0;1.0]. Il valore iniziale da applicare all'elemento è specificato con l'opzione from. Il valore finale, invece, con l'opzione to. L'effetto realizza, dunque, la transizione della proprietà di trasparenza dal valore from al valore to. Con l'opzione duration può essere specificata, eventualmente, la durata (in secondi) dell'effetto:

new Effect.Opacity('warning',{duration: 1, from:1.0, to: 0.5})

Qui trovate un esempio.

Effect.Scale

Questo effetto modifica le proprietà width ed height dell'elemento. Il primo parametro della funzione è come sempre l'id dell'elemento, il secondo parametro corrisponde al valore percentuale da usare come incremento per le proprietà dette all'inizio. La funzione accetta altre opzioni, fornite alla stessa attraverso un unica stringa: scaleX indica (con true, valore di default) che l'effetto va applicato alla proprietà width; scaleY indica (con true, valore di default) che l'effetto va applicato alla proprietà height; scaleContent è il valore usato di default (quindi true) dalla funzione per applicare il valore percentuale (il secondo parametro della funzione) a entrambe le proprietà; scaleFromCenter, se abilitato con true, dice di ingrandire l'elemento mantenendone la posizione nel documento; scaleMode permette di specificare con le stringhe originalHeight e originalWidth i nuovi valori dell'elemento.

new Effect.Scale('warning',150,{scaleY: false})

Qui trovate un esempio.

Effect.Highlight

Questo effetto applica un colore di background all'elemento effettuando la transizione da un valore iniziale (opzione startcolor) a un valore finale (opzione endcolor). Con l'opzione duration, come già visto per altri effetti, può essere specificata la durata in secondi dell'effetto. L'opzione restorecolor imposta un nuovo colore all'elemento, dopo la transizione dell'effetto. Il colore da assegnare all'elemento dopo la transizione viene solitamente cercato dalla funzione nell'omonima proprietà dell'elemento contenitore. Tale ricerca va a buon fine solo se il colore è stato descritto attraverso una terna di valori rgb!

new Effect.Highlight('warning',{startcolor:'#64c6eb', endcolor:'#ddffee', duration:0.3})

Qui trovate un esempio.

Effect.Parallel

Questa funzione permette di applicare più effetti in contemporanea, anche a più elementi! Il primo argomento della funzione è infatti un array di effetti, come quelli visti finora. Gli effetti vanno elencati nell'array e separati fra di loro con un virgola:

new Effect.Parallel( [ new Effect.Move('warning',{x: 200, y:0, mode: 'relative'}), new Effect.Opacity('warning',{duration: 1.0, from:1.0, to: 0.5}) ] )

Qui trovate un esempio.

JavaScript: script.aculo.us, Effects

Alla base degli effetti generati da aculous troviamo i moduli JavaScript di Effect (il file effects.js): Effect.Opacity, Effect.Scale, Effect.Morph, Effect.Move, Effect.Highlight ed Effect.Parallel. Altri effetti, detti combinati, vengono poi generati dalla combinazione degli effetti elencati sopra! La sintassi per avviare un effetto (invocato da una funzione JavaScript oppure da un evento) è la seguente:

new Effect.NomeEffetto(elemento,param_richiesti,param_opzionali);

Dove:

• elemento: è la stringa che identifica l'id dell'elemento, oppure il riferimento all'oggetto DOM dell'elemento;
• param_richiesti: è una stringa con i parametri attesi dall'effetto, e può non essere presente, dipende dall'effetto;
• param_opzionali: è una stringa di parametri opzionali utile a personalizzare l'effetto invocato;

Nella lista che segue è possibile osservare i parametri che una funzione di effetto può necessariamente richiedere (param_richiesti):

• duration: specifica, in secondi, la durata dell'effetto. Il valore passato di default all'effetto è 1.0;
• fps: specifica il numero di frame per secondi (fps) da applicare all'effetto. Il valore passato di default è 25, .il massimo valore è 100;
• transition: permette di impostare una funzione per il tipo della transizione, descrive come deve avvenire il passaggio dal primo all'ultimo frame dell'animazione (regolando un parametro che va da 0 a 1). Le possibili funzioni sono: Effect.Transitions.sinusoidal (passata di default all'effetto), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble ed Effect.Transitions.flicker;
• from: imposta il punto iniziale della transizione;
• to: imposta il punto finale della transizione;
• sync: specifica (con false) se l'effetto deve aggiornare i frame dell'animazione automaticamente (comportamento applicato di default) oppure si deve sincronizzare (con true) con l'istanza di un altro effetto (e usare, quindi, Effect.Parallel);
• queue: permette di specificare con una stringa (che può essere front oppure end) l'ordine dell'effetto all'interno della coda degli effetti;
• delay: imposta il ritardo (in secondi) da applicare alla partenze dell'effetto;
• direction: imposta in che direzione deve avvenire la transizione, può essere: top-left, top-right, bottom-left, bottom-right, e center (il valore di default). Questa proprietà può essere specificata solo per gli effetti Grow e Shrink;

Le proprietà appena viste possono poi essere aggiunte (attraverso funzioni JavaScript) anche al verificarsi di particolari eventi:

• beforeStart: la funzione specificata viene chiamata prima di iniziare l'effetto;
• beforeUpdate: la funzione specificata viene chiamata prima di aggiornare l'animazione dell'effetto;
• afterUpdate: la funzione specificata viene chiamata dopo l'aggiornamento dell'animazione dell'effetto;
• afterFinish: la funzione specificata viene chiamata al termine dell'effetto;

Per finire, ogni oggetto che sintetizza un effetto è accompagnato dalla seguente lista di variabili:

• effect.element: elemento a cui è applicato l'effetto;
• effect.options: la lista delle opzioni date all'effetto;
• effect.currentFrame: il numero di frame già visualizzati;
• effect.startOn: il tempo (in ms) che è passato dall'avvio dell'effetto;
• effect.finishOn: il tempo (in ms) che manca al termine dell'effetto;
• effect.effects[]: contiene l'array degli effetti;

Nei prossimi articoli osserveremo da vicino i principali effetti della libreria!

JavaScript: script.aculo.us, introduzione

Script.aculo.us (da ora in poi aculous) è una libreria per effetti grafici scritta in JavaScript (da Thomas Fuchs) per la realizzazione (semplice) di interfacce e pagine web. E' basata su Prototype, altra libreria JavaScript, e ne estende, quindi, le funzionalità di base! Perché riscrivere ogni volta le stesse funzioni e/o pezzi di codice quando possiamo usare aculous? Il principale obiettivo di aculous è proprio quello di semplificare la scrittura del codice JavaScript, facendo di conseguenza avanzare rapidamente il lavoro del web designer!

L'installazione della libreria è molto semplice. Occorre caricare sul proprio spazio web i file JavaScript che compongono la libreria (non tutti, come a breve vedremo) ed effettuarne, quindi, il collegamento nelle pagine web che intendono usare la stessa. Possiamo scaricare aculous a questo indirizzo, qui trovate l'archivio tar.gz della libreria. L'estrazione del file scaricato può avvenire da riga di comando, ad esempio con l'istruzione: tar zxvf scriptaculous-js-1.8.3.tar.gz. Il processo di estrazione genera la cartella scriptaculo-js.1.8.3, all'interno trovate il file prototype.js (nella cartella lib) e i file: scriptaculous.js, builder.js, effect.js, dragdrop,js, slider.js, sound.js e control.js (nella cartella src).

Per usare la libreria dobbiamo poi indicare al browser i file JavaScript che la compongono. E' sufficiente inserire nel tag head queste istruzioni:

<script src="./lib/protype.js" type="text/javascript"></script>
<script src="./lib/scriptaculous.js" type="text/javascript"></script>

Se lib è la cartella del server che ospita i file. Di default la libreria scriptaculous.js carica tutte le componenti JavaScript (i file elencati). Se una pagina utilizza solo alcuni di questi file, per non appesantire la pagina possiamo dire a scriptaculous.js di caricare solo il necessario. Ecco come fare:

<script src="./lib/scriptaculous.js?load=effects,builder" type="text/javascript"></script>

Il codice di aculous può essere aggiunto nel documento HTML in questo modo:

<div id="text" onclick="new Effect.SwitchOff(this)">
Se mi clicchi... sparisco!
</div>

E' anche possibile scrivere nuove funzioni, combinare effetti e fare tante altre cose. In questa pagina è possibile vedere l'effetto generato dall'esempio.

JavaScript: espressioni regolari

L'espressioni regolari agevolano la ricerca e la verifica di stringhe di testo all'interno di campi dati e documenti. Essendo il controllo dei dati uno dei primi obiettivi affidati a JavaScript il linguaggio non può allora ignorare la comodità ricevuta dall'uso delle espressioni regolari che sono, quindi, supportate dal linguaggio di scripting, nativamente! Un'espressione regolare descrive una famiglia di stringhe ed è usata come criterio di ricerca delle stesse all'interno del documento o campo. La descrizione della stringa da cercare (a volta detta pattern) avviene attraverso l'uso dei costrutti messi a disposizione dal linguaggio. In una precedente pagina ho già fatto uso delle espressioni regolari, gli utenti più curiosi avranno di sicuro notato la particolarità di quel codice. Ecco un elenco dei tag utili alla descrizione delle espressioni regolari:

• .: indica la presenza di qualsiasi carattere. Ad esempio, l'espressione "luc." individua le stringhe: luca, lucb, lucc, etc...;
• *: indica la presenza di 0 a N occorrenze del carattere (o gruppo di caratteri) seguito dal simbolo. Ad esempio, l'espressione "luc*a" individua le stringhe: luc, luca, lucaa, lucaaa etc...;
• +: indica la presenza di 1 a N occorrenze del carattere (o gruppo di caratteri) seguito dal simbolo. Ad esempio, l'espressione "luc*a" individua le stringhe: luca, lucaa, lucaaa etc...;
• ?: indica la presenza di 0 o 1 occorrenze del carattere (o gruppo di caratteri) seguito dal simbolo. Ad esempio, l'espressione "luc?a" individua le stringhe: luc o luca;
• {n}: indica la presenza di n occorrenze del carattere seguito dal simbolo. Ad esempio, l'espressione "luca{3}" individua la stringa lucaaa;
• {n,m}: indica la presenza di almeno n occorrenze e al massimo m del carattere seguito dal simbolo. Ad esempio, l'espressione "luca{3,5}" individua le stringhe lucaaaa, lucaaaa e lucaaaaa;
• $: la stringa da trovare deve trovarsi a fine riga;
• ^: la stringa da trovare deve trovarsi a inizio riga;
• []: individua qualsiasi singolo carattere fra quelli indicati. Ad esempio l'espressione "luc[ao]" individua le stringhe luca e luco;
• [^]: individua qualsiasi singolo carattere ad esclusione di quello indicato. Ad esempio, l'espressione "luc[^o]" individua tutte le possibili stringhe ad eccezione della stringa luco;
• [c1-c2]: indica un intervallo di caratteri. Ad esempio, l'espressione "luc[a-b]" individua le stringhe luca, lucb e lucc;
• [^c1-c2]: indica qualsiasi carattere ad esclusione di quelli indicati nell'intervallo. Ad esempio, l'espressione "luc[^a-c]" individua tutte le possibili stringhe ad eccezione delle stringhe luca, lucb e lucc;
• (): permette di raggruppare più caratteri. Ad esempio, l'espressone "(lu)+ca" individua le stringhe luca, luluca, lululuca etc...;
• |: permette la descrizione di opzioni fra carattere e/o gruppi di caratteri. Ad esempio, l'espressione "luc(a|o)" individua le stringhe luca e luco;
• \: permette l'uso dei caratteri usati dalle espressioni regolari (sequenze di escape). Ad esempio, l'espressione "\*luca\*" individua la stringa *luca*;

La descrizione di un pattern avviene attraverso la sintassi:

var pattern=/espressione_regolare/

L'espressione regolare (fissa) è cioè racchiusa dai caratteri /. I metodi per le stringhe: search(), match(), replace() e split(), combinati all'uso delle espressioni regolari (il parametro dei metodi appena elencati) permettono la ricerca dell'espressione all'interno della stringa. Il metodo search(espressione) verifica la presenza dell'espressione all'interno della stringa e ritorna l'indice che all'interno della stessa individua l'inizio del pattern trovato! Stavate forse pensando a cicli for per scorrere i caratteri dell'array?

Il metodo match(espressione) ritorna invece un array con le stringhe trovate. Tutte ovviamente rispettano il formato descritto nell'espressione. Il metodo replace(espressione,testo) sostituisce tutte le occorrenze trovate dell'espressione con la stringa testo. Il metodo split(espressione) ritorna un array di stringhe ottenuto spezzando l'array in base all'espressione fornita.

L'espressione regolare può anche essere dichiarata facendo uso dell'oggetto RegExp. Il vantaggio di usare tale oggetto risiede nella possibilità di poter istanziare, dinamicamente, nuove espressioni regolari. La precedente sintassi che è stata presentata, infatti, dichiara un'espressione regolare che è costante!

L'uso dell'oggetto RegExp permette tra l'altro l'uso di altri due metodi: il metodo test(stringa) ritorna true se la stringa soddisfa la sintassi descritta dal pattern, altrimenti torna false; il metodo exec(stringa) cerca, così come fa già test(), e ritorna un array delle sotto stringhe trovate, torna null se non trova niente. Qui trovate una pagine di esempio, date uno sguardo al codice per vedere l'uso delle espressioni regolari.

JavaScript: l'oggetto location

L'oggetto location è una proprietà dell'oggetto window, come abbiamo già visto qui. Rappresenta l'url della pagina che si sta consultando e dispone delle seguenti proprietà:

• hash: la stringa che forma l'url per un riferimento all'interno della stessa (ancora), inizia con il carattere # ;
• host: la stringa con il nome dell'host, può comprendere in alcuni casi anche il numero di porta usato per la connessione;
• hostname: la stringa con il nome dell'host;
• href: la stringa con l'url completo (hostname più pathname) del documento;
• pathname: la stringa che, all'interno dell'host, punta al documento;
• port: la stringa con il numero di porta usato per la connessione;
• protocol: la stringa con il protocollo usato per accedere al documento;
• search: la stringa che completa l'url in fase di interrogazione e/o passaggio di parametri, inizia con il carattere ?;

L'oggetto location ha due metodi:

• reload(from_server): aggiorna la pagina corrente, il parametro from_server se true obbliga a scaricare nuovamente la pagina dal server, se è false la pagina viene ripresa dalla cache locale del browser;
• replace(new_url): abbandona l'attuale url a favore di quello indicato dal parametro new_url. L'attuale url viene sostituito da quello nuovo, tale sostituzione si riflette, poi, anche nell'oggetto history;

Qui trovate una pagina di esempio. Nella prima parte del documento vengono elencate le proprietà dell'oggetto location. Nella seconda parte, invece, è possibile ricaricare la pagina (usando il metodo reload()) chiedendone una nuova copia al server oppure cambiare l'url corrente con uno nuovo (usando il metodo replace()). Verificate che il salto a un nuovo url rimuove effettivamente dall'oggetto history l'ultimo url visitato!

JavaScript: l'oggetto history

L'oggetto history raccoglie in un array gli url visitati e permette al codice JavaScript di ritornare su di queste, come solitamente accade quando premiamo sulle frecce del browser nella barra degli strumenti. Trattandosi di un array, l'unica proprietà dell'oggetto è la proprietà length, che contiene il numero di pagine visitate. I metodi dell'oggetti sono:

• back(): va alla pagina precedente;
• forward(): va alla pagina successiva (se l'utente è tornato sulla pagina precedente);
• go(posizione): va su una pagina già visitata, l'argomento posizione indica il numero di pagine da saltare in avanti oppure dietro (può quindi essere un numero positivo o negativo);

La chiamata a history.go(-1) equivale, allora, alla chiamata history.back(). Così come la chiamata a history.go(+1), che equivale alla chiamata history.forward(). La chiamata a history.go(0), invece, ricarica nel browser la pagina corrente (altra funzione che solitamente già troviamo implementata dal browser). Qui trovate una pagina di esempio che usa l'oggetto history, navigate prima attraverso i link presenti nella pagina, quindi usate i bottoni in alto per tornare dietro o andare avanti.

JavaScript: l'oggetto navigator

L'oggetto navigator è l'oggetto JavaScript che contiene tutte le informazioni sul client dell'utente, e dunque sul browser usato. L'accesso alle proprietà avviene attraverso la sintassi navigator.nome_proprietà , dove nome_proprietà può essere:

• appCodeName: il nome in codice dell'applicazione;
• appVersion: numero di versione dell'applicazione;
• appName: il nome dell'applicazione;
• cookieEnabled: dice se il browser ha abilitato i cookie (true) oppure no (false);
• cpuClass: tipo di cpu;
• mimeTypes[]: array con i tipi di file supportati;
• plattform: indica il tipo di piattaforma dell'utente (Linux o Windows);
• plugins[]: array con i plugin installati nel browser;
• systemLanguage: la lingua usata dal browser;
• userAgent: l'header che descrive il browser dell'utente;

Volete sapere il nome in codice del vostro browser? Date uno sguardo a questa pagina di esempio.

JavaScript: l'oggetto screen

L'oggetto screen di JavaScript contiene le informazioni sul monitor usato dall'utente per vedere la pagina web. Tutte le proprietà che vedremo possono essere lette attraverso la sintassi screen.nome_proprietà:

• availWidth: dimensione disponibile in larghezza (in pixel), esclusa la barra delle applicazioni;
• availHeight: dimensione disponibile in altezza (in pixel), esclusa la barra delle applicazioni;
• width: risoluzione orizzontale (in pixel);
• height: risoluzione vertivale (in pixel);
• colorDepth: numero di colori (in bit);
• pixelDepth: risoluzione (in bit) per pixel;

Qui trovate una pagina di esempio. L'uso di questo oggetto ci permette, ad esempio, di direzionare il navigatore verso pagine web più consone alle caratteristiche del suo monitor! Come? Osservate queste istruzioni:


if ((screen.width>=1024) && (screen.height>=768))
   window.location="home_hires.html";
else
   window.location="home_lowres.html";


Utile, no?

JavaScript: l'oggetto window

L'oggetto window in JavaScript rappresenta la finestra del browser e contiene, pertanto, i riferimenti a tutti gli oggetti della stessa. Viene creato ad ogni istanza del tag body o frameset (quest'ultimo, adesso deprecato). Come ogni oggetto è poi dotato di proprietà e metodi che di seguito analizziamo. Per le proprietà abbiamo la seguente lista:

• closed: il significato di questa proprietà potrebbe sembrare alquanto strano. Si tratta di un valore logico che indica se una finestra è stata aperta o chiusa. L'oggetto window che fa riferimento a una finestra continua ad esistere anche quando la finestra è stata chiusa;
• defaultStatus: lo stato della finestra viene riportato solitamente in una barra inferiore del browser, se è abilitato. Con questa proprietà possiamo quindi modificare il testo che di default compare nella barra di stato;
• document: è il riferimento al documento contenuto nella finestra e quindi alla pagina html;
• frames[]: è un array che contiene i riferimenti a tutti i frame che compongono la pagina (se la pagina è divisa in frame!);
• history: riferimento all'oggetto che contiene gli indirizzi visitati con la finestra;
• length: se la pagina è divisa in frame, contiene il numero di frame;
• location: riferimento all'oggetto che contiene informazioni sull'url della pagina corrente;
• name: il nome della finestra;
• navigator: riferimento all'oggetto che raccoglie le proprietà del browser (nome, versione e file supportati) usato dal client per visualizzare la finestra;
• opener: se la finestra è stata aperta con la chiamata window.open() possiamo usare questa proprietà per sapere chi ha aperto la finestra;
• parent: contiene un riferimento alla finestra che contiene il frame (se il documento è diviso in frame);
• screen: è un oggetto contenente le informazioni (risoluzione orizzontale, verticale e profondità di colore) del monitor usato dall'utente;
• self: è un riferimento all'oggetto window;
• status: una stringa personalizzata per la barra di stato del browser;
• top: riferimento alla finestra di livello superiore;
• window: è un riferimento all'oggetto window;

Per l'accesso, in lettura e/o scrittura, alle proprietà va usata la seguente sintassi: window.nome_proprietà. In questa pagina trovate un esempio, i riferimenti agli oggetti (se presenti) vengono notificati nella stessa pagina. Per accedere, poi, alle singole proprietà di questi oggetti vanno usati i metodi e i campi per essi definiti.

I metodi dell'oggetto window possono variare da browser a browser, dipende dalla versione JavaScript implementata.

• alert(messaggio): mostra una finestra con un messaggio di avviso;
• blur(): sposta la finestra del browser dietro le altre, toglie il focus alla finestra;
• clearInterval(id): cancella l'intervallo di tempo impostato per l'esecuzione di una funzione con setInterval() (che ritorna l'id da usare con clearInterval());
• clearTimeout(id): cancella l'intervallo di tempo impostato per l'esecuzione di una funzione con setTimeOut();
• close(): chiude la finestra;
• confirm(domanda): mostra una finestra con una domanda, l'utente può rispondere alla domanda premendo uno dei due bottoni, "Ok" oppure "Annulla". Restituisce true se l'utente clicca su "Ok", altrimenti false;
• focus(): porta la finestra in primo piano, davanti a tutte le altre;
• moveBy(x,y): sposta la finestra di x pixel in orizzontale e y pixel in verticale;
• moveTo(x,y): sposta la finestra collocando lo spigolo in alto a sinistra della stessa nel punto di coordinate x, y;
• open(url, nome_finestra, proprieta): apre una nuova finestra facendola puntare all'url suggerito, se non viene fornito un nome per la finestra l'url viene aperto nella finestra corrente. La nuova finestra ha poi le proprietà descritte attraverso l'omonimo parametro passato alla funzione (si tratta di una stringa di valori, vedere le specifiche W3C). Questa funzione ritorna il riferimento all'oggetto window che visualizza la pagina aperta;
• print(): avvia il processo di stampa della pagina;
• prompt(messaggio,valore_predefinito): mostra una finestra con un messaggio di richiesta, permettendo all'utente di scrivere l'input. La finestra consente all'utente la pressione di uno dei tasti "Ok", "Cancella" oppure "Annulla". Un valore predefinito viene poi presentato all'utente (solitamente corrisponde a una breve descrizione del valore da digitare, che ovviamente viene poi sovrascritto dall'utente con il valore reale). Se passiamo il valore null a valore_predefinito, nessuna stringa di default sarà presente nella finestra. Questa funzione ritorna il valore digitato dall'utente se quest'ultimo clicca sul bottone "Ok", altrimenti torna il valore null se è stato premuto il bottone "Annulla";
• resizeBy(larghezza,altezza): modifica le dimensioni della finestra aggiungendo o togliendo alla stessa i pixel indicati;
• resizeTo(larghezza, altezza): modifica le dimensioni della finestra portando la stessa alla dimensione indicata;
• scroll(x,y): effettua lo scrolling della pagina di x pixel in orizzontale e y pixel in verticale a partire dallo spigolo superiore sinistro della finestra;
• scrollBy(delta_x,delta_y): effettua lo scrolling della pagina di un certo numero di pixel;
• scrollTo(x,y): effettua lo scrolling della pagina portando la stessa in un punto preciso;
• setInterval(funzione,intervallo): con questo metodo possiamo eseguire le istruzioni di una funzione ogni volta che passa l'intervallo di tempo indicato (che è espresso in millisecondi) . Questo metodo ritorna un codice identificativo che rappresenta l'avvenuta assegnazione ciclica (fra le istruzioni e il metodo), lo stesso codice che va poi usato con clearInterval() per rimuovere, quindi, l'esecuzione a tempo;
• setTimeout(funzione,tempo): permette una sola esecuzione di una funzione una volta passato il tempo indicato (torna l'id dell'assegnazione ciclica);

JavaScript e CSS: un menu a comparsa

L'uso combinato di JavaScript e CSS può generare effetti davvero interessanti, come il menu che vi propongo in questo breve articolo. Il codice che vi presento sfrutta una importante proprietà dei fogli di stile: visibility. Con visibility possiamo dire al browser se mostrare o meno un elemento della pagina, dipende dal valore assegnato alla proprietà che può essere Hidden (nascosto) o Visible (visibile). Attenzione, l'elemento nascosto occuperà in entrambi i casi lo spazio, come se fosse presente nella pagina. Se desiderate nascondere del tutto l'elemento è preferibile usare la proprietà display, fissandola al valore none. In questa pagina potete dare uno sguardo al foglio di stile usato.

Il menu viene generato attraverso più blocchi div, quello più esterno fa da contenitore ai blocchi per le sezioni e le voci del menu. Ognuno di questi è poi etichettato in maniera tale da appartenere a una classe di elementi. Le classi previste nel foglio di stile sono: menu, sezione, voci e voce.

Gli id assegnati agli stessi elementi detti sopra permettono al codice JavaScript (funzione getElementById) di cercare e modificare la proprietà visibility! L'accesso alla proprietà avviene infatti grazie alla chiamata a document.getElementById(id_element).style.visibility

All'interno della pagina html è possibile notare le funzioni JavaScript showLevel e hideLevel incaricate di nascondere e mostrare i livelli inferiori dei menu. Le funzioni mouseOn e mouseOut, invece, disegnano lo sfondo alla sezione e alle sue voci. Qui trovate un esempio del menu!

JavaScript: gli eventi del mouse

L'interazione fra la il documento visualizzato dal browser e l'utente può avvenire attraverso il mouse e/o la tastiera. Possiamo sintetizzare gli eventi generati dal mouse distinguendoli da: eventi orientati ai clic del mouse e eventi orientati al movimento del mouse. Nella lista che segue sintetizziamo quelli generati dai clic del mouse:

• onclick: cattura l'evento generato dal clic del mouse, può essere applicato a bottoni (di invio e reset), a collegamenti, a pulsanti radio e caselle di selezione;
• ondbclick: cattura l'evento generato dal doppio clic del mouse, può essere applicato al corpo della pagina e ad altri elementi;
• onmousedown: cattura l'evento generato dalla pressione, fissa, del tasto del mouse, può essere applicato al corpo della pagina e ad altri elementi;
• onmouseup: cattura l'evento generato dal rilascio del tasto del mouse premuto, può essere applicato al corpo della pagina e ad altri elementi;
• oncontextmenu: gli eventi fin qui visti erano tutti legati alla pressione del tasto sinistro del mouse. Questo evento cattura, invece, l'evento generato dal clic del tasto destro;

Ognuno di questi eventi può essere associato all'esecuzione di una funzione o comando JavaScript. Purtroppo non tutti i browser, a causa dell'aderenza con il modello a oggetti implementato e il DOM specificato dal W3C, riconoscono gli eventi detti sopra. Di seguito sintetizziamo, invece, gli eventi orientati al movimento del mouse:

• onmouseover: genera l'evento quando il mouse è sopra un oggetto della pagina, può essere applicato ai pulsanti (di invio e reset), ai collegamenti, ai pulsanti radio, e alle caselle di selezione;
• onmouseout: genera l'evento quando il mouse si è allontanato dall'elemento. Questo evento, quindi, segue l'evento onmouseover detto prima;
• onmousemove: genera l'evento al movimento del mouse, può essere applicato al corpo della pagina;

La sintassi concessa a un evento per la chiamata di una funzione JavaScript è la seguente: evento="funzione()", (oppure evento="comando_javascript" per i comandi) da inserire nel tag dell'elemento! In questa pagina trovate un semplice esempio: "Grand Prix del mouse!" (il mio miglior tempo, al momento è di 5.28 secondi!). Come sempre vi invito a dare uno sguardo al codice JavaScript.

JavaScript: la gestione degli elementi e dei nodi, esempi

In questo articolo è stato descritto come gestire con JavaScript il modello a oggetti del documento, il DOM. In questo breve intervento vi segnalo qualche esempio che mette in pratica le funzioni JavaScript già illustrate. In questa pagina viene generata una lista dinamicamente, l'utente scrive le voci da aggiungere all'elenco (vengono creati nuovi nodi ed elementi). E' anche possibile eliminare la prima e l'ultima voce dell'elenco (sfruttando le proprietà lastChild e firstChild). In questa pagina, invece, uno script modifica il colore del testo di una tabella.

JavaScript, pagine di esempio

Cercherò di tenere aggiornata questa pagina ai vari esempi di JavaScript citati nel blog. Alcuni di questi mi sono serviti per rivedere i concetti chiave del linguaggio di scripting.

• Uso dell'oggetto Date;
• Uso di alert;
• Istruzione if;
• Istruzione switch;
• Istruzione for;
• Istruzione do... while;
• Istruzione while;
• Utilizzo di array;
• Uso dei cookie;
• Gestione di elementi e nodi, esempio 1;
• Gestione di elementi e nodi, esempio 2;
• Eventi del mouse: "Grand Prix del mouse!";

JavaScript: DOM, Document Object Model

DOM realizza una rappresentazione ad oggetti di un documento HTML secondo le specifiche dettate dal W3C. Disporre di un modello ad oggetti del documento permette di realizzare in maniera assai più semplice la manipolazione degli elementi che lo compongono. Il DOM, pertanto, favorisce il DHTML (l'html dinamico)! Come spesso accade non tutti si adeguano subito agli standard. Nel caso del DOM, poi, alcuni browser ripropongono un loro modello ad oggetti del documento che spesse volte differisce dalle specifiche del W3C. Questo causa non pochi problemi a chi sviluppa pagine web poiché l'accesso a un elemento può avvenire, allora, in modo totalmente differente da quello previsto dal designer. JavaScript non implementa un modello a oggetti del documento, come alcuni pensano. Questo, come già detto poco fa, spetta ai browser. JavaScript offre, invece, un set di istruzioni per accedere agli elementi del documento, per manipolarne i contenuti e per aggiungerne altri. La buona riuscita di queste operazioni dipende proprio dall'aderenza che esiste fra il modello DOM implementato nella logica del browser e quello standard descritto dal W3C. Non a caso, quando si vuole verificare l'esistenza di un oggetto si procede solitamente invocando il metodo JavaScript e verificando quindi l'esito della chiamata. Se alcuni oggetti esistono allora il browser sta adottando il modello ad oggetti del W3C!

Per muoverci nel modello a oggetti del documento invocando la giusta funzione occorre fare un'importante distinzione, quella cioè fra element e node. Entrambi definiscono una componente del documento, più precisamente: con element (da ora in poi elemento) si intende un tag contenitore (come ad esempio il tag p per i paragrafi); con node (da ora in poi nodo) si intende, invece, un tag finale della struttura a oggetti. Un elemento può contenere altri elementi. La stessa cosa non può invece avvenire per un nodo. L'oggetto document contiene tutti gli elementi e i nodi della pagina.

JavaScript mette a disposizione due comode funzioni per rintracciare un elemento della pagina:

• getElementById('id_elemento'): permette di rintracciare un elemento del documento, se presente, basandosi sul valore dato all'attributo univoco id;
• getElementsByTagName('nome'): permette di rintracciare un elemento del documento, se presente, basandosi sul valore dato all'attributo name;

A differenza di getElementById che restituisce un solo valore (se presente), la funzione getElementByTagName ritorna un array con gli elementi trovati! L'accesso a un elemento dell'array può poi avvenire sia secondo le regole previste da JavaScript (e quindi con array[indice]), oppure in base a una nuova sintassi introdotta dal W3C: array.item(indice).

Le proprietà e i valori delle proprietà degli elementi possono essere manipolate con i seguenti metodi:

• getAttribute(nome_proprietà);
• setAttribute(nome_proprietà,valore_proprietà);
• removeAttribute(nome_proprietà);

La gestione dei nodi è assai più articolata, l'intero set di nodi contenuti in un elemento può essere ricavato attraverso la funzione childNodes che ritorna un array di nodi! Con firstChild e lastChild accediamo rispettivamente al primo e all'ultimo nodo dell'array. Per spostarci lungo la gerarchia dei nodi disponiamo dei metodi nextSibiling, previousSibiling e parentNode che ritornano rispettivamente il fratello minore, maggiore e il padre del nodo.

Per creare nuovi elementi e nuovi nodi disponiamo dei metodi:

• createElement('nome_TAG'): crea un elemento con nome nome_TAG, ritorna un riferimento al tag creato;
• createTextNode('testo'): crea un node contenente il testo passato alla funzione, ritorna un riferimento al nodo creato;

Come facciamo ad aggiungere nuovi nodi al documento?

Ecco una lista di funzioni JavaScript per la gestione dei nodi:

• appendChild(nuovo_nodo): il nodo nuovo_nodo viene aggiunto alla fine dell'array;
• insertBefore(nuovo_nodo,nodo_da_precedere): il nodo nuovo_nodo viene aggiunto prima del nodo nodo_da_precedere;
• replaceChild(nuovo_nodo,vecchio_nodo): il nodo nuovo_nodo sostituisce il nodo vecchio_nodo;
• removeChild(nodo_da_cancellare): il nodo nodo_da_cancellare viene eliminato;

A questo link trovate le specifiche per il modello DOM, ormai giunto alla terza revisione (e per questo motivo detto DOM Level 3).

JavaScript: cookie

L'HTTP, il protocollo usato per muovere le pagine web dai server ai client, è un protocollo senza stato (state-less). Ogni richiesta di pagina al server, avverrà come se il client contattasse il server per la prima volta! Questo significa che se in precedenza abbiamo già compilato i campi di un form ci tocca inserire di nuovo gli stessi valori se accediamo nuovamente a quella pagina!

Netscape, per dare memoria ai browser e ai server, inventò allora i cookie: piccoli file di testo memorizzati sul computer dell'utente e usati dai browser per ripristinare valori già scritti dall'utente (come ad esempio i campi dati relativi a nome utente e opzioni varie).

Il contenuto di un cookie prevede: una o più coppie nome-valore/i per i dati da memorizzare, una data che indica la scadenza del cookie, il dominio di appartenenza del cookie (il nome e il valore non possono contenere i caratteri: punto e virgola, virgola e spazio). Alla richiesta di una pagina web il cookie, se presente, viene allora aggiunto all'header HTTP sicché un programma lato server ne analizzerà il contenuto per poi applicare i vecchi valori alla pagina richiesta. La gestione dei cookie spetta dunque ai browser, che ne permettono sia la consultazione (quasi sempre incomprensibile per chi legge) che l'eliminazione.

Sono molte le tecnologie per il web che fanno ormai uso dei cookie e fra queste vi è anche JavaScript. Per JavaScript un cookie è una proprietà dell'oggetto document. Questo significa che per assegnare al documento un cookie è sufficiente scrivere una stringa di valori alla proprietà cookie. E' il programmatore a stabilire il significato e l'ordine dei valori nella stringa! Ad esempio:


document.cookie="name=valore1:valore2:...;proprietà1...;";


La proprietà expires imposta la data di scadenza per il cookie, che se non presente obbliga il browser a cancellare il cookie alla chiusura dello stesso. Il formato atteso è quello UTC, usare il metodo getUTCDate().

La proprietà path indica la pagina web a cui è associato il cookie. Di default un cookie viene applicato anche alle pagine gerarchicamente inferiori. Se si vuole invece far valere un cookie a tutte le cartelle e/o pagine del sito si deve allora indicare path="/".

La proprietà domain indica il nome del sito (quindi il dominio) a cui è associato il cookie. Se un sito è strutturato su più server web (ad esempio uno per ogni lingua), per far valere il cookie a tutti i server va impostato path="" e domain="dominio_sito".

L'ultima proprietà che vi presento è la proprietà secure che riceve un valore booleano (quindi true oppure false) per abilitare o meno la trasmissione dei cookie su un protocollo sicuro quale è HTTPS.

I cookie possono essere creati, letti e cancellati attraverso istruzioni JavaScript! Una delle prime proprietà da dare al cookie è il suo nome, in questo modo ci assicuriamo la creazione di un cookie univoco valido all'interno del nostro dominio. Si consiglia inoltre di usare la funzione escape() ogni volta che assegniamo un valore a un cookie (soprattutto se lo raccogliamo da un form). Questa funzione, infatti, ci permette di usare alcuni caratteri altrimenti inutilizzabili! Quando leggiamo il cookie non dimenticate di usare la funzione unescape(), per ripristinare la stringa!

Ecco una pagina di esempio (osservate il codice JavaScript all'interno della pagina, per facilitare il compito alla funzione split() ho separato i valori con un opportuno carattere!). E' preferibile non salvare nel cookie informazioni preziose, come ad esempio la password per l'accesso a un servizio. Perché?

Attraverso la gestione dei cookie del browser è possibile leggerne il contenuto, che non dovrebbe essere mai in chiaro!