Stela JavaScript Aulas Aula 4
A loja precisa de uma calculadora esperta
Operadores aritméticos, relacionais e lógicos resolvendo um problema de verdade.
Usar operadores para calcular, comparar e decidir regras de negócio.
Ler o capítulo sobre operadores da bibliografia básica.
Resolução de exercícios em laboratório.
Descontos, parcelas e frete grátis
Um pequeno comércio pediu ajuda: precisa calcular descontos, dividir em parcelas e saber se o cliente ganha frete grátis. Antes de programar, levantem no Whiteboard: quais dados entram, que contas são feitas e o que sai.
Os operadores da calculadora
Aritméticos e atribuição
As contas de sempre: +, -, *, /. E mais dois: % (resto da divisão) e ** (potência).
A precedência é a da matemática: parênteses primeiro. Para atualizar uma variável, use os atalhos +=, -=, ++ e --.
1const preco = 200;2const desconto = preco * 0.1; // 203const total = preco - desconto; // 18045console.log(10 % 3); // 1 (resto)6console.log(2 ** 3); // 8 (potência)7console.log(2 + 3 * 4); // 148console.log((2 + 3) * 4); // 20910let itens = 1;11itens++; // 212itens += 3; // 5Relacionais: comparando
Comparações respondem true ou false: >, <, >=, <=, === e !==.
Cuidado: == compara só o valor e converte o tipo sozinho. === compara valor e tipo. Use sempre ===.
1console.log(180 > 150); // true2console.log(5 == "5"); // true (converteu o tipo!)3console.log(5 === "5"); // false (tipos diferentes)4console.log(5 !== "5"); // trueLógicos: juntando condições
&& (E) exige as duas condições. || (OU) se contenta com uma. ! (NÃO) inverte.
É assim que nascem as regras de negócio.
1const total = 180;2const aVista = true;34const freteGratis = total >= 150; // true5const ganhaDesconto = aVista && total > 100; // true6const temBrinde = total > 500 || aVista; // true7console.log(!freteGratis); // falseCalcular o total da compra
Ator: Caixa da loja
Objetivo: Saber o total com desconto e o troco.
Fluxo principal
- O caixa informa o preço e a quantidade.
- O sistema calcula o subtotal.
- Aplica o desconto de pagamento à vista.
- Informa o valor pago e o sistema mostra o troco.
E se...
- O valor pago é menor que o total: o sistema avisa quanto falta.
- A quantidade é zero: o total é zero, sem desconto.
Para pensar
- Que operadores aparecem em cada passo?
- Em que ordem o JavaScript faz as contas, se ninguém puser parênteses?
A calculadora da loja, em dupla
Programação em pares: um pilota o teclado, o outro navega. Troquem de papel na metade. O que você marcar fica salvo neste navegador.
Desafio relâmpago: quem encontra mais situações em que a calculadora falha? (Valor negativo, zero parcelas, texto no lugar de número…)
Matemática que vende
Matemática
Porcentagem, divisão e resto: a calculadora é matemática financeira de bolso.
Engenharia
Testar os casos que quebram o sistema é o que engenheiros fazem antes de entregar uma ponte. Ou um app.
Tecnologia
Todo e-commerce tem essas regras de frete e desconto rodando em JavaScript.
Terminou antes? Tem mais.
Use o operador % para descobrir se o número de parcelas é par ou ímpar, e dê um brinde para quem parcelar em número par. Inútil? Sim. Divertido? Também.
Para estudar e praticar
Tutorial: calculadora simples
Passo a passo para construir uma calculadora do zero.
JavaScriptpasso a passo
curso/exercicios
Exercícios de operadores lógicos
Para treinar E, OU e NÃO.
JavaScriptexercícios
MDN Web Docs
Expressões e operadores
Todos os operadores, com exemplos.
DocumentaçãoconsultaCommit da calculadora
Até o fim da aula, com os casos de teste comentados no código.