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 PortoAlegre RS Brazilmarco.leite@ufgrs.com.brAbstract.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 frameworkjQuery uma biblioteca javascriptque oferece uma grande variedade de funcionalidades, alm de uma sintaxe fcil de aprender. A suagrandecompatibilidade permite que as aplicaes funcionem nosmais diversosbrowserse permite carregarcentenas de pluginsfazendodele umaferramenta essencial para qualquer desenvolvedor web.O arquivo paraproduo possui apenas 26kb (verso 1.2.1), o qual pode ser baixado do sitedele mesmo owww.jquery.com.Basta incluir esse arquivo no seu site e voc j est pronto para comear.O site tambm oferece o cdigo completo dabibliotecanum arquivo de 77kb, caso voc queiraestudar, modificar o cdigo ou atualizar ou deixar a sua imaginao criar o quevocquiser.

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 manipuladoe 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 especificase clasespara cada browser de mercado atual (Explorer, Firefox, Opera, etc.).Instalando o JqueryA biblioteca JQuery pode ser instalada de 2 maneiras: voc pode baixar o arquivo da biblioteca no prprio site delawww.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.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-setentar 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.O que a biblioteca jQuery capaz de fazer?
JQuery uma biblioteca genrica para se trabalharcom javascript e aindapossui a capacidade de ser estendida para a criao de plugins. O ncleo dessa biblioteca est preparado para:1.Acessar partes de uma pgina:Sem uma biblioteca, comum precisarmos de muitas linhas de cdigo para operar na rvorede elementos do DOM (Document Object Model). A jQuery possui mecanismos fceis e rpidos para atingir esse objetivo.2.Modificar a aparncia de uma pgina:AjQuery integra as vantagens do CSS (Cascading Style Sheets) com o poder do javascript. Isso significa que podemos mudar as classes e estilos dos elementos mesmo aps o carregamento da pgina.3.Alterar o contedo de uma pgina:possvel modificar um documento com poucas linhas de cdigo. Assim, textos podem ser mudados, imagens podem ser inseridasou trocadas, listas podem ser reordenadas ou todo documento pode ser reescrito.4.Criar interao com os usurios:AjQuery possui uma forma elegante de interceptar eventos criados pelo usurio, como cliques ou teclas pressionadas, sem poluir o HTML da pgina. Alm disso, esse tratamento de eventos elimina as inconsistncias entre os browsers, o que um srio problema para os desenvolvedores web.5.Adicionar animao a uma pgina: animaes so timos recursos para evitar transies bruscas no visual deuma pgina. A biblioteca possui um conjunto de efeitos prontos, como desbotamento (fade) ou deslizamento (slide), alm de ser possvel criar efeitos personalizados.6.Comunicar com o servidor sem recarregar a pgina: A parte de AJAX tambm est bem integrada com as outras funcionalidades, o que permite criar pginas dinmicas e com melhor usabilidade.7.Simplificar tarefas comuns de javascript: A biblioteca possui melhorias para as construes do javascript, como iterao e manipulao de arrays.Este artigo est dividido em duas partes. Nessa primeira parte abordamosdos tpicos1 ao 3, o que j significa bastante funcionalidade. A segunda parte do artigo explica os tpicos 4, 5, 6 e 7, alm de fornecer outros detalhes sobre plugins e projetos de extenso.

Caractersticas, vantagens ebenefcios.Uma dasgrandesfacilidades 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 nomejQuery). 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 bibliotecapermite 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 quantidadegigantesca.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 outrosmais eficientes, sendobemmais rpidose 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 chamamosencadeamento 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 ofunoval , que altera o valor de um campo de input.Como vimos at aqui, o jQuery resolve quase todos os nossos problemas deincompatibilidadesentre browsers e simplifica muito a manipulao de DOM e a comunicao de dados usando AJAX. importante comentar que jQueryno 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.Problemas, limitaes e contraindicaesApesar 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 errograve. Em geral, so compatveis com quase todos os navegadores. Voc j deve ter ouvido algum criticar o jQuery e o jQuery UI(projeto implementaogrfica)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.Arquiteturae 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-losvisveis. 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 basede 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 decontedos 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 comoacontece 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.4JQuery 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.5UI Core.Contm o ncleo do jQuery UI. Todos os demais componentes dependem desta parte.5.6Interactions. 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.7Widgets.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.8Effects.O jQuery j vem com alguns efeitos simples, mas o jQuery UI traz treze efeitos novos para que voc possa impressionar o usurio.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 deseremfigurantes na Internet para se tornar parte do dia a dia de desenvolvedores de aplicaes Web, empresas e usurios. Atentos a isso, osdesenvolvedores 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 simuladorde 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 dojQuery 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 talforma ao jQuery que passam a ser tratados como se fossem parte da biblioteca. Cada conjunto de mtodos desses chamado de plugin.9Umpedao de cdigode uso de JQueryem 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. Eleusaum site de consulta de CEPdos correios. Ao informar um CEP, o servioretornaum JSON com os dados do logradouroese o cdigo for vlido, ou um erro se o CEP no for encontrado na base dos Correios.Para acessarmos oservio usando o CEP90018-900, vamos usar o endereo abaixo:http://www.buscacep.correios.com.br/servicos/dnec/menuAction.do?Metodo=menuLogradouroO servio vai retornar o contedo abaixo, em formato JSON. Formatei o resultado para ficar mais fcilde 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.Foicriadauma 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 daempresa.Avariveldata,que contm o retorno do servio, j est convertidaem um objeto JavaScript. Com issopodemosacessar qualquer informao retornada, como bairro ou cidade,como se uma propriedade do objeto. Foi exatamente o que fizemos para exibir o logradouro.O cdigovalidaCEPs que no existem na base dos Correios. Para isso, usado umevento fail.Aproveitandoo 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 realmenteacontece 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 detexto verde. Se a requisio retornar algum erro, pode deixar em vermelho.Repare que nesse casoa chamadaassncrona: o servio que verifica o CEP s vai ser chamado depoisde a pgina tersido 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 queinterfacepossa 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.

ReferencesQUERY: the write less, do more, JavaScript library. Disponvel em: Acesso em: 15 mar. 2011jQuery 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, 2008Jquery - A Biblioteca do Programador Javascript 2 Edio, escrito porMaurcio Samy Silva,http://www.buscacep.correios.com.br/