Aula 18

Continuação – If/Else ↪️

🎯 Objetivo da aula:

Entender a diferença entre decisões com duas opções (if/else) e mais de duas opções (if/else if/else)
Aprender a escrever comparações simples no JavaScript
Praticar a criação de fluxos de decisão usando prompt() para entrada e alert() para saída

📚 Explicação para os alunos

Quando estamos programando, muitas vezes precisamos tomar decisões.
Dependendo da resposta do usuário ou de um valor, o programa segue caminhos diferentes.

Se houver apenas duas possibilidades (verdadeiro ou falso), usamos if/else.
Se houver mais de duas possibilidades, usamos if/else if/else.

🔥 Estrutura básica:

✅ Quando temos apenas duas opções:

if (condição) {

// Código que executa se a condição for verdadeira

} else {

// Código que executa se a condição for falsa

}

✅ Quando temos mais de duas opções:

if (condição1) {

// Código para a primeira condição

} else if (condição2) {

// Código para a segunda condição

} else {

// Código se nenhuma das condições anteriores for verdadeira

}

🧠 Exemplos Práticos

✏️ Exemplo 1 — Duas Condições (if/else simples)

<!DOCTYPE html>

<head>

<title>Exemplo 1 - Dois caminhos</title>

</head>

<body>

<h2>🚦 Pode atravessar?</h2>

let cor = prompt("Digite a cor do sinal (verde ou vermelho):");

cor = cor.toLowerCase();

if (cor == "verde") {

alert("Pode atravessar!");

} else {

alert("Espere o sinal ficar verde.");

}

</script>

</body>

</html>

✏️ Exemplo 2 — Mais de Duas Condições (if/else if/else)

<!DOCTYPE html>

<head>

<title>Exemplo 2 - Escolha uma classe</title>

</head>

<body>

<h2>🧙 Escolha sua Classe de Aventura</h2>

let classe = prompt("Digite sua classe (mago, guerreiro ou arqueiro):");

classe = classe.toLowerCase();

if (classe == "mago") {

alert("Você controla os elementos da magia!");

} else if (classe == "guerreiro") {

alert("Você é forte e corajoso!");

} else if (classe == "arqueiro") {

alert("Você tem precisão e agilidade!");

} else {

alert("Classe desconhecida.");

}

</script>

</body>

</html>

🛠️ Atividade prática

Agora você vai criar uma pasta chamada aula19 e resolver 3 exercícios, cada um em um arquivo HTML separado.

Hora do exercício! 🏋️🔥

✅ Exercício 1 — Temperatura

<!DOCTYPE html>

<head>

<title>Temperatura</title>

</head>

<body>

<h2>🌡️ Temperatura do Dia</h2>

// Peça ao usuário a temperatura do dia com prompt()

// Converta o valor com Number()

// Se a temperatura for maior ou igual a 30, mostre: "Dia quente"

// Se estiver entre 20 e 29, mostre: "Dia agradável"

// Se for menor que 20, mostre: "Dia frio"

</script>

</body>

</html>

✅ Exercício 2 — Classificação no jogo de futebol

<!DOCTYPE html>

<head>

<title>Futebol</title>

</head>

<body>

<h2>⚽ Resultado da Partida</h2>

// Peça ao usuário o número de gols do seu time

// Peça o número de gols do time adversário

// Compare os valores (use Number())

// Se seu time fez mais gols, mostre: "Vitória do seu time!"

// Se os dois times empataram, mostre: "Empate!"

// Se o adversário fez mais, mostre: "Seu time perdeu."

</script>

</body>

</html>

✅ Exercício 3 — Nota da prova

<!DOCTYPE html>

<head>

<title>Nota da Prova</title>

</head>

<body>

<h2>📚 Verificar Nota</h2>

// Peça ao usuário a nota que tirou (0 a 10)

// Converta com Number()

// Se for maior ou igual a 7, mostre: "Aprovado"

// Se estiver entre 5 e 6, mostre: "Recuperação"

// Se for menor que 5, mostre: "Reprovado"

</script>

</body>

</html>

✅ Exercício 4 — Tipo de animal mágico

<!DOCTYPE html>

<head>

<title>Animal Mágico</title>

</head>

<body>

<h2>🐉 Escolha seu Animal Mágico</h2>

