Interface com o usuário com JavaScript

Interface com o usuário com JavaScript – Método prompt()

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.

Rogério Araújo
28 de Dezembro de 2023

Compartilhe:

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>

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:

Interface gráfica do usuário, Texto

Descrição gerada automaticamente

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.

Interface gráfica do usuário, Texto, Aplicativo

Descrição gerada automaticamente

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

Quer ficar por dentro dos concursos públicos abertos e previstos pelo Brasil? 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: