JavaScript é a linguagem de programação que dá vida às páginas web. Até agora, você viu conceitos teóricos; nesta aula, vamos colocar a mão no código e executar seu primeiro script JavaScript. Você entenderá onde o JS pode rodar, como conectá-lo ao HTML e as melhores práticas para carregar scripts de forma eficiente.

Vamos começar com uma visão geral dos ambientes de execução, depois mergulhar na tag <script> e seus atributos, e finalmente escrever seu primeiro programa. Ao final, você terá uma base sólida para os próximos passos.

Onde o JS roda (browser e fora dele)

O JavaScript foi criado para rodar nos navegadores, tornando as páginas interativas. Todo navegador moderno possui um motor JavaScript embutido (como o V8 do Chrome, SpiderMonkey do Firefox, JavaScriptCore do Safari) que interpreta e executa o código. Isso significa que qualquer página web pode usar JS para manipular o DOM, responder a eventos, fazer requisições assíncronas, etc.

Mas o JavaScript não se limita ao navegador. Com o Node.js, você pode executar JS no servidor, em scripts de automação, em ferramentas de linha de comando, em aplicações desktop (Electron), em dispositivos IoT (Johnny-Five) e muito mais. Node.js é um ambiente de execução baseado no motor V8 do Chrome, que permite rodar JS fora do navegador. Isso expandiu enormemente o alcance da linguagem.

Tag script (inline, interno e externo)

A tag <script> é a maneira padrão de incluir JavaScript em HTML. Existem três formas de usá-la:

  • Inline: O código é escrito diretamente dentro de um atributo de evento HTML, como onclick. Exemplo: <button onclick="alert('Clicou!')">Clique</button>. Não é recomendado para códigos mais complexos, pois mistura HTML e JS, dificultando a manutenção.
  • Interno: O código é colocado dentro de uma tag <script> no próprio documento HTML, geralmente no <head> ou no final do <body>. Exemplo: <script>console.log('Olá');</script>. É útil para scripts pequenos e específicos da página.
  • Externo: O código é escrito em um arquivo separado (extensão .js) e referenciado pela tag <script> com o atributo src. Exemplo: <script src="script.js"></script>. Essa é a melhor prática para scripts maiores, pois permite reuso, cache e separação de responsabilidades.

Exemplo de uso interno e externo:

<!DOCTYPE html>
<html>
<head>
  <title>Exemplo</title>
  <!-- Script externo -->
  <script src="app.js"></script>
</head>
<body>
  <h1>Teste</h1>
  <!-- Script interno -->
  <script>
    console.log('Script interno executado');
  </script>
</body>
</html>

defer e async

Quando o navegador encontra uma tag <script> sem atributos especiais, ele interrompe o parsing do HTML para baixar e executar o script. Isso pode atrasar a renderização da página. Para controlar esse comportamento, temos os atributos defer e async.

defer: Indica que o script deve ser baixado em paralelo ao parsing do HTML, mas só será executado após o documento ser completamente parseado. Além disso, scripts com defer são executados na ordem em que aparecem. É ideal para scripts que precisam do DOM pronto, como manipuladores de elementos.

async: Também baixa o script em paralelo, mas a execução ocorre assim que o download termina, independentemente do parsing. A ordem de execução não é garantida. É útil para scripts independentes, como analytics ou widgets.

Ambos os atributos só fazem sentido para scripts externos (com src). Exemplo:

<!-- Executa após o HTML ser parseado, na ordem -->
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

<!-- Executa assim que baixar, sem ordem -->
<script src="analytics.js" async></script>

Na prática, defer é a escolha mais comum para scripts que dependem do DOM. async é usado para scripts que não dependem de outros scripts ou do DOM.

Olá, mundo

Chegou a hora de escrever seu primeiro script! Vamos criar um programa simples que exibe uma mensagem no console e um alerta na tela. Siga os passos:

  1. Crie um arquivo HTML (ex.: index.html).
  2. Adicione uma tag <script> no final do <body>.
  3. Dentro dela, escreva o código abaixo.
<!DOCTYPE html>
<html>
<head>
  <title>Olá, mundo!</title>
</head>
<body>
  <h1>Minha primeira página JS</h1>
  <script>
    console.log('Olá, mundo!');
    alert('Bem-vindo ao JavaScript!');
  </script>
</body>
</html>

Abra o arquivo no navegador. Você verá o alerta e, ao fechá-lo, abra o console (F12 > Console) para ver a mensagem. Parabéns, você executou seu primeiro script JavaScript!

Boas práticas

Algumas recomendações para começar com o pé direito:

  • Sempre use scripts externos para códigos maiores, com defer para garantir que o DOM esteja pronto.
  • Evite scripts inline em atributos de evento (como onclick) – prefira addEventListener no JS.
  • Coloque os scripts no final do <body> ou use defer para não bloquear a renderização.
  • Mantenha o código organizado em arquivos separados por funcionalidade.

Referências

Exercícios

  1. Crie um arquivo HTML com um script interno que exiba a data e hora atual no console usando new Date().

    ✓ Resposta:
    <!DOCTYPE html>
<html>
<head>
  <title>Data e hora</title>
</head>
<body>
  <script>
    console.log(new Date());
  </script>
</body>
</html>

  2. Explique a diferença entre defer e async em suas próprias palavras.

    ✓ Resposta: defer baixa o script em paralelo e executa após o HTML ser completamente parseado, mantendo a ordem. async também baixa em paralelo, mas executa assim que o download termina, sem garantir ordem. Use defer para scripts que dependem do DOM e async para scripts independentes.

  3. Crie um arquivo JavaScript externo chamado saudacao.js que exibe um alerta com a mensagem "Bem-vindo!" e o referencie em um HTML com defer.

    ✓ Resposta:

    Arquivo saudacao.js:

    alert('Bem-vindo!');

    HTML:

    <!DOCTYPE html>
<html>
<head>
  <title>Saudação</title>
</head>
<body>
  <h1>Página inicial</h1>
  <script src="saudacao.js" defer></script>
</body>
</html>

  4. Qual é a vantagem de usar um script externo em vez de um script interno?

    ✓ Resposta: Scripts externos permitem reuso do código em várias páginas, facilitam a manutenção (separação de HTML e JS), podem ser cacheados pelo navegador (melhorando performance) e tornam o HTML mais limpo.

  5. Escreva um trecho de HTML que inclua dois scripts externos: lib.js (com async) e app.js (com defer). Explique a ordem provável de execução.

    ✓ Resposta: 
    <script src="lib.js" async></script>
<script src="app.js" defer></script>

    lib.js será executado assim que terminar o download, possivelmente antes do HTML completo. app.js será executado após o HTML ser parseado, independentemente de quando o download terminar. Como defer garante ordem, se houver mais scripts com defer, app.js respeitará a ordem.