Livro Interativo de JavaScript - Completo

Exemplo Básico

Primeiro contato com JavaScript:

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

// Ou usando JavaScript moderno:
document.querySelector('button').addEventListener('click', () => {
  alert('Olá, JavaScript!');
});

Exemplos Detalhados

// Declaração de variáveis
let nome = "Ana Silva";
const idade = 25;
let salario = 3500.50;
let ativo = true;
let endereco = null;
let telefone; // undefined

// Arrays (listas)
let frutas = ["maçã", "banana", "laranja"];
let numeros = [1, 2, 3, 4, 5];

// Objetos
let pessoa = {
  nome: "João",
  idade: 30,
  profissao: "Desenvolvedor",
  endereco: {
    rua: "Rua das Flores",
    cidade: "São Paulo"
  }
};

// Verificando tipos
console.log(typeof nome); // "string"
console.log(typeof idade); // "number"
console.log(Array.isArray(frutas)); // true

Diferentes Formas de Funções

// 1. Function Declaration
function somar(a, b) {
  return a + b;
}

// 2. Function Expression
const multiplicar = function(a, b) {
  return a * b;
};

// 3. Arrow Function (ES6+)
const dividir = (a, b) => a / b;

// 4. Arrow Function com múltiplas linhas
const calcularArea = (base, altura) => {
  const area = base * altura;
  return area;
};

// 5. Função com parâmetros padrão
const saudar = (nome = "Visitante") => {
  return `Olá, ${nome}!`;
};

// 6. Função com rest parameters
const somarTodos = (...numeros) => {
  return numeros.reduce((total, num) => total + num, 0);
};

// 7. IIFE (Immediately Invoked Function Expression)
(function() {
  console.log("Executada imediatamente!");
})();

// Uso das funções
console.log(somar(5, 3)); // 8
console.log(multiplicar(4, 6)); // 24
console.log(dividir(10, 2)); // 5
console.log(saudar("Maria")); // "Olá, Maria!"
console.log(somarTodos(1, 2, 3, 4, 5)); // 15

Manipulação de Arrays

// Criando arrays
let frutas = ["maçã", "banana", "laranja"];
let numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Métodos básicos
frutas.push("uva"); // Adiciona no final
frutas.unshift("morango"); // Adiciona no início
frutas.pop(); // Remove do final
frutas.shift(); // Remove do início

// Métodos de transformação
const numerosDobrados = numeros.map(num => num * 2);
const numerosPares = numeros.filter(num => num % 2 === 0);
const somaTotal = numeros.reduce((total, num) => total + num, 0);

// Encontrar elementos
const primeiroPar = numeros.find(num => num % 2 === 0);
const indiceDoCinco = numeros.findIndex(num => num === 5);

// Ordenação
const frutasOrdenadas = frutas.sort();
const numerosOrdenados = numeros.sort((a, b) => a - b);

// Iteração
frutas.forEach((fruta, index) => {
  console.log(`${index + 1}: ${fruta}`);
});

// Spread operator
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const arrayCombinado = [...array1, ...array2];

// Destructuring
const [primeiro, segundo, ...resto] = numeros;

console.log("Números dobrados:", numerosDobrados);
console.log("Números pares:", numerosPares);
console.log("Soma total:", somaTotal);
console.log("Primeiro par:", primeiroPar);
console.log("Array combinado:", arrayCombinado);

Objetos e Classes

// Objeto literal
const pessoa = {
  nome: "João",
  idade: 30,
  saudar() {
    return `Olá, sou ${this.nome}`;
  }
};

// Factory Function
function criarPessoa(nome, idade) {
  return {
    nome,
    idade,
    saudar() {
      return `Olá, sou ${this.nome}`;
    }
  };
}

// Constructor Function
function Pessoa(nome, idade) {
  this.nome = nome;
  this.idade = idade;
  this.saudar = function() {
    return `Olá, sou ${this.nome}`;
  };
}

// Classe (ES6+)
class Funcionario {
  #salario; // Campo privado
  
  constructor(nome, cargo, salario) {
    this.nome = nome;
    this.cargo = cargo;
    this.#salario = salario;
  }
  
  // Getter
  get salario() {
    return this.#salario;
  }
  
  // Setter
  set salario(novoSalario) {
    if (novoSalario > 0) {
      this.#salario = novoSalario;
    }
  }
  
  trabalhar() {
    return `${this.nome} está trabalhando como ${this.cargo}`;
  }
  
  static criarFuncionario(dados) {
    return new Funcionario(dados.nome, dados.cargo, dados.salario);
  }
}

// Herança
class Gerente extends Funcionario {
  constructor(nome, salario, departamento) {
    super(nome, "Gerente", salario);
    this.departamento = departamento;
  }
  
  gerenciar() {
    return `${this.nome} está gerenciando o ${this.departamento}`;
  }
}

// Uso
const joao = new Funcionario("João", "Desenvolvedor", 5000);
const maria = new Gerente("Maria", 8000, "TI");

console.log(joao.trabalhar());
console.log(maria.gerenciar());
console.log(joao.salario); // Getter
joao.salario = 5500; // Setter

