Smashing Jquery - Interatividade Avançada Com Javascript Simples

(1)

SMASHING

jQuery

TÉCNICAS PROFISSIONAIS PARA UM LAYOUT MODERNO

INTERATIVIDADE AVANÇADA COM JAVASCRIPT SIMPLES

(2)

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

(3)

SMASHING

jQuery

INTERATIVIDADE AVANÇADA

COM JAVASCRIPT SIMPLES

Jake Rutter

2012 Versão impressa desta obra: 2012 Tradução: Igor Vianna Revisão técnica: Elcio Ferreira

(4)

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 ISBN 978-0-470-97723-1

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.

Capa: VS Digital, arte sobre capa original Leitura fi nal: Aline Grodt

Gerente Editorial – CESA: Arysinha Jacques Aff onso Editora responsável por esta obra: Mariana Belloli Editoração eletrônica: VS Digital

(5)

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 offl ine, 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.

(6)

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 desafi o 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.

(7)

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

Capítulo 1: Introdução a jQuery 5

Descubra as bibliotecas JavaScript 6

As vantagens do uso de uma biblioteca JavaScript

em relação à abordagem tradicional 6

Explore as bibliotecas principais 7

As vantagens da jQuery 9

Capítulo 2: Começando a usar jQuery 19

Confi gure o ambiente de desenvolvimento 20

Use o Firebug no Firefox 21

Download da biblioteca jQuery 27

Inclua a biblioteca jQuery em sua página 30

Entenda o wrapper da jQuery 31

Execute os códigos fora do manipulador document ready 34

Evite confl itos com outras bibliotecas 34

Use o JavaScript com a jQuery 35

PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY 37 Capítulo 3: Usando seletores, fi ltros 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 fi ltros de seletor jQuery 52

Aplique defi nições de fi ltro básicas 52

Crie tabelas com efeito zebra usando os fi ltros 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ífi co 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ífi co 61 Selecione todos os elementos que terminam com uma palavra específi ca 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

(8)

Capítulo 4: Trabalhando com eventos 71

Compreenda os eventos na jQuery 72

Trabalhe com eventos de document e window 72

Detecte o carregamento completo do DOM com o evento ready() 73

Pré-carregue imagens com o evento load() 73

Exiba um alerta quando o usuário sair de uma página 76

Exiba uma imagem de backup usando o evento error 77

Comece a utilizar a delegação de eventos 77

Use bind para anexar um manipulador de eventos a um elemento 78 Use live para anexar um manipulador de eventos a um elemento 79 Use delegate para anexar um manipulador de eventos a um elemento 80

Capture eventos de mouse 81

Adicione e remova conteúdo da página com um clique do mouse 82

Entenda como o evento double-click funciona 85

Crie uma dica de ferramenta que exiba o conteúdo no evento hover 85 Crie funcionalidades Add to Cart básicas com os eventos mousedown

e mouseup 89

Crie um efeito de rollover em um botão com imagens 93

Capture eventos de formulário 94

Insira uma borda a um campo de formulário quando o usuário

adicionar foco 94

Mostre uma mensagem após o usuário deixar um campo de texto 95

Capture eventos de teclado 95

Capítulo 5: Deixando seu site mais atraente com efeitos 99

Descubra o que os efeitos da jQuery podem fazer 100

Exiba e oculte elementos com Show e Hide 101

Confi gure uma mensagem para ser exibida apenas uma vez no site

com o método show e com cookies 103

Ative/desative show e hide 105

Deslize elementos para cima e para baixo 106

Exiba opções de pesquisa alternativas com o método slidetoggle 107

Transição gradual de elementos 109

Crie uma galeria de imagens básica com transição gradual 110

Adicione atraso para criar uma animação sincronizada 113

Encadeie vários efeitos 114

Crie um painel de notícias com vários efeitos 116

Crie animações avançadas 119

Crie uma galeria de imagens com legendas usando animações

avançadas 119

Efeitos de suavização adicionais com o plug-in Easing da jQuery 126

PARTE III: APLICANDO JQUERY AO SITE 129 Capítulo 6: Aperfeiçoando a navegação: menus, guias e accordion 131

(9)

Confi gure um item ativo no menu de navegação 133

