1. Reinaldo Junior
http://reinaldojunior.net

2. (ou ao menos ouviu falar?)

8.  Todo mundo construía seus layout com
tabelas.
 Camadas de conteúdo e apresentação juntas.
 Pouca flexibilidade, baixa performance e
desorganização.
 Mas, era bonito e produtivo

9.  Separando a apresentação do conteúdo.
 Menor footprint
 Maior rapidez e clareza
 Maior organização leva à produtividade
 Acessibilidade (universalidade)
 Um passo inicial para Web Standards e
Marcação Semântica.
 Mas nem tudo foi perfeito...

10.  Programação Client-Side, controle dos
diferentes navegadores/SO’s e do fluxo de
navegação.
 Camadas de comportamento e conteúdo
juntas.
 Imaturidade, baixa confiabilidade, falta de
profissionais e ferramentas, diferentes
implementações (proprietárias).

12. Anatomia de um Ogro
(ou JS Obtrusivo)
•Não acessível
•Destrutivo
•Irritante
•Assustador
•Obtrusivo

13. Obtrusive Obtrusivo
“1. Sticking out; protruding. 2. Noticeable; “Um ogro deitado no meio do caminho,
prominent, especially in a displeasing pronto pra criar confusão”
way. 3. Pushy. ”
<a href=quot;javascript:abreNoticia(123);quot;>Ler notícia</a>
<a href=“#“ onclick=“abreNoticia(123);”>Ler notícia</a>
<a href=“noticia.php?id=123“
onclick=“abreLink(this.href);”>Ler notícia</a>

