Equivalente a $(document).ready em JavaScript puro

Introdução

Quando se trata de desenvolvimento web, é essencial ter uma compreensão sólida do JavaScript, uma das linguagens de programação mais populares para criar interatividade em websites.

Uma das funcionalidades-chave do JavaScript é o uso do evento $(document).ready(), que é amplamente utilizado para executar código JavaScript assim que o DOM (Document Object Model) é carregado.

Neste artigo, vamos explorar em detalhes como usar o $(document).ready() em JavaScript puro, discutir suas diferenças com o window.onload e também ver como o $(document).ready() pode ser usado em conjunto com a biblioteca jQuery.

O que é o $(document).ready() em JavaScript?

O $(document).ready() é uma função do jQuery que é usada para executar código JavaScript assim que o DOM é carregado.

O DOM é uma representação em memória do conteúdo HTML de uma página web, e o $(document).ready() é um evento que é disparado assim que o DOM é completamente carregado no navegador.

Isso significa que o código dentro do $(document).ready() só será executado quando o DOM estiver pronto para ser manipulado.

Como usar o $(document).ready() em JavaScript puro

Embora o $(document).ready() seja uma função do jQuery, é possível alcançar o mesmo efeito usando apenas JavaScript puro.

Para fazer isso, podemos usar o evento DOMContentLoaded, que é disparado quando o DOM é carregado.

Aqui está um exemplo de como usar o evento DOMContentLoaded em JavaScript puro:

document.addEventListener('DOMContentLoaded', function() {
  // Código a ser executado quando o DOM estiver pronto
});

Neste exemplo, estamos adicionando um ouvinte de evento ao documento (representado pelo objeto “document”) e estamos usando o evento DOMContentLoaded para executar o código dentro da função quando o DOM estiver pronto.

É importante notar que o evento DOMContentLoaded é suportado em todos os navegadores modernos, mas pode não funcionar em navegadores mais antigos.

Nesses casos, pode ser necessário usar uma biblioteca de polyfill ou uma abordagem alternativa.

Exemplos práticos de $(document).ready() em JavaScript puro

Vamos ver agora alguns exemplos práticos.

Aqui estão alguns exemplos práticos de como usar o $(document).ready() em JavaScript puro para garantir que o código JavaScript seja executado apenas quando a página estiver completamente carregada:

Exemplo 1: Exibindo uma mensagem de boas-vindas

document.addEventListener("DOMContentLoaded", function() {
  // Código JavaScript a ser executado após o carregamento completo da página
  var nome = prompt("Qual é o seu nome?");
  alert("Olá, " + nome + "! Bem-vindo(a) à nossa página!");
});

Neste exemplo, usamos o evento “DOMContentLoaded” em vez do $(document).ready(), que é a forma nativa de JavaScript para detectar quando o DOM (Documento Object Model) da página foi completamente carregado.

O código JavaScript é executado após o carregamento completo da página e exibe uma mensagem de boas-vindas com o nome fornecido pelo usuário.

Exemplo 2: Manipulando elementos do DOM

document.addEventListener("DOMContentLoaded", function() {
  // Manipulação de elementos do DOM após o carregamento completo da página
  var botao = document.getElementById("meuBotao");
  botao.addEventListener("click", function() {
    alert("Botão clicado!");
  });
});

Neste exemplo, usamos o evento “DOMContentLoaded” para garantir que o botão com o ID “meuBotao” esteja disponível no DOM antes de associar um evento de clique a ele. Dessa forma, podemos garantir que o código JavaScript seja executado apenas quando o botão estiver pronto para ser manipulado.

Exemplo 3: Carregando conteúdo externo

document.addEventListener("DOMContentLoaded", function() {
  // Carregamento de conteúdo externo após o carregamento completo da página
  var meuDiv = document.getElementById("meuDiretorio");
  fetch("conteudo.html")
    .then(response => response.text())
    .then(data => meuDiv.innerHTML = data)
    .catch(error => console.error("Erro ao carregar conteúdo:", error));
});

Neste exemplo, usamos o $(document).ready() em JavaScript puro para garantir que o conteúdo externo do arquivo “conteudo.html” seja carregado apenas após o carregamento completo da página. Utilizamos o método fetch para fazer a requisição do conteúdo, e o método innerHTML para inseri-lo em um elemento do DOM com o ID “meuDiretorio”.

Alternativas ao $(document).ready()

Embora o $(document).ready() seja uma forma amplamente utilizada de executar código JavaScript após o carregamento completo da página, existem outras alternativas que podem ser usadas em JavaScript puro. Algumas delas são:

1. window.onload

window.onload = function() {
  // Código JavaScript a ser executado após o carregamento completo da página
};

O window.onload é um evento nativo de JavaScript que é acionado quando a página e todos os seus recursos (como imagens e scripts externos) são completamente carregados. Assim como o $(document).ready(), ele garante que o código JavaScript seja executado apenas quando a página estiver pronta.

2. defer

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

A propriedade “defer” é um atributo que pode ser adicionado à tag de script em HTML. Ele indica ao navegador que o script deve ser executado apenas após o carregamento completo da página, garantindo assim que o código JavaScript seja executado de forma assíncrona, sem bloquear a renderização da página.

3. async

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

A propriedade “async” é outro atributo que pode ser adicionado à tag de script em HTML.

Assim como o “defer”, o “async” também permite que o código JavaScript seja executado de forma assíncrona, sem bloquear a renderização da página.

No entanto, o script com o atributo “async” pode ser executado assim que estiver disponível, mesmo que a página ainda não esteja completamente carregada.

Conclusão

O $(document).ready() é uma forma popular e amplamente usada de garantir que o código JavaScript seja executado apenas quando a página estiver completamente carregada.

No entanto, existem outras alternativas nativas em JavaScript puro, como o uso do evento “DOMContentLoaded”, o window.onload, o “defer” e o “async”.

É importante escolher a opção mais adequada para o contexto específico do seu projeto, levando em consideração os requisitos de desempenho e funcionalidade.

Garantir que o código JavaScript seja executado apenas quando a página estiver completamente carregada é uma prática importante para evitar erros e comportamentos indesejados.

O $(document).ready() é uma opção popular e fácil de usar em projetos que utilizam o jQuery, mas também existem alternativas equivalentes em JavaScript puro, como o uso do evento “DOMContentLoaded”, o window.onload, o “defer” e o “async”.

É importante escolher a opção mais adequada para o contexto específico do seu projeto, considerando requisitos de desempenho e funcionalidade.

Espero que este artigo tenha sido útil para entender como escrever código equivalente a $(document).ready em JavaScript puro.

Certifique-se de implementar essas práticas em seu projeto para garantir a execução correta do código JavaScript.

Você também pode conferir o vídeo de como treinar desenvolvimento web.

Se você tiver mais dúvidas ou precisar de mais informações, não hesite em consultar a documentação oficial do JavaScript e do jQuery.

Aproveite o poder dessa funcionalidade em seu código JavaScript e crie aplicações web incríveis!

Perguntas frequentes (FAQs)