Categoria Javascript

Separando Javascript do HTML até demais

É interessante notar como alguns programadores seguem padrões com afinco, até as últimas consequências, onde houver código lá está ele impondo todos os padrões possíveis. Existe a boa prática em separar comportamento e apresentação, no caso de páginas HTML, os arquivos javascript são o comportamento e os arquivos CSS a apresentação, e o HTML faz uso de ambos, como pode ser observado aqui.

Observem o exemplo:

HTML:
  1. <input type="button" value="botão" id="meuBotao" onclick="meuEventoAqui()">

Algo que tem-se pregado por aí é retirar o totalmente o Javascript do HTML, ou seja, o exemplo acima ficaria assim:

HTML:
  1. <input type="button" id="meuBotao" value="botão">

E teríamos um arquivo .js com o seguinte código para ligar o evento onclick do button:

JAVASCRIPT:
  1. function ligacaoDeEventos() {
  2.       var botao = document.getElementById('meuBotao');
  3.       botao.onclick = function() {
  4.           finalmenteMeuEventoAqui();
  5.           }
  6.    }
  7.    window.onload = ligacaoDeEventos;

Puxa vida, toda essa volta só para não usar a propriedade onclick no HTML e se livrar totalmente do Javascript, isso vale a pena ?

Há vários motivos para que eu não concorde com isso:

  • Mais código para dar manutenção, foram criadas várias linhas de javascript para algo que funcionaria no primeiro exemplo usando a propriedade onclick da tag input.
  • E quando eu quiser saber qual evento o button aciona, será fácil de achar ? Podem haver vários objetos na página, todos com seus eventos ligados apenas no momento do onload da página. Vários objetos é igual a várias linhas de código javascript com as ligações, se você estiver usando um editor de textos comum, bem... boa sorte, e mesmo com uma IDE não é tão simples assim.
  • A propriedade onclick, onkeypress, etc faz parte da especificação HTML, justamente para facilitar isso, porque iria deixar de usá-los ?

Então muito cuidado ao seguir padrões ao extremo, questione-os, cada um tem o seu lugar e hora certa.

Comments (8)

Ajax é técnica para desempenho, use com parcimônia.

Da técnica AJAX, o que sempre noto é que as pessoas a amam de coração ou odeiam até a morte, não há um meio termo.

Os que odeiam, normalmente já odeiam Javascript também, e odeiam ainda mais quando os que amam exageram absurdamente no uso da técnica, conseguem fazer o site ficar inutilizável, uma usabilidade de dar medo, o teclado simplesmente não serve mais. E não me venham falar pra usar o mouse pois usabilidade é para todos os dispositivos. E o motivo principal de usar AJAX (desempenho), foi esquecido a muito tempo.

Dou certa razão para os que odeiam, a usabilidade é item prioritário na construção de um website, de que adianta ser lindo se não conseguimos utilizá-lo. Existem padrões web, utilize-os sempre na medida das possibilidades. Antes perder em semântica do que usabilidade.

Mas vamos lembrar primeiro que AJAX não é um framework, tecnologia, API ou biblioteca. AJAX é uma técnica que pode envolver o uso de várias tecnologias (Javascript, XML, DOM, etc), e pra espanto de vários, foi iniciativa da Microsoft, a própria criou o objeto XMLHttpRequest, responsável pelas requisições assíncronas, embora seja uma técnica que pode ser alcançada usando iFrames também.

Desempenho! Afinal banda de internet é cara, os serviços de hospedagem no Brasil que o digam... AJAX serve para melhorar o desempenho para todos, seja do sobrecarregado servidor ou do usuário que ainda utiliza modem (sem piadas, 53% dos internautas brasileiros ainda utilizam modem). Um bom exemplo de uso da técnica pode ser vista no sistema de creditar do Infoblogs, um simples clique e pronto lá foi o crédito, sem precisar que a página seja renderizada novamente para atualizar uma única tag, simples e ótimo para todos.

Agora um péssimo exemplo é quando temos mega formulários em alguns sites e o submit é uma chamada usando AJAX. Se não utilizar um framework decente, isso dá um trabalho enorme para implementar. E o que ganhamos com isso ? Mais manutenção, o ganho de desempenho é minúsculo. Os vários dados do formulário terão que ser enviados de qualquer forma, todo um processo de parse deve ser feito via javascript e parse de dados é algo que o próprio browser já faz naturalmente ao fazer o submit, ou seja, apenas processando à toa.

Então devemos pesar bem quando utilizar a técnica, pode até ser para algo bonitinho, mas vale mesmo a pena ganhar mais manutenção ? Pense sempre em desempenho e não perca a usabilidade de vista.

Comments

Javascript é ruim mesmo ou é a preguiça de pesquisar um pouco que atrapalha ?

Frequentemente ouço outros programadores e até amigos falando mal de Javascript, a frase mais comum é: "Não dá pra debugar!", será mesmo ? Javascript está aí há mais de uma década em grande parte dos websites e ninguém até hoje se importou em criar uma ferramenta direcionada ? Ou será preguiça/medo de encarar a linguagem ?

Javascript é uma linguaguem de programação, é interpretada, e orientada a objetos. Sim, isso mesmo que você leu, Orientada a Objetos, isso surpreende muita gente, normalmente os que tem mais preconceito e preguiça de pesquisar, inclusive ela obedece uma especificação, a ECMAScript, dá qual é baseada a ActionScript, conhecida pelo pessoal de Flash, ou seja há um padrão e versões desta linguagem.

Pode-se dizer que Yahoo e Google investem muito nela, o que seria de seus sites sem Javascript, as maravilhas do Gmail, Yahoo mail, Google Maps, entre vários outros... O que seria da técnica AJAX sem Javascript.

Querem debugar Javascript ? É só usar o Venkman e/ou o fenomenal Firebug, além de suporte a breakpoints ele vem com vários outros recursos como inspeção de código javascript e css, logging, profile, pode-se até mesmo alterar a árvore DOM e ver os resultados sem precisar atualizar a página.

Querem codificar Javascript ? A IDE Aptana (baseada no projeto Eclipse) resolve seus problemas, com suporte a code insight, auto complete, entre outros... não somente para Javascript, mas também para html e css. Para quem já utiliza o Eclipse basta instalar o plugin, ou mesmo utilizar o WTP. Para o pessoal de Rails uma ótima notícia, o RadRails será integrado ao Aptana em breve. Há ainda inúmeras e ótimas IDEs pagas para este tipo de serviço.

Javascript só serve para validar dados ? Bom, alguns exemplos do que o Javascript é capaz: Script.aculo.us, Dojo, Lightbox, ModalBox. Para o pessoal mais avançado, vale a pena dar uma olhada no excelente framework Prototype, base para vários desses projetos.

Desculpem-me se fui muito enérgico neste post, mas fazem 10 anos que utilizo Javascript e até hoje ouço das pessoas os mesmos motivos para preconceito. Muita coisa mudou, a linguagem evoluiu muito, mas a vontade de aprender das pessoas, parece que não, ainda mais vindo de uma área onde é uma obrigação estar em constante atualização.

Comments (11)