jQuery - Escreva Menos, Faça Mais

Introdução ao jQuery

Irei apresentar a vocês meu primeiro artigo sobre o framework jQuery, cujo objetivo é lhes mostrar uma nova, e mágica forma de se trabalhar com Javascript.

jQuery faz parte de uma nova geração de frameworks baseados na linguagem Javascript que visam ajudar os desenvolvedores a se concentrarem na lógica do sistema web sem se preocupar com a compatibilidade entre browsers, problema muito comum como, por exemplo, quando iremos fazer uma requisição Ajax e nos deparamos com mecanismos diferentes entre o IE7 e IE6, que infelizmente não pode ser deixado de lado devido à grande quantidade de usuários que ainda o utilizam. Mas com o jQuery isso não será mais problema.

Seu lema é “Escreva Menos, Faça Mais (Write Less, Do More)”. Isso explica o que o jQuery trouxe de avanço ao Javascript além da resolução da incompatibilidade entre browsers. Vejamos alguns tópicos:

• Redução da codificação necessária para uma determinada ação.
• Uma extensa reutilização de código devido à utilização de plug-ins.
• Um vasto repositório de plug-ins criados e compartilhados por outros desenvolvedores na busca de melhorar cada vez mais a experiência do desenvolvedor com o framework, segundo o tópico acima.
• É especialmente capaz de trabalhar com Ajax e principalmente DOM¹.
• E suporte a seletores compatíveis com CSS1-3. (CSS1, CSS2 e CSS3).

Download do jQuery

Para que possamos utilizar o jQuery devemos primeiramente baixá-lo pelo seu site http://jquery.com, entrando na seção Download do site.

O jQuery mais uma vez visando à melhor experiência para o desenvolvedor nos fornece duas opções para Download, uma comprimida e outra descomprimida. A diferença entre elas está apenas relacionada ao estágio do seu sistema, se esse ainda se encontra em desenvolvimento ou se já está em produção. A versão comprimida visa a fornecer ao desenvolvedor uma versão com um tamanho bem menor para os sistemas em produção do que a descomprimida utilizada geralmente no desenvolvimento para debug e para o entendimento do que acontece por trás da mágica.

Utilizando o jQuery

Depois que tivermos baixado o jQuery ele estiver devidamente alocado em alguma pasta de sua preferência, podemos iniciar o estudo da “mágica” que o framework nos oferece. Primeiro devemos fazer com que o Javascript entenda as funções do jQuery. Esta configuração deve ser feita no cabeçalho da página HTML, ou seja, dentro da tag HEAD. Veja o exemplo:

<head>
<script type="text/javascript" src="caminho_do_jquery/versao_jquery"></script>
</head>

Onde caminho_do_jquery deve apontar para pasta onde você guardou os arquivos baixados do site e versao_jquery o nome do arquivo principal do jQuery, geralmente jquery-1.3.x.js ou jquery-1.3.x.min.js. Feito isso, automaticamente todo arquivo .js que utiliza as funções do jQuery deve vir abaixo dessa linha. Agora podemos utilizar as funções do framework livremente dentro dos códigos Javascript.

Veremos agora o porquê que o jQuery adotou como lema o “Escreva Menos, Faça Mais”.

Vamos supor que você queira alterar o conteúdo de uma tag DIV através de seu id. Com o Javascript teríamos a seguinte instrução:

document.getElementById(‘id_div’).innerHTML = “conteudo”;

Agora, a mesma instrução com o jQuery:

// Recupera o elemento com id “div_id” e altera o conteúdo dele para a string passada // na função html() $(“#div_id”).html(“conteudo”);

Veja o quanto a nossa instrução diminuiu e repare também que estamos utilizando um seletor parecido com o que pode ser usado no CSS. Esta é a funcionalidade da $ que a função principal do jQuery e é através dela que você poderá utilizar todo o poder dele.

Queremos agora que a instrução acima deva ser executada quando o documento acabar de ser carregado. Veja o código:

// A função ready chama a função quando o documento estiver carregado $(document).ready(function() { // Aqui vem as instruções $(“#div_id”).html(“conteudo”); });

Mas, se eu quisesse alterar o conteúdo do elemento quando eu clicar em um botão? Para isso iremos utilizar a função $(“elemento_ou_id”).click(fn) que executa a função passada com parâmetro caso um evento de click aconteça no elemento retornado pela função $ do jQuery. Exemplo:

// A função click é referente ao evento onclick do HTML $(“#div_id”).click(function() { // Aqui vem as instruções $(“#div_id”).html(“conteudo”); });

E ai está, quando o elemento for clicado seu conteúdo será alterado. Veja o quanto isso simplifica a nossa vida e separa o trabalho em um projeto, pois podemos ter um designer e um programador trabalhando ao mesmo tempo devido a praticamente total separação do código Javascript da marcação HTML, apesar de você não obrigatoriamente ter de seguir assim.

Existem várias outras funções para manipular eventos além das outras funcionalidades do framework, mas que devido à quantidade de tópicos a serem abordados é muito grande, não continuaremos aqui. Recomendo a você que procure a documentação do jQuery que é muito simples, de fácil navegação e que utiliza uma linguagem muito técnica, além de vários exemplos mostrando suas funcionalidades. A documentação pode ser encontrada no seguinte link http://docs.jquery.com/Main_Page.

Chegamos ao final do nosso artigo introdutório ao jQuery e vimos apenas o básico desse excelente framework. Até a próxima.

¹ DOM : http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos.

Autor: Marcus Henrique