Instruções Condicionais em JavaScript

Introdução

Neste laboratório, você aprenderá a usar instruções condicionais em JavaScript. Instruções condicionais são uma parte fundamental da programação que permite executar diferentes blocos de código com base se uma determinada condição é verdadeira ou falsa. Isso permite que você crie aplicações dinâmicas e responsivas que podem tomar decisões e alterar seu comportamento de acordo.

Abordaremos os seguintes conceitos-chave:

• A instrução if para executar código quando uma condição é verdadeira.
• A cláusula else para fornecer um caminho alternativo.
• A instrução else if para verificar múltiplas condições.
• A diferença entre os operadores de igualdade solta (==) e igualdade estrita (===).

Ao final deste laboratório, você terá construído um script simples que demonstra como controlar o fluxo do seu programa usando essas ferramentas essenciais.

Escreva a instrução if com comparação

Nesta etapa, você aprenderá a usar a instrução if, que é a instrução condicional mais básica em JavaScript. Ela executa um bloco de código somente se uma condição especificada for avaliada como true.

A sintaxe básica é:

if (condition) {
  // código a ser executado se a condição for verdadeira
}

Criaremos um script que exibe uma saudação com base na hora do dia. Primeiro, vamos verificar se é manhã.

1. No explorador de arquivos no lado esquerdo do WebIDE, encontre e abra o arquivo script.js.
2. Adicione o seguinte código ao script.js. Este código obtém a hora atual do sistema e, se a hora for menor que 12, altera o texto do elemento <h1> em nossa página HTML.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
}

3. Após adicionar o código, salve o arquivo (você pode usar Ctrl+S ou Cmd+S).
4. Para ver o resultado, clique na aba Web 8080 na parte superior da interface. Se a hora atual for antes do meio-dia, você verá a mensagem "Good Morning!". Caso contrário, a mensagem permanecerá "Hello!".

Adicione a cláusula else para o caminho alternativo

Nesta etapa, você adicionará uma cláusula else à sua instrução if. A cláusula else permite especificar um bloco de código que será executado se a condição na instrução if for false. Isso fornece um caminho alternativo para a lógica do seu programa.

A sintaxe é:

if (condition) {
  // código a ser executado se a condição for verdadeira
} else {
  // código a ser executado se a condição for falsa
}

Vamos modificar nosso script para exibir uma saudação diferente se não for manhã.

1. Abra o arquivo script.js novamente no editor.
2. Modifique seu código existente para incluir um bloco else. Isso definirá a saudação como "Good Afternoon!" se a condição currentHour < 12 for falsa.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else {
  greetingElement.textContent = "Good Afternoon!";
}

3. Salve o arquivo script.js.
4. Mude para a aba Web 8080 para ver as alterações. Agora, se a hora for após o meio-dia, a mensagem mudará de "Hello!" para "Good Afternoon!".

Use else if para múltiplas condições

Nesta etapa, você aprenderá a usar a instrução else if para lidar com múltiplas condições. Quando você tem mais de dois resultados possíveis, else if permite testar uma série de condições em ordem.

A sintaxe é:

if (condition1) {
  // código para condition1
} else if (condition2) {
  // código para condition2
} else {
  // código se nenhuma condição for atendida
}

Vamos expandir nosso script de saudação para incluir uma mensagem para a noite. Definiremos "tarde" como antes das 18:00 e "noite" como qualquer hora depois disso.

1. No arquivo script.js, atualize seu código para incluir uma condição else if. A lógica agora será:
   • Se a hora for antes das 12, é "Manhã".
   • Caso contrário, se a hora for antes das 18, é "Tarde".
   • Caso contrário, é "Noite".

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
  greetingElement.textContent = "Good Afternoon!";
} else {
  greetingElement.textContent = "Good Evening!";
}

2. Salve o arquivo e atualize a aba Web 8080. A saudação agora refletirá com precisão se é manhã, tarde ou noite, com base na hora atual.

Aplique o operador de igualdade == na condição

Nesta etapa, exploraremos o operador de igualdade ==. Este operador, também conhecido como operador de igualdade "laxa" ou "abstrata", compara dois valores quanto à igualdade após tentar convertê-los para um tipo comum.

Por exemplo, o número 10 e a string '10' são considerados iguais ao usar ==.

Para ver isso em ação, adicionaremos um novo trecho de código ao nosso script. Este código não afetará a saudação, mas registrará uma mensagem no console do desenvolvedor do navegador.

1. Adicione o seguinte código ao final do seu arquivo script.js.

let numberValue = 10;
let stringValue = "10";

if (numberValue == stringValue) {
  console.log("The == operator says they are equal!");
}

2. Salve o arquivo. Para ver a saída, você precisa abrir o console do desenvolvedor.
3. Na aba Web 8080, clique com o botão direito em qualquer lugar da página e selecione "Inspecionar" ou "Inspecionar Elemento". Isso abrirá as ferramentas do desenvolvedor.
4. Clique na aba "Console" dentro das ferramentas do desenvolvedor. Você deverá ver a mensagem: The == operator says they are equal!. Isso confirma que o JavaScript converteu os tipos antes da comparação.

Teste de igualdade estrita com o operador ===

Nesta etapa final, você aprenderá sobre o operador de igualdade estrita ===. Ao contrário do operador de igualdade laxa (==), o operador de igualdade estrita compara tanto o valor quanto o tipo dos operandos. Ele não realiza conversão de tipo.

Este é geralmente o operador recomendado para verificações de igualdade em JavaScript porque se comporta de forma mais previsível e ajuda a evitar bugs sutis.

Vamos modificar o exemplo da etapa anterior para usar === e observar a diferença.

1. Adicione o seguinte novo bloco de código ao final do seu arquivo script.js.

let numberValueStrict = 10;
let stringValueStrict = "10";

if (numberValueStrict === stringValueStrict) {
  console.log("The === operator says they are equal!");
} else {
  console.log(
    "The === operator says they are NOT equal, because their types are different."
  );
}

2. Salve o arquivo e olhe novamente o console do desenvolvedor na aba Web 8080. Pode ser necessário atualizar a página.
3. Desta vez, você verá a mensagem: The === operator says they are NOT equal, because their types are different.. Isso ocorre porque numberValueStrict é um number e stringValueStrict é uma string, e o operador === as identifica corretamente como diferentes.

Resumo

Parabéns por completar este laboratório! Você aprendeu os fundamentos da lógica condicional em JavaScript, uma habilidade crucial para qualquer desenvolvedor.

Neste laboratório, você:

• Usou a instrução if para executar código com base em uma única condição.
• Adicionou uma cláusula else para lidar com o caso alternativo.
• Implementou else if para gerenciar múltiplas condições sequenciais.
• Compreendeu e aplicou o operador de igualdade laxa (==), que realiza conversão de tipo.
• Compreendeu e aplicou o operador de igualdade estrita (===), que verifica tanto o valor quanto o tipo, e é a escolha recomendada para a maioria das comparações.

Dominar as instruções condicionais permite que você escreva código inteligente, responsivo e capaz de lidar com uma ampla variedade de cenários.