Nagüeva

Caso não lembrem, já tivemos uma pequena introdução e a parte 1 dessa série.

Se você não souber o que é JavaScript não obstrutivo, recomendo a leitura desse artigo antes de qualquer coisa. Caso contrário, vamos ao que interessa…

Encontre ganchos e relações (HTML, a base do desenvolvimento)

Antes de começar a escrever seu JavaScript, olhe para a base em que você está desenvolvendo. Se você não conhecer o código HTML ou ele estiver mal estruturado, será extremamente difícil fazer uma solução inteligente para o seu script. Provavelmente você acabará criando um código com marcações excessivas ou sua aplicação dependerá de JavaScript.

Por isso, considere duas coisas no seu HTML: ganchos e relações.

Ganchos

Dessa vez o gancho está aí pra ajudar

Os ganchos HTML são, em primeira instância, os IDs, já que eles podem ser facilmente acessados via DOM pelo método getElementById. Eles podem ser usados com tranquilidade pois são fáceis de testar e um ID é único no documento. O Internet Explorer ás vezes confunde os atributos name e id, mas existem boas bibliotecas que contornam esse problema. Eu, particularmente, uso e recomendo a jQuery.

Existem outros ganchos, que são elementos que podem ser acessados com getElementByTagName e através das classes CSS (que até o momento não pode ser acessada com um método nativo - Mozilla em breve terá um e o Opera 9.5 já possui. Mesmo assim, há uma série de métodos auxiliares que permitem utilizar simular um getElementByClassName).

Utilizando um trocadilho infame, o gancho é apenas o local onde você “enroscará” seu JavaScript para atingir o objetivo.

Relações

Não esqueça: o que você quer está interligado com todo o HTML.

Outra coisa interessante sobre o HTML é como sua estrutura está relacionada. Pergunte a você mesmo:

• Como posso chegar a determinado elemento mais facilmente e percorrendo o mínimo de passos via DOM?
• Qual elemento eu devo alterar para atingir os elementos-filhos que eu preciso mudar?
• Quais atributos ou informações de um determinado elemento eu posso usar para relacionar com outro?

Percorrer o HTML via DOM é trabalhoso e pode ser demorado, por isso é uma boa idéia deixá-lo para uma tecnologia que já está em uso nos browsers. Bibliotecas como jQuery, Mootools e Prototype podem auxiliar nessa tarefa.

Continua…

Para saber mais

• O que é DOM?
• Tutorial: Por onde começar com o jQuery.
• 8 Frameworks JavaScript.
• Qual a diferença entre classes e identificadores.

Já faz algum tempo que, como não encontrei uma versão em português, comecei a traduzir um artigo do Dev.Opera chamado The Seven Rules Of Unobtrusive JavaScript.

Eu ia postar o artigo completo mas ainda tem muita coisa pra revisar, então decidi postar as regras separadamente, acho que fica mais fácil pra acompanhar e, principalmente para os que estão começando, entender o conceito de JavaScript não obstrutivo.

O artigo foi publicado originalmente no fim do ano passado. O autor, Christian Heilmann, diz que chegou até essas regras após anos desenvolvendo, ensinando e implementando JavaScript de maneira não obstrutiva. O artigo é basicamente um resumo do que foi dito na Paris Web Conference 2007. A intenção do texto é ajudar a entender os benefícios de se trabalhar com JavaScript de maneira não obstrutiva, desenvolvendo projetos mais rapidamente, com muito mais qualidade e de fácil manutenção.

Espero que o texto seja útil a todos assim como foi pra mim.

Se quiser ficar por dentro do artigo completo assine o feed, assim você não perde uma atualização.