Programação Web é a Quinta-Feira

Por Pedro Peixoto para o PPLWARE

Primeiros passos em JQuery

Nos últimos artigos temos vindo a falar da integração do Javascript nas aplicações PHP. Na última semana aumentámos um pouco mais a complexidade dos scripts, percebendo que, embora não estivéssemos a fazer nada de muito admirável, eram já necessárias algumas linhas de código. De facto o Javascript é uma linguagem completa e flexível mas pouco produtiva. Para combater este entrave surgiram bibliotecas que vieram facilitar o trabalho dos programadores. Estas bibliotecas permitem um acesso mais rápido a funcionalidades muito requeridas em aplicações WEB, para além de facilitarem o acesso à estrutura DOM e principalmente simplificarem a utilização de AJAX. Vamos por isso, aprender hoje a utilizar o JQuery.

Mas o que é o jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

De facto o lema do jQuery é “Escreva menos, faça mais!”, e podemos assegurar que ambas as afirmações são verdadeiras. O Javascript foi ganhando ultimamente o seu merecido lugar de destaque, a evolução nos motores JS dos browsers, a impossibilidade do FLASH correr nos iDevices da moda, e a eminente emancipação do HTML5 muito contribuíram para isso. No entanto, existiam três pontos negativos em relação ao Javascript:

• Em primeiro lugar é uma linguagem interpretada pelos browsers, e infelizmente nem sempre interpretada da mesma forma pelos diferentes navegadores. Nenhum programador se esquece das dores de cabeça que o já sepultado (felizmente) IE6 nos dava.
• Outro dos problemas era o facto de o Javascript não possuir certas funcionalidades directas que a grande parte dos sites necessita. Para fazer um fadeout ou uma caixa de diálogo eram necessárias algumas linhas de código, ou até algumas funções, sendo já habito os programadores desenvolverem ficheiros .JS que permitiam funcionalidades deste tipo.
• Por último o JS não permitia de forma fácil uma interacção imediata com as bases de dados e scripts PHP até ao aparecimento do AJAX, no entanto o AJAX também era demasiado complicado de ser usado.

Pretendia-se uma maneira fácil, rápida e bonita de programar certas funcionalidades, componentes e efeitos, para além de uniformizar a forma como os ficheiros .JS poderiam ser usados e adaptados de forma a tornarem-se autênticos PLUGINS. Surgiu então o jQuery, de facto muitos programadores WEB consideram hoje esta biblioteca uma autêntica preciosidade. Mas como “um Hello World vale mais do que mil palavras”… J … vamos ao que interessa.

Vamos como é hábito criar um ficheiro HTML com a estrutura básica já definida.

O jQuery não é mais do que um ficheiro .JS que é necessário incluir na nossa página HTML. É possível baixar o jQuery através do próprio site:

• http://jquery.com/

Mas no nosso caso vamos fazer o include ficheiro directo, que está alojado no mesmo sítio:

• http://code.jquery.com/jquery-1.6.1.min.js

Para incluir o ficheiro na nossa página adicionamos no head a seguinte linha de código:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

E pronto estamos prontos para usar o jQuery, fácil não é? Vai ser ainda necessário uma “div” para exemplificar o funcionamento da biblioteca, e um botão para executar o código. Vamos começar por colocar o texto “Hello World!” dentro da div quando o botão Executar é clicado. Para isso basta adicionar o seguinte código ao evento click do botão:

$('#teste').html('Hello World!');

E o resultado:

Como se pode perceber, para aceder a um elemento utilizamos a estrutura $(idouclass), com javascript simples para aceder à div teste teríamos:

Document.getElementById(‘teste’);

Com jQuery:

$(“#teste”)

O jQuery permite também aceder a elementos de uma determinada classe através do “.” em vez do “#” (como em css). Existem muitos mais selectors, podendo utilizar mesmo a navegação através da estrutura DOM à semelhança do JS mas de uma forma muito mais rápida. Aqui ficam alguns exemplos:

• $(“p”) //aceder a todos os elementos “p”
• $(“#pid”) //aceder ao elemento com o id “pid”
• $(“.p”) //aceder a todos os elementos com a classe “p”
• $(“table > tbody > tr”) //aceder a todas as linhas da tabela
• $(“#t1 > tbody > tr”) // aceder a todas as linhas da tabela com id “#t1”
• $(“input[type=’text’]”) // aceder aos inputs do tipo texto

Quando seleccionamos mais do que um elemento podemos usar a função each para percorrer elemento a elemento e aplicar uma acção ou então podemos usar filtros como o :first, :last e a função filter.

Em conclusão, o jQuery facilita a agiliza a programação com Javascript sendo por isso uma biblioteca indispensável. Este foi apenas um “cheirinho” para perceberem que não é de forma alguma complicado usarem esta poderosa biblioteca. Nos próximos artigos continuaremos a explorar o jQuery e também introduziremos jQuery UI de forma a aprendermos como criar aplicações/sites WEB mais atractivos e amigos do utilizador. Vamos ainda aprender a usar o jQuery em conjunto com o PHP, principalmente recorrendo ao AJAX e a funções do jQuery que tornam este recursos

Artigos relacionados

• Programação WEB é à Quinta-feira!

Homepage: JQuery