Onde colocar código JavaScript no HTML

Neste artigo você vai ver onde colocar código JavaScript no HTML, e por que devemos seguir algumas boas práticas ao adicionar JavaScript.

Fala programador(a), beleza? Bora aprender onde colocar o JS no HTML!

E a resposta para onde inserir o script é depende do que será feito com ele

Então vamos ver alguns casos:

Com a tag script

Podemos inserir JavaScript no meio do HTML com a tag <script>

E qualquer código JS entre as tags será executado assim que for lido

Porém isto não é uma boa prática, salvo raras exceções como por exemplo: inserção de script de terceiros

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

O certo para uma lógica mais complexa de JavaScript é inserir toda ela em um arquivo externo

E linkar via inserção pela tag script por meio de um source (src)

Exemplo:

<script>
 console.log('teste');
</script>

Inserir JavaScript no head

Inserindo scripts no head você garante que o JS vai ser lido e executado antes dos elementos do HTML

Ou seja, logo no carregamento da página o script vai ser interpretado

O grande problema é que se os arquivos de script forem muito grandes, pode ocorrer um delay ao aparecer o HTML

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Isso porque o arquivo precisa ser completamente carregado antes

Podemos dizer que funciona como um ‘bloqueador de página’

E um problema desta forma é que não podemos acessar os elementos HTML, pois vai gerar um erro de que o elemento não existe

Isso acontece por que o arquivo é carregado antes do HTML, então para resolver este problema utilizamos a forma abaixo

Exemplo:

<script src="script.js"></script>

Inserir JavaScript no fim do body

Dessa maneira você garante que o HTML apareça, então o usuário já tem uma prévia resposta da página

Além disso você vai conseguir acessar os elementos com JS que foram previamente carregados no HTML

Então esta acaba sendo a maneira mais escolhida e de certa forma correta também

Um pequeno problema é que se você tem manipulações de JS para ajustar um layout, por exemplo

A sua tela pode aparecer um pouco desconfigurada ao primeiro momento, pois todo o HTML está sendo carregado antes do JS

Mas não deve ser um grande problema, apenas fique atento que isso pode acontecer

Uma ideia é tentar deixar a página certa com HTML e CSS, e depois sim realizar as manipulações via JS

Exemplo:

<script src="script.js"></script>

Carregamento assíncrono

Há uma outra possibilidade, mais moderna, de onde colocar código JavaScript no HTML

Utilizando o atributo async na tag script de carregamento do arquivo

Você faz um carregamento assíncrono, ou seja, sem bloquear a página

Assim o script pode ser adicionado ao head sem termos aquele problema previamente citado

O único problema é que não podemos utilizar este script até o arquivo carregar

Então, devemos nos assegurar que não precisamos do script nesses momentos iniciais da página

Exemplo:

<script async src="script.js"></script>

Conclusão

Neste artigo vimos  todas as maneiras possíveis de adicionar JavaScript no HTML

Também os problemas e também as vantagens de cada uma

Foi visto também que adicionar no fim do body possui mais vantagens que as outras formas

E também a desvantagem, que é uma possível desconfiguração da página ao carregar, não é tão impactante

E grande parte das vezes pode nem existir

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube