Professional Documents
Culture Documents
Jquery Fundamentals Book PT BR PDF
Jquery Fundamentals Book PT BR PDF
(jQuery Fundamentals)
Rebecca Murphey [http://www.rebeccamurphey.com]
ndice
1. Bem vindo ..................................................................................................................... 1
Obtendo o cdigo ....................................................................................................... 1
Software ................................................................................................................... 1
Adicionando JavaScript sua pgina ............................................................................. 1
Debugando JavaScript ................................................................................................. 2
Exerccios ................................................................................................................. 2
Convenes usadas neste livro. ..................................................................................... 2
Material de referncia ................................................................................................. 3
I. JavaScript 101 ................................................................................................................ 4
2. O Bsico de JavaScript ............................................................................................ 5
Introduo ......................................................................................................... 5
O Bsico de sintaxe ............................................................................................ 5
Operadores ........................................................................................................ 5
Operadores Bsicos ..................................................................................... 5
Operaes sobre nmeros & Strings ............................................................... 6
Operadores lgicos ..................................................................................... 6
Operadores de comparao ........................................................................... 7
Cdigo condicional ............................................................................................. 7
Coisas Verdadeiras e Falsas ......................................................................... 8
Associao Condicional de Variveis Com o Operador Ternrio .......................... 9
Declarao Switch ...................................................................................... 9
Laos .............................................................................................................. 10
O lao for ................................................................................................ 10
O lao while ............................................................................................ 11
O lao do-while ........................................................................................ 11
Parando e continuando ............................................................................... 12
Palavras Reservadas .......................................................................................... 12
Arrays ............................................................................................................. 14
Objetos ........................................................................................................... 15
Funes ........................................................................................................... 16
Usando funes ........................................................................................ 16
Funes annimas autoexecutveis ............................................................... 17
Funes como argumento ........................................................................... 17
Testando Tipo .................................................................................................. 18
Escopo ............................................................................................................ 18
Closures .......................................................................................................... 20
II. jQuery: Conceitos bsicos .............................................................................................. 22
3. O bsico de jQuery ............................................................................................... 23
$(document).ready() .......................................................................................... 23
Selecionando elementos ..................................................................................... 23
Minha seleo contm algum elemento? ........................................................ 25
Salvando selees ..................................................................................... 25
Refinando & Filtrando Selees .................................................................. 26
Seletores relacionados formulrios ............................................................. 26
Trabalhando com selees .................................................................................. 27
Encadeamento .......................................................................................... 27
Getters & Setters ...................................................................................... 28
CSS, Styling, & Dimenses ................................................................................ 28
Usando classes do CSS para estilos .............................................................. 28
Dimenses ............................................................................................... 29
Atributos ......................................................................................................... 29
iii
Fundamentos de jQuery
(jQuery Fundamentals)
4.
5.
6.
7.
Travessia .........................................................................................................
Manipulando elementos .....................................................................................
Obtendo e setando informaes sobre elementos .............................................
Movendo, copiando e removendo elementos. .................................................
Criando novos elementos ...........................................................................
Manipulando atributos ...............................................................................
Exerccios ........................................................................................................
Selecionando ............................................................................................
Atravessamento ........................................................................................
Manipulando ............................................................................................
Ncleo do jQuery ..................................................................................................
$ vs $() ........................................................................................................
Mtodos Utilitrios ...........................................................................................
Verificando tipos ..............................................................................................
Mtodos de Dados ............................................................................................
Deteco de Navegador & Funcionalidades ...........................................................
Evitando Conflitos com Outras Bibliotecas ............................................................
Eventos ...............................................................................................................
Introduo .......................................................................................................
Conectando Eventos a Elementos ........................................................................
Conectando Eventos para Executar Apenas uma vez ........................................
Desconectando Eventos ..............................................................................
Usando Namespaces com Eventos ...............................................................
Por Dentro da Funo Manipuladora de Evento ......................................................
Disparando Eventos ...........................................................................................
Aumentando a Performance com Delegao de Evento ............................................
Desvinculando Eventos Delegados ...............................................................
Auxiliares de Eventos ........................................................................................
$.fn.hover ..........................................................................................
$.fn.toggle ........................................................................................
Exerccios ........................................................................................................
Criando uma dica de Input .........................................................................
Adicionando navegao por abas .................................................................
Efeitos .................................................................................................................
Viso Geral .....................................................................................................
Efeitos Embutidos .............................................................................................
Mudando a Durao de Efeitos Embutidos ....................................................
Fazendo algo quando um Efeito tiver Terminado ............................................
Efeitos customizados com $.fn.animate ..........................................................
Easing .....................................................................................................
Controlando efeitos ...........................................................................................
Exerccios ........................................................................................................
Mostrando texto oculto ..............................................................................
Criando menus dropdown ...........................................................................
Crie um slideshow ....................................................................................
Ajax ....................................................................................................................
Introduo .......................................................................................................
Conceitos Chave ...............................................................................................
GET vs. POST .........................................................................................
Tipos de dados .........................................................................................
A de assncrono .....................................................................................
Regra da mesma origem e JSONP ...............................................................
Ajax e o Firebug ......................................................................................
Mtodos do jQuery relacionados ao Ajax ..............................................................
iv
30
30
31
31
33
34
34
34
35
35
36
36
36
37
38
39
39
40
40
40
40
41
41
41
42
42
43
43
43
44
44
44
44
46
46
46
46
47
47
48
48
49
49
49
49
50
50
50
50
50
51
51
51
52
Fundamentos de jQuery
(jQuery Fundamentals)
$.ajax ......................................................................................................
Mtodos de convenincia ...........................................................................
$.fn.load ............................................................................................
Ajax e formulrios ............................................................................................
Trabalhando com JSONP ...................................................................................
Eventos do Ajax ...............................................................................................
Exerccios ........................................................................................................
Carregar contedo externo ..........................................................................
Carregando contedo usando JSON ..............................................................
8. Plugins ................................................................................................................
O que exatamente um plugin? ..........................................................................
Como criar um plugin bsico ..............................................................................
Procurando & Avaliando Plugins .........................................................................
Escrevendo Plugins ...........................................................................................
Escrevendo plugins com estado com a fbrica de widgets do jQuery UI .......................
Adicionando mtodos a um Widget ..............................................................
Trabalhando com Opes de Widget ............................................................
Adicionando Callbacks ..............................................................................
Limpando ................................................................................................
Concluso ................................................................................................
Exerccios ........................................................................................................
Fazendo uma tabela ordenvel .....................................................................
Escreva um plugin de striping para tabelas ....................................................
III. Tpicos Avanados ......................................................................................................
Esta seo um trabalho em andamento .......................................................................
9. Melhores prticas para performance ..........................................................................
Armazene o length em loops ..............................................................................
Adicione novo contedo fora de um loop ..............................................................
Mantenha as coisas DRY ...................................................................................
Cuidado com funes annimas ..........................................................................
Otimize seletores ..............................................................................................
Seletores baseados em ID ...........................................................................
Especificidade ..........................................................................................
Evite o seletor universal .............................................................................
Use Delegao de Evento ...................................................................................
Desanexe elementos para trabalhar com eles ..........................................................
Use folhas de estilo para mudar o CSS em vrios elementos .....................................
Use $.data ao invs de $.fn.data ................................................................
No faa nada quando no tiver elementos ............................................................
Definio de Varivel ........................................................................................
Condicionais ....................................................................................................
No trate o jQuery como uma Caixa Preta .............................................................
10. Organizao de cdigo .........................................................................................
Viso Geral .....................................................................................................
Conceitos Chave .......................................................................................
Encapsulamento ................................................................................................
O literal objeto .........................................................................................
O Module Pattern .....................................................................................
Gerenciando dependncias ..................................................................................
Obtendo o RequireJS .................................................................................
Utilizando o RequireJS com jQuery .............................................................
Criando mdulos reusveis com RequireJS ....................................................
Otimizando seu cdigo: A ferramenta de build do RequireJS .............................
Exerccios ........................................................................................................
52
54
55
56
56
57
57
57
58
59
59
59
61
61
64
65
67
68
70
70
71
71
71
72
73
74
74
74
74
75
76
76
76
76
77
77
77
78
78
78
79
79
80
80
80
80
80
84
87
87
87
88
90
91
Fundamentos de jQuery
(jQuery Fundamentals)
Crie um mdulo Portlet .............................................................................
11. Eventos Customizados ..........................................................................................
Introduo Eventos Customizados .....................................................................
Uma aplicao de amostra ..........................................................................
vi
91
92
92
94
Lista de Exemplos
1.1. Um exemplo de JavaScript inline .................................................................................... 1
1.2. Um exemplo de incluso de JavaScript externo .................................................................. 1
1.3. Exemplo de um exemplo ............................................................................................... 3
2.1. Uma simples declarao de varivel ................................................................................ 5
2.2. Espaos em branco no interferem fora das aspas. .............................................................. 5
2.3. Parnteses indicam precedncia ....................................................................................... 5
2.4. Tabulao melhora a leitura, mas no tem significado especial .............................................. 5
2.5. Concatenao ............................................................................................................... 5
2.6. Multiplicao e diviso .................................................................................................. 5
2.7. Incrementando e decrementando ..................................................................................... 6
2.8. Adio vs. Concatenao ............................................................................................... 6
2.9. Forando uma string atuar como um nmero ..................................................................... 6
2.10. Forando uma string a atuar como um nmero (usando o operador unrio de adio) ................ 6
2.11. Os operadores lgicos AND e OR ................................................................................. 6
2.12. Operadores de comparao ........................................................................................... 7
2.13. Controle de fluxo ........................................................................................................ 8
2.14. Valores que so avaliados como true ........................................................................... 8
2.15. Valores que so avaliados como false ......................................................................... 8
2.16. O operador ternrio ..................................................................................................... 9
2.17. Uma declarao switch ................................................................................................ 9
2.18. Laos ...................................................................................................................... 10
2.19. Um lao for tpico .................................................................................................. 11
2.20. Um lao while tpico ............................................................................................... 11
2.21. Um lao while com uma condio e incremento combinado ............................................ 11
2.22. Um lao do-while ................................................................................................. 12
2.23. Parando um lao ....................................................................................................... 12
2.24. Pulando para a prxima iterao de um loop .................................................................. 12
2.25. Um array simples ...................................................................................................... 14
2.26. Acessando os itens do array pelo ndice ........................................................................ 15
2.27. Testando o tamanho de um array ................................................................................. 15
2.28. Mudando o valor de um item do array .......................................................................... 15
2.29. Adicionando elementos em um array ............................................................................ 15
2.30. Trabalhando com arrays ............................................................................................. 15
2.31. Criando um "literal objeto" ......................................................................................... 15
2.32. Declarao de Funo ................................................................................................ 16
2.33. Expresso de Funo Nomeada .................................................................................... 16
2.34. Uma funo simples .................................................................................................. 16
2.35. Uma funo que retorna um valor ................................................................................ 16
2.36. Uma funo que retorna outra funo ........................................................................... 17
2.37. Uma funo annima auto-executvel ........................................................................... 17
2.38. Passando uma funo annima como argumento ............................................................. 17
2.39. Passando uma funo nomeada como argumento ............................................................ 17
2.40. Testando o tipo de vrias variveis ............................................................................... 18
2.41. Funes tem acesso a variveis definidas num mesmo escopo ............................................ 19
2.42. Cdigo fora do escopo em que uma varivel foi definida no tem acesso varivel. ............... 19
2.43. Variveis com o mesmo nome podem existir em escopos diferentes com valores diferentes.
..... 19
2.44. Funes podem "ver" mudanas em valores de variveis depois que a funo definida .......... 20
2.45. Insanidade do Escopo ................................................................................................ 20
2.46. Como bloquear no valor de i? .................................................................................... 21
2.47. Bloqueando no valor de i com uma closure ................................................................... 21
3.1. Um bloco $(document).ready() ...................................................................................... 23
vii
Fundamentos de jQuery
(jQuery Fundamentals)
3.2. Atalho para $(document).ready() ...................................................................................
3.3. Passando uma funo nomeada ao invs de uma annima ...................................................
3.4. Selecionando elementos por ID .....................................................................................
3.5. Selecionando elementos pelo nome da classe ...................................................................
3.6. Selecionando elementos por atributo ..............................................................................
3.7. Selecionando elementos atravs da composio de seletores CSS .........................................
3.8. Pseudo-seletores .........................................................................................................
3.9. Testando se uma seleo contm elementos. ....................................................................
3.10. Armazenando selees em variveis .............................................................................
3.11. Refinando selees ....................................................................................................
3.12. Usando pseudo-seletores relacionados formulrios ........................................................
3.13. Encadeamento ..........................................................................................................
3.14. Formatando cdigo encadeado .....................................................................................
3.15. Restaurando sua seleo original usando $.fn.end .......................................................
3.16. O mtodo $.fn.html usado como setter ....................................................................
3.17. O mtodo html usado como getter ................................................................................
3.18. Pegando propriedades CSS .........................................................................................
3.19. Setando propriedades CSS ..........................................................................................
3.20. Trabalhando com classes ............................................................................................
3.21. Mtodos bsicos de dimenses ....................................................................................
3.22. Setting attributes .......................................................................................................
3.23. Getting attributes ......................................................................................................
3.24. Movendo pelo DOM usando mtodos de travessia. ..........................................................
3.25. Iterando sobre uma seleo .........................................................................................
3.26. Mudando o HTML de um elemento. .............................................................................
3.27. Movendo elementos usando outras formas .....................................................................
3.28. Fazendo uma cpia de um elemento .............................................................................
3.29. Criando novos elementos ............................................................................................
3.30. Criando um novo elemento com um objeto atributo .........................................................
3.31. Inserindo um novo elemento na pgina .........................................................................
3.32. Criando e adicionando um elemento pgina ao mesmo tempo ..........................................
3.33. Manipulando um nico atributo ...................................................................................
3.34. Manipulando mltiplos atributos ..................................................................................
3.35. Usando uma funo para determinar um novo valor de atributo ..........................................
4.1. Verificando o tipo de um valor arbitrrio ........................................................................
4.2. Armazenando e recuperando dados relacionados a um elemento ..........................................
4.3. Armazenando um relacionamento entre elementos usando $.fn.data ................................
4.4. Colocando jQuery em modo no-conflict ..........................................................................
4.5. Usando o $ dentro de uma funo annima auto-executada .................................................
5.1. Vinculando Eventos Usando um Mtodo de Convenincia ..................................................
5.2. Vinculando eventos usando o mtodo $.fn.bind ..........................................................
5.3. Vinculando eventos usando o mtodo $.fn.bind com dados ...........................................
5.4. Trocando manipuladores usando o mtodo $.fn.one ......................................................
5.5. Desconectando todos os manipuladores de clique em uma seleo ........................................
5.6. Desconectando um manipulador de clique especfico .........................................................
5.7. Usando Namespaces com eventos ..................................................................................
5.8. Impedindo um link de ser seguindo ................................................................................
5.9. Disparando um evento do jeito certo ..............................................................................
5.10. Delegao de Evento usando $.fn.delegate ............................................................
5.11. Delegao de Evento usando $.fn.live ....................................................................
5.12. Desvinculando eventos delegados .................................................................................
5.13. A funo auxiliar hover .............................................................................................
5.14. A funo auxiliar toggle .............................................................................................
6.1. Um uso bsico de um efeito embutido ............................................................................
viii
23
23
23
23
24
24
24
25
26
26
27
27
27
27
28
28
28
28
29
29
29
30
30
30
31
32
32
33
33
33
33
34
34
34
38
38
38
39
39
40
40
40
41
41
41
41
42
42
43
43
43
44
44
46
Fundamentos de jQuery
(jQuery Fundamentals)
6.2. Configurando a durao de um efeito .............................................................................
6.3. Acrescentando definies de velocidade customizadas ao jQuery.fx.speeds ...................
6.4. Executando cdigo quando uma animao tiver completado ................................................
6.5. Executa uma callback mesmo se no houver elementos para animar .....................................
6.6. Efeitos customizados com $.fn.animate ....................................................................
6.7. Easing por propriedade ................................................................................................
7.1. Usando o mtodo core $.ajax ........................................................................................
7.2. Usando os mtodos de convenincia do jQuery ................................................................
7.3. Usando o $.fn.load para popular um elemento ............................................................
7.4. Usando o $.fn.load para popular um elemento baseado no seletor ...................................
7.5. Transformando os dados de um formulrio em uma string de requisio ................................
7.6. Criando um array de objetos contendo dados do formulrio. ...............................................
7.7. Usando YQL e JSONP ................................................................................................
7.8. Configurando um indicador de carregamento usando eventos do Ajax ...................................
8.1. Criando um plugin para adicionar e remover uma classe no hover ........................................
8.2. O Padro de Desenvolvimento de Plugins do Mike Alsup ...................................................
8.3. Um plugin simples, stateful utilizando a fbrica de Widgets do jQuery UI. .............................
8.4. Passando opes para um widget ...................................................................................
8.5. Setando opes default para um widget ..........................................................................
8.6. Criando mtodos widget ..............................................................................................
8.7. Chamando mtodos numa instncia do plugin ..................................................................
8.8. Respondendo quando a opo setada ...........................................................................
8.9. Provendo callbacks para estenso do usurio ...................................................................
8.10. Vinculando eventos do widget ..................................................................................
8.11. Adicionando um mtodo destroy um widget ................................................................
10.1. Um literal objeto .......................................................................................................
10.2. Usando um literal de objeto para uma feature do jQuery ...................................................
10.3. O module pattern ......................................................................................................
10.4. Usando o module patterns numa funcionalidade do jQuery ................................................
10.5. Utilizando o RequireJS: Um exemplo simples ................................................................
10.6. Um simples arquivo JavaScript com dependncias ..........................................................
10.7. Definindo um mdulo do RequireJS que no tem dependncias .........................................
10.8. Definindo um mdulo do RequireJS com dependncias ....................................................
10.9. Definindo um mdulo do RequireJS que retorna uma funo .............................................
10.10. Um arquivo de configurao de build do RequireJS .......................................................
ix
46
47
47
47
48
48
53
55
56
56
56
56
57
57
62
63
64
65
65
66
67
67
68
69
70
81
83
84
86
87
88
89
89
89
90
Obtendo o cdigo
O cdigo que iremos usar neste livro est num repositrio do Github [http://github.com/rmurphey/
jqfundamentals]. Voc pode baixar um arquivo .zip ou .tar contendo o cdigo e ento descompacta-lo para
usar no seu servidor. Se voc souber usar o git, voc ser bem vindo para clonar ou 'forkar' o repositrio.
Software
Voc precisar das seguintes ferramentas para aproveitar as aulas ao mximo:
O navegador Firefox
A extenso Firebug para o Firefox
Um editor de textos
Para as partes com Ajax: um servidor local (como o MAMP ou WAMP), ou um cliente FTP ou SSH
para acessar um servidor remoto.
Bem vindo
Debugando JavaScript
Uma ferramenta de debugging essencial para desenvolvimento em JavaScript. O Firefox prov um
debugger atravs da extenso Firebug; Chrome e Safari possuem consoles embutidos.
Cada console oferece:
Editores para testar JavaScript.
Um inspetor para analisar o cdigo gerado da sua pgina
Um visualizador de rede ou recursos, para examinar as requisies de rede
Quando voc estiver escrevendo cdigo em JavaScript, voc pode usar os seguintes mtodos para enviar
mensagens ao console:
console.log() para enviar mensagens de log
console.dir() para registrar um objeto navegvel no log
console.warn() para registrar avisos (warnings) no log
console.error() para registrar mensagens de erro no log
Outros mtodos para console esto disponveis, apesar deles terem uma diferena em cada browser. Os
consoles tambm tem a habilidade de setar breakpoints e observar expresses no seu cdigo para propsitos
de debug.
Exerccios
A maioria dos captulos no livro so concludos com um ou mais exerccios. Para alguns exerccios, voc
poder trabalhar diretamente no Firebug; para outros, voc precisar incluir outros scripts depois da tag
de script do jQuery nos exerccios individuais.
Em alguns casos, voc precisar consultar a documentao do jQuery para concluir um exerccio, pois, por
praticidade, no cobriremos todas as informaes que so relevantes no livro. O jQuery uma biblioteca
grande, e aprender a encontrar respostas na documentao uma parte importante no processo.
Aqui vo algumas sugestes para combater estes problemas:
Primeiro, tenha certeza que voc entende completamente o problema que voc ir pedir por soluo.
Depois, descubra quais elementos voc precisar acessar para conseguir resolver o problema e determine
como voc ir conseguir estes elementos. Use o Firebug para verificar se voc est obtendo os elementos
que est procurando.
Por ltimo, descrubra o que voc precisa fazer com os elementos para resolver o problema. Pode ser
til escrever comentrios explicando o que voc ir fazer antes de tentar escrever cdigo.
No tenha medo de errar! No tente fazer seu cdigo ficar perfeito de incio! Errar e experimentar solues
parte do aprendizado da biblioteca, e voc ser um melhor desenvolvedor com isso. Exemplos de solues
para estes exerccios esto localizados no dir /solutions no cdigo de exemplo.
Bem vindo
referidos como $.methodName. Se no fizer muito sentido pra voc, no preocupe - ficar mais claro
medida que voc avanar no livro.
Nota
Notas sob um tpico ir aparecer assim.
Material de referncia
H muitos artigos e posts de blog por a que falam de alguma forma de jQuery. Alguns so fenomenais;
outros so certamente errados. Quando voc ler um artigo sobre jQuery, tenha certeza que est falando
sobre a mesma verso que voc est usando e resista tentao de somente copiar e colar - leve um tempo
para entender o cdigo no artigo.
Aqui vo alguns excelentes recursos para usar durante seu aprendizado em jQuery. O mais importante de
todos o cdigo fonte do jQuery: ele contm, em forma de cdigo, a documentao completa da biblioteca.
No uma caixa preta - seu conhecimento sobre a biblioteca crescer exponencialmente se voc gastar um
tempo visitando-o agora e novamente - e eu recomendo fortemente que voc favorite-o no seu navegador
e visite-o com frequncia.
O cdigo fonte do jQuery [http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js]
A documentao do jQuery [http://api.jquery.com]
O frum do jQuery [http://forum.jquery.com/]
Favoritos no Delicious [http://delicious.com/rdmey/jquery-class]
Canal IRC #jquery na Freenode [http://docs.jquery.com/Discussion#Chat_.2F_IRC_Channel]
O Bsico de sintaxe
Entendendo declaraes, nomes de variveis, espao, e outras sintaxes bsicas do JavaScript.
'ol mundo';
Operadores
Operadores Bsicos
Operadores bsicos permitem que voc manipule valores.
O Bsico de JavaScript
// 12. uh oh
Exemplo 2.10. Forando uma string a atuar como um nmero (usando o operador
unrio de adio)
console.log(foo + +bar);
Operadores lgicos
Operadores lgicos permitem que voc teste uma srie de operadores usando as operaes lgicas AND
e OR.
O Bsico de JavaScript
Apesar de no estar claro pelo exemplo, o operador || retorna o valor do primeiro operador verdadeiro,
ou, em casos em que nenhum operador seja verdadeiro, ele ir retornar o ltimo dos operandos. O operador
&& retorna o valor do primeiro operando falso, ou o valor do ltimo operador se ambos operadores forem
verdadeiros.
Tenha certeza de consultar Coisas Verdadeiras e Falsas para maiores detalhes sobre quais valores so
avaliados como true e quais so avaliados como false.
Nota
Algumas vezes, voc ver alguns desenvolvedores usando estes operadores lgicos para controle
de fluxo ao invs de utilizar o if. Por exemplo:
// faz alguma coisa com foo se foo for verdadeiro
foo && doSomething(foo);
// seta bar para baz se baz verdadeiro;
// seno for verdadeiro, seta-o para retornar
// o valor de createBar()
var bar = baz || createBar();
Este estilo elegante e agradevelmente curto; por isso, pode ser difcil ler, especialmente por
iniciantes. Eu o mostro aqui para que voc possa reconhece-lo no cdigo que voc l, mas eu no
recomendo o uso at que voc esteja extremamente confortvel com o que isto significa e como
voc espera que se comporte.
Operadores de comparao
Operadores de comparao premite testar quando valores so equivalentes ou quando so idnticos.
foo
bar
baz
bim
=
=
=
=
1;
0;
'1';
2;
foo == bar;
foo != bar;
foo == baz;
// retorna false
// retorna true
// retorna true; cuidado!
// retorna false
// retorna true
// retorna true
// retorna false
// retorna true
// retorna true
Cdigo condicional
Algumas vezes voc s ir querer executar um bloco de cdigo sob certas condies. Controle de fluxo atravs dos blocos if e else - permite que voc execute uma parte do cdigo em certas condies.
O Bsico de JavaScript
Nota
As chaves no so estritamente necessrias quando voc tem blocos if com uma s linha, porm,
se forem usados consistentemente, mesmo que no sejam estritamente requeridos, eles podem
fazer seu cdigo ficar mais legvel.
Esteja atento para no definir funes com o mesmo nome vrias vezes dentro de blocos de cdigo if/
else, seno pode haver resultados inesperados.
O Bsico de JavaScript
Declarao Switch
Ao invs de usar uma srie de blocos if/else if/else, algumas vezes pode ser til usar a declarao switch.
[Definition: Declaraes Switch olham o valor da varivel ou expresso e executa blocos de cdigo
diferentes dependendo do valor.]
O Bsico de JavaScript
},
'default' : function() {
alert('todo o resto est ok');
}
};
if (stuffToDo[foo]) {
stuffToDo[foo]();
} else {
stuffToDo['default']();
}
Ns daremos uma olhada mais profunda em objetos mais a frente neste captulo.
Laos
Laos permitem que voc execute um bloco de cdigo por um certo nmero de vezes.
O lao for
O lao for constitudo de quatro declaraes e possui a seguinte estrutura:
for ([inicializao]; [condio]; [incremento])
[corpoDoLao]
A declarao inicializao executada somente uma vez, antes do loop iniciar. Ela lhe d uma
oportunidade de preparar ou declarar qualquer varivel.
A declarao condio executada antes de cada iterao, e o seu valor de retorno decide se o loop continua
ou no. Se a declarao condicional for interpretada como um valor falso, o lao para de ser executado.
A declarao incremento executada no fim de cada iterao e lhe d a oportunidade de mudar o estado
de variveis importantes. Tipicamente, isso ir envolver o incremento ou decremento de um contador e
assim fazer com que o loop sempre chegue ao seu fim.
A declarao corpoDoLao o que executado em cada iterao. Ele pode conter o que voc quiser.
Tipicamente, voc ter mltiplas declaraes que precisam ser executadas e portanto voc ir coloc-las
dentro de um bloco de cdigo ({...}).
Este um uso tpico para o lao for:
10
O Bsico de JavaScript
O lao while
O lao while similar a uma declao if, exceto que seu corpo continuar executando at que a condio
seja interpretada como falso.
while ([condio]) [corpoDoLao]
Este um lao while tpico:
O lao do-while
quase a mesma coisa do lao while, exceto pelo fato que o corpo do lao executado pelo menos uma
vez antes da condio ser testada.
do [corpoDoLao] while ([condio])
Este um exemplo de cdigo com do-while:
11
O Bsico de JavaScript
Parando e continuando
Geralmente, um loop termina porque a declarao condicional no interpretada como verdadeira, mas
possvel parar um lao dentro do corpo do mesmo utilizando a declarao break.
Palavras Reservadas
JavaScript possui um nmero de palavras reservadas, ou palavras que tm significado especial na
linguagem. Voc deve evitar usar estas palavras em seu cdigo, exceto quando voc as usar com seu
significado desejado.
break
case
12
O Bsico de JavaScript
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
abstract
boolean
byte
char
class
const
debugger
13
O Bsico de JavaScript
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
Arrays
Arrays so listas de valores indexadas por zero. Eles so uma forma til de armazenar um conjunto de
itens relacionados do mesmo tipo (como strings), apesar que na realidade, um array pode incluir mltiplos
tipos de itens, incluindo outros arrays.
14
O Bsico de JavaScript
Objetos
Objetos contm um ou mais pares chave-valor. A poro chave pode ser qualquer string. A poro valor
pode ser qualquer tipo de valor: um nmero, uma string, um array, uma funo ou at um outro objeto.
[Definition: Quando um desses valores uma funo, chamado de mtodo do objeto.] Seno, elas so
chamadas de propriedades.
Na prtica, quase tudo em JavaScript um objeto arrays, funes nmeros e at strings - e todos eles
possuem propriedades e mtodos.
// loga 'ol'
// loga 'Rebecca'
15
O Bsico de JavaScript
Nota
Ao criar literais objeto, voc deve notar que a poro chave de cada par chave-valor pode ser
escrito como qualquer identificador vlido em JavaScript, uma string (entre aspas) ou um nmero:
var myObject = {
validIdentifier: 123,
'some string': 456,
99999: 789
};
Literais objeto podem ser extremamente teis para organizao de cdigo; para mais informaes leia
Using Objects to Organize Your Code [http://blog.rebeccamurphey.com/2009/10/15/using-objects-toorganize-your-code/] de Rebecca Murphey.
Funes
Funes contm blocos de cdigo que precisam ser executados repetidamente. As funes podem ter zero
ou mais argumentos, e podem opcionalmente retornar um valor.
Funes podem ser criadas em uma srie de formas:
Usando funes
Exemplo 2.34. Uma funo simples
var greet = function(person, greeting) {
var text = greeting + ', ' + person;
console.log(text);
};
greet('Rebecca', 'Ol');
16
O Bsico de JavaScript
console.log(foo);
// undefined!
17
O Bsico de JavaScript
Testando Tipo
JavaScript oferece um meio de testar o "tipo" de uma varivel. Entretanto, o resultado pode ser confuso
-- por exemplo, o tipo de um Array "objeto".
uma prtica comum usar o operador typeof ao tentar determinar o tipo de um valor especfico.
myFunction;
myObject;
myArray;
myString;
myNumber;
typeof null;
//
//
//
//
//
retorna
retorna
retorna
retorna
retorna
'function'
'object'
'object' -- cuidado!
'string';
'number'
Escopo
"Escopo" refere-se a variveis que esto disponveis em um pedao do cdigo em um determinado tempo.
A falta de entendimento de escopo pode levar a experincias de debugging frustrantes.
Quando uma varivel declarada dentro de uma funo usando a palavra chave var, ela a nica
disponvel para o cdigo dentro daquela funo -- cdigo fora desta funo no podem acessar a varivel.
Por outro lado, funes definidas dentro daquela funo ter acesso varivel declarada.
18
O Bsico de JavaScript
Alm disso, variveis que so declaradas dentro de uma funo sem o cdigo var no so locais
para a funo -- JavaScript ir atravessar a cadeia do escopo para indicar onde a varivel foi definida
anteriormente. Se a varivel no foi previamente definida, ela ser definida no escopo global, onde podem
acontecer consequencias extremamente inesperadas;
Exemplo 2.41. Funes tem acesso a variveis definidas num mesmo escopo
var foo = 'ol';
var sayHello = function() {
console.log(foo);
};
sayHello();
console.log(foo);
// loga 'ol'
// tambm loga 'ol'
Exemplo 2.42. Cdigo fora do escopo em que uma varivel foi definida no tem
acesso varivel.
var sayHello = function() {
var foo = 'ol';
console.log(foo);
};
sayHello();
console.log(foo);
// loga 'ol'
// no loga nada
Exemplo 2.43. Variveis com o mesmo nome podem existir em escopos diferentes
com valores diferentes.
var foo = 'mundo';
var sayHello = function() {
var foo = 'ol';
console.log(foo);
};
sayHello();
console.log(foo);
// loga 'ol'
// loga 'mundo'
19
O Bsico de JavaScript
Exemplo 2.44. Funes podem "ver" mudanas em valores de variveis depois que
a funo definida
var myFunction = function() {
var foo = 'ol';
var myFn = function() {
console.log(foo);
};
foo = 'mundo';
return myFn;
};
var f = myFunction();
f(); // loga 'mundo' -- uh oh
bar();
//
//
//
//
//
bar definida
porque ela no
porque ela foi
ela tem acesso
no tenha
bim();
Closures
Closures so uma extenso do conceito de escopo funes tm acesso a variveis que esto disponveis
no escopo onde a funo foi criada. Se isso confuso, no se preocupe: closures so geralmente entendidas
melhor atravs de um exemplo.
Em Exemplo 2.44, Funes podem "ver" mudanas em valores de variveis depois que a funo
definida ns vimos como as funes tm acesso para modificar valores de variveis. O mesmo tipo de
comportamento existe com funes definidas dentro de laos -- a funo "v" a mudana no valor da
varivel mesmo depois que a funo foi definida, resultando em todos os cliques alertando 4.
20
O Bsico de JavaScript
21
$(document).ready(readyFn);
Selecionando elementos
O conceito mais bsico do jQuery "selecionar alguns elementos e fazer alguma coisa com eles." O
jQuery suporta a maioria dos seletores CSS3, assim como alguns seletores no-padro. Para uma referncia
completa de seletores, visite http://api.jquery.com/category/selectors/.
A seguir, alguns exemplos de tcnicas comuns de seleo.
23
O bsico de jQuery
Nota
Quando voc usa os pseudos-seletores :visible e :hidden, o jQuery testa a visibilidade
atual do elemento, no os atributos visibility ou display do CSS - ou seja, ele olha se
a altura e a largura fsica do elemento na pgina so ambas maiores que zero. No entanto, este
teste no funciona com elementos <tr>; neste caso, o jQuery faz a verificao da propriedade
display do CSS, e considera um elemento como oculto se sua propriedade display for none.
Elementos que no forem adicionados no DOM sero sempre considerados ocultos, mesmo que
o CSS que os afetam torn-los visveis. (Consulte a seo de Manipulao mais adiante neste
captulo para aprender como criar e adicionar elementos ao DOM).
Para referncia, aqui est o cdigo que jQuery usa para determinar se um elemento visvel ou
oculto, com os comentrios adicionados para maior esclarecimento:
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
// o elemento tem 0 de altura e 0 de largura e no uma <tr>?
return width === 0 && height === 0 && !skip ?
// ento deve estar escondido
true :
// mas se o elemento tiver largura e altura e no for uma <tr>
width > 0 && height > 0 && !skip ?
// ento deve estar visvel
false :
// se chamos aqui, o elemento tem largura
// e altura, mas tambm uma <tr>,
// ento verifica a propriedade display para
// decidir se ele esta escondido
jQuery.curCSS(elem, "display") === "none";
};
24
O bsico de jQuery
Escolhendo seletores
Escolher bons seletores uma forma de melhorar a performance do seu JavaScript. Uma pequena
especificidade - por exemplo, incluir um elemento como div quando selecionar elementos pelo
nome da classe - pode ir por um longo caminho. Geralmente, sempre que voc puder dar ao jQuery
alguma dica sobre onde ele pode esperar encontrar o que voc estiver procurando, voc deve dar.
Por outro lado, muita especificidade pode no ser muito bom. Um seletor como #myTable thead
tr th.special um desperdcio se um seletor como #myTable th.special lhe dar o
que voc precisa.
O jQuery oferece muitos seletores baseados em atributo, permitindo que voc selecione elementos
baseados no contedo de atributos arbitrrios usando expresses regulares simplificadas.
// encontre todos elementos <a>s em que o atributo
// rel termine com "thinger"
$("a[rel$='thinger']");
Se por um lado estes seletores podem ser bem teis, eles tambm podem ser extremamente lerdos
- Uma vez eu escrevi um seletor baseado em atributos que travou minha pgina por mltiplos
segundos. Sempre que possvel, faa suas selees usando IDs, nomes de classe e nomes de tags.
Quer saber mais? Paul Irish tem uma excelente apresentao sobre melhorar a performance do
JavaScript [http://paulirish.com/perf], com vrios slides focando especificamente em performace
de seletores.
Salvando selees
Toda vez que voc faz uma seleo, um monte de cdigo executado, e o jQuery no faz caching de
selees para voc. Se voc fez uma seleo que voc talvez precise fazer novamente, voc deve salvar a
seleo numa varivel ao invs de fazer a seleo vrias vezes.
25
O bsico de jQuery
Nota
No Exemplo 3.10, Armazenando selees em variveis, o nome da varivel comea com
um sinal de dlar. Ao invs de outras linguagens, no h nada especial sobre o sinal de dlar
em JavaScript -- apenas outro caracter. Ns o usamos para indicar que a varavel contm
um objeto jQuery. Esta prtica -- um tipo de Notao Hngara [http://en.wikipedia.org/wiki/
Hungarian_notation] -- meramente uma conveno, e no obrigatria.
Uma vez que voc armazenou sua seleo, voc pode chamar os mtodos do jQuery na varivel que voc
armazenou, da mesma forma que voc faria na seleo original.
Nota
Uma seleo somente obtm os elementos que esto na pgina quando voc faz a seleo. Se
voc adicionar elementos na pgina depois, voc ter que repetir a seleo ou ento adicion-la
seleo armazenada na varivel. Selees armazenadas no atualizam automaticamente quando
o DOM muda.
//
//
//
//
//
:checkbox
:checked
:disabled
:enabled
:file
:image
26
O bsico de jQuery
:input
:password
:radio
:reset
:selected
:submit
:text
Encadeamento
Se voc chamar um mtodo numa seleo e este mtodo retornar um objeto jQuery, voc pode continuar
a chamar mtodos do jQuery sem precisar pausar com um ponto-e-vrgula.
27
O bsico de jQuery
Nota
Encadeamento um recurso extraordinariamente poderoso, e muitas bibliotecas adotaram-no
desde que o jQuery o tornou popular. Entretando, deve ser usado com cuidado. Encadeamentos
extensos podem deixar o cdigo extremamente difcil de debugar ou modificar. No h uma regra
que diz o quo grande uma cadeia deve ser -- mas saiba que fcil fazer baguna
Nota
Propriedades CSS que normalmente incluem um hfen, precisam ser acessadas no estilo
camel case em JavaScript. Por exemplo, a propriedade CSS font-size expressada como
fontSize em JavaScript.
28
O bsico de jQuery
escreva regras CSS para classes que descrevam os vrios estados visuais, e ento mude a classe no elemento
que voc quer afetar.
Dimenses
O jQuery oferece uma variedade de mtodos para obter e modificar informaes sobre dimenses e
posies de um elemento.
O cdigo do Exemplo 3.21, Mtodos bsicos de dimenses somente uma introduo muito curta sobre
as funcionalidades de dimenses do jQuery; para detalhes completos sobre os mtodos de dimenso do
jQuery, visite http://api.jquery.com/category/dimensions/.
$('h1').height('50px');
$('h1').height();
$('h1').position();
Atributos
Atributos de elementos podem conter informaes teis para sua aplicao, ento importante saber como
set-los e obt-los.
O mtodo $.fn.attr atua como getter e setter . Assim como os mtodos $.fn.css , $.fn.attr
atuando como um setter, podem aceitar tanto uma chave e um valor ou um objeto contendo um ou mais
pares chave/valor.
29
O bsico de jQuery
Travessia
Uma vez que voc tem uma seleo do jQuery, voc pode encontrar outros elementos usando sua seleo
como ponto de incio.
Para documentao completa dos mtodos de travessia do jQuery, visite http://api.jquery.com/category/
traversing/.
Nota
Seja cuidadoso com travessias de longas distncias nos seus documentos -- travessias complexas
torna imperativo que a estrutura do seu documento permanea a mesma, uma dificuldade
estabilidade, mesmo se voc for o responsvel por criar toda a aplicao desde o servidor at
o cliente. Travessias de um ou dois passos so legais, mas geralmente voc ir querer evitar
travessias que levem voc de um container para outro.
Manipulando elementos
Uma vez que voc fez uma seleo, a diverso comea. Voc pode mudar, mover, remover e clonar
elementos. Voc ainda pode criar novos elementos atravs de uma sintaxe simples
30
O bsico de jQuery
Para uma referncia completa dos mtodos de manipulao do jQuery, visite http://api.jquery.com/
category/manipulation/.
Nota
Mudar coisas em elementos trivial, mas lembre-se que a mudana ir afetar todos os elementos
na seleo, ento se voc quiser mudar um elemento, esteja certo de especific-lo em sua seleo
antes de chamar o mtodo setter
Nota
Quando os mtodos atuam como getters, eles geralmente s trabalham no primeiro elemento
da seleo e eles no retornam um objeto jQuery, portanto voc no pode encadear mtodos
adicionais a eles. Uma exceo notvel $.fn.text; como mencionado acima, ele obtm o
texto para todos os elementos da seleo
$.fn.html
$.fn.text
$.fn.attr
$.fn.width
$.fn.height
$.fn.position
$.fn.val
31
O bsico de jQuery
Clonando elementos
Quando voc usa mtodos como $.fn.appendTo, voc est movendo o elemento; porm, algumas vezes
voc ir querer fazer uma cpia do elemento. Neste caso, voc precisar usar $.fn.clone primeiro.
Nota
Se voc precisa copiar dados e eventos relacionados, esteja certo de passar true como um
argumento para $.fn.clone.
Removendo elementos
H duas formas de remover elementos da pgina: $.fn.remove e $.fn.detach. Voc ir usar
$.fn.remove quando voc quiser remover a seleo permanentemente da pgina; enquanto o mtodo
retorna os elementos removidos, estes elementos no tero seus eventos e dados associados a ele se voc
retorna-los pgina.
Se voc precisa que os dados e eventos persistam, voc ir usar $.fn.detach . Da mesma forma que
$.fn.remove, ele retorna uma seleo, mas tambm mantm os dados e os eventos associados com a
seleo para que voc possa restaurar a seleo para a pgina no futuro.
Nota
O mtodo $.fn.detach extremamente til se voc estiver fazendo uma manipulao pesada
um elemento. Neste caso, bom aplicar um $.fn.detach no elemento da pgina, trabalhar
no seu prprio cdigo, e ento restaura-lo pgina quando voc terminar. Isto evita que voc faa
"toques ao DOM" caros enquanto mantm os dados e eventos do elemento.
32
O bsico de jQuery
Se voc quer deixar um elemento na pgina mas simplesmente quer remover seu contedo, voc pode usar
$.fn.empty para retirar o innerHTML do elemento.
Nota
A sintaxe para adicionar novos elementos pgina to fcil que tentador esquecer que h um
enorme custo de performance por adicionar ao DOM repetidas vezes. Se voc est adicionando
muitos elementos ao mesmo container, voc ir concatenar todo html numa nica string e ento
adicionar a string ao container ao invs de ir adicionando um elemento de cada vez. Voc pode
33
O bsico de jQuery
usar um array para colocar todas os pedaos juntos e ento aplicar um join nele em uma nica
string para adicionar ao container.
var myItems = [], $myList = $('#myList');
for (var i=0; i<100; i++) {
myItems.push('<li>item ' + i + '</li>');
}
$myList.append(myItems.join(''));
Manipulando atributos
Os recursos de manipulao de atributos do jQuery so muitos. Mudanas bsicas so simples, mas o
mtodo $.fn.attr tambm permite manipulaes mais complexas.
Exemplo 3.35. Usando uma funo para determinar um novo valor de atributo
$('#myDiv a:first').attr({
rel : 'super-special',
href : function() {
return '/new/' + $(this).attr('href');
}
});
$('#myDiv a:first').attr('href', function() {
return '/new/' + $(this).attr('href');
});
Exerccios
Selecionando
Abra o arquivo/exercises/index.html no seu navegador. Use o arquivo /exercises/js/
sandbox.js ou trabalhe no Firebug para fazer o seguinte:
1. Selecione todos os elementos DIV que tm a classe "module".
2. Escreva trs seletores que voc pode usar para obter o terceiro item na lista no-ordenada #myList.
Qual o melhor para se usar? Por qu?
3. Selecione o label para o input de busca usando um seletor de atributo.
34
O bsico de jQuery
Atravessamento
Abra o arquivo/exercises/index.html no seu navegador. Use o arquivo /exercises/js/
sandbox.js ou trabalhe no Firebug para fazer o seguinte:
1. Selecione todos os elementos de imagem na pgina; logue o atributo alt de cada imagem.
2. Selecione a caixa de texto de busca, ento atravesse para o form e adicione uma classe nele.
3. Selecione o item de lista dentro de #myList que possui uma classe "current" e remova esta classe dele;
adicione uma classe "current" no prximo item de lista.
4. Selecione o elemento select dentro de #specials; atravesse para o boto de submit.
5. Selecione o primeiro item de lista no elemento #slideshow; adicione a classe "current" a ele e ento
adicione a classe "disabled" para seus elementos sibling.
Manipulando
Abra o arquivo/exercises/index.html no seu navegador. Utilize o arquivo /exercises/js/
sandbox.js ou use o Firebug para realizar o seguinte:
1. Adicione cinco novos itens de lista no fim da lista no ordenada #myList. Dica:
for (var i = 0; i<5; i++) { ... }
2. Remova os itens mpares
3. Adicione outro h2 e outro pargrafo ltima div.module
4. Adicione outra opo para o elemento select; d ao option o valor "Quarta-Feira".
5. Adicione uma nova div.module pgina depois da ltima; coloque uma cpia de uma das imagens
existentes dentro dela.
35
Mtodos Utilitrios
jQuery oferece diversos mtodos utilitrios no namespace $. Estes mtodos so teis para realizar tarefas
rotineiras de programao. Abaixo esto exemplos de alguns dos mtodos utilitrios; para uma referncia
completa sobre mtodos utilitrios do jQuery, visite http://api.jquery.com/category/utilities/.
$.trim
$.each
');
Nota
H tambm um mtodo $.fn.each, que usado para iterar sobre uma seleo
de elementos.
36
Ncleo do jQuery
$.inArray
$.extend
$.proxy
Retorna uma funo que sempre ser executada no escopo fornecido isto , seta o
significado do this dentro da funo passada ao segundo argumento.
var minhaFuncao = function() { console.log(this); };
var meuObjeto = { foo : 'bar' };
minhaFuncao(); // loga o objeto window
var minhaFuncaoComProxy = $.proxy(minhaFuncao, meuObjeto);
minhaFuncaoComProxy(); // loga o objeto meuObjeto
Se voc tiver um objeto com mtodos, pode passar o objeto e o nome do mtodo para
retornar uma funo que sempre ser executada no escopo do objeto.
var meuObjeto = {
minhaFn : function() {
console.log(this);
}
};
$('#foo').click(meuObjeto.minhaFn); // loga o elemento DOM #foo
$('#foo').click($.proxy(meuObjeto, 'minhaFn')); // loga meuObjeto
Verificando tipos
Como mencionado na seo "O Bsico do jQuery", jQuery oferece alguns mtodos utilitrios para
determinar o tipo de um valor especfico.
37
Ncleo do jQuery
Mtodos de Dados
Assim que seu trabalho com o jQuery avana, voc descobrir com frequncia que h dados sobre um
elemento que voc quer armazenar com o elemento. Em JavaScript puro, voc pode fazer isso adicionando
uma propriedade ao elemento do DOM, mas voc ter que lidar com memory leaks em alguns navegadores.
jQuery ofere um jeito simples de armazenar dados relacionados a um elemento, e gerencia os problemas
de memria para voc.
38
Ncleo do jQuery
Alm de passar um nico par chave-valor para $.fn.data para armazenar dados, voc pode passar um
objeto contento um ou mais pares.
39
Captulo 5. Eventos
Introduo
jQuery fornece mtodos simples para anexar manipuladores de eventos (event handlers) em selees.
Quando um evento ocorre, a funo fornecida executada. Dentro da funo, this refere-se ao elemento
que foi clicado.
Para detalhes sobre eventos do jQuery, visite http://api.jquery.com/category/events/.
A funo manipuladora de evento pode receber um objeto de evento. Este objeto pode ser usado para
determinar a natureza do evento, e para impedir o comportamento padro do evento.
Para detalhes sobre o objeto de evento, visite http://api.jquery.com/category/events/event-object/.
40
Eventos
Desconectando Eventos
Para desconectar um manipulador de evento, voc usa o mtodo $.fn.unbind e passa o tipo de evento
para desatar. Se voc anexou uma funo nomeada para o evento, ento pode isolar a desconexo para
essa funo nomeada passando-a como o segundo argumento.
type
which
data
41
Eventos
target
preventDefault()
stopPropagation()
Alm do objeto de evento, a funo manipuladora de evento tambm tem acesso ao elemento do DOM
no qual o evento foi anexado atravs da palavra-chave this. Para transformar um elemento do DOM
em um objeto jQuery no qual podemos usar mtodos do jQuery, simplesmente fazemos $(this),
frequentemente seguindo este idioma:
var $this = $(this);
Disparando Eventos
jQuery fornece um mtodo de disparar os eventos ligados a um elemento sem qualquer interao do
usurio atravs do mtodo $.fn.trigger. Enquanto este mtodo tem seus usos, ele no deve ser usado
simplesmente para chamar uma funo que foi ligada como um tratador de clique. Ao invs disso, voc
deve armazenar a funo que voc quer chamar em uma varivel, e passar o nome da varivel quando
fizer sua ligao. Ento voc pode chamar a prpria funo sempre que quiser, sem a necessidade do
$.fn.trigger.
$('p').click(foo);
foo(); // ao invs de $('p').trigger('click')
42
Eventos
estavam na pgina originalmente. Ao invs de repetir a ligao de evento toda vez que adicionar elementos
pgina, voc pode usar delegao de evento. Com delegao de evento voc anexa seu evento ao elemento
container, e ento quando o evento ocorre, voc verifica em qual elemento contido ele ocorreu. Se isto soa
complicado, por sorte o jQuery facilita com seus mtodos $.fn.live e $.fn.delegate.
Enquanto a maioria das pessoas descobre a delegao de evento ao lidar com elementos adicionados na
pgina depois, isso tem alguns benefcios de performance mesmo se voc nunca adiciona mais elementos
para a pgina. O tempo requerido para ligar eventos a centenas de elementos individuais no-trivial; se
voc tem um grande conjunto de elementos, deve considerar a delegao de eventos relacionados a um
elemento container.
Nota
O mtodo $.fn.live foi introduzido no jQuery 1.3, e na poca apenas certos tipos de eventos
eram suportados. Com o jQuery 1.4.2, o mtodo $.fn.delegate est disponvel, e o mtodo
preferencial.
Auxiliares de Eventos
jQuery oferece duas funes auxiliares relacionadas a eventos que economizam algumas teclas digitadas.
$.fn.hover
O mtodo $.fn.hover deixa voc passar uma ou duas funes para serem executadas quando os eventos
mouseenter e mouseleave ocorrem em um elemento. Se voc passar uma funo, ela ser executada
para ambos os eventos; se passar duas funes, a primeira ser executada para mouseenter, e a segunda
ser executada para mouseleave.
43
Eventos
Nota
Antes do jQuery 1.4, o mtodo $.fn.hover exigia duas funes.
$.fn.toggle
Assim como $.fn.hover, o mtodo $.fn.toggle recebe duas ou mais funes; cada vez que o
evento ocorre, a prxima funo na lista chamada. Geralmente, $.fn.toggle usado apenas com
duas funes, mas tecnicamente voc pode usar tantas quantas desejar.
Exerccios
Criando uma dica de Input
Abra o arquivo /exercises/index.html no seu navegador. Use o arquivo /exercises/js/
inputHint.js ou trabalhe no Firebug. Sua tarefa usar o texto do label para o input da busca para
criar um texto de "hint" para o input da busca. Os passos so os seguintes:
1. Sete o valor do input de busca para o texto do elemento label
2. Adicione uma classe "hint" ao input de busca
3. Remova o elemento label
4. Faa um Bind do evento focus no input de busca que remove o texto de hint e a classe "hint".
5. Faa um bind do evento blur para o input de busca que restaura o texto de hint e a classe "hint" se
nenhum texto for informado.
Quais outras consideraes poderiam haver se voc estivesse criando esta funcionalidade para um site real?
44
Eventos
45
Captulo 6. Efeitos
Viso Geral
jQuery torna trivial adicionar efeitos simples a sua pgina. Efeitos podem usar configuraes embutidas,
ou fornecer uma durao customizada. Voc pode tambm criar animaes customizadas de propriedades
CSS arbitrrias.
Para detalhes completos sobre efeitos do jQuery, visite http://api.jquery.com/category/effects/.
Efeitos Embutidos
Efeitos frequentemente usados esto embutidos no jQuery como mtodos:
$.fn.show
$.fn.hide
$.fn.fadeIn
$.fn.fadeOut
$.fn.slideDown
$.fn.slideUp
$.fn.slideToggle
jQuery.fx.speeds
jQuery tem um objeto em jQuery.fx.speeds que contm a velocidade padro, assim como as
configuraes para "slow" e "fast".
velocidades: {
46
Efeitos
slow: 600,
fast: 200,
// Velocidade padro
_default: 400
}
possvel sobrescrever ou adicionar a este objeto. Por exemplo, voc pode querer mudar a durao padro
dos efeitos, ou pode querer criar suas prprias velocidades de efeitos.
Exemplo 6.5. Executa uma callback mesmo se no houver elementos para animar
var $thing = $('#naoexistente');
var cb = function() {
console.log('pronto!');
};
if ($thing.length) {
$thing.fadeIn(300, cb);
} else {
cb();
}
47
Efeitos
Nota
Propriedades relacionadas a cor no podem ser animadas com $.fn.animate usando jQuery
de forma convencional. Animaes de cor pode facilmente ser efetuadas incluindo o plugin de
cor [http://plugins.jquery.com/files/jquery.color.js.txt]. Discutiremos o uso de plugins depois no
livro.
Easing
[Definition: Easing descreve a maneira na qual um efeito ocorre -- se a taxa de variao constante, ou
varia com a durao da animao.] jQuery inclui apenas dois mtodos de easing: swing and linear. Se voc
quer transies mais naturais em suas animaes, vrios plugins de easing esto disponveis.
A partir do jQuery 1.4, possvel fazer easing por propriedade ao usar o mtodo $.fn.animate.
Controlando efeitos
jQuery fornece vrias ferramentas para controlar animaes.
$.fn.stop
$.fn.delay
jQuery.fx.off
48
Efeitos
Exerccios
Mostrando texto oculto
Abra o arquivo/exercises/index.html no seu navegador. Use o arquivo /exercises/js/
blog.js. Sua tarefa adicionar alguma interatividade seo de blog na pgina. A especificao para
a funcionalidade a seguinte:
O pargrafo de excerpt deve deslizar para baixo (slideDown) ao clicar na headline dentro da div #blog.
O pargrafo de excerpt deve deslizar para baixo ao clicar na sua headline, e os outros excerpts devem
deslizar para cima (slideUp).
Dica: no se esquea do seletor :visible!
Crie um slideshow
Abra o arquivo/exercises/index.html no seu navegador. Use o arquivo /exercises/js/
slideshow.js. Sua tarefa pegar HTML puro e melhora-lo com JavaScript adicionando um slideshow.
1. Mova o elemeto #slideshow para o topo do corpo.
2. Escreva o cdigo para navegar em torno dos itens da lista dentro do elemento; Exiba um com fadeIn,
mostre-o em alguns segundos e ento faa o desaparecer com o fade out.
3. Quando voc chegar ao final da lista, inicie denovo do incio.
Para um desafio extra, crie uma rea de navegao debaixo do slideshow que mostra quantas imagens
existem e quais imagens voc est vendo agora. (Dica: $.fn.prevAll ser util para isto.
49
Captulo 7. Ajax
Introduo
O mtodo XMLHttpRequest permite que navegadores se comuniquem com o servidor sem precisar
recarregar a pgina. Este mtodo, tambm conhecido como Ajax(Asynchronous JavaScript and XML JavaScript Assncrono e XML), permite ter experincias ricas e interativas nas pginas web.
Requisies Ajax so disparadas por cdigo JavaScript; seu cdigo envia uma requisio a uma URL,
e quando recebe uma resposta, uma funo de callback pode ser acionada para trata-la. Pelo motivo da
requisio ser assncrona, o resto do seu cdigo continur a executando enquanto a requisio processada,
sendo assim, imperativo que um callback seja usado para lidar com a resposta.
O jQuery prov suporte Ajax que abstrai as dolorosas diferenas entre navegadores. Ele oferece mtodos
completos como o $.ajax(), e alguns mtodos de convenincia como $.get(), $.getScript(),
$.getJSON(), $.post() e $().load().
A maior parte das aplicaes jQuery no usam XML apesar do nome "Ajax"; ao invs disso, elas
transportam HTML puro ou JSON (JavaScript Object Notation - Notao de Objeto do JavaScript).
Em geral, Ajax no funciona atravs de domnios diferentes. As excees so servios que fornecem
suporte ao JSONP (JSON com padding), que permite uma limitada funcionalidade entre domnios.
Conceitos Chave
O uso apropriado de mtodos relacionados ao Ajax requer o conhecimento de alguns conceitos-chave.
Tipos de dados
O jQuery geralmente requer alguma instruo a respeito do tipo de dados que voc espera obter com uma
requisio Ajax; em alguns casos, o tipo de dado especificado no nome do mtodo e em outros casos
fornecido como parte do objeto de configurao. H vrias opes:
texto
html
50
Ajax
script
json
Para transportar dados formatados no estilo JSON, que pode incluir strings, arrays e objetos
Nota
No jQuery 1.4, se os dados JSON enviados pelo seu servidor no estiverem
propriamente formatados, a requisio pode falhar silenciosamente. D uma olhada
em http://json.org para detalhes sobre formatao correta do JSON, mas como regra
geral, use mtodos j prontos da linguagem usada no servidor para gerar JSON sem
erros de sintaxe.
jsonp
xml
Eu sou um forte proponente no uso de JSON na maioria dos casos, de forma que ele prov a maior
flexibilidade. especialmente til para enviar HTML e dados ao mesmo tempo.
A de assncrono
A assincronicidade do Ajax pega muitos novos usurios do jQuery desprevinidos. Pelo fato das chamadas
Ajax serem assncronas por padro, a resposta no estar disponvvel imediatamente. Respostas s podem
ser manipuladas por um callback. Ento, por exemplo, o cdigo seguinte no ir funcionar:
$.get('foo.php');
console.log(response);
Ao invs disso, ns temos que passar um funo callback para nossa requisio; Este callback ser
executado quando a requisio for realizada com sucesso, e neste ponto que poderemos acessar os dados
que ela retornou, se houver algum.
$.get('foo.php', function(response) { console.log(response); });
Ajax e o Firebug
O Firebug (ou o Webkit Inspector no Chrome ou Safari) uma ferramenta indispensvel para trabalhar com
requisies Ajax. Voc pode ver as requisies Ajax no mesmo instante que elas acontecem na tab Console
do Firebug (e no painel Resources > XHR do Webkit Inspector), e voc pode clicar numa requisio para
expandi-la e ver os detalhes como os headers de requisio, de resposta, contedo e mais. Se alguma coisa
no estiver acontecendo como esperado com uma requisio Ajax, este o primeiro lugar para ver o que
est acontecendo de errado.
51
Ajax
$.ajax
O mtodo core $.ajax uma forma simples e poderosa de criar requisies Ajax. Ele utiliza um objeto de
configurao que contm todas as instrues que o jQuery precisa para completar a requisio. O mtodo
$.ajax particularmente til porque ele oferece a habilidade de especificar callbacks de sucesso e falha.
H tambm a possibilidade de pegar um objeto de configurao definido separadamente, fazendo que seja
fcil escrever cdigo reutilizvel. Para documentao completa das opes de configurao, visite http://
api.jquery.com/jQuery.ajax/.
52
Ajax
Nota
Uma nota a respeito da configurao dataType: se o servidor enviar dados que esto num
formato diferente que voc especificou, seu cdigo poder falhar, e a razo nem sempre ser clara,
por que o cdigo de resposta HTTP no ir mostrar um erro. Quando estiver trabalhando com
requisies Ajax, tenha certeza que o servidor est enviando de volta os dados com o formato
que voc especificou e verifique se o header Content-type est de acordo com o tipo de dados.
Por exemplo, para dados JSON, o header Content-type deve ser application/json.
Opes do $.ajax
H vrias, vrias opes para o mtodo $.ajax, que parte do seu poder. Para uma lista completa de opes,
visite http://api.jquery.com/jQuery.ajax/; aqui vo algumas opes que voc ir usar frequentemente:
53
Ajax
async
Configure para false se a requisio deve ser enviada de forma sncrona. O padro
true. Perceba que se voc configurar esta opo para falso, sua requisio bloquear
a execuo de outro cdigo at que a resposta seja recebida.
cache
Usado se a resposta disponvel for cachevel. O padro true para todos os tipos de
dados, exceto "script" e "jsonp". Quando setado para falso, a URL simplesmente ter
um parmetro a mais anexado a ela para evitar o cache.
complete
context
O escopo em que a funo callback deve executar (ou seja, o que this ir significar
dentro da(s) funo(es) callback). Por padro, this dentro das funes callback
refere ao objeto originalmente passado para $.ajax.
data
Os dados a serem enviados para o servidor. Isto pode ser tanto um objeto quanto uma
string de requisio, como foo=bar&baz=bim.
dataType
O tipo de dado que voc espera do servidor. Por padro, o jQuery ir olhar o MIME
type da resposta se nenhum tipo de dados for especificado.
error
Uma funo callback para ser executa se a requisio resultar em um erro. A funo
recebe o objeto bruto de requisio e o texto de status da requisio.
jsonp
success
Uma funo de callback para ser executada se a requisio tiver xito. A funo recebe
os dados de resposta (convertidos para um objeto JavaScript se o tipo de dados for
JSON), e o texto de status da requisio e o objeto bruto da requisio.
timeout
traditional
Configure para true para usar o tipo de serializao param em verses anteriores ao
jQuery 1.4. Para detalhes, veja: http://api.jquery.com/jQuery.param/.
type
url
A opo url a nica propriedade obrigatria do objeto de configurao do mtodo $.ajax; todas as
outras propriedades so opcionais.
Mtodos de convenincia
Se voc no precisa da configurao extensiva do $.ajax, e voc no se preocupa sobre manipulao
de erros, as funes de convenicia providas pelo jQuery podem ser uma forma til e lapidada para
executar requisies Ajax. Estes mtodos so somente "encapsulamentos" em torno do mtodo $.ajax,
e simplesmente pr setam algumas das opes no mtodo $.ajax.
Os mtodos de convenincia providos pelo jQuery so:
54
Ajax
$.get
$.post
$.getScript
$.getJSON
data
Os dados para serem enviados para o servidor. Opcional. Pode ser tanto
um objeto quanto uma string de requisio, como foo=bar&baz=bim.
Nota
Esta opo no vlida para $.getScript.
callback de successo
tipo de dados
Nota
Esta opo s aplicvel para mtodos que ainda no
especificaram o tipo de dados no seu nome.
$.fn.load
O mtodo $.fn.load nico dentre os mtodos de ajax do jQuery que chamado em uma seleo. O
mtodo $.fn.load pega o HTML de uma URL, e usa o HTML retornado para popular o(s) elemento(s)
55
Ajax
selecionados. Em adio URL informada, voc ainda pode informar um seletor; o jQuery ir pegar
somente o elemento correspondente do HTML retornado.
Ajax e formulrios
As funcionalidades de Ajax do jQuery podem ser especialmente teis ao lidar com formulrios. O
jQuery Form Plugin [http://jquery.malsup.com/form/] uma ferramenta bem testada para adicionar
funcionalidades de Ajax nos formulrios e voc deve usa-lo para manipular formulrios com Ajax ao
invs de usar sua prpria soluo para alguma coisa mais complexa. Mas ainda h dois mtodos do
jQuery relacionados processamento de formulrios que voc deve conhecer: $.fn.serialize e
$.fn.serializeArray.
56
Ajax
Eventos do Ajax
Frequentemente, voc ir querer fazer algo depois que uma requisio Ajax inicia ou termina, como
exibir ou mostrar um indicador de carregamento. Ao invs de definir este comportamento dentro de cada
requisio Ajax, voc pode associar eventos do Ajax elementos da mesma forma que voc associa outros
eventos. Para uma lista completa de de eventos do Ajax, visite http://docs.jquery.com/Ajax_Events.
Exerccios
Carregar contedo externo
Abra o arquivo /exercises/index.htmlno seu navegador. Use o arquivo /exercises/js/
load.js. Sua tarefa carregar o contedo de um item de blog quando um usurio clicar no ttulo do item.
1. Crie uma div alvo depois da headline para cada post do blog e armazene uma referncia para ela na
headline usando $.fn.data.
2. Crie um bind do evento click na headline que ir usar o mtodo $.fn.load para carregar o contedo
apropriado de /exercises/data/blog.html dentro da div alvo. No se esquea de prevenir a
ao padro do evento click.
57
Ajax
Perceba que cada headline do blog em index.html inclui um link para o post. Voc precisar aproveitar o
href daquele link para obter o contedo de blog.html. Uma vez que voc tem o href, esta uma forma de
process-lo num ID que voc pode usar como seletor em $.fn.load:
var href = 'blog.html#post1';
var tempArray = href.split('#');
var id = '#' + tempArray[1];
Lembre-se de fazer uso liberal de console.log para ter certeza que voc est no caminho correto!
58
Captulo 8. Plugins
O que exatamente um plugin?
Um plugin do jQuery simplesmente um novo mtodo que ns usamos para extender o prottipo de
objeto do jQuery. Atravs da extenso do prottipo, voc permite que todos os objetos do jQuery herdem
quaisquer mtodos que voc adicionar. Como estabelecido, sempre que voc chama jQuery() voc est
criando um novo objeto do jQuery, com todos os mtodos herdados.
A idia de um plugin fazer alguma coisa com uma coleo de elementos. Voc pode considerar que cada
mtodo que vem com o core do jQuery seja um plugin, como fadeOut ou addClass.
Voc pode fazer seus prprios plugins e usa-los privadamente no seu cdigo ou voc pode libera-lo para
comunidade. H milhares de plugins para o jQuery disponveis online. A barreira para criar um plugin
prprio to pequena que voc desejar fazer um logo "de cara"!
59
Plugins
60
Plugins
}(jQuery));
Ns estamos utilizando a capacidade de aceitao de um callback do mtodo append, e o valor de retorno
deste callback ir determinar o que ser aplicado a cada elemento na coleo. Perceba tambm que ns
no estamos usando o mtodo attr para obter o atributo href, pois a API do DOM nativa nos d um
acesso facilitado atravs da propriedade href.
Este um outro exemplo de plugin. Este no requer que ns faamos uma iterao sobre todos os elementos
com o mtodo each()., Ao invs disso, no simplesmente vamos delegar para outros mtodo do jQUery
diretamente:
(function($){
$.fn.fadeInAndAddClass = function(duration, className) {
return this.fadeIn(duration, function(){
$(this).addClass(className);
});
};
}(jQuery));
// Exemplo de uso:
$('a').fadeInAndAddClass(400, 'finishedFading');
Escrevendo Plugins
Algumas vezes voc quer que uma pequena funcionalidade esteja disponvel pelo seu cdigo; por exemplo,
tavez voc queira que um simples mtodo possa ser chamado para executar uma srie de operaes sobre
uma seleo do jQuery. Neste caso, voc pode querer escrever um plugin.
61
Plugins
A maioria dos plugins do jQuery so simplesmente mtodos criados no namespace $.fn. O jQuery garante
que um mtodo chamado num objeto jQuery possa acessar aquele objeto jQuery como this dentro do
mtodo. Em retorno, seu plugin precisa garantir que ele retorna o mesmo objeto que ele recebeu, a menos
que o contrrio seja explicitamente documentado.
Este um exemplo de um plugin simples:
Exemplo 8.1. Criando um plugin para adicionar e remover uma classe no hover
// definindo o plugin
(function($){
$.fn.hoverClass = function(c) {
return this.hover(
function() { $(this).toggleClass(c); }
);
};
}(jQuery);
// utilizando o plugin
$('li').hoverClass('hover');
Para mais sobre desenvolvimento de plugins, leia o post essencial do Mike Alsup's, A Plugin Development
Pattern [http://www.learningjquery.com/2007/10/a-plugin-development-pattern]. Nele, ele cria um plugin
chamado $.fn.hilight, que prov suporte para o plugin de metadados se ele estiver presente e prov
um mtodo centralizado para configurao central e opes de instncia para o plugin.
62
Plugins
63
Plugins
64
Plugins
Nota
No nosso exemplo, ns usamos o namespace nmk. O namespace ui reservado para plugins
oficiais do jQuery UI. Quando fizer seus prprios plugins, voc deve criar seu prprio namespace.
Isso deixa claro de onde o plugin veio e se ele faz parte de uma coleo maior.
65
Plugins
66
Plugins
Nota
Executar mtodos atravs da passagem do nome do mesmo para a mesma funo do jQuery que
foi usada para inicializar o plugin pode parecer estranho. Isso feito para previnir a poluio do
namespace do jQuery enquanto mantm a habilidade de encadear chamadas de mtodos.
67
Plugins
Adicionando Callbacks
Uma das formas mais fceis de fazer seu plugin estensvel adicionar callbacks para que os usurios
possam reagir quando o estado do plugin muda. Ns podemos ver abaixo como adicionar um callback
nossa barra de progresso para enviar um sinal quando a barra de progresso chegar 100%. O mtodo
_trigger requer trs parmetros: o nome do callback, um objeto de evento nativo que iniciou o callback,
e um hash de dados relevantes para o evento. O nome do callback o nico parmetro requerido, mas
os outros podem ser muito teis para usurios que querem implementar funcionalidades customizadas no
topo do seu plugin. Por exemplo, se ns construssemos um plugin arrastvel, ns poderamos passar o
evento mouseove nativo quando dispararmos o callback de arrastar; Isso permitiria que usurios reagissem
ao arraste baseado nas coordenadas x/y providas pelo objeto do evento.
68
Plugins
69
Plugins
Limpando
Em alguns casos, faz sentido permitir usurios aplicar seu plugin e desaplica-lo depois. Voc pode fazer
isso pelo mtodo destroy. Dentro do mtodo destroy, voc deve desfazer qualquer coisa que seu plugin
possa ter feito desde o incio. O mtodo destroy automaticamente chamado se o elemento que a
instncia do seu plugin est amarrado removido do DOM, para que isso seja usado para coleo de lixo
(garbage collection). O mtodo destroy padro remove a ligao entre o elemento DOM e a instncia
do plugin, ento importante chamar a funo destroy base dentro do destroy do seu plugin.
Concluso
A fbrica de widget o nico jeito de criar plugins com estado. H alguns poucos modelos diferentes que
podem ser usados e cada um tem suas vantagens e desvantagens. A fbrica de widget resolve muitos dos
problemas comuns para voc e pode melhorar muito a produtividade e tambm melhora bastante o reuso
de cdigo, fazendo com que se funcione bem para o jQuery UI e para outros plugins com estado.
70
Plugins
Exerccios
Fazendo uma tabela ordenvel
Para este exerccio, sua tarefa identificar, baixar, e implementar um plugin para ordenamento de tabela
na pgina index.html. Quando terminar, todas as colunas da tabela na pgina devem ser ordenveis.
71
73
74
// RUIM
if ($eventfade.data('currently') != 'showing') {
$eventfade.stop();
}
if ($eventhover.data('currently') != 'showing') {
$eventhover.stop();
}
if ($spans.data('currently') != 'showing') {
$spans.stop();
}
// BOM!!
var $elems = [$eventfade, $eventhover, $spans];
$.each($elems, function(i,elem) {
if (elem.data('currently') != 'showing') {
elem.stop();
}
});
75
};
$(document).ready(PI.onReady);
Otimize seletores
Otimizao de seletores menos importante do que costumava ser, pois mais navegadores implementam
document.querySelectorAll() e a carga de selecionamento muda do jQuery para o navegador.
Entretanto, ainda h algumas dicas para se manter em mente.
Seletores baseados em ID
Comear seu seletor com um ID sempre melhor.
// rpido
$('#container div.robotarm');
// super-rpido
$('#container').find('div.robotarm');
A abordagem $.fn.find mais rpida pois a primeira seleo manipulada sem passar pelo engine
de seleo do Sizzle - selees s com ID so manipuladas usando document.getElementById(),
que extremamente rpido, pois nativo para o navegador.
Especificidade
Seja especfico no lado direito do seu seletor, e menos especfico no esquerdo.
// no otimizado
$('div.data .gonzalez');
// otimizado
$('.data td.gonzalez');
Use tag.classe se possvel no seu seletor mais a direita, e somente tag ou .class na esquerda.
Evite especificidade excessiva.
$('.data table.attendees td.gonzalez');
// melhor: remova o meio se possvel
$('.data td.gonzalez');
Um DOM "magro" tambm ajuda a melhorar a performance do seletor, pois a engine de seleo possui
poucas camadas para atravessar quando estiver procurando por um elemento.
76
77
$('li.cartitems').doOnce(function(){
// faa com ajax! \o/
});
Este guia especialmente aplicvel para UI widgets do jQuery, que possuem muita sobrecarga mesmo
quando a seleo no contm elementos.
Definio de Varivel
Variveis podem ser definidas em uma declarao ao invs de vrias.
// velho & preso
78
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);
// nova onda
var test = 1,
test2 = function() { ... },
test3 = test2(test);
Em funes auto-executveis, podem ser puladas todas as definies de variveis.
(function(foo, bar) { ... })(1, 2);
Condicionais
// forma antiga
if (type == 'foo' || type == 'bar') { ... }
// melhor
if (/^(foo|bar)$/.test(type)) { ... }
// procura por literal objeto
if (({ foo : 1, bar : 1 })[type]) { ... }
79
Conceitos Chave
Antes de irmos para os padres de organizao de cdigo, importante entender alguns conceitos que so
comuns a todos bons padres de de organizao de cdigo.
Seu cdigo deve ser dividido em unidades de funcionalidade - mdulos, servios, etc. Evite a tentao
de ter todo seu cdigo em um enorme bloco dentro do $(document).ready().
No se repita. Identifique similaridades entre pedaos de funcionalidade e use tcnicas de herana para
evitar cdigo repetitivo.
Apesar da natureza centrada no DOM do jQuery, aplicaes em JavaScript no so s sobre o DOM.
Lembre-se que no so todas as funcionalidades que necessitam - ou devem - ter uma representao
no DOM.
Unidades de funcionalidade devem ser fracamente acopladas [http://en.wikipedia.org/wiki/
Loose_coupling] uma unidade de funcionalidade deve conseguir existir por si s, e comunicao
entre unidades devem ser manipuladas atravs de um sistema de mensagens, como eventos customizados
ou pub/sub. Evite comunicao direta entre unidades de funcionalidade sempre que possvel.
Unidades de funcionalidade devem ser divididas em pequenos mdodos que fazem exatamente uma s
coisa. Se seus mtodos so maiores que algumas linhas, voc deve considerar uma refatorao.
Opes de configurao para suas unidades de funcionalidade - URLS, strings, timeouts, etc. - devem
ser informadas em propriedades ou em um objeto de configurao, no espalhadas atravs do cdigo.
O conceito de baixo acoplamento pode ser especialmente problemtico para desenvolvedores fazendo sua
primeira investida em aplicaes complexas, ento preste ateno nisso quando voc estiver comeando.
Encapsulamento
O primeiro passo para organizao de cdigo separar as partes de sua aplicao em peas distintas;
algumas vezes, mesmo este esforo suficiente para ceder
O literal objeto
Um literal objeto talvez a forma mais simples de encapsular cdigo relacionado. Ele no oferece nenhuma
privacidade para propriedades ou mtodos, mas til para eliminar funes annimas do seu cdigo,
centralizar opes de configurao e facilitar o caminho para o reuso e refatorao.
80
Organizao de cdigo
81
Organizao de cdigo
configurao. Por ltimo, ns talvez precisaremos quebrar o encadeamento de mtodos para ficar mais
fcil modificar pedaos de funcionalidade depois.
82
var myFeature = {
init : function(settings) {
de cdigo
myFeature.configOrganizao
= {
$items : $('#myFeature li'),
$container : $('<div class="container"></div>'),
: '/foo.php?item='
Exemplo 10.2.urlBase
Usando um
literal de objeto para uma feature do jQuery
};
// permite a sobreposio da configurao padro
$.extend(myFeature.config, settings);
myFeature.setup();
},
setup : function() {
myFeature.config.$items
.each(myFeature.createContainer)
.click(myFeature.showItem);
},
createContainer : function() {
var $i = $(this),
$c = myFeature.config.$container.clone()
.appendTo($i);
$i.data('container', $c);
},
buildUrl : function() {
return myFeature.config.urlBase +
myFeature.$currentItem.attr('id');
},
showItem : function() {
var myFeature.$currentItem = $(this);
myFeature.getContent(myFeature.showContent);
},
getContent : function(callback) {
var url = myFeature.buildUrl();
myFeature.$currentItem
.data('container').load(url, callback);
},
showContent : function() {
myFeature.$currentItem
.data('container').show();
myFeature.hideContent();
},
hideContent : function() {
myFeature.$currentItem.siblings()
.each(function() {
$(this).data('container').hide();
});
}
};
$(document).ready(myFeature.init);
83
Organizao de cdigo
A primeira coisa que voc ir perceber que esta abordagem obviamente muito maior que a original
- novamente, se isso for extender nossa aplicao, o uso do literal objeto no ir fazer sentido algum.
Embora assumindo que no vai extender nossa aplicao, ns ganhamos vrias coisas:
Ns quebramos nossas funcionalidaes em mtodos pequenos; no futuro, se ns precisarmos mudar como
o contedo mostrado, claro onde ns iremos mudar. No cdigo original, este passo muito mais
difcil para se localizar.
Ns eliminamos o uso de funes annimas.
Ns movemos as opes de configurao para fora do corpo do cdigo e colocamos em uma localizao
central.
Ns eliminamos as restries do encadeamento, fazendo o cdigo mais refatorvel, modificvel e
rearranjvel.
Para funcionalidades no triviais, literais de objeto so uma clara melhora sobre o longo pedao de
cdigo dentro do bloco $(document).ready(), de forma nos leva a pensar sobre pedaos de funcionalidade.
Entretanto, eles no so muito mais avanados do que ter um monte de declaraes de funes dentro do
bloco $(document).ready().
O Module Pattern
O module pattern supera algumas das limitaes do literal objeto, oferecendo privacidade para variveis
e funes enquanto expe uma API pblica se assim for necessrio.
84
Organizao de cdigo
acesso ela fora da funo, a no ser que ns coloquemos no objeto de retorno. Isto significa que nenhum
cdigo externo da funo tem acesso varivel privateThing ou a funo changePrivateThing. Entretando,
sayPrivateThing tem acesso a privateThing e changePrivateThing, por causa que ambas foram definidas
no mesmo escopo de sayPrivateThing.
Este padro poderoso pois, da mesma forma que voc pode obter dos nomes de variveis, ele pode
dar a voc variveis privadas e funes enquanto expe uma API limitada consistindo das propriedades
retornadas dos objetos e mtodos.
Abaixo temos uma verso revisada do exemplo anterior, mostrando como poderamos criar a mesma
funcionalidade utilizando o module pattern e somente expondo um mtodo pblico do mdulo,
showItemByIndex().
85
Organizao de cdigo
$(document).ready(function()
{
Exemplo
10.4. Usando o module patterns
var myFeature = (function() {
86
Organizao de cdigo
Gerenciando dependncias
Nota
Esta seo fortemente baseada na excelente documentao do RequireJS disponvel em http://
requirejs.org/docs/jquery.html, e usada com permisso do autor do RequireJS, James Burke.
Quando um projeto alcana um determinado tamanho, gerenciar modulos de scripts comea a ficar
complicado. Voc precisa ter certeza da seqncia correta dos scripts e voc comea a pensar seriamente
em combinar scripts em um nico arquivo, para que somente uma ou um nmero pequeno de requisies
sejam feitas para carregar os scripts. Voc pode tambm carregar cdigo assim que necessrio, depois que
a pgina carregar.
O RequireJS uma ferramenta para gerenciamento de dependncias feita pelo James Burke e pode lhe
ajudar a gerenciar mdulos de scripts, carrega-los na ordem correta e tornar fcil a combinao de scripts
mais tarde atravs de uma ferramenta prpria de otimizao, sem necessidade de alterar seu cdigo de
marcao. Ele tambm lhe fornece um meio fcil de carregar os scripts depois da pgina ter carregado,
permitindo que voc distribua o tamanho do download atravs do tempo.
O RequireJS tem um sistema de mdulos que permite que voc defina mdulos com escopo bem definido,
mas voc no precisa seguir o sistema para obter os benefcios do gerenciamento de dependncias e
otimizaes em tempo de build. Com o tempo, se voc comear a criar cdigo mais modular que precisa
ser reutilizado em algumas outras partes, o formato de mdulo do RequireJS torna fcil escrever cdigo
encapsulado que pode ser carregado sob demanda. Ele pode crescer com sua aplicao, particularmente
se voc deseja incorporar strings de internacionalizao (i18n), para que seu projeto funcione em lnguas
diferentes, ou carregar algumas strings HTML e ter certeza que estas strings esto disponveis antes de
executar o cdigo, ou mesmo usar servicos JSONP como dependncias.
Obtendo o RequireJS
A forma mais fcil de usar o RequireJS com jQuery baixando um build do jQuery que j tem o RequireJS
embutido [http://requirejs.org/docs/download.html]. Este build exclui pores do RequireJS que duplicam
funcionalidades do jQuery. Voc tambm pode achar til baixar um projeto jQuery de amostra que utiliza
o RequireJS [http://requirejs.org/docs/release/0.11.0/jquery-require-sample.zip].
87
Organizao de cdigo
88
Organizao de cdigo
89
Organizao de cdigo
90
Organizao de cdigo
Exerccios
Crie um mdulo Portlet
Abra o arquivo /exercises/portlets.html em seu navegador. Use o arquivo /exercises/
js/portlets.js. Sua tarefa criar um funo criadora de portlet que utilize o module pattern, fazendo
que o seguinte cdigo funcione:
var myPortlet = Portlet({
title : 'Curry',
source : 'data/html/curry.html',
initialState : 'aberto' // ou 'fechado'
});
myPortlet.$element.appendTo('body');
Cada portlet deve ser uma div com um ttulo, uma rea de contedo, um boto para abrir/fechar o portlet,
um boto para remover o portlet, e um boto para atualizar o portlet. O portlet retornado pela funo Portlet
deve ter a seguinte API pblica:
myPortlet.open(); // fora o estado aberto
myPortlet.close(); // fora o estado fechado
myPortlet.toggle(); // inverte o estado open/close
myPortlet.refresh(); // atualiza o contedo
myPortlet.destroy(); // remove o portlet da pgina
myPortlet.setSource('data/html/onions.html');
// muda a fonte
91
92
Eventos Customizados
} else {
$light.removeClass('off').addClass('on');
}
});
$('.switch, .clapper').click(function() {
$(this).parent().find('.lightbulb').trigger('changeState');
});
Este ltimo pedao de cdigo no l essas coisas, mas algo importante aconteceu: ns movemos o
comportamento da lmpada para a lmpada, e ficamos longe dos switches e do clapper.
Vamos tornar nosso exemplo um pouco mais interessante. Ns vamos adicionar outro quarto nossa casa,
junto com o switch mestre, como mostrado a seguir:
<div class="room" id="kitchen">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>
<div class="room" id="bedroom">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>
<div id="master_switch"></div>
Se h vrias luzes na casa, ns queremos que o switch mestre desligue todas as luzes; de outra forma, ns
queremos todas as luzes acesas. Para fazer isso, ns iremos adicionar dois ou mais eventos customizados
s lmpadas: turnOn e turnOff. Ns iremos fazer uso deles no evento customizado changeState,
e usar alguma lgica para decidir qual que o switch mestre vai disparar:
$('.lightbulb')
.bind('changeState', function(e) {
var $light = $(this);
if ($light.hasClass('on')) {
$light.trigger('turnOff');
} else {
$light.trigger('turnOn');
}
})
.bind('turnOn', function(e) {
$(this).removeClass('off').addClass('on');
})
.bind('turnOff', function(e) {
$(this).removeClass('off').addClass('on');
});
$('.switch, .clapper').click(function() {
$(this).parent().find('.lightbulb').trigger('changeState');
});
$('#master_switch').click(function() {
93
Eventos Customizados
if ($('.lightbulb.on').length) {
$('.lightbulb').trigger('turnOff');
} else {
$('.lightbulb').trigger('turnOn');
}
});
Note como o comportamento do switch mestre est vinculado ao switch mestre; O comportamento de uma
lmpada pertence s lmpadas.
Nota
Se voc est acostumado com programao orientada a objetos, talvez seja til pensar em
evetos como se fossem mtodos de objetos. Grosseiramente falando, o objeto que o mtodo
pertence criado pelo seletor do jQuery. Vinculando o evento customizado changeState para
todos os elementos $(.light) similar a ter uma classe chamada Light com um mtodo
changeState, e ento instanciamos novos objetos Light para cada elemento com o nome
de classe light.
Recapitulando: $.fn.bind e $.fn.trigger
No mundo dos eventos customizados, h dois mtodos importantes do jQuery: $.fn.bind e
$.fn.trigger. No captulo Eventos, ns vimos como usar estes mtodos para trabalhar com
eventos do usurio; neste captulo, importante relemebrar duas coisas:
O mtodo $.fn.bind recebe o tipo do evento e uma funo manipuladora do mesmo
como argumentos. Opcionalmente, ele pode tambm receber dados relacionados ao eventos
como seu segundo argumento, passando a funo manipuladora do evento para o terceiro
argumento. Qualquer dado que passado ser disponvel para a funo manipuladora do evento
na propriedade data do objeto do evento. A funo manipuladora do evento sempre recebe o
objeto do evento como seu primeiro argumento.
O mtodo $.fn.trigger recebe um tipo de evento como argumento. Opcionalmente,
ele tambm pode receber um array de valores. Estes valores sero passados para a funo
manipuladora de eventos como argumentos depois do objeto de evento.
Aqui h um exemplo de uso do $.fn.bind e $.fn.trigger que usa dados customizados em
ambos os casos:
$(document).bind('myCustomEvent', { foo : 'bar' }, function(e, arg1, arg2) {
console.log(e.data.foo); // 'bar'
console.log(arg1); // 'bim'
console.log(arg2); // 'baz'
});
$(document).trigger('myCustomEvent', [ 'bim', 'baz' ]);
94
Eventos Customizados
Os resultados para cada termo sero mostrados em um container de resultados; Estes containers podero
ser expandidos, contraidos, atualizados, e removidos, individualmente ou todos de uma vez.
Quando terminarmos, a applicao ficar dessa forma:
95
Eventos Customizados
96
Eventos Customizados
O Setup
Ns iniciaremos com HTML bsico:
<h1>Twitter Search</h1>
<input type="button" id="get_trends"
value="Load Trending Terms" />
<form>
<input type="text" class="input_text"
id="search_term" />
<input type="submit" class="input_submit"
value="Add Search Term" />
</form>
<div id="twitter">
<div class="template results">
<h2>Search Results for
<span class="search_term"></span></h2>
</div>
</div>
Isso nos d um container (#twitter) para nosso widget, um template para nossos resultados (escondido
via CSS), e um formulrio simples, onde usurios podem entrar com um termo de busca. (Para o bem da
simplicidade, ns iremos assumir que a aplicao somente em JavaScript e que nossos usurios sempre
tero CSS.)
H dois tipos de objetos que ns iremos atuar sobre: os containers de resultados e o container do Twitter.
Os containers de resultados so o corao da aplicao. Ns criaremos um plugin que preparar cada
container de resultados assim que eles forem adicionados ao container do Twitter. Entre outras coisas, ele
vincular os eventos customizados para cada container e adicionar os botes de ao no topo a direita de
cada container. Cada container de resultado ter os seguintes eventos customizados:
refresh
Coloca o container no estado atualizando, e dispara a requisio para obter os dados para
o termo de busca.
populate
remove
Remove o container da pgina depois que o usurio efetua a requisio para faze-lo. A
verificao pode ser ignorada se true for passado como segundo argumento do manipulador
de eventos. O evento remove tambm remove o termo associado com o container de
resultados do objeto global contendo o termo de busca.
collapse
Adiciona a classe collapsed ao container, que esconder os resultados via CSS. Ele tambm
ir mudar o boto Collapse do container em um boto Expand.
expand
O plugin responsvel por adicionar os botes de ao ao container. Ele vinvula cada evento de clique
cada item da lista de aes e usa a classe do item de lista para determinar qual evento customizado ser
disparado no container de resultados correspondente.
$.fn.twitterResult = function(settings) {
return $(this).each(function() {
var $results = $(this),
97
Eventos Customizados
$actions = $.fn.twitterResult.actions =
$.fn.twitterResult.actions ||
$.fn.twitterResult.createActions(),
$a = $actions.clone().prependTo($results),
term = settings.term;
$results.find('span.search_term').text(term);
$.each(
['refresh', 'populate', 'remove', 'collapse', 'expand'],
function(i, ev) {
$results.bind(
ev,
{ term : term },
$.fn.twitterResult.events[ev]
);
}
);
// usa a classe de cada ao para determinar qual
// evento ele ir disparar no painel de resultados.
$a.find('li').click(function() {
// passa o li que foi clicado para a funo
// para que o mesmo possa manipulado se necessrio
$results.trigger($(this).attr('class'), [ $(this) ]);
});
});
};
$.fn.twitterResult.createActions = function() {
return $('<ul class="actions" />').append(
'<li class="refresh">Refresh</li>' +
'<li class="remove">Remove</li>' +
'<li class="collapse">Collapse</li>'
);
};
$.fn.twitterResult.events = {
refresh : function(e) {
// indica que os resultados esto sendo atualizados
var $this = $(this).addClass('refreshing');
$this.find('p.tweet').remove();
$results.append('<p class="loading">Loading ...</p>');
// obtm os dados do Twitter via jsonp
$.getJSON(
'http://search.twitter.com/search.json?q=' +
escape(e.data.term) + '&rpp=5&callback=?',
function(json) {
$this.trigger('populate', [ json ]);
}
);
},
98
Eventos Customizados
99
Eventos Customizados
};
O container do Twitter ter somente dois eventos:
getResults
getTrends
Consulta o Twitter para obter os top 10 trending topics, depois itera sobre os resultados
e dispara o evento getResults para cada um deles, adicionando assim um container
de resultados para cada um dos termos.
}
})
.bind('getTrends', function(e) {
var $this = $(this);
$.getJSON('http://search.twitter.com/trends.json?callback=?', function(json
var trends = json.trends;
$.each(trends, function(i, trend) {
$this.trigger('getResults', [ trend.name ]);
});
});
});
At agora, ns escrevemos muito cdigo que no faz quase nada, mas ok. Ao especificar todos os
comportamentos que ns queremos que nossos objetos de base tenham, ns criamos um framework slido
para construir rapidamente a interface.
Vamos comear ligando nossa caixa de texto e o boto Load Trending Terms. Para a caixa de texto, ns
iremos capturar o termo que foi digitado e iremos passa-lo para o evento getResults do container do
Twitter. O evento getTrends ser disparado ao clicarmos no boto Load Trending Terms:
100
Eventos Customizados
$('form').submit(function(e) {
e.preventDefault();
var term = $('#search_term').val();
$('#twitter').trigger('getResults', [ term ]);
});
$('#get_trends').click(function() {
$('#twitter').trigger('getTrends');
});
Ns podemos remover, contrair, expandir e atualizar todos os resultados se adicionarmos alguns botes
com IDs apropriados, assim como mostrado abaixo. Perceba como ns estamos passando o valor true para
o manipulador de evento como seu segundo argumento, dizendo ao mesmo que que ns no queremos
verificar a remoo de containers individuais.
$.each(['refresh', 'expand', 'collapse'], function(i, ev) {
$('#' + ev).click(function(e) { $('#twitter div.results').trigger(ev); });
});
$('#remove').click(function(e) {
if (confirm('Remove all results?')) {
$('#twitter div.results').trigger('remove', [ true ]);
}
});
Concluso
Eventos customizados oferecem uma nova forma de pensar sobre seu cdigo: eles colocam nfase no
comportamento, no no elemento que o dispara. Se voc gastar um tempo no incio para estabelecer as
partes da sua aplicao e os comportamentos que essas partes necessitam ter, os eventos customizados
podem fornecer um mtodo poderoso para voc fazer com que estas partes "conversem", seja uma de cada
vez ou uma conversa em massa. Uma vez que os comportamentos de uma parte foram descritos, tornase trivial disparar estes comportamentos de qualquer parte, permitindo uma criao rpida da lgica da
aplicao e que experimentos com opes da interface sejam triviais. Por ltimo, eventos customizados
podem melhorar a clareza do cdigo e facilitar sua manuteno, pois eles deixam claro o relacionamento
entre um elemento e seus comportamentos.
Voc pode ver a aplicao completa em demos/custom-events.html e demos/js/customevents.js no cdigo de amostra.
101