Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bobrinha

chamar funções quando o documento estiver pronto

Por , em Javascript

Recommended Posts

Bobrinha    4

Bobrinha
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito