SOLUZIONE: Per meglio comprendere come si procederà nella soluzione è opportuno evidenziare a grandi linee quello che sarà fatto:
- Bisogna controllare che la data inserita esista (ESEMPIO: 32 Febbraio 2010 non è una data valida)
- Si hanno dei contenuti da visualizzare solo per i maggiorenni.
- Si ha una pagina da visualizzare nel caso in cui l'utente è minorenne.
- Ad un utente maggiorenne che ha già inserito la data di nascita in maniera corretta saranno visualizzati direttamente i contenuti per maggiorenni.
Come primo passo creiamo un file home.html nel quale inseriremo il seguente codice HTML:
<body onLoad="initPageEta()">
<div id="controlloEta">
<input id="giorno" type="text" name="giorno" size="2" maxlength="2" onkeyup="input_onchange('giorno')">
<input id="mese" type="text" name="mese" size="2" maxlength="2" onkeyup="input_onchange('mese')">
<input id="anno" type="text" name="anno" size="4" maxlength="4" onkeyup="input_onchange('anno')">
<button id="buttonSubmit" onClick="inviaData()" > Invia</button>
</div>
<div id="content">
CIAO CLIENTE! CONTENUTI SEGRETI PER I MAGGIORENNI
</div>
</body>
I tre tag INPUT identificano rispettivamente i campi giorno, mese e anno di nascita (indicati in ROSSO).
Il div con l'id content (indicato in VERDE) avrà all'interno i contenuti che si vogliono visualizzare solo ai maggiorenni. (Per semplicità nella spiegazione il contenuto è inserito nello stesso file ma come vedremo negli sviluppi futuri nel punto 2 si potrebbe migliorare lo script con qualche accorgimento )
A questo file html associamo un file css con il seguente contenuto:
#buttonSubmit
{
width:50px;
}
#content
{
display:none;
}
A questo punto nel file html creato vi sono dei richiami a delle funzioni javascript che andremo a dettagliare al seguito:
Funzioni richiamate al caricamento della pagina HTML: initPageEta() e leggiCookie()
Quando viene caricata la pagina per la prima volta la funzione richiamata nell'OnLoad del body controlla se il client ha un Cookie di nome maggiorenne settato a 1. In caso affermativo vorrà dire che l'utente ha già visitato il sito ed è già stato riconosciuto come maggiorenne. Per questo, l'operazione da eseguire sarà quella di nascondere la form del controllo dell'età e mostrare i contenuti per maggiorenni.
function initPageEta()
{
var cookieEta=parseInt(leggiCookie('maggiorenne'));
if(cookieEta==1)
{
document.getElementById("controlloEta").style.display="none";
document.getElementById("content").style.display="inline";
}
}
function leggiCookie(nomeCookie)
{
if (document.cookie.length > 0)
{
var inizio = document.cookie.indexOf(nomeCookie + "=");
if (inizio != -1)
{
inizio = inizio + nomeCookie.length + 1;
var fine = document.cookie.indexOf(";",inizio);
if (fine == -1) fine = document.cookie.length;
return unescape(document.cookie.substring(inizio,fine));
}
else
{
return "";
}
}
return "";
}
Funzione richiamata al rilascio di un tasto premuto: input_onchange()
La funzione sposta il focus tra i diversi input per permettere un inserimento lineare della data
function input_onchange(input)
{
var inputElement= document.getElementById(input);
if(input=='giorno' || input=='mese')
{
if(inputElement.value.length!=2)
return;
}
if(input=='anno')
{
if(inputElement.value.length!=4)
return;
}
if(input=='giorno')
{
document.getElementById('mese').focus();
}
else if(input=='mese')
{
document.getElementById('anno').focus();
}
}
Funzioni utilizzate quando si clicca sul pulsante per l'invio della data di nascita: inviaData(), validaData(), maggioreEta()
La funzione ValidaData controlla che la data inserita sia valida.
In caso negativo colora gli input della pagina in rosso.
La funzione maggioreEta() controlla che a partire dalla data di nascita inserita l'utente abbia già compiuto i 18 anni. In caso affermativo vengono visualizzati i contenuti per maggiorenni e viene settato il cookie "maggiorenne" a 1 per agevolare i successivi accessi al sito.
function inviaData()
{
var giorno=parseInt(document.getElementById("giorno").value,10);
var mese=parseInt(document.getElementById("mese").value,10);
var anno=parseInt(document.getElementById("anno").value,10);
if(!validaData(giorno,mese,anno))
{
document.getElementById("giorno").style.border="1px solid red";
document.getElementById("mese").style.border="1px solid red";
document.getElementById("anno").style.border="1px solid red";
}
else
{
if(maggioreEta(giorno,mese,anno))
{
document.getElementById("controlloEta").style.display="none";
document.cookie = 'maggiorenne=1; expires=Tue, 23 June 2015 22:47:11 UTC; path=/';
document.getElementById("content").style.display="inline";
}
else
{
location.href = "URL DELLA PAGINA PER MINORENNI"
}
}
}
function validaData(giorno,mese,anno)
{
var data=new Date(anno, mese-1, giorno);
if(data.getFullYear()==anno && data.getMonth()+1==mese && data.getDate()==giorno){
return true;
}else{
return false;
}
}
function maggioreEta(giorno,mese,anno)
{
var today = new Date();
var birthDate=new Date(anno, mese-1, giorno);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate()))
{
age--;
}
if(age>= 18)
{
return true;
}
else
return false;
}
SVILUPPI FUTURI:
- Si potrebbe permettere l'inserimento della data utilizzando un date picker.
- I contenuti riservati ai maggiorenni nella soluzione presentata vengono comunque inviati al client. Si potrebbe aggiungere un controllo lato server e inviare i contenuti solo agli effettivi maggiorenni.
0 commenti:
Posta un commento