Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript ninja com jQuery

7,478 views

Published on

Published in: Technology
  • Be the first to comment

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?

×