|
Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Ricava il segno zodiacale e cinese
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript
COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
JavaScript consente di interagire agilmente con i forms e questa
caratteristica puo' essere sfruttata per creare divertenti utilita' nel
campo della creazione di siti Web. La demo che vedremo questa settimana
permette di ricavare il segno zodiacale (i famosissimi capricorno, toro,
vergine, bilancia ecc.) e quello cinese (cane, gallo, drago, tigre, coniglio
ecc.) inserendo in un campo input la propria data di nascita in formato
gg/mm/aaaa (06/01/1982 per esempio).
Vediamo quindi di esaminare il sorgente dell'esempio:
<script language="JavaScript">
var gg
var aa
var utsegno
var val
Questa prima parte di scripting specifica quattro variabili globali che
definiscono rispettivamente giorni, anno, segno zodiacale e cinese.
Prima di inserire la sintassi per ricavare il risultato prescelto, è
necessario analizzare la correttezza dei dati inseriti nel campo input. Ecco come:
// funzione che verifica il corretto inserimento della data
function verins(vdata) {
// effettua la conversione della data in valori numerici
gg=parseFloat(vdata.substring(0,2))
mm=parseFloat(vdata.substring(3,5))
aa=parseFloat(vdata.substring(6,10))
// verifica che i giorni siano compresi fra 1 e 31 i mesi tra 1 e 12 ecc.
if(vdata.length!=10 | gg<1 | gg>31 | mm<1 | mm>12 | aa<1900 | aa>2008)
{
alert("Hai inserito una data errata \n o in formato non valido")
document.form1.data.value=""
document.form1.data.focus()
}
// se non vi sono errori viene invocata la funzione di calcolo e gli vengono
// passati i valori di giorno, mese e anno
else { calc1(gg,mm,aa) }
}
I giorni dovranno essere compresi tra 1 e 31, i mesi tra 1 e 12, gli anni
non dovranno essere inferiori a 1900 e superiori a 2008. Nel caso in cui
questi estremi non venissero rispettati, oppure il campo venisse lasciato
vuoto, apparirebbe una finestra di alert con il messaggio:
"Hai inserito una data errata
o in formato non valido"
Cio' e' possibile grazie alla riga di codice qui riportata:
alert("Hai inserito una data errata \n o in formato non valido")
A titolo didascalico, chiariamo che il comando /n inserisce un'interruzione di riga.
// funzione che rileva il segno zodiacale con una semplice comparazione fra
// valori inseriti e date predefinite per ciascun segno
function calc1() {
segni=new
Array("Acquario","Pesci","Ariete","Toro","Gemelli","Cancro","Leone","Vergine
","Bilancia","Scorpione","Sagittario","Capricorno")
if((mm==1 && gg>=20) | (mm==2 && gg<=17)) { utsegno=segni[0] }
if((mm==2 && gg>=18) | (mm==3 && gg<=19)) { utsegno=segni[1] }
if((mm==3 && gg>=20) | (mm==4 && gg<=19)) { utsegno=segni[2] }
if((mm==4 && gg>=20) | (mm==5 && gg<=20)) { utsegno=segni[3] }
if((mm==5 && gg>=21) | (mm==6 && gg<=20)) { utsegno=segni[4] }
if((mm==6 && gg>=21) | (mm==7 && gg<=22)) { utsegno=segni[5] }
if((mm==7 && gg>=23) | (mm==8 && gg<=22)) { utsegno=segni[6] }
if((mm==8 && gg>=23) | (mm==9 && gg<=22)) { utsegno=segni[7] }
if((mm==9 && gg>=23) | (mm==10 && gg<=22)) { utsegno=segni[8] }
if((mm==10 && gg>=23) | (mm==11 && gg<=22)) { utsegno=segni[9] }
if((mm==11 && gg>=22) | (mm==12 && gg<=21)) { utsegno=segni[10] }
if((mm==12 && gg>=22) | (mm==1 && gg<=19)) { utsegno=segni[11] }
In questo array (se non sapessi cos'è fai riferimento a
www.risorse.net/javascript) vengono impostati i 12 segni
zodiacali (le voci sono 11 perché si comincia a contare da 0) ed il periodo
di tempo che li delimita.
Una cosa sintatticamente simile si fa per i segni cinesi che però, al
contrario di quelli zodiacali, sono delimitati in termini di anni (chiunque
sia nato nel 1982 sarà del segno cinese del cane, indipendentemente dal
mese di nascita). Vediamo comunque il codice:
// funzine che definisce i parametri per l'assegnazione del segno cinese:
// un segno ogni 12 anni invece che 1 ogni (circa) 12 mesi.
function calc2() {
sco=new
Array("1900","1912","1924","1936","1948","1960","1972","1984","1996","2008")
bue=new
Array("1901","1913","1925","1937","1949","1961","1973","1985","1997","2009")
tig=new
Array("1902","1914","1926","1938","1950","1962","1974","1986","1998","2010")
con=new
Array("1903","1915","1927","1939","1951","1963","1975","1987","1999","2011")
dra=new
Array("1904","1916","1928","1940","1952","1964","1976","1988","2000","2012")
ser=new
Array("1905","1917","1929","1941","1953","1965","1977","1989","2001","2013")
cav=new
Array("1906","1918","1930","1942","1954","1966","1978","1990","2002","2014")
cap=new
Array("1907","1919","1931","1943","1955","1967","1979","1991","2003","2015")
sci=new
Array("1908","1920","1932","1944","1956","1968","1980","1992","2004","2016")
gal=new
Array("1909","1921","1933","1945","1957","1969","1981","1993","2005","2017")
can=new
Array("1910","1922","1934","1946","1958","1970","1982","1994","2006","2018")
cin=new
Array("1911","1923","1935","1947","1959","1971","1983","1995","2007","2019")
// assegna il nome del segno al valore restituito dal confronto fra la data
// immessa e quelle per il calcolo
for(n=0;n<10;n++) {
if(aa==sco[n]) { val="Scoiattolo" }
if(aa==bue[n]) { val="Bue" }
if(aa==tig[n]) { val="Tigre" }
if(aa==con[n]) { val="Coniglio" }
if(aa==dra[n]) { val="Drago" }
if(aa==ser[n]) { val="Serpente" }
if(aa==cav[n]) { val="Cavallo" }
if(aa==cap[n]) { val="Capra" }
if(aa==sci[n]) { val="Scimmia" }
if(aa==gal[n]) { val="Gallo" }
if(aa==can[n]) { val="Cane" }
if(aa==cin[n]) { val="Cinghiale" }
}
risult(utsegno,val)
}
La pagina di risposta contente i risultati dell'interrogazione, viene creata
dinamicamente grazie alle righe:
function risult(utsegno,val) {
document.write("Il tuo segno zodiacale è: <b>"+utsegno+"<br></b> Il tuo
segno cinese è: <b>"+val)
document.close()
}
La demo, e quindi questo numero della mailing list, si chiude con il codice
Html generatore dell'indispensabile form:
<body onLoad="document.form1.data.focus()">
<h2>Rileva il segno zodiacale di una persona</h2>
<form name="form1">
<br>
Inserisci la data di nascita (gg/mm/aaaa)
<input type="text" name="data" size=10 maxlength=10>
<input type="button" value="ok" onClick="verins(data.value)">
</form>
|
| |
