Conexão de um Arquivo JavaScript Externo

No tema anterior, o código JavaScript era definido diretamente na página da web. No entanto, existe outra maneira de conectar o código JavaScript, que envolve mover o código para arquivos externos e conectá-los usando a tag <script>.

Assim, no tema anterior, criamos a página HTML index.html, que está localizada no diretório app. Agora vamos criar um novo subdiretório neste diretório. Vamos chamá-lo de js. Será destinado ao armazenamento de arquivos com código JavaScript. Neste subdiretório, criaremos um novo arquivo de texto, que chamaremos de main.js. Arquivos com código JavaScript têm a extensão .js. Portanto, teremos a seguinte estrutura de projeto na pasta app:

Estrutura de um programa em JavaScript

Abrindo o arquivo main.js no editor de texto e definindo o seguinte código nele:

document.write("<h2>Primeiro programa em JavaScript</h2>"); // exibindo o título

document.write("Olá, mundo!"); // exibindo texto simples

Aqui, o método document.write é usado para adicionar algum conteúdo à página da web. A primeira chamada do método document.write exibe o título <h2>, e a segunda chamada o texto simples. Para compatibilidade com a codificação da página index.html, também é aconselhável definir a codificação utf-8 para o arquivo com o código JavaScript. Ao trabalhar no Visual Studio Code, este editor automaticamente define a codificação para UTF-8.

Agora vamos conectar este arquivo à página da web index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script src="js/main.js"></script>
  </body>
</html>

Para incluir um arquivo JavaScript em uma página da web, também usamos a tag <script>, que possui o atributo src. Esse atributo indica o caminho para o arquivo do script. No nosso caso, usamos um caminho relativo. Como a página da web está no mesmo diretório que o diretório js, podemos usar o caminho js/main.js como referência.

É importante lembrar que após a tag de abertura <script>, uma tag de fechamento </script> deve seguir obrigatoriamente.

E após abrir o arquivo index.html no navegador, a mensagem será exibida:

Conexão de scripts JavaScript externos

Em contraste com a definição de código JavaScript diretamente nas páginas, movê-lo para arquivos externos oferece várias vantagens:

Podemos reutilizar o mesmo código em várias páginas da web.
Os arquivos externos de JavaScript podem ser cacheados pelo navegador, o que reduz a carga no servidor em acessos subsequentes à página e diminui a quantidade de informações que o navegador precisa carregar.
O código da página web torna-se mais "limpo". Ele contém apenas a marcação HTML, enquanto o código de comportamento é armazenado em arquivos externos. Isso permite separar o trabalho de criação de código de páginas HTML da escrita do código JavaScript.

Portanto, geralmente é preferível usar código JavaScript em arquivos externos em vez de inserções diretas na página web por meio do elemento script.

Carregamento Assíncrono e Execução Adiada

Frequentemente, as páginas web têm uma estrutura complexa, com blocos na página HTML onde os arquivos JavaScript são conectados dinamicamente, o que pode complicar o gerenciamento de arquivos JavaScript. Para controlar o carregamento de um arquivo de código JavaScript, o navegador oferece dois atributos: async e defer.

O atributo async garante que o processamento do código HTML não será interrompido quando o navegador encontrar um elemento <script>. O arquivo JavaScript é carregado de forma assíncrona (daí o nome do atributo: async). Nesse caso, o código HTML continua sendo processado até que o arquivo JavaScript correspondente seja carregado. Quando o arquivo JavaScript é carregado, o processamento do HTML é interrompido, e o arquivo JS carregado começa a ser executado. Após a execução do código JavaScript, o processamento do HTML continua.

Carregamento assíncrono de arquivo JavaScript e o atributo async

Exemplo de uso do atributo async:

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

O atributo defer também garante que o processamento do código HTML não será interrompido. Por outro lado, o código JavaScript é executado apenas após o processamento completo do código HTML. Assim, a execução do código JavaScript é adiada (daí o nome - defer).

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

Exemplo de uso do atributo defer.

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