© 2012, Casa do CódigoTodos os direitos reservados e protegidos pela Lei nº9.610, de 10/02/1998.Nenhuma parte deste livro poderá ser reproduzida, nem transmitida, sem auto-rização prévia por escrito da editora, sejam quais forem os meios: fotográficos,eletrônicos, mecânicos, gravação ou quaisquer outros.

Casa do CódigoLivros para o programadorRua Vergueiro, 3185 - 8º andar04101-300 – Vila Mariana – São Paulo – SP – Brasil

Casa do Código

Prefácio

-- Ah, você programa em jQuery?Mesmo que essa frase irrite um desenvolvedor experiente, ela é a principal prova

de que um framework de�nitivamente foi adotado emmassa pelomercado, ao pontode ser confundido com uma linguagem de programação. E esse é de�nitivamente ocaso quando falamos do jQuery - um framework que sem dúvidas revolucionou odesenvolvimento web, simpli�cando absurdamente tarefas corriqueiras do desen-volvimento web.

A melhor maneira de conseguir explorar todo o potencial que o jQuery podeoferecer, é conhecendo melhor JavaScript - a linguagem da web, e o ambiente ondetodo esse código é executado: navegadores e páginas HTML. Vale lembrar que essemesmo JavaScript extrapolou os limites, e se faz presente no backend, em jogos,servindo de motor para implementações de novas máquinas virtuais, emulação dehardwares antigos e até como linguagem padrão de plataformas inteiras, como Fire-fox OS e Windows �!

Sim, o JavaScript passou do estigma de linguagem odiada e mal compreendidaa uma das mais interessantes e essenciais. E o jQuery é certamente um dos catalisa-dores dessa mudança.

Neste livro, Plínio Balduino parte de um código JavaScript, que estava prestes ase tornar impossível de manter, para simpli�cá-lo com o uso de jQuery, enquantoapresenta o funcionamento do framework por debaixo dos panos. A aplicação Ja-vaScript tem aquele sabor que tanto conhecemos: muita manipulação de DOM einvocações AJAX, de onde começam a brotar IFs e técnicas pouco ortodoxas (as co-nhecidas gambiarras) para se proteger das incompatibilidades entre navegadores esuas idiossincrasias.

Muitos �zeram apostas para o futuro das linguagens de programação; Hoje ve-mos que os que apostaram forte em linguagens estáticas estão observando, boqui-abertos, a velocidade em que o JavaScript toma espaço no mercado. Justamente os

i

Casa do Código

pontos fracos da linguagem foram os que possibilitaram que ela resistisse à erosãodo tempo; sua permissividade ajudou desenvolvedores de diversas épocas a fornece-rem funcionalidades que não estavam disponíveis (mais conhecidos como shims oupoly�lls), e no �m das contas, um “projeto de �� dias” com quase �� anos de idade setornasse nada menos do que uma das mais importantes linguagens da programaçãomoderna.

O JavaScript veio pra �car, e não vai desaparecer tão cedo. Como o BrendanEich, criador da linguagem diz:

-- “always bet on JS”Douglas ’qmx’ Campos

ii

Casa do Código

Agradecimentos

Agradeço aos meus pais, Luis e Isabel, pelo suporte de uma vida inteira e pela exce-lente educação.

Obrigado Paulo Silveira, Adriano Almeida e Sérgio Lopes, pela con�ança ao en-tregarem tamanha responsabilidade nas minhas mãos e pelo apoio e senso críticodurante toda a produção deste livro.

Muito obrigado, André Noel, pela gentileza de ceder um de seus trabalhos parailustrar este livro. Caso você não seja o André Noel e ainda não conhece o trabalhodele, recomendo fortemente uma visita ao http://www.vidadeprogramador.com.br

�ank you mr. Brendan Eich for your work and thank you for answering myquestions so promptly and kindly. I’ll pay you some beers next time you’ll be in SãoPaulo.

