Fase 2Sintaxe Real

Variáveis, Tipos e Operadores

Progresso da fase0%

A carregar…

Aqui começa o JavaScript a sério. Vais aprender a guardar informação em variáveis, os tipos de dados que o JavaScript entende, e os operadores que te permitem combinar, comparar e transformar esses valores. Tudo o que fizeste em pseudocódigo na Fase 1 ganha aqui a sua primeira forma de código real.

Prompt recomendado para esta fase

Estou na Fase 2 a aprender variáveis, tipos de dados e operadores em JavaScript. Explica-me este conceito com uma analogia da vida real, mostra-me um exemplo prático curto, e depois faz-me uma pergunta para eu tentar aplicar o conceito sozinho antes de me dares mais código. Corrige-me com calma se eu errar o tipo de dado ou o operador.

Conteúdos teóricos

4 temas

1. Variáveis: const e let

Guardar um valor na memória do computador, com um nome, para usares mais tarde.

Uma variável é uma caixa com etiqueta na memória do computador. Dás-lhe um nome, guardas lá dentro um valor, e podes voltar a usar esse valor mais tarde só pelo nome — sem teres de o escrever de novo.

Em JavaScript moderno, declaramos variáveis de duas formas:

const — para valores que não vão mudar depois de criados. Usa isto como padrão, sempre que puderes.
let — para valores que vão mudar ao longo do programa (ex: um contador que aumenta num loop).

Existe uma terceira palavra, var, que é a forma antiga (de antes de 2015) de declarar variáveis. Não a uses. O var tem um comportamento chamado hoisting que causa bugs difíceis de encontrar para quem está a aprender — const e let resolvem esse problema e são hoje o padrão em qualquer código profissional.

Porque "const como padrão" é uma boa prática, não só uma regra

Se declarares tudo com let "por segurança", perdes uma informação importante: quando releres o teu próprio código dali a um mês, um const diz-te imediatamente que este valor nunca muda depois daquela linha — não precisas de procurar no resto do ficheiro para teres a certeza. Um let diz "fica atento, isto pode mudar". Essa diferença ajuda-te (e a quem ler o teu código) a perceber a intenção sem teres de ler tudo.

Regras para nomear variáveis

Usa camelCase: a primeira palavra em minúsculas, as seguintes com a primeira letra maiúscula (nomeCompleto, idadeUtilizador).
O nome não pode começar por um número (1nome é inválido; nome1 é válido).
Escolhe nomes que descrevam o conteúdo. Uma letra sozinha não diz nada; precoTotal diz tudo. Vais ler o teu código muito mais vezes do que o escreves — nomes bons poupam-te tempo a ti mesmo.

variaveis.js

const nomeUtilizador = "Ana";   // nunca vai mudar neste programa
let pontuacao = 0;              // vai aumentar ao longo do jogo

pontuacao = pontuacao + 10;
console.log(nomeUtilizador, "tem", pontuacao, "pontos");

// nomeUtilizador = "Bruno";    // Erro! const não pode ser reatribuído

const para o que não muda, let para o que muda

2. Os tipos de dados principais

Nem toda a informação é igual — texto, números e verdadeiro/falso comportam-se de forma diferente.

O JavaScript classifica cada valor num tipo. Os cinco tipos que vais usar constantemente são:

Texto (String): sempre entre aspas — "Olá" ou 'Guilherme'. Podes usar aspas simples ou duplas, desde que sejas consistente.
Número (Number): inteiros ou decimais, sem aspas — 25, 19.99. O JavaScript não distingue "inteiro" de "decimal" como outras linguagens; é tudo o mesmo tipo.
Booleano (Boolean): só pode valer true ou false. É o tipo que vais usar em todas as decisões que vieres a escrever.
Indefinido (undefined): uma variável que foi declarada mas ainda não recebeu valor. É o JavaScript a dizer "ainda não sei o que está aqui".
Nulo (null): a ausência intencional de valor — usas isto quando tu, o programador, decides explicitamente que algo não tem valor (diferente de undefined, que normalmente é o computador a dizer isso por ti).

Como confirmar o tipo de algo: o operador typeof

