Pular para conteúdo

JavaScript Fundamentos e DOM 💻

Desenvolva interatividade em páginas web utilizando JavaScript moderno, manipulando o DOM, eventos e integração com APIs.

Foco do Curso

Metodologia: Aprendizado prático e orientado a projetos, focando nos fundamentos da linguagem e na manipulação do navegador para criar aplicações interativas.

🎯 O Que Você Vai Aprender

  • Fundamentos --- Domine a sintaxe do JavaScript, variáveis, operadores, laços e funções modernas (Arrow Functions). Ir para Módulo 1

  • Manipulação do DOM --- Aprenda a selecionar, criar e alterar elementos HTML e estilos CSS dinamicamente com JavaScript. Ver DOM

  • Eventos e Interatividade --- Responda a cliques, envios de formulários e entradas do usuário para criar experiências fluidas. Ver Eventos

  • APIs e Persistência --- Consuma dados reais com Fetch API e armazene informações no navegador com LocalStorage. Ver Projetos

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado em dois módulos fundamentais.

🧠 Módulo 1: Fundamentos da Linguagem (Aulas 01-08)

🌐 Módulo 2: DOM e Interatividade (Aulas 09-16)

Começar Minha Jornada JS

Plano de Ensino 🧭

Curso: JavaScript Fundamentos e DOM
Público-alvo: Estudantes de ADS, Ciência da Computação e Desenvolvedores de Software
Carga Horária: 20 Aulas (80 Horas Teórico-Práticas)

🎯 1. Objetivos do Curso

  • Compreender os fundamentos conceituais e arquiteturais de JavaScript Fundamentos e DOM.
  • Aplicar padrões de projeto, sintaxe moderna e boas práticas da indústria.
  • Desenvolver soluções completas através de exercícios práticos e desafios de projeto.

📚 2. Cronograma de Aulas (Matriz de 20 Semanas)

Aula Tema Central Atividades e Entregas
01 Introdução ao JavaScript Teoria, Prática Guiada, Quiz e Exercícios
02 Variáveis e Tipos Teoria, Prática Guiada, Quiz e Exercícios
03 Condições Teoria, Prática Guiada, Quiz e Exercícios
04 Laços de Repetição Teoria, Prática Guiada, Quiz e Exercícios
05 Funções ️ Teoria, Prática Guiada, Quiz e Exercícios
06 Objetos e Arrays Teoria, Prática Guiada, Quiz e Exercícios
07 Módulos JS Teoria, Prática Guiada, Quiz e Exercícios
08 Introdução ao DOM Teoria, Prática Guiada, Quiz e Exercícios
09 Eventos no DOM Teoria, Prática Guiada, Quiz e Exercícios
10 Estilos e Classes no DOM Teoria, Prática Guiada, Quiz e Exercícios
11 Templates e Listas Dinâmicas Teoria, Prática Guiada, Quiz e Exercícios
12 Requisições e Consumo de APIs Teoria, Prática Guiada, Quiz e Exercícios
13 Tratamento de Erros e Async ️ Teoria, Prática Guiada, Quiz e Exercícios
14 Promessas e Event Loop Teoria, Prática Guiada, Quiz e Exercícios
15 Novidades do ES6+ Teoria, Prática Guiada, Quiz e Exercícios
16 Projeto Final: Dashboard Interativo Teoria, Prática Guiada, Quiz e Exercícios
17 Programação Assíncrona Avançada e Event Loop Teoria, Prática Guiada, Quiz e Exercícios
18 Manipulação de DOM de Alta Performance e Intersection Observer Teoria, Prática Guiada, Quiz e Exercícios
19 Gerenciamento de Memória, Closures e Prevenção de Leaks Teoria, Prática Guiada, Quiz e Exercícios
20 Projeto Capstone: Aplicação Web Vanilla SPA Autônoma Teoria, Prática Guiada, Quiz e Exercícios

🧠 3. Metodologia de Ensino

  • Teoria Fundamentada: Aulas com conceitos detalhados, diagramas arquiteturais e sintaxe de referência.
  • Ciclo Teoria ⇄ Prática: Cada aula conta com Quiz Interativo (10 questões) para validação imediata, Lista de Exercícios Sanfonados (com Gabarito Explicado) e Desafio de Projeto Prático.
  • Laboratório Contínuo: Ambientes configurados passo a passo na seção de Setups da plataforma.

💼 4. Competências e Perfil Desenvolvido

  • Dominar as ferramentas e fluxos de desenvolvimento de JavaScript Fundamentos e DOM.
  • Resolver problemas técnicos de alta complexidade com código limpo e performático.
  • Construir portfólio prático com 20 projetos aplicados.

📊 5. Critérios de Avaliação

  • 20 Listas de Exercícios: Resolução individual dividida em Básico, Intermediário e Desafio.
  • 20 Quizzes Interativos: Validação formativa com feedback imediato via JavaScript.
  • 20 Desafios de Projetos: Aplicações práticas consolidando o aprendizado de cada unidade.

Aulas

Aula 01 - Introdução ao JavaScript 😊

Objetivo

Objetivo: Compreender o que é o JavaScript, sua importância no desenvolvimento web moderno, como incluí-lo em páginas HTML e como utilizar o console do navegador para depuração básica.

1. O que é JavaScript? 🧩

O JavaScript (JS) é uma linguagem de programação de alto nível, interpretada e que segue o padrão ECMAScript. É um dos pilares da tríade da web, junto com HTML e CSS.

Note

Enquanto o HTML define a estrutura e o CSS define o estilo, o JavaScript é responsável pelo comportamento (interatividade).

🚀 Por que JavaScript?

  • Universal: Roda em todos os navegadores modernos sem necessidade de plugins.
  • Versátil: Pode ser usado no Frontend (navegador), Backend (Node.js), Mobile (React Native) e até em IoT.
  • Assíncrono: Gerencia múltiplas tarefas ao mesmo tempo sem travar a interface.

2. Inserção no HTML 🏗️

Existem três formas principais de incluir JavaScript em uma página web:

A. Interno (Tag script)

Colocado diretamente no HTML, geralmente antes do fechamento da tag </body>.

<script>
  console.log("Olá do script interno!");
</script>

B. Externo (Arquivo .js)

A forma mais recomendada para organização de código.

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

C. Inline (Atributos)

Inserido diretamente em elementos HTML (evite usar em projetos reais).

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

3. Fluxo de Execução 📊

O diagrama abaixo ilustra como o navegador processa o JavaScript:

graph TD
    A[Carregar HTML] --> B[Encontrar Tag Script]
    B --> C{Externo?}
    C -- Sim --> D[Baixar Arquivo JS]
    C -- Não --> E[Executar JS]
    D --> E
    E --> F[Renderizar Interatividade]

4. Console do Navegador 💻

O Console é a ferramenta indispensável para todo desenvolvedor JavaScript. Ele permite visualizar logs, erros e testar códigos rapidamente.

Comandos Básicos (Exemplo no Termynal)

$ // Abra o DevTools (F12) e digite:
$ console.log("Bem-vindo ao curso!");
> "Bem-vindo ao curso!"
$ console.error("Isso é um aviso de erro.");
> ❌ Isso é um aviso de erro.
$ console.warn("Isso é um alerta importante.");
> ⚠️ Isso é um alerta importante.

Caution

Nunca copie e cole códigos desconhecidos no console do seu navegador, pois isso pode comprometer sua segurança.

5. Mini Projeto: Meu Primeiro Script 🏆

Neste mini-projeto, você criará uma saudação dinâmica que aparece no console.

Passos: 1. Crie um arquivo index.html. 2. Adicione a estrutura básica do HTML5. 3. Antes do </body>, insira uma tag <script>. 4. Use o comando console.log para imprimir seu nome e uma mensagem de boas-vindas.

// Exemplo de código
const nome = "Dev";
console.log("Olá, " + nome + "! Você está pronto para programar?");

6. Exercícios de Fixação 📝

Básicos

  1. Qual o comando utilizado para exibir uma mensagem no console do navegador?
  2. Qual a principal diferença entre incluir o JavaScript no <head> versus no final do <body>?

Intermediários

  1. Crie um arquivo HTML que utilize um script externo chamado app.js e exiba um alert ao carregar.
  2. Explique por que o JavaScript é considerado uma linguagem de "comportamento" na web.

Desafio

  1. Utilize o console para realizar uma conta matemática simples (ex: 15 * 3) e exiba o resultado precedido da frase "O resultado é: ".

Próxima Aula: Vamos aprender sobre Variáveis e Tipos! 📈

Aula 02 - Variáveis e Tipos 📊

Objetivo

Objetivo: Compreender como armazenar dados na memória utilizando let e const, conhecer os tipos primitivos do JavaScript e dominar os operadores básicos para manipulação desses dados.

1. Declarando Variáveis: let vs const 📦

No JavaScript moderno (ES6+), utilizamos duas palavras-chave principais para criar variáveis. O antigo var deve ser evitado devido a problemas de escopo.

  • let: Permite que o valor da variável seja alterado posteriormente (reatribuição).
  • const: Cria uma "constante", cujo valor não pode ser alterado após a atribuição inicial.

Important

Use const por padrão. Só mude para let se você tiver certeza de que o valor precisará ser alterado ao longo do código.

Exemplo de Uso:

const nome = "Ricardo"; // Não muda
let idade = 30;         // Pode mudar no próximo ano

idade = 31; // Correto
// nome = "João"; // Erro! Const não pode ser reatribuída.

2. Tipos Primitivos 🧩

O JavaScript possui tipos básicos que definem a natureza do dado:

  • String: Textos (delimitados por aspas simples, duplas ou crases).
  • Number: Números (inteiros ou decimais).
  • Boolean: Valores lógicos (true ou false).
  • Undefined: Indica que a variável foi declarada, mas não tem valor.
  • Null: Indica a ausência intencional de qualquer valor.

3. Operadores ⚙️

Os operadores permitem realizar cálculos e comparações.

A. Aritméticos

let soma = 10 + 5;        // 15
let subtracao = 20 - 8;    // 12
let multiplicacao = 4 * 3; // 12
let divisao = 100 / 2;     // 50
let resto = 10 % 3;        // 1 (Resto da divisão)

B. Atribuição

let x = 10;
x += 5; // x agora é 15 (Mesmo que x = x + 5)

4. Evolução dos Dados 📊

Veja como os dados fluem durante a execução:

graph LR
    A[Declaração: let x] --> B[Atribuição: x = 10]
    B --> C[Operação: x + 5]
    C --> D[Saída: console.log]

5. Prática no Console 💻

$ // Teste os tipos de dados
$ typeof "Olá";
> "string"
$ typeof 42;
> "number"
$ typeof true;
> "boolean"
$ let a = 10; let b = 20; console.log(a + b);
> 30

Tip

O operador typeof é excelente para descobrir qual o tipo de uma variável em tempo de execução.

6. Mini Projeto: Calculadora de Idade 🏆

Vamos criar um script que calcula quantos anos falta para alguém completar 100 anos.

Passos: 1. Declare uma const com o ano atual. 2. Declare uma let com o seu ano de nascimento. 3. Calcule a idade atual e armazene em uma variável. 4. Calcule quantos anos faltam para os 100 e exiba a mensagem: "Faltam X anos para você completar um século!".

7. Exercícios de Fixação 📝

Básicos

  1. Qual a diferença fundamental entre let e const?
  2. Liste os 5 tipos primitivos do JavaScript vistos nesta aula.

Intermediários

  1. Crie um código que armazene seu nome em uma constante e sua cor favorita em uma variável let. Depois, altere a cor favorita e exiba uma frase combinando os dois valores.
  2. O que acontece se tentarmos somar um número com uma string (ex: 10 + "5")? Teste no console e explique o resultado.

Desafio

  1. Crie um script que calcule a média de 3 notas de um aluno e exiba o resultado no console. Use const para as notas e mostre o tipo de dado do resultado final usando typeof.

Próxima Aula: Vamos aprender a tomar decisões com Condições! 🧠

Aula 03 - Condições 🧠

Objetivo

Objetivo: Aprender a controlar o fluxo do seu programa utilizando estruturas condicionais, permitindo que o código tome decisões baseadas em diferentes cenários e valores.

1. O que são Condicionais? 🛣️

Na programação, nem sempre queremos que o código seja executado em linha reta. Muitas vezes, precisamos que ele siga caminhos diferentes dependendo de uma condição ser verdadeira ou falsa.

Estrutura if / else

É a forma mais comum de tomada de decisão.

const idade = 18;

if (idade >= 18) {
  console.log("Você é maior de idade. Acesso permitido.");
} else {
  console.log("Você é menor de idade. Acesso negado.");
}

2. Condições Encadeadas: else if 🪜

Quando temos mais de duas possibilidades, usamos o else if para testar novas condições.

const nota = 85;

if (nota >= 90) {
    console.log("Desempenho: Excelente! 🌟");
} else if (nota >= 70) {
    console.log("Desempenho: Bom! 👍");
} else {
    console.log("Desempenho: Precisa melhorar. 📚");
}

3. Operadores de Comparação e Lógicos ⚖️

Para criar condições complexas, utilizamos operadores especiais:

Comparação

  • ==: Igualdade (valor)
  • ===: Igualdade estrita (valor e tipo) - RECOMENDADO
  • !=: Diferente
  • > / <: Maior que / Menor que
  • >= / <=: Maior ou igual / Menor ou igual

Lógicos

  • && (E): Todas as condições devem ser verdadeiras.
  • || (OU): Pelo menos uma condição deve ser verdadeira.
  • ! (NÃO): Inverte o valor booleano.

4. Fluxo de Decisão 📊

Veja como o JavaScript decide qual caminho seguir:

graph TD
    A[Início] --> B{A condição é verdadeira?}
    B -- Sim --> C[Executa Bloco IF]
    B -- Não --> D{Tem Else If?}
    D -- Sim --> E{Segunda condição é verdadeira?}
    E -- Sim --> F[Executa Bloco ELSE IF]
    E -- Não --> G[Executa Bloco ELSE]
    F --> H[Fim]
    C --> H
    G --> H

5. Prática Experimental 💻

$ // Teste de lógica no terminal
$ let sol = true; let dinheiro = 100;
$ if (sol && dinheiro > 50) { console.log("Partiu praia! 🏖️"); }
> "Partiu praia! 🏖️"
$ console.log(10 === "10");
> false
$ console.log(10 == "10");
> true

Warning

Sempre prefira o operador === (estrito) para evitar comportamentos inesperados causados pela coerção de tipos automática do JavaScript.

6. Mini Projeto: Classificador de Triângulos 🏆

Crie um script que receba três lados de um triângulo e diga se ele é: - Equilátero: Todos os lados iguais. - Isósceles: Dois lados iguais. - Escaleno: Todos os lados diferentes.

Dica: Use if, else if e o operador de comparação ===.

7. Exercícios de Fixação 📝

Básicos

  1. Escreva um código que verifique se um número é par ou ímpar.
  2. O que o seguinte código imprimirá: if (5 > 10 || 1 == 1) { console.log("A"); } else { console.log("B"); }?

Intermediários

  1. Crie um sistema de login simples: declare usuarioCerto e senhaCerta. Use um if para verificar se o input do usuário coincide com ambos.
  2. Explique a diferença entre == e === com um exemplo prático que resulte em valores diferentes.

Desafio

  1. Crie um calculador de IMC (Índice de Massa Corporal) que exiba a categoria do usuário:
  2. Abaixo de 18.5: Abaixo do peso
  3. 18.5 a 24.9: Peso normal
  4. 25 ou mais: Acima do peso

Próxima Aula: Vamos aprender a repetir tarefas com Laços de Repetição! 🔁

Aula 04 - Laços de Repetição 🔁

Objetivo

Objetivo: Compreender como automatizar tarefas repetitivas utilizando estruturas de repetição como for e while, otimizando o código e evitando a duplicação manual de comandos.

1. Por que usar Laços (Loops)? 🔁

Imagine que você precisa imprimir no console os números de 1 a 1000. Fazer isso manualmente seria inviável. Os laços permitem executar o mesmo bloco de código várias vezes enquanto uma condição for atendida.

2. O Laço for 🏎️

O for é ideal quando sabemos exatamente quantas vezes queremos repetir o código. Ele é dividido em três partes: 1. Inicialização: Onde a variável de controle começa. 2. Condição: Enquanto for verdadeira, o loop continua. 3. Incremento: Como a variável muda a cada volta.

// Exemplo: Contar de 1 a 5
for (let i = 1; i <= 5; i++) {
  console.log("Número: " + i);
}

3. O Laço while 🕰️

O while (enquanto) é usado quando não sabemos exatamente o número de repetições, dependendo apenas de uma condição externa ou variável que mude dentro do loop.

let energia = 3;

while (energia > 0) {
    console.log("Ainda tenho energia para correr...");
    energia--; // Importante para não criar um loop infinito!
}
console.log("Cansado. Hora de descansar.");

Caution

Atenção ao Loop Infinito: Se a condição do while nunca se tornar falsa (ex: esquecer de decrementar a variável), seu navegador travará.

4. Diferença Visual dos Laços 📊

graph TD
    subgraph "Fluxo do Loop For"
        A[Início] --> B[Inicialização]
        B --> C{Condição OK?}
        C -- Sim --> D[Executa Código]
        D --> E[Incremento]
        E --> C
        C -- Não --> F[Fim]
    end

5. Prática Experimental no Terminal 💻

$ // Tabuada do 5 com laço for
$ for(let i=1; i<=3; i++) { console.log("5 x " + i + " = " + (5*i)); }
> "5 x 1 = 5"
> "5 x 2 = 10"
> "5 x 3 = 15"
$ // Loop While simples
$ let x = 0; while(x < 2) { console.log("x vale: " + x); x++; }
> "x vale: 0"
> "x vale: 1"

Note

No desenvolvimento real, o for é muito utilizado para percorrer listas de dados (que veremos em breve).

6. Mini Projeto: O Contador de Passos 🏆

