Scripts HTML
Em HTML, um script é um pequeno programa incorporado que pode adicionar interatividade ao seu site. Aprenda a adicionar e acionar scripts com o W3Docs.
Um script é um pequeno trecho de código incorporado em páginas web para torná-las dinâmicas e interativas. Por exemplo, com scripts você pode criar uma caixa de mensagem pop-up, um menu suspenso ou validar um formulário antes de ser enviado. O JavaScript é a linguagem de script mais comum usada em sites.
Esta página explica como adicionar JavaScript a um documento HTML, onde posicionar o elemento <script>, como controlar quando ele é executado com defer e async, e como fornecer um fallback para usuários sem JavaScript. Para a lista completa de atributos do <script>, consulte a referência da tag <script> dedicada.
Como Adicionar Scripts
O elemento <script> pode conter código inline ou referenciar um arquivo externo. Há duas maneiras de usá-lo:
1. Script inline — escreva o código diretamente entre as tags de abertura e fechamento:
<script>
document.body.style.backgroundColor = "lightyellow";
</script>2. Script externo — aponte o atributo src para um arquivo .js. O elemento deve estar vazio (sem código entre as tags):
<script src="scripts.js"></script>Se você precisar do mesmo código em muitas páginas web, coloque-o em um arquivo .js separado e referencie-o com src. Arquivos externos são armazenados em cache pelo navegador, mantêm seu HTML limpo e permitem reutilizar um único script em todo o site.
Os scripts geralmente são colocados no <head> ou logo antes da tag de fechamento </body>, mas um <script> pode aparecer em qualquer lugar do documento. O posicionamento importa por causa de como o navegador analisa a página — veja Onde posicionar um script abaixo.
Exemplo de manipulação inline do DOM
Um script inline pode ler e modificar a página usando o DOM. O exemplo abaixo encontra um parágrafo pelo seu id e reescreve seu texto quando o script é executado:
Script Inline — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Inline script example</title>
</head>
<body>
<p id="message">Original text.</p>
<script>
document.getElementById("message").textContent = "Changed by JavaScript!";
</script>
</body>
</html>Como o <script> vem depois do <p>, o elemento já existe no DOM quando o script é executado, então getElementById o encontra. Se o script fosse executado antes do elemento, retornaria null.
Observação: No HTML5, o atributo type é opcional (com padrão text/javascript) e é considerado obsoleto para scripts JavaScript.
defer vs async
Quando um script está no <head>, o navegador normalmente para de analisar o HTML, faz o download do script, executa-o e só então continua. Em scripts grandes, isso bloqueia a renderização e deixa a página mais lenta. Os atributos defer e async (que se aplicam apenas a scripts externos com src) resolvem isso fazendo o download do script em paralelo com a análise do HTML — eles diferem em quando o script é executado.
| Atributo | Download | Momento de execução | Mantém a ordem da fonte? |
|---|---|---|---|
| (nenhum) | Bloqueia a análise durante o download | Imediatamente, bloqueando a análise | Sim |
defer | Em paralelo com a análise | Após o HTML ser totalmente analisado, logo antes do DOMContentLoaded | Sim |
async | Em paralelo com a análise | Assim que o download termina, pausando a análise naquele momento | Não — o que carregar primeiro executa primeiro |
<head>
<!-- Runs in order, after the whole page is parsed -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Runs as soon as it loads, order not guaranteed -->
<script src="analytics.js" async></script>
</head>Use defer para scripts que dependem do DOM ou uns dos outros (a maior parte do código de aplicação). Use async para scripts independentes que não dependem de nada mais, como scripts de análise ou tags de anúncio.
Onde posicionar um script
O lugar onde você coloca um <script> determina se os elementos da página existem quando ele é executado.
Um script colocado logo antes do fechamento </body> é executado após todo o HTML acima ter sido analisado, portanto pode acessar com segurança qualquer elemento da página:
<body>
<h1 id="title">Loading…</h1>
<!-- The <h1> already exists, so this works -->
<script>
document.getElementById("title").textContent = "Ready!";
</script>
</body>O mesmo efeito pode ser alcançado colocando o script no <head> com defer, porque scripts adiados aguardam a conclusão da análise:
<head>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">Loading…</h1>
</body>Um <script> simples no <head> (sem defer) é executado antes de o corpo ser analisado, então document.getElementById("title") retornaria null.
type="module"
Defina type="module" para carregar o script como um módulo JavaScript. Módulos podem usar import e export para compartilhar código entre arquivos, executam no modo estrito automaticamente e são adiados por padrão (são executados após o HTML ser analisado, mesmo sem o atributo defer):
<script type="module">
import { greet } from "./utils.js";
greet("World");
</script>Como Acionar Scripts
Você pode especificar se deseja que um script seja executado automaticamente (assim que a página carrega) ou após o usuário ter realizado alguma ação (como passar o mouse sobre ou clicar em um link). Se quiser que o script seja executado quando o usuário realizar alguma ação (chamada de evento), você deve usar manipuladores de eventos para informar ao navegador qual evento é responsável por acionar o script.
Os manipuladores de eventos podem ser especificados como atributos dentro das tags HTML ou anexados via JavaScript usando métodos como addEventListener.
Exemplo da tag HTML <script> com um manipulador de eventos:
Exemplo de Manipulador de Eventos — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>O elemento <noscript>
Embora muitos navegadores modernos suportem JavaScript, alguns navegadores mais antigos não conseguem executar código JavaScript, e os usuários também podem ter o JavaScript desabilitado em seus navegadores. Para fornecer informações alternativas para navegadores sem JavaScript ou com JavaScript desabilitado, use a tag <noscript>. O conteúdo desta tag é exibido ao usuário apenas quando o JavaScript está desabilitado ou quando o navegador não suporta JavaScript.
Exemplo da tag HTML <noscript>:
Meu primeiro exemplo com JavaScript! — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="output"></p>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>If JavaScript is disabled or the browser doesn't support it, the content inside the noscript element is shown instead.</p>
</body>
</html>Aqui o <p id="output"> é declarado antes do <script>, então o parágrafo já existe no DOM quando o script é executado e getElementById consegue encontrá-lo. Quando o JavaScript está habilitado, o usuário vê "My first JavaScript example!"; quando está desabilitado, o navegador ignora o script e exibe a mensagem do <noscript>.
Relacionados
- Tag HTML
<script>— referência completa de atributos (src,type,defer,asynce mais). - Tag HTML
<noscript>— conteúdo de fallback para usuários sem JavaScript. - Eventos JavaScript — responda a cliques, passagens do mouse e outras ações do usuário.