terça-feira, 1 de março de 2016

Como obter entrada do usuário em seus códigos JavaScript usando o método prompt() do objeto window

O método prompt() do objeto window é usado quando precisamos obter entrada do usuário. Este método exibe uma caixa de mensagem contendo uma mensagem e uma caixa de texto. Veja sua assinatura:

vTextData = window.prompt([sMessage] [, sDefaultValue])

O parâmetro sMessage (opcional) nos permite definir a mensagem que será exibida ao usuário. O parâmetro sDefaultValue permite definir o valor inicial da caixa de texto. Por padrão, este valor é "undefined" no IE e vazio nos demais browsers. Ambos os parâmetros são do tipo string.

O retorno do método prompt() é uma String ou Integer. Se a mensagem for fechada usando-se o botão Cancelar ou o botão de sistema Fechar, o retorno do método será null no Internet Explorer, Firefox, Google Chrome e Safari, enquanto no Opera o retorno é "undefined". 

Veja uma página HTML na qual usamos o método prompt() para solicitar que o usuário informe seu nome. Em seguida usamos o retorno para exibir uma mensagem de boas-vindas:

<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos obter o nome do usuário
  var nome = window.prompt("Seu nome:", "");  

  // vamos verificar se o usuário informou alguma coisa
  if(nome != null){
    window.alert("Bem-vindo(a) ao site, " + nome);
  }
  else{
    window.alert("Você não informou seu nome.");
  }
</script>

</body>
</html>


Veja agora um trecho de código no qual pedimos ao usuário que informe um valor inteiro:

<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos solicitar um valor inteiro
  var numero = window.prompt("Informe um inteiro de 0 a 10:", "0");  

  // vamos verificar se o usuário informou um valor menor ou igual a 5
  if(numero != null){
    if(numero <= 5){
      window.alert("O número informado é menor ou igual a 5");
    }
    else{
      window.alert("O número informado é maior que 5");
    }
  }
  else{
    window.alert("Você não informou um valor.");
  }
</script>

</body>
</html>

Nenhum comentário:

Postar um comentário