Exam Trainer Módulo 2 — Programação Web URI

Início

🎯 Como revisar o Módulo 2

📡

Cliente-Servidor

Entenda o ciclo Request/Response e as regras de DNS, cabeçalhos, verbos HTTP e JSON na prática.

⚡

DOM & Eventos

Aprenda a depurar códigos com seletores querySelector, criação de nós createElement e listeners.

🔗

Fetch & JSON

Valide strings JSON e envie verbos assíncronos (GET, POST, PUT, DELETE) com o terminal de rede.

💾

Armazenamento

Teste LocalStorage, SessionStorage e Cookies gerenciando chaves e valores diretamente.

🔒

Segurança

Simule a política CORS, vulnerabilidades XSS/CSRF e testes de autorização por papéis.

🏗️

Frameworks

Descubra como o estado reativo e o Virtual DOM aceleram páginas SPA em comparação ao JS Vanilla.

Tópico 1

Client-Server Architecture Quiz

Questão 1 de 7

✓ 0

📡 Simulador de Fluxo Request/Response

Clique no botão abaixo para ver o passo a passo sequencial de uma chamada HTTP de ponta a ponta na rede.

Cliente (Browser) dispara requisição: GET /api/users

Resolução DNS traduz domínio em IP e abre conexão TCP/TLS

Servidor recebe cabeçalhos HTTP e valida rota com Controller/Router

Controller consulta Banco de Dados e processa serialização em JSON

Servidor envia resposta 200 OK com o JSON de usuários de volta

Tópico 2

DOM Manipulation & Events Quiz

Questão 1 de 4

✓ 0

Exercício

🔧 Corrija o JavaScript DOM Quebrado

✍️ Instrução: Identifique e corrija os erros de APIs do DOM nos editores editáveis abaixo e clique em Validar.

#1 — Ouvinte de clique incorreto

⚠ Incorreto

// Corrija a sintaxe de seleção e adicione o listener de clique const botao = document.getElementByClass('btn-submit'); botao.onclick = function() { console.log('Clicado'); };

// Correção Recomendada:
const botao = document.querySelector('.btn-submit');
botao.addEventListener('click', () => {
  console.log('Clicado');
});

Erros corrigidos: (1) getElementByClass não existe. O correto para classes é querySelector('.nome-classe'). (2) Usar addEventListener separa a lógica e evita sobrescrita de propriedades inline.

#2 — Submissão de Formulário com Reload

⚠ Incorreto

// Capture o envio e extraia o valor do input corretamente sem recarregar document.querySelector('form').addEventListener('submit', function(e) { const emailVal = document.querySelector('#input-email').value(); console.log('Enviar para:', emailVal); });

// Correção Recomendada:
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // Evita recarregamento da página
  const emailVal = document.querySelector('#input-email').value; // Apenas .value, sem chamá-lo
  console.log('Enviar para:', emailVal);
});

Correções: (1) e.preventDefault() impede o comportamento padrão do form (recarregar). (2) .value é uma propriedade, não uma função; usá-lo como .value() gera um erro de execução.

Tópico 3

AJAX, Fetch & JSON Quiz

Questão 1 de 6

✓ 0

📄 Analisador e Validador de JSON

Digite ou edite o JSON abaixo para testar o parser do navegador em tempo real.

// O resultado da validação aparecerá aqui...

🌐 HTTP REST API Sandbox Lab

Escolha o verbo HTTP e envie chamadas API simuladas para testar o fluxo de rede do lado cliente.

// Logs de rede do simulador aparecerão aqui...

Tópico 4

Web Storage (LocalStorage) Quiz

Questão 1 de 3

✓ 0

💾 LocalStorage Playground Explorer

Salve chaves e valores no LocalStorage e manipule o banco de dados interno do navegador.

// Logs do playground aparecerão aqui...

Chaves Ativas no LocalStorage:

Tópico 5

Web Security & Roles Quiz

Questão 1 de 4

✓ 0

🔑 Painel de Simulação de Autorização (Roles)

Troque a função (Role) ativa e verifique quais privilégios de acesso o sistema concede em tempo de execução.

📖 Leitura de Dados Pessoais 🔓 Permitido

✍️ Edição de Postagens 🔒 Bloqueado

⚙️ Dashboard Admin (Gerência) 🔒 Bloqueado

Tópico 6

Frameworks & Reactivity Quiz

Questão 1 de 2

✓ 0

🏗️ Simulador de Estado Reativo vs Virtual DOM

Incrementando o estado, o framework calcula a árvore Virtual DOM comparando-a (diff) para re-renderizar apenas o necessário.

0 Clique para Mudar Estado

Página Renderizada (Contagem: 0)

// Log das alterações em tempo real do Virtual DOM...

Memorização

🃏 Flashcards do Módulo 2

