Conexão de Arquivos JavaScript Externos

Nos exemplos anteriores, o código JavaScript foi inserido diretamente na página HTML. Embora isso funcione para testes rápidos, projetos profissionais exigem uma organização melhor. A prática padrão de mercado é separar o comportamento (JavaScript) da estrutura (HTML), movendo os scripts para arquivos externos.

Para aplicar esse conceito, vamos reorganizar a estrutura do nosso projeto. Dentro da pasta app (onde está o index.html), criamos um novo subdiretório chamado js. Este será o local dedicado ao armazenamento de todos os scripts. Dentro dessa pasta, criamos um arquivo de texto simples chamado main.js. A extensão .js é fundamental para que o sistema reconheça o arquivo como um código JavaScript.

A estrutura final do projeto ficará assim:

Estrutura de um programa em JavaScript

Agora, abrimos o arquivo main.js no editor de texto e adicionamos o seguinte código:

alert("Olá, mundo! Este código vem de um arquivo externo.");

O comando acima utiliza a função alert() para exibir uma janela de mensagem. Ao trabalhar com arquivos externos, não precisamos da tag <script> dentro do arquivo .js. O arquivo deve conter apenas o código JavaScript puro. Editores como o Visual Studio Code detectam automaticamente a codificação correta (UTF-8) para esses arquivos.

Conectando o Arquivo ao HTML

Com o arquivo de script criado, o próximo passo é vinculá-lo à página index.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <h1>Teste de Arquivo Externo</h1>

    <script src="js/main.js"></script>
  </body>
</html>

A conexão é feita através da mesma tag <script>, mas agora adicionamos o atributo src (abreviação de source, ou origem). Esse atributo indica ao navegador onde encontrar o arquivo. Como o arquivo HTML está na pasta raiz e o script está dentro da pasta js, o caminho relativo correto é js/main.js.

É importante notar que, mesmo sem código dentro dela, a tag de fechamento </script> é obrigatória.

Ao abrir o arquivo index.html no navegador, o navegador lerá o HTML, encontrará a referência ao arquivo externo, fará o download dele e executará o comando alert(), exibindo a mensagem na tela.

Conexão de scripts JavaScript externos

A separação do código em arquivos externos traz grandes benefícios. O código torna-se reutilizável, pois o mesmo arquivo main.js pode ser conectado a várias páginas diferentes. Além disso, o navegador consegue salvar esse arquivo na memória (cache). Isso significa que, se o usuário visitar outra página que usa o mesmo script, o navegador não precisará baixá-lo novamente, economizando dados e carregando o site mais rápido. O código também fica mais limpo e fácil de dar manutenção, pois o HTML cuida apenas do visual e o arquivo externo cuida apenas da lógica.

Carregamento Assíncrono e Execução Adiada

Quando o navegador carrega uma página e encontra uma tag <script> tradicional, ele pausa a leitura do HTML para baixar e executar o script. Isso pode causar lentidão perceptível se o script for grande. Para resolver isso, existem dois atributos modernos que controlam como o download e a execução acontecem: async e defer.

O atributo async instrui o navegador a baixar o arquivo JavaScript em segundo plano, sem parar a leitura do HTML. No entanto, assim que o download termina, o navegador pausa o HTML imediatamente para executar o script. Isso é útil para scripts que não dependem de nada na página, como contadores de visitas ou anúncios.

Carregamento assíncrono de arquivo JavaScript e o atributo async

Exemplo de uso do atributo async:

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

Já o atributo defer é geralmente a melhor escolha para scripts que controlam a interface do site. Com ele, o navegador baixa o arquivo em segundo plano, mas espera a página HTML inteira terminar de carregar antes de executar o script. Isso garante que o código JavaScript só rode quando todos os botões e textos já estiverem prontos na tela, substituindo a necessidade de colocar o script no final do <body>.

Execução adiada de um arquivo JavaScript e o atributo defer

Exemplo de uso do atributo defer:

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

Resumo

Arquivos Externos: O código JavaScript deve ficar em arquivos com extensão .js.
Conexão: O atributo src na tag <script> vincula o arquivo externo ao HTML.
Vantagens: Melhora a organização, permite reutilização de código e aproveita o cache do navegador.
Caminho Relativo: Deve-se indicar a pasta correta (ex: js/main.js).
Atributo Async: Baixa o script em paralelo e executa assim que o download termina (pode pausar o HTML).
Atributo Defer: Baixa o script em paralelo, mas só executa depois que o HTML foi totalmente carregado (mais seguro para manipular a página).