Aula 14

Operadores Aritméticos em JavaScript e Aplicações no Cotidiano Digital 🧮

🎯 Objetivos da Aula:

Compreender o funcionamento dos principais operadores aritméticos do JavaScript
Aplicar esses operadores em situações contextualizadas com o universo dos alunos (jogos, tecnologia, fantasia etc.)
Desenvolver a lógica de expressões matemáticas simples com múltiplas variáveis
Organizar o código de forma clara, usando boas práticas: conversão de dados, clareza nos nomes e uso de alert()

No JavaScript, usamos o símbolo + para somar números ou juntar textos. O - serve para subtrair valores. Já o * multiplica e o / divide. Também existe o operador %, que mostra o que sobra de uma divisão (chamamos isso de “resto”). Um detalhe importante é que todo valor que vem do prompt() é tratado como texto, então, se quisermos fazer contas, precisamos usar Number() para converter para número. Quando o resultado da conta é um valor com casas decimais, usamos toFixed(2) para deixar o número com apenas duas casas depois da vírgula, como fazemos com valores em dinheiro.

Vamos ver um exemplo simples. Imagine que você pegou moedas em um jogo: bronze vale 1 ponto, prata vale 3 e ouro vale 5. Se você informar quantas pegou de cada uma, o programa pode calcular sua pontuação:

let bronze = prompt("Quantas moedas de bronze?");

let prata = prompt("E de prata?");

let ouro = prompt("E de ouro?");

bronze = Number(bronze);

prata = Number(prata);

ouro = Number(ouro);

let total = bronze * 1 + prata * 3 + ouro * 5;

alert("Sua pontuação foi: " + total);

Visualização da página por completo

<!DOCTYPE html>

<head>

<title>Conversor de Moedas do Jogo</title>

<style>

body {

background-color: #f2f2f2;

font-family: Arial, sans-serif;

text-align: center;

padding: 40px;

}

h1 {

color: #444;

font-size: 28px;

margin-bottom: 20px;

}

p {

font-size: 18px;

color: #555;

}

button {

background-color: #4CAF50;

color: white;

font-size: 16px;

padding: 10px 20px;

border: none;

border-radius: 6px;

cursor: pointer;

margin-top: 20px;

}

button:hover {

background-color: #45a049;

}

</style>

</head>

<body>

<h1>💰 Conversor de Moedas do Jogo</h1>

<p>Descubra quantos pontos você conseguiu na fase!</p>

<button onclick="calcularPontuacao()">Calcular Pontos</button>

function calcularPontuacao() {

let bronze = prompt("Quantas moedas de BRONZE você pegou? (vale 1 ponto cada)");

let prata = prompt("Quantas moedas de PRATA você pegou? (vale 3 pontos cada)");

let ouro = prompt("Quantas moedas de OURO você pegou? (vale 5 pontos cada)");

bronze = Number(bronze);

prata = Number(prata);

ouro = Number(ouro);

let total = bronze * 1 + prata * 3 + ouro * 5;

alert("Sua pontuação total é: " + total + " pontos!");

}

</script>

</body>

</html>

Seu desafio é ler os comentários no código, inserir os comandos corretamente e testar o resultado no navegador. Sempre que for usar um valor numérico vindo do prompt(), não esqueça de aplicar Number(). Se o resultado for um valor em dinheiro ou com vírgula, use toFixed(2) para deixar mais bonito e organizado.

Hora do exercício! 🏋️🔥

🧠 Explicação rápida:

O prompt() sempre retorna texto. Se o aluno não usar Number(), o JavaScript não soma — ele junta os valores como se fossem palavras. Com Number(), ele transforma os textos em números reais e faz o cálculo corretamente.

// Aqui vamos mostrar o que acontece se NÃO usarmos o Number()

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

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

// Sem converter, o JavaScript junta os dois valores como texto (concatenação)

let resultadoErrado = a + b;

// Agora vamos converter os valores corretamente para número

a = Number(a);

b = Number(b);

let resultadoCorreto = a + b;

O toFixed(2) é útil quando o aluno estiver trabalhando com valores em dinheiro ou qualquer número que precisa ficar mais bonito e preciso, com apenas duas casas decimais (ex: 7.3 vira 7.30).

// Exibindo com toFixed para arredondar com 2 casas decimais

alert("R$ " + total.toFixed(2));

✅ Exercício 1 — Moedas de Jogo

<!DOCTYPE html>

<head>

<title>Exercício 1 - Pontuação de Moedas</title>

</head>

<body>

<h2>Exercício 1 - Pontuação de Moedas</h2>

// Neste exercício, você vai calcular a pontuação total de um jogador

// baseado nas moedas coletadas:

// - Moeda de bronze vale 1 ponto

// - Moeda de prata vale 3 pontos

// - Moeda de ouro vale 5 pontos

// Peça ao jogador (com prompt) quantas moedas de bronze ele pegou

// Peça quantas moedas de prata ele pegou

// Peça quantas moedas de ouro ele pegou

// Converta todas as respostas para número com Number()

// Calcule a pontuação total multiplicando cada tipo de moeda por seu valor

// Mostre o total com alert()

// Exemplo de resultado: "Sua pontuação total é: 87 pontos"

</script>

</body>

</html>

✅ Exercício 2 — Loja de Skins

<!DOCTYPE html>

<head>

<title>Exercício 2 - Loja de Skins</title>

</head>

<body>

<h2>Exercício 2 - Loja de Skins</h2>

// Imagine que o usuário está comprando 3 itens em uma loja de jogo:

// - Uma skin principal

// - Um emote

// - Um acessório visual

// Peça os valores de cada item separadamente com prompt()

// Converta cada valor para número com Number()

// Calcule o total da compra somando os três valores

// Use toFixed(2) para mostrar o valor final com duas casas decimais

// Exiba o resultado final com alert()

// Exemplo: "Total da compra: R$ 42.75"

</script>

</body>

</html>

✅ Exercício 3 — Corrida Futurista

<!DOCTYPE html>

<head>

<title>Exercício 3 - Corrida Futurista</title>

</head>

<body>

<h2>Exercício 3 - Corrida Futurista</h2>

// O jogador participou de uma corrida com 3 voltas

// Você deve calcular o tempo total da corrida

// Peça o tempo da primeira volta (em minutos)

// Peça o tempo da segunda volta

// Peça o tempo da terceira volta

// Converta todos os valores com Number()

// Some os tempos para descobrir o total da corrida

// Exiba com alert() o tempo final da corrida com duas casas decimais

// Exemplo: "Tempo total da corrida: 12.45 minutos"

</script>

</body>

</html>

✅ Exercício 4 — Consumo Gamer

<!DOCTYPE html>

<head>

<title>Exercício 4 - Consumo de Energia Gamer</title>

</head>

<body>

<h2>Exercício 4 - Consumo de Energia Gamer</h2>

// Você está simulando o consumo de energia de 3 equipamentos gamer:

// - Um PC gamer

// - Um monitor

// - Um console

// Peça ao usuário o consumo de cada um dos três equipamentos em kWh (número fictício)

// Converta os valores com Number()

// Some os três valores para obter o consumo total

// Exiba com alert() o consumo total com duas casas decimais

// Exemplo: "Consumo total: 8.73 kWh"

</script>

</body>

</html>

✅ Exercício 5 — Criação de Personagem (RPG)

<!DOCTYPE html>

<head>

<title>Exercício 5 - Criação de Personagem</title>

</head>

<body>

<h2>Exercício 5 - Criação de Personagem</h2>

// Neste exercício, o jogador está montando um personagem

// e precisa saber quanto vai gastar para habilitar as habilidades:

// - Habilidade principal

// - Habilidade secundária

// - Equipamento especial

// Peça os valores de cada uma dessas opções

// Use Number() para converter

// Calcule o total e use toFixed(2) para mostrar o valor final com duas casas

// Mostre o resultado com alert()

// Exemplo: "Custo total da criação: R$ 58.90"

</script>

</body>

</html>

✅ Exercício 6 — Poção Mágica

<!DOCTYPE html>

<head>

<title>Exercício 6 - Poção Mágica</title>

</head>

<body>

<h2>Exercício 6 - Poção Mágica</h2>

// O jogador precisa preparar uma poção mágica

// A poção é feita com três ingredientes:

// - Erva rara

// - Cristal mágico

// - Frasco especial

// Peça o valor de cada ingrediente com prompt()

// Converta com Number()

// Calcule o custo total da poção

// Exiba com alert() o valor da poção com duas casas (use toFixed(2))

// Exemplo: "Valor total da poção: R$ 27.35"

</script>

</body>

</html>

✅ Exercício 7 — Inscrição de Time para Campeonato

<!DOCTYPE html>

<head>

<title>Exercício 7 - Inscrição de Time</title>

</head>

<body>

<h2>Exercício 7 - Inscrição de Time para Campeonato</h2>

// Um time de eSports vai se inscrever para um campeonato

// Você deve calcular o valor total da inscrição

// Peça:

// - Valor da inscrição por jogador

// - Quantidade de jogadores

// Converta os valores com Number()

// Multiplique os dois valores e use toFixed(2)

// Mostre o valor total com alert()

// Exemplo: "Valor total da inscrição do time: R$ 120.00"

</script>

</body>

</html>