ES6 - Finestre di dialogo
JavaScript supporta tre importanti tipi di finestre di dialogo. Queste finestre di dialogo possono essere utilizzate per generare e avvisare, o per ottenere conferma su qualsiasi input o per avere una sorta di input da parte degli utenti. Qui discuteremo ogni finestra di dialogo una per una.
Finestra di dialogo Avviso
Una finestra di dialogo di avviso viene utilizzata principalmente per inviare un messaggio di avviso agli utenti. Ad esempio, se un campo di input richiede di inserire del testo ma l'utente non fornisce alcun input, come parte della convalida, è possibile utilizzare una casella di avviso per inviare un messaggio di avviso.
Tuttavia, una casella di avviso può ancora essere utilizzata per messaggi più amichevoli. La casella di avviso fornisce un solo pulsante "OK" per selezionare e procedere.
Esempio
<html>
<head>
<script type = "text/javascript">
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
Finestra di dialogo di conferma
Una finestra di dialogo di conferma viene utilizzata principalmente per accettare il consenso dell'utente su qualsiasi opzione. Visualizza una finestra di dialogo con due pulsanti: OK e Annulla.
Se l'utente fa clic sul pulsante OK, il metodo finestra confirm()restituirà true. Se l'utente fa clic sul pulsante Annulla, confirm () restituisce false. È possibile utilizzare una finestra di dialogo di conferma come segue.
Esempio
<html>
<head>
<script type = "text/javascript">
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
} else {
Document.write ("User does not want to continue!");
return false;
}
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
Finestra di dialogo Prompt
La finestra di dialogo del prompt è molto utile quando si desidera visualizzare una casella di testo per ottenere l'input dell'utente. Pertanto, ti consente di interagire con l'utente. L'utente deve compilare il campo e quindi fare clic su OK.
Questa finestra di dialogo viene visualizzata utilizzando un metodo chiamato prompt() che accetta due parametri: (i) un'etichetta che si desidera visualizzare nella casella di testo e (ii) una stringa predefinita da visualizzare nella casella di testo.
Questa finestra di dialogo ha due pulsanti: OK e Annulla. Se l'utente fa clic sul pulsante OK, il prompt del metodo finestra () restituirà il valore immesso dalla casella di testo. Se l'utente fa clic sul pulsante Annulla, il prompt () del metodo della finestra restituisce null.
Esempio
<html>
<head>
<script type = "text/javascript">
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
