Na aula anterior, entendemos como funcionam os eventos, os event handlers e o objeto event.

Agora vamos responder uma dúvida muito comum:

Quando exatamente o JavaScript pode começar a manipular o DOM?

Para isso, precisamos entender dois eventos importantes:

  • DOMContentLoaded
  • load

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Entender o processo de carregamento da página
  • Saber a diferença entre DOMContentLoaded e load
  • Escolher o evento certo para cada situação
  • Evitar erros de DOM não carregado

O que acontece quando a página carrega?

Quando o navegador abre uma página, ele segue alguns passos:

  1. Carrega o HTML
  2. Constrói o DOM
  3. Carrega arquivos externos (imagens, CSS, fontes)
  4. Finaliza o carregamento

Os eventos DOMContentLoaded e load acontecem em momentos diferentes desse processo.

O evento DOMContentLoaded

O DOMContentLoaded é disparado quando:

  • Todo o HTML foi carregado
  • O DOM foi construído

Ele não espera:

  • Imagens
  • CSS
  • Fontes

Exemplo com DOMContentLoaded

 
  document.addEventListener("DOMContentLoaded", function () 
  { 
    const titulo = document.getElementById("titulo"); 
    titulo.textContent = "DOM pronto!"; 
  }); 

Aqui garantimos que o elemento já existe no DOM.

O evento load

O evento load é disparado quando:

  • HTML foi carregado
  • DOM foi construído
  • Imagens foram carregadas
  • CSS foi carregado
  • Fontes foram carregadas

Ou seja: quando tudo está completamente pronto.

Exemplo com load

 window.addEventListener("load", function () { console.log("Página totalmente carregada"); }); 
 console.log("Página totalmente carregada"); // Saída será exibida após todos os recursos carregarem 

Qual devo usar?

Na maioria dos casos:

Use DOMContentLoaded.

Ele é mais rápido e suficiente para:

  • Manipular DOM
  • Adicionar eventos
  • Criar elementos dinamicamente

Quando usar load?

Use load quando você precisa:

  • Saber o tamanho real de imagens
  • Trabalhar com canvas
  • Depender de fontes carregadas

E se o script estiver no final do HTML?

Se o script estiver antes de </body>, o DOM já estará carregado.

Nesse caso, muitas vezes nem é necessário usar eventos de carregamento.

Em projetos maiores, ainda é comum usar DOMContentLoaded por segurança.

Resumo comparativo

  • DOMContentLoaded → DOM pronto
  • load → tudo pronto
  • DOMContentLoaded é mais rápido
  • load é mais completo

Resumo da aula para nunca mais esquecer

  • DOMContentLoaded indica que o DOM está pronto
  • load espera todos os recursos
  • Use o evento certo para cada cenário
  • Evite manipular o DOM antes do carregamento
  • Essencial para evitar bugs silenciosos

Na próxima aula, vamos estudar os eventos de mouse em detalhes.


HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.


O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.


Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.


O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.


A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.