JavaScript alert, prompt e confirm
Aprenda as funções de interação do JavaScript: alert() para mensagens, prompt() para entrada (retorna string ou null) e confirm() para decisões sim/não (retorna boolean). Exemplos executáveis e dicas práticas.
Introdução às Funções Interativas do JavaScript
Este capítulo aborda as três funções integradas que o navegador oferece para comunicação direta com o usuário — alert, prompt e confirm — além de console.log para registros durante o desenvolvimento. Se você está começando agora, estas são a forma mais simples de fazer uma página fazer algo em resposta ao usuário, razão pela qual quase toda introdução ao JavaScript recorre ao alert primeiro.
As três são métodos do objeto global window, portanto window.alert(...) e alert(...) são a mesma coisa. Duas propriedades são essenciais para entender antes de usá-las:
- São modais. Cada uma abre um pequeno diálogo do navegador que fica sobre a página. O usuário não pode clicar em mais nada na página até fechá-lo.
- São síncronas e bloqueantes. A linha de código que as chama não termina até que o usuário responda. Toda a thread JavaScript pausa — nenhum timer dispara, nenhuma renderização acontece, nada é executado em segundo plano. É por isso que são ótimas para aprendizado rápido e demonstrações, mas inadequadas para aplicações de produção polidas.
Como o navegador desenha esses diálogos, você não pode estilizá-los, posicioná-los ou alterar os rótulos dos botões. Para UIs de produtos reais, você eventualmente os substituirá por componentes modais personalizados (veja a conclusão), mas para aprender a linguagem eles são perfeitos.
JavaScript Alert: Gerenciando Notificações ao Usuário
O Papel de alert()
A função alert() exibe um diálogo simples com uma mensagem e um único botão OK. Ela retorna undefined — sua única função é mostrar a mensagem, não devolver um valor.
Sintaxe e Uso
A sintaxe é simplesmente alert(message). A mensagem é convertida para string, então você pode passar números, booleans ou até objetos (objetos aparecem como [object Object], o que raramente é o que você quer).
O usuário deve clicar em OK (ou pressionar Enter / Escape) para continuar. Até então, a página fica congelada, o que torna o alert() útil para uma única mensagem importante que o usuário deve reconhecer.
Embora útil, a caixa de alerta deve ser usada com moderação. O uso excessivo pode prejudicar a experiência do usuário, pois bloqueia a interação com o restante da página até ser reconhecida.
JavaScript Prompt: Solicitando Entrada do Usuário
Entendendo prompt()
O método prompt() exibe um diálogo com uma mensagem, um campo de entrada de texto e botões OK / Cancelar. Use-o quando precisar de um único trecho de texto do usuário antes de continuar.
Sintaxe e Uso
prompt(message, default) recebe dois argumentos:
message— o texto exibido acima do campo de entrada.default— opcional. O texto que preenche previamente o campo de entrada. Passe uma string vazia""se quiser que o campo comece em branco; se você omitir completamente, alguns navegadores mostram a palavra literalundefinedno campo, portanto sempre forneça um valor padrão explicitamente.
Tratando Respostas do Usuário
O valor de retorno de prompt() é o ponto crucial a entender corretamente:
- Se o usuário clicar em OK, você recebe o texto do campo de entrada como uma string (uma string vazia
""se ele limpou o campo e clicou em OK). - Se o usuário clicar em Cancelar ou pressionar Escape, você recebe
null.
Como o resultado pode ser uma string ou null, sempre verifique antes de usá-lo. Este é um lugar natural para os operadores condicionais que você aprendeu:
prompt() sempre retorna uma string, nunca um número. Se você pedir um número, o valor "7" ainda é texto — "7" + 1 produz "71", não 8. Converta-o primeiro com Number(value) ou parseInt(value, 10) antes de fazer operações matemáticas.
JavaScript Confirm: Tomando Decisões
O Método confirm()
confirm() exibe um diálogo com uma mensagem e dois botões, OK e Cancelar. Use-o para fazer uma pergunta simples de sim/não.
Sintaxe e Uso
confirm(message) recebe um argumento e retorna um boolean: true se o usuário clicar em OK, e false se clicar em Cancelar ou pressionar Escape. Como o resultado já é um boolean, você pode usá-lo diretamente em uma instrução if.
Considerações sobre Casos de Uso
Observe a diferença em relação ao prompt(): não há estado "ausente". confirm() só pode retornar true ou false — Cancelar e Escape mapeiam para false. Como o alert(), ele bloqueia o restante da página até que o usuário responda, portanto reserve-o para decisões genuínas ("Excluir este item?") em vez de confirmações rotineiras.
JavaScript Console.log: Depuração e Registro
Explorando console.log()
console.log() é uma ferramenta fundamental em JavaScript para depuração e registro de informações no console do navegador.
Sintaxe e Exemplos
Este método pode exibir strings, números, objetos e muito mais, tornando-o indispensável para fins de teste e depuração.
console.log() é uma maneira não intrusiva de verificar o estado do seu código e não afeta a experiência do usuário na página. É uma ferramenta essencial para qualquer desenvolvedor JavaScript.
Conclusão: Aprimorando a Interatividade Web com JavaScript
Estas quatro funções são a forma mais simples de tornar uma página interativa enquanto você aprende. Para recapitular seus valores de retorno — o detalhe em que os iniciantes mais tropeçam:
| Função | Exibe | Retorna |
|---|---|---|
alert(message) | Uma mensagem + OK | undefined |
prompt(message, default) | Uma mensagem, campo de entrada, OK/Cancelar | a string digitada, ou null ao Cancelar |
confirm(message) | Uma mensagem + OK/Cancelar | um boolean (true/false) |
Como as três bloqueiam a thread principal e não podem ser estilizadas, aplicações reais as substituem por componentes modais personalizados construídos com HTML e CSS. Mas para experimentar com a linguagem, elas são ideais. Um próximo passo natural é empacotar esse tipo de interação em suas próprias funções JavaScript reutilizáveis e ramificar com base na resposta do usuário usando operadores condicionais.