Explore Ramificação Condicional em JavaScript

Introdução

Neste laboratório, os participantes mergulharão no mundo da ramificação condicional em JavaScript, explorando diversas técnicas para tomar decisões e controlar o fluxo do programa. O laboratório cobre conceitos essenciais como instruções if de ramificação única, lógica if...else, instruções de múltiplas condições e instruções switch, proporcionando experiência prática com diferentes estruturas condicionais.

Através de exercícios práticos de codificação, os alunos obterão proficiência na implementação de lógica condicional, comparando diferentes técnicas de ramificação e compreendendo como escolher a abordagem mais apropriada para cenários específicos de programação. Ao trabalhar em exemplos passo a passo envolvendo verificação de idade, avaliação de notas e tratamento de casos, os participantes desenvolverão uma base sólida nas capacidades de programação condicional do JavaScript.

Entenda a Declaração If de Ramificação Única

Nesta etapa, você aprenderá sobre a instrução if básica de ramificação única em JavaScript, que permite executar código condicionalmente com base em uma condição específica.

Primeiro, vamos criar um arquivo JavaScript para explorar a instrução if de ramificação única. Abra o WebIDE e crie um novo arquivo chamado conditional-basics.js no diretório ~/project.

// Crie um exemplo simples de verificação de idade
let age = 18;

// Instrução if de ramificação única
if (age >= 18) {
  console.log("Você está apto a votar!");
}

Neste exemplo, a instrução if verifica se a idade é maior ou igual a 18. Se a condição for verdadeira, o bloco de código dentro das chaves {} será executado.

Vamos executar o script para ver a saída:

node ~/project/conditional-basics.js

Exemplo de saída:

Você está apto a votar!

Agora, vamos tentar outro exemplo para demonstrar como a instrução if funciona quando a condição é falsa:

// Modifique o arquivo anterior
let temperature = 15;

if (temperature < 10) {
  console.log("Está frio lá fora. Use um casaco!");
}

Neste caso, como a temperatura é 15 (que não é menor que 10), nada será impresso quando você executar o script.

Implementar Lógica Condicional if...else

Nesta etapa, você aprenderá sobre a lógica condicional if...else em JavaScript, que permite executar diferentes blocos de código com base em se uma condição é verdadeira ou falsa.

Abra o WebIDE e crie um novo arquivo chamado conditional-else.js no diretório ~/project. Criaremos um exemplo simples que demonstra como if...else funciona:

// Crie um exemplo simples de avaliação de notas
let score = 75;

if (score >= 60) {
  console.log("Parabéns! Você passou no exame.");
} else {
  console.log("Desculpe, você não passou no exame.");
}

Neste exemplo, a instrução if...else verifica se a nota é maior ou igual a 60. Se a condição for verdadeira, ela imprime uma mensagem de aprovação. Caso contrário, ela imprime uma mensagem de reprovação.

Vamos executar o script para ver a saída:

node ~/project/conditional-else.js

Exemplo de saída:

Parabéns! Você passou no exame.

Agora, vamos modificar o script para demonstrar a parte else alterando a nota:

// Modifique o arquivo anterior
let score = 45;

if (score >= 60) {
  console.log("Parabéns! Você passou no exame.");
} else {
  console.log("Desculpe, você não passou no exame.");
}

Quando você executar este script, verá uma saída diferente:

Exemplo de saída:

Desculpe, você não passou no exame.

Vamos criar outro exemplo para mostrar como if...else pode ser usado com diferentes tipos de condições:

// Adicione outro exemplo ao arquivo
let isRaining = true;

if (isRaining) {
  console.log("Leve um guarda-chuva com você.");
} else {
  console.log("Aproveite o dia ensolarado!");
}

Este exemplo mostra como if...else pode funcionar também com condições booleanas.

Criar Declarações Multi-Condição if...else if...else

Nesta etapa, você aprenderá como usar múltiplas condições com as declarações if...else if...else em JavaScript para lidar com cenários de tomada de decisão mais complexos.

Abra o WebIDE e crie um novo arquivo chamado multi-condition.js no diretório ~/project:

// Crie um exemplo de classificação de notas
let score = 85;

if (score >= 90) {
  console.log("Excelente! Você tirou um A.");
} else if (score >= 80) {
  console.log("Ótimo trabalho! Você tirou um B.");
} else if (score >= 70) {
  console.log("Bom trabalho! Você tirou um C.");
} else if (score >= 60) {
  console.log("Você passou. Você tirou um D.");
} else {
  console.log("Desculpe, você reprovou no exame.");
}

Neste exemplo, a declaração if...else if...else verifica múltiplas condições em sequência. A primeira condição que for avaliada como verdadeira terá seu bloco de código executado, e as condições restantes serão ignoradas.

Vamos executar o script para ver a saída:

node ~/project/multi-condition.js

Exemplo de saída:

Ótimo trabalho! Você tirou um B.

Agora, vamos modificar a nota para ver como diferentes condições funcionam:

// Experimente diferentes cenários de notas
let score = 55;

if (score >= 90) {
  console.log("Excelente! Você tirou um A.");
} else if (score >= 80) {
  console.log("Ótimo trabalho! Você tirou um B.");
} else if (score >= 70) {
  console.log("Bom trabalho! Você tirou um C.");
} else if (score >= 60) {
  console.log("Você passou. Você tirou um D.");
} else {
  console.log("Desculpe, você reprovou no exame.");
}

Quando você executar este script, verá uma saída diferente:

Exemplo de saída:

Desculpe, você reprovou no exame.

Vamos criar outro exemplo para demonstrar a lógica de múltiplas condições com um cenário diferente:

// Exemplo de condição climática
let temperature = 25;

if (temperature > 30) {
  console.log("Está muito quente lá fora.");
} else if (temperature > 20) {
  console.log("O tempo está quente e agradável.");
} else if (temperature > 10) {
  console.log("Está um pouco fresco hoje.");
} else {
  console.log("Está frio lá fora.");
}

Este exemplo mostra como if...else if...else pode ser usado para lidar com múltiplas condições com diferentes resultados.

Usar a Declaração Switch para Tratamento de Múltiplos Casos

Nesta etapa, você aprenderá sobre a declaração switch em JavaScript, que fornece uma maneira alternativa de lidar com múltiplas condições para uma única variável.

Abra o WebIDE e crie um novo arquivo chamado switch-statement.js no diretório ~/project:

// Crie um exemplo de dia da semana usando a declaração switch
let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

Neste exemplo, a declaração switch verifica o valor de day. Cada case representa um valor específico, e o bloco de código correspondente é executado quando o valor corresponde. A declaração break impede a execução do próximo caso (fall-through).

Vamos executar o script para ver a saída:

node ~/project/switch-statement.js

Exemplo de saída:

Wednesday

Agora, vamos criar outro exemplo para demonstrar o caso default:

// Classificação de notas usando a declaração switch
let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent performance!");
    break;
  case "B":
    console.log("Good job!");
    break;
  case "C":
    console.log("Satisfactory performance.");
    break;
  case "D":
    console.log("Needs improvement.");
    break;
  default:
    console.log("Invalid grade.");
}

Quando você executar este script, verá:

Exemplo de saída:

Good job!

Vamos demonstrar como múltiplos casos podem compartilhar o mesmo bloco de código:

// Detecção de fim de semana usando a declaração switch
let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("It's the weekend!");
    break;
  default:
    console.log("It's a weekday.");
}

Este exemplo mostra como você pode lidar com múltiplos casos com a mesma ação.

Comparar e Escolher entre as Declarações if e Switch

Nesta etapa, você aprenderá as principais diferenças entre as declarações if e switch, e entenderá quando usar cada abordagem.

Abra o WebIDE e crie um novo arquivo chamado conditional-comparison.js no diretório ~/project:

// Comparando if e switch para diferentes cenários

// Cenário 1: Verificação simples de igualdade
let fruit = "apple";

// Usando a declaração if
if (fruit === "apple") {
  console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
  console.log("If Statement: It's a banana.");
} else {
  console.log("If Statement: Unknown fruit.");
}

// Usando a declaração switch
switch (fruit) {
  case "apple":
    console.log("Switch Statement: It's an apple.");
    break;
  case "banana":
    console.log("Switch Statement: It's a banana.");
    break;
  default:
    console.log("Switch Statement: Unknown fruit.");
}

// Cenário 2: Condições complexas
let score = 85;

// if statement é melhor para condições complexas
if (score >= 90 && score <= 100) {
  console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
  console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
  console.log("Satisfactory grade (C)");
} else {
  console.log("Needs improvement");
}

// Switch é menos adequado para condições baseadas em intervalos ou complexas

Vamos executar o script para ver as saídas:

node ~/project/conditional-comparison.js

Exemplo de saída:

If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)

Diferenças chave para lembrar:

1. Declarações if são mais flexíveis e podem lidar com condições complexas
2. Declarações switch são melhores para correspondência exata de valores
3. if pode comparar diferentes tipos e usar operadores lógicos complexos
4. switch é limitado a verificações de igualdade estrita

Vamos criar um exemplo final para ilustrar esses pontos:

// Escolhendo entre if e switch

function recommendConditional(input) {
  // Use switch para correspondência simples e exata de valores
  switch (input) {
    case "red":
    case "blue":
    case "green":
      console.log("Use switch for simple value checks");
      break;

    // Use if para condições mais complexas
    default:
      if (typeof input === "number" && input > 0 && input < 100) {
        console.log("Use if for range and type checking");
      } else {
        console.log("Complex conditions are better with if statements");
      }
  }
}

recommendConditional("blue");
recommendConditional(50);

Resumo

Neste laboratório, os participantes exploraram técnicas de ramificação condicional em JavaScript, com foco em diferentes tipos de declarações condicionais. O laboratório começou com a compreensão das declarações if de ramificação única, demonstrando como executar código com base em condições específicas, como verificação de idade e verificações de temperatura. Os alunos praticaram a criação de lógica condicional simples que permite que o código seja executado somente quando uma condição especificada é verdadeira.

O laboratório então progrediu para técnicas condicionais mais avançadas, incluindo declarações if...else para lidar com ramificações de duas vias, declarações if...else if...else de múltiplas condições para tomada de decisão complexa e declarações switch para lidar com cenários de múltiplos casos. Os participantes aprenderam a comparar diferentes abordagens condicionais, compreendendo a sintaxe e as aplicações práticas de cada método na programação JavaScript.