Bloco <Script> | JavaScript | Alura - Cursos online de tecnologia

Boa tarde. Eu estou fazendo o curso de "JavaScript e HTML: desenvolva um jogo e pratique lógica de programação" e o Flavio usa o minimo da estrutura formal do HTML nos seus exemplos. Eu estou assistindo as aulas e tentando refazer. Porém eu tentei fazer um exemplo na estrutura mais formal do HTML e coloquei o bloco script dentro do Head. E nao funcionou. E com ajuda de um amigo ele me sugeriu colocar o bloco script dentro do Body e sendo a ultima coisa a entrar. É assim mesmo ou eu fiz algo errado?

    <script>
        var input = document.querySelector("input");
        var button = document.querySelector("button");
        input.focus();

        button.onclick = exibeTexto;

        function exibeTexto(){
            alert(input.value);
        }
    </script></head>
<body>
    <input/>
    <button>Faça uma tentativa</button>        
</body>

Olá Denilson! Tudo bem?

Que ótimo que você está se dedicando a aprender JavaScript e HTML! Vamos lá: o que você está enfrentando é um comportamento comum quando o script é colocado dentro da tag <head>.

Quando você coloca o bloco <script> dentro do <head>, ele é executado antes que o DOM (Document Object Model) da página seja completamente carregado. Isso significa que, quando o JavaScript tenta acessar elementos como <input> e <button>, eles ainda não estão disponíveis, pois o HTML ainda não foi totalmente processado.

Uma solução é mover o bloco <script> para o final do <body>, como seu amigo sugeriu. Dessa forma, o script será executado após todo o conteúdo da página ter sido carregado, garantindo que todos os elementos estejam disponíveis para o JavaScript interagir.

Outra alternativa é usar o evento DOMContentLoaded para garantir que o script só seja executado após a página estar completamente carregada. Veja como você pode fazer isso:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <input/>
        <button>Faça uma tentativa</button>
        
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var input = document.querySelector("input");
                var button = document.querySelector("button");
                input.focus();

                button.onclick = exibeTexto;

                function exibeTexto(){
                    alert(input.value);
                }
            });
        </script>
    </body>
</html>

Com essa abordagem, o script é executado assim que o DOM estiver completamente carregado, mesmo que ele esteja dentro do <head>.

Conte sempre com o apoio do fórum :)

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