Code Lab

Se você está estudando base, fechando lacuna ou revisando para entrevista, esta é a área prática da referência.

Menos teoria solta, mais teste real: você escreve código, roda no navegador e enxerga o comportamento de estruturas, representação de dados e algoritmos sem sair da trilha.

1. Playground para testar ideia rápido

Use esta parte quando você quiser:

• validar um raciocínio antes de levar para um projeto real
• brincar com arrays, loops, funções e estruturas pequenas
• comparar um exemplo em JavaScript com um exemplo em Python
• revisar sintaxe sem sair do mesmo fluxo de estudo

Playground de código

Escreva, rode e veja o resultado na hora. JavaScript roda localmente. Python usa Pyodide e pode levar alguns segundos na primeira vez.

Rodar Restaurar exemplo Limpar saída

Saída Pronto para executar.

Dica: use console.log() no JavaScript e print() no Python.

Como isso funciona no GitHub Pages

Este laboratório foi feito para o modelo atual do site: tudo estático. JavaScript roda no browser, Python roda com Pyodide e os visualizadores são client-side. Sem backend, sem judge, sem complicação desnecessária.

2. Representação dos dados sem fumaça

Muita gente trava em algoritmo porque ainda não enxergou direito o dado por baixo:

• byte com e sem sinal
• caractere como número
• hexadecimal
• decimal virando binário
• memória organizada em blocos

É aqui que você vê, por exemplo, que "A" tem código 65, ou 0x41, ou 01000001.

Bits, bytes e ASCII na prática

Digite um número e veja como ele aparece em byte, hexadecimal, binário e memória. É aqui que "A = 65 = 0x41 = 01000001" fica claro de verdade.

I/O

Valor decimal Caractere ASCII

View

Byte sem sinal 65

Byte com sinal 65

Hexadecimal 0x41

Caractere A

Binary

8 bits	01000001
16 bits	00000000 01000001
32 bits	00000000 00000000 00000000 01000001

Memória em 4 bytes

Conversão decimal -> binário

Para consultar tudo, abra a Tabela ASCII.

3. Algoritmos com movimento, não só nome decorado

Na teoria parece simples. Na prática, o que faz a diferença é ver:

• quem compara com quem
• quando acontece troca
• quando o espaço de busca diminui
• como BFS, DFS e Dijkstra caminham de forma diferente

Busca e ordenação passo a passo

Escolha um algoritmo, use um array pequeno e veja o movimento acontecendo. Isso ajuda muito a entender comparação, troca, deslocamento e redução do espaço de busca.

Array Quantidade Alvo Velocidade

Animar Gerar array Resetar

Leitura do passo

BFS, DFS e Dijkstra visualizados

Mesmo num grafo pequeno já dá para sentir a diferença entre visitar por camadas, aprofundar um caminho e calcular o menor caminho.

Velocidade

Animar Resetar

Ordem de visita

Distâncias atuais

Como usar isso para estudar de verdade

Tipos de Dados Use junto com a parte de bits, bytes, ASCII e representação.

Lógica de Programação Ótima sequência para reforçar decisão, repetição e decomposição.

Estruturas de Dados Combine com filas, pilhas, arrays e grafos para fechar a base.

Algoritmos Depois do visual, volta para a referência e aprofunda complexidade e implementação.

Maneira inteligente de usar o laboratório

1. leia a referência primeiro
2. teste um caso pequeno aqui
3. mude os valores de entrada
4. force erro, caso de borda e caso feliz
5. só depois leve isso para projeto ou exercício maior

É assim que a base deixa de ser “conteúdo visto” e vira conhecimento utilizável mesmo.