Crie um menu suspenso básico 135

Adicione efeitos avançados ao menu suspenso usando animate 141

Crie um menu accordion 142

Crie conteúdo dividido em guias 147

Capítulo 7: Criando tabelas interativas e atraentes 155

Aplique estilo aos dados em tabelas com CSS 156

Adicione cores de linhas alternadas usando fi ltros 157

Adicione um efeito hover simples a linhas 157

Adicione um efeito hover avançado a linhas 159

Manipule os dados das tabelas 161

Adicione uma mensagem após a primeira/última linha

da tabela 162

Remova uma linha usando um seletor de fi ltro 164

Adicione uma linha após outra de acordo com o valor

de seu índice 165

Remova uma linha de acordo com o valor de seu índice 166

Adicione uma mensagem depois de linhas com conteúdo específi co 166

Remova uma linha de acordo com seu conteúdo 166

Confi gure a paginação de tabelas com jQuery 166

Crie tabelas avançadas usando os plug-ins jQuery 172

Classifi que linhas usando o plug-in tablesorter 173

Altere a ordem de classifi cação padrão 176

Crie gráfi cos atraentes com dados tabulares usando o Visualize 176

Crie um gráfi co de barras 177

Capítulo 8: Criando formulários avançados com jQuery 181

Destaque um campo após o carregamento da página 182

Desabilite e habilite elementos de formulário 182

Marque o campo atual em formulários 183

Crie texto padrão dentro dos campos 186

Limite a contagem de caracteres nos campos 188

Crie um link para marcar todas as caixas de seleção 190

Obtenha o valor de um campo 192

Recupere o valor de uma opção de seleção 193

Adicione uma validação de e-mail simples a um formulário 194

Copie o conteúdo de um campo para outro 198

Aperfeiçoe os formulários com plug-ins 201

Incorpore o qTip ao site 201

Crie um qTip de campo de formulário básico usando

o atributo title 203

Use o plug-in validate da jQuery para validar os formulários 203

Adicione uma validação simples a um formulário de contato 204

Adicione mensagens e regras de validação avançadas a um

(10)

PARTE IV: EXPLORANDO A JQUERY AVANÇADA 213 Capítulo 9: Utilizando dados dinâmicos e Ajax 215

Descubra o Ajax 216

Carregue o conteúdo dinâmico de uma página 217

Carregue todo o conteúdo 218

Manipule erros se o conteúdo carregado estiver ausente 219

Carregue as seções do conteúdo 221

Envie formulários usando Get e Post 223

Use POST para enviar formulários de contato sem

recarregar a página 225

Trabalhe com os dados XML 229

Analise dados XML internos e crie HTML 231

Trabalhe com dados JSON 233

Recupere os dados JSON internos e crie HTML 236

Crie um widget de usuário Delicious recebendo dados JSONP

de solicitações de API 237

Crie um widget das principais críticas do Yelp com JSONP

por meio da API do Yelp 243

Obtenha aprovação para a chave de API do Yelp 245

Use a API do Yelp para exibir críticas baseadas em números

de telefone 245

Capítulo 10: Criando e usando plug-ins jQuery 253

Conheça os plug-ins 254

Incorpore um plug-in jQuery ao site 255

Incorpore a jQuery UI ao site 255

Download da jQuery UI 257

Adicione a jQuery UI ao site 257

Compreenda como os widgets da jQuery UI

funcionam 258

Personalize o design da jQuery UI 258

Crie um tema para a UI com o Th emeRoller 260

Use os temas da jQuery UI 263

Incorpore os recursos da jQuery UI ao site 263

Incorpore plug-ins jQuery populares ao site 271

Use a jQuery Tools 271

Fancybox 274

Crie seu primeiro plug-in jQuery 276

Faça um rascunho do plug-in 277

Compreenda a estrutura do plug-in 278

Defi na as opções para o plug-in 278

Crie o plug-in 279

Como distribuir um plug-in jQuery 286

Prepare o plug-in jQuery para distribuição 286

(11)

Capítulo 11: Desenvolvendo para a Web móvel com jQuery 289

Crie para a Web móvel usando jQuery 290

Navegadores móveis 290

