Aula 20

🟰🟰 Condições Compostas com && e ||

🎯 Objetivo da Aula

Entender e aplicar condições compostas em JavaScript, utilizando os operadores lógicos && (E) e || (OU) para criar estruturas de decisão mais completas, simulando situações reais em que múltiplas verificações são necessárias.

📌 Introdução ao Tema

Nas aulas anteriores, trabalhamos com decisões simples, usando estruturas como:

if (idade >= 18) {

alert("Você pode entrar.");

}

Mas e se quisermos validar dois ou mais critérios ao mesmo tempo?
Por exemplo: só permitir a entrada se a pessoa for maior de idade e estiver usando máscara?
Ou liberar um brinde se a compra for maior que R$ 100 ou o cliente for VIP?

Para isso, usamos os operadores lógicos, que nos permitem criar condições compostas.

🔗 Operadores Lógicos

✅ && (E lógico)

A condição só será verdadeira se TODAS as comparações forem verdadeiras.

if (idade >= 18 && temCarteirinha === "sim") {

alert("Meia-entrada liberada.");

}

Se um dos dois for falso, o if inteiro será falso.

✅ || (OU lógico)

A condição será verdadeira se PELO MENOS UMA das comparações for verdadeira.

if (idade < 18 || temCarteirinha === "sim") {

alert("Você tem direito à meia-entrada.");

}

Mesmo que uma das condições falhe, se a outra for verdadeira, o if será executado.

🔄 Combinação de if, && e ||

Podemos misturar esses operadores em situações mais complexas:

if ((idade >= 18 && temConvite === "sim") || nome === "VIP") {

alert("Entrada liberada!");

}

Esse exemplo mostra que:

Se a pessoa for maior de idade e tiver convite, ou
Se o nome for VIP
=> então pode entrar.

⚠️ Use parênteses para deixar a lógica clara e evitar erros.

💡 Por que isso é importante?

Na maioria dos sites, jogos ou sistemas, você precisa verificar múltiplas condições ao mesmo tempo:

Validar formulários
Controlar acesso
Criar sistemas de pontuação ou recompensas
Liberar ou bloquear partes do site

Saber combinar if, && e || é essencial para criar lógicas mais inteligentes, realistas e seguras.

📎 Conclusão

Nesta aula, vamos praticar essas situações com exercícios progressivos, do mais simples ao mais desafiador. Você será capaz de:

Criar verificações com várias condições
Combinar && e || para decisões complexas
Aplicar isso em jogos, cadastros, permissões, lojas, entre outros cenários

Hora do exercício! 🏋️🔥

🎬 Exercício 1 – Meia-Entrada no Cinema

Objetivo: praticar o uso de condições compostas com || (OU lógico) e comandos de entrada (prompt()) e saída (alert()), além de reforçar o uso de conversão de tipos e padronização de textos.

💡 Situação:

Queremos saber se a pessoa que vai ao cinema tem direito à meia-entrada. As regras são simples:

Quem é menor de 18 anos pode pagar meia.
Quem tem carteirinha de estudante também pode pagar meia.
Se uma das condições for verdadeira, o benefício é concedido.

🧠 O que vamos aprender com esse exemplo:

Uso de condição composta com ||
Como usar parseInt() para converter texto em número
Como usar toLowerCase() para padronizar entradas
Organização de entrada e saída de dados
Criatividade para personalizar com imagem

<!DOCTYPE html>

<head>

<title>Exercício 1 - Meia Entrada</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f7f7f7;

text-align: center;

padding: 30px;

}

h1 {

color: #2c3e50;

}

img {

max-width: 250px;

margin: 20px;

border-radius: 8px;

}

button {

padding: 12px 20px;

background-color: #333;

color: white;

border: none;

font-size: 16px;

border-radius: 6px;

cursor: pointer;

}

button:hover {

background-color: #111;

}

</style>

</head>

<body>

<h1>🎟️ Meia-Entrada no Cinema</h1>