Crie um script que simule um objetivo de caminhada. - O objetivo é dar 10 passos. - Use um laço while que imprima no console: "Você deu o passo número X". - Ao final, imprima: "Parabéns! Você alcançou sua meta diária! 🏃".

7. Exercícios de Fixação 📝

Básicos

  1. Escreva um laço for que conte de 10 até 1 (contagem regressiva).
  2. Qual a principal diferença de uso entre o for e o while?

Intermediários

  1. Crie um script que some todos os números de 1 a 10 usando um laço e exiba apenas o resultado final.
  2. Escreva um código que use um while para exibir os múltiplos de 3 entre 1 e 20.

Desafio

  1. O Jogo da Adivinhação (Lógica): Crie uma variável numeroSecreto. Use um laço (que você desejar) para simular tentativas até que o número seja encontrado. Exiba no console quantas tentativas foram necessárias.

Próxima Aula: Vamos aprender a organizar código com Funções! 🏗️

Aula 05 - Funções 🏗️

Objetivo

Objetivo: Compreender o conceito de funções como blocos de código reutilizáveis, aprender a passar informações via parâmetros e como retornar resultados para o programa principal.

1. O que é uma Função? 🧱

Uma função é um conjunto de instruções que executa uma tarefa específica. Em vez de repetir o mesmo código em vários lugares, você o "empacota" em uma função e a chama sempre que necessário.

Analogia do Liquidificador 🥤

Imagine uma função como um liquidificador: 1. Entrada (Ingredientes): Você coloca as frutas (parâmetros). 2. Processamento (Bater): O motor gira as lâminas (lógica interna). 3. Saída (Suco): Você recebe o resultado final (retorno).

2. Declaração de Funções ✍️

No JavaScript, a forma clássica de criar uma função é usando a palavra function.

function saudar(nome) {
  return "Olá, " + nome + "! Bem-vindo.";
}

// Chamando a função
const mensagem = saudar("Ricardo");
console.log(mensagem); // "Olá, Ricardo! Bem-vindo."

3. Arrow Functions 🏹

Introduzidas no ES6, as Arrow Functions são uma forma mais curta e moderna de escrever funções. Elas são muito comuns em bibliotecas como React e Vue.

// Função tradicional
function somar(a, b) {
  return a + b;
}

// Arrow function (mesmo resultado)
const somarArrow = (a, b) => a + b;

console.log(somarArrow(10, 20)); // 30

4. Fluxo de uma Função 📊

graph LR
    A[Chamada da Função] --> B[Passagem de Parâmetros]
    B --> C[Execução da Lógica]
    C --> D{Tem Retorno?}
    D -- Sim --> E[Envia Valor de Volta]
    D -- Não --> F[Encerra Função]
    E --> G[Fim]
    F --> G

5. Prática Experimental no Terminal 💻

$ // Criando uma função anônima
$ const dobro = n => n * 2;
$ dobro(50);
> 100
$ // Função com múltiplos parâmetros
$ const calcularArea = (base, altura) => base * altura;
$ calcularArea(10, 5);
> 50

Tip

Use nomes de funções que sejam verbos (ex: calcularTotal, enviarEmail, validarDados). Isso torna seu código muito mais legível.

6. Mini Projeto: Conversor de Moedas 🏆

Crie uma função que converta Reais (BRL) para Dólares (USD). - A função deve receber o valorEmReal e a cotacaoDoDia. - Deve retornar o valor convertido. - Exiba no console o resultado formatado: "R$ 100,00 equivalem a $ [valor] USD".

7. Exercícios de Fixação 📝

Básicos

  1. Crie uma função chamada apresentar que receba um nome e uma idade e imprima uma frase no console.
  2. Qual a diferença visual na sintaxe entre uma função tradicional e uma Arrow Function?

Intermediários

  1. Escreva uma função que receba um número e retorne true se ele for positivo e false se for negativo.
  2. Converta a função abaixo para uma Arrow Function: 
    function quadrado(n) {
  return n * n;
}

Desafio

  1. Calculadora Simples: Crie uma função calculadora que receba três parâmetros: num1, num2 e operacao (uma string como "+", "-", "*", "/").
  2. Utilize um switch ou if/else dentro da função para realizar a conta correta.
  3. Retorne o resultado final.

Próxima Aula: Vamos aprender a agrupar dados complexos com Objetos e Arrays! 📦

Aula 06 - Objetos e Arrays 📦

Objetivo

Objetivo: Aprender a estruturar dados complexos utilizando objetos (pares chave-valor) e armazenar coleções de informações de forma organizada em arrays (listas).

1. O que são Objetos? 🧩

Um Objeto é um conjunto de propriedades que descreve um item da vida real. Imagine um carro: ele tem cor, modelo, ano e marca. No JavaScript, representamos isso usando chaves {}.

const usuario = {
  nome: "Ricardo",
  idade: 30,
  estaAtivo: true,
  interesses: ["JS", "Web", "DOM"]
};

// Acessando propriedades
console.log(usuario.nome); // "Ricardo"

2. O que são Arrays (Listas)? 📚

Um Array é uma lista ordenada de valores. Eles são delimitados por colchetes [] e cada item possui um índice (posição) começando do zero.

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

console.log(frutas[0]); // "Maçã"
console.log(frutas.length); // 3 (quantidade de itens)

Métodos Comuns de Arrays:

  • push(): Adiciona um item ao final da lista.
  • pop(): Remove o último item da lista.
  • forEach(): Percorre cada item da lista (iteração).

3. Manipulação de Coleções 📊

Veja como os dados são organizados e acessados:

graph TD
    A[Array de Objetos] --> B[Objeto 0: {id: 1, nome: 'A'}]
    A --> C[Objeto 1: {id: 2, nome: 'B'}]
    A --> D[Objeto 2: {id: 3, nome: 'C'}]
    B --> B1[Acessar: array[0].nome]
    B1 --> B2[Resultado: 'A']

4. Prática no Terminal 💻

$ // Criando e modificando um array
$ let cores = ["Vermelho", "Verde"];
$ cores.push("Azul");
$ console.log(cores);
> ["Vermelho", "Verde", "Azul"]
$ // Trabalhando com objetos
$ const prod = { preco: 50 };
$ prod.nome = "Camiseta";
$ console.log(prod);
> { preco: 50, nome: "Camiseta" }

Note

Arrays e Objetos são a base da troca de dados na web. Quase todo dado que vem de uma API chega no formato de um array de objetos.

5. Mini Projeto: Catálogo de Produtos 🏆

Crie um pequeno sistema de estoque. - Crie um array chamado estoque que contenha 3 objetos (cada um com nome e quantidade). - Adicione um novo produto ao array usando .push(). - Use um laço for ou .forEach() para exibir o nome de todos os produtos do estoque no console.

6. Exercícios de Fixação 📝

Básicos

  1. Como você acessaria o valor "Banana" do array const lista = ["Maçã", "Banana", "Uva"]?
  2. Crie um objeto chamado livro com as propriedades titulo, autor e paginas.

Intermediários

  1. Crie um array de números e use um laço para exibir apenas os números que são maiores que 10.
  2. Explique, com um exemplo, para que serve o método .push() em um array.

Desafio

  1. Busca em Lista: Crie um array de objetos chamado usuarios, onde cada objeto tem nome e email. Escreva uma função que receba um nome e procure se esse usuário existe no array. Se existir, exiba o e-mail dele. Se não, exiba "Usuário não encontrado".

Próxima Aula: Vamos aprender a organizar arquivos com Módulos JS! 🧩

Aula 07 - Módulos JS 🧩

Objetivo

Objetivo: Aprender a dividir seu código em múltiplos arquivos utilizando o sistema de módulos (ES6 Modules), facilitando a manutenção, organização e reutilização de scripts.

1. Por que modularizar? 🏗️

Até agora, escrevemos todo o código em um único arquivo. Conforme o projeto cresce, isso se torna impossível de gerenciar. Modularizar significa: 1. Organização: Cada arquivo tem uma responsabilidade única. 2. Reutilização: Você pode usar a mesma função em diferentes partes do projeto. 3. Namespace: Evita conflitos de nomes de variáveis entre diferentes scripts.

2. Exportando Código (export) 📤

Para que uma função ou variável seja visível fora do seu arquivo original, precisamos explicitamente "exportá-la".

// arquivo: matematica.js

export const somar = (a, b) => a + b;
export const subtrair = (a, b) => a - b;

export default function calcular(a, b) {
    return a * b; // Exportação padrão
}

3. Importando Código (import) 📥

No arquivo onde você deseja usar as funções, você as "importa".

// arquivo: main.js
import { somar, subtrair } from './matematica.js';
import multiplicar from './matematica.js'; // Importando o default

console.log(somar(10, 5)); // 15
console.log(multiplicar(2, 4)); // 8

4. Estrutura Modular 📊

graph TD
    A[main.js] --> B[auth.js]
    A --> C[api.js]
    A --> D[utils.js]
    B --> B1[Login]
    B --> B2[Logout]
    C --> C1[fetchData]
    D --> D1[formatDate]

5. Prática no Terminal 💻

$ // Exemplo de estrutura de arquivos
$ ls
> main.js  utils.js  config.js
$ cat config.js
> export const API_URL = "https://api.exemplo.com";
$ // Importando no console (simulação)
$ import { API_URL } from './config.js';
$ console.log(API_URL);
> "https://api.exemplo.com"

Important

Para usar módulos nativos no navegador, você deve incluir o script com o atributo type="module" no seu HTML: <script type="module" src="main.js"></script>.

6. Mini Projeto: Calculadora Modular 🏆

Divida sua lógica matemática em dois arquivos: 1. operacoes.js: Exporta funções para somar, subtrair, multiplicar e dividir. 2. app.js: Importa as funções e as utiliza para realizar contas, exibindo o resultado no console.

7. Exercícios de Fixação 📝

Básicos

  1. Qual o comando usado para tornar uma função disponível para outros arquivos?
  2. Como importamos uma função que foi exportada como export default?

Intermediários

  1. Qual a diferença entre export const e export default?
  2. Tente importar uma função que não foi exportada. O que acontece com o código?

Desafio

  1. Organização de Projeto: Imagine que você está criando um jogo.
  2. Quais módulos você criaria? (Ex: inimigo.js, player.js).
  3. Liste 3 funções que estariam no módulo utils.js (utilitários).
  4. Como você faria para o módulo inimigo.js ter acesso à posição do player.js?

Próxima Aula: Fim do Módulo 1! No Módulo 2, iniciaremos a Manipulação do DOM! 🌐

Aula 08 - Introdução ao DOM 🌐

Objetivo

Objetivo: Compreender o que é o DOM (Document Object Model) e como o JavaScript o utiliza para acessar e manipular os elementos de uma página HTML de forma dinâmica.

1. O que é o DOM? 🌳

O DOM (Document Object Model) é uma interface que representa o documento HTML como uma estrutura de árvore. Cada tag, atributo ou texto no seu HTML torna-se um "nó" (node) que pode ser manipulado pelo JavaScript.

A Árvore do DOM 📊

graph TD
    A[Document] --> B[Element: html]
    B --> C[Element: head]
    B --> D[Element: body]
    C --> C1[Element: title]
    D --> D1[Element: h1]
    D --> D2[Element: p]
    D --> D3[Element: button]

2. Selecionando Elementos 🎯

Para alterar algo na página, primeiro precisamos "encontrá-lo". O JavaScript oferece vários métodos para isso:

Métodos de Seleção Antigos (Mas ainda úteis)

  • document.getElementById('id'): Seleciona um único elemento pelo ID.
  • document.getElementsByClassName('classe'): Seleciona uma lista de elementos pela classe.

Métodos Modernos (Recomendados)

  • document.querySelector('.minha-classe'): Seleciona o primeiro elemento que coincide com o seletor CSS.
  • document.querySelectorAll('p'): Seleciona todos os elementos que coincidem com o seletor.

3. Acessando o Conteúdo 📝

Uma vez selecionado, podemos ler ou alterar o que está dentro do elemento:

const titulo = document.querySelector('#boas-vindas');

// Altera o texto visível
titulo.textContent = "Olá, Mundo!";

// Altera o HTML interno (cuidado com segurança!)
titulo.innerHTML = "Bem-vindo ao <span>JavaScript</span>";

4. Prática no Terminal (Console do Navegador) 💻

$ // Selecionando o body
$ const corpo = document.body;
$ // Mudando a cor de fundo via JS
$ corpo.style.backgroundColor = "lightblue";
$ // Buscando um botão
$ const btn = document.querySelector('button');
$ console.log(btn.innerText);
> "Clique aqui"

Warning

Tenha cuidado ao usar .innerHTML com dados vindos de usuários, pois isso pode abrir brechas de segurança (XSS). Prefira .textContent para textos simples.

5. Mini Projeto: Alterador de Título 🏆

Crie uma página HTML simples com um <h1> e um <button>. - No seu arquivo JavaScript, selecione o título e o botão. - Quando o botão for clicado (veremos eventos na próxima aula, mas tente usar onclick), o texto do título deve mudar para "O DOM é Incrível!".

6. Exercícios de Fixação 📝

Básicos

  1. O que significa a sigla DOM?
  2. Qual a diferença entre querySelector e querySelectorAll?

Intermediários

  1. Como você selecionaria um elemento que possui o ID meu-botao e alteraria a cor do seu texto para vermelho?
  2. Explique por que o DOM é comparado a uma árvore.

Desafio

  1. Manipulação de Lista: Imagine que você tem uma lista <ul> com 3 <li>.
  2. Escreva o código para selecionar todos os itens da lista.
  3. Use um laço .forEach() para mudar o texto de todos os itens para "Item alterado!".

Próxima Aula: Vamos aprender a reagir às interações do usuário com Eventos no DOM! ⚡

Aula 09 - Eventos no DOM ⚡

Objetivo

Objetivo: Aprender a capturar as interações do usuário (cliques, digitação, envios de formulário) e reagir a elas utilizando ouvintes de eventos (Event Listeners).

1. O que são Eventos? 🔔

Eventos são ações que acontecem na sua página, como um clique de botão, o carregamento de uma imagem ou a digitação em um campo de formulário. O JavaScript pode "ouvir" esses eventos e executar uma função quando eles ocorrem.

2. O Método addEventListener 👂

Esta é a forma moderna e recomendada de lidar com eventos. Ela permite adicionar vários ouvintes ao mesmo elemento sem sobrescrever os anteriores.

const botao = document.querySelector('#meu-botao');

// Sintaxe: elemento.addEventListener('evento', funcao)
botao.addEventListener('click', () => {
  alert("O botão foi clicado! 🎉");
});

3. Eventos Mais Comuns 🛠️

Evento Quando ocorre? Uso comum
click Ao clicar em um elemento. Botões, links, menus.
submit Ao enviar um formulário. Validação antes do envio.
input Ao digitar em um campo. Busca em tempo real.
mouseover Ao passar o mouse por cima. Efeitos visuais (hover).

4. O Objeto de Evento (e) 🗳️

Toda função de evento recebe automaticamente um objeto que contém detalhes sobre o que aconteceu.

const formulario = document.querySelector('form');

formulario.addEventListener('submit', (event) => {
    // Impede a página de recarregar (comportamento padrão)
    event.preventDefault(); 

    console.log("Formulário enviado com sucesso!");
});

5. Fluxo de Interatividade 📊

graph LR
    A[Usuário clica no Botão] --> B[Navegador detecta o Evento]
    B --> C[JavaScript chama o Listener]
    C --> D[Lógica é executada]
    D --> E[DOM é atualizado]

6. Prática no Terminal (Simulação) 💻

$ // Simulando a captura de um clique
$ const btn = { addEventListener: (ev, cb) => console.log("Ouvindo " + ev) };
$ btn.addEventListener('click', () => {});
> "Ouvindo click"
$ // Exemplo de preventDefault
$ const ev = { preventDefault: () => console.log("Recarregamento impedido!") };
$ ev.preventDefault();
> "Recarregamento impedido!"

Tip

Use sempre event.preventDefault() em formulários se você pretende processar os dados via JavaScript sem atualizar a página (comum em SPAs).

7. Mini Projeto: Contador de Cliques 🏆

Crie um pequeno contador interativo. 1. No HTML, coloque um botão e um parágrafo que exibe "Cliques: 0". 2. No JavaScript, crie uma variável contador = 0. 3. Adicione um evento de click ao botão. 4. Cada vez que o botão for clicado, aumente o contador e atualize o texto do parágrafo no DOM.

8. Exercícios de Fixação 📝

Básicos

  1. Qual a vantagem de usar addEventListener em vez do atributo onclick no HTML?
  2. Para que serve o método event.preventDefault()?

Intermediários

  1. Como você capturaria o que o usuário está digitando em um campo de texto em tempo real? Qual evento usaria?
  2. Escreva o código para mudar a cor de fundo de um <div> para amarelo quando o mouse passar por cima dele (mouseover).

Desafio

  1. Validador de Formulário: Crie um formulário com um campo de e-mail e um botão de envio.
  2. Ao enviar o formulário, impeça que a página recarregue.
  3. Verifique se o campo de e-mail está vazio.
  4. Se estiver vazio, exiba uma mensagem de erro vermelha no DOM abaixo do campo.

Próxima Aula: Vamos aprender a mudar o visual da página dinamicamente com Estilos e Classes no DOM! 🎨

Aula 10 - Estilos e Classes no DOM 🎨

Objetivo

Objetivo: Aprender a manipular o visual dos elementos da página em tempo real, utilizando a propriedade style para alterações diretas e o objeto classList para gerenciar classes CSS dinamicamente.

1. Alterando Estilos Diretamente (.style) 🖌️

O JavaScript permite alterar qualquer propriedade CSS de um elemento através da propriedade .style.

Important

No JavaScript, propriedades CSS com hífen (como background-color) tornam-se camelCase (backgroundColor).

const box = document.querySelector('.caixa');

box.style.backgroundColor = "gold";
box.style.width = "200px";
box.style.border = "2px solid black";

2. Manipulando Classes (classList) 🏷️

Embora o .style seja útil, a melhor prática é definir os estilos no CSS e usar o JavaScript apenas para adicionar ou remover classes. O objeto classList facilita muito esse processo.

