Lo script che presentiamo è particolarmente "flessibile" nel suo utilizzo. Il codice ci permette di mostrare un'immagine, un testo o del codice html, in base alle preferenze dell'utente. Il visitatore, cliccando sull'elemento scelto, potrà decidere se visualizzarlo o meno grazie ad un cookie che "registrerà" sul suo pc le scelte compiute.
Commercialmente parlando si può utilizzare lo script per mettere un banner in bella mostra nella pagina ma dando la possibilità di nasconderlo una volta cliccatoci sopra. Oppure si può mostrare un messaggio di benvenuto all'utente solamente la prima volta che accede al sito; sarà lui a decidere quando non visualizzarlo più.
L'esempio si compone di 2 file:
- esempio.htm
- freephp.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi.
Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Tra i tag <head> della pagina inseriamo questo script:
<script type="text/javascript" language="javascript">
var adlink="Cookie";
var timeout=15; //secondi di durata del cookie
var showads = 1;
function adMessage(adcode) {
if (document.cookie == "") {
document.write(adcode);
} else {
var the_cookie = document.cookie;
the_cookie = unescape(the_cookie);
the_cookie_split = the_cookie.split(";");
for (loop=0;loop<the_cookie_split.length;loop++) {
var part_of_split = the_cookie_split[loop];
var find_name = part_of_split.indexOf("ad");
if (find_name!=-1) {
break;
}
}
if (find_name==-1) {
document.write(adcode);
} else {
var ad_split = part_of_split.split("=");
var last = ad_split[1];
if (last!=0) {
document.write(adcode);
} else {
showads=0;
}
}
}
}
function writeCookie(show) {
var today = new Date();
var the_date = new Date();
the_date.setTime(today.getTime() + 1000 * timeout);
var the_cookie_date = the_date.toGMTString();
var the_cookie = "ad="+show;
var the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie = the_cookie;
location.reload(true);
}
function handleClick(evnt) {
var targetstring = new String(evnt.target);
if (targetstring.search(adlink) != -1) {
writeCookie(0);
}
routeEvent(evnt);
return true;
}
if (window.Event) {
window.captureEvents(Event.CLICK);
}
window.onClick = handleClick;
adMessage('');
// End -->
</script>
Lo script "setta" un cookie sul pc dell'utente nel momento in cui si clicca sul link indicato. La personalizzazione del codice riguarda solamente una variabile e cioè quella che determina la durata del cookie prima che questo si autodistrugga e venga visualizzato nuovamente l'immagine (o il testo).
var timeout=15;
in questo esempio abbiamo una durata di 15 secondi dopo i quali il banner tornerà ad essere visibile. Se volessimo impostare la durata del cookie ad un giorno basterà inserire 60*60*24
var timeout=60*60*24;
cioè: 60 secondi * 60 minuti * 24 ore = 86400 secondi
Adesso, nel punto preciso in cui vogliamo far apparire il banner, inseriamo questo codice:
<span onClick="writeCookie(0)">
<div align="center"><script type="text/javascript"
language="javascript">
<!--
adMessage('<a href="http://freephp.html.it"><img src="freephp.gif"
border="0"/></a><br /><div align="center"><font face="verdana" size="2">Potete rimuovere il banner cliccandoci
sopra</font></div>');
// -->
</script>
</div>
</span>
La stringa appena analizzata può essere personalizzata a piacimento: possiamo inserire codice html, una frase, un banner, un'immagine; dovremo rispettare solamente alcune piccole regole:
- se utilizziamo un link è importante usare il target _blank o _new
- se utilizziamo degli apostrofi nelle frasi all'interno della stringa dovremo farli precedere da un back slash ()
nel caso non volessimo utilizzare un link esterno, per nascondere il banner basterà utilizzare un link strutturato in questa maniera:
<a href="#"><img src="freephp.gif" border="0"></a>
Teoricamente lo script è già completo ma volendo possiamo inserire un collegamento per dare la possibilità di ricaricare immediatamente ciò che è stato nascosto senza dover aspettare che il cookie si autodistrugga:
<script language="javascript" TYPE="text/javascript">
if (!showads) {
document.write('<div align="center"><a href="#"
onClick=writeCookie(1)><font face="verdana" size="2">Ricarica il banner</font></a></div>')
}
</script>
Questo semplice script, posizionato in un punto qualsiasi della pagina, verrà mostrato solamente dopo che l'utente ha cliccato sul banner (quando, cioè, ha ricevuto il cookie sul suo pc).
È molto importante, soprattutto per Netscape 6, mettere il carattere "#" nel link in modo da fare un refresh della pagina e ricaricare, così, il banner nascosto.
