Messaggi agli utenti con JavaScript

20 marzo 2006

I messaggi di avviso, altresì detti finestre di dialogo, per i cultori della sintassi “Basic” chiamati “Message Box”, sono una utility messa a disposizione degli sviluppatori da Javascript, di fatto si tratta di finestre che si aprono in popup al determinarsi di un evento o di una condizione.

Abbiamo a disposizione tre differenti tipi di finestre di messaggio:

1. alert – finestre di avviso che ci comunicano un messaggio: il dialogo avviene solo dal sito all’utente.

2. confirm – finestre di scelta che ci chiedono di confermare o meno il verificarsi di un evento: il dialogo è bilaterale.

3. prompt – finestre che richiedono l’immissione di un dato: il dialogo avviene dall’utente al sito, il quale ci restituirà qualcosa in output.

Si tratta di tre metodi dell’oggetto window, anche se non è necessario scriverli comprendendo il nome dell’oggetto di riferimento, ma per correttezza sintattica in questo Tutorial saranno presentati nella loro forma corretta e completa.

Finestre di avviso di tipo window.alert()

La sintassi del primo che incontriamo è semplicissima, è sufficiente inserire nello script, o direttamente nell’evento, la stringa di codice:

window.alert("Testo del messaggio")

Vediamo un primo semplicissimo esempio:

<input type="button" value="Lancia l'alert di prova" onClick="window.alert('Testo del messaggio')">

Nell’esempio appena proposto abbiamo incluso l’alert() direttamente all’interno dell’evento sull’elemento Html, in questo caso un bottone di un form, ma in casi molto più complessi, ad esempio al verificarsi di una condizione tipo la validazione di un form, conviene, oppure in taluni casi è indispensabile, inserire l’alert() nello script e richiamare la funzione dall’evento, come da prassi.

Per i meno pratici presento un esempio:

<script type="text/javascript">
<!--   
function mostraMessaggio() {
	window.alert("Questo è un esempio di alert incluso nello script.");   
}
//-->
</script>

Nell’elemento HTML richiamiamo la funzione:

<input type="button" value="Prova" onclick="mostraMessaggio()">

L’output di questo esempio è praticamente identico al precedente esempio, si provi per testare la veridicità di quanto appena affermato.

È possibile inserire un alert al caricamento della pagina oppure in uscita, includendo l’alert rispettivamente negli eventi onload ed onunload, ad esempio:

<body onload="window.alert('Esempio di messaggio di avviso al caricamento della pagina.')">

al caricamento, invece all’uscita:

<body onUnLoad="window.alert('Esempio di messaggio di avviso in uscita dalla pagina.')">

È anche possibile inserire più alert semplicemente accodandoli uno dopo l’altro, facendo attenzione a scrivere l’alert successivo a capo ed interrompendo la riga di codice col carattere punto e virgola (;), secondo le regola sintattiche del Javascript:

<script type="text/javascript">
<!--
function mostraMessaggi() {
   window.alert("Questo è il messaggio di avviso numero 1.");
   window.alert("Questo è il messaggio di avviso numero 2.");
   window.alert("Questo è il messaggio di avviso numero 3.");
   window.alert("Questo è il messaggio di avviso numero 4.");
   window.alert("Questo è il messaggio di avviso numero 5.");
   window.alert("Questo è il messaggio di avviso numero N.");
}
//-->
</script>

<a href="javascript:mostraMessaggi()">Testiamo questo esempio</a>
Testiamo questo esempio

Se vuoi aggiornamenti su Messaggi agli utenti con JavaScript inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Messaggi agli utenti con JavaScript

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy