Smashing Jquery - Interatividade Avançada Com Javascript Simples

Jake Rutter

SMASHING

jQuery TÉCNICAS PROFISSIONAIS LAYOUT MODERNO INTERATIVIDADE AVANÇADAPARA COMUM JAVASCRIPT SIMPLES

R982s

Rutter, Jake. Smashing jQuery [recurso eletrônico] : interatividade avançada com Javascript simples / Jake Rutter ; tradução: Igor Vianna ; revisão técnica: Elcio Ferreira. – Dados eletrônicos. – Porto Alegre : Bookman, 2012. Editado também como livro impresso em 2012. ISBN 978-85-407-0135-9 1. Linguagem de programação de computador. 2. Smashing jQuery. 3. Javascript. I. Título. CDU 004.43

Catalogação na publicação: Ana Paula M. Magnus – CRB 10/2052

SMASHING

jQuery INTERATIVIDADE AVANÇADA COM JAVASCRIPT SIMPLES Jake Rutter Tradução:

Igor Vianna Revisão técnica:

Elcio Ferreira Diretor da Visie Padrões Web

Versão impressa desta obra: 2012

2012

Obra originalmente publicada sob o título Smashing jQuery ISBN 978-0-470-97723-1 Copyright ©2011 John Wiley & Sons,Ltd. All Rights Reserved. Authorised translation from the English language edition published by John Wiley & Sons Limited. Responsibility for the accuracy of the translation rests soley with Artmed Editora S.A. and is not the responsibility of John Wiley & Sons Limited. No part of this book may be reproduced in any form without the written permission of the original copyright holder, John Wiley & Sons Limited. Tradução autorizada a partir do original em língua inglesa da obra publicado por John Wiley & Sons Limited. A responsabilidade pela exatidão da tradução é de inteira responsabilidade da Artmed Editora S.A. Este livro não poderá ser reproduzido nem em parte nem na íntegra em qualquer meio sem permissão da John Wiley & Sons Limited. A edição em língua portuguesa desta obra é publicada por Bookman Companhia Editora Ltda., uma divisão do Grupo A, Copyright © 2012.

Capa: VS Digital, arte sobre capa original Leitura final: Aline Grodt Gerente Editorial – CESA: Arysinha Jacques Affonso Editora responsável por esta obra: Mariana Belloli Editoração eletrônica: VS Digital

Reservados todos os direitos de publicação, em língua portuguesa, à BOOKMAN EDITORA LTDA., divisão do GRUPO A EDUCAÇÃO S.A. Av. Jerônimo de Ornelas, 670 - Santana 90040-340 Porto Alegre RS Fone (51) 3027-7000 Fax (51) 3027-7070 É proibida a duplicação ou reprodução deste volume, no todo ou em parte, sob quaisquer formas ou por quaisquer meios (eletrônico, mecânico, gravação, fotocópia, distribuição na Web e outros), sem permissão expressa da Editora. SÃO PAULO Av. Embaixador Macedo Soares, 10.735 - Pavilhão 5 - Cond. Espace Center Vila Anastácio 05095-035 São Paulo SP Fone (11) 3665-1100 Fax (11) 3667-1333 SAC 0800 703-3444 IMPRESSO NO BRASIL PRINTED IN BRAZIL

CAPÍTULO 1: FERRAMENTAS

O autor Jake Rutter é designer de interfaces de usuário e desenvolvedor front-end com interesse especial em criação de jQuery para aplicativos Web. Atualmente, é Web designer sênior e desenvolvedor da Direct Wines, empresa que comercializa vinho online e offline, onde gerencia o front-end para quatro sites de e-commerce. Jake é um entusiasta do trabalho com a tecnologia Web e está sempre em busca de novos conhecimentos em um setor em constante desenvolvimento. Em seu tempo livre, Jake administra um blog em onerutter.com, no qual posta tutoriais sobre jQuery, PHP, Magento, WordPress, CSS e HTML. Jake mora em Connecticut com sua esposa e dois cachorros.

V

Agradecimentos Agradeço a minha equipe de projeto: Chris Webb, por ter me dado a oportunidade de escrever este livro incrível; a Linda Morris, minha editora de projetos, por corrigir meus erros primários; e a Andrew Croxall e Dennis Cohen, meus editores técnicos, por garantirem que meus códigos e minhas explicações estivessem corretas. Além disso, não posso esquecer minha esposa, por me apoiar e ajudar durante o processo de escrita de um livro. Eu não poderia ter superado esse desafio sem ela. A meus pais, por terem me ensinado que o trabalho duro realmente compensa e nos prepara para quando tentamos alcançar aquilo que costumávamos achar impossível. Obrigado a meus empregadores atuais e anteriores, por terem me dado a oportunidade de trabalhar com projetos de código aberto como a jQuery, para expandir os limites da Internet. E, principalmente, um grande obrigado a John Resig e à equipe e à comunidade jQuery, por criarem uma biblioteca impressionante que me proporcionou ótimas oportunidades de trabalho e a capacidade de criar aplicativos Web incríveis com o uso de menos código.

VII

Sumário PARTE I:

INTRODUÇÃO A JQUERY E JAVASCRIPT

3

Capítulo 1:

Introdução a jQuery Descubra as bibliotecas JavaScript As vantagens do uso de uma biblioteca JavaScript em relação à abordagem tradicional Explore as bibliotecas principais As vantagens da jQuery

5 6 6 7 9

Capítulo 2:

Começando a usar jQuery Configure o ambiente de desenvolvimento Use o Firebug no Firefox Download da biblioteca jQuery Inclua a biblioteca jQuery em sua página Entenda o wrapper da jQuery Execute os códigos fora do manipulador document ready Evite conflitos com outras bibliotecas Use o JavaScript com a jQuery

19 20 21 27 30 31 34 34 35

PARTE II:

SOBRE OS FUNDAMENTOS DA JQUERY

37

Capítulo 3:

Usando seletores, filtros e CSS: a base da jQuery 39 Use os elementos do DOM com seletores jQuery 40 Selecione os elementos de página com os seletores CSS 41 Filtre elementos do DOM com os filtros de seletor jQuery 52 Aplique definições de filtro básicas 52 Crie tabelas com efeito zebra usando os filtros even e odd 53 Aplique estilo ao primeiro e ao último item em uma lista ou conjunto de elementos 55 Filtre elementos que contêm um elemento específico 56 Filtre elementos que não contêm elementos ou texto 57 Filtre elementos que contêm texto 59 Selecione elementos no DOM por seus atributos 60 Selecione links que contêm o endereço de um site específico 61 Selecione todos os elementos que terminam com uma palavra específica 62 Manipule HTML e CSS com a jQuery 63 Adicione, remova, clone e substitua elementos e conteúdo do DOM 64 Trabalhe com CSS e jQuery 69

SUMÁRIO Capítulo 4:

Capítulo 5:

Trabalhando com eventos Compreenda os eventos na jQuery Trabalhe com eventos de document e window Detecte o carregamento completo do DOM com o evento ready() Pré-carregue imagens com o evento load() Exiba um alerta quando o usuário sair de uma página Exiba uma imagem de backup usando o evento error Comece a utilizar a delegação de eventos Use bind para anexar um manipulador de eventos a um elemento Use live para anexar um manipulador de eventos a um elemento Use delegate para anexar um manipulador de eventos a um elemento Capture eventos de mouse Adicione e remova conteúdo da página com um clique do mouse Entenda como o evento double-click funciona Crie uma dica de ferramenta que exiba o conteúdo no evento hover Crie funcionalidades Add to Cart básicas com os eventos mousedown e mouseup Crie um efeito de rollover em um botão com imagens Capture eventos de formulário Insira uma borda a um campo de formulário quando o usuário adicionar foco Mostre uma mensagem após o usuário deixar um campo de texto Capture eventos de teclado Deixando seu site mais atraente com efeitos Descubra o que os efeitos da jQuery podem fazer Exiba e oculte elementos com Show e Hide Configure uma mensagem para ser exibida apenas uma vez no site com o método show e com cookies Ative/desative show e hide Deslize elementos para cima e para baixo Exiba opções de pesquisa alternativas com o método slidetoggle Transição gradual de elementos Crie uma galeria de imagens básica com transição gradual Adicione atraso para criar uma animação sincronizada Encadeie vários efeitos Crie um painel de notícias com vários efeitos Crie animações avançadas Crie uma galeria de imagens com legendas usando animações avançadas Efeitos de suavização adicionais com o plug-in Easing da jQuery

71 72 72 73 73 76 77 77 78 79 80 81 82 85 85 89 93 94 94 95 95 99 100 101 103 105 106 107 109 110 113 114 116 119 119 126

PARTE III:

APLICANDO JQUERY AO SITE

129

Capítulo 6:

Aperfeiçoando a navegação: menus, guias e accordion Defina todos os links em uma página para abrirem em uma nova janela

131 132

X

SUMÁRIO

Capítulo 7:

Capítulo 8:

Configure um item ativo no menu de navegação Crie um menu suspenso básico Adicione efeitos avançados ao menu suspenso usando animate Crie um menu accordion Crie conteúdo dividido em guias

133 135 141 142 147

Criando tabelas interativas e atraentes Aplique estilo aos dados em tabelas com CSS Adicione cores de linhas alternadas usando filtros Adicione um efeito hover simples a linhas Adicione um efeito hover avançado a linhas Manipule os dados das tabelas Adicione uma mensagem após a primeira/última linha da tabela Remova uma linha usando um seletor de filtro Adicione uma linha após outra de acordo com o valor de seu índice Remova uma linha de acordo com o valor de seu índice Adicione uma mensagem depois de linhas com conteúdo específico Remova uma linha de acordo com seu conteúdo Configure a paginação de tabelas com jQuery Crie tabelas avançadas usando os plug-ins jQuery Classifique linhas usando o plug-in tablesorter Altere a ordem de classificação padrão Crie gráficos atraentes com dados tabulares usando o Visualize Crie um gráfico de barras

155 156 157 157 159 161

Criando formulários avançados com jQuery Destaque um campo após o carregamento da página Desabilite e habilite elementos de formulário Marque o campo atual em formulários Crie texto padrão dentro dos campos Limite a contagem de caracteres nos campos Crie um link para marcar todas as caixas de seleção Obtenha o valor de um campo Recupere o valor de uma opção de seleção Adicione uma validação de e-mail simples a um formulário Copie o conteúdo de um campo para outro Aperfeiçoe os formulários com plug-ins Incorpore o qTip ao site Crie um qTip de campo de formulário básico usando o atributo title Use o plug-in validate da jQuery para validar os formulários Adicione uma validação simples a um formulário de contato Adicione mensagens e regras de validação avançadas a um formulário de contato

181 182 182 183 186 188 190 192 193 194 198 201 201

XI

162 164 165 166 166 166 166 172 173 176 176 177

203 203 204 208

SUMÁRIO PARTE IV:

EXPLORANDO A JQUERY AVANÇADA

213

Capítulo 9:

Utilizando dados dinâmicos e Ajax Descubra o Ajax Carregue o conteúdo dinâmico de uma página Carregue todo o conteúdo Manipule erros se o conteúdo carregado estiver ausente Carregue as seções do conteúdo Envie formulários usando Get e Post Use POST para enviar formulários de contato sem recarregar a página Trabalhe com os dados XML Analise dados XML internos e crie HTML Trabalhe com dados JSON Recupere os dados JSON internos e crie HTML Crie um widget de usuário Delicious recebendo dados JSONP de solicitações de API Crie um widget das principais críticas do Yelp com JSONP por meio da API do Yelp Obtenha aprovação para a chave de API do Yelp Use a API do Yelp para exibir críticas baseadas em números de telefone

215 216 217 218 219 221 223

Capítulo 10: Criando e usando plug-ins jQuery Conheça os plug-ins Incorpore um plug-in jQuery ao site Incorpore a jQuery UI ao site Download da jQuery UI Adicione a jQuery UI ao site Compreenda como os widgets da jQuery UI funcionam Personalize o design da jQuery UI Crie um tema para a UI com o ThemeRoller Use os temas da jQuery UI Incorpore os recursos da jQuery UI ao site Incorpore plug-ins jQuery populares ao site Use a jQuery Tools Fancybox Crie seu primeiro plug-in jQuery Faça um rascunho do plug-in Compreenda a estrutura do plug-in Defina as opções para o plug-in Crie o plug-in Como distribuir um plug-in jQuery Prepare o plug-in jQuery para distribuição Envie o plug-in a outros sites XII

225 229 231 233 236 237 243 245 245 253 254 255 255 257 257 258 258 260 263 263 271 271 274 276 277 278 278 279 286 286 287

SUMÁRIO Capítulo 11: Desenvolvendo para a Web móvel com jQuery Crie para a Web móvel usando jQuery Navegadores móveis Compreenda CSS3 Compreenda HTML5 Configuração para iniciar o Web design móvel Use o navegador Safari Mobile do Apple iPhone Use o navegador do Google Android Aplique a exibição de acordo com o smartphone do usuário Desenvolva sites e aplicativos Web móveis com jQuery Introdução ao preview do jQuery Mobile Frameworks mobile Use o Appcelerator Titanium Mobile Use o plug-in jQtouch

289 290 290 291 292 293 295 295 297 298 298 298 298 300

Capítulo 12: Procurando recursos jQuery Acompanhe o crescimento da jQuery Use o site da jQuery Use a documentação da API da jQuery Procure tutoriais da jQuery Participe de uma conferência ou meetup da jQuery Envie bugs para o rastreador de bugs Participe do fórum da jQuery Outros recursos de Web design e desenvolvimento Web

303 304 305 305 306 306 308 310 310

ÍNDICE

311

XIII

Introdução A jQuery se tornou parte da minha rotina diária de design e desenvolvimento Web, então, quando me propuseram escrever um livro sobre jQuery, fiquei empolgado. A jQuery abriu um universo de possibilidades para o Web design. Com este livro, espero mostrar a outras pessoas como o uso de jQuery pode acelerar o tempo de desenvolvimento e permitir a criação de componentes interativos que você pensava serem impossíveis sem um bom conhecimento de programação. Pense neste livro como uma introdução e um livro de receitas de exemplos de jQuery, com soluções do mundo real que podem ser usadas em seu ambiente de trabalho. Smashing jQuery está dividido em quatro partes, que explico a seguir.

PARTE 1: INTRODUÇÃO A JQUERY E JAVASCRIPT A primeira parte do livro apresenta a jQuery do ponto de vista de um iniciante, discutindo as bibliotecas JavaScript e como elas se tornaram uma parte importante das ferramentas cotidianas de todo Web designer e desenvolvedor Web. As vantagens da jQuery são explicadas detalhadamente, proporcionando uma compreensão completa de por que a jQuery se tornou tão popular. Também abordo a importância do uso da melhoria progressiva. Após estabelecer as bases do porquê de sua utilização, analiso como configurar e definir a jQuery para ser usada em um site.

PARTE 2: SOBRE OS FUNDAMENTOS DA JQUERY A segunda parte do livro analisa detalhadamente todos os fundamentos da jQuery, como o uso de seletores, eventos e efeitos. Os seletores na jQuery são extremamente poderosos, motivo pelo qual dediquei um capítulo inteiro à orientação sobre todos os diferentes tipos de seletores, apresentando exemplos de uso. Os eventos e efeitos também são abordados na Parte 2, a fim de que você tenha uma base sólida para desenvolver seu próprio aplicativo Web e componentes de interface de usuário.

PARTE 3: APLICANDO JQUERY AO SITE A terceira parte concentra-se na maneira como os conceitos da jQuery discutidos nesta obra podem ser aplicados a um site ou aplicativo. (A Parte 2 apresenta exemplos, mas não tutoriais completos, como a criação de um menu accordion ou navegação com guias.) A Parte 3 também aborda o uso de jQuery para aperfeiçoar a validação de formulários no site.

INTRODUÇÃO

PARTE 4: EXPLORANDO A JQUERY AVANÇADA Chega um determinado momento na carreira de um desenvolvedor jQuery em que ele deseja conhecer tópicos mais avançados, como o uso e a criação de plug-ins, a criação de jQuery para a manipulação de solicitações Ajax, ou a utilização de aplicativos móveis jQuery. A Parte 4 trata desses tópicos avançados. Além disso, incluí um capítulo que mostra todos os recursos da jQuery disponíveis online.

A QUEM ESTE LIVRO SE DESTINA Este livro foi escrito para Web designers e desenvolvedores front-end que estão começando a usar a jQuery. Você pode ter instalado e configurado um plug-in, mas ainda não sabe muito bem como criar sua própria jQuery. Talvez você tenha ficado sabendo do entusiasmo em torno da jQuery na Internet e está procurando alguém que lhe mostre como usá-la para aprimorar seu site. Os leitores devem ter uma base sólida de conhecimentos em HTML e CSS, além de uma compreensão básica de JavaScript.

SOBRE ESTE LIVRO Os códigos e as URLs deste livro usam uma fonte especial como esta: www.jquery.com. Novos termos aparecem em itálico. Os textos que devem ser digitados estão em negrito. Todos os exemplos do livro são exibidos no navegador Firefox, mas eles são compatíveis com Microsoft Internet Explorer 6, Mozilla Firefox 2.0, Apple Safari 3.0, Opera 9.0 e as versões posteriores destes e o Google Chrome. O código apresentado nos exemplos do livro está disponível para download em: www.bookman.com.br.

2

I PARTE

I

INTRODUÇÃO A JQUERY E JAVASCRIPT Capítulo 1: Introdução a jQuery Capítulo 2: Começando a usar jQuery

1

1 CAPÍTULO

SMASHING JQUERY

INTRODUÇÃO A JQUERY

A JQUERY É UMA BIBLIOTECA JAVASCRIPT criada para auxiliar Web designers e desenvolvedores Web a criar e ampliar as interações JavaScript de maneira rápida e concisa, usando um conjunto definido de métodos que envolvem as funções nativas do JavaScript. A jQuery não oferece qualquer funcionalidade nova, ela usa as APIs (interfaces de programação de aplicativos) existentes do JavaScript, que são

difíceis de entender e criar, e as disponibiliza para um público mais amplo por meio de sua sintaxe de fácil compreensão e criação. Neste capítulo, apresentarei as vantagens do uso da biblioteca JavaScript, mostrarei diferentes bibliotecas geralmente incluídas na mesma categoria que a jQuery, e também mostrarei uma base dos recursos da jQuery e porque ela é uma ótima biblioteca.

PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT

DESCUBRA AS BIBLIOTECAS JAVASCRIPT As bibliotecas JavaScript permitem que Web designers e desenvolvedores Web ampliem a interatividade e a usabilidade de suas páginas utilizando uma estrutura de funções JavaScript mais usadas, criadas com os tipos nativos do JavaScript. Pense nas bibliotecas como frameworks ou esquemas com um conjunto de regras e diretrizes que auxiliam na criação de um site. As bibliotecas JavaScript facilitam muito a criação de JavaScript por Web designers e desenvolvedores Web; elas são o ponto de partida. Muitas bibliotecas populares como Prototype, MooTools, Dojo, YUI, e o foco principal deste livro, a jQuery, são usadas amplamente na Internet hoje. Cada biblioteca possui um conjunto de recursos específico, sendo que a jQuery domina o espaço de manipulação do DOM (modelo de objetos de documentos). O modelo de objetos de documentos é o próprio código HTML que representa a página, estruturado como uma árvore, em que cada ramo representa um nó ligado de uma forma hierárquica. Cada nó pode ser acessado por meio da CSS e também por JavaScript com a utilização de seletores. O DOM é a API (interface de programação de aplicativos) com a qual Web designers e desenvolvedores Web podem manipular páginas usando métodos criados pelo comitê de normas HTML. A HTML 5 oferece um novo conjunto de APIs para a interação com o DOM e a criação de experiências na Internet mais ricas para o usuário. Após uma página ser totalmente carregada, será possível interagir com o DOM. Uma estrutura JavaScript permite que um Web designer ou desenvolvedor Web amplie o DOM, adicionando um include JavaScript (library.js) a uma página e usando as funções especiais configuradas dentro da biblioteca.

AS VANTAGENS DO USO DE UMA BIBLIOTECA JAVASCRIPT EM RELAÇÃO À ABORDAGEM TRADICIONAL O benefício mais importante do uso de uma biblioteca JavaScript é poder lançar mão de um imenso conjunto de funções para ir além do conteúdo não interativo e entediante das páginas Web. As bibliotecas JavaScript podem oferecer maneiras para os desenvolvedores Web e Web designers trabalharem com efeitos, animações, eventos, Ajax e widgets (miniaplicativos) de interface de usuário interativos, permitindo um desenvolvimento Web rápido e ágil. Designers e desenvolvedores não estão limitados às funções fornecidas pela biblioteca. Podemos também criar nossas próprias funções. A beleza das bibliotecas JavaScript para os Web designers que compreendem o DOM reside no fato de que sua manipulação com uma biblioteca fica inerentemente mais fácil, se comparado com a utilização da API do JavaScript. Para obter os mesmos recursos criando o seu próprio JavaScript, seriam necessárias várias horas e longas noites de programação, teste e correção de bugs, que provavelmente produziriam quantidades enormes de código. As bibliotecas JavaScript ajudam muito nesse ponto, reduzindo a quantidade de código necessária para realizar algo que normalmente poderia ser quatro vezes maior se fosse feito com JavaScript nativo.

