"O mundo pertence a quem se atreve"

Bem vindo,

Neste artigo, irei explicar um pouco sobre a história do jQuery, seu conceito, funcionamento, além de apresentar alguns exemplos chaves para compreender melhor a “ferramenta” já presente em nossas mãos. Preparado…? Vamos lá… =)

Um Pouco da História do jQuery

A era jQuery surgiu graças a um artigo escrito por John Resig, relatando sobre sua frustração com a forma de se escrever JavaScript para obter os resultados pretendidos. O autor é graduado em ciência da computação no Rochester Institute of Technology, membro da Corporação Mozilla e autor do livro Pro JavaScript Techniques, bem como profundo conhecedor da linguagem JavaScript.

Neste cenário e baseado em pesquisas e estudos constantes, Resig apresentou em 14 de janeiro de 2006 publicamente os resultados de seus estudos que visavam simplificar a linguagem JavaScript. Os resultados foram apresentados em uma palestra intitulada “jQuery a nova onda para JavaScript“, proferida no BarCampNYC – Wrap Up. Nesta palestra surgia a biblioteca que facilitaria a vida de muitos desenvolvedores, programadores e analistas de sistemas futuramente….!

Conceitos Importantes

jQuery é uma biblioteca JavaScript disponibilizada como software livre e aberto, cujo emprego e uso é regido segundo as regras de licença estabelecidas pelo MIT – Massachusetts Institute of Technology e pelo GPL – GNU General Public License. Isto, resumidamente, significa que você pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais. Para detalhes sobre estes tipos de licença consulte a seção de referencia no final deste artigo.

Para um melhor entendimento, veja o que disse o “pai do jQuery”:

O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos? (John Resig)

O jQuery é uma excelente biblioteca e suas constantes atualizações e profissionalismo fazem com que nós programadores tenhamos uma potente arma na mão para solucionar qualquer problema. Entretanto, mesmo o jQuery sendo tão completo, sempre haverá alguma situação ímpar em que ele não suprirá nalguma necessidade. Em conta desta necessidade, surgiram plugins para o jQuery que apenas aumentam sua performance nesta tão maravilhosa ferramenta.

Mas espera aí… Quer dizer que jQuery é uma biblioteca que John Resig criou para JavaScript! Mas eu pensava que jQuery fosse um framework… =/

Há quem diga tanto quanto você que jQuery é um framework, mas dizer tal fato pode ser melhor expresso se colocado entre aspas, já que framework se diferencia de uma simples biblioteca, pois esta se concentra apenas em oferecer implementação de funcionalidades, sem definir a reutilização de uma solução de arquitetura.

Existem vários frameworks de Javascript como o MooTools ou ExtJS para uso em aplicações, contudo ao usar a biblioteca do jQuery  somente pelo que ela oferece já por si só deixam de lado qualquer uso de “frameworks” por aí…

O jQuery foi criado levando em conta a filosofia: “Write less, do more” (Escreva menos, faça mais) e é exatamente isto que acontece na prática, a ponto de torná-la tão espetacular. Com pouquíssimas linhas de código você consegue fazer os mais variados efeitos que antes custavam dezenas de linhas de código com Javascript puro ou algumas horas de trabalho em Flash.

Como exemplo, veja dois exemplos de linhas de código:

Figura 1

A biblioteca jQuery se resume a um arquivo JavaScript gravado com a típica extensão .js cuja função é simplificar a sintaxe JavaScript conforme mostra a Figura 1.

Vantagens do jQuery

As principais vantagens do uso de jQuery sobre JavaScript tradicional são:

  • Acesso direto a qualquer componente do DOM, ou seja, não há necessidade de várias linhas de código para acessar determinados pontos no DOM.
  • O uso de regras de estilo não sofre qualquer tipo de limitação devido às inconsistências dos navegadores. Mesmo os seletores CSS3 podem ser usados sem qualquer restrição.
  • Manipulação de conteúdos, sem limitações, com algumas poucas linhas de código.
  • Suporte para toda a gama de eventos de interação com o usuário sem limitações impostas pelos navegadores.
  • Possibilidade de inserir uma grande variedade de efeitos de animação com uma simples linha de código.
  • Uso simplificado e sem restrições com AJAX e linguagens de programação como Java (Frameworks), PHP e ASP.
  • Simplificação na criação de scripts.
  • Emprego cross-browser.

O Aprendizado de jQuery é Difícil e Cansativo?

Para a sua alegria: NÃO!

Com pouquíssimo tempo de estudo você estará apto a desenvolver animações e criar interações de alto impacto visual, sem necessidade de complicados e complexos scripts como acontecia em JavaScript. Para aprender jQuery contudo, são necessários os seguintes conhecimentos:

  • JavaScript
  • Seletores CSS2.1 e CSS3 (jQuery são baseados na estrutura dos seletores)

Vale ressaltar, que a curva de aprendizado de jQuery cresce muito mais rapidamente do que aquela para o aprendizado das técnicas avançadas de JavaScript.

Baixando o Arquivo da Biblioteca jQuery

Se você deseja fazer algo com jQuery, não o fará até baixar o arquivo da biblioteca, disponível em algum lugar na web. A biblioteca é dividida em três formatos:

  1. jquery-1.x.x.js (Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js)
  2. Trata-se de um arquivo JavaScript comentado e com espaçamento entre as linhas do código. Seu tamanho é de 97.8 KB. Foi criado com a finalidade de poder ser facilmente lido e entendido por quem se disponha a estudá-lo com qualquer finalidade.

  3. jquery-1.x.x.min.js (Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js)
  4. Trata-se do mesmo arquivo JavaScript no qual foram retirados todos os espaçamento do código. Seu tamanho é de 54.5 KB. É uma versão mais compacta que a versão anterior e é a recomendada para uso em desenvolvimento e hospedagem definitiva para o site no ar. Use esta versão nos seus projetos.

  5. jquery-1.x.x.pack.js (Download em: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js)
  6. Trata-se do arquivo JavaScript compactado com uma ferramenta de compressão de código JavaScript. O processo de compressão torna o código ilegível para humanos. Seu tamanho é de 30.3 KB. Esta versão tem a desvantagem em relação à anterior de não ir para o cache, tendo que ser carregada novamente toda vez que o usuário volta ao site. Outra desvantagem que desaconselha seu uso é o fato de que o processo de descompressão pode, eventualmente, ser imperfeito, introduzindo bugs não existentes na versão sem compressão ou não compacta.

Configurando a Biblioteca jQuery

A biblioteca jQuery não requer instalação! Ufa….

Basta a configuração em uma linha. Uma linda? Isso mesmo… Uma linha ou One line. =)

Por se tratar de um arquivo JavaScript basta criar um link para o arquivo em seu html (sua página), assim como já estamos acostumados a fazer para qualquer outro arquivo javascript tradicional. Ou seja, na seção head de sua página html, configure o link para o arquivo da biblioteca jQuery. (vide Figura 2)

Figura 2

A inserção desta linha, permitirá que você utilize recursos da biblioteca jQuery. Esta configuração é possível levando em conta que foi baixado o arquivo e este se encontra no mesmo diretório que a minha página. Porém, caso não tenha baixado a biblioteca mas queira utilizá-la do google, basta adicionar a linha conforme a Figura 3:

Figura 3

Exemplos do Uso do jQuery

1. Exemplo do uso como um slideShow:

Neste exemplo, irei mostrar como criar uma galeria de fotos ou simplesmente um slideShow de maneira organizada com uso da biblioteca jQuery. Imagino que já tenha disponível em seu diretório o arquivo da biblioteca, caso não, verifique a seção Baixando o Arquivo da Biblioteca jQuery. A novidade aqui é o plugin jCycle para o jQuery que irei utilizar, de modo a permitir que as imagens de meu repositório sejam alternadas como um ciclo. (Baixe o jCycle: http://malsup.com/jquery/cycle/)

Depois de realizado o download do arquivo do jCycle e levando em conta que já tinha o arquivo o jQuery em sua extensão .js, configure tanto o plugin para a biblioteca (jCycle) quanto a biblioteca do javascript (jQuery) entre o head de sua página conforme mostrado na seção Configurando a Biblioteca jQuery. Para que não haja dúvidas, sua configuração deverá ficar mais ou menos desta forma. (vide Figura 4)

Figura 4

Realizado esta etapa e com sucesso, crio um arquivo próprio que conterá a função do slideShow que quero desempenhar em jQuery. O editor pode ser um mero bloco de notas, notepad++, netbeans, eclipse, jdeveloper ou outro, não importa! O que realmente importa é que preste atenção na função dificílima para realizar o slideShow, conforme mostrado na Figura 5. Neste próprio arquivo salvo com o nome jquery.init.js, mas somente será automaticamente carregado na minha página html se configurar o script no head (cabeçalho) do meu site.

Figura 5

Bom, foi efetuado dois passos: a) Configuração da biblioteca jQuery e do plugin jCycle no head da minha página; b) Salvo o arquivo jquery.init.js contendo o conteúdo da Figura 5.