Compreenda CSS3 291

Compreenda HTML5 292

Confi guração para iniciar o Web design móvel 293

Use o navegador Safari Mobile do Apple iPhone 295

Use o navegador do Google Android 295

Aplique a exibição de acordo com o smartphone do usuário 297

Desenvolva sites e aplicativos Web móveis com jQuery 298

Introdução ao preview do jQuery Mobile 298

Frameworks mobile 298

Use o Appcelerator Titanium Mobile 298

Use o plug-in jQtouch 300

Capítulo 12: Procurando recursos jQuery 303

Acompanhe o crescimento da jQuery 304

Use o site da jQuery 305

Use a documentação da API da jQuery 305

Procure tutoriais da jQuery 306

Participe de uma conferência ou meetup da jQuery 306

Envie bugs para o rastreador de bugs 308

Participe do fórum da jQuery 310

Outros recursos de Web design e desenvolvimento Web 310

(12)

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, fi quei 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 confi gurar e defi nir 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 fi m 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.

(13)

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 confi gurado um plug-in, mas ainda não sabe muito bem como criar sua própria jQuery. Talvez você tenha fi cado 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.

(14)

PARTE

I

INTRODUÇÃO

A JQUERY E

JAVASCRIPT

Capítulo 1:

Introdução a jQuery

(15)

1

CAPÍTULO

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 defi nido 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.

INTRODUÇÃO

A JQUERY

(16)

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ífi co, 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 confi guradas 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 fi ca 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.

(17)

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 soft ware da Microsoft , por exemplo, não tem o código aberto, é um soft ware proprietário da Microsoft . A Microsoft emprega seus próprios programadores para o desenvolver e depois vende seu soft ware por uma taxa de licenciamento. A taxa de licenciamento permite a utilização do soft ware, geralmente por um período defi nido de tempo, e também o acesso ao suporte da Microsoft caso haja problemas.

O soft ware 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 soft ware 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 soft ware 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 Soft ware Distribution). A licença BSD permite que o soft ware seja distribuído como um soft ware de cessão livre, que apresenta o menor número de restrições para fi nalidades 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ífi ca da YUI.

function handleClick(e) {

(18)

}

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 fi ca 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 à confi guraçã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,

(19)

destinando-se a desenvolvedores front-end experientes, o que difi culta 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 signifi ca que a jQuery não tenha um lado avançado.

A Figura 1-1 mostra a página inicial da jQuery: http://jquery.com.

(20)

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 profi ssionais à 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 fi cou 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

(21)

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 Netfl ix fazem parte do número crescente de empresas que utilizam a jQuery em seus sites.

O Netfl ix, site que oferece o aluguel de fi lmes 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 fi lme, permitindo que o usuário visualize mais informações sem sair da página.

Figura 1-2: O site do Netfl ix

Mostrando como jQuery funciona com páginas Web

A jQuery é fácil de ser confi gurada. Assim como outras bibliotecas JavaScript, é inserida no topo da página entre as tags <head> </head>. É desta maneira que se inclui a biblioteca JavaScript jQuery no site:

<!doctype html> <html> <head>

(22)

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.

(23)

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 verifi car o changelog com frequência; ele é uma seção que defi ne cada versão e as alterações feitas à biblioteca, para identifi car 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 signifi ca 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.

(24)

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 infi nitas. O que mais gosto na jQuery é que ela proporciona uma base sobre a qual podemos construir, mas não fi camos 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 fi cará 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 profi ssionais. 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.

(25)

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ífi cas 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 confi gurar 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 especifi caçõ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.

(26)

A jQuery oferece suporte à CSS3 apenas para novos seletores. Mas o que isso signifi ca? 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 defi nição do estilo do conteúdo de acordo com seus atributos, para que fi ltremos de acordo com valores específi cos encontrados nos atributos. Observe este código de exemplo:

p[title=*foo] {background:black;color:white}

<p class="text" title="food is good foo you">This is my sample text</p>

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 difi cilmente é o caso, esse link não funcionará e não haverá método de contingência para permitir que a ajuda seja visualizada.

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.

