O JQuery utiliza o JavaCript para realizar suas atividades e da mesma maneira que o JavaScript ele é executado dentro de uma página HTML e por isso as regras do JavaScript são fundamentais para o JQuery. Chamamos este mecanismo que entende e executa scripts de ScriptEngine.
Sendo assim, quem é executado primeiro? O HTML ou o JavaScript?
Resposta:
Os dois são executados conjuntamente na página com a sequencia de execução de cima para baixo, exatamente como lemos uma página de um livro.
Por esse motivo alguma regras de precedência são importantes.
Citando um exemplo 1:
<div id="exemplo1"></div>
<script>
document.getElementById('exemplo1').innerHTML = 'oi1';
</script>
O resultado é :
Executou o código perfeitamente porque a função JavaScript foi executada depois que o elemento HTML foi renderizado pela página.
Mas se o código fosse o do exemplo 2:
<script>
document.getElementById('exemplo2').innerHTML = 'oi2';
</script>
<div id="exemplo2"></div>
O Resultado seria um erro porque o objeto com o id exemplo2 ainda não foi renderizado pelo browser quando o JavaScript é executado..
Ou seja, se o JavaScript estiver antes de uma tag html que ele utiliza, para o JavaScript, neste momento, a tag a ser renderizada ainda não existe.
Portanto ao colocar um código javascript no header e que este seja executado no momento de carga da página e que referencie uma tag do documento precisaremos pedir ao JavaScript que espere que o documento seja totalmente carregado para que depois, quando o JavaScript for executado, encontre a tag renderizada.
Portanto, antes de executarmos um JavaScript que referencie o DOM precisamos aguardar que o elemento seja renderizado ou a carga completa do documento antes de executar o script porque pode ser que o elemento ainda não tenha sido renderizado.
Podemos colocar o código JavaScript no final da página HTML mas se você já fez isso verificou que a página fica com um monte de código no final que atrapalha a localização dos elementos ou do conteúdo html da página. O melhor seria colocar num documento externo.
Caso deseje manter sua página organizada e precise guardar o JavaScript na página você poderá aguardar a carga completa do documento HTML utilizando o DOM e temos as seguintes possibilidades :
1-Uma das maneiras de fazer isso é pelo DOM atraves do elemento body que dispara uma evento indicando que a carga do documento terminou:
<body onload="funcao()">
2-O elemento window do DOM também gera um evento quando o documento foi completamente carregado:
<script>
windows.onload() = function(){...};
</script>
JQUERY:
O JQuery também tem funções que aguardam o documento a ser carregado completamente:
$(document).ready(function(){...})
ou
$(function(){...})
Importante
O evento Onclick de um elemento não consegue chamar uma função dentro do JQuery.
Como exemplo, veja o código abaixo:
<script>
$(document).ready(() => (
function xPegaValorInputText(){
alert('oi');
}
)) ;
</script>
<input type="button" id="btn1" value="Obter valor input tipo texto" onclick="PegaValorInputText();">
Não funciona de jeito maneira.
Mas se você fizer o JQuery capturar o evento onclick do objeto funciona:
$(document).ready(() => (
$("#idx").click(
function() {
alert($('#idx').val())
}
)
));
<input type="button" id="idx" value="Capturar evento onClick do botão pelo JQuery">