Gestire le date con JavaScript: l'oggetto Date()

JavaScript offre una serie di utility per il controllo e la gestione della data, più che mai di semplice implementazione logica e sintattica rispetto ad altri linguaggi, ma di potenza di gran lunga superiore rispetto agli stessi, il tutto è reso possibile grazie all'utilizzo dell'oggetto Date().

Prima di passare al codice utile alla risoluzione di questo problema, è bene spendere qualche parola introduttiva e chiarificatrice su questo particolare argomento. L'ora che verrà visualizzata sarà l'ora del sistema operativo del browser dell'utente, a questo, con l'utilizzo di un linguaggio di scripting client-side come JavaScript, non c'è rimedio. Per visualizzare l'orario del server bisognerà utilizzare una tecnologia server-side, come PHP, ASP, etc.

In questa sede affronteremo diversi argomenti legati alla data in modo da fornirvi esempi su cui poter successivamente costruire i vostri piccoli script automatizzati. Per prima cosa diamo un'occhiata all'oggetto Date() da un punto di vista più tecnico.

Utilizzo e metodi dell'oggetto Date()

L'oggetto Date() viene dichiarato in una variabile di tipo new NOME_OGGETTO(), a questa variabile vengono associati dei metodi che, memorizzati a loro volta in una serie di variabili, vengono poi utilizzate, ad esempio, per stampare a video i relativi output.

Ecco un elenco dei principali metodi dell'oggetto Date():

Metodo	Descrizione
getDate()	numero del giorno del mese corrente
getDay()	numero delgiorno della settimana corrente, ad esempio 1=lunedì, 5=Venerdì...
getMonth()	numeri di mese corrente, contati dall'interprete JavaScript da 0 a 11
getFullYear()	anno corrente
getHours()	orario corrente
getMinutes()	minuti dell'ora corrente
getSeconds()	secondi dell'ora corrente
getMilliseconds()	millisecondi dell'ora corrente

Di ognuno di questi esiste l'equivalente col prefisso set... che serve ad impostare il valore in questione. Ad esempio, mentre getMinutes serve ad ottenere il numero di minuti, setMinutes serve ad impostarli per effetuare calcoli o controlli basati sull'orario. Incontreremo proprio questo metodo come ultimo esempio effettuando un calcolo sui minuti che mancano alla fine dell'ora.

La variabile "data" viene dichiarata come una normale variabile atta ad istanziare un oggetto, ad esempio:

var data = new Date();

Sperimentiamo un semplice codice utile a stampare a video l'orario corrente il formato HH:MM:SS:mm, ovvero ore, minuti, secondi e millisecondi, anche se in genere ci si limita ai secondi, e spesso nemmeno a quelli. Utilizziamo questa forma solo a scopo didattico:

<script type="text/javascript">
<!--
var data = new Date();
var Hh, Mm, Ss, mm;
Hh = data.getHours() + ":";
Mm = data.getMinutes() + ":";
Ss = data.getSeconds() + ":";
mm = data.getMilliseconds() + ":";
document.write("Sono le ore " + Hh + Mm + Ss + mm);
//-->
</script>

JavaScript: date now

Per quanto semplice possa essere questo script è bene analizzarne i vari passaggi.

In primo luogo dichiariamo la variabile "data" come detto in precedenza, dichiariamo poi quattro variabili, una per ogni valore associato ed aggiungiamo come stringa il classico carattere di separazione dell'orario, i due punti (:), poi ricorriamo alla funzione document.write() per eseguire la stampa a video. Ecco il risultato:

Allo stesso modo possiamo stampare a video i valori associati al giorno, al mese ed all'anno in formato gg/mm/aaaa, con una piccola particolarità per quanto riguarda il mese: l'interprete JavaScript conta i mesi da 0 a 11, quindi, per identificare il mese di Gennaio verrà utilizzato il numero 0.

Per rendere esatta la stampa a video, alla variabile associata al mese verrà addizionata una unità, dato che la data 12/03/1978 per l'interprete JavaScript equivale al 12 Aprile dell'anno 1978, ma il lettore la interpreterà come 12 Marzo. Addizionando l'unità alla variabile associata ai mesi, la stampa a video sarà 12/04/1978, equivalendo al 12 Aprile sia per l'interprete JavaScript sia per il lettore. Vediamo un esempio:

