O que é jQuery? | Envato Tuts+

() translation by (you can also view the original English article)

Os leitores do Envato Tuts+ vêm de uma variedade enorme de backgrounds em relação à experiência, cultura e o que eles estão procurando aprender. Quando isso vem para a tecnologia, é fácil de perceber aqueles que estão apenas começando, especialmente se você é um desenvolvedor de qualquer tipo há algum tempo.

Dito isso, uma das coisas mais legais sobre se tornar um desenvolvedor é que, uma vez que você tenha colocado as mãos em alguma linguagem específica aliado a um conjunto de habilidades requeridas para aquela situação, é fácil transpor esses conceitos para outras áreas do desenvolvimento.

Em uma tentativa de confirmar que nós estamos alcançando a maior audiência possível, nós estamos correndo atrás de publicar conteúdo voltado diretamente para iniciantes que estão curiosos sobre uma determinada linguagem, plataforma ou aplicação.

E nesse artigo, nós vamos nos focar exclusivamente no jQuery. Especificamente, nós vamos olhar por alto tudo que o jQuery oferece e como isso pode nos ajudar, além de revisarmos alguns dos projetos que apareceram a partir da sua biblioteca inicial.

Tudo sobre jQuery

Lançado pela primeira vem em 2006, por John Resig, jQuery se propôs a ser uma biblioteca multi-plataforma em JavaScript que tornaria mais fácil o processo de escrever soluções para o lado do cliente.

Quando lançado, o jQuery foi especialmente útil para solucionar as inconsistências que existiam ao longo da implementação de JavaScript no Internet Explorer, Firefox, e eventualmente no Google Chrome (que não tinha sido lançado até 2008).

Como definido pela Wikipédia:

jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. JQuery é a biblioteca JavaScript mais popular utilizada hoje em dia, com instalação em 65% dos 10 milhões de sites com mais tráfego da Web. jQuery é gratuito, e é um software de código-livre que funciona sob a Licença MIT.

Além disso, o próprio site jQuery se define como:

jQuery é rápido, pequeno e tem uma biblioteca em JavaScript rica em funções. Isso torna coisas como a passagem e manipulação de documentos HTML, manipulação de eventos, animação e Ajax muito mais simples com uma API fácil de usar que funciona em uma enorme quantidade de navegadores. Com a combinação de versatilidade e extensibilidade, jQuery tem mudado o jeito como milhões de pessoas escrevem JavaScript.

Mas o que isso significa pra mim como desenvolvedor? Talvez o melhor jeito de entendermos o que toda essa biblioteca tem, é examinando o que ela oferece.

1. Inspeção de documentos HTML

Quando um navegador renderiza uma página web, o visual apresentado é conhecido como DOM (ou Modelo de Objeto de Documento - do inglês Document Object Model). Esse modelo pode ser conceitualmente representado como uma árvore de estrutura de dados, na qual existem certos pontos de ramificação - como seria em raízes ou galhos.

Por exemplo, veja essa image do Web Step Book:

An example of the DOM for a basic web page

Quando você está trabalhando com jQuery, você pode facilmente manipular os conteúdos do seu DOM com a intenção de alcançar os nós, elementos, ou mesmo valores que você está tentando recuperar.

Isso significa que se você está procurando pelo texto de um elemento div que tem um ID único, você poderá facilmente encontrá-lo.

/**
 * This code looks for a div with the ID of "my unique element"
 * and then removes it from view.
 */
$( 'div#my-unique-element' ).hide();

Se você está tentando percorrer todos os elementos span, você pode fazer isso também:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * allow you to iterate through them.
 */
$( 'span' ).each(function() {
    // Process the span element here
});

Nós vamos rever essa funcionalidade particular um pouco mais nas próximas seções assim que formos vendo o que mais você pode fazer para manipular essas páginas web.

A princípio, esses exemplos são simples, porém as coisas podem ficar um pouco mais complicadas, especialmente quando começarmos a introduzir métodos de encadeamento. Por exemplo:

$excerpt.on( 'keydown', function( evt ) {

    if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) {

  	if ( -1 === $.inArray( evt.keyCode, keymap ) ) {
			keymap.push( evt.keyCode );
		}

	}

    }).on( 'keyup', function() {

	if ( user_has_pasted_content( keymap ) ) {

		resize_textarea( this );
		keymap = [];

	}

});

