Dominando JavaScript com jQuery

Sumário

Prefácio

Agradecimentos

Sobre o autor

Capítulo 1: Apresentação

1.1 Por que um livro sobre JavaScript e jQuery?

1.2 Como o livro está organizado

1.3 Algumas palavras sobre JavaScript

1.4 Lista de discussão e código fonte

Capítulo 2: Refazendo uma loja virtual

2.1 A loja virtual da Rogus Music

2.2 Um site sem JavaScript

Capítulo 3: Adicionando JavaScript

3.1 Um novo layout

3.2 Entendendo IDs e classes

3.3 Uma questão de DOM

3.4 Localizando o valor total do carrinho

3.5 Usando === e ==

3.6 Alterando o campo do total

3.7 Incluindo um arquivo JavaScript na página

3.8 Brincando com o código de um jeito mais profissional

3.9 Meu browser não tem console. E agora?

3.10 Calculando os subtotais dos itens

3.11 Entendendo eventos

3.12 A seguir, cenas do próximo capítulo

Capítulo 4: Um JavaScript diferente em cada navegador

4.1 Nem tudo são flores no reino da Web

4.2 Quando não existe uma determinada função

4.3 Funções anônimas e nomeadas

Capítulo 5: Simplifique com jQuery

5.1 O que é jQuery

5.2 Qual versão do jQuery usar? 2.0 ou 1.x

5.3 Entenda jQuery em cinco minutos

5.4 Nosso código antigo, agora com jQuery

5.5 Boas práticas e convenções com jQuery

5.6 Programando de forma funcional

5.7 Eventos e callbacks

5.8 E o que vem agora?

Capítulo 6: Dominando eventos e manipulação de DOM com jQuery

6.1 Criando uma lista de tarefas

6.2 Usando eventos de um jeito mais profissional

6.3 Desassociando eventos

6.4 Removendo itens com estilo

6.5 Editando itens

6.6 Editando apenas um item de cada vez

6.7 Disparando mais de um evento ao mesmo tempo

6.8 Salvando a tarefa

6.9 Indo ainda mais fundo na manipulação de DOM

6.10 Adicionando tarefas

Capítulo 7: Não tenha medo do AJAX e do JSON

7.1 AJAX? Que bicho é esse?

7.2 Usando o jsFiddle

7.3 Nosso primeiro código com AJAX

7.4 Enviando parâmetros com AJAX

7.5 O objeto jqXHR

7.6 E o que é o JSON?

7.7 Juntando JSON e AJAX

7.8 Políticas de segurança dos browsers

Capítulo 8: Um gerenciador de tarefas com AJAX

8.1 Melhorando nosso gerenciador

8.2 Carregando as tarefas do servidor

8.3 Usando parâmetros opcionais

8.4 Alterando tarefas

8.5 Uma introdução ao REST

8.6 Utilizando PUT e DELETE no browser

8.7 Adicionando tarefas com REST

8.8 Excluindo tarefas

Capítulo 9: jQuery UI

9.1 Usando o jQuery UI

9.2 As diversas partes do jQuery UI

9.3 Temas

9.4 Organizando seus dados com accordion

9.5 Auto-completando

9.6 Usando botões mais bonitos

9.7 Escolhendo a data com o calendário

9.8 Exibindo janelas dentro da janela

9.9 O problema com o jQuery UI

Capítulo 10: jQuery Mobile

10.1 Enfrentando o mobile

10.2 Cuidado com o tempo de carregamento

Capítulo 11: Orientação a objetos no JavaScript

11.1 Objetos no JavaScript

11.2 Funções para quem não tem classe

11.3 Entendendo prototipação

11.4 Usando herança

11.5 Mixin no JavaScript

Capítulo 12: Um pouco de programação funcional

12.1 O que é programação funcional

12.2 High order functions

12.3 Escopo

12.4 Closures

12.5 Currying

Capítulo 13: Criando plugins para jQuery

13.1 O que são plugins?

13.2 A anatomia de um plugin

13.3 Escrevendo a declaração do plugin

13.4 O algoritmo de CPF

13.5 Adicionando funcionalidade ao plugin

13.6 Personalizando o plugin

13.7 Mais plugins

13.8 Onde aprender mais

Capítulo 14: Dicas para usar melhor o jQuery

14.1 Por que performance é importante?

14.2 Use sempre a versão mais recente

14.3 Escolha os seletores corretos para a tarefa

14.4 Não se esqueça do cache

14.5 Às vezes, menos é mais

Capítulo 15: E o que vem agora?

15.1 Recomendações de leitura

15.2 Fim?

Bibliografia

Visite o site da Editora Casa do Código e conheça os livros com preços promocionais - www.casadocodigo.com.br.

Prefácio

-- Ah, você programa em jQuery?

Mesmo que essa frase irrite um desenvolvedor experiente, ela é a principal prova de que um framework definitivamente foi adotado em massa pelo mercado, ao ponto de ser confundido com uma linguagem de programação. E esse é definitivamente o caso quando falamos do jQuery – um framework que sem dúvidas revolucionou o desenvolvimento web, simplificando absurdamente suas tarefas corriqueiras.

A melhor maneira de conseguir explorar todo o potencial que o jQuery pode oferecer é conhecendo melhor JavaScript – a linguagem da web, e o ambiente onde todo esse código é executado: navegadores e páginas HTML. Vale lembrar que esse mesmo 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 de hardwares antigos e até como linguagem padrão de plataformas inteiras, como Firefox OS e Windows 8!

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

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

