Capítulo 1 de 12

JavaScript em HTML: tag script, defer e primeiro Hello World

verificado a 7 Setembro 2026 · 6 min

Resposta rápida

Para acrescentar JavaScript a uma página HTML, cria um ficheiro app.js e carrega-o com <script src="app.js" defer></script> no head, ou mesmo antes de </body> sem defer. Escreve console.log('Hello World'); no ficheiro, abre a página e a consola (F12): a mensagem aparece.

No fim deste capítulo, vais saber ligar um ficheiro JavaScript a uma página HTML, escolher entre o head e o fim do body, e mostrar uma mensagem com alert() ou na consola do navegador.

Este primeiro capítulo instala tudo aquilo de que os seguintes precisam: uma página HTML, um ficheiro JavaScript ligado a essa página e duas formas de mostrar uma mensagem para confirmar que a ligação funciona. Vinte minutos chegam. No fim, terás escrito e executado o teu primeiro programa JavaScript num navegador.

O que é o JavaScript (e o que não é)

O JavaScript é a linguagem de programação dos navegadores web. O HTML descreve o conteúdo de uma página, o CSS o seu aspeto, o JavaScript o seu comportamento: reagir a um clique, validar um formulário, mudar o texto de um elemento, carregar dados. Cada navegador traz um motor que lê e executa esse código.

Duas precisões que evitam pesquisas inúteis:

  • O JavaScript não tem nada a ver com o Java. O nome vem de 1995 e de uma decisão de marketing. As duas linguagens não partilham sintaxe nem utilização.
  • Já não se limita ao navegador. Com o Node.js, a mesma linguagem escreve servidores e ferramentas. Este tutorial fica-se pelo navegador: é o ambiente mais simples para aprender e já está instalado na tua máquina.

Criar a página HTML de partida

Abre um editor de código (o Visual Studio Code serve muito bem) e cria uma pasta tutoriel-js. Lá dentro, um ficheiro index.html com a estrutura mínima de um documento:

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
</head>
<body>
  <h1>Bonjour</h1>
  <!-- Le contenu de votre site ira ici -->
</body>
</html>

Abre esse ficheiro no navegador (duplo clique, ou arrasta-o para a janela). A página mostra «Bonjour». Ainda sem nada de JavaScript.

A tag script: onde colocar o JavaScript

O JavaScript entra numa página pela tag <script>. Ela pode conter o código diretamente ou apontar para um ficheiro externo com o atributo src. Há três sítios possíveis, e a escolha tem consequências.

No fim do body: simples e seguro

index.html
<body>
  <h1>Bonjour</h1>
  <script src="app.js"></script>
</body>

O navegador lê o HTML de cima para baixo. Quando chega à tag, o h1 já existe: o script pode manipulá-lo. É o sítio clássico e funciona sempre.

No head com defer: a escrita moderna

index.html
<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
  <script src="app.js" defer></script>
</head>

O defer pede ao navegador que descarregue o ficheiro de imediato, mas que só o execute depois de ler o HTML todo. Ficas com o melhor dos dois: a transferência começa cedo, o código corre quando a página está pronta. Os scripts defer executam-se pela ordem em que estão escritos.

No head sem mais nada: o erro clássico

html
<head>
  <script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>

Aqui o script executa-se antes de o h1 estar construído. Qualquer tentativa de o ler devolve null, e o erro «Cannot read properties of null» aparece na consola. Se vires este erro no capítulo 9, verifica primeiro onde está a tua tag.

E o async?

O async também transfere em paralelo, mas executa o script assim que ele chega, sem esperar pelo HTML nem pelos outros scripts. É útil para um script independente (medição de audiência, por exemplo), não para código que manipula a página. Neste tutorial, fica com o defer.

Script inline ou ficheiro externo?

O código também pode ser escrito diretamente na página:

html
<script>
  console.log('Hello World');
</script>

Prático para um teste de três linhas, mau para tudo o resto: o código não é reutilizável de uma página para outra, não fica em cache no navegador e mistura-se com o HTML. A partir deste capítulo, trabalhamos num ficheiro separado, app.js, colocado ao lado do index.html.

Primeiro código: «Hello World» com alert()

Cria o app.js na mesma pasta do index.html e liga-o com a tag defer vista acima. No ficheiro:

app.js
alert('Hello World!');

Recarrega a página: uma caixa de diálogo mostra a mensagem. O alert() é uma função do navegador que bloqueia a página até se clicar em OK. Serve para confirmar que um script está a correr; não se usa num site a sério, onde interrompe o utilizador.

A ferramenta a sério: console.log() e a consola do navegador

Substitui o conteúdo do app.js:

app.js
console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);

Recarrega: nada muda no ecrã. Abre as ferramentas de desenvolvimento com a tecla F12 (ou clique direito, «Inspecionar») e depois o separador Consola. As três linhas aparecem lá:

code
Hello World!
Titre de la page : Mon premier script
5

A consola é o sítio onde o JavaScript fala. Mostra o que lhe pedes com console.log(), mas também todos os erros, com o nome do ficheiro e o número da linha. Mantém-na aberta durante todo o tutorial: é a tua primeira ferramenta de depuração e permite até escrever JavaScript diretamente, sem ficheiro, para experimentar uma ideia.

Os teus primeiros erros, e como os ler

Se não aparecer nada, a consola diz porquê. Os três casos mais frequentes nesta fase:

  • «Failed to load resource: 404»: o ficheiro app.js não foi encontrado. Confirma que está na mesma pasta do index.html e que o nome é idêntico, maiúsculas incluídas.
  • «Uncaught SyntaxError»: um erro de escrita no código, muitas vezes um parêntese ou uma plica por fechar. O número da linha leva-te até lá.
  • Nada de nada, nem sequer um erro: o navegador está a mostrar uma versão em cache. Recarrega com Ctrl+F5 (Cmd+Shift+R no Mac).

Em resumo

  • O JavaScript entra numa página por <script src="app.js" defer></script> no head, ou pela mesma tag sem defer no fim do body.
  • Um ficheiro externo vale mais do que um script inline assim que o código passa das poucas linhas.
  • O alert() confirma que um script está a correr; o console.log() e a consola (F12) são as ferramentas do dia a dia.
  • Um erro lê-se na consola: ficheiro, linha, mensagem.

No capítulo seguinte, Variáveis e tipos de dados, o programa começa a guardar valores. E se preferires primeiro uma vista de conjunto do percurso, o guia para aprender JavaScript apresenta os doze capítulos e um plano de trinta dias.

ExercícioCria uma página que mostre «Bem-vindo» na consola ao carregar e, no mesmo ficheiro, um alerta que indique o título da página graças a document.title. Confirma que a ordem das duas mensagens é mesmo a do teu código.

Erros frequentes

O script é carregado antes do HTML Um script no head sem defer executa-se antes de a página estar construída: document.querySelector('h1') devolve null. Acrescenta defer, ou põe a tag no fim do body.
O caminho do ficheiro está errado Um src="app.js" procura o ficheiro ao lado da página HTML. O separador Rede das ferramentas de desenvolvimento mostra o 404; a consola mostra «Failed to load resource».
Maiúsculas e minúsculas App.js e app.js são dois ficheiros diferentes na maioria dos servidores, mesmo que o Windows os confunda em local.
O Java não é JavaScript Os dois nomes parecem-se, as linguagens não. Um tutorial de Java não te vai ajudar aqui.
Newsletter

Os novos testes, tutoriais e projetos, por e-mail.

Testes reproduzíveis, código versionado, resultados datados. Nunca spam.