6

CAPÍTULO 1: INTRODUÇÃO A JQUERY Evitar a repetição é outro benefício da utilização das bibliotecas JavaScript. Quando começamos a criar funções JavaScript para executar tarefas semelhantes, acabamos com um bocado de códigos muito semelhantes. Com uma biblioteca, podemos eliminar essa repetição.

EXPLORE AS BIBLIOTECAS PRINCIPAIS Quando selecionamos um framework, temos cerca de 20 bibliotecas JavaScript dentre as quais escolher, sendo cinco delas as principais. Essas cinco bibliotecas principais (YUI, Prototype, MooTools, Dojo, e o tópico deste livro, a jQuery) se destacaram entre as outras em função de sua facilidade de uso e do imenso público que têm. As principais distinções entre a maioria dessas bibliotecas incluem o tamanho e os navegadores compatíveis. As cinco bibliotecas que discuto são de código aberto, ou seja, qualquer pessoa pode contribuir ao código-fonte que compõe essas bibliotecas. O software da Microsoft, por exemplo, não tem o código aberto, é um software proprietário da Microsoft. A Microsoft emprega seus próprios programadores para o desenvolver e depois vende seu software por uma taxa de licenciamento. A taxa de licenciamento permite a utilização do software, geralmente por um período definido de tempo, e também o acesso ao suporte da Microsoft caso haja problemas. O software de código aberto é diferente. Qualquer pessoa pode baixar o código-fonte e contribuir com alterações, o que produz códigos melhores, pois tudo é desenvolvido com base no voluntariado, com o objetivo de criar um software melhor, e não ganhar dinheiro. Como não pagamos uma taxa de licenciamento, estamos livres para fazer o que quisermos com a biblioteca. A comunidade do software livre na Internet é enorme, com milhões de usuários contribuindo por meio de blogs e fóruns, sendo que hoje é fácil para os desenvolvedores e designers encontrar suporte quando precisam. É importante lembrar que, quando estamos aprendendo sobre uma biblioteca JavaScript, estamos aprendendo a ler e criar no que parece uma outra linguagem – é outra interpretação da linguagem JavaScript.

YUI A biblioteca JavaScript YUI (Yahoo! User Interface) foi criada pela Yahoo! Developer Network em 2005 e está sob a licença BSD (Berkeley Software Distribution). A licença BSD permite que o software seja distribuído como um software de cessão livre, que apresenta o menor número de restrições para finalidades de distribuição em comparação com outras opções de licenciamento, como as Licenças Públicas Gerais GNU. A YUI é totalmente compatível com Internet Explorer 6, Firefox 3, Safari 3 e Opera 10 e com as versões posteriores destes. A biblioteca YUI apresenta um tamanho total de 31 KB. Para termos uma ideia de como é o código YUI, apresento um código JavaScript de exemplo mostrando como implementar um evento de clique usando a YUI. Há duas partes no evento click: a função chamada quando o clique ocorre e o evento click propriamente dito. O código não é muito elegante e usa uma grande quantidade de sintaxe específica da YUI. function handleClick(e) { Y.log(e);

7

PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT } YUI().use('node-base', function(Y) { Y.on("click", handleClick, "#foo"); });

Prototype A Prototype, uma biblioteca JavaScript criada por Sam Stevenson, se tornou popular porque foi o primeiro framework JavaScript incorporado ao framework de programação de desenvolvimento rápido também popular, Ruby on Rails. Como ela está incorporada à Ruby on Rails, sempre pensei que não se destinava a Web designers, mas a desenvolvedores Web hardcore, para ser usada com o Ruby on Rails. A biblioteca Prototype é uma biblioteca base com a funcionalidade Ajax, que obtém ainda mais recursos com a adição da Scriptaculous. A Scriptaculous oferece efeitos e elementos de interface de usuário, funcionando apenas com a Prototype. A principal desvantagem dessa biblioteca é o seu tamanho: os dois arquivos .js totalizam 278 KB. A documentação para as bibliotecas Prototype e Scriptaculous pode ser difícil de entender para desenvolvedores front-end inexperientes. Assim como ocorre com outras bibliotecas, há uma comunidade de apoiadores, mas a Prototype ainda pode ser difícil de aprender, pois apresenta uma sintaxe complicada. Para termos uma ideia de como fica o código da Prototype, apresento um código JavaScript de exemplo mostrando como a Prototype manipula um evento click. O evento click é muito semelhante à configuração de um evento click na jQuery, mas as aparências enganam; na verdade, muitos dos outros métodos na Prototype são bem mais difíceis e se parecem menos com a jQuery: $("foo").observe("click", function() { alert('Clicked!'); });

MooTools A MooTools foi lançada em 2006 e é uma biblioteca JavaScript semelhante à Prototype; sua sintaxe destina-se a Web designers e desenvolvedores Web com nível intermediário a avançado. A biblioteca JavaScript MooTools permite que os desenvolvedores e designers trabalhem em uma estrutura orientada a objetos para ampliar a API do JavaScript e proporcionar maior interatividade nas páginas Web. A MooTools destina-se àqueles que procuram uma biblioteca semelhante ao JavaScript puro. A seguir, apresento um código de exemplo que mostra como a MooTools manipula eventos click: $('foo').addEvent('click', function() {}));

Dojo A Dojo foi lançada em 2004 como um framework JavaScript para a criação de aplicativos Web compatíveis com vários navegadores e para a adição de interatividade a sites. A sintaxe da Dojo pode ser confusa; ela se assemelha muito mais à criação de JavaScript nativo, 8

CAPÍTULO 1: INTRODUÇÃO A JQUERY destinando-se a desenvolvedores front-end experientes, o que dificulta seu uso e compreensão por iniciantes. A seguir, apresento um código de exemplo que mostra como a Dojo manipula eventos click: fooNode = dojo.byId("foo"); fooConnections = []; fooConnections.push(dojo.connect(fooNode, 'onclick', foo));

