Percorso di navigazione nel sito per arrivare a questa pagina:

home » guide » javascript » Le finestre di sistema

Le finestre di sistema

Le finestre di sistema, anche dette finestre di dialogo (in inglese dialog boxes), sono finestrelle di avvertimento che ci permettono in modo semplice e veloce di far apparire un messaggio di avviso all'utente; hanno una grafica minimale e pre-impostata.

Le possibili tipologie di finestre di sistema sono tre:

  • alert (serve per dare un avviso)
  • confirm (serve per chiedere una conferma)
  • prompt (serve per chiedere l'immissione di un dato)

Sono finestre di tipo modale, cioè bloccano qualsiasi azione del browser fino a quando l'utente non interagisce con esse: un modo sicuro per richiamare l'attenzione.

Alert

Con alert possiamo visualizzare una finestra di dialogo contenente un messaggio ed un bottone di OK. Il browser interromperà tutte le operazioni e non le riprenderà finché non viene premuto il tasto OK presente nella finestrella.

La sintassi per far apparire il messaggio di alert è:

alert('testo del messaggio');

Questo è uno script davvero molto semplice che utilizza alert:

<script type="text/javascript">
/*<![CDATA[*/

alert('testo del messaggio');

/*]]>*/
</script>

Inserito tra i tag <head></head> l'effetto che otteniamo è l'apertura di una finestra di sistema all'apertura della pagina.

Un altro esempio dell'utilizzo di alert potrebbe essere questo:

<a href="http://www.progettareweb.it" onclick="alert('stai per visitare ProgettareWeb');">ProgettareWeb</a>

In questo caso al click sul link tramite l'event-handler onclick richiamiamo la nostra finestrella di alert.

Come potete constatare gli effetti ottenibili sono interessanti, ma danno solo un avvertimento senza possibilità di scelta. In molti casi può essere utile avere anche un tasto di dissenso: in questo caso dobbiamo usare confirm.

Confirm

Con confirm possiamo far apparire una finestra di dialogo con un messaggio e due bottoni: OK e Annulla. La sintassi è la seguente:

confirm('testo del messaggio');

Se l'utente clicca su OK, confirm restituisce un valore true (vero), se clicca su Annulla invece restituisce false (falso); quindi noi - a seconda della scelta dell'utente - possiamo interagire ed attivare o meno una funzione.

Un esempio potrebbe essere questo script (da mettere fra i tag <head></head>):

<script type="text/javascript">
/*<![CDATA[*/

function conferma(){

var messaggio = 'stai lasciando questo sito per visitare ProgettareWeb';

var scelta = confirm(messaggio);

  if (scelta == true)
  {
  self.location.href = 'http://www.progettareweb.it';
  }
}

/*]]>*/
</script>

Poi nel body inseriremo il nostro link richiamando lo script:

<a href="http://www.progettareweb.it" onclick="conferma(); return false;">ProgettareWeb</a>

In questo modo l'utente al click vedrà una finestra di avvertimento e solo se cliccherà su OK andrà a ProgettareWeb, mentre se cliccherà su Annulla non succederà nulla e resterà nella pagina.

Questo è solo un esempio semplice: volendo si potrebbe applicare questo script a tutti i link passando alla funzione il valore dell'attributo href dei link (modificando, ovviamente, anche il testo del messaggio), ma per ora tralasciamo.

Prompt

Il terzo metodo è il prompt, che permette di far apparire una finestra di sistema contenente il tasto di conferma OK, il tasto Annulla ed un campo in cui l'utente può digitare qualcosa. La sintassi è:

prompt('messaggio','risposta predefinita');

Come negli altri casi, abbiamo la possibilità di inserire un messaggio; in più possiamo anche inserire una risposta predefinita (volendo, possiamo anche non inserire nulla).

Un esempio di utilizzo di prompt potrebbe essere questo script, con il quale possiamo chiedere il nome all'utente per poi stamparlo nella pagina in un messaggio di saluto personalizzato. Tra i tag <body></body>, esattamente nel punto in cui vogliamo sia scritto il messaggio di saluto, inseriamo:

<script type="text/javascript">
/*<![CDATA[*/

var nome = prompt('Come ti chiami?','scrivi qui il tuo nome');

document.write('<p>Benvenuto '+nome+' su questa pagina</p>');

/*]]>*/
</script>

Attenzione ad alcuni comportamenti di default di prompt:

  • cliccando su Annulla viene restituito il valore undefined oppure null a seconda del browser: nel nostro esempio leggeremo "Benvenuto undefined/null su questa pagina"
  • cliccando su OK senza compilare il campo viene restituita la risposta predefinita: nel nostro esempio leggeremo "Benvenuto scrivi qui il tuo nome su questa pagina"
  • cliccando su OK senza compilare il campo, se non è stata specificata una risposta predefinita, viene restituito undefined oppure non viene restituito nulla a seconda del browser: nel nostro esempio potremo leggere "Benvenuto undefined su questa pagina" oppure "Benvenuto su questa pagina"

Per utilizzare lo script di esempio nelle pagine web c'è dunque ancora bisogno di perfezionarlo un po'. Lo vedremo più avanti.

Per ora è tutto. Nel prossimo aggiornamento alcuni accorgimenti per dare una sorta di formattazione al contenuto delle finestre di dialogo e per inserire alcuni caratteri senza aver problemi.

25 giugno 2006