2. 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;
3. DOM - Document Object
Model
Representação de um documento HTML e sua árvore DOM
4. 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.
5. 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;
8. 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
<BODY>.
Por isso devemos usar modernizr ou
HTML5shiv, para que o browser reconheça
elementos HTML5 e monte a árvore DOM
corretamente.
9. 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.
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. 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.
12. 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
13.
14. 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.
15. 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;
16. JavaScript - Boas Práticas
use:
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-- ; );
17. 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';
}
19. Framework jQuery
jQuery é um framework, é uma abstração que
une códigos comuns para prover uma
funcionalidade genérica;
20. 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
21. 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"
22. 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
23. 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;
24. jQuery Mobile
Web 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.