Javascript, DOM e jQuery

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 <BODY>. 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

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<l ; i++); ao invés
de: for(var i=0 ; i<vetor.length ; i++); e se der: for(var i=vetor.length ; i-- ; ); JavaScript - Boas Práticas

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

Javascript, DOM e jQuery

Javascript, DOM e jQuery

Tonin Bolzan

More Decks by Tonin Bolzan

Other Decks in Programming

Featured

Transcript

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

DOM - Document Object Model Criado pelo W3C, O DOM

DOM - Document Object Model Representação de um documento HTML

DOM - Document Object Model Esta estrutura não é o

DOM - Document Object Model Caso um elemento da árvore

DOM - Document Object Model COM suporte HTML5

DOM - Document Object Model SEM suporte HTML5

DOM - Document Object Model Isso acontece por que, quando

Reflows Reflow é o resultado de um evento que desencadeia

O que causa os Reflows • Atualizar, remover ou atualizar

Repaint Repaint é o resultado de um evento que desencadeia

DOM - Document Object Model Mexer no DOM é "caro",

ECMAScript ECMAScript é uma linguagem de programação baseada em scripts,

JavaScript - Boas Práticas • Sempre utilize "var" para declarar

use: for(var i=0, l=vetor.length ; i<l ; i++); ao invés

JavaScript - Boas Práticas use: function(){ var x = 0,

JavaScript - Boas Práticas console.log() Envia mensagens; console.dir() Registra objetos

Framework jQuery jQuery é um framework, é uma abstração que

jQuery 1.8.0 - ChangeLog MELHORADO Agora é modularizado: pode-se remover

jQuery - Iniciando $(document).ready(function() {console.log('pronto!');}); $(function() {console.log('pronto!');}); $ == jQuery

jQuery - Boas Práticas $('#id').filter('ul li') ao invés de $('#id

jQuery UI jQuery UI (User Interface) é uma extensão do

jQuery Mobile Framework Javascript criado sobre os frameworks jQuery e

Revisando... DOM JavaScript jQuery

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