Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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>
 

 
 
Home > dhtml > teoria > 2000 > marzo > ...   © 1999-2018 Risorse.net, tutti i diritti riservati