JavaScript alert

Le JavaScript alert sono delle finestre di avviso dette anche window alert(), che comunicano all’utente un 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.

Sottolineiamo che, con le alert JavaScript, 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 degli alert JavaScript.

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 JavaScript

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

Facciamo quindi un altro esempio di uso di 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 di 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.

Ecco dunque un esempio che utilizza più alert JavaScript:

<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 *