Se tiveres dúvidas sobre o tipo de uma variável, o operador typeof diz-te:

javascript

console.log(typeof "Ana");      // "string"
console.log(typeof 25);         // "number"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"

A armadilha mais comum: números dentro de aspas

O texto "25" e o número 25 não são a mesma coisa. O primeiro é uma string de dois caracteres; o segundo é um número. Isto parece um pormenor, mas causa um dos bugs mais comuns em quem começa: somar duas strings numéricas concatena o texto em vez de somar os valores. Vamos ver isto em detalhe já no próximo tema.

tipos.js

const nome = "Rita";        // string
const idade = 28;           // number
const estaAtivo = true;     // boolean
let resultado;               // undefined — ainda não tem valor
const semDados = null;      // null — ausência intencional

console.log("5" + "3");     // "53" — concatenação de texto!
console.log(5 + 3);         // 8   — soma de verdade

Os cinco tipos principais, e a armadilha do número em texto

3. Operadores aritméticos

Somar, subtrair, multiplicar, dividir — e o operador que a maioria esquece: o resto da divisão.

Os operadores aritméticos fazem contas com valores numéricos:

+ soma (e também concatena strings, como viste no tema anterior).
- subtração.
* multiplicação.
/ divisão.
% — o resto da divisão (também chamado módulo). É o operador menos intuitivo mas um dos mais úteis: 10 % 3 dá 1, porque 10 dividido por 3 dá 3 com resto 1.
** — potência: 2 ** 3 dá 8 (2 elevado a 3).

Para que serve o resto da divisão na prática

O % é a forma mais comum de descobrir se um número é par ou ímpar — comparar o resto da divisão por 2 com zero é exatamente o algoritmo que escreveste em pseudocódigo na Fase 1. Também é usado para "dar a volta" a um valor: por exemplo, decidir em que dia da semana caímos sabendo quantos dias passaram.

Atalhos de atribuição

Quando queres atualizar uma variável usando o seu próprio valor, existem atalhos:

total += 5 é o mesmo que total = total + 5.
total -= 5, total *= 5, total /= 5 funcionam da mesma forma.
contador++ soma 1 a contador (o mesmo que contador += 1). contador-- subtrai 1.

Vais usar ++ constantemente em loops, a partir da Fase 3.

Ordem das operações

O JavaScript segue a mesma ordem que aprendeste na escola (parênteses, depois multiplicação/divisão, depois soma/subtração). Na dúvida, usa parênteses — não custa nada e evita erros de leitura.

operadores.js

const precoUnitario = 4.5;
const quantidade = 3;
const total = precoUnitario * quantidade;
console.log("Total a pagar:", total);

const numero = 17;
console.log(numero % 2 === 0 ? "É par" : "É ímpar");

let pontos = 10;
pontos += 5;   // pontos agora vale 15
pontos++;      // pontos agora vale 16
console.log(pontos);

Aritmética, resto da divisão e atalhos de atribuição

4. Operadores de comparação e lógicos

Como o JavaScript decide se algo é verdadeiro ou falso — a base de todo o if/else da próxima fase.

Os operadores de comparação devolvem sempre um valor booleano (true ou false):

=== igual a (compara valor e tipo — é o que deves usar quase sempre).
!== diferente de.
>, <, >=, <= maior, menor, maior ou igual, menor ou igual.

Porque usar === e não ==

O JavaScript tem também == e !=, que comparam só o valor e tentam "converter" tipos diferentes para os tornar comparáveis. Isto produz resultados surpreendentes: comparar a string "5" com o número 5 usando == dá true, porque o JavaScript converte a string para número antes de comparar. Já com === dá false, porque os tipos são diferentes. Usa sempre === e !== — é mais previsível e evita bugs subtis que até programadores experientes já foram apanhados por eles.

Operadores lógicos: combinar condições

&& (E) — só é verdadeiro se ambas as condições forem verdadeiras.
|| (OU) — é verdadeiro se pelo menos uma condição for verdadeira.
! (NÃO) — inverte um booleano: !true dá false.

