JavaScript alert

In questa lezione parleremo di JavaScript alert, cioè le window alert() utilizzate per comunicare 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. Questo oggetto ha anche tanti metodi e proprietà che a mano a mano vedremo nel corso di questo tutorial JavaScript.

Sottolineiamo che utilizzando il metodo alert di JavaScript, il dialogo è unilaterale, cioè 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 in JavaScript.

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

Provate dunque a compilare i campi del form sotto:

tecnologia computer reti

maschio femmina

Innanzitutto creiamo la nostra pagina html nella quale inseriremo il form per l’invio dei 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, per semplicità, al pulsante per l’invio dei dati, aggiungiamo l’evento onclick(), dove richiamiamo la nostra funzione messaggio.

Ad esempio in questo modo:

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

Quindi sviluppiamo la nostra semplicissima funzione JavaScript che chiamiamo messaggio che conterrà semplicemente un alert con un messaggio per l’utente.

<script type="text/javascript">

function messaggio() { 
     alert("stai per inviare i dati"); 
}

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

Quando carichiamo la pagina apparirà subito la finestra di dialogo, come in figura:

avviso


Esempio 3 – alert()

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

Immaginiamo di aver inserito delle immagini nel nostro sito web e vogliamo informare l’autore che sono protette da copyright, quando, ad esempio, 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:

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

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

In questa lezione abbiamo studiato alcuni esempi d’utilizzo di JavaScript alert, nella prossima lezione affronteremo il metodo confirm.

Alcuni link utili

Indice tutorial JavaScript

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

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Tag img e attributo alt per la SEO

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 *