Operadores Aritméticos. 🌴 TRILHA JavaScript 🚀 Etapa 04

Academy Code Christ 0
 Seja muito bem-vindo à Academy Code Christ!   
     


🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🚀 Etapa 04 

 O que você vai aprender nesta aula?

Quando começamos a aprender programação, uma das primeiras coisas que precisamos entender é como fazer cálculos dentro do código. É aí que entram os operadores aritméticos em JavaScript. 

Com eles, você pode somar, subtrair, multiplicar e dividir valores, além de realizar diversas operações importantes no dia a dia de um programador. 

Neste tutorial, você vai aprender de forma simples e prática como funcionam os principais operadores aritméticos e como utilizá-los nos seus primeiros códigos. 


🧠 O que são Operadores


Um operador é um símbolo que indica ao JavaScript qual operação executar entre valores (operandos).

💬 Analogia simples:
 Assim como em matemática usamos + para somar e > para comparar, em programação um operador tem o mesmo propósito, só que aplicado dentro de expressões lógicas e computacionais.

Exemplo:

let a = 10;

let b = 5;

let resultado = a + b; // operador de soma

 

Neste caso, o operador + une dois valores (a e b) e retorna o resultado dessa operação (15).

Os operadores são a base de qualquer cálculo, comparação e controle lógico em um programa.

 

💡 Operadores Aritméticos


São os mais simples — usados para operações matemáticas.

Operador

Descrição

Exemplo

Resultado

+

Soma

10 + 5

15

-

Subtração

10 - 5

5

*

Multiplicação

10 * 5

50

/

Divisão

10 / 2

5

%

Resto da divisão (módulo)

10 % 3

1

**

Exponenciação

2 ** 3

8

💬 Dicas úteis:

●     O operador + também serve para concatenar strings.

●     % é ótimo para verificar divisibilidade (veremos em exercícios).

 

🧮 Exemplo prático:


let valor1 = 12;

let valor2 = 8;

 

console.log("Soma:", valor1 + valor2);

console.log("Subtração:", valor1 - valor2);

console.log("Multiplicação:", valor1 * valor2);

console.log("Divisão:", valor1 / valor2);

console.log("Resto da divisão:", valor1 % valor2);

console.log("Potência:", valor1 ** 2);

 

Saída no console:

Soma: 20

Subtração: 4

Multiplicação: 96

Divisão: 1.5

Resto da divisão: 4

Potência: 144

🔎 Veja como fazer no VScode 👇

 

 

🔎 Veja o resultado como fica no Live Server

 

 

 

 

 

⚙️ Incremento e Decremento


Os operadores ++ e -- são usados para aumentar ou diminuir o valor de uma variável de forma prática.

let contador = 1;

contador++; // mesmo que contador = contador + 1

contador--; // mesmo que contador = contador - 1

 

💬 Existem duas formas de usar:

●     Pré-incremento: ++contador (soma antes)


●     Pós-incremento: contador++ (soma depois)

Diferença ilustrada:

let x = 5;

console.log(++x); // mostra 6

console.log(x++); // mostra 6, mas depois vira 7 

 

🔢 Ordem de Operações (Precedência)


A ordem das operações no JS é igual à matemática:

1.    Parênteses ( )

2.    Exponenciação **

3.    Multiplicação / Divisão / Módulo * / %

4.    Soma / Subtração + -

💡 Exemplo:

let total = 10 + 2 * 5;    // 20

let total2 = (10 + 2) * 5; // 60

 

O uso de parênteses simplifica a leitura e garante o resultado esperado.

 

🔍 Operadores Relacionais (ou de Comparação)


São usados para comparar valores, retornando sempre true (verdadeiro) ou false (falso).

Operador

Significado

Exemplo

Resultado

>

Maior que

10 > 5

true

<

Menor que

10 < 5

false

>=

Maior ou igual

10 >= 10

true

<=

Menor ou igual

8 <= 9

true

==

Igual (com conversão de tipo)

"5" == 5

true

===

Estritamente igual (sem conversão)

"5" === 5

false

!=

Diferente (com conversão)

10 != "10"

false

!==

Estritamente diferente

10 !== "10"

true

💬 Dica de ouro:


  Sempre use === e !== — eles são mais seguros, porque não fazem conversão automática de tipo.

 

🧩 Exemplo prático

let a = 10;

let b = "10";

 

console.log(a == b);   // true (compara só o valor)

console.log(a === b);  // false (compara tipo e valor)

console.log(a != b);   // false

console.log(a !== b);  // true

console.log(a > 5);    // true

console.log(a <= 8);   // false 

 

⚡ Operadores Lógicos


Usados para combinar expressões booleanas (verdadeiras ou falsas).

Operador

Nome

Exemplo

Resultado

&&

E (AND)

(5 > 2 && 10 > 8)

true

`

 

`

OU (OR)

!

NÃO (NOT)

!(5 > 2)

false

💡 Explicações simples:


●     E (&&) → verdadeiro só se todas as condições forem verdadeiras;

●     OU (||) → verdadeiro se pelo menos uma for verdadeira;

●     NÃO (!) → inverte o valor lógico (verdadeiro ↔ falso).

 

🧩 Exemplo prático


let idade = 20;

