O Básico da web

No post anterior falei sobre desenvolvimento em camadas e apresentei a vocês as camadas de conteúdo e apresentação.

Ficou faltando a camada de comportamento. Vamos a ela então.

A camada de comportamento deve ser encarada como uma camada extra no desenvolvimento de uma página para a web. Nessa camada, usamos uma linguagem de script (JavaScript) junto com o DOM (Document Object Model) para modificar o comportamento dos elementos presentes na camada de conteúdo.

Digo que essa camada deve ser encarada como extra porque é importante que seu site ou aplicação funcione perfeitamente na ausência dessa camada (ou do suporte a ela).

O DOM

O DOM é um modelo de dados usado pelos user-agents para montar uma representação do código de uma página (seja ela escrita em HTML, XHTML ou XML) após sua renderização. É mais ou menos como uma árvore. Você pode usar o DOM Inspector do Firefox para dar uma olhada na estrutura dessa árvore. Já falei sobre o DOM Inspector e outras ferramentas legais para desenvolvedores no meu blog.

A partir da DOM API (que é algo como uma coleção de métodos para manipular os elementos no DOM) podemos selecionar elementos ou grupos de elementos e seus atributos e executar diversas funções com eles, inclusive criar ou remover elementos.

No caso do desenvolvimento da camada de comportamento de um site, usamos a DOM API presente no JavaScript, que é a linguagem de script existente em todos os browsers modernos.

Em geral, a maior parte do trabalho que se tem para desenvolver essa camada reside na manipulação do DOM.

São exemplos dos métodos existentes na DOM API:

document.getElementById(id)

Seleciona um elemento a partir do valor de seu atributo ID. É a maneira mais simples de se acessar um elemento no DOM.
Digamos que você tenha um DIV com ID “conteudo”. var conteudo = document.getElementById('conteudo') vai fazer com que a variável conteudo contenha uma referência para o referido DIV. Manipule a variável conteudo e as alterações serão feitas no DIV.

document.getElementsByTagName(tag)

Seleciona um conjunto de elementos que são definidos pela tag “tag”.
Exemplo: var uls = document.getElementsByTagName('ul') cria em uls um array onde cada item é uma referência para um elemento UL dentro do documento.
uls[0] seria, nesse caso, uma referência para a primeira UL presente no documento.

Esses são, com certeza, os dois métodos que serão mais usados em qualquer script que você venha a desenvolver. Existem outros tantos que não vou listar aqui para não tornar o post extenso demais e até mesmo porque esse não é o intuito do texto. Uma ótima referência de métodos da DOM API pode ser encontrada na referência de DOM do Mozilla Developer Center. Apenas tenha em mente que essa referência é específica para os browsers baseados no engine Gecko (Mozilla, Firefox, Netscape), mas praticamente todos os métodos lá descritos funcionam também nos outros browsers igualmente modernos.

Existem milhões de coisas que podem ser feita usando a dupla DOM/JavaScript. Geralmente, usamos a camada de comportamento para melhorar de alguma forma a experiência do usuário ao utilizar uma página web.

Não vou me estender mais no assunto. Leiam o que o Élcio escreveu sobre o assunto. O texto dele é bem explicativo e cita diversas fontes que podem ser usadas como referência para o aprendizado das tecnologias envolvidas no desenvolvimento da camada de comportamento.

Nota: Relendo o texto percebo que está muito aquém do que eu pretendia escrever. É difícil passar o conceito de camada de comportamento sem exemplificar, sem tornar o texto técnico.
Acho que a melhor coisa a fazer é publicar posts menores, com exemplos de código explicados, sobre cada camada. O que vocês acham?

Leia também:

• Crie formulários que submetam com um ENTER
• Padrões web: Desenvolvimento em camadas
• HTML - Esqueleto de um documento HTML - Parte 3: Outros elementos do HEAD
• Como fazer links que funcionem com e sem JavaScript
• HTML - Esqueleto de um documento HTML - Parte 1: DOCTYPE
• Hospedagem de sites Dreamhost: 50% de desconto