<script type="text/javascript">
<!--
var data = new Date();
var gg, mm, aaaa;
gg = data.getDate() + "/";
mm = data.getMonth() + 1 + "/";
aaaa = data.getFullYear();
document.write("Oggi è il " + gg + mm + aaaa);
//-->
</script>

L'output di questo codice di esempio è il seguente:

utilizzando questa volta il carattere slash (/) come separatore tra i valori, più adatto alla visualizzazione della data.

Ma vediamo ora qualche utile applicazione dell'oggetto Date(). Iniziamo con il classico saluto agli utenti.

Salutiamo i nostri utenti! JS new Date

Credo che fin qui nessuno abbia trovato particolari difficoltà.

Possiamo sfruttare l'orario o il giorno per far si che si verifichino diversi eventi in loro funzione, ad esempio possiamo scrivere una routine che controlli che al visitatore venga augurato il buongiorno, il buon pomeriggio, la buonasera o la buonanotte, ragionevolmente a seconda dell'orario in cui visualizza la pagina contenente il seguente codice:

<script type="text/javascript">
<!--
var saluto = new Date();
var orario = saluto.getHours();
if ((orario > 06) && (orario <= 12)) {
document.write("Buon giorno!");
}
if ((orario > 12) && (orario <= 18)) {
document.write("Buon pomeriggio!");
}
if ((orario > 18) && (orario <= 24)) {
document.write("Buona sera!");
}
if ((orario >= 00) && (orario <= 06)) {
document.write("Buona notte!");
}
//-->
</script>

A quest'ora ci verrà augurato...

Stampa della data in formato alfabetico

Ricapitolando, fino ad ora ci siamo occupati di vedere quali sono i metodi più utilizzati da JavaScript per lavorare con le date, poi abbiamo scritto un piccolo programmino che ci restituisce dinamicamente un messaggio in base all'orario, vediamo ora come realizzare una routine che si basi sui metodi dell'oggetto Date(), ma che restituisce un risultato in cooperazione con componenti del linguaggio JavaScript.

Realizziamo una routine che ci mostri la data e l'ora in formato alfabetico, il giorno della settimana, la data il mese espresso in lettere e non in numeri e infine l'orario.

Analizziamo lo script intero, opportunamente commentato, prima di analizzarne le singole fasi salienti:

<script type="text/javascript">
<!--
var data = new Date();
var set, gg, mm, aaaa, h, m, s;
//Crea la tabella dei mesi
var mesi = new Array();
mesi[0] = "Gennaio";
mesi[1] = "Febbraio";
mesi[2] = "Marzo";
mesi[3] = "Aprile";
mesi[4] = "Maggio";
mesi[5] = "Giugno";
mesi[6] = "Luglio";
mesi[7] = "Agosto";
mesi[8] = "Settembre";
mesi[9] = "Ottobre";
mesi[10] = "Novembre";
mesi[11] = "Dicembre";
//Crea la tabella dei giorni della settimana
var giorni = new Array();
giorni[0] = "Domenica";
giorni[1] = "Lunedì";
giorni[2] = "Martedì";
giorni[3] = "Mercoledì";
giorni[4] = "Giovedì";
giorni[5] = "Venerdì";
giorni[6] = "Sabato";
//Estrae dalla tabella il giorno della settimana
set = giorni[data.getDay()] + " ";
gg = data.getDate() + " ";
//Estrae dalla tabella il mese
mm = mesi[data.getMonth()] + " ";
aaaa = data.getYear();
h = data.getHours() + ":";
m = data.getMinutes() + ":";
s = data.getSeconds();
document.write("Oggi è " + set + gg + mm + aaaa + ", ore " + h + m + s);
//-->
</script>

Il risultato adesso è di certo migliore rispetto a prima... giudicate voi!

Un orologio scorrevole

Negli esempi sin ora affrontati abbiamo visto come creare un orologio statico, nel senso che ci mostra a che ora (secondo il client) quella pagina si è collegata ed ha visualizzato quell'orario che resterà fermo fino al prossimo refresh di pagina o al prossimo collegamento.

