Uma Breve Introduo ao JQuery.

Marco Aurlio da Rocha Leite.

Instituto de Informtica Universidade Federal do Rio Grande do Sul (UFRGS)
Caixa Postal 15.064 91.501-970 Porto Alegre RS Brazil
marco.leite@ufgrs.com.br
Abstract. The jQuery framework is a JavaScript library that offers a wide
variety of features, and an easy syntax to learn. Its wide compatibility enables
applications to work in various browsers and lets you charge hundreds of
plugins making it an essential tool for any web developer. The file for
production has only 26kb (version 1.2.1), which can be downloaded from his
website even www.jquery.com. Just include this file in your site and you are
ready to start. The site also offers a complete library code on a 77kb file, if
you want to study, modify, or update the code or let your imagination create
what you want.
Resumo. O framework jQuery uma biblioteca javascript que oferece uma
grande variedade de funcionalidades, alm de uma sintaxe fcil de aprender.
A sua grande compatibilidade permite que as aplicaes funcionem nos mais
diversos browsers e permite carregar centenas de plugins fazendo dele uma
ferramenta essencial para qualquer desenvolvedor web. O arquivo para
produo possui apenas 26kb (verso 1.2.1), o qual pode ser baixado do site
dele mesmo o www.jquery.com. Basta incluir esse arquivo no seu site e voc
j est pronto para comear. O site tambm oferece o cdigo completo da
biblioteca num arquivo de 77kb, caso voc queira estudar, modificar o cdigo
ou atualizar ou deixar a sua imaginao criar o que voc quiser.
1. Descrio
JQuery uma biblioteca JavaScript que simplifica a manipulao de documentos
HTML, eventos, animaes e interaes com AJAX para desenvolvimento rpido de
aplicaes web. Devido sua simplicidade e flexibilidade, o jQuery acabou se tornando
a biblioteca JavaScript mais utilizada. Em 2008 passou a ser a biblioteca padro do
ASP.NET MVC, da Microsoft, e o Ruby on Rails, a partir da verso 3, substituiu o
Prototype pelo jQuery. A maneira mais simples de utilizar o jQuery fazendo o
download do arquivo JavaScript no endereo: http://jquery.com/download. A menos
que voc pretenda alterar ou estudar o cdigo do jQuery, selecione a opo
production/minified, que compactada e faz com que seu site leve menos tempo para
ser aberto. Uma expresso jQuery formada de duas partes principais: o qu vai ser
manipulado e como isso vai acontecer.
jQuery - um framework que sem dvidas revolucionou o desenvolvimento web,
simplificando absurdamente tarefas corriqueiras do desenvolvimento web.
Um dos grandes desafios, portanto, dos desenvolvedores de sistemas no sculo
XXI projetar sistemas flexveis adaptando as interfaces de acordo com necessidades e
preferncias do usurio para diferentes dispositivos. Alm disso, esses designs devem
aumentar a eficincia de sistemas de informaes utilizando interfaces adaptativas.
Nesse contexto, se insere a proposta deste trabalho que prope o uso da biblioteca
javaScript jQuery para criar interfaces interativas.
JQuery um framework Javascript, mas o que um framework? um produto
que serve como base para a programao avanada de aplicaes, que tem um serie de
funcionalidades em forma de funes para realizar tarefaz habituais. um biblioteca
que contem processos e rotinas j prontos para usar. Os programadores se utilizam de
frameworks para fazer tarefaz bsicas e comuns a seus programas e no precisam
desenvolver novamente pois j esto prontas reuso de rotinas. Um exemplo muito
comum quanto um programador tem que se preocupar com diferentes browsers com a
utilizao de framwork ele no precisa se preocupar com isso os framework j tem
funes especificas e clases para cada browser de mercado atual (Explorer, Firefox,
Opera, etc.).
2. Instalando o Jquery
A biblioteca JQuery pode ser instalada de 2 maneiras: voc pode baixar o arquivo
da biblioteca no prprio site dela www.jquery.com, onde voc tambm encontrar a
documentao da biblioteca com exemplos, ou voc tambm pode utilizar um link
disponibilizado pelo Google para incluir a biblioteca em seu cdigo.
3. Iniciando com a Linguagem
Para iniciarmos necessrio decorar a seguinte funo $(). Isso mesmo, decorar!
Ela a funo construtora da linguagem, e ser utilizada em todo script desenvolvido
com JQuery. Existem diversas outras bibliotecas JQuery, e em algumas utilizada o
mesmo $() como funo construtora, o que pode gerar alguns problemas de conflito
entre os scripts dessas bibliotecas. Deve-se tentar evitar ao mximo o uso de duas
bibliotecas diferentes no mesmo projeto, e quando no houver outro jeito, podemos
escrever a funo construtora com sua maneira alternativa, JQuery(), alterando o $ por
JQuery, assim evitamos possveis conflitos.
4. O que a biblioteca jQuery capaz de fazer?
JQuery uma biblioteca genrica para se trabalhar com javascript e ainda
possui a capacidade de ser estendida para a criao de plugins. O ncleo dessa
biblioteca est preparado para:
. Acessar partes de uma pgina: !em uma biblioteca" comum
precisarmos de muitas linhas de c#digo para operar na rvore de elementos
do $O% &$ocument Object %odel'. ( jQuery possui mecanismos )ceis e
rpidos para atingir esse objetivo.
*. Modificar a aparncia de uma pgina: ( jQuery integra as vantagens do
+!! &+ascading !tyle !heets' com o poder do javascript. ,sso signi)ica -ue
podemos mudar as classes e estilos dos elementos mesmo ap#s o
carregamento da pgina.
.. Alterar o contedo de uma pgina / poss0vel modi)icar um documento
com poucas linhas de c#digo. (ssim" te1tos podem ser mudados" imagens
podem ser inseridas ou trocadas" listas podem ser reordenadas ou todo
documento pode ser reescrito.
2. !riar intera"#o com os usurios ( jQuery possui uma )orma elegante de
interceptar eventos criados pelo usurio" como cli-ues ou teclas
pressionadas" sem poluir o 34%5 da pgina. (lm disso" esse tratamento
de eventos elimina as inconsist6ncias entre os bro7sers" o -ue um srio
problema para os desenvolvedores 7eb.
8. Adicionar anima"#o a uma pgina: anima9es so #timos recursos para
evitar transi9es bruscas no visual de uma pgina. ( biblioteca possui um
conjunto de e)eitos prontos" como desbotamento &)ade' ou desli:amento
&slide'" alm de ser poss0vel criar e)eitos personali:ados.
;. !omunicar com o ser$idor sem recarregar a pgina: ( parte de (J(<
tambm est bem integrada com as outras )uncionalidades" o -ue permite
criar pginas din=micas e com melhor usabilidade.
>. %implificar tarefas comuns de ja$ascript: ( biblioteca possui melhorias
para as constru9es do javascript" como iterao e manipulao de arrays.
?ste artigo est dividido em duas partes. @essa primeira parte abordamos
dos t#picos ao ." o -ue j signi)ica bastante )uncionalidade. ( segunda
parte do artigo e1plica os t#picos 2" 8" ; e >" alm de )ornecer outros
detalhes sobre plugins e projetos de e1tenso.
5. Caractersticas, vantagens e benefcios.
Uma das grandes facilidades da biblioteca jQuery est na sua funo principal
chamada $(). Tipicamente, essa funo recebe uma string como parmetro que
representa uma consulta (query) nos elementos do DOM (da surgiu o nome jQuery). Na
verdade, a funo $() uma fbrica de objetos jQuery, os quais encapsulam os
elementos do DOM. Portanto, o resultado da chamada a funo $() sempre retorna um
objeto jQuery contendo zero, um ou vrios elementos do DOM. De forma geral, as
bibliotecas possuem vantagens e desvantagens. Em relao ao JQuery e ao Dojo, ambas
possuem uma vasta documentao, com funes semelhantes e outras, diferentes.
Dependendo do navegador, a biblioteca permite uma execuo mais rpida, ou mais
lenta, com erros ou no. Dessa forma, a escolha da biblioteca deve considerar a anlise
com- pleta da ferramenta e as necessidades da aplicao que se deseja projetar.
O foco principal da biblioteca Jquery a simplicidade. Porque submeter os
desenvolvedores ao martrio de escrever longos e complexos cdigos para criar simples
efeitos? Silva Mauricio.
No entanto, no que se refere ao volume dos tutoriais disponveis na web, o
jQuery possui uma quantidade gigantesca. Uma das qualidades de um framework est
na velocidade em que executado e na sua leveza. Nesse aspecto, embora o jQuery seja
bastante rpido, h outros mais eficientes, sendo bem mais rpidos e leves. O JQuery
possuii uma documentao completa com eventos, cdigos para manipulao do DOM,
seletores, efeitos de animao, plugins e utilitrios interessantes. Usamos duas funes
juntas para alterar a cor da fonte e o texto. A isso chamamos encadeamento de funes,
e uma das principais caractersticas do jQuery: a funo css retorna o prprio elemento
j com a alterao que fizemos, e assim voc pode continuar alterando outros valores,
como estamos fazendo com o funo val , que altera o valor de um campo de input.
Como vimos at aqui, o jQuery resolve quase todos os nossos problemas de
incompatibilidades entre browsers e simplifica muito a manipulao de DOM e a
comunicao de dados usando AJAX. importante comentar que jQuery no o nico
framework que existe no mercado fazendo esse tipo de trabalho. Existem varias
solues similares que tambm funcionam muito bem e fazem a mesma coisa. Como
normal que cada framework tenha suas vantagens e inconvenientes, mas o jQuery um
produto com uma aceitao muito grande por parte dos programadores e uma grande
penetrao no mercado de software, e tambm um produto serio, estvel, bem
documentado e com uma grande equipe de desenvolvedores para fazer melhorias e
atualizaes e tambm a comunidade de criadores de plugins e componentes.
6. Problemas, limitaes e contraindicaes
Apesar de o jQuery suportar quase todos os navegadores, existem alguns
problemas com algumas verses, como a verso 1.0 do Explorer e 1.0.x do Firefox,
porm ele no gera nenhum erro grave. Em geral, so compatveis com quase todos os
navegadores. Voc j deve ter ouvido algum criticar o jQuery e o jQuery UI(projeto
implementao grfica) por serem muito pesados. De fato, se voc baixar a biblioteca
completa com algum tema para a sua aplicao, voc pode engord-la em at 300KB
desnecessariamente. Se voc estiver pensando apenas em usurios com banda larga,
navegadores modernos e caches que funcionam, o problema todo desaparece aps um
ou dois segundos a mais na carga da aplicao. Porm, se voc pensar que em nosso
pas a banda larga no to larga assim, que a quantidade de usurios que acessam a
Internet atravs de dispositivos mveis est aumentando consideravelmente a cada ms
e que a qualidade e a velocidade da conexo oferecida pelas empresas de telefonia
uma piada de mau gosto, chegar concluso de que quanto menos, melhor.
7. Arquitetura e componentes que fazem parte da JQuery.
Ateno para as letras maisculas ao utilizar os mtodos do jQuery, j que o
JavaScript diferencia letras maisculas de minsculas. A jQuery possui uma grande
quantidade de plugins para deixar a interface mais interativa em poucas linhas de
cdigo, alm da sua plataforma de extenso jQuery UI que possui um conjunto de
elementos widgets fceis de configurar e personalizar, para adequ-los interface e
aumentar a interatividade deixando-as adaptveis para que o usurio possa ajust-las s
suas necessidades e formas de trabalho. Um recurso do jQuery usado para tornar a
interface mais ajustvel foi o componente ContainerPlus. Esse componente formado
por caixas flutuantes, o que possibilita ao usurio a modificao da interface de acordo
com o seu interesse, podendo minimizar, maximizar, fechar, redimensionar e
posicionar cada caixa, escolhendo os assuntos de sua preferncia para deix-los
visveis. O ContainerPlus permite que o sistema possua diferentes possibilidades de
uso, abrangendo as diferentes necessidades dos diversos usurios. A informao sobre
alterao na disposio, forma, e quantidade de caixas flutuantes armazenada na base
de dados do sistema, ficando disponvel apenas para usurios autenticados. Alm do
containerPlus, o jQuery possui vrios componentes e plugins que podem ser utilizados
com o objetivo de tornar a interface interativa, como slides (quadro de apresentao de
contedos animado), tabs (guias usa- das para separar o contedo em sees), dialogs
(janelas flutuantes que sobrepem o contedo), entre outros. Algumas aplicaes web
j utilizam interfaces com sistemas adaptveis, como o website NetVibes 3, onde o
usurio pode criar um perfil com containers contendo os assuntos escolhidos por ele,
alm de permitir containers de redes sociais, e-mail, previso do tempo e de diversos
contedos para que o mesmo possa monitorar em uma nica pgina tudo que lhe
interessa.
5.1 Selectors.
Os selectors so parte fundamental do JQuery. Os selectors indicam o qu ns
vamos manipular. Basicamente, entendendo o conceito de selectors, voc entende a
maior parte do funcionamento do framework.
5.2 Eventos e Callbacks.
Assim como acontece com a manipulao do DOM, o jQuery tambm nos
auxilia no tratamento de eventos. Recebemos as chamadas informando desses eventos
em callbacks, atravs de funes que so passadas como parmetro. O primeiro ponto
que vamos notar de diferente que no precisamos definir os eventos de cada um dos
elementos, como fizemos usando JavaScript puro. Basta selecionarmos a classe que
queremos e o jQuery se encarrega de definir o evento para todos os elementos que
forem encontrados.
5.3 Ready.
O jQuery tem um evento chamado ready, que executado assim que o
documento terminar de ser carregado. O funcionamento igual a qualquer outro evento:
passamos uma funo como parmetro, que ser executada assim que o evento for
disparado.
5.4 JQuery UI.
A biblioteca jQuery UI foi criada para permitir a rpida criao e utilizao de
componentes visuais, efeitos e temas, aproveitando toda a facilidade que o jQuery traz
em relao a diferentes tipos e verses de navegadores.
5.5 UI Core.
Contm o ncleo do jQuery UI. Todos os demais componentes dependem desta
parte.
5.6 Interactions.
a parte que d suporte a coisas como drag-and-drop (quando voc arrasta e
solta algum componente pela tela), ordenar itens numa tabela usando o mouse e mesmo
mudar o tamanho de algum elemento da tela se voc desejar.
5.7 Widgets.
Widgets so componentes visuais que j vem com o jQuery UI. Dentre os
muitos componentes disponveis, voc tem acesso a menu, abas, botes e janelas que s
existem dentro da sua pgina.
5.8 Effects.
O jQuery j vem com alguns efeitos simples, mas o jQuery UI traz treze efeitos
novos para que voc possa impressionar o usurio.
8. Um breve resumo de sua API.
A biblioteca jQuery e praticamente todos os seus plugins esto contidas dentro do
namespace jQuery. Como regra geral, os objetos globais so armazenados dentro do
namespace jQuery, bem, ento voc no deve ter um confronto entre jQuery e qualquer
outra biblioteca (como prototype.js, MooTools, ou YUI).
Dito isto, h uma ressalva: por padro, usa jQuery $ como um atalho para jQuery.
Assim, se voc estiver usando outra biblioteca JavaScript que usa a varivel $, voc
pode executar em conflitos com jQuery. Para evitar esses conflitos, voc precisa colocar
o jQuery em modo no-conflito imediatamente aps ser carregado na pgina e antes de
tentar usar jQuery em sua pgina.
7. JQuery Mobile.
H algum tempo os dispositivos mveis deixaram de serem figurantes na Internet
para se tornar parte do dia a dia de desenvolvedores de aplicaes Web, empresas e
usurios. Atentos a isso, os desenvolvedores do jQuery lanaram em Novembro de 2011
a primeira verso estvel do jQuery Mobile, visando atender ao crescente mercado de
Internet mvel, jQuery Mobile no garante que sua aplicao ou site vo ser executados
corretamente em todos os dispositivos. A pgina inicial do jQuery Mobile
(http://jquerymobile.com/) oferece uma ferramenta para que voc possa experimentar os
diversos componentes num simulador de dispositivo mvel.
8. Plugins.
O jQuery no foi desenvolvido para resolver todos os problemas, imaginados ou
no, que um desenvolvedor pode encontrar ao criar uma aplicao para Web. Ao invs
de desperdiar tempo e esforo nessa tarefa impossvel (o que alguns frameworks
famosos continuam tentando fazer), John Resig e os desenvolvedores do jQuery
resolveram criar um ncleo bem definido e facilmente extensvel. Com isso, qualquer
um com um pouco mais de curiosidade pode utilizar a base que o jQuery fornece para
criar mtodos que resolvam seus problemas. Esses mtodos so integrados de tal forma
ao jQuery que passam a ser tratados como se fossem parte da biblioteca. Cada conjunto
de mtodos desses chamado de plugin.
9 Um pedao de cdigo de uso de JQuery em uso.
No trabalho muito com JQuery esse cdigo me foi disponibilizado por um colega
que utilizei para fazer um pesquisa de CEP para um de nosso programas. Ele usa um
site de consulta de CEP dos correios. Ao informar um CEP, o servio retorna um JSON
com os dados do logradouro e se o cdigo for vlido, ou um erro se o CEP no for
encontrado na base dos Correios.
Para acessarmos o servio usando o CEP 90018-900, vamos usar o endereo abaixo:
http://www.buscacep.correios.com.br/servicos/dnec/menuAction.do?
Metodo=menuLogradouro
O servio vai retornar o contedo abaixo, em formato JSON. Formatei o resultado para
ficar mais fcil de ser entendido.
{
"complemento": "120",
"bairro: "Centro Historico",
"cidade: "Porto Alegre",
"logradouro": "Caldas Junior",
"cep" : "90018-900",
"estado": "RS"
}
A nica diferena em relao ao que j vimos at agora que vamos usar o mtodo
getJSON para retornar um valor JSON. Os parmetros e o funcionamento so iguais aos
do mtodo get.
Foi criada uma funo onCepDone para exibir o logradouro (nome da rua, praa ou
avenida) caso o valor passado seja vlido. Quando a chamada for concluda, o callback
onCepDone deve ser executado:
varservico="http://www.buscacep.correios.com.br/servicos/dnec/menuAction.do?
Metodo=menuLogradouro";
var cep = "90018-900";
function onCepDone(data){console.log("A Casa do Cdigo fica na " + data.logradouro);
}
$.getJSON(servico + cep)
.done(onCepDone);
Ao executarmos esse cdigo, teremos parte do endereo da empresa.
A varivel data, que contm o retorno do servio, j est convertida em um objeto
JavaScript. Com isso podemos acessar qualquer informao retornada, como bairro ou
cidade, como se uma propriedade do objeto. Foi exatamente o que fizemos para exibir o
logradouro. O cdigo valida CEPs que no existem na base dos Correios. Para isso,
usado um evento fail.
Aproveitando o cdigo do exemplo anterior, teremos:
varservico="http://www.buscacep.correios.com.br/servicos/dnec/menuAction.do?
Metodo=menuLogradouro ";
varcep = "90018-900";
function onCepDone(data){console.log("A Casa do Cdigo fica na " +
data.logradouro);}
function onCepError(error){console.log("Erro: " + error.statusText)};
$.getJSON(servico + cep)
.done(onCepDone)
.fail(onCepError);
Executando esse cdigo, veremos a mensagem de erro do browser e o contedo do erro,
que estar na varivel error.
Para voc ver o AJAX funcionando como realmente acontece no dia a dia, basta voc
criar um input text e fazer com que, assim que ele perder o focus, um call- back deve
executar o $.getJSON passando o argumento da caixa de texto. Se o retorno informar
que houve sucesso, pode deixar a borda da caixa de texto verde. Se a requisio retornar
algum erro, pode deixar em vermelho.
Repare que nesse caso a chamada assncrona: o servio que verifica o CEP s vai ser
chamado depois de a pgina ter sido carregada. Mais ainda, vai acontecer somente
quando um evento for disparado e cair na sua funo de callback.
8. Concluso.
De forma geral, os sistemas adaptveis so a tendncia para as prximas interfaces
de usurio, pois possuem vrias vantagens: possibilitam que interface possa ser
adaptada pelo prprio usurio; despertam um grande interesse da populao por
abranger as diversas necessidades de diferentes perfis de usurios e melhoram a
qualidade do trabalho tornando-o mais agradvel e eficiente. Em cada nova verso do
jQuery, so includas melhorias de performance e limpeza de cdigo. Suporte a
browsers antigos so removidos, parte do cdigo reescrita de forma que execute mais
rapidamente. Quando voc utiliza a verso mais recente do jQuery, voc faz uso de
todas as melhorias de desempenho e segurana em relao a verses mais antigas.
O jQuery uma mo na roda para quem j programa para WEB.
References
QUERY: the write less, do more, JavaScript library. Disponvel em:
<http://jquery.com/> Acesso em: 15 mar. 2011
jQuery documentation. Authoring plugins. http://docs.jquery.com/Plugins/ Authoring,
2013.
Bear Bibeault John Resig. Secrets of the JavaScript Ninja. Manning, 2012.
Douglas Crockford. JavaScript: The Good Parts. OReilly Media, 2008
Jquery - A Biblioteca do Programador Javascript 2 Edio, escrito por Maurcio Samy
Silva,
http://www.buscacep.correios.com.br/