Operações Aritméticas JavaScript: Guia Completo

Introdução

Neste laboratório, os participantes explorarão as operações aritméticas fundamentais em JavaScript, aprendendo a manipular números usando vários operadores matemáticos. O laboratório oferece uma jornada abrangente através da configuração de um ambiente HTML, implementando operações aritméticas básicas como adição, subtração, multiplicação e divisão, e compreendendo conceitos mais avançados como módulo e operadores de incremento/decremento.

Os participantes começarão criando um arquivo HTML com uma seção JavaScript embutida, e então construirão progressivamente suas habilidades praticando diferentes técnicas aritméticas. Através de exercícios práticos de codificação, os alunos ganharão experiência prática na realização de cálculos matemáticos, na compreensão da precedência de operadores e na exploração de operações de incremento/decremento prefixo e postfixo, que são habilidades essenciais para a programação em JavaScript.

Configurar o Arquivo HTML para Operações Aritméticas em JavaScript

Nesta etapa, você criará um arquivo HTML básico que servirá como a base para realizar operações aritméticas em JavaScript. Vamos configurar uma estrutura HTML simples e incluir uma seção JavaScript embutida para demonstrar a funcionalidade aritmética básica.

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

Copie e cole o seguinte código HTML no arquivo arithmetic.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Arithmetic Operations</title>
  </head>
  <body>
    <h1>JavaScript Arithmetic Operations</h1>

    <script>
      // We'll add our JavaScript code here in this section
      console.log("HTML file is ready for arithmetic operations!");
    </script>
  </body>
</html>

Vamos detalhar os componentes-chave deste arquivo HTML:

<!DOCTYPE html> declara que este é um documento HTML5
A seção <head> contém metadados sobre o documento
O <body> contém o conteúdo visível
A tag <script> é onde escreveremos nosso código JavaScript

Para verificar se o arquivo foi criado corretamente, você pode abrir o arquivo no console do desenvolvedor do navegador. O console.log() inicial ajudará a confirmar que o arquivo está configurado corretamente.

Implementar Operadores Aritméticos Básicos (+, -, *, /)

Nesta etapa, você aprenderá como realizar operações aritméticas básicas em JavaScript usando os operadores matemáticos fundamentais: adição (+), subtração (-), multiplicação (*) e divisão (/).

Abra o arquivo arithmetic.html criado na etapa anterior e modifique a seção <script> para incluir o seguinte código:

<script>
  // Addition Operator (+)
  let sum = 10 + 5;
  console.log("Addition: 10 + 5 =", sum);

  // Subtraction Operator (-)
  let difference = 20 - 7;
  console.log("Subtraction: 20 - 7 =", difference);

  // Multiplication Operator (*)
  let product = 6 * 4;
  console.log("Multiplication: 6 * 4 =", product);

  // Division Operator (/)
  let quotient = 25 / 5;
  console.log("Division: 25 / 5 =", quotient);
</script>

Quando você abrir este arquivo HTML em um navegador web e verificar o console do desenvolvedor do navegador, você verá a seguinte saída de exemplo:

Addition: 10 + 5 = 15
Subtraction: 20 - 7 = 13
Multiplication: 6 * 4 = 24
Division: 25 / 5 = 5

Pontos-chave para entender:

O operador + soma dois números
O operador - subtrai o operando direito do esquerdo
O operador * multiplica dois números
O operador / divide o operando esquerdo pelo direito

Você também pode realizar operações com variáveis e misturar diferentes tipos de números, incluindo inteiros e números de ponto flutuante.

Explorar o Operador Módulo e Operadores de Incremento/Decremento

Nesta etapa, você aprenderá sobre dois importantes operadores aritméticos em JavaScript: o operador módulo (%) e os operadores de incremento/decremento (++ e --).

Abra o arquivo arithmetic.html e atualize a seção <script> com o seguinte código:

<script>
  // Modulo Operator (%)
  // Returns the remainder of a division
  let remainder = 17 % 5;
  console.log("Modulo: 17 % 5 =", remainder);

  // Increment Operator (++)
  let x = 10;
  x++; // Increases x by 1
  console.log("Increment: x++ =", x);

  // Decrement Operator (--)
  let y = 20;
  y--; // Decreases y by 1
  console.log("Decrement: y-- =", y);

  // More modulo examples
  console.log("Even/Odd Check: 15 % 2 =", 15 % 2);
  console.log("Even/Odd Check: 16 % 2 =", 16 % 2);
</script>

Quando você abrir este arquivo HTML em um navegador web e verificar o console do desenvolvedor, você verá a seguinte saída de exemplo:

Modulo: 17 % 5 = 2
Increment: x++ = 11
Decrement: y-- = 19
Even/Odd Check: 15 % 2 = 1
Even/Odd Check: 16 % 2 = 0

Pontos-chave para entender:

O operador módulo % retorna o resto após a divisão
Você pode usar o módulo para verificar se um número é par ou ímpar
O operador de incremento ++ aumenta uma variável em 1
O operador de decremento -- diminui uma variável em 1

O operador módulo é particularmente útil para:

Verificar números pares/ímpares
Percorrer um intervalo de números
Criar padrões ou distribuições

Compreender Incremento/Decremento Prefixado e Posfixado

