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 - JavaScript alert: 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>Finestre di conferma - JavaScript confirm: tipo window.confirm()
Come predetto, i confirm box (questo è il nome per esteso) offrono la possibilità all'utente di scegliere se continuare un'operazione legata al verificarsi si un evento o meno.
Il loro utilizzo più classico è prende forma con il classico tasto "Annulla operazione" presente nei moduli da compilare: cliccando su questo tasto ci può venire richiesto se confermare o meno l'annullamento, quindi lo svuotamento del modulo o di parte di esso, vediamo all'opera questa diffusissima funzione:
<script type="text/javascript">
<!--
function ConfermaOperazione() {
var richiesta = window.confirm("Reimpostare il modulo o continuare?");
return richiesta;
}
//-->
</script>Questo è lo script di riferimento per l'esecuzione della funzione descritta in precedenza, vediamo ora il modulo Html:
<form name="frmEsempio" onReset="return ConfermaOperazione()">
<input type="text" name="txtEsempio" size="30">
<input type="reset" value="Annulla operazione">
</form>Per effettuare un test si provi a scrivere un testo o una parola qualsiasi nella casella di testo simulando la compilazione di un modulo e si scelga di annullare l'operazione mediante l'apposito tasto, all'aprirsi della finestra di scelta si clicchi sul tasto Annulla una prima volta ed una seconda volta su Ok per confermare il desiderio di annullare l'operazione, tanto per verificare il diverso comportamento del programma:
È possibile impostare un controllo del genere anche chiedendo all'utente la conferma dell'invio di un modulo, sulla falsa riga del messaggio che ci invia un client di posta elettronica quando stiamo inviando un'email col metodo enctype="text/plain".
Per un'operazione del genere dobbiamo ricorrere ad un'istruzione di tipo if ... else:
<script type="text/javascript">
<!--
function ConfermaInvio() {
var annulla = window.confirm("Si è scelto di inviare questo modulo al destinatario. Interrompere l'esecuzione?");
if (annulla) {
return annulla;
}
else {
window.alert("Questo è solo un esempio :-)");
}
}
//-->
</script>Il modulo Html è strutturalmente analogo al precedente:
<form name="frmEsempio" onReset="return ConfermaInvio()">
<input type="text" name="txtEsempio" size="30">
<input type="reset" value="Annulla operazione">
</form>Come per l'altro esempio, si provi, all'apertura del confirm box, una prima volta a scegliere di annulare l'annullamento dell'operazione, poi lo si confermi:
Finestre di immissione dati - JavaScript prompt: tipo window.prompt()
Concludiamo questa panoramica sulla modalità di messaggistica con popup di Javascript, esaminando i prompt box.
La sintassi non si differenzia un gran che a dispetto dei due metodi esaminati in precedenza, vediamo un primo esempio:
<input type="button" value="Lancia il prompt di prova" onclick="window.prompt('Titolo del prompt','Testo facoltativo del prompt')">
verifichiamo l'output
<input type="button" value="Lancia il prompt di prova"
onclick="window.prompt('Titolo del prompt','Testo facoltativo del prompt')" />In genere queste finestre si impostano al caricamento della pagina e si richiede all'utente di inserire il proprio nome per stamparlo a video, proviamo a creare qualcosa di più significativo del banale esempio appena proposto, proprio chiedendo ad un utente di inserire il proprio nome:
<script type="text/javascript">
<!--
function TuoNome() {
nome = prompt ("Inserisci il tuo nome:", "");
if (nome == 'Tuo nome' || nome == null || nome == "") {
nome = "amico";
}
return (nome);
}
//-->
</script>Questo script va inserito dell'header del documento Html; il seguente, invece, è il richiamo dello script all'interno della pagina nella posizione in cui si desidera che venga stampato a video il dato inserito:
<script type="text/javascript">
<!--
document.write("Ciao " + TuoNome() + "!");
//-->
</script>