15. “Na história Japonesa, um ninja (忍者, ninja) é um
guerreiro, treinado em artes marciais, especializado
em uma varidade de artes de guerra não-ortodoxas.
Os métodos utilizados pelos ninjas incluem
assassinato, espionagem, furtividade, camuflagem,
armas especializadas e um vasta coleção de artes
marciais.”
Wikipédia (http://en.wikipedia.org/wiki/Ninja)
“Os Japoneses desenvolveram as artes Ninja ao
extremo, criando assassinos mortais, que podem
entrar em qualquer lugar sem serem notados e agir
quando menos esperado.”
The Illuminated Lantern (http://www.illuminatedlantern.com/cinema/archives/ninja.php)

16. Anatomia de um Ninja
(ou JS Não-obtrusivo)
•Acessível
•Degradativo
•Funcional
•Belo
Não-Obtrusivo
“1. Not noticeable or
blatant; inconspicuous”
“Um ninja que chega
sorrateiramente, quase
imperceptível e faz seu
trabalho”

17.  Boas práticas e padrões
 Separar o comportamento do conteúdo
 Melhorar funcionalidade, não impor
 Degradação Graciosa
 AJAX
 DOM Scripting
 Cross-Browser Scripting
 Delegação (e não Manipulação) de Eventos

18. Temporada de caça aos Ogros

19. (Jiraya, Tartaruga Ninja, Ninja Gaiden, Sub-zero ou Naruto – você escolhe)

20.  Fornecem facilidades para JS Não-Obtrusivo
 Possuem geralmente as mesmas
funcionalidades.
 Abordagens/filosofias/focos diferentes
 Exemplos: Prototype, MooTools, extjs, YUI,
GWT, Dojo, jQuery, Rico, Spry

22.  Filosofia: “write less, do more”
 Intuitividade
 Praticidade
 Acorrentamento
 Licensa MIT e GPL
 Se Microsoft e Nokia podem, porque eu não?
 Google, Mozilla, IBM, Dell, BBC, Digg,
Amazon, Sourceforge, Wordpress, Drupal...

23. (chega de papo e vamos ao que interessa!)

24.  jQuery (1.2.6)
 Firefox
 Firebug
 FirePHP
 Web Developer Toolbar
 Opera, Safari e... Internet Explorer

25.  Básicos
 Hierárquicos
 Avançados
 Filtros
 Formulários
 Filhos

26.  *
 elemento
 .classe
 #id
 seletor1, seletor2, seletor3
* {border: 1px solid red}
input {padding: 3px;}
.alinhadoEspecial {margin-left: 50px;}
#menuNavegacao {width: 300px;}
h1, h2, .titulos, #tituloHome {font-family: Tahoma;}
h1#primeiro.discreto { text-transform: lowercase; }

27.  ancestral descendente (dentro de...)
 pai > filho (imediatamente dentro de...)
 anterior + próximo (imediatamente depois de...)
 anterior ~ irmãos (depois de...) – CSS3
#conteudo p {font-family: Arial;}
body > div {margin-left: 200px;}
label + input {border: 1px dotted red;}
h2.discreto ~ a {text-decoration:none;}

28.  :first / :last
 :eq(índice) / :not(seletor) /
 :even / :odd
 :lt(índice) / :gt(indice)
 [atributo] / [atributo=valor] / [att1][att2]
table:first { border: 1px solid blue; }
table *:not(tr) { padding: 5px; }
table.zebra td:even { background: black; }
#navegacao li:lt(3) { color: blue; }
input[name][type=text] { color: red; }

29.  :input
 :text / :password / :hidden
 :button / :submit / :reset
 :radio / :checkbox
 :enabled / :disabled
 :checked / :selected
:input { border: 1px dotted yellow; }
form :radio { margin-left: 5px; }
:checkbox:checked { text-decoration: line-through; }

30.  :nth-child( ... )
 :first-child
 :last-child
 :only-child
ul li:nth-child(3){text-decoration: overline;}
table tr:first-child { background: yellow; }
tr td:last-child { backgound: red; }
div:only-child { width: auto; }

31.  jQuery
 jQuery( seletor, *contexto )
 jQuery( html )
 jQuery( elementos )
 jQuery( callback )
 each( callback )
 get( *índice )

32. Métodos de “Traversing” (ou “aproximando-se sorrateiramente”)

33.  Encontrando quem você procura
 add( seletor )
 not( seletor )
 filter( seletor / função )
 eq( índice )
 hasClass( classe )
 is( seletor )
 andSelf() / end()

34.  Indo até quem você procura
 parent( *seletor ) / parents( *seletor )
 children( *seletor )
 siblings( *seletor )
 prev( *seletor )
 next( *seletor )
 prevAll( *seletor )

35. Métodos de “Attributes” (ou “caindo na mão”)

36.  attr( nome, *valor ) / attr( propriedades )
 removeAttr( nome )
 addClass( classe ) / removeClass (classe )
 css( nome, *valor ) / css( propriedades )
 height( *valor ) / width( *valor )
 html( *valor )
 text( *valor )
 val( *valor )

37. Métodos de “Manipulation” (ou “causando um estrago maior”)

38.  append[To]( conteúdo )
 prepend[To]( conteúdo )
 [insert]after( conteúdo )
 [insert]before( conteúdo )
 wrap[Inner/All]( html/elemento )
 replace[With/All]( conteúdo/seletor )
 empty()
 remove( seletor )
 clone( [copiar-eventos] )

39. Métodos de “Events” (ou “esperando a hora de dar o troco”)

40.  bind( tipo, *dados, função )
 unbind( *tipo, *função )
 one( tipo, *dados, função )
 trigger( tipo, *dados )
 triggerHandler( tipo, *dados )

41.  focus( *função ) , blur( *função )
 click( *função ), dblclick( *função )
 keydown( *função ), keyup( *função )
 keypress( *função )
 select( *função )
 change( *função )
 error( *função )
 submit( *função )

42.  load( função ), unload( função )
 scroll( função ), resize( função )
 mousedown( função ), mouseup( função )
 mousemove( função )
 mouseover( função ), mouseout( função )
 hover( entra, sai )
 toggle( uma, outra )

43. Métodos de “Effetcs” (ou “fazendo a mágica acontecer”)

44.  show/hide( *speed,*função )
 toggle()
 slide[Up/Down]( *speed, [*função )
 slideToggle( *speed, *função )
 fade[In/Out]( *speed, *função )
 slideTo ( speed, opacidade, *função )

45. Métodos de “AJAX” (ou “invocando a irmandade secreta”)

46.  load(url, *dados, *callback)
 $.post(url, *dados, *callback)
 $.get(url, *dados, *callback)
 $.getJSON(url, *dados, *callback)
 $.getScript(url, *dados, *callback)
 $.ajax( opções )

47. Métodos de “Utilities” (ou “tornando as coisas mais fáceis”)

48.  $.each( objeto, callback )
 $.extend( alvo, obj1, obj2, ... )
 $.unique( array )
 $.grep( array, callback, *inverter)
 $.map( array, callback )
 $.inArray( valor, array )
 $.isFunction( variável )
 $.trim( string )

49. Extendendo o jQuery (ou “ensinando novos truques a macacos velhos”)

50.  Maneira simplificada de se criar plugins
 Abordagens
 Estender a classe jQuery (métdos ou seletores)
 Estender um objeto jQuery
 Permite integrar funcionalidades à filosofia
jQuery

51.  Métodos
 Funções utilitárias
 Independentes do Documento (DOM)
jQuery.extend({
min: function(a, b){
return a < b ? a : b;
}
})

52.  Seletores
 Estendem a abstração
jQuery.extend(jQuery.expr[quot;:quot;], {
anamed: quot;a.name==undefined”,
unamed: quot;a.name==‘’”
});
 $(‘*:anamed’)
 $(‘*:unamed’)

53.  Adiciona funcionalidades que dependam do
funcionamento do jQuery
jQuery.fn.extend({
check: function() {
this.each(function() { this.checked = true; });
},
uncheck: function() {
this.each(function() { this.checked = false; });
}
});

54.  Proteja seu código
 Proteja o ambiente
 Mantenha acorrentável
 Mantenha intuitivo

55.  O que é isso?
(function() {
//Seu código
})();

56.  Que tal?
function teste() {
//Seu código
};
teste();

57.  Qual o problema?
var externa = 0;
(function(){
externa += 10;
})();

58.  E agora?
var externa = 0;
(function(){
externa += 10;
(function(){
externa += 10;
})();
})();

59.  http://pt.wikipedia.org/wiki/Closure
 Pode causar erros
 Pode ser útil (macros, por exemplo)
var eventos = [‘click’, ‘focus’, ‘blur’, ...];
jQuery.each(eventos, function(i, nome){
jQuery.protype[nome] = function(fn){
return this.bind(nome, fn);
};
});

60.  Qual o problema?
var externa = 0;
(function(){
var externa;
externa += 10;
})();

61.  E agora?
var externa = 0;
(function(){
var externa;
externa += 10;
(function(){
externa += 10;
})();
})();

62.  Seu código e o ambiente ficam protegidos
 Seu código pode coexistir com outros códigos
aleatórios do site
 Seu código pode coexistir com outras cópias da
sua biblioteca
 Seu código pode ser utilizado em outra biblioteca

63. (function($){
//Suas variáveis locais
//Seu código
})(jQuery);

64.  Lembra?
jQuery.fn.extend({
check: function() {
this.each(function() { this.checked = true; });
},
uncheck: function() {
this.each(function() { this.checked = false;
});
}
});

65. jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true; });
},
uncheck: function() {
return this.each(function() {
this.checked = false; });
}
});

66. jQuery UI (ou “porque uma imagem vale mais que mil palavras”)

68.  Draggables
 Droppables
 Sortables
 Selectables
 Resizables

69.  Accordion
 Datepicker
 Dialog
 Slider
 Tabs

70.  Blind
 Clip
 Drop
 Explode
 Fold
 Puff
 Slide
 Scale
 Size
 Pulsate
 Bounce
 Highlight
 Shake
 Transfer

71. Se eles conseguiram, você também pode...

72. Reinaldo de Souza Junior
palestras@reinaldojunior.net
< http://reinaldojunior.net >
(Hi-Yaaaaaaaaaaa...)
O-bri-ga-do
Dúvidas? Comentários? Reclamações? Sugestões?
Piadinhas sem graça?