■ Apostila de JavaScript – Do Básico ao
Avançado
Módulo 1 – Fundamentos de JavaScript
Semana 1 – Introdução ao JavaScript
■ Conteúdo Teórico:
- O que é JavaScript e onde é usado (navegadores, servidores com [Link], mobile).
- Configuração do ambiente: navegador + VS Code + [Link].
- Variáveis: var, let e const.
- Tipos de dados: string, number, boolean, null, undefined, symbol, bigint.
■ Exemplo de Código:
let nome = "Gustavo";
const idade = 18;
var ativo = true;
[Link]("Nome:", nome);
[Link]("Idade:", idade);
[Link]("Está ativo?", ativo);
■ Exercícios:
• Declare variáveis com cada tipo primitivo e exiba no console.
• Teste a diferença entre var, let e const em um bloco de código.
Semana 2 – Operadores e Controle de Fluxo
■ Conteúdo Teórico:
- Operadores aritméticos, relacionais e lógicos.
- Estruturas condicionais: if, else if, else, switch.
- Estruturas de repetição: for, while, do...while.
■ Exemplo de Código:
let numero = 7;
if (numero % 2 === 0) {
[Link]("O número é par");
} else {
[Link]("O número é ímpar");
}
// Tabuada com for
for (let i = 1; i <= 10; i++) {
[Link](numero + " x " + i + " = " + (numero * i));
}
■ Exercícios:
• Crie um programa que receba um número e informe se é positivo, negativo ou zero.
• Monte uma tabuada de qualquer número usando for.
• Simule um menu de opções usando switch.
Módulo 2 – Funções e Estruturas Avançadas
Semana 3 – Funções
■ Conteúdo Teórico:
- Declaração de funções (function).
- Parâmetros e retorno.
- Funções anônimas e arrow functions.
- Escopo e hoisting.
- Funções de ordem superior (callbacks).
■ Exemplo de Código:
function media(a, b, c) {
return (a + b + c) / 3;
}
[Link]("Média:", media(7, 8, 9));
// Arrow function
const soma = (x, y) => x + y;
[Link]("Soma:", soma(5, 3));
■ Exercícios:
• Crie uma função que calcule a média de 3 números.
• Implemente uma função que receba outra função como parâmetro.
Semana 4 – Arrays e Objetos
■ Conteúdo Teórico:
- Arrays: criação, métodos principais (push, pop, map, filter, reduce, forEach).
- Objetos: chave-valor, acesso a propriedades, [Link](), [Link]().
- Desestruturação (destructuring).
■ Exemplo de Código:
let nomes = ["Ana", "Bruno", "Carlos"];
[Link]();
[Link](nomes);
let aluno = {nome: "Maria", idade: 20, notas: [7, 8, 9]};
let media = ([Link]((a, b) => a + b) / [Link]);
[Link]("Média da aluna:", media);
■ Exercícios:
• Crie uma lista de nomes e ordene alfabeticamente.
• Crie um objeto representando um aluno (nome, idade, notas) e calcule a média.
Módulo 3 – Manipulação do DOM e Eventos
Semana 5 – DOM (Document Object Model)
■ Conteúdo Teórico:
- Seleção de elementos: getElementById, querySelector, querySelectorAll.
- Manipulação de conteúdo e estilos: innerHTML, textContent, style.
- Criando e removendo elementos dinamicamente.
■ Exemplo de Código:
[Link]("meuBotao").onclick = function() {
[Link] = "lightblue";
}
■ Exercícios:
• Crie uma página com um botão que troca a cor de fundo ao ser clicado.
• Adicione dinamicamente itens em uma lista (ul) pelo input do usuário.
Semana 6 – Eventos e Formulários
■ Conteúdo Teórico:
- Eventos: onclick, onchange, addEventListener.
- Eventos de teclado e mouse.
- Validação de formulários.
■ Exemplo de Código:
[Link]("#email").addEventListener("change", function() {
if (![Link]("@")) {
alert("Email inválido!");
}
});
■ Exercícios:
• Crie um formulário que valide se o campo de email contém “@”.
• Monte um contador que aumenta e diminui ao clicar em botões.
Módulo 4 – ES6+ e Programação Assíncrona
Semana 7 – Recursos ES6+
■ Conteúdo Teórico:
- Template literals.
- Spread e rest operator.
- Classes e herança.
- Módulos (import e export).
■ Exemplo de Código:
class Pessoa {
constructor(nome) {
[Link] = nome;
}
}
class Aluno extends Pessoa {
constructor(nome, curso) {
super(nome);
[Link] = curso;
}
}
let a = new Aluno("João", "JS");
[Link](a);
■ Exercícios:
• Reescreva funções usando template literals.
• Crie uma classe Pessoa e herde Aluno.
Semana 8 – Assíncronismo
■ Conteúdo Teórico:
- Callbacks, Promises e async/await.
- fetch() e requisições HTTP.
- Tratamento de erros (try...catch).
■ Exemplo de Código:
async function getPosts() {
try {
let res = await fetch("[Link]
let data = await [Link]();
[Link](data);
} catch (e) {
[Link]("Erro:", e);
}
}
getPosts();
■ Exercícios:
• Crie uma função que busque dados de uma API pública.
• Implemente um loading até a resposta da API chegar.
Módulo 5 – JavaScript Avançado
Semana 9 – Armazenamento e APIs do Navegador
■ Conteúdo Teórico:
- LocalStorage e SessionStorage.
- Cookies.
- Manipulação de datas (Date).
- API Geolocation e API Clipboard.
■ Exemplo de Código:
[Link]("usuario", "Gustavo");
[Link]([Link]("usuario"));
■ Exercícios:
• Crie um sistema de login simples que salva o usuário no LocalStorage.
• Mostre a localização atual do usuário no console.
Semana 10 – Padrões de Projeto
■ Conteúdo Teórico:
- Programação funcional x orientada a objetos.
- Padrões de projeto: Singleton, Observer, Module.
- Boas práticas e Clean Code.
■ Exemplo de Código:
// Singleton
const Contador = (function() {
let valor = 0;
return {
incrementar: () => ++valor,
getValor: () => valor
};
})();
[Link]([Link]());
■ Exercícios:
• Implemente um contador usando Singleton.
• Crie um sistema de notificações simulando o padrão Observer.
Módulo 6 – Projetos Práticos
Semana 11 – Projeto 1 – To-Do List
■ Conteúdo Teórico:
- CRUD (Create, Read, Update, Delete).
- Manipulação do DOM + LocalStorage.
- Responsividade.
■ Exemplo de Código:
// Estrutura inicial de um To-Do List
let tarefas = [];
function adicionar(tarefa) {
[Link](tarefa);
[Link](tarefas);
}
■ Exercícios:
• Crie uma lista de tarefas onde o usuário possa adicionar, remover e marcar concluído.
• Salve as tarefas no LocalStorage para manter após atualizar a página.
Semana 12 – Projeto 2 – Mini App Completo
■ Conteúdo Teórico:
- Consumo de API externa.
- Estrutura de módulos ES6.
- Interface amigável com eventos e DOM.
■ Exemplo de Código:
// Mini app consumindo API de usuários
async function getUsers() {
let res = await fetch("[Link]
let users = await [Link]();
[Link](users);
}
getUsers();
■ Exercícios:
• Monte um app que consuma uma API e exiba dados em uma lista.
• Implemente filtros de pesquisa na interface.