JavaScript ninja com jQuery

7,253 views
7,153 views

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,253
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
244
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

JavaScript ninja com jQuery

  1. 1. Reinaldo Junior http://reinaldojunior.net
  2. 2. (ou ao menos ouviu falar?)
  3. 3.  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
  4. 4.  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...
  5. 5.  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).
  6. 6. Anatomia de um Ogro (ou JS Obtrusivo) •Não acessível •Destrutivo •Irritante •Assustador •Obtrusivo
  7. 7. 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>
  8. 8. “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)
  9. 9. 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”
  10. 10.  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
  11. 11. Temporada de caça aos Ogros
  12. 12. (Jiraya, Tartaruga Ninja, Ninja Gaiden, Sub-zero ou Naruto – você escolhe)
  13. 13.  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
  14. 14.  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...
  15. 15. (chega de papo e vamos ao que interessa!)
  16. 16.  jQuery (1.2.6)  Firefox  Firebug  FirePHP  Web Developer Toolbar  Opera, Safari e... Internet Explorer
  17. 17.  Básicos  Hierárquicos  Avançados  Filtros  Formulários  Filhos
  18. 18.  *  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; }
  19. 19.  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;}
  20. 20.  :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; }
  21. 21.  :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; }
  22. 22.  :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; }
  23. 23.  jQuery  jQuery( seletor, *contexto )  jQuery( html )  jQuery( elementos )  jQuery( callback )  each( callback )  get( *índice )
  24. 24. Métodos de “Traversing” (ou “aproximando-se sorrateiramente”)
  25. 25.  Encontrando quem você procura  add( seletor )  not( seletor )  filter( seletor / função )  eq( índice )  hasClass( classe )  is( seletor )  andSelf() / end()
  26. 26.  Indo até quem você procura  parent( *seletor ) / parents( *seletor )  children( *seletor )  siblings( *seletor )  prev( *seletor )  next( *seletor )  prevAll( *seletor )
  27. 27. Métodos de “Attributes” (ou “caindo na mão”)
  28. 28.  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 )
  29. 29. Métodos de “Manipulation” (ou “causando um estrago maior”)
  30. 30.  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] )
  31. 31. Métodos de “Events” (ou “esperando a hora de dar o troco”)
  32. 32.  bind( tipo, *dados, função )  unbind( *tipo, *função )  one( tipo, *dados, função )  trigger( tipo, *dados )  triggerHandler( tipo, *dados )
  33. 33.  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 )
  34. 34.  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 )
  35. 35. Métodos de “Effetcs” (ou “fazendo a mágica acontecer”)
  36. 36.  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 )
  37. 37. Métodos de “AJAX” (ou “invocando a irmandade secreta”)
  38. 38.  load(url, *dados, *callback)  $.post(url, *dados, *callback)  $.get(url, *dados, *callback)  $.getJSON(url, *dados, *callback)  $.getScript(url, *dados, *callback)  $.ajax( opções )
  39. 39. Métodos de “Utilities” (ou “tornando as coisas mais fáceis”)
  40. 40.  $.each( objeto, callback )  $.extend( alvo, obj1, obj2, ... )  $.unique( array )  $.grep( array, callback, *inverter)  $.map( array, callback )  $.inArray( valor, array )  $.isFunction( variável )  $.trim( string )
  41. 41. Extendendo o jQuery (ou “ensinando novos truques a macacos velhos”)
  42. 42.  Maneira simplificada de se criar plugins  Abordagens  Estender a classe jQuery (métdos ou seletores)  Estender um objeto jQuery  Permite integrar funcionalidades à filosofia jQuery
  43. 43.  Métodos  Funções utilitárias  Independentes do Documento (DOM) jQuery.extend({ min: function(a, b){ return a < b ? a : b; } })
  44. 44.  Seletores  Estendem a abstração jQuery.extend(jQuery.expr[quot;:quot;], { anamed: quot;a.name==undefined”, unamed: quot;a.name==‘’” });  $(‘*:anamed’)  $(‘*:unamed’)
  45. 45.  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; }); } });
  46. 46.  Proteja seu código  Proteja o ambiente  Mantenha acorrentável  Mantenha intuitivo
  47. 47.  O que é isso? (function() { //Seu código })();
  48. 48.  Que tal? function teste() { //Seu código }; teste();
  49. 49.  Qual o problema? var externa = 0; (function(){ externa += 10; })();
  50. 50.  E agora? var externa = 0; (function(){ externa += 10; (function(){ externa += 10; })(); })();
  51. 51.  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); }; });
  52. 52.  Qual o problema? var externa = 0; (function(){ var externa; externa += 10; })();
  53. 53.  E agora? var externa = 0; (function(){ var externa; externa += 10; (function(){ externa += 10; })(); })();
  54. 54.  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
  55. 55. (function($){ //Suas variáveis locais //Seu código })(jQuery);
  56. 56.  Lembra? jQuery.fn.extend({ check: function() { this.each(function() { this.checked = true; }); }, uncheck: function() { this.each(function() { this.checked = false; }); } });
  57. 57. jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } });
  58. 58. jQuery UI (ou “porque uma imagem vale mais que mil palavras”)
  59. 59.  Draggables  Droppables  Sortables  Selectables  Resizables
  60. 60.  Accordion  Datepicker  Dialog  Slider  Tabs
  61. 61.  Blind  Clip  Drop  Explode  Fold  Puff  Slide  Scale  Size  Pulsate  Bounce  Highlight  Shake  Transfer
  62. 62. Se eles conseguiram, você também pode...
  63. 63. 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?

×