Manipulação do DOM

// Seleção de elementos
const elemento = document.getElementById('meuId');
const elementos = document.getElementsByClassName('minhaClasse');
const primeiro = document.querySelector('.minhaClasse');
const todos = document.querySelectorAll('.minhaClasse');

// Modificando conteúdo
elemento.innerHTML = '<strong>Novo conteúdo</strong>';
elemento.textContent = 'Texto simples';
elemento.setAttribute('class', 'novaClasse');

// Manipulando classes
elemento.classList.add('classeNova');
elemento.classList.remove('classeAntiga');
elemento.classList.toggle('classeAlternada');

// Modificando estilos
elemento.style.backgroundColor = '#ff0000';
elemento.style.fontSize = '18px';

// Criando elementos
const novoElemento = document.createElement('div');
novoElemento.textContent = 'Elemento criado dinamicamente';
novoElemento.className = 'elementoNovo';

// Adicionando ao DOM
document.body.appendChild(novoElemento);
elemento.appendChild(novoElemento);

// Removendo elementos
elemento.removeChild(novoElemento);
novoElemento.remove();

// Exemplo prático
document.getElementById('demoBtn').addEventListener('click', function() {
  const area = document.getElementById('demoArea');
  const hora = new Date().toLocaleTimeString();
  
  area.innerHTML = `
    <h4>Demonstração DOM</h4>
    <p>Hora atual: ${hora}</p>
    <button onclick="this.style.background='#ff6b6b'">
      Mudar Cor
    </button>
  `;
});

Exemplos de Eventos

// Eventos de mouse
elemento.addEventListener('click', function(e) {
  console.log('Clique detectado!');
  console.log('Coordenadas:', e.clientX, e.clientY);
});

elemento.addEventListener('mouseover', function() {
  this.style.backgroundColor = '#ff6b6b';
});

elemento.addEventListener('mouseout', function() {
  this.style.backgroundColor = '#6fa3ef';
});

// Eventos de teclado
document.addEventListener('keydown', function(e) {
  console.log('Tecla pressionada:', e.key);
  console.log('Código da tecla:', e.code);
  
  if (e.key === 'Escape') {
    console.log('Escape pressionado!');
  }
});

// Eventos de formulário
const input = document.querySelector('input');
input.addEventListener('input', function(e) {
  console.log('Valor digitado:', e.target.value);
});

input.addEventListener('focus', function() {
  this.style.borderColor = '#6fa3ef';
});

input.addEventListener('blur', function() {
  this.style.borderColor = '#ccc';
});

// Evento de carregamento
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM carregado!');
});

// Removendo eventos
const handler = function() { console.log('Evento!'); };
elemento.addEventListener('click', handler);
elemento.removeEventListener('click', handler);

// Event delegation
document.addEventListener('click', function(e) {
  if (e.target.matches('.botao')) {
    console.log('Botão clicado via delegation');
  }
});

Promises e Async/Await

// Criando uma Promise
function simularRequisicao(dados, tempo = 1000) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.1) { // 90% de sucesso
        resolve(`Dados recebidos: ${dados}`);
      } else {
        reject('Erro na requisição');
      }
    }, tempo);
  });
}

// Usando .then() e .catch()
simularRequisicao('usuário123')
  .then(resultado => {
    console.log('Sucesso:', resultado);
    return simularRequisicao('detalhes');
  })
  .then(resultado => {
    console.log('Segunda requisição:', resultado);
  })
  .catch(erro => {
    console.error('Erro:', erro);
  })
  .finally(() => {
    console.log('Operação finalizada');
  });

// Usando async/await
async function buscarDados() {
  try {
    const resultado1 = await simularRequisicao('primeiro');
    console.log(resultado1);
    
    const resultado2 = await simularRequisicao('segundo');
    console.log(resultado2);
    
    return 'Todos os dados carregados';
  } catch (erro) {
    console.error('Erro:', erro);
    throw erro;
  }
}

// Promise.all - executar múltiplas promises
async function carregarTudo() {
  try {
    const promises = [
      simularRequisicao('dados1', 1000),
      simularRequisicao('dados2', 1500),
      simularRequisicao('dados3', 800)
    ];
    
    const resultados = await Promise.all(promises);
    console.log('Todos os resultados:', resultados);
  } catch (erro) {
    console.error('Erro em uma das promises:', erro);
  }
}

// Promise.race - primeira a resolver
async function competicao() {
  const vencedor = await Promise.race([
    simularRequisicao('rápido', 500),
    simularRequisicao('lento', 2000)
  ]);
  console.log('Vencedor:', vencedor);
}

// Fetch API (requisições HTTP)
async function buscarUsuario(id) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const usuario = await response.json();
    return usuario;
  } catch (erro) {
    console.error('Erro ao buscar usuário:', erro);
  }
}

Features Modernas do JavaScript

// 1. Arrow Functions
const somar = (a, b) => a + b;
const multiplicar = (a, b) => {
  const resultado = a * b;
  return resultado;
};

