Bem-vindo ao site John Pires!

Javascript – Fund. Básicos

Home/Curso/Javascript – Fund. Básicos

Javascript – 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 dar 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 fornecer 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>

Caixa de Diálogo de Confirmação



Uma caixa de diálogo de confirmação é usada principalmente para obter o consentimento do usuário sobre 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>

Caixa de Diálogo Prompt



A caixa de diálogo de prompt é muito útil quando você deseja exibir uma caixa de texto pop-up para obter a 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 de janela prompt () retornará nulo.

Exemplo

O exemplo a seguir mostra como usar uma caixa de diálogo de prompt:

See the Pen
Javascript – Prompt Dialog Box
by John Pires (@johnpiresBR)
on CodePen.



Leave a Comment

SIGN IN

Forgot Password