Fazendo um momento Maguila, eu não poderia deixar de agradecer também aAlexandre Borba, André Faria, BrunoOliveira, Diego Plentz, Douglas Campos, Edu-ardo Cintra, Francelino Guilherme, Igor Hercowitz, Lucas Carvalho, Marcelo Tar-deli, Osni Oliveira, RicardoMassuia, Rodrigo Lorca, Vinicius Baggio, aos amigos doGURU-SP, GURU-ES e Adapti.

Minha esposa e meus �lhos sentiram o peso e preço de todo o tempo que investinesse livro, mas ainda assim �caram ao meu lado, me apoiando e empurrando parafrente. Senti muito mais a falta de vocês do que realmente aparentou.

Finalmente, agradeço também a você, leitor. Espero que vocês se divirtam tantolendo quanto eu me diverti escrevendo.

// Plínio Balduino(enjoy)();

iii

Casa do Código

Sobre o autor

Desenvolvo so�wares pro�ssionalmente desde o século passado e já passei por quasetodas as plataformas de desenvolvimento para desktop, web e mobile.

A partir de ���� comecei a perceber o poder por trás do JavaScript e do AJAX,mas ainda estava quebrando a cabeça fazendo tudo na mão, sem a ajuda de fra-meworks ou bibliotecas especializadas.

De uns anos para cá, aprendendo Scheme (umdialeto LISP voltado para o apren-dizado) e colaborando nos primórdios do dynjs (implementação do JavaScript paraa máquina virtual do Java), consegui enxergar melhor o potencial da linguagem, ecomecei a falar a respeito em eventos e conferências.

v

Casa do Código Sumário

Sumário

� Apresentação ��.� Por que um livro sobre JavaScript e jQuery? . . . . . . . . . . . . . . . ��.� Como o livro está organizado . . . . . . . . . . . . . . . . . . . . . . . ��.� Algumas palavras sobre JavaScript . . . . . . . . . . . . . . . . . . . . ��.� Lista de discussão e código fonte . . . . . . . . . . . . . . . . . . . . . . �

� Refazendo uma loja virtual ��.� A loja virtual da Rogus Music . . . . . . . . . . . . . . . . . . . . . . . ��.� Um site sem JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . �

� Adicionando JavaScript ��.� Um novo layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��.� Entendendo IDs e classes . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Uma questão de DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Localizando o valor total do carrinho . . . . . . . . . . . . . . . . . . . ���.� Usando === e == . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Alterando o campo do total . . . . . . . . . . . . . . . . . . . . . . . . ���.� Incluindo um arquivo JavaScript na página . . . . . . . . . . . . . . . ���.� Brincando com o código de um jeito mais pro�ssional . . . . . . . . . ���.� Meu browser não tem console. E agora? . . . . . . . . . . . . . . . . . ���.�� Calculando os subtotais dos itens . . . . . . . . . . . . . . . . . . . . . ���.�� Entendendo eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.�� A seguir, cenas do próximo capítulo . . . . . . . . . . . . . . . . . . . . ��

vii

Sumário Casa do Código

� Um JavaScript diferente em cada navegador ���.� Nem tudo são �ores no reino da Web . . . . . . . . . . . . . . . . . . . ���.� Quando não existe uma determinada função . . . . . . . . . . . . . . ���.� Funções anônimas e nomeadas . . . . . . . . . . . . . . . . . . . . . . ��

� Simpli�que com jQuery ���.� O que é jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Entenda jQuery em cinco minutos . . . . . . . . . . . . . . . . . . . . ���.� Nosso código antigo, agora com jQuery . . . . . . . . . . . . . . . . . ���.� Programando de forma funcional . . . . . . . . . . . . . . . . . . . . . ���.� Eventos e callbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� E o que vem agora? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

� Dominando eventos e manipulação de DOM com jQuery ���.� Criando uma lista de tarefas . . . . . . . . . . . . . . . . . . . . . . . . ���.� Usando eventos de um jeito mais pro�ssional . . . . . . . . . . . . . . ���.� Desassociando eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Removendo itens com estilo . . . . . . . . . . . . . . . . . . . . . . . . ���.� Editando itens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Editando apenas um item de cada vez . . . . . . . . . . . . . . . . . . . ���.� Disparando mais de um evento ao mesmo tempo . . . . . . . . . . . . ���.� Salvando a tarefa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Indo ainda mais fundo na manipulação de DOM . . . . . . . . . . . . ���.�� Adicionando tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

� Não tenha medo do AJAX e do JSON ���.� AJAX? Que bicho é esse? . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Usando o jsFiddle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Nosso primeiro código com AJAX . . . . . . . . . . . . . . . . . . . . . ���.� Enviando parâmetros com AJAX . . . . . . . . . . . . . . . . . . . . . ���.� O objeto jqXHR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� E o que é o JSON? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Juntando JSON e AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . ���.� Políticas de segurança dos browsers . . . . . . . . . . . . . . . . . . . . ��

viii

Casa do Código Sumário

� Um gerenciador de tarefas com AJAX ��

�.� Melhorando nosso gerenciador . . . . . . . . . . . . . . . . . . . . . . ��

�.� Carregando as tarefas do servidor . . . . . . . . . . . . . . . . . . . . . ��

�.� Usando parâmetros opcionais . . . . . . . . . . . . . . . . . . . . . . . ��

�.� Alterando tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

�.� Uma introdução ao REST . . . . . . . . . . . . . . . . . . . . . . . . . . ��

�.� Utilizando PUT e DELETE no browser . . . . . . . . . . . . . . . . . . ��

�.� Adicionando tarefas com REST . . . . . . . . . . . . . . . . . . . . . . ��

�.� Excluindo tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

� jQuery UI ��

�.� Usando o jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

�.� As diversas partes do jQuery UI . . . . . . . . . . . . . . . . . . . . . . ���

�.� Temas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

�.� Organizando seus dados com accordion . . . . . . . . . . . . . . . . . ���

�.� Auto-completando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

�.� Usando botões mais bonitos . . . . . . . . . . . . . . . . . . . . . . . . ���

�.� Escolhendo a data com o calendário . . . . . . . . . . . . . . . . . . . ���

�.� Exibindo janelas dentro da janela . . . . . . . . . . . . . . . . . . . . . ���

�.� O problema com o jQuery UI . . . . . . . . . . . . . . . . . . . . . . . ���

�� jQuery Mobile ���

��.� Enfrentando o mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

��.� Cuidado com o tempo de carregamento . . . . . . . . . . . . . . . . . ���

�� Orientação a objetos no JavaScript ���

��.� Objetos no JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

��.� Funções para quem não tem classe . . . . . . . . . . . . . . . . . . . . ���

��.� Entendendo prototipação . . . . . . . . . . . . . . . . . . . . . . . . . . ���

��.� Usando herança . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

��.� Mixin no JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

ix

Sumário Casa do Código

�� Um pouco de programação funcional �����.� O que é programação funcional . . . . . . . . . . . . . . . . . . . . . . �����.� High order functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Escopo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Currying . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

�� Criando plugins para jQuery �����.� O que são plugins? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� A anatomia de um plugin . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Escrevendo a declaração do plugin . . . . . . . . . . . . . . . . . . . . �����.� O algoritmo de CPF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Adicionando funcionalidade ao plugin . . . . . . . . . . . . . . . . . . �����.� Personalizando o plugin . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Mais plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Onde aprender mais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

�� Dicas para usar melhor o jQuery �����.� Por que performance é importante? . . . . . . . . . . . . . . . . . . . . �����.� Use sempre a versão mais recente . . . . . . . . . . . . . . . . . . . . . �����.� Escolha os seletores corretos para a tarefa . . . . . . . . . . . . . . . . �����.� Não se esqueça do cache . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� As vezes, menos é mais . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

�� E o que vem agora? �����.� jQuery �.� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Recomendações de leitura . . . . . . . . . . . . . . . . . . . . . . . . . �����.� Fim? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ���

Índice Remissivo ���

Bibliogra�a ���Versão: ��.�.��

x