Inserindo JS na página
Como relacionar um arquivo JavaScript no seu HTML?
Para adicionar códigos JavaScript à uma página devemos usar a tag <script>, podendo fazer essa inserção de duas formas:
1. Inserindo códigos na própria página (inline):
Cria-se uma tag <script>, informando que o valor do atributo 'type' é 'text/javascript', então, coloca-se o código JavaScript dentro dessa tag.
Exemplo:
<script type="text/javascript">
alert('Olá mundo!');
</script>
2. Relacionando um arquivo externo na página:
Essa forma é bem parecida com a inserção de códigos JavaScript inline, a maior diferença é que não coloca-se o código JavaScript dentro da tag, visto que esse código estará em um arquivo externo. Assim, simplesmente é preenchido o atributo 'src' da tag <script> com o caminho para o arquivo em questão.
Essa forma também permite carregar arquivos JavaScript sem ter que baixá-los para o seu projeto. Isso é bastante utilizado como uma forma de fazer com que arquivos que são usados por muitos projetos, como por exemplo a jQuery, fiquem armazenados em cache, sendo então carregados de forma mais rápida.
Exemplo 1 - adicionando um JavaScript do nosso projeto:
Imagine que o projeto está com a seguinte estrutura de diretórios:
projeto/
arquivo.html (página que irá adicionar o arquivo JavaScript)
js/
meu-arquivo.js
Assim, se queremos que a página 'arquivo.html' carregue o arquivo 'js/meu-arquivo.js', utilizamos a seguinte marcação:
<script type="text/javascript" src="js/meu-arquivo.js"></script>
Exemplo 2 - adicionando um JavaScript da internet:
Nesse exemplo, é carregado o framework JavaScript jQuery disponibilizado pela Google por um serviço de hospedagem de libraries (bibliotecas) JavaScript. Disponível em https://developers.google.com/speed/libraries/devguide?hl=pt-br#jquery:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
Qual é o melhor local para colocar a tag <script>?
No geral, o melhor local para ser inserida uma tag <script> é antes do fechamento da tag <body>. Isso se dá devido ao fato de que o browser, ao encontrar uma tag <script>, precisa executar o que foi específicado ou dentro da tag ou pelo atributo 'src', bloqueando assim a renderização do restante da página.
Assim, o código JavaScript é executado assim que é interpretado, logo, se existem elementos abaixo do código em questão que são manipulados por esse código (por exemplo, quer-se remover todos os links de uma determinada página e os links encontram-se abaixo da tag <script>), é necessário adicionar eventos indicando que a página já foi carregada completamente, caso contrário, é bem possível que o código não funcione corretamente.