Nesse momento do tutorial, você não deve estar sabendo o que está acontecendo com esse código, mas o objetivo era mostrar pra você o quão útil jQuery pode ser em determinadas situações através de funções auxiliares e método de encadeamento.

E justo dizer que o poder do jQuery está na sua capacidade de consultar o DOM e então ajustá-lo através do uso de uma API muito bem documentada (que é repleta de exemplos de uso para cada umas das funções).

Alguém poderia até dizer que todo o resto parte desse único recurso. Então com isso em mente, vamos continuar conferindo do que essa biblioteca é capaz.

2. Manipulação de documentos HTML

Quado se trata de manipular o DOM, o jQuery tem inúmeras funções que te nos permitem mudar o que os nossos visitantes vêem.

Algumas dessas funções são simples, como as que nos permite mostrar (show) ou esconder (hide) elementos que não estão visíveis quando a página é carregada. Outras funções nos permitem criar novos elementos e acrescentá-los (append) a elementos existentes, ou antecipa-los (prepend) à frente da sua lista inteira.

Se você está tentando percorrer todos os elementos span a fim de adicionar uma atributo de classe a eles, você pode fazer da seguinte forma:

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * add a custom class attribute to them.
 */
$( 'span' ).each(function() {
    $( this ).addClass( 'my-custom-class' );
});

Está é apenas uma análise superficial de quais são as funcionalidades de manipulação do DOM disponíveis no jQuery. Analisando a API, abaixo da seção de Manipulação, você pode ver como existem várias opções ao nosso dispor (acompanhados de bons exemplos).

Em relação aos exemplos, nós podemos ter:

determinar altura e largura de um documento, janela ou qualquer elemento
recuperar os valores a partir de qualquer elemento dado (assumindo que esse elemento ofereça essa possibilidade)
alterar nomes de classes
e muito mais

Lembrando que uma das coisas que faz o jQuery uma solução atrativa para vários desenvolvedores é que todas as funções e exemplos que nós estamos analisando nesse artigo são compatíveis com multi-plataformas.

3. Manipulação de eventos

Se você é novo no JavaScript, então uma coisa que é fundamental para entender como isso funciona com as páginas que estão sendo mostradas em um navegador, é saber que elas respondem à vários eventos.

É isso, quando um usuário clique em um elemento, usa o teclado, ou clica utilizando o mouse, o navegador mostra um sinal correspondente ao evento que está acontecendo. Isso é o que nos permite tirar vantagens da interação do usuário com o navegador.

Especificamente, todas as vezes em que o usuário faz alguma coisa na página, nós podemos respondê-lo com um evento customizado. O problema é que não são todos os navegadores que implementam eventos da mesma forma (isso é o motivo pelo qual existe a necessidade de se ter especificações, mas isso é conteúdo para um outro post).

Felizmente, o jQuery faz com que isso fique muito mais fácil, definindo um nome consistente para todos os eventos. Assim, nós podemos utilizar nomes iguais para um evento ao qual estamos tentando responder, e isso irá funcionar adequadamente em todos os grandes navegadores.

4. Animação

Quando o jQuery apareceu pela primeira vez, o Flash ainda era relativamente popular, e as animações espalhadas pela web não estavam completamente mortas.

Porém, quando nós falamos sobre animação no jQuery, nós não estamos falando sobre o mesmo tipo de efeito que era utilizado em tecnologias antigas. Ao invés disso, nós estamos dizendo de efeitos que dão feedback ao usuário de que algo aconteceu na tela. Além do mais, isso é menos invasivo e pode adicionar um pouco de estilo à pagina ou aplicação quando utilizado corretamente (qualquer coisa pode ser abusiva, entretanto).

Você pode ver todos os efeitos nesta página, e vale a pena observar que os efeitos do jQuery podem variar de uma simples animação de aparecer ou desaparecer com elementos até coisas mais complexas como manipular a fila de efeitos que estão registrados para a aplicação em um elemento.

