this is a wonderful piece of shit, enjoy! ti les more! javascript jquery, scipting! anevase vathmo gamoto!
Descrição: this is a wonderful piece of shit, enjoy! ti les more! javascript jquery, scipting! anevase vathmo gamoto!
Ajax Com JQuery
Cours jqureyDescription complète
jqueryDeskripsi lengkap
Full description
Descripción: Javascript presentation in Spanish
This book is helpful for web development AngularJS, JavaScript, And JQuery All in One, Sams Teach Yourself AngularJS, JavaScript, And JQuery All in One, Sams Teach Yourself
Testes Unitários Com Javascript e JasmineDescrição completa
JavaScriptDescripción completa
Descripción completa
Contiene todo la infromacion referente a la programación de javascriptDescripción completa
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:
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
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
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
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
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: <script type="text/javascript" src="jquery-1.4.2.js"> <script type="text/javascript"> 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 <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; }); }); 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
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: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
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: <script src="js/jquery.js" type="text/javascript"> <script type="text/javascript"> //o script vai aqui
