Seu primeiro script JavaScript

JavaScript (JS) é uma linguagem de programação que permite adicionar interatividade e comportamento dinâmico a páginas web. Originalmente criada para rodar no navegador, hoje o JS também pode ser executado em servidores, dispositivos e até mesmo em bancos de dados. Nesta aula, vamos explorar os ambientes onde o JS roda, como incluí-lo em uma página HTML usando a tag <script>, entender os atributos defer e async para controle de carregamento, e escrever nosso primeiro programa: o clássico 'Olá, mundo'.

Onde o JS roda (browser e fora dele)

O JavaScript foi concebido para ser executado em navegadores web, como Chrome, Firefox, Safari e Edge. No navegador, o JS tem acesso ao DOM (Document Object Model), que permite manipular elementos HTML, responder a eventos (cliques, teclas) e fazer requisições a servidores. Este é o ambiente mais comum para desenvolvedores front-end.

Fora do navegador, o JS pode rodar em servidores através do Node.js, um runtime baseado no motor V8 do Chrome. Com Node.js, você pode criar aplicações back-end, ferramentas de linha de comando, servidores web e muito mais. Além disso, existem outros ambientes como Deno (alternativa moderna ao Node) e até mesmo bancos de dados como MongoDB que usam JS para consultas. Portanto, aprender JS hoje é essencial tanto para front-end quanto para back-end.

Tag script (inline, interno e externo)

A tag <script> é a forma de incluir JavaScript em uma página HTML. Existem três maneiras de usá-la:

• Inline: o código é escrito diretamente dentro de atributos HTML, como onclick. Exemplo: <button onclick="alert('Clicou!')">Clique</button>. É pouco usado por misturar estrutura e comportamento.
• Interno: o código é colocado dentro de uma tag <script> no HTML. Exemplo: <script>console.log('Olá');</script>. Útil para pequenos scripts.
• Externo: o código fica em um arquivo separado (ex.: script.js) e é referenciado pelo atributo src. Exemplo: <script src="script.js"></script>. É a melhor prática para scripts maiores, pois separa o código e permite caching.

Quando usamos o modo externo, o navegador faz uma requisição HTTP adicional para baixar o arquivo. Isso pode impactar o desempenho, mas é compensado pelo cache e pela organização.

// Exemplo de script interno (dentro do HTML)
<script>
  console.log('Script interno executado');
</script>

// Exemplo de script externo (arquivo app.js)
console.log('Script externo executado');

defer e async

Quando o navegador encontra uma tag <script>, por padrão ele para de processar o HTML, baixa e executa o script, e só depois continua. Isso pode atrasar a renderização da página. Para resolver isso, existem os atributos defer e async:

• defer: faz o download do script em paralelo com o HTML, mas a execução é adiada até que o HTML termine de ser processado. Os scripts com defer são executados na ordem em que aparecem. Ideal para scripts que dependem do DOM completo.
• async: também baixa o script em paralelo, mas a execução ocorre assim que o download termina, independentemente do estado do HTML. A ordem de execução não é garantida (o que terminar primeiro executa primeiro). Ideal para scripts independentes, como analytics.

Ambos os atributos só funcionam com scripts externos (com src). Scripts inline são ignorados por esses atributos.

// Exemplo de uso no HTML
<script src="analytics.js" async></script>
<script src="app.js" defer></script>

Olá, mundo

Vamos criar nosso primeiro script JavaScript. O clássico 'Olá, mundo' pode ser exibido de várias formas: no console, em um alerta ou diretamente na página. Aqui estão exemplos de cada um:

// Exibe no console do navegador
console.log('Olá, mundo!');

// Exibe em uma caixa de alerta
alert('Olá, mundo!');

// Exibe na página (substitui o conteúdo de um elemento)
document.write('Olá, mundo!');

// Exibe em um elemento específico (precisa de um elemento com id="saida")
document.getElementById('saida').innerText = 'Olá, mundo!';

Para testar, crie um arquivo HTML simples com um script interno ou externo. Abra o arquivo no navegador e veja o resultado no console (F12) ou na tela.

Boas práticas

• Prefira scripts externos para separar o código HTML do JavaScript. • Coloque as tags <script> no final do <body> ou use defer para não bloquear a renderização. • Evite scripts inline para manter o código limpo. • Use nomes de arquivos significativos (ex.: app.js, main.js). • Sempre teste no console do navegador para depuração.

Referências

• MDN: Tag script
• MDN: Atributo defer
• MDN: Atributo async
• W3Schools: Onde colocar JavaScript
• Node.js: Sobre o Node.js
• MDN: console.log

Exercícios

1. Crie um arquivo HTML que exiba um alerta com a mensagem 'Meu primeiro script!' usando JavaScript inline no atributo onclick de um botão.

Ver resposta

✓ Resposta:

<!DOCTYPE html>
<html>
<head>
  <title>Exercício 1</title>
</head>
<body>
  <button onclick="alert('Meu primeiro script!')">Clique aqui</button>
</body>
</html>

2. Escreva um script interno que exiba 'Olá, mundo!' no console do navegador.

Ver resposta

✓ Resposta:

<script>
  console.log('Olá, mundo!');
</script>

3. Crie um arquivo externo chamado 'app.js' com o código console.log('Script externo'); e inclua-o em uma página HTML usando a tag script com src.

Ver resposta

✓ Resposta:

Arquivo app.js:

console.log('Script externo');

Arquivo HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Exercício 3</title>
</head>
<body>
  <script src="app.js"></script>
</body>
</html>

4. Explique a diferença entre os atributos defer e async.

Ver resposta

✓ Resposta:

Ambos permitem o download assíncrono do script (em paralelo com o HTML). A diferença está na execução: defer executa o script somente após o HTML ser completamente processado, mantendo a ordem dos scripts. async executa o script assim que o download termina, independentemente do estado do HTML, e não garante ordem de execução.

5. No exercício 3, adicione os atributos defer e async ao script e explique o comportamento esperado.

Ver resposta

✓ Resposta:

<script src="app.js" defer></script>
<script src="app.js" async></script>

Com defer, o script será executado após o HTML ser totalmente carregado, mantendo a ordem relativa. Com async, o script será executado assim que for baixado, sem esperar o HTML, e pode executar antes ou depois de outros scripts async, dependendo do tempo de download.