Muitos fizeram apostas para o futuro das linguagens de programação. Hoje vemos que os que apostaram forte em linguagens estáticas estão observando, boquiabertos, a velocidade com que o JavaScript toma espaço no mercado. Justamente os pontos fracos da linguagem foram os que possibilitaram que ela resistisse à erosão do tempo; sua permissividade ajudou desenvolvedores de diversas épocas a fornecerem funcionalidades que não estavam disponíveis (mais conhecidos como shims ou polyfills), e no fim das contas, fez com que um projeto de 10 dias com quase 20 anos de idade se tornasse nada menos do que uma das mais importantes linguagens da programação moderna.

O JavaScript veio pra ficar, e não vai desaparecer tão cedo. Como o Brendan Eich, criador da linguagem diz:

-- always bet on JS

Douglas 'qmx' Campos

Agradecimentos

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

Obrigado Paulo Silveira, Adriano Almeida e Sérgio Lopes, pela confiança ao entregarem tamanha responsabilidade nas minhas mãos e pelo apoio e senso crítico durante toda a produção deste livro.

Muito obrigado, André Noel, pela gentileza de ceder um de seus trabalhos para ilustrar este livro. Caso você não seja o André Noel e ainda não conheça o trabalho dele, recomendo fortemente uma visita ao http://www.vidadeprogramador.com.br

Thank you mr. Brendan Eich for your work and thank you for answering my questions so promptly and kindly. I'll pay you some beers next time you are in São Paulo.

Fazendo um momento Maguila, eu não poderia deixar de agradecer também a Alexandre Borba, André Faria, Bruno Oliveira, Diego Plentz, Douglas Campos, Eduardo Cintra, Francelino Guilherme, Igor Hercowitz, Lucas Carvalho, Marcelo Tardeli, Osni Oliveira, Ricardo Massuia, Rodrigo Lorca, Vinicius Baggio, aos amigos do GURU-SP, GURU-ES e Adapti.

Minha esposa e meus filhos sentiram o peso e preço de todo o tempo que investi nesse livro, mas ainda assim ficaram ao meu lado, apoiando-me e empurrando-me para frente. Senti muito mais a falta de vocês do que realmente aparentou.

Finalmente, agradeço também a você, leitor. Espero que você se divirta tanto lendo quanto eu me diverti escrevendo.

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

Sobre o autor

Desenvolvo softwares profissionalmente desde o século passado e já passei por quase todas as plataformas de desenvolvimento para desktop, web e mobile.

A partir de 2004 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 frameworks ou bibliotecas especializadas.

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

Capítulo 1:

Apresentação

Um bom começo é metade do trabalho.

--Provérbio holandês

1.1 Por que um livro sobre JavaScript e jQuery?

Existem muitos livros no mercado sobre JavaScript e jQuery, mas a maioria deles acaba pecando por não mostrar realmente a linguagem, ou por apresentar os assuntos de maneira engessada, ou simplesmente por serem manuais de referência que jogam todo o conteúdo sobre o leitor sem mostrar casos reais de uso e sem apresentar uma motivação para que seja feito daquela forma.

Obviamente, existem livros muito bons que eu recomendo fortemente, como por exemplo o Javascript: The Good Parts [null], de Douglas Crockford, mas que podem ser traumáticos para quem está começando agora.

Minha ideia não é abraçar o mundo e escrever o livro definitivo sobre JavaScript e jQuery, mas apresentar de maneira didática como resolver problemas cotidianos, sem tratar o leitor como criança. Apresentar os assuntos da maneira mais fluída e agradável possível será o meu desafio.

Eu sempre gostei de livros que me apresentam uma tecnologia, mostram como utilizá-la e como sobreviver quando estou começando, e ainda continuam úteis mesmo depois de eu já passar a estar confortável naquele ambiente. É exatamente isso que eu quero que esse livro seja para você, leitor.

1.2 Como o livro está organizado

O livro começa com a história de uma loja virtual bem antiga que, por uma série de razões, não utilizou JavaScript em sua versão original. Nos capítulos 3 e 4 eu apresento a linguagem enquanto reescrevo o carrinho de compras utilizando JavaScript puro, sem bibliotecas adicionais e com toda a dificuldade de se escrever código para múltiplos browsers.

A partir do capítulo 5, apresento a biblioteca jQuery e substituo quase todo o trabalho que fizemos com JavaScript puro por chamadas mais simples.

No capítulo 6 nós vamos desenvolver uma lista de tarefas para aprendermos como manipular a fundo os elementos da sua página HTML. Aqui vamos voltar ao nosso carrinho de compras e adicionar efeitos para deixar o visual mais atraente. Voltaremos à lista de tarefas no capítulo 8, dessa vez adicionando recursos de AJAX e JSON que aprenderemos no capítulo 7, além de termos uma breve introdução ao REST e sobre como utilizar com jQuery.

Vamos falar também sobre jQuery UI, seus efeitos e componentes visuais no capítulo 9 e sobre jQuery Mobile no capítulo 10.

Finalmente, temos o que eu considero a cereja do bolo: no capítulo 11 demonstro como utilizar orientação a objetos no JavaScript, indo além do feijão com arroz e ensinando a usar prototipação, herança clássica e herança múltipla; no capítulo 12 eu apresento alguns fundamentos de programação funcional e no capítulo 13 você usa tudo o que foi mostrado no livro