</>Codding
JavaScript0/31 lições

Módulo 1 • Fundamentos

Condicionais e laços

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Condicionais e laços com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Condicionais e laços com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Entrada

Reconheça os dados e condições disponíveis.

2

Processamento

Use Condicionais e laços para transformar a entrada.

3

Saída

Confira o resultado e os casos que podem falhar.

0/6 atividades
1

Entenda o problema

O que é Condicionais e laços

Condicionais fazem o programa escolher caminhos. Toda condição termina reduzida a verdadeiro ou falso — o resto é combinação com E, OU e NÃO.

Cheque seu entendimento

Qual a diferença entre == e === em JavaScript?

1 de 5

O que você aprendeu

  • Condicionais fazem o programa escolher caminhos. Toda condição termina reduzida a verdadeiro ou falso — o resto é combinação com E, OU e NÃO.
  • Se a checagem de 5 viesse antes da de 9, nota 9.5 cairia em 'Recuperação'. Ordem do mais específico para o mais geral.
  • Evite: Trocar = (atribuição) por == / === (comparação).
  • Evite: Colocar a condição genérica antes da específica.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Condicionais e laços" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de JavaScriptCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "Fundamentos".

Quiz rápido

0/2 • 0 certas

1. Qual a diferença entre == e === em JavaScript?

2. Por que a condição mais específica deve vir primeiro?

Laboratório

1/4

1. Faça funcionar

Laboratório de Condicionais e laços: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

