(usehost) Hospedagem de Sites - Recife - PE (Hosting, E-mail Marketing, Comércio Eletrônico)

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.

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:

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>

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.