Programação Web · Revisão para Prova

JavaScript
do zero ao real.

Material completo preparado por Felipe Duan (5º Período Ada) para a turma do 3º Período. Cobre toda a ementa com exemplos, analogias e exercícios.

15 Módulos

Exemplos reais

Exercícios práticos

Dicas de prova

Parte 01

O que é JavaScript?

JavaScript (JS) é uma linguagem de programação interpretada, dinâmica e multiparadigma. Foi criada em 1995 por Brendan Eich em apenas 10 dias e rapidamente se tornou a linguagem padrão dos navegadores.

Junto com HTML (estrutura) e CSS (estilo), o JavaScript forma o terceiro pilar do desenvolvimento web front-end — sendo responsável pelo comportamento e interatividade das páginas.

💡

Curiosidade

Apesar do nome, JavaScript não tem relação com a linguagem Java. O nome foi uma jogada de marketing para aproveitar a popularidade do Java na época.

A Tríade da Web

Pense assim — cada tecnologia tem uma responsabilidade clara:

🦴

HTML

Estrutura · O esqueleto da página. Define o que existe.

👗

CSS

Aparência · A roupa. Define como as coisas parecem.

🧠

JavaScript

Comportamento · O cérebro e músculos. Define o que as coisas fazem.

O que dá para fazer com JS?

Validar formulários antes do envio
Animar elementos na página dinamicamente
Buscar dados de APIs sem recarregar a página (AJAX / Fetch)
Criar aplicações inteiras no navegador (SPAs — Single Page Apps)
Desenvolver back-end com Node.js
Criar apps mobile com React Native
Criar jogos, gráficos 2D/3D (Canvas, WebGL)

Como o navegador executa o JavaScript?

Cada navegador tem uma engine JavaScript que interpreta e executa o código:

Navegador	Engine JS
Chrome / Edge	`V8`
Firefox	`SpiderMonkey`
Safari	`JavaScriptCore`

O fluxo de leitura de uma página é:

O navegador lê o HTML e monta a árvore de elementos (DOM)
Aplica o CSS e calcula os estilos
Executa o JavaScript que pode modificar tudo isso

Parte 02

Como incluir JS no HTML

Existem três formas de adicionar JavaScript a uma página HTML:

1. Inline (no atributo do elemento)

HTML

<button onclick="alert('Olá!')">Clique aqui</button>

⚠️

Não Recomendado

Mistura lógica com estrutura. Dificulta manutenção e reutilização. Evite sempre.

2. Interno (tag <script> no HTML)

HTML

<script>
  console.log("Olá, mundo!");
</script>

3. Externo (arquivo .js separado) ✅

HTML

<script src="script.js"></script>

💡

Boa Prática

Coloque a tag <script> no final do <body> ou use o atributo defer. Isso garante que o HTML já foi carregado quando o JS executar.

HTML

<!-- Com defer: carrega depois do HTML -->
<script src="script.js" defer></script>

<!-- Estrutura ideal de um arquivo HTML -->
<!DOCTYPE html>
<html>
<head>
  <title>Minha Página</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- conteúdo aqui -->
  <script src="script.js"></script>  <!-- aqui no final ✅ -->
</body>
</html>

Parte 03

Variáveis e Tipos de Dados

Variáveis são espaços na memória onde guardamos informações para usar depois. Em JavaScript moderno, usamos let e const.

Declarando variáveis

// let → valor pode mudar (variável)
let nome = "Maria";
let idade = 22;
nome = "João";         // ✅ OK, pode reatribuir

// const → valor constante (não pode ser reatribuído)
const PI = 3.14159;
PI = 3;              // ❌ Erro! Não pode reatribuir

// var → evitar (escopo problemático, legado)
var antigo = "não use";

ℹ️

Regra Geral

Use const por padrão. Só mude para let se precisar reatribuir o valor. Nunca use var em código novo.

Tipos Primitivos

Tipo	Exemplo	Descrição
`string`	`"Olá"`, `'mundo'`, `template`	Texto
`number`	`42`, `3.14`	Números inteiros e decimais
`boolean`	`true`, `false`	Verdadeiro ou falso
`undefined`	`undefined`	Variável declarada sem valor
`null`	`null`	Ausência intencional de valor

Verificando tipos com typeof

console.log(typeof "Olá");       // "string"
console.log(typeof 42);         // "number"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object" ← bug histórico do JS!

Template Literals (template strings)

