JavaScript alert

In questo tutorial parleremo dei javascript alert, cioè le finestre di avviso dette anche window alert(), che comunicano all’utente un determinato messaggio.

Alert() è dunque un metodo dell’oggetto window, che serve a mostrare una finestra di avviso. L’oggetto window è quindi l’oggetto principale di javascript e rappresenta l’intera finestra del browser. Ha anche tanti metodi e proprietà che a mano a mano vedremo.

Sottolineamo che, con questo tipo di finestre, il dialogo è unilaterale, dal sito all’utente, vedremo più avanti altre comunicazioni che invece non lo sono.


Esempio 1 javascript alert

Facciamo adesso un semplice esempio di utilizzo dei javascript alert.

Inseriamo un form completo per l’invio dei dati e dopo, quando cliccheremo su invia richiesta, si aprirà la finestra di dialogo che ci avviserà che stiamo per inviare i dati.

tecnologia computer reti

maschio femmina

Innanzitutto creiamo il nostro codice html inserendo il form per inviare i dati. Io ad esempio ho inserito queste voci.

<form name="invio_dati" action="#" method="post">
<p><input name="nome" placeholder="Nome"></p>
<p><input name="mail" placeholder="Email"></p>
<p>
<input name="c1" type="checkbox" value="tecnologia"> tecnologia
<input name="c2" type="checkbox" value="computer"> computer	
<input name="c3" type="checkbox" value="reti"> reti	
</p>
<p>
<input name="sesso" type="radio" value="maschio"> maschio
<input name="sesso" type="radio" value="femmina"> femmina
</p>
<p>
<input name="invia" type="submit" onclick="messaggio()"></p>
</form>

Inoltre, notiamo che, nel pulsante invia, abbiamo aggiunto l’evento onClick() dove richiamiamo la nostra funzione messaggio().

Ad esempio in questo modo:

<input name=”invia” type=”submit” onclick=”messaggio()“>

Poi sviluppiamo la nostra semplicissima funzione javascript che chiamiamo messaggio() e all’interno della quale inseriamo quindi il nostro messaggio nell’alert.

<script type=”text/javascript”>

function messaggio() {  //funzione che poi verrà richiamata
alert(“stai per inviare i dati”); //messaggio che comparirà nella finestra
}

</script>

N.B. Si può scrivere indistintamente window.alert() o anche alert().


Esempio 2 alert()

Il javascript alert può essere incluso anche in un elemento, cioè in un tag html.

Facciamo quindi un altro esempio di uso dei javascript alert in un tag.

Ipotizziamo di voler visualizzare una finestra di dialogo con un messaggio di benvenuto, quando caricheremo la nostra pagina web.

Basterà quindi inserire nel body l’evento onload e un semplice messaggio in alert.

<body onload=”alert(‘Benvenuti sul sito coding creativo’)”>

<!DOCTYPE html>
<html lang="it">
<head>
<title>Coding Creativo</title>
</head>
<body onload="alert('Benvenuti sul sito coding creativo')">

....

</body></html>

Questo è quindi il risultato che si ottiene.


Esempio 3 alert()

Facciamo ancora un altro esempio di utilizzo dei javascript alert in un tag html.

Immaginiamo di aver inserito le nostre immagini nel sito web e vogliamo informare l’autore che sono protette da copyright quando ci cliccherà sopra per salvarle.

Allora basterà inserire all’interno del tag img l’evento onmouseup con l’alert relativo.

     <figure>

       <img src=”images/logo_coding_creativo.png” alt=”coding creativo” onmouseup=”alert(‘le immagini sono protette da copyright’)”> 

   </figure>

Esempio 4 alert()

Si possono collocare anche più alert() uno sotto l’altro.

Ad esempio in questo modo:

<script type=”text/javascript”>

function messaggio() { 
alert(“Benvenuto sul sito Coding Creativo”);
alert(“Imperarei a creare codice divertendoti”);
}

</script>

In questo modo compariranno i messaggi uno dopo l’altro.

Alcuni link utili:

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Tag img e attributo alt per la SEO

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web


Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *