Publicado em 14 de jan.

chamar funções quando o documento estiver pronto

Olá, alguem poderia me explicar como chamar funções com javascript não jquery quando os elementos estiverem pronto ou so aquele determinado elemento?

Exemplo

 <body>
 <h1>Titulo</h1>
 <p id="um" onload="x();">a</p>
 <script>x();</script>
 <script src="funcoes.js"></script>
 <script>y();</script>
 <p id="dois"></p>
 </body>

no exemplo acima nada acima de <script src="funcoes.js"></script> funciona, somente abaixo conteudo do arquivo funcoes.js

function x(){
 document.write('funcão x');
}
function y(){
 document.write('funcão y');
}

Eu gostaria de manter o <script src="funcoes.js"></script> antes do fechamento da tag body mais poder chamar as funções acima mais como fazer isso?

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

gabrieldarezzo· 16 de jan.

A ideia é essa mesma.

utilizar o evento:

onload()

A respeito do seu exemplo, como o JS é uma linguagem de eventos, oq fica 'errado' é o sentido empregado no evento, acredito que o exemplo abaixo pode exemplificar melhor:

<!doctype html>

<html>
 <head>
 <title>onload test</title>
	</head>
 <body>

	<p id="antes"></p>
 <script>
 function load() {
 //console.log("load event detected!");
 document.getElementById("antes").innerHTML= "funcão onLoad ativada antes do Js";
 document.getElementById("depois").innerHTML= "funcão onLoad ativada depois do Js";
 }
 window.onload = load;
	</script>
	<!-- Aqui é indiferente o aspecto se é externo no proprio documento.
	<script type="text/javascript" src="funcoes.js"></script>
	-->

	<p id="depois"></p>

 </body>
</html>

Ps1:

Não é coincidência os eventos do jQuery hehe:

$(document).ready(function() {

});

Ps2:

Mesmo tendo a possibilidade de escrever códigos JS antes do termino do HTMl, é interessante manter tudo centralizado anterior ao fechamento da tag </body>, assim você evita precisar dos códigos acima (já que o HTML está 100% renderizado e disponível para uso (loaded) e questão de performasse, afinal o impacto visual (em micro segundos) faz sentido você entregar primeiramente o HTML e após isso deixar dinâmico o mesmo.

Tem uma serie (live code video + código) do William Bruno que aborda um pouco de tudo acima:

https://github.com/wbruno/boas-praticas-js

Vale a pena a leitura:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload