Questão de Programação — Linguagens de programação — FGV 2024

JavaScript: Monitoramento de Redimensionamento da Janela

Gabarito: letra C. A alternativa C utiliza window.matchMedia para criar uma Media Query e adicionar um listener que dispara apenas quando a condição da media query muda – abordagem mais eficiente para dispositivos móveis, pois evita chamadas excessivas de eventos contínuos como o resize. As demais opções são inadequadas: A e B não monitoram mudanças contínuas, D não é um método válido e E, embora funcione, é menos eficiente em termos de performance.

A questão contextualiza a monitoração do tamanho da janela em dispositivos móveis, que possuem recursos limitados. O evento resize (alternativa E) é a forma mais comum, mas ele é disparado continuamente durante o redimensionamento, podendo sobrecarregar o dispositivo. A alternativa C oferece uma solução mais otimizada.

Alternativa A — ❌ Incorreta

O evento DOMContentLoaded é disparado uma única vez, quando o DOM é completamente carregado. Ele não monitora mudanças futuras no tamanho da janela. Serve para inicialização, não para redimensionamento.

Alternativa B — ❌ Incorreta

O evento load também é disparado uma única vez, após o carregamento completo da página (incluindo imagens e scripts). Não reage a redimensionamentos.

Alternativa C — ✅ Correta ⟵ GABARITO

window.matchMedia retorna um objeto MediaQueryList. Ao adicionar um listener com addEventListener('change', handler), a função é chamada apenas quando o resultado da media query muda (ex.: de true para false), e não a cada pixel de redimensionamento. Isso reduz significativamente a carga de processamento, tornando-a ideal para dispositivos móveis. Exemplo:

const mq = window.matchMedia('(min-width: 768px)');
mq.addEventListener('change', function(e) {
  if(e.matches) { /* ... */ }
});

Alternativa D — ❌ Incorreta

window.resize não é um método padrão do JavaScript. O método correto para disparar um redimensionamento programático seria window.resizeTo(width, height), mas ele não serve para monitorar mudanças. Não existe window.resize como função de monitoramento.

Alternativa E — ❌ Incorreta

window.addEventListener('resize', handler) é o método tradicional para monitorar redimensionamento. Funciona, mas dispara o evento em alta frequência durante o redimensionamento, o que pode causar lentidão em dispositivos móveis. Embora seja possível usar técnicas de debounce/throttle, a própria questão destaca a limitação de processamento, tornando a alternativa C mais adequada.

Resumo da comparação:

Gabarito: letra C.