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
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