Javascript ci mette a disposizione questi tre comodi metodi per interagire velocemente con l’utente. Vediamo come funzionano.

Alert

Il metodo alert serve a mostrare all’utente un messaggio in una finestrella di informazioni, molto simile a quella che si ottiene in visual basic con il comando msgbox(). Potete vedere come appare in Internet Explorer nell’immagine sovrastante.
Utilizzare questa finestra è semplicisimo, basta chiamare la funzione alert() passandovi come parametro la stringa che volete mostrare all’interno della finestra. Ad esempio la finestra nell’ immagine sovrastante è stata generata dal codice seguente:

 
alert(‘Ciao a tutti’);

Semplice no? Vediamo adesso il metodo confirm

Confirm

Il metodo confirm, come potete osservare nell’immagine è molto simile al metodo alert, ma aggiunge ad esso un pulsante: invece del semplice “ok” avrete anche la possibilità di selezionare “annulla”. Risulta quindi utile quando volete che l’utente faccia una scelta tra due opzioni. Ecco il codice d’esempio utilizzato per generare l’immagine sovrastante:

 
confirm(‘vuoi davvero chiudere questa finestra?’);

Con questo codice chiamerete semplicemente la finestra, ma non sarete in grado di reagire adeguatamente alla risposta dell’utente, vediamo un esempio più completo.

 
function askMe(){
	if(confirm(‘Vuoi abbandonare questo sito?’))
		window.location = ‘http://www.google.it’;
}

Come si deduce da questo esempio il metodo confirm restituisce true se viene schiacciato il tasto “ok”, altrimenti restituisce false. Ovviamente potete anche inserire una clausola else ed operatori boleani vari come nella variante seguente:

 
function askMe(){
	if(!confirm(‘Vuoi continuare a navigare in questo sito?’))
		window.location = ‘http://www.google.it’;
}

Notate l’utilizzo dell’ operatore booleano ” ! ” (NOT)…

Prompt

La funzione prompt permette all’utente di inserire del testo come risposta ad una particolare richiesta. Date un’occhiata all’immagine sovrastante se avete dei dubbi sulla sua funzionalità. Ecco il codice che è stato utilizzato per realizzare la finestra di prompt mostrata nell’immagine:

 
prompt(‘Inserisci il tuo nome!’);

Noi abbiamo scritto manualmente “proBLOG” all’interno dell’area di testo, ma esiste la posibilità di inserire un testo di default. Il metodo prompt prende come parametri due stringhe: la prima che serve a specificare il testo da mostrare nella finestra, la seconda (opzionale) serve appunto per specificare un testo di default per l’area di testo. Su internet explorer se non viene passato quest’ultimo parametro apparirà la stringa undefined. E’ buona regola quindi specificare anche il secondo parametro, va bene anche una stringa vuota.
Ecco quindi cosa avremmo dovuto scrivere nell’esempio precedente:

 
prompt(‘Inserisci il tuo nome!’,‘proBLOG’);

il metodo prompt restituisce la stringa inserita dall’utente nel caso in cui venga schiacciato il pulsante “ok”, altrimenti restituisce una stringa vuota oppure ” undefined ” (a seconda del browser). Vediamo un esempio leggermente più complesso:

 
function askName(){
	nome = prompt(“Dimmi come ti chiami”,“”);
	while(!nome)
		nome = prompt(“Dimmi come ti chiami”,“”);
	alert(nome+“! proprio un bel nome!”);
}

Il codice sovrastante continuerà a chiedere il vostro nome finchè non ne specificherete uno e cliccherete sul pulsante ok.

Nota

L’aspetto grafico delle finestre mostrate da queste tre funzioni cambia parecchio in base al browser ed al sistema operativo dell’utente che visita la vostra pagina. Il comportamento delle finestre dovrebbe comunque restare uguale, a parte qualche minimo dettaglio di cui abbiamo parlato anche sopra. Non dovreste quindi preoccuparvi più di tanto della compatibilità dei vostri script se utilizzate solo queste semplici funzioni, ma è comunque una buona regola verificare il comportamento dei vari script con più browser e sistemi operativi possibili.

Con questo è tutto. Al solito spero di essere stato più chiaro possibile, ma se avete dubbi o proposte potete lasciare un commento a questo articolo o contattarmi via mail. Alla prossima!

Questo articolo è stato pubblicato da loige, Sabato, 10 Febbraio 2007 alle 13:50 e classificato in JavaScript. Puoi seguire i commenti a questo articolo tramite il feed RSS 2.0. Puoi inviare un commento, o fare un trackback dal tuo sito.