Métodos Principais:

  • add('classe'): Adiciona uma classe ao elemento.
  • remove('classe'): Remove uma classe do elemento.
  • toggle('classe'): Alterna a classe (se existir, remove; se não, adiciona).
  • contains('classe'): Verifica se o elemento possui a classe.
const cartao = document.querySelector('#meu-cartao');

// Alterna entre modo claro e escuro
cartao.classList.toggle('dark-mode');

3. Fluxo de Mudança Visual 📊

graph TD
    A[Ação do Usuário] --> B{Decisão Lógica}
    B -- Opção A --> C[classList.add('sucesso')]
    B -- Opção B --> D[classList.add('erro')]
    C --> E[CSS aplica cor Verde]
    D --> F[CSS aplica cor Vermelha]
    E --> G[Visual alterado no Navegador]
    F --> G

4. Prática no Terminal (Simulação) 💻

$ // Verificando as classes de um botão
$ const btn = document.querySelector('button');
$ btn.classList.add('ativo');
$ console.log(btn.className);
> "btn-primario ativo"
$ // Mudando estilo inline
$ btn.style.display = "none";
> "O botão sumiu!"

Tip

Prefira sempre o uso de classList.toggle() para elementos interativos como menus laterais, modais e botões de "curtir".

5. Mini Projeto: Modo Noturno (Dark Mode) 🏆

Crie um botão que altera o visual de toda a página. 1. No CSS, crie uma classe .dark-mode que mude a cor do body para preto e o texto para branco. 2. No JavaScript, selecione o body e o botão. 3. Adicione um evento de clique ao botão que executa document.body.classList.toggle('dark-mode').

6. Exercícios de Fixação 📝

Básicos

  1. Como se escreve a propriedade CSS font-size no JavaScript?
  2. Qual a principal vantagem de usar classList em vez de alterar o .style diretamente?

Intermediários

  1. Como você removeria a classe invisivel de um elemento quando ele fosse clicado?
  2. Escreva o código para verificar se um elemento possui a classe selecionado.

Desafio

  1. Destaque Dinâmico:
  2. Imagine uma lista de itens.
  3. Crie um código que, ao clicar em qualquer item da lista, adicione a classe .destaque a ele.
  4. Extra: Garanta que apenas UM item da lista tenha a classe destaque por vez (remova dos outros antes de adicionar ao novo).

Próxima Aula: Vamos aprender a trabalhar com grandes volumes de dados com Templates e Listas Dinâmicas! 📜

Aula 11 - Templates e Listas Dinâmicas 📜

Objetivo

Objetivo: Aprender a gerar conteúdo HTML dinamicamente a partir de dados em JavaScript, utilizando Template Strings e métodos de criação de elementos para construir interfaces flexíveis.

1. Do Dado para a Tela 🔄

Na web moderna, raramente escrevemos todos os itens de uma lista manualmente no HTML. Geralmente, recebemos uma lista de objetos do JavaScript (ou de uma API) e precisamos transformá-los em elementos visuais.

2. Template Strings (Caminho Rápido) ⚡

