Semana 1 - JavaScript Interativo

1

Nível Básico

Fundamentos essenciais do JavaScript

🔤 Variáveis e Tipos de Dados

Em JavaScript, usamos variáveis para guardar informações. É como ter caixas com etiquetas para organizar nossos dados!

📝 Exemplo Prático:

// const: valor que nunca muda
const meuNome = "Ana";
const anoNascimento = 2000;

// let: valor que pode mudar
let idade = 23;
let estudante = true;

// Calculando a idade no próximo ano
idade = idade + 1;

console.log(`Nome: ${meuNome}`);
console.log(`Idade: ${idade}`);
console.log(`É estudante? ${estudante}`);

📤 Resultado:

🎯 Exercício: Criando Variáveis

Complete o código abaixo criando as variáveis solicitadas:

Tarefa: Crie uma variável cidade com o nome da sua cidade e uma variável temperatura com a temperatura atual.

🧮 Operadores Matemáticos

JavaScript pode fazer cálculos como uma calculadora!

// Operadores básicos
const a = 10;
const b = 3;

console.log(`Soma: ${a + b}`);
console.log(`Subtração: ${a - b}`);
console.log(`Multiplicação: ${a * b}`);
console.log(`Divisão: ${a / b}`);
console.log(`Resto da divisão: ${a % b}`);

// Comparações
console.log(`${a} é maior que ${b}? ${a > b}`);
console.log(`${a} é igual a ${b}? ${a === b}`);

📤 Resultado:

🤔 Tomando Decisões (if/else)

O computador pode tomar decisões baseadas em condições, como "se está chovendo, leve guarda-chuva".

const idade = 20;
const temCarteira = true;

// Verificando se pode dirigir
if (idade >= 18 && temCarteira) {
    console.log("✅ Pode dirigir!");
} else if (idade >= 18) {
    console.log("⚠️ Precisa tirar a carteira");
} else {
    console.log("❌ Muito jovem para dirigir");
}

// Verificando o clima
const temperatura = 25;
if (temperatura > 30) {
    console.log("🔥 Está muito quente!");
} else if (temperatura < 15) {
    console.log("🥶 Está frio!");
} else {
    console.log("😊 Temperatura agradável");
}

📤 Resultado:

2

Nível Intermediário

Estruturas de dados e controle de fluxo

⚙️ Funções

Funções são como "máquinas" que recebem ingredientes (parâmetros) e produzem um resultado. Elas nos ajudam a organizar e reutilizar código!

// Função tradicional
function saudar(nome) {
    return `Olá, ${nome}! Bem-vindo!`;
}

// Arrow function (forma moderna)
const calcularIdade = (anoNascimento) => {
    const anoAtual = 2024;
    return anoAtual - anoNascimento;
};

// Função com múltiplos parâmetros
const calcularIMC = (peso, altura) => {
    const imc = peso / (altura * altura);
    return imc.toFixed(2);
};

// Testando as funções
console.log(saudar("Maria"));
console.log(`Idade: ${calcularIdade(1995)} anos`);
console.log(`IMC: ${calcularIMC(70, 1.75)}`);

📤 Resultado:

📋 Arrays (Listas)

Arrays são como listas de compras - podemos guardar vários itens em uma única variável!

// Criando um array
const frutas = ["maçã", "banana", "laranja"];
const numeros = [1, 2, 3, 4, 5];

// Acessando elementos (começa do 0)
console.log(`Primeira fruta: ${frutas[0]}`);
console.log(`Segunda fruta: ${frutas[1]}`);

// Adicionando elementos
frutas.push("uva");
console.log(`Frutas: ${frutas}`);

// Tamanho do array
console.log(`Total de frutas: ${frutas.length}`);

// Removendo o último elemento
const ultimaFruta = frutas.pop();
console.log(`Removeu: ${ultimaFruta}`);
console.log(`Frutas restantes: ${frutas}`);

📤 Resultado:

🏷️ Objetos

Objetos são como fichas de cadastro - podemos guardar várias informações relacionadas sobre uma coisa!

// Criando um objeto
const pessoa = {
    nome: "João",
    idade: 25,
    cidade: "São Paulo",
    profissao: "Programador"
};

// Acessando propriedades
console.log(`Nome: ${pessoa.nome}`);
console.log(`Idade: ${pessoa.idade}`);

// Modificando propriedades
pessoa.idade = 26;
pessoa.salario = 5000;

// Listando todas as propriedades
console.log("Informações da pessoa:");
for (let propriedade in pessoa) {
    console.log(`${propriedade}: ${pessoa[propriedade]}`);
}

📤 Resultado:

🔄 Loops (Repetições)

Loops nos ajudam a repetir ações sem escrever o mesmo código várias vezes!

