Introdução ao JavaScript
Variáveis e Lógica
Caderno de atividades com espaço para respostas
Professor Gabriel Eduardo
Nome do aluno: ______________________________________
Turma: __________________ Data: __________________
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
1. O que é JavaScript?
JavaScript é uma linguagem de programação criada em 1995 por Brendan Eich, originalmente para
tornar páginas web mais interativas. Hoje, o JavaScript vai muito além do navegador: é usado em
servidores ([Link]), aplicativos mobile (React Native), jogos, automações e muito mais.
Pense no JavaScript como o "sistema nervoso" de uma página web: HTML é o esqueleto (estrutura);
CSS é a aparência (roupa, estilo); JavaScript é o que faz tudo se mexer, reagir e pensar.
CURIOSIDADE: apesar do nome parecido, JavaScript não tem relação com a linguagem Java. O nome foi
uma jogada de marketing da época.
2. Onde e como escrever JavaScript
Existem várias formas de executar JavaScript. As mais comuns para quem está aprendendo são:
1. Console do navegador — aperte F12 (ou Ctrl+Shift+I) em qualquer site, vá na aba "Console" e
digite comandos diretamente.
2. Arquivo .html com uma tag <script>
3. [Link] — permite rodar JavaScript fora do navegador, direto no terminal.
<!DOCTYPE html>
<html>
<body>
<script>
[Link]("Ola, mundo!");
</script>
</body>
</html>
Ao longo deste material, usaremos o comando [Link](), que serve para exibir valores no console
— a ferramenta mais usada por programadores para verificar se o código está funcionando como
esperado.
[Link]("Isso aparece no console!");
[Link](10 + 5);
Página 1
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 1 — Primeiro contato
Abra o console do navegador (F12) e digite os comandos abaixo, um de cada vez. Observe o que
aparece:
[Link]("Eu estou aprendendo JavaScript!");
[Link](2 + 2);
[Link]("2" + 2);
Pergunte-se: por que os dois últimos comandos deram resultados diferentes, mesmo parecendo tão
parecidos? Anote sua hipótese antes de continuar.
Resposta do aluno:
3. Variáveis: var, let e const
Uma variável é como uma caixa com etiqueta onde guardamos um valor para usar depois. Em vez de
escrever o mesmo valor várias vezes no código, guardamos ele em uma variável e usamos o nome
dela.
Imagine que você está jogando um RPG. O personagem tem uma vida, um nome e um nível. Cada uma
dessas informações pode ser guardada em uma variável:
let nomeDoHeroi = "Kaelen";
let vida = 100;
let nivel = 1;
[Link](nomeDoHeroi);
[Link](vida);
[Link](nivel);
As três formas de declarar variáveis
Palavra-chave Pode mudar o valor? Redeclarável? Quando usar
var Sim Sim Praticamente não se usa mais (forma antiga)
let Sim Não Quando o valor vai mudar durante o programa
const Não Não Quando o valor não deve mudar (constante)
// let: o valor pode mudar
let pontuacao = 0;
pontuacao = 10;
pontuacao = 20;
// const: o valor NAO pode mudar
const nomeDoJogo = "Aventura Epica";
// nomeDoJogo = "Outro nome"; // ERRO!
Página 2
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
REGRA DO PROFESSOR: use const sempre que possível. Só troque para let quando você tiver certeza de
que aquele valor vai precisar mudar. Evite var.
Regras para nomear variáveis
• Não pode começar com número (1nome ✗)
• Não pode ter espaços (nome completo ✗ → use nomeCompleto ✓)
• Não pode usar palavras reservadas da linguagem (let, const, if, etc.)
• Por convenção, usamos camelCase: idadeDoUsuario, precoTotal, estaLogado
ATIVIDADE 2 — Ficha de personagem
Crie variáveis para representar a ficha de um personagem de jogo (seu, de um jogo que você gosta, ou
inventado). Sua ficha deve conter pelo menos 5 informações diferentes, misturando let e const de forma
que faça sentido (o que muda durante o jogo? o que é fixo?). Depois, use [Link]() para exibir cada
informação. Escreva seu código abaixo:
Resposta do aluno:
ATIVIDADE 3 — Encontre o erro
O código abaixo tem um problema. Leia com atenção, identifique o erro antes de rodar, e depois teste
no console:
const precoDoIngresso = 50;
precoDoIngresso = 60;
[Link](precoDoIngresso);
Pergunta: por que esse código não funciona? O que precisaria mudar para funcionar como o
programador provavelmente queria?
Resposta do aluno:
Página 3
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 4 — Trocando valores
Crie duas variáveis, let jogador1 = "Ana" e let jogador2 = "Bruno". Escreva um código que troque os
valores dessas duas variáveis (no fim, jogador1 deve valer "Bruno" e jogador2 deve valer "Ana").
Dica: você vai precisar de uma terceira variável temporária para não perder nenhum dos valores
durante a troca.
Resposta do aluno:
Página 4
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
4. Tipos de dados primitivos
Toda variável guarda um valor, e todo valor tem um tipo. Os tipos primitivos mais usados no início são:
Tipo Exemplo Descrição
number 10, 3.14, -7 Números inteiros ou decimais
string "Olá", 'JavaScript' Texto, sempre entre aspas
boolean true, false Verdadeiro ou falso — base da lógica
undefined let x; Variável que existe, mas não recebeu valor
null let y = null; Valor "vazio" definido de propósito
let idade = 17; // number
let nome = "Mariana"; // string
let estaChovendo = true; // boolean
let sobrenome; // undefined
let resultado = null; // null
[Link](typeof idade); // "number"
[Link](typeof nome); // "string"
[Link](typeof estaChovendo); // "boolean"
O operador typeof é muito útil: ele te diz qual é o tipo de um valor. Use-o sempre que tiver dúvida sobre
o que uma variável está guardando.
Voltando à Atividade 1...
Lembra do código "2" + 2? Isso acontece porque "2" é uma string (texto) e 2 é um number. Quando
você soma uma string com um número usando +, o JavaScript "gruda" os dois como texto, em vez de
somar matematicamente. Por isso o resultado foi "22" e não 4.
[Link](2 + 2); // 4 (soma matematica)
[Link]("2" + 2); // "22" (concatenacao de texto)
[Link]("2" + "2"); // "22" (concatenacao de texto)
Página 5
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 5 — Detetive de tipos
Sem rodar o código ainda, escreva abaixo qual você acha que é o tipo de cada valor. Depois, confira
usando typeof no console:
[Link](typeof "Olá, professor!");
[Link](typeof 42);
[Link](typeof true);
[Link](typeof (10 > 5));
[Link](typeof "10");
[Link](typeof (10 + 10));
Resposta do aluno:
ATIVIDADE 6 — Concatenando com estilo
Crie três variáveis: nome, idade e cidade (suas ou de um personagem fictício). Use o operador + para
montar uma única frase do tipo: "Gabriel tem 30 anos e mora em São Paulo."
Dica: números e textos concatenados viram texto. Você vai precisar juntar espaços " " manualmente
entre as partes.
Resposta do aluno:
5. Operadores aritméticos
Operador Nome Exemplo Resultado
+ Soma 5+3 8
- Subtração 5-3 2
* Multiplicação 5*3 15
/ Divisão 10 / 2 5
% Módulo (resto) 10 % 3 1
** Potência 2 ** 3 8
Página 6
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
O operador % (módulo) retorna o resto de uma divisão. Uma aplicação clássica: descobrir se um
número é par ou ímpar. Se numero % 2 for 0, o número é par; se for 1, é ímpar.
let vidaInicial = 100;
let danoRecebido = 35;
let vidaAtual = vidaInicial - danoRecebido;
[Link](vidaAtual); // 65
[Link](7 % 2); // 1 (impar)
[Link](8 % 2); // 0 (par)
ATIVIDADE 7 — Calculadora de dano
Um personagem de jogo tem vida = 150. Ele leva 3 ataques seguidos, com danos de 20, 45 e 12.
Calcule a vida final dele usando variáveis (deixe o JavaScript fazer as contas).
Resposta do aluno:
ATIVIDADE 8 — Par ou ímpar
Use o operador % para descobrir se os números 47, 100 e 233 são pares ou ímpares. Anote o resultado
do resto da divisão por 2 ao lado de cada número, indicando se é par ou ímpar.
Resposta do aluno:
Página 7
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 9 — Conta de restaurante
Três amigos foram a um restaurante. A conta total foi R$ 187. Eles querem dividir o valor igualmente
entre os três. Calcule quanto cada um paga. Depois, adicione uma gorjeta de 10% sobre o total e
recalcule quanto cada um paga.
Resposta do aluno:
Página 8
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
6. Operadores de atribuição
Operador Equivale a Exemplo
+= x = x + valor pontuacao += 10
-= x = x - valor vida -= 20
*= x = x * valor preco *= 2
/= x = x / valor total /= 2
++ x=x+1 contador++
-- x=x-1 contador--
let pontuacao = 0;
pontuacao += 10; // pontuacao agora e 10
pontuacao += 5; // agora e 15
pontuacao++; // agora e 16
[Link](pontuacao); // 16
ATIVIDADE 10 — Sistema de pontos
Simule um pequeno jogo: comece com let pontos = 0. O jogador:
• Acerta pergunta fácil: += 10 • Acerta pergunta difícil: += 25
• Erra uma pergunta: -= 5 • Ganha bônus de fim de fase: dobra a pontuação (*= 2)
Aplique essas ações na ordem, mostrando a pontuação após cada uma.
Resposta do aluno:
7. Operadores de comparação
Comparações sempre resultam em um valor booleano (true ou false). São a base de toda decisão
lógica em programação.
Operador Significado Exemplo Resultado
=== Igual (valor e tipo) 5 === 5 true
!== Diferente 5 !== "5" true
> Maior que 10 > 5 true
< Menor que 10 < 5 false
Página 9
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
Operador Significado Exemplo Resultado
>= Maior ou igual 5 >= 5 true
<= Menor ou igual 4 <= 5 true
ATENÇÃO: existe também == e != (dois sinais), que comparam só o valor, ignorando o tipo — isso causa
bugs, como "5" == 5 retornar true. Regra do professor: sempre use === e !==, nunca == e !=.
[Link](5 === 5); // true
[Link](5 === "5"); // false (tipos diferentes!)
[Link](5 == "5"); // true (evite usar assim)
[Link](10 > 7); // true
[Link](10 <= 10); // true
ATIVIDADE 11 — Previsões
Antes de rodar, escreva se o resultado será true ou false. Depois confira:
[Link](15 > 20);
[Link](15 === 15);
[Link]("gato" === "Gato");
[Link](10 !== 10);
[Link](7 >= 7);
[Link]("10" === 10);
Resposta do aluno:
ATIVIDADE 12 — Comparador de idades
Crie idadeAna = 22 e idadeBruno = 19. Usando operadores de comparação, mostre: se Ana é mais
velha que Bruno; se as idades são iguais; se Bruno tem pelo menos 18 anos.
Resposta do aluno:
Página 10
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
8. Operadores lógicos
Os operadores lógicos combinam valores booleanos entre si — essenciais para decisões mais
complexas.
Operador Nome Como funciona
&& E (AND) true somente se ambos os lados forem true
|| OU (OR) true se pelo menos um dos lados for true
! NÃO (NOT) Inverte o valor: !true vira false
Pense assim: && é como um pedido ("quero pizza e refrigerante" — só fico satisfeito se os dois vierem);
|| é uma opção ("aceito café ou chá" — qualquer um já resolve); ! é a negação ("não gosto de chuva").
let temIngresso = true;
let temIdadeMinima = false;
[Link](temIngresso && temIdadeMinima); // false
[Link](temIngresso || temIdadeMinima); // true
[Link](!temIngresso); // false
ATIVIDADE 13 — Porteiro da festa
Uma festa só libera entrada se a pessoa tiver pelo menos 18 anos E estiver na lista de convidados. Crie
idade e estaNaLista com valores à sua escolha, e monte a expressão lógica para saber se a pessoa
pode entrar. Teste com 3 combinações diferentes.
Resposta do aluno:
Página 11
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 14 — Combinações malucas
Sem rodar antes, tente prever o resultado (true/false) de cada linha. Depois confira:
[Link](true && false);
[Link](true || false);
[Link](!false);
[Link]((5 > 2) && (10 < 20));
[Link]((5 > 2) && (10 > 20));
[Link](!(5 > 2));
[Link]((3 === 3) || (10 === "10"));
Resposta do aluno:
9. Estruturas condicionais: if, else if, else
As condicionais permitem ao programa tomar decisões e seguir caminhos diferentes dependendo da
situação — é aqui que a lógica que vimos até agora ganha propósito real.
let idade = 16;
if (idade >= 18) {
[Link]("Voce pode dirigir.");
} else {
[Link]("Voce ainda nao pode dirigir.");
}
Quando existem mais de duas possibilidades, usamos else if. O JavaScript testa as condições em
ordem, de cima para baixo, e para na primeira verdadeira:
let nota = 7;
if (nota >= 9) {
[Link]("Conceito A");
} else if (nota >= 7) {
[Link]("Conceito B");
} else if (nota >= 5) {
[Link]("Conceito C");
} else {
[Link]("Reprovado");
}
DICA: a ordem importa muito! Se testássemos nota >= 7 antes de nota >= 9, uma nota 10 nunca chegaria a
ser avaliada como Conceito A.
Página 12
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 15 — Classificador de idade
Crie uma variável idade e escreva um if / else if / else que exiba: "Criança" se menor que 12;
"Adolescente" se entre 12 e 17; "Adulto" se 18 ou mais. Teste com 3 idades diferentes.
Resposta do aluno:
ATIVIDADE 16 — Par ou ímpar (com if!)
Refaça a Atividade 8, mas agora use if / else com o operador % para o próprio programa dizer "par" ou
"ímpar" pelo [Link], em vez de você observar manualmente.
Resposta do aluno:
ATIVIDADE 17 — Sistema de login simplificado
Crie usuario e senha, e também usuarioCorreto = "admin" e senhaCorreta = "1234". Escreva uma
condicional que exiba "Login realizado com sucesso!" somente se ambos os valores baterem com os
corretos, e "Usuário ou senha incorretos." caso contrário.
Dica: combine === com &&.
Resposta do aluno:
Página 13
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 18 — Classificação de IMC (desafio)
O IMC é calculado por peso / (altura * altura). Crie peso (kg) e altura (m), calcule o IMC, e use if / else if
/ else para classificar: abaixo de 18.5 "Abaixo do peso"; entre 18.5 e 24.9 "Peso normal"; entre 25 e
29.9 "Sobrepeso"; 30 ou mais "Obesidade".
Resposta do aluno:
10. Operador ternário
O operador ternário é uma forma resumida de escrever um if / else simples, tudo em uma linha:
condição ? valorSeVerdadeiro : valorSeFalso
let idade = 20;
// Com if/else:
let resultado;
if (idade >= 18) {
resultado = "Maior de idade";
} else {
resultado = "Menor de idade";
}
// A mesma logica, com ternario:
let resultado2 = idade >= 18 ? "Maior de idade" : "Menor de idade";
O ternário é ótimo para decisões simples e diretas, mas fica confuso em lógicas muito complexas —
nesses casos, prefira o if / else tradicional.
ATIVIDADE 19 — Reescrevendo com ternário
Pegue a lógica da Atividade 16 (par ou ímpar) e reescreva usando o operador ternário, guardando o
resultado em uma variável resultado e exibindo com [Link](resultado).
Resposta do aluno:
Página 14
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
ATIVIDADE 20 — Status do personagem
Um personagem tem let vida = 35 (a vida máxima é 100). Usando o operador ternário, crie uma variável
status que valha "Vida crítica!" se a vida for menor que 30, ou "Vida ok" caso contrário. Exiba o
resultado.
Resposta do aluno:
Página 15
Introdução ao JavaScript — Variáveis e Lógica Prof. Gabriel Eduardo
11. Desafio final — Loja Virtual
Chegou a hora de juntar tudo que vimos: variáveis, tipos, operadores aritméticos, de comparação,
lógicos e condicionais.
Contexto: você está construindo a lógica de checkout de uma loja virtual simples.
Regras do desafio:
1. Crie variáveis para: nomeProduto, precoProduto, quantidade e clienteVip (booleano).
2. Calcule o valorTotal (preço × quantidade).
3. Se clienteVip for true, aplique 15% de desconto sobre o valorTotal.
4. Se o valorTotal (já com desconto, se houver) for maior que R$ 200, o frete é grátis. Caso contrário, o
frete custa R$ 20.
5. Exiba uma mensagem final parecida com: "Pedido: 2x Tênis Esportivo | Total: R$ 255.00 | Frete:
Grátis"
Não existe uma única forma "certa" de resolver — pense no problema por partes, teste cada pedaço
com [Link] antes de montar a mensagem final, e não tenha medo de errar.
Resposta do aluno:
12. Dicas de estudo
• Teste tudo no console. A teoria só gruda de verdade quando você digita o código com as próprias
mãos.
• Erre de propósito. Mude um === para ==, tire uma chave, troque && por || — e observe o que muda.
• Fale o código em voz alta antes de escrever, para organizar o raciocínio.
• Não decore, entenda a lógica. Volte ao exemplo da seção antes de pedir a resposta pronta.
• Revise as atividades depois de alguns dias — a lógica se fixa com repetição espaçada.
Material elaborado pelo Professor Gabriel Eduardo — Introdução ao JavaScript: Variáveis e Lógica.
Página 16