Nesta aula, vamos dar os primeiros passos práticos com JavaScript. Você entenderá onde o código JavaScript pode ser executado, como inseri-lo em páginas HTML usando a tag <script>, as diferenças entre defer e async, e finalmente criará seu primeiro script: o clássico 'Olá, mundo'.

Onde o JS roda (browser e fora dele)

JavaScript é uma linguagem versátil que pode ser executada em diversos ambientes. O local mais comum é o navegador (browser), onde ele interage com páginas web, manipula o DOM e responde a eventos do usuário. No entanto, o JavaScript também pode ser executado fora do navegador, graças a plataformas como o Node.js, que permite rodar scripts no servidor, automatizar tarefas, criar ferramentas de linha de comando, entre outros. O Node.js utiliza o motor V8 (o mesmo do Chrome) para interpretar JavaScript no lado do servidor.

Tag script (inline, interno e externo)

A tag <script> é usada para incluir JavaScript em documentos HTML. Existem três formas principais de uso:

  • Inline: O código é escrito diretamente dentro de um atributo de evento HTML, como onclick. Exemplo:
<button onclick="alert('Clicou!')">Clique aqui</button>
  • Interno: O código é colocado dentro de uma tag <script> no próprio documento HTML, geralmente no <head> ou ao final do <body>. Exemplo:
<script>
  console.log('Olá do script interno!');
</script>
  • Externo: O código é escrito em um arquivo separado com extensão .js e referenciado pela tag <script> com o atributo src. Exemplo:
<script src="meu-script.js"></script>

O uso de arquivos externos é recomendado para organização e reutilização de código.

defer e async

Quando o navegador encontra uma tag <script>, por padrão ele interrompe o parsing do HTML para baixar e executar o script. Isso pode atrasar o carregamento da página. Para controlar esse comportamento, existem os atributos defer e async.

  • defer: O script é baixado em paralelo com o parsing do HTML, mas só é executado após o documento HTML ser completamente interpretado. Múltiplos scripts com defer são executados na ordem em que aparecem. Ideal para scripts que dependem do DOM.
<script src="script.js" defer></script>
  • async: O script é baixado em paralelo e executado assim que termina o download, sem esperar o fim do parsing. A ordem de execução não é garantida. Útil para scripts independentes, como analytics.
<script src="analytics.js" async></script>

Ambos os atributos só funcionam em scripts externos (com src).

Olá, mundo

Vamos criar seu primeiro script JavaScript. Existem duas formas comuns de exibir uma mensagem:

  • Usando console.log: Exibe a mensagem no console do navegador (acessível via F12).
<script>
  console.log('Olá, mundo!');
</script>
  • Usando alert: Exibe uma caixa de diálogo com a mensagem.
<script>
  alert('Olá, mundo!');
</script>

Teste ambos em um arquivo HTML simples. Lembre-se de que alert é bloqueante e menos usado em aplicações reais.

Referências

Exercícios

  1. Crie um arquivo HTML que exiba "Meu primeiro script" no console do navegador usando um script interno.

    2. <!DOCTYPE html>
<html>
<head>
  <title>Exercício 1</title>
</head>
<body>
  <script>
    console.log('Meu primeiro script');
  </script>
</body>
</html>
  2. Explique a diferença entre script interno e externo. Dê um exemplo de cada.

    3. Script interno: o código fica dentro do próprio HTML, entre tags <script>. Exemplo:

    <script>alert('Interno');</script>

    Script externo: o código fica em um arquivo .js separado, referenciado pelo atributo src. Exemplo:

    <script src="externo.js"></script>
  3. Qual a diferença entre os atributos defer e async? Em que situação você usaria cada um?

    4. defer: o download é paralelo e a execução ocorre após o HTML ser totalmente interpretado, mantendo a ordem dos scripts. Use quando o script precisa do DOM ou depende de outros scripts.

    async: o download é paralelo e a execução ocorre assim que o download termina, sem esperar o HTML, e a ordem não é garantida. Use para scripts independentes, como analytics.

  4. Escreva um script inline que, ao clicar em um botão, exiba "Clicou!" usando alert.

    5. <button onclick="alert('Clicou!')">Clique</button>
  5. Cite dois ambientes onde o JavaScript pode ser executado além do navegador.

    6. Node.js (servidor) e Deno (runtime moderno).