JQuery: por que programar em javascript precisa ser divertido
Recentemente, quando entrei no mundo do ajax, tive contato com uma grande quantidade de frameworks. Antes eu fazia tudo na mão, até porque não fazia muita coisa: era uma troca de classes, um evento onclick, etc. Nesse contato com diversos frameworks eu me encantei com o Prototype, que era utilizado por vários outros que eu havia conhecido (script.aculo.us, mooFx, Rico, etc).
Passei a usar o Prototype em meus programas. Mas com o passar do tempo eu fui notando uma deficiência na documentação dele. Nesse período conheci o motivo deste post: a biblioteca JQuery. De cara, eu já me apaixonei pelo fato de o site da JQuery ter muita coisa falando sobre como utilizar a biblioteca, e como a falta de documentação era minha decepção com o prototype, eu resolvi testar a JQuery. Por conta daquele teste eu estou utilizando JQuery até hoje em minhas aplicações.
Mas vamos ao que interessa: afinal de contas, o que é essa tal de JQuery?
Como o próprio criador sugere: “JQuery é um novo tipo de biblioteca javascript. Não é um framework enorme, ‘inflado’ que promete ser o melhor em AJAX – nem é apenas um jogo de melhorias complexas e desnecessárias – JQuery foi projetado para mudar a forma como você escreve em javascript.”
JQuery é uma biblioteca que considera que “programar em javascript precisa ser divertido”. E realmente proporciona diversão a quem utilizá-la. Escrever seus códigos em javascript, como já deve ter notado, é uma terefa repetitiva. Para todo elemento que vamos pegar escrevemos uma quantidade enorme (e desnecessária) de código. JQuery elimina essas tarefas repetitivas, simplificando ao máximo a programação em javascript.
Neste momento você deve estar se perguntando: “Ora Charles, mas prototype também faz isso. Por que preciso utilizar a JQuery?”. Pois peço só mais um pouco de paciência. Já entenderá o porquê. Mas já pra matar um pouco a curiosidade, vou lhe dar um pequeno exemplo, utilizando JQuery. Vamos pegar todos os elementos “div” com a classe ‘hiddenComments’, adicionar a eles a classe ‘showedComments’, e então mostrá-los, devagar:
$(“div.hiddenComments”).addClass(“showedComments”).show(“slow”);Simples, não? Vamos fazer com prototype?
$A(document.getElementsByClassName(“hiddenComments”)).each(
function (div){
Element.removeClassName( div, “hiddenComments”);
Element.addClassName(div, “showedComments”);
Element.show(div);
}
);Ainda simples, mas mais complicado não é?
Pois bem. Vamos adiante. Vou lhe explicar algumas vantagens da biblioteca JQuery, e, ao final, você terá subsídio suficiente para decidir entre ficar com prototype, que não é má escolha, e ficar com JQuery, que, na minha opinião, é a melhor escolha.
Sintaxe de seleção:
JQuery suporta a sintaxe de seleção de elementos utilizada pelas CSS de versão 1 a 3, e o básico da sintaxe XPath.
Tamanho: JQuery tem aproximadamente 15Kb. Perfeita para aplicações que precisam utilizar pouca banda.
Compatibilidade:
JQuery é cross-browser, trabalha em, praticamente, todos os browsers atuais com suporte a javascript. São eles (os mais utilizados): Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+ e Opera 8.5+.
Outra compatibilidade muito importante: ela permite que você use o prototype também. Você só precisa incluir ele na página antes de incluir a JQuery.
Documentação: JQuery tem uma documentação de sua API que é uma mão na roda. Muito boa. Completíssima. Você pode encontrá-la em http://jquery.com/api/. Essa é a documentação no formato texto, apesar de ser um dos formatos texto mais elegantes que já vi. Mas você também pode utilizar uma documentação auxiliar, a Visual JQuery (http://www.visualjquery.com/). É uma documentação visual, muito legal, e que quebra o galho na hora de procurar alguma coisa que você não sabe ao certo o que é. Além disso, o site ainda disponibiliza vários tutoriais e links para sites que ensinam a usar a biblioteca, além de um mapa gráfico dela.
Métodos encadeáveis:
Essa é uma grande vantagem de se trabalhar com JQuery. Todos os métodos da biblioteca retornam um objeto JQuery. Assim você pode encadear ações de forma a ter um código mais limpo. Por isso conseguimos, no exemplo acima, fazer tudo o que fizemos em apenas uma linha de código.
Plugins:
No site da biblioteca você poderá encontrar uma infinidade de plugins, bem como uma pequena explicação sobre como criar seu próprio plugin. Há plugins de todos os tipos. Exemplo disso é o JQuery Slideshow, o checkbox (que troca os checkboxes html por outros, muito mais bonitos), entre outros. Eu consegui contar (com a ajuda da própria biblioteca) 103 plugins, divididos entre as categorias “User Interface”, “JQuery Navigation”, “JQuery Forms” e “JQuery Extension”.
Humm! Muito legal, hein! Agora vamos brincar um pouco, por que ninguém é de ferro:
Vamos validar uns formulários?
Então pega ai:
O formulário:
A validação:
//usamos a função $(), com sintaxe simples mesmo.
//usamos o encadeamento para já passar um onsubmit junto da seleção do elemento
$("form").submit(
function(e){
e.stopPropagation();
e.preventDefault();
if(validar(this) == false){
this.submit();
} else {
return false;
}
}
);
function validar ( el ){
//transformamos o elemento puro em objeto jquery
el = $(el);
//alert(el.find("input[@type=text]").size());
//find procura o elemento fornecido dentro do objeto jquery. Aceita sintaxe xpath e css
el.find("input[@type=text]").each(
function (){
//this chega pra gente como objeto HTMLObject, temos
//que fazê-lo um objeto jquery
var field = $(this);
if( field.val() == "") {
//com o encadeamento (concatenacao) podemos mudar
//a borda do campo vazio, e então
//criar um span de erro depois dele.
field.css({ border:"1px solid red" }) .
after("<span>Preenchimento obrigatório</span>");
field.keyup(function(){
$(this).css({border: "1px groove black"});
$("span.error").remove();//destruímos
});
return false;
}
}
);
return true;
}Pronto!
Um validador de formulários, feito em uns 5 minutos. E então?
Lógico que isso também pode ser feito rápido assim com prototype também, mas já é um exemplo para você ver como funciona a JQuery no mundo real.
Com Prototype, javascript fica fácil. Com JQuery, javascript além de fácil, fica divertido.
Gostou? Então segue alguns links para você se divertir:
JQuery – http://jquery.com
JQuery blog – http://jquery.com/blog
Visual JQuery – http://visualjquery.com/
Tutoriais JQuery – http://jquery.com/docs/Tutorials/
Documentação JQuery – http://jquery.com/docs/
O criador da JQuery – http://ejohn.org/
Comments