DOM, JavaScript e jQuery: revisão de conceitos fundamentais

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;

Model

Representação de um documento HTML e sua árvore DOM

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.

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;

Model

COM suporte HTML5

Model

SEM suporte HTML5

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.

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-- ; );

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';
}

console.log() Envia mensagens;
console.dir() Registra um objeto
navegável;
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

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

Revisando...
DOM
JavaScript
jQuery

OBRIGADO !

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

DOM, JavaScript e jQuery: revisão de conceitos fundamentais

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie DOM, JavaScript e jQuery: revisão de conceitos fundamentais

Ähnlich wie DOM, JavaScript e jQuery: revisão de conceitos fundamentais (20)

DOM, JavaScript e jQuery: revisão de conceitos fundamentais