let possuiCNH = true;

 

// Exemplo com E (&&)

let podeDirigir = idade >= 18 && possuiCNH == true;

console.log("Pode dirigir?", podeDirigir);

 

// Exemplo com OU (||)

let temAcesso = idade > 18 || possuiCNH == true;

console.log("Tem acesso?", temAcesso);

 

// Exemplo com NÃO (!)

console.log("Não pode dirigir?", !podeDirigir);

 

Saída:

Pode dirigir? true

Tem acesso? true

Não pode dirigir? false

 

 

🧮 Combinação de Operadores


Você pode misturar operadores aritméticos, relacionais e lógicos em expressões complexas.

Exemplo:

let nota1 = 7;

let nota2 = 9;

let media = (nota1 + nota2) / 2;

 

// Situação do aluno

let aprovado = media >= 6 && media <= 10;

 

console.log("Média:", media);

console.log("Aprovado?", aprovado);

 

Resultado:

Média: 8

Aprovado? true

 

🔧 Precedência Geral de Operadores


Ordem

Categoria

Operadores

1

Agrupamento

( )

2

Negação e incremento

!, ++, --

3

Multiplicação / Divisão / Módulo

*, /, %

4

Soma / Subtração

+, -

5

Comparações

>, <, >=, <=

6

Igualdade

==, ===, !=, !==

7

Lógicos E / OU

&&, `

💬 Use sempre parênteses para garantir clareza e evitar confusões em expressões grandes.

 

🧠 Exemplo Real – Validação de Acesso


Imagine um sistema que libera acesso apenas se a pessoa for maior de 18 e tiver senha correta.

let idade = 22;

let senha = "1234";

let senhaDigitada = "1234";

 

let acessoLiberado = (idade >= 18) && (senhaDigitada === senha);

 

console.log("Acesso permitido?", acessoLiberado);

 

💬 O operador && garante que ambas as condições sejam verdadeiras.
 Se a idade fosse menor que 18 — ou a senha estivesse errada — o acesso seria negado.

 

📘 Para um melhor Aprendizado  🎯 Pratique com exercícios, desafios e projetos 

 

💻 Exercício Prático 1


Crie o arquivo operadores.html com o seguinte conteúdo e teste no console:


<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Operadores em JavaScript</title>

</head>

<body>

  <h1>Operadores JS - Teste no Console</h1>

  <p>Abra o console (F12) para visualizar os resultados</p> 

  <script>

    let a = 5;

    let b = 2;

    let c = "5"; 

    console.log("a + b =", a + b);

    console.log("a * b =", a * b);

    console.log("a ** b =", a ** b);

    console.log("a == c ->", a == c);

    console.log("a === c ->", a === c);

    console.log("(a > b) && (b > 0) ->", (a > b) && (b > 0));

    console.log("(a > b) || (b < 0) ->", (a > b) || (b < 0));

    console.log("!(a === b) ->", !(a === b));

  </script>

</body>

</html> 

 

🧩 Exercício Prático 2 – Calculadora Simples


<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Calculadora Simples</title>

</head>

<body>

  <h1>Calculadora com Operadores JS</h1>

  <script>

    let num1 = Number(prompt("Digite o primeiro número:"));

    let num2 = Number(prompt("Digite o segundo número:"));

 

    alert(`

      Soma: ${num1 + num2}

      Subtração: ${num1 - num2}

      Multiplicação: ${num1 * num2}

      Divisão: ${num1 / num2}

      Resto: ${num1 % num2}

    `);

  </script>

</body>

</html>

 

💡 Observe:

●     Convertendo prompt com Number() cuidamos para que os valores digitados sejam interpretados como números e não strings.

 

🧠 Desafio Final


Crie um script que:

1.    Peça o nome e a idade da pessoa;

2.    Verifique se ela é maior de idade (idade ≥ 18);

3.    Mostre no console a mensagem:

○     "Acesso permitido" se for maior de idade;

○     "Acesso negado" caso contrário.

💡 Desafio extra: Adicione uma condição que libere acesso se o nome for “admin”, independentemente da idade.

 

🔹 Exemplo base


let nome = prompt("Qual é o seu nome?");

let idade = Number(prompt("Quantos anos você tem?"));

 

if (idade >= 18 || nome === "admin") {

  alert("Acesso permitido!");

} else {

  alert("Acesso negado!");

}

  

🧱 Revisão


✔ O que são operadores e para que servem;

 ✔ Como usar operadores aritméticos (+, -, *, /, %, **);

 ✔ Como realizar comparações com operadores relacionais (==, ===, !=, etc.);

 ✔ Como construir condições lógicas com operadores (&&, ||, !);

 ✔ A ordem de precedência e boas práticas;

 ✔ Aplicou tudo em exemplos e exercícios funcionais.

 

🎓 Conclusão

Agora suas variáveis ganham comportamento.
 Com os operadores, você é capaz de calcular, comparar e decidir, criando lógicas inteligentes e dinâmicas.



📚 Continue aprendendo JavaScript:




🚀 Etapa 04 👉 Você está nessa Etapa

🚀 Etapa 05 👉 Estruturas Condicionais

🚀 Etapa 06 👉 Laços de Repetição



Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 


Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem