Nell'articolo scorso abbiamo visto tre script all'insegna dell'utilità
spicciola; questa volta invece vedremo un paio di script di abbellimento, che
possono lasciare stupefatto chi vede per la prima volta una pagina con
javascript.
In particolare vedremo come costruire un'interfaccia con bottoni
che cambiano aspetto, schiacciandosi o illuminandosi, quando ci si passa sopra
col mouse, e un contatore di accessi particolare, che non conta gli accessi
totali al sito, ma gli accessi del singolo utente, tramite l'uso dei cookies.
Bottoni animati
Molti navigatori con conoscenze di HTML rimangono perplessi quando si
trovano di fronte a siti con interfacce grafiche a bottoni, i quali si
illuminano o si schiacciano semplicemente passandoci sopra col mouse. Ebbene,
non si tratta nè di esoterici trucchi, nè di complesse applet
Java, bensì di poche linee di javascript.
Nell'articolo scorso
abbiamo visto come cambiare una immagine:
document.images[num].src = immagine.gif
In pratica si
cambia il .src, ovvero la sorgente dell'immagine, la quale rimane allo stesso
posto e delle stesse dimensioni.
Ora, dato che abbiamo a disposizione i due
metodi onMouseOver e onMouseOut, attivati rispettivamente quando il mouse entra
o esce dall'area dell'oggetto al quale sono riferiti, basterà usarli su
un oggetto di tipo "immagine", in questo modo:
onMouseOver = Seleziona immagine bottone acceso
onMouseOut = Seleziona immagine bottone spento
Avendo le due immagini per il bottone, di dimensione 75 x
22, volendole chiamare (nome degli oggetti) clickme1 e clickme2, dato che i
relativi file GIF si chiamano clickme1.gif e clickme2.gif, il codice di
inizializzazione sarà:
clickme1 =
new Image(75,22);
clickme1.src = "clickme1.gif";
clickme2 = new
Image(75,22);
clickme2.src = "clickme2.gif";
Da notare che si creano due oggetti di tipo Image, tramite
l'operatore "new", e successivamente si carica il file GIF relativo.
Questo processo è simile a quello usato nel Java.
Ora possiamo
semplicemente riferirci a clickme1 e clickme2 per indicare le due immagini .gif.
Ecco il tag che useremo per visualizzare il bottone:
<IMG NAME="pic1" SRC="clickme1.gif"
width=75 height=22>
A questo punto, possiamo agire su di
esso in modo da fargli visualizzare la seconda immagine, usando questa linea di
javascript:
document.images[pic1].src =
clickme2.src;
A tal proposito, possiamo creare una funzione
che, dati il nome dell'immagine nell'html (pic1) e il nome dell'oggetto
(clickme2 o clickme1), esegua lo scambio di immagine:
function SelezImg(NomeInHtml,NomeImgOggetto) {
document.images[NomeInHtml].src = eval(NomeImgOggetto + ".src")
}
Si noti che per "attaccare" il .src alla fine
del nome dell'oggetto, si ' usato il metodo eval(). Ecco come usare la nostra
funzione:
onMouseOver = "SelezImg('pic1','clickme2')"
onMouseOut = "SelezImg('pic1','clickme1')"
Potete
vedere un documento completo nel listato 1, dove è
evidente l'utilità della funzione universale SelezImg(), specie quando il
numero dei bottoni è superiore ad 1.
Possibili variazioni sono la
comparsa addizionale di istruzioni, relative al bottone illuminato, su un frame
esterno; oppure dei suoni associati alla selezione/deselezione.
Contatore di visite basato sui cookies
I cookies in questo periodo stanno assumendo un carattere misterico, in
quanto tutti ne sentono parlare, ma non sanno dove questi vadano a scrivere nel
proprio hard disk, e ciò crea non poche perplessità.
Ebbene,
Internet Explorer salva i cookies nella directory windows/cookies come piccoli
file con suffisso .txt e nome "ispirato" dal nome del sito a cui
appartengono; questi file sono effettivamente dei file di testo che potete anche
sbirciare.
Netscape invece li accorpa in un unico file, presente nella sua
directory principale, e chiamato cookies.txt; anche questo è un comune
file di testo, editabile.
Occorre notare che i due browser tengono una lista
separata ed autonoma di cookies per cui, se visitate un sito (con gestione
cookies) a volte con uno e a volte con l'altro browser, verranno tenuti due
cookies con due contatori indipendenti. In effetti i cookies tengono traccia non
dei singoli utenti, ma più precisamente dell'accesso a singoli documenti
da parte di singoli browser.
Per quanto riguarda la sicurezza, sono stati
stabiliti dei limiti precisi: oltre a limitare la grandezza di un cookie a 4 Kb,
ogni client (Netscape o Explorer) non può tenere più di 300
cookies contemporaneamente (è anche per questo che è usata la data
di scadenza, dopo la quale il cookie espira per lasciare il posto libero),
inoltre ogni singolo server non ne può avere più di 20 per se.
Questo
significa che la cosa più "cattiva" che possa fare un sito è
creare 20 cookies occupando 80 Kb dello spazio loro riservato su Hard Disk.
Lo
spazio massimo occupabile dai cookies è di 1,2 Mb (se tutti i 300 cookies
fossero stati creati e fossero di 4 Kb), ma dato che in media sono lunghi circa
100 bytes, di solito non si superano i 50 Kb totali.
Dopo queste doverose
precisazioni, veniamo all'uso pratico di un cookie con il javascript. Ogni
documento può avere un relativo cookie, all'interno del quale si possono
salvare uno o più dati: nel nostro caso salveremo un numero, tenendolo
come contatore delle visite, ma potremmo salvare anche la data della prima
visita o i risultati di un system info per sapere il sistema operativo e il
browser del visitatore.
Qua si entra nel problema della privacy, in ogni
caso con il javascript non è possibile sapere niente di più che
tipo di browser e sistema operativo, per cui a meno che il gestore del sito non
abbia messo sul server una CGI in grado di fornire l'IP, e magari un form in cui
guarda caso ci chiede anche l'email, i dati dovrebbero essere insufficienti per
una "schedatura a scopo di marketing".
Nel cookie, oltre al nome
dei dati che salviamo, occorre anche impostare la data di scadenza, ed
opzionalmente altri tre parametri: "path", "domain" e "secure",
che nel nostro caso ignoreremo. Ecco come si fa a vedere se il documento ha un
cookie associato:
if(document.cookie) { }
Se
non esiste, per crearlo occorre scrivere in "document.cookie" una
stringa di testo di questo tipo:
cookie_name=dato_del_cookie; expires=data_fine
Ad esempio:
nome "pippo", dato contrenuto "1", data in cui espira "primo
Aprile del 1999 alle 8":
document.cookie=pippo+"=1; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";
Quello
che si è scritto all'interno del cookie si potrà poi rileggere
come una qualsiasi stringa, cercando al suo interno i dati che ci interessano,
tramite l'uso del metodo indexOf() o simili.
Nel listato
2 possiamo vedere l'uso del cookie per il numero di visite: ad ogni accesso
il numero viene incrementato, e la data di scadenza del cookie è
impostata ad un anno dalla data attuale. Questo significa che se si visita
nuovamente il sito dopo più di un anno di assenza, il contatore inizierà
da zero, dato che il cookie è "spirato".
Ricordo ancora una
volta che se cambiate il path del documento, o cambiate browser, il contatore
ricomincia da zero, in quanto viene creato un nuovo cookie.
Altra cosa da
notare in questo listato, è la presenza di una sezione distaccata dello
script in mezzo al documento.
E' infatti possibile piazzare delle linee di
javascript, racchiuse all'interno del tag <SCRIPT>>, nel punto del
documento dove si vuole che venga scritta una certa frase, nel nostro caso il
numero di visite.
Possibili variazioni di questo script possono essere
l'aggiunta di frasi o commenti da stampare secondo il numero di visite, ad
esempio: "ben tornato" dalla seconda alla quinta, "grazie per
l'attenzione" dalla sesta alla quindicesima, via via salendo fino a "salve
affezionato visitatore" per chi supera le 200 visite.
Altre finezze
potrebbero essere la stampa di giorno ed ora della prima visita, del tempo
trascorso (sei un nostro visitatore da 25 giorni), e così via.
Fabio Ciucci
fabioc@anfiteatro.it
http://www.anfiteatro.it/java.html
Torna all' indice degli articoli