Onde colocar javascript em um documento HTML?

JavaScript pode ser adicionado em dois lugares diferentes dentro de um documento HTML. Pode ser colocado dentro do seção ou no seção. A tag na qual você coloca o javascript afeta a saída da sua página da web.

JavaScript na tag

Sempre que uma página HTML é aberta, é a primeira tag de conteúdo que é carregada, o que significa que todos os dados dentro deles são carregados antes da tag. Se o JavaScript for adicionado à etiqueta da cabeça, ele não esperará pelo carregamento completo da página da web e será carregado na memória do navegador. Para demonstrar isso, crie uma página HTML básica que solicitará o usuário assim que for carregado na memória do navegador.

Pegue o seguinte arquivo HTML:

Como você pode ver, o script é adicionado no marcação. No entanto, na etiqueta corporal, uma imagem de 8k está sendo carregada na página da web, que levará alguns momentos para carregar. Carregue a página HTML e a saída:

A partir desta saída, fica claro que colocar o script nas causas que ele carrega antes mesmo de o DOM estar pronto.

JavaScript na tag

Como mencionado acima, pode -se colocar o JavaScript dentro do marcação. Isso permitirá que o DOM carregue completamente e depois carregue o JavaScript de acordo com sua posição na tag.

Para demonstrar isso, criaremos um botão na página HTML com as seguintes linhas e na funcionalidade nesse botão com as seguintes linhas:

Clique para alertar!

No trecho de código acima, um ouvinte de evento é adicionado no botão que alerta o usuário após o botão Pressione tudo com o script dentro do . Execute este arquivo HTML e observe a seguinte saída:

Fica claro na saída acima que o script está funcionando bem na tag

JavaScript em tag ou tag

Para responder a essa pergunta, pegue o último exemplo e simplesmente mova a tag de script para alertar o usuário após o botão Pressione dentro da tag como:

Clique para alertar!

Após a execução deste programa, a diferença não é visível, pois a saída se parece com o seguinte:

No entanto, abrir o console do navegador mostra a diferença, porque no console existe esse erro:

Este erro é causado por JavaScript tentando obter a referência de um elemento da etiqueta corporal, que ainda não foi inicializada por DOM porque o JavaScript na etiqueta da cabeça foi executado mesmo antes de o DOM estar totalmente carregado.

Então, em conclusão, colocar o script na etiqueta da cabeça ou a etiqueta corporal se resume ao funcionamento da página da web.

Embrulhar

JavaScript pode ser colocado em dois lugares diferentes dentro de um arquivo de documento HTML no tag ou em marcação. Colocar o javascript na etiqueta da cabeça faz com que o navegador carregue o script antes que o DOM esteja totalmente pronto. Enquanto incluir o javascript dentro do carrega o script depois que o DOM está pronto. Por esse motivo, não há local ideal para incluir JavaScript em seu documento HTML e depende da tarefa que se deseja executar.