Operador Condicional JavaScript: Guia Prático

Introdução

Neste laboratório, os alunos explorarão o uso do operador condicional em JavaScript através de um exemplo prático. O laboratório guia os aprendizes na criação de um arquivo HTML, na definição de variáveis de comparação, na implementação da lógica do operador condicional e na exibição de resultados usando document.write.

Os participantes começarão configurando uma estrutura HTML básica com uma tag de script embutida, em seguida, definirão variáveis como idade, status de estudante e país. Eles aprenderão como usar o operador condicional para realizar avaliações condicionais concisas, compreendendo sua sintaxe e aplicação prática na tomada de decisões rápidas baseadas em atribuições dentro do código JavaScript.

Criar Arquivo HTML para Exemplo do Operador Condicional

Nesta etapa, você criará um arquivo HTML para demonstrar o uso do operador condicional em JavaScript. Arquivos HTML fornecem um excelente ambiente para escrever e testar código JavaScript.

Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado conditional-operator.html clicando com o botão direito no explorador de arquivos e selecionando "Novo Arquivo".

Aqui está a estrutura HTML básica que você usará para explorar o operador condicional:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conditional Operator Example</title>
  </head>
  <body>
    <h1>JavaScript Conditional Operator Demo</h1>

    <script>
      // JavaScript code will be added here in subsequent steps
    </script>
  </body>
</html>

Este arquivo HTML fornece uma estrutura simples com uma tag de script onde você escreverá o código JavaScript para demonstrar o operador condicional. A tag <script> permite que você incorpore JavaScript diretamente no documento HTML.

Exemplo de saída ao abrir este arquivo em um navegador web:

JavaScript Conditional Operator Demo

Certifique-se de salvar o arquivo no diretório ~/project. Nas próximas etapas, você adicionará código JavaScript para explorar a funcionalidade do operador condicional.

Definir Variáveis para Comparação

Nesta etapa, você aprenderá como definir variáveis para comparação usando o operador condicional. Abra o arquivo conditional-operator.html que você criou na etapa anterior e adicione o seguinte código JavaScript dentro da tag <script>:

<script>
  // Define variables for comparison
  let age = 20;
  let isStudent = true;
  let country = "USA";
</script>

Vamos detalhar as variáveis:

age é um número que representa a idade de uma pessoa
isStudent é um valor booleano indicando o status de estudante
country é uma string que representa o país da pessoa

Essas variáveis serão usadas para demonstrar como o operador condicional funciona para fazer comparações e tomadas de decisão. Nas próximas etapas, você usará essas variáveis para criar lógica condicional.

Exemplo de saída dos valores das variáveis:

age: 20
isStudent: true
country: "USA"

Certifique-se de salvar o arquivo após adicionar essas variáveis. As variáveis agora estão prontas para serem usadas com o operador condicional nas próximas etapas.

Implementar Lógica do Operador Condicional

Nesta etapa, você aprenderá como usar o operador condicional (ternário) para implementar lógica simples com base nas variáveis que você definiu anteriormente. O operador condicional fornece uma maneira concisa de escrever instruções if-else em uma única linha.

Atualize a seção <script> em seu arquivo conditional-operator.html com o seguinte código:

<script>
  // Previously defined variables
  let age = 20;
  let isStudent = true;
  let country = "USA";

  // Conditional operator examples
  let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";

  let studentStatus = isStudent
    ? "Student discount applies"
    : "No student discount";

  let travelMessage =
    country === "USA" ? "Domestic travel" : "International travel";
</script>

Vamos detalhar a sintaxe do operador condicional:

condição ? valor_se_verdadeiro : valor_se_falso
O primeiro exemplo verifica se a pessoa tem 18 anos ou mais
O segundo exemplo verifica o status de estudante
O terceiro exemplo verifica o país para o tipo de viagem

Exemplo de saída dos resultados do operador condicional:

canVote: "Eligible to vote"
studentStatus: "Student discount applies"
travelMessage: "Domestic travel"