Estes três operadores vão ser o coração de todas as decisões que vais escrever na próxima fase. Uma frase como "só posso entrar se tiver mais de 18 anos e tiver bilhete" traduz-se diretamente numa condição com &&.

Valores "verdadeiros" e "falsos" sem seres booleano

O JavaScript também trata alguns valores não-booleanos como se fossem false dentro de uma condição: 0, uma string vazia, null, undefined e NaN contam como falsos; praticamente tudo o resto conta como verdadeiro. Isto é avançado e vais vê-lo com mais detalhe na Fase 3 — por agora, basta saberes que existe, para não estranhares se vires código que testa uma variável diretamente sem a comparar explicitamente com algo.

comparacoes.js

console.log("5" == 5);    // true  — evita esta forma
console.log("5" === 5);   // false — usa esta

const idade = 20;
const temBilhete = true;
console.log(idade >= 18 && temBilhete); // true — pode entrar

const stockDisponivel = 0;
console.log(stockDisponivel > 0 || false); // false — sem stock

Comparação estrita vs solta, e combinação de condições

Exercícios práticos

4 exercícios

Fácil

Exercício Fácil — Ficha de Dados Pessoais

Declara variáveis dos cinco tipos de dados e imprime uma ficha formatada no terminal.

FerramentasVS CodeTerminalNode.js

Objetivo: praticar a criação de variáveis com o tipo certo para cada informação, e a diferença entre const e let.

Passos a realizar

Cria um ficheiro chamado ficha-pessoal.js na pasta fase2.
Declara variáveis const para: nome (texto), idade (número), altura (número decimal), estudante (booleano).
Declara uma variável let chamada humorHoje e atribui-lhe um valor de texto.
Usa console.log para imprimir cada valor com uma etiqueta.
Usa o operador typeof para confirmar e imprimir o tipo de cada variável.
Muda o valor de humorHoje a meio do ficheiro e confirma que o console.log seguinte já mostra o novo valor.

Código de exemplo

ficha-pessoal.js

const nome = "Escreve o teu nome";
const idade = 0; // substitui pela tua idade
let humorHoje = "curioso";

console.log("Nome:", nome, "| tipo:", typeof nome);
console.log("Idade:", idade, "| tipo:", typeof idade);

humorHoje = "confiante";
console.log("Humor:", humorHoje);

Estrutura de partida

Dicas úteis

Se o typeof de um número mostrar "string", provavelmente esqueceste-te de remover as aspas à volta do valor.
Tenta prever o output no papel antes de correres o ficheiro — é o melhor treino para leres código mais tarde.

Erros comuns

Guardar a idade como texto entre aspas em vez de número.
Tentar reatribuir uma variável const, o que gera um erro de tipo.

As minhas dúvidas

Fácil

Exercício Fácil — Calculadora de Área e Perímetro

Usa operadores aritméticos para calcular a área e o perímetro de um retângulo.

FerramentasVS CodeTerminalNode.js

Objetivo: praticar os operadores aritméticos com um problema concreto de duas fórmulas.

Passos a realizar

Cria retangulo.js na pasta fase2.
Declara const largura e const altura, com valores à tua escolha.
Calcula a área (largura vezes altura) e guarda o resultado numa variável area.
Calcula o perímetro (duas vezes a soma de largura com altura) e guarda numa variável perimetro.
Imprime os dois resultados com etiquetas claras.
Muda os valores de largura e altura e confirma que os dois resultados mudam corretamente.

Código de exemplo

retangulo.js

const largura = 4;
const altura = 5;

const area = largura * altura;
const perimetro = 2 * (largura + altura);

console.log("Área:", area);
console.log("Perímetro:", perimetro);

Estrutura de partida

Dicas úteis

Usa parênteses na fórmula do perímetro — sem eles, a ordem das operações dá um resultado diferente do esperado.
Testa com números "redondos" primeiro para conseguires confirmar o resultado de cabeça.

Erros comuns

Escrever a fórmula do perímetro sem parênteses à volta da soma, o que calcula algo diferente do pretendido.
Esquecer que area e perimetro também precisam de ser declaradas, tal como qualquer outra variável.

As minhas dúvidas

