JavaScript prompt

In quest’articolo parleremo di javascript prompt, cioè delle finestre che richiedono l’immissione di un dato da parte di un utente.

Il metodo prompt() consente dunque di far apparire delle finestre per interagire con l’utente.


Esempio di uso di javascript prompt

Vogliamo realizzare questo esempio: quando clicchiamo sul pulsante inserisci il nome, comparirà la finestra di dialogo per inserire il nome. Dopo averlo inserito e aver cliccato ok, nel livello sotto comparirà il saluto seguito dal nome appena inserito.

Provate l’esempio cliccando il pulsante.


Inseriamo quindi un pulsante, in un punto qualsiasi della pagina, che quando verrà cliccato farà comparire la finestra di dialogo per l’inserimento del nome.

<button onclick="MyName()">Inserisci il nome</button>       

Nel div, che potete inserire ad esempio sotto button, faccio visualizzare il nome che l’utente ha inserito.

<div id="visualizza"></div>

Inseriamo adesso il codice javascript.

Il metodo promt() ha due argomenti: il primo che chiede di inserire il nome e il secondo che compare già nel campo quando si apre la finestra (valore precompilato).

Se la variabile nome è uguale alla stringa vuota allora visualizziamo il messaggio: ‘non hai inserito il nome’; altrimenti visualizziamo il saluto seguito dal nome.

Stiamo utilizzando anche il metodo getElementById() che approfondiremo nei prossimi articoli.

<script>
function myName() {
var messaggio;
var nome = prompt(“Inserisci il tuo nome:”, “Coding Creativo”);
if (nome == null || nome == “”)
      messaggio = “Non hai inserito il nome”;
else
     messaggio= “Ciao ” + nome;
document.getElementById(“visualizza”).innerHTML = messaggio;
}
</script>


Esempio 2 di uso di javascript prompt

Facciamo adesso un altro semplice esempio, utilizzando il metodo prompt(). Calcoliamo ad esempio l’età di una persona dopo aver chiesto l’inserimento tramite la finestra di dialogo.

Inseriamo il pulsante in un punto qualunque della nostra pagina.

<button onclick="myEta()">Calcola l'età</button>

Dopo realizziamo il nostro script, utilizzando il metodo prompt() per far inserire l'anno di nascita dell'utente.

Ricaviamo poi la data del giorno con l'oggetto Date() e la memorizziamo nella variabile datac. Dopo utilizziamo il metodo getFullYear() per ottenere l'anno corrente dalla datac e lo memorizziamo in una variabile di nome annoc.

Così, per ricavare l'età facciamo semplicemente una differenza tra l'anno corrente e l'anno che l'utente ha inserito.

Ecco dunque lo script completo.

<script>
function myEta() {
   var anno = prompt("In quale anno sei nato?", "1990");
   if (anno !== null) {
         var datac = new Date();
         var annoc = datac.getFullYear();
         var eta = (annoc - anno);
         if (eta < 18)
               alert("Sei minorenne, hai "+eta + "anni");
         else
             alert("Sei maggiorenne, hai " +eta + "anni");
    }
}
</script>

Chiaramente questi sono solo dei semplici esempi di uso del metodo prompt() in javascript.

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 in html

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 *