// 2. Destructuring
const pessoa = { nome: 'João', idade: 30, cidade: 'SP' };
const { nome, idade, cidade } = pessoa;
const { nome: nomeCompleto } = pessoa; // Renomeando

const frutas = ['maçã', 'banana', 'laranja'];
const [primeira, segunda, terceira] = frutas;
const [primeiraFruta, ...outrasFrutas] = frutas;

// 3. Spread Operator
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const arrayCombinado = [...array1, ...array2];

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const objCombinado = { ...obj1, ...obj2 };

// 4. Rest Parameters
function somarTodos(...numeros) {
  return numeros.reduce((total, num) => total + num, 0);
}

// 5. Template Literals
const nome = 'Maria';
const idade = 25;
const mensagem = `Olá, ${nome}! Você tem ${idade} anos.`;

// 6. Default Parameters
function saudar(nome = 'Visitante', saudacao = 'Olá') {
  return `${saudacao}, ${nome}!`;
}

// 7. Object Shorthand
const nome2 = 'Pedro';
const idade2 = 28;
const pessoa2 = { nome2, idade2 }; // { nome2: 'Pedro', idade2: 28 }

// 8. Computed Properties
const propriedade = 'cor';
const valor = 'azul';
const objeto = {
  [propriedade]: valor,
  [`${propriedade}Escura`]: 'azul escuro'
};

// 9. Optional Chaining (ES2020)
const usuario = {
  perfil: {
    endereco: {
      rua: 'Rua das Flores'
    }
  }
};
const rua = usuario?.perfil?.endereco?.rua; // 'Rua das Flores'
const telefone = usuario?.perfil?.telefone; // undefined

// 10. Nullish Coalescing (ES2020)
const valorPadrao = null ?? 'valor padrão'; // 'valor padrão'
const valorZero = 0 ?? 'valor padrão'; // 0

// 11. Modules (ES6)
// arquivo: utils.js
export const PI = 3.14159;
export function calcularArea(raio) {
  return PI * raio * raio;
}

// arquivo: main.js
import { PI, calcularArea } from './utils.js';

// 12. Class Fields (ES2022)
class Produto {
  #preco; // Campo privado
  static #contador = 0; // Campo estático privado
  
  constructor(nome, preco) {
    this.nome = nome;
    this.#preco = preco;
    Produto.#contador++;
  }
  
  get preco() {
    return this.#preco;
  }
  
  static get total() {
    return Produto.#contador;
  }
}

Exemplos de Animações

// 1. Animações com CSS Transitions
function animarQuadrado() {
  const quadrado = document.getElementById('quadrado');
  const posicaoAtual = quadrado.style.left;
  
  if (posicaoAtual === '200px') {
    quadrado.style.left = '0px';
    quadrado.style.transform = 'rotate(0deg)';
  } else {
    quadrado.style.left = '200px';
    quadrado.style.transform = 'rotate(360deg)';
  }
}

// 2. Animações com JavaScript (requestAnimationFrame)
function animarTexto() {
  const texto = document.getElementById('textoAnimado');
  let opacidade = 0;
  let escala = 0.5;
  
  function animar() {
    opacidade += 0.02;
    escala += 0.02;
    
    texto.style.opacity = opacidade;
    texto.style.transform = `scale(${escala})`;
    
    if (opacidade < 1) {
      requestAnimationFrame(animar);
    }
  }
  
  animar();
}

// 3. Animações de cor
function animarCor() {
  const quadrado = document.getElementById('quadrado');
  const cores = ['#6fa3ef', '#ff6b6b', '#51cf66', '#ffd43b', '#ae3ec9'];
  let indice = 0;
  
  setInterval(() => {
    quadrado.style.backgroundColor = cores[indice];
    indice = (indice + 1) % cores.length;
  }, 1000);
}

// 4. Animações com CSS Keyframes
const keyframes = `
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
`;

// 5. Animações de entrada
function animarEntrada(elemento) {
  elemento.style.opacity = '0';
  elemento.style.transform = 'translateY(50px)';
  
  setTimeout(() => {
    elemento.style.transition = 'all 0.8s ease-out';
    elemento.style.opacity = '1';
    elemento.style.transform = 'translateY(0)';
  }, 100);
}

// 6. Parallax Effect
window.addEventListener('scroll', () => {
  const scrolled = window.pageYOffset;
  const parallax = document.querySelector('.parallax');
  const speed = scrolled * 0.5;
  
  parallax.style.transform = `translateY(${speed}px)`;
});

// 7. Animações com Canvas
function animarCanvas() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  let x = 0;
  
  function desenhar() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#6fa3ef';
    ctx.fillRect(x, 50, 50, 50);
    
    x += 2;
    if (x > canvas.width) x = 0;
    
    requestAnimationFrame(desenhar);
  }
  
  desenhar();
}

// Event listeners
document.getElementById('animarQuadrado').addEventListener('click', animarQuadrado);
document.getElementById('animarTexto').addEventListener('click', animarTexto);
document.getElementById('animarCor').addEventListener('click', animarCor);