JavaScriptFramework jQuery       Tonin R. Bolzan              &Fernando Sávio R. Dominguez Jr
DOM - Document ObjectModelCriado pelo W3C, O DOM é uma APIindependente de linguagem que representacomo as marcações em HTM...
DOM - Document ObjectModel   Representação de um documento HTML e sua árvore DOM
DOM - Document ObjectModelEsta estrutura não é o que se "vê" (o layout emsi);O DOM é a base para uma outra árvore que é oq...
DOM - Document ObjectModelCaso um elemento da árvore DOM tenha umapropriedade "display:none", este elemento eseus nós filh...
DOM - Document ObjectModel        COM suporte HTML5
DOM - Document ObjectModel         SEM suporte HTML5
DOM - Document ObjectModelIsso acontece por que, quando o browser nãoreconhece um elemento, ele posiciona oelemento descon...
ReflowsReflow é o resultado de um evento quedesencadeia mudanças na disposição doselementos de uma página, modificando ama...
O que causa os Reflows● Atualizar, remover ou atualizar o DOM;● Esconder nós com display: none;● Mover ou animar o DOM na ...
RepaintRepaint é o resultado de um evento quedesencadeia mudanças na apresentação doselementos de uma página sem alterar a...
DOM - Document ObjectModelMexer no DOM é "caro", pois causa Reflowse/ou Repaints, mas principalmente pelo DOMser uma API i...
ECMAScriptECMAScript é uma linguagem de programaçãobaseada em scripts, padronizada pela EcmaInternacional na especificação...
JavaScript - Boas Práticas● Sempre utilize "var" para declarar variáveis;● Variáveis locais são acessadas mais  rápidament...
JavaScript - Boas Práticasuse:   for(var i=0, l=vetor.length ; i<l ; i++);ao invés de:   for(var i=0 ; i<vetor.length ; i+...
JavaScript - Boas Práticasuse:   function(){           var x = 0, y;           if(x > 1)                y = Javascript;   ...
JavaScript - Boas Práticasconsole.log()     Envia mensagens;console.dir()     Registra um objetonavegável;console.warn()  ...
Framework jQueryjQuery é um framework, é uma abstração queune códigos comuns para prover umafuncionalidade genérica;
jQuery 1.8.0 - ChangeLogMELHORADOAgora é modularizado: pode-se remover módulos ajax, css, effects,etc...;Sizzle reestrutur...
jQuery - Iniciando$(document).ready(function() {console.log(pronto!);});$(function() {console.log(pronto!);});$ == jQueryv...
jQuery - Boas Práticas$(#id).filter(ul li) ao invés de $(#id ul li)$(.data td.gonzalez) ao invés de $(div.data .gonzalez)$...
jQuery UIjQuery UI (User Interface) é uma extensão doframework jQuery que fornece funcionalidadesde interface com o usuári...
jQuery MobileWeb Framework Javascript criado sobre osframeworks jQuery e jQuery UI voltado paraSmartphones e Tablets (otim...
Revisando...DOMJavaScriptjQuery
OBRIGADO !       Tonin R. Bolzan              &Fernando Sávio R. Dominguez Jr
ODIG - Javascript, DOM Elements e jQuery
Próximos SlideShares
Carregando em…5
×

ODIG - Javascript, DOM Elements e jQuery

949 visualizações

Publicada em

Mini-curso desenvolvido por programadores da ODIG Soluções Digitais com o objetivo de disseminar conhecimentos e capacitar a equipe.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

ODIG - Javascript, DOM Elements e jQuery

  1. 1. JavaScriptFramework jQuery Tonin R. Bolzan &Fernando Sávio R. Dominguez Jr
  2. 2. DOM - Document ObjectModelCriado pelo W3C, O DOM é uma APIindependente de linguagem que representacomo as marcações em HTML e XML sãoorganizadas;Disposto em forma de árvore;Nos navegadores a API é JavaScript;Manipular o layout HTML é manipular o DOM;
  3. 3. DOM - Document ObjectModel Representação de um documento HTML e sua árvore DOM
  4. 4. DOM - Document ObjectModelEsta estrutura não é o que se "vê" (o layout emsi);O DOM é a base para uma outra árvore que é oque realmente um browser monta na tela, aÁrvore de Renderização (Render Tree);Render Tree possui também objetos que nãopossuem nós na árvore DOM, como scripts efolhas de estilos.
  5. 5. DOM - Document ObjectModelCaso um elemento da árvore DOM tenha umapropriedade "display:none", este elemento eseus nós filhos não serão criados na RenderTree. Ao contrário do uso de "visibility:hidden";O DOM tem um comportamento ligeiramentediferente com páginas HTML5;
  6. 6. DOM - Document ObjectModel COM suporte HTML5
  7. 7. DOM - Document ObjectModel SEM suporte HTML5
  8. 8. DOM - Document ObjectModelIsso acontece por que, quando o browser nãoreconhece um elemento, ele posiciona oelemento desconhecido como um nó filho de<BODY>.Por isso devemos usar modernizr ouHTML5shiv, para que o browser reconheçaelementos HTML5 e monte a árvore DOMcorretamente.
  9. 9. ReflowsReflow é o resultado de um evento quedesencadeia mudanças na disposição doselementos de uma página, modificando amaneira como ela vai ser renderizada napágina.Esse processo toma tempo para o cálculo ereposicionamento dos elementos.
  10. 10. O que causa os Reflows● Atualizar, remover ou atualizar o DOM;● Esconder nós com display: none;● Mover ou animar o DOM na página;● Adicionar CSS que mude o comportamento dos elementos;● Redimensionar janelas;● Alterar tamanho de fontes;
  11. 11. RepaintRepaint é o resultado de um evento quedesencadeia mudanças na apresentação doselementos de uma página sem alterar adisposição do elementos.Ao contrário do Reflow, o Repaint não modificaa posição dos elementos na página.
  12. 12. DOM - Document ObjectModelMexer no DOM é "caro", pois causa Reflowse/ou Repaints, mas principalmente pelo DOMser uma API independente;Temos uma ponte para atravessar com umpedágio aonde o preço é dado em desempenho; DOM --------------------- JavaScript
  13. 13. ECMAScriptECMAScript é uma linguagem de programaçãobaseada em scripts, padronizada pela EcmaInternacional na especificação ECMA-262.Javascript, JScript e ActionScript não são nadamais que dialetos de ECMAScript.
  14. 14. JavaScript - Boas Práticas● Sempre utilize "var" para declarar variáveis;● Variáveis locais são acessadas mais rápidamente;● Evite a instrução "with";● Evite o uso de loops "for-in", a menos que necessário;● Evite ao máximo o uso de "eval";● Use "[]" e "{}" ao invés de "new Array()" e "new Object()";● Sempre minifique o script que irá para a produção;
  15. 15. JavaScript - Boas Práticasuse: for(var i=0, l=vetor.length ; i<l ; i++);ao invés de: for(var i=0 ; i<vetor.length ; i++);e se der: for(var i=vetor.length ; i-- ; );
  16. 16. JavaScript - Boas Práticasuse: function(){ var x = 0, y; if(x > 1) y = Javascript; }ao invés de: function(){ var x = 0; if(x > 1) var y = Hoisting; }
  17. 17. JavaScript - Boas Práticasconsole.log() Envia mensagens;console.dir() Registra um objetonavegável;console.warn() Registra warnings;console.error() Registra msg de erro;
  18. 18. Framework jQueryjQuery é um framework, é uma abstração queune códigos comuns para prover umafuncionalidade genérica;
  19. 19. jQuery 1.8.0 - ChangeLogMELHORADOAgora é modularizado: pode-se remover módulos ajax, css, effects,etc...;Sizzle reestruturado: motor de seletores mais rápidos;Atualizaram e limparam o código de animações da biblioteca;Prefixos CSS, como -webkit, -moz e -ms são adicionadosautomaticamente;IE 6,7 e 8 continuam a ser suportados, teve mais de 160 correções debugs;O tamanho total da nova versão diminuiu algumas centenas de bytes;REMOVIDO$(element).closest(Array) retornando Array (Usado para o ".live()")$.curCSS : Era um alias para jQuery.css()$.attrFn : Utilizada para definir quais os métodos podem ser usados ​em
  20. 20. jQuery - Iniciando$(document).ready(function() {console.log(pronto!);});$(function() {console.log(pronto!);});$ == jQueryvar meujQuery = jQuery.noConflict();var meujQuery = $.noConflict();(function($) { // seu código aqui, usando o $})(jQuery);$.fn.jquery == "1.8.0"
  21. 21. jQuery - Boas Práticas$(#id).filter(ul li) ao invés de $(#id ul li)$(.data td.gonzalez) ao invés de $(div.data .gonzalez)$(.data td.teste) ao invés de $(.data table.blabla td.teste)$(.buttons).children() ao invés de $(.buttons > *)$(.gender input:radio) ao invés de $(.gender :radio).on() ao invés de .live() .bind() .delegate().on(click,function(){}) ao invés de .click(function(){}).trigger(click) ao invés de .click()$.GET deve ser usado para operações não-destrutivas$.POST deve ser usado para operações destrutivas
  22. 22. jQuery UIjQuery UI (User Interface) é uma extensão doframework jQuery que fornece funcionalidadesde interface com o usuário, como animações,efeitos, temas, etc.Algumas funcionalidades: Widgets - accordion, datepicker, dialog, progress bar, slider, tabs; Interações - draggable, droppable, resizable, sortable, selectable;
  23. 23. jQuery MobileWeb Framework Javascript criado sobre osframeworks jQuery e jQuery UI voltado paraSmartphones e Tablets (otimizado para eventosde toque).Suporte a temas e vários widgets comuns eminterfaces de dispositivos móveis.
  24. 24. Revisando...DOMJavaScriptjQuery
  25. 25. OBRIGADO ! Tonin R. Bolzan &Fernando Sávio R. Dominguez Jr

×