Tag HTML <script>

A tag HTML <script> declara scripts do lado do cliente — quase sempre JavaScript — num documento HTML. Os scripts adicionam interatividade: validação de formulários, atualizações dinâmicas de conteúdo, manipulação de imagens e resposta a eventos do utilizador. A tag pode conter o script inline (entre as tags de abertura e fechamento) ou carregar um ficheiro externo via atributo src. Para uma visão mais ampla sobre como adicionar scripts a uma página, consulte HTML scripts.

Perigo

Se você conectar um ficheiro externo com scripts, não incorpore o script na mesma tag <script>.

A tag HTML <script> pode ser colocada no elemento <head>, bem como no elemento <body>. Scripts que devem ser executados primeiro são frequentemente colocados no elemento <head> com defer, ou no final do elemento <body>. A tag <script> pode ser usada muitas vezes num documento HTML.

Sintaxe

A tag <script> sempre vem em pares — um <script> de abertura e um </script> de fechamento. O código inline fica entre eles; para um ficheiro externo, deixe a tag vazia e aponte src para o ficheiro:

<script>
  // inline JavaScript here
  console.log("Hello from inline script");
</script>

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

Exemplo de script inline

Para selecionar um elemento HTML, JavaScript normalmente usa o método document.getElementById():

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p id="example"></p>
    <script>
      document.getElementById("example").innerHTML = "My first JavaScript code";
    </script>
  </body>
</html>

Experimente Você Mesmo »

Carregando um script externo

Em projetos reais, você quase sempre mantém JavaScript num ficheiro .js separado e carrega-o com src. Isso mantém o seu HTML limpo, permite que o navegador faça cache do script e permite que o mesmo ficheiro seja reutilizado em várias páginas:

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

Alguns pontos importantes a notar:

Não misture os dois. Quando src está presente, qualquer código escrito entre as tags é ignorado. Use código inline ou um src, não ambos na mesma tag.
type="text/javascript" é desnecessário. JavaScript é a linguagem de scripts padrão no HTML moderno, portanto você pode omitir type completamente. Defina type apenas quando realmente precisar de type="module" (veja abaixo).
charset não tem efeito em scripts externos hoje. A codificação de caracteres é retirada do cabeçalho HTTP Content-Type do ficheiro (e da própria codificação da página), portanto o atributo charset em <script> está obsoleto — não confie nele.

`async` vs. `defer`

Por padrão, quando o navegador encontra um <script src="..."> durante o parsing do HTML, ele para o parsing, baixa o script, executa-o e só então continua. Isso bloqueia a renderização. Os atributos boolean async e defer corrigem isso — ambos baixam o script em paralelo sem bloquear o parsing — mas diferem em quando o script é executado:

Atributo	Bloqueia o parsing?	Quando é executado	Ordem
(nenhum)	Sim	Imediatamente quando encontrado	Na ordem do documento
`defer`	Não	Após o HTML ser totalmente parseado, logo antes do `DOMContentLoaded`	Na ordem do documento
`async`	Não	Assim que termina o download	Quem terminar primeiro (fora de ordem)

<!-- Runs after the page is parsed, in order. Safe for code that touches the DOM. -->
<script src="app.js" defer></script>

<!-- Runs as soon as it loads, order not guaranteed. Good for independent scripts
     like analytics that don't depend on other scripts or the parsed DOM. -->
<script src="analytics.js" async></script>

Use defer quando os scripts dependem do DOM ou uns dos outros (o caso mais comum). Use async para scripts independentes e sem dependência de ordem, como pixels de rastreamento.

Informação

async e defer são atributos boolean — a simples presença deles os ativa. Escreva-os sem valor (defer), não no estilo XHTML antigo defer="defer". O mesmo se aplica a outros atributos boolean como disabled e checked. Ambos os atributos são ignorados em scripts inline (aqueles sem src).

Posicionamento do script: `<head>` vs. fim do `<body>`

Onde você coloca <script> importa porque um script simples bloqueia o parsing:

<head> com defer — a recomendação moderna. O download começa cedo enquanto o HTML ainda está sendo parseado, e a execução aguarda até que o DOM esteja pronto. Você obtém carregamento rápido sem bloqueio.
Fim do <body> — a abordagem clássica. Quando o parser chega ao script, o DOM inteiro já existe, portanto o script pode consultar elementos com segurança. Nenhum atributo é necessário.

<head>
  <script src="app.js" defer></script>
</head>
<body>
  <!-- page content -->
</body>

Evite um <script src> simples (sem async/defer) no <head>, pois ele bloqueia a página de renderizar até que o script seja baixado e executado.

Módulos ES com `type="module"`

Definir type="module" transforma o script num módulo ES. Os scripts de módulo se comportam de forma diferente dos scripts clássicos:

Eles suportam import / export, permitindo dividir o código em vários ficheiros.
Eles são adiados por padrão — os scripts de módulo sempre aguardam até que o HTML seja parseado (sem necessidade de defer).
Eles sempre executam em strict mode e têm o seu próprio escopo de nível superior (variáveis não vazam para o objeto global).

<script type="module" src="main.js"></script>

<script type="module">
  import { greet } from "./greet.js";
  greet("World");
</script>

Para suportar navegadores muito antigos que não entendem módulos, você pode combinar um módulo com um script de fallback nomodule — os navegadores modernos executam o módulo e ignoram o fallback; os mais antigos fazem o contrário.

Uma nota sobre XHTML e marcação legada

No HTML moderno você não precisa de um atributo type, e não precisa envolver o conteúdo do script inline numa seção CDATA. Esse wrapper //<![CDATA[ ... //]]> só importava no XHTML, onde o conteúdo do script era parseado como marcação e caracteres especiais como < e & precisavam ser escapados ou protegidos. Se você está escrevendo HTML padrão, pode ignorar isso.

Atributos

Atributo	Valor	Descrição
`src`	URL	URL de um ficheiro de script externo (relativo ou absoluto).
`async`	(boolean)	O script externo é buscado em paralelo e executado assim que estiver disponível, sem bloquear o parsing.
`defer`	(boolean)	O script externo é buscado em paralelo e executado, em ordem, após o HTML ser parseado.
`type`	tipo de mídia	Geralmente omitido (JavaScript é o padrão). Defina como `module` para carregar um módulo ES.
`charset`	charset	Obsoleto — não tem efeito; a codificação vem do `Content-Type` HTTP do ficheiro.
`crossorigin`	anonymous \| use-credentials	Configura CORS para a requisição do script externo.
`integrity`	hash	Hash de Subresource Integrity usado para verificar o script buscado.

A tag <script> suporta os Atributos Globais e os Atributos de Evento.

Prática

Qual atributo permite que um script externo seja baixado sem bloquear o parsing e executado, em ordem, após o HTML ser parseado?

deferasynccharsettype='text/javascript'