ES6 - Caixas de Diálogo

JavaScript oferece suporte a três tipos importantes de caixas de diálogo. Essas caixas de diálogo podem ser usadas para levantar e alertar, ou para obter confirmação sobre qualquer entrada ou para ter um tipo de entrada dos usuários. Aqui, discutiremos cada caixa de diálogo, uma por uma.

Caixa de Diálogo de Alerta

Uma caixa de diálogo de alerta é usada principalmente para enviar uma mensagem de aviso aos usuários. Por exemplo, se um campo de entrada exige a inserção de algum texto, mas o usuário não fornece nenhuma entrada, então, como parte da validação, você pode usar uma caixa de alerta para enviar uma mensagem de aviso.

No entanto, uma caixa de alerta ainda pode ser usada para mensagens mais amigáveis. A caixa de alerta fornece apenas um botão "OK" para selecionar e prosseguir.

Exemplo

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

A seguinte saída é exibida na execução bem-sucedida do código acima.

Caixa de Diálogo de Confirmação

Uma caixa de diálogo de confirmação é usada principalmente para obter o consentimento do usuário em qualquer opção. Ele exibe uma caixa de diálogo com dois botões: OK e Cancelar.

Se o usuário clicar no botão OK, o método da janela confirm()retornará verdadeiro. Se o usuário clicar no botão Cancelar, confirm () retornará falso. Você pode usar uma caixa de diálogo de confirmação da seguinte maneira.

Exemplo

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

A seguinte saída é exibida na execução bem-sucedida do código acima.

Caixa de Diálogo Prompt

A caixa de diálogo de prompt é muito útil quando você deseja abrir uma caixa de texto pop-up para obter uma entrada do usuário. Assim, permite que você interaja com o usuário. O usuário precisa preencher o campo e clicar em OK.

Esta caixa de diálogo é exibida usando um método chamado prompt() que tem dois parâmetros: (i) um rótulo que você deseja exibir na caixa de texto e (ii) uma string padrão para exibir na caixa de texto.

Esta caixa de diálogo possui dois botões: OK e Cancelar. Se o usuário clicar no botão OK, o prompt do método da janela () retornará o valor inserido na caixa de texto. Se o usuário clicar no botão Cancelar, o método da janela prompt () retornará nulo.

Exemplo

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

A seguinte saída é exibida na execução bem-sucedida do código acima.

↰ Previous page Next page ↱