Baixe o material de estudo
Fala, meus consagrados! Beleza?
JavaScript é uma linguagem de programação essencial para criar interfaces de usuário interativas na web, possibilitando interfaces ricas e personalizadas para uma vasta gama de usuários. Teremos dois artigos sobre o uso do JavaScript para tratar a interface com o usuário. Iremos ter três artigos tratando de métodos comumente usados em JavaScript para interagir com o usuário: prompt(), confirm() e alert(). Neste artigo, iremos estudar o primeiro deles: prompt().
O método prompt() fornece ao usuário uma caixa de diálogo com um campo de texto e a opção de inserir uma resposta. Este método retorna a string inserida pelo usuário ou null se o usuário clicar em “Cancelar”. Essas funções são úteis para interações simples do usuário e podem ser usadas para obter feedback rápido ou fornecer informações sem a necessidade de elementos mais complexos da interface do usuário.
Tanto o método prompt() quanto confirm() vêm do objeto especial window, que representa uma janela aberta em um navegador. É opcional colocar window antes dos métodos. Podemos então chamar os métodos das seguintes formas:
- prompt() ou window.prompt(); e
- confirm() ou window.confirm().
O método prompt() exibe uma caixa de diálogo, solicitando a entrada do usuário e retorna o valor de entrada se o usuário clicar em “OK”. Caso contrário, retorna null.
Sintaxes:
variável = prompt(mensagem, valor-padrão);
variável = window.prompt(mensagem, valor-padrão);
Explicando a sintaxe, temos:
- variável: recebe o valor digitado pelo usuário retornado pelo método;
- mensagem: representa a mensagem da caixa de diálogo; e
- valor-padrão: representa o valor-padrão da caixa de input.
Exemplo:
<!DOCTYPE html>
<html>
<body>
<h2>Método prompt()</h2>
<button onclick=”inserirNome()”>Clique para inserir seu nome</button>
<p id=”texto”></p>
<script>
function inserirNome() {
var nome = prompt(“Digite seu nome”, “Nome”);
if (nome != null) {
document.getElementById(“texto”).innerHTML = “Fala, ” + nome + “!”;
}
}
</script>
</body>
</html>
No exemplo acima, a função inserirNome é usada para pedir ao usuário que insira seu nome e, em seguida, usa essa entrada para exibir uma saudação personalizada em um elemento específico da página web.
Quando a página é carregada pela primeira vez:
Quando se clica no botão, aciona-se a função inserirNome(), que chama o método prompt(), que é utilizado para exibir uma caixa de diálogo que pede ao usuário para digitar seu nome. O texto “Digite seu nome” é a mensagem exibida na caixa de diálogo, e “Nome” é o valor padrão no campo de texto. O nome digitado pelo usuário é então armazenado na variável nome.
Após inserir o nome “Rogério” no campo da caixa de diálogo:
No exemplo, temos um script JavaScript embutido em uma página HTML. No script, há uma função chamada inserirNome(). Na função, temos a variável local nome, que recebe o valor retornado pelo método prompt(). Para o método, são passados dois parâmetros: “Digite seu nome” (para a mensagem da caixa de diálogo) e “Nome” (para o valor-padrão do campo input).
Ainda na função inserirNome(), temos também a estrutura de condição se o valor da variável nome é diferente de null. Se for diferente, há alteração do conteúdo do elemento <p> cujo atributo id é “texto”. Seu conteúdo receberá o valor da variável nome.
Na página, há um elemento <button>, com o texto “Clique para inserir seu nome”. No atributo onclick desse elemento, há a menção à função inserirNome(), ou seja, ao clicar no botão, a função será chamada e abrirá a caixa de diálogo para inserção de texto.
O método prompt() em JavaScript desempenha um papel significativo na criação de interações simples e diretas com o usuário em aplicações web. Embora seja bastante básico, oferece uma maneira eficiente e rápida de obter entradas do usuário sem necessitar de elementos mais complexos da interface do usuário. Seu uso, combinado com outras funções do JavaScript como alert() e confirm(), permite a construção de diálogos interativos e fluxos de trabalho condicionais, contribuindo para uma experiência de usuário mais envolvente e personalizada. No entanto, é importante notar que o estilo e a aparência dessas caixas de diálogo são geralmente determinados pelo navegador e pelo sistema operacional, o que pode limitar a personalização visual. Além disso, com o avanço das tecnologias web e a crescente preferência por interfaces mais sofisticadas, o uso de prompt() tem diminuído, sendo frequentemente substituído por soluções mais integradas e esteticamente consistentes com o design geral da aplicação.
Espero que tenham gostado!
Forte abraço e até a próxima jornada!
_________________________
Professor Rogerão Araújo
Clique nos links abaixo:
CONCURSOS ABERTOS
CONCURSOS 2023
Receba gratuitamente no seu celular as principais notícias do mundo dos concursos!
Clique no link abaixo e inscreva-se gratuitamente:
TELEGRAM
Fonte: Gran Cursos Online
Download disponível – Interface com o usuário com JavaScript