JavaScript 1: variáveis e contas de negócio

Hoje começas a programar a sério: vais guardar dados em variáveis e pôr o computador a fazer contas de empresa, como o IVA e os descontos.

🎯 No fim desta aula vais conseguir

Explicar para que serve o JavaScript e usar a Consola do browser.
Criar variáveis com let e const e distinguir texto, números e verdadeiro/falso.
Fazer contas com +, -, * e / e arredondar a 2 casas decimais.
Juntar texto e valores numa frase, com + ou com crases ` `.

🧰 Antes de começar

Abre a pasta meu-crm no VS Code (File → Open Folder…).
Hoje não mexemos no CRM: vamos treinar numa página à parte, o treino.html, com o código no treino.js. Os dois já estão na tua pasta.
Confirma que o teu CRM tem as cores da tua empresa (aula 3).

😕 Faltaste à aula 3 ou o teu projeto não funciona? Descarrega o ponto de controlo da aula 3, descompacta-o e trabalha a partir dele.

Parte A — Conhecer o JavaScript e a Consola (≈ 20 min)

1 O “cérebro” da página

Já conheces duas linguagens: o HTML diz o que existe na página e o CSS diz como se vê. Falta a terceira: o JavaScript diz o que acontece. É o cérebro: faz contas, toma decisões e reage quando carregas num botão.

Antes de usar o JavaScript no CRM (aula 6), vamos treinar. Como num ginásio: primeiro aquece-se, depois joga-se.

A) Abrir o treino e a Consola

No VS Code, clica com o botão direito no treino.html e escolhe Open with Live Server.
No browser, carrega F12 e escolhe o separador Consola (ou Console). É aqui que o JavaScript escreve os resultados.
Clica na linha vazia ao fundo da Consola (ao lado do sinal >), escreve 2 + 2 e carrega Enter.
Experimenta também 10 * 3 (o asterisco é o “vezes”), 100 / 4 (a barra é o “a dividir”) e 'Olá' + ' turma'.

✅ Deves ver: 4, 30, 25 e 'Olá turma'. A Consola é uma calculadora… que também percebe texto!

B) A primeira linha de código num ficheiro

O que escreves na Consola perde-se quando recarregas a página. Por isso, os programas escrevem-se em ficheiros. Abre o treino.js no VS Code. As linhas que começam por // são comentários (o JavaScript ignora-as, como os  do HTML).

A instrução console.log(…) quer dizer «escreve isto na Consola». O texto vai sempre entre aspas (plicas '…') e cada instrução acaba com ;, como uma frase acaba com um ponto final.

console.log('Olá! O JavaScript está a funcionar.');

Grava (Ctrl+S). O Live Server recarrega a página sozinho; se não estiveres a usar o Live Server, carrega F5 no browser.

✅ Deves ver na Consola: Olá! O JavaScript está a funcionar.

😕 Não aparece nada na Consola

Estás a ver o treino.html? (Olha para a barra de endereço: tem de terminar em treino.html, não em index.html.)
Gravaste o treino.js? Não pode haver um círculo branco no separador do VS Code.
Por cima das mensagens da Consola há um filtro de níveis: confirma que não está escolhido só «Erros».
Aparece um erro vermelho com Invalid or unexpected token? Falta fechar uma aspa. Volta a copiar com o botão.

Parte B — Variáveis e contas de negócio (≈ 45 min)

2 Variáveis: caixas com etiqueta

Uma variável é como uma caixa com uma etiqueta: a etiqueta é o nome, e lá dentro guardas um valor. Quando escreves const nomeCliente = 'Ana Silva'; estás a dizer: «cria uma caixa chamada nomeCliente e guarda lá dentro o texto 'Ana Silva'». Aqui, o = quer dizer guarda, não «é igual».

Há duas formas de criar uma variável:

let → caixa que pode mudar de conteúdo mais tarde (como a idade, que aumenta todos os anos);
const → caixa selada: o valor fica constante (como a data de nascimento).

E há três tipos de dados que vais usar muito:

Tipo	Em inglês	Como se escreve	Exemplo
Texto	string	sempre entre aspas	`'Ana Silva'`
Número	number	sem aspas; as casas decimais levam ponto	`34`, `19.90`
Verdadeiro / falso	boolean	sem aspas	`true`, `false`

💡 Regras para os nomes: sem espaços e sem acentos; começam por letra minúscula; quando há várias palavras, cada palavra nova começa por maiúscula (nomeCliente, precoComIva). E atenção: nomeCliente e nomecliente são nomes diferentes!

🤔 Prevê antes de executar: o que vai aparecer em Que tipo é a idade? E em Idade no próximo ano? Escreve no caderno.

// --- Variáveis e tipos de dados ---
const nomeCliente = 'Ana Silva';   // texto (string) — vai sempre entre aspas
let idade = 34;                    // número (number) — sem aspas
let clienteAtivo = true;           // verdadeiro ou falso (boolean)

