[JavaScript] Visualizzare un orologio dinamico

JavaScript è sicuramente una potenza di linguaggio per la programmazione web. Purtroppo, dovendo essere interpretato dal client ha il limite di doversi trovare attivo nel browser dell’utente, ma è difficile trovare browser che non lo hanno attivato.

Il rischio di trovarlo disattivato è però teoricamente trascurabile quando si implementano elementi web di impatto visivo, ma di scarsa importanza pratica. E’ il caso della seguente funzione che visualizza un orologio che va avanti a secondi, come il più comune cronografo.

Le capacità di JavaScript permettono di attivere l’orologio senza dover ricaricare ogni volta la pagina. E udite udite, non c’è nessun fighissimo handler AJAX che si occupa di inviare misetiore richieste in background 🙂

Di seguito la funzione. Penso di averla scritta abbastanza chiaramente. Non dovrebbe esserci bisogno di spiegazione alcuna.

function getTheCurrentClock(id){
  GiorniSettimana = new Array();
  GiorniSettimana[0] = "Domenica";
  GiorniSettimana[1] = "Lunedì";
  GiorniSettimana[2] = "Martedì";
  GiorniSettimana[3] = "Mercoledì";
  GiorniSettimana[4] = "Giovedì";
  GiorniSettimana[5] = "Venerdì";
  GiorniSettimana[6] = "Sabato";
 
  Mese = new Array();
  Mese[0] = "Gennaio";
  Mese[1] = "Febbraio";
  Mese[2] = "Marzo";
  Mese[3] = "Aprile";
  Mese[4] = "Maggio";
  Mese[5] = "Giugno";
  Mese[6] = "Luglio";
  Mese[7] = "Agosto";
  Mese[8] = "Settembre";
  Mese[9] = "Ottobre";
  Mese[10] = "Novembre";
  Mese[11] = "Dicembre";
 
  Clock = new Date();
 
  if(Clock.getYear() < 1900){
    year = 1900+Clock.getYear();
  }else{
    year = Clock.getYear();
  }
 
  if(Clock.getHours() < 10){
    hours = "0"+Clock.getHours()
  }else{
    hours = Clock.getHours()
  } 
 
  if(Clock.getMinutes() < 10){
    minutes = "0"+Clock.getMinutes()
  }else{
    minutes = Clock.getMinutes()
  }
 
  if(Clock.getSeconds() < 10){
    seconds = "0"+Clock.getSeconds()
  }else{
    seconds = Clock.getSeconds()
  } 
 
  result = "Oggi &egrave; "+GiorniSettimana[Clock.getDay()]+", "+Clock.getDate()+" "+Mese[Clock.getMonth()]+" "+year+"<br />Sono le ore "+hours+":"+minutes+":"+seconds;
  document.getElementById(id).innerHTML = result;
  setTimeout("getTheCurrentClock(‘"+id+"’)", 1000);
}

Si capisce che il trucco malefico sta nella ricorsività della funzione. Non è un bene per applicazioni web based usare l’iterazione. Ci sono linguaggi che riescono a sfruttare la ricorsione quasi nativamente. Non è il caso di JavaScript, ma per una cosa tanto piccola va più che bene 🙂

E’ disponibile il solito esempio pratico da cui prelevare facilmente il sorgente.