A forma mais simples de gerar HTML é usando as crases (backticks `). Elas preservam quebras de linha e permitem injetar variáveis com ${}.

const produto = { nome: "Mouse", preco: 50 };

const html = `
  <div class="card">
    <h2>${produto.nome}</h2>
    <p>Preço: R$ ${produto.preco}</p>
  </div>
`;

document.body.innerHTML += html;

3. Criando Elementos (createElement) 🏗️

Neste método, criamos o elemento "no ar", configuramos suas propriedades e o "penduramos" no DOM usando o appendChild. É mais seguro e performático para listas grandes.

const lista = document.querySelector('#minha-lista');
const novoItem = document.createElement('li');

novoItem.textContent = "Novo Item Dinâmico";
novoItem.classList.add('item-estilizado');

lista.appendChild(novoItem);

4. Gerando Listas com forEach 📊

graph LR
    A[Array de Dados] --> B[Loop forEach/map]
    B --> C[Gerar HTML/Elemento]
    C --> D[Inserir no Container]
    D --> E[Interface Atualizada]

5. Prática no Terminal (Simulação) 💻

$ const nomes = ["Ana", "Beto", "Caio"];
$ // Gerando uma string de lista
$ const html = nomes.map(n => `<li>${n}</li>`).join("");
$ console.log(html);
> "<li>Ana</li><li>Beto</li><li>Caio</li>"
$ // Inserindo no DOM (simulado)
$ document.body.innerHTML = html;

Caution

Ao usar .innerHTML para gerar listas, lembre-se que ele apaga o conteúdo anterior se você usar = em vez de +=. Além disso, tenha cuidado com ataques de injeção (XSS).

6. Mini Projeto: Vitrine de Produtos 🏆

Imagine que você recebeu esta lista: const produtos = [{n: 'Celular', p: 2000}, {n: 'Fone', p: 100}]. 1. Crie um container <div id="vitrine"></div> no seu HTML. 2. No JavaScript, percorra a lista de produtos. 3. Para cada produto, crie um "card" (pode ser uma div) contendo o nome e o preço formatado. 4. Insira todos os cards dentro da #vitrine.

7. Exercícios de Fixação 📝

Básicos

  1. Qual a diferença entre aspas simples (' ') e crases (` `) ao trabalhar com strings?
  2. Para que serve o método appendChild?

Intermediários

  1. Como você converteria um array de strings ['item1', 'item2'] em um array de elementos <li> usando o método .map()?
  2. Qual o perigo de usar .innerHTML para inserir dados que o próprio usuário digitou?

Desafio

  1. Filtro de Lista:
  2. Crie um array de objetos pessoas com nome e idade.
  3. Gere a lista no DOM mostrando apenas as pessoas que são maiores de 18 anos.
  4. Extra: Adicione um botão "Mostrar Todos" que limpa a lista e gera novamente com todo mundo.

Próxima Aula: Vamos conectar nossa página ao mundo real com Requisições e Consumo de APIs! 🌐

Aula 12 - Requisições e Consumo de APIs 🌐

Objetivo

Objetivo: Aprender a conectar sua aplicação web a servidores externos, utilizando a Fetch API e o padrão async/await para buscar e enviar dados de forma assíncrona.

1. O que é uma API? 🔌

Uma API (Application Programming Interface) funciona como um garçom: você faz um "pedido" (request), ela leva ao "cozinheiro" (servidor) e traz a "comida" (dados) de volta para você. Geralmente, esses dados vêm no formato JSON.

2. Sincronismo vs Assincronismo ⏳

O JavaScript é Single Thread (faz uma coisa de cada vez). - Síncrono: O código espera uma tarefa pesada terminar para continuar. A página trava. - Assíncrono: O código inicia a tarefa (como buscar um dado na internet) e continua rodando outras coisas. Quando o dado chega, ele executa uma função de retorno.

3. Buscando Dados com fetch() 📥

O fetch é o método nativo do navegador para fazer requisições HTTP.

// Usando async/await (Forma Moderna)
async function buscarDados() {
  try {
    const resposta = await fetch('https://api.exemplo.com/dados');
    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    console.error("Erro ao buscar dados:", erro);
  }
}

buscarDados();

4. Fluxo da Requisição 📊

graph LR
    A[Seu App] -- 1. Request --> B[Internet]
    B -- 2. Request --> C[API Externa]
    C -- 3. Response JSON --> B
    B -- 4. Response --> A
    A -- 5. Atualiza o DOM --> D[Usuário vê os Dados]

5. Prática no Terminal (Simulação) 💻

$ // Simulando uma chamada de API
$ fetch('https://api.github.com/users/google')
$   .then(res => res.json())
$   .then(user => console.log(user.name));
> "Google"

Important

Lembre-se que o fetch retorna uma Promise. Por isso, precisamos usar o await ou o .then() para esperar que ela seja resolvida.

6. Mini-Projeto: Consultor de Clima 🌤️

Vamos simular a busca de dados de clima. 1. Crie um botão "Ver Clima". 2. Quando clicado, faça um fetch para uma API de testes (como a JSONPlaceholder) ou apenas simule com um setTimeout. 3. Exiba uma mensagem "Carregando..." no DOM enquanto a resposta não chega. 4. Quando os dados chegarem, exiba a temperatura na tela.

7. Exercício de Fixação 📝

Básicos

  1. Qual a função do método .json() após um fetch?
  2. O que acontece se você tentar acessar um dado de uma API que caiu sem usar o try/catch?

Intermediários

  1. Qual a diferença entre os métodos GET e POST em uma requisição?
  2. Explique por que o uso de async/await deixa o código mais fácil de ler do que o uso de vários .then().

Desafio

  1. Buscador de Usuários do GitHub:
  2. Crie um input onde o usuário digita um nome de perfil do GitHub.
  3. Ao clicar em um botão, faça um fetch para https://api.github.com/users/NOME_DIGITADO.
  4. Exiba a foto (avatar_url) e o nome do usuário no DOM.
  5. Extra: Se o usuário não existir (Erro 404), exiba a mensagem: "Usuário não encontrado!".

Próxima Aula: Vamos organizar nosso código com Tratamento de Erros e Estados de Carregamento! 🛡️

Aula 13 - Tratamento de Erros e Async 🛡️

Objetivo

Objetivo: Aprender a lidar com falhas em operações assíncronas de forma elegante, garantindo que sua aplicação não trave e que o usuário seja informado sobre o que aconteceu.

1. O que pode dar errado? 💣

Ao trabalhar com APIs e rede, muitas coisas fogem do nosso controle: - A internet do usuário cai. - O servidor da API fica fora do ar (Erro 500). - O dado que você pediu não existe (Erro 404). - O usuário não tem permissão (Erro 401/403).

2. Blocos try...catch 🏗️

Esta é a estrutura fundamental para capturar erros. O código dentro do try é executado; se algo falhar, o controle pula imediatamente para o catch.

async function carregarPerfil() {
  try {
    const resposta = await fetch('https://api.github.com/users/usuario_inexistente');

    // IMPORTANTE: fetch só joga para o catch em erro de CONEXÃO. 
    // Erros 404/500 precisam ser checados manualmente:
    if (!resposta.ok) {
        throw new Error("Usuário não encontrado!");
    }

    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    console.error("Algo deu errado: " + erro.message);
  } finally {
    console.log("Processo finalizado."); // Roda sempre, independente de erro.
  }
}

3. Estados de Carregamento (Loading) ⏳

Uma boa interface sempre avisa ao usuário o que está acontecendo. Nunca deixe a tela vazia sem explicação.

const statusMsg = document.querySelector('#status');

async function buscarGitHub() {
    statusMsg.textContent = "Carregando dados..."; // Ativa Loading

    try {
        const res = await fetch('...');
        // Processa dados...
        statusMsg.textContent = "Dados carregados!";
    } catch (e) {
        statusMsg.textContent = "Erro ao carregar. Tente novamente.";
    }
}

4. Ciclo de Vida do Erro 📊

graph TD
    A[Início da Requisição] --> B[Exibir 'Carregando...']
    B --> C{Tentativa de Fetch}
    C -- Sucesso --> D[Exibir Dados]
    C -- Falha de Rede --> E[Exibir Erro de Conexão]
    C -- Erro 404/500 --> F[Exibir Mensagem da API]
    D --> G[Esconder 'Carregando...']
    E --> G
    F --> G

5. Prática no Terminal (Debugging) 💻

$ // Simulando um erro de promessa rejeitada
$ const p = Promise.reject("Servidor Ocupado");
$ p.catch(err => console.log("Atenção: " + err));
> "Atenção: Servidor Ocupado"
$ // Usando debugger para pausar na hora do erro
$ debugger;
> "Execução pausada no console"

Important

A propriedade response.ok é true se o status HTTP estiver entre 200 e 299. Fora dessa faixa, você deve tratar como erro.

6. Mini Projeto: Interface Resiliente 🏆

Crie um buscador de CEP. 1. Tenha um campo para o CEP e um botão. 2. Ao clicar, exiba "Buscando endereço..." abaixo do botão. 3. Faça o fetch para a API do ViaCEP. 4. Se o CEP for inválido ou a API falhar, exiba o erro em vermelho. 5. Se funcionar, exiba a rua e o bairro.

7. Exercícios de Fixação 📝

Básicos

  1. Qual a diferença entre os blocos try, catch e finally?
  2. Por que o fetch não cai no catch quando recebe um erro 404?

Intermediários

  1. Como você lançaria um erro manual usando o comando throw?
  2. Explique a importância de mostrar um spinner ou mensagem de "Carregando" para o usuário.

Desafio

  1. Time-out Manual:
  2. Às vezes, uma requisição demora demais.
  3. Pesquise ou tente criar uma lógica que cancele a busca se a API demorar mais de 5 segundos para responder.
  4. Exiba a mensagem: "O servidor demorou muito para responder. Tente novamente.".

Próxima Aula: Vamos explorar as Promessas e Event Loop a fundo! 🕒

Aula 14 - Promessas e Event Loop 🕒

Objetivo

Objetivo: Compreender o funcionamento interno do JavaScript, dominando o ciclo de vida das Promises e como o Event Loop organiza a execução de tarefas assíncronas.

1. O que é uma Promise? 🤝

Uma Promise (Promessa) é um objeto que representa o sucesso ou a falha eventual de uma operação assíncrona.

Os 3 Estados de uma Promise:

  1. Pending (Pendente): Estado inicial, a tarefa ainda não terminou.
  2. Fulfilled (Realizada): Sucesso! O dado está disponível.
  3. Rejected (Rejeitada): Falha! Algo deu errado.

2. Criando sua própria Promise 🏗️

const minhaPromessa = new Promise((resolve, reject) => {
  const sucesso = true;

  setTimeout(() => {
    if (sucesso) {
      resolve("Dados carregados com sucesso! ✅");
    } else {
      reject("Erro ao carregar dados. ❌");
    }
  }, 2000);
});

minhaPromessa
  .then(res => console.log(res))
  .catch(err => console.error(err));

3. O Event Loop 🎡

O JavaScript executa o código em uma única linha (Call Stack). Para não travar, ele usa o Event Loop, que gerencia quando as tarefas assíncronas devem voltar para a linha principal.

Ordem de Prioridade:

  1. Síncrono: Roda imediatamente.
  2. Microtasks (Promises): Rodam logo após o código síncrono.
  3. Macrotasks (setTimeout): Rodam por último.

4. O Ciclo de Execução 📊

graph TD
    A[Call Stack: Código Síncrono] --> B[Web APIs: Temporizadores/Fetch]
    B --> C[Callback Queue: Macrotasks]
    B --> D[Promise Queue: Microtasks]
    A -- Stack vazia? --> D
    D -- Queue vazia? --> C
    C -- Executa um por vez --> A

5. Prática no Terminal (Desafio de Ordem) 💻

$ console.log("1. Início");
$ setTimeout(() => console.log("2. Timeout"), 0);
$ Promise.resolve().then(() => console.log("3. Promessa"));
$ console.log("4. Fim");
> "1. Início"
> "4. Fim"
> "3. Promessa"
> "2. Timeout"

Caution

Evite o "Callback Hell" (várias funções uma dentro da outra). Use async/await ou encadeamento de .then() para manter o código limpo.

6. Mini Projeto: Corrida de Promessas 🏆

Use o método Promise.all para simular o carregamento de várias fontes de dados ao mesmo tempo. 1. Crie 3 funções que retornam Promises com tempos diferentes (ex: 1s, 2s e 3s). 2. Use Promise.all([p1, p2, p3]) para esperar que todas terminem. 3. Exiba uma mensagem única quando todos os dados estiverem prontos.

7. Exercícios de Fixação 📝

Básicos

  1. Quais são os três estados possíveis de uma Promise?
  2. Explique a diferença entre resolve e reject.

Intermediários

  1. Por que uma Promise (Microtask) executa antes de um setTimeout(..., 0) (Macrotask)?
  2. O que acontece com o código se uma Promise for rejeitada e não houver um .catch()?

Desafio

  1. Simulador de Banco de Dados:
  2. Crie uma função buscarUsuario(id) que retorne uma Promise.
  3. Se o ID for 1, resolva com o objeto { nome: "Ricardo" } após 2 segundos.
  4. Se o ID for qualquer outro, rejeite com "Usuário não encontrado".
  5. Teste a função usando async/await e trate o erro.

Próxima Aula: Vamos explorar as Novidades do ES6+! 🚀

Aula 15 - Novidades do ES6+ 🚀

Objetivo

Objetivo: Dominar as funcionalidades modernas do JavaScript (ES6+), como desestruturação, operadores spread/rest e métodos avançados de array, tornando seu código mais limpo e profissional.

1. O que é o ES6+? 🆕

ES6 (ou ECMAScript 2015) foi a maior atualização da história do JavaScript. Desde então, novas funcionalidades são adicionadas todos os anos (representadas pelo "+").

2. Desestruturação (Destructuring) 📦

Permite extrair valores de objetos ou arrays de forma rápida e elegante.

const usuario = { nome: "Ricardo", idade: 30, cidade: "São Paulo" };

// Sem desestruturação
const n = usuario.nome;

// Com desestruturação
const { nome, idade } = usuario;
console.log(nome); // "Ricardo"

// Arrays também!
const cores = ["Azul", "Verde", "Amarelo"];
const [primeira, segunda] = cores;

3. Operadores Spread e Rest (...) 🖌️

  • Spread (Espalhar): Transforma um array ou objeto em itens individuais. Ótimo para cópias.
  • Rest (Resto): Coleta vários itens em um único array.
// Spread
const numeros = [1, 2, 3];
const novosNumeros = [...numeros, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

// Rest (em funções)
function somarTudo(...args) {
  return args.reduce((acc, curr) => acc + curr, 0);
}

4. Métodos de Array de "Elite" 📊

graph TD
    A[Array Original] --> B{Operação}
    B -- map --> C[Novo Array transformado]
    B -- filter --> D[Novo Array apenas com itens que passaram na regra]
    B -- reduce --> E[Um único valor final]

5. Prática no Terminal (Simulação) 💻

$ const precos = [10, 20, 30, 40];
$ // Filtrando preços maiores que 25 e dobrando o valor
$ const resultado = precos.filter(p => p > 25).map(p => p * 2);
$ console.log(resultado);
> [60]

Tip

Use o Spread para criar cópias de objetos sem alterar o original. Isso é fundamental em bibliotecas modernas como o React (Conceito de Imutabilidade).

6. Mini Projeto: Manipulador de Lista de Alunos 🏆

  1. Crie um array alunos com objetos contendo nome e nota.
  2. Use o .filter() para criar uma lista apenas com os alunos aprovados (nota >= 7).
  3. Use o .map() para criar uma lista de strings formatadas: "O aluno [Nome] foi aprovado!".
  4. Exiba essa lista final no DOM.

7. Exercícios de Fixação 📝

Básicos

  1. Qual a diferença entre o operador Spread e o operador Rest?
  2. Como você extrairia apenas a propriedade email de um objeto cliente usando desestruturação?

Intermediários

  1. Explique por que o método .map() é mais utilizado que o forEach quando queremos transformar dados.
  2. Dada a variável const [a, ...b] = [10, 20, 30, 40], quais são os valores de a e b?

Desafio

  1. O Poder do Reduce:
  2. Imagine um carrinho de compras: const carrinho = [{n: 'Camiseta', p: 50}, {n: 'Calça', p: 120}].
  3. Use o método .reduce() para calcular o valor total do carrinho em uma única linha de código.
  4. Exiba o total formatado como moeda brasileira (R$) no console.

Próxima Aula: O grande final! Projeto Prático: Dashboard Interativo 🎮

Aula 16 - Projeto Final: Dashboard Interativo 🏆

Objetivo

Objetivo: Aplicar TODO o conhecimento técnico adquirido ao longo do curso (Lógica, DOM, Eventos, Requisições e ES6+) para construir uma aplicação real, funcional e com design profissional.

1. O Desafio Final: "TecPro Dashboard" 🔗

Você deve criar um painel interativo que consome dados reais e permite a interação do usuário. Escolha UM dos temas abaixo:

  1. Buscador de Repositórios GitHub: O usuário digita um nome, vê a lista de repositórios, pode filtrar por linguagem e ver detalhes de cada um.
  2. Monitor de Criptomoedas/Clima: Exibe preços ou temperaturas em tempo real, permite adicionar "favoritos" em uma lista e atualiza os dados automaticamente.
  3. Gerenciador de Inventário: Uma lista de produtos (simulada ou via API) onde é possível adicionar, remover e pesquisar itens dinamicamente.

2. Requisitos Técnicos Obrigatórios 📋

Seu projeto deve conter obrigatoriamente: - [ ] Requisições (Fetch): Buscar dados de uma API externa (GitHub, PokeAPI, ViaCEP, etc). - [ ] Manipulação de DOM: Criar elementos dinamicamente (cards, listas, alertas). - [ ] Eventos: Pelo menos 2 tipos de eventos (clique, input, submit). - [ ] ES6+: Uso de Desestruturação, Arrow Functions e Template Strings. - [ ] Tratamento de Erros: Mensagens amigáveis para o usuário em caso de falha na API. - [ ] Modularização: Dividir o código em pelo menos 2 arquivos JS (api.js e main.js).

3. Fluxo de Desenvolvimento 📊

graph TD
    A[Planejamento: UI & API] --> B[HTML/CSS: Layout Profissional]
    B --> C[JS: Módulo de API - Fetch]
    C --> D[JS: Módulo de DOM - Renderização]
    D --> E[Interação: Eventos e Filtros]
    E --> F[Polimento: Loading e Erros]
    F --> G[Entrega Final 🏆]

4. Dicas para um Portfólio de Sucesso ✨

Para que seu projeto chame a atenção de recrutadores: 1. README.md: Explique o que o projeto faz e como instalá-lo. 2. Design: Capriche nas cores e no alinhamento! Um site bonito passa muito mais confiança. 3. Loading States: Nunca deixe o usuário no vácuo. Use "Carregando..." ou spinners. 4. Limpeza: Remova console.log desnecessários antes da entrega de produção.

5. Prática Final no Terminal (Simulação) 💻

$ // Consolidando tudo em um único flow
$ const app = async () => {
$  const data = await api.get('/user/ricardo');
$  ui.render(data);
$  events.listen();
$ };
$ app();
> "🚀 Aplicação iniciada com sucesso!"

6. Mensagem de Conclusão 🌟

Parabéns, Desenvolvedor! Você completou a jornada de JavaScript Fundamentos e DOM. Você saiu do "Olá Mundo" e agora é capaz de construir interfaces inteligentes que conversam com o mundo real.

"A programação não é sobre o que você sabe; é sobre o que você pode descobrir." — Chris Pine

FIM DO CURSO 🚀🚀🚀 Desejamos muito sucesso na sua carreira tech!

Aula 17 - Programação Assíncrona Avançada e Event Loop ⚡

Objetivo Pedagógico

Objetivo: Compreensão da arquitetura de concorrência do JavaScript no V8, funcionamento do Event Loop, Call Stack, Microtasks (Promises) e Macrotasks (Timers/I/O).

📑 1. Fundamentos Teóricos & Análise Técnica

O modelo de execução do JavaScript é estritamente single-threaded e baseado em um laço de eventos cooperativo (Event Loop). Embora o código do usuário seja executado em uma única thread principal, o ambiente hospedeiro (como o navegador ou o Node.js) fornece APIs assíncronas (Web APIs) que executam operações de I/O, timers e rede em threads de background do sistema operacional.

A ordem de prioridade de execução do Event Loop é governada por filas distintas: 1. Call Stack (Pilha de Chamadas): Executa frames síncronos de funções até seu esvaziamento completo. 2. Fila de Microtarefas (Microtask Queue): Processa callbacks de Promise.then/catch/finally, queueMicrotask() e MutationObserver. Crucial: O Event Loop drenará todas as microtarefas pendentes antes de prosseguir para qualquer outra operação. 3. Fila de Macrotarefas (Task Queue): Processa eventos disparados por setTimeout, setInterval, setImmediate e eventos de I/O do usuário. 4. Render Queue (Fase de Renderização): Oportunidade em que o navegador recalcula estilo, layout e pintura (tipicamente a cada 16.6ms para 60fps), ocorrendo após as microtarefas e antes de novas macrotarefas.

📐 Arquitetura Conceitual & Diagrama de Fluxo

flowchart TD
    Stack["1. Call Stack (Síncrono)"] -->|Esvaziou| Micro["2. Microtask Queue<br>(Promises, queueMicrotask)"]
    Micro -->|Drena Todas as Tarefas| Render["3. Pipeline de Renderização<br>(requestAnimationFrame, Layout, Paint)"]
    Render --> Macro["4. Macrotask Queue<br>(setTimeout, I/O, Eventos DOM)"]
    Macro --> Stack
    style Stack fill:#e3f2fd,stroke:#1565c0
    style Micro fill:#fff3e0,stroke:#e65100
    style Render fill:#e8f5e9,stroke:#2e7d32
    style Macro fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Esvaziamento Prioritário de Microtasks: Promises possuem prioridade absoluta sobre timers, garantindo resposta rápida a resoluções assíncronas. - Não-Bloqueio da Thread Principal: Operações computacionalmente intensivas devem ser quebradas com scheduler.yield() ou descarregadas para Web Workers. - Ordem de Resolução de Erros: Tratamento seguro de rejeições assíncronas não tratadas (unhandled promise rejections). - AbortController e Cancelamento: Uso de sinais de aborto para cancelar requisições fetch obsoletas em transições de tela.

🛠️ 2. Implementação Prática em JavaScript Assíncrono e Event Loop

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// event-loop-concurrency.js (Demonstração e Controle de Filas)
// Demonstração da ordem determinística do Event Loop
console.log('1. [Sync] Início síncrono');

setTimeout(() => {
  console.log('4. [Macrotask] Callback do setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('2. [Microtask] Resolução da Promise');
}).then(() => {
  console.log('3. [Microtask] Encadeamento da Promise');
});

queueMicrotask(() => {
  console.log('2b. [Microtask] Callback via queueMicrotask');
});

console.log('1b. [Sync] Fim síncrono');
// Saída: 1, 1b -> 2, 2b, 3 -> 4

💡 Análise Passo a Passo do Código

  1. Fase Síncrona: As linhas síncronas são empilhadas na Call Stack e executadas imediatamente ('1' e '1b').
  2. Fase de Microtarefas: Antes de olhar para o setTimeout, o motor drena as Promises e o queueMicrotask ('2', '2b' e '3').
  3. Fase de Macrotarefas: Por fim, o timer com delay zero é retirado da Task Queue e executado ('4').

🎯 3. Próximos Passos & Sequência Didática

Aula 18 - Manipulação de DOM de Alta Performance e Intersection Observer 👁️

Objetivo Pedagógico

Objetivo: Otimização de manipulação da árvore DOM com DocumentFragment, delegação de eventos e observação assíncrona de viewport com IntersectionObserver.

📑 1. Fundamentos Teóricos & Análise Técnica

A manipulação ingênua do DOM constitui o principal gargalo de performance no frontend em JavaScript puro. Cada escrita no DOM seguida de uma leitura de geometria computada (como element.offsetHeight, element.clientWidth ou getBoundingClientRect()) força o navegador a realizar uma sincronização forçada de layout (Forced Synchronous Layout ou Layout Thrashing).

Para mitigar a degradação de performance: 1. DocumentFragment: Nó de documento em memória que permite montar subárvores complexas e inseri-las no DOM principal em uma única operação atômica de reflow. 2. Delegação de Eventos: Registro de um único event listener no ancestral comum, utilizando event.target.closest() para gerenciar centenas de elementos dinâmicos com baixo consumo de memória. 3. IntersectionObserver API: Substitui listeners síncronos de scroll por observadores assíncronos desacoplados, disparando callbacks apenas quando elementos entram ou saem da área visível (essencial para lazy loading de imagens e paginação infinita).

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph LR
    subgraph Ineficiente ["Padrão Legado (Ineficiente)"]
        Scroll["window.addEventListener('scroll')"] --> GetBCR["element.getBoundingClientRect()"]
        GetBCR --> Thrash["Layout Thrashing na Thread Principal (CPU 100%)"]
    end
    subgraph Moderno ["Padrão Moderno (Alta Performance)"]
        IO["IntersectionObserver API"] --> Async["Disparo Assíncrono Fora da Thread de Render"]
        Async --> Batch["Carregamento Sob Demanda (Zero Jank)"]
    end
    style Ineficiente fill:#ffebee,stroke:#c62828
    style Moderno fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Prevenção de Layout Thrashing: Separação estrita de fases de leitura (reads) e fases de escrita (writes) no DOM. - IntersectionObserver Nativo: Detecção de visibilidade sem cálculo manual de offset nem eventos custosos de rolagem. - Desconexão de Observadores: Chamada obrigatória de observer.disconnect() ou unobserve() quando elementos são destruídos. - Delegação Eficiente: Eliminação de memory leaks associados a listeners não desvinculados em elementos removidos.

🛠️ 2. Implementação Prática em JavaScript e DOM APIs

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// lazy-observer.js (IntersectionObserver com DocumentFragment)
// Inicializa IntersectionObserver para Lazy Loading de Mídia
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('blur-placeholder');
      observer.unobserve(img); // Libera o elemento após carregamento
    }
  });
}, {
  rootMargin: '200px 0px', // Pré-carrega 200px antes de entrar no viewport
  threshold: 0.01
});

// Renderização em lote com DocumentFragment
function renderProductList(products, container) {
  const fragment = document.createDocumentFragment();

  products.forEach(item => {
    const card = document.createElement('div');
    card.className = 'product-card';
    card.innerHTML = `<img data-src="${item.image}" class="blur-placeholder" alt="${item.name}"><h3>${item.name}</h3>`;
    imageObserver.observe(card.querySelector('img'));
    fragment.appendChild(card);
  });

  container.appendChild(fragment); // 1 único reflow na página inteira!
}

💡 Análise Passo a Passo do Código

  1. Root Margin Antecipada: rootMargin: '200px 0px' inicia o download da imagem 200 pixels antes que ela chegue aos olhos do usuário.
  2. Desvinculação Imediata: observer.unobserve(img) garante que imagens já carregadas não consumam ciclos computacionais futuros.
  3. Operação Atômica: fragment.appendChild(card) constrói toda a lista em memória e toca o DOM vivo uma única vez.

🎯 3. Próximos Passos & Sequência Didática

Aula 19 - Gerenciamento de Memória, Closures e Prevenção de Leaks 🧹

Objetivo Pedagógico

Objetivo: Arquitetura de alocação de memória no Heap/Stack, algoritmo Mark-and-Sweep do Garbage Collector, closures sustentáveis e uso de WeakMap/WeakSet.

📑 1. Fundamentos Teóricos & Análise Técnica

O gerenciamento de memória em engines JavaScript modernas (como V8 e SpiderMonkey) opera de forma automática através de um coletor de lixo (Garbage Collector - GC), que implementa variações do algoritmo Mark-and-Sweep (Marcar e Varrer). O coletor percorre o grafo de objetos a partir das raízes globais (GC Roots): qualquer objeto inalcançável é considerado lixo e sua memória na Heap é liberada.

Entretanto, Vazamentos de Memória (Memory Leaks) continuam sendo um dos problemas mais graves em Single Page Applications (SPAs) de longa duração. Os três vetores mais comuns de memory leak são: 1. Variáveis Globais Acidentais: Atribuições a identificadores não declarados que ficam ancorados permanentemente no objeto window. 2. Closures com Retenção Oculta: Funções internas que fecham o escopo de variáveis de grandes dimensões (como buffers ou listas) e nunca são coletadas porque a função externa continua ativa. 3. Event Listeners Esquecidos em Elementos Removidos: Referências circulares entre o JavaScript e nós DOM desconectados.

Para contornar referências fortes que impedem a coleta pelo GC, a especificação moderna do ECMAScript fornece WeakMap e WeakSet, que mantêm referências fracas (weak references) aos objetos-chave, permitindo sua coleta automática quando não houver outras referências ativas no sistema.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    subgraph GC ["Grafo de Referências e Garbage Collection"]
        Root["GC Root (Objeto Window / Global Scope)"] --> ActiveObj["Objeto Ativo em Uso"]
        ActiveObj --> Closure["Closure com Referência Forte"]
        Root -.x DeadObj["Objeto Desconectado do DOM (Sem Raiz)"]
        DeadObj -.-> Collect["Varredura do Garbage Collector (Liberado!)"]
    end
    subgraph WeakStructures ["Gerenciamento com WeakMap"]
        WeakRef["WeakMap (Chave: Elemento DOM)"] -.->|Referência Fraca| Node["Nó DOM"]
        Node --> Destroy["Nó Destruído: Memória no WeakMap Coletada Automaticamente!"]
    end
    style GC fill:#e3f2fd,stroke:#1565c0
    style WeakStructures fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Ciclo de Vida do Garbage Collector: Divisão entre memória jovem (Scavenger) e memória sênior (Mark-Sweep-Compact) no V8. - Uso Estratégico de WeakMap: Armazenamento de metadados privados associados a objetos sem impedir sua destruição. - Limpeza Ativa de Temporizadores: Chamada mandatória de clearInterval() e clearTimeout() ao descartar módulos. - Diagnóstico com Memory Profiler: Análise de Heapsnapshots e Allocation Timelines no Chrome DevTools para detectar retenção de nós.

🛠️ 2. Implementação Prática em JavaScript Engine e Garbage Collection

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// memory-management.js (Prevenção de Leaks com WeakMap e Event Cleanup)
// Gerenciamento de metadados de elementos DOM sem causar memory leaks
const componentState = new WeakMap();

class UserCardComponent {
  constructor(domElement) {
    this.domElement = domElement;
    // Vincula estado com referência fraca
    componentState.set(domElement, { clickCount: 0, cache: new Array(10000).fill('dados') });

    // Binding explícito para permitir desvinculação limpa
    this.handleClick = this.handleClick.bind(this);
    this.domElement.addEventListener('click', this.handleClick);
  }

  handleClick() {
    const state = componentState.get(this.domElement);
    if (state) {
      state.clickCount++;
      console.log(`Cliques: ${state.clickCount}`);
    }
  }

  destroy() {
    // 1. Remove listeners explicitamente
    this.domElement.removeEventListener('click', this.handleClick);
    // 2. Remove o elemento do DOM
    this.domElement.remove();
    this.domElement = null;
    // O WeakMap se encarrega de liberar 'state' e o array grande automaticamente!
  }
}

💡 Análise Passo a Passo do Código

  1. Uso de WeakMap: componentState.set(domElement, ...) vincula o estado do componente sem impedir que o nó DOM seja liberado da memória.
  2. Remoção de Listeners: destroy() desconecta o evento registrado, evitando que a função handleClick fique retida na Call Stack.
  3. Eliminação da Referência Direta: this.domElement = null remove a última ponte para o nó, acionando a coleta no próximo ciclo do GC.

🎯 3. Próximos Passos & Sequência Didática

Aula 20 - Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🏆

Objetivo Pedagógico

Objetivo: Construção de uma aplicação Single Page Application (SPA) completa em JavaScript Vanilla, com roteamento History API, reatividade e isolamento de estado.

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone de JavaScript e DOM é a oportunidade de consolidar todo o ecossistema da linguagem sem a muleta de frameworks externos. A criação de uma Single Page Application (SPA) em JavaScript puro (Vanilla JS) exige que o desenvolvedor domine os mecanismos subjacentes que bibliotecas como React, Vue ou Angular executam por debaixo dos panos.

O projeto exige a implementação dos seguintes subsistemas de engenharia: 1. Roteador Baseado em History API: Gerenciamento de rotas no cliente com history.pushState(), history.replaceState() e interceptação do evento popstate, permitindo navegação instantânea com URLs limpas. 2. Motor de Reatividade Baseado em Proxy: Observação de alterações de dados em tempo real através da API nativa Proxy, disparando atualizações seletivas na view sem redesenhar o documento inteiro. 3. Arquitetura Baseada em Componentes Web: Encapsulamento de estilos e estruturas com Shadow DOM e Custom Elements (Web Components nativos). 4. Camada de Comunicação com Backend: Módulo HTTP baseado em fetch com interceptores de erro, retry automático com backoff exponencial e suporte a cancelamento via AbortController.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    User["Ação do Usuário (Navegação / Input)"] --> Router["Client-Side Router (History API)"]
    Router --> Controller["Controlador do Módulo"]
    Controller --> Store["Store Reativa (ES6 Proxy)"]
    Store -->|Trigger Reativo| View["Renderizador Seletivo (DOM)"]
    Controller --> Service["Serviço HTTP (Fetch + AbortController)"]
    Service --> API["API Externa / Servidor REST"]
    style User fill:#e1f5fe,stroke:#01579b
    style Router fill:#fff3e0,stroke:#e65100
    style Store fill:#e8f5e9,stroke:#2e7d32
    style View fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Roteamento Cliente Resiliente: URLs que funcionam com botão Voltar/Avançar do navegador e preservam o estado da sessão. - Reatividade com Proxy ES6: Intercepção de operações de set para atualizar nós pontuais da interface de forma cirúrgica. - Resiliência de Rede: Cancelamento automático de requisições pendentes ao navegar para outra página antes do término do download. - Zero Dependências Externas: Demonstração de proficiência sênior em APIs padrão do ECMAScript e do W3C.

🛠️ 2. Implementação Prática em JavaScript Vanilla e Arquitetura SPA

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// vanilla-spa-core.js (Núcleo do Roteador e Estado Reativo)
// 1. Estado Reativo com Proxy
function createReactiveStore(initialState, onUpdate) {
  return new Proxy(initialState, {
    set(target, prop, value) {
      target[prop] = value;
      onUpdate(prop, value);
      return true;
    }
  });
}

// 2. Roteador Client-Side com History API
class Router {
  constructor(routes, outletId) {
    this.routes = routes;
    this.outlet = document.getElementById(outletId);
    window.addEventListener('popstate', () => this.resolveRoute());
  }

  navigate(path) {
    window.history.pushState({}, '', path);
    this.resolveRoute();
  }

  resolveRoute() {
    const path = window.location.pathname || '/';
    const component = this.routes[path] || this.routes['/404'];
    this.outlet.innerHTML = '';
    this.outlet.appendChild(component.render());
  }
}

// Inicialização da SPA
const store = createReactiveStore({ count: 0 }, (prop, val) => {
  const el = document.getElementById('counter-display');
  if (el) el.textContent = val;
});

💡 Análise Passo a Passo do Código

  1. Proxy Trap: O método set() intercepta qualquer alteração de estado e notifica imediatamente a função onUpdate.
  2. History Popstate: O listener em popstate escuta as setas de navegação do browser e troca a tela sem recarregar a página.
  3. Injeção Limpa: outlet.innerHTML = '' limpa o contêiner de visualização e injeta o novo nó renderizado.

🎯 3. Próximos Passos & Sequência Didática

Exercícios

🏋️ Exercícios do Curso

Lista completa das 20 unidades de exercicios organizadas em 5 módulos didáticos.

Exercícios 01 - Introdução ao JavaScript 😊

🟢 Básicos (Fixação)

  1. Conceito: Explique a principal função do JavaScript no desenvolvimento de uma página web e como ele se diferencia do HTML e CSS.
  2. Sintaxe: Escreva o código necessário para exibir a mensagem "Olá, Mundo!" no console do navegador e também em um alerta na tela.

🟡 Intermediários (Aplicação)

  1. Organização: Crie uma estrutura de pastas simples com index.html e main.js. Mostre como você faria a ligação entre esses dois arquivos para que o script seja executado após o carregamento do HTML.
  2. Ferramentas: Abra o console do seu navegador (F12) e execute três comandos diferentes de console (log, warn, error). Descreva o que muda visualmente entre eles no console.

🔴 Desafio

  1. Mini Automação: Utilizando apenas o console do navegador, declare uma variável com seu nome e outra com sua idade. Em seguida, exiba uma mensagem única no console que diga: "Meu nome é [seu nome] e eu tenho [sua idade] anos." Dica: Você pode usar o operador + para juntar os textos.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Conceito **Resolução e Implementação:** 
// Solução de referência para: Conceito
function solucaoExercicio() {
    console.log("Executando validação de: Introdução ao JavaScript");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Introdução ao JavaScript**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Sintaxe **Resolução e Implementação:** 
// Solução de referência para: Sintaxe
function solucaoExercicio() {
    console.log("Executando validação de: Introdução ao JavaScript");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Introdução ao JavaScript**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Organização **Resolução e Implementação:** 
// Solução de referência para: Organização
function solucaoExercicio() {
    console.log("Executando validação de: Introdução ao JavaScript");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Introdução ao JavaScript**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Ferramentas **Resolução e Implementação:** 
// Solução de referência para: Ferramentas
function solucaoExercicio() {
    console.log("Executando validação de: Introdução ao JavaScript");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Introdução ao JavaScript**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Mini Automação **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao JavaScript**, o conceito abordado (Mini Automação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 02 - Variáveis e Tipos 📊

🟢 Básicos (Fixação)

  1. Diferenciação: Explique por que preferimos usar const ao invés de let na maioria das vezes. Existe algum risco em usar apenas let?
  2. Identificação: Diga qual é o tipo de dado (string, number, boolean, etc.) de cada valor abaixo:
    • "123"
    • 123
    • true
    • undefined

🟡 Intermediários (Aplicação)

  1. Cálculo: Crie um script que receba o preço de um produto e a porcentagem de desconto. Calcule o valor final e exiba no console. Use nomes de variáveis claros.
  2. Tipagem Curiosa: O que acontece se você somar um booleano com um número (ex: true + 5)? Realize o teste no console e tente explicar o porquê do resultado.

🔴 Desafio

  1. Conversor de Unidades: Crie um script que converta uma temperatura de Celsius para Fahrenheit.

    • Fórmula: F = (C * 9/5) + 32
    • Declare a temperatura em Celsius como uma const.
    • Exiba o resultado final formatado como: "A temperatura de [C]°C equivale a [F]°F".

  2. Cenário de Falha Crítica: O serviço de "Notificação" (envio de e-mail e SMS) está fora do ar.

    • Se o seu sistema for síncrono, o usuário conseguirá finalizar uma compra?
    • Como a abordagem assíncrona com filas resolveria esse problema, garantindo que o e-mail seja enviado quando o serviço voltar?
    • Cite um exemplo de serviço que precisa ser síncrono (não pode esperar).

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Diferenciação **Resposta Comentada:** - **Fundamentação:** No contexto de **Variáveis e Tipos**, o conceito abordado (Diferenciação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Identificação **Resposta Comentada:** - **Fundamentação:** No contexto de **Variáveis e Tipos**, o conceito abordado (Identificação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Cálculo **Resolução e Implementação:** 
// Solução de referência para: Cálculo
function solucaoExercicio() {
    console.log("Executando validação de: Variáveis e Tipos");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Variáveis e Tipos**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Tipagem Curiosa **Resposta Comentada:** - **Fundamentação:** No contexto de **Variáveis e Tipos**, o conceito abordado (Tipagem Curiosa) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Conversor de Unidades **Resposta Comentada:** - **Fundamentação:** No contexto de **Variáveis e Tipos**, o conceito abordado (Conversor de Unidades) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Cenário de Falha Crítica **Resposta Comentada:** - **Fundamentação:** No contexto de **Variáveis e Tipos**, o conceito abordado (Cenário de Falha Crítica) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 03 - Condições 🧠

🟢 Básicos (Fixação)

  1. Lógica: Refaça o código abaixo utilizando if e else para que ele verifique se um número é positivo, negativo ou zero: 
    let num = 10;
// Seu código aqui
  2. Operadores: O que a expressão (10 > 5 && 3 < 2) retorna? E a expressão (10 > 5 || 3 < 2)? Explique o porquê.

🟡 Intermediários (Aplicação)

  1. Sistema de Notas: Crie um script que receba a nota de um aluno (0 a 10).
    • Se a nota for maior ou igual a 7: "Aprovado"
    • Se a nota for entre 5 e 6.9: "Recuperação"
    • Se a nota for menor que 5: "Reprovado"
  2. Par ou Ímpar: Crie uma lógica que receba um número e exiba "O número X é par" ou "O número X é ímpar" no console. Dica: Use o operador de resto (%).

🔴 Desafio

  1. Simulador de Caixa Eletrônico: Crie um script que simule um saque.
    • Declare uma variável saldo e uma valorSaque.
    • Se o valorSaque for menor ou igual ao saldo, exiba "Saque realizado! Novo saldo: [valor]".
    • Se o valorSaque for maior que o saldo, exiba "Saldo insuficiente".
    • Extra: Adicione uma condição para não permitir valores de saque negativos.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Lógica **Resolução e Implementação:** 
// Solução de referência para: Lógica
function solucaoExercicio() {
    console.log("Executando validação de: Condições");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Condições**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Operadores **Resposta Comentada:** - **Fundamentação:** No contexto de **Condições**, o conceito abordado (Operadores) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Sistema de Notas **Resolução e Implementação:** 
// Solução de referência para: Sistema de Notas
function solucaoExercicio() {
    console.log("Executando validação de: Condições");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Condições**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Par ou Ímpar **Resolução e Implementação:** 
// Solução de referência para: Par ou Ímpar
function solucaoExercicio() {
    console.log("Executando validação de: Condições");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Condições**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Simulador de Caixa Eletrônico **Resposta Comentada:** - **Fundamentação:** No contexto de **Condições**, o conceito abordado (Simulador de Caixa Eletrônico) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 04 - Laços de Repetição 🔁

🟢 Básicos (Fixação)

  1. Contagem: Crie um laço for que exiba no console todos os números ímpares de 1 a 15.
  2. While: Utilize um laço while para exibir a frase "Estou aprendendo JS!" exatas 10 vezes no console.

🟡 Intermediários (Aplicação)

  1. Tabuada Dinâmica: Crie um script que declare uma constante tabuada. Utilize um laço for para exibir a tabuada completa desse número (de 1 a 10).
  2. Somador: Crie um script que some todos os números de 1 até um valor X definido por você (usando o laço while). Ao final, exiba: "A soma total foi [resultado]".

🔴 Desafio

  1. Simulador de Login (Máximo de Tentativas): Crie um sistema que peça a senha do usuário (simule isso com uma variável).
    • Permita no máximo 3 tentativas erradas usando um laço.
    • Se o usuário acertar a senha (ex: "1234"), exiba "Acesso Concedido".
    • Se ele errar 3 vezes, exiba "Conta Bloqueada". Dica: Use uma variável tentativas que incrementa a cada loop.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Contagem **Resolução e Implementação:** 
// Solução de referência para: Contagem
function solucaoExercicio() {
    console.log("Executando validação de: Laços de Repetição");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Laços de Repetição**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: While **Resposta Comentada:** - **Fundamentação:** No contexto de **Laços de Repetição**, o conceito abordado (While) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Tabuada Dinâmica **Resolução e Implementação:** 
// Solução de referência para: Tabuada Dinâmica
function solucaoExercicio() {
    console.log("Executando validação de: Laços de Repetição");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Laços de Repetição**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Somador **Resolução e Implementação:** 
// Solução de referência para: Somador
function solucaoExercicio() {
    console.log("Executando validação de: Laços de Repetição");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Laços de Repetição**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Simulador de Login (Máximo de Tentativas) **Resposta Comentada:** - **Fundamentação:** No contexto de **Laços de Repetição**, o conceito abordado (Simulador de Login (Máximo de Tentativas)) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 05 - Funções 🏗️

🟢 Básicos (Fixação)

  1. Declaração: Escreva uma função chamada saudacao que receba um nome como parâmetro e exiba "Olá, [nome]!" no console.
  2. Retorno: Crie uma função que receba dois números e retorne a multiplicação entre eles. Guarde o resultado em uma variável e exiba-a.

🟡 Intermediários (Aplicação)

  1. Arrow Function: Transforme a função abaixo em uma Arrow Function de apenas uma linha: 
    function triplo(n) {
  return n * 3;
}
  2. Lógica Interna: Crie uma função chamada podeDirigir que receba a idade. Ela deve retornar true se a idade for 18 ou mais, e false caso contrário.

🔴 Desafio

  1. Formatador de Nomes: Crie uma função que receba o nome e o sobrenome separadamente.
    • Ela deve retornar o nome completo formatado (ex: "RICARDO PRATES").
    • Extra: Use um método de string do JavaScript para garantir que todo o nome retorne em letras MAIÚSCULAS.
    • Dica: texto.toUpperCase().

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Declaração **Resolução e Implementação:** 
// Solução de referência para: Declaração
function solucaoExercicio() {
    console.log("Executando validação de: Funções ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Funções ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Retorno **Resolução e Implementação:** 
// Solução de referência para: Retorno
function solucaoExercicio() {
    console.log("Executando validação de: Funções ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Funções ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Arrow Function **Resolução e Implementação:** 
// Solução de referência para: Arrow Function
function solucaoExercicio() {
    console.log("Executando validação de: Funções ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Funções ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Lógica Interna **Resolução e Implementação:** 
// Solução de referência para: Lógica Interna
function solucaoExercicio() {
    console.log("Executando validação de: Funções ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Funções ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Formatador de Nomes **Resposta Comentada:** - **Fundamentação:** No contexto de **Funções ️**, o conceito abordado (Formatador de Nomes) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 06 - Objetos e Arrays 📦

🟢 Básicos (Fixação)

  1. Acesso: Dado o objeto const carro = { marca: "Toyota", modelo: "Corolla", ano: 2022 }, como você acessaria a propriedade marca?
  2. Lista: Crie um array chamado cores com três cores. Adicione uma quarta cor ao final da lista e exiba o array completo no console.

🟡 Intermediários (Aplicação)

  1. Objeto Complexo: Crie um objeto aluno que contenha: nome, idade e um array chamado notas com 3 números. Acesse a segunda nota do aluno através do objeto e exiba-a.
  2. Iteração: Crie um array de nomes. Use o método .forEach() para exibir cada nome no console precedido da frase "Convidado: ".

🔴 Desafio

  1. Gerenciador de Compras:
    • Crie um array de objetos chamado carrinho.
    • Cada objeto deve ter produto (string) e preco (number).
    • Use um laço de repetição para calcular a soma total de todos os produtos do carrinho e exiba o resultado final.
    • Extra: Se o total for maior que 100, exiba uma mensagem de "Desconto Aplicado!".

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Acesso **Resposta Comentada:** - **Fundamentação:** No contexto de **Objetos e Arrays**, o conceito abordado (Acesso) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Lista **Resolução e Implementação:** 
// Solução de referência para: Lista
function solucaoExercicio() {
    console.log("Executando validação de: Objetos e Arrays");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Objetos e Arrays**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Objeto Complexo **Resolução e Implementação:** 
// Solução de referência para: Objeto Complexo
function solucaoExercicio() {
    console.log("Executando validação de: Objetos e Arrays");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Objetos e Arrays**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Iteração **Resolução e Implementação:** 
// Solução de referência para: Iteração
function solucaoExercicio() {
    console.log("Executando validação de: Objetos e Arrays");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Objetos e Arrays**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Gerenciador de Compras **Resposta Comentada:** - **Fundamentação:** No contexto de **Objetos e Arrays**, o conceito abordado (Gerenciador de Compras) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 07 - Módulos JS 🧩

🟢 Básicos (Fixação)

  1. Exportação: Como você exportaria uma constante chamada PI = 3.14 de um arquivo para ser usada em outro?
  2. Importação: Escreva a linha de código necessária para importar uma função somar do arquivo calculadora.js localizado na mesma pasta.

🟡 Intermediários (Aplicação)

  1. Namespace: Por que é melhor importar apenas o que você precisa import { somar } ... em vez de carregar um arquivo gigante inteiro?
  2. Default vs Named: Explique a diferença entre export default e export const. Quantos export default podemos ter em um único arquivo?

🔴 Desafio

  1. Refatoração Modular:
    • Imagine que você tem um arquivo utils.js com funções de formatação de data e de moeda.
    • Export those functions.
    • Crie um arquivo index.js que importe essas duas funções e as utilize para exibir no console uma data e um preço (ex: "Data: 20/05/2024 - Preço: R$ 50,00").
    • Dica: Use o tipo module para testar (mesmo que seja apenas lógica).

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Exportação **Resposta Comentada:** - **Fundamentação:** No contexto de **Módulos JS**, o conceito abordado (Exportação) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Importação **Resolução e Implementação:** 
// Solução de referência para: Importação
function solucaoExercicio() {
    console.log("Executando validação de: Módulos JS");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Módulos JS**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Namespace **Resposta Comentada:** - **Fundamentação:** No contexto de **Módulos JS**, o conceito abordado (Namespace) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Default vs Named **Resposta Comentada:** - **Fundamentação:** No contexto de **Módulos JS**, o conceito abordado (Default vs Named) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Refatoração Modular **Resposta Comentada:** - **Fundamentação:** No contexto de **Módulos JS**, o conceito abordado (Refatoração Modular) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 08 - Introdução ao DOM 🌐

🟢 Básicos (Fixação)

  1. Seleção: Qual comando você usaria para selecionar um elemento <h1 id="titulo">?
  2. Conteúdo: Como você mudaria o texto de um parágrafo para "Novo conteúdo"?

🟡 Intermediários (Aplicação)

  1. Seletores CSS: Selecione o primeiro item de uma lista que possui a classe item-ativo e mude sua cor para azul.
  2. Diferença: Explique por que usar textContent é geralmente mais seguro do que innerHTML.

🔴 Desafio

  1. Relógio Simples (Conceitual):
    • Imagine um <span> com o ID relogio.
    • Como você faria para, via JavaScript, atualizar o texto desse span com o valor da hora atual toda vez que um botão fosse clicado?
    • Dica: use new Date().toLocaleTimeString().

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Seleção **Resolução e Implementação:** 
// Solução de referência para: Seleção
function solucaoExercicio() {
    console.log("Executando validação de: Introdução ao DOM");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Introdução ao DOM**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Conteúdo **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao DOM**, o conceito abordado (Conteúdo) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Seletores CSS **Resolução e Implementação:** 
// Solução de referência para: Seletores CSS
function solucaoExercicio() {
    console.log("Executando validação de: Introdução ao DOM");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Introdução ao DOM**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Diferença **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao DOM**, o conceito abordado (Diferença) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Relógio Simples (Conceitual) **Resposta Comentada:** - **Fundamentação:** No contexto de **Introdução ao DOM**, o conceito abordado (Relógio Simples (Conceitual)) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 09 - Eventos no DOM ⚡

🟢 Básicos (Fixação)

  1. Sintaxe: Escreva o código para adicionar um evento de clique a um botão com a classe btn-confirmar.
  2. Alertas: Crie um listener que exiba um alert("Olá!") quando o mouse passar por cima de uma imagem.

🟡 Intermediários (Aplicação)

  1. Formulário: Imagine um formulário de contato. Como você usaria o event para impedir que a página recarregue ao clicar em enviar?
  2. Input Real-time: Crie um código que selecione um campo de input e, a cada tecla digitada, exiba o valor atual do input no console.

🔴 Desafio

  1. Lista de Tarefas Express:
    • Crie um input de texto e um botão "Adicionar".
    • Ao clicar no botão, capture o texto do input.
    • Crie um novo elemento <li> com esse texto.
    • Adicione o novo <li> a uma lista <ul> já existente no seu HTML.
    • Limpe o input após a adição.
    • Extra: Se o input estiver vazio, não adicione nada e exiba um aviso.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Sintaxe **Resolução e Implementação:** 
// Solução de referência para: Sintaxe
function solucaoExercicio() {
    console.log("Executando validação de: Eventos no DOM ⚡");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Eventos no DOM ⚡**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Alertas **Resolução e Implementação:** 
// Solução de referência para: Alertas
function solucaoExercicio() {
    console.log("Executando validação de: Eventos no DOM ⚡");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Eventos no DOM ⚡**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Formulário **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos no DOM ⚡**, o conceito abordado (Formulário) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Input Real-time **Resolução e Implementação:** 
// Solução de referência para: Input Real-time
function solucaoExercicio() {
    console.log("Executando validação de: Eventos no DOM ⚡");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Eventos no DOM ⚡**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Lista de Tarefas Express **Resposta Comentada:** - **Fundamentação:** No contexto de **Eventos no DOM ⚡**, o conceito abordado (Lista de Tarefas Express) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 10 - Estilos e Classes no DOM 🎨

🟢 Básicos (Fixação)

  1. CamelCase: Como você mudaria a cor da borda de um elemento para "vermelho" usando .style?
  2. Toggle: O que o método classList.toggle('ativo') faz?

🟡 Intermediários (Aplicação)

  1. Destaque: Selecione todos os elementos <p> da página e use um laço para adicionar a classe destaque a todos eles.
  2. Invisibilidade: Escreva uma função que, ao ser chamada, esconda um elemento mudando seu display para none.

🔴 Desafio

  1. Menu "Accordion" Simples:
    • Imagine um <div> que contém um texto longo, inicialmente escondido (display: none).
    • Crie um botão "Ver Mais".
    • Ao clicar no botão, o texto deve aparecer e o texto do botão deve mudar para "Ver Menos".
    • Ao clicar novamente, o texto some e o botão volta ao original.
    • Dica: Use classList para controlar a visibilidade e um if para mudar o texto do botão.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: CamelCase **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilos e Classes no DOM**, o conceito abordado (CamelCase) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Toggle **Resolução e Implementação:** 
// Solução de referência para: Toggle
function solucaoExercicio() {
    console.log("Executando validação de: Estilos e Classes no DOM");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilos e Classes no DOM**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Destaque **Resolução e Implementação:** 
// Solução de referência para: Destaque
function solucaoExercicio() {
    console.log("Executando validação de: Estilos e Classes no DOM");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilos e Classes no DOM**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Invisibilidade **Resolução e Implementação:** 
// Solução de referência para: Invisibilidade
function solucaoExercicio() {
    console.log("Executando validação de: Estilos e Classes no DOM");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Estilos e Classes no DOM**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Menu "Accordion" Simples **Resposta Comentada:** - **Fundamentação:** No contexto de **Estilos e Classes no DOM**, o conceito abordado (Menu "Accordion" Simples) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 11 - Templates e Listas Dinâmicas 📜

🟢 Básicos (Fixação)

  1. Sintaxe: Como você injetaria a variável usuario = "Ana" dentro da frase "Bem-vinda, Ana!" usando Template Strings?
  2. Criação: Qual o comando para criar um novo elemento <div> na memória?

🟡 Intermediários (Aplicação)

  1. Loop: Dado o array cores = ["azul", "verde", "amarelo"], use um forEach para exibir cada cor no console dentro de uma frase: "A cor atual é ...".
  2. Inserção: Como você adicionaria um parágrafo que você acabou de criar dentro de um div que possui o ID container?

🔴 Desafio

  1. Lista de Compras Dinâmica:
    • Crie um array de objetos itens = [{nome: "Leite", preco: 5.50}, {nome: "Pão", preco: 2.10}].
    • Escreva o código que percorra este array e crie, para cada item, uma linha formatada assim: <li>Leite - R$ 5.50</li>.
    • Adicione todas essas linhas a uma <ul> no seu HTML.
    • Dica: Use o método .toFixed(2) para formatar os preços com duas casas decimais.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Sintaxe **Resposta Comentada:** - **Fundamentação:** No contexto de **Templates e Listas Dinâmicas**, o conceito abordado (Sintaxe) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Criação **Resolução e Implementação:** 
// Solução de referência para: Criação
function solucaoExercicio() {
    console.log("Executando validação de: Templates e Listas Dinâmicas");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Templates e Listas Dinâmicas**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Loop **Resolução e Implementação:** 
// Solução de referência para: Loop
function solucaoExercicio() {
    console.log("Executando validação de: Templates e Listas Dinâmicas");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Templates e Listas Dinâmicas**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Inserção **Resposta Comentada:** - **Fundamentação:** No contexto de **Templates e Listas Dinâmicas**, o conceito abordado (Inserção) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Lista de Compras Dinâmica **Resposta Comentada:** - **Fundamentação:** No contexto de **Templates e Listas Dinâmicas**, o conceito abordado (Lista de Compras Dinâmica) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 12 - Requisições e APIs 🌐

🟢 Básicos (Fixação)

  1. JSON: O que significa JSON e por que ele é o formato favorito para APIs?
  2. Async: Para que serve a palavra-chave await dentro de uma função?

🟡 Intermediários (Aplicação)

  1. Fetch: Escreva o código básico de um fetch para a URL https://api.github.com e exiba o resultado no console.
  2. Erros: Por que é vital envolver um fetch dentro de um bloco try/catch?

🔴 Desafio

  1. Buscador de Pokémons:
    • Imagine que você quer buscar dados de um Pokémon na PokeAPI.
    • O endpoint é: https://pokeapi.co/api/v2/pokemon/IDENTIFICADOR.
    • Escreva uma função assíncrona que receba o nome de um Pokémon (ex: "pikachu").
    • Faça o fetch e exiba no console a altura (height) e o peso (weight) desse Pokémon.
    • Dica: Use Template Strings para montar a URL dinamicamente.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: JSON **Resposta Comentada:** - **Fundamentação:** No contexto de **Requisições e Consumo de APIs**, o conceito abordado (JSON) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Async **Resolução e Implementação:** 
// Solução de referência para: Async
function solucaoExercicio() {
    console.log("Executando validação de: Requisições e Consumo de APIs");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Requisições e Consumo de APIs**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Fetch **Resolução e Implementação:** 
// Solução de referência para: Fetch
function solucaoExercicio() {
    console.log("Executando validação de: Requisições e Consumo de APIs");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Requisições e Consumo de APIs**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Erros **Resposta Comentada:** - **Fundamentação:** No contexto de **Requisições e Consumo de APIs**, o conceito abordado (Erros) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Buscador de Pokémons **Resposta Comentada:** - **Fundamentação:** No contexto de **Requisições e Consumo de APIs**, o conceito abordado (Buscador de Pokémons) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 13 - Tratamento de Erros e Async 🛡️

🟢 Básicos (Fixação)

  1. Try/Catch: Qual bloco de código é responsável por capturar o erro? O que acontece com o programa se o erro for capturado?
  2. Finally: Em que situações o bloco finally é executado?

🟡 Intermediários (Aplicação)

  1. Checagem Manual: O fetch caiu em um erro 404 (Não encontrado). Como você checa isso no código para lançar um erro manual?
  2. UX: Por que não é recomendado mostrar o erro técnico (ex: "Stack Trace") direto para o usuário final? O que devemos mostrar em vez disso?

🔴 Desafio

  1. Buscador Resiliente:
    • Escreva um código que tenta buscar dados de um usuário no GitHub.
    • Antes de começar o fetch, mude o texto de uma div de status para "Carregando...".
    • Se o fetch falhar, mude o status para a cor vermelha e escreva: "Erro: Verifique sua conexão".
    • No final de tudo (sucesso ou erro), exiba no console: "Tentativa de busca encerrada".
    • Dica: Use o bloco finally para o log final.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Try/Catch **Resolução e Implementação:** 
// Solução de referência para: Try/Catch
function solucaoExercicio() {
    console.log("Executando validação de: Tratamento de Erros e Async ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Tratamento de Erros e Async ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Finally **Resposta Comentada:** - **Fundamentação:** No contexto de **Tratamento de Erros e Async ️**, o conceito abordado (Finally) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Checagem Manual **Resolução e Implementação:** 
// Solução de referência para: Checagem Manual
function solucaoExercicio() {
    console.log("Executando validação de: Tratamento de Erros e Async ️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Tratamento de Erros e Async ️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: UX **Resposta Comentada:** - **Fundamentação:** No contexto de **Tratamento de Erros e Async ️**, o conceito abordado (UX) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: Buscador Resiliente **Resposta Comentada:** - **Fundamentação:** No contexto de **Tratamento de Erros e Async ️**, o conceito abordado (Buscador Resiliente) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 14 - Promessas e Event Loop 🕒

🟢 Básicos (Fixação)

  1. Estados: Cite os 3 estados de uma Promise e descreva o que cada um significa.
  2. Sintaxe: Como você capturaria um erro de uma Promise usando a sintaxe de .then() e .catch()?

🟡 Intermediários (Aplicação)

  1. Event Loop: Explique por que, se rodarmos um setTimeout com tempo 0, ele ainda assim executa DEPOIS do código síncrono.
  2. Promise.all: Para que serve o método Promise.all? Dê um exemplo de uso real em um site.

🔴 Desafio

  1. Simulador de Login Assíncrono:
    • Crie uma função autenticar(user, pass) que retorne uma Promise.
    • Simule um atraso de 2 segundos usando setTimeout.
    • Se user === "admin" e pass === "123", a Promise deve ser resolvida com "Acesso Permitido".
    • Caso contrário, deve ser rejeitada com "Dados Inválidos".
    • Consuma essa função usando async/await e exiba o resultado no console (sucesso ou erro).

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Estados **Resolução e Implementação:** 
// Solução de referência para: Estados
function solucaoExercicio() {
    console.log("Executando validação de: Promessas e Event Loop");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Promessas e Event Loop**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Sintaxe **Resposta Comentada:** - **Fundamentação:** No contexto de **Promessas e Event Loop**, o conceito abordado (Sintaxe) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Event Loop **Resolução e Implementação:** 
// Solução de referência para: Event Loop
function solucaoExercicio() {
    console.log("Executando validação de: Promessas e Event Loop");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Promessas e Event Loop**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Promise.all **Resolução e Implementação:** 
// Solução de referência para: Promise.all
function solucaoExercicio() {
    console.log("Executando validação de: Promessas e Event Loop");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Promessas e Event Loop**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Simulador de Login Assíncrono **Resposta Comentada:** - **Fundamentação:** No contexto de **Promessas e Event Loop**, o conceito abordado (Simulador de Login Assíncrono) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Exercícios 15 - Novidades do ES6+ 🚀

🟢 Básicos (Fixação)

  1. Template Strings: Como você concatenaria as variáveis marca = "Apple" e modelo = "iPhone" usando a síntaxe moderna do ES6?
  2. Destructuring: Dado o objeto const config = {tema: "escuro", fonte: "Arial"}, como você criaria a variável tema em uma única linha?

🟡 Intermediários (Aplicação)

  1. Spread: Você tem dois arrays: jan = [1, 2] e fev = [3, 4]. Como você criaria o array trimestre contendo todos esses números utilizando o operador ...?
  2. Filter: Dado o array idades = [12, 18, 25, 10, 30], use o método .filter() para retornar apenas as idades maiores ou iguais a 18.

🔴 Desafio

  1. Desestruturação de Arrays e Rest:
    • Você recebeu uma lista de medalhas: const medalhas = ["Ouro", "Prata", "Bronze", "Menção 1", "Menção 2"].
    • Use desestruturação para colocar a primeira posição na variável primeiro, a segunda na segundo e o restante em um novo array chamado outros.
    • Exiba os valores no console.
    • Extra: Use um template string para exibir: "O vencedor levou a medalha de [Ouro]!".

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Template Strings **Resposta Comentada:** - **Fundamentação:** No contexto de **Novidades do ES6+**, o conceito abordado (Template Strings) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Destructuring **Resposta Comentada:** - **Fundamentação:** No contexto de **Novidades do ES6+**, o conceito abordado (Destructuring) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Spread **Resolução e Implementação:** 
// Solução de referência para: Spread
function solucaoExercicio() {
    console.log("Executando validação de: Novidades do ES6+");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Novidades do ES6+**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 4: Filter **Resolução e Implementação:** 
// Solução de referência para: Filter
function solucaoExercicio() {
    console.log("Executando validação de: Novidades do ES6+");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Novidades do ES6+**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Desestruturação de Arrays e Rest **Resolução e Implementação:** 
// Solução de referência para: Desestruturação de Arrays e Rest
function solucaoExercicio() {
    console.log("Executando validação de: Novidades do ES6+");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Novidades do ES6+**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.

Exercícios 16 - Planejamento do Projeto Final 🏆

🟢 Básicos (Fixação)

  1. Escolha do Tema: Qual dos temas sugeridos (Buscador GitHub, Monitor Cripto/Clima, Gerenciador Inventário) você escolheu para o seu projeto final? Se for um tema autoral, descreva-o em uma frase.
  2. APIs: Qual API externa você pretende utilizar para buscar os dados de forma assíncrona?

🟡 Intermediários (Aplicação)

  1. Arquitetura: Se seu projeto fosse dividido em módulos, quais seriam os arquivos .js e qual a responsabilidade de cada um?
  2. UX: Como você faria para exibir uma mensagem de erro na tela caso o usuário digite um dado que a API não reconhece?
  3. ES6+: Cite dois recursos modernos do JavaScript (como Desestruturação ou Spread) que você usará para deixar seu código mais limpo.

🔴 Desafio

  1. Checklist de Prontidão: Antes de entregar, responda sim ou não para os itens abaixo e justifique brevemente:
    • O site é responsivo (funciona no celular)?
    • O código está modularizado (import/export)?
    • Usei Template Strings para renderizar o HTML dinâmico?
    • Tratei o erro caso a internet caia durante a busca?

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Escolha do Tema **Resolução e Implementação:** 
// Solução de referência para: Escolha do Tema
function solucaoExercicio() {
    console.log("Executando validação de: Projeto Final: Dashboard Interativo");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Projeto Final: Dashboard Interativo**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: APIs **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Interativo**, o conceito abordado (APIs) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Arquitetura **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Interativo**, o conceito abordado (Arquitetura) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: UX **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Interativo**, o conceito abordado (UX) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 5: ES6+ **Resolução e Implementação:** 
// Solução de referência para: ES6+
function solucaoExercicio() {
    console.log("Executando validação de: Projeto Final: Dashboard Interativo");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Projeto Final: Dashboard Interativo**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 6: Checklist de Prontidão **Resposta Comentada:** - **Fundamentação:** No contexto de **Projeto Final: Dashboard Interativo**, o conceito abordado (Checklist de Prontidão) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.

Projetos

🚀 Projetos do Curso

Lista completa das 20 unidades de projetos organizadas em 5 módulos didáticos.

Projeto 01 - Saudação Interativa 🚀

Objetivo: Criar sua primeira página web interativa utilizando JavaScript externo e o console do navegador.

O Desafio

  1. Crie uma pasta para o projeto chamada meu-primeiro-js.
  2. Crie um arquivo index.html com a estrutura básica.
  3. Crie um arquivo app.js na mesma pasta.
  4. No app.js, declare uma variável curso com o valor "JavaScript Fundamentos".
  5. Use o console.log para exibir a mensagem: "Bem-vindo ao curso de [valor da variável curso]!".
  6. Faça a ligação do script no final do <body> do seu HTML.
  7. Abra o arquivo no navegador e verifique se a mensagem aparece no console (F12).

O que entregar?

  • A pasta do projeto contendo os arquivos .html e .js.
  • Um print (screenshot) do console do navegador exibindo a mensagem de boas-vindas.

Projeto 02 - Calculadora de Investimentos Simples 💰

Objetivo: Aplicar os conceitos de variáveis, tipos e operadores aritméticos para criar uma calculadora lógica.

O Desafio

  1. Crie um novo arquivo JS chamado investimento.js.
  2. Declare as seguintes constantes:
    • capitalInicial: O valor que você quer investir (ex: 1000).
    • taxaJurosMensal: A porcentagem de juros (ex: 0.01 para 1%).
    • tempoMeses: Por quanto tempo o dinheiro ficará rendendo (ex: 12).
  3. Calcule o Montante Final usando a fórmula de juros simples: M = capitalInicial * (1 + taxaJurosMensal * tempoMeses).
  4. Exiba no console: "Após [tempo] meses, seu investimento de R$ [capital] valerá R$ [montante]".
  5. Use console.log e concatenação de strings.

O que entregar?

  • A lista de ferramentas pesquisadas.

Projeto 03 - Verificador de Elegibilidade ⚡

Objetivo: Criar um sistema lógico que valida se uma pessoa pode votar e se o voto é obrigatório ou facultativo.

O Desafio

Com base na idade de uma pessoa, seu script deve exibir uma das quatro mensagens: 1. "Não pode votar" (Idade < 16) 2. "Voto Facultativo" (Idade entre 16 e 17 OU acima de 70) 3. "Voto Obrigatório" (Idade entre 18 e 70) 4. "Idade Inválida" (Valores negativos ou não numéricos)

Instruções: - Use const idade = 25; (ou qualquer valor para testar). - Utilize operadores lógicos como && e ||. - Formate a saída de forma amigável no console.

O que entregar?

  • O arquivo .js com a lógica completa.
  • Um pequeno relatório (ou comentário no código) explicando qual operador lógico você usou para a condição de "Voto Facultativo" e por quê.

Projeto 04 - Cronômetro Regressivo Lógico 🏗️

Objetivo: Aplicar laços de repetição para criar uma simulação de contagem regressiva e controle de fluxo.

O Desafio

Você deve criar um cronômetro que conte de 10 até 0 (explosão/lançamento).

  1. Utilize um laço for ou while para fazer a contagem regressiva.
  2. A cada número, exiba no console: "Lançamento em: [número]...".
  3. Quando chegar no 0, em vez do número, exiba uma mensagem especial: "DECOLAR! 🚀 Foguete lançado com sucesso!".
  4. Bônus: Adicione uma mensagem especial para quando o cronômetro estiver na metade (5): "Sistemas prontos... Metade do tempo restante!".

O que entregar?

  • O arquivo .js com o código do cronômetro funcional.
  • Um print do console mostrando a sequência de contagem e as mensagens especiais de decolagens.

Projeto 05 - Calculadora Geométrica 📐

Objetivo: Organizar a lógica de cálculos matemáticos dentro de funções reutilizáveis.

O Desafio

Você deve criar um script que contenha três funções principais: 1. calcularAreaQuadrado(lado): Retorna a área de um quadrado. 2. calcularAreaRetangulo(base, altura): Retorna a área de um retângulo. 3. calcularAreaCirculo(raio): Retorna a área de um círculo (Use 3.14 como valor de PI).

Instruções: - Chame as três funções passando valores de teste. - Exiba os resultados no console de forma organizada, por exemplo: "A área do círculo com raio 5 é: 78.5".

O que entregar?

  • O arquivo .js contendo as três funções e as chamadas de teste.
  • Um breve comentário no código explicando a vantagem de usar funções em vez de fazer os cálculos diretamente no código principal.

Projeto 06 - Sistema de Cadastro de Alunos 🎓

Objetivo: Manipular coleções de dados complexos (arrays de objetos) e realizar operações de busca e listagem.

O Desafio

Você deve criar um pequeno sistema para gerenciar as notas de uma turma.

  1. Crie um array turma contendo 4 objetos "Aluno".
  2. Cada aluno deve ter: nome (string) e media (number).
  3. Crie uma função que percorra o array e exiba apenas o nome dos alunos que estão aprovados (média maior ou igual a 7).
  4. Ao final, use o método .push() para adicionar um novo aluno à turma e repita a listagem de aprovados.

O que entregar?

  • O arquivo .js com a estrutura de dados e as funções de listagem.
  • Um print do console mostrando os nomes dos alunos aprovados antes e depois da adição do novo aluno.

Projeto 07 - Biblioteca Modular de Mensagens 🧩

Objetivo: Praticar a criação e o consumo de módulos ES6 em um pequeno projeto organizado.

O Desafio

Você deve criar um mini sistema de logs (mensagens) dividido em módulos.

  1. Arquivo logger.js:

    • Deve exportar uma variável prefixo = "[LOG]".
    • Deve exportar uma função logInfo(msg) que exiba no console: prefixo + " INFO: " + msg.
    • Deve exportar default uma função logErro(msg) que exiba no console: prefixo + " ERRO: " + msg.

  2. Arquivo app.js:

    • Importe as funções do módulo logger.js.
    • Chame a função de informação passando "Sistema iniciado...".
    • Chame a função de erro passando "Falha na conexão!".

O que entregar?

  • Os arquivos logger.js e app.js.
  • Um print do terminal mostrando as mensagens formatadas saindo no console após a execução.

Projeto 08 - Manipulador de Identidade 🌳

Objetivo: Praticar a seleção e a alteração de atributos e conteúdos do DOM.

O Desafio

Crie um cartão de perfil simples em HTML.

  1. O cartão deve ter uma imagem (vazia ou placeholder), um nome (h2) e uma profissão (p).
  2. Crie um botão "Mudar Perfil".
  3. Quando o botão for clicado, o JavaScript deve:
    • Selecionar o h2 e mudar o nome para "Ricardo Prates".
    • Selecionar o p e mudar a profissão para "Desenvolvedor Full Stack".
    • Selecionar a imagem e mudar o src para uma URL de avatar real.

O que entregar?

  • O arquivo .js com as seleções e alterações.
  • O arquivo .html simples com os elementos e o ID correto para seleção.
  • Um print do "antes e depois" do cartão de perfil.

Projeto 09 - Galeria Interativa 📸

Objetivo: Implementar eventos de clique e alteração de atributos do DOM para criar uma galeria.

O Desafio

Crie uma galeria de fotos simples com controle de zoom.

  1. No HTML, coloque uma imagem principal (img) com um ID.
  2. Crie dois botões: "Aumentar" e "Diminuir".
  3. No JavaScript:
    • Capture os cliques nos botões.
    • Ao clicar em "Aumentar", mude a largura da imagem para 500px.
    • Ao clicar em "Diminuir", mude a largura da imagem para 250px.
    • Adicione uma transição suave via JavaScript (mude o estilo transition).

O que entregar?

  • Os arquivos HTML e JS.
  • Um vídeo curto ou print da tela mostrando a imagem mudando de tamanho ao clicar nos botões.

Projeto 10 - Semáforo Interativo 🚥

Objetivo: Manipular cores e classes CSS baseando-se em eventos para simular um sistema real.

O Desafio

Você deve criar um semáforo digital simples.

  1. Crie três divs redondas no seu HTML (Vermelho, Amarelo, Verde), todas inicialmente "apagadas" (cinzas).
  2. Crie três botões: "Parar", "Atenção" e "Siga".
  3. No JavaScript:
    • Quando clicar em "Parar", a luz vermelha deve ganhar a cor de fundo vermelha e as outras devem ficar cinzas.
    • Quando clicar em "Atenção", a luz amarela deve acender e as outras apagar.
    • Quando clicar em "Siga", a luz verde deve acender e as outras apagar.
  4. Dica: Crie uma classe .acesa no CSS e use o JavaScript para adicioná-la ao elemento correto e removê-la dos outros.

O que entregar?

  • O arquivo .html e .js funcionando.
  • Um print da tela mostrando cada uma das três fases do semáforo (Verde, Amarelo e Vermelho).

Projeto 11 - Feed de Notícias Dinâmico 📜

Objetivo: Praticar a geração de conteúdo HTML a partir de um array de objetos.

O Desafio

Você deve criar um simulador de feed de notícias.

  1. Crie um array noticias com pelo menos 3 objetos. Cada objeto deve ter: titulo, resumo e autor.
  2. Crie um container <section id="feed"></section> no HTML.
  3. No JavaScript, crie uma função renderizarFeed() que:
    • Limpe o conteúdo atual da section #feed.
    • Percorra o array de notícias.
    • Gere um "article" para cada notícia usando Template Strings.
    • O título deve ser um <h3>, o resumo um <p> e o autor um <span> em itálico.
  4. Adicione um botão "Adicionar Notícia" que, quando clicado, insira uma nova notícia fixa no array e chame a função renderizarFeed() novamente para atualizar a tela.

O que entregar?

  • O código HTML e JS.
  • Um print da tela mostrando o feed com as notícias iniciais e após o clique no botão de adicionar.

Projeto 12 - App de Previsão do Tempo 🌤️

Objetivo: Consumir uma API real e exibir os dados dinamicamente no DOM.

O Desafio

Você deve criar um mini app que busca o clima de uma cidade.

  1. Crie um input de texto para o nome da cidade e um botão de busca.
  2. No JavaScript, ao clicar no botão, utilize a Fetch API para buscar dados de clima (você pode usar a API gratuita OpenWeatherMap ou o serviço HG Brasil Weather).
  3. Requisitos:
    • Enquanto a requisição acontece, mostre o texto "Buscando..." na tela.
    • Quando os dados chegarem, exiba: Temperatura Atual, Descrição (ex: Ensolarado) e a Humidade.
    • Se a cidade não existir, exiba um alerta: "Cidade não encontrada!".

O que entregar?

  • O arquivo .js com a lógica do fetch.
  • O arquivo .html com a estrutura e estilos básicos.
  • Um print da tela mostrando o resultado da busca para uma cidade real (ex: "São Paulo").

Projeto 13 - Validador de CEP com Tratamento de Erro 🛡️

Objetivo: Implementar uma busca assíncrona com estados de carregamento e captura de falhas.

O Desafio

Crie um buscador de endereços via CEP utilizando a API do ViaCEP (https://viacep.com.br/ws/CEP_AQUI/json/).

  1. Interface: Um input para o CEP e um botão "Cofirmar".
  2. Lógica:
    • Ao clicar, exiba "Buscando..." na tela.
    • Se o CEP não for encontrado ou estiver no formato errado, mostre uma mensagem de erro clara em vermelho (ex: "CEP inválido ou não encontrado").
    • Se o CEP for encontrado, mostre a Rua, Bairro e Cidade.
  3. Segurança: Use try/catch para capturar erros de rede e a propriedade .ok para validar a resposta.

O que avaliar?

  • Exibição correta da mensagem de "Carregando".
  • Tratamento de erro para CEPs inexistentes.
  • Código limpo usando async/await.

Projeto 14 - Simulador de Carregamento de Dados ⏳

Objetivo: Dominar o encadeamento de promessas e o uso de timers para simular processos reais.

O Desafio

Você deve criar um sistema que simula o carregamento de um perfil de usuário e suas fotos.

  1. Função getPerfil(): Retorna uma Promise que resolve em 1.5s com o objeto { id: 1, nome: "Ana" }.
  2. Função getFotos(id): Recebe o ID e retorna uma Promise que resolve em 2s com um array de 3 URLs de fotos.
  3. A Lógica:
    • No JavaScript, chame getPerfil().
    • Quando o perfil chegar, use o ID dele para chamar getFotos(id).
    • Exiba no console (ou no DOM) o nome da usuária e a quantidade de fotos encontradas.
    • Dica: Tente fazer isso usando primeiro .then() encadeado e depois refatore para async/await.

O que entregar?

  • O arquivo .js com as funções e o fluxo de execução.
  • Um print do terminal (ou console do navegador) mostrando os logs aparecendo nos tempos corretos.

Projeto 15 - Refatoração para Código Moderno 🚀

Objetivo: Aplicar as funcionalidades do ES6+ para limpar e otimizar um código legado.

O Desafio

Você recebeu um código escrito em estilo antigo. Sua tarefa é refatorá-lo:

  1. Troca de Variáveis: Mude todos os var para let ou const (priorize const).
  2. Arrow Functions: Transforme todas as funções nomeadas em Arrow Functions.
  3. Desestruturação: Onde houver acesso a props.nome ou data.id, use desestruturação.
  4. Métodos de Array: Substitua loops for tradicionais por .map(), .filter() ou .forEach().
  5. Spread: Se houver necessidade de clonar um objeto para mudar uma propriedade, use o operador ....

O que avaliar?

  • O código funciona exatamente igual após a refatoração?
  • O código ficou visivelmente menor e mais legível?
  • Uso correto dos novos métodos de array sem introduzir bugs.

Projeto 16 - Dashboard Integrado de Dados 🏆

Objetivo: Consolidar todos os conceitos de JavaScript Fundamentos e DOM em um único produto final.

O Tema

Desenvolva uma aplicação web que consuma uma API pública e ofereça uma interface interativa para visualização e manipulação dos dados capturados.

Requisitos Mínimos

  1. Integração Assíncrona: O uso da Fetch API com async/await é obrigatório.
  2. Manipulação Dinâmica: Os dados devem ser transformados em elementos de interface (cards, tabelas, etc.) dinamicamente sem recarregar a página.
  3. Filtros e Buscas: Deve haver pelo menos um campo de busca ou filtro que altere o que é exibido em tempo real.
  4. Tratamento de Estados: Exibir mensagens amigáveis de "Loading" e "Error".
  5. Modularização (ES6 Modules): Separar o código em arquivos distintos usando import e export.
  6. UX/UI Profissional: O design deve ser limpo, utilizando CSS moderno (Flexbox/Grid).

Entrega ✨

Seu repositório deve conter: - Um arquivo README.md detalhado com prints do projeto. - Código bem comentado e organizado em pastas (/js, /css, /assets). - Um link para o projeto rodando (GitHub Pages, Vercel ou Netlify).

Boa sorte e mostre o seu talento! 🚀🚀🚀

Quizzes

🧠 Quizzes de Fixação

Lista completa das 20 unidades de quizzes organizadas em 5 módulos didáticos.

🧠 Quiz 01 – Introdução ao JavaScript 😊

  1. Qual é o conceito fundamental e objetivo principal de Introdução ao JavaScript 😊?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução ao JavaScript 😊?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Introdução ao JavaScript 😊, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Introdução ao JavaScript 😊?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Introdução ao JavaScript 😊 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Introdução ao JavaScript 😊, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Introdução ao JavaScript 😊?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Introdução ao JavaScript 😊 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Introdução ao JavaScript 😊 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Introdução ao JavaScript 😊 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 02 – Variáveis e Tipos 📊

  1. Qual é o conceito fundamental e objetivo principal de Variáveis e Tipos 📊?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Variáveis e Tipos 📊?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Variáveis e Tipos 📊, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Variáveis e Tipos 📊?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Variáveis e Tipos 📊 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Variáveis e Tipos 📊, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Variáveis e Tipos 📊?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Variáveis e Tipos 📊 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Variáveis e Tipos 📊 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Variáveis e Tipos 📊 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 03 – Condições 🧠

  1. Qual é o conceito fundamental e objetivo principal de Condições 🧠?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Condições 🧠?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Condições 🧠, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Condições 🧠?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Condições 🧠 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Condições 🧠, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Condições 🧠?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Condições 🧠 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Condições 🧠 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Condições 🧠 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 04 – Laços de Repetição 🔁

  1. Qual é o conceito fundamental e objetivo principal de Laços de Repetição 🔁?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Laços de Repetição 🔁?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Laços de Repetição 🔁, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Laços de Repetição 🔁?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Laços de Repetição 🔁 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Laços de Repetição 🔁, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Laços de Repetição 🔁?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Laços de Repetição 🔁 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Laços de Repetição 🔁 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Laços de Repetição 🔁 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 05 – Funções 🏗️

  1. Qual é o conceito fundamental e objetivo principal de Funções 🏗️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Funções 🏗️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Funções 🏗️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Funções 🏗️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Funções 🏗️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Funções 🏗️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Funções 🏗️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Funções 🏗️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Funções 🏗️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Funções 🏗️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 06 – Objetos e Arrays 📦

  1. Qual é o conceito fundamental e objetivo principal de Objetos e Arrays 📦?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Objetos e Arrays 📦?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Objetos e Arrays 📦, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Objetos e Arrays 📦?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Objetos e Arrays 📦 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Objetos e Arrays 📦, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Objetos e Arrays 📦?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Objetos e Arrays 📦 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Objetos e Arrays 📦 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Objetos e Arrays 📦 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 07 – Módulos JS 🧩

  1. Qual é o conceito fundamental e objetivo principal de Módulos JS 🧩?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Módulos JS 🧩?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Módulos JS 🧩, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Módulos JS 🧩?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Módulos JS 🧩 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Módulos JS 🧩, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Módulos JS 🧩?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Módulos JS 🧩 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Módulos JS 🧩 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Módulos JS 🧩 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 08 – Introdução ao DOM 🌐

  1. Qual é o conceito fundamental e objetivo principal de Introdução ao DOM 🌐?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Introdução ao DOM 🌐?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Introdução ao DOM 🌐, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Introdução ao DOM 🌐?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Introdução ao DOM 🌐 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Introdução ao DOM 🌐, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Introdução ao DOM 🌐?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Introdução ao DOM 🌐 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Introdução ao DOM 🌐 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Introdução ao DOM 🌐 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 09 – Eventos no DOM ⚡

  1. Qual é o conceito fundamental e objetivo principal de Eventos no DOM ⚡?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Eventos no DOM ⚡?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Eventos no DOM ⚡, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Eventos no DOM ⚡?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Eventos no DOM ⚡ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Eventos no DOM ⚡, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Eventos no DOM ⚡?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Eventos no DOM ⚡ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Eventos no DOM ⚡ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Eventos no DOM ⚡ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 10 – Estilos e Classes no DOM 🎨

  1. Qual é o conceito fundamental e objetivo principal de Estilos e Classes no DOM 🎨?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Estilos e Classes no DOM 🎨?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Estilos e Classes no DOM 🎨, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Estilos e Classes no DOM 🎨?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Estilos e Classes no DOM 🎨 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Estilos e Classes no DOM 🎨, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Estilos e Classes no DOM 🎨?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Estilos e Classes no DOM 🎨 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Estilos e Classes no DOM 🎨 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Estilos e Classes no DOM 🎨 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 11 – Templates e Listas Dinâmicas 📜

  1. Qual é o conceito fundamental e objetivo principal de Templates e Listas Dinâmicas 📜?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Templates e Listas Dinâmicas 📜?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Templates e Listas Dinâmicas 📜, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Templates e Listas Dinâmicas 📜?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Templates e Listas Dinâmicas 📜 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Templates e Listas Dinâmicas 📜, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Templates e Listas Dinâmicas 📜?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Templates e Listas Dinâmicas 📜 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Templates e Listas Dinâmicas 📜 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Templates e Listas Dinâmicas 📜 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 12 – Requisições e Consumo de APIs 🌐

  1. Qual é o conceito fundamental e objetivo principal de Requisições e Consumo de APIs 🌐?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Requisições e Consumo de APIs 🌐?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Requisições e Consumo de APIs 🌐, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Requisições e Consumo de APIs 🌐?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Requisições e Consumo de APIs 🌐 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Requisições e Consumo de APIs 🌐, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Requisições e Consumo de APIs 🌐?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Requisições e Consumo de APIs 🌐 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Requisições e Consumo de APIs 🌐 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Requisições e Consumo de APIs 🌐 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 13 – Tratamento de Erros e Async 🛡️

  1. Qual é o conceito fundamental e objetivo principal de Tratamento de Erros e Async 🛡️?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Tratamento de Erros e Async 🛡️?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Tratamento de Erros e Async 🛡️, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Tratamento de Erros e Async 🛡️?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Tratamento de Erros e Async 🛡️ atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Tratamento de Erros e Async 🛡️, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Tratamento de Erros e Async 🛡️?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Tratamento de Erros e Async 🛡️ estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Tratamento de Erros e Async 🛡️ com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Tratamento de Erros e Async 🛡️ deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 14 – Promessas e Event Loop 🕒

  1. Qual é o conceito fundamental e objetivo principal de Promessas e Event Loop 🕒?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Promessas e Event Loop 🕒?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Promessas e Event Loop 🕒, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Promessas e Event Loop 🕒?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Promessas e Event Loop 🕒 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Promessas e Event Loop 🕒, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Promessas e Event Loop 🕒?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Promessas e Event Loop 🕒 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Promessas e Event Loop 🕒 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Promessas e Event Loop 🕒 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 15 – Novidades do ES6+ 🚀

  1. Qual é o conceito fundamental e objetivo principal de Novidades do ES6+ 🚀?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Novidades do ES6+ 🚀?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Novidades do ES6+ 🚀, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Novidades do ES6+ 🚀?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Novidades do ES6+ 🚀 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Novidades do ES6+ 🚀, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Novidades do ES6+ 🚀?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Novidades do ES6+ 🚀 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Novidades do ES6+ 🚀 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Novidades do ES6+ 🚀 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 16 – Projeto Final: Dashboard Interativo 🏆

  1. Qual é o conceito fundamental e objetivo principal de Projeto Final: Dashboard Interativo 🏆?
  2. ( ) Reduzir a segurança do sistema sem análise prévia.
  3. (x) Garantir estruturação, eficiência e qualidade no desenvolvimento de software.
  4. ( ) Omitir o tratamento de erros em produção.

  5. ( ) Bloquear a execução de rotinas assíncronas.

  6. Qual benefício direto é obtido ao aplicar as melhores práticas de Projeto Final: Dashboard Interativo 🏆?

  7. (x) Maior manutenibilidade, legibilidade, desacoplamento e desempenho.
  8. ( ) Aumento indeterminado no tempo de latência das chamadas à API.
  9. ( ) Incompatibilidade com os compiladores e interpretadores modernos.

  10. ( ) Impedir a criação de testes automatizados.

  11. Em relação ao fluxo de execução e arquitetura em Projeto Final: Dashboard Interativo 🏆, assinale a alternativa correta:

  12. ( ) A lógica opera sem validação de entradas ou saídas.
  13. (x) O fluxo de dados segue validação rigorosa de entrada, processamento coeso e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de visualização.

  15. ( ) É proibido desacoplar dependências entre módulos.

  16. Qual é a conduta recomendada para manter a legibilidade do código em Projeto Final: Dashboard Interativo 🏆?

  17. (x) Seguir convenções de nomenclatura limpa, modularização e documentação clara.
  18. ( ) Utilizar variáveis globais sem restrição de acesso.
  19. ( ) Substituir nomes descritivos por identificadores de um único caractere.

  20. ( ) Desabilitar a checagem de tipos e validação estática.

  21. Como comprovar que a implementação de Projeto Final: Dashboard Interativo 🏆 atingiu os critérios de aceitação?

  22. ( ) Avaliando visualmente a quantidade total de linhas de código.
  23. (x) Executando suítes de testes unitários e de integração automatizados com cobertura adequada.
  24. ( ) Verificando a paleta de cores do editor de texto.

  25. ( ) Omitindo os relatórios de execução de testes no CI/CD.

  26. Ao tratar exceções e cenários de falha em Projeto Final: Dashboard Interativo 🏆, o desenvolvedor deve:

  27. (x) Capturar erros específicos, registrar logs rastreáveis e fornecer mensagens claras.
  28. ( ) Silenciar todas as exceções com blocos vazios.
  29. ( ) Encerrar abruptamente o processo do servidor sem notificação.

  30. ( ) Modificar variáveis de ambiente do sistema operacional.

  31. Qual o risco de ignorar as convenções e padrões recomendados em Projeto Final: Dashboard Interativo 🏆?

  32. (x) Acúmulo de débito técnico, vulnerabilidades de segurança e degradação de desempenho.
  33. ( ) Formatação automática de arquivos na IDE.
  34. ( ) Aumento espontâneo da velocidade do barramento de memória.

  35. ( ) Exclusão de arquivos de configuração do projeto.

  36. O princípio da responsabilidade única aplicado a Projeto Final: Dashboard Interativo 🏆 estabelece que:

  37. (x) Cada componente ou módulo deve ter apenas uma única razão para mudar.
  38. ( ) Todas as funções do projeto devem residir no mesmo arquivo-fonte.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os testes automatizados devem ser deletados antes da compilação de produção.

  41. Para integrar Projeto Final: Dashboard Interativo 🏆 com outros serviços e módulos do ecossistema, deve-se:

  42. (x) Utilizar interfaces bem definidas, abstrações e contratos claros (APIs/DTOs).
  43. ( ) Acessar diretamente estruturas privadas internas de outros módulos.
  44. ( ) Trafegar dados confidenciais em texto puro sem criptografia.

  45. ( ) Desativar os protocolos de comunicação da rede.

  46. A documentação técnica referente a Projeto Final: Dashboard Interativo 🏆 deve conter obrigatoriamente:

  47. (x) Requisitos funcionais, arquitetura, exemplos práticos de uso e instruções de teste.
  48. ( ) Apenas a assinatura digital do autor.
  49. ( ) Uma lista aleatória de comandos de sistema operacional.
  50. ( ) Rascunhos não revisados de reuniões antigas.

🧠 Quiz 17 – Programação Assíncrona Avançada e Event Loop 🚀

  1. Qual o propósito principal de Programação Assíncrona Avançada e Event Loop 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Programação Assíncrona Avançada e Event Loop 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Programação Assíncrona Avançada e Event Loop 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Programação Assíncrona Avançada e Event Loop 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Programação Assíncrona Avançada e Event Loop 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Programação Assíncrona Avançada e Event Loop 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Programação Assíncrona Avançada e Event Loop 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Programação Assíncrona Avançada e Event Loop 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Programação Assíncrona Avançada e Event Loop 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Programação Assíncrona Avançada e Event Loop 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 18 – Manipulação de DOM de Alta Performance e Intersection Observer 🚀

  1. Qual o propósito principal de Manipulação de DOM de Alta Performance e Intersection Observer 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Manipulação de DOM de Alta Performance e Intersection Observer 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Manipulação de DOM de Alta Performance e Intersection Observer 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Manipulação de DOM de Alta Performance e Intersection Observer 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Manipulação de DOM de Alta Performance e Intersection Observer 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Manipulação de DOM de Alta Performance e Intersection Observer 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Manipulação de DOM de Alta Performance e Intersection Observer 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Manipulação de DOM de Alta Performance e Intersection Observer 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Manipulação de DOM de Alta Performance e Intersection Observer 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Manipulação de DOM de Alta Performance e Intersection Observer 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 19 – Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀

  1. Qual o propósito principal de Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Gerenciamento de Memória, Closures e Prevenção de Leaks 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

🧠 Quiz 20 – Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀

  1. Qual o propósito principal de Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀?
  2. ( ) Reduzir o espaço em disco sem validação.
  3. (x) Garantir estruturação, eficiência e robustez no processamento do sistema.
  4. ( ) Desativar os testes unitários automatizados.

  5. ( ) Substituir a documentação técnica por código legado.

  6. Qual benefício direto é obtido ao aplicar os padrões de Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀?

  7. (x) Maior manutenibilidade, legibilidade e desempenho.
  8. ( ) Aumento no tempo de resposta das chamadas à API.
  9. ( ) Incompatibilidade com compiladores modernos.

  10. ( ) Bloqueio da execução assíncrona.

  11. Em relação à arquitetura de Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀, assinale a alternativa correta:

  12. ( ) O módulo opera de forma totalmente isolada sem interface de dados.
  13. (x) O fluxo de dados segue validação de entrada, processamento e verificação de saída.
  14. ( ) As regras de negócio devem ser codificadas diretamente na camada de apresentação.

  15. ( ) Não há suporte para testes de integração.

  16. Qual a melhor prática ao implementar Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀?

  17. (x) Manter o código coeso, desacoplado e devidamente documentado.
  18. ( ) Utilizar variáveis globais sem controle de acesso.
  19. ( ) Omitir o tratamento de erros em produção.

  20. ( ) Desabilitar a checagem de tipos estáticos.

  21. Como verificar se a implementação de Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀 atingiu os objetivos de qualidade?

  22. ( ) Observando o tamanho do arquivo fonte em bytes.
  23. (x) Executando testes automatizados de cobertura e benchmarks de desempenho.
  24. ( ) Verificando a cor do tema do editor de código.

  25. ( ) Aguardando reclamações dos usuários finais em produção.

  26. Ao lidar com exceções em Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀, deve-se:

  27. (x) Capturar falhas específicas e fornecer mensagens informativas com rastreamento.
  28. ( ) Ignorar todos os erros com blocos vazios try-catch.
  29. ( ) Encerrar o sistema imediatamente sem log.

  30. ( ) Modificar o sistema operacional hospedeiro.

  31. Qual o impacto do mau uso dos conceitos de Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀?

  32. (x) Degradação de desempenho, vulnerabilidades de segurança e débito técnico.
  33. ( ) Redução automática no uso de memória RAM.
  34. ( ) Melhoria na taxa de transferência de dados da rede.

  35. ( ) Formatação automática de arquivos Markdown.

  36. O princípio da responsabilidade única aplicado a Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀 determina que:

  37. (x) Cada classe ou função deve ter apenas uma razão para mudar.
  38. ( ) Todas as funções do sistema devem residir no mesmo arquivo.
  39. ( ) O banco de dados deve ser executado na mesma thread do frontend.

  40. ( ) Os comentários de código devem ser removidos antes da compilação.

  41. Na integração de Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀 com outros componentes do ecossistema:

  42. (x) Deve-se utilizar interfaces bem definidas e contratos claros (APIs/DTOs).
  43. ( ) Deve-se utilizar acesso direto às estruturas privadas de outros módulos.
  44. ( ) É proibido transmitir dados pela rede.

  45. ( ) Todos os dados devem ser trafegados em formato de texto bruto desformatado.

  46. A documentação técnica referente a Projeto Capstone: Aplicação Web Vanilla SPA Autônoma 🚀 deve conter:

  47. (x) Requisitos, diagramas de fluxo, exemplos de uso e instruções de teste.
  48. ( ) Apenas o nome do autor do código.
  49. ( ) Lista de reprodução de músicas recomendadas.
  50. ( ) Histórico completo de conversas do suporte.

Slides

Configuração

Configuração do Ambiente ⚙️

Prepare seu computador para desenvolver com JavaScript.

Setup 01: Android Studio 🤖

O Android Studio é a IDE oficial para o desenvolvimento Android.

1. Requisitos de Sistema

  • RAM: Mínimo 8GB (Sugerido 16GB+).
  • Espaço: Mínimo 10GB para IDE + SDKs.
  • Processador: Intel Core i5 ou equivalente.

2. Instalação

  1. Acesse o site oficial: developer.android.com/studio.
  2. Baixe a versão mais recente para o seu Sistema Operacional.
  3. Execute o instalador e escolha a opção "Standard" na configuração inicial.

3. Configurando o SDK

  • Após a instalação, vá em Settings > Languages & Frameworks > Android SDK.
  • Certifique-se de que a versão mais recente do Android (estável) esteja instalada.
  • Na aba SDK Tools, instale o "Android Emulator" e o "Intel x86 Emulator Accelerator (HAXM)" se estiver no Windows com Intel.

4. Criando um Emulador (AVD)

  1. Abra o Device Manager.
  2. Clique em Create Device.
  3. Escolha um dispositivo (ex: Pixel 7).
  4. Selecione uma imagem de sistema (ex: Level 34 - Android 14).
  5. Finalize e clique no "Play" para iniciar o celular virtual.

5. Solução de Problemas ⚠️

  • VT-x is disabled: Você precisa habilitar a virtualização na BIOS do seu computador.
  • Studio muito lento: Adicione a pasta do projeto e as pastas do Android SDK nas exclusões do seu Antivírus.

Setup 02: Xcode (iOS Foundation) 🍎

O Xcode é a ferramenta necessária para compilar e testar apps iOS.

Important

O Xcode requer um computador Mac (macOS).

1. Instalação

  1. Abra a App Store no seu Mac.
  2. Pesquise por Xcode.
  3. Clique em Obter/Instalar.
  4. Após o download, abra o Xcode para carregar os componentes adicionais do macOS.

2. Configurando Simuladores

  1. Vá em Settings > Platforms.
  2. Verifique se o componente "iOS" está baixado.
  3. Se não estiver, clique em "GET" para baixar a versão mais estável.

3. Comandos de Linha (CLI)

Para que ferramentas de automação funcionem, você precisa instalar os Command Line Tools: 

xcode-select --install

4. Opcional: CocoaPods

Muitos projetos iOS antigos ainda usam CocoaPods para dependências: 

sudo gem install cocoapods

5. Solução de Problemas ⚠️

  • Espaço em Disco: O Xcode é muito grande. Garanta pelo menos 40GB de espaço livre para ele e os simuladores.
  • Build Lento: Use simuladores de modelos mais simples (ex: iPhone SE) para poupar memória RAM se necessário.

Sobre

Sobre o Curso

🎓 JavaScript Fundamentos e DOM

Este curso foi projetado para capacitar iniciantes a desenvolverem interatividade em páginas web utilizando JavaScript moderno. Focamos na transição do pensamento lógico básico para a manipulação avançada da interface do usuário (DOM) e integração com serviços externos.

🎯 Objetivos do Curso

  • Pensamento Lógico --- Compreender as estruturas fundamentais da programação: variáveis, condições, laços e funções.

  • :material-dom: Domínio do DOM --- Aprender a manipular o Document Object Model para criar experiências dinâmicas no navegador.

  • Assincronismo --- Dominar Promises e Async/Await para lidar com fluxos de dados e integrações com APIs reais.

  • Desenvolvimento Web II --- Preparar o aluno para o próximo nível do desenvolvimento web, integrando lógica e design.

📚 O Que Você Vai Aprender

Módulo 1 – Fundamentos da Linguagem

  • Variáveis (let, const) e Tipos Primitivos
  • Estruturas de Controle (if/else, switch)
  • Laços de Repetição (for, while)
  • Funções Tradicionais e Arrow Functions
  • Manipulação de Objetos e Arrays
  • Organização de Código com Módulos (Import/Export)

Módulo 2 – DOM e Interatividade

  • Seleção e Manipulação de Elementos HTML
  • Escuta e Resposta a Eventos de Usuário
  • Validação de Formulários no Client-side
  • Persistência com LocalStorage e Cookies
  • Programação Assíncrona e Fetch API
  • Consumo de Dados via JSON

🛠️ Metodologia

Foco 100% prático e orientado a mini-projetos semanais. Cada aula introduz um conceito que é imediatamente aplicado em um desafio real, terminando com um projeto integrador que consolida todos os conhecimentos.

Pronto para dar vida à Web? Começar Agora

Roadmap do Projeto: JavaScript Fundamentos e DOM 🚀

Este documento rastreia a evolução do curso.

✅ Fase 1: Planejamento (Concluído)

  • Definição Syllabus (16 Aulas)
  • Estrutura focada em Lógica e DOM
  • Configuração MkDocs Material

✅ Fase 2: Conteúdo Base (Concluído)

  • Criação das 16 Aulas (Markdown)
  • Criação dos 16 Quizzes (HTML)
  • Criação dos 16 Conjuntos de Exercícios
  • Criação dos 16 Slides (RevealJS)

✅ Fase 3: Projetos e UX (Concluído)

  • Definição dos 16 Projetos práticos
  • Integração com TermynalJS para exemplos de código
  • Diagramação Mermaid de fluxos lógicos

🚀 Fase 4: Lançamento e Manutenção

  • Deploy GitHub Pages (GitHub Actions)
  • Atualização para ES2024+
  • Inclusão de frameworks leves (Alpine.js/HTMX) como extras

Status Atual: Finalizado / Manutenção Última Atualização: 20/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de JavaScript Fundamentos e DOM. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.

  • Slides

    • Acompanhe o conteúdo teórico com slides dinâmicos.

  • Exercícios

    • Pratique a lógica de programação e manipulação do DOM.

  • Quizzes

    • Valide seu aprendizado com testes rápidos por aula.

  • Projetos

    • Construa aplicações interativas reais para seu portfólio.

  • Ambiente

    • Guias de instalação (VS Code, Extensões, Navegador).

🏷️ Índice de Tags Didáticas

Navegue pelas aulas, exercícios e projetos do curso organizados por temas, tecnologias e conceitos fundamentais:

tags.md:145-167/name