Creiamo ora un orologio con un effetto decisamente più accattivante, ma soprattutto che scorra dinamicamente i secondi, i minuti, ed eventualmente le ore (se l'utente resta sulla pagina per tanto tempo!) all'interno di una casella di testo.

Vediamo il codice Html per la creazione dell'orologio:

<div align="center">
<form name="formOrologio">
<input type="text" name="textOrologio" class="stileOrologio" onFocus="this.blur()" onSelectStart="return false;">
</form>
</div>

Assegniamo un nome identificativo sia al form che alla casella di testo, alla quale in più assegniamo una classe stilistica, che esamineremo come ultimo aspetto, in più con l'istruzione onFocus="this.blur()" impediamo la scrittura all'interno della casella riportante l'orologio, spostando istantaneamente il focus li dove vi venga posizionato, ed onSelectStart="return false;" per impedire anche che il testo venga selezionato.

Ecco lo script per il funzionamento dell'orologio:

<script type="text/javascript">
<!--
function Clock() {
var orologio = new Date();
var HH = orologio.getHours();
var MM = orologio.getMinutes();
var SS = orologio.getSeconds();
parseInt(MM) < 10 ? MM = "0" + MM : null;
parseInt(SS) < 10 ? SS = "0" + SS : null;
document.formOrologio.textOrologio.value = HH + ":" + MM + ":" + SS;
window.setTimeout("Clock()", 1000);
}
//-->
</script>

Lo stile da assegnare all'orologio è soggettivo e dipende dalla grafica utilizzata per le proprie pagine, utilizzando la classe stileOrologio, io l'ho immaginato così:

<style type="text/css">
input.stileOrologio {
text-align: Center;
width: 100px;
border: Solid 1px #000000;
color: #FF0000;
font: Bold 11px Tahoma;
}
</style>

Ultimo passo per la creazione dell'orologio è la sua impostazione al caricamento della pagina (che noi per praticità abbiamo otteniuto con un onload all'interno della funzione JavaScript), con l'istruzione

<body onLoad="Clock()">

eccolo!!!

Analizziamo lo script utilizzato, includiamo tutta la routine in una funzione, dichiariamo l'oggetto "data" e le variabili associate ad ore, minuti e secondi, a questo punto utilizziamo una forma condizionale per dire che "se la parserizzazione dell'intero utilizzato per i secondi è minore di 10, allora la variabile associata ai minuti (nel primo caso) avrà valore zero più il valore della variabile stessa, altrimenti sarà nulla", lo stesso vale sia per i minuti che per i secondi, si assocerà l'orario al valore della casella di testo e si stabilirà un timeout di un secondo.

Calcolo dei minuti che mancano alla fine dell'ora

Concludiamo questa panoramica sull'oggetto Date che, come abbiamo potuto constatare di non difficile utilizzo, con un esempio lievemente più complesso, almeno dal punto di vista dell'impostazione e del ragionamento, calcoliamo quanti minuti mancano alla fine dell'ora corrente, mi spiego meglio, supponiamo che siano le 6:06 del mattino (lo sono davvero!!!), voglio ottenere il numero 54 che rappresenta i minuti che mancano alle 7:00.

A questo proposito utilizzeremo il metodo setMinutes per impostare un numero di minuti (ovviamente 60) su cui effettuare il calcolo, vediamo lo script:

<script type="text/javascript">
<!--
function Minuti() {
var data = new Date();
var minuti = data.getMinutes();
var mancanti = data.setMinutes(60 - minuti);
minuti = data.getMinutes();
return(minuti);
}
document.write("<div>Mancano " + Minuti() + " minuti alla fine dell'ora!!!</div>");
//-->
</script>

Espletati i soliti preliminari, ovvero dichiararto l'oggetto "data" ed, in questo caso, solo la variabile associata ai minuti, dichiariamo una variabile associata ai minuti che mancano alla fine dell'ora in cui eseguiamo il calcolo

var mancanti = data.setMinutes(60 - minuti);

restituendo in fine il nuovo valore dei minuti che stampiamo a video con l'utilizzo del document.write().

Ehi a proposito... qualcuno sa che ora è?