console.log('Cliente:', nomeCliente);
console.log('Idade:', idade);
console.log('Ativo?', clienteAtivo);
console.log('Que tipo é a idade?', typeof idade);

idade = idade + 1;                 // fez anos! (let pode mudar, const não)
console.log('Idade no próximo ano:', idade);

💡 Repara: dentro do console.log, a vírgula separa as coisas a mostrar (o texto entre aspas e o valor da variável). A linha idade = idade + 1; lê-se da direita para a esquerda: «pega na idade, soma 1 e guarda o resultado outra vez na idade».

✅ Deves ver na Consola: Cliente: Ana Silva, Idade: 34, Ativo? true, Que tipo é a idade? number e Idade no próximo ano: 35.

😕 Aparece um erro vermelho

… is not defined → um nome está escrito de forma diferente (maiúsculas contam!). Compara letra a letra.
Unexpected identifier ou Unexpected string → colaste o bloco no meio de outra linha. O bloco tem de ficar por baixo da linha console.log('Olá! …');, numa linha nova.

3 Contas de negócio: o IVA

Qualquer programa de faturação calcula o IVA (o imposto sobre o valor acrescentado) de milhares de faturas por dia. Em Portugal continental, a taxa normal é de 23%. Para fazer contas com percentagens, divide-se por 100: 23% = 0.23.

Operação	Em JavaScript	Exemplo	Resultado
Somar	`+`	`100 + 23`	123
Subtrair	`-`	`100 - 15`	85
Multiplicar	`*`	`100 * 0.23`	23
Dividir	`/`	`100 / 4`	25

🤔 Prevê: um artigo custa 100 € sem IVA. Quanto é o IVA? E o preço com IVA?

// --- Contas de negócio: preço com IVA ---
const precoSemIva = 100;
const taxaIva = 0.23;              // 23% em Portugal continental
const valorIva = precoSemIva * taxaIva;
const precoComIva = precoSemIva + valorIva;

console.log('Preço sem IVA:', precoSemIva, '€');
console.log('IVA (23%):', valorIva, '€');
console.log('Preço com IVA:', precoComIva, '€');

✅ Deves ver na Consola: Preço sem IVA: 100 €, IVA (23%): 23 € e Preço com IVA: 123 €.

💡 Experimenta: muda o precoSemIva para 250, grava e vê como todas as contas se atualizam. É essa a vantagem das variáveis.

4 Descontos, arredondamentos e frases

Agora um artigo de 49,90 € com 15% de desconto. Repara em três coisas novas:

Tal como na Matemática, o JavaScript faz primeiro as multiplicações e só depois as somas e subtrações: 49.90 - 49.90 * 0.15 é «49,90 menos o desconto».
.toFixed(2) arredonda a 2 casas decimais (os cêntimos), para mostrar valores em euros.
Há duas formas de juntar texto e valores numa frase: com o sinal +, ou escrevendo a frase entre crases ` ` e pondo cada valor dentro de ${ }. A segunda é mais fácil de ler.

💡 Onde está a crase no teclado português? É a tecla à direita do + (a do acento ´), com Shift. Depois carrega na barra de espaço para ela aparecer sozinha.

🤔 Prevê: quanto é 49,90 € com 15% de desconto? Faz a conta na calculadora do telemóvel. Que valor achas que vai aparecer com 2 casas decimais?

// --- Desconto, arredondamento e juntar texto ---
const precoArtigo = 49.90;
const desconto = 0.15;             // 15%
const precoFinal = precoArtigo - precoArtigo * desconto;

console.log('Preço com desconto:', precoFinal);
console.log('Arredondado a 2 casas:', precoFinal.toFixed(2), '€');

// Juntar texto com o sinal +
console.log('O cliente ' + nomeCliente + ' paga ' + precoFinal.toFixed(2) + ' €');
// ...ou com crases ` ` e ${ } (é mais fácil de ler)
console.log(`O cliente ${nomeCliente} paga ${precoFinal.toFixed(2)} €`);

✅ Deves ver na Consola: Preço com desconto: 42.415, Arredondado a 2 casas: 42.41 € e, duas vezes, a frase O cliente Ana Silva paga 42.41 € (uma feita com +, a outra com crases).

😕 Não funciona?

Aparece literalmente ${nomeCliente} na frase → usaste aspas normais '…' em vez de crases `…`. O ${ } só funciona dentro de crases.
nomeCliente is not defined → o bloco do passo 2 (onde se cria o nomeCliente) não está no ficheiro ou está escrito de outra forma.
Unexpected number → escreveste um número com vírgula (49,90). Em JavaScript as casas decimais levam ponto: 49.90.

🔎 Investiga

