javascript - slide 1
Exemplos Adicionais de Código
Para complementar o conteúdo sobre alert() , confirm() e prompt() , aqui estão alguns
exemplos que mostram como essas funções interagem entre si:
1. Interação Combinada (Prompt + Alert): Este exemplo solicita uma informação e a utiliza
imediatamente em uma mensagem.
JavaScript
// Solicita o nome do usuário
let nomeUsuario = prompt("Por favor, digite seu nome:");
// Exibe uma saudação personalizada
alert("Olá, " + nomeUsuario + "! É um prazer ter você aqui.");
2. Tomada de Decisão (Confirm): Utilizando o retorno true ou false do método
confirm() .
JavaScript
let querSair = confirm("Você realmente deseja sair desta página?");
if (querSair) {
alert("Até a próxima!");
} else {
alert("Que bom que você resolveu ficar!");
}
3. Operação Simples com Prompt: Embora o prompt retorne sempre uma string, podemos
usá-lo para interações simples.
JavaScript
let idade = prompt("Qual a sua idade?");
alert("Daqui a 10 anos, você terá " + (parseInt(idade) + 10) + " anos.");
Soluções dos Exercícios Propostos
Abaixo estão as soluções para os exercícios listados no final da apresentação:
Exercício 1: Script com alert() enviando a frase "Olá, bem vindo".
HTML
<!DOCTYPE html>
<html>
<head>
<title>Exercício 1</title>
</head>
<body>
<script>
// Exibe o alerta ao carregar a página
alert("Olá, bem vindo");
</script>
</body>
</html>
Exercício 2: Script com confirm() perguntando se o usuário quer permanecer na página.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Exercício 2</title>
</head>
<body>
<script>
// O método confirm exibe os botões OK e CANCELAR
confirm("Você deseja permanecer nesta página?");
</script>
</body>
</html>
Exercício 3: Script com prompt() pedindo o nome e escrevendo-o na tela.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Exercício 3</title>
</head>
<body>
<script>
// Solicita a entrada do usuário
let nome = prompt("Por favor, informe o seu nome:");
// Escreve o conteúdo na tela (documento HTML)
if (nome != null) {
[Link]("Seja bem-vindo, " + nome + "!");
}
</script>
</body>
</html>
1. Verificação de Idade com prompt() e Operadores
Este código utiliza o prompt() para receber uma entrada, converte o texto em número e
utiliza uma estrutura de decisão.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<body>
<script>
// O prompt recebe uma entrada do usuário
let entrada = prompt("Qual é a sua idade?");
// Convertendo a string para número (detalhe importante para
cálculos)
let idade = Number(entrada);
if (idade >= 18) {
alert("Acesso permitido: Você é maior de idade.");
} else {
alert("Acesso restrito a menores de idade.");
}
</script>
</body>
</html>
2. Confirmando Ações Críticas com confirm()
Como a função confirm() retorna true ou false , podemos usá-la para validar se o
usuário realmente deseja realizar uma ação.
JavaScript
// Exibe os botões OK e CANCELAR
let confirmacao = confirm("Tem certeza que deseja apagar todos os dados?");
if (confirmacao) {
// Se o usuário clicou em OK (true)
[Link]("<h1>Dados apagados com sucesso!</h1>");
} else {
// Se o usuário clicou em Cancelar (false)
[Link]("<h1>Ação cancelada pelo usuário.</h1>");
}
Soluções dos Exercícios
Aqui estão as resoluções para os exercícios propostos na apresentação:
Exercício 1: Alert de Boas-vindas
Envia um alert() com a frase “Olá, bem vindo”.
HTML
<script>
// A função alert exibe uma mensagem e um botão de confirmação
alert("Olá, bem vindo");
</script>
Exercício 2: Confirmação de Permanência
Envia uma caixa de diálogo com confirm() perguntando se quer permanecer na página.
HTML
<script>
// O método confirm() é usado para escolhas do usuário
let resposta = confirm("Você deseja permanecer na página?");
if (resposta == false) {
alert("Pena que você quer sair!");
}
</script>
Exercício 3: Prompt com Escrita na Tela
Usa prompt() para pedir o nome e escrevê-lo na tela.
HTML
<script>
// Solicita o nome através do parâmetro string do prompt
let nomeVisitante = prompt("Por favor, informe o seu nome:");
// O JavaScript manipula o conteúdo da página
// Usamos [Link] para escrever o nome diretamente no HTML
[Link]("<h1>Bem-vindo ao sistema, " + nomeVisitante + "!</h1>");
</script>