JavaScript Framework jQuery Tonin R. Bolzan & Fernando Sávio R. Dominguez Jr 

DOM - Document Object Model Criado pelo W3C, O DOM é uma API independente de linguagem que representa como as marcações em HTML e XML são organizadas; Disposto em forma de árvore; Nos navegadores a API é JavaScript; Manipular o layout HTML é manipular o DOM; 

DOM - Document Object Model Representação de um documento HTML e sua árvore DOM 

DOM - Document Object Model Esta estrutura não é o que se "vê" (o layout em si); O DOM é a base para uma outra árvore que é o que realmente um browser monta na tela, a Árvore de Renderização (Render Tree); Render Tree possui também objetos que não possuem nós na árvore DOM, como scripts e folhas de estilos. 

DOM - Document Object Model Caso um elemento da árvore DOM tenha uma propriedade "display:none", este elemento e seus nós filhos não serão criados na Render Tree. Ao contrário do uso de "visibility:hidden"; O DOM tem um comportamento ligeiramente diferente com páginas HTML5; 

DOM - Document Object Model COM suporte HTML5 

DOM - Document Object Model SEM suporte HTML5 

DOM - Document Object Model Isso acontece por que, quando o browser não reconhece um elemento, ele posiciona o elemento desconhecido como um nó filho de . Por isso devemos usar modernizr ou HTML5shiv, para que o browser reconheça elementos HTML5 e monte a árvore DOM corretamente. 

Reflows Reflow é o resultado de um evento que desencadeia mudanças na disposição dos elementos de uma página, modificando a maneira como ela vai ser renderizada na página. Esse processo toma tempo para o cálculo e reposicionamento dos elementos. 

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; 

Repaint Repaint é o resultado de um evento que desencadeia mudanças na apresentação dos elementos de uma página sem alterar a disposição do elementos. Ao contrário do Reflow, o Repaint não modifica a posição dos elementos na página. 

DOM - Document Object Model Mexer no DOM é "caro", pois causa Reflows e/ou Repaints, mas principalmente pelo DOM ser uma API independente; Temos uma ponte para atravessar com um pedágio aonde o preço é dado em desempenho; DOM --------------------- JavaScript 

No content

ECMAScript ECMAScript é uma linguagem de programação baseada em scripts, padronizada pela Ecma Internacional na especificação ECMA-262. Javascript, JScript e ActionScript não são nada mais que dialetos de ECMAScript. 

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; 

use: for(var i=0, l=vetor.length ; i

JavaScript - Boas Práticas use: function(){ var x = 0, y; if(x > 1) y = 'Javascript'; } ao invés de: function(){ var x = 0; if(x > 1) var y = 'Hoisting'; } 

JavaScript - Boas Práticas console.log() Envia mensagens; console.dir() Registra objetos navegáveis; console.warn() Registra warnings; console.error() Registra msg de erro; 

Framework jQuery jQuery é um framework, é uma abstração que une códigos comuns para prover uma funcionalidade genérica; 

jQuery 1.8.0 - ChangeLog MELHORADO Agora é 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 adicionados automaticamente; IE 6,7 e 8 continuam a ser suportados, teve mais de 160 correções de bugs; 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 conjunção com $(html, props) 

jQuery - Iniciando $(document).ready(function() {console.log('pronto!');}); $(function() {console.log('pronto!');}); $ == jQuery var meujQuery = jQuery.noConflict(); var meujQuery = $.noConflict(); (function($) { // seu código aqui, usando o $ })(jQuery); $.fn.jquery == "1.8.0" 

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 

jQuery UI jQuery UI (User Interface) é uma extensão do framework jQuery que fornece funcionalidades de 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; 

jQuery Mobile Framework Javascript criado sobre os frameworks jQuery e jQuery UI voltado para Smartphones e Tablets (otimizado para eventos de toque). Suporte a temas e vários widgets comuns em interfaces de dispositivos móveis. 

Revisando... DOM JavaScript jQuery 

OBRIGADO ! Tonin R. Bolzan & Fernando Sávio R. Dominguez Jr