Operadores Lógicos JavaScript: Guia Prático e Exemplos

Introdução

Neste laboratório, os participantes explorarão os operadores lógicos fundamentais em JavaScript através de um exercício prático de desenvolvimento web. O laboratório guia os alunos na criação de um arquivo HTML e na implementação de demonstrações práticas dos operadores lógicos AND (&&), OR (||) e NOT (!), proporcionando uma compreensão abrangente de como esses operadores funcionam na programação JavaScript.

Ao seguir uma abordagem passo a passo, os alunos configurarão uma página web interativa que exibe os resultados de várias operações lógicas, permitindo que entendam como esses operadores avaliam condições e retornam valores booleanos. O laboratório enfatiza a aprendizagem prática, usando cenários do mundo real, como elegibilidade para dirigir e autenticação de usuário, para ilustrar a aplicação de operadores lógicos em JavaScript.

Configurar o Arquivo HTML para Demonstração de Operadores Lógicos

Nesta etapa, você criará um arquivo HTML básico que servirá como base para demonstrar os operadores lógicos JavaScript. Vamos configurar uma estrutura simples de página web com uma seção de script onde exploraremos as operações lógicas.

Abra o WebIDE e navegue até o diretório ~/project. Crie um novo arquivo chamado logical-operators.html usando a interface do WebIDE.

Aqui está a estrutura HTML inicial que você usará:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
  </head>
  <body>
    <h1>Exploring Logical Operators in JavaScript</h1>

    <div id="output"></div>

    <script>
      // We'll add our JavaScript logical operator examples here
    </script>
  </body>
</html>

Vamos detalhar os componentes-chave deste arquivo HTML:

A declaração <!DOCTYPE html> especifica que este é um documento HTML5
Adicionamos um título e um cabeçalho para descrever a página
A tag <div id="output"> será usada para exibir os resultados dos nossos operadores lógicos
A tag <script> é onde escreveremos nosso código JavaScript

Exemplo de saída quando você abre este arquivo em um navegador:

Exploring Logical Operators in JavaScript

Implementar a Operação Lógica AND (&&)

Nesta etapa, você aprenderá sobre o operador lógico AND (&&) em JavaScript. O operador AND retorna true somente quando ambos os operandos são verdadeiros; caso contrário, retorna false.

Abra o arquivo logical-operators.html que você criou na etapa anterior. Dentro da tag <script>, adicione o seguinte código JavaScript para demonstrar o operador AND:

// AND (&&) Logical Operator Demonstration
function demonstrateAndOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean AND
  let isAdult = true;
  let hasLicense = true;
  let canDrive = isAdult && hasLicense;
  output.innerHTML += `Can drive? ${canDrive}<br>`;

  // Example 2: Comparison AND
  let age = 25;
  let hasValidLicense = age >= 18 && age <= 65;
  output.innerHTML += `Valid driving age? ${hasValidLicense}<br>`;

  // Example 3: Multiple conditions
  let isMember = true;
  let hasDiscount = true;
  let canGetSpecialOffer = isMember && hasDiscount;
  output.innerHTML += `Special offer available? ${canGetSpecialOffer}<br>`;
}

// Call the function when the page loads
demonstrateAndOperator();

Vamos detalhar o operador AND (&&):

Ele retorna true somente se ambas as condições forem true
No primeiro exemplo, canDrive é true somente se isAdult e hasLicense forem true
O segundo exemplo usa operadores de comparação com AND
O terceiro exemplo mostra como AND pode combinar múltiplas condições booleanas

Exemplo de saída no navegador:

Can drive? true
Valid driving age? true
Special offer available? true

Implementar a Operação Lógica OR (||)

Nesta etapa, você aprenderá sobre o operador lógico OR (||) em JavaScript. O operador OR retorna true se pelo menos um dos operandos for verdadeiro; caso contrário, retorna false.

Abra o arquivo logical-operators.html e adicione uma nova função para demonstrar o operador OR dentro da tag <script>:

// OR (||) Logical Operator Demonstration
function demonstrateOrOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean OR
  let isWeekend = false;
  let isHoliday = true;
  let canRelax = isWeekend || isHoliday;
  output.innerHTML += `Can relax? ${canRelax}<br>`;

  // Example 2: Comparison OR
  let age = 16;
  let hasParentalConsent = true;
  let canAttendEvent = age >= 18 || hasParentalConsent;
  output.innerHTML += `Can attend event? ${canAttendEvent}<br>`;

  // Example 3: Multiple conditions
  let hasCoupon = false;
  let isNewCustomer = true;
  let canGetDiscount = hasCoupon || isNewCustomer;
  output.innerHTML += `Eligible for discount? ${canGetDiscount}<br>`;
}

// Call the function when the page loads
demonstrateOrOperator();

Vamos detalhar o operador OR (||):

Ele retorna true se pelo menos uma condição for true
No primeiro exemplo, canRelax é true porque isHoliday é true
O segundo exemplo mostra como OR pode ser usado com comparação e condições booleanas
O terceiro exemplo demonstra a combinação de múltiplas condições

Exemplo de saída no navegador:

Can relax? true
Can attend event? true
Eligible for discount? true

Implementar a Operação Lógica NOT (!)

Nesta etapa, você aprenderá sobre o operador lógico NOT (!) em JavaScript. O operador NOT inverte o valor booleano de uma expressão, transformando true em false e false em true.