Falta agora trabalhar um pouco no corpo do meu html (tag Body) para disponibilizar as imagens que você quer mostrar nesse slideShow. Para tanto, vou mostrar rapidamente como ficou organizado minha estrutura de diretórios contendo meus jquerys (js), imagens (img) e pagina (html). Para uma boa programação sempre é bom ser organizado, assim vide Figura 6.

Figura 6

Note para uma maior compreensão, que as Figuras 2 e 4 apresentam um parâmetro src que permite visualizar o arquivo no diretório que desejar. No meu caso, este diretório é chamado de js, local onde se encontram meu arquivos jquery, jcycle e meu jquery.init. Caso deseje colocá-lo todas as configurações e html e imagens em um mesmo diretório, basta colocar no parâmetro src somente o nome de seu arquivo e será carregado automaticamente.

Por final, tratarei do conteúdo da tag body de meu html chamado de exemplo_1.html. As tags de jquery são muito semelhantes as do CSS, por esta razão que se torna importante um mero conhecimento de CSS para compreender jQuery. Este fato é visualizado com as tags div que são trabalhadas, por exemplo, adicionarei uma tag div cujo sua identidade, ou seja, seu id é slideShow. Dentro desta tag armazenarei todas as imagens que desejo que sejam mostradas em meu exemplo ou em meu site. (Vide Figura 7).

Figura 7

Conforme mostra a Figura 7, a tag img contém alguns parâmetros:

i) src -> Visualiza sua imagem em seu diretório específico, caso coloque um ligar que não está a imagem de destino ela não aparecerá.

ii) alt -> Nome que aparecerá assim que passar o mouse sobre a imagem.

iii) width -> Largura da imagem.

iv) height -> Altura da imagem.

Pronto! Nosso slideShow está pronto para ser executado. Mas para completar a explicação ainda mais vale destacar uma pergunta: Como o meu jquery nomeado jquery.init.js – que eu próprio criei – saberá que aquela função adicionada são para efeitos visuais deste grupo de imagens?

Simples!

Basta verificar novamente o nome que foi colocado na id da minha tag div. Este mesmo nome, deverá ser adicionado dentro da minha função jquery.init.js criada. (verifique o nome novamente na Figura 5). Dessa maneira a minha função será específica para este grupo de imagens e não para outras, por exemplo que possa conter minha página.

——————————————————————————————————————————————————————–

2. Exibindo e Ocultando uma Frase:

Diferentemente do exemplo 1 onde crio um arquivo que conterá meu jquery.init.js, neste exemplo, irei colocar as linhas de comando de métodos do jquery diretamente nas tags body do meu html que chamarei de exemplo_2.html.

Não entendeu nada? Vamos com calma! =P

Neste exemplo, a única configuração será da própria biblioteca jquery, pois não usarei qualquer plugin para este evento. Neste cenário, crie uma div contendo um id que desejar, no meu caso esta id conterá o nome de click_mouse e escreva algo dentro desta div click_mouse. Feito isto, crie dois botões como costumamos fazer em um form do html. A única diferença é que acrescentaremos os eventos do poderoso jquery nas ações destes botões. Como uma imagem vale mais que MIL palavras, analise atentamente a Figura 8.

Figura 8

Verifique a tag button, pois foi exatamente nela que coloquei o jquery, sendo mais específico no parâmetro de ação onclick. Onde basicamente, exijo que seja realizado um evento no id de nome click_mouse de forma a exibir ou ocultar a frase presente na id quando for clicado o botão referente.

Faça exatamente conforme mostra a Figura 8, mas não esqueça de baixar o arquivo da biblioteca jquery e colocar em um diretório correto de acordo com a organização de seu projeto. Fazendo esses detalhes, concerteza terá mais um efeito com jquery em suas mãos e pronto para ser usado.

Referencias

http://pt.wikipedia.org/wiki/Mit_license

http://pt.wikipedia.org/wiki/GNU_General_Public_License

http://www.livrojquery.com.br/sumario.html#

http://malsup.com/jquery/cycle/

 

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Nuvem de tags

%d blogueiros gostam disto: