Até agora, os exemplos utilizados foram simples e concentrados em poucas linhas de código. No entanto, em projetos reais — como o jogo final que irás desenvolver — é fundamental manter o código organizado, legível e reutilizável.

A organização começa logo na forma como o jQuery é escrito e integrado no projeto.

Utilizar sempre $(document).ready()

Todo o código jQuery deve ser executado apenas depois da página estar completamente carregada.
Isto evita erros causados por tentar manipular elementos que ainda não existem.

Esta estrutura passa a ser obrigatória em todos os projetos.

Separar HTML, CSS e JavaScript

Uma boa prática fundamental é não misturar código.

Estrutura recomendada:

No HTML:

No ficheiro script.js:

Usar nomes claros para IDs e classes

Os nomes dos elementos devem ser:

• Claros

• Descritivos

• Fáceis de compreender

Exemplo pouco claro:

Exemplo recomendado:

Isto facilita a leitura e manutenção do código.

Evitar repetir código

Quando o mesmo código começa a repetir-se, é sinal de que pode ser organizado melhor.

Exemplo:

Pode ser simplificado para:

Comentários no código

Os comentários ajudam a compreender o que o código faz, especialmente em projetos maiores.

No projeto final, os comentários serão importantes para explicar a lógica do jogo.

Exemplo completo organizado

HTML:

jQuery (ficheiro externo):

Este exemplo mostra um código simples, mas bem estruturado e fácil de compreender.

Exercício 1 — Organização do projeto

Cria uma pequena pasta de projeto que contenha:

• Um ficheiro HTML

• Um ficheiro CSS

• Um ficheiro JavaScript com jQuery

Garante que:

• O jQuery está corretamente incluído

• O código está dentro do document.ready

Exercício 2 — Código limpo

Reorganiza um exercício de uma aula anterior para:

• Usar nomes de IDs e classes claros

• Remover código repetido

• Adicionar comentários explicativos