Usam crase (`) e permitem interpolação com ${}:

const nome = "Ana";
const idade = 25;

// Concatenação clássica (evitar)
console.log("Meu nome é " + nome + " e tenho " + idade + " anos.");

// Template literal ✅
console.log(`Meu nome é ${nome} e tenho ${idade} anos.`);

Parte 04

Operadores

Aritméticos

let a = 10, b = 3;

console.log(a + b);  // 13  (soma)
console.log(a - b);  // 7   (subtração)
console.log(a * b);  // 30  (multiplicação)
console.log(a / b);  // 3.33 (divisão)
console.log(a % b);  // 1   (módulo / resto)
console.log(a ** b); // 1000 (exponenciação)

Comparação — ⚠️ Cai muito na prova!

⚠️

Atenção

Sempre prefira === e !== (comparação estrita). O == faz conversão automática de tipo e gera comportamentos inesperados.

console.log(5 == "5");   // true  (compara só valor — CUIDADO!)
console.log(5 === "5");  // false (compara valor E tipo) ✅

console.log(5 != "5");   // false
console.log(5 !== "5");  // true  ✅

console.log(10 > 5);     // true
console.log(10 <= 10);   // true

Lógicos

console.log(true && false);  // false (E — ambos precisam ser true)
console.log(true || false);  // true  (OU — basta um ser true)
console.log(!true);          // false (NÃO — inverte)

Incremento e Atribuição

let x = 5;
x++;        // x = 6 (incrementa 1)
x--;        // x = 5 (decrementa 1)
x += 10;   // x = 15 (x = x + 10)
x *= 2;    // x = 30 (x = x * 2)
x -= 5;    // x = 25

Parte 05

Estruturas Condicionais

if / else if / else

const nota = 7.5;

if (nota >= 7) {
  console.log("Aprovado! 🎉");
} else if (nota >= 5) {
  console.log("Recuperação 📋");
} else {
  console.log("Reprovado 😔");
}

Operador Ternário

Uma forma curta de escrever um if/else simples:

const idade = 18;
// condição ? valorSeTrue : valorSeFalse
const status = idade >= 18 ? "Maior de idade" : "Menor de idade";
console.log(status); // "Maior de idade"

switch

Use quando você precisa comparar uma variável com muitos valores possíveis:

const diaSemana = 3;

switch (diaSemana) {
  case 1: console.log("Domingo");   break;
  case 2: console.log("Segunda");   break;
  case 3: console.log("Terça");     break;
  case 4: console.log("Quarta");    break;
  case 5: console.log("Quinta");    break;
  case 6: console.log("Sexta");     break;
  case 7: console.log("Sábado");    break;
  default: console.log("Dia inválido");
}

💡

Dica

Não esqueça o break em cada case do switch! Sem ele, o código continua executando os cases seguintes (comportamento chamado "fall-through").

Parte 06

Estruturas de Repetição

Loops permitem executar um bloco de código várias vezes. O computador ama repetição — e é onde ele brilha.

for

// estrutura: for (inicialização; condição; incremento)
for (let i = 1; i <= 5; i++) {
  console.log(`Número: ${i}`);
}
// Saída: Número: 1, Número: 2, ..., Número: 5

while

let contador = 1;

while (contador <= 5) {
  console.log(`Contagem: ${contador}`);
  contador++;
}

for...of (percorrer arrays)

const frutas = ["Maçã", "Banana", "Uva"];

for (const fruta of frutas) {
  console.log(fruta);
}
// Saída: Maçã, Banana, Uva

💡

Dica

Use for...of para iterar valores de arrays. Para acessar índice e valor ao mesmo tempo, use o for clássico ou .forEach().

Parte 07

Funções

Funções encapsulam blocos de código reutilizáveis. São fundamentais para organizar e evitar repetição.

Declaração clássica

function saudacao(nome) {
  return `Olá, ${nome}!`;
}

console.log(saudacao("Carlos")); // "Olá, Carlos!"

O comando return

⚠️

Ponto crítico

Existe diferença entre mostrar (console.log) e retornar (return) um valor. Uma função que usa return devolve um valor que pode ser guardado ou usado. console.log apenas exibe, não retorna nada útil.

❌ Sem return

function soma(a, b) {
  console.log(a + b); // só exibe
}

let result = soma(3, 4);
console.log(result); // undefined!

✅ Com return

function soma(a, b) {
  return a + b; // retorna
}

let result = soma(3, 4);
console.log(result); // 7 ✅

Arrow Functions (ES6+)

// Sintaxe completa
const somar = (a, b) => {
  return a + b;
};

// Sintaxe curta (retorno implícito)
const somar = (a, b) => a + b;

console.log(somar(3, 7)); // 10

Parâmetros padrão

function potencia(base, expoente = 2) {  // expoente padrão = 2
  return base ** expoente;
}

console.log(potencia(5));     // 25  (expoente = 2)
console.log(potencia(5, 3));  // 125 (expoente = 3)

ℹ️

Quando usar Arrow Functions?

Arrow functions são ideais para funções curtas e callbacks. Para métodos de objetos ou funções que precisam do this próprio, prefira a declaração clássica.

Parte 08

Arrays

Arrays são listas ordenadas de valores. Podem guardar qualquer tipo de dado e são indexados a partir do zero.

const frutas = ["Maçã", "Banana", "Uva"];

console.log(frutas[0]);  // "Maçã"   (índice 0)
console.log(frutas[1]);  // "Banana" (índice 1)
console.log(frutas.length); // 3 (tamanho)

Métodos essenciais

const nums = [1, 2, 3];

nums.push(4);       // [1, 2, 3, 4] → adiciona no fim
nums.pop();        // [1, 2, 3]    → remove do fim
nums.unshift(0);  // [0, 1, 2, 3] → adiciona no início
nums.shift();      // [1, 2, 3]    → remove do início

// Verificar se inclui algo
nums.includes(2);  // true

// Juntar elementos em string
nums.join(" - ");   // "1 - 2 - 3"

Métodos modernos (muito cobrados!)

const nums = [1, 2, 3, 4, 5];

// forEach — executa algo para cada item (não retorna)
nums.forEach(n => console.log(n));

// map — cria um novo array transformando cada item
const dobrados = nums.map(n => n * 2);
console.log(dobrados); // [2, 4, 6, 8, 10]

// filter — filtra itens que satisfazem uma condição
const pares = nums.filter(n => n % 2 === 0);
console.log(pares);    // [2, 4]

// find — encontra o primeiro item que satisfaz a condição
const achou = nums.find(n => n > 3);
console.log(achou);    // 4

// reduce — reduz o array a um único valor
const soma = nums.reduce((acc, n) => acc + n, 0);
console.log(soma);     // 15

Parte 09

Objetos

Objetos modelam entidades do mundo real usando pares de chave: valor. Pense em um objeto como uma ficha com propriedades.

const aluno = {
  nome: "Felipe",
  idade: 20,
  curso: "ADS",
  ativo: true
};

// Acessar propriedades
console.log(aluno.nome);       // "Felipe" (dot notation)
console.log(aluno["idade"]);  // 20       (bracket notation)

// Alterar propriedade
aluno.idade = 21;

// Adicionar nova propriedade
aluno.email = "felipe@email.com";

Objetos com métodos

const pessoa = {
  nome: "Ana",
  idade: 25,
  saudacao() {
    return `Olá, sou ${this.nome}!`;
  }
};

console.log(pessoa.saudacao()); // "Olá, sou Ana!"

Desestruturação (muito usado)

const aluno = { nome: "João", curso: "ADS", nota: 8.5 };

// Extrai propriedades direto em variáveis
const { nome, nota } = aluno;
console.log(nome);  // "João"
console.log(nota);  // 8.5

Parte 10

DOM — Manipulação da Página

🏆 Este é o módulo mais importante para desenvolvimento web. É aqui que o JavaScript ganha superpoderes.

DOM (Document Object Model) é a representação da página HTML como uma árvore de objetos que o JavaScript pode ler e modificar em tempo real.

// O objeto 'document' representa a página inteira
console.log(document);           // a página HTML
console.log(document.title);     // título da aba
console.log(document.body);      // body da página

Selecionando elementos

// Por ID (único) — mais rápido
const titulo = document.getElementById("meu-titulo");

// Por seletor CSS — mais flexível ✅
const botao  = document.querySelector(".btn-enviar");     // primeiro match
const itens  = document.querySelectorAll("li");            // todos os matches

// Seletores CSS funcionam igual: #id, .classe, tag, [atributo]
const input  = document.querySelector("input[type='email']");

Manipulando conteúdo

const el = document.querySelector("#mensagem");

// Ler e alterar texto puro (mais seguro)
console.log(el.innerText);
el.innerText = "Novo texto!";

// Ler e alterar HTML interno
el.innerHTML = "<strong>Texto em negrito</strong>";

Manipulando estilos e classes

const caixa = document.querySelector(".caixa");

// Estilo direto (evitar para muitas mudanças)
caixa.style.color = "red";
caixa.style.fontSize = "20px";

// Classes (preferível) ✅
caixa.classList.add("ativo");       // adiciona classe
caixa.classList.remove("ativo");    // remove classe
caixa.classList.toggle("escuro");   // adiciona/remove (toggle)
caixa.classList.contains("ativo"); // true/false

Criando e inserindo elementos

// Criar um novo elemento
const novoItem = document.createElement("li");
novoItem.innerText = "Nova tarefa";
novoItem.classList.add("item-lista");

// Inserir no DOM
const lista = document.querySelector("#lista");
lista.appendChild(novoItem);    // no final

// Remover elemento
novoItem.remove();

Lendo valores de inputs

const campo = document.querySelector("#nome");

// Ler valor digitado
const valorDigitado = campo.value;

// Limpar o campo
campo.value = "";

Parte 11

Eventos

Eventos são ações do usuário ou do navegador que o JavaScript pode "escutar" e responder. É o que torna as páginas verdadeiramente interativas.

addEventListener — a forma correta

const botao = document.querySelector("#btn");

// elemento.addEventListener("evento", função)
botao.addEventListener("click", function() {
  console.log("Botão clicado!");
});

// Com arrow function (mais moderno)
botao.addEventListener("click", () => {
  console.log("Clicado!");
});

Eventos mais importantes

Evento	Quando ocorre	Uso comum
`click`	Clique do mouse	Botões, links
`input`	Digitação em campo	Busca em tempo real
`submit`	Envio de formulário	Validação
`keydown`	Tecla pressionada	Atalhos, Enter
`mouseover`	Mouse sobre elemento	Tooltips, hover
`mouseout`	Mouse sai do elemento	Reset de hover
`change`	Mudança em select/checkbox	Filtros
`DOMContentLoaded`	HTML carregado	Inicialização

O objeto event

botao.addEventListener("click", (event) => {
  console.log(event.target);      // elemento que disparou
  console.log(event.type);        // tipo do evento ("click")
});

// Detectar qual tecla foi pressionada
document.addEventListener("keydown", (e) => {
  console.log(e.key);             // "Enter", "a", "Escape", etc.
  if (e.key === "Enter") {
    console.log("Enter pressionado!");
  }
});

Parte 12

Formulários

Formulários são a principal forma de capturar dados do usuário. JavaScript permite validar, interceptar e processar esses dados antes de qualquer envio.

preventDefault — essencial!

⚠️

Muito importante

event.preventDefault() impede o comportamento padrão do formulário (recarregar a página ao enviar). Sem isso, a página recarrega e você perde os dados processados.

const formulario = document.querySelector("#meu-form");

formulario.addEventListener("submit", (event) => {
  event.preventDefault(); // ← SEMPRE coloque isso primeiro!

  const nome  = document.querySelector("#nome").value;
  const email = document.querySelector("#email").value;

  // Validação
  if (nome === "") {
    alert("Por favor, preencha o nome!");
    return; // para a execução
  }

  console.log(`Enviando para: ${email}`);
});

Exemplo completo: formulário com validação

HTML + JS

<!-- HTML -->
<form id="form-cadastro">
  <input type="text" id="nome" placeholder="Seu nome">
  <input type="email" id="email" placeholder="Seu email">
  <button type="submit">Enviar</button>
  <p id="mensagem"></p>
</form>

// JavaScript
const form = document.querySelector("#form-cadastro");
const msg  = document.querySelector("#mensagem");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const nome  = document.querySelector("#nome").value.trim();
  const email = document.querySelector("#email").value.trim();

  if (!nome || !email) {
    msg.innerText = "❌ Preencha todos os campos!";
    return;
  }

  msg.innerText = `✅ Bem-vindo, ${nome}! Email: ${email}`;
  form.reset(); // limpa o formulário
});

Parte 13

Recursos Modernos do JS

Spread Operator (...)

const a = [1, 2, 3];
const b = [4, 5];
const uniao = [...a, ...b];  // [1, 2, 3, 4, 5]

// Clonar objetos
const original = { nome: "Ana" };
const copia = { ...original, idade: 25 };
// { nome: "Ana", idade: 25 }

Métodos de String

const texto = "  Olá, Mundo!  ";

texto.toUpperCase();   // "  OLÁ, MUNDO!  "
texto.toLowerCase();   // "  olá, mundo!  "
texto.trim();          // "Olá, Mundo!"   (remove espaços das bordas)
texto.includes("Mundo"); // true
texto.split(",");      // ["  Olá", " Mundo!  "]
texto.replace("Olá", "Oi"); // "  Oi, Mundo!  "
texto.startsWith("  Olá");  // true

Nullish Coalescing (??)

// Usa valor padrão quando a variável for null ou undefined
const nome = null;
const exibir = nome ?? "Anônimo";
console.log(exibir); // "Anônimo"

Optional Chaining (?.)

const usuario = { perfil: { avatar: "foto.jpg" } };

// Sem ?. — pode dar erro se perfil for undefined
console.log(usuario.endereco.rua);  // ❌ TypeError

// Com ?. — retorna undefined sem quebrar
console.log(usuario?.endereco?.rua); // undefined (sem erro) ✅

Parte 14

Erros Comuns e Debug

Erros mais frequentes

Erro	Causa	Solução
`ReferenceError`	Variável não existe	Verificar nome e escopo
`TypeError`	Tipo errado (null, undefined)	Verificar se elemento existe no DOM
`SyntaxError`	Erro de sintaxe no código	Procurar colchete/chave faltando
`Cannot read property of null`	Elemento não encontrado no DOM	Verificar seletor CSS ou posição do script

Ferramentas de debug

// console.log — sua principal ferramenta
console.log("Verificando valor:", variavel);

// console.error — destaca erros em vermelho
console.error("Algo deu errado!");

// console.table — exibe arrays/objetos como tabela
console.table(meuArray);

// typeof — para entender o tipo de uma variável
console.log(typeof minhaVariavel);

// Verificar se elemento existe antes de usar
const el = document.querySelector("#meu-id");
if (el) {
  el.innerText = "Seguro!"; // só executa se encontrar
}

💡

DevTools — F12 é seu melhor amigo

Pressione F12 no navegador para abrir o DevTools. A aba Console mostra erros e logs. A aba Elements mostra o DOM em tempo real. A aba Sources permite debugar linha a linha.

Parte 15

Exercícios Práticos

Nível 1 — Fundamentos

Declare variáveis com seu nome, idade e curso usando const e let. Exiba uma apresentação com template literal.
Crie uma função que recebe uma nota e retorna "Aprovado", "Recuperação" ou "Reprovado".
Faça um loop que exibe a tabuada do 7 completa no console.
Crie um array com 5 frutas e exiba cada uma usando for...of.
Crie um objeto representando um produto com nome, preço e estoque.

Nível 2 — DOM e Eventos

Crie um botão que, ao ser clicado, muda o texto de um parágrafo.
Faça um contador com botões de + e − que exibe o valor na tela.
Implemente um botão de dark/light mode que troca a classe do body.
Crie um campo de busca que filtra itens de uma lista conforme o usuário digita.
Faça um botão "mostrar/esconder senha" em um campo de senha.

Nível 3 — Projetos

To-do List: Adicione tarefas, marque como concluídas e remova.
Calculadora: Interface com botões numéricos e operações básicas.
Formulário com validação: Nome, email e senha com feedback visual.
Quiz: 5 perguntas de múltipla escolha com pontuação final.

🎯

Dica de prova

Os tópicos mais cobrados costumam ser: == vs ===, manipulação do DOM, eventos com addEventListener, uso correto de return em funções, e diferença entre let, const e var.

JavaScriptdo zero ao real.

O que é JavaScript?

A Tríade da Web

HTML

CSS

JavaScript

O que dá para fazer com JS?

Como o navegador executa o JavaScript?

Como incluir JS no HTML

1. Inline (no atributo do elemento)

2. Interno (tag <script> no HTML)

3. Externo (arquivo .js separado) ✅

Variáveis e Tipos de Dados

Declarando variáveis

Tipos Primitivos

Verificando tipos com typeof

Template Literals (template strings)

Operadores

Aritméticos

Comparação — ⚠️ Cai muito na prova!

Lógicos

Incremento e Atribuição

Estruturas Condicionais

if / else if / else

Operador Ternário

switch

Estruturas de Repetição

for

while

for...of (percorrer arrays)

Funções

Declaração clássica

O comando return

Arrow Functions (ES6+)

Parâmetros padrão

Arrays

Métodos essenciais

Métodos modernos (muito cobrados!)

Objetos

Objetos com métodos

Desestruturação (muito usado)

DOM — Manipulação da Página

Selecionando elementos

Manipulando conteúdo

Manipulando estilos e classes

Criando e inserindo elementos

Lendo valores de inputs

Eventos

addEventListener — a forma correta

Eventos mais importantes

O objeto event

Formulários

preventDefault — essencial!

Exemplo completo: formulário com validação

Recursos Modernos do JS

Spread Operator (...)

Métodos de String

Nullish Coalescing (??)

Optional Chaining (?.)

Erros Comuns e Debug

Erros mais frequentes

Ferramentas de debug

Exercícios Práticos

Nível 1 — Fundamentos

Nível 2 — DOM e Eventos

Nível 3 — Projetos

JavaScript
do zero ao real.