Aula 3 — Como incluir JavaScript em uma página HTML

🧠 A tag <script>

Para usar JavaScript em uma página HTML, utilizamos a tag <script> em nosso código

Ela indica ao navegador:

Existem três formas principais de trabalhar com JavaScript em páginas HTML:

- JavaScript inline
- JavaScript interno
- JavaScript externo

Vamos ver cada uma delas.

⚠️ JavaScript inline (não recomendado)

O JavaScript inline é escrito diretamente em atributos HTML.

Exemplo:

<button onclick="alert('Olá!')">
  Clique aqui
</button>

Ela até funciona, mas:

• dificulta a manutenção
• deixa o código confuso
• não escala bem

✅ JavaScript interno (uso pontual)

Aqui o JavaScript é escrito dentro da própria página HTML, usando a tag <script>.

Exemplo:

<script>
  alert("JavaScript interno funcionando!");
</script>

Essa abordagem é útil:
- para testes rápidos
- para exemplos simples
- para pequenas páginas

Mas ainda não é a melhor prática para projetos maiores.

🥇 JavaScript externo (forma correta)

A forma recomendada é usar arquivos .js separados.

1️⃣ Arquivo HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Minha página</title>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

2️⃣ Arquivo JavaScript (script.js)

alert("JavaScript externo funcionando!");

📍 Onde colocar a tag <script>?

❌ Entre as tags <head> e </head> você pode ter problemas.

Se o JavaScript tentar acessar elementos HTML que ainda não existem porque não foram renderizados pelo navegador, erros podem acontecer.

✅ No final do (recomendado)

<body>
  <h1>Minha página</h1>
  <script src="script.js"></script>
</body>

Assim:

• o HTML é carregado primeiro
• o JavaScript roda depois
• menos erros
• melhor performance inicial

🧠 Boas práticas desde o início

• Evite JavaScript inline
• Prefira arquivos externos
• Coloque o script no final do body
• Mantenha HTML e JS separados

Esses hábitos fazem muita diferença conforme o projeto cresce.