Abra o arquivo logical-operators.html e adicione uma nova função para demonstrar o operador NOT dentro da tag <script>:

// NOT (!) Logical Operator Demonstration
function demonstrateNotOperator() {
  let output = document.getElementById("output");

  // Example 1: Basic NOT operation
  let isRaining = false;
  let isSunny = !isRaining;
  output.innerHTML += `Is it sunny? ${isSunny}<br>`;

  // Example 2: NOT with comparison
  let age = 16;
  let isAdult = !(age < 18);
  output.innerHTML += `Is an adult? ${isAdult}<br>`;

  // Example 3: Negating a complex condition
  let hasTicket = true;
  let isCrowded = true;
  let canEnter = !(hasTicket && isCrowded);
  output.innerHTML += `Can enter? ${canEnter}<br>`;
}

// Call the function when the page loads
demonstrateNotOperator();

Vamos detalhar o operador NOT (!):

Ele inverte o valor booleano de uma expressão
No primeiro exemplo, isSunny se torna true porque isRaining é false
O segundo exemplo mostra NOT usado com uma comparação
O terceiro exemplo demonstra NOT com uma condição mais complexa

Exemplo de saída no navegador:

Is it sunny? true
Is an adult? false
Can enter? false

Exibir Resultados de Operações Lógicas na Página Web

Nesta etapa, você combinará todos os operadores lógicos que aprendeu e criará uma demonstração abrangente que exibe os resultados na página web. Modificaremos o arquivo HTML para incluir uma abordagem mais estruturada para mostrar os resultados dos operadores lógicos.

Atualize o arquivo logical-operators.html com o seguinte código completo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript Logical Operators Exploration</h1>

    <div id="andResults" class="result">
      <h2>AND (&&) Operator Results</h2>
    </div>

    <div id="orResults" class="result">
      <h2>OR (||) Operator Results</h2>
    </div>

    <div id="notResults" class="result">
      <h2>NOT (!) Operator Results</h2>
    </div>

    <script>
      // Function to display results
      function displayResult(elementId, message) {
        const element = document.getElementById(elementId);
        const resultLine = document.createElement("p");
        resultLine.textContent = message;
        element.appendChild(resultLine);
      }

      // AND (&&) Operator Demonstration
      function demonstrateAndOperator() {
        let isAdult = true;
        let hasLicense = true;
        let canDrive = isAdult && hasLicense;
        displayResult("andResults", `Can drive? ${canDrive}`);

        let age = 25;
        let hasValidLicense = age >= 18 && age <= 65;
        displayResult("andResults", `Valid driving age? ${hasValidLicense}`);
      }

      // OR (||) Operator Demonstration
      function demonstrateOrOperator() {
        let isWeekend = false;
        let isHoliday = true;
        let canRelax = isWeekend || isHoliday;
        displayResult("orResults", `Can relax? ${canRelax}`);

        let age = 16;
        let hasParentalConsent = true;
        let canAttendEvent = age >= 18 || hasParentalConsent;
        displayResult("orResults", `Can attend event? ${canAttendEvent}`);
      }

      // NOT (!) Operator Demonstration
      function demonstrateNotOperator() {
        let isRaining = false;
        let isSunny = !isRaining;
        displayResult("notResults", `Is it sunny? ${isSunny}`);

        let age = 16;
        let isAdult = !(age < 18);
        displayResult("notResults", `Is an adult? ${isAdult}`);
      }

      // Run all demonstrations when page loads
      function runAllDemonstrations() {
        demonstrateAndOperator();
        demonstrateOrOperator();
        demonstrateNotOperator();
      }

      // Call the main function when the page loads
      window.onload = runAllDemonstrations;
    </script>
  </body>
</html>

Melhorias chave nesta versão:

Adicionadas seções de resultados estilizadas para cada operador lógico
Criada uma função displayResult() para mostrar os resultados
Implementada uma função runAllDemonstrations() para executar todas as demonstrações dos operadores
Adicionado CSS básico para melhorar a legibilidade
Usado window.onload para garantir que todos os scripts sejam executados após o carregamento da página

A saída de exemplo no navegador mostrará os resultados dos operadores AND, OR e NOT em seções separadas e estilizadas.

Resumo

Neste laboratório, os participantes exploraram os operadores lógicos JavaScript por meio de um exercício prático de desenvolvimento web. O laboratório começou com a criação de um arquivo HTML com uma div de saída dedicada, configurando um ambiente estruturado para demonstrar operações lógicas. Os participantes aprenderam sobre os operadores AND (&&), OR (||) e NOT (!), implementando exemplos práticos que demonstram como esses operadores lógicos avaliam expressões booleanas e controlam o fluxo do programa.

A abordagem interativa permitiu que os alunos entendessem o comportamento de cada operador lógico, escrevendo código JavaScript diretamente dentro do arquivo HTML. Ao manipular valores booleanos e usar técnicas de comparação, os participantes obtiveram insights sobre como os operadores lógicos podem ser usados para tomar decisões condicionais e criar avaliações lógicas mais complexas na programação JavaScript.

Explore Operadores Lógicos em JavaScript

Introdução

Configurar o Arquivo HTML para Demonstração de Operadores Lógicos

Implementar a Operação Lógica AND (&&)

Implementar a Operação Lógica OR (||)

Implementar a Operação Lógica NOT (!)

Exibir Resultados de Operações Lógicas na Página Web

Resumo