Como Inserir JavaScript no HTML
É o JavaScript que transforma páginas estáticas em experiências interativas permitindo criar botões que respondem a cliques, validações de formulários, animações e muito mais.
Mas antes de sair escrevendo código, existe uma dúvida essencial: qual é a forma correta de inserir JavaScript no HTML?
Neste guia, você vai aprender as três principais formas de fazer isso interno, externo e inline entendendo quando usar cada uma, suas vantagens e boas práticas utilizadas no mundo real.
A proposta aqui é simples: explicar de forma clara, direta e sem complicação, para que você consiga aplicar o conhecimento imediatamente, mesmo começando do zero.
🧩 Formas de Inserção de JavaScript
Existem três formas principais de incluir JavaScript em páginas HTML:
Interno → Dentro de uma tag <script> no próprio arquivo HTML. Ideal para → Testes, experimentos rápidos ou scripts pequenos.
Externo → Em um arquivo .js separado. Ideal para → Projetos reais e códigos grandes.
Inline → Dentro de um atributo HTML. Ideal para → Ações simples (ex.: um clique, um alerta)
Vamos ver cada uma em detalhe, com exemplos e boas práticas.
💡 JavaScript Interno
<script>
alert("Olá, JavaScript!");
</script>
É a forma mais comum nos primeiros passos.
O script é escrito dentro do próprio arquivo HTML, entre as tags <script> e </script>.
🔸 Como funciona:
O navegador encontra a tag <script> durante a leitura do HTML e executa imediatamente o código dentro dela.
💬 Esse método é ótimo para testes rápidos, demonstrações ou páginas simples.
⚠️ Cuidados com a posição da tag <script>
Há duas principais posições possíveis:
🔹 No <head> (Cabeçalho)
<head>
<script>
alert("Executando antes de carregar o corpo da página!");
</script>
</head>
Neste caso, o script é executado antes do HTML completo ser carregado. Isso pode causar erros se o script tentar acessar elementos que ainda não foram renderizados (por exemplo, document.getElementById("botao") pode não funcionar).
Solução: use o atributo defer ou DOMContentLoaded (veremos adiante).
🔹 Antes do fechamento do <body>
<body>
<h1>Página carregada com sucesso!</h1>
<script>
alert("Agora o script roda após o conteúdo!");
</script>
</body>
💡 Melhor prática:
Posicionar o <script> no final do corpo é a abordagem mais segura e recomendada, pois garante que todos os elementos HTML já existam quando o JS é executado.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu primeiro JavaScript</title>
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<script>
alert("Olá, JavaScript!");
</script>
</body>
</html>
📌 Assim que a página for carregada, aparecerá uma caixinha com a mensagem.
Esse tipo de script é perfeito para testes e aprendizados rápidos.
🔎 Veja como fica no VScode
Outro exemplo prático:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>JavaScript Interno</title>
</head>
<body>
<h1>Exemplo de Script Interno</h1>
<script>
alert("Este é um script interno!");
console.log("Executando o JavaScript diretamente no HTML...");
</script>
</body>
</html>
💻 JavaScript Externo
<script src="codigo.js"></script>
E no arquivo codigo.js:
alert("Arquivo externo conectado com sucesso!");
💡 Vantagem: separa código da estrutura HTML, deixando o projeto organizado.
Você também pode nomear a arquivo scripts.js ou como eu fiz codigo.js desde que: o nome do arquivo seja o mesmo do código. Para facilitar a manutenção, o ideal é guardar o JS em um arquivo separado com extensão .js.
Para facilitar a manutenção, o ideal é guardar o JS em um arquivo separado com extensão .js.
Isso mantém o HTML limpo e o código mais organizado, especialmente em projetos grandes.
🧮 Exemplo prático para você entender melhor:
let valor1 = 12;
let valor2 = 8;
console.log("Soma:", valor1 + valor2);
console.log("Subtração:", valor1 - valor2);
console.log("Multiplicação:", valor1 * valor2);
console.log("Divisão:", valor1 / valor2);
console.log("Resto da divisão:", valor1 % valor2);
console.log("Potência:", valor1 ** 2);
Saída no console:
Soma: 20
Subtração: 4
Multiplicação: 96
Divisão: 1.5
Resto da divisão: 4
Potência: 144
🔎 Veja como fazer no VScode 👇
🔎 Veja o resultado como fica no Live Server
🔹 Vantagens:
1. Código mais limpo e fácil de gerenciar;
2. O mesmo script pode ser reutilizado em várias páginas;
3. Navegadores armazenam o .js em cache, acelerando o carregamento;
4. Facilita testes e manutenção.
⚙️ Atributos úteis na tag <script>
A tag <script> permite alguns atributos especiais que controlam o comportamento do carregamento.
Atributo Função Exemplo
src → Define o arquivo externo → <script src="app.js"></script>
defer → Espera o HTML acabar de carregar antes de rodar o JS → <script src="app.js" defer> </script>
async → Carrega o script de modo assíncrono (sem bloquear o HTML) → <script src="analytics.js" async></script>
💬 Dica prática:
● Use defer para scripts normais (ele garante execução na ordem).
● Use async apenas para scripts independentes, como rastreadores ou anúncios.
Exemplo:
Arquivo principal (index.html)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>JavaScript Externo</title>
</head>
<body>
<h1>Script Externo Conectado</h1>
<script src="codigo.js"></script>
</body>
</html>
Arquivo de script (codigo.js)
alert("Olá! Este script foi carregado de um arquivo externo.");
console.log("Arquivo externo funcionando!");
1. Código mais limpo e fácil de gerenciar;
2. O mesmo script pode ser reutilizado em várias páginas;
3. Navegadores armazenam o .js em cache, acelerando o carregamento;
4. Facilita testes e manutenção.
⚡ JavaScript Inline
Nessa forma, o código JS é inserido diretamente dentro de
um atributo HTML.
É rápido, mas não é considerado boa
prática em projetos maiores.
🔹 Forma simples (iniciante)
<button onclick="alert('Você clicou!')">Clique aqui</button>
onclick → é um evento (quando o usuário clica)
alert() → é uma função do JavaScript que mostra uma mensagem
🔍 O que está acontecendo aqui?
👉 Quando o usuário clica no botão, o navegador executa o código JavaScript.
⚠️ Evite usar este formato em projetos grandes — ele é útil apenas para demonstrações e testes rápidos.
🔹 Forma profissional (recomendada)
<button id="btn">Clique aqui</button>
<script>
document.getElementById("btn").addEventListener("click", () => {
alert("Você clicou!");
});
</script>
✅ Por que essa forma é melhor?
Mantém o HTML separado do JavaScript
Deixa o código mais organizado
Facilita manutenção e crescimento do projeto
Um botão com id= é um elemento HTML que recebe um identificador único, permitindo que o JavaScript o encontre e interaja com ele.
O id funciona como um identificador único, permitindo que o JavaScript encontre e interaja com o elemento na página.
Sem o id, o JavaScript não saberia qual elemento deve manipular.
veja abaixo com fica no 🔎 VScode 👇
🧩 O papel do console.log()
Quase todos os desenvolvedores usam o console do navegador para testar e verificar seus códigos.
console.log("Teste de saída no console!");
Para ver o resultado:
1. Abra o site;
2. Pressione F12 ou Ctrl + Shift + I;
3. Vá até a aba “Console”.
O console.log() não aparece na tela do usuário, apenas no painel de desenvolvedor — perfeito para depuração.
🔍 Ordem de execução e fluxo do JS
Por padrão, o JavaScript roda de cima para baixo, linha por linha.
console.log("1 - Início do script");
console.log("2 - Executando instrução");
console.log("3 - Fim!");
💡 O navegador lê e executa exatamente nessa sequência.
Se uma linha tiver erro, o código para ali e mostra a mensagem no console.
🔸 Por isso, a ordem das tags <script> dentro do HTML importa muito.
Em projetos reais, recomenda-se sempre colocar os scripts antes do fechamento do </body>, para que o HTML inteiro já esteja carregado quando o JS for executado.
⚡ JS é uma linguagem orientada a eventos
Na web, muitas coisas acontecem em resposta às ações do usuário, como:
● Clicar em um botão;
● Passar o mouse sobre algo;
● Digitar em um campo de texto;
● Enviar um formulário;
● Rolar uma página.
Essas ações são chamadas de eventos.
💡 Exemplo simples:
<button onclick="alert('Botão clicado!')">Clique em mim</button>
Neste caso, o evento “click” é o que dispara o comando dentro da função alert().
Mais adiante, você aprenderá a capturar eventos com funções JavaScript para controlar o comportamento da página de forma mais avançada.
🧠 O conceito de “variável” (introdução)
Para que um script possa fazer cálculos ou armazenar informações, ele precisa de um lugar para guardá-las — e esse lugar é chamado de variável.
Imagine as variáveis como caixinhas com rótulos:
● A caixinha guarda o valor;
● O rótulo (nome da variável) serve para identificar e reutilizar depois.
💡 Exemplo:
var nome = "Maria";
alert("Olá, " + nome + "!");
Nesse código:
● Criamos uma variável chamada nome;
● Guardamos dentro dela a palavra "Maria";
● Exibimos a mensagem “Olá, Maria!” na tela.
Você aprenderá tudo sobre variáveis, tipos de dados e operações.
🧩 Diferença entre JavaScript, Java e JSON
JavaScript → Linguagem de script → Web, interatividade, navegador
Java → Linguagem compilada e completa → Aplicações desktop, mobile (Android)
JSON (JavaScript Object Notation) → Formato de dados → Guardar e transferir informações
💬 Apesar dos nomes parecidos, são ferramentas diferentes.
Exemplo prático:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>JavaScript Inline</title>
</head>
<body>
<button onclick="alert('Botão clicado!')">Clique aqui</button>
</body>
</html>
Ao clicar no botão, o comando dentro de onclick é executado.
💬 Outros exemplos de eventos inline:
onclick → Ao clicar → <button onclick="acao()">Clique</button>
onmouseover → Ao passar o mouse →
<div onmouseover="alert('Mouse sobre mim!')">Passe o mouse</div>
onchange → Ao mudar um valor (inputs) → <input onchange="alert('Valor alterado!')">
✨ Atenção:
Use-os apenas em exemplos simples.
Em aplicações reais, é melhor usar event listeners (que você aprenderá
em aulas de eventos).
🧩 Comparando as três formas
|
Método |
Prático |
Organização |
Desempenho |
Recomendado? |
|
Interno |
Simples |
Médio |
Bom |
Para testes e aprendizados |
|
Externo |
Modular |
Excelente |
Excelente |
✅ Melhor prática em projetos reais |
|
Inline |
Rápido |
Baixo |
Bom |
❌ Evitar em projetos complexos |
Escolha sempre o método mais limpo e sustentável.
🧠 Ordem de execução e boas práticas
O JavaScript é executado na ordem em que aparece no documento, o que significa que se seu script depende de um elemento HTML, ele deve ser carregado após o elemento.
Exemplo errado:
<script>
document.getElementById("mensagem").innerText = "Olá!";
</script>
<p id="mensagem"></p>
🚫 Erro: o script tenta alterar algo que ainda não existe no DOM.
Exemplo correto:
<p id="mensagem"></p>
<script>
document.getElementById("mensagem").innerText = "Olá!";
</script>
✅ Funciona porque o elemento já foi carregado.
💬 Alternativamente, use o evento:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("mensagem").innerText = "Página carregada!";
});
Isso garante que o código só rode depois que a estrutura
HTML estiver pronta.
👩💻 Exercício Prático 1
Crie um arquivo chamado formas_js.html seguindo estas etapas:
1. Crie uma página com um título e um botão.
2. Faça com que ao clicar no botão apareça um alerta.
3. Teste usando as 3 formas de inserção:
○ Interna (<script>);
○ Externa (arquivo.js);
○ Inline (onclick).
💡 Exemplo da versão externa:
index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Teste com JS Externo</title>
</head>
<body>
<h1>Página com script externo</h1>
<button id="btn">Clique aqui</button>
<script src="script.js" defer></script>
</body>
</html>
script.js
document.getElementById("btn").onclick = function() {
alert("Botão acionado com JavaScript externo!");
};
Abra o arquivo no navegador e teste.
🧩 Depuração simples no navegador
Erros em JavaScript não quebram a página inteira, mas
impedem o script de rodar.
Use sempre o console do desenvolvedor
(F12) para ver mensagens de erro.
💻 Comando útil:
console.log("Código executado com sucesso!");
Você verá o resultado dessa linha na aba “Console”.
🧠 Hoje você aprendeu:
✔
Como inserir JavaScript de forma correta no HTML;
✔ As três principais formas: Interno,
Externo e Inline;
✔ O impacto da ordem e posição
da tag <script>;
✔ O uso de defer e async;
✔ Boas práticas para organização e
manutenção de código.
💡 Desafio Final
Crie uma página com:
1. Um campo de texto e um botão;
2. Quando o usuário clicar no botão, deve aparecer um alerta exibindo o texto digitado.
🔹 Faça isso em duas versões:
● Uma com JS interno;
● Outra com o script em arquivo externo (.js).
💬 Dica:
var nome = document.getElementById("campo").value;
alert("Olá, " + nome + "!");
🔬 Exercícios práticos 2
Crie um arquivo chamado primeiro_script.html com o seguinte conteúdo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu Primeiro Script</title>
</head>
<body>
<h1>Bem-vindo ao JavaScript!</h1>
<script>
// Mostra uma mensagem na tela
alert("Olá! Bem-vindo ao curso de JavaScript!");
// Exibe uma mensagem no console
console.log("Script iniciado com sucesso!");
// Define uma variável e mostra o valor armazenado
var aluno = "João";
console.log("Nome do aluno é: " + aluno);
</script>
</body>
</html>
💥 Agora salve o arquivo, abra no navegador e observe o resultado:
● A primeira mensagem aparece em um alert;
🧩 Desafio
Tente criar um script que:
1. Peça o nome do usuário (prompt());
2. Mostre um alerta de boas-vindas com o nome digitado;
3. Exiba no console uma saudação personalizada.
💡 Dica:
var nome = prompt("Qual é o seu nome?");
alert("Olá, " + nome + "! Seja bem-vindo!");
console.log("Usuário conectado: " + nome);
🧠 Conclusão
Agora você sabe como preparar o ambiente correto para
escrever e executar qualquer código JavaScript.
Com esta base sólida, você poderá criar scripts
organizados, performáticos e facilmente reutilizáveis.
A partir da próxima aula, mergulharemos de cabeça na estrutura da linguagem — aprendendo a criar variáveis, tipos de dados e armazenar informações.
📚 Continue aprendendo JavaScript:
Comentários
Postar um comentário