HOWTO · JavaScript
Execute o código JavaScript após o carregamento da página da Web
Neste artigo, vamos examinar as várias maneiras de executar o código JavaScript depois que a página da Web estiver completamente carregada.
Antes de executar qualquer código JavaScript, sempre temos que garantir que todos os elementos HTML sejam renderizados primeiro no navegador. Como nos referiremos a esses elementos HTML em nosso código JavaScript, esses elementos precisam ser carregados antes da página da web.
Escrever a tag script dentro da tag head não é uma boa ideia (isso só faz sentido quando você está carregando scripts de terceiros em seu código) porque o documento HTML é executado de cima para baixo e a tag head é presente antes da tag body. Então, ele será executado primeiro e depois a tag body.
Uma vez que todo o conteúdo de nossa página da web está presente dentro da tag body e a tag body está presente após a tag head, adicionar o código JavaScript dentro de head não é necessário, pois não será capaz de encontrar os elementos HTML. Observe que até este ponto, os elementos ainda não foram criados.
Existem várias maneiras de carregar o JavaScript depois que todo o conteúdo da página da Web é completamente renderizado na tela. Abaixo estão algumas maneiras conhecidas que você pode seguir para executar o código JavaScript depois que a página da web estiver totalmente carregada.
Adicione a tag script no final da tag body em JavaScript
Adicionar uma tag script no final da tag body é um método comum de carregar o código JavaScript. Até este ponto, todo o conteúdo da página da Web é renderizado corretamente na tela. Portanto, podemos encontrar ou consultar facilmente esses elementos HTML dentro de nosso código JavaScript sem enfrentar nenhum erro no processo.
O programa a seguir mostra como isso é feito.
<body>
<script></script>
</body>
Usando o evento onload em JavaScript
Outra maneira de executar o JavaScript após o carregamento da página é usando o método onload. O método onload espera até que a página seja carregada. Assim que o faz, esse processo executa o código JavaScript.
Existem duas maneiras de escrever um código JavaScript. Uma maneira é escrever o código JavaScript dentro da tag script abaixo da tag body e então chamar a função dentro do método onload. Você também pode criar um arquivo separado para escrever o código JavaScript, vincular esse arquivo dentro de seu HTML no final da tag body e, em seguida, chamar essa função dentro do método onload.
Use o evento onload na tag body em JavaScript
O método onload requer uma variável target. Neste caso, estaremos usando o método onload na tag body para que seja o target.
Dentro do método onload, só temos que passar uma função. Agora, esta função só será executada depois que todo o conteúdo da página estiver totalmente carregado.
<body onload="myFunction()">
<h1>This is an example of onload.</h1>
<script>
function myFunction() {
console.log("function called...");
}
</script>
</body>
Produção:
function called...
Na tag body, temos apenas uma tag h1 e uma tag script. Na tag script, temos uma função myFunction() que imprime uma mensagem para a janela de console function called.... Para executar esta função após o carregamento da página, basta passá-la dentro do método onload.
Use o evento onload no objeto window dentro de um arquivo JavaScript
Outra maneira de usar o método onload é no objeto window. O objeto janela representa toda a janela do navegador. Depois que os elementos dentro da janela do navegador são completamente executados, podemos executar nosso código JavaScript usando o método onload.
<body>
<h1>This is an example of onload.</h1>
<script>
window.onload = function () {
console.log("function called...");
}
</script>
</body>
Aqui, temos o mesmo código do anterior. A única diferença aqui é que estamos usando o método onload no objeto window, que agora é o alvo. O programa irá eventualmente chamar a função e a mensagem function called... será impressa na janela do console.