Entretanto, o último caso assume que você tem um pouco mais de experiência com a API de efeitos, porém isso é algo que vem naturalmente com o tempo trabalhando com a biblioteca e sua documentação.

5. Ajax

Se você não está familiarizado com o Ajax, ele é essencialmente um jeito com que as páginas web podem fazer uma chamada no servidor, obter resposta, e mudar parte do conteúdo mostrado sem que haja a necessidade de ela ser atualizada. Embora essa tecnologia tenha desaparecido um pouco, ainda é algo muito legal e que pode fornecer algumas funcionalidades úteis dentro de uma página ou aplicação web quando implementadas apropriadamente.

Apesar de o suporte para Ajax não ser tão ruim quanto era há cinco ou dez anos, a implementação da API nos navegadores pode variar ligeiramente. Isso significa que nós somos responsáveis por escrever os código Ajax especificamente para navegadores da Microsoft, Google, Apple, e assim por diante.

Na verdade, esse é o caso sem a utilização do jQuery. Graças ao seu suporte ao Ajax, nós podemos utilizar o Ajax em um grande número de diferentes aplicações sem ter a preocupação com as inconsistências entre os diferentes navegadores. De fato, é trivialmente fácil manipular requisições GET e POST ao mesmo tempo que temos a possibilidade fazer chamadas mais avançadas aos servidores utilizando o médodo $.ajax

A partir do momento que você tem a API disponível na sua aplicação, é difícil imaginar não utilizá-la (ou algo parecido com isso).

Uma palavra sobre extensibilidade

Uma característica que vários frameworks server-side e bibliotecas oferecem é a possibilidade de criar extensões para o core do código. Bibliotecas client-side modernas e frameworks também permitem isso, e com o jQuery não é diferente.

Digamos, por exemplo, que você trabalho em um nicho específico no qual você se viu criando uma mesma funcionalidade de um outro projeto. Ou que você tem um produto que você está vendendo e tem um pedaço de código que precisa ser integrado com o jQuery, mas isso pode requerer diferentes parâmetros dependendo da sua situação.

O que você faz então?

Felizmente, jQuery tem suporte a plugins. Isso significa que nós, como desenvolvedores, não só temos a possibilidade de usar plugins que outros criaram (alguns deles estão disponíveis no site do jQuery, outros estão no GitHub), mas como também podemos escrever os nossos próprios.

Nós podemos então reutilizar esse código em nossos projetos, ou torná-los disponíveis em sites como GitHub ou algum outro que ofereça contribuições, implementação de novas características pela comunidade, etc.

Projetos adicionais jQuery

Desde a sua criação, o jQuery tem crescido mais do que só como uma biblioteca JavaScript que nos oferece a possibilidade de realizar operações simples e poderosas em um ambiente compatível com multi-plataformas.

Além disso, o jQuery também tem apresentado dois outros projetos notáveis que valem a pena ser mencionados antes de nós finalizarmos esse artigo. Embora nós não vamos olhar para os detalhes de cada um desses projetos, vale a pena passarmos superficialmente por eles, pra se, por alguma razão precisarmos desses recursos no futuro, sabermos onde eles estão disponíveis e como começar a trabalhar.

jQuery UI

Na página inicial do jQuery UI:

jQuery UI é um conjunto de interfaces de interação com o usuário, efeitos, widgets, e temas construídos com o melhor da biblioteca jQuery. Se você está construindo uma aplicação web com alto nível interação, ou se você só precisa adicionar um formulário para inserir data, jQuery UI é a escolha perfeita.

Essa bibliotecas foi publicada em 2007, cerca de um ano depois do próprio jQuery. Ela funciona como um complemento ao jQuery no sentido de que aproveita da compatibilidade multi-plataforma da biblioteca para ajudar a criar widgets que podem ser usados em todo o website.

Muitos dos widgets incluem funcionalidades comumente utilizadas. Como por exemplo:

Existem alguns recursos avançados como efeitos, utilitários e interações. Tudo que nós falamos até agora (assim como as coisas que não foram abordadas nesse tutorial) incluem um enorme variedade de callbacks, atributos e funções que nos permitem interagem com esses recursos plenamente.

