Seg

01

Dez

2008

15:19

jQuery é uma biblioteca JavaScript lançada em janeiro de 2006 que vem fazendo sucesso na comunidade de programadores. A JavaScript estava no auge na época da guerra dos browsers, mas depois disto foi caindo em desuso. Ficou meio esquecida e, às vezes, até criticada por não ser suficientemente "séria" ou "poderosa". Até que...

Mostrando a que veio

John Resig, autor da jQuery

John Resing, o criador de jQuery, usa como slogan "write less, do more", ou seja, "escreva menos, produza mais". A maneira como este menino montou a biblioteca é excepcional: o foco principal é a simplicidade e a lógica para usar seus recursos poderosos é absolutamente impecável. Se você "pegar o jeito", ou seja, se conseguir entender o mecanismo básico de funcionamento desta biblioteca, sua curva de aprendizado será espantosamente rápida. Comigo foi assim, motivo pelo qual simpatizei com a jQuery logo de cara.

Além disto, as características da biblioteca são únicas e diferenciadas:

• O acesso direto ao DOM se faz com uso dos poderosos seletores das CSS 2.1 e CSS 3.
• O uso de regras de estilo não sofre qualquer tipo de limitação devido a inconsistências dos navegadores. Mesmo os seletores CSS3 podem ser usados sem qualquer restrição.
• A manipulação de conteúdo sem limitações, com algumas poucas linhas de código.
• O suporte para todo tipo de evento de interação com o usuário, sem limitações impostas pelos navegadores.
• A possibilidade de inserir uma grande variedade de efeitos de animação com uma simples linha de código.
• O uso simplificado e sem restrições com AJAX e linguagens de programação, como PHP e ASP.
• A simplificação na criação de scripts.
• O emprego cross-browser.
• E finalmente, mas não menos importante, o encadeamento, que sempre retorna um novo objeto.

A tarefa complexa e chata pra caramba de acessar o DOM com sintaxe JavaScript padrão tornou-se extremamente simples. Como a Aldeia Numaboa está recheada de Javascripts, já suei muito escrevendo os ditos cujos para trazer um pouco de interatividade para o site. Quando precisava acessar qualquer elemento da página, era um tal de getElementById, appendChild e outras tantas coisas que eu até ficava meio tonta. Agora virou moleza e eu realmente passei a escrever menos e a produzir mais. Veja só a diferença!

Modo tradicional de criar e inserir um parágrafo, com seu respectivo texto, em uma div existente no documento com id="minhaDiv":

window.onload = function(){
   var paragrafo = document.createElement('p');
   var container = document.getElementById('minhaDiv');
   container.appendChild(paragrafo);
   var mensagem = document.createTextNode('Aldeia Numaboa');
   paragrafo.appendChild(mensagem); 
}

Agora compare:

$(document).ready(function(){
   $('#minhaDiv').append('<p>Aldeia Numaboa</p>');
});

Tá certo que o novo código ainda parece muito estranho, mesmo para aqueles que programam em JavaScript, mas com algumas explicações muito rápidas este primeiro susto passa rapidinho. O que pretendia mostrar é que, com apenas 3 linhas de programação jQuery foi possível substituir 7 linhas da programação tradicional. Isto é só um aperitivo, porque a biblioteca oferece uma pancada de funções super práticas, algumas delas com efeitos especiais muito legais e alguma coisa de AJAX.

Como usar a biblioteca

Para usar a biblioteca que é apresentada no site do autor como "uma biblioteca rápida e concisa que simplifica o modo como você lida com documentos HTML, eventos, animações e AJAX", basta fazer o download da jQuery e colocá-la no seu site num diretório da sua escolha. Depois disto, é só incluir a biblioteca no cabeçalho das páginas com

<script type="text/javascript" src="http://seudominio.com.br/seudiretorio/jquery.js">

para poder começar a explorar todas as possibilidades que esta biblioteca oferece.

Explicações rápidas

As explicações a seguir são rápidas, mas nem por isto de importância secundária. Aliás, estes conhecimentos são imprescindíveis para começar a usar esta biblioteca e já dão uma boa idéia de como a coisa funciona.

Antes de começar com as explicações propriamente ditas, vamos a um exemplo de página HTML que incorpora a biblioteca e indica os locais onde serão escritos o código JavaScript e os elementos HTML:

<html>                                                                  
   <head>                                                                  
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
         // aqui vai entrar o código javascript
      </script>
   </head>
   <body>
      <!-- aqui ficará o conteúdo HTML -->
      <div id="minhaDiv"></div>
   </body>
</html>

Neste exemplo, a biblioteca foi incorporada com <script type="text/javascript" src="/jquery.js"></script>, o que pressupõe que ela esteja no mesmo diretório que a página html. Se você colocar a biblioteca num outro diretório, você precisará referenciá-la de acordo. Agora é só partir para o abraço: criar o código Javascript e o conteúdo HTML.

Quando o DOM está pronto?

Quando usamos o tradicional window.onload() = function() {..., nos deparamos com um problema muito sério: enquanto a página inteira não tiver sido carregada (inclusive com todas as imagens e penduricalhos), a função declarada não vai ser executada. Dependendo do peso da página, isto pode demorar um bocado. Usando a jQuery as coisas são bem diferentes.

Como a jQuery trabalha em cima do DOM, assim que a página solicitada informar o browser de que existe (ou seja, assim que o DOM estiver definido), a biblioteca já começa a trabalhar. Isto significa que, enquanto as imagens (e os outros penduricalhos) ainda estiverem sendo enviados, a biblioteca já está a toda e o ganho de tempo é nítido - tanto os programadores quanto os usuários agradecem

Como praticamente qualquer coisa que pretendemos fazer com a jQuery lê ou manipula o DOM, assim que ele estiver pronto é hora de começar a adicionar eventos e outras coisinhas. Mas como saber quando o DOM está pronto? Acompanhe...

A principal função da biblioteca jQuery é a função jQuery, que pode ser substituída por $ (um brinde do autor). Quando escrevemos $(document) é a mesma coisa que jQuery(document) (veja nos exemplos dados como comparação mais acima), esta função nos devolve um objeto document, ou seja, o DOM da nossa página. Se grudarmos um pontinho seguido de ready (cuja tradução é pronto), o DOM está na palma da nossa mão e podemos começar a atuar, ou seja, pedimos para adicionar à div com id="minhaDiv" um parágrafo com o texto "Aldeia Numaboa".

É assim que tudo começa. Quando finalmente todas as imagens (e os penduricalhos) da página tiverem sido carregados, a div id="minhaDiv" vai mostrar o texto determinado. E isto é só o começo da história.

Se você quiser testar o exemplo, faça o download da biblioteca, instale-a no seu site e faça o teste com uma página do tipo:

<html>                                                                  
   <head>                                                                  
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            $('#minhaDiv').append('<p>Aldeia Numaboa</p>');
         });
     </script>
   </head>
   <body>
      <!-- aqui está o conteúdo HTML -->
      <div id="minhaDiv"></div>
   </body>
</html>

Finalmentes

Aguardem, tem mais sobre a biblioteca jQuery. Assim que eu tiver algum tempo.

Abraços a todos da vó