O jQuery é uma biblioteca JavaScript capaz de adicionar interatividade e dinamismo às páginas web com objetivo de fazer isso de forma simplificada, o que é aderente ao seu lema que é Write less, do more. A biblioteca foi criada dentro dos Padrões Web estipulados pela W3C, por este motivo é uma biblioteca multi-plataforma, ou seja, é compatível com qualquer navegador de internet.
No dia 22 de agosto de 2005 o desenvolvedor americano John Resig, autor do livro Pro JavaScript Techniques, membro da Mozilla Corporation e graduado em Ciência da Computação no Rochester Institute of Technology, revelou através de seu blog sua frustração com a maneira verbosa de se escrever códigos JavaScript. Além disso, expressou seu desejo de criar uma biblioteca que pudesse tornar mais agradável o processo de desenvolvimento, fazendo com que os desenvolvedores passassem a se concentrar somente na lógica dos aplicativos e não nos problemas de incompatibilidade dos navegadores.
“O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?” – JohnResig.
A partir de 2006 surgia o jQuery, uma biblioteca JavaScript capaz de adicionar interatividade e dinamismo às páginas web sem complicar a vida do programador, ao contrário, o objetivo proposto de acordo com o seu lema é Write less, do more (Escreva menos, faça mais). A biblioteca foi criada dentro dos Padrões Web estipulados pela W3C, por este motivo é uma biblioteca Cross-Browser, ou seja, é compatível com qualquer navegador de internet.
O diferencial do jQuery está:
• no suporte total ao CSS3 que permite o uso de seletores para localizar elementos de marcação no HTML da página;
• em sua arquitetura compatível com a instalação de plug-ins e extensões;
• na extensibilidade que permite a adição de novas funcionalidades;
• e na integração com o Ajax e linguagens que permitem buscar informações em um servidor remoto sem que seja necessário recarregar a página.
Por esses e outros motivos, o jQuery é considerado por muitos uma ferramenta simples e eficaz no desenvolvimento de RIAs (Rich Internet Applications).
Instalando o jQuery
O jQuery é simplesmente um arquivo Javascript (.js) que deve ser linkado à página web onde será utilizado. A biblioteca é disponibilizada para download no site oficial http://jquery.com em dois formatos: Minified e Uncompressed, sendo o formato Minified o mais utilizado nas aplicações em fase de produção.
Minified é um formato compacto, não possui quebra de linhas e nem comentários no código. Por isso, é o formato recomendado para aplicações em fase de produção. Uncompressed é excelente para compreender todas as funcionalidades da biblioteca devido aos comentários existentes no código. Este é o formato ideal para quem deseja iniciar os estudos na biblioteca e adicionar novas funcionalidades ou até mesmo corrigir bugs.
Para utilizá-la basta linkar o arquivo em sua aplicação, vide exemplo na Listagem 1. O arquivo pode estar hospedado localmente no seu HD, no servidor remoto da aplicação ou a partir de um arquivo remoto público disponibilizado pela Google, Microsoft e jQuery.
Na linha 3 da Listagem 1 temos o link da biblioteca jQuery através de um servidor remoto público. Caso queira utilizar outra forma de linkar a biblioteca veja o exemplo na Listagem 2.Perceba que não há diferença entre as listagens, são apenas formas diferentes para termos o link com a biblioteca jQuery. Perceba também, conforme pode ser observado no primeiro item da Listagem 2 que é possível termos a biblioteca definida localmente. É importante estar atento ao fato de que toda página da aplicação que usar um script jQuery precisa estar linkada com a biblioteca, caso contrário, o script não funcionará.
Listagem 1. Linkando a biblioteca em sua aplicação.
…
<head>
…
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
…
Listagem 2. Outras formas de linkar a biblioteca.
<script type=”text/javascript" src="D:\SouDev\Versallini\scripts\jquery-1.5.js"></script>
<script type="text/javascript" src="http://localhost/Versallini/scripts/jquery-1.5.js"></script>
<script type="text/javascript" src="http://www.versallini.com.br/scripts/jquery-1.5.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>
Nesse contexto temos a Google Libraries API, uma área para uso público onde a biblioteca jQuery pode ser encontrada e implementada em seu projeto conforme podemos observar na Listagem 3. Na linha 3 é necessário inserir sua chave que pode ser adquirida através de um cadastro simples e gratuito em http://code.google.com/intl/pt-BR/apis/loader/signup.html. Em seguida, na linha 4 o script executa o método google.load() que irá carregar a versão mais atual da biblioteca jQuery (até a presente data a versão 1.5.1 será carregada).
Listagem 3. Carregando o jQuery através do Google Libraries API
…
<head>
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=INSERIR_SUA_CHAVE”></script>
<script type=”text/javascript”>
google.load(“jQuery”,”1”);
</script>
</head>
...
Trabalhando com seletores
Imagine uma página com diversos links que quando clicados pelo usuário o conteúdo de um determinado elemento é alterado e a sua formatação também. Esse é um recurso muito utilizado pelos desenvolvedores na criação de sites ou aplicações. Mas antes de vermos como trabalhar com isto na prática, é preciso aprender a trabalhar com o conceito básico de toda a biblioteca jQuery, a seleção de elementos. A biblioteca jQuery permite que o desenvolvedor selecione elementos através do id, do nome da classe, pelo atributo ou pela composição de todos esses seletores, vide exemplo na linha 4 e 16 da Listagem 4 onde a marcação recebe a identificação no atributo CSS.
…
<style type="text/css">
body { margin: 0; }
#content { background: #9C6; width: 100%; height: 100%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('#content).css('background','red');
});
});
</script>
</head>
<body>
<div id="content">
<button type="button">Mudar Cor de Fundo</button>
</div>
…
Todo código Javascript que utiliza a biblioteca jQuery é identificado pelo $. Veja que na linha 8 da Listagem 4 o documento é selecionado e responsável por informar ao navegador de internet que a leitura e execução do código Javascript deverá prosseguir somente quando a página estiver carregada. Esta ação é definida apenas pelo método $(‘document’).ready().
Em seguida, na linha 9, o método $(‘button’).click() sinaliza que quando o usuário clicar no botão o seletor content terá sua cor de fundo alterada conforme mostra a linha 10 $('#content).css('background','red') onde o elemento selecionado através da função .css() sofrerá uma modificação.
Selecionar o elemento é apenas o primeiro processo, em seguida é preciso saber o que fazer. Conheça todas as opções que a biblioteca oferece em sua documentação oficial no link apresentado na seção links. Ao acessar o portal, você perceberá que as funções são separadas por categorias, por exemplo:
• Efeitos: a biblioteca jQuery oferece diversas técnicas de animação que podem ser adicionadas a uma página da web. Estas incluem animações simples que são utilizadas com freqüência assim como a capacidade de criar sofisticados efeitos personalizados. Nesta categoria, são apresentados cada um dos métodos de efeito visual que podem ser utilizados para prover alguma apresentação diferenciada de conteúdo para o usuário.
• Ajax: a biblioteca jQuery possui um conjunto completo de recursos AJAX. Nesta categoria, temos as funções e os métodos que nos permitem carregar os dados do servidor sem a necessidade atualizar toda a página do browser.
• Eventos: os métodos apresentados nesta categoria são usados para registrar os comportamentos que serão utilizados no momento em que o usuário interage com o browser, e para manipular os comportamentos registrados.
Criando uma aplicação com jQuery
Agora que já entendemos o funcionamento do jQuery, podemos criar uma aplicação que utilize alguns dos recursos interessantes da biblioteca. Nossa aplicação terá como princípio a requisição de dados oriundos de APIs (Interface de Programação de Aplicações) cujos resultados serão fornecidos nos formatos JSON e XML (ler Nota DevMan 2). Utilizaremos o recurso de modificar o conteúdo de um elemento retornado sem precisar recarregar a página. Para isso, faremos uso dos métodos que acionam determinados eventos e permitem a captura de dados usando o PHP.
O primeiro recurso que veremos será o carregamento de informações através do JSON utilizando Ajax com jQuery (ler Nota DevMan 3). Para isso, faremos uso da API do Twitter. Mas antes é importante criarmos o layout de nossa aplicação. Veja as Listagens 5 e 6, com a página inicial e o CSS estilizando e marcando os elementos.
JSON, um acrônimo para "JavaScript Object Notation", é um formato leve para intercâmbio de dados computacionais. O JSON é um subconjunto da notação de objeto do JavaScript, mas seu uso não requer JavaScript.
Ajax é a sigla em inglês para Asynchronous Javascript and XML e trata-se de uma técnica de carregamento de conteúdos em uma página web com uso de Javascript e linguagens server-side capazes de retornar dados nos seguintes formatos suportados: XML, HTML, SCRIPT, JSON, JSONP e TEXT. O Ajax utiliza o objeto XMLHttpRequest criado para realizar requisições ao servidor e transferir arquivos através do protocolo HTTP.
Listagem 5. Home da aplicação.(Arquivo: index.php)
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery - WEB Magazine</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/exemplo.js"></script>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo"></div>
</div>
<div id="menu"><a name="buscape" href="buscape.php">API Buscapé</a> | <a name="revistas" href="xml/revistas.xml">Revistas</a> </div>
<div id="content"> </div>
</div>
</body>
</html>
Listagem 6. Folha de Estilos.(Arquivo: style.css)
body {
background: #FDFED8;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
margin: 0;
}
a:link, a:visited {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#top {
background: #FFF;
height: 90px;
width:960px;
overflow:auto;
}
#logo {
margin: 20px;
}
#menu {
width: 960px;
height: 24px;
background: #9C6;
padding-top: 5px;
}
#menu a {
font-size: 14px;
padding: 15px;
vertical-align: middle;
font-weight: bold;
}
#content {
width: 960px;
min-height: 280px;
background: #FFF;
float: right;
}
.twitter {
width: 500px;
float: left;
padding: 20px;
vertical-align: middle;
}
.twitter a {
font-weight: bold;
}
.twitter p {
margin: 0;
line-height: 1.8;
}
.revistas {
width: 340px;
float: left;
padding: 20px;
vertical-align: middle;
}
.revistas p {
margin: 0;
line-height: 2.2;
}
.revistas .imagem {
float: left;
display: block;
margin-right: 8px;
}
.buscape {
width: 280px;
float: left;
padding: 20px;
vertical-align: middle;
}
.buscape .imagem {
display: block;
margin-right: 5px;
}
#precos {
color: #F00;
font-weight: bold;
font-size: 18px;
display: inline;
}
Nosso objetivo é obter informações do Twitter do usuário DevMedia. De acordo com a documentação da API podemos usar a url http://twitter.com/statuses/user_timeline/devmedia.json?&count=0&callback=? para fazer a requisição de dados ao Twitter . Essa url retornará informações do usuário indicado no formato JSON, vide Figura 1. Utilizaremos as seguintes informações: nome do usuário, url da imagem do perfil, descrição, cor e url do site e url da imagem de fundo.
Figura 1. Arquivo JSON.
A requisição ocorrerá logo após a página ser devidamente carregada, tarefa da qual o método $(‘document’).ready() é encarregado de sinalizar, vide linha 1 da Listagem 7. Enquanto o usuário aguarda a requisição feita à API do Twitter, a aplicação exibirá uma imagem GIF como uma barra de progresso, linha 2 e 3.
O método $.getJSON() é exclusivo para requisições de arquivo no formato JSON. Esse método admite apenas uma função de callback executada no fim da requisição e apenas quando for bem-sucedida, vide linhas 4 a 6. A function(data) na linha 7 é a nossa função de callback, que utiliza o método $.each() para realizar um looping no DOM em busca de elementos retornados da API do Twitter, vide linha 8 a 25 onde temos a execução dele e a captura de dados através do objeto (ler Nota DevMan 4). Desta forma, o seletor CSS #logo que compõe o topo da página será preenchido com tais informações.
O Document Object Model (DOM) é padão multi-plataforma e independente de linguagem de programação para representar e interagir com os objetos presentes em documentos HTML, XHTML e XML.
Listagem 7. Javascript (Arquivo: exemplo.js)
$(document).ready(function(){
var iconCarregando = $('<img src="images/barra1.gif" />');
$('#logo').html(iconCarregando);
var url = 'http://twitter.com/statuses/user_timeline/devmedia.json?&count=0&callback=?'
$.getJSON(
url,
function(data) {
$.each(data, function(i,obj) {
if ( i == 0 ) {
var topo = '<p><a href="http://www.twitter.com/' + obj.user.screen_name + '" target="_blank">';
topo += '<img src="' + obj.user.profile_image_url + '" style="float:left;margin:0 10px 0 0;" border=0 />';
topo += '</a><b>Nome: </b>' + obj.user.screen_name;
topo += '<br /><b>Web: </b><a href="' + obj.user.url + '">' + obj.user.url + '</a>';
topo += '<br /><b>Bio: </b>' + obj.user.description + '</p>';
topo += '<div class="clear"></div>';
var backRepete = (obj.user.profile_background_tile) ? 'repeat' : 'no-repeat';
$('body').css({
backgroundColor: '#' + obj.user.profile_background_color,
backgroundImage: 'url(' + obj.user.profile_background_image_url + ')',
backgroundRepeat: backRepete
});
$('#logo').html(topo);
$(iconCarregando).remove();
} //End if
}); });
// Executa somente quando o usuário clicar sobre um link
$('#menu a').click(function(e) {
e.preventDefault();
$('#content').empty();
var url = $(this).attr('href');
$.ajax({
url: url,
dataType: 'xml',
type: 'POST',
timeout: 5000000,
beforeSend: function(){
$('#content').html(iconCarregando);
},
complete: function() {
$(iconCarregando).remove();
},
success: function(data, textStatus) {
if (url == 'xml/revistas.xml') {
var html = '<div class="revistas">';
html += '<h2>' + $(data).find('title').text() + '</h2>'
$(data).find('imagem').each(function(i) {
html += '<div class="revistas">';
html += '<img src="' + $(this).find('url').text() + '" title="' + $(this).attr('title') + '" class="imagem" />'
html += $(this).next().text();
html += '</div>';
});
$('#content').html(html);
}
if (url == 'buscape.php') {
var html = '';
$(data).find('product').each(function(i) {
html += '<div class="buscape">';
html += '<h2>' + $(this).find('productShortName').text() + '</h2>';
html += '<img src="' + $(this).find('thumbnail').attr('url') + '" class="imagem" />';
html += '<h3> De <div id="precos">R$ ' + $(this).find('priceMin').text().replace('.',',') + '</div>';
html += ' a <div id="precos">R$ ' + $(this).find('priceMax').text().replace('.',',') + '</div></h3>';
html += '<a href="' + $(this).find('link').attr('url') + '">';
html += '<img src="images/compare.gif" border=0></a>';
html += '</div>';
});
$('#content').html(html);
}
},
error: function(xhr,er) {
$('#content').html('<h2>Ops! Ocorreu um erro inesperado.</h2>')
}
});
}); })
Pronto! Agora já temos o topo da aplicação criado. O segundo recurso será a integração com uma linguagem server-side com retorno de dados em XML utilizando Ajax com jQuery. Para isso, faremos uso da API do Buscapé para obtermos a lista de produtos com seus respectivos valores, dando também a possibilidade do usuário comparar os valores nas demais lojas anunciantes.
Antes de analisarmos o código Javascript, precisamos fazer download da API em http://developer.buscape.com. Ela é disponibilizada em PHP e .NET, no exemplo trabalhamos com a versão em PHP. Sua implantação é muito simples, veja na Listagem 8. Na linha 2 a API é incluída e logo em seguida ela é instanciada com as configurações básicas para testes, é definida também a operação que será realizada.
Listagem 8. API Buscapé(Arquivo: buscape.php)
<?php
require_once 'API/Apiki_Buscape_API.php';
$applicationID = '564771466d477a4458664d3d';
$sourceID = '';
$objApikiBuscapeApi = new Apiki_Buscape_API( $applicationID, $sourceID );
$objApikiBuscapeApi->setSandbox();
echo $objApikiBuscapeApi->findProductList( array( 'keyword' => 'Notebook' ) );
?>
Quando o usuário clicar sobre um link, será disparado o método $(‘#menu a’).click() que logo dá início ao processo de requisição à API do Buscapé usando o método $.ajax() que carrega uma página remota usando uma requisição HTTP sem precisar atualizar a página e aceita os seguintes formatos de dados: XML, HTML, SCRIPT, JSON, JSONP e TEXT. A grande vantagem deste método em relação às outras, também AJAX, é que ele permite diversas funções de callback, são elas: beforeSend, complete, error e success. Desta forma, é possível realizar procedimentos a cada etapa da requisição, além da possibilidade de tratar o erro diferentemente do método $.JSON(). Veja a seguir como fizemos uso delas.
A função beforeSend() modifica o objeto XMLHttpRequest antes do seu envio, muito comum para definir cabeçalhos personalizados. Em nossa aplicação ela é utilizada para exibir a barra de progresso antes do envio da requisição, vide linhas 36 a 38 da Listagem 7. É acionado independente do tipo de solicitação.
A função complete() é chamada quando a requisição termina e admite dois argumentos: o objeto e uma string definindo o status de como terminou a requisição. Na aplicação é utilizada para remover a barra de progresso, vide linhas 39 a 41. A função error() é chamada quando ocorre uma falha na requisição. Ela é usada em nossa aplicação para informar que ocorreu um erro, vide linhas 69 a 71.
E finalmente a função success() que é executada quando a requisição é efetuada com sucesso. Ela retorna os dados de acordo com o dataType informado e uma string que descreve o status. Pode ser considerada a função principal dentro do método $.ajax() pois é onde os dados requisitados serão tratados. Em nossa aplicação o resultado da requisição exibe uma página de resultados conforme Figura 2.
Figura 2. Resultado da exibição.
Resumindo, quando a API do Buscapé for requisitada, como resultado ela fornecerá um arquivo XML, vide Figura 3. Este arquivo será tratado para exibir a imagem dos produtos, o valor mínimo e máximo e um link para comparar os preços. No código, essa ação pode ser visualizada da linha 54 a 67 na Listagem 7. Reparem que agora é usada a função $().find() para localizar tags ou propriedades de marcação no arquivo XML.
Figura 3. Arquivo XML.
O terceiro recurso é apenas uma maneira mais simples de trabalhar com dados dinâmicos em um sistema fazendo uso de um arquivo XML contendo as informações necessárias, vide Listagem 9. Esses dados são requisitados utilizando o método $.ajax() e tratados quando completo, vide linhas 43 a 53 da Listagem 7.
Listagem 9. XML Revistas (Arquivo: revistas.xml)
<?xml version="1.0" encoding="iso-8859-1"?>
<catalogo>
<title>Revistas DevMedia</title>
<item>
<imagem title="ClubeDelphi">
<url>images/clubeDelphi.jpg</url>
</imagem>
<descricao>
<![CDATA[
<p><strong>Clube Delphi</strong> - Voltada para desenvolvedores que utilizam as ferramentas Embarcadero: Delphi, Delphi for PHP, Delphi PRISM.</p>
]]>
</descricao>
</item>
<item>
<imagem title="SQL Magazine">
<url>images/SQLMagazine.gif"</url>
</imagem>
<descricao>
<![CDATA[
<p><strong>SQL Magazine</strong> - Revista focada em banco de dados, análise, projeto e modelagem.</p>
]]>
</descricao>
</item>
<item>
<imagem title="Java Magazine">
<url>images/JavaMagazine.png</url>
</imagem>
<descricao>
<![CDATA[
<p><strong>Java Magazine</strong> - Voltada para desenvolvedores Java e tecnologias correlatas.</p>
]]>
</descricao>
</item>
<item>
<imagem title=".NET Magazine">
<url>images/NETMagazine.jpg</url>
</imagem>
<descricao>
<![CDATA[
<p><strong>.NET Magazine</strong> - Voltada pra desenvolvedores .NET e tecnologias Microsoft.</p>
]]>
</descricao>
</item>
</catalogo>
Conclusão
É importante que você desenvolvedor tenha consciência em escrever seus scripts em conformidade com os Padrões Web, pois de nada adianta ter nas mãos uma biblioteca riquíssima e utilizá-la de forma incorreta. Para que você não tenha problema em suas aplicações selecionamos alguns links que vão lhe ajudar no estudo do jQuery além da própria documentação oficial citada anteriormente, vide seção Links.
Vimos neste artigo que a biblioteca jQuery é realmente capaz de proporcionar ao desenvolvedor aquilo que propõem: escreva menos, faça mais. Portanto, vale a pena aprofundar os estudos nessa biblioteca e também em outras com objetivos semelhantes, como por exemplo: Prototype, Mootools e Dojo.
A internet tem conquistado atualmente um alto grau de investimento das grandes corporações do mundo inteiro de todos os segmentos e isso faz com que os desenvolvedores estejam sempre antenados em soluções que sejam capazes de enriquecer a experiência do usuário, seja mais um.
Links
• Documentação Oficial do jQuery
http://docs.jquery.com
• jQuery
http://jquery.com
• Google Libraries API
http://code.google.com/intl/pt-BR/apis/libraries/devguide.html
• Twitter Developers – API Documentação
http://dev.twitter.com/doc
• Learning jQuery
http://www.learningjquery.com/
• W3Schools
http://www.w3schools.com/
• Tableless
http://www.tableless.com.br/
• Livro jQuery Fundamentals
http://herberthamaral.com/2010/11/livro-fundamentos-de-jquery-100-traduzido-para-pt-br/
Saiba mais em :
jQuery – A Biblioteca JavaScript para Webdesigner