Todas essas características mencionadas acima também oferecem uma variedade de temas para garantir que esses recursos se encaixem à aparência do seu website. Finalmente, todos os recursos descritos aqui e incluídos no site estão bem documentados.

jQuery Mobile

Na página inicial do jQuery Mobile:

jQuery Mobile é um sistema de interface de usuário baseado em HTML5 projetado para construir sites e aplicativos que são acessíveis em todos os smartphones, tablets e desktop.

A biblioteca é o mais recente projeto dentro da família de bibliotecas jQuery, sendo lançada e 2010 (com sua última versão estável em 2014).

Muito parecido com o UI, jQuery Mobile oferece uma API bem documentada e temas customizáveis que são ideais para vários dispositivos os quais seu projeto pode estar planejando alcançar.

Enquanto que as duas bibliotecas anteriores oferecem um conjunto de funcionalidades multi-plataformas que nos permitem escrever jQuery de forma relativamente fácil, o jQuery Mobile inclui também um framework (estrutura) CSS que nos possibilita projetar interfaces de usuários que são ideais para a natureza dos nossos respectivos projetos.

O framework inclui:

A partir daí, a biblioteca oferece aquilo que você esperaria de um projeto voltado para fazer o desenvolvimento para web muito mais fácil nos diferentes dispositivos móveis. O que inclui coisas como:

um conjunto consistente de ícones
eventos que funcionam em uma variedade de dispositivos
propriedades para a página ativa
um número de widgets que são ideais para interface móvel

E finalmente, o número de navegadores que estão disponíveis e nos quais o jQuery Mobile funciona naturalmente é alto. Embora nós tenhamos visto uma diminuição no uso de versões antigas do Internet Explorer e uma adoção mais ampla do Chrome, nós ainda temos alguns usuários presos em versões antigas de navegadores por diferentes razões.

Às vezes, esses usuário estão utilizando versões antigas de navegadores por causa da natureza da intranet (rede interna) da companhia em que trabalham. Às vezes tem a ver com os dispositivos móveis e/ou telefones que já foram escolhidos pela empresa. E às vezes isso está simplesmente relacionado à inabilidade desses usuários de atualizar seus navegadores para algo melhor.

No entanto, isso não importa. jQuery Mobile oferece suporte para a maioria dos navegadores e sistemas operacionais que estão disponíveis atualmente. Se você não está certo se a plataforma para qual você quer desenvolver é suportada por essa biblioteca, você sempre pode checar a página de navegadores suportados.

Recursos adicionais

Conclusão

Entender o que o jQuery é (e o que ele não é) e como ele se relaciona com o JavaScript é importante para que você saiba o que está sendo feito, e o que você pode fazer quando precisar trabalhar com essa biblioteca.

Conforme mencionado anteriormente, alguns podem argumentar que você precisa aprender JavaScript para aprender jQuery; e outros podem dizer que aprender jQuery é uma excelente maneira de você começar a trabalhar com JavaScript.

Independente de quem está certo, jQuery é uma biblioteca JavaScript simples e é uma das mais utilizadas em uma variedade enorme de grandes projetos (como WordPress); então, aprender jQuery vai te ajudar em um número enorme de situações enquanto desenvolvedor.

JavaScript se tornou uma das linguagens mais importantes para se trabalhar com web. Existe uma curva de aprendizado, claro; porém existe também uma abundância de frameworks e bibliotecas que tornam mais simples o seu trabalho, além de manter você ocupado enquanto os estuda. Se você está procurando por recursos adicionais para ler a respeito ou usar no seu trabalho, confira o que tem disponível no marketplace Envato.

Se isso não é suficiente, existe uma enorme documentação, além do código aberto disponível para que você o leia e revise, se necessário. Existem também uma variedade de plugins disponíveis e um blog ativo para manter você pode dentro de todas as novidades que estão acontecendo com o desenvolvimento das bibliotecas.

Para aqueles que estão interessados em JavaScript (particularmente voltado para WordPress), sintam-se a vontade em me seguir no meu blog e/ou no Twitter como @tommcfarlin. Você pode também checar todos os meus cursos e tutoriais na minha página de perfil.

Não hesite em deixar suas dúvidas ou comentários abaixo, que eu responderei cada um deles.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!