// Peça ao usuário para digitar o nome de um animal mágico (dragão, fênix ou grifo)

// Converta com toLowerCase()

// Se for "dragão", mostre: "Você escolheu um animal de fogo!"

// Se for "fênix", mostre: "Você escolheu uma criatura que renasce!"

// Se for "grifo", mostre: "Você escolheu um guardião dos céus!"

// Se digitar qualquer outro, mostre: "Animal desconhecido."

</script>

</body>

</html>

💡Dica para a solução:

let animal = prompt("Digite o nome de um animal mágico (dragão, fênix ou grifo):");

animal = animal.toLowerCase();

if (animal == "dragão") {

alert("Você escolheu um animal de fogo!");

} else if (animal == "fênix") {

alert("Você escolheu uma criatura que renasce!");

} else if (animal == "grifo") {

alert("Você escolheu um guardião dos céus!");

} else {

alert("Animal desconhecido.");

}

✅ Exercício 5 — Senha mágica

<!DOCTYPE html>

<head>

<title>Senha Mágica</title>

</head>

<body>

<h2>🔐 Acesso Mágico</h2>

// Peça uma senha com prompt()

// Se a senha for "abracadabra", mostre: "Acesso concedido ao castelo mágico!"

// Se a senha for "alohomora", mostre: "Você abriu as portas secretas!"

// Para qualquer outra senha, mostre: "Senha incorreta."

</script>

</body>

Desafio! 👺

🧪 Desafio com CSS + Imagens Dinâmicas - A Caverna das 3 escolhas

Você entrou em uma caverna mágica e precisa escolher uma das três passagens para continuar sua jornada. Cada uma leva a um lugar diferente:

Digite 1 para entrar na câmara do ouro
Digite 2 para seguir pela ponte invisível
Digite 3 para descer ao poço das sombras

Qualquer outro número, e você cairá numa armadilha misteriosa.

<!DOCTYPE html>

<head>

<title>Desafio - Caverna das Três Escolhas</title>

</head>

<body>

<h2>🗝️ Desafio: A Caverna das Três Escolhas</h2>

// Peça ao usuário um número de 1 a 3 com prompt()

// Converta para número com Number()

// Se o número for 1, mostre: "Você encontrou a câmara do ouro!"

// Se o número for 2, mostre: "Você atravessou a ponte invisível com sucesso!"

// Se o número for 3, mostre: "Você desceu ao poço das sombras..."

// Para qualquer outro número, mostre: "Você caiu em uma armadilha!"

</script>

</body>

</html>

🖼️ Imagens utilizadas (livres para troca):

Entrada da caverna: https://png.pngtree.com/png-clipart/20231003/original/pngtree-rock-cave-png-illustration-png-image_13243934.png
Câmara do ouro: https://static.vecteezy.com/system/resources/thumbnails/050/492/928/small/gold-bars-stacked-high-isolated-on-transparent-background-png.png
Ponte invisível: https://static.vecteezy.com/system/resources/thumbnails/047/243/229/small_2x/footbridge-isolated-on-a-transparent-background-free-png.png
Poço das sombras: https://png.pngtree.com/png-vector/20241009/ourmid/pngtree-water-well-old-village-stone-wooden-roof-png-image_14011880.png
Armadilha: https://i.pinimg.com/564x/c0/8d/47/c08d47a59cd39e412b024e93749d255f.jpg

💡 Dica: Como inserir uma imagem no HTML

Para adicionar uma imagem em uma página HTML, usamos a tag <img>, assim:

✅ O que cada parte significa:

src="..." → é o endereço da imagem (pode ser o nome do arquivo ou um link da internet)
alt="..." → é o texto que aparece se a imagem não carregar (ou para leitores de tela)

🧪 Exemplo com uma imagem online:

Exemplo no código:

...
<img id="imagemCaminho" src="https://i.imgur.com/LrVh6xC.png" alt="Entrada da caverna">

function escolherCaminho() {

let escolha = prompt("Digite 1, 2 ou 3 para escolher o caminho:");

escolha = Number(escolha);

const imagem = document.getElementById("imagemCaminho");

if (escolha === 1) {

alert("Você encontrou a câmara do ouro!");

imagem.src = "https://i.imgur.com/6BkXzXv.png"; // imagem do ouro

Google Sites

Report abuse