Tutorial JQUERY – Introdução (com 2 exemplos)

Marcas Technorati: JQUERY,Javascript,Animação,library,unobtrusive,leve

Mudámos de casa – visitem o novo site em www.istomesmo.com

Ultimamente muito se tem ouvido falar sobre JQUERY. Mas afinal que linguagem é esta? A JQUERY é uma biblioteca de Javascript extremamente útil no desenvolvimento com esta linguagem.

Mas quais são as mais valias que a JQUERY traz ao desenvolvimento com javascript?

Só quem ainda não teve necessidade de utilizar javascript no desenvolvimento de websites, não se deparou com a dificuldade que é desenvolver utilizando esta linguagem, problemas com CSS’s, compatiblidade entre browsers, problemas de acessibilidade, etc…

O objectivo deste tipos de bibliotecas, como a JQUERY, é exactamente facilitar e uniformizar o desenvolvimento com Javascript, abstraindo os programadores deste tipo de problemas, focando-os apenas no desenvolvimento puro.

As várias bibliotecas Javascript existentes, utilizam aproximações um pouco diferentes umas das outras, mas todas com o mesmo objectivo. Existem bibliotecas que são constituídas por vários ficheiros, com as várias funcionalidades separadas em cada ficheiro, permitindo optimizar o seu download, restringindo-nos apenas aos ficheiros necessários. Um exemplo desta aproximação é a biblioteca MooTools.

A JQUERY é constituída por um ficheiro javascript único, onde tenta criar um modelo de abstração que nos permite programar em javascript de uma forma simples, elegante e intuitiva. A versão comprimida deste ficheiro ocupa apenas 14KB! Excelente!

A popularidade desta biblioteca tem aumentado bastante nos últimos anos, como é visível através do Google Trends:

Sites como a BBC, o Digg, a Intel, o Technorati, entre outros, já utilizam esta biblioteca, o que demonstra que as suas capacidades estão comprovadas.

Agora que já ficámos com uma introdução sobre JQUERY, vamos passar a um pequeno exemplo, para que possamos ver o verdadeiro poder desta biblioteca. Para isso, vamos efectuar o download da última versão (neste momento 1.2.3) através do endereço :

http://docs.jquery.com/Downloading_jQuery

Para efeitos de teste, podemos efectuar download da versão normal (não compactada)

O primeiro exemplo será o famoso Olá Mundo, utilizando JQUERY. Umas das vantagens que vamos encontrar imediatamente neste exemplo, é na utilização do evento window.onload, que provocava imensas chatices. Com o JQUERY este problema está resolvido, pois dispomos de uma pequena função que é executada assim que o DOM está carregado.

$(document).ready(function(){alert("Olá Mundo JQUERY!");});

Fácil, não é?
Esta função pode ser usada as vezes que necessitarmos, sem que exista qualquer problema.

Vamos passar para um exemplo com animação e com o click num link.
No código HTML vamos criar um link e uma div por baixo com algum texto, como é mostrado de seguida:

<div>
   <a href="#">Clica Aqui</a>
   <div id="divTexto" style="background-color:#FF0000">
      Texto e mais texto...
   </div>
</div>

No header da página vamos inserir o código para mostrar/esconder o div que contém o texto. Esse código é apresentado a seguir:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $("a").toggle(function() {
        $("#divTexto").hide('slow');
        }, function() {
        $("#divTexto").show('fast');
    });
});
</script>

Experimentem agora clicar no link, e verifiquem que a div de texto é escondida/mostrada com um efeito bastante agradável.

Esta função esconde ou mostra a div “divTexto” ($(“#divTexto”)) sempre que se clica num link da página ($(“a”)).

Para obtermos o objecto divTexto utilizamos $(“#divTexto”) que é muito semelhante ao document.getElementByID(“divTexto”), mas muito mais simples, e sem problemas de compatibilidade entre browsers.

Como devem ter reparado, adicionámos funcionalidades à página, sem introduzirmos javascript no body do html. Esta é uma grande vantagem desta biblioteca, pois permite-nos interagir com os elementos do DOM de uma forma fácil e não intrusiva, tornando mais fácil possíveis alterações no futuro.

Espero que com este tutorial tenham ficado com uma pequena ideia das capacidades da JQUERY, pelo menos que tenham ficado curiosos.

Se gostaram deste artigo subscrevam a feed RSS do istomesmo, para ficarem actualizados sobre os últimos artigos.

Subscrevam aqui a fedd RSS