10
jQUERY: A SUA BIBLIOTECA JAVASCRIPT
comunicações Ajax, utilitários. Oferece também uma diferenciadora arquitetura baseada em plugins, que lhe confere uma grande extensibilidade. É a biblioteca JavaScript mais popular, tendo cada vez mais um papel central no desenvolvimento web (é também por isso uma web application framework; ver secção 1.4). É totalmente livre9 e open source (licença MIT), pelo que pode ser usada sem problemas em software livre e proprietário. Fazem parte da família jQuery não apenas a biblioteca em si10, mas também o jQuery UI (biblioteca de controlos UI), o jQuery Mobile (biblioteca de controlos UI para mobile; ver Capítulo 10) e o QUnit (biblioteca para criar testes JavaScript; consultar qunitjs.com). Os vários projetos são desenvolvidos em open source pela jQuery Foundation (ver jquery.org).
1.2
PORQUÊ USAR O jQUERY?
É difícil não recorrer a bibliotecas quando a aplicação/website adquire alguma complexidade. Apesar de ser injusto comparar bibliotecas, visto que cada uma se enquadra num determinado nicho (secção 1.5.2), o jQuery adquire cada vez mais importância. Entre os seus pontos fortes figuram (Castledine, et al., 2010; Lindley, 2010):
Popularidade (secção 1.2.1) – é a biblioteca JavaScript mais popular na sua área;
Facilidade de uso (secção 1.2.2) – o slogan “write less, do more” assenta-lhe que nem uma luva; é simples e versátil, tanto para designers (ver jqueryfordesigners.com), como para programadores web;
Compatibilidade (secção 1.2.4) – o suporte cross-browser (desktop e mobile) é uma preocupação constante;
Estabilidade – são feitas melhorias de versão para versão; poucas funcionalidades são adicionadas ou tornadas obsoletas; a retrocompatibilidade é tida em alta consideração (prova disso é a API 2.*.* se manter compatível com a 1.*.*); o facto de ser usado (e por vezes apoiado) pela Microsoft, Dell, Digg, entre outras, promove a sua longevidade;
9
É possível realizar donativos ao projeto em jquery.org/donate promovendo a sua evolução. O jQuery, por sua vez, inclui o Sizzle, um motor de seletores DOM (ver secção 2.8).
10
© FCA – Editora de Informática
ENQUADRAMENTO
13
Top 1 milhão (48,5%)
Top 100 mil (65,6%) Top 10 mil (76,6%)
Fonte: BuiltWith Trends
FIGURA 1.3 – Uso do jQuery nos sites mais visitados
É também assinalável que a quantidade de usos de jQuery tenha ultrapassado14, em agosto de 2011, a de Flash (Business Wire, 2011). Para isso contribuiu o facto de ser open source, HTML5/CSS3 friendly e assentar numa tecnologia standard da web (JavaScript), fatores de que o Flash não se pode orgulhar. A popularidade do jQuery não é uma prova da sua qualidade mas sim uma consequência; a quantidade e a qualidade de websites a ele dedicados (plugins, tutoriais, snippets, etc.) são invejáveis. A Tabela 1.1 enumera alguns a merecer destaque: WEBSITE
DESCRIÇÃO
jQuery Learning Center learn.jquery.com Try jQuery try.jquery.com Code Academy codecademy.com Code School codeschool.com
O centro oficial de documentação para apredizagem passo a passo; inclui uma introdução ao JavaScript Guia de aprendizagem proposto pela equipa oficial, com vídeos explicativos e exercícios relacionados Aprendizagem diretamente do browser, a partir de lições compassadas e interativas (ver codecademy.com/pt/tracks/jquery) Permite a aprendizagem progressiva através de diversos cursos; tem um aspeto muito moderno Site de perguntas e respostas de programação; tem uma secção dedicada a jQuery, com milhares de questões respondidas (ver stackoverflow.com/questions/tagged/jquery)
Stack Overflow stackoverflow.com
(continua)
14
Com 48% vs. 47%; considerando os top 17 mil sites; mais gráficos em httparchive.org. © FCA – Editora de Informática
FUNDAMENTOS
39
</body> </html>
Com este simples programa pode chamar-se a atenção para dois conceitos centrais no jQuery: o evento “document ready” (ver secção 2.4) e o objeto $ (ver secção 2.5). É um bom ponto de partida para provar que está tudo em ordem.
2.3
A FILOSOFIA jQUERY
O jQuery manipula os elementos da página de forma imperativa (ao contrário de outras, como o AngularJS, que o fazem de forma declarativa). Assim, a sua filosofia assenta em dois pontos-chave (Lindley, 2010): 1)
Encontrar elementos na página.
2)
Fazer algo com eles (através de métodos). EXEMPLO 2.2
esubuq
$('h1').addClass('caixaAlta'); // 1) ENCONTRAR ELEMENTOS: $('h1') // 2) FAZER ALGO COM ELES: addClass('caixaAlta')
É este o raciocínio a ter quando se programa com jQuery (com algumas exceções). Estes dois simples passos são assegurados através dos conceitos (centrais no mundo jQuery):
Função wrapper – representa a capacidade de o jQuery encontrar elementos; realizada através do símbolo $ (ver secção 2.5);
Seletores – permitem especificar o que se pretende encontrar na página (ver secção 2.8) (no Exemplo 2.2, o seletor é o 'h1');
Métodos – são ações executadas sobre cada um dos elementos que foram encontrados (ver secção 2.6.1); no Exemplo 2.2, o método usado é o addClass().
Não menos importantes, também os seguintes conceitos caracterizam o jQuery (e proporcionam facilidade de uso; ver secção 1.2.2):
Overloading – o mesmo método/função pode ter variações no input (ver secção 2.7); © FCA – Editora de Informática
FUNDAMENTOS
43
Invocar uma função − mecanismos auxiliares (ver secção 2.6.2) (pouco frequente, com exceção do ajax() e seus derivados); Ex. $.type(obj) ; // SABER TIPO DO OBJETO PASSADO
Ler/modificar propriedades (pouco frequente). // DESATIVAR ANIMAÇÕES Ex. $.fx.off = true;
Embora o JavaScript considere apenas funções (tipo function) e não métodos, faremos uma distinção concetual e usaremos ambos os termos: método para um processador de objetos e função para um mecanismo auxiliar; usar-se-á o itálico para as funções (ex. ajax()).
2.6.1
MÉTODOS
Métodos jQuery estão orientados a processar elementos da página. Numa instrução do tipo método, o símbolo $ recebe um critério de seleção de elementos da página (seletor) sobre a qual um método atuará (Figura 2.1). Isto parece confuso, mas com a prática, torna-se natural. Todos os elementos DOM
1 - Seletor
Seleção de elementos DOM
2 - Método Elementos DOM modificados
FIGURA 2.1 – Representação de atuação de método jQuery
É assinalável que as instruções jQuery sigam praticamente sempre este formato: $(seletor ) metodo(parametros) ;
© FCA – Editora de Informática
47
FUNDAMENTOS
Há métodos e funções com “um sem fim” de overloads, dado que recebem uma série de parâmetros opcionais. Veja-se o caso do get(), para realizar pedidos Ajax por get, em que isto: $.get(url* [, parametros] [, funcaoDeCallback] [, tipo])
... resulta em 9 combinações distintas: $.get(url) $.get(url , funcaoDeCallback , tipo) $.get(url , parametros , funcaoDeCallback) $.get(url , parametros , funcaoDeCallback , tipo) ...
Desde que respeite a ordem (descrita na API) e os parâmetros obrigatórios (neste caso, apenas o primeiro), o programador pode usar o overload que precisar. O próprio alias jQuery ($) tem overloads (ver secção 2.5): é usado para realizar seleções, criar elementos e subscrever o “document ready”.
2.8
SELECIONAR ELEMENTOS
Sendo o jQuery uma biblioteca client-side, é natural que a maioria das suas funcionalidades esteja direcionada para a manipulação de elementos gráficos. Se os queremos manipular (apagar, atualizar, colorir, animar, etc.), precisamos de primeiro indicar quais. É aqui que os seletores (conceito central no jQuery) entram em cena (Figura 2.2). 911231214
$('input[type=text]')
Obj. jQuery 911231214
,
FIGURA 2.2 – Exemplo de uma seleção
Os seletores são como uma linguagem de filtragem de elementos da página; estão para os elementos da página como os queries de leitura estão para uma BD. Isoladamente, têm pouco ou nenhum interesse (não passam de simples strings), mas a filtragem resultante pode ser manipulada por métodos do jQuery ou de plugins (isto porque é do pseudotipo jQuery; ver secção 2.11.3). Um seletor, © FCA – Editora de Informática
66
jQUERY: A SUA BIBLIOTECA JAVASCRIPT
O callback do sucesso de um get() (função de Ajax do jQuery) recebe os dados, o estado do pedido e o objeto jqXHR (ver secção 7.4): // ASSINATURA DA FUNÇÃO: $.get(url,callbackQuandoSucesso);
$.get('/info/cli.xml', function(dados,estado,jqXhr) { // ...
});
2.12 API jQUERY A API do jQuery tem a preocupação de ser o mais coerente possível, promovendo a legibilidade do código e a facilidade em criá-lo ou modificá-lo. Isto é patente na coerência entre os métodos jQuery (ver secção 2.6.1). A API do jQuery tem os seus limites bem definidos e encontra-se relativamente estabilizada. A descrição oficial (api.jquery.com) categoriza-a conforme a Tabela 2.3: CATEGORIAS Seletores Percorrer Atributos/ CSS Manipulação DOM Animação Eventos Ajax Core
DESCRIÇÃO
SUBCATEGORIAS
Estão na base da API, pois permitem realizar seleções no documento da página (ver secção 2.8.1) Formas de filtrar ou navegar (n)uma seleção (ver secção 2.8.3) Métodos para alterar propriedades de elementos da página (valores, posições, etc.) (Capítulos 3 e 4) Alteração do documento (ex. adicionar parágrafos, apagar divs) (Capítulo 4) Efeitos e um método multiusos de animação (Capítulo 5)
Básicos, Hierarquia, Atributo, Formulário, Filtros conteúdo, Filtros filho, Filtros simples, Filtros visibilidade
Permite subscrever acontecimentos do rato, teclado, browser, etc. (Capítulo 6) Implementação desta tecnologia pelo jQuery (Capítulo 7) Agrega funções internas e utilitários práticos (ex. ciclo, parsing de XML, trim, etc.) (ver secção 2.13)
Filtragem, Via árvore, Diversos Atributos, CSS, Dimensões, Deslocamento (offset), Dados Cópia, Inserção à volta/interna/externa, Remoção, Substituição Básicos, Fading, Sliding (deslizamento), Personalizados Browser, Document, Anexação de handlers, Formulários, Teclado, Rato, Pseudotipo Event Gerais, Helpers, Baixo nível, Atalhos (i.e., shorthands) Pseudotipo jQuery, Utilitários, Internos, Elemento DOM, Pseudotipo Deferred
TABELA 2.3 – Organização da API do jQuery © FCA – Editora de Informática
92
4.3.2
jQUERY: A SUA BIBLIOTECA JAVASCRIPT
ANEXAR ELEMENTOS
Anexar elementos (Tabela 4.2) é extremamente comum: é a capacidade de poder inserir elementos dentro de outros já existentes na árvore DOM. CATEGORIA
SUBCATEGORIA
MÉTODO $('s1').append(…)
Manipulação
Inserção interna
$().appendTo('s1') $('s1').prepend(…) $().prependTo('s1')
DESCRIÇÃO Adiciona elementos à seleção s1 (no fim) Adiciona elementos à seleção s1 (no início)
TABELA 4.2 – API jQuery de anexação de elementos DOM
O método mais comum para anexar elementos é o append(): permite anexar novos elementos aos elementos da árvore de forma muito flexível. Os elementos adicionados são colocados como filhos (últimos) de cada um dos elementos da seleção realizada (Figura 4.5). id='bar'
$('#bar').append(
)
FIGURA 4.5 – Exemplo da ação realizada pelo método append(…)
Como parâmetros, o append() pode receber uma string com o novo HTML, um objeto do pseudotipo jQuery ou um elemento DOM. Vejamos os dois primeiros casos detalhadamente: $(…).append(novoHTML) jQuery EXEMPLO 4.7 // USANDO O APPEND COM STRING HTML
$('#bar').append('<div>teste ao append</div>');
A segunda variação do append() merece um pouco mais de atenção. $(…).append(novoElemento) jQuery
© FCA – Editora de Informática
ANIMAÇÃO
113
Adicionalmente, há que notar que nos efeitos que escondem, os elementos deixam de ocupar espaço na página, mas ainda assim pertencem ao modelo DOM; nos efeitos que mostram, os elementos têm de pertencer ao modelo DOM. Escolher o efeito ideal para esconder/mostrar elementos depende muito da situação em causa. O ideal é testar os vários e escolher o que se adequa. De qualquer forma, o recomendado é usar o par respetivo (Tabela 5.4). Por exemplo: se usou o fadeIn() para mostrar um elemento, deve usar o fadeOut() para escondê-lo.
Os efeitos do jQuery são estendidos com a suite de plugins jQuery UI, que oferece transições de visibilidade, cor e classes, assim como outros easings (ver secção 9.9.1).
5.2.1
BÁSICOS
Os métodos show() e hide() são os mais comuns para manipular a visibilidade de elementos, pela forma subtil e elegante como o fazem. Transitam simultaneamente a opacidade e as dimensões do objeto até que ele apareça ou desapareça, consoante o caso (Figura 5.1). Para que isto aconteça de forma animada, devem receber o tempo da transição; caso contrário, mostram/escondem de forma imediata (a aproximação é conservadora para que se usem animações quando efetivamente trazem valor acrescentado).
FIGURA 5.1 – Efeito de show()
EXEMPLO 5.3 $('#pessoa').show();
// MOSTRA O ELEMENTO – SEM ANIMAÇÃO
$('#pessoa2').show('slow');
// MOSTRA O ELEMENTO – COM ANIMAÇÃO
$('input[text]').hide();
// ESCONDE TODOS OS CAMPOS DE TEXTO
$('p.conteudo').toggle();
// ALTERNA O ESTADO DE VISIBILIDADE // DOS PARÁGRAFOS COM A CLASSE conteudo
© FCA – Editora de Informática
130
jQUERY: A SUA BIBLIOTECA JAVASCRIPT
Uma forma de realizar a associação da Figura 6.1 é usar os próprios atributos do HTML (ex. <button onclick='enviar();'></button>). Contudo, esta forma é muito incorreta, pois mistura JavaScript com HTML (ver secção 1.2.3), dificultando a manutenção e a reutilização de subscritores em vários elementos. O correto é gerir eventos apenas com JavaScript (unobtrusive JavaScript). Ao tratar eventos com jQuery devemos realizar o seguinte raciocínio (Figura 6.2): 1)
Quem poderá lançar o evento (event firing)? Usamos os conhecidos seletores (ver secção 2.8).
2)
Que tipo de evento se quer tratar (event handler attachment)? Usamos um dos métodos do jQuery (click(), keydown(), on(), etc.) para o efeito.
3)
Como se vai tratar o evento (event handler, listener ou subscriber)? Passamos a esse método uma função que será executada aquando do mesmo.
<div id='zonaAutores'>
click
function(e){…}
1) Quem irá lançar o evento?
2) Que evento se quer tratar?
3) Como se vai tratar o evento?
$('#zonaAutores').
click(
function(e) { // TRATAR EVENTO });
FIGURA 6.2 – Tratamento de eventos por parte do jQuery
Na realidade, há pelo menos um evento que já usou (ver secção 2.4): $(document).ready(function() { console.log('bem-vindo'); });
Neste caso, respondendo às questões acima apresentadas: 1)
Quem irá lançar o evento: document.
2)
Que evento se quer tratar: ready.
3)
Como se vai tratar o evento: console.log('bem-vindo').
© FCA – Editora de Informática
PLLU UGINS
8
Uma das maiores questões ao criar uma biblioteca JavaScript (ou outro tipo de biblioteca) é a definição dos seus limites. Uma biblioteca pode ser muito simples mas apenas focada num tópico (biblioteca micro), micro), ou muito flexível mas pesada (biblioteca macro). macro). Uma arquitetura baseada em plugins permite oferecer flexi flexibilidad bilidadee “on on demand demand” mantendo uma base simples e robusta. Desde o início que o jQuery foi desenvolvido desenvolvido com estas ideias ideias em mente. Acompanhando o seu sucesso comprovado, houve imensos programadores a converter as suas biblio bibliotecas JavaScript em plugins para o jQuery. Hoje, existem milhares de plugins. plugins
8.1
MODELO SUBJJA AC EN TE CE NT
Um plugin (um tipo de add-on add on)) pode ser visto como uma especialização. É um “dispositivo” que se adiciona a uma base comum para que esta estenda as suas capacidades. Plugins são como peças de um puzzle, puzzle, cujo fim são as necessidades do programador. Daí que o conjunto de plugins que car caracteriza acteriza um projeto possa diferir substancialmente daquele que caracteriza outro (Figura 8.1). 8.1)
Plugin Tooltipster Plugin Inline form validation
Plugin LoadMask
jQuery Plugin Selectize
FIGURA 8.1 – jQuery e alguns plugins exemplo
© FCA – Editora de Informática