Médio

Exercício Médio — Comparador de Dois Números

Combina operadores de comparação e lógicos para descrever a relação entre dois números.

FerramentasVS CodeTerminalNode.js

Objetivo: praticar operadores de comparação (igual, maior, menor) e operadores lógicos (E, OU), todos juntos.

Passos a realizar

Cria comparador.js na pasta fase2.
Declara const numeroA e const numeroB com dois valores diferentes.
Usa console.log com operadores de comparação para imprimir, um por linha: se são iguais, se A é maior que B, se A é menor que B.
Cria uma variável booleana ambosPositivos que use o operador E para verificar se os dois números são maiores que 0.
Cria uma variável booleana algumNegativo que use o operador OU para verificar se pelo menos um dos dois é negativo.
Testa o teu ficheiro com três pares de valores diferentes (dois positivos, um negativo e um positivo, dois iguais), confirmando à mão o resultado esperado antes de correr.

Fluxo de funcionamento

1Declarar numeroA e numeroB
2Comparar (igual, maior, menor)
3Combinar com E / OU
4Imprimir resultados

Dicas úteis

Lembra-te: a comparação de igualdade usa três sinais de igual, não um. Se um dos números vier como texto por engano, a comparação pode falhar de forma surpreendente.
Escreve o resultado esperado num comentário antes de correres o código — é a mesma disciplina da tabela de teste da Fase 1.

Erros comuns

Usar o sinal de atribuição (um igual) em vez do sinal de comparação (três iguais) dentro do console.log.
Confundir o operador E com o operador OU — lembra-te: E precisa que as duas sejam verdadeiras, OU só precisa de uma.

As minhas dúvidas

Difícil

Exercício Difícil — Calculadora de IMC com Classificação

Junta tudo: variáveis, tipos, aritmética e comparações, num só programa com sentido real.

FerramentasVS CodeTerminalNode.js

Este exercício combina tudo o que viste nesta fase num problema com utilidade real: calcular o Índice de Massa Corporal (IMC) e preparar (sem ainda escreveres if/else, que é tema da Fase 3) as condições booleanas que vão decidir a classificação.

Passos a realizar

Cria imc.js na pasta fase2.
Declara const pesoKg e const alturaMetros.
Calcula o IMC com a fórmula peso a dividir por altura ao quadrado, e guarda o resultado numa variável imc.
4
Cria quatro variáveis booleanas, uma para cada faixa da classificação da OMS, usando comparações e operadores lógicos:
- abaixoDoPeso — imc menor que 18.5.
- pesoNormal — imc maior ou igual a 18.5 e menor que 25.
- sobrepeso — imc maior ou igual a 25 e menor que 30.
- obesidade — imc maior ou igual a 30.
Imprime o valor do IMC arredondado a uma casa decimal e o valor das quatro variáveis booleanas.
Confirma, para um peso e altura que dão IMC próximo de 22, que só pesoNormal fica verdadeiro e as outras três ficam falsas.

Código de exemplo

imc.js

const pesoKg = 70;
const alturaMetros = 1.75;

const imc = pesoKg / (alturaMetros * alturaMetros);

const abaixoDoPeso = imc < 18.5;
const pesoNormal = imc >= 18.5 && imc < 25;
const sobrepeso = imc >= 25 && imc < 30;
const obesidade = imc >= 30;

console.log("IMC:", Math.round(imc * 10) / 10);
console.log({ abaixoDoPeso, pesoNormal, sobrepeso, obesidade });

Ponto de partida

Dicas úteis

Só uma das quatro variáveis booleanas deve ficar verdadeira de cada vez — se duas ficarem verdadeiras ao mesmo tempo, há um erro nos limites das comparações.
Para arredondar a uma casa decimal, multiplica por 10, arredonda ao inteiro mais próximo, e divide por 10 outra vez.

Erros comuns

Esquecer os parênteses à volta de "altura vezes altura" dentro da divisão, alterando a ordem das operações.
Definir os limites das faixas com maior em vez de maior-ou-igual (ou o contrário), criando um "buraco" onde nenhuma variável fica verdadeira para certos valores de IMC.