Hoje vamos falar de algo mais simples, mas é extremamente necessário saber antes de começar a codificar JS.
Onde devo escrever meus códigos JavaScript? Eu poderia dizer, em qualquer lugar, mas eu prefiro que você decida isso.
Como qualquer linguagem da WEB, você pode usar um simples bloco de notas para escrever os códigos.
Eu uso o SublimeText 3 e gosto muito.
Mas não é disso que estamos falando. O que queremos é ver nosso código funcionando certo? Então onde devo escrevê-los para ver atividades JavaScript no meu site?
Há duas maneiras para isso, internamente (mesclado ao código HTML) e externamente, em um arquivo com extensão .js que deve ser incluído na página HTML.
Vamos começar com escritas internas. Dentro do HTML há dois lugares que você pode escrever os códigos JavaScript, no cabeçalho entre as tags <head> e no corpo da página, entre as tags <body>
Seus scripts devem estar entre as tags <script>. Veja o código abaixo e confira como ficará a estrutura nos dois casos.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Mudar paragráfo.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">Um parágrafo qualquer</p>
<button type="button" onclick="myFunction()">Click Aqui</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">Um parágrafo qualquer</p>
<button type="button" onclick="myFunction()">Click Aqui</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Mudar paragráfo.";
}
</script>
</body>
</html>
Antigamente usava-se a tag <script> declarando o atributo type para informar ao navegador o script que estávamos usando, assim: <script type="text-javascript"></script>. Esse atributo não é mais obrigatório, hoje o JavaScript é a linguagem padrão da web e não carece de ser declarado explicitamente. JavaScript é muito fo@#$%ão, praticamente dominou a internet!
Melhor colocar em <head> ou em <body>?
Tanto em <head> quanto em <body> os scripts terão praticamente o mesmo efeito. Eu digo praticamente porque muda na questão desempenho do site, mas eu vou falar isso mais abaixo.
Veja um exemplo de scritps colocados em <head> e em <body> acima. Não faz diferença, o efeito será o mesmo.
Então você pode colocar em <head> quanto em <body> ou até mesmo em ambos, isso depende do seu projeto, de como você quer ter controle do código e de uma série de outras coisas que você deve analisar para decidir isso.
Usando arquivos externos
Os códigos JavaScripts também podem ser usados em arquivos externos, são extremamente práticos quando temos um código que é usado em várias páginas diferentes. Assim praticamos o reuso dos códigos, melhoramos o desempenho e, a manutenção será muito mais rápida e fácil.
Como eu disse, os arquivos devem ter extensão .js, não podem conter tags HTML, nem mesmo a tag <script>, eles são escritos como se já estivessem entre as tags <script></script>. Veja um exemplo do arquivo meujavascript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Mudar o parágrafo.";
}
Para incluir esse arquivo na sua página, use a referência src da tag <script>, por exemplo:
<script src="meujavascript.js"></script>
No src você deve inserir o caminho completo, nesse exemplo supúnhamos que o arquivo está na mesma pasta que a página. Então se seu arquivo HTML estiver na raiz e seu script dentro de uma pasta chamada js, por exemplo, então você deve escrever assim:
<script src="js/meujavasript.js"><script>
As grandes vantagens de escrever scripts em arquivos externos incluem:
- Separar HTML e códigos JS;
- Torna HTML e JS mais fáceis de ler e escrever. Na hora de dar manutenção, isso faz toda diferença;
- Arquivos JS armazenados em cache podem acelerar o carregamento das páginas.*
Info! *Os navegadores fazem cache (em grosso modo, baixam arquivos para não ter que busca-los sempre que são acessados) de arquivos JS e CSS, mas não de HTML, se você escreve diretamente no HTML, toda vez que acessarem a página o navegador terá que buscar o código inteiro, mas os arquivos externam ficam armazenados na memória dos navegadores e isso melhora muito a velocidade de carregamento das páginas.
Você pode referenciar arquivos de uma página externa usando o caminho completo. Hoje em dia isso acontece muito. Empresas como Google, Facebook e outras, fornecem arquivos para serem usados por terceiros, são as famosas CDNs (Content Delivery Network ou Rede de Distribuição de Conteúdo).
A vantagem é que se um usuário já acessou um site contendo um determinado arquivo armazenado em uma CDN, quando ele acessar seu site e encontrar o mesmo arquivo, não precisará baixa-lo de novo, já estará em cache e vai acelerar o carregamento dos sites que usam as CDNs. Veja um exemplo de como referenciar arquivos externos do JQUERY em CDNs.
<script src=http://code.jquery.com/jquery-3.3.1.min.js></script>
Agora, para finalizar com chave de ouro, vai uma dica que muitos programadores frontend ainda não sabem, mas você vai saber agora.
Colocar seus scripts no final da página, ou seja, na parte inferior da tag <body> , melhora ainda mais a velocidade de exibição, isso porque a compilação de scripts desacelera a exibição da página, prejudicando o desempenho. Se você já se deparou com o famoso 
e esse permaneceu na sua tela por bastante tempo, provavelmente o programador não seguiu essa dica.
Então fica ligado, cola com a gente e siga nossas freetips, e se tiver dúvidas, deixe um comentário na nossa página do Facebook porque em breve chegaremos com mais novidades sobre a poderosa linguagem JavaScript.