No fim do treino.js, acrescenta a linha nomeCliente = 'Rui Costa'; e grava. Que erro aparece na Consola? O que significa? (Depois apaga essa linha.)
Na Consola, escreve '5' + 3 e depois 5 + 3. Porque é que os resultados são diferentes?
Na Consola, escreve typeof '34' e depois typeof 34. O que concluis sobre as aspas?
Pela Matemática, 42,415 arredondado a 2 casas devia dar 42,42. Porque é que o JavaScript dá 42,41? Escreve na Consola 42.415.toPrecision(20) e tenta explicar. (Curiosidade: é por isto que os programas de faturação costumam fazer as contas em cêntimos.)

✍️ Exercícios (fazem parte do teu projeto)

Estes exercícios não têm o código pronto: usa o que aprendeste hoje. Escreve-os no treino.js, por baixo do código da aula 4 (e por cima do comentário AULA 5: COLAR AQUI).

⚠️ Atenção aos nomes: não podes criar duas variáveis com o mesmo nome. Se usares um nome que já existe (por exemplo desconto ou precoFinal), aparece o erro Identifier '…' has already been declared e nada do ficheiro funciona. Inventa nomes novos.

E1 · A comissão do vendedor

Um vendedor fez uma venda de 2500 € e ganha uma comissão de 5%. Mostra na Consola a frase «Comissão do vendedor: 125.00 €», calculada pelo programa.

💡 Dica: cria uma variável para o valor da venda, outra para a taxa (quanto é 5% em número decimal?) e outra para a comissão. Para aparecerem os dois zeros dos cêntimos, lembra-te do .toFixed(2). Para a frase, usa crases e ${ }.

E2 · Uma encomenda com desconto e IVA

Um cliente compra 3 artigos a 19,90 € cada. Tem um desconto de 10% e, no fim, acresce o IVA de 23%. Mostra na Consola, numa ou em várias linhas: o subtotal (sem desconto), o valor com desconto e o total com IVA, todos com 2 casas decimais.

💡 Dica: faz as contas por esta ordem, cada uma na sua variável: subtotal = preço × quantidade; com desconto = subtotal menos 10% do subtotal; total = valor com desconto mais 23% desse valor (ou, mais curto, vezes 1.23). Para confirmares: o total com IVA tem de dar 66.09 €.

⭐ Desafio · Minutos em horas

Uma reunião com um cliente durou 135 minutos. Mostra na Consola «135 minutos = 2 h 15 min», com as horas e os minutos calculados pelo programa (se mudares o 135 para 200, tem de aparecer «200 minutos = 3 h 20 min»).

💡 Dica: Math.floor(x) arredonda para baixo (Math.floor(7.8) dá 7). O operador % dá o resto de uma divisão: 17 % 5 dá 2, porque 17 = 3 × 5 + 2. Quantos minutos tem uma hora?

📦 O que mostrar ao professor

A Consola do treino.html mostra «Olá! O JavaScript está a funcionar.» e todos os resultados da aula, sem erros vermelhos.
Sei explicar a diferença entre let e const.
Sei dizer o tipo de 'Ana', 34 e true.
E1: aparece «Comissão do vendedor: 125.00 €».
E2: aparecem o subtotal, o valor com desconto e o total com IVA (66.09 €).

⏱️ Se sobrar tempo

Faz o desafio ⭐.
Na Madeira, a taxa normal de IVA é de 22% e nos Açores de 16%. Calcula o preço com IVA de um artigo de 100 € em cada região.
Cria uma variável com o teu ano de nascimento e calcula a tua idade em 2030.
Na Consola, experimenta Math.round(42.6), Math.max(3, 9, 5) e Math.min(3, 9, 5). O que faz cada um?

🤖 Pedir ajuda à IA (opcional)

Se tiveres um erro que não percebes, podes pedir a uma IA gratuita (Claude, ChatGPT…) que te explique o erro, sem te dar a solução. Copia este pedido, troca o texto entre [ ] e cola-o na IA:

📖 Palavras novas

JavaScript: Linguagem que dá “cérebro” à página: faz contas, decide e reage ao utilizador.
Consola: Separador das ferramentas de programador (F12) onde o JavaScript mostra mensagens e erros.
console.log(…): Instrução que escreve na Consola.
Variável: “Caixa com etiqueta” que guarda um valor: let idade = 34;
let / const: Criam variáveis; a de let pode mudar, a de const não.
Texto (string): Valor entre aspas: 'Ana Silva'.
Número (number): Valor numérico, com ponto nas casas decimais: 19.90.
Booleano (boolean): Verdadeiro ou falso: true / false.
typeof: Diz o tipo de um valor.
.toFixed(2): Arredonda um número a 2 casas decimais (e transforma-o em texto).
Crases e ${ }: Forma de escrever uma frase com valores lá dentro: `Olá, ${nomeCliente}`.