Carregando...

Onde colocar JavaScript

Já sabe que JavaScript acrescenta comportamento. A pergunta seguinte é prática: onde o código vive para o browser o encontrar, e para os elementos que quer alterar já existirem?

Onde você deve colocar JavaScript numa página HTML?

Coloque JavaScript num elemento <script> — embutido entre as tags ou externo com src a apontar para um ficheiro .js. No trabalho diário de iniciantes que tocam na página, ponha o script mesmo antes de </body> para o HTML acima estar pronto. Quando o código crescer, passe-o para um ficheiro externo e mantenha o hábito do fim do body (mais tarde verá defer).

Três opções de local à primeira vista

📊 Onde o JavaScript pode viver

Opção Onde fica Melhor uso para iniciantes
Embutido no head <script> dentro de <head> Só configuração mínima; arriscado se os elementos ainda não existem
Embutido no fim do body <script> logo antes de </body> Predefinição para demos curtas que mudam título ou texto
Ficheiro .js externo <script src="app.js"> (muitas vezes fim do body) Predefinição quando a lógica cresce ou reutiliza o ficheiro

Script no head (conheça e use com cuidado)

Um script no head corre cedo, enquanto o browser ainda lê o documento. Pode atrasar conteúdo visível. Se o código procura de imediato um elemento com getElementById, ele pode ainda não existir — resultado null ou erro.

Script no head

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>

Quando um script no head serve

  • Registar uma mensagem ou definir um valor simples sem DOM
  • Carregar uma biblioteca com atributos modernos (defer / async vêm depois)
  • Não é a sua predefinição para demos «mude este parágrafo» neste curso

Script no fim do body (predefinição para iniciantes)

Primeiro o markup de que os visitantes precisam. Depois execute o script. Elementos com id acima do script já estão no documento quando as instruções correm.

Script no fim do body

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>

Porque este hábito ajuda

  • O título e o parágrafo podem aparecer antes do trabalho do script terminar
  • getElementById("title") encontra um nó real
  • Demos curtas ficam num só ficheiro enquanto aprende a linguagem
  • Depois move as mesmas instruções para um ficheiro externo sem mudar a ideia

Ficheiro JavaScript externo (predefinição de projeto)

Mantenha a estrutura no HTML e a lógica em app.js. Aponte com src. Os caminhos são relativos ao HTML salvo se usar uma pasta.

HTML que carrega app.js

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>

app.js externo

javascript 
document.getElementById("title").textContent =
"Loaded from app.js";

Porque o externo ganha ao crescer

  • Um .js pode servir várias páginas
  • Os editores destacam melhor JavaScript no próprio ficheiro
  • Evita blocos <script> enormes no markup
  • Um caminho src errado falha em silêncio — veja Console e Network se nada correr

A ordem importa

O browser lê de cima para baixo. Um script corre quando o analisador o alcança (salvo atributos avançados mais tarde). Se a linha 1 precisa de #title, esse elemento deve aparecer acima do script no HTML, ou espera o documento terminar. O fim do body é a forma simples de acertar essa ordem.

Experimente você

  1. Crie where.html com o exemplo do fim do body. Abra e confirme a atualização do título.
  2. Altere a string de textContent, guarde e atualize.
  3. Crie app.js com o JavaScript do exemplo externo. Em where.html, carregue só <script src="app.js"></script> antes de </body>.
  4. Renomeie temporariamente app.js ou quebre o caminho src, atualize e veja a Console — depois corrija o caminho.
  5. Opcional: mova o mesmo script para o head (sem defer) e veja que getElementById pode falhar; depois volte ao fim do body.

Erros comuns

  • Pôr no head um script que atualiza o DOM para getElementById correr antes do elemento existir
  • Ligar <script src="app.js"> com typo ou pasta errada — a página parece bem mas nada corre
  • Deixar centenas de linhas embutidas em cada HTML em vez de um .js partilhado
  • Confundir esta lição com a ligação de CSS: estilos usam <link> / <style>; comportamento usa <script>

Resumo

  • JavaScript vive num <script> — embutido ou via src para um ficheiro .js
  • O fim do body é a predefinição amigável quando o código toca elementos da página
  • Scripts no head correm cedo; evite atualizar o DOM aí até conhecer atributos de carregamento
  • Ficheiros externos são a predefinição de projeto quando as demos crescem
  • A ordem do script segue a do documento salvo opções avançadas mais tarde
  • Pratique separando uma demo embutida que funciona em HTML + app.js

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 2 de 31
Javascript Tutorial