Embedded Files
Estruturas Condicionais: If e Else no JavaScript ⤵️
📚 Explicação para o aluno
Quando você programa, muitas vezes precisa que o sistema tome decisões baseadas em informações fornecidas pelo usuário ou pelo próprio programa.
Por exemplo:
Se a pessoa for maior de idade, pode dirigir.
Se acertar o número secreto, ganha o jogo.
Se o número for par, exibimos uma mensagem. Se for ímpar, exibimos outra.
O if e o else servem para isso.
🔥 Como funciona o if/else
A estrutura básica é esta:
if (condição) {
// Código que será executado se a condição for verdadeira
} else {
// Código que será executado se a condição for falsa
}
A condição é sempre uma comparação que pode ser verdadeira (true) ou falsa (false).
Se for verdadeira, o JavaScript executa o primeiro bloco de código (dentro do if).
Se for falsa, ele pula para o que está dentro do else.
🧠 Exemplo prático com prompt() e alert()
Vamos ver um exemplo real:
Imagine que você quer verificar se a pessoa é maior de idade.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo If Else</title>
</head>
<body>
<h2>🔍 Verificar Maioridade</h2>
<script>
// Peça a idade da pessoa
let idade = prompt("Digite sua idade:");
// Converta a idade para número
idade = Number(idade);
// Verifique se a pessoa é maior de idade
if (idade >= 18) {
alert("Você é maior de idade.");
} else {
alert("Você é menor de idade.");
}
</script>
</body>
</html>
📝 Passo a passo do exemplo:
O programa pede a idade com prompt().
A resposta é convertida de texto para número com Number().
O if verifica se a idade é maior ou igual a 18.
Se for, aparece a mensagem "Você é maior de idade." com alert().
Se não for, aparece "Você é menor de idade." com alert().
📈 Operadores que podemos usar nas condições:
📋 Resumo para o aluno
prompt() → Pede uma informação do usuário.
Number() → Converte essa informação para número.
if (condição) → Verifica se algo é verdadeiro.
else → Executa outra ação se for falso.
alert() → Mostra uma mensagem na tela.
Hora do exercício! 🏋️🔥
📄 Exercícios de If/Else
✅ Exercício 1 — Pode montar seu próprio dragão?
✅Exercício 2 — Adivinhar o número secreto
✅Exercício 3 — Par ou Ímpar
✅Exercício 4 — Pode entrar no cinema?
✅ Exercício 5 — Verificar senha de acesso
Desafio! 👺
🧪 Desafio – Portal Mágico
🧠 Enunciado:
Você está diante de um portal mágico que leva a quatro reinos diferentes.
Para atravessá-lo, você deve digitar uma palavra secreta.
O sistema irá identificar a palavra e direcionar você para o reino correto.
Se a palavra for incorreta, o portal se fecha.
🔤 Palavras mágicas válidas:
"fogo" → Reino das Chamas 🔥
"água" → Reino dos Mares 🌊
"vento" → Reino dos Céus 💨
"terra" → Reino das Florestas 🌳
Se digitar qualquer outra coisa, o portal se recusa a abrir.
💡Link da imagem utilizada: https://png.pngtree.com/png-vector/20240319/ourmid/pngtree-lightning-round-frame-blue-plasma-magical-portal-png-image_12012208.png
💡 Dicas para o Desafio do Portal Mágico
✅ 1. Use if, else if e else para várias possibilidades
Quando temos mais de duas opções, usamos uma sequência assim:
if (condição1) {
// se a primeira condição for verdadeira
} else if (condição2) {
// se a primeira for falsa e essa for verdadeira
} else {
// se nenhuma das anteriores for verdadeira
}
✅ 2. Para comparar com mais de uma palavra, use || (ou)
O operador || significa "OU". Ele retorna verdadeiro se pelo menos uma das condições for verdadeira.
if (palavra == "água" || palavra == "agua") {
alert("Você entrou no Reino dos Mares 🌊");
}
Isso permite aceitar variações como "água" com ou sem acento.
✅ 3. Converta a resposta do usuário com toLowerCase()
Se o aluno digitar "Terra", "TERRA" ou "terra", o programa pode não entender sem isso.
Use:
palavra = palavra.toLowerCase();
Assim, você garante que tudo será comparado em letra minúscula, evitando erros por digitação.
let palavra = prompt("Digite a palavra mágica (fogo, água, vento ou terra):");
palavra = palavra.toLowerCase();
✅ 4. Atenção às aspas e acentos
Strings precisam estar entre aspas: "terra"
Se comparar com acento, lembre-se de que agua e água são diferentes.
Por isso usamos o || para aceitar os dois.
✅ 5. Exiba uma mensagem padrão com else
O else é usado para pegar qualquer resposta fora das anteriores.
Ideal para mensagens como:
else {
alert("Palavra incorreta! O portal se recusou a abrir.");
}
✅ 6. Função dentro do botão
Para fazer um botão executar alguma ação no JavaScript, você usa o atributo onclick dentro da tag <button>.
O onclick chama a função que você criou no seu <script>.
Estrutura básica:
<button onclick="nomeDaFuncao()">Clique aqui</button>
onclick="nomeDaFuncao()": significa "quando clicar no botão, execute essa função".
A função precisa ser criada no seu <script> com exatamente o mesmo nome.
🔥 Exemplo prático:
<button onclick="mostrarMensagem()">Clique para ver uma mensagem</button>
<script>
function mostrarMensagem() {
alert("Você clicou no botão!");
}
</script>
Google Sites
Report abuse