Embedded Files
💡 Aula 21 – Validação com múltiplas condições visuais (HTML + JavaScript)
🎯 Objetivo da aula:
Ensinar o uso de inputs HTML e validação visual
Substituir o uso de prompt() por formulários estilizados
Aplicar condições compostas para decisões dinâmicas na tela
Introduzir interatividade prática com HTML e JavaScript juntos
🧠 Introdução:
Até agora, utilizamos prompt() e alert() para simular situações com entrada de dados. A partir de agora, eles aprenderemos a criar páginas reais, com campos de texto, botões e respostas dinâmicas na tela, como os sites de verdade.
👨🏫 Conteúdo aplicado:
input com type="text" e type="number"
Leitura com document.getElementById().value
Conversão com parseInt()
Padronização com toLowerCase()
Lógica com if, &&, ||
Exibição com innerText
✅ Exemplo prático: Acesso ao Evento
📝 Regras:
Só pode entrar se for maior de 18 e estiver usando máscara
Se for VIP, pode entrar mesmo sem máscara
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Validação Visual - Aula 21</title>
<style>
body {
background-color: #1c1c1c;
color: #f0f0f0;
font-family: Arial, sans-serif;
text-align: center;
padding: 40px;
}
h1 {
color: #9b59b6;
}
label, input {
display: block;
margin: 12px auto;
font-size: 16px;
}
input {
padding: 8px;
width: 250px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #9b59b6;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background-color: #7a3995;
}
#resposta {
margin-top: 30px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>🎭 Verificação de Entrada</h1>
<label>Nome:</label>
<input type="text" id="nome">
<label>Idade:</label>
<input type="number" id="idade">
<label>Está usando máscara? (sim/não):</label>
<input type="text" id="mascara">
<button onclick="verificar()">Verificar Entrada</button>
<p id="resposta"></p>
<script>
function verificar() {
const nome = document.getElementById("nome").value.trim();
const idade = parseInt(document.getElementById("idade").value);
const mascara = document.getElementById("mascara").value.toLowerCase();
const listaVIP = ["Luciana", "Marco"];
let nomeFormatado = nome.charAt(0).toUpperCase() + nome.slice(1).toLowerCase();
let vip = listaVIP.includes(nomeFormatado);
const saida = document.getElementById("resposta");
if ((idade >= 18 && mascara === "sim") || (vip && idade >= 18)) {
saida.innerText = "✅ Entrada permitida. Bem-vindo(a), " + nomeFormatado + "!";
saida.style.color = "#2ecc71";
} else if (idade < 18) {
saida.innerText = "❌ Entrada negada: você é menor de idade.";
saida.style.color = "#e74c3c";
} else if (mascara !== "sim" && !vip) {
saida.innerText = "❌ Entrada negada: você precisa estar usando máscara.";
saida.style.color = "#e74c3c";
} else {
saida.innerText = "❌ Entrada negada.";
saida.style.color = "#e74c3c";
}
}
</script>
</body>
</html>
🧠 O que esse código faz?
Ele cria uma página com três campos de entrada: nome, idade e se a pessoa está usando máscara.
Depois que o aluno clica em "Verificar Entrada", o JavaScript avalia as informações e mostra se a pessoa pode entrar ou não no evento — tudo isso direto na tela, sem prompt() nem alert().
Vamos entender
🔍 Explicando por partes:
✅ HTML (a estrutura visível da página)
<label>Nome:</label>
<input type="text" id="nome">
Um campo para o usuário digitar o nome
O id="nome" serve para o JavaScript localizar esse campo depois
<label>Idade:</label>
<input type="number" id="idade">
Campo numérico para a idade
Também tem um id, que será usado pelo JavaScript
<label>Está usando máscara? (sim/não):</label>
<input type="text" id="mascara">
Campo de texto para o aluno escrever sim ou não
<button onclick="verificar()">Verificar Entrada</button>
Quando esse botão é clicado, ele executa a função verificar()
Essa função está no script mais abaixo
<p id="resposta"></p>
Espaço vazio na tela onde o resultado será exibido: entrada liberada ou não
✅ CSS (o visual da página)
Deixa o fundo escuro (background-color: #1c1c1c)
Usa letras claras para contraste
Aplica efeitos visuais em botões e campos
Exibe o texto de resposta em verde ou vermelho, dependendo do resultado
✅ JavaScript (a lógica por trás da decisão)
function verificar() {
Começa a função chamada quando clicamos no botão
const nome = document.getElementById("nome").value.trim();
Pega o valor digitado no campo do nome
O .trim() remove espaços extras (ex: " Rômulo " vira "Rômulo")
const idade = parseInt(document.getElementById("idade").value);
Pega o valor da idade digitada e converte para número com parseInt
const mascara = document.getElementById("mascara").value.toLowerCase();
Pega a resposta sobre a máscara e transforma tudo em minúsculo para evitar erros como "Sim", "SIM", "sIm"
const listaVIP = ["Luciana", "Marco"];
Cria uma lista com nomes VIP que podem entrar mesmo sem máscara
let nomeFormatado = nome.charAt(0).toUpperCase() + nome.slice(1).toLowerCase();
Ajusta o nome digitado para ter a primeira letra maiúscula e o restante minúsculo
Exemplo: "maRCO" vira "Marco"
let vip = listaVIP.includes(nomeFormatado);
Verifica se o nome formatado está dentro da lista VIP
Retorna true ou false
const saida = document.getElementById("resposta");
Pega a referência do parágrafo onde será mostrada a resposta
🔗 A decisão (estrutura condicional)
if ((idade >= 18 && mascara === "sim") || (vip && idade >= 18)) {
A pessoa pode entrar se:
Tiver 18 anos ou mais e estiver usando máscara
Ou for VIP e tiver 18 anos ou mais (mesmo sem máscara)
🎨 Final:
O sistema mostra o resultado na tela dentro do <p id="resposta">, e ainda muda a cor para verde se for liberado, ou vermelho se for recusado.
saida.innerText = "✅ Entrada permitida. Bem-vindo(a), " + nomeFormatado + "!";
saida.style.color = "#2ecc71";
Hora do exercício! 🏋️🔥
✅ Exercício 1 – Verificar se pode votar
Regras:
Idade maior ou igual a 16
Nacionalidade: deve ser "brasileiro"
✅ Exercício 2 – Acesso ao clube 🤽
Regras:
Idade deve ser maior que 12
Ter carteirinha (sim/não)
✅ Exercício 3 – Pode comprar ingresso de cinema? 📽️
⚠️ Já adaptado com radio buttons
Regras:
Idade maior ou igual a 18 ou
Está acompanhado (sim/não)
4️⃣ – Castelo Assombrado
Regras:
Idade maior que 12
Coragem: "sim" ou "não"
5️⃣ – Adotar um Gato Mágico
Regras:
Ter mais de 10 anos
Responder "sim" para “Você gosta de gatos?”
6️⃣ – Ingresso para o Planeta Marte
Regras:
Ter passaporte intergaláctico: "sim"
Peso da bagagem menor que 30kg
7️⃣ – Torneio de Magia
Regras:
Idade acima de 15
Já estudou feitiços? "sim"
8️⃣ – Tropa dos Exploradores
Regras:
Idade entre 14 e 18
Concorda com as regras? "sim"
9️⃣ – Cofre Secreto
Regras:
Código secreto: "dragão"
Número da sala: 7
🔟 – Reino das Fadas
Regras:
Deve responder "sim" para ver magia
Deve ter mais de 8 anos
Desafio! 👺
🌌 Desafio – Viajar no Tempo
📝 Regras:
Ter nível de energia maior que 70
Ter coordenadas ajustadas corretamente (resposta: "sim")
Escolher um destino válido: passado ou futuro
🧩 Objetivo:
Mostrar uma mensagem na tela dizendo se a pessoa pode ou não ativar a viagem no tempo.
👣 Passo a Passo para construir o desafio
1️⃣ Crie um formulário com três perguntas:
Um campo numérico para o usuário informar o nível de energia (de 0 a 100).
Duas opções clicáveis (sim ou não) perguntando se as coordenadas foram ajustada
Um menu suspenso (select) para o usuário escolher o destino da viagem: "passado", "futuro", ou uma opção inválida como "neutro".
2️⃣ Crie um botão escrito “Iniciar Viagem”
Esse botão deve chamar uma função JavaScript que será responsável por verificar se todos os dados estão certos.
3️⃣ Dentro da função, pegue os valores do formulário:
Energia: lembre-se de converter para número (parseInt()).
Coordenadas: verifique qual opção foi marcada.
Destino: veja qual item foi selecionado no menu.
4️⃣ Faça três verificações importantes:
📝 Regras:
Energia deve ser maior que 70
As coordenadas precisam estar ajustadas ("sim")
O destino deve ser "passado" ou "futuro"
5️⃣ Mostre a mensagem na tela (não use alert())
Se tudo estiver certo → mostrar algo como:
"✅ Viagem para o futuro autorizada!"Se algo estiver errado → mostrar:
"❌ Viagem negada. Verifique os requisitos."
6️⃣ Personalize:
Mude a cor da mensagem final: verde para sucesso, vermelho para erro.
Use um emoji na frente da frase para destacar.
🧠 Dica:
Use innerText para mostrar o resultado em um parágrafo.
Use style.color para mudar a cor da mensagem.
Google Sites
Report abuse