// Loop for - quando sabemos quantas vezes repetir
console.log("Contando de 1 a 5:");
for (let i = 1; i <= 5; i++) {
    console.log(`Número: ${i}`);
}

// Loop forEach - para percorrer arrays
const cores = ["vermelho", "azul", "verde"];
console.log("\nCores disponíveis:");
cores.forEach((cor, index) => {
    console.log(`${index + 1}. ${cor}`);
});

// Loop while - repete enquanto condição for verdadeira
let contador = 0;
console.log("\nContador regressivo:");
while (contador < 3) {
    console.log(`Faltam ${3 - contador} segundos`);
    contador++;
}
console.log("🚀 Lançamento!");

📤 Resultado:

🎯 Exercício: Lista de Tarefas

Crie um sistema simples de lista de tarefas usando arrays e loops:

Tarefa: Complete o código para adicionar tarefas e listar todas elas.

3

Nível Avançado

Programação assíncrona e conceitos avançados

📞 Callbacks

Callbacks são funções que "ligamos de volta" quando algo termina de acontecer, como quando um download termina!

// Simulando um download que demora
function baixarArquivo(nomeArquivo, callback) {
    console.log(`📥 Iniciando download: ${nomeArquivo}`);
    
    // setTimeout simula uma operação que demora
    setTimeout(() => {
        console.log(`✅ Download concluído: ${nomeArquivo}`);
        // Chama a função callback quando termina
        callback(nomeArquivo);
    }, 2000);
}

// Função que será chamada quando o download terminar
function aoTerminarDownload(arquivo) {
    console.log(`🎉 Arquivo ${arquivo} está pronto para usar!`);
}

// Iniciando o download
baixarArquivo("video.mp4", aoTerminarDownload);
console.log("⏳ Aguardando download...");

📤 Resultado:

🤝 Promises

Promises são como "promessas" - elas prometem que vão tentar fazer algo e nos avisam se deu certo ou errado!

// Criando uma Promise
function buscarUsuario(id) {
    return new Promise((resolve, reject) => {
        console.log(`🔍 Buscando usuário ${id}...`);
        
        setTimeout(() => {
            // 80% de chance de sucesso
            if (Math.random() > 0.2) {
                const usuario = {
                    id: id,
                    nome: "Ana Silva",
                    email: "ana@email.com"
                };
                resolve(usuario); // Promessa cumprida!
            } else {
                reject("❌ Usuário não encontrado"); // Promessa quebrada!
            }
        }, 1500);
    });
}

// Usando a Promise
buscarUsuario(123)
    .then(usuario => {
        console.log(`✅ Usuário encontrado: ${usuario.nome}`);
        console.log(`📧 Email: ${usuario.email}`);
    })
    .catch(erro => {
        console.log(`💥 Erro: ${erro}`);
    });

📤 Resultado:

⏰ Async/Await

Async/await é uma forma mais limpa de trabalhar com Promises - é como escrever código que "espera" de forma mais natural!

// Função que simula buscar dados de uma API
function buscarDados(url) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Dados de ${url}`);
        }, 1000);
    });
}

// Usando async/await
async function carregarPagina() {
    try {
        console.log("🚀 Iniciando carregamento...");
        
        // 'await' faz o código esperar a Promise resolver
        const usuarios = await buscarDados("api/usuarios");
        console.log(`📊 ${usuarios}`);
        
        const posts = await buscarDados("api/posts");
        console.log(`📝 ${posts}`);
        
        console.log("✅ Página carregada com sucesso!");
    } catch (erro) {
        console.log(`❌ Erro: ${erro}`);
    }
}

// Executando a função
carregarPagina();

📤 Resultado:

💻

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: Calculadora

Crie uma função que receba dois números e uma operação (+, -, *, /) e retorne o resultado.

🎯 Desafio 2: Filtrar Array

Crie uma função que receba um array de números e retorne apenas os números pares.

Semana 1: JavaScript Interativo

📊 Seu Progresso

Nível Básico

🔤 Variáveis e Tipos de Dados

📝 Exemplo Prático:

📤 Resultado:

🎯 Exercício: Criando Variáveis

🧮 Operadores Matemáticos

📤 Resultado:

🤔 Tomando Decisões (if/else)

📤 Resultado:

Nível Intermediário

⚙️ Funções

📤 Resultado:

📋 Arrays (Listas)

📤 Resultado:

🏷️ Objetos

📤 Resultado:

🔄 Loops (Repetições)

📤 Resultado:

🎯 Exercício: Lista de Tarefas

Nível Avançado

📞 Callbacks

📤 Resultado:

🤝 Promises

📤 Resultado:

⏰ Async/Await

📤 Resultado:

Console Interativo

Desafios Finais

🎯 Desafio 1: Calculadora

🎯 Desafio 2: Filtrar Array