Nesta etapa, você aprenderá a diferença entre os operadores de incremento/decremento prefixados e posfixados em JavaScript. Esses operadores podem parecer semelhantes, mas se comportam de maneira diferente quando usados em expressões.

Abra o arquivo arithmetic.html e atualize a seção <script> com o seguinte código:

<script>
  // Postfix Increment (x++)
  let a = 5;
  let b = a++;
  console.log("Postfix Increment:");
  console.log("a =", a); // a is incremented after the value is assigned
  console.log("b =", b); // b gets the original value of a

  // Prefix Increment (++x)
  let x = 5;
  let y = ++x;
  console.log("\nPrefix Increment:");
  console.log("x =", x); // x is incremented before the value is assigned
  console.log("y =", y); // y gets the incremented value of x

  // Similar concept applies to decrement operators
  let p = 10;
  let q = p--;
  console.log("\nPostfix Decrement:");
  console.log("p =", p); // p is decremented after the value is assigned
  console.log("q =", q); // q gets the original value of p

  let m = 10;
  let n = --m;
  console.log("\nPrefix Decrement:");
  console.log("m =", m); // m is decremented before the value is assigned
  console.log("n =", n); // n gets the decremented value of m
</script>

Quando você abrir este arquivo HTML em um navegador web e verificar o console do desenvolvedor, você verá a seguinte saída de exemplo:

Postfix Increment:
a = 6
b = 5

Prefix Increment:
x = 6
y = 6

Postfix Decrement:
p = 9
q = 10

Prefix Decrement:
m = 9
n = 9

Pontos-chave para entender:

Posfixado x++: Retorna o valor original, depois incrementa
Prefixado ++x: Incrementa primeiro, depois retorna o novo valor
O mesmo princípio se aplica aos operadores de decremento x-- e --x
Essa diferença importa quando o operador é usado em uma expressão ou atribuição

Praticar a Combinação de Operações Aritméticas

Nesta etapa, você aprenderá como combinar múltiplas operações aritméticas para criar cálculos mais complexos. Exploraremos diferentes maneiras de combinar operadores e demonstraremos como o JavaScript lida com a ordem das operações.

Abra o arquivo arithmetic.html e atualize a seção <script> com o seguinte código:

<script>
  // Combining multiple arithmetic operations
  let result1 = 10 + 5 * 2;
  console.log("Result 1 (10 + 5 * 2):", result1);

  // Using parentheses to change order of operations
  let result2 = (10 + 5) * 2;
  console.log("Result 2 ((10 + 5) * 2):", result2);

  // Complex calculation with multiple operators
  let x = 15;
  let y = 7;
  let complexCalc = (x % 4) + y * 2 - x++ / 3;
  console.log("Complex Calculation:", complexCalc);

  // Combining increment/decrement with other operations
  let a = 5;
  let b = 3;
  let mixedCalc = ++a + b-- * 2;
  console.log("Mixed Calculation (++a + b-- * 2):", mixedCalc);
  console.log("a after calculation:", a);
  console.log("b after calculation:", b);

  // Practical example: Calculating average
  let score1 = 85;
  let score2 = 92;
  let score3 = 78;
  let averageScore = (score1 + score2 + score3) / 3;
  console.log("Average Score:", averageScore);
</script>

Quando você abrir este arquivo HTML em um navegador web e verificar o console do desenvolvedor, você verá a seguinte saída de exemplo:

Result 1 (10 + 5 * 2): 20
Result 2 ((10 + 5) * 2): 30
Complex Calculation: 9
Mixed Calculation (++a + b-- * 2): 11
a after calculation: 6
b after calculation: 2
Average Score: 85

Pontos-chave para entender:

JavaScript segue a ordem matemática padrão das operações (PEMDAS)
Parênteses podem ser usados para alterar a ordem padrão das operações
Você pode combinar diferentes tipos de operadores aritméticos em uma única expressão
Operadores de incremento e decremento podem ser usados dentro de cálculos maiores
Sempre tenha cuidado com a ordem e o posicionamento dos operadores

Resumo

Neste laboratório, os participantes aprenderam como configurar um arquivo HTML básico para operações aritméticas em JavaScript e explorar computações matemáticas fundamentais. O laboratório guiou os alunos na criação de um documento HTML com uma seção JavaScript embutida, permitindo que eles praticassem técnicas aritméticas essenciais usando operadores como adição (+), subtração (-), multiplicação (*) e divisão (/).

A jornada de aprendizado progrediu desde o estabelecimento de uma estrutura HTML fundamental até a implementação de várias operações aritméticas, incluindo a exploração de operadores de módulo, incremento e decremento. Os participantes ganharam experiência prática com diferentes variações de operadores, entendendo como combinar operações aritméticas e manipular valores numéricos de forma eficaz em JavaScript.

Realizar Operações Aritméticas em JavaScript

Introdução

Configurar o Arquivo HTML para Operações Aritméticas em JavaScript

Implementar Operadores Aritméticos Básicos (+, -, *, /)

Explorar o Operador Módulo e Operadores de Incremento/Decremento

Compreender Incremento/Decremento Prefixado e Posfixado

Praticar a Combinação de Operações Aritméticas

Resumo