<p>Descubra se você tem direito ao desconto!</p>

<br>

<button onclick="verificar()">Verificar</button>

function verificar() {

// Solicita a idade do usuário

let idadeTexto = prompt("Qual a sua idade?");

let idade = parseInt(idadeTexto); // 🧠 CONVERSÃO: transforma o texto em número

// Pergunta se tem carteirinha e padroniza para letras minúsculas

let carteirinha = prompt("Você tem carteirinha de estudante? (sim/não)");

carteirinha = carteirinha.toLowerCase(); // 🧠 PADRONIZA: evita erro com 'Sim', 'SIM' etc

// Verifica se a pessoa tem direito à meia

if (idade < 18 || carteirinha === "sim") {

alert("✅ Você tem direito à meia-entrada!");

} else {

alert("❌ Você paga o valor inteiro.");

}

</script>

</body>

</html>

🧩 Explicações passo a passo

🧮 parseInt(idadeTexto)

O prompt() sempre retorna texto, mesmo que o aluno digite um número. Por isso, usamos parseInt() para converter o texto em número, pois só conseguimos comparar números reais com operadores como < e >=.

🔡 toLowerCase()

Quando o usuário digita “Sim”, “SIM” ou “sim”, o JavaScript interpreta como textos diferentes. O comando toLowerCase() padroniza tudo para minúsculas, garantindo que nossa verificação (carteirinha === "sim") funcione corretamente.

🔗 if (idade < 18 || carteirinha === "sim")

Esse é o coração da condição composta. O operador || significa "OU". Se qualquer uma das duas condições for verdadeira, a pessoa terá direito à meia.

⚠️Tanto parseInt() quanto Number() servem para converter strings em números, mas eles se comportam de formas diferentes em casos específicos. Aqui está uma comparação clara:

✅ Number()

Converte a string inteira para um número.
Rejeita qualquer texto fora do padrão numérico.
Retorna NaN se a string não for um número válido completo.

Number("123") // 123

Number("123.45") // 123.45

Number("123abc") // NaN ❌

Number(" 42 ") // 42 ✅ (ignora espaços)

✅ parseInt()

Converte apenas a parte inicial numérica da string.
Ignora o restante da string após o número.
Aceita parâmetros como a base numérica (radix).

parseInt("123") // 123

parseInt("123.45") // 123 (ignora o ".45")

parseInt("123abc") // 123 ✅

parseInt("abc123") // NaN ❌ (não começa com número)

🔧 Quando usar cada um?

Use Number() quando você quer que o valor inteiro da string seja estritamente numérico (ex: preços, notas com decimais, entradas de formulários).
Use parseInt() quando você espera inteiros e a entrada pode vir com "sujeira" no final (ex: "123kg", "42px").

🚗 Exercício 2 – Permissão para Dirigir

(Resolvido)

Situação:
Para poder dirigir legalmente, a pessoa precisa:

Ter 18 anos ou mais
Ter CNH (Carteira Nacional de Habilitação)

<!DOCTYPE html>

<head>

<title>Exercício 2 - Dirigir</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #eef2f3;

text-align: center;

padding: 30px;

}

h1 {

color: #2c3e50;

}

img {

max-width: 250px;

margin: 20px;

border-radius: 8px;

}

button {

padding: 12px 20px;

background-color: #2d3436;

color: white;

border: none;

font-size: 16px;

border-radius: 6px;

cursor: pointer;

}

button:hover {

background-color: #1e2223;

}

</style>

</head>

<body>

<h1>🚗 Permissão para Dirigir</h1>

<p>Você tem idade e documentação para dirigir?</p>

// escolha a imagem de um carro de seu interesse

<br>

<button onclick="verificar()">Verificar</button>

function verificar() {

let idade = parseInt(prompt("Qual a sua idade?"));

let cnh = prompt("Você possui CNH? (sim/não)").toLowerCase();

if (idade >= 18 && cnh === "sim") {

alert("✅ Você está autorizado a dirigir.");

} else {

alert("❌ Você NÃO pode dirigir.");

}

</script>

</body>

</html>

🗡️ Exercício 3 – Uso da Espada Mágica

🎯 Objetivo

Simular um sistema de jogo onde o personagem só pode usar uma espada mágica se:

Tiver nível maior ou igual a 10
Tiver energia acima de 50

🛒 Exercício 4 – Promoção na Loja

🎯 Objetivo

Criar um sistema de brinde onde o cliente ganha um fone de ouvido se:

For cliente VIP
Ou fizer uma compra acima de R$ 1000

📚Exercício 5 – Acesso ao Portal do Aluno

💡 Situação:

O aluno só pode acessar o portal escolar se:

For maior de 13 anos
E aceitar os termos de uso da plataforma

✈️ Exercício 6 – Embarque Internacional

💡 Situação:

A pessoa só embarca se tiver passaporte válido e comprovante de vacina.

♿ Exercício 7 – Vaga Especial

💡 Situação:

Pode usar a vaga se for idoso ou PCD (Pessoa com Deficiência).

🧪 Exercício 8 – Acesso ao Laboratório

💡 Situação:

Para entrar no laboratório é obrigatório estar com jaleco e crachá visível.

🚚 Exercício 9 – Frete Grátis para Moradores do Centro

💡 Situação:

Moradores do bairro Centro, com compras acima de R$ 50, têm frete grátis.

❤️ Exercício 10 – Cadastro em App de Namoro

💡 Situação:

Só pode se cadastrar quem tem mais de 18 anos e enviou foto de perfil.

Desafio! 👺

🎭 Desafio – Entrada no Carnaval de Máscaras Veneziano

🎯 Objetivo:

Criar uma lógica de verificação para entrada em um baile exclusivo de carnaval veneziano, usando condições compostas com && e ||, arrays e verificações personalizadas.

💡 Regras:

A pessoa só pode entrar se:

Tiver 18 anos ou mais
Estiver usando máscara
Estiver na lista de convidados

Porém, se o nome estiver na lista VIP, ela pode entrar mesmo sem máscara.

🧩 Quebra da estrutura

1️⃣ nome.charAt(0)

O que faz?
Pega o primeiro caractere da string (letra).
Por que 0?
Porque em programação, os índices começam em 0.
Exemplo:
"Marco" →
charAt(0) retorna "M"
charAt(1) retornaria "a"

2️⃣ .toUpperCase()

O que faz?
Transforma qualquer letra em maiúscula.
Por que usar aqui?
Para garantir que a primeira letra do nome fique com inicial maiúscula:
Exemplo: "marco" → "M"

3️⃣ nome.slice(1)

O que faz?
Corta a string a partir da posição 1, ou seja, do segundo caractere em diante.
Por que 1?
Porque já usamos o caractere 0 com charAt(0) para a letra inicial.
Agora queremos pegar o resto do nome:
"marco" → slice(1) retorna "arco"

4️⃣ .toLowerCase()

O que faz?
Transforma todas as letras em minúsculas.
Por que usar aqui?
Para evitar que o aluno digite algo como "MARCO" ou "mARCO" e o nome fique todo esquisito.
"mARCO" → primeira letra vira "M" + resto vira "arco"
Resultado final: "Marco"

5️⃣ includes(nome)

Esse comando aparece mais tarde no código e faz parte da verificação em listas (arrays):

listaConvidados.includes(nome)

O que faz?
Verifica se o valor existe dentro de uma lista.
Retorna true ou false.

Exemplo prático:
let lista = ["Marco", "Luciana"];

lista.includes("Marco"); // true

lista.includes("Carlos"); // false

✅ Resumo da transformação:

Se o aluno digitar:

"mARCo"

Após essa linha:

nome = nome.charAt(0).toUpperCase() + nome.slice(1).toLowerCase();

O nome vira:

"Marco"