Finestre di dialogo Javascript (alert, confirm e prompt)

Nelle precedenti lezioni della nostra guida Javascript abbiamo presentato l’oggeto window di Javascript ed il fondamentale metodo open(); in questa lezione proseguiremo il nostro approfondimento su questo fondamentale oggetto approfondendo altri tre metodi davvero importanti attraverso i quali gli sviluppatori possono creare delle finestre di dialogo con le quali interagire con gli utenti.

Il metodo alert()

Attraverso il metodo alert è possibile creare delle finestre di avviso (alert box) al cui interno inserire messaggi personalizzati. L’unica facoltà concessa all’utente è di cliccare sul pulsante OK per chiudere la finestra.

E’ evidente come lo scopo di questo metodo sia, in pratica, quello di fornire dei semplici avvisi agli utenti.

Una caratteristica degli alert box è di forzare il browser a togliere il focus dalla finestra: questo vuol dire che l’utente non potrà interagire con altri elementi della pagina sino a quando non avrà chiuso (e si spera letto) la finestra.

La sintassi di alert è la seguente:

window.alert('Messaggio...');

o più semplicemente:

alert('Messaggio...');

In pratica non è necessario anteporre window ad alert, in quanto questi funzionerà ugualmente. Questa caratteristica è comune a tutti gli altri metodi presentati in questa lezione.

Vediamo un esempio di alert box scatenato dal click su una immagine:

<script>
function copyright() {
  alert("Tramonto in spiaggia\nAutore: Mario Rossi");
}
<script>
<img src="foto.jpg" onclick="copyright()">

Si noti che per andare a capo all’interno della finestra di alert abbiamo utilizzato \n, ovvero la notazione per un ritorno a capo fisico (newline).

Il metodo confirm()

Il metodo confirm, in un certo senso, è l’evoluzione dell’alert box. Attraverso questo metodo, infatti, viene mostrata all’utente una finestra sostanzialmente identica a quella prodotta dal metodo alert() ma, a differenza di quest’ultimo, viene lasciata all’utente una scelta se premere su OK o su Annulla.

Attraverso questo metodo, ad esempio, è possibile porre all’utente delle richieste di conferma alle quali, ovviamente, potrà rispondere in modo affermativo (OK) oppure no (Annulla). Il metodo confirm restituisce true alla pressione del tasto OK e false alla pressione del tasto Annulla.

Come nel caso di alert, anche confirm toglie il focus alla finestra ed "obbliga" l’utente a rispondere per poter sbloccare le altre funzionalità della pagina web.

Vediamo un esempio scolastico:

var domanda = confirm("Premi un buttone");
if (domanda === true) {
  alert("Hai premuto OK");
}else{
  alert("Hai premuto Annulla");
}

Vediamo ora un esempio un po’ più pratico:

function cancella(id) {
  var domanda = confirm("Sei sicuro di voler cancellare?");
  if (domanda === true) {
    location.href = 'cancella.php?id='+id;  
  }else{
    alert('Operazione annullata');
  }
}

Nel nostro esempio abbiamo creato una semplice funzione per la cancellazione di un record dal database, prima di procedere, però, chiediamo conferma all’utente. Se questo clicca su OK si effettua un redirect alla pagina di cancellazione, in caso contrario non succede nulla (e mostriamo un semplice avviso).

Il metodo prompt()

Il metodo prompt apre una finestra di dialogo con un campo di testo all’interno del quale l’utente può inserire del contenuto. Se l’utente clicca su OK il metodo prompt restituisce il valore inserito, in caso contrario restituisce null.

Questo metodo è utilizzato per raccogliere piccole informazioni dall’utente come, ad esempio, il suo nome o l’anno di nascita… informazioni che saranno poi utilizzate per modellare la pagina che gli verrà mostrata. Vediamo un esempio:

var anno = prompt("In che anno sei nato?", "");
if (anno !== null) {
  var dt = new Date();
  var anno_corrente = dt.getFullYear();
  var eta = (anno_corrente - anno);
  if (eta > 18) {
    alert("Sei maggiorenne");
  }else{
    alert("Sei minorenne");    
  }
}

Come potete notare il metodo prompt ammette due argomenti: il primo è la descrizione di ciò che si chiede all’utente di inserire nella casella di testo mentre il secondo è un valore di default (in sostanza la casella di testo apparirà "pre-compilata" con il valore indicato). Esempio:

var paese = prompt("Dove sei nato?", "Italia");