Abrir no playground
  • Checkpoints da prática (1/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Nenhuma lacuna deixada em branco
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Escreva sua solução e clique em Verificar.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Condicionais e laços

JavaScript • Módulo 1: Fundamentos • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Condicionais e laços com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Condicionais e laços com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Condicionais e laços

Condicionais fazem o programa escolher caminhos. Toda condição termina reduzida a verdadeiro ou falso — o resto é combinação com E, OU e NÃO.

Checkpoint: Qual a diferença entre == e === em JavaScript? — Resposta: === compara valor e tipo, == converte o tipo antes de comparar

2. Como pensar antes de fazer

Ordem importa: as condições são testadas de cima para baixo e a primeira verdadeira ganha. Por isso a regra mais específica vem antes da mais genérica; senão a genérica engole todos os casos.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Condicionais e laços” resolve.

3. Exemplo completo, do início ao resultado

Cuidado com igualdade: em muitas linguagens == compara valor com conversão de tipo e === compara valor e tipo. Em JavaScript, use sempre === salvo motivo forte.

function faixa(nota) {
  if (nota >= 9) return "Excelente";
  if (nota >= 7) return "Aprovado";
  if (nota >= 5) return "Recuperação";
  return "Reprovado";
}

console.log(faixa(9.5), faixa(7), faixa(5.5), faixa(2));

const idade = 20, temDocumento = true;
const podeEntrar = idade >= 18 && temDocumento;
console.log(podeEntrar ? "Pode entrar" : "Não pode");
TrechoO que faz
function faixa(nota) {Cria uma estrutura reutilizável para organizar comportamento.
if (nota >= 9) return "Excelente";Decide qual caminho será executado de acordo com uma condição.
if (nota >= 7) return "Aprovado";Decide qual caminho será executado de acordo com uma condição.
if (nota >= 5) return "Recuperação";Decide qual caminho será executado de acordo com uma condição.
return "Reprovado";Produz ou devolve o resultado que permite conferir a execução.
}Contribui para a transformação principal mostrada neste exemplo.
console.log(faixa(9.5), faixa(7), faixa(5.5), faixa(2));Produz ou devolve o resultado que permite conferir a execução.
const idade = 20, temDocumento = true;Cria ou atualiza um valor que será usado pelo restante do exemplo.

Dica: Se a checagem de 5 viesse antes da de 9, nota 9.5 cairia em 'Recuperação'. Ordem do mais específico para o mais geral.

Checkpoint: Por que a condição mais específica deve vir primeiro? — Resposta: Porque a primeira condição verdadeira encerra a cadeia

4. Do detalhe para o todo

Condições longas viram nomes: em vez de if (idade >= 18 && temDocumento && !bloqueado), crie podeEntrar = ... e escreva if (podeEntrar). O compilador não liga, o seu cérebro liga.

5. Erros comuns e como corrigi-los

1. Trocar = (atribuição) por == / === (comparação). 2. Colocar a condição genérica antes da específica. 3. Encadear ifs profundos em vez de retornar cedo.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Faça funcionar

Laboratório de Condicionais e laços: execute o exemplo, identifique entrada, processamento e saída e altere pelo menos um valor para observar como o resultado muda.

function faixa(nota) {
  if (nota >= 9) return "Excelente";
  if (nota >= 7) return "Aprovado";
  if (nota >= 5) return "Recuperação";
  return "Reprovado";
}

console.log(faixa(9.5), faixa(7), faixa(5.5), faixa(2));

const idade = 20, temDocumento = true;
const podeEntrar = idade >= 18 && temDocumento;
console.log(podeEntrar ? "Pode entrar" : "Não pode");

Dica: Volte ao exemplo resolvido e compare a estrutura. Trocar = (atribuição) por == / === (comparação).

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Condicionais e laços deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Condicionais e laços, identifique um risco citado na aula e registre ou implemente a correção.

function faixa(nota) {
  if (nota >= 9) return "Excelente";
  if (nota >= 7) return "Aprovado";
  if (nota >= 5) return "Recuperação";
  return "Reprovado";
}

console.log(faixa(9.5), faixa(7), faixa(5.5), faixa(2));

const idade = 20, temDocumento = true;
const podeEntrar = idade >= 18 && temDocumento;
console.log(podeEntrar ? "Pode entrar" : "Não pode");

Dica: Trocar = (atribuição) por == / === (comparação).

4. 4. Aplique em um caso novo

Crie uma variação própria usando Condicionais e laços. Mude os dados ou o cenário e demonstre que o resultado continua correto.

function faixa(nota) {
  if (nota >= 9) return "Excelente";
  if (nota >= 7) return "Aprovado";
  if (nota >= 5) return "Recuperação";
  return "Reprovado";
}

console.log(faixa(9.5), faixa(7), faixa(5.5), faixa(2));

const idade = 20, temDocumento = true;
const podeEntrar = idade >= 18 && temDocumento;
console.log(podeEntrar ? "Pode entrar" : "Não pode");

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • Condicionais fazem o programa escolher caminhos. Toda condição termina reduzida a verdadeiro ou falso — o resto é combinação com E, OU e NÃO.
  • Se a checagem de 5 viesse antes da de 9, nota 9.5 cairia em 'Recuperação'. Ordem do mais específico para o mais geral.
  • Evite: Trocar = (atribuição) por == / === (comparação).
  • Evite: Colocar a condição genérica antes da específica.

Exemplo comentado

function faixa(nota) {
  if (nota >= 9) return "Excelente";
  if (nota >= 7) return "Aprovado";
  if (nota >= 5) return "Recuperação";
  return "Reprovado";
}

console.log(faixa(9.5), faixa(7), faixa(5.5), faixa(2));

const idade = 20, temDocumento = true;
const podeEntrar = idade >= 18 && temDocumento;
console.log(podeEntrar ? "Pode entrar" : "Não pode");

Se a checagem de 5 viesse antes da de 9, nota 9.5 cairia em 'Recuperação'. Ordem do mais específico para o mais geral.

Erros comuns

  • Trocar = (atribuição) por == / === (comparação).
  • Colocar a condição genérica antes da específica.
  • Encadear ifs profundos em vez de retornar cedo.

Quiz e gabarito completo

  1. 1. Qual a diferença entre == e === em JavaScript?

    • a) Nenhuma
    • b) === compara valor e tipo, == converte o tipo antes de comparar
    • c) == é mais rápido
    • d) === só funciona com números

    Gabarito: b) === compara valor e tipo, == converte o tipo antes de comparar — 0 == "0" é true, mas 0 === "0" é false.

  2. 2. Por que a condição mais específica deve vir primeiro?

    • a) Por performance
    • b) Porque a primeira condição verdadeira encerra a cadeia
    • c) É só estilo
    • d) Porque o else exige isso

    Gabarito: b) Porque a primeira condição verdadeira encerra a cadeia — A cadeia para na primeira verdadeira, então a genérica capturaria tudo.

Codding • JavaScript • Condicionais e laços • Prova final e certificado em codding.lovable.app/cursos/javascript/prova