Dúvida de sequencia dos comandos entre HTML e Javascript - Quem vem primeiro | Programação

Fiz a experiência do programa no Sublime passado pelo instrutor na aula "Lógica de Programação" conforme demonstrado abaixo:

<meta charset="UTF-8">
<script>
    function pulalinha() {
        alert("Olá")
        document.write("<br><br>")
        };
    var filhaGi= 38
    var filhaLa= 32
    var filhaLu= 37
    var media= (filhaGi+filhaLa+filhaLu)/3
    document.write("A média dos filhos são = " + Math.round(media));
    pulalinha();
    document.write("A soma dos filhos são = " + (filhaLa+filhaGi+filhaLu));
    pulalinha()
</script>

Entretanto o que vem primeiro é a caixa de alerta, ao clicar em OK, aparece a segunda caixa de alerta. Somente depois de clicar em OK é que aparece o resultado na tela da média e da soma. Mas na aula, o processo aparece em sequência, ou seja, primeiro o resultado na tela, depois o elerta, depois o segundo resultado na tela e por fim o alerta. O que estou errando no programa acima?

Obrigado,

Oi Poliana Marcondes Rizo eu editei seu tópico para visualizar seu código que não estava visível, para isso eu cliquei no campo acima <>INSERIR CÓDIGO e envolvi o código fonte que você postou entras as aspas.

Essa ordem de execução não necessariamente representa um erro, cada navegador pode ter implementações de renderização de páginas diferentes para um arquivo html, aqui no meu navegador(Chrome 76) por exemplo se eu trocar para uma outra aba ele processa as informações no corpo do documento e o alerta continua lá esperando ser clicado.

O mais importante por enquanto é que você entenda:

// Aqui você declara a função pulalinha
    function pulalinha() {
        alert("Olá")
        document.write("<br><br>")
        }; // Aqui não necessita de ponto e virgula
    var filhaGi= 38 //aqui eu tenho ponto e virgula
    var filhaLa= 32 //aqui ;
    var filhaLu= 37 // aqui ;
    var media= (filhaGi+filhaLa+filhaLu)/3 //;
    document.write("A média dos filhos são = " + Math.round(media)); //Aqui eu mostro no navegador o resultado da média.
    pulalinha(); //Aqui eu chamo a função pulalinha
    document.write("A soma dos filhos são = " + (filhaLa+filhaGi+filhaLu)); //Aqui eu escrevo no html o resultado da soma das idades dos filhos
    pulalinha() //Aqui faltou novamente ; e eu chamo a função pulalinha novamente
</script>

Essa dúvida é natural no começo do aprendizado sobre em que mundo estamos, se no HTML, se no Javascript, e você vai eliminando com o tempo, não esqueça os ponto e vírgulas das instruções, e entenda que primeiro eu declaro minhas funções e depois as chamo após a execução dessa função o programa retorna para linha seguinte de onde foi chamada, continuando ou não a execução.

O que está entre as tags <script> é javascript mas eu posso desse mundo escrever lá no meu documento html, como acontece com o document.write, e o navegador pode determinar o que ele irá renderizar primeiro se o document ou alert para otimizar o carregamento da página.

Bom é isso eu espero ter ajudado e bons estudos.

Mergulhe em programação