<!doctype html> <html> <head> <title>Unobtrusive jQuery</title> <script type="text/javascript"> $(document).ready(){ $(".help-link").click(function() { var linkHref = $(this).attr('href');

window.open(linkHref,'help window', 'height=800,width=600,toolbar=no'); return false; }); }); </script> </head> <body>

</html>

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.

(27)

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 certifi carmos de que ofereçam suporte a esses recursos. A maioria dos Web designers e desenvolvedores Web utilizou a degradação harmoniosa confi gurando folhas de estilo específi cas 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.

Please upgrade your browser or turn on JavaScript, as your browser is not working with our Website.

</noscript>

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.

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) fi cam 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 confi gurar seus sites.

(28)

CAPÍTULO

2

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 confi gurar um ambiente de desenvolvimento local opcional, escolher a opção correta de download de jQuery e confi gurar a biblioteca jQuery que será incluída no site. Também explica a funcionalidade do

wrapper da jQuery.

COMEÇANDO

A USAR JQUERY

(29)

CONFIGURE O AMBIENTE DE DESENVOLVIMENTO

Para começar a confi guraçã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 soft ware é 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 confi gurar 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 fi nal 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 signifi ca 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 signifi ca 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 confi gurar 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 confi guraçõ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 confi gurações que permitirão o compartilhamento de arquivos, monitores, impressoras etc. Se a caixa de seleção já estiver marcada, ignore este passo.

3. Certifi que-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

(30)

vermelho deve fi car 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) fi cam no diretório –/Sites, de maneira semelhante à confi guração de um servidor Web. Faço todo o meu desenvolvimento local utilizando esse tipo de confi guraçã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

(31)

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 confi rmaçã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 fi nal do processo de instalação.

(32)

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.

(33)

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 confi rmação da instalação do Firebug após a reinicialização do navegador

Ícone do Firebug

(34)

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. Prefi ro sempre me certifi car de que a HTML está sendo criada adequadamente antes de continuar. A Figura 2-9 mostra um exemplo de como fi cará 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.

(35)

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

(36)

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 verifi caçõ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 especifi camente para quando uma conexão de Internet não estiver disponível. Para baixar o jQuery, siga estes passos:

(37)

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 signifi ca 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 geografi camente 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 especifi car na URL qual versão da jQuery será usada, como mostrado no seguinte código de exemplo com a jQuery hospedada pelo Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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.)

(38)

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 modifi cada. 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 fi nalidade é 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 minifi caçã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.

(39)

Usuários mais experientes podem desejar usar o Git (soft ware 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 confi gurá-la na página. A biblioteca jQuery pode ser incluída dentro de tags de script e interativamente entre as tags <head></head> do documento HTML, ou podemos incluí-la antes da tag de fechamento </body>.

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 verifi caçã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 confi gurar em comparação com doctypes anteriores, que são difíceis de lembrar.

O seguinte código é o doctype para a HTML 5:

<!DOCTYPE html>

Este exemplo é um documento HTML muito básico que defi ne 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:

<!DOCTYPE html> <html>

<head>

<title>My jQuery Example</title> <link href="css/global.css"/>

//o script vai aqui </script>

</head> <body> </body> </html>

(40)

Também podemos incluir a biblioteca jQuery no fi m 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.

<title>My jQuery Example</title> <link href="css/global.css"/> </head>

<body>

<h1>Hello jQuery!</h1> <div id="page-container">

<p>You can place your jQuery at the end of the page too!</p> </div>

//o script vai aqui </script>

</body> </html>

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:

<title>My jQuery Example</title> <link href="css/global.css"/>

</script> </head> <body> </body> </html>

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.

(41)

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 certifi car 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 certifi carmos 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 confi guração do método do manipulador de eventos document ready:

html> <head>

<title>My jQuery Example</title>

}); </script> </head> <body> </body> </html>

Devemos adquirir o hábito de confi gurar o manipulador do evento document.ready()

e qualquer código jQuery personalizado em um arquivo externo. Esse é o método que prefi ro, 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 certifi co 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 é confi gurada assim:

(42)

//o script vai aqui }); </script> </head> <body> </body> </html>

Para explicar o wrapper da jQuery, preciso mostrar passo a passo como confi gurar a declaração document. ready(). O primeiro passo envolve a confi guraçã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"); });