Gestione di date e timer

Transcript

Gestione di Date e Timer – Dispensa corso DHTML EspertoWeb – Francesco Leonetti
JAVASCRIPT
GESTIONE DI DATE E TIMER
Dispensa corso DHTML a cura di Francesco Leonetti
[email protected]
Copyright 2002, EspertoWeb - www.espertoweb.it
1
Oggetto Date()
Javascript mette a disposizione una classe di oggetto denominata “Date” che consente di
estrarre data e ora attuale del sistema.
Creando quindi un oggetto di tipo “Date” è possibile applicare ad esso le funzioni che
estraggono tali informazioni.
Ad esempio, scrivendo:
data = new Date();
si crea un oggetto di tipo Date, in questo esempio chiamato data (ma potete usare un
qualsiasi nome di variabile a piacere).
Ora è possibile applicare sull'oggetto le funzioni utili per avere le informazioni che ci servono.
Ecco le funzioni applicabili:
m =data.getMonth();
la variabile m contiene ora un numero compreso tra 0 e 11 corrispondente al mese attuale (0
per gennaio, sino a 11 per dicembre).
g=data.getDate();
la variabile g contiene ora il numero del giorno attuale (ad esempio 28, se oggi è 28 Febbraio
2002).
gs = data.getDay();
la variabile gs contiene ora un numero compreso tra 0 e 6 corrispondente al nome del giorno
settimanale (0 per domenica, 1 per lunedì sino a 6 per sabato);
a=data.getYear();
la variabile a contiene ora il numero dell’anno corrente (ad esempio: 2002).
2
A questo punto già si potrebbe ottenere una stringa rappresentante la data attuale.
Ad esempio con la seguente istruzione:
oggi = g+”/”+m+”/”+a;
se oggi fosse il 28 Febbraio 2002 la variabile oggi conterrebbe “28/2/2002”, mentre la
variabile gs (al momento non utilizzata) conterrebbe il valore “5” (corrispondente a giovedì ).
Il codice seguente dimostra un esempio di applicazione dell’oggetto di tipo Date().
(La pagina potete anche vederla su:
http://www.espertoweb.net/utenti/fleo/esempi/data.htm )
<html>
<head>
<title>FLEO: Visualizza Data</title>
<script language="JavaScript">
function data_oggi() {
var data = new Date();
var m= data.getMonth();
var g=data.getDate();
var gs = data.getDay();
var a=data.getYear();
var giorni_settimana = new Array();
giorni_settimana[0]="Domenica";
giorni_settimana[1]="Lunedì ";
giorni_settimana[2]="Martedì ";
giorni_settimana[3]="Mercoledì ";
giorni_settimana[4]="Giovedì ";
giorni_settimana[5]="Venerdì ";
giorni_settimana[6]="Sabato";
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";
return giorni_settimana[gs]+", "+g+" "+mesi[m]+" "+a;
}
</script>
</head>
3
<body bgcolor=white>
<b>Ciao gentile visitatore o gentilissima visitatrice...</b><br>
Oggi è <b><script language=javascript>
document.write(data_oggi());
</script></b>
e sono felice di averti qui! :)
</body>
</html>
NOTA: Per costruire la stringa finale ho pensato di convertire il numero del mese nel nome
corrispondente (gennaio, febbraio, etc..) e analogamente anche il numero del giorno della
settimana nel corrispondente nome (lunedi', martedi', etc..). Per fare cio' ho prima creato due
"array", in uno ho assegnato per ogni indice il corrispondente nome del mese, un altro mi e'
servito per i nomi della settimana.
In questo modo per ottenere il nome del mese (analogamente del giorno della settimana) non
mi resta che individuare dal corrispondete array l’elemento che ha come numero lo stesso
numero del mese ottenuto dalle funzioni su "data".
Oltre al giorno, giorno della settimana, mese e anno, è possibile estrarre anche l’ora attuale
(ora, minuti, secondi).
hh = data.getHours();
la variabile hh contiene l’ora attuale (da 0 a 24);
mm = data.getMinutes();
la variabile mm contiene i minuti dell’ora attuale (da 0 a 59);
ss = data.getSeconds();
la variabile ss contiene i secondi dell’ora attuale (da 0 a 59).
A cosa può servirci ottenere l’ora attuale?
Potremmo pensare di inserire su una pagina web un orologio o un timer per cronometrare il
tempo di risposta ad un quiz. Ma l’orologio dovrà modificare l’ora visualizzata ogni secondo.
Avremmo quindi bisogno di una tecnica che ci consenta di modificare il contenuto di una
pagina web ad ogni intervallo di tempo predefinito. Esiste questo modo e lo vedremo in
seguito.
4
La pagina seguente invece dimostra un esempio di applicazione un po’ più frivolo. Una pagina
web che dice “buongiorno”, “buonpomeriggio”, “buonasera” o “buonanotte” in dipendenza
dell’ora in cui viene visitata. Il tutto ha senso solo se i visitatori sono nello stesso fuso orario
del server. Se un americano infatti venisse a visitare questa pagina in tarda mattinata gli
risulterebbe strano sentirsi accogliere con un “buonasera”. Ma l’esempio serve solo per
dimostrare la tecnica ;)
http://www.espertoweb.net/utenti/fleo/esempi/benvenuto.htm )
<html>
<head>
<title>FLEO: Benvenuto</title>
<script language=javascript>
function saluto() {
var hh = data.getHours();
var ciao="";
if (hh>=0 && hh < 6) {
ciao = "Buonanotte";
};
if (hh>=6 && hh < 13) {
ciao = "Buongiorno";
};
if (hh>=13 && hh < 17) {
ciao = "Buonpomeriggio";
};
if (hh>=17 && hh < 23) {
ciao = "Buonasera";
};
return ciao;
};
</script>
</head>
<body bgcolor="white">
document.write('<b>'+saluto()+'</b> gentile visitatore');
</script>
</body>
</html>
La funzione saluto() ottiene da un oggetto di tipo Date() l’ora attuale e restituisce un valore
(contenuto nella variabile ciao) assegnato in dipendenza di una serie di controlli sull’ora. Nel
5
corpo della pagina viene concatenato il valore restituito dalla funzione saluto() per costruire
una stringa di codice HTML da inserire nella pagina web.
6
Gestione di timer in Javascript:
SetInterval(), clearInterval(), setTimeOut()
Vediamo ora come visualizzare su una pagina web continuamente data e ora attuale. Una sorta
di orologio permanente.
Abbiamo tutti gli elementi per estrarre le informazioni di data e ora. Il problema qui è dato dal
fatto che l’ora cambia ogni secondo. Ogni secondo quindi dovremmo modificare il testo
contenuto nella pagina web. Non possiamo certo pretendere che l’utente ricarichi la pagina
ogni secondo!
Ciò di cui abbiamo bisogno è una sorta di “timer” da far scattare ad ogni intervallo di tempo e
che ad ogni “scatto” faccia corrispondere l’esecuzione di una data azione o funzione (che in
questo caso dovrebbe essere: aggiorna l’orario).
Ebbene in Javascript esiste questo timer! Si chiama SetInterval() ed è di semplicissimo
utilizzo.
SetInterval() è un oggetto predefinito di Javascript, come Date() . Quando lo si richiama gli si
deve passare due parametri:
-
la funzione Javascript da richiamare;
-
l’intervallo di tempo (in millisecondi) in cui scattare e richiamare la funzione Javascript
definita come primo parametro.
SetInterval() restituisce un valore che può essere usato per identificare il timer.
Il timer quando viene attivato viene eseguito indefinitamente fintanto che si chiude la pagina o
si richiama la funzione clearInterval() passando come parametro l’identificativo del timer che si
vuole interrompere. Quando il timer è in esecuzione ad ogni scadenza dell’intervallo di tempo
specificato esegue l’azione o funzione associata.
Ad esempio:
timer_orologio = SetInterval(mostra_ora(),1000);
Viene attivato un timer identificato da “timer_orologio” il quale ogni 1000 millisecondi (quindi
ogni secondo) esegue la funzione mostra_ora().
Per interrompere il timer si eseguirà l’istruzione:
clearInterval(timer_orologio);
7
Il codice seguente dimostra l’applicazione di questa tecnica:
http://www.espertoweb.net/utenti/fleo/esempi/ora.htm )
<html>
<head>
<title>FLEO: Orologio</title>
Si definisce la variabile
timer_orologio all’inizio
FUORI dalle funzioni in
modo che essa sia
utilizzabile da ogni
funzione
<script language="JavaScript">
var timer_orologio;
function start_orologio() {
timer_orologio=setInterval("mostra_ora()",1000);
}
function stop_orologio() {
clearInterval(timer_orologio);
};
function mostra_ora() {
var hh = data.getHours();
var mm = data.getMinutes();
var ss = data.getSeconds();
La funzione stop_orologio
annulla il timer identificato
dalla variabile timer_orologio
passandola come parametro
a clearInterval.
var tempo = hh+":"+mm+":"+ss;
orologio.value=tempo;
}
</script>
</head>
Quando la pagina
viene caricata si
attiva l’orologio
<body onLoad="start_orologio()">
La funzione start_orologio crea un
timer con setInterval.
L’identificativo di tale timer viene
assegnato alla variabile
timer_orologio. SetInterval viene
chiamato in modo tale che ogni
1000 secondi esegua la funzione
mostra_ora.
Campo testo
identificato
come
“orologio”
L’ora attuale viene
assegnata al valore del
campo “orologio”
<INPUT type=text id=orologio size=10>
<INPUT type=button value="Stop" onclick="stop_orologio()">
<INPUT type=button value="Start" onclick="start_orologio()">
</body>
</html>
Due semplici pulsanti
che intercettano
l’evento “onClick” per
rispettivamente
attivare/disattivare il
timer.
8
SetTimeout()
La funzione setTimeout() è molto simile a setInterval(). Mentre setInterval() esegue una
certa funzione alla scadenza di OGNI intervallo di tempo, setTimeOut() esegue una certa
funzione solo una volta allo scadere dell’intervallo di tempo specificato.
Ecco un esempio scherzoso di utilizzo di questa funzione:
http://www.espertoweb.net/utenti/fleo/esempi/countdown.htm )
<html>
<head>
<title>FLEO: Countdown</title>
function avvia_countdown() {
setTimeout("bum()",5000);
};
function bum() {
alert ('BOOOM!!! :)');
};
</script>
</head>
La funzione avvia_countdown() chiama
setTimeout passando come parametri il nome di
una funzione e l’intervallo di tempo da attendere
prima di chiamare quella funzione.
Quando la pagina viene caricata si
genera l’evento onLoad in questo
caso intercettato dal tag BODY.
All’evento si associa il richiamo
della funzione avvia_countdown()
<body onLoad="avvia_countdown()">
Tra cinque secondi accadrà qualcosa di molto importante...
</body>
</html>
9

Gestione di date e timer

Transcript

Documenti analoghi

TERMO-TIMER DIGITALE DA CUCINA mod. HLA1

Quale di queste affermazioni secondo voi è vera? (mettere una croce)

Misurare il tempo

James Bond - Pino Travel

Realizzazioni su richiesta Orologio trofeo

MOD. FLASH 6 / 9 MOD. FLASH 6 / 9

Gadgets

Pdf Opera - Penne Matte

Orologio 2 - Arisimarialuisa