Clique no cartão abaixo para revelar o gabarito. Use a barra de navegação para alternar entre os cartões.

Clique para Virar

document.querySelector()

DOM API

Busca e retorna o primeiro elemento no DOM que casa com o seletor CSS informado (ex: "#id" ou ".class").

1 / 10

Prática

✍️ Perguntas Dissertativas da Prova

Responda às questões e depois confronte com os gabaritos oficiais sugeridos para a segunda prova.

1 Explique a diferença de persistência entre LocalStorage e SessionStorage.

Gabarito Oficial: O LocalStorage persiste os dados sem data de validade definida (permanecem salvos no navegador do cliente mesmo se fechar a aba ou reiniciar a máquina). O SessionStorage limpa e apaga todas as chaves criadas assim que a sessão da aba correspondente é encerrada pelo usuário.

Desafio

🛠️ Desafio Prático: Consumo Assíncrono e DOM

Instruções do Desafio: Escreva um script completo no editor abaixo que selecione o elemento pontilhado com ID "target", configure um evento de clique que altere seu texto via textContent, dispare uma chamada fetch assíncrona, e salve o valor no localStorage. Clique em Validar Código para pontuar.

Critérios do Validador 0%

Escreva o script JavaScript no painel abaixo!

💻 app.js

👁️ Sandbox Executora

Simulado Geral

🧠 Simulado Completo: Módulo 2

Questão 1 de 9

✓ 0

Resumo

📋 Módulo 2 Quick Cheat Sheet

Método / Propriedade	Sintaxe Básica	Descrição Curta
`document.querySelector`	`document.querySelector('.class')`	Seleciona o primeiro nó correspondente ao seletor CSS.
`document.querySelectorAll`	`document.querySelectorAll('div')`	Seleciona todos os nós correspondentes retornando uma NodeList.
`document.createElement`	`document.createElement('div')`	Instancia um novo nó de elemento HTML na memória do navegador.
`.appendChild`	`pai.appendChild(filho)`	Insere um nó filho no final do fluxo interno do elemento pai.
`.textContent`	`el.textContent = "Olá"`	Define o texto de forma limpa, sanitizando contra injeção de HTML.
`.addEventListener`	`el.addEventListener('click', callback)`	Registra um manipulador de disparo para o evento selecionado.

Função / Verbo	Exemplo de Chamada	Significado Tecnológico
`fetch()`	`fetch('https://api.com/users')`	Dispara requisição HTTP assíncrona retornando Promise.
`async / await`	`const res = await fetch(...)`	Define funções assíncronas permitindo escrita sequencial.
`JSON.stringify`	`JSON.stringify(objeto)`	Serializa estruturas e objetos JS em strings de texto JSON.
`JSON.parse`	`JSON.parse(stringJson)`	Deserializa strings formatadas em JSON de volta para objetos.
`GET / POST`	`GET (Leitura) / POST (Criação)`	Verbos HTTP para buscar dados ou enviar payloads no Body.
`PUT / DELETE`	`PUT (Update) / DELETE (Remoção)`	Verbos HTTP para atualizar completos ou excluir recursos remotos.

Termo de Segurança	Escopo de Aplicação	Como se Prevenir / Resolver
`LocalStorage`	Persistência chave-valor de origem de longa duração.	Não guarde tokens sensíveis ou senhas descriptografadas.
`SessionStorage`	Persistência chave-valor associada estritamente à aba.	Ideal para fluxos temporários ou estados pontuais da sessão.
`Same-Origin Policy`	Restrição nativa que isola scripts de origens externas.	Forte barreira de sandbox ativa em todos os navegadores modernos.
`CORS`	Configuração de liberação de chamadas remotas no servidor.	Configurar cabeçalhos HTTP como `Access-Control-Allow-Origin`.
`XSS (Injeção de Scripts)`	Ataque de execução de código JS nocivo no browser alheio.	Use `textContent` e evite `innerHTML` sem sanitizar.
`Autenticação vs Autorização`	Identificação do cliente vs validação de permissões de acesso.	Controle por cookies `HttpOnly` ou tokens assinados.

Conceito de SPA	Vanilla JS	React / Vue.js / Angular
`Modelagem UI`	Imperativa (manipula nós um por um).	Declarativa (UI reage a alterações no estado).
`Velocidade DOM`	Lenta para atualizações massivas de nós.	Virtual DOM faz reconciliação cirúrgica performática.
`Vite / npm`	Configurações e dependências ad-hoc manuais.	Bundlers de build ultra-rápidos e gerência de pacotes NPM.
`Componentização`	Dificuldade em reuso de trechos dinâmicos.	Peças isoladas reutilizáveis com ciclo de vida.

Autoavaliação

✅ O que já domino no Módulo 2?

0 de 0 habilidades dominadas