O operador condicional fornece uma maneira compacta de tomar decisões e atribuir valores com base em condições. É uma alternativa mais concisa às instruções if-else tradicionais.

Exibir Resultado Usando Document Write

Nesta etapa, você aprenderá como exibir os resultados da sua lógica do operador condicional usando document.write(). Este método permite que você envie texto diretamente para o documento HTML.

Atualize a seção <script> em seu arquivo conditional-operator.html com o seguinte código:

<script>
  // Previously defined variables and conditional operators
  let age = 20;
  let isStudent = true;
  let country = "USA";

  let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";
  let studentStatus = isStudent
    ? "Student discount applies"
    : "No student discount";
  let travelMessage =
    country === "USA" ? "Domestic travel" : "International travel";

  // Display results using document.write()
  document.write("<h2>Conditional Operator Results</h2>");
  document.write("<p>Voting Status: " + canVote + "</p>");
  document.write("<p>Student Discount: " + studentStatus + "</p>");
  document.write("<p>Travel Type: " + travelMessage + "</p>");
</script>

Quando você abrir este arquivo HTML em um navegador da web, você verá os resultados exibidos na página. O método document.write() permite que você envie conteúdo HTML diretamente.

Exemplo de saída no navegador:

Conditional Operator Results
Voting Status: Eligible to vote
Student Discount: Student discount applies
Travel Type: Domestic travel

Observação: Embora document.write() seja simples de usar, geralmente é recomendado usar métodos mais modernos como innerHTML ou textContent em aplicações do mundo real.

Entender a Sintaxe do Operador Condicional

Nesta etapa, você se aprofundará na sintaxe e no uso do operador condicional (ternário) em JavaScript. Atualize a seção <script> em seu arquivo conditional-operator.html com o seguinte exemplo abrangente:

<script>
  // Basic conditional operator syntax
  // condition ? expression_if_true : expression_if_false

  // Example 1: Simple comparison
  let age = 20;
  let canDrive = age >= 16 ? "Can drive" : "Cannot drive";

  // Example 2: Nested conditional operator
  let score = 75;
  let grade =
    score >= 90
      ? "A"
      : score >= 80
        ? "B"
        : score >= 70
          ? "C"
          : score >= 60
            ? "D"
            : "F";

  // Example 3: Conditional operator with function calls
  function isEven(num) {
    return num % 2 === 0;
  }
  let number = 10;
  let evenOddMessage = isEven(number) ? "Even number" : "Odd number";

  // Display results
  document.write("<h2>Conditional Operator Syntax Examples</h2>");
  document.write("<p>Driving Eligibility: " + canDrive + "</p>");
  document.write("<p>Grade: " + grade + "</p>");
  document.write("<p>Number Type: " + evenOddMessage + "</p>");
</script>

Pontos-chave sobre a sintaxe do operador condicional:

Formato básico: condição ? valor_se_verdadeiro : valor_se_falso
Pode ser aninhado para múltiplas condições
Pode incluir chamadas de função ou expressões complexas
Fornece uma alternativa compacta às instruções if-else

Exemplo de saída no navegador:

Conditional Operator Syntax Examples
Driving Eligibility: Can drive
Grade: C
Number Type: Even number

Resumo

Neste laboratório, os participantes aprendem a usar o operador condicional em JavaScript, criando um arquivo HTML e implementando lógica de comparação prática. O laboratório guia os alunos através da configuração de uma estrutura HTML básica com uma tag de script embutida, definindo variáveis para comparação e explorando a sintaxe do operador condicional.

A abordagem passo a passo permite que os alunos entendam como criar comparações dinâmicas usando variáveis como idade, status de estudante e país. Ao demonstrar a funcionalidade do operador condicional dentro de um contexto de desenvolvimento web, o laboratório fornece um método prático para entender esta técnica essencial de programação JavaScript, permitindo que os alunos escrevam instruções condicionais mais concisas e eficientes.

Usar o Operador Condicional em JavaScript