JQuery: Entendendo alguns conceitos bem simples

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Você que ainda não conhece essa biblioteca de Scripts fantástica, pode começar com uma pequena introdução na historia e um pouco de conceito.

Se você já programou para web, com certeza já ouviu falar em um tal de JQuery. Bom, senão ouviu é melhor pesquisar muito, começando agora.

Praticamente escrever javascript para obter funcionalidades Client-Side era uma tarefa difícil e depois que surgiu o conceito de Ajax (todos já ouviram muito falar dele não é?) o peso dessa tarefa apenas aumentou. Chamadas assíncronas, atualizações de paginas parcialmente, bem essas tarefas exigiam muitas linhas de código (hardcore).  Foi então, que em 2006, bem sem se delongar muito, nesse ano de 2006 surgiu uma biblioteca que reunia todas as funcionalidades javascript reunidas de forma a facilitar a vida do pobre programador. Agora, para fazer efeitos e modificar textos na pagina eram tarefas mais simples.

Quando o JQuery caiu nos ouvidos dos desenvolvedores em massa, a biblioteca ganhou fama mundial e começaram a surgir seus inúmeros plug-ins e pilhas e mais pilhas de exemplos em fóruns da área.

Bastou pouco tempo para os grandes verem que essa nova biblioteca era realmente interessante, empresas como Google, Microsoft, Nokia e tantas outras começaram a adotar o JQuery como biblioteca básica Javascript. Como exemplo, a Microsoft inclui suporte nativo ao JQuery no seu Visual Studio 2010, incluindo também suporte a Intellisense e outras funcionalidades.

Quanto aos Plug-ins, bem, é um caso a parte. Como o JQuery é uma plataforma Open,  os desenvolvedores dispostos a criar novas funcionalidades tiveram um prato cheio e começaram a surgir coisas incríveis.

Agora, por ultimo e não menos importante, um dos fundamentos da biblioteca é ser CrossBrowser, sem mexer no seu código, você garante que aquele script que você escreveu e testou apenas no Internet Explorer, também funcione no Firefox  ou Chrome. O que antes exigia testes e mais testes para tornar compatível, agora ficou “padronizado”.

Bem, com desenvolvedor, o interessante é codificar. Se você nunca teve contato com um código JQuery, segue abaixo um exemplo bem simples do seu poder.

Vamos fazer algo simples, mas que antes exigia algumas pilhas de código, agora se resume em algumas pequenas  linhas. Para isso vamos utilizar o código mais básico em JQuery, apenas para você poder ver e se aprofundar mais na linguagem posteriormente, então vamos la.

Nesse momento você pode utilizar um editor de texto simples, como o Notepad.exe ou Notepad++, comece criando um código html simples.

codigo da listagem1

Bom, tudo muito simples até o momento, um pequeno HTML, que com mais algumas linhas vai ganhar um pouco mais de vida. Se você acessar esse arquivo em um Browser, vai ver apenas um texto “JQuery FadeIn Teste”. Vamos brincar com esse pequeno texto.

Comece incluindo a referencia a biblioteca JQuery. Você pode fazer isso baixando o arquivo .Js diretamente no site http://jquery.com/ ou utilizando um CDN(Content Delivery Network) que são inúmeros, no meu caso eu escolhi o CDN da Microsoft, que segue abaixo:



Coloque esse código dentro das Tag’s: 


Isso vai incluir as funcionalidades que o JQuery oferece na sua pagina. Agora, vamos escrever mais algumas linhas de código para fazer nosso efeito.


Existe nesse código alguns aspectos para se anotar:

$(document).ready: Em Jquery, utilizamos o $ como atalho par jQuery(),uma das principais funções que você vai utilizar, com ela você consegue localizar objetos DOM dentro da sua pagina, utilizando diversos filtros diferentes. Ao passar document, eu indico com sendo o todo e logo em seguida, passo meu evento para ser tratado ready().

Utilizando o conceito das funções anônimas, criamos um Handler(manipulador) para o nosso evento.

$('#jqueryDiv').fadeIn(3000).fadeOut(1000); : Aqui esta a nosso enorme código, veja como estou utilizando a função seletora $ e passando um filtro utilizando #, isso indica que estou procurando um objeto que possua o ID = jqueryDiv. FadeIn e FadeOut fazem o resto do trabalho. Esse dois métodos possuem outros atributos, porem eu coloquei algo simples.

Bom, se você seguiu o código, vai ter um efeito bem bacana na sua pagina, mas isso eu deixo como surpresa para que for testar.

O que o futuro reserva para o JQuery ainda é incerto, mas no presente, ele é sem duvidas uma das bases da web atual. Mas é claro, outras iniciativas semelhantes já existem, mas como o objetivo desse post foi mostrar um pouco sobre o JQuery não vou descreve-las, mas com dica você pode acessar o site o mootools http://mootools.net/.

Bom pessoal, espero não ter me delongando muito e que tenha algum proveito. ;) até mais.

Twitter: http://twitter.com/altieritga

E-mail: altieritga@gmail.com

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?