Semana 2 - JavaScript Avançado

1

Nível Básico

Manipulação do DOM e Seletores

🎯 Seletores DOM

O DOM (Document Object Model) é como uma árvore que representa todos os elementos da página. Podemos "pegar" qualquer elemento usando seletores!

📝 Exemplo Prático:

// Selecionando elementos
const titulo = document.getElementById('meuTitulo');
const botoes = document.querySelectorAll('.botao');
const primeiro = document.querySelector('.item');

// Modificando conteúdo
titulo.textContent = 'Novo Título!';
titulo.style.color = 'blue';

// Modificando classes
titulo.classList.add('destaque');
titulo.classList.remove('antigo');

console.log('Título alterado!');
console.log('Total de botões:', botoes.length);

📤 Demonstração:

Título Original

Item de exemplo

🏗️ Criando e Removendo Elementos

Podemos criar novos elementos HTML e adicioná-los à página dinamicamente!

// Criando um novo elemento
const novoItem = document.createElement('div');
novoItem.textContent = 'Item criado dinamicamente!';
novoItem.className = 'item-dinamico';
novoItem.style.cssText = `
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    padding: 10px;
    margin: 5px 0;
    border-radius: 8px;
    text-align: center;
`;

// Adicionando à página
const container = document.getElementById('container');
container.appendChild(novoItem);

console.log('Novo elemento criado!');

📤 Container:

Elementos aparecerão aqui...

🎯 Exercício: Modificando Elementos

Use JavaScript para modificar o elemento abaixo:

Elemento para Modificar

Texto original

Tarefa: Mude o texto para "Texto Modificado!" e a cor de fundo para azul.

2

Nível Intermediário

Eventos e Interações do Usuário

👆 Eventos de Click

Eventos nos permitem reagir às ações do usuário, como cliques, digitação e movimento do mouse!

// Adicionando evento de click
const botaoMagico = document.getElementById('botaoMagico');
const contador = document.getElementById('contador');
let clicks = 0;

botaoMagico.addEventListener('click', function() {
    clicks++;
    contador.textContent = clicks;
    
    // Mudando cor baseada no número de clicks
    if (clicks % 2 === 0) {
        botaoMagico.style.backgroundColor = '#10b981';
    } else {
        botaoMagico.style.backgroundColor = '#f59e0b';
    }
    
    console.log(`Botão clicado ${clicks} vezes!`);
});

📤 Demonstração:

Clicks: 0

📝 Eventos de Formulário

Podemos capturar quando o usuário digita, envia formulários ou muda valores!

// Evento de digitação
const campoTexto = document.getElementById('campoTexto');
const preview = document.getElementById('preview');

campoTexto.addEventListener('input', function(event) {
    const texto = event.target.value;
    preview.textContent = texto || 'Digite algo...';
    
    // Mudando cor baseada no tamanho
    if (texto.length > 10) {
        preview.style.color = 'green';
    } else if (texto.length > 5) {
        preview.style.color = 'orange';
    } else {
        preview.style.color = 'red';
    }
});

// Evento de envio do formulário
const formulario = document.getElementById('meuForm');
formulario.addEventListener('submit', function(event) {
    event.preventDefault(); // Impede o envio
    console.log('Formulário enviado!');
});

📤 Demonstração:

Preview: Digite algo...

🎯 Exercício: Lista de Tarefas Interativa

Crie uma lista de tarefas onde você pode adicionar e remover itens:

Tarefa: Complete o código para adicionar e remover tarefas.

3

Nível Avançado

APIs, Local Storage e Validações

💾 Local Storage

O Local Storage permite salvar dados no navegador do usuário, como preferências e configurações!

// Salvando dados
function salvarPreferencia() {
    const nome = document.getElementById('nomeUsuario').value;
    const cor = document.getElementById('corFavorita').value;
    
    localStorage.setItem('nomeUsuario', nome);
    localStorage.setItem('corFavorita', cor);
    
    console.log('Dados salvos!');
    mostrarDados();
}

// Carregando dados
function carregarDados() {
    const nome = localStorage.getItem('nomeUsuario') || 'Usuário';
    const cor = localStorage.getItem('corFavorita') || '#3b82f6';
    
    document.getElementById('nomeUsuario').value = nome;
    document.getElementById('corFavorita').value = cor;
    
    mostrarDados();
}

function mostrarDados() {
    const nome = localStorage.getItem('nomeUsuario') || 'Não definido';
    const cor = localStorage.getItem('corFavorita') || '#3b82f6';
    
    document.getElementById('dadosSalvos').innerHTML = `
        Nome: ${nome}

        Cor: ${cor}
    `;
}

📤 Demonstração:

Dados Salvos:

Nenhum dado salvo ainda

🌐 Fetch API

A Fetch API nos permite buscar dados de outros serviços na internet, como informações sobre o clima ou notícias!

// Buscando dados de uma API pública
async function buscarCEP() {
    const cep = document.getElementById('cepInput').value;
    const resultado = document.getElementById('resultadoCEP');
    
    if (cep.length !== 8) {
        resultado.innerHTML = '❌ CEP deve ter 8 dígitos';
        return;
    }
    
    try {
        resultado.innerHTML = '🔄 Buscando...';
        
        const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
        const dados = await response.json();
        
        if (dados.erro) {
            resultado.innerHTML = '❌ CEP não encontrado';
        } else {
            resultado.innerHTML = `
                📍 Endereço:

                ${dados.logradouro}

                ${dados.bairro}, ${dados.localidade} - ${dados.uf}
            `;
        }
    } catch (error) {
        resultado.innerHTML = '❌ Erro na consulta';
        console.error('Erro:', error);
    }
}

📤 Demonstração:

Digite um CEP para buscar

✅ Validação de Formulários

Podemos validar se os dados inseridos pelo usuário estão corretos antes de enviar!

// Validação de email
function validarEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

// Validação de senha
function validarSenha(senha) {
    return senha.length >= 6;
}

// Validação do formulário
function validarFormulario() {
    const email = document.getElementById('emailValid').value;
    const senha = document.getElementById('senhaValid').value;
    const resultado = document.getElementById('resultadoValid');
    
    let erros = [];
    
    if (!validarEmail(email)) {
        erros.push('Email inválido');
    }
    
    if (!validarSenha(senha)) {
        erros.push('Senha deve ter pelo menos 6 caracteres');
    }
    
    if (erros.length === 0) {
        resultado.innerHTML = '✅ Formulário válido!';
        resultado.className = 'mt-4 p-3 bg-green-100 text-green-800 rounded';
    } else {
        resultado.innerHTML = '❌ Erros: ' + erros.join(', ');
        resultado.className = 'mt-4 p-3 bg-red-100 text-red-800 rounded';
    }
}

📤 Demonstração:

Preencha os campos para validar

💻

Console Interativo

Teste seu código JavaScript aqui!

Digite seu código JavaScript:

Saída do Console:

// Saída aparecerá aqui...

🏆

Desafios Finais

Teste seus conhecimentos!

🎯 Desafio 1: Contador Interativo

Crie um contador que aumenta/diminui com botões e salva o valor no Local Storage.

0

🎯 Desafio 2: Busca de Usuários

Crie um sistema que busca usuários em uma API e exibe os resultados.

Resultados aparecerão aqui...

Semana 2: JavaScript Avançado

📊 Seu Progresso

Nível Básico

🎯 Seletores DOM

📝 Exemplo Prático:

📤 Demonstração:

Título Original

🏗️ Criando e Removendo Elementos

📤 Container:

🎯 Exercício: Modificando Elementos

Elemento para Modificar

Nível Intermediário

👆 Eventos de Click

📤 Demonstração:

📝 Eventos de Formulário

📤 Demonstração:

🎯 Exercício: Lista de Tarefas Interativa

Nível Avançado

💾 Local Storage

📤 Demonstração:

🌐 Fetch API

📤 Demonstração:

✅ Validação de Formulários

📤 Demonstração:

Console Interativo

Desafios Finais

🎯 Desafio 1: Contador Interativo

🎯 Desafio 2: Busca de Usuários