TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare finestre di dialogo di avviso, richiesta e conferma utilizzando JavaScript?

4

Finestra di dialogo Crea avviso utilizzando JavaScript

La finestra di dialogo di avviso è una finestra pop-up che appare sul browser solo con un pulsante "OK" per informare gli utenti di un messaggio molto piccolo. La finestra di avviso deve essere utilizzata per visualizzare un messaggio di avviso o un messaggio informativo. Ad esempio:

  • Un messaggio di benvenuto all’utente quando il sito viene caricato
  • Risultato di convalida di un risultato non valido
  • Un’informazione relativa al tempo di inattività del sito o al tempo di manutenzione.

Qui discutiamo come creare una finestra popup di avviso utilizzando JavaScript con codice di esempio. Ulteriori informazioni sulla creazione di avvisi in Bootstrap 4.

Come funziona?

La funzione JavaScript alert() viene attivata quando viene invocato uno script in una pagina che visualizzerà l’argomento stringa in una finestra di avviso popup. Fino a quando non viene risposto alla casella di avviso, il browser non continuerà a caricare la pagina web.

Sintassi

alert("Your Message Here");

Esempio

Di seguito è riportato un codice di esempio di una casella di avviso in JavaScript. Questa finestra verrà visualizzata quando la pagina viene caricata come finestra di benvenuto e avrà un’opzione per fare clic sul pulsante "OK" o chiudere la finestra di dialogo in browser come Google Chrome. Non appena l’utente fa clic su "OK" (o chiudi) verrà caricata un’immagine. Il browser interromperà l’elaborazione della pagina fino al momento in cui viene risposto a una casella di avviso.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Di seguito è riportata l’immagine di una finestra di avviso nel browser Chrome quando viene eseguito il codice precedente.

Come creare finestre di dialogo di avviso, richiesta e conferma utilizzando JavaScript?

Casella di avviso JavaScript in Google Chrome

Finestra di dialogo Crea prompt utilizzando JavaScript

La finestra di dialogo Prompt viene utilizzata per visualizzare l’output personalizzato su una pagina Web in base all’input dell’utente. A differenza di una casella di avviso che viene utilizzata per visualizzare un breve messaggio con un singolo pulsante "OK", la casella di richiesta ha le seguenti caratteristiche:

  • Visualizza un messaggio predeterminato sulla scatola
  • L’utente può inserire un input nella casella di testo
  • L’input dell’utente viene passato allo script
  • La casella di richiesta ha due pulsanti "OK" e "Annulla"

Come funziona?

La casella di richiesta interrompe anche il caricamento della pagina Web fino al momento in cui viene ricevuta una risposta dall’utente. Ha bisogno delle seguenti due serie di informazioni:

  • Un messaggio da visualizzare nella finestra del prompt
  • Testo predefinito da visualizzare nella casella di testo – questo è facoltativo; puoi lasciare vuoto il testo predefinito
  • Quando si fa clic sul pulsante "OK", il testo inserito nella casella viene passato allo script
  • Quando si fa clic sul pulsante "Annulla", il valore NULL viene passato allo script indietro

Sintassi

prompt ("Message", "Default Value");

Esempio

prompt ("What is the color you like?", "Green");

Esempio pratico per creare una finestra di dialogo prompt utilizzando JavaScript

La casella di richiesta può essere utilizzata in molti scenari pratici e un esempio è quello di salutare l’utente insieme al nome. Il codice seguente chiederà il nome utente quando la pagina viene caricata e quindi aggiungerà il nome con il messaggio di saluto per visualizzarlo nel browser.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

Come appare?

Di seguito è riportata l’immagine di una finestra di richiesta nel browser Chrome quando viene eseguito il codice sopra.

Come creare finestre di dialogo di avviso, richiesta e conferma utilizzando JavaScript?

Casella di richiesta JavaScript in Google Chrome

Quando l’utente inserisce il nome e preme il pulsante "OK", il nome viene passato allo script e tutti i messaggi vengono visualizzati secondo la funzione document.write. Anche lo spazio vuoto nella casella di input è considerato un nome valido dalla casella di richiesta JavaScript.

Display della finestra di richiesta con nome utente

Quando l’utente fa clic sul pulsante "Annulla", il valore null viene passato e mostrato nel browser al posto del nome.

Visualizzazione della finestra di richiesta con valore nullo

Crea finestra di dialogo Conferma utilizzando JavaScript

Questo è un terzo tipo di finestra di dialogo fornita in JavaScript oltre alle finestre di prompt e di avviso. Questa sezione spiega come creare una finestra di dialogo di conferma utilizzando JavaScript che viene utilizzata per confermare l’azione intrapresa dall’utente.

La finestra di dialogo Conferma ha le seguenti caratteristiche:

  • Un messaggio predeterminato da visualizzare sulla scatola
  • Due pulsanti: OK e Annulla

Come funziona?

Anche la casella di conferma, come le altre finestre di dialogo, interrompe l’esecuzione fino a quando non viene ricevuta la risposta dell’utente. L’azione dell’utente può essere OK o Annulla.

  • Il valore true viene passato al programma chiamante quando viene premuto il pulsante OK
  • Il valore false viene passato al programma chiamante quando viene premuto il pulsante Annulla

Sintassi

confirm ("Message");

Esempio

confirm ("Do you want to close this window?");

Esempio pratico

Il seguente codice JavaScript utilizza il metodo prompt per porre una domanda all’utente. Viene visualizzata una casella di conferma per mostrare che la risposta è corretta o sbagliata.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

Come appare?

Di seguito è riportata l’immagine di una finestra di richiesta nel browser Chrome quando viene eseguito il codice precedente e la casella di conferma viene visualizzata in base alla correttezza della risposta fornita nella casella di testo della richiesta.

Come creare finestre di dialogo di avviso, richiesta e conferma utilizzando JavaScript?

JavaScript che conferma la risposta corretta

Come creare finestre di dialogo di avviso, richiesta e conferma utilizzando JavaScript?

JavaScript conferma risposta errata

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More