Como podemos concluir com os exemplos anteriores, as bibliotecas JavaScript podem ter uma sintaxe bem confusa. Analisaremos agora um exemplo de como a jQuery manipula eventos click: $('#foo').click(function() { // evento click });

AS VANTAGENS DA JQUERY JQuery proporciona diversas vantagens. Podemos chegar à conclusão de que jQuery é a sintaxe mais concisa e fácil de entender comparando-a aos exemplos anteriores. Essa é a vantagem da jQuery: ela não enrola. Sem frescura, sem códigos confusos, e não é preciso ser um programador back-end para criá-la, mas isso não significa que a jQuery não tenha um lado avançado. A Figura 1-1 mostra a página inicial da jQuery: http://jquery.com.

Figura 1-1: O site da jQuery

9

PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT Uma breve história da jQuery A jQuery foi criada em 2006 por John Resig como uma alternativa para as bibliotecas JavaScript mais complicadas. Ela permite que Web designers e desenvolvedores Web criem JavaScript mais simples, mas ainda com a possibilidade de execução de funções JavaScript avançadas nos sites. A jQuery é incrível porque não é necessário conhecimento de programação avançado para executar a manipulação do DOM. Ela tem algumas áreas avançadas que exigem um conhecimento prévio de JavaScript, como a utilização dos métodos Ajax para a obtenção e postagem de conteúdo, conforme analisado no Capítulo 9, a criação de plug-ins jQuery personalizados, conforme discutido no Capítulo 11, e o uso de sites móveis, conforme comentado no Capítulo 10. A maioria dos designers e desenvolvedores que conheço usa, ou já usou, a jQuery em algum momento nos últimos quatro anos. Quando pergunto por quê, geralmente respondem: “Há algo mais fácil?”. A facilidade de uso atrai diversos profissionais à jQuery; não é preciso um mestrado em ciência da computação para criar um envio de formulário pelo Ajax. Você pode estar se perguntando o que podemos fazer com a biblioteca jQuery. A resposta é: tudo que fazemos com a API nativa do JavaScript. Detalho melhor o que podemos fazer com a jQuery no decorrer do livro, mas aqui está uma visão geral rápida de seus principais recursos: Eventos que incluem interações de mouse, teclado, formulário e do usuário Efeitos que incluem exibir/ocultar, deslizar, transição gradual e animações personalizadas Animações que permitem a movimentação de objetos com CSS e efeitos nativos Métodos Ajax para a interface com o processamento de formulários no servidor com

XML e JSON Extensibilidade para a criação de plug-ins pessoais que ampliam a base da API da jQuery Manipulação do DOM Manipulação da CSS (folha de estilo em cascata) Utilitários que fornecem a detecção de navegadores e interfaces mais fáceis para funções

comuns do JavaScript

Quem usa jQuery Os Web designers e desenvolvedores Web são os principais usuários da jQuery. Já a vi sendo usada em diversos sites: desde sites de pequenos negócios familiares até sites corporativos avançados. Como a jQuery é livre, todos os tipos de designers e desenvolvedores a utilizam, pois proporciona os benefícios do JavaScript aos Web designers que podem não saber programação, mas desejam adicionar efeitos bacanas a seus sites. A jQuery ficou mais popular quando o Google e a Microsoft começaram a oferecer soluções hospedadas. Uma solução hospedada se trata de um arquivo hospedado em um servidor Web, neste caso, por meio da CDN (rede de fornecimento de conteúdo), para oferecer maior desempenho a partir dos sites que usam o arquivo. A ação do Google e da Microsoft indicou 10

CAPÍTULO 1: INTRODUÇÃO A JQUERY que a jQuery seria a biblioteca preferida e uma das personagens principais na comunidade de bibliotecas JavaScript de código aberto. Google, BBC, Dell, Bank of America, Major League Baseball, NBC e Netflix fazem parte do número crescente de empresas que utilizam a jQuery em seus sites. O Netflix, site que oferece o aluguel de filmes a clientes por meio de mala direta e canais online, utiliza JavaScript avançado para orientar a interface de usuário há vários anos. A Figura 1-2 mostra a criação de menu com a jQuery que é exibido quando se passa o mouse sobre o título de um filme, permitindo que o usuário visualize mais informações sem sair da página.

Figura 1-2: O site do Netflix

Mostrando como jQuery funciona com páginas Web A jQuery é fácil de ser configurada. Assim como outras bibliotecas JavaScript, é inserida no topo da página entre as tags . É desta maneira que se inclui a biblioteca JavaScript jQuery no site: jQuery

11

PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT Após adicionarmos a biblioteca jQuery à página, criamos o código JavaScript usando a API da jQuery para acessar diferentes partes da página por meio do DOM, a qual a maioria dos Web designers e desenvolvedores Web deve conhecer. Se você for um Web designer, trabalha com ele diariamente, mas talvez sem perceber. A jQuery também pode ser usada para a adição e remoção de HTML da página e para responder a ações que os usuários executam na página, como o clique em um link ou o preenchimento de um formulário. Também podemos criar animações e usar o Ajax para enviar e carregar conteúdo por meio dos serviços da Internet sem a necessidade de atualizar a página.

Explore as vantagens da jQuery Hoje os sites são muito mais que apenas texto, imagens e links para outras páginas. Os usuários da Internet esperam algo mais de um site, e o limite está constantemente sendo ultrapassado por sites e empresas como Facebook, Google, Microsoft, Twitter e Foursquare, para citar algumas. A tecnologia está em constante mudança, e a utilização da jQuery ajuda a acompanhar esse ritmo. Trata-se de uma biblioteca que promove o rápido desenvolvimento de sites ou aplicativos, permitindo que nos concentremos na interação do usuário e no design da interface, sem a necessidade de criação de códigos longos e inchados. Escrever em jQuery é mais fácil que escrever código JavaScript, pois seguimos uma API. Se você conhecer bem a criação de HTML e CSS, poderá entender e escrever jQuery, uma vez que a maioria de suas funcionalidades se baseia na interatividade com HTML e CSS.

Código aberto As bibliotecas JavaScript são apoiadas pela comunidade de código aberto, são bem testadas e estão atualizadas. A comunidade do código aberto possui uma grande rede de apoio. Web designers e desenvolvedores Web estão sempre criando tutoriais, livros e plug-ins para ajudar e aumentar a biblioteca jQuery.

Ótima documentação Sem dúvida, uma das principais vantagens da jQuery é sua documentação, que é a base de uma grande biblioteca. A equipe responsável pela jQuery dedicou grande parte de seu tempo documentando o modo como a biblioteca funciona e como navegar em sua API. O site da documentação da jQuery apresenta tutoriais completos com exemplos de código, além de um imenso grupo de apoiadores em toda a Internet. A Figura 1-3 mostra a seção Documentation do site da jQuery.

12

CAPÍTULO 1: INTRODUÇÃO A JQUERY

Figura 1-3: A seção Documentation do site da jQuery

A comunidade de desenvolvedores e programadores que criou a biblioteca jQuery está em constante aperfeiçoamento e sempre lançando novas versões. A biblioteca foi lançada em 2006 na versão v1.0; desde então, o código foi atualizado 23 vezes, trazendo-nos assim à versão atual, v1.4.2. A jQuery é continuamente aperfeiçoada, um dos motivos pelo qual se tornou tão popular. As bibliotecas que não são atualizadas com essa frequência não são tão populares. Quando as atualizações são feitas, a documentação é atualizada para métodos que se tornaram obsoletos (marcados para remoção na próxima versão) e para garantir que a biblioteca será retrocompatível, ou seja, que funcione com versões anteriores. Quando uma biblioteca é atualizada para uma nova versão, o processo de atualização é indolor: basta incluir a nova biblioteca JavaScript no seu servidor. Além disso, é preciso verificar o changelog com frequência; ele é uma seção que define cada versão e as alterações feitas à biblioteca, para identificar se algum método utilizado se tornou obsoleto. A jQuery é lançada sob a licença MIT ou a licença pública geral (GPL) GNU, versão 2. Isso significa basicamente que ela é livre e, desde que demos o crédito ao autor dentro do próprio plug-in da jQuery, podemos usar o código como quisermos.

13

PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT O mesmo JavaScript com menos código A jQuery é JavaScript: tudo que podemos fazer no JavaScript também podemos na jQuery. As possibilidades são infinitas. O que mais gosto na jQuery é que ela proporciona uma base sobre a qual podemos construir, mas não ficamos limitados àquilo que a jQuery oferece. Quando a usamos, temos três opções de criação de código: Usar a API extensiva da jQuery Usar ou criar um plug-in para a jQuery Escrever um JavaScript normal

Outro benefício interessante da jQuery é a curta extensão de seu código. Se desejarmos alterar a cor de fundo em JavaScript simples, o código ficará mais ou menos assim: document.getElementById('mydiv').style.backgroundColor = 'red';

Usando o mecanismo avançado de seleção, a jQuery obtém o mesmo resultado com uma linha mais curta: $('#mydiv').css('background-color','red');

A sintaxe é mais fácil de entender que o JavaScript, e foi criada tendo os Web designers em mente. Quando comparamos essa sintaxe a outras bibliotecas, como a Prototype ou a YUI, podemos ver por que a jQuery se tornou a opção para muitos profissionais. O mecanismo seletor é o recurso mais conhecido e adorado da biblioteca jQuery. Ele permite a utilização de seletores CSS2, o que facilita incrivelmente o entendimento de Web designers com conhecimento de CSS.

Encadeamento Um dos melhores recursos da jQuery é o encadeamento, que nos permite encadear vários métodos, um após o outro. Isso ajuda a manter uma quantidade reduzida de código e, assim, a aumentar a velocidade com a qual o código jQuery é recuperado do servidor Web e executado. Este é um exemplo de código jQuery que usa o encadeamento: $('#foo').addClass('active').prev().removeClass('active');

Este é um exemplo que não usa o encadeamento: $('#foo').addClass('active'); $('#foo').next().removeClass('.active');

O exemplo que usa o encadeamento é uma maneira mais clara e econômica de criar jQuery. Uso o encadeamento em meus exemplos de código no decorrer do livro.

14

CAPÍTULO 1: INTRODUÇÃO A JQUERY Compatibilidade entre navegadores Com as atualizações recentes do Safari, Firefox, Internet Explorer, Google Chrome e Opera, a criação de páginas que funcionam em todos os principais navegadores é prioridade. A guerra entre navegadores tornou-se parte da luta diária de todo Web designer. Quando usamos a jQuery, podemos assegurar que ela é compatível com todos os navegadores mais populares, como o Internet Explorer 6.0, o Mozilla Firefox 2, o Safari 3.0, o Opera 9.0 e o Google Chrome, e suas versões posteriores. Em geral, um grande problema com o JavaScript é a necessidade de criar diferentes códigos para o suporte a vários navegadores. Alguns Web designers e desenvolvedores Web preferem criar folhas de estilo alternativas específicas para cada navegador para o suporte à CSS em diferentes navegadores, principalmente o Internet Explorer. O mesmo problema costuma ocorrer com o JavaScript. O código a seguir representa como configurar uma solicitação Ajax que funciona em vários navegadores: If(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); //Código para Firefox/Safari } else if(window.ActiveXObject) //Versão Active X { xhr = new ActiveXObject("Microsft.XMLHTTP"); // Para IE }

Com o JavaScript simples, precisamos escrever duas funções diferentes, testá-las e corrigir os bugs. É bastante trabalho, sem contar a repetição que ocorre quando precisamos escrever várias funções para executar uma mesma função para o suporte a vários navegadores, em vez de um script compatível com todos, como na jQuery. Por outro lado, o código a seguir mostra como é fácil a solicitação Ajax na jQuery: $.ajax();

Em conformidade com a CSS3 Todos os navegadores modernos oferecem suporte a CSS1 e CSS2 (as duas primeiras versões das folhas de estilo em cascata), sendo que a maioria dos Web designers e desenvolvedores Web usa a CSS2 atualmente. A CSS3 ainda está em processo de desenvolvimento, e disponibiliza recursos aprimorados, como fontes incorporadas, cantos arredondados, imagens e cores de fundo avançadas, efeitos de texto e transições. Poucos navegadores oferecem suporte a todas as especificações da CSS3 – desde julho de 2010, o Firefox 4, o Internet Explorer 9, o Opera 9 e o Safari 4. Algumas versões mais antigas desses navegadores fornecem suporte a apenas determinados recursos da CSS3.

15

PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT A jQuery oferece suporte à CSS3 apenas para novos seletores. Mas o que isso significa? Um dos novos recursos da CSS3 são os seletores de atributos adicionais, um aperfeiçoamento feito sobre os seletores de atributos inclusos na CSS2, semelhantes aos seletores de atributos na jQuery. Esses seletores permitem a definição do estilo do conteúdo de acordo com seus atributos, para que filtremos de acordo com valores específicos encontrados nos atributos. Observe este código de exemplo: p[title=*foo] {background:black;color:white} This is my sample text

Faça uso do JavaScript não obstrutivo Muitos de vocês provavelmente já criaram janelas pop-up incorporando o JavaScript diretamente às tags HREF, como mostrado no exemplo a seguir. O maior problema com esse código é que ele está incorporado ao link HREF. Caso o usuário esteja com o JavaScript desativado, o que dificilmente é o caso, esse link não funcionará e não haverá método de contingência para permitir que a ajuda seja visualizada. Help

Esse HTML é um exemplo de JavaScript obstrutivo. Para Web designers, isso ocorre quando os estilos são escritos em linha em vez de a camada de apresentação do conteúdo ser separada. Para comparar o JavaScript obstrutivo, apresento um exemplo de como usar a jQuery para apresentar uma solução não obstrutiva com um código semelhante. Quando o JavaScript é desativado, essa versão, em vez de envolver o código dentro da função click, oferece aos usuários a ação de contingência de clicar no link e acessar a página de ajuda. Unobtrusive jQuery $(document).ready(){ $(".help-link").click(function() { var linkHref = $(this).attr('href'); window.open(linkHref,'help window', 'height=800,width=600,toolbar=no'); return false; }); }); Help

A degradação harmoniosa e a melhoria progressiva são estratégias que abordam como oferecer suporte aos recursos mais novos dos navegadores e navegadores mais antigos sem suporte, ao mesmo tempo em que proporcionamos a melhor experiência ao usuário. O aperfeiçoamento progressivo é a estratégia mais nova das duas, mas a principal diferença é a abordagem que cada uma apresenta. Discuto as duas nas próximas seções. 16

CAPÍTULO 1: INTRODUÇÃO A JQUERY Degradação harmoniosa Com a abordagem da degradação harmoniosa, ativamos nosso site em todos os navegadores modernos populares e trabalhamos com navegadores mais antigos para nos certificarmos de que ofereçam suporte a esses recursos. A maioria dos Web designers e desenvolvedores Web utilizou a degradação harmoniosa configurando folhas de estilo específicas ou subterfúgios de navegador para várias versões do Internet Explorer (sem querer acusar ninguém, o IE6), devido a problemas de layout com o modelo de caixa. Help Please upgrade your browser or turn on JavaScript, as your browser is not working with our Website.

Melhoria progressiva A melhoria progressiva se refere a uma estratégia pela qual iniciamos com uma base de recursos suportados por todos os navegadores e depois adicionamos mais recursos para os navegadores modernos que oferecem suporte a eles. A melhoria progressiva é uma ótima estratégia a se adotar, pois torna os sites mais acessíveis. É melhor para os usuários se fornecemos um conjunto de recursos para todos e adicionamos atualizações especiais para os que usam navegadores mais compatíveis, ou seja, aqueles compatíveis com recursos como CSS3 e HTML 5. Atualmente, apenas o Safari 4 e o Opera 10.6 oferecem suporte a HTML 5 e CSS3. A abordagem da melhoria progressiva não pressupõe que todos tenham o JavaScript ativado, sempre proporcionando ao usuário uma maneira alternativa para acessar o conteúdo. Pense na janela pop-up usada na discussão sobre o uso do JavaScript não obstrutivo. Em vez dela, podemos usar o atributo de destino em uma tag âncora para dizer ao navegador para abrir o link em uma nova janela em vez de criar um pop-up. Esse recurso é suportado por todos os navegadores mais populares. Help

Neste livro, me concentro na utilização da jQuery com a estratégia de melhoria progressiva para proporcionar aos navegadores mais modernos uma experiência ligeiramente melhor e, ao mesmo tempo, oferecendo suporte a navegadores mais antigos com uma experiência de base.

JavaScript e jQuery não obstrutivos A jQuery facilita a prática dessas duas estratégias (a degradação harmoniosa e a melhoria progressiva), pois todos os códigos da jQuery (JavaScript) ficam fora da HTML, em um arquivo JavaScript externo ou no cabeçalho do arquivo HTML com o qual estivermos trabalhando, a menos que estejamos utilizando uma solução hospedada fornecida por uma CDN. Os elementos HTML não contêm códigos JavaScript incorporados, portanto, uma ação de contingência é sempre uma opção, desde que o desenvolvedor leve em consideração essas práticas ao configurar seus sites. 17

2

2 CAPÍTULO

SMASHING JQUERY

COMEÇANDO A USAR JQUERY

JQUERY É UMA OPÇÃO POPULAR entre Web designers e desenvolvedores Web, pois os passos necessários para começar o desenvolvimento são mínimos. É preciso apenas baixar uma cópia do arquivo da biblioteca JavaScript principal e incluir uma tag script com link para ela no topo do site. Tal como todas as bibliotecas JavaScript, um include da biblioteca JavaScript deve ser adicionado ao site antes

de começar a usar seus recursos no site ou aplicativo Web. Este capítulo mostra como configurar um ambiente de desenvolvimento local opcional, escolher a opção correta de download de jQuery e configurar a biblioteca jQuery que será incluída no site. Também explica a funcionalidade do wrapper da jQuery.

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT

CONFIGURE O AMBIENTE DE DESENVOLVIMENTO Para começar a configuração do ambiente de desenvolvimento, primeiro escolha qual editor de código será utilizado. Há várias opções populares, como Dreamweaver, Coda, TextMate e EditPlus, para citar algumas. Utilizo mais o Coda, um aplicativo para Mac OS X criado para a geração de códigos para sites e aplicativos Web. Esse software é um conjunto de ferramentas integrado que possui recursos como FTP, terminal (prompt de comando), gerenciamento de arquivos, editores CSS e de código, marcação de sintaxe, autopreenchimento, funções de busca e substituição estendidas, visualização e suporte a vários idiomas. Caso não deseje usar um editor de códigos, é possível usar o bom e velho Bloco de notas (Windows) ou o TextEdit (Mac), mas você não disporá de todos os recursos avançados que um editor de códigos oferece. Antes de podermos começar a escrever o código da jQuery, será necessário determinar um local para testar seu trabalho: um ambiente de desenvolvimento, que pode ser tanto uma estrutura de desenvolvimento local com um servidor Web local e um navegador Web ou um host Web externo. Basicamente, ele permite testarmos qualquer trabalho que estejamos fazendo em um ambiente simulado interativo. A vantagem de utilizar um aplicativo como o Coda ou o Dreamweaver é que podemos configurar um host Web externo no aplicativo, possibilitando trabalharmos diretamente no servidor e fazermos os testes com maior facilidade. Algumas pessoas podem argumentar que é possível trabalhar em uma pasta local e abrir cada arquivo em um navegador, mas assim não teremos uma visualização precisa de um ambiente interativo. Podemos acabar desenvolvendo algumas funções jQuery dessa maneira, no entanto, quando forem colocadas na Internet, o resultado será diferente. Acredito que é melhor trabalhar em um ambiente mais próximo do resultado final desde o início. Os ambientes de desenvolvimento locais são fáceis de montar e vantajosos para quando não pudermos acessar a Internet. Para usuários do Mac, a opção mais popular é o MAMP (www.mamp. info/), que significa Mac/Apache/MySQL/PHP, como mostra a Figura 2-1. Trata-se de um aplicativo de desenvolvimento integrado que pode ser executado localmente e testado como se estivéssemos em um servidor Web interativo. Para usuários do Windows, a versão do Windows chama-se Wamp Server, que significa servidor Windows/Apache/mySQL/PHP (www. wampserver.com/en/). Minha sugestão é, sempre que possível, utilizar o Apache como servidor Web, pois dispõe de código aberto muito estável e roda principalmente no Linux. Outra alternativa para desenvolvedores Web que utilizam o Mac OS X é empregar o servidor Web Apache incorporado ao Mac OS X. Para configurar o servidor Apache em um Mac, siga estes passos: 1. Abra Preferências do Sistema. Será exibido um grupo de ícones que permite o controle das configurações como Pessoal, Hardware, Internet e Rede, Sistema e Outro. 2. Clique no ícone Compartilhamento para abrir o painel Compartilhamento; a seguir, selecione a caixa de seleção Compartilhamento de Internet na lista de serviços de compartilhamento. O painel Compartilhamento exibe as configurações que permitirão o compartilhamento de arquivos, monitores, impressoras etc. Se a caixa de seleção já estiver marcada, ignore este passo. 3. Certifique-se de que a caixa de seleção Compartilhamento de Internet esteja selecionada, como mostra a Figura 2-2. Você acabou de inicializar o servidor Web Apache. Um ícone 20

CAPÍTULO 2: COMEÇANDO A USAR JQUERY vermelho deve ficar verde à direita do painel e um texto que diz: Seu site pessoal, na pasta Sites em sua pasta inicial, está disponível no endereço: http:// xx.xx.xx.xx/~seunome.

4. Clique no endereço de IP para abrir o navegador de Internet padrão. A página padrão será carregada. Os arquivos do site (HTML, CSS, JavaScript e imagens) ficam no diretório –/Sites, de maneira semelhante à configuração de um servidor Web. Faço todo o meu desenvolvimento local utilizando esse tipo de configuração.

Figura 2-1: MAMP aberto na minha área de trabalho

USE O FIREBUG NO FIREFOX Caso não utilize o Firefox como um de seus navegadores de desenvolvimento principal, sugiro veementemente que o baixe antes de continuar a acompanhar este livro. Para os exemplos, utilizo a versão 3.6.8 do Firefox e a versão 1.5.4 do Firebug. Originalmente, o Firebug, que hoje é um projeto de desenvolvimento de código aberto, foi criado por Joe Hewitt em dezembro de 2006. Desde então, várias atualizações do programa foram feitas e mais de 1 milhão de desenvolvedores o utilizam. Figura 2-2: Caixa de diálogo de preferências de compartilhamento no Mac OS X

21

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT O Firebug é uma extensão que oferece um conjunto de ferramentas a Web designers e desenvolvedores Web que utilizam HTML, CSS e JavaScript, e também uma ferramenta livre e de código aberto disponível a todos por meio do site de extensões do Firefox (addons. mozilla.org). O Firebug permite a visualização e edição de HTML e CSS dinamicamente (consulte a Figura 2-3). Além disso, possui um depurador JavaScript bastante avançado que ajuda na pesquisa de erros. O console é um recurso vantajoso, pois podemos executar o JavaScript diretamente na página a partir dele, o que é muito prático.

Figura 2-3: Página inicial do Firebug

Como instalar e habilitar o Firebug Para instalar e habilitar o Firebug, siga estes passos: 1. Abra o Firefox e acesse www.getFirebug.com. 2. Clique em Install Firebug for Firefox. 3. Uma janela de prompt, mostrada na Figura 2-4, que diz: “Install Add-ons only from authors whom you trust” é exibida. No botão Install, um número inicia a contagem regressiva. Quando chegar a 0, o botão Install Now será habilitado. Clique nele. 4. A seguir, veremos uma barra de andamento indicando que o plug-in está sendo instalado no navegador. Após a instalação do plug-in, aparecerá uma mensagem de confirmação e um botão que diz Restart Firefox será exibido, como na Figura 2-5. 5. Parabéns, agora você está pronto para começar a usar o Firebug! A Figura 2-6 mostra o passo final do processo de instalação. 22

CAPÍTULO 2: COMEÇANDO A USAR JQUERY

Figura 2-4: Prompt de instalação do Firebug

Figura 2-5: Janela de conclusão da instalação do Firebug

Como habilitar o Firebug Para habilitar o Firebug, siga estes passos: 1. Abra uma página no Firefox. Apenas para demonstrar, utilizarei: www.mozilla.com. 2. Após carregar a página, há algumas maneiras de abrir o Firebug. A mais fácil é clicar no ícone do Firebug no canto inferior direito do navegador. A Figura 2-7 mostra um exemplo do Firebug instalado e o ícone do Firebug no canto inferior direito do navegador. Também é possível iniciar o Firebug clicando com o botão direito na janela do navegador e escolhendo Inspect Element, no menu suspenso. A Figura 2-8 apresenta um exemplo do menu suspenso dentro do navegador.

23

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT 3. Após abrir o Firebug, você verá uma série de guias: Console, HTML, CSS, Script e DOM, entre outras.

Figura 2-6: Janela de confirmação da instalação do Firebug após a reinicialização do navegador

Ícone do Firebug

Figura 2-7: Uma página e o Firebug instalado

24

CAPÍTULO 2: COMEÇANDO A USAR JQUERY

Figura 2-8: Como acessar o Inspect Element para abrir o Firebug

Como inspecionar e editar HTML O recurso de inspeção e edição do Firebug é excelente, pois permite a depuração de HTML e JavaScript muito mais facilmente, em especial quando o DOM estiver sendo alterado dinamicamente. Se tiver um script que adiciona/altera HTML, você pode abrir a janela de inspeção e visualizar as alterações de HTML em tempo real. Esse é sempre meu primeiro passo na depuração do JavaScript. Prefiro sempre me certificar de que a HTML está sendo criada adequadamente antes de continuar. A Figura 2-9 mostra um exemplo de como ficará a tela após a habilitação do Firebug com a seção HTML aberta.

Como usar o console O console do Firebug é o meu segundo passo na depuração de JavaScript. Após corrigir problemas com o DOM, uso o console para tentar executar meu script de modo interativo na página. Vemos dois painéis no console, o esquerdo é usado para a exibição de erros e o direito também é conhecido como linha de comando. 1. Abra o Firebug e clique na guia Console. 2. Se houver erros no JavaScript, eles serão exibidos no painel esquerdo. A Figura 2-10 mostra um exemplo do Firebug aberto com erros exibidos.

25

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT

Figura 2-9: Seção de edição de HTML do Firebug

Figura 2-10: Console do Firebug com erros exibidos

26

CAPÍTULO 2: COMEÇANDO A USAR JQUERY Como executar o JavaScript interativamente no Firefox com o console do Firebug O console do Firebug é uma ótima maneira de testar a jQuery ou o JavaScript em uma página sem a necessidade de adicioná-los ao código HTML, executá-los no servidor Web e tudo mais. O console do Firebug também oferece feedback na forma de mensagens de erro se o JavaScript apresentar problema. Essa é uma ótima maneira de testar o código antes de começar a escrever todo ele na HTML.

Depuração de JavaScript avançado com o Firebug Para aplicativos JavaScript mais avançados, podemos usar a ferramenta de depuração de JavaScript no Firebug. O depurador de JavaScript é uma ferramenta avançada que permite a adição de pontos de interrupção em diferentes partes do script para que possamos parar, iniciar ou pausar o script e analisar mais detalhadamente as variáveis e os objetos. Não falo muito sobre o depurador de JavaScript neste livro, pois ele se destina a programadores JavaScript mais avançados.

Depuração de JavaScript com outros navegadores Web O Firefox não é o único navegador com ferramentas de desenvolvimento Web. O Apple Safari, o Google Chrome e o Internet Explorer possuem conjuntos de ferramentas semelhantes, mas eles não são tão avançados quanto o Firebug do Firefox. O depurador do Safari/Chrome compartilha alguns recursos comuns com o Firebug, incluindo o recurso de inspeção de elementos e a guia de gerenciamento de recursos, mas não possui um depurador avançado, como o presente no Firebug. Não possuo muita experiência com outras ferramentas. Já utilizei o IE/Safari para verificações rápidas, mas o Firebug é sempre minha principal opção para o desenvolvimento. Os fundamentos do JavaScript são conceitos que Web designers e desenvolvedores Web devem conhecer antes de entrar no universo da jQuery e das bibliotecas JavaScript. Isso posto, podemos usar e criar scripts básicos sem precisar de uma base sólida de conhecimento em JavaScript, mas saber como o JavaScript funciona acelera seu desenvolvimento e compreensão, o que leva a uma maior produtividade.

DOWNLOAD DA BIBLIOTECA JQUERY Antes de podermos começar a desenvolver com a jQuery, primeiro precisamos baixar a biblioteca jQuery no site da jQuery. A biblioteca jQuery é um arquivo JavaScript que pode ser acessado de duas maneiras: Baixando o arquivo jQuery.js e hospedando-o localmente em seu site Utilizando uma versão hospedada de uma CDN (rede de fornecimento de conteúdo)

Recomendo o download de uma cópia da jQuery para o computador local para o trabalho de desenvolvimento e os testes, e especificamente para quando uma conexão de Internet não estiver disponível. Para baixar o jQuery, siga estes passos: 1. Acesse o site da jQuery: www.jquery.com. 27

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT 2. Clique no link Download localizado na barra de navegação principal, no topo da página, que abre a página oferecendo várias maneiras para o acesso à biblioteca jQuery. A Figura 2-11 mostra a página de download.

Figura 2-11: Página de download da jQuery

Muitos sites escolhem as soluções hospedadas por CDN livres, pois elas comprovaram ser confiáveis e de rápido carregamento, liberando largura de banda de seu site. CDN significa content delivery network (rede de fornecimento de conteúdo) e trata-se de uma solução hospedada fornecida por empresas com redes de grande porte, como Google, Microsoft, Akamai, etc. As redes de fornecimento de conteúdo oferecem uma rede de alta velocidade maior, que serve a biblioteca jQuery de vários locais. Quando um usuário carrega o site em seu navegador, sua localização ativa o servidor geograficamente mais próximo para fornecer a biblioteca jQuery que, por sua vez, diminui o tempo de carregamento. A página das bibliotecas Ajax hospedadas pelo Google (Figura 2-12) apresenta várias opções que incluem a jQuery e muitas outras bibliotecas no site ou aplicativo Web. Quando se utiliza uma solução hospedada, é possível especificar na URL qual versão da jQuery será usada, como mostrado no seguinte código de exemplo com a jQuery hospedada pelo Google:

O Google e a Microsoft são grandes empresas com alta penetração de mercado, sendo que muitos sites já utilizam suas bibliotecas jQuery hospedadas. Quanto mais sites utilizarem as versões hospedadas, maiores as chances de já termos obtido esse arquivo de outro site, assim, já estará armazenado no cache de nosso navegador. (O armazenamento em cache no navegador ocorre quando obtemos um arquivo de um site.)

28

CAPÍTULO 2: COMEÇANDO A USAR JQUERY

Figura 2-12: Página das bibliotecas Ajax hospedadas pelo Google

Por exemplo, digamos que sou um usuário cotidiano do Digg (www.digg.com), um portal de notícias online que exibe as notícias de acordo com a popularidade votada por seus usuários e usa a biblioteca jQuery hospedada do Google, e decido adicionar a biblioteca jQuery em meu site. Quando abro meu site no navegador, ele puxa uma versão armazenada em cache da jQuery, a menos que, quando solicitar a biblioteca, o Google retorne uma resposta modificada. Nesse caso, a biblioteca jQuery mais atual será retornada em vez do arquivo do cache. A Tabela 2.1 descreve as duas versões disponíveis da jQuery.

Tabela 2.1 Versões da biblioteca jQuery Formato

Descrição

Descomprimido (cerca de 155 KB*)

Sua principal finalidade é o trabalho no desenvolvimento, para a depuração e para desenvolvedores avançados que gostariam de analisar mais detalhadamente o código para entender como ele funciona.

Comprimido (cerca de 55 KB*)

Arquivo com tamanho muito menor destinado a códigos de produção. Ele é comprimido com uma técnica chamada minificação, que remove caracteres desnecessários como comentários, quebras de linha, espaços em branco e tabulações, para diminuir os tempos de carregamento.

*Estimativa para a versão 1.4.2

29

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT Usuários mais experientes podem desejar usar o Git (software de controle de versão) para acessar a versão mais recente da biblioteca jQuery. Não entrarei em mais detalhes sobre o Git; se você quiser saber mais sobre ele, acesse www.git.com.

INCLUA A BIBLIOTECA JQUERY EM SUA PÁGINA Após decidirmos a abordagem que utilizaremos, seja baixando uma biblioteca ou usando uma versão hospedada da jQuery, é preciso configurá-la na página. A biblioteca jQuery pode ser incluída dentro de tags de script e interativamente entre as tags do documento HTML, ou podemos incluí-la antes da tag de fechamento . Devemos incluir todas as CSS (folhas de estilo em cascata) antes da biblioteca jQuery e do código jQuery personalizado para garantir que todas as CSS sejam aplicadas ao DOM antes de tentarmos alterá-lo com a jQuery. Devemos sempre incluir um doctype em nossas páginas HTML. Caso não seja incluído, ocorrerão vários tipos de comportamento errático no navegador e a página irá falhar na verificação da bateria de validação. Ele ajuda a garantir que o código funcione em todos os navegadores. A jQuery nem sempre processará corretamente se não houver um doctype na página. A CSS também processará incorretamente quando não existir um doctype na página. Todos os exemplos deste livro usam o doctype da HTML 5 para garantir a melhoria progressiva e a degradação harmoniosa com navegadores mais antigos. (Consulte o Capítulo 1 se precisar lembrar o que é a melhoria progressiva e a degradação harmoniosa.) O doctype para a HTML 5 é muito simples de configurar em comparação com doctypes anteriores, que são difíceis de lembrar. O seguinte código é o doctype para a HTML 5:

Este exemplo é um documento HTML muito básico que define como incluir a jQuery no topo da página. Inclua sempre todos os arquivos CSS antes para garantir que a página seja processada corretamente antes de tentar manipular o DOM: My jQuery Example //o script vai aqui

30

CAPÍTULO 2: COMEÇANDO A USAR JQUERY Também podemos incluir a biblioteca jQuery no fim da página. Às vezes, isso pode aumentar a velocidade com a qual a página é carregada, pois o JavaScript não se ocupa em carregar na frente, enquanto o resto da página continua a ser carregada. Além disso, dessa maneira, todo o DOM será carregado antes que o JavaScript seja aplicado. My jQuery Example Hello jQuery! You can place your jQuery at the end of the page too! //o script vai aqui

Se a versão hospedada pelo Google do include da jQuery estiver sendo usada, em vez de incluir um caminho relativo, insira o caminho direto para a biblioteca fornecido pelo Google: My jQuery Example //o script vai aqui

ENTENDA O WRAPPER DA JQUERY Antes de começarmos a programar com jQuery, é necessário compreender o que é o wrapper da jQuery e como ele se aplica ao DOM. Um wrapper, na maioria das linguagens de programação, é algo que envolve (wrap) outra coisa para ampliar sua funcionalidade, geralmente um objeto. Para o compreendermos melhor, o wrapper da jQuery se anexa ao DOM usando seletores e permitindo que o DOM seja ampliado. A jQuery, na verdade, não oferece qualquer método novo, apenas usa métodos já existentes no JavaScript nativo e torna a interação com eles muito mais fácil.

31

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT A vantagem do wrapper é poder ampliar o DOM com muito menos código que o JavaScript nativo. Este código é um exemplo da declaração do seletor da jQuery: $.(selector)

A jQuery possui muitos métodos de eventos dentre os quais escolher, mas um muito importante é o método manipulador do evento document.ready(), executado apenas após o DOM ser completamente carregado. Em sua forma mais simples, um método não passa de uma maneira de descrever uma função, mas, em outras linguagens OOP (programação orientada a objeto), os métodos apresentam outras vantagem sem relação às funções. A vantagem por trás da jQuery é manipular o DOM; portanto, precisamos nos certificar de que o DOM está pronto antes que façamos qualquer coisa com ele. O método manipulador do evento document.ready() permite que coloquemos todo o código jQuery JavaScript dentro desse evento para nos certificarmos de que o código é executado quando o DOM estiver pronto. Esse evento é semelhante ao evento onLoad do JavaScript, porém, o método manipulador do evento document.ready() é acionado apenas após o carregamento do DOM. Este código é um exemplo da configuração do método do manipulador de eventos document ready: html> My jQuery Example $(document).ready(function() { //o script vai aqui });

Devemos adquirir o hábito de configurar o manipulador do evento document.ready() e qualquer código jQuery personalizado em um arquivo externo. Esse é o método que prefiro, pois mantém todo o código separado em seu próprio include JavaScript. Geralmente chamo meu arquivo externo com todo meu código jQuery, jquery.function.js, e sempre me certifico de incluí-lo por último, após os arquivos principais da biblioteca jQuery. Também podemos usar uma versão abreviada do método manipulador do evento document.ready() quando estivermos tentando otimizar o tamanho do arquivo de

funções da jQuery para aumentar o desempenho, por exemplo, de um aplicativo móvel. A versão abreviada é configurada assim: My jQuery Example

32

CAPÍTULO 2: COMEÇANDO A USAR JQUERY $(function() { //o script vai aqui });

Para explicar o wrapper da jQuery, preciso mostrar passo a passo como configurar a declaração document. ready(). O primeiro passo envolve a configuração de um seletor antecedido pelo cifrão ($), que é o alias para o acesso à própria jQuery. Passamos o seletor entre os dois parênteses; neste caso, estou passando o seletor do documento para o DOM. O alias e o seletor compõem o wrapper da jQuery. $(document)

O evento ready é anexado após a declaração do seletor e é intercambiável com os outros eventos. .ready()

A função é uma parte que contém o código, que é aplicado após o DOM ser carregado e estar pronto, mesmo sem as imagens. A função é colocada entre os parênteses do evento ready, pois estamos passando a função que desejamos que seja executada no evento ready: ready(function() { //o código jQuery vai aqui alert("The DOM is fully loaded and ready"); });

A função window.load é muito semelhante à função document.ready(), exceto por aguardar que todas as imagens na página sejam carregadas antes de executar qualquer código jQuery: $(window).load { //o código jQuery vai aqui alert("The window has been loaded"); });

33

PARTE I: INTRODUÇÃO A JQUERY E A JAVASCRIPT EXECUTE OS CÓDIGOS FORA DO MANIPULADOR DOCUMENT READY A maior parte dos códigos específicos da jQuery precisa ser configurada dentro de um método do manipulador do evento document.ready(). Mas o JavaScript nativo, como variáveis, matrizes, etc., pode ser configurado fora do manipulador do evento document ready, pois ele não precisa aguardar até que o DOM esteja pronto e é ocultado do DOM, uma vez que é específico do próprio script. Este código de exemplo define um script que depende do carregamento do DOM antes que o novo conteúdo seja adicionado. Há três variáveis sendo definidas neste script, duas delas fora do evento document.ready() e uma dentro do evento document.ready(), pois ele precisa de acesso à configuração do loop for dentro dele. var numShows = 10; var numTickets = 100; $(document).ready(function() { for(i=0; i < numTickets; i++) { var numTotal = i + 1; $('.container').append("There are " + numTotal + " tickets available"); } });

EVITE CONFLITOS COM OUTRAS BIBLIOTECAS Se não tomarmos precauções durante a criação de código jQuery, conflitos poderão ocorrer com outras bibliotecas JavaScript. A maioria dos conflitos ocorre com o uso do alias $, também compartilhado pelo Prototype como um alias. Precisamos executar dois passos para eliminar os conflitos com outras bibliotecas: 1. Adicionar a função noConflict no fim da biblioteca jQuery. A função noConflict libera toda a dependência da jQuery do alias $ para as outras bibliotecas que também o utilizam. $.noConflict();

2. Alterar todas as referências do alias $ para o alias jQuery, como demonstrado no exemplo a seguir. Modifique: $(document).ready() { //o código vai aqui

34

CAPÍTULO 2: COMEÇANDO A USAR JQUERY });

To this: jQuery(document).ready() { //o código vai aqui });

Também podemos definir nosso próprio alias se não quisermos usar o alias da jQuery. Isso é feito com a adição de uma linha de JavaScript para definir nosso próprio alias. No exemplo a seguir, configurei um novo alias como $alien, em vez de apenas $. É fácil! var $alien = jQuery; $alien(document).ready() { //o código vai aqui });

USE O JAVASCRIPT COM A JQUERY Variáveis são uma ótima maneira de armazenar tipos de informações, em especial na criação do JavaScript. Uso variáveis com jQuery com frequência. Faço isso nos exemplos apresentados posteriormente neste livro. Empregar variáveis na programação jQuery não é diferente de usá-las com JavaScript. Podemos definir variáveis e chamá-las dentro do wrapper da jQuery, pois basicamente tudo é JavaScript. A vantagem da jQuery é que ela é JavaScript, por isso, se tivermos conhecimento prévio de JavaScript, podemos aplicar diretamente esse conhecimento à jQuery. Não é preciso se preocupar em aprender novos métodos, convenções e sintaxe, pois a maior parte da jQuery se baseia na funcionalidade do JavaScript, mas a sintaxe é muito mais fácil de entender. Você pode estar se perguntando: se a jQuery é JavaScript, por que não aprender JavaScript? A resposta é que a jQuery usa tudo que o JavaScript usa, mas facilita a implementação. A máxima da jQuery: “Escreva menos, faça mais”, é definitivamente verdade. Podemos pegar 20 linhas de JavaScript nativo e transformá-las em cinco linhas de jQuery sem precisar saber JavaScript. Para quem tem curiosidade sobre JavaScript, aprender jQuery pode ajudar a compreender a API do JavaScript. Como JavaScript pode ser difícil de entender, a jQuery facilita muito a vida dos Web designers para implementar recursos da API do JavaScript sem a necessidade de compreender todas as complexidades do JavaScript em si. A jQuery realmente abriu as portas para muitos Web designers, que antes tinham pouca experiência em programação para adicionar interatividade a seus sites. É um ótimo momento para utilizar a jQuery: o suporte e a comunidade que envolvem essa biblioteca está crescendo vertiginosamente.

35

II PARTE

II

SOBRE OS FUNDAMENTOS DA JQUERY Capítulo 3: Usando seletores, filtros e CSS: a base da jQuery Capítulo 4: Trabalhando com eventos Capítulo 5: Deixando seu site mais atraente com efeitos

3

3 CAPÍTULO

SMASHING JQUERY

USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY

OS SELETORES SÃO AS PEDRAS FUNDAMENTAIS da jQuery: tudo que fazemos com o DOM (modelo de objetos de documentos) na jQuery envolve o uso de um seletor, pois é preciso escolher quais elementos no DOM estão sendo selecionados e manipulados. A jQuery usa seletores CSS e XPATH comuns que a maioria dos Web designers e desenvolvedores Web já conhece, assim como alguns seletores jQuery personalizados, o que torna a jQuery flexível e fácil de aprender. Entender como os seletores funcionam é essencial para utilizar a jQuery e tudo que ela tem a oferecer. Quando os seletores não podem ajudar, os filtros proporcionam mais flexibilidade na

seleção de elementos de acordo com uma característica no DOM. Em geral, os filtros são usados com os seletores para proporcionar um nível maior de controle na seleção de elementos específicos, de acordo com sua posição em um grupo de elementos, sua visibilidade, ou a característica de uma inserção em um formulário, como marcada ou desativada. A jQuery também oferece um grupo de métodos para a adição e remoção de classes CSS, e também a aplicação de estilo diretamente a um elemento do DOM. Neste capítulo, analiso o uso de seletores, filtros e CSS com a jQuery por meio de vários tutoriais baseados em situações reais, que proporcionarão um ótimo entendimento desses métodos básicos.

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY

USE OS ELEMENTOS DO DOM COM SELETORES JQUERY Os seletores, um recurso essencial da biblioteca jQuery, são auxiliados pelo mecanismo seletor Sizzle da jQuery. O Sizzle pode ser usado com outras linguagens, mas sua real capacidade é melhor utilizada com todos os outros métodos da jQuery. Sua sintaxe é facilmente entendida por Web designers com conhecimentos sólidos de CSS e HTML. O mecanismo seletor Sizzle da jQuery é um código JavaScript criado para a manipulação de seletores na jQuery. Esses são seletores CSS e XPATH comuns com a adição de alguns seletores personalizados. O seletor da jQuery é uma expressão em string que classifica um único elemento ou um conjunto de elementos do DOM que será conhecido como o conjunto correspondente e estará pronto para ser utilizado na jQuery. O seletor sempre é declarado diretamente após o alias da jQuery ($). Após a seleção dos elementos do DOM e da aplicação dos métodos, o conjunto correspondente se transforma em um objeto da jQuery. Os objetos da jQuery permitem a adição de vários tipos diferentes de métodos, incluindo eventos, efeitos, travessias, manipulação etc. Um objeto da jQuery é algo com o qual você poderá ou não ter que lidar durante a criação do código jQuery, mas ele estará sempre lá, e é importante ter consciência dele. O exemplo de código a seguir mostra como um seletor é colocado na jQuery: $(selector).method().

Com um pouco de prática, usar os seletores na jQuery será natural, pois muitos dos seletores são os mesmos utilizados anteriormente com a CSS. Um seletor é uma maneira de navegar no DOM e, em sua forma mais básica, permite a seleção de um elemento. Sua sintaxe é idêntica à sintaxe do seletor CSS, seja ele um ID, classe, tag ou atributo. Os seletores são um componente essencial em qualquer declaração da jQuery que vier a ser criada. Quando utilizamos um seletor, a declaração criada analisa automaticamente todos os nós no DOM procurando por elementos especificados no seletor. O resultado dessa análise é conhecido como conjunto correspondente. Web designers proficientes em CSS e com sólidos conhecimentos do DOM podem aprender a utilizar os seletores rapidamente. Estas são as partes do JavaScript que compõem um seletor: O alias da jQuery (jQuery ou $). Os elementos do DOM, que selecionamos, entre aspas dentro de dois parênteses. Tudo que vier após o seletor é o método da jQuery que está sendo aplicado. O método da

jQuery pode fazer qualquer coisa, desde adicionar CSS até animar elementos na página. As funções, também conhecidas como métodos, podem realizar ações específicas e aceitar argumentos entre parênteses. A Tabela 3.1 mostra a anatomia da declaração do seletor da jQuery:

40

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY Tabela 3.1 A anatomia de uma declaração da jQuery Alias da jQuery

Seletor

Método ou ação da jQuery

$ ou jQuery

(‘div’)

.css(‘border’,’1px solid #333’);

SELECIONE OS ELEMENTOS DE PÁGINA COM OS SELETORES CSS O JavaScript possui funções nativas que podem selecionar elementos por ID e tag. A desvantagem dessas funções é que precisamos usar uma função diferente para cada um dos três tipos de elementos. Além do mais, isso cria repetição e excesso de código, que pode acabar se tornando um pesadelo para gerenciar. Quando utilizamos seletores na jQuery, um seletor pode manipular vários tipos de elementos, de maneira a facilitar a criação de códigos claros e gerenciáveis. Todos os exemplos deste livro mostram o resultado no navegador, assim como no Firebug, portanto, podemos ver o que está sendo adicionado ou alterado no DOM. (Consulte o Capítulo 2 para obter detalhes sobre a instalação e utilização do Firebug.) Quando visualizamos o código-fonte, não vemos o código representado. O código representado é o código real criado após o navegador ser carregado e o JavaScript tiver sido acionado, o que, se estivermos manipulando o DOM, pode se alterar de forma bem clara. O Firebug mostra o código representado, podendo até mesmo mostrar o código enquanto ele é alterado, por isso, é a forma perfeita para testarmos o JavaScript e a jQuery. A lista a seguir ilustra os seletores CSS mais comuns da jQuery, que explico mais detalhadamente com o código e o navegador no decorrer deste capítulo: $('*') $('p') $('.class') $('#id') $('.parent ul li')

Neste capítulo, aplico a CSS a elementos usando o método .css() da jQuery. O método CSS na jQuery funciona permitindo que passemos qualquer propriedade da CSS ao método CSS que é então aplicada ao elemento encontrado pelo seletor. A CSS é adicionada ao elemento com um estilo em linha após o DOM ser carregado e estar pronto. Em cada exemplo, não estamos limitados à CSS que estou aplicando. Apenas mostro situações individuais de problemas que podemos encontrar e como resolvê-los rapidamente usando seletores.

Selecione elementos usando o seletor (*) curinga Se precisarmos selecionar todos os elementos no DOM ou dentro de outro elemento, utilizamos o seletor (*) curinga. O curinga fica entre aspas, dentro dos parênteses diretamente após o alias.

41

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY No exemplo de HTML a seguir, selecionei todos os elementos da página com o seletor curinga e adicionei uma borda CSS para cada elemento. Para adicionar uma borda CSS, utilizei o método .css('border','1px solid #333');. A Figura 3-1 mostra o resultado do script de exemplo com a guia do Firebug aberta. Nele podemos observar como a jQuery adicionou bordas inline a cada elemento na página. $(document).ready(function() { $('*').css('border','1px solid #333'); }); Hello jQuery.

Figura 3-1: O resultado no navegador da adição de uma borda a todos os elementos na página usando o seletor curinga

42

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY Selecione elementos usando a tag HTML Depois de entender como funciona o seletor curinga, percebemos que os outros seletores CSS funcionam da mesma maneira. Podemos selecionar qualquer elemento dentro do DOM usando o seletor de elementos. Para isso, é preciso passar um nome de tag para o seletor presente na página. Esse seletor usa o método nativo do JavaScript getElementsByTagName(). A função nativa do JavaScript getElementsByTagName()recupera todos os elementos pelo nome de sua tag. O código é definido desta maneira: document.getElementsByTagName('h1');

No exemplo de HTML a seguir, preciso definir a propriedade font-family das minhas tags h1. Posso fazer isso alterando a CSS, mas não quero que as tags h1 nas outras páginas sejam afetadas. Em vez disso, podemos usar o seletor de tags com o método css() para alterar a propriedade font-family para as tags H1 apenas nesta página. Utilizo o método CSS para aplicar a propriedade font-family apenas à tag H1 que selecionei. A Figura 3-2 mostra o resultado do código a seguir no navegador com a guia do Firebug aberta. Este exemplo demonstra como o DOM é alterado pela propriedade font-family adicionada à tag h1 após o carregamento do DOM. $(document).ready(function() { $('h1').css('font-family','arial,verdana'); }); Hello jQuery.

Selecione elementos usando o seletor de ID Podemos selecionar qualquer ID dentro da página usando o seletor de ID ('#'). O seletor de ID usa o método nativo do JavaScript: getElementsById(). Para selecionar um elemento usando a função nativa do JavaScript getElementById(), o código é definido da seguinte maneira: document.getElementById('sidebar');

43

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY

Figura 3-2: O seletor de elementos em funcionamento

O seletor de ID sempre inclui o símbolo # (sustenido) ao fazer referência ao ID no seletor. Sem esse símbolo, o seletor não funcionará corretamente. O seletor de ID retorna apenas a ID correspondente. Lembre-se de que com a CSS não é possível que dois elementos em uma página compartilhem o mesmo ID. No exemplo de HTML a seguir, quero ocultar div #sidebar usando a CSS. Utilizo um seletor jQuery para selecionar o ID #sidebar no documento. ID fica entre aspas, dentro de parênteses diretamente após o alias. Para poder ocultar a div, utilizo o método CSS e aplico o seguinte: 'display', 'none'. A Figura 3-3 mostra no navegador o resultado da utilização do seletor de ID para ocultar uma div com o ID '#sidebar': $(document).ready(function() { $('#sidebar').css('display','none'); }); My sidebar Navigation

44

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY

Figura 3-3: O resultado no navegador após a seleção do ID #sidebar

Selecione elementos por classe De maneira semelhante à seleção por ID, também podemos selecionar elementos na página por classe (.class). Esse seletor usa o método nativo do JavaScript getElementsByClassName(). O seletor de classes seleciona todos os elementos da classe desejada no DOM. Se quisermos selecionar uma classe usando o método nativo do JavaScript getElementsByClassName(), o código é definido desta maneira: document.getElementsByClassName('product-image');

Usando a jQuery, podemos obter o mesmo resultado que o método getElementsByClassName(), mas com menos código. No exemplo de HTML a seguir, desejo adicionar uma borda cinza de 1 pixel, incluir 5 pixels de preenchimento e definir uma largura de 150 pixels. O método CSS permite que várias propriedades CSS sejam passadas com a utilização do literal de um objeto (uma lista com itens separados por vírgula composta pelos pares de nomes e valores que ajudam a manter o código organizado), o que auxilia a preservar a declaração clara e simples. Utilizo um seletor de classes para selecionar todas a instâncias da classe (.telephone) na página. Passo três conjuntos de propriedades CSS ao método CSS, portanto, também preciso colocar essas propriedades entre chaves {}. A Figura 3-4 mostra o resultado no navegador após o seletor de classes ter sido chamado. 45

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY $(document).ready(function() { $('.telephone').css({'padding':'5px','border':'1px solid #ccc','width':'150px'}); }); Hello jQuery

Figura 3-4: O resultado no navegador após a seleção dos oito elementos com o nome de classe telefone

46

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY Selecione um ou vários elementos com várias classes Em alguns casos, várias classes podem ter sido aplicadas ao mesmo elemento e podemos desejar selecionar apenas os elementos com essas classes aplicadas. O seletor de classes aceita várias classes. No exemplo a seguir, há seis elementos com várias classes. Dois elementos ocultos com a CSS com as classes "book" e "inactive" aplicadas, com a utilização do seletor de classes da jQuery e o método CSS. A Figura 3-5 mostra o resultado no navegador após a chamada de vários elementos no seletor. $(document).ready(function() { $('.book.inactive').css('display','none'); }); Travel Guide to NYC Travel Guide to San Francisco Travel Guide to Seattle Travel Guide to Miami Travel Guide to Palo Alto

Selecione elementos de página usando os seletores pai-filho Os seletores pai-filho (parent-child) são uma maneira útil para selecionar elementos dentro da página quando os elementos tag, CSS e ID não puderem ser usados. A propriedade CSS parent-child está disponível na CSS para todos os navegadores mais populares, exceto o IE6. Surpreso? Eu não, mas a vantagem de usar esse seletor CSS com a jQuery é que o IE6 é suportado. O seletor pai-filho pode ser muito útil no trabalho com elementos aninhados, como menus de navegação.

47

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY

Figura 3-5: O resultado no navegador após a seleção dos dois elementos com o nome de classe book e inactive

O seletor pai-filho permite a seleção de descendentes diretos para um determinado elemento pai com o operador >. Consideremos o seguinte exemplo de jQuery. Esta declaração seleciona todos os elementos do parágrafo (p) encontrados dentro do corpo, desde que eles sejam filhos (ou seja, estejam aninhados dentro da tag body): $('body > p')

No entanto, caso tivéssemos uma situação em que tentássemos selecionar um elemento de um parágrafo específico dentro de um elemento div específico, teríamos que ser mais específicos usando os nomes de classes ou seu ID para selecionar o elemento descendente correto. No exemplo de HTML a seguir, preciso selecionar as tags p dentro dos elementos que têm a classe (.inactive) e anexar “Sorry, this book is sold out” ao fim da tag p com a cor vermelha. Utilizo o encadeamento para adicionar vários métodos a uma declaração. A Figura 3-6 mostra o resultado no navegador após a declaração do seletor de classes ter sido aplicada. $(document).ready(function() { $('.book.inactive > p').css('display','none');

48

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY $('.book.inactive').append('Sorry this book is sold out!').css('color','red'); }); Travel Guide to NYC Travel Guide to San Francisco Travel Guide to Seattle Travel Guide to Miami Travel Guide to Palo Alto

Figura 3-6: O resultado no navegador após a declaração do seletor ter sido aplicada

49

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY Selecione elementos de página usando os seletores descendentes Os seletores pai-filho funcionam apenas se o filho estiver diretamente relacionado ao pai, como as tags que ficam entre duas tags . Caso nos deparemos com uma situação em que tentamos selecionar um elemento dois ou três níveis abaixo do pai, é necessário usar os seletores de descendentes. A diferença entre o seletor pai-filho e o de descendentes é a utilização do operador >. Se o operador não for incluído, o seletor identifica os elementos descendentes além do elemento filho. No exemplo de HTML a seguir, selecionei a tag que está aninhada nas tags . Quando encontro um conjunto correspondente, aplico uma borda CSS a ele. A Figura 3-7 mostra o resultado no navegador após o seletor de classes ter sido chamado.

Figura 3-7: O resultado no navegador após a seleção dos elementos descendentes $(document).ready(function() { $('ul li').css('border','3px dashed blue'); }); Link 1

50

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY Link 2 Sub Link 1 Sub Link 2

Selecione vários elementos Podemos nos deparar com uma situação em que precisamos selecionar vários tipos de elementos, que poderiam ser uma combinação de classes, IDs, tags HTML, assim como relações entre pai e filho. Com o seletor jQuery, podemos adicionar vários elementos criando apenas uma lista com itens separados por vírgulas. No exemplo de HTML a seguir, preciso selecionar cinco classes individuais e dois IDs individuais usando uma lista com itens separados por vírgulas. Depois, preciso aplicar uma cor de fundo cinza a todos eles usando o método CSS e, por fim, com o último ID, aplicar a cor de fundo à tag de parágrafo dentro do elemento #footer. A Figura 3-8 mostra o resultado no navegador após o seletor de classes ter sido chamado. $(document).ready(function() { $('.book-one, .book-two, .book-three, .book-four, .book-five, #header, #footer p').css('background','#ccc'); }); Book Club Travel Guide to NYC Travel Guide to San Francisco Travel Guide to Seattle Travel Guide to Miami Travel Guide to Palo Alto

51

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY Copyright 2010

Figura 3-8: O resultado no navegador após a seleção de vários elementos

FILTRE ELEMENTOS DO DOM COM OS FILTROS DE SELETOR JQUERY Os filtros permitem o refinamento dos elementos que selecionamos. Eles são muito úteis quando desejamos especificar apenas um, ou alguns, elementos dentro do DOM. Caso tenhamos um documento HTML estático, é fácil ajustar o HTML. Mas, em casos em que o DOM é alterado com cada solicitação ou carregamento de página, é necessário usar uma linguagem front-end dinâmica, como JavaScript, para adicionar formatação em tempo real. Um filtro é definido por dois-pontos seguido pelo filtro em si: :filter.

APLIQUE DEFINIÇÕES DE FILTRO BÁSICAS A partir da versão 1.4.2, a jQuery passou a conter 20 filtros diferentes. Apresento exemplos reais daqueles mais comuns, mas você pode consultar a seguinte tabela para conhecer a lista completa de filtros disponíveis na jQuery.

52

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY Os filtros listados na Tabela 3.2 com um sim na coluna do seletor CSS3 são pseudoclasses e fazem parte da especificação da CSS3. Atualmente utilizando a CSS, essas propriedades são suportadas em sua totalidade apenas em navegadores mais novos, como o Firefox 3, o Opera 10 e o Safari 3, e suas versões posteriores. Você pode consultar o site www.css3.info para obter uma lista completa dos navegadores compatíveis com as novas propriedades da CSS3. A jQuery suporta todas essas propriedades da CSS3 quando são usadas como filtros com os seletores.

Tabela 3.2 Nomes e funções de todos os filtros disponíveis Nome do filtro

Função do filtro

:even e :odd

Procura itens pares e ímpares de acordo com o índice

:header

Procura elementos que são tags H1, H2, H3,

Seletor CSS3

H4... :not

Procura elementos que não são este seletor

:eq(index)

Procura um elemento que corresponde a este índice

:gt(index)

Procura elementos maiores que este índice

:lt(index)

Procura elementos menores que este índice

:first-child, :last-child, :only-child,

Procura elementos que são primeiro filho, último filho, filho único ou

:nth-child()

podemos especificar qual filho procurar com nth-child(1)

:has(p)

Procura elementos que possuem outros elementos

:contains(‘this is my text’)

Procura um elemento que contém texto

:empty

Procura elementos vazios

:parent

Procura elementos pais

:hidden

Procura elementos ocultos

:visible

Procura elementos visíveis

:animated

Procura elementos no processo de animação

Sim

Sim

Sim

CRIE TABELAS COM EFEITO ZEBRA USANDO OS FILTROS EVEN E ODD O efeito zebra é uma prática comum para tornar as linhas de uma tabela mais fáceis de ler adicionando uma cor de fundo cinza mais clara para cada linha par ou ímpar. Os filtros :even e :odd na jQuery facilitam muito a adição desse tipo de estilo às tabelas. Esse filtro não se destina somente ao efeito zebra, as possibilidades de aplicação desse filtro são praticamente ilimitadas, mas o efeito zebra é um ótimo exemplo. A Figura 3-9 mostra o resultado no navegador após a página ter sido carregada com uma cor de fundo aplicada a todas as linhas pares.

53

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY

Figura 3-9: O resultado no navegador após o carregamento da página com uma cor de fundo aplicada às linhas pares $(document).ready(function() { $('tr:even').css('background','#dedede'); $('tr:odd').css('background','#ffffff'); }); Product Description Price Paper Towels The most absorbent paper towels. $18.99 Paper Napkins Perfect for your outdoor gathering. $16.99

54

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY Paper Plates The best value. $5.99 Plastic Forks The essential picnic accessory. $2.99

APLIQUE ESTILO AO PRIMEIRO E AO ÚLTIMO ITEM EM UMA LISTA OU CONJUNTO DE ELEMENTOS Se quisermos filtrar apenas o primeiro e o último item em um conjunto de elementos no DOM, poderíamos usar o filtro :first e :last aplicado ao seletor. Esse filtro retorna apenas um resultado e se baseia no índice dentro do conjunto de seletores que escolhemos. No exemplo de HTML a seguir, quero adicionar uma borda inferior a todos os itens da lista, exceto ao primeiro e ao último item. Posso fazer isso de duas maneiras: adicionando uma classe .last à HTML apenas no último elemento ou posso filtrar o seletor ul li com os filtros :first e :last. A Figura 3-10 mostra o resultado no navegador após os filtros first e last terem sido aplicados à lista. ul {width:200px;font-family:arial;} ul li {border-bottom:1px solid #333;} ul li a {text-decoration:none;} $(document).ready(function() { $('ul li:first').css('border','none'); $('ul li:last').css('border','none'); }); My sidebar Home About Us Customer Service

55

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY Contact Us Coupons

Figura 3-10: O resultado no navegador após os filtros first e last serem aplicados à lista

FILTRE ELEMENTOS QUE CONTÊM UM ELEMENTO ESPECÍFICO Talvez seja necessário adicionar um filtro que procura apenas elementos com um elemento específico dentro deles. Nesses casos, podemos usar o filtro has(). O elemento filho contido não precisa ser um filho direto do contêiner pai: ele poderia ser um descendente. No exemplo de HTML a seguir, desejo adicionar um filtro que aumenta o tamanho da fonte apenas se as tags p forem encontradas dentro de divs com o nome de classe (.content). A Figura 3-11 mostra o resultado no navegador da tag p contida no elemento especificado. $(document).ready(function() {

56

CAPÍTULO 3: USANDO SELETORES, FILTROS E CSS: A BASE DA JQUERY $('.content:has(p)').css('font-size','18px'); }); This is my content This is alternate content.

Figura 3-11: O resultado do navegador da tag p contida no elemento especificado

FILTRE ELEMENTOS QUE NÃO CONTÊM ELEMENTOS OU TEXTO Procurar elementos vazios no DOM pode ser útil. Se dispusermos de um elemento vazio na página, podemos usar o filtro :empty para encontrá-lo. No exemplo de HTML a seguir, quero ocultar a div de erro se ela estiver vazia. Para isso, selecionar a classe .error e adicionar o filtro :empty. Se a mensagem de erro tiver conteúdo, ela continuará a ser exibida; caso contrário, a CSS display:none é aplicada a ela. A Figura 3-12 mostra o resultado no navegador quando o seletor encontra um elemento vazio.

57

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY $(document).ready(function() { $('.error:empty)').css('display','none'); }); This is my error message This is my content This is alternate content. o.numShown) { jQuery(shLink).insertBefore(obj); } });

6. Crie outro loop each que será atribuído a pList. Esse loop percorre todos os filhos do conjunto correspondente. return this.each(function() { var o = options;

280

CAPÍTULO 10: CRIANDO E USANDO PLUG-INS JQUERY var obj = $(this); // Determine o comprimento dos itens aqui e calcule o número oculto var pLength = obj.children().length; var numHidden = pLength - o.numShown; var pList = obj.children(); // Set up Show/Hide Link var shLink = "" + o.showText + ""; if (pLength > o.numShown) { jQuery(shLink).insertBefore(obj); } pList.each(function(index){ }); });

7. Dentro da função each que acabamos de criar, adicione uma declaração condicional if/ else. Primeiro testamos se o índice é menor que ( o.numShown) { jQuery(shLink).insertBefore(obj); } pList.each(function(index){ if (index < o.numShown) { jQuery(pList[index]).show(); } else { jQuery(pList[index]).hide(); jQuery(pList[index]).addClass('hidden'); } }); });

8. Configure uma função manipuladora de cliques que usa o manipulador de eventos live para vincular o evento click à tag anchor a.view. Adicione um return false para evitar que o comportamento padrão do clique ocorra. Adicione também uma declaração que seleciona todos os elementos com a classe .hidden e ativa/desativa sua exibição de show para hide e vice-versa. 281

PARTE IV: EXPLORANDO A JQUERY AVANÇADA return this.each(function() { var o = options; var obj = $(this); // Determine o comprimento dos itens aqui e calcule o número oculto var pLength = obj.children().length; var numHidden = pLength - o.numShown; var pList = obj.children(); // Configure Show/Hide Link var shLink = "" + o.showText + ""; if (pLength > o.numShown) { jQuery(shLink).insertBefore(obj); } pList.each(function(index){ if (index < o.numShown) { //alerta('teste'); jQuery(pList[index]).show(); } else { jQuery(pList[index]).hide(); jQuery(pList[index]).addClass('hidden'); } }); // Aqui é onde eu ativo/desativo o texto jQuery("a.view").live("click", function(e){ jQuery('.hidden').toggle(); return false; }); });

9. O passo final para a configuração do plug-in envolve a adição de uma declaração condicional que ativa/desativa o texto show/hide dentro da tag anchor. Use a declaração if para testar se o link a.view contém showText. Se contiver, quando for clicado, ele se alterará para o texto oculto. A condição else faz o contrário. return this.each(function() { var o = options; var obj = $(this); // Determine o comprimento dos itens aqui e calcule o número oculto var pLength = obj.children().length; var numHidden = pLength - o.numShown; var pList = obj.children(); // Configure Show/Hide Link var shLink = "" + o.showText + ""; if (pLength > o.numShown) { jQuery(shLink).insertBefore(obj); } pList.each(function(index){ if (index < o.numShown) { //alerta('teste');

282

CAPÍTULO 10: CRIANDO E USANDO PLUG-INS JQUERY jQuery(pList[index]).show(); } else { jQuery(pList[index]).hide(); jQuery(pList[index]).addClass('hidden'); } }); // Aqui é onde eu ativo/desativo o texto jQuery("a.view").live("click", function(e){ if (jQuery(this).text()==o.showText) { jQuery(this).text(o.hideText); } else { jQuery(this).text(o.showText); } jQuery('.hidden').toggle(); return false; }); });

Aqui está o código completo do plug-in jQuery para jquery.showhide.plugin.js: (function($){ jQuery.fn.showhidePlugin= function(options) { //Defina os valores padrão, use vírgula para separar as configurações var defaults = { numShown: 10, showText : 'Show More Links', hideText : 'Hide Links' } var options =

$.extend(defaults, options);

return this.each(function() { var o = options; var obj = $(this); // Determine o comprimento dos itens aqui e calcule o número oculto var pLength = obj.children().length; var numHidden = pLength - o.numShown; var pList = obj.children(); // Set up Show/Hide Link var shLink = "" + o.showText + ""; if (pLength > o.numShown) { jQuery(shLink).insertBefore(obj); } pList.each(function(index){ if (index < o.numShown) { jQuery(pList[index]).show();

283

PARTE IV: EXPLORANDO A JQUERY AVANÇADA } else { jQuery(pList[index]).hide(); jQuery(pList[index]).addClass('hidden'); } }); // Aqui é onde eu ativo/desativo o texto jQuery("a.view").live("click", function(e){ if (jQuery(this).text()==o.showText) { jQuery(this).text(o.hideText); } else { jQuery(this).text(o.showText); } jQuery('.hidden').toggle(); return false; }); }); } })(jQuery);

Agora o plug-in está completo. O próximo passo é testá-lo no site aplicando-o a um elemento. Para isso, utilizo um exemplo simples de lista não ordenada que contém mais de dez itens de lista. 1. Crie o HTML ao qual gostaria de aplicar o plug-in. Neste exemplo, utilizei uma lista não ordenada com a classe .big-list. Test 1. Test 2. Test 3. Test 4. Test 5. Test 6. Test 7. Test 8. Test 9. Test 432. Test 23. Test 0232. Test 2002. Test 541. Test 5432. Test 542. Test 542. Test 342. Test 452. Test 42.

284

CAPÍTULO 10: CRIANDO E USANDO PLUG-INS JQUERY Test Test Test Test Test Test

542. 4542. 432. 23. 0232. 2002.

2. Inclua o arquivo do plug-in diretamente após a biblioteca jQuery no início da página:

3. Selecione o elemento .big-list e anexe o método showhidePlugin() ao fim. Como não estamos passando opções para o método, as configurações padrão são aplicadas. $(".big-list").showhidePlugin();

4. Caso queira alterar a exibição do plug-in show/hide como mostrado na Figura 10-22, basta passar qualquer uma das configurações padrão que quiser alterar para a função showHidePlugin() dentro de um único objeto literal, em vez de passar cada um como um argumento separado. $(".big-list").showhidePlugin({ numShown:15, showText:"Show FTW" });

Figura 10-22: Demonstração de show-hide jQuery personalizado com opções

285

PARTE IV: EXPLORANDO A JQUERY AVANÇADA

COMO DISTRIBUIR UM PLUG-IN JQUERY Quando estivermos prontos para distribuir nosso plug-in, devemos nos lembrar de alguns aspectos. Segue uma breve lista de verificação útil para repassar antes de colocarmos nosso plug-in no mundo. Verifique se o plug-in funciona em todos os navegadores (IE6, IE7, IE8, Firefox,

Safari, Chrome e Opera) Crie uma documentação explicando as opções e como o plug-in funciona Adicione uma licença de código aberto do site da Open Source Initiative (www. opensource.org/licenses/index.html) se desejar distribuir o plug-in como código aberto

PREPARE O PLUG-IN JQUERY PARA DISTRIBUIÇÃO Certifique-se de que o código do plug-in está pronto para ambientes de produção. Para isso, podemos usar um serviço de minificação, como o minificador de Douglas Crockford JavaScript Packer (http:// jscompress.com/), mostrado na Figura 10-23, para compactar o código do plug-in. A minificação é uma técnica usada para remover caracteres desnecessários como comentários, quebras de linha, espaços em branco e tabulações, diminuindo os tempos de carregamento. Recomendo sempre que você ofereça as versões de desenvolvimento (descompactada) e de produção (minificada) do plug-in. Se o plug-in for pequeno (com menos de 4 KB descompactado), não é necessário minificá-lo, mas é sempre bom adquirir esse hábito.

Figura 10-23: Douglas Crockford criou um script minificador Algoritmo JSMin de Douglas Crockford | Método packer por Dean Edwards | Ferramenta/serviço de compressão de JavaScript criado por Vance Lucas.

286

CAPÍTULO 10: CRIANDO E USANDO PLUG-INS JQUERY ENVIE O PLUG-IN A OUTROS SITES Podemos enviar o plug-in para alguns sites a fim de ajudar a garantir seu sucesso e distribuição para a comunidade do código aberto. Se o plug-in estiver sendo distribuído como código aberto, recomendo que ele seja postado neste locais: Na seção Plug-in jQuery (http://plugins.jquery.com/): o site oficial da jQuery

oferece um wiki ao qual os desenvolvedores de plug-in podem enviar seus códigos. É possível enviar seu código pelo navegador ou usando um software de controle de versões, como o Subversion ou o Git. Nesse site é possível adicionar um nome e uma descrição, solucionar bugs, receber avaliações da comunidade, postar links para a documentação etc. Project Hosting on Google code (http://code.google.com/hosting/): a hospedagem de projetos do Google é muito semelhante à seção de plug-ins jQuery, oferecendo muitos dos mesmos benefícios. O principal deles, porém, é que é Google, e, por isso, obtém uma grande quantidade de tráfego.

287

11

DESENVOLVENDO PARA A WEB MÓVEL COM JQUERY

PODEMOS USAR JQUERY em aplicativos Web móveis como em qualquer outro site ou aplicativo Web. Os telefones celulares são limitados pela resolução de sua tela e pela largura da banda, fatores cruciais que não devem ser esquecidos durante a criação de aplicativos Web móveis. Eles podem ser puramente online, acessados por meio de um navegador ou dispositivo portátil, ou podem ainda ser aplicativos Web nativos.

Neste capítulo, explicarei a diferença entre um site móvel e um aplicativo móvel, discutirei as vantagens de CSS3 e HTML5 na Web móvel e orientarei sobre como configurar e instalar emuladores de navegadores móveis para Google Android e Apple Mobile. Por fim, mas não menos importante, mostro o que está por vir com a jQuery Mobile Alpha.

CAPÍTULO 11

SMASHING JQUERY

PARTE IV: EXPLORANDO A JQUERY AVANÇADA

CRIE PARA A WEB MÓVEL USANDO JQUERY Podemos tomar caminhos diferentes com os aplicativos Web móveis. O mercado de aplicativos Web móveis parece muito concentrado em duas plataformas: o iPhone/iPad da Apple e o Google Android. Quando criamos um site ou aplicativo Web compatível com vários navegadores móveis, vemos que é muito mais difícil que fazer a mesma coisa com o suporte para navegadores de desktop. Esse é um território ainda muito novo para os desenvolvedores jQuery, pois muitos dos telefones mais populares não apresentam um suporte satisfatório ao JavaScript. Os smartphones como o Apple iPhone e o Google Android apresentam recursos de navegação muito mais avançados, o que os torna as plataformas para as quais o desenvolvimento é mais fácil. Seguem algumas dicas sobre a criação de sites e aplicativos Web móveis: Defina seu público-alvo antes de começar

o desenvolvimento. Isso significa que será preciso determinar a quem se destina o aplicativo que está sendo criado. Qual plataforma você utilizará? Qual navegador eles usam? Será Wi-Fi ou uma rede de telefonia celular? Mantenha seu site ou aplicativo o mais simples possível. Os aparelhos portáteis possuem uma largura de banda e tamanhos de tela limitados.

Figura 11-1: O aplicativo móvel da Roanoke College usa jQuery

O site móvel da Roanoke College, mostrado na Figura 11-1, é um bom exemplo de um site projetado para o navegador do iPhone que usa jQuery para carregar o conteúdo usando o método load() do Ajax. Ele também usa um plug-in jQuery para mostrar uma apresentação de slides de imagens recentes da faculdade.

NAVEGADORES MÓVEIS De maneira semelhante à dos navegadores que ocorre no desktop há alguns anos entre o Internet Explorer, o Mozilla Firefox, o Apple Safari, o Opera e o recém-chegado Google Chrome, uma situação parecida está ocorrendo com os navegadores móveis. Eles oferecem diferentes vantagens, mas à medida que o mercado de aplicativos Web móveis avança, deveremos ver mais dos mesmos recursos disseminados entre os navegadores.

290

CAPÍTULO 11: DESENVOLVENDO PARA A WEB MÓVEL COM JQUERY Podemos criar um aplicativo navegador móvel sem precisar tocar em qualquer código de plataforma móvel nativo, apenas usando as ferramentas que já usamos: HTML, CSS e jQuery. As duas plataformas de smartphones líderes de mercado, o iOS do Apple iPhone e o Google Android, possuem dois navegadores móveis avançados inclusos; os recursos de HTML5, CSS3 e JavaScript compatíveis com esses aparelhos são mostrados na Tabela 11.1. Um aplicativo nativo (software criado para o sistema operacional do telefone em oposição a um site ou aplicativo Web que pode ser visualizado em um telefone) oferece ótimos benefícios, mas também podemos criar algo de valor para o navegador. Isso fará ainda mais sentido se já estivermos desenvolvendo um site para um navegador desktop. Tabela 11.1 Recursos de navegadores móveis HTML5

CSS3

JavaScript

Apple Safari 5

Sim

Sim

Sim

Google Android (Chrome)

Sim

Sim

Sim

Mozilla Firefox Mobile

Sim

Sim

Sim

Opera 10 Mobile

Não

Sim

Sim

Como podemos ver na tabela anterior, os navegadores móveis Safari, Chrome e Firefox possuem o melhor suporte aos novos recursos atualmente no mercado. O Safari e o Chrome precisam evoluir em relação ao Firefox, pois são os navegadores padrão para o iPhone e o Android. O Opera 10 Mobile está atualmente disponível como aplicativo que pode ser transferido nas plataformas Google Android e Apple iPhone. As duas plataformas são compatíveis com CSS3 e HTML5. Se você nunca tiver ouvido falar sobre esses avanços do Web design, prepare-se para se surpreender. A CSS3 e a HTML5 geralmente são mencionadas na mesma frase em função da natureza daquilo que desempenham, mas há várias diferenças entre essas duas tecnologias.

COMPREENDA CSS3 A CSS3 (também conhecida como Cascading Style Sheets 3, folhas de estilo em cascata 3) está em desenvolvimento desde dezembro de 2005. Ela está começando a se inserir em navegadores mais avançados, como Apple Safari 4, Google Chrome, Microsoft Internet Explorer 9, Opera 10 e Firefox 4. À medida que esses navegadores começam a ganhar uma fatia do mercado, a CSS3 passa a ser uma tendência. Podemos criar um site móvel que utiliza essas tecnologias usando as plataformas iPhone e Android. Assim, obteremos mais conhecimentos e aprimoramentos para nossas carreiras, pois ganharemos mais experiência no trabalho com as tecnologias mais recentes e avançadas, além de compreendermos melhor as limitações envolvidas no desenvolvimento de sites e aplicativos Web móveis. A CSS3 oferece as seguintes novas propriedades, entre outras (sobre as quais podemos encontrar mais informações em www.css3.info), como mostra a Figura 11-2. Essas propriedades são vantajosas para os aparelhos portáteis, pois historicamente muitas delas precisariam ser executadas com imagens, alternativas de CSS e JavaScript, o que aumentaria o tamanho das páginas, diminuindo, portanto, o desempenho. Usando as propriedades da CSS, o desempenho do site móvel não é comprometido. 291

PARTE IV: EXPLORANDO A JQUERY AVANÇADA

Figura 11-2: Um recurso da CSS3, CSS3.info © 2009 WEBFLUX. Todos os direitos reservados

Border Radius para criar cantos arredondados usando CSS, como mostra a Figura 11-3 Border Image para criar uma borda que usa uma imagem Box Shadow para criar efeitos de sombra usando CSS Multiple Backgrounds, que diminui a quantidade de código necessária para exibir

imagens de fundo diferentes e, em vez disso, declara uma propriedade de posicionamento de segundo plano múltiplo diferente na CSS New Color Options para o suporte a tipos de cores diferentes de RGB e hex, e dispor de opacidade verdadeira para criar transparência sem precisarmos de subterfúgios para o navegador Text Shadow para criar efeitos de sombras em elementos textuais Para obter uma lista completa das novas funções e recursos da CSS3, visite www.css3. info/preview/. A jQuery oferece suporte a seletores CSS3.

COMPREENDA HTML5 A HTML5 está sendo desenvolvida desde janeiro de 2008, e está apenas começando a se inserir nos navegadores modernos. Entre outros, a HTML5 oferece os seguintes recursos:

292

As vantagens desses recursos são imensas, mas a HTML5 oferece muitos outros recursos que não mencionei. O futuro do Web design com navegadores que suportam HTML5 e CSS3 é animador.

CAPÍTULO 11: DESENVOLVENDO PARA A WEB MÓVEL COM JQUERY Validação integrada de formulários Armazenamento local Tags header e footer para uma melhor organização do conteúdo dentro dos arquivos

HTML, em vez de dependermos dos elementos div Suporte a tags de áudio/vídeo integrado Tags canvas que criam gráficos e imagens em tempo real API de geolocalização

Figura 11-3: Os efeitos da propriedade Border Radius da CSS3 como mostrado no iPhone Emulator

CONFIGURAÇÃO PARA INICIAR O WEB DESIGN MÓVEL A parte mais difícil da criação para a Internet móvel é testar o trabalho e decidir a quais plataformas móveis oferecer suporte. Me concentrarei no suporte ao Google Android e ao Apple iPhone. Para facilitar essa tarefa, poderíamos comprar um iPhone e um telefone Android, mas isso seria muito caro e exigiria muito esforço. Em vez disso, as duas empresas, Apple e Google, criaram portais para desenvolvedores e oferecem um SDK (Software Development Kit, kit de desenvolvimento de software) que inclui um emulador. Um emulador é um aplicativo de desktop usado para simular os aparelhos portáteis iPhone e Android, no qual é possível testar tanto aplicativos comuns quanto aplicativos Web móveis, assim como sites.

293

PARTE IV: EXPLORANDO A JQUERY AVANÇADA Download do emulador de desktop do Safari para o Apple iPhone Podemos acessar o emulador do Apple Safari por meio de developer.apple.com/ devcenter/ios/index.action. Após nos registrarmos como desenvolvedores no portal de desenvolvedores da Apple.com, podemos fazer o download e instalar o emulador do iPhone. Após instalá-lo, podemos inicializá-lo e acessar qualquer site usando o Safari, como faríamos em um iPhone real, como ilustra a Figura 11-4.

Download do emulador de desktop do Google Android Podemos acessar o emulador do Google Android por meio de developer. android.com/ sdk/index.html. Após efetuarmos o download e instalarmos o emulador do Chrome para o Android, podemos abri-lo e acessar qualquer página usando o Chrome Mobile, como faríamos com um telefone Android real, como mostra a Figura 11-5. Figura 11-4: O emulador de desktop do Safari para o Apple iPhone

Figura 11-5: O emulador de desktop do Google Android

294

CAPÍTULO 11: DESENVOLVENDO PARA A WEB MÓVEL COM JQUERY USE O NAVEGADOR SAFARI MOBILE DO APPLE IPHONE Criar um site ou aplicativo Web para o navegador iPhone Safari é muito instigante, pois o navegador é extremamente avançado, como mostra a Figura 11-6. O Safari oferece suporte a CSS3 e HTML5, por isso minha empolgação. A desvantagem é que são poucos os navegadores, o Safari Mobile entre eles, que fornecem suporte a CSS3 e HTML5, assim, precisamos desenvolver um plano de quais recursos e dispositivos móveis receberão suporte. Antes da existência dos aplicativos nativos do iPhone, quando o primeiro Apple iPhone foi lançado em junho de 2007, a moda eram os aplicativos Web. A Apple oferecia suporte a eles adicionando uma seção no site do iPhone dedicada a demonstrar os aplicativos Web criados especificamente para o iPhone, como mostra a Figura 11-7. A Apple se esforçou muito para criar portais de desenvolvimento tanto para aplicativos nativos quanto para aplicativos Web do Safari. Antes de começarmos a desenvolver, recomendo que você visite o Safari Dev Center (veja a Figura 11-8). O Dev Center oferece vídeos, documentação técnica e códigos de exemplo que ajudam no início, quando estamos desenvolvendo aplicativos Web pela primeira vez para o Apple Safari do iPhone.

Figura 11-6: O navegador Safari para o Apple iPhone com um aplicativo Web móvel

USE O NAVEGADOR DO GOOGLE ANDROID Também é muito empolgante desenvolver aplicativos Web para o Google Chrome do Android (Figura 11-9) em função de seu suporte a novas tecnologias como CSS3 e HTML5. O Android também oferece suporte a jQuery, assim, praticamente qualquer trabalho feito para sites e aplicativos Web de desktop pode ser facilmente transferido para navegadores móveis. O Google dedicou muito esforço para a criação de um excelente portal para desenvolvedores. De maneira semelhante ao que ocorre com o iOS Dev Center, o Google oferece vídeos, documentação técnica, exemplos de código e fóruns de discussão. O centro de desenvolvimento do Google Android (Figura 11-10) (http://developer.android. com/index.html) oferece uma variedade de informações e deve definitivamente ser conferido antes que qualquer trabalho em um aplicativo Web seja iniciado.

295

PARTE IV: EXPLORANDO A JQUERY AVANÇADA

Figura 11-7: Demonstração dos aplicativos Web no Apple iPhone

Figura 11-8: Safari Dev Center

296

CAPÍTULO 11: DESENVOLVENDO PARA A WEB MÓVEL COM JQUERY

Figura 11-9: Navegador Chrome no Google Android

Figura 11-10: Google Android Dev Center Reproduzido de 2010© Google. www.android.com

APLIQUE A EXIBIÇÃO DE ACORDO COM O SMARTPHONE DO USUÁRIO Com redirecionamentos no servidor Web podemos detectar o tráfego entre desktop e o navegador móvel e mostrar um site adequado de acordo com sua plataforma. O código a seguir é um exemplo de como podemos configurar redirecionamentos móveis para diferentes plataformas móveis. Cada linha usa uma condição de reescrita para verificar se o agente do usuário é um iPhone, BlackBerry ou Android. Se uma correspondência for encontrada, o usuário é redirecionado a uma versão móvel do site adequado para o aparelho portátil. As reescritas usam uma expressão regular dentro de Mod_rewrite para definir diferentes regras para diferentes plataformas móveis. 297

PARTE IV: EXPLORANDO A JQUERY AVANÇADA Antes que possamos usar o código a seguir, precisamos nos certificar de que o servidor Web é Apache e o Mod_rewrite está ativado, embora haja alternativas, se nosso site estiver hospedado em um servidor Windows, que podem ser encontradas com uma pesquisa no Google. Solicite as informações corretas com seu serviço de hospedagem Web: RewriteCond RewriteRule RewriteCond RewriteRule RewriteCond RewriteRule

%{HTTP_USER_AGENT} ^.*iPhone.*$ ^(.*)$ http://iphone.seudominio.com [R=301] %{HTTP_USER_AGENT} ^.*BlackBerry.*$ ^(.*)$ http://bb.seudominio.com [R=301] %{HTTP_USER_AGENT} ^.*Android.*$ ^(.*)$ http://android.seudominio.com [R=301]

DESENVOLVA SITES E APLICATIVOS WEB MÓVEIS COM JQUERY Quando finalmente começarmos a desenvolver um site ou aplicativo Web para aparelhos portáteis, podemos integrar a jQuery como faríamos com um site ou aplicativo Web de desktop. Tudo que analisei nos capítulos anteriores até aqui funciona em um telefone portátil, desde que haja suporte ao JavaScript.

INTRODUÇÃO AO PREVIEW DO JQUERY MOBILE A equipe jQuery anunciou o lançamento do plug-in jQuery Mobile (http:// jquerymobile.com/) em versão alfa, como mostrado na Figura 11-1. As discussões e os boatos circulam na comunidade jQuery online há algum tempo. Haverá uma biblioteca separada para o jQuery Mobile? Sim, ela é um plug-in separado com 6 KB, que precisa ser incluído após a biblioteca jQuery. Quais plataformas serão suportadas? Apple iOS, Google Android, Blackberry, bada, Windows Phone, Symbian, Palm WebOS e MeeGo. Uma tabela completa da compatibilidade pode ser visualizada em http://jquerymobile.com/gbs/. Qual será o tamanho do download? O plug-in de desenvolvimento tem 86 KB e o plug-in minificado tem 12 KB. Como o jQuery Mobile foi lançado em versão alfa, ainda ocorrerão bugs e problemas, mas o plug-in promete muito em relação a seu nível de suporte e aos recursos que oferece.

FRAMEWORKS MOBILE Os frameworks mobile são semelhantes às bibliotecas JavaScript. Eles oferecem diversas APIs que interagem com o aparelho portátil para o qual estamos desenvolvendo. Atualmente, o Appcelerator Titanium e jQTouch são os únicos frameworks mobile que apresentam suporte à jQuery.

USE O APPCELERATOR TITANIUM MOBILE O Appcelerator é um framework de desenvolvimento para a criação de aplicativos móveis e de desktop lançado em dezembro de 2008 (Figura 11-2). Com ele, podemos criar aplicativos móveis para Apple iPhone, Apple iPad, Google Android e telefone BlackBerry usando HTML, CSS e JavaScript/jQuery.

298

CAPÍTULO 11: DESENVOLVENDO PARA A WEB MÓVEL COM JQUERY

Figura 11-11: Página inicial do jQuery Mobile © 2010 The jQuery Project

Figura 11-12: Site do Appcelerator Titanium Mobile © 2008–2010 Appcelerator Inc. Todos os direitos reservados. Appcelerator é uma marca registrada. www.appcelerator.com

299

PARTE IV: EXPLORANDO A JQUERY AVANÇADA O Appcelerator Titanium Mobile apresenta os seguintes recursos: Possibilidade de reprodução da interface nativa do usuário para a criação de um aplicativo

que parecerá familiar aos usuários Suporte multimídia para transferência on-line de fotos, música e streaming de vídeo no dispositivo real Armazenamento de arquivos local para acesso e armazenamento de arquivos no dispositivo, o que acelera o desempenho do aplicativo e oferece um aplicativo que pode ser usado sem uma conexão com a Internet Acesso à câmera de um aparelho portátil para a criação de aplicativos interativos Geolocalização para a criação de aplicativos que utilizam sua localização por meio de GPS no telefone celular a fim de oferecer uma experiência ampla ao usuário Suporte a HTML5 e CSS3 Você pode obter uma lista completa acessando www.appcelerator.com/products/ titanium-mobile-application-development/. No momento de publicação da edição em inglês desta obra, o Appcelerator era responsável por 4,9 mil aplicativos, e apresentava uma comunidade de apoio de mais de 75 mil desenvolvedores. Parte dos motivos por trás do sucesso do Appcelerator reside no fato de se tratar de um projeto de código aberto, o que possibilita a Web designers sem conhecimento de programação aprofundado criar aplicativos usando a tecnologia que empregam diariamente. O Appcelerator Titanium Mobile não se destina a iniciantes, mas o Appcelerator oferece suporte e possui uma ótima documentação online para ajudar a começar.

USE O PLUG-IN JQTOUCH O jQTouch é um plug-in jQuery de código aberto que possibilita a criação de aplicativos Web para iPhone que imitam a funcionalidade nativa com animações, navegação e temas (Figura 11-13). O jQTouch permite essa funcionalidade por meio de HTML, CSS e jQuery. O jQTouch foi recentemente comprado pela Sencha e foi inserido em um aplicativo chamado Sencha Touch (Figura 11-14), que é um framework de aplicativos móveis HTML5 que permite a criação de aplicativos Web para Apple iOS e Google Android.

300

CAPÍTULO 11: DESENVOLVENDO PARA A WEB MÓVEL COM JQUERY

Figura 11-13: Página inicial do jQTouch © 2009–2010 David Kaneda

Figura 11-14: Página inicial do Sencha Touch © 2006–2010 Sencha Inc.

301

12

PROCURANDO RECURSOS JQUERY

JQUERY TEM INÚMEROS sites oficiais e não oficiais, assim como recursos online dedicados a ela. O site oficial da jQuery oferece algumas utilidades como a API, uma área de download e um rastreador de bugs, mas fornece pouca coisa em outras áreas. Por outro lado, a comunidade jQuery é um recurso extremamente valioso e abrange os aspectos deixados de lado pelo site oficial, disponibilizando tutoriais, exemplos de código, plug-ins e muito mais. Neste capítulo, analiso todos os recursos oficiais e não oficiais disponíveis para os usuários de jQuery. O processo de aprendizado da jQuery não deve parar ao final da leitura deste livro.

A comunidade jQuery é muito grande e está em constante crescimento, diariamente. Ao fazermos uma pesquisa no Google sobre jQuery, mais de 100 milhões de resultados são apresentados, e esse número aumenta a cada dia. Todas as manhãs, leio o Popurls (popurls.com), que agrega o melhor de sites como Digg (www.digg.com), Delicious (www.delicious.com), RedDit (www. reddit.com), Twitter (www.twitter. com) e muitas outras comunidades sociais. Praticamente todos os dias vejo pelo menos uma notícia importante sobre a jQuery. Ela é uma tendência.

CAPÍTULO 12

SMASHING JQUERY

PARTE IV: EXPLORANDO A JQUERY AVANÇADA

ACOMPANHE O CRESCIMENTO DA JQUERY O crescimento da jQuery é impressionante; não faz muito tempo, ela era usada apenas por uma pequena rede de pessoas. Hoje, com o suporte de empresas como Google e Microsoft, entre outras, como mostra a Figura 12-1, o suporte à jQuery floresceu. Empresas que antes não queriam dar suporte à jQuery agora estão totalmente concentradas na biblioteca.

Figura 12-1: Sites que usam a jQuery

O sucesso da jQuery é fruto não somente de seu grande criador, John Resig, e sua equipe, mas também de uma imensa comunidade que apoia a jQuery. Incentivo todos os leitores deste livro a doar ao jQuery Project. Não precisa ser uma grande quantia, até mesmo US$ 5,00 fazem diferença. O jQuery Project não tem fins lucrativos, e a maioria das pessoas que trabalha no projeto é voluntária e não remunerada; seu objetivo é fazer algo grande, e não ganhar dinheiro. Quando pensamos sobre todo o tempo e esforço que a jQuery deve ter nos poupado, doar qualquer valor é uma ótima maneira de dizer obrigado. Para garantir que as pessoas responsáveis pela jQuery possam continuar a criar um ótimo produto, doe em http:// jquery.org/donate, mostrado na Figura 12-2.

304

CAPÍTULO 12: PROCURANDO RECURSOS JQUERY

Figura 12-2: Doe para o jQuery Project © 2010 The jQuery Project

USE O SITE DA JQUERY O site oficial da jQuery (jquery.com) apresenta uma ótima documentação sobre como usar a API, mas algumas outras áreas não apresentam a mesma praticidade e coerência. O site é organizado em cinco seções: Download Documentation Tutorials Bug Tracker Discussion

A seção de download oferece diferentes maneiras de acesso à biblioteca jQuery para o download e também por meio de CDN (rede de distribuição de conteúdo).

USE A DOCUMENTAÇÃO DA API DA JQUERY A equipe responsável pela jQuery dedicou muito tempo criando uma documentação online incrível, que está disponível a todos. O site contém informações sobre todos os métodos disponíveis nas versões atuais e anteriores da jQuery, como mostrado na Figura 12-3. O acesso à documentação da API da jQuery é feito por meio de api.jquery.com. 305

PARTE IV: EXPLORANDO A JQUERY AVANÇADA

Figura 12-3: A documentação da API da jQuery © 2010 The jQuery Project

A equipe da jQuery também implementou um recurso de pesquisa que facilita a busca daquilo que procuramos. Pessoalmente nunca encontrei problemas ao tentar procurar algo. O site da jQuery também é muito bem indexado nos mecanismos de pesquisa, que é outra maneira para encontrarmos informações sobre diferentes métodos dentro da API. Cada função ou método possui sua própria página completa com uma descrição, exemplos de código e uma seção de comentários. A Figura 12-4 mostra a página dedicada ao método css().

PROCURE TUTORIAIS DA JQUERY O site da jQuery também contém uma seção com tutoriais criados por membros da comunidade jQuery e postados pela equipe jQuery, como mostra a Figura 12-5. Há tutoriais sobre todas as partes da API, além de tutoriais criados em outros idiomas. Esse é um ótimo lugar para começar se você deseja aprender como fazer algo novo com jQuery. A seção de tutoriais da jQuery é acessada em docs.jquery.com/Tutorials.

PARTICIPE DE UMA CONFERÊNCIA OU MEETUP DA JQUERY A seção de Meetups da jQuery é acessada em http://meetups.jquery.com/. A versão 1.3.2 contém uma nova seção chamada Meetups, mostrada na Figura 12-6, auxiliada pelo site Meetup (www.meetup.com). Os meetups são clubes ou associações não oficiais para os entusiastas da jQuery. Eles são ótimas maneiras de fazer contatos e aprender mais sobre jQuery. Recomendo que você participe de um meetup da jQuery em um local próximo.

306

CAPÍTULO 12: PROCURANDO RECURSOS JQUERY

Figura 12-4: A documentação da API do método css() © 2010 The jQuery Project

Figura 12-5: Tutoriais da jQuery.com © 2010 The jQuery Project

307

PARTE IV: EXPLORANDO A JQUERY AVANÇADA

Figura 12-6: Os meetups da jQuery.com © 2010 The jQuery Project

Além dos meetups da jQuery organizados pela comunidade jQuery, os desenvolvedores responsáveis pela jQuery também marcam uma ou duas conferências sobre a jQuery por ano em locais como San Francisco e Boston. As conferências têm a participação de públicos pequenos e próximos entre 250 e 300 pessoas que se concentram somente em tópicos relacionados à jQuery, com ótimos oradores da equipe jQuery principal e da comunidade externa. As conferências da jQuery são uma ótima maneira de fazer contatos com outros profissionais que trabalham com jQuery diariamente em suas carreiras, assim como pessoas que estão começando a usar a jQuery. A equipe jQuery dedica uma seção de seu site a informações sobre a conferência, como mostrado na Figura 12-7. Algumas outras conferências foram iniciadas em apoio à comunidade profissional JavaScript, mas a conferência da jQuery é o único lugar com ênfase exclusiva em jQuery.

ENVIE BUGS PARA O RASTREADOR DE BUGS Quando estivermos trabalhando com a biblioteca jQuery, poderemos encontrar um bug na programação. A equipe jQuery criou um rastreador de bugs (Bug Tracker), mostrado na Figura 12-8, que permite aos usuários da biblioteca adicionar bugs ao rastreador para que eles possam ser corrigidos em versões seguintes. O rastreamento de bugs é muito importante, e, como a jQuery tem uma comunidade tão grande de usuários, uma maneira estruturada para o envio de bugs à equipe jQuery é crucial. A seção do rastreador de bugs da jQuery é acessada em http//bugs.jquery.com/newticket?redirectedfrom=.

308

CAPÍTULO 12: PROCURANDO RECURSOS JQUERY

Figura 12-7: O site para a conferência oficial da jQuery © 2010 The jQuery Project

Figura 12-8: O rastreador de bugs da jQuery.com © 2010 The jQuery Project

309

PARTE IV: EXPLORANDO A JQUERY AVANÇADA PARTICIPE DO FÓRUM DA JQUERY A equipe jQuery possui um fórum, mostrado na Figura 12-9, que pode ser usado para a postagem de qualquer assunto relacionado à jQuery, sejam elogios, problemas, soluções, exemplos de códigos etc. Ele é um ótimo lugar para que desenvolvedores de qualquer nível interajam com outros desenvolvedores. No momento da publicação deste livro, o fórum continha mais de 65.000 posts e 143.236 respostas, ou seja, é uma comunidade ativa e vibrante. É preciso configurar uma conta gratuita para poder participar. A seção do fórum da jQuery é acessada em http://forum.jquery.com/.

OUTROS RECURSOS DE WEB DESIGN E DESENVOLVIMENTO WEB Este sites, entre outros, são ótimos lugares para obter ajuda sobre jQuery e outros assuntos relacionados ao design: Learning jQuery (www.learningjquery.com) Stack Overflow (www.stackoverflow.com) jQuery for Designers (www.jqueryfordesigners.com) Visual jQuery (www.visualjquery.com) The 14 Days of jQuery (www.jquery14.com) Nettuts+ (www.nettuts.com) Ajaxian (www.ajaxian.com) Forrst (www.forrst.com) SitePoint (www.sitepoint.com)

Figura 12-9: O fórum da jQuery.com © 2010 The jQuery Project

310

ÍNDICE

ÍNDICE SÍMBOLOS E NÚMEROS * (seletor curinga), seleção de elementos com, 41–2 200 (código de resposta de erro do servidor), 220 301 (código de resposta de erro do servidor), 220 302 (código de resposta de erro do servidor), 220 400 (código de resposta de erro do servidor), 220 401 (código de resposta de erro do servidor), 220 403 (código de resposta de erro do servidor), 220 404 (código de resposta de erro do servidor), 220 500 (código de resposta de erro do servidor), 220

A tag âncora, 60 aceitar (opção de validação de plug-in), 208 accordion (jQuery UI), 256, 265–6

.addClass(), método, 69–70 adição atraso para criar animações sincronizadas, 113–5 classes para os elementos do DOM, 69–70 conteúdo com cliques do mouse, 82–4 cores de linhas com filtros, 157 CSS para os elementos do DOM, 69 e mensagens para formulários, 208–11 efeitos avançados nos menus suspensos, 141 efeitos hover para linhas, 157–60 elementos antes/depois da HTML no DOM, 66–7 HTML para o DOM, 64 jQuery UI para sites, 257–9 linhas de acordo com o valor do índice, 165 mensagens após as linhas nas tabelas, 162–4, 166 método after(), 66–7 regras de validação avançadas texto para os elementos no DOM, 64–5 validação para os formulários, 204–9 validação por e-mail dos formulários, 194–200 Ajax dados JSON (JavaScript Object Notation) criando widgets do Delicious, 237–43 criando widgets do Yelp, 241–52 recuperando dados JSON internos, 236–7 trabalhar com, 233–5 enviando formulários com a função GET e POST, 223–8 erros de manipulação do carregamento de páginas, 219–21 carregamento das seções, 221–3 carregando todo o conteúdo, 218–9 visão geral, 217–8 visão geral, 215–7 XML (eXtensible Markup Language, linguagem de marcação extensiva) análise de dados, 230–3 utilizando, 229–31 Ajax(), método. Ver Ajax

Ajaxian (Web site), 310 alertas, exibição de, 76–8 alteração da ordem de classificação padrão, 175–7 alternância de classes nos elementos do DOM, 70 ambiente de desenvolvimento, configuração, 20–8 análise de dados XML, 230–3 Android (Google), emulador de desktop, 294 Android (Google), navegador, 295–7 anexação de HTML antes de elementos, 65–6 anexando HTML antes de elementos, 65–6 animações adição de atraso para a criação de animação sincronizada, 113–5 adição de efeitos aos menus suspensos, 141 criar criando galerias de imagens, 119–27 plug-ing Easing da jQuery, 126–7 visão geral, 118–9 animate(), método. Ver animações :animated, filtro, 53 apenas letras, como experessão regular para a validação de formulários, 198–200 aperfeiçoamento de formulários com plug-ins de adição de regras/mensagens de validação avançadas, 208–11 adição de validação, 204–9 dicas de ferramentas, 202–3 plug-in Visualize, 202–9 qTip, 199–203 visão geral, 199–201 api (opção do plug-in qTip ), 202–3 aplicação de estilo a itens, 54–6 tabelas com CSS cores das linhas, 157 efeito hover, 157–60 visão geral, 156–7 aplicando definições de filtro básicas, 52–3 aplicativos móveis, desenvolvimento de, 298 Appcelerator Titanium Mobile, 298–300 append(), método, 65–6 appendKey (opção de configuração do Visualize), 177–8 appendTitle (opção de configuração do Visualize), 177–8 Apple iPhone Safari Mobile, navegador, 295 Apple iPhone Safari, emulador de desktop do, 294 Apple Safari compatibilidade com, 15 recursos de navegadores móveis, 291 ativação elementos de formulários, 182–4 Firebug, 23–4 atributos nomes e funções dos, 60–1

311

ÍNDICE seleção de elementos no DOM por adição, 64-9 clonagem, 64–9 endereço de site, 61–2 manipulação de HTML e CSS, 63 substituição, 64–9 strings de texto específicas, 62–3 utilizando as CSS, 69–70 visão geral, 60-1 Autocomplete (autropreenchimento) (jQuery UI), 256, 266–8

B barGroupMargin (opção de configuração do do Visualize), 177–8

barMargin (opção de configuração do Visualize), 177–8 before(), método, 66-7 Berkeley Software Distribution (BSD), licença, 7 Best Buy (site), 198–200 biblioteca (jQuery) download da, 27–30 inclusão das páginas da Internet, 30–1 biblioteca jQuery compactada, 29 biblioteca jQuery descomprimida, 29 bibliotecas (JavaScript) comparadas com a abordagem tradicional, 6–7 principais bibliotecas, 7–9 visão geral, 6 bind(), método, eventos orientados por mouse usados com, 81–2 manipulador de eventos, 78–9 blur(), evento, 94–6 botão (jQuery UI), 256 BSD (Berkeley Software Distribution), licença, 7

C caixas de seleção, criar links para seleção, 190–2 caixas input (formulários) valor de, 191–3 visão geral, 182 campos input criação de texto padrão dentro dos, 186–9 limitação das contagens de caracteres nos, 188–91 campos, marcação em formulários, 183–7 carregamento de conteúdo dinâmicos das páginas da Internet carregamento de todo o conteúdo, 218–9 carregamento de seções, 221–3 filtro :lt, 53 manipulação de erros, 219–21 visão geral, 217–8 Cascading Style Sheets 3 (folhas de estilo em cascata 3) (CSS3), 291–3 change(), evento, 94–5 chave API (Yelp), 245–52 Chrome (Google) compatibilidade com, 15 recursos de navegadores móveis, 291 classes adicionar elementos do DOM, 69–70

312

ativar/desativar os elementos do DOM, 70 remover elementos do DOM, 70 selecionar elementos com vários, 47 selecionar elementos por, 45–6 classificação alteração da ordem de classificação padrão, 175–7 linhas usando o plug-in tablesorter, 173–6 click, evento na Dojo, 8–9 na Prototype, 7–8 utilizar com bind(), 81–2 visão geral, 82-4 clonagem de elementos da HTML, 69 Coda, 20–1 códigos de resposta a erros (servidor), 220 códigos de resposta de erro do servidor, 220 códigos, opções de, 14 colors (opção de configuração do Visualize), 177–8 compatibilidade (entre navegadores), 15 compatibilidade entre navegadores, 15 conferências (jQuery), 306–8 configuração ambiente de desenvolvimento, 20–8 design para a Internet móvel download do emulador de desktop do Apple iPhone Safari, 294 download do emulador de desktop do Google Android, 294 itens ativos no menu de navegação, 133–5 jQuery Tools, 272–3 links para abrir novas janelas, 132–3 opções dos plug-ins, 278–9 paginação de tabelas, 166–73 visão geral, 293 conformidade com a CSS3, 15–6 console (Firebug), 25–8 :contains, filtro, 53, 59–60, 166 content (opção do plug-in qTip), 201–2 conteúdo dinâmico carregamento de páginas carregando todo o conteúdo, 218–9 carregamento das seções, 221–3 manipulação de erros, 219–21 visão geral, 217–8 dados JSON (JavaScript Object Notation) criando widgets do Delicious, 237–43 criando widgets do Yelp, 241–52 recuperando dados JSON internos, 236–7 utilização de, 233–5 dados XML (eXtensible Markup Language, linguagem de marcação extensiva) análise, 230–3 utilização de, 229–31 envio de formulários usando GET e POST, 223–8 conteúdo dividido em guias, criação, 147–54 controle deslizante (jQuery UI), 256 cookies, usando o método show(), 103–5 cópia de conteúdo entre os campos de formulários, 198–201 creditcard (opção do plug-in validate), 208–9

ÍNDICE criação de Internet móvel, 290 navegadores móveis configuração do design, 293–4 CSS3, 291–3 desenvolvimento de sites e aplicativos web, 298 exibição de conteúdo específico para smartphones, 297–8 HTML5, 292–3 navegador Google Android, 295–7 navegador móvel Apple iPhone Safari, 295 visão geral, 290–1 visão geral, 289 criando, animações avançadas criação de galerias de imagens 119–27 plug-in Easing da jQuery, 126–7 visão geral, 118–9 conteúdo dividido em guias, 147–54 efeitos de rolagem em botões com imagens, 93 feeds de notícias com efeitos, 115–9 funcionalidade Add to Cart (Adicionar à cesta), 89–92 galerias de imagens com legendas, 119–27 gráficos com o plug-in Visualize, 176–78 gráficos de barras, 177–9 guias dinâmicas com a ferramenta Tabs, 273–4 HTML por análise dos dados XML, 230–33 HTML com recuperação de dados JSON internos, 236–7 marcar todos os links de caixa de seleção, 190–2 menus accordion , 142–7 para Internet móvel, 290 plug-ins, 279–85 tabelas com plug-ins alteração ordem de classificação padrão, 175–7 criando gráficos de barras, 177–9 dicas de ferramentas, 85–9 dicas de ferramentas com o atributo title , 202–3 plug-in tablesorter, 173–6 plug-in Visualize, 176–8 temas da UI com o Themroller, 260–2 visão geral, 172-4 widget do Yelp, 241–52 texto padrão dentro dos campos, 186–9 widgets do Delicious, 237–43 criar animações avançadas criação de galerias de imagens 119–27 plug-ing Easing da jQuery, 126–7 visão geral, 118–9 conteúdo dividido em guias, 147–54 dicas de ferramentas, 85–9 dicas de ferramentas com o atributo title, 202–3 Delicious, widgets do, 237–43 efeitos de rolagem em botões com imagens, 93 funcionalidade add to Cart (adicionar à cesta), 89–92 galerias de imagens com legendas, 119–27 gráficos com o plug-in Visualize, 176–8 gráficos de barras, 177–9 guias dinâmicas com a ferramenta, Tabs, 273–4 HTML por análise dos dados XML, 230–3 HTML com recuperação de dados JSON internos, 236–7 marcar todos os links de caixa de seleção, 190–2 menus accordion , 142–7

painel de notícias com efeitos, 115–9 para Internet móvel, 290 plug-ins, 279–85 tabelas com plug-ins alteração ordem de classificação padrão, 175–7 criando gráficos de barras, 177–9 plug-in tablesorter , 173–6 plug-in Visualize, 176–8 visão geral, 172–4 temas da UI com o Themroller, 260–2 texto padrão dentro dos campos de formulários, 186–9 widget do Yelp, 241–52 CSS (Cascading Style Sheets, folhas de estilo em cascata) adição aos elementos do DOM, 69 aplicar estilo às tabelas com o efeito hover, 157–60 cores das linhas, 157 manipulação, 63 seletores componentes do, 40 curinga (*), 41–2 definido, 39 descendente, 50–1 seleção de elementos de página com várias classes, 47 seleção de elementos de página por classe, 45–6 seletor ID, 43–5 seletores parent-child, 47–9 tag HTML, 43 vários elementos, 51–2 visão geral, 40-1 visão geral, 69 visão geral, 156–7 CSS3 (Cascading Style Sheets 3, folhas de estilo em cascata), 291–3 cssAsc (opção do tablesorter), 173–4 .css(), método, 69 cssDesc (opção do tablesorter), 173–4 cssHeader (opção do tablesorter), 173–4

D dados XML (eXtensible Markup Language, linguagem de marcação extensiva) análise, 230–3 utilização de, 229–31 dados JSON (JavaScript Object Notation) adição de linhas, 165 criação de widgets do Delicious, 237–43 criando widgets do Yelp, 241–52 manipulação em tabelas adição de mensagens após as linhas, 162–4, 166 recuperação, 236–7 remoção de linhas, 164–6 utilização de, 233–5 visão geral, 161–2 XML (eXtensible Markup Language, linguagem de marcação extensiva) análise, 230–3 utilização de, 229–31 data, como expressão regular para a validação de formulários, 198–200 date (opção do plug-in validate), 208–9

313

ÍNDICE Datepicker (jQuery UI), 256, 268–70 dblclick, evento, 81–2 declarações (jQuery), antomia da, 41 degradação harmoniosa abordagem, 16–7 delay(), método, 113–5 delegate(), método, 80–2 Delicious (site), 303 Delicious, widgets do, 237–43 desabilitando os elementos do formulário, 182–4 desenvolvimento de sites e aplicativos móveis, 298 design (móvel) download do emulador de desktop do Apple iPhone Safari, 294 download do emulador de desktop do Google Android, 294 visão geral, 293 design, configuração do, 293–4 Dialog (jQuery UI), 256 dicas de ferramentas criação, 85–9 criação com o atributo title, 202–3 Digg (site), 303 digits (opção do plug-in validate), 208–9 distribuição de plug-ins, visão geral da, 286 enviando a sites, 287 preparação para distribuição, 286 doação à jQuery, 304 doctype, 30–1 document e window, eventos error(), 77–8 load(), 73–6, 217–23 ready(), 73 unload(), 76–8 visão geral, 72–3 documentação da API, 305–6 documentação API, 305–6 qualidade, 12–3 Dojo, software, 7–9 DOM (Document Object Model, modelo de objetos de documentos) definido, 6 filtragem com filtros seletores com a aplicação de definições básicas, 52–3 filtro :contains, 53, 59–60, 166 filtro :empty, 56–8 filtros :even, 53–5 filtros :first, 54–6 filtro :has, 55–7 filtros :last, 54–6 filtros :odd, 53–5 remoção de classes, 70 seleção de elementos por atributos adição/clonagem/ substituição, 64–9 ativar/desativar elementos, 70 endereços de sites, 61–2 manipulação de HTML e CSS, 63 strings de texto específicas, 62–3 utilizar CSS, 69–70 visão geral, 60-1

314

double-click, evento, 85 download download do emulador de desktop do Apple iPhone Safari, 294 download do emulador de desktop do Google Android, 294 jQuery UI, 257 biblioteca (jQuery), 27–30 200 (código de resposta de erro do servidor), 220

E Easing, plug-in (jQuery), 126–7 editor de códigos, opções para, 20–1 efeitos adição de menus suspensos, 141 encadeamento, 114–6 criação de efeitos de rolagem em botões com imagens, 93 criação de registradores de atualizações de notícias com, 115–9 método delay(), 113–5 método fadeIn() , 101, 108–14 método fadeOut(), 101, 108–14 método fadeTo(), 101, 108–14 método hide() alternância com show(), 104–6 visão geral, 101–3 método show() cookies, 103–5 alternância com hide(), 104–6 visão geral, 101–3 método slideDown(), 101, 105–7 método slideToggle(), 101, 106–9 método slideUp(), 101, 105–7 método toggle(), 101, 104–6 visão geral, 99, 100 email (opção do plug-in validate), 208–9 encadeamento efeitos, 114–6 visão geral, 14 envio de bugs para o rastreador de bugs, 308–9 formulários usando GET e POST, 223–8 plug-ins em sites, 287 :eq(), filtro, 53, 165 equalTo (opção do plug-in validate), 208–9 error(), método, 73, 77–8 esboço de plug-ins, 277 estrutura (plug-in), 278 :even(), filtro, 53–5 eventos do mouse click, 82–4 criação de efeitos de rolagem nos botões com imagens, 93 double-click, 85 evento mouseenter, 81–2 evento mouseleave, 81–2 evento mousemove, 82 evento mouseout, 82 evento mouseover, 82 hover, 85–9 mousedown, 81–2, 89–92 mouseup, 81–2, 89–92 visão geral, 81–2

ÍNDICE mousedown, 81–2, 89–92 mouseenter, 81–2 mouseleave, 81–2 mousemove, 82 mouseout, 82 mouseover, 82 mouseup, 81–2, 89–92

eventos document e window error() dos, 77–8 load(), 73–6, 217–23 ready(), 73 unload(), 76–8 visão geral, 72–3 eventos e métodos .addClass(), 69–70, 142–7 after(), 66–7 Ajax(). Ver Ajax

visão geral, 72 prepend(), 65–6 ready(), 73

animate()

remove()

adição de atraso para a criação de animação sincronizada, 113–5 adição de efeitos aos menus suspensos, 141 criando galerias de imagens, 119–27 plug-ing Easing da jQuery, 126–7 visão geral, 118–9 append(), 65–6 before(), 66–7

remoção de linhas de acordo com o valor do índice, 166 remoção de linhas nas tabelas, 164–5 visão geral, 67–9 .removeClass(), 69–70 reset(), 94–5 resize(), 73 responseText, 220 scroll(), 73 select(), 94–5

bind()

eventos orientados por mouse usados com, 81–2 manipulador de eventos, 78–9 blur(), 94–6 change(), 94–5

click

na Dojo, 8–9 na Prototype, 7–8 visão geral, 82–4 utilização com bind(), 81–2 .css(), 69 dblclick, 81–2 delay(), 113–5 delegate(), 80–2 document e window error(), 77–8 load(), 73–6, 217–23 visão geral, 72-3 ready(), 73 unload(), 76–8 double-click, 85 error(), 73, 77–8 fadeIn(), 101, 108–14 fadeOut(), 101, 108–14 fadeTo(), 101, 108–14 focus(), 94–6 focusIn(), 94–5 focusOut(), 94–5 formulário evento blur(), 95–6 evento focus, 94–6 visão geral, 94–5 has(), 53, 55–7 .hasClass(), 69

hide()

ativar/desativar com o método show(), 104–6 visão geral, 101-3 hover, 85–9, 157–60 .html(), 64 keydown(), 95–8 keypress(), 95–8 keyup(), 95–8

load()

carregamento de conteúdo dinâmico de páginas, 217–23 visão geral, 73-6

show()

alternância com o método hide(), 104–6 cookies, 103–5 visão geral, 101–3 slideDown(), 101, 105–7 slideToggle(), 101, 106–9 slideUp(), 101, 105–7 submit(), 94–5 text(), 64–5 textStatus(), 220 toggle(), 101, 104–6 .toggleClass(), 69–70 unload(), 73, 76–8 XMLHttpRequest, 220 eventos, delegação de manipulador de eventos bind, 78–9 manipulador de eventos live, 79–81 método delegate, 80–2 visão geral, 77–9 eventos, manipulação de, 71 execução do JavaScript ao vivo no Firefox, 27–8 exibição conteúdo específico de smartphones, 297–8 de alertas, 76–8 imagens de backup, 77–8 opções de pesquisa com o método slideToggle(), 106–9 extensões de terceiros, 81–2

F Facebook, 100, 216 fadeIn(), método, 101, 108–14 fadeOut(), método, 101, 108–14 fadeTo(), método, 101, 108–14 Fancybox, plug-in, 274–6 feeds RSS (Really Simple Syndication, distribuição realmente simples), 229–31 feeds RSS (Really Simple Syndication, distribuição realmente simples), 229–31 ferramentas (jQuery) configuração, 272–3

315

ÍNDICE ferramenta Tabs, 273–4 visão geral das, 271–2 :filter, 52. Ver também filtros seletores filtro :empty, 53, 56–8 filtros adição de cores de linhas usando, 157 :animated, 53 aplicação de definições básicas, 52–3 :contains, 53, 59–60, 166 definido, 39 :empty, 53, 56–8 :eq, 53 :even, 53–5 :first, 54–6 :first-child, 53 :gt, 53 :has, 53, 55–7 :header, 53 :hidden, 53 :last, 53–5 :last-child, 53 :lt, 53 :not, 53 :nth- child, 53 :odd, 53–5 :only-child, 53 :parent, 53 :visible, 53 Firebug console do, 25–8 edição de HTML, 25 habilitação, 23–4 inspeção de HTML, 25 instalação, 22–3 utilização do Firefox, 21–8 visão geral, 21–2 Firefox (Mozilla) compatibilidade com, 15 execução do JavaScript ao vivo no, 27–8 recursos de navegadores móveis, 291 utilização do Firebug no, 21–8 :first, filtro, 54–6 :first-child, filtro, 53 focus(), evento, 94–6 focusin(), evento, 94–5 focusout(), evento, 94–5 folhas de estilo em cascata (Cascading Style Sheets, CSS) adição aos elementos do DOM, 69 aplicar estilo às tabelas com o efeito hover, 157–60 cores das linhas, 157 visão geral, 156-7 manipulação, 63 seletores componentes do, 40 curinga (*), 41–2 definido, 39 descendente, 50–1 seletor ID, 43–5 seletores parent-child, 47–9 selecionar elementos de página com várias classes, 47 selecionar elementos de página por classe, 45–6 tag HTML, 43 vários elementos, 51–2 visão geral, 40-1 visão geral, 69

316

formulários adição de validação de e-mail, 194–200 aprimoramento com plug-ins adição de regras/mensagens de validação avançadas, 208–11 adição de validação, 204–9 dicas de ferramentas, 202–3 plug-in Visualize, 202–9 qTip, 199–203 visão geral, 199–201 caixas de input, 182, 191–3 cópia de conteúdo entre campos, 198–201 criação de seleção de todos os links de caixa de seleção, 190–2 criação de texto padrão, 186–9 desabilitar elementos, 182–4 envio com GET e POST, 223–8 eventos, 94–6 habilitar elementos, 182–4 limitação das contagens de caracteres, 188–1 marcação de campos em formulários, 183–7 recuperação o valor de opções selecionadas, 193–5 visão geral, 181 Forrst (site), 310 fórum (jQuery), 271, 310 framework (móvel) Appcelerator Titanium Mobile, 298–300 plug-in JQTouch, 300–1 frameworks mobile Appcelerator Titanium Mobile, 298–300 plug-in JQTouch, 300–1

G GET, solicitações, envio de formulários usando, 223–8 Gmail, 217 Google Android, download do emulador de desktop do, 294 Google Android, navegador, 295–7 Google Chrome compatibilidade com, 15 recursos do navegador móvel, 291 gráficos de barras, 177–9 gráficos barras, 177–9 criar com o plug-in Visualize, 176–8 GSGD, 126–7 :gt, filtro, 53 guias dinâmicas, 273–4

H has(), método, 53, 55–7 .hasClass(), método, 69 :header, filtro, 53 height (opção de configuração do Visualize), 177–8 :hidden, filtro, 53 hide (opção do plug-in qTip ), 201–2 hide() método ativar/desativar com o método show(), 104–6 visão geral, 101–3 hospedagem de projetos do Google, 287

ÍNDICE hover, efeitos adição de linhas, 157–60 visão geral, 85–9 HTML (HyperText Markup Language, linguagem de marcação de hipertexto) adição ao DOM, 64 adição de elementos before/after no DOM, 66–7 anexação antes dos elementos, 65–6 anexação depois dos elementos, 65–6 clonagem de elementos, 69 criação por análise dos dados XML, 230–3 criação por meio da recuperação dos dados JSON internos, 236–7 edição, 25 inspeção, 25 manipulação, 63 remoção dos elementos do DOM, 67–9 tag, 43 HTML5, 292–3 .html(), método, 64 HyperText Markup Language (HTML, linguagem de marcação de hipertexto) adição ao DOM, 64 adição de elementos before/after no DOM, 66–7 anexação antes dos elementos, 65–6 anexação depois dos elementos, 65–6 clonagem de elementos, 69 criação por análise dos dados XML, 230–3 criação por meio da recuperação dos dados JSON internos, 236–7 edição, 25 inspeção, 25 manipulação, 63 remoção de elementos do DOM, 67–9 tag, 43

I ID, seletor, seleção de elementos com, 43–5 imagens criação de galerias com legendas, 119–27 criação de efeitos de rolagem nos botões com, 93 exibição de backup, 77–8 precarregamento com o evento load(), 73–6 incorporação dos plug-ins da jQuery aos sites, 255 utilização das ferramentas da jQuery 271–4 utilização do Fancybox, 274–6 visão geral, 271 jQuery UI em sites adição ao site, 257–9 criação de temas com o ThemeRoller, 260–2 download, 257 personalização do design, 258–60 recursos do jQuery UI, 263–70 temas do jQuery UI, 263 visão geral, 255–7 widget, 258–9 Internet Explorer (Microsoft), 15 instalação do Firebug, 22–3 iPhone Safari (Apple), emulador de desktop do, 294 iPhone Safari (Apple), navegador móvel, 295

J janelas, configuração de links para abrir novas, 132–3 JavaScript não obstrutiva, 16–7 JavaScript não obstrutivo, 16–7 JavaScript Object Notation (JSON), dados criar widget do Yelp, 241–52 widget do Delicious, 237–43 recuperação de dados JSON internos, 236–7 trabalhar com, 233–5 JavaScript obstrutivo, 16–7 JavaScript depuração avançada com o Firebug, 27–8 bibliotecas comparação com a abordagem tradicional, 6–7 principais bibliotecas, 7–9 visão geral, 6 obstrutivo, 16–7 execução ao vivo no Firefox, 27–8 discreto, 16–7 Joe Hewitt (criador do Firebug), 21–2 jQuery for Designers (site), 310 jQuery Mobile, 298 jQuery UI, incorporação em sites adição a sites, 257–9 criação de temas com o ThemeRoller, 260–2 download, 257 personalização do design, 258–60 recursos do jQuery UI, 263–70 temas do jQuery UI, 263 visão geral, 255–7 widgets, 258–9 jQuery, biblioteca download, 27–30 inclusão em páginas da Internet, 30–1 jQuery, fórum da, 271 jQuery, plug-ing Easing da, 126–7 jQuery, wrapper da evitando conflitos com outras bibliotecas, 34–5 execução do código fora do manipulador document ready, 34 utilização do JavaScript com, 35 visão geral, 31–3 jQuery. Ver também tópicos específicos história da, 10–1 relações com as páginas da Internet, 11–2 site documentação da API, 305–6 envio de bugs ao rastreador de bugs, 308–9 fórum, 310 meetup e conferências, 306–8 tutoriais, 306 visão geral, 8–9 usuários, 10–1 vantagens da, 8–17 visão geral, 5 JSON (JavaScript Object Notation), dados criar recuperando dados JSON internos, 236–7 utilização de, 233–5

317

ÍNDICE Widget Delicious , 237–43 widget Yelp, 241–52 JSONLint, validador de JSON, 234–5

métodos e eventos .addClass(), 69–70, 142–7 after(), 66–7 Ajax(). Consulte Ajax

animate()

K

adição de atraso para a criação de animação sincronizada,113–5 adição de efeitos aos menus suspensos, 141 criação de galerias de imagens 119–27 plug-ing Easing da jQuery, 126–7 visão geral, 118–9 append(), 65–6 before(), 66–7

keydown(), evento, 95–8 keypress(), evento, 95–8 keyup(), evento, 95–8

L :last, filtro, 54–6 :last-child, filtro, 53

bind()

eventos orientados por mouse usados com, 81–2 manipulador de eventos, 78–9 blur(), 94–6 change(), 94–5

Learning jQuery (site), 310 lineWeight (opção de configuração do Visualize), 177–8 linhas(tabela) adição de acordo com o valor do índice, 165 adição de efeitos hover a, 157–60 adição de mensagens em tabelas após, 162–4, 166 classificação utilizando o plug-in tablesorter, 173–6 remoção de acordo com o conteúdo, 166 remoção de acordo com o valor do índice, 166 remoção usando seletores de filtro, 164–5 links definir para abrir nova janela, 132–3 seleção daqueles que contêm endereços de sites específicos, 61–2 live, manipulador do evento, 79–81 load(), método carregamento de conteúdo dinâmico das páginas da Internet, 217–23 visão geral, 73-6

click

na Dojo, 8–9 na Prototype, 7–8 visão geral, 82–4 utilização com bind(), 81–2 .css(), 69 dblclick, 81–2 delay(), 113–5 delegate(), 80–2 document e window error(), 77–8 load(), 73–6, 217–23 ready(), 73 unload(), 76–8 visão geral, 72-3 double-click, 85 error(), 73, 77–8 fadeIn(), 101, 108–14 fadeOut(), 101, 108–14 fadeTo(), 101, 108–14 focus(), 94–6 focusIn(), 94–5 focusOut(), 94–5 form evento blur, 95–6 evento focus, 94–6 visão geral, 94–5 has(), 53, 55–7 .hasClass(), 69

M Mac OS X Coda, 20–1 MAMP, 20–2 servidor Web Apache, 20–2 MAMP (Mac/Apache/MySQL/ PHP), 20–2 manipulação dados em tabelas adição de linhas, 165 adição de mensagens após as linhas, 162–4, 166 remoção de linhas, 164–6 visão geral, 161–2 de CSS, 63 HTML, 63 manipulação de erros, 219–21 marcação de campos em formulários, 183–7 Mashable, 133 maxlength (opção do plug-in validate), 208–9 meetups (jQuery), 306–8 melhoria progressiva, 16–7 menus accordion, criação, 142–7 menus suspensos adição de efeitos a, 141 criação, 135–41 menus accordion, 142–7 de navegação, 133–5 suspensos, 135–41

hide()

ativar/desativar com o método show(), 104–6 visão geral, 101–3 hover, 85–9, 157–60 .html(), 64 keydown(), 95–8 keypress(), 95–8 keyup(), 95–8

load()

carregamento de conteúdo dinâmico das páginas da Internet, 217–23 visão geral, 73–6 mousedown, 81–2, 89–92 mouseenter, 81–2 mouseleave, 81–2 mousemove, 82 mouseout, 82 mouseover, 82

318

ÍNDICE mouseup, 81–2, 89–92 visão geral, 72 prepend(), 65–6 ready(), 73 remove() remoção de linhas de acordo com o valor do índice, 166 remoção de linhas em tabelas, 164–5 visão geral, 67–9 .removeClass(), 69–70 reset(), 94–5 resize(), 73 responseText, 220 scroll(), 73 select(), 94–5

show()

ativar/desativar com o método hide(), 104–6 cookies, 103–5 visão geral, 101–3 slideDown(), 101, 105–7 slideToggle(), 101, 106–9 slideUp(), 101, 105–7 submit(), 94–5 text(), 64–65 textStatus(), 220 toggle(), 101, 104–6 .toggleClass(), 69, 70 unload(), 73, 76–8 XMLHttpRequest, 220 Microsoft Internet Explorer, 15 Microsoft, software da, 7 minlength (opção do plug-in option), 207–8 Mobile (jQuery), 298 MooTools, software, 7–8 Mozilla Firefox execução do JavaScript ao vivo no, 27–8 compatibilidade com, 15 recursos de navegadores móveis, 291 utilização do Firebug no, 21–8 widget do Yelp, 241–2 widgets do Delicious, 237–43 jQuery UI, 258–9 Yelp, 241–52

N navegação configuração de itens ativos no menu de navegação, 133–5 criar conteúdo dividido em guias, 147–54 menus accordion, 142–7 menus suspensos, 135–41 links para abrir novas janelas, 132–3 visão geral, 131 navegação, menus de, 133–5 navegadores (móveis) configuração de design, 293–4 CSS3, 291–3 desenvolvimento de sites e aplicativos web, 298 exibição de conteúdo específico de smartphones, 297–8

navegador Apple iPhone Safari Mobile, 295 navegador Google Android, 295–7 HTML5, 292–3 visão geral, 290–1 navegadores móveis configuração do design, 293–4 CSS3, 291–3 desenvolvimento de sites e aplicativos web, 298 exibição de conteúdo específico para smartphones, 297–8 navegador Google Android, 295–7 navegador móvel Apple iPhone Safari, 295 HTML5, 292–3 visão geral, 290–1 Netflix, 274–5 Nettus+ (site), 310 :not, filtro, 53 :nth-child, filtro, 53 number (opção do plug-in qTip ), 208–9 número de telefone, como expressão regular para a validação de formulários, 198–200 números apenas, como expressão regular para a validação de formulários, 198–200

O :odd, filtro, 53–5 :only-child, filtro, 53 opções progração, 14 Visualize, 278–9 Opera compatibilidade com, 15 recursos de navegadores móveis, 291

P paginação (tabela), 166–73 páginas Web inclusão da biblioteca jQuery nas, 30–1 carregamento de conteúdo dinâmico de carregamento de seções, 221–3 carregamento de todo o conteúdo, 218–9 manipulação de erros, 219–21 visão geral, 217–8 :parent, filtro, 53 parent-child, seletores, 47–9 parseDirection (opção de configuração do Visualize), 177–8 personalização do design do jQuery UI, 258–60 pieLabelPos (opção de configuração do Validate), 177–8 pieMargin (opção de configuração do Visualize), 177–8 plug-in JQTouch, 300–1 plug-in tablesorter, 173–6 plug-ins aprimoramento de formulários com a adição de regras/ mensagens de validação avançadas, 208–11 adição de validação, 204–9 dicas de ferramentas, 202–3 plug-in Visualize, 202–9 qTip, 199–3 visão geral, 199–201

319

ÍNDICE meetup e conferências, 306–8 tutoriais, 306 visão geral, 303 web design e desenvolvimento web, 310 recursos de desenvolvimento, 310 RedDit (site), 303 remove(), método, método .removeClass(), 69–70 remoção classes dos elementos do DOM, 70 conteúdo com cliques do mouse, 82–4 elementos HTML do DOM, 67–9 evento resize(), 73 John Resig (desenvolvedor de software), 10–1 linhas de acordo com o conteúdo, 166 linhas de acordo com o valor do índice, 166 linhas usando seletores de filtro, 164–5 método reset(), 94–5 required (opção do plug-in validate), 207–8 remoção de linhas com base no valor do índice, 166 remoção de linhas nas tabelas, 164–5 visão geral, 67–9 responseText, método, 220 rolagem, efeitos de, criação, 93 Ruby on Rails, 7–8

criação de tabelas com, 279-85 alteração ordem de classificação padrão, 175–7 criando gráficos de barras, 177–9 plug-in tablesorter , 173–6 plug-in Visualize, 176–8 visão geral, 172–4 distribuir envio para sites, 287 preparação para distribuição, 286 visão geral, 286 Fancybox, 274–6 incorporação jQuery UI em sites, 255–70 plug-ins em sites, 255, 271–6 JQTouch, 300–1 jQuery Easing, 126–7 programação criação de plug-in, 279–85 definição das opções, 278–9 esboço, 277 estrutura, 278 visão geral, 276–7 visão geral, 253–5 Visualize, 176–8 Popurls (site), 303 position (opção do plug-in qTip ), 201–2 POST solicitações, envio de formulários com, 223–8 pré-carregamento de imagens com o evento load(), 73–6 preparação de plug-ins para distribuição, 286 prepend(), método, 65–6 programação de plug-ins jQuery criação de plug-in, 279–85 configuração de opções, 278–9 esboço, 277 estrutura, 278 visão geral, 276–7 Progress Bar (jQuery UI), 256

S Safari (Apple) compatibilidade com, 15 emulador de desktop do iPhone Safari, 294 navegador móvel Apple iPhone Safari, 295 recursos do navegador móvel, 291 Sam Stevenson (desenvolvedor de softwares), 7–8 scroll(), evento, 73 seleção de elementos com o seletor curinga (*), 41–2 com o seletor ID, 43–5 com os seletores parent-child, 47–9 com seletores CSS, 41–2 com seletores descendentes, 50–1 com tag HTML, 43 com várias classes, 47 vários, 51–2 elementos por classe, 45–6 elementos no DOM adição de atributos, 64–9 clonagem, 64–9 endereços de sites, 61–2 manipulação de HTML e CSS, 63 strings de texto específicas, 62–3 substituição, 64–9 utilizando CSS, 69–70 visão geral, 60–1 links que contêm endereços de sites específicos, 61–2 select(), evento, 94–5 seletor curinga (*), seleção de elementos com, 41–2 seletor, filtros de aplicação de definições básicas, 52–3 filtro :contains, 53, 59–60, 166 filtro :empty, 56–8 filtro :even, 53–5

Q qTip, plug-in, 199–203 400 (código de resposta de erro do servidor), 220 401 (código de resposta de erro do servidor), 220 403 (código de resposta de erro do servidor), 220 404 (código de resposta de erro do servidor), 220 500 (código de resposta de erro do servidor), 220

R rastreador de bugs (Bug Tracker), 308–9 ready(), evento, 73 recuperação de dados JSON internos, 236–7 valor das opções selecionadas, 193–5 recursos fórum de, 310 o sucesso da jQuery, 304–5 site da jQuery documentação da API, 305–6 envio de bugs para o rastreador de bugs, 308–9

320

ÍNDICE filtro :first, 54–6 filtro has(), 55–7 remoção de linhas com, 164–5 seletores descendentes, 50–1 seletores com várias classes, 47 componentes dos, 40 curinga (*), 41–2 definidos, 39 descendentes, 50–1 seleção dos elementos de página com CSS por classe, 45–6 seletor ID, 43–5 seletores descendentes, 50–1 seletores parent-child, 47–9 tag HTML, 43 vários elementos, 51–2 visão geral, 41 visão geral, 40–1 show (opção do plug-in qTip), 201–2 show(), método ativar/desativar com o método hide(), 104–6 cookies, 103–5 visão geral, 101–3 SitePoint (site), 310 sites desenvolvimento de sites móveis, 298 envio aos sites, 287 incorporação do jQuery UI nos adição ao site, 257–9 criação de temas com o ThemeRoller, 260–2 download, 257 personalização do design, 258–60 recursos do jQuery UI, 263–70 temas do jQuery UI, 263 visão geral, 255–7 widgets, 258–9 incorporar plug-ins jQuery em utilização das ferramentas da jQuery, 271–4 utilização do Fancybox, 274–6 visão geral, 255, 271 jQuery documentação da API, 305–6 envio de bugs ao rastreador de bugs, 308–9 fórum, 310 meetup e conferências, 306–8 tutoriais, 306 visão geral, 8–9 plug-in jQuery, 255 seleção de links que contêm endereços específicos, 61–2 slideDown(), método, 101, 105–7 slideToggle(), método, 101, 106–9 slideUp(), método, 101, 105–7 smartphones, 297–8 Smashing Magazine, 229 software de código aberto suporte da comunidade, 12 definido, 7 software Prototype, 7–8 software código aberto, 7, 12 Microsoft, 7

MooTools, 7–8 Prototype, 7–8 sortForce (opção do tablesorter), 173–4 sortList (opção do tablesorter), 173–4 sortMultiSortKey (opção do tablesorter), 173–4 Stack Overflow (site), 310 style (opção do plug-in qTip), 202–3 submit(), evento, 94–5

T tabelas adição de efeitos hover a, 157–60 adição de mensagens nas tabelas após, 162–4, 166 aplicação de estilo com CSS o efeito hover, 157–60 classificação com o plug-in tablesorter, 173–6 criação com plug-ins alterando a ordem de classificação padrão, 175–7 criação de gráficos de barras, 177–9 plug-in tablesorter, 173–6 plug-in Visualize, 176–8 visão geral, 172–4 visão geral, 172–4 configuração da paginação, 166–73 cores das linhas, 157 efeito zebra, 53–5 linhas adição de acordo com o valor do índice, 165 manipulação de dados adição de linhas, 165 adição de mensagens após as linhas, 162–4, 166 remoção de linhas, 164–6 visão geral, 161–2 remoção de acordo com o conteúdo, 166 remoção de acordo com o valor do índice, 166 remoção com seletores de filtro, 164–5 visão geral, 155 visão geral, 156–7 Tabs (jQuery UI), 256, 263–4 Tabs, ferramenta, criação de guias dinâmicas com, 273–4 tags âncora, 60 HTML, 43 teclado, eventos de, 95–8 temas (UI) criação com o ThemeRoller, 260–2 usando, 263 text(), método, 64–5 textColors (opção de configuração do Visualize), 177–8 texto adição de elementos no DOM, 64–5 criação de galerias de imagens com legendas, 119–27 criação dentro dos campos de formulários, 186–9 textStatus(), método, 220 The 14 Days of jQuery (site), 310 ThemeRoller, criação de temas para UI com o, 260–2 title (opção de configuração do Visualize), 177–8 title, atributo, criação de dicas de ferramenta com, 202–3 toggle(), método, 101, 104–6 .toggleClass(), método, 69, 70 303 (código de resposta de erro do servidor), 220 304 (código de resposta de erro do servidor), 220

321

ÍNDICE tutoriais (jQuery), 306 Twitter (site), 105–6, 188–9, 303 type (opção de configuração do Visualize), 177–8

navegador Google Android, 295–7 navegador móvel Apple iPhone Safari, 295 visão geral, 290–1 visão geral, 289 web design (móvel) download do emulador de desktop do Apple iPhone Safari, 294 download do emulador de desktop do Google Android, 294 visão geral, 293 web design e recursos de desenvolvimento, 310 Web, páginas carregamento das seções, 221–3 carregamento de conteúdo dinâmico das manipulação de erros, 219–21 carregando todo o conteúdo, 218–19 inclusão da biblioteca jQuery nas, 30–1 visão geral, 217–18 width (opção de configuração do Visualize), 177–8 Windows WampServer, 20–1 Windows/Apache/MySQL/PHP Server (Wamp-Server), 20–1 wrapper (jQuery) evitando conflitos outras bibliotecas, 34–5 execução do código fora do manipulador document ready, 34 utilização do JavaScript com, 35 visão geral do, 31–3 Wufoo, 183–4

U UI (jQuery), incorporação em sites adição a sites, 257–9 criação de temas com o ThemeRoller, 260–2 download, 257 personalização do design, 258–60 recursos do jQuery UI, 263–70 temas do jQuery UI, 263 visão geral, 255–7 widgets, 258–9 unload(), método, 73, 76–8 url (opção do plug-in validate), 208–9

V validação de e-mail, adição a formulários, 194–200 validação de formulários com, 202–9 validação adição aos formulários, 204–9 adição de e-mail, 194–200 adição de regras aos formulários, 208–11 valor do índice adição de linhas de acordo com, 165 remoção de linhas de acordo com, 166 versões (biblioteca jQuery), 29 visão geral do plug-in Validate, 204–9 :visible, filtro, 53 Visual jQuery (site), 310 Visualize, criação de gráficos com plug-in, 176–8

X XHR, propriedades da solicitação, 220 XML (eXtensible Markup Language, linguagem de marcação), análise dos dados extensiva), 230–3 trabalhar com, 229–31 XMLHttpRequest, método, 220

W WampServer (Windows/ Apache/MySQL/PHP Server), 20–1 Web (móvel) criação para, 290 navegadores móveis configuração do design, 293–4 CSS3, 291–3 desenvolvimento de sites e aplicativos web, 298 exibição de conteúdo específico para smartphones, 297–8 HTML5, 292–3

Y Yahoo! User Interface (YUI), 7–8 Yelp for Developers (site), 244 YUI (Yahoo! User Interface), 7–8

Z zebra, efeito, 53–5

322