Come creare una pop up in Javascript?

Nel linguaggio Javascript le pop-up sono facili da realizzare. Si può utilizzare l'istruzione ALERT

Un esempio pratico

Questo script mostra un esempio di utilizzo dell'istruzione Alert in uno script.

<script>
alert("Questa è una prova");
</script>

Come si utilizza l'istruzione Alert

Lo script va inserito nella sezione BODY del documento Html per essere eseguito. Inserendolo nella sezione dichiarativa HEAD, invece, non funziona.

A cosa serve?

Si tratta di un'istruzione particolarmente utile perché fornisce una funzione altrimenti inesistente in Html.

Come funziona?

Quando il browser incontra lo script lo esegue e visualizza a video una finestra pop-up con il testo indicato nell'istruzione Alert.

L'istruzione è particolarmente utile per mostrare a video dei messaggi di errore oppure di cattiva compilazione delle web form.

E' una tecnica di comunicazione un po' invasiva, perché blocca la compilazione dei dati sulla form. Ha però il vantaggio di catturare l'attenzione del navigatore.

Le pop-up con messaggio composto da testo e variabili

Il messaggio nell'istruzione Alert può contenere sia testo che variabili. Per aggiungere il contenuto della variabile a un testo devo anteporre il simbolo più ( + ).

Un esempio pratico

Nel seguente script utilizzo entrambe nel messaggio.

<script>
x=1;
alert("La variabile x vale " + x);
x++;
alert("La variabile x vale " + x);
</script>

Nella prima riga dello script assegno il valore uno alla variabile x ( x=1 ).

L'istruzione successiva pubblica il messaggio "La variabile x vale 1 ".

A questo punto l'elaborazione dello script si blocca, fin quando l'utente non clicca sul pulsante della pop-up.

L'esecuzione dello script continua dopo il click sulla pop up. La terza istruzione incrementa la variabile numerica x di una unità ( x++ ).

Infine, l'ultima istruzione visualizza sullo schermo un'altra pop-up con il testo "La variabile x vale 2".

In conclusione

L'istruzione alert è abbastanza semplice e intuitiva da utilizzare. Non a caso è una delle prime lezioni nei corsi Javascript.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Javascript

Le strutture di controllo

Gestione